Tabletas en el aula. Apps de Realidad Aumentada. Edición Autor: Fernando Posada Prieto canaltic.com

Transcripción

1 Tabletas en el aula Apps de Realidad Aumentada Edición 2015 Autor: Fernando Posada Prieto canaltic.com

2 Apps de Realidad aumentada Índice 1. Google Goggles Aumentaty Junaio Aurasma Página 1 de 33

3 1. Google Goggles Google Googles es una aplicación para Android que permite buscar información haciendo una foto. Permite apuntar con la cámara de tu tableta a un cuadro, lugar, imagen, etc,. Si se trata de algo muy popular y Goggles lo encuentra en su base de datos, te mostrará información útil del mismo. Esta aplicación también reconoce texto en francés, inglés, italiano español, etc y puede traducirlo. También srive de escáner de códigos QR y de barras. 1. Utiliza Play Store para instalar Google Goggles. 2. Pulsa sobre el icono de Google Goggles. 3. Para probar esta aplicación enciende un ordenador y utiliza Google Imágenes para localizar una imagen de un cuadro famoso. Por ejemplo: Las Meninas de Velázquez. También se puede utilizar un libro de texto. 4. Apunta con la cámara de la aplicación para encuadrar esa imagen y pulsa en el botón de la cámara para iniciar el escaneo. Página 2 de 33

