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

7 KiB
Raw Blame History

📤 Instrucciones para Subir Medios Visuales

📍 Ubicación de Archivos

Ruta Completa

/home/planetazuzu/guia-tes/public/assets/infografias/bloque-0-fundamentos/

Ruta Relativa (desde raíz del proyecto)

public/assets/infografias/bloque-0-fundamentos/

🎯 Métodos para Subir Archivos

Método 1: Desde el Explorador de Archivos (Más Fácil)

  1. Abre el explorador de archivos en tu sistema
  2. Navega a la carpeta del proyecto: 
    /home/planetazuzu/guia-tes/public/assets/infografias/bloque-0-fundamentos/
  3. Copia y pega tus archivos de imágenes directamente en esa carpeta
  4. Verifica que los archivos estén ahí

Método 2: Desde la Terminal (Línea de Comandos)

Opción A: Copiar archivos existentes

# Navegar a la carpeta del proyecto
cd /home/planetazuzu/guia-tes

# Copiar archivo desde otra ubicación
cp /ruta/a/tu/imagen.png <!-- PLACEHOLDER: No requiere creación --> public/assets/infografias/bloque-0-fundamentos/ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png

# O si ya estás en la carpeta de destino
cd public/assets/infografias/bloque-0-fundamentos/
cp /ruta/a/tu/imagen.png ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png

Opción B: Mover archivos

# Mover archivo desde otra ubicación
mv /ruta/a/tu/imagen.png public/assets/infografias/bloque-0-fundamentos/ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png

Opción C: Múltiples archivos a la vez

