{"id":13529,"date":"2024-06-19T13:02:58","date_gmt":"2024-06-19T19:02:58","guid":{"rendered":"https:\/\/cienciauanl.uanl.mx\/?p=13529"},"modified":"2024-11-01T09:39:10","modified_gmt":"2024-11-01T15:39:10","slug":"realidad-aumentada-como-herramienta-para-el-aprendizaje-de-estructuras-de-datos","status":"publish","type":"post","link":"https:\/\/cienciauanl.uanl.mx\/?p=13529","title":{"rendered":"Realidad aumentada como herramienta para el aprendizaje de estructuras de datos"},"content":{"rendered":"
\n
\n
\n
\n

Janitzi\u0301n Ca\u0301rdenas-Castellanos* ORCID: 0000-0002-9893-6653
\n<\/span>Jazmi\u0301n Pe\u0301rez-Me\u0301ndez* <\/span>ORCID: 0000-0001-9334-9858
\n<\/span>Nadia Teresa Adaile-Beni\u0301tez* <\/span>ORCID: 0000-0002-1816-4981<\/span><\/p>\n

\n
\n
\n
\n

CIENCIA UANL \/ AN\u0303O 27, No.127, septiembre-octubre 2024<\/p>\n

DOI: https:\/\/doi.org\/10.29105\/cienciauanl27.127-6<\/a><\/p>\n

\n
\n
\n
\n

Descargar PDF<\/a><\/p>\n

RESUMEN<\/h4>\n
\n
\n
\n
\n

La innovacio\u0301n tecnolo\u0301gica en la actualidad es constante. Los me\u0301todos pedago\u0301gicos han evolucionado, torna\u0301ndose imperativa la implementacio\u0301n de herramientas modernas para facilitar y mejorar los procesos educativos. Enseguida se documenta la creacio\u0301n de una aplicacio\u0301n mo\u0301vil mediante la metodologi\u0301a Scrum, utilizando realidad aumentada con co\u0301digos QR para la asignatura de Estructura de Datos Aplicadas de la carrera de Tecnologi\u0301as de la Informacio\u0301n de una Universidad Tecnolo\u0301gica. Con la finalidad de complementar el proceso de aprendizaje de los jo\u0301venes, renovando el material dida\u0301ctico del curso, para hacerlo ma\u0301s atractivo y dina\u0301mico, aprovechando los smartphones como herramientas de aprendizaje.<\/p>\n

Palabras clave: realidad aumentada, estructuras de datos, co\u0301digo QR, tecnologi\u0301a educativa, smartphone como herramienta de aprendizaje.<\/p>\n

\n
\n
\n
\n

ABSTRACT<\/h4>\n
\n
\n
\n
\n

Technological innovation today is constant. Pedagogical methods have evolved, making it imperative to implement modern tools to facilitate and improve the educational processes. Next, the creation of a mobile application is documented through the Scrum methodo, using augmented reality with QR codes for the subject of Applied Data Structure in the Information Technology career of Technological Universities. In order to complement the learning process of young people, while we renew the didactic material for the course at the same time, making it more attractive and dynamic, benefiting from smartphones as learning tools.<\/em><\/p>\n

Keywords: augmented reality, data structures, QR code, educational technology, smartphone as a learning tool<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

\n
\n
\n
\n

La realidad aumentada (RA) es una tecnologi\u0301a que combina objetos virtuales bidimensionales o tridimensionales en un entorno tridimensional real y luego los proyecta en tiempo real (Hamzah, Rizal y Simatupang, 2021). La RA integra la informacio\u0301n digital con el entorno real en el que viven los humanos. Todo se procesa y produce en tiempo real (Ahmad y Jibril, 2021). La capacidad de fusionar el mundo fi\u0301sico con elementos virtuales proporciona una experiencia que puede estimular la interaccio\u0301n creativa y realista\u00a0(Yildirim y Baran, 2021), abriendo nuevas fronteras en la comprensio\u0301n de conceptos complejos.<\/span><\/p>\n

\n
\n
\n
\n

En los u\u0301ltimos an\u0303os se han encontrado muchas propuestas para implementar la RA en el a\u0301mbito educativo, por ejemplo: Hsu, Cheah, Hughes (2023), que documentan un caso de ensen\u0303anza de Biologi\u0301a utiliza\u0301ndola; Rassyi et al<\/em>. (2023) dictan sobre el desarrollo de medios interactivos de ensen\u0303anza basados en ella; Yaniawati et al<\/em>. (2023) relacionan su uso en el estudio de la geometri\u0301a;\u00a0Afsas (2023) reporta el mo\u0301dulo electro\u0301nico basado en medios de realidad aumentada sobre materiales magne\u0301ticos, entre muchos ma\u0301s.<\/span><\/p>\n

\n
\n
\n
\n

En la revisio\u0301n realizada por Chen, Zhou y Zhai (2023), se sugiere que la RA se ha utilizado al presentar feno\u0301menos cienti\u0301ficos y conceptos abstractos a los estudiantes en la asimilacio\u0301n de contenido (Santi et al.<\/em>, 2021; Cai et al<\/em>., 2021). La gran mayori\u0301a de los 22 arti\u0301culos revisados por los autores emplearon la RA en el ana\u0301lisis de a\u0301reas de las Ciencias Naturales, mientras que la menor parte se utilizo\u0301 al impulsar las habilidades de ana\u0301lisis y resolucio\u0301n de problemas como pieza de la instruccio\u0301n cienti\u0301fica. En otra revisio\u0301n sistema\u0301tica ejecutada por Lai y Cheong (2022) se analizaron 100 documentos, se concluyo\u0301 que las implementaciones actuales de la RA en la ensen\u0303anza, con frecuencia tienen el objetivo de mejorar los materiales dida\u0301cticos y las experiencias de formacio\u0301n, agregando que la investigacio\u0301n en educacio\u0301n debe complementarse con pruebas en entornos de ensen\u0303anza y aprendizaje, teniendo au\u0301n desafi\u0301os, por ejemplo, la necesidad de cambios ma\u0301s siste\u0301micos que las administraciones escolares deben considerar: la introduccio\u0301n del arquitecto educativo.<\/p>\n

\n
\n
\n
\n

En el a\u0301rea de estructura de datos se encontraron las siguientes iniciativas: la de Garci\u0301a et al<\/em>. (2020), quienes desarrollaron una aplicacio\u0301n que hace uso de RA en la muestra de animaciones con objetos 3D para los algoritmos de ordenamiento: Burbuja y Quicksort, y la de Di\u0301az, Franco y Martelo (2020) en la que se creo\u0301 una aplicacio\u0301n mo\u0301vil de ensen\u0303anza de estructuras de datos dina\u0301micas. En ambas producciones se destacan las ventajas de estas herramientas digitales al fortalecer el estudio de las estructuras de datos, coincidiendo con lo encontrado por Amalia et al<\/em>. (2023) y Wibowo (2023), este u\u0301ltimo reitera que la formacio\u0301n basada en RA proporciona experiencias reales en los educadores y nuevas estrategias al presentar conceptos y brindar oportunidades de que los alumnos interactu\u0301en de forma esponta\u0301nea y libre en la resolucio\u0301n de problemas, desarrollando habilidades de instruccio\u0301n independiente.<\/span><\/p>\n

\n
\n
\n
\n

METODOLOGI\u0301A<\/h4>\n
\n
\n
\n
\n

Este trabajo de investigacio\u0301n documenta el proceso de desarrollo de una aplicacio\u0301n mo\u0301vil con uso de realidad aumentada y co\u0301digos QR. Un QR es un co\u0301digo de barras bidimensional que almacena una gran cantidad de informacio\u0301n (Celik, 2023). Existen dos tipos: esta\u0301ticos y dina\u0301micos. Los primeros tienen enlaces fijos y los segundos permiten realizar cambios en el mismo co\u0301digo en diferentes momentos.<\/p>\n

La propuesta del desarrollo de la app presentada surge de la necesidad de ofrecer a los jo\u0301venes estudiantes de una Universidad Tecnolo\u0301gica material dida\u0301ctico innovador, atractivo y funcional, fundamentado en el uso de tecnologi\u0301a que permita la apropiada adecuacio\u0301n de los conocimientos de la asignatura de Estructura de Datos Aplicadas. En este trabajo se establece la creacio\u0301n de una aplicacio\u0301n mo\u0301vil con nuevos contenidos y animaciones, la cual da continuidad a un primer esfuerzo que no pudo utilizarse en aula por una dificultad al acceder y ejecutar los archivos fuente.<\/p>\n

El desarrollo de la app se llevo\u0301 a cabo bajo la metodologi\u0301a Scrum, que como modelo de creacio\u0301n de software ofrece una estructura a\u0301gil y adaptable que maximiza la eficiencia del equipo y la calidad del producto final, al tiempo que prioriza la satisfaccio\u0301n y el valor del usuario. En cuanto a las herramientas de software, se emplearon las versiones gratuitas de Unity y Vuforia. Asimismo, se utilizo\u0301 Blender, una herramienta de co\u0301digo abierto y sin costo en el segmento de la animacio\u0301n y renderizado.<\/p>\n

\n
\n
\n
\n

En tal sentido, existen algunas alternativas que tambie\u0301n se pueden usar en este tipo de desarrollos: Godot Engine (motor de juegos), ARToolKit (biblioteca de co\u0301digo abierto para aplicaciones de RA), ARCore y ARKit (plataformas nativas de Google y Apple que ayudan a desarrollar aplicaciones de AR), y por u\u0301ltimo Spark AR Studio (crea experiencias de realidad aumentada en Facebook e Instagram).<\/p>\n

\n
\n
\n
\n

Como product backlog<\/em> se definieron los siguientes requerimientos:<\/p>\n

\n
\n
\n
\n

\u2022 Una aplicacio\u0301n mo\u0301vil de RA con interfaz de inicio.<\/p>\n

\u2022 Utilizacio\u0301n de co\u0301digos QR como marcadores que mues- tren los modelos animados.<\/p>\n

\u2022 Proyeccio\u0301n de modelos 3d animado.<\/p>\n

\u2022 Interaccio\u0301n con los modelos 3d, gracias a la funcionali- dad ta\u0301ctil del Smartphone.<\/p>\n

\u2022 Emisio\u0301n de elementos sonoros sobre los tema especi\u0301ficos.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

A continuacio\u0301n se resumen las actividades realizadas en cada uno de los sprint<\/em> ejecutados:<\/p>\n

\n
\n
\n
\n

Sprint<\/em> #1. Generacio\u0301n de co\u0301digos QR<\/h4>\n
\n
\n
\n
\n

Aqui\u0301 se disen\u0303aron y produjeron los co\u0301digos QR con el fin de almacenar las ima\u0301genes en formato JPG y registrarlas en la base de datos de Vuforia. En total se crearon doce QR, correspondientes a cada modelo tridimensional a proyectar. Los co\u0301digos se produjeron desde Internet, empleando el sitio especi\u0301fico \u201cQR Code Generator\u201d.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Sprint<\/em> #2. Disen\u0303o de modelos<\/h4>\n
\n
\n
\n
\n

Esta etapa se refiere al trabajo con el disen\u0303o de los modelos, en donde se agregaron las animaciones que los integraron a Unity. Como parte de e\u0301sta se incluyo\u0301 en cada modelo un material con color base y sus animaciones respectivas.<\/p>\n

Asimismo, se crearon en Blender los objetos tridimensionales empleados en los modelos: vectores, matrices, pilas, colas, listas enlazadas y a\u0301rboles, un ejemplo de este trabajo se muestra en la figura 1.<\/p>\n

\"\"<\/a>

Figura 1. Dise\u00f1o de modelo pila (fuente: elaboraci\u00f3n propia).<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Sprint<\/em> #3. Programacio\u0301n de scripts<\/em><\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

En e\u0301ste se codifico\u0301 la interaccio\u0301n con los objetos previamente creados, para tener la capacidad de rotar los modelos segu\u0301n el desplazamiento de los dedos sobre la pantalla. Con el objetivo de programar el script<\/em> en C# y controlar la rotacio\u0301n de los objetos mediante el desplazamiento ta\u0301ctil sobre la pantalla, se creo\u0301 otro llamado \u201cRotarObjeto\u201d, posteriormente en el del IDE de Visual Studio se codifico\u0301 para detectar los toques en la pantalla y traducir el tipo de e\u0301ste, si es de\u00a0\u201cMoved\u201d, procede a determinar si el cambio de la posicio\u0301n es sobre el eje x, si es positivo o negativo. Deduciendo el sentido en el que se rotara\u0301 (izquierda o derecha).<\/span><\/p>\n

\n
\n
\n
\n

Sprint<\/em> #4. Generacio\u0301n de audios<\/h4>\n
\n
\n
\n
\n

Con e\u0301ste se integra una voz que describe informacio\u0301n esencial de la estructura que se muestra en la animacio\u0301n, fortaleciendo la usabilidad y ofreciendo al usuario distintos esti\u0301mulos en un mismo contenido, se empleo\u0301 la aplicacio\u0301n web \u201cTexto a voz espan\u0303ol gratis\u201d, para grabar audios en formato MP3. Este proceso se desarrollo\u0301 una vez por cada objeto, resultando un total de doce archivos.<\/p>\n

\n
\n
\n
\n

Sprint<\/em> #5: Disen\u0303o de interfaz<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

La tarea central fue crear el menu\u0301 principal, se determinaron tres botones, asi\u0301 como un ti\u0301tulo y un fondo de interfaz. Se creo\u0301 la escena \u201cMenu\u0301\u201d, donde se disen\u0303o\u0301 la interfaz de bienvenida y los botones de inicio de escaneo, descargar co\u0301digos QR y salir.<\/p>\n

\"\"<\/a>

Figura 2. Interfaz gr\u00e1fica de inicio (fuente: elaboraci\u00f3n propia).<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Sprint<\/em> #6: Programacio\u0301n de la interfaz<\/h4>\n
\n
\n
\n
\n

El trabajo efectuado aqui\u0301 fue la programacio\u0301n de los botones del menu\u0301 que activan el esca\u0301ner, descargan el documento con los co\u0301digos o salir. Los scripts<\/em> se crearon en C# con lo que se habilitan funciones del tipo cambiar de escena, comenzar a escanear, descargar co\u0301digos QR y cerrar.<\/p>\n

\n
\n
\n
\n

RESULTADOS<\/h4>\n
\n
\n
\n
\n

A manera de resultado se presenta la aplicacio\u0301n mo\u0301vil planteada en el inicio de la investigacio\u0301n. En el menu\u0301 principal se encuentran tres botones:<\/p>\n

\n
\n
\n
\n