HTML5. EL FUTURO DE LA WEB

Agradecimientos

Sobre el autor

Introducción
Parte I. El lenguaje de la Web
Parte II. Páginas, sitios y diseños
Parte III. Multimedia en HTML5
Parte IV. Etiquetas HTML5 dinámicas con un poco de JavaScript y PHP
Convenciones
Código fuente


Parte I. El lenguaje de la Web

1. Introducción a HTML5
Crear con etiquetas: visión general
Incorporar los nuevos elementos HTML5
Utilizar etiquetas continuadas desde HTML4
Olvidar o reemplazar etiquetas eliminadas
Elegir un navegador para interpretar HTML5
Mozilla Firefox
Google Chrome
Opera
Apple Safari
Microsoft Internet Explorer 9
Vista previa de diferentes visualizaciones
Tomar el control

2. Entender las etiquetas HTML5
Analizar código
Entender HTML5 y archivos relacionados
Aprender qué archivos funcionan con la Web
Saber cómo funcionan las etiquetas
Empezar con la etiqueta HTML básica
Describir su página con etiquetas
Identificar las partes de una etiqueta
Entender el rol de la etiqueta de comentario
Anidar etiquetas
Tomar el control

3. Etiquetas de texto y un poco de CSS3
Principios básicos
Un poco más de organización
Pensar en la estructura
Añadir más estructura HTML5
Añadir estilo a texto con CSS3
Aplicar estilo a elementos HTML5 con propiedades CSS3
Hojas de estilo incorporadas
Hojas de estilo externas
Estilo en línea
Crear clases e ID CSS3
Clases CSS3
ID CSS3
Tomar el control

4. Trabajar con valores de color
Entender el color RGB
Utilizar nombres
Porcentajes RGB y HSL
Parámetros entero decimal RGB
Parámetros hexadecimales: pensar como su ordenador
Añadir transparencia al color
Crear un esquema de color
Desde un color base
Desde una imagen
Integrar su paleta de color con su página Web
Tomar el control

Parte II. Páginas, sitios y diseños

5. Organizar una página
El principio del documento HTML5
Establecer su página principal base
Añadir conjunto de caracteres a su sitio con metadatos
Saber cuándo necesita un script
Un diseño en secciones
Organizar su contenido
Párrafos, divisiones y listas
Agrupar sin fragmentar
Figuras y títulos
Organizar archivos
Organización y referencia de imágenes
Referencias absolutas
Referencia relativa
Tomar el control

6. Mostrar datos con tablas
Propiedades de tabla CSS3 para HTML5
Tablas y datos tabulares
Conceptos básicos de la tabla
Aplicar estilo a una tabla
Añadir bordes con CSS3
Aclaración de datos con colores de fondo
Tablas complejas
Utilizar los atributos rowspan y colspan
Combinaciones prácticas de celdas en tablas
Tomar el control

7. Todo sobre los vínculos
El elemento link y sus atributos clave
Hojas de estilo alternativas
Iconos de vínculo
Prefetch
Otros atributos de link
Vínculos de páginas
Más sobre el atributo rel
Relaciones de autor
Tipos de vínculos jerárquicos y secuenciales
Anclas de página e ID
Destinos
Nuevos contextos de navegación en navegadores
Nuevos contextos de navegación en dispositivos móviles
Utilizar iframes
Anidar páginas Web
Tomar el control

8. Estrategias de navegación
Conceptos de navegación Web
Navegación de diseñador y navegación de usuario
Navegación global
Utilizar listas en navegación global
Menús desplegables y navegación global
Utilizar JavaScript para llamar a una página vinculada
Crear coherencia
Navegación vertical y horizontal
Aplicar pseudo-clases CSS3
Entender los mecanismos HTML5 de navegación vertical
Utilizar iconos gráficos en navegación
Sitios Web de una sola página con iframes
Vincular con un gráfico
Crear y utilizar iconos de imagen en miniatura
Utilizar iframes en dispositivos móviles
Tomar el control


Parte III. Multimedia en HTML5

9. Imágenes
Los fundamentos básicos de los archivos de imagen HTML5
Formatos y píxeles importan
Scalable Vector Graphics (SVG)
Graphics Interchange Format (GIF)
Joint Fotographic Experts Group (JPEG)
Portable Network Graphics (PNG)
Preservar capas en gráficos Web
Trabajar con tamaños de archivos gráficos
Utilizar aplicaciones gráficas para modificar el tamaño de archivo de imagen
Cambiar tamaños de archivo JPEG
Buena iluminación ahorra ancho de banda
Cambiar tamaños de archivo PNG y GIF
Cambiar tamaños de archivo SVG
Escala de grises en Internet Explorer
Ubicación de imágenes y creación de páginas Web flexibles
Ubicación de imágenes con el atributo align
Tamaño de imagen flexible con un poco de JavaScript
Aplicación para archivos SVG dinámicos desde Adobe Illustrator CS5
Tomar el control

