From 0ec580ced9ea41ccea10baed090efd7cdf5e4f43 Mon Sep 17 00:00:00 2001 From: JohannVelazquez Date: Fri, 3 Jul 2026 17:36:04 -0600 Subject: [PATCH] add PRD and HTML prototype --- PRD-Rachita.md | 540 +++++++++++++++++++++++++++++++++++++++++++++++++ Rachita.html | 181 +++++++++++++++++ 2 files changed, 721 insertions(+) create mode 100644 PRD-Rachita.md create mode 100644 Rachita.html diff --git a/PRD-Rachita.md b/PRD-Rachita.md new file mode 100644 index 0000000..8fedccf --- /dev/null +++ b/PRD-Rachita.md @@ -0,0 +1,540 @@ +# PRD — Rachita 🦊🔥 +### Aplicación de hábitos y creatividad para niñas y niños (Tablet · Landscape) + +| Campo | Valor | +|---|---| +| **Producto** | Rachita | +| **Versión del documento** | 1.0 | +| **Fecha** | 2026-07-03 | +| **Autor** | Johann Velázquez | +| **Estado** | Borrador — basado en prototipo funcional `Rachita.html` | +| **Plataforma objetivo** | Tablet Android/iPadOS · Modo Landscape (horizontal) · 1280×800 de referencia | +| **Artefacto de referencia** | `Rachita.html` (prototipo interactivo React de 8 pantallas) | + +--- + +## 1. Resumen ejecutivo + +**Rachita** es una aplicación de hábitos gamificada para tablet, dirigida a niñas y niños de ~6 a 10 años, inspirada visualmente en *Finch* y *Little Streaks*. La niña cuida a una mascota virtual (su "compañero") que refleja su progreso: completa hábitos diarios, mantiene **rachas** (streaks), sube un dibujo diario a su **Museo personal**, y comparte **rachas en equipo** con familiares o amigas. + +El diferenciador clave es el **Sistema de Monitoreo de Batería**: la app usa el estado de batería del dispositivo como mecánica de cuidado — la mascota "se cansa" cuando la batería está baja y "duerme/entrena en su cápsula" mientras carga, bloqueando el uso de la tablet durante la carga como medida de seguridad y de higiene digital. + +### Problema que resuelve +1. Los niños pequeños carecen de motivación sostenida para hábitos rutinarios (bañarse, dormir temprano, ir a la escuela). +2. Los padres necesitan una forma no punitiva de limitar el uso de la tablet mientras carga (riesgo de sobrecalentamiento / hábito de pantalla excesivo). +3. No existe un espacio simple donde el niño registre su creatividad diaria y la familia la celebre. + +### Solución +Una app tablet-first con: mascota emocional, tarjetas de hábitos con check gigante, contador de racha con fuego animado, museo de dibujos con cámara/galería, rachas cooperativas, widgets de pantalla de inicio y estados de batería amigables que interrumpen el flujo de forma clara pero afectuosa. + +--- + +## 2. Objetivos y métricas de éxito + +### 2.1 Objetivos de producto +| # | Objetivo | Métrica (North Star en negrita) | +|---|---|---| +| O1 | Crear adherencia diaria a hábitos | **% de días con los 3 hábitos completados** ≥ 60% a 30 días | +| O2 | Retención emocional vía mascota | D7 retention ≥ 45%, D30 ≥ 25% | +| O3 | Reducir uso de tablet en carga | ≥ 90% de sesiones de carga sin desbloqueo manual | +| O4 | Fomentar creatividad diaria | ≥ 3 dibujos subidos al museo por semana | +| O5 | Vínculo social/familiar | ≥ 1 racha en equipo activa por usuario a 14 días | + +### 2.2 No-objetivos (fuera de alcance v1) +- Modo teléfono / orientación portrait. +- Multi-perfil en un mismo dispositivo (v1 = 1 niño por tablet). +- Chat libre entre usuarios (solo "enviar ánimo" predefinido, por seguridad infantil). +- Tienda / compras dentro de la app / monetización. +- Contenido educativo curricular (lecciones, quizzes). +- Modo offline-first completo con sincronización compleja (v1: local con backup simple). + +--- + +## 3. Usuarios y personas + +### 3.1 Persona primaria — "Lucía" (usuaria niña) +- 7 años, usa la tablet familiar 1–2 h al día. +- No lee textos largos; responde a color, animación, personajes y celebración. +- Motivación: cuidar a su mascota, no "romper" su racha de fuego, mostrar sus dibujos. +- Restricción: no debe requerir escritura compleja, ni contraseñas, ni navegación profunda (máximo 2 niveles). + +### 3.2 Persona secundaria — Madre/Padre/Hermano mayor (configurador) +- Configura hábitos, horarios de recordatorio y toggles de alertas. +- Quiere: evidencia de progreso, control del uso durante la carga, cero contenido inapropiado, cero contacto con extraños. +- Participa como "compañero de racha" (persona: "Dani, su hermana mayor"). + +### 3.3 Persona terciaria — Amiga par ("Ana") +- Otra niña con su propia tablet/cuenta; comparte una racha cooperativa mediante código de invitación. + +--- + +## 4. Alcance funcional — Módulos + +El producto se compone de **8 módulos** (todos presentes en el prototipo): + +1. Onboarding y selección de compañero (Avatar) +2. Dashboard principal de hábitos y rachas +3. Sistema de Monitoreo de Batería (batería baja + bloqueo en carga) +4. Alertas y pantalla de bloqueo del sistema (notificaciones) +5. Museo Diario — Subida de dibujo +6. Museo Diario — Galería / historial +7. Rachas en equipo (cooperativo) +8. Widgets de pantalla de inicio (mediano 2×2 y grande 4×2) + +--- + +## 5. Requisitos funcionales detallados + +> Prioridad: **P0** = imprescindible v1 · **P1** = deseable v1 · **P2** = versión futura. + +### 5.1 Módulo 1 — Onboarding y selección de compañero (Avatar) + +| ID | Requisito | Prioridad | +|---|---|---| +| AV-01 | La niña puede elegir entre 3 mascotas prediseñadas: **Zorro Rachi** (coral #FF8A66), **Gata Menta** (menta #3FB8AE), **Conejo Sol** (amarillo #F4B63E). | P0 | +| AV-02 | Cuarta opción **"Mi dibujo"**: importar una imagen (foto de un dibujo en papel) desde archivo/cámara, que se recorta en forma de "cabeza de mascota" (border-radius orgánico 34%/40%) y se convierte en el avatar personalizado. | P0 | +| AV-03 | La tarjeta seleccionada muestra borde de color y badge "✓ Elegido". | P0 | +| AV-04 | Si ya existe un dibujo personalizado, mostrar opción "Cambiar dibujo" para reemplazarlo sin perder la selección. | P1 | +| AV-05 | El avatar elegido se refleja **en toda la app**: sidebar, tarjeta de ánimo, widgets, overlays de batería, notificaciones y rachas en equipo. | P0 | +| AV-06 | El avatar personalizado hereda los estados de ánimo (idle/cansado/dormido) mediante filtros y overlays (gotas de sudor, "Z" flotantes). | P1 | +| AV-07 | Botón "Continuar" (CTA primario coral, píldora) lleva al Dashboard. | P0 | +| AV-08 | El nombre de la niña es configurable (prop `childName`, default "Lucía") y se usa en saludos y textos. | P0 | + +**Estados de la mascota (aplican a las 3 prediseñadas + personalizada):** +- `idle`: ojos abiertos con parpadeo (animación blink cada ~5 s), mejillas rosadas, respiración suave (animación breathe). +- `tired` (cansada): cejas caídas, gota de sudor animada (animación sweat). +- `sleep` (dormida): ojos cerrados en arco, letras "Z" flotando (animación floatZ). + +### 5.2 Módulo 2 — Dashboard principal (pantalla "Inicio") + +Layout de **3 columnas** sobre lienzo 1280×800: + +| Zona | Ancho | Contenido | +|---|---|---| +| Columna izquierda (sidebar fija) | 232 px | Tarjeta de perfil (mascota animada + nombre + badge de nivel "Nv. 7"), barra de XP (320/500), contador de racha con llama animada, menú de navegación (Inicio, Museo Diario, Mi Galería, Rachas en equipo, Alertas, Logros, Ajustes) | +| Columna central (flexible) | flex | Saludo "¡Hola, {nombre}!", fecha + contador de hábitos pendientes, chip "Activa en segundo plano", contador X/Y hoy, **tarjetas de hábitos** | +| Columna derecha | 296 px | Tarjeta "Tu racha" (llama + número grande + semana L-D), acceso "En equipo", tarjeta de mensaje de la mascota, mini-tarjeta "Museo Diario" con CTA "Subir dibujo de hoy" | + +| ID | Requisito | Prioridad | +|---|---|---| +| DA-01 | Mostrar los hábitos del día como tarjetas grandes (≥90 px de alto) con: franja de color lateral, ícono en contenedor 62×62, nombre (23 px Baloo 2), subtítulo descriptivo, y botón check circular de **74×74 px**. | P0 | +| DA-02 | Hábitos v1 de ejemplo: **Bañarse** (menta, "Antes de dormir"), **Dormir temprano** (lila, "A las 9:00 pm"), **Ir a la escuela** (coral, "Sin faltar nunca"). Los hábitos deben ser configurables por el adulto (nombre, subtítulo, ícono, color). | P0 (config P1) | +| DA-03 | Al tocar el check: transición a círculo verde #46C98B con palomita SVG animada (stroke draw 0.5 s) + animación pop + badge "¡Hecho!". El toque es **reversible** (toggle) para corregir errores. | P0 | +| DA-04 | Al completar **todos** los hábitos del día: lluvia de **confeti** (26 piezas, colores de la paleta, caída 1.1–2.1 s), banner "¡Racha asegurada hoy! 🔥" en la tarjeta de racha, y mensaje celebratorio de la mascota ("¡Lo lograste todo, {nombre}! Estoy súper orgulloso de ti."). | P0 | +| DA-05 | El confeti es desactivable (prop/ajuste `confettiOn`) por accesibilidad (sensibilidad a estímulos). | P1 | +| DA-06 | Contador de racha global (prop `streakStart`, ej. 12 días) visible en sidebar y columna derecha con llama animada (flicker 1.5–1.6 s). | P0 | +| DA-07 | Vista semanal L-M-M-J-V-S-D con círculos marcados (palomita coral) en días cumplidos. | P0 | +| DA-08 | Barra de estado simulada del SO: hora, señal, **porcentaje e ícono de batería** cuyo color/relleno reacciona al estado (86% normal gris, 18% baja coral #FF6B3D, 64% cargando verde #9BE36D). | P0 | +| DA-09 | Header con contador "{hechos}/{total} hoy" en píldora blanca. | P0 | +| DA-10 | La tarjeta de mensaje de la mascota cambia según contexto (ánimo normal vs. celebración). | P1 | +| DA-11 | Regla de racha: la racha del día se asegura al completar el 100% de hábitos antes de medianoche (hora local). Si no, la racha se reinicia a 0 (v1) — considerar "congelador de racha" como P2. | P0 | + +### 5.3 Módulo 3 — Sistema de Monitoreo de Batería + +**Máquina de estados:** `normal` → `low` (<20%) → `charging` (conector detectado) → `normal`. + +#### 5.3.1 Estado Batería Baja (<20%) — Overlay +| ID | Requisito | Prioridad | +|---|---|---| +| BA-01 | Al caer la batería por debajo del **20%**, mostrar overlay modal (fondo oscurecido rgba(40,30,26,.5) + blur 4 px) sobre cualquier pantalla, z-index superior al contenido pero inferior al bloqueo de carga. | P0 | +| BA-02 | El overlay muestra: mascota en estado **"cansada"** (cejas caídas + sudor, animación breathe), título "¡Me estoy quedando sin energía!", texto con el % real ("Solo me queda **18%** de batería…"), barra de batería visual coral, y 2 botones: **"Ahora no"** (secundario) y **"Conectar cargador"** (primario coral con animación coralpulse). | P0 | +| BA-03 | "Ahora no" cierra el overlay y permite seguir usando la app; el overlay reaparece a umbrales menores (15%, 10%, 5%) — no debe ser spam constante. | P1 | +| BA-04 | El texto y la narrativa presentan la carga como **cuidar a la mascota**, nunca como castigo. | P0 | +| BA-05 | Usar la Battery Status API / API nativa del SO para leer nivel y estado de carga reales. | P0 | + +#### 5.3.2 Estado En Carga — Pantalla de bloqueo de seguridad +| ID | Requisito | Prioridad | +|---|---|---| +| CA-01 | Al detectar conexión al cargador, activar **automáticamente** pantalla de bloqueo a pantalla completa (fondo nocturno #2A2350 con estrellas parpadeantes, animación twinkle). Bloquea toda interacción con la app. | P0 | +| CA-02 | Mostrar mascota **dormida** dentro de una "cápsula de energía" (burbuja translúcida con glow pulsante y respiración), título "Entrenando en mi cápsula de energía…", y subtexto "Guarda la tablet mientras se carga. Cuando despierte, ¡estaremos a tope de batería para jugar y dibujar!". | P0 | +| CA-03 | Barra de progreso de carga real (ej. "Cargando · 64%") en verde #9BE36D. | P0 | +| CA-04 | Botón de escape "Ya la desconecté": verifica el estado real; solo desbloquea si el cargador efectivamente se desconectó (evitar bypass). En el prototipo desbloquea directo — en producción validar contra la API. | P0 | +| CA-05 | Al llegar a 100%, la mascota "despierta" con animación de celebración y la pantalla invita a desconectar. | P1 | +| CA-06 | Registro (log local) de eventos de carga para métrica O3. | P2 | + +### 5.4 Módulo 4 — Alertas y pantalla de bloqueo del sistema + +| ID | Requisito | Prioridad | +|---|---|---| +| AL-01 | Rachita corre **en segundo plano** y envía notificaciones push locales al lockscreen del SO (vista previa simulada en el prototipo: fondo degradado violeta, reloj gigante 9:41, fecha). | P0 | +| AL-02 | Notificación de batería baja: "🔋 ¡Tu zorro está casi sin energía (18%)! Conéctame al cargador para no perder tu racha de {N} días." — con ícono de llama y branding Rachita. | P0 | +| AL-03 | Notificación de carga: "⚡ Estoy entrenando en mi cápsula de energía. Guárdame mientras cargo y volveré recargado. 💤" | P0 | +| AL-04 | Panel de configuración "Cuándo avisarte" con 3 toggles: avisar con poca batería (<20%), recordar no usar mientras carga, recordatorio de hábitos a las 7 pm. | P0 | +| AL-05 | Los toggles deben ser accesibles desde Ajustes con verificación de adulto (gate parental simple, ej. operación matemática). | P1 | +| AL-06 | Indicador visible en el Dashboard ("Activa en segundo plano" con punto verde) que enlaza a esta pantalla. | P1 | + +### 5.5 Módulo 5 — Museo Diario · Subir dibujo + +| ID | Requisito | Prioridad | +|---|---|---| +| MU-01 | Layout 2 zonas: izquierda = área de previsualización (placeholder rayado con borde punteado "[ aquí aparecerá tu dibujo ]") + 2 botones enormes (150 px ancho, íconos 34 px): **"Tomar foto"** (coral, abre cámara) y **"Abrir galería"** (menta, abre picker de imágenes). | P0 | +| MU-02 | Zona derecha: campo de texto estilizado como **nube de pensamiento** (tarjeta blanca redondeada con burbujas circulares decorativas debajo), placeholder "Hoy dibujé…", tipografía Nunito 16 px. | P0 | +| MU-03 | Botón "Guardar en mi museo" (CTA coral) persiste: imagen + comentario + fecha + medio (opcional) y navega a la Galería. | P0 | +| MU-04 | Máximo 1 dibujo "del día" destacado; permitir múltiples obras por día como P2. | P1 | +| MU-05 | Botón atrás (‹) regresa al Dashboard. Encabezado con fecha del día. | P0 | +| MU-06 | Compresión de imagen local (max ~1600 px lado largo) para almacenamiento eficiente. | P1 | +| MU-07 | Permisos de cámara/galería solicitados en contexto con explicación amigable. | P0 | + +### 5.6 Módulo 6 — Museo Diario · Galería (historial) + +| ID | Requisito | Prioridad | +|---|---|---| +| GA-01 | Cuadrícula de **3 columnas** con scroll vertical, agrupada por mes con encabezado ("JUNIO 2026"). | P0 | +| GA-02 | Primera celda fija: tarjeta punteada **"Sube el de hoy"** (+ circular coral) que navega a Subir dibujo. | P0 | +| GA-03 | Cada obra: tarjeta blanca con imagen (150 px alto), **chip de fecha** superpuesto, etiqueta de medio (crayón/acuarela/marcador/lápiz), título y comentario de la niña. | P0 | +| GA-04 | Contador total de obras en el encabezado ("12 obras · sigue creando, {nombre}"). | P1 | +| GA-05 | Tocar una obra abre vista detalle a pantalla completa con zoom (pinch) — P1 en prototipo no implementado. | P1 | +| GA-06 | Exportar/compartir una obra (a padres, por canal seguro) — P2. | P2 | + +### 5.7 Módulo 7 — Rachas en equipo (cooperativo) + +| ID | Requisito | Prioridad | +|---|---|---| +| EQ-01 | La niña puede tener **rachas compartidas** con otras personas (amiga, hermana, madre/padre). v1 del prototipo: 2 equipos activos (Ana — mejor amiga, racha 8, "Dormir temprano"; Dani — hermana mayor, racha 5, "Leer 10 minutos"). | P0 | +| EQ-02 | Regla cooperativa: **la racha del equipo crece solo si ambas cumplen el mismo día**; si una falla, "la racha descansa" (lenguaje no punitivo). | P0 | +| EQ-03 | Tarjeta por equipo: avatares de ambas unidos por un corazón coral, nombre y rol del compañero, llama + días juntas, "Reto en común", 2 chips de estado (✓ Hiciste tu parte hoy / ⏳ Aún te falta hoy · ✓ {Nombre} ya cumplió / ⏳ {Nombre} va en camino), semana de puntos L-D. | P0 | +| EQ-04 | CTA contextual según estado: **"Hacer mi parte ✓"** (si no ha cumplido) → **"Enviar ánimo a {Nombre} 💪"** (si ella cumplió y la otra no) → confirmación "¡Ánimo enviado! 🎉" → **"¡Racha a salvo hoy! 🔥"** (ambas cumplieron, con animación glow). | P0 | +| EQ-05 | El "ánimo" es un mensaje predefinido/sticker — **sin texto libre** (seguridad infantil). | P0 | +| EQ-06 | Tarjeta de invitación: código corto legible ("LUCIA-7F3"), tocar para copiar (feedback "¡Código copiado! ✓") y botón "Compartir invitación" (share sheet del SO gestionado por el adulto). | P0 | +| EQ-07 | Emparejamiento requiere aprobación del adulto en ambos extremos. | P0 | +| EQ-08 | Límite v1: máximo 3 equipos activos. | P1 | + +### 5.8 Módulo 8 — Widgets de pantalla de inicio + +| ID | Requisito | Prioridad | +|---|---|---| +| WI-01 | **Widget Mediano (2×2, ~200×200):** mascota mini + llama con racha, texto "HOY · X/Y", fila de 3 botones-hábito (34 px alto) marcables con un toque **sin abrir la app**. | P0 | +| WI-02 | **Widget Grande (4×2, ~430×200):** panel izquierdo con llama + número de racha + "días de racha"; panel derecho con lista de hábitos (checkbox 30×30 + nombre, tachado/atenuado al completarse). | P0 | +| WI-03 | Los toques en el widget actualizan el estado central (sincronización bidireccional con la app y entre widgets). | P0 | +| WI-04 | El widget refleja el avatar elegido y el color de estado (✓ verde #46C98B / ○ beige #F1E6DE). | P1 | +| WI-05 | Implementación nativa: App Widgets (Android) / WidgetKit (iPadOS). | P0 | + +--- + +## 6. Guía de estilo visual (Design System) + +### 6.1 Paleta de colores +| Nombre | Hex | Uso | +|---|---|---| +| **Coral** | `#FF8A66` | Primario: CTAs, marca, mascota zorro, racha | +| Coral intenso | `#FF6B3D` | Números de racha, alertas de batería baja | +| **Menta** | `#3FB8AE` | Secundario: hábitos, gata, botón galería | +| **Sol** | `#FBC24E` / `#F4B63E` | XP, logros, conejo | +| **Lila** | `#8C7CE8` | Museo Diario, notificaciones de carga | +| Verde éxito | `#46C98B` | Checks completados, toggles activos | +| Verde carga | `#9BE36D` | Barra de carga de batería | +| Rosa | `#FF6B8A` | Alertas (ítem de menú) | +| **Crema** | `#FFF6EE` | Fondo principal de la app | +| Crema cálido | `#FFE9DF` / `#FFF1E8` | Fondos de tarjetas suaves | +| **Tinta** | `#43352F` | Texto principal | +| Gris cálido | `#a4938a` / `#8a7a72` | Texto secundario | +| Noche | `#2A2350` / degradado `#39306E→#5A4E97→#B98FC4` | Pantallas de carga y lockscreen | + +Colores "soft" pareados por hábito: menta `#D6F3F0`, lila `#E7E3FB`, coral `#FFE0D5`. + +### 6.2 Tipografía +| Fuente | Pesos | Uso | +|---|---|---| +| **Baloo 2** (redonda, amigable) | 500–800 | Títulos, números grandes, botones, badges | +| **Nunito** (alta legibilidad) | 400–800 | Cuerpo, descripciones, subtítulos | + +Escala: títulos de pantalla 26–34 px · nombres de hábito 23 px · número de racha 42–92 px · cuerpo 13–16 px · captions 11–12 px. + +### 6.3 Formas, sombras y touch targets +- **Radios:** 14–24 px en tarjetas; 999 px (píldora) en CTAs y chips; 50% en checks. +- **Sombras:** suaves y cálidas, teñidas del color del elemento (ej. `0 12px 24px rgba(255,138,102,.32)` para coral). Nunca sombras negras duras. +- **Áreas de toque:** mínimo **58 px**; el check de hábito es de 74 px (regla clave para manos pequeñas). +- Botón primario = píldora coral con sombra; secundario = borde 2 px `#EBDFD7` sobre blanco. + +### 6.4 Catálogo de animaciones (microinteracciones) +| Animación | Duración | Uso | +|---|---|---| +| `breathe` | 2.4–3.6 s loop | Respiración de la mascota | +| `flicker` | 1.5–1.6 s loop | Llama de racha | +| `pop` | 0.35–0.4 s | Aparición de checks, badges "¡Hecho!" | +| `drawCheck` | 0.5 s | Trazo de la palomita SVG | +| `confFall` | 1.1–2.1 s | Confeti al completar todo | +| `glow` | 2.4–3 s loop | Halo verde "racha a salvo" y cápsula de carga | +| `coralpulse` | 1.6 s loop | CTA urgente "Conectar cargador" | +| `slideUp` | 0.4–0.5 s | Entrada de modales y notificaciones | +| `twinkle` | 2.2–3 s loop | Estrellas en pantallas nocturnas | +| `blink` | 5 s loop | Parpadeo de ojos de la mascota | +| `sweat` | 2.4 s loop | Gota de sudor (estado cansado) | +| `floatZ` | 2.6 s loop | Letras "Z" (estado dormido) | + +Todas las animaciones deben respetar `prefers-reduced-motion` (P1). + +--- + +## 7. Flujos de interacción clave + +### 7.1 Completar un hábito +```mermaid +flowchart LR + A[Dashboard] --> B[Tap en check 74px] + B --> C[Check verde + drawCheck + pop + badge ¡Hecho!] + C --> D{¿Todos los hábitos listos?} + D -- No --> E[Contador X/Y actualiza · pendientes -1] + D -- Sí --> F[Confeti 26 piezas + Racha asegurada 🔥 + mensaje de mascota orgullosa] + F --> G[Racha global +1 al cierre del día] +``` + +### 7.2 Batería baja → carga → desbloqueo +```mermaid +flowchart TD + A[Uso normal · batería 86%] --> B{Batería < 20%} + B --> C[Overlay: mascota cansada + barra 18% + 2 botones] + C -- "Ahora no" --> D[Sigue usando · re-alerta en 15/10/5%] + C -- "Conectar cargador" --> E[Niña conecta la tablet] + D --> E + E --> F[Bloqueo automático: mascota dormida en cápsula + estrellas] + F --> G{¿Cargador desconectado?} + G -- "Ya la desconecté" + verificación --> H[Regresa al Dashboard] + G -- Carga al 100% --> I[Mascota despierta + celebración] --> H +``` + +### 7.3 Racha en equipo (día típico) +1. Lucía abre "Rachas en equipo" → ve tarjeta de Ana con "⏳ Aún te falta hoy". +2. Toca **"Hacer mi parte ✓"** → su chip pasa a verde. +3. Ana aún no cumple → aparece **"Enviar ánimo a Ana 💪"**. +4. Lucía lo toca → "¡Ánimo enviado! 🎉" (Ana recibe notificación con sticker). +5. Ana cumple → ambas ven **"¡Racha a salvo hoy! 🔥"** con glow y la racha sube a 9. + +### 7.4 Museo diario +Dashboard → "Subir dibujo de hoy" → Tomar foto / Abrir galería → previsualización → escribir comentario en nube de pensamiento → "Guardar en mi museo" → Galería con la obra nueva y chip de fecha. + +--- + +## 8. Navegación y arquitectura de información + +``` +Rachita +├── Onboarding (primera vez): Elegir compañero → Dashboard +├── Dashboard (Inicio) ← pantalla raíz +│ ├── Museo Diario (subir) → Mi Galería +│ ├── Mi Galería → detalle de obra (P1) +│ ├── Rachas en equipo → invitar compañero +│ ├── Alertas → toggles de notificación +│ ├── Logros (P1 — placeholder en menú) +│ └── Ajustes (P1 — gate parental) +├── Overlays globales (cualquier pantalla) +│ ├── Batería baja (modal) +│ └── En carga (bloqueo total) +└── Fuera de la app + ├── Widget mediano 2×2 · Widget grande 4×2 + └── Notificaciones en lockscreen +``` + +Profundidad máxima: 2 niveles. Botón atrás (‹) siempre en la misma posición (arriba-izquierda, 40×40). + +--- + +## 9. Modelo de datos (v1) + +```ts +Profile { + childName: string // default "Lucía" + avatar: 'fox' | 'cat' | 'rabbit' | 'custom' + customAvatarSrc?: string // dataURL/imagen local + level: number // ej. 7 + xp: number // ej. 320 / xpToNext: 500 + streak: number // días de racha global +} + +Habit { + id: string // 'banarse' | 'dormir' | 'escuela' | ... + name: string; sub: string + icon: 'drop' | 'moon' | 'book' | ... + color: string; soft: string + doneToday: boolean + history: Record +} + +Artwork { + id: string; date: ISODate + imageUri: string; title: string + note: string // comentario de la niña + medium?: 'crayón'|'acuarela'|'marcador'|'lápiz' +} + +TeamStreak { + id: string + partner: { name: string; role: string; avatar: AvatarKind } + sharedHabit: string + streak: number + myDoneToday: boolean; theirDoneToday: boolean + nudgedToday: boolean + week: (0|1)[] // últimos 7 días +} + +Settings { + notifyLowBattery: boolean // default true + notifyWhileCharging: boolean // default true + habitReminderAt?: string // ej. "19:00", default off + confettiOn: boolean // default true +} +``` + +Persistencia v1: almacenamiento local del dispositivo. Rachas en equipo requieren backend mínimo (sync de estado diario + códigos de invitación). + +--- + +## 10. Requisitos no funcionales + +| Categoría | Requisito | +|---|---| +| **Rendimiento** | 60 fps en animaciones; arranque < 2 s; imágenes de galería lazy-load | +| **Batería** | El monitoreo en segundo plano debe consumir < 1% batería/día (usar eventos del SO, no polling) | +| **Privacidad infantil** | Cumplir COPPA / GDPR-K: sin anuncios, sin tracking de terceros, sin texto libre entre usuarios, datos del menor cifrados, imágenes solo locales salvo consentimiento parental | +| **Seguridad** | Gate parental para Ajustes e invitaciones; validación real del estado de carga (no confiar en el botón de escape); códigos de invitación de un solo uso con expiración | +| **Accesibilidad** | Touch targets ≥ 58 px; contraste AA en textos sobre crema; `prefers-reduced-motion`; textos cortos con emojis de apoyo; opción de desactivar confeti | +| **Idioma** | v1 español (MX); arquitectura preparada para i18n | +| **Offline** | Hábitos, museo y batería funcionan 100% offline; rachas en equipo se sincronizan al reconectar con resolución "el día cuenta si se marcó localmente ese día" | +| **Compatibilidad** | Tablets ≥ 8" · Android 10+ / iPadOS 15+ · solo landscape (bloquear rotación) | + +--- + +## 11. Analítica (respetando privacidad infantil) + +Eventos mínimos, anónimos y agregados (sin PII): +- `habit_completed`, `all_habits_completed_day` +- `streak_incremented`, `streak_lost` +- `battery_low_shown`, `battery_low_dismissed`, `charging_lock_shown`, `charging_lock_bypassed` +- `artwork_uploaded` (sin contenido), `gallery_opened` +- `team_streak_created`, `nudge_sent`, `team_streak_safe` +- `widget_habit_toggled` (por tamaño de widget) + +--- + +## 12. Criterios de aceptación (resumen QA) + +1. ✅ Con batería simulada al 18%, el overlay de batería baja aparece sobre cualquier pantalla y muestra la mascota cansada con el % correcto. +2. ✅ Al conectar el cargador, el bloqueo aparece en < 1 s sin interacción del usuario; no se puede navegar detrás de él. +3. ✅ "Ya la desconecté" NO desbloquea si el cable sigue conectado. +4. ✅ Marcar los 3 hábitos dispara confeti una sola vez, y desmarcar/remarcar no lo repite en el mismo estado. +5. ✅ El avatar personalizado importado aparece en sidebar, widgets, overlay de batería (con sudor) y cápsula de carga (con Z). +6. ✅ Marcar un hábito desde el widget actualiza el Dashboard al abrir la app, y viceversa. +7. ✅ En racha en equipo, el CTA sigue exactamente la secuencia: Hacer mi parte → Enviar ánimo → Ánimo enviado → Racha a salvo. +8. ✅ Con `confettiOn = false`, completar todo no muestra confeti pero sí el banner y el mensaje de la mascota. +9. ✅ Todos los touch targets interactivos miden ≥ 58 px en dispositivo real. +10. ✅ La app funciona sin conexión para hábitos y museo. + +--- + +## 13. Riesgos y mitigaciones + +| Riesgo | Impacto | Mitigación | +|---|---|---| +| La niña descubre cómo saltarse el bloqueo de carga | Alto (rompe O3) | Validar contra API del SO; el botón de escape verifica el estado real; modo kiosco opcional (P2) | +| Pérdida de racha genera frustración/abandono | Alto | Lenguaje no punitivo ("la racha descansa"), congelador de racha (P2), la mascota nunca "muere" | +| Notificaciones en segundo plano restringidas por el SO | Medio | Solicitar exención de optimización de batería con explicación al adulto; degradar con recordatorios al abrir | +| Fotos del museo con contenido sensible | Medio | Almacenamiento solo local por defecto; compartir requiere gate parental | +| Widget con estado desincronizado | Medio | Fuente de verdad única en almacenamiento compartido app↔widget; refresh al abrir | +| Complejidad del emparejamiento entre familias | Medio | Códigos cortos legibles + aprobación de adulto en ambos lados | + +--- + +## 14. Roadmap sugerido + +| Fase | Alcance | +|---|---| +| **MVP (v1.0)** | Onboarding/avatar (3 mascotas + dibujo importado), Dashboard con 3 hábitos, racha global, batería baja + bloqueo de carga, notificaciones locales, museo (subir + galería), widgets 2×2 y 4×2 | +| **v1.1** | Hábitos configurables por el adulto, gate parental, ajustes, congelador de racha, detalle de obra con zoom, `prefers-reduced-motion` | +| **v1.2** | Rachas en equipo con backend + invitaciones, envío de ánimos, logros (pantalla completa) | +| **v2.0** | Multi-perfil, más mascotas/accesorios desbloqueables por XP, exportar museo en PDF "libro de arte", sonidos y voz de mascota | + +--- + +## 15. Funcionalidades deseables (backlog de ideas — no comprometidas) + +> Ninguna de estas funcionalidades bloquea el MVP. Son propuestas para enriquecer el producto una vez validado el core. Cada una indica el módulo al que extiende y su valor esperado. + +### 15.1 Gamificación y mascota +| ID | Funcionalidad | Descripción | Valor | +|---|---|---|---| +| D-01 | **Accesorios y evolución de la mascota** | Desbloquear sombreros, bufandas, fondos de habitación con XP; la mascota "crece" visualmente al subir de nivel (Nv. 1–10 con 3 etapas). | Refuerza retención (O2) dando destino al XP, hoy solo visual | +| D-02 | **Habitación de la mascota** | Espacio decorable donde vive el compañero; los muebles se ganan con rachas largas (7, 14, 30 días). | Metas de mediano plazo más allá de la racha diaria | +| D-03 | **Congelador de racha ("poción de descanso")** | 1 por semana: si falla un día, la racha "duerme" en vez de perderse. Se gana completando semanas perfectas. | Mitiga el riesgo #2 (frustración por pérdida de racha) | +| D-04 | **Logros coleccionables** | Pantalla de Logros (hoy placeholder en el menú) con insignias ilustradas: "Primera semana", "Artista x10", "Madrugadora", "Cargadora responsable" (cargar la tablet sin protestar 5 veces). | Completa el ítem de menú existente; celebra conductas específicas | +| D-05 | **Sonidos y voz de la mascota** | Efectos suaves al marcar hábitos, ronquidos en la cápsula, "¡bien hecho!" grabado. Con toggle de silencio y respetando el modo silencio del SO. | Refuerzo multisensorial para no-lectores | +| D-06 | **Reacciones de la mascota al clima/hora** | La mascota saluda distinto en la mañana/noche y comenta el clima (API local u hora del sistema). | Sensación de "ser vivo", vínculo emocional | + +### 15.2 Hábitos y rutinas +| ID | Funcionalidad | Descripción | Valor | +|---|---|---|---| +| D-07 | **Editor de hábitos para el adulto** | CRUD completo tras gate parental: nombre, subtítulo, ícono (catálogo ampliado), color, días de la semana aplicables y horario límite. | Hoy los 3 hábitos están fijos; es la petición #1 esperable de padres | +| D-08 | **Hábitos con pasos (checklist hija)** | Un hábito puede tener sub-pasos ilustrados (ej. "Lavarse los dientes": tomar cepillo → pasta → 2 minutos → enjuagar) con temporizador visual. | Guía a niños pequeños que no saben "qué cuenta como hecho" | +| D-09 | **Temporizador visual infantil** | Cuenta regresiva tipo "pastel que se come" para hábitos con duración (leer 10 min, cepillado 2 min). | Los niños de 6–8 no dimensionan el tiempo abstracto | +| D-10 | **Rutinas por momento del día** | Agrupar hábitos en "Mañana / Tarde / Noche" con encabezados y orden sugerido; el dashboard resalta la rutina activa según la hora. | Reduce carga cognitiva cuando hay >5 hábitos | +| D-11 | **Verificación con foto (opcional)** | El adulto puede marcar un hábito como "requiere evidencia": la niña toma una foto (cama tendida, mochila lista) que el adulto aprueba. | Confianza para hábitos no observables | + +### 15.3 Museo y creatividad +| ID | Funcionalidad | Descripción | Valor | +|---|---|---|---| +| D-12 | **Lienzo de dibujo integrado** | Dibujar directamente en la tablet (pincel, crayón, colores de la paleta Rachita) además de fotografiar dibujos en papel. | Elimina fricción cámara/papel; aprovecha el stylus | +| D-13 | **Marcos y sellos para las obras** | Decorar la obra del día con marcos desbloqueables y stickers de la mascota antes de guardarla. | Conecta gamificación con creatividad | +| D-14 | **"Libro de arte" exportable** | Generar PDF mensual con las obras, fechas y comentarios, listo para imprimir o enviar a los abuelos (vía adulto). | Valor tangible para la familia; ya sugerido en v2.0 del roadmap | +| D-15 | **Reto creativo del día** | Sugerencia opcional al abrir el museo: "Hoy dibuja… tu animal favorito con sombrero". Rotación de ~90 prompts. | Resuelve el "no sé qué dibujar", aumenta O4 | +| D-16 | **Nota de voz en la obra** | Además del comentario escrito, grabar hasta 30 s explicando el dibujo (para niñas que aún no escriben fluido). | Accesibilidad por edad; recuerdo familiar valioso | + +### 15.4 Familia y social seguro +| ID | Funcionalidad | Descripción | Valor | +|---|---|---|---| +| D-17 | **Panel del adulto (reporte semanal)** | Vista tras gate parental o web: % de cumplimiento, evolución de racha, obras nuevas, eventos de carga. Opcional resumen por correo. | Cierra el loop con el configurador (persona secundaria) | +| D-18 | **Reacciones familiares a las obras** | Los compañeros de equipo aprobados pueden reaccionar a un dibujo con stickers predefinidos (👏 ⭐ ❤️). Sin comentarios de texto libre. | Audiencia para el museo sin riesgo de chat | +| D-19 | **Racha familiar (3+ miembros)** | Extender rachas en equipo a grupos ("Toda la familia lee 10 min"); la racha crece solo si todos cumplen. | Evolución natural de EQ-01 con la misma regla cooperativa | +| D-20 | **Metas con recompensa del mundo real** | El adulto define una recompensa pactada ("30 días de racha = ida al cine") visible como termómetro de progreso. | Puente entre motivación digital y familiar | + +### 15.5 Bienestar digital y batería +| ID | Funcionalidad | Descripción | Valor | +|---|---|---|---| +| D-21 | **Modo "hora de dormir"** | A la hora configurada, la app baja brillo/paleta a tonos nocturnos y la mascota bosteza e invita a cerrar; opcional bloqueo suave hasta la mañana. | Extiende la mecánica de cuidado más allá de la batería | +| D-22 | **Límite de tiempo de uso diario** | Presupuesto de minutos configurado por el adulto; la mascota "se cansa" gradualmente al agotarse (misma narrativa que batería baja). | Higiene digital coherente con el sistema existente | +| D-23 | **Historial de cuidado de batería** | Mini-pantalla con calendario de días en que cargó la tablet correctamente; alimenta el logro "Cargadora responsable" (D-04). | Refuerza O3 con feedback positivo visible | +| D-24 | **Modo kiosco/anclaje opcional** | Integración con Screen Pinning (Android) / Acceso Guiado (iPadOS) para que el bloqueo de carga no pueda evadirse saliendo de la app. | Mitiga el riesgo #1 (bypass del bloqueo) | + +### 15.6 Plataforma y accesibilidad +| ID | Funcionalidad | Descripción | Valor | +|---|---|---|---| +| D-25 | **Narración por voz (TTS)** | Botón de altavoz que lee títulos y mensajes en voz alta; opción "leer todo automáticamente" para pre-lectores. | Amplía el rango de edad hacia abajo (4–6 años) | +| D-26 | **Temas de paleta alternativos** | 2–3 variantes (noche, alto contraste, y una paleta fría) manteniendo la misma jerarquía visual. | Accesibilidad visual y preferencia personal | +| D-27 | **Multi-perfil por dispositivo** | Hasta 3 niños en la misma tablet con selector de perfil al abrir (avatar como identificador, sin contraseña). | Realidad de tablets familiares compartidas; ya en v2.0 | +| D-28 | **Copia de seguridad familiar** | Backup cifrado del perfil, historial y museo en la nube activado por el adulto, con restauración al cambiar de dispositivo. | Protege años de rachas y dibujos (hoy todo es local) | +| D-29 | **Soporte multi-idioma** | Inglés como segundo idioma aprovechando la arquitectura i18n prevista en §10. | Ampliación de mercado | + +### Priorización sugerida del backlog + +| Horizonte | Candidatas | +|---|---| +| **Corto plazo** (mayor valor / menor esfuerzo) | D-03 congelador de racha · D-07 editor de hábitos · D-04 logros · D-15 reto creativo · D-23 historial de carga | +| **Mediano plazo** | D-01 accesorios · D-12 lienzo de dibujo · D-17 panel del adulto · D-21 hora de dormir · D-16 nota de voz · D-24 modo kiosco | +| **Largo plazo** | D-02 habitación · D-14 libro de arte · D-19 racha familiar · D-25 TTS · D-27 multi-perfil · D-28 backup en la nube | + +--- + +## 16. Preguntas abiertas + +1. ¿La racha global se pierde por completo al fallar un día, o se adopta "congelador" desde v1? (Recomendación: v1 simple, congelador en v1.1.) +2. ¿Los hábitos tienen horario límite individual (ej. "Bañarse antes de 9 pm") que afecte cuándo cuentan para la racha? +3. ¿El "medio" del dibujo (crayón/acuarela/…) lo etiqueta la niña, el adulto, o se omite en v1? +4. ¿Qué SO se prioriza para el primer release (Android tablet vs iPad)? Los widgets interactivos tienen restricciones distintas por plataforma. +5. ¿El nivel/XP (Nv. 7, 320/500) tiene tabla de progresión definida y recompensas asociadas, o es solo visual en v1? +6. ¿Se necesita panel/vista para el adulto (web o dentro de la app tras gate) con reporte semanal? + +--- + +## Apéndice A — Inventario del prototipo `Rachita.html` + +| Pantalla (tab) | Estado en prototipo | Cobertura PRD | +|---|---|---| +| Guía (estilo visual) | ✅ Completa | §6 | +| Avatar (elegir compañero) | ✅ Completa con import de imagen funcional | §5.1 | +| Inicio (dashboard) | ✅ Completa con toggles y confeti funcionales | §5.2 | +| Equipo (rachas compartidas) | ✅ Completa con máquina de estados de CTA | §5.7 | +| Alertas (lockscreen + toggles) | ✅ Visual completa (toggles estáticos) | §5.4 | +| Museo (subir) | ✅ Visual completa (cámara/galería simuladas) | §5.5 | +| Galería | ✅ Completa con 5 obras de ejemplo + celda "sube el de hoy" | §5.6 | +| Widgets | ✅ Ambos tamaños funcionales (toggle real) | §5.8 | +| Batería baja / En carga | ✅ Overlays funcionales vía botones de simulación | §5.3 | + +**Props configurables del prototipo:** `childName` (texto, default "Lucía"), `streakStart` (0–365, default 12), `confettiOn` (booleano, default true). diff --git a/Rachita.html b/Rachita.html new file mode 100644 index 0000000..d65fa3c --- /dev/null +++ b/Rachita.html @@ -0,0 +1,181 @@ + + + + + Bundled Page + + + + +
+ + + + + + +
+
Unpacking...
+ + + + + + + + + + \ No newline at end of file