codigo0/docs/guia-refuerzo-modelo.md
planetazuzu a26963654f Implementación completa: Guías de Refuerzo (Modo Formativo)
- 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
2025-12-27 19:29:00 +01:00

22 KiB
Raw Blame History

📚 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:

  1. Pasos numerados de protocolos

    • Razón: Son sagrados en operativo, fuente única de verdad
    • Alternativa: Enlazar al protocolo operativo, comentar visualmente
  2. Dosis exactas de fármacos

    • Razón: Valores críticos que no deben duplicarse
    • Alternativa: Explicar mecanismo, enlazar a vademécum operativo
  3. Contraindicaciones exactas

    • Razón: Información crítica de seguridad
    • Alternativa: Explicar por qué son contraindicaciones, enlazar a operativo
  4. Advertencias críticas operativas

    • Razón: Prevención de errores en tiempo real
    • Alternativa: Profundizar en errores frecuentes con casos visuales
  5. 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:

  1. Títulos y nombres

    • Protocolo: "RCP Adulto SVB"
    • Fármaco: "Adrenalina"
    • Razón: Identificación común, no valores críticos
  2. Categorías y clasificaciones

    • Prioridad: "Crítico"
    • Categoría: "Soporte Vital"
    • Razón: Metadatos de organización, no información operativa
  3. Relaciones entre entidades

    • "Este protocolo usa este fármaco"
    • "Protocolos relacionados"
    • Razón: Navegación y contexto, no valores críticos
  4. 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:

  1. 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
  2. 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:

  1. Header/Breadcrumb:

    • Operativo: "Protocolo RCP" | Badge "Operativo"
    • Refuerzo: "Guía de Refuerzo: RCP" | Badge "Formación"
  2. Colores/Temas:

    • Operativo: Colores de acción (rojo/naranja para crítico)
    • Refuerzo: Colores de aprendizaje (azul/verde para formación)
  3. 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:

  1. Nunca mostrar ambos modos simultáneamente

    • No mostrar pasos operativos dentro de guía de refuerzo
    • No mostrar explicaciones extensas dentro de protocolo operativo
  2. Transiciones claras

    • Al cambiar de modo, indicar claramente el cambio
    • Mostrar breadcrumb actualizado
    • Resaltar visualmente el nuevo contexto
  3. 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:

  1. Debe tener enlace a contenido operativo relacionado

    • No puede existir sin relación con operativo
  2. No debe duplicar pasos operativos

    • Puede comentarlos, visualizarlos, explicarlos
    • No puede listarlos como pasos numerados
  3. Debe tener al menos una sección de medios visuales

    • Al menos una imagen, infografía o vídeo
    • Diferencia clave con contenido operativo
  4. Debe tener sección de resumen visual

    • Siempre presente como cierre
    • Proporciona síntesis y enlace a operativo
  5. 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:

  1. Nunca duplicar información operativa crítica
  2. Siempre enlazar al protocolo operativo relacionado
  3. Usar medios visuales como diferencia clave
  4. Seguir estructura de 8 secciones estándar
  5. 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.