Aplicación web para práctica con vectores y soporte educativo bajo el modelo de Educación Basada en Web
Web application for practice with vectors and educational support under the Web-Based Education model
Aplicación web para práctica con vectores y soporte educativo bajo el modelo de Educación Basada en Web
Científica, vol. 26, núm. 1, pp. 1-11, 2022
Instituto Politécnico Nacional
Recepción: 08/01/2022
Aprobación: 10/03/2022
Resumen: La propuesta presenta una aplicación web para práctica con vectores en el plano cartesiano xy, siendo una herramienta de apoyo en materias como: mecánica, cálculo vectorial, álgebra lineal, electromagnetismo, etc., constituyendo una herramienta avanzada donde los estudiantes practiquen sus saberes de una manera práctica, en conformidad con el modelo de Educación Basada en Web (Web Based Education, WBE por sus siglas en inglés). Los vectores son un concepto extensamente empleado en diferentes materias, pero este concepto es complejo, complicado de comprender, y ante la crisis sanitaria por COVID-19 que seguimos viviendo hasta el momento, ha expuesto la necesidad de herramientas de apoyo para educandos y educadores, con el objetivo de complementar sus clases diarias, con actividades prácticas para crear experiencias más enriquecedoras en las aulas. La propuesta presentada busca producir actividades prácticas multimedia con vectores, para ecuaciones, suma y resta de vectores; a través de la personalización de los vectores para multiplicación escalar configurando los coeficientes de la ecuación del vector, renderizando las características de los vectores como: ángulo, componentes del vector y magnitud. La propuesta presentada se ajusta con la designada Educación 4.0, apoyando proyectos y competencias con vectores, proveyendo experiencias prácticas más enriquecedoras, incorporando de manera innovadora la tecnología en el proceso enseñanza/aprendizaje con vectores. Las aportaciones de la propuesta en el Front-end se basa en el modelo de componentes con las siguientes ventajas: conquista de la complejidad, manejo del cambio, y maximiza la reutilización de las partes del proyecto. La utilización de patrones de software ha permitido mejorar la arquitectura de la propuesta mejorando: composición, escalabilidad, maximización de la reutilización y mantenibilidad. El CRUD de la propuesta ha posibilitado la elaboración de ejercicios multimedia interactivos, reconfigurables y dinámicos.
Palabras clave: vectores, aplicación web, Educación 4.0, Educación Basada en Web, multimedia.
Abstract: The proposal presented a web application for practice with vectors in the Cartesian xy plane, being this a support tool in subjects such as: mechanics, vector calculus, linear algebra, electromagnetism, etc., constituting an advanced tool, where students practice their knowledge in a practical way, in accordance with the paradigm of Web Based Education (WBE). Vectors are a concept widely used in different subjects, but this concept is complex, complicated to understand, and in view of the COVID-19 health crisis we are still experiencing, it has exposed the need for support tools for students and educators, with the aim of complementing their daily classes with practical activities to create more enriching experiences in the classroom. The proposal presented seeks to create practical multimedia activities with vectors, for: equations, addition and subtraction of vectors; through the customization of vectors for scalar multiplication by configuring the coefficients of the vector equation, rendering the characteristics of the vectors such as: angle, vector components, and magnitude. The presented proposal fits with the designated Education 4.0, supporting projects and competences with vectors, providing more enriching practical experiences, incorporating in an innovative way the technology in the teaching/learning process with vectors. The contributions of the proposal in the Front-end are based on the component model with the following advantages: conquest of complexity, management of change, and maximizes the reuse of the parts of the project. The use of software patterns has allowed to improve the architecture of the proposal by improving: composition, scalability, maximization of reuse and maintainability. The CRUD of the proposal has enabled the development of interactive, reconfigurable and dynamic multimedia exercises.
Keywords: Vectors, Web Application, Education 4.0, Web Based Education, Multimedia.
Internet ha posibilitado la compartición de recursos e información de formas anteriormente impensables, transformando nuestras vidas de manera inexorable, afectando innumerables áreas del conocimiento. Los usuarios conectados a internet pueden acceder a múltiples tipos de servicios e información, para llevar a cabo de una mejor manera sus actividades cotidianas. El surgimiento de la web fue un punto de inflexión en la historia de internet que, en conjunto con el primer navegador web totalmente con una Interfaz de Usuario Gráfica (Graphical User Interface, GUI por sus siglas en inglés), revolucionó la sociedad, al posibilitar el acceso a información de todo tipo a usuarios con conocimientos básicos en computación, ya que anteriormente se requerían de conocimientos computacionales más avanzados. El acceso a la información ha transformado todo tipo de actividades como: compras, entretenimiento, educación, comunicación, etc. El binomio de internet y web es utilizado por todo tipo de personas con diferentes tipos de formación, llevando cada uno a cabo diferentes actividades en la red. Anteriormente, las instituciones educativas contemplaban al binomio de la Internet y la Web como una simple curiosidad, pero esta percepción ha ido cambiando a lo largo de los años, creciendo año tras año la presencia de las instituciones educativas en internet y web, y ahora más debido a la pandemia por COVID-19 que seguimos viviendo. Muchas instituciones educativas ya tienen sus materiales educativos y evaluaciones en línea actualmente, no obstante, son pocas las que cuentan con herramientas complementarias que hagan más enriquecedoras las experiencias de los estudiantes. La web ha posibilitado a las diferentes instituciones educativas publicar sus materiales educativos en línea, para tenerlos accesibles desde cualquier parte y a cualquier hora, permitiendo que los educandos puedan avanzar a su propio ritmo. La educación no está excluida de la revolución que ha traído el binomio de internet y web, instaurando nuevos modelos educativos, cambiando la educación tradicional, y debido a la pandemia se ha vuelto un tema fundamental para diferentes instituciones educativas. La Educación Basada en Web (Web Based Education, WBE por sus siglas en inglés), se ha vuelto un área fundamental de la educación a distancia, debido a que gran parte de los desarrollos actuales se implementan bajo este modelo. La WBE se identifica por: separación entre educandos, educadores e incluso personal de apoyo, en una organización educativa, el uso de tecnologías Web para la distribución y presentación de los contenidos educativos, un canal de comunicación entre educandos, educadores y el personal de apoyo en el proceso de enseñanza/aprendizaje. Los contenidos educativos cada vez son más complejos, en gran medida a que se busca aprovechar el canal de comunicación bidireccional para mejorar interactividad, distribución, y almacenamiento económico de los contenidos educativos, además de ser posible entrelazar contenidos educativos con otros recursos educativos complementarios de la institución o de otras instituciones externas [1]. Hay múltiples definiciones del concepto competencia, donde una definición simple es la siguiente: “saber de ejecución”; relacionando: saber pensar, saber desempeñar, saber interpretar; con un saber actuar en variados escenarios. Por su parte la competencia es entendida como la capacidad de movilizar variados recursos cognitivos para enfrentar a diferentes situaciones a través de la práctica. El Aprendizaje Basada en Competencias (Competency Based Learning, CBL por sus siglas en inglés), busca el desarrollo del aprendizaje integral del educando, implicando el uso que hacen los educandos del conocimiento en escenarios de la vida personal, social y profesional, en entornos y ámbitos de la vida real. Teniendo como objetivo que los educandos activen su saber, emplazándolo para poner en práctica lo aprendido, yendo más lejos del típico salón de clases, contextualizándolos y trasladándolos a variadas situaciones a lo largo de su vida. El CBL se apoya en variados recursos tecnológicos, con el objetivo de que educandos y educadores intercambien experiencias, solucionen problemas, o lleven a cabo proyectos, donde el educando utilice su saber para llevar a la práctica lo aprendido. Siendo un objetivo fundamental del CBL que el educando active sus saberes poniéndolos en práctica [2]. Lo cual es un punto principal de la propuesta presente, al proveer una herramienta de apoyo llevada a cabo por medio de una aplicación web, donde lleve a cabo proyectos con vectores, posibilitando practicar a los educandos sus saberes por medio de prácticas multimedia interactivas. La Educación 4.0 asume una visión de apoyo en el proceso de enseñanza/aprendizaje a través de las tecnologías, liberándola de los tiempos, lugares y contenidos; para la conformación de múltiples modelos educativos. De la misma forma que el CBL, la Educación 4.0 fomenta ambientes de aprendizaje innovadores, con metodologías como el Aprendizaje Basado en Proyectos (Project Based Learning, PBL por sus siglas en inglés), y las competencias apoyadas en experiencias prácticas, que promuevan los saberes del educando con lo aprendido al ponerlos en práctica, constituyendo experiencias más enriquecedoras para los educandos y los educadores. La Educación 4.0 busca impulsar el uso de la Inteligencia Artificial (Artificial Intelligent, AI por sus siglas en inglés), en ambientes de aprendizaje innovadores a través de la tecnología [3]. La inquietud por mejorar la educación científica/tecnológica tiene una importancia a nivel mundial, debido al valor que se le suele atribuir. Se suelen llevar a cabo diferentes estrategias y planes para resolver esta inquietud. Esto debido a que la educación científica/tecnológica es un aspecto estratégico para muchos países. Para poder mejorar hay que medir, por lo tanto, debemos medir lo que los educandos aprenden, lo cual parece una tarea sencilla, pero es más compleja de lo que parece, y con esta exigencia nace la necesidad de revisión de planes de estudio y de modos de enseñar. Entrando en materia, una definición de vector simple es la siguiente: “un segmento de recta que está orientado o dirigido en el espacio”. Las partes constituyentes de un vector son las siguientes: origen, extremo, magnitud o módulo, sentido y dirección. Siendo el origen el punto de origen de donde sale el vector, el extremo es el segundo punto donde termina el vector, la magnitud o módulo es la extensión del vector, el sentido se muestra por una flecha en el segundo punto donde termina el vector, finalmente la dirección se fija por la orientación en el espacio del vector. Las magnitudes físicas pueden ser escalares o vectoriales, donde las escalares son las cuales solo se muestra la magnitud, y no contienen información adicional extra. Mientras que las magnitudes vectoriales son las que además de la magnitud, se provee: sentido, dirección y punto de aplicación. Numerosos conceptos físicos pueden ser representados por medio de vectores como: aceleración, desplazamiento de un cuerpo en movimiento, fuerza, velocidad, momento, etc.; todas estas son magnitudes vectoriales. Los temas sobre vectores deben de tomar en cuenta el sistema referencial de los vectores, constituido por un punto de origen 0 y ejes perpendiculares, a este sistema de referencia se le designa como sistema de coordenadas ortogonales, donde cualquier vector puede ser contenido dentro de este marco de referencia, los cuales pueden ser: plano cartesiano xy o xyz, u algún otro marco de referencia [4]. La presente propuesta solo utilizará el plano cartesiano xy para delimitarlo. Los vectores como se explicó anteriormente tienen una gran importancia, ya que a través de ellos podemos estudiar fenómenos de la naturaleza, debido a que los vectores nos posibilitan representar estos fenómenos. Los vectores como anteriormente mencionamos son utilizados en diferentes materias como: mecánica, cálculo vectorial, álgebra lineal, electromagnetismo, etc. El tópico de los vectores es extensamente empleado de forma independiente, o como parte de otras materias como: física, matemáticas, ciencia, ingeniería, entre otras. En el caso particular del Instituto Politécnico Nacional (IPN), hay una gran variedad de cursos con vectores a nivel medio superior de los diferentes Centros de Estudios Científicos y Tecnológicos (CECyT), y en múltiples unidades profesionales a nivel Licenciatura. Hay una gran cantidad de herramientas de apoyo para la enseñanza de los vectores en la educación, la Universidad Nacional Autónoma de México (UNAM) cuenta con la propuesta: Suma vectorial – Objetos [5]. La Fundación Carlos Slim tiene un sitio web denominado aprende.org, con cursos para: capacitación, certificación, diplomados, etc., el tópico de vectores se maneja dentro de la materia de matemáticas en el despeje de fórmulas físicas con magnitudes escalares [6]. La academia Khan cuenta con diferentes cursos constituidos principalmente por videos para la enseñanza de los vectores, estos cursos cuentan con evaluaciones compuestas por cuestionarios simples, la parte práctica para los educandos están constituidas con contenidos fijos y una pregunta evaluable, también los educandos cuentan con un tablero de aprendizaje personalizable [7]. Las tres propuestas mencionadas previamente poseen en común una interactividad muy restringida, los nuevos ejercicios son estáticos, y no se pueden guardar, asimismo las propuestas cuentan con un soporte de multimedios restringida. Hay otras propuestas de apoyo para la enseñanza de los vectores más adelantadas, una de estas propuestas se denominada Geogebra, está disponible para varias plataformas, además de contar con una aplicación Web, la cual tiene varios cursos sobre vectores como: vectores en el plano, suma, resta, etc., donde los educadores pueden desarrollar contenidos educativos para varios niveles educativos, los contenidos pueden contar con evaluaciones, la propuesta cuenta con una interacción dinámica mejorada respecto a propuestas anteriormente citadas, el apoyo para multimedios todavía es restringido, y no tiene manera de organizar los contenidos educativos creados [8]. La propuesta PhET de la Universidad de Colorado Boulder es una institución sin fines de lucro, la iniciativa busca una forma de enseñar y aprender la ciencia de manera innovadora, a través de simulaciones interactivas gratuitas, con simuladores educativos abiertos disponibles bajo la licencia de Atribución Comunes Creativa (Creative Commons Attribution, CC-BY por sus siglas en inglés), siendo CC-BY la licencia más abierta, la cual posibilita a los usuarios: redistribuir, producir proyectos derivados, traducción, y la publicación de actividades comerciales con los créditos apropiados. PhET cuenta con un par de simuladores sobre el tópico de los vectores los cuales son: Suma de vectores, y Suma de Vectores: Ecuaciones; esta última propuesta es la más interesante de todas las herramientas previamente mencionadas, a pesar de esto tiene sus desventajas, debido a que no se pueden producir nuevos ejercicios personalizados y guardarlos, además de no contar con soporte para multimedios [9], [10], [11]. La presente propuesta muestra el desarrollo de una aplicación web especializada para la práctica de vectores en el plano cartesiano xy de apoyo bajo el modelo de WBE. La presente propuesta tiene como objetivo ser una herramienta de apoyo asistencial, que aproveche mejor las ventajas que ofrecen internet y la web en la educación. La propuesta utiliza patrones de diseño de software, los cuales son en términos generales buenas prácticas de programación, encapsulando el conocimiento recolectado de expertos, que nos permitió manejar mejor el cambio en la presente propuesta, facilitando los cambios y mantenimiento. La presente propuesta empleó la librería React escrita en el lenguaje de programación JavaScript del lado del Front-end, esta librería nos permitió desarrollar la Interfaz de Usuario (User Interface, UI por sus siglas en inglés), con las ventajas que a continuación enumeraremos: modelo basado en componentes, código cien por ciento JavaScript, DOM virtual, y ECMAScript 6. El modelo basado en componentes permitió la reutilización de los componentes del proyecto, al ser escrito en código cien por ciento JavaScript es soportado por la mayoría de los navegadores Web actuales, el DOM virtual permitió renderizar solamente las partes de los componentes a actualizar, y por último la utilización de ECMAScript 6 mejoró la legibilidad y versatilidad para el desarrollo de la presente propuesta, el código ECMAScript 6 final de la propuesta se transformó a ECMAScript 5 por cuestiones de compatibilidad con los navegadores web actuales, por medio de Webpack y Babel, donde Webpack es un empaquetador de módulos de JavaScript de código abierto, está enfocado principalmente para JavaScript, pero puede soportar otros recursos como: imágenes, lenguaje de marcado de hipertexto (HyperText Markup Language, HTML por sus siglas en inglés), y hojas de estilo en cascada (Cascading Style Sheets, CSS por sus siglas en inglés), conformando módulos con dependencias y creando activos estáticos. Babel por su parte es un transpiler que nos posibilitó transformar el código de la versión ECMAScript 6 a ECMAScript 5, debido a cuestiones de compatibilidad, ya que ECMAScript 5 es soportado prácticamente en su totalidad en los navegadores web actuales. React.js cuenta con una licencia del tipo Instituto de Tecnología de Massachusetts (Massachusetts Institute of Technology, MIT por sus siglas en inglés), libre y permisiva, con pocas limitaciones para reutilización [12]. La presente propuesta tuvo como uno de sus objetivos fundamentales reducir la elevada complejidad tecnológica asociada para la experimentación con vectores, para producir experiencias más enriquecedoras para los educandos, donde los estudiantes puedan practicar sus saberes, por medio de una herramienta de apoyo multimedia.
II. Metodología/Desarrollo
La Fig. 1 muestra la arquitectura del Front-end y Back-end de la propuesta, se utilizó el patrón de diseño de software denominado Modelo Vista Controlador (Model View Controller, MVC por sus siglas en inglés), siendo un patrón contenedor para toda la propuesta, ya que nos permite combinar varios patrones de diseño de software, la presente propuesta utilizó adicionalmente los siguientes patrones de diseño de software: composición, observador, singleton, y Objeto de Acceso a los Datos (Data Access Object, DAO por sus siglas en inglés). Solo el patrón composición se implementó en el Front-end de la propuesta, en conjunto con los componentes implementados con React.js, todos los restantes patrones de diseño de software siguientes: Observador, Singleton, y DAO; fueron implementados del lado del Back-end. La implementación del patrón de diseño de software MVC de la propuesta se llevó a cabo a través del framework Struts 2 [13], y se empleó para la implementación como servidor Web GlassFish Server 4.1.1 [14]. La base de datos se llevó a cabo por medio de MySQL 8 [15], la cual representa nuestro modelo en el patrón MVC, además de la lógica de negocios, lo anterior se muestra en la Fig. 1. Las vistas son las interfaces de la aplicación, con las que el usuario interacciona a través de la aplicación Web, estas están implementadas por medio de la librería React.js usando el modelo basado en componentes de software, en la Fig. 1 se muestra que la vista de la aplicación Web está compuesta por los componentes: Aplicación, Login, LeerPregunta, MenúPrincipal, y Modificar. El controlador en nuestra propuesta se denomina FilterDispatcher, teniendo como función principal seleccionar la correspondiente vista de salida a renderizar en respuesta a la correspondiente entrada del usuario, aparte de ejecutar la correspondiente lógica de negocios asociada. El patrón de composición nos proveyó una solución robusta para la construcción de sistemas complejos con base en componentes más pequeños. Teniendo básicamente dos tipos de componentes: simples y compuestos, estos últimos representan colecciones de componentes. El patrón de composición nos permitió representar nuestro Front-end como una jerarquía de árbol, donde las estructuras constituyen la jerarquía de árbol, donde los componentes de esta estructura pueden ser simples o compuestos. La Fig. 2 muestra el diagrama de componentes de la propuesta del Front-end, implementados con React.js [12], la propuesta también utiliza componentes preconstruidos de la iniciativa Material-UI, siendo esta una librería React.js muy popular para crear UI, basadas en componentes React.js personalizables, la librería es de código abierto, asimismo permite incorporar otras soluciones de terceros [16]; otros componentes manejados en la propuesta son los de React Bootstrap 4, siendo este un marco de trabajo que sustituye a Bootstrap, eliminando las dependencias de contexto innecesarias como jQuery, lo que lo ha posicionado como una alternativa atractiva al desarrollar UI [17]. El patrón observador puede ser visto como un punto concentrador de mensajes, que envía los mensajes a las instancias correspondientes, en nuestro caso se utilizó en la propuesta para mantener actualizadas las vistas del usuario. El patrón singleton tiene como objetivo garantizar que solo haya una instancia del objeto en el sistema, en nuestro caso se empleó para tener un solo objeto que acceda a la base de datos. El patrón DAO nos permitió extraer y encapsular todo el acceso a la fuente de datos, manejar la conexión a la fuente de datos para la obtención y almacenamiento. La abstracción y encapsulación de la fuente de datos nos permitió no depender de la implementación de la fuente de datos, desacoplando la capa de negocios de la fuente de datos, mejorando la escalabilidad de la propuesta.

