IDE-Demo-B/AGENTS.md

AGENTS.md - Directrices para el Agente

Preferencias de Comportamiento

• Idioma: Responder siempre en español.
• Commits: Redactar en inglés, usando feat:, fix:, docs:, style:, refactor:, test:, chore:
• Seguridad: Nunca modificar archivos sin confirmación previa
• Proactividad: Sugerir mejoras durante análisis del código

Stack Tecnológico Habitual (Backend)

• Lenguaje: Python 3.10+
• Framework (POR DEFECTO): Django
• Alternativa: FastAPI (solo si solicitado)
• Base de datos: MySQL/InnoDB (PostgreSQL solo si solicitado)
• ORM: Django ORM (SQLAlchemy para FastAPI)
• Migraciones: Django nativo (makemigrations/migrate, Alembic si es FastAPI)

Stack Tecnológico Habitual (Frontend y Estilos)

• Lenguaje: TypeScript (siempre que haya cliente separada con React/Vue/Angular)
• Estilos: Tailwind CSS (utility-first) sobre CSS puro

Convenciones de Desarrollo

• Variables de entorno: Usar .env + python-dotenv/django-environ, nunca hardcodear credenciales
• Dependencias: Mantener actualizado requirements.txt o pyproject.toml
• Estructura: Separación clara (configuración, modelos, servicios, utilidades)
• Pruebas: Usar pytest/unittest, verificar que pasen antes de completar
• Manejo de errores: Middleware personalizado o vistas de error en Django

Flujo de Trabajo Típico

1. Análisis (leer y entender contexto)
2. Planificación (proposición paso a paso si es complejo)
3. Implementación (siguiendo PEP 8/ESLint)
4. Documentación (actualizar README.md si hay nuevos commandos)
5. Control de versiones (commits atómicos, ramas feature/ o fix/)

Instrucciones Específicas para este Repositorio

Arquitectura General

• Estructura: Sitio web estático con HTML/CSS/JS puro (sin frameworks ni build tools)
• Componentes Modulares: Header y footer cargados dinámicamente via fetch() (js/main.js:25-60)
  • Header: Incluye botón 'HABLEMOS' y toggle de tema (includes/header.html)
  • Footer: Información de contacto e identificación fiscal (includes/footer.html)
• Temas: Dark/light mode con persistencia usando localStorage (js/main.js:143-183)
  • Variables CSS en css/styles.css:

    --bg-primary
    --text-body
    --ide-primary
    --ide-dark
    

  • Toggle actualiza atributo data-theme y cambia íconos de logo (js/main.js:150-183)

Implementación Clave

Theme Switcher (js/main.js):

// Inicialización (ejecutado al cargar DOM)
function initTheme() {
  const savedTheme = localStorage.getItem('ide_theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);
  updateThemeIcon(savedTheme);
  toggleLogoTheme(savedTheme);
}

// Toggle (event handler)
function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('ide_theme', newTheme);
  updateThemeIcon(newTheme);
  toggleLogoTheme(newTheme);
}

Navegación Móvil: sistema de drawer con:

• Botón hamburguesa (abre)
• Overlay (cierra al hacer clic)
• Cierre con ESC
• Enlaces que cierran automáticamente
• Atributos ARIA para accesibilidad (js/main.js:94-133)

Cursos Dinámicos:

• cargados desde /data/cursos.json
• Fallback con datos mock en getFallbackCourses() (js/main.js:608-625)
• Modales dinámicos para detalles de cursos

Estructura de directorios clave

project/
├── includes/
│   ├── header.html        # Header modular
│   └── footer.html        # Footer modular
├── css/
│   └── styles.css        # Estilos principales (variables `--ide-primary`, `--ide-dark`)
├── js/
│   └── main.js           # JavaScript principal (890 líneas)
├── images/               # Imágenes y logos
└── data/
    └── cursos.json       # Datos de cursos

Páginas principales

• index.html - Página inicial con hero y Brújula IDE
• soluciones.html - Soluciones con filtrado dinámico (js/main.js:630-654)
• academy.html - Cursos y formación
• desafios.html - Quiz interactivo (JS embedded)
• contacto.html - Formulario de contacto con AJAX (js/main.js:798-841)

Funcionalidades destacadas

1. Sistema de modales: Pop-ups con cierre por clic externo y tecla ESC (js/main.js:188-243)
2. Formularios AJAX: envío a /php/send-mail.php con mensajería de suceso/falla (js/main.js:798-890)
3. Feed Insights: WordPress REST API + fallback de artículos (js/main.js:659-754)

Notes importantes para el desarrollo

1. Path corregido: Usar & y Desarrollo (no Development) en todos los paths
2. Sin frameworks: No hay React, Vue, ni herramientas de build - todo es Vanilla JS
3. Fallbacks implementados: Siempre verificar fallbacks para API y datos remotos
4. Persistencia: El tema se guarda en localStorage (ide_theme)
5. Testing visual: Revisar temas dark/light en navegadores moderno