289 lines
7 KiB
Markdown
289 lines
7 KiB
Markdown
# 📤 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 <!-- 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
|
|
|
|
```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!** 📤
|
|
|