CIS500 - Web Site Design

Introduction

What is the World Wide Web?

Laura Lemay describes it as: "a global, interactive, dynamic, cross-platform, distributed, graphical, hypertext information system that runs over the Internet."

The Web Is Interactive

User can link to locations they choose
E-mail links right on Web pages
Online, interactive forms
Java, CGI scripts and helper applications enable interactive games and programs
Java and CGI scripts create customized Web pages

The Web Is Dynamic

Simple to update Web pages
Conduct queries and searches on-line
Search results displayed in a customized format

The Web Is Cross-Platform

IBM-PC compatible
MacIntosh
UNIX systems
Mainframe VM

The Web is accessible to all!

The Web Is Distributed

The Web provides information which is distributed around the world involving thousands of Websites. Each site provides the storage space required for the information they maintain.

Users of this information only need to link to the appropriate site without worrying about how much space they have on their own system. This arrangement forms the largest distributed information system in the world!

The Web Is Graphical

plain text
static graphic images
animation
video clips
stereo sound

The Web Is A Hypertext Information System...

...because it connects all of the available resources together through links on each presentation, the same way various topics are linked within an on-line help file.

The Evolution of Hypertext

1945 - Vannevar Bush & Memex

In the early 1930s, Vannevar Bush wrote of a device he called the memex.

In 1945, his essay entitled "As We May Think" which discussed the memex was published in the Atlantic Monthly. This was the beginning of the concept of hypertext.

1965 - Ted Nelson

In 1960, while studying at Harvard, Ted Nelson had a vision of a world of interactive computer screens, interactive media, and open electronic publishing, where all could quote and link freely.

In 1965 he coined the terms Hypertext and HyperMedia to describe "non-sequential writing" and interactive media. We could write in whatever structure we wished and the users could follow their own chosen paths based upon their own interests.

1968 - Hypertext Editing System and FRESS

Ted Nelson, Andries van Dam and students implemented the Hypertext Editing System.

In 1969, a second-generation multi-user File Retrieval and Editing System (FRESS) was designed. It was used for over ten years.

1968 - On-Line System (NLS)

Doug Engelbart, William K. English and John F. Rulifson, at the Stanford Research Institute, created the On-Line System, the world's first implementation of what was to be called hypertext.

The system utilized many of the devices we currently associate with modern PC computing, including a mouse, full-windowing software, and on-line help systems. A revolutionary development during a time when most people (including programmers) had no direct contact with a computer.

1969 - ARPANet

U.S. Department of Defense's Advanced Research Projects Agency created a network called ARPANet, which involved 4 computers linked by a non-centralized network, designed to survive partial outages (ie. nuclear war) and still function when parts of the network were down or destroyed. The ARPANet provided a secure and survivable communications network for organizations engaged in defense-related research.

A team at Carnegie-Mellon University began development of ZOG, which later came to be known as KMS.

In 1983, this system was installed on board the aircraft carrier USS Carl Vinson, using twenty-eight networked PERQ workstations. It provided the crew with a task management system and on-line procedure manuals.

Along with Intermedia, it is the most highly developed hypertext system.

1977 - Development of TCP/IP

The Transmission Control Protocol/Internet Protocol as is currently in use was developed in 1977.

It is a sophisticated, global standard which allowed users to link various branches of other complex networks directly to the ARPANet, which soon come to be called the Internet.

1978 - Aspen Movie Map

The first hypermedia videodisc, developed at MIT, allowed users to manipulate the order and sequence of the movie's frames. It is said to have made public the full potential of "hyper" systems.

1980 - Enquire-Within-Upon-Everything

Tim Berners-Lee began working with hypertext ideas at CERN, influenced by Ted Nelson's work on Xanadu. Tim also wrote a notebook program, "Enquire-Within-Upon-Everything", which allowed links to be made between arbitrary nodes. Each node had title, a type and a list of bi-directional typed links.

1982 - Guide - A Hypertext Information System

Guide was first developed by Peter Brown at the University of Kent in 1982.

In 1984, Office Workstations Ltd. was formed to develop Guide commercially.

In September 1986, Guide became the first commercially available hypertext system. Apple and Microsoft released their hypertext systems in July 1987.

1983 - UNIX & TCP/IP

The University of California at Berkely released a version of their UNIX system which incorporated TCP/IP.

There are only 500 Internet host sites world-wide.

1985 - NSFNet

The National Science Foundation (NSF) began a program to establish Internet access across the U.S. They created a backbone called NSFNet which was available to all:

educational facilities
academic researchers
government agencies, and
international research organizations

1987 - HyperCard

In August 1987, Apple revolutionized how people interact with their computers by packaging Bill Atkinson's HyperCard free with every PC sold.

