HTML5

HTML5
HTML5
ARKAITZ GARRO
CAPTULO 1
QU ES HTML5?
Especificacin oficial
5 Tips
CAPTULO 2
SEMNTICA
Cabecera del documento
Nuevas etiquetas semnticas
Estructura de un documento HTML5
Uso de las nuevas etiquetas semnticas
Atributos globales
CAPTULO 3
ELEMENTOS DE FORMULARIO
Nuevos tipos de input
Nuevos atributos
Nuevos elementos
CAPTULO 4
QU ES MODERNIZR
Aadir Modernizr a una pgina
Objeto Modernizr
Clases CSS en Modernizr
El mtodo load()
CAPTULO 5
DATASET
Utilizacin de los data attributes

data attributes y JavaScript
CAPTULO 6
MULTIMEDIA
Vdeo
Codecs, la nueva guerra
API multimedia
Fullscreen video
Audio
CAPTULO 7
CANVAS
http://www.arkaitzgarro.com/html5/[13/07/2015 12:26:10]
CAPTULO 10
DRAG AND DROP

10.1 Deteccin de la funcionalidad
10.2 Creacin de contenido arrastrable
10.3 Eventos de arrastre
10.4 Arrastre de archivos
CAPTULO 11
GEOLOCALIZACIN
11.1 Mtodos del API
CAPTULO 12
WEB WORKERS
12.1 Transferencia de mensajes
12.2 Utilizacin de Web Workers
12.3 Subworkers
12.4 Gestionar errores
12.5 Seguridad
CAPTULO 13
WEBSOCKETS
13.1 Introduccin
13.2 Crear un WebSocket
13.3 Comunicacin con el servidor
13.4 WebSocket en el servidor
CAPTULO 14
EVENTSOURCE
14.1 EventSource en el servidor
CAPTULO 15
FILE
15.1 Deteccin de la funcionalidad

15.2 Acceso a travs del formulario
15.3 Cmo leer archivos
15.4 Fragmentacin de archivos
CAPTULO 16
HISTORY
16.1 API
CAPTULO 17
XMLHTTPREQUEST2
Elementos bsicos
17.1 Recuperacin de archivos
Dibujar formas
17.2 Especificacin de un formato de respuesta
Rutas
17.3 Envo de datos
Colores
17.4 Subida de archivos o Blob
Degradados y patrones
17.5 Subida de un fragmento de bytes
Transparencias
17.6 Ejemplos prcticos
Transformaciones
Animaciones
CAPTULO 8
ALMACENAMIENTO LOCAL
CAPTULO 18
EJERCICIOS
18.1 Captulo 2
18.2 Captulo 3
Web Storage
18.3 Captulo 4
Web SQL
18.4 Captulo 5
IndexedDB
18.5 Captulo 6
CAPTULO 9
SIN CONEXIN
18.6 Captulo 7
18.7 Captulo 8
El archivo de manifiesto de cach
18.8 Captulo 9
Cmo servir el manifiesto
18.9 Captulo 10
Proceso de cacheado
18.10Captulo 11
Actualizacin de la memoria cach
18.11Captulo 12
Eventos online/offline
18.12Captulo 13
SOBRE ESTA EDICIN

HTML5
Publication date: 28/01/2014
This book was published with easybook v5.0-DEV, a free and open-source book publishing application
developed by Javier Eguiluz using several Symfony components.
LICENCIA
Esta obra se publica bajo la licencia Creative Commons Reconocimiento - No Comercial - Compartir
Igual 3.0, cuyos detalles puedes consultar en http://creativecommons.org/licenses/by-nc-sa/3.0/es/.
Puedes copiar, distribuir y comunicar pblicamente la obra, incluso transformndola, siempre que
cumplas todas las condiciones siguientes:
Reconocimiento: debes reconocer siempre la autora de la obra original, indicando tanto el
nombre del autor (Arkaitz Garro) como el nombre del sitio donde se public originalmente
www.arkaitzgarro.com. Este reconocimiento no debe hacerse de una manera que sugiera que el
autor o el sitio apoyan el uso que haces de su obra.
No comercial: no puedes utilizar esta obra con fines comerciales de ningn tipo. Entre otros, no
puedes vender esta obra bajo ningn concepto y tampoco puedes publicar estos contenidos en
sitios web que incluyan publicidad de cualquier tipo.
Compartir igual: si alteras o transformas esta obra o si realizas una obra derivada, debes
compartir tu trabajo obligatoriamente bajo esta misma licencia.
Qu es HTML5? | HTML5
HTML5
Anterior Siguiente
CAPTULO 1 QU ES HTML5?
HTML5 (HyperText Markup Language, versin 5) es la quinta revisin del lenguaje HTML.
Esta nueva versin (an en desarrollo), y en conjunto con CSS3, define los nuevos
estndares de desarrollo web, rediseando el cdigo para resolver problemas y
actualizndolo as a nuevas necesidades. No se limita solo a crear nuevas etiquetas o
atributos, sino que incorpora muchas caractersticas nuevas y proporciona una
plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).
HTML5 est destinado a sustituir no slo HTML 4, sino tambin XHTML 1 y DOM Nivel 2.
Esta versin nos permite una mayor interaccin entre nuestras pginas web y el
contenido media (video, audio, entre otros) as como una mayor facilidad a la hora de
codificar nuestro diseo bsico.
Algunas de las nuevas caractersticas de HTML5 seran:
Nuevas etiquetas semnticas para estructurar los documentos HTML, destinadas a
remplazar la necesidad de tener una etiqueta <div> que identifique cada bloque de
la pgina.
Los nuevos elementos multimedia como <audio> y <video> .
La integracin de grficos vectoriales escalables (SVG) en sustitucin de los
genricos <object> , y un nuevo elemento <canvas> que nos permite dibujar en l.
El cambio, redefinicin o estandarizacin de algunos elementos, como <a> , <cite>
o <menu> .
MathML para frmulas matemticas.
Almacenamiento local en el lado del cliente.

Y otros muchos nuevos APIs que veremos a lo largo de los siguientes captulos.
1.1 ESPECIFICACIN OFICIAL

El organismo W3C elabora las normas a seguir para la creacin de las pginas HTML5.
Sin embargo, no es necesario conocer todas estas especificaciones, escritas es un
lenguaje bastante formal, para disear pginas con este lenguaje. Las normas oficiales
estn escritas en ingls y se pueden consultar de forma gratuita en las siguientes
direcciones:
Especificacin recomendada como candidata para HTML5
Borrador para la especificacin oficial de HTML 5.1
1.2 5 TIPS
1.2.1 HTML5 ES API
Se puede pensar en HTML slo como nuevas etiquetas y geolocalizacin. Pero esta no es
ms que una pequea parte del estndar que define HTML5. La especificacin de HTML5
define tambin cmo esas etiquetas interactan con JavaScript, a travs del Modelo de
Objetos de Documento (DOM). HTML5 no es nicamente definir una etiqueta como
<video> , tambin existe su correspondiente API para objetos de vdeo en el DOM. Se
puede utilizar esta API para detectar el soporte para diferentes formatos de vdeo,
reproducir el vdeo, hacer una pausa, silenciar el audio, realizar un seguimiento de la
cantidad de vdeo que se ha descargado, y todo lo que necesita para crear una completa
experiencia de usuario alrededor de la etiqueta en s.
1.2.2 NO HAY QUE TIRAR NADA A LA BASURA

Se puede amar, o se puede odiar, pero no se puede negar que HTML 4 es el formato de
marcado ms exitoso de la historia. HTML5 se basa en ese xito. No es necesario volver
a aprender cosas que ya se conocen. Si la aplicacin web que funcionaba ayer en HTML
4, hoy funcionar en HTML5.
Ahora, si lo que se desea es mejorar las aplicaciones web, este es el lugar correcto. He
aqu un ejemplo concreto: HTML5 soporta todos los controles de formulario de HTML 4,
pero tambin incluye nuevos controles de entrada. Algunos de estos son funcionalidades
esperadas durante mucho tiempo, como reguladores y selectores de fecha, mientras que
otros son ms sutiles. Por ejemplo, el tipo de entrada de correo electrnico se parece a
un cuadro de texto, pero los navegadores mviles personalizar su teclado en pantalla
para que sea ms fcil de escribir direcciones de correo electrnico. Los navegadores
ms antiguos que no son compatibles con el tipo de entrada de correo electrnico ser
tratado como un campo de texto normal, y el formulario sigue funcionando sin ningn
cambio en las etiquetas o hacks de JavaScript.
1.2.3 FCIL DE COMENZAR

"Actualizar" a HTML5 puede ser tan simple como cambiar su tipo de documento. El tipo
de documento debe estar en la primera lnea de cada pgina HTML. Las versiones
anteriores de HTML definen un montn de doctypes, y elegir el ms adecuado puede ser
difcil. En HTML5, slo hay un tipo de documento:
<!DOCTYPE html>
La actualizacin al doctype HTML5 no rompe el marcado existente, ya que los elementos

obsoletos previamente definidas en HTML 4 todava se representar en HTML5. Pero le
permitir usar (y validar) nuevos elementos semnticos como <article> , <section> ,
<header> y <footer> .
1.2.4 YA FUNCIONA!
Si se quiere dibujar en un lienzo, reproducir vdeo, disear mejores formas, o construir
aplicaciones web que funcionan offline, nos encontramos con que HTML5 ya est bien
soportado. Firefox, Safari, Chrome, Opera y los navegadores mviles ya son compatibles
con canvas, video, la geolocalizacin, el almacenamiento local, y ms funcionalidades.
Incluso Microsoft (raramente conocido por el soporte de estndares) soporta la mayora
de las caractersticas de HTML5 en Internet Explorer 9.
1.2.5 HA VENIDO PARA QUEDARSE

Tim Berners-Lee invent la World Wide Web a principios de 1990. Ms tarde fund el
W3C para que actuase como administrador nico de los estndares web, lo que venido
haciendo durante ms de 15 aos. Esto es lo que el W3C tena que decir sobre el futuro
de los estndares web, en julio de 2009:
Hoy, el director anuncia que cuando el XHTML 2 expire en la fecha prevista a finales
de 2009, no ser renovado. De este modo, y mediante el aumento de los recursos
en el Grupo de Trabajo de HTML, el W3C espera acelerar el progreso de HTML5 y
aclarar la posicin del W3C sobre el futuro de HTML.
En septiembre de 2012, el W3C propuso un plan para crear una primera especificacin de
HTML5 a finales de 2014, y una nueva especificacin final de HTML 5.1 a finales 2016. Al
igual que ocurre en la especificacin de CSS3, en HTML5 se ha optado por modularizar la
especificacin, creando grupos de trabajo que trabajan de forma separada en diferentes
aspectos del estndar. Algunas de las especificaciones sobre las que se est trabajando:
HTML Microdata - HTML WG
HTML Canvas 2D Context - HTML WG
HTML5 Web Messaging - Web Apps WG
Web Workers - Web Apps WG
Web Storage - Web Apps WG
The WebSocket API - Web Apps WG
The WebSocket Protocol - IETF HyBi WG
Server-Sent Events - Web Apps WG
WebRTC - WebRTC WG
WebVTT - W3C Web Media Text Tracks CG
NDICE DE CONTENIDOS
Qu es HTML5?
Especificacin oficial
5 Tips
Semntica | HTML5
HTML5
Anterior Siguiente
CAPTULO 2 SEMNTICA
Una de las novedades que hemos mencionado anteriormente son las etiquetas que se
han introducido en HTML5. Existen ms de 30 nuevas etiquetas semnticas que pueden
ser utilizadas en nuestras pginas estticas. Estas nuevas etiquetas se podran clasificar
en dos grupos:
Etiquetas que extienden a las actuales, como <video> , <audio> o <canvas> , y
que adems aaden nuevas funcionalidades a los documentos HTML, que
podemos controlar desde JavaScript y
etiquetas que componen la web semntica, es decir, que no proponen nuevas
funcionalidades pero sirven para estructurar sitios web, y aadir un significado
concreto, ms all de las etiquetas generales como <div> .
En este captulo, veremos como transformar nuestra estructura actual de marcado
basada en <div> , a una estructura que utiliza las nuevas etiquetas estructurales
como
<nav> , <header> , <footer> , <aside> , o <article> .
2.1 CABECERA DEL DOCUMENTO

Adems de las nuevas etiquetas introducidas por HTML5 (que veremos ms adelante), el
nuevo estndar propone pequeas mejoras que podemos aplicar en la definicin de
nuestros documentos, en concreto en la cabecera de los mismos.
2.1.1 DOCTYPE
El estndar XHTML deriva de XML, por lo que comparte con l muchas de sus normas y
sintaxis. Uno de los conceptos fundamentales de XML es la utilizacin del DTD o
Document Type Definition ("Definicin del Tipo de Documento"). El estndar XHTML
define el DTD que deben seguir las pginas y documentos XHTML. En este documento se
definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de
valores que puede tener cada atributo.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
sta es una de las 15 declaraciones posibles declaradas en los estndares HTML4 y

XHTML. En HTML5 se reduce la definicin del tipo de documento a una nica posibilidad,
por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto:
<!DOCTYPE html>
2.1.2 ELEMENTO RAZ HTML

En todo documento HTML, su elemento raz o nodo superior siempre es la etiqueta
<html> . Hasta ahora, este elemento raz se defina de la siguiente manera:
<html xmlns=http://www.w3.org/1999/xhtml
lang="en"
xml:lang="en">
No hay ningn problema en mantener esta sintaxis. Si se desea, se puede conservar, ya

que es vlido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias, por
lo que podemos eliminarlas.
El primer elemento del que podemos prescindir es el atributo xmlns . Se trata de una
herencia de XHTML 1.0, que dice que los elementos de esta pgina estn en el espacio
de nombres XHTML, http://www.w3.org/1999/xhtml . Sin embargo, los elementos de
HTML5 estn siempre en este espacio de nombres, por lo que ya no es necesario
declararlo explcitamente. Eliminar el atributo xmlns nos deja con este elemento de la
siguiente manera:
<html lang="es" xml:lang="en">
En este caso ocurre lo mismo con el atributo xml:lang , es una herencia de XHTML
que podemos eliminar, quedando finalmente la etiqueta de la siguiente manera:
<html lang="en">
2.1.3 ELEMENTO HEAD

El primer hijo del elemento raz es generalmente el elemento head . El elemento head
contiene los metadatos que aportan informacin extra sobre la pgina, como su ttulo,
descripcin, autor, etc. Adems, puede incluir referencias externas a contenidos
necesarios para que el documento se muestre y comporte de manera correcta (como
hojas de estilos o scripts). Este elemento ha sufrido pequeas variaciones, pero que
debemos tener en cuenta:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style-original.css" />
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"

href="opensearch.xml"
/>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
2.1.3.1 CODIFICACIN DEL CONTENIDO

Cuando se piensa en "texto", probablemente nos venga a la cabeza una definicin de
"caracteres y smbolos que veo en la pantalla de mi ordenador". Pero realmente se
tratan de bits y bytes. Cada cadena de caracteres que se muestra en la pantalla, se
almacena con una codificacin de caracteres en particular. Hay cientos de codificaciones
de caracteres diferentes, algunos optimizado para ciertos idiomas como el ruso, el chino
o ingls, y otros que se pueden utilizar para mltiples idiomas. En trminos generales, la
codificacin de caracteres proporciona una correspondencia entre lo que se muestra en
la pantalla y lo que un equipo realmente almacena en la memoria y en el disco.
Se puede pensar en la codificacin de caracteres como una especie de clave de
descifrado del texto. Cuando accedemos a una secuencia de bytes, y decidimos que es
"texto", lo que necesitamos saber es qu codificacin de caracteres se utiliza para que
pueda decodificar los bytes en caracteres y mostrarlos (o transformarlos) de manera
correcta.
Lo ideal es establecer esta codificacin en el servidor, indicando el tipo en las cabeceras
de respuesta:
Content-Type: text/html;
charset="utf-8"
Por desgracia, no siempre podemos tener el control sobre la configuracin de un servidor

HTTP. Por ejemplo, en la plataforma Blogger, el contenido es proporcionado por
personas, pero los servidores son administrados por Google, por lo que estamos
supeditados a su configuracin. An as, HTML 4 proporciona una manera de especificar
la codificacin de caracteres en el documento HTML:
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
El encabezado HTTP es el mtodo principal, y anula la etiqueta <meta> si est presente.

Pero no todo el mundo puede establecer encabezados HTTP, por lo que la etiqueta
<meta> todava tiene sentido. En el caso de HTML5, es an ms sencillo definir esta
etiqueta meta:
<meta charset="utf-8">
Debemos acostumbrarnos a especificar la codificacin de nuestros documentos, aunque

no vayamos a utilizar caracteres especiales o nuestro documentos no se presente en
otros idiomas. Si no lo hacemos, podemos exponernos a problemas de seguridad.
2.1.3.2 LINKS
Dentro del elemento head , las etiquetas <link> son una manera de acceder o declarar
contenido externo al documento actual, que puede cumplir distintos objetivos:
Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al
presente documento.
Es un feed que contiene el mismo contenido que esta pgina, pero en un formato
estndar (RSS).
Es una traduccin de esta pgina en otro idioma.
Es el mismo contenido que esta pgina, pero en formato PDF.
Es el prximo captulo de un libro en lnea de la cual esta pgina es tambin una
parte.
En HTML5, se separan estas relaciones de enlace en dos categoras:
Enlaces a recursos externos que se van a utilizar para mejorar el documento actual,
y enlaces de hipervnculos que son enlaces a otros documentos.
El tipo de relacin ms utilizado (literalmente) es el siguiente:
<link rel="stylesheet" href="style-original.css" type="text/css"
/>
Esta relacin es utilizada para indicar el archivo donde se almacenan las reglas CSS que
se desean aplicar al documento. Una pequea optimizacin que se puede hacer en
HTML5 es eliminar el atributo type . Slo hay un lenguaje de estilo para la web, CSS,
as que ese es el valor predeterminado para el atributo type :
<link rel="stylesheet" href="style-original.css"
/>
2.2 NUEVAS ETIQUETAS SEMNTICAS

En 2004, Ian Hickson, el autor de la especificacin de HTML5, analiz 1.000.000.000 de
pginas web utilizando el motor de Google, intentando identificar la manera en la que la
web real estaba construida. Uno de los resultados de este anlisis, fue la publicacin de
una lista con los nombres de clases ms utilizados. Este estudio revela que los
desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto
llev a considerar que quizs fuese una buena idea crear etiquetas concretas para
reflejar estas estructuras.
Este tipo de etiquetas que componen la web semntica nos sirven para que cualquier
mecanismo automtico (un navegador, un motor de bsqueda, un lector de feeds...) que
lea un sitio web sepa con exactitud qu partes de su contenido corresponden a cada una
de las partes tpicas de un sitio. Observando esas etiquetas semnticas estructurales,
cualquier sistema podr procesar la pgina y saber cmo est estructurada. Veamos
algunas de estas etiquetas que introduce HTML5 en este sentido.
<section></section> : se utiliza para representar una seccin "general" dentro
de un documento o aplicacin, como un captulo de un libro. Puede contener

subsecciones y si lo acompaamos de h1-h6 podemos estructurar mejor toda la
pgina creando jerarquas del contenido, algo muy favorable para el buen
posicionamiento web.
<article></article> : representa un componente de una pgina que consiste en
una composicin autnoma en un documento, pgina, aplicacin, o sitio web con la

intencin de que pueda ser reutilizado y repetido. Podra utilizarse en los artculos
de los foros, una revista o el artculo de peridico, una entrada de un blog, un
comentario escrito por un usuario, un widget interactivo o cualquier otro artculo
independiente de contenido. Cuando los elementos de <article> son anidados, los
elementos interiores representan los artculos que en principio son relacionados con
el contenido del artculo externo. Por ejemplo, un artculo de un blog que permite
comentarios de usuario, dichos comentarios se podran representar con <article> .
<aside></aside> : representa una seccin de la pgina que abarca un contenido
relacionado con el contenido que lo rodea, por lo que se le puede considerar un

contenido independiente. Este elemento puede utilizarse para efectos tipogrficos,
barras laterales, elementos publicitarios, para grupos de elementos de la
navegacin, u otro contenido que se considere separado del contenido principal de
la pgina.
<header></header> : representa un grupo de artculos introductorios o de
navegacin. Est destinado a contener por lo general la cabecera de la seccin (un

elemento h1-h6 o un elemento hgroup ), pero no es necesario.
<nav></nav> : representa una seccin de una pgina que enlaza a otras pginas o
a otras partes dentro de la pgina. No todos los grupos de enlaces en una pgina
necesita estar en un elemento nav , slo las secciones que constan de bloques de
navegacin principales son apropiados para el elemento de navegacin.
<footer></footer> : representa el pie de una seccin, con informacin acerca de la
pgina/seccin que poco tiene que ver con el contenido de la pgina, como el autor,
el copyright o el ao.
<hgroup></hgroup> : representa el encabezado de una seccin. El elemento se
utiliza para agrupar un conjunto de elementos h1-h6 cuando el ttulo tiene varios
niveles, tales como subttulos o ttulos alternativos.
<time> : representa o bien una hora (en formato de 24 horas), o una fecha
precisa en el calendario gregoriano (en formato ISO), opcionalmente con un

tiempo y un desplazamiento de zona horaria.
2.3 ESTRUCTURA DE UN DOCUMENTO HTML5

Como hemos visto con las nuevas etiquetas semnticas introducidas en HTML5, stas
aportan un significado concreto al documento que estamos definiendo, y por lo tanto,
afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver
como podemos convertir nuestra actual pgina con las nuevas etiquetas introducidas en
HTML5.
2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4

El siguiente cdigo muestra una estructura "clsica" de documento HTML, donde los
diferentes contenidos de la web se encuentran agrupados por etiquetas <div> . Por s
mismas, estas etiquetas no aportan ningn tipo de significado, y el atributo id tampoco
se lo proporciona. Si cambiamos <div id="header"> por <div id="whatever"> , el
significado sigue siendo el mismo, ninguno.
<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id="header">
<a href="/"><img src=logo.png alt="home"></a>
<h1>My Weblog</h1>
<p class="tagline">
A lot of effort went into making this effortless.
</p>
</div>
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
<div class="articles">
<div class="article">
<p class="post-date">October 22, 2009</p>
<h2>
<a href="#" title="link to this post">Travel day</a>
</h2>
<div class="content">
Content goes here...
</div>
<div class="comments">
<p><a href="#">3 comments</a></p>
</div>
</div>
</div>
<div class="aside">
<div class="related"></div>
</div>
<div id="footer">
<p>§</p>
<p>© 2013–9 <a href="#">Arkaitz Garro</a></p>
</div>
</body>
</html>
2.3.2 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML5

Veamos como podemos aadir un significado a este documento, nicamente aplicando
las nuevas etiquetas semnticas incluidas en HTML5.
<!DOCTYPE html>
<html>
<body>
<header>
<hgroup>
<h1>Title</h1>
<h2 class="tagline">
</h2>
</hgroup>
</header>
<nav>
<ul>
</ul>
</nav>
<section class="articles">
<article>
<time datetime="2009-10-22">October 22, 2009</time>
<h2>
</h2>
</div>
<section class="comments">
</section>
</article>
</section>
<aside>
</aside>
<footer>
<p>§</p>
</footer>
</body>
</html>
Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debemos
utilizar. Esto no siempre es as, y cuando estructuramos contenidos de mucho mayor
alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar
en la correcta seleccin de etiquetas, es el que proponen en HTML5 Doctor.
2.4 USO DE LAS NUEVAS ETIQUETAS SEMNTICAS

2.4.1<HEADER>
Segn la especificacin, un elemento <header> representa lo siguiente:
Un grupo de navegacin o contenido introductorio. Un elemento header
normalmente contiene una seccin de encabezado (un elemento h1-h6 o un
elemento hgroup), pero puede contener otro tipo de elementos, como una tabla de
contenidos, un formulario de bsqueda o cualquier logo importante.
En nuestro ejemplo, y en la mayora de los sitios web, la cabecera contiene los primeros
elementos de la pgina. Tradicionalmente el ttulo de la web, su logo, enlaces para
volver al inicio... De la manera ms simple, nuestra cabecera quedara de esta forma:
<header>
<a href="/"><img src=logo.png
<h1>Title</h1>
</header>
alt="home"></a>
Tambin es muy comn que los sitios web muestren un lema o subttulo bajo el ttulo
Semntica | HTML5
principal. Para dar mayor importancia a este subttulo, y relacionarlo de alguna manera
con el ttulo principal de la web, es posible agrupar los dos titulares bajo un elemento
<hgroup> .
<header>
<hgroup>
<h1>Title</h1>
</h2>
</hgroup>
</header>
2.4.2<NAV>
Segn la especificacin, un elemento <nav> representa lo siguiente:
El elemento <nav> representa una seccin de una pgina que enlaza con otras
pginas o partes de la misma pgina: una seccin con enlaces de navegacin.
El elemento <nav> ha sido diseado para identificar la navegacin de un sitio web. La
navegacin se define como un conjunto de enlaces que hacen referencia a las secciones
de una pgina o un sitio, pero no todos los enlaces son candidatos de pertenecer a un
elemento <nav> : una lista de enlaces a patrocinadores o los resultados de una
bsqueda, no forman parte de la navegacin principal, sino que corresponden con el
contenido de la pgina.
Como ocurre con los elementos <header> , <footer> y el resto de nuevas etiquetas, no
estamos obligados a utilizar un nico elemento <nav> en toda la pgina. Es posible que
tengamos una navegacin principal en la cabecera de la pgina, una tabla de contenidos
o enlaces en el pie de la pgina, que apuntan a contenidos secundarios. Todos ellos son
candidatos a pertenecer a un elemento <nav> .
<nav>
<ul>
</ul>
</nav>
2.4.3<FOOTER>
Segn la especificacin, un elemento <footer> representa lo siguiente:
Representa el pie de una seccin. Un pie tradicionalmente contiene informacin

acerca de su seccin, como quin escribi el contenido, enlaces relacionados,
copyright y similares.
Al igual que ocurre con el elemento <nav> , podemos tener tantos elementos <footer>
como sea necesario. Lo normal es que nuestro sitio web disponga de al menos un pie
principal, que contiene los avisos legales (privacidad, condiciones del servicio,
copyright...), mapa del sitio web, accesibilidad, contacto y otros muchos enlaces que
pueden ir incluidos en un elemento <nav> .
2.4.4<ARTICLE>
Segn la especificacin, un elemento <article> representa lo siguiente:
Este elemento representa un contenido completo, auto-contenido en un documento,
pgina, aplicacin o sitio web, que es, en principio, independiente de ser distribuido
y reutilizado, por ejemplo en un RSS. Puede ser un post de un foro, un artculo de
un peridico o revista, una entrada de un blog, un comentario de un usuario, un
widget o cualquier otro elemento independiente.
Cuando los artculos estn anidados, los artculos interiores representan contenido
que en principio est relacionado con el artculo que los contiene. Por ejemplo, una
entrada de un blog puede aceptar comentarios de usuarios, que estn incluidos
dentro del contenido principal y relacionados con el mismo.
Por lo tanto, la etiqueta <article> se utiliza para encapsular contenido, que tiene
significado en s mismo, y que puede ser distribuido y reutilizado en otros formatos de
datos. No nos referimos nicamente a contenidos clsicos de texto, sino que incluso un
contenido multimedia con su transcripcin, un mapa o email pueden ser totalmente
vlidos para ser incluidos en una etiqueta <article> .
<section>
<h1>Comments</h1>
<article id="c1">
<footer>
<p>Posted by: <span>George Washington</span></p>
<p><time datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article id="c2">
<footer>
<p>Posted by: <span itemprop="name">George Hammond</span></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
2.4.5<SECTION>
A diferencia del elemento <article> , este elemento es utilizado para dividir el
documento (o artculos) en diferentes reas, o como su propio nombre indica, en
secciones. Segn la especificacin, un elemento <section> representa lo siguiente:
Representa una seccin genrica de un documento o aplicacin. Una seccin, en
este contexto, es un grupo temtico de contenido, que generalmente incluye una
cabecera.
Consideremos el siguiente marcado vlido en HTML 4:
<h1>Rules for Munchkins</h1>
<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows itso no selling
bricks as "souvenirs"</p>
<h2>Fan Club uniforms</h2>
<p>All Munchkins are obliged to wear their "Im a friend
of Dorothy!" t-shirt when representing the club</p>
<p><strong>Vital caveat about the information above:
does not apply on the first Thursday of the month.</strong></p>
En este caso, y desde un punto de vista semntico, es complicado deducir si el texto Vital
caveat about the information above: does not apply on the first Thursday of the month.
pertenece al contenido completo o est relacionado con la seccin Fan Club uniforms.
Gracias a la etiqueta <section> , es muy sencillo separar e identificar a qu
seccin pertenece cada contenido:
<article>
<section>
</section>
<section>
</section>
</article>
<article>
<section>
</section>
<section>
</section>
</article>
Como podemos observar en los dos ejemplos anteriores, es muy sencillo agrupar
contenido que pertenece a una misma seccin, permitiendo incluirlo dentro de un
contexto semntico.
Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro documento
en secciones, que incluyen contenido de temticas diferentes entre s. Si adems
queremos separar estos contenidos visualmente en dos columnas, lo lgico sera utilizar
las tradicionales etiquetas <div> para agrupar los artculos segn su temtica, y
posteriormente aplicar estilos CSS o JavaScript para presentarlos en forma de pestaas.
En este caso, la etiqueta <div> no nos aporta ningn significado semntico, tan slo
estructural. La etiqueta <section> es la encargada de aadir semntica en estos casos:
<section>
<h1>Articles about llamas</h1>
<article>
<h2>The daily llama: Buddhism and South American
<p>blah blah</p>
</article>
<article>
<h2>Shh! Do not alarm a llama</h2>
<p>blah blah</p>
</article>
</section>
<section>
<h1>Articles about root vegetables</h1>
<article>
<h2>Carrots: the orange miracle</h2>
<p>blah blah</p>
</article>
camelids</h2>
<article>
<h2>Eat more Swedes (the vegetables, not the
<p>blah blah</p>
</article>
</section>
people)</h2>
2.4.6<ASIDE>
Segn la especificacin, un elemento <aside> representa lo siguiente:
Una seccin de una pgina que consiste en contenido tangencialmente relacionado
con el contenido alrededor del elemento, y puede considerarse separado de este
contenido. Estas secciones son normalmente representadas como elementos
laterales en medios impresos. Este elemento puede utilizarse contener citas,
anuncios, grupos de elementos de navegacin y cualquier otro contenido separado
del contenido principal de la pagina.
Dentro de un artculo, por ejemplo, puede ser utilizado para mostrar contenido
relacionado como citas u otros artculos relacionados.
2.4.7<FIGURE>
Segn la especificacin, un elemento <figure> representa lo siguiente:
The figure element represents some flow content, optionally with a caption, that is
self-contained and is typically referenced as a single unit from the main flow of
the document.
The element can be used to annotate illustrations, diagrams, photos, code listings,
etc. This includes, but is not restricted to, content referred to from the main part
of the document, but that could, without affecting the flow of the document, be
moved away from that primary content, e.g. to the side of the page, to dedicated
pages, or to an appendix.
Hasta ahora, no haba una manera correcta de poder aadir un subttulo o una leyenda a
un contenido concreto, como explicar una figura o atribuir una imagen a un fotgrafo.
Gracias a la etiqueta <figure> podemos contener una imagen (o un vdeo, ilustracin o
bloque de cdigo) en un elemento y relacionarlo con un contenido concreto:
<figure>
<img src="welcome.jpg" alt="Alternative text">
<figcaption>
Bruce and Remy welcome questions
<small>Photo © Bruces mum</small>
</figcaption>
</figure>
En conveniente recordar que el atributo alt indica el texto a mostrar cuando la imagen
no est disponible, y no est pensada para contener una descripcin de la imagen, y
mucho menos para duplicar lo ya indicado en la etiqueta <figcaption> .
Ejercicio 1
Ver enunciado
2.5 ATRIBUTOS GLOBALES

HTML5 tambin incluye nuevos atributos globales que pueden ser asignados a cualquier
elemento. Son los siguientes:
2.5.1 ACCESSKEY
El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que
permite activar un elemento a asignarle el foco. Este atributo ya exista en HTML 4,
aunque ha sido utilizado en muy pocas ocasiones. Como HTML5 est pensado para
aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no
ha sido eliminado, y ahora est disponible para cualquier elemento.
Para evitar conflictos con otros atajos de teclado, o con los propios del navegador, ahora
esta etiqueta permite asignar alternativas en este atributo. Un ejemplo incluido en la
especificacin:
<input type="search" name="q" accesskey="s
0">
Esto quiere decir que este elemento es accesible a travs de dos atajos de teclado, a
travs de la tecla s o a travs de la tecla 0 (en ese orden).
2.5.2 CONTENTEDITABLE
Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta
contenteditable es ahora parte de la especificacin oficial.
La introduccin de esta etiqueta significa principalmente dos cosas:

Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta
etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar
una marca que indique la posicin actual del cursor.
Y segundo, es posible cambiar el formato del texto del contenido, aadiendo
negritas, cambiar la fuente, aadir listas, etc.
Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder
desde JavaScript a este atributo, hay que tener en cuenta su notacin lowerCamelCase,
siendo el nombre de la propiedad del DOM contentEditable . Adems, existe otra
propiedad llamada isContentEditable , que indica si el elemento es editable o no.
Finalmente, el contenido que ha sido seleccionado por el usuario, puede ser objeto de
modificaciones, como hemos comentado antes. A travs del comando
element.execCommand() es posible indicar el tipo de modificacin (poner en negrita,
copiar, cambiar la fuente...), siempre que el documento se haya indicado como editable.
document.designMode = 'on';
Si se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al

servidor. No existe ningn API o mtodo en JavaScript que nos posibilite esta accin, por
lo que debemos utilizar algn tipo de tecnologa tipo AJAX.
2.5.3 DATA-* (CUSTOM DATA ATTRIBUTES)

HTML5 permite crear atributos personalizados para los elementos. Estos atributos son
utilizados para pasar informacin a JavaScript. Como veremos en el captulo
correspondiente, hasta ahora se utilizaba el atributo class para de alguna manera
almacenar informacin asociada con elementos, pero esto cambia radicalmente con
estos atributos.
<ul id="vegetable-seeds">
<li data-spacing="10cm" data-sowing-time="March to
June">Carrots</li>
<li data-spacing="30cm" data-sowing-time="February to
March">Celery</li>
September">Radishes</li>
</ul>
2.5.4 DRAGGABLE
Este atributo indica que el elemento indicado puede ser arrastable. Lo veremos en el
captulo correspondiente.
NDICE DE CONTENIDOS
Semntica
Atributos globales
Elementos de formulario | HTML5
HTML5
Anterior Siguiente
CAPTULO 3 ELEMENTOS DE FORMULARIO

HTML5 hace que el desarrollo de formularios sea mucho ms sencillo. Se han aadido dos
nuevos mtodos que pueden ser utilizados en la accin del formulario ( update y
delete ), pero lo ms interesante son los nuevos tipos de input y elementos de
formulario que mejoran la experiencia del usuario y facilitan el desarrollo de los

formularios. Estos nuevos elementos aaden en algunos casos, validaciones propias de
sus datos, por lo que ya no es necesario JavaScript para realizar este proceso.
3.1 NUEVOS TIPOS DE INPUT

La especificacin de HTML5 define 12 nuevos tipos de input que podemos utilizar en
nuestros formularios. Esta especificacin no define cmo deben mostrarse los nuevos
tipos en los navegadores, ni los campos ni las validaciones. De hecho, y gracias a cmo
est especificado HTML, los navegadores que no comprendan los nuevos tipos de
entrada, mostrarn un campo de texto tradicional, por lo que la compatibilidad con
navegadores antiguos est garantizada.
3.1.1TIPO EMAIL
El nuevo tipo <input type="email"> indica al navegador que no debe permitir que se
enve el formulario si el usuario no ha introducido una direccin de email vlida, pero no
comprueba si la direccin existe o no, slo si el formato es vlido. Como ocurre con el
resto de campos de entrada, puede enviar este campo vaco a menos que se indique que
es obligatorio.
El atributo multiple indica que el valor de este campo, puede ser una lista de emails
vlidos, separados por comas.
http://www.arkaitzgarro.com/html5/capitulo-3.html[13/07/2015 11:59:21]
Figura 3.1 Campo de tipo email en un dispositivo iOS
3.1.2TIPO URL
El nuevo tipo <input type="url"> indica al navegador que no debe permitir que se enve
el formulario si el usuario no ha introducido una URL correcta. Algunos navegadores
ofrecen ayudas al usuario, como Opera que aade el prefijo http:// a la URL si el
usuario no lo ha introducido. Una URL no tiene que ser necesariamente una direccin
web, sino que es posible utilizar cualquier formato de URI vlido, como por ejemplo
tel:555123456 .
Figura 3.2 Campo de tipo url en un dispositivo iOS
3.1.3TIPO DATE
El nuevo tipo <input type="date"> es de los ms esperados y tiles. En muchos de los
sitios web es normal disponer de campos especficos de fecha, donde el usuario debe
especificar fechas (para un concierto, vuelo, reserva de hotel, etc). Al existir tantos
formatos de fecha diferentes (DD-MM-YYYY o MM-DD-YYYY o YYYY-MM-DD), esto puede
suponer un inconveniente para los desarrolladores o los propios usuarios.
Este nuevo tipo de campo resuelve estos problemas, ya que es el navegador el que
proporciona la interfaz de usuario para el calendario, e independientemente del formato
en el que se muestre, los datos que se envan al servidor cumplen la norma ISO para el
formato de fechas.
Figura 3.3 Campo de tipo date en un dispositivo iOS
3.1.4TIPO TIME
El nuevo tipo <input type="time"> permite introducir una hora en formato 24h, y
validarlo. De nuevo, es el navegador el encargado de mostrar la interfaz de usuario
correspondiente: puede ser un simple campo donde es posible introducir la hora y los
minutos, o mostrar algo ms complejo como un reloj de agujas.
Figura 3.4 Campo de tipo time en un dispositivo iOS
3.1.5TIPO DATETIME
Este nuevo tipo de campo es la combinacin de los tipos date y time , por lo que
se valida tanto la fecha como la hora introducida.
Figura 3.5 Campo de tipo datetime en un dispositivo iOS
3.1.6TIPO MONTH
El nuevo tipo <input type="month"> permite la seleccin de un mes en concreto. La
representacin interna del mes es un valor entre 1 y 12, pero de nuevo queda en manos
del navegador la manera de mostrarlo al usuario, utilizando los nombres de los meses
por ejemplo.
Figura 3.6 Campo de tipo month en un dispositivo iOS
3.1.7TIPO WEEK
El nuevo tipo <input type="week"> permite la seleccin de una semana del ao concreta.
La representacin interna del mes es un valor entre 1 y 53, pero de nuevo queda en
manos del navegador la manera de mostrarlo al usuario. La representacin interna de la
semana 7, por ejemplo, es la siguiente: 2013-W07 .
Figura 3.7 Campo de tipo week en Google Chrome
3.1.8TIPO NUMBER
Como es de esperar, el nuevo tipo <input type="number"> valida la entrada de un tipo
de dato numrico. Este tipo de campo encaja perfectamente con los atributos min , max
y step , que veremos ms adelante.
Figura 3.8 Campo de tipo number en un dispositivo iOS
3.1.9TIPO RANGE
El nuevo tipo <input type="range"> , muestra un control deslizante en el navegador.
Para conseguir un elemento de este estilo, era necesario un gran esfuerzo para
combinar imgenes, funcionalidad y accesibilidad, siendo ahora mucho ms sencillo.
Este tipo de campo encaja de nuevo perfectamente con los atributos min , max y step
, que veremos ms adelante.
Figura 3.9 Campo de tipo range en Google Chrome
3.1.10
TIPO TEL
El nuevo tipo <input type="tel"> , espera que se proporcione un nmero de telfono. No

se realiza ninguna validacin, ni se obliga a que nicamente se proporcionen caracteres
numricos, ya que un nmero de telfono puede representarse de muchas maneras:
+44 (0) 208 123 1234.
La gran ventaja de este campo es que en dispositivos con un teclado virtual, ste se
adaptar para mostrar nicamente los caracteres asociados on nmeros de telfono.
Figura 3.10 Campo de tipo tel en un dispositivo iOS
3.1.11
TIPO SEARCH
El nuevo tipo <input type="search"> , espera que se proporcione un trmino de

bsqueda. La diferencia con un campo de texto normal, es nicamente esttica, aunque
puede ofrecer alguna funcionalidad extra como un histrico de ltimos trminos
introducidos o una ayuda para el borrado. Por norma general, toma el aspecto de un
campo de bsqueda del navegador o sistema operativo.
Figura 3.11 Campo de tipo search en Google Chrome
3.1.12
TIPO COLOR
El nuevo tipo <input type="color"> , permite seleccionar un color de una paleta de

colores mostrada por el navegador. Esta paleta de colores, coincide, por norma general,
con la interfaz de seleccin de colores del sistema operativo.
Figura 3.12 Campo de tipo color en Google Chrome
3.2 NUEVOS ATRIBUTOS

Al igual que los nuevos tipos de campo, el elemento input ha recibido nuevos atributos
para definir su comportamiento y restricciones: autocomplete , min , max , multiple ,
pattern , autofocus , placeholder , required y step . Existe adems un nuevo
atributo, list , que hace referencia a otro elemento, permitiendo crear un nuevo tipo
de entrada de datos.
3.2.1ATRIBUTO LIST Y <DATALIST>

La combinacin del atributo list y un elemento de tipo <datalist> da como resultado
un campo de texto, donde el usuario puede introducir cualquier contenido, y las
opciones definidas en el <datalist> se muestran como una lista desplegable. Hay que
tener en cuenta que la lista tiene que estar contenida en un elemento <datalist> cuyo
id coincide con el indicado en el atributo list :

<input id="form-person-title" type="text" list="mylist">
<datalist id="mylist">
<option label="Mr" value="Mr">
<option label="Ms" value="Ms">
<option label="Prof" value="Mad Professor">
</datalist>
En este ejemplo se utiliza un campo de tipo text , pero puede ser utilizado
igualmente con campos de tipo url y email .
Figura 3.13 Nuevo elemento datalist , asociado a un campo de texto
3.2.2ATRIBUTO AUTOFOCUS
El atributo booleano autofocus permite definir que control va a tener el foco cuando la
pgina se haya cargado. Hasta ahora, esto se consegua a travs de JavaScript,
utilizando el mtodo .focus() en un elemento concreto, al cargarse el documento.
Ahora es el navegador el encargado de esta tarea, y puede comportarse de manera ms
inteligente, como no cambiando el foco de un elemento si el usuario ya se encuentra
escribiendo en otro campo (ste era un problema comn con JavaScript).
nicamente debe existir un elemento con este atributo definido en el documento. Desde
el punto de vista de la usabilidad, hay que utilizar este atributo con cuidado. Hay que
utilizarlo nicamente cuando el control que recibe el foco es el elemento principal de la
pgina, como en un buscador, por ejemplo.
3.2.3ATRIBUTO PLACEHOLDER
Una pequea mejora en la usabilidad de los formularios, suele ser colocar un pequeo
texto de ayuda en algunos campos, de manera discreta y que desaparece cuando el
Elementos de formulario | HTML5
usuario introduce algn dato. Como con el resto de elementos, hasta ahora era
necesario utilizar JavaScript para realizar esta tarea, pero el atributo placeholder
resuelve esta tarea.
Es importante recordar que este atributo no sustituye a la etiqueta <label> .
Figura 3.14 Atributo placeholder en un campo de bsqueda
3.2.4ATRIBUTO REQUIRED
Este atributo puede ser utilizado en un <textarea> y en la gran mayora de los elementos
<input> (excepto en los de tipo hidden , image o botones como submit ). Cuando este
atributo est presente, el navegador no permite el envo del formulario si el campo en

concreto est vaco.
Figura 3.15 Atributo required en un campo de texto
3.2.5ATRIBUTO MULTIPLE
Este atributo permite definir que un campo puede admitir varios valores, como URLs o
emails. Un uso muy interesante de este atributo es utilizarlo en conjunto con el campo
<input type="file"> , ya que de esta manera nos permite seleccionar varios
ficheros que podemos enviar al servidor al mismo tiempo.
<input type="file"
multiple="multiple">
3.2.6ATRIBUTO AUTOCOMPLETE
Algunos navegadores suelen incluir alguna funcionalidad de autocompletado en algunos
campos de formulario. A pesar de haber sido introducido recientemente en el estndar
de HTML5, es una caracterstica que lleva mucho tiempo siendo utilizada, concretamente
desde la versin 5 de Internet Explorer.
Este atributo permite controlar el comportamiento del autocompletado en los campos de
texto del formulario (que por defecto est activado).
3.2.7ATRIBUTOS MIN Y MAX

Como hemos visto en el campo <input type="number"> , estos atributos restringen los
valores que pueden ser introducidos; no es posible enviar el formulario con un valor
menor que min o un valor mayor que max . Tambin es posible utilizarlo en otro tipo de
campos como date , para especificar fechas mnimas o mximas.
<input type="date" min="2010-01-01"
max="2010-12-31">
Figura 3.16 Atributos min y max en un campo numrico
3.2.8ATRIBUTO STEP
El atributo step controla los pasos por los que un campo aumenta o disminuye su valor.
Si un usuario quiere introducir un porcentaje, pero queremos que sea en mltiplos de 5,
lo haramos de la siguiente manera:
<input type="range" mix="0" max="100"
step="5">
3.2.9ATRIBUTO PATTERN
Algunos de los tipos de input que hemos visto anteriormente ( email , number , url
...), son realmente expresiones regulares que el navegador evala cuando se
introducen datos. El atributo pattern nos permite definir una expresin regular que el
valor del campo debe cumplir. Por ejemplo, si el usuario debe introducir un nmero
seguido de tres letras maysculas, podramos definir esta expresin regular:
<input pattern="[0-9][A-Z]{3}" name="part"
title="A part number is a digit followed by three uppercase
letters.">
La especificacin indica que la sintaxis de la expresin regular que utilicemos debe

coincidir con la utilizada en JavaScript.
3.2.10
ATRIBUTO FORM
Tradicionalmente, los campos de un formulario van incluidos dentro de la

correspondiente etiqueta <form> . Si por la razn que fuese (principalmente diseo)
un elemento tuviese que mostrarse apartado del resto de elementos del formulario, se
haca casi necesario incluir toda la pgina dentro de una etiqueta <form> .
Con HTML5, los elementos que hasta ahora era obligatorio que estuviesen contenidos
dentro del elemento <form> , pueden colocarse en cualquier lugar de la pgina,
siempre que los relacionemos con el formulario concreto a travs del atributo form y el
id de dicho formulario.
<form id="foo">
<input type="text">
...
</form>
<textarea form="foo"></textarea>
En este caso, el elemento <textarea> se encuentra fuera del formulario, pero realmente
pertenece a l ya que hemos definido el atributo form con el identificador del formulario.
3.3 NUEVOS ELEMENTOS

Adems de los nuevos tipos de input incluidos en la especificacin, se han aadido
nuevos elementos de formulario, entre los que se incluyen los siguientes:
3.3.1 <PROGRESS>
El elemento <progress> es utilizado para representar un avance o progreso en la
ejecucin de una tarea, como puede ser la descarga de un fichero o la ejecucin de una
tarea compleja. Define los siguientes atributos:
max : define el trabajo total a realizar por la tarea, la duracin de un vdeo...
Su valor por defecto es 1.0 .

value : el valor actual (en coma flotante) o estado del progreso. Su valor debe
ser mayor o igual a 0.0 y menor o igual a 1.0 o el valor especificado en max .
position : atributo de slo lectura que representa la posicin actual del elemento
<progress> . Este valor es igual a value / max y -1 si no se puede determinar
la posicin.
Las unidades son arbitrarias, y no se especifican.
<progress value="5"
max="20">5</progress>
Figura 3.17 Nuevo elemento progress
3.3.2 <METER>
El elemento <meter> es muy similar a <progress> (de hecho, se discute la necesidad de
disponer de dos elementos tan similares). Esta nueva etiqueta se usa para representar
escalas de medidas conocidas, como la longitud, masa, peso, uso de disco, entre otras.
Define los siguientes atributos:
value : representa el valor actual. Si no se especifica, se toma como valor el
primer nmero que aparece en el contenido del elemento. Su valor por defecto es
0 .
min : el mnimo valor permitido. El valor por defecto es 0 .
max : el mayor valor permitido. Si no se especifica, su valor por defecto es 1 , a
menos que el valor mnimo definido sea mayor que 1 , en cuyo caso el valor de max
ser igual a min .
low : es considerado el lmite inferior del rango de valores.
max : es considerado el lmite superior del rango de valores.
optimum : representa el valor ptimo del elemento, y se encuentra entre min y max
.
<p>Your score is:
<meter value="91" min="0" max="100"
low="40" high="90" optimum="100">A+</meter>
</p>
Figura 3.18 Nuevo elemento meter

Ejercicio 2
Ver enunciado
NDICE DE CONTENIDOS
Elementos de formulario
Nuevos tipos de input
Nuevos atributos
Nuevos elementos
Qu es Modernizr | HTML5
HTML5
Anterior Siguiente
CAPTULO 4 QU ES MODERNIZR
Modernizr es una librera JavaScript que nos permite conocer la compatibilidad del
navegador con tecnologas HTML5 y CSS3, lo que nos permitir desarrollar sitios web
que se adapten a las capacidades cada navegador.
Este framework es un paquete de deteccin de las capacidades de un navegador relativas
a HTML5 y CSS3, esto es, una librera JavaScript que nos informar cules de las
funcionalidades de estas tecnologas estn disponibles en el navegador del usuario, para
utilizarlas, o no, en cada caso.
Sabiendo que nuestro navegador soporta ciertas capacidades de CSS3 o de HTML5,
podremos utilizarlas con libertad. De modo contrario, si sabemos que un navegador no
es compatible con determinada funcionalidad, podremos implementar variantes que s
soporte y as crear sitios web que se adaptan perfectamente al cliente web de cada
visitante.
Existen dos herramientas principales en Modernizr que se pueden utilizar para detectar
las funcionalidades que estn presentes en un navegador. Una la podemos utilizar a
travs de JavaScript y otra directamente sobre cdigo CSS. En resumen, con Modernizr
podemos detectar las funcionalidades disponibles de CSS3 y HTML5.
4.1 AADIR MODERNIZR A UNA PGINA

El primer paso consistir en descargar el archivo con el cdigo fuente de Modernizr. Se
trata de un archivo con cdigo JavaScript que podemos encontrar en dos variantes:
Development: contiene el cdigo fuente completo, sin comprimir y con
comentarios. Debemos utilizar esta variante nicamente en desarrollo o cuando
queremos acceder a su cdigo, para comprenderlo o ampliarlo.
Production: es recomendable (o ms bien obligatorio) utilizar esta variante cuando
pasamos a un entornos de produccin. Al descargarnos Modernizr, tenemos la
posibilidad de generar una librera nicamente con las funcionalidades que
queremos detectar, lo que nos permitir ahorrarnos una importante cantidad de KB
innecesarios.
Una vez que hemos descargado nuestra librera, debemos incluirla en el cdigo HTML de
la pgina, de la misma manera que incluimos scripts JavaScript.
<script
src="/js/lib/vendor/modernizr-custom.min.js"></script>
Segn podemos leer en la documentacin de Modernizr, se aconseja colocar el

script dentro del HEAD, porque debe cargarse antes del BODY de la pgina, debido
a un componente que quizs utilicemos, para permitir HTML5 en Internet Explorer,
llamado HTML5 Shiv. Adems, se recomienda colocarlo despus de los estilos CSS
para evitar un comportamiento poco deseable llamado FOUC, por el cual puede
mostrarse, por un pequeo espacio de tiempo, la pgina sin los estilos CSS
aplicados.
A partir de este momento tendremos disponibles nuestros scripts de deteccin de
funcionalidades as como una serie de clases CSS que nos ayudarn a aplicar estilos solo
cuando los navegadores los soporten.
4.2 OBJETO MODERNIZR

Cuando tenemos Modernizr cargado en nuestra pgina, se crea automticamente un
objeto JavaScript que tiene una serie de propiedades que nos indican si estn o no
disponibles cada una de las funcionalidades presentes en CSS3 y HTML5. Las
mencionadas propiedades contienen simplemente valores booleanos (true o false) que
podemos consultar para saber si estn o no disponibles las funcionalidades que
deseamos utilizar.
El uso es tan sencillo como se indica a continuacin:
if (Modernizr.boxshadow) {
// Podemos aplicar sombras!
} else {
// La propiedad box-shadow no est
}
disponible
Aqu estamos consultando la propiedad boxshadow del objeto Modernizr. Esta propiedad
nos indica si el navegador es compatible con el atributo box-shadow de CSS3, que sirve
para crear cajas de contenido con sombreado.
Ahora veamos otro ejemplo similar que detectara si est disponible el elemento canvas
del HTML5.
if (Modernizr.canvas) {
// Podemos utilizar canvas!
} else {
// El elemento canvas no est
}
disponible
Este es un simple ejemplo que comprueba si estn disponibles ciertas propiedades y

funcionalidades de CSS3 y HTML5. Lgicamente, tendremos que desarrollar las
funcionalidades que correspondan en cada caso. El listado completo de propiedades del
objeto para la deteccin de funcionalidades HTML5 y CSS3 se puede encontrar en la

propia documentacin de Modernizr.
4.3 CLASES CSS EN MODERNIZR

Cuando tenemos Modernizr cargado en nuestra pgina, ste crea automticamente una
serie de clases que asigna al elemento html del documento. Cada una de estas clases
hace referencia a las caractersticas que soporta el navegador, permitiendo desde CSS
adaptar la interfaz segn las funcionalidades. Un ejemplo de las clases que crea en un
navegador de escritorio moderno:
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation
postmessage websqldatabase indexeddb hashchange history draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textsh
adow opacity cssanimations csscolumns cssgradients cssreflections csstransforms
csstransforms3d csstransitions fontface generatedcontent video audio localstor
age sessionstorage webworkers applicationcache svg inlinesvg smil
svgclippaths"
>
<head>
...
<script src="/js/lib/vendor/modernizr-custom.min.js"></script>
</head>
<body>
<div class="elemento"></div>
</body>
</html>
Todo el proceso es automtico y la creacin de cada una de esas clases se realizar

