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.

Características

Encuadernación rústica - 17 x 21 cm
ISBN: 978-2-409-00905-1
EAN: 9782409009051
Ref. ENI: OWT2RWD5HTM

Descargas

Descargar los ejemplos del libro (5,88 Mo)

Introducción

El diseño web actual
Diseño web responsive
Planteamientos de diseño
Objetivos del libro
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
Descargar ejemplos

Soluciones para la compatibilidad

Disparidad entre navegadores
Mejorar la compatibilidad
Visualización inicial de los navegadores
Normalize.css
1. 1. El proyecto
2. 2. Descargar Normalize.css
3. 3. Instalar Normalize.css
El HTML5 y html5shiv.js
1. 1. Objetivo
2. 2. Archivo de ejemplo
3. 3. Librería html5shiv.js
Media queries y respond.js
1. 1. Objetivo
2. 2. Archivo de ejemplo
3. 3. La librería respond.js
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
Las reglas @supports
1. 1. Objetivo
2. 2. Utilizar las reglas @supports
3. 3. Operadores

El diseño clásico

Diseñadores y maquetadores
Modelos de cajas
Los márgenes de los elementos
Visualización de los elementos
Visualización en flujo normal
Posicionamiento absoluto
Posicionamiento fijo
Posicionamiento relativo
Utilizar el diseño en posición relativa y absoluta
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

Objetivo
La propiedad display
Diseño simple con una tabla
Ancho en pantalla de la tabla
Elementos anónimos
Otros elementos para las tablas
1. 1. Párrafos en las celdas
2. 2. Listas en tablas
Diseño de las filas
Establecer el ancho de las celdas
1. 1. Anchos fijos
2. 2. Anchos en porcentaje
Diseño con una tabla más estructurada
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
Alineación vertical
Conclusión

Media Queries

Objetivo
Orígenes
Uso de media queries
Sintaxis de las media queries
Características a prueba
Dónde ubicar las media queries
Tamaño de las pantallas de los móviles
El concepto viewport
Un ejemplo muy sencillo
1. 1. Esquema
2. 2. Código HTML y CSS
Las propiedades CSS de las imágenes responsive
1. 1. Las imágenes en primer plano
2. 2. Las imágenes de fondo
Adaptar el tamaño al viewport
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
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
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>
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
Ejemplos de sitios con media queries

El diseño en varias columnas en CSS3

El módulo Multi-column Layout del W3C
La compatibilidad de los navegadores
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
El espacio entre las columnas
1. 1. El espacio entre columnas
2. 2. La línea de separación
La justificación del texto
Los saltos de columna
Los elementos transversales
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
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

El módulo Flexible Box Layout del W3C
La compatibilidad de los navegadores
La elaboración del diseño flexible
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
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
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
El diseño flexible y el Responsive Web Design

El diseño de cuadrícula en CSS3

El módulo Grid Layout del W3C
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
La terminología de la cuadrícula
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
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
La gestión de los espacios de la cuadrícula
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
La justificación y la alineación en el contenedor
1. 1. La justificación horizontal
2. 2. La alineación vertical
La colocación automática

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

Los objetivos
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
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
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

Utilizar los frameworks de CSS
Frameworks de CSS
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
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
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

Los módulos del W3C
Recorrido
Las plantillas de página
Distribución en los documentos estructurados
Regiones

31/08/2022Versión impresa

No llegó el producto

Anónimo

Respuesta de ENI,

18/10/2022

Apreciado Carlos, tal y como le informamos el pasado 28.07 no pudimos hacer el envío de su pedido porque Correos, en esas fechas, nos indicó que la frontera con Ecuador estaba cerrada. Motivo por el cual, lamentablemente no pudimos hacer el envío de su pedido y le reembolsamos el pago del mismo. Saludos,

Christophe AUBRY

Responsable pedagógico en un centro de formación y formador en tecnologías web y artes gráficas durante más de quince años, Christophe Aubry es, en la actualidad, director de la empresa netPlume, especializada en redacción pedagógica y creación de sitios web. Autor de numerosos libros y vídeos publicados por Ediciones ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), se mantiene al día de las novedades en el ámbito del diseño web gracias a una constante labor de vigilancia tecnológica. También es el creador del canal de YouTube LaTeX et la plume (en francés).

Más información