1988 - European Internet

The Internet came to life in Europe at the Amsterdam Mathematics Centre, which was the gateway for all trans-atlantic traffic between the U.S. and European sides of the world-wide USENET.

1989 - Origin of the World Wide Web

In March, Tim Berners-Lee produced "Information Management: A Proposal" which was circulated at CERN. This was the original idea for the World Wide Web, which was to be a means for scientists around the world to communicate and collaborate using a universal information system based on hypertext.

1990 - Origin of HTML & the Birth of the Web

October, Robert Cailliau co-authors a revision to the proposal with Tim and the name World Wide Web is decided.

Tim Berners-Lee proposed a new language for structuring hypertext documents called the Hypertext Markup Language (HTML).

A new protocol to transfer HTML documents was devised called the Hypertext Transfer Protocol (HTTP).

1991 - Hypertext '91

CERN held their Computer Seminar on the World Wide Web; and introduced the WWW at Hypertext '91 in San Antonio, Texas.

1992 - NCSA

The National Center for Supercomputing and Automation established a server on the Web.

1993 - NCSA Releases Mosaic

NCSA released Mosaic, the first graphical Web browser.

Other events in 1993:

January - approximately 50 known HTTP servers established
October - over 200 HTTP servers connected
First WWW Wizards Workshop in Cambridge, Massachusetts
WWW wins IMA award
Robert Cailliau begins organization of the First International WWW Conference at CERN

1994 - Expansion

The package "Internet In A Box" released for private home use
Marc Andreessen and colleagues leave NCSA to form "Mosaic Communications Corp" (now Netscape).
May 25-27 - First International WWW Conference, CERN, Geneva, where VRML is originated
June - over 1500 registered HTTP servers
MIT/CERN agreement to start W3 Organization
Founding of the International WWW Conference Committee (IW3C2) in Boston by NCSA and CERN.
Second International WWW Conference held in Chicago
First W3 Consortium Meeting at MIT.
WebCore project transferred from CERN to INRIA

1995 - Explosion

CERN holds a 2 day seminar for the European media to showcase WWW
Third International WWW Conference
Founding of the Web Society in Graz, by the Technical University of Graz, CERN, the University of Minnesota (home of Gopher), and INRIA
By the end of the year, over 8 million people had access to the Web

Societal Concerns of Web Publishing

Youth in Real-Time Chat
Pornography (especially child)
Security (Commercial and Personal)
Copyright Infringement
Intellectual Property Rights
Criminal Activities

Browsers, Servers and Protocols

Internet Standards and Specifications

FTP - File Transfer Protocol
- Archie (FTP extension)
Gopher
- Gopher Jewels
- Jughead
- Veronica
HTTP - Hypertext Transfer Protocol

Shortcomings of Internet Protocols

Hypertext Transfer Protocol

primary protocol on the Web
powerful and fast
original specification - HTTP/0.9
- does not allow content-typing
- no provision for meta-information
HTTP/1.0 incorporates content-typing and meta-information
connectionless and stateless

Connectionless Protocols (ie. HTTP)

clients:
1. connect to a server
2. make a request
3. get a response
4. then disconnect
no system resources used afterwards
servers only limited by active connections
drawback - clients requiring additional information must re-connect

Connection-Oriented Protocols (ie. FTP)

clients:
1. connect to a server
2. make a request
3. get a response
4. then maintain connection
uses both client and server system resources
too many open connections slow down server
processes not disconnected cleanly can cause server slow downs or crashes

Stateless Protocols (ie. HTTP)

maintains no state information after disconnection
1. no data to clean up from memory
2. no logs to write
increased server performance
drawback - when required, state information must be included as meta-information in document headers

Stateful Protocols (ie. FTP)

maintain information about transactions and processes
1. status of connection
2. processes running
3. status of processes running, etc.
memory resident using system resources
on disconnection, memory must be released, logs written, etc, consuming system resources

Structure of Web Documents

structure primarily determined by language used for layout
most common languages:
- Standard Generalized Markup Language (SGML)
  - most Web docments use a markup language based on SGML
  - defines a generalized markup for sharing complex documents which is described in standard text
  - widest range of compatibility and formatting in human-readable form
  - no special software required to create documents
  - extremely advanced, few limitaitons
  - not widely used on the Web
  - HTML and VRML are based on SGML
- Virtual Reality Modelling Language (VRML)
  - enables rendering of complex models and multi-dimensional documents using a standardized markup language
  - reduces calculations and data points which could use up to 10MB of disk space to a few hundred lines of markup code
  - dramatically reduces download time
  - presents complex models in human-readable format
