Es necesario que los diseñadores web dominen dos lenguajes fundamentales a la hora de crear sitios web: el HTML (HyperText Markup Language) y el CSS (Cascading Style Sheets). Las últimas versiones de estos dos lenguajes, el HTML5 y el CSS3, revolucionarán la forma de crear sitios web ofreciendo nuevas posibilidades de estructura, formato y composición.

Este libro va dirigido a diseñadores de sitios web y diseñadores gráficos con conocimientos sobre HTML 4 y CSS 2.1 que quieran evolucionar en su manera de trabajar en la creación de sitios que integren esos nuevos estándares.

En el apartado dedicado al HTML5 se estudiará la nueva sintaxis, los nuevos elementos de estructura semántica (para el encabezado, las secciones, el menú de navegación, etc.), así como los formularios interactivos.

En el apartado de CSS3, el lector aprenderá a usar los nuevos selectores, el formato de texto y los contenedores (sombras, bordes redondeados, degradados, bordes con diseños, etc.).

También podrá descubrir el enorme potencial de los nuevos efectos de transformación, transición y animación y la inserción nativa de elementos multimedia (audio y vídeo).

Se ha dedicado un capítulo al Diseño web flexible (Responsive Web Design), que permite adaptar los sitios web a los diferentes soportes de difusión (pantallas de ordenador, tabletas táctiles y smartphones).

Por último, se abordará una de las novedades de las CSS3: el uso del módulo Flexbox que va a revolucionar la concepción de los sitios web facilitando la creación de diseños evolucionados y flexibles. Terminaremos con los futuros y muy prometedores módulos CSS y muy prometedores para el diseño de sus páginas web: el diseño con rejillas, la utilización de las máscaras y el justificado del texto alrededor de imágenes.

Introducción

1. La creación de sitios web
2. Los lenguajes
3. El libro
   1. 1. Para los diseñadores web
   2. 2. El contenido

La evolución del HTML y del CSS

1. Breve historia de Internet
2. La evolución del HTML
   1. 1. Las investigaciones del W3C
   2. 2. El HyperText Markup Language
   3. 3. La evolución con el XHTML
   4. 4. Los disidentes del WHATWG
   5. 5. La llegada del HTML5
   6. 6. Los documentos HTML5 del W3C
   7. 7. ¿Podemos usar HTML5?
   8. 8. Interpretación del HTML5 por los anterioresnavegadores
   9. 9. Este libro y la evolución del HTML5
3. La evolución del CSS
   1. 1. La aparición del CSS
   2. 2. La utilidad del CSS
   3. 3. Las versiones del CSS
   4. 4. La llegada del CSS3
   5. 5. La llegada del CSS4

La nueva sintaxis HTML5

1. El doctype
   1. 1. La sintaxis en HTML 4 y XHTML 1.0
   2. 2. La sintaxis en HTML5
2. El documento HTML
   1. 1. La sintaxis en XHTML 1.0
   2. 2. La sintaxis en HTML5
3. La codificación de los caracteres
   1. 1. La sintaxis en HTML4 y XHTML 1.0
   2. 2. La sintaxis en HTML5
4. Los scripts
5. Los estilos CSS
6. La sintaxis de los elementos
   1. 1. Objetivos
   2. 2. Las comillas
   3. 3. Los elementos con una única etiqueta de apertura
   4. 4. Los elementos con etiqueta de cierre facultativa
   5. 5. Las mayúsculas y minúsculas
   6. 6. Los atributos boleanos
   7. 7. Los elementos HTML, HEAD y BODY
   8. 8. La sintaxis recomendada
