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

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

  • Acceso ilimitado 24/7
  • Todos los libros online de ENI
  • Más de 5 novedades todos los meses
  • Novedades disponibles el mismo día de su publicación
  • Acceso 100% online
  • Disponible
  • Expedido en 24 horas
  • Envío gratis a partir de 25 € de compra
  • Versión online gratis por un año
  • Acceso gratuito a todos nuestros libros online durante 1 hora por toda compra
  • Consulta inmediata
  • Versión HTML online
  • Acceso ilimitado 24/7

Presentación

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.

Índice

  • Capítulo 1: Introducción
    • A. El diseño web actual
    • B. Diseño web responsive
    • C. Planteamientos de diseño
    • D. Objetivos del libro
    • E. Herramientas del maquetador
      • 1. Objetivos
      • 2. Mozilla Firefox
      • 3. Google Chrome
      • 4. Apple Safari
      • 5. Microsoft Internet Explorer y Edge
    • F. Descargar ejemplos
  • Capítulo 2: Soluciones para la compatibilidad
    • A. Disparidad entre navegadores
    • B. Mejorar la compatibilidad
    • C. Visualización inicial de los navegadores
    • D. Normalize.css
      • 1. El proyecto
      • 2. Descargar Normalize.css
      • 3. Instalar Normalize.css
    • E. El HTML5 y html5shiv.js
      • 1. Objetivo
      • 2. Archivo de ejemplo
      • 3. Librería html5shiv.js
    • F. Media queries y respond.js
      • 1. Objetivo
      • 2. Archivo de ejemplo
      • 3. La librería respond.js
    • G. Las alternativas y Modernizr.js
      • 1. Objetivo
      • 2. Descargar Modernizr
      • 3. Crear una página de ejemplo
      • 4. Instalar y enlazar el script Modernizr
      • 5. La activación de Modernizr
      • 6. Utilizar las clases de Modernizr
    • H. Las reglas @supports
      • 1. Objetivo
      • 2. Utilizar las reglas @supports
      • 3. Operadores
  • Capítulo 3: El diseño clásico
    • A. Diseñadores y maquetadores
    • B. Modelos de cajas
    • C. Los márgenes de los elementos
    • D. Visualización de los elementos
    • E. Visualización en flujo normal
    • F. Posicionamiento absoluto
    • G. Posicionamiento fijo
    • H. Posicionamiento relativo
    • I. Utilizar el diseño en posición relativa y absoluta
    • J. Visualización de cajas flotantes
      • 1. Posicionamiento flotante
      • 2. Colocar las cajas al lado
      • 3. Prohibir la flotación
      • 4. Ejemplo con cuatro cajas
      • 5. Diseño simplista
      • 6. Conclusión sobre diseñar con elementos flotantes
  • Capítulo 4: Diseñar con tablas
    • A. Objetivo
    • B. La propiedad display
    • C. Diseño simple con una tabla
    • D. Ancho en pantalla de la tabla
    • E. Elementos anónimos
    • F. Otros elementos para las tablas
      • 1. Párrafos en las celdas
      • 2. Listas en tablas
    • G. Diseño de las filas
    • H. Establecer el ancho de las celdas
      • 1. Anchos fijos
      • 2. Anchos en porcentaje
    • I. Diseño con una tabla más estructurada
    • J. Otras propiedades de diseño
      • 1. Propiedad table-layout
      • 2. Propiedad border-collapse
      • 3. Propiedad border-spacing
      • 4. Propiedad empty-cells
      • 5. Propiedad caption-side
    • K. Alineación vertical
    • L. Conclusión
  • Capítulo 5: Media Queries
    • A. Objetivo
    • B. Orígenes
    • C. Uso de media queries
    • D. Sintaxis de las media queries
    • E. Características a prueba
    • F. Dónde ubicar las media queries
    • G. Tamaño de las pantallas de los móviles
    • H. El concepto viewport
    • I. Un ejemplo muy sencillo
      • 1. Esquema
      • 2. Código HTML y CSS
    • J. Las propiedades CSS de las imágenes responsive
      • 1. Las imágenes en primer plano
      • 2. Las imágenes de fondo
    • K. Adaptar el tamaño al viewport
    • L. Un diseño de página fluido
      • 1. El objetivo
      • 2. El diseño de página fijo
      • 3. Un diseño de página fluido
      • 4. El ancho fluido del resto de los elementos
      • 5. Los anchos de las imágenes fluidas
      • 6. Mostrar y cambiar el tamaño de la página
      • 7. El código completo de la página
    • M. El script Response.js
      • 1. Utilizar el JavaScript
      • 2. Descargar los JavaScript
      • 3. Las vinculaciones a los JavaScript
      • 4. Preparar las imágenes
      • 5. El código de la página
      • 6. El funcionamiento del script
      • 7. Optimizar los textos alternativos
      • 8. El código completo de la página
    • N. Las propuestas para el futuro
      • 1. Los nuevos atributos para <img>
      • 2. El atributo srcset para tamaños de imagen fijos
      • 3. El atributo srcset para anchos disponibles
      • 4. El atributo size
      • 5. Los nuevos elementos <picture> y <source>
    • O. La tipografía responsive
      • 1. El objetivo
      • 2. Las unidades utilizadas
      • 3. La unidad em y la cascada
      • 4. La unidad rem y la cascada
      • 5. La tipografía responsive y la unidad rem
      • 6. La tipografía responsive y las fuentes
      • 7. Las unidades vinculadas al viewport
    • P. Ejemplos de sitios con media queries
  • Capítulo 6: El diseño en varias columnas en CSS3
    • A. El módulo Multi-column Layout del W3C
    • B. La compatibilidad de los navegadores
    • C. El diseño en varias columnas
      • 1. El número de columnas
      • 2. La anchura de las columnas
      • 3. La sintaxis corta
    • D. El espacio entre las columnas
      • 1. El espacio entre columnas
      • 2. La línea de separación
    • E. La justificación del texto
    • F. Los saltos de columna
    • G. Los elementos transversales
    • H. La gestión del texto en las columnas
      • 1. El relleno de las columnas
      • 2. El contenido demasiado extenso
      • 3. El desbordamiento del contenido
    • I. El uso de varias columnas y el Responsive Web Design
      • 1. Las media queries
      • 2. Un diseño de página de varias columnas responsive
      • 3. Un menú responsive en varias columnas
  • Capítulo 7: El diseño flexible en CSS3
    • A. El módulo Flexible Box Layout del W3C
    • B. La compatibilidad de los navegadores
    • C. La elaboración del diseño flexible
    • D. El contenedor flexible
      • 1. La definición del contexto flexible
      • 2. La distribución de los elementos flexibles
      • 3. El cambio de fila
      • 4. La sintaxis corta para la distribución y el cambio de fila
      • 5. La justificación horizontal en las filas
      • 6. La justificación vertical en las columnas
      • 7. La alineación vertical en las filas
      • 8. La alineación horizontal en las columnas
      • 9. El cambio de fila y la alineación
    • E. Los elementos flexibles
      • 1. El contexto de los elementos flexibles
      • 2. Cambiar el orden en el que aparecen los elementos
      • 3. La alineación de un elemento
      • 4. La ampliación de los elementos
      • 5. La reducción de los elementos
      • 6. Ancho o alto indicativos
      • 7. La sintaxis corta para cambiar el tamaño
      • 8. Establecer el tamaño fijo de los elementos con flex
      • 9. Establecer el tamaño flexible de los elementos con flex
    • F. Ejemplos de diseños de página
      • 1. Un diseño de página muy simple
      • 2. Un diseño de página más elaborado
      • 3. Colocar un elemento siempre en la parte inferior de su contenedor
    • G. El diseño flexible y el Responsive Web Design
  • Capítulo 8: El diseño de cuadrícula en CSS3
    • A. El módulo Grid Layout del W3C
    • B. La compatibilidad de los navegadores
      • 1. Los navegadores
      • 2. Forzar el reconocimiento
      • 3. Google Chrome
      • 4. Mozilla Firefox
      • 5. Apple Safari
    • C. La terminología de la cuadrícula
    • D. Crear una cuadrícula normal
      • 1. Los anchos fijos de las columnas
      • 2. Los anchos disponibles de las columnas
      • 3. Los anchos relativos de las columnas
      • 4. Los anchos automáticos de las columnas
      • 5. Las repeticiones
      • 6. Las alturas de las filas
    • E. Poner nombre a las zonas de la cuadrícula
      • 1. Poner nombre a todas las celdas
      • 2. El caso de las celdas vacías
      • 3. Poner nombre a las zonas de celdas horizontalmente
      • 4. Poner nombre a las zonas de celdas verticalmente
      • 5. Poner nombre a las líneas en una cuadrícula simple
      • 6. Poner nombre a las líneas en una cuadrícula elaborada
    • F. La gestión de los espacios de la cuadrícula
    • G. La justificación y la alineación
      • 1. La justificación en las columnas
      • 2. La alineación en las filas
      • 3. La justificación y la alineación en las celdas
    • H. La justificación y la alineación en el contenedor
      • 1. La justificación horizontal
      • 2. La alineación vertical
    • I. La colocación automática
  • Capítulo 9: Las cuadrículas del diseño de página
    • A. Los objetivos
    • B. La cuadrícula Gridlex
      • 1. Implementar la cuadrícula
      • 2. Los puntos de ruptura
      • 3. Colocar tres bloques en la cuadrícula
      • 4. Crear una cuadrícula responsive con los bloques
      • 5. Colocar los bloques en la cuadrícula
      • 6. Crear una cuadrícula responsive
      • 7. El posicionamiento automático
      • 8. Los espacios entre columnas
      • 9. Una cuadrícula con tres líneas
      • 10. Otras características de Gridlex
    • C. La cuadrícula Grillade
      • 1. Implementar la cuadrícula
      • 2. Los puntos de ruptura
      • 3. Una cuadrícula simple
      • 4. Insertar un espacio entre columnas
      • 5. Asignar un tamaño a los bloques en la cuadrícula
      • 6. Utilizar una cuadrícula de varias líneas
      • 7. Empujar un bloque
    • D. La cuadrícula Simple Grid
      • 1. Implementar la cuadrícula
      • 2. El punto de ruptura
      • 3. Un diseño con una sola línea
      • 4. Un diseño con varias líneas
      • 5. El diseño en columnas
      • 6. Desplazar los bloques
      • 7. Excepciones para los smartphones
  • Capítulo 10: Frameworks de CSS
    • A. Utilizar los frameworks de CSS
    • B. Frameworks de CSS
    • C. El framework Uikit
      • 1. Utilizar Uikit
      • 2. Descargar el framework
      • 3. Descargar jQuery
      • 4. Instalar el framework
      • 5. Crear una cuadrícula fluida
      • 6. Utilizar la cuadrícula fluida
      • 7. Utilizar la cuadrícula responsive de Uikit
      • 8. Crear una barra de navegación
      • 9. Crear una tabla con formato
    • D. El framework Kube
      • 1. Utilizar Kube
      • 2. Descargar el framework
      • 3. Instalar el framework
      • 4. Crear una cuadrícula flexible
      • 5. Utilizar una cuadrícula flexible
      • 6. Insertar un formulario
    • E. El framework Material Design Lite
      • 1. Utilizar Material Design Lite
      • 2. Las plantillas
      • 3. Las vinculaciones para los componentes
      • 4. Utilizar los componentes
      • 5. Los estilos CSS para la tipografía
      • 6. Personalizar los colores
  • Capítulo 11: El futuro del diseño
    • A. Los módulos del W3C
    • B. Recorrido
    • C. Las plantillas de página
    • D. Distribución en los documentos estructurados
    • E. Regiones
    • índice

