The WWW and Web The WWW and Web Page DesignPage Design

Kin 260Kin 260

Jackie KiwataJackie Kiwata

OverviewOverview

►The WWWThe WWW How it worksHow it works TerminologyTerminology DomainsDomains

►Designing WebsitesDesigning Websites In generalIn general WYSIWYGWYSIWYG StepsSteps

What is the World Wide Web?What is the World Wide Web?

► Internetwork that uses TCP and IP Internetwork that uses TCP and IP From Intro LectureFrom Intro Lecture

►An architectural framework for An architectural framework for accessing linked documents spread accessing linked documents spread over millions of machinesover millions of machines

►Began in 1989 at CERN, the European Began in 1989 at CERN, the European center for nuclear researchcenter for nuclear research

How the Web WorksHow the Web Works

1.User opens web browser and clicks on calstatela.edu hyperlink

2.Browser follows the hyperlink by sending request to web server at calstatela.edu

3.Web server returns requested page, which is displayed in client’s browser

TerminologyTerminology

►BrowserBrowser: fetches page requested, : fetches page requested, interprets text and displays formatted interprets text and displays formatted page on the screenpage on the screen

►HyperlinkHyperlink: A string of text that contains : A string of text that contains the address to another pagethe address to another page Also known as a Uniform Resource Locator Also known as a Uniform Resource Locator

((URLURL))

►Web ServerWeb Server: a computer running : a computer running software that stores pages of a website software that stores pages of a website and handles requests from clientsand handles requests from clients

DNSDNS►Domain Name SystemDomain Name System►Handles the naming of websites on the Handles the naming of websites on the

WWWWWW►The network understands only numerical The network understands only numerical

addresses in the form of xxx.xxx.xxx.xxxaddresses in the form of xxx.xxx.xxx.xxx Called an Called an IP addressIP address e.g.e.g. 128.66.721.24 128.66.721.24

►But 12-number addresses are hard for But 12-number addresses are hard for people to remember, so use DNS to people to remember, so use DNS to assign meaningful names and match to assign meaningful names and match to numerical addressnumerical address

DomainDomain► A name that identifies a computer on the WWWA name that identifies a computer on the WWW► Every domain name ends in a Every domain name ends in a Top-Level DomainTop-Level Domain

3 or more character generic name or 2 character 3 or more character generic name or 2 character country codecountry code

e.g. .com, .org, .net, .jp, .au e.g. .com, .org, .net, .jp, .au ► Immediately to the left of the TLD is the Immediately to the left of the TLD is the Second-Second-

Level DomainLevel Domain E.g. calstatela.edu, where calstatela is SLDE.g. calstatela.edu, where calstatela is SLD

► An address may also contain An address may also contain SubdomainsSubdomains, which , which are left of the SLDare left of the SLD e.g. get.calstatela.edue.g. get.calstatela.edu

► Domain levels are always separated by periodsDomain levels are always separated by periods

Anatomy of a URLAnatomy of a URL

http://www.http://www.calstatelacalstatela.edu/.edu/faculty/jkiwata2faculty/jkiwata2//index.htmlindex.html

second-level domain Top-level domain

Folder path HTML page

Example:Example:

http://cs.ucla.edu/csd/people/graduates.htmlhttp://cs.ucla.edu/csd/people/graduates.html

Website Design BasicsWebsite Design Basics

►The Golden Rule: The Golden Rule: UsabilityUsability Visitors are looking for answersVisitors are looking for answers Design your website to give your visitors an Design your website to give your visitors an

answer quickly!answer quickly!

►All other design elements are secondaryAll other design elements are secondary► If a visitor’s needs are not filled quickly, If a visitor’s needs are not filled quickly,

they will look elsewherethey will look elsewhere

Creating WebsitesCreating Websites

► Create in one of two ways:Create in one of two ways: Code pages by handCode pages by hand Use a What You See is What You Get (WYSIWYG) Use a What You See is What You Get (WYSIWYG)

