Divan · Jornada de puertas abiertas
Divan es una experiencia bilingüe de poesía persa para un stand de puertas abiertas de la Sociedad Persa. El visitante elige Hafez o Rumi, formula una intención y recibe un verso revisado con traducción inglesa, fuente y recitación opcional. Funciona sin conexión y protege la privacidad por diseño: sin cookies, rastreadores, servidor ni entrada de visitantes, mantiene la fiabilidad en redes inestables sin recopilar datos de sus usuarios.
01 / Resumen
- 01Vite
- 02React 19
- 03TypeScript estricto
- 04Service worker escrito a mano
- 05Web Crypto (colección en orden aleatorio (shuffle bag))
- 06Vitest (unidad / componente / accesibilidad / sin conexión)
- 07Playwright (Chromium de extremo a extremo)
- 08pnpm 10.33 · Node 22.16
Problema
Un stand público necesita una experiencia cultural rápida y agradable que funcione con Wi-Fi inestable, respete plenamente la privacidad y presente poesía persa con rigor cultural y académico, sin versos inventados, caligrafía rasterizada ni recopilación de datos.
Resumen de la solución
- Selección exacta de 60 versos de Hafez + 60 de Rumi, 120 en total, vinculados a ediciones inmutables con procedencia verificable.
- Aplicación preparada para funcionar sin conexión mediante un service worker escrito a mano.
- La colección en orden aleatorio (shuffle bag) de Web Crypto selecciona los versos en el dispositivo; ningún servidor registra lo que obtienen los visitantes.
- Tipografía Nastaliq viva y dirección artística propia de cada poeta, en lugar de imágenes planas.
- Accesibilidad desde el principio: marcado bilingüe y RTL, aislamiento bidireccional, regiones vivas, colores forzados y movimiento reducido.
02 / Evidencia
Pruebas y verificación
- Sin recopilación: no hay cookies, rastreadores ni servidor; solo identificadores públicos de poemas en sessionStorage.
- Funciona completamente sin conexión tras la primera carga con un service worker que verifica la integridad.
- El compilador de producción rechaza datos sintéticos de pruebas antes del despliegue; solo se publica el corpus revisado.
- Suites Vitest de unidades, componentes, accesibilidad, modo sin conexión, compartir, rendimiento y seguridad, además de Playwright Chromium de extremo a extremo.
03 / Métodos
Construcción
Tecnologías
- Vite
- React 19
- TypeScript estricto
- Service worker escrito a mano
- Web Crypto (colección en orden aleatorio (shuffle bag))
- Vitest (unidad / componente / accesibilidad / sin conexión)
- Playwright (Chromium de extremo a extremo)
- pnpm 10.33 · Node 22.16
- Corpus bilingüe revisado: 60 Hafez + 60 Rumi = 120 versos, ligados a ediciones inmutables con procedencia documentada.
- La selección de versos usa una colección en orden aleatorio (shuffle bag) de Web Crypto calculada en el dispositivo, sin intervención del servidor.
- Service worker manual con verificación de integridad para funcionar sin conexión en redes inestables.
- Dirección cultural por poeta con tipografía Nastaliq renderizada como texto, texto persa real y nunca imágenes rasterizadas.
- Marcado bilingüe con dirección, aislamiento bidireccional, regiones vivas, colores forzados y movimiento reducido.
Seguro
- Privacidad por diseño: sin cookies, identificadores, rastreadores ni entrada de visitantes; no se transmite nada.
- Cliente estático, sin servidor, base de datos ni analítica.
- Solo identificadores públicos de edición y poema en sessionStorage; preferencia de movimiento guardada localmente.
- El compilador de producción rechaza datos sintéticos y de prueba antes de desplegar.
- Atribución ligada a la fuente y comprobación de derechos: MIT para código; poemas y traducciones conservan sus licencias, como CC BY-SA.
- Contenedor estático tras un túnel saliente, sin superficie entrante.