- 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 |
||
|---|---|---|
| .. | ||
| 7 Mandamientos Movilización Segura Paciente.png | ||
| ALGORITMO OPERATIVO DEL TES.svg | ||
| BLOQUE_01_2_diagrama_flujo_abcde.svg | ||
| BLOQUE_02_5_colocacion_tablero_espinal_paso_a_paso.svg | ||
| BLOQUE_03_0A_configuracion_maxima_fio2_bvm.png | ||
| BLOQUE_03_0A_diagrama_seleccion_dispositivo_oxigenoterapia.svg | ||
| BLOQUE_03_0A_guia_colocacion_dispositivos_oxigenoterapia.svg | ||
| BLOQUE_03_0A_tabla_rangos_fio2_oxigenoterapia.svg | ||
| canulas-guedel-nasofaringea.png | ||
| colocacion-colchon-vacio-paso-a-paso.png | ||
| 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 | ||
| componentes-camilla-cuchara.png | ||
| componentes-colchon-vacio.png | ||
| componentes-sistema-inmovilizacion 1.png | ||
| componentes-sistema-inmovilizacion.png | ||
| componentes-tablero-espinal.png | ||
| configuracion-gps-antes-de-salir.png | ||
| configuracion-maxima-fio2-bolsa-mascarilla.png | ||
| constante-vitales-adulto-pediatrico.svg | ||
| coordinacion-equipo-inmovilizacion.png | ||
| CÓDIGO DE COLORES PARA BOLSAS TES.png | ||
| diagrama-decisiones-eticas-urgencias.png | ||
| diagrama-decisiones-eticas.png | ||
| diagrama-seleccion-dispositivo-oxigenoterapia.png | ||
| dispositivos-supragloticos-guia.png | ||
| errores-frecuentes-collarin-cervical.png | ||
| fast-transtelefonico.png | ||
| flujo-desa-telefono.png | ||
| flujo-rcp-transtelefonica.png | ||
| guia-colocacion-dispositivos-oxigenoterapia.png | ||
| interpretacion-constantes-semaforo.png | ||
| PLANTILLA_diagrama_flujo_protocolos_avanzados.svg | ||
| posicion-tes-inmovilizacion-manual 1.png | ||
| posicion-tes-inmovilizacion-manual.png | ||
| README.md | ||
| registro-constantes-vitales.png | ||
| RESUMEN VISUAL DEL ALGORITMO START.svg | ||
| secuencia-transicion-inmovilizacion.png | ||
| seleccion-talla-collarin 2.png | ||
| seleccion-talla-collarin-cervical.png | ||
| seleccion-talla-collarin-cervical1.png | ||
| seleccion-talla-collarin-error-demasiado-grande.png | ||
| seleccion-talla-collarin-medicion-anatomica.png | ||
| seleccion-talla-collarin-tabla-tallas.png | ||
| situaciones-que-requieren-inmovilizacion.png | ||
| tabla-rangos-fio2-oxigenoterapia.png | ||
| tabla-rangos-fio2-oxigenoterapia1.png | ||
| tecnica-sujecion-manual 1.png | ||
| tecnica-sujecion-manual-cervical.png | ||
| uso-correcto-ambu.png | ||
| uso-correcto-pulsioximetro.png | ||
| uso-correcto-tensiometro.png | ||
| ventilacion-medios-fortuna.png | ||
| verificaciones-post-colocacion-collarin.png | ||
| zona alamacenamiento uvi.png | ||
📸 CARPETA DE IMÁGENES PENDIENTES
Esta carpeta es un área de trabajo temporal para las imágenes que estás creando antes de organizarlas en su ubicación final.
📋 PROPÓSITO
- ✅ Coloca aquí las imágenes que vas creando
- ✅ Úsala como área de trabajo temporal
- ✅ Una vez listas, organízalas usando el script de organización
🎨 FORMATOS ACEPTADOS
Ambos formatos son válidos:
- ✅ PNG (
.png) - Para imágenes con muchos colores o fotografías - ✅ SVG (
.svg) - Para diagramas y gráficos vectoriales
El formato no importa - el script de organización manejará ambos correctamente.
🚀 CÓMO USAR ESTA CARPETA
1. Coloca tus imágenes aquí
Simplemente copia o guarda tus imágenes en esta carpeta (PNG o SVG, da igual).
2. Organiza automáticamente
Cuando tengas varias imágenes listas, puedes usar el script de organización:
# Opción interactiva (te pregunta cada imagen)
python scripts/organizar_infografias.py
# Opción automática (organiza según palabras clave)
python scripts/organizar_infografias_simple.py
3. Ubicación final
Las imágenes se moverán automáticamente a:
public/assets/infografias/bloque-X-nombre/(según el bloque correspondiente)
📁 ESTRUCTURA RECOMENDADA
Puedes organizar temporalmente tus imágenes aquí si quieres:
imagenes-pendientes/
├── bloque-0/ ← Imágenes del Bloque 0
├── bloque-2/ ← Imágenes del Bloque 2
├── bloque-3/ ← Imágenes del Bloque 3
└── varias/ ← Imágenes sin clasificar aún
💡 CONSEJOS
- Nombra tus archivos descriptivamente:
diagrama-oxigeno.pngodiagrama-oxigeno.svges mejor queimagen1.png - El formato no importa: Puedes usar PNG o SVG, ambos funcionan igual
- Mantén esta carpeta limpia: Una vez organizadas, las imágenes se moverán automáticamente
- El script reconoce palabras clave: Nombres descriptivos ayudan al script a ubicarlas correctamente
📖 MÁS INFORMACIÓN
- Ver
public/assets/README_UBICACION_IMAGENES.mdpara saber dónde va cada imagen - Ver
scripts/README_ORGANIZADOR_INFOGRAFIAS.mdpara más detalles sobre el script - Ver
GUIA_ORGANIZAR_INFOGRAFIAS.mden la raíz del proyecto
Nota: Esta carpeta puede estar en .gitignore si prefieres no versionar imágenes temporales.