nicamente en caso de que el navegador sea compatible con cada una de las
caractersticas de CSS3 y HTML5.
La manera de utilizar estas clases es muy sencilla. Pensemos en que queremos aplicar
sombra a un elemento con CSS3 en los navegadores que lo permitan y emular ese
sombreado por medio de estilos CSS clsicos en los navegadores que no soporten el
atributo box-shadow . Lo nico que tenemos que hacer es aplicar los estilos clsicos al
elemento que deseemos:
.elemento{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
Posteriormente, si nuestro navegador es compatible con el atributo box-shadow de CSS3,

Modernizr habr incluido la clase "boxshadow" en el elemento html . Nosotros podemos
utilizar dicha clase CSS para aplicar estilos que sabemos que solo acabarn afectando a
los navegadores que soporten el atributo box-shadow .
.boxshadow .elemento{
border: 1px solid #ccc;
box-shadow: #999 3px 3px 3px;
}
Como se puede ver, hemos sobrescrito la regla CSS para el borde y adems hemos
aplicado la propiedad box-shadow . El efecto conseguido es que los navegadores
modernos, que son capaces de procesar el atributo box-shadow , mostrarn una sombra
CSS3 y los no compatibles con esta propiedad al menos mostrarn unos estilos para los
que s son compatibles.
Ejercicio 3
Ver enunciado
4.4 EL MTODO LOAD()

El mtodo Modernizr.load() es una sencilla manera para cargar libreras slo cuando los
usuarios las necesitan, es decir, cuando una funcionalidad en concreto est (o no)
disponible. Es una buena manera de ahorrar ancho de banda y mejorar un poco ms el
rendimiento de la aplicacin.
Por ejemplo, pensemos en que estamos desarrollando una aplicacin basada en el API de
geolocalizacin de HTML5. Con Modernizr podemos saber si el navegador ofrece soporte
a ese API, mediante la propiedad Modernizr.geolocation . Si deseamos cargar unos
recursos u otros dependiendo de la disponibilidad de esta funcionalidad, el mtodo
Modernizr.load() nos podr ahorrar algo de cdigo fuente y de paso acelerar nuestra
pgina en algunas ocasiones. Con ste mtodo podemos indicar a los navegadores que
no soporten ese API que carguen el polyfill correspondiente, de modo que se pueda
utilizar esa caracterstica de HTML5 en ellos tambin.
La sintaxis de Modernizr.load() es bastante sencilla de comprender. Un ejemplo
sencillo:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
En este ejemplo, se decide que script se debe cargar, en funcin de si la geolocalizacin

esta soportada por el navegador o no. De esta manera, nos ahorramos el tener que
descargar cdigo que el navegador no soporta y por lo tanto, no necesita.

Modernizr.load() es simple y eficaz, pero podemos utilizarlo de manera ms compleja,
como se muestra en el siguiente ejemplo:

// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
// Presentational polyfills
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas &&
Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run your analytics after you've already kicked off all the rest
// of your app.
'post-analytics.js'
]);
Ejercicio 4
Ver enunciado
NDICE DE CONTENIDOS
Qu es Modernizr
Aadir Modernizr a una pgina
Objeto Modernizr
Clases CSS en Modernizr
El mtodo load()
Dataset | HTML5
HTML5
Anterior Siguiente
CAPTULO 5 DATASET
Gracias a HTML5, ahora tenemos la posibilidad de incorporar atributos de datos
personalizados en todos los elementos HTML. Hasta la aparicin de estos atributos, la
manera de lograr un comportamiento similar (asociar datos a elementos), era incluir
estos datos como clases CSS en los elementos, y acceder a ellos a travs de jQuery, de
una manera como la siguiente:
<input class="spaceship shields-5 lives-3
energy-75">
Una vez definidos los "atributos", era necesario acceder a estas clases y realizar un
trabajo extra para extraer su nombre y su valor (convertir energy-75 en energy = 75 ).
Afortunadamente, esto ya no es necesario, gracias a los atributos dataset . Estos
nuevos atributos de datos personalizados constan de dos partes:
Nombre del atributo: el nombre del atributo de datos debe ser de al menos un
carcter de largo y debe tener el prefijo data- . No debe contener letras
maysculas.
Valor del atributo: el valor del atributo puede ser cualquier string o cadena. Con
esta sintaxis, podemos aadir cualquier dato que necesitemos a nuestra aplicacin,
como se muestra a continuacin:
June">Carrots</li>
March">Celery</li>
</ul>
Ahora podemos usar estos datos almacenados en nuestro sitio para crear una experiencia
de usuario ms rica y atractiva. Imagina que cuando un usuario hace clic en un
"vegetable", una nueva capa se abre en el explorador que muestra la separacin de
semillas e instrucciones de siembra. Gracias a los atributos data- que hemos aadido a
nuestros elementos <li> , ahora podemos mostrar esta informacin al instante sin tener
que preocuparnos de hacer ninguna llamada AJAX y sin tener que hacer ninguna
consulta a las bases de datos del servidor.
Prefijar los atributos personalizados con data- asegura que van a ser completamente
ignorados por el agente de usuario. Por lo que al navegador y al usuario final de la web
se refiere, no existe esta informacin.
Custom data attributes are intended to store custom data private to the page or
application, for which there are no more appropriate attributes or elements. These
attributes are not intended for use by software that is independent of the site that
uses the attributes. Every HTML element may have any number of custom data
attributes specified, with any value.
W3C Specification
Esto es, los atributos de datos personalizados estn destinadas a almacenar los datos
personalizados que son de inters exclusivamente para la pgina o la aplicacin, para los
que no hay atributos o elementos ms apropiados. Estos atributos no estn destinados
para un uso externo (a travs de un software independiente al sitio que los utiliza). Cada
elemento HTML puede tener un nmero indefinido de atributos de datos personalizados,
con cualquier valor.
UTILIZACIN DE LOS DATA ATTRIBUTES

Como los atributos de datos personalizados son vlidos en HTML5, pueden ser utilizados
en cualquier navegador que soporte HTML5 doctypes. Estas son algunas de las formas
en las que pueden ser utilizados:
Para almacenar la altura inicial o la opacidad de un elemento que pudiera ser
necesaria en los clculos de animacin JavaScript posteriores.
Para almacenar los parmetros para una pelcula de Flash que se carga a travs de
JavaScript.
Para almacenar los datos estadsticos de una web.
Para almacenar los datos acerca de la salud, municin o vida de un elemento en un
juego JavaScript.
Para poder aadir subttulos a un <video> .
Y stas algunas de las situaciones para las que no se deben usar los data attributes:
Los atributos de datos personalizados no deben usarse si hay un atributo o elemento
existente que es ms adecuado.
stos tampoco tienen la intencin de competir con microformatos. En la
especificacin queda claro que los datos no estn pensados para ser usados
pblicamente. El software externo no debe interactuar con ellos.
La presencia/ausencia de un atributo de datos personalizado no se deben utilizar
como una referencia para los estilos de CSS. Si se hace, podra sugerir que los
datos que se estn almacenando son de importancia inmediata para el usuario y se
deberan marcar de una manera ms accesible.
DATA ATTRIBUTES Y JAVASCRIPT

Ahora que comprendemos el funcionamiento de los atributos de datos personalizados y
cundo se utilizan, deberamos centrarnos en cmo interactuar con ellos utilizando
JavaScript.
Si quisiramos recuperar o actualizar estos atributos utilizando JavaScript, podramos
hacerlo utilizando los mtodos getAttribute y setAttribute .
<div
id="strawberry-plant" data-fruit="12"></div>
<script>
// "Getting" data-attributes using getAttribute
var plant = document.getElementById("strawberry-plant");
var fruitCount = plant.getAttribute("data-fruit"); // fruitCount =
"12"
// "Setting" data-attributes using setAttribute

plant.setAttribute("data-fruit","7"); // Pesky birds
</script>
Este mtodo funcionar en todos los navegadores modernos, pero no es la manera en la

que los data attributes deben ser utilizados. La mejor manera para lograr lo mismo es
mediante el acceso a la propiedad dataset de un elemento. Al utilizar este mtodo, en
lugar de utilizar el nombre del atributo completo, se puede prescindir del prefijo data- y
referirse a los atributos de datos personalizados utilizando directamente los nombres
que se han asignado.
<div
id="sunflower"
data-leaves="47" data-plant-height="2.4m"></div>
<script>
// "Getting" data-attributes using dataset
var plant = document.getElementById("sunflower");
var leaves = plant.dataset.leaves; // leaves = 47;
// "Setting" data-attributes using dataset
var tallness = plant.dataset.plantHeight; // "plant-height" -> "plantHeight"
plant.dataset.plantHeight = "3.6m"; // Cracking fertiliser
</script>
Si en algn momento un atributo data- especfico ya no es necesario, es posible

eliminarlo por completo del elemento DOM estableciendo un valor nulo.
plant.dataset.leaves = null;
En conclusin, los data attributes personalizados son una buena manera de simplificar el
almacenamiento de datos de la aplicacin en las pginas web.

Ejercicio 5
Ver enunciado
NDICE DE CONTENIDOS
Dataset
Utilizacin de los data attributes
data attributes y JavaScript
Multimedia | HTML5
HTML5
Anterior Siguiente
CAPTULO 6 MULTIMEDIA
Hasta hace no mucho tiempo, la tecnologa Flash era el dominador indiscutible en el
campo multimedia de la web. Gracias a esta tecnologa es relativamente sencillo
transmitir audio y vdeo a travs de la red, y realizar animaciones que de otra manera
sera imposible. Prcticamente todos los navegadores tienen incorporado un plugin para
la reproduccin de archivos flash, por lo que la eleccin era clara. Entonces, por qu
una necesidad de cambio?
Hasta ahora, para incluir un elemento multimedia en un documento, se haca uso del
elemento <object> , cuya funcin es incluir un elemento externo genrico. Debido a
la incompatibilidad entre navegadores, se haca tambin necesario el uso del
elemento
<embed> y duplicar una serie de parmetros. El resultado era un cdigo de este estilo:
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true" width="425" height="344"></embed>
</object>
Dejando de lado que el cdigo es poco amigable, en este caso tenemos el problema que
el navegador tiene que transmitir el vdeo a un plugin instalado en el navegador, con la
esperanza que el usuario tenga instalada la versin correcta o tenga permisos para
hacerlo, y muchos otros requisitos que pueden ser necesarios. Los plugins pueden
causar que el navegador o el sistema se comporte de manera inestable, o incluso
podemos crear una inseguridad a usuarios sin conocimientos tcnicos, a los que se pide
que descarguen e instalen un nuevo software.
De alguna manera, podemos estar creando una barrera para ciertos usuarios, algo que
no es para nada deseable.
VDEO
Una de las mayores ventajas del elemento <video> (y <audio> ) de HTML5, es que,
finalmente, estn totalmente integrados en la web. Ya no es necesario depender de
software de terceros, y esto es una gran ventaja.
As que ahora, el elemento <video> pueden personalizarse a travs de estilos CSS. Se

puede cambiar su tamao y animarlo con transiciones CSS, por ejemplo. Podemos
acceder a sus propiedades a travs de JavaScript, transformarlos y mostrarlos en un
<canvas> . Y lo mejor de todo, es que podemos manipularlos con total libertad, ya
que pertenecen al estndar. Ya no se ejecutan en una caja negra a la que no
tenamos acceso.
A pesar de que la etiqueta <video> se presenta como una alternativa de flash, sus
funcionalidades van mucho ms all, como veremos a continuacin.
MARCADO
Para hacer funcionar el vdeo en HTML, es suficiente con incluir el siguiente marcado, de
manera similar que lo hacemos con las imgenes:
<video src="movie.webm"> </video>

Sin embargo, este ejemplo realmente no hace nada por el momento. Lo nico que se
muestra es el primer fotograma de la pelcula. Esto es as porque no le hemos dicho al
navegador que inicie el vdeo, ni le hemos mostrado al usuario ningn tipo de control
para reproducir o pausar el vdeo.
6.1.2AUTOPLAY
Si bien podemos indicar al navegador que reproduzca el vdeo de manera automtica una
vez se haya cargado la pgina, en realidad no es una buena prctica, ya que a muchos
usuarios les parecer una prctica muy intrusiva. Por ejemplo, los usuarios de
dispositivos mviles, probablemente no querrn que el vdeo se reproduzca sin su
autorizacin, ya que se consume ancho de banda sin haberlo permitido explcitamente.
No obstante, la manera de hacerlo es la siguiente:
<video src="movie.webm" autoplay>

6.1.3CONTROLS
Proporcionar controles es aproximadamente un 764% mejor que reproducir el vdeo de
manera automtica. La manera de indicar que se muestren los controles es la siguiente:
<video src="movie.webm" controls>

Naturalmente, y al igual que ocurre con los campos de formulario, los navegadores
muestran los controles de manera diferente, ya que la especificacin no indica qu

aspecto deben tener. De todas maneras, independientemente del aspecto, todos ellos
coinciden en los controles a mostrar: reproducir/pausa, una barra de progreso y un
control de volumen. Normalmente, los navegadores esconden los controles, y solamente
aparecen al mover el ratn sobre el vdeo al utilizar el teclado para controlar el vdeo.
Figura 6.1 Controles de vdeo en Google Chrome
6.1.4POSTER
El atributo poster indica la imagen que el navegador debe mostrar mientras el vdeo se
est descargando, o hasta que el usuario reproduce el vdeo. Esto elimina la necesidad
de mostrar una imagen externa que despus hay que eliminar con JavaScript. Si no se
indica este atributo, el navegador muestra el primer fotograma del vdeo, que puede no
ser representativo del vdeo que se va a reproducir.
Figura 6.2 Fotograma poster del vdeo anterior
6.1.5MUTED
El atributo muted , permite que el elemento multimedia se reproduzca inicialmente sin
sonido, lo que requiere una accin por parte del usuario para recuperar el volumen. En
este ejemplo, el vdeo se reproduce automticamente, pero sin sonido:
<video src="movie.webm" controls autoplay loop

</video>
muted>
6.1.6HEIGHT, WIDTH
Los atributos height y width indican al navegador el tamao del vdeo en pixels. Si no
se indican estas medidas, el navegador utiliza las medidas definidas en el vdeo de
origen, si estn disponibles. De lo contrario, utiliza las medidas definidas en el
fotograma poster, si estn disponibles. Si ninguna de estas medidas est disponible, el
ancho por defecto es de 300 pixels .
Si nicamente se especifica una de las dos medidas, el navegador automticamente
ajusta la medida de la dimensin no proporcionada, conservando la proporcin del vdeo.
Si por el contrario, se especifican las dos medidas, pero no coinciden con la proporcin
del vdeo original, el vdeo no se deforma a estas nuevas dimensiones, sino que se
muestra en formato letterbox manteniendo la proporcin original.
6.1.7LOOP
El atributo loop indica que el vdeo se reproduce de nuevo una vez que ha finalizado su
reproduccin.
6.1.8PRELOAD
Es posible indicar al navegador que comience la descarga del vdeo antes de que el
usuario inicie su reproduccin.
<video src="movie.webm" controls preload>

</video>
Existen tres valores definidos para preload . Si no indicamos uno en concreto, es el

propio navegador el que decide qu hacer. Por ejemplo, en un dispositivo mvil, el
comportamiento por defecto es no realizar ninguna descarga hasta que el usuario lo
haya indicado. Es importante recordar que un desarrollador no puede controlar el
comportamiento de un navegador: preload es un consejo, no un comando. El
navegador tomar una decisin en funcin del dispositivo, las condiciones de la red y
otros factores.
preload=auto : se sugiere al navegador que comience la descarga.
preload=none : se sugiere al navegador que no comience la descarga hasta que
lo indique el usuario.
preload=metadata : este estado sugiere al navegador que cargue los metadatos
(dimensiones, fotogramas, duracin...), pero no descarga nada ms hasta que el

usuario lo indique.
6.1.9SRC
Al igual que en elemento <img> , el atributo src indica la localizacin del recurso, que el
navegador debe reproducir si el navegador soporta el codec o formato especfico. Utilizar
un nico atributo src es nicamente til y viable en entornos totalmente controlados,
donde conocemos el navegador que accede al sitio web y los codecs que soporta.
Sin embargo, como no todos los navegadores pueden reproducir los mismos formatos, en
entornos de produccin debemos especificar ms de una fuente de vdeo.
CODECS, LA NUEVA GUERRA

En los primeros borradores de la especificacin de HTML5, se indicaba que se deba de
ofrecer soporte para al menos dos codecs multimedia: Ogg Vorbis para audio y Ogg
Theora para vdeo. Sin embargo, estos requisitos fueron eliminados despus de que
Apple y Nokia se opusieran, de modo que la especificacin no recomendase ningn
codec en concreto. Esto ha creado una situacin de fragmentacin, con diferentes
navegadores optando por diferentes formatos, basndose en sus ideologas o

convicciones comerciales.
Actualmente, hay dos codecs principales que debemos tener en cuenta: el nuevo formato
WebM, construido sobre el formato VP8 que Google compr y ofrece de manera libre, y
el formato MP4, que contiene el codec propietario H.264.
WEBM
MP4
OGV
Opera
No
Firefox
Chrome
No
IE9+
No
No
Safari
No
No
WebM funciona en IE9+ y Safari si el usuario ha instalado los codec de manera manual.
Por lo tanto, la mejor solucin en estos momentos es ofrecer tanto el formato libre
WebM, como el propietario H.264.
6.2.1MULTIPLES ELEMENTOS <SOURCE>

Para poder ofrecer ambos formatos, primeramente debemos codificarlos por separado.
Existen diversas herramientas y servicios on-line para realizar esta tarea, pero quizs el
ms conocido sea Miro Video Converter. Este software, disponible para Windows y Mac,
nos permite convertir los vdeos en formato Theora, o H.264 (y muchos otros)
optimizados para diferentes tipos de dispositivos como iPhone, Android, PS2, etc.
Una vez dispongamos el vdeo en los distintos formatos, es necesario indicar todas las
localizaciones de estos formatos, para que sea el navegador el que decida que formato
reproducir. Evidentemente, no podemos especificarlos todos dentro del atributo scr ,
por lo que tendremos que hacerlo de manera separada utilizando el elemento <source> .
<video controls>
<source src="leverage-a-synergy.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'>
<source src="leverage-a-synergy.webm" type='video/webm; codecs="vp8,
vorbis
"'>
<p>Your browser doesnt support video.
Please download the video in <a href="leverage-a-synergy.webm">webM</a>
or <a href="leverage-a-synergy.mp4">MP4</a> format.
</p>
</video>
6.2.2MEDIA QUERIES PARA VIDEO

Los ficheros de vdeo tienden a ser pesados, y enviar un vdeo en alta calidad a un
dispositivo con un tamao de pantalla reducido es algo totalmente ineficiente. No hay
ningn inconveniente en hacerlo, pero si comprimimos el vdeo y disminuimos sus
dimensiones, conseguiremos reducir su tamao (en MB ), algo de agradecer en
entornos mviles y que dependen de una conexin de datos.
HTML5 permite utilizar el atributo media en el elemento <source> , ofreciendo la misma
funcionalidad que los Media Queries en CSS3. Por lo tanto, podemos consultar al
navegador por el ancho de la pantalla, la relacin de aspecto, colores, etc, y definir el
video correcto segn las caractersticas del dispositivo.
<video controls>
<source src="hi-res.mp4" media="(min-device-width:
<source src="lo-res.mp4">
</video>
800px)">
6.3 API MULTIMEDIA

Los elementos multimedia <video> y <audio> ofrecen un API JavaScript muy completo y
fcil de utilizar. Los eventos y mtodos de los elementos de audio y vdeo son
exactamente los mismos, su nica diferencia se da en los atributos. A continuacin se
muestra una tabla con el API actual:
Atributos
Mtodos
Eventos
error state
load()
loadstart
error
canPlayType(type)
progress
network state
play()
suspend
src
pause()
abort
currentSrc
addTrack(label, kind, language)
error
networkState
emptied
preload
stalled
buffered
play
ready state
pause
readyState
loadedmetadata
seeking
loadeddata
controls
waiting
controls
playing
volume
canplay
muted
canplaythrough
tracks
seeking
tracks
seeked
playback state
timeupdate
currentTime
ended
startTime
ratechange
muted
paused
defaultPlaybackRate
playbackRate
played
seekable
ended
autoplay
loop
width [video only]
height [video only]
videoWidth [video only]
videoHeight [video only]
poster [video only]
Gracias a JavaScript y a este nuevo API, tenemos el control completo sobre los
elementos multimedia. Esto significa que podemos crearnos nuestros propios controles,
extendiendo los que nos ofrece el navegador. Un simple ejemplo de acceso al API del
elemento video :
video.addEventListener('canplay', function(e) {
this.volume = 0.4;
this.currentTime = 10;
this.play();
}, false);
6.4 FULLSCREEN VIDEO

Flash ha ofrecido un modo de pantalla completa durante muchos aos a la que muchos
navegadores se han resistido. La razn principal es la seguridad; ya que si se fuerza a
una aplicacin o web a funcionar a pantalla completa, el usuario pierde el control del
propio navegador, la barra de tareas y controles estndar del sistema operativo. Puede
que el usuario no sepa despus volver del modo de pantalla completa, o puede haber
problemas de seguridad relacionados, como la simulacin del sistema operativo, peticin
de password, etc.
Este nuevo API establece un nico elemento full-screen. Est pensado para imgenes,
video y juegos que utilizan el elemento canvas . Una vez que un elemento pasa a
pantalla completa, aparece un mensaje de forma temporal para informar al usuario de
que puede presionar la tecla ESC en cualquier momento para volver a la ventana
anterior.
Las principales propiedad, mtodos y estilos son:
element.requestFullScreen() : hace que un elemento individual pase a pantalla
completa.
document.getElementById("myvideo").requestFullScreen().
document.cancelFullScreen() : sale del modo pantalla completa y vuelve a la vista
del documento.
document.fullScreen : devuelve true si el navegador est en pantalla completa.
:full-screen : se trata de una pseudo-clase CSS que se aplica a un
elemento cuando est en modo pantalla completa.

Adems, podemos modificar los estilos del elemento utilizando CSS:
#myelement
{
width: 500px;
}
#myelement:full-screen
{
width: 100%;
}
#myelement:full-screen img
{
width: 100%;
}
6.5 AUDIO
El elemento multimedia audio es muy similar en cuanto a funcionalidad al elemento
video . La principal diferencia existe al indicar el atributo controls o no. Si lo
especificamos, el elemento se mostrar en la pgina juntamente con los controles. Si no

lo hacemos, el audio se reproducir, pero no existir ningn elemento visual en el
documento. Por supuesto, el elemento existir en el DOM y tendremos acceso completo
a su API desde JavaScript.
6.5.1 MARCADO
Para hacer funcionar el audio en HTML, al igual que con el video es suficiente con incluir
lo siguiente:
<audio src="audio.mp3">
</audio>
Los formatos soportados por los navegadores son los siguientes:

MP3
MP4
WAV
OGG
Opera
No
No
Firefox
No
No
Chrome
IE9+
No
No
Safari
No
Por lo tanto, la mejor solucin en estos momentos es ofrecer tanto el formato libre OGG,
como el propietario MP3, marcado de la siguiente manera:
<audio controls>
<source src="audio.ogg"
<source src="audio.mp3"
</audio>
Ejercicio 6
Ver enunciado
NDICE DE CONTENIDOS
Multimedia
Vdeo
type="audio/ogg">
type="audio/mpeg">
Codecs, la nueva guerra

API multimedia
Fullscreen video
Audio
Canvas | HTML5
HTML5
Anterior Siguiente
CAPTULO 7 CANVAS
El elemento canvas proporciona un API para dibujar lneas, formas, imgenes, texto, etc
en 2D, sobre el lienzo que del elemento. Este API ya est siento utilizado de manera
exhaustiva, en la creacin de fondos interactivos, elementos de navegacin,
herramientas de dibujado, juegos o emuladores. ste elemento canvas es uno de los
elementos que cuenta con una de las mayores especificaciones dentro de HTML5. De
hecho, el API de dibujado en 2D se ha separado en un documento a parte.
Un ejemplo de lo que se puede llegar a crear, es la recreacin del programa MS Paint
incluido en Windows 95.
Figura 7.1 MS Paint desarrollado sobre canvas
7.1 ELEMENTOS BSICOS

Para comenzar a utilizar el elemento canvas , debemos colocarlo en el documento.

El marcado es extremadamente sencillo:
<canvas id="tutorial" width="150"
height="150"></canvas>
ste nos recuerda mucho al elemento img , pero sin los atributos src y alt . En
realidad, el elemento canvas solamente tiene los dos atributos mostrados en el ejemplo
anterior: width y height , ambos opcionales y que pueden establecerse mediante las
propiedades DOM. Cuando estos dos atributos no se especifican, el lienzo (canvas)
inicial ser de 300px de ancho por 150px de alto. Este elemento, adems y como
muchos otros, pueden modificarse utilizando CSS. Podemos aplicar cualquier estilo, pero
las reglas afectarn al elemento, no a lo dibujado en el lienzo.
En la actualidad, todos los navegadores son compatibles con el elemento canvas ,
la diferencia entre ellos radica en qu funcionalidades del API han implementado.
Ahora que el elemento canvas est definido en el documento, la manera de dibujar en l
es a travs de JavaScript. El primer paso es obtener el contexto de dibujado. <canvas>
crea una superficie de dibujo de tamao fijo que expone uno o ms contextos de
representacin, que se utilizan para crear y manipular el contenido mostrado. En el
contexto de representacin 2D, (existe otro contexto de representacin en 3D, llamado
WebGL), el canvas est inicialmente en blanco y, para mostrar algo, es necesario el
acceso de un script al contexto de representacin para que pueda dibujar en l. El
mtodo DOM getContext sirve para obtener el contexto de representacin y sus
funciones de dibujo.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
El siguiente ejemplo dibujara dos rectngulos que se cruzan, uno de los cuales tiene
transparencia alfa.
<html>
<head>
<script type="application/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
};
</script>
</head>
<body>
<canvas id="canvas" width="150"
</body>
</html>
height="150"></canvas>
Figura 7.2 Rectngulos semitransparentes en canvas
7.2 DIBUJAR FORMAS

Para empezar a dibujar formas, es necesario hablar primero de la cuadrcula del canvas o
espacio de coordenadas. Normalmente, una unidad en la cuadrcula corresponde a un px
en el lienzo. El punto de origen de esta cuadrcula se coloca en la esquina superior
izquierda (coordenadas(0,0)). Todos los elementos se colocan con relacin a este origen.
Desgraciadamente, canvas solamente admite una forma primitiva: los rectngulos, por lo
que el resto de las formas debern crearse mediante la combinacin de una o ms
funciones.
Existen tres funciones que dibujan un rectngulo en el lienzo:
fillRect(x,y,width,height) : dibuja un rectngulo relleno .
strokeRect(x,y,width,height) : dibuja un contorno rectangular .
clearRect(x,y,width,height) : borra el rea especificada y hace que sea
totalmente transparente.
Cada una de estas funciones tiene los mismos parmetros. x e y especifican la posicin
en el lienzo. width es la anchura y height la altura.
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
La funcin fillRect dibuja un gran cuadrado negro de 100x100 px. La funcin

clearRect elimina un cuadrado de 60x60 px del centro y finalmente el strokeRect
dibuja un contorno rectangular de 50x50 px en el interior del cuadrado despejado.

A diferencia de las funciones de rutas que veremos en la siguiente seccin, las tres
funciones de rectngulo se dibujan inmediatamente en el lienzo.
Figura 7.3 Dibujado de rectngulos en canvas
7.3 RUTAS
Gracias al API 2D, es posible movernos a travs del canvas y dibujar lneas y formas. Las
rutas son utilizadas para dibujar formas (lneas, curvas, polgonos, etc) que de otra
forma no podramos conseguir.
El primer paso para crear una ruta es llamar al mtodo beginPath . Internamente, las
rutas se almacenan como una lista de subrutas (lneas, arcos, etc.) que, en conjunto,
forman una figura. Cada vez que se llama a este mtodo, la lista se pone a cero y
podemos empezar a dibujar nuevas formas. El paso final sera llamar al mtodo
closePath : este mtodo intenta cerrar la forma trazando una lnea recta desde el punto
actual hasta el inicial. Si la forma ya se ha cerrado o hay solo un punto en la lista, esta
funcin no hace nada.
var context = canvas.getContext('2d');
context.beginPath();
//... path drawing operations
context.closePath();
El siguiente paso es dibujar la forma como tal. Para ello, disponemos de algunas
funciones de dibujado de lneas y arcos, que especifican las rutas a dibujar.
7.3.1MTODO LINETO
Para dibujar lneas rectas utilizamos el mtodo lineTo . Este mtodo toma dos
argumentos x e y , que son las coordenadas del punto final de la lnea. El punto
de partida depende de las rutas anteriores.
En el siguiente ejemplo se dibujan dos tringulos, uno relleno y el otro nicamente
trazado. En primer lugar se llama al mtodo beginPath para iniciar una nueva ruta. A
continuacin, utilizamos el mtodo moveTo para mover el punto de partida hasta la
posicin deseada. Finalmente se dibujan dos lneas que forman dos lados del tringulo.
Al llamar al mtodo closePath , ste traza una lnea al origen, completando el
tringulo.
// Tringulo relleno
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.closePath();
ctx.fill();
// Tringulo trazado
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
En ambos casos utilizamos dos funciones de pintado diferentes: stroke y fill . Stroke
se utiliza para dibujar una forma con contorno, mientras que fill se utiliza para pintar
una forma slida.
7.3.2 ARCOS
Para dibujar arcos o crculos se utiliza el mtodo arc (la especificacin tambin describe
el mtodo arcTo ). Este mtodo toma cinco parmetros: x e y , el radio, startAngle y
endAngle (que definen los puntos de inicio y final del arco en radianes) y anticlockwise
(un valor booleano que, cuando tiene valor true dibuja el arco de modo levgiro y
viceversa cuando es false ).
Un ejemplo algo ms complejo que los anteriores utilizando el mtodo arc sera:
for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
ctx.beginPath();
var x var y
= 25+j*50;
var radius
= 25+i*50;
var startAngle var endAngle
= 20;
var anticlockwise
= 0;
//
//
//
//
coordenada x
coordenada y
radio del arco
punto inicial del crculo
= Math.PI+(Math.PI*j)/2; // punto final

= i%2==0 ? false : true;
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
Figura 7.4 Dibujado de arcos en canvas

