Generador de Fichas SOS - Sismo 2026 🚨

Una aplicación web de código abierto diseñada para la rápida generación de fichas de búsqueda de personas desaparecidas en situaciones de crisis y desastres naturales, enfocada en zonas con conectividad extremadamente limitada.

📌 Utilidad del Proyecto

Durante emergencias como el Sismo de 2026, la difusión de información veraz, estructurada y legible en redes sociales puede salvar vidas. Esta herramienta permite a cualquier persona generar rápidamente una ficha con foto y detalles clave (ubicación, señas particulares, contacto) en un formato cuadrado (1:1) optimizado para plataformas como WhatsApp, Instagram, X (Twitter) y Facebook.

Principios de Crisis UX (Diseño para Emergencias):

• Cero distracciones: Interfaz directa y sin elementos innecesarios.
• Alto contraste visual: Uso estratégico de colores de alerta (rojo brillante) y tipografías grandes para información crítica (como el número de contacto).
• Formatos estandarizados: Oculta dinámicamente los campos vacíos para evitar generar "ruido visual" en la ficha generada.

⚡ Rendimiento en Redes de Baja Velocidad (3G / EDGE)

El mayor desafío en una zona de desastre es la caída de las telecomunicaciones. Esta aplicación ha sido desarrollada pensando estrictamente en redes 35kbps o Edge.

Para lograr esto, utilizamos Astro y aplicamos las siguientes optimizaciones drásticas:

1. Generación de Sitios Estáticos (SSG): Todo el HTML y CSS se pre-renderiza en la compilación. El servidor no hace procesamiento en tiempo real, simplemente entrega los archivos planos al instante.
2. Cero Javascript de Frameworks: Por defecto, Astro envía 0kb de Javascript del framework al cliente. La interactividad de esta aplicación se maneja con minúsculas "Islas de Astro" utilizando Vanilla Javascript (JS puro).
3. Procesamiento de Imágenes Offline: A diferencia de otras plataformas, el usuario NUNCA sube la foto a un servidor. La imagen seleccionada se procesa, recorta y dibuja localmente usando la API de Canvas del propio teléfono inteligente. Esto elimina el cuello de botella más grande en redes lentas: la subida de archivos pesados.
4. Cero dependencias externas: No cargamos tipografías desde Google Fonts ni librerías de terceros (se utilizan las system-ui de cada dispositivo móvil).

🛠️ Cómo Funciona

1. Llena los datos: El usuario ingresa la información de la persona (nombre, foto, edad, última ubicación y señas).
2. Previsualización en Vivo: Un motor Javascript dibuja la ficha en tiempo real sobre una etiqueta <canvas>.
3. Descarga y Difunde: Con un solo clic, se exporta una imagen .png de alta calidad (1080x1080) lista para compartir, junto a un texto pre-formateado que el usuario puede copiar a su portapapeles.
4. Privacidad total: Ningún dato, nombre o fotografía sale del navegador del usuario. Todo es temporal y se procesa localmente.

🔒 Privacidad y Manejo de Datos

Para cuidar tu seguridad y la de tus seres queridos, no almacenamos, ni recopilamos, ni enviamos absolutamente nada de la información introducida en esta herramienta a nuestros servidores ni a ninguna base de datos externa. Todo el procesamiento (incluyendo el manejo de fotos y la generación final de la ficha) se ejecuta 100% de manera local en el navegador o dispositivo del usuario. Al cerrar la aplicación, los datos no persisten en nuestros sistemas, garantizando privacidad total.

🚀 Guía para Desarrolladores (Haz un Fork)

¡Toda ayuda es bienvenida! Si deseas mejorar esta herramienta, traducirla, o adaptarla para otras emergencias, el proyecto es completamente tuyo.

Requisitos previos

• Node.js (Versión 18 o superior)
• NPM o PNPM

Instalación local

1. Haz un Fork de este repositorio y clónalo en tu computadora:

   git clone https://github.com/TU-USUARIO/venezuela.git
   

2. Instala las dependencias:

   cd venezuela
   npm install
   

3. Inicia el servidor de desarrollo:

   npm run dev
   

   La aplicación estará disponible en http://localhost:4321.

Estructura de Archivos Principal

• src/pages/index.astro: Contiene toda la interfaz principal, el formulario, y la lógica nativa en Javascript que dibuja sobre el <canvas>.
• src/layouts/Layout.astro: Define la estructura base HTML, los meta tags y colores generales.
• src/styles/global.css: Configuraciones globales de TailwindCSS.

Comandos Útiles

🤝 Contribuciones

Siéntete libre de abrir Issues si encuentras un bug o tienes sugerencias, o manda un Pull Request directamente. Asegúrate de probar que la generación de imágenes sigue funcionando y mantén el principio de "0 kilobytes innecesarios".