2. Prólogo
La web tiene un nuevo estándar que rompe la barrera entre HTML y el scripting
HTML5 es el nuevo estándar universal, abierto y
gratuito, para la elaboración de páginas web
-HTML5 = HTML + CSS + Javascript
-HTML 5 todavía está en fase de working draft. Aunque en 2014
se espera que sea recomendación de facto!
-Es regulado por el WHATWG –Apple, Google, Mozilla y
Opera- y el W3C
-Gracias a los Polyfills ya no hay excusa para no empezar a
hacer páginas web en HTML5
2
3. Prólogo
Un poco de historia
HTML5 marca un punto de inflexión en el desarrollo del lenguaje de marcado
1991 - HTML
1994 – HTML 2
1996 – CSS 1 + Javascript
1997 – HTML 4
1998 – CSS 2
2000 – XHTML 1
2002 – Diseño web sin tablas
2005 - AJAX
2009 – HTML 5 + CSS 3
-LINKS:
Regreso al pasado: http://onsoftware.softonic.com/regreso-al-pasado-internet-en-1997
3
4. Web Semántica
De la información al Conocimiento
Trata de Añadir significado a la información para que lo
entiendan las máquinas -agentes- y filtren la que es
realmente útil para los usuarios. También implica el
desarrollo de los propios agentes
-Nuevas etiquetas estructurales
-Marcado de datos
-Nueva generación de Formularios
-Más valores para el atributo rel
4
5. Nuevas etiquetas estructurales Web Semántica
Adiós a la divitis!
HTML 5 proporciona un conjunto de etiquetas que
definen con mayor claridad los bloques principales de
contenido que componen un documento HTML
El nuevo Doctype <!DOCTYPE html>
Nuevas etiquetas:
<command> <datagrid> <datalist> <details> <dialog>
<embed> <eventsource> <figcaption> <figure> <footer>
<header> <hgroup> <keygen> <mark> <menu> <meter> <nav>
<output> <progress> <rp> <rt> <ruby> <section> <source>
<summary> <time>
5
6. Nuevas etiquetas estructurales Web Semántica
Principales etiquetas estructurales
-LINKS:
-Principales etiquetas estructurales: http://www.ibm.com/developerworks/ssa/web/
library/wa-html5structuraltags/
Soporte global: 75,38%
6
7. Marcado de datos Web Semántica
-El marcado de datos es un paso más en la llamada web
semántica para dar significado a los contenidos
-Le dice a las máquinas -agentes de usuario- qué se
describe exactamente en una determinada información
Formatos de marcado:
-RDFa
-Microformatos
-Microdatos…
7
8. Marcado de datos Web Semántica
Para el marcado estructurado de datos se puede utilizar
microdatos, microformatos y RDFa
-En vez de hacer elegir a los webmasters entre uno estos
formatos, sería conveniente centrarse en uno solo
-Un único formato mejoraría la consistencia de datos entre los
distintos motores de búsqueda
-Microdatos comparte la sencillez de los microformatos y la
capacidad de ampliación de RDFa
Por ejemplo, los Microdatos de Schema.org ya comienzan a mostrar fragmentos
enriquecidos -rich snippets- para sus resultados: Los fragmentos enriquecidos
permiten a los usuarios ver información y datos adicionales de su sitio en los
resultados de búsqueda... busca Angry Birds en Google y compruébalo!
8
9. Marcado de datos Web Semántica
¿Cuál elegir?
Microdatos por su uso en schema.org y su aceptación
por Google, Microsoft y Yahoo!
9
10. Marcado de datos Web Semántica
Elementos que incorporan los microdatos:
itemscope, itemtype, itemid, itemref, itemprop
<section itemscope itemtype="http://
enciclopediadecriaturas.com/criaturas#hobbits">
<h1 itemprop="name">Hobbits albos</h1>
<p itemprop="desc">Los hobbits albos son los más
altos -120 cm- y aventureros de entre los hobbits.</p>
<img itemprop="img" src="hobbit.jpg" alt=""
title="Hedral, hobbit albo">
</section>
-LINKS:
Schema: http://schema.org
Create HTML with schema.org microdata: http://schema-creator.org/
10
11. Formularios Web Semántica
Nueva generación de formularios!
Se añaden pequeñas funcionalidades que antes precisaban Javascript
-Nuevos elementos:
meter, progress, output, keygen, datalist
-Nuevos tipos de input:
email, url, tel, search, number, range, color, date,
time, datetime, month, week
-Nuevos atributos:
list, autofocus, placeholder, file multiple, pattern,
autocomplete, max, min, step, required
Y si le sumamos el poder de XMLHttpRequest 2:
-El objeto FormData: crear y enviar formularios al vuelo
-FILE API FileReader: Upload de archivos con barra de progreso
11
12. Formularios Web Semántica
<style>
[required] {
border-color: #88a;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
}
:invalid {
border-color: #e88;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);+
}
</style>
<form>
<label>Nombre: <input name="name" required></label>
<label>E-mail: <input name="email" type="email" required></label>
<label>URL: <input name="url" type="url"></label>
<label>Comentario: <textarea name="comment" required></textarea></label>
<input type="submit" value="Enviar">
</form>
-LINKS:
-XMLHTTPRequest 2 y El objeto FormData: http://www.html5rocks.com/en/
tutorials/file/xhr2/
-Div In To HTML5 - A Form of Mandness: http://diveintohtml5.info/forms.html
-Soporte (detalles): http://wufoo.com/html5/
Soporte global: 53,13%
12
13. Nuevos valores para el atriburo rel Web Semántica
El nuevo HTML tendrá que ser un poco más
descriptivo a la hora de definir el tipo de link al que
estamos enlazando
De eso se encarga el atributo rel:
alternate, archives, author,
bookmark, contact, external, feed,
first, help, icon, index, last,
licence, next, nofollow, noreferrer,
pingback, prefetch, prev, search,
stylesheet, sidebar, tag, up
Nótese la importancia de rel de cara al SEO
13
14. APIS de Javascript
Las responsables de la magia
-Tecnologías offline/storage
Application Cache
Web Storage
IndexedDB
-Comunicación y conectividad
WebSockets
Web Workers
Notificaciones
-Acceso al dispositivo
Drag & Drop nativo
Desktop Drag-In & Drag-Out
Filesystem API
Geolocalización
Orientación del dispositivo
Webcam y micro
14
15. Tecnologías offline API Javascript
No siempre la conexión a la red es fiable, pero las aplicaciones sí que tienen que serlo
Imaginemos que un usuario está rellenando un formulario y pierde el acceso a la red o
que la descarga de datos de nuestro móvil es limitada…
15
16. Tecnologías offline API Javascript
Las aplicaciones HTML5 pueden comenzar más rápido y trabajar
incluso si no hay conexión a Internet, gracias a la caché de la
aplicación, el almacenamiento local, bases de datos indexadas y las
APIs de archivo
Cuanta más información se maneje en local mejor rendimiento del
sistema y más satisfactoria la experiencia del usuario
Por supuesto, los datos son más vulnerables, y el usuario no puede
acceder a estos desde varios clientes; por lo tanto, solo debería
utilizarse para datos que no sean críticos
16
17. Tecnologías offline API Javascript
-AppCache: para guardar los archivos en local y
acceder a ellos en modo offline en forma de URLs
-IndexedDB para guardar datos estructurados en
local y poder acceder y consultarlos
-Web Storage para guardar pequeñas cantidades de
información en formato de texto en el equipo
-Los Eventos Offline, para detectar el estado de la
conexión a la red
17
18. Application Cache Tecnologías offline
Fichero de configuración que permite guardar archivos en local
-Para acceder a ellos cuando no hay conexión
-Para optimizar la velocidad de carga
-Hay que crear canales de sincronización de datos entre
nuestras aplicaciones y la nube
-El estándar HTML5 también incluye tecnologías para guardar los
datos en el cliente
-AppCache ofrece ventajas con respecto a la caché de HTTP
Uso:
Basta con crear un archivo MANIFEST -lista todos los archivos
que necesitan ser cargados en la caché- y acceder al objeto
window.applicationCache
18
19. Application Cache Tecnologías offline
AppCache es sólo una parte de las tecnologías offline de HTML 5
Tenemos que asegurarnos de que los datos cacheados siguen
siendo relevantes y están actualizados. Como hemos dicho, para
ello necesitamos crear canales de sincronización de datos
entre nuestras aplicaciones y la nube
Podemos hacerlo con WebSockets y XHR, que nos ofrecen
una forma de sincronización, para finalmente guardarlos en una
base de datos IndexedDB
Esta técnica también se puede utilizar para subir al servidor la
información guardada con Web Storage
19
20. Application Cache Tecnologías offline
Documento cache.appcache:
CACHE MANIFEST
# 08-04-2012:v2
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Recursos que se requieren online
NETWORK:
login.php
# FALLBACK, Declara archivos a utilizar por defecto en el caso de no
encontrar el recurso solicitado
FALLBACK:
/main.php /offline.html
img/large/ images/offline.jpg
20
21. Application Cache Tecnologías offline
El HTML:
<html manifest="cache.appcache">
<script>
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status ==
window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}
}, false);
</script>
-LINKS:
-juego Web interactivo que funciona sin conexión:
http://ie.microsoft.com/testdrive/HTML5/KidsBook/
-Recetas (Uso de AppCache e IndexedDB):
http://ie.microsoft.com/testdrive/HTML5/Cookbook/
Soporte global: 59,88%
21
22. Web Storage Tecnologías offline
Almacenamiento de datos del lado del cliente.
-Muy útil para almacenar pequeñas cantidades de datos (IndexedDB para
almacenar grandes cantidades de datos complejos y estructurados)
-Los datos son almacenados usando pares de clave/valor
-Una forma mejor y más segura de almacenar información que el método
tradicional de almacenamiento mediante cookies
sessionStorage y localStorage:
El almacenamiento por sesión es por ventana, y su tiempo de vida está
limitado a lo que dure la ventana (o pestaña): sessionStorage
Los datos alojados en un almacenamiento local son sólo accesibles por
dominio y persisten cuando se cierra el navegador: localStorage.
Soporte global: 88,29%
22
23. Web Storage Tecnologías offline
sessionStorage
//Obtenemos el elemento que contiene el contenido del post
var content = document.getElementById("content");
//Comprobamos si existe contenido guardado, lo cual indicaría
un refresco de página accidental
if (sessionStorage.getItem("autosave")) {
content.value = sessionStorage.getItem("autosave");
}
//Guardamos el contenido del elemento cada minuto
setInterval(function() {
sessionStorage.setItem("autosave", content.value);
}, 1000*60);
localStorage
//almacenar el número de veces que un usuario ha visitado una
página
localStorage['www.tudominio.com'].setItem("visitas",
parseInt(localStorage['www.tudominio.com'].getItem("visitas")
|| 0 ) + 1);
23
24. IndexedDB Tecnologías offline
API para almacenamiento avanzado de datos en la parte de cliente
-Mecanismo de almacenamiento de grandes cantidades de datos
estructurados
-Provee de un acceso de alto rendimiento a los mismos, usando
índices.
-Está construido sobre un modelo de base de datos transaccional
-Su API es mayormente asíncrona
Sustituye a Web SQL Database, que ha sido declarada deprecated por la
W3C.
-LINK:
IndexedDB: http://www.html5rocks.com/en/tutorials/indexeddb/todo/
Soporte global: 44,98%
24
25. Comunicación & Conectitividad API Javascript
-Web Workers
-WebSockets
-Notificaciones
HTML 5 presenta una conectividad más eficiente entre cliente y servidor,
lo que garantiza una mejor comunicación
25
27. WebSockets Comunicación y conectividad
HTML5 ofrece dos nuevos estándares de
comunicación: Server-Sent Events y WebSockets.
-WebSockets consiste en abrir un canal full-duplex
permanente entre el servidor y el cliente
aprovechando el protocolo TCP
-Server-Sent Events se utiliza para mandar
eventos directamente desde nuestro servidor al cliente
de nuestra aplicación
Este tipo de comunicación está pensado para
aplicaciones que necesiten de mucha transferencia de
datos en tipo instantáneo, como por ejemplo juegos
online
27
28. WebSockets Comunicación y conectividad
¿Pero, qué nos proporciona?
-Reducción en el consumo de red y de procesamiento
-Evolución en el desarrollo de aplicaciones RIA con HTML!
Casos donde sería útil que el servidor pudiera comunicarse con
el navegador sin que el cliente lo solicite necesariamente:
-Web chats (como el de Facebook)
-Trabajo colaborativo (Como el de Google Docs)
-Sitios de subastas o sistemas para bolsas de valores, donde los
datos hacen falta en tiempo real
28
29. WebSockets Comunicación y conectividad
Web Sockets es más rápido que HTTP
HTTP fue diseñado para la transferencia de documentos, en realidad no
está adecuado para las aplicaciones web modernas:
-Naturaleza medio-dúplex: sólo se puede comunicar en una dirección a la
vez, bien del cliente al servidor o del servidor al cliente
-los paquetes HTTP vienen cargados con grandes cantidades de datos de
cabecera, lo cual consume ancho de banda y requiere más trabajo de
procesamiento
WebSockets se adecúa mejor a la nuevas exigencias de la web
-Podría abrir el paso a una nueva generación de aplicaciones web en tiempo
real y latencia cero
-Los ingenieros de Google importaron el QUAKE II para que corriera en el
navegador usando WebSocket. Esto hubiera sido imposible usando HTTP
29
30. WebSockets Comunicación y conectividad
Uso de Web Socket:
-Tecnologías offline
-Video juego Quake II GWT en web
-Acceso webcam y vídeo
-LINKS:
Web Sockets es más rápido que HTTP: http://bit.ly/HQisyn
Aplicaciones web y móvil Realtime: http://pusher.com
Soporte global: 54,47%
30
31. Web Workers Comunicación y conectividad
Esos currelas!
La API Web Workers permite la ejecución de scripts en
segundo plano (background)
-Simulación del multiproceso -multi-threading- con javascript
-Mejora del rendimiento de la aplicación y por consiguiente
de la experiencia de usuario (antes, un proceso de larga
duración podía colgar toda la ventana, bloqueando el thread
de la interfaz de usuario)
Y puesto que los Web Workers se ejecutan en threads
independientes, el código debe ir en archivos independientes...
31
32. Web Workers Comunicación y conectividad
//ARCHIVO: curritos.js
function messageHandler(event) {
// Accede a los datos del mensaje enviado por la página principal
var messageSent = event.data;
// Prepara el mensaje que se va a devolver
var messageReturned = "¡Hola, " + messageSent + ", los curritos te
saludamos!";
// Publica el mensaje de vuelta en la página principal
this.postMessage(messageReturned);
}
//Página web principal: manejador del mensaje de retorno
<div id="output"></div>
<script type="text/javascript">
//Instancia el Worker
var myHelloWorker = new Worker(curritos.js');
myHelloWorker.addEventListener("message", function (event) {
document.getElementById("output").textContent = event.data;
}, false);
// Inicializa el worker enviándole un primer mensaje
myHelloWorker.postMessage("Netquet");
// Detiene el worker con el comando terminate()
myHelloWorker.terminate();
</script>
32
33. Web Workers Comunicación y conectividad
Un worker no es más que una archivo .js que se encarga de una
funcionalidad puntual (nótese que los workers no tienen acceso al
DOM o a otros workers!)
En la página principal, basta instanciar un objeto Worker, que se
comunicará con el propio worker mediante mensajes
33
34. Web Workers Comunicación y conectividad
¿Cuándo conviene utilizar Web Workers?
-Cuando afecte a la experiencia de usuario: Manipulación de
grandes cantidades de datos
-En procesamiento de imágenes mediante el uso de datos
extraídos de elementos <canvas> o <video>
-Accesos simultáneos a una base de datos (con IndexedDB)
-Siempre que no necesitemos el DOM, of course!
Perfecto para Videojuegos!
-Ejemplos:
HTML Rocks: http://slides.html5rocks.com/#web-workers
Utilización de varios web workers: http://nerget.com/rayjs-mt/
rayjs.html
Soporte global: 57,33%
34
35. Notificaciones Comunicación y conectividad
El API de Notificaciones HTML5 permite mostrar notificaciones al usuario para
determinados eventos
1-Verificar si hay soporte:
window.webkitNotifications
2-Crear Notificación (dos tipos: texto plano y HTML):
window.webkitNotifications.createNotification
3-Pedir permiso al usuario:
window.webkitNotifications.checkPermission
Casos:
-Email nuevo
-Nuevo twit
-Eventos de calendario
-LINK:
HTML Rocks: http://slides.html5rocks.com/#notifications-api
Soporte parcial: 27%
35
36. Acceso al dispositivo API Javascript
Integración con el Sistema Operativo!
-Drag & Drop nativo
-Desktop Drag-In
-Desktop Drag-Out
-Filesystem API
-Geolocalización
-Orientación del dispositivo
-Webcam y micro
36
37. Drag & Drop Nativo Acceso al dispositivo
Una de las funcionalidades principales y más comunes
de las interfaces gráficas actuales
Evidentemente, precisa javascript (pero ya no se usará
para hacer todo el proceso como antes, sólo parte de
la funcionalidad en el manejo de eventos)
1-Comprobar compatibilidad:
Modernizr.draganddrop
2-Crear contenido arrastrable: draggable=’true’
3-Definir eventos: dragstart, drag, dragenter,
dragover, dragleave, drop, dragend
37
38. Drag & Drop Nativo Acceso al dispositivo
4-Otros:
-El objeto datatransfer: ahora ya podemos enviar
información junto al elemento arrastrado
-Imagen fantasma: representación libre del objeto que
está siendo arrastrado
-Efectos drop: copiado, movimiento, enlazado, …
-Ejemplo:
-HTML5 Rocks: http://slides.html5rocks.com/#drag-and-drop
-Gerifaltitos: http://bit.ly/HrCvcf (JQuery)
Soporte global: 86,43%
38
39. Desktop Drag-In & Drag-Out Acceso al dispositivo
Más allá de todo esto, tenemos la posibilidad de
transferir contenido entre aplicaciones web y con
software de escritorio en general
Desktop Drag-In & DragOut
Habilita la funcionalidad de arrastrar de nuestro
escritorio al navegador o del navegador a nuestro
escritorio.
-Ejemplo:
Drag-In: http://slides.html5rocks.com/#drag-in
Drag-Out: http://slides.html5rocks.com/#drag-out
39
40. FILE API Acceso al dispositivo
-Abrir archivos locales a través de input type
-Obtener información de dicho archivo mediante la API javascript
Esta solución nos permite presentar una miniatura de una
imagen que se desee subir al servidor antes de enviarla o verificar
el MIME de los archivos compatibles, y hasta su tamaño
El caso más claro es el Upload de archivos múltiple!
-Ejemplo:
Múltiple Upload: http://robertnyman.com/html5/fileapi-upload/
fileapi-upload.html
-LINK:
The HTML5 FILE API for Upload: http://robertnyman.com/2010/12/16/utilizing-the-html5-
file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/
Soporte global: 53,99%
40
41. Geolocalización Acceso al dispositivo
Con un poco de código podremos obtener la ubicación del usuario
-La API de Geolocalización es un esfuerzo de la W3C para
estandarizar una interfaz que recupere información geográfica de
un dispositivo cliente
-Ahora es el propio navegador el que detecta la latitud y longitud
(A través del WIFI o GPS del dispositivo)
¡Ideal para aplicaciones web en dispositivos móviles!
-La geolocalización es útil en sitios sociales para mostrar dónde se
encuentra el usuario, y/o compartir imágenes o vídeos de dónde
se encuentra (esta característica ya funciona con Google Maps)
-También, dependiendo de dónde esté el usuario, podría mostrar
una información diferente (MK´)
41
42. Geolocalización Acceso al dispositivo
Así de simple:
1-Detectamos que soporte la funcionalidad:
navigator.geolocation
2-Recuperamos la posición del usuario:
navigator.geolocation.getCurrentPosition
mediante el objeto position
3-El navegador nos preguntará si deseamos compartir nuestra
posición. ¡El usuario debe autorizarlo!
4-Dibujamos mapa (esto ya con la API de Google Maps):
<script type="text/javascript" src="http://
maps.google.com/maps/api/js?sensor=false"></script>
-Ejemplo:
HTML Rocks: http://slides.html5rocks.com/#geolocation
Soporte global: 70,4%
42
43. Orientación del dispositivo Acceso al dispositivo
La magia del acelerómetro y del giroscopio
iPhone, iPads y la mayoría de los smartphones más modernos incorporan un
acelerómetro y/o un giroscopio. También los macBook
Las nuevas API de HTML5 permiten el uso de acelerómetros/giroscopios
window.addEventListener('deviceorientation',
function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
-Ejemplo:
HTML Rocks: http://slides.html5rocks.com/#slide-orientation
Imagen 360º: http://360.io/pt3dmqna
Soporte global: 51,04%
43
44. Acceso a webcam y micro Acceso al dispositivo
videollamadas y videoconferencias de forma nativa
Con HTML 5 podremos acceder directamente a los dispositivos
de audio, video y cámaras fotográficas
Servicios de videollamadas y videoconferencias utilizando
únicamente el navegador web
Será la etiqueta <device> la encargada de permitir al usuario
dar acceso a la página a determinados dispositivos del equipo.
Tendremos que esperar a que el usuario seleccione un dispositivo
para darnos acceso
API Media Capture: define las mejoras que tendrían que tener los
formularios para proveer acceso a audio, imagen y captura de
vídeo (todavía es un working draft)
44
45. Acceso a webcam y micro Acceso al dispositivo
Reconocimiento de voz con HTML 5: Speech input
Este nuevo campo permite capturar la voz del usuario y
escribir directamente en el campo de texto lo que dice, o también
procesar directamente la voz (ej.: Google Translate)
<input type="text" x-webkit-speech />
-Ejemplo:
Transmisión grabaciones webcam entre 2 ordenadores:
http://bit.ly/dzXsHo
Speech Input: http://slides.html5rocks.com/#speech-input
-LINK:
HTML Media Capture specification: http://dev.w3.org/2009/dap/camera/
45
46. Gráficos
¿Estás listo para jugar al máximo nivel desde tu navegador y de forma nativa?
Canvas: manipulación de mapa de bits
SVG: gráficos vectoriales
WebGL: el 3D en la web
46
47. El elemento Canvas Gráficos
Manipulación de mapa de bits
-El elemento Canvas permite representar en pantalla imágenes,
gráficos y formas geométricas de todo tipo. E incluso textos
-El dibujo en el canvas se hace mediante el API Canvas 2D
-El potencial de canvas reside en su habilidad para actualizar su
contenido en tiempo real.
-El canvas aprovecha las bondades de la aceleración de
gráficos por hardware: Eficiencia y mayor rendimiento
API Canvas 2D:
Manipulación del contexto del canvas, manipulación de imágenes,
manipulación de formas y colores, manipulación de líneas, textos y
sombras, transformaciones y animaciones, control del ratón
47
48. El elemento Canvas Gráficos
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext =
document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2,
Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>
-LINK:
Guía del canvas: http://www.desarrolloweb.com/articulos/guia-canvas-html5-
desarrolladores.html
KineticJS (librería de JavaScript que extiende el contexto 2D para Canvas):
http://www.kineticjs.com (ejemplos de gráficos y de código)
48
49. Aceleración gráfica por hardware Gráficos
¡Desde el navegador!
Cuando enviamos comandos de dibujo al canvas, los navegadores ya son
capaces de entregarlos directamente al hardware de gráficos –GPU–,
liberando a la CPU de trabajo, y por consiguiente, aumentando
considerablemente el rendimiento
Navegador:
-Rendimiento muy superior (animaciones en tiempo real)
-Experiencia de usuario mejorada, más intensa y gratificante
-Ejemplos:
Juego retro de Zombies mutantes hecho con el motor Impact JS y mostrado
en el canvas de HTML5: http://www.mutantzombiemonsters.com/
CanvasDOOM: http://www.benjoffe.com/code/demos/canvascape/textures
Soporte global: 72,96%
49
50. SVG (Scalable Vector Graphics) Gráficos
Dibujo vectorial
SVG es un formato de gráficos vectoriales basado en XML
50
51. SVG (Scalable Vector Graphics) Gráficos
-Es independiente de la resolución de pantalla (puede escalarse la imagen sin
perder resolución)
-Como se basa en XML, el manejo de sus diferentes elementos y atributos es
realmente fácil
-Es mejor solución para animaciones complejas
<svg>
<circle id="myCircle" class="important" cx="50%"
cy="50%" r="100" fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</svg>
-Ejemplos:
-Muchas de las imágenes que usa Wikipedia empiezan a estar ya en este formato
-HTML5 Rocks: http://slides.html5rocks.com/#svg-example-slide
-LINK:
-Soporte (detalle): http://caniuse.com/#cats=SVG
51
52. Gráficos
¿Canvas o SVG?
Dibujo vectorial vs Mapa de bits…
-Si quieres que el aspecto de tu sitio web sea independiente de la resolución de
pantalla, altamente interactivo o es para ver e imprimir: SVG.
-Si por el contrario, estás desarrollando un juego y quieres que los gráficos se
muestren en pantalla a gran velocidad, o no quieres trabajar con XML: Canvas.
-Idealmente, ambos elementos pueden funcionar juntos de forma complementaria
a la perfección.
-LINK:
Elucubraciones sobre cuándo usar Canvas, SVG o ambos [EN]: http://blogs.msdn.com/b/ie/
archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx
52
53. Gráficos
WebGL nos trae el 3D a la web
Javascript no tiene límites!
Especificación estándar que dota a los navegadores web de
gráficos 3D sin necesidad de extensiones
-El Canvas puede invocar el estándar WebGL
-Permite crear figuras en 3D, dar iluminación y aplicar texturas
-Permite movernos en un entorno 3D y aplicar eventos para
poder tener interacción con teclado y mouse
Desventajas: compatibilidad, rendimiento y seguridad.
Está demasiado verde todavía
-Compatibilidad navegadores
-Necesidad de HW potente
-La telefonía móvil (batería)
53
54. Gráficos
WebGL nos trae el 3D a la web
-Ejemplos:
El vuelo del navegante:
http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/
Giro de la Tierra y la Luna en HTML 5: https://cvs.khronos.org/svn/repos/
registry/trunk/public/webgl/sdk/demos/webkit/Earth.html
Tron en HTML 5 y WebGL: http://cycleblob.com/
QUAKE II: http://media.tojicode.com/q3bsp/
-LINKS:
Test navegación para HTML5 y WebGL:
http://ie.microsoft.com/testdrive/performance/fishietank/
HTML5 y WEbGL test: http://helloracer.com/webgl/
¿Queréis romper Google?: http://mrdoob.com/projects/chromeexperiments/
google_gravity/ (roto y todo podéis seguir usándolo)
Funcionalidades destacadas WebGL:
http://www.khronos.org/webgl/wiki/Demo_Repository
Soporte global: 48,4%
54
55. Gráficos
WebGL nos trae el 3D a la web
Caso de estudio:
Quake II GWT en web:
-WebSockets
-Renderizado WebGL
-Implementación GWT de Java
-Web Storage (para salvar
juego y preferencias)
55
56. Multimedia
Soporte multimedia estándar y nativo: ¡Adiós plugins!
Podemos afrontar este punto como una guerra abierta con
diferentes frentes:
1-Reproductor nativo vs reproductor basado en plugins:
HTML 5 vs Flash
2-Tecnologías libres y abierta vs propietarias:
Mozilla, Opera (y Google) vs Apple y Microsoft
3-Y propietarias vs propietarias: Apple vs Adobe
-El problema de utilizar un reproductor de vídeo basado en plugins
es que su contenido esta encerrado y oculto para el resto del
documento
-Disponer de elementos nativos en HTML supone la integración de
los mismos con otras tecnologías del navegador, como JavaScript
y CSS
56
57. Multimedia
Nuevas etiquetas Audio y Video:
Dos de las claves de HTML 5 y del futuro de la web
<audio id="audio" src="sound.mp3" controls>
</audio>
<video id="video" src="movie.webm" autoplay
controls></video>
Contenedores: Códecs Audio + Códecs Vídeo
-OGG: Vorbis + Theora (Mozilla y Opera)
-MP4: ACC + H.264 y mp3 + H.264 (Apple y Microsoft)
-WebM: Vorbis + VP8 (Google)
Soporte global: 70%
57
58. Multimedia
APIs de Audio
Javascript para procesamiento y sintetización avanzada de audio en aplicaciones web
Audio Data API -> Mozilla
-Extiende <audio> y <video>
-API basada en eventos
Web Audio API -> Google
-AudioContext y AudioNode
-API a alto nivel
-Ejemplos:
Pocket Full Of HTML5 (Audio Data API): http://slidesha.re/xVXdSZ
Real-time Audio analysis (Web Audio API): http://bit.ly/ux2smU
58
59. Multimedia
APIs de Audio
WebRTC API
-Proporcionar comunicación en tiempo real en la web
-Escenarios: streaming y videoconferencia
HTML Streams API -> Ian Hickson
-Múltiples flujos multimedia en HTML5
-HTML MediaController API
-Captura y grabación de audio y vídeo local
MediaStream Processing API
-API común que trata de aunar todas las anteriores
59
60. Multimedia
¿Cuál elegir?
Web Audio API:
-Más eficiente
-Más fácil de usar
-Mayor cuota móvil/Tablet
-Además, Google financia a Mozilla y no al revés ;)
-Ejemplos:
Plink (Web Audio API y Node.JS): http://labs.dinahmoe.com/plink/#
Pirates loves daisies (juego): http://www.pirateslovedaisies.com
-LINK:
Web Audio API (W3C Editor´s Draft): http://bit.ly/rbKBR7
60
61. Multimedia
¡Vídeo nativo en HTML!
Stream de video con HTML5 (sin Flash ni
Silverlight)
Habrá que esperar un poco de tiempo, atendiendo
a las ya conocidas razones de compatibilidad
-Ejemplo:
JPayer video: http://bit.ly/fHUSDg
-LINKS:
Convertidores de vídeo a otro formato:
Media Converter: http://mediaconverter.org/ (online y gratuito)
Miro Video Converter: http://www.mirovideoconverter.com/
Mediasource API: http://bit.ly/qnvqGa
61
62. Multimedia
¡Vídeo nativo en HTML!
<script>
function fallo(e)
{
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:alert('Has abortado el playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK: alert('Error en la red.');
break;
case e.target.error.MEDIA_ERR_DECODE: alert('Problema de codificación.');
break;
case
e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:alert('Formato no soportado o
archivo no encontrado.');
break;
default: alert('Ha ocurrido un error desconocido.');
break;
}
}
</script>
<video controls height="300" width="400" loop autoplay onerror="fallo(event)" >
<source src="ejemplo_conversion.webmvp8.webm" type="video/webm" />
<source src="ejemplo_conversion.mp4" type="video/h264" />
<source src="ejemplo_conversion.theora.ogv" type="video/ogg" />
</video>
Soporte global: 45,14%
62
63. Multimedia
Guerra de códecs
Tecnologías libres y abiertas vs propietarias: Opera y Mozilla vs Apple y Microsoft
Mozilla y Opera proponen Theora (códec de
vídeo libre), Vorbis (códec de audio libre) y el
contenedor Ogg (también abierto)
Apple condena a Adobe al ostracismo en la telefonía
móvil y defiende su códec H.264
Microsoft, aunque más abierto que Apple, también
apuesta por el H.264
El gigante Google apoya su códec abierto VP8 pero
no le hace feos a H.264
63
64. Multimedia
Guerra de códecs
O sea, que a estas alturas no está aclarado…
-Corremos el riesgo de volver a las épocas de
incompatibilidades a las que precisamente Flash puso
fin
-Es un riesgo para la web, dejar en manos de una única
empresa privada el futuro de algo tan importante para
el desarrollo de Internet como es el video
64
65. Multimedia
Guerra de códecs
Tecnologías propietarias vs propietarias: Adobe vs Apple
A estas alturas, Apple ya ha ganado la batalla:
Adobe anunció que Flash ya no daría soporte a los
móviles. Importante decisión, que no hubiera sido
posible si Apple no hubiera podido contar con HTML5
para presionarlos
Adobe, simplemente, va a dar herramientas a los
desarrolladores para que puedan convertir el formato
Flash a HTML 5 (Adobe AIR)
65
66. Multimedia
Guerra de códecs
¿Quién ganará esta batalla?
Sin duda alguna, HTML5 ganará -en un futuro no
demasiado lejano-, desplazando totalmente a Flash en
lo que a desarrollo de juegos a través del navegador se
refiere
Dependerá del ritmo con que los navegadores
vayan dando soporte a las nuevas características
disponibles en HTML5.
¡Aunque ya sabemos lo complejo que es todo este mundo
de las patentes y el código libre!¡sobre todo con la cantidad
de navegadores, intereses y usuarios que hay implicados!
66
69. Polyfills
Parcheando navegadores prehistóricos
Como hemos podido comprobar, hay un tema que nos aleja
todavía de querer comprometernos con HTML5; sí, hablamos de la
compatibilidad, y aquí veremos al menos una aproximación de
cómo resolverlo...
Por una parte, utilizaremos Modernizr, que es una biblioteca
para detectar el soporte de los navegadores a las diferentes
funcionalidades de HTML 5
<script src="modernizr.min.js"></script>
Con Modernizr.load()podremos cargar Pollyfills
69
70. Polyfills
Y por otra, tenemos los Polyfills, que son bibliotecas Javascript
que amplían las funcionalidades de los navegadores que no
soportan las nuevas funcionalidades de HTML 5
Un polyfill es como un emulador que nos permitirá trabajar en
clientes web antiguos de la misma forma que si fueran modernos
Eso sí, utilizad los Pollyfills con cuidado, ya que pueden disminuir
el rendimiento de los navegadores
-LINKS:
Herramienta para saber el nivel de soporte de HTML5 de tu navegador: http://html5test.com/
Guía de APIs y estilos CSS a poder usar en nuestras aplicaciones: http://html5please.com/
Excelente presentación sobre polyfills [EN]: http://addyosmani.com/polyfillthehtml5gaps/slides/#14
70
71. Principales Polyfills Polyfills
-HTML Shiv:
Cada vez hay menos excusas para empezar a usar HTML5 en nuestros sitios!
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
-Google Chrome Frame:
Complemento para IE, diseñado para sustituir el motor de renderizado de IE por
el del Google Chrome (funciona con IE 6-9. Permite que sitios web programados
adecuadamente sean mostrados de manera correcta bajo IE)
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
Esto hará que la página sea renderizada por Chrome para quien lo tenga instalado,
sin afectar a los usuarios que no lo tengan
71
72. Principales Polyfills Polyfills
-HTML5Boilerplate:
Es una robusta plantilla que nos ayuda a optimizar tanto el código
como la compatibilidad y el rendimiento de carga de páginas
HTML 5
-También incluye Mobile Boilerplate
-Y constructor de proyectos que simplifica H5BP: Initializr
-Selectivizr:
Para compatibilizar atributos CSS3 y pseudo-clases en IE 6-8
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></
script>
<noscript><link rel="stylesheet" href="[fallback
css]" /></noscript>
<![endif]-->
72
73. Principales Polyfills Polyfills
-LINKS:
Modernizr: http://modernizr.com/
HTML Shiv: http://code.google.com/p/html5shiv/
Google Chrome Frame:
http://www.google.com/chromeframe?hl=es&quickenable=true
HTML5Boilerplate: http://html5boilerplate.com/
Initializr (H5BP+Modernizr+JQuery): http://www.initializr.com/
Selectivizr: http://selectivizr.com/
La guía Todo-En-Uno –que ni está ordenada alfabéticamente ni es boba- de Planes B
para HTML5: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Las 15 APIs más populares de HTML5: http://www.htmlcinco.com/15-apis-de-html5/
73
75. Dispositivos móviles
HTML5 será la web para los dispositivos móviles: tablets y
smartphones
Sin tardar demasiado será fundamental tener páginas web
que se muestren correctamente y sean funcionales en
cualquiera de los dispositivos en los que sean visualizadas
Compatibilidad:
-iOS 3.0+
-Android 2.0+
-BlackBerry smartphones 5.0+
-BlackBerry playbook 1.0+
-webOS 1.4+
-Symbian anna+
-Bada 2.0
-Windows phone mango+
75
76. Frameworks Dispositivos móviles
¿Qué tipo de aplicaciones podemos desarrollar para
un móvil?
-Aplicaciones no nativas basadas en el navegador móvil
-Aplicaciones nativas (Objective C/Java) que acceden directamente
al HW del móvil
Frameworks para el desarrollo de aplicaciones web
(no nativas) para dispositivos móviles en todas las
plataformas
-Todos utilizan HTML 5, CSS 3 y Javascript
-Todos soportan varias plataformas
76
77. Frameworks Dispositivos móviles
JQuery Mobile y Sencha Touch son frameworks
javascript que permiten desarrollar aplicaciones no
nativas para el navegador del móvil con el mismo Look
& Feel de las aplicaciones nativas
PhoneGap y Titanium Appcelerator, lo que
nos permiten es empaquetar nuestra aplicación web
permitiendo su distribución en los diferentes sistemas
de venta
77
78. PhoneGap Dispositivos móviles
Permite crear aplicaciones usando exclusivamente HTML5, CSS3 y
Javascript y empaquetarlas para que sean compatibles con las
principales plataformas móviles
Provee una serie de bibliotecas desarrolladas en el lenguaje
específico de cada plataforma (Objective-C para IOS, Java para
Android, etc), que permiten acceder desde el código HTML 5 a las
principales funcionalidades del dispositivo
Al ser una página web, tenemos acceso al DOM y podemos usar
frameworks como jQuery Mobile o cualquier otro
Evidentemente, no tendrá todo el potencial de una aplicación nativa
78
79. JQuery Mobile Dispositivos móviles
Framework para el desarrollo de aplicaciones y sitios web
optimizados para smartphones y tablets
“Write less, do more”
Podemos desarrollar una sola aplicación que funcione en las
plataformas más populares de smarthphones y tablets (en vez de
tener que escribir aplicaciones nativas para cada dispositivo móvil o
sistema operativo)
No es necesario que el programador reciba formación específica
como Objective-C para iOS/iPhone o Java para Android, únicamente
sabiendo HTML puede realizar el trabajo
79
80. Dispositivos móviles
Otras técnicas para garantizar la compatibilidad , consistencia y
rendimiento de un sitio web:
-Ajustes del área de visión o Viewport para evitar problemas de escala
involuntaria
<meta name="viewport" content="width=device-width; initial-
scale=1.0; maximum-scale=1.0; user-scalable=0;">
-Favicons de múltiples resoluciones
-Media queries, que permiten adaptar el sitio según tamaño y resolución del
equipo
Las media queries CSS3 modifican la estructura de la página en función del
tamaño de la pantalla. Simplemente, redefinimos los estilos –al final del .css- para
resoluciones muy grandes y para muy pequeñas (dispositivos móviles)
80
82. Dispositivos móviles
-LINKS:
-W3C. Estándares para aplicaciones Web en móviles (Febrero 2012):
http://www.w3.org/2012/02/mobile-web-app-state/
-Compatibilidad HTML5 en móviles y tablets: http://mobilehtml5.org/
-Aplicación web offline para dispositivos móviles con HTML 5:
http://www.ibm.com/developerworks/web/library/wa-offlineweb/
Soporte global: 72,48%
82
83. Epílogo
Links y Agradecimientos
-HTML5 rocks: http://slides.html5rocks.com/#landing-slide-Info
-Ejemplos HTML5 y APIs relacionadas: http://robertnyman.com/html5/
-DIV In To HTML5: http://diveintohtml5.info/
-Soporte navegadores: http://caniuse.com/
-Pick an API: http://playground.html5rocks.com/
-Tabla periódica de los Elementos HTML5 (^^):
http://joshduck.com/periodic-table.html
-HTMLFácil: http://html5facil.com/
-10 cuentas de Twitter relacionadas con HTML5 para seguir:
http://css3html5.com.ar/10-cuentas-de-twitter-para-seguir/
-BrowserQuest: http://browserquest.mozilla.org/
83
84. Caso de estudio Epílogo
BrowserQuest:
Juego de rol -masivo y multijugador- en línea de Mozilla
-Las cosas que se ven en el navegador son alimentadas por Canvas
-Los webSocket facilitan la comunicación con el servidor. El propio
servidor está escrito en JavaScript y se ejecuta en varios servidores a
través de Node.js*
-Utiliza HTML5 Audio API para el sonido
-Web Workers para cargar el mapa del juego al mismo tiempo que la
página de inicio
-localStorage para guardar el progreso del jugador
-CSS3 Media Queries para asegurar que el juego se adapta a
diferente tipos de ventana y tamaños de pantalla
Más juegos en HTML5: http://bitelia.com/2012/02/8-juegos-geniales-
desarrollados-en-html5
84
85. Extra rare tracks ^^ Epílogo
Node.js (servidor web)
Node es un entorno JavaScript de lado de servidor que utiliza un modelo
asíncrono y dirigido por eventos
Lista de aplicaciones para las que Node encajaría perfectamente (mejor que
Apache):
-Juegos online
-Gestores de correo online: de esta manera teniendo el navegador abierto
podríamos ver notificaciones en tiempo real de nuevos correos recibidos
-Herramientas de colaboración
-Chats
-Redes sociales: por ejemplo para actualizar automáticamente tu muro de
novedades
-Herramientas de traducción en tiempo real
-LINK:
El Libro para Principiantes en Node.js: http://www.nodebeginner.org/index-es.html
85
86. Agradecimientos Epílogo
-Tim Berners Lee
-Richard Stallman
-Linus Torvals
-Jesús Conde
-W3C
-Netquest
Espero que haya sido de su agrado.
Saludos y hasta otra ;)
86