PASO 1: Documento de Requisitos de Software

Hago la entrevista de requisitos con el Asistente y llego a este DRS final:

### **Documento de Requerimientos de Software (DRS) - Generador de Paletas de Colores Armónicas v1.0**

**Versión:** 1.0
**Fecha:** 26 de Mayo de 2024

#### **1. Introducción y Propósito**

**1.1 Propósito:**
El objetivo de este documento es definir los requerimientos funcionales y no funcionales para el desarrollo de una miniaplicación web interactiva y autónoma. Esta aplicación permitirá a los usuarios explorar colores, generar combinaciones armónicas basadas en la teoría del color, guardar colores favoritos y exportar las paletas resultantes. Se priorizará una experiencia de usuario fluida, un diseño estético profesional y un rendimiento óptimo.

**1.2 Alcance:**
La aplicación se centrará en la manipulación de colores del lado del cliente utilizando HTML5, CSS3 y JavaScript (ES6+). Incluirá funcionalidades de entrada de color (directa, por búsqueda, visual y aleatoria), generación de múltiples esquemas de armonía, gestión de favoritos (guardado y visualización), exportación de paletas en formatos específicos y compartición social básica.

**1.3 Fuera del Alcance (v1.0):**
*   Eliminación individual de colores favoritos.
*   Generación de paletas a partir de imágenes.
*   Modo de simulación de daltonismo.
*   Sincronización de favoritos entre dispositivos o cuentas de usuario (dependencia exclusiva de `localStorage`).
*   Nomenclatura personalizada de paletas o colores favoritos.

**1.4 Audiencia Objetivo:**
Diseñadores gráficos, desarrolladores web, artistas digitales y cualquier persona interesada en explorar y trabajar con combinaciones de colores.

#### **2. Requisitos Funcionales (FR)**

##### **FR 2.1 Entrada de Color**
*   **FR 2.1.1 URL Parameter (`?color=`):** La aplicación debe poder inicializarse con un color específico proporcionado mediante un parámetro URL en formato hexadecimal (`#RRGGBB`). Ejemplo: `index.html?color=#FF5733`.
*   **FR 2.1.2 URL Parameter (`?random`):** La aplicación puede iniciarse generando un color aleatorio si se usa el parámetro `?random`. Ejemplo: `index.html?random`.
*   **FR 2.1.3 Prioridad de Parámetros:** Si se proporcionan parámetros conflictivos (ej. `?color=#FF0000&random`), el parámetro `color` tendrá prioridad sobre `random`.
*   **FR 2.1.4 Formatos de Entrada Manual:** El usuario podrá introducir el color principal mediante:
    *   Código Hexadecimal: Formato `#RRGGBB`.
    *   Nombre de Color CSS: Nombres estándar (ej., "Red", "SkyBlue"). La aplicación utilizará una lista interna para mapear estos nombres a sus valores hexadecimales.

##### **FR 2.2 Buscador de Colores**
*   **FR 2.2.1 Campo de Búsqueda:** Un campo de texto permitirá a los usuarios ingresar un código hexadecimal o un nombre de color estándar.
*   **FR 2.2.2 Sugerencias (Opcional, si viable sin sobrecargar):** Mientras el usuario escribe, se podrían mostrar sugerencias basadas en una lista predefinida de nombres de colores (cargada desde un archivo JSON local).
*   **FR 2.2.3 Validación y Mapeo:** El sistema validará la entrada. Si es un nombre válido, lo convertirá a Hex. Si es un Hex válido, lo usará directamente. Se buscará una coincidencia exacta con los nombres de la lista predefinida.
*   **FR 2.2.4 Manejo de Errores:** Si la entrada no es un Hex válido ni un nombre de color reconocido, se mostrará un mensaje de advertencia temporal (tooltip no intrusivo en la parte superior central del viewport) indicando "Color no válido".
*   **FR 2.2.5 Fuente de Colores:** La lista de nombres de colores estándar se cargará desde un archivo JSON local (formato: `[{"name": "ColorName", "hex": "#RRGGBB"}, ...]`).

