Las técnicas de diseño de sitios web han evolucionado mucho en los últimos años con el uso del Responsive Web Design y las media queries; recientemente, han aparecido nuevos módulos del W3C que permiten elaborar diseños de página flexibles, con múltiples columnas y en cuadrícula.

En este libro, empezaremos con una presentación de los diferentes problemas de compatibilidad que siguen existiendo en la actualidad. A continuación, recordaremos los métodos de diseño "clásicos" y sus limitaciones antes de presentar la técnica del diseño basado en el uso de tablas y CSS3.

El Responsive Web Design se basa, fundamentalmente, en las Media Queries CSS3: aprenderemos a dominar esta técnica gracias a numerosos ejemplos. Pasaremos después a los diferentes aspectos del diseño responsive: las cuadrículas, las imágenes y la tipografía. Basándonos en numerosos ejemplos, veremos en detalle los nuevos módulos del W3C: el diseño de página flexible (módulo Flexible Box Layout o Flexbox), el diseño de página con varias columnas (módulo Multi-column Layout) y el diseño de página en cuadrícula (Grid Layout).

Para optimizar el trabajo, aprenderemos a utilizar algunos frameworks CSS, con los que podremos utilizar toda una serie de componentes HTML5/CSS3 para diseñar de forma eficaz sitios responsive.

Por último, presentaremos las futuras técnicas avanzadas de diseño que el W3C está estudiando actualmente.

Descargas

• Descargar los ejemplos del libro (5,88 Mo)

Introducción

1. El diseño web actual
2. Diseño web responsive
3. Planteamientos de diseño
4. Objetivos del libro
5. Herramientas del maquetador
   1. 1. Objetivos
   2. 2. Mozilla Firefox
   3. 3. Google Chrome
   4. 4. Apple Safari
   5. 5. Microsoft Internet Explorer y Edge
6. Descargar ejemplos

Soluciones para la compatibilidad

1. Disparidad entre navegadores
2. Mejorar la compatibilidad
3. Visualización inicial de los navegadores
4. Normalize.css
   1. 1. El proyecto
   2. 2. Descargar Normalize.css
   3. 3. Instalar Normalize.css
5. El HTML5 y html5shiv.js
   1. 1. Objetivo
   2. 2. Archivo de ejemplo
   3. 3. Librería html5shiv.js
6. Media queries y respond.js
   1. 1. Objetivo
   2. 2. Archivo de ejemplo
   3. 3. La librería respond.js
7. Las alternativas y Modernizr.js
   1. 1. Objetivo
   2. 2. Descargar Modernizr
   3. 3. Crear una página de ejemplo
   4. 4. Instalar y enlazar el script Modernizr
   5. 5. La activación de Modernizr
   6. 6. Utilizar las clases de Modernizr
8. Las reglas @supports
   1. 1. Objetivo
   2. 2. Utilizar las reglas @supports
   3. 3. Operadores

El diseño clásico

1. Diseñadores y maquetadores
2. Modelos de cajas
3. Los márgenes de los elementos
4. Visualización de los elementos
5. Visualización en flujo normal
6. Posicionamiento absoluto
7. Posicionamiento fijo
8. Posicionamiento relativo
9. Utilizar el diseño en posición relativa y absoluta
10. Visualización de cajas flotantes
    1. 1. Posicionamiento flotante
    2. 2. Colocar las cajas al lado
    3. 3. Prohibir la flotación
    4. 4. Ejemplo con cuatro cajas
    5. 5. Diseño simplista
    6. 6. Conclusión sobre diseñar con elementosflotantes

Diseñar con tablas

1. Objetivo
2. La propiedad display
3. Diseño simple con una tabla
4. Ancho en pantalla de la tabla
5. Elementos anónimos
6. Otros elementos para las tablas
   1. 1. Párrafos en las celdas
   2. 2. Listas en tablas
7. Diseño de las filas
8. Establecer el ancho de las celdas
   1. 1. Anchos fijos
   2. 2. Anchos en porcentaje
9. Diseño con una tabla más estructurada
10. Otras propiedades de diseño
    1. 1. Propiedad table-layout
    2. 2. Propiedad border-collapse
    3. 3. Propiedad border-spacing
    4. 4. Propiedad empty-cells
    5. 5. Propiedad caption-side
