planetazuzu
1a7f9ae008
- 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
6.6 KiB
6.6 KiB
📸 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)
Opción 2: Ruta relativa desde public/
Opción 3: Ruta relativa con ../
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
Bloque 2 - Inmovilización
Bloque 3 - Material Sanitario
🔧 ADAPTACIÓN DEL MARKDOWNVIEWER
El MarkdownViewer ahora procesa automáticamente las rutas de imágenes:
- Rutas relativas (
./assets/,../assets/) → Se convierten a absolutas (/assets/) - Rutas sin
/(assets/) → Se convierten a absolutas (/assets/) - Rutas absolutas (
/assets/) → Se mantienen como están - URLs externas (
http://...) → Se mantienen como están
Ejemplo de procesamiento:
<!-- 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)
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
✅ Bueno:
❌ Malo:
3. Organizar por bloque
<!-- 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:
- Verificar que la imagen existe en
public/assets/infografias/ - Verificar que la ruta en Markdown es correcta
- 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:
- Verificar que la imagen está en
public/assets/ - Ejecutar
npm run build - 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
## 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