Auditoría final, revisión por pares y entrega · Lenguaje de marcas

Hoy · Hoja de ruta

1. Aprende: Qué se revisa en el CSS de otra persona, que no es si te gustan sus colores.
2. Haz: Pasa la auditoría a tu sitio y revisa el de un compañero.
3. Entrega: El sitio, la tabla forense, la matriz de revisión y la defensa.

Antes de empezar · 5 minutos, sin apuntes

Si una regla no aparece en DevTools, ¿qué causas revisarías? ¿Y si aparece tachada?
Explica la diferencia entre corregir la causa y añadir una excepción.
Diagnostica antes de tocar: un catálogo desborda solo a 360 px.

Dónde estábamos y dónde estamos

Doce semanas

UD1 · estructura, semántica, contenido, formularios, accesibilidad
UD2 · presentación, Flexbox, Grid, responsive, componentes
= un sitio web estático completo

Tarea 18 · La auditoría

Organización

Existe una hoja externa y ninguna página tiene estilos en línea.
Los nombres de clase describen el papel del elemento, no su aspecto.
El archivo está ordenado y no hay reglas duplicadas.
Los valores repetidos son variables con nombres que dicen su papel.

Cascada

No hay !important, salvo en prefers-reduced-motion.
Los selectores no son más específicos de lo necesario.
No das estilo con id.
Sabes explicar, de cualquier elemento, qué regla está ganando.

Caja y tipografía

box-sizing: border-box está declarado globalmente.
padding y margin se usan con una finalidad clara, y la separación entre elementos es gap.
No hay anchuras rígidas que rompan en pantallas pequeñas.
Hay jerarquía visual, el texto es legible y el line-height es razonable.
Los tamaños no dependen exclusivamente de píxeles.

Layout y responsive

Flexbox donde el problema es de una dimensión, Grid donde hay filas y columnas.
No se maqueta con position: absolute ni con tablas.
El sitio funciona a 320, 375, 768, 1024 y 1440 px.
No hay scroll horizontal en ninguna anchura.
Cada breakpoint responde a un problema del contenido que puedes nombrar.
Las imágenes se adaptan y ninguna está deformada.

Accesibilidad y calidad

El foco es visible en todo lo interactivo.
Los enlaces se distinguen sin depender solo del color.
El contraste de texto llega a 4.5:1.
El sitio se puede recorrer entero con el teclado.
Se respeta prefers-reduced-motion.
El CSS pasa el validador sin errores relevantes.
El HTML sigue validando: no lo has roto para conseguir un efecto.

Revisión por pares

Un compañero revisará tu proyecto. No evaluará si le gustan tus colores: eso no es revisable. Revisará lo técnico.

Aspecto	Problema encontrado	Propuesta
Responsive	El menú desborda a 360 px	Permitir `flex-wrap` o cambiar la disposición
Grid	Columnas fijas de 300 px	Usar `minmax()` con `auto-fit`
Imágenes	Se deforman en las tarjetas	Revisar dimensiones y añadir `object-fit`
Foco	No es visible en los botones	Definir un `:focus-visible`
CSS	Un color repetido catorce veces	Convertirlo en custom property
Cascada	Un `!important` en la cabecera	Bajar la especificidad del selector que gana

Después recibirás la revisión y decidirás qué cambias. No todas las sugerencias tienen por qué ser correctas: aprender a evaluar una revisión también forma parte del ejercicio, y rechazar una observación justificándola bien puntúa igual que aceptarla.

La regla de la UD1 sigue vigente: se revisa el código, no a la persona.

Producto final

El mismo sitio de la UD1, convertido en una web completa. Debe incluir:

Diseño coherente entre las cuatro páginas: tipografía, paleta y sistema de espaciado.
Variables CSS para las decisiones que se repiten.
Layout con Flexbox donde corresponda y con Grid donde corresponda.
Navegación adaptable.
Catálogo responsive.
Formulario con estilo propio.
Imágenes adaptables.
Estados :hover y :focus-visible.
Al menos una transición con una finalidad.
Media queries solo donde hagan falta.

Se entrega junto a la tabla forense de la sesión 17, la matriz de revisión que hayas hecho, y media página con las tres decisiones de layout de las que estés más seguro.

Si acabas antes · copia un diseño

Recibirás la captura de una interfaz pequeña, sin su código, y tendrás que reproducirla con HTML y CSS.

El objetivo no es la coincidencia píxel a píxel. Es identificar la estructura: qué está agrupado con qué, qué alineado con qué, qué espacios se repiten, qué es Grid y qué es Flexbox, y cuál es la jerarquía visual. Copiar un diseño es sobre todo un ejercicio de lectura.

Presentación

Tres minutos y cuatro preguntas:

Enséñanos una parte de tu sitio que se adapte sin media query, y explica por qué no la necesita.
¿Dónde has puesto un breakpoint y qué te dijo el contenido que lo pusieras ahí?
Enséñanos un sitio donde dudaste entre Flexbox y Grid, y por qué elegiste lo que elegiste.
¿Has tenido que tocar el HTML de la UD1? Si sí, ¿dónde y por qué?

La defensa incluye una prueba en vivo: se te pedirá un cambio pequeño sobre tu propio CSS. Convertir un Grid de tres columnas en dos, cambiar el eje de un Flexbox, hacer que el menú funcione a 360 px, o quitar un !important sin romper nada. Si no puedes hacerlo, no controlas el código que has entregado.

Evaluación

Criterio	Puntos
Responsive: adaptación fluida y breakpoints justificados	2
Layout con Grid	1,5
Layout con Flexbox	1,5
Sistema visual: variables, tipografía y espaciado	1,5
Calidad de la cascada: selectores y ausencia de `!important`	1,5
Accesibilidad visual: foco, contraste y movimiento	1
Imágenes adaptables	1

No puntúa que el sitio sea vistoso. Puntúa que aguante: que siga funcionando cuando cambia el contenido, cuando cambia la pantalla y cuando lo usa alguien que no ve la tuya.

Checkpoint · entrega

Las cuatro páginas pasan la auditoría completa.
El HTML sigue validando y no lo has retorcido por motivos visuales.
No has usado ningún framework CSS.
La tabla forense está entregada con la columna de tipo de problema.
Has revisado el proyecto de un compañero y decidido qué aceptas de la suya.
Puedes hacer un cambio pequeño sobre tu propio CSS delante de alguien.

Microprueba semanal 6 · 10 minutos

Individual, sin IA y sin apuntes. Trabajas sobre una interfaz desconocida.

Identifica un problema de selector, uno de cascada y uno de layout.
Corrige la causa con el CSS mínimo y justifica cada decisión.
Realiza un cambio responsive nuevo sin copiar tu proyecto.