SlideShare a Scribd company logo
The Evolution of
Web Design
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
      Use Web technologies to increase
       productivity and enjoyment
Guiding Questions
1.   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
120
100
80                            1995
                              1997
60
                              1999
40
                              2001
20                            2003
 0
      Netscape   IE   Other
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
 Onlinepresence 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/first
    pages.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

More Related Content

What's hot

Blogs and Wikis for the Classroom and Administration
Blogs and Wikis for the Classroom and AdministrationBlogs and Wikis for the Classroom and Administration
Blogs and Wikis for the Classroom and Administration
Kenneth Pinto
 
Web Technology for Your Outreach Program
Web Technology for Your Outreach ProgramWeb Technology for Your Outreach Program
Web Technology for Your Outreach Program
Naomi Hirsch
 
MyCommunity Demo Introduction
MyCommunity Demo IntroductionMyCommunity Demo Introduction
MyCommunity Demo Introduction
michaeldwebb
 
Technology.Teaching.Learning
Technology.Teaching.LearningTechnology.Teaching.Learning
Technology.Teaching.Learning
OHIO ITSCO
 
Lis 5260 presentation jbh ppt
Lis 5260 presentation jbh pptLis 5260 presentation jbh ppt
Lis 5260 presentation jbh ppt
JBHpresents27
 
academic commons & sotl
academic commons & sotlacademic commons & sotl
academic commons & sotl
mroy
 
A Survey of Web 2.0 Technologies Pang
A Survey of Web 2.0 Technologies PangA Survey of Web 2.0 Technologies Pang
A Survey of Web 2.0 Technologies Pang
College of Southern Maryland Faculty
 
Web 2.o by anshika mishra
Web 2.o by anshika mishraWeb 2.o by anshika mishra
Web 2.o by anshika mishra
anshikakashyap
 
Tech tools for teachers paace.ppt
Tech tools for teachers paace.pptTech tools for teachers paace.ppt
Tech tools for teachers paace.ppt
David Rosen
 
Blogs and Wikis for Beginners
Blogs and Wikis for BeginnersBlogs and Wikis for Beginners
Blogs and Wikis for Beginners
rdesalvo
 
Edulearn10 using wikis in a news and views course
Edulearn10 using wikis in a news and views courseEdulearn10 using wikis in a news and views course
Edulearn10 using wikis in a news and views course
The Hong Kong Polytechnic University
 
Blended learning for fac hss april 2010 edit
Blended learning for fac hss april 2010 editBlended learning for fac hss april 2010 edit
Blended learning for fac hss april 2010 edit
Bex Lewis
 
Accessibility Issues in Online Education and Websites: Current Case Law and ...
Accessibility Issues in Online Education and Websites:  Current Case Law and ...Accessibility Issues in Online Education and Websites:  Current Case Law and ...
Accessibility Issues in Online Education and Websites: Current Case Law and ...
Raymond Rose
 
If They Build It They Will Come
If They Build It They Will ComeIf They Build It They Will Come
If They Build It They Will Come
Keith Kirkwood
 
Integrating universal design, best practices, & accessibility atia 2013
Integrating universal design, best practices, & accessibility   atia 2013Integrating universal design, best practices, & accessibility   atia 2013
Integrating universal design, best practices, & accessibility atia 2013
Howard Kramer
 
How Recent Web Developments Offer Low-cost Opportunities for Service Development
How Recent Web Developments Offer Low-cost Opportunities for Service DevelopmentHow Recent Web Developments Offer Low-cost Opportunities for Service Development
How Recent Web Developments Offer Low-cost Opportunities for Service Development
lisbk
 
Information Literacy and the 2.0s
Information Literacy and the 2.0sInformation Literacy and the 2.0s
Information Literacy and the 2.0s
Kara Jones
 
Web 2.0 vodcast
Web 2.0 vodcastWeb 2.0 vodcast
Web 2.0 vodcast
onebel
 

What's hot (18)

Blogs and Wikis for the Classroom and Administration
Blogs and Wikis for the Classroom and AdministrationBlogs and Wikis for the Classroom and Administration
Blogs and Wikis for the Classroom and Administration
 