7. Los elementos obsoletos
8. Los elementos redefinidos
9. Los atributos obsoletos
10. Los nuevos elementos
    1. 1. El elemento <time></time>
    2. 2. El elemento <mark></mark>
    3. 3. El elemento <meter></meter>
    4. 4. Los elementos <details> y <summary></summary></details>
    5. 5. El elemento <wbr>
    6. 6. El elemento <bdi></bdi>
    7. 7. El elemento <progress></progress>
    8. 8. Los elementos relacionados con los idiomas asiáticos
    9. 9. Los elementos <figure> y <figcaption></figcaption></figure>
    10. 10. Los atributos srcset y sizes para el elemento img
    11. 11. El elemento dialog
11. Tipos de contenido de los elementos
12. La visualización de los elementos
    1. 1. En HTML4
    2. 2. En HTML5

Los elementos de la estructura en HTML5

1. Los elementos de la estructura en HTML4
   1. 1. Las cajas <div></div>
   2. 2. La "divitis"
   3. 3. Un contenido no semántico
2. Los elementos de la estructura en HTML5
   1. 1. Los nuevos elementos de la estructura
   2. 2. El elemento <header></header>
   3. 3. El elemento <footer></footer>
   4. 4. El elemento <nav></nav>
   5. 5. El elemento <section></section>
   6. 6. El elemento <article></article>
   7. 7. El elemento <aside></aside>
   8. 8. El elemento <main></main>
   9. 9. Anidación de los elementos <header> y<footer></footer></header>
   10. 10. Las cajas <div></div>
3. El atributo semántico "role"
4. Ejemplos de estructura en HTML5
   1. 1. Una estructura simple
   2. 2. Una estructura más elaborada
   3. 3. La estructura de un artículo
5. Las técnicas de formato

El camino hacia el CSS3

1. Análisis de la situación
   1. 1. La evolución de los módulos
   2. 2. Consultar las especificaciones
2. Los prefijos para los navegadores
   1. 1. La implementación de las propiedades
   2. 2. Los navegadores y el CSS3
   3. 3. Un generador de prefijos JavaScript
3. Cómo interpretan los navegadores el CSS3
   1. 1. ¿Qué propiedades podemos usar?
   2. 2. When can I use
   3. 3. css3test

Los nuevos selectores de CSS3

1. Los selectores CSS 2
   1. 1. La declaración del CSS
   2. 2. Los selectores
   3. 3. Las pseudo-clases
   4. 4. Los pseudo-elementos
   5. 5. La agrupación de selectores
2. Los nuevos selectores CSS3
3. El selector general de elementos adyacentes
4. El selector de atributo
   1. 1. Funcionalidad
   2. 2. Los vínculos hacia una direcciónde e-mail
   3. 3. Los vínculos de descarga
5. La pseudo-clase de vínculo
   1. 1. Funcionalidad
   2. 2. La aplicación
   3. 3. Resultado
6. Las pseudo-clases estructurales
   1. 1. Funcionalidad
   2. 2. La raíz de la página
   3. 3. El último elemento hijo
   4. 4. Los elementos descendientes
   5. 5. Los últimos hijos de un elemento
   6. 6. Los primeros y los últimos elementos de untipo determinado
   7. 7. Los primeros elementos de un tipo determinado
   8. 8. Los elementos únicos
   9. 9. Los elementos hijo único de un tipo determinado
   10. 10. Los elementos vacíos
   11. 11. Todos los elementos excepto el elemento seleccionado

Los estilos de caja en CSS3

1. Las nuevas propiedades CSS3
2. El tamaño de las cajas
   1. 1. Con CSS 2.1
   2. 2. Con CSS3
3. El desbordamiento de contenido
4. Los colores de fondo
   1. 1. El módulo de los colores
   2. 2. El modo HSB
   3. 3. El modo HSB con transparencia
   4. 4. El modo RGB con transparencia
   5. 5. Un editor RGBA en línea
   6. 6. La transparencia
5. Situación actual de fondos y bordes
6. Los bordes redondeados
   1. 1. Bordes idénticos
   2. 2. Bordes redondeados diferentes
   3. 3. Elipses en las esquinas
   4. 4. Los generadores en línea
7. Los bordes imaginativos
   1. 1. La sintaxis del W3C
   2. 2. Los generadores en línea
