Temario Curso HTML5

1 Introducción a HTML5 y CSS3
– Ventajas de HTML5, diferencias entre HTML4 y HTML5 …
2 Etiquetas de HTML5
– Nuevas etiquetas, hojas de estilo, links en head, otras relaciones de links, etiquetas
obsoletas, estructura HTML5 …
3 Formularios web
– Nuevos campos, validación de cliente, atributo Type, estilos …
4 Propiedades de CSS3
– Novedades en CSS3, selectores, transiciones…
5 Canvas y dibujado
– Aplicaciones de uso, API de canvas, imágenes, gradientes, canvas en Internet Explorer …
6 Audio y vídeo
– Contenedores de vídeo, codecs de vídeo, codecs de audio, video en HTML5, alternativas
con HTML5+JS, etiqueta …
7 Guardar preferencias de usuario

– Conceptos previos, introducción a WebStorage, SessionStorage, LocalStorage, APIs de
WebStorage, interfaz de WebStorage …
8 Web Sockets
– Motivación, introducción, ventajas, cómo usar WebSockets …
9 Geolocalización
– Introducción, API de geolocalización, soporte, uso de geolocalización, manejo de errores,
opciones de uso …
10 Web Workers
– Introducción a los Web Workers, uso de Web Workers, APIs de comunicación,
manejando errores, soporte de navegadores, nuestro primer worker, uso del worker en
segundo plano, introducción a los workers compartidos …
11 WebGL
– Introducción a WebGL, preparado para renderizar en 3D, contexto WebGL, añadiendo
2D e iluminación …
12 Drag & Drop

– Introducción, eventos, cómo utilizarlo, transferir información con dataTransfer, tipos para
dataTransfer, uso de imágenes fantasma, efectos …
12 Sprites CSS
– Ventajas, preparando CSS Sprite, ¿cómo funciona SpriteMe? …
13 jQuery Mobile
– Estructura, enlaces, diálogos, elementos, eventos …
Introducción a HTML5 y CSS3
Las principales diferencias entre HTML5 y HTML4

Estamos en un momento del desarrollo web muy activo, llevamos cierto tiempo con gran cantidad
de cambios, nuevas tendencias y sobretodo nuevas necesidades. Por esto me siento afortunado
de estar viviendo esta oleada de cambios que a mi parecer algún día terminarán.
Un cambio que ahora estamos viviendo es el nacimiendo de HTML5, una nueva revisión del
estandard que mueve Internet y hace posble que ahora estemos interactuando (los usuarios que
leen la página).
El aumento de necesidades han dado lugar a la aparición de nuevos tags, el debate sobre el uso de
otros y cambios más o menos importantes pero que debemos conocer.
1. Sintaxis
El término HTML posee una sintaxis compatible con HTML4 y XHTML1 publicados en la red, pero
no compatible con las características más esotéricas del SGML de HTML4.
HTML5 define detalladas reglas de parse, incluyendo un control de errores, para que esta sintaxis
sea compatible con las implementaciones más populares. Los agentes de usuario seguirás las
mismas reglas que para los que actualmente tienen text/html.
El otro sintaxis que se puede utilizar para HTML5 es el llamado XHTML5, que no es más que una
sintaxis compatible con XML y documentos correctos en XHTML1. Los documentos servidos con
esta sintaxis deben ser servidos mediante el MIME application/xml.
2. Codificación de carácteres
Al igual que sus hermanos menores, seguiremos podiendo definir el charset de nuestro
documento mediante el tag <meta charset="UTF-8" > o la correspondiente versión de XML para
XHTML5.
2.2. El DOCTYPE
El nuevo HTML5 requiere el elemento DOCTYPE que debe ser declarado al proncipio de la página,
de esta forma nos aseguramos de que el navegador renderiza la página en modo estandard. En
cambio para la versión XHTML5 este elemento es opcional debido a que XML actua de diferente
manera dentro de nuestro navegador.
<!DOCTYPE html >
3.1. Modelos estrictos de contenidos