La persistencia se llevó a cabo con base en el framework Hibernate, que nos permitió llevar a cabo el Mapeado Objeto Relacional (Object-Relational Mapping, ORM por sus siglas en inglés), este framework nos posibilitó establecer un puente entre el modelo de Programación Orientado a Objetos (Object Oriented Programming, OOP por sus siglas en inglés), y el modelo relacional, dos modelos incompatibles entre sí, relacionando las estructuras del modelo relacional con sus correspondientes estructuras lógicas en el modelo OOP. La aplicación web implementó las estructuras de la base de datos acopladas por medio de entidades lógicas, para llevar a cabo las siguientes acciones de la propuesta: Crear, Leer, Actualizar y Borrar (Create, Read, Update and Delete, CRUD por sus siglas en inglés), a través de la conjunción de: Hibernate, ORM, DAO y MVC. El patrón DAO nos posibilitó separar la lógica de negocios de la lógica para acceder a los datos, delegando a DAO el acceso a los datos del modelo.
III. Resultados y discusión
La Fig. 3 muestra la vista para crear un nuevo ejercicio para la práctica de vectores en el plano cartesiano, proveyéndole los componentes rectangulares de los vectores, en nuestro caso de los vectores A y B, siendo estos los siguientes valores respectivamente: Ax=55, Ay=90, Bx=99, y By=30, representados estos a continuación en su forma matricial correspondiente: A=[Ax, Ay] y B=[Bx, By], sustituyendo los componentes rectangulares correspondientes a continuación: A=[55, 90] y B=[99, 30], la visualización de manera dinámica y gráfica de los vectores A y B se pueden ver en su forma final en la Fig. 3. En la Fig. 3 también se muestra el botón Seleccionar archivo para la subida de multimedios asociado al ejercicio, mostrado en la esquina inferior izquierda, en este caso concreto el archivo multimedia asociado es un video en formato MP4 denominado: vectores3.mp4, en caso de estar seguro de los datos anteriormente proporcionados, se presiona el botón Enviar creándose el ejercicio, y en caso de que no se desee crear el ejercicio se presiona el botón Cerrar. En la Fig. 4 se pueden ver el ejercicio creado exitosamente en la aplicación Web, mostrando los vectores Importar imagen y Importar imagen con sus componentes rectangulares de los vectores respectivos, además de mostrar el cálculo automático por parte del sistema de los ángulos de los vectores A y B, siendo estos respectivamente los siguientes: 58.57, y 16.85.