# Copiar múltiples archivos
cp /ruta/origen/*.png public/assets/infografias/bloque-0-fundamentos/

# O archivos específicos
cp /ruta/origen/ABCDE_*.png public/assets/infografias/bloque-0-fundamentos/

Método 3: Desde VS Code / Cursor (IDE)

  1. Abre VS Code/Cursor en el proyecto
  2. Navega a la carpeta en el explorador lateral: 
    public → assets → infografias → bloque-0-fundamentos
  3. Clic derecho en la carpeta bloque-0-fundamentos
  4. Selecciona "Reveal in File Explorer" o "Abrir en explorador"
  5. Arrastra y suelta tus archivos en esa carpeta
  6. Actualiza el explorador de archivos en VS Code (F5)

Método 4: Usando SCP (Desde otro equipo)

Si tienes los archivos en otro equipo:

# Desde el equipo remoto
scp /ruta/local/imagen.png usuario@servidor:/home/planetazuzu/guia-tes/public/assets/infografias/bloque-0-fundamentos/

📝 Nombres de Archivos Recomendados

Para Sección 2 de ABCDE:

  1. Diagrama 1:

    ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png

    o

    ABCDE_PIRAMIDE_PRIORIDAD_VITAL.svg

  2. Diagrama 2:

    ABCDE_COMPARACION_DESORDEN_VS_ESTRUCTURA.png

    o

    ABCDE_COMPARACION_DESORDEN_VS_ESTRUCTURA.svg

  3. Diagrama 3:

    ABCDE_FLUJO_DETERIORO_FISIOLOGICO.png

    o

    ABCDE_FLUJO_DETERIORO_FISIOLOGICO.svg

Convenciones de Nombres:

  • ✅ Usar mayúsculas para claridad
  • ✅ Usar guiones bajos en lugar de espacios
  • ✅ Incluir prefijo descriptivo (ABCDE_)
  • ✅ Incluir descripción clara del contenido
  • ✅ Usar extensión apropiada .png, .svg, .jpg)

✅ Verificación

Verificar que los archivos se subieron correctamente:

# Listar archivos en la carpeta
ls -lh public/assets/infografias/bloque-0-fundamentos/

# Verificar archivos específicos
ls -lh public/assets/infografias/bloque-0-fundamentos/ABCDE_*.png

Verificar permisos:

# Los archivos deben tener permisos de lectura
chmod 644 public/assets/infografias/bloque-0-fundamentos/*.png

🔗 Integración en Markdown

Una vez subidos los archivos, actualiza docs/consolidado/SECCION_02_ABCDE_OPERATIVO.md:

Ejemplo de integración:

## Bloque 2: Visual Explicativo

### Diagrama 1: Pirámide de Prioridad Vital

![Pirámide de Prioridad Vital ABCDE]/assets/infografias/bloque-0-fundamentos/ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png)

**Descripción:** Esta pirámide muestra la jerarquía de prioridad vital del ABCDE...

---

### Diagrama 2: Comparación — Evaluación Desordenada vs Estructurada

![Comparación: Evaluación Desordenada vs Estructurada ABCDE]/assets/infografias/bloque-0-fundamentos/ABCDE_COMPARACION_DESORDEN_VS_ESTRUCTURA.png)

**Descripción:** Este diagrama compara...

---

### Diagrama 3: Flujo de Deterioro Fisiológico

![Flujo de Deterioro Fisiológico ABCDE]/assets/infografias/bloque-0-fundamentos/ABCDE_FLUJO_DETERIORO_FISIOLOGICO.png)

**Descripción:** Este diagrama muestra...

👀 Ver los Archivos en la App

1. Iniciar servidor de desarrollo:

npm run dev

2. Verificar que los archivos son accesibles:

Abre en el navegador:

http://localhost:5173/assets/infografias/bloque-0-fundamentos/ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png

3. Ver en la Sección 2 de la guía:

Navega a:

http://localhost:5173/guias/abcde-operativo/2

🐛 Solución de Problemas

Problema: Los archivos no aparecen

Solución 1: Verificar la ruta

# Verificar que la carpeta existe
ls -la public/assets/infografias/bloque-0-fundamentos/

Solución 2: Verificar permisos

# Dar permisos de lectura
chmod 644 public/assets/infografias/bloque-0-fundamentos/*.png

Solución 3: Reiniciar servidor

# Detener servidor (Ctrl+C)
# Reiniciar
npm run dev

Problema: Las imágenes no se muestran en Markdown

Solución 1: Verificar la ruta en Markdown

  • La ruta debe empezar con /assets/...
  • No debe incluir public/ en la ruta

Solución 2: Verificar la extensión

  • Asegúrate de que la extensión en Markdown coincida con el archivo real
  • .png vs .PNG puede causar problemas en algunos sistemas

Solución 3: Limpiar caché del navegador

  • Ctrl+Shift+R (Chrome/Firefox)
  • O modo incógnito

📊 Checklist de Subida

  • Archivos creados según especificaciones
  • Nombres de archivos correctos (mayúsculas, guiones bajos)
  • Archivos copiados a public/assets/infografias/bloque-0-fundamentos/
  • Permisos correctos (lectura para todos)
  • Archivos verificados con ls
  • Markdown actualizado con referencias a imágenes
  • Servidor reiniciado
  • Imágenes visibles en navegador
  • Imágenes visibles en la Sección 2 de la guía

💡 Tips

  1. Formato recomendado: PNG para imágenes complejas, SVG para diagramas simples
  2. Tamaño de archivo: Optimiza imágenes grandes (< 2MB recomendado)
  3. Resolución: Mínimo 1200px de ancho para buena calidad
  4. Nombres descriptivos: Facilita el mantenimiento futuro
  5. Backup: Guarda una copia de los archivos originales

🚀 Comando Rápido de Verificación

# Ver todos los archivos ABCDE en la carpeta
ls -lh public/assets/infografias/bloque-0-fundamentos/ABCDE_*

# Verificar que existen los 3 diagramas
ls -lh public/assets/infografias/bloque-0-fundamentos/ABCDE_PIRAMIDE*.png \
        public/assets/infografias/bloque-0-fundamentos/ABCDE_COMPARACION*.png \
        public/assets/infografias/bloque-0-fundamentos/ABCDE_FLUJO*.png

¡Listo para subir tus medios visuales! 📤