HTML5 define de forma más estricta el contenido para elementos <div /> y <li />. Estos elementos
ahora pueden contener contenido de elementos “block” o “inline” pero no los dos. En HTML4 esto
fue considerado como un bug de la espeficación ya que permitía el uso de ambos.
Permitido:
<div>
<em>…</em> //contenido inline
…
</div>
<div>
<p><em>…</em></p>
<p>…</p> //Contenido block
</div>
pero no permite esto:
<div>
<em>…</em>
<p>…</p>
</div>
Otro cambio afecta al elemento <tfoot />, ahora podrá aparecer al final de la página, al igual que
directamente despues del elemento <thead />.
<table border="1">
<caption>Nombre de la tabla</caption>
<thead>
<tr>
<th scope="col">COLUMNA 1</th>
<th scope="col">COLUMNA 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>DATOS 1</td>
<td>DATOS 2</td>
</tr>
<tr>
<td>DATOS 3</td>
<td>DATOS 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col">PIE 1</th>
<th scope="col">PIE 2</th>
</tr>
</tfoot>
</table>
3.2. Nuevos elementos
Los tiempos modernos requieren nuevos elementos para proporcionar una web más semántica,
completa y homogénea. Para ello se han añadido una buena serie de elementos que nos
permitirán encapsular más nuestro contenido.
<article /> elemento que nos permite declarar un trozo del contenido como artículo. Ideal para
blogs o periódicos.
<aside /> representa un trozo de contenido que se relaciona muy levemente con el resto del
contenido.
<dialog /> elemento que permite representar conversaciones.
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
<figure /> podrás usarlo para asociar con un caption un contenido incrustado, como por
ejemplo gráficos o vídeo:
<figure>
<video src=ogg>…</video>
<legend>Example</legend>
</figure>
<footer /> parece que me han leido la mente o quizas leyeron este post. Sección de la página
para contener información sobre el autor, copyright, etc,…
<header /> representa a la sección de cabecera.
<nav /> representa la sección de la página orientada a la navegación.
<section /> elemento que indica que se trata de una sección genérica.
<audio /> y <video /> para el contenido multimedia.
<embed /> es un elemento dedicado para contenido de plugins.
<m /> representa el texto marcado.
<meter /> usado para representar medidas, por ejemplo el tamaño del disco usado…
<time /> usado para mostrar fechas y/o tiempo.
<canvas /> usado para mostrar gráficos renderizados en tiempo real, por ejemplo gráficos,
juegos, etc,…
<commnad /> relacionado con los comandos que el usuario puede invocar.
<datagrid /> ideal para mostrar un arbol de datos o una tabla tabulada.
<details /> muestra información adicionar si el usuario lo demanda.
<datalist /> junto con el nuevo atributo list para los <input /> puede ser usado para crear
comboboxes:
<input list=browsers>
<datalist id=browsers>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
<event-sources /> puede ser usado para capturar eventos enviados desde servidor.
<output /> nos indica que tipo de salida vamos producir con nuestra página.
<progress /> representa una barra de proceso de una tarea, por ejemplo descargar,…
Los elementos de entrada <input /> dispondrán de una serie de tipos (type) nuevos para indicar
los diferentes tipos de elementos de entrada posibles.
datetime
datetime-local
date
month
week
time
number
range
email
url
La idea es que estos tipos sean proporcionados por el agente de usuario (navegador) en su
interface que enviarán el formato definido al servidor.
Etiquetas de HTML5
Etiquetas semánticas de HTML5, como HEADER, ARTICLE, SECTION, ASIDE, FOOTER, NAV, FIGURE,
TIME, ...
Lo primero que conviene remarcar es que HTML5 no es un lenguaje nuevo en contraposición a

HTML, sino una nueva versión del mismo lenguaje. También hay que recordar que HTML5
incorpora cambios en profundidad que los navegadores antiguos no son capaces de mostrar, por
lo tanto que hay que tener actualizado el navegador.
Las etiquetas semánticas ayudan a definir la estructura del documento y permiten que las páginas
web sean mejor indexadas por los buscadores.
Una etiqueta se califica como semántica si tiene que ver el significado, es decir, si nos informa
sobre lo que trata su contenido. Por ejemplo, la etiqueta SECTION nos dice que contiene una
sección o capítulo dentro de la página. Frente a las etiquetas semánticas tenemos otros tipos de
etiquetas como las que afectan al formato, como UL, a multimedia, como VIDEO, etc.
El esquema de una página con etiquetas semánticas podría ser el siguiente.
Antes de la existencia de las etiquetas semánticas, el contenido se estructuraba con etiquetas DIV
que no aportaban ninguna información sobre el tema que trataban, salvo que se añadiese
aprovechando el valor dado a la propiedad ID, o a la propiedad CLASS para hacer referencia a su
contenido.
Las etiquetas a las que vamos a prestar más atención en este artículo son las que definen la
estructura general del sitio ( HEADER, ARTICLE, SECTION, ASIDE, FOOTER, NAV ) aunque también
existen otra nuevas etiquetas semánticas que señalan elementos concretos de la página como la
etiqueta FIGURE, para imágenes y gráficos, la etiqueta FIGCAPTION, que es un pie de imagen, la
etiqueta TIME para definir fechas y horas, también MAIN, MARK, SUMARY Y DETAILS.
Por ejemplo, el código siguiente produce el resultado que se ve a continuación utilizando las
etiquetas FIGURE y FIGCAPTION.
<figure>
<img src="graficos/fallas.jpg" alt="The Pulpit Rock" width="499" height="340">
<figcaption>Fig.1 - Falla de la plaza del Ayuntamiento de Valencia.</figcaption>
</figure>
"Las fallas son las fiestas de la ciudad de Valencia (España). Una falla es un monumento de
madera, pintura y poliestireno que puede llegar a los 30 m. de atura, y que se quema el dia 19 de
Marzo."
Fig.1 - Falla de la plaza del Ayuntamiento de Valencia.
Descripción de las etiquetas semánticas

