planetazuzu/codigo0
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
codigo0/docs/INSTRUCCIONES_SUBIR_INFOGRAFIA.md

4.6 KiB
Raw Blame History

📤 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:

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:

![Infografía ABCDE - Estructura Mental de Priorización]/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg)

Después (si es PNG):

![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:

'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:

    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:

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