Módulo 06 · Temario
Handoff, Accesibilidad, SEO y KPIs
4 h de desarrollo teórico · 3 laboratorios · Semana 6
- Handoff: qué necesita quien implementa y en qué formato
- Especificación de un componente: medidas, tokens, estados y comportamiento
- Criterios de aceptación y definición de terminado
- Entrega de recursos: tipografías, íconos e imágenes
- Versionado del diseño y control de cambios después de la entrega
- HTML semántico, landmarks y jerarquía de encabezados
- Mejora progresiva: qué sigue funcionando sin CSS ni JavaScript
- WCAG 2.2 nivel AA: contraste, foco visible, teclado y zoom al 200 %
- Auditoría automática y verificación manual: qué detecta cada una
- SEO técnico: títulos, descripciones, URLs y contenido indexable
- Core Web Vitals y performance como parte de la experiencia
- De métrica a KPI: línea de base, meta, métrica norte y contra-métrica
Handoff: entregar decisiones, no imágenes
El handoff es el momento en que el diseño pasa a implementación, y falla casi siempre por lo mismo: se entregan pantallas cuando lo que hace falta son decisiones. Una imagen muestra un caso; quien programa necesita la regla. Qué token es ese color, hasta dónde crece ese texto, qué pasa si la lista viene vacía, qué se ve mientras carga, cuál es el orden de foco, qué hace el botón después de ser presionado.
Un handoff completo entrega la especificación de cada componente con sus estados, los tokens con su nombre —no el hexadecimal suelto—, el comportamiento responsive descrito como regla, los recursos listos para usar y criterios de aceptación que permitan decidir si lo implementado está terminado. Y deja dicho quién responde las preguntas que aparezcan después: no es una entrega con fecha de cierre sino un intercambio que continúa durante la implementación.
- Especificación por componente: estados, medidas y tokens con nombre
- Reglas de comportamiento responsive y de contenido variable
- Casos límite: vacío, carga, error, texto largo y dato ausente
- Criterios de aceptación verificables por quien no diseñó la pantalla
- Control de cambios: qué se modificó después de la entrega y por qué
De decisión a comportamiento
La implementación debe conservar la intención del diseño y responder a condiciones reales: teclado, redes lentas, textos largos, zoom y dispositivos diversos.
- Semántica y progressive enhancement
- Accesibilidad automatizada y manual
- Core Web Vitals
- Eventos sin datos personales
SEO es legibilidad para máquinas
Un buscador recorre el sitio como un lector que no ve: necesita encabezados jerarquizados, títulos que describan la página, URLs comprensibles y contenido presente en el HTML. Casi todo lo que hace a una página accesible la hace también indexable, porque ambas cosas dependen de lo mismo: que la estructura esté dicha en el marcado y no sólo dibujada.
- Títulos, descripciones y URLs legibles
- Jerarquía de encabezados como mapa del contenido
- Contenido indexable y datos estructurados
- Performance como factor de visibilidad
De métrica a KPI
Una métrica es cualquier cosa que se pueda contar; un KPI es la que elegimos mirar porque su movimiento cambia una decisión. Un KPI sin línea de base no se puede interpretar y sin meta no se puede evaluar. Y cada uno necesita su contra-métrica: el indicador que empeoraría si optimizáramos el primero a cualquier costo.
- KPI, línea de base y meta
- Métrica norte y contra-métricas
- Métricas de vanidad y por qué tranquilizan
- Medición sin datos personales
Práctica
Prácticas de laboratorio
Estructura semántica del documento
Construir estructura semántica · 45 min
- Implementar a partir de la ficha del componente y anotar lo que la especificación no decía
- Definir landmarks
- Ordenar headings
- Probar sin CSS
- Revisar título, descripción y jerarquía de encabezados como señales de indexación
Auditoría de accesibilidad
Detectar barreras de acceso · 45 min
- Recorrer con teclado
- Probar zoom 200%
- Ejecutar auditoría automática
Definición de métricas y KPIs
Vincular cada métrica a una decisión · 45 min
- Escribir pregunta
- Elegir señal
- Definir línea de base y meta
- Nombrar la métrica norte y una contra-métrica
- Definir decisión asociada
Aplicación
Proyecto Integrador
Esta unidad se corresponde con Producto publicado, la entrega de la semana 6 del Proyecto Integrador.
Ver entregable S6