Web Design and Development

World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files  Web vs. Internet  Content vs. transport.

World Wide Web History  The World Wide Web was developed at the European Organization for Nuclear Research (CERN).  To share research information on nuclear physics

How web works 1. A user enters a URL into a browser (for example, html). This request is passed to a domain name server. 2. The domain name server returns an IP address for the server that hosts the Web site (for example, ). 3. The browser requests the page from the web server using the IP address specified by the domain name server. 4. The web server returns the page 5. The browser displays the web page on user’s PC

Important Concepts The Browser Software running on your PC like 1.Internet Explorer 2.Netscape 3.Firefox  Renders (displays) the pages on screen  Executes embedded scripts  Automatically invokes additional software as needed.

Important Concepts Web Server  A computer program that is responsible for accepting HTTP requests Web browsers, and sending responses which usually are Web pages such as HTML documents and linked objects (images, etc.). Web Page  A Web page is a text document embedded with HTML tags that define how the text is rendered on screen. Web pages can be created with any text editor or word processor. They are also created in HTML authoring programs (like FrontPage, DreamWeaver) that provide a graphical interface for designing the layout

Important Concepts Caching  Browsers save all web resources (images etc) on the local hard drive  An HTTP request will be sent by the browser that asks for the data only if it has been updated since the last download  If it has not, the cached version will be reused in the rendering step.

Important Concepts Static web page The contents of the page never change, regardless of user or request Dynamic web page Content (text, images, form fields, etc.) on a web page can change, in response to different contexts or conditions. 1. Client Side 2. Server Side

Important Concepts Client-side  The Client-side dynamic content is generated on the client's computer.  The web server retrieves the page and sends it as is.  The web browser then processes the code embedded in the page (normally JavaScript) and displays the page to the user.

Important Concepts Server-side 1. The browser sends an HTTP request. 2. The server retrieves the requested script or program. 3. The server executes the script or program which typically outputs an HTML web page. The program usually obtains input from the query string or standard input which may have been obtained from a submitted web form. 4. The server sends the HTML output to the client's browser 5. PHP, Perl, ASP or ASP.NET, JSP

Imaging for the web Image file size and quality JPEG (Joint Photographic Experts Group)  lossy format  relatively small file sizes  JPEG is designed for compressing either full-colour (24 bit) or grey-scale digital images of "natural" (real-world) scenes. GIF Graphics Interchange Format  lossless  compresses at a ratio of between 3:1 and 5:1  8 bit format colors  Small file size with limited colors  The GIF format supports animation and is still widely used to provide image animation effects

Imaging for the web PNG (Portable Network Graphics)  lossless  supports true color (16 million colors) BMP (bit mapped)  large file size - no compression  not suitable for web pages

Comparison  JPEG is good for storing full-color or grey-scale images of "realistic" scenes; that means scanned photographs and similar material.  Not good for images with very sharp edges: a row of pure-black pixels adjacent to a row of pure-white pixels  GIF images with only a few distinct colors, such as line drawings and simple cartoons.  PNG excels when the image has large areas of uniform color. The lossless PNG format is best suited for editing pictures.

Quality Web Design Contents Think Before You Write 1. Highlight the benefits of the product. 2. Explain how it differs from other products. 3. Persuade customers to buy it.

Quality Web Design  Make Your Content Informative  Features And Benefits  Proofread And Spell Check  Never Post Your First Draft

Accessibility  ALT text descriptions  Avoid text images  Graphs and charts  Page Layout With Tables  Table summaries and captions  Color And Design Choices  Color combinations  Font size and family  Avoid blinking animation

Accessibility  Valid HTML Code  Add STRONG and EM tags  Remove browser-specific code  Accessible Form Design