Responsive Web Design, diseños y cuadrículas Técnicas modernas de diseño web (2ª edición)

Transcripción

1 Capítulo 1: Introducción A. El diseño web actual 11 B. Diseño web responsive 11 C. Planteamientos de diseño 12 D. Objetivos del libro 13 E. Herramientas del maquetador Objetivos Mozilla Firefox Google Chrome Apple Safari Microsoft Internet Explorer y Edge 16 F. Descargar ejemplos 17 Capítulo 2: Soluciones para la compatibilidad A. Disparidad entre navegadores 21 B. Mejorar la compatibilidad 22 C. Visualización inicial de los navegadores 22 D. Normalize.css El proyecto Descargar Normalize.css Instalar Normalize.css 25 1/12

2 E. El HTML5 y html5shiv.js Objetivo Archivo de ejemplo Librería html5shiv.js 28 F. Media queries y respond.js Objetivo Archivo de ejemplo La librería respond.js 32 G. Las alternativas y Modernizr.js Objetivo Descargar Modernizr Crear una página de ejemplo Instalar y enlazar el script Modernizr La activación de Modernizr Utilizar las clases de Modernizr 38 H. Las Objetivo Utilizar las Operadores 42 Capítulo 3: El diseño clásico A. Diseñadores y maquetadores 45 B. Modelos de cajas 45 C. Los márgenes de los elementos 46 2/12

3 D. Visualización de los elementos 46 E. Visualización en flujo normal 47 F. Posicionamiento absoluto 48 G. Posicionamiento fijo 49 H. Posicionamiento relativo 51 I. Utilizar el diseño en posición relativa y absoluta 51 J. Visualización de cajas flotantes Posicionamiento flotante Colocar las cajas al lado Prohibir la flotación Ejemplo con cuatro cajas Diseño simplista Conclusión sobre diseñar con elementos flotantes 66 Capítulo 4: Diseñar con tablas A. Objetivo 69 B. La propiedad display 69 C. Diseño simple con una tabla 71 D. Ancho en pantalla de la tabla 72 3/12

4 E. Elementos anónimos 72 F. Otros elementos para las tablas Párrafos en las celdas Listas en tablas 74 G. Diseño de las filas 75 H. Establecer el ancho de las celdas Anchos fijos Anchos en porcentaje 77 I. Diseño con una tabla más estructurada 78 J. Otras propiedades de diseño Propiedad table-layout Propiedad border-collapse Propiedad border-spacing Propiedad empty-cells Propiedad caption-side 86 K. Alineación vertical 89 L. Conclusión 90 Capítulo 5: Media Queries A. Objetivo 93 B. Orígenes 93 4/12

5 C. Uso de media queries 93 D. Sintaxis de las media queries 94 E. Características a prueba 95 F. Dónde ubicar las media queries 96 G. Tamaño de las pantallas de los móviles 97 H. El concepto viewport 99 I. Un ejemplo muy sencillo Esquema Código HTML y CSS 104 J. Las propiedades CSS de las imágenes responsive Las imágenes en primer plano Las imágenes de fondo 116 K. Adaptar el tamaño al viewport 122 L. Un diseño de página fluido El objetivo El diseño de página fijo Un diseño de página fluido El ancho fluido del resto de los elementos Los anchos de las imágenes fluidas Mostrar y cambiar el tamaño de la página El código completo de la página 133 M. El script Response.js 135 5/12

6 1. Utilizar el JavaScript Descargar los JavaScript Las vinculaciones a los JavaScript Preparar las imágenes El código de la página El funcionamiento del script Optimizar los textos alternativos El código completo de la página 141 N. Las propuestas para el futuro Los nuevos atributos para <img> El atributo srcset para tamaños de imagen fijos El atributo srcset para anchos disponibles El atributo size Los nuevos elementos <picture> y <source> 147 O. La tipografía responsive El objetivo Las unidades utilizadas La unidad em y la cascada La unidad rem y la cascada La tipografía responsive y la unidad rem La tipografía responsive y las fuentes Las unidades vinculadas al viewport 156 P. Ejemplos de sitios con media queries 157 Capítulo 6: El diseño en varias columnas en CSS3 A. El módulo Multi-column Layout del W3C 161 B. La compatibilidad de los navegadores 162 6/12