10. Sonido
Los fundamentos de audio en HTML5
Autoplay
Controls
Preload
Loop
Soporte de navegador para audio
Salvado por source: Plan B
Atributo type
Parámetro codec
Crear archivos de audio
Grabadora de sonidos de Windows 7
Sound Studio en Macintosh OS X
Efectos de sonido: FX en su escritorio
Sonidos de transición
Integrar efectos de sonido en una página Web
Tomar el control

11. Vídeo
Crear una página HTML5 con vídeo
Vídeo y compatibilidad de navegador
Hacer mío el WebM: el conversor Miro Video
Convertir a 3GP: Adobe Media Encoder CS5
Crear vídeos para la Web
Webcams
Cámaras de vídeo pequeñas
Cámaras de vídeo estándar
Captura de pantalla en vídeo
Atributos de video y source
src
poster
preload
loop
autoplay
controls
width y height
Tomar el control


Parte IV. Etiquetas HTML5 dinámicas con un poco de JavaScript y PHP

12. Añadir suficiente JavaScript
Insertar JavaScript en páginas HTML5
JavaScript en archivos externos
Funciones
Manejadores de evento
Detectar una variedad de eventos
Utilizar con cualquier elemento
Utilizar el Modelo de objetos de documento
Cómo funciona el DOM con su página y JavaScript
Elementos HTML5 y el DOM
Almacenar valores temporales
Variables
Tipos de datos
Diferentes tipos de variables juntas
Tablas
Objetos
Crear sus propios objetos
De vuelta al Modelo de objetos de documento y objetos de navegador
Tomar el control

13. Revolucionar su sitio con canvas
Fundamentos básicos de canvas
Una sencilla implementación de canvas
Entender la cuadrícula
Configuración para dibujos en canvas
Realizar el dibujo
Trabajar con múltiples dibujos
Añadir trazos y eliminar dibujos
Imágenes en canvas y sombras
Abrir una imagen en el canvas
Añadir una sombra
Trabajar con filtros
Crear dibujos complejos con canvas
Líneas y movimiento
Curvas
Arcos
Círculos y degradados
Tomar el control

14. Añadir formularios
Añadir un formulario
Atributos generales de formulario
accept-charset, enctype y novalidate
action y method
autocomplete
name y target
El formulario como parte del DOM
Los muchos tipos de entrada de datos
El atributo list, el tipo URL y datalist
Mostrar una opción en la ventana de alerta
Elementos datalist en dispositivos móviles y teclados para URL
Botones de opción y casillas de verificación: elementos de entrada de datos fáciles de seleccionar
Selector de fecha
Tomar el control

15. Incorporar objetos y almacenar información
geolocation
Obtener la latitud y la longitud
Obtener el mapa
Situar el mapa en la página Web
Juntarlo todo en una sencilla página
Adaptar la página para la visualización móvil
Trabajar con las propiedades geolocation y el plug-in Google Earth
Almacenamiento en HTML5
Almacenamiento de sesión
Almacenamiento local
Añadir y ajustar objetos en páginas Web HTML5
Añadir un objeto
Ajustar un objeto
Tomar el control

16. Capturar datos interactivos
Lenguajes del lado del servidor y HTML5
Configurar PHP en su ordenador (que piensa que es un servidor)
Probar PHP
Fundamentos básicos de PHP
El capturador de POST
Validación de datos
Estructuras básicas de programa PHP
Almacenamiento temporal de datos
Variables
Constantes
Tablas
Objetos y propiedades
Operadores clave PHP
Asignación
Aritmética
Crear una aplicación de correo electrónico
Una sencilla aplicación de correo electrónico
Capturar y enviar PHP
Añadir una cabecera y respuesta automática en PHP
Tomar el control

Índice alfabético

HTML5 es un reto en pleno proceso de cristalización. La evolución del código en los últimos años ha dado como resultado nuevas características como elementos específicos de contenido, lienzos para dibujar y reproducción de audio y vídeo.

Pero una vez en el contexto ¿por dónde empezar? Este libro cuenta con toda la experiencia y conocimiento de Bill Sanders para dar los primeros pasos en el dominio de HTML5. Cubre una amplia gama de temas que incluyen la utilización del texto, gráficos, audio, vídeo y la navegación en páginas Web con código ejecutado en navegadores compatibles.

Este libro, un clásico HTML5, se decanta por valores seguros. En el sitio Web de Anaya Multimedia, www.anayamultimedia.es pueden descargarse los archivos de código de ejemplo.