163 lines
4.6 KiB
Markdown
163 lines
4.6 KiB
Markdown
# 📤 Instrucciones para Subir la Infografía ABCDE
|
|
|
|
## 📍 Dónde Subir el Archivo
|
|
|
|
### Opción 1: Reemplazar el SVG actual (recomendado)
|
|
|
|
**Ubicación del archivo:**
|
|
```
|
|
public/assets/infografias/bloque-0-fundamentos/
|
|
```
|
|
|
|
**Nombre del archivo:**
|
|
- Si es **PNG**: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png`
|
|
- Si es **JPG**: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.jpg`
|
|
- Si es **SVG**: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg`
|
|
|
|
**Ruta completa:**
|
|
```
|
|
/home/planetazuzu/guia-tes/public/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.[extensión]
|
|
```
|
|
|
|
### Opción 2: Mantener ambos archivos
|
|
|
|
Si quieres mantener el SVG actual y añadir la nueva:
|
|
- Nombre alternativo: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL_V2.png`
|
|
|
|
---
|
|
|
|
## 🔧 Pasos para Integrar
|
|
|
|
### 1. Guardar el archivo
|
|
|
|
Copia tu infografía a:
|
|
```bash
|
|
public/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png
|
|
```
|
|
(Reemplaza `.png` por la extensión correcta: `.jpg`, `.png`, `.svg`)
|
|
|
|
### 2. Actualizar el Markdown
|
|
|
|
Edita el archivo:
|
|
```
|
|
docs/consolidado/SECCION_01_ABCDE_OPERATIVO.md
|
|
```
|
|
|
|
Busca la línea 61 y actualiza la ruta de la imagen:
|
|
|
|
**Antes:**
|
|
```markdown
|
|
![Infografía ABCDE - Estructura Mental de Priorización]/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg)
|
|
```
|
|
|
|
**Después (si es PNG):**
|
|
```markdown
|
|
![Infografía ABCDE - Estructura Mental de Priorización]/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png)
|
|
```
|
|
|
|
### 3. Actualizar el registro de imágenes (opcional)
|
|
|
|
Si quieres que la imagen aparezca en el sistema de búsqueda, edita:
|
|
```
|
|
src/data/image-registry.ts
|
|
```
|
|
|
|
Busca la entrada `'abcde-introduccion-estructura-mental'` y actualiza el `path`:
|
|
|
|
```typescript
|
|
'abcde-introduccion-estructura-mental': {
|
|
id: 'abcde-introduccion-estructura-mental',
|
|
path: '/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png', // ← Cambiar extensión
|
|
alt: 'ABCDE como estructura mental de priorización - Infografía conceptual',
|
|
caption: 'Infografía que muestra el ABCDE como estructura mental de priorización, comparando evaluación desordenada vs estructurada',
|
|
block: 'bloque-0-fundamentos',
|
|
tags: ['abcde', 'introduccion', 'estructura-mental', 'priorizacion', 'formacion']
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 👀 Dónde Ver la Infografía
|
|
|
|
### En la App (desarrollo)
|
|
|
|
1. **Inicia el servidor de desarrollo:**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
2. **Navega a la Guía de Refuerzo ABCDE:**
|
|
- Ve a: `http://localhost:5173/guias/abcde-operativo`
|
|
- O desde el menú: "Guías de Refuerzo" → "ABCDE Operativo"
|
|
|
|
3. **Abre la Sección 1:**
|
|
- Haz clic en "Sección 1: Introducción y Contexto"
|
|
- La infografía aparecerá en el "Bloque 2: Visual Explicativo"
|
|
|
|
### Ruta directa:
|
|
```
|
|
http://localhost:5173/guias/abcde-operativo/1
|
|
```
|
|
|
|
### Ver la imagen directamente:
|
|
```
|
|
http://localhost:5173/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png
|
|
```
|
|
(Reemplaza `.png` por tu extensión)
|
|
|
|
---
|
|
|
|
## ✅ Verificación
|
|
|
|
### Checklist de verificación:
|
|
|
|
- [ ] Archivo guardado en `public/assets/infografias/bloque-0-fundamentos/`
|
|
- [ ] Nombre del archivo correcto (con extensión adecuada)
|
|
- [ ] Markdown actualizado con la ruta correcta
|
|
- [ ] Registro de imágenes actualizado (opcional)
|
|
- [ ] Servidor de desarrollo iniciado
|
|
- [ ] Infografía visible en la Sección 1 de la guía
|
|
|
|
---
|
|
|
|
## 🐛 Solución de Problemas
|
|
|
|
### La imagen no aparece:
|
|
|
|
1. **Verifica la ruta:**
|
|
- La ruta en Markdown debe empezar con `/assets/...`
|
|
- No debe incluir `public/` en la ruta
|
|
|
|
2. **Verifica la extensión:**
|
|
- Asegúrate de que la extensión en el Markdown coincida con el archivo real
|
|
|
|
3. **Verifica el servidor:**
|
|
- Reinicia el servidor de desarrollo: `npm run dev`
|
|
- Limpia la caché del navegador (Ctrl+Shift+R)
|
|
|
|
4. **Verifica permisos:**
|
|
- Asegúrate de que el archivo tiene permisos de lectura
|
|
|
|
### La imagen se ve pequeña:
|
|
|
|
Añade atributos HTML en el Markdown:
|
|
```markdown
|
|
<img src="/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png"
|
|
alt="Infografía ABCDE"
|
|
style="width: 100%; max-width: 1200px; height: auto;" />
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Notas
|
|
|
|
- **Formato recomendado:** PNG o JPG de alta calidad (mínimo 1200px de ancho)
|
|
- **Tamaño máximo:** Se recomienda optimizar la imagen para web (< 2MB)
|
|
- **Nombres de archivo:** Usa mayúsculas y guiones bajos para consistencia
|
|
- **Rutas:** Todas las rutas en Markdown son relativas a `public/`
|
|
|
|
---
|
|
|
|
**¡Listo!** Una vez que subas el archivo y actualices el Markdown, la infografía aparecerá automáticamente en la Sección 1 de la Guía de Refuerzo ABCDE.
|
|
|