Plan de clase completo para evaluación formativa en expresión artística

PROMPT MAESTRO DISEÑO Y PROGRAMACIÓN DE UN SISTEMA DIGITAL DE EVALUACIÓN EDUCATIVA ==================================================================== ACTÚA COMO: Un equipo multidisciplinario compuesto por: 1. Especialista en evaluación educativa. 2. Docente experto en evaluación formativa. 3. Especialista en diseño de instrumentos de evaluación. 4. Diseñador UX/UI especializado en aplicaciones educativas. 5. Desarrollador web experto en HTML5, CSS3 y JavaScript. 6. Especialista en accesibilidad digital. 7. Especialista en visualización de datos educativos. 8. Especialista en retroalimentación formativa. 9. Especialista en diseño responsivo. 10. Especialista en ética y uso responsable de inteligencia artificial. Tu tarea consiste en DISEÑAR Y PROGRAMAR una aplicación web educativa completa denominada: "SISTEMA DIGITAL DE EVALUACIÓN EDUCATIVA" La aplicación debe permitir diseñar, aplicar, procesar e interpretar instrumentos de evaluación educativa de manera digital. La finalidad NO es solamente calcular una nota. El sistema debe permitir: - Registrar información básica de una evaluación. - Aplicar diferentes instrumentos. - Registrar evidencias. - Calcular automáticamente resultados. - Identificar fortalezas. - Identificar necesidades de mejora. - Generar retroalimentación formativa. - Elaborar recomendaciones. - Crear un plan de mejora. - Guardar evaluaciones. - Consultar evaluaciones anteriores. - Generar reportes. - Imprimir o guardar resultados como PDF. ==================================================================== PRINCIPIO PEDAGÓGICO FUNDAMENTAL ==================================================================== La aplicación debe respetar la siguiente idea: "PRIMERO SE DISEÑA PEDAGÓGICAMENTE Y DESPUÉS SE PROGRAMA." La tecnología NO debe inventar los criterios pedagógicos. La aplicación debe utilizar los criterios, indicadores, niveles, ponderaciones y objetivos definidos por el usuario. El sistema debe funcionar como herramienta de apoyo a la evaluación, pero la decisión pedagógica final siempre corresponde al docente. ==================================================================== DATOS PEDAGÓGICOS DEL PROYECTO ==================================================================== Antes de programar, utiliza los siguientes datos. NOMBRE DEL SISTEMA: [SISTEMA DIGITAL DE EVALUACIÓN EDUCATIVA] INSTITUCIÓN: [ESCRIBIR NOMBRE DE LA INSTITUCIÓN] ASIGNATURA: [ESCRIBIR ASIGNATURA] NIVEL EDUCATIVO: [ESCRIBIR NIVEL] ACTIVIDAD A EVALUAR: [ESCRIBIR ACTIVIDAD] TEMA: [ESCRIBIR TEMA] OBJETIVO DE APRENDIZAJE: [ESCRIBIR OBJETIVO] EVIDENCIA ESPERADA: [ESCRIBIR EVIDENCIA] INSTRUMENTO PRINCIPAL: [RÚBRICA / LISTA DE COTEJO / ESCALA / AUTOEVALUACIÓN] CRITERIOS: [ESCRIBIR CRITERIOS] INDICADORES OBSERVABLES: [ESCRIBIR INDICADORES] NIVELES DE DESEMPEÑO: [ESCRIBIR NIVELES] PONDERACIONES: [ESCRIBIR PONDERACIONES] IMPORTANTE: Si algún dato pedagógico no está definido, NO inventes decisiones pedagógicas definitivas. En ese caso crea información de DEMOSTRACIÓN claramente identificada como editable. ==================================================================== TECNOLOGÍA ==================================================================== Desarrolla toda la aplicación utilizando exclusivamente: HTML5 CSS3 JavaScript Vanilla Debe funcionar SIN: - servidor; - PHP; - Python; - Node.js; - React; - Angular; - Vue; - bases de datos externas; - servicios externos obligatorios. NO utilizar frameworks. NO utilizar APIs externas. NO requerir instalación. Todo debe estar integrado en UN SOLO ARCHIVO: index.html El CSS deberá estar dentro de: <style> ... </style> El JavaScript deberá estar dentro de: <script> ... </script> El archivo debe poder guardarse como: index.html y ejecutarse directamente en: Google Chrome Microsoft Edge Mozilla Firefox ==================================================================== ARQUITECTURA GENERAL DEL SISTEMA ==================================================================== La aplicación debe estar organizada en los siguientes módulos: 1. INICIO 2. DATOS GENERALES 3. OBJETIVO Y EVIDENCIA 4. INSTRUMENTO 5. VALORACIÓN 6. PROCESAMIENTO 7. RESULTADOS 8. RETROALIMENTACIÓN 9. PLAN DE MEJORA 10. AUTOEVALUACIÓN 11. HISTORIAL 12. CONFIGURACIÓN 13. AYUDA La navegación debe realizarse mediante un menú lateral o superior. El usuario debe poder desplazarse fácilmente entre los módulos. ==================================================================== MÓDULO 1 INICIO ==================================================================== Crear una pantalla inicial profesional. Debe contener: Nombre de la aplicación. Subtítulo: "Evaluar para comprender, retroalimentar y mejorar." Mostrar tarjetas de acceso rápido a: - Nueva evaluación. - Instrumentos. - Historial. - Configuración. Agregar una breve explicación: "Este sistema permite aplicar instrumentos de evaluación educativa, procesar evidencias y generar retroalimentación formativa." Agregar un botón principal: "INICIAR NUEVA EVALUACIÓN" ==================================================================== MÓDULO 2 DATOS GENERALES ==================================================================== Crear un formulario que permita registrar: - Nombre o código del estudiante. - Curso. - Nivel educativo. - Asignatura. - Tema. - Actividad evaluada. - Fecha. - Nombre del evaluador. - Modalidad. - Número de evaluación. Agregar opción: Tipo de evaluación: - Diagnóstica. - Formativa. - Sumativa. - Autoevaluación. - Coevaluación. - Heteroevaluación. IMPORTANTE: No exigir datos personales sensibles. Agregar botón: "GUARDAR DATOS" Validar los campos obligatorios. ==================================================================== MÓDULO 3 OBJETIVO Y EVIDENCIA ==================================================================== Crear campos para: Objetivo de aprendizaje. Resultado de aprendizaje. Evidencia esperada. Competencia relacionada. Descripción de la actividad. Permitir editar toda la información. Mostrar una advertencia pedagógica: "Los criterios de evaluación deben estar alineados con el objetivo y la evidencia esperada." ==================================================================== MÓDULO 4 SELECCIÓN DEL INSTRUMENTO ==================================================================== Permitir seleccionar entre: 1. Rúbrica analítica. 2. Lista de cotejo. 3. Escala de valoración. 4. Autoevaluación. 5. Instrumento combinado. Representar cada opción mediante una tarjeta visual. Cuando el usuario seleccione un instrumento, mostrar automáticamente la interfaz correspondiente. ==================================================================== RÚBRICA ANALÍTICA ==================================================================== Crear un constructor dinámico de rúbricas. Debe permitir: - Agregar criterios. - Editar criterios. - Eliminar criterios. - Cambiar orden. - Asignar ponderaciones. - Crear indicadores. - Modificar descriptores. - Agregar observaciones. Crear inicialmente cuatro niveles: 4 = Excelente 3 = Satisfactorio 2 = En proceso 1 = Inicial Permitir editar nombres y valores. Cada nivel debe contener un descriptor. Ejemplo: CRITERIO: Dominio conceptual. EXCELENTE: Explica con precisión los conceptos y los relaciona con ejemplos pertinentes. SATISFACTORIO: Explica correctamente la mayoría de los conceptos. EN PROCESO: Explica parcialmente los conceptos y presenta algunas imprecisiones. INICIAL: Presenta dificultades para explicar los conceptos fundamentales. IMPORTANTE: Solo puede seleccionarse UN nivel por criterio. Mostrar claramente el nivel seleccionado. ==================================================================== PONDERACIONES ==================================================================== Cada criterio podrá tener una ponderación. Ejemplo: Dominio conceptual: 20 % Planificación: 15 % Metodología: 20 % Participación: 15 % Uso de TIC: 10 % Evaluación formativa: 10 % Retroalimentación: 10 % El sistema debe sumar automáticamente las ponderaciones. Si el resultado NO es igual a 100 %, mostrar: "ADVERTENCIA: Las ponderaciones deben sumar 100 %." No permitir calcular el resultado final hasta solucionar el problema. ==================================================================== LISTA DE COTEJO ==================================================================== Crear una lista de cotejo digital editable. Cada indicador debe contener: Texto del indicador. Opciones: Sí No Observaciones. Valores internos: Sí = 1 No = 0 Permitir: Agregar indicador. Editar indicador. Eliminar indicador. Cambiar orden. Calcular automáticamente: Número de indicadores cumplidos. Número de indicadores no cumplidos. Porcentaje de cumplimiento. Ejemplo: 8 indicadores cumplidos de 10. Resultado: 80 % ==================================================================== ESCALA DE VALORACIÓN ==================================================================== Crear una escala de valoración editable. Valores iniciales: 1 = Nunca 2 = Raramente 3 = A veces 4 = Frecuentemente 5 = Siempre Cada indicador debe poder editarse. Permitir modificar los niveles. Calcular: Puntaje total. Puntaje máximo. Promedio. Porcentaje. Nivel general. ==================================================================== AUTOEVALUACIÓN ==================================================================== Crear un módulo de reflexión personal. Debe contener: Valoración de 1 a 5 estrellas. Campos: ¿Qué considero que realicé adecuadamente? ¿Cuál fue mi principal fortaleza? ¿Qué dificultad encontré? ¿Qué aspecto debo mejorar? ¿Qué evidencia sustenta mi valoración? ¿Qué acción realizaré para mejorar? Agregar botón: "GUARDAR AUTOEVALUACIÓN" ==================================================================== REGLAS PARA LOS INDICADORES ==================================================================== Los indicadores deben ser: - Observables. - Específicos. - Claros. - Medibles. - Comprensibles. - Relacionados con el objetivo. - Preferentemente de una sola acción. EVITAR: "Comprende el tema." PREFERIR: "Explica con sus propias palabras la idea principal y presenta un ejemplo." EVITAR: "Tiene buena actitud." PREFERIR: "Escucha las intervenciones de sus compañeros sin interrumpir." EVITAR: "Investiga y expone correctamente." DIVIDIR EN: "Investiga información utilizando fuentes pertinentes." "Expone la información con claridad y orden." ==================================================================== MÓDULO DE VALORACIÓN ==================================================================== Crear una pantalla donde el evaluador pueda aplicar el instrumento. Debe mostrar: Datos del estudiante. Objetivo. Actividad. Criterios. Indicadores. Opciones de valoración. Campo de observaciones. La selección debe ser sencilla y visual. Agregar botón: "FINALIZAR VALORACIÓN" Antes de continuar validar que todos los criterios requeridos hayan sido evaluados. ==================================================================== MOTOR DE PROCESAMIENTO ==================================================================== Programar en JavaScript el motor de evaluación. Debe calcular: Puntaje obtenido. Puntaje máximo. Resultado ponderado. Porcentaje. Nivel de desempeño. Promedio. Número de criterios evaluados. Criterio con mejor desempeño. Criterio con menor desempeño. ==================================================================== RANGOS DE DESEMPEÑO ==================================================================== Configurar inicialmente: 90 % - 100 % = Excelente 80 % - 89 % = Muy satisfactorio 70 % - 79 % = Satisfactorio 60 % - 69 % = En proceso 0 % - 59 % = Requiere fortalecimiento Permitir modificar estos rangos desde Configuración. ==================================================================== IDENTIFICACIÓN DE FORTALEZAS ==================================================================== Analizar automáticamente los resultados. Identificar: - criterio con puntuación más alta; - criterios con desempeño alto; - indicadores plenamente alcanzados. Mostrar: "FORTALEZAS IDENTIFICADAS" Ejemplo: "Se evidencia desempeño destacado en dominio conceptual y organización de la información." ==================================================================== IDENTIFICACIÓN DE NECESIDADES DE MEJORA ==================================================================== Detectar automáticamente: - criterio con puntuación más baja; - indicadores no alcanzados; - criterios con desempeño inicial o en proceso. Mostrar: "PRIORIDADES DE MEJORA" Ejemplo: "La evaluación formativa presenta el resultado más bajo y requiere fortalecimiento." ==================================================================== RETROALIMENTACIÓN FORMATIVA ==================================================================== Crear un sistema automático de retroalimentación. Debe utilizar la estructura: 1. EVIDENCIA 2. FOCO 3. IMPACTO 4. ACCIÓN EVIDENCIA: ¿Qué ocurrió? Ejemplo: "La participación se concentró en tres estudiantes." FOCO: ¿Qué criterio necesita atención? Ejemplo: "La estrategia de participación involucró parcialmente al grupo." IMPACTO: ¿Cómo afecta al aprendizaje? Ejemplo: "Esto limita la posibilidad de comprobar la comprensión del grupo completo." ACCIÓN: ¿Qué puede hacerse para mejorar? Ejemplo: "Incorporar trabajo en parejas, preguntas abiertas y selección aleatoria de participantes." ==================================================================== REGLAS DE RETROALIMENTACIÓN ==================================================================== La retroalimentación debe: Reconocer al menos una fortaleza. Identificar una necesidad concreta. Explicar por qué ese aspecto es importante. Proponer una acción realizable. Evitar etiquetas personales. NO escribir: "Eres desorganizado." ESCRIBIR: "Durante la actividad no se comunicaron previamente los tiempos de trabajo." NO escribir: "No sabes enseñar." ESCRIBIR: "La estrategia utilizada generó pocas oportunidades de participación." Evitar mensajes vacíos: "Muy bien." "Excelente trabajo." "Debes mejorar." La retroalimentación debe estar relacionada directamente con las evidencias. ==================================================================== BANCO DE RETROALIMENTACIÓN ==================================================================== Crear internamente un banco de mensajes para cada criterio y nivel. Ejemplo: CRITERIO: Participación. NIVEL ALTO: "Se evidenció participación activa y distribución adecuada de oportunidades de intervención." NIVEL MEDIO: "La participación fue adecuada, aunque podría ampliarse hacia más integrantes del grupo." NIVEL BAJO: "La participación se concentró en pocos estudiantes." ACCIÓN: "Incorporar estrategias de participación aleatoria, trabajo en parejas o respuestas mediante herramientas digitales." Crear una estructura similar para todos los criterios. ==================================================================== PLAN DE MEJORA ==================================================================== Crear un módulo denominado: "PLAN PERSONAL DE MEJORA" Debe contener: Necesidad identificada. Objetivo de mejora. Acción concreta. Estrategia. Recursos necesarios. Responsable. Tiempo estimado. Indicador de mejora. Evidencia de cumplimiento. Estado: Pendiente En proceso Cumplido Permitir guardar el plan. ==================================================================== REPORTE FINAL ==================================================================== Crear una pantalla denominada: "REPORTE DE EVALUACIÓN" Debe mostrar: Nombre o código del estudiante. Asignatura. Actividad. Fecha. Objetivo de aprendizaje. Evidencia esperada. Instrumento aplicado. Resultado obtenido. Puntaje máximo. Porcentaje. Nivel de desempeño. Fortalezas. Necesidades de mejora. Retroalimentación. Acción recomendada. Plan de mejora. Autoevaluación, cuando corresponda. ==================================================================== REPRESENTACIÓN VISUAL ==================================================================== Agregar elementos visuales utilizando únicamente HTML, CSS y JavaScript. Incluir: Barras de progreso. Indicadores porcentuales. Tarjetas de desempeño. Medidores visuales. Resumen por criterios. NO utilizar librerías externas. ==================================================================== HISTORIAL ==================================================================== Utilizar: localStorage Guardar cada evaluación con: ID. Fecha. Estudiante. Curso. Asignatura. Actividad. Instrumento. Resultado. Porcentaje. Nivel. Principal fortaleza. Principal necesidad de mejora. Plan de mejora. Permitir: Ver evaluación. Editar observaciones. Eliminar evaluación. Limpiar historial. Antes de eliminar mostrar: "¿Está seguro de que desea eliminar esta evaluación?" ==================================================================== BÚSQUEDA EN HISTORIAL ==================================================================== Agregar buscador. Permitir filtrar por: Estudiante. Fecha. Asignatura. Actividad. Nivel de desempeño. ==================================================================== COMPARACIÓN DE RESULTADOS ==================================================================== Si existen varias evaluaciones del mismo estudiante, mostrar evolución. Ejemplo: Evaluación 1: 65 % Evaluación 2: 74 % Evaluación 3: 86 % Mostrar mensaje: "Se observa una tendencia de mejora." Agregar barra visual de progreso histórico. ==================================================================== EXPORTACIÓN ==================================================================== Agregar botón: "IMPRIMIR / GUARDAR PDF" Utilizar: window.print() Crear CSS especial para impresión. Al imprimir ocultar: Menú. Botones. Campos de edición. Mostrar únicamente: Encabezado. Datos generales. Objetivo. Instrumento. Resultados. Fortalezas. Necesidades. Retroalimentación. Plan de mejora. Fecha. ==================================================================== CONFIGURACIÓN ==================================================================== Crear módulo de configuración. Permitir modificar: Nombre de la institución. Nombre del sistema. Escala de calificación. Rangos de desempeño. Nombre de niveles. Ponderaciones. Criterios. Indicadores. Mensajes de retroalimentación. Guardar configuración utilizando localStorage. ==================================================================== VALIDACIONES ==================================================================== Validar: Campos obligatorios. Criterios sin valorar. Ponderaciones incorrectas. Datos incompletos. Valores fuera de rango. Instrumentos sin indicadores. Antes de calcular mostrar alertas claras. Ejemplo: "Debe valorar todos los criterios antes de continuar." ==================================================================== EXPERIENCIA DE USUARIO ==================================================================== Agregar botones visibles: NUEVA EVALUACIÓN GUARDAR CALCULAR RESULTADO GENERAR RETROALIMENTACIÓN GUARDAR EVALUACIÓN VER HISTORIAL IMPRIMIR REPORTE LIMPIAR FORMULARIO EDITAR INSTRUMENTO AGREGAR CRITERIO AGREGAR INDICADOR Agregar mensajes de confirmación. Ejemplo: "Evaluación guardada correctamente." ==================================================================== DISEÑO VISUAL ==================================================================== Crear diseño académico moderno. Utilizar: Tarjetas. Paneles. Sombras suaves. Bordes redondeados. Espaciado consistente. Iconos simples generados mediante caracteres Unicode cuando sea posible. Evitar diseños excesivamente recargados. La interfaz debe transmitir: Claridad. Orden. Profesionalismo. Tecnología educativa. ==================================================================== RESPONSIVE ==================================================================== El sistema debe funcionar correctamente en: Computador. Tablet. Celular. En pantallas pequeñas: Las tablas deben desplazarse horizontalmente o transformarse en tarjetas. Los botones deben mantenerse visibles. Los campos deben ocupar el ancho disponible. ==================================================================== ACCESIBILIDAD ==================================================================== Aplicar: HTML semántico. Labels asociados a formularios. Navegación mediante teclado. Contraste adecuado. Texto legible. Botones claramente identificados. Mensajes de error comprensibles. Atributos aria cuando sean pertinentes. ==================================================================== PRIVACIDAD ==================================================================== Mostrar aviso: "Este prototipo educativo está diseñado para trabajar con información académica no sensible. Evite ingresar datos personales sensibles." No solicitar: Cédulas. Direcciones. Datos médicos. Contraseñas. Información familiar sensible. ==================================================================== TRANSPARENCIA ==================================================================== Mostrar claramente: Qué criterios se utilizan. Qué ponderación tiene cada criterio. Cómo se calcula el resultado. Qué rangos determinan cada nivel. Cómo se generan las recomendaciones. Agregar texto: "El resultado generado constituye una evidencia de apoyo para la evaluación. La decisión pedagógica final corresponde al docente." ==================================================================== ÉTICA E INTELIGENCIA ARTIFICIAL ==================================================================== La inteligencia artificial debe considerarse: ASISTENTE, NO SUSTITUTO. La aplicación NO debe tomar decisiones automáticas definitivas sobre: Aprobación. Reprobación. Promoción. Sanciones. Diagnósticos personales. La IA puede apoyar: Programación. Organización. Generación de borradores. Explicación del código. Pero los criterios y decisiones pedagógicas pertenecen al docente. ==================================================================== FUNCIONAMIENTO OFFLINE ==================================================================== La aplicación debe funcionar completamente sin conexión a Internet después de guardar el archivo. NO utilizar APIs externas. NO enviar información a servidores. Todo el procesamiento debe realizarse localmente mediante JavaScript. ==================================================================== DATOS DE DEMOSTRACIÓN ==================================================================== Incluir una opción: "CARGAR EJEMPLO" Utilizar datos ficticios. Ejemplo: Estudiante: Estudiante A Asignatura: Evaluación Educativa Actividad: Clase demostrativa Tema: Evaluación formativa Objetivo: "Aplicar estrategias de evaluación formativa durante una clase demostrativa." ==================================================================== EJEMPLO DE CRITERIOS ==================================================================== Si el usuario no proporciona criterios, incluir como DEMOSTRACIÓN: 1. Planificación. 2. Dominio del contenido. 3. Claridad comunicativa. 4. Estrategia metodológica. 5. Participación. 6. Uso pedagógico de TIC. 7. Evaluación formativa. 8. Retroalimentación. 9. Gestión del tiempo. 10. Cierre de la clase. Todos deben poder modificarse. ==================================================================== FLUJO DEL SISTEMA ==================================================================== El sistema debe seguir esta secuencia: INICIO ↓ DATOS GENERALES ↓ OBJETIVO DE APRENDIZAJE ↓ EVIDENCIA ESPERADA ↓ SELECCIÓN DEL INSTRUMENTO ↓ CRITERIOS E INDICADORES ↓ VALORACIÓN ↓ PROCESAMIENTO ↓ RESULTADOS ↓ FORTALEZAS ↓ NECESIDADES DE MEJORA ↓ RETROALIMENTACIÓN ↓ PLAN DE MEJORA ↓ GUARDAR ↓ REPORTE ==================================================================== LÓGICA ENTRADA → PROCESO → SALIDA ==================================================================== ENTRADA: Datos generales. Criterios. Indicadores. Valoraciones. Observaciones. PROCESO: Validación. Conversión de niveles en puntajes. Ponderación. Cálculo. Clasificación. Detección de fortalezas. Detección de necesidades. Generación de retroalimentación. SALIDA: Resultado. Porcentaje. Nivel. Fortalezas. Necesidades. Retroalimentación. Plan de mejora. Reporte final. ==================================================================== ORGANIZACIÓN DEL CÓDIGO ==================================================================== El código debe estar comentado. Utilizar comentarios como: <!-- ============================= MÓDULO INICIO ============================= --> <!-- MÓDULO DATOS GENERALES --> <!-- MÓDULO INSTRUMENTOS --> <!-- MÓDULO RESULTADOS --> /* ============================= DISEÑO GENERAL ============================= */ /* DISEÑO RESPONSIVE */ /* DISEÑO DE RÚBRICA */ /* ============================= MOTOR DE CÁLCULO ============================= */ // Validación // Procesamiento de rúbrica // Lista de cotejo // Escala de valoración // Retroalimentación // Historial // LocalStorage // Impresión ==================================================================== CALIDAD DEL CÓDIGO ==================================================================== Utilizar: Variables con nombres claros. Funciones reutilizables. Código organizado. Comentarios útiles. Evitar código duplicado. Aplicar manejo básico de errores. No crear funciones sin utilizar. ==================================================================== PRUEBA PILOTO ==================================================================== Antes de entregar el código, simula internamente una evaluación. Verifica: Que todos los botones funcionan. Que los cálculos son correctos. Que las ponderaciones funcionan. Que los resultados se muestran. Que la retroalimentación aparece. Que localStorage guarda datos. Que el historial funciona. Que se puede eliminar una evaluación. Que la impresión funciona. Que la interfaz funciona en celular. Corregir cualquier error detectado. ==================================================================== CRITERIOS DE ÉXITO DEL PROTOTIPO ==================================================================== El prototipo será considerado funcional cuando permita: Registrar una evaluación. Aplicar al menos un instrumento. Calcular resultados correctamente. Identificar fortalezas. Identificar necesidades de mejora. Generar retroalimentación. Crear un plan de mejora. Guardar la evaluación. Recuperarla desde historial. Generar un reporte imprimible. ==================================================================== RESULTADO FINAL QUE DEBES ENTREGAR ==================================================================== ENTREGA PRIMERO: Una explicación MUY BREVE de la arquitectura del sistema. Máximo 10 líneas. DESPUÉS: Entrega TODO EL CÓDIGO COMPLETO. Debe estar dentro de UN SOLO BLOQUE: ```html CÓDIGO COMPLETO