Este libro sobre HTML5 y CSS3 se dirige a todos aquellos lectores que quieran desarrollar, implementar o mantener un sitio Web. En efecto, para comenzar y, sobre todo, para progresar en el diseño de sitios Web es necesario comprender y dominar bien el código fuente de las aplicaciones Web.

El libro se ha concebido como una verdadera herramienta de información, pedagógico desde la primera hasta la última página, ilustrado abundantemente con ejemplos y capturas de pantalla, pensando siempre en su aplicación práctica por parte del Webmaster.

De este modo, se repasa el lenguaje HTML (teniendo en cuenta su última versión, llena de novedades), las hojas de estilo, incluyendo el espectacular avance que supone el estándar CSS3 en términos de presentación de páginas Web y una visión general de las API JavaScript de HTML5 y de funcionalidades avanzadas e innovadoras. Esta obra no es una enciclopedia exhaustiva de todas estas técnicas sino un recorrido estructurado sobre ellas. Proporcionará tanto a los diseñadores principiantes como a los más experimentados las reglas rigurosas y esenciales del diseño profesional de un sitio Web. Por ello, el autor nos anima a elaborar un código respetuoso con las prescripciones del W3C y a separar el contenido (HTML) y la presentación (hojas de estilo CSS) tal y como recomienda, ahora más que nunca, el estándar HTML5.

Las numerosas novedades abordadas se han detallado para los navegadores de escritorio (Internet Explorer, Firefox, Google Chrome y Safari) y también para los navegadores móviles (iOS Safari, Android Browser) pero el autor ha estado particularmente atento a proporcionar un código compatible con los navegadores menos avanzados para que puedan aprovechar ahora este importante paso en el diseño de aplicaciones Web.

Los muchos ejemplos del libro están disponibles para su descarga en la página Web de Ediciones ENI (www.ediciones-eni.com). Para todos aquellos lectores que quieran reproducir los ejemplos del libro de forma idéntica, las imágenes y el resto de elementos complementarios están a su disposición

