Implementación de oportunidades de mejora relacionadas con LA

En segundo lugar, fueron atendidas las oportunidades de mejora relacionadas con LA. Para la implementación de la aplicación Web fueron utilizadas las siguientes tecnologías:

Para la EMI:

• Unity 3D (Motor de videojuegos)

• C# (Lenguaje de programación principal)

Para la aplicación Web:

• React JS (Librería de Frontend)

• MUI React (Librería de CSS basada en Google Material UI)

• Chart JS (Librería para el uso de gráficas)

• Node JS (Entorno de ejecución para el server)

• Express JS (Librería para el desarrollo de la API REST)

• Mongo DB Atlas (Base de datos de todo el sistema)

• Mongoose (Librería para la conexión entre API REST y base de datos)

• NPM (gestor de paquetes)

Para el despliegue de la aplicación Web:

• Netlify (PaaS para el despliegue del frontend)

• Render.com (PaaS para el despliegue del backend)

Es importante mencionar que para la implementación de la aplicación web se siguió un proceso iterativo e incremental (Pressman, 2005), donde se mantuvo una comunicación activa con los potenciales usuarios. En ese sentido, en primer lugar, se diseñaron prototipos de alta fidelidad de las funcionalidades antes mencionadas, atendiendo a las heurísticas de usabilidad de Nielsen (Nielsen Norman Group, 2021). Luego, los prototipos fueron socializados a los interesados del colegio para tener su retroalimentación. Para ello, fueron realizadas sesiones remotas (vía Google Meet) con las profesoras y directivos, respectivamente. Finalmente, y con el visto bueno de los interesados, se pasó a la implementación, pruebas y despliegue del software.

Considerando las necesidades de los interesados, fueron incluidos los siguientes módulos:

gestión de estudiantes (ver Figura 20), gestión de profesores (ver Figura 21), gestión de cursos (ver Figura 22) y reportes (ver Figuras 23 y 24). La sección de reportes incluye un dashboard para hacer seguimiento al proceso de aprendizaje de los estudiantes, el cual incluye un conjunto de gráficas y mecanismos de filtrado de información a petición de los interesados.

Figura 20. Gestión de estudiantes.

Figura 21. Gestión de profesores.

Figura 22. Gestión de cursos.

Figura 23. Dashboard de reportes. Parte 1.

Figura 24. Dashboard de reportes. Parte 2.

Respecto a la aplicación de lineamientos sobre el tablero de analítica de datos, fueron considerados los lineamientos LAD1, LAD2, LAD3, LAD5 y LAD7, tal como se describe a continuación.

LAD1: El dashboard de la aplicación web de Coco Shapes incluye filtros por grado, temática y estudiante, tal como se evidencia en las figuras 25 y 26. De esta manera los profesores

pueden configurar los datos que desean visualizar según sus necesidades y focalizarse en datos específicos dentro de conjuntos de información extensos.

Figura 25. Mecanismos para configurar nivel de detalle de datos.

Figura 26. Ejemplo de filtros.

LAD2: El dashboard ofrece a las profesoras diferentes tipos de gráficas, como son: torta, barras, puntos y líneas, para observar la distribución de datos por estudiante o curso, ver los estudiantes de un cierto nivel, así como ver el rendimiento de estudiantes. En las gráficas que incluyen el tiempo, el eje X representa dicha variable, para facilitar la interpretación de la información.

LAD3: Las gráficas incluidas en el dashboard (ver Figuras 23 y 24) utilizan colores distintivos asociados a las variables que incluyen, para que los profesores puedan identificar rápidamente diferentes conjuntos de datos o variables en una gráfica. La retroalimentación de los profesores permitió confirmar que los gráficos resultan claros, diferenciados y agilizan la interpretación de la información.

LAD5: A partir de la cantidad de aciertos y fallos, se tienen indicadores de rendimiento de los estudiantes representados mediante líneas en el tiempo (ver Figura 25), además se presenta el porcentaje de avance del estudiante y promedio del curso, durante el periodo de tiempo de uso del sistema. Con esta información los profesores pueden evidenciar el rendimiento del estudiante y comparar con el promedio del curso, y así, identificar oportunidades de mejora en su estrategia docente, ante estudiantes que presentan bajo rendimiento en el tiempo.