Web Technology for Your Outreach Program
Web Technology for Your Outreach ProgramWeb Technology for Your Outreach Program
Web Technology for Your Outreach Program
 
MyCommunity Demo Introduction
MyCommunity Demo IntroductionMyCommunity Demo Introduction
MyCommunity Demo Introduction
 
Technology.Teaching.Learning
Technology.Teaching.LearningTechnology.Teaching.Learning
Technology.Teaching.Learning
 
Lis 5260 presentation jbh ppt
Lis 5260 presentation jbh pptLis 5260 presentation jbh ppt
Lis 5260 presentation jbh ppt
 
academic commons & sotl
academic commons & sotlacademic commons & sotl
academic commons & sotl
 
A Survey of Web 2.0 Technologies Pang
A Survey of Web 2.0 Technologies PangA Survey of Web 2.0 Technologies Pang
A Survey of Web 2.0 Technologies Pang
 
Web 2.o by anshika mishra
Web 2.o by anshika mishraWeb 2.o by anshika mishra
Web 2.o by anshika mishra
 
Tech tools for teachers paace.ppt
Tech tools for teachers paace.pptTech tools for teachers paace.ppt
Tech tools for teachers paace.ppt
 
Blogs and Wikis for Beginners
Blogs and Wikis for BeginnersBlogs and Wikis for Beginners
Blogs and Wikis for Beginners
 
Edulearn10 using wikis in a news and views course
Edulearn10 using wikis in a news and views courseEdulearn10 using wikis in a news and views course
Edulearn10 using wikis in a news and views course
 
Blended learning for fac hss april 2010 edit
Blended learning for fac hss april 2010 editBlended learning for fac hss april 2010 edit
Blended learning for fac hss april 2010 edit
 
Accessibility Issues in Online Education and Websites: Current Case Law and ...
Accessibility Issues in Online Education and Websites:  Current Case Law and ...Accessibility Issues in Online Education and Websites:  Current Case Law and ...
Accessibility Issues in Online Education and Websites: Current Case Law and ...
 
If They Build It They Will Come
If They Build It They Will ComeIf They Build It They Will Come
If They Build It They Will Come
 
Integrating universal design, best practices, & accessibility atia 2013
Integrating universal design, best practices, & accessibility   atia 2013Integrating universal design, best practices, & accessibility   atia 2013
Integrating universal design, best practices, & accessibility atia 2013
 
How Recent Web Developments Offer Low-cost Opportunities for Service Development
How Recent Web Developments Offer Low-cost Opportunities for Service DevelopmentHow Recent Web Developments Offer Low-cost Opportunities for Service Development
How Recent Web Developments Offer Low-cost Opportunities for Service Development
 
Information Literacy and the 2.0s
Information Literacy and the 2.0sInformation Literacy and the 2.0s
Information Literacy and the 2.0s
 
Web 2.0 vodcast
Web 2.0 vodcastWeb 2.0 vodcast
Web 2.0 vodcast
 

Viewers also liked

Анализ международных операторов связи тор 10
Анализ международных операторов связи тор 10Анализ международных операторов связи тор 10
Анализ международных операторов связи тор 10
annieast
 
Mpp serverance plan
Mpp serverance planMpp serverance plan
Mpp serverance plan
mrbeacock
 
Rangkuman aplikasi rizki mauludi & acmad alfian x rpl 1
Rangkuman aplikasi  rizki mauludi & acmad alfian x rpl 1Rangkuman aplikasi  rizki mauludi & acmad alfian x rpl 1
Rangkuman aplikasi rizki mauludi & acmad alfian x rpl 1rizkimauludi
 
Leeds #B3Seminar: 10 Myths of Digital Design - Andy Curry
Leeds #B3Seminar: 10 Myths of Digital Design - Andy CurryLeeds #B3Seminar: 10 Myths of Digital Design - Andy Curry
Leeds #B3Seminar: 10 Myths of Digital Design - Andy Curry
Branded3
 
