# 📤 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 ```bash # Navegar a la carpeta del proyecto cd /home/planetazuzu/guia-tes # Copiar archivo desde otra ubicación cp /ruta/a/tu/imagen.png 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 ```bash # 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 ```bash # 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: ```bash # 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: ```bash # 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: ```bash # 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: ```markdown ## 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: ```bash 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 ```bash # Verificar que la carpeta existe ls -la public/assets/infografias/bloque-0-fundamentos/ ``` **Solución 2:** Verificar permisos ```bash # Dar permisos de lectura chmod 644 public/assets/infografias/bloque-0-fundamentos/*.png ``` **Solución 3:** Reiniciar servidor ```bash # 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 ```bash # 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!** 📤