BioJalisco — Sitio de Presentación Cinematográfico
Sitio de scrollytelling cinemático presentando una plataforma de biodiversidad de ciencia ciudadana para el occidente de México
Video Demostrativo
Capturas de Pantalla
1 / 10
El Desafío
Conservation researchers in western Mexico face an asymmetry: deep scientific expertise but limited reach. Their work covers a fraction of Jalisco's 80,000+ km² territory. BioJalisco proposes closing that gap through citizen science and technology, but the vision needed a compelling presentation to win stakeholders and partners.
La Solución
Un artefacto de persuasión construido como un archivo HTML autocontenido con imágenes embebidas, cambio de contenido bilingüe, audio procedural y animaciones activadas por scroll. Demuestra que la narración de alto impacto no requiere React ni un sistema de compilación.
Lo Que Hace Bien
- Arco narrativo de 5 actos (Gancho → Problema → Visión → Evidencia → Llamado) diseñado para persuasión de stakeholders
- Cambio instantáneo de idioma ES/EN sin recarga de página usando toggles de visibilidad CSS
- Despliegue autocontenido — sitio completo es archivo HTML de 1.8MB con imágenes WebP en base64
- Paisaje sonoro de bosque procedural vía Web Audio API (no se necesitan archivos de audio)
- Reducción del 92% en tamaño de imágenes mediante conversión PNG→WebP + codificación base64
Resultados
- Complete narrative pitch accessible in both Spanish and English from a single shareable URL
- Interactive Species Identifier lets stakeholders try real GPT-4o vision AI immediately
- High-impact persuasion site shipped with no React, build system, or CMS
- Image pipeline cut total payload from 16.8MB to 1.3MB (92% reduction)
Puntos clave
Ideal para
- Organizaciones de conservación presentando a socios académicos y financiadores
- Proyectos que necesitan sitios de presentación capaces de funcionar offline con cero infraestructura
- Narración bilingüe donde ambos idiomas deben estar igualmente pulidos
- Demostrar restricción técnica — JS vanilla para proyectos que no necesitan frameworks
No resuelve por completo
- Proyectos que requieren actualizaciones dinámicas de contenido (todo está integrado en el HTML)
- Sitios con cambios frecuentes de contenido (editar requiere modificación del archivo HTML)
- Galerías de imágenes grandes (la incrustación base64 infla el tamaño del archivo)
- Landing pages críticas para SEO (el enfoque de archivo único limita la optimización)
Qué obtienes
- Archivo HTML único de 1.8MB con 9 imágenes WebP embebidas
- Bilingüe ES/EN con cambio instantáneo vía CSS
- Sistema de revelación por scroll con Intersection Observer
- Paisaje sonoro procedural con Web Audio API
- Desplegado en Vercel sin paso de compilación
Proyectos Relacionados
NY English Teacher
Sitio de generación de prospectos para un negocio de coaching de inglés — reemplazó 4 roles y opera por $0 al mes
Converso AI — Recepción y Ventas con IA Bilingüe
Plataforma de chatbot con IA bilingüe para negocios de servicios — atiende recepción y ventas las 24 horas
Chatbot con IA para Sitios Web de PYMES
Chatbot con IA para un negocio de coaching — convierte a los visitantes del sitio en llamadas agendadas; reemplazó 4 roles
¿Tienes un desafío similar?
Hablemos sobre cómo una solución así podría funcionar para tu equipo. Llamada gratis, sin compromiso.
Agendar Llamada Gratis