11. Alineación vertical
12. Conclusión

Media Queries

1. Objetivo
2. Orígenes
3. Uso de media queries
4. Sintaxis de las media queries
5. Características a prueba
6. Dónde ubicar las media queries
7. Tamaño de las pantallas de los móviles
8. El concepto viewport
9. Un ejemplo muy sencillo
   1. 1. Esquema
   2. 2. Código HTML y CSS
10. Las propiedades CSS de las imágenes responsive
    1. 1. Las imágenes en primer plano
    2. 2. Las imágenes de fondo
11. Adaptar el tamaño al viewport
12. Un diseño de página fluido
    1. 1. El objetivo
    2. 2. El diseño de página fijo
    3. 3. Un diseño de página fluido
    4. 4. El ancho fluido del resto de los elementos
    5. 5. Los anchos de las imágenes fluidas
    6. 6. Mostrar y cambiar el tamaño de la página
    7. 7. El código completo de la página
13. El script Response.js
    1. 1. Utilizar el JavaScript
    2. 2. Descargar los JavaScript
    3. 3. Las vinculaciones a los JavaScript
    4. 4. Preparar las imágenes
    5. 5. El código de la página
    6. 6. El funcionamiento del script
    7. 7. Optimizar los textos alternativos
    8. 8. El código completo de la página
14. Las propuestas para el futuro
    1. 1. Los nuevos atributos para <img>
    2. 2. El atributo srcset para tamaños de imagenfijos
    3. 3. El atributo srcset para anchos disponibles
    4. 4. El atributo size
    5. 5. Los nuevos elementos <picture> y <source></picture>
15. La tipografía responsive
    1. 1. El objetivo
    2. 2. Las unidades utilizadas
    3. 3. La unidad em y la cascada
    4. 4. La unidad rem y la cascada
    5. 5. La tipografía responsive y la unidad rem
    6. 6. La tipografía responsive y las fuentes
    7. 7. Las unidades vinculadas al viewport
16. Ejemplos de sitios con media queries

El diseño en varias columnas en CSS3

1. El módulo Multi-column Layout del W3C
2. La compatibilidad de los navegadores
3. El diseño en varias columnas
   1. 1. El número de columnas
   2. 2. La anchura de las columnas
   3. 3. La sintaxis corta
4. El espacio entre las columnas
   1. 1. El espacio entre columnas
   2. 2. La línea de separación
5. La justificación del texto
6. Los saltos de columna
7. Los elementos transversales
8. La gestión del texto en las columnas
   1. 1. El relleno de las columnas
   2. 2. El contenido demasiado extenso
   3. 3. El desbordamiento del contenido
9. El uso de varias columnas y el Responsive Web Design
   1. 1. Las media queries
   2. 2. Un diseño de página de varias columnasresponsive
   3. 3. Un menú responsive en varias columnas

El diseño flexible en CSS3

1. El módulo Flexible Box Layout del W3C
2. La compatibilidad de los navegadores
3. La elaboración del diseño flexible
4. El contenedor flexible
   1. 1. La definición del contexto flexible
   2. 2. La distribución de los elementos flexibles
   3. 3. El cambio de fila
   4. 4. La sintaxis corta para la distribución yel cambio de fila
   5. 5. La justificación horizontal en las filas
   6. 6. La justificación vertical en las columnas
   7. 7. La alineación vertical en las filas
   8. 8. La alineación horizontal en las columnas
   9. 9. El cambio de fila y la alineación
5. Los elementos flexibles
   1. 1. El contexto de los elementos flexibles
   2. 2. Cambiar el orden en el que aparecen los elementos
   3. 3. La alineación de un elemento
   4. 4. La ampliación de los elementos
   5. 5. La reducción de los elementos
   6. 6. Ancho o alto indicativos
   7. 7. La sintaxis corta para cambiar el tamaño
   8. 8. Establecer el tamaño fijo de los elementoscon flex
   9. 9. Establecer el tamaño flexible de los elementoscon flex
6. Ejemplos de diseños de página
   1. 1. Un diseño de página muy simple
   2. 2. Un diseño de página máselaborado
   3. 3. Colocar un elemento siempre en la parte inferior desu contenedor