8. Las sombras
   1. 1. Situación actual
   2. 2. Crear una sombra
   3. 3. Varios ejemplos de sombras
   4. 4. Aplicar varias sombras
   5. 5. Los generadores en línea
9. Los degradados
   1. 1. Situación actual
   2. 2. Los degradados lineales
   3. 3. Los degradados radiales
   4. 4. Los degradados repetitivos
   5. 5. Los generadores en línea
10. Los fondos múltiples
    1. 1. Funcionalidad
    2. 2. Un ejemplo sencillo
11. Otras propiedades del fondo
    1. 1. Las propiedades
    2. 2. La posición inicial de una imagen
    3. 3. Recortar una imagen
    4. 4. El tamaño del fondo
12. Los generadores CSS3 en línea
    1. 1. Funcionalidad
    2. 2. WestCIV
    3. 3. CSS 3.0 Maker
    4. 4. CSS3 Playground
    5. 5. CSS3 Generator
    6. 6. Layer Style
13. Ejemplo de una tabla con bordes redondeados
    1. 1. Funcionalidad
    2. 2. La estructura de la tabla
    3. 3. El diseño de la tabla
    4. 4. Las celdas de la tabla
    5. 5. Las celdas del encabezado
    6. 6. Celdas redondeadas
    7. 7. La activación de las filas
14. Ejemplo de sombra para una página

HTML5 y CSS3 aplicados al texto

1. Los elementos de texto obsoletos
   1. 1. La especificación del HTML5
   2. 2. Los elementos en desuso o mal utilizados
   3. 3. El formato del texto
2. Los elementos de texto redefinidos
   1. 1. La especificación del HTML5
   2. 2. El elemento <b></b>
   3. 3. El elemento <strong></strong>
   4. 4. El elemento <i></i>
   5. 5. El elemento <em></em>
   6. 6. El elemento <small></small>
   7. 7. El elemento <cite></cite>
   8. 8. El elemento <dl></dl>
   9. 9. El elemento <ol></ol>
   10. 10. El elemento <hr>
   11. 11. El elemento
   13. 12. El elemento <s></s>
   14. 13. El elemento <u></u>
3. Distribución del texto en columnas con CSS3
4. La maquetación del contenido con las CSS3
   1. 1. El módulo CSS3
   2. 2. Las propiedades reconocidas
   3. 3. Las propiedades no reconocidas
   4. 4. Dividir palabras
   5. 5. La cesura
   6. 6. La cesura y el desbordamiento
5. Embellecer el texto con CSS3
   1. 1. Módulo CSS
   2. 2. Las líneas de decoración
   3. 3. Propiedades de línea no reconocidas
   4. 4. Enfatizar el texto
   5. 5. Sombra sobre el texto
6. La tipografía con CSS3
   1. 1. El módulo CSS
   2. 2. Las familias de caracteres
   3. 3. El grosor de los caracteres
   4. 4. El ancho de los caracteres
   5. 5. Los estilos de caracteres
   6. 6. El tamaño de los caracteres
   7. 7. Ajustar el tamaño de los caracteres
   8. 8. Las fuentes tipográficas
   9. 9. La regla @font-face
   10. 10. Las tipografías web en línea
   11. 11. Las propiedades avanzadas

HTML5 y CSS3 para los formularios

1. Funcionalidad
2. Los métodos de envío
3. El elemento <form></form>
4. Los grupos de campos
5. Los nuevos campos
   1. 1. La visualización de los nuevos campos
   2. 2. Los campos para las direcciones de e-mail
   3. 3. El campo para los números de teléfono
   4. 4. El campo para las URL
   5. 5. Los campos para las fechas y las horas
   6. 6. El campo para los valores numéricos
   7. 7. Las barras de selección con cursor
   8. 8. Los campos de búsqueda
   9. 9. El campo de introducción de datos con sugerencias
   10. 10. La selección de un color
   11. 11. Las claves públicas
