SlideShare ist ein Scribd-Unternehmen logo
1 von 30
JORGE ZAPICO KTH / Media Technology [email_address] MEDIA PRODUCTION 2009/Nov/16
From hypertext to web services A brief history of the world wide web Obs! internet != www
hypertext A multi media text with branching references (links) to other documents, that can be read in a non-linear way
 
“ The Memex” As We May Think by Vannevar Bush
1968: The mother of all demos Douglas Engelbart at Stanford SRI
 
 
 
 
www world wide web
HTTP   HyperText Transfer Protocol HTML   HyperText Markup Language WorldWideWeb  A web browser A server and the software
 
 
 
<html> <head> <title>UC Berkeley Campus Information</title> </head> <body> <img align=top src=&quot;/icons/access.gif&quot; alt=&quot;*&quot;> <h2>Campus Information:</h2> <li><a href =&quot;http://www.chance.berkeley.edu/planning/calendar.html&quot;>Academic Calendar</a>  <li><a href =&quot;http://www.urel.berkeley.edu/ucadmin.html&quot;>Administration</a>  <li><a href =&quot;http://haas.berkeley.edu/bpledge/&quot;>Berkeley Pledge</a>  <li><a href =&quot;http://amber.berkeley.edu:4207/RSF/&quot;>Cal Bears Athletics & Recreational Sports</a>  <image align=top src=&quot;/icons/new.gif&quot; alt=&quot;**new**&quot;> <li><a href =&quot;http://www.alumni.berkeley.edu/&quot;>California Alumni Association</a>  </ul> <hr> <a href=&quot;/docs/copyright/&quot;>&#169; 1995 UC Regents</a>. <i> Updated 10/22/96, <a href=&quot;/faq/&quot;>www@www.berkeley.edu</a>. </i> </body>
 
We need style!   CSS Cascading Style Sheets 1996
 
Separation of content from presentation!
We need power!   Presenting static data is limited, we want interactivity and dynamic data
Client Side   JavaScript 1996
Server Side   PHP LAMP 1995
<?php $con = mysql_connect(&quot;localhost&quot;,&quot;peter&quot;,&quot;abc123&quot;); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db(&quot;my_db&quot;, $con); $result = mysql_query(&quot;SELECT * FROM Persons&quot;); echo &quot;<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> </tr>&quot;; while($row = mysql_fetch_array($result)) { echo &quot;<tr>&quot;; echo &quot;<td>&quot; . $row['FirstName'] . &quot;</td>&quot;; echo &quot;<td>&quot; . $row['LastName'] . &quot;</td>&quot;; echo &quot;</tr>&quot;; } echo &quot;</table>&quot;; mysql_close($con); ?>
Other web frameworks   Java C# .NET Perl Python Ruby
But the result is always the same! Valid HTML!
And you need something to interpret it: Web browser
 
Next lectures HTML + CSS Server side action
Contact at: Jorge Zapico [email_address] @zapico jorgezapico.com Presentation at http://slideshare.net/jorgezapico

Weitere ähnliche Inhalte

Was ist angesagt?

Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Arizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-DesignersArizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-DesignersNina Miller
 
Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSWriting Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSDmitry Sheiko
 
Cosmology of the web - Lecture 1
Cosmology of the web - Lecture 1Cosmology of the web - Lecture 1
Cosmology of the web - Lecture 1Drake Martinet
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive WebsitesClarissa Peterson
 
Why Python Web Frameworks Are Changing the Web
Why Python Web Frameworks Are Changing the WebWhy Python Web Frameworks Are Changing the Web
Why Python Web Frameworks Are Changing the Webjoelburton
 
Simplifying your admin experience - Stanford WebCamp
Simplifying your admin experience - Stanford WebCampSimplifying your admin experience - Stanford WebCamp
Simplifying your admin experience - Stanford WebCampMartin Anderson-Clutz
 
Build a Bootstrap WordPress theme
Build a Bootstrap WordPress themeBuild a Bootstrap WordPress theme
Build a Bootstrap WordPress themeDimitri Dhuyvetter
 
