PDF de programación - Semántica | HTML5

HTML5

HTML5

ARKAITZ GARRO

CAPÍTULO 1
¿QUÉ ES HTML5?

1.1 Especificación oficial
1.2 5 Tips
CAPÍTULO 2
SEMÁNTICA

2.1 Cabecera del documento
2.2 Nuevas etiquetas semánticas
2.3 Estructura de un documento HTML5
2.4 Uso de las nuevas etiquetas semánticas
2.5 Atributos globales

CAPÍTULO 3
ELEMENTOS DE FORMULARIO

3.1 Nuevos tipos de input
3.2 Nuevos atributos
3.3 Nuevos elementos

CAPÍTULO 4
QUÉ ES MODERNIZR

4.1 Añadir Modernizr a una página
4.2 Objeto Modernizr
4.3 Clases CSS en Modernizr
4.4 El método load()

CAPÍTULO 5
DATASET

5.1 Utilización de los data attributes
5.2 data attributes y JavaScript

CAPÍTULO 6
MULTIMEDIA

6.1 Vídeo
6.2 Codecs, la nueva guerra
6.3 API multimedia
6.4 Fullscreen video
6.5 Audio
CAPÍTULO 7
CANVAS

http://www.arkaitzgarro.com/html5/[13/07/2015 12:26:10]

CAPÍTULO 10
DRAG AND DROP

10.1 Detección de la funcionalidad
10.2 Creación de contenido arrastrable
10.3 Eventos de arrastre
10.4 Arrastre de archivos

CAPÍTULO 11
GEOLOCALIZACIÓN

11.1 Métodos del API

CAPÍTULO 12
WEB WORKERS

12.1 Transferencia de mensajes
12.2 Utilización de Web Workers
12.3 Subworkers
12.4 Gestionar errores
12.5 Seguridad

CAPÍTULO 13
WEBSOCKETS
13.1 Introducción
13.2 Crear un WebSocket
13.3 Comunicación con el servidor
13.4 WebSocket en el servidor

CAPÍTULO 14
EVENTSOURCE

14.1 EventSource en el servidor

CAPÍTULO 15
FILE

15.1 Detección de la funcionalidad
15.2 Acceso a través del formulario
15.3 Cómo leer archivos
15.4 Fragmentación de archivos

CAPÍTULO 16
HISTORY
16.1 API

CAPÍTULO 17
XMLHTTPREQUEST2

HTML5

7.1 Elementos básicos
7.2 Dibujar formas
7.3 Rutas
7.4 Colores
7.5 Degradados y patrones
7.6 Transparencias
7.7 Transformaciones
7.8 Animaciones

CAPÍTULO 8
ALMACENAMIENTO LOCAL

8.1 Web Storage
8.2 Web SQL
8.3 IndexedDB

CAPÍTULO 9
SIN CONEXIÓN

9.1 El archivo de manifiesto de caché
9.2 Cómo servir el manifiesto
9.3 Proceso de cacheado
9.4 Actualización de la memoria caché
9.5 Eventos online/offline

17.1 Recuperación de archivos
17.2 Especificación de un formato de respuesta
17.3 Envío de datos
17.4 Subida de archivos o Blob
17.5 Subida de un fragmento de bytes
17.6 Ejemplos prácticos

CAPÍTULO 18
EJERCICIOS
18.1 Capítulo 2
18.2 Capítulo 3
18.3 Capítulo 4
18.4 Capítulo 5
18.5 Capítulo 6
18.6 Capítulo 7
18.7 Capítulo 8
18.8 Capítulo 9
18.9 Capítulo 10
18.10 Capítulo 11
18.11 Capítulo 12
18.12 Capítulo 13

SOBRE ESTA EDICIÓN

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 públicamente la obra, incluso transformándola, siempre que

cumplas todas las condiciones siguientes:

Reconocimiento: debes reconocer siempre la autoría 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 ningún tipo. Entre otros, no
puedes vender esta obra bajo ningún concepto y tampoco puedes publicar estos contenidos en

sitios web que incluyan publicidad de cualquier tipo.

http://www.arkaitzgarro.com/html5/[13/07/2015 12:26:10]

HTML5

Compartir igual: si alteras o transformas esta obra o si realizas una obra derivada, debes

compartir tu trabajo obligatoriamente bajo esta misma licencia.

http://www.arkaitzgarro.com/html5/[13/07/2015 12:26:10]

¿Qué es HTML5? | HTML5

HTML5

← Anterior Siguiente →

