Hoy · Hoja de ruta
- 1. Aprende: Nada nuevo. Hoy se comprueba si sabes montar y arreglar una interfaz.
- 2. Haz: Monta una interfaz de un dominio desconocido y repara otra que está rota.
- 3. Comprueba: Localizas cada fallo antes de tocar el código.
Primera parte · una interfaz nueva
Recibirás un fichero JSON de un dominio que no has visto —cartelera de cine, ofertas de empleo, rutas de senderismo— y una lista de requisitos. En veinticinco minutos:
- Cargar los datos con fetch y sus tres estados
- Pintar la lista desde los datos
- Un buscador y dos filtros combinables
- Estado único y render idempotente
- Resultado anunciado y manejable con teclado
Sin copiar y pegar tu proyecto: puedes mirar tus apuntes, pero el código se escribe hoy.
Segunda parte · el diagnóstico
Los quince minutos restantes, sobre una interfaz que ya viene con cinco fallos, uno de cada familia. No hace falta arreglarlos todos hoy: lo que se evalúa es el diagnóstico, y los que no dé tiempo se terminan como trabajo personal.
| Familia | Síntoma típico |
|---|---|
| Selección | Todo es null: el código se ejecuta antes de tiempo |
| Evento | Los elementos creados después no responden |
| Tipo | Un filtro numérico no filtra: el valor era texto |
| Asincronía | La lista sale vacía: se leyó antes de que llegara |
| Render | Cada filtrado duplica el contenido |
Para cada uno: escribe el síntoma, la hipótesis, cómo la compruebas y la corrección.
La pregunta que ordena el diagnóstico
En una interfaz, empieza siempre por separar el problema en dos: ¿llega el evento? Un mensaje en la primera línea del manejador lo responde.
Si no llega, el problema está en la selección, en el registro de la escucha o en el momento en que se ejecutó tu código. Si llega, el problema está en tu lógica, y ahí ya sabes trabajar desde la UD3.
Checkpoint · fin de la sesión 17
- Has montado una interfaz completa desde datos ajenos.
- Separas fallos de evento de fallos de lógica.
- Usas Elements, Sources y Network según lo que buscas.
- Escribes la hipótesis antes de tocar nada.