Starting a website from design
Starting a website from designStarting a website from design
Starting a website from designNadachan5
 
Wordpress + Facebook by Sean Blanda
Wordpress + Facebook by Sean BlandaWordpress + Facebook by Sean Blanda
Wordpress + Facebook by Sean BlandaSean Blanda
 
WRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointWRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointMiami University
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsTim Wright
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & TypographyDanny Calders
 
ARTDM 171 Week 3: Tags + Group Projects
ARTDM 171 Week 3: Tags + Group ProjectsARTDM 171 Week 3: Tags + Group Projects
ARTDM 171 Week 3: Tags + Group ProjectsGilbert Guerrero
 

Was ist angesagt? (20)

Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Arizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-DesignersArizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-Designers
 
WordPress database
WordPress databaseWordPress database
WordPress database
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 
Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSWriting Scalable and Maintainable CSS
Writing Scalable and Maintainable CSS
 
Cosmology of the web - Lecture 1
Cosmology of the web - Lecture 1Cosmology of the web - Lecture 1
Cosmology of the web - Lecture 1
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
Why Python Web Frameworks Are Changing the Web
Why Python Web Frameworks Are Changing the WebWhy Python Web Frameworks Are Changing the Web
Why Python Web Frameworks Are Changing the Web
 
Simplifying your admin experience - Stanford WebCamp
Simplifying your admin experience - Stanford WebCampSimplifying your admin experience - Stanford WebCamp
Simplifying your admin experience - Stanford WebCamp
 
Being Cleverly Lazy
Being Cleverly LazyBeing Cleverly Lazy
Being Cleverly Lazy
 
Build a Bootstrap WordPress theme
Build a Bootstrap WordPress themeBuild a Bootstrap WordPress theme
Build a Bootstrap WordPress theme
 
20120424 b
20120424 b20120424 b
20120424 b
 
Bentobox exercise
Bentobox exerciseBentobox exercise
Bentobox exercise
 
Starting a website from design
Starting a website from designStarting a website from design
Starting a website from design
 
Wordpress + Facebook by Sean Blanda
Wordpress + Facebook by Sean BlandaWordpress + Facebook by Sean Blanda
Wordpress + Facebook by Sean Blanda
 
WRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointWRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPoint
 
HTML Resources
HTML ResourcesHTML Resources
HTML Resources
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web Standards
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
ARTDM 171 Week 3: Tags + Group Projects
ARTDM 171 Week 3: Tags + Group ProjectsARTDM 171 Week 3: Tags + Group Projects
ARTDM 171 Week 3: Tags + Group Projects
 

Andere mochten auch

Andere mochten auch (9)

Chef
ChefChef
Chef
 
Hdgt Hk I 2009
Hdgt Hk I 2009Hdgt Hk I 2009
Hdgt Hk I 2009
 
Chemistry
ChemistryChemistry
Chemistry
 
Vecto
VectoVecto
Vecto
 
Sirius Integrator Presentation 11 25 11
Sirius Integrator Presentation 11 25 11Sirius Integrator Presentation 11 25 11
Sirius Integrator Presentation 11 25 11
 
Focusing the Brand for the Coming Recovery
Focusing the Brand for the Coming RecoveryFocusing the Brand for the Coming Recovery
Focusing the Brand for the Coming Recovery
 
Guidelines for a Sustainable Internet
Guidelines for a Sustainable InternetGuidelines for a Sustainable Internet
Guidelines for a Sustainable Internet
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
2013 hacking for sustainability ict course
2013 hacking for sustainability   ict course2013 hacking for sustainability   ict course
2013 hacking for sustainability ict course
 

Ähnlich wie A brief history of the web

Web Scraper Shibuya.pm tech talk #8
Web Scraper Shibuya.pm tech talk #8Web Scraper Shibuya.pm tech talk #8
Web Scraper Shibuya.pm tech talk #8Tatsuhiko Miyagawa
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXHilary Mason
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless OpacBill Drew
 
Html5, css3, canvas, svg and webgl
Html5, css3, canvas, svg and webglHtml5, css3, canvas, svg and webgl
Html5, css3, canvas, svg and webglKilian Valkhof
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPyucefmerhi
 
