Una història de la web
... i el desenvolupament web
1980 - 1991
Naixement de la web
Invenció i implementació de:
HTTP, HTML, URL + Navegador
HTTP
GET, POST, PUT, DELETE...
HTML
<h1>, <p>, <ul>... i sobretot <a>
URI
Uniform Resource Identifier
Navegador
Primer navegador: WorldWideWeb
Primera web (1991)
1992 - 1999
La web estàtica
Webs en 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)
Limitacions
El contingut és estàtic
Les webs són arxius .html
L'estil és una mica pobre
Estil a l'HTML:
<font color="#ff000">, <font size="+2">, <table>
2000 - 2006
La web dinàmica
Blogs, fòrums, wikis...
Estil amb CSS
Fonts, colors, espaiat...
Al servidor triomfa el LAMP
Linux + Apache + MySQL + PHP
Arquitectura LAMP
Request
Response
Wikipedia (2003)
Wordpress (2005)
Un client més ric?
JavaScript
- S'executa al navegador
- Molt lent
Exemples:
- Compte enrere
- Amagar i mostrar elements
Un client més ric?
Flash
Un client més ric?
Java Applets
Limitacions
Pàgines poc interactives
Flash i Java no arriben a tothom
Fer webs "des de zero" és costós
2007 - 2011
La web interactiva
GMail, Twitter, Facebook...
AJAX
Asynchronous JavaScript and XML
Canviar el contingut de la web sense actualitzar
GMail
Al servidor: agilitzem el desenvolupament
Request
Response
Sempre fem el mateix
-
CRUD (Create, Read, Update, Delete)
-
Gestionar usuaris (registre, login, contrasenya...)
-
Contingut en diverses llengües
-
Llegim paràmetres per GET i POST
Organització del codi: 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 al LAMP
Request
Response
Django / RoR + AJAX
Microframeworks
2012 - ...
Interacció total!
Aplicacions riques a tot arreu
HTML5 + CSS3
-
<video>
-
<audio>
-
<canvas>
-
<svg>
-
MathML
-
WebSockets
-
File API
-
CSS transitions
JavaScript renaix
Cada cop més ràpid, fa més coses
Frameworks per JavaScript
al client
JavaScript al servidor
Microframeworks
... i en el futur?
Web 3.0
Arquitectures decentralitzades,
enlloc de servidors centrals
Desenvolupament del client unificat
Mateixa implementació de webs, aplicacions mòbils...
Una història de la web... i el desenvolupament web
By victorlf
