Download ppt

The WWW and Web
Page Design
Kin 260
Jackie Kiwata
Overview
► The
WWW
 How it works
 Terminology
 Domains
► Designing
Websites
 In general
 WYSIWYG
 Steps
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
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 client’s
browser
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
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
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 SecondLevel 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
Anatomy of a URL
http://www.calstatela.edu/faculty/jkiwata2/index.html
second-level domain
Folder path
Top-level domain
HTML page
Example:
http://cs.ucla.edu/csd/people/graduates.html
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 visitor’s needs are not filled quickly, they
will look elsewhere
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
Steps to creating a website
1.
2.
3.
4.
5.
6.
Plan site architecture
Plan page layout
Prepare content
Pick typography & color schemes
Publish
Test
We’ll use the example of creating a personal website
for professional use.
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
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
Prepare Content
► Web design adage: content is king
► Website should clearly communicate
target audience
► Content should:
content to
 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
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
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
In short
According to http://www.webpagesthatsuck.com, don’t
commit the following mistakes:
1. We've designed our site to meet our organization's
needs (more sales/ contributions) rather than
meeting the needs of our visitors.
2. It takes longer than four seconds for the man from
Mars to understand what our site is about.
3. Our site looks like we've never seen another web
site.
4. We use design elements that get in the way of our
visitors.
5. Our site doesn't make us look like credible
professionals.
Examples of websites that suck
http://www.alternativetransportservices.co.uk
http://www.tallyhouniforms.com/
http://www.kcthecatalog.com/
Can you figure out why?
Using Google Sites
1. Access
► Log
into Gmail account
► Use top menu bar to access Sites
2. Create Site
Give your site
a name
See the actual
web address
here
This section
can be
changed
later
3. Managing your site
Home base looks like this:
4. Adding pages
From the Site Manager, click on Create New Page
Select Web Page as type of page
We won’t use the other 4 types of pages in
the lab
4a. Assign folder path
► Choose
the directory according to site
architecture
► Notice the differences between the two
5. Navigation & Layout
From the Site Manager, click on Site Settings > Change
Appearance
Get the Appearance
page, where you
can edit Navigation,
Layout, Colors and
Themes
5a. Appearance
Site Layout
Navigation –
click edit to
add links
Sidebar Items
5b. Navigation
Shows pages
currently in
navigation
Changes order
displayed
Adds another
navigation
link
Removes
navigation link
5c. Layout
Conventional
layout as
default
Modifies
conventional
layout
6. Creating content
From Site Manager,
1. Click on page to
edit
2. Edit Page button
6a. Links
Four types:
1. Internal Page


2.
External URL

3.
Offsite web address
Email Address

4.
Your website pages
Link to these pages from your website navigation or
from internal page links
Instead of http:// , uses mailto:
Uploaded File


Files without markup (non-html, -xhtml, -css files)
e.g. .doc, .pdf, .xls, .ppt
6b. Creating Links
1.
2.
Highlight content
Insert > Link
6c. External vs. Internal Links
External Link options
Internal Link options
6d. Email Address
1. Highlight text
containing email
address (must
have ‘@’).
2. Insert > Link
3. Editor will
automatically
create email
address link
7. Colors & Themes
Access from Appearance Menu
8. Testing
View website without editor by logging out and typing in web address
Editor
No Editor
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/?hl=en