Tutorial Layar Creator

por Raúl Reinoso (@tecnotic)

1 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

¿Qué es Layar Creator? Layar Creator es una herramienta online que permite añadir imágenes a la base de datos de

Layar y asociarlas contenido virtual en diversos formatos que emplea tecnología de

reconocimiento de imágenes para identificar y superponer información virtual sobre el

contenido físico.

Dispone además de una App asociada que puedes descargar del AppStore y Google Play que

permite la visualización del contenido virtual cuando las imágenes son detectadas a través de

la cámara del dispositivo móvil.

Accede a Layar Creator en https://www.layar.com/creator/ y crea tu cuenta.

Introduce tu nombre de usuario y contraseña.

Una vez logueados apareceremos en esta pantalla que muestra nuestras campañas.

2 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Las campañas que has trabajado previamente aparecen clasificadas por categorías:

Draft: Campañas sin publicar

Shared with me: Campañas compartidas conmigo

Published: Campañas que he publicado de forma gratuita o pagando.

Archived: Campañas que han expirado.

Your Credits: Campañas restantes que puedes publicar (de pago)

New Campaign: Pulsa aquí para añadir una nueva campaña, introduce su nombre, selecciona

el tipo de campaña que vas a publicar y pulsa en “Create Campaign”.

3 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Tras crear la nueva campaña nos aparece la siguiente pantalla.

Pulsando en el botón de configuración “Campaing Settings” podrás indicar más datos

sobre tu campaña entre ellos, podrás incluir una imagen que aparecerá como icono cuando los

usuarios visualicen tu imagen con la app móvil.

4 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Pulsa en el menú “Edit” para empezar a subir contenido a tu campaña.

JPG, PNG: Nos permite subir imágenes en este formato

PDF: Nos permite subir documentos pdf

ZIP: Nos permite subir documentos comprimidos contenedores de imágenes y pdfs.

Por ejemplo, vamos a pulsamos en imagen JPG PNG para añadir una imagen a nuestra

campaña.

Seleccionada la imagen, podemos añadirla a nuestra campaña pulsando en ADD PAGE.

5 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

No son adecuadas imágenes pequeñas (480x480 píxeles min.), con transparencias, superficies

brillantes, modelos repetitivos, ni textos.

Nuestra campaña puede estar compuesta de varias imágenes, si ese fuese nuestro objetivo

podríamos seguir añadiendo imágenes a nuestro trabajo. Pulsando el botón “Add Pages” (el

que tiene el signo más), podremos añadiendo más imágenes.

Pulsando en “Add Page”, nuestra imagen será subida al servidor de Layar.

Subida la imagen, nos aparecerá este mensaje que nos indica que está siendo analizada para

comprobar que es adecuada para Layar.

Pulsando el botón “Start Editing” podremos añadir contenido a nuestra imagen.

6 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Vamos a analizar los diferentes tipos de contenidos que podemos asociar a la imagen que

acabamos de subir.

7 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Vemos que podemos añadir diferentes tipos de botones de contenido (BUTTONS) que nos

aparecen clasificados por categorías:

BASIC:

El botón “website” permite añadir un botón vinculado a una url, por ejemplo a una página

web.

El botón “Call now” permite añadir un botón vinculado a un número de teléfono.

El botón “Buy” es adecuado para vincularlo a una tienda online.

El botón “Email us” permite añadir un botón vinculado a una dirección de correo electrónico.

El botón “Download App” es idóneo para vincularlo a la descarga de una aplicación.

El botón “Add to contacts” adecuado por ejemplo para una tarjeta de visita.

Y para finalizar “Show an image” que permite visualizar una imagen o un gif animado.”.

8 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Vamos a arrastrar nuestro primer botón sobre la imagen para ver las diferentes opciones que

nos permiten personalizarlo.

Por ejemplo arrastramos un botón para vincular la imagen a una página web (botón website).

Este botón aparecerá sobre la imagen cuando tras escanearla, sea reconocida por el

dispositivo móvil.

Vemos que podemos indicar la URL de destino, emplear el diseño estándar del botón o un

botón personalizado (custom image), además podemos cambiar el texto que aparece sobre el

mismo y el color e indicar si queremos un botón animado o no.

