Está en la página 1de 144

INSTALACIÓN INTERACTIVA DE REALIDAD AUMENTADA PARA EL MUSEO

INTERACTIVO SAMOGA DE MANIZALES

Javier Darío López Acosta


César Augusto Penilla Rivera

UNIVERSIDAD DE SAN BUENAVENTURA


FACULTAD DE INGENIERIA
INGENIERIA MULTIMEDIA
CALI
2015
INSTALACIÓN INTERACTIVA DE REALIDAD AUMENTADA PARA EL MUSEO
INTERACTIVO SAMOGA DE MANIZALES

Javier Darío López Acosta


César Augusto Penilla Rivera

Trabajo de grado presentado


Como requisito parcial para optar al título de
Ingeniero Multimedia

Asesor
Ingeniero de Sistemas Luis Edmundo Astorquiza
Docente Académico

UNIVERSIDAD DE SAN BUENAVENTURA


FACULTAD DE INGENIERIA
INGENIERIA MULTIMEDIA
CALI
2015
Nota de aceptación:

_______________________________________________
_______________________________________________
_______________________________________________
_______________________________________________
_______________________________________________
_______________________________________________

_______________________________________________
Firma del presidente del jurado

_______________________________________________
Firma del jurado

_______________________________________________
Firma del jurado
DEDICATORIA

Dedico este logro y esfuerzo a mis padres por el apoyo que han tenido
conmigo en este proceso

Javier Darío López Acosta

Quiero dedicar este proyecto de grado a mi familia, en especial a mis padres


por creer en mí y apoyarme en todo lo que me fue necesario como siempre
lo han hecho y a mis hermanos por estar siempre cuando los necesito

César Augusto Penilla Rivera


RESUMEN

Este documento presenta el desarrollo de una aplicación de realidad aumenta para las
instalaciones interactivas “Yurupari”, “Pachamama”, “Chiminigagua” y “bachue” que
son parte del proyecto “Los sietemundos de Samoga”.

Este proyecto busca fomentar la apropiación del territorio cafetero, ofreciendo a los
usuarios diferentes actividades interactivas. Este proyecto fue propuesto por el museo
interactivo Samoga de la Universidad Nacional de Manizales.

El alcance del proyecto es desarrollar una aplicación con contenido de realidad


aumentada, que enseñe un poco sobre la cultura y saberes regionales de la zona
cafetera del país.

El contenido del aplicativo para el mundo del aire, gira entorno a un personaje
modelado en 3D, „Don Ponchito‟, que representa un cafetero colombiano. Mediante
botones en una interfaz de usuario, se tiene la opción de acceder a la información e
historia de cada elemento típico que acompaña al personaje.
ABSTRACT

This paper presents the development of an augmented reality application for interactive
installations "Yurupari", "Pachamama", "Chiminigagua" and "Bachue" that are part of a
project " Los siete mundos de Samoga ".

the project seeks to promote ownership of the “territoriocafetero‟s”, providing users with
learning experiences.

The scope of the project is to develop an application with augmented reality content,
that teach a little about the culture and regional knowledge of the “territoriocafetero‟s”, of
the country.

The content of the application for the world "Yurupari", revolves around a 3D character
„Don Ponchito'. Using buttons on an interface the user have the option to access
information and history of each typical element that accompanies this character.
TABLA DE CONTENIDO

INTRODUCCIÓN ............................................................................................................ 1
CAPÍTULO 1 ................................................................................................................... 2
DESCRIPCIÓN DEL PROBLEMA Y OBJETIVOS .......................................................... 2
1.1 PLANTEAMIENTO DEL PROBLEMA ................................................................... 2
1.2 OBJETIVOS .............................................................................................................. 5
1.2.1 Objetivo General .................................................................................................... 6
1.2.2 Objetivosespecíficos .............................................................................................. 6
CAPITULO 2 ................................................................................................................... 6
MARCO TEÓRICO Y PROYECTOS RELACIONADOS ................................................. 6
2.1 MARCO TEÓRICO.................................................................................................... 6
2.1.1 RealidadAumentada ............................................................................................... 6
2.1.2Realidadaumentadaen el proceso de enseñanza-aprendizaje................................ 9
2.1.3 Usabilidad ............................................................................................................ 10
2.1.4MuseografíaInteractiva .......................................................................................... 12
2.2 ANTECEDENTES ................................................................................................... 12
2.2.1 Un Regalo para Atenea - MuseoBritánico ............................................................ 13
2.2.2 Augmentedreality Neanderthal -Museobritánico de Historia Natural .................... 14
2.2.3 Streetmuseum - Museo de Londres ..................................................................... 14
CAPÍTULO 3 ................................................................................................................. 15
METODOLOGIAS Y TEORÍA DE APRENDIZAJE APLICADA ..................................... 15
3.1METODOLOGÍAS .................................................................................................... 16
3.1.1 Diseño centrado en el usuario .............................................................................. 16
3.1.2Metología Scrum ................................................................................................... 18
3.2 TEORÍA DEL APRENDIZAJE ELEGIDA ............................................................. 22
CAPÍTULO 4 ................................................................................................................. 23
EVALUACIÓN Y ELECCIÓN DE LA HERRAMIENTA PARA EL DESARROLLO DE LA
REALIDAD AUMENTADA EN EL APLICATIVO ........................................................... 23
4.1 CONTEXTOS DE EVALUACIÓN ............................................................................ 24
4.2 BÚSQUEDA DE HERRAMIENTAS EXISTENTES POR PARTE DEL AUTOR ...... 25
4.3 ANALISÍS DE LOS SDK ELEGIDOS ...................................................................... 28
4.3.1 Evaluación de cada SDK de acuerdo a los parámetroselegidos .......................... 29
CAPITULO 5 ................................................................................................................. 33
DESARROLLO.............................................................................................................. 33
5.1 ANÁLISIS DE REQUISITOS ................................................................................... 33
5.1.1 Análisis Etnográfico .............................................................................................. 33
5.1.2 Análisis contextual de tareas................................................................................ 35
5.1.3 Objetivos de la usabilidad [11],[25] ...................................................................... 36
5.1.4 Modelado de usuario ............................................................................................ 39
5.1.5 Personas .............................................................................................................. 39
5.2 DISEÑO .................................................................................................................. 40
5.2.1 Diseño de la actividad .......................................................................................... 40
5.2.1.1 Análisis de tareas: ............................................................................................. 40
5.2.1.2 Modelo conceptual ............................................................................................ 40
5.2.1.3 Diseño visual ..................................................................................................... 41
5.2.3 Diseño de estilo .................................................................................................... 41
5.2.4 Diseño del Personaje ........................................................................................... 42
5.2.4 Diseño de interfaz ................................................................................................ 46
5.2.5 Marcadores .......................................................................................................... 58
5.2.5.1 Recomendaciones para una imagen sea un buen Image Target .................... 59
CAPÍTULO 6 ................................................................................................................. 62
EVALUACIÓN Y RESULTADOS .................................................................................. 62
6.1 RESULTADOS DE LA PRUEBA EN CONTEXTO ESCOLAR ................................ 63
6.1.1 Preguntas ............................................................................................................. 63
6.2 PREGUNTAS ABIERTAS A LOS NIÑOS ............................................................... 68
CAPITULO 7 ................................................................................................................. 69
IMPLEMENTACIÓN ...................................................................................................... 69
7.1EL MODELO 3D DEL PERSONAJE CON SUS ANIMACIONES RESPECTIVAS: .. 70
7.2 LOS AUDIOS (VOZ DEL PERSONAJE Y EFECTOS SONOROS) ........................ 71
7.3 LAS IMÁGENES (ICONOS E IMÁGENES) ............................................................. 72
CAPITULO 8 ................................................................................................................. 80
CONCLUSIONES Y RECOMENDACIONES ................................................................ 80
8.1 CONCLUSIONES ................................................................................................... 80
8.2 RECOMENDACIONES ........................................................................................... 81
REFERENCIAS............................................................................................................. 83
TABLA DE ILUSTRACIONES

ILUSTRACIÓN 1: MODELO 3D DE LOS MÓDULOS PARA CADA MUNDO ......... 3


ILUSTRACIÓN 2: CONTENIDO MUNDO DEL AIRE .............................................. 4
ILUSTRACIÓN 3: VISTA GENERAL UBICACIÓN DE LOS COMPONENTES ....... 5
ILUSTRACIÓN 4: APLICACIÓN UN REGALO PARA ATENEA ........................... 13
ILUSTRACIÓN 5: APLICACIÓN AUGMENTED REALITY NEANDERTHAL ........ 14
ILUSTRACIÓN 6: APLICACIÓN STREETMUSEUM............................................. 15
ILUSTRACIÓN 7: MODELO METODOLOGÍA MPIU+A ........................................ 16
ILUSTRACIÓN 8: MODELO ESQUEMA METODOLÓGICO ................................ 17
ILUSTRACIÓN 9: MODELO CONCEPTUAL ........................................................ 41
ILUSTRACIÓN 10: PROPUESTA INICIAL DE PERSONAJES ............................. 42
ILUSTRACIÓN 11: PROPUESTA FINAL DE PERSONAJES ............................... 43
ILUSTRACIÓN 12: PERSONAJE ELEGIDO PARA LA APLICACIÓN .................. 43
ILUSTRACIÓN 13: PERSPECTIVAS DEL PERSONAJE ..................................... 44
ILUSTRACIÓN 14: PERSONAJE MODELADO EN 3D......................................... 44
ILUSTRACIÓN 15: EXPRESIONES Y OBJETOS DEL PERSONAJE .................. 45
ILUSTRACIÓN 16: OBJETO EN 3D DEL PERSONAJE ....................................... 46
ILUSTRACIÓN 17: BURRO DIBUJADO Y MODELADO ...................................... 46
ILUSTRACIÓN 18: PALETA DE COLORES ......................................................... 47
ILUSTRACIÓN 19: TIPOGRAFÍA.......................................................................... 48
ILUSTRACIÓN 20: NOMBRES DE LOS MUNDOS ILUSTRADOS ...................... 48
ILUSTRACIÓN 21: MENÚ PROTOTIPO UNO (1) ................................................ 49
ILUSTRACIÓN 22: PROTOTIPO UNO (1) ............................................................ 50
ILUSTRACIÓN 23: SPLASH ................................................................................. 51
ILUSTRACIÓN 24: MENÚ PRINCIPAL ................................................................. 51
ILUSTRACIÓN 25: PROTOTIPO DOS (2) ............................................................ 52
ILUSTRACIÓN 26: MENÚ HAMBURGUESA ........................................................ 52
ILUSTRACIÓN 27: DISEÑO CÁMARA ACTIVADA .............................................. 53
ILUSTRACIÓN 28: BOTÓN ATRÁS...................................................................... 55
ILUSTRACIÓN 29: BOTONES FÍSICOS .............................................................. 56
ILUSTRACIÓN 30: BOTÓN DE INSTRUCCIONES .............................................. 56
ILUSTRACIÓN 31: INSTRUCCIONES.................................................................. 57
ILUSTRACIÓN 32: ADVERTENCIA PARA BUSCAR EL MARCADOR ................ 58
ILUSTRACIÓN 33: IMAGE TARGET .................................................................... 60
ILUSTRACIÓN 34: MARCADORES DEL APLICATIVO........................................ 61
ILUSTRACIÓN 35: INSPIRACIÓN DE DISEÑO PARA MARCADORES .............. 62
ILUSTRACIÓN 36: GRAFICO PREGUNTA 1 ....................................................... 64
ILUSTRACIÓN 37: GRAFICO PREGUNTA 2 ....................................................... 64
ILUSTRACIÓN 38: GRAFICO PREGUNTA 3 ....................................................... 65
ILUSTRACIÓN 39: GRAFICO PREGUNTA 4 ....................................................... 66
ILUSTRACIÓN 40: GRAFICO PREGUNTA 5 ....................................................... 66
ILUSTRACIÓN 41: GRAFICO PREGUNTA 6 ....................................................... 67
ILUSTRACIÓN 42: GRAFICO PREGUNTA 7 ....................................................... 68
ILUSTRACIÓN 43: RIGGING MODELO 3D .......................................................... 71
ILUSTRACIÓN 44: ICONOS ................................................................................. 73
ILUSTRACIÓN 45: RETÍCULA LOGO .................................................................. 73
ILUSTRACIÓN 46: RETÍCULA DE ORGANIZACIÓN ........................................... 75
ILUSTRACIÓN 47: MENÚ UBICADO EN LA RETÍCULA ..................................... 76
ILUSTRACIÓN 48: CARGANDO........................................................................... 77
ILUSTRACIÓN 49: BARRA MENÚ ....................................................................... 78
ILUSTRACIÓN 50: BOTÓN DE FOTO.................................................................. 79

LISTA DE TABLAS

TABLA 1: PRODUCT BACKLOG CON TAREAS DETALLADAS ................................. 19


TABLA 2: PORCENTAJE USO DE SISTEMAS OPERATIVOS .................................... 35
INTRODUCCIÓN

La idea de construir un museo de ciencia, juego y tecnología surge en el año


1996, gracias a una convocatoria nacional que realizó la Universidad Nacional de
Colombia para desarrollar el proyecto Red de Museos y Centros Interactivos y en la
que la propuesta de la ciudad de Manizales resultó favorecida.

Samoga como se le llamó, buscó desde sus inicios ser un ente de carácter
público, para actividades educativas y culturales de beneficio social, concebido como
instrumento estratégico para el desarrollo regional y estatal, mediante la ejecución de
diversos proyectos científicos, académicos y culturales, en los que se materialicen
procesos de creación, adquisición y transferencia de conocimientos y el fortalecimiento
de valores para la endogenización de la ciencia y la construcción de la nación
colombiana.

Su nombre se desprende de la cultura Umbra que se ubicó en el occidente de


Caldas, siendo la tercera lengua del departamento, después de la lengua Castellana y
la lengua Embera.

Sus principios se rigen, principalmente, por criterios de equidad, fundamentado


en el fomento de la creatividad y las actividades que permitan el libre acceso a los
conocimientos de diferentes áreas temáticas, relacionada con la ciencia y la
tecnología.[1]

Los módulos interactivos del museo Samoga, es un proyecto de la Universidad


Nacional, sede Manizales, que para su realización busca el apoyo de la Universidad de
Caldas y su maestría en Diseño y Creación Interactiva, así como su doctorado en este
mismo campo, para la ejecución de los proyectos propuestos; sin embargo, en la
socialización a la Universidad aliada, se contó con la participación de uno de los
docentes de la Universidad San Buenaventura de Cali, quien llevó la propuesta como
idea de proyecto de grado para los estudiantes de 'último semestre de Ingeniería

1
Multimedia, con el fin de crear instalaciones interactivas que aporten a la dotación de
este espacio con aplicaciones de alto nivel en interacción e impacto para sus visitantes.

CAPÍTULO 1

DESCRIPCIÓN DEL PROBLEMA Y OBJETIVOS

1.1 PLANTEAMIENTO DEL PROBLEMA

Con el propósito de potencializar su misión que busca “contribuir a la promoción


del conocimiento científico orientado al desarrollo, promoviendo la C&T y rescatando
los saberes regionales como parte de la cultura local, en beneficio de la capital de
Caldas y de su área de influencia”. [1]y de esta manera, mejorar la oferta de su
componente educativo, Samoga, desde el año 2005, ha iniciado un proceso de
reingeniería para fortalecer el cumplimiento de su misión, con la que pretende enseñar
a niños y adultos, mediante recursos interactivos, toda una cultura de información y
conocimientos.

Por lo anterior, ha implementado espacios digitales para la interactividad de los


usuarios, donde en cuatro módulos llamados “mundos”,desea desarrollar diferentes
contenidos digitales e interactivos, que faciliten la enseñanza. Los módulos o “mundos”,
son también conocidos como los cuatro elementos: agua, tierra, aire y fuego ó
`Bachué`, Pachamama, Yuruparí y Chiminigagua, respectivamente, como podemos ver
en la siguiente figura:

2
Ilustración 1: Modelo 3D de los módulos para cada mundo

De esta manera se puede observar que Samoga ya tiene una idea de las
aplicaciones a realizar. Sin embargo, la figura muestra que no son completamente
claras, dejando dudas sobre lo que las aplicaciones deberían mostrar y cómo el usuario
interactuará con ellas.[2]

Lo anterior, se debe a que en el proceso de desarrollo de estos módulos, el


museo no cuenta con el personal capacitado para el desarrollo de este tipo de
aplicaciones. Por tanto, al buscar interactividad y un contenido digital, Samoga hace
una propuesta de cuatro proyectos. A continuación se muestran las propuestas
planteadas por el museo:

 Recorrido en 3D
 Juego básico multiusuario
 Aplicación con realidad aumentada
 Juego básico

3
Ilustración 2: Contenido mundo del aire

Sin embargo, con base a la documentación previamente seleccionada (ver figura


2) para el desarrollo del mundo interactivo `yurupari` o del aire, el presente trabajo de
grado se basó en el desarrollo de un prototipo de realidad aumentada, para lo cual se
estudió, de manera detallada, la información que el museo suministró [3] y de esta
manera, fue posible desarrollar un contenido para el aplicativo que sintetice la
información destinada para cada mundo interactivo, que permita al espectador conectar
todos sus sentidos, logrando una estimulación más profunda de esa realidad que se le
presenta.

El contenido del aplicativo para el mundo del aire, gira en torno a un cafetero
colombiano, „Don Ponchito‟, con el que se pretende enseñar a los visitantes sobre la
cultura y saberes regionales de esta zona cafetera del país.

La aplicación contará con un menú para elegir el mundo al cual se desea


acceder y así visualizar su contenido. Cabe señalar, que para los fines de éste
proyecto, se desarrollará el mundo del aire „Yurupari‟, por lo que, en un principio, el
aplicativo sólo tendrá la opción del aire disponible.

4
El mundo del aire cuenta con un personaje modelado en 3D que representa un
cafetero colombiano. Mediante botones en un interfaz de usuario se tiene la opción de
acceder a la información e historia de cada elemento típico que acompaña a este
personaje.

Con animaciones y audio, el personaje explicará a los usuarios la información


seleccionada para cada componente al cual se puede acceder mediante la interfaz
gráfica.

El aplicativo funciona apuntando la cámara de un dispositivo móvil hacia un


marcador que estará ubicado en un espacio del museo como se muestra en la figura 3

Ilustración 3: Vista general ubicación de los componentes

1.2 OBJETIVOS

5
1.2.1 Objetivo General

Desarrollar un prototipo de un producto multimedia/Instalación para uno de los


mundos de la sala de módulos del museo Samoga, por medio del cual los visitantes
aprendan acerca del territorio cafetero.

1.2.2 Objetivosespecíficos

 Realizar una investigación sobre las herramientas de realidad aumentada más


adecuada para el proyecto.
 Analizar y seleccionar la información más relevante de los temas considerados
por el museo Samoga para exhibir en la aplicación.
 Construir el prototipo de la instalación
 Evaluar mediante grupos de prueba la usabilidad del producto.

CAPITULO 2

MARCO TEÓRICO Y PROYECTOS RELACIONADOS

2.1 MARCO TEÓRICO

2.1.1 RealidadAumentada

La Realidad Aumentada o AR por sus siglas en inglés (AugmentedReality) es


una tecnología que mezcla objetos virtuales con el mundo real, interactuando en tiempo
real, lo que permite la plena integración de ambos mundos es un software instalado en
un dispositivo.
Un sistema de realidad aumentada tiene las siguientes características:
 Combina lo real y lo virtual. La información digital es combinada con la realidad.

