HTML5 y CSS3 para sitios con diseño web responsive

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. Pasar a otra cosa 12 E. Objetivos del libro 13 F. Herramientas del maquetador Objetivos Mozilla Firefox Google Chrome Apple Safari Microsoft Internet Explorer 16 G. Descargar ejemplos 17 Capítulo 2: Soluciones para la compatibilidad A. Disparidad entre navegadores 21 B. Mejorar la compatibilidad 21 C. Visualización inicial de los navegadores El problema El reset universal El reset de Eric Meyer 22 1/12

2 4. El reset de HTML5 Doctor 22 D. Normalize.css El proyecto Descargar Normalize.css Instalar Normalize.css 25 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 31 G. Las alternativas y Modernizr.js Objetivo Descargar Modernizr Crear una página de ejemplo Instale y enlace el script Modernizr La activación de Modernizr Utilizar las clases de Modernizr Utilizar Modernizr con JavaScript 39 H. Las Objetivo Utilizar las Operadores 44 Capítulo 3: El diseño clásico 2/12

3 A. Diseñadores y maquetadores 47 B. Modelos de cajas 47 C. Los márgenes de los elementos 48 D. Visualización de los elementos 48 E. Visualización en flujo normal 49 F. Posicionamiento absoluto 50 G. Posicionamiento fijo 51 H. Posicionamiento relativo 53 I. Utilizar el diseño en posición relativa y absoluta 53 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 68 Capítulo 4: Diseñar con tablas A. Objetivo 71 3/12

4 B. La propiedad display 71 C. Diseño simple con una tabla 73 D. Ancho en pantalla de la tabla 74 E. Elementos anónimos 74 F. Otros elementos para las tablas Párrafos en las celdas Listas en tablas 76 G. Diseño de las filas 77 H. Establecer el ancho de las celdas Anchos fijos Anchos en porcentaje 79 I. Diseño con una tabla más estructurada 80 J. Otras propiedades de diseño Propiedad table-layout Propiedad border-collapse Propiedad border-spacing Propiedad empty-cells Propiedad caption-side 89 K. Alineación vertical 91 L. Conclusión 92 4/12

5 Capítulo 5: Cuadrículas de diseño A. Objetivo 95 B. Estructura de las cuadrículas para la web 96 C. Cuadrículas fijas 97 D. La cuadrícula fija 960gs Cuadrícula Archivos CSS Página de ejemplo Enlaces a las hojas de estilo Estilos personales Contenedor del diseño Bloques en 12 columnas Bloques en las columnas de la cuadrícula Prohibir los bloques flotantes adyacentes Bloques con desplazamiento Bloques centrados Código completo de la página 108 E. Cuadrícula fija notjustagrid El framework Cuadrícula Página de ejemplo Archivos CSS Enlaces a las hojas de estilo Estilos personales Contenedor del diseño Sistema de clases Bloque para todo el ancho Tres bloques en un tercio de la cuadrícula Dos bloques en 3/5 y 2/5 de la cuadrícula 116 5/12

6 12. Un solo bloque en 2/3 de la cuadrícula Código completo de la página 117 F. Cuadrícula fluida Gridiculous Cuadrículas fluidas Cuadrícula Gridiculous Página de ejemplo Descargar la cuadrícula Instalar la cuadrícula Estilos personales Contenedor Filas Tres bloques con la misma anchura Dos bloques con anchos distintos Bloque desplazado Visualización de la cuadrícula fluida 127 Capítulo 6: Media Queries A. Objetivo 131 B. Orígenes 131 C. Uso de media queries 131 D. Sintaxis de las media queries 132 E. Características a prueba 133 F. Dónde ubicar las media queries 134 G. Tamaño de las pantallas de los móviles 135 6/12

7 H. El concepto viewport 137 I. Un ejemplo muy sencillo Esquema Código HTML y CSS 142 J. Cuadrícula responsive Cuadrícula Descargar e instalar la cuadrícula Crear una página sencilla de 12 columnas Vínculo a los estilos y a los scripts Estructura del diseño Reglas CSS 152 K. Ejemplos de sitios con media queries 154 Capítulo 7: El diseño responsive A. El diseño responsive 159 B. Cuadrículas responsive 159 C. Cuadrícula responsive Simple Grid Utilizar Simple Grid Descargar e instalar Simple Grid Filas Esquema Primera fila Segunda fila Tercera fila Utilizar la cuadrícula fluida y responsive Código completo 168 7/12

8 D. Cuadrícula responsive Columnal Utilizar Columnal Descargar e instalar Columnal Esquema Contenedor y filas Primera fila Segunda fila La tercera fila y el desplazamiento La cuarta fila y bloques anidados Utilizar la cuadrícula fluida y responsive Código completo del diseño Imágenes responsives Código completo para el diseño con una imagen responsive 185 E. Uso de imágenes 185 F. Imágenes fluidas Objetivo Diseño fijo Diseño fluido Ancho fluido de otros elementos Anchos de imágenes fluidas Abrir y cambiar el tamaño de la página Código completo de la página 194 G. Script Response.js Utilizar JavaScript Descargar el JavaScript Enlaces a los JavaScript Preparar imágenes Código de la página Funcionamiento del script Optimizar las leyendas Código completo de la página 201 8/12

9 H. Script picturefill.js Utilizar JavaScript Descargar el JavaScript Enlaces a los JavaScript Preparar imágenes Código de la página Visualización de la imagen responsive Código para las pantallas de alta definición (Retina) Código completo de la página 206 I. Script responsive-images.js Utilizar JavaScript Descarga la demo Código de la página Utilizar la página 209 J. Propuestas para el futuro Grupos de trabajo: RICG y W3C Grupos de trabajo: Apple y W3C 211 K. Tipografía responsive Objetivo Unidades utilizadas Unidad em y cascada Unidad rem y la cascada Tipografía responsive y unidad rem Tipografía responsive y fuentes Unidades relacionadas con el viewport 217 L. Tablas responsives Objetivo Zurb La solución de Geoff Yuen 223 9/12

10 4. La solución de Chris Coyier Otras soluciones 230 Capítulo 8: Frameworks de CSS A. Utilizar los frameworks de CSS 237 B. Frameworks de CSS 238 C. 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 254 D. Kube Utilizar Kube Descargar el framework Instalar el framework Crear una cuadrícula fluida y responsive Utilizar la cuadrícula fluida y responsive Insertar un formulario Insertar botones 268 E. Pure Utilizar Pure Descargar el framework Enlazar el framework /12

11 4. Utilizar la cuadrícula fluida responsive Insertar una tabla Insertar una barra de menú con un menú desplegable 276 Capítulo 9: El futuro del diseño A. Objetivos 283 B. Multicolumna Preceptos de uso Configuración de columnas Configuración de las calles Configuración de saltos de columna Distribución en varias columnas Un generador de multicolumnas Columnas y diseño responsive 289 C. Cajas flexibles Ubicación de los elementos de diseño Módulo de las cajas flexibles Cajas flexibles Orientación y dirección de las cajas Desbordamiento de las cajas Orientación de las cajas Alineación horizontal de las cajas Alineación vertical de las cajas Excepciones en la alineación vertical Excepciones en la alineación horizontal Propiedades de la flexibilidad Propiedad flex-grow Propiedades flex-shrink y flex-basis Constructores en línea Ejemplo de diseño flexible /12

12 D. Otros módulos del W3C Recorrido Cuadrículas Plantilla de página Distribución Regiones 319 índice /12