The World Wide Web
Download
Report
Transcript The World Wide Web
The World Wide Web
The Web Defined
Software application to browse and publish
documents
Web is a large “sub-set” of Internet
Uses xhtml, urls, http to request and send
documents over the Internet
Browser is the application that serves as
interface between users and the Internet
Web Browser Features
Personal Preferences
Cookies
Disk Cache
Fonts, Colors
Show Images
Home Page Location
Bookmarks (aka “Favorites”)
Saves urls of Web pages
Reasons for using:
You visit that site frequently
You want to save it so you can find it again
Web Browser Features (con’t)
Plug-ins and Helper Applications
Used to extend the capabilities of browsers since
they are not able to handle every file type that
exists (or may exist in the future)
Plug-ins are tightly integrated with browser
Usually run in browser window
Launch quickly
Helper Applications are stand alone
Usually launch in their own window
May take longer to launch
Web Browser Features (con’t)
Not all browsers are exactly the same:
MIE – supported marquees and font faces initially;
packaged and distributed with other Microsoft products
Netscape – introduced tables and frames; had to download
and install
Others: Mozilla, Firefox, Opera, Lynx
All browsers do not support the same tags in the
same way: e.g., <blink>
Web pages may look different depending on the
browser and platform
Some browsers are more “forgiving”
Web Publishing
Web Presentation:
“Collection of associated, hyperlinked Web pages that have
some underlying theme” - aka “Web site”
Comparison of on-line publishing and traditional
“off-line” publishing
a)
b)
c)
d)
e)
f)
g)
h)
Time spent viewing or reading
Length of material
Longevity of material
How info is accessed
Where info is accessed
How info is maintained and updated
Who is able to publish
Form and appearance vs. quality
Key Elements and Design Considerations
Layout
Easy navigation (obvious and logical)
Logical organization
Minimum of scrolling (info fits on 1-2 screens with
*no* horizontal scrolling)
Short, descriptive writing
Error-free (no typos, no grammatical errors)
Easy-to-read colors, fonts
Non-distracting background
Key Elements and Design Considerations
Layout (con’t)
Headers and footers that provide continuity and
determine boundaries of Web site
Headers
Top of Web page (not contents of <head> tag!)
Creates identity
Includes some of following:
Title, sub-title
Logo
Navigation aids
Last update info
Key Elements and Design Considerations
Layout (con’t)
Footer
Bottom of Web page
Contains info that doesn’t necessarily need to appear at
the top:
Navigation aids (even if already at the top, repeat here if
reader needs to scroll OR offer “Go To Top” link)
Last update info
Author’s name, mailto link to author
FAQs link, Credits link
Copyright notice - © OR &169;
Any disclaimers
Home link
Need this info because there is no preamble
Key Elements and Design Considerations
Load time – some readers are still using dial-up so
don’t over-do graphics
Page size:
In most cases, page should not exceed 1 – 2 screens
Longer Web pages are sometimes okay:
Good for material that will be printed
Easier to maintain (fewer links)
Not concerned about losing readers
But
Can lose navigation aids (readers need to see them to retain
them) – repeat nav. aids OR use “Go To Top” links
May lose readers
Key Elements and Design Considerations
Page size (con’t)
Assume minimum screen size in general use
today is 800 x 600 (800 pixel wide by 600 pixels
high)
Usable space is 681 to 780 pixels wide by 382 to
514 pixels high
Key Elements and Design Considerations
Page Layout
Line length
Determined by reader’s browser window
Reading is most comfortable when there are no more
than 12 words/line
To limit number of words in line:
Use tables without borders
Use CSS margin property
Frames – allows more than 1 Web page to display in your
window at a time; use one for site navigation, one for
display
Key Elements and Design Considerations
Page layout (con’t)
Typography – the process of printing with type
Use CSS to separate content structure and graphic
design:
<h1>, <h2>, ...<h6> are heading tags and their purpose
is to designate a hierarchy of headline importance;
human readers and search engines can easily determine
info structure
<h1> is usually too big; <h6> is too small
Reconcile structural logic and graphic design by using
CSS to specify “set all h3 headings in 12-pt Arial bold
font”
Key Elements and Design Considerations
Page layout (con’t)
Typography (con’t)
Use upper and lower case for large areas of text –
makes it easier to recognize words:
Hello World vs. HELLO WORLD
http://www.webstyleguide.com/type/case.html
Align text (if there is a lot of it) – makes it easier for your
readers’ eyes to track back to left side:
abc defgh ijk l mno pqrstuv wx yz
ab cd efghijk lm no p
qrs tu v wxyz abcdefg hi jkl
http://www.webstyleguide.com/type/align.html
Web Design
Goal Setting
A.
State objective
Define audience
Determine timeframe
Determine scope
How much research is required
Consider maintenance
How many graphics
Money?
Writing quality
Web Design
Produce an Outline
B.
Subject will determine how topic is partitioned
Use various heading tags to impart headline
importance (<h1>, <h2>, ..., <h6>)
Keep amount of information on each page to
approx. 1- 2 screen lengths
Web Design
Determine Navigation
C.
Hyperlinks that allow readers to move thru presentation
Subject determines best arrangement:
Circular
1.
•
•
Supports forward and back
Good for step-by-step instructions
Exploratory
2.
•
•
Allows jumping from nearly every page to every other page
Image maps work well in exploratory type of organization
Hierarchy
3.
•
•
Limited number of links from top; each succeeding page has a
limited number
Fanout – max number of links available from any page
Web Design
Coding and Writing
D.
Create pages with links between them (stubs)
Migrate outline to appropriate pages
Insert headers and footers
(This creates a “shell”)
Fill in the shells with writing
Add graphics, bells, and whistles
Web Design
Revising
E.
Test hyperlinks, check navigation
Comment code (good to do while you go along)
Ask opinion of others
Review goals
Evaluate graphics
Are pages consistent?
Evaluate writing – check for typos etc.
**Check site with another browser or two!**
Registering Web Pages
Assume one goal is to have the page viewed by as
many people as possible
How to be found:
Register your page by filling out on-line form telling search
engines about your page(s)
Wait to be found by search engines
Pay to have a business add your link to their site
Ask a non-business related page to add you (if you
complement their page)
Pay a company to take care of registering for you for a fee