[AUU-030] Responsive Design

Este curso enseña cómo configurar el editor, utilizar Chrome DevTools y trabajar con conceptos clave como Device Pixel Ratio y Viewport. Cubre media queries, puntos de ruptura, Flexbox, patrones comunes en RWD, técnicas adaptativas para tablas e imágenes, y la implementación de RWD con Bootstrap.

Duración:                     12 horas

Perfil:                            Avanzado/Experto

Dirigido a

Este curso está dirigido a diseñadores web, programadores y analistas de aplicaciones web que deseen aprender a crear sitios web responsivos que se adapten a diferentes dispositivos y tamaños de pantalla.

Requisitos previos 

El alumno necesitará tener conocimientos de tecnologías HTML5 y CSS3 previos para aprovechar el contenido del curso.

Objetivos

• Configurar un entorno de desarrollo adecuado para crear sitios responsivos.
• Aplicar el uso de media queries y puntos de ruptura para optimizar el diseño en diversos dispositivos.
• Uso de Flexbox para crear layouts flexibles y adaptables.
• Técnicas de diseño responsivo para tablas e imágenes.
• Utilizar Bootstrap para agilizar la creación de sitios web responsivos.

Contenido

1. Configuración del Entorno de Desarrollo:
   1. Preparación del editor y herramientas necesarias para el diseño responsivo
2. Uso de Chrome DevTools:
   1. Herramientas esenciales para probar y depurar sitios responsivos
3. Device Pixel Ratio y Viewport:
   1. Comprensión de cómo afectan la resolución y el tamaño de la pantalla en el diseño web
4. Optimización de Contenido:
   1. Estrategias para evitar que el contenido sea demasiado grande o pequeño en distintos dispositivos
5. Media Queries y Puntos de Ruptura:
   1. Implementación de media queries para crear diseños adaptables a diferentes tamaños de pantalla
6. Flexbox:
   1. Uso de Flexbox para crear layouts flexibles que se ajustan dinámicamente
7. Flexbox en Práctica: Patrones Comunes en RWD
   1. Aplicación de Flexbox a patrones de diseño adaptables en responsive web design (RWD)
8. Técnicas Adaptativas para Tablas:
   1. Métodos para hacer que las tablas sean responsivas en dispositivos móviles
9. Técnicas Adaptativas para Imágenes:
   1. Estrategias para optimizar imágenes y hacerlas adaptables a diferentes resoluciones y tamaños de pantalla
10. Responsive Web Design con Bootstrap:
    1. Implementación de un diseño web responsivo utilizando el framework Bootstrap

Documentación Recomendada

Responsive Web Design with HTML5 and CSS- Fourth Edition
Ben Frain
Sep 2022 | 498 pages

https://www.packtpub.com/en-us/product/responsive-web-design-with-html5-and-css-9781803231723