6. La validación de los formularios
   1. 1. La validación del lado del cliente
   2. 2. Insertar un campo obligatorio
   3. 3. Los valores autorizados
7. Las expresiones regulares
   1. 1. Las letras autorizadas
   2. 2. Un intervalo de letras autorizadas
   3. 3. Otras letras a excepción de
   4. 4. Las mayúsculas y minúsculas
   5. 5. La condición O
   6. 6. Las palabras autorizadas
   7. 7. Autorizar cifras
   8. 8. Un número limitado de caracteres
   9. 9. Los valores múltiples
   10. 10. Los parámetros especiales
8. Las ayudas para los usuarios de un formulario
   1. 1. La ayuda para completar
   2. 2. Activar un campo
   3. 3. El completado automático
   4. 4. Redimensionar un campo
9. Las pseudo-clases para los formularios
   1. 1. Las funcionalidades de las pseudo-clases
   2. 2. El formulario y los estilos CSS
   3. 3. Resultado
   4. 4. Otra pseudo-clase
   5. 5. Los campos obligatorios y facultativos
   6. 6. El formato de :focus
10. La validación de los datos introducidos
    1. 1. Funcionalidad
    2. 2. El formulario
    3. 3. El diseño del formulario
    4. 4. Los campos no válidos
    5. 5. Los mensajes de error
    6. 6. Los campos válidos
    7. 7. Los valores fuera de los límites
11. Un primer ejemplo de formulario sencillo
    1. 1. Objetivo
    2. 2. La estructura del formulario
    3. 3. Los estilos generales
    4. 4. El fondo de la página
    5. 5. El formulario
    6. 6. Las etiquetas
    7. 7. Los campos de inserción de datos
    8. 8. El campo multilínea
    9. 9. Los campos activos
    10. 10. El botón de envío
12. Un segundo ejemplo de formulario muy sobrio
    1. 1. Objetivo
    2. 2. La estructura inicial del formulario
    3. 3. La sombra del formulario
    4. 4. El efecto punteado
    5. 5. El título del formulario
    6. 6. Los trazos decorativos
    7. 7. Los campos de inserción de datos
    8. 8. El botón de conexión
    9. 9. El uso del botón
    10. 10. Los demás vínculos
    11. 11. El resultado final
13. Un ejemplo de formulario interactivo
    1. 1. Objetivo
    2. 2. La estructura inicial del formulario
    3. 3. Las opciones adicionales
    4. 4. El botón de envío
    5. 5. El mensaje de confirmación
    6. 6. Los estilos generales
    7. 7. El diseño del formulario
    8. 8. Las etiquetas
    9. 9. Los campos de inserción de datos
    10. 10. El menú desplegable
    11. 11. El botón de envío
    12. 12. La gestión de las opciones
    13. 13. La visualización inicial
    14. 14. Visualizar las opciones
    15. 15. Ocultar las opciones
    16. 16. El mensaje de confirmación
14. Un último ejemplo de formulario elaborado
    1. 1. Objetivo
    2. 2. La estructura del formulario
    3. 3. Los objetos HTML5
    4. 4. El código completo del formulario
    5. 5. La visualización sin estilos
    6. 6. El diseño general
    7. 7. El diseño del formulario
    8. 8. El formato de las secciones
    9. 9. El diseño de los elementos de la lista
    10. 10. El diseño de las etiquetas
    11. 11. Los campos de tipo <input>
    12. 12. El botón de envío del formulario
15. Crear botones con símbolos
    1. 1. Objetivo
    2. 2. El formulario
    3. 3. Crear una clase para los botones
    4. 4. El pseudo-elemento ::before
    5. 5. El contenido del pseudo-elemento ::before
    6. 6. Aplicar las clases
    7. 7. La visualización del formulario
    8. 8. Otros ejemplos similares
16. Los generadores de botones en línea
    1. 1. Funcionalidad
    2. 2. CSS3 Button
    3. 3. CSS3 Button Generator
    4. 4. CSS Drive Button Generator

