• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
All aboutweb
 

All aboutweb

on

  • 453 views

Web Programming & Designing

Web Programming & Designing

Statistics

Views

Total Views
453
Views on SlideShare
453
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    All aboutweb All aboutweb Presentation Transcript

    • S.K.Ahsan 1
    •  The Web, is a system of interlinked hypertext documents contained on the Internet. With a web browser, one can view web pages that may contain  text, images, videos, and other multimedia and navigate between them using hyperlinks.S.K.Ahsan 2
    • Introduction History HTML(Hyper Text Mark Up Language) Medium Web Application Content Management System(CMS) Search Engines Web Design Development Tools ConclusionS.K.Ahsan 3
    •  The Web, is a system of interlinked hypertext documents contained on the Internet.  With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them using hyperlinks.S.K.Ahsan 4
    • S.K.Ahsan 5
    • Web 1.0 Web 2.0 Web Web 5.0 Web 4.0 3.0S.K.Ahsan 6
    • Web 3.0 Web 2.0 The web 3.0 will be known as Semantic Web 1.0 Dynamic user- It will be fully generated content implemented in Static pages instead pages. 2015. of dynamic user- Multimedia of all Massively online generated content. types can be gaming and fully Online guestbook’s. presented over the functional virtual HTML forms sent inter net world via email. Cross platform GIF buttons, issues are reduced typically 88x31 Introduction to E- Business. pixelsS.K.Ahsan 7
    • What is web application? Why we need web application? A web application is an application We need web application to that is accessed via a web browser create communication between over a network such as the Internet or an intranet. users and organizations to share resources via internet.S.K.Ahsan 8
    • S.K.Ahsan 9
    • Inventor of world wide web(www) Tim Berners-Lee On 25 December 1990 with the help of Robert Cailliau and a young student at CERN, he implemented the first successful communication between an HTTP client and server via the Internet.S.K.Ahsan 10
    • 1 2 3 The Standard SGML descended from •The SGML Declaration Generalized Markup IBMs Generalized •The instance itself, Language (ISO Markup Language (GML) containing the top-most 8879:1986 SGML) is an that Charles Goldfarb, element and its contents. ISO-standard technology Edward Mosher, and •The Prolog, containing a for defining generalized Raymond Lorie DOCTYPE declaration markup languages for developed in the 1960s. which is known as documents. Document Type Definition (DTD).S.K.Ahsan 11
    • Server Network Client Web Server The network includes describes the Client is hardware and various concerned with software as connectivity the web browser well as elements and its supported programming utilized to technologies, such elements and deliver the as HTML, CSS built in Web sites to and Java Script. technologies. the user.S.K.Ahsan 12
    •  A webpage is a single HTML document.  A website is a collection of related web pages.  Designing a good website requires more than just putting together a few pagesS.K.Ahsan 13
    • S.K.Ahsan 14
    •  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language  A markup language is a set of markup tags  HTML uses markup tags to describe web pagesS.K.Ahsan 15
    • SGML HTML DTD&DOM TYPES 16
    • HTML Document Object Document Type Model(DOM) Definition (DTD) The DOM is a W3C The set of markup specification that gives a declarations that define common way for a document type for programs to access a SGML-family markup document as a set of languages (SGML, objects. XML, HTML)S.K.Ahsan 17
    •  XML is a markup language much like HTML  XML was designed to carry data, not to display data  XML tags are not predefined. You must define your own tags  XML is designed to be self-descriptive  XML is a W3C Recommendation.S.K.Ahsan 18
    • S.K.Ahsan 19
    • S.K.Ahsan 20
    •  WEB DESIGN is the process of planning and creating a website.  Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser. Web designers utilize markup language, most notably HTML for structure and CSS for presentation as well as JavaScript to add interactivity to develop pages that can be read by web browsers.S.K.Ahsan 21
    • S.K.Ahsan 22
    •  The History of Web Designing has evolved over a matter of one and a half decades as of now.  After the initial hype over the website media and a confused phase of both developers and clients, web communication today has evolved as one of the most diversified and successful medium of advertisement and knowledge outsourcing.  However, the history of web designing germinated from CERN, a renowned physics institute, where Tim Berners Lee was working. The credit of development of the WWW goes to this man.S.K.Ahsan 23
    •  It was because of the need to circulate Lees research papers among the concerned people that he decided to work on HTML and browser software.  That was the year 1993 when Mosaic web browser had become the platform for sharing information among the scientists of CERN.  Web page development as we know it today was still unknown and graphical image representation did not happen.S.K.Ahsan 24
    •  In 1994 the W3C decides upon the rules and standards of web development language of HTML. Thus HTML 2, 3, and 4 was developed.  As a whole, the process of web design can include conceptualization, planning, producing, post-production, research, advertising.  The site itself can be divided up into pages. The site is navigated by using hyperlinks, which are commonly blue and underlined but can be made to look like anything the designer wishes.S.K.Ahsan 25
    •  Process of developing.  Need of web designing?S.K.Ahsan 26
    •  HTML  CSS  Php  Java script  Mysql  Jquerry  Java  Ajax  Xml  AspS.K.Ahsan 27
    • S.K.Ahsan 28
    •  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added to HTML 4.0 to solve a problem  External Style Sheets can save a lot of work  External Style Sheets are stored in CSS filesS.K.Ahsan 29
    • Style Sheets XSL(Extensible Style Sheet Language) XML CSS(Cascading Style Applied on Sheets) Unique Tags HTML Describe the Style Advance data Rules of web pages storing Simple Syntax Reusability Advance designS.K.Ahsan 30
    • CSS 3 CSS 2 Currently under development CSS 1 May 1998 Rounded Corner Superset of CSS1 Text Shadow December 1996 Flexible Layouts Border Image Font properties and it used Layer Using Any Color of text and designing (DIV Custom Font backgrounds based). Multiple Text attributes Introduction to Backgrounds Alignment of text, Selectors and images through Tables classes.S.K.Ahsan 31
    • S.K.Ahsan 32
    •  JavaScript was designed to add interactivity to HTML pages  JavaScript is a scripting language  A scripting language is a lightweight programming language  JavaScript is usually embedded directly into HTML pages  JavaScript is an interpreted language (means that scripts execute without preliminary compilation)  Everyone can use JavaScript without purchasing a licenseS.K.Ahsan 33
    • Java script VBScript JavaScript was created by VBScript was introduced in Netscape in 1995. 1996 by Microsoft. Simple multimedia effects like Expert behavior in forums development for websites. image rollovers or add Cross web browser issues. relatively sophisticated tools. Not preferred by Java Script can be written Web developers. directly in HTML.S.K.Ahsan 34
    •  jQuery is a library of JavaScript Functions.  jQuery is a lightweight "write less, do more" JavaScript library.  The jQuery library contains the following features:  HTML element selections  HTML element manipulation  CSS manipulation  HTML event functions  JavaScript Effects and animations  HTML DOM traversal and modification  AJAX  UtilitiesS.K.Ahsan 35
    •  AJAX = Asynchronous JavaScript and XML.  AJAX is a technique for creating fast and dynamic web pages.  AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.  Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.  Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabsS.K.Ahsan 36
    • S.K.Ahsan 37
    •  ASP is a powerful tool for making dynamic and interactive Web pages.  ASP stands for Active Server Pages  ASP is a Microsoft Technology  ASP is a program that runs inside IIS  IIS stands for Internet Information Services  IIS comes as a free component with Windows 2000  IIS is also a part of the Windows NT 4.0 Option Pack  The Option Pack can be downloaded from Microsoft  PWS is a smaller - but fully functional - version of IIS  PWS can be found on your Windows 95/98 CDS.K.Ahsan 38
    •  PHP stands for PHP: Hypertext Preprocessor  PHP is a server-side scripting language, like ASP  PHP scripts are executed on the server  PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)  PHP is an open source software  PHP is free to download and useS.K.Ahsan 39
    • PHP ASP.NET Hypertext Preprocessor Developed The initial prototype was called by Rasmus Lerdorf. "XSP“ but it became afterwards This was written in C language Active Server Pages (ASP) influenced by PERL 1994. technology. Open Source Language. It is built on the Common It is a CGI(Common Gateway Language Runtime (CLR). Interface ) scripting Language. Abnormal Behavior with HTML+CSS.S.K.Ahsan 40
    • S.K.Ahsan 41
    • What is web browser? A Web browser is a software An information resource is identified by a Uniform Resource Identifier (URI) application for retrieving, presenting, and may be a web page, image, video, or and traversing information resources on other piece of content. a Uniform the World Wide Web. Resource Locator (URL) is a subset of the Uniform Resource Identifier (URI).S.K.Ahsan 42
    • Web Browser First Browser was Mosaic by NCSA(National Center for Supercomputing Applications). oReleased on 22 April 1993. oUnix 2.6 , Windows 3.0 Mac OS. oCross-platform oWritten in CS.K.Ahsan 43
    • S.K.Ahsan Mr.Khan 44
    • large number of people to contribute A Content Management System to and share stored (CMS) is a collection of procedures data used to manage work flow in a Improve communication collaborative environment. These Aid in easy storage procedures can be manual or and retrieval of data computer-based.  Reduce repetitive duplicate input Improve the ease of report writingS.K.Ahsan 45
    • CMS Document Management Enterprise System Mobile Web CMS CMS CMS ECMS WCMS DMS MCMSS.K.Ahsan 46
    •  Test it in-house.  Test it on a sample audience.S.K.Ahsan 47
    •  Layout of web pages is very important  Poor layout makes for -  Difficult navigation  Hard to locate information on page  Visually unappealingS.K.Ahsan 48
    •  Use tables to lay out your pages!  Make the table borders invisible  A 2x2 table works wellS.K.Ahsan Mr.Khan 49
    • logo Header  Content MenuS.K.Ahsan 50
    • Graphics attract more user. 51
    •  Dates need to be correct  Services need to be up-to-date  Hours must be correct  People’s names, email addresses & phone numbers need to be correct  Prices need to be correct  Explore new technologies & encourage innovationS.K.Ahsan 52
    •  Well-organized  Easy to navigate  Attractive  Useful  Up-to-dateS.K.Ahsan 53
    • This document is “living” …in the past. 54
    • An example of a very unattractive site (best viewed online). 55
    • Avoid backgrounds that wash out your text. 56
    •  If you are unique, you’re already useful!  If you are not unique, how do you differ from similar Web sites?  Is your content unique?  Is your approach unique?  Is your audience unique?  Are you more up to date?  Are you better organized?  Are you more comprehensive?S.K.Ahsan 57
    •  Hierarchical organization  Image maps  Tables  FramesS.K.Ahsan 58
    •  Menus in progressive order of most general to more specific  Pros  always gives impression of organization  Cons  Not really necessary unless you have a collection of something  Makes user travel through a number of levels to get to their informationS.K.Ahsan 59
    • Imagemaps can provide easy means of navigation. 60
    •  Standard text, images or links are arranged in tabular format with or without borders  Pros  Allows creator to place items on a page  Looks neat  Cons  Can be tricky, but tables are amazingly useful to the designer.S.K.Ahsan 61
    •  Use in a site that rarely, if ever, goes out to other links on the World Wide Web.  Use a frame to hold a static banner at the top or bottom.  Use a frame to hold a navigation bar at the top, side or bottom of your Web site.S.K.Ahsan 62
    • Test text colors against background colors. 63
    •  Avoid having more than one spinning, whirling, clicking, moving icon or graphic on a page.  Make hyperlinks intuitive so as to avoid the click here text..S.K.Ahsan 64
    •  For example…  Provide white space for easy readability  Limit font usage and typeface usage  Limit text column width  Balance graphics and text on a page  Use complimentary colors with contrast  Standardize on a heading font and text font  Balance the page layout with top/bottom and right/left marginsS.K.Ahsan 65
    •  Banner graphics  Signature icons  Links to local home pagesS.K.Ahsan 66
    • S.K.Ahsan 67
    • Search Engine How a Search Engine work ? A web search engine is a tool designed Web search engines work by storing to search for information on the World information about many web pages, which Wide Web. The search results are they retrieve from the html itself.. The contents of each page are then analyzed to usually presented in a list of results and are commonly called hits. determine how it should be indexed.S.K.Ahsan 68
    • 1993 1998 2003 2009S.K.Ahsan 69
    • Markup Style sheet languages languages Database Web DesignMangement Cycle Client-side scripting Server-side scripting 70
    • S.K.Ahsan 71
    • Adobe Dreamweaver CS6 Visual Studio 2008/2010 JoomlaS.K.Ahsan 72
    • 73
    • S.K.Ahsan 74