Subway slide
Subway slideSubway slide
Subway slide
2nd_error403
 
B3 Seminar: The golden rules of on-site engagement - Andrew Machin
B3 Seminar: The golden rules of on-site engagement - Andrew MachinB3 Seminar: The golden rules of on-site engagement - Andrew Machin
B3 Seminar: The golden rules of on-site engagement - Andrew Machin
Branded3
 
B3 Seminar: Converting Your Traffic into Customers - Andrew Machin
B3 Seminar: Converting Your Traffic into Customers - Andrew MachinB3 Seminar: Converting Your Traffic into Customers - Andrew Machin
B3 Seminar: Converting Your Traffic into Customers - Andrew Machin
Branded3
 
Project no 5
Project no 5Project no 5
Project no 5
sperjan anu
 
Internet World: Audience Engagement - Tim Grice
Internet World: Audience Engagement - Tim GriceInternet World: Audience Engagement - Tim Grice
Internet World: Audience Engagement - Tim Grice
Branded3
 
B3Seminar: What Google wants & how to future-proof SEO - Patrick Altoft
B3Seminar: What Google wants & how to future-proof SEO - Patrick AltoftB3Seminar: What Google wants & how to future-proof SEO - Patrick Altoft
B3Seminar: What Google wants & how to future-proof SEO - Patrick Altoft
Branded3
 
eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...
eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...
eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...
Branded3
 
SMX London: Engagement, the key to higher rankings - Tim Grice
SMX London: Engagement, the key to higher rankings - Tim GriceSMX London: Engagement, the key to higher rankings - Tim Grice
SMX London: Engagement, the key to higher rankings - Tim Grice
Branded3
 
Rangkuman aplikasi rizki mauludi & ahmad alfian x rpl 1
Rangkuman aplikasi  rizki mauludi & ahmad alfian x rpl 1Rangkuman aplikasi  rizki mauludi & ahmad alfian x rpl 1
Rangkuman aplikasi rizki mauludi & ahmad alfian x rpl 1rizkimauludi
 
Digital Futures: Five Digital Trends for 2013 - David Crawford
Digital Futures: Five Digital Trends for 2013 - David CrawfordDigital Futures: Five Digital Trends for 2013 - David Crawford
Digital Futures: Five Digital Trends for 2013 - David Crawford
Branded3
 
London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...
London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...
London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...
Branded3
 
B3 Seminar: Delivering truly future-proof SEO campaigns - Patrick Altoft
B3 Seminar: Delivering truly future-proof SEO campaigns - Patrick AltoftB3 Seminar: Delivering truly future-proof SEO campaigns - Patrick Altoft
B3 Seminar: Delivering truly future-proof SEO campaigns - Patrick Altoft
Branded3
 

Viewers also liked (20)

Анализ международных операторов связи тор 10
Анализ международных операторов связи тор 10Анализ международных операторов связи тор 10
Анализ международных операторов связи тор 10
 
Mpp serverance plan
Mpp serverance planMpp serverance plan
Mpp serverance plan
 
Rangkuman aplikasi rizki mauludi & acmad alfian x rpl 1
Rangkuman aplikasi  rizki mauludi & acmad alfian x rpl 1Rangkuman aplikasi  rizki mauludi & acmad alfian x rpl 1
Rangkuman aplikasi rizki mauludi & acmad alfian x rpl 1
 
Leeds #B3Seminar: 10 Myths of Digital Design - Andy Curry
Leeds #B3Seminar: 10 Myths of Digital Design - Andy CurryLeeds #B3Seminar: 10 Myths of Digital Design - Andy Curry
Leeds #B3Seminar: 10 Myths of Digital Design - Andy Curry
 
M.fakhri
M.fakhri M.fakhri
M.fakhri
 
Subway slide
Subway slideSubway slide
Subway slide
 
B3 Seminar: The golden rules of on-site engagement - Andrew Machin
B3 Seminar: The golden rules of on-site engagement - Andrew MachinB3 Seminar: The golden rules of on-site engagement - Andrew Machin
B3 Seminar: The golden rules of on-site engagement - Andrew Machin
 
