A brief history of the web


Published on

Date: 09 11 16
Course: Media Production
Lecture: Web Production nr 1

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • That’s me.
  • 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.
  • 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”
  • 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
  • December of that year, Engelbart demonstrated a hypertext interface to the public for the first time, in what has come to be known as "The Mother of All Demos".
  • 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.
  • That’s the first web server of history!
  • And he call it that. Mostly random.
  • He created all the tools by 1990 for a working web
  • From designing physics research experiments to sharing cute cat pictures
  • This is how websites looked liked at the beginning. Pure HTML..
  • This was what it looked like. HTML, looking the same as it does now.
  • 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).
  • 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's attention to important links displayed as graphical elements. Because JavaScript code can run locally in a user's browser (rather than on a remote server) it can respond to user actions quickly, making an application feel more responsive.
  • 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.
  • A brief history of the web

    1. 1. JORGE ZAPICO KTH / Media Technology [email_address] MEDIA PRODUCTION 2009/Nov/16
    2. 2. From hypertext to web services A brief history of the world wide web Obs! internet != www
    3. 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
    5. 6. 1968: The mother of all demos Douglas Engelbart at Stanford SRI
    6. 11. www world wide web
    7. 12. HTTP HyperText Transfer Protocol HTML HyperText Markup Language WorldWideWeb A web browser A server and the software
    8. 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;>© 1995 UC Regents</a>. <i> Updated 10/22/96, <a href=&quot;/faq/&quot;>www@www.berkeley.edu</a>. </i> </body>
    9. 18. We need style! CSS Cascading Style Sheets 1996
    10. 20. Separation of content from presentation!
    11. 21. We need power! Presenting static data is limited, we want interactivity and dynamic data
    12. 22. Client Side JavaScript 1996
    13. 23. Server Side PHP LAMP 1995
    14. 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); ?>
    15. 25. Other web frameworks Java C# .NET Perl Python Ruby
    16. 26. But the result is always the same! Valid HTML!
    17. 27. And you need something to interpret it: Web browser
    18. 29. Next lectures HTML + CSS Server side action
    19. 30. Contact at: Jorge Zapico [email_address] @zapico jorgezapico.com Presentation at http://slideshare.net/jorgezapico