Prólogo

Introducción
¿Quién debería leer este libro?
¿Qué hay en este libro?
Convenciones utilizadas en este libro
Código fuente

1. Introducción a HTML5 y CSS3
¿Qué es HTML5?
¿Cómo llegamos aquí?
¿Despegará la verdadera especificación HTML5?
¿Por qué debería preocuparme por HTML5?
¿Qué es CSS3?
¿Por qué debería preocuparme por CSS3?
¿Qué se entiende por el "mundo real"?
El variado mercado de los navegadores
El creciente mercado de los móviles
Lo verdaderamente importante

2. Código al estilo HTML5
Presentar el sitio The HTML5 Herald
Una plantilla HTML5 básica
El doctype
El elemento html
El elemento head
Nivelando el terreno de juego
El resto es historia
Preguntas frecuentes sobre HTML5
¿Por qué estos cambios siguen funcionando en navegadores más antiguos?
¿No se deberían cerrar todas las etiquetas?
¿Qué pasa con las otras costumbres de sintaxis basadas en XHTML?
Definir la estructura de la página
El elemento header
El elemento section
El elemento article
El elemento nav
El elemento aside
El elemento footer
Estructurar The HTML5 Herald
Conclusión

3. Más semántica en HTML5
Una nueva perspectiva sobre los tipos de contenido
El esquema de documento
Noticias de última hora
El elemento hgroup
Más elementos nuevos
Los elementos figure y figcaption
El elemento mark
Los elementos progress y meter
El elemento time
Cambios a características existentes
La palabra "desaprobado" está desaprobada
Elementos de bloque dentro de vínculos
Texto en negrita
Texto en cursiva
Texto grande y pequeño
Citas con cite
Listas de descripción (no de definición)
Otros nuevos elementos y características
El elemento details
Listas ordenadas personalizadas
Estilos con scoped
El atributo asyn para scripts
Validar documentos HTML5
Conclusión

4. Formularios HTML5
Herramientas de confianza en nuestra caja de herramientas
Atributos de formulario HTML5
El atributo required
Aplicar estilo a campos de formulario obligatorios
El atributo placeholder
Completar el soporte con JavaScript
El atributo pattern
El atributo disabled
El atributo readonly
El atributo multiple
El atributo form
El atributo autocomplete
El elemento datalist y el atributo list
El atributo autofocus
Nuevas tipos de entrada de datos de formulario HTML5
Búsqueda
Direcciones de correo electrónico
URL
Números de teléfono
Números
Rangos
Colores
Fechas y horas
Otros nuevos controles de formulario en HTML5
El elemento output
El elemento keygen
Cambios a controles y atributos de formulario existentes
El elemento form
El elemento optgroup
El elemento textarea
Conclusión

5. Audio y vídeo HTML5
Un poco de historia
La situación actual
Formatos de contenedor de vídeo
Códecs de vídeo
Códecs de audio
¿Qué combinaciones funcionan en los navegadores actuales?
El código
Permitir controles nativos
El atributo autoplay
El atributo loop
El atributo preload
El atributo poster
El atributo audio
Añadir soporte para múltiples formatos de vídeo
Orden con source
¿Qué pasa con Internet Explorer 6-8?
Tipos MIME
Codificar archivos de vídeo para su uso en la Web
Crear controles personalizados
Algo de código y estilo para poder empezar
Presentar la API de elementos multimedia
Reproducir y pausar el vídeo
Activar y desactivar el silencio de la pista de audio del vídeo
Responder cuando el vídeo termina de reproducirse
Actualizar la hora según se reproduce el vídeo
Más características de la API de elementos multimedia
Eventos
Atributos
¿Qué hay del audio?
Multimedia accesible
Conclusión

6. Introducción a CSS3
Subir a bordo de los navegadores antiguos
Selectores CSS3
Selectores relacionales
Selectores de atributo
Pseudo-clases
Pseudo-clases estructurales
Pseudo-elementos y contenido generado
Contenido generado
selection
Colores CSS3
RGBA
HSL y HSLA
Opacidad
Ponerlo en práctica
Esquinas redondeadas: border-radius
Sombras
Inset y las múltiples sombras
Sombras de texto
Más sombras
El siguiente

7. Degradados CSS3 y múltiples fondos
Degradados lineales
La sintaxis W3C
La antigua sintaxis WebKit
Juntarlo todo
Degradados lineales con SVG
Degradados lineales con filtros IE
Herramientas en el mercado
Degradados radiales
La sintaxis W3C
La antigua sintaxis WebKit
Juntarlo todo
Degradados repetidos
Múltiples imágenes de fondo
Tamaño de fondo
En el fondo

