Web Design Web Design and and

DevelopmentDevelopment

World Wide WebWorld Wide WebWorld Wide Web (WWW World Wide Web (WWW or W3), collection of or W3), collection of globally distributed text globally distributed text and multimedia and multimedia documents and filesdocuments and filesWeb vs. InternetWeb vs. InternetContent vs. transportContent vs. transport. .

World Wide WebWorld Wide Web

HistoryHistory The World Wide Web was developed The World Wide Web was developed

at the European Organization for at the European Organization for Nuclear Research (CERN).Nuclear Research (CERN).

To share research information on To share research information on nuclear physicsnuclear physics

How web worksHow web works

1.1. A user enters a URL into a A user enters a URL into a browser (for example, browser (for example, http://www.google.com/index.hthttp://www.google.com/index.html). This request is passed to a ml). This request is passed to a domain name server.domain name server.

2.2. The domain name server The domain name server returns an IP address for the returns an IP address for the server that hosts the Web site server that hosts the Web site (for example, 212.64.250.250).(for example, 212.64.250.250).

3.3. The browser requests the page The browser requests the page from the web server using the from the web server using the IP address specified by the IP address specified by the domain name server.domain name server.

4.4. The web server returns the The web server returns the pagepage

5.5. The browser displays the web The browser displays the web page on user’s PCpage on user’s PC

Important ConceptsImportant ConceptsThe BrowserThe BrowserSoftware running on your PC like Software running on your PC like

1.1. Internet ExplorerInternet Explorer2.2. NetscapeNetscape3.3. FirefoxFirefox

Renders (displays) the pages on Renders (displays) the pages on screenscreen

Executes embedded scripts Executes embedded scripts Automatically invokes Automatically invokes

additional software as neededadditional software as needed. .

Important ConceptsImportant Concepts

Web ServerWeb Server A computer program that is responsible for accepting A computer program that is responsible for accepting

HTTP requests Web browsers, and sending responses HTTP requests Web browsers, and sending responses which usually are Web pages such as HTML which usually are Web pages such as HTML documents and linked objects (images, etc.).documents and linked objects (images, etc.).

Web PageWeb Page A Web page is a text document embedded with A Web page is a text document embedded with

HTML tags that define how the text is rendered on HTML tags that define how the text is rendered on screen. Web pages can be created with any text screen. Web pages can be created with any text editor or word processor. They are also created in editor or word processor. They are also created in HTML authoring programs (like FrontPage, HTML authoring programs (like FrontPage, DreamWeaver) that provide a graphical interface for DreamWeaver) that provide a graphical interface for designing the layoutdesigning the layout

Important ConceptsImportant Concepts

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

Important ConceptsImportant ConceptsStatic web pageStatic web page

The contents of the page never The contents of the page never change, regardless of user or change, regardless of user or requestrequest

Dynamic web pageDynamic web pageContent (text, images, form Content (text, images, form fields, etc.) on a web page can fields, etc.) on a web page can change, in response to different change, in response to different contexts or conditions.contexts or conditions.

1.1. Client SideClient Side2.2. Server SideServer Side

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

Important ConceptsImportant ConceptsServer-sideServer-side1.1. The browser sends an HTTP request.The browser sends an HTTP request.2.2. The server retrieves the requested The server retrieves the requested

script or program.script or program.3.3. The server executes the script or The server executes the script or

program which typically outputs an program which typically outputs an HTML web page. The program HTML web page. The program usually obtains input from the query usually obtains input from the query string or standard input which may string or standard input which may have been obtained from a have been obtained from a submitted web form.submitted web form.

4.4. The server sends the HTML output to The server sends the HTML output to the client's browser the client's browser

5.5. PHP, Perl, ASP or ASP.NET, JSPPHP, Perl, ASP or ASP.NET, JSP

Imaging for the webImaging for the web

Image file size and qualityImage file size and qualityJPEG (Joint Photographic Experts Group)JPEG (Joint Photographic Experts Group) lossy formatlossy format relatively small file sizesrelatively small file sizes JPEG is designed for compressing either full-colour JPEG is designed for compressing either full-colour

(24 bit) or grey-scale digital images of "natural" (real-(24 bit) or grey-scale digital images of "natural" (real-world) scenes.world) scenes.

GIF Graphics Interchange FormatGIF Graphics Interchange Format losslesslossless compresses at a ratio of between 3:1 and 5:1compresses at a ratio of between 3:1 and 5:1 8 bit format - 256 colors8 bit format - 256 colors Small file size with limited colorsSmall file size with limited colors The GIF format supports animation and is still widely The GIF format supports animation and is still widely

used to provide image animation effectsused to provide image animation effects

Imaging for the webImaging for the web

PNG (Portable Network PNG (Portable Network Graphics)Graphics)

lossless lossless supports true color (16 million supports true color (16 million

colors)colors)

BMP (bit mapped) BMP (bit mapped) large file size - no large file size - no

compressioncompression not suitable for web pagesnot suitable for web pages

ComparisonComparison JPEG is good for storing full-color or JPEG is good for storing full-color or

grey-scale images of "realistic" grey-scale images of "realistic" scenes; that means scanned scenes; that means scanned photographs and similar material.photographs and similar material.

Not good for images with very sharp Not good for images with very sharp edges: a row of pure-black pixels edges: a row of pure-black pixels adjacent to a row of pure-white pixels adjacent to a row of pure-white pixels

GIF images with only a few distinct GIF images with only a few distinct colors, such as line drawings and colors, such as line drawings and simple cartoons. simple cartoons.

PNG excels when the image has large PNG excels when the image has large areas of uniform color. The lossless areas of uniform color. The lossless PNG format is best suited for editing PNG format is best suited for editing pictures.pictures.

Quality Web DesignQuality Web Design

ContentsContents

Think Before You WriteThink Before You Write

1.1. HighlightHighlight the benefits of the the benefits of the product.product.

2.2. ExplainExplain how it differs from how it differs from other products.other products.

3.3. PersuadePersuade customers to buy customers to buy it. it.

Quality Web DesignQuality Web Design

Make Your Content Make Your Content Informative Informative

Features And Benefits Features And Benefits Proofread And Spell CheckProofread And Spell Check Never Post Your First Draft Never Post Your First Draft

AccessibilityAccessibility ALT text descriptionsALT text descriptions Avoid text imagesAvoid text images Graphs and chartsGraphs and charts Page Layout With TablesPage Layout With Tables Table summaries and captionsTable summaries and captions Color And Design ChoicesColor And Design Choices Color combinationsColor combinations Font size and familyFont size and family Avoid blinking animationAvoid blinking animation

AccessibilityAccessibility Valid HTML CodeValid HTML Code Add STRONG and EM tagsAdd STRONG and EM tags Remove browser-specific Remove browser-specific

codecode Accessible Form DesignAccessible Form Design