Vamos a ver con un poco más de detalle las características de cada etiqueta.
- HEADER
Se utiliza como una introducción del elemento que la contiene. Si colocamos un HEADER en el
BODY, a primer nivel, será una introducción o presentación de toda la página. Si colocamos un
HEADER dentro de un SECTION, contendrá una introducción a esa sección. También se pueden
colocar dentro de un ARTICLE.
El HEADER suele llevar el título, la descripción corta y el logo de la página. El HEADER por si mismo
no separa contenidos, no se debe utilizar aislado, sino dentro de otra etiqueta semántica, o a
primer nivel en el BODY.
El HEADER no es equivalente a la parte superior de la página, aunque frecuentemente está en esa

posición. La etiqueta HGROUP que se solía utilizar junto con el HEADER ha quedado obsoleta.
Es bastante frecuente utilizar las etiquetas H1, H2, ... para escribir los títulos dentro del
HEADER.html5 logo
- SECTION
Una SECTION agrupa contenido con un tema común, por ejemplo, las diferentes partes de un
periódico: política, sociedad, deportes, ...
Un sitio de cocina podría estar organizado en secciones. Una SECTION podría ser recetas de carne,
otra recetas de pescado y otra de verduras. Dentro de cada SECTION tendríamos un ARTICLE por
cada receta.
Cada SECTION puede estar encabezada por una etiqueta H1, H2,... dentro de una SECTION suelen
haber etiquetas ARTICLE, y también etiquetas DIV y P.
Una SECTION no debe ser usada con el único fin de dar formato, para eso se utiliza la etiqueta DIV.
- ARTICLE
Representa una unidad de contenido, es decir, contenido que responde a un tema concreto. El
ejemplo más claro es un artículo dentro de una revista, por ejemplo, en una página de cocina, un
ARTICLE sería cómo elaborar un determinado plato. En un foro, un ARTICLE sería un post, o
entrada en el foro.
Se pueden anidar un ARTICLE dentro de otro ARTICLE. Dentro de un ARTICLE el contenido se suele
estructurar con las etiquetas DIV y P. También está permitido poner dentro de un ARTICLE una
SECTION, siempre que el artículo sea largo y tenga diferentes secciones, pero lo más natural es
que el ARTICLE vaya dentro de una SECTION. Más adelante trataremos cómo crear estructuras de
páginas complejas, con tres niveles.
- NAV
Esta etiqueta está pensada para contener la barra de navegación o los enlaces a las páginas del
sitio web.
Normalmente va en la parte superior de la página o en un lateral. Suele estar formada por una
lista de enlaces con las etiquetas UL y LI. Aunque hay multitud de diseños diferentes de barras de
navegación y menús.
- ASIDE
Esta etiqueta está diseñada para contenido tangencial, es decir, menos importante que el cuerpo
de la página, y que suele ser de un tema relacionado indirectamente (o no relacionado) con el
tema principal. Se suele colocar en los laterales de la página. Pero no todo lo que va en los
laterales es ASIDE. Por ejemplo, si la página tiene publicidad en el lateral derecho, puede colocarse
en una etiqueta ASIDE, también una pequeña reseña sobre el autor podría ir en esta etiqueta.
- FOOTER
Normalmente va al final de la página y contiene información del tipo: autor, copyright, contacto,
mapa del sitio, etc. Se pueden poner HEADER y FOOTER dentro de SECTION y ARTICLE, aunque no
es lo más normal. No hay nada prohibido, pero debe tener cierta lógica o sentido semántico.
El uso de las etiquetas semánticas es bastante simple e intuitivo, según las características de cada
una que acabamos de ver. Realmente no existen normas fijas, cada diseñador puede darles el uso
que considere más apropiado. El único límite es el sentido común, no debemos perder de vista
que los buscadores las utilizarán para indexar la página, por lo tanto, nos interesa usar las
etiquetas semánticas con la lógica para la que fueron diseñadas.
Es importante aclarar que las etiquetas semánticas no añaden ningún formato. Es decir, por usar
NAV no se crea un menú, ni el HEADER tiene un tipo de letra más grande. El formato debemos
definirlo nosotros de la forma habitual, con CSS. La excepción es que muchos navegadores
incorporan la propiedad display: block a las etiquetas semánticas.
Veamos un ejemplo sencillo. Un sitio de cocina con dos secciones, artículos dentro de cada
sección, una cabecera, un pie y publicidad.
Esta es la estructura básica:

