The WWW and Web Page Design

1
The WWW and Web Page Design

• Kin 260
• Jackie Kiwata

2
Overview

• The WWW
• How it works
• Terminology
• Domains
• Designing Websites
• In general
• WYSIWYG
• Steps

3
What is the World Wide Web?

• Internetwork that uses TCP and IP
• From Intro Lecture
• An architectural framework for accessing linked
  documents spread over millions of machines
• Began in 1989 at CERN, the European center for
  nuclear research

4
How 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 clients browser

5
Terminology

• Browser fetches page requested, interprets text
  and displays formatted page on the screen
• Hyperlink A string of text that contains the
  address to another page
• Also known as a Uniform Resource Locator (URL)
• Web Server a computer running software that
  stores pages of a website and handles requests
  from clients

6
DNS

• Domain Name System
• Handles the naming of websites on the WWW
• The network understands only numerical addresses
  in the form of xxx.xxx.xxx.xxx
• Called an IP address
• e.g. 128.66.721.24
• But 12-number addresses are hard for people to
  remember, so use DNS to assign meaningful names
  and match to numerical address

7
Domain

• A name that identifies a computer on the WWW
• Every domain name ends in a Top-Level Domain
• 3 or more character generic name or 2 character
  country code
• e.g. .com, .org, .net, .jp, .au
• Immediately to the left of the TLD is the
  Second-Level Domain
• E.g. calstatela.edu, where calstatela is SLD
• An address may also contain Subdomains, which are
  left of the SLD
• e.g. get.calstatela.edu
• Domain levels are always separated by periods

8
Anatomy of a URL

• http//www.calstatela.edu/faculty/jkiwata2/index.h
  tml

second-level domain
Folder path
HTML page
Top-level domain
Example http//cs.ucla.edu/csd/people/graduates.h
tml
9
Website Design Basics

• The Golden Rule Usability
• Visitors are looking for answers
• Design your website to give your visitors an
  answer quickly!
• All other design elements are secondary
• If a visitors needs are not filled quickly, they
  will look elsewhere

10
Creating Websites

• Create in one of two ways
• Code pages by hand
• Use a What You See is What You Get (WYSIWYG)
  editor
• Today, we will use a WYSIWYG (Google Sites)
• Web authoring tool
• a user interface that allows the user to view
  something very similar to the end result while
  the document is being created
• e.g. a user can view on screen how a web page
  will look while it is being created in the
  WYSIWYG

11
Steps to creating a website

• Plan site architecture
• Plan page layout
• Prepare content
• Pick typography color schemes
• Publish
• Test
• Well use the example of creating a personal
  website for professional use.

12
Site Architecture

• How pages are linked relative to one another
  within a website
• Needs of target audience should guide the
  organization of pages
• Draw architecture by hand or in Word

13
Planning Page Layout

• How navigation and content are arranged on a page
• Organize layout so that
• content is clearly communicated
• navigation is thoughtful and intuitive
• e.g. Navigation is traditionally located at the
  top of the page and/or on the left
• If put elsewhere, users may get confused and
  frustrated

14
Prepare Content

• Web design adage content is king
• Website should clearly communicate content to
  target audience
• Content should
• Be appropriate for target audience
• Focus on the core message
• Content should not
• Be cluttered
• Be without purpose
• Albert Einstein Everything should be as simple
  as possible, but no simpler
• Communicate only as much to get the message
  across

15
Pick Text Color

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

16
Testing

• Proofread content for grammatical or spelling
  errors
• Test all links to ensure integrity of site
  navigation and external links
• Access site by typing in URL rather than viewing
  page through site editor

17
In short

• According to http//www.webpagesthatsuck.com,
  dont commit the following mistakes
• We've designed our site to meet our
  organization's needs (more sales/ contributions)
  rather than meeting the needs of our visitors.
• It takes longer than four seconds for the man
  from Mars to understand what our site is about.
• Our site looks like we've never seen another web
  site.
• We use design elements that get in the way of our
  visitors.
• Our site doesn't make us look like credible
  professionals.

18
Examples of websites that suck

• http//www.alternativetransportservices.co.uk
• http//www.tallyhouniforms.com/
• http//www.kcthecatalog.com/
• Can you figure out why?

19
Using Google Sites
20
1. Access

• Log into Gmail account
• Use top menu bar to access Sites

21
2. Create Site

• Give your site a name
• See the actual web address here
• This section can be changed later

22
3. Managing your site

• Home base looks like this

23
4. Adding pages

• From the Site Manager, click on Create New Page

Select Web Page as type of page
We wont use the other 4 types of pages in the lab
24
4a. Assign folder path

• Choose the directory according to site
  architecture
• Notice the differences between the two

25
5. Navigation Layout

• From the Site Manager, click on Site Settings gt
  Change Appearance

Get the Appearance page, where you can edit
Navigation, Layout, Colors and Themes
26
5a. Appearance

• Site Layout
• Navigation click edit to add links
• Sidebar Items

27
5b. Navigation

• Shows pages currently in navigation
• Changes order displayed
• Removes navigation link

Adds another navigation link
28
5c. Layout

• Conventional layout as default
• Modifies conventional layout

29
6. Creating content

• From Site Manager,
• 1. Click on page to edit
• 2. Edit Page button

30
6a. Links

• Four types
• Internal Page
• Your website pages
• Link to these pages from your website navigation
  or from internal page links
• External URL
• Offsite web address
• Email Address
• Instead of http// , uses mailto
• Uploaded File
• Files without markup (non-html, -xhtml, -css
  files)
• e.g. .doc, .pdf, .xls, .ppt

31
6b. Creating Links

1. Highlight content
2. Insert gt Link

32
6c. External vs. Internal Links

• External Link options

Internal Link options
33
6d. Email Address

• 1. Highlight text containing email address (must
  have _at_).
• 2. Insert gt Link
• 3. Editor will automatically create email address
  link

34
7. Colors Themes

• Access from Appearance Menu

35
8. Testing

• View website without editor by logging out and
  typing in web address

Editor
No Editor
36
References

• WWW
• Tanenbaum, A. S. (2003). Computer Networks. Upper
  Saddle River, NJ Prentice Hall
• Web Design
• Mumaw, S. (2002). Simple Websites. Gloucester,
  MA Rockport
• Google Sites Help Files
• http//sites.google.com/support/?hlen