Transcript Document

WEB111A: WWW Design
World Wide Web (WWW)
A structure of documents connected electronically over the
Internet
Internet
A large computer network made up of smaller networks and
computers
Network
Two or more computers connected for the purpose of
sharing information and resources
Network
Computer
Computer
Network
SERVER
Computer
Web11a_planning_01.ppt
Computer
Computer
Computer
WEB111A: WWW Design
Web Page
A separate document on the Web
Web Site
A set of related Web pages
Home page: entry point
May consists of:
One page
Multiple pages
Web Servers
Computers containing Web Sites on the Internet
Web Browser
Software to view Web Sites
Netscape
Internet Explorer
Web11a_planning_01.ppt
WEB111A: WWW Design
USER
USER
USER
Computer with
Web Browser
Computer with
Web Browser
Computer with
Web Browser
Web
Server
network
Internet
Server
Internet
Server
network
Internet
Server
Web
Server
USER
USER
network
USER
Computer with Computer with Computer with
Web Browser Web Browser Web Browser
Web11a_planning_01.ppt
Web
Server
network
USER
USER
Computer with
Web Browser
Computer with
Web Browser
WEB111A: WWW Design
Protocol
The ‘language’ of communication
Example: French, German, English, Spanish
Must be common between two computers for communications
Internet protocols:
http
HyperText Transfer Protocol
ftp
File Transfer Protocol
IP
Internet Protocol
Hyper Text Markup Language (HTML)
Primary programming language of a web page
Mark up Tags not procedural language
Adjust attributes of text and objects
Embedded in the web document
Format of the screen display
Begin with an <
End with an >
Markup tag is in between
<h1>
Web11a_planning_01.ppt
WEB111A: WWW Design
Uniform Resource Locator (URL)
Internet ‘address’ of a web site
Unique to each web site
‘Rented’ on a yearly basis from a registrar
http://
Hypertext Transfer Protocol
www
Wide World Web
.
Delimiter
somename
Name of Web Site
.
Delimiter
xxx
com
Business
org
Non Profit Organization
gov
Government
INCLASS LAB I:
Go to this web site: http://www.findagrave.com/
Display the source code: look at HTML
1.
Identify the parts of the URL
Web11a_planning_01.ppt
WEB111A: WWW Design
Hyperlink
A coupler from one web page to another
A pointer to another web page
The page may:
PDE Page 7
Be on the same page
Be on the same site
Be at another web site
Is there a difference in the ‘look’ of the
links?
Format uses the URL
Hypertext
The system of linked information
Web11a_planning_01.ppt
WEB111A: WWW Design
Intranets
Small networks
Internal to a single business organization
Often connect to larger networks (Extranets) and/or
the WWW
Extranets
Groups of Intranets
Connect multiple business’ together
Insurance Companies
Airline Companies
Travel Agencies
Realtors
Local Area Networks (LAN)
Intranets
Wide Area Networks (WAN)
Extranets
Web11a_planning_01.ppt
WEB111A: WWW Design
Viewers
People that access documents on the Internet
Types
Surfer
Access pages for no particular
purpose
Users
Interested in particular
information
The main goal of a Web presentation is to
fulfill users’ information need and wants.
To gain users
1. Fulfill users’ needs for information
2. Visually please the user
a. Emotionally
b. Cognitively
Web11a_planning_01.ppt
WEB111A: WWW Design
INCLASS LAB II: turn in
Go to this web site
http://dictionary.reference.com/
Is this a site for a surfer? Why?
Is this a site for a user? Why?
Good Web Site Attributes
Understandable
Interesting
Valuable Information
Consistent in appearance
Skillful integration of
Text
Graphics
Audio
Video
Navigation
Web11a_planning_01.ppt
WEB111A: WWW Design
Criteria of a good web site
Effectiveness
Presenting the intended message
Organization
Categories
Appropriate graphics/pictures
Complete
Information
Contacts
Links
Accurate
Information
Links
Affectiveness
Capture viewer attention
Interesting
Stimulating
Enjoyable
Emotional attribute
Web11a_planning_01.ppt
WEB111A: WWW Design
Criteria of a good web site
Navigation
Easy to:
Find information
Recognize links
Traverse the site
INCLASS LAB III: turn in
Go to this web site: http://www.tvguide.com
Your opinion of:
Effectiveness
Affectiveness
Navigation
Web11a_planning_01.ppt
WEB111A: WWW Design
1st Generation Web Presentations
Paper-based text presentations
Duplications of newspaper type publications
No graphics or pictures
2nd Generation Web Presentations
Graphics and visuals added
Text removed to allow room for graphics
Appearance becoming an issue
3rd Generation Web Presentations
Designed for presentation:
Effect
Affect
Efficiency
4th Generation Web Presentations
Multi-media added
Design purposes
Informational purposes
Web11a_planning_01.ppt
WEB111A: WWW Design
Users
Targeted
Surfers
All
Surfers
Understanding the business
Information that is
Approachable
Comprehensible
Applicable
Useful
Web11a_planning_01.ppt
All
People
WEB111A: WWW Design
Purpose of the web:
The presenter and the user reach a
mutual understanding by means of an
electronic connection
Seven Seconds
The visitor will make an emotional decision
on whether to stay longer or leave
WHY DESIGN IS SO IMPORTANT!
What is the visitor looking for?
Knowledge
Merchandise
Services
Web11a_planning_01.ppt
WEB111A: WWW Design
Purpose of Design
Inform the visitor
History sites
Educational sites
Entertainment
Music download sites
Games
Exchange information
Chat rooms
Search Engines
Web11a_planning_01.ppt
WEB111A: WWW Design
Thread
Links between web pages relative to a
central idea or theme
INCLASS LAB IV:
Go to web site: http://www.amazon.com
Web11a_planning_01.ppt