6
 Funciona en tiempo real. La combinación de lo real y lo virtual se hace en tiempo
real.
 Registra en tres dimensiones. En general la información aumentada se localiza o
“registra” en el espacio. Para conservar la ilusión de ubicación real y virtual, ésta
última tiende a conservar su ubicación o a moverse respecto a un punto de
referencia en el mundo real.

Se utiliza información e imágenes generadas por computador en las aplicaciones


de realidad aumentada que son generadas por computador y superpuestas en el
campo de visión de los usuarios. Por ejemplo sobre la imagen de un marcador que una
persona captura se visualiza un objeto virtual con el que podemos interactuar. Por lo
general las información aumentada suele ser visual, pero también puede ser auditivita,
olfativa o táctil.

Cuando se crean mundos por ordenadores se denomina “realidad virtual” y se


diferencia de la “realidad aumentada” en que con esta tecnología se ve en el mundo
real toda la información que hay disponible en los ordenadores y se puede hacer
visible. La información está y existen dispositivos que la pueden leer pero el resto es
que conocer que se quiere ver y como se quiere representar.

El auge actual de la realidad aumentada se debe a que están al alcance de


todos, son sencillas y se pueden llevar a la vida cotidiana mediante aplicativos. Por
ejemplo hay aplicaciones que permiten ver como se ven unas gafas o un vestido en un
usuario, un mueble en la sala de una persona o tener información sobre algo que se
esté contemplando. Actualmente la visualización de los contenidos digitales sobre la
escena real se puede hacer desde cualquier dispositivo móvil de última generación. [4]

Diversos elementos intervienes en un entorno de realidad aumentada:

 Los dispositivos de visualización mezclan datos superponiendo elementos


virtuales sobre la realidad capturada por una cámara y estos dispositivos pueden
7
ser gafas, un dispositivo móvil de última generación, un monitor o la proyección
de objetos virtuales.
 Para obtener y tratar datos del entorno se necesitan sensores como GPS,
sensores inerciales, brújulas además de técnicas de visión por computador. Es
necesario hacer la alineación para conocer la posición visual del usuario
respecto al mundo y así poder construir la escena aumentada.
 Para la interface de interacción con el usuario se suelen usar marcadores
tangibles o una interface natural analizando las extremidades del usuario.

En un sistema de realidad aumentada se necesitan realizar cuatro tareas:


1. Capturar la escena: Se debe identificar el escenario que se quiere aumentar
realizando reconocimiento visual mediante un dispositivo que obtenga la escena
que posteriormente será procesada.
2. Identificación de la escena: Se averigua que escenario físico real es el que se
quiere aumentar con información digital, siendo un proceso que se puede
realizar utilizando marcadores o sin utilizarlos. Un marcador es un objeto físico
cuya imagen es conocida por el sistema pero los marcadores que se pueden
reconocer son limitados. Cuando no se usan marcadores el proceso de
identificación no es mediante reconocimiento de imágenes o mediante la
estimación de la posición, en este caso el escenario se reconoce utilizando el
GPS y la brújula para determinar qué es lo que está viendo el usuario.
3. Mezclar la realidad y la información aumentada: Esta tarea consiste en sobre
poner en la escena real capturada la información digital que se quiere aumentar,
la cual generalmente es de tipo visual con elementos 2D y 3D pero también
puede ser auditiva.
4. Visualizar: Esta última tarea que se realiza se puede hacer en sistemas de bajo
coste como dispositivos móviles o computadores personales, o se puede realizar
en sistemas de alto coste como los Head Up Displays (HUDs).

8
2.1.2Realidadaumentadaen el proceso de enseñanza-aprendizaje

Para el estudiante resulta mucho más fácil entender temas complejos de


materias como física, química y matemáticas con explicaciones interactivas. La realidad
aumentada es una herramienta que le permite al estudiante experimentar y entender el
problema planteado siendo una herramienta alternativa en la enseñanza y superación
de estas dificultades permitiendo al estudiantes experimentar emociones y
pensamientos como si estuviese tratando el problema en la vida real. Para aprovechar
el potencial que tiene la realidad aumentada para el aprendizaje tiene que estar
sintonizada con los modelos pedagógicos y estilos de aprendizaje de los usuarios que
participen en una experiencia de aprendizaje específica.

La experiencia de interactuar con contenidos de realidad aumentada ofrece un


gran potencial para la exploración y descubrimiento fortuito de la información conectada
con el mundo real. Al interactuar con esta clase de contenidos se espera que se
beneficien las personas que requieren un nivel de exploración mayor en los temas que
se enseñan.

Con la inclusión de la realidad aumentada en el proceso de enseñanza, se


proponen nuevos escenarios de aprendizaje. “Esto conlleva un cambio en la
descripción de actividades de aprendizaje (incluyendo elementos relacionados al
contexto que apoyen el proceso de aprendizaje en cualquier momento y en cualquier
lugar) y la construcción de materiales educativos altamente interactivos y accesibles
para reforzar el interés en la adquisición del conocimiento y la relación de los conceptos
aprendidos con recursos del entorno.”

Los contenidos basados en realidad aumentada apoyan el proceso de


aprendizaje brindando soporte a la compresión de conocimientos procedimentales
necesarios para entender los conceptos aprendidos mediante la interacción mediante
los recursos que hacen parte del entorno del individuo. Estos contenidos mostrados en

9
aplicaciones de realidad aumentada suelen ser sorprendentes y provocan gran interés
y curiosidad, por lo cual es importante separar este efecto del verdadero beneficio que
estos contenidos ofrecen a la mejora de la educación.[5]

2.1.3 Usabilidad

Pocas veces se pasa por la cabeza de los usuarios que tecnología tiene el
dispositivo que tienen a la mano en el momento de realizar una tarea, lo único que
preocupa es comprender y dominar la situación para lograr el objetivo de la manera
más cómoda posible, sin querer decir que todos los dispositivos y diseños deben ser
fáciles de usar ni se deba entender su funcionamiento inmediatamente.

La usabilidad es fundamentada en nuestra propia comprensión, de la


comprensión a aquellos que se dirige y las necesidades demandadas en cada
momento o situación.

“El diseño es un proceso interactivo donde las necesidades y las capacidades de


los usuarios son los factores principales que determinan el proceso de diseño”. Cañas y
Waerns.

La usabilidad cuenta con un recorrido histórico que ha ido dándole consistencia


a su definición como atributo de calidad, satisfacción y aceptación de los usuarios
sobre los productos y servicios interactivos que se crean.

“Si no se valora inicialmente la concepción y utilidad de las cosas, poco o nada


puede importar su usabilidad.”

La utilidad de un sistema se entiende como “un medio para conseguir un


objetivo” que tiene un componente funcional y otro que se basa en la forma como los
usuarios pueden usar esa funcionalidad. Diferentes autores han definido usabilidad con
diferentes criterios: Shackel, 1991; Wixon y Wilson, 1997; Shneiderma, 1998, pero los
criterios más conocidos fueron los definidos por Jacob Nielsen:

10
 Facilidad de aprendizaje: El sistema debe ser fácil de aprender, de tal manera
que el usuario pueda empezar a trabajar con él lo más rápido posible,
 Eficiencia de uso: Al aprender a usar el sistema, el nivel de productividad para
completar tareas por parte del usuario, debe ser alto.
 Facilidad de memorización: Un usuario que ya ha usado el sistema cuando
tenga la necesidad de volver a usarlo, debe de ser más fácil de recordar y no
tardara tanto tiempo como un usuario que no lo ha usado, por lo cual la curva de
aprendizaje debe ser significativamente menor.
 Errores: Él sistema debe generar pocos errores, los cuales al producirse deben
de dar una retroalimentación clara y rápida al usuario, a la vez de emplear
mecanismos para recuperarse del error.
 Satisfacción: Hace referencia a la impresión subjetiva que se lleva el usuario al
usar el sistema.

De acuerdo a lo anterior surgen los elementos clave para valorar la evaluación


de la usabilidad de un producto:

 Contexto de uso
 Usuarios del sistema
 Necesidades y objetivos de esos usuarios
 Mediciones sobre la efectividad, eficiencia y satisfacción de uso.

Diferentes disciplinas tienden a explicar el concepto de Usabilidad en formas que


se ajustan a sus propios propósitos, y por tanto suelen depender de un contexto
particular. En todo lo relacionado con la interacción persona-tecnología puede decirse
que está muy vinculada a la facilidad de uso, pero eso es sólo una parte de la
ecuación. La ISO (Internacional OrganizationforStandarization), dentro del capítulo de
Ingeniería de Software (Calidad de producto- Modelos de calidad) define el concepto de
usabilidad como “la medida en la que un producto se puede usar por determinados

11
usuarios para conseguir objetivos específicos con efectividad, eficiencia y satisfacción
en un contexto de uso especificado” (ISO/IEC 9126). [6]

2.1.4MuseografíaInteractiva

Los museos tradicionalmente han transmitido información es estática y absoluta,


con exhibiciones inertes que no cambian en el tiempo, por lo cual hoy en día carecen
de atractivo para los jóvenes; pero esto no supone que los museo tengan que ser
iguale e ir desapareciendo ya que en este tiempo se puede replantear la forma de
comunicación entre el museo y los visitantes.

Se puede definir la museografía interactiva como “la disciplina tecno científica


que se ocupa de orientar u establecer descodificadores de los conceptos u objetos que
se muestran o exponen en un museo o espacio de presentación del patrimonio (el
medio de comunicación) de forma que los receptores tengan la capacidad para
controlar los mensajes no lineales hasta el grado establecido por el emisor, dentro de
los límites de propio medio de comunicación”. [7]

Por lo tanto la interactividad de la museografía se conoce como la capacidad que


el museo tiene para darle mayor poder a los usuarios ofreciendo posibilidades de
selección de contenidos, expresión y comunicación, para la construcción del
conocimiento de cada individuo.

2.2 ANTECEDENTES

Se muestran a continuación unos ejemplos de algunos museos que han optado


por implementar realidad aumentada para algunas exhibiciones abiertas al público en
general que visite el museo.

12
2.2.1 Un Regalo para Atenea - MuseoBritánico

Esta aplicación tiene como fuerte los métodos de interacción con piezas propias
del museo Británico. Se trata de un juego que usa los dioses, esculturas y bajorrelieves
para incentivar al descubrimiento por parte de los usuarios que visitan el museo y hacer
uso de este aplicativo

Los objetos que más se encuentran en las salas de la parte del muso en la que
se usa el aplicativo son estatuas que al ser piezas incompletas presentan muchos
problemas para que los niños logren comprenderlas; la aplicación tiene una solución
para esto ya que al dirigir el dispositivo hacia los marcadores en poco tiempo se
presenta en la pantalla contenidos interactivos que completan las compresión para los
niños y enseñan historias fascinantes.

“La aplicación, está diseñada para tabletas Samsung Galaxy Tab 10.1 y está dirigida a
los niños de 7-11 años. Todo el juego tiene una duración aproximada de 45
minutos.”[8]

Ilustración 4: Aplicación un regalo para atenea

13
2.2.2 Augmentedreality Neanderthal -Museobritánico de Historia Natural

Con esta aplicación el museo Británico de Historia Natural hace que un hombre
de Neanderthal (Homo neanderthalensis), que se extinguió hace unos 30.000 años
aproximadamente, se pasee por tu casa en cualquier momento.

Esta aplicación combina las imágenes reales que enfoca la cámara web o
cámara del dispositivo con imágenes que se generan por computadora y hace la
reconstrucción de un Neanderthal en 3Dque cuenta con animaciones para darle más
realismo. [9]

Ilustración 5: Aplicación Augmentedreality Neanderthal

2.2.3 Streetmuseum - Museo de Londres

Es una aplicación desarrollada para usuarios de IOS que permite combinar


paseos por la ciudad de Londres en una experiencia interactiva con la historias de esta
ciudad.

Funciona con la geolocalización del usuario que dirigiendo la cámara de su


dispositivo móvil que corre el aplicativo, hacia el sitio en el que se encuentra, que hace
14
la función de marcador, superpone en la realidad que capta la cámara, imágenes
históricas acompañadas de un texto de explicación sobre lo que observa. [10]

Ilustración 6: Aplicación Streetmuseum

CAPÍTULO 3

METODOLOGIAS Y TEORÍA DE APRENDIZAJE APLICADA

En este capítulo se describe la metodología elegida y como fue aplicada a este


proyecto. En este apartado también se describe la teoría de aprendizaje elegida para
favorecer el óptimo aprendizaje del contenido que se pretende enseñar al público del
museo que haga uso del aplicativo.

15
3.1METODOLOGÍAS

3.1.1 Diseño centrado en el usuario

Para el desarrollo del proyecto se toma como referencia la metodología modelo


de Proceso de la Ingeniería de la Usabilidad y de la Accesibilidad, MPIu+a (Ver Figura
1). Esta metodología del diseño centrado en el usuario (DCU) coloca al usuario en el
centro del proceso de diseño, teniendo como foco los aspectos cognitivos que
intervienen en la interacción entre el usuario y el producto multimedia, permitiendo una
optimización de la usabilidad de la multimedia que se está desarrollando.[11]

Ilustración 7: Modelo metodología MPIu+a

MPIu+a está basada en una serie de módulos en la que se puede ver


claramente la evolución de la fases de desarrollo, con un nodo de actividades de la
IPO.

En la ingeniería de la usabilidad y en la IPO, hay dos conceptos que se deben


realizar de una manera sistemática desde el comienzo del desarrollo: El Prototipado y
la evaluación.

16
En la figura 5 se puede ver claramente en codificación de colores tres conceptos
a modo de tres Pilares básicos:

 La Ingeniería del Software, en el formato “clásico” de ciclo de vida en cascada


iterativo o evolutivo (columna de la izquierda de color azul).
 El prototipado (columna central de color verde), como metodología que engloba
técnicas que permitirán la posterior fase de evaluación.
 La evaluación (columna de la derecha, de color amarillo) que engloba y
categoriza a los métodos de evaluación existentes.

Debido a las limitaciones de tiempo para realizar este proyecto y a que su


metodología es extensa, no se llevará cabo en su totalidad, sino que se tomarán partes
que ayuden al cumplimiento del proyecto, para lo que se plantea el siguiente
esquema.[12]

Ilustración 8: Modelo esquema metodológico

Teniendo en cuenta el esquemas anterior se proponen las siguientes


actividades

Análisis
 Contenido de la aplicación
 características de los usuarios
17
 Requisitos técnicos del desarrollo
 Requisitos definidos por el cliente
 Recursos humanos disponibles
 Tiempo de vida del producto
 Actualizar los contenidos
 Modelado de usuario

Diseño
 Diseño conceptual
 Diseño visual.
 Diseño Personaje
Prototipo
 prototipo de Baja fidelidad
 prototipo de alta fidelidad

Evaluación

En la universidad
 Recorrido cognitivo
 thinkingallowed

En el colegio
 Recorrido cognitivo
 Thinkingaloud

3.1.2Metología Scrum

La metodología Scrum se implementa con equipos que trabajan juntos en el


desarrollo de un producto. Para desarrollar productos usando Scrum, se debe ir
haciendo en pequeños pedazos los cuales se van creando uno encima del creado
previamente. La construcción de un producto en pequeños pedazos beneficia a los
18
equipos de trabajo estimulando la creatividad, mejorando la retroalimentación y
permitiendo el cambio para hacer solo lo que se necesita.

Scrum proporciona un conjunto de reglas que da los cimientos necesarios para


que los equipos de trabajo centren su habilidad de innovación para la solución de un
desafío que aparenta ser difícil de alcanzar.

La metodología Scrum se aplica para la construcción de productos complejos,


sin embargo el proceso de aplicar la metodología es simple y se rige por tres roles
principales:[13]

1. ProductOwnerdetermina que se necesita construir en los días o semanas que


dure cada iteración.
2. Developmentteamsse encargan de construir lo que se estableció para el tiempo
que dure la iteración y luego demostrar lo que han logrado y a partir de esto el
productownerdetermina que será lo siguiente a construir.
3. Scrum Masters debe garantizar que el proceso se de en las mejores
condiciones y deben ayudar a mejorar continuamente el equipo y producto que
se crearon.

A continuación se muestran que elementos de scrum fueron implementados


para el desarrollo de este proyecto.

ProductBacklog: Es el principal elemento de scrum y se conoce como pila del


producto. Básicamente es un listado de ítems o características del producto que se va
a construir y es priorizado por el ProductOwner. La tabla 1 describe en detalle cada
tarea que se identificó para el productbacklog realizado en este proyecto.

Diagrama de flujo Se realiza en illustrator un diagrama


Diseño general que muestra la funcionalidad del
aplicativo

19
Diagrama general En ilustrator se hace una ilustración
que explica y muestra como un
usuario usa la aplicación en un
1modulo
Documento de explicación Se explica mediante texto la
general elección de
los temas para la aplicación y cada
sección que compone el aplicativo
Solicitud de elementos de El museo provee elementos base
diseño al museo para el diseño de la aplicación como
tipografía, logos, etc
Diagrama de flujo Se detalla el diagrama de flujo
detallado inicial, con los elementos provistos
por el museo para el diseño y con
ello detallarlo mas
Documentos de Se completa el documento
explicación general explicativo de la aplicación y
detallado elección de contenido, con los
elementos provistos la encargada
del proyecto en el museo Samoga

Conceptualización del Se sacan las características de los


Diseño de personajes personaje personajes protagonistas del
aplicativo, de acuerdo al contexto en
el que esta, publico que va dirigido e
información que se quiere enseñar
Investigar personajes de Observar personajes de aplicativos,
otras aplicaciones juegos, series, etc, que puedan
brindar ideas de un buen diseño
para que sea de agrado para el
público
Tipos de dibujo para Elegir tipo de dibujo que mejor se
diseño de personajes adapte al contexto para el diseño del
personaje

Elección de elementos De acuerdo a las necesidades y


Diseño y creación de para la interfaz gráfica requerimientos de la aplicación se
Interfaz decide qué tipo elementos como
botones y sliders tendrá la interfaz
gráfica del aplicativo
Investigar Al ser Unity la herramienta elegida
recomendaciones para previamente para el desarrollo, se
optimizar trabajo de gui debe tener en cunta las
en Unity recomendaciones de trabajo para el
desarrollo de la aplicación como el
tamaño de imágenes, formato de
20
modelos 3D, usos de elementos
para la interfaz, etc.
Diseño de elementos Teniendo en cuenta los parámetros
elegidos para la interfaz de hci para el diseño de interfaces,
gráfica se diseñan los elementos que tendrá
la interfaz, como botones, sliders,
etc.
Investigar pruebas Se hacen pruebas con usuarios para
adecuadas para la elegir los diseños más agradables
elección del diseño de los para la gente de los elementos de la
elementos de la interfaz interfaz
Creación de los Usando softwares como illustrator y
elementos de la interfaz Photoshop, se crean los elementos
dela interfaz en base a los diseños y
elección previos

Elección de los textos de Basados en la información con la


Creación del guion para información que cuenta el museo, se selecciona
textos y producción del la información óptima para explicar
audio el contexto y características del
personaje
Creación de los textos Con la información elegida, se crean
como UI los textos en objetos UI que se
integran en el aplicativo
Grabación de los audios El aplicativo tiene un componente
en base a los textos sonoro, por lo cual se graba la
narración de los textos
seleccionados
Edición de los audios Mediante estaciones de edición de
audio, se hacen arreglos y mejoras a
las grabaciones previas

Programación elementos Se crean los eventos para cada


