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

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

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)?

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

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)

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

Browser Wars Market Share Percentage 1995 1997 1999 2001 2003 80.1 57.6 30.7 9.8 3.7 Netscape 2.9 39.4 67.5 89.9 95.9 IE 17.0 3.0 1.8 .3 .4 Other Based on figures from OnStat.com Click to add notes 7

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

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/earlyweb/firstpages.shtml First Generation Web Design Static pages with basic structures Navigation achieved by clicking hyperlinks Use of guest books Forms sent via e-mail Early examples http://www.dejavu.org/1994win.htm http://www.slac.stanford.edu/history/earlyweb/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 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

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) 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

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/website-building/evolution-of-websites-10-popular-websites.aspx, 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 This is the last slide of the presentation.