- Arquitectura paralela para Guías de Refuerzo - Nuevos componentes: GuideCard, GuideHeader, GuideNavigation, etc. - Vistas formativas: GuideIndex, GuideViewer, GuideSectionViewer - Layout específico GuideLayout (sin BottomNav) - Índice de guías con ABCDE Operativo y RCP Adulto SVB - Corrección de Service Worker para desarrollo - Enlaces de navegación en menú y página principal - Documentación completa de implementación
22 KiB
📚 Modelo Oficial - Guía de Refuerzo
Fecha de creación: 2025-12-23
Versión: 1.0
Estado: Contrato Conceptual Oficial
Propósito: Definir esquema, estructura y reglas de la Guía de Refuerzo
🎯 Propósito del Documento
Este documento es el contrato conceptual oficial del sistema de Guías de Refuerzo. Define:
- ✅ Qué es una Guía de Refuerzo
- ✅ Cómo se estructura (secciones estándar)
- ✅ Qué bloques de contenido puede usar
- ✅ Cómo convive con el contenido operativo
- ✅ Reglas de diseño que deben seguirse
Uso:
- No improvisar al crear guías
- No contaminar Markdown con contenido operativo
- Tener criterio claro cuando haya dudas
- Mantener coherencia entre guías
1️⃣ Esquema de Secciones Estándar
Toda Guía de Refuerzo sigue esta estructura de 8 secciones:
Sección 1: Introducción
Propósito: Establecer contexto y expectativas
Contenido obligatorio:
- Título y subtítulo descriptivo
- Contexto clínico del tema
- Objetivos de aprendizaje (qué aprenderás)
- Tiempo estimado de lectura/visualización
- Prerrequisitos (qué debes saber antes)
- Enlace al protocolo operativo relacionado (obligatorio)
Formato: Texto narrativo corto (2-3 párrafos)
Bloques permitidos:
- Texto Explicativo
Cuándo se usa: Siempre presente, primera sección
Sección 2: Explicación Clínica
Propósito: Proporcionar base científica y comprensión profunda
Contenido:
- Fisiopatología del proceso
- Mecanismos de acción (si aplica)
- Conceptos científicos clave
- Relaciones causa-efecto
- Contexto clínico amplio
Formato: Texto narrativo con diagramas embebidos
Bloques permitidos:
- Texto Explicativo
- Imagen Estática
- Diagrama de Flujo
- Tabla de Referencia
Cuándo se usa: Para temas que requieren comprensión científica
Relación con operativo: Explica el "por qué" de los pasos operativos
Sección 3: Algoritmo Comentado
Propósito: Visualizar el protocolo operativo con explicaciones
Contenido:
- Diagrama de flujo del protocolo
- Comentarios explicativos en cada paso
- Decisiones y ramificaciones visualizadas
- Enlace directo al protocolo operativo (obligatorio)
- Variaciones según contexto (adulto/pediátrico)
Formato: Infografía interactiva o diagrama estático con anotaciones
Bloques permitidos:
- Infografía
- Diagrama de Flujo
- Texto Explicativo (comentarios)
Cuándo se usa: Para protocolos complejos con múltiples decisiones
Relación con operativo: Visualiza y explica los pasos operativos sin duplicarlos
Sección 4: Medios Visuales
Propósito: Aprender mediante visualización
Contenido:
- Infografías paso a paso de técnicas
- Vídeos de demostración (si aplica)
- Diagramas anatómicos
- Secuencias fotográficas
- Animaciones de procesos
Formato: Galería de medios con descripciones
Bloques permitidos:
- Galería de Imágenes
- Vídeo
- Imagen Estática
- Infografía
Cuándo se usa: Para técnicas que requieren visualización (inmovilización, uso de equipamiento)
Relación con operativo: Muestra visualmente cómo ejecutar los pasos operativos
Sección 5: Errores Frecuentes
Propósito: Prevenir errores mediante aprendizaje visual
Contenido:
- Errores comunes identificados
- Visualización del error (imagen/vídeo)
- Visualización de la forma correcta
- Consecuencias del error
- Cómo evitarlo
Formato: Comparación lado a lado (incorrecto vs correcto)
Bloques permitidos:
- Comparación Visual
- Caja de Advertencia
- Texto Explicativo
- Imagen Estática
Cuándo se usa: Para procedimientos donde los errores son frecuentes o críticos
Relación con operativo: Profundiza en los "Puntos críticos TES" del contenido operativo
Sección 6: Casos Clínicos
Propósito: Aprender mediante ejemplos prácticos
Contenido:
- Caso clínico completo (real o simulado)
- Presentación del caso
- Análisis paso a paso
- Aplicación del protocolo
- Puntos de aprendizaje
- Variaciones del caso
Formato: Narrativa estructurada con imágenes/vídeos
Bloques permitidos:
- Caso Clínico
- Imagen Estática
- Vídeo (opcional)
- Texto Explicativo
Cuándo se usa: Para protocolos complejos o situaciones poco frecuentes
Relación con operativo: Muestra aplicación práctica del protocolo operativo
Sección 7: Resumen Visual
Propósito: Síntesis rápida y referencia visual
Contenido:
- Infografía resumen del tema completo
- Puntos clave destacados visualmente
- Enlace rápido al protocolo operativo (obligatorio)
- Checklist visual de pasos críticos
Formato: Infografía única de una página
Bloques permitidos:
- Resumen Visual
- Infografía
Cuándo se usa: Siempre presente como cierre
Relación con operativo: Proporciona puente visual hacia el protocolo operativo
Sección 8: Referencias
Propósito: Fuentes y recursos adicionales
Contenido:
- Guías oficiales citadas (ERC, AHA, SEMES)
- Bibliografía científica
- Enlaces a protocolos relacionados
- Recursos adicionales de formación
Formato: Lista estructurada con enlaces
Bloques permitidos:
- Lista Estructurada
Cuándo se usa: Siempre presente
Relación con operativo: Proporciona contexto y validación del contenido operativo
2️⃣ Tipos de Bloques de Contenido
Bloque 1: Texto Explicativo
Propósito: Proporcionar información narrativa y contextual
Características:
- Texto estructurado en párrafos
- Longitud variable (1-5 párrafos típicamente)
- Puede incluir formato (negrita, cursiva, listas)
- Soporta enlaces internos y externos
Cuándo usarlo:
- Introducciones y contexto
- Explicaciones científicas
- Descripciones de conceptos
- Narrativas de casos clínicos
Relación con operativo:
- Explica el "por qué" de los pasos operativos
- Proporciona contexto que no está en operativo
- Nunca duplica pasos operativos
Bloque 2: Imagen Estática
Propósito: Mostrar fotografías, diagramas o ilustraciones
Características:
- Imagen única con descripción
- Caption opcional
- Alt text para accesibilidad
- Puede tener zoom o lightbox
Cuándo usarlo:
- Fotografías de técnicas
- Diagramas anatómicos
- Ilustraciones de conceptos
- Capturas de equipamiento
Relación con operativo:
- Muestra visualmente lo que los pasos operativos describen
- Complementa información operativa sin duplicarla
Bloque 3: Infografía
Propósito: Visualizar información compleja de forma sintética
Características:
- Combinación de texto, iconos, diagramas
- Diseño visual estructurado
- Información densa pero escaneable
- Puede ser interactiva
Cuándo usarlo:
- Algoritmos visuales
- Flujos de decisión
- Comparaciones lado a lado
- Resúmenes visuales
Relación con operativo:
- Visualiza protocolos operativos sin duplicar pasos
- Hace comprensible información compleja
Bloque 4: Vídeo
Propósito: Demostrar técnicas o procesos en movimiento
Características:
- Archivo de vídeo embebido
- Controles de reproducción
- Subtítulos opcionales
- Descripción textual alternativa
Cuándo usarlo:
- Técnicas que requieren movimiento
- Secuencias temporales
- Demostraciones prácticas
- Animaciones de procesos
Relación con operativo:
- Muestra ejecución de pasos operativos
- Complementa descripciones textuales
Bloque 5: Lista Estructurada
Propósito: Organizar información en formato de lista
Características:
- Lista numerada o con viñetas
- Items con formato consistente
- Puede tener sub-items
- Puede ser expandible/colapsable
Cuándo usarlo:
- Conceptos clave
- Características o propiedades
- Checklist de verificación
- Pasos explicativos (no operativos)
Relación con operativo:
- Organiza información complementaria
- Nunca duplica listas de pasos operativos
Bloque 6: Caja de Advertencia
Propósito: Destacar información crítica de seguridad
Características:
- Fondo de color distintivo (amarillo/naranja/rojo)
- Icono de alerta
- Texto destacado
- Borde visible
Cuándo usarlo:
- Advertencias de seguridad
- Errores críticos a evitar
- Información de riesgo
- Contraindicaciones importantes
Relación con operativo:
- Profundiza en advertencias operativas
- Proporciona contexto de por qué es importante
- Nunca contradice información operativa
Bloque 7: Caso Clínico
Propósito: Aprender mediante ejemplo práctico completo
Características:
- Estructura narrativa completa
- Presentación del caso
- Análisis paso a paso
- Aplicación de protocolo
- Puntos de aprendizaje
Cuándo usarlo:
- Situaciones complejas
- Aplicación práctica de protocolos
- Aprendizaje por casos
- Validación de comprensión
Relación con operativo:
- Muestra aplicación real del protocolo operativo
- Ilustra cómo se usan los pasos en contexto
Bloque 8: Comparación Visual
Propósito: Mostrar diferencias entre opciones o errores vs correcto
Características:
- Dos o más elementos lado a lado
- Etiquetas claras (correcto/incorrecto, antes/después)
- Diferencias destacadas visualmente
- Descripción de cada opción
Cuándo usarlo:
- Errores frecuentes vs forma correcta
- Comparación de técnicas
- Antes y después
- Opciones de tratamiento
Relación con operativo:
- Visualiza los "Puntos críticos TES" del contenido operativo
- Muestra qué NO hacer (complementa lo que SÍ hacer)
Bloque 9: Tabla de Referencia
Propósito: Organizar información tabular compleja
Características:
- Filas y columnas estructuradas
- Headers claros
- Datos organizados lógicamente
- Puede ser responsive
Cuándo usarlo:
- Valores de referencia
- Comparaciones sistemáticas
- Rangos y parámetros
- Clasificaciones
Relación con operativo:
- Proporciona contexto de valores mencionados en operativo
- Nunca duplica tablas operativas críticas
Bloque 10: Diagrama de Flujo
Propósito: Visualizar procesos de decisión y algoritmos
Características:
- Nodos y flechas
- Decisiones y acciones claras
- Flujo lógico visualizado
- Puede ser interactivo
Cuándo usarlo:
- Algoritmos de decisión
- Flujos de protocolo
- Árboles de decisión
- Procesos complejos
Relación con operativo:
- Visualiza la lógica detrás de los pasos operativos
- Muestra ramificaciones y decisiones
Bloque 11: Galería de Imágenes
Propósito: Mostrar secuencia de imágenes relacionadas
Características:
- Múltiples imágenes en secuencia
- Navegación entre imágenes
- Descripción por imagen
- Vista previa en miniatura
Cuándo usarlo:
- Secuencias paso a paso de técnicas
- Múltiples ángulos de vista
- Progresión temporal
- Variaciones de un procedimiento
Relación con operativo:
- Muestra visualmente la secuencia de pasos operativos
- Proporciona múltiples perspectivas
Bloque 12: Resumen Visual
Propósito: Síntesis visual de toda la guía
Características:
- Infografía única de una página
- Puntos clave destacados
- Diseño escaneable rápidamente
- Enlace al protocolo operativo
Cuándo usarlo:
- Cierre de guía
- Referencia rápida posterior
- Resumen de aprendizaje
Relación con operativo:
- Proporciona puente visual hacia protocolo operativo
- Síntesis de lo aprendido
3️⃣ Reglas de Convivencia con el Modo Operativo
Regla 1: Separación Clara de Propósitos
Operativo = Acción | Refuerzo = Comprensión
- Operativo: Información para ejecutar AHORA
- Refuerzo: Información para entender y aprender
Implementación:
- Navegación separada pero relacionada
- Enlaces bidireccionales claros
- Indicadores visuales de modo (operativo vs refuerzo)
Regla 2: Información que NUNCA Debe Ir a la Guía de Refuerzo
Lista de exclusión absoluta:
-
❌ Pasos numerados de protocolos
- Razón: Son sagrados en operativo, fuente única de verdad
- Alternativa: Enlazar al protocolo operativo, comentar visualmente
-
❌ Dosis exactas de fármacos
- Razón: Valores críticos que no deben duplicarse
- Alternativa: Explicar mecanismo, enlazar a vademécum operativo
-
❌ Contraindicaciones exactas
- Razón: Información crítica de seguridad
- Alternativa: Explicar por qué son contraindicaciones, enlazar a operativo
-
❌ Advertencias críticas operativas
- Razón: Prevención de errores en tiempo real
- Alternativa: Profundizar en errores frecuentes con casos visuales
-
❌ Valores numéricos críticos (profundidad compresiones, frecuencias)
- Razón: Valores precisos necesarios para ejecución
- Alternativa: Explicar por qué esos valores, enlazar a operativo
Principio: La información operativa es fuente única de verdad para valores y pasos críticos.
Regla 3: Información que Puede Aparecer en Ambos Modos
Lista de información compartida:
-
✅ Títulos y nombres
- Protocolo: "RCP Adulto SVB"
- Fármaco: "Adrenalina"
- Razón: Identificación común, no valores críticos
-
✅ Categorías y clasificaciones
- Prioridad: "Crítico"
- Categoría: "Soporte Vital"
- Razón: Metadatos de organización, no información operativa
-
✅ Relaciones entre entidades
- "Este protocolo usa este fármaco"
- "Protocolos relacionados"
- Razón: Navegación y contexto, no valores críticos
-
✅ Metadatos de navegación
- Enlaces relacionados
- Breadcrumbs
- Razón: Navegación, no contenido crítico
Principio: Solo metadatos y navegación pueden compartirse, nunca valores o pasos críticos.
Regla 4: Enlaces Operativo ↔ Refuerzo
Patrón de enlace:
[Contenido Operativo]
↓ "¿Quieres entender más?"
[Guía de Refuerzo]
[Guía de Refuerzo]
↓ "Ver protocolo operativo"
[Contenido Operativo]
Implementación:
-
Desde Operativo hacia Refuerzo:
- Botón discreto: "Guía de Refuerzo" o "Aprender más"
- Ubicación: Al final del contenido operativo
- Estilo: Secundario, no compite con información crítica
-
Desde Refuerzo hacia Operativo:
- Botón destacado: "Ver Protocolo Operativo" o "Ir a Acción Rápida"
- Ubicación: Múltiples puntos (introducción, resumen, referencias)
- Estilo: Primario, claro que lleva a acción
Principio: Los enlaces deben ser claros y bidireccionales, sin confundir al usuario sobre qué modo está usando.
Regla 5: Indicadores Visuales de Modo
Sistema de identificación:
-
Header/Breadcrumb:
- Operativo: "Protocolo RCP" | Badge "Operativo"
- Refuerzo: "Guía de Refuerzo: RCP" | Badge "Formación"
-
Colores/Temas:
- Operativo: Colores de acción (rojo/naranja para crítico)
- Refuerzo: Colores de aprendizaje (azul/verde para formación)
-
Iconografía:
- Operativo: Iconos de acción (play, check, alert)
- Refuerzo: Iconos de aprendizaje (book, lightbulb, video)
Principio: El usuario debe saber inmediatamente en qué modo está.
Regla 6: Prevención de Confusión
Estrategias:
-
Nunca mostrar ambos modos simultáneamente
- No mostrar pasos operativos dentro de guía de refuerzo
- No mostrar explicaciones extensas dentro de protocolo operativo
-
Transiciones claras
- Al cambiar de modo, indicar claramente el cambio
- Mostrar breadcrumb actualizado
- Resaltar visualmente el nuevo contexto
-
Mensajes contextuales
- En operativo: "Para acción inmediata"
- En refuerzo: "Para comprensión y formación"
Principio: El usuario nunca debe dudar sobre qué información usar en cada contexto.
4️⃣ Estructura Abstracta de una Guía de Refuerzo
Modelo Conceptual
GUÍA DE REFUERZO
│
├── METADATOS
│ ├── ID único
│ ├── Título
│ ├── Tema relacionado (protocolo/fármaco/herramienta)
│ ├── Nivel de dificultad
│ ├── Tiempo estimado
│ └── Enlace a contenido operativo relacionado (obligatorio)
│
├── SECCIÓN 1: INTRODUCCIÓN
│ ├── Bloque: Texto Explicativo
│ └── Contenido: Contexto, objetivos, prerrequisitos
│
├── SECCIÓN 2: EXPLICACIÓN CLÍNICA
│ ├── Bloque: Texto Explicativo
│ ├── Bloque: Imagen / Diagrama
│ └── Contenido: Base científica, fisiopatología
│
├── SECCIÓN 3: ALGORITMO COMENTADO
│ ├── Bloque: Diagrama de Flujo / Infografía
│ ├── Bloque: Texto Explicativo (comentarios)
│ └── Contenido: Visualización del protocolo con explicaciones
│
├── SECCIÓN 4: MEDIOS VISUALES
│ ├── Bloque: Galería de Imágenes
│ ├── Bloque: Vídeo (opcional)
│ └── Contenido: Técnicas visualizadas paso a paso
│
├── SECCIÓN 5: ERRORES FRECUENTES
│ ├── Bloque: Comparación Visual
│ ├── Bloque: Caja de Advertencia
│ └── Contenido: Errores comunes con visualización
│
├── SECCIÓN 6: CASOS CLÍNICOS
│ ├── Bloque: Caso Clínico
│ ├── Bloque: Imagen / Vídeo (opcional)
│ └── Contenido: Ejemplos prácticos completos
│
├── SECCIÓN 7: RESUMEN VISUAL
│ ├── Bloque: Resumen Visual / Infografía
│ └── Contenido: Síntesis de una página
│
└── SECCIÓN 8: REFERENCIAS
├── Bloque: Lista Estructurada
└── Contenido: Bibliografía y enlaces
5️⃣ Reglas de Validación
Validaciones que debe cumplir una Guía de Refuerzo:
-
✅ Debe tener enlace a contenido operativo relacionado
- No puede existir sin relación con operativo
-
✅ No debe duplicar pasos operativos
- Puede comentarlos, visualizarlos, explicarlos
- No puede listarlos como pasos numerados
-
✅ Debe tener al menos una sección de medios visuales
- Al menos una imagen, infografía o vídeo
- Diferencia clave con contenido operativo
-
✅ Debe tener sección de resumen visual
- Siempre presente como cierre
- Proporciona síntesis y enlace a operativo
-
✅ Debe tener tiempo estimado realista
- Basado en longitud de contenido
- Ayuda al usuario a decidir si tiene tiempo
6️⃣ Criterios de Decisión
¿Cuándo crear una Guía de Refuerzo?
Crear guía cuando:
- ✅ El protocolo es complejo y se beneficiaría de explicación visual
- ✅ Hay errores frecuentes que requieren visualización
- ✅ El tema requiere comprensión científica profunda
- ✅ Hay casos clínicos que ilustran el protocolo
- ✅ El contenido operativo existe y está completo
NO crear guía cuando:
- ❌ El protocolo operativo aún no existe
- ❌ El contenido es muy simple y no requiere explicación
- ❌ No hay medios visuales disponibles
- ❌ El protocolo es muy nuevo y puede cambiar
¿Qué información va a cada sección?
Introducción:
- Contexto general, objetivos, tiempo estimado
Explicación Clínica:
- Fisiopatología, mecanismos, ciencia detrás del protocolo
Algoritmo Comentado:
- Visualización del protocolo con comentarios explicativos
Medios Visuales:
- Técnicas paso a paso, demostraciones visuales
Errores Frecuentes:
- Errores comunes visualizados, comparaciones correcto/incorrecto
Casos Clínicos:
- Ejemplos prácticos completos con análisis
Resumen Visual:
- Síntesis de una página con puntos clave
Referencias:
- Guías oficiales, bibliografía, enlaces relacionados
7️⃣ Ejemplo de Uso del Modelo
Ejemplo: Guía de Refuerzo "RCP Adulto SVB"
Metadatos:
- ID:
refuerzo-rcp-adulto-svb - Título: "Guía de Refuerzo: RCP Adulto SVB"
- Relacionado con:
protocolo-rcp-adulto-svb - Nivel: Intermedio
- Tiempo: 15 minutos
Estructura:
Sección 1: Introducción
- Bloque Texto: "La reanimación cardiopulmonar (RCP) es el conjunto de maniobras destinadas a sustituir temporalmente la función del corazón y los pulmones..."
- Enlace: "Ver Protocolo Operativo RCP"
Sección 2: Explicación Clínica
- Bloque Texto: Explicación de fisiopatología de la PCR
- Bloque Imagen: Diagrama del sistema cardiovascular
- Bloque Texto: Explicación de por qué las compresiones salvan vidas
Sección 3: Algoritmo Comentado
- Bloque Infografía: Algoritmo RCP visual con comentarios en cada paso
- Bloque Texto: "Paso 1: Garantizar seguridad - Esto es crítico porque..."
- Enlace: "Ver pasos operativos completos"
Sección 4: Medios Visuales
- Bloque Galería: 6 imágenes de técnica de compresiones (posición manos, profundidad, frecuencia)
- Bloque Vídeo: Demostración de compresiones de calidad (30 segundos)
Sección 5: Errores Frecuentes
- Bloque Comparación Visual: Compresiones incorrectas vs correctas (lado a lado)
- Bloque Caja Advertencia: "Error común: No permitir descompresión completa"
- Bloque Texto: Explicación de consecuencias del error
Sección 6: Casos Clínicos
- Bloque Caso Clínico: "Caso: PCR en vía pública"
- Presentación: "Varón de 45 años encontrado inconsciente..."
- Análisis: Aplicación paso a paso del protocolo
- Puntos de aprendizaje: 3 puntos clave
Sección 7: Resumen Visual
- Bloque Resumen Visual: Infografía de una página con algoritmo completo y puntos clave
Sección 8: Referencias
- Bloque Lista: Guías ERC 2021, AHA 2020, enlaces relacionados
Conclusión
Este modelo es el contrato conceptual oficial para crear Guías de Refuerzo.
Principios fundamentales:
- ✅ Nunca duplicar información operativa crítica
- ✅ Siempre enlazar al protocolo operativo relacionado
- ✅ Usar medios visuales como diferencia clave
- ✅ Seguir estructura de 8 secciones estándar
- ✅ Mantener separación clara con contenido operativo
Uso del modelo:
- Consultar antes de crear cualquier guía
- Seguir estructura y reglas definidas
- No improvisar ni contaminar Markdown operativo
- Mantener coherencia entre todas las guías
Fin del Modelo Oficial
Este documento debe consultarse siempre que se cree o modifique una Guía de Refuerzo.