7 C. El diseño en varias columnas El número de columnas La anchura de las columnas La sintaxis corta 164 D. El espacio entre las columnas El espacio entre columnas La línea de separación 166 E. La justificación del texto 167 F. Los saltos de columna 168 G. Los elementos transversales 172 H. La gestión del texto en las columnas El relleno de las columnas El contenido demasiado extenso El desbordamiento del contenido 177 I. El uso de varias columnas y el Responsive Web Design Las media queries Un diseño de página de varias columnas responsive Un menú responsive en varias columnas 181 Capítulo 7: El diseño flexible en CSS3 A. El módulo Flexible Box Layout del W3C 187 B. La compatibilidad de los navegadores 187 7/12

8 C. La elaboración del diseño flexible 188 D. El contenedor flexible La definición del contexto flexible La distribución de los elementos flexibles El cambio de fila La sintaxis corta para la distribución y el cambio de fila La justificación horizontal en las filas La justificación vertical en las columnas La alineación vertical en las filas La alineación horizontal en las columnas El cambio de fila y la alineación 200 E. Los elementos flexibles El contexto de los elementos flexibles Cambiar el orden en el que aparecen los elementos La alineación de un elemento La ampliación de los elementos La reducción de los elementos Ancho o alto indicativos La sintaxis corta para cambiar el tamaño Establecer el tamaño fijo de los elementos con flex Establecer el tamaño flexible de los elementos con flex 212 F. Ejemplos de diseños de página Un diseño de página muy simple Un diseño de página más elaborado Colocar un elemento siempre en la parte inferior de su contenedor 222 G. El diseño flexible y el Responsive Web Design 226 Capítulo 8: El diseño de cuadrícula en CSS3 8/12

9 A. El módulo Grid Layout del W3C 233 B. La compatibilidad de los navegadores Los navegadores Forzar el reconocimiento Google Chrome Mozilla Firefox Apple Safari 235 C. La terminología de la cuadrícula 236 D. Crear una cuadrícula normal Los anchos fijos de las columnas Los anchos disponibles de las columnas Los anchos relativos de las columnas Los anchos automáticos de las columnas Las repeticiones Las alturas de las filas 245 E. Poner nombre a las zonas de la cuadrícula Poner nombre a todas las celdas El caso de las celdas vacías Poner nombre a las zonas de celdas horizontalmente Poner nombre a las zonas de celdas verticalmente Poner nombre a las líneas en una cuadrícula simple Poner nombre a las líneas en una cuadrícula elaborada 256 F. La gestión de los espacios de la cuadrícula 260 G. La justificación y la alineación La justificación en las columnas La alineación en las filas La justificación y la alineación en las celdas 265 9/12

10 H. La justificación y la alineación en el contenedor La justificación horizontal La alineación vertical 270 I. La colocación automática 273 Capítulo 9: Las cuadrículas del diseño de página A. Los objetivos 277 B. La cuadrícula Gridlex Implementar la cuadrícula Los puntos de ruptura Colocar tres bloques en la cuadrícula Crear una cuadrícula responsive con los bloques Colocar los bloques en la cuadrícula Crear una cuadrícula responsive El posicionamiento automático Los espacios entre columnas Una cuadrícula con tres líneas Otras características de Gridlex 286 C. La cuadrícula Grillade Implementar la cuadrícula Los puntos de ruptura Una cuadrícula simple Insertar un espacio entre columnas Asignar un tamaño a los bloques en la cuadrícula Utilizar una cuadrícula de varias líneas Empujar un bloque 293 D. La cuadrícula Simple Grid /12

11 1. Implementar la cuadrícula El punto de ruptura Un diseño con una sola línea Un diseño con varias líneas El diseño en columnas Desplazar los bloques Excepciones para los smartphones 300 Capítulo 10: Frameworks de CSS A. Utilizar los frameworks de CSS 305 B. Frameworks de CSS 305 C. El framework Uikit Utilizar Uikit Descargar el framework Descargar jquery Instalar el framework Crear una cuadrícula fluida Utilizar la cuadrícula fluida Utilizar la cuadrícula responsive de Uikit Crear una barra de navegación Crear una tabla con formato 323 D. El framework Kube Utilizar Kube Descargar el framework Instalar el framework Crear una cuadrícula flexible Utilizar una cuadrícula flexible Insertar un formulario /12

12 E. El framework Material Design Lite Utilizar Material Design Lite Las plantillas Las vinculaciones para los componentes Utilizar los componentes Los estilos CSS para la tipografía Personalizar los colores 345 Capítulo 11: El futuro del diseño A. Los módulos del W3C 349 B. Recorrido 349 C. Las plantillas de página 349 D. Distribución en los documentos estructurados 350 E. Regiones 351 índice /12