Presentación html5

HTML 5
He visto el futuro y está en el navegador

1

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 Polyﬁlls ya no hay excusa para no empezar a
hacer páginas web en HTML5

2

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

Web Semántica
De la información al Conocimiento

Trata de Añadir signiﬁcado a la información para que lo
entiendan las máquinas -agentes- y ﬁltren 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

Nuevas etiquetas estructurales Web Semántica

Adiós a la divitis!

HTML 5 proporciona un conjunto de etiquetas que
deﬁnen 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

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

Marcado de datos Web Semántica

-El marcado de datos es un paso más en la llamada web
semántica para dar signiﬁcado 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


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


¿Cuál elegir?

Microdatos por su uso en schema.org y su aceptación
por Google, Microsoft y Yahoo!

9


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

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

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/ﬁle/xhr2/
-Div In To HTML5 - A Form of Mandness: http://diveintohtml5.info/forms.html
-Soporte (detalles): http://wufoo.com/html5/
12

Nuevos valores para el atriburo rel Web Semántica

El nuevo HTML tendrá que ser un poco más
descriptivo a la hora de deﬁnir 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

APIS de Javascript
Las responsables de la magia

-Tecnologías ofﬂine/storage

Application Cache

Web Storage

IndexedDB

-Comunicación y conectividad

WebSockets

Web Workers

Notiﬁcaciones

-Acceso al dispositivo

Drag & Drop nativo

Desktop Drag-In & Drag-Out

Filesystem API

Geolocalización

Orientación del dispositivo

Webcam y micro

14

Tecnologías ofﬂine 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


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


-AppCache: para guardar los archivos en local y
acceder a ellos en modo ofﬂine 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 Ofﬂine, para detectar el estado de la
conexión a la red

17

Application Cache Tecnologías ofﬂine

Fichero de conﬁguració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


AppCache es sólo una parte de las tecnologías ofﬂine 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 ﬁnalmente 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


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


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/
21

Web Storage Tecnologías ofﬂine

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.

22

Web Storage Tecnologías ofﬂine

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

IndexedDB Tecnologías ofﬂine

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/

24

Comunicación & Conectitividad API Javascript

-Web Workers
-WebSockets
-Notiﬁcaciones

HTML 5 presenta una conectividad más eficiente entre cliente y servidor,
lo que garantiza una mejor comunicación
25

Binomio WebSockets/Server-Sent Events
El servidor llama a tu puerta

26

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


¿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


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


Uso de Web Socket:

-Tecnologías ofﬂine
-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
30

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


//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


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


¿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
34

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

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

Drag & Drop Nativo Acceso al dispositivo

Una de las funcionalidades principales y más comunes
de las interfaces gráﬁcas 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-Deﬁnir eventos: dragstart, drag, dragenter,
dragover, dragleave, drop, dragend

37

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)
38

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

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/
40

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áﬁca 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

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

42

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

43

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áﬁcas

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: deﬁne 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

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 speciﬁcation: http://dev.w3.org/2009/dap/camera/

45

Gráﬁcos
¿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áﬁcos vectoriales
WebGL: el 3D en la web

46

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

El elemento Canvas Gráﬁcos

<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áﬁcos y de código)
48

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

49

SVG (Scalable Vector Graphics) Gráﬁcos

Dibujo vectorial

SVG es un formato de gráﬁcos vectoriales basado en XML

50

SVG (Scalable Vector Graphics) Gráﬁcos

-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

Gráﬁcos
¿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áﬁcos 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

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

Gráficos
-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
54

Gráﬁcos

Caso de estudio:
Quake II GWT en web:

-WebSockets
-Renderizado WebGL
-Implementación GWT de Java
-Web Storage (para salvar
juego y preferencias)

55

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

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

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

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 ﬂujos 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

Multimedia
¿Cuál elegir?

Web Audio API:

-Más eﬁciente
-Más fácil de usar
-Mayor cuota móvil/Tablet
-Además, Google ﬁnancia 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

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

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>

62

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 deﬁende 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

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
ﬁn
-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

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

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
reﬁere

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

Estilos CSS 3
Mira, mamá: ¡Sin javascript!

-Selectores CSS -Gradientes
-Webfonts -Sombras
-TextWrapping -Imágenes borde
-Columnas -Box Model
-Stroke -Transiciones
-Opacidad -Tranformaciones
-HSL -Animaciones
-Bordes
redondeados

-Uso de media query

67

Estilos CSS 3

-Ejemplos:

HTML5 Rocks: http://slides.html5rocks.com/#css3-title

Efectos rollover CSS3: http://tympanus.net/codrops/
2011/11/02/original-hover-effects-with-css3/
Efecto Matrix CSS3: http://girliemac.com/sandbox/
matrix.html

-LINK:
HTML5 snippets: http://html5snippets.com/
Soporte global: 68,39-94,03%
68

Polyﬁlls
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 Pollyﬁlls

69

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

Principales Polyﬁlls Polyﬁlls

-HTML Shiv:
Cada vez hay menos excusas para empezar a usar HTML5 en nuestros sitios!



-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

-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 simpliﬁca H5BP: Initializr

-Selectivizr:
Para compatibilizar atributos CSS3 y pseudo-clases en IE 6-8



72


-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-Polyﬁlls

Las 15 APIs más populares de HTML5: http://www.htmlcinco.com/15-apis-de-html5/

73

Dispositivos móviles
Be mobile, my friend

74


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

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

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

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íﬁco 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

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íﬁca
como Objective-C para iOS/iPhone o Java para Android, únicamente
sabiendo HTML puede realizar el trabajo

79


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


@media screen and (min-width:1200px){
img {
max-width:1000px;
}
#container{
width:1100px;
}
header h1 a{
width:1100px;
height:180px;
background:url(imagen.jpg) no-repeat 0 0;
}
}

@media screen and (max-width:600px){
img {
max-width:290px;
}
#container{
width:auto;
}
header h1 a{
width:auto;
}
}
81


-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 ofﬂine para dispositivos móviles con HTML 5:
http://www.ibm.com/developerworks/web/library/wa-ofﬂineweb/

82

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

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

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 notiﬁcaciones 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

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

Presentación html5

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Presentación html5 (20)

Último (20)

Presentación html5

Notas del editor