CAPÍTULO 1 ¿QUÉ ES HTML5?
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML.
Esta nueva versión (aún en desarrollo), y en conjunto con CSS3, define los nuevos
estándares de desarrollo web, rediseñando el código para resolver problemas y
actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o
atributos, sino que incorpora muchas características nuevas y proporciona una
plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).

HTML5 está destinado a sustituir no sólo HTML 4, sino también XHTML 1 y DOM Nivel 2.
Esta versión nos permite una mayor interacción entre nuestras páginas web y el
contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de
codificar nuestro diseño básico.

Algunas de las nuevas características de HTML5 serían:

Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a
remplazar la necesidad de tener una etiqueta <div> que identifique cada bloque de
la página.
Los nuevos elementos multimedia como <audio> y <video>.
La integración de gráficos vectoriales escalables (SVG) en sustitución de los
genéricos <object>, y un nuevo elemento <canvas> que nos permite dibujar en él.
El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite>
o <menu>.
MathML para fórmulas matemáticas.
Almacenamiento local en el lado del cliente.
Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capítulos.

1.1 ESPECIFICACIÓN OFICIAL
El organismo W3C elabora las normas a seguir para la creación de las páginas HTML5.
Sin embargo, no es necesario conocer todas estas especificaciones, escritas es un
lenguaje bastante formal, para diseñar páginas con este lenguaje. Las normas oficiales
están escritas en inglés y se pueden consultar de forma gratuita en las siguientes
direcciones:

Especificación recomendada como candidata para HTML5
Borrador para la especificación oficial de HTML 5.1

http://www.arkaitzgarro.com/html5/capitulo-1.html[13/07/2015 11:58:44]

¿Qué es HTML5? | HTML5

1.2 5 TIPS
1.2.1 HTML5 ES API
Se puede pensar en HTML sólo como nuevas etiquetas y geolocalización. Pero esta no es
más que una pequeña parte del estándar que define HTML5. La especificación de HTML5
define también cómo esas etiquetas interactúan con JavaScript, a través del Modelo de
Objetos de Documento (DOM). HTML5 no es únicamente definir una etiqueta como
<video>, también existe su correspondiente API para objetos de vídeo en el DOM. Se
puede utilizar esta API para detectar el soporte para diferentes formatos de vídeo,
reproducir el vídeo, hacer una pausa, silenciar el audio, realizar un seguimiento de la
cantidad de vídeo 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 más exitoso de la historia. HTML5 se basa en ese éxito. No es necesario volver
a aprender cosas que ya se conocen. Si la aplicación 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 también incluye nuevos controles de entrada. Algunos de estos son funcionalidades
esperadas durante mucho tiempo, como reguladores y selectores de fecha, mientras que
otros son más sutiles. Por ejemplo, el tipo de entrada de correo electrónico se parece a
un cuadro de texto, pero los navegadores móviles personalizar su teclado en pantalla
para que sea más fácil de escribir direcciones de correo electrónico. Los navegadores
más antiguos que no son compatibles con el tipo de entrada de correo electrónico será
tratado como un campo de texto normal, y el formulario sigue funcionando sin ningún
cambio en las etiquetas o hacks de JavaScript.

1.2.3 FÁCIL DE COMENZAR
"Actualizar" a HTML5 puede ser tan simple como cambiar su tipo de documento. El tipo
de documento debe estar en la primera línea de cada página HTML. Las versiones
anteriores de HTML definen un montón de doctypes, y elegir el más adecuado puede ser
difícil. En HTML5, sólo hay un tipo de documento:

<!DOCTYPE html>

La actualización al doctype HTML5 no rompe el marcado existente, ya que los elementos
obsoletos previamente definidas en HTML 4 todavía se representará en HTML5. Pero le
permitirá usar (y validar) nuevos elementos semánticos como <article>, <section>,
<header> y <footer>.

http://www.arkaitzgarro.com/html5/capitulo-1.html[13/07/2015 11:58:44]

¿Qué es HTML5? | HTML5

1.2.4 ¡YA FUNCIONA!
Si se quiere dibujar en un lienzo, reproducir vídeo, diseñar 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 móviles ya son compatibles
con canvas, video, la geolocalización, el almacenamiento local, y más funcionalidades.
Incluso Microsoft (raramente conocido por el soporte de estándares) soporta la mayoría
de las características 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. Más tarde fundó el
W3C para que actuase como administrador único de los estándares web, lo que venido
haciendo durante más de 15 años. Esto es lo que el W3C tenía que decir sobre el futuro
de los estándares 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 posición del W3C sobre el futuro de HTML.

En septiembre de 2012, el W3C propuso un plan para crear una primera especificación de
HTML5 a finales de 2014, y una nueva especificación final de HTML 5.1 a finales 2016. Al
igual que ocurre en la