167 lines
6 KiB
Markdown
167 lines
6 KiB
Markdown
# ✅ Infografía ABCDE - Integrada
|
|
|
|
## 🎯 Objetivo
|
|
|
|
Integrar la infografía conceptual del ABCDE como estructura mental de priorización en la Sección 1 de la Guía de Refuerzo ABCDE.
|
|
|
|
---
|
|
|
|
## ✅ Implementado
|
|
|
|
### 1. Infografía SVG Creada
|
|
|
|
**Archivo:** `public/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg`
|
|
|
|
**Características:**
|
|
- ✅ Estructura vertical ordenada (A → B → C → D → E)
|
|
- ✅ Comparación lado a lado: evaluación desordenada vs estructurada
|
|
- ✅ Colores jerárquicos (rojo/naranja para A, amarillo para B/C, verde/azul para D/E)
|
|
- ✅ Iconografía conceptual para cada letra
|
|
- ✅ Badges distintivos: "Modo Formación / Refuerzo" y "Modo Operativo"
|
|
- ✅ Texto explicativo: "Lo que mata antes va primero"
|
|
- ✅ Advertencia sobre uso formativo vs operativo
|
|
- ✅ Contexto visual de emergencias prehospitalarias
|
|
|
|
### 2. Registro de Imagen
|
|
|
|
**Archivo:** `src/data/image-registry.ts`
|
|
|
|
Añadida entrada:
|
|
```typescript
|
|
'abcde-introduccion-estructura-mental': {
|
|
id: 'abcde-introduccion-estructura-mental',
|
|
path: '/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg',
|
|
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']
|
|
}
|
|
```
|
|
|
|
### 3. Integración en Sección 1
|
|
|
|
**Archivo:** `docs/consolidado/SECCION_01_ABCDE_OPERATIVO.md`
|
|
|
|
**Cambios:**
|
|
- ✅ Reemplazada descripción textual por imagen real
|
|
- ✅ Añadida imagen usando sintaxis Markdown estándar
|
|
- ✅ Descripción breve de la infografía
|
|
- ✅ Bloque 3: Enlace Operativo con:
|
|
- Advertencia destacada (fondo oscuro, borde azul)
|
|
- Mensaje contextual (fondo oscuro, borde verde)
|
|
- Botón primario destacado con enlace a `/escena?tab=abcde`
|
|
- Nota explicativa sobre el propósito del botón
|
|
|
|
---
|
|
|
|
## 📊 Estructura Visual
|
|
|
|
### Infografía
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ [Badge: Modo Formación / Refuerzo] │
|
|
├─────────────────────────────────────────┤
|
|
│ ABCDE: Estructura Mental de Priorización│
|
|
│ "Lo que mata antes va primero" │
|
|
├──────────────────┬──────────────────────┤
|
|
│ Sin Estructura │ Con Estructura │
|
|
│ (Desordenado) │ (ABCDE) │
|
|
│ │ │
|
|
│ [Elementos │ [A - Aire] │
|
|
│ caóticos] │ ↓ │
|
|
│ │ [B - Circulación] │
|
|
│ │ ↓ │
|
|
│ │ [C - Cerebro] │
|
|
│ │ ↓ │
|
|
│ │ [D - Exposición] │
|
|
│ │ ↓ │
|
|
│ │ [E - Evaluación] │
|
|
└──────────────────┴──────────────────────┘
|
|
│ Texto Explicativo │
|
|
│ Advertencia │
|
|
│ [Badge: Modo Operativo] │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### Bloque de Enlace Operativo
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ ⚠️ Advertencia Importante │
|
|
│ Esta guía es para formación... │
|
|
└─────────────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────────────┐
|
|
│ 📋 Mensaje Contextual │
|
|
│ Para acción inmediata... │
|
|
└─────────────────────────────────────────┘
|
|
|
|
[🔵 Ver Protocolo Operativo ABCDE →]
|
|
|
|
Nota explicativa...
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Estilo Visual
|
|
|
|
### Infografía
|
|
- **Fondo:** Oscuro (#1e293b) para modo TES
|
|
- **Colores jerárquicos:**
|
|
- A: Rojo/Naranja (gradiente)
|
|
- B: Amarillo (gradiente)
|
|
- C: Amarillo/Verde (gradiente)
|
|
- D: Verde/Azul (gradiente)
|
|
- E: Azul/Índigo (gradiente)
|
|
- **Tipografía:** Arial, tamaños jerárquicos
|
|
- **Iconografía:** Estilizada, no anatómica
|
|
|
|
### Botón de Enlace
|
|
- **Color:** Azul (#3b82f6) - modo formación
|
|
- **Tamaño:** Prominente pero no intrusivo
|
|
- **Estilo:** Bordes redondeados, sombra sutil
|
|
- **Icono:** Flecha indicando transición
|
|
|
|
---
|
|
|
|
## 🔗 Enlaces
|
|
|
|
### Protocolo Operativo ABCDE
|
|
- **Ruta:** `/escena?tab=abcde`
|
|
- **Ubicación:** Página Escena, tab ABCDE
|
|
- **Contenido:** Pasos exactos, técnicas específicas, escalas precisas
|
|
|
|
---
|
|
|
|
## ✅ Validación
|
|
|
|
### Checklist
|
|
- ✅ Infografía SVG creada y guardada
|
|
- ✅ Registro de imagen añadido
|
|
- ✅ Integración en Markdown completada
|
|
- ✅ Enlace al protocolo operativo funcional
|
|
- ✅ Advertencias y mensajes contextuales añadidos
|
|
- ✅ Estilo visual consistente con app
|
|
|
|
---
|
|
|
|
## 📚 Archivos Modificados
|
|
|
|
1. ✅ `public/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg` (nuevo)
|
|
2. ✅ `src/data/image-registry.ts` (modificado)
|
|
3. ✅ `docs/consolidado/SECCION_01_ABCDE_OPERATIVO.md` (modificado)
|
|
|
|
---
|
|
|
|
## 🚀 Próximos Pasos
|
|
|
|
1. **Probar en desarrollo** - Verificar que la infografía se muestra correctamente
|
|
2. **Verificar enlace** - Comprobar que el botón lleva al protocolo operativo
|
|
3. **Ajustes visuales** - Si es necesario, ajustar colores o tamaños
|
|
|
|
---
|
|
|
|
**Infografía ABCDE: INTEGRADA ✅**
|
|
|