Este documento describe las principales características de HTML5, incluyendo su enfoque semántico mejorado con nuevas etiquetas como <header>, <nav>, <article>, y <footer>. También describe las capacidades de HTML5 para audio y video nativos, conectividad en tiempo real a través de websockets, acceso a dispositivos como cámaras y geolocalización, gráficos mejorados a través de canvas y WebGL, y almacenamiento local y aplicaciones sin conexión.
11. Y en 2011...
• La W3C sigue desarrollando HTML5.
• Llegará a Candidate Recommendation en 2012.
• En 2014 se convertirá en Recommendation.
12. 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.
15. 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
definido por las etiquetas que
lo contienen.
• <nav>, <head>, <footer>,
<article>, <section>, <aside>...
37. Audio & Video
• Capacidad de incrustar video
y audio de forma nativa.
• Controles proporcionados
por el propio navegador,
aunque con capacidad para
modificarlos.
38. 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).
41. Conectividad
• Aplicaciones que necesitan
conexión directa con el
servidor (chats, juegos en
tiempo real...)
• Sobrecarga del protocolo
HTTP.
• Latencias altas.
42. Conectividad
• Posibilidad de establecer
conexiones bidireccionales
con el servidor (websockets)
mediante un API de
JavaScript.
• ws://echo.websocket.org ó
wss://echo.websocket.org
46. 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.
49. 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.
50. Rendimiento e integración
• Web workers.
• Por seguridad, los web
workers no pueden acceder al
DOM, ni comunicarse con
otros workers.
• Podemos hacer uso de
XMLHttpRequest.
51. Rendimiento e integración
• 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 finalizar el
envío.
52. Rendimiento e integración
• XMLHttpRequest 2
• Subida de archivos (File upload).
• Desarrollo de FILE API, con
nuevas funciones para la subida.
56. 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.
57. 3D, gráficos y efectos
• Canvas.
• Proporciona una superficie de
“dibujo” en el navegador que puede
modificarse mediante JavaScript.
• A diferencia de SVG, proporciona
una imagen en “bitmap”.
58. 3D, gráficos y efectos
• WebGL.
• “Extiende” el elemento CANVAS
para poder utilizar gráficos 3D
nativos en el navegador, controlado
por JavaScript.
• Quake 2.
61. Offline y almacenamiento
• Offline 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.)
62. Offline y almacenamiento
• Offline 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”>
63. Offline y almacenamiento
• Local Storage.
• Cookies “vitaminadas”.
• Podemos almacenar hasta 5MB de
información por dominio, en el
cliente.
• Desde texto plano, hasta archivos
multimedia.
64. Offline y almacenamiento
• 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.
65. Offline y almacenamiento
IE Firefox Safari Chrome Opera
Offline
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
Fuente: http://caniuse.com