Scrips de interfaz componente de la interfaz
previamente creado
Cambios de la Modificar elementos en los códigos
programación existente fuente del sdk de vuforia
en el sdk

Modelado 3D de cabeza y En base al diseño del personaje, se


Modelado 3D cuerpo hace el modelado 3D de este
(personaje)
Modelado de accesorios Se modela en 3D los accesorios que
acompañan al personaje
Texturizado de los De acuerdo a las características del
modelos 3D personaje y conclusiones en el
21
diseño se texturiza el modelo 3D
Adecuar personaje para la El modelo 3D se debe animar, por lo
animación cual se hacen los ajustes necesarios
a este para una adecuada
animación

Seleccionar animaciones Teniendo en cuenta las


Animación Modelo 3D para el personaje características del personaje y una
(personaje) investigación previa, se selecciona
el tipo de movimientos
(animaciones) para realizar
Realizar animaciones Se procede a crear animaciones
para el modelo 3D
Programación de Al no ser accionado algún elemento
animaciones automáticas de la interfaz por un breve tiempo, el
personaje hará animaciones
automáticas
Integrar componentes
Crear, integrar y En Unity se importan como assets
programar los assets en todos los elementos creados por
unity basados en los aparte para su programación e
diseños integración

Tabla 1: Product Backlog con tareas detalladas

3.2 TEORÍA DEL APRENDIZAJE ELEGIDA

La teoría que a continuación se describe se decide aplicar para este proyecto


porque es la que mejor se adapta al tipo de enseñanza que un aplicativo de realidad
aumentada puede ofrecer a un niño entre los 7 y 11 años.

Teoría del aprendizaje significativo

Esta teoría psicológica se ocupa de los procesos que el individuo pone en juego
para aprender poniendo énfasis en lo que ocurre cuando el estudiante aprende; la
naturaleza del aprendizaje; las condiciones necesarias para que éste se produzca; los
resultados y en consecuencia su evaluación (Ausubel, 1976)
22
El aprendizaje significativo aborda todos los elementos que garantizan la
adquisición, asimilación y retención del contenido que se le ofrece al aprendiz de tal
modo que tenga significado para el mismo. El aprendizaje significativo es una teoría
que según Pozo (1989) “se ocupa específicamente de los procesos de
aprendizaje/enseñanza de los conceptos científicos a partir de los conceptos
previamente formados por el niño en su vida cotidiana”; lo cual da a entender que el
aprendizaje debe ser una adquisición continua de nuevos saberes a partir de conceptos
previos que tiene el estudiante. Por lo tanto, en este tipo de aprendizaje se postula que
el aprendiz debe relacionar los nuevos conocimientos con los saberes previos que ya
posee por lo tanto el aprendizaje deber ser significativo no memorístico.

La teoría del aprendizaje significativo se trata de una teoría constructiva ya que


el propio individuo es quién genera y construye su aprendizaje.[14]

Constructivismo: El conocimiento resulta de la interacción entre el sujeto y objeto ya


que el origen del mismo no radica en los objetos ni en el sujeto, sino en la interacción
entre ambos.[15]

CAPÍTULO 4

EVALUACIÓN Y ELECCIÓN DE LA HERRAMIENTA PARA EL DESARROLLO DE


LA REALIDAD AUMENTADA EN EL APLICATIVO

Debido a la gran cantidad de herramientas software especializadas en la


construcción de programas, aplicaciones y/o productos de realidad aumentada, es
importante para el desarrollo del proyecto la elección de una que supla de la mejor
manera, las necesidades del proyecto. Por lo anterior, nos apoyamos en el trabajo de
tesis [16].

El investigador plantea que existe poca información sobre el uso de esta


tecnología en espacios como en los museos, por lo que realiza una investigación para

23
la selección de la herramienta, apoyándose en la metodología DESMET, que cuenta
con dos tipos de evaluación: Cuantitativos y cualitativos, dependiendo de parámetros
como: la madurez del investigador, tiempo para las evaluaciones, logística y recursos
monetarios. y se escoge uno de los dos tipos de evaluación.

Para la tesis en mención fueron utilizados ambos; un experimento cualitativo


que se basa en las características de un grupo de usuarios con criterios de evaluación
y métodos estandarizados para el análisis de rasgos y una parte cuantitativa que
permite la toma de decisiones rápidas de los criterios y circunstancias para elegir el
método de evaluación y contextos de evaluación que se muestran a continuación:

Criterios y circunstancias para elegir el método de evaluación.

 El contexto de evaluación
 La naturaleza del impacto esperado al usar la metodología herramienta.
 La naturaleza del objetivo a evaluar
 El alcance (scope) del impacto del método / herramienta.
 La madurez del método/herramienta.
 La curva de aprendizaje asociada al método/herramienta.
 La capacidad medible de la organización o individuo para llevar a cabo la
evaluación.

4.1 CONTEXTOS DE EVALUACIÓN

Además de los criterios, fue necesario analizar el contexto, por lo que


brevemente se describirán aquí: [17]

 Si se necesita elegir un grupo de metodologías/herramientas para un proyecto


individual, la mejor elección para este escenario es la opinión de un experto
basado en “qualitativeeffectsAnalysis".
24
 El método para una organización que inicialmente está realizando una
eliminación de metodologías/herramientas para escoger las mejores y hacer una
lista más pequeñas, debe utilizar “featureanalysis” “Qualitativescreening” sin
embargo otro criterio es necesario si se quiere elegir el siguiente método de
evaluación para la siguiente secuencia de evaluación.

 La evaluación del método que involucre los resultados y los efectos de la


implementación del mismo sobre un proceso o varios procesos ( los cuales
pueden tratarse individualmente o por separado) pueden ser evaluados a través
de una encuesta “survey”, si se tiene datos cualitativos.

Antes y después de la implementación, puede realizarse una


“quantitativesurvey”, de otro modo debe aplicarse una encuesta basada en el
análisis de rasgos “featureAnalysis”.

 Si se pretende hacer la evaluación para adherir un software o herramienta como


parte de una cadena de producción larga ó si se está buscando un producto
para que sea parte de un portafolio específico, en este caso DESMET como
metodología escogida, no será de gran utilidad.

4.2 BÚSQUEDA DE HERRAMIENTAS EXISTENTES POR PARTE DEL AUTOR

En búsquedas iníciales sobre herramientas A.R, el autor observó que hay una
gran cantidad de herramientas y SDKs, que dificultan la elección, por esto es
necesaria la opinión de un experto, por lo que se recurre a la lista realizada por
Gerhard Rimayr, profesor de Realidad Aumentada, enthe Graz University of
Technology,enStyria, Austria.[18]

QualitaviveScreening
25
Con las herramientas ya identificadas se hace una evaluación basada en las
recomendaciones hechas por DESMET, utilizando el método de evaluación
qualitativescreening, que describe un análisis de rasgos de los parámetros sugeridos
por DESMET:

1. Evaluación del proveedor


2. Madures del método/herramienta
3. Factor económico: costo de mantenimiento, licencia, etc.
4. Facilidad de implementación
5. Elegibilidad o compatibilidad con el objetivo final
6. Confiabilidad de la herramienta/método
7. Robustez contra los errores
8. Eficiencia de la herramienta/método en el ámbito de trabajo
9. Eficiencia en término de uso de recursos
10. Elegancia en la que se resuelven algunas de los problemas presentados
11. Usabilidad en términos de los usuarios target en términos de requerimientos de
aprendizaje
a. Calidad de la documentación
b. Curva de aprendizaje
c. Esfuerzo en el entrenamiento
d. Calidad del entrenamiento
e. On-line help
12. Capacidad de mantenimiento de la herramienta
13. Compatibilidad con Herramientas/métodos existentes

Teniendo en cuenta el tiempo para realizar el proyecto, madurez y recursos


económicos se eligen los siguientes factores:

26
1. Factor Económico: Mantenimiento y costos de las licencias para el uso de las
herramientas, incluyendo plug in adicionales, necesarios para su correcto
funcionamiento.

2. Facilidad de implementación: Grado de entendimiento, entrenamiento y


habilidades de computación o de programación necesarias para la correcta
instalación de la herramienta.

3. Compatibilidad con el objetivo final: Se tendrá encuentra las plataformas y


dispositivos sobre los cuales funcione la herramienta ya que es necesario para
el proyecto que el resultado se pueda desplegar en móviles.

4. Robustez contra errores: Información que se puede obtener de la


documentación, pagina web y foros, evaluando el nivel de actualización en
cuanto a la solución de errores.

5. Usabilidad en términos de aprendizaje :Está compuesta por tres sub-


características que determinan la facilidad de aprendizaje de la herramienta:
 Calidad de La documentación: cantidad y calidad de la documentación que
proporciona la empresa, sobre el desarrollo y manutención de la herramienta.
 Esfuerzo en el entrenamiento: se midió la interfaz de la herramienta, facilidad de
sus conceptos y comandos. también tuvo en cuenta el nivel de programación
que se requiere para familiarizarse con la herramienta.
 Calidad del entrenamiento: es decir, que tenga un centro de entrenamiento,
tutoriales o videos sobre el manejo básico, intermedio y avanzado, que permita
conocer cuáles conocimientos, de los anteriormente mencionados, son
requeridos.

27
6. Capacidad de mantenimiento de la herramienta: Para esta parte, el autor
evaluó la herramienta, observando que cuenta con un soporte y realiza
actualizaciones de la misma.

Debido a que el método solo provee una información básica (si/no) sobre
los criterios mencionados, el autor propone una cuantificación de la evaluación
adicionando un concepto de administración conocido como matrices EFE-EFI,
en las cuales los parámetros cuentan con un peso que determina la importancia
del mismo, luego evalúa cada herramienta frente a estas características
dándoles un valor numérico: 1 el valor más bajo, entendiendo que la herramienta
no cuenta con el rasgo y 4 como la mayor calificación. El valor de 1-4 se
multiplica por el peso asignado a la característica; se suman los valores finales
de las está y se presenta un valor cuantitativo.

4.3 ANALISÍS DE LOS SDK ELEGIDOS

De esta se tomaron los 4 mejores resultados: Metaio, Layar, Aurasma y


Wikitube y le da una mención especial Vuforia por ser el SDK más usado y con mayor
reputación en el desarrollo de aplicaciones con realidad aumentada[19]. Tomando
estos resultados y teniendo en cuenta la mención especial se procede a probar cada
una de estas herramientas para conocerlas de primera mano y poder elegir la más
conveniente para la realización del proyecto. Para lo anterior, se siguieron los
siguientes parámetros

1. Instalación: Aunque en la investigación ésta característica fue tomada en


cuenta, es importante asegurarse de la instalación y uso correcto en los
equipos donde se llevarían a cabo el proyecto.
2. Despliegue en dispositivos móviles: Como la instalación, el despliegue
en móviles también es tomado en cuenta, pero no es muy específico en
cómo es este proceso. El objetivo de este proyecto es el desarrollo de
una aplicación para móviles y como se ha mencionado, existen
28
numerosos sistemas operativos, por lo que es importante que la
herramienta seleccionada permita la exportación para múltiples sistemas
operativos con un mismo desarrollo.
3. Manejo de assets: La herramienta debe tener una buen manejo de los
elementos multimedia y assets al utilizar en el proyecto, como también no
debe tener o si las tiene deben ser muy mínimas (que no interfieran con
los objetivos de la aplicación), restricciones del uso de estos elementos.
4. Flexibilidad: la herramienta debe tener una manejo intuitivo y sencillo de
usar, la exportación a las diversas plataformas deber sencilla. También
es importante la pre visualización del desarrollo que se lleve, y que este
proceso no sea engorroso.

4.3.1 Evaluación de cada SDK de acuerdo a los parámetroselegidos

1. Metaio[20]

Instalación :Metaio cuenta con un SDK y CREATOR. La instalación del


programa (CREATOR) es muy sencilla la instrucciones para Windows y Mac se
encuentran en la página de metaio1

Los requerimientos mínimos:

 Windows Vista / Windows 7 / Windows 8 (32-bit and 64-bit) or


Mac OS X 10.8+
 Dual-core processor with at least 1.7 GHZ (Quad-core recommended)
 3D graphics card with at least OpenGL 2.0 support
 2 GB of RAM (4 GB recommended)

El SDK se puede descargar de la página de Metaio2 : Se descarga una archivo


comprimido en donde se encuentran diferentes carpetas para las diversas plataformas
que son compatibles Android , iOS y Windows y para unity3D.

1
https://dev.metaio.com/creator/getting-started/system-requirements-and-installation/
2
http://ar.metaio.com/download_sdk?_ga=1.135055538.2026571751.1418666450
29
Despliegue en dispositivos móviles: El Creator da la posibilidad para exporta
la aplicación para Android y iOS . Unity3D permite exportar la aplicación para múltiples
plataformas móviles Android, iOS, Windows phone y BlackBerry.

Manejo de assets: Creator maneja audio, imágenes, modelos 3d y videos de


una manera sencilla e intuitiva, permitiendo la creación de aplicaciones A.R de una
forma rápida y sencilla, pero posee limitaciones en el manejo de las mismas y no
permite un desarrollo complejo, esto se puede solucionar a través de código, pero solo
es provisto en la versión paga y en su modo de prueba solo se pueden utilizar dos
marcadores y dos recursos A.R , lo que lo limita aún más.

Para el SDK solo se probó el paquete para Unity3D, ya que es lo que permitirá la
exportación para la diversas plataformas con un solo desarrollo. Unity 3D permite el
manejo de elementos multimedia y al ser una herramienta para el desarrollo de video
juegos las restricciones son casi nulas y se puede desarrollar una aplicación más
compleja.

Flexibilidad: Unity3D permite la exportación a las plataformas móviles de una


manera sencilla, enviando el instalador, listo para el despliegue en el dispositivo o
subirlo a las respectivas tiendas. Lamentablemente el modo de previsualización solo
funciona en la versión paga.

Creator te permite exportar para iOS y Android, creando un paquete el cual se


debe añadir al entorno de trabajo de la plataforma respectivamente y terminar el trabajo
ahí. La pre visualización es muy sencilla, se puede hacer directamente en el programa
utilizando la cámara web del pc.

2. Layar[21]

Instalación: Layar creator, es una aplicativo web que permite el desarrollo


rápido de contenido AR para móviles.

Despliegue en dispositivos móviles: Los contenidos generados en Layar


creator, solo puede ser vistos a través de la aplicación de Layar, que solo está
disponible para iOS y Android.
30
Manejo de assets: Layar Creator permite generar contenido multimedia.atraves
de los assets que son ( explicar que son)

Flexibilidad: la previsualización es muy sencilla. Se puede hacer directamente


en el dispositivo los contenidos generados en Layar y solo pueden ser vistos a través
de la aplicación de Layar , que solo está disponible para iOS y Android.

3. Aurasma [22]

Instalación: Aurasma posee un SDK, y Aurasma Studio. Para acedera e sdk se


debe tener una cuenta paga y ser solicitado.

Aurasma Studio, es una aplicativo web que permite el desarrollo rápido de


contenido AR para móviles.

Despliegue en dispositivos móviles: Los contenidos generados en


Aurismastudio solo puede ser vistos a través de la aplicación de Aurasma, que solo
está disponible para iOS y Android.

Manejo de assets: Aurasma Studio permite generar contenido multimedia.

Flexibilidad: La previsualización es muy sencilla, se puede hacer directamente


en el dispositivo los contenidos generados en Aurismastudio solo puede ser vistos a
través de la aplicación de Aurasma, que solo está disponible para iOS y Android

4. Wikitude [23]

Instalación: Wikitude posee un SDK y Wikitude Studio

Se puede descargar los SDKs para ser utilizados como librerías en el entorno
de trabajo de cada plataforma; ofrece un modo de prueba con limitaciones y requiere
pago para la publicación de la aplicación.

Wikitude Studio es una aplicativo web que permite el desarrollo rápido de


contenido AR para móviles.

31
Despliegue en dispositivos móviles:Despliegue nativo para cada plataforma
utilizando los SDKs.

Los contenidos generados en Wikitude Studio solo puede ser visto a través de
la aplicación de wikitude, que solo está disponible para iOS y Android.

Manejo de assets: Wikitude Studio permite generar contenido multimedia

Los SDK no fueron probados en su totalidad ya que se debió hacer en los


entornos de desarrollo de cada plataforma, estoy implica un desarrollo para cada
sistema operativo, lo que alargaría el proceso.

Flexibilidad: En wikitudestudio, la pre visualización es muy sencilla de hacer


directamente en el dispositivo los contenidos generados en Wikitudestudio solo
pueden ser vistos a traves de Wikitude , que solo está disponible para iOS y Android.

5. Vuforia [24]

Instalación: Se descarga un archivo comprimido en donde se encuentran


diferentes carpetas para las diversas plataformasAndroid , iOS y Windows, además un
paquete para unity3D.

Despliegue en dispositivos móviles: Unity3D permite exportar la aplicación


para múltiples plataformas móviles Android, iOS, Windows phone y BlackBerry.

Flexibilidad: Para el SDK, solo se probó el paquete para Unity3D, ya que ésta
es la que nos va permitir las exportación para la diversas plataformas con un solo
desarrollo. Unity3D permite el manejo de elementos multimedia y al ser una
herramienta para el desarrollo de videojuegos. Las restricciones son casi nulas y se
pueden desarrollar una aplicación más compleja, a diferencia del SDK de Metaio, la pre
visualización se pude hacer en el visualizador de Unity directamente lo que nos evita
estar exportando la aplicación al dispositivo móvil

La herramienta que se selecciona para el desarrollo del proyecto fue el SDK de


Vuforia con Unity3D, debido a que es la herramienta con menos restricciones de uso y
mejor cumple los criterios de evaluación.
32
CAPITULO 5

DESARROLLO

El desarrollo se realizó basándose en el Modelo de Desarrollo de Ingeniería de


la usabilidad y la accesibilidad, ya que este modelo tiene muy en cuenta al usuario en
sus etapas. Consiste en hacer evaluaciones de usabilidad, donde los requisitos reúnen
la información sobre los objetivos de la aplicación, características de los usuarios y
requisitos técnicos del desarrollo.

A continuación se plantean los siguientes interrogantes que ayudan a definir


adecuadamente los requisitos y necesidades de la aplicación:

5.1 ANÁLISIS DE REQUISITOS

En este apartado se reúne la información sobre los objetivos de la aplicación,


características de los usuarios y requisitos técnicos del desarrollo. [11]

5.1.1 Análisis Etnográfico

Para el desarrollo de la aplicación se inició el proceso con reuniones


presenciales en la sede de la ciudad de Manizales con los encargados del museo. En
esta etapa se conoció la estructura y el funcionamiento del museo, logrando saber que
está conformado por diferentes exposiciones interactivas que en su totalidad son
análogas.

A partir de este primer acercamiento, surge la necesidad del museo de ofrecer


contenido multimedia interactivo para mejorar sus exhibiciones y que estas sean
amigables con los usuarios.

33
De esta manera, se dio a conocer por parte de los encargados del museo, el
proyecto de los 4 mundos interactivos y propuestas de desarrollo que se ha explicado
anteriormente.

Al analizar las propuestas de desarrollo realizadas por el museo y el contenido


seleccionado para los mundos, se decidió elegir el proyecto de realidad aumentada, lo
que permitió realizar una presentación formal al museo sobre la propuesta, siendo
aprobada y con el aval para iniciar su desarrollo. Con el levantamiento de los
requerimientos puntuales se dio inició a la ejecución del aplicativo.