Nota
Los mtodos arc, bezier y quadratic utilizan radianes, pero si preferimos trabajar
en grados, es necesario convertirlo a radianes. Esta el la operacin que tenemos
que llevar a cabo:
var radians = degrees * Math.PI /
180;
7.3.3MTODO MOVETO
Disponemos de la funcin moveTo , que en realidad, aunque no dibuja nada, podemos
imaginrnosla como 'si levantas un lpiz desde un punto a otro en un papel y lo colocas
en el siguiente'. Esta funcin es utilizada para colocar el punto de partida en otro lugar o
para dibujar rutas inconexas.
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
// crculo exterior
ctx.closePath();
ctx.fill();
ctx.fillStyle = '#FFF';
ctx.beginPath(); ctx.arc(75,75,35,0,Math.PI,false); ctx.closePath();
ctx.fill();
// boca (dextrgiro)
ctx.moveTo(65,65);
ctx.beginPath();
ctx.closePath();
ctx.fill();
// ojo izquierdo
ctx.moveTo(95,65);
ctx.beginPath();
ctx.closePath();
ctx.fill();
// ojo derecho
Figura 7.5 Dibujar una cara sonriente en canvas
7.4 COLORES
Si queremos aplicar colores a una forma, hay dos caractersticas importantes que
podemos utilizar: fillStyle y strokeStyle .
fillStyle = color
strokeStyle = color
strokeStyle se utiliza para configurar el color del contorno de la forma y fillStyle es
para el color de relleno. Color puede ser una cadena que representa un valor de color
CSS, un objeto degradado o un objeto modelo.
// todos ellos configuran fillStyle a 'naranja' (orange)

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
Ejemplo de fillStyle :
function draw() {
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ','
+ Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
Ejemplo de strokeStyle :
function draw() {
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' +
Math.floor(255-42.5*i)
+ ',' + ath.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
7.5 DEGRADADOS Y PATRONES

A travs del contexto, es posible generar degradados lineales, radiales o rellenos a travs
de patrones, que pueden ser utilizados en el mtodo fillStyle del canvas. Los
degradados funcionan de una manera similar a los definidos en CSS3, donde se
especifican el inicio y los pasos de color para el degradado.
Los patrones, por otra parte, permiten definir una imagen como origen y especificar el
patrn de repetido, de nuevo de manera similar a como se realizaba con la propiedad
background-image de CSS. Lo que hace interesante al mtodo createPattern es que
como origen podemos utilizar una imagen, un canvas o un elemento de vdeo.
Un simple gradiente se crea de la siguiente manera:

var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#000');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
El cdigo anterior creamos un degradado lineal al que aplicamos dos pasos de color. Los
argumentos de createLinearGradient son el punto de inicio del degradado ( x1 e y1 )
y el punto final del degradado ( x2 e y2 ). En este caso el degradado comienza en la
esquina superior izquierda, y termina en la esquina inferior izquierda. Utilizamos este
degradado para pintar el fondo de un rectngulo.
Figura 7.6 Degradado lineal

Los degradados radiales son muy similares, con la excepcin que definimos el radio
despus de cada coordenada:
gradient = ctx.createRadialGradient(canvas.width/2,
canvas.height/2,
0,
canvas.width/2,
canvas.height/2,
150);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#000');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.width);
La nica diferencia es la manera en la que se ha creado el degradado. En este ejemplo, el

primer punto del degradado se define en el centro del canvas, con radio cero. El
siguiente punto se define con un radio de 150px pero su origen es el mismo, lo que
produce un degradado circular.
Figura 7.7 Degradado radial

Los patrones son incluso ms sencillos de utilizar. Es necesaria una fuente (como una
imagen, un canvas o un elemento de vdeo) y posteriormente utilizamos esta fuente en
el mtodo createPattern y el resultado de ste en el mtodo fillStyle . La nica
consideracin a tener en cuenta es que, al utilizar elementos de imagen o vdeo, stos
tienen que haber terminado de cargarse para poder utilizarlos. En el siguiente ejemplo,
expandimos el canvas para que ocupe toda la ventana, y cuando se carga la imagen, la
utilizamos como patrn de repeticin.
var img = document.createElement('img');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload = function () {
ctx.fillStyle = ctx.createPattern(this, 'repeat');
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'avatar.jpg';
Figura 7.8 Uso de patrones en canvas
7.6 TRANSPARENCIAS
Adems de dibujar formas opacas en el lienzo, tambin podemos dibujar formas
semitransparentes. Esto se hace mediante el establecimiento de la propiedad
globalAlpha o podramos asignar un color semitransparente al trazo y/o al estilo de
relleno.
globalAlpha = transparency
value
Esta propiedad aplica un valor de transparencia a todas las formas dibujadas en el lienzo
y puede ser til si deseas dibujar un montn de formas en el lienzo con una
transparencia similar; ya que debido a que las propiedades strokeStyle y fillStyle
aceptan valores de color CSS3, podemos utilizar la siguiente notacin para asignarles un
color transparente.
function draw() {
// dibujar fondo
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillStyle = '#09F';
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,150,150);
ctx.fillStyle = '#FFF';
// establecer valor de transparencia
ctx.globalAlpha = 0.2;
// Dibujar crculos semitransparentes
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}
7.7 TRANSFORMACIONES
Al igual que tenemos la posibilidad mover el lpiz por el canvas con el mtodo moveTo
, podemos definir algunas transformaciones como rotacin, escalado, transformacin
y traslacin (similares a las conocidas de CSS3).
7.7.1MTODO TRANSLATE
ste mtodo traslada el centro de coordenadas desde su posicin por defecto (0, 0) a la
posicin indicada.
ctx.translate(x, y);
7.7.2MTODO ROTATE
ste mtodo inicia la rotacin desde su posicin por defecto (0,0). Si se rota el canvas
desde esta posicin, el contenido podra desaparecer por los lmites del lienzo, por lo que
es necesario definir un nuevo origen para la rotacin, dependiendo del resultado
deseado.
ctx.rotate(angle);
ste mtodo slo precisa tomar un parmetro, que es el ngulo de rotacin que se
aplicar al marco. Este parmetro es una rotacin dextrgira medida en radianes.
function draw()
{ ctx.translate(75,75
); for (i=1;i<6;i++){
// Desplazarse or los anillos (desde dentro hacia fuera)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (j=0;j<i*6;j++){
// dibujar puntos individuales
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
}
7.7.3MTODO SCALE
El siguiente mtodo de transformacin es el escalado. Se utiliza para aumentar o
disminuir las unidades del tamao de nuestro marco. Este mtodo puede usarse para
dibujar formas ampliadas o reducidas.
ctx.scale(x, y);
x e y definen el factor de escala en la direccin horizontal y vertical respectivamente.
Los valores menores que 1.0 reducen el tamao de la unidad y los valores mayores que
1.0 aumentan el tamao de la unidad. Por defecto, una unidad en el rea de trabajo
equivale exactamente a un pxel. Si aplicamos, por ejemplo, un factor de escalado de
0.5, la unidad resultante ser 0.5 pxeles, de manera que las formas se dibujarn a
mitad de su tamao.
7.8 ANIMACIONES
Como estamos utilizando scripts para controlar los elementos canvas , resulta muy fcil
hacer animaciones (interactivas). Sin embargo, el elemento canvas no fue diseado
para ser utilizado de esta manera (a diferencia de flash) por lo que existen limitaciones.
Probablemente, la mayor limitacin es que una vez que se dibuja una forma, se queda de
esa manera. Si necesitamos moverla, tenemos que volver a dibujar dicha forma y todo
lo que se dibuj anteriormente.
Los pasos bsicos a seguir son los siguientes:
1. Borrar el lienzo: a menos que las formas que se dibujen llenen el lienzo completo
(por ejemplo, una imagen de fondo), se necesitar borrar cualquier forma que se
haya dibujado con anterioridad. La forma ms sencilla de hacerlo es utilizando el
mtodo clearRect .
2. Guardar el estado de canvas : si se va a modificar alguna configuracin
(estilos, transformaciones) que afectan al estado de canvas .
3. Dibujar formas animadas: representacin del marco.
4. Restaurar el estado de canvas: restaurar el estado antes de dibujar un nuevo
marco.
7.8.1 CONTROL
Las formas se dibujan en el lienzo mediante el uso de los mtodos canvas directamente
o llamando a funciones personalizadas. Necesitamos una manera de ejecutar nuestras
funciones de dibujo en un perodo de tiempo. Hay dos formas de controlar una
animacin como sta. En primer lugar est las funciones setInterval y setTimeout ,
que se pueden utilizar para llamar a una funcin especfica durante un perodo
determinado de tiempo.
setInterval (animateShape, 500);
setTimeout (animateShape, 500);
El segundo mtodo que podemos utilizar para controlar una animacin es el input del
usuario. Si quisiramos hacer un juego, podramos utilizar los eventos de teclado o de
ratn para controlar la animacin. Al establecer EventListeners , capturamos cualquier
interaccin del usuario y ejecutamos nuestras funciones de animacin.
Ejercicio 7
Ver enunciado
NDICE DE CONTENIDOS
Canvas
Elementos bsicos
Dibujar formas
Rutas
Colores
Degradados y patrones
Transparencias
Transformaciones
Animaciones
Almacenamiento local | HTML5
HTML5
Anterior Siguiente
CAPTULO 8 ALMACENAMIENTO LOCAL

El almacenamiento de datos es fundamental en cualquier aplicacin web o de escritorio.
Hasta ahora, el almacenamiento de datos en la web se realizaba en el servidor, y era
necesario algn tipo de conexin con el cliente para trabajar con estos datos. Con
HTML5 disponemos de tres tecnologas que permiten que las aplicaciones almacenen
datos en los dispositivos cliente. Segn las necesidades de la aplicacin, la informacin
puede sincronizarse tambin con el servidor o permanecer siempre en el cliente. Estas
son las posibilidades que tenemos:
Web Storage: http://www.w3.org/TR/webstorage/. Es el sistema de
almacenamiento ms simple, ya que los datos se almacenan en parejas de
clave/valor. Ampliamente soportado por todos los navegadores.
Web SQL Database: http://www.w3.org/TR/webdatabase/. Sistema de
almacenamiento basado en SQL. La especificacin indica que no va a ser mantenido
en el futuro, pero actualmente su uso est muy extendido y es soportado por
Chrome, Safari y Opera.
IndexedDB: http://www.w3.org/TR/Indexeddb/. Sistema de almacenamiento
basado en objetos. Actualmente soportado por Chrome, Firefox e Internet Explorer.
8.1 WEB STORAGE

Este API de almacenamiento ofrece dos posibilidades para guardar datos en el
navegador: sessionStorage y localStorage . El primero mantiene los datos durante la
sesin actual (mientras la ventana o pestaa se mantenga abierta), mientras que el
segundo almacena los datos hasta que sean eliminados explcitamente por la aplicacin
o el usuario. Ambos modos de almacenamiento se encuentran relacionados con el
dominio que los ha creado.
sessionStorage : objeto global que mantiene un rea de almacenamiento
disponible a lo largo de la duracin de la sesin de la ventana o pestaa. La sesin

persiste mientras que la ventana permanezca abierta y sobrevive a recargas de
pgina. Si se abre una nueva pgina en una pestaa o ventana, una nueva sesin
es inicializada, por lo que no es posible acceder a los datos de otra sesin.
localStorage : el almacenamiento local por su parte, funciona de la misma forma
que el almacenamiento de sesin, con la excepcin de que son capaces de

almacenar los datos por dominio y persistir ms all de la sesin actual, aunque el
navegador se cierre o el dispositivo se reinicie.
Nota
Cuando hacemos referencia la ventana o pestaa, nos estamos refiriendo al objeto
window. Una nueva ventana abierta utilizando el mtodo window.open(), pertenece
a la misma sesin.
Tanto sessionStorage como localStorage forman parte del Web Storage, por lo que
comparten el mismo API:
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter DOMString getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
deleter void removeItem(in DOMString key);
void clear();
Este API hace que sea muy sencillo acceder a los datos. El mtodo setItem almacena el
valor, y el mtodo getItem lo obtiene, como se muestra a continuacin:
sessionStorage.setItem('twitter', '@starkyhach');
alert( sessionStorage.getItem('twitter') ); // muestra
@starkyhach
Es importante darse cuenta, que tal y como se indica en el API, el mtodo getItem
siempre devuelve un String, por lo que si intentamos almacenar un objeto, el valor
devuelto ser "[Object object]". El mismo problema ocurre con los nmero, por lo que es
importante tenerlo en cuenta para evitar posibles errores. Por ejemplo:
sessionStorage.setItem('total', 120);
function calcularCosteEnvio(envio) {
return sessionStorage.getItem('total') +
}
envio;
alert(calcularCosteEnvio(25));
En este caso, esperamos que el coste total (120) se almacene como nmero, y al aadir
el coste del envo, el resultado sea 145. Pero como sessionStorage devuelve un String,
el resultado no es el esperado sino 12025.
ELIMINANDO DATOS
Disponemos de tres formas de eliminar datos del almacenamiento local: utilizando
delete , removeItem y clear . El mtodo removeItem toma como parmetro el nombre
de la clave a eliminar (el mismo que utilizamos en getItem y setItem ), para eliminar un
tem en particular. Por su parte, el mtodo clear , elimina todas las entradas del objeto.
sessionStorage.setItem('twitter',
'@starkyhach');
sessionStorage.setItem('flickr', 'starky.hach');
alert( sessionStorage.length ); sessionStorage.removeItem('twitter'); alert( sessionStorage.length
); se
// Mue
alert( sessionStorage.length );
// Mue
// Mue
8.1.2 ALMACENANDO ALGO MS QUE STRINGS

Una manera de almacenar objetos es utilizando JSON. Como la representacin de los
objetos en JSON puede realizarse a travs de texto, podemos almacenar estas cadenas
de texto y recuperarlas posteriormente para convertirlas en objetos.
var videoDetails = {
title : 'Matrix',
author : ['Andy Wachowski', 'Larry Wachowski'],
description : 'Wake up Neo, the Matrix has you...',
rating: '-2'
};
sessionStorage.setItem('videoDetails', JSON.stringify(videoDetails) );
var videoDetails = JSON.parse(sessionStorage.getItem('videoDetails');
8.1.3 EVENTOS DE ALMACENAMIENTO

Una de las funcionalidades ms interesantes de Web Storage es que incluye una serie de
eventos que nos indican cundo se ha producido un cambio en los datos almacenados.
Estos eventos no se lanzan en la ventana actual donde se han producido los cambios,
sino en el resto de ventadas donde los datos pueden verse afectados.
Esto quiere decir que los eventos para sessionStorage son lanzados en los iframe
dentro de la misma pgina, o en las ventanas abiertas con window.open() . Para
localStorage , todas las ventanas abiertas con el mismo origen (protocolo + host +
puerto) reciben los eventos.

Cuando se lanzan los eventos, stos contienen toda la informacin asociada con el
cambio de datos:
StorageEvent
readonly
readonly
readonly
readonly
readonly
};
{
DOMString key;
any oldValue;
any newValue;
DOMString url;
Storage storageArea;
storageArea hace referencia al objeto sessionStorage o localStorage . Estos eventos se
lanzan dentro del objeto window :

function handleStorage(event) {
event = event || window.event; // support IE8
if (event.newValue === null) { // it was removed
// Do somthing
} else {
// Do somthing else
}
}
window.addEventListener('storage', handleStorage, false);
window.attachEvent('storage', handleStorage);
Ejercicio 8
Ver enunciado
8.2 WEB SQL

Web SQL es otra manera de almacenar y acceder a datos en el dispositivo. Realmente,
no forma parte de la especificacin de HTML5, pero es ampliamente utilizado para el
desarrollo de aplicaciones web. Como su nombre indica, es una base de datos basada en
SQL, ms concretamente en SQLite. La utilizacin del API se resume en tres simples
mtodos:
openDatabase : abrir (o crear y abrir) una base de datos en el navegador del cliente.
transaction : iniciar una transaccin.
executeSql : ejecutar una sentencia SQL.
Como en la mayora de librearas de JavaScript, el API de Web SQL realiza llamadas

diferidas a funciones, una vez completadas las operaciones.
transaction.executeSql(sql, [], function ()
// my executed code lives here
});
Debido a la naturaleza de estas llamadas, significa que el API de Web SQL es asncrono,
por lo que es necesario tener cuidado con el orden en el que se ejecutan las sentencias
SQL. Sin embargo, las sentencias SQL se encolan y son ejecutadas en orden, por lo que
podemos estar tranquilos en ese sentido: podemos crear tablas y tener la seguridad que
van a ser creadas antes de acceder a los datos.
8.2.1 CREANDO Y ABRIENDO LA BD

El uso clsico de la API implica abrir (o crear) la base de datos y ejecutar algunas
Almacenamiento local | HTML5
sentencias SQL. Al abrir la base de datos por primera vez, sta es creada
automticamente. Es necesario especificar el nmero de versin de base de datos con el
que se desea trabajar, y si no especificamos correctamente ste nmero de versin, es
posible que provoquemos un error del tipo INVALID_STATE_ERROR .
var db = openDatabase('mydb', '1.0', 'My first database', 2 * 1024 *
1024);
La ltima versin de la especificacin incluye un quinto argumento en la funcin

openDatabase , pero no es soportado por muchos navegadores. Los valores que pasamos
a esta funcin son los siguientes:
1. El nombre de la base de datos.
2. El nmero de versin de base de datos con el que deseamos trabajar.
3. Un texto descriptivo de la base de datos.
4. Tamao estimado de la base de datos, en bytes .
El valor de retorno de esta funcin es un objeto que dispone de un mtodo transaction
, a travs del cual vamos a ejecutar las sentencias SQL.
8.2.2 TRANSACCIONES
Ahora que tenemos la base de datos abierta, podemos crear transacciones para ejecutar
nuestras sentencias SQL. La idea de utilizar transacciones, en lugar de ejecutar las
sentencias directamente, es la posibilidad de realizar rollback. Esto quiere decir, que si la
transaccin falla por algn motivo, se vuelve al estado inicial, como si nada hubiese
pasado.
db.transaction(function (tx)
{ tx.executeSql('DROP TABLE
foo');
// known to fail - so should rollback the DROP statement
tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "foobar")');
}, function (err)
{ alert(err.message
);
Una vez listo el objeto transaccin ( tx en el ejemplo), podemos ejecutar sentencias SQL.
8.2.3 EJECUTAR SENTENCIAS SQL

El mtodo executeSql es utilizado tanto para sentencias de escritura como de lectura.
Incluye proteccin contra ataques de inyeccin SQL y proporciona llamadas a mtodos
(callback) para procesar los resultados devueltos por una consulta SQL.
Su sintaxis es la siguiente:
db.transaction(function (tx) {
tx.executeSql(sqlStatement, arguments, callback,
});
errorCallback);
Donde:
1. sqlStatement : indica la sentencia SQL a ejecutar. Como hemos dicho, puede ser
cualquier tipo de sentencia; creacin de tabla, insertar un registro, realizar una
consulta, etc.
2. arguments : corresponde con un array de argumentos que pasamos a la sentencia
SQL. Es recomendable pasar los argumentos a la sentencia de esta manera, ya que
el propio mtodo se ocupa de prevenir inyecciones SQL.
3. callback : funcin a ejecutar cuando la transaccin se ha realizado de
manera correcta. Toma como parmetros la propia transaccin y el resultado
de la transaccin.
4. erroCallback : funcin a ejecutar cuando la transaccin se ha producido un error
en la sentencia SQL. Toma como parmetros la propia transaccin y el error
producido.
Un ejemplo de seleccin de registros sera el siguiente:
tx.executeSql('SELECT * FROM foo WHERE id = ?', [5],
function callback(tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
},
function errorCallback(tx, error) {
alert(error.message);
}
);
});
La funcin de callback recibe como argumentos la transaccin (de nuevo) y un objeto

que contiene los resultados. Este objeto contiene una propiedad rows , donde
rows.item(i) contiene la representacin de la fila concreta. Si nuestra tabla contiene un
campo que se llama nombre, podemos acceder a dicho campo de la siguiente manera:
results.rows.item(i).nombre
8.2.4 CREAR TABLAS
La primera tarea a realizar cuando trabajamos con una base de datos es crear las tablas
necesarias para almacenar los datos. Como hemos comentado antes, este proceso se
realiza a travs de una sentencia SQL, dentro de una transaccin. Vamos a crear una
base de datos para almacenar tweets que posteriormente obtendremos de internet:
db = openDatabase('tweetdb', '1.0', 'All my tweets', 2 * 1024 * 1024);
tx.executeSql('CREATE TABLE IF NOT EXISTS tweets(id, user, date, text)',
, getTweets);
});
[]
8.2.5 INSERTAR DATOS

Una vez creada la tabla, el siguiente paso es insertar los datos correspondientes. Vamos
a suponer que hemos realizado una peticin AJAX a la API de Twitter, que nos ha
devuelto una serie de tweets que queremos almacenar en nuestra base de datos. La
funcin getTweets tendra este aspecto:
function getTweets() {
var tweets = $.ajax({...});
$.each(tweets, function(tweet)
{ db.transaction(function (tx)
{
var time = (new Date(Date.parse(tweet.created_at))).getTime();
tx.executeSql('INSERT INTO tweets (id, user, date, text) VALUES (?,
?, ?, ?)',
[tweet.id, tweet.from_user, time / 1000, tweet.text])
;
});
});
}
Nota
Insertando cada tweet en una nueva transaccin, nos aseguramos que si se
produce un error en alguna de ellas (ya exista el tweet), se van a seguir
ejecutando el resto transacciones.
8.2.6 OBTENER DATOS

Finalmente, una vez que los datos se encuentran almacenados en la base de datos, slo
nos queda consultarlos. Como siempre, ejecutamos las sentencia SQL dentro de una
transaccin y proveemos la funcin que procesar los datos obtenidos:
tx.executeSql('SELECT * FROM tweets WHERE date > ?', [time],
function(tx, results) {
var html = [], len = results.rows.length;
for (var i = 0; i < len; i++) {

html.push('<li>' + results.rows.item(i).text +
'</l
i>');
}
tweetEl.innerHTML =
html.join('');
});
});
Ejercicio 9
Ver enunciado
8.3 INDEXEDDB
IndexedDB no es una base de datos relacional, sino que se podra llamar un almacn de
objetos ya que en la base de datos que creemos, existen almacenes y en su interior

aadimos objetos (como el siguiente):
{
id:21992,
nombre: "Memoria RAM"
}
En IndexedDB , al igual que en Web SQL, al abrir una base de datos debemos indicar su
nombre y la versin concreta. Posteriormente debemos crear los almacenes de objetos,
que es muy parecido a un archivador con ndices, que nos permite encontrar de una
manera muy rpida el objeto que buscamos. Una vez el almacn est listo, podemos
almacenar cualquier tipo de objeto con el ndice que definamos. No importa el tipo de
objeto que almacenemos, ni tienen que tener las mismas propiedades.
8.3.1 CREANDO Y ABRIENDO LA BD

De forma similar a como hacamos en Web SQL, vamos a abrir una base de datos, y
trabajar directamente con el objeto que nos devuelve. De nuevo, al igual que en Web
SQL, las peticiones a la base de datos se realizan de manera asncrona.
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozInde
xedDB;
if ('webkitIndexedDB' in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
var request = indexedDB.open('videos');
request.onerror = function () {
console.log('failed to open indexedDB');
};
request.onsuccess = function (event) {
// handle version control
// then create a new object store
};
Ahora que la base de datos esta abierta (y asumiendo que no hay errores), se ejecutar
el evento onsuccess . Antes de poder crear almacenes de objetos, tenemos que tener
en cuenta los siguiente:
Necesitamos un manejador para poder realizar transacciones de insercin y
obtencin de datos.
Hay que especificar la versin de la base de datos. Si no existe una versin definida,
significa que la base de datos no est an creada.
El mtodo onsuccess recibe como parmetro un evento, al igual que lo hace cualquier
otro mtodo escuchador de eventos. Dentro de este objeto, encontramos una propiedad
llamada target , y dentro de sta otra propiedad llamada result , que contiene el
resultado de la operacin. En este caso especfico, event.target.result contiene la
base de datos que acabamos de abrir.
var db = null;
var request = indexedDB.open('videos');
// cache a copy of the database handle for the future
db = event.target.result;
// then create a new object store
};
request.onerror = function (event) {
alert('Something failed: ' + event.target.message);
};
Es importante indicar que en IndexedDB , los errores que se producen escalan hasta
el objeto request . Esto quiere decir, que si un error ocurre en cualquier peticin
(por ejemplo una consulta de datos), en este caso mostrara una alerta con el error.
8.3.2 CONTROL DE VERSIONES

El primer paso tras abrir la base de datos es realizar un control de versiones de la base
de datos. Podemos utilizar cualquier cadena de caracteres como identificador de la
versin, pero lo lgico es seguir un patrn tpico de software, como '0.1', '0.2', etc. Al
abrir la base de datos, debemos comprobar si la versin actual de la base de datos
coincide con la ltima versin de la aplicacin. Si son diferentes, tendremos que realizar
la actualizacin.
var db = null, version = '0.1';

// cache a copy of the database handle for the future
db = event.target.result;
if (version != db.version) {
// set the version to 0.1
var verRequest = db.setVersion(version);
verRequest.onsuccess = function (event) {
// now we're ready to create the object store!
};
verRequest.onerror = function () {
alert('unable to set the version :' + version);
};
}
};
8.3.3 CREAR ALMACENES DE OBJETOS

Tanto la primera vez que creamos nuestra base de datos, como a la hora de actualizarla,
debemos crear los almacenes de objetos correspondientes.
var verRequest = db.setVersion(version);
verRequest.onsuccess = function (event) {
var store = db.createObjectStore('blockbusters',
{ keyPath: 'title',
autoIncrement: false
});
// at this point we would notify our
// that the object store is ready
code
};
Para este ejemplo, hemos creado un nico almacn de objetos, pero lo normal es
disponer de varios y que puedan relacionarse entre ellos. El mtodo createObjectStore
admite dos parmetros:
name : indica el nombre del almacn de objetos.
optionalParameters : este parmetro permite definir cual va a ser el ndice de los
objetos, a travs del cual se van a realizar las bsquedas y que por tanto debe ser
nico. Si no deseamos que este ndice se incremente automticamente al aadir
nuevos objetos, tambin lo podemos indicar aqu. Al aadir un nuevo objeto, es
importante asegurarnos que disponga de la propiedad definida como ndice, y que
su valor sea nico.

Es posible que deseemos aadir nuevos ndices a nuestros objetos, con el fin de poder
realizar bsquedas posteriormente. Podemos realizarlo de la siguiente manera:
store.createIndex('director', 'director', { unique: false
});
Hemos aadido un nuevo ndice al almacn, llamado director (primer argumento), y

hemos indicado que el nombre de la propiedad del objeto es director (segundo
argumento), a travs del cual vamos a realizar las bsquedas. Evidentemente, varias
pelculas pueden tener el mismo director, por lo que este valor no puede ser nico. De
esta manera, podemos almacenar objetos de este tipo:
{
title: "Belly Dance Bruce - Final Strike",
date: (new Date).getTime(), // released TODAY!
director: "Bruce Awesome",
length: 169, // in minutes
rating: 10,
cover: "/images/wobble.jpg"
}
8.3.4 AADIR OBJETOS AL ALMACN

Disponemos de dos mtodos para aadir objetos al almacn: add y put .
add : aade un nuevo objeto al almacn. Es obligatorio que los nuevos datos
no existan en el almacn, de otro modo esto provocara un error de tipo

ConstrainError .
put : en cambio, ste mtodo actualiza el valor del objeto si existe, o lo aade si
no existe en el almacn.
var video = {
title: "Belly Dance Bruce - Final Strike",
date: (new Date).getTime(), // released TODAY!
director: "Bruce Awesome",
length: 169, // in minutes
rating: 10,
cover: "/images/wobble.jpg"
};
var myIDBTransaction =
window.IDBTransaction
|| window.webkitIDBTransaction
|| { READ_WRITE: 'readwrite' };
var transaction =
db.transaction(['blockbusters'], myIDBTransaction.READ_WRITE);
var store = transaction.objectStore('blockbusters');
// var request = store.add(video);
var request = store.put(video);
Analizemos las tres ltimas lneas, utilizadas para aadir un nuevo objeto al almacn:
1. transaction = db.transaction(['blockbusters'], READ_WRITE) : creamos una
nueva transaccin de lectura/escritura, sobre los almacenes indicados (en este caso
slo 'blockbusters'), pero podran ser varios si es necesario. Si no necesitamos que
la transaccin sea de escritura, podemos indicarlo con la propiedad
IDBTransaction.READ_ONLY. .
2. store = transaction.objectStore('blockbusters') : obtenemos el almacn de
objetos sobre el que queremos realizar las operaciones, que debe ser uno de los
indicados en la transaccin. Con la referencia a este objeto, podemos ejecutar las
operaciones de add , put , get , delete , etc.
3. request
store.put(video)
: insertamos el objeto en el almacn. Si la
transaccin se ha realizado correctamente, se llamar al evento onsuccess ,