Muhammad Fakhri
Muhammad FakhriMuhammad Fakhri
Muhammad Fakhri
 
B3 Seminar: Converting Your Traffic into Customers - Andrew Machin
B3 Seminar: Converting Your Traffic into Customers - Andrew MachinB3 Seminar: Converting Your Traffic into Customers - Andrew Machin
B3 Seminar: Converting Your Traffic into Customers - Andrew Machin
 
Update
UpdateUpdate
Update
 
Project no 5
Project no 5Project no 5
Project no 5
 
Internet World: Audience Engagement - Tim Grice
Internet World: Audience Engagement - Tim GriceInternet World: Audience Engagement - Tim Grice
Internet World: Audience Engagement - Tim Grice
 
B3Seminar: What Google wants & how to future-proof SEO - Patrick Altoft
B3Seminar: What Google wants & how to future-proof SEO - Patrick AltoftB3Seminar: What Google wants & how to future-proof SEO - Patrick Altoft
B3Seminar: What Google wants & how to future-proof SEO - Patrick Altoft
 
eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...
eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...
eCommerce Expo: Designing Customer Experiences that create Advocacy and Reten...
 
Tercopy
TercopyTercopy
Tercopy
 
SMX London: Engagement, the key to higher rankings - Tim Grice
SMX London: Engagement, the key to higher rankings - Tim GriceSMX London: Engagement, the key to higher rankings - Tim Grice
SMX London: Engagement, the key to higher rankings - Tim Grice
 
Rangkuman aplikasi rizki mauludi & ahmad alfian x rpl 1
Rangkuman aplikasi  rizki mauludi & ahmad alfian x rpl 1Rangkuman aplikasi  rizki mauludi & ahmad alfian x rpl 1
Rangkuman aplikasi rizki mauludi & ahmad alfian x rpl 1
 
Digital Futures: Five Digital Trends for 2013 - David Crawford
Digital Futures: Five Digital Trends for 2013 - David CrawfordDigital Futures: Five Digital Trends for 2013 - David Crawford
Digital Futures: Five Digital Trends for 2013 - David Crawford
 
London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...
London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...
London #B3Seminar: Why brands need to consider their Engagement Rate Optimisa...
 
B3 Seminar: Delivering truly future-proof SEO campaigns - Patrick Altoft
B3 Seminar: Delivering truly future-proof SEO campaigns - Patrick AltoftB3 Seminar: Delivering truly future-proof SEO campaigns - Patrick Altoft
B3 Seminar: Delivering truly future-proof SEO campaigns - Patrick Altoft
 

Similar to The Evolution of the Web

Web Development
Web DevelopmentWeb Development
Web Development
Nusrat Khanom
 
Webpage & Multimedia Design- class01
Webpage & Multimedia Design- class01Webpage & Multimedia Design- class01
Webpage & Multimedia Design- class01
hellosoon_world
 
The Modern Web
The Modern WebThe Modern Web
The Modern Web
Matthew W. Bowers
 
Evolution of web design
Evolution of web designEvolution of web design
Evolution of web design
orientation b
 
HTML for beginners
HTML for beginnersHTML for beginners
HTML for beginners
Salahaddin University-Erbil
 
Web 2.0 Instructional Tools
Web 2.0 Instructional ToolsWeb 2.0 Instructional Tools
Web 2.0 Instructional Tools
Antwuan Stinson
 
Browser
BrowserBrowser
Web design
Web designWeb design
Web design
quietlap1107
 
Web design
Web designWeb design
Web design
livelyaxle5187
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN
NAWAZ KHAN
 
Ten design tips for non-designers
Ten design tips for non-designersTen design tips for non-designers
Ten design tips for non-designers
Annika Oeser
 
Rutgers - History Intranet
Rutgers - History IntranetRutgers - History Intranet
Rutgers - History Intranet
Michael Dobe, Ph.D.
 
Web design
Web designWeb design
Web design
ashrafulislam293
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web Presence
Susan Boone
 
