PASO 2: El Prompt

Uso el prompt generado en DeepSeek, en otra ventana.

*"A continuación, adjunto el Documento de Requerimientos de Software (DRS v1.1) para el desarrollo del 'Diccionario de Inteligencia Artificial'. Por favor, asegúrese de seguir estas directrices clave durante la implementación:*  

1. **Alcance y Calidad**:  
   - Implemente **exclusivamente** lo especificado en el DRS, priorizando usabilidad, accesibilidad (WCAG 2.1 AA) y rendimiento optimizado.  
   - Código modular, en inglés, con comentarios para funciones críticas (búsqueda, caché, carga de videos).  

2. **Tecnologías**:  
   - Frontend: **Vanilla JS** (sin frameworks) + **Tailwind CSS** (vía CDN).  
   - Offline: **Service Worker** para caché completo de `data.json` y assets.  
   - Videos: Use `lite-youtube-embed` (carga bajo demanda en modal).  

3. **Validación**:  
   - Cumpla los **Criterios de Aceptación** (Sección 9 del DRS).  
   - Testee en móviles (3G simulada) y valide contrastes de color.  

4. **Entregables**:  
   - Código fuente estructurado (HTML/JS/CSS separados).  
   - README.md con instrucciones de despliegue.  

*Reporte cualquier ambigüedad en el DRS antes de comenzar.*  

## **Documento de Requerimientos de Software (DRS)**  
**Diccionario de Inteligencia Artificial**  
**Versión 1.1** | **Fecha: [Fecha Actual]**  

---

### **1. Introducción y Propósito**  
#### **1.1 Objetivo**  
Desarrollar un diccionario web público sobre Inteligencia Artificial y áreas relacionadas, dirigido a usuarios de 18 a 65 años con diversos niveles educativos.  

#### **1.2 Alcance**  
- Aplicación web estática (HTML, Vanilla JS) que carga datos desde `data.json`.  
- Funcionalidades clave:  
  - Buscador dinámico con filtros (término, sinónimos, etiquetas).  
  - Vista de tarjetas y modal de detalle con carga eficiente de recursos.  
  - Sistema de historial y caché offline.  

#### **1.3 Fuera del Alcance (v1.1)**  
- Roles de usuario o edición en línea de datos.  
- Exportación de datos o integración con APIs externas (excepto YouTube).  

---

### **2. Requisitos Funcionales (FR)**  
#### **2.1 Gestión de Datos**  
- **FR1**: Carga inicial de datos desde `data.json` con caché en `localStorage` y Service Worker para soporte offline completo.  
- **FR2**: Botón para recargar datos y actualizar caché manualmente.  

#### **2.2 Búsqueda y Filtrado**  
- **FR3**: Buscador con filtrado en tiempo real (prioridad: término > sinónimos > etiquetas).  
- **FR4**: Filtro desplegable por categorías dinámicas.  
- **FR5**: Filtro por nivel (1 a 5, representado con estrellas: ⭐ a ⭐⭐⭐⭐⭐).  

#### **2.3 Interfaz de Usuario**  
- **FR6**: Rejilla responsive de tarjetas (3/1 columnas) con:  
  - Término, sinónimos, categorías y nivel (visualizado con estrellas).  
  - Color de fondo asignado desde una paleta predefinida de 12 colores accesibles (WCAG AA).  
  - Botón para copiar término.  
- **FR7**: Modal de detalle que:  
  - Carga contenido al abrir (incluyendo iframes de YouTube) y libera recursos al cerrar.  
  - Muestra definición, ejemplos, recomendaciones y videos embebidos.  

#### **2.4 Experiencia de Usuario**  
- **FR8**: Tema light/dark con toggle y persistencia en `localStorage`.  
- **FR9**: Historial de últimos 10 términos visitados (sin timestamps).  

---

### **3. Requisitos No Funcionales (NFR)**  
#### **3.1 Rendimiento**  
- **NFR1**: Tiempo de carga inicial < 1s (datos cacheados tras primera visita).  
- **NFR2**: Lazy loading para tarjetas (12 por carga).  

#### **3.2 Seguridad**  
- **NFR3**: Sanitización de entradas en buscador (protección XSS).  

#### **3.3 Usabilidad y Accesibilidad**  
- **NFR4**: Cumplimiento WCAG 2.1 AA (contraste, ARIA labels).  
- **NFR5**: Diseño responsive (PC, móvil, tablet).  

#### **3.4 Mantenibilidad**  
- **NFR6**: Código modular en inglés con comentarios.  

---

