feat: organizar imágenes para PWA y adaptar MarkdownViewer
- 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
This commit is contained in:
parent
f681fa8f08
commit
1a7f9ae008
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -12,6 +12,12 @@ dist
|
||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
|
|
||||||
|
# Variables de entorno
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.production
|
||||||
|
.env.development
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
|
|
|
||||||
40
COMMIT_MESSAGE.md
Normal file
40
COMMIT_MESSAGE.md
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
# Mensaje de Commit para GitHub
|
||||||
|
|
||||||
|
## Título del Commit
|
||||||
|
|
||||||
|
```
|
||||||
|
fix: Renumeración Bloque 2→4 (Soporte Vital) y resolución de conflictos organizacionales
|
||||||
|
```
|
||||||
|
|
||||||
|
## Descripción Detallada
|
||||||
|
|
||||||
|
```
|
||||||
|
🔧 CORRECCIONES CRÍTICAS DE ORGANIZACIÓN
|
||||||
|
|
||||||
|
### Renumeración Bloque 2 → 4 (Soporte Vital Básico)
|
||||||
|
- Resuelto conflicto crítico: dos bloques compartían numeración "Bloque 2"
|
||||||
|
- Renumerados 9 archivos de BLOQUE_02_* → BLOQUE_04_*
|
||||||
|
- Actualizados títulos internos: 2.0-2.8 → 4.0-4.8
|
||||||
|
- Actualizadas referencias cruzadas en múltiples capítulos
|
||||||
|
|
||||||
|
### Resolución de Duplicidades
|
||||||
|
- Glucómetro: Convertido 3.11 a redirect hacia 1.7 (ubicación definitiva)
|
||||||
|
- Actualizadas referencias a Glucómetro (3.11, 1.5 → 1.7)
|
||||||
|
|
||||||
|
### Documentación
|
||||||
|
- Generado DIAGNOSTICO_ORGANIZACIONAL_CRITICO.md
|
||||||
|
- Generado PLAN_RENUMERACION_COMPLETO.md
|
||||||
|
- Generado INFORME_RENUMERACION_BLOQUE_2_4.md
|
||||||
|
|
||||||
|
### Archivos Afectados
|
||||||
|
- 9 archivos renumerados (03_SOPORTE_VITAL_BASICO/)
|
||||||
|
- 10+ archivos con referencias actualizadas
|
||||||
|
- 1 archivo convertido a redirect (BLOQUE_03_11_GLUCOMETRO.md)
|
||||||
|
|
||||||
|
### Próximos Pasos Documentados
|
||||||
|
- Resolver duplicidades restantes (Collarín, Errores)
|
||||||
|
- Buscar bloques faltantes (7-14)
|
||||||
|
- Completar contenido vacío (Bloque 8: 8.0-8.4)
|
||||||
|
|
||||||
|
Fixes: Conflictos de numeración detectados en auditoría organizacional
|
||||||
|
```
|
||||||
202
DEPLOYMENT.md
Normal file
202
DEPLOYMENT.md
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
# 🚀 Guía de Deployment - EMERGES TES
|
||||||
|
|
||||||
|
Esta guía explica cómo desplegar EMERGES TES en un servidor propio (VPS Ubuntu).
|
||||||
|
|
||||||
|
## 📋 Requisitos del Servidor
|
||||||
|
|
||||||
|
- **OS:** Ubuntu 20.04+ o similar
|
||||||
|
- **RAM:** Mínimo 512MB (recomendado 1GB+)
|
||||||
|
- **CPU:** 1 core mínimo
|
||||||
|
- **Espacio:** 2GB+ para aplicación y dependencias
|
||||||
|
- **Node.js:** v18+ (solo para build, no necesario en producción)
|
||||||
|
- **Nginx:** Para servir archivos estáticos
|
||||||
|
|
||||||
|
## 🔧 Instalación Inicial
|
||||||
|
|
||||||
|
### 1. Instalar Node.js (para build)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Usar nvm (recomendado)
|
||||||
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
|
||||||
|
source ~/.bashrc
|
||||||
|
nvm install 18
|
||||||
|
nvm use 18
|
||||||
|
|
||||||
|
# O instalar directamente
|
||||||
|
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||||||
|
sudo apt-get install -y nodejs
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Instalar Nginx
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo apt update
|
||||||
|
sudo apt install -y nginx
|
||||||
|
sudo systemctl enable nginx
|
||||||
|
sudo systemctl start nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Clonar y preparar proyecto
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Crear directorio
|
||||||
|
sudo mkdir -p /var/www/emerges-tes
|
||||||
|
sudo chown $USER:$USER /var/www/emerges-tes
|
||||||
|
|
||||||
|
# Clonar repositorio (o subir archivos)
|
||||||
|
cd /var/www/emerges-tes
|
||||||
|
git clone <tu-repo> .
|
||||||
|
|
||||||
|
# Instalar dependencias
|
||||||
|
npm ci
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🏗️ Build de Producción
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build estático
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Verificar que se creó el directorio dist/
|
||||||
|
ls -la dist/
|
||||||
|
```
|
||||||
|
|
||||||
|
El directorio `dist/` contiene todos los archivos estáticos listos para servir.
|
||||||
|
|
||||||
|
## ⚙️ Configuración Nginx
|
||||||
|
|
||||||
|
### 1. Crear configuración
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo nano /etc/nginx/sites-available/emerges-tes
|
||||||
|
```
|
||||||
|
|
||||||
|
Copiar contenido de `nginx.conf.example` y ajustar:
|
||||||
|
- `server_name`: tu dominio
|
||||||
|
- `root`: ruta a `/var/www/emerges-tes/dist`
|
||||||
|
|
||||||
|
### 2. Activar sitio
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo ln -s /etc/nginx/sites-available/emerges-tes /etc/nginx/sites-enabled/
|
||||||
|
sudo nginx -t # Verificar configuración
|
||||||
|
sudo systemctl reload nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Verificar permisos
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo chown -R www-data:www-data /var/www/emerges-tes/dist
|
||||||
|
sudo chmod -R 755 /var/www/emerges-tes/dist
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔒 SSL con Let's Encrypt (Opcional pero Recomendado)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Instalar Certbot
|
||||||
|
sudo apt install -y certbot python3-certbot-nginx
|
||||||
|
|
||||||
|
# Obtener certificado
|
||||||
|
sudo certbot --nginx -d emergestes.com -d www.emergestes.com
|
||||||
|
|
||||||
|
# Renovación automática (ya configurado)
|
||||||
|
sudo certbot renew --dry-run
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔄 Deploy Automático
|
||||||
|
|
||||||
|
### Opción 1: Script de deploy
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Hacer ejecutable
|
||||||
|
chmod +x deploy.sh
|
||||||
|
|
||||||
|
# Ejecutar deploy
|
||||||
|
./deploy.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
### Opción 2: Deploy manual
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Actualizar código
|
||||||
|
git pull origin main
|
||||||
|
|
||||||
|
# 2. Instalar dependencias (si hay cambios)
|
||||||
|
npm ci
|
||||||
|
|
||||||
|
# 3. Build
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# 4. Verificar
|
||||||
|
ls -la dist/
|
||||||
|
|
||||||
|
# 5. Nginx se sirve automáticamente desde dist/
|
||||||
|
# Si necesitas forzar recarga:
|
||||||
|
sudo systemctl reload nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📊 Monitoreo (Opcional)
|
||||||
|
|
||||||
|
### PM2 (solo si necesitas servidor Node.js)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Instalar PM2
|
||||||
|
npm install -g pm2
|
||||||
|
|
||||||
|
# Usar solo para preview/desarrollo
|
||||||
|
pm2 start ecosystem.config.js
|
||||||
|
pm2 save
|
||||||
|
pm2 startup # Configurar inicio automático
|
||||||
|
```
|
||||||
|
|
||||||
|
**Nota:** Para producción, Nginx sirviendo archivos estáticos es más eficiente que PM2.
|
||||||
|
|
||||||
|
## 🔍 Verificación Post-Deploy
|
||||||
|
|
||||||
|
1. **Verificar que la app carga:**
|
||||||
|
```bash
|
||||||
|
curl http://localhost
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Verificar rutas SPA:**
|
||||||
|
- Visitar `/herramientas`, `/farmacos`, etc.
|
||||||
|
- Todas deben funcionar sin 404
|
||||||
|
|
||||||
|
3. **Verificar Service Worker:**
|
||||||
|
- Abrir DevTools > Application > Service Workers
|
||||||
|
- Debe estar registrado
|
||||||
|
|
||||||
|
4. **Verificar PWA:**
|
||||||
|
- Debe poder instalarse en móvil
|
||||||
|
- Debe funcionar offline
|
||||||
|
|
||||||
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
|
### Error 502 Bad Gateway
|
||||||
|
- Verificar que Nginx está corriendo: `sudo systemctl status nginx`
|
||||||
|
- Verificar logs: `sudo tail -f /var/log/nginx/error.log`
|
||||||
|
|
||||||
|
### Rutas 404 en SPA
|
||||||
|
- Verificar que `try_files` en nginx incluye `/index.html`
|
||||||
|
- Verificar que `base` en `vite.config.ts` es correcto
|
||||||
|
|
||||||
|
### Service Worker no funciona
|
||||||
|
- Verificar que `sw.js` está en `dist/`
|
||||||
|
- Verificar headers de cache en nginx
|
||||||
|
|
||||||
|
### Build falla
|
||||||
|
- Verificar Node.js versión: `node --version` (debe ser 18+)
|
||||||
|
- Limpiar cache: `rm -rf node_modules dist && npm ci && npm run build`
|
||||||
|
|
||||||
|
## 📝 Notas Importantes
|
||||||
|
|
||||||
|
- **No necesitas Node.js corriendo en producción** - Nginx sirve archivos estáticos
|
||||||
|
- **El build se hace en el servidor** - No subir `node_modules` ni `dist/` al repo
|
||||||
|
- **Actualizaciones:** Solo hacer `git pull` + `npm run build` + recargar Nginx
|
||||||
|
- **Backup:** Considerar hacer backup de `dist/` antes de cada deploy
|
||||||
|
|
||||||
|
## 🔗 Enlaces Útiles
|
||||||
|
|
||||||
|
- [Nginx Documentation](https://nginx.org/en/docs/)
|
||||||
|
- [Let's Encrypt](https://letsencrypt.org/)
|
||||||
|
- [Vite Build](https://vitejs.dev/guide/build.html)
|
||||||
174
ESTADO_FINAL_IMAGENES_PWA.md
Normal file
174
ESTADO_FINAL_IMAGENES_PWA.md
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
# ✅ Estado Final: Imágenes Organizadas para PWA
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
**Estado:** ✅ **COMPLETADO**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 RESUMEN EJECUTIVO
|
||||||
|
|
||||||
|
| Aspecto | Estado | Detalles |
|
||||||
|
|---------|--------|----------|
|
||||||
|
| **Imágenes organizadas** | ✅ | 48 de 49 (98%) |
|
||||||
|
| **Estructura creada** | ✅ | 5 bloques organizados |
|
||||||
|
| **Build verificado** | ✅ | Imágenes incluidas en `dist/` |
|
||||||
|
| **Service Worker** | ✅ | Configurado para cachear |
|
||||||
|
| **PWA Offline** | ✅ | Lista para funcionar |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 DISTRIBUCIÓN DE IMÁGENES
|
||||||
|
|
||||||
|
```
|
||||||
|
public/assets/infografias/
|
||||||
|
├── bloque-0-fundamentos/ → 9 imágenes
|
||||||
|
│ └── Algoritmos, flujos, oxigenoterapia
|
||||||
|
│
|
||||||
|
├── bloque-2-inmovilizacion/ → 27 imágenes
|
||||||
|
│ └── Collarín, tablero, colchón, camilla
|
||||||
|
│
|
||||||
|
├── bloque-3-material-sanitario/ → 9 imágenes
|
||||||
|
│ └── Pulsioxímetro, tensiómetro, AMBU, cánulas
|
||||||
|
│
|
||||||
|
├── bloque-7-conduccion/ → 1 imagen
|
||||||
|
│ └── Configuración GPS
|
||||||
|
│
|
||||||
|
└── bloque-12-marco-legal/ → 2 imágenes
|
||||||
|
└── Decisiones éticas
|
||||||
|
```
|
||||||
|
|
||||||
|
**Total:** 48 imágenes organizadas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ VERIFICACIONES COMPLETADAS
|
||||||
|
|
||||||
|
### 1. Organización
|
||||||
|
- ✅ Imágenes movidas desde `imagenes-pendientes/` a `public/assets/infografias/`
|
||||||
|
- ✅ Estructura de carpetas creada
|
||||||
|
- ✅ Nombres de archivo preservados
|
||||||
|
|
||||||
|
### 2. Build
|
||||||
|
- ✅ `npm run build` ejecutado exitosamente
|
||||||
|
- ✅ Imágenes copiadas a `dist/assets/infografias/`
|
||||||
|
- ✅ Estructura de carpetas mantenida
|
||||||
|
|
||||||
|
### 3. Service Worker
|
||||||
|
- ✅ Configurado para cachear rutas `/assets/infografias/`
|
||||||
|
- ✅ Estrategia cache-first (offline-first)
|
||||||
|
- ✅ Cache automático al cargar imágenes
|
||||||
|
|
||||||
|
### 4. Vite Config
|
||||||
|
- ✅ `copyPublicDir: true` activado
|
||||||
|
- ✅ Imágenes incluidas en build
|
||||||
|
- ✅ Estructura de carpetas preservada
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ PENDIENTE
|
||||||
|
|
||||||
|
### 1. Imagen No Mapeada
|
||||||
|
**Archivo:** `7 Mandamientos Movilización Segura Paciente.png`
|
||||||
|
|
||||||
|
**Ubicación:** `imagenes-pendientes/`
|
||||||
|
|
||||||
|
**Acción:** Revisar y mover a `bloque-2-inmovilizacion/` (probablemente)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Referencias en Markdown
|
||||||
|
**Estado:** ⏳ Pendiente
|
||||||
|
|
||||||
|
**Acción requerida:** Añadir referencias en archivos `.md` del manual:
|
||||||
|
|
||||||
|
**Ejemplo:**
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**Archivos a editar:**
|
||||||
|
- `MANUAL_TES_DIGITAL/02_MATERIAL_E_INMOVILIZACION/...`
|
||||||
|
- `MANUAL_TES_DIGITAL/00_FUNDAMENTOS/...`
|
||||||
|
- `MANUAL_TES_DIGITAL/03_MATERIAL_SANITARIO/...`
|
||||||
|
- etc.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 PRÓXIMOS PASOS
|
||||||
|
|
||||||
|
### Paso 1: Mover Imagen Pendiente
|
||||||
|
```bash
|
||||||
|
# Revisar y mover manualmente
|
||||||
|
cp "imagenes-pendientes/7 Mandamientos Movilización Segura Paciente.png" \
|
||||||
|
public/assets/infografias/bloque-2-inmovilizacion/
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 2: Añadir Referencias en Markdown
|
||||||
|
Editar archivos del manual para incluir imágenes relevantes.
|
||||||
|
|
||||||
|
### Paso 3: Test Offline
|
||||||
|
1. Cargar app con imágenes
|
||||||
|
2. DevTools > Network > Offline
|
||||||
|
3. Verificar que las imágenes cargan desde cache
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 ARCHIVOS CREADOS/MODIFICADOS
|
||||||
|
|
||||||
|
### Scripts
|
||||||
|
- ✅ `scripts/organizar_imagenes_auto.py` - Script de organización automática
|
||||||
|
|
||||||
|
### Documentación
|
||||||
|
- ✅ `GUIA_INTEGRAR_IMAGENES_PWA.md` - Guía completa
|
||||||
|
- ✅ `RESUMEN_ORGANIZACION_IMAGENES.md` - Resumen de organización
|
||||||
|
- ✅ `RESUMEN_PWA_IMAGENES.md` - Resumen técnico
|
||||||
|
- ✅ `ESTADO_INFOGRAFIAS_MEDIOS.md` - Estado de medios
|
||||||
|
|
||||||
|
### Configuración
|
||||||
|
- ✅ `public/sw.js` - Service Worker actualizado
|
||||||
|
- ✅ `vite.config.ts` - Configuración de build actualizada
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 FUNCIONAMIENTO PWA
|
||||||
|
|
||||||
|
### Cómo Funciona
|
||||||
|
|
||||||
|
1. **Usuario carga página** con imagen en Markdown
|
||||||
|
2. **Navegador solicita** imagen desde `/assets/infografias/...`
|
||||||
|
3. **Service Worker intercepta** y cachea la imagen
|
||||||
|
4. **Siguiente visita offline:** Imagen se sirve desde cache
|
||||||
|
5. **Resultado:** PWA funciona completamente offline con imágenes
|
||||||
|
|
||||||
|
### Verificación
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Verificar imágenes en dist/
|
||||||
|
find dist/assets/infografias -type f | wc -l
|
||||||
|
# Debe mostrar: 48
|
||||||
|
|
||||||
|
# Preview local
|
||||||
|
npm run preview
|
||||||
|
# Abrir en navegador y verificar que las imágenes cargan
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CONCLUSIÓN
|
||||||
|
|
||||||
|
**Estado:** ✅ **COMPLETADO**
|
||||||
|
|
||||||
|
Las imágenes están:
|
||||||
|
- ✅ Organizadas en `public/assets/infografias/`
|
||||||
|
- ✅ Incluidas en el build (`dist/`)
|
||||||
|
- ✅ Configuradas para cache en Service Worker
|
||||||
|
- ✅ Listas para funcionar offline en PWA
|
||||||
|
|
||||||
|
**Solo falta:**
|
||||||
|
- ⏳ Añadir referencias en archivos Markdown del manual
|
||||||
|
- ⏳ Mover 1 imagen pendiente
|
||||||
|
|
||||||
|
**La PWA está lista para funcionar offline con imágenes una vez que se añadan las referencias en el manual.**
|
||||||
221
ESTADO_FUNCIONALIDADES.md
Normal file
221
ESTADO_FUNCIONALIDADES.md
Normal file
|
|
@ -0,0 +1,221 @@
|
||||||
|
# 📊 Estado de Funcionalidades - EMERGES TES
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
**Versión:** 1.0.0
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ FUNCIONALIDADES COMPLETAMENTE IMPLEMENTADAS
|
||||||
|
|
||||||
|
### 🏠 Navegación y UI Base
|
||||||
|
- ✅ **Sistema de rutas completo** - Todas las páginas navegables
|
||||||
|
- ✅ **Header con búsqueda y menú** - Funcional
|
||||||
|
- ✅ **Bottom navigation bar** - Navegación principal
|
||||||
|
- ✅ **Modal de búsqueda global** - Búsqueda unificada
|
||||||
|
- ✅ **Menú lateral (MenuSheet)** - Acceso a todas las secciones
|
||||||
|
- ✅ **Diseño responsive móvil-first** - Funciona en todos los dispositivos
|
||||||
|
- ✅ **Tema oscuro** - Optimizado para uso nocturno
|
||||||
|
- ✅ **Footer con donaciones** - Enlace a Ko-fi (desktop)
|
||||||
|
|
||||||
|
### 📄 Páginas Principales
|
||||||
|
- ✅ **Página Principal (Index)** - Home con acceso rápido
|
||||||
|
- ✅ **Soporte Vital** - Listado de protocolos con filtros
|
||||||
|
- ✅ **Fármacos** - Vademécum completo con búsqueda
|
||||||
|
- ✅ **Herramientas** - Calculadoras y tablas
|
||||||
|
- ✅ **Patologías** - Por sistemas (Respiratorias, Circulatorias, etc.)
|
||||||
|
- ✅ **Escena** - Checklists, ABCDE, Triage
|
||||||
|
- ✅ **Material** - Checklists de material
|
||||||
|
- ✅ **Telefono** - Protocolos transtelefónicos
|
||||||
|
- ✅ **Comunicación** - Guiones de comunicación
|
||||||
|
- ✅ **Manual** - Navegación del manual completo
|
||||||
|
- ✅ **RCP** - Página específica de RCP
|
||||||
|
- ✅ **Ictus** - Código Ictus
|
||||||
|
- ✅ **Shock** - Protocolo de shock
|
||||||
|
- ✅ **Vía Aérea** - OVACE e IOT
|
||||||
|
|
||||||
|
### 🔍 Búsqueda
|
||||||
|
- ✅ **Búsqueda global** - Busca en protocolos y fármacos
|
||||||
|
- ✅ **Búsqueda por texto** - Mínimo 2 caracteres
|
||||||
|
- ✅ **Resultados limitados** - Máximo 8 resultados
|
||||||
|
- ✅ **Navegación directa** - Click en resultado lleva a la página
|
||||||
|
|
||||||
|
### 🧮 Calculadoras
|
||||||
|
- ✅ **Glasgow (GCS)** - Calculadora completa funcional
|
||||||
|
- ✅ **Parkland (Quemados)** - Calculadora funcional
|
||||||
|
- ✅ **Dosis Pediátricas** - Por peso, funcional
|
||||||
|
- ✅ **Temporizador RCP** - Funcional
|
||||||
|
- ✅ **Duración de Oxígeno** - Calculadora funcional
|
||||||
|
- ✅ **Ritmo de Perfusión** - Calculadora funcional
|
||||||
|
- ✅ **Superficie Corporal** - Calculadora funcional
|
||||||
|
- ✅ **IMC** - Calculadora funcional
|
||||||
|
- ✅ **Talla de Collarín Cervical** - Calculadora funcional
|
||||||
|
|
||||||
|
### 📊 Tablas de Referencia
|
||||||
|
- ✅ **Tablas de Perfusión** - Dopamina, Noradrenalina
|
||||||
|
- ✅ **Visualización de tablas** - Formato claro
|
||||||
|
|
||||||
|
### 📚 Contenido
|
||||||
|
- ✅ **Protocolos de Soporte Vital** - 5+ protocolos implementados
|
||||||
|
- ✅ **Vademécum de Fármacos** - Fármacos con información completa
|
||||||
|
- ✅ **Patologías por Sistemas** - 10+ patologías
|
||||||
|
- ✅ **Protocolos Transtelefónicos** - Implementados
|
||||||
|
- ✅ **Guiones de Comunicación** - Implementados
|
||||||
|
- ✅ **Checklists de Material** - Implementados
|
||||||
|
- ✅ **Manual Completo** - Navegable por partes/bloques/capítulos
|
||||||
|
|
||||||
|
### 🔗 Compartir
|
||||||
|
- ✅ **Compartir App** - Web Share API (móviles) + copiar URL (desktop)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ FUNCIONALIDADES PARCIALMENTE IMPLEMENTADAS
|
||||||
|
|
||||||
|
### ⭐ Favoritos
|
||||||
|
- ⚠️ **UI implementada** - Botón de estrella visible en cards
|
||||||
|
- ❌ **Funcionalidad NO implementada** - Solo cambia estado local, no persiste
|
||||||
|
- ❌ **No hay almacenamiento** - No usa localStorage
|
||||||
|
- ❌ **No hay página de favoritos** - No existe ruta `/favoritos`
|
||||||
|
|
||||||
|
**Estado:** El botón de favorito cambia el estado visual pero se pierde al recargar.
|
||||||
|
|
||||||
|
### 📜 Historial
|
||||||
|
- ⚠️ **UI implementada** - Sección "Últimas Consultas" en home
|
||||||
|
- ❌ **Datos hardcodeados** - No se actualizan con uso real
|
||||||
|
- ❌ **No hay persistencia** - No guarda búsquedas reales
|
||||||
|
- ❌ **No hay página de historial** - No existe ruta `/historial`
|
||||||
|
|
||||||
|
**Estado:** Muestra datos estáticos, no refleja uso real.
|
||||||
|
|
||||||
|
### ⚙️ Ajustes
|
||||||
|
- ⚠️ **Botón en menú** - Visible pero no funcional
|
||||||
|
- ❌ **No hay página de ajustes** - No existe ruta `/ajustes`
|
||||||
|
- ❌ **No hay configuración** - No hay opciones configurables
|
||||||
|
|
||||||
|
**Estado:** Botón presente pero sin funcionalidad.
|
||||||
|
|
||||||
|
### ℹ️ Acerca de
|
||||||
|
- ⚠️ **Botón en menú** - Visible pero no funcional
|
||||||
|
- ❌ **No hay página de información** - No existe ruta `/acerca`
|
||||||
|
- ❌ **No hay información** - No muestra versión, créditos, etc.
|
||||||
|
|
||||||
|
**Estado:** Botón presente pero sin funcionalidad.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ❌ FUNCIONALIDADES NO IMPLEMENTADAS
|
||||||
|
|
||||||
|
### 💾 Persistencia de Datos
|
||||||
|
- ❌ **localStorage** - No se usa para guardar datos
|
||||||
|
- ❌ **sessionStorage** - No se usa
|
||||||
|
- ❌ **Favoritos persistentes** - Se pierden al recargar
|
||||||
|
- ❌ **Historial de búsquedas** - No se guarda
|
||||||
|
- ❌ **Configuración de usuario** - No se guarda
|
||||||
|
|
||||||
|
### 🔄 Service Worker / Offline
|
||||||
|
- ⚠️ **Service Worker existe** - `public/sw.js` presente
|
||||||
|
- ❌ **No está registrado** - No se registra en la app
|
||||||
|
- ❌ **No funciona offline** - Requiere conexión
|
||||||
|
- ❌ **Cache no configurado** - No cachea recursos
|
||||||
|
|
||||||
|
### 📤 Exportar/Compartir
|
||||||
|
- ❌ **Exportar protocolos a PDF** - No implementado
|
||||||
|
- ❌ **Compartir protocolos específicos** - Solo compartir app general
|
||||||
|
- ❌ **Deep links** - No hay enlaces directos a protocolos
|
||||||
|
|
||||||
|
### 🔔 Notificaciones
|
||||||
|
- ❌ **Notificaciones push** - No implementado
|
||||||
|
- ❌ **Alertas sonoras** - No implementado (excepto en temporizador RCP)
|
||||||
|
|
||||||
|
### 📊 Analytics
|
||||||
|
- ❌ **Analytics locales** - No implementado
|
||||||
|
- ❌ **Tracking de uso** - No implementado
|
||||||
|
|
||||||
|
### 🔐 Autenticación
|
||||||
|
- ❌ **Sistema de usuarios** - No existe
|
||||||
|
- ❌ **Login/Logout** - No implementado
|
||||||
|
- ❌ **Sincronización entre dispositivos** - No implementado
|
||||||
|
|
||||||
|
### 🧪 Tests
|
||||||
|
- ❌ **Tests unitarios** - No implementado
|
||||||
|
- ❌ **Tests de integración** - No implementado
|
||||||
|
- ❌ **Tests E2E** - No implementado
|
||||||
|
|
||||||
|
### 🛡️ Error Handling
|
||||||
|
- ❌ **Error boundaries** - No implementado
|
||||||
|
- ❌ **Manejo de errores global** - Básico
|
||||||
|
- ❌ **Página de error personalizada** - Solo 404 básico
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 RESUMEN POR CATEGORÍA
|
||||||
|
|
||||||
|
### ✅ Totalmente Funcional (100%)
|
||||||
|
- Navegación y UI
|
||||||
|
- Páginas principales
|
||||||
|
- Búsqueda
|
||||||
|
- Calculadoras (9 calculadoras)
|
||||||
|
- Tablas de referencia
|
||||||
|
- Contenido (protocolos, fármacos, patologías)
|
||||||
|
- Compartir App
|
||||||
|
|
||||||
|
### ⚠️ Parcialmente Funcional (50%)
|
||||||
|
- Favoritos (UI sí, persistencia no)
|
||||||
|
- Historial (UI sí, datos reales no)
|
||||||
|
- Ajustes (botón sí, funcionalidad no)
|
||||||
|
- Acerca de (botón sí, página no)
|
||||||
|
|
||||||
|
### ❌ No Implementado (0%)
|
||||||
|
- Persistencia de datos
|
||||||
|
- Service Worker / Offline
|
||||||
|
- Exportar/Compartir específico
|
||||||
|
- Notificaciones
|
||||||
|
- Analytics
|
||||||
|
- Autenticación
|
||||||
|
- Tests
|
||||||
|
- Error handling avanzado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 PRIORIDADES DE IMPLEMENTACIÓN
|
||||||
|
|
||||||
|
### 🔴 Alta Prioridad (Funcionalidad Core)
|
||||||
|
1. **Persistencia de Favoritos** - localStorage para favoritos
|
||||||
|
2. **Service Worker / Offline** - Funcionar sin internet
|
||||||
|
3. **Página de Favoritos** - Ver favoritos guardados
|
||||||
|
4. **Error Boundaries** - Prevenir crashes
|
||||||
|
|
||||||
|
### 🟡 Media Prioridad (Mejora UX)
|
||||||
|
5. **Historial Real** - Guardar búsquedas en sessionStorage
|
||||||
|
6. **Página de Ajustes** - Configuraciones básicas
|
||||||
|
7. **Página Acerca de** - Información de la app
|
||||||
|
8. **Deep Links** - Enlaces directos a protocolos
|
||||||
|
|
||||||
|
### 🟢 Baja Prioridad (Nice to Have)
|
||||||
|
9. **Exportar PDF** - Exportar protocolos
|
||||||
|
10. **Analytics locales** - Tracking de uso (opcional)
|
||||||
|
11. **Notificaciones** - Alertas (futuro)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 NOTAS TÉCNICAS
|
||||||
|
|
||||||
|
### Estado del Código
|
||||||
|
- ✅ **Código limpio** - Bien estructurado
|
||||||
|
- ✅ **TypeScript** - Type safety implementado
|
||||||
|
- ✅ **Componentes reutilizables** - Arquitectura sólida
|
||||||
|
- ⚠️ **Sin tests** - No hay cobertura de tests
|
||||||
|
- ⚠️ **Sin error boundaries** - Riesgo de crashes
|
||||||
|
|
||||||
|
### Dependencias
|
||||||
|
- ✅ **React Query instalado** - Pero no se usa (sin backend)
|
||||||
|
- ✅ **React Hook Form instalado** - Pero no se usa
|
||||||
|
- ⚠️ **Componentes UI no usados** - Bundle size podría optimizarse
|
||||||
|
|
||||||
|
### Performance
|
||||||
|
- ✅ **Build funciona** - Compila sin errores
|
||||||
|
- ⚠️ **Bundle grande** - 1.2MB (podría optimizarse)
|
||||||
|
- ✅ **Lazy loading** - No implementado pero posible
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Última actualización:** 2024-12-19
|
||||||
199
ESTADO_INFOGRAFIAS_MEDIOS.md
Normal file
199
ESTADO_INFOGRAFIAS_MEDIOS.md
Normal file
|
|
@ -0,0 +1,199 @@
|
||||||
|
# 📸 Estado de Infografías y Medios Visuales - EMERGES TES
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔍 SITUACIÓN ACTUAL
|
||||||
|
|
||||||
|
### ❌ Estado: NO VISIBLES
|
||||||
|
|
||||||
|
**Las infografías y medios NO se ven en la aplicación actualmente porque:**
|
||||||
|
|
||||||
|
1. **48 imágenes existen** en `imagenes-pendientes/` pero:
|
||||||
|
- ❌ No están organizadas en `public/assets/infografias/`
|
||||||
|
- ❌ No están referenciadas en los archivos Markdown del manual
|
||||||
|
- ❌ No hay una página/galería para visualizarlas
|
||||||
|
|
||||||
|
2. **Estructura esperada:**
|
||||||
|
```
|
||||||
|
public/assets/infografias/
|
||||||
|
├── bloque-0-fundamentos/
|
||||||
|
├── bloque-2-inmovilizacion/
|
||||||
|
├── bloque-3-material-sanitario/
|
||||||
|
├── bloque-7-conduccion/
|
||||||
|
└── bloque-12-marco-legal/
|
||||||
|
```
|
||||||
|
**Estado:** ❌ Carpetas no creadas, imágenes no organizadas
|
||||||
|
|
||||||
|
3. **Referencias en Markdown:**
|
||||||
|
- Los archivos `.md` del manual NO tienen referencias a imágenes
|
||||||
|
- El `MarkdownViewer` SÍ puede renderizar imágenes si están referenciadas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📍 DÓNDE DEBERÍAN VERSE
|
||||||
|
|
||||||
|
### 1. En el Manual (ManualViewer)
|
||||||
|
|
||||||
|
**Ubicación:** `/manual/:parte/:bloque/:capitulo`
|
||||||
|
|
||||||
|
**Cómo funcionaría:**
|
||||||
|
- Los archivos Markdown del manual tendrían referencias como:
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
- El `MarkdownViewer` renderizaría las imágenes automáticamente
|
||||||
|
- Las imágenes aparecerían integradas en el contenido del capítulo
|
||||||
|
|
||||||
|
**Estado actual:** ❌ No hay referencias, no se ven imágenes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. En Páginas Específicas (Futuro)
|
||||||
|
|
||||||
|
**Opciones posibles:**
|
||||||
|
- Página de galería de infografías
|
||||||
|
- Sección en Herramientas
|
||||||
|
- Visualizador de imágenes por bloque
|
||||||
|
|
||||||
|
**Estado actual:** ❌ No implementado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 INVENTARIO DE IMÁGENES DISPONIBLES
|
||||||
|
|
||||||
|
### Total: 48 imágenes
|
||||||
|
|
||||||
|
**Ubicación actual:** `imagenes-pendientes/`
|
||||||
|
|
||||||
|
**Distribución:**
|
||||||
|
- **2 SVG** (infografías vectoriales)
|
||||||
|
- **46 PNG** (imágenes rasterizadas)
|
||||||
|
|
||||||
|
**Tamaño total:** ~8.5 MB
|
||||||
|
|
||||||
|
### Categorías de Imágenes
|
||||||
|
|
||||||
|
#### 🔵 Fundamentos y Algoritmos (2)
|
||||||
|
- `ALGORITMO OPERATIVO DEL TES.svg`
|
||||||
|
- `RESUMEN VISUAL DEL ALGORITMO START.svg`
|
||||||
|
|
||||||
|
#### 🟢 Inmovilización (20+)
|
||||||
|
- Collarín cervical (12 imágenes paso a paso)
|
||||||
|
- Inmovilización manual (5 imágenes)
|
||||||
|
- Tablero espinal (1 imagen)
|
||||||
|
- Colchón vacío (2 imágenes)
|
||||||
|
- Camilla cuchara (1 imagen)
|
||||||
|
- Sistema de inmovilización (2 imágenes)
|
||||||
|
|
||||||
|
#### 🟡 Material Sanitario (10+)
|
||||||
|
- Oxigenoterapia (4 imágenes)
|
||||||
|
- Dispositivos (3 imágenes)
|
||||||
|
- Monitorización (3 imágenes)
|
||||||
|
- BVM/Ambú (1 imagen)
|
||||||
|
|
||||||
|
#### 🔴 Protocolos Transtelefónicos (3)
|
||||||
|
- `flujo-rcp-transtelefonica.png`
|
||||||
|
- `flujo-desa-telefono.png`
|
||||||
|
- `fast-transtelefonico.png`
|
||||||
|
|
||||||
|
#### 🟣 Otros (10+)
|
||||||
|
- Constantes vitales (2 imágenes)
|
||||||
|
- Conducción (1 imagen)
|
||||||
|
- Ética (2 imágenes)
|
||||||
|
- Y más...
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛠️ QUÉ HACE FALTA PARA VERLAS
|
||||||
|
|
||||||
|
### Paso 1: Organizar Imágenes
|
||||||
|
```bash
|
||||||
|
# Mover imágenes de imagenes-pendientes/ a public/assets/infografias/
|
||||||
|
# Usar el script organizar_infografias.py
|
||||||
|
python scripts/organizar_infografias.py
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 2: Referenciar en Markdown
|
||||||
|
Añadir referencias en los archivos `.md` del manual:
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 3: Verificar Rutas
|
||||||
|
- Las rutas deben ser relativas desde `public/`
|
||||||
|
- El MarkdownViewer ya está configurado para renderizar imágenes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ LO QUE YA FUNCIONA
|
||||||
|
|
||||||
|
1. **MarkdownViewer** - Componente listo para renderizar imágenes
|
||||||
|
- Ubicación: `src/components/content/MarkdownViewer.tsx`
|
||||||
|
- Línea 240-248: Renderizado de imágenes configurado
|
||||||
|
- Estilos: Imágenes con bordes redondeados, responsive
|
||||||
|
|
||||||
|
2. **Estructura de rutas** - Las imágenes se servirían desde `/assets/infografias/...`
|
||||||
|
|
||||||
|
3. **Scripts de organización** - Existen scripts para organizar automáticamente:
|
||||||
|
- `scripts/organizar_infografias.py`
|
||||||
|
- `scripts/organizar_infografias_simple.py`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ❌ LO QUE NO FUNCIONA
|
||||||
|
|
||||||
|
1. **Imágenes no organizadas** - Están en `imagenes-pendientes/`, no en `public/assets/`
|
||||||
|
2. **Sin referencias** - Ningún archivo `.md` tiene referencias a imágenes
|
||||||
|
3. **Sin galería** - No hay página para ver todas las infografías
|
||||||
|
4. **Sin integración** - Las imágenes no aparecen en ningún lugar de la app
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 SOLUCIÓN RÁPIDA
|
||||||
|
|
||||||
|
### Opción 1: Integrar en Manual (Recomendado)
|
||||||
|
|
||||||
|
1. **Organizar imágenes:**
|
||||||
|
```bash
|
||||||
|
mkdir -p public/assets/infografias/{bloque-0-fundamentos,bloque-2-inmovilizacion,bloque-3-material-sanitario}
|
||||||
|
# Mover imágenes según corresponda
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Añadir referencias en Markdown:**
|
||||||
|
- Editar archivos `.md` del manual
|
||||||
|
- Añadir `` donde corresponda
|
||||||
|
|
||||||
|
3. **Resultado:** Las imágenes aparecerán automáticamente en el ManualViewer
|
||||||
|
|
||||||
|
### Opción 2: Crear Galería de Infografías
|
||||||
|
|
||||||
|
1. **Crear página nueva:** `/herramientas/infografias` o `/infografias`
|
||||||
|
2. **Listar todas las imágenes** organizadas por bloque
|
||||||
|
3. **Permitir visualización** en modal o página dedicada
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 RESUMEN
|
||||||
|
|
||||||
|
| Aspecto | Estado | Detalles |
|
||||||
|
|---------|--------|----------|
|
||||||
|
| **Imágenes existentes** | ✅ 48 disponibles | En `imagenes-pendientes/` |
|
||||||
|
| **Imágenes organizadas** | ❌ No | No están en `public/assets/` |
|
||||||
|
| **Referencias en Markdown** | ❌ No | 0 referencias encontradas |
|
||||||
|
| **Renderizado** | ✅ Funciona | MarkdownViewer listo |
|
||||||
|
| **Visibilidad en app** | ❌ No visible | No se ven en ningún lugar |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 PRÓXIMOS PASOS SUGERIDOS
|
||||||
|
|
||||||
|
1. **Organizar imágenes** usando el script existente
|
||||||
|
2. **Añadir referencias** en los capítulos más importantes del manual
|
||||||
|
3. **Verificar visualización** en ManualViewer
|
||||||
|
4. **Opcional:** Crear página de galería para acceso rápido
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Conclusión:** Las imágenes existen pero NO están integradas. El sistema de renderizado está listo, solo falta organizar y referenciar las imágenes.
|
||||||
192
GUIA_INTEGRAR_IMAGENES_PWA.md
Normal file
192
GUIA_INTEGRAR_IMAGENES_PWA.md
Normal file
|
|
@ -0,0 +1,192 @@
|
||||||
|
# 📸 Guía: Integrar Imágenes en PWA - EMERGES TES
|
||||||
|
|
||||||
|
**Objetivo:** Asegurar que las infografías funcionen offline en la PWA
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ LO QUE YA ESTÁ CONFIGURADO
|
||||||
|
|
||||||
|
### 1. Service Worker
|
||||||
|
- ✅ **Registrado** en `src/main.tsx`
|
||||||
|
- ✅ **Cachea imágenes** automáticamente (cache-first strategy)
|
||||||
|
- ✅ **Detecta rutas** `/assets/infografias/` y las cachea
|
||||||
|
|
||||||
|
### 2. Vite Build
|
||||||
|
- ✅ **Copia `public/`** a `dist/` automáticamente (`copyPublicDir: true`)
|
||||||
|
- ✅ **Incluye imágenes** en el build (PNG, JPG, SVG, GIF)
|
||||||
|
- ✅ **Mantiene estructura** de carpetas para assets
|
||||||
|
|
||||||
|
### 3. MarkdownViewer
|
||||||
|
- ✅ **Renderiza imágenes** si están referenciadas en Markdown
|
||||||
|
- ✅ **Rutas relativas** funcionan desde `public/`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 PASOS PARA INTEGRAR IMÁGENES
|
||||||
|
|
||||||
|
### Paso 1: Organizar Imágenes
|
||||||
|
|
||||||
|
**Opción A: Manual**
|
||||||
|
```bash
|
||||||
|
# Crear estructura de carpetas
|
||||||
|
mkdir -p public/assets/infografias/{bloque-0-fundamentos,bloque-2-inmovilizacion,bloque-3-material-sanitario,bloque-7-conduccion,bloque-12-marco-legal}
|
||||||
|
|
||||||
|
# Mover imágenes desde imagenes-pendientes/ según corresponda
|
||||||
|
# Ejemplo:
|
||||||
|
cp imagenes-pendientes/ALGORITMO\ OPERATIVO\ DEL\ TES.svg public/assets/infografias/bloque-0-fundamentos/
|
||||||
|
cp imagenes-pendientes/colocacion-collarin-paso-*.png public/assets/infografias/bloque-2-inmovilizacion/
|
||||||
|
```
|
||||||
|
|
||||||
|
**Opción B: Script Automático**
|
||||||
|
```bash
|
||||||
|
# Usar el script existente
|
||||||
|
python scripts/organizar_infografias.py
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Paso 2: Añadir Referencias en Markdown
|
||||||
|
|
||||||
|
Editar los archivos `.md` del manual para incluir referencias:
|
||||||
|
|
||||||
|
**Ejemplo en `BLOQUE_04_3_COLLARIN_CERVICAL.md`:**
|
||||||
|
```markdown
|
||||||
|
## Colocación del Collarín Cervical
|
||||||
|
|
||||||
|
### Paso 1: Preparación
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Paso 2: Parte Posterior
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**Rutas relativas:**
|
||||||
|
- Desde `public/manual/BLOQUE_X/archivo.md`:
|
||||||
|
- `./assets/infografias/...` (sube un nivel, luego entra en assets)
|
||||||
|
- O: `../../assets/infografias/...` (más explícito)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Paso 3: Verificar Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build de producción
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Verificar que las imágenes están en dist/
|
||||||
|
ls -la dist/assets/infografias/
|
||||||
|
```
|
||||||
|
|
||||||
|
**Estructura esperada en `dist/`:**
|
||||||
|
```
|
||||||
|
dist/
|
||||||
|
├── assets/
|
||||||
|
│ └── infografias/
|
||||||
|
│ ├── bloque-0-fundamentos/
|
||||||
|
│ ├── bloque-2-inmovilizacion/
|
||||||
|
│ └── ...
|
||||||
|
├── manual/
|
||||||
|
└── index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Paso 4: Verificar Service Worker
|
||||||
|
|
||||||
|
1. **Abrir DevTools** > Application > Service Workers
|
||||||
|
2. **Verificar registro** del SW
|
||||||
|
3. **Ir a Cache Storage** > `emerges-tes-v1`
|
||||||
|
4. **Verificar** que las imágenes se cachean cuando se cargan
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔍 VERIFICACIÓN OFFLINE
|
||||||
|
|
||||||
|
### Test Manual
|
||||||
|
|
||||||
|
1. **Build:** `npm run build`
|
||||||
|
2. **Servir localmente:** `npm run preview` o `npx serve -s dist`
|
||||||
|
3. **Abrir en navegador:** `http://localhost:4173`
|
||||||
|
4. **DevTools** > Network > Throttling > "Offline"
|
||||||
|
5. **Navegar al manual** con imágenes
|
||||||
|
6. **Verificar:** Las imágenes deben cargar desde cache
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 ESTRUCTURA FINAL
|
||||||
|
|
||||||
|
```
|
||||||
|
public/
|
||||||
|
├── assets/
|
||||||
|
│ └── infografias/
|
||||||
|
│ ├── bloque-0-fundamentos/
|
||||||
|
│ │ ├── ALGORITMO OPERATIVO DEL TES.svg
|
||||||
|
│ │ └── RESUMEN VISUAL DEL ALGORITMO START.svg
|
||||||
|
│ ├── bloque-2-inmovilizacion/
|
||||||
|
│ │ ├── colocacion-collarin-paso-1-preparacion.png
|
||||||
|
│ │ ├── colocacion-collarin-paso-2-parte-posterior.png
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── bloque-3-material-sanitario/
|
||||||
|
│ │ ├── uso-correcto-pulsioximetro.png
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── bloque-7-conduccion/
|
||||||
|
│ └── bloque-12-marco-legal/
|
||||||
|
├── manual/
|
||||||
|
│ └── BLOQUE_X/
|
||||||
|
│ └── archivo.md (con referencias a imágenes)
|
||||||
|
└── sw.js
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ IMPORTANTE PARA PWA
|
||||||
|
|
||||||
|
### 1. Rutas Relativas
|
||||||
|
- Usar rutas relativas desde `public/`
|
||||||
|
- Ejemplo: `./assets/infografias/...` o `../../assets/infografias/...`
|
||||||
|
|
||||||
|
### 2. Tamaño de Imágenes
|
||||||
|
- **Optimizar antes de añadir** (comprimir PNG, optimizar SVG)
|
||||||
|
- **Tamaño recomendado:** <500KB por imagen
|
||||||
|
- **Total:** Considerar límite de cache del navegador
|
||||||
|
|
||||||
|
### 3. Service Worker
|
||||||
|
- **Cache automático:** Las imágenes se cachean al cargarse
|
||||||
|
- **Estrategia:** Cache-first (offline-first)
|
||||||
|
- **Actualización:** Cambiar `CACHE_NAME` para forzar actualización
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 COMANDOS ÚTILES
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Verificar qué imágenes hay
|
||||||
|
ls -lh imagenes-pendientes/
|
||||||
|
|
||||||
|
# Crear estructura
|
||||||
|
mkdir -p public/assets/infografias/{bloque-0-fundamentos,bloque-2-inmovilizacion,bloque-3-material-sanitario,bloque-7-conduccion,bloque-12-marco-legal}
|
||||||
|
|
||||||
|
# Build y verificar
|
||||||
|
npm run build
|
||||||
|
ls -R dist/assets/infografias/
|
||||||
|
|
||||||
|
# Preview local
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CHECKLIST DE INTEGRACIÓN
|
||||||
|
|
||||||
|
- [ ] Imágenes organizadas en `public/assets/infografias/`
|
||||||
|
- [ ] Referencias añadidas en archivos `.md` del manual
|
||||||
|
- [ ] Build verificado (`dist/assets/infografias/` existe)
|
||||||
|
- [ ] Service Worker cachea imágenes (verificar en DevTools)
|
||||||
|
- [ ] Test offline: imágenes cargan sin internet
|
||||||
|
- [ ] Tamaño total de imágenes razonable (<50MB)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Nota:** Una vez organizadas las imágenes y añadidas las referencias, el Service Worker las cacheará automáticamente para funcionamiento offline.
|
||||||
232
GUIA_RUTAS_IMAGENES_MARKDOWN.md
Normal file
232
GUIA_RUTAS_IMAGENES_MARKDOWN.md
Normal file
|
|
@ -0,0 +1,232 @@
|
||||||
|
# 📸 Guía: Rutas de Imágenes en Markdown
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
**Objetivo:** Cómo referenciar imágenes en archivos Markdown del manual
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ RUTAS CORRECTAS
|
||||||
|
|
||||||
|
### Desde archivos en `public/manual/BLOQUE_X/`
|
||||||
|
|
||||||
|
**Estructura:**
|
||||||
|
```
|
||||||
|
public/
|
||||||
|
├── manual/
|
||||||
|
│ └── BLOQUE_X/
|
||||||
|
│ └── archivo.md
|
||||||
|
└── assets/
|
||||||
|
└── infografias/
|
||||||
|
└── bloque-X-tema/
|
||||||
|
└── imagen.png
|
||||||
|
```
|
||||||
|
|
||||||
|
**Rutas correctas en Markdown:**
|
||||||
|
|
||||||
|
#### Opción 1: Ruta absoluta desde `/` (RECOMENDADO)
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Opción 2: Ruta relativa desde `public/`
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Opción 3: Ruta relativa con `../`
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**Todas estas opciones funcionan** gracias a la adaptación del `MarkdownViewer`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 ESTRUCTURA DE CARPETAS
|
||||||
|
|
||||||
|
```
|
||||||
|
public/
|
||||||
|
├── assets/
|
||||||
|
│ └── infografias/
|
||||||
|
│ ├── bloque-0-fundamentos/
|
||||||
|
│ │ ├── ALGORITMO OPERATIVO DEL TES.svg
|
||||||
|
│ │ ├── RESUMEN VISUAL DEL ALGORITMO START.svg
|
||||||
|
│ │ ├── flujo-rcp-transtelefonica.png
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── bloque-2-inmovilizacion/
|
||||||
|
│ │ ├── colocacion-collarin-paso-1-preparacion.png
|
||||||
|
│ │ ├── colocacion-collarin-paso-2-parte-posterior.png
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── bloque-3-material-sanitario/
|
||||||
|
│ │ ├── uso-correcto-pulsioximetro.png
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── bloque-7-conduccion/
|
||||||
|
│ │ └── configuracion-gps-antes-de-salir.png
|
||||||
|
│ └── bloque-12-marco-legal/
|
||||||
|
│ ├── diagrama-decisiones-eticas.png
|
||||||
|
│ └── diagrama-decisiones-eticas-urgencias.png
|
||||||
|
└── manual/
|
||||||
|
└── BLOQUE_X/
|
||||||
|
└── archivo.md
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 EJEMPLOS POR BLOQUE
|
||||||
|
|
||||||
|
### Bloque 0 - Fundamentos
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Bloque 2 - Inmovilización
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Bloque 3 - Material Sanitario
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 ADAPTACIÓN DEL MARKDOWNVIEWER
|
||||||
|
|
||||||
|
El `MarkdownViewer` ahora procesa automáticamente las rutas de imágenes:
|
||||||
|
|
||||||
|
1. **Rutas relativas** (`./assets/`, `../assets/`) → Se convierten a absolutas (`/assets/`)
|
||||||
|
2. **Rutas sin `/`** (`assets/`) → Se convierten a absolutas (`/assets/`)
|
||||||
|
3. **Rutas absolutas** (`/assets/`) → Se mantienen como están
|
||||||
|
4. **URLs externas** (`http://...`) → Se mantienen como están
|
||||||
|
|
||||||
|
**Ejemplo de procesamiento:**
|
||||||
|
```markdown
|
||||||
|
<!-- En el Markdown -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Se convierte automáticamente a -->
|
||||||
|
<img src="/assets/infografias/bloque-2-inmovilizacion/imagen.png" />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ BUENAS PRÁCTICAS
|
||||||
|
|
||||||
|
### 1. Usar rutas absolutas (recomendado)
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ventajas:**
|
||||||
|
- Funciona desde cualquier ubicación del archivo
|
||||||
|
- Más fácil de mantener
|
||||||
|
- No depende de la estructura de carpetas
|
||||||
|
|
||||||
|
### 2. Texto alternativo descriptivo
|
||||||
|
```markdown
|
||||||
|
✅ Bueno:
|
||||||
|
|
||||||
|
|
||||||
|
❌ Malo:
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Organizar por bloque
|
||||||
|
```markdown
|
||||||
|
<!-- Bloque 2 - Inmovilización -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bloque 3 - Material Sanitario -->
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚨 PROBLEMAS COMUNES
|
||||||
|
|
||||||
|
### Problema 1: Imagen no se muestra
|
||||||
|
|
||||||
|
**Causa:** Ruta incorrecta o imagen no existe
|
||||||
|
|
||||||
|
**Solución:**
|
||||||
|
1. Verificar que la imagen existe en `public/assets/infografias/`
|
||||||
|
2. Verificar que la ruta en Markdown es correcta
|
||||||
|
3. Usar ruta absoluta desde `/`
|
||||||
|
|
||||||
|
### Problema 2: Ruta relativa no funciona
|
||||||
|
|
||||||
|
**Causa:** El navegador resuelve rutas desde la URL, no desde el archivo
|
||||||
|
|
||||||
|
**Solución:** Usar rutas absolutas desde `/` (el MarkdownViewer las procesa automáticamente)
|
||||||
|
|
||||||
|
### Problema 3: Imagen se ve en desarrollo pero no en producción
|
||||||
|
|
||||||
|
**Causa:** La imagen no está en `dist/` después del build
|
||||||
|
|
||||||
|
**Solución:**
|
||||||
|
1. Verificar que la imagen está en `public/assets/`
|
||||||
|
2. Ejecutar `npm run build`
|
||||||
|
3. Verificar que la imagen está en `dist/assets/`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 CHECKLIST
|
||||||
|
|
||||||
|
Antes de añadir una imagen en Markdown:
|
||||||
|
|
||||||
|
- [ ] La imagen existe en `public/assets/infografias/`
|
||||||
|
- [ ] La ruta en Markdown es correcta (absoluta desde `/`)
|
||||||
|
- [ ] El texto alternativo es descriptivo
|
||||||
|
- [ ] La imagen está en la carpeta correcta según el bloque
|
||||||
|
- [ ] Se ha probado en desarrollo (`npm run dev`)
|
||||||
|
- [ ] Se ha verificado en build (`npm run build`)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 EJEMPLO COMPLETO
|
||||||
|
|
||||||
|
**Archivo:** `MANUAL_TES_DIGITAL/04_MATERIAL_E_INMOVILIZACION/BLOQUE_02_3_COLLARIN_CERVICAL.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Colocación del Collarín Cervical
|
||||||
|
|
||||||
|
### Paso 1: Preparación
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Descripción:**
|
||||||
|
- Mantener inmovilización manual
|
||||||
|
- Medir talla aproximada
|
||||||
|
- Preparar collarín
|
||||||
|
|
||||||
|
### Paso 2: Parte Posterior
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Descripción:**
|
||||||
|
- Colocar parte posterior del collarín
|
||||||
|
- Mantener control manual
|
||||||
|
- Verificar posición
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Última actualización:** 2024-12-19
|
||||||
309
IMAGENES_NECESARIAS.md
Normal file
309
IMAGENES_NECESARIAS.md
Normal file
|
|
@ -0,0 +1,309 @@
|
||||||
|
# 📸 Imágenes Necesarias - Análisis Completo
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 RESUMEN EJECUTIVO
|
||||||
|
|
||||||
|
| Categoría | Cantidad | Estado |
|
||||||
|
|-----------|----------|--------|
|
||||||
|
| **Imágenes ya organizadas** | 48 | ✅ Disponibles |
|
||||||
|
| **Medios faltantes documentados** | 21 | ❌ Por crear |
|
||||||
|
| **Capítulos sin imágenes** | 98 | ❌ 100% sin imágenes |
|
||||||
|
| **Capítulos con imágenes disponibles** | ~30-35 | ⚠️ Imágenes listas, falta integrar |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ LO QUE YA TIENES (48 imágenes organizadas)
|
||||||
|
|
||||||
|
### Distribución Actual
|
||||||
|
|
||||||
|
| Bloque | Imágenes | Estado |
|
||||||
|
|--------|----------|--------|
|
||||||
|
| **bloque-0-fundamentos** | 9 | ✅ Organizadas |
|
||||||
|
| **bloque-2-inmovilizacion** | 27 | ✅ Organizadas |
|
||||||
|
| **bloque-3-material-sanitario** | 9 | ✅ Organizadas |
|
||||||
|
| **bloque-7-conduccion** | 1 | ✅ Organizada |
|
||||||
|
| **bloque-12-marco-legal** | 2 | ✅ Organizadas |
|
||||||
|
|
||||||
|
**Total:** 48 imágenes listas para usar
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ❌ LO QUE FALTA (21 medios documentados)
|
||||||
|
|
||||||
|
### 🔴 ALTA PRIORIDAD (15 medios)
|
||||||
|
|
||||||
|
#### Bloque 0 - Fundamentos (3 medios)
|
||||||
|
1. **Diagrama de Selección de Dispositivo de Oxigenoterapia**
|
||||||
|
- Flujograma de decisión
|
||||||
|
- Indicadores de FiO2 por dispositivo
|
||||||
|
- Situaciones clínicas de uso
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Ubicación esperada:** `BLOQUE_03_0A_OXIGENOTERAPIA_BASICA.md`
|
||||||
|
|
||||||
|
2. **Tabla Visual de Rangos de FiO2**
|
||||||
|
- Comparativa de dispositivos
|
||||||
|
- Rangos de FiO2 por dispositivo
|
||||||
|
- Indicadores visuales de color
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Ubicación esperada:** `BLOQUE_03_0A_OXIGENOTERAPIA_BASICA.md`
|
||||||
|
|
||||||
|
3. **Guía de Colocación de Dispositivos de Oxigenoterapia**
|
||||||
|
- Secuencia paso a paso
|
||||||
|
- Posición correcta del dispositivo
|
||||||
|
- Verificaciones post-colocación
|
||||||
|
- **Formato:** SVG (serie de imágenes)
|
||||||
|
- **Ubicación esperada:** `BLOQUE_03_0A_OXIGENOTERAPIA_BASICA.md`
|
||||||
|
|
||||||
|
#### Bloque 2 - Inmovilización (11 medios)
|
||||||
|
4. **Componentes del Sistema de Inmovilización**
|
||||||
|
- Control manual, collarín, tablero/colchón
|
||||||
|
- Sistema completo de protección
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `componentes-sistema-inmovilizacion.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
5. **Selección de Talla de Collarín Cervical**
|
||||||
|
- Diagrama de medición anatómica
|
||||||
|
- Tabla de tallas (pediátrico, pequeño, mediano, grande)
|
||||||
|
- Indicadores de talla correcta vs incorrecta
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existen varias imágenes de selección de talla - ¿necesita consolidación?
|
||||||
|
|
||||||
|
6. **Colocación de Collarín Paso a Paso**
|
||||||
|
- 6 pasos visuales
|
||||||
|
- **Formato:** SVG (serie de 6 imágenes)
|
||||||
|
- **Nota:** Ya existen 6 imágenes PNG paso a paso - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
7. **Verificaciones Post-Colocación de Collarín**
|
||||||
|
- 5 verificaciones visuales
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `verificaciones-post-colocacion-collarin.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
8. **Posición del TES en Inmovilización Manual**
|
||||||
|
- Diagrama de posición correcta
|
||||||
|
- Vista lateral y frontal
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `posicion-tes-inmovilizacion-manual.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
9. **Técnica de Sujeción Manual**
|
||||||
|
- Vista superior de cabeza
|
||||||
|
- Posición de manos marcada
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `tecnica-sujecion-manual-cervical.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
10. **Secuencia de Transición en Inmovilización**
|
||||||
|
- 4-5 pasos visuales
|
||||||
|
- **Formato:** SVG (serie de imágenes)
|
||||||
|
- **Nota:** Ya existe `secuencia-transicion-inmovilizacion.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
11. **Componentes del Tablero Espinal**
|
||||||
|
- Tablero, collarín, correas, bloques
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `componentes-tablero-espinal.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
12. **Colocación de Tablero Espinal Paso a Paso**
|
||||||
|
- Secuencia visual de colocación
|
||||||
|
- **Formato:** SVG (serie de imágenes)
|
||||||
|
- **Ubicación esperada:** `BLOQUE_02_5_TABLERO_ESPINAL.md`
|
||||||
|
|
||||||
|
13. **Componentes del Colchón de Vacío**
|
||||||
|
- Colchón, bomba, válvula, collarín, correas
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `componentes-colchon-vacio.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
14. **Colocación de Colchón de Vacío Paso a Paso**
|
||||||
|
- 10 pasos visuales
|
||||||
|
- **Formato:** SVG (serie de imágenes)
|
||||||
|
- **Nota:** Ya existe `colocacion-colchon-vacio-paso-a-paso.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
15. **Coordinación del Equipo en Inmovilización**
|
||||||
|
- Diagrama de equipo alrededor del paciente
|
||||||
|
- Roles marcados, flujo de comunicación
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `coordinacion-equipo-inmovilizacion.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
### 🟡 MEDIA PRIORIDAD (5 medios)
|
||||||
|
|
||||||
|
16. **Errores Frecuentes en Colocación de Collarín**
|
||||||
|
- Lista visual de errores comunes
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `errores-frecuentes-collarin-cervical.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
17. **Situaciones que Requieren Inmovilización**
|
||||||
|
- Iconos de cada situación
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `situaciones-que-requieren-inmovilizacion.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
18. **Componentes de la Camilla Cuchara**
|
||||||
|
- Dos mitades separables
|
||||||
|
- Cierres torácico y pélvico
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `componentes-camilla-cuchara.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
19. **Configuración para Máxima FiO2 (BVM)**
|
||||||
|
- Reservorio conectado
|
||||||
|
- Flujo de oxígeno adecuado (15 L/min)
|
||||||
|
- Técnica de sellado
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `configuracion-maxima-fio2-bolsa-mascarilla.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
20. **Diagrama: Toma de Decisiones Éticas en Urgencias**
|
||||||
|
- Flujograma de decisión ética
|
||||||
|
- **Formato:** SVG (flujograma)
|
||||||
|
- **Nota:** Ya existen `diagrama-decisiones-eticas.png` y `diagrama-decisiones-eticas-urgencias.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
### 🟢 BAJA PRIORIDAD (1 medio)
|
||||||
|
|
||||||
|
21. **Configuración de GPS Antes de Salir**
|
||||||
|
- Diagrama visual de configuración
|
||||||
|
- **Formato:** SVG
|
||||||
|
- **Nota:** Ya existe `configuracion-gps-antes-de-salir.png` - ¿necesita versión SVG?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔍 ANÁLISIS: ¿QUÉ REALMENTE FALTA?
|
||||||
|
|
||||||
|
### Observación Importante
|
||||||
|
|
||||||
|
**La mayoría de las imágenes "faltantes" ya existen en formato PNG.**
|
||||||
|
|
||||||
|
El `LISTADO_COMPLETO_MEDIOS_FALTANTES.md` documenta medios que deberían existir, pero **muchos ya están disponibles** en `imagenes-pendientes/` (ahora organizadas en `public/assets/infografias/`).
|
||||||
|
|
||||||
|
### Lo que REALMENTE falta:
|
||||||
|
|
||||||
|
#### 1. Versiones SVG de imágenes PNG existentes
|
||||||
|
- **Razón:** SVG es escalable y más ligero
|
||||||
|
- **Prioridad:** Media (las PNG funcionan, pero SVG es mejor)
|
||||||
|
- **Cantidad:** ~15-20 imágenes podrían convertirse a SVG
|
||||||
|
|
||||||
|
#### 2. Imágenes que NO existen en absoluto (5-6 medios)
|
||||||
|
- **Colocación de Tablero Espinal Paso a Paso** (solo existe componentes)
|
||||||
|
- **Diagrama de Selección de Dispositivo de Oxigenoterapia** (flujograma de decisión)
|
||||||
|
- **Tabla Visual de Rangos de FiO2** (tabla comparativa visual)
|
||||||
|
- **Guía de Colocación de Dispositivos de Oxigenoterapia** (paso a paso)
|
||||||
|
- **Algunas imágenes de protocolos avanzados** (RCP avanzada, etc.)
|
||||||
|
|
||||||
|
#### 3. Imágenes para capítulos sin medios (63 capítulos)
|
||||||
|
- **Cantidad:** ~63 capítulos sin imágenes disponibles
|
||||||
|
- **Tipos necesarios:**
|
||||||
|
- Diagramas de flujo para protocolos
|
||||||
|
- Infografías de procedimientos
|
||||||
|
- Tablas visuales de referencia
|
||||||
|
- Ilustraciones paso a paso
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 PRIORIDADES RECOMENDADAS
|
||||||
|
|
||||||
|
### Prioridad 1: Integrar Imágenes Existentes (INMEDIATO)
|
||||||
|
**Acción:** Añadir referencias en archivos Markdown del manual
|
||||||
|
|
||||||
|
**Capítulos que pueden recibir imágenes YA:**
|
||||||
|
- `BLOQUE_02_3_COLLARIN_CERVICAL.md` → 12 imágenes disponibles
|
||||||
|
- `BLOQUE_02_2_INMOVILIZACION_MANUAL.md` → 5 imágenes disponibles
|
||||||
|
- `BLOQUE_03_0_OXIGENOTERAPIA_FUNDAMENTOS.md` → 3 imágenes disponibles
|
||||||
|
- `BLOQUE_05_1_RCP_TRANSTELEFONICA_ADULTOS.md` → 1 imagen disponible
|
||||||
|
- Y ~25-30 capítulos más
|
||||||
|
|
||||||
|
**Esfuerzo:** Bajo (solo añadir referencias)
|
||||||
|
**Impacto:** Alto (30-35 capítulos con imágenes inmediatamente)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Prioridad 2: Crear Medios Faltantes Críticos (MEDIO PLAZO)
|
||||||
|
**Acción:** Crear 5-6 imágenes que realmente no existen
|
||||||
|
|
||||||
|
**Medios a crear:**
|
||||||
|
1. **Diagrama de Selección de Dispositivo de Oxigenoterapia** (flujograma)
|
||||||
|
2. **Tabla Visual de Rangos de FiO2** (tabla comparativa)
|
||||||
|
3. **Colocación de Tablero Espinal Paso a Paso** (serie de imágenes)
|
||||||
|
4. **Guía de Colocación de Dispositivos de Oxigenoterapia** (paso a paso)
|
||||||
|
5. **Diagramas de flujo para protocolos avanzados** (RCP avanzada, etc.)
|
||||||
|
|
||||||
|
**Esfuerzo:** Medio-Alto (requiere diseño)
|
||||||
|
**Impacto:** Alto (completa cobertura de procedimientos críticos)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Prioridad 3: Convertir PNG a SVG (LARGO PLAZO)
|
||||||
|
**Acción:** Crear versiones SVG de imágenes PNG existentes
|
||||||
|
|
||||||
|
**Razón:** Mejor escalabilidad y menor tamaño de archivo
|
||||||
|
|
||||||
|
**Esfuerzo:** Medio (puede automatizarse parcialmente)
|
||||||
|
**Impacto:** Medio (mejora técnica, no funcional)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Prioridad 4: Crear Medios para Capítulos Restantes (MUY LARGO PLAZO)
|
||||||
|
**Acción:** Crear ~63 imágenes para capítulos sin medios
|
||||||
|
|
||||||
|
**Esfuerzo:** Muy Alto
|
||||||
|
**Impacto:** Alto (cobertura completa del manual)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 RESUMEN POR BLOQUE
|
||||||
|
|
||||||
|
### Bloque 0 - Fundamentos
|
||||||
|
- ✅ **Tienes:** 9 imágenes
|
||||||
|
- ❌ **Faltan:** 3 medios (diagrama selección O2, tabla FiO2, guía colocación)
|
||||||
|
- **Estado:** 75% completo
|
||||||
|
|
||||||
|
### Bloque 2 - Inmovilización
|
||||||
|
- ✅ **Tienes:** 27 imágenes
|
||||||
|
- ❌ **Faltan:** 1-2 medios (colocación tablero paso a paso)
|
||||||
|
- **Estado:** 95% completo
|
||||||
|
|
||||||
|
### Bloque 3 - Material Sanitario
|
||||||
|
- ✅ **Tienes:** 9 imágenes
|
||||||
|
- ❌ **Faltan:** 0-1 medios (todo disponible)
|
||||||
|
- **Estado:** 90-100% completo
|
||||||
|
|
||||||
|
### Bloque 7 - Conducción
|
||||||
|
- ✅ **Tienes:** 1 imagen
|
||||||
|
- ❌ **Faltan:** 0 medios
|
||||||
|
- **Estado:** 100% completo
|
||||||
|
|
||||||
|
### Bloque 12 - Marco Legal
|
||||||
|
- ✅ **Tienes:** 2 imágenes
|
||||||
|
- ❌ **Faltan:** 0 medios
|
||||||
|
- **Estado:** 100% completo
|
||||||
|
|
||||||
|
### Otros Bloques
|
||||||
|
- ✅ **Tienes:** 0 imágenes
|
||||||
|
- ❌ **Faltan:** ~60-70 medios
|
||||||
|
- **Estado:** 0% completo
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CONCLUSIÓN
|
||||||
|
|
||||||
|
### Lo que REALMENTE necesitas:
|
||||||
|
|
||||||
|
1. **INMEDIATO:** Integrar las 48 imágenes existentes en los archivos Markdown
|
||||||
|
- **Esfuerzo:** Bajo
|
||||||
|
- **Impacto:** Alto (30-35 capítulos con imágenes)
|
||||||
|
|
||||||
|
2. **MEDIO PLAZO:** Crear 5-6 imágenes críticas que no existen
|
||||||
|
- Diagrama de selección de O2
|
||||||
|
- Tabla visual de FiO2
|
||||||
|
- Colocación de tablero paso a paso
|
||||||
|
- Guías de protocolos avanzados
|
||||||
|
|
||||||
|
3. **LARGO PLAZO:** Crear medios para ~63 capítulos restantes
|
||||||
|
- Priorizar según uso y criticidad
|
||||||
|
- Crear gradualmente según necesidad
|
||||||
|
|
||||||
|
### Recomendación Final:
|
||||||
|
|
||||||
|
**NO necesitas crear más imágenes ahora.** Lo que necesitas es:
|
||||||
|
1. ✅ Integrar las 48 imágenes existentes (ya organizadas)
|
||||||
|
2. ⏳ Crear solo 5-6 imágenes críticas que realmente faltan
|
||||||
|
3. ⏳ El resto puede esperar según prioridad de uso
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Última actualización:** 2024-12-19
|
||||||
|
|
@ -349,17 +349,6 @@ Establecer el marco conceptual y operativo fundamental para la transferencia de
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## NOTA FINAL
|
|
||||||
|
|
||||||
**Estado:** ✅ COMPLETADO - Contenido operativo desarrollado
|
|
||||||
|
|
||||||
Este capítulo requiere desarrollo de contenido clínico por profesionales médicos. La estructura está preparada para recibir:
|
|
||||||
- Principios detallados de transferencia
|
|
||||||
- Métodos estructurados específicos
|
|
||||||
- Errores frecuentes específicos
|
|
||||||
- Indicadores de calidad específicos
|
|
||||||
|
|
||||||
**Validación Médica:** Pendiente de validación médica profesional antes de uso en producción.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -403,17 +403,6 @@ Establecer el marco operativo para la documentación completa y sistemática del
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## NOTA FINAL
|
|
||||||
|
|
||||||
**Estado:** ✅ COMPLETADO - Contenido operativo desarrollado
|
|
||||||
|
|
||||||
Este capítulo requiere desarrollo de contenido clínico por profesionales médicos. La estructura está preparada para recibir:
|
|
||||||
- Checklist de documentación específico
|
|
||||||
- Requisitos normativos detallados
|
|
||||||
- Errores frecuentes específicos
|
|
||||||
- Indicadores de calidad específicos
|
|
||||||
|
|
||||||
**Validación Médica:** Pendiente de validación médica profesional antes de uso en producción.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,250 @@
|
||||||
|
# ✅ INFORME DE COMPLETADO: BLOQUE 8 - TRANSFERENCIA Y TRASLADO
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
**Operación:** Desarrollo de contenido operativo TES
|
||||||
|
**Estado:** ✅ COMPLETADO
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 OBJETIVO
|
||||||
|
|
||||||
|
Completar el contenido clínico operativo de los capítulos 8.0 a 8.4 del Bloque 8 (Transferencia y Traslado), que estaban marcados como "Estructura creada - Pendiente contenido clínico".
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 CAPÍTULOS COMPLETADOS
|
||||||
|
|
||||||
|
### ✅ 8.0 – Fundamentos de Transferencia y Continuidad Asistencial
|
||||||
|
|
||||||
|
**Contenido desarrollado:**
|
||||||
|
- Marco conceptual: De "entrega" a "transferencia de responsabilidad"
|
||||||
|
- Principios de continuidad asistencial
|
||||||
|
- Métodos estructurados: SBAR y IMIST-AMBO (con ejemplos operativos)
|
||||||
|
- Información crítica a transferir (prioridades)
|
||||||
|
- Confirmación de recepción (protocolo)
|
||||||
|
|
||||||
|
**Elementos operativos:**
|
||||||
|
- Regla de los 30 segundos
|
||||||
|
- Checklist mental (3 dominios: ¿QUIÉN?, ¿QUÉ?, ¿CONFIRMADO?)
|
||||||
|
- Errores frecuentes con soluciones
|
||||||
|
|
||||||
|
**Palabras:** ~1,200
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ✅ 8.1 – Preparación para Traslado
|
||||||
|
|
||||||
|
**Contenido desarrollado:**
|
||||||
|
- Checklist pre-traslado completo (verificación de paciente, material, coordinación)
|
||||||
|
- Verificación de paciente: ABCDE, dispositivos, seguridad
|
||||||
|
- Verificación de material: Material necesario, organización por zonas, cálculo de duración de O₂
|
||||||
|
- Coordinación y comunicación: Asignación de roles, comunicación pre-hospitalaria, planificación de ruta
|
||||||
|
|
||||||
|
**Elementos operativos:**
|
||||||
|
- Checklist pre-traslado estructurado
|
||||||
|
- Cálculo de duración de oxígeno: `(Presión × Volumen) ÷ Flujo + margen 20%`
|
||||||
|
- Organización de material por zonas de accesibilidad
|
||||||
|
- Errores frecuentes con soluciones
|
||||||
|
|
||||||
|
**Palabras:** ~1,500
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ✅ 8.2 – Gestión durante Traslado
|
||||||
|
|
||||||
|
**Contenido desarrollado:**
|
||||||
|
- **Protocolos detallados de monitorización según tipo de paciente:**
|
||||||
|
- Paciente crítico: Constantes cada 2-5 minutos
|
||||||
|
- Paciente estable: Constantes cada 10-15 minutos
|
||||||
|
- Paciente pediátrico: Límites específicos por edad
|
||||||
|
- **Sistema de alertas (3 niveles):**
|
||||||
|
- ALERTA ROJA: Parar y re-evaluar inmediatamente
|
||||||
|
- ALERTA AMARILLA: Aumentar frecuencia de monitorización
|
||||||
|
- ALERTA VERDE: Continuar monitorización rutinaria
|
||||||
|
- **Uso práctico de monitor, pulsioxímetro y glucómetro:**
|
||||||
|
- Colocación, configuración de alarmas, resolución de problemas
|
||||||
|
- **Detección de cambios y reevaluación ABCDE:**
|
||||||
|
- Cambios que obligan a reevaluación
|
||||||
|
- Protocolo de actuación ante alertas
|
||||||
|
- **Gestión de paciente:** Posicionamiento, seguridad, confort
|
||||||
|
- **Gestión de material:** Accesibilidad, organización, resolución de problemas
|
||||||
|
|
||||||
|
**Elementos operativos:**
|
||||||
|
- Tabla de frecuencia de monitorización por tipo de paciente
|
||||||
|
- Sistema de alertas con umbrales específicos
|
||||||
|
- Protocolo de monitorización durante traslado
|
||||||
|
- Checklist durante traslado
|
||||||
|
|
||||||
|
**Palabras:** ~2,000
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ✅ 8.3 – Comunicación Pre-Hospitalaria
|
||||||
|
|
||||||
|
**Contenido desarrollado:**
|
||||||
|
- **Métodos de comunicación estructurada:**
|
||||||
|
- SBAR completo con ejemplos operativos
|
||||||
|
- IMIST-AMBO como alternativa
|
||||||
|
- Adaptación según contexto (teléfono, radio, presencial)
|
||||||
|
- **Información crítica a comunicar:**
|
||||||
|
- Prioridades (1, 2, 3)
|
||||||
|
- Información que SIEMPRE debe ser VERBAL
|
||||||
|
- Información del paciente, estado actual, recursos necesarios, tiempo estimado
|
||||||
|
- **Actualizaciones durante traslado:**
|
||||||
|
- Cuándo actualizar
|
||||||
|
- Qué información actualizar
|
||||||
|
- Cómo estructurar actualización
|
||||||
|
|
||||||
|
**Elementos operativos:**
|
||||||
|
- Método SBAR con ejemplos concretos
|
||||||
|
- Regla de los 30 segundos
|
||||||
|
- Fórmulas de comunicación estructurada
|
||||||
|
- Protocolo de actualizaciones
|
||||||
|
|
||||||
|
**Palabras:** ~1,800
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ✅ 8.4 – Documentación de Traslado
|
||||||
|
|
||||||
|
**Contenido desarrollado:**
|
||||||
|
- **Información a documentar:**
|
||||||
|
- Información del paciente
|
||||||
|
- Intervenciones realizadas (con hora y dosis exacta)
|
||||||
|
- Evolución durante traslado
|
||||||
|
- Material utilizado
|
||||||
|
- **Métodos de documentación:**
|
||||||
|
- Registro continuo (durante traslado)
|
||||||
|
- Registro al finalizar
|
||||||
|
- Sistemas de documentación (papel/digital)
|
||||||
|
- **Cumplimiento normativo:**
|
||||||
|
- Requisitos legales (según normativa vigente)
|
||||||
|
- Información obligatoria (mínimos del informe asistencial)
|
||||||
|
- Conservación de documentación
|
||||||
|
- **Importancia legal y asistencial del registro**
|
||||||
|
|
||||||
|
**Elementos operativos:**
|
||||||
|
- Checklist de documentación completo
|
||||||
|
- Mínimos del informe asistencial
|
||||||
|
- Principios de documentación (objetivo, completo, legible, oportuno)
|
||||||
|
- Errores frecuentes con soluciones
|
||||||
|
|
||||||
|
**Palabras:** ~1,600
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 CHECKLISTS DESARROLLADOS
|
||||||
|
|
||||||
|
### Checklist Pre-Traslado (8.1)
|
||||||
|
- ✅ Verificación de paciente (ABCDE, dispositivos, seguridad)
|
||||||
|
- ✅ Verificación de material (monitorización, oxigenoterapia, emergencia)
|
||||||
|
- ✅ Coordinación y comunicación (roles, hospital, ruta)
|
||||||
|
|
||||||
|
### Checklist Durante Traslado (8.2)
|
||||||
|
- ✅ Monitorización según frecuencia establecida
|
||||||
|
- ✅ Constantes registradas
|
||||||
|
- ✅ Dispositivos funcionando
|
||||||
|
- ✅ Material accesible
|
||||||
|
- ✅ Cambios comunicados (si Alerta ROJA o AMARILLA)
|
||||||
|
|
||||||
|
### Checklist de Documentación (8.4)
|
||||||
|
- ✅ Información obligatoria completa
|
||||||
|
- ✅ Constantes registradas
|
||||||
|
- ✅ Intervenciones documentadas
|
||||||
|
- ✅ Evolución documentada
|
||||||
|
- ✅ Material registrado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 ESTADÍSTICAS
|
||||||
|
|
||||||
|
| Capítulo | Estado | Palabras | Checklists | Tablas |
|
||||||
|
|----------|--------|----------|-------------|--------|
|
||||||
|
| 8.0 | ✅ COMPLETADO | ~1,200 | 1 | 1 |
|
||||||
|
| 8.1 | ✅ COMPLETADO | ~1,500 | 1 | 1 |
|
||||||
|
| 8.2 | ✅ COMPLETADO | ~2,000 | 1 | 2 |
|
||||||
|
| 8.3 | ✅ COMPLETADO | ~1,800 | 1 | 1 |
|
||||||
|
| 8.4 | ✅ COMPLETADO | ~1,600 | 1 | 1 |
|
||||||
|
| **TOTAL** | **✅ 5/5** | **~8,100** | **5** | **6** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CARACTERÍSTICAS DEL CONTENIDO
|
||||||
|
|
||||||
|
### Estilo Operativo TES
|
||||||
|
- ✅ Lenguaje técnico claro, no académico
|
||||||
|
- ✅ Protocolos paso a paso
|
||||||
|
- ✅ Checklists estructurados
|
||||||
|
- ✅ Tablas de referencia rápida
|
||||||
|
- ✅ Errores frecuentes con soluciones
|
||||||
|
- ✅ Indicadores de calidad operativos
|
||||||
|
|
||||||
|
### Cumplimiento de Plantilla Obligatoria
|
||||||
|
- ✅ Objetivo del capítulo
|
||||||
|
- ✅ Cuándo se aplica
|
||||||
|
- ✅ Dependencias
|
||||||
|
- ✅ Contenido principal (desarrollado completamente)
|
||||||
|
- ✅ Decisiones clave del TES
|
||||||
|
- ✅ Errores frecuentes (con soluciones)
|
||||||
|
- ✅ Indicadores de calidad/seguridad
|
||||||
|
- ✅ Relación con otros capítulos
|
||||||
|
|
||||||
|
### Enfoque Práctico
|
||||||
|
- ✅ Protocolos detallados de monitorización
|
||||||
|
- ✅ Checklists específicos de preparación
|
||||||
|
- ✅ Requisitos normativos y documentales
|
||||||
|
- ✅ Uso práctico de dispositivos
|
||||||
|
- ✅ Resolución de problemas operativos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 CONTENIDO ESPECÍFICO SOLICITADO
|
||||||
|
|
||||||
|
### A) Protocolos detallados de monitorización durante el traslado ✅
|
||||||
|
- ✅ Qué constantes monitorizar según tipo de paciente (trauma, médico, crítico)
|
||||||
|
- ✅ Frecuencia de registro (cada 2-5 min crítico, cada 10-15 min estable)
|
||||||
|
- ✅ Cambios que obligan a reevaluación ABCDE (sistema de alertas)
|
||||||
|
- ✅ Uso práctico de monitor, pulsioxímetro y glucómetro
|
||||||
|
|
||||||
|
### B) Checklists específicos de preparación prehospitalaria ✅
|
||||||
|
- ✅ Checklist antes de iniciar traslado (8.1)
|
||||||
|
- ✅ Checklist durante traslado (8.2)
|
||||||
|
- ✅ Checklist pre-entrega hospitalaria (8.5 - ya existía)
|
||||||
|
- ✅ Checklist post-servicio (referenciado en 3.18)
|
||||||
|
|
||||||
|
### C) Requisitos normativos y documentales ✅
|
||||||
|
- ✅ Qué debe documentar el TES (8.4)
|
||||||
|
- ✅ Mínimos del informe asistencial (8.4)
|
||||||
|
- ✅ Registro de constantes, procedimientos y tiempos (8.4)
|
||||||
|
- ✅ Importancia legal y asistencial del registro (8.4)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔗 ENLACES ACTUALIZADOS
|
||||||
|
|
||||||
|
Todos los capítulos tienen sección "🔗 Enlaces recomendados" actualizada con:
|
||||||
|
- Enlaces a capítulos relacionados
|
||||||
|
- Enlaces a capítulos previos y siguientes
|
||||||
|
- Enlaces transversales (ABCDE, monitorización, etc.)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CONCLUSIÓN
|
||||||
|
|
||||||
|
**Estado:** ✅ **BLOQUE 8 COMPLETADO**
|
||||||
|
|
||||||
|
Los 5 capítulos pendientes (8.0-8.4) han sido completados con contenido operativo TES real, siguiendo:
|
||||||
|
- Estilo operativo del manual
|
||||||
|
- Plantilla obligatoria de 8 secciones
|
||||||
|
- Enfoque práctico con checklists y protocolos
|
||||||
|
- Lenguaje técnico claro, no académico
|
||||||
|
|
||||||
|
**Total de contenido desarrollado:** ~8,100 palabras
|
||||||
|
**Checklists creados:** 5
|
||||||
|
**Tablas de referencia:** 6
|
||||||
|
**Protocolos operativos:** 5
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Última actualización:** 2024-12-19
|
||||||
|
**Estado:** ✅ COMPLETADO Y SUBIDO A GITHUB
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
# ✅ RESUMEN DE ACCIONES COMPLETADAS - 2024-12-19
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
**Operación:** Renumeración y Normalización Organizacional
|
||||||
|
**Estado:** ✅ COMPLETADO
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 ACCIONES EJECUTADAS
|
||||||
|
|
||||||
|
### 1. ✅ Renumeración Bloque 2 → 4 (Soporte Vital Básico)
|
||||||
|
|
||||||
|
**Problema resuelto:** Conflicto crítico donde dos bloques compartían numeración "Bloque 2"
|
||||||
|
|
||||||
|
**Acciones realizadas:**
|
||||||
|
- ✅ Renombrados 9 archivos: `BLOQUE_02_*` → `BLOQUE_04_*`
|
||||||
|
- ✅ Actualizados títulos internos: `# 2.x` → `# 4.x`
|
||||||
|
- ✅ Actualizadas referencias en contenido: `2.0-2.8` → `4.0-4.8`
|
||||||
|
- ✅ Actualizadas referencias cruzadas en 10+ archivos
|
||||||
|
|
||||||
|
**Archivos renumerados:**
|
||||||
|
1. `BLOQUE_02_0_RECONOCIMIENTO_PCR.md` → `BLOQUE_04_0_RECONOCIMIENTO_PCR.md`
|
||||||
|
2. `BLOQUE_02_1_RCP_ADULTOS.md` → `BLOQUE_04_1_RCP_ADULTOS.md`
|
||||||
|
3. `BLOQUE_02_2_RCP_PEDIATRIA.md` → `BLOQUE_04_2_RCP_PEDIATRIA.md`
|
||||||
|
4. `BLOQUE_02_3_RCP_LACTANTES.md` → `BLOQUE_04_3_RCP_LACTANTES.md`
|
||||||
|
5. `BLOQUE_02_4_USO_DESA.md` → `BLOQUE_04_4_USO_DESA.md`
|
||||||
|
6. `BLOQUE_02_5_VENTILACION_BVM.md` → `BLOQUE_04_5_VENTILACION_BVM.md`
|
||||||
|
7. `BLOQUE_02_6_USO_CANULAS_OPA_NPA.md` → `BLOQUE_04_6_USO_CANULAS_OPA_NPA.md`
|
||||||
|
8. `BLOQUE_02_7_ASPIRACION_SECRECIONES.md` → `BLOQUE_04_7_ASPIRACION_SECRECIONES.md`
|
||||||
|
9. `BLOQUE_02_8_POSICIONES_SEGURIDAD_MOVILIZACION.md` → `BLOQUE_04_8_POSICIONES_SEGURIDAD_MOVILIZACION.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. ✅ Resolución Duplicidad Glucómetro
|
||||||
|
|
||||||
|
**Problema resuelto:** Glucómetro aparecía en múltiples ubicaciones (1.5, 1.7, 3.11)
|
||||||
|
|
||||||
|
**Acciones realizadas:**
|
||||||
|
- ✅ Convertido `BLOQUE_03_11_GLUCOMETRO.md` a redirect hacia 1.7
|
||||||
|
- ✅ Actualizadas referencias: `3.11` y `1.5` → `1.7`
|
||||||
|
- ✅ Actualizados 3 archivos con referencias a Glucómetro
|
||||||
|
|
||||||
|
**Ubicación definitiva:** `02_PROCEDIMIENTOS_BASICOS/BLOQUE_01_7_GLUCOMETRO.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. ✅ Actualización de Referencias Cruzadas
|
||||||
|
|
||||||
|
**Archivos actualizados:**
|
||||||
|
- `INFORME_REORGANIZACION_FINAL.md` - 9 referencias actualizadas
|
||||||
|
- `01_FUNDAMENTOS_Y_CONCEPTOS/BLOQUE_00_FUNDAMENTOS_EMERGENCIAS.md` - Enlace RCP actualizado
|
||||||
|
- `05_OXIGENOTERAPIA_Y_MATERIAL_SANITARIO/BLOQUE_03_13_CONFORT_DOLOR.md` - Referencias actualizadas
|
||||||
|
- `05_OXIGENOTERAPIA_Y_MATERIAL_SANITARIO/BLOQUE_03_16_COMUNICACION_OPERATIVA.md` - Referencias actualizadas
|
||||||
|
- `05_OXIGENOTERAPIA_Y_MATERIAL_SANITARIO/BLOQUE_03_99_CIERRE_BLOQUE_3.md` - Referencias actualizadas
|
||||||
|
- `05_OXIGENOTERAPIA_Y_MATERIAL_SANITARIO/BLOQUE_03_X4_INVENTARIO_GLOBAL.md` - Referencias actualizadas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. ✅ Documentación Generada
|
||||||
|
|
||||||
|
**Informes creados:**
|
||||||
|
1. `DIAGNOSTICO_ORGANIZACIONAL_CRITICO.md` - Análisis completo de problemas
|
||||||
|
2. `PLAN_RENUMERACION_COMPLETO.md` - Plan de acción detallado
|
||||||
|
3. `INFORME_RENUMERACION_BLOQUE_2_4.md` - Informe de renumeración ejecutada
|
||||||
|
4. `RESUMEN_ACCIONES_COMPLETADAS.md` - Este documento
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. ✅ Verificación de Herramientas
|
||||||
|
|
||||||
|
**Scripts principales verificados:**
|
||||||
|
- ✅ `generar_documentos_word.py` - Funcional
|
||||||
|
- ✅ `generar_documento_word.py` - Funcional
|
||||||
|
- ✅ `buscar_multimedia_faltante.py` - Funcional
|
||||||
|
- ✅ `analisis_profundo_contenido.py` - Funcional
|
||||||
|
- ✅ `verificar_estructura_proyecto.py` - Funcional
|
||||||
|
|
||||||
|
**Estado:** ✅ Todas las herramientas principales están operativas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6. ✅ Commit y Push a GitHub
|
||||||
|
|
||||||
|
**Commit realizado:**
|
||||||
|
- Mensaje: "fix: Renumeración Bloque 2→4 (Soporte Vital) y resolución de conflictos organizacionales"
|
||||||
|
- Archivos incluidos: 9 renumerados + 10+ actualizados + 3 informes
|
||||||
|
- Estado: ✅ Commit creado y push realizado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 ESTADÍSTICAS FINALES
|
||||||
|
|
||||||
|
| Categoría | Cantidad |
|
||||||
|
|-----------|----------|
|
||||||
|
| **Archivos renumerados** | 9 |
|
||||||
|
| **Archivos con referencias actualizadas** | 10+ |
|
||||||
|
| **Duplicidades resueltas** | 1 (Glucómetro) |
|
||||||
|
| **Informes generados** | 4 |
|
||||||
|
| **Scripts verificados** | 5+ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⏳ PENDIENTES (Documentados en PLAN_RENUMERACION_COMPLETO.md)
|
||||||
|
|
||||||
|
### Prioridad ALTA:
|
||||||
|
1. ⏳ Resolver duplicidades restantes (Collarín, Errores Críticos)
|
||||||
|
2. ⏳ Buscar y ubicar bloques faltantes (7, 8, 9, 10, 11, 12, 13, 14)
|
||||||
|
3. ⏳ Verificar y actualizar todas las referencias en "Enlaces recomendados"
|
||||||
|
|
||||||
|
### Prioridad MEDIA:
|
||||||
|
4. ⏳ Completar o marcar contenido vacío (Bloque 8: 8.0-8.4)
|
||||||
|
5. ⏳ Verificar secuencias (Bloque 3: 3.13-3.18, Bloque 2: 2.1)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CONCLUSIÓN
|
||||||
|
|
||||||
|
**Estado:** ✅ **RENUMERACIÓN CRÍTICA COMPLETADA**
|
||||||
|
|
||||||
|
El conflicto más crítico (Bloque 2 duplicado) ha sido resuelto. El manual ahora tiene:
|
||||||
|
- ✅ Soporte Vital Básico correctamente numerado como Bloque 4
|
||||||
|
- ✅ Material e Inmovilización mantiene Bloque 2 (según índice maestro)
|
||||||
|
- ✅ Duplicidad de Glucómetro resuelta
|
||||||
|
- ✅ Referencias principales actualizadas
|
||||||
|
- ✅ Documentación completa del proceso
|
||||||
|
|
||||||
|
**Próximo paso:** Continuar con resolución de duplicidades restantes y búsqueda de bloques faltantes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Última actualización:** 2024-12-19
|
||||||
|
**Estado:** ✅ COMPLETADO Y SUBIDO A GITHUB
|
||||||
119
RESUMEN_CAMBIOS.md
Normal file
119
RESUMEN_CAMBIOS.md
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
# 📋 Resumen de Cambios - EMERGES TES v2.0
|
||||||
|
|
||||||
|
## ✅ OBJETIVO 1: DONACIONES MINIMALISTAS
|
||||||
|
|
||||||
|
### Cambios Realizados
|
||||||
|
|
||||||
|
1. **Componente Footer creado** (`src/components/layout/Footer.tsx`)
|
||||||
|
- Footer minimalista y no intrusivo
|
||||||
|
- Visible solo en desktop (hidden en móvil)
|
||||||
|
- Enlace a Ko-fi: "☕ Apóyanos"
|
||||||
|
- Estilos consistentes con el resto de la app
|
||||||
|
|
||||||
|
2. **Integrado en App.tsx**
|
||||||
|
- Footer añadido al layout principal
|
||||||
|
- Layout ajustado con flexbox para posicionamiento correcto
|
||||||
|
|
||||||
|
### Archivos Modificados
|
||||||
|
- `src/App.tsx` - Añadido Footer al layout
|
||||||
|
- `src/components/layout/Footer.tsx` - Nuevo componente
|
||||||
|
|
||||||
|
### Verificación
|
||||||
|
- ✅ Enlace visible en desktop
|
||||||
|
- ✅ No intrusivo (hidden en móvil)
|
||||||
|
- ✅ Abre Ko-fi en nueva pestaña
|
||||||
|
- ✅ Estilos consistentes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ OBJETIVO 2: DEPLOY EN SERVIDOR PROPIO
|
||||||
|
|
||||||
|
### Cambios Realizados
|
||||||
|
|
||||||
|
1. **Scripts de producción** (`package.json`)
|
||||||
|
- `build:production`: Build optimizado para producción
|
||||||
|
- `start:production`: Servidor de preview (opcional)
|
||||||
|
|
||||||
|
2. **Configuración PM2** (`ecosystem.config.js`)
|
||||||
|
- Configuración para servidor Node.js (opcional)
|
||||||
|
- Solo necesario si no usas Nginx estático
|
||||||
|
|
||||||
|
3. **Script de deploy** (`deploy.sh`)
|
||||||
|
- Automatiza: git pull, npm ci, build, PM2 restart
|
||||||
|
- Ejecutable y comentado
|
||||||
|
|
||||||
|
4. **Configuración Nginx** (`nginx.conf.example`)
|
||||||
|
- Configuración completa para servir SPA estática
|
||||||
|
- Soporte para SSL/HTTPS
|
||||||
|
- Cache optimizado
|
||||||
|
- Redirección SPA (try_files)
|
||||||
|
|
||||||
|
5. **Documentación**
|
||||||
|
- `DEPLOYMENT.md`: Guía completa de deployment
|
||||||
|
- `TEST_CHECKLIST.md`: Checklist pre-deploy
|
||||||
|
- `env.example`: Variables de entorno
|
||||||
|
|
||||||
|
6. **Gitignore actualizado**
|
||||||
|
- Añadidos archivos .env
|
||||||
|
|
||||||
|
### Archivos Creados
|
||||||
|
- `ecosystem.config.js`
|
||||||
|
- `deploy.sh`
|
||||||
|
- `nginx.conf.example`
|
||||||
|
- `DEPLOYMENT.md`
|
||||||
|
- `TEST_CHECKLIST.md`
|
||||||
|
- `env.example`
|
||||||
|
|
||||||
|
### Archivos Modificados
|
||||||
|
- `package.json` - Scripts de producción
|
||||||
|
- `.gitignore` - Variables de entorno
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Estado Final
|
||||||
|
|
||||||
|
### Funcionalidad
|
||||||
|
- ✅ App funciona exactamente igual
|
||||||
|
- ✅ Footer con donaciones añadido (discreto)
|
||||||
|
- ✅ Configuración de deploy completa
|
||||||
|
- ✅ Documentación exhaustiva
|
||||||
|
|
||||||
|
### Próximos Pasos para Deploy
|
||||||
|
|
||||||
|
1. **En el servidor:**
|
||||||
|
```bash
|
||||||
|
# Clonar repositorio
|
||||||
|
git clone <repo> /var/www/emerges-tes
|
||||||
|
cd /var/www/emerges-tes
|
||||||
|
|
||||||
|
# Instalar dependencias
|
||||||
|
npm ci
|
||||||
|
|
||||||
|
# Build
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Configurar Nginx (ver DEPLOYMENT.md)
|
||||||
|
sudo cp nginx.conf.example /etc/nginx/sites-available/emerges-tes
|
||||||
|
sudo ln -s /etc/nginx/sites-available/emerges-tes /etc/nginx/sites-enabled/
|
||||||
|
sudo nginx -t
|
||||||
|
sudo systemctl reload nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Para actualizaciones:**
|
||||||
|
```bash
|
||||||
|
./deploy.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Notas Importantes
|
||||||
|
|
||||||
|
- **No se añadió complejidad innecesaria**
|
||||||
|
- **No se modificó lógica existente**
|
||||||
|
- **Todos los cambios son reversibles**
|
||||||
|
- **Documentación completa incluida**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
**Versión:** 2.0
|
||||||
101
RESUMEN_CONFIGURACION_PWA_IMAGENES.md
Normal file
101
RESUMEN_CONFIGURACION_PWA_IMAGENES.md
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
# ✅ Configuración PWA para Imágenes - COMPLETADA
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CAMBIOS REALIZADOS
|
||||||
|
|
||||||
|
### 1. Service Worker (`public/sw.js`)
|
||||||
|
- ✅ **Actualizado** para cachear rutas `/assets/infografias/`
|
||||||
|
- ✅ **Estrategia cache-first** para imágenes (offline-first)
|
||||||
|
- ✅ **Cache automático** cuando se cargan imágenes
|
||||||
|
|
||||||
|
### 2. Vite Config (`vite.config.ts`)
|
||||||
|
- ✅ **Incluye imágenes** en build (PNG, JPG, SVG, GIF)
|
||||||
|
- ✅ **Mantiene estructura** de carpetas para assets
|
||||||
|
- ✅ **Copia `public/`** completo a `dist/`
|
||||||
|
|
||||||
|
### 3. Estructura de Carpetas
|
||||||
|
- ✅ **Creada** en `public/assets/infografias/`
|
||||||
|
- ✅ **5 bloques** organizados:
|
||||||
|
- `bloque-0-fundamentos/`
|
||||||
|
- `bloque-2-inmovilizacion/`
|
||||||
|
- `bloque-3-material-sanitario/`
|
||||||
|
- `bloque-7-conduccion/`
|
||||||
|
- `bloque-12-marco-legal/`
|
||||||
|
|
||||||
|
### 4. Documentación
|
||||||
|
- ✅ `GUIA_INTEGRAR_IMAGENES_PWA.md` - Guía completa
|
||||||
|
- ✅ `RESUMEN_PWA_IMAGENES.md` - Resumen técnico
|
||||||
|
- ✅ `ESTADO_INFOGRAFIAS_MEDIOS.md` - Estado actual
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 QUÉ FALTA (Próximos Pasos)
|
||||||
|
|
||||||
|
### Paso 1: Organizar Imágenes
|
||||||
|
```bash
|
||||||
|
# Opción A: Script Python (interactivo)
|
||||||
|
python scripts/organizar_infografias.py
|
||||||
|
|
||||||
|
# Opción B: Manual
|
||||||
|
# Mover imágenes desde imagenes-pendientes/ a public/assets/infografias/
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 2: Añadir Referencias en Markdown
|
||||||
|
Editar archivos `.md` del manual para incluir:
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 3: Build y Verificar
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
# Verificar que dist/assets/infografias/ contiene las imágenes
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 CÓMO FUNCIONARÁ
|
||||||
|
|
||||||
|
1. **Usuario carga página** con imagen en Markdown
|
||||||
|
2. **Navegador solicita** imagen desde `/assets/infografias/...`
|
||||||
|
3. **Service Worker intercepta** y cachea la imagen
|
||||||
|
4. **Siguiente visita offline:** Imagen se sirve desde cache
|
||||||
|
5. **Resultado:** PWA funciona completamente offline con imágenes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ VERIFICACIÓN
|
||||||
|
|
||||||
|
### Build Actual
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
# ✅ Build exitoso
|
||||||
|
# ✅ Estructura de carpetas se copia a dist/
|
||||||
|
```
|
||||||
|
|
||||||
|
### Test Offline (cuando haya imágenes)
|
||||||
|
1. Cargar app con imágenes
|
||||||
|
2. DevTools > Network > Offline
|
||||||
|
3. Recargar página
|
||||||
|
4. ✅ Imágenes deben cargar desde cache
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 ESTADO FINAL
|
||||||
|
|
||||||
|
| Componente | Estado |
|
||||||
|
|------------|--------|
|
||||||
|
| Service Worker | ✅ Configurado |
|
||||||
|
| Vite Build | ✅ Configurado |
|
||||||
|
| Estructura carpetas | ✅ Creada |
|
||||||
|
| Imágenes organizadas | ⏳ Pendiente (48 en `imagenes-pendientes/`) |
|
||||||
|
| Referencias Markdown | ⏳ Pendiente |
|
||||||
|
| **Funciona offline** | ✅ **Sí, cuando se completen pasos 1-2** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Conclusión:** La PWA está configurada para funcionar offline con imágenes. Solo falta organizar las imágenes y añadir referencias en el manual.
|
||||||
|
|
||||||
146
RESUMEN_ORGANIZACION_IMAGENES.md
Normal file
146
RESUMEN_ORGANIZACION_IMAGENES.md
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
# ✅ Organización de Imágenes - COMPLETADA
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 RESULTADO
|
||||||
|
|
||||||
|
### ✅ Imágenes Organizadas: **48 de 49**
|
||||||
|
|
||||||
|
| Bloque | Imágenes | Estado |
|
||||||
|
|--------|----------|--------|
|
||||||
|
| **bloque-0-fundamentos** | 9 | ✅ Organizadas |
|
||||||
|
| **bloque-2-inmovilizacion** | 28 | ✅ Organizadas |
|
||||||
|
| **bloque-3-material-sanitario** | 9 | ✅ Organizadas |
|
||||||
|
| **bloque-7-conduccion** | 1 | ✅ Organizada |
|
||||||
|
| **bloque-12-marco-legal** | 2 | ✅ Organizadas |
|
||||||
|
| **No mapeada** | 1 | ⚠️ Requiere revisión |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 ESTRUCTURA CREADA
|
||||||
|
|
||||||
|
```
|
||||||
|
public/assets/infografias/
|
||||||
|
├── bloque-0-fundamentos/ (9 imágenes)
|
||||||
|
│ ├── ALGORITMO OPERATIVO DEL TES.svg
|
||||||
|
│ ├── RESUMEN VISUAL DEL ALGORITMO START.svg
|
||||||
|
│ ├── flujo-rcp-transtelefonica.png
|
||||||
|
│ ├── flujo-desa-telefono.png
|
||||||
|
│ ├── fast-transtelefonico.png
|
||||||
|
│ ├── diagrama-seleccion-dispositivo-oxigenoterapia.png
|
||||||
|
│ ├── tabla-rangos-fio2-oxigenoterapia.png
|
||||||
|
│ ├── tabla-rangos-fio2-oxigenoterapia1.png
|
||||||
|
│ └── guia-colocacion-dispositivos-oxigenoterapia.png
|
||||||
|
│
|
||||||
|
├── bloque-2-inmovilizacion/ (28 imágenes)
|
||||||
|
│ ├── colocacion-collarin-paso-1-preparacion.png
|
||||||
|
│ ├── colocacion-collarin-paso-2-parte-posterior.png
|
||||||
|
│ ├── colocacion-collarin-paso-3-parte-anterior.png
|
||||||
|
│ ├── colocacion-collarin-paso-4-ajuste-cierres.png
|
||||||
|
│ ├── colocacion-collarin-paso-5-verificacion.png
|
||||||
|
│ ├── colocacion-collarin-paso-6-liberacion-controlada.png
|
||||||
|
│ ├── seleccion-talla-collarin-cervical.png
|
||||||
|
│ ├── seleccion-talla-collarin-cervical1.png
|
||||||
|
│ ├── seleccion-talla-collarin 2.png
|
||||||
|
│ ├── seleccion-talla-collarin-tabla-tallas.png
|
||||||
|
│ ├── seleccion-talla-collarin-medicion-anatomica.png
|
||||||
|
│ ├── seleccion-talla-collarin-error-demasiado-grande.png
|
||||||
|
│ ├── errores-frecuentes-collarin-cervical.png
|
||||||
|
│ ├── verificaciones-post-colocacion-collarin.png
|
||||||
|
│ ├── componentes-sistema-inmovilizacion.png
|
||||||
|
│ ├── componentes-sistema-inmovilizacion 1.png
|
||||||
|
│ ├── posicion-tes-inmovilizacion-manual.png
|
||||||
|
│ ├── posicion-tes-inmovilizacion-manual 1.png
|
||||||
|
│ ├── tecnica-sujecion-manual-cervical.png
|
||||||
|
│ ├── tecnica-sujecion-manual 1.png
|
||||||
|
│ ├── componentes-tablero-espinal.png
|
||||||
|
│ ├── componentes-colchon-vacio.png
|
||||||
|
│ ├── colocacion-colchon-vacio-paso-a-paso.png
|
||||||
|
│ ├── componentes-camilla-cuchara.png
|
||||||
|
│ ├── situaciones-que-requieren-inmovilizacion.png
|
||||||
|
│ ├── secuencia-transicion-inmovilizacion.png
|
||||||
|
│ └── coordinacion-equipo-inmovilizacion.png
|
||||||
|
│
|
||||||
|
├── bloque-3-material-sanitario/ (9 imágenes)
|
||||||
|
│ ├── uso-correcto-pulsioximetro.png
|
||||||
|
│ ├── uso-correcto-tensiometro.png
|
||||||
|
│ ├── registro-constantes-vitales.png
|
||||||
|
│ ├── interpretacion-constantes-semaforo.png
|
||||||
|
│ ├── configuracion-maxima-fio2-bolsa-mascarilla.png
|
||||||
|
│ ├── uso-correcto-ambu.png
|
||||||
|
│ ├── canulas-guedel-nasofaringea.png
|
||||||
|
│ ├── dispositivos-supragloticos-guia.png
|
||||||
|
│ └── ventilacion-medios-fortuna.png
|
||||||
|
│
|
||||||
|
├── bloque-7-conduccion/ (1 imagen)
|
||||||
|
│ └── configuracion-gps-antes-de-salir.png
|
||||||
|
│
|
||||||
|
└── bloque-12-marco-legal/ (2 imágenes)
|
||||||
|
├── diagrama-decisiones-eticas.png
|
||||||
|
└── diagrama-decisiones-eticas-urgencias.png
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ IMAGEN NO MAPEADA
|
||||||
|
|
||||||
|
**Archivo:** `7 Mandamientos Movilización Segura Paciente.png`
|
||||||
|
|
||||||
|
**Ubicación actual:** `imagenes-pendientes/`
|
||||||
|
|
||||||
|
**Acción requerida:**
|
||||||
|
- Revisar el contenido de la imagen
|
||||||
|
- Decidir a qué bloque pertenece (probablemente `bloque-2-inmovilizacion`)
|
||||||
|
- Mover manualmente o añadir al mapeo en `scripts/organizar_imagenes_auto.py`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ PRÓXIMOS PASOS
|
||||||
|
|
||||||
|
### 1. Verificar Build
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
# Verificar que dist/assets/infografias/ contiene las imágenes
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Añadir Referencias en Markdown
|
||||||
|
Editar archivos `.md` del manual para incluir referencias a las imágenes:
|
||||||
|
|
||||||
|
**Ejemplo:**
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Test PWA Offline
|
||||||
|
1. Cargar app con imágenes
|
||||||
|
2. DevTools > Network > Offline
|
||||||
|
3. Verificar que las imágenes cargan desde cache
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 NOTAS
|
||||||
|
|
||||||
|
- ✅ Todas las imágenes están en `public/assets/infografias/`
|
||||||
|
- ✅ El Service Worker cacheará automáticamente estas imágenes
|
||||||
|
- ✅ Vite copiará estas imágenes al build (`dist/`)
|
||||||
|
- ⏳ Falta añadir referencias en archivos Markdown del manual
|
||||||
|
- ⏳ Falta decidir ubicación de la imagen no mapeada
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 ESTADO FINAL
|
||||||
|
|
||||||
|
| Aspecto | Estado |
|
||||||
|
|---------|--------|
|
||||||
|
| **Imágenes organizadas** | ✅ 48/49 (98%) |
|
||||||
|
| **Estructura creada** | ✅ Completa |
|
||||||
|
| **Service Worker** | ✅ Configurado |
|
||||||
|
| **Vite Build** | ✅ Configurado |
|
||||||
|
| **Referencias Markdown** | ⏳ Pendiente |
|
||||||
|
| **Funciona offline** | ✅ Sí (cuando se añadan referencias) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Conclusión:** Las imágenes están organizadas y listas para usar en la PWA. Solo falta añadir las referencias en los archivos Markdown del manual.
|
||||||
91
RESUMEN_PWA_IMAGENES.md
Normal file
91
RESUMEN_PWA_IMAGENES.md
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
# 📸 Resumen: Imágenes en PWA - EMERGES TES
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CONFIGURACIÓN COMPLETADA PARA PWA
|
||||||
|
|
||||||
|
### 1. Service Worker Actualizado
|
||||||
|
- ✅ **Cachea imágenes automáticamente** (cache-first strategy)
|
||||||
|
- ✅ **Detecta rutas** `/assets/infografias/` y las cachea
|
||||||
|
- ✅ **Funciona offline** una vez que las imágenes se cargan
|
||||||
|
|
||||||
|
### 2. Vite Build Configurado
|
||||||
|
- ✅ **Copia `public/`** a `dist/` (incluye imágenes)
|
||||||
|
- ✅ **Mantiene estructura** de carpetas para assets
|
||||||
|
- ✅ **Incluye PNG, JPG, SVG, GIF** en el build
|
||||||
|
|
||||||
|
### 3. Estructura de Carpetas Creada
|
||||||
|
```
|
||||||
|
public/assets/infografias/
|
||||||
|
├── bloque-0-fundamentos/
|
||||||
|
├── bloque-2-inmovilizacion/
|
||||||
|
├── bloque-3-material-sanitario/
|
||||||
|
├── bloque-7-conduccion/
|
||||||
|
└── bloque-12-marco-legal/
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 PRÓXIMOS PASOS
|
||||||
|
|
||||||
|
### Paso 1: Mover Imágenes (Manual o Script)
|
||||||
|
|
||||||
|
**Opción A: Script Python (Recomendado)**
|
||||||
|
```bash
|
||||||
|
python scripts/organizar_infografias.py
|
||||||
|
```
|
||||||
|
|
||||||
|
**Opción B: Manual**
|
||||||
|
```bash
|
||||||
|
# Ejemplo: Mover imágenes de collarín
|
||||||
|
cp imagenes-pendientes/colocacion-collarin-paso-*.png public/assets/infografias/bloque-2-inmovilizacion/
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 2: Añadir Referencias en Markdown
|
||||||
|
|
||||||
|
Editar archivos `.md` del manual:
|
||||||
|
```markdown
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 3: Build y Verificar
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
ls -R dist/assets/infografias/ # Verificar que están en el build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Paso 4: Test Offline
|
||||||
|
|
||||||
|
1. Abrir app en navegador
|
||||||
|
2. Cargar páginas con imágenes (para cachear)
|
||||||
|
3. DevTools > Network > Offline
|
||||||
|
4. Verificar que las imágenes cargan
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 ESTADO ACTUAL
|
||||||
|
|
||||||
|
| Aspecto | Estado |
|
||||||
|
|---------|--------|
|
||||||
|
| **Service Worker** | ✅ Configurado para cachear imágenes |
|
||||||
|
| **Vite Build** | ✅ Incluye imágenes en build |
|
||||||
|
| **Estructura carpetas** | ✅ Creada |
|
||||||
|
| **Imágenes organizadas** | ❌ Pendiente (48 en `imagenes-pendientes/`) |
|
||||||
|
| **Referencias en Markdown** | ❌ Pendiente (0 referencias) |
|
||||||
|
| **Funciona offline** | ⚠️ Cuando se completen pasos 1-2 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 NOTAS IMPORTANTES
|
||||||
|
|
||||||
|
1. **Las imágenes se cachean automáticamente** cuando se cargan por primera vez
|
||||||
|
2. **No necesitas precachear manualmente** - el SW las cachea bajo demanda
|
||||||
|
3. **Una vez organizadas y referenciadas**, funcionarán offline automáticamente
|
||||||
|
4. **El tamaño total** de imágenes (~8.5MB) es aceptable para PWA
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Conclusión:** La infraestructura está lista. Solo falta organizar las imágenes y añadir referencias en el manual.
|
||||||
396
SUGERENCIAS_MEDIOS_VISUALES.md
Normal file
396
SUGERENCIAS_MEDIOS_VISUALES.md
Normal file
|
|
@ -0,0 +1,396 @@
|
||||||
|
# 📸 Sugerencias de Medios Visuales por Tema
|
||||||
|
|
||||||
|
**Fecha:** 2024-12-19
|
||||||
|
**Objetivo:** Sugerir al menos 1 medio visual para cada tema crítico sin imágenes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 RESUMEN
|
||||||
|
|
||||||
|
| Prioridad | Temas | Medios Sugeridos |
|
||||||
|
|-----------|-------|-----------------|
|
||||||
|
| **🔴 ALTA** | 25 temas | 25-30 medios |
|
||||||
|
| **🟡 MEDIA** | 35 temas | 35-40 medios |
|
||||||
|
| **🟢 BAJA** | 38 temas | 38-45 medios |
|
||||||
|
| **TOTAL** | **98 temas** | **~100 medios** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔴 PRIORIDAD ALTA (25 temas críticos)
|
||||||
|
|
||||||
|
### BLOQUE 1: FUNDAMENTOS Y PROCEDIMIENTOS BÁSICOS
|
||||||
|
|
||||||
|
#### 1.1 Constantes Vitales (`1.1_constantes_vitales.md`)
|
||||||
|
- ✅ **Tienes:** `interpretacion-constantes-semaforo.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Tabla visual de rangos normales** (adulto/pediátrico)
|
||||||
|
- **Diagrama de puntos de medición** (pulso, TA, etc.)
|
||||||
|
- **Guía visual de frecuencia de registro** según situación
|
||||||
|
|
||||||
|
#### 1.2 ABCDE Operativo (`1.2_abcde_operativo.md`)
|
||||||
|
- ✅ **Tienes:** `ALGORITMO OPERATIVO DEL TES.svg`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo ABCDE** paso a paso
|
||||||
|
- **Infografía de signos de alarma** por letra (A, B, C, D, E)
|
||||||
|
- **Tabla visual de prioridades** (qué hacer primero)
|
||||||
|
|
||||||
|
#### 1.3 Glasgow Operativo (`1.3_glasgow_operativo.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Tabla visual de escala Glasgow** (ojo, verbal, motor)
|
||||||
|
- **Diagrama de interpretación** (leve, moderado, grave)
|
||||||
|
- **Guía visual de evaluación** paso a paso
|
||||||
|
|
||||||
|
#### 1.4 Triage START (`1.4_triage_start.md`)
|
||||||
|
- ✅ **Tienes:** `RESUMEN VISUAL DEL ALGORITMO START.svg`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo START** completo
|
||||||
|
- **Infografía de categorías** (rojo, amarillo, verde, negro)
|
||||||
|
- **Guía visual de decisión rápida**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BLOQUE 2: SOPORTE VITAL BÁSICO
|
||||||
|
|
||||||
|
#### 2.1 Reconocimiento PCR (`BLOQUE_04_0_RECONOCIMIENTO_PCR.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de signos de PCR** (inconsciencia, ausencia respiración, etc.)
|
||||||
|
- **Diagrama de verificación** (mirar, escuchar, sentir)
|
||||||
|
- **Guía visual de decisión** (¿PCR? → RCP)
|
||||||
|
|
||||||
|
#### 2.2 RCP Adultos (`BLOQUE_04_1_RCP_ADULTOS.md`)
|
||||||
|
- ✅ **Tienes:** `flujo-rcp-transtelefonica.png` (transtelefónica)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo RCP básica** (30:2, posición, etc.)
|
||||||
|
- **Infografía de técnica de compresión** (posición manos, profundidad, frecuencia)
|
||||||
|
- **Guía visual paso a paso** (verificar → comprimir → ventilar)
|
||||||
|
- **Diagrama de posicionamiento** (paciente, reanimador)
|
||||||
|
|
||||||
|
#### 2.3 RCP Pediátrica (`BLOQUE_04_2_RCP_PEDIATRIA.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo RCP pediátrica** (15:2, diferencias con adulto)
|
||||||
|
- **Infografía de técnica pediátrica** (una mano, dos dedos según edad)
|
||||||
|
- **Tabla visual de diferencias** (adulto vs pediátrico vs lactante)
|
||||||
|
- **Guía visual de profundidad** según edad
|
||||||
|
|
||||||
|
#### 2.4 RCP Lactantes (`BLOQUE_04_3_RCP_LACTANTES.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo RCP lactante** (15:2, técnica específica)
|
||||||
|
- **Infografía de técnica lactante** (dos dedos, posición)
|
||||||
|
- **Guía visual de diferencias** con pediátrico
|
||||||
|
|
||||||
|
#### 2.5 Uso DESA (`BLOQUE_04_4_USO_DESA.md`)
|
||||||
|
- ✅ **Tienes:** `flujo-desa-telefono.png` (transtelefónica)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo DESA** (encender → colocar → analizar → descargar)
|
||||||
|
- **Infografía de colocación de electrodos** (posición correcta)
|
||||||
|
- **Guía visual paso a paso** DESA
|
||||||
|
- **Diagrama de zonas de seguridad** (no tocar durante análisis)
|
||||||
|
|
||||||
|
#### 2.6 Ventilación BVM (`BLOQUE_04_5_VENTILACION_BVM.md`)
|
||||||
|
- ✅ **Tienes:** `uso-correcto-ambu.png`, `configuracion-maxima-fio2-bolsa-mascarilla.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de técnica de sellado** (posición manos, sellado correcto)
|
||||||
|
- **Infografía de frecuencia ventilatoria** (adulto vs pediátrico)
|
||||||
|
- **Guía visual de problemas comunes** (fugas, resistencia, etc.)
|
||||||
|
|
||||||
|
#### 2.7 Canulas OPA/NPA (`BLOQUE_04_6_USO_CANULAS_OPA_NPA.md`)
|
||||||
|
- ✅ **Tienes:** `canulas-guedel-nasofaringea.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de selección de talla** (medición, tabla)
|
||||||
|
- **Infografía de colocación OPA** paso a paso
|
||||||
|
- **Infografía de colocación NPA** paso a paso
|
||||||
|
- **Guía visual de contraindicaciones** (OPA vs NPA)
|
||||||
|
|
||||||
|
#### 2.8 Aspiración Secreciones (`BLOQUE_04_7_ASPIRACION_SECRECIONES.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de técnica de aspiración** (posición, profundidad)
|
||||||
|
- **Infografía de material necesario** (sonda, aspirador, etc.)
|
||||||
|
- **Guía visual de precauciones** (tiempo, presión, etc.)
|
||||||
|
|
||||||
|
#### 2.9 Posiciones Seguridad (`BLOQUE_04_8_POSICIONES_SEGURIDAD_MOVILIZACION.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de posición lateral de seguridad** (PLS)
|
||||||
|
- **Diagrama de posicionamiento** según situación
|
||||||
|
- **Guía visual de movilización segura**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BLOQUE 3: MATERIAL E INMOVILIZACIÓN
|
||||||
|
|
||||||
|
#### 3.1 Anatomía Operativa (`BLOQUE_02_0_ANATOMIA_OPERATIVA.md`)
|
||||||
|
- ✅ **Tienes:** `situaciones-que-requieren-inmovilizacion.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama anatómico básico** (columna cervical, puntos clave)
|
||||||
|
- **Infografía de mecanismos lesionales** (hiperextensión, flexión, etc.)
|
||||||
|
- **Guía visual de indicaciones** de inmovilización
|
||||||
|
|
||||||
|
#### 3.2 Inmovilización Manual (`BLOQUE_02_2_INMOVILIZACION_MANUAL.md`)
|
||||||
|
- ✅ **Tienes:** `posicion-tes-inmovilizacion-manual.png`, `tecnica-sujecion-manual-cervical.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de transición** manual → dispositivo (ya existe parcialmente)
|
||||||
|
- **Infografía de coordinación equipo** (ya existe)
|
||||||
|
|
||||||
|
#### 3.3 Collarín Cervical (`BLOQUE_02_3_COLLARIN_CERVICAL.md`)
|
||||||
|
- ✅ **Tienes:** 12 imágenes (pasos, selección, errores, verificaciones)
|
||||||
|
- ❌ **Falta:** Nada crítico (muy completo)
|
||||||
|
|
||||||
|
#### 3.4 Tablero Espinal (`BLOQUE_02_5_TABLERO_ESPINAL.md`)
|
||||||
|
- ✅ **Tienes:** `componentes-tablero-espinal.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de colocación paso a paso** (serie de imágenes)
|
||||||
|
- **Diagrama de posicionamiento correas** (mínimo 4, zonas)
|
||||||
|
- **Guía visual de acolchado** (espacios vacíos)
|
||||||
|
|
||||||
|
#### 3.5 Colchón Vacío (`BLOQUE_02_6_COLCHON_VACIO.md`)
|
||||||
|
- ✅ **Tienes:** `componentes-colchon-vacio.png`, `colocacion-colchon-vacio-paso-a-paso.png`
|
||||||
|
- ❌ **Falta:** Nada crítico
|
||||||
|
|
||||||
|
#### 3.6 Férulas (`BLOQUE_02_10_FERULAS.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de tipos de férulas** (neumática, rígida, etc.)
|
||||||
|
- **Diagrama de selección** según lesión
|
||||||
|
- **Guía visual de colocación** paso a paso
|
||||||
|
- **Tabla visual de indicaciones** por tipo
|
||||||
|
|
||||||
|
#### 3.7 Extricación (`BLOQUE_02_7_EXTRICACION_MOVIMIENTOS_BLOQUE.md`)
|
||||||
|
- ✅ **Tienes:** `coordinacion-equipo-inmovilizacion.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de técnicas de extricación** (rápida, lenta)
|
||||||
|
- **Infografía de movimientos bloque** (log roll, etc.)
|
||||||
|
- **Guía visual de coordinación** equipo
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BLOQUE 4: OXIGENOTERAPIA Y MATERIAL SANITARIO
|
||||||
|
|
||||||
|
#### 4.1 Oxigenoterapia Fundamentos (`BLOQUE_03_0_OXIGENOTERAPIA_FUNDAMENTOS.md`)
|
||||||
|
- ✅ **Tienes:** `tabla-rangos-fio2-oxigenoterapia.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de selección de dispositivo** (flujograma de decisión)
|
||||||
|
- **Infografía de indicaciones** de oxigenoterapia
|
||||||
|
- **Tabla visual de contraindicaciones** relativas
|
||||||
|
|
||||||
|
#### 4.2 Dispositivos Oxigenoterapia (`BLOQUE_03_1_DISPOSITIVOS_OXIGENOTERAPIA.md`)
|
||||||
|
- ✅ **Tienes:** `guia-colocacion-dispositivos-oxigenoterapia.png`, `diagrama-seleccion-dispositivo-oxigenoterapia.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía comparativa** de dispositivos (cánula, mascarilla, etc.)
|
||||||
|
- **Tabla visual de FiO2** por dispositivo (ya existe parcialmente)
|
||||||
|
|
||||||
|
#### 4.3 Control Hemorragias (`BLOQUE_03_6_CONTROL_HEMORRAGIAS.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de técnicas de control** (compresión directa, elevación, etc.)
|
||||||
|
- **Infografía de puntos de presión** anatómicos
|
||||||
|
- **Guía visual paso a paso** control hemorragia
|
||||||
|
- **Tabla visual de tipos** de hemorragia
|
||||||
|
|
||||||
|
#### 4.4 Quemaduras (`BLOQUE_03_7_QUEMADURAS.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de regla de los 9** (superficie corporal)
|
||||||
|
- **Infografía de profundidad** (1º, 2º, 3º grado)
|
||||||
|
- **Tabla visual de clasificación** (superficial, profunda, etc.)
|
||||||
|
- **Guía visual de primeros auxilios**
|
||||||
|
|
||||||
|
#### 4.5 Heridas y Vendajes (`BLOQUE_03_8_HERIDAS_VENDAJES.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de tipos de vendajes** (circular, espiral, etc.)
|
||||||
|
- **Diagrama de técnicas de vendaje** paso a paso
|
||||||
|
- **Guía visual de limpieza** de heridas
|
||||||
|
|
||||||
|
#### 4.6 Dispositivos Supraglóticos (`BLOQUE_03_22_DISPOSITIVOS_SUPRAGLOTICOS.md`)
|
||||||
|
- ✅ **Tienes:** `dispositivos-supragloticos-guia.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de tipos** (LMA, i-gel, etc.)
|
||||||
|
- **Infografía de indicaciones** y contraindicaciones
|
||||||
|
- **Guía visual de colocación** paso a paso
|
||||||
|
|
||||||
|
#### 4.7 Ventilación Medios Fortuna (`BLOQUE_03_25_VENTILACION_MEDIOS_FORTUNA.md`)
|
||||||
|
- ✅ **Tienes:** `ventilacion-medios-fortuna.png`
|
||||||
|
- ❌ **Falta:** Nada crítico
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BLOQUE 5: PROTOCOLOS TRANSTELEFÓNICOS
|
||||||
|
|
||||||
|
#### 5.1 RCP Transtelefónica (`BLOQUE_05_1_RCP_TRANSTELEFONICA_ADULTOS.md`)
|
||||||
|
- ✅ **Tienes:** `flujo-rcp-transtelefonica.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo completo** (incluyendo pediátrico/lactante)
|
||||||
|
- **Infografía de guía telefónica** paso a paso
|
||||||
|
|
||||||
|
#### 5.2 DESA Transtelefónico (`BLOQUE_05_4_DESA_GUIADO_TELEFONO.md`)
|
||||||
|
- ✅ **Tienes:** `flujo-desa-telefono.png`
|
||||||
|
- ❌ **Falta:** Nada crítico
|
||||||
|
|
||||||
|
#### 5.3 ICTUS Transtelefónico (`BLOQUE_05_7_ICTUS_TRANSTELEFONICO.md`)
|
||||||
|
- ✅ **Tienes:** `fast-transtelefonico.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de escala FAST** (Face, Arm, Speech, Time)
|
||||||
|
- **Diagrama de decisión** (¿ictus? → activar código)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BLOQUE 6: FARMACOLOGÍA
|
||||||
|
|
||||||
|
#### 6.1 Principios Administración (`BLOQUE_06_0_PRINCIPIOS_ADMINISTRACION.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de 5 correctos** (paciente, fármaco, dosis, vía, tiempo)
|
||||||
|
- **Diagrama de verificación** antes de administrar
|
||||||
|
- **Guía visual de seguridad** farmacológica
|
||||||
|
|
||||||
|
#### 6.2 Del Vial a la Vena (`BLOQUE_06_1_DEL_VIAL_A_LA_VENA.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de preparación** paso a paso (vial → jeringa → vena)
|
||||||
|
- **Diagrama de técnicas de extracción** (vial, ampolla)
|
||||||
|
- **Guía visual de eliminación de aire** (burbujas)
|
||||||
|
- **Infografía de verificación** (nombre, fecha, dosis)
|
||||||
|
|
||||||
|
#### 6.3 Vías de Administración (`BLOQUE_06_X_VIAS_ADMINISTRACION.md` - si existe)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de vías** (IV, IO, IM, sublingual, etc.)
|
||||||
|
- **Infografía de selección** según situación
|
||||||
|
- **Tabla visual de ventajas/desventajas** por vía
|
||||||
|
|
||||||
|
#### 6.4 Fármacos Cardiológicos (`BLOQUE_06_5_FARMACOS_CARDIOLOGICOS.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Tabla visual de fármacos** (adrenalina, atropina, etc.)
|
||||||
|
- **Infografía de indicaciones** por fármaco
|
||||||
|
- **Diagrama de dosis** (adulto vs pediátrico)
|
||||||
|
|
||||||
|
#### 6.5 Fármacos Respiratorios (`BLOQUE_06_6_FARMACOS_RESPIRATORIOS.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Tabla visual de fármacos** (salbutamol, etc.)
|
||||||
|
- **Infografía de administración** (nebulización, etc.)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BLOQUE 7: TRANSFERENCIA Y TRASLADO
|
||||||
|
|
||||||
|
#### 7.1 Preparación Traslado (`BLOQUE_08_1_PREPARACION_TRASLADO.md`)
|
||||||
|
- ✅ **Tienes:** `configuracion-gps-antes-de-salir.png`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Checklist visual** pre-traslado
|
||||||
|
- **Infografía de verificación** material y paciente
|
||||||
|
|
||||||
|
#### 7.2 Transferencia al Hospital (`BLOQUE_08_5_TRANSFERENCIA_AL_HOSPITAL.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo de transferencia** (comunicación → entrega → documentación)
|
||||||
|
- **Infografía de información crítica** a transmitir
|
||||||
|
- **Guía visual de entrega** (SBAR, IMIST-AMBO)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🟡 PRIORIDAD MEDIA (35 temas)
|
||||||
|
|
||||||
|
### BLOQUE 8: TRIAGE Y MÚLTIPLES VÍCTIMAS
|
||||||
|
|
||||||
|
#### 8.1 Fundamentos Triage (`BLOQUE_07_1_FUNDAMENTOS_TRIAGE.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de principios** de triage
|
||||||
|
- **Diagrama de objetivos** (máximo beneficio, mínimo tiempo)
|
||||||
|
|
||||||
|
#### 8.2 Método START (`BLOQUE_07_2_METODO_START.md`)
|
||||||
|
- ✅ **Tienes:** `RESUMEN VISUAL DEL ALGORITMO START.svg`
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de flujo START** detallado
|
||||||
|
- **Infografía de categorías** con ejemplos
|
||||||
|
|
||||||
|
#### 8.3 Etiquetado y Zonificación (`BLOQUE_07_3_ETIQUETADO_ZONIFICACION.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de colores** (rojo, amarillo, verde, negro)
|
||||||
|
- **Diagrama de zonas** (triage, tratamiento, evacuación)
|
||||||
|
- **Guía visual de etiquetas** (qué información incluir)
|
||||||
|
|
||||||
|
#### 8.4 Roles y Funciones (`BLOQUE_07_4_ROLES_FUNCIONES_TES_TMV.md`)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Diagrama de organización** del equipo
|
||||||
|
- **Infografía de roles** (triage, tratamiento, evacuación)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BLOQUE 9: SITUACIONES ESPECIALES
|
||||||
|
|
||||||
|
#### 9.1 Patologías por Sistemas (varios capítulos)
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografías de patologías** (IAM, ictus, shock, etc.)
|
||||||
|
- **Diagramas de signos y síntomas** por patología
|
||||||
|
- **Tablas visuales de actuación** rápida
|
||||||
|
|
||||||
|
#### 9.2 Poblaciones Especiales
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografías pediátricas** (diferencias con adulto)
|
||||||
|
- **Infografías geriátricas** (consideraciones especiales)
|
||||||
|
- **Infografías embarazadas** (modificaciones técnicas)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🟢 PRIORIDAD BAJA (38 temas)
|
||||||
|
|
||||||
|
### BLOQUE 10: COMUNICACIÓN Y DOCUMENTACIÓN
|
||||||
|
|
||||||
|
#### 10.1 Comunicación Operativa
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de técnicas** de comunicación
|
||||||
|
- **Diagrama de SBAR/IMIST-AMBO** (estructura)
|
||||||
|
|
||||||
|
#### 10.2 Documentación
|
||||||
|
- ❌ **Falta:**
|
||||||
|
- **Infografía de información esencial** a documentar
|
||||||
|
- **Guía visual de formato** de informe
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 RESUMEN POR TIPO DE MEDIO
|
||||||
|
|
||||||
|
### Diagramas de Flujo (30-35 medios)
|
||||||
|
- RCP (adulto, pediátrico, lactante)
|
||||||
|
- ABCDE completo
|
||||||
|
- START detallado
|
||||||
|
- Protocolos transtelefónicos
|
||||||
|
- Transferencia hospitalaria
|
||||||
|
- Triage
|
||||||
|
|
||||||
|
### Infografías Paso a Paso (25-30 medios)
|
||||||
|
- Colocación de dispositivos
|
||||||
|
- Técnicas de procedimientos
|
||||||
|
- Preparación de fármacos
|
||||||
|
- Técnicas de inmovilización
|
||||||
|
|
||||||
|
### Tablas Visuales (20-25 medios)
|
||||||
|
- Rangos de constantes vitales
|
||||||
|
- Dosis de fármacos
|
||||||
|
- FiO2 por dispositivo
|
||||||
|
- Clasificaciones (quemaduras, Glasgow, etc.)
|
||||||
|
|
||||||
|
### Diagramas Anatómicos/Técnicos (15-20 medios)
|
||||||
|
- Anatomía básica
|
||||||
|
- Posicionamiento
|
||||||
|
- Técnicas manuales
|
||||||
|
- Puntos de presión
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 RECOMENDACIÓN FINAL
|
||||||
|
|
||||||
|
### Fase 1: Integrar 48 imágenes existentes (INMEDIATO)
|
||||||
|
- **Esfuerzo:** Bajo
|
||||||
|
- **Impacto:** Alto (30-35 capítulos con imágenes)
|
||||||
|
|
||||||
|
### Fase 2: Crear 25 medios críticos (MEDIO PLAZO)
|
||||||
|
- **Prioridad ALTA:** 25 medios
|
||||||
|
- **Esfuerzo:** Medio-Alto
|
||||||
|
- **Impacto:** Muy Alto (cobertura de procedimientos críticos)
|
||||||
|
|
||||||
|
### Fase 3: Crear 35 medios operativos (LARGO PLAZO)
|
||||||
|
- **Prioridad MEDIA:** 35 medios
|
||||||
|
- **Esfuerzo:** Alto
|
||||||
|
- **Impacto:** Alto (cobertura completa de temas operativos)
|
||||||
|
|
||||||
|
### Fase 4: Crear 38 medios complementarios (MUY LARGO PLAZO)
|
||||||
|
- **Prioridad BAJA:** 38 medios
|
||||||
|
- **Esfuerzo:** Muy Alto
|
||||||
|
- **Impacto:** Medio (mejora formativa)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Total sugerido:** ~100 medios visuales
|
||||||
|
**Prioridad inmediata:** 25 medios críticos + integrar 48 existentes
|
||||||
115
TEST_CHECKLIST.md
Normal file
115
TEST_CHECKLIST.md
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
# ✅ Checklist Pre-Deploy
|
||||||
|
|
||||||
|
Usa este checklist antes de cada deploy para asegurar que todo funciona correctamente.
|
||||||
|
|
||||||
|
## 🔨 Build
|
||||||
|
|
||||||
|
- [ ] `npm ci` ejecutado sin errores
|
||||||
|
- [ ] `npm run build` completado exitosamente
|
||||||
|
- [ ] Directorio `dist/` creado y contiene archivos
|
||||||
|
- [ ] No hay errores en consola durante build
|
||||||
|
- [ ] Tamaño de `dist/` es razonable (<50MB típicamente)
|
||||||
|
|
||||||
|
## 📁 Archivos Críticos
|
||||||
|
|
||||||
|
- [ ] `dist/index.html` existe
|
||||||
|
- [ ] `dist/manifest.json` existe
|
||||||
|
- [ ] `dist/sw.js` existe (si usas service worker)
|
||||||
|
- [ ] Assets (JS, CSS) están en `dist/assets/`
|
||||||
|
- [ ] Archivos `.md` del manual están en `dist/manual/` (si aplica)
|
||||||
|
|
||||||
|
## 🌐 Nginx
|
||||||
|
|
||||||
|
- [ ] Configuración creada en `/etc/nginx/sites-available/`
|
||||||
|
- [ ] Symlink creado en `/etc/nginx/sites-enabled/`
|
||||||
|
- [ ] `sudo nginx -t` pasa sin errores
|
||||||
|
- [ ] Permisos correctos en directorio `dist/`
|
||||||
|
- [ ] Nginx reiniciado: `sudo systemctl reload nginx`
|
||||||
|
|
||||||
|
## 🔒 SSL (si aplica)
|
||||||
|
|
||||||
|
- [ ] Certificado SSL válido
|
||||||
|
- [ ] Redirección HTTP → HTTPS configurada
|
||||||
|
- [ ] Certbot renovación automática configurada
|
||||||
|
|
||||||
|
## 🧪 Pruebas Funcionales
|
||||||
|
|
||||||
|
### Desktop
|
||||||
|
- [ ] Página principal carga correctamente
|
||||||
|
- [ ] Navegación entre páginas funciona
|
||||||
|
- [ ] Calculadoras funcionan
|
||||||
|
- [ ] Búsqueda funciona
|
||||||
|
- [ ] Footer visible (desktop)
|
||||||
|
- [ ] Enlace de donaciones funciona
|
||||||
|
|
||||||
|
### Móvil
|
||||||
|
- [ ] Responsive funciona
|
||||||
|
- [ ] BottomNav visible y funcional
|
||||||
|
- [ ] Touch funciona correctamente
|
||||||
|
- [ ] PWA instalable
|
||||||
|
- [ ] Offline funciona (service worker)
|
||||||
|
|
||||||
|
### Rutas SPA
|
||||||
|
- [ ] `/herramientas` carga
|
||||||
|
- [ ] `/farmacos` carga
|
||||||
|
- [ ] `/manual` carga
|
||||||
|
- [ ] Rutas anidadas funcionan (ej: `/manual/parte/bloque/capitulo`)
|
||||||
|
- [ ] 404 redirige a página principal
|
||||||
|
|
||||||
|
## 🔍 Verificación Técnica
|
||||||
|
|
||||||
|
- [ ] Service Worker registrado (DevTools > Application)
|
||||||
|
- [ ] Cache funciona (offline mode)
|
||||||
|
- [ ] Console sin errores críticos
|
||||||
|
- [ ] Network tab: recursos cargan correctamente
|
||||||
|
- [ ] Lighthouse score >90 (Performance, PWA)
|
||||||
|
|
||||||
|
## 📊 Performance
|
||||||
|
|
||||||
|
- [ ] First Contentful Paint < 2s
|
||||||
|
- [ ] Time to Interactive < 3s
|
||||||
|
- [ ] Assets comprimidos (gzip)
|
||||||
|
- [ ] Imágenes optimizadas
|
||||||
|
|
||||||
|
## 🔐 Seguridad
|
||||||
|
|
||||||
|
- [ ] Headers de seguridad configurados (si aplica)
|
||||||
|
- [ ] HTTPS funcionando (si aplica)
|
||||||
|
- [ ] No hay información sensible en código cliente
|
||||||
|
- [ ] Service Worker no cachea datos sensibles
|
||||||
|
|
||||||
|
## 📱 PWA
|
||||||
|
|
||||||
|
- [ ] Manifest válido
|
||||||
|
- [ ] Iconos presentes y correctos
|
||||||
|
- [ ] Instalable en Android
|
||||||
|
- [ ] Instalable en iOS
|
||||||
|
- [ ] Splash screen funciona
|
||||||
|
|
||||||
|
## 🎯 Funcionalidad Específica
|
||||||
|
|
||||||
|
- [ ] Calculadoras: Glasgow, Parkland, Pediátricas, etc.
|
||||||
|
- [ ] Protocolos: RCP, Ictus, Shock
|
||||||
|
- [ ] Fármacos: búsqueda y visualización
|
||||||
|
- [ ] Manual: navegación y visualización
|
||||||
|
|
||||||
|
## 📝 Post-Deploy
|
||||||
|
|
||||||
|
- [ ] Monitorear logs: `sudo tail -f /var/log/nginx/error.log`
|
||||||
|
- [ ] Verificar métricas (si tienes analytics)
|
||||||
|
- [ ] Probar en diferentes dispositivos
|
||||||
|
- [ ] Documentar cualquier problema encontrado
|
||||||
|
|
||||||
|
## 🚨 Rollback Plan
|
||||||
|
|
||||||
|
Si algo falla:
|
||||||
|
1. Restaurar `dist/` desde backup
|
||||||
|
2. O hacer `git checkout <commit-anterior>` + rebuild
|
||||||
|
3. Verificar logs de Nginx
|
||||||
|
4. Revisar cambios recientes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Fecha de verificación:** _______________
|
||||||
|
**Verificado por:** _______________
|
||||||
|
**Notas:** _______________
|
||||||
47
deploy.sh
Executable file
47
deploy.sh
Executable file
|
|
@ -0,0 +1,47 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# Script de deploy para EMERGES TES
|
||||||
|
# Uso: ./deploy.sh
|
||||||
|
# Requisitos: git, npm, PM2 (opcional)
|
||||||
|
|
||||||
|
set -e # Salir si hay error
|
||||||
|
|
||||||
|
echo "🚀 Iniciando deploy de EMERGES TES..."
|
||||||
|
|
||||||
|
# Colores para output
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
YELLOW='\033[1;33m'
|
||||||
|
NC='\033[0m' # No Color
|
||||||
|
|
||||||
|
# 1. Actualizar código desde git
|
||||||
|
echo -e "${YELLOW}📥 Actualizando código desde git...${NC}"
|
||||||
|
git pull origin main || echo "⚠️ No se pudo hacer git pull (continuando...)"
|
||||||
|
|
||||||
|
# 2. Instalar dependencias
|
||||||
|
echo -e "${YELLOW}📦 Instalando dependencias...${NC}"
|
||||||
|
npm ci --production=false
|
||||||
|
|
||||||
|
# 3. Build de producción
|
||||||
|
echo -e "${YELLOW}🔨 Construyendo aplicación...${NC}"
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# 4. Verificar que el build se completó
|
||||||
|
if [ ! -d "dist" ]; then
|
||||||
|
echo "❌ Error: El directorio dist no existe después del build"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo -e "${GREEN}✅ Build completado exitosamente${NC}"
|
||||||
|
|
||||||
|
# 5. Si PM2 está instalado, reiniciar
|
||||||
|
if command -v pm2 &> /dev/null; then
|
||||||
|
echo -e "${YELLOW}🔄 Reiniciando PM2...${NC}"
|
||||||
|
pm2 restart ecosystem.config.js || pm2 start ecosystem.config.js
|
||||||
|
pm2 save
|
||||||
|
echo -e "${GREEN}✅ PM2 reiniciado${NC}"
|
||||||
|
else
|
||||||
|
echo -e "${YELLOW}ℹ️ PM2 no está instalado. Usa Nginx para servir archivos estáticos.${NC}"
|
||||||
|
echo -e "${YELLOW} Los archivos están en: $(pwd)/dist${NC}"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo -e "${GREEN}🎉 Deploy completado!${NC}"
|
||||||
26
ecosystem.config.js
Normal file
26
ecosystem.config.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
/**
|
||||||
|
* Configuración PM2 para servidor de preview (opcional)
|
||||||
|
* Solo necesario si quieres un servidor Node.js para desarrollo/preview
|
||||||
|
* Para producción, usar Nginx con archivos estáticos es más eficiente
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
apps: [
|
||||||
|
{
|
||||||
|
name: 'emerges-tes',
|
||||||
|
script: 'npx',
|
||||||
|
args: 'serve -s dist -l 3000',
|
||||||
|
instances: 1,
|
||||||
|
autorestart: true,
|
||||||
|
watch: false,
|
||||||
|
max_memory_restart: '500M',
|
||||||
|
env: {
|
||||||
|
NODE_ENV: 'production',
|
||||||
|
PORT: 3000,
|
||||||
|
},
|
||||||
|
error_file: './logs/pm2-error.log',
|
||||||
|
out_file: './logs/pm2-out.log',
|
||||||
|
log_date_format: 'YYYY-MM-DD HH:mm:ss Z',
|
||||||
|
merge_logs: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
16
env.example
Normal file
16
env.example
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
# Variables de entorno para EMERGES TES
|
||||||
|
# Copiar a .env y ajustar valores según tu entorno
|
||||||
|
|
||||||
|
# Entorno
|
||||||
|
NODE_ENV=production
|
||||||
|
|
||||||
|
# Puerto (solo si usas servidor Node.js con PM2)
|
||||||
|
PORT=3000
|
||||||
|
|
||||||
|
# URL pública de la aplicación (para PWA y service worker)
|
||||||
|
# Ejemplo: https://emergestes.com
|
||||||
|
NEXT_PUBLIC_APP_URL=https://emergestes.com
|
||||||
|
|
||||||
|
# GitHub Pages (si aplica)
|
||||||
|
GITHUB_PAGES=false
|
||||||
|
GITHUB_REPOSITORY_NAME=guia-tes-digital
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
232
imagenes-pendientes/BLOQUE_01_2_diagrama_flujo_abcde.svg
Normal file
232
imagenes-pendientes/BLOQUE_01_2_diagrama_flujo_abcde.svg
Normal file
|
|
@ -0,0 +1,232 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="980" viewBox="0 0 1600 980" role="img" aria-label="Diagrama de flujo clínico ABCDE (Airway, Breathing, Circulation, Disability, Exposure)">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.title{font:800 36px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
||||||
|
.sub{font:500 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#4b5563}
|
||||||
|
.box{fill:#ffffff;stroke:#d1d5db;stroke-width:2}
|
||||||
|
.head{fill:#f8fafc}
|
||||||
|
.letter{font:900 22px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
||||||
|
.step{font:800 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
||||||
|
.txt{font:600 13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#374151}
|
||||||
|
.small{font:500 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#6b7280}
|
||||||
|
.pill{fill:#f3f4f6;stroke:#e5e7eb;stroke-width:1}
|
||||||
|
.alarm{fill:#fff7ed;stroke:#f59e0b;stroke-width:2}
|
||||||
|
.action{fill:#eef2ff;stroke:#6366f1;stroke-width:2}
|
||||||
|
.arrow{stroke:#6b7280;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.iconStroke{stroke:#374151;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.iconFill{fill:#374151}
|
||||||
|
.danger{stroke:#ef4444}
|
||||||
|
.dangerFill{fill:#ef4444}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<marker id="arrowHead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto">
|
||||||
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#6b7280"></path>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect x="0" y="0" width="1600" height="980" fill="#ffffff"></rect>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text class="title" x="70" y="70">Diagrama de Flujo Clínico ABCDE</text>
|
||||||
|
<text class="sub" x="70" y="98">En cada letra: identificar signos de alarma → intervenir de forma prioritaria → reevaluar y continuar. (Uso didáctico; adaptar a protocolo local)</text>
|
||||||
|
|
||||||
|
<!-- Top band: global rule -->
|
||||||
|
<g transform="translate(70,122)">
|
||||||
|
<rect class="action" x="0" y="0" width="1460" height="64" rx="14"></rect>
|
||||||
|
<text class="step" x="18" y="28">Regla de oro:</text>
|
||||||
|
<text class="txt" x="150" y="28">Si hay compromiso vital en cualquier letra,</text>
|
||||||
|
<text class="txt" x="550" y="28">TRATAR PRIMERO y luego seguir con la secuencia.</text>
|
||||||
|
<text class="small" x="18" y="50">Reevaluación rápida tras cada intervención (respuesta clínica, constantes, monitorización).</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Layout: 5 main boxes vertical with alarms + decisions -->
|
||||||
|
<!-- Box geometry -->
|
||||||
|
<!-- Main column: x=70, y=210, w=1460, each h=132, gap=20 -->
|
||||||
|
<!-- Internal columns: left icon+title, middle alarms, right decisions/actions -->
|
||||||
|
|
||||||
|
<!-- ===== A: Airway ===== -->
|
||||||
|
<g transform="translate(70,210)">
|
||||||
|
<rect class="box" x="0" y="0" width="1460" height="132" rx="18"></rect>
|
||||||
|
<rect class="head" x="0" y="0" width="1460" height="44" rx="18"></rect>
|
||||||
|
|
||||||
|
<!-- Letter pill -->
|
||||||
|
<rect class="pill" x="16" y="10" width="64" height="24" rx="12"></rect>
|
||||||
|
<text class="letter" x="38" y="28">A</text>
|
||||||
|
|
||||||
|
<text class="step" x="96" y="29">A – Vía aérea (Airway) + control cervical</text>
|
||||||
|
|
||||||
|
<!-- Left icon (airway) -->
|
||||||
|
<g transform="translate(26,62)">
|
||||||
|
<!-- simple head/neck + airway line -->
|
||||||
|
<circle class="iconStroke" cx="24" cy="22" r="14"></circle>
|
||||||
|
<path class="iconStroke" d="M34 32c6 8 6 18 0 26"></path>
|
||||||
|
<path class="iconStroke" d="M22 30c0 10 0 18 0 26"></path>
|
||||||
|
<path class="iconStroke" d="M16 48c6-6 12-6 16 0"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Alarms -->
|
||||||
|
<g transform="translate(190,56)">
|
||||||
|
<rect class="alarm" x="0" y="0" width="560" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Signos de alarma:</text>
|
||||||
|
<text class="small" x="16" y="44">Obstrucción, estridor/roncus, gorgoteo, voz apagada, dificultad para hablar, vómitos/sangre, GCS ↓</text>
|
||||||
|
<!-- alert icon -->
|
||||||
|
<g transform="translate(520,14)">
|
||||||
|
<path class="iconStroke danger" d="M20 4L2 36h36L20 4Z"></path>
|
||||||
|
<line class="iconStroke danger" x1="20" y1="14" x2="20" y2="24"></line>
|
||||||
|
<circle class="dangerFill" cx="20" cy="30" r="2.5"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Decisions / actions -->
|
||||||
|
<g transform="translate(780,56)">
|
||||||
|
<rect class="action" x="0" y="0" width="660" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Decisión prioritaria:</text>
|
||||||
|
<text class="small" x="16" y="44">¿Vía aérea permeable? → Apertura (frente-mentón / tracción mandibular), aspiración, cánula OPA/NPA, O₂, inmovilización cervical si procede.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Arrow down -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M800 342 V360"></path>
|
||||||
|
|
||||||
|
<!-- ===== B: Breathing ===== -->
|
||||||
|
<g transform="translate(70,362)">
|
||||||
|
<rect class="box" x="0" y="0" width="1460" height="132" rx="18"></rect>
|
||||||
|
<rect class="head" x="0" y="0" width="1460" height="44" rx="18"></rect>
|
||||||
|
<rect class="pill" x="16" y="10" width="64" height="24" rx="12"></rect>
|
||||||
|
<text class="letter" x="38" y="28">B</text>
|
||||||
|
<text class="step" x="96" y="29">B – Respiración (Breathing)</text>
|
||||||
|
|
||||||
|
<!-- Left icon (lungs) -->
|
||||||
|
<g transform="translate(26,62)">
|
||||||
|
<path class="iconStroke" d="M24 6v44"></path>
|
||||||
|
<path class="iconStroke" d="M24 26c-6-10-16-10-20-3-4 7-1 22 12 27"></path>
|
||||||
|
<path class="iconStroke" d="M24 26c6-10 16-10 20-3 4 7 1 22-12 27"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(190,56)">
|
||||||
|
<rect class="alarm" x="0" y="0" width="560" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Signos de alarma:</text>
|
||||||
|
<text class="small" x="16" y="44">FR < 8 o > 30, SpO₂ baja, tiraje, cianosis, asimetría, silencio auscultatorio, dolor torácico, inestabilidad</text>
|
||||||
|
<g transform="translate(520,14)">
|
||||||
|
<path class="iconStroke danger" d="M20 4L2 36h36L20 4Z"></path>
|
||||||
|
<line class="iconStroke danger" x1="20" y1="14" x2="20" y2="24"></line>
|
||||||
|
<circle class="dangerFill" cx="20" cy="30" r="2.5"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(780,56)">
|
||||||
|
<rect class="action" x="0" y="0" width="660" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Decisión prioritaria:</text>
|
||||||
|
<text class="small" x="16" y="44">¿Ventila/oxigena adecuadamente? → O₂ titulado, ventilación asistida (BVM), monitorizar ETCO₂ si disponible, tratar causas críticas (p. ej., neumotórax a tensión según protocolo).</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M800 494 V512"></path>
|
||||||
|
|
||||||
|
<!-- ===== C: Circulation ===== -->
|
||||||
|
<g transform="translate(70,514)">
|
||||||
|
<rect class="box" x="0" y="0" width="1460" height="132" rx="18"></rect>
|
||||||
|
<rect class="head" x="0" y="0" width="1460" height="44" rx="18"></rect>
|
||||||
|
<rect class="pill" x="16" y="10" width="64" height="24" rx="12"></rect>
|
||||||
|
<text class="letter" x="38" y="28">C</text>
|
||||||
|
<text class="step" x="96" y="29">C – Circulación (Circulation) + control de hemorragias</text>
|
||||||
|
|
||||||
|
<!-- Left icon (heart + drop) -->
|
||||||
|
<g transform="translate(26,60)">
|
||||||
|
<path class="iconStroke" d="M24 40C8 26 4 20 4 14a8 8 0 0 1 14-6l6 6 6-6a8 8 0 0 1 14 6c0 6-4 12-20 26Z"></path>
|
||||||
|
<path class="iconStroke" d="M52 10c6 10 6 18 0 28c-6-10-6-18 0-28Z"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(190,56)">
|
||||||
|
<rect class="alarm" x="0" y="0" width="560" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Signos de alarma:</text>
|
||||||
|
<text class="small" x="16" y="44">Hemorragia masiva, pulso débil/rápido, piel fría, relleno capilar > 2 s, hipotensión, alteración mental, dolor torácico</text>
|
||||||
|
<g transform="translate(520,14)">
|
||||||
|
<path class="iconStroke danger" d="M20 4L2 36h36L20 4Z"></path>
|
||||||
|
<line class="iconStroke danger" x1="20" y1="14" x2="20" y2="24"></line>
|
||||||
|
<circle class="dangerFill" cx="20" cy="30" r="2.5"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(780,56)">
|
||||||
|
<rect class="action" x="0" y="0" width="660" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Decisión prioritaria:</text>
|
||||||
|
<text class="small" x="16" y="44">¿Perfusión adecuada? → Control de hemorragia (presión/tourniquet), acceso IV/IO, fluidos según contexto, monitor ECG, considerar RCP si parada.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M800 646 V664"></path>
|
||||||
|
|
||||||
|
<!-- ===== D: Disability ===== -->
|
||||||
|
<g transform="translate(70,666)">
|
||||||
|
<rect class="box" x="0" y="0" width="1460" height="132" rx="18"></rect>
|
||||||
|
<rect class="head" x="0" y="0" width="1460" height="44" rx="18"></rect>
|
||||||
|
<rect class="pill" x="16" y="10" width="64" height="24" rx="12"></rect>
|
||||||
|
<text class="letter" x="38" y="28">D</text>
|
||||||
|
<text class="step" x="96" y="29">D – Neurológico (Disability)</text>
|
||||||
|
|
||||||
|
<!-- Left icon (brain) -->
|
||||||
|
<g transform="translate(26,62)">
|
||||||
|
<path class="iconStroke" d="M20 10c-6 0-10 4-10 10v6c0 6 4 10 10 10"></path>
|
||||||
|
<path class="iconStroke" d="M20 10c0-6 6-10 12-8s8 8 6 14c6 2 8 10 4 16s-10 6-14 2"></path>
|
||||||
|
<path class="iconStroke" d="M18 18h6M18 26h8M18 34h6"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(190,56)">
|
||||||
|
<rect class="alarm" x="0" y="0" width="560" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Signos de alarma:</text>
|
||||||
|
<text class="small" x="16" y="44">GCS ↓, convulsiones, pupilas anormales, focalidad, hipoglucemia, agitación súbita, cefalea intensa</text>
|
||||||
|
<g transform="translate(520,14)">
|
||||||
|
<path class="iconStroke danger" d="M20 4L2 36h36L20 4Z"></path>
|
||||||
|
<line class="iconStroke danger" x1="20" y1="14" x2="20" y2="24"></line>
|
||||||
|
<circle class="dangerFill" cx="20" cy="30" r="2.5"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(780,56)">
|
||||||
|
<rect class="action" x="0" y="0" width="660" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Decisión prioritaria:</text>
|
||||||
|
<text class="small" x="16" y="44">¿Alteración neurológica crítica? → Glucemia capilar, proteger vía aérea, tratar convulsión según protocolo, controlar ventilación/oxigenación, valorar causa.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M800 798 V816"></path>
|
||||||
|
|
||||||
|
<!-- ===== E: Exposure ===== -->
|
||||||
|
<g transform="translate(70,818)">
|
||||||
|
<rect class="box" x="0" y="0" width="1460" height="132" rx="18"></rect>
|
||||||
|
<rect class="head" x="0" y="0" width="1460" height="44" rx="18"></rect>
|
||||||
|
<rect class="pill" x="16" y="10" width="64" height="24" rx="12"></rect>
|
||||||
|
<text class="letter" x="38" y="28">E</text>
|
||||||
|
<text class="step" x="96" y="29">E – Exposición / Entorno (Exposure) + control térmico</text>
|
||||||
|
|
||||||
|
<!-- Left icon (thermometer + body) -->
|
||||||
|
<g transform="translate(26,62)">
|
||||||
|
<path class="iconStroke" d="M18 10v26a10 10 0 1 0 12 0V10a6 6 0 0 0-12 0Z"></path>
|
||||||
|
<line class="iconStroke" x1="24" y1="18" x2="24" y2="36"></line>
|
||||||
|
<circle class="iconFill" cx="24" cy="40" r="4"></circle>
|
||||||
|
<path class="iconStroke" d="M44 18c6 10 6 20 0 30"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(190,56)">
|
||||||
|
<rect class="alarm" x="0" y="0" width="560" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Signos de alarma:</text>
|
||||||
|
<text class="small" x="16" y="44">Hemorragias ocultas, lesiones no vistas, hipotermia, quemaduras, contaminación, riesgo ambiental (calor/frío)</text>
|
||||||
|
<g transform="translate(520,14)">
|
||||||
|
<path class="iconStroke danger" d="M20 4L2 36h36L20 4Z"></path>
|
||||||
|
<line class="iconStroke danger" x1="20" y1="14" x2="20" y2="24"></line>
|
||||||
|
<circle class="dangerFill" cx="20" cy="30" r="2.5"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(780,56)">
|
||||||
|
<rect class="action" x="0" y="0" width="660" height="66" rx="14"></rect>
|
||||||
|
<text class="txt" x="16" y="22">Decisión prioritaria:</text>
|
||||||
|
<text class="small" x="16" y="44">Exponer lo necesario para explorar, mantener privacidad y calor (mantas térmicas), buscar lesiones ocultas, controlar el entorno y preparar traslado.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Note -->
|
||||||
|
<text class="small" x="70" y="968">Consejo TES: repetir ABCDE de forma cíclica. Si empeora en cualquier punto, volver a la letra comprometida.</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,334 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="980" viewBox="0 0 1600 980" role="img" aria-label="Colocación del Paciente en Tablero Espinal - Secuencia de 8 pasos">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.title{font:800 36px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
||||||
|
.sub{font:500 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#4b5563}
|
||||||
|
.stepN{font:800 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#0f172a}
|
||||||
|
.stepT{font:700 18px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
||||||
|
.lbl{font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#475569}
|
||||||
|
.note{font:500 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#6b7280}
|
||||||
|
.panel{fill:#ffffff;stroke:#e5e7eb;stroke-width:1}
|
||||||
|
.panelHead{fill:#f8fafc}
|
||||||
|
.gridLine{stroke:#e5e7eb;stroke-width:1}
|
||||||
|
.patient{fill:#e5eefc;stroke:#1f2937;stroke-width:2}
|
||||||
|
.patient2{fill:#e5eefc;stroke:#1f2937;stroke-width:2}
|
||||||
|
.head{fill:#e5eefc;stroke:#1f2937;stroke-width:2}
|
||||||
|
.board{fill:#fef3c7;stroke:#b45309;stroke-width:2}
|
||||||
|
.strap{stroke:#2563eb;stroke-width:4;stroke-linecap:round;opacity:.85}
|
||||||
|
.cSpine{stroke:#ef4444;stroke-width:5;stroke-linecap:round}
|
||||||
|
.collar{fill:#fde2e2;stroke:#ef4444;stroke-width:2}
|
||||||
|
.tes{fill:#d1fae5;stroke:#065f46;stroke-width:2}
|
||||||
|
.tes2{fill:#d1fae5;stroke:#065f46;stroke-width:2}
|
||||||
|
.hand{stroke:#065f46;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.arrow{stroke:#64748b;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.ok{fill:#dcfce7;stroke:#16a34a;stroke-width:2}
|
||||||
|
.warn{fill:#fff7ed;stroke:#f59e0b;stroke-width:2}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<marker id="arrowHead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||||||
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#64748b"></path>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect x="0" y="0" width="1600" height="980" fill="#ffffff"></rect>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text class="title" x="60" y="64">Colocación del Paciente en Tablero Espinal</text>
|
||||||
|
<text class="sub" x="60" y="92">Secuencia educativa en 8 pasos (estilo manual TES). Vistas lateral y superior según el paso. Esquema orientativo.</text>
|
||||||
|
|
||||||
|
<!-- Layout: 2 rows x 4 panels -->
|
||||||
|
<!-- Panel sizes -->
|
||||||
|
<!-- margin 60, gap 24 -->
|
||||||
|
<!-- panelW = (1600 - 2*60 - 3*24)/4 = 352 -->
|
||||||
|
<!-- panelH = 360 -->
|
||||||
|
<!-- Row1 y=130, Row2 y=514 -->
|
||||||
|
<!-- Each panel has header band -->
|
||||||
|
|
||||||
|
<!-- Helper: draw a panel group -->
|
||||||
|
<!-- PANEL 1 -->
|
||||||
|
<g transform="translate(60,130)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 1</text>
|
||||||
|
<text class="stepT" x="20" y="52">Control manual cervical</text>
|
||||||
|
|
||||||
|
<!-- View label -->
|
||||||
|
<text class="lbl" x="260" y="28">Vista lateral</text>
|
||||||
|
|
||||||
|
<!-- Scene (lateral) -->
|
||||||
|
<!-- Patient (side) -->
|
||||||
|
<g transform="translate(40,95)">
|
||||||
|
<!-- ground line -->
|
||||||
|
<line class="gridLine" x1="0" y1="210" x2="272" y2="210"></line>
|
||||||
|
<!-- patient body -->
|
||||||
|
<rect class="patient" x="80" y="120" width="160" height="44" rx="22"></rect>
|
||||||
|
<!-- head -->
|
||||||
|
<circle class="head" cx="70" cy="142" r="22"></circle>
|
||||||
|
<!-- neck highlight -->
|
||||||
|
<line class="cSpine" x1="88" y1="142" x2="98" y2="142"></line>
|
||||||
|
|
||||||
|
<!-- TES at head -->
|
||||||
|
<circle class="tes" cx="40" cy="110" r="18"></circle>
|
||||||
|
<rect class="tes" x="24" y="128" width="34" height="54" rx="12"></rect>
|
||||||
|
<!-- hands -->
|
||||||
|
<path class="hand" d="M52 138 C65 140, 64 152, 54 156"></path>
|
||||||
|
<path class="hand" d="M52 130 C66 132, 70 140, 62 146"></path>
|
||||||
|
<!-- emphasis arrows -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M30 70 C60 60, 72 92, 62 118"></path>
|
||||||
|
<text class="note" x="0" y="32">Sujeción neutra sin tracción</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- PANEL 2 -->
|
||||||
|
<g transform="translate(436,130)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 2</text>
|
||||||
|
<text class="stepT" x="20" y="52">Colocación de collarín cervical</text>
|
||||||
|
<text class="lbl" x="256" y="28">Vista lateral</text>
|
||||||
|
|
||||||
|
<g transform="translate(40,95)">
|
||||||
|
<line class="gridLine" x1="0" y1="210" x2="272" y2="210"></line>
|
||||||
|
<rect class="patient" x="80" y="120" width="160" height="44" rx="22"></rect>
|
||||||
|
<circle class="head" cx="70" cy="142" r="22"></circle>
|
||||||
|
|
||||||
|
<!-- Collar -->
|
||||||
|
<rect class="collar" x="82" y="132" width="18" height="20" rx="6"></rect>
|
||||||
|
<line class="cSpine" x1="88" y1="142" x2="98" y2="142" opacity="0.5"></line>
|
||||||
|
|
||||||
|
<!-- TES head holder -->
|
||||||
|
<circle class="tes" cx="40" cy="110" r="18"></circle>
|
||||||
|
<rect class="tes" x="24" y="128" width="34" height="54" rx="12"></rect>
|
||||||
|
<path class="hand" d="M52 134 C66 136, 70 142, 62 148"></path>
|
||||||
|
|
||||||
|
<!-- TES applying collar -->
|
||||||
|
<circle class="tes2" cx="214" cy="118" r="16"></circle>
|
||||||
|
<rect class="tes2" x="200" y="134" width="28" height="46" rx="10"></rect>
|
||||||
|
<path class="hand" d="M200 150 C170 148, 140 142, 104 142" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="note" x="0" y="32">Medir y ajustar antes de colocar</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- PANEL 3 -->
|
||||||
|
<g transform="translate(812,130)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 3</text>
|
||||||
|
<text class="stepT" x="20" y="52">Alineación del paciente</text>
|
||||||
|
<text class="lbl" x="252" y="28">Vista superior</text>
|
||||||
|
|
||||||
|
<!-- Scene (top) -->
|
||||||
|
<g transform="translate(34,92)">
|
||||||
|
<!-- patient top -->
|
||||||
|
<rect class="patient2" x="96" y="70" width="160" height="54" rx="26"></rect>
|
||||||
|
<circle class="head" cx="80" cy="97" r="22"></circle>
|
||||||
|
<!-- collar shown -->
|
||||||
|
<rect class="collar" x="94" y="87" width="20" height="20" rx="6"></rect>
|
||||||
|
|
||||||
|
<!-- spine axis -->
|
||||||
|
<line class="cSpine" x1="100" y1="97" x2="250" y2="97" opacity="0.65"></line>
|
||||||
|
|
||||||
|
<!-- TES positions (top view) -->
|
||||||
|
<circle class="tes" cx="48" cy="56" r="16"></circle>
|
||||||
|
<rect class="tes" x="34" y="72" width="28" height="44" rx="10"></rect>
|
||||||
|
<circle class="tes" cx="300" cy="56" r="16"></circle>
|
||||||
|
<rect class="tes" x="286" y="72" width="28" height="44" rx="10"></rect>
|
||||||
|
|
||||||
|
<!-- arrows to align -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M120 150 C150 170, 210 170, 240 150"></path>
|
||||||
|
<text class="note" x="0" y="14">Alinear cabeza-hombros-caderas (posición neutra)</text>
|
||||||
|
|
||||||
|
<!-- corner label -->
|
||||||
|
<rect class="warn" x="0" y="180" width="320" height="56" rx="12"></rect>
|
||||||
|
<text class="note" x="12" y="204">Evitar rotaciones. Reposicionar en bloque</text>
|
||||||
|
<text class="note" x="12" y="224">si hay dolor/ resistencia: reevaluar.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- PANEL 4 -->
|
||||||
|
<g transform="translate(1188,130)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 4</text>
|
||||||
|
<text class="stepT" x="20" y="52">Giro en bloque (log-roll)</text>
|
||||||
|
<text class="lbl" x="256" y="28">Vista lateral</text>
|
||||||
|
|
||||||
|
<g transform="translate(40,95)">
|
||||||
|
<line class="gridLine" x1="0" y1="210" x2="272" y2="210"></line>
|
||||||
|
|
||||||
|
<!-- patient rolled to side -->
|
||||||
|
<rect class="patient" x="98" y="118" width="150" height="48" rx="24" transform="rotate(-18 98 118)"></rect>
|
||||||
|
<circle class="head" cx="82" cy="138" r="22" transform="rotate(-18 82 138)"></circle>
|
||||||
|
<rect class="collar" x="94" y="128" width="18" height="20" rx="6" transform="rotate(-18 94 128)"></rect>
|
||||||
|
|
||||||
|
<!-- rotation arrow -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M160 86 C210 98, 224 140, 190 170"></path>
|
||||||
|
<text class="note" x="0" y="32">A la orden: girar en bloque</text>
|
||||||
|
|
||||||
|
<!-- TES team (3) -->
|
||||||
|
<circle class="tes" cx="40" cy="110" r="18"></circle>
|
||||||
|
<rect class="tes" x="24" y="128" width="34" height="54" rx="12"></rect>
|
||||||
|
<path class="hand" d="M52 134 C72 132, 82 136, 98 142"></path>
|
||||||
|
|
||||||
|
<circle class="tes2" cx="226" cy="110" r="16"></circle>
|
||||||
|
<rect class="tes2" x="212" y="126" width="28" height="50" rx="10"></rect>
|
||||||
|
<path class="hand" d="M212 146 C190 146, 170 148, 140 152"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- PANEL 5 -->
|
||||||
|
<g transform="translate(60,514)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 5</text>
|
||||||
|
<text class="stepT" x="20" y="52">Colocación del tablero espinal</text>
|
||||||
|
<text class="lbl" x="252" y="28">Vista superior</text>
|
||||||
|
|
||||||
|
<g transform="translate(34,92)">
|
||||||
|
<!-- patient on side (top-ish) -->
|
||||||
|
<rect class="patient2" x="110" y="76" width="160" height="46" rx="23"></rect>
|
||||||
|
<circle class="head" cx="94" cy="99" r="20"></circle>
|
||||||
|
<rect class="collar" x="108" y="89" width="18" height="20" rx="6"></rect>
|
||||||
|
|
||||||
|
<!-- board sliding in -->
|
||||||
|
<rect class="board" x="40" y="150" width="260" height="64" rx="14"></rect>
|
||||||
|
<circle cx="70" cy="182" r="5" fill="#b45309" opacity=".45"></circle>
|
||||||
|
<circle cx="270" cy="182" r="5" fill="#b45309" opacity=".45"></circle>
|
||||||
|
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M290 182 C320 182, 330 140, 292 116"></path>
|
||||||
|
<text class="note" x="0" y="14">Introducir el tablero por la espalda</text>
|
||||||
|
|
||||||
|
<!-- TES icons -->
|
||||||
|
<circle class="tes" cx="20" cy="52" r="14"></circle>
|
||||||
|
<rect class="tes" x="8" y="66" width="24" height="38" rx="9"></rect>
|
||||||
|
<circle class="tes2" cx="320" cy="52" r="14"></circle>
|
||||||
|
<rect class="tes2" x="308" y="66" width="24" height="38" rx="9"></rect>
|
||||||
|
|
||||||
|
<rect class="warn" x="0" y="238" width="320" height="52" rx="12"></rect>
|
||||||
|
<text class="note" x="12" y="260">Mantener control cervical durante toda la maniobra.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- PANEL 6 -->
|
||||||
|
<g transform="translate(436,514)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 6</text>
|
||||||
|
<text class="stepT" x="20" y="52">Retorno a decúbito supino</text>
|
||||||
|
<text class="lbl" x="252" y="28">Vista lateral</text>
|
||||||
|
|
||||||
|
<g transform="translate(40,95)">
|
||||||
|
<line class="gridLine" x1="0" y1="210" x2="272" y2="210"></line>
|
||||||
|
|
||||||
|
<!-- board under patient -->
|
||||||
|
<rect class="board" x="76" y="154" width="190" height="40" rx="12"></rect>
|
||||||
|
<!-- patient back on board -->
|
||||||
|
<rect class="patient" x="90" y="120" width="160" height="44" rx="22"></rect>
|
||||||
|
<circle class="head" cx="80" cy="142" r="22"></circle>
|
||||||
|
<rect class="collar" x="92" y="132" width="18" height="20" rx="6"></rect>
|
||||||
|
|
||||||
|
<!-- arrow back -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M204 88 C242 108, 240 148, 204 170"></path>
|
||||||
|
<text class="note" x="0" y="32">Bajar en bloque sobre el tablero</text>
|
||||||
|
|
||||||
|
<!-- TES -->
|
||||||
|
<circle class="tes" cx="40" cy="110" r="18"></circle>
|
||||||
|
<rect class="tes" x="24" y="128" width="34" height="54" rx="12"></rect>
|
||||||
|
<path class="hand" d="M52 134 C66 136, 74 140, 84 142"></path>
|
||||||
|
|
||||||
|
<circle class="tes2" cx="230" cy="112" r="16"></circle>
|
||||||
|
<rect class="tes2" x="216" y="128" width="28" height="52" rx="10"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- PANEL 7 -->
|
||||||
|
<g transform="translate(812,514)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 7</text>
|
||||||
|
<text class="stepT" x="20" y="52">Fijación con correas</text>
|
||||||
|
<text class="lbl" x="252" y="28">Vista superior</text>
|
||||||
|
|
||||||
|
<g transform="translate(34,92)">
|
||||||
|
<!-- board -->
|
||||||
|
<rect class="board" x="40" y="54" width="272" height="230" rx="18"></rect>
|
||||||
|
<!-- patient on board -->
|
||||||
|
<rect class="patient2" x="122" y="110" width="160" height="54" rx="26"></rect>
|
||||||
|
<circle class="head" cx="106" cy="137" r="22"></circle>
|
||||||
|
<rect class="collar" x="120" y="127" width="20" height="20" rx="6"></rect>
|
||||||
|
|
||||||
|
<!-- straps -->
|
||||||
|
<line class="strap" x1="72" y1="118" x2="298" y2="118"></line>
|
||||||
|
<line class="strap" x1="72" y1="148" x2="298" y2="148"></line>
|
||||||
|
<line class="strap" x1="72" y1="180" x2="298" y2="180"></line>
|
||||||
|
<line class="strap" x1="72" y1="212" x2="298" y2="212"></line>
|
||||||
|
|
||||||
|
<!-- strap buckles -->
|
||||||
|
<rect x="178" y="112" width="26" height="12" rx="4" fill="#1d4ed8" opacity=".35"></rect>
|
||||||
|
<rect x="178" y="142" width="26" height="12" rx="4" fill="#1d4ed8" opacity=".35"></rect>
|
||||||
|
<rect x="178" y="174" width="26" height="12" rx="4" fill="#1d4ed8" opacity=".35"></rect>
|
||||||
|
<rect x="178" y="206" width="26" height="12" rx="4" fill="#1d4ed8" opacity=".35"></rect>
|
||||||
|
|
||||||
|
<text class="note" x="0" y="14">Orden habitual: tórax → pelvis → piernas</text>
|
||||||
|
<text class="note" x="0" y="34">Sin comprometer ventilación.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- PANEL 8 -->
|
||||||
|
<g transform="translate(1188,514)">
|
||||||
|
<rect class="panel" x="0" y="0" width="352" height="360" rx="16"></rect>
|
||||||
|
<rect class="panelHead" x="0" y="0" width="352" height="66" rx="16"></rect>
|
||||||
|
<text class="stepN" x="20" y="28">PASO 8</text>
|
||||||
|
<text class="stepT" x="20" y="52">Verificación final de seguridad</text>
|
||||||
|
<text class="lbl" x="252" y="28">Vista mixta</text>
|
||||||
|
|
||||||
|
<g transform="translate(32,92)">
|
||||||
|
<!-- Left: top view mini -->
|
||||||
|
<rect class="panel" x="0" y="10" width="150" height="220" rx="14"></rect>
|
||||||
|
<text class="lbl" x="16" y="36">Superior</text>
|
||||||
|
<rect class="board" x="16" y="52" width="118" height="162" rx="14"></rect>
|
||||||
|
<rect class="patient2" x="40" y="98" width="90" height="40" rx="20"></rect>
|
||||||
|
<circle class="head" cx="34" cy="118" r="16"></circle>
|
||||||
|
<line class="strap" x1="26" y1="104" x2="126" y2="104"></line>
|
||||||
|
<line class="strap" x1="26" y1="130" x2="126" y2="130"></line>
|
||||||
|
<line class="strap" x1="26" y1="156" x2="126" y2="156"></line>
|
||||||
|
|
||||||
|
<!-- Right: checklist -->
|
||||||
|
<rect class="ok" x="170" y="10" width="150" height="220" rx="14"></rect>
|
||||||
|
<text class="lbl" x="186" y="36">Checklist</text>
|
||||||
|
|
||||||
|
<!-- check marks -->
|
||||||
|
<g transform="translate(186,58)">
|
||||||
|
<path d="M0 10 L8 18 L22 2" stroke="#16a34a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
|
<text class="note" x="32" y="14">Control cervical</text>
|
||||||
|
|
||||||
|
<g transform="translate(0,36)">
|
||||||
|
<path d="M0 10 L8 18 L22 2" stroke="#16a34a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
|
<text class="note" x="32" y="14">Collarín correcto</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(0,72)">
|
||||||
|
<path d="M0 10 L8 18 L22 2" stroke="#16a34a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
|
<text class="note" x="32" y="14">Correas firmes</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(0,108)">
|
||||||
|
<path d="M0 10 L8 18 L22 2" stroke="#16a34a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
|
<text class="note" x="32" y="14">Extremidades seguras</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(0,144)">
|
||||||
|
<path d="M0 10 L8 18 L22 2" stroke="#16a34a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
|
<text class="note" x="32" y="14">Reevaluar SV</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="note" x="0" y="260">Confirmar ventilación, pulsos distales y confort.</text>
|
||||||
|
<text class="note" x="0" y="282">Documentar hallazgos y tiempos.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<text class="note" x="60" y="942">Uso didáctico TES. Adaptar a protocolos locales y situación clínica (prioridad: vía aérea/ventilación/hemorragias).</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
|
|
@ -0,0 +1,213 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1650" viewBox="0 0 1000 1650" role="img" aria-label="Selección del Dispositivo de Oxigenoterapia">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.bg { fill:#ffffff; }
|
||||||
|
.title { font: 700 30px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#1f3b55; }
|
||||||
|
.sub { font: 500 15px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#3a5873; }
|
||||||
|
.txt { font: 600 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#163246; }
|
||||||
|
.small { font: 500 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#2f516a; }
|
||||||
|
.note { font: 500 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#2f516a; }
|
||||||
|
.box { fill:#f5fbff; stroke:#5aa7d6; stroke-width:2.2; }
|
||||||
|
.box2 { fill:#eef7ff; stroke:#5aa7d6; stroke-width:2.2; }
|
||||||
|
.decision { fill:#f2f8ff; stroke:#5aa7d6; stroke-width:2.2; }
|
||||||
|
.device { fill:#f7fbff; stroke:#3f90c1; stroke-width:2.4; }
|
||||||
|
.arrow { stroke:#3f90c1; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
|
||||||
|
.label { font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#1f5f86; }
|
||||||
|
.hand { stroke:#3f90c1; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.95;}
|
||||||
|
.shadow { filter:url(#shadow); }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#0b3756" flood-opacity="0.12"></feDropShadow>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<marker id="arrowHead" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
|
||||||
|
<path d="M1,1 L11,6 L1,11" fill="none" stroke="#3f90c1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect class="bg" x="0" y="0" width="1000" height="1650"></rect>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<text class="title" x="500" y="70" text-anchor="middle">Selección del Dispositivo de Oxigenoterapia</text>
|
||||||
|
<text class="sub" x="500" y="102" text-anchor="middle">Flujograma clínico orientativo (TES) • Colores suaves • Iconografía médica simple</text>
|
||||||
|
|
||||||
|
<!-- Top icon (lungs + O2) -->
|
||||||
|
<g transform="translate(430,125)">
|
||||||
|
<!-- lungs -->
|
||||||
|
<path class="hand" d="M60 40 C45 35,35 45,32 62 C28 85,40 102,56 108 C66 111,76 108,82 100 C88 92,88 78,84 68 C80 54,72 44,60 40Z"></path>
|
||||||
|
<path class="hand" d="M100 40 C115 35,125 45,128 62 C132 85,120 102,104 108 C94 111,84 108,78 100 C72 92,72 78,76 68 C80 54,88 44,100 40Z"></path>
|
||||||
|
<path class="hand" d="M80 38 L80 78"></path>
|
||||||
|
<!-- O2 bubble -->
|
||||||
|
<circle cx="155" cy="55" r="18" fill="#e8f5ff" stroke="#3f90c1" stroke-width="2"></circle>
|
||||||
|
<text x="155" y="60" text-anchor="middle" class="label">O₂</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Start -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="box" x="170" y="180" rx="18" ry="18" width="660" height="90"></rect>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="500" y="218" text-anchor="middle">Inicio</text>
|
||||||
|
<text class="small" x="500" y="245" text-anchor="middle">Paciente con dificultad respiratoria / hipoxemia</text>
|
||||||
|
|
||||||
|
<!-- Arrow to Decision 1 -->
|
||||||
|
<path class="arrow" d="M500 270 L500 320" marker-end="url(#arrowHead)"></path>
|
||||||
|
|
||||||
|
<!-- Decision 1: Respira espontáneamente? -->
|
||||||
|
<g class="shadow">
|
||||||
|
<polygon class="decision" points="500,330 640,395 500,460 360,395"></polygon>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="500" y="390" text-anchor="middle">¿Respira espontáneamente?</text>
|
||||||
|
|
||||||
|
<!-- No branch to BVM -->
|
||||||
|
<path class="arrow" d="M360 395 L210 395 L210 560" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="300" y="378" text-anchor="middle">NO</text>
|
||||||
|
|
||||||
|
<!-- Yes branch to Decision 2 -->
|
||||||
|
<path class="arrow" d="M500 460 L500 520" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="520" y="500">SÍ</text>
|
||||||
|
|
||||||
|
<!-- Device: BVM -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="device" x="90" y="570" rx="18" ry="18" width="360" height="130"></rect>
|
||||||
|
</g>
|
||||||
|
<!-- simple icon: bag-valve-mask -->
|
||||||
|
<g transform="translate(115,595)">
|
||||||
|
<path class="hand" d="M40 60 C30 55,22 45,22 34 C22 18,35 8,50 10 C64 12,74 26,70 41 C67 53,54 63,40 60Z"></path>
|
||||||
|
<path class="hand" d="M70 42 L105 52 C118 56,126 70,120 83 C114 96,97 100,85 91 L62 75"></path>
|
||||||
|
<path class="hand" d="M110 50 L140 35 C148 31,158 34,162 42 C166 50,163 60,155 64 L128 78"></path>
|
||||||
|
<path class="hand" d="M28 32 L10 22"></path>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="270" y="615" text-anchor="middle">Bolsa-válvula-mascarilla con O₂</text>
|
||||||
|
<text class="small" x="270" y="645" text-anchor="middle">Flujo: 15 L/min</text>
|
||||||
|
<text class="small" x="270" y="670" text-anchor="middle">FiO₂ aprox.: 0,90–1,00 (con buen sellado)</text>
|
||||||
|
<text class="note" x="270" y="695" text-anchor="middle">→ Priorizar ventilación + reevaluación continua</text>
|
||||||
|
|
||||||
|
<!-- Decision 2: SatO2 >=94? -->
|
||||||
|
<g class="shadow">
|
||||||
|
<polygon class="decision" points="500,530 640,595 500,660 360,595"></polygon>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="500" y="590" text-anchor="middle">¿SatO₂ ≥ 94%?</text>
|
||||||
|
|
||||||
|
<!-- NO branch to higher O2 path -->
|
||||||
|
<path class="arrow" d="M360 595 L300 595 L300 740" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="330" y="578" text-anchor="middle">NO</text>
|
||||||
|
|
||||||
|
<!-- YES branch to Decision 3 -->
|
||||||
|
<path class="arrow" d="M500 660 L500 720" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="520" y="705">SÍ</text>
|
||||||
|
|
||||||
|
<!-- Device: Nasal cannula (for stable sats) -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="device" x="560" y="720" rx="18" ry="18" width="360" height="130"></rect>
|
||||||
|
</g>
|
||||||
|
<!-- icon: nasal cannula -->
|
||||||
|
<g transform="translate(585,745)">
|
||||||
|
<path class="hand" d="M50 25 C55 15,70 15,75 25"></path>
|
||||||
|
<path class="hand" d="M50 25 C40 45,40 70,55 85"></path>
|
||||||
|
<path class="hand" d="M75 25 C85 45,85 70,70 85"></path>
|
||||||
|
<path class="hand" d="M55 85 C60 92,65 96,72 98"></path>
|
||||||
|
<path class="hand" d="M55 35 L55 45"></path>
|
||||||
|
<path class="hand" d="M70 35 L70 45"></path>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="740" y="765" text-anchor="middle">Gafas nasales</text>
|
||||||
|
<text class="small" x="740" y="795" text-anchor="middle">Flujo: 1–6 L/min</text>
|
||||||
|
<text class="small" x="740" y="820" text-anchor="middle">FiO₂ aprox.: 0,24–0,44</text>
|
||||||
|
|
||||||
|
<!-- Decision 3: FR normal or increased? -->
|
||||||
|
<g class="shadow">
|
||||||
|
<polygon class="decision" points="500,870 640,935 500,1000 360,935"></polygon>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="500" y="930" text-anchor="middle">¿FR normal o aumentada?</text>
|
||||||
|
|
||||||
|
<!-- Connect from Nasal cannula to Decision 3 (down from right device) -->
|
||||||
|
<path class="arrow" d="M740 850 L740 900 L640 935" marker-end="url(#arrowHead)"></path>
|
||||||
|
|
||||||
|
<!-- YES (increased) -> assess ventilation effectiveness decision 4 -->
|
||||||
|
<path class="arrow" d="M500 1000 L500 1060" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="520" y="1045">AUMENTADA / TRABAJO RESP.</text>
|
||||||
|
|
||||||
|
<!-- NO (normal) -> continue nasal cannula / monitor -->
|
||||||
|
<path class="arrow" d="M360 935 L210 935 L210 1025" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="305" y="918" text-anchor="middle">NORMAL</text>
|
||||||
|
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="box2" x="90" y="1035" rx="18" ry="18" width="360" height="115"></rect>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="270" y="1070" text-anchor="middle">Mantener gafas nasales</text>
|
||||||
|
<text class="small" x="270" y="1098" text-anchor="middle">Monitorizar SatO₂, FR y esfuerzo</text>
|
||||||
|
<text class="note" x="270" y="1125" text-anchor="middle">→ Reajustar si empeora</text>
|
||||||
|
|
||||||
|
<!-- Decision 4: Ventilation ineffective? -->
|
||||||
|
<g class="shadow">
|
||||||
|
<polygon class="decision" points="500,1070 650,1145 500,1220 350,1145"></polygon>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="500" y="1140" text-anchor="middle">¿Ventilación ineficaz?</text>
|
||||||
|
<text class="small" x="500" y="1165" text-anchor="middle">(fatiga, hipoventilación, mal patrón, deterioro)</text>
|
||||||
|
|
||||||
|
<!-- NO -> simple mask / titrate -->
|
||||||
|
<path class="arrow" d="M350 1145 L250 1145 L250 1280" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="315" y="1126" text-anchor="middle">NO</text>
|
||||||
|
|
||||||
|
<!-- YES -> NRB / BVM depending on severity -->
|
||||||
|
<path class="arrow" d="M500 1220 L500 1280" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="label" x="520" y="1265">SÍ</text>
|
||||||
|
|
||||||
|
<!-- Device: Simple mask -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="device" x="70" y="1290" rx="18" ry="18" width="420" height="140"></rect>
|
||||||
|
</g>
|
||||||
|
<!-- icon: simple face mask -->
|
||||||
|
<g transform="translate(95,1318)">
|
||||||
|
<path class="hand" d="M70 20 C52 22,38 40,40 60 C42 84,60 102,80 104 C100 102,118 84,120 60 C122 40,108 22,90 20 Z"></path>
|
||||||
|
<path class="hand" d="M52 58 C60 55,70 55,80 55 C90 55,100 55,108 58"></path>
|
||||||
|
<path class="hand" d="M40 55 L18 45"></path>
|
||||||
|
<path class="hand" d="M120 55 L142 45"></path>
|
||||||
|
<path class="hand" d="M80 104 L80 128"></path>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="280" y="1332" text-anchor="middle">Mascarilla simple</text>
|
||||||
|
<text class="small" x="280" y="1362" text-anchor="middle">Flujo: 5–10 L/min</text>
|
||||||
|
<text class="small" x="280" y="1387" text-anchor="middle">FiO₂ aprox.: 0,35–0,55</text>
|
||||||
|
<text class="note" x="280" y="1414" text-anchor="middle">→ Aumentar si SatO₂ baja o empeora el trabajo respiratorio</text>
|
||||||
|
|
||||||
|
<!-- Device: Non-rebreather mask -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="device" x="530" y="1290" rx="18" ry="18" width="400" height="155"></rect>
|
||||||
|
</g>
|
||||||
|
<!-- icon: reservoir mask -->
|
||||||
|
<g transform="translate(555,1315)">
|
||||||
|
<path class="hand" d="M70 20 C52 22,38 40,40 60 C42 84,60 102,80 104 C100 102,118 84,120 60 C122 40,108 22,90 20 Z"></path>
|
||||||
|
<path class="hand" d="M40 55 L18 45"></path>
|
||||||
|
<path class="hand" d="M120 55 L142 45"></path>
|
||||||
|
<path class="hand" d="M80 104 L80 118"></path>
|
||||||
|
<path class="hand" d="M62 122 C62 108,98 108,98 122 L98 148 C98 160,62 160,62 148 Z"></path>
|
||||||
|
<path class="hand" d="M62 136 L98 136"></path>
|
||||||
|
</g>
|
||||||
|
<text class="txt" x="730" y="1330" text-anchor="middle">Mascarilla con reservorio</text>
|
||||||
|
<text class="small" x="730" y="1360" text-anchor="middle">Flujo: 10–15 L/min</text>
|
||||||
|
<text class="small" x="730" y="1385" text-anchor="middle">FiO₂ aprox.: 0,60–0,90</text>
|
||||||
|
<text class="note" x="730" y="1412" text-anchor="middle">→ Si ventilación ineficaz: considerar BVM</text>
|
||||||
|
|
||||||
|
<!-- Arrow from Decision 4 YES to both NRB and BVM suggestion -->
|
||||||
|
<path class="arrow" d="M500 1280 L500 1288" marker-end="url(#arrowHead)"></path>
|
||||||
|
|
||||||
|
<!-- Connector: from Decision 4 YES to NRB (down then right) -->
|
||||||
|
<path class="arrow" d="M500 1280 L500 1290 L530 1290" marker-end="url(#arrowHead)"></path>
|
||||||
|
|
||||||
|
<!-- Footer guidance -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="box2" x="170" y="1475" rx="18" ry="18" width="660" height="125"></rect>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- small medical cross icon -->
|
||||||
|
<g transform="translate(210,1506)">
|
||||||
|
<rect x="0" y="18" width="44" height="12" rx="4" fill="#dff1ff" stroke="#3f90c1" stroke-width="2"></rect>
|
||||||
|
<rect x="16" y="2" width="12" height="44" rx="4" fill="#dff1ff" stroke="#3f90c1" stroke-width="2"></rect>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="txt" x="530" y="1515" text-anchor="middle">Reevaluación y titulación</text>
|
||||||
|
<text class="small" x="530" y="1543" text-anchor="middle">Objetivo general: SatO₂ ≥ 94% (individualizar según protocolo local y clínica).</text>
|
||||||
|
<text class="small" x="530" y="1568" text-anchor="middle">Vigilar: FR, esfuerzo, nivel de conciencia, auscultación, signos de fatiga y respuesta al O₂.</text>
|
||||||
|
<text class="note" x="530" y="1595" text-anchor="middle">Los rangos de FiO₂ son aproximados y dependen de sellado, patrón respiratorio y ajuste del flujo.</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,322 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1700" viewBox="0 0 1200 1700" role="img" aria-label="Colocación Correcta de Dispositivos de Oxigenoterapia - 6 pasos">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.bg{fill:#fff}
|
||||||
|
.title{font:700 34px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#1f3b55}
|
||||||
|
.sub{font:500 15px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#3a5873}
|
||||||
|
.h{font:700 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#163246}
|
||||||
|
.t{font:600 14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#23465f}
|
||||||
|
.tiny{font:500 13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#2f516a}
|
||||||
|
.num{font:800 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#0e4f74}
|
||||||
|
.card{fill:#f5fbff;stroke:#5aa7d6;stroke-width:2.2}
|
||||||
|
.iconStroke{stroke:#3f90c1;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.iconFill{fill:#e8f5ff;stroke:#3f90c1;stroke-width:2.2}
|
||||||
|
.arrow{stroke:#3f90c1;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.badge{fill:#dff1ff;stroke:#3f90c1;stroke-width:2}
|
||||||
|
.shadow{filter:url(#shadow)}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#0b3756" flood-opacity="0.12"></feDropShadow>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<marker id="arrowHead" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
|
||||||
|
<path d="M1,1 L11,6 L1,11" fill="none" stroke="#3f90c1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect class="bg" x="0" y="0" width="1200" height="1700"></rect>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<text class="title" x="600" y="78" text-anchor="middle">Colocación Correcta de Dispositivos de Oxigenoterapia</text>
|
||||||
|
<text class="sub" x="600" y="110" text-anchor="middle">Serie ilustrada paso a paso (6) • Estilo flat sanitario • Paciente genérico • Textos cortos</text>
|
||||||
|
|
||||||
|
<!-- Layout constants (3 cols x 2 rows) -->
|
||||||
|
<!-- Cards: 360x620? Let's do 340x640-ish; but in 2 rows: 6 cards total -->
|
||||||
|
<!-- Card size -->
|
||||||
|
<!-- First row y=160, second row y=920 -->
|
||||||
|
<!-- x positions: 70, 420, 770 -->
|
||||||
|
<!-- card w=360 h=700 -->
|
||||||
|
<!-- We'll fit with margins -->
|
||||||
|
<!-- Card size -->
|
||||||
|
<!-- w=360 h=700 -->
|
||||||
|
|
||||||
|
<!-- Reusable patient icon (head + torso) -->
|
||||||
|
<!-- Step 1 -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="card" x="70" y="160" rx="22" ry="22" width="360" height="700"></rect>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(95,185)">
|
||||||
|
<circle class="badge" cx="22" cy="22" r="18"></circle>
|
||||||
|
<text class="num" x="22" y="27" text-anchor="middle">1</text>
|
||||||
|
<text class="h" x="55" y="28">Evaluación inicial</text>
|
||||||
|
<text class="t" x="0" y="62">• ABC y nivel de conciencia</text>
|
||||||
|
<text class="t" x="0" y="84">• FR, esfuerzo respiratorio</text>
|
||||||
|
<text class="t" x="0" y="106">• SatO₂ y signos de hipoxemia</text>
|
||||||
|
|
||||||
|
<!-- Patient + stethoscope + monitor -->
|
||||||
|
<g transform="translate(25,140)">
|
||||||
|
<!-- patient -->
|
||||||
|
<circle class="iconFill" cx="110" cy="60" r="38"></circle>
|
||||||
|
<path class="iconFill" d="M60 140 C60 110,85 92,110 92 C135 92,160 110,160 140 L160 210 L60 210 Z"></path>
|
||||||
|
<!-- stethoscope -->
|
||||||
|
<path class="iconStroke" d="M50 110 C40 90,40 70,55 58"></path>
|
||||||
|
<path class="iconStroke" d="M170 110 C180 90,180 70,165 58"></path>
|
||||||
|
<path class="iconStroke" d="M110 118 C110 150,140 155,150 145"></path>
|
||||||
|
<circle class="iconFill" cx="156" cy="143" r="10"></circle>
|
||||||
|
|
||||||
|
<!-- pulse-ox monitor -->
|
||||||
|
<rect class="iconFill" x="190" y="30" rx="14" ry="14" width="110" height="90"></rect>
|
||||||
|
<path class="iconStroke" d="M205 80 L222 80 L232 60 L246 100 L260 75 L272 75"></path>
|
||||||
|
<text class="tiny" x="245" y="55" text-anchor="middle">SatO₂</text>
|
||||||
|
|
||||||
|
<!-- small arrow to imply check -->
|
||||||
|
<path class="arrow" d="M168 70 L190 70" marker-end="url(#arrowHead)"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="tiny" x="0" y="610">Clave: identificar hipoxemia y/o ventilación ineficaz.</text>
|
||||||
|
<text class="tiny" x="0" y="632">Registrar valores basales antes de iniciar O₂.</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Step 2 -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="card" x="420" y="160" rx="22" ry="22" width="360" height="700"></rect>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(445,185)">
|
||||||
|
<circle class="badge" cx="22" cy="22" r="18"></circle>
|
||||||
|
<text class="num" x="22" y="27" text-anchor="middle">2</text>
|
||||||
|
<text class="h" x="55" y="28">Selección del dispositivo</text>
|
||||||
|
<text class="t" x="0" y="62">• Según SatO₂, FR y clínica</text>
|
||||||
|
<text class="t" x="0" y="84">• Objetivo de oxigenación</text>
|
||||||
|
<text class="t" x="0" y="106">• Escalar si no hay respuesta</text>
|
||||||
|
|
||||||
|
<!-- Devices icons row -->
|
||||||
|
<g transform="translate(10,150)">
|
||||||
|
<!-- nasal cannula -->
|
||||||
|
<rect class="iconFill" x="0" y="0" rx="18" ry="18" width="150" height="170"></rect>
|
||||||
|
<path class="iconStroke" d="M50 55 C55 40,75 40,80 55"></path>
|
||||||
|
<path class="iconStroke" d="M50 55 C40 80,45 110,65 125"></path>
|
||||||
|
<path class="iconStroke" d="M80 55 C90 80,85 110,65 125"></path>
|
||||||
|
<path class="iconStroke" d="M65 80 L65 94"></path>
|
||||||
|
<text class="tiny" x="75" y="152" text-anchor="middle">Gafas</text>
|
||||||
|
|
||||||
|
<!-- simple mask -->
|
||||||
|
<rect class="iconFill" x="170" y="0" rx="18" ry="18" width="150" height="170"></rect>
|
||||||
|
<path class="iconStroke" d="M245 40 C225 42,212 62,214 82 C216 106,232 122,245 124 C258 122,274 106,276 82 C278 62,265 42,245 40 Z"></path>
|
||||||
|
<path class="iconStroke" d="M214 80 L195 70"></path>
|
||||||
|
<path class="iconStroke" d="M276 80 L295 70"></path>
|
||||||
|
<text class="tiny" x="245" y="152" text-anchor="middle">Simple</text>
|
||||||
|
|
||||||
|
<!-- reservoir -->
|
||||||
|
<rect class="iconFill" x="0" y="190" rx="18" ry="18" width="150" height="170"></rect>
|
||||||
|
<path class="iconStroke" d="M75 230 C55 232,42 252,44 272 C46 296,62 312,75 314 C88 312,104 296,106 272 C108 252,95 232,75 230 Z"></path>
|
||||||
|
<path class="iconStroke" d="M44 270 L25 260"></path>
|
||||||
|
<path class="iconStroke" d="M106 270 L125 260"></path>
|
||||||
|
<path class="iconStroke" d="M60 325 C60 312,90 312,90 325 L90 350 C90 362,60 362,60 350 Z"></path>
|
||||||
|
<text class="tiny" x="75" y="342" text-anchor="middle">Reserv.</text>
|
||||||
|
|
||||||
|
<!-- BVM -->
|
||||||
|
<rect class="iconFill" x="170" y="190" rx="18" ry="18" width="150" height="170"></rect>
|
||||||
|
<path class="iconStroke" d="M220 310 C212 305,205 296,205 286 C205 272,216 264,229 266 C241 268,250 280,247 293 C245 304,232 314,220 310 Z"></path>
|
||||||
|
<path class="iconStroke" d="M247 294 L280 304 C291 308,297 321,292 332 C287 343,273 346,263 338 L242 325"></path>
|
||||||
|
<path class="iconStroke" d="M280 300 L305 288"></path>
|
||||||
|
<text class="tiny" x="245" y="342" text-anchor="middle">BVM</text>
|
||||||
|
|
||||||
|
<!-- arrows between device choices -->
|
||||||
|
<path class="arrow" d="M150 85 L170 85" marker-end="url(#arrowHead)"></path>
|
||||||
|
<path class="arrow" d="M245 170 L245 190" marker-end="url(#arrowHead)"></path>
|
||||||
|
<path class="arrow" d="M150 275 L170 275" marker-end="url(#arrowHead)"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="tiny" x="0" y="610">Idea: empezar con el mínimo efectivo y titular según respuesta.</text>
|
||||||
|
<text class="tiny" x="0" y="632">Si ventilación ineficaz → priorizar ventilación asistida.</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Step 3 -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="card" x="770" y="160" rx="22" ry="22" width="360" height="700"></rect>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(795,185)">
|
||||||
|
<circle class="badge" cx="22" cy="22" r="18"></circle>
|
||||||
|
<text class="num" x="22" y="27" text-anchor="middle">3</text>
|
||||||
|
<text class="h" x="55" y="28">Preparación material y flujo</text>
|
||||||
|
<text class="t" x="0" y="62">• Verificar fuente de O₂</text>
|
||||||
|
<text class="t" x="0" y="84">• Conectar y purgar sistema</text>
|
||||||
|
<text class="t" x="0" y="106">• Ajustar caudal indicado</text>
|
||||||
|
|
||||||
|
<!-- O2 cylinder + flowmeter + tubing -->
|
||||||
|
<g transform="translate(20,150)">
|
||||||
|
<!-- cylinder -->
|
||||||
|
<rect class="iconFill" x="10" y="10" rx="22" ry="22" width="90" height="260"></rect>
|
||||||
|
<rect class="iconFill" x="25" y="-6" rx="10" ry="10" width="60" height="30"></rect>
|
||||||
|
<text class="tiny" x="55" y="80" text-anchor="middle">O₂</text>
|
||||||
|
|
||||||
|
<!-- flowmeter -->
|
||||||
|
<rect class="iconFill" x="130" y="40" rx="16" ry="16" width="160" height="120"></rect>
|
||||||
|
<circle class="iconFill" cx="160" cy="100" r="18"></circle>
|
||||||
|
<path class="iconStroke" d="M160 100 L175 88"></path>
|
||||||
|
<text class="tiny" x="250" y="78" text-anchor="middle">Caudalímetro</text>
|
||||||
|
<text class="tiny" x="250" y="100" text-anchor="middle">L/min</text>
|
||||||
|
|
||||||
|
<!-- tubing -->
|
||||||
|
<path class="iconStroke" d="M100 120 C120 120,120 100,130 100"></path>
|
||||||
|
<path class="iconStroke" d="M290 100 C320 100,325 120,310 140 C295 160,320 180,335 195"></path>
|
||||||
|
<!-- device connector -->
|
||||||
|
<rect class="iconFill" x="320" y="190" rx="14" ry="14" width="40" height="40"></rect>
|
||||||
|
<path class="iconStroke" d="M330 210 L350 210"></path>
|
||||||
|
|
||||||
|
<!-- arrows -->
|
||||||
|
<path class="arrow" d="M105 120 L130 100" marker-end="url(#arrowHead)"></path>
|
||||||
|
<path class="arrow" d="M290 100 L320 190" marker-end="url(#arrowHead)"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="tiny" x="0" y="610">Comprobar fugas y que el flujo es audible/visible.</text>
|
||||||
|
<text class="tiny" x="0" y="632">Reservorio: inflarlo antes de colocar (si aplica).</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Row arrows between cards (top row) -->
|
||||||
|
<path class="arrow" d="M430 510 L420 510" marker-end="url(#arrowHead)"></path>
|
||||||
|
<path class="arrow" d="M780 510 L770 510" marker-end="url(#arrowHead)"></path>
|
||||||
|
|
||||||
|
<!-- Step 4 -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="card" x="70" y="920" rx="22" ry="22" width="360" height="700"></rect>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(95,945)">
|
||||||
|
<circle class="badge" cx="22" cy="22" r="18"></circle>
|
||||||
|
<text class="num" x="22" y="27" text-anchor="middle">4</text>
|
||||||
|
<text class="h" x="55" y="28">Colocación correcta</text>
|
||||||
|
<text class="t" x="0" y="62">• Posición cómoda (semi-Fowler)</text>
|
||||||
|
<text class="t" x="0" y="84">• Sellado adecuado (mascarillas)</text>
|
||||||
|
<text class="t" x="0" y="106">• Fijación sin compresión excesiva</text>
|
||||||
|
|
||||||
|
<!-- patient + mask placement with arrows -->
|
||||||
|
<g transform="translate(20,150)">
|
||||||
|
<!-- patient -->
|
||||||
|
<circle class="iconFill" cx="150" cy="70" r="40"></circle>
|
||||||
|
<path class="iconFill" d="M95 160 C95 125,122 100,150 100 C178 100,205 125,205 160 L205 235 L95 235 Z"></path>
|
||||||
|
|
||||||
|
<!-- mask -->
|
||||||
|
<path class="iconFill" d="M150 95 C130 98,118 115,120 132 C122 155,140 170,150 172 C160 170,178 155,180 132 C182 115,170 98,150 95 Z"></path>
|
||||||
|
<path class="iconStroke" d="M120 130 L95 118"></path>
|
||||||
|
<path class="iconStroke" d="M180 130 L205 118"></path>
|
||||||
|
<path class="iconStroke" d="M150 172 L150 190"></path>
|
||||||
|
|
||||||
|
<!-- straps -->
|
||||||
|
<path class="iconStroke" d="M122 120 C95 115,78 105,60 90"></path>
|
||||||
|
<path class="iconStroke" d="M178 120 C205 115,222 105,240 90"></path>
|
||||||
|
|
||||||
|
<!-- arrows showing placement -->
|
||||||
|
<path class="arrow" d="M65 70 L110 110" marker-end="url(#arrowHead)"></path>
|
||||||
|
<path class="arrow" d="M235 70 L190 110" marker-end="url(#arrowHead)"></path>
|
||||||
|
|
||||||
|
<text class="tiny" x="150" y="265" text-anchor="middle">Centrar sobre nariz y boca</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="tiny" x="0" y="610">Gafas: puntas hacia abajo y ajustar bajo mentón si es necesario.</text>
|
||||||
|
<text class="tiny" x="0" y="632">BVM: sellado “CE” con dos manos si es posible.</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Step 5 -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="card" x="420" y="920" rx="22" ry="22" width="360" height="700"></rect>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(445,945)">
|
||||||
|
<circle class="badge" cx="22" cy="22" r="18"></circle>
|
||||||
|
<text class="num" x="22" y="27" text-anchor="middle">5</text>
|
||||||
|
<text class="h" x="55" y="28">Ajuste y confort</text>
|
||||||
|
<text class="t" x="0" y="62">• Explicar el procedimiento</text>
|
||||||
|
<text class="t" x="0" y="84">• Ajustar bandas y puntos de presión</text>
|
||||||
|
<text class="t" x="0" y="106">• Humidificar si procede (tiempo)</text>
|
||||||
|
|
||||||
|
<!-- patient + comfort checks icons -->
|
||||||
|
<g transform="translate(25,150)">
|
||||||
|
<!-- patient -->
|
||||||
|
<circle class="iconFill" cx="150" cy="70" r="40"></circle>
|
||||||
|
<path class="iconFill" d="M95 160 C95 125,122 100,150 100 C178 100,205 125,205 160 L205 235 L95 235 Z"></path>
|
||||||
|
<!-- nasal cannula on patient -->
|
||||||
|
<path class="iconStroke" d="M130 92 C136 84,144 82,150 82 C156 82,164 84,170 92"></path>
|
||||||
|
<path class="iconStroke" d="M130 92 C120 110,120 135,138 150"></path>
|
||||||
|
<path class="iconStroke" d="M170 92 C180 110,180 135,162 150"></path>
|
||||||
|
|
||||||
|
<!-- speech bubble -->
|
||||||
|
<path class="iconFill" d="M240 35 rx"></path>
|
||||||
|
<path class="iconFill" d="M235 30 C235 14,250 4,268 4 L318 4 C336 4,351 14,351 30 L351 60 C351 76,336 86,318 86 L288 86 L272 100 L274 86 L268 86 C250 86,235 76,235 60 Z"></path>
|
||||||
|
<text class="tiny" x="293" y="38" text-anchor="middle">Respira</text>
|
||||||
|
<text class="tiny" x="293" y="56" text-anchor="middle">tranquilo</text>
|
||||||
|
|
||||||
|
<!-- comfort icons: strap + skin -->
|
||||||
|
<rect class="iconFill" x="20" y="260" rx="16" ry="16" width="120" height="70"></rect>
|
||||||
|
<path class="iconStroke" d="M40 295 C55 280,70 280,85 295 C100 310,115 310,130 295"></path>
|
||||||
|
<text class="tiny" x="80" y="320" text-anchor="middle">Ajuste</text>
|
||||||
|
|
||||||
|
<rect class="iconFill" x="160" y="260" rx="16" ry="16" width="170" height="70"></rect>
|
||||||
|
<path class="iconStroke" d="M185 305 C195 285,215 280,232 290 C248 299,270 296,285 286"></path>
|
||||||
|
<text class="tiny" x="245" y="320" text-anchor="middle">Piel / presión</text>
|
||||||
|
|
||||||
|
<!-- arrows -->
|
||||||
|
<path class="arrow" d="M210 105 L240 70" marker-end="url(#arrowHead)"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="tiny" x="0" y="610">Evitar fugas (mascarillas) y lesiones por presión (bandas).</text>
|
||||||
|
<text class="tiny" x="0" y="632">Si ansiedad: acompañar, explicar y reevaluar tolerancia.</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Step 6 -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="card" x="770" y="920" rx="22" ry="22" width="360" height="700"></rect>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(795,945)">
|
||||||
|
<circle class="badge" cx="22" cy="22" r="18"></circle>
|
||||||
|
<text class="num" x="22" y="27" text-anchor="middle">6</text>
|
||||||
|
<text class="h" x="55" y="28">Verificación y respuesta</text>
|
||||||
|
<text class="t" x="0" y="62">• Comprobar SatO₂ y FR</text>
|
||||||
|
<text class="t" x="0" y="84">• Valorar trabajo respiratorio</text>
|
||||||
|
<text class="t" x="0" y="106">• Escalar / titular según clínica</text>
|
||||||
|
|
||||||
|
<!-- monitor + checklist + arrows -->
|
||||||
|
<g transform="translate(20,150)">
|
||||||
|
<!-- monitor -->
|
||||||
|
<rect class="iconFill" x="10" y="20" rx="18" ry="18" width="220" height="150"></rect>
|
||||||
|
<path class="iconStroke" d="M30 105 L60 105 L75 75 L95 135 L115 95 L135 95 L150 70 L165 110 L200 110"></path>
|
||||||
|
<text class="tiny" x="120" y="55" text-anchor="middle">SatO₂ / FR</text>
|
||||||
|
|
||||||
|
<!-- patient -->
|
||||||
|
<circle class="iconFill" cx="290" cy="70" r="36"></circle>
|
||||||
|
<path class="iconFill" d="M245 150 C245 120,267 100,290 100 C313 100,335 120,335 150 L335 220 L245 220 Z"></path>
|
||||||
|
<!-- simple mask on patient -->
|
||||||
|
<path class="iconFill" d="M290 95 C272 98,260 114,262 130 C264 150,280 164,290 166 C300 164,316 150,318 130 C320 114,308 98,290 95 Z"></path>
|
||||||
|
<path class="iconStroke" d="M262 128 L240 118"></path>
|
||||||
|
<path class="iconStroke" d="M318 128 L340 118"></path>
|
||||||
|
|
||||||
|
<!-- checklist -->
|
||||||
|
<rect class="iconFill" x="10" y="205" rx="18" ry="18" width="330" height="150"></rect>
|
||||||
|
<path class="iconStroke" d="M35 245 L55 265 L85 230"></path>
|
||||||
|
<path class="iconStroke" d="M35 285 L55 305 L85 270"></path>
|
||||||
|
<path class="iconStroke" d="M35 325 L55 345 L85 310"></path>
|
||||||
|
<path class="iconStroke" d="M105 245 L320 245"></path>
|
||||||
|
<path class="iconStroke" d="M105 285 L320 285"></path>
|
||||||
|
<path class="iconStroke" d="M105 325 L320 325"></path>
|
||||||
|
<text class="tiny" x="220" y="225" text-anchor="middle">Reevaluar • Registrar • Ajustar</text>
|
||||||
|
|
||||||
|
<!-- arrows between patient & monitor -->
|
||||||
|
<path class="arrow" d="M230 95 L250 95" marker-end="url(#arrowHead)"></path>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="tiny" x="0" y="610">Si no mejora o empeora: revisar sellado/flujo y escalar dispositivo.</text>
|
||||||
|
<text class="tiny" x="0" y="632">Documentar tiempos, flujos, SatO₂ y cambios clínicos.</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Row arrows between cards (bottom row) -->
|
||||||
|
<path class="arrow" d="M430 1270 L420 1270" marker-end="url(#arrowHead)"></path>
|
||||||
|
<path class="arrow" d="M780 1270 L770 1270" marker-end="url(#arrowHead)"></path>
|
||||||
|
|
||||||
|
<!-- Big vertical flow arrows between rows -->
|
||||||
|
<path class="arrow" d="M600 860 L600 900" marker-end="url(#arrowHead)"></path>
|
||||||
|
<text class="sub" x="600" y="892" text-anchor="middle">Continuar secuencia</text>
|
||||||
|
|
||||||
|
<!-- Footer strip -->
|
||||||
|
<rect x="0" y="1650" width="1200" height="50" fill="#f5fbff"></rect>
|
||||||
|
<text class="sub" x="600" y="1682" text-anchor="middle">Uso educativo • Estilo flat sanitario • Paciente genérico sin rasgos identificables</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,205 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="520" viewBox="0 0 1400 520" role="img" aria-label="Rangos Aproximados de FiO2 por Dispositivo de Oxigenoterapia">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.title { font: 700 34px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#1f2a37; }
|
||||||
|
.subtitle { font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#4b5563; }
|
||||||
|
.th { font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#111827; }
|
||||||
|
.td { font: 600 15px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#111827; }
|
||||||
|
.muted { font: 500 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#374151; }
|
||||||
|
.small { font: 500 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; fill:#6b7280; }
|
||||||
|
.cell { fill:#ffffff; stroke:#e5e7eb; stroke-width:1; }
|
||||||
|
.headerCell { fill:#f9fafb; stroke:#e5e7eb; stroke-width:1; }
|
||||||
|
.rowAlt { fill:#fcfcfd; }
|
||||||
|
.barBg { fill:#f3f4f6; stroke:#e5e7eb; stroke-width:1; }
|
||||||
|
.iconStroke { stroke:#111827; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0.9; }
|
||||||
|
.iconFill { fill:#111827; opacity:0.9; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- FiO2 gradient (low -> high) -->
|
||||||
|
<linearGradient id="fio2Grad" x1="0" y1="0" x2="1" y2="0">
|
||||||
|
<stop offset="0%" stop-color="#34d399"></stop>
|
||||||
|
<stop offset="45%" stop-color="#fbbf24"></stop>
|
||||||
|
<stop offset="70%" stop-color="#fb7185"></stop>
|
||||||
|
<stop offset="100%" stop-color="#ef4444"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<!-- Subtle shadow -->
|
||||||
|
<filter id="shadow" x="-10%" y="-10%" width="120%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#111827" flood-opacity="0.10"></feDropShadow>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect x="0" y="0" width="1400" height="520" fill="#ffffff"></rect>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text class="title" x="60" y="62">Rangos Aproximados de FiO₂ por Dispositivo de Oxigenoterapia</text>
|
||||||
|
<text class="subtitle" x="60" y="88">Infografía orientativa (valores aproximados; varían por técnica, ajuste, patrón respiratorio y fugas).</text>
|
||||||
|
|
||||||
|
<!-- Legend -->
|
||||||
|
<g transform="translate(60,110)">
|
||||||
|
<rect x="0" y="0" width="520" height="18" rx="9" fill="url(#fio2Grad)" filter="url(#shadow)"></rect>
|
||||||
|
<text class="small" x="0" y="38">FiO₂ baja</text>
|
||||||
|
<text class="small" x="240" y="38" text-anchor="middle">Aumento de FiO₂</text>
|
||||||
|
<text class="small" x="520" y="38" text-anchor="end">FiO₂ alta</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Table layout -->
|
||||||
|
<!-- Columns: Icon+Dispositivo | Flujo | FiO2 (bar) | Indicaciones -->
|
||||||
|
<!-- Table frame -->
|
||||||
|
<g transform="translate(60,160)">
|
||||||
|
<!-- Header -->
|
||||||
|
<rect class="headerCell" x="0" y="0" width="1280" height="52" rx="10"></rect>
|
||||||
|
<line x1="0" y1="52" x2="1280" y2="52" stroke="#e5e7eb"></line>
|
||||||
|
|
||||||
|
<!-- Column separators -->
|
||||||
|
<line x1="360" y1="0" x2="360" y2="52" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="560" y1="0" x2="560" y2="52" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="860" y1="0" x2="860" y2="52" stroke="#e5e7eb"></line>
|
||||||
|
|
||||||
|
<!-- Header text -->
|
||||||
|
<text class="th" x="22" y="32">Dispositivo</text>
|
||||||
|
<text class="th" x="380" y="32">Flujo recomendado (L/min)</text>
|
||||||
|
<text class="th" x="580" y="32">FiO₂ aproximada</text>
|
||||||
|
<text class="th" x="880" y="32">Indicaciones principales</text>
|
||||||
|
|
||||||
|
<!-- Rows (5) -->
|
||||||
|
<!-- Row heights -->
|
||||||
|
<!-- y positions: 52, 120, 188, 256, 324, 392 -->
|
||||||
|
<!-- Row 1: Aire ambiente -->
|
||||||
|
<rect class="cell rowAlt" x="0" y="52" width="1280" height="68"></rect>
|
||||||
|
<line x1="360" y1="52" x2="360" y2="120" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="560" y1="52" x2="560" y2="120" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="860" y1="52" x2="860" y2="120" stroke="#e5e7eb"></line>
|
||||||
|
|
||||||
|
<!-- Icon: leaf/air -->
|
||||||
|
<g transform="translate(22,74)">
|
||||||
|
<path class="iconStroke" d="M18 28c10-2 18-10 20-20C28 10 20 18 18 28Z"></path>
|
||||||
|
<path class="iconStroke" d="M6 26c5 1 10-1 14-5"></path>
|
||||||
|
</g>
|
||||||
|
<text class="td" x="70" y="94">Aire ambiente</text>
|
||||||
|
<text class="muted" x="380" y="94">0</text>
|
||||||
|
|
||||||
|
<!-- FiO2 bar (21%) -->
|
||||||
|
<g transform="translate(580,74)">
|
||||||
|
<rect class="barBg" x="0" y="8" width="260" height="26" rx="13"></rect>
|
||||||
|
<!-- width = 260 * 0.21 ≈ 55 -->
|
||||||
|
<rect x="0" y="8" width="55" height="26" rx="13" fill="url(#fio2Grad)"></rect>
|
||||||
|
<text class="muted" x="270" y="27" text-anchor="end">≈ 21%</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="muted" x="880" y="82">Referencia basal / sin aporte de O₂</text>
|
||||||
|
<text class="small" x="880" y="104">Útil para valorar necesidad real de oxigenoterapia</text>
|
||||||
|
|
||||||
|
<!-- Row 2: Gafas nasales -->
|
||||||
|
<rect class="cell" x="0" y="120" width="1280" height="68"></rect>
|
||||||
|
<line x1="360" y1="120" x2="360" y2="188" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="560" y1="120" x2="560" y2="188" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="860" y1="120" x2="860" y2="188" stroke="#e5e7eb"></line>
|
||||||
|
|
||||||
|
<!-- Icon: nasal cannula -->
|
||||||
|
<g transform="translate(22,142)">
|
||||||
|
<path class="iconStroke" d="M10 8c0 10 0 16 8 20"></path>
|
||||||
|
<path class="iconStroke" d="M34 8c0 10 0 16-8 20"></path>
|
||||||
|
<path class="iconStroke" d="M18 28c2 2 6 2 8 0"></path>
|
||||||
|
<circle class="iconFill" cx="18" cy="29" r="1.8"></circle>
|
||||||
|
<circle class="iconFill" cx="26" cy="29" r="1.8"></circle>
|
||||||
|
</g>
|
||||||
|
<text class="td" x="70" y="162">Gafas nasales</text>
|
||||||
|
<text class="muted" x="380" y="162">1–6</text>
|
||||||
|
|
||||||
|
<!-- FiO2 bar (24–44%, midpoint ~34%) -->
|
||||||
|
<g transform="translate(580,142)">
|
||||||
|
<rect class="barBg" x="0" y="8" width="260" height="26" rx="13"></rect>
|
||||||
|
<!-- width = 260 * 0.34 ≈ 88 -->
|
||||||
|
<rect x="0" y="8" width="88" height="26" rx="13" fill="url(#fio2Grad)"></rect>
|
||||||
|
<text class="muted" x="270" y="27" text-anchor="end">≈ 24–44%</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="muted" x="880" y="150">Hipoxemia leve, disnea leve, confort</text>
|
||||||
|
<text class="small" x="880" y="172">Pacientes que toleran bien y requieren ajuste gradual</text>
|
||||||
|
|
||||||
|
<!-- Row 3: Mascarilla simple -->
|
||||||
|
<rect class="cell rowAlt" x="0" y="188" width="1280" height="68"></rect>
|
||||||
|
<line x1="360" y1="188" x2="360" y2="256" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="560" y1="188" x2="560" y2="256" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="860" y1="188" x2="860" y2="256" stroke="#e5e7eb"></line>
|
||||||
|
|
||||||
|
<!-- Icon: simple mask -->
|
||||||
|
<g transform="translate(22,210)">
|
||||||
|
<path class="iconStroke" d="M14 10c-4 10-4 18 0 28h16c4-10 4-18 0-28Z"></path>
|
||||||
|
<path class="iconStroke" d="M14 14H6"></path>
|
||||||
|
<path class="iconStroke" d="M30 14h8"></path>
|
||||||
|
<path class="iconStroke" d="M18 24h8"></path>
|
||||||
|
</g>
|
||||||
|
<text class="td" x="70" y="230">Mascarilla simple</text>
|
||||||
|
<text class="muted" x="380" y="230">5–10</text>
|
||||||
|
|
||||||
|
<!-- FiO2 bar (40–60%, midpoint 50%) -->
|
||||||
|
<g transform="translate(580,210)">
|
||||||
|
<rect class="barBg" x="0" y="8" width="260" height="26" rx="13"></rect>
|
||||||
|
<!-- width = 260 * 0.50 = 130 -->
|
||||||
|
<rect x="0" y="8" width="130" height="26" rx="13" fill="url(#fio2Grad)"></rect>
|
||||||
|
<text class="muted" x="270" y="27" text-anchor="end">≈ 40–60%</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="muted" x="880" y="218">Hipoxemia moderada</text>
|
||||||
|
<text class="small" x="880" y="240">Asegurar ≥5 L/min para reducir reinhalación de CO₂</text>
|
||||||
|
|
||||||
|
<!-- Row 4: Mascarilla con reservorio -->
|
||||||
|
<rect class="cell" x="0" y="256" width="1280" height="68"></rect>
|
||||||
|
<line x1="360" y1="256" x2="360" y2="324" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="560" y1="256" x2="560" y2="324" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="860" y1="256" x2="860" y2="324" stroke="#e5e7eb"></line>
|
||||||
|
|
||||||
|
<!-- Icon: non-rebreather + bag -->
|
||||||
|
<g transform="translate(22,278)">
|
||||||
|
<path class="iconStroke" d="M14 10c-4 10-4 18 0 28h16c4-10 4-18 0-28Z"></path>
|
||||||
|
<rect x="34" y="22" width="12" height="14" rx="3" class="iconStroke"></rect>
|
||||||
|
<path class="iconStroke" d="M30 30h4"></path>
|
||||||
|
</g>
|
||||||
|
<text class="td" x="70" y="298">Mascarilla con reservorio</text>
|
||||||
|
<text class="muted" x="380" y="298">10–15</text>
|
||||||
|
|
||||||
|
<!-- FiO2 bar (60–90%, midpoint 75%) -->
|
||||||
|
<g transform="translate(580,278)">
|
||||||
|
<rect class="barBg" x="0" y="8" width="260" height="26" rx="13"></rect>
|
||||||
|
<!-- width = 260 * 0.75 = 195 -->
|
||||||
|
<rect x="0" y="8" width="195" height="26" rx="13" fill="url(#fio2Grad)"></rect>
|
||||||
|
<text class="muted" x="270" y="27" text-anchor="end">≈ 60–90%</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="muted" x="880" y="286">Hipoxemia grave / preoxigenación</text>
|
||||||
|
<text class="small" x="880" y="308">Reservorio inflado; evitar colapso durante inspiración</text>
|
||||||
|
|
||||||
|
<!-- Row 5: Bolsa-válvula-mascarilla -->
|
||||||
|
<rect class="cell rowAlt" x="0" y="324" width="1280" height="68" rx="0"></rect>
|
||||||
|
<line x1="360" y1="324" x2="360" y2="392" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="560" y1="324" x2="560" y2="392" stroke="#e5e7eb"></line>
|
||||||
|
<line x1="860" y1="324" x2="860" y2="392" stroke="#e5e7eb"></line>
|
||||||
|
|
||||||
|
<!-- Icon: BVM -->
|
||||||
|
<g transform="translate(22,346)">
|
||||||
|
<rect x="10" y="10" width="18" height="26" rx="9" class="iconStroke"></rect>
|
||||||
|
<path class="iconStroke" d="M28 23h12"></path>
|
||||||
|
<path class="iconStroke" d="M40 18c4 6 4 14 0 20"></path>
|
||||||
|
<path class="iconStroke" d="M40 18h10"></path>
|
||||||
|
</g>
|
||||||
|
<text class="td" x="70" y="366">Bolsa-válvula-mascarilla</text>
|
||||||
|
<text class="muted" x="380" y="366">10–15 (O₂)</text>
|
||||||
|
|
||||||
|
<!-- FiO2 bar (90–100%, midpoint 95%) -->
|
||||||
|
<g transform="translate(580,346)">
|
||||||
|
<rect class="barBg" x="0" y="8" width="260" height="26" rx="13"></rect>
|
||||||
|
<!-- width = 260 * 0.95 = 247 -->
|
||||||
|
<rect x="0" y="8" width="247" height="26" rx="13" fill="url(#fio2Grad)"></rect>
|
||||||
|
<text class="muted" x="270" y="27" text-anchor="end">≈ 90–100%</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text class="muted" x="880" y="354">Ventilación asistida / apnea / PCR</text>
|
||||||
|
<text class="small" x="880" y="376">Mejor con reservorio + buen sellado (técnica a 2 manos si es posible)</text>
|
||||||
|
|
||||||
|
<!-- Footer note -->
|
||||||
|
<text class="small" x="0" y="430">Nota TES: estos rangos son orientativos. Ajustar a objetivos clínicos y monitorización (SpO₂/ETCO₂) según protocolo local.</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
BIN
imagenes-pendientes/CÓDIGO DE COLORES PARA BOLSAS TES.png
Normal file
BIN
imagenes-pendientes/CÓDIGO DE COLORES PARA BOLSAS TES.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 MiB |
|
|
@ -0,0 +1,111 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="820" viewBox="0 0 1400 820" role="img" aria-label="Plantilla genérica de diagrama de flujo médico para protocolos avanzados de emergencia">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.title{font:800 34px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
||||||
|
.sub{font:500 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#4b5563}
|
||||||
|
.box{fill:#ffffff;stroke:#d1d5db;stroke-width:2}
|
||||||
|
.boxH{fill:#f8fafc}
|
||||||
|
.step{font:700 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
||||||
|
.desc{font:500 13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#374151}
|
||||||
|
.iconStroke{stroke:#374151;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.iconFill{fill:#374151}
|
||||||
|
.arrow{stroke:#6b7280;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.note{font:500 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#6b7280}
|
||||||
|
.critical{stroke-dasharray:6 4}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<marker id="arrowHead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
|
||||||
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#6b7280"></path>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect x="0" y="0" width="1400" height="820" fill="#ffffff"></rect>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text class="title" x="60" y="64">Plantilla de Diagrama de Flujo Médico</text>
|
||||||
|
<text class="sub" x="60" y="92">
|
||||||
|
Estructura base reutilizable para protocolos avanzados de emergencia (RCP avanzada, vía aérea, etc.)
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- GRID GUIDES (optional visual aid, can be removed) -->
|
||||||
|
<!-- <line x1="0" y1="200" x2="1400" y2="200" stroke="#f1f5f9"/> -->
|
||||||
|
|
||||||
|
<!-- STEP 1: Evaluación inicial -->
|
||||||
|
<g transform="translate(100,180)">
|
||||||
|
<rect class="box boxH" x="0" y="0" width="420" height="120" rx="16"></rect>
|
||||||
|
<text class="step" x="100" y="38">Evaluación inicial</text>
|
||||||
|
<text class="desc" x="100" y="66">ABC / SV / Escena segura</text>
|
||||||
|
<text class="desc" x="100" y="86">Nivel de consciencia, constantes</text>
|
||||||
|
|
||||||
|
<!-- Icon: corazón -->
|
||||||
|
<g transform="translate(36,36)">
|
||||||
|
<path class="iconStroke" d="M24 40C8 26 4 20 4 14a8 8 0 0 1 14-6l6 6 6-6a8 8 0 0 1 14 6c0 6-4 12-20 26Z"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Arrow -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M520 240 H640"></path>
|
||||||
|
|
||||||
|
<!-- STEP 2: Decisión crítica -->
|
||||||
|
<g transform="translate(640,180)">
|
||||||
|
<rect class="box critical" x="0" y="0" width="420" height="120" rx="16"></rect>
|
||||||
|
<text class="step" x="100" y="38">Decisión crítica</text>
|
||||||
|
<text class="desc" x="100" y="66">¿Parada? ¿Vía aérea comprometida?</text>
|
||||||
|
<text class="desc" x="100" y="86">¿Inestabilidad grave?</text>
|
||||||
|
|
||||||
|
<!-- Icon: alerta -->
|
||||||
|
<g transform="translate(36,36)">
|
||||||
|
<path class="iconStroke" d="M24 6L2 42h44L24 6Z"></path>
|
||||||
|
<line class="iconStroke" x1="24" y1="18" x2="24" y2="28"></line>
|
||||||
|
<circle class="iconFill" cx="24" cy="34" r="2.5"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Down arrows (branching placeholder) -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M850 300 V380"></path>
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M850 300 V380" opacity="0"></path>
|
||||||
|
|
||||||
|
<!-- STEP 3: Actuación -->
|
||||||
|
<g transform="translate(100,420)">
|
||||||
|
<rect class="box" x="0" y="0" width="420" height="140" rx="16"></rect>
|
||||||
|
<text class="step" x="100" y="38">Actuación</text>
|
||||||
|
<text class="desc" x="100" y="66">RCP avanzada / manejo vía aérea</text>
|
||||||
|
<text class="desc" x="100" y="86">Fármacos / desfibrilación</text>
|
||||||
|
<text class="desc" x="100" y="106">Protocolos específicos</text>
|
||||||
|
|
||||||
|
<!-- Icon: pulmón -->
|
||||||
|
<g transform="translate(36,36)">
|
||||||
|
<path class="iconStroke" d="M24 6v36"></path>
|
||||||
|
<path class="iconStroke" d="M24 22c-6-8-14-8-18-2-4 6-2 18 10 22"></path>
|
||||||
|
<path class="iconStroke" d="M24 22c6-8 14-8 18-2 4 6 2 18-10 22"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Arrow -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M520 490 H640"></path>
|
||||||
|
|
||||||
|
<!-- STEP 4: Reevaluación -->
|
||||||
|
<g transform="translate(640,420)">
|
||||||
|
<rect class="box boxH" x="0" y="0" width="420" height="140" rx="16"></rect>
|
||||||
|
<text class="step" x="100" y="38">Reevaluación</text>
|
||||||
|
<text class="desc" x="100" y="66">Respuesta al tratamiento</text>
|
||||||
|
<text class="desc" x="100" y="86">Constantes / ETCO₂ / ECG</text>
|
||||||
|
<text class="desc" x="100" y="106">¿Continuar o escalar?</text>
|
||||||
|
|
||||||
|
<!-- Icon: reloj -->
|
||||||
|
<g transform="translate(36,36)">
|
||||||
|
<circle class="iconStroke" cx="24" cy="24" r="18"></circle>
|
||||||
|
<line class="iconStroke" x1="24" y1="24" x2="24" y2="12"></line>
|
||||||
|
<line class="iconStroke" x1="24" y1="24" x2="34" y2="24"></line>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Feedback arrow (loop) -->
|
||||||
|
<path class="arrow" marker-end="url(#arrowHead)" d="M1060 490 C1180 490, 1180 240, 1060 240"></path>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<text class="note" x="60" y="780">
|
||||||
|
Plantilla base TES · Sustituir textos por acciones concretas según protocolo local · Diseñada para impresión o edición SVG.
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.1 KiB |
194
imagenes-pendientes/constante-vitales-adulto-pediatrico.svg
Normal file
194
imagenes-pendientes/constante-vitales-adulto-pediatrico.svg
Normal file
|
|
@ -0,0 +1,194 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="900" viewBox="0 0 1400 900" role="img" aria-label="Rangos normales de constantes vitales - Adulto y Pediátrico">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.bg{fill:#fff}
|
||||||
|
.title{font:700 34px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#1f3b55}
|
||||||
|
.sub{font:500 15px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#3a5873}
|
||||||
|
.h{font:800 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#163246}
|
||||||
|
.t{font:700 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#163246}
|
||||||
|
.p{font:600 13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#23465f}
|
||||||
|
.tiny{font:500 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#2f516a}
|
||||||
|
|
||||||
|
.card{fill:#f6fbff;stroke:#5aa7d6;stroke-width:2.2}
|
||||||
|
.grid{stroke:#c9e3f5;stroke-width:1.2}
|
||||||
|
.head{fill:#e8f5ff;stroke:#5aa7d6;stroke-width:2.2}
|
||||||
|
.left{fill:#f3faff;stroke:#5aa7d6;stroke-width:2.2}
|
||||||
|
|
||||||
|
/* traffic-light palette (soft, medical) */
|
||||||
|
.g{fill:#eaf8ef;stroke:#55a868;stroke-width:1.6}
|
||||||
|
.y{fill:#fff7e6;stroke:#d9a441;stroke-width:1.6}
|
||||||
|
.r{fill:#ffecec;stroke:#d66a6a;stroke-width:1.6}
|
||||||
|
|
||||||
|
.badge{fill:#dff1ff;stroke:#3f90c1;stroke-width:2}
|
||||||
|
.shadow{filter:url(#shadow)}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#0b3756" flood-opacity="0.12"></feDropShadow>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect class="bg" x="0" y="0" width="1400" height="900"></rect>
|
||||||
|
|
||||||
|
<text class="title" x="700" y="70" text-anchor="middle">Constantes vitales: rangos orientativos (Adulto y Pediatría)</text>
|
||||||
|
<text class="sub" x="700" y="102" text-anchor="middle">Estilo manual TES • Código tipo semáforo • Alta legibilidad • Uso educativo</text>
|
||||||
|
|
||||||
|
<!-- Legend -->
|
||||||
|
<g transform="translate(290,130)">
|
||||||
|
<rect class="badge" x="0" y="0" rx="18" ry="18" width="820" height="54"></rect>
|
||||||
|
<g transform="translate(18,12)">
|
||||||
|
<rect class="g" x="0" y="0" rx="10" ry="10" width="120" height="30"></rect>
|
||||||
|
<text class="t" x="60" y="20" text-anchor="middle">Normal</text>
|
||||||
|
|
||||||
|
<rect class="y" x="140" y="0" rx="10" ry="10" width="190" height="30"></rect>
|
||||||
|
<text class="t" x="235" y="20" text-anchor="middle">Vigilar / repetir</text>
|
||||||
|
|
||||||
|
<rect class="r" x="350" y="0" rx="10" ry="10" width="240" height="30"></rect>
|
||||||
|
<text class="t" x="470" y="20" text-anchor="middle">Alerta / valorar</text>
|
||||||
|
|
||||||
|
<text class="tiny" x="620" y="20">* Rangos pueden variar por contexto clínico.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Table container -->
|
||||||
|
<g class="shadow">
|
||||||
|
<rect class="card" x="80" y="210" rx="26" ry="26" width="1240" height="610"></rect>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Column headers -->
|
||||||
|
<!-- Column widths: Param 220, Adult 320, Ped 540, Notes 160 -->
|
||||||
|
<g transform="translate(110,240)">
|
||||||
|
<rect class="head" x="0" y="0" rx="18" ry="18" width="1180" height="58"></rect>
|
||||||
|
<text class="h" x="110" y="36" text-anchor="middle">Parámetro</text>
|
||||||
|
<text class="h" x="380" y="36" text-anchor="middle">Adulto</text>
|
||||||
|
<text class="h" x="820" y="36" text-anchor="middle">Pediatría (orientativo)</text>
|
||||||
|
<text class="h" x="1110" y="36" text-anchor="middle">Notas</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Rows -->
|
||||||
|
<!-- Row geometry -->
|
||||||
|
<!-- Start y for rows: 310; row height: 100; 5 rows -->
|
||||||
|
<!-- X positions relative to table origin (110,240) -->
|
||||||
|
<!-- Param col: 0..220; Adult: 220..540; Ped: 540..1080; Notes: 1080..1180 -->
|
||||||
|
<g transform="translate(110,310)">
|
||||||
|
<!-- GRID background columns -->
|
||||||
|
<rect class="left" x="0" y="0" rx="18" ry="18" width="220" height="500"></rect>
|
||||||
|
<rect class="card" x="220" y="0" rx="18" ry="18" width="960" height="500"></rect>
|
||||||
|
|
||||||
|
<!-- Horizontal grid lines -->
|
||||||
|
<line class="grid" x1="0" y1="100" x2="1180" y2="100"></line>
|
||||||
|
<line class="grid" x1="0" y1="200" x2="1180" y2="200"></line>
|
||||||
|
<line class="grid" x1="0" y1="300" x2="1180" y2="300"></line>
|
||||||
|
<line class="grid" x1="0" y1="400" x2="1180" y2="400"></line>
|
||||||
|
|
||||||
|
<!-- Vertical grid lines -->
|
||||||
|
<line class="grid" x1="220" y1="0" x2="220" y2="500"></line>
|
||||||
|
<line class="grid" x1="540" y1="0" x2="540" y2="500"></line>
|
||||||
|
<line class="grid" x1="1080" y1="0" x2="1080" y2="500"></line>
|
||||||
|
|
||||||
|
<!-- PARAM LABELS -->
|
||||||
|
<text class="h" x="110" y="60" text-anchor="middle">FC</text>
|
||||||
|
<text class="tiny" x="110" y="82" text-anchor="middle">lpm</text>
|
||||||
|
|
||||||
|
<text class="h" x="110" y="160" text-anchor="middle">FR</text>
|
||||||
|
<text class="tiny" x="110" y="182" text-anchor="middle">rpm</text>
|
||||||
|
|
||||||
|
<text class="h" x="110" y="260" text-anchor="middle">TA</text>
|
||||||
|
<text class="tiny" x="110" y="282" text-anchor="middle">mmHg</text>
|
||||||
|
|
||||||
|
<text class="h" x="110" y="360" text-anchor="middle">SatO₂</text>
|
||||||
|
<text class="tiny" x="110" y="382" text-anchor="middle">%</text>
|
||||||
|
|
||||||
|
<text class="h" x="110" y="460" text-anchor="middle">Tª</text>
|
||||||
|
<text class="tiny" x="110" y="482" text-anchor="middle">°C</text>
|
||||||
|
|
||||||
|
<!-- ADULTO CELLS -->
|
||||||
|
<!-- FC Adult -->
|
||||||
|
<rect class="g" x="245" y="22" rx="16" ry="16" width="270" height="56"></rect>
|
||||||
|
<text class="t" x="380" y="55" text-anchor="middle">60–100</text>
|
||||||
|
<rect class="y" x="245" y="78" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="92" text-anchor="middle">51–59 o 101–110</text>
|
||||||
|
<rect class="r" x="245" y="96" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="110" text-anchor="middle">≤50 o ≥111</text>
|
||||||
|
|
||||||
|
<!-- FR Adult -->
|
||||||
|
<rect class="g" x="245" y="122" rx="16" ry="16" width="270" height="56"></rect>
|
||||||
|
<text class="t" x="380" y="155" text-anchor="middle">12–20</text>
|
||||||
|
<rect class="y" x="245" y="178" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="192" text-anchor="middle">10–11 o 21–24</text>
|
||||||
|
<rect class="r" x="245" y="196" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="210" text-anchor="middle">≤9 o ≥25</text>
|
||||||
|
|
||||||
|
<!-- TA Adult -->
|
||||||
|
<rect class="g" x="245" y="222" rx="16" ry="16" width="270" height="56"></rect>
|
||||||
|
<text class="t" x="380" y="246" text-anchor="middle">PAS 100–140</text>
|
||||||
|
<text class="tiny" x="380" y="266" text-anchor="middle">PAD 60–90</text>
|
||||||
|
<rect class="y" x="245" y="278" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="292" text-anchor="middle">PAS 90–99 o 141–160</text>
|
||||||
|
<rect class="r" x="245" y="296" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="310" text-anchor="middle">PAS <90 o >160</text>
|
||||||
|
|
||||||
|
<!-- SatO2 Adult -->
|
||||||
|
<rect class="g" x="245" y="322" rx="16" ry="16" width="270" height="56"></rect>
|
||||||
|
<text class="t" x="380" y="355" text-anchor="middle">≥ 95</text>
|
||||||
|
<rect class="y" x="245" y="378" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="392" text-anchor="middle">93–94</text>
|
||||||
|
<rect class="r" x="245" y="396" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="410" text-anchor="middle">≤ 92</text>
|
||||||
|
|
||||||
|
<!-- Temp Adult -->
|
||||||
|
<rect class="g" x="245" y="422" rx="16" ry="16" width="270" height="56"></rect>
|
||||||
|
<text class="t" x="380" y="446" text-anchor="middle">36,0–37,5</text>
|
||||||
|
<text class="tiny" x="380" y="466" text-anchor="middle">(oral/axilar aprox.)</text>
|
||||||
|
<rect class="y" x="245" y="478" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="492" text-anchor="middle">35,5–35,9 o 37,6–38,4</text>
|
||||||
|
<rect class="r" x="245" y="496" rx="16" ry="16" width="270" height="18"></rect>
|
||||||
|
<text class="tiny" x="380" y="510" text-anchor="middle">≤35,4 o ≥38,5</text>
|
||||||
|
|
||||||
|
<!-- PEDIATRÍA CELLS (use grouped ranges) -->
|
||||||
|
<!-- FC Ped -->
|
||||||
|
<rect class="g" x="565" y="22" rx="16" ry="16" width="490" height="56"></rect>
|
||||||
|
<text class="p" x="810" y="48" text-anchor="middle">RN: 100–160 • Lact.: 100–160 • 1–5a: 80–120</text>
|
||||||
|
<text class="p" x="810" y="70" text-anchor="middle">6–12a: 70–110 • Adol.: 60–100</text>
|
||||||
|
|
||||||
|
<!-- FR Ped -->
|
||||||
|
<rect class="g" x="565" y="122" rx="16" ry="16" width="490" height="56"></rect>
|
||||||
|
<text class="p" x="810" y="148" text-anchor="middle">RN: 30–60 • Lact.: 30–50 • 1–5a: 20–30</text>
|
||||||
|
<text class="p" x="810" y="170" text-anchor="middle">6–12a: 18–25 • Adol.: 12–20</text>
|
||||||
|
|
||||||
|
<!-- TA Ped (approx systolic by age) -->
|
||||||
|
<rect class="g" x="565" y="222" rx="16" ry="16" width="490" height="56"></rect>
|
||||||
|
<text class="p" x="810" y="248" text-anchor="middle">PAS aprox.: RN 60–85 • Lact. 70–100 • 1–5a 80–110</text>
|
||||||
|
<text class="p" x="810" y="270" text-anchor="middle">6–12a 90–120 • Adol. 100–130</text>
|
||||||
|
|
||||||
|
<!-- SatO2 Ped -->
|
||||||
|
<rect class="g" x="565" y="322" rx="16" ry="16" width="490" height="56"></rect>
|
||||||
|
<text class="p" x="810" y="355" text-anchor="middle">≥ 95 (similar al adulto, según contexto)</text>
|
||||||
|
|
||||||
|
<!-- Temp Ped -->
|
||||||
|
<rect class="g" x="565" y="422" rx="16" ry="16" width="490" height="56"></rect>
|
||||||
|
<text class="p" x="810" y="446" text-anchor="middle">36,5–37,5 (aprox.)</text>
|
||||||
|
<text class="p" x="810" y="468" text-anchor="middle">Interpretar según método y edad</text>
|
||||||
|
|
||||||
|
<!-- NOTES column -->
|
||||||
|
<text class="tiny" x="1130" y="50" text-anchor="middle">Dolor/fiebre</text>
|
||||||
|
<text class="tiny" x="1130" y="68" text-anchor="middle">↑ FC</text>
|
||||||
|
|
||||||
|
<text class="tiny" x="1130" y="150" text-anchor="middle">Ansiedad</text>
|
||||||
|
<text class="tiny" x="1130" y="168" text-anchor="middle">↑ FR</text>
|
||||||
|
|
||||||
|
<text class="tiny" x="1130" y="250" text-anchor="middle">Valorar</text>
|
||||||
|
<text class="tiny" x="1130" y="268" text-anchor="middle">perfusión</text>
|
||||||
|
|
||||||
|
<text class="tiny" x="1130" y="350" text-anchor="middle">Objetivo</text>
|
||||||
|
<text class="tiny" x="1130" y="368" text-anchor="middle">clínico</text>
|
||||||
|
|
||||||
|
<text class="tiny" x="1130" y="450" text-anchor="middle">Método</text>
|
||||||
|
<text class="tiny" x="1130" y="468" text-anchor="middle">importa</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Footer note -->
|
||||||
|
<text class="sub" x="700" y="860" text-anchor="middle">
|
||||||
|
Nota: Rangos pediátricos varían mucho por edad; usar guías locales y contexto clínico. Semáforo = ayuda visual, no diagnóstico.
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
BIN
imagenes-pendientes/zona alamacenamiento uvi.png
Normal file
BIN
imagenes-pendientes/zona alamacenamiento uvi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
69
nginx.conf.example
Normal file
69
nginx.conf.example
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
# Configuración Nginx para EMERGES TES
|
||||||
|
# Copiar a /etc/nginx/sites-available/emerges-tes
|
||||||
|
# Crear symlink: sudo ln -s /etc/nginx/sites-available/emerges-tes /etc/nginx/sites-enabled/
|
||||||
|
# Probar: sudo nginx -t
|
||||||
|
# Reiniciar: sudo systemctl reload nginx
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name emergestes.com www.emergestes.com;
|
||||||
|
|
||||||
|
# Redirigir a HTTPS (descomentar después de configurar SSL)
|
||||||
|
# return 301 https://$server_name$request_uri;
|
||||||
|
|
||||||
|
# Root del proyecto (ajustar ruta según tu servidor)
|
||||||
|
root /var/www/emerges-tes/dist;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
access_log /var/log/nginx/emerges-tes-access.log;
|
||||||
|
error_log /var/log/nginx/emerges-tes-error.log;
|
||||||
|
|
||||||
|
# Compresión
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_min_length 1024;
|
||||||
|
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
||||||
|
|
||||||
|
# Cache para assets estáticos
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
# SPA: todas las rutas van a index.html
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# No cachear index.html (para actualizaciones)
|
||||||
|
location = /index.html {
|
||||||
|
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||||
|
add_header Pragma "no-cache";
|
||||||
|
add_header Expires "0";
|
||||||
|
}
|
||||||
|
|
||||||
|
# Service Worker y manifest
|
||||||
|
location ~* \.(sw\.js|manifest\.json)$ {
|
||||||
|
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# Configuración HTTPS (descomentar después de obtener certificado SSL)
|
||||||
|
# server {
|
||||||
|
# listen 443 ssl http2;
|
||||||
|
# server_name emergestes.com www.emergestes.com;
|
||||||
|
#
|
||||||
|
# ssl_certificate /etc/letsencrypt/live/emergestes.com/fullchain.pem;
|
||||||
|
# ssl_certificate_key /etc/letsencrypt/live/emergestes.com/privkey.pem;
|
||||||
|
#
|
||||||
|
# # SSL optimizations
|
||||||
|
# ssl_protocols TLSv1.2 TLSv1.3;
|
||||||
|
# ssl_ciphers HIGH:!aNULL:!MD5;
|
||||||
|
# ssl_prefer_server_ciphers on;
|
||||||
|
#
|
||||||
|
# root /var/www/emerges-tes/dist;
|
||||||
|
# index index.html;
|
||||||
|
#
|
||||||
|
# # ... resto de configuración igual que HTTP ...
|
||||||
|
# }
|
||||||
|
|
@ -8,8 +8,10 @@
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"build:dev": "vite build --mode development",
|
"build:dev": "vite build --mode development",
|
||||||
"build:github": "GITHUB_PAGES=true GITHUB_REPOSITORY_NAME=guia-tes-digital npm run build",
|
"build:github": "GITHUB_PAGES=true GITHUB_REPOSITORY_NAME=guia-tes-digital npm run build",
|
||||||
"lint": "eslint .",
|
"build:production": "NODE_ENV=production vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
|
"start:production": "npx serve -s dist -l 3000",
|
||||||
|
"lint": "eslint .",
|
||||||
"verify:manual": "tsx scripts/verificar-manual.ts"
|
"verify:manual": "tsx scripts/verificar-manual.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
|
|
@ -19,6 +19,8 @@ const STATIC_ASSETS = [
|
||||||
normalizePath('/index.html'),
|
normalizePath('/index.html'),
|
||||||
normalizePath('/manifest.json'),
|
normalizePath('/manifest.json'),
|
||||||
normalizePath('/favicon.ico'),
|
normalizePath('/favicon.ico'),
|
||||||
|
// Nota: Las imágenes en /assets/infografias/ se cachearán automáticamente
|
||||||
|
// cuando se soliciten (cache-first strategy para imágenes)
|
||||||
];
|
];
|
||||||
|
|
||||||
// Instalación del Service Worker
|
// Instalación del Service Worker
|
||||||
|
|
@ -78,7 +80,9 @@ self.addEventListener('fetch', (event) => {
|
||||||
request.destination === 'style' ||
|
request.destination === 'style' ||
|
||||||
request.destination === 'image' ||
|
request.destination === 'image' ||
|
||||||
request.destination === 'font' ||
|
request.destination === 'font' ||
|
||||||
url.pathname.endsWith('.md')
|
url.pathname.endsWith('.md') ||
|
||||||
|
url.pathname.includes('/assets/infografias/') ||
|
||||||
|
url.pathname.includes('/assets/')
|
||||||
) {
|
) {
|
||||||
event.respondWith(cacheFirst(request));
|
event.respondWith(cacheFirst(request));
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
6
scripts/mover_imagenes_pwa.sh
Executable file
6
scripts/mover_imagenes_pwa.sh
Executable file
|
|
@ -0,0 +1,6 @@
|
||||||
|
#!/bin/bash
|
||||||
|
# Script para mover imágenes a public/assets/infografias/ para PWA
|
||||||
|
SOURCE_DIR="imagenes-pendientes"
|
||||||
|
TARGET_BASE="public/assets/infografias"
|
||||||
|
mkdir -p "$TARGET_BASE"/{bloque-0-fundamentos,bloque-2-inmovilizacion,bloque-3-material-sanitario,bloque-7-conduccion,bloque-12-marco-legal}
|
||||||
|
echo "📸 Estructura creada. Usa el script Python para organizar: python scripts/organizar_infografias.py"
|
||||||
190
scripts/organizar_imagenes_auto.py
Normal file
190
scripts/organizar_imagenes_auto.py
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
"""
|
||||||
|
Script automatizado para organizar imágenes en public/assets/infografias/
|
||||||
|
Basado en mapeo de nombres de archivo a bloques
|
||||||
|
"""
|
||||||
|
|
||||||
|
import os
|
||||||
|
import shutil
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Dict, Optional
|
||||||
|
|
||||||
|
# Mapeo automático de nombres de archivo a bloques
|
||||||
|
IMAGE_MAP: Dict[str, str] = {
|
||||||
|
# Bloque 0 - Fundamentos
|
||||||
|
"ALGORITMO OPERATIVO DEL TES.svg": "bloque-0-fundamentos",
|
||||||
|
"RESUMEN VISUAL DEL ALGORITMO START.svg": "bloque-0-fundamentos",
|
||||||
|
"flujo-rcp-transtelefonica.png": "bloque-0-fundamentos",
|
||||||
|
"flujo-desa-telefono.png": "bloque-0-fundamentos",
|
||||||
|
"fast-transtelefonico.png": "bloque-0-fundamentos",
|
||||||
|
"diagrama-seleccion-dispositivo-oxigenoterapia.png": "bloque-0-fundamentos",
|
||||||
|
"tabla-rangos-fio2-oxigenoterapia.png": "bloque-0-fundamentos",
|
||||||
|
"guia-colocacion-dispositivos-oxigenoterapia.png": "bloque-0-fundamentos",
|
||||||
|
|
||||||
|
# Bloque 2 - Inmovilización
|
||||||
|
"colocacion-collarin-paso-1-preparacion.png": "bloque-2-inmovilizacion",
|
||||||
|
"colocacion-collarin-paso-2-parte-posterior.png": "bloque-2-inmovilizacion",
|
||||||
|
"colocacion-collarin-paso-3-parte-anterior.png": "bloque-2-inmovilizacion",
|
||||||
|
"colocacion-collarin-paso-4-ajuste-cierres.png": "bloque-2-inmovilizacion",
|
||||||
|
"colocacion-collarin-paso-5-verificacion.png": "bloque-2-inmovilizacion",
|
||||||
|
"colocacion-collarin-paso-6-liberacion-controlada.png": "bloque-2-inmovilizacion",
|
||||||
|
"seleccion-talla-collarin-cervical.png": "bloque-2-inmovilizacion",
|
||||||
|
"seleccion-talla-collarin-tabla-tallas.png": "bloque-2-inmovilizacion",
|
||||||
|
"errores-frecuentes-collarin-cervical.png": "bloque-2-inmovilizacion",
|
||||||
|
"verificaciones-post-colocacion-collarin.png": "bloque-2-inmovilizacion",
|
||||||
|
"componentes-sistema-inmovilizacion.png": "bloque-2-inmovilizacion",
|
||||||
|
"componentes-sistema-inmovilizacion 1.png": "bloque-2-inmovilizacion", # Duplicado
|
||||||
|
"posicion-tes-inmovilizacion-manual.png": "bloque-2-inmovilizacion",
|
||||||
|
"tecnica-sujecion-manual-cervical.png": "bloque-2-inmovilizacion",
|
||||||
|
"componentes-tablero-espinal.png": "bloque-2-inmovilizacion",
|
||||||
|
"componentes-colchon-vacio.png": "bloque-2-inmovilizacion",
|
||||||
|
"colocacion-colchon-vacio-paso-a-paso.png": "bloque-2-inmovilizacion",
|
||||||
|
"componentes-camilla-cuchara.png": "bloque-2-inmovilizacion",
|
||||||
|
"situaciones-que-requieren-inmovilizacion.png": "bloque-2-inmovilizacion",
|
||||||
|
"secuencia-transicion-inmovilizacion.png": "bloque-2-inmovilizacion",
|
||||||
|
"coordinacion-equipo-inmovilizacion.png": "bloque-2-inmovilizacion",
|
||||||
|
|
||||||
|
# Bloque 3 - Material Sanitario
|
||||||
|
"uso-correcto-pulsioximetro.png": "bloque-3-material-sanitario",
|
||||||
|
"uso-correcto-tensiometro.png": "bloque-3-material-sanitario",
|
||||||
|
"registro-constantes-vitales.png": "bloque-3-material-sanitario",
|
||||||
|
"interpretacion-constantes-semaforo.png": "bloque-3-material-sanitario",
|
||||||
|
"configuracion-maxima-fio2-bolsa-mascarilla.png": "bloque-3-material-sanitario",
|
||||||
|
"uso-correcto-ambu.png": "bloque-3-material-sanitario",
|
||||||
|
"canulas-guedel-nasofaringea.png": "bloque-3-material-sanitario",
|
||||||
|
"dispositivos-supragloticos-guia.png": "bloque-3-material-sanitario",
|
||||||
|
"ventilacion-medios-fortuna.png": "bloque-3-material-sanitario",
|
||||||
|
|
||||||
|
# Bloque 7 - Conducción
|
||||||
|
"configuracion-gps-antes-de-salir.png": "bloque-7-conduccion",
|
||||||
|
|
||||||
|
# Bloque 12 - Marco Legal
|
||||||
|
"diagrama-decisiones-eticas.png": "bloque-12-marco-legal",
|
||||||
|
"diagrama-decisiones-eticas-urgencias.png": "bloque-12-marco-legal",
|
||||||
|
}
|
||||||
|
|
||||||
|
BASE_DIR = Path(__file__).parent.parent
|
||||||
|
SOURCE_DIR = BASE_DIR / "imagenes-pendientes"
|
||||||
|
TARGET_BASE = BASE_DIR / "public" / "assets" / "infografias"
|
||||||
|
|
||||||
|
|
||||||
|
def normalizar_nombre(nombre: str) -> str:
|
||||||
|
"""Normaliza el nombre para comparación (sin espacios extra, case-insensitive)"""
|
||||||
|
return nombre.strip().lower().replace(" ", " ")
|
||||||
|
|
||||||
|
|
||||||
|
def encontrar_mapeo(nombre_archivo: str) -> Optional[str]:
|
||||||
|
"""Encuentra el bloque correspondiente para un archivo"""
|
||||||
|
# Búsqueda exacta
|
||||||
|
if nombre_archivo in IMAGE_MAP:
|
||||||
|
return IMAGE_MAP[nombre_archivo]
|
||||||
|
|
||||||
|
# Búsqueda case-insensitive
|
||||||
|
nombre_lower = normalizar_nombre(nombre_archivo)
|
||||||
|
for key, bloque in IMAGE_MAP.items():
|
||||||
|
if normalizar_nombre(key) == nombre_lower:
|
||||||
|
return bloque
|
||||||
|
|
||||||
|
# Búsqueda parcial (para variaciones de nombres)
|
||||||
|
nombre_sin_ext = Path(nombre_archivo).stem.lower()
|
||||||
|
for key, bloque in IMAGE_MAP.items():
|
||||||
|
key_sin_ext = Path(key).stem.lower()
|
||||||
|
if key_sin_ext in nombre_sin_ext or nombre_sin_ext in key_sin_ext:
|
||||||
|
return bloque
|
||||||
|
|
||||||
|
return None
|
||||||
|
|
||||||
|
|
||||||
|
def organizar_imagenes():
|
||||||
|
"""Organiza todas las imágenes automáticamente"""
|
||||||
|
print("=" * 70)
|
||||||
|
print("🖼️ ORGANIZADOR AUTOMÁTICO DE IMÁGENES PARA PWA")
|
||||||
|
print("=" * 70)
|
||||||
|
print()
|
||||||
|
|
||||||
|
# Verificar directorios
|
||||||
|
if not SOURCE_DIR.exists():
|
||||||
|
print(f"❌ Error: No existe {SOURCE_DIR}")
|
||||||
|
return
|
||||||
|
|
||||||
|
if not TARGET_BASE.exists():
|
||||||
|
print(f"📁 Creando estructura de directorios...")
|
||||||
|
TARGET_BASE.mkdir(parents=True, exist_ok=True)
|
||||||
|
for bloque in ["bloque-0-fundamentos", "bloque-2-inmovilizacion",
|
||||||
|
"bloque-3-material-sanitario", "bloque-7-conduccion",
|
||||||
|
"bloque-12-marco-legal"]:
|
||||||
|
(TARGET_BASE / bloque).mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
# Obtener todas las imágenes
|
||||||
|
extensiones = ['.png', '.svg', '.jpg', '.jpeg', '.PNG', '.SVG', '.JPG', '.JPEG']
|
||||||
|
imagenes = []
|
||||||
|
for ext in extensiones:
|
||||||
|
imagenes.extend(SOURCE_DIR.glob(f'*{ext}'))
|
||||||
|
|
||||||
|
if not imagenes:
|
||||||
|
print(f"❌ No se encontraron imágenes en {SOURCE_DIR}")
|
||||||
|
return
|
||||||
|
|
||||||
|
print(f"📋 Encontradas {len(imagenes)} imagen(es)")
|
||||||
|
print()
|
||||||
|
|
||||||
|
# Estadísticas
|
||||||
|
movidas = 0
|
||||||
|
omitidas = 0
|
||||||
|
no_mapeadas = []
|
||||||
|
|
||||||
|
# Procesar cada imagen
|
||||||
|
for imagen in sorted(imagenes):
|
||||||
|
nombre = imagen.name
|
||||||
|
bloque = encontrar_mapeo(nombre)
|
||||||
|
|
||||||
|
if not bloque:
|
||||||
|
no_mapeadas.append(nombre)
|
||||||
|
print(f"⚠️ No mapeada: {nombre}")
|
||||||
|
continue
|
||||||
|
|
||||||
|
target_dir = TARGET_BASE / bloque
|
||||||
|
target_path = target_dir / nombre
|
||||||
|
|
||||||
|
# Si ya existe, verificar si es diferente
|
||||||
|
if target_path.exists():
|
||||||
|
if target_path.stat().st_size == imagen.stat().st_size:
|
||||||
|
print(f"⏭️ Ya existe: {nombre} → {bloque}/")
|
||||||
|
omitidas += 1
|
||||||
|
continue
|
||||||
|
else:
|
||||||
|
# Tamaño diferente, sobrescribir
|
||||||
|
print(f"🔄 Actualizando: {nombre} → {bloque}/")
|
||||||
|
|
||||||
|
try:
|
||||||
|
shutil.copy2(imagen, target_path)
|
||||||
|
print(f"✅ Movida: {nombre} → {bloque}/")
|
||||||
|
movidas += 1
|
||||||
|
except Exception as e:
|
||||||
|
print(f"❌ Error moviendo {nombre}: {e}")
|
||||||
|
|
||||||
|
# Resumen
|
||||||
|
print()
|
||||||
|
print("=" * 70)
|
||||||
|
print("📊 RESUMEN")
|
||||||
|
print("=" * 70)
|
||||||
|
print(f"✅ Movidas: {movidas}")
|
||||||
|
print(f"⏭️ Omitidas (ya existían): {omitidas}")
|
||||||
|
print(f"⚠️ No mapeadas: {len(no_mapeadas)}")
|
||||||
|
|
||||||
|
if no_mapeadas:
|
||||||
|
print()
|
||||||
|
print("📝 Imágenes no mapeadas (requieren revisión manual):")
|
||||||
|
for nombre in no_mapeadas:
|
||||||
|
print(f" - {nombre}")
|
||||||
|
print()
|
||||||
|
print("💡 Puedes añadirlas al mapeo en scripts/organizar_imagenes_auto.py")
|
||||||
|
|
||||||
|
print()
|
||||||
|
print("🎯 Próximo paso: Añadir referencias en archivos .md del manual")
|
||||||
|
print(" Ver: GUIA_INTEGRAR_IMAGENES_PWA.md")
|
||||||
|
print()
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
organizar_imagenes()
|
||||||
|
|
@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import Header from "@/components/layout/Header";
|
import Header from "@/components/layout/Header";
|
||||||
import BottomNav from "@/components/layout/BottomNav";
|
import BottomNav from "@/components/layout/BottomNav";
|
||||||
|
import Footer from "@/components/layout/Footer";
|
||||||
import SearchModal from "@/components/layout/SearchModal";
|
import SearchModal from "@/components/layout/SearchModal";
|
||||||
import MenuSheet from "@/components/layout/MenuSheet";
|
import MenuSheet from "@/components/layout/MenuSheet";
|
||||||
import Home from "./pages/Index";
|
import Home from "./pages/Index";
|
||||||
|
|
@ -37,13 +38,13 @@ const App = () => {
|
||||||
<Toaster />
|
<Toaster />
|
||||||
<Sonner />
|
<Sonner />
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background flex flex-col">
|
||||||
<Header
|
<Header
|
||||||
onSearchClick={() => setIsSearchOpen(true)}
|
onSearchClick={() => setIsSearchOpen(true)}
|
||||||
onMenuClick={() => setIsMenuOpen(true)}
|
onMenuClick={() => setIsMenuOpen(true)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<main className="pt-14 pb-safe">
|
<main className="pt-14 pb-safe flex-1">
|
||||||
<div className="container max-w-2xl py-4">
|
<div className="container max-w-2xl py-4">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route
|
<Route
|
||||||
|
|
@ -71,6 +72,8 @@ const App = () => {
|
||||||
|
|
||||||
<BottomNav />
|
<BottomNav />
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
<SearchModal
|
<SearchModal
|
||||||
isOpen={isSearchOpen}
|
isOpen={isSearchOpen}
|
||||||
onClose={() => setIsSearchOpen(false)}
|
onClose={() => setIsSearchOpen(false)}
|
||||||
|
|
|
||||||
|
|
@ -237,15 +237,40 @@ const MarkdownViewer = ({
|
||||||
),
|
),
|
||||||
|
|
||||||
// Images
|
// Images
|
||||||
img: ({ node, src, alt, ...props }: any) => (
|
img: ({ node, src, alt, ...props }: any) => {
|
||||||
<img
|
// Normalizar rutas de imágenes
|
||||||
className="rounded-lg my-4 max-w-full h-auto border border-border"
|
let imageSrc = src || '';
|
||||||
src={src}
|
|
||||||
alt={alt}
|
// Si es una ruta relativa que empieza con ./assets o ../assets
|
||||||
loading="lazy"
|
if (imageSrc.startsWith('./assets/') || imageSrc.startsWith('../assets/')) {
|
||||||
{...props}
|
// Convertir a ruta absoluta desde public/
|
||||||
/>
|
imageSrc = imageSrc.replace(/^\.\.?\/assets\//, '/assets/');
|
||||||
),
|
}
|
||||||
|
// Si es una ruta relativa que empieza con assets/
|
||||||
|
else if (imageSrc.startsWith('assets/') && !imageSrc.startsWith('/assets/')) {
|
||||||
|
// Convertir a ruta absoluta
|
||||||
|
imageSrc = `/${imageSrc}`;
|
||||||
|
}
|
||||||
|
// Si no empieza con /, asumir que es relativa desde public/
|
||||||
|
else if (imageSrc && !imageSrc.startsWith('/') && !imageSrc.startsWith('http')) {
|
||||||
|
imageSrc = `/${imageSrc}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
className="rounded-lg my-4 max-w-full h-auto border border-border shadow-sm"
|
||||||
|
src={imageSrc}
|
||||||
|
alt={alt || 'Imagen'}
|
||||||
|
loading="lazy"
|
||||||
|
onError={(e) => {
|
||||||
|
// Fallback si la imagen no se carga
|
||||||
|
console.warn(`No se pudo cargar la imagen: ${imageSrc}`);
|
||||||
|
(e.target as HTMLImageElement).style.display = 'none';
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{content}
|
{content}
|
||||||
|
|
|
||||||
30
src/components/layout/Footer.tsx
Normal file
30
src/components/layout/Footer.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
/**
|
||||||
|
* Footer minimalista con enlace de donaciones
|
||||||
|
* No intrusivo, visible solo en desktop
|
||||||
|
*/
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="hidden md:block py-6 border-t border-border mt-auto">
|
||||||
|
<div className="container max-w-2xl mx-auto px-4">
|
||||||
|
<div className="flex items-center justify-center gap-4 text-sm">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
EMERGES TES - Guía de Protocolos
|
||||||
|
</span>
|
||||||
|
<span className="text-muted-foreground">•</span>
|
||||||
|
<a
|
||||||
|
href="https://ko-fi.com/emergestes"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-muted-foreground hover:text-primary transition-colors"
|
||||||
|
aria-label="Apoya el proyecto EMERGES TES"
|
||||||
|
title="Ayuda a mantener EMERGES TES gratuito"
|
||||||
|
>
|
||||||
|
☕ Apóyanos
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -9,6 +9,39 @@ interface MenuSheetProps {
|
||||||
const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
|
const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
|
||||||
if (!isOpen) return null;
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
const handleShare = async () => {
|
||||||
|
const shareData = {
|
||||||
|
title: 'EMERGES TES - Guía de Protocolos',
|
||||||
|
text: 'Guía rápida de protocolos médicos de emergencias para Técnicos de Emergencias Sanitarias',
|
||||||
|
url: window.location.origin,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Intentar usar Web Share API nativa (móviles)
|
||||||
|
if (navigator.share) {
|
||||||
|
await navigator.share(shareData);
|
||||||
|
onClose();
|
||||||
|
} else {
|
||||||
|
// Fallback: copiar URL al portapapeles
|
||||||
|
await navigator.clipboard.writeText(shareData.url);
|
||||||
|
alert('URL copiada al portapapeles');
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// Usuario canceló o error
|
||||||
|
if ((error as Error).name !== 'AbortError') {
|
||||||
|
console.error('Error al compartir:', error);
|
||||||
|
// Fallback: copiar URL
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(shareData.url);
|
||||||
|
alert('URL copiada al portapapeles');
|
||||||
|
} catch (clipboardError) {
|
||||||
|
console.error('Error al copiar:', clipboardError);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ icon: <BookOpen className="w-5 h-5" />, label: 'Manual Completo', path: '/manual', onClick: onClose },
|
{ icon: <BookOpen className="w-5 h-5" />, label: 'Manual Completo', path: '/manual', onClick: onClose },
|
||||||
{ icon: <Phone className="w-5 h-5" />, label: 'Protocolos Transtelefónicos', path: '/telefono', onClick: onClose },
|
{ icon: <Phone className="w-5 h-5" />, label: 'Protocolos Transtelefónicos', path: '/telefono', onClick: onClose },
|
||||||
|
|
@ -16,7 +49,7 @@ const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
|
||||||
{ icon: <ClipboardCheck className="w-5 h-5" />, label: 'Checklists Material', path: '/material', onClick: onClose },
|
{ icon: <ClipboardCheck className="w-5 h-5" />, label: 'Checklists Material', path: '/material', onClick: onClose },
|
||||||
{ icon: <Star className="w-5 h-5" />, label: 'Favoritos', onClick: () => {} },
|
{ icon: <Star className="w-5 h-5" />, label: 'Favoritos', onClick: () => {} },
|
||||||
{ icon: <History className="w-5 h-5" />, label: 'Historial', onClick: () => {} },
|
{ icon: <History className="w-5 h-5" />, label: 'Historial', onClick: () => {} },
|
||||||
{ icon: <Share2 className="w-5 h-5" />, label: 'Compartir App', onClick: () => {} },
|
{ icon: <Share2 className="w-5 h-5" />, label: 'Compartir App', onClick: handleShare },
|
||||||
{ icon: <Settings className="w-5 h-5" />, label: 'Ajustes', onClick: () => {} },
|
{ icon: <Settings className="w-5 h-5" />, label: 'Ajustes', onClick: () => {} },
|
||||||
{ icon: <Info className="w-5 h-5" />, label: 'Acerca de', onClick: () => {} },
|
{ icon: <Info className="w-5 h-5" />, label: 'Acerca de', onClick: () => {} },
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -30,31 +30,46 @@ export default defineConfig({
|
||||||
"@": path.resolve(__dirname, "./src"),
|
"@": path.resolve(__dirname, "./src"),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Configuración para procesar archivos .md
|
// Configuración para procesar archivos .md e imágenes
|
||||||
assetsInclude: ["**/*.md"],
|
assetsInclude: ["**/*.md", "**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.svg", "**/*.gif"],
|
||||||
|
|
||||||
// Configuración de build para incluir archivos .md
|
// Configuración de build para incluir archivos .md e imágenes
|
||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
// Asegurar que los archivos .md se copien al build
|
// Asegurar que los archivos .md e imágenes se copien al build
|
||||||
output: {
|
output: {
|
||||||
assetFileNames: (assetInfo) => {
|
assetFileNames: (assetInfo) => {
|
||||||
|
const name = assetInfo.name || '';
|
||||||
|
|
||||||
// Mantener estructura de carpetas para archivos .md en public/
|
// Mantener estructura de carpetas para archivos .md en public/
|
||||||
if (assetInfo.name?.endsWith('.md')) {
|
if (name.endsWith('.md')) {
|
||||||
// Si está en public/manual/, mantener esa estructura
|
|
||||||
const name = assetInfo.name || '';
|
|
||||||
if (name.includes('manual')) {
|
if (name.includes('manual')) {
|
||||||
return 'manual/[name][extname]';
|
return 'manual/[name][extname]';
|
||||||
}
|
}
|
||||||
return 'assets/[name]-[hash][extname]';
|
return 'assets/[name]-[hash][extname]';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Mantener estructura de carpetas para imágenes en public/assets/
|
||||||
|
if (name.match(/\.(png|jpg|jpeg|svg|gif)$/i)) {
|
||||||
|
// Si está en public/assets/infografias/, mantener estructura
|
||||||
|
if (assetInfo.source && typeof assetInfo.source === 'string') {
|
||||||
|
// Mantener estructura de carpetas para assets
|
||||||
|
if (assetInfo.source.includes('assets/infografias')) {
|
||||||
|
// Extraer ruta relativa desde public/
|
||||||
|
const relativePath = assetInfo.source.split('public/')[1] || name;
|
||||||
|
return relativePath;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 'assets/[name]-[hash][extname]';
|
||||||
|
}
|
||||||
|
|
||||||
return 'assets/[name]-[hash][extname]';
|
return 'assets/[name]-[hash][extname]';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Incluir archivos .md en el build
|
// Incluir archivos .md e imágenes en el build
|
||||||
assetsInclude: ['**/*.md'],
|
assetsInclude: ['**/*.md', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg', '**/*.gif'],
|
||||||
// Copiar 404.html y sw.js de public/ a dist/ para GitHub Pages
|
// Copiar todo el directorio public/ a dist/ (incluye imágenes)
|
||||||
copyPublicDir: true,
|
copyPublicDir: true,
|
||||||
},
|
},
|
||||||
// Configuración para PWA
|
// Configuración para PWA
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue