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.6 KiB

Raw Blame History

✅ Configuración PWA para Imágenes - COMPLETADA

Fecha: 2024-12-19

✅ CAMBIOS REALIZADOS

1. Service Worker (`public/sw.js`)

✅ Actualizado para cachear rutas /assets/infografias/
✅ Estrategia cache-first para imágenes (offline-first)
✅ Cache automático cuando se cargan imágenes

2. Vite Config (`vite.config.ts`)

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

3. Estructura de Carpetas

✅ Creada en public/assets/infografias/
✅ 5 bloques organizados:
- bloque-0-fundamentos/
- bloque-2-inmovilizacion/
- bloque-3-material-sanitario/
- bloque-7-conduccion/
- bloque-12-marco-legal/

4. Documentación

✅ GUIA_INTEGRAR_IMAGENES_PWA.md - Guía completa
✅ RESUMEN_PWA_IMAGENES.md - Resumen técnico
✅ ESTADO_INFOGRAFIAS_MEDIOS.md - Estado actual

📋 QUÉ FALTA (Próximos Pasos)

Paso 1: Organizar Imágenes

# Opción A: Script Python (interactivo)
python scripts/organizar_infografias.py

# Opción B: Manual
# Mover imágenes desde imagenes-pendientes/ a public/assets/infografias/

Paso 2: Añadir Referencias en Markdown

Editar archivos .md del manual para incluir:

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

Paso 3: Build y Verificar

npm run build
# Verificar que dist/assets/infografias/ contiene las imágenes

🎯 CÓMO FUNCIONARÁ

Usuario carga página con imagen en Markdown
Navegador solicita imagen desde /assets/infografias/...
Service Worker intercepta y cachea la imagen
Siguiente visita offline: Imagen se sirve desde cache
Resultado: PWA funciona completamente offline con imágenes

✅ VERIFICACIÓN

Build Actual

npm run build
# ✅ Build exitoso
# ✅ Estructura de carpetas se copia a dist/

Test Offline (cuando haya imágenes)

Cargar app con imágenes
DevTools > Network > Offline
Recargar página
✅ Imágenes deben cargar desde cache

📊 ESTADO FINAL

Componente	Estado
Service Worker	✅ Configurado
Vite Build	✅ Configurado
Estructura carpetas	✅ Creada
Imágenes organizadas	⏳ Pendiente (48 en `imagenes-pendientes/`)
Referencias Markdown	⏳ Pendiente
Funciona offline	✅ Sí, cuando se completen pasos 1-2

Conclusión: La PWA está configurada para funcionar offline con imágenes. Solo falta organizar las imágenes y añadir referencias en el manual.

2.6 KiB Raw Blame History