Unidad 06 · Semana 6

Implementar + medir

Llevar el sistema a código semántico, accesible y rápido, y definir señales que permitan evaluar su desempeño después del lanzamiento.

Idea central — La publicación inicia la observación del sistema en condiciones de uso real.

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

  1. Implementar a partir de la ficha del componente y anotar lo que la especificación no decía
  2. Definir landmarks
  3. Ordenar headings
  4. Probar sin CSS
  5. Revisar título, descripción y jerarquía de encabezados como señales de indexación
Salida: Página navegable sin estilos y ficha de handoff corregida

Auditoría de accesibilidad

Detectar barreras de acceso · 45 min

  1. Recorrer con teclado
  2. Probar zoom 200%
  3. Ejecutar auditoría automática
Salida: Registro de incidencias

Definición de métricas y KPIs

Vincular cada métrica a una decisión · 45 min

  1. Escribir pregunta
  2. Elegir señal
  3. Definir línea de base y meta
  4. Nombrar la métrica norte y una contra-métrica
  5. Definir decisión asociada
Salida: Diccionario de eventos y KPIs

Aplicación

Proyecto Integrador

Esta unidad se corresponde con Producto publicado, la entrega de la semana 6 del Proyecto Integrador.

Ver entregable S6