Proyecto final: un filtro de proyectos accesible para tu portfolio
Una funcionalidad completa en la que aplicas lo del curso: AGENTS.md, rama, encargo con límites, PRIMM, pruebas, revisión de accesibilidad y seguridad, diario de prompts y README con el uso de IA.
El proyecto: un filtro de proyectos por disciplina para tu portfolio, en HTML, CSS y JavaScript sin librerías, que funcione con teclado y lector de pantalla.
Puedes usar la IA como quieras, siempre que puedas explicar cada línea y lo documentes.
Entregas: el código en una rama, AGENTS.md, pruebas con probar(), un diario de prompts y el README con créditos y uso de IA.
Se valora el resultado, pero también el proceso: lo que comprobaste, lo que descartaste y por qué.
- Un filtro de proyectos por disciplina.
- Tu portfolio tiene una rejilla de proyectos y cada tarjeta lleva su disciplina en data-categoria. Quieres unos botones (Todos, Branding, Cartel, Editorial) que muestren solo los proyectos de esa disciplina.
- Requisitos: sin librerías; el botón activo se marca con aria-pressed="true"; las tarjetas se ocultan con hidden; un texto anuncia cuántos proyectos se ven (aria-live); las categorías se comparan normalizadas (mayúsculas y espacios), porque en los datos reales vienen como vienen.
- Si tu portfolio no tiene proyectos todavía, usa el HTML del reto de esta lección como punto de partida.
- Cada fase deja algo que puedes enseñar.
El encargo
Un filtro de proyectos por disciplina.
Tu portfolio tiene una rejilla de proyectos y cada tarjeta lleva su disciplina en data-categoria. Quieres unos botones (Todos, Branding, Cartel, Editorial) que muestren solo los proyectos de esa disciplina.
Requisitos: sin librerías; el botón activo se marca con aria-pressed="true"; las tarjetas se ocultan con hidden; un texto anuncia cuántos proyectos se ven (aria-live); las categorías se comparan normalizadas (mayúsculas y espacios), porque en los datos reales vienen como vienen.
Si tu portfolio no tiene proyectos todavía, usa el HTML del reto de esta lección como punto de partida.
Cinco fases (una por bloque del curso)
Cada fase deja algo que puedes enseñar.
El diario de prompts
Una entrada por cada petición importante.
Guarda en docs/diario-ia.md una entrada por cada petición importante: la herramienta, el prompt tal cual, qué hiciste con la respuesta y qué cambiaste o descartaste. No hace falta apuntar cada pregunta suelta; sí las que dieron forma al código.
El diario sirve para tres cosas: te obliga a pensar qué pides, te deja ver qué prompts funcionan y cuáles no, y demuestra (a un cliente, a tu docente o a ti en seis meses) qué parte del trabajo es tuya.
Cómo se valora
Cuatro aspectos, con el mismo peso.
AspectoConseguidoEn caminoPor empezar FuncionaFiltra bien con datos reales (mayúsculas y espacios), anuncia el resultado y no hay errores en la consolaFiltra, pero falla con algún dato o no anuncia el resultadoNo filtra o hay errores Accesible y seguroBotones nativos con aria-pressed, todo con teclado, foco visible, sin innerHTML con datosFalla una de esas cosasFallan varias ComprobadoPruebas de normalizar() y filtrar() con límites, que avisan si rompes el códigoPruebas solo del caso normalSin pruebas DocumentadoAGENTS.md, diario con al menos tres entradas, README con créditos, uso de IA y licenciaFalta una de las tres piezasFaltan varias
Y una comprobación final, sin IA: abre filtrar() y explica en voz alta qué hace cada línea. Si alguna no puedes explicarla, vuelve a la fase 2 con ella.