Post on 19-Sep-2020
La realidad aumentada en la educación: usabilidad y ejemplos de
su aplicación
Memoria de Proyecto Final de Grado
Grado Multimedia
Usabilidad e interfaces
Autor: Alfonso Gustavo Chico Fernández de Terán
Consultor: Judit Casacuberta Bagó
Profesor: Ferrán Gimenez Prado
Fecha de entrega: 16-6-19
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
2 / 69
Copyright
Esta obra está sujeta a una licencia de Reconocimiento-NoComercial-
SinObraDerivada 3.0 España de Creative Commons
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
3 / 69
Abstract
La realidad aumentada, por su naturaleza, ofrece numerosas ventajas para mejorar los procesos de
enseñanza-aprendizaje en muchas áreas del conocimiento. No obstante, no se ha generalizado su uso en la
práctica educativa, debido sobre todo a razones de índole económico y de usabilidad. La generalización del
uso de dispositivos móviles con la potencia de cálculo suficiente, y el desarrollo de tecnologías como WebAR,
que facilitan la utilización del navegador como visor, ofrecen la posibilidad de integrar por fin la realidad
aumentada como una herramienta más en entornos educativos reales.
Este proyecto explora las posibilidades de esta tecnología en la educación desde una perspectiva
práctica, haciendo hincapié en mejorar su usabilidad e implementando ejemplos prácticos que demuestran su
utilidad.
Palabras clave: realidad aumentada, usabilidad, educación, WebAR, herramientas educativas, aprendizaje.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
4 / 69
Abstract (english version).
Augmented reality, by its nature, offers numerous advantages to improve teaching-learning procedures in
many areas of knowledge. However, its use in educational practice has not been generalized, mainly due to
economic and usability reasons. The generalization of the use of mobile devices with sufficient computing
power, and the development of technologies such as WebAR, which facilitates the use of the browser as a
viewer, offers the possibility of finally integrating augmented reality as a tool in real-world educational
environments.
This project explores the possibilities of such technology in education from a practical perspective,
with a focus on improving its usability and implementing practical examples that demonstrates its usefulness.
Keywords: augmented reality, usability, education, WebAR, educational tools, learning.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
5 / 69
Índice
1. Introducción .................................................................................................................................................... 8
2. Descripción ..................................................................................................................................................... 9
3. Objetivos ....................................................................................................................................................... 10
3.1 Principales .............................................................................................................................................. 10
3.2 Secundarios ............................................................................................................................................ 10
4. Marco teórico/Escenario ............................................................................................................................... 11
4.1. Realidad aumentada: antecedentes y modalidades ............................................................................. 11
4.2. La realidad aumentada en la educación: escenario actual ................................................................... 12
5. Contenidos ................................................................................................................................................... 14
6. Metodología .................................................................................................................................................. 15
7. Arquitectura de la aplicación ........................................................................................................................ 16
8. Plataforma de desarrollo .............................................................................................................................. 17
8.1. Software ................................................................................................................................................. 17
8.2. Hardware ............................................................................................................................................... 17
8.3. Otros ...................................................................................................................................................... 17
9. Planificación ................................................................................................................................................. 18
10. Proceso de trabajo ..................................................................................................................................... 20
10.2. PEC2: investigación y concepción del producto ................................................................................. 20
10.3. PEC3: diseño y creación de los contenidos ........................................................................................ 24
10.4. Entrega final: implementacion ............................................................................................................. 27
12. Prototipos ................................................................................................................................................... 29
12.1. Visor 3d de realidad aumentada .......................................................................................................... 29
12.2. Marcador 3d en realidad aumentada................................................................................................... 30
12.3. Reproductor 3d en realidad aumentada .............................................................................................. 34
12.4. Visor de acordes de guitarra en realidad aumentada ......................................................................... 35
13. Guiones ...................................................................................................................................................... 37
13.1. Materiales educativos del tipo “libro mágico” ...................................................................................... 37
13.2. Visor de acordes de guitarra en realidad aumentada ......................................................................... 40
14. Perfiles de usuario ...................................................................................................................................... 41
15. Usabilidad/UX ............................................................................................................................................. 42
16. Seguridad ................................................................................................................................................... 43
17. Tests ........................................................................................................................................................... 44
18. Versiones de la aplicación/servicio ............................................................................................................ 46
19. Requisitos de implantación y uso ............................................................................................................... 47
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
6 / 69
19.1. Requisitos de implantacion .................................................................................................................. 47
19.2. Requisitos de uso ................................................................................................................................ 47
20. Instrucciones de implantación .................................................................................................................... 48
21. Instrucciones de uso .................................................................................................................................. 49
22. Bugs............................................................................................................................................................ 50
23. Proyección a futuro..................................................................................................................................... 51
24. Conclusiones .............................................................................................................................................. 52
Anexo 1. Entregables del proyecto .................................................................................................................. 53
Anexo 2. Código fuente (extractos) .................................................................................................................. 56
Anexo 3. Librerías/Código externo utilizado .................................................................................................... 57
Anexo 4. Capturas de pantalla ......................................................................................................................... 58
Anexo 5. Guía de usuario ................................................................................................................................. 64
Anexo 6. Glosario ............................................................................................................................................. 66
Anexo 7: encuesta realizada a profesores ....................................................................................................... 67
Anexo 8. Bibliografía ........................................................................................................................................ 68
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
7 / 69
Figuras
Índice de figuras
Figura 1: Continuo de la realidad mixta .............................................................................................................................. 11
Figura 2: Diagrama de Gantt .............................................................................................................................................. 18
Figura 3: códigos de marcas integrados ............................................................................................................................. 22
Figura 4: códigos de marcas separados ............................................................................................................................. 22
Figura 5: diseño de marca sencilla ..................................................................................................................................... 26
Figura 6: marca sin simetría radial ..................................................................................................................................... 26
Figura 7: diferentes diseños de marcas .............................................................................................................................. 26
Figura 8: Maqueta funcional del visor 3D ........................................................................................................................... 29
Figura 9: interfaz final del visor 3D ..................................................................................................................................... 29
Figura 10: maqueta funcional del marcador 3D .................................................................................................................. 30
Figura 11: marca de 6cm, movil ......................................................................................................................................... 31
Figura 12: marca de 6cm, tablet ......................................................................................................................................... 32
Figura 13: marca de 2cm, movil ......................................................................................................................................... 33
Figura 14: maqueta funcional del reproductor 3D .............................................................................................................. 34
Figura 15: maqueta funcional del visor de acordes ............................................................................................................ 35
Figura 16: utilizando el visor de acordes ............................................................................................................................ 35
Figura 17: wireframe con la interfaz de usuario del visor de acordes ................................................................................ 36
Figura 18: implementación final de la aplicación ................................................................................................................ 36
Figura 19: estructura de la aplicacion “libro mágico de la célula” ....................................................................................... 37
Figura 20: estructura de la aplicación "visor de acordes" ................................................................................................... 40
Figura 21: Montaje para los test locales ............................................................................................................................. 44
Figura 22: Modelado de la célula en 3D en Blender........................................................................................................... 58
Figura 23: Diseño y creación del icono de la marca de AR 3D chords en Adobe Illustrator .............................................. 58
Figura 24: Diseño y creación de la marca de AR 3D chords en Adobe Photoshop ........................................................... 59
Figura 25: Diseño y creación de los diagtramas de acordes en Adobe Illustrator.............................................................. 59
Figura 26: Diseño y creación de la interfaz de usuario de AR 3D chords en Omnigraffle.................................................. 60
Figura 27: Creación y rotulado de los gráficos de la célula en Omnigraffle ....................................................................... 60
Figura 28: Creación de las marcas del magic book en Adobe Photoshop ......................................................................... 61
Figura 29: Edición y rotulación del video en Final Cut Pro ................................................................................................. 61
Figura 30: Conversión y compresión del video en Compressor ......................................................................................... 62
Figura 31: Captura y recorte de las imágenes de la mitosis en Capto ............................................................................... 62
Figura 32: Redacción de los contenidos textuales en Ulysses........................................................................................... 63
Figura 33: Diseño y maquetación de los contenidos de las páginas físicas en un editor de textos ................................... 63
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
8 / 69
1. Introducción
Tras algo más de 15 anos dando clases de tecnologia aplicada a la música a estudiantes y profesores he
podido experimentar, tanto en primera persona como a través de las experiencias de otros docentes,
diferentes aproximaciones respecto de la utilización de la tecnologia en la educacion. Algunos de estos
enfoques, en los que el planteamiento es utilizar la tecnologia más como un fin que como un medio, no
contribuyen a conseguir un aprendizaje significativo en el alumno; más aun, la tecnologia llega a convertirse
en un obstáculo para la ensenanza.
Por otra parte, cuando el enfoque parte de utilizar la tecnologia como una herramienta, ajustando su uso
a las tareas más adecuadas, el proceso de ensenanza-aprendizaje puede verse enormemente facilitado. En
estos casos la tecnologia suele cumplir tres funciones basicas:
• Motivacional, al despertar en el alumno el deseo de realizar las tareas que involucran el uso de la
tecnologia.
• Facilitadora, al hacer más sencilla la realizacion de determinadas tareas que resultan más difíciles
sin su uso.
• Posibilitadora, al permitir la realizacion de tareas que no son posibles sin utilizar dicha tecnologia.
En este sentido, la realidad aumentada (RA en adelante) es una tecnologia especialmente capaz de
cumplir estas tres funciones: despierta la curiosidad y fomenta el descubrimiento, facilita anadir capas extra
de información virtual interrelacionada y localizada en un entorno real y posibilita nuevas tareas como acceder
y manipular modelos 3D. Tanto es asi que, ya desde el siglo pasado, se ha investigado acerca de sus
posibilidades educativas, aunque las dificultades tecnologicas y el alto coste de los dispositivos necesarios
hicieron que su uso en la práctica educativa real fuese anecdotico.
En la actualidad, la popularizacion de los dispositivos moviles y el aumento de potencia de los mismos,
junto con el avance de tecnologias como WebAR, que permiten utilizar el navegador junto con la cámara del
movil como visor de RA, hacen posible plantearse un uso práctico de esta tecnologia en la educacion. No
obstante, para que este uso facilite el proceso de ensenanza-aprendizaje es preciso establecer y definir las
tipologias de experiencias RA más adecuadas considerando su uso educativo y las características
diferenciadoras de esta tecnología, al igual que cuidar la usabilidad de su aplicación.
Asi, en este trabajo de fin de grado me propongo explorar las posibilidades de la RA en la educacion,
desde el punto de vista de su uso práctico, e implementar ejemplos de su aplicacion que demuestren su
efectividad. Al mismo tiempo, mi intencion es que el resultado de este trabajo sirva también para sentar las
bases del futuro desarrollo de una herramienta de autor que facilite la creacion de experiencias de RA por
parte de los docentes (o cualquier otra persona) sin experiencia en programacion.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
9 / 69
2. Descripción
La realidad aumentada es una tecnologia que posee las siguientes caracteristicas (Azuma, 1997):
• Combina objetos reales y objetos virtuales que coexisten en un entorno compartido.
• Facilita a los usuarios algun grado de interacción con los objetos virtuales
• Permite que los objetos virtuales puedan estar alineados espacialmente con los objetos reales.
Esto puede aportar una serie de ventajas a la hora de utilizar la RA en la transmision de conocimientos,
ya que se facilita la adaptación y la contextualización de los contenidos (Miglino & Walker, 2010; Roblyer et
al., 2006). Concretamente, se ha determinado (Radu, 2012; Radu, 2014) que el aprendizaje con RA tiene un
impacto positivo en el incremento de la comprension del contenido, el aprendizaje de estructuras espaciales,
asociaciones linguisticas, memoria a largo plazo y motivacion.
No obstante, diferentes estudios (Radu, 2012; Radu, 2014) han determinado que su uso educativo
conlleva también algunos efectos negativos, como la “vision tunel”1, dificultades de usabilidad o integración
poco efectiva en el aula, entre otros. Estos problemas pueden estar causados, en gran medida, por varios
factores:
• La utilizacion de visores (head mounted displays) de relativo gran peso y tamano que dificultan y
encarecen el acceso a la experiencia de RA.
• La necesidad de comprar/instalar software especifico no universal.
• El diseno ineficaz de las experiencias de RA en relacion a la práctica educativa real y la dificultad de
los docentes para elaborar materiales adaptados a su metodologia de ensenanza.
En el presente trabajo se intentarán solventar en cierta medida estos problemas combinando el uso de
dispositivos moviles con tecnologias de RA a través del navegador, a la vez que utilizando una metodologia
de diseno centrado en el usuario que permita mejorar la usabilidad de las experiencias de RA.
Asi, en una primera fase, se concretarán los ámbitos educativos más adecuados para el uso de la RA
como herramienta, se establecerán las tipologias de experiencias RA (videos, tooltips, modelos 3d, etc.) más
adecuadas considerando su uso educativo y se realizará el diseno de la interfaz de cada una de las tipologias
seleccionadas.
En una segunda fase se seleccionarán algunos ejemplos de aplicacion en diversas materias y se
disenarán y crearán los contenidos necesarios para desarrollar una aplicacion de RA.
Por ultimo, en la tercera fase del proyecto se implementará y se desarrollará la aplicación utilizando las
tecnologias descritas.
1 Perdida momentánea de la visión periférica (VVAA, 2019).
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
10 / 69
3. Objetivos
3.1 Principales
• Explorar las posibilidades de la realidad aumentada en la educacion.
• Mejorar la usabilidad de las experiencias de realidad aumentada aprovechando
tecnologias como WebAR y los codigos QR.
• Implementar ejemplos de realidad aumentada aplicados a diferentes materias
Educativas.
3.2 Secundarios
• Establecer las bases para el desarrollo de una herramienta de autor destinada al profesorado.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
11 / 69
4. Marco teórico/Escenario
4.1. Realidad aumentada: antecedentes y modalidades
Aunque las primeras manifestaciones de RA se remontan a la década de 1950, con el sensorama de Morton
Heiling, el término “realidad aumentada” fue introducido por Tom Caudell a principios de la década de 1990
(Yilmaz, 2018). Forma parte de un conjunto más amplio experiencias que Paul Milgram llamo “realidad mixta”
(Milgram & Kishino, 1994), y que ordeno en función del grado de importancia que tenía su grado de realidad
o virtualidad.
Asi, estos autores propusieron un eje que iba desde las experiencias situadas en el “entorno real” (la
visión o percepción de las imágenes reales) hasta aquellas situadas en el “entorno virtual” (la visión de objetos
generados de forma artificial). La realidad aumentada estaría situada en el extremo más cercano a la realidad:
Figura 1: Continuo de la realidad mixta
A finales de los años noventa la RA se convirtio en un campo autónomo de investigación, con simposios
internacionales como el International Workshop and Symposium on Augmented Reality o el International
Symposium on Mixed Reality, y con organizaciones dedicadas como el Mixed Reality Systems Laboratory
(MRLab) de Japon y el Arvika consortium de Alemania.
Fruto de esta evolución surgieron diferentes modalidades de RA (Yilmaz, 2018); en función de cómo se
vincula la información digital al mundo real podemos distinguir:
• RA basada en reconocimiento de superficies. El sistema genera en tiempo real un modelo
volumétrico basado en las imágenes del mundo real captadas por la cámara, identificando las
superficies sobre las que situar los objetos virtuales. ARKit de Apple o ARCore de Google utilizan esta
modalidad.
• RA geoposicionada. Los objetos virtuales se asocian a coordenadas geográficas del mundo real. Un
popular ejemplo de esta modalidad es el juego “Pokémon Go!”.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
12 / 69
• RA basada en reconocimiento de marcas. Los objetos virtuales se asocian a unas marcas visuales
concretas; la posición, escala y orientación de estas marcas en el mundo real determina la posición,
escala y orientación de los objetos virtuales. Vuforia o ARToolKit son tecnologías que utilizan esta
modalidad de RA.
Por otra parte, considerando el tipo de visualización podemos distinguir entre:
• RA por superposición óptica. Los objetos virtuales se superponen a la imagen procedente
directamente del mundo físico con un sistema de miniproyectores combinados con espejos. Es el
sistema utilizado en visores como las Google Glass, por ejemplo.
• RA holográfica. Utilizada en visores de última generación (como Hololens o MagicLeap) permite
mejorar la opacidad de los objetos virtuales sobre los físicos mejorando su integración.
• RA por superposición digital. El sistema combina digitalmente los objetos virtuales y la imagen real
captada por una cámara, mostrando el resultado en una pantalla. Es la modalidad utilizada por las
aplicaciones de RA de ordenador o dispositivos móviles.
4.2. La realidad aumentada en la educación: escenario actual
Desde sus orígenes la RA ha sido considerada como una herramienta útil a la hora de adquirir conocimientos
de determinadas áreas, por lo que no es de extrañar que se haya publicado una cantidad considerable de
literatura relacionada con la aplicación de la RA en contextos educativos (Bacca et al., 2014), hasta el punto
de que incluso nos encontramos con estudios dedicados a revisar los artículos más importantes existentes y
extraer conclusiones en base a su análisis (Martin et al., 2011; Radu, 2012; Radu, 2014; Santos et al., 2014).
Las principales conclusiones de estos “meta-estudios” acerca del escenario actual son las siguientes
(Bacca et al., 2014):
• A pesar de que el número de artículos muestra una tendencia a incrementarse, la RA en la educación
esta aún en sus etapas iniciales. La tendencia (al menos en educación) es el incremento en la
utilización de dispositivos móviles frente a otro tipo de visores dedicados. (Martin et al., 2011)
• En cuanto a las áreas educativas en la que se aplica de forma efectiva la RA, las predominantes
son las disciplinas relacionadas con las ciencias (matemáticas y geometría, biología, y en general
aquellos campos en los que es difícil visualizar determinadas cosas en el mundo real sin un dispositivo
especializado), seguidas por humanidades y artes.
• En relación con el nivel educativo, la RA se aplica sobre todo en educación superior, seguido de
educación secundaria y primaria.
• La principal modalidad utilizada, con relación al método de vinculación, es la basada en
reconocimiento de marcas.
• Hay tres tipos principales de material educativo basado en RA que han demostrado su efectividad
(Santos et al., 2014): los libros mágicos (libros físicos a los que se añaden contenidos virtuales), los
artefactos de aprendizaje (objetos reales con información virtual) y los contenidos educativos
geolocalizados (espacios físicos en los que se insertan objetos virtuales). Los investigadores
consideran que los primeros son una de las mejores maneras de introducir la RA en la educación.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
13 / 69
Por otra parte, y considerando los dispositivos utilizados para visualizar, Santos et al. (2014) proponen una
categorización muy interesante, agrupándolos en aquellos que utilizan la metáfora del espejo (al mostrar
una perspectiva en tercera persona en la que el usuario se convierte en un observador de si mismo) y los que
usan la metáfora de las gafas (mostrando una perspectiva en primera persona, de forma que el usuario
puede ver los que está delante suya).
Por último, en muchos estudios se subraya de qué forma y porqué las características diferenciales de
RA pueden ser beneficiosas para el aprendizaje, en base a distintas teorías cognitivas y pedagógicas. Asi,
Santos et al. (2014) establecen tres formas de usar la RA para mejorar la experiencia educativa:
1. Anotacion del mundo real (Real world annotation). Consiste en la yuxtaposición de objetos reales y
objetos virtuales que aportan información a los primeros. Por ejemplo, una aplicación que resalta las
teclas a tocar en el piano. Reduce la carga cognitiva mejorando la percepción.
2. Visualización contextual (Contextual visualization). La información virtual se presenta
contextualizada en el entorno real. Por ejemplo, una aplicación que muestra en otro idioma el nombre
de los objetos. Mejora la etapa de elaboración en el aprendizaje al facilitar la creación de asociaciones.
3. Visualización tacto-visual (Vision-haptic visualization). Consiste en la integración del sentido de la
vista y el sentido del tacto a la hora de percibir la información virtual. Por ejemplo, una aplicación que
presenta un objeto virtual que el usuario puede rotar y mover para inspeccionarlo. Mejora la etapa de
elaboración gracias a la personificación de la representación del objeto virtual.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
14 / 69
5. Contenidos
En base a lo expuesto en los apartados anteriores, el presente trabajo consistirá en el diseño de cuatro
tipologías de experiencias de RA con las siguientes características:
• Que estén concebidas partiendo de la usabilidad.
• Que utilicen la RA basada en reconocimiento de marcas, dado que:
1. A diferencia de otras modalidades, aporta una referencia real (la marca) de la experiencia
virtual.
2. Es la principal modalidad utilizada según la literatura consultada.
• Que tengan unos requerimientos mínimos, esto es, que sean compatibles con diferentes dispositivos
y no requieran de la instalación de una aplicación para su funcionamiento.
• Que sean representativas de las diferentes metáforas y usos que han probado su efectividad según
la literatura consultada.
Asi, y teniendo en cuenta también los resultados de las encuestas y entrevistas con profesores realizadas en
la primera fase del proyecto, las cuatro experiencias a diseñar serán las siguientes:
• Visor 3d de realidad aumentada. Aplicación web que permite visualizar y manipular (rotar, cambiar
de tamaño y animar) un objeto virtual que se muestra en el mundo real utilizando un dispositivo móvil.
Sería una forma de uso de tipo “visualización tacto-visual” que usaría la metáfora de las gafas.
• Marcador 3d en realidad aumentada. Aplicación web que permite asociar etiquetas textuales a
ubicaciones físicas reales en base a marcas utilizando un dispositivo móvil. Sería una forma de uso
de tipo “anotación del mundo real” que usaría también la metáfora de las gafas.
• Reproductor 3d en realidad aumentada. Aplicación web que permite reproducir videos y
animaciones integrándolos en una imagen real a través de un dispositivo móvil de forma que,
aparentemente, cobre vida. Sería una forma de uso de tipo “visualización contextual” que usaría
también la metáfora de las gafas.
• Visor de acordes de guitarra en realidad aumentada. Aplicación web que muestra la posición en
la que deben pisar los dedos en el mástil de una guitarra para aprender los acordes básicos, utilizando
un ordenador con webcam. Sería una forma de uso de tipo “ anotación del mundo real” que usaría la
metáfora del espejo.
En una segunda fase se desarrollarán ejemplos concretos de aplicación pedagógica de las tres primeras
experiencias creando material educativo del tipo “libro mágico”.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
15 / 69
6. Metodología
Dado que uno de los objetivos principales del presente trabajo es mejorar la usabilidad, para el desarrollo del
proyecto se intentará seguir el enfoque conocido como diseno centrado en el usuario (DCU), que consisten
en orientar todo el proceso de diseno hacia las necesidades y objetivos del usuario del producto a desarrollar,
lo que incide en mejorar la experiencia final de uso con el mismo.
El DCU se basa en varias etapas que se desarrollan de forma iterativa. Para este proyecto se usará un
modelo de cinco etapas:
• Etapa 1: investigacion. Como ya se ha expuesto, se comenzará investigando con objeto de
concretar las tipologias de experiencias de RA y los ámbitos educativos más adecuados para el uso
de la RA como herramienta en la educacion. Para ello se realizarán encuestas y entrevistas entre
profesionales de la educacion, lo que se complementará con la revision de la literatura y aplicaciones
existentes más relevantes.
• Etapa 2: Definicion. A partir de las conclusiones extraidas de los resultados de la fase anterior
pasaremos a definir los ámbitos y tipologias a utilizar, asi como a seleccionar las aplicaciones de
ejemplo a desarrollar.
• Etapa 3: Generacion. Una vez definido el ámbito, se procederá a disenar la interfaz de las tipologias
seleccionadas y las aplicaciones utilizando técnicas como el prototipado. Al mismo tiempo, se
generarán los contenidos necesarios para implementar la aplicación.
• Etapa 4: Evaluacion. Se irá comprobando si las soluciones disenadas responden a las necesidades
detectadas en los usuarios utilizando técnicas como el test con usuarios o la evaluacion heuristica.
Las etapas de generacion y evaluación serán iterativas, testeándose primero los prototipos de las
interfaces para ir redisenando en funcion de los resultados de la evaluacion.
• Etapa 5: Produccion. Finalmente, se implementará la aplicacion disenada.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
16 / 69
7. Arquitectura de la aplicación
• Cliente. Aplicacion web desarrollada con HTML, CSS y javascript.
• Servidor. No se utiliza backend.
• Base de datos. No se utilizan.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
17 / 69
8. Plataforma de desarrollo
8.1. Software
• Visual Studio Code. Utilizado como editor principal de codigo.
• Navegadores Safari, Chrome y Mozilla Firefox. Para la realizacion de pruebas de funcionalidad.
• MAMP. Utilizado para la creacion de un servidor local.
• Adobe Photoshop. Para la elaboracion y edicion de las marcas, las hojas de marcas y demás
elementos gráficos.
• Adobe Illustrator. Usado en la creación y diseño de las imágenes personalizadas de las marcas,
de los diagramas de acordes y demás elementos gráficos vectoriales.
• OmniGraffle. Empleado en el diseño de la interfaz de usuario y en la rotulación de los gráficos de la
célula.
• Capto. Utilizado para elaborar las imágenes de la mitosis a partir del video y para realizar capturas
de pantalla.
• Final Cut Pro y Compressor. Usados en la edición, rotulación, compresión y exportación del video
de la mitosis.
• Ulysses. Empleado para redactar los contenidos textuales de los materiales.
• Pages. Usado en la maquetación de los materiales impresos.
8.2. Hardware
• MacBook Pro. Ordenador de desarrollo.
• iPad y iPhone. Para realizar las pruebas.
• Webcam USB. Conectada al ordenador principal para realizar las pruebas.
8.3. Otros
• Github. Alojamiento del código y servidor web online de pruebas.
• QR code generator (https://www.the-qrcode-generator.com). Para generar los códigos QR.
• MSDF font generator (https://msdf-bmfont.donmccurdy.com). Para generar las bmfonts.
• AR.js marker training (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-
training/examples/generator.html) Para generar las marcas personalizadas.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
18 / 69
9. Planificación
Las etapas expuestas en el apartado de metodología se han repartido en tres fases, que coinciden con los
plazos de las entregas de las PEC establecidos en la asignatura, tal y como se muestra en el diagrama de
Gantt (Figura 2):
Figura 2: Diagrama de Gantt
Las tareas detalladas serían las siguientes:
1. PEC2: investigación y concepción del producto
1.1. Concretar el ámbito del proyecto. Realizar encuestas/entrevistas con profesores acerca del
potencial de la RA en las asignaturas que imparten y revisar la principal literatura existente al respecto
para determinar el ámbito concreto de la aplicación de RA.
1.2. Establecer las tipologías AR. Determinar las distintas tipologías de experiencias AR a utilizar
en el proyecto (video, imágenes con tooltips, animaciones, modelos 3D, etc.), teniendo en cuenta el
uso educativo dentro del ámbito seleccionado, las posibilidades técnicas de implementación y las
consideraciones derivadas de la usabilidad del producto.
1.3. Diseñar la interfaz para cada tipología. Diseñar y crear un prototipo de la interfaz de cada una
de las tipologías seleccionadas, asi como realizar las pruebas oportunas para asegurar su
funcionalidad.
Los puntos 2 y 3 pueden comenzar a desarrollarse en paralelo con el 1, sobre todo la parte
tecnológica, aunque requieren de la concreción del ámbito para la elaboración de los prototipos.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
19 / 69
1.4. Revisar y avanzar la documentación. Revisar y actualizar la memoria del proyecto conforme
se indica en el enunciado de la PEC2.
2. PEC3: diseño y creación de los contenidos
2.1. Crear el guion multimedia. Seleccionar las aplicaciones de ejemplo a desarrollar y concebir la
páginas a incluir en el producto, diseñando la experiencia AR para cada página.
2.2. Diseñar/crear los contenidos de las páginas físicas. Generar todos lo contenidos a incluir en la
páginas físicas (textos, gráficos, imágenes, etc.) y realizar el diseño de las mismas (tipografías,
maquetación, etc.), incluyendo el diseño de los códigos AR.
2.3. Diseñar/crear los elementos virtuales. Generar todos los elementos virtuales necesarios para las
experiencias AR diseñadas (modelos 3d, tooltips de texto, videos, etc.).
2.4. Revisar y avanzar la documentación. Revisar y actualizar la memoria del proyecto conforme se
indica en el enunciado de la PEC3.
3. Entrega final: implementacion
3.1. Integrar elementos virtuales y físicos. Realizar la integración de los elementos virtuales y físicos
mediante la programación de la aplicación web.
3.2. Finalizar programación, probar y alojar las aplicaciones web. Realizar test sobre el código,
corregir errores y alojar en servidor público.
3.3. Finalizar edición y maquetación de las páginas físicas. Integrar los códigos AR de producción
asociados con las aplicaciones web en las páginas físicas, revisar la edición y maquetación y generar los
entregables, tanto físicos como electrónicos.
3.4. Finalizar la documentación. Finalizar la memoria, redactar el autoinforme de evaluación y elaborar
las presentaciones. Publicar el proyecto en el repositorio.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
20 / 69
10. Proceso de trabajo
10.2. PEC2: investigación y concepción del producto
10.2.1. Concrecion del ambito
Se comenzo revisando la principal literatura relacionada, buscando articulos relacionados tanto en Google
académico como en la biblioteca de la UOC. Ante la cantidad de literatura existente se realizó un proceso de
filtrado, priorizando los articulos más citados en Google Scholar y en los meta-estudios existentes. El resultado
de esta revision se ha plasmado en el apartado 4 de este trabajo.
A partir de las conclusiones obtenidas se elaboro una breve encuesta, adjunta en el anexo 9, con objeto
de recabar la opinion de profesores acerca del uso práctico de la RA en las aulas y realizar una primera toma
de contacto con la realidad de las mismas. La encuesta se realizo a un total de 11 profesores de distintos
niveles educativos, y sirvio de base para realizar una entrevista informal en torno al tema a cada uno de los
participantes. Las conclusiones obtenidas a partir de estas encuestas/entrevistas son las siguientes:
• El uso de dispositivos moviles en ninos de corta edad no resulta recomendable. Puede ser oportuno
un uso puntual para este tipo de actividades con la supervision de los padres a partir de los ultimos
cursos de primaria, y de forma autonoma a partir de los 14 o 15 anos (3º- 4º de ESO).
• Las aulas habituales de clase no son el lugar más adecuado para realizar actividades que impliquen
el uso de dispositivos moviles, al menos en aquellos centros educativos en los que su uso no está
aun normalizado.
• Las áreas de conocimiento que pueden beneficiarse de esta tecnologia serian, a priori, biologia
seguido de musica, matemáticas y geometria.
• Por otra parte, los “libros mágicos” y el uso descrito como “anotacion del mundo real” en el apartado
4 de este trabajo fueron considerados como muy adecuados para el aprendizaje por muchos de los
profesores entrevistados.
En base a los resultados obtenidos se decidio que los ejemplos a implementar pertenecerian a los ámbitos
de la biologia y de la musica.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
21 / 69
10.2.2. Establecimiento de las tipologias
De forma paralela a las actividades anteriores se exploraron las posibilidades técnicas de implementacion en
base a los requisitos establecidos (aplicacion web basada en marcas). De todas las alternativas consideradas
se opto por utilizar la libreria ARToolKit.js para gestionar a parte de integracion con la cámara y gestion de
las marcas, Tree.js a través de A- Frame para la creacion y visualizacion de los objetos virtuales y AR.js para
integrar A-frame con ARToolkit. Esta combinacion de librerias ofrece las siguientes ventajas:
• Se trata de software libre
• No requieren instalar ningun programa
• Tienen una compatibilidad amplia, y funcionan incluso en dispositivos no muy potentes.
No obstante, a la hora de implementar las maquetas funcionales he encontrado algunos problemas:
• Resulta complicado manejar objetos 3D generados con animaciones con programas como Blender.
Al final se encontro solucion a través de otra libreria adicional.
• Three.js utiliza un tipo de fuente de texto especial denominado bmfont, y las tipografias por defecto
no incluyen caracteres imprescindibles como las vocales acentuadas. Ha sido necesario generar una
tipografia de este tipo con una aplicacion web utilizando un juego de caracteres de la fuente Open
Sans Regular. El dar formato al texto resulta a su vez dificil.
• El codigo javascript debe ser incrustado en el sistema de componentes de A- Frame, por lo que el
desarrollo de las aplicaciones resulta ser diferente de lo habitual.
• Dependiendo del tamano y la iluminacion de las marcas utilizadas la ubicacion de los elementos
virtuales puede ser inestable.
Tras explorar las posibilidades técnicas, y teniendo en cuenta el uso educativo dentro de los ámbitos
seleccionados en el punto anterior, se establecieron las tipologias expuestas en el apartado 5 de este trabajo.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
22 / 69
10.2.3. Diseno de la interfaz para cada tipologia
Para abrir la aplicacion web asociada a la marca de cada una de las experiencias se opto por utilizar codigos
QR. Esto facilita el acceso a la experiencia de RA ya que los pasos necesarios serian los siguientes:
1. Se escanea el codigo QR con la cámara del dispositivo movil (no es necesario instalar ninguna
aplicacion extra, tan solo abrir la cámara) y se accede a la web sugerida
2. Se permite el uso de la cámara del movil en el navegador en la ventana emergente (es una restriccion
de seguridad) y se apunta a la marca.
Se ha experimentado con distintas disenos para integrar las dos marcas, integradas en un solo elemento y
separadas:
Figura 3: códigos de marcas integrados
Figura 4: códigos de marcas separados
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
23 / 69
La primera opcion resulta más usable, ya que hay un solo elemento gráfico al que apuntar la cámara para
comenzar y continuar la experiencia; no obstante, solo funciona bien cuando tiene un tamano considerable.
La segunda opcion presento un problema de usabilidad en los test de usuario realizados, ya que el orden
de las marcas no sigue el orden de escaneo (los usuarios tendian a escanear primero la marca de la
izquierda).
A partir de ahi se procedio a crear una maqueta funcional de cada una de las aplicaciones para realizar
test de funcionamiento. El diseno de cada una de las interfaces fue deliberadamente simplificado para poder
centrarse en la funcionalidad y no en la estética (pueden verse imágenes en el apartado 12). Sobre esta
maqueta se procedio a realizar un test de usuarios inicial para evaluar la funcionalidad del que se obtuvieron
las siguientes conclusiones:
• Es preciso aumentar el tamano de la tipografia en general
• Cuando se usan las marcas separadas, el codigo QR debe estar a la izquierda
• En el Visor 3d de realidad aumentada:
• Los botones son demasiado pequenos
• Es preciso ajustar la respuesta del control de rotacion para que tenga más efecto en el
modelo y pueda usarse en los dos sentidos sin levantar el dedo
• Seria más adecuado usar un control tipo slider para la rotacion y el zoom
• Con el movil en forma apaisada queda poco espacio vertical para visualizar el modelo
• En el Marcador 3d en realidad aumentada:
• Hay que mejorar la precision en la ubicacion de las marcas y la oscilacion de la posicion.
• Cuando la marca está muy alejada de la etiqueta hay que alejar demasiado el dispositivo
para encuadrar los dos elementos y se pierde legibilidad. Es preciso aumentar el tamano de
letra o prescindir de alejar las etiquetas de la marca.
• En el Reproductor 3d en realidad aumentada:
• Hay controles innecesarios (los relacionados con el volumen son prescindibles, ya que se
puede manejar con los del dispositivo movil)
• La falta de los iconos estándar en los controles de reproduccion confunde a algunos
usuarios.
• Se hecha en falta una indicacion del estado de reproduccion
• El video no se integra bien con la imagen que se pretende animar
• En el Visor de acordes de guitarra en realidad aumentada:
• Faltan los elementos de la interfaz que muestren el nombre del acorde y permitan cambiar
de un acorde a otro.
A pesar de los problemas encontrados, las maquetas han servido para validar la funcionalidad de
solucion tecnologica encontrada.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
24 / 69
10.3. PEC3: diseño y creación de los contenidos
10.3.1. Creación del guión multimedia
En base a las conclusiones obtenidas tras la investigación y concepción del producto de la fase anterior se
procedió al diseño de ejemplos concretos de aplicación pedagógica de las tres primeras experiencias
diseñadas (Visor 3d de realidad aumentada, Marcador 3d en realidad aumentada y Reproductor 3d en realidad
aumentada) con la creacion de material educativo del tipo “libro magico”. Además, y considerando los
resultados de las entrevistas y las encuestas, los materiales a diseñar debían tener las siguientes
características:
• Estar dirigidos a niños de 14-15 años (3º/4º de ESO)
• Pertenecer al ámbito de la biología.
• Estar concebidos para su uso en casa.
Para la selección de los ejemplos concretos se consultó el libro de biología de 4º de la ESO de Cabrera Calero,
A. (2017) con el siguiente resultado:
• Para ejemplificar el Visor 3d de realidad aumentada se desarrollaría una página de contenidos acerca
de la célula eucariota. Permitir que un alumno pueda visualizar y manipular un modelo en 3d de una
célula es un buen ejemplo de aplicación de la RA.
• Para ejemplificar el Reproductor 3d en realidad aumentad se desarrollaría una página de contenidos
acerca de la división celular. Hacer que cobre vida una imagen real de una célula y ver el proceso de
mitosis en vivo es otro buen ejemplo de aplicación de las RA.
• Por último, para ejemplificar el Marcador 3d en realidad aumentada se desarrollaría una página de
ejercicios acerca de los contenidos anteriores, en la que las soluciones a los ejercicios se muestran
como anotaciones virtuales.
Estos materiales se diseñarían en forma de láminas (las marcas funcionan mejor sobre superficies planas,
por lo que si las imprimimos sobre un papel de un gramaje alto la detección será más precisa) como una
unidad de aprendizaje que incluirá las instrucciones necesarias para su funcionamiento. A partir de lo anterior
se procedió a la creación del guión multimedia expuesto en el apartado 13.
Por otra parte, se definieron los objetivos y contenidos del Visor de acordes de guitarra en realidad
aumentada:
▪ Objetivos:
o Aprender los acordes básicos de la guitarra
o Comprender cómo se interpretan los diagramas de acordes
▪ Contenidos:
o los acordes mayores sin cejilla (DO, RE, MI, SOL Y LA)
A continuación se procedió a la creación del guión multimedia expuesto en el apartado 13.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
25 / 69
10.3.2. Diseño y creación de los elementos virtuales.
Una vez definidos los contenidos a crear se comenzó diseñando los elementos virtuales, dado que serían
necesarios para la creación de los contenidos de las páginas físicas.
Modelo en 3D de la célula eucariota
El mayor reto fue la creación del modelo de la célula, ya que, por una parte, se utilizó Blender, un programa
diferente al utilizado en el grado para aprender a modelar (3d studio). Por otra parte, el modelo a crear tenía
cierta complejidad al estar compuesto por numerosos elementos orgánicos no geométricos. Por último, el
tamaño final no debía ser excesivo para que no se diesen tiempos de descarga demasiado elevados que
estropeasen la experiencia de uso de la aplicación.
Así, se utilizaron diferentes técnicas de modelado (curvas nurbs y extrusión, formas básicas y operadores
booleanos, modificadores, etc.) para conseguir una representación del modelo fiel (se utilizaron como modelo
las imágenes del libro de Cabrera Calero, A. (2017) con consultas puntuales a imágenes de internet) y se
crearon dos versiones: una para renderizar y crear las imágenes a incluir en las páginas físicas y otra, con
menos detalle y peso, para exportar al formato de producción. Los archivos de blender no se han incluido por
su tamaño excesivo (más de 50 mb cada uno) pero pueden descargarse desde los siguientes enlaces:
• modelo para exportar: https://www.dropbox.com/s/sf8manu2hj8k71t/celula-eucariota-
exportable.blend?dl=0
• modelo para renderizar: https://www.dropbox.com/s/ajp0g6al7lypnm2/celula-eucariota-
renderizable.blend?dl=0
Video de la mitosis
En primer lugar se buscó un video con licencia Creative Commons en el que pudiese apreciarse con claridad
el proceso de la mitosis en una célula real, optándose por el de Burgess, A. (2013).
A continuación se descargó y se editó para incluir rótulos que identificasen las distintas fases de la mitosis
en el momento en el que se producían.
Por último se exportó y comprimió el resultado final en un formato apto para producción.
Elementos gráficos del visor de acordes
Por otra parte, se procedió a la creación de los diagramas de acordes a emplear y de las fotografías a utilizar
en las instrucciones de uso. Finalmente, se creó un prototipo gráfico de la interfaz de usuario y se crearon los
elementos gráficos necesarios en producción (logotipo, botones y cajas semitransparentes).
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
26 / 69
10.3.3. Diseño y creación de los contenidos de las paginas fisicas.
El primer paso fue el diseño y creación de marcas personalizadas que fuesen más fáciles de captar por la
aplicación de realidad aumentada, ya que se encontraron problemas en este sentido en la fase anterior, tal y
como se comentó.
Se partió del supuesto de que una marca sencilla sería más fácil de reconocer:
Figura 5: diseño de marca sencilla
Sin embargo, el sistema ni tan siquiera llegó a reconocerla. Tras una lectura atenta de la documentación se
constató que las marcas no debían tener simetría radial, por lo que se diseñó otra diferente:
Figura 6: marca sin simetría radial
El funcionamiento no mejoró, de forma que se procedió con el método de prueba y error, diseñando marcas
con distintas características:
Figura 7: diferentes diseños de marcas
Sorprendentemente, la última marca, con más detalles y colores, fue la que mejor funcionó. Así, al contrario
de lo que dice la documentación de la librería, las marcas con muchos colores y detalle funcionan mejor que
las sencillas en blanco y negro.
Con estas consideraciones se procedió al diseño y creación de las marcas de las cuatro experiencias
AR a implementar, así como al diseño del elemento recortable que se sujeta en la guitarra con la cejilla al
final del mástil.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
27 / 69
Por otro lado, a partir del renderizado se crearon las ilustraciones de la célula incluyendo los rótulos
necesarios. A su vez, y a partir de capturas del video, se crearon la imágenes de la mitosis.
Por ultimo, se disenaron las páginas fisicas y se maquetaron utilizando el grid con el “golden canon” de
Somoza, A. (2017).
10.4. Entrega final: implementacion
10.4.1. Integración de elementos virtuales y físicos
Una vez generados todos los elementos necesarios se procedió a programar las cuatro aplicaciones partiendo
de los prototipos creados en la primera fase del proyecto.
Visor de acordes de guitarra en realidad aumentada (AR-3D-chords)
Se comenzó implementando la interfaz de usuario en HTML y CSS, incluyendo algunas modificaciones:
• Se homogeneizó el aspecto de los botones y se aumentó el tamaño de los que sirven para cambiar
el acorde.
• Se ubicó en la parte superior izquierda de la pantalla ya que, por una parte, se percibe como una
ubicación más natural, y por otra parte obstaculiza menos la visión del propio usuario tal y como se
coloca con la guitarra frente a la pantalla.
• Se cambió el diseño del bloque superior con el título para dar más coherencia al conjunto.
Se creó también la ventana emergente con las instrucciones de uso y todo el código HTML y JavaScript
necesario para el funcionamiento de la aplicación. El funcionamiento del código está descrito en el propio
código en forma de comentarios.
Láminas en realidad aumentada acerca de la célula (AR-cell)
En las primeras pruebas de integración del modelo 3D de la célula en la aplicación de RA surgieron
problemas tanto en las texturas aplicadas como en la transparencia de algunos elementos. Investigando se
encontró en VVAA (2017) que el formato de archivo 3D utilizado por A-frame (glTF 2.0) utiliza un tipo especial
de materiales en Blender, por lo que fue necesario modificar el modelo creado en la fase anterior utilizando
las texturas adecuadas.
Una vez integrado el modelo se procedió a programar la interfaz de usuario. A diferencia del modelo
del prototipo (el fantasma) el modelo de la célula requería poder ser rotado en varios sentidos para ser
inspeccionado adecuadamente, por lo que se creo un control táctil de tipo joystick que permite controlar el
modelo deslizando un botón. Las cuestiones de usabilidad que se tuvieron en cuenta fueron las siguientes:
- La interfaz debía ser lo menos invasiva posible desde el punto de vista visual, ya que comparte el
espacio del visor y debe permitir ver sin dificultades su contenido. Así, se optó por crear dos pads
transparentes ubicados en los laterales de la pantalla con dos botones circulares del tamaño mínimo
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
28 / 69
necesario para poder ser usados como controles táctiles. Por otra parte, se decidió sacrificar el doble
etiquetado e incluir tan sólo información en forma de iconos para tener una interfaz lo más minimalista
posible.
- Se solucionaron también los problemas detectados en el test de usuarios de la primera fase: se
aumentó el tamaño de los controles, se ajustó la respuesta del control de rotación, se cambió el tipo
de control y se solucionaron los problemas de visualización.
- Se eliminó el control de animación, ya que no tenía sentido para este modelo.
Finalmente se procedió a incluir el código HTML y JavaScript necesario para el funcionamiento de la
aplicación. El funcionamiento del código está descrito en el propio código en forma de comentarios.
Se siguió el mismo proceso con el marcador y el reproductor de RA aplicados a las láminas:
- En el reproductor se eliminaron los controles innecesarios, se incluyeron indicaciones del estado
reproducción (cambiando la apariencia de los botones según el mismo) y se siguieron las
consideraciones de usabilidad en el diseño de la interfaz de usuario que se acaban de exponer.
- En el marcador 3D se aumentó el tamaño de la letra para mejorar la legibilidad.
10.4.2. Prueba y alojamiento de las aplicaciones web
Tras finalizar la implementación se alojaron las aplicaciones en un servidor público (github pages, el mismo
utilizado para los prototipos) y se realizaron pruebas de uso de las cuatro aplicaciones en dispositivos reales,
con los siguientes resultados:
- Se detectaron inconsistencias en la ubicación de los elementos virtuales respecto de la marca en
diferentes dispositivos; estas diferencias están causadas por las diferentes ópticas de las cámaras en
los diferentes modelos de dispositivos utilizados, por lo que debe contarse con un cierto margen de
imprecisión en la ubicación. Se corrigieron las ubicaciones más problemáticas (como las de las
etiquetas) buscando posiciones de compromiso para que la ubicación respecto de las marcas físicas
no se desviase demasiado en ninguno de los dispositivos probados.
- Se adaptó el tamaño y la posición de las interfaces de usuario para que se ajustase bien a los
diferentes tamaños de pantalla.
En este punto hubiese sido interesante contar con más tiempo en la planificación para realizar un test con
usuarios sobre las aplicaciones finales. Desafortunadamente los problemas que surgieron en la
implementación consumieron el tiempo extra que se había reservado para contingencias.
10.4.3. Finalización de la edición y maquetación de las páginas físicas
Por último se generaron los códigos QR con la URLs reales de las aplicaciones alojadas en github y se
incluyeron en las páginas físicas sustituyendo a los códigos provisionales. También se modificaron las
indicaciones complementarias y se generó la versión final en PDF de los materiales.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
29 / 69
12. Prototipos
12.1. Visor 3d de realidad aumentada
Figura 8: Maqueta funcional del visor 3D
Figura 9: interfaz final del visor 3D
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
30 / 69
12.2. Marcador 3d en realidad aumentada
Figura 10: maqueta funcional del marcador 3D
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
31 / 69
Pruebas con diferentes tamanos de marca
Figura 11: marca de 6cm, movil
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
32 / 69
Figura 12: marca de 6cm, tablet
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
33 / 69
Figura 13: marca de 2cm, movil
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
34 / 69
12.3. Reproductor 3d en realidad aumentada
Figura 14: maqueta funcional del reproductor 3D
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
35 / 69
12.4. Visor de acordes de guitarra en realidad aumentada
Figura 15: maqueta funcional del visor de acordes
Figura 16: utilizando el visor de acordes
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
36 / 69
Figura 17: wireframe con la interfaz de usuario del visor de acordes
Figura 18: implementación final de la aplicación
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
37 / 69
13. Guiones
13.1. Materiales educativos del tipo “libro magico”
Título
Unidad 4. La célula: introducción a la biología celular
Estructura
Consta de los materiales impresos y las aplicaciones de realidad aumentada asociadas:
•
Figura 19: estructura de la aplicacion “libro mágico de la célula”
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
38 / 69
Contenidos
Resumen de contenidos
En esta unidad aprenderás:
▪ Qué es la célula eucariota
▪ A identificar sus partes y las funciones que cumple.
▪ Qué es la mitosis y cuales son sus fases.
Instrucciones de uso
Estos materiales incluyen contenidos en realidad aumentada.
Para visualizarlos deberás utilizar un dispositivo móvil (un smartphone o una tablet) con conexión a internet
y seguir los siguientes pasos:
1. Abrir la cámara del dispositivo. Debe ser relativamente moderno y usar Android o iOS.
2. Escanear el código QR.Abrir la web detectada y permitir el acceso a la cámara.
3. Enfocar al marcador.El marcador (el recuadro con marco negro) debe captarse por la cámara para
activar los contenidos.
La célula eucariota
Las células eucariotas son posteriores y más complejas que las procariotas. En su citoplasma contienen
diversas estructuras, denominadas orgánulos citoplasmáticos, que realizan distintas funciones:
▪ Ribosomas: son responsables de la síntesis de proteínas.
▪ Lisosomas: contienen enzimas para digerir las moléculas capturadas por las células.
▪ Retículo endoplásmático: encargado de fabricar y transportar diversas sustancias. Una parte (el
rugoso) contiene ribosomas, el resto se denomina liso.
▪ Vacuolas: son estructuras que acumulan diversas sustancias.
▪ Aparato de Golgi: toma las sustancias del reticulo endoplasmático, las modifica y las pasa a las
vesículas para su secreción.
▪ Mitocondrias: son las centrales energéticas de las células, ya que se encargan de obtener energía
mediante la respiración celular.
Ilustración de la célula con sus partes rotuladas
Códigos QR y AR con instrucciones de uso
Escanea el código QR con un dispositivo móvil (o visita www.celulaeucariota.com)
y enfoca la página para ver la célula eucariota 3D en Realidad aumentada
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
39 / 69
La división celular
Profase: Las fibras de cromatina se estiran, el nucleolo desaparece y aparece el huso cromático.
Ilustración de la profase
Metafase: vLos cromosomas se unen por su centromero a las fibras del huso acromático en el plano medio.
Ilustración de la metafase
Anafase: Las fibrillas del uso se rompen y arrastran hacia los polos a las cromátidas.
Ilustración de la anafase
Telofase: Aparece una membrana nuclear alrededor de cada grupo nuevo de cromátidas.
Ilustración de la Telofase
Ilustración con el primer fotograma del video
Códigos QR y AR con instrucciones de uso
Escanea el código QR con un dispositivo móvil (o visita www.mitosis-celula.com)
y enfoca la página para ver un video de la mitosis celular en realidad aumentada
Actividades de repaso
1. La célula eucariota. Observa la imagen de la derecha y nombra las cuatro estructuras señaladas,
así como la función que cumplen dentro de la célula.
Ilustración de la célula con rótulos en blanco
2. La mitosis. Identifica las siguientes fases de la mitosis:
Ilustraciones de dos fases de la mitosis
Códigos QR y AR con instrucciones de uso
Escanea el código QR con un dispositivo móvil (o visita www.mitosis-celula.com)
y enfoca la página para ver la respuesta a las preguntas en realidad aumentada
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
40 / 69
13.2. Visor de acordes de guitarra en realidad aumentada
Título
AR 3D chords
Estructura
Figura 20: estructura de la aplicación "visor de acordes"
Contenidos
Instrucciones
Instrucciones de uso
1. Imprimir la hoja con la marca, recortar por la linea, plegar por la mitad y fijar con celo las dos
mitades.
2. Colocar la marca sobre la cejuela, en la parte final del mástil. Centrar y hacer coincidir la parte
inferior con el final del mástil:
Imagen con la marca colocada en la guitarra
3. Coger la guitarra con el mástil hacia la izquierda y situarse frente a la web- cam. Procurar que la
marca aparezca en pantalla.
4. Seleccionar con las flechas o los cursores el acorde a aprender y pisar las cuerdas en el lugar
indicado por las marcas rojas.
Nota: El diagrama muestra qué dedo pisa en cada lugar. La numeracion de los dedos de la mano izquierda
es la siguiente:
Imagen de una mano izquierda con los dedos numerados
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
41 / 69
14. Perfiles de usuario
Los tres primeros ejemplos de realidad aumentada seleccionados (visor 3d de realidad aumentada, marcador
3d en realidad aumentada y reproductor 3d en realidad aumentada) están dirigidos, tal y como ya se ha
comentado, a alumnos de secundaria, en concreto de 3º- 4º curso de la ESO. Colateralmente, sus profesores
harán también uso de la aplicacion y, en cualquier caso, la experiencias AR disenadas deberian poder ser
extrapolables a otros niveles educativos (teniendo en cuenta que uno de los objetivos secundarios de este
trabajo es establecer las bases para la creacion de una herramienta de autor destinada al profesorado en
general).
El cuarto ejemplo (visor de acordes de guitarra en realidad aumentada) tampoco tiene un publico
objetivo predeterminado, por lo que, a priori, podriamos decir que todos los ejemplos están dirigidos al pubico
en general. No obstante, la expresion “publico en general” no es descriptiva ni sirve de ayuda a la hora de
acotar a los usuarios actuales, entre otras cosas porque no existe el segmento de poblacion “publico en
general”, asi que deberemos ser más especificos (Usability.gov, 2015).
En este sentido, se ha utilizado el método de investigacion con usuarios llamado personas, estableciéndose
las siguientes:
• Rocio, estudiante, 15 anos; vive en Utrera y estudia en el instituto 4o de la ESO.
• Antonio, 43 anos, padre de dos hijos; vive en Alcobendas y trabaja como profesor de secundaria.
• Fernando, 21 anos, estudiante y aficionado a la musica.
• Carme, 66 anos, jubilada y viuda; vive en Mataro y quiere aprender guitarra.
• Ainara, 34 anos, profesora de primaria; vive con su madre en Bilbao.
• Xavier, 8 anos; vive en Valencia y estudia tercero de primaria.
• Andrés, 51 anos, casado y con tres hijos a los que ayuda en sus tareas escolares; vive en el Ferrol.
• Maria, 11 anos; vive en Cáceres y quiere recorrer Andalucia.
A partir de aqui podemos establecer que el perfil sociodemográfico del publico objetivo de los ejemplos seria
el siguiente:
• Tienen entre 6 y 70 anos de edad (por debajo de 6 no cursan la educacion obligatoria aun, y por
encima de 70 suelen tener problemas para usar este tipo de tecnologia).
• Son, por igual, de ambos sexos (50% mujeres / 50% hombres)
• Tienen un nivel de estudios de medio a avanzado
• Idiomas: Gallego (1/6), vasco (1/6), catalán (1/6), valenciano (1/6) y castellano (3/6)
• Entorno familiar variable (casados, solteros, viudos, con y sin hijos).
• Nivel tecnologico básico a avanzado; de cara al test conviene contar con varios usuarios de todos los
niveles
• Familiaridad con dispositivos moviles: de ocasional a habitual
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
42 / 69
15. Usabilidad/UX
A la hora de abordar la usabilidad se han adoptado varias perspectivas de entre las definidas por Uldall-
Espersen (2008):
• Usabilidad del contexto de uso: a un nivel más general, en la propia concepcion de la aplicacion se
pretende una mejora de la usabilidad considerando el contexto educativo en el que se va a usar. Asi,
se minimizan los requisitos de uso (no se precisa instalar ningun programa y funciona en diferentes
plataformas, sistemas operativos, dispositivos y navegadores) y se utiliza una modalidad de RA
(basada en marcas) que facilita la interaccion (se asocia la marca fisica a la experiencia virtual).
Por otra parte, se parte de que la aplicacion se usará fundamentalmente con dispositivos moviles, y
mayoritariamente con teléfonos inteligentes (StatCounter, 2019). De esta forma, se ha optado por la
estrategia de diseno denominada “mobile first”, teniendo en cuenta además que es preciso minimizar
el espacio dedicado a la interfaz de usuario.
• Usabilidad de la tarea: a un nivel más concreto, se evaluará la finalizacion de determinadas tareas
por parte del usuario, que se detallan en el apartado 17 de este documento. Además, para facilitar al
usuario su realizacion se tendrán en cuenta los principios clave de la usabilidad en la fase de
diseno:
• coherencia desde el punto de vista gráfico e interacctivo
• dotar a la interaccion de visibilidad, predictibilidad y reversibilidad
• informacion, comunicacion y retroalimentacion en la interfaz
• control: permitir a los usuarios un cierto grado de personalizacion de la experiencia
• opciones: ofrecer a los usuarios más de una forma de hacer las cosas
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
43 / 69
16. Seguridad
Los riesgos de seguridad relacionados con este trabajo podrian ser los siguientes:
• Acceso no autorizado a las imágenes de video captadas por la aplicación.
• Accidentes causados por desplazarse mientras se usa la aplicación y se mira al dispositivo móvil
utilizado.
Los propios navegadores establecen las restricciones de seguridad suficientes que minimizan el primer riesgo,
dado que es preciso el uso del protocolo htttps para que sea posible el acceso a la cámara; además, se pide
siempre autorización al usuario antes de su uso.
En cuanto al segundo riesgo, la modalidad de realidad aumentada utilizada (basada en marcas
impresas sobre papel) no exige que el usuario se desplace. En cualquier caso, se incluirán las advertencias
de seguridad pertinentes en la versión final.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
44 / 69
17. Tests
Para el desarrollo de los prototipos iniciales se instalo un servidor local, ya que el acceso a la aplicacion
mediante el protocolo file:// impedia su utilizacion debido a las restricciones de seguridad de los navegadores
relativas a la carga local de recursos y el acceso a la webcam. Se fueron realizando test de funcionalidad
usando diferentes navegadores web (Firefox, Chrome y safari) y una webcam externa sobre soporte para
simular el ángulo de enfoque de un dispositivo movil:
Figura 21: Montaje para los test locales
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
45 / 69
Posteriormente se alojaron las aplicaciones en GitHub Pages para permitir la realizacion de test de usuario
iniciales en entorno real (esto es, sobre los dispositivos de los propios usuarios). El material necesario era,
por tanto:
• Hoja u hojas de marcas
• Dispositivo movil y conexion a internet.
En esta fase no se precisaban test exhaustivos, por lo que no se han definido escenarios (la propia situacion
de probar la tecnologia era el escenario) y las tareas eran muy básicas:
• acceder a la experiencia RA
• Rotar/cambiar tamano/animar el modelo 3D.
• Reproducir el video.
• Leer las etiquetas.
Los test se realizaron a ocho personas:
• Cuatro adultos
• Cuatro jovenes de entre 14 y 19 anos.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
46 / 69
18. Versiones de la aplicación/servicio
Las versiones desarrolladas hasta el momento son prototipos funcionales destinados a realizar test de
funcionamiento y usabilidad, no aptas por tanto para produccion.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
47 / 69
19. Requisitos de implantación y uso
19.1. Requisitos de implantacion
Un servidor web con el protocolo https activado.
19.2. Requisitos de uso
Software
• Un navegador con soporte para WebGL y WebRTC, incluido en las ultimas versiones de todos los
navegadores. En iOS y Mac es necesaria la version 11 o superior de Safari.
Hardware
• Un dispositivo movil con cámara, o un ordenador con webcam, con capacidad para ejecutar con
fluidez un navegador compatible.
• Conexión a internet
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
48 / 69
20. Instrucciones de implantación
Alojar los archivos en un servidor web con el protocolo https activado. Generar un código QR que apunte a
la dirección de cada uno de los archivos html. Actualizar los códigos QR de los materiales impresos.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
49 / 69
21. Instrucciones de uso
Unidad didáctica sobre la célula
Imprimir o abrir el archivo “laminas.pdf” (dentro de la carpeta Proyecto). Aunque la experiencia está
concebida para acceder a los contenidos virtuales mirando hacia abajo (esto es, con las láminas sobre una
mesa) también puede probarse sobre el monitor del ordenador. Una vez a la vista las láminas:
• Paso 1: abrir la cámara de un dispositivo móvil. Funciona en cualquier móvil o tablet
relativamente moderna.
• Paso 2: escanear el código QR. Abrir la web asociada al código en el navegador y permitir el
acceso a la cámara
• Paso 3: enfocar el marcador. Los modelos 3d aparecerán situados con relación al marcador.
Visor de acordes de guitarra en realidad aumentada
Para utilizar esta aplicación será necesario un ordenador con webcam y, obviamente, una guitarra. Puede
accederse a instrucciones gráficas en la propia web de la aplicación (https://github.com/alfonsogchico/AR-
3D-chords). En cualquier caso, estos son los pasos necesarios:
1. Descargar e imprimir la hoja con la marca (https://alfonsogchico.github.io/AR-3D-
chords/resources/marca-recortable-AGC.pdf) , recortar por la linea, plegar por la mitad y fijar con
celo las dos mitades.
2. Colocar la marca sobre la cejuela, en la parte final del mástil (puede usarse una cejilla). Centrar y
hacer coincidir la parte inferior con el final del mástil.
3. Acceder a la web https://alfonsogchico.github.io/AR-3D-chords/ y permitir el acceso a la cámara.
4. Coger la guitarra con el mástil hacia la izquierda y situarse frente a la webcam. Procurar que la
marca aparezca en pantalla.
5. Seleccionar con las flechas o los cursores el acorde a aprender y pisar las cuerdas en el lugar
indicado por las marcas rojas.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
50 / 69
22. Bugs
• Ligera distorsion en algunos momentos en el modelo 3D. Puede deberse a un fallo en el renderizado
de modelos 3D en formato GLTF de las librerías utilizadas.
• Inestabilidad en la ubicacion de los elementos virtuales superpuestos, de forma que se producen
temblores y errores en su rotacion respecto de la cámara. Se debe al retardo que se produce cuando
se mueve la cámara y el sistema realiza los cálculos necesarios para reubicar los elementos vistuales,
o por problemas a la hora de captar la marca (debido a una perspectiva ambigua para el sistema, por
ejemplo).
• Inconsistencia en la ubicacion de los elementos virtuales entre distintos dispositivos. Dependiendo
del dispositivo utilizado se sitúan en posiciones diferentes. Esto puede deberse a las diferencias entre
las lentes de distintos dispositivos, que captan con una geometría diferente las marcas, o también a
la irregularidad del soporte o su iluminacion.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
51 / 69
23. Proyección a futuro
Como se comentó en la introducción, uno de los objetivos de este trabajo es sentar las bases del futuro
desarrollo de una herramienta de autor que facilite la creacion de experiencias de RA a través de aplicaciones
web. En este sentido, las tres experiencias desarrolladas para la creación del libro mágico suponen un
excelente punto de partida para el desarrollo de la herramienta; no sería excesivamente complicado crear una
aplicación que permitiese al usuario generar automáticamente los elementos necesarios:
- En el caso del visualizador de modelos 3D, el usuario adjuntaría el modelo en el formato adecuado,
así como la ubicación y tamaño inicial (y opcionalmente la imagen para la marca personalizada), y el
sistema se encargaría de generar el código necesario, alojarlo en un servidor público, y de crear el
código QR y la marca en formato de imagen para su inclusión en cualquier documento.
- En el caso del visor de videos, a partir del video se podría generar de forma automatizada tanto la
imagen como los códigos.
- Por último, para el marcador 3D el usuario indicaría el número de etiquetas, el texto a incluir en cada
una y su posición a partir de la marca.
Creo que una aplicación de estas características podría tener un hueco en el mercado, teniendo en cuenta
que, aunque existen soluciones que permiten crear experiencias de RA, todas requieren de la utilización de
un programa propietario para visualizar las experiencias creadas.
Por otra parte, el visualizador de acordes de guitarra podría ampliarse para incluir más acordes, con una
interfaz que permitiese elegir, por un lado, el nombre del acorde (do, do#, re, etc.) y por otro, su tipo (mayor,
menor, disminuido, etc.). Sería también interesante añadir la posibilidad de reproducir canciones mientras se
visualizan sobre la guitarra los acordes necesarios para tocarlas, acordes que irían cambiando de forma
sincronizada con la reproducción de la canción.
Por último, sería interesante explorar la utilización de un sistema de varias marcas como método para ubicar
los elementos virtuales. La versión en desarrollo de AR.js incluye esta posibilidad, que ofrece varias ventajas
frente a la marca única:
- No es necesario que el visor enfoque a todas marcas a la vez; esto permitiría, ubicando las marcas
en las esquinas del papel, ampliar el tamaño de la zona de ubicación de los elementos virtuales,
dando a su vez mayor margen de movimiento al usuario a la hora de enfocar.
- Se mejora la detección del plano en el que se ubican las marcas y se disminuye el tiempo de
detección; esto mejoraría la precisión en la ubicación de los elementos virtuales, eliminaría los
retardos existentes en reubicarlos cuando se mueve el dispositivo de visualización (que se
manifiestan como temblores) y haría más homogénea la experiencia en dispositivos con diferentes
ópticas de cámara.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
52 / 69
24. Conclusiones
Tras la finalización del proyecto considero que se han cumplido todos los objetivos planteados en su
concepción. Se han explorado las posibilidades de la RA en la educación a través de una revisión de la
principal literatura publicada al respecto y la realización de test y entrevistas a profesionales de la educación,
se han definido tres tipologías de experiencias de RA que aprovechan las posibilidades educativas de esta
tecnología y se han implementado cuatro ejemplos diferentes utilizando tecnologías, como WebAR y los
códigos QR, que facilitan su utilización. Al mismo tiempo, el trabajo realizado puede servir como punto de
partido para el desarrollo de la herramienta de autor que se comentó en el punto anterior.
Además, los ejemplos implementados muestran que las tecnologías utilizadas funcionan de forma
efectiva en un entorno de producción, salvando las pequeñas dificultades surgidas tal y como se comenta en
los apartados 22 y 23. Así, en los dispositivos utilizados para las pruebas las aplicaciones han funcionado con
fluidez, a pesar de que el tamaño total de alguna de ellas está entre los cinco y los diez megabytes y requieren
una potencia de calculo relativamente grande para calcular la ubicación y presentar los modelos en tiempo
real. No obstante, como ya se ha comentado, sería necesario realizar más pruebas con usuarios para terminar
de optimizarlas y, sobre todo, para validar su utilidad en el proceso de aprendizaje, algo que queda más allá
del presente trabajo.
Por último, he de destacar que la realización del presente proyecto ha sido muy satisfactoria desde
un punto de vista personal. A pesar del esfuerzo y el tiempo que ha supuesto, me ha permitido poner en
práctica gran parte de los conocimientos adquiridos a lo largo de mis estudios en el grado multimedia,
consiguiendo realizar un proyecto que requiere de la conjunción de muchas habilidades diferentes (diseño,
modelado 3D, programación, etc.), y que puede suponer el punto de partida hacia un futuro profesional.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
53 / 69
Anexo 1. Entregables del proyecto
Carpeta AR-3d-viewer (visor 3d de realidad aumentada)
• index.html (web con la aplicacion integrada)
• marcador ar-3D-viewer.pdf (marca para lanzar y usar la aplicacion con instrucciones de uso. Funciona
en la pantalla del ordenador)
• Carpeta ghost (archivos necesarios para mostrar el modelo 3D de un fantasma. Descargado de
Sketchfab. Licencia CC Attribution.
• Carpeta Ejemplo AR-3D-viewer con:
o Gráficos de la célula en formato OmniGraffle y PNG
o Carpeta marca con los archivos utilizados para generar la marca
o Carpeta modelo 3d celula con:
- Modelo 3d de la célula en formato GLB (no se incluye el formato nativo blender por
su excesivo tamaño - 56 MB-)
- Imagen renderizada del modelo
Carpeta AR-3d-marker (marcador 3d en realidad aumentada)
• index.html (web con la aplicacion integrada)
• cuadricula-4-markers.pdf (cuadricula con los marcadores utilizados para las pruebas. Para lanzar y
usar la aplicacion)
• OpenSans-Regular-msdf.json y OpenSans-Regular.png (archivos necesarios para la fuente de tipo
bitmap utilizada, creada a partir de Open Sans regular -licencia Apache V2-)
• Carpeta Ejemplo AR-3D-marker con:
o Gráfico del ejercicio de la célula en formato png
o Carpeta marca con los archivos utilizados para generar la marca
Carpeta AR-3d-player (reproductor 3d en realidad aumentada)
• index.html (web con la aplicacion integrada)
• hoja marcador ejemplo.pdf (hojas con los distintos marcadores utilizados en las pruebas. Para
lanzar y usar la aplicacion)
• colores.mp4 (video utilizado para realizar las pruebas)
• Carpeta Ejemplo AR-3D-player con:
o Carpeta marca con los archivos utilizados para generar la marca
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
54 / 69
o Imágenes de la mitosis utilizadas en los materiales impresos
o Video de la mitosis rotulado
Carpeta AR-3d-chords (acordes 3d en realidad aumentada)
• AR-3D-chords-web. Carpeta con:
o index.html (web con la aplicacion integrada)
o README.md (archivo con información acerca de la aplicación)
o Carpeta css (con los archivos css necesarios para el funcionamiento de la aplicación)
o Carpeta resources:
▪ marca-recortable-AGC.pdf (marcador usado en la guitarra)
▪ pattern-marker.patt (codificación de la marca personalizada)
▪ Archivos de imagen necesarios para la aplicación
• Acordes (carpeta con los archivos .ai de los diagramas de acordes)
• Diseño. Carpeta con:
o Archivos del wireframe en formato OmniGraffle y PNG
• Instrucciones. AR-3D-chords-web. Carpeta con el texto de las instrucciones a incluir en la web en
formato markdown.
• Marca. Carpeta con:
o Archivo psd del logotipo
o Archivo ai de la marca recortable y el icono del marcador.
o qr-ar-3d-chords.png (codigo QR utilizado)
Carpeta AR-cell (láminas de la célula en realidad aumentada)
• resources. Carpeta con:
o Mitosis-SD-480p.mov (video de la mitosis)
o Carpeta markers (con los archivos png y patt de las marcas)
o Carpeta models (con el modelo 3D de la célula)
• cellModelPage3.html, cellTestPage5.html, cellVideoPage4.html y index.html: archivos HTML
necesarios para la aplicación.
• Carpetas css y js (con los archivos css y js necesarios para el funcionamiento de la aplicación)
• OpenSans-Regular-msdf.json y OpenSans-Regular.png (archivos necesarios para la fuente de tipo
bitmap utilizada, creada a partir de Open Sans regular -licencia Apache V2-)
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
55 / 69
Carpeta Páginas físicas
• Archivos en formato pages y PDF con los contenidos maquetados
• Imagen con la rejilla utilizada para la maquetación
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
56 / 69
Anexo 2. Código fuente (extractos)
A-Frame establece que el codigo javascript se integre en la aplicacion mediante la creacion de componentes.
Asi, por ejemplo, para agregar la funcionalidad de controlar la animacion, el zoom y la orientacion de los
modelos 3D se crea el componente 3d-model-control:
AFRAME.registerComponent('3d-model-control', {
init: function () {
Se selecciona la escena y el modelo 3D, que están integrados en el DOM HTML gracias a A- Frame:
var sceneEl = this.el;
const model = document.getElementById('model')
Y se asignan eventos a los diferentes controles (que son elementos HTML identificados por diferentes IDs.
Por ejemplo, para controlar la rotacion del modelo:
//accedemos al boton de rotar
const rotBut = document.getElementById('rotation-btn');
// creamos una nueva funcion de la libreria Hammer
var rotation = new Hammer(rotBut);
// cuando se produce un movimiento horizontal sobre el boton
rotation.on('panmove', function(ev) {
// se lee el valor actual de rotacion del modelo
const curr = model.getAttribute('rotation');
// y se incrementa o decrementa el valor respecto del eje y en funcion del mo-
vimiento realizado por el usuario
model.setAttribute('rotation', {
'x': curr.x,
'y': curr.y + ev.deltaX*0.02,
'z': curr.z
});
En el caso de la animacion se ha anadido además un listener a la escena que restaura la animacion por
defecto (idle en este caso) cuando el modelo concluye la animacion que dispara el boton:
animate.on('tap', function(ev) {
model.setAttribute("animation-mixer","clip: poser;");
var endAnimation = function (){
sceneEl.removeEventListener('animation-loop',endAnimation);
model.setAttribute("animation-mixer","clip: idle;");
};
setTimeout (function(){
sceneEl.addEventListener('animation-loop',endAnimation);},500);
}); }
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
57 / 69
Anexo 3. Librerías/Código externo utilizado
• hammer.js: librería de código abierto que facilita el reconocimiento de gestos realizados con los dedos
y el ratón. Se ha utilizado para mejorar la interacción en la interfaz del visor de objetos 3D.
• Tree.js: librería javascript que permite la creación y visualización de gráficos 3D animados en un
navegador web. Se ha utilizado a través de A-Frame.
• A-Frame: un framework web para construir experiencias de realidad virtual en el navegador siguiendo
la especificacion WebVR que facilita la utilizacion de Three.js mediante un sistema de “entidades-
componentes” utilizando HTML. Se ha usado para la gestion y creacion de los elementos virtuales en
las aplicaciones de RA.
• A-Frame-extras: Add-on para A-Frame que añade, entre otras, la funcionalidad de poder cargar y
animar modelos 3D creados en programas como blender o 3D Studio. Se usa en el visor de objetos
3D.
• A-frame multisrc component: Add-on para A-Frame que añade la posibilidad de integrar texturas
diferentes a las diferentes caras de una forma 3D generada con A-Frame. Se utiliza para integrar el
video en una de las caras de una caja que hace de “pantalla”.
• ARToolKit.js: libreria para la realizacion de “tracking” de video. Permite calcular en tiempo real la
posición y orientación de la cámara respecto de diferentes tipos de marcas gráficas especiales, lo que
permite integrar los elementos virtuales en el entorno real. Se ha usado a través de AR.js.
• AR.js: librería que facilita combinar A-Frame con ARToolKit.js para crear experiencias de realidad
aumentada utilizando un navegador en un dispositivo móvil. Se ha utilizado para la gestión de las
marcas en las aplicaciones de RA.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
58 / 69
Anexo 4. Capturas de pantalla
Figura 22: Modelado de la célula en 3D en Blender
Figura 23: Diseño y creación del icono de la marca de AR 3D chords en Adobe Illustrator
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
59 / 69
Figura 24: Diseño y creación de la marca de AR 3D chords en Adobe Photoshop
Figura 25: Diseño y creación de los diagtramas de acordes en Adobe Illustrator
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
60 / 69
Figura 26: Diseño y creación de la interfaz de usuario de AR 3D chords en Omnigraffle
Figura 27: Creación y rotulado de los gráficos de la célula en Omnigraffle
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
61 / 69
Figura 28: Creación de las marcas del magic book en Adobe Photoshop
Figura 29: Edición y rotulación del video en Final Cut Pro
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
62 / 69
Figura 30: Conversión y compresión del video en Compressor
Figura 31: Captura y recorte de las imágenes de la mitosis en Capto
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
63 / 69
Figura 32: Redacción de los contenidos textuales en Ulysses
Figura 33: Diseño y maquetación de los contenidos de las páginas físicas en un editor de textos
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
64 / 69
Anexo 5. Guía de usuario
Ejemplos de realidad aumentada del “Magic book”
Los contenidos de realidad aumentada están diseñados para usarse impresos y situados sobre una
superficie horizontal. No obstante, también pueden usarse abriendo el documento PDF en una pantalla.
Para visualizarlos deberá utilizarse un dispositivo móvil (un smartphone o una tablet) con conexión a internet
y seguir los siguientes pasos:
1. Abrir la cámara del dispositivo.Debe ser relativamente moderno y usar Android o iOS.
2. Escanear el código QR.Abrir la web detectada y permitir el acceso a la cámara.
3. Enfocar al marcador.El marcador (el recuadro con marco negro y diferentes imágenes en su
interior) debe ser captado por la cámara para activar los contenidos.
Aplicación AR 3D chords
La aplicación está concebida para ser usada en un ordenador con webcam, aunque debería ser funcional
también en una tablet colocada en un ángulo y una altura adecuada, con los inconvenientes que presenta
una pantalla de menor tamaño.
1. Imprimir la hoja con la marca, recortar por la línea, plegar por la mitad y fijar con celo las dos
mitades.
2. Colocar la marca sobre la cejuela, en la parte final del mástil. Centrar y hacer coincidir la parte
inferior con el final del mástil:
3. Acceder a la web de la aplicación (https://alfonsogchico.github.io/AR-3D-chords/).
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
65 / 69
4. Coger la guitarra con el mástil hacia la izquierda y situarse frente a la webcam. Procurar que la
marca aparezca en pantalla.
5. Seleccionar con las flechas o los cursores el acorde a aprender y pisar las cuerdas en el lugar
indicado por las marcas rojas.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
66 / 69
Anexo 6. Glosario
A- Frame Framework web de código abierto que permite la creación de experiencias de realidad
virtual (y de realidad aumentada a través de AR.js) en un navegador web.
backend Se refiere a la ejecución de una aplicación, o partes de la misma, en un segundo
plano o en un dispositivo diferente al utilizado por el usuario para acceder a la misma.
bmfonts Tipografías en formato de imagen Bitmap, lo que facilita su manipulación como
cualquier otro tipo de imagen.
codigo QR Código de barras bidimensional que almacena información, generalmente URLs, y
que puede ser leído fácilmente con cualquier dispositivo móvil.
CSS Hojas de estilo en cascada, lenguaje que permite establecer el diseño visual de
páginas web y otros tipos de documentos.
dispositivos
móviles
Teléfonos móviles o tabletas con capacidad de procesamiento y conexión a internet.
head mounted
display
Casco de realidad virtual, dispositivo de visualización que permite al usuario percibir
imágenes generadas por ordenador como si fuesen reales.
herramienta de
autor
Aplicación informática de tipo multimedia que permite la creación de materiales y
recursos digitales, generalmente destinados a un uso educativo.
HTML Lenguaje de marcas de hipertexto utilizado para la elaboración de las páginas web.
javascript Lenguaje de programación que permite escribir aplicaciones que pueden ejecutarse
en un navegador web.
marcas Elementos gráficos con características distintivas que pueden ser reconocidos a
través de una cámara por una aplicación preparada para ello.
tooltips Herramientas de ayuda visual que muestran información adicional, generalmente de
tipo textual, acerca de un elemento determinado al que se asocian.
URL Cadena de caracteres con un formato determinado que permite acceder a una web
concreta alojada en un servidor a través de un navegador web.
usabilidad Cualidad que define la calidad, facilidad de uso, satisfacción y aceptación de un
producto o servicio interactivo.
vision tunel Perdida momentánea de la visión periférica (VVAA, 2019).
WebAR Conjunto de tecnologías que facilitan la utilización de cualquier navegador web como
visor de experiencias de realidad aumentada.
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
67 / 69
Anexo 7: encuesta realizada a profesores
La realidad aumentada es la tecnología que permite insertar objetos virtuales en un entorno real. Algunos
ejemplos conocidos son el juego Pokemon Go! y la aplicación de Ikea que permite visualizar sus muebles
ubicados en nuestras casas.
Estamos realizando un estudio acerca de las posibilidades educativas de esta tecnología y nos gustaría saber
tu opinión.
1. ¿Qué etapas educativas piensas que son las más adecuadas para utilizar la realidad aumentada en un
contexto educativo? (Puedes marcar varias opciones)
• Educación infantil
• 1º a 3º de educación primaria
• 4º a 6º de educación primaria
• 1º-2º de educación secundaria
• 3º-4º de educación secundaria
• Bachillerato
• Enseñanzas superiores
2. ¿Qué área de conocimiento consideras que se presta más para utilizar este tipo de tecnología?
• matemáticas y geometría
• biología
• humanidades
• música y otras artes
• Otra: ______________
3. ¿Qué espacio estimas adecuado para realizar las actividades de realidad aumentada?
• aula de clase
• casa
• taller
4. ¿Qué tipo de material educativo consideras más adecuado para implementar esta tecnología?
• aplicaciones en dispositivos móviles
• libro físico/fichas con experiencias de realidad aumentada insertadas
• Cartas u otros objetos que sirven de soporte para la experiencia de realidad aumentada
5. ¿Se te ocurre alguna actividad/aplicación concreta que pueda hacer uso de esta tecnología?
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
68 / 69
Anexo 8. Bibliografía
1. Azuma, R. T. (1997). A survey of augmented reality. Presence: Teleoperators & Virtual
Environments, 6(4), 355-385.
2. Bacca, J., Baldiris, S., Fabregat, R., Graf, S., & Kinshuk. (2014). Augmented Reality Trends in
Education: A Systematic Review of Research and Applications. Educational Technology & Society,
17 (4), 133–149.
3. Burgess, A. (2013). Mitosis in 2D - HeLa cell undergoes mitosis. [online] YouTube. Available at:
https://www.youtube.com/watch?v=Jj0IoPVi7b0 [Accessed 10 Apr. 2019].
4. Cabrera Calero, A. (2017). Biología y geología. San Fernando de Henares, Madrid: Oxford
Educación, pp.82-100.
5. Miglino, O.; Walker, R. (2010). Teaching to teach with technology-a project to encourage take-up of
advanced technology in education. ProcediaSocial and Behavioral Sciences, 2 (2), (2492 -2496)
6. Milgram, P.; Kishino, F. (1994). «A Taxonomy of Mixed Reality Visual Displays». IEICE Trans. Inf. &
Syst. (vol. E77-D, núm. 12, diciembre 1994).
7. Radu, I. (2012). Why should my students use AR? A comparative review of the educational impacts
of augmented-reality. Proceedings of IEEE International Symposium on Mixed and Augmented
Reality (ISMAR) (pp. 313–314). IEEE. doi:10.1109/ISMAR. 2012.6402590
8. Radu, I. (2014). Augmented reality in education: a meta-review and cross-media analysis. Personal
and Ubiquitous Computing, 18(6), 1–11. doi:10.1007/s00779-013-0747-y
9. Roblyer, M. D.; Edwards, J.; Havriluk, M.A. (2006). Integrating educational technology into teaching.
Pearson/ Merrill Prentice Hall.
10. Santos, M., Chen, A., Taketomi, T., Yamamoto, G., Miyazaki, J. and Kato, H. (2014). Augmented
Reality Learning Experiences: Survey of Prototype Design and Evaluation. Ieee transactions on
learning technologies, (VOL. 7, NO. 1).
11. Somoza, A. (2017). Golden Canon Grid. [online] Behance.net. Available at:
https://www.behance.net/gallery/54045377/Golden-Canon-Grid-(Freebie) [Accessed 6 Apr. 2019].
12. StatCounter (2019). Desktop vs Mobile vs Tablet Market Share Worldwide. [online] StatCounter
Global Stat. Available at: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
[Accessed 20 Mar. 2019].
13. Sutherland, I. E. A head-mounted three-dimensional display. In Proc. Fall Joint Computer Conf.
(Washington, DC, 1968), Thompson Books, pp. 757–764.
14. Uldall-Espersen, T. (2008). "The usability perspective framework". A: Proceedings of CHI '08
extended abstracts on Human factors in computing systems. Florencia: ACM Press.
15. Usability.gov (2015). Recruiting Participants & the Legend of “The General Public”. [online]
Usability.gov. Available at: https://www.usability.gov/get-involved/blog/2015/07/recruiting-
participants.html [Accessed 14 Mar. 2019].
La realidad aumentada en la educación, Alfonso G. Chico Fernández de Terán
69 / 69
16. VVAA (2017). Blender doesn't export textures · Issue #46 · KhronosGroup/glTF-Blender-Exporter.
[online] GitHub. Available at: https://github.com/KhronosGroup/glTF-Blender-Exporter/issues/46
[Accessed 20 May 2019].
17. VVAA (2019). Tunnel vision. [online] Available at: https://en.wikipedia.org/wiki/ Tunnel_vision
[Accessed 3 Mar. 2019].
18. Yilmaz, R., & Göktaş, Y. (2018). Using Augmented Reality Technology in Education. Çukurova
Üniversitesi Eğitim Fakultesi Dergisi, 47(2), 510-537