codigo0/docs/archivo/ESTADO_INFOGRAFIAS_MEDIOS.md

📸 Estado de Infografías y Medios Visuales - EMERGES TES

Fecha: 2025-12-23

---

🔍 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:

  ![Descripción](./assets/infografias/bloque-2-inmovilizacion/colocacion-collarin-paso-1.png)
  

• 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

# 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:

![Descripción de la imagen](./assets/infografias/bloque-X-tema/nombre.png)

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:

   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 ![descripción](./assets/infografias/...) 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.