editoreditor

► Today, we will use a Today, we will use a WYSIWYGWYSIWYG (Google Sites) (Google Sites) Web authoring toolWeb authoring tool a user interface that allows the user to view a user interface that allows the user to view

something very similar to the end result while the something very similar to the end result while the document is being createddocument is being created

e.g. a user can view on screen how a web page will e.g. a user can view on screen how a web page will look while it is being created in the WYSIWYGlook while it is being created in the WYSIWYG

Steps to creating a websiteSteps to creating a website

1.1. Plan site architecturePlan site architecture2.2. Plan page layoutPlan page layout3.3. Prepare contentPrepare content4.4. Pick typography & color schemesPick typography & color schemes5.5. PublishPublish6.6. TestTest

We’ll use the example of creating a personal We’ll use the example of creating a personal website for professional use.website for professional use.

Site ArchitectureSite Architecture►How pages are linked relative to one How pages are linked relative to one

another within a websiteanother within a website►Needs of target audience should guide Needs of target audience should guide

the organization of pagesthe organization of pages►Draw architecture by hand or in WordDraw architecture by hand or in Word

Planning Page LayoutPlanning Page Layout

►How navigation and content are How navigation and content are arranged on a pagearranged on a page

►Organize layout so that Organize layout so that content is clearly communicatedcontent is clearly communicated navigation is thoughtful and intuitivenavigation is thoughtful and intuitive e.g. Navigation is traditionally located at e.g. Navigation is traditionally located at

the top of the page and/or on the leftthe top of the page and/or on the left►If put elsewhere, users may get confused and If put elsewhere, users may get confused and

frustratedfrustrated

Prepare ContentPrepare Content

►Web design adage: Web design adage: content is kingcontent is king►Website should clearly communicate content Website should clearly communicate content

to target audienceto target audience► Content should:Content should:

Be appropriate for target audienceBe appropriate for target audience Focus on the core messageFocus on the core message

► Content should not:Content should not: Be clutteredBe cluttered Be without purposeBe without purpose

► Albert Einstein: “Everything should be as Albert Einstein: “Everything should be as simple as possible, but no simpler”simple as possible, but no simpler” Communicate only as much to get the message Communicate only as much to get the message

acrossacross

Pick Text & ColorPick Text & Color

►Guidelines are similar to picking the Guidelines are similar to picking the design scheme for PowerPoint slidesdesign scheme for PowerPoint slides Use simple, logical color palettesUse simple, logical color palettes No flashy graphics or annoying animationsNo flashy graphics or annoying animations Text should be easy to readText should be easy to read

TestingTesting

►Proofread content for grammatical or Proofread content for grammatical or spelling errorsspelling errors

►Test all links to ensure integrity of site Test all links to ensure integrity of site navigation and external linksnavigation and external links

►Access site by typing in URL rather Access site by typing in URL rather than viewing page through site editorthan viewing page through site editor

In shortIn shortAccording to According to http://www.webpagesthatsuck.comhttp://www.webpagesthatsuck.com, ,

don’t commit the following mistakes:don’t commit the following mistakes:1.1. We've designed our site to meet our We've designed our site to meet our

organization's needs (more sales/ organization's needs (more sales/ contributions) rather than meeting the needs contributions) rather than meeting the needs of our visitors. of our visitors.

2.2. It takes longer than four seconds for the man It takes longer than four seconds for the man from Mars to understand what our site is from Mars to understand what our site is about. about.

3.3. Our site looks like we've never seen another Our site looks like we've never seen another web site. web site.

4.4. We use design elements that get in the way of We use design elements that get in the way of our visitors. our visitors.

5.5. Our site doesn't make us look like credible Our site doesn't make us look like credible professionals. professionals.

Examples of websites that Examples of websites that sucksuck

http://www.alternativetransportservices.co.ukhttp://www.alternativetransportservices.co.uk

http://www.tallyhouniforms.com/http://www.tallyhouniforms.com/