mientras que si ha ocurrido un error, se llamar a onerror .
8.3.5 OBTENER OBJETOS DEL ALMACN

El proceso para acceder a los objetos almacenados es muy similar a lo realizado para
insertarlos. Seguimos necesitando una transaccin, pero en este caso de slo lectura. El
proceso es el siguiente:
|| { READ: 'read' };
var key = "Belly Dance Bruce - Final Strike";
var transaction =
db.transaction(['blockbusters'], myIDBTransaction.READ);
// var request = store.add(video);
var request = store.get(key);
En este caso, lo importante es que la clave (la variable key ) que hemos pasado al
mtodo get , buscar el valor que contiene en la propiedad que hemos definido
como keyPath al crear el almacn de objetos.
** Nota **
El mtodo get produce el mismo resultado tanto si el objeto existe en el almacn

como si no, pero con un valor undefined. Para evitar esta situacin, es
recomendable utilizar el mtodo openCursor() con la misma clave. Si el objeto no
existe, el valor del resultado es null.
Para obtener todos los objetos de un almacn, en lugar de un nico objeto, debemos
hacer uso del mtodo openCursor . Este mtodo acepta como parmetro un objeto
de tipo IDBKeyRange, que podemos utilizar para acotar la bsqueda.
var transaction =
db.transaction(['blockbusters'], myIDBTransaction.READ);
var data = [];
var request = store.openCursor();
var cursor = event.target.result;
if (cursor) {
// value is the stored object
data.push(cursor.value);
// get the next object
cursor.continue();
} else {
// weve got all the data now, call
// a success callback and pass the
// data object in.
}
};
En ese ejemplo, abrimos el almacn de objetos al igual que lo hemos venido haciendo,
pero en lugar de obtener un nico objeto con el mtodo get , abrimos un cursor. Esto
nos permite iterar por los objetos devueltos por el cursor, todos como es este caso, o los
que cumplan una condicin concreta. El objeto en concreto al que apunta el cursor en la
iteracin actual se encuentra almacenado en su propiedad cursor.value . Avanzar en el
cursor, para obtener el siguiente objeto, es tan sencillo como llamar al mtodo
continue() del cursor, lo que provocar una nueva llamada al evento onsuccess , siendo
nosotros los que tenemos que controlar si el cursor ya no apunta a ningn objeto
( cursor === false ).
8.3.6 ELIMINAR OBJETOS DEL ALMACN

La ltima operacin a realizar sobre el almacn de objetos, es eliminar datos existentes.
De nuevo, el proceso es prcticamente el mismo que para obtener datos:
|| { READ_WRITE: 'readwrite' };
var transaction =
db.transaction(['blockbusters'], myIDBTransaction.READ_WRITE);
var request = store.delete(key);
Si queremos eliminar todos los objetos de un almacn, podemos utilizar el mtodo

clear() , siguiente el mismo proceso visto anteriormente.
var request = store.clear();
Ejercicio 10
Ver enunciado
NDICE DE CONTENIDOS
Almacenamiento local
Web Storage
Web SQL
IndexedDB
Sin conexin | HTML5
HTML5
Anterior Siguiente
CAPTULO 9 SIN CONEXIN

Si bien todos los navegadores tienen mecanismos de almacenamiento en cach, estos
sistemas no son fiables y no siempre funcionan como debieran. HTML5 permite resolver
algunas de las molestias asociadas al trabajo sin conexin mediante la interfaz
ApplicationCache .
Algunas de las ventajas que conlleva el uso de sta cach para una aplicacin son:
Navegacin sin conexin: los usuarios pueden explorar todo el sitio web sin
conexin.
Velocidad: los recursos almacenados en cach son locales y, por tanto, se cargan
ms rpido.
Reduccin de carga del servidor: el navegador solo descarga recursos del servidor
que han cambiado.
Para poder trabajar sin conexin, una aplicacin nicamente necesita de un archivo de
manifiesto, el cual indica al navegador que ficheros debe almacenar en la cach local. El
contenido del manifiesto puede ser tan simple como un listado de archivos. Una vez que
el navegador ha descargado y almacenado los ficheros (html, CSS, imgenes,
javascripts, etc), el navegador hace uso de estos ficheros, incluso cuando el usuario
actualiza la pgina en su navegador.
Adems de especificar qu ficheros van a ser almacenados en la cach, es posible indicar
cules no tienen que serlo, y por tanto obligar al navegador a realizar una peticin de
dichos ficheros al servidor. Finalmente, si intentamos acceder a un fichero no
almacenado en local, y no disponemos de conexin, podemos mostrar un recurso que
previamente hemos almacenado en la cach.
9.1 EL ARCHIVO DE MANIFIESTO DE CACH

El archivo de manifiesto es lo que le indica al navegador cuando y qu tiene que
almacenar en su cach, y qu tiene que traerse de la Web. Indicar al navegador el
manifiesto que tiene que utilizar es muy sencillo:
<!DOCTYPE html>
<html lang="en" manifest="/example.appcache">
...
</html>
El atributo manifest debe estar incluido en todas las pginas de nuestra aplicacin, que
queramos que se almacenen en la cach. Es decir, adems de los ficheros indicados en
el manifiesto, la propia pgina que incluye el manifiesto es almacenada en la cach. El
navegador no almacenar en cach ninguna pgina que no contenga el atributo
manifest (a menos que esa pgina aparezca explcitamente en el propio archivo de
manifiesto).
El atributo manifest puede sealar a una URL absoluta o a una ruta relativa, pero las
URL absolutas deben tener el mismo origen que la aplicacin web. Un archivo de
manifiesto puede tener cualquier extensin, pero se debe mostrar con el tipo MIME
correcto:
<html manifest="http://www.example.com/example.mf">
...
</html>
El tipo MIME con el que se deben mostrar los archivos de manifiesto es text/cachemanifest . Es posible que se tenga que aadir un tipo de archivo personalizado a la
configuracin de .htaccess o de tu servidor web.
9.1.1 ESTRUCTURA
Ejemplo de un archivo de manifiesto sencillo:
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
El archivo de manifiesto del ejemplo permite almacenar en cach los cuatro archivos
especificados. El formato del manifiesto es importante:
La cadena CACHE MANIFEST debe aparecer en la primera lnea y es obligatoria.
Dentro del manifiesto, los ficheros son listados dentro de categoras, tambin
conocidos como namespaces . Si no se especifica ninguna categora, todos
los ficheros pertenecen a la categora CACHE .
Un ejemplo ms complejo sera:
CACHE MANIFEST
# 2010-06-18:v2
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html
Un archivo de manifiesto puede incluir tres categoras: CACHE , NETWORK y FALLBACK .

CACHE : esta es la seccin predeterminada para las entradas. Los archivos incluidos
en esta seccin (o inmediatamente despus de CACHE MANIFEST ) se almacenarn

en cach explcitamente despus de descargarse por primera vez.
NETWORK : los archivos incluidos en esta seccin son recursos permitidos que
requieren conexin al servidor. En todas las solicitudes enviadas a estos recursos se

omite la cach, incluso si el usuario est trabajando sin conexin. Se pueden utilizar
caracteres comodn.
FALLBACK : se trata de una seccin opcional en la que se especifican pginas
alternativas en caso de no poder acceder a un recurso. La primera URI corresponde

al recurso y la segunda, a la pgina alternativa. Ambas URI deben estar
relacionadas y tener el mismo origen que el archivo de manifiesto. Se pueden
utilizar caracteres comodn.
CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
index.html
css/style.css
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources require the user to be
online.
NETWORK:
*
# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png
Nota
Las peticiones de recursos que den como resultado un error 404 (por ejemplo una
imagen no encontrada), mostrarn en este caso el fichero offline.html
9.2 CMO SERVIR EL MANIFIESTO

Como hemos comentado anteriormente, el manifiesto puede tener cualquier extensin
(aunque se recomienda que sea .appcache), pero lo importante es que el servidor enve
el fichero con el tipo MIME correcto. Si utilizamos Apache, es tan sencillo como aadir la
siguiente lnea al fichero mime.types :
text/cache-manifest appcache
Esta configuracin depender del servidor web que utilicemos. De todas maneras, para
asegurarnos que el servidor est enviando el manifiesto con la cabecera correcta,
podemos utilizar una herramienta como curl de la siguiente manera:
curl -I
http://mysite.com/manifest.appcache
O bien a travs de las herramientas de desarrollo integradas en Google Chrome, Safari y

Firefox. De cualquiera de las maneras, la respuesta tendra que ser algo parecido a esto:
HTTP/1.1 200 OK
Date: Mon, 13 Sep 2010 12:59:30 GMT
Server: Apache/2.2.13 (Unix) mod_ssl/2.2.13 OpenSSL/0.9.8l DAV/2 PHP/5.3.0
Last-Modified: Tue, 31 Aug 2010 03:11:00 GMT
Accept-Ranges: bytes
Content-Length: 113
Content-Type:
text/cache-manifest
9.3 PROCESO DE CACHEADO

Cuando visitamos una pgina que hace uso de la cache de aplicacin, el proceso de
cacheado que se sigue es el siguiente:
Navegador: solicita la pgina http://html5app.com/

2. Servidor: devuelve index.html
3. Navegador: procesa la pgina index.html y solicita los recursos asociados, como
imgenes, javascripts, hojas de estilos y el manifiesto.
4. Servidor: devuelve todos los recursos solicitados.
5. Navegador: procesa el manifiesto y solicita, de nuevo, todos los recursos definidos
en el manifiesto. Efectivamente, se produce una doble peticin.
6. Servidor: devuelve todos los recursos del manifiesto solicitados.
7. Navegador: la cache de aplicacin est actualizada, y se lanzan los eventos
asociados.
Ahora, el navegador est listo y la cach contiene los ficheros indicados en el manifiesto.
Si el manifiesto no ha cambiado, y la pgina se recarga, ocurre lo siguiente:
Navegador: vuelve a solicitar la pgina http://html5app.com/
2. Navegador: detecta que tiene una copia local de index.html y la sirve de manera
local.
3. Navegador: procesa la pgina index.html y los recursos existentes en la cach se
sirven de manera local.
4. Navegador: solicita de nuevo el manifiesto al servidor.
5. Servidor: devuelve un cdigo 304 indicando que no ha cambiado nada en el
manifiesto.
Una vez que el navegador tiene almacenados los recursos en su cach, los sirve de
manera local y despus solicita el manifiesto. Como se puede ver en la siguiente captura
de pantalla, Google Chrome nicamente solicita al servidor aquellos ficheros que no se
encuentran en la cach de la aplicacin.
Figura 9.1 Peticiones realizadas por Google Chrome

Si deseamos actualizar alguno de los recursos de la aplicacin, tendremos que actualizar
primero el manifiesto, para obligar al navegador a solicitar de nuevo todos los recursos.
Para ello, es necesario marcar de alguna manera que el manifiesto ha cambiado, aunque
los ficheros a cachear sean los mismos. Una prctica muy sencilla es aadir una nmero
de versin o la fecha de modificacin del manifiesto:
# 2010-06-18:v3
Una vez que el manifiesto ha cambiado, el comportamiento del navegador es el

siguiente:
Navegador: vuelve a solicitar la pgina http://html5app.com/
2. Navegador: detecta que tiene una copia local de index.html y la sirve de manera
local.
3. Navegador: procesa la pgina index.html y los recursos existentes en la cach
se sirven de manera local.
4. Navegador: solicita de nuevo el manifiesto al servidor.
5. Servidor: devuelve el nuevo manifiesto modificado.
6. Navegador: procesa el manifiesto y solicita todos los recursos definidos en el
manifiesto.
7. Servidor: devuelve todos los recursos del manifiesto solicitados.
8. Navegador: la cache de aplicacin est actualizada, y se lanzan los eventos

asociados.
Hay que destacar, que a pesar de haber modificado los recursos en el navegador, estos
cambios no se producen en este momento, ya que se siguen utilizando los cargados
previamente. La nueva cach solo estara disponible si volvisemos a recargar la pgina.
Una manera de modificar este comportamiento es accediendo al objeto
applicationCache .
9.4 ACTUALIZACIN DE LA MEMORIA CACH

El objeto window.applicationCache permite acceder mediante JavaScript a la cach de
aplicacin del navegador. Su propiedad status permite comprobar el estado de la
memoria cach, y es el encargado de notificarnos que se ha producido un cambio en la
cach local.
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED'; break;
case appCache.IDLE: // IDLE == 1
return 'IDLE'; break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING'; break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING'; break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY'; break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE'; break;
default:
return 'UKNOWN CACHE STATUS'; break;
};
Para actualizar la cach mediante JavaScript, primero se debe hacer una llamada a
applicationCache.update() . Al hacer esa llamada, se intentar actualizar la cach del
usuario (para lo cual ser necesario que haya cambiado el archivo de manifiesto).
Finalmente, cuando el estado de applicationCache.status sea UPDATEREADY , al llamar a
applicationCache.swapCache() , se sustituir la antigua cach por la nueva.
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's
cache.
if (appCache.status == window.applicationCache.UPDATEREADY)
{ appCache.swapCache(); // The fetch was successful, swap in the new
cache.
Al utilizar update() y swapCache() de este modo, no se muestran los recursos

actualizados a los usuarios. El flujo indicado solo sirve para pedirle al navegador que
busque un nuevo archivo de manifiesto, que descargue el contenido actualizado que se
especifica y que actualice la cach de la aplicacin. Por tanto, la pgina se tiene que
volver a cargar dos veces para que se muestre el nuevo contenido a los usuarios: una
vez para extraer una nueva cach de aplicacin y otra para actualizar el contenido de la
pgina.
Para que los usuarios puedan acceder a la versin ms reciente del contenido de tu sitio,
podemos establecer un escuchador que controle el evento updateready cuando se
cargue la pgina:
window.addEventListener('load', function(e)
{ window.applicationCache.addEventListener('updateready', function(e)
{
if (window.applicationCache.status == window.applicationCache.UPDATEREA
DY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?'))
{ window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
Hay, adems, algunos eventos adicionales que permiten controlar el estado de la cach.
El navegador activa eventos para una serie de acciones (como el progreso de las
descargas, la actualizacin de la cach de las aplicaciones y los estados de error). El
siguiente fragmento permite establecer escuchadores de eventos para cada tipo de
evento de cach:
function handleCacheEvent(e)
{}
function handleCacheError(e)
{ alert('Error: Cache failed to
update!');
};
// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);
appCache.addEventListener('checking',
handleCacheEvent, false);
// An update was found. The browser is fetching resources.

appCache.addEventListener('downloading', handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);
Si no se puede descargar el archivo de manifiesto o algn recurso especificado en l,

fallar todo el proceso de actualizacin. Si se produce ese fallo, el navegador seguir
utilizando la antigua cach de la aplicacin.
9.5 EVENTOS ONLINE/OFFLINE

Como parte de la especificacin de HTML5, el objeto navigator incluye una propiedad
que nos indica si se dispone de conexin o no, concretamente navigator.onLine . Sin
embargo, esta propiedad no se comporta de manera correcta en la mayora de
navegadores, y nicamente cambia su estado al indicar de manera explcita que
funcione en modo offline. Como desarrolladores, lo que realmente nos interesa es
conocer si realmente hay conexin o no con el servidor.
Una manera de identificar si existe conexin a internet, es utilizar la categora FALLBACK
del manifiesto. En esta categora podemos indicar dos ficheros JavaScript que detectan
si estamos online o no:
CACHE MANIFEST
FALLBACK:
online.js offline.js
online.js contiene:
setOnline(true);
Y offline.js contiene:
setOnline(false);
En nuestra aplicacin, creamos una funcin llamada testOnline que dinmicamente crea
un elemento <script> , el cual trata de cargar el fichero online.js . Si la carga se
realiza de manera correcta, se ejecuta el mtodo setOnline(true) . Si estamos offline,
el navegador cargar el fichero offline.js , ejecutando el mtodo setOnline(false) .
function testOnline(fn) {
var script = document.createElement(script)
script.src = 'online.js';
// alias the setOnline function to the new function that was passed in
window.setOnline = function (online) {
document.body.removeChild(script);
fn(online);
};
// attaching script node trigger the code to run
document.body.appendChild(script);
}
testOnline(function (online) {
if (online) {
applicationCache.update();
} else {
// show users an unobtrusive message that they're
}
});
Ejercicio 11
Ver enunciado
NDICE DE CONTENIDOS
Sin conexin
El archivo de manifiesto de cach
Cmo servir el manifiesto
Proceso de cacheado
Actualizacin de la memoria cach
Eventos online/offline
disconnected
Drag and Drop | HTML5
HTML5
Anterior Siguiente
CAPTULO 10 DRAG AND DROP

Durante aos, hemos utilizado bibliotecas como jQuery y Dojo para conseguir
funcionalidades complejas en las interfaces de usuario como las animaciones, las
esquinas redondeadas y la funcin de arrastrar y soltar. Esta ltima funcionalidad (Drag
and Drop, DnD) tiene una gran importancia en HTML5, y de hecho se ha integrado en el
API. En la especificacin, este API se define como un mecanismo basado en eventos,
donde identificamos los elementos que deseamos arrastrar con el atributo draggable y
desde JavaScript escuchamos los eventos que se producen, para proporcionar la
funcionalidad deseada.
Por defecto, todos los enlaces, imgenes y nodos de texto (o selecciones de texto) de un
documento HTML son arrastables, pero no hay ningn evento asociado a estas acciones,
por lo que poco ms podemos hacer, a excepcin de la funcionalidad que nos ofrezca el
navegador o el propio sistema operativo (guardar las imgenes en el escritorio, crear
ficheros de texto, etc).
10.1 DETECCIN DE LA FUNCIONALIDAD

Aunque la compatibilidad actual de los navegadores con esta API es bastante amplia, hay
que tener en cuenta que los dispositivos mviles no soportan esta funcionalidad. Si
nuestro sitio web est siendo accedido desde un dispositivo mvil, y tenemos
implementada esta funcionalidad (por ejemplo en una cesta de la compra), debemos
proveer otra solucin para que nuestro sitio web se comporte de manera correcta, y no
perjudicar la experiencia del usuario.
La manera mas sencilla de comprobar la disponibilidad de este API, es utilizar la
biblioteca Modernizr, la cual nos indica si el navegador soporta esta funcionalidad:
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution or disable
}
DnD.
CREACIN DE CONTENIDO ARRASTRABLE

Hacer que un elemento se pueda arrastrar es muy sencillo. Solo hay que establecer el
atributo draggable="true" en el elemento que se quiere mover. La funcin de arrastre
se puede habilitar prcticamente en cualquier elemento, incluidos archivos, imgenes,
enlaces, listas u otros nodos DOM.

<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>
Una ayuda visual al usuario, para indicar que un elemento es arrastable, es transformar
el aspecto tanto del elemento como del cursor. Con CSS esto es muy sencillo:
[draggable] {
user-select: none;
}
.column:hover {
border: 2px dotted #666666;
background-color: #ccc;
border-radius: 10px;
box-shadow: inset 0 0 3px #000;
cursor: move;
}
10.3 EVENTOS DE ARRASTRE

La especificacin define hasta siete eventos que son lanzados tanto por los elementos de
origen (los que son arrastrados) com para los elementos de destino (donde soltamos el
elemento arrastrado). Son los siguientes:
dragstart : comienza el arrastrado. El target del evento hace referencia
al elemento que est siendo arrastrado.

drag : el elemento se ha movido. El target del evento hace referencia al elemento
que est siendo arrastrado. Este evento se dispara tantas veces como se mueva el
elemento.
dragenter : se dispara cuando un elemento que est siendo arrastrado entra en
un contenedor. El target del evento hace referencia al elemento contenedor.

dragleave : el elemento arrastrado ha salido del contenedor. El target del evento
hace referencia al elemento contenedor.

dragover : el elemento se ha movido dentro del contenedor. El target del evento
hace referencia al elemento contenedor. Como el comportamiento por defecto es

denegar el drop , la funcin debe retornar el valor false o llamar al mtodo
preventDefault del evento para que indicar que se puede el soltar elemento.
drop : el elemento arrastrado has sido exitosamente soltado en el elemento
contenedor. El target del evento hace referencia al elemento contenedor.

dragend : se ha dejado de arrastrar el elemento, con xito o no. El target
del evento hace referencia al elemento arrastrado.

Para organizar el flujo de DnD, necesitamos un elemento de origen (en el que se origina
el movimiento de arrastre), la carga de datos (la informacin que va asociada al
elemento arrastrado) y un elemento de destino (el rea en la que se soltarn los datos).
El elemento de origen puede ser una imagen, una lista, un enlace, un objeto de archivo,
un bloque de HTML o cualquier otro elemento, al igual que la zona de destino.
10.3.1 COMIENZO DE LA OPERACIN DE ARRASTRE

Una vez que se haya definido el atributo draggable="true" en los elementos que
queremos convertir en arrastables, debemos aadir los escuchadores necesarios para
reaccionar antes los eventos que se lanzan desde los elementos. El primer evento de los
que define la especificacin se produce cuando un elemento comienza a ser arrastrado.
Un ejemplo muy sencillo en el que cambiamos la transparencia de un elemento al
comenzar a ser arrastrado:
function handleDragStart(e) {
this.style.opacity = '0.4';
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
});
No debemos olvidarnos de volver a fijar la transparencia del elemento en el 100% una

vez completada la operacin de arrastre, ya que de otro modo, seguira siendo
transparente una vez finalizado la operacin de arrastre.
10.3.2DRAGENTER, DRAGOVER Y DRAGLEAVE

Los controladores de eventos dragenter , dragover y dragleave se pueden utilizar para
proporcionar pistas visuales adicionales durante el proceso de arrastre. Por ejemplo, el
borde de un elemento de destino se puede convertir en una lnea discontinua al realizar
una operacin de arrastre. De esa forma, los usuarios podrn distinguir cules son los
elementos de destino donde pueden soltar lo que estn arrastrando.
.column.over {
border: 2px dashed #000;
}
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to
}
e.dataTransfer.dropEffect = 'move';
return false;
}
drop.
function handleDragEnter(e) {
// this / e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
nt.
}
// this / e.target is previous target
eleme

col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
});
Algunas consideraciones en el cdigo anterior. Cuando algo es soltado sobre un

elemento, se dispara el evento dragover , y tenemos la posibilidad de leer el objeto
event.dataTransfer . Este objeto contiene los datos asociados a las operaciones de
arrastre, como veremos ms adelante. Tal y como hemos comentado anteriormente,

cuando soltamos un elemento, hay que impedir el comportamiento predeterminado del
navegador, que es denegar el drop .
10.3.3 FINALIZACIN DE LA OPERACIN DE ARRASTRE

Para que se procese la operacin de soltar, se debe aadir un escuchador para los
eventos drop y dragend . En este controlador, habr que impedir el comportamiento
predeterminado del navegador para este tipo de operaciones, que puede ser abrir un
enlace o mostrar una imagen. Para ello, evitamos la propagacin del evento con
e.stopPropagation() .
En nuestro ejemplo utilizaremos dragend para eliminar la clase over de cada columna:
function handleDrop(e) {
// this / e.target is current target element.

if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from
}
// See the section on the DataTransfer object.
return false;
redirecting.
}
function handleDragEnd(e) {
// this/e.target is the source node.
[].forEach.call(cols, function (col)
col.classList.remove('over');
});
}

col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
10.3.4 EL OBJETO DATATRANSFER

La propiedad dataTransfer es el centro de desarrollo de toda la actividad de la funcin
DnD, ya que contiene los datos que se envan en la accin de arrastre. La propiedad
dataTransfer se establece en el evento dragstart y se lee/procesa en el evento drop .
Al activar e.dataTransfer.setData(format, data) , se establece el contenido del objeto
en el tipo MIME y se transmite la carga de datos en forma de argumentos.
En nuestro ejemplo, la carga de datos se ha establecido en el propio HTML del elemento
de origen:
var dragSrcEl = null;
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
dataTransfer tambin tiene el formato getData necesario para la extraccin de los datos
de arrastre por tipo de MIME. A continuacin se indica la modificacin necesaria para el

procesamiento de la accin de arrastre de un elemento:
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // Stops some browsers from redirecting.
}
// Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != this) {
// Set the source column's HTML to the HTML of the columnwe dropped
on.
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
Hemos aadido una variable global llamada dragSrcEl para facilitar el cambio de
posicin de la columna. En handleDragStart() , la propiedad innerHTML de la columna
de origen se almacena en esa variable y, posteriormente, se lee en handleDrop() para
cambiar el HTML de las columnas de origen y destino.
10.4 ARRASTRE DE ARCHIVOS

Las API de DnD permiten arrastrar archivos del escritorio a una aplicacin web en la
ventana del navegador.
Para arrastrar un archivo desde el escritorio, se deben utilizar los eventos de DnD del
mismo modo que otros tipos de contenido. La diferencia principal se encuentra en el
controlador drop. En lugar de utilizar dataTransfer.getData() para acceder a los
archivos, sus datos se encuentran en la propiedad dataTransfer.files :
e.stopPropagation();
// Stops some browsers from redirecting.
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
// Read the File objects in this FileList.
}
}
Ejercicio 12
Ver enunciado
NDICE DE CONTENIDOS
Drag and Drop

Deteccin de la funcionalidad
Creacin de contenido arrastrable
Eventos de arrastre
Arrastre de archivos
Geolocalizacin | HTML5
HTML5
Anterior Siguiente
CAPTULO 11 GEOLOCALIZACIN
El uso del API de geolocalizacin es extremadamente sencillo. Soportado por todos los
navegadores modernos, nos permite conocer la posicin del usuario con mayor o menor
precisin, segn el mtodo de localizacin utilizado. En la actualidad, disponemos de tres
tecnologas para geolocalizar un usuario:
Va IP: todo dispositivo que se encuentra conectado a la red, tiene asignada una
direccin IP (Internet Protocol) pblica que acta, de forma muy simplificada, como
un cdigo postal. Evidentemente, esta no es la mejor manera de localizacin, pero
s nos da una ligera idea de dnde se encuentra.
Redes GSM: cualquier dispositivo que se conecte a una red telefona, es capaz de
obtener una posicin aproximada basndose en una triangulacin con las antenas
de telefona. Es un mtodo sensiblemente ms preciso que mediante la direccin IP,
pero mucho menos que mediante GPS.
GPS: Global Positioning System o Sistema de Posicionamiento Global. Es el mtodo
ms preciso, pudiendo concretar la posicin del usuario con un margen de error de
escasos metros.
El primer paso es comprobar es la disponibilidad del API de geolocalizacin de HTML 5 en
el explorador del usuario:
if(Modernizr.geolocation) {
alert('El explorador soporta geolocalizacin');
} else {
alert('El explorador NO soporta geolocalizacin');
}
El API ofrece los siguientes mtodos para geolocalizar la posicin del usuario:
getCurrentPosition : obtiene la posicin actual del usuario, utilizando la
mejor tecnologa posible.

watchPosition : consulta cada cierto tiempo la posicin del usuario, ejecutando la
funcin de callback indicada nicamente si la posicin ha cambiado desde la ltima

consulta.
Ambos mtodos se ejecutan de manera asncrona para obtener la posicin del usuario. Si
es la primera vez que se solicita la localizacin al navegador, ste mostrar un mensaje
pidiendo permiso al usuario para compartir su localizacin. Si el usuario no da su
permiso, el API llama a la funcin de error que hayamos definido. La especificacin dice:
"El navegador no debe enviar informacin sobre la localizacin a sitios sin el
permiso explcito del usuario."
As pues, queda en manos de los navegadores informar al usuario que estamos
intentando acceder a su posicin actual. La forma de realizarlo depende del navegador.
Por norma general, los navegadores de escritorio muestran un aviso no bloqueante, lo
que permite seguir utilizando y ejecutando la aplicacin.
Figura 11.1 Peticin para compartir localizacin en Chrome

En cambio, en navegadores de dispositivos mviles, como Safari y Chrome, se muestra
una ventana modal que bloquea la ejecucin del cdigo hasta que el usuario acepte o
deniegue la solicitud de geolocalizacin.
Figura 11.2 Peticin para compartir localizacin en Safari Mobile y Chrome Mobile
11.1 MTODOS DEL API
El API de geolocalizacin del objeto navigator contiene tres mtodos:

