the evolution of web design module 1: the history and the future of the web lesson 1

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

Upload: mitchell-stone

Post on 23-Dec-2015

223 views

Category:

Documents


0 download

TRANSCRIPT

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

The Evolution of Web The Evolution of Web DesignDesign

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

Lesson OverviewIn 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

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

Module 1: The History and the Future of the Web

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

Development of the WWW Tim Berners-Lee Web developed at CERN (European Organization for Nuclear Research) Web popularized the Internet

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

W3C (World Wide Web Consortium) Established in 1994

Tim Berners-Lee has served as the director

Based at MIT

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

Web Site Design Plan Analyze Design Test and Refine

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

Small monochrome monitors Dial-up connectivity Slow Internet connection

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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?

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

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.

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

Module 1: The History and the Future of the Web

LESSON 1LESSON 1LESSON 1LESSON 1

Lesson ReviewDuring this lesson, you learned:

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