El siguiente test se hizo a 18 niños entre los 9 y 12 años de una escuela pública
de Cali ubicada en un sector estrato 3, para completar el análisis etnográfico. El lugar y
los participantes del test fueron elegidos ya que tienen características similares a los
potenciales usuarios del museo en donde será expuesto el aplicativo.

Género:

Niñas: 66%

Niños: 34%

Tiene acceso celular:

SI: 83%

No: 17%

Tiene acceso a celular con internet:

Si: 81%

No: 19%

Sabe que es la realidad aumentada:

Si: 33%

No: 67%

34
Conoce aplicaciones de realidad aumentada:

Si: 27%

No: 73%

El test fue propicio para conocer que sistemas operativos en dispositivos móviles
son los más usados por parte de los usuarios potenciales del aplicativo. La siguiente
tabla muestra los resultados obtenidos.

Tipo de Ios Android Blackberry


dispositvomóvil
Smartphone 30% 67% 3%
Tableta 15% 75%

Tabla 2: Porcentaje uso de sistemas operativos

5.1.2 Análisis contextual de tareas

Se priorizó la observación del comportamiento de los usuarios generales (público


en general) y de los usuarios objetivos para el aplicativo (niños entre 7 y 11 años de
edad) en un recorrido habitual por el museo en un recorrido habitual por el museo para
identificar patrones al realizar las tareas.

 Los usuarios la mayoría de las veces van en grupo al museo, pero los más
jóvenes son los que experimentan con las instalaciones del museo ( el museo en
su actualidad solo cuenta con exhibiciones análogas )
 Por lo general no leen instrucciones de uso
 Las exhibiciones suelen ser solo para un usuario a la vez

Objetos: Para la aplicación los más relevantes son botones, personaje principal,
textos de retroalimentación, menús.

35
Plataformas: Dispositivos móviles inteligentes con sistemas operativos ios,
android o blackberry

Entorno de desarrollo

Se requiere un entorno que principalmente permita desarrollar realidad


aumentada, crear entornos gráficos, manejar audio y algún lenguaje de programación
como java, c, o c++, y en la medida de lo posible exporte para diferentes plataformas
móviles.

Posibilidades: La garantía de tener disponible la aplicación para las principales


plataformas de dispositivos móviles y en las tiendas de cada plataforma. Rapidez en el
tiempo de respuesta al usar la aplicación.

Restricciones: Se necesitan smartphones con pantalla táctil, cámara trasera,


Android, desde 2.3.1 en adelante, con procesador ARMv7 o Atom y con OpenGL ES
2.0 en adelante, iPhone desde 4s con iOS desde el 4.3 en adelante. Los modelos 3D
deben ser aptos para dispositivos móviles, por ende con pocos polígonos

Perfil de entorno: El entorno donde será usada la aplicación ya está definido,


puesto que es para el museo interactivo Samoga de Manizales, pero para este tipo de
proyecto el entorno puede ser variado siempre y cuando se conserven condiciones de
iluminación adecuadas para la lectura de marcadores.

5.1.3 Objetivos de la usabilidad [11],[25]

 Facilidad de aprendizaje: El usuario debe tardar un tiempo mínimo en conocer


y familiarizarse con la aplicación por primera vez sin ningún tipo de aprendizaje.
La interfaz debe ser intuitiva, simple y fácil de utilizar.

 Consistencia: Se debe usar un mismo de la misma manera en la que se


realizan las acciones, conservando una misma línea de diseño para todos los
componentes y diferentes pantallas de la aplicación, como la misma tipografía y
forma de ilustración de los elementos de la interfaz. Además, tener una paleta de
colores establecida para la aplicación de acuerdo a los intereses del museo.
36
 Flexibilidad: El usuario podrá controlar los elementos de la aplicación e
interactuar con cada opción cuantas veces quiera, podrá acercarse y alejarse de
los elementos en 3D a su gusto.

 Robustez: Se debe evitar cargar la interfaz con objetos innecesarios, para ello
hay que buscar una opción con la cual se pueda alivianar la interfaz y ofrecer
una opción de interactividad diferente que a la vez garantice el poder hacer sus
tareas sin interrupciones.

 Recuperabilidad: El usuario recibirá retroalimentación de las acciones que


generen algún conflicto o tareas que necesite ser notificado el éxito o fracaso de
su cumplimiento.

 Tiempo de respuestas: Los tiempos por cada acción son muy cortos, el
marcador debe ser reconocido instantáneamente con el aplicativo y las
respuestas de las acciones con los botones deben ser ágiles.

 Disminución de la carga cognitiva: La aplicación debe ser comprensible


teniendo estrictamente lo necesario. Los botones serán formas que generen la
comprensión y asociación a la información que muestran.

A continuación se plantean los siguientes interrogantes que ayudan a definir


adecuadamente los requisitos y necesidades de la aplicación basados en el libro
Diseñó centrado en el usuario. [26]

¿Cuál es el contenido de la aplicación?

Para el contenido de la aplicación el museo quiso tomar como referencia los


textos escritos por el profesor Gonzalo Duque, [3] que son parte de una investigación
realizada sobre el territorio caldense, que tiene como tema principal las fortalezas y
debilidades que posee este territorio y de acuerdo a estos textos se definen los temas
que van a ir en la aplicación para los cuatro mundos. Hay que resaltar que el aplicativo
sintetiza una pequeña parte de toda la información recopilada para cada mundo

37
interactivo, puesto que cada uno de estos mundos contará con varios proyectos que en
conjunto expondrán adecuadamente toda la información que se tiene.

En cuanto lo que se quiere lograr con el desarrollo de este proyecto, y después


de leer la información para el mundo del aire, se decide crear un personaje que
represente a un cafetero colombiano tradicional, el cual enseñará a los usuarios
diferentes cosas típicas sobre la vestimenta y cultura propia de esta región del país.

¿Cuáles son las características de los usuarios?

El público objetivo de la aplicación son niños entre los 7 y 11 años

La aplicación es dirigida al público en general, pero en su mayoría son niños de


básica primaria que oscilan entre los 7 y 11 años de edad que visitan el museo en
salidas escolares por lo cual son estos el público objetivo.

¿Cuáles son los requisitos técnicos del desarrollo?

 Debe ser para dispositivos móviles


 multiplataforma

¿Cuáles son los requisitos definidos por el cliente?

El cliente, que para este proyecto hace referencia a los encargados del
desarrollo de los mundos interactivos del museo Samoga, brinda información relevante
sobre el propósito para el cual se crea la aplicación.

 Usuario objetivo: Para el cliente, se debe enfocar el proyecto a niños entre 7 y


13 años de edad.
 Finalidad: Con este proyecto el museo pretende amenizar la enseñanza de los
contenidos previamente investigados para los mundos, que se encuentra en
textos planos
 Estilo: El cliente provee logos, colores y tipografías que deben ser incluidas en el
estilo del producto final.
38
¿Cuáles son los recursos humanos disponibles?

Para el desarrollo de este proyecto se cuenta con dos estudiantes de noveno


semestre de ingeniería multimedia y un docente ingeniero en sistemas, quien dirige y
aconseja, de tal manera que se pueda alcanzar la finalidad satisfactoria del proyecto.

¿Cuánto es el tiempo de vida del producto?

El producto tiene un tiempo de vida prolongado, pero dependerá de las


autoridades del museo el tiempo de uso, puesto que es creado para ser exhibido al
público.

¿Cada cuánto debe actualizarse los contenidos?

 Periodicidad: El contenido de la aplicación será actualizado de acuerdo a las


necesidades que se tengan en el museo
 Edición de las actualizaciones: El producto debe ser actualizados por los
desarrolladores del mismo.

 Edición de las actualizaciones: El producto debe ser actualizados por los


desarrolladores del mismo.

5.1.4 Modelado de usuario

Se definen perfiles de usuarios en base a sus necesidades de información,


experiencias y conocimientos; con el fin de trabajar para una audiencia con
características definidas. [11] [27]

5.1.5 Personas

Se definen diferentes tipos de personas:

 Focal: Niños de básica primaria, entre 7 y 13 años de edad.


 Secundarios: Estudiantes de bachiller, estudiantes universitarios.
 No prioritario: Personas mayores a 30 años de edad.

 Involucrado: Guías del museo y trabajadores del museo en general.


39
5.2 DISEÑO

En esta etapa se documenta el proceso llevado a cabo para el diseño tanto del
personaje principal del aplicativo como de la interfaz gráfica que lo acompaña, el diseño
de la actividad y el diseño de la información

El diseño de la aplicación fue replanteada en diferentes ocasiones, ya que de


acuerdo a las conclusiones de las evaluaciones del primer prototipo propuesto con
base a la información recopilada en la etapa de análisis. [11][28]

5.2.1 Diseño de la actividad

El diseño de actividad parte del análisis de las funcionalidades, las tareas que
permiten realizarlas y el modelado a nivel conceptual

5.2.1.1 Análisis de tareas:

Objetivo: abrir el mundo del aire


Tarea: Presionar el icono del aire (el pájaro Yurupari)
Acciones: Tocar el icono de Yurupari
Objetivo: Abrir la información del sombrero en el mundo del aire
Tarea: Encontrar y presionar el icono del sombrero
Acciones: Tapar el botón del sombrero
Objetivo: Detectar y tapar el icono del sombrero
Tarea: Encontrar y presionar el icono de

5.2.1.2 Modelo conceptual

 La siguiente imagen ilustra el esquema de navegación de la aplicación, en


donde se visualiza cada pantalla que es abierta al accionarse los botones del
aplicativo

40
Ilustración 9: Modelo conceptual

5.2.1.3 Diseño visual

 Análisis de libro de estilo


 documentación gráfica
 diseño de retícula
 Elección de gama cromática y tipografía
 generación de elementos de diseño

5.2.3 Diseño de estilo

Dado que el público objetivo son niños entre 7 y 11 años de edad, pero el
aplicativo es para un museo donde es expuesto al público en general, se determinó lo
siguiente:

 Un estilo cartoon para el cafetero y el burro; personajes del mundo del aire
yurupari.
 Los personajes, ítems, marcadores y demás componentes del entorno del
aplicativo tienen una línea de diseño sencilla con pocos detalles.

41
 La vestimenta del personaje del mundo del aire está inspirado en un cafetero
colombiano tradicional junto con los objetos que lo acompañan diariamente.
 Textos simples y cortos.
 Audios con información precisa, léxico sencillo y claro.
 Menú sencillo e intuitivo.

5.2.4 Diseño del Personaje

Para el personaje principal del aplicativo, que debe representar a un cafetero


colombiano, se tuvo en cuenta que fuera agradable para el usuario objetivo, por tal
motivo basados en [37] [38] Cristian Jean Paul Durango Osorio, estudiante de séptimo
semestre de Ingeniería Multimedia, realizó los bocetos para el personaje, como se
muestran en la siguiente figura:

Ilustración 10: Propuesta inicial de personajes

A estos diseños se le sugirieron varias modificaciones, para que sea de mucho


más agrado para los niños entre 7 y 13 años, sin que deje de ser agradable para el
público en general. En el grafico siguiente se muestran los tres bocetos finales con los
cuales se hicieron pruebas a niños de básica primaria para su elección.

42
Ilustración 11: Propuesta final de personajes

Después de las encuestas realizadas a los niños de una escuela de básica


primaria, hubo un prototipo que claramente les agrado más. La siguiente imagen
muestra cual fue el prototipo preferido para los niños.

Ilustración 12: Personaje elegido para la aplicación

43
Con base al personaje elegido, se inició el debido proceso con las vistas en
diferentes ángulos para su posterior modelado y texturizado en 3d. La imagen muestra
le personaje elegido con las diferentes vistas.

Ilustración 13: Perspectivas del personaje

Posteriormente se hizo el modelado en 3D del personaje, el cual será mostrado


en el mundo del aire (yurupari) al dirigir el dispositivo móvil con el aplicativo hacia
alguno de los marcadores provistos para este.

Ilustración 14: Personaje modelado en 3D

44
El personaje realizara animaciones, por lo cual se crearon expresiones faciales
para llevarlas a cabo. En la imagen se muestran las expresiones que se usaran y
algunos de los objetos representativos del personaje

Ilustración 15: Expresiones y objetos del personaje

El personaje al ser un típico cafetero colombiano, estáacompañado por algunos


objetos e indumentaria que son ya tradicionales, por ende estos objetos se dibujaron y
posteriormente se modelaron en 3D. A continuación se pueden observar

45
Ilustración 16: Objeto en 3D del personaje

Un cafetero colombiano siempre está acompañado por un compañero de trabajo


incondicional, el burro, por ende también se dibujó y se modelo en 3D un burro. En las
imágenes se muestra al burro dibujado y modelado.

Ilustración
17: Burro dibujado y modelado

5.2.4 Diseño de interfaz

La interfaz de usuario del aplicativo a lo largo del desarrollo, según el análisis de


requerimientos y conclusiones de las evaluaciones de prototipos hechas con usuarios
reales, paso por dos prototipos hasta llegar al prototipo final.

46
La interfaz diseñada para los prototipos, desde un comienzo fue creada
basándose en el diseño estándar de interfaces de Android y IOS, enfatizando más en
los estándares de Android ya que es el sistema operativo más usado por el público
objetivo del aplicativo según las encuestas realizadas ya que como se menciona en
uno de los objetivos de usabilidad (consistencia). Es necesario seguir una misma línea
de diseño en para los sistemas operativos. [29]

Paleta de colores

Los colores que tendrá la interfaz gráfica, han sido elegidos basándose en los
diseños de logotipos realizados en el museo Samoga para sus salas de módulos
interactivos (ver anexo D).

Ilustración 18: Paleta de colores

Tipografía

La tipografía para la interfaz y despliegue del contenido en texto es la


Geometr212BkCnBT, la cual fue solicitada a los encargados del diseño de la sala de

47
módulos en el museo Samoga con el fin de tener coherencia con el contenido ya
diseñado con el que cuentan.

Ilustración 19: Tipografía

La letra que acompaña a cada logo de los mundos, en el menú principal, fue
sacada de las imágenes enviadas por el museo pero se desconoce su nombre, por lo
cual solo se usó en estos logos (ver anexo D).

Ilustración 20: Nombres de los mundos ilustrados

48
Prototipo 1:

Para el prototipo inicial se propuso una interfaz de menú principal simple, en


donde los botones solo tienen texto que indica a qué mundo pertenecen. En la parte
superior está la imagen del logo del museo Samoga. La imagen muestra el menú
principal del primer prototipo.

Ilustración 21: Menú prototipo uno (1)

Para este prototipo el diseño de la interfaz que acompaña al personaje en 3D,


consta de 6 botones en la parte inferior que son parte de la interfaz gráfica de usuario,
con los cuales se puede acceder a la información que se tiene de cada elemento, la
cual aparece en texto también como parte interfaz gráfica.

49
Ilustración 22: Prototipo uno (1)

En la parte superior se muestra el nombre del mundo en el que se encuentra


para que los usuarios sepan qué marcador deben buscar. En la parte superior derecha
se encuentra el botón para activar la cámara y poder fotografiar el modelo que se está
observando. En la parte superior izquierda se encuentra el botón para regresar al menú
principal.

Prototipo 2:

Para el prototipo dos (2) se incorporó un splash. Al iniciar el aplicativo, se puede


observar, mientras este carga, que tiene el icono del museo Samoga como se muestra
en la siguiente imagen

50
Ilustración 23: Splash

El menú principal se cambió de solo tener botones con las palabras de los
mundos, a tener botones representados por cada icono representativo del mundo
diseñado por los encargados del museo con su propia tipografía. La imagen muestra el
cambio realizado

Ilustración 24: Menú principal

51
Se hicieron cambios en la interfaz gráfica los cuales consisten en el reemplazo
de los botones inferiores del prototipo uno (1), por símbolos de información sobre cada
objeto del que se da información del personaje. Para dar a entender en qué mundo se
encuentra el usuario, en la parte superior también se plasmó el icono del mundo en el
que se encuentra como se muestra en la imagen

Ilustración 25: Prototipo dos (2)

En la parte superior izquierda se implementó el menú “hamburguesa”, con el


cual se despliegan los botones para acceder desde el mundo en donde se encuentra el
usuario a los otros mundos del aplicativo.

Ilustración 26: Menú hamburguesa

52
El botón de la cámara se sigue conservando igual que en el primer prototipo de
diseño, ubicado en la parte superior derecha de la GUI

Ilustración 27: Diseño cámara activada

Prueba de usabilidad realizada al prototipo dos (2):

Las pruebas realizadas con el prototipo de interfaz y navegación número dos


(2), dejan varias conclusiones para ser consideradas en el diseño de la navegabilidad e
interfaz del prototipo número tres (3), cuyo diseño fue realizado con las correcciones en
base a las conclusiones de este prototipo.

Esta prueba cognitiva de usabilidad fue realizada mediante un test hecho a 10


participantes, entre los 17 y 25 años de edad, que dan información más detallada sobre
la usabilidad al realizar tareas previamente diseñadas por los desarrolladores y así
enfatizar en las características más relevantes de la funcionalidad del aplicativo. Las
tareas que realizaron por parte de los participantes y posteriormente se analizaron, son
las siguientes:

 Abrir el mundo del aire


 Abrir la información de uno de los objetos del cafetero

53
 Estando en el mundo del aire ir a cualquier otro mundo
 Estando en uno de los mundos volver al menú principal
 Ir al mundo del aire y tomar una foto, guardarla o rechazarla

A continuación se muestran las conclusiones a las que se llegó de acuerdo a lo


expresado por parte de los participantes en el test:

 Gran porcentaje de los usuarios que realizaron la prueba, buscaron en la interfaz


el botón “atrás” cuando querían retroceder a una de las pantallas anteriores.
 Varios usuarios sugirieron más legibilidad en los botones del menú principal
para indicar a qué mundo pertenecen.
 Algunos usuarios encontraron la necesidad de tener retro alimentación al realizar
la tarea de tomar una foto, guardarla o rechazarla, porque no se daban por
enterados si la tarea se había realizado con éxito.
 El menú principal es muy entendible al tener texto y el logo de cada mundo,
