web dev lecture 1- 2

8/8/2019 Web Dev Lecture 1- 2

1/16

Web DesignWeb Design

andandDevelopmentDevelopment


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


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


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..


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


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.


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/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.


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


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


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


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..


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.


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


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


16/16

AccessibilityAccessibility

Valid HTMLCodeValid HTMLCode

Remove browserRemove browser--specificspecificcodecode

Accessible Form DesignAccessible Form Design

web dev lecture 1- 2

Documents