getCurrentPosition
watchPosition
clearWatch
Los mtodos watchPosition y clearWatch estn emparejados, de la misma manera que

lo estn setInterval y clearTimeout . watchPosition devuelve un identificador nico,
que permite cancelar posteriormente las consultas de posicin pasando es identificador
como parmetro a clearWatch .
Tanto getCurrentPosition como watchPosition , son mtodos muy parecidos, y toman
los mismos parmetros: una funcin de xito, una funcin de error y opciones de
geolocalizacin. Un simple ejemplo de uso del API geolocalizacin es el siguiente:
navigator.geolocation.getCurrentPosition(function (position)
{ alert('We found you!');
// now do something with the position data
});
11.1.1 FUNCIN DE XITO

Si el usuario permite que el navegador comparta la localizacin, y no se produce ningn
otro error, se llama a la funcin de xito, que es el primer argumento de las funciones
de getCurrentPosition y watchPosition . sta funcin recibe como parmetro un objeto
position que contiene dos propiedades: un objeto coords (contiene las coordenadas)
una marca de tiempo timestamp . El objeto de coordenadas es el que nos interesa, ya

que es el que contiene la informacin sobre la geolocalizacin. Sus propiedades son las
siguientes:
readonly attribute double
latitude
longitude
accuracy
La propiedad accuracy contiene la precisin de las coordenadas en metros. Podemos

utilizarlo para mostrar un radio de precisin de la posicin en nuestro mapa.
Aunque es complicado de confirmar, es posible que esta informacin de geolocalizacin
provenga de servicios propios de los fabricantes. Por ejemplo, Google dispone de una
gran base de datos, que combinado con la informacin de la peticin (como el hardware,
la direccin IP, etc.) puede dar una localizacin. Esta informacin simplemente
representa la posicin del usuario, y no contiene nada ms que nos pueda indicar la
velocidad o direccin del usuario.
Utilizando la informacin de posicin, es muy sencillo mostrar la posicin del usuario en

un mapa:
if (navigator.geolocation)
{ navigator.geolocation.getCurrentPosition(function (position)
{
var coords = position.coords;
showMap(coords.latitude, coords.longitude, coords.accuracy);
});
}
Existe otro tipo de datos dentro del objeto coords , para dispositivos que dispongan
de GPS, aunque la gran mayora de navegadores establecern estas propiedades
como null .
altitude
altitudeAccuracy
heading
speed
11.1.2 OBTENIENDO DATOS EXTRA

Actualmente, muchos de los dispositivos integran un GPS. Dependiendo del navegador o
del sistema operativo, la informacin provista con la geolocalizacin puede incluir mucha
ms informacin que simplemente las coordenadas de la posicin, como la velocidad y la
altitud.
En la mayora de los casos, hay que especificar al API que utilice una mayor precisin
para activar el GPS. Como siempre, hay que tener cuidado al utilizar el GPS, ya que
consume muchsima batera y hay que utilizar esta tecnologa nicamente si es
estrictamente necesario.
Para calcular la velocidad, el dispositivo necesita conocer la diferencia media entre las
ltimas localizaciones. Por esta razn, es necesario utilizar el mtodo watchPosition y
calcular la velocidad de la siguiente manera:
var speedEl = document.getElementById(speed);
navigator.geolocation.watchPosition(function (geodata) {
var speed = geodata.coords.speed;
if (speed === null || speed === 0)
{ speedEl.innerHTML = "You're standing
still!";
} else {
// speed is in metres per second
speedEl.innerHTML = speed + Mps;
}
}, function () {
speedEl.innerHTML = "Unable to determine speed
:-(";
},
{ enableHighAccuracy: true }
);
11.1.3 FUNCIN DE ERROR

El segundo parmetro para los mtodos getCurrentPosition y watchPosition es la
funcin de error. Esta funcin es importante si queremos proveer de un segundo mtodo
alternativo para introducir la localizacin, por ejemplo de manera manual, o queremos
informar al usuario del error. Esta funcin se ejecuta cuando el usuario deniega la
peticin de localizacin, o cuando estamos consultando la posicin pero el dispositivo
pierde la recepcin de la localizacin. La funcin de error recibe un nico argumento con
dos propiedades:
readonly attribute unsigned short
readonly attribute DOMString
code
message
El cdigo de error puede contener los siguientes valores:

PERMISSION_DENIED (valor = 1)
POSITION_UNAVAILABLE (valor =
2)
TIMEOUT (valor = 3)
11.1.4 CONFIGURAR LA GEOLOCALIZACIN

Finalmente, el tercer argumento para los mtodos getCurrentPosition y watchPosition
contiene las opciones de geolocalizacin. Todas estas configuraciones son opcionales,
puede que no se tengan en cuenta por los navegadores.
enableHighAccuracy : booleano, por defecto false
timeout : en milisegundos, por defecto infinito
maximumAge : en milisegundos, por defecto 0
Por ejemplo, para solicitar una alta precisin, un timeout de dos segundos y no cachear
las peticiones, llamamos al mtodo getCurrentPosition con las siguientes opciones:
navigator.geolocation.getCurrentPosition(success, error,
{ enableHighAccuracy: true
timeout: 2000
maximumAge: 0
});
Ejercicio 13
Ver enunciado
NDICE DE CONTENIDOS
Geolocalizacin
11.1 Mtodos del API
Web workers | HTML5
HTML5
Anterior Siguiente
CAPTULO 12 WEB WORKERS

Los navegadores ejecutan las aplicaciones en un nico thread, lo que significa que si
JavaScript est ejecutando una tarea muy complicada, que se traduce en tiempo de
procesado, el rendimiento del navegador se ve afectado. Los Web workers se
introdujeron con la idea de simplificar la ejecucin de threads en el navegador. Un
worker permite crear un entorno en el que un bloque de cdigo JavaScript puede
ejecutarse de manera paralela sin afectar al thread principal del navegador. Los Web
workers utilizan un protocolo de paso de mensajes similar a los utilizados en
programacin paralela.
Estos Web workers se ejecutan en un subproceso aislado. Como resultado, es necesario
que el cdigo que ejecutan se encuentre en un archivo independiente. Sin embargo,
antes de hacer esto, lo primero que se tiene que hacer es crear un nuevo objeto Worker
en la pgina principal:
var worker = new
Worker('task.js');
Si el archivo especificado existe, el navegador generar un nuevo subproceso de Worker

que descargar el archivo JavaScript de forma asncrona. El Worker no comenzar a
ejecutarse hasta que el archivo se haya descargado completamente. Si la ruta al nuevo
Worker devuelve un error 404 , el Worker fallar automticamente.
Antes de comenzar a utilizar los Worker, es necesario conocer el protocolo de paso de
mensajes, que tambin es utilizado en otras APIs como WebSocket y Server-Sent Event.
12.1 TRANSFERENCIA DE MENSAJES

El API de transferencia de mensajes es una manera muy simple de enviar cadenas de
caracteres entre un origen (o un dominio) a un destino. Por ejemplo podemos utilizarlo
para enviar informacin a una ventana abierta como popup, o a un iframe dentro de la
pgina, an cuando tiene como origen otro dominio.
La comunicacin entre un Worker y su pgina principal se realiza mediante un modelo de
evento y el mtodo postMessage() . En funcin del navegador o de la versin,
postMessage() puede aceptar una cadena o un objeto JSON como argumento nico. Las
ltimas versiones de los navegadores modernos son compatibles con la transferencia de

objetos JSON . De todas maneras, siempre podemos utilizar los mtodos JSON.stringify
y JSON.parse para la transferencia de objetos entre el thread principal y los Worker.
A continuacin, se muestra un ejemplo sobre cmo utilizar una cadena para transferir
"Hello World" a un Worker en doWork.js . El Worker simplemente devuelve el
mensaje que se le transfiere.
Secuencia de comandos principal:
worker.postMessage('Hello World'); // Send data to our
worker.
doWork.js (el Worker):

self.addEventListener('message', function(e)
{ self.postMessage(e.data);
}, false);
Cuando se ejecuta postMessage() desde la pgina principal, el Worker es capaz de

obtener este mensaje escuchando al evento message . Se puede acceder a los datos del
mensaje (en este caso "Hello World") a travs de la propiedad data del evento. Aunque
este ejemplo concreto no es demasiado complejo, demuestra que postMessage()
tambin sirve para transferir datos de vuelta al thread principal, una vez que los datos
de origen se hayan procesado correctamente.
Los mensajes que se transfieren entre el origen y los Worker se copian, no se pasan por
referencia. Por ejemplo, en el siguiente ejemplo, a la propiedad msg del mensaje JSON
se accede en las dos ubicaciones. Parece que el objeto se transfiere directamente al
Worker aunque se est ejecutando en un espacio especfico e independiente. En
realidad, lo que ocurre es que el objeto se serializa al transferirlo al Worker y,
posteriormente, se anula la serializacin en la otra fase del proceso. El origen y el
Worker no comparten la misma instancia, por lo que el resultado final es la creacin de
un duplicado en cada transferencia. La mayora de los navegadores implementan esta
funcin mediante la codificacin/descodificacin JSON automtica del valor en la otra
fase del proceso, cuando el paso de objetos est soportado.
En el siguiente ejemplo, que es ms complejo, se transfieren mensajes utilizando objetos
JavaScript.
Secuencia de comandos principal:
<button onclick="sayHI()">Say HI</button>
<button onclick="unknownCmd()">Send unknown command</button>
<button onclick="stop()">Stop worker</button>
<output id="result"></output>
<script>
function sayHI() {
worker.postMessage({'cmd': 'start', 'msg':
'Hi'});
}
function stop() {
worker.postMessage({'cmd': 'stop', 'msg':
}
'Bye'});
function unknownCmd() {
worker.postMessage({'cmd': 'foobard', 'msg':
}
var worker = new
'???'});
Worker('doWork.js');
worker.addEventListener('message', function(e)
{ document.getElementById('result').textContent
e.data;
}, false);
</script>
doWork.js:
this.addEventListener('message', function(e) {
var data = e.data;
switch (data.cmd) {
case 'start':
this.postMessage('WORKER STARTED: '+data.msg);
break;
case 'stop':
this.postMessage('WORKER STOPPED: '+data.msg+'. (buttons will no lo
nger work)');
this.close(); // Terminates the worker.
break;
default:
this.postMessage('Unknown command: '+data.msg);
};
}, false);
12.2 UTILIZACIN DE WEB WORKERS

Un Worker es una manera ejecutar cdigo JavaScript de manera paralela al proceso
principal, sin interferir con el navegador. El navegador sigue siendo responsable de
solicitar y analizar ficheros, renderizar la vista, ejecutar JavaScript y cualquier otro
proceso que consuma tiempo de procesado y que haga que el resto de tareas tengan
que esperar. Y es aqu donde los Web workers toman importancia.
Al igual que con el resto de funcionalidades de HTML5, debemos comprobar su

disponibilidad en el navegador en el que ejecutamos la aplicacin:
if(Modernizr.webworkers) {
alert('El explorador soporta Web workers');
} else {
alert('El explorador NO soporta Web workers');
}
Crear nuevo Worker es muy sencillo. Tan slo tenemos que crear una nueva instancia del
objeto Worker , indicando como parmetro del constructor el fichero JavaScript que
contiene el cdigo que debe ejecutar el Worker.
var worker = new
Worker('my_worker.js');
De esta manera tenemos disponible y listo para utilizar un nuevo Worker. En este
momento, podramos pensar que podemos llamar a mtodos o utilizar objetos definidos
dentro del nuevo Worker, pero no nada ms lejos de la realidad. La nica manera de
comunicarnos con el nuevo Worker es a travs del paso de mensajes, como hemos visto
anteriormente.
worker.postMessage('Hello
World');
ste mtodo nicamente acepta un parmetro, la cadena de texto a enviar al Worker.

Por otra parte, la manera de recibir mensajes originados en el Worker es definiendo un
escuchador para el evento message . Los datos incluidos por el Worker se encuentran
disponibles en la propiedad data del evento.
worker.addEventListener('message', function(e)
{ alert(e.data);
}, false);
12.2.1 DENTRO DE UN WORKER

Evidentemente, dentro de un Worker necesitamos comunicarnos con el thread principal,
tanto para recibir los datos de los mensajes como para nuevos datos de vuelta. Para
ello, aadimos un escuchador para el evento message , y enviamos los datos de vuelta
utilizando el mismo mtodo postMessage .
this.addEventListener('message', function(e)
{ postMessage("I'm done!");
});
Es conveniente saber, que a diferencia de la ejecucin un script en el documento

principal, la visibilidad de un Worker es mucho ms reducida. En concreto, la palabra
reservada this no hace referencia al objeto window , sino al Worker en s mismo.

Debido al comportamiento de ejecucin en paralelo de los Web workers, stos solo
pueden acceder al siguiente conjunto de funciones de JavaScript (segn la
especificacin):
Enviar datos con postMessage y aceptar mensajes entrantes a travs del evento
onmessage .
close , para terminar con el Worker
actual. Realizar peticiones Ajax.

Utilizar las funciones de tiempo setTimeout()/clearTimeout() y
setInterval()/clearInterval() .
Las siguientes funciones de JavaScript: eval , isNaN , escape , etc.

WebSockets .
EventSource .
Bases de datos Web SQL , IndexedDB .

Web Workers .
En cambio, los Workers NO pueden acceder a las siguientes funciones:

DOM (no es seguro para el subproceso).
Objeto window .
Objeto document
. Objeto parent .
12.3 SUBWORKERS
Los Workers tienen la capacidad de generar Workers secundarios. Esto significa, que
podemos dividir la tarea principal en subtareas, y crear nuevos Workers dentro del
Worker principal. Sin embargo, a la hora de utilizar los Subworkers, y antes de poder
devolver el resultado final al hilo principal, es necesario asegurarse que todos los
procesos han terminado.
var pendingWorkers = 0, results =
{},;
onmessage = function (event) {

var data = JSON.parse(event.data), worker = null;
pendingWorkers = data.length;
for (var i = 0; i < data.length; i++)

{ worker = new
Worker('subworker.js');
worker.postMessage(JSON.stringify(data[i]));
}
}
function storeResult(event) {
var result = JSON.parse(event.data);
pendingWorkers--;
if (pendingWorkers <= 0)
{ postMessage(JSON.stringify(results)
);
}
}
12.4 GESTIONAR ERRORES

Si se produce un error mientras se ejecuta un Worker, se activa un evento error . La
interfaz incluye tres propiedades tiles para descubrir la causa del error: filename (el
nombre de la secuencia de comandos del Worker que caus el error), lineno (el nmero
de lnea donde se produjo el error) y message (una descripcin significativa del error).
Ejemplo: workerWithError.js intenta ejecutar 1/x , donde el valor de x no se ha
definido:
<output id="error" style="color:
<output id="result"></output>
red;"></output>
<script>
function onError(e)
{ document.getElementById('error').textContent =
[
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ',
;
}
function onMsg(e)
{ document.getElementById('result').textContent
e.data;
}
var worker = new Worker('workerWithError.js');

worker.addEventListener('message', onMsg, false);
worker.addEventListener('error', onError, false);
worker.postMessage(); // Start worker without a message.
</script>
e.message].join('')
workerWithError.js:
self.addEventListener('message', function(e)
{ postMessage(1/x); // Intentional error.
};
12.5 SEGURIDAD
Debido a las restricciones de seguridad de Google Chrome (otros navegadores no aplican
esta restriccin), los Workers no se ejecutarn de forma local (por ejemplo, desde
file:// ) en las ltimas versiones del navegador. En su lugar, fallan de forma
automtica. Para ejecutar tu aplicacin desde el esquema file:// , ejecuta Chrome con
el conjunto de marcadores --allow-file-access-from-files .
Las secuencias de comandos del Worker deben ser archivos externos con el mismo
esquema que su pgina de llamada. Por ello, no se puede cargar una secuencia de
comandos desde una URL data: o una URL javascript: . Asimismo, una pgina https:
no puede iniciar secuencias de comandos de Worker que comiencen con una URL http: .
Ejercicio 14
Ver enunciado
NDICE DE CONTENIDOS
Web workers
Transferencia de mensajes
Utilizacin de Web Workers
Subworkers
Gestionar errores
Seguridad
WebSockets | HTML5
HTML5
Anterior Siguiente
CAPTULO 13 WEBSOCKETS
13.1 INTRODUCCIN
Internet se ha creado en gran parte a partir del llamado paradigma solicitud/respuesta
de HTTP. Un cliente carga una pgina web, se cierra la conexin y no ocurre nada hasta
que el usuario hace clic en un enlace o enva un formulario.
Hace ya algn tiempo que existen tecnologas que permiten al servidor enviar datos al
cliente en el mismo momento que detecta que hay nuevos datos disponibles. Se conocen
como "Push" o "Comet". Uno de los trucos ms comunes para crear la ilusin de una
conexin iniciada por el servidor se denomina Long Polling. Con el Long Polling, el cliente
abre una conexin HTTP con el servidor, el cual la mantiene abierta hasta que se enve
una respuesta. Cada vez que el servidor tenga datos nuevos, enviar la respuesta. El
Long Polling y otras tcnicas funcionan bastante bien y de hecho ha sido utilizadas en
muchas aplicaciones como el chat de Gmail.
Los WebSockets nos ofrecen una conexin bidireccional entre el servidor y el navegador.
Esta conexin se produce en tiempo real y se mantiene permanentemente abierta hasta
que se cierre de manera explcita. Esto significa que cuando el servidor quiere enviar
datos al servidor, el mensaje se traslada inmediatamente. Efectivamente, esto es lo que
suceda al utilizar tecnologas como Comet, pero se consegua utilizando una serie de
trucos. Si esto no funcionada, siempre era posible utilizar Ajax para conseguir un
resultado parecido, pero sobrecargando el servidor de manera innecesaria.
Si disponemos de un socket abierto, el servidor puede enviar datos a todos los clientes
conectados a ese socket, sin tener que estar constantemente procesando peticiones de
Ajax. La ventaja en cuanto a rendimiento y escalabilidad es bastante evidente al utilizar
WebSockets.
La latencia en las comunicaciones es otro de los beneficios de utilizar WebSockets. Como
el socket est siempre abierto y escuchando, los datos son enviados inmediatamente
desde el servidor al navegador, reduciendo el tiempo al mnimo, en comparacin con un
paradigma basado en Ajax, donde hay que realizar una peticin, procesar la respuesta y
enviarla de nuevo de vuelta.
Finalmente, los datos a transmitir se reducen tambin de manera drstica, pasando de
un mnimo de 200-300 bytes en peticiones Ajax, a 10-20 bytes utilizando websockets.
13.2 CREAR UN WEBSOCKET

El API de WebSocket es realmente sencillo de utilizar. Actualmente, los navegadores

nicamente soportan el envo de cadenas de caracteres, y se realiza de una manera muy
similar a la que utilizbamos para enviar mensajes en los Web Workers. El API est
limitado a mtodos para abrir la conexin, enviar y recibir datos y cerrar la conexin.
Para abrir una conexin WebSocket , slo tenemos que ejecutar el constructor WebSocket,
que toma como parmetro la URL del socket a abrir. Hay que tener en cuenta que el
protocolo a utilizar es ws:// :
var socket = new
WebSocket('ws://html5rocks.websocket.org/tweets');
Tambin existe un protocolo wss:// para conexiones WebSocket seguras, de la misma

forma que se utiliza https:// para las conexiones HTTP seguras.
La URL que utilizamos para conectarnos con el WebSocket no tiene por qu pertenecer al
mismo dominio que nuestro documento, por lo que podemos conectarnos a servicios de
terceros sin problemas, expandiendo las posibilidades de nuestra aplicacin.
13.3 COMUNICACIN CON EL SERVIDOR

Cuando se establece una conexin con el servidor (cuando el evento open se activa), se
puede empezar a enviar datos al servidor con el mtodo send a travs del socket
creado.
// Send new Tweet
socket.send("Hey there, I'm using
WebSockets");
De la misma forma, el servidor puede enviarnos mensajes en cualquier momento. Cada

vez que esto ocurra, se activa el evento onmessage . Los datos enviados por el servidor
se encuentran en la propiedad data del objeto event .
socket.onmessage = function(event) {
var data = JSON.parse(event.data);
if (data.action == 'joined') {
initiliseChat();
} else {
showNewMessage(data.who, data.text);
}
});
El API incorpora adems dos eventos que se disparan cuando el socket se abre y est
listo, y cuando ste se va a cerrar:
socket.onopen = function(e){ log("Welcome - status "+this.readyState); };
socket.onclose = function(e){ log("Disconnected - status "+this.readyState);
};
13.4 WEBSOCKET EN EL SERVIDOR

Al utilizar los WebSocket, se crea un patrn de uso completamente nuevo para las
aplicaciones de servidor. Aunque las pilas de servidor tradicionales como LAMP estn
diseadas a partir del ciclo de solicitud-respuesta de HTTP , a menudo dan problemas si
hay muchas conexiones WebSocket abiertas. Mantener un gran nmero de conexiones
abiertas de forma simultnea requiere una arquitectura capaz de recibir un alto nivel de
concurrencia sin consumir muchos recursos. Estas arquitecturas suelen estar basadas en
subprocesos o sistemas de E/S asncronos.
En el prximo captulo sobre Server-Sent Events, veremos una implementacin de un
servidor web basado en JavaScript, llamado Node.js.
Ejercicio 15
Ver enunciado
NDICE DE CONTENIDOS
WebSockets
Introduccin
Crear un WebSocket
Comunicacin con el servidor
WebSocket en el servidor
EventSource | HTML5
HTML5
Anterior Siguiente
CAPTULO 14 EVENTSOURCE
Los EventSource (tambin conocidos como Server-Sent Events), son eventos en tiempo
real transmitidos por el servidor y recibidos en el navegador. Son similares a los
WebSockets en que suceden el tiempo real, pero son principalmente un mtodo de
comunicacin unidireccional desde el servidor. Al igual que en los WebSocket, creamos
una nueva conexin indicando la URL, y el navegador intentar conectarse
inmediatamente. El objeto EventSource dispone de los siguientes eventos:
open : se dispara cuando la conexin se ha establecido.
message : evento que indica la llegada de un mensaje
nuevo. error : se dispara cuando algo ha ido mal.

Lo que hace a EventSource diferente es la manera en que controla las prdidas de
conexin y la gestin de los mensajes.
Si la conexin se pierde por alguna razn, el API automticamente trata de volver a
conectarse. Adems, al restablecer la conexin, el cliente enva al servidor la ID del
ltimo mensaje que recibi. Esto permite al servidor, enviar al cliente todos los
mensajes que no ha podido recibir. No es necesario realizar ninguna configuracin
especial en nuestro cdigo, simplemente el servidor nos enviar los mensajes que no
hemos recibido.
Un sencillo ejemplo:
var es = new
EventSource('/bidding');
es.onopen = function () {
initialiseData();
};
es.onmessage = function (event) {
updateData(data.time, data.bid);
};
14.1 EVENTSOURCE EN EL SERVIDOR

En el lado del servidor podemos seguir utilizando una solucin basada en PHP y la pila
completa LAMP, pero como Apache no se comporta de manera estable con conexiones
persistentes, constantemente trata de cerrar las conexiones y EventSource trata de

volver a conectarse automticamente. Esto da como resultado un comportamiento ms
parecido a Ajax que a una comunicacin unidireccional y en tiempo real desde el
servidor.
Realmente, esta no es la mejor manera de aprovechar las ventajas de EventSource . Para
ello, necesitamos una conexin persistente con el servidor, y LAMP no nos lo puede
proporcionar. Actualmente existen soluciones de servidor basadas en eventos, como
pueden ser Node.js (un servidor basado en JavaScript) o Twisted para Python.
14.1.1 UN SIMPLE SERVIDOR PARA EVENTSOURCE

El siguiente cdigo muestra como crear un servidor muy simple con Node.js, el cual
acepta conexiones y enva mensajes a los clientes conectados. En este caso, nicamente
se notifica al resto de usuarios conectados al servicio, que un nuevo usuario se ha
conectado.
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache'});
// get the last event id and convert to a number
var lastId = req.headers['last-event-id']*1;
if (lastId) {
for (var i = lastId; i < eventId; i++) {
res.write('data: ' + JSON.stringify(history[eventId])
+ '\nid: ' + eventId + '\n');
}
}
// finally cache the response connection
connections.push(res);
// When a regular web request is received
connections.forEach(function (response) {
history[++eventId] = { agent: req.headers['user-agent'],
time: +new Date };
res.write('data: ' + JSON.stringify(history[eventId])
+ '\nid: ' + eventId + '\n');
});
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
En el lado del cliente, el cdigo sera tan sencillo como el siguiente:

var es = new EventSource('/eventsource');
es.onmessage = function (event) {

log.innerHTML += '<li><strong>' + data.agent
+ '</strong><br> connected at <em>'
+ (new Date(data.time)) + '</em></li>';
};
Una aplicacin muy simple, pero que nos da una idea del funcionamiento de los eventos
en tiempo real, utilizando un servidor basado en eventos.
NDICE DE CONTENIDOS
EventSource
14.1 EventSource en el servidor
File | HTML5
HTML5
Anterior Siguiente
CAPTULO 15 FILE
HTML5 ofrece una forma estndar de interactuar con archivos locales a travs de la
especificacin del API de archivos. El API de archivos se puede utilizar, por ejemplo, para
crear una vista previa en miniatura de imgenes mientras se envan al servidor o para
permitir que una aplicacin guarde una referencia de un archivo mientras el usuario se
encuentra sin conexin. Tambin se podra utilizar para verificar si el tipo MIME de un
archivo seleccionado por el usuario coincide con los formatos de archivo permitidos o
para restringir el tamao de un fichero, antes de enviarlo al servidor.
A continuacin se indican las interfaces que ofrece la especificacin para acceder a
archivos desde un sistema de archivos local:
File : representa un archivo local y proporciona informacin nicamente de
lectura (el nombre, el tamao del archivo, el tipo MIME y una referencia al
manejador del archivo).
FileList : representa un conjunto de objetos File (tanto para un conjunto de
ficheros seleccionados a travs de <input type="file" multiple> como para un

conjunto de ficheros arrastrados desde el sistema de ficheros al navegador).
Blob : permite fragmentar un archivo en intervalos de bytes.
Cuando se utiliza junto con las estructuras de datos anteriores, el API de FileReader se
puede utilizar para leer un archivo de forma asncrona mediante el control de eventos de
JavaScript. Por lo tanto, se puede controlar el progreso de una lectura, detectar si se
han producido errores y determinar si ha finalizado una carga de un fichero. El modelo
de evento de FileReader guarda muchas semejanzas con el API de XMLHttpRequest .
15.1 DETECCIN DE LA FUNCIONALIDAD

En primer lugar, se debe comprobar que el navegador sea totalmente compatible con el
API de archivos. Si la aplicacin solo va a utilizar algunas funcionalidades del API, se
debe modificar este fragmento de cdigo para adaptarlo a nuestras necesidades:
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob)
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
15.2 ACCESO A TRAVS DEL FORMULARIO

La forma ms sencilla de cargar un archivo es utilizar un elemento <input type="file">
estndar de formulario. JavaScript devuelve la lista de objetos File seleccionados como
un objeto FileList .
A continuacin, se muestra un ejemplo en el que se utiliza el atributo multiple para
permitir la seleccin simultnea de varios archivos:
<input type="file" id="files" name="files[]" multiple
<output id="list"></output>
function handleFileSelect(e) {
var files = e.target.files; // FileList
/>
object
// files is a FileList of File objects. List some properties.

var output = [];
output.push('<li><strong>', escape(f.name), '</strong> (', f.type ||
/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
list.innerHTML = '<ul>' + output.join('') + '</ul>';
}
files.addEventListener('change',
'n
handleFileSelect, false);
15.3 CMO LEER ARCHIVOS

Despus de obtener una referencia de File , podemos crear una instancia de un objeto
FileReader para leer su contenido y almacenarlo en memoria. Cuando finaliza la carga,
se lanza el evento onload y se puede utilizar su atributo result para acceder a los
datos del archivo.
A continuacin se indican las cuatro opciones de lectura asncrona de archivo que incluye
FileReader :
FileReader.readAsBinaryString(Blob|File) : la propiedad result contendr los
datos del archivo/objeto BLOB en forma de cadena binaria. Cada byte se representa
con un nmero entero comprendido entre 0 y 255 , ambos incluidos.
FileReader.readAsText(Blob|File, opt_encoding) : la propiedad result contendr
los datos del archivo/objeto BLOB en forma de cadena de texto. De forma

predeterminada, la cadena se decodifica con el formato UTF-8 . Podemos
especificar un parmetro de codificacin opcional para especificar un formato
diferente.
FileReader.readAsDataURL(Blob|File) : la propiedad result contendr los datos
del archivo/objeto BLOB codificados como una URL de datos.

FileReader.readAsArrayBuffer(Blob|File) : la propiedad result contendr los
datos del archivo/objeto BLOB como un objeto ArrayBuffer .

Una vez que se ha activado uno de estos mtodos de lectura en el objeto FileReader , se
pueden escuchar los eventos onloadstart , onprogress , onload , onabort , onerror y
onloadend para realizar un seguimiento de su progreso de lectura. En el ejemplo que se
muestra a continuacin, obtenemos las imgenes de los elementos seleccionados por el

usuario, leemos su contenido con reader.readAsDataURL() mostramos una miniatura de
la imagen:
<input type="file" id="files" name="files[]" multiple
<output id="list"></output>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList
/>
object
// Loop through the FileList and render image files as thumbnails.

// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].joi
n('');
list.insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
files.addEventListener('change',
handleFileSelect, false);
15.4 FRAGMENTACIN DE ARCHIVOS

En algunos casos, leer el archivo completo en memoria no es la mejor opcin.
Supongamos, por ejemplo, que se quiere crear una herramienta de subida de archivos
de forma asncrona. Para acelerar la subida, se podra leer y enviar el archivo en
diferentes fragmentos de bytes. El servidor se encargara de reconstruir el contenido del
archivo en el orden correcto.
Afortunadamente, la interfaz File nos proporciona un mtodo de fragmentacin de
ficheros. El mtodo utiliza un byte de inicio como primer argumento, un byte de
finalizacin como segundo argumento. El siguiente ejemplo muestra cmo leer un
fichero por partes:
var files = document.getElementById('files').files;
if (!files.length) {
alert('Please select a file!');
return;
}
var file = files[0];
var start = 0;
var stop = file.size - 1;
var reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('byte_content').textContent = e.target.result;
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('');
}
};
if (file.webkitSlice) {
var blob = file.webkitSlice(start, stop + 1);
} else if (file.mozSlice) {
var blob = file.mozSlice(start, stop + 1);
}
reader.readAsBinaryString(blob);
NDICE DE CONTENIDOS
File
File | HTML5
Deteccin de la funcionalidad
Acceso a travs del formulario
Cmo leer archivos
Fragmentacin de archivos
History | HTML5
HTML5
Anterior Siguiente
CAPTULO 16 HISTORY
El API history de HTML es la manera estndar de manipular el historial de navegacin a
travs de JavaScript. Partes de esta API ya se encontraban disponibles en versiones
anteriores de HTML. Ahora, HTML5 incluye una nueva manera de aadir entradas al
historial de navegacin, modificando la URL pero sin actualizar la pgina actual, y
eventos que se disparan cuando el usuario a eliminado estas entradas, pulsando el
botn de volver del navegador. Esto quiere decir que la barra de direcciones sigue
funcionando de la misma manera, identificando los recursos de manera nica, an
cuando las aplicaciones hacen un uso intensivo de JavaScript sin recargar la pgina.
Como sabemos, una URL representa un recurso nico. Podemos enlazarlo directamente,
almacenarlo como favorito, los motores de bsqueda pueden analizar su contenido,
podemos copiarlo y enviarlo por email... La URL realmente importa.
As pues, lo que queremos es que contenidos nicos dispongan de una URL nica. Hasta
ahora, el comportamiento normal de los navegadores recargar de nuevo la pgina si
modificbamos la URL, realizando una nueva peticin y obteniendo de nuevo todos los
recursos del servidor. No haba manera de decir al navegador que cambiase la URL pero
descargase nicamente la mitad de la pgina. El API history de HTML5 permite
precisamente esto. En lugar de solicitar la carga de toda la pgina, podemos utilizar
JavaScript para cargar nicamente los contenidos que deseemos.
La idea es la siguiente. Imaginemos que tenemos una pgina A y otra pgina B, que
comparten el 90% de su contenido. Cuando un usuario se encuentra en la pgina A, y
quiere navegar a la B, lo normal es realizar una peticin completa. En lugar de realizar
esta peticin, interrumpimos esta navegacin y realizamos los siguientes pasos de
manera manual:
1. Cargar el 10% de contenido diferente de la pgina B, a travs de algn mtodo
como AJAX.
2. Cambiar el contenido, utilizando innerHTML u otros mtodos del DOM. Es posible
que tengamos que reiniciar los eventos asociados a los elementos.
3. Actualizamos la URL del navegador, indicando la direccin de la pgina B, utilizando
el API history de HTML5.
Tras realizar estos pasos, disponemos de un DOM exacto al de la pgina B, como si
hubisemos navegado hasta ella, pero sin realizar una peticin completa.
16.1 API
El API de HTML4 ya inclua algunos mtodos bsicos para movernos a travs del historial
de navegacin, como eran history.back(); , history.forward() y history.go(n) . Sin
embargo, estos mtodos no permitan modificar la pila del historial, por lo que no eran
de gran utilidad. HTML5 ha introducido dos nuevos mtodos que nos permiten aadir y
modificar las entradas del historial, concretamente history.pushState() y
history.replaceState() . Adems de estos mtodos, se ha aadido tambin un evento
window.onpopstate , que es lanzado cada vez que alguna de las entradas de history
cambia.
16.1.1MTODO PUSHSTATE()
Supongamos que estamos visitando http://www.arkaitzgarro.com/html5/index.html y
a travs de un script realizamos la siguiente operacin:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "Demos", "demos.html");
Esto va a provocar que en la barra de direcciones se muestre

http://www.arkaitzgarro.com/html5/demos.html , pero el navegador no va a cargar
demos.html ni va a comprobar su existencia. En este punto, si navegamos a otra pgina
como http://www.google.es/ , y despus presionamos el botn de volver, en la URL se

mostrar http://www.arkaitzgarro.com/html5/demos.html y la pgina lanzar el evento
popstate , donde el estado contiene una copia de stateObj . La pgina que se mostrar
ser index.html , pero deberemos realizar un trabajo extra al lanzarse el evento para
mostrar el contenido correcto.
El mtodo pushState() toma tres parmetros: un objeto de estado, un ttulo y una URL:
El objeto de estado: es un objeto de JavaScript asociado con la nueva entrada del
historial creada con pushState() . Cada vez que el usuario navega al estado
creado, el evento popstate es disparado, y la propiedad state del evento contiene
una copia de este objeto. Este objeto puede representar cualquier que se pueda
serializar. Como este objeto se almacena en el disco, es posible recuperarlo aunque
el navegador se cierre. Los navegadores imponen un lmite de tamao a la hora de
almacenar estados (en el caso de Firefox 640KB ). Si se necesita ms espacio, es
recomendable utilizar sessionStorage o localStorage .
El ttulo: representa el nuevo ttulo de la pgina a la que navegamos.
La nueva URL: corresponde con la nueva URL que se aade al historial de
navegacin. Esta URL puede ser absoluta o relativa, la nica restriccin es que
corresponda al dominio del documento actual. Si no se especifica este parmetro, la
URL corresponde con el documento actual.
En esencia, ejecutar el mtodo pushState() es similar a definir window.location
"#foo" , ya que en ambos casos se crea y activa una nueva entrada en el historial
asociada con el documento actual. Pero pushState() ofrece las siguientes ventajas:
La nueva URL puede ser cualquier URL dentro del dominio actual. En cambio,
window.location = "#foo" se mantiene siempre en el documento actual.
No es necesario cambiar la URL actual para aadir una nueva entrada y almacenar
datos asociados.
Podemos asociar datos a una nueva entrada en el historial. Con el enfoque basado
en hash (#), los datos tenemos que aadirlos a la URL.
16.1.2MTODO REPLACESTATE()
El mtodo history.replaceState() funciona de manera similar a history.pushState() ,
a excepcin de que replaceState() modifica la entrada actual del historial, en lugar de
aadir una nueva. ste mtodo es til cuando queremos actualizar el objeto de estado
de la entrada actual en respuesta a una accin del usuario.
16.1.3EVENTO POPSTATE
El evento popstate es lanzado cada vez que la entrada actual del historial cambia por
otra entrada existente en el mismo documento. Si la entrada del historial que est
siendo activada fue creada a travs de history.pushState() o se modific con
history.replaceState() , el evento popstate recibe como parmetro una copia del
estado de la entrada del historial.

ste evento no se lanza cuando se llama a history.pushState() o
history.replaceState() . nicamente se dispara realizando una accin en el navegador
como pulsando el botn atrs o ejecutando history.back() en JavaScript. Un ejemplo

de este comportamiento:
window.onpopstate = function(event) {
alert(document.location + ", state: " +
};
JSON.stringify(event.state));
history.pushState({page: 1}, "title 1", "?page=1");

history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
// alerts "http://example.com/index.html?page=1, state: {"page":1}"
history.back();
// alerts "http://example.com/index.html, state: null
history.back();
// alerts "http://example.com/index.html?page=3, state: {"page":3}
history.go(2);
Cuando la pgina se carga, por ejemplo al reiniciar el navegador, tango Chrome como
Safari lanzan el evento popstate , pero no es el caso de Firefox. Sin embargo, en
este caso, es posible acceder a los datos almacenados en pushState desde la
propiedad state del objeto history .
window.onload = function() {
var currentState = history.state;
}
NDICE DE CONTENIDOS
History
16.1 API
XMLHttpRequest2 | HTML5
HTML5
Anterior Siguiente
CAPTULO 17 XMLHTTPREQUEST2
XMLHttpRequest forma parte de las mejoras incrementales que los creadores de
navegadores estn implementando a la plataforma base.
XMLHttpRequest de nivel 2 introduce una gran cantidad de nuevas funciones que ponen
fin a los problemas de nuestras aplicaciones web, como solicitudes de origen cruzado,
eventos de progreso de subidas y compatibilidad con subida/bajada de datos binarios.
Esto permite a AJAX trabajar en coordinacin con muchas de las API HTML5 ms
punteras, como API de FileSystem, el API de Web Audio y WebGL.
17.1 RECUPERACIN DE ARCHIVOS

Recuperar archivos como blob binario era muy complicado con XHR . Tcnicamente, no
era ni siquiera posible. Un truco que se ha documentado mucho implicaba anular el tipo
mime con un conjunto de caracteres definido por el usuario, como se muestra a
continuacin.
La antigua forma de recuperar una imagen:
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png',
true);
// Hack to pass bytes through unprocessed.

xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function(e) {
if (this.readyState == 4 && this.status == 200)
{ var binStr = this.responseText;
for (var i = 0, len = binStr.length; i < len; ++i)
{ var c = binStr.charCodeAt(i);
//String.fromCharCode(c & 0xff);
var byte = c & 0xff; // byte at offset i
}
}
};
xhr.send();
Aunque funciona, lo que se obtiene realmente en responseText no es un blob binario,
sino una cadena binaria que representa el archivo de imagen. Estamos engaando al
servidor para que devuelva los datos sin procesar.
17.2 ESPECIFICACIN DE UN FORMATO DE RESPUESTA

En lugar de realizar la accin del ejemplo anterior, vamos a aprovechar las nuevas
propiedades de XMLHttpRequest ( responseType y response ) para indicar al
navegador el formato en el que queremos que nos devuelva los datos.
xhr.responseType : antes de enviar una solicitud, establece xhr.responseType en
text , arraybuffer , blob o document , en funcin de los datos que necesites. Ten
en cuenta que si se establece xhr.responseType = '' (o si se omite), se utilizar la

respuesta predeterminada text .
xhr.response : despus de una solicitud correcta, la propiedad response de xhr
contendr los datos solicitados como DOMString , ArrayBuffer , Blob o Document

(en funcin del valor establecido para responseType).
Con esto, podemos recuperar la imagen como ArrayBuffer en lugar de como una
cadena. Al transferir el bfer al API BlobBuilder se crea un Blob :
BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobB
uilder;
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var bb = new BlobBuilder();
bb.append(this.response); // Note: not
var blob =
...
xhr.responseText
bb.getBlob('image/png');
}
};
xhr.send();
Si se quiere trabajar directamente con un Blob o no se necesita manipular ni un solo

