Módulo 2 - Diseño Digital IV

I & II. 18 y 21 Oct

1. Markup semantico & BEM

• Como utilizar VSCode & Emmet para crear markup a partir de un diseño y BEM de marcado de clases de componentes

III & IV. 25 y 28 Oct

2. Concepto de modelo de cajas

• Explicar como funciona el modelo de cajas y ejemplificar como utilizar las 4 capas

V. 4 Nov

3. Flexbox

• Explicar para que sirve y como utilizarlo para crear un diseño fluido (responsivo) flexible al viewport

VI & VII. 8 y 11 Nov

4. Flexbox para centrar elementos

5. Flexbox para agrupar componentes

• Explicar como utilizar flexbox para centrar elementos y como utilizarlo para agrupar elementos que se vean bien en cualquier dispositivo

VIII. 18 Nov

6. Imágenes

• Explicar como cargar una imagen, como optimizarla, los atributos que debe llevar para que sea accesible y ejemplo de como incluirla en el HTML & en el CSS y por qué utilizar una u otra.

IX & X. 22 y 25 Nov

7. Stacking context z-index

• Explicar como crear stacking context para posicionar algunos elementos encima de otros

XI & XII. 29 Nov y 3 Dic

8. Posición de elementos (relative, absolute, fixed & sticky) 9. Grid

• Explicar la posición de elementos y ejemplo de como aplicarlo para crear un elemento fijo y para posicionar un elemento dentro de otro.

• Explicar qué es grid, que resuelve y como utilizarlo para crear el layout de una página completa y para centrar elementos.

XIII. 6 Dic

10. Keyframes

• Explicar que son los keyframes y como utilizarlos para mejorar la experiencia de usuario por medio de animaciones

XIV. 9 Dic

Presentación final del proyecto

Modulo 2 - Diseño Digital IV

By Michel Ventura

Modulo 2 - Diseño Digital IV

Métodos de investigación para el análisis de la experiencia de los clientes

  • 32