Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  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)

1 opinión

Información adicional

  • 5% de descuento en todos los libros
  • Envío gratis a partir de 25 € de compra
  • Versión online gratis por un año

Características

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

Información adicional

  • 5% de descuento en todos los libros
  • Versión online digital, no descargable
  • Consultable en línea durante 10 años inmediatamente después de la validación del pago.

Características

  • HTML
  • ISBN: 978-2-409-00906-8
  • EAN: 9782409009068
  • Ref. ENI: LNOWT2RWD5HTM
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...
Consultar extractos del libro Extracto del libro
  • Nivel Iniciado a Medio
  • Número de páginas 357 páginas
  • Publicación junio 2017
  • Nivel Iniciado a Medio
  • Publicación junio 2017
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.

Descargas

Introducción
  1. El diseño web actual
  2. Diseño web responsive
  3. Planteamientos de diseño
  4. Objetivos del libro
  5. 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
  6. Descargar ejemplos
Soluciones para la compatibilidad
  1. Disparidad entre navegadores
  2. Mejorar la compatibilidad
  3. Visualización inicial de los navegadores
  4. Normalize.css
    1. 1. El proyecto
    2. 2. Descargar Normalize.css
    3. 3. Instalar Normalize.css
  5. El HTML5 y html5shiv.js
    1. 1. Objetivo
    2. 2. Archivo de ejemplo
    3. 3. Librería html5shiv.js
  6. Media queries y respond.js
    1. 1. Objetivo
    2. 2. Archivo de ejemplo
    3. 3. La librería respond.js
  7. 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
  8. Las reglas @supports
    1. 1. Objetivo
    2. 2. Utilizar las reglas @supports
    3. 3. Operadores
El diseño clásico
  1. Diseñadores y maquetadores
  2. Modelos de cajas
  3. Los márgenes de los elementos
  4. Visualización de los elementos
  5. Visualización en flujo normal
  6. Posicionamiento absoluto
  7. Posicionamiento fijo
  8. Posicionamiento relativo
  9. Utilizar el diseño en posición relativa y absoluta
  10. 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
  1. Objetivo
  2. La propiedad display
  3. Diseño simple con una tabla
  4. Ancho en pantalla de la tabla
  5. Elementos anónimos
  6. Otros elementos para las tablas
    1. 1. Párrafos en las celdas
    2. 2. Listas en tablas
  7. Diseño de las filas
  8. Establecer el ancho de las celdas
    1. 1. Anchos fijos
    2. 2. Anchos en porcentaje
  9. Diseño con una tabla más estructurada
  10. 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
  11. Alineación vertical
  12. Conclusión
Media Queries
  1. Objetivo
  2. Orígenes
  3. Uso de media queries
  4. Sintaxis de las media queries
  5. Características a prueba
  6. Dónde ubicar las media queries
  7. Tamaño de las pantallas de los móviles
  8. El concepto viewport
  9. Un ejemplo muy sencillo
    1. 1. Esquema
    2. 2. Código HTML y CSS
  10. Las propiedades CSS de las imágenes responsive
    1. 1. Las imágenes en primer plano
    2. 2. Las imágenes de fondo
  11. Adaptar el tamaño al viewport
  12. 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
  13. 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
  14. 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>
  15. 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
  16. Ejemplos de sitios con media queries
El diseño en varias columnas en CSS3
  1. El módulo Multi-column Layout del W3C
  2. La compatibilidad de los navegadores
  3. 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
  4. El espacio entre las columnas
    1. 1. El espacio entre columnas
    2. 2. La línea de separación
  5. La justificación del texto
  6. Los saltos de columna
  7. Los elementos transversales
  8. 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
  9. 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
  1. El módulo Flexible Box Layout del W3C
  2. La compatibilidad de los navegadores
  3. La elaboración del diseño flexible
  4. 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
  5. 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
  6. 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
  7. El diseño flexible y el Responsive Web Design
El diseño de cuadrícula en CSS3
  1. El módulo Grid Layout del W3C
  2. 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
  3. La terminología de la cuadrícula
  4. 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
  5. 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
  6. La gestión de los espacios de la cuadrícula
  7. 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
  8. La justificación y la alineación en el contenedor
    1. 1. La justificación horizontal
    2. 2. La alineación vertical
  9. La colocación automática
Las cuadrículas del diseño de página
  1. Los objetivos
  2. 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
  3. 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
  4. 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
  1. Utilizar los frameworks de CSS
  2. Frameworks de CSS
  3. 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
  4. 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
  5. 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
  1. Los módulos del W3C
  2. Recorrido
  3. Las plantillas de página
  4. Distribución en los documentos estructurados
  5. Regiones
1/5 1 opinión

No llegó el producto

Anónimo
Respuesta de ENI,

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,

Autor : Christophe AUBRY

Christophe AUBRY

Responsable pedagógico en un centro de formación. 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 sitios 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 mirada hacia el entorno tecnológico.
Más información

Descubrir todos sus libros

  • HTML5, CSS3 y JavaScript Pack de 2 libros: Aprenda a desarrollar tu interfaz Front End
  • HTML5 y CSS3 Domine los estándares de creación de sitios web (2ª edición)
  • WordPress 5 Un CMS para crear y gestionar blogs y sitios web
  • HTML5 Y CSS3 Revolucione el diseño de sus sitios web (4a edición)
  • Cree su primer sitio web Del diseño a la realización (2ª edición)
  • CSS3 Domine los estándares web con las hojas de estilo
  • InDesign CC

Novedades

Ver más