Web browsers and web document
Web browsers and web documentWeb browsers and web document
Web browsers and web document
Mohammad Kamrul Hasan
 
Meda5400 Web2.0.ppt
Meda5400 Web2.0.pptMeda5400 Web2.0.ppt
Meda5400 Web2.0.ppt
Michelle Childress
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
Photon
 
WEB DESIGN
WEB DESIGNWEB DESIGN
FUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNINGFUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNING
priyadharshinihari
 
Semantic web
Semantic webSemantic web
Semantic web
Tanvi Vahora
 

Similar to The Evolution of the Web (20)

Web Development
Web DevelopmentWeb Development
Web Development
 
Webpage & Multimedia Design- class01
Webpage & Multimedia Design- class01Webpage & Multimedia Design- class01
Webpage & Multimedia Design- class01
 
The Modern Web
The Modern WebThe Modern Web
The Modern Web
 
Evolution of web design
Evolution of web designEvolution of web design
Evolution of web design
 
HTML for beginners
HTML for beginnersHTML for beginners
HTML for beginners
 
Web 2.0 Instructional Tools
Web 2.0 Instructional ToolsWeb 2.0 Instructional Tools
Web 2.0 Instructional Tools
 
Browser
BrowserBrowser
Browser
 
Web design
Web designWeb design
Web design
 
Web design
Web designWeb design
Web design
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN
 
Ten design tips for non-designers
Ten design tips for non-designersTen design tips for non-designers
Ten design tips for non-designers
 
Rutgers - History Intranet
Rutgers - History IntranetRutgers - History Intranet
Rutgers - History Intranet
 
Web design
Web designWeb design
Web design
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web Presence
 
Web browsers and web document
Web browsers and web documentWeb browsers and web document
Web browsers and web document
 
Meda5400 Web2.0.ppt
Meda5400 Web2.0.pptMeda5400 Web2.0.ppt
Meda5400 Web2.0.ppt
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
WEB DESIGN
WEB DESIGNWEB DESIGN
WEB DESIGN
 
FUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNINGFUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNING
 
Semantic web
Semantic webSemantic web
Semantic web
 

Recently uploaded

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 

Recently uploaded (20)

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 

The Evolution of the Web

  • 1. The Evolution of Web Design 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 1. 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)?
  • 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 Market Share 120 100 80 1995 1997 60 1999 40 2001 20 2003 0 Netscape IE Other
  • 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/early web/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  Onlinepresence 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/first pages.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

Editor's Notes

  1. Day 1
  2. Guiding QuestionsHow has the Web transformed your life?how you learnhow you access informationhow you entertain yourself (alone and with others)how you shophow you collaborate and communicate with your friends and familyWhat 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)?
  3. Development of the WWWTim Berners-LeeComputer Specialistdeveloped the Web in 1989Web developed at CERN (European Organization for Nuclear Research)Web popularized the Internet
  4. W3C (World Wide Consortium)Established in 1994 to develop standards and guidelines for the WebTim Berners-Lee has served as the directorBased at MIT (Massachusetts Institute of Technology)
  5. BrowsersSoftware allowing users to view content on the Internet and the WebMosaic was one of the earliest cross-platform graphical browsersOther early browsers include WorldWideWeb, ViolaWWW, Midas, and SambaToday’s browsers include Internet Explorer, Firefox, Opera, Flock, Mozilla, Safari
  6. Click to add notes
  7. Click to add notes
  8. First Generation Web DesignStatic pages with basic structuresNavigation achieved by clicking hyperlinksUse of guest booksForms sent via e-mailEarly exampleshttp://www.dejavu.org/1994win.htmhttp://www.slac.stanford.edu/history/earlyweb/firstpages.shtml
  9. First Generation Web DesignNon-compliancy of standards by browsersPages not rendered properly in all browsersLimited by technologySmall monochrome monitorsDial-up connectivitySlow Internet connection
  10. New Tools of Web 2.0Wiki allows users to modify online content using authoring toolsBlog is derived from Web log which is an online conversation, commentary, or journalPodcast 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
  11. This is the last slide of the presentation.