Figura 25. Rendimiento de estudiante.

LAD7: En la figura 26 se presenta la distribución de estudiantes por nivel definido en el colegio.

La variable “Level” puede tomar cuatro posibles valores: “Superior”, “High”, “Basic” y “Low”, con lo cual, el usuario puede seleccionar las opciones que sean de interés para visualizar los datos.

De acuerdo con el lineamiento LAD2, la variable del tiempo se representa en el eje X.

Adicionalmente, cuando el usuario para el cursor por encima de los puntos, se presenta información básica del estudiante correspondiente, como: nombre, tiempo usando la aplicación y el porcentaje de rendimiento asociado al nivel.

Figura 26. Selección de posibles valores que puede tomar una variable.

Respecto a la aplicación de lineamientos relacionados con el estudiante, fueron considerados los lineamientos LAS1, LAS2, LAS4 y LAS6, tal como se describe a continuación.

LAS1: La experiencia multimedia registra el nombre y grado del estudiante. En la aplicación web el directivo puede ingresar la información de manera manual o cargar un archivo de Excel (ver Figura 27), que incluye los datos de todos los estudiantes de un curso.

Figura 27. Ingreso de información de estudiante.

LAS2: La implementación de la aplicación web considera buenas prácticas de seguridad de la información, tales como: manejo de sesiones y perfiles de usuario, cifrado de contraseñas, protección de datos con valores predeterminados integrados para el acceso y el cifrado de extremo a extremo. Esto para garantizar la privacidad, integridad y confidencialidad de los datos de los usuarios.

LAS4: Coco Shapes incluye un conjunto de escenarios, los cuales se basan en un parque de atracciones, teniendo en cuenta el contexto alrededor del colegio, preferencias y edad de los estudiantes. Si bien esta información no fue registrada en la base de datos, fue considerada en el diseño de la experiencia multimedia, con el objetivo de captar el interés de los estudiantes. Por otro lado, en cuanto a los contenidos digitales y personaje, fueron elaborados a partir de un proceso de diseño participativo con los diferentes interesados. El personaje es Coco, un oso de anteojos, teniendo presente que este proyecto se realiza en un contexto colombiano. El oso de anteojos es una especie que habita en los bosques andinos y páramos suramericanos y en la zona andina en Colombia. El personaje se encuentra en un parque de diversiones, Coco se desplaza a través de diversos escenarios en el parque de diversiones, en los que realizará distintos juegos como tratar de atrapar figuras geométricas, jugar con un balón de fútbol, tumbar figuras geométricas o figuras de un color determinado, mezclar colores para producir un color secundario. Los niños ayudarán al personaje en los múltiples retos a los que se enfrenta.

LAS6: Coco Shapes incluye cuatro escenarios que atienden a los intereses y contexto de los estudiantes. El primer escenario consiste en una montaña rusa para las actividades de conteo tanto de jardín como de transición, el segundo escenario es un circo para las actividades de figuras de grado jardín, el tercer escenario se refiere a un camino que se encuentra en el parque de atracciones para las actividades de figuras de grado transición, y finalmente, el cuarto escenario consiste en los juegos de feria para las actividades de colores de los dos grados.

Respecto a la aplicación de lineamientos relacionados con el profesor, fueron considerados los lineamientos LAT1, LAT2 y LAT3, tal como se describe a continuación.

LAT1: En la aplicación web el directivo puede agregar un profesor, registrando su nombre y correo electrónico (datos mínimos obligatorios), y además, puede asignarle uno o más cursos (ver Figura 28). Una vez se ingresa la información, el profesor recibe una notificación en su correo electrónico, y así se logra el acceso a los datos de los estudiantes de sus cursos asignados.

Figura 28. Registro de un profesor.

LAT2: En la definición de las actividades de aprendizaje de Coco Shapes participaron los directivos y profesores del colegio La Fontaine, considerando las metodologías aplicadas y recursos disponibles (físicos y tecnológicos) en la institución. Esta información se encuentra disponible en la sección 5.1 del informe del proyecto previo a este, disponible aquí.

