1 / 20

The Evolution of Web Design

The Evolution of Web Design. LESSON 1. Module 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

Melvin
Télécharger la présentation

The Evolution of Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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

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

  4. Development of the WWW Tim Berners-Lee 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

  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

  7. 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.9IE 17.0 3.0 1.8 .3 .4 Other Based on figures from OnStat.com

  8. Web Site Design Plan Analyze Design Test and Refine

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

  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

  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)

  18. 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?

  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 http://www.wakeuplater.com, 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

More Related