byte del archivo, utilizaremos xhr :
responseType='blob':
window.URL = window.URL
|| window.webkitURL;
// Take care of vendor
prefixes.

xhr.responseType = 'blob';
if (this.status == 200) {
var blob = this.response;
var img = document.createElement('img');
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // Clean up after
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
...
yourself.
}
};
xhr.send();
17.3 ENVO DE DATOS

Durante algn tiempo, XMLHttpRequest nos ha limitado a enviar datos DOMString o
Document (XML). Pero eso se acab. Se ha anulado un mtodo send() y rediseado para
aceptar todos estos tipos: DOMString, Document, FormData, Blob, File y ArrayBuffer .
Envo de la cadena de datos: xhr.send(domstring)
sendText('test string'); function sendTextNew(txt)
{ var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.responseType = 'text';
if (this.status == 200)
{ console.log(this.response
);
}
};
xhr.send(txt);
}
sendText2('test string');
Envo de formularios: xhr.send(formdata)
function sendForm() {
var formData = new FormData();
formData.append('username', 'johndoe');
formData.append('id', 123456);
xhr.onload = function(e) { ... };
xhr.send(formData);
}
Por supuesto, no es necesario crear un objeto <form> desde cero. Los objetos FormData
se pueden inicializar a partir de un elemento HTMLFormElement de la pgina. Por
ejemplo:
<form id="myform" name="myform"
action="/server">
<input type="text" name="username" value="johndoe">

<input type="number" name="id" value="123456">
<input type="submit" onclick="return sendForm(this.form);">
</form>
function sendForm(form) {
var formData = new FormData(form);
formData.append('secret_token',
'1234567890');

xhr.open('POST', form.action, true);
xhr.send(formData);
return false; // Prevent page from
submitting.
Un formulario HTML puede incluir subidas de archivos (como <input type="file"> ) y

FormData tambin. Simplemente se aade el archivo o los archivos y el navegador
construir una solicitud multipart/form-data cuando se ejecute send() :

function uploadFiles(url, files) {
var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i)
{ formData.append(file.name, file);
}
xhr.open('POST', url, true);
xhr.send(formData);
// multipart/form-data
}
document.querySelector('input[type="file"]').addEventListener('change', functio
n(e) {
uploadFiles('/server', this.files);
}, false);
17.4 SUBIDA DE ARCHIVOS O BLOB