### **4. Modelo de Datos**  
#### **Estructura de `data.json`**  
```json
[
  {
    "term": "Machine Learning",
    "synonyms": ["Aprendizaje Automático"],
    "definition": "Rama de la IA que...",
    "examples": ["Recomendaciones en Netflix"],
    "level": 3,
    "categories": ["IA"],
    "tags": ["Python"],
    "recommendations": "Curso de Andrew Ng..."
  }
]

Nota: level ahora usa valores del 1 al 5.

5. Diseño de UI/UX

5.1 Principios Visuales

Paleta: 12 colores predefinidos (ej.: #E3F2FD, #F3E5F5) para tarjetas.
Niveles: Representados con estrellas (⭐ a ⭐⭐⭐⭐⭐).
Tema:
- Light: slate-50 (fondo), slate-800 (texto).
- Dark: gray-900 (fondo), gray-100 (texto).

5.2 Componentes Clave

Buscador: Barra superior con autocompletado.
Modal: Overlay con botón de cierre y scroll interno.

6. Stack Técnico

Frontend:
- HTML5, Vanilla JS (ES6).
- Tailwind CSS (CDN) + Alpine.js (reactividad).
- lite-youtube-embed (carga eficiente de videos).
Offline: Service Worker + localStorage.

7. Suposiciones

data.json se actualiza manualmente vía FTP/Git.
Tráfico moderado (<1000 usuarios/día).

8. Riesgos Identificados

R1: Carga lenta en conexiones móviles.
- Mitigación: Cache agresivo y lazy loading.
R2: Videos afectando rendimiento.
- Mitigación: Carga bajo demanda en modal.

9. Criterios de Aceptación

CA1: Buscador filtra correctamente por término/sinónimos/etiquetas.
CA2: Modal libera recursos de YouTube al cerrar.
CA3: Funcionalidad offline verificada.

10. Glosario

WCAG: Pautas de accesibilidad web.
XSS: Cross-Site Scripting.

Fin del Documento


## La respuesta es una confirmación en inglés...

Based on the provided **Software Requirements Document (DRS v1.1)** for the *"AI Dictionary"*, I'll outline a structured implementation plan while highlighting key technical considerations:

---

### **Implementation Roadmap**

#### **1. Core Architecture**
- **Static Web App**: Single HTML (`index.html`) with modular JS (`app.js`, `sw.js`) and Tailwind CSS (CDN).
- **Data Flow**: 
  ```mermaid
  graph LR
    A[data.json] --> B[Fetch/Load]
    B --> C[localStorage Cache]
    C --> D[Service Worker Pre-cache]
    D --> E[UI Rendering]

2. Critical JS Modules

// app.js
const CORE = {
  init: () => {
    this.loadData().then(data => this.renderGrid(data));
    this.setupServiceWorker();
    this.bindSearch(); // Debounced input handler
  },
  loadData: () => {
    // Priority: localStorage > Network > Fallback
  }
};

// sw.js (Service Worker)
const CACHE_NAME = 'ai-dict-v1';
self.addEventListener('install', (e) => {
  e.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(['/data.json'])));
});

3. UI Components

Search System:

<input> with input event listener + debounce (300ms)

Filter logic:

const filtered = data.filter(item => 
item.term.toLowerCase().includes(query) ||
item.synonyms.some(s => s.toLowerCase().includes(query)) ||
item.tags.some(t => t.toLowerCase().includes(query))
);

Card Grid:

Responsive columns: Tailwind's grid-cols-1 md:grid-cols-3

Color assignment:

const colors = ['bg-[#E3F2FD]', 'bg-[#F3E5F5]', ...]; // 12 WCAG-compliant colors
const cardColor = colors[Math.abs(hashCode(term)) % 12];

YouTube Modal:

<div x-data="{ open: false }">
<button @click="open = true">View Video</button>
<template x-teleport="body">
  <lite-youtube videoid="dQw4w9WgXcQ" @close="open = false"></lite-youtube>
</template>
</div>

4. Performance Optimizations

Lazy Loading:

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
  if (entry.isIntersecting) loadMoreCards();
});
});

Cache Strategy: Network-first for data.json, Cache-first for static assets.

5. Accessibility Checks

Color contrast validation using tailwindcss/colors with WCAG AA ratios.

ARIA labels for interactive elements:

<button aria-label="Toggle dark mode">...</button>

Validation Checklist

Functional:
- [ ] Offline mode works after first load
- [ ] YouTube iframe unloads when modal closes (memory leak test)
- [ ] Search filters match priority order (term > synonyms > tags)
Performance:
- [ ] Lighthouse score >90 on simulated 3G
- [ ] No layout shifts during lazy loading
Accessibility:
- [ ] Axe DevTools reports 0 WCAG 2.1 AA violations
- [ ] Keyboard navigable in dark/light modes

First Deliverable Structure

/ai-dictionary/
├── index.html          # Alpine.js directives + main layout
├── app.js              # Core logic (DRS-compliant)
├── sw.js               # Service Worker (Cache API)
├── data/               # Optional for local dev
│   └── data.json       # Sample dataset
├── styles/             # Additional CSS if needed
└── README.md           # Deployment: "Just upload to any static host"

Would you like me to elaborate on any specific component (e.g., Service Worker caching strategy or the YouTube lazy-loading implementation)?