##### **FR 2.3 Selector de Colores Visual**
*   **FR 2.3.1 Selector Interactivo:** Un componente selector de color visual (tipo 'color wheel' o similar) permitirá al usuario elegir un color de forma gráfica.
*   **FR 2.3.2 Acceso:** Este selector será accesible mediante un botón claramente identificado en la interfaz principal.

##### **FR 2.4 Generación de Combinaciones Armónicas**
*   **FR 2.4.1 Esquemas de Armonía:** Basado en el color principal seleccionado, la aplicación generará y mostrará simultáneamente múltiples paletas armónicas. Los esquemas a incluir son:
    *   Complementario
    *   Tríada
    *   Análogos
    *   Monocromáticos
    *   Complementarios Divididos (Split Complementary)
    *   Tétrada (Rectangular y/o Cuadrada)
*   **FR 2.4.2 Número de Colores:** El número de colores en cada paleta de armonía dependerá de la definición teórica del esquema (generalmente entre 3 y 5 colores, incluyendo o no el base según corresponda). La librería de color determinará la implementación exacta.
*   **FR 2.4.3 Visualización:** Cada esquema de armonía se presentará claramente etiquetado.

##### **FR 2.5 Exportación de Paletas**
*   **FR 2.5.1 Paletas Exportables:** Se podrán exportar las paletas de armonía generadas individualmente y la lista completa de favoritos.
*   **FR 2.5.2 Formato de Exportación (.txt):**
    *   Contenido: Un código de color hexadecimal (`#RRGGBB`) por línea.
    *   Nombre Archivo (Armonías): `palette_[base_color_hex]_[harmony_type]_[timestamp].txt` (ej. `palette_#FF5733_triadic_1685100000.txt`).
    *   Nombre Archivo (Favoritos): `favorites_[timestamp].txt`.