La Fig. 5 presenta dos nuevos vectores que muestra en segundo plano el vector original (esquina superior izquierda), luego se muestra en segundo plano la suma de los vectores (esquina superior derecha), la resta de los vectores se muestra también en segundo plano (parte inferior central), y finalmente en el centro se muestra el componente multimedia asociado al ejercicio para apoyo al educando, en este caso un archivo de sonido con la explicación de la actividad. La aplicación Web llevara a cabo el cálculo automático para la suma de los vectores A y B, y su representación gráfica, representada esta suma por el vector S, mostrando a continuación los resultados en su forma matricial de los nuevos vectores: S =[Sx, Sy]= [350, 500], con un ángulo de: 55.00. Igualmente, para la resta de los vectores, se muestra el cálculo de la resta de los vectores A y B por parte de la aplicación Web, y su representación gráfica, siendo representada esta resta por el vector R mostrada a continuación, donde los resultados en su forma matricial de los nuevos vectores son los siguientes: R =[Rx, Ry]= [-150, -300], con un ángulo de: 63.43.

La Fig. 6 muestra la interfaz del menú principal con ejercicios de vectores creados en el plano cartesiano, mostrando en la parte superior los botones: Salir y Crear Nuevo Ejercicio. En la parte central se tienen dos ejercicios de vectores creados previamente, cada componente contiene las opciones: Leer Pregunta, Borrar Pregunta, y Modificar Pregunta; el botón de Leer Pregunta nos muestra el ejercicio correspondiente creado en el plano cartesiano dependiendo del botón seleccionado, mostrándonos el vector original, la suma y resta de los vectores, así como los cálculos automáticos de los ángulos correspondientes, de los vectores originales, suma y resta respectivamente; el botón Borrar Pregunta despliega un cuadro de diálogo preguntándonos si estamos seguros de borrar el ejercicio correspondiente, en caso de confirmar el borrado al darle clic al botón Borrar Pregunta, se borrará el ejercicio correspondiente; por último en caso de dar clic al botón Modificar Pregunta nos mostrara una interfaz similar a la de la Fig. 3 del respectivo ejercicio de vectores, con los componentes rectangulares llenados en el proceso de su creación, para el caso de modificar los valores al dar clic al botón Modificar Pregunta, se modifica el ejercicio proporcionando los nuevos componentes rectangulares, recalculando el vector original, la suma y la resta respectivamente del ejercicio. La aplicación web también cuenta con un módulo de Login para validar a los usuarios dentro del sistema como se muestra en la Fig. 7.