Open Source Package PHP & MySQL
Open Source Package PHP & MySQLOpen Source Package PHP & MySQL
Open Source Package PHP & MySQLkalaisai
 
Open Source Package Php Mysql 1228203701094763 9
Open Source Package Php Mysql 1228203701094763 9Open Source Package Php Mysql 1228203701094763 9
Open Source Package Php Mysql 1228203701094763 9isadorta
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Finalematrix
 
Introduction To Lamp
Introduction To LampIntroduction To Lamp
Introduction To LampAmzad Hossain
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro htmldilom1986
 
PHP Presentation
PHP PresentationPHP Presentation
PHP PresentationNikhil Jain
 

Ähnlich wie A brief history of the web (20)

Web Scraper Shibuya.pm tech talk #8
Web Scraper Shibuya.pm tech talk #8Web Scraper Shibuya.pm tech talk #8
Web Scraper Shibuya.pm tech talk #8
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
 
Lect_html1
Lect_html1Lect_html1
Lect_html1
 
Html5
Html5Html5
Html5
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless Opac
 
Html5, css3, canvas, svg and webgl
Html5, css3, canvas, svg and webglHtml5, css3, canvas, svg and webgl
Html5, css3, canvas, svg and webgl
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
 
Ubi comp27nov04
Ubi comp27nov04Ubi comp27nov04
Ubi comp27nov04
 
Open Source Package PHP & MySQL
Open Source Package PHP & MySQLOpen Source Package PHP & MySQL
Open Source Package PHP & MySQL
 
Open Source Package Php Mysql 1228203701094763 9
Open Source Package Php Mysql 1228203701094763 9Open Source Package Php Mysql 1228203701094763 9
Open Source Package Php Mysql 1228203701094763 9
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
 
PHP MySQL
PHP MySQLPHP MySQL
PHP MySQL
 
Php 3 1
Php 3 1Php 3 1
Php 3 1
 
APEX Themes and Templates
APEX Themes and TemplatesAPEX Themes and Templates
APEX Themes and Templates
 
Introduction To Lamp
Introduction To LampIntroduction To Lamp
Introduction To Lamp
 
When Why What of WWW
When Why What of WWWWhen Why What of WWW
When Why What of WWW
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
 
PHP Presentation
PHP PresentationPHP Presentation
PHP Presentation
 

Kürzlich hochgeladen

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 

Kürzlich hochgeladen (20)

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 

