The Evolution of the Web

The Evolution of Web DesignModule 1: The History and the Future of the Web

Lesson Overview In this lesson, we will:

Discuss the history and impact of the Web Understand and discuss the evolution of

Web design Discuss the history and impact of Web

technologies Use Web technologies to increase

productivity and enjoyment

Guiding Questions1. How has the Web transformed your

life? 2. What technologies make using the Web

more engaging and exciting on your computer or a hand-held device?

3. Why do you think there is a need for the W3C (World Wide Web Consortium)?

Development of the WWW Tim Berners-Lee Web developed at CERN (European

Organization for Nuclear Research) Web popularized the Internet

W3C (World Wide Web Consortium) Established in 1994 Tim Berners-Lee has served as the

director Based at MIT

Browsers Allow users to view content on the Web Mosaic early cross-platform graphical

browsers Other early browsers include

WorldWideWeb, ViolaWWW, Midas, and Samba

Today’s browsers include Internet Explorer, Firefox, Opera, Flock, Mozilla, and Safari

Browser Market Share

Netscape IE Other0

20

40

60

80

100

120

19951997199920012003

Web Site Design Plan Analyze Design Test and Refine

The First Generation of Web Design Static pages Navigation hyperlinks Guest books Forms sent via e-mail Early examples

http://www.dejavu.org/1994win.htm http://www.slac.stanford.edu/history/early

web/firstpages.shtml

The First Generation of Web Design Non-compliance with standards by

browsers Limited by technology Small monochrome monitors Dial-up connectivity Slow Internet connection

Second Generation of Web Design Online presence for businesses was

essential Interactivity of the Web 24-hour access Global reach Ability to present product information

Second Generation of Web Design Intuitive, user-friendly navigation

system Use of forms Focus on content Banners, frames, and tables Blinking text, hit counters, marquees “This site is best viewed in …”

Third Generation of Web Design Sites designed to target specific

audience Focus on content Intuitive, user-friendly navigation

systems Use of forms, splash page, CSS, and

portals

Fourth Generation of Web Design Web 2.0

Participatory, interactive, and personalized

Compliance with Web standards Consistent design for professional look Usability and accessibility issues Careful selection of typography

Fourth Generation of Web Design Dynamically-generated content by the

user Content-authoring tools for editing Internet privacy Social networking, video sharing Rounded corners, subtle 3D effects Larger text

Fourth Generation of Web Design Open Source File Sharing Freemium Business Model RSS Feeds Web Services

New Tools of Web 2.0 Wikis Blogs Podcast (derived from iPod and

broadcast)

Practice Using http://www.dejavu.org/1994win.htm, a

first-generation Web site, compare its characteristics to those of today’s sites.

Using http://slac.stanford.edu/history/earlyweb/firstpages.shtml, a first-generation Web site, compare its characteristics to those of today’s sites.

How would you enhance their functionality?

Practice Usability and Accessibility Scavenger

Hunt Refines search techniques Reinforces classroom instruction about

the Web design process Evolution of Well-known Corporate Web

Sites Using http://www.wakeuplater.com, select

three sites and note how they have evolved.

Lesson Review During this lesson, you learned:

The History and Impact of the Web The Evolution of Web Design The History and Impact of Web

Technologies