Skip to content

JhonAQ/InnovaSur

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Ayni Salud - MVP Mobile Mockups

📱 Descripción del Proyecto

Ayni Salud es una aplicación móvil diseñada para Promotores de Salud que trabajan en zonas rurales con conectividad limitada. El objetivo principal es facilitar el monitoreo de signos vitales, recolección de datos offline, alertas tempranas y educación en salud bilingüe (Español y Quechua/Aymara).

Este repositorio contiene los mockups funcionales del MVP para el Hackathon, creados con HTML, CSS y JavaScript vanilla.


🎯 Características Principales del MVP

✅ Alto Impacto - Bajo/Medio Esfuerzo (Priorizadas)

  1. Dashboard del Promotor

    • Lista de pacientes con estados de riesgo visuales (Verde/Amarillo/Rojo)
    • Búsqueda y filtros por estado
    • Indicador de sincronización offline
  2. Monitoreo de Signos Vitales

    • Transferencia automática vía Bluetooth IoT (Prioritaria)
    • Ingreso manual como respaldo
    • Alertas inmediatas por umbrales
  3. Módulo de Intervención

    • Resumen de mediciones
    • Recomendaciones estandarizadas
    • Nivel de urgencia
  4. Tamizaje de Salud Mental (PSC-17)

    • Cuestionario de 17 preguntas (5 en demo)
    • Cálculo automático de puntaje de riesgo
  5. Biblioteca Educativa

    • Contenido bilingüe (Español/Quechua)
    • Disponible offline
    • Videos, guías y recursos interactivos
  6. Registro de Pacientes

    • Formulario completo con foto
    • Datos de contacto de emergencia
    • Consentimiento

📂 Estructura del Proyecto

32/
│
├── index.html                 # Página de navegación principal
├── styles/
│   └── main.css              # Estilos globales (mobile-first)
│
└── views/
    ├── dashboard.html                    # Vista 1: Dashboard del Promotor
    ├── patient-profile.html              # Vista 2: Perfil del Paciente
    ├── monitoring-selection.html         # Vista 3: Selección de Monitoreo
    ├── iot-monitoring.html               # Vista 4: Monitoreo IoT (Bluetooth)
    ├── manual-entry.html                 # Vista 5: Ingreso Manual
    ├── alert-intervention.html           # Vista 6: Alertas e Intervención
    ├── mental-health-screening.html      # Vista 7: Tamizaje PSC-17
    ├── education-library.html            # Vista 8: Biblioteca Educativa
    └── new-patient.html                  # Vista 9: Registrar Nuevo Paciente

🚀 Cómo Usar los Mockups

Opción 1: Abrir Directamente en el Navegador

  1. Navega a la carpeta del proyecto
  2. Abre index.html en tu navegador web
  3. Haz clic en cualquier vista para explorarla

Opción 2: Usar un Servidor Local (Recomendado)

Con Python:

cd c:\Unsa\quinto-smtr\32
python -m http.server 8000

Con Node.js (http-server):

cd c:\Unsa\quinto-smtr\32
npx http-server -p 8000

Luego abre: http://localhost:8000

Opción 3: Live Server en VS Code

  1. Instala la extensión "Live Server"
  2. Haz clic derecho en index.html
  3. Selecciona "Open with Live Server"

📱 Vista Mobile Optimizada

Todos los mockups están diseñados con un enfoque mobile-first y optimizados para:

  • Resolución: 360px - 428px de ancho (smartphones)
  • Táctil: Botones grandes (mínimo 44px) para fácil interacción
  • Alto Contraste: Colores vivos para uso en exteriores
  • Íconos Grandes: Facilita el uso por personas con diferentes niveles de alfabetización tecnológica

🎨 Paleta de Colores

Colores Principales

  • Verde Salud: #2E7D32 (Primary)
  • Azul Confianza: #1565C0 (Secondary)
  • Naranja Energía: #FF6F00 (Accent)

Estados de Riesgo

  • 🟢 Normal: #4CAF50 (Verde)
  • 🟡 Precaución: #FFC107 (Amarillo)
  • 🔴 Alerta: #F44336 (Rojo)

Estados de Sincronización

  • ✓ Sincronizado: #4CAF50
  • ⏳ Pendiente: #FF9800
  • ✗ Error: #F44336

🔌 Funcionalidades Interactivas

