1. The Evolution of Web Design
LESSON 1
Module 1: The History and the Future of the Web
The Evolution of Web Design

2. 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
Day 1

3. Guiding Questions How has the Web transformed your life?
What technologies make using the Web more engaging and exciting on your computer or a hand-held device?
Why do you think there is a need for the W3C (World Wide Web Consortium)?
Guiding Questions
How has the Web transformed your life?
how you learn
how you access information
how you entertain yourself (alone and with others)
how you shop
how you collaborate and communicate with your friends and family
What new technologies make using the Web more engaging and exciting on your computer or a hand-held device?
Why do you think there is a need for the W3C (World Wide Web Consortium)?

4. Development of the WWW Tim Berners-Lee
Web developed at CERN (European Organization for Nuclear Research)
Web popularized the Internet
Development of the WWW
Tim Berners-Lee
Computer Specialist
developed the Web in 1989
Web developed at CERN (European Organization for Nuclear Research)
Web popularized the Internet

5. W3C (World Wide Web Consortium)
Established in 1994
Tim Berners-Lee has served as the director
Based at MIT
W3C (World Wide Consortium)
Established in 1994 to develop standards and guidelines for the Web
Tim Berners-Lee has served as the director
Based at MIT (Massachusetts Institute of Technology)

6. 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
Browsers
Software allowing users to view content on the Internet and the Web
Mosaic was one of the earliest cross-platform graphical browsers
Other early browsers include WorldWideWeb, ViolaWWW, Midas, and Samba
Today’s browsers include Internet Explorer, Firefox, Opera, Flock, Mozilla, Safari 6

7. Browser Wars Market Share Percentage
Netscape IE
Other
Based on figures from OnStat.com
Click to add notes 7

8. Web Site Design Plan Analyze Design Test and Refine Click to add notes8

9. The First Generation of Web Design
Static pages
Navigation hyperlinks
Guest books
Forms sent via
Early examples
First Generation Web Design
Static pages with basic structures
Navigation achieved by clicking hyperlinks
Use of guest books
Forms sent via
Early examples

10. The First Generation of Web Design
Non-compliance with standards by browsers
Limited by technology
Small monochrome monitors
Dial-up connectivity
Slow Internet connection
First Generation Web Design
Non-compliancy of standards by browsers
Pages not rendered properly in all browsers
Limited by technology
Small monochrome monitors
Dial-up connectivity
Slow Internet connection

11. 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

12. 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 …”

13. 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

14. 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

15. 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

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

17. New Tools of Web 2.0 Wikis Blogs
Podcast (derived from iPod and broadcast)
New Tools of Web 2.0
Wiki allows users to modify online content using authoring tools
Blog is derived from Web log which is an online conversation, commentary, or journal
Podcast is derived form iPod and broadcast which is a digital file consisting of music, audio, and video converted into an MP3 file or other format to be played on a computer or hand-held device

18. Practice
Using a first-generation Web site, compare its characteristics to those of today’s sites.
Using a first-generation Web site, compare its characteristics to those of today’s sites.
How would you enhance their functionality?

19. 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 select three sites and note how they have evolved.

20. 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
This is the last slide of the presentation.