8/8/2019 Web Dev Lecture 1- 2
1/16
Web DesignWeb Design
andandDevelopmentDevelopment
8/8/2019 Web Dev Lecture 1- 2
2/16
World Wide WebWorld Wide Web
World Wide Web (WWWWorld Wide Web (WWWor W3), collection ofor W3), collection ofglobally distributed textglobally distributed textand multimediaand multimediadocuments and filesdocuments and files
8/8/2019 Web Dev Lecture 1- 2
3/16
How web worksHow web works
1.1. A user enters a URL into aA user enters a URL into abrowser (for example,browser (for example,http://www.google.com/index.http://www.google.com/index.html). This request is passed tohtml). This request is passed toa domain name server.a domain name server.
2.2. The domain name serverThe domain name serverreturns an IP address for thereturns an IP address for theserver that hosts the Web siteserver that hosts the Web site(for example, 212.64.250.250).(for example, 212.64.250.250).
3.3. The browser requests the pageThe browser requests the pagefrom the web server using thefrom the web server using theIP address specified by theIP address specified by the
domain name server.domain name server.4.4. The web server returns theThe web server returns the
pagepage
5.5. The browser displays the webThe browser displays the webpage on users PCpage on users PC
8/8/2019 Web Dev Lecture 1- 2
4/16
Important ConceptsImportant ConceptsThe BrowserThe BrowserSoftware running on your PC likeSoftware running on your PC like
1.1. I
nternet ExplorerI
nternet Explorer2.2. NetscapeNetscape3.3. FirefoxFirefox
Renders (displays) the pagesRenders (displays) the pageson screenon screen
Executes embedded scriptsExecutes embedded scripts Automatically invokesAutomatically invokes
additional software as neededadditional software as needed..
8/8/2019 Web Dev Lecture 1- 2
5/16
Important ConceptsImportant Concepts
Web ServerWeb Server
A computer program that is responsible forA computer program that is responsible foraccepting HTTP requests Web browsers, andaccepting HTTP requests Web browsers, andsending responses which usually are Web pagessending responses which usually are Web pagessuch as HTML documents and linked objectssuch as HTML documents and linked objects(images, etc.).(images, etc.).
Web PageWeb Page
A Web page is a text document embedded withA Web page is a text document embedded with
HTML tags that define how the text is renderedHTML tags that define how the text is renderedon screen. Web pages can be created with anyon screen. Web pages can be created with anytext editor or word processor. They are alsotext editor or word processor. They are alsocreated in HTML authoring programs (likecreated in HTML authoring programs (likeFrontPage, DreamWeaver) that provide aFrontPage, DreamWeaver) that provide a
graphical interface for designing the layoutgraphical interface for designing the layout
8/8/2019 Web Dev Lecture 1- 2
6/16
Important ConceptsImportant Concepts
CachingCachingBrowsers save all webBrowsers save all webresources (images etc) on theresources (images etc) on the
local hard drivelocal hard driveAn HTTP request will be sentAn HTTP request will be sentby the browser that asks forby the browser that asks forthe data only if it has beenthe data only if it has been
updated since the lastupdated since the lastdownloaddownloadIf it has not, the cachedIf it has not, the cachedversion will be reused in theversion will be reused in the
rendering step.rendering step.
8/8/2019 Web Dev Lecture 1- 2
7/16
Important ConceptsImportant ConceptsStatic web pageStatic web page
The contents of the page neverThe contents of the page never
change, regardless of user orchange, regardless of user orrequestrequest
Dynamic web pageDynamic web page
Content (text, images, formContent (text, images, form
fields, etc.) on a web page canfields, etc.) on a web page canchange, in response to differentchange, in response to differentcontexts or conditions.contexts or conditions.
1.1. Client SideClient Side
2.2. Server SideServer Side
8/8/2019 Web Dev Lecture 1- 2
8/16
Important ConceptsImportant ConceptsClientClient--sidesideThe ClientThe Client--side dynamicside dynamic
content is generated on thecontent is generated on theclient's computer.client's computer.The web server retrieves theThe web server retrieves thepage and sends it as is.page and sends it as is.
The web browser thenThe web browser thenprocesses the code embeddedprocesses the code embeddedin the page (normallyin the page (normallyJavaScript) and displays theJavaScript) and displays the
page to the user.page to the user.
8/8/2019 Web Dev Lecture 1- 2
9/16
Important ConceptsImportant ConceptsServerServer--sideside1.1. The browser sends an HTTP request.The browser sends an HTTP request.2.2. The server retrieves the requestedThe server retrieves the requested
script or program.script or program.3.3. The server executes the script orThe server executes the script or
program which typically outputs anprogram which typically outputs anHTML web page. The programHTML web page. The programusually obtains input from the queryusually obtains input from the query
string or standard input which maystring or standard input which mayhave been obtained from ahave been obtained from asubmitted web form.submitted web form.
4.4. The server sends the HTML outputThe server sends the HTML outputto the client's browserto the client's browser
5.5.
PHP, Perl,AS
P orAS
P.N
ET, JSPPHP, Perl,
ASP or
ASP.N
ET, JSP
8/8/2019 Web Dev Lecture 1- 2
10/16
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 fullJPEG is designed for compressing either full--colourcolour
(24 bit) or grey(24 bit) or grey--scale digital images of "natural"scale digital images of "natural"(real(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 format8 bit format -- 256 colors256 colors Small file size with limited colorsSmall file size with limited colors The GIF format supports animation and is still widelyThe GIF format supports animation and is still widely
used to provide image animation effectsused to provide image animation effects
8/8/2019 Web Dev Lecture 1- 2
11/16
Imaging for the webImaging for the web
PN
G (PortableN
etworkPN
G (PortableN
etworkGraphics)Graphics)
losslesslossless
supports true color (16supports true color (16million colors)million colors)
BMP (bit mapped)BMP (bit mapped)
large file sizelarge file size -- nonocompressioncompression
not suitable for web pagesnot suitable for web pages
8/8/2019 Web Dev Lecture 1- 2
12/16
ComparisonComparison
JPEGJPEG isis goodgood forfor storingstoring fullfull--colorcolor oror greygrey--scalescale imagesimages of of "realistic""realistic" scenesscenes;; thatthatmeansmeans scannedscanned photographsphotographs andand similarsimilarmaterialmaterial..
NotNot goodgood forfor imagesimages withwith veryvery sharpsharp edgesedges::aa rowrow ofof purepure--blackblack pixelspixels adjacentadjacent toto aa rowrowofof purepure--whitewhite pixelspixels
GIFGIF imagesimages withwith onlyonly aa fewfew distinctdistinct colors,colors,
suchsuch asas lineline drawingsdrawings andand simplesimple cartoonscartoons..
PNGPNG excelsexcels whenwhen thethe imageimage hashas largelarge areasareasofof uniformuniform colorcolor.. TheThe losslesslossless PNGPNG formatformat isisbestbest suitedsuited forfor editingediting picturespictures..
8/8/2019 Web Dev Lecture 1- 2
13/16
Quality Web DesignQuality Web Design
ContentsContents
Think Before You WriteThink Before You Write1.1. HighlightHighlight the benefits of thethe benefits of the
product.product.
2.2. ExplainExplain how it differs fromhow it differs fromother products.other products.
3.3. PersuadePersuade customers to buycustomers to buy
it.it.
8/8/2019 Web Dev Lecture 1- 2
14/16
Quality Web DesignQuality Web Design
Make Your ContentMake Your Content
InformativeInformative Features And BenefitsFeatures And Benefits
Proofread And Spell CheckProofread And Spell Check
Never Post Your First DraftNever Post Your First Draft
8/8/2019 Web Dev Lecture 1- 2
15/16
AccessibilityAccessibility ALT text descriptionsALT text descriptions
Avoid text imagesAvoid text images
Graphs and chartsGraphs and charts Page Layout WithTablesPage Layout WithTables
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
8/8/2019 Web Dev Lecture 1- 2
16/16
AccessibilityAccessibility
Valid HTMLCodeValid HTMLCode
Remove browserRemove browser--specificspecificcodecode
Accessible Form DesignAccessible Form Design