Librería Portfolio

El objetivo del diseño web responsive es crear sitios web que se adaptan automáticamente a cualquier resolución para obtener así una visualización óptima, independientemente del tipo de pantalla, ya sea de ordenador, tableta o smartphone.

En este libro, empezaremos con un recordatorio sobre los métodos de diseño ´clásico´ y sus limitaciones antes de presentar la técnica del diseño basado en el uso de tablas y CSS3. A continuación, veremos cómo utilizar las cuadrículas de diseño, las cuadrículas fijas y fluidas.

El diseño web responsive 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.

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. También veremos la utilidad de las librerías JavaScript para gestionar los problemas de compatibilidad con los navegadores.

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



Capítulo 1: Introducción
A. El diseño web actualB. Diseño web responsiveC. Planteamientos de diseñoD. Pasar a otra cosaE. Objetivos del libroF. Herramientas del maquetador 1. Objetivos2. Mozilla Firefox3. Google Chrome4. Apple Safari5. Microsoft Internet ExplorerG. Descargar ejemplos
Capítulo 2: Soluciones para la compatibilidad
A. Disparidad entre navegadoresB. Mejorar la compatibilidadC. Visualización inicial de los navegadores 1. El problema2. El reset universal3. El reset de Eric Meyer4. El reset de HTML5 DoctorD. Normalize.css 1. El proyecto2. Descargar Normalize.css3. Instalar Normalize.cssE. El HTML5 y html5shiv.js 1. Objetivo2. Archivo de ejemplo3. Librería html5shiv.jsF. Media queries y respond.js 1. Objetivo2. Archivo de ejemplo3. La librería respond.jsG. Las alternativas y Modernizr.js 1. Objetivo2. Descargar Modernizr3. Crear una página de ejemplo4. Instale y enlace el script Modernizr5. La activación de Modernizr6. Utilizar las clases de Modernizr7. Utilizar Modernizr con JavaScriptH. Las reglas @supports 1. Objetivo2. Utilizar las reglas @supports3. Operadores
Capítulo 3: El diseño clásico
A. Diseñadores y maquetadoresB. Modelos de cajasC. Los márgenes de los elementosD. Visualización de los elementosE. Visualización en flujo normalF. Posicionamiento absolutoG. Posicionamiento fijoH. Posicionamiento relativoI. Utilizar el diseño en posición relativa y absolutaJ. Visualización de cajas flotantes 1. Posicionamiento flotante2. Colocar las cajas al lado3. Prohibir la flotación4. Ejemplo con cuatro cajas5. Diseño simplista6. Conclusión sobre diseñar con elementos flotantes
Capítulo 4: Diseñar con tablas
A. ObjetivoB. La propiedad displayC. Diseño simple con una tablaD. Ancho en pantalla de la tablaE. Elementos anónimosF. Otros elementos para las tablas 1. Párrafos en las celdas2. Listas en tablasG. Diseño de las filasH. Establecer el ancho de las celdas 1. Anchos fijos2. Anchos en porcentajeI. Diseño con una tabla más estructuradaJ. Otras propiedades de diseño 1. Propiedad table-layout2. Propiedad border-collapse3. Propiedad border-spacing4. Propiedad empty-cells5. Propiedad caption-sideK. Alineación verticalL. Conclusión
Capítulo 5: Cuadrículas de diseño
A. ObjetivoB. Estructura de las cuadrículas para la webC. Cuadrículas fijasD. La cuadrícula fija 960gs 1. Cuadrícula2. Archivos CSS3. Página de ejemplo4. Enlaces a las hojas de estilo5. Estilos personales6. Contenedor del diseño7. Bloques en 12 columnas8. Bloques en las columnas de la cuadrícula9. Prohibir los bloques flotantes adyacentes10. Bloques con desplazamiento11. Bloques centrados12. Código completo de la páginaE. Cuadrícula fija notjustagrid 1. El framework2. Cuadrícula3. Página de ejemplo4. Archivos CSS5. Enlaces a las hojas de estilo6. Estilos personales7. Contenedor del diseño8. Sistema de clases9. Bloque para todo el ancho10. Tres bloques en un tercio de la cuadrícula11. Dos bloques en 3/5 y 2/5 de la cuadrícula12. Un solo bloque en 2/3 de la cuadrícula13. Código completo de la páginaF. Cuadrícula fluida Gridiculous 1. Cuadrículas fluidas2. Cuadrícula Gridiculous3. Página de ejemplo4. Descargar la cuadrícula5. Instalar la cuadrícula6. Estilos personales7. Contenedor8. Filas9. Tres bloques con la misma anchura10. Dos bloques con anchos distintos11. Bloque desplazado12. Visualización de la cuadrícula fluida
Capítulo 6: Media Queries
A. ObjetivoB. OrígenesC. Uso de media queriesD. Sintaxis de las media queriesE. Características a pruebaF. Dónde ubicar las media queriesG. Tamaño de las pantallas de los móvilesH. El concepto viewportI. Un ejemplo muy sencillo 1. Esquema2. Código HTML y CSSJ. Cuadrícula responsive 1. Cuadrícula2. Descargar e instalar la cuadrícula3. Crear una página sencilla de 12 columnas4. Vínculo a los estilos y a los scripts5. Estructura del diseño6. Reglas CSSK. Ejemplos de sitios con media queries
Capítulo 7: El diseño responsive
A. El diseño responsiveB. Cuadrículas responsiveC. Cuadrícula responsive Simple Grid 1. Utilizar Simple Grid2. Descargar e instalar Simple Grid3. Filas4. Esquema5. Primera fila6. Segunda fila7. Tercera fila8. Utilizar la cuadrícula fluida y responsive9. Código completoD. Cuadrícula responsive Columnal 1. Utilizar Columnal2. Descargar e instalar Columnal3. Esquema4. Contenedor y filas5. Primera fila6. Segunda fila7. La tercera fila y el desplazamiento8. La cuarta fila y bloques anidados9. Utilizar la cuadrícula fluida y responsive10. Código completo del diseño11. Imágenes responsives12. Código completo para el diseño con una imagen responsiveE. Uso de imágenesF. Imágenes fluidas 1. Objetivo2. Diseño fijo3. Diseño fluido4. Ancho fluido de otros elementos5. Anchos de imágenes fluidas6. Abrir y cambiar el tamaño de la página7. Código completo de la páginaG. Script Response.js 1. Utilizar JavaScript2. Descargar el JavaScript3. Enlaces a los JavaScript4. Preparar imágenes5. Código de la página6. Funcionamiento del script7. Optimizar las leyendas8. Código completo de la páginaH. Script picturefill.js 1. Utilizar JavaScript2. Descargar el JavaScript3. Enlaces a los JavaScript4. Preparar imágenes5. Código de la página6. Visualización de la imagen responsive7. Código para las pantallas de alta definición (Retina)8. Código completo de la páginaI. Script responsive-images.js 1. Utilizar JavaScript2. Descarga la demo3. Código de la página4. Utilizar la páginaJ. Propuestas para el futuro 1. Grupos de trabajo: RICG y W3C2. Grupos de trabajo: Apple y W3CK. Tipografía responsive 1. Objetivo2. Unidades utilizadas3. Unidad em y cascada4. Unidad rem y la cascada5. Tipografía responsive y unidad rem6. Tipografía responsive y fuentes7. Unidades relacionadas con el viewportL. Tablas responsives 1. Objetivo2. Zurb3. La solución de Geoff Yuen4. La solución de