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
92 lines
2.4 KiB
Markdown
92 lines
2.4 KiB
Markdown
# 📸 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)**
|
|
```bash
|
|
python scripts/organizar_infografias.py
|
|
```
|
|
|
|
**Opción B: Manual**
|
|
```bash
|
|
# 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:
|
|
```markdown
|
|
|
|
```
|
|
|
|
### Paso 3: Build y Verificar
|
|
|
|
```bash
|
|
npm run build
|
|
ls -R dist/assets/infografias/ # Verificar que están en el build
|
|
```
|
|
|
|
### Paso 4: Test Offline
|
|
|
|
1. Abrir app en navegador
|
|
2. Cargar páginas con imágenes (para cachear)
|
|
3. DevTools > Network > Offline
|
|
4. 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
|
|
|
|
1. **Las imágenes se cachean automáticamente** cuando se cargan por primera vez
|
|
2. **No necesitas precachear manualmente** - el SW las cachea bajo demanda
|
|
3. **Una vez organizadas y referenciadas**, funcionarán offline automáticamente
|
|
4. **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.
|