LAT3: El profesor dispone de un dashboard que incluye la distribución de estudiantes por niveles, comparación de resultados por grado, promedio de tiempo que cada curso utiliza Coco Shapes y el desempeño de los estudiantes. Con esta información los profesores detectan estudiantes que pueden necesitar apoyo adicional, y así, dedicar tiempo y recursos complementarios a este grupo de estudiantes.

Respecto a la aplicación de lineamientos relacionados con actividades de aprendizaje, fueron considerados los lineamientos LAA1, LAA2, LAA3, LAA8, LAA9, LAA10, LAA11, LAA12, LAA13 y LAA15, tal como se describe a continuación.

LAA1: La figura 29 presenta un ejemplo de aplicación del lineamiento donde se consideran los ítems 2, 3 y 5. Adicionalmente, a partir de las necesidades de interesados se incluyó el porcentaje de aciertos y la fecha en que el usuario realizó las actividades asociadas a cada temática que brinda Coco Shapes.

Figura 29. Datos de una actividad.

LAA2: La figura 30 presenta un ejemplo de sistema de puntuación basado en estrellas, el cual está dirigido a niños de los grados jardín y transición. La gamificación con estrellas fue definida en colaboración con los profesores para motivar a los niños y convertir el aprendizaje en una experiencia lúdica y divertida. Las estrellas actúan como un refuerzo positivo. Al recibir estrellas por completar las actividades, los estudiantes asocian el logro con una recompensa, lo que refuerza el comportamiento deseado.

Figura 30. Sistema puntuación basado en estrellas.

LAA3: A partir de este lineamiento, en el sistema se registran los temas (colores, formas o conteo), la fecha y el tiempo dedicado a cada temática (en la última vez que usó Coco Shapes) tal como se evidencia en la Figura 29. Con esta información, los profesores pueden identificar los temas que resultan de interés o complejos para los estudiantes, y aprovechar esta información como parte de su estrategia de enseñanza.

LAA8: El profesor dispone de un dashboard que incluye la distribución de estudiantes por niveles, comparación de resultados por grado, promedio de tiempo que cada curso utiliza Coco Shapes y el desempeño de los estudiantes (ver Figuras 23 y 24). Adicionalmente, es posible consultar los temas, la fecha y el tiempo dedicado a cada temática (ver Figura 29). Los interesados (directivos y profesores) consideran que esta información es adecuada para proporcionar retroalimentación a los

usuarios, identificar fortalezas, oportunidades de mejora y revisar la estrategia de enseñanza y recursos didácticos utilizados en el aula.

LAA9: Las actividades de aprendizaje de Coco Shapes incluyen contenidos digitales, como: texto, audio, imágenes y animaciones 2D. En compañía de los interesados se definió que los contenidos digitales están alineados con las actividades de aprendizaje puesto que contribuyen al desarrollo de capacidades de escucha e interpretación del idioma inglés, para los estudiantes de grados jardín y transición del colegio La Fontaine.

LAA10: Los contenidos digitales que soportan las actividades de aprendizaje, escenarios, personaje y el flujo narrativo, atienden a las preferencias y diversidad cultural de los estudiantes.

Coco Shapes incluye interfaces llamativas e intuitivas para los estudiantes que causan interés y curiosidad en el sistema multimedia. Cabe resaltar que como trabajo futuro se ha definido atender a lineamientos de accesibilidad, considerando estudiantes con posibles limitaciones visuales o auditivas.

LAA11: Los profesores definieron que para la realización de las actividades de figuras y colores se requiere un objeto físico, en primer lugar, con espacios para insertar las figuras geométricas y, en segundo lugar, con pulsadores de colores primarios y secundarios. Además, es utilizada una tablet para desplegar la experiencia multimedia, así como las actividades de conteo. Estos elementos implican la interacción activa de los estudiantes con los contenidos.

LAA12: Las actividades de aprendizaje incluyen efectos de sonido y música que acompañan las instrucciones brindadas al usuario. Es importante mencionar que la directora del colegio participó en la grabación de las instrucciones que se reproducen en las actividades de aprendizaje, debido a que es una voz familiar para los estudiantes, además de su excelente pronunciación en inglés. Esto con el objetivo de evocar emociones positivas y mantener el interés de los estudiantes.