Tambin podemos enviar datos de File o Blob con XHR .
En este ejemplo se crea un texto nuevo desde cero con el API lobBuilder y se sube
ese Blob` al servidor. El cdigo tambin configura un controlador para informar
al usuario sobre el progreso de la subida:
function upload(blobOrFile) {
// Listen to the upload progress.
var progressBar = document.querySelector('progress');
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progressBar.value = (e.loaded / e.total) * 100;
progressBar.textContent = progressBar.value; // Fallback for
orted browsers.
}
};
xhr.send(blobOrFile);
}
// Take care of vendor prefixes. BlobBuilder = window.MozBlobBuilder ||

window.WebKitBlobBuilder || window.BlobBuilder;
unsupp
XMLHttpRequest2 | HTML5
bb.append('hello world');
upload(bb.getBlob('text/plain'));
17.5 SUBIDA DE UN FRAGMENTO DE BYTES

Y por ltimo, podemos enviar ArrayBuffer como la carga de XHR.
function sendArrayBuffer() {
var uInt8Array = new Uint8Array([1, 2,
3]);
xhr.send(uInt8Array.buffer);
}
17.6 EJEMPLOS PRCTICOS
6.1 CMO DESCARGAR Y GUARDAR ARCHIVOS EN EL SISTEMA DE

ARCHIVOS HTML5
Supongamos que tienes una galera de imgenes y quieres recuperar un grupo de
imgenes para, a continuacin, guardarlas localmente con el sistema de archivos
HTML5. Una forma de conseguir esto sera solicitar imgenes como ArrayBuffer ,
crear un Blob a partir de los datos y escribir el blob con FileWriter :
window.requestFileSystem
eSystem;
= window.requestFileSystem
|| window.webkitRequestFil
function onError(e)
{ console.log('Error',
e);
}
xhr.responseType = 'arraybuffer';
window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs)
{ fs.root.getFile('image.png', {create: true}, function(fileEntry)
{
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) { ... };

writer.onerror = function(e) { ... };
bb.append(xhr.response);
writer.write(bb.getBlob('image/png'));
}, onError);
}, onError);
}, onError);
};
xhr.send();
17.6.2 CMO DIVIDIR UN ARCHIVO Y SUBIR CADA FRAGMENTO

Con las API de archivo, podemos minimizar el trabajo necesario para subir un archivo de
gran tamao. La tcnica es dividir el archivo que se va a subir en varios fragmentos,
crear un XHR para cada parte y unir los fragmentos en el servidor. Es similar a la forma
en que Gmail sube archivos adjuntos tan grandes en tan poco tiempo.
window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder ||
window.BlobBuilder;
function upload(blobOrFile) {
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', functio
n(e) {
var blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
if ('mozSlice' in blob) {
var chunk = blob.mozSlice(start, end);
} else {
var chunk = blob.webkitSlice(start, end);
}
upload(chunk);
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);
})();
NDICE DE CONTENIDOS
XMLHttpRequest2
Recuperacin de archivos
Especificacin de un formato de respuesta
Envo de datos
Subida de archivos o Blob
Subida de un fragmento de bytes
Ejemplos prcticos
Ejercicios | HTML5
HTML5
Anterior Siguiente
CAPTULO 18 EJERCICIOS
18.1 CAPTULO 2
18.1.1 EJERCICIO 1
Dada la siguiente pgina web, estructurada en XHTML, aplicar las nuevas etiquetas
semnticas de HTML5 donde sea conveniente, manteniendo el mismo aspecto visual
(modificar la hoja de estilos si es necesario) y funcionalidad. Realizad tambin los
cambios necesarios en la cabecera del documento (elemento <head> ).
Descargar pgina web.
18.2 CAPTULO 3
18.2.1 EJERCICIO 2
Crear un formulario que contenga lo siguiente:
Los 12 nuevos tipos de elementos input .
El nuevo elemento datalist , que contenga algunos nombres de provincia y
un campo de texto que se relacione con l.
Una caja de texto (<input type="text"> ), a la cual aplicar los atributos autofocus ,
placeholder , required y autocomplete .
Una caja de texto que slo pueda contener nmeros (<input type="number">
), cuyos valores tienen que estar comprendidos entre 0 y 10.
Un campo de seleccin de ficheros (<input type="file"> ), al que aplicar el atributo
multiple .
Un campo de introduccin de password (<input type="password"> ), donde el

valor introducido debe cumplir lo siguiente: debe tener una longitud mnima de 8
caracteres, comenzar por un nmero y terminar en una letra mayscula.
Un nuevo elemento progress que represente el avance de completado de campos
del formulario.
Acceder al formulario desde al menos 4 navegadores (2 de escritorio y 2 de dispositivos
mviles), y comprobad el comportamiento y funcionamiento en cada elemento del
formulario. Anotad dichos resultados en una hoja de clculo para futuras referencias.
18.3 CAPTULO 4
18.3.1 EJERCICIO 3
Identificar las siguientes caractersticas de al menos 4 navegadores (2 de escritorio y 2
de dispositivos mviles):
Cules de los 12 nuevos tipos de input soporta el navegador.
Qu codecs de reproduccin de vdeo soporta cada navegador.
Qu sistema(s) de almacenamiento local soporta cada navegador.
18.3.2 EJERCICIO 4
Identificar si el navegador soporta el atributo placeholder . En caso de no soportar
dicha funcionalidad, cargar el polyfill correspondiente para aadir dicha funcionalidad al
navegador.
18.4 CAPTULO 5
18.4.1 EJERCICIO 5
A partir del siguiente HTML, realizar los siguientes pasos:
<ul>
<li class="user" data-name="Arkaitz Garro" data-city="Donostia"
data-lang="es" data-food="Txuleta">Arkaitz Garro</li>
<li class="user" data-name="John Doe" data-city="Boston"
data-lang="en" data-food="Bacon">John Doe</li>
<li class="user" data-name="Divya Resig" data-city="Tokyo"
data-lang="jp" data-food="Sushi" data-delete="true">Divya Resig</li>
</ul>
Obtener cada uno de los atributos data- de los elementos de la lista, y mostrarlos
por consola.
Modificar el idioma es por es_ES .
Eliminar los elementos de la lista cuyo atributo data-delete sea true .
18.5 CAPTULO 6
18.5.1 EJERCICIO 6
Crear un reproductor de vdeo que cumple las siguientes caractersticas:
Reproducir los vdeos independientemente del codec soportado por el navegador.
Incluir controles de reproduccin, pausa, parar, avanzar y retroceder 10 segundos,
inicio y fin.
Control de volumen y paso a pantalla completa.

Un indicador de progreso de la reproduccin.
Aadir una lista de reproduccin que permita seleccionar un nuevo vdeo, y ste se
reproduzca sin recargar la pgina.
Figura 18.1 Aspecto final del reproductor
18.6 CAPTULO 7
18.6.1 EJERCICIO 7
Dibujar sobre un elemento canvas, un stickman con un aspecto final similar al que se
muestra a continuacin. Seguir las siguiente indicaciones como ayuda:
El tamao inicial del canvas es de 200px del ancho y 300px de alto.
Utilizar un rectngulo negro para pintar todo el fondo del canvas.
Dibujar la cabeza con un arco completo, en las coordenadas ( 100,50 ), y un radio
de
30px .
La sonrisa corresponde con un semiarco rojo (#c00 ), con inicio de

coordenadas ( 100,50 ) y un radio de 20px .
Los ojos son dos circunferencias rojas situadas en las coordenadas ( 90,45 ) y
( 110,45 ) y de radio 3px .
Figura 18.2 Resultado final del stickman
18.7 CAPTULO 8
18.7.1 EJERCICIO 8
Implementad las siguientes funcionalidades utilizando SessionStorage y LocalStorage :
Crear una caja de texto, a modo de editor de contenidos, y utilizando
SessionStorage almacenar el contenido de la caja en cada pulsacin de tecla. Si la
pgina es recargada, el ltimo contenido almacenado debe mostrarse en la caja de
texto. Comprobad que cerrando la pestaa actual, o abriendo una nueva ventana,
los datos no se comparten.
Modificar el cdigo anterior para utilizar LocalStorage . Comprobad que en este
caso, aunque cierre la ventana o abra una nueva, los datos se mantienen. Aadir la
posibilidad de actualizar el resto de ventanas abiertas, cada vez que se modifique el
valor de la caja de texto en cualquiera de ellas.
18.7.2 EJERCICIO 9
Crear un objeto que encapsule una base de datos WebSQL, que nos permitar acceder a
una base de datos para aadir, modificar, eliminar y obtener registros. Dicha base de
datos va a almacenar tweets procedentes de Twitter, que tienen asociado el hashtag
#html5. Los requisitos son los siguientes:
Disponer de una tabla para almacenar los tweets. Los campos mnimos son:
identificador del tweet, texto, usuario, y fecha de publicacin.
Disponer de una tabla para almacenar los usuarios que publican los tweets. Esta
tabla debe estar relacionada con la anterior. Los campos mnimos son: identificador
del usuario, nombre e imagen.
Crear un mtodo addTweet que dado un objeto que corresponde con un tweet, lo
almacene en la base de datos. Almacenar el usuario en caso de que no exista, o
relacionarlo con el tweet si existe.
Crear un mtodo removeTweet que dado un identificador de tweet, lo elimine de la
base de datos. ste mtodo debe devolver el tweet eliminado.
Crear un mtodo updateTweet que dado un objeto que corresponde con un tweet,
actualice los datos correspondientes al tweet en la base de datos.
Crear un mtodo getTweets que dado un parmetro de fecha, me devuelva todos
los tweets posteriores a esa fecha. Cada tweet debe incluir sus datos completos y el
usuario que lo cre.
Obtener los ltimos 25 tweets que tienen como hashtag #html5 de la siguiente consulta
a Twitter: http://search.twitter.com/search.json? q=
%23html5&rpp=25&result_type="recent"
Consultad la API de Twitter para identificar el formato del resultado, nombres de campos,
etc.
18.7.3 EJERCICIO 10
Crear un objeto que encapsule una base de datos IndexedDB, que nos permitar acceder
a una base de datos para aadir, modificar, eliminar y obtener registros. Dicha base de
datos va a almacenar una sencilla lista de tareas pendientes. Los requisitos son los
siguientes:
Disponer de un almacn de tareas pendientes. Sus propiedades son: un identificador
nico que acta como ndice, el texto descriptivo, una propiedad que nos indique si
la tarea est completada o no y la fecha/hora de creacin.
Crear un mtodo addTask que dado un objeto que corresponde con una tarea, lo
almacene en la base de datos.
Crear un mtodo removeTask que dado un identificador de una tarea, lo elimine de
la base de datos. ste mtodo debe devolver la eliminada.
Crear un mtodo updateTask que dado un identificador de una tarea, actualice los
datos correspondientes a la tarea en la base de datos.
Crear un mtodo getTasks que dado un parmetro booelano completado, nos
devuelva las tareas que se encuentran completadas o no.
18.8 CAPTULO 9
18.8.1 EJERCICIO 11
Cread una pgina HTML que muestre la hora local de vuestro ordenador, y la hora del
servidor de www.google.es. Los clculos de hora local y obtencin de hora del servidor,
deben crearse en ficheros separados. El comportamiento es el siguiente:
Todos los ficheros necesarios para realizar el ejercicio deben ser cacheados, a
excepcin del javascript que solicita la peticin al servidor.
Las peticiones de hora al servidor www.google.es se realizan a travs de Ajax, en
intervalos de 1 segundo. Dichas peticiones no deben realizarse si no existe
conexin. En tal caso, se muestra un mensaje al usuario indicando que se ha
perdido la conexin.
Si se recarga la pgina, y no existe conexin, utilizar un fallback para la obtencin
de la hora del servidor, que muestre un mensaje al usuario indicando que se ha
perdido la conexin.
Figura 18.3 Resultado del ejercicio con conexin
Figura 18.4 Resultado del ejercicio sin conexin

Utilizad el siguiente cdigo para obtener la hora de un servidor:
function srvTime(url){
var xmlHttp = new XMLHttpRequest();

xmlHttp.open('HEAD',url,false);
xmlHttp.setRequestHeader("Content-Type", "text/html");
xmlHttp.send(null);
return xmlHttp.getResponseHeader("Date");
}
var st = srvTime("https://www.google.es/");
var date = new Date(st);
18.9 CAPTULO 10
18.9.1 EJERCICIO 12
Implementar un carrito de la compra que permita arrastrar los productos a la cesta, y
calcule el precio total de la compra. El proceso es el siguiente:
Al pasar con el ratn sobre una imagen, el puntero cambia de aspecto ( cursor:
move; ) y se permite arrastrar el contenido.
Al arrastrar el elemento, la zona que contiene la cesta de la compra se ilumina.

Al soltar la imagen sobre la cesta de la compra, aade el producto si no exista,
mostrando la imagen, el nombre del producto, la cantidad de productos en la cesta
(en este caso 1) y el coste total para ese producto.
Al soltar la imagen sobre la cesta de la compra, si el producto ya se encontraba en
la cesta, actualiza la cantidad de productos y su precio.
Posibles mejoras para este ejercicio:
Aadir la posibilidad de eliminar los productos de la cesta de la compra,
arrastrndolos desde la propia cesta y soltndolos en cualquier parte de la pgina.
En este caso, mostraramos un mensaje de confirmacin de eliminacin del
producto.
Mantener una persistencia de datos para la cesta de la compra, que el actualizar la
pgina no se pierdan los productos introducidos.
Descargar sitio web.
Figura 18.5 Aspecto inicial de la cesta de la compra
18.10
CAPTULO 11
18.10.1 EJERCICIO 13
Utilizando los servicios de geolocalizacin, realizar las siguientes tareas:
Solicitar las coordenadas actuales, y mostrar dichas coordenadas (y la precisin)
tanto en formato texto como un punto en el mapa.
Haciendo uso del entorno de desarrollo de Android (emulador y SDK) y la
herramienta DDMS, indicar al dispositivo una posicin GPS concreta.
Posteriormente, modificar la implementacin para solicitar continuamente la
posicin del dispositivo. En la herramienta DDMS, utilizar el fichero de rutas GPX
que se proporciona y mostrar cada nuevo punto en el mapa.
Figura 18.6 Posicin actual en el mapa
18.11 CAPTULO 12
Crear un Web worker que dado un nmero entero, calcule todos los nmeros primos
comprendidos entre 1 y dicho nmero.
Proporcionaremos a este Worker un nmero entero, y devolver un array con todos los
nmeros primos encontrados. Mostrar el listado de nmeros primos en el documento
principal.
Figura 18.7 Resultado tras calcular los nmeros primos
18.12 CAPTULO 13
Implementar un servicio de chat, utilizando tecnologa Web Socket, a partir del cdigo
proporcionado, que se describe a continuacin.
Se dispone de un servidor de chat, basado en Node.js, al cual deben conectarse los
usuarios del chat. La direccin del servidor es ws://www.arkaitzgarro.com:1337 .
Se proporciona la interfaz bsica (HTML y JavaScript) para desarrollar la aplicacin.
Es necesario implementar la conexin con el servidor y el intercambio de mensajes,
as como la actualizacin de la interfaz.
El protocolo de mensajes es el siguiente:
El primer mensaje a enviar al servidor es el nick. Tomad el valor de la caja de
texto y enviarla al servidor como una cadena de texto.
Una vez estamos "registrados" en el servidor, ste puede comenzar a enviarnos
mensajes, tanto los existentes hasta el momento, como los nuevos que se
produzcan por otros usuarios. Estos mensajes (en formato JSON)
corresponden con un objeto JavaScript, cuya estructura se muestra a
continuacin.
Finalmente, para enviar los mensajes de texto del usuario, enviamos la cadena
de texto directamente al servidor.

// Mensaje de tipo "color"
{
type : "color",
data : "" // Valor del color asignado por el
}
servidor
// Mensaje de tipo "history"

{
type : "history",
// Un array que contiene los ltimos mensajes enviados
data : [{author, text, color, time}]
}
// Mensaje de tipo "message"
{
type : "message",
// Un objeto que contiene un mensaje enviado por otro usuario
data : {author, text, color, time}
}
Figura 18.8 Resultado final del chat
NDICE DE CONTENIDOS
Ejercicios
Captulo 2
Captulo 3
Captulo 4
Captulo 5
Captulo 6
Captulo 7
Captulo 8
Captulo 9
Captulo 10
18.10 Captulo 11
18.11 Captulo 12
18.12 Captulo 13
Semntica | HTML5
HTML5
Anterior Siguiente
CAPTULO 2 SEMNTICA
Una de las novedades que hemos mencionado anteriormente son las etiquetas que se
han introducido en HTML5. Existen ms de 30 nuevas etiquetas semnticas que pueden
ser utilizadas en nuestras pginas estticas. Estas nuevas etiquetas se podran clasificar
en dos grupos:
Etiquetas que extienden a las actuales, como <video> , <audio> o <canvas> , y
que adems aaden nuevas funcionalidades a los documentos HTML, que
podemos controlar desde JavaScript y
etiquetas que componen la web semntica, es decir, que no proponen nuevas
funcionalidades pero sirven para estructurar sitios web, y aadir un significado
concreto, ms all de las etiquetas generales como <div> .
En este captulo, veremos como transformar nuestra estructura actual de marcado
basada en <div> , a una estructura que utiliza las nuevas etiquetas estructurales
como
<nav> , <header> , <footer> , <aside> , o <article> .
2.1 CABECERA DEL DOCUMENTO

Adems de las nuevas etiquetas introducidas por HTML5 (que veremos ms adelante), el
nuevo estndar propone pequeas mejoras que podemos aplicar en la definicin de
nuestros documentos, en concreto en la cabecera de los mismos.
2.1.1 DOCTYPE
El estndar XHTML deriva de XML, por lo que comparte con l muchas de sus normas y
sintaxis. Uno de los conceptos fundamentales de XML es la utilizacin del DTD o
Document Type Definition ("Definicin del Tipo de Documento"). El estndar XHTML
define el DTD que deben seguir las pginas y documentos XHTML. En este documento se
definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de
valores que puede tener cada atributo.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
sta es una de las 15 declaraciones posibles declaradas en los estndares HTML4 y

XHTML. En HTML5 se reduce la definicin del tipo de documento a una nica posibilidad,
por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto:
<!DOCTYPE html>
2.1.2 ELEMENTO RAZ HTML

En todo documento HTML, su elemento raz o nodo superior siempre es la etiqueta
<html> . Hasta ahora, este elemento raz se defina de la siguiente manera:
<html xmlns=http://www.w3.org/1999/xhtml
lang="en"
xml:lang="en">
No hay ningn problema en mantener esta sintaxis. Si se desea, se puede conservar, ya

que es vlido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias, por
lo que podemos eliminarlas.
El primer elemento del que podemos prescindir es el atributo xmlns . Se trata de una
herencia de XHTML 1.0, que dice que los elementos de esta pgina estn en el espacio
de nombres XHTML, http://www.w3.org/1999/xhtml . Sin embargo, los elementos de
HTML5 estn siempre en este espacio de nombres, por lo que ya no es necesario
declararlo explcitamente. Eliminar el atributo xmlns nos deja con este elemento de la
siguiente manera:
<html lang="es" xml:lang="en">
En este caso ocurre lo mismo con el atributo xml:lang , es una herencia de XHTML
que podemos eliminar, quedando finalmente la etiqueta de la siguiente manera:
<html lang="en">
2.1.3 ELEMENTO HEAD

El primer hijo del elemento raz es generalmente el elemento head . El elemento head
contiene los metadatos que aportan informacin extra sobre la pgina, como su ttulo,
descripcin, autor, etc. Adems, puede incluir referencias externas a contenidos
necesarios para que el documento se muestre y comporte de manera correcta (como
hojas de estilos o scripts). Este elemento ha sufrido pequeas variaciones, pero que
debemos tener en cuenta:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style-original.css" />
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"

href="opensearch.xml"
/>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
2.1.3.1 CODIFICACIN DEL CONTENIDO

Cuando se piensa en "texto", probablemente nos venga a la cabeza una definicin de
"caracteres y smbolos que veo en la pantalla de mi ordenador". Pero realmente se
tratan de bits y bytes. Cada cadena de caracteres que se muestra en la pantalla, se
almacena con una codificacin de caracteres en particular. Hay cientos de codificaciones
de caracteres diferentes, algunos optimizado para ciertos idiomas como el ruso, el chino
o ingls, y otros que se pueden utilizar para mltiples idiomas. En trminos generales, la
codificacin de caracteres proporciona una correspondencia entre lo que se muestra en
la pantalla y lo que un equipo realmente almacena en la memoria y en el disco.
Se puede pensar en la codificacin de caracteres como una especie de clave de
descifrado del texto. Cuando accedemos a una secuencia de bytes, y decidimos que es
"texto", lo que necesitamos saber es qu codificacin de caracteres se utiliza para que
pueda decodificar los bytes en caracteres y mostrarlos (o transformarlos) de manera
correcta.
Lo ideal es establecer esta codificacin en el servidor, indicando el tipo en las cabeceras
de respuesta:
Content-Type: text/html;
charset="utf-8"
Por desgracia, no siempre podemos tener el control sobre la configuracin de un servidor

HTTP. Por ejemplo, en la plataforma Blogger, el contenido es proporcionado por
personas, pero los servidores son administrados por Google, por lo que estamos
supeditados a su configuracin. An as, HTML 4 proporciona una manera de especificar
la codificacin de caracteres en el documento HTML:
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
El encabezado HTTP es el mtodo principal, y anula la etiqueta <meta> si est presente.

Pero no todo el mundo puede establecer encabezados HTTP, por lo que la etiqueta
<meta> todava tiene sentido. En el caso de HTML5, es an ms sencillo definir esta
etiqueta meta:
<meta charset="utf-8">
Debemos acostumbrarnos a especificar la codificacin de nuestros documentos, aunque

no vayamos a utilizar caracteres especiales o nuestro documentos no se presente en
otros idiomas. Si no lo hacemos, podemos exponernos a problemas de seguridad.
2.1.3.2 LINKS
Dentro del elemento head , las etiquetas <link> son una manera de acceder o declarar
contenido externo al documento actual, que puede cumplir distintos objetivos:
Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al
presente documento.
Es un feed que contiene el mismo contenido que esta pgina, pero en un formato
estndar (RSS).
Es una traduccin de esta pgina en otro idioma.
Es el mismo contenido que esta pgina, pero en formato PDF.
Es el prximo captulo de un libro en lnea de la cual esta pgina es tambin una
parte.
En HTML5, se separan estas relaciones de enlace en dos categoras:
Enlaces a recursos externos que se van a utilizar para mejorar el documento actual,
y enlaces de hipervnculos que son enlaces a otros documentos.
El tipo de relacin ms utilizado (literalmente) es el siguiente:
<link rel="stylesheet" href="style-original.css" type="text/css"
/>
Esta relacin es utilizada para indicar el archivo donde se almacenan las reglas CSS que
se desean aplicar al documento. Una pequea optimizacin que se puede hacer en
HTML5 es eliminar el atributo type . Slo hay un lenguaje de estilo para la web, CSS,
as que ese es el valor predeterminado para el atributo type :
<link rel="stylesheet" href="style-original.css"
/>
2.2 NUEVAS ETIQUETAS SEMNTICAS

En 2004, Ian Hickson, el autor de la especificacin de HTML5, analiz 1.000.000.000 de
pginas web utilizando el motor de Google, intentando identificar la manera en la que la
web real estaba construida. Uno de los resultados de este anlisis, fue la publicacin de
una lista con los nombres de clases ms utilizados. Este estudio revela que los
desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto
llev a considerar que quizs fuese una buena idea crear etiquetas concretas para
reflejar estas estructuras.
Este tipo de etiquetas que componen la web semntica nos sirven para que cualquier
mecanismo automtico (un navegador, un motor de bsqueda, un lector de feeds...) que
lea un sitio web sepa con exactitud qu partes de su contenido corresponden a cada una
de las partes tpicas de un sitio. Observando esas etiquetas semnticas estructurales,
cualquier sistema podr procesar la pgina y saber cmo est estructurada. Veamos
algunas de estas etiquetas que introduce HTML5 en este sentido.
<section></section> : se utiliza para representar una seccin "general" dentro
de un documento o aplicacin, como un captulo de un libro. Puede contener

subsecciones y si lo acompaamos de h1-h6 podemos estructurar mejor toda la
pgina creando jerarquas del contenido, algo muy favorable para el buen
posicionamiento web.
<article></article> : representa un componente de una pgina que consiste en
una composicin autnoma en un documento, pgina, aplicacin, o sitio web con la

intencin de que pueda ser reutilizado y repetido. Podra utilizarse en los artculos
de los foros, una revista o el artculo de peridico, una entrada de un blog, un
comentario escrito por un usuario, un widget interactivo o cualquier otro artculo
independiente de contenido. Cuando los elementos de <article> son anidados, los
elementos interiores representan los artculos que en principio son relacionados con
el contenido del artculo externo. Por ejemplo, un artculo de un blog que permite
comentarios de usuario, dichos comentarios se podran representar con <article> .
<aside></aside> : representa una seccin de la pgina que abarca un contenido
relacionado con el contenido que lo rodea, por lo que se le puede considerar un

contenido independiente. Este elemento puede utilizarse para efectos tipogrficos,
barras laterales, elementos publicitarios, para grupos de elementos de la
navegacin, u otro contenido que se considere separado del contenido principal de
la pgina.
<header></header> : representa un grupo de artculos introductorios o de
navegacin. Est destinado a contener por lo general la cabecera de la seccin (un

elemento h1-h6 o un elemento hgroup ), pero no es necesario.
<nav></nav> : representa una seccin de una pgina que enlaza a otras pginas o
a otras partes dentro de la pgina. No todos los grupos de enlaces en una pgina
necesita estar en un elemento nav , slo las secciones que constan de bloques de
navegacin principales son apropiados para el elemento de navegacin.
<footer></footer> : representa el pie de una seccin, con informacin acerca de la
pgina/seccin que poco tiene que ver con el contenido de la pgina, como el autor,
el copyright o el ao.
<hgroup></hgroup> : representa el encabezado de una seccin. El elemento se
utiliza para agrupar un conjunto de elementos h1-h6 cuando el ttulo tiene varios
niveles, tales como subttulos o ttulos alternativos.
<time> : representa o bien una hora (en formato de 24 horas), o una fecha
precisa en el calendario gregoriano (en formato ISO), opcionalmente con un

tiempo y un desplazamiento de zona horaria.
2.3 ESTRUCTURA DE UN DOCUMENTO HTML5

Como hemos visto con las nuevas etiquetas semnticas introducidas en HTML5, stas
aportan un significado concreto al documento que estamos definiendo, y por lo tanto,
afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver
como podemos convertir nuestra actual pgina con las nuevas etiquetas introducidas en
HTML5.
2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4

El siguiente cdigo muestra una estructura "clsica" de documento HTML, donde los
diferentes contenidos de la web se encuentran agrupados por etiquetas <div> . Por s
mismas, estas etiquetas no aportan ningn tipo de significado, y el atributo id tampoco
se lo proporciona. Si cambiamos <div id="header"> por <div id="whatever"> , el
significado sigue siendo el mismo, ninguno.
<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id="header">
<h1>My Weblog</h1>
<p class="tagline">
</p>
</div>
<div id="nav">
<ul>
</ul>
</div>
<div class="articles">
<div class="article">
<p class="post-date">October 22, 2009</p>
<h2>
</h2>
</div>
<div class="comments">
</div>
</div>
</div>
<div class="aside">
</div>
<div id="footer">
<p>§</p>
</div>
</body>
</html>
2.3.2 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML5

Veamos como podemos aadir un significado a este documento, nicamente aplicando
las nuevas etiquetas semnticas incluidas en HTML5.
<!DOCTYPE html>
<html>
<body>
<header>
<hgroup>
<h1>Title</h1>
</h2>
</hgroup>
</header>
<nav>
<ul>
</ul>
</nav>
<section class="articles">
<article>
<time datetime="2009-10-22">October 22, 2009</time>
<h2>
</h2>
</div>
<section class="comments">
</section>
</article>
</section>
<aside>
</aside>
<footer>
<p>§</p>
</footer>
</body>
</html>
Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debemos
utilizar. Esto no siempre es as, y cuando estructuramos contenidos de mucho mayor
alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar
en la correcta seleccin de etiquetas, es el que proponen en HTML5 Doctor.
2.4 USO DE LAS NUEVAS ETIQUETAS SEMNTICAS

2.4.1<HEADER>
Segn la especificacin, un elemento <header> representa lo siguiente:
Un grupo de navegacin o contenido introductorio. Un elemento header
normalmente contiene una seccin de encabezado (un elemento h1-h6 o un
elemento hgroup), pero puede contener otro tipo de elementos, como una tabla de
contenidos, un formulario de bsqueda o cualquier logo importante.
En nuestro ejemplo, y en la mayora de los sitios web, la cabecera contiene los primeros
elementos de la pgina. Tradicionalmente el ttulo de la web, su logo, enlaces para
volver al inicio... De la manera ms simple, nuestra cabecera quedara de esta forma:
<header>
<a href="/"><img src=logo.png
<h1>Title</h1>
</header>
alt="home"></a>
Tambin es muy comn que los sitios web muestren un lema o subttulo bajo el ttulo
Semntica | HTML5
principal. Para dar mayor importancia a este subttulo, y relacionarlo de alguna manera
con el ttulo principal de la web, es posible agrupar los dos titulares bajo un elemento
<hgroup> .
<header>
<hgroup>
<h1>Title</h1>
</h2>
</hgroup>
</header>
2.4.2<NAV>
Segn la especificacin, un elemento <nav> representa lo siguiente:
El elemento <nav> representa una seccin de una pgina que enlaza con otras
pginas o partes de la misma pgina: una seccin con enlaces de navegacin.
El elemento <nav> ha sido diseado para identificar la navegacin de un sitio web. La
navegacin se define como un conjunto de enlaces que hacen referencia a las secciones
de una pgina o un sitio, pero no todos los enlaces son candidatos de pertenecer a un
elemento <nav> : una lista de enlaces a patrocinadores o los resultados de una
bsqueda, no forman parte de la navegacin principal, sino que corresponden con el
contenido de la pgina.
Como ocurre con los elementos <header> , <footer> y el resto de nuevas etiquetas, no
estamos obligados a utilizar un nico elemento <nav> en toda la pgina. Es posible que
tengamos una navegacin principal en la cabecera de la pgina, una tabla de contenidos
o enlaces en el pie de la pgina, que apuntan a contenidos secundarios. Todos ellos son
candidatos a pertenecer a un elemento <nav> .
<nav>
<ul>
</ul>
</nav>
2.4.3<FOOTER>
Segn la especificacin, un elemento <footer> representa lo siguiente:
Representa el pie de una seccin. Un pie tradicionalmente contiene informacin

acerca de su seccin, como quin escribi el contenido, enlaces relacionados,
copyright y similares.
Al igual que ocurre con el elemento <nav> , podemos tener tantos elementos <footer>
como sea necesario. Lo normal es que nuestro sitio web disponga de al menos un pie
principal, que contiene los avisos legales (privacidad, condiciones del servicio,
copyright...), mapa del sitio web, accesibilidad, contacto y otros muchos enlaces que
pueden ir incluidos en un elemento <nav> .
2.4.4<ARTICLE>
Segn la especificacin, un elemento <article> representa lo siguiente:
Este elemento representa un contenido completo, auto-contenido en un documento,
pgina, aplicacin o sitio web, que es, en principio, independiente de ser distribuido
y reutilizado, por ejemplo en un RSS. Puede ser un post de un foro, un artculo de
un peridico o revista, una entrada de un blog, un comentario de un usuario, un
widget o cualquier otro elemento independiente.
Cuando los artculos estn anidados, los artculos interiores representan contenido
que en principio est relacionado con el artculo que los contiene. Por ejemplo, una
entrada de un blog puede aceptar comentarios de usuarios, que estn incluidos
dentro del contenido principal y relacionados con el mismo.
Por lo tanto, la etiqueta <article> se utiliza para encapsular contenido, que tiene
significado en s mismo, y que puede ser distribuido y reutilizado en otros formatos de
datos. No nos referimos nicamente a contenidos clsicos de texto, sino que incluso un
contenido multimedia con su transcripcin, un mapa o email pueden ser totalmente
vlidos para ser incluidos en una etiqueta <article> .
<section>
<h1>Comments</h1>
<article id="c1">
<footer>
<p>Posted by: <span>George Washington</span></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article id="c2">
<footer>
<p>Posted by: <span itemprop="name">George Hammond</span></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
2.4.5<SECTION>
A diferencia del elemento <article> , este elemento es utilizado para dividir el
documento (o artculos) en diferentes reas, o como su propio nombre indica, en
secciones. Segn la especificacin, un elemento <section> representa lo siguiente:
Representa una seccin genrica de un documento o aplicacin. Una seccin, en
este contexto, es un grupo temtico de contenido, que generalmente incluye una
cabecera.
Consideremos el siguiente marcado vlido en HTML 4:
En este caso, y desde un punto de vista semntico, es complicado deducir si el texto Vital
caveat about the information above: does not apply on the first Thursday of the month.
pertenece al contenido completo o est relacionado con la seccin Fan Club uniforms.
Gracias a la etiqueta <section> , es muy sencillo separar e identificar a qu
seccin pertenece cada contenido:
<article>
<section>
</section>
<section>
</section>
</article>
<article>
<section>
</section>
<section>
</section>
</article>
Como podemos observar en los dos ejemplos anteriores, es muy sencillo agrupar
contenido que pertenece a una misma seccin, permitiendo incluirlo dentro de un
contexto semntico.
Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro documento
en secciones, que incluyen contenido de temticas diferentes entre s. Si adems
queremos separar estos contenidos visualmente en dos columnas, lo lgico sera utilizar
las tradicionales etiquetas <div> para agrupar los artculos segn su temtica, y
posteriormente aplicar estilos CSS o JavaScript para presentarlos en forma de pestaas.
En este caso, la etiqueta <div> no nos aporta ningn significado semntico, tan slo
estructural. La etiqueta <section> es la encargada de aadir semntica en estos casos:
<section>
<h1>Articles about llamas</h1>
<article>
<h2>The daily llama: Buddhism and South American
<p>blah blah</p>
</article>
<article>
<h2>Shh! Do not alarm a llama</h2>
<p>blah blah</p>
</article>
</section>
<section>
<h1>Articles about root vegetables</h1>
<article>
<h2>Carrots: the orange miracle</h2>
<p>blah blah</p>
</article>
camelids</h2>
<article>
<h2>Eat more Swedes (the vegetables, not the
<p>blah blah</p>
</article>
</section>
people)</h2>
2.4.6<ASIDE>
Segn la especificacin, un elemento <aside> representa lo siguiente:
Una seccin de una pgina que consiste en contenido tangencialmente relacionado
con el contenido alrededor del elemento, y puede considerarse separado de este
contenido. Estas secciones son normalmente representadas como elementos
laterales en medios impresos. Este elemento puede utilizarse contener citas,
anuncios, grupos de elementos de navegacin y cualquier otro contenido separado
del contenido principal de la pagina.
Dentro de un artculo, por ejemplo, puede ser utilizado para mostrar contenido
relacionado como citas u otros artculos relacionados.
2.4.7<FIGURE>
Segn la especificacin, un elemento <figure> representa lo siguiente:
The figure element represents some flow content, optionally with a caption, that is
self-contained and is typically referenced as a single unit from the main flow of
the document.
The element can be used to annotate illustrations, diagrams, photos, code listings,
etc. This includes, but is not restricted to, content referred to from the main part
of the document, but that could, without affecting the flow of the document, be
moved away from that primary content, e.g. to the side of the page, to dedicated
pages, or to an appendix.
Hasta ahora, no haba una manera correcta de poder aadir un subttulo o una leyenda a
un contenido concreto, como explicar una figura o atribuir una imagen a un fotgrafo.
Gracias a la etiqueta <figure> podemos contener una imagen (o un vdeo, ilustracin o
bloque de cdigo) en un elemento y relacionarlo con un contenido concreto:
<figure>
<img src="welcome.jpg" alt="Alternative text">
<figcaption>
Bruce and Remy welcome questions
<small>Photo © Bruces mum</small>
</figcaption>
</figure>
En conveniente recordar que el atributo alt indica el texto a mostrar cuando la imagen
no est disponible, y no est pensada para contener una descripcin de la imagen, y
mucho menos para duplicar lo ya indicado en la etiqueta <figcaption> .
Ejercicio 1
Ver enunciado
2.5 ATRIBUTOS GLOBALES

HTML5 tambin incluye nuevos atributos globales que pueden ser asignados a cualquier
elemento. Son los siguientes:
2.5.1 ACCESSKEY
El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que
permite activar un elemento a asignarle el foco. Este atributo ya exista en HTML 4,
aunque ha sido utilizado en muy pocas ocasiones. Como HTML5 est pensado para
aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no
ha sido eliminado, y ahora est disponible para cualquier elemento.
Para evitar conflictos con otros atajos de teclado, o con los propios del navegador, ahora
esta etiqueta permite asignar alternativas en este atributo. Un ejemplo incluido en la
especificacin:
<input type="search" name="q" accesskey="s
0">
Esto quiere decir que este elemento es accesible a travs de dos atajos de teclado, a
travs de la tecla s o a travs de la tecla 0 (en ese orden).
2.5.2 CONTENTEDITABLE
Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta
contenteditable es ahora parte de la especificacin oficial.
La introduccin de esta etiqueta significa principalmente dos cosas:

Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta
etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar
una marca que indique la posicin actual del cursor.
Y segundo, es posible cambiar el formato del texto del contenido, aadiendo
negritas, cambiar la fuente, aadir listas, etc.
Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder
desde JavaScript a este atributo, hay que tener en cuenta su notacin lowerCamelCase,
siendo el nombre de la propiedad del DOM contentEditable . Adems, existe otra
propiedad llamada isContentEditable , que indica si el elemento es editable o no.
Finalmente, el contenido que ha sido seleccionado por el usuario, puede ser objeto de
modificaciones, como hemos comentado antes. A travs del comando
element.execCommand() es posible indicar el tipo de modificacin (poner en negrita,
copiar, cambiar la fuente...), siempre que el documento se haya indicado como editable.
document.designMode = 'on';
Si se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al

servidor. No existe ningn API o mtodo en JavaScript que nos posibilite esta accin, por
lo que debemos utilizar algn tipo de tecnologa tipo AJAX.
2.5.3 DATA-* (CUSTOM DATA ATTRIBUTES)

HTML5 permite crear atributos personalizados para los elementos. Estos atributos son
utilizados para pasar informacin a JavaScript. Como veremos en el captulo
correspondiente, hasta ahora se utilizaba el atributo class para de alguna manera
almacenar informacin asociada con elementos, pero esto cambia radicalmente con
estos atributos.
June">Carrots</li>
March">Celery</li>
</ul>
2.5.4 DRAGGABLE
Este atributo indica que el elemento indicado puede ser arrastable. Lo veremos en el
captulo correspondiente.
NDICE DE CONTENIDOS
Semntica
Atributos globales

HTML5

Cargado por

Copyright:

Formatos disponibles

HTML5

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML5

Cargado por

Copyright:

Formatos disponibles

HTML5

Utilizacin de los data attributes

DRAG AND DROP

15.1 Deteccin de la funcionalidad

17.1 Recuperacin de archivos

17.2 Especificacin de un formato de respuesta

17.3 Envo de datos

17.4 Subida de archivos o Blob

17.5 Subida de un fragmento de bytes

17.6 Ejemplos prcticos

El archivo de manifiesto de cach

Cmo servir el manifiesto

Actualizacin de la memoria cach

SOBRE ESTA EDICIN

Almacenamiento local en el lado del cliente.

1.1 ESPECIFICACIN OFICIAL

1.2.2 NO HAY QUE TIRAR NADA A LA BASURA

1.2.3 FCIL DE COMENZAR

La actualizacin al doctype HTML5 no rompe el marcado existente, ya que los elementos

1.2.5 HA VENIDO PARA QUEDARSE

2.1 CABECERA DEL DOCUMENTO

sta es una de las 15 declaraciones posibles declaradas en los estndares HTML4 y

2.1.2 ELEMENTO RAZ HTML

No hay ningn problema en mantener esta sintaxis. Si se desea, se puede conservar, ya

2.1.3 ELEMENTO HEAD

title="My Weblog search"

2.1.3.1 CODIFICACIN DEL CONTENIDO

Por desgracia, no siempre podemos tener el control sobre la configuracin de un servidor

El encabezado HTTP es el mtodo principal, y anula la etiqueta <meta> si est presente.

Debemos acostumbrarnos a especificar la codificacin de nuestros documentos, aunque

2.2 NUEVAS ETIQUETAS SEMNTICAS

de un documento o aplicacin, como un captulo de un libro. Puede contener

una composicin autnoma en un documento, pgina, aplicacin, o sitio web con la

relacionado con el contenido que lo rodea, por lo que se le puede considerar un

navegacin. Est destinado a contener por lo general la cabecera de la seccin (un

precisa en el calendario gregoriano (en formato ISO), opcionalmente con un

2.3 ESTRUCTURA DE UN DOCUMENTO HTML5

2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4

<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

2.3.2 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML5

en la correcta seleccin de etiquetas, es el que proponen en HTML5 Doctor.

2.4 USO DE LAS NUEVAS ETIQUETAS SEMNTICAS

Representa el pie de una seccin. Un pie tradicionalmente contiene informacin

2.5 ATRIBUTOS GLOBALES

La introduccin de esta etiqueta significa principalmente dos cosas:

Si se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al

2.5.3 DATA-* (CUSTOM DATA ATTRIBUTES)

Elementos de formulario | HTML5

CAPTULO 3 ELEMENTOS DE FORMULARIO

formulario que mejoran la experiencia del usuario y facilitan el desarrollo de los

3.1 NUEVOS TIPOS DE INPUT

Figura 3.1 Campo de tipo email en un dispositivo iOS

Figura 3.2 Campo de tipo url en un dispositivo iOS

Figura 3.3 Campo de tipo date en un dispositivo iOS

Figura 3.4 Campo de tipo time en un dispositivo iOS

Figura 3.5 Campo de tipo datetime en un dispositivo iOS

Figura 3.6 Campo de tipo month en un dispositivo iOS

Figura 3.7 Campo de tipo week en Google Chrome

Figura 3.8 Campo de tipo number en un dispositivo iOS