http://www.kcthecatalog.com/http://www.kcthecatalog.com/

Can you figure out why?Can you figure out why?

Using Google SitesUsing Google Sites

1. Access1. Access

►Log into Gmail accountLog into Gmail account►Use top menu bar to access Use top menu bar to access SitesSites

2. Create Site2. Create SiteGive your Give your

site a namesite a name

See the See the actual web actual web address address herehere

This section This section can be can be changed changed laterlater

3. Managing your site3. Managing your site

Home base looks like this:Home base looks like this:

4. Adding pages4. Adding pagesFrom the Site Manager, click on From the Site Manager, click on Create New PageCreate New Page

Select Select Web PageWeb Page as type of page as type of page

We won’t use the other 4 types of pages in the lab

4a. Assign folder path4a. Assign folder path►Choose the directory according to site Choose the directory according to site

architecturearchitecture►Notice the differences between the Notice the differences between the

twotwo

5. Navigation & Layout5. Navigation & LayoutFrom the Site Manager, click on Site Settings > From the Site Manager, click on Site Settings >

ChangeChange AppearanceAppearance

Get the Get the Appearance page, Appearance page, where you can where you can edit Navigation, edit Navigation, Layout, Colors Layout, Colors and Themesand Themes

5a. Appearance5a. Appearance

Site LayoutSite Layout

Navigation – Navigation – click edit to click edit to add linksadd links

Sidebar ItemsSidebar Items

5b. Navigation5b. Navigation

Shows pages Shows pages currently in currently in navigationnavigation

Changes order Changes order displayeddisplayed

Removes Removes navigation navigation linklink

Adds another Adds another navigation navigation linklink

5c. Layout5c. Layout

ConventionaConventional layout as l layout as defaultdefault

Modifies Modifies conventionconventional layoutal layout

6. Creating content6. Creating content

From Site Manager,From Site Manager,1. Click on page to 1. Click on page to

editedit2. 2. Edit Page Edit Page buttonbutton

6a. Links6a. LinksFour typesFour types::1.1. Internal PageInternal Page

Your website pagesYour website pages Link to these pages from your website Link to these pages from your website

navigation or from internal page linksnavigation or from internal page links

2.2. External URLExternal URL Offsite web addressOffsite web address

3.3. Email AddressEmail Address Instead of Instead of http://http:// , uses , uses mailto:mailto:

4.4. Uploaded FileUploaded File Files without Files without markup markup (non-html, -xhtml, -css (non-html, -xhtml, -css

files)files) e.g. .doc, .pdf, .xls, .ppte.g. .doc, .pdf, .xls, .ppt

6b. Creating Links6b. Creating Links

1.1. Highlight content Highlight content 2.2. Insert > LinkInsert > Link

6c. External vs. Internal Links6c. External vs. Internal Links

External Link optionsExternal Link options

Internal Link optionsInternal Link options

6d. Email Address6d. Email Address1. Highlight text 1. Highlight text

containing email containing email address (must address (must have ‘@’).have ‘@’).

2. Insert > Link2. Insert > Link

3. Editor will 3. Editor will automatically automatically create email create email address linkaddress link

7. Colors & Themes7. Colors & ThemesAccess from Appearance Access from Appearance MenuMenu

8. Testing8. TestingView website without editor by logging out and typing in web addressView website without editor by logging out and typing in web address

No Editor

Editor

ReferencesReferences

►WWWWWWTanenbaum, A. S. (2003). Tanenbaum, A. S. (2003). Computer Computer

NetworksNetworks. Upper Saddle River, NJ: . Upper Saddle River, NJ: Prentice HallPrentice Hall

►Web DesignWeb DesignMumaw, S. (2002). Mumaw, S. (2002). Simple: WebsitesSimple: Websites. . Gloucester, MA: RockportGloucester, MA: Rockport

►Google Sites Help FilesGoogle Sites Help Fileshttp://sites.google.com/support/?hl=enhttp://sites.google.com/support/?hl=en