A brief history of the web

  • 1. JORGE ZAPICO KTH / Media Technology [email_address] MEDIA PRODUCTION 2009/Nov/16
  • 2. From hypertext to web services A brief history of the world wide web Obs! internet != www
  • 3. hypertext A multi media text with branching references (links) to other documents, that can be read in a non-linear way
  • 4.  
  • 5. “ The Memex” As We May Think by Vannevar Bush
  • 6. 1968: The mother of all demos Douglas Engelbart at Stanford SRI
  • 7.  
  • 8.  
  • 9.  
  • 10.  
  • 12. HTTP HyperText Transfer Protocol HTML HyperText Markup Language WorldWideWeb A web browser A server and the software
  • 13.  
  • 14.  
  • 15.  
  • 16. <html> <head> <title>UC Berkeley Campus Information</title> </head> <body> <img align=top src=&quot;/icons/access.gif&quot; alt=&quot;*&quot;> <h2>Campus Information:</h2> <li><a href =&quot;http://www.chance.berkeley.edu/planning/calendar.html&quot;>Academic Calendar</a> <li><a href =&quot;http://www.urel.berkeley.edu/ucadmin.html&quot;>Administration</a> <li><a href =&quot;http://haas.berkeley.edu/bpledge/&quot;>Berkeley Pledge</a> <li><a href =&quot;http://amber.berkeley.edu:4207/RSF/&quot;>Cal Bears Athletics & Recreational Sports</a> <image align=top src=&quot;/icons/new.gif&quot; alt=&quot;**new**&quot;> <li><a href =&quot;http://www.alumni.berkeley.edu/&quot;>California Alumni Association</a> </ul> <hr> <a href=&quot;/docs/copyright/&quot;>&#169; 1995 UC Regents</a>. <i> Updated 10/22/96, <a href=&quot;/faq/&quot;>www@www.berkeley.edu</a>. </i> </body>
  • 17.  
  • 18. We need style! CSS Cascading Style Sheets 1996
  • 19.  
  • 20. Separation of content from presentation!
  • 21. We need power! Presenting static data is limited, we want interactivity and dynamic data
  • 22. Client Side JavaScript 1996
  • 23. Server Side PHP LAMP 1995
  • 24. <?php $con = mysql_connect(&quot;localhost&quot;,&quot;peter&quot;,&quot;abc123&quot;); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db(&quot;my_db&quot;, $con); $result = mysql_query(&quot;SELECT * FROM Persons&quot;); echo &quot;<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> </tr>&quot;; while($row = mysql_fetch_array($result)) { echo &quot;<tr>&quot;; echo &quot;<td>&quot; . $row['FirstName'] . &quot;</td>&quot;; echo &quot;<td>&quot; . $row['LastName'] . &quot;</td>&quot;; echo &quot;</tr>&quot;; } echo &quot;</table>&quot;; mysql_close($con); ?>
  • 25. Other web frameworks Java C# .NET Perl Python Ruby
  • 26. But the result is always the same! Valid HTML!
  • 27. And you need something to interpret it: Web browser
  • 28.  
  • 29. Next lectures HTML + CSS Server side action
  • 30. Contact at: Jorge Zapico [email_address] @zapico jorgezapico.com Presentation at http://slideshare.net/jorgezapico

Hinweis der Redaktion

  1. That’s me.
  2. Internet and the World Wide Web are not one and the same. The Internet is a global system of interconnected computer networks. In contrast, the Web is one of the services that runs on the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs. In short, the Web is an application running on the Internet.[17] Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of communication messages, behind the scenes, in order to fetch and display it.
  3. In literature there was a protoidea of hypertext: Borges’ The garden of forking paths: the idea of a novel that ca be read in multiple ways. 1941. Cortazar’s Hopscotch 1963. You can jump from different chapters in a non linear way, following “links”
  4. Article in 1945 about a device making possible to display books and any document and to create “trails” of connected linked pages and documents. Influenced the invention of hypertexit by Ted Nelson and Douglas Engelbart
  5. December of that year, Engelbart demonstrated a hypertext interface to the public for the first time, in what has come to be known as &amp;quot;The Mother of All Demos&amp;quot;.
  6. Sir Tim Berners-Lee In 1989 / 1990 created the first proposal for the WWW at CERNS and then implemented the first successful communication between and HTTP client and a server.
  7. That’s the first web server of history!
  8. And he call it that. Mostly random.
  9. He created all the tools by 1990 for a working web
  10. From designing physics research experiments to sharing cute cat pictures
  11. This is how websites looked liked at the beginning. Pure HTML..
  12. This was what it looked like. HTML, looking the same as it does now.
  13. Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).
  14. JavaScript is an object-oriented[2] scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites. The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are: * Opening or popping up a new window with programmatic control over the size, position, and attributes of the new window (i.e. whether the menus, toolbars, etc. are visible). * Validation of web form input values to make sure that they will be accepted before they are submitted to the server. * Changing images as the mouse cursor moves over them: This effect is often used to draw the user&apos;s attention to important links displayed as graphical elements. Because JavaScript code can run locally in a user&apos;s browser (rather than on a remote server) it can respond to user actions quickly, making an application feel more responsive.
  15. Hypertext Preprocessor, is a widely used, general-purpose scripting language that was originally designed for web development, to produce dynamic web pages. It can be embedded into HTML and generally runs on a web server, which needs to be configured to process PHP code and create web page content from it. LAMP is an acronym for a solution stack of free, open source software, originally coined from the first letters of Linux used for the operating system, Apache HTTP Server, MySQL (database software), and PHP or perl (scripting language), principal components to build a viable general purpose web server.