Video demo de la aplicación

Presentación general del proyecto, roles y flujo principal.

Responsive · 10 videos

Cada vídeo incluye cartel introductorio. En responsive, el cartel debe ser animación realizada por el alumno.

R1 · Navbar móvil no funcional

Cartel intro (animado): R1 Navbar móvil.

R2 · Formularios comprimidos en móvil

Cartel intro (animado): R2 Formularios comprimidos.

R3 · Gutter y composición degradada de formulario

Cartel intro (animado): R3 Gutter degradado.

R4 · Cabecera con reflow roto

Cartel intro (animado): R4 Header con overflow.

R5 · Bloques clave en fila y texto truncado

Cartel intro (animado): R5 Bloques en fila.

R6 · Tarjetas informativas con ancho fijo

Cartel intro (animado): R6 Tarjetas ancho fijo.

R7 · Gráfico con ancho forzado

Cartel intro (animado): R7 Chart recortado.

R8 · Tabla sin adaptación responsive

Cartel intro (animado): R8 Tabla sin wrapper.

R9 · Objetivos táctiles demasiado pequeños

Cartel intro (animado): R9 Objetivos táctiles.

R10 · Footer no apila en móvil

Cartel intro (animado): R10 Footer no apila.

Usabilidad · 9 videos

Comparativa de mala práctica (`skin-base`) y solución (`skin-good`).

U1 · Reconocimiento en navegación

Cartel intro: U1 Reconocimiento de opciones.

U2 · Significado de opciones

Cartel intro: U2 Significado de opciones.

U3 · Orientación de la interfaz

Cartel intro: U3 Orientación en interfaz.

U4 · Claridad de acción principal

Cartel intro: U4 Claridad de acción.

U5 · Pistas de entrada

Cartel intro: U5 Pistas de entrada.

U6 · Precisión de captura

Cartel intro: U6 Precisión de captura.

U7 · Prevención de errores

Cartel intro: U7 Prevención de errores.

U8 · Eficiencia de uso

Cartel intro: U8 Eficiencia de usuario.

U9 · Densidad y escaneabilidad

Cartel intro: U9 Integridad del flujo.

Accesibilidad · 10 videos

Comparativa de mala práctica (`skin-access`) y solución (`skin-good`) con referencia WCAG.

A1 · Contraste insuficiente

Cartel intro: A1 WCAG 1.4.3.

A2 · Foco no visible

Cartel intro: A2 WCAG 2.4.7.

A3 · Salto a contenido roto

Cartel intro: A3 WCAG 2.4.1.

A4 · Relación label-campo rota

Cartel intro: A4 WCAG 1.3.1.

A5 · Nombre accesible ausente

Cartel intro: A5 WCAG 4.1.2.

A6 · Operabilidad por teclado bloqueada

Cartel intro: A6 WCAG 2.1.1.

A7 · Alternativa textual degradada

Cartel intro: A7 WCAG 1.1.1.

A8 · Idioma de página incorrecto

Cartel intro: A8 WCAG 3.1.1.

A9 · Estructura de encabezados oculta

Cartel intro: A9 WCAG 1.3.1.

A10 · Coherencia visual de formularios accesibles

Cartel intro: A10 cierre accesibilidad.