Autor

Christophe AUBRYMás información

Responsable pedagógico en un centro de formation y formador en las tecnologías Web y las Artes Gráficas durante más de quince años, Christophe Aubry es hoy directivo de la sociedad netPlume especializada en la redacción pedagógica y creación de sitio en internet. Autor de numerosos libros y vídeos de Ediciones ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), siempre está al corriente de las novedades en relación a la concepción de sitios Web gracias a su atenta mirando del entorno tecnológico.

Características

  • Nivel Iniciado a Medio
  • Número de páginas 357 páginas
  • Publicación junio 2017
    • Encuadernación rústica - 17 x 21 cm
    • ISBN: 978-2-409-00905-1
    • EAN: 9782409009051
    • Ref. ENI: OWT2RWD5HTM
  • Nivel Iniciado a Medio
  • Publicación junio 2017
    • HTML
    • ISBN: 978-2-409-00906-8
    • EAN: 9782409009068
    • Ref. ENI: LNOWT2RWD5HTM

Descargas

Al completar este formulario, acepta recibir información y comunicaciones comerciales sobre nuestros productos y servicios. Puede darse de baja de nuestra newsletter en cualquier momento. Si desea conocer más información acerca de nuestra política de protección de datos, pulse aquí.
  • Descargar los ejemplos del libro (5,88 Mo)