Las transformaciones CSS3

1. Situación actual y objetivos
2. La transformación
   1. 1. La propiedad
   2. 2. El punto de referencia
3. El desplazamiento
   1. 1. En los dos ejes
   2. 2. En un eje solamente
4. El cambio de escala
   1. 1. La escala proporcional
   2. 2. La escala no proporcional
   3. 3. El cambio de escala en una única dirección
5. La rotación
6. La deformación
   1. 1. La deformación en los dos ejes
   2. 2. La deformación en un único eje
7. Aplicar todas las transformaciones
8. Los generadores en línea
   1. 1. CSS 3.0 Maker
   2. 2. CSS3 Generator
   3. 3. WestCIV
9. Un menú de ejemplo
   1. 1. Objetivo
   2. 2. La estructura del menú
   3. 3. El diseño
   4. 4. El resultado visual:
10. Ejemplo de una galería Polaroid
    1. 1. Objetivo
    2. 2. La estructura de la galería
    3. 3. El diseño de la galería
    4. 4. Los estilos para las fotografías
    5. 5. La transformación
    6. 6. El resultado visual
11. Ejemplo de una imagen con relieve
    1. 1. Objetivo
    2. 2. La fotografía
    3. 3. La sombra bajo la fotografía

Las transiciones con CSS3

1. Situación actual y objetivos
2. Aplicar transiciones
   1. 1. Las transiciones
   2. 2. Las propiedades CSS
3. Aplicar una transición de desplazamiento
   1. 1. Objetivo
   2. 2. El código necesario
   3. 3. Las propiedades de la transición
   4. 4. El resultado
4. Otras propiedades de las transiciones
   1. 1. El movimiento
   2. 2. El inicio de la transición
   3. 3. La sintaxis abreviada
   4. 4. Las transiciones múltiples
5. Los generadores en línea
   1. 1. CSS3 Generator
   2. 2. CSS 3.0 Maker
   3. 3. Crear las curvas de Bézier
6. Ejemplo de un menú de navegación interactivo
   1. 1. Objetivo
   2. 2. El diseño del formulario
   3. 3. Las transiciones
   4. 4. La visualización
7. Ejemplo de un diaporama interactivo
   1. 1. Objetivo
   2. 2. La estructura del diaporama
   3. 3. Las transformaciones
   4. 4. Las transiciones
   5. 5. La visualización
8. Ejemplo de un menú de navegación "con cajones"
   1. 1. Objetivo
   2. 2. La estructura del menú de navegación
   3. 3. El diseño del menú
   4. 4. El diseño de los cajones
   5. 5. La visualización inicial
   6. 6. Las transiciones
   7. 7. La visualización
   8. 8. Los menús de navegación "flashy"
9. Ejemplo de interfaz en "acordeón"
   1. 1. Objetivo
   2. 2. La estructura del "acordeón"
   3. 3. El diseño del "acordeón"
   4. 4. El diseño de las zonas de visualizacióndesplegables
   5. 5. La visualización

Las animaciones en CSS3

1. Situación actual y objetivos
2. La creación de una animación
3. Un desplazamiento simple
   1. 1. Objetivo
   2. 2. La estructura
   3. 3. La animación
   4. 4. La visualización
4. Rotación y transparencia
   1. 1. Objetivo
   2. 2. La estructura
   3. 3. La animación
   4. 4. La visualización
5. Un formulario que parpadee
   1. 1. Objetivo
   2. 2. La estructura del formulario
   3. 3. El diseño
   4. 4. La animación
   5. 5. La visualización
6. Una ventana modal
   1. 1. Objetivo
   2. 2. El botón
   3. 3. La ventana modal
   4. 4. El botón de cierre
   5. 5. Ocultar el cuerpo de la página
   6. 6. La animación de apertura
   7. 7. Activar la animación de apertura
   8. 8. Aplicar la ocultación
   9. 9. La animación de cierre
   10. 10. Activar la animación de cierre
   11. 11. El código completo
   12. 12. La visualización de la página

