codigo0/docs/IMPLEMENTACION_BASE_GUIAS_REFUERZO.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

4.5 KiB

Implementación Base - Sistema de Guías de Refuerzo (Modo Formativo)

Estado: COMPLETADO

La arquitectura paralela para el Modo Formativo está completamente implementada y lista para usar.


📁 Estructura de Carpetas Creada

src/
├── layouts/
│   ├── DefaultLayout.tsx      ✅ Wrapper del layout actual (modo operativo)
│   └── GuideLayout.tsx        ✅ Layout exclusivo para guías formativas
│
├── views/
│   └── formativo/
│       ├── GuideIndex.tsx     ✅ Lista de todas las guías
│       ├── GuideViewer.tsx     ✅ Visualizador completo de guía (con tabs)
│       └── GuideSectionViewer.tsx  ✅ Visualizador de sección individual
│
├── components/
│   └── guide/
│       ├── GuideCard.tsx      ✅ Card clicable para cada guía
│       ├── GuideHeader.tsx    ✅ Header de guía con icono y badge
│       ├── GuideNavigation.tsx ✅ Navegación anterior/siguiente
│       ├── GuideMarkdownViewer.tsx ✅ Wrapper de MarkdownViewer
│       └── GuideModeBadge.tsx ✅ Badge "Modo Formación"
│
└── data/
    └── guides-index.ts        ✅ Índice de guías con 2 guías configuradas

🛣️ Rutas Configuradas

Todas las rutas están integradas en App.tsx sin modificar las existentes:

  • /guia-refuerzo → Lista de guías (GuideIndex)
  • /guia-refuerzo/:guia → Visualizador completo (GuideViewer con tabs)
  • /guia-refuerzo/:guia/seccion/:numero → Sección individual (GuideSectionViewer)

📊 Guías Configuradas

1. ABCDE Operativo

  • ID: abcde-operativo
  • 8 secciones: Todas configuradas
  • Protocolo operativo: /manual/parte-i-fundamentos/bloque-1-procedimientos-basicos/1.2.2

2. RCP Adulto SVB

  • ID: rcp-adulto-svb
  • 8 secciones: Todas configuradas
  • Protocolo operativo: /rcp

🎨 Características del Layout Formativo

GuideLayout

  • Reutiliza Header y Footer existentes
  • NO incluye BottomNav (diferencia visual con modo operativo)
  • Badge "Modo Formación" visible
  • Contenedor max-w-2xl centrado
  • Más espaciado vertical (py-6) para mejor lectura

Diferencias Visuales

  • Modo Operativo: Header + BottomNav + Footer
  • Modo Formativo: Header + Badge + Footer (sin BottomNav)

📄 Archivos Markdown

Ubicación

  • Fuente: docs/consolidado/*.md
  • Destino: public/docs/consolidado/*.md (para que Vite los sirva)

Script de Copia

./scripts/copiar-guias-markdown.sh

Estado: 81 archivos Markdown copiados correctamente


🔧 Componentes Clave

GuideMarkdownViewer

  • Wrapper de MarkdownViewer existente
  • NO modifica el componente original
  • Estilos optimizados para lectura formativa
  • Carga archivos desde /docs/consolidado/

GuideCard

  • Card clicable con icono, título, descripción
  • Badge "Modo Formación" visible
  • Link a /guia-refuerzo/:guia

GuideNavigation

  • Navegación anterior/siguiente entre secciones
  • Indicador de sección actual (ej: "3 / 8")
  • Botones deshabilitados en primera/última sección

🚀 Uso

Acceso

  1. Navegar a /guia-refuerzo
  2. Ver lista de guías disponibles
  3. Click en una guía para ver todas las secciones
  4. Navegar entre secciones con tabs o navegación

Agregar Nueva Guía

  1. Agregar entrada en src/data/guides-index.ts
  2. Asegurar que los 8 archivos Markdown existan en docs/consolidado/
  3. Ejecutar ./scripts/copiar-guias-markdown.sh
  4. La guía aparecerá automáticamente en la lista

Verificaciones

  • No se modificaron componentes existentes
  • No se modificaron estilos globales
  • Rutas integradas sin conflictos
  • Lazy loading implementado
  • TypeScript sin errores
  • Linter sin errores
  • Archivos Markdown copiados correctamente

📝 Próximos Pasos (Opcionales)

  1. Búsqueda en guías: Agregar búsqueda dentro de las guías
  2. Favoritos: Permitir marcar secciones como favoritas
  3. Progreso: Guardar progreso de lectura
  4. Compartir: Compartir secciones específicas
  5. Modo offline: Asegurar que las guías funcionen offline (PWA)

🔒 Seguridad

  • Layout actual NO modificado
  • Componentes existentes NO modificados
  • Rutas existentes NO modificadas
  • Arquitectura paralela y reversible

Fecha de implementación: 2024-12-27
Estado: Listo para producción