- Hypertext Markup Language (HTML)
  - most commonly used on the Web
  - easy, user-friendly language
  - enables control of many layout aspects
    - relative size of headings
    - basic text styles (bold, itlics, underline)
    - relative placement of images
  - "4" versions since it was developed
  - various companies have added HTML extensions to their browsers, especially Netscape and Microsoft
  - Netscape extensions are so widely used, they are almost viewed as part of the specification
- page definition languages
  - proprietary languages usually based on SGML
  - includes Adobe Acrobat and Corel Ventura languages
  - not used directly in Web publishing

MIME Data-Types

HTTP transfers virtually any media possible, from text to full motion video, through the Multipurpose Internet Mail Extensions (MIME)
HTTP uses MIME to identify the type of object being transferred. Types are identified in a header field called the Content-Type.
a GIF image is identified by the MIME type: image/gif
the client decides to handle the object either
1. internally
2. through a helper application
3. prompt user for decision
MIME was originally developed to allow e-mail messages to have multiple parts consisting of different data types

Using URLs

A client needs to know 3 things to retrieve a file from a server
1. the server's address
2. where the file is located on the server
3. which protocol to use to retrieve the file
this information is specified as a Uniform Resource Locator (URL)
can be used with any valid protocol

Standard Structure of an URL

protocol://server_host:port/path_to_resource

where:

protocol is the protocol to use for the file transfer
server_host is the server's address
port is the communications port to use on the server
path_to_resource is where the file is located (usually including file name)
double slashes indicate the protocol uses the format defined by the Common Internet Scheme Syntax (CISS)
colons are separators

Common Protocols

FTP
Gopher
HTTP
mailto
Prospero
news
NNTP
Telnet
WAIS
file File Transfer Protocol
Gopher Protocol
Hypertext Transfer Protocol
e-mail address
Prospero Directory Service
Usenet news
Usenet news with Network News Transfer Protocol
Remote login sessions
Wide Area Information Servers
files on local host

Common Gateway Interface

URLs can link to programs which produce highly interactive and dynamic documents
programs specified in URLs are called gateway scripts
the name comes from UNIX where gateways are programs or devices that provide an interface
programs written in UNIX shell are called scripts
most gateway scripts are written in UNIX shells, though Windows-based servers use Visual Basic, and some newer servers use Java and Javascript
the specification on how gateway scripts pass info to servers is called the Common Gateway Interface(CGI)
CGI scripts allow creation of interactive forms, image maps and database queries
CGI scripts provide a platform-independent service

Evolution of Standards and Specifications

All of these standards and specifications are the result of the coordinated efforst of standards organizations and their working groups. These organizations approve changes to existing standards and specifications, and develop new standards and specifications.
There are 3 primary groups which develop standards and specifications for the internet:

International Organization for Standardization (ISO)

one of the most important standards-making bodies in the world
does not generally develop standards specifically for the internet, rather for networking in general
most internet standards and specifications incorporate ISO standards
ISO standard 8859 used by all browsers to define the character set
ISO 8859-1 defines the character set called ISO-Latin-1
The extended version is called the ISO-Added-Latin-1, referred to for special characters such as &, ©, and ®

Internet Engineering Task Force

primary organization for developing internet standards
all changes to existing internet standards and proposals for new ones are apporved by the IETF
IETF meets 3 times a year to set directions for the internet

The Process:

working groups propose Internet Draft specifications
Internet Drafts only valid for six months
if approved, become an RFC (Request for Comments)
RFCs permanently archived and valid until superseded
RFCs eventually become standards, but process slow:

URLs Draft in 1990
URLs RFC in December 1994
URLs Internet Standard in 1996

World Wide Web Consortium (W3C)

managed by the Laboratory for Computer Science at the Massachusetts Institute of Technology (MIT)
exists to develop common standards for the World Wide Web and the development of Web technologies
joint initiative between MIT, CERN & INRIA
US W3C center at MIT; European center at INRIA
provides Web developers wih a repository of information
maintain sites containing the most current information related to Web development
prototype applications which use new technologies proposed in Internet Drafts

Graphic Representation of a Web Site

Sample Topics for a Customer Support Web Presentation

[Welcome | What's New | FAQ | Bugs | Suggestions | Download | Discussion | Search]
Presentation Structures

Hierarchical

Linear with Alternatives

Combination

Web Style

Linear

Using StoryBoards

which topics go on each page?

usually one topic per page, unless really small

what are the primary navigation methods?

determine type and direction of links

alternative forms of navigation?

glossary
index
external links

contents of home page?

starting point for visitor

review goals and objectives

easier to make changes now than after presentation is half finished


Hierarchical	Linear with Alternatives

Combination	Web Style

Linear