codigo0/GUIA_USO_REGISTRY_IMAGENES.md

📸 Guía de Uso: Sistema de Registry de Imágenes

Fecha: 2024-12-19
Sistema: Híbrido con Registry (Opción 4)

---

🎯 ¿Qué es el Registry?

El Registry de Imágenes es un sistema que permite usar alias cortos en lugar de rutas completas en los archivos Markdown.

Antes (sistema antiguo):

![Selección de talla de collarín cervical](/assets/infografias/bloque-2-inmovilizacion/seleccion-talla-collarin-cervical.png)

Ahora (con registry):

![collarin-seleccion]

Ventajas:

• ✅ Referencias más cortas y legibles
• ✅ Captions automáticos (se muestran debajo de la imagen)
• ✅ Metadatos centralizados (alt, tags, bloque)
• ✅ Fácil mantenimiento (cambiar ruta en un solo lugar)
• ✅ Compatible con rutas directas (sigue funcionando el sistema antiguo)

---

📝 CÓMO USAR EL REGISTRY

1. Usar Alias Existente

Si la imagen ya está en el registry, simplemente usa su ID:

![collarin-seleccion]
![abcde-algoritmo]
![triage-start]
![uso-ambu]

Resultado:

• Se renderiza la imagen con su ruta correcta
• Se muestra el alt del registry
• Se muestra el caption automáticamente debajo (si existe)

---

2. Añadir Nueva Imagen al Registry

Paso 1: Añadir la imagen al registry en src/data/image-registry.ts:

'rcp-paso-1': {
  id: 'rcp-paso-1',
  path: '/assets/infografias/bloque-4-rcp/rcp-paso-1-verificar.png',
  alt: 'Paso 1: Verificar consciencia y respiración',
  caption: 'Primer paso del protocolo RCP: verificar consciencia y respiración',
  block: 'bloque-4-rcp',
  tags: ['rcp', 'paso-1', 'verificacion', 'consciencia']
},

Paso 2: Usar en Markdown:

![rcp-paso-1]

---

3. Usar Ruta Directa (Sistema Antiguo - Sigue Funcionando)

Si prefieres usar rutas directas, sigue funcionando:

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

Nota: Las rutas directas NO tienen captions automáticos, solo las del registry.

---

🔍 LISTA DE ALIAS DISPONIBLES

Bloque 0: Fundamentos

• abcde-algoritmo - Algoritmo operativo del TES
• triage-start - Resumen visual del algoritmo START
• diagrama-seleccion-oxigenoterapia - Diagrama de selección de dispositivo
• tabla-rangos-fio2 - Tabla de rangos de FiO2
• flujo-rcp-transtelefonica - Flujo de RCP transtelefónica
• flujo-desa-telefono - Flujo de uso de DESA transtelefónico

Bloque 1: Procedimientos Básicos

• registro-constantes-vitales - Registro de constantes vitales
• interpretacion-constantes-semaforo - Interpretación sistema semáforo
• uso-pulsioximetro - Uso correcto del pulsioxímetro
• uso-tensiometro - Uso correcto del tensiómetro

Bloque 2: Inmovilización

• collarin-seleccion - Selección de talla de collarín
• collarin-medicion - Medición anatómica para selección
• collarin-tabla-tallas - Tabla de tallas de collarín
• collarin-paso-1 - Paso 1: Preparación
• collarin-paso-2 - Paso 2: Parte posterior
• collarin-paso-3 - Paso 3: Parte anterior
• collarin-paso-4 - Paso 4: Ajuste de cierres
• collarin-paso-5 - Paso 5: Verificación
• collarin-paso-6 - Paso 6: Liberación controlada
• collarin-verificaciones - Verificaciones post-colocación
• collarin-errores - Errores frecuentes

Bloque 3: Material Sanitario

• canulas-guedel-nasofaringea - Cánulas de Guedel y nasofaríngea
• uso-ambu - Uso correcto de la bolsa-mascarilla (Ambú)
• configuracion-fio2-bvm - Configuración máxima de FiO2 con BVM
• guia-colocacion-oxigenoterapia - Guía de colocación de dispositivos

---

🛠️ FUNCIONES HELPER

El registry incluye funciones helper para buscar imágenes:

Buscar por bloque:

import { findImagesByBlock } from '@/data/image-registry';

const imagenesCollarin = findImagesByBlock('bloque-2-inmovilizacion');
// Retorna: Array de ImageMetadata con todas las imágenes del bloque

Buscar por tags:

import { findImagesByTags } from '@/data/image-registry';

const imagenesRCP = findImagesByTags(['rcp', 'reanimacion']);
// Retorna: Array de ImageMetadata que tienen esos tags

Buscar por ID:

import { findImageById } from '@/data/image-registry';

const imagen = findImageById('collarin-seleccion');
// Retorna: ImageMetadata o undefined

Verificar si existe:

import { hasImageId } from '@/data/image-registry';

if (hasImageId('collarin-seleccion')) {
  // La imagen existe en el registry
}

---

📋 EJEMPLO COMPLETO

Archivo Markdown:

## 2.3.1 Selección de Talla

Para seleccionar la talla correcta del collarín:

1. Medir distancia entre mentón y esternón
2. Consultar tabla de tallas
3. Verificar ajuste

![collarin-seleccion]

### Pasos de Colocación

**Paso 1: Preparación**
![collarin-paso-1]

**Paso 2: Parte Posterior**
![collarin-paso-2]

**Paso 3: Parte Anterior**
![collarin-paso-3]

Resultado Visual:

• Cada imagen se renderiza con su caption automático
• Las imágenes tienen estilos consistentes
• Los captions son descriptivos y útiles

---

✅ VENTAJAS DEL SISTEMA

1. Referencias Cortas:

   • Antes: ![Descripción](/assets/infografias/bloque-2-inmovilizacion/seleccion-talla-collarin-cervical.png)
   • Ahora: ![collarin-seleccion]

2. Captions Automáticos:

   • Se muestran debajo de la imagen automáticamente
   • No hay que escribirlos en cada referencia

3. Metadatos Centralizados:

   • Alt text para accesibilidad
   • Tags para búsqueda
   • Bloque temático
   • Fácil de mantener

4. Validación:

   • Si el alias no existe, se muestra un error claro
   • Fácil detectar imágenes faltantes

5. Compatibilidad:

   • Las rutas directas siguen funcionando
   • Migración progresiva sin romper nada

---

🚀 PRÓXIMOS PASOS

Para añadir más imágenes:

1. Añadir al registry (src/data/image-registry.ts)
2. Actualizar referencias en Markdown (cambiar rutas por alias)
3. Verificar que funciona (build y preview)

Para migrar imágenes existentes:

1. Buscar referencias con rutas completas en .md
2. Añadir imagen al registry si no está
3. Reemplazar ruta por alias
4. Verificar que se renderiza correctamente

---

📊 ESTADO ACTUAL

• Imágenes en registry: 20+
• Referencias migradas: 12
• Referencias pendientes: ~5 (resto de imágenes con rutas directas)

---

Última actualización: 2024-12-19