planetazuzu
2f9fb6e499
- Fase 1: Eliminar archivos innecesarios (logs, builds, node_modules) - Fase 2: Mover backups y duplicados a revisión: - _BACKUP_MD/ (203 archivos) - MANUAL_TES_DIGITAL/ (110 archivos) - imagenes-pendientes/ (60 archivos) - Fase 3: Simplificar configuraciones (mover no usadas a config_backup/) - Fase 4: Consolidar documentación: - 13 documentos esenciales → docs/consolidado/ - 42 documentos → docs/archivo/ - README.md actualizado - Fase 5: Organizar scripts (mantener solo esenciales) - Fase 6: Reinstalación y verificación (npm install + build) - Corregir clave duplicada 'uso-tensiometro' en image-registry.ts - Total: 393 archivos movidos a revisión, 5 configuraciones archivadas, 55 documentos organizados - Build verificado y exitoso
233 lines
6.6 KiB
Markdown
233 lines
6.6 KiB
Markdown
# 📸 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
|