Manual Interactivo de Redacción Jurídica

Características Técnicas 📋 Especificaciones Generales Tipo de Archivo Formato: HTML5 autónomo (standalone) Extensión: .html Tamaño aproximado: ~95 KB Compatibilidad: Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) Requisitos: Ninguno - funciona offline sin dependencias externas 🎨 Tecnologías y Estándares Utilizados 1. HTML5 Estructura semántica moderna Etiquetas , , Atributos data-* para interactividad Soporte para Drag & Drop API nativo 2. CSS3 Avanzado Sistema de diseño basado en variables CSS (:root) Paleta de colores profesional inspirada en Perplexity: Tonos teal/turquesa (#21808D) Crema/neutros (#FCFCF9) Semánticos (success, error, info) Animaciones fluidas: @keyframes fadeIn @keyframes slideIn @keyframes shake @keyframes confetti-fall @keyframes pop-in/pop-out Responsive design: Media queries para móvil/tablet Grid/Flexbox layouts max-width: 1200px contenedor 3. JavaScript Vanilla (ES6+) Sin librerías externas (jQuery, Bootstrap, etc.) Programación orientada a eventos APIs Web nativas: DOM Manipulation Event Listeners Drag and Drop API Web Audio API (sintetizador de sonido) LocalStorage (potencial para guardar progreso) 🎯 Funcionalidades Implementadas A. Sistema de Navegación javascript - Navegación por pestañas (7 secciones) - Gestión de estados activos - Scroll automático al cambiar sección - Smooth scroll behavior B. Ejercicios Interactivos Tipo 1: Evaluación de Oraciones Botones de opción múltiple Retroalimentación contextual Validación por clases CSS (.correct, .incorrect) Tipo 2: Completar Espacios Inputs de texto validados Comparación case-insensitive Coincidencia parcial de respuestas Tipo 3: Puntuación Interactiva Selección de signos ortográficos Blanks clicables con estados visuales Validación lógica de reglas gramaticales Tipo 4: Drag & Drop Correlación de conceptos Eventos dragstart, dragover, drop Validación de emparejamientos Tipo 5: Redacción Libre Áreas de texto extensas Análisis de estructura (conteo de oraciones) Detección de palabras clave C. Sistema de Feedback css .feedback.success → Verde (#22C55E) .feedback.error → Rojo (#C0152F) .feedback.info → Azul teal (#32B8C6) Estados dinámicos: .show → Display block con animación Mensajes contextuales según tipo de error Sugerencias pedagógicas integradas D. Sistema de Celebración 🎉 Componentes: Confeti animado: 30 partículas por celebración 5 colores aleatorios (#FFD700, #FF6B9D, #4ECDC4, #95E1D3, #F38181) Rotación 3D durante caída Auto-destrucción tras 3 segundos Badge emergente: Mensajes motivacionales aleatorios Animación pop-in/pop-out Duración: 2 segundos Sonido de éxito: Sintetizador Web Audio API Secuencia de 3 frecuencias (523.25, 659.25, 783.99 Hz) Envelope ADSR profesional 📊 Arquitectura del Documento Estructura de Secciones text 📄 index.html ├── │ ├── Meta charset UTF-8 │ ├── Viewport responsive │ ├── (CSS embebido) │ └── Variables de diseño (:root) │ ├── │ ├── Navegación principal │ │ └── 7 botones de nivel │ │ │ └── │ ├── #inicio (Sección bienvenida) │ ├── #nivel1 (10 min - Fundamentos) │ ├── #nivel2 (20 min - Cohesión) │ ├── #nivel3 (30 min - Sintaxis) │ ├── #nivel4 (40 min - Ortografía) │ ├── #nivel5 (50 min - Refinamiento) │ └── #resumen (Conclusiones) │ └── JavaScript embebido ├── Navegación ├── Validaciones (15+ funciones) ├── Drag & Drop handlers └── Sistema de celebración 🎓 Contenido Pedagógico Nivel 1 (10 min): Fundamentos Estructura de párrafos (temática, desarrollo, cierre) Conectores básicos (4 categorías) Citación APA-Zenodo 4 ejercicios prácticos Nivel 2 (20 min): Cohesión Punto y coma (;) Dos puntos (:) Conectores intermedios Ejercicio de correlación drag & drop Nivel 3 (30 min): Sintaxis Oraciones subordinadas (sustantivas, adjetivas, adverbiales) Conectores avanzados (5 tipos) Simplificación de oraciones complejas Nivel 4 (40 min): Ortografía Comillas angulares/inglesas/simples Paréntesis vs. rayas Abreviaturas latinas (6 principales) Referencias APA completas (libros, artículos, Zenodo) Reglas de números y cifras Nivel 5 (50 min): Refinamiento Conectores finos (matices sutiles) Coherencia argumentativa en secciones Verbos declarativos diferenciados Integración de voz autoral Párrafos de transición 🔧 Funciones JavaScript Principales Función Propósito Parámetros checkAnswer() Valida estructura de párrafos button, correct, feedbackId checkConnector() Verifica conectores lógicos inputId, expectedValue, feedbackId checkDOI() Valida formato DOI inputId, expectedValue, feedbackId checkCita() Evalúa citas APA inputId, searchTerm, feedbackId selectPunctuation() Valida signos de puntuación button, punct, ...blanks checkSubordinada() Identifica oraciones subordinadas button, selected, feedbackId evaluateSimplification() Evalúa claridad de redacción textId, feedbackId checkAbrev() Verifica abreviaturas latinas inputId, expectedValue, feedbackId evaluateReference() Valida referencias bibliográficas textId, expectedValue, feedbackId checkConectorFino() Valida conectores avanzados conector, contextId evaluateVozPropia() Evalúa integración autoral textId, feedbackId evaluateTransition() Evalúa párrafos de transición textId, feedbackId celebrateCorrectAnswer() Sistema de celebración (ninguno) dragStart(), drop(), allowDrop() Manejo de drag & drop event 📈 Métricas del Sistema Ejercicios Totales: 25+ Nivel 1: 4 ejercicios Nivel 2: 3 ejercicios Nivel 3: 3 ejercicios Nivel 4: 4 ejercicios Nivel 5: 5 ejercicios Tablas de Referencia: 8 Conectores básicos Conectores intermedios Conectores avanzados Conectores finos Abreviaturas latinas Verbos declarativos Estructura del manual Duración por nivel Ejemplos Prácticos: 30+ Correctos (.example.correct) Incorrectos (.example.incorrect) Neutros (.example) 🎨 Sistema de Diseño Paleta de Colores css --color-primary: #21808D (Teal principal) --color-success: #22C55E (Verde éxito) --color-red-500: #C0152F (Rojo error) --color-cream-50: #FCFCF9 (Fondo) --color-slate-900: #13343B (Texto principal) Tipografía css Font Family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto Font Sizes: 12px - 24px (sistema modular) Font Weights: 400 (normal) - 600 (bold) Line Heights: 1.2 (tight) - 1.5 (normal) Espaciado css Sistema 4px: 4, 8, 12, 16, 20, 24, 32 Border Radius: 8px, 10px, 12px Shadows: sm (1px 3px), md (4px 6px) Animaciones css Duration: 150ms (fast), 250ms (normal) Easing: cubic-bezier(0.16, 1, 0.3, 1) 🚀 Ventajas Técnicas Portabilidad Total: Un solo archivo HTML Sin Dependencias: No requiere internet ni librerías Performance Óptimo: ~95KB, carga instantánea Accesibilidad: Navegación por teclado, contrast ratios WCAG AA Extensibilidad: Fácil agregar nuevos niveles/ejercicios Multilingüe: Preparado para internacionalización (lang="es") Mobile-First: Responsive desde 320px 📱 Compatibilidad Navegador Versión Mínima Estado Chrome 90+ ✅ Completo Firefox 88+ ✅ Completo Safari 14+ ✅ Completo Edge 90+ ✅ Completo Opera 76+ ✅ Completo Mobile Safari iOS 14+ ✅ Completo Chrome Android 90+ ✅ Completo 🔐 Seguridad y Privacidad ✅ Sin tracking ni analytics ✅ Sin cookies ✅ Sin conexión a servidores externos ✅ Sin recolección de datos personales ✅ 100% local y offline 📝 Uso Recomendado Descargar el archivo HTML Abrir con cualquier navegador moderno Practicar nivel por nivel (150 min totales) Guardar progreso manualmente (screenshots/notas) Repetir ejercicios para reforzar aprendizaje 🎯 Aplicaciones Prácticas ✍️ Capacitación de estudiantes de derecho 📚 Talleres de redacción académica 🏫 Material didáctico para universidades 💻 Autoaprendizaje asíncrono 👨‍🏫 Complemento para cursos de metodología