Dashboard

  • Búsqueda en tiempo real
  • Filtros por estado de riesgo
  • Navegación a perfiles de pacientes

Monitoreo IoT

  • Simulación de conexión Bluetooth
  • Auto-completado de campos con mediciones
  • Alertas visuales instantáneas

Ingreso Manual

  • Validación de rangos en tiempo real
  • Mensajes de error descriptivos
  • Confirmación antes de guardar

Tamizaje PSC-17

  • Barra de progreso
  • Cálculo automático de puntaje
  • Interfaz de radio buttons grandes

Biblioteca Educativa

  • Selector de idioma (Español/Quechua)
  • Búsqueda de temas
  • Indicadores de contenido offline

🌐 Soporte Multilingüe

El diseño incluye:

  • Selector de idioma prominente en la biblioteca educativa
  • Marcadores "Bilingüe" en los recursos
  • Preparado para Español y Quechua/Aymara

📊 Flujos de Usuario Principales

Flujo 1: Monitoreo Rápido

Dashboard → Paciente → Tipo de Monitoreo → IoT/Manual → Alertas → Dashboard

Flujo 2: Registro Nuevo

Dashboard → FAB (+) → Formulario → Confirmación → Dashboard

Flujo 3: Tamizaje Mental

Dashboard → Paciente → Tamizaje PSC-17 → Resultados → Perfil

Flujo 4: Educación

Dashboard → Biblioteca → Seleccionar Tema → Contenido Multimedia

🛠️ Tecnologías Utilizadas

  • HTML5: Estructura semántica
  • CSS3: Estilos responsive, gradientes, animaciones
  • JavaScript Vanilla: Interactividad sin dependencias
  • Mobile-First Design: Optimizado para smartphones

📝 Notas para el Desarrollo

Para convertir a App Nativa:

  1. Framework: React Native / Flutter / Ionic
  2. Base de Datos Offline: SQLite / Realm
  3. Bluetooth: Plugins nativos para IoT
  4. Sincronización: Background sync con API REST
  5. Multimedia: Pre-descarga de videos educativos

Integraciones Futuras:

  • ✅ API de dispositivos médicos Bluetooth (iHealth, Contec, etc.)
  • ✅ Sistema de autenticación (Firebase/Cognito)
  • ✅ Cloud Storage (AWS S3 / Azure Blob)
  • ✅ Panel web para supervisores
  • ✅ Notificaciones push

👥 Público Objetivo

Promotores de Salud Comunitarios:

  • Trabajan en zonas rurales de Perú
  • Conectividad intermitente o nula
  • Pueden tener baja alfabetización tecnológica
  • Hablan español y lenguas originarias (Quechua/Aymara)

Beneficiarios:

  • Población rural vulnerable
  • Niños, adultos mayores, gestantes
  • Personas con enfermedades crónicas

🎓 Casos de Uso del MVP

  1. Detección de Hipertensión: Promotor detecta presión alta → Alerta → Derivación a centro de salud
  2. Tamizaje de Anemia: Medición de oxigenación → Educación sobre nutrición
  3. Salud Mental Infantil: PSC-17 → Identificación temprana → Referencia
  4. Educación Preventiva: Videos offline sobre higiene, nutrición, enfermedades crónicas

📄 Licencia

Este proyecto es parte del Hackathon Ayni Salud 2025 y está disponible para fines educativos y de desarrollo social.


📞 Contacto

Para más información sobre el proyecto Ayni Salud:

  • Organización: [Información del organizador]
  • Evento: Hackathon 2025
  • Fecha: Octubre 2025

✨ Próximos Pasos (Post-MVP)

  1. Autenticación y Seguridad

    • Login con PIN/biometría
    • Encriptación de datos sensibles
    • Cumplimiento GDPR/Ley de Protección de Datos
  2. Analítica y Reportes

    • Dashboard de métricas para supervisores
    • Mapas de calor de riesgo por comunidad
    • Exportación de reportes
  3. Inteligencia Artificial

    • Predicción de riesgos
    • Recomendaciones personalizadas
    • Procesamiento de lenguaje natural para Quechua
  4. Gamificación

    • Puntos y medallas para promotores
    • Desafíos de salud comunitaria
    • Ranking de comunidades saludables

¡Juntos construimos una salud más equitativa! 💚

About

Proyecto Ayni - Hackaton Innovasur 2025

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published