<body>
<header>
<h1 >Recetas de cocina</h1>
<nav>
<a href="#" >Carnes</a>
<a href="#" >Pescados</a>
</nav>
</header>
<section >
<h2>Recetas de carne</h2>
<article>
<h3>Conejo al ajillo</h3>
<p>Explicación de la receta 1</p>
</article>
<article>
<h3>Cordero al horno</h3>
</article>
</section>
<section >
<h2>Recetas de pescado</h2>
<article>
<h3>Dorada a la sal</h3>
</article>
</section>
<aside>
<p>Publicidad</p>
</aside>
<footer>
<p>autor: Programaspyme</p>
</footer>
</body>
Ahora le daremos un poco de formato, añadiendo esta hoja de estilo:
body {
font-family:Verdana,sans-serif;font-size:0.9em;
header {
margin:5px;margin-bottom:15px;padding:8px;
font-family: Arial, Helvetica, sans-serif;
color:blue
footer {
font-style:italic;
font-size:0.8em;
section {
margin-left:25px;
font-style:italic
article {
margin-left:25px;
font-style:normal;
color:green;
font-family: Arial, Helvetica, sans-serif;
aside {
background-color:#ddd;
nav ul {
margin:0;padding:0; background-color:#a44
nav ul li {
display:inline; margin:15px;
p{
color:black;
</style>
<article>
<h3>Conejo al ajillo</h3>
<div class="descripcion">
<p>Una de las formas más tradicionales de preparar el conejo es esta, con abundantes
ajos.</p>
<p><img src="../graficos/conejos-al-ajillo.jpg" alt="Conejo al ajillo" width="400"
height="218" align="right" /></p>
</div>
<div class="ingredientes">
<h4>Ingredientes:</h4>
<ul>
<li> 1 conejo</li>
<li> 1 cabeza ajos</li>
<li> 1 vaso vino blanco</li>
<li> aceite</li>
<li> sal</li>
</ul>
</div>
<div class="elaboracion">
<h4>Elaboracion:</h4>
<p class="elaboracion">Primero partimos el conejo en trozos pequeños y ponemos a
freírlos en una sartén con abundante aceite, a fuego lento. Le añadimos el vino y
esperamos a que se dore.</p>
</div>
</article>
Además de usar DIV para crear más niveles, también se pueden poner DIV utilizándolos para dar
formato y por lo tanto pueden abarcar SECTION, ARTICLE y HEADER. En nuestro último ejemplo,
hemos utilizado un DIV que contiene SECTION, ARTICLE y FOOTER, para poder colocar la
publicidad en una columna a la derecha en la etiqueta ASIDE.
<div id="columna_izquierda">
<section >
... resto contenido ...
</div>
ELEMENTOS DE FORMULARIO
HTML5 hace que el desarrollo de formularios sea mucho más sencillo. Se han añadido dos nuevos
métodos que pueden ser utilizados en la acción del formulario (update y delete), pero lo más
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 añaden 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 especificación de HTML5 define 12 nuevos tipos de input que podemos utilizar en nuestros
formularios. Esta especificación no define cómo deben mostrarse los nuevos tipos en los
navegadores, ni los campos ni las validaciones. De hecho, y gracias a cómo está especificado
HTML, los navegadores que no comprendan los nuevos tipos de entrada, mostrarán un campo de
texto tradicional, por lo que la compatibilidad con navegadores antiguos está garantizada.
3.1.1 TIPO EMAIL
El nuevo tipo <input type="email"> indica al navegador que no debe permitir que se envíe el
formulario si el usuario no ha introducido una dirección de email válida, pero no comprueba si la
dirección existe o no, sólo si el formato es válido. Como ocurre con el resto de campos de entrada,
puede enviar este campo vacío a menos que se indique que es obligatorio.
El atributo multiple indica que el valor de este campo, puede ser una lista de emails válidos,
separados por comas.
Campo de tipo <code>email</code> en un dispositivo iOS

Figura 3.1 Campo de tipo email en un dispositivo iOS
3.1.2 TIPO URL
El nuevo tipo <input type="url"> indica al navegador que no debe permitir que se envíe el
formulario si el usuario no ha introducido una URL correcta. Algunos navegadores ofrecen ayudas
al usuario, como Opera que añade el prefijo http:// a la URL si el usuario no lo ha introducido. Una
URL no tiene que ser necesariamente una dirección web, sino que es posible utilizar cualquier
formato de URI válido, como por ejemplo tel:555123456.
Campo de tipo <code>url</code> en un dispositivo iOS

Figura 3.2 Campo de tipo url en un dispositivo iOS
3.1.3 TIPO DATE
El nuevo tipo <input type="date"> es de los más esperados y útiles. En muchos de los sitios web es
normal disponer de campos específicos 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 envían al servidor cumplen la norma ISO para el formato de fechas.
Campo de tipo <code>date</code> en un dispositivo iOS

Figura 3.3 Campo de tipo date en un dispositivo iOS
3.1.4 TIPO 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 más complejo
como un reloj de agujas.
Campo de tipo <code>time</code> en un dispositivo iOS

Figura 3.4 Campo de tipo time en un dispositivo iOS
3.1.5 TIPO DATETIME
Este nuevo tipo de campo es la combinación de los tipos date y time, por lo que se valida tanto la
fecha como la hora introducida.
Campo de tipo <code>datetime</code> en un dispositivo iOS

Figura 3.5 Campo de tipo datetime en un dispositivo iOS
3.1.6 TIPO MONTH
El nuevo tipo <input type="month"> permite la selección de un mes en concreto. La

representación 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.
Campo de tipo <code>month</code> en un dispositivo iOS

Figura 3.6 Campo de tipo month en un dispositivo iOS
3.1.7 TIPO WEEK
El nuevo tipo <input type="week"> permite la selección de una semana del año concreta. La
representación 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 representación interna de la semana 7, por
ejemplo, es la siguiente: 2013-W07.
Campo de tipo <code>week</code> en Google Chrome

Figura 3.7 Campo de tipo week en Google Chrome
3.1.8 TIPO NUMBER

Como es de esperar, el nuevo tipo <input type="number"> valida la entrada de un tipo de dato
numérico. Este tipo de campo encaja perfectamente con los atributos min, max y step, que
veremos más adelante.
Campo de tipo <code>number</code> en un dispositivo iOS

Figura 3.8 Campo de tipo number en un dispositivo iOS
3.1.9 TIPO 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 imágenes, funcionalidad
y accesibilidad, siendo ahora mucho más sencillo. Este tipo de campo encaja de nuevo
perfectamente con los atributos min, max y step, que veremos más adelante.
Campo de tipo <code>range</code> en Google Chrome

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 número de teléfono. No se realiza
ninguna validación, ni se obliga a que únicamente se proporcionen caracteres numéricos, ya que
un número de teléfono 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 números de teléfono.
Campo de tipo <code>tel</code> en un dispositivo iOS

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 término de búsqueda. La

diferencia con un campo de texto normal, es únicamente estética, aunque puede ofrecer alguna
funcionalidad extra como un histórico de últimos términos introducidos o una ayuda para el
borrado. Por norma general, toma el aspecto de un campo de búsqueda del navegador o sistema
operativo.
Campo de tipo <code>search</code> en Google Chrome

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
selección de colores del sistema operativo.
Campo de tipo <code>color</code> en Google Chrome

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 además un nuevo atributo, list, que hace referencia a otro
elemento, permitiendo crear un nuevo tipo de entrada de datos.
3.2.1 ATRIBUTO LIST Y <DATALIST>
La combinación 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.
Nuevo elemento <code>datalist</code>, asociado a un campo de texto

Figura 3.13 Nuevo elemento datalist, asociado a un campo de texto
3.2.2 ATRIBUTO AUTOFOCUS
El atributo booleano autofocus permite definir que control va a tener el foco cuando la página se
haya cargado. Hasta ahora, esto se conseguía a través de JavaScript, utilizando el método .focus()
en un elemento concreto, al cargarse el documento. Ahora es el navegador el encargado de esta
tarea, y puede comportarse de manera más inteligente, como no cambiando el foco de un
elemento si el usuario ya se encuentra escribiendo en otro campo (éste era un problema común
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 página, como en un buscador,
por ejemplo.
3.2.3 ATRIBUTO PLACEHOLDER
Una pequeña mejora en la usabilidad de los formularios, suele ser colocar un pequeño texto de
ayuda en algunos campos, de manera discreta y que desaparece cuando el usuario introduce algún
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>.
Atributo <code>placeholder</code> en un campo de búsqueda

Figura 3.14 Atributo placeholder en un campo de búsqueda
3.2.4 ATRIBUTO REQUIRED
Este atributo puede ser utilizado en un <textarea> y en la gran mayoría 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 envío del formulario si el campo en concreto está vacío.
Atributo <code>required</code> en un campo de texto

Figura 3.15 Atributo required en un campo de texto
3.2.5 ATRIBUTO 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.6 ATRIBUTO AUTOCOMPLETE
Algunos navegadores suelen incluir alguna funcionalidad de autocompletado en algunos campos

de formulario. A pesar de haber sido introducido recientemente en el estándar de HTML5, es una
característica que lleva mucho tiempo siendo utilizada, concretamente desde la versión 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.7 ATRIBUTOS 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. También es posible utilizarlo en otro tipo de campos como date, para especificar
fechas mínimas o máximas.
<input type="date" min="2010-01-01" max="2010-12-31">

Atributos <code>min</code> y <code>max</code> en un campo numérico
Figura 3.16 Atributos min y max en un campo numérico
3.2.8 ATRIBUTO 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 múltiplos de 5, lo haríamos de
la siguiente manera:
<input type="range" mix="0" max="100" step="5">
3.2.9 ATRIBUTO PATTERN
Algunos de los tipos de input que hemos visto anteriormente (email, number, url...), son
realmente expresiones regulares que el navegador evalúa cuando se introducen datos. El atributo
pattern nos permite definir una expresión regular que el valor del campo debe cumplir. Por
ejemplo, si el usuario debe introducir un número seguido de tres letras mayúsculas, podríamos
definir esta expresión regular:
<input pattern="[0-9][A-Z]{3}" name="part"

title="A part number is a digit followed by three uppercase letters.">
La especificación indica que la sintaxis de la expresión 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 razón que fuese (principalmente diseño) un elemento tuviese que
mostrarse apartado del resto de elementos del formulario, se hacía casi necesario incluir toda la
página 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 página, siempre que los relacionemos
con el formulario concreto a través 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
Además de los nuevos tipos de input incluidos en la especificación, se han añadido 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 ejecución de una

tarea, como puede ser la descarga de un fichero o la ejecución de una tarea compleja. Define los
siguientes atributos:
max: define el trabajo total a realizar por la tarea, la duración de un vídeo... 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 sólo lectura que representa la posición actual del elemento <progress>. Este
valor es igual a value/max y -1 si no se puede determinar la posición.
Las unidades son arbitrarias, y no se especifican.
<progress value="5" max="20">5</progress>

Nuevo elemento 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 número que
aparece en el contenido del elemento. Su valor por defecto es 0.
min: el mínimo 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
mínimo definido sea mayor que 1, en cuyo caso el valor de max será igual a min.
low: es considerado el límite inferior del rango de valores.
max: es considerado el límite 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>
Nuevo elemento meter
Figura 3.18 Nuevo elemento meter
EJERCICIOS
18.1 CAPÍTULO 2
18.1.1 EJERCICIO 1
Dada la siguiente página web, estructurada en XHTML, aplicar las nuevas etiquetas
semánticas de HTML5 donde sea conveniente, manteniendo el mismo aspecto visual
(modificar la hoja de estilos si es necesario) y funcionalidad. Realizad también los
cambios necesarios en la cabecera del documento (elemento <head>).
Descargar página web.
18.2 CAPÍTULO 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 sólo pueda contener números (<input type="number">),
cuyos valores tienen que estar comprendidos entre 0 y 10.
 Un campo de selección de ficheros (<input type="file">), al que aplicar el
atributo multiple.
 Un campo de introducción de password (<input type="password">), donde el valor
introducido debe cumplir lo siguiente: debe tener una longitud mínima de 8
caracteres, comenzar por un número y terminar en una letra mayúscula.
 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 móviles), y comprobad el comportamiento y funcionamiento en cada
elemento del formulario. Anotad dichos resultados en una hoja de cálculo para futuras
referencias.
18.3 CAPÍTULO 4
18.3.1 EJERCICIO 3
Identificar las siguientes características de al menos 4 navegadores (2 de escritorio y 2

de dispositivos móviles):
 Cuáles de los 12 nuevos tipos de input soporta el navegador.

 Qué codecs de reproducción de vídeo 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 añadir dicha funcionalidad al
navegador.
18.4 CAPÍTULO 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 CAPÍTULO 6
18.5.1 EJERCICIO 6
Crear un reproductor de vídeo que cumple las siguientes características:
 Reproducir los vídeos independientemente del codec soportado por el navegador.

 Incluir controles de reproducción, pausa, parar, avanzar y retroceder 10 segundos,
inicio y fin.
 Control de volumen y paso a pantalla completa.
 Un indicador de progreso de la reproducción.
Añadir una lista de reproducción que permita seleccionar un nuevo vídeo, y éste se
reproduzca sin recargar la página.
Figura 18.1 Aspecto final del reproductor
18.6 CAPÍTULO 7
18.6.1 EJERCICIO 7
Dibujar sobre un elemento canvas, un stickman con un aspecto final similar al que se

muestra a continuación. Seguir las siguiente indicaciones como ayuda:
 El tamaño inicial del canvas es de 200px del ancho y 300pxde alto.

 Utilizar un rectángulo 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 CAPÍTULO 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 SessionStoragealmacenar el contenido de la caja en cada pulsación de
tecla. Si la página es recargada, el último contenido almacenado debe mostrarse en
la caja de texto. Comprobad que cerrando la pestaña actual, o abriendo una nueva
ventana, los datos no se comparten.
 Modificar el código anterior para utilizar LocalStorage. Comprobad que en este caso,
aunque cierre la ventana o abra una nueva, los datos se mantienen. Añadir 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 añadir, 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 mínimos son:
identificador del tweet, texto, usuario, y fecha de publicación.
 Disponer de una tabla para almacenar los usuarios que publican los tweets. Esta
tabla debe estar relacionada con la anterior. Los campos mínimos son: identificador
del usuario, nombre e imagen.
 Crear un método 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 método removeTweet que dado un identificador de tweet, lo elimine de la
base de datos. Éste método debe devolver el tweet eliminado.
 Crear un método updateTweet que dado un objeto que corresponde con un tweet,
actualice los datos correspondientes al tweet en la base de datos.
 Crear un método getTweets que dado un parámetro 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 añadir, 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 almacén de tareas pendientes. Sus propiedades son: un identificador

único que actúa como índice, el texto descriptivo, una propiedad que nos indique si
la tarea está completada o no y la fecha/hora de creación.
 Crear un método addTask que dado un objeto que corresponde con una tarea, lo
almacene en la base de datos.
 Crear un método removeTask que dado un identificador de una tarea, lo elimine de la
base de datos. Éste método debe devolver la eliminada.
 Crear un método updateTask que dado un identificador de una tarea, actualice los
datos correspondientes a la tarea en la base de datos.
 Crear un método getTasks que dado un parámetro booelano completado, nos
devuelva las tareas que se encuentran completadas o no.
18.8 CAPÍTULO 9
18.8.1 EJERCICIO 11
Cread una página HTML que muestre la hora local de vuestro ordenador, y la hora del
servidor de www.google.es. Los cálculos de hora local y obtención 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
excepción del javascript que solicita la petición al servidor.
 Las peticiones de hora al servidor www.google.es se realizan a través de Ajax, en
intervalos de 1 segundo. Dichas peticiones no deben realizarse si no existe conexión.
En tal caso, se muestra un mensaje al usuario indicando que se ha perdido la
conexión.
 Si se recarga la página, y no existe conexión, utilizar un fallback para la obtención
de la hora del servidor, que muestre un mensaje al usuario indicando que se ha
perdido la conexión.
Figura 18.3 Resultado del ejercicio con conexión
Figura 18.4 Resultado del ejercicio sin conexión
Utilizad el siguiente código 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 CAPÍTULO 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 ratón 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, añade el producto si no existía,
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:
 Añadir la posibilidad de eliminar los productos de la cesta de la compra,

arrastrándolos desde la propia cesta y soltándolos en cualquier parte de la página.
En este caso, mostraríamos un mensaje de confirmación de eliminación del
producto.
 Mantener una persistencia de datos para la cesta de la compra, que el actualizar la
página no se pierdan los productos introducidos.
Descargar sitio web.

Figura 18.5 Aspecto inicial de la cesta de la compra
18.10 CAPÍTULO 11
18.10.1 EJERCICIO 13
Utilizando los servicios de geolocalización, realizar las siguientes tareas:
 Solicitar las coordenadas actuales, y mostrar dichas coordenadas (y la precisión)

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 posición GPS concreta. Posteriormente,
modificar la implementación para solicitar continuamente la posición 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 Posición actual en el mapa
18.11 CAPÍTULO 12
Crear un Web worker que dado un número entero, calcule todos los números primos
comprendidos entre 1 y dicho número.
Proporcionaremos a este Worker un número entero, y devolverá un array con todos los

números primos encontrados. Mostrar el listado de números primos en el documento
principal.
Figura 18.7 Resultado tras calcular los números primos
18.12 CAPÍTULO 13
Implementar un servicio de chat, utilizando tecnología Web Socket, a partir del código

proporcionado, que se describe a continuación.
 Se dispone de un servidor de chat, basado en Node.js, al cual deben conectarse los

usuarios del chat. La dirección del servidor es ws://www.arkaitzgarro.com:1337.
 Se proporciona la interfaz básica (HTML y JavaScript) para desarrollar la aplicación.
Es necesario implementar la conexión con el servidor y el intercambio de mensajes,
así como la actualización 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 continuación.
 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

Temario Curso HTML5

Cargado por

Copyright:

Formatos disponibles

Temario Curso 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

Temario Curso HTML5

Cargado por

Copyright:

Formatos disponibles

1 Introducción a HTML5 y CSS3

– Ventajas de HTML5, diferencias entre HTML4 y HTML5 …

7 Guardar preferencias de usuario

12 Drag & Drop

Las principales diferencias entre HTML5 y HTML4

<!DOCTYPE html &gt;

3.1. Modelos estrictos de contenidos

pero no permite esto:

3.2. Nuevos elementos

Lo primero que conviene remarcar es que HTML5 no es un lenguaje nuevo en contraposición a

El esquema de una página con etiquetas semánticas podría ser el siguiente.

<img src="graficos/fallas.jpg" alt="The Pulpit Rock" width="499" height="340">

<figcaption>Fig.1 - Falla de la plaza del Ayuntamiento de Valencia.</figcaption>

Fig.1 - Falla de la plaza del Ayuntamiento de Valencia.

Descripción de las etiquetas semánticas

El HEADER no es equivalente a la parte superior de la página, aunque frecuentemente está en esa

Esta es la estructura básica:

<h1 >Recetas de cocina</h1>

<a href="#" >Carnes</a>

<a href="#" >Pescados</a>

<p>Explicación de la receta 1</p>

<p>Explicación de la receta 2</p>

<p>Explicación de la receta 3</p>

Ahora le daremos un poco de formato, añadiendo esta hoja de estilo:

font-family: Arial, Helvetica, sans-serif;

font-family: Arial, Helvetica, sans-serif;

3.1 NUEVOS TIPOS DE INPUT

3.1.1 TIPO EMAIL

Campo de tipo <code>email</code> en un dispositivo iOS

3.1.2 TIPO URL

Campo de tipo <code>url</code> en un dispositivo iOS

3.1.3 TIPO DATE

Campo de tipo <code>date</code> en un dispositivo iOS

3.1.4 TIPO TIME

Campo de tipo <code>time</code> en un dispositivo iOS

3.1.5 TIPO DATETIME

Campo de tipo <code>datetime</code> en un dispositivo iOS

3.1.6 TIPO MONTH

El nuevo tipo <input type="month"> permite la selección de un mes en concreto. La

Campo de tipo <code>month</code> en un dispositivo iOS

3.1.7 TIPO WEEK

Campo de tipo <code>week</code> en Google Chrome

3.1.8 TIPO NUMBER

Campo de tipo <code>number</code> en un dispositivo iOS

3.1.9 TIPO RANGE

Campo de tipo <code>range</code> en Google Chrome

3.1.10 TIPO TEL

Campo de tipo <code>tel</code> en un dispositivo iOS

3.1.11 TIPO SEARCH

El nuevo tipo <input type="search">, espera que se proporcione un término de búsqueda. La

Campo de tipo <code>search</code> en Google Chrome

3.1.12 TIPO COLOR

Campo de tipo <code>color</code> en Google Chrome

3.2.1 ATRIBUTO LIST Y <DATALIST>

<input id="form-person-title" type="text" list="mylist">

Nuevo elemento <code>datalist</code>, asociado a un campo de texto

3.2.2 ATRIBUTO AUTOFOCUS

3.2.3 ATRIBUTO PLACEHOLDER

Atributo <code>placeholder</code> en un campo de búsqueda

<!DOCTYPE html >