7. El diseño flexible y el Responsive Web Design

El diseño de cuadrícula en CSS3

1. El módulo Grid Layout del W3C
2. La compatibilidad de los navegadores
   1. 1. Los navegadores
   2. 2. Forzar el reconocimiento
   3. 3. Google Chrome
   4. 4. Mozilla Firefox
   5. 5. Apple Safari
3. La terminología de la cuadrícula
4. Crear una cuadrícula normal
   1. 1. Los anchos fijos de las columnas
   2. 2. Los anchos disponibles de las columnas
   3. 3. Los anchos relativos de las columnas
   4. 4. Los anchos automáticos de las columnas
   5. 5. Las repeticiones
   6. 6. Las alturas de las filas
5. Poner nombre a las zonas de la cuadrícula
   1. 1. Poner nombre a todas las celdas
   2. 2. El caso de las celdas vacías
   3. 3. Poner nombre a las zonas de celdas horizontalmente
   4. 4. Poner nombre a las zonas de celdas verticalmente
   5. 5. Poner nombre a las líneas en una cuadrículasimple
   6. 6. Poner nombre a las líneas en una cuadrículaelaborada
6. La gestión de los espacios de la cuadrícula
7. La justificación y la alineación
   1. 1. La justificación en las columnas
   2. 2. La alineación en las filas
   3. 3. La justificación y la alineaciónen las celdas
8. La justificación y la alineación en el contenedor
   1. 1. La justificación horizontal
   2. 2. La alineación vertical
9. La colocación automática

Las cuadrículas del diseño de página

1. Los objetivos
2. La cuadrícula Gridlex
   1. 1. Implementar la cuadrícula
   2. 2. Los puntos de ruptura
   3. 3. Colocar tres bloques en la cuadrícula
   4. 4. Crear una cuadrícula responsive con los bloques
   5. 5. Colocar los bloques en la cuadrícula
   6. 6. Crear una cuadrícula responsive
   7. 7. El posicionamiento automático
   8. 8. Los espacios entre columnas
   9. 9. Una cuadrícula con tres líneas
   10. 10. Otras características de Gridlex
3. La cuadrícula Grillade
   1. 1. Implementar la cuadrícula
   2. 2. Los puntos de ruptura
   3. 3. Una cuadrícula simple
   4. 4. Insertar un espacio entre columnas
   5. 5. Asignar un tamaño a los bloques en la cuadrícula
   6. 6. Utilizar una cuadrícula de varias líneas
   7. 7. Empujar un bloque
4. La cuadrícula Simple Grid
   1. 1. Implementar la cuadrícula
   2. 2. El punto de ruptura
   3. 3. Un diseño con una sola línea
   4. 4. Un diseño con varias líneas
   5. 5. El diseño en columnas
   6. 6. Desplazar los bloques
   7. 7. Excepciones para los smartphones

Frameworks de CSS

1. Utilizar los frameworks de CSS
2. Frameworks de CSS
3. El framework Uikit
   1. 1. Utilizar Uikit
   2. 2. Descargar el framework
   3. 3. Descargar jQuery
   4. 4. Instalar el framework
   5. 5. Crear una cuadrícula fluida
   6. 6. Utilizar la cuadrícula fluida
   7. 7. Utilizar la cuadrícula responsive de Uikit
   8. 8. Crear una barra de navegación
   9. 9. Crear una tabla con formato
4. El framework Kube
   1. 1. Utilizar Kube
   2. 2. Descargar el framework
   3. 3. Instalar el framework
   4. 4. Crear una cuadrícula flexible
   5. 5. Utilizar una cuadrícula flexible
   6. 6. Insertar un formulario
5. El framework Material Design Lite
   1. 1. Utilizar Material Design Lite
   2. 2. Las plantillas
   3. 3. Las vinculaciones para los componentes
   4. 4. Utilizar los componentes
   5. 5. Los estilos CSS para la tipografía
   6. 6. Personalizar los colores

El futuro del diseño

1. Los módulos del W3C
2. Recorrido
3. Las plantillas de página
4. Distribución en los documentos estructurados
5. Regiones