El futuro de la web en

Intentaremos explicar...

• ¿Cómo hemos llegado hasta aquí?
• Situación actual.
• Novedades
• HTML5 vs xHTML.

¿Cómo hemos llegado hasta aquí?

WHATWG
(Web Hypertext Application Technology Working Group)

2004

Y en 2011...

• La W3C sigue desarrollando HTML5.
• Llegará a Candidate Recommendation en 2012.

• En 2014 se convertirá en Recommendation.

Y en 2011...

• Por su parte, el WHATWG abandonó la
numeración de versiones de HTML.
• No se plantean cuando estará acabado HTML5, sino cuando
podremos comenzar a usar las nuevas características.

Semántica
• Nuevo enfoque semántico al
marcado de la web.

• Orientado a reforzar el
contenido de cada sección,
siendo este mucho más
deﬁnido por las etiquetas que
lo contienen.

• <nav>, <head>, <footer>,
<article>, <section>, <aside>...

Semántica
xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">

html 5
<!DOCTYPE html>

Semántica
xhtml
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

html 5
<meta charset=”UTF-8” />

Semántica
xhtml
<script type="text/javascript" src="/js/jquery.js"></script>

html 5
<script src=”/js/jquery.js”></script>

Semántica
xhtml
<link type="text/css" rel="stylesheet" media="handheld" href="/css/styles.css" />

html 5
<link rel=”stylesheet” href=”/css/styles.css” />

Semántica

<header>
Grupo de ayudas introductorias o de navegación.

Semántica

<nav>
Sección de una página que enlaza a otras páginas o
secciones.

Semántica

<footer>
Representa un pie para el contenido de la sección más
cercana que le anteceda.

Semántica

<article>
Composición contenida que es distribuible o
reutilizable independientemente, es decir, sindicable.

Semántica

<section>
Representa una sección genérica. Es una agrupación de
contenido, normalmente con un encabezado.

Semántica

<aside>
Representa una sección de la página con contenido
menos relacionado con el resto y que podría considerarse
separado de él.

Semántica

Muchas más...
<hgroup>, <ﬁgure>, <ﬁgcaption>, <time>, <summary>

Semántica
• Puede usarse YA:

• Modernizr

• HTML5 Boilerplate

• Html5shiv

• ...

Audio & Video

• Capacidad de incrustar video
y audio de forma nativa.

• Controles proporcionados
por el propio navegador,
aunque con capacidad para
modiﬁcarlos.

Audio & Video
• Guerra de formatos:
• H.264 (mp4). Alta Calidad.
Propietario. Soportado por
Chrome, Safari, IE y reproductores
comerciales.

• Ogg Theora y Ogg Vorbis (ogg).
Menor calidad. Libre. Soportado por
Chrome, FF y Opera.

• VP8 (WebM). Alta Calidad. Liberado
por Google. Soportado por
Chrome, FF4, Opera, Safari (códecs)
e IE (plugin).

Audio & Video
<video src=”nombrevideo.xxx”>
....
</video>

<audio src=”nombreaudio.xxx”>
....
</audio>

Conectividad
• Aplicaciones que necesitan
conexión directa con el
servidor (chats, juegos en
tiempo real...)

• Sobrecarga del protocolo
HTTP.

• Latencias altas.

Conectividad
• Posibilidad de establecer
conexiones bidireccionales
con el servidor (websockets)
mediante un API de
JavaScript.

• ws://echo.websocket.org ó
wss://echo.websocket.org

Conectividad
var ws = new WebSocket("ws://echo.websocket.org");

ws.onopen = function() { ... }

ws.onclose = function() { ... }

ws.send(‘Ping’);

ws.close();

Conectividad
IE Firefox Safari Chrome Opera

Anterior 8 3.6 4 10 11

Actual 9 4 5 11 11.1

Próxima 10 5 6 12 12

Soporte actual: 30%
Fuente: http://caniuse.com

Acceso a dispositivos
• API de Geolocalización
(Google, Twitter, etc...).

• Acceso a micrófonos y
cámaras.

• Acceso a datos locales
(contactos, eventos...)

• Orientación del dispositivo.

Acceso a dispositivos

Anterior 8 3.6 4 10 11

Actual 9 4 5 11 11.1

Próxima 10 5 6 12 12

Soporte actual: 60% (Geolocalización)

Rendimiento e integración

• Web workers.
• Posibilidad de ejecutar scripts
en paralelo (background).

• Las tareas “pesadas” se podrán
ejecutar en scripts externos
sin temor a colapsar el
navegador durante su
ejecución.


• Web workers.
• Por seguridad, los web
workers no pueden acceder al
DOM, ni comunicarse con
otros workers.

• Podemos hacer uso de
XMLHttpRequest.


• XMLHttpRequest 2
• Seguimiento del progreso
(traking progress).

• Métodos y funciones para
conocer la cantidad de bytes
enviados al servidor, así como el
tiempo real para ﬁnalizar el
envío.


• Subida de archivos (File upload).

• Desarrollo de FILE API, con
nuevas funciones para la subida.


• Peticiones entre dominios
(Cross-Domain).



Web
workers 9 3.5 4 9 10.6

Cross
Domain 9* 3.5 4 9 11.1

XMLHttp
Request 2 9 4 5 9 11.1

* Usando XDomainRequest

3D, gráficos y efectos
• SVG (Scalable Vector Graphics).
• Gráficos vectoriales escalables para
la web.

• Posibilidad de crear varios objetos
dentro de la misma imagen.

• Admite animaciones e interacción
con los gráficos.

• Permite realizar zoom sin perder
calidad.


• Canvas.
• Proporciona una superﬁcie de
“dibujo” en el navegador que puede
modiﬁcarse mediante JavaScript.

• A diferencia de SVG, proporciona
una imagen en “bitmap”.


• WebGL.
• “Extiende” el elemento CANVAS
para poder utilizar gráﬁcos 3D
nativos en el navegador, controlado
por JavaScript.

• Quake 2.



SVG 9 3.5 3.2 9 10.6

Canvas 9 3.5 3.2 9 10.6

WebGL 9 4 5 11 11.1


Ofﬂine y almacenamiento

• Ofﬂine Application
Cache.

• Permite ejecutar aplicaciones web
sin estar conectados a internet.

• Al visitar por primera vez la página,
el navegador guarda todos los
archivos necesarios para ejecutar la
página (HTML, CSS, imágenes,
JavaScript, etc.)


• Ofﬂine Application
Cache.

• El archivo app.manifest será el
encargado de referenciar los
recursos a cachear.

• Indicaremos su uso en el HTML
mediante el atributo manifest en la
etiqueta html:

• <html manifest=”app.manifest”>


• Local Storage.
• Cookies “vitaminadas”.

• Podemos almacenar hasta 5MB de
información por dominio, en el
cliente.

• Desde texto plano, hasta archivos
multimedia.


• Indexed DB.
• Interfaz para base de datos local que
contiene valores simples y objetos.

• Sustituye a Web SQL Database, que
ha sido declarada deprecated por la
W3C.



Ofﬂine
App 9 3.5 4 9 10.6
Cache

Local
Storage 8 3.5 4 9 10.6

Indexed
DB 9 4 5 11 11.1


!GRACIAS¡
jfernandezp@cesser.com

@alwaison

http://www.delicious.com/Alwaison

El futuro de la web en

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie El futuro de la web en

Ähnlich wie El futuro de la web en (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (13)

El futuro de la web en

Hinweis der Redaktion