9 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Personalizamos nuestro botón y vamos a probar su funcionamiento, para ello guardamos los

cambios que hemos realizado pulsando en el botón “Save”.

Para ir probando el contenido que estamos añadiendo en la imagen disponemos de una

función para realizar un test a nuestro trabajo. Pulsa la función “Test” del menú. Verás que

aparece la imagen preparada para que hagas una prueba en la pantalla de tu ordenador.

Para realizar la prueba tienes que haber instalado previamente Layar app en tu dispositivo

móvil (ya sabes, la puedes descargar del AppStore y Google Play). Escanea la imagen (un toque

en la pantalla encuadrando la imagen) y verás cómo aparece el botón que acabamos de crear.

(DEBERÁS ESTAR LOGUEADO EN LA APP DEL DISPOSITIVO MÓVIL PARA VISUALIZAR EL

CONTENIDO, AÚN NO ES PÚBLICO).

10 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Ahora vamos a probar la opción de emplear una imagen personalizada en lugar del botón

estándar que nos proporciona la herramienta de autor.

Pulsa en “Edit” y a continuación haz clic en el botón que acabamos de crear, al hacerlo, se

abrirá la ventana de configuración del mismo. Selecciona la opción “Custom Image”:

11 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Vemos que al pulsar en “Custom image” existe la posibilidad de emplear una imagen o un gif

animado para sustituir el botón estándar.

En esta opción es muy interesante el emplear imágenes png con el fondo transparente. En

nuestro caso se ha empleado una imagen cuadrada con las esquinas redondeadas que hará las

veces de botón cuando la imagen sea reconocida a través de la cámara del dispositivo móvil.

Ya tenemos nuestro botón personalizado y el tema de los botones dominado, vamos a probar

otras opciones.

12 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

En el apartado “MEDIA” podemos incluir los siguientes tipos de contenido.

Vídeo: Permite añadir un vídeo en formato mp4 o un vídeo de Youtube. Para visualizar el vídeo

en Realidad Aumentada deberá estar en formato mp4 y alojado en Internet. Una opción de

alojamiento interesante es emplear una carpeta de Google Drive como servidor web.

Carrusel de imágenes: Permite añadir una secuencia de imágenes que se pueden visualizar,

cuando la imagen de referencia es reconocida pasándolas con el dedo. Existe la opción

“Linkable” que permite vincular cada imagen del carrusel a una url. El número de imágenes

aceptado en cada carrusel es de 12 imágenes en formato jpg o png. Es aconsejable que las

imágenes que compongan el carrusel tengan las mismas dimensiones.

Listen: El botón “Listen” permite añadir audio en formato mp3, el archivo de audio deberá

estar alojado en Internet. De nuevo la opción de emplear una carpeta de Google Drive como

servidor web te puede servir de ayuda.

Permite añadir una pista de audio desde SoundCloud.

Vamos a probar una de estas opciones, por ejemplo vamos a añadir contenido de audio en

formato mp3 y que este se reproduzca automáticamente cuando la imagen es escaneada con

la app Layar desde el dispositivo móvil.

Para ello podemos grabar y editar un archivo de audio empleando Audacity y alojarlo en una

carpeta de Google Drive que emplearemos como servidor web.

13 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Accede a tu cuenta de Google Drive y pulsa en “Crear” para crear una carpeta nueva.

Pon como nombre a la carpeta creada “host”.

Ahora vamos a acceder a las características de esa carpeta para que sea una carpeta pública en

la web.

Haz clic con el botón derecho del ratón sobre la carpeta recién creada y selecciona

Compartir/compartir

14 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Te aparecerá esta ventana, en ella selecciona la opción “Cambiar”.

Y a continuación selecciona público en la web.

Ya tenemos una carpeta que podemos utilizar como servidor web.

Vamos a introducir un archivo de audio en esa carpeta. Para ello accede a tu carpeta “host” y

arrastra un archivo de audio en formato mp3 dentro de ella.

15 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Ahora vamos a averiguar la url del archivo que acabamos de alojar.

Accede al menú desplegable de tu carpeta y selecciona la opción “Detalles y actividad”.

16 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

En la ventana que aparece en la derecha selecciona “Actividad”.