8. Transformaciones y transiciones CSS3
Transformaciones
Traslación
Escalar
Rotación
Inclinación
Cambiar el origen de la transformación
Soporte para Internet Explorer 8 y anteriores
Transiciones
transition-property
transition-duration
transition-timing-function
transition-delay
La propiedad abreviada transition
Múltiples transiciones
Animaciones
Fotogramas clave
Propiedades de animación
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-delay
animation-fill-mode
animation-play-state
La propiedad abreviada animation
Seguir adelante

9. Fuentes incorporadas y diseños multicolumna
Fuentes Web con @font-face
Implementar @font-face
Declarar orígenes de fuentes
Descriptores de propiedad de fuente
Rango Unicode
Aplicar la fuente
Consideraciones legales
Crear varios tipos de archivo de fuentes: Font Squirrel
Otras consideraciones
Diseños multicolumna CSS3
La propiedad column-count
La propiedad column-gap
La propiedad column-width
La propiedad abreviada columns
Columnas y la propiedad height
Otras características de columna
La propiedad column-rule
Saltos de columna
Ocupar varias columnas
Otras consideraciones
Mejora progresiva
Consultas multimedia
¿Qué son las consultas multimedia?
Sintaxis
Flexibilidad de las consultas multimedia
Soporte de navegador
Leer más
Vivir con estilo

10. Geolocation, Offline Web Apps y Web Storage
Geolocation
Preocupación sobre la confidencialidad
Métodos de Geolocation
Comprobar soporte con Modernizr
Recuperar la posición actual
El objeto Position de Geolocation
Conseguir la latitud y la longitud
Cargar un mapa
Una última palabra sobre los dispositivos móviles antiguos
Offline Web Applications
Cómo funciona: la caché de la aplicación HTML5
Configurar su sitio para trabajar sin conexión
El archivo cache.manifest
Establecer el tipo de contenido en su servidor
Apuntar su HTML al archivo de manifiesto
Obtener permiso para almacenar el sitio sin conexión
Trabajar sin conexión para probar
Probar si la caché de la aplicación almacena su sitio
Poner disponible sin conexión The HTML5 Herald
Límites de almacenamiento de Offline Web Applications
La sección fallback
Actualizar la caché
Guardar la caché en caché
¿Estamos online?
Lecturas adicionales
Web Storage
Dos tipos de almacenamiento
Almacenamiento de sesión
Almacenamiento local
¿A qué se parecen los datos Web Storage?
Obtener y establecer nuestros datos
Convertir datos almacenados
El método abreviado
Eliminar elementos y borrar datos
Límites de almacenamiento
Consideraciones de seguridad
Añadir Web Storage a The HTML5 Herald
Ver nuestros valores Web Storage con el Inspector Web
Otras API HTML5
Web Workers
Web Sockets
Web SQL e IndexedDB
De vuelta a la mesa de dibujo

11. Canvas, SVG y Drag and Drop
Canvas
Un poco de historia
Crear un elemento canvas
Dibujar en el Canvas
Establecer el contexto
Llenar nuestro cepillo con color
Dibujar un rectángulo en el Canvas
El sistema de coordenadas de Canvas
Variaciones en fillStyle
Dibujar otras formas al crear rutas
Guardar dibujos
Dibujar una imagen en el Canvas
Manipular imágenes
Convertir una imagen de color a blanco y negro
Errores de seguridad con getImageData
Manipular vídeo con Canvas
Mostrar texto en el Canvas
Problemas de accesibilidad
Lecturas adicionales
SVG
Dibujar en SVG
Usar Inkscape para crear imágenes SVG
Filtros SVG
Usar la biblioteca Raphaël
Dibujar una imagen en el contenedor de Raphaël
Rotar el indicador de progreso con Raphaël
Canvas frente a SVG
Drag and Drop
Alimentar al gato WAI-ARIA
Hacer que los elementos se puedan arrastrar
El objeto DataTransfer
Aceptar elementos que se dejan caer
Lecturas adicionales
Eso es todo, amigos

Apén A. Modernizr
Utilizar Modernizr con CSS
Utilizar Modernizr con JavaScript
Soporte para aplicar estilo a elementos HTML5 en IE8 y anteriores
Lecturas adicion B. WAI-ARIA
¿Cómo WAI-ARIA complementa la semántica?
El estado actual de WAI-ARIA
Lecturas adicion C. Microdatos
¿No es suficiente la semántica HTML5?
La sintaxis de Microdatos
Entender pares nombre-valor
Espacios de nombres de Microdatos
Lecturas adicion alfabético