El valor agregado de la presente propuesta comparándola con las iniciativas del estado del arte de vectores de la UNAM, la Fundación Carlos Slim o la academia Khan, consiste en que se puede crear nuevos ejercicios multimedia interactivos, reconfigurables y dinámicos, mientras que las otras iniciativas anteriormente mencionadas son muy limitadas en estos aspectos. Mientras que en la iniciativa de GeoGebra tiene su mayor problema en que se basa en los Applets Java, los cuales ya están depreciados y la etiqueta HTML para el Applet también está depreciada, lo que puede ocasionar que muchos navegadores Web no soporten los contenidos educativos desarrollados en esta plataforma, mientras que nuestra propuesta se apega a los estándares de la Web, siendo soportados en los navegadores más actuales. Finalmente, la iniciativa Phet de la Universidad de Colorado Boulder tiene su mayor debilidad en la creación de materiales educativos basados en vectores y su guardado como ejercicios en la plataforma, además de carecer de soporte multimedia, mientras que la propuesta permite la creación y modificación de los materiales educativos por medio del CRUD, y tiene soporte de archivos multimedia.
La presente propuesta puede utilizarse en varias materias, utilizaremos para ejemplificar la materia de física, la cual es considerada en diferentes planes de estudios, en diferentes niveles educativos, abarcando en muchos casos el tema de los vectores, con temas que pueden ser apoyados por la herramienta de la presente propuesta para temas como: propiedades de los vectores, producto punto, sistemas equivalentes de fuerzas, suma y resta de vectores, entre otros.
IV. Conclusiones
La presente propuesta muestra una aplicación web para la práctica con vectores con soporte educativo todo bajo el modelo WBE, combinando internamente tres modelos, en el Front-end utilizamos el modelo de componentes de software, en el Back-end utilizamos el modelo OOP y el relacional. La presente propuesta cuenta con un CRUD que permite crear ejercicios prácticos multimedia interactivos, reconfigurables y dinámicos con vectores en el plano cartesiano xy, con las ventajas inherentes de los componentes de software, reduciendo la complejidad de desarrollo de los ejercicios para el profesor, al simplificar la elaboración de este tipo de materiales educativos, en prácticas con vectores en el plano cartesiano xy. El manejo del cambio en la propuesta se ve reflejado desde el ensamblado dinámico de componentes en diferentes tipos de contenidos con base en componentes simples y complejos bajo el patrón composición. La reutilización de las partes del proyecto ha mejorado, sobresaliendo el Front-end de la propuesta en conjunto con el patrón composición de diseño de software y la librería React.js, ya que las UI de la propuesta se implementaron con la librería React.js, construyendo las UI del usuario con base en componentes simples, para conformar componentes más complejos, es importante destacar que se hizo uso de componentes preconstruidos de las librerías: Material-UI, y React Bootstrap 4.
La propuesta hizo uso de la base de datos MySQL para la implementación del modelo, al incorporar el ORM en la propuesta, se tendió un puente entre los modelos incompatibles entre sí, el modelo relacional y la OOP, permitiéndonos relacionar las tablas del modelo relacional, con las estructuras lógicas en el modelo OOP, resultando en la escritura de la lógica de negocios en un modelo escrito en el modelo OOP, mejorando la mantenibilidad del código de la propuesta. Los patrones DAO y MVC mejoraron la escalabilidad de la propuesta, facilitando la migración de una base de datos a otra con mejores prestaciones en caso de ser necesario. Los ejercicios resultantes de la propuesta son dinámicos, interactivos, multimedia, y actualizables; lo que ha permitido a los educandos prácticas más interactivas donde puedan poner a prueba sus saberes, permitiendo que tanto educadores como educandos puedan modificar los ejercicios propuestos por los profesores, con la finalidad de tener prácticas más enriquecedoras entre educadores y educandos, proporcionando mejores retroalimentaciones, en este caso con el objetivo de mejorar la comprensión de los conceptos de vectores, suma y resta de vectores para los educandos con base a la práctica poniendo a prueba sus saberes. Los ejercicios pueden ser transformados en evaluaciones supervisadas por el profesor, mejorando la retroalimentación entre educadores y educandos. La presente propuesta al ser una aplicación web ha tomado mucha relevancia ante la pandemia de COVID-19 que hasta el día de hoy seguimos viviendo, permitiendo a los educandos poner a prueba sus saberes, con ejercicios prácticos en línea con retroalimentaciones. Las prácticas creadas por los educadores pueden agregar elementos multimedia de apoyo, gracias al módulo de subida de archivos dinámico, permitiendo agregar materiales complementarios de apoyo para los educandos. La presente propuesta utiliza librerías libres con la finalidad de reducir los costos por licenciamiento al máximo, para tener en un momento dado una versión de producción de bajo costo. La propuesta posibilita además agregar nuevas opciones pedagógicas en caso de ser requeridas, teniendo la posibilidad de adaptarlas a las necesidades de los educadores, y no que el educador se adapte a la herramienta.
Destacamos que la propuesta es innovadora en línea con la Educación 4.0, la cual tiene un enfoque basado en proyectos y competencias. La presente propuesta es en este momento un prototipo, pero gracias a los patrones de diseño de software implementados es posible la actualización del proyecto de software en un momento dado a una versión de producción. El importante mencionar que el patrón DAO ha posibilitado un acceso controlado y uniforme a los datos. Finalmente, respecto al trabajo futuro consideramos que hay que mencionar que se puede mejorar en los siguientes puntos: agregar más patrones de diseño de software, mejorar el soporte de arrastrar y soltar de las UI, incluir un módulo de Inteligencia Artificial, hacer análisis de datos de los resultados de los estudiantes con Python y pandas, y crear un módulo de análisis de datos para que automatice la obtención de información en el momento, con la finalidad de que el educador pueda tomar mejores decisiones, en la retroalimentación hacia sus educandos, mejorar las UI, y documentar nuevas librerías que puedan incorporarse a la propuesta, mejorar la reconfiguración dinámica de los contenidos educativos en función de sus progresos en el curso, adaptación del nivel de los materiales educativos al educando, etc.
Agradecimientos
Los autores de este artículo agradecen a la Universidad Politécnica de Querétaro, al Instituto Politécnico Nacional (IPN) y a la Escuela Superior de Cómputo (ESCOM) por su apoyo para este trabajo dentro del proyecto SIP: 20210896. Los autores desean reconocer a todos sus colegas y a los estudiantes en general que participaron en el diseño y desarrollo del software, y materiales de aprendizaje descritos en este artículo, y en particular a los estudiantes: Chávez Ávila Osvaldo Antonio, Fabela Galván Aarón Jhair, Jaime Villanueva Héctor Israel, y Olivares López Gerson Uriel.
Referencias
[1] V. Devedzic, Semantic Web and Education, 1a ed., Boston, USA: Springer, 2006.
[2] M.Á. López, Aprendizaje, competencias y TIC, 2a ed. CDMX, México: Pearson, 2017.
[3] J. Toro, “Con visión de futuro”, Conversus, no. 137, pp. 5-7, Mar. 2019, url: https://drive.google.com/file/d/1bHNwyuUiHB3bJdx4_hzW3dVUJFiqMvPn/view
[4] V.A. Mendoza, A.E. García, D. Reich, Física, 1 ed., CDMX, México: Patria, 2017.
[5] UNAM. “Suma vectorial.” objetos.unam.mx. http://objetos.unam.mx/fisica/sumaVectorial/index.html (accessed Jan. 14, 2021), 2021.
[6] Fundación Carlos Slim. “Despejes de fórmulas de física.” aprende.org. https://aprende.org/pages.php?r=.portada_course_view&programID=matematicas&courseID=1777&load=5154 (accessed Jan. 14, 2021), 2021.
[7] Khan Academy. “Khan Academy.” es.khanacademy.org. https://es.khanacademy.org/search?referer=%2F&page_search_query=vector (accessed Jan. 14, 2021), 2021.
[8] BYJU'S. “GeoGebra | Aplicaciones matemáticas gratuitas - Usado por más de 100 millones de estudiantes y profesores de todo el mundo.” www.geogebra. https://www.geogebra.org/?lang=en (accessed Jan. 14, 2021), 2021.
[9] University of Colorado Boulder. “PhET: Simulaciones gratuitas en línea de física, química, biología, ciencias de la tierra y matemáticas.” phet.colorado.edu. https://phet.colorado.edu/es/ (accessed Jan. 14, 2021), 2021.
[10] University of Colorado Boulder. “Vector Addition - Vectors | Vector Components | Equations - PhET Interactive Simulations.” phet.colorado.edu. https://phet.colorado.edu/en/simulation/vector-addition (accessed Jan. 14, 2021), 2021.
[11] Facebook y la comunidad de software libre. “React – A JavaScript library for building user interfaces.” reactjs.org. https://reactjs.org/ (accessed Jun.14, 2021), 2021.
[12] Apache Software Foundation. “Welcome to the Apache Struts project.” struts.apache.org. https://struts.apache.org/ (accessed Sep. 9, 2009), 2009.
[13] Oracle Corporation. “GlassFish.” javaee.github.io. https://javaee.github.io/glassfish/ (accessed Jun. 21, 2020), 2020.
[14] Oracle Corporation. “MySQL.” www.mysql.com. https://www.mysql.com/ (accessed Sep. 21, 2021), 2021.
[15] MUI. “MUI: The React component library you always wanted.” material-ui.com. https://material-ui.com/ (accessed Jan. 20, 2021), 2021.
[16] Facebook y la comunidad de software libre. “Storybook.” reactstrap.github.io. https://reactstrap.github.io/ (accessed Jan. 20, 2021), 2021.
[17] Red Hat. “Hibernate. Everything data. – Hibernate.” Hibernate.org. http://hibernate.org/ (accessed Sep. 9, 2019), 2019.