La url que aparece en alojamiento es la url pública de tu carpeta “host”. Si la pegas en el

navegador verás que así es y que dentro está el archivo mp3 que acabamos de subir.

Si ahora pulsas en el archivo mp3, éste se abrirá y verás en la barra de direcciones del

navegador la url del archivo mp3. Esta será la url que le indicaremos a Layar para que localice

tu archivo de audio en la web.

17 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

¿Y por qué no? Vamos a añadirle a este botón una imagen personalizada como ya se ha hecho

anteriormente.

18 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Guardamos los cambios y probamos pulsando en “Test” y empleando para ello nuestro

smartphone.

El bloque de contenidos SOCIAL, nos permite vincular la imagen a redes sociales.

Twitter feed: Este botón permite mostrar los tweets de una cuenta de twitter o un hashtag

determinado.

Like us: Este botón posibilita hacer un “me gusta” en una cuenta determinada de Fecebook.

Facebook Share: Este botón permite compartir una url y un comentario en Facebook.

Twitter Follows us: Este botón permite seguir a una cuenta de Twitter determinada.

Tweet: Permite publicar un tweet preestablecido empleando la cuenta de Twitter del usuario.

Email: Permite enviar un correo electrónico a una cuenta de email preestablecida.

Share Page: Permite compartir la página en Twitter, Facebook o por correo electrónico.

Pin it: Permite compartir la página en Pinterest

19 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

Ya hemos probado las opciones básicas de Layar, como verás, existe también una serie de

opciones AVANZADAS (para cuentas PREMIUM) que se describen a continuación:

<HTML>: Permite insertar página web superpuesta a la imagen de referencia. Para ello hay

que introducir únicamente la url y establecer las dimensiones de la ventana de visualización.

HOTSPOT: Permite insertar modelos 3D. Los modelos deben estar en el formato Layar3D (.l3d),

para ello hay que utilizar Layar3D Model Converter para convertir modelos .obj/.mtl en .l3d

Geo-Layer: Permite abrir una capa de Realidad Aumentada geolocalizada que hayamos creado

con Layar, para ello debemos indicar el nombre de la capa.

Launch App: Permite conectar Layar con otras aplicaciones que estén instaladas en el

dispositivo móvil del usuario.

Publica tu campaña La campaña todavía no ha sido publicada, cuando escaneamos la imagen con nuestro

dispositivo móvil empleando la app Layar visualizamos el contenido porque estamos logueados

con nuestro usuario de Layar en nuestro dispositivo móvil. Si pruebas a cerrar la sesión y

escaneas de nuevo la imagen, verás que la imagen no es reconocida.

Para que el contenido sea visible deberás publicar tu campaña. Una campaña puede estar

compuesta de varias páginas cada una con diferente contenido virtual asociado. Finalizada y

probada nuestra campaña, es el momento de publicarla para que otros usuarios puedan

disfrutar de nuestra creación.

Para ello debemos pulsar el botón “Publish”. Tras pulsarlo veremos que existe la posibilidad de

publicar la página pagando y también una opción gratuita que incluye un banner de Layar en la

parte inferior de la imagen.

20 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)

En este año 2014 las condiciones de publicación de Layar han variado en dos ocasiones,

actualmente las páginas gratuitas están activas durante 2 mes, periodo tras el cual la campaña

será archivada.

Vamos a elegir la opción gratuita y pulsamos en “Publish your page with ads”

Tras la publicación el contenido asociado podrá ser visualizado por otros usuarios cuando

escaneen la imagen de referencia empleando Layar y estará activo durante 60 días.

Para señalar los posibles lectores que esa imagen tiene contenido en Realidad Aumentada

podemos usar los logos que sugiere Layar que indican que nuestra publicación es interactiva.

Layar sponsored pages En noviembre de 2012 Layar anuncia en su blog la posibilidad de solicitar páginas libres de

publicidad para su empleo en proyectos educativos.

Si estás interesado en obtener una serie de páginas libres de publicidad para tu proyecto

deberás acceder a la siguiente url https://www.layar.com/about/sponsored-pages/ y exponer

tu proyecto.

21 Curso Introducción a la Realidad Aumentada por Raúl Reinoso (@tecnotic)