LAA13: Las actividades de aprendizaje de Coco Shapes relacionadas con las temáticas de figuras y colores están acompañadas de un objeto físico, con espacios para insertar las figuras geométricas y pulsadores de colores primarios y secundarios. Estos elementos físicos se relacionan directamente con lo que están aprendiendo los estudiantes de jardín y transición. La interacción con estos objetos involucra los sentidos táctiles y visuales de los niños, lo que enriquece su experiencia de aprendizaje. Pueden tocar, manipular y explorar, lo que mejora la retención y comprensión de las temáticas.

LAA15: En las actividades de aprendizaje de Coco Shapes los estudiantes presionan botones, insertan figuras en espacios bien definidos, seleccionan opciones en la pantalla de una tablet; todo esto dependiendo de los retos definidos en cada temática de figuras, colores o conteo. La diversidad de estilos de interacción involucra a los niños de manera más activa en la experiencia multimedia.

Al ofrecer varias opciones de interacción, se fomenta su compromiso y atención hacia el reto que atiende el estudiante.

Respecto a la aplicación de lineamientos relacionados con el progreso de los estudiantes, fueron considerados los lineamientos LAP1, LAP2, LAP3 y LAP4, tal como se describe a continuación.

LAP1: A partir de la interacción de los estudiantes con Coco Shapes se registra la cantidad de aciertos y fallos, con lo cual, el dashboard incluye una gráfica de líneas donde se observa el rendimiento de los estudiantes en el tiempo (ver Figura 25) en comparación al promedio del curso.

Con esta información los profesores pueden identificar tendencias, patrones o mejoras a largo plazo en el desempeño de los estudiantes.

LAP2: A partir del tiempo individual que un estudiante utiliza Coco Shapes, la aplicación web presenta a los directivos y profesores el tiempo promedio que cada curso invierte en el uso de la experiencia multimedia (ver Figura 31), con lo cual, queda en evidencia el tiempo total que los estudiantes están expuestos al segundo idioma. El tiempo de uso proporciona información sobre el nivel de compromiso de los estudiantes. Puede indicar cuánto tiempo dedican a la experiencia, lo que ayuda a evaluar su nivel de interés y participación.

Figura 31. Promedio de tiempo de uso de una EMI.

LAP3: La figura 25 presenta un ejemplo donde se considera la cantidad de aciertos y fallos, porcentaje de avance del estudiante y promedio del curso, durante el periodo de tiempo de uso del sistema. La gráfica atiende al lineamiento LAD5 y permite evidenciar el rendimiento del estudiante, así como comparar con los resultados promedio del curso. De esta manera, el profesor puede identificar oportunidades de mejora en su estrategia docente, ante estudiantes que presentan bajo rendimiento en el tiempo.

LAP4: La aplicación web asociada a Coco Shapes registra y almacena datos históricos a partir de la interacción de los estudiantes con cada una de las actividades de aprendizaje en las temáticas objeto de estudio (colores, figuras y conteo). En la aplicación es posible consultar el historial de datos por curso, brindando a directivos y profesores la posibilidad de tomar decisiones informadas, con el objetivo de adaptar estrategias pedagógicas y realizar comparaciones entre cohortes de estudiantes para identificar tendencias y áreas de mejora. Adicionalmente, el profesor puede

configurar la visibilidad de la información (ver Figura 32), es decir, puede mostrar u ocultar un curso dentro de su historial de cursos asignados en el colegio. Esto con el fin de que pueda enfocarse en los cursos que sean de interés.

Figura 32. Visibilidad de curso en el historial.

Una vez culminado el proceso de implementación de las oportunidades de mejora en cuanto a usabilidad y LA, el equipo de trabajo compartió los siguientes enlaces a los interesados del colegio La Fontaine, con el objetivo de promover el uso de la segunda versión de Coco Shapes, y posteriormente evaluar la efectividad de los lineamientos de diseño considerados.

• Enlace de descarga de Coco Shapes: https://cocoshapes.netlify.app/

• Enlace para gestión de datos: https://cocoshapes.uao.edu.co/