the www and web page design kin 260 jackie kiwata
TRANSCRIPT
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