Los elementos multimedia: audio y vídeo

1. Situación actual
   1. 1. Insertar elementos multimedia
   2. 2. Los formatos y los códecs para la Web
2. Insertar audio
   1. 1. El elemento audio
   2. 2. Los controles de audio
   3. 3. La apariencia del reproductor de audio
   4. 4. Los atributos para el audio
   5. 5. La fuente del audio
   6. 6. Diseñe sus propios controles de audio
   7. 7. Los antiguos navegadores
3. Insertar vídeo
   1. 1. El elemento vídeo
   2. 2. Los atributos para el vídeo
   3. 3. La apariencia del reproductor de vídeo
   4. 4. Los formatos de vídeo
   5. 5. Convertir vídeos

El diseño web flexible

1. Situación actual y objetivos
2. Las búsquedas "Media queries"
   1. 1. Objetivo
   2. 2. Con el HTML 4 y las CSS 2.1
   3. 3. Los criterios de búsqueda de Media Queriesen CSS3
   4. 4. La sintaxis de las búsquedas Media Queries
   5. 5. Los valores máximos y mínimos
   6. 6. Los operadores lógicos
3. El tamaño de las pantallas
   1. 1. La problemática actual
   2. 2. El tamaño del viewport
   3. 3. El zoom de la pantalla
   4. 4. El tamaño y la emulación de la pantalla
4. Las estructuras flexibles
   1. 1. Las técnicas
   2. 2. Un ejemplo sencillo
   3. 3. Ejemplo de un sitio web sencillo
   4. 4. Aplicar un diseño adaptable sencillo
5. Las imágenes flexibles
   1. 1. El desbordamiento de las imágenes
   2. 2. Imponer un ancho máximo
6. Crear un diseño flexible
   1. 1. Las dos estrategias
   2. 2. Diseñar un sitio web adaptable
   3. 3. Otros ejemplos de diseño web adaptable
7. El sitio web Food Sense
   1. 1. La visualización
   2. 2. La estructura principal
   3. 3. El viewport
   4. 4. La visualización para las pantallas de mayortamaño
   5. 5. La visualización para las tabletas táctiles
   6. 6. La visualización para los smartphones

El diseño con Flexbox

1. Los objetivos
2. Las propiedades para el contenedor Flexbox
   1. 1. El contenedor
   2. 2. La dirección de la vista
   3. 3. El salto de línea o de columna
   4. 4. La propiedad con sintaxis corta
   5. 5. Alinear y centrar en el eje principal
   6. 6. Alinear y centrar en el eje secundario
   7. 7. La alineación y el salto de línea
3. Las propiedades para los ítems Flexbox
   1. 1. El orden de presentación
   2. 2. La alineación de un ítem Flexbox
   3. 3. Aumentar el tamaño de los ítemsFlexbox
   4. 4. Disminuir el tamaño de los ítemsFlexbox
   5. 5. Especificar el tamaño de los ítems
   6. 6. La propiedad con sintaxis abreviada
4. Elaboración de un diseño Flexbox
   1. 1. Los objetivos
   2. 2. El contenedor principal
   3. 3. El encabezado
   4. 4. La barra de navegación
   5. 5. La parte principal
   6. 6. Las sidebars
   7. 7. El contenido de la parte central
   8. 8. El pie de página
   9. 9. El código completo
5. Elaboración de un diseño Flexbox adaptativo
   1. 1. Los objetivos
   2. 2. La regla @media
   3. 3. La barra de navegación
   4. 4. La vista de la parte principal
   5. 5. La vista en las sidebars
   6. 6. Las reglas CSS para una página adaptativa

Los otros módulos CSS3

1. La evolución de los módulos CSS
2. El diseño con una rejilla
3. Utilizar máscaras
4. Justificar texto alrededor de un objeto