Presentación de HTML5
1. Breve historia de HTML5
2. Líneas maestras de HTML5
3. Las novedades de HTML5
4. HTML5 es un lenguaje de etiquetas
4.1 Etiquetas
4.2 Atributos de etiqueta
5. Uso correcto de las etiquetas
6. Etiquetas y atributos HTML 4.0 desaparecidos
6.1 A nivel de etiquetas
6.2 A nivel de atributos
7. Los navegadores de nuestro estudio
8. El documento HTML5 mínimo
8.1 El doctype y su importancia
8.2 La etiqueta HTML
8.3 El encabezado del documento
8.4 El título del documento
8.5 La codificación (charset) del documento
8.6 El cuerpo del documento
9. Modo de proceder
10. Validación de código HTML5
Primeros elementos de las hojas de estilo
1. Preámbulo
2. Propiedades de estilo
3. Selectores
4. Incorporación del estilo
El texto
1. Texto simple
2. Salto de línea
3. Negrita
4. Cursiva
5. Exponentes y subíndices
6. Otras etiquetas de texto
6.1 Texto tachado
6.2 Texto preformateado
6.3 Dirección del texto
7. Comentarios
8. Caracteres especiales
9. Etiquetas HTML 4.0 suprimidas
10. Dar formato al texto con las hojas de estilo
10.1 Negrita
10.2 Cursiva
10.3 Tamaño de letra
10.4 Color del texto
10.5 Alineación
10.6 Subrayado
Estructura del documento
1. Títulos
2. Párrafos
3. Citas
4. Separadores horizontales
5. Listas
5.1 Listas ordenadas
5.2 Listas no ordenadas
5.3 Listas anidadas
5.4 Listas de definiciones
6. Divisiones de página
6.1 Elementos de bloque
6.2 Elementos en línea
Enlaces
1. Insertar un enlace
2. Enlaces a otra página
2.1 Enlaces a una página situada en la misma carpeta
2.2 Enlaces a una página situada en otra carpeta
2.2.1 Enlace desde indice.htm hacia pagina1.htm
2.2.2 Enlace desde pagina1.htm hacia pagina2.htm
2.2.3 Enlace desde pagina2.htm hacia indice.htm
3. Enlaces al interior de una página
4. Enlaces a otro sitio
5. Enlace a una dirección e-mail
6. Enlaces para descargar un archivo
7. Enlaces hacia una ventana específica
8. Color y subrayado en los enlaces
9. Descripción acerca del enlace
10. Nuevas posibilidades con los enlaces
Tablas
1. Preámbulo
2. Creación de una tabla
2.1 Ancho de la tabla
2.2 Bordes de la tabla
2.3 Alineación de la tabla
2.4 Alineación de las celdas de la tabla
3. Celdas de la tabla
3.1 Ancho de las celdas
3.2 Alineación horizontal
3.3 Alineación vertical
3.4 Margen interior de las celdas
3.5 Color de fondo
4. Fusión de celdas
4.1 Fusión de columnas
4.2 Fusión de filas
5. Celdas de encabezado
6. Leyenda de la tabla
7. Agrupar columnas
8. Estructuración de la tabla
Imágenes y fondos
1. Formatos de imagen
2. Insertar una imagen
3. Insertar un enlace sobre una imagen
4. Insertar un color de fondo
5. Insertar una imagen de fondo
Etiquetas semánticas y de organización
1. Preámbulo
2. Las antiguas etiquetas semánticas
3. Las nuevas etiquetas de organización
3.1 Etiquetas , , y
3.2 Etiquetas y
3.3 Ejemplo completo
4. Nuevas etiquetas semánticas
Formularios
1. Presentación
2. Declarar el formulario
3. Campo de texto
4. Área de texto
5. Lista desplegable
6. Botones de selección única (radio)
7. Botones de selección múltiple (checkbox)
8. Botón de envío
9. Botón de anulación
10. Botón de acción
11. Campos ocultos
12. Campos de transferencia de archivos
13. Campos de contraseña
14. Organización de los campos de formulario
15. Etiquetado de los campos de formulario
16. Campo de texto con lista de sugerencias
17. Campo de texto para la dirección de correo electrónico
18. Campo de texto url
19. Campo de texto con formato numérico
20. Campo de texto con formato de fecha
21. Campo de texto de búsqueda
22. Campo de texto de color
23. Cursores
24. Una aplicación completa
Multimedia
1. Insertar un archivo de audio
1.1 Etiqueta
1.2 Formatos de archivo de audio
1.3 Etiqueta
1.4 Programas de conversión de audio
1.5 Compatibilidad con navegadores antiguos
2. Insertar un archivo de vídeo
2.1 Etiqueta
2.2 Formatos de archivo de vídeo
2.3 Etiqueta
2.4 Programas de conversión de vídeo
2.5 Compatibilidad con navegadores antiguos
Presentación de las hojas de estilo
1. Concepto de hoja de estilo
2. Uso de las hojas de estilo
3. Breve historia
4. Compatibilidad con los navegadores
5. Herramientas para trabajar con las hojas de estilo
Nociones básicas de CSS
1. Declaración de estilo CSS
2. Selectores básicos
2.1 Selectores de etiqueta
2.2 Selectores de clase
2.3 Selectores de identificador
3. Comentarios
4. Unidades de medida
5. Notación de los colores
6. Convención de escritura
7. CSS integradas en un elemento Html5
8. CSS internas al documento Html5
9. CSS externas al documento Html5
10. CSS importada (@import)
11. Noción de cascada
12. Noción de herencia
Tipografía
1. Tipo de fuente
2. Itálica
3. Mayúsculas versales
4. Negrita
5. Tamaño de letra
6. Fuente abreviada
7. Fuentes del sistema
El texto en CSS
1. Color
2. Decoración
3. Transformación
4. Indentación
5. Espacio entre letras
6. Espacio entre palabras
7. Interlineado
8. Espacios vacíos
9. Alineación horizontal
10. Alineación vertical
11. Dirección del texto
12. Anchura y altura
Listas y tablas
1. Tipos de marcadores
2. Marcador gráfico
3. Posición
4. Declaración abreviada de una lista
5. Espacio entre las celdas de las tablas
6. Bordes de las tablas
7. Celdas vacías en las tablas
8. Posición de la leyenda
Fondos
1. Preámbulo
2. Color de fondo
3. Inserción de una imagen de fondo
4. Repetición de la imagen
5. Posicionamiento de la imagen
6. Fijación del fondo
7. Sintaxis abreviada
Propiedades de caja
1. Concepto de modelo de caja o bloque
2. Elemento en bloque o en línea
3. Anchura y altura
4. Márgenes externos
5. Márgenes internos
6. Color del borde
7. Grosor del borde
8. Estilo del borde
9. Escritura abreviada del borde
Pseudoclases
1. Noción de Pseudoclase
2. Pseudoclases de enlace
2.1 a:link
2.2 a:visited
2.3 a:hover
2.4 a:active
3. Pseudoclases de párrafo
3.1 :first-letter
3.2 :first-line
4. Insertar un contenido
4.1 :before
4.2 :after
Propiedades de visualización
1. Preámbulo
2. Posicionamiento
2.1 Posicionamiento estático
2.2 Posicionamiento relativo
2.3 Posicionamiento absoluto
2.4 Posicionamiento fijo
3. Flotar
4. Despejar
5. Superposición
6. Desbordamiento
7. Recorte
8. Visualización
9. Visibilidad
10. Cursor del ratón
11. Numeración automática
Propiedades de impresión
1. Utilidad de las hojas de estilo para la impresión
2. Hojas de estilo según el medio de salida
2.1 Presentación
2.2 Incorporación
3. Optimizar una página de impresión
4. Salto de página antes
5. Salto de página después
6. Evitar los saltos de página
7. El selector @page
Hojas de estilo CSS3
1. Los selectores CSS3
1.1 Selectores jerárquicos
1.2 Pseudoclases de selección
1.3 Selectores de atributos
2. Bordes redondeados
3. Bordes decorados
4. Sombras
4.1 Sombras sobre el texto
4.2 Sombras sobre un elemento caja
5. Tipos de letra personalizados
6. Las letras huecas
7. Manejar títulos largos
8. Los guiones automáticos
9. Redimensionar un elemento
10. Ajustar la altura de los caracteres
11. Fondos múltiples
12. Degradado de color
12.1 Los degradados lineales
12.2 Los degradados circulares
13. Opacidad y transparencia
14. Columnas múltiples
15. Transformaciones
16. Transiciones
17. Texto en movimiento
18. Los filtros gráficos
19. Las máscaras
20. El efecto reflejo o de espejo
21. La fusión de imágenes
Diseño 2D
1. Introducción
2. Etiqueta
3. Llamada al API de diseño
4. Diseñar un rectángulo
5. Agregar color
6. Trazar una línea recta
7. Diseño de formas geométricas
8. Importar imágenes
9. Agregar texto
10. Agregar sombreado
11. Transformaciones
Geolocalización
1. Concepto y utilidad
2. Funcionamiento
3. Navegadores
4. Protección de la privacidad
5. Longitud y latitud
6. Localización en un mapa
7. Seguir los desplazamientos
Almacenamiento de datos en local
1. Presentación
2. El almacenamiento persistente
3. El almacenamiento temporal
Las aplicaciones en modo desconectado (offline)
1. Presentación
2. El archivo de grabación en caché (manifest)
3. Ejemplo completo
El resto de API JavaScript de HTML5
1. Líneas maestras
2. Las API operativas
3. Las API en desarrollo
índice