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