docs: añadir guía de uso del sistema de registry de imágenes
- Explicar qué es el registry y cómo funciona - Ejemplos de uso (alias vs rutas directas) - Lista completa de alias disponibles - Funciones helper para búsqueda - Ejemplo completo de uso - Ventajas del sistema - Próximos pasos para migración
This commit is contained in:
parent
4ad67065c1
commit
14994f9e28
246
GUIA_USO_REGISTRY_IMAGENES.md
Normal file
246
GUIA_USO_REGISTRY_IMAGENES.md
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
# 📸 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):
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
### Ahora (con registry):
|
||||
```markdown
|
||||
![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:
|
||||
|
||||
```markdown
|
||||
![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`:
|
||||
|
||||
```typescript
|
||||
'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:
|
||||
|
||||
```markdown
|
||||
![rcp-paso-1]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. Usar Ruta Directa (Sistema Antiguo - Sigue Funcionando)
|
||||
|
||||
Si prefieres usar rutas directas, sigue funcionando:
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
**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:
|
||||
```typescript
|
||||
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:
|
||||
```typescript
|
||||
import { findImagesByTags } from '@/data/image-registry';
|
||||
|
||||
const imagenesRCP = findImagesByTags(['rcp', 'reanimacion']);
|
||||
// Retorna: Array de ImageMetadata que tienen esos tags
|
||||
```
|
||||
|
||||
### Buscar por ID:
|
||||
```typescript
|
||||
import { findImageById } from '@/data/image-registry';
|
||||
|
||||
const imagen = findImageById('collarin-seleccion');
|
||||
// Retorna: ImageMetadata o undefined
|
||||
```
|
||||
|
||||
### Verificar si existe:
|
||||
```typescript
|
||||
import { hasImageId } from '@/data/image-registry';
|
||||
|
||||
if (hasImageId('collarin-seleccion')) {
|
||||
// La imagen existe en el registry
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 EJEMPLO COMPLETO
|
||||
|
||||
### Archivo Markdown:
|
||||
```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: ``
|
||||
- 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
|
||||
Loading…
Reference in a new issue