estando a color el mundo disponible y en escala de grises los 3 mundos para los
cuales se desarrollara contenido a futuro.
 El personaje luce bien, pero carece de vida (puesto que para este prototipo no
se habían desarrollado las animaciones ni los audios necesarios que
acompañan y complementan al personaje de mundo del aire.
 El símbolo del menú “hamburguesa” confundió a varios usuarios; por lo cual se
decide volver al símbolo que indica “hacia atrás” y así las elecciones de los
mundos se hagan desde el menú principal.

Prototipo 3:

El prototipo de diseño tres (3) es el prototipo final, el cual será entregado para
este proyecto. Este prototipo surge a partir de las conclusiones de las evaluaciones
realizadas a diferentes tipos de usuarios. A continuación se muestran las
modificaciones realizadas para llegar al prototipo de interfaz final:

 Para este prototipo se decide hacer dos marcadores, uno que será para que los
usuarios vean la información en interactúen mediante los botones los cuales

54
pasaran a ser botones virtuales (esto se explica más detalladamente en el
apartado “marcadores”); y otro marcador que será para que los usuarios se
puedan tomar fotos con el personaje en tamaño proporcional a la estatura real
de una persona.
 Para este prototipo se llega a la decisión de reemplazar el menú “hamburguesa”
por el símbolo de la “flecha” nuevamente que indica ir hacia atrás, así volver al
menú principal si se quiere cambiar de mundo.

Ilustración 28: Botón atrás

El cambió principal de este prototipo está en los botones que llevan a la


información de la indumentaria y objetos que se desea enseñar, puesto que estos
botones no estarán en la interfaz gráfica como en el prototipo de interfaz uno (1), ni
como símbolo de información sobre cada objeto como en el prototipo de interfaz dos
(2); sino que estos serán representados físicamente en uno de los marcadores en
donde la interacción consiste en tapar la representación del botón y mediante esto se
activara su acción.

55
Ilustración 29: Botones físicos

El aplicativo contara con un botón de instrucciones para que el usuario entienda


fácilmente el uso adecuado del mismo y a que marcador debe apuntar el celular
dependiendo de lo que el usuario quiera.

Ilustración 30: Botón de instrucciones

Las instrucciones aparecerán en la interfaz como un tipo de diapositivas en


donde se explica paso a paso qué hacer con el aplicativo y qué uso tiene cada
marcador.

56
Ilustración 31: Instrucciones

Mientras el dispositivo que este ejecutando el aplicativo no esté alineado con


uno de los marcadores, se mostrara siempre en pantalla una imagen indicando que
debe apuntar el dispositivo hacia el marcador

57
Ilustración 32: Advertencia para buscar el marcador

5.2.5 Marcadores

Los marcadores o targets son las imágenes que el aplicativo toma como
referencia para superponer objetos virtuales en ellos. Para este proyecto de grado, se
utilizaron Image Targets que representan las imágenes que el SDK de Vuforiapueden
detectar y rastrear, a diferencia de los marcadores tradicionales, códigos de matriz de
datos y códigos QR.

Los Image Targets no necesitan de regiones blancas y negras o códigos para


ser reconocidos. El SDK detecta y rastrea las características que naturalmente se
encuentran en la propia imagen mediante la comparación de estas características
contra una base de datos.

Una vez que el Image Target es detectado el SDK, seguirá la imagen mientras
está éste en el campo de visión de la cámara. Los Image Targetspueden ser creados
con el Vuforia Target Manager con una imagen, las características extraídas son

58
guardadas en una base de datos, la cual se puede descargar y empaquetar con la
aplicación [30]

5.2.5.1 Recomendaciones para una imagen sea un buen Image Target

Rica en detalles, una imagen con bastantes detalles tiene más características
que es el SDK reconoce. Algunos ejemplos son escena de la calle, un grupo de
personas, mezclas de objetos y escenarios deportivos. Buen contraste Regiones
brillantes y oscuras y bien iluminadas. No patronos repetitivos como Un campo
cubierto de hierba , la fachada de la casa moderna con ventanas idénticas , y un
tablero de ajedrez .Formato debe ser 8 o 24 bits PNG y JPG ; menos de 2 MB de
tamaño ; JPG deben ser RGB o escala de grises (sin CMYK) [31]

Características naturales y clasificación de imágenes

Una calificación define que tan bien la imagen puede ser detectada y rastreada
por el sdk de Vuforia esta calificación se muestra en el Target Manager por cada
imagen subida el web api.

la calificación se mide de 0-5 para cualquier imagen, a mayor calificación del


Image Target más fuerte es la detección y el rastreo, una calificación de cero indica
que la imagen no es rastreable por el sistema AR, y una de 5 indica que la imagen es
fácilmente rastreable por el sistema AR.

Característica

Una característica es una detalle puntudo en forma de pico en la imagen, como


los que están presente en las texturas, el sistema representa estas características
como pequeñas cruces amarillas.[32]

59
Un cuadrado contiene
cuatro característica una por
cada esquina

Un circulo no contiene
ninguna característica,

Este objeto contiene solo


dos característica

Ilustración 33: Image target

Para propósitos de este proyecto, en el prototipo final se decide crear dos


marcadores, los cuales fueron diseñados y pintados en diferentes materiales. el primer
marcador de madera y tiene unas medidas (70 cm X 40 cm), en la parte inferior tiene
unos recuadros que asemejan botones, estos van a ser utilizado para poder acceder a
la información sobre los objetos que acompañan a el personaje, el otro marcador tiene
como medidas( 150cm X 200 cm) este es usado para que los usuarios puedan sacarse
una foto con el personaje. Ambos marcadores tienen plasmado el cafetero colombiano
diseñado para este proyecto rodeado de palabras que lo contextualizan

60
Ilustración 34: Marcadores del aplicativo

El diseño de estos marcadores fue modificado en diferentes ocasiones ya que en


las distintas pruebas con usuarios que se hicieron el marcador que se había elegido
presentaba molestias al usuario ya que el diseño consistía en un solo dibujo en el
centro con mucho espacio blanco alrededor y por este motivo el aplicativo no tenía
muchas característica de referencia y los modelos 3D se desaparecían con facilidad y
en el proyecto se necesita que los marcadores ofrezcan bastantes puntos de
referencia, no solo por usabilidad sino también para poder configurar y programar las
acciones de los botones virtuales en el aplicativo.

Es importante mencionar que para el diseño de los marcadores se tomo como


inspiración la imagen pintada que se encuentra en la sala de creatividad en el parque
tecnológico, ya que haciendo unas pruebas del SDK de vuforia esta dio muy buenos
resultados

61
Ilustración 35: Inspiración de diseño para marcadores

CAPÍTULO 6

EVALUACIÓN Y RESULTADOS

La evaluación se llevó a cabo para identificar la experiencia de los usuarios y las


posibles fallas para sus pertinentes correcciones del prototipo final del aplicativo.

La técnica de comprobación se hace usando el método de evaluación por test,


donde los usuarios objetivos manipulan el aplicativo y dan resultados cualitativos sobre
qué tan intuitivo fue el manejo de la interfaz para realizar las tareas.

Los que hacen parte de la evaluación se denominan participantes, en este caso


se manejó un grupo de 16 personas los cuales tienen edades que representan el
público objetivo para el aplicativo. Los evaluadores son implicados directos que captan
información relevante y por medio de encuestas se conocen y posteriormente se
analizan las opiniones de los participantes en la evaluación.
62
En cuanto al entorno donde se llevó a cabo la evaluación, teniendo en cuenta
que el aplicativo será exhibido en un museo interactivo y el rango de edad del público
objetivo, se evaluó a los usuarios en el contexto escolar.

6.1 RESULTADOS DE LA PRUEBA EN CONTEXTO ESCOLAR

Se hizo una observación detallada de 16 niños entre los 8 y 12 años de una


escuela pública de Cali de grados cuarto y quinto de primaria. Esta observación se
realizó con el fin de analizar y conocer la reacción y motivación que demuestran los
niños por interactuar con las características del aplicativo de realidad aumentada como
el diseño de interfaz, el modo de interactividad, su enseñanza y eficacia.

De acuerdo a lo anterior, los desarrolladores del aplicativo hicieron una


introducción a los participantes explicando brevemente en qué consiste el aplicativo y
su forma de uso con el propósito de ver que tanta atención prestan y que tanto deseo
muestran por iniciar la actividad.

Se conoció que los niños les sorprende de grata manera el aplicativo, y aparte
de esto adquieren conocimientos de manera lúdica y divertida al escuchar sus
respuestas a preguntas referentes al contenido que se pretende enseñar y la opiniones
acerca del sentimiento que les genera el aplicativo, los marcadores y la forma de
interacción fuera de lo visto hasta el momento por ellos; además de que mostraron
mucho interés por el personaje principal del aplicativo y su burro y los colores y diseños
del aplicativo, dejando en claro con esto que el diseño fue apropiado y se ajusta al
agrado de los niños que participaron de la prueba. El diseño de la interfaz se hizo
intuitivo para ellos y no presento problemas (ver anexo)

6.1.1 Preguntas

Estas preguntas se formularon a los participantes de las pruebas para tener un


acercamiento más preciso sobre el nivel de cumplimiento de los objetivos de
funcionamiento y enseñanza planteados para evaluar el óptimo desempeño del
aplicativo y su contenido. A continuación se muestran las preguntas en base a cada

63
componente a evaluar y el análisis de cada una de ellas de acuerdo a las respuestas
de los participantes y resultados de las pruebas:

Instrucciones

1. ¿Las instrucciones de uso del aplicativo son entendibles por el usuario?

Análisis: El 75% de los encuestados está muy de acuerdo en que el instructivo


para el buen uso del aplicativo es claro y entendible; el 25% restante está de acuerdo
con lo anterior y nadie estuvo en desacuerdo

Pregunta 1

Muy de
acuerdo
De acuerdo

Ilustración 36: Grafico pregunta 1

2. ¿Es claro la diferencia entre los dos marcadores con el instructivo?

Análisis: El 79% de los encuestados está muy de acuerdo en que se da a


entender correctamente el uso que se le da a cada marcador; el 10% está de acuerdo
con lo anterior y el 11% está en desacuerdo

Pregunta 2
Muy de
acuerdo
De acuerdo

En
desacuerdo

Ilustración 37: Grafico pregunta 2


64
Diseño del aplicativo

3. ¿El diseño del personaje representa adecuadamente un cafetero


colombiano?

Análisis: El 73% de los encuestados está muy de acuerdo en que el personaje


modelado es una fiel representación de un cafetero o campesino colombiano; el 27%
restante está de acuerdo con lo anterior y no hubo nadie en desacuerdo.

Pregunta 3

Muy de
acuerdo
De acuerdo

Ilustración 38: Grafico pregunta 3

4. ¿El diseño de la interfaz es apropiado?

Análisis: El 83% de los encuestados está muy de acuerdo en que los diferentes
aspectos de diseño son adecuados para el aplicativo mientras que el 7% está de
acuerdo con lo anterior y un 10% está en desacuerdo.

65
Pregunta 4
Muy de
acuerdo
De acuerdo

En
desacuerdo

Ilustración 39: Grafico pregunta 4

Interactividad

5. ¿El usuario interactúa fácilmente con el aplicativo?

Análisis: El 79% está muy de acuerdo con que el aplicativo es fácil e intuitivo de
usar y el 21% restante está de acuerdo con lo anterior y no hubo nadie en desacuerdo.

Pregunta 5

Muy de
acuerdo
En
desacuerdo

Ilustración 40: Grafico pregunta 5

6. ¿Los botones en el marcador generan una interacción apropiada e


interesante para el despliegue de la información?

Análisis: El 89% de los encuestados está muy de acuerdo en que la interacción


es muy diferente a lo habitual lo cual lo hace muy interesante y el despliegue de la
66
información no presenta problemas; el 11% estuvo de acuerdo con lo anterior y no
hubo nadie en desacuerdo.

Pregunta 6

Muy de
acuerdo
De acuerdo

Ilustración 41: Grafico pregunta 6

Método de enseñanza

7. ¿El uso de este aplicativo es útil para reforzar e incentivar los


conocimientos sobre la vestimenta y tradiciones de cafeteros y
campesinos colombianos?

Análisis: El 83% de los encuestados está muy de acuerdo en que la aplicación


cumple el objetivo de enseñanza esperado y los usuarios aprenden más sobre la
cultura del cafetero colombiano; el 9% está de acuerdo con lo anterior y el 8% en
desacuerdo.

67
Pregunta 7
Muy de
acuerdo
De acuerdo

En
desacuerdo

Ilustración 42: Grafico pregunta 7

6.2 PREGUNTAS ABIERTAS A LOS NIÑOS

En este apartado se tiene en cuenta los ítems más relevantes para verificar que
el aplicativo cumple con los propósitos establecidos.

 El agrado y motivación por el uso del aplicativo

En las preguntas relacionadas con este tema, de los 16 niños encuestados 13


niños mostraron en sus respuestas gran agrado y sorpresa por el aplicativo y muchos
manifestaron querer tenerlo en sus dispositivos; de los 3 niños restante, a 2 les pareció
algo normal pero agradable mientras que uno se mostró aburrido con el aplicativo.

En la pregunta relacionada con el personaje y sus características, varios


resaltaron lo bonito que les pareció el cafetero y el burro, y estuvieron muy de acuerdo
en que están muy bien representados sus objetos.

De acuerdo a este análisis se puede con satisfacción que el aplicativo es de


mucho agrado para los niños y llama su atención de forma inmediata.

 La enseñanza que deja el uso del aplicativo

A los 16 niños se les hizo preguntas sobre la información que despliega el


aplicativo; 9 niños dijeron haber aprendido sobre los cafeteros y objetos que los
acompañan entiendo el uso que se les da, 3 niños no prestaron atención al contenido

68
que se pretende enseñar pero intuyeron al ver el personaje y los botones del aplicativo
que la información se relaciona con los cafeteros y campesinos colombianos; los otros
4 niños expresaron no haber aprendido nada con el uso del aplicativo.

Del análisis anterior se puede concluir que el aplicativo si enseña algo a los
niños pero el contenido de enseñanza puede ser mejorado con información diferente y
potencializado implementado todas las funcionalidades que se pretenden tener en el
prototipo final.

CAPITULO 7

IMPLEMENTACIÓN

“La fase de implementación es conocida también como fase de codificación,


pues supone todo el proceso de escribir el código software necesario que hará posible
que el sistema finalmente implementado cumpla con las especificaciones establecidas
en la fase de análisis de requisitos y responda al diseño del sistema descrito en la fase
anterior”.[11]

Para el desarrollo del aplicativo de realidad amentada se escogió como


frameworkdeunity3D. Unity3D es un motor de video juegos multiplataforma y se utiliza
para el desarrollo de video juegos y aplicaciones para PC, consolas, dispositivos
móviles y sitios web, como se mencionó en el capítulo3. Este framework tiene una
buena integración con Vuforia, y también nos permitirá la exportación del aplicativo a
diferentes plataformas y sistemas operativos con un mismo desarrollo.[33]

Para lo anterior, es necesario realizar la importación del paquete que contiene el


SDK (Software development kit) con los assets( elementos de desarrollo) necesarios
para realizar aplicaciones con la herramienta vuforia, que previamente se ha

69
descargado con el fin de importarla dentro de Unity3D, también se debe importar los
assets necesario para la construcción de la aplicación que en este caso son:

 El modelo 3D del personaje con sus animaciones respectivas


 Los audios ( voz del personaje y efectos sonoros)
 Las imágenes ( iconos e imágenes)

7.1 EL MODELO 3D DEL PERSONAJE CON SUS ANIMACIONES RESPECTIVAS:

Para la construcción de Ponchito, después del proceso de diseño y modelado


que se explicó en el capítulo 4 , se debe hacer una Disposición de huesos, que permite
crear las bases del personaje, que se asemejan con el esqueleto humano. Este
proceso se realizó en 3Dsmax studio y su herramienta CAT (characteranimationtoolkid)
siguiendo las recomendaciones que se ven en los tutoriales [ 34] y las de Guillermo
Alvares S 3, continuando con Skinning donde se entrelazan los vértices de la malla con
los huesos definidos, ajustándolo a la composición física del personaje y corrigiendo su
estructura.para este procesó también se siguieron las recomendaciones de
GuillermoAlvares S.

Por último se hace el Riggingproceso que facilita la animación, que consiste en


generar elementos que ayudan a seleccionar los miembros del cuerpo del modelo que
se desea animar.

3
Diseñador de medios interactivos, Profesor de desarrollo de video juegos en la Universidad san
buenaventura cali
70
Ilustración 43: Rigging modelo 3D

7.2 LOS AUDIOS (VOZ DEL PERSONAJE Y EFECTOS SONOROS)

La construcción del personaje necesitaba de una voz que diera cuenta de la


cultura de esta región del país, para esto fue necesario la realización de un guion
teniendo en cuenta el público al que se iba a presentar la aplicación, que en este caso
son niños de 7-11 años, por lo que fue necesario utilizar un lenguaje llano que
permitiera a nuestro target comprender fácil y rápidamente los saberes regionales,
siendo lo anterior unos de los principales objetivos del museo (ver anexo B). Para este
proceso se contó con la colaboración de Savier Fuente4 la voz de ponchito y Diana
checa5 asesoría y corrección del guion.

Al hablar de un público de tan corta edad fue necesario incluir una


contextualización mayor del personaje, por lo que se requirió algunas pistas musicales
y por otro lado algunos efectos sonoros al utilizar los botones que acompañan a
ponchito.

4
Locutor Tropicana Popayán e Imitador de personajes
5
Comunicadora social de la Universidad del Cauca
71
Para la grabación de los audios se hizo un arreglo con dos micrófonos para
garantizar la fidelidad del sonido. El arreglo consiste en tener un micrófono
unidireccional al frente del locutor que hizo la voz de cafetero colombiano, y otro
micrófono pero este omnidireccional que estaba situado encima del micrófono
unidireccional, el cual se encarga de captar frecuencias altas que el micrófono
unidireccional por su ubicación no captaba.

La grabación fue realizada en el software pro tolos el cual permite grabar por
pistas, en donde se usó una pista para cada escena creada en el guion. Posteriormente
se hizo una edición a cada audio para limpiar el ruido que se pudo generar y cortar
pedazos del audio que contenían errores. Lo último que se hizo fue agregar una pista
de fondo que contextualiza aún más la voz del cafetero colombiano. para el proceso de
grabación se contó con la asesoría de José Peláez6

7.3 LAS IMÁGENES (ICONOS E IMÁGENES)

Para los iconos generales, se utilizaron las representaciones graficas del sistema
operativo Android, que pueden ser descargados de la página oficial7. Se decide utilizar
estos iconos ya que, en su mayoría, los niños entrevistados contaban con este sistema
operativo, dentro de su celular, factor que facilita el uso dela aplicación, por su
familiaridad y teniendo en cuenta el concepto de usabilidad, deben llevar una estética
similar al de este sistema operativo [29].

6
Ingeniero Multimedia de la Universidad de san buenaventura y profesor de audio diguital
7
https://developer.android.com/design/downloads/index.html
72
Ilustración 44: Iconos

Los iconos de cada mundo se construyeron con base a las imágenes entregadas
por el museo, que son los logos de los cuatro mundos. Para que los iconos tuvieran
una misma Dimensión y orden se siguió una retícula en donde cada elemento que
conforma al icono ocupa una cantidad de pixeles específica cómo se muestra a
continuación: [37]

Ilustración 45: Retícula logo

73
Después de esto se procede a escribir los scripts (códigos) que posteriormente
serán utilizados para la construcción del aplicativo. Estos son escritos en el lenguaje C#
(ver anexo C).

 Click, este script es asignado a los botones. Su funcionalidad es


activar/desactivar GameObjects(Objetos). Tiene como parámetro de entrada el
objeto a activar/desactivar.
 Loading,script para cargar las diferentes escenas del aplicativo. parámetro de
entrada el nombre de la escena a cargar.
 InPrNeestescriptes utilizado cuando se muestra las intrusiones. tiene como
parámetro un arreglo de GameObjects en donde están los objetos que
conforman el instructivo.
 EventoMarcador, indica cuando el marcados este en el foco de la cámara tiene
dos funciones (Marcador encontrado ) y (Marcador Perdido), estas dos
funciones son utilizadas para mostrar elementos en pantalla cuando el marcador
no está en el foco de la cámara. Tiene como parámetros los objetos que se
quieren mostrar.
 VirtualButtonEventHandler, maneja toda la funcionalidad de los botones
virtuales.
 LookAtY, es asignado a los elementos que se quiere que este mirando a la
cámara.
 TomarFoto: Para tomar las Fotos
 ScreenshotManager: Para tomar las Fotos.

Una vez teniendo todos los assets dentro del proyecto se procede a construir el
aplicativo, el framework nos da la posibilidad de crear diferentes escenas para un
mayor orden en las contracciones de la aplicación, por eso se crearon 3 escenas
(menú, AR y tomar foto) que conformas el mundodel aire-Yuruparí.

74
Es importante resaltar que para el diseño se tuvo en cuenta una retícula para la
organización de los elementos, que forman parte de la aplicación. Esta se tuvo en
cuenta en todo el proceso de diseño, pero es en la implementación en donde es
utilizada con mayor rigor, ya que es en el programa en donde se le da una dimisiones
que sirven de referencias para la ubicación de los elementos, está conformada por dos
partes: la Barra de tareas y una zona de información, dondelos elementos serán
organizados de acuerdo a la escenas.[35]

Ilustración 46: Retícula de organización

Por otro lado, es importante decir es que para todos los elementos que
conforman la GUI (graficaluser interface). Para lo que se utilizó la herramienta de UI de
Unity3D. Lo que hizo que el trabajo de la GUI fuera mucho más sencillo, permitiendo
que la GUI fuera responsive (adaptativa.Se acomoda automáticamente de una manera
óptima de acuerdo a la resolución de la pantalla del dispositivo.). Para esto se basó en
las recomendaciones y tutorías les de Unity3D [36]

75
Escena 1 Menú

Como su nombre lo indica en esta escena se encuentra el menú principal de la


aplicación, es desde este que los usuarios navegan así los diferentes
mundos,siguiendo la retícula las distribución de los elementos fue la siguiente:

Ilustración 47: Menú ubicado en la retícula

La escena está compuesta por una cámara, todas las escenas en unity deben
contar con una cámara, El canvas que contiene todos los elementos de la GUI, son
cuatro botones de los mundos, un cargador, la barra de tareas que a su vez contiene el
logo de la aplicación y los botones acerca de y configuración. Un
GameObject(controlador)el cual va a tener todos es scriptsy el EventSystem, que
aparece automáticamente cuando se crea el canvasy es el que detecta los input(toques
en la pantalla en este caso ) del usuario.

El controlador tiene como componente el scriptclick que es asignado acá botón


de la GUI. El objeto cargador tiene como componente el scriptLoading. El
funcionamiento básico de esta escenas es que al presionar un botón 'este activa otro
76
elemento en la escena, generalmente estos elementos están ocultos, al presionar el
botón del aire se activa el cargador, que es un elemento del canvascompuesto por un
rectángulo que ocupa toda la pantalla y un texto que dice cargando; al ser activado
corre el script de loading, que tiene como parámetro un string (AR)indicando que debe
cargar la escena a AR.

Ilustración 48: Cargando

Escena 2 AR

Los elementos que componen esta escena son ARCamera, CanvasPaneles, Gui,
ImageTarget, Controlador y el EventSystem.

ARcamaraes un Prefab (objetos prefabricados) del SDK de vuforia, que es la carama


que nos permite ver el contenido de realidad aumentada, simplemente es añadida a la
escena. No son necesariasmás configuraciones.

CanvasPaneleseste canvas es de tipo WorldSpace,esto quiere decir que pertenece al


mundo 3D de la escena y que sus elementos van a tener coordenadas x, y, z a

77
diferencia de los elementos de la GUI que solo tiene x,y. Los elementos que
loconforman son las burbujas de di'alogo en donde está la información de cada
elemento de la vestimenta. Cada elemento tiene como componente el script LookAtY.

Canvas: Al igual que en la escena Menú aquí se encuentras todos los


elementos de la GUI, que en el caso de esta escena es la barra con el botón de atrás
para devolverse a la escena anterior, cámara para ir a la escena TomarFoto e
instrucciones tal como se explica en el capítulo 4.

ImageTargetotro prefabdel SDK de vuforia, el cual es una representación del


marcador dentro del programa y el mundo 3D tiene como child(hijo) el modelo 3D del
personaje y los botones virtuales, también tiene como componente el script
VirtualButtonEventHandler.

Controlador igual que en la escenamenú, el controlador tiene como


componentes los scripts, en este caso son click, InPrNe y EventoMarcador.

Ilustración 49: Barra menú:

78
Escena 3 Tomar Foto

Está compuesta por los siguientes elementos:

Canvascon su barra de tarea,unbot'on atrás e instrucciones y el botón para


tomar la foto.
ARcamaraigual que en la escena menú
ImageTarget con el modelo 3D del personaje
controladorcon los scripts click,,Loading, EventoMarcador, tomarFoto
EventSystem.

El funcionamiento de esta escena es muy similar a la AR, la diferencia está en el


botón de tomar la foto que al ser presionada hace que se corra el script de tomarFoto,
logrando desactivar todos los elementos de la GUI, tomar un pantallazo de lo que se
esté mostrando en la pantalla y guardarlo en el dispositivo para que pueda ser visto
desde la aplicación de galería que viene instalada en el dispositivo.

Ilustración 50: Botón de foto

79
CAPITULO 8

CONCLUSIONES Y RECOMENDACIONES

En este capítulo se dan a conocer las conclusiones finales que deja la


realización del proyecto, junto con las pruebas realizadas a los usuarios y se dan a
conocer las futuras posibilidades de implementación y desarrollo que se puedan
realizar con este proyecto:

8.1 CONCLUSIONES

 La realidad aumentada es una tecnología muy atractiva para captar la atención


de los niños, por lo cual se puede sacar un gran provecho para incentivar la
enseñanza/aprendizaje en ellos.
 Incorporar tecnología con contenido multimedia en las exhibiciones museísticas,
genera una gran recepción por parte del público lo que conlleva al cambio de
percepción que se tiene sobre los museos e incentiva a que mucha más gente
quiera conocer el contenido exhibido.
 Para el desarrollo de aplicaciones que tengan contenido educativo y se planteen
como objetivo enseñar al público, se necesita de la conformación de un grupo
multidisciplinario que aporten conocimiento en áreas como: pedagogía,
piscología, diseño, modelado, guionistas, ingeniería multimedia, etc... ya que la
convergencia de todos esos conocimientos conllevan a un óptimo cumplimiento
de los objetivos planteados.
 Una buena planeación para el desarrollo de un proyecto, en la que se tengan en
cuenta la mayor cantidad de posibilidades y detalles posible de los aspectos
referentes a la llevada a cabo del proyecto, determinarán que durante el proceso
los posibles problemas que se puedan presentar se reducirán al mínimo y se
optimizarán en un gran porcentaje el tiempo de desarrollo.

80
 Hacer el debido análisis para conocer un buen detalle el público objetivo al cual
apunta la aplicación, permite que muchas suposiciones por parte de los
desarrolladores sean descartadas y se conozcan otras necesidades que no se
hayan tenido en cuenta previamente.
 Tener una comunicación constante con el cliente durante el desarrollo del
aplicativo, es conveniente porque aunque muchas veces el cliente no tenga claro
lo que quiere, con la retroalimentación por ambas partes el objetivo de la
aplicación se logra ofreciendo una plena satisfacción al cliente.
 La herramienta elegida para el desarrollo (Vuforia) fue la más pertinente ya que
su uso facilita la creación de contenido para realidad aumentada y aparte ofrece
una nueva alternativa de interacción con los botones que se sale de lo común.
 Las evaluaciones que se realizan y en el momento preciso durante el desarrollo
del aplicativo, favorecen mucho la pronta corrección de errores y el
entendimiento hacia los usuarios que al final se representará como gratificación
por parte de ellos y satisfacción por parte de los desarrolladores.

8.2 RECOMENDACIONES

El proyecto desarrollado ha presentado grandes resultados y es pertinente


continuar con el desarrollo de proyectos similares en impacto y calidad con una clara
aplicación en contextos educativos, como lo es el Museo Samoga. Se recomienda
realizar un seguimiento a su aplicación y búsqueda de mejoras, originadas de este
proceso, mediante futuros proyectos de grado o trabajo con la modalidad de semilleros
de investigación existentes en la universidad de San Buenaventura.

Se considera que una buena forma de complementar el proyecto de grado seria:

 Una mejor ambientación de la aplicación, con el fin de que se genere una mejor
contextualización del entorno cafetero.
 Mejorar las animaciones del personaje, para que se vean más naturales y fluidas

81
 Desarrollar por completo la aplicación como estaba inicialmente planeada
 Depende del sistema operativo la interfaz los 'iconos y demás elementos
gráficos.
 integrar nuevas tecnologías como lo son las eyewear (gafas digitales)
 Mejorar la programación para disminuir errores.

82
REFERENCIAS

[1] Universidad Nacional sede Manizales, Museo Samoga [En línea]. Disponible
en:http://www.museos.unal.edu.co/sccs/plantilla_museo_5.php?id_subseccion_museo=
1003&id_museo=28 [Accessed: Oct. 25, 2014]

[2] Samoga, Creación de los 7 mundos [En línea]. Disponibleen:


http://www.manizales.unal.edu.co/samoga/index.htm [Accessed: Oct. 5, 2014]

[3]Duque Gonzalo, Ideas Sumarias sobre proyecto de infracestructura,[En línea]


Disponible en: https://godues.wordpress.com/ [Accessed: Nov. 17, 2014]

[4] Revista Venezolana de Información, Tecnología y Conocimiento, ISSN: 1690-7515,


Depósito legal pp 200402ZU1624 Año 9: No. 2, Mayo-Agosto, pp. 73

[5] Revista Venezolana de Información, Tecnología y Conocimiento ISSN: 1690-7515


Depósito legal pp 200402ZU1624 Año 9: No. 2, Mayo-Agosto, pp. 76

[6] F. Amaia , O. Sergio, V. Alicia y Z. Mònica,( 2011) Evaluación de la usabilidad,


Barcelona: FUOC

[7]P. Carolina, Manual de museografía interactiva, 8497045319,


ISBN 9788497045315,
2010: Trea

[8] Museo Británico, Un Regalo para Atenea,[En línea]. Disponible en:


http://www.britishmuseum.org/learning/schools_and_teachers/sessions/a_gift_for_athen
a.aspx
[Accessed: Ene. 18, 2015]

83
[9] Museo de Historia Natural británico, Augmentedreality Neanderthal [En línea].
Disponible en: http://www.nhm.ac.uk/nature-online/life/human-origins/early-human-
family/neanderthal-ar/ [Accessed: Ene. 17, 2015]

[10] Museo de Londres, Street museum [En línea]. Disponible en:


http://www.museumoflondon.org.uk/Resources/app/you-are-here-app/home.html
[Accessed: Abr. 12, 2015]

[11] G. Toni, “MPIu+a,” Modelo de proceso de la ingenieria de la usabilidad y la


accesibilidad, [En línea]. Disponible en: http://www.grihotools.udl.cat/mpiua/ [Accessed:
Mar. 20, 2015]

