A brief history of the Web
... and web development
1980 - 1991
Birth of the web
Invention and implementation of:
HTTP, HTML, URL + Browser
HTTP
GET, POST, PUT, DELETE...
HTML
<h1>, <p>, <ul>... and above all <a>
URI
Uniform Resource Identifier
Web Browser
First browser: WorldWideWeb
First website (1991)
1992 - 1999
The static Web
Websites in HTML
<html>
<head>
<title>Web title</title>
</head>
<body>
<font color="#A40317">
<font size=+2>
Header
</font>
</font>
<p>
<font color="#000000">
Lorem ipsum...
</font>
</p>
<p>
<font color="#000000">
Lorem ipsum...
</font>
</p>
</body>
</html>Vilaweb (1996)
UB (1996)
Generalitat (1997)
Limitations
Content is static
Websites are .html files
Poor style
Style in the HTML:
<font color="#ff000">, <font size="+2">, <table>
2000 - 2006
The dynamic web
Blogs, forums, wikis...
Style in CSS
Fonts, colors, spacing...
In the server, LAMP rules
Linux + Apache + MySQL + PHP
LAMP architecture
Request
Response
Wikipedia (2003)
Wordpress (2005)
A richer client?
JavaScript
- Runs in the browser
- Very slow
Examples:
- Countdown
- Hiding and showing elements
A richer client?
Flash
A richer client?
Java Applets
Limitations
Websites without much interaction
Flash and Java doesn't reach everyone
Doing websites from "scratch" is costly
2007 - 2011
The interactive Web
GMail, Twitter, Facebook...
AJAX
Asynchronous JavaScript and XML
Change the web content without refreshing
GMail
In the server: agile development
Request
Response
We always do the same
-
CRUD (Create, Read, Update, Delete)
-
Handle users (register, login, pa...)
-
Content in many languages
-
Read parameters from GET and POST
Code organization: Model - View - Controller
Model - View - Controller
class BlogPost:
author = User()
title = String()
body = Text()
Model
Controller
URLs, GET, POST...
<h1>
{{ post.title }}
</h1>
<p>
by {{ post.author }}
</p>
{{ post.body }}View
Request
Response
Frameworks
Frameworks in the LAMP
Request
Response
Django / RoR + AJAX
Microframeworks
2012 - ...
Total interaction!
Rich applications everywhere
HTML5 + CSS3
-
<video>
-
<audio>
-
<canvas>
-
<svg>
-
MathML
-
WebSockets
-
File API
-
CSS transitions
JavaScript reborn
Faster than ever, handles more things
Frameworks for JavaScript
in the client
JavaScript in the server
... and in the future?
Web 3.0
Decentralized architectures, instead of central servers
Unified client development
Same development for websites, mobile apps, etc.
A brief history of Web... and web development
By victorlf
