Para los maquetadores web y quienes desarrollan layouts de front-end, escribir código consiste en crear páginas semánticas y responsive que funcionen en distintos navegadores sin perder de vista las pautas de accesibilidad.
Layouts dinámicos con CSS Flexbox y Grid
Los márgenes fijos y las posiciones absolutas rompen las interfaces cuando cambia el tamaño del viewport. Enseñamos a combinar Flexbox para los elementos lineales y CSS Grid para las plantillas bidimensionales, y así construir pantallas robustas y fluidas.
Los límites de la safe area en móvil
Para evitar que los botones interactivos queden bajo el notch de la pantalla o la barra de inicio del sistema, se aprende a definir los márgenes de la página con safe-area-insets, de modo que la navegación quede despejada en cualquier dispositivo móvil.
Estándares de accesibilidad (a11y) y navegación con teclado
Para dar soporte a quienes usan lectores de pantalla, los layouts deben incluir texto alternativo descriptivo. También enseñamos a escribir el HTML en un orden lógico para que se pueda recorrer cada enlace interactivo usando solo la tecla Tab.
Un escenario de ejemplo
Se abre una ventana modal, pero el foco del teclado sigue atrapado en la pantalla de fondo. Hay que reorganizar los elementos HTML y aplicar atributos de gestión del foco para que la navegación con teclado funcione correctamente.
Lista de verificación del onboarding de maquetación web
- ¿Los estilos se prueban en varios viewports y alturas de pantalla?
- ¿Se exige texto alternativo descriptivo en los elementos de imagen?
- ¿Se puede completar la interfaz navegando solo con el teclado?
Prueba situaciones reales como misiones de onboarding
Juega en First Run las misiones del Maquetador web y las de desarrollo, planificación, diseño y PMO. Jugar el onboarding