[12] M. Tona , (2011), Diseño centrado en el usuario pp. 23, Barcelona : FUOC

[13] Alaimo, Diego Martín,(2013),proyectos agiles con scrum: Ediciones Kleer

[14] Luz Rodríguez Palmero (2008),La teoría del aprendizaje significativo en la


perspectiva de la psicología cognitiva, ISBN: 978-84-9921-084-1 Depósito legal: B.
23.100-2010 Disponible en: http://bibliotecadigital.usbcali.edu.co:2152/visor/14780
[Accessed: Mar25, 2015]

[15] Luz Rodríguez Palmero (2008),La teoría del aprendizaje significativo en la


perspectiva de la psicología cognitiva, ISBN: 978-84-9921-084-1 Depósito legal: B.
23.100-2010 Disponible en: http://bibliotecadigital.usbcali.edu.co:2152/visor/14780
[Accessed: Mar25, 2015]

[16] A.VictorAndres, (2014), Evaluación de Tecnologías Ubicuas Para Divulgación de


Avifauna Turística. Caso de Estudio Sala Ornitóloga Museo Natural Universidad del
Cauca, Universidad del Cauca Facultad de Ingeniería Electrónica y
Telecomunicaciones

84
[17] A. Víctor Andrés, (2014), Evaluación de Tecnologías Ubicuas Para Divulgación de
Avifauna Turística. Caso de Estudio Sala Ornitóloga Museo Natural Universidad del
Cauca pp. 42, Universidad del Cauca Facultad de Ingeniería Electrónica y
Telecomunicaciones

[18] A. Víctor Andrés, (2014), Evaluación de Tecnologías Ubicuas Para Divulgación de


Avifauna Turística. Caso de Estudio Sala Ornitóloga Museo Natural Universidad del
Cauca pp. 45, Universidad del Cauca Facultad de Ingeniería Electrónica y
Telecomunicaciones

[19] A. Víctor Andrés, (2014), Evaluación de Tecnologías Ubicuas Para Divulgación de


Avifauna Turística. Caso de Estudio Sala Ornitóloga Museo Natural Universidad del
Cauca pp. 50, Universidad del Cauca Facultad de Ingeniería Electrónica y
Telecomunicaciones

[20] MetaioGmbH, [En línea]. Disponible en : http://www.metaio.com/ [Accessed: Mar.


20, 2015]

[21] layar, [En línea]. Disponible en : https://www.layar.com/ [Accessed: Mar. 20, 2015]

[22] aurasma [En línea]. Disponible en : http://www.aurasma.com/ [Accessed: Mar. 20,


2015]

[23] wikitude [En línea]. Disponible en : https://www.wikitude.com/[Accessed: Mar. 20,


2015]

[24] Qualcomm,Vuforia SDK [En línea]. Disponible en :


https://www.qualcomm.com/products/vuforia/ [Accessed: Mar. 20, 2015]

[25] M. Tona , (2011), Usabilidad pp. 5. Barcelona : FUOC

85
[26] M. Tona. ( 2011) , Diseño centrado en el usuario pp. 27, Barcelona: FUOC

[27] M. Tona , ( 2011) Diseño centrado en el usuario pp. 33, Barcelona: FUOC

[28] M. Tona , ( 2011) Diseño centrado en el usuario pp. 37, Barcelona: FUOC

[29] CiraCuadratSeix ,(2012) Estudio sobre Evaluación de la Usabilidad Móvil y


Propuesta de un Método para Tests de Usabilidad Cuantitativos basado en Técnicas de
Eyetracking pp. 42, Universitat de Lleida España, [En línea]. Disponible en :
http://www.recercat.cat/bitstream/handle/10459.1/45992/ccuadrats_Parte1.pdf?sequenc
e=1
[Accessed: Mar. 25, 2015]

[30] Vuforia SDK, Image-Target, [En línea]. Disponible en :


https://developer.vuforia.com/library/articles/Training/Image-Target-Guide [Accessed:
Abr. 9, 2015]

[31] Vuforia SDK, Attributes of an Ideal Image Target , [Enlínea]. Disponibleen :


https://developer.vuforia.com/library/articles/Best_Practices/Attributes-of-an-Ideal-
Image-Target [Accessed: Abr. 9, 2015]

[32] Vuforia SDK, Natural Features and Image Ratings, [Enlínea].Disponible en :


https://developer.vuforia.com/library/articles/Solution/Natural-Features-and-Ratings
[Accessed: Abr. 9, 2015]

[33]Unity3D [En línea]. Disponible en : http://unity3d.com/ [Accessed: Abr. 9, 2015]

[34] Autodesk, how-to-movies, [En línea]. Disponible en :


http://download.autodesk.com/us/3dsmax/CAT-how-to-movies/index.html [Accessed:
Abr. 9, 2015]

86
[35] M. Tona , Diseño pp. 28 : 2011, Barcelona: FUOC

[36] Unity3D [En línea]. Disponible en


http://unity3d.com/learn/tutorials/modules/beginner/ui [Accessed: Abr. 9, 2015]

[37] Pixar, Charate disign, [En línea]. Disponible en http://pixar-


animation.weebly.com/character-design.html [Accessed: Abr. 9, 2015]

[38] S. Tony,(2007) Charater Design for Graphic Novels, Rotovision S.A

87
Anexo A
El contenido de esta sección son los códigos utilizados en la implementación

A.1 Script Click

using UnityEngine;
using System.Collections;

public class click : MonoBehaviour {

public GameObject objActivar;


bool activado = false;
void Start () {
}
void Update () {
}
//Funcion Activar
public void activar(GameObject objActivar){
activado = !activado;
objActivar.SetActive(activado);
}
}

Script Loading

using UnityEngine;
using System.Collections;

public class Loading : MonoBehaviour {

public string scene;


void Start ()
{
Application.LoadLevel(scene);
}
void Update () {

}
}
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------

A.2 Script InPrNe


using UnityEngine;
using System.Collections;

public class InPrNe : MonoBehaviour {

public GameObject[] TutorialAr;


private static int i = 0;
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
PasaTutos ();
}

public void PasaTutos ()


