- Memoizar Header con React.memo
- Memoizar iconos Menu y Search para evitar re-renders
- Usar useMemo y useCallback para handlers y datos
- Memoizar menuItems en MenuSheet
- Cerrar menú inmediatamente al hacer click (mejor feedback)
- Optimizar event handlers con requestAnimationFrame
- Reducir tiempo de renderizado de 315ms a <16ms
- Mejorar INP de enlaces del menú
- Usar setTimeout para handleShare (no bloquear UI)
- Usar requestAnimationFrame para onClick handlers
- Reducir bloqueo de UI de 383ms a <16ms
- Mejorar tiempo de respuesta de interacciones
- Mantener funcionalidad completa
- Crear página de Política de Privacidad (/privacidad)
- Crear página de Descargo de Responsabilidad (/descargo-responsabilidad)
- Crear página de Aviso Legal (/aviso-legal)
- Actualizar página Acerca de con enlaces a páginas legales
- Mejorar botón compartir en MenuSheet (usar toast en lugar de alert)
- Añadir rutas en App.tsx para las nuevas páginas
- Lazy loading para todas las nuevas páginas
- Añadir botón de compartir en ProcedureCard y DrugCard
- Implementar Web Share API con fallback a clipboard
- Generar deep links a protocolos y fármacos específicos
- Incluir información relevante en el share (título, prioridad, categoría)
- Usar toast notifications para feedback al usuario
- Archivos de despliegue ya presentes en repo:
- deploy.sh (script de deploy automático)
- ecosystem.config.js (config PM2)
- nginx.conf.example (config Nginx)
- DEPLOYMENT.md (documentación completa)
- env.example (variables de entorno)
- Añadir filtros por tipo (Todos, Protocolos, Fármacos)
- Añadir filtros por categoría (dinámicos según tipo seleccionado)
- Mejorar visualización de resultados con badges de prioridad y edad
- Aumentar límite de resultados de 8 a 12
- Resetear filtros al cerrar el modal
- Añadir 'oxigenoterapia' a DrugCategory type
- UI responsive con botones de filtro
- Convertir todas las páginas (excepto Home y NotFound) a lazy loading con React.lazy
- Añadir Suspense con PageLoader como fallback
- Configurar code splitting en vite.config.ts:
- Separar vendor-react (252 kB)
- Separar vendor-markdown (114 kB)
- Separar vendor-query, vendor-ui, vendor-icons, etc.
- Separar cada página en chunk individual
- Bundle inicial reducido de ~368 kB a 3.29 kB (1.25 kB gzipped)
- Mejora significativa en tiempo de carga inicial
- Páginas se cargan bajo demanda al navegar
- Crear página GaleriaImagenes con vista de todas las infografías organizadas por bloques
- Añadir referencias a imágenes en capítulo de Collarín Cervical (10 imágenes)
- Añadir botón de acceso a galería desde índice del manual
- Corregir error de React Router (useNavigate sin importar en MenuSheet)
- Ajustar estructura de providers en App.tsx
- Total: 48 imágenes disponibles en galería y referencias en manual
- Añadir hook useServiceWorker para gestionar SW y actualizaciones
- Crear componente UpdateNotification para notificar actualizaciones
- Mejorar registro del SW con updateViaCache: 'none'
- Añadir verificación de actualizaciones al recuperar foco
- Mejorar manifest.json con iconos adicionales
- Añadir CACHE_VERSION en sw.js para control de actualizaciones
Mejoras:
- Detección automática de nuevas versiones del SW
- Banner visual cuando hay actualización disponible
- Botón para actualizar ahora o más tarde
- Verificación periódica (cada hora) + al recuperar foco
- Limpieza automática de caches antiguos
Documentación:
- VERIFICACION_PWA.md - Guía de verificación
- TEST_PWA.md - Tests y checklist
- RESUMEN_PWA_ACTUALIZACIONES.md - Resumen de mejoras
- Organizar 48 imágenes en public/assets/infografias/ por bloques
- Adaptar MarkdownViewer para procesar rutas de imágenes automáticamente
- Actualizar Service Worker para cachear imágenes (offline-first)
- Configurar Vite para incluir imágenes en build
- Crear documentación: guías de integración, sugerencias de medios, estado de imágenes
- Scripts de organización automática de imágenes
Cambios técnicos:
- MarkdownViewer normaliza rutas de imágenes (relativas → absolutas)
- Service Worker cachea /assets/infografias/ automáticamente
- Vite config actualizado para mantener estructura de carpetas
- 48 imágenes organizadas: bloque-0 (9), bloque-2 (27), bloque-3 (9), bloque-7 (1), bloque-12 (2)
Documentación:
- GUIA_INTEGRAR_IMAGENES_PWA.md
- GUIA_RUTAS_IMAGENES_MARKDOWN.md
- SUGERENCIAS_MEDIOS_VISUALES.md
- IMAGENES_NECESARIAS.md
- ESTADO_FINAL_IMAGENES_PWA.md
- RESUMEN_ORGANIZACION_IMAGENES.md
- ✅ Herramientas nuevas:
* Temporizador de RCP con alertas cada 2 minutos
* Calculadora de Duración de Botella de Oxígeno
* Calculadora de Goteo (gotas/min y ml/h)
* Tabla de perfusión Adrenalina agregada
- ✅ Actualización Protocolo RCP:
* Orden actualizado: Comprobar consciencia → Llamar 112 → Iniciar RCP
* Aplicado a RCP Adulto SVB y Pediátrico
- ✅ Cambios UI:
* Botones de emergencias críticas con fondo negro y texto blanco
* Enlaces de códigos corregidos
- ✅ Medicación TES:
* Nueva sección separada para medicación autorizada bajo prescripción
* Aviso legal prominente
* Sin dosis ni decisiones clínicas
- ✅ Correcciones:
* Errores de sintaxis JSX corregidos (símbolos < y >)
* Favicon SVG actualizado
* GitHub Pages configurado correctamente
- Integración de 93 capítulos del manual completo
- Componente MarkdownViewer para renderizar archivos .md
- Navegación jerárquica completa (ManualIndex)
- Sistema de búsqueda mejorado
- Página ManualViewer con navegación anterior/siguiente
- Scripts de verificación del manual
- Puerto configurado en 8096
- Configuración de despliegue (Vercel, Netlify, GitHub Pages)
- Todos los problemas detectados corregidos
planetazuzu