4 5. Si encuentra alguna coincidencia en su base de datos mostrará las entradas correspondientes en la parte inferior. 6. Pulsa en una de ellas para consultar la información. 7. Se mostrará automáticamente la página de resultados de Google relacionada con ese término de búsqueda. 8. También se puede probar con imágenes de monumentos famosos o con carteles en otros idiomas para comprobar que detecta el texto y lo traduce al castellano. 2. Aumentaty 2.1 Introducción Aumentaty ( es una solución de software para la creación y visualización de realidad aumentada. Dispone de una suite de herramientas con distintas posibilidades creativas entre las cuales destacan: Aumentaty Author y Aumentaty Viewer. Se utiliza para crear y visualizar modelos 3D usando marcadores específicos. Es una solución gratuita e ideal para crear libros de modelos 3D en realidad aumentada. El visor es compatible con PC (Win y Mac), IOS y algunos dispositivos Android. Página 3 de 33

5 Aumentaty Geo. Es una herramienta web gratuita que permite crear rutas de POIs que luego se visualizan con una app en la tableta. Aumentaty Search. Es una herramienta de pago que se utiliza para crear realidad aumentada vinculada a un marcador que puede ser una imagen personalizada. 2.2 Crear un libro con modelos 3D de AR con Aumentaty Author. Paso 1. Obtener el modelo 3D Existen distintas herramientas para crear modelos 3D. Una de las más populares es Sketchtup. Puede funcionar en un equipo Windows o Mac (no funciona en Android). 1. Accede a la web de descargas de Sketchup: 2. Descarga la versión SketchUp Make que es la versión gratuita para centros escolares. Asegúrate de que es la versión en Español y para tu sistema Windows 32/64 bits o Mac. 3. Instala la aplicación y haz doble clic sobre su icono en el Escritorio para abrirla. 4. En este caso se propone descargar un modelo 3D ya hecho porque la edición de contenidos 3D con Sketchup excede el propósito de este manual. Página 4 de 33

6 Para ello accede a la Galería de Sketchup en Internet: 5. En el cuadro de texto introduce el término de búsqueda. Por ejemplo: shark (tiburón). 6. Pulsa sobre un modelo concreto para acceder a su página individual. Por ejemplo: 7. Clic en el botón Descargar y elige Modelo de Sketchup X 8. Esta acción descargará un archivo del tipo *.SKP editable desde el programa Sketchup. 9. Desde el programa Sketchup elige Archivo > Abrir 10. Navega por tu equipo para localizar el archivo *.SKP descargado. Ábrelo. 11. Para visualizar el modelo 3D haz clic en el botón Orbitar y luego pulsa y arrastra sobre él a un lado y a otro. Página 5 de 33

7 12. Para una integración óptima del modelo 3D en Aumentaty Author es necesario transformarlo en formato *.OBJ. Para ello desde Sketchup elige Archivo > Exportar > Modelo 3D. 13. En el cuadro de diálogo Exportar modelo define la carpeta destino, introduce el nombre del archivo destino y despliega el combo de formatos para elegir Archivo OBJ (*.obj) 14. Para terminar pulsa en el botón Exportar. 15. Esta acción genera en la carpeta destino dos archivos: *.MTL y *.OBJ. Ambos deben estar presentes para luego importarlos desde Aumentaty Author. Paso 2. Crear la escena desde Aumentaty Author 1. Descarga e instala el programa Aumentaty Author en tu ordenador desde la web: Será necesario registrarte como usuario. Página 6 de 33

8 2. Haz doble clic sobre el icono de Aumentaty Author para acceder a esta aplicación en tu ordenador PC. 3. En la sección Marcas RA pulsa en un modelo de marcador y a continuación haz clic en Imprimir. 4. Se abrirá el programa Adobe Reader mostrando su contenido. Elige Archivo > Imprimir para obtener este marcador en papel. 5. En la sección Biblioteca de modelos haz clic en Importar y selecciona el modelo 3D obtenido. Este modelo se mostrará en el panel de Biblioteca de modelos. Página 7 de 33

9 6. Pulsa y arrastra el modelo elegido para soltarlo encima de la marca seleccionada. Observa que la marca ahora se muestra con un fondo amarillo. 7. Haz clic en el botón Usar fuentes de vídeo y se activará la cámara del ordenador. 8. Sitúa el marcador en papel frente a la cámara y se mostrará superpuesto el modelo 3D elegido. Página 8 de 33

10 9. Utiliza los botones de Rotación, Escalado y Traslación para ajustar el modelo 3D en relación con el marcador. 10. Cuando hayas terminado guarda la escena mediante Fichero > Guardar escena. 11. Define la carpeta destino e introduce un nombre de escena. Se guardará en un archivo de formato *.ATY 12. Para su visualización con Aumentaty Viewer elige Fichero > Exportar > Exportar a Viewer para móviles o bien Fichero > Exportar > Exportar a Viewer si el destino de visualización es un ordenador PC y no una tableta. 13. Pulsa en el botón Guardar. Esta acción generará un archivo de extensión *.ATM (móviles) o bien *.ATX (ordenador). Es posible introducir las credenciales de registro de Aumentaty para a continuación pulsar en Compartir. Esta acción sube el archivo creado al servidor de Aumentaty y te proporciona una URL de descarga. Sin embargo en la versión gratuita este almacenamiento sólo será temporal. Por este motivo otra opción podría ser subir ese archivo a tu página web, DropBox, Gogole Drive, etc y ofrecer el enlace de descarga a tus alumnos. Página 9 de 33

11 Paso 3. Visualizar la escena desde Aumentaty Viewer 1. Desde Play Store instala la aplicación Aumentaty Viewer. 2. Copia el archivo *.ATM a la tableta usando el conector USB o bien publícalo en un blog o página web para descargarlo a la misma. Se puede utilizar un código QR para la descarga a la tableta. 3. Utiliza el Explorador de archivos de tu tableta para localizar este archivo y haz tap sobre él para abrirlo. 4. Si tienes instalada la aplicación Aumentaty Viewer se abrirá y se cargará esa escena. Al cabo de unos segundos se mostrará el modelo de marcador que es necesario utilizar. 5. Pulsa en el botón de Cámara para apuntar con la cámara de la tableta a la marca en papel. Se mostrará el modelo 3D. Notas: Página 10 de 33

12 Catálogo de marcadores. Usando Aumentaty Author es posible imprimir en papel todo el catálogo de marcadores para luego pegar en un libro, apuntes, etc. Como hemos visto es necesario cargar la escena diseñada con el visor para que al enfocar el marcador con la cámara se muestre el modelo 3D sobre el mismo. Funcionamiento en tabletas. El visor de Aumentaty NO funciona de forma fiable en ciertos modelos de tabletas debido a limitaciones del hardware: procesador, memoria RAM y tarjeta gráfica. Sin embargo si se utiliza el visor en un portátil o notebook la experiencia de usuario suele ser satisfactoria. Se espera que la app para Android mejore en un plazo breve de tiempo. 2.3 Crear una ruta de POI con Aumentaty Geo Aumentaty Geo permite crear fácilmente puntos de interés (POI) y agruparlos en rutas. Para ello se utiliza un gestor de contenidos en línea que facilita la incorporación de textos, imágenes, vídeos y enlaces a los POI. Paso 1. Crear una ruta en Aumentaty Geo 1. Accede a la web de Aumentaty Geo: 2. Regístrate como usuario introduciendo nombre, apellidos, y contraseña. 3. A continuación pulsa en Identifícate e introduce tus credenciales de acceso 4. Una vez autentificado pulsa en el botón Crear y administrar Rutas. Página 11 de 33

13 5. Pulsa en el enlace Añadir ruta. 6. En la página Nueva ruta introduce el título, descripción, ámbito, palabras clave, tipo, etc. También puedes subir una imagen destacada. 7. Para terminar pulsa en el botón Crear. Paso 2. Añadir POIs a una ruta 1. Desde el escritorio de trabajo de Aumentaty Geo pulsa en el botón Crear y administrar tus POIs 2. Clic en Añadir POI Página 12 de 33

14 3. En el apartado Marcador introduce el nombre identificativo del lugar y pulsa en el botón Find Address (Localizar dirección). Si el proceso ha tenido éxito en el mapa de mostrará el marcador. 4. Recoloca el marcador para situarlo en el punto exacto. 5. Observa que en la casilla Localización se mostrarán los valores exactos de geolocalización. 6. En el apartado Info introduce la información textual relativa al POI: Ruta, Título, Categorías, Etiquetas, Descripción y Orden en la ruta. 7. En la sección Imagen principal sube una imagen JPG con las características recomendadas. Página 13 de 33

15 8. En la columna lateral derecha se pueden añadir imágenes, archivos y vídeos adicionales. También es posible situar enlaces a páginas web o incluso un vídeos de Youtube. 9. Para terminar pulsa en el botón Crear. 10. Repite los pasos anteriores para crear más POI en la ruta. Paso 3. Acceder a la ruta desde el visor de Aumentaty Geo 1. Desde la tableta utiliza Play Store para instalar la aplicación Aumentaty Geo. Página 14 de 33

16 2. Abre la aplicación Aumentaty Geo. 3. En el cuadro de búsqueda introduce el título de la ruta creada. Por ejemplo: Lanzarote. Haz tap sobre el botón con el icono de lupa. 4. Se mostrará la ruta creada. Haz tap en ella para abrirla. 5. Se muestra la imagen principal de la ruta y debajo el listado de POIs. Página 15 de 33

17 6. Desde esta página es posible mostrar el Mapa o bien acceder a la información de cada POI que aparece en el listado inferior. 7. Pulsa en el botón Mapa para ver los POIs ubicados en el mapa. Si pulsas en un POI verás su información. 8. Desde el mapa pulsa en RA para enfocar con la cámara en esa dirección y ver los marcadores añadidos. 9. En la página que muestra la información del POI se podrá acceder a la imagen, descripción, imagen, enlaces relacionados, etc. Página 16 de 33

18 3. Junaio Junaio ( es una solución de realidad aumentada que permite añadir imágenes personalizadas como marcadores donde situar modelos 3D, imágenes, audios, vídeos, enlaces, etc. Para el diseño de la escena de RA se utiliza un programa instalado en el ordenador PC: Metaio Creator. El contenido elaborado se sube a un canal personalizado alojado en Internet y se proporciona un código QR de suscripción al canal. Desde la tableta con la app Junaio Browser se escanea el código QR para suscribirse a ese canal y luego se escanea la imagen marcador en la realidad para acceder a los contenidos digitales añadidos de RA. Paso 1. Instalación de Metaio Creator 1. Accede al portal de desarrolladores de Metaio: 2. Clic en Sign up para completar el formulario de registro y disponer de un usuario y contraseña. 3. Una vez que dispongamos de credenciales accede a la URL anterior, pulsa en el botón Login, introduce esta información y accede. 4. En el widget Metaio Creator de la página principal pulsa en Descargar para Windows. 5. Instala el programa en tu ordenador PC. 6. Ejecuta el programa haciendo doble clic sobre su icono situado en el Escritorio. Página 17 de 33

19 7. Haz clic en el botón + Trackables para añadir una imagen marcador personalizada. 8. Selecciona un sistema de rastreo: Image Tracking. Elige esta opción para añadir RA a revistas, imágenes, fotos, posters y cualquier superficie plana de texto incluyendo paquetes de productos. Extended Image Tracking. Con esta alternativa se rastreará en un entorno interior (por ejemplo en una habitación) donde el usuario escaneará una imagen pero su dispositivo apunta desde lejos mientras el contenido aumentado se muestra colocado en su sitio. Object Tracking. Permite utilizar como imagen de rastreo un modelo 3D Cad en formato OBJ o bien un 3D Map elaborados previamente con herramientas de Metaio. Enviroment Tracking. Para utilizar un nube de puntos que sirvan de marcador. Face Tracking. Con esta opción se podrá aumentar un rostro humano. ID Marker Tracking. Se empleará como marcador un marker específico de esta tecnología proporcionando más rapidez y precisión. 9. En este caso elegiremos una imagen por lo tanto haz clic en Image Tracking. Examina tu equipo y elige una imagen de cierto contraste. Página 18 de 33

20 10. A continuación vamos a añadir el overlay de recursos digitales. En el panel Resources (Recursos) se puede elegir el tipo de recurso: Model 3D. Modelo 3D en formato FBX, DAE o bien OBJ. Image. Imagen. Audio. Reproducción de sonido en formato MP3. In- Page video. Vídeo integrado dentro de la página. Admite distintos formatos: MP4, FLV, WMV, MOV, AVI, etc. Fullscreeen video. Vídeo en pantalla completa. Youtube Video. Reproduce un vídeo de Youtube. Button. Se trata de una imagen a la que se puede asociar un script de acción: reproducir/detener una reproducción, mostrar/ocultar un elemento, etc. Hyperlink. Añade un hipervínculo que se mostrará en el navegador por defecto del sistema Junaio Channel. Suscribe directamente un lector a un canal de Junaio. Share Compartir en las principales redes sociales: Facebook, Twitter, Google Plus Página 19 de 33

21 11. En este caso vamos a seleccionar un vídeo In- Page que incorporamos en formato MP Sitúa y redimensiona adecuadamente la ventana del reproductor de vídeo sobre el fondo. 13. Clic en el botón Save (Guardar) para guardar el proyecto. Éste se guardará con una extensión *.ARP. 14. Para ver el resultado final pulsa en el botón Preview (Vista previa). Página 20 de 33

22 15. Se abrirá el reproductor Arel Player. Enfoca la imagen marcador hacia la cámara del ordenador y observa que aparece y se reproduce el vídeo. Paso 2. Crear un canal de publicación en Metaio 1. En la columna lateral derecha introduce el usuario y contraseña de tu registro en Metaio. 2. En la sección Upload to Metaio Cloud (Subir a la nube Metaio) selecciona New channel y pulsa en el botón Create. 3. Completa los datos de registro del canal y pulsa en el botón Create. Página 21 de 33

23 4. Observa que tras crearse el canal se generará un código QR que permitirá suscribirse al mismo. 5. Pulsa sobre este código QR. Se mostrará en grande en una ventana independiente. Si pulsas en el botón Save podrás guardarlo en formato PNG para luego imprimirlo y utilizarlo en carteles y ubicaciones físicas. 6. Una vez autentificado y seleccionado el canal pulsa en el botón Upload para subir a la nube Metaio Cloud la escena creada. Al cabo de unos minutos se muestra un mensaje de que la subida se ha producido con éxito. Página 22 de 33

24 Paso 3. Lectura desde la app Junaio en la tableta. 1. Utiliza Play Store para instalar Junaio. 2. Si al introducir este término de búsqueda NO lo encuentras en Play Store entonces acccede a la siguiente URL para descargar el instalador APK de Junaio: 3. Una vez instalado haz tap sobre su icono para abrir el programa. 4. Al inicio se muestran algunos canales recomendados. Pulsa en el botón AR situado en la esquina superior derecha. 5. Enfoca el código QR que enlaza con el canal de Junaio y pulsa en el botón superior derecha Scan. Página 23 de 33

25 6. Tras reconocer el código en la parte izquierda de la barra superior de mostrará el icono del canal detectado. Pulsa sobre este icono y luego pulsa en el botón Agregar a los favoritos. 7. A continuación tap sobre el botón Atrás de Android y escanea la imagen marcador utilizada en el diseño. 8. Al enfocar la imagen marcador se mostrará la reproducción del vídeo. 4. Aurasma Aurasma ( es otra solución tecnológica de realidad aumentada cuyas características más destacadas son: Marcadores personalizados. Cualquier imagen u objeto del mundo real se puede convertir en un marcador de RA. Integración multimedia. Permite incorporar al overlay todo tipo de elementos: textos, imágenes, vídeos, animaciones, modelos 3D, etc. Geolocalización de auras. Contempla que el acceso a las escenas o auras de un canal sólo pueda realizarse desde una ubicación geográfica concreta. De esta forma sólo serían accesibles desde el centro, por ejemplo. Auras públicas. Es una opción de pago pero permite que un marcador sea universal, es decir, funcione sin necesidad de suscribirse a su correspondiente canal. Aurasma Studio y Aurasma App. Dispone de un editor en línea de escenas (Aurasma Studio) que se almacenan en su servidor organizándose en canales y una aplicación gratuita (Aurasma App) que se puede descargar de Play/Apple Store e instalar en una tableta para acceder a estas escenas. Página 24 de 33

26 4.1 Crear una cuenta en Aurasma Studio. 1. Accede a la web de Aurasma Studio: 2. Pulsa en el botón Sign Up (Registrarse). Completa los datos solicitados y pulsa en el botón Sign Up. 3. A continuación pulsa en el botón Login (Entrar) e introduce el usuario y la contraseña definidos. Clic en el botón Login para entrar. 4.2 Crear una nueva Aura 1. Clic en el botón + Create New Aura (Crear nueva aura). Paso 1. Subir una trigger imagen 2. Haz clic en el botón Click to Upload Trigger Image (Clic para subir una imagen de activación). Es la imagen marcador que activará la escena de RA. Otra opción es elegir una imagen ya subida Página 25 de 33

27 3. En el cuadro Upload Trigger Image (Subir imagen de activación) pulsa en el botón Browse (Navegar) para localizar el archivo de imagen en tu equipo. 4. Introduce el nombre de la imagen en Name y la descripción en Description. Pulsa en el botón Save (Guardar). Si introduces las coordenadas en el cuadro de texto Coordinates entonces esa imagen sólo funcionará en las proximidades de esas coordenadas. 5. Una vez subida la imagen de activación se ofrece una herramienta para optimizar la detección de la misma. Para ello se pueden situar áreas rectangulares, circulares o poligonales en las partes más características de la misma. 6. Clic en el botón Next (Siguiente) que aparece en la parte superior. Paso 2. Subir un elemento overlay 1. Pulsa en el botón Click to Upload Overlay. Otra opción es elegir un medio que ya hayamos subido con anterioridad pulsando en Click to Select Existing. Página 26 de 33

28 Nota: 2. Se pueden subir: imágenes, vídeos, modelos 3D o enlaces a páginas web. En este caso vamos a subir un vídeo MP4. Localiza en tu equipo ese vídeo y selecciónalo y pulsa en Abrir. El modelo 3D es necesario subirlo previamente tratado. Usando Sketchup se exporta a formato *.DAE; las texturas se guardan en formato *.PNG; se crea una miniatura del objeto en tamaño 256x256 pixeles con el nombre thumbnail.png, se guarda el audio en formato MP3 si lo hubiera. Todo ello se comprime sin subcarpetas usando 7- Zip en un archivo TAR y se sube a Aurasma. 3. Introduce el nombre del elemento y pulsa en el botón Save (Guardar). 4. Transcurridos unos minutos se completa la subida de ese elemento multimedia. 5. Arrastra y coloca el vídeo y ajusta sus dimensiones. Página 27 de 33

29 6. En el panel Overlay X se ofrece la posibilidad de eliminar, cambiar u ocultar momentáneamente esa capa. Como podrás comprobar se pueden añadir varios overlays o capas. 7. A un elemento overlay se le pueden añadir acciones. Para ello pulsa en el botón Add Actions (Añadir acciones). 8. En el panel Add Actions despliega el primer combo y elige un evento que determinará el momento en que se ejecutará la acción: When Overlay is tapped. Cuando el overlay es pulsado. When Overlay is double- tapped. Cuando el overlay es pulsado con dos toques sucesivos. After Overlay has faded in. Después de que el overlay ha aparecido. After Overlay has started. Después de que el overlay ha comenzado. When Overlay has finished. Cuando el overlay ha terminado. After a time delay (s). Después de una espera de X segundos. 9. En este caso elegimos el evento: After Overlay has finished. 10. Clic en el botón + Add action para agregar una acción: Load a URL. Cargar una URL. Start an Overlay. Comenzar un Overlay. Stop an Overlay. Detener un Overlay. Pause an Overlay. Pausar un Overlay. Make an Overlay full screen. Activar el modo pantalla completa para el Overlay. Full screen with camera active. Pantalla completa con la cámara activa. Take an Overlay off full screen. Abandonar la pantalla completa del Overlay. Perform a random Action. Ejecutar una acción aleatoria. Página 28 de 33

30 11. Elegimos la acción Load a URL e introducimos un enlace a un vídeo de Youtube más amplio. 12. En el cuadro de Overlay se mostrará la configuración definida incluyendo las acciones. 13. Para terminar pulsa en el botón Save (Guardar). Paso 3. Finalizar la escena. 1. Clic en el botón Next (Siguiente). 2. Introduce el nombre del Aura en Aura Name y etiquetas en Hashtags. 3. Si se pulsa en el botón Share la escena se publicará en el canal público del usuario y será accesible por otros usuarios a través del buscador de auras de Aurasma. En este caso NO vamos a pulsar en el botón Share. Página 29 de 33

31 4. Tras finalizar su edición se mostrará la pestaña My Auras donde aparecerá la escena creada. 5. Para editar esta aura haz clic sobre ella y pulsa el botón Edit. Si pulsas en el botón Delete se eliminará. Página 30 de 33

32 4.3 Publicar el canal de auras Cada cuenta de usuario en Aurasma tiene un canal público y un canal privado donde se publican las auras creadas y ambos son independientes. 1. Desde el panel de Aurasma Studio pulsa en el enlace My Account (Mi cuenta). 2. Clic en el enlace Share your private campaign (Compartir tu campaña privada). 3. Se mostrará un cuadro de diálogo con la URL de acceso a tu canal privado de auras. 4. Copia y pega esta URL en un generador de código QR. Por ejemplo: monkey.com/es/ 4.4 Acceder a tu aura desde la tableta. 1. Desde Play Store instala la app para Android de Aurasma. Página 31 de 33

33 2. A continuación abre la aplicación para la lectura de código QR, por ejemplo, BIDI para enfocar el código QR de suscripción a tu canal privado de Aurasma. 3. Tras la captura del código QR se mostrará una página donde se preguntará si tienes instalado Aurasma app en tu tableta: Do you have Aurasma installed?. Lógicamente es requisito previo tener instalada la app de Aurasma. 4. Pulsa en el enlace Great! Retrieve your shared content now (Bien. Accede a tu contenido compartido ahora). 5. Se mostrará un mensaje de que te suscribes al canal privado de esa cuenta. 6. Si pulsas en la A inferior y luego en el botón de Usuario observarás que en la pestaña Following se mostrará el canal privado al que te has suscrito. Página 32 de 33

34 7. Si hubieras publicado las auras en el canal público entonces la suscripción debería hacerse a través del buscador introduciendo el nombre del usuario como dato de búsqueda. 8. Para suscribirse a través del buscador se pulsa en ese canal público y luego en el botón Follow (Seguir). 9. Una vez suscrito al canal ya es posible escanear sus escenas y acceder al contenido de las mismas. Sin este paso previo no será posible hacerlo. Para ello pulsa en el botón Escanear y luego enfoca la imagen activadora correspondiente. Página 33 de 33