{
switch(i)
{
case 0:
EsconderTodo(TutorialArr);
TutorialArr[0].SetActive(true);
break;
case 1:
EsconderTodo (TutorialArr);
TutorialArr[1].SetActive(true);
break;
case 2:
EsconderTodo (TutorialArr);
TutorialArr[2].SetActive(true);
break;
/*/case 3:
EsconderTodo (TutorialArr);
TutorialArr[3].SetActive(true);

break;*/
/*case 4:
EsconderTodo (TutorialArr);
TutorialArr[4].SetActive(true);
break;
case 5:
EsconderTodo (TutorialArr);
TutorialArr[5].SetActive(true);
break; }
}

void EsconderTodo(GameObject[] arr)


{
foreach(GameObject go in arr)
{
go.SetActive(false);
}
}
public void siguiente(){
i = i+1;
if(i>=2){
i=2;
}
posicion ();
}

public void anterior(){


i = i-1;
if(i<=0){
i=0;
}
posicion ();

}
public int posicion()
{
return i;
}
}
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------
A.3 Script EventoMarcador

Este script es ejecutado cuando en el script DefaultTrackableEventHandler del


sdk de vuforia que es modificado, llama a una de las dos funciones. que en
realidad es que le dice a él aplicativo si los marcadores están el foco de la cámara.

using UnityEngine;
using System.Collections;

public class EventoMarcador : MonoBehaviour {


public GameObject objActivar;
public GameObject objActivar2;
// Use this for initialization
void Start () {

}
// Update is called once per frame
void Update () {

}
public void MarcadorPerdido(){
objActivar.SetActive(false);
objActivar2.SetActive(true);
Debug.Log ("Marcador-perdido");

}
public void MarcadorEncontrado(){
objActivar.SetActive(true);
objActivar2.SetActive(false);
Debug.Log ("Marcador-encontrado");
}
}
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------

A.4 DefaultTrackableEventHandler

using UnityEngine;
namespace Vuforia
{
/// <summary>
/// A custom handler that implements the ITrackableEventHandler interface.
/// </summary>
public class DefaultTrackableEventHandler : MonoBehaviour,
ITrackableEventHandler
{
#region PRIVATE_MEMBER_VARIABLES

private TrackableBehaviour mTrackableBehaviour;


private EventoMarcador eventoMarcador; //VARIABLE AGREGADA
#endregion // PRIVATE_MEMBER_VARIABLES

#region UNTIY_MONOBEHAVIOUR_METHODS

void Start ()
{
GameObject controlador = GameObject.Find ("Controlador");
if (controlador != null) {
eventoMarcador = controlador.GetComponent<EventoMarcador> ();
} else {
Debug.LogError("No se ha encontrado el GameObject con el Nombre
Controlador");
}

mTrackableBehaviour = GetComponent<TrackableBehaviour> ();


if (mTrackableBehaviour) {
mTrackableBehaviour.RegisterTrackableEventHandler (this);
}
}

#endregion // UNTIY_MONOBEHAVIOUR_METHODS
#region PUBLIC_METHODS
/// <summary>
/// Implementation of the ITrackableEventHandler function called when the
/// tracking state changes.
/// </summary>
public void OnTrackableStateChanged (
TrackableBehaviour.Status previousStatus,
TrackableBehaviour.Status newStatus)
{
if (newStatus == TrackableBehaviour.Status.DETECTED ||
newStatus == TrackableBehaviour.Status.TRACKED ||
newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED) {
OnTrackingFound ();
eventoMarcador.MarcadorEncontrado(); //LLAMADO A FUNCION
AGREGADO

} else {
OnTrackingLost ();
//Debug.Log ("Marcador-perdido2");
eventoMarcador.MarcadorPerdido();/// LLAMADO A FUNCION
AGREGADO

}
}

#endregion // PUBLIC_METHODS

#region PRIVATE_METHODS

private void OnTrackingFound ()


{
Renderer[] rendererComponents = GetComponentsInChildren<Renderer> (true);
Collider[] colliderComponents = GetComponentsInChildren<Collider> (true);

// Enable rendering:
foreach (Renderer component in rendererComponents) {
component.enabled = true;
}

// Enable colliders:
foreach (Collider component in colliderComponents) {
component.enabled = true;
}

//Debug.Log ("Trackable " + mTrackableBehaviour.TrackableName + " found");


}

private void OnTrackingLost ()


{
Renderer[] rendererComponents = GetComponentsInChildren<Renderer> (true);
Collider[] colliderComponents = GetComponentsInChildren<Collider> (true);

// Disable rendering:
foreach (Renderer component in rendererComponents) {
component.enabled = false;
}

// Disable colliders:
foreach (Collider component in colliderComponents) {
component.enabled = false;
}

//Debug.Log ("Trackable " + mTrackableBehaviour.TrackableName + " lost");


}

#endregion // PRIVATE_METHODS
}
}
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------
A.5 Script VirtualButtonEventHandler

Es una modificación del script usado en el tutorial de vuforia para mostrar el


funcionamiento de los botones virtuales

using UnityEngine;
using System.Collections.Generic;
using Vuforia;

/// <summary>
/// This class implements the IVirtualButtonEventHandler interface and
/// contains the logic to swap materials for the teapot model depending on what
/// virtual button has been pressed.
/// </summary>
public class VirtualButtonEventHandler : MonoBehaviour,
IVirtualButtonEventHandler
{

public GameObject[] burbujas;


bool algoActivo = false;
bool sombreAC=false;
bool ponchoAC=false;
bool alpargatasAC=false;
bool macheteAC=false;
bool burroAC=false;
bool carrielAC=false;

void Start()
{
// Register with the virtual buttons TrackableBehaviour
VirtualButtonBehaviour[] vbs = GetComponentsInChildren<VirtualButtonBehaviour>();
for (int i = 0; i < vbs.Length; ++i)
{
vbs[i].RegisterEventHandler(this);
}

/// <summary>
/// Called when the virtual button has just been pressed:
/// </summary>
///
///
public void OnButtonPressed(VirtualButtonAbstractBehaviour vb)
{

switch (vb.VirtualButtonName)
{
case "Sombrero":
if(algoActivo==true&&algoActivo==false){
EsconderTodo (burbujas);
burbujas[0].SetActive(true);
sombreAC=true;
ponchoAC=false;
alpargatasAC=false;
macheteAC=false;
burroAC=false;
carrielAC=false;

break;
}
if (algoActivo==false&&sombreAC==false){
burbujas[0].SetActive(true);
algoActivo=true;
algoActivo=true;
break;
}

if(algoActivo==true){
algoActivo=false;
burbujas[0].SetActive(false);
algoActivo=false;
break;

break;

case "machete":

if(algoActivo==true&&macheteAC==false){

EsconderTodo (burbujas);
burbujas[1].SetActive(true);
macheteAC=true;
sombreAC=false;
ponchoAC=false;
alpargatasAC=false;
burroAC=false;
carrielAC=false;
break;
}
if (algoActivo==false&&macheteAC==false){

burbujas[1].SetActive(true);
algoActivo=true;
macheteAC=true;
break;
}
if(macheteAC==true){
algoActivo=false;
burbujas[1].SetActive(false);
macheteAC=false;
break;

}
//algoActivo=!algoActivo;
break;

case "poncho":
if(algoActivo==true&&ponchoAC==false){

EsconderTodo (burbujas);
burbujas[2].SetActive(true);
ponchoAC=true;
sombreAC=false;
alpargatasAC=false;
macheteAC=false;
burroAC=false;
carrielAC=false;
break;
}
if (algoActivo==false&&ponchoAC==false){

burbujas[2].SetActive(true);
algoActivo=true;
ponchoAC=true;
break;
}

if(ponchoAC==true){
algoActivo=false;
burbujas[2].SetActive(false);
ponchoAC=false;
break;

break;

case "carriel":
if(algoActivo==true&&carrielAC==false){

EsconderTodo (burbujas);
burbujas[3].SetActive(true);
carrielAC=true;
sombreAC=false;
ponchoAC=false;
alpargatasAC=false;
macheteAC=false;
burroAC=false;

break;
}
if (algoActivo==false&&carrielAC==false){

burbujas[3].SetActive(true);
algoActivo=true;
carrielAC=true;
break;
}

if(carrielAC==true){
algoActivo=false;
burbujas[3].SetActive(false);
carrielAC=false;
break;

break;

case "alpargatas":
if(algoActivo==true&&alpargatasAC==false){

EsconderTodo (burbujas);
burbujas[4].SetActive(true);
alpargatasAC=true;
sombreAC=false;
ponchoAC=false;
macheteAC=false;
burroAC=false;
carrielAC=false;
break;
}
if (algoActivo==false&&alpargatasAC==false){
burbujas[4].SetActive(true);
algoActivo=true;
alpargatasAC=true;
break;
}
if(alpargatasAC==true){
algoActivo=false;
burbujas[4].SetActive(false);
alpargatasAC=false;
break;

}
break;
case "burro":
if(algoActivo==true&&burroAC==false){
EsconderTodo (burbujas);
burbujas[5].SetActive(true);
alpargatasAC=false;
sombreAC=false;
ponchoAC=false;
macheteAC=false;
burroAC=true;
carrielAC=false;
break;
}
if (algoActivo==false&&burroAC==false){
burbujas[5].SetActive(true);
algoActivo=true;
burroAC=true;
break;
}
if(burroAC==true){
algoActivo=false;
burbujas[5].SetActive(false);
burroAC=false;
break;

}
break;
}
}
public void OnButtonReleased(VirtualButtonAbstractBehaviour vb)
{

switch (vb.VirtualButtonName)
{
case "Sombrero":
Debug.Log("sombreroSoltado");
//sombrero.SetActive(false);
break;

case "poncho":
//poncho.SetActive(false);
break;

case "carriel":
//carriel.SetActive(false);
break;

case "machete":
//machete.SetActive(false);
break;
case "alpargatas":
//alpargatas.SetActive(false);
break;
case "burro":
//burro.SetActive(false);
break;
}

}
void EsconderTodo (GameObject[] arr)
{
foreach(GameObject go in arr)
{
go.SetActive(false);
}
}
#endregion // PUBLIC_METHODS
}

//-----------------------------------------------------------------------
//-----------------------------------------------------------------------
A.6 Script LookAtY

Script facilitado por Guillermo Álvarez S. diseñador de medios interactivos,


profesor de video juegos y modelado 3D. y modificado.

using UnityEngine;
using System.Collections;

public class LookAtY : MonoBehaviour {

public Camera cameraToLookAt;

void Start()

{
transform.Rotate( 180,0,0 );

void Update()

{
Vector3 v = cameraToLookAt.transform.position - transform.position;
v.x = v.z = 0.0f;
transform.LookAt( cameraToLookAt.transform.position-v);
transform.Rotate(0,180,0);

}
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------
A.7 Scripts tomar foto y ScreenshotManager
Estos Scripts fueron descargados de la tiene de assets de unity, y modificados a
las necesidades del proyecto

using UnityEngine;
using System.Collections;

public class tomarFoto : MonoBehaviour {


bool savedScreenshot = false;
bool savedExistingImage = false;
public GameObject objActivar;
//bool activado = true;
//bool hideGUI = false;
// Use this for initialization
void Start () {
// call backs
ScreenshotManager.ScreenshotFinishedSaving += ScreenshotSaved;

}
void Update () {

}
public void foto(){
//OnGUI ();

}
public void tomarFot()
{
// the most important line - this is how you grab a screenshot!
StartCoroutine (ScreenshotManager.Save ("ImagenMuseo", "A.R.Aplication", true));
StartCoroutine (HideGUI ());

IEnumerator HideGUI ()
{
objActivar.SetActive(false);
yield return new WaitForEndOfFrame();
objActivar.SetActive(true);
}
void ScreenshotSaved(string path)
{
Debug.Log ("screenshot finished saving to " + path);
savedScreenshot = true;
}
using UnityEngine;
using System;
using System.IO;
using System.Collections;
using System.Runtime.InteropServices;

public class ScreenshotManager : MonoBehaviour {

public static event Action<string> ScreenshotFinishedSaving;


public static event Action<string> ImageFinishedSaving;

public static ScreenshotManager instance;

#if UNITY_IPHONE

[DllImport("__Internal")]
private static extern bool saveToGallery( string path );

#endif

public static IEnumerator Save(string fileName, string albumName = "MyScreenshots", bool callback
= false)
{
GameObject go = new GameObject();
go.name = "Screenshot";
ScreenshotManager instance = go.AddComponent<ScreenshotManager>();

bool photoSaved = false;

string date = System.DateTime.Now.ToString("dd-MM-yy");

ScreenshotManager.ScreenShotNumber++;

string screenshotFilename = fileName + "_" + ScreenshotManager.ScreenShotNumber + "_"


+ date + ".png";

Debug.Log("Save screenshot " + screenshotFilename);

string path = Application.persistentDataPath + "/" + screenshotFilename;;

#if UNITY_IPHONE
if(Application.platform == RuntimePlatform.IPhonePlayer)
{
Application.CaptureScreenshot(screenshotFilename);

while(!photoSaved)
{
photoSaved = saveToGallery(path);

yield return instance.StartCoroutine(ScreenshotManager.Wait(.5f));


}

iPhone.SetNoBackupFlag(path);
}
else
{
Application.CaptureScreenshot(screenshotFilename);
}

#elif UNITY_ANDROID

if(Application.platform == RuntimePlatform.Android)
{
string androidPath = Path.Combine(albumName, screenshotFilename);
path = Path.Combine(Application.persistentDataPath, androidPath);
string pathonly = Path.GetDirectoryName(path);
Directory.CreateDirectory(pathonly);
Application.CaptureScreenshot(androidPath);

AndroidJavaClass obj = new


AndroidJavaClass("com.ryanwebb.androidscreenshot.MainActivity");

while(!photoSaved)
{
photoSaved = obj.CallStatic<bool>("addImageToGallery", path);

yield return instance.StartCoroutine(ScreenshotManager.Wait(.5f));


}
}
else
{
Application.CaptureScreenshot(screenshotFilename);
}

#elif UNITY_WP8

if(Application.platform == RuntimePlatform.WP8Player)
{
Application.CaptureScreenshot(path);

while(!UnityEngine.Windows.File.Exists(path))
{
yield return instance.StartCoroutine(ScreenshotManager.Wait(.2f));
}

byte[] bytes = UnityEngine.Windows.File.ReadAllBytes(path);

WP8Screenshot.Main.SaveImage(bytes, screenshotFilename + ".png");


}
else
{
Application.CaptureScreenshot(screenshotFilename);
}

#else

while(!photoSaved)
{
yield return null;

Debug.Log("Screenshots only available in iOS/Android/WP8 mode!");

path = "";

photoSaved = true;
}

#endif

if(callback) ScreenshotFinishedSaving(path);
Destroy(go);
}

public static IEnumerator SaveExisting(byte[] bytes, string fileName, bool callback = false)
{
GameObject go = new GameObject();
go.name = "Screenshot";
ScreenshotManager instance = go.AddComponent<ScreenshotManager>();

bool photoSaved = false;

Debug.Log("Save existing file to gallery " + fileName);

string path = Application.persistentDataPath + "/" + fileName + ".png";

#if UNITY_IPHONE

if(Application.platform == RuntimePlatform.IPhonePlayer)
{
System.IO.File.WriteAllBytes(path, bytes);

while(!photoSaved)
{
photoSaved = saveToGallery(path);

yield return
instance.StartCoroutine(ScreenshotManager.Wait(.5f));
}

iPhone.SetNoBackupFlag(path);
}

#elif UNITY_ANDROID

if(Application.platform == RuntimePlatform.Android)
{
AndroidJavaClass obj = new
AndroidJavaClass("com.ryanwebb.androidscreenshot.MainActivity");
System.IO.File.WriteAllBytes(path, bytes);

while(!photoSaved)
{
photoSaved = obj.CallStatic<bool>("addImageToGallery", path);

yield return
instance.StartCoroutine(ScreenshotManager.Wait(.5f));
}
}

#elif UNITY_WP8

if(Application.platform == RuntimePlatform.WP8Player)
{
WP8Screenshot.Main.SaveImage(bytes, fileName);

yield return null;


}

#else

while(!photoSaved)
{
yield return null;

Debug.Log("Save existing file only available in iOS/Android/WP8 mode!");

path = "";

photoSaved = true;
}

#endif

if(callback) ImageFinishedSaving(path);

Destroy(go);
}
public static IEnumerator Wait(float delay)
{
float pauseTarget = Time.realtimeSinceStartup + delay;

while(Time.realtimeSinceStartup < pauseTarget)


{
yield return null;
}
}

public static int ScreenShotNumber


{
set { PlayerPrefs.SetInt("screenShotNumber", value); }

get { return PlayerPrefs.GetInt("screenShotNumber"); }


}
}
Anexo B
El contenido de esta sección es el guio utilizado en la grabacion de los audios del
personaje

B.1 Guion

1. Primera escena (introducción)

Personaje: Ponchito el cafetero

 Como me les va amiguitos? …(silencio)… ah Bueno eso alegra


bastante mi nombre es Ponchito y les agradezco por venir a
visitarme aquí en el museo Samoga, hoy vamos a conocer sobre la
vestimenta que acompañan a un buen cafetero colombiano, ustedes
con los botones de abajo puede escoger sobre lo que deseen
saber….Así que elijan ustedes pues.

2. Escena dos (alpargatas)

Ahora voy a contarles sobre estas chanclas, nosotros le decimos alpargatas


y nos acompañan a nosotros los cafeteros y campesinos colombianos en
nuestras largas caminatas por el campo de café cuidando y dándole
comodidad a nuestros pies, a nosotros nos gusta mucho porque son frescas
y se adaptan a la forma de los pies, son las compañera inseparables
nuestras porque su comodidad nos permite trabajar la tierrita durante
largas jornadas al día.

Les quiero contar un poquito sobre mis alpargatas las cuales usamos los
cafeteros y campesinos colombianos de pura cepa….que nos acompañan
en nuestras largas caminadas por los campos de café cuidando y dándole
comodidad a nuestros pies….les voy a contar un poquito más sobres
nuestras alpargatas, incondicionales en el día a día.. veamos pues:
 La alpargata nos gusta mucho porque es un calzado fresco que deja
respirar la piel del pie y se adapta a su forma y son unas
compañeras inseparables nuestras porque por su comodidad nos
permite trabajar la tierrita durante largas jornadas al día
En texto
 La alpargata llego a nuestro continente americano con la
colonización europea y es usada indistintamente por hombres y
mujeres, aunque algunas puedan tener variedades de bordes y
formas del tejido, así como una ‘amapolita’ en la tela, de color
contrastante, para diferenciarlas de las de uso universal.

3. Escena tres (poncho)

El poncho ¡ja! no nos puede hacer falta…es el fiel amigo de combate no


deja sentir el frio en nuestras hermosas montañas cafeteras, nos
refugiamos debajo del cuándo la niebla esta espesa... Pero cuando no
sentimos frio, el poncho este nos acompaña en un hombro pa’ donde
vayamos….Ahora les voy a contar un poquito sobre su historia…presten
atención pues

 El poncho forma parte de la vestimenta habitual de los nativos


amerindios de la región el poncho es de origen andino, y fue
adoptada por los criollos. Es una prenda tradicional de abrigo
originaria de América del sur y se trata de una pieza de tela gruesa y
pesada, tejida en lana de oveja, al centro se hace una abertura por
la cual se introduce la cabeza, y se deja caer sobre el cuerpo por eso
es que queda abierto por los costados para permitir mover los brazos
libremente.

En texto:

 El poncho fue usado por indios, gauchos, mestizos y blancos, y es


de uso frecuente actualmente, tanto en abrigo para el trabajo de los
hombres del campo y la montaña, así como prenda de vestir invernal
para damas y caballeros de las ciudades.

4. Escena cuatro: El carriel

Oíste este que parece un bolso cualquiera es una carriel. Es un compañero


incondicional que carga los chécheres donde vayamosy ahí depositamos
porque sabemos que siempre guardara nuestra cosa con mucho cuidado y
nos las llevara a donde siempre vayamos…..así que pues…les contare un
poquito de su historia….veamos pues:

 El carriel que siempre fue accesorio masculino se utilizó


ampliamente para la supervivencia de los arrieros y cafeteros, y una
de sus características es que suele tener numerosos bolsillos y
compartimientos, algunos llamados “secretos”.

En texto:

 Es un símbolo paisa. Se usan por estas tierras desde tiempos


inmemoriales. Los carrieles que se usaban hace mas de cien años
tenían por lo general dos o tres bolsillos únicamente, pero con el
tiempo estos bolsillos han aumentado llegando hasta 18 bolsillos.
 Un carriel moderno y practico no tiene más de nueve bolsillos,
contando los tres bolsillos secretos en los que guardamos nuestras
pertenecías de más valor.

5. Escena cinco: El machete

Ah de este me gusta hablar Nuestro machete es incondicional porque no


ayuda a despejar el camino por donde vamos y a limpiar la maleza en
donde trabajamos. Nos sirve para cortar lo que tenemos que cortar y es
entretenido sacar su filo….nos lo ponemos en la cintura sobre el cuadril
izquierdo, metido en una vaina ancha como de cuatro dedos, hecha de
cuero color amarillo o café y adornada con reputajos tradicionales. Tiene
como adorno dos manojos de ramales de cuero.

6. Escena seis ( el sombrero aguadeño)

Un cafetero colombiano no sería un cafetero colombiano sin un sombrero


aguadeño… El sombrero nos da un distintivo y nos da sombra para las
largas jornadas de trabajo en el sol.

La llegada del ecuatoriano Juan Crisóstomo Flórez al municipio de


Aguadas, Caldas, en 1860, dio origen a la industria del sombrero aguadeño.
Cuenta la historia que el forastero procedente de Cuenca, trajo un sombrero
tejido en fibra extraída de la palma de iraca, lo desbarató y con él enseñó a
algunas humildes señoras el secreto de su tejido.

En texto

 El Sombrero Aguadeño es una artesanía que con los años se ha


convertido en símbolo representativo de Colombia. Se teje
en Aguadas, departamento de Caldas, de donde deriva su nombre y
su elaboración es un saber de mujeres campesinas, que de madres
a hijas se ha heredado desde hace 150 años.
7. Escena siete (el burro)

El burro…mi gran y fiel amigo… me quita mucha carga de encima y es un


trabajador incansable que siempre está a mi lado…..A este burrito le debo
mucho aunque en ocasiones es muy terco ese berraco… éléxito del trabajo
de esta tierra ha sido la paciencia y nobleza de este animalito.

En texto:

 El burro pertenece a la familia de los equinos típicos, generalmente


es más pequeño y posee orejas más largas que el caballo
doméstico.
 Desde comienzos de la historia, los burros han sido utilizados para
trasladar cargas, tirar de carros y transportar personas. Los burros
tienen una larga vida y su mantenimiento es menos costos que el de
un caballo
 El burro es bastante inteligente, cauteloso, amistoso, juguetón e
interesado en aprender y si se gana su confianza pueden ser buenos
compañeros en el trabajo y la recreación.
Anexo C
El contenido de esta sección formato de evaluación y evaluaciones

C.1 Formatos y encuestas para las evaluaciones


Estas encuestas fueros realizadas a los niños y jóvenes que usaron el aplicativo
en sus dos prototipos. Se aclara que los prototipos usados en las evaluaciones no
tienen todas sus funcionalidades completa.

Formato de Prueba diseño y usabilidad


Tipio de Prueba
Prototipo
Espacio (Lugar)
Nombre de Edad
usuario
Sexo
Masculino Femenino
Dispositivo Tableta
Móvil Smartphone
Sistema IOS BlackBerry Windows
Operativo Android Phone
Tarea a realizar por el Comentario de usuario (Nivel de satisfacción,
usuario sugerencias)
Abrir el mundo del
aire

Abrir la información
de uno de los objetos
del cafetero

Estando en el mundo
del aire ir a cualquier
otro mundo

Estando en uno de
los mundos volver al
menú principal
Ir al mundo del aire y
tomar una foto,
guardarla o
rechazarla

Formato de Prueba diseño y usabilidad abierta


Tipio de Prueba
Prototipo
Espacio (Lugar)
Nombre de Edad
usuario
Sexo
Masculino Femenino
Usa dispositivo SI NO
móvil?
Tipo de Tableta
dispositivo Smartphone
Sistema IOS BlackBerry Windows
Operativo Android Phone
Tarea que intentó Comentarios de usuario (Nivel de satisfacción,
realizar el usuario sugerencias)
Anexo D
D.1 Documento propuesta enviado a el museo
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

Como propuesta para el desarrollo de nuestro proyecto, y siguiendo la información de los documentos
enviados por ustedes en donde se propone la creación de una aplicación de realidad aumentada,
proponemos el desarrollo de un componente de realidad aumentada para cada mundo, los cuales van a
estar en una misma aplicación móvil.

A continuación se muestra y se explica el tema seleccionado para desarrollar la aplicación de realidad


aumentada para cada mundo, donde se sintetiza la información de los textos y se refuerza con información
de otras fuentes:

Mundo: Aire. Tema: El Cafetero Colombiano

El Cafetero Colombiano fue elegido como tema, porque en los textos provistos para este mundo se da a
conocer en un contexto histórico, la cantidad de valores y virtudes con las que se ha formado el carácter de
los cafeteros, en donde han interferido otras culturas de otras regiones del país.

Mundo: Agua. Tema: Rio Magdalena

El rio Magdalena es sin duda el tema más apropiado para ser desarrollado en el aplicativo de realidad
aumentada del mundo del agua, porque aparte de ser el afluente más importante para Colombia, el
magdalena centro que atraviesa por algunas partes en Caldas, es una gran fuente para el desarrollo de todos
los aspectos del departamento, y es muy considerado en todos los textos provistos para el mundo del agua.

Mundo: Tierra. Tema: Cultura Umbra

La cultura Umbra dejo mucho legado en diferentes partes de caldas y todo el eje cafetero, y por ello se ha
elegido desarrollar el aplicativo de realidad aumentada para el mudo de la tierra en base a este tema, con
propósito de aportar un poco al rescate de las características culturales que se han olvidado de esta cultura
mística que maneja sonidos fonéticos muy particulares en su lenguaje, el cual hoy en día solo es practicado
por muy pocas familias en el interior del país.

Mundo: Fuego. Tema: Volcán Nevado del Ruíz

El Nevado del Ruíz es un gran atractivo turístico colombiano ubicado en el límite entre los departamentos de
Calda y Tolima, por lo cual es un monumento natural digno de mostrar en un aplicativo de realidad
aumentada ya que como tema es lo más adecuado y acertado para mostrar en el mundo del fuego.

Teniendo en cuenta las razones de la elección de cada tema para cada mundo, se ha hecho un refuerzo
información apoyándose en otras fuentes, y un filtro de la información provista por el museo, que se va a
usar en el desarrollo de cada aplicativo de realidad aumentada para cada uno de los temas. A continuación
se muestra la información que hará parte en el complemento de la explicativo de la aplicación:
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

AIRE (YURUPARÍ):

EL Cafetero colombiano.

“Alrededor del café en Colombia se ha conformado una de las redes sociales con mayor diversidad de
culturas y rasgos en los que están incluidas diferentes comunidades indígenas, afro-descendientes y
herederos de los colonos de origen blanco o mestizo, todos con diversas manifestaciones culturales entre
las regiones. Se trata de gente cuya música, acento y hasta lengua pueden variar significativamente, con
influencia Caribe o claramente andina, que le aporta con su maravillosa idiosincrasia a la gran familia de los
cafeteros colombianos. Los cafeteros colombianos han dejado sus diferencias a un lado para trabajar unidos
en obtener objetivos comunes y han aprendido a desarrollar un espíritu de colaboración y comunitario difícil
de replicar en otros ámbitos. La gente del café en Colombia ha desarrollado un espíritu comunitario y de
acción colectiva que también hace parte de sus más preciados valores, y que le ha permitido desarrollar
ambiciosos programas de sostenibilidad en acción. “

La siguiente es la información para explicar cada prenda característica de los cafeteros:

• La alpargata es usada indistintamente por hombres y mujeres, aunque algunas puedan tener
variedades de bordes y formas del tejido, así como una ‘amapolita’ en la tela, de color contrastante,
para diferenciarlas de las de uso universal.
• El poncho es de origen andino y forma parte de la vestimenta habitual de los nativos amerindios de
la región, también fue adoptada por los criollos.
• El rabo de gallo o pañuelo de seda o satín rojo es uno de los accesorios tradicionales de los
hombres dentro de la cultura cafetera.
• El carriel que siempre fue accesorio masculino se utilizó ampliamente para la supervivencia de los
arrieros, y una de sus características es que suele tener numerosos bolsillos y compartimientos,
algunos llamados “secretos”.
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

AGUA (BACHUÉ):

Rio Magdalena

“posición geoestratégica , Suelos fértiles en especial el Valle del Magdalena, El Magdalena como hidrovía,
Sistema de transporte ferroviario, Ruta del Sol y Autopista Medellín Bogotá, Sistema hidroenergético, Red
de oleoductos, Aeropuerto de Flandes y vecindad de El Dorado, Distribución demográfica, Cercanía a una
Megalópolis (Bogotá) y vecindad con Medellín y el Eje Cafetero

El río Magdalena nace en el extremo suroccidental del país, a 3.685 metros de elevación, en la laguna de la
Magdalena, localizada a los 01º 55’ 40” de latitud norte y 76º 35’ 08” de longitud oeste, ubicada en una
pequeña planicie del Páramo de las Papas, correspondiente al Macizo colombiano, en el Departamento del
Huila. Su longitud, según la fuente, varía de 1.528 a 1.600 km, de los cuales 886 son navegables

Se denomina Valle Intermedio del río Magdalena al área comprendida entre la ciudad de Neiva, capital del
departamento del Huila y el municipio de Morales, en el departamento de Bolívar, incluyendo las llanuras
laterales que conforman el respectivo valle por debajo de los 1.500 metros entre Neiva y Girardot, para
luego conservar la cota de los 1.000 metros hasta Morales. El río Magdalena en esta región tiene un
recorrido aproximado de 700 kilómetros, presentando una diferencia de altura entre los dos puntos
extremos (Neiva y Morales) de 456 metros. La región se subdivide en cuatro sub-regiones, de sur a norte, de
acuerdo al curso del río.”

FUEGO (CHMINIGAGUA):

Volcán Nevado del Ruiz.

“El Nevado del Ruiz posee una forma alargada en dirección NE - SW, algo achatado y con un diámetro mayor
en su base de 15 km de longitud, con un cráter activo de 870 x 830 m de diámetro y profundidad de 247 m
(cráter Arenas ). La Olleta, al W, y La Piraña,al E, son dos volcanes parásitos o secundarios del Nevado del
Ruiz. El drenaje es radial excéntrico y en el edificio volcánico nacen los ríos Güalí, Lagunillas y Recio,
afluentes del río Magdalena, y el río Chinchiná, afluente del Cauca; se trata de valles estrechos, profundos y
de alta pendiente.

El volcán está cubierto por un casquete glaciar, su principal atractivo de los órdenes local hasta
internacional, con un volumen de hielo calculado en 1200 a 1500 millones de metros. Es el volcán de mayor
atracción turística en Colombia; posee fuentes termales, fumarolas, rutas para escaladores en hielo, refugio,
miradores e infraestructura turística. Además, hace parte del Parque Nacional Natural Los Nevados.”
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

TIERRA (PACHAMAMA):

En este mundo aún no se decide qué información complementara el modelo a mostrar en el aplicativo de
realidad aumentada, pero posiblemente sea relacionado con los indígenas y la cultura umbra.

Los umbras (Cultura)

“Los chamí comparten la historia prehispánica y colonial de los embera, caracterizada por su continúa
resistencia a las incursiones conquistadoras hasta el siglo XVII, cuando la mayoría de los pueblos huyeron
hacia las selvas. En el proceso de asentamiento en su actual territorio, han estado en permanente contacto
con poblaciones mestizas y afrocolombianas con las que comparten su área de ocupación, así como con
otros actores de la sociedad mayoritaria que han configurado la dinámica social y económica de sus
asentamientos.

El país indígena del Viejo Caldas

Geográficamente, el mapa del Gran Caldas o Viejo Caldas corresponde a la región del curso medio del río
Cauca Medio. En la época que llegaron los españoles se distinguían en el Cauca Medio tres zonas o
subregiones indígenas claramente delimitadas, que pueden apreciarse en el mapa adjunto, elaborado por el
arqueólogo e historiador Luis Duque Gómez.

a) Entre la margen derecha del río Cauca y el filo de la cordillera Central (nevado del Ruiz), habitaban, de
norte a sur: Armas, Paucaras, Pozos, Picaras, Carrapas, Quimbayas y Quindos. Sonsón era territorio Arma;
Manizales territorio Carrapa; Pereira territorio Quimbaya y Armenia territorio Quindo. Todos los pueblos
originarios de esta zona fueron exterminados. De cerca de 50.000 indígenas que la habitaban solo sobrevivió
un puñado de Sonsones, del pueblo de los Armas, quienes en 1627 fueron trasladados a la Vega de Supía y
hoy habitan en el Resguardo Indígena de San Lorenzo (Riosucio). El territorio quedó despoblado durante dos
siglos, siendo posteriormente colonizado por los antioqueños, quienes fundaron sucesivamente Sonsón,
Aguadas, Pácora, Salamina, Manizales, y de ahí en adelante otras poblaciones hasta el norte del Valle, donde
entrelaza con colonización vallecaucana.

b) Entre la margen izquierda del río Cauca y un ramal de la cordillera Occidental, habitaba el pueblo indígena
conocido genéricamente por los españoles como “Ansermas”, pero compuesto a su interior por múltiples
grupos, cuyo territorio abarcaba desde los actuales municipios de Belén de Umbría y Anserma hasta
Marmato, y el grupo independiente de los Irras, en estrecha vecindad al norte con los indígenas de
Caramanta y Cartama, y al occidente con los Chamí. Los indígenas de esta zona fueron reducidos de 40.000 a
1.000 en los primeros 40 años de la Conquista. La Colonia les tituló tierras de resguardo desde 1627, que a
su vez fueron recortadas a menos del 20% durante la República (1874-1890 y 1943-1954). Pero no
desaparecieron: se integraron al funcionamiento del Gran Cauca y desde 1905 al Viejo Caldas. Hoy en día sus
descendientes habitan, la mayoría, en Guática, Quinchía, Riosucio, Supía y Marmato, identificándose como
parte del Pueblo EmberaChamí.
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

c) Las riberas del río Risaralda, afluente del río Cauca, y de los ríos Tatamá y San Juan, en dirección al Chocó
(a espaldas de Guática y Riosucio), también en la cordillera Occidental, ya entonces era habitada por el
pueblo indígena Chamí. Pese a que el conquistador Robledo envió en 1539 la primera avanzada para
someterlos, los españoles fueron en general repelidos y este pueblo se ha mantenido culturalmente fuerte,
en los actuales municipios de Pueblo Rico y Mistrató, gracias a la espesura de la selva, a su poblamiento
disperso, a la carencia de un gobierno unificado y a que el oro y el platino del Chocó se explotaron más allá
de su territorio. La República no los afectó inicialmente. Sin embargo, su resguardo también fue disuelto en
1874 y colonizado después por los antioqueños, perdiendo gran parte de su territorio, por lo que desde
comienzos del siglo XX, luego durante La Violencia y actualmente por el conflicto armado este pueblo se ha
irrigado por todo el occidente colombiano y en los últimos años por las ciudades capitales, en condiciones
de extrema pobreza y aún de mendicidad.”
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

Boceto Contexto General del


Funcionamiento de la Aplicación A.R

1 Usuario Aplicación AR 4
2 Dispositivo Móvil
5
3 Marcador AR
1 3
4 Modulo
2
5 Usuario Aplicación Modulo
6 Aplicación AR

6
cion
rma
Info

cion
rma
Info

cion
rma
Info

En cada uno de los mundo habrá un Marcador ubicado de tal manera que no interfiera
con las interacción de los demás usuarios con la aplicación del modulo. El usuario de la
aplicación A.R al apuntar la cámara del dispositivo a el marcador podrá ver contendió
en realidad aumentada del mundo
Aplicación A.R
Aplica
R.A
ción Samoga, Museo Interactivo Ciencia Juego Tecnología.

SPLASH

Pantalla de carga de la aplicación


1
(Loading screen): Primera pantalla
al abrir la aplicación lleva el logo y
el eslogan de la aplicación, se mostrara
hasta que el dispositivo cargue la
aplicación o por unos segundos.
2

1. Fondo por definir.


2. Logo del museo.

3. Eslogan: del museo 3


Eslogan
4. Loading: indica que la
aplicacion esta cargando

LOADING
Aplicación A.R
Aplica
R.A
ción Samoga, Museo Interactivo Ciencia Juego Tecnología.

P-01

1
Menú de la aplicación
Después del splash está el menú de la aplicación
2
que consta de 5 botone, 4 de ellos de cada mundo
Yurupari, Bachue, Pachamama, Chiminigagua, -
el ultimo Acerca De.

Yurupari
1. Fondo por definir:
2. Logo del museo
Bachue
3. Botones de los mundos: Navegan
hacia el Splash de cada mundo.
Pachamama
Fuente por definir
4. Boton Acerca de: Navega hacia
P-06. Chiminigagua

Acerca De
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

SPLASH DE LOS MUNDOS

Pantalla de carga del mundo del Aire 1


(Loading screen): lleva el logo del Aire y
La palabra Yuripari (Aire en umbra), se mostrara
hasta que el dispositivo cargue o
por unos segundos.
De forma similar para los splash del agua,
tierra y fuego.

2
1. Fondo: desacuerdo los colores del logo
2. Logo del aire provisto por el museo
3. Texto Yurupari: Funte por definir

3
Yurupari
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

P-02

Pantalla del mundo del aire: en donde se verá 1


un modelo 3D en realidad aumentada.

1. Fondo: No tiene fondo, el fondo es el


espacio real visto atreves de la pantalla
de celular utilizando la cámara del mismo.

2. Objeto 3D que se superpones en el espacio,


en el caso del aire es un modelo de un
Cafetero Colombiano.

3. Botones de información: Al ser presionados


Navegan a hacia P-2.1, P-2.2, P-523, P-2.4
respectivamente mostrando información
3
sobre el tema del mundo. 4

4. Botones atras navega hacia P-01


DIAGRAMA DE FLUJO
Aplica
R.A
ción NAVEGACIÓN Y ARQUITECTURA DE LA INFORMACIÓN

P-05

Pantalla del mundo del fuego: en donde se verá 1


un modelo 3D en realidad aumentada.

1. Fondo: No tiene fondo, el fondo es el


espacio real visto atreves de la pantalla 2
de celular utilizando la cámara del mismo.

2. Objeto 3D que se superpones en el espacio,


en el caso del fuego es un modelo de un
Volcan.

3. Botones de información: Al ser presionados


Navegan a hacia P-5.1, P-5.2, P-5.3, P-5.4
respectivamente mostrando información 3
sobre el tema del mundo. 4

4. Botones atras navega hacia P-01


DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

P-04

Pantalla del mundo del tierra: en donde se verá


1
un modelo 3D en realidad aumentada.

1. Fondo: No tiene fondo, el fondo es el


espacio real visto atreves de la pantalla
de celular utilizando la cámara del mismo.

2. Objeto 3D que se superpones en el espacio,


en el caso del fuego es un modelo de un
indigena de la region.

3. Botones de información: Al ser presionados


Navegan a hacia P-4.1, P-4.2, P-4.3, P-4.4
respectivamente mostrando información 3
sobre el tema del mundo. 4

4. Botones atras navega hacia P-01


DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

P-03

Pantalla del mundo del agua: en donde se verá 1


un modelo 3D en realidad aumentada.

1. Fondo: No tiene fondo, el fondo es el 2

espacio real visto atreves de la pantalla


de celular utilizando la cámara del mismo.

2. Objeto 3D que se superpones en el espacio,


en el caso del agua el modelo aun no definido.

3. Botones de información: Al ser presionados


Navegan a hacia P-3.1, P-3.2, P-3.3, P-3.4
respectivamente mostrando información 3
sobre el tema del mundo. 4

4. Botones atras navega hacia P-01


DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

P -2.1

Pantalla de de información donde ser


desplegara la información sobre el
tema seleccionado para cada mundo,
en este caso es sobre el cafetero que
es del mundo del aire, de forma
similar para los del agua, tierra y fuego.
x
2
1

1. Cuadro de dialogo

2. Botón de cierre del cuadro de dialogo


DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
R.A
ción NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

P-05

Pantalla Acerca de: información sobre la aplicación


el museo y sus desarrolladores
1

Información respecto a la aplicación


y al museo, como también
1. Fondo deazcuerdo a los colore de la aplicacion:
de los desarrolladores de la misma
2. Información
3. Botones atras navega hacia P-01

3
DIAGRAMAA.R
Aplicación DE FLUJO
Aplica
ción
R.A NAVEGACIÓN
Samoga, Museo
Y ARQUITECTURA
Interactivo Ciencia
DE Juego
LA INFORMACIÓN
Tecnología.

Diagrama de flujo SPLASH

SPLASH AGUA P- 3.1 P- 3.2 P- 3.3 P- 3.4


P- 03
Eslogan

x x x x

Bachue

P- 02 SPLASH AIRE P- 01

Yurupari

Bachue
SPLASH TIERRA P- 04 P- 4.1 P- 4.2 P- 4.3 P- 3.4
Pachamama

Yurupari Chiminigagua

Acerca De x x x x

Pachamama

P- 2.1 P- 2.2 P- 2.3 P- 2.4

x x x x P- 06

Información respecto a la aplicación


y al museo, como también
de los desarrolladores de la misma SPLASH FUEGO P- 5.1 P- 5.2 P- 5.3 P- 5.4
P- 05

x x x x

Chiminigagua

También podría gustarte