codigo0/docs/INSTRUCCIONES_SUBIR_MEDIOS_VISUALES.md

# 📤 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!** 📤