planetazuzu 1a7f9ae008 feat: organizar imágenes para PWA y adaptar MarkdownViewer

- 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

2025-12-19 21:14:20 +01:00

2.4 KiB

Raw Blame History

📸 Resumen: Imágenes en PWA - EMERGES TES

Fecha: 2024-12-19

✅ CONFIGURACIÓN COMPLETADA PARA PWA

1. Service Worker Actualizado

✅ Cachea imágenes automáticamente (cache-first strategy)
✅ Detecta rutas /assets/infografias/ y las cachea
✅ Funciona offline una vez que las imágenes se cargan

2. Vite Build Configurado

✅ Copia public/ a dist/ (incluye imágenes)
✅ Mantiene estructura de carpetas para assets
✅ Incluye PNG, JPG, SVG, GIF en el build

3. Estructura de Carpetas Creada

public/assets/infografias/
├── bloque-0-fundamentos/
├── bloque-2-inmovilizacion/
├── bloque-3-material-sanitario/
├── bloque-7-conduccion/
└── bloque-12-marco-legal/

📋 PRÓXIMOS PASOS

Paso 1: Mover Imágenes (Manual o Script)

Opción A: Script Python (Recomendado)

python scripts/organizar_infografias.py

Opción B: Manual

# Ejemplo: Mover imágenes de collarín
cp imagenes-pendientes/colocacion-collarin-paso-*.png public/assets/infografias/bloque-2-inmovilizacion/

Paso 2: Añadir Referencias en Markdown

Editar archivos .md del manual:

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

Paso 3: Build y Verificar

npm run build
ls -R dist/assets/infografias/  # Verificar que están en el build

Paso 4: Test Offline

Abrir app en navegador
Cargar páginas con imágenes (para cachear)
DevTools > Network > Offline
Verificar que las imágenes cargan

🎯 ESTADO ACTUAL

Aspecto	Estado
Service Worker	✅ Configurado para cachear imágenes
Vite Build	✅ Incluye imágenes en build
Estructura carpetas	✅ Creada
Imágenes organizadas	❌ Pendiente (48 en `imagenes-pendientes/`)
Referencias en Markdown	❌ Pendiente (0 referencias)
Funciona offline	⚠️ Cuando se completen pasos 1-2

📝 NOTAS IMPORTANTES

Las imágenes se cachean automáticamente cuando se cargan por primera vez
No necesitas precachear manualmente - el SW las cachea bajo demanda
Una vez organizadas y referenciadas, funcionarán offline automáticamente
El tamaño total de imágenes (~8.5MB) es aceptable para PWA

Conclusión: La infraestructura está lista. Solo falta organizar las imágenes y añadir referencias en el manual.

2.4 KiB Raw Blame History