WEB111A: WWW Design Web11a_planning_01.ppt World Wide Web (WWW) A structure of documents connected...

WEB111A: WWW Design

Web11a_planning_01.ppt

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

Computer Computer Computer Computer

SERVER

Computer Computer

Network

Network

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

WEB111A: WWW Design


WebServer

InternetServer

USER

Computer withWeb Browser

InternetServer

InternetServer

WebServer

WebServer

USER


USER


USER


USER


USER


USER


USER


network

networknetwork

network

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>

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

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

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

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

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

WEB111A: WWW Design


Criteria of a good web site

Effectiveness

Presenting the intended message

Organization

CategoriesAppropriate graphics/pictures

Complete

InformationContactsLinks

Accurate

InformationLinks

Affectiveness

Capture viewer attention

Interesting

Stimulating

Enjoyable

Emotional attribute

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

WEB111A: WWW Design


1st Generation Web Presentations

Paper-based text presentationsDuplications of newspaper type publicationsNo graphics or pictures

2nd Generation Web Presentations

Graphics and visuals addedText removed to allow room for graphicsAppearance becoming an issue

3rd Generation Web Presentations

Designed for presentation:

EffectAffectEfficiency

4th Generation Web Presentations

Multi-media added

Design purposes

Informational purposes

WEB111A: WWW Design


TargetedSurfers

Users AllSurfers

AllPeople

Understanding the business

Information that is

Approachable

Comprehensible

Applicable

Useful

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

WEB111A: WWW Design


Purpose of Design

Inform the visitor

History sites

Educational sites

Entertainment

Music download sites

Games

Exchange information

Chat rooms

Search Engines

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

WEB111A: WWW Design Web11a_planning_01.ppt World Wide Web (WWW) A structure of documents connected...

Documents

Transcript of WEB111A: WWW Design Web11a_planning_01.ppt World Wide Web (WWW) A structure of documents connected...