*   **FR 2.5.3 Formato de Exportación (CSS Variables):** Ofrecer una opción para exportar la paleta seleccionada como variables CSS.
    ```css
    :root {
      --color-1: #RRGGBB;
      --color-2: #RRGGBB;
      /* ... */
    }
  • FR 2.5.4 Formato de Exportación (JSON): Ofrecer una opción para exportar la paleta seleccionada como un array JSON de strings hexadecimales. ["#RRGGBB", "#RRGGBB", ...]
  • FR 2.5.5 Botones de Exportación: Habrá botones claros asociados a cada paleta de armonía generada y a la vista de favoritos para iniciar la descarga.
FR 2.6 Función "Color Aleatorio"
  • FR 2.6.1 Botón: Un botón "Generar Color Aleatorio" seleccionará un color al azar y lo establecerá como el color principal, actualizando las armonías.
  • FR 2.6.2 URL Parameter: Funcionalidad invocable también mediante index.html?random (ver FR 2.1.2).
FR 2.7 Favoritos
  • FR 2.7.1 Guardado: Los usuarios podrán marcar/desmarcar colores individuales como favoritos mediante un icono (ej. estrella o corazón). El estado de favorito se guardará persistentemente usando localStorage.
  • FR 2.7.2 Visualización ("Ver Favoritos"):
    • Un botón "Ver Favoritos" o un parámetro URL (?favorites) mostrará una vista dedicada con todos los colores guardados.
    • Layout: Rejilla responsiva (4 columnas en escritorio, 3 en tablet, 2 en móvil).
    • Contenido de Tarjeta de Color:
      1. Rectángulo (ratio 5:3) relleno con el color. Clickable, abre index.html?color=[HEX_CODE] en una nueva pestaña (target="_blank").
      2. Código Hexadecimal (#RRGGBB) como título debajo del rectángulo.
      3. Botón (icono preferido) "Copiar al Portapapeles" abajo a la derecha de la tarjeta.
  • FR 2.7.3 Exportación: Un botón "Exportar Favoritos" en la vista de favoritos permitirá la exportación según FR 2.5.2 y opcionalmente FR 2.5.3 / FR 2.5.4.
  • FR 2.7.4 Límite: No se impondrá un límite artificial, pero la funcionalidad depende de la capacidad de localStorage del navegador.
FR 2.8 Animación y Efectos Visuales
  • FR 2.8.1 Propósito: Mejorar la experiencia de usuario y la percepción de calidad mediante animaciones sutiles y transiciones fluidas.
  • FR 2.8.2 Ejemplos Específicos:
    • Transiciones de fundido (fade) al cambiar el color principal o las paletas de armonía.
    • Animación suave (expandir/colapsar) al mostrar/ocultar el selector de color visual.
    • Efecto visual discreto (ej. cambio de escala/opacidad) al añadir/quitar de favoritos.
    • Efectos de hover sutiles en elementos interactivos (botones, tarjetas de color).
  • FR 2.8.3 Tecnología: Se utilizará preferentemente GreenSock (GSAP) por su rendimiento y flexibilidad, o animaciones CSS nativas si son suficientes y más performantes para efectos simples.
FR 2.9 Integración con Redes Sociales
  • FR 2.9.1 Funcionalidad: Botones para compartir la vista actual en redes sociales populares (ej. Twitter, Facebook, Pinterest) o copiar un enlace.
  • FR 2.9.2 Contenido Compartido: Se compartirá el Título de la página y la URL actual (incluyendo parámetros como ?color= o ?favorites para recrear la vista).
  • FR 2.9.3 Ubicación: Los botones de compartir estarán disponibles en la vista principal (cuando un color está seleccionado) y en la vista de Favoritos.
  • FR 2.9.4 Implementación: Se priorizará el uso de la API Web Share si está disponible en el navegador del usuario, recurriendo a librerías ligeras como AddThis/ShareThis o enlaces de compartición manuales como fallback.
FR 2.10 Copiar al Portapapeles
  • FR 2.10.1 Disponibilidad: Funcionalidad de copiar el código de color al portapapeles debe estar disponible para:
    • El color principal seleccionado.
    • Cada color individual dentro de las paletas de armonía generadas.
    • Cada color en la vista de tarjetas de Favoritos (ver FR 2.7.2).
  • FR 2.10.2 Feedback: Proporcionar feedback visual claro (ej. cambio de icono, tooltip "Copiado!") tras una copia exitosa.
FR 2.11 Múltiples Formatos de Color
  • FR 2.11.1 Visualización: Para el color principal seleccionado, mostrar su valor no solo en Hexadecimal (#RRGGBB), sino también en RGB (rgb(R, G, B)) y HSL (hsl(H, S%, L%)). Permitir copiar estos valores (ver FR 2.10).

3. Requisitos No Funcionales (NFR)

NFR 3.1 Rendimiento
  • NFR 3.1.1 Carga: La aplicación debe cargar rápidamente (objetivo < 2s en First Contentful Paint sobre conexión 3G simulada). Minimizar el tamaño de los assets (JS, CSS, imágenes).
  • NFR 3.1.2 Interactividad: Las interacciones del usuario (selección de color, generación de armonías, búsqueda) deben ser fluidas, con respuestas visuales casi instantáneas (< 100ms).
  • NFR 3.1.3 Eficiencia: La manipulación de colores y el uso de localStorage deben ser eficientes para no impactar negativamente el rendimiento general del navegador. Selección cuidadosa de librerías para minimizar el 'bundle size'.
NFR 3.2 Usabilidad
  • NFR 3.2.1 Intuitividad: Interfaz clara, autoexplicativa y fácil de navegar, incluso para usuarios no técnicos.
  • NFR 3.2.2 Jerarquía Visual: Diseño limpio con una clara jerarquía de información. El color principal y las paletas generadas deben ser los elementos más prominentes.
  • NFR 3.2.3 Feedback: Proporcionar feedback constante al usuario sobre sus acciones (color seleccionado, guardado en favoritos, copiado, error).
NFR 3.3 Diseño Responsivo
  • NFR 3.3.1 Adaptabilidad: La interfaz debe adaptarse fluidamente y ser completamente funcional en una amplia gama de tamaños de pantalla, desde móviles pequeños hasta monitores de escritorio grandes. Se utilizarán técnicas de diseño responsivo (media queries, flexbox, grid).
  • NFR 3.3.2 Layout Específico: Se respetará el layout de rejilla definido en FR 2.7.2 para las vistas de lista.
NFR 3.4 Accesibilidad (A11y)
  • NFR 3.4.1 Estándar: Cumplir con las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 Nivel AA como mínimo.
  • NFR 3.4.2 Navegación por Teclado: Funcionalidad completa accesible mediante teclado (tabulación lógica, activación de controles con Enter/Espacio).
  • NFR 3.4.3 Contraste: Asegurar suficiente contraste de color entre texto y fondo, especialmente crucial al mostrar información sobre muestras de color.
  • NFR 3.4.4 ARIA: Uso adecuado de atributos WAI-ARIA para mejorar la semántica de controles personalizados (selector de color, botones con iconos).
  • NFR 3.4.5 Indicadores de Foco: Indicadores de foco visibles y claros para la navegación por teclado.
NFR 3.5 Estética y Diseño Visual
  • NFR 3.5.1 Estilo: Diseño elegante, moderno y profesional. Estética limpia y minimalista que no compita con los colores mostrados.
  • NFR 3.5.2 Temas: Implementar un tema claro por defecto y un tema oscuro opcional, con un mecanismo de cambio accesible para el usuario (ej. un botón toggle).
  • NFR 3.5.3 Calidad Visual: Alta atención al detalle en tipografía, espaciado, iconografía y transiciones para una experiencia pulida.
NFR 3.6 Mantenibilidad
  • NFR 3.6.1 Código: Código fuente bien estructurado, modular, comentado y siguiendo las mejores prácticas y convenciones para HTML, CSS (o preprocesadores como SASS/SCSS) y JavaScript.
  • NFR 3.6.2 Control de Versiones: Utilizar Git para el control de versiones.
NFR 3.7 Compatibilidad
  • NFR 3.7.1 Navegadores: Funcionar correctamente en las dos últimas versiones estables de los principales navegadores de escritorio (Chrome, Firefox, Safari, Edge) y móviles (Chrome para Android, Safari para iOS).
NFR 3.8 Uso Sin Conexión (Revisado)
  • NFR 3.8.1 Funcionalidad Principal: La lógica central (generación de colores, armonías, favoritos) funcionará sin conexión una vez que la aplicación y sus assets hayan sido cargados y cacheados por el navegador.
  • NFR 3.8.2 Dependencias Externas: Si se utilizan CDNs para librerías, la carga inicial de la aplicación requerirá conexión a internet. La funcionalidad sin conexión posterior dependerá de la política de caché del navegador. No se implementará un Service Worker para PWA en v1.0.

4. Especificaciones Técnicas y Stack Sugerido

  • Lenguajes Base: HTML5, CSS3, JavaScript (ES6+).
  • Librería de Manipulación de Color: Chroma.js (Recomendada por su robustez y manejo de espacios de color).
  • Selector de Color Visual: Pickr (Recomendado por ser ligero, personalizable y sin dependencias).
  • Librería de Animación: GreenSock (GSAP) (Recomendada por rendimiento y potencia para animaciones complejas).
  • Framework CSS/UI (Opcional): Considerar Tailwind CSS por su utilidad para prototipado rápido y consistencia, o usar CSS personalizado (posiblemente con SASS/SCSS) para un control total y mínimo bloat. La decisión debe balancear velocidad de desarrollo, rendimiento y estética deseada.
  • Iconografía: SVG para iconos (escalables y ligeros).
  • Almacenamiento Local: localStorage para favoritos.
  • Herramientas de Build (Sugerido): Vite o Parcel para un entorno de desarrollo rápido y optimización de build (bundling, minification).

5. Restricciones

  • La aplicación debe operar exclusivamente en el lado del cliente. No habrá componente de servidor (backend).
  • La persistencia de datos (favoritos) está limitada por las capacidades y restricciones de localStorage del navegador del usuario.
  • El rendimiento puede variar según el dispositivo y navegador del usuario final.
  • La funcionalidad completa requiere que JavaScript esté habilitado en el navegador del usuario.