Manual de usuario de Layar Creator

Manual de
usuario

Layar
creator
(Miguel Gil)

2

• Botones:

Estándar:
Básicos:
1.- WebSite:

Debemos rellenar el campo de “URL” donde colocaremos
(pegaremos) la dirección web de la página que queramos sea
mostrada cuando pinchemos en el link.
Las demás opciones no son necesarias ser modificadas, ya
dependerá de las opciones personales que queramos darle a
este contenido.

RA – Layar Creator - Miguel Gil

3

2.- Número de teléfono:

Debemos rellenar el campo de “número de teléfono” donde
colocaremos (pegaremos) el número de teléfono que queramos
sea mostrado cuando pinchemos en el link. En el momento en
el que elijamos esta opción, si nuestro aparato tiene soporte de
llamadas, automáticamente enlazará y marcará el número.
este contenido.
También, si modificamos el texto a mostrar (Button label),
podremos mostrar un número de FAX (debemos tener una
aplicación instalada para que sea lanzada y enviar un texto.


4

3.- Comprar:

Esta opción NO es muy utilizable para la docencia, ya que nos
derivará a una página de venta online para poder realizar
una compra.
Debemos rellenar el campo de “Product URL” donde
colocaremos (pegaremos) el enlace de la página web que
queramos sea mostrada cuando pinchemos en el link.
este contenido.


5

4.- Enviar mail:

Con esta opción podremos añadir un enlace que enviará un
mail a una cuenta de contacto prefijada por nosotros
(nuestra propia cuenta), además nos permitirá configurar el
título del mensaje que será enviado, de esta manera
podremos identificar fácilmente de dónde viene el mensaje y
qué objetivo tiene.


6

5.- Descargar app:

Si lo que queremos es crear un acceso para que descarguemos
una aplicación para Smartphone o tablet, debemos
seleccionar la opción de “Download App”.
En la primera opción deberemos elegir el sistema operativo al
que va dirigido. Una vez que lo hayamos hecho, nos solicitará
que introduzcamos la URL de descarga de dicha aplicación.
Las demás opciones podemos modificarlas según nuestras
opciones de trabajo.


7

Recursos audiovisuales:

1.- Vídeo.

Con este recurso podremos introducir un vídeo en nuestra
actividad de realidad aumentada.
Para ello debemos introducir la URL donde tengamos alojado
nuestro vídeo. Como datos de configuración debemos saber
que, para que el visionado sea óptimo, debemos configurar el
formato del vídeo a “H264-encoded MP4”. (En otro manual
veremos cómo editar nuestros vídeos para que cumplan las
características que acabamos de mencionar)
Esta opción nos deriva a una nueva pantalla dentro de la
aplicación, por lo que no podrá ser visionado directamente
en la pantalla principal.
Más adelante veremos cómo solventar esta cuestión.


8

2.- Carrusel de imágenes.

Si lo que queremos es hacer una transición de imágenes,
utilizaremos esta opción. Con ella podremos subir hasta 10
imágenes que tengamos alojadas en nuestro ordenador.
Si deslizamos las imágenes hacia la izquierda, en la
pantalla en la que nos encontramos, irán pasando de una
en una.
Si por el contrario, presionamos en una imagen, nos llevará a
una pantalla nueva, donde podremos verlas también una a
una.


9

3.- Carrusel de imágenes.

Por el contrario, si lo que queremos es que nos aparezca un
carrusel de imágenes y que cada una de ellas contenga un
hipervínculo a alguna página web o a algún recurso,
elegiremos esta opción.
El procedimiento es exactamente igual al anterior.
También dispondremos de un máximo de 10 imágenes.


10

4.- Audio.

Con este contenido tenemos la opción de insertar un audio
dentro de nuestro trabajo.
Para conseguirlo debemos insertar la URL donde se encuentre
alojado el audio. Es importante que el enlace termine en
*.mp3, ya que de lo contrario, no se reproducirá.
También disponemos de una opción de auto-reproducción.
Las demás opciones pueden ser configuradas a gusto de cada
uno.


11

5.- Soundcloud.

Otra forma de insertar un audio es mediante la página web
“SoundCloud”. En este caso, subiremos el archivo *.mp3 a la
página o utilizaremos uno que ya se encuentre allí alojado.
La diferencia que hay entre los dos últimos contenidos es que
en el primero nos aparecerá el cuadro de diálogo estándar.
En la segunda opción, el cuadro de diálogo es sustituido por
una pequeña ventana donde se ve una fotografía del audio.

Comentar que esta opción es más sencilla de utilizar que la
anterior ya que es posible que no dispongamos de un espacio
web donde alojar los contenidos. Si, por el contrario,
disponemos de este espacio web, no siempre nos guarda la
información con la extensión final visible (aspecto necesario
para que el programa detecte que es un audio).


12

Recursos social-media:

1.- Feed de twitter.

Con este contenido podemos insertar un feed (RSS), ya sea de
un usuario en concreto o de un hashtag.
Solo debemos seleccionar el tipo e introducir el nombre de
usuario o hashtag.
Nos derivará a una nueva ventana.


13

2.- Dame un “me gusta” de Facebook.

Si lo que hacemos es utilizar la página de Facebook, este
módulo nos permitirá que los usuarios de estos contenidos
puedan votar (Like) algún aspecto que hayamos introducido
en nuestro trabajo.
Debemos introducir la URL de nuestra página de Facebook.
Las demás opciones son modificables a nuestro gusto.


14

3.- Compartir en Facebook.

Como complemento del módulo anterior, ahora podremos
compartir alguna página, o recurso, que se encuentre en la
red, a través de Facebook.
Simplemente debemos rellenar la URL que queramos
compartir y escribir una breve descripción del recurso o
página en cuestión.


15

4.- Seguirte en twitter.

Dentro de los social-media, podemos añadir un enlace para
que nos sigan en twitter.
Solo debemos añadir nuestra cuenta y así podrán acceder a
ella y pinchar en el botón “seguir”.


16

5.- Twittear.

Este módulo nos permite escribir y enviar un tuit.
Rellenaremos el campo de texto con el contenido del tuit.

Es recomendable que añadamos nuestro nombre de usuario,
algún hashtag o link, ya que este se quedará prefijado en el
texto que pretendamos enviar.


17

6.- Compartir por mail.

Para compartir este recurso que estamos creando con un mail
utilizaremos esta función.
Debemos rellenar dos apartados: “default subject”, donde
pondremos el título que llevará nuestro mail; y “default
Body”, donde escribiremos el mensaje a enviar.
Las demás opciones son a gusto de cada uno.


18

7.- Compartir.

Este botón permite a los usuarios compartir la página de
impresión original en Facebook, Twitter o por correo
electrónico.
Escribiremos en “caption” el nombre que queramos que
aparezca como título. (Por defecto aparece el nombre que le
hemos dado a nuestro proyecto).


19

8.- Pinterest.

Este botón nos permite enlazar con contenidos alojados en la
página web “pinterest”, que es un almacén de contenidos en
diferentes formatos, ya sea vídeo, imágenes, texto, etc.
Debemos insertar la URL del contenido que queramos
compartir.
El resto de opciones, a elección de cada uno.


20

Avanzado:

1.- HTML widget

Esta es la opción más potente con la que cuenta esta
aplicación ya que nos permite insertar cualquier página web
dentro de nuestro trabajo, quedando insertada en la página
principal del proyecto.
Para ello debemos copiar la URL de la página o contenido
que queramos mostrar y, a continuación, seleccionar las
dimensiones para mostrar el resultado.

Anteriormente nos surgía el problema, cuando trabajábamos
con el vídeo, de la imposibilidad de reproducir este tipo de
archivo directamente en la pantalla que nos muestra la
imagen de la fotografía. Pues bien, con este método podremos
corregir este problema y visionar el vídeo en la misma
pantalla.


21

2.- Hotspot JSON

Con este módulo podremos insertar imágenes en 3D, tanto de
forma individual como con un audio y una transición
conjuntamente.
Veamos cómo:
Antes de entrar en JSON y JSON Hotspot Widget tendremos que
tener un modelo en 3D, el convertidor de modelo 3D y, si
deseamos modificarla o crear uno, un programa de
modelado 3D.
Existen multitud de páginas que permiten la descarga
gratuita de imágenes en 3D.


22

http://www.taringa.net/posts/info/2441930/61-Excelentespaginas-web-de-modelos-3D-gratis-3DMax-Maya.html
http://www.hongkiat.com/blog/60-excellent-free-3d-modelwebsites/

Los objetos deben estar en el formato *.obj para que puedan
ser reconocidos por el editor de 3D de Layar.
Ahora debemos convertir esta imagen 3D a formato L3D. Para
ello, nos dirigimos al siguiente enlace y pinchamos en
“Download-here”:
https://www.layar.com/documentation/browser/3d-modelconverter/
Una vez que tengamos guardado el nuevo archivo con
extensión *.l3d es el momento de configurar nuestro
contenido.

Imagen en 3D:
Aparecen diferentes opciones de configuración. Hay algunos
que deberemos modificar y otros no.
Los datos son:
{
"id": "103481",
"anchor": {
"referenceImage": "f772fb35-31ee-4422-a1b1348d9f4c2307"
},
"actions": [],
"object": {
"url": "",
"contentType": "",
"size": 1
},
"transform": {
"scale": 1,
"translate": {
"x": 0,
"y": 0,
"z": 0
}
}
}


23

Esta primera parte debemos dejarla tal cual:
{
"id": "103481",
"anchor": {
"referenceImage": "f772fb35-31ee-4422-a1b1348d9f4c2307"
},

El resto de contenido SÍ que debemos configurarla de la
siguiente forma:
"acciones" - por las acciones que se desencadenan
cuando se hace clic en un objeto.
"Objeto" - esto define su modelo 3D.
"Url" - Esta es la URL de donde se almacena el modelo
3D.
"ContentType" - Este es el tipo de objeto que está
agregando. En el caso de un modelo 3D, esto sería
"contentType": "model/vnd.layar.l3d".
"Tamaño" - Deja esto a 1 y, si es necesario, cambia la
escala en la parte del código.
"Transformar" - Controla cómo un objeto se debe
colocar en relación con la página cargada en Creator.
"Escala" - Esto le permite controlar la escala del modelo
3D. Este es un factor de multiplicación que se aplica con
el tamaño real del objeto 3D.
"Traducir" - Esta es la posición de su modelo 3D a lo
largo de las x, y, y los ejes z de la página que se ha
escaneado.
Las unidades están en metros. La altura de la página es
de 1 metro. El sistema de coordenadas de la página
obedece a la regla de pulgar de la mano derecha , del
siguiente modo:


24

Si el valor de todos los X, Y, Z es 0, esto significa que el centro
del objeto 3D se colocará en el punto central del medio en la
página.
Aunque podemos arrastrar y soltar el JSON Hotspot a
cualquier punto de la página, el posicionamiento
real del botón se define en el diccionario
"transformar" en el código JSON de este botón.
También se da la opción añadida de añadir acciones, como
rotación automática y, música.

Agregar una animación (objeto 3D rotando):
Para realizar esta operación debemos añadir al final del
comando anterior los siguientes datos:
"animations": {
"onClick": [{
"type": "rotate",
"from": 0,
"to": 360,
"delay": 0,
"axis": {
"x": 0,
"y": 0,
"z": 1
},
"length": 20000,
"persist": true,
"repeat": true
}]
Vamos a echar un vistazo a los parámetros que se utilizan
aquí:
"Animaciones" - Define la animación a agregar al
objeto 3D.
"OnClick" - Esto indica que la acción se producirá una
vez que se hace clic en el objeto. Esto se puede cambiar a
"onCreate", "onFocus", "onDelete", o "onUpdate". (Para
obtener más información visite:
https://www.layar.com/documentation/browser/api/getpo
is-response/animations/
"Type" - Define el tipo de animación que se producirá.


25

"De" - Esto define el punto de inicio de la animación. Si
es 0, la animación se producirá a partir de la posición
inicial del objeto en 3D.
"A" - Define el punto final de la animación. En nuestro
caso, es 360, que significa que rotará de 0 a 360 grados.
"Demora" - Define cuánto tiempo debe pasar antes de
que se produzca la animación. En nuestro caso, vamos a
iniciar de inmediato la animación cuando se hace clic
en el modelo de la Tierra.
"Eje" - Define los ejes implicados en la animación (x, y o
z). En nuestro caso, el eje z es 1 que significa que el
modelo de la Tierra comenzará a girar alrededor del
eje z.

Tenga en cuenta que es el único posicionamiento que queda
afectado por el cambio de los valores (de traducir y
transformar). Rotar y las transformaciones de escala se
aplican a todo el objeto.
"Longitud" - Define el tiempo que la animación
durará. Hemos establecido a 20.000 a fin de que el
modelo va a tomar 20 segundos para girar de 0 a 360
grados.
"Persisten" - Esto define el punto final de la animación.
Si se establece en “false”, el objeto volverá a su posición
inicial. Si se establece en “true”, el objeto permanecerá
en el punto final de la animación.
"Repetir" - Define si la animación se repetirá o no. En
nuestro caso, nos ponemos a “true” para que el modelo
seguirá girando.

Agregar un audio:

Debemos agregar un nuevo comando:

"actions": [{
"uri":
"http://public.layar.com/Customer_Care/3d_demos/Toshinori_M
urashima_-_apple.mp3",
"autoTrigger": true,
"autoTriggerOnly": true,
"contentType": "audio/mp3"
}],


26

"uri" - la URL donde la canción se almacena en un
servidor.
"AutoTrigger" – “True” si la acción debe actuar de
inmediato; “False”, en caso contrario.
"AutoTriggerOnly" – “True” si la acción debe actuar de
inmediato y si la acción no puede ser activada de otra
manera que AutoTrigger (por ejemplo, al hacer clic).
"ContentType": "audio/mp3" - Esto determina el tipo de
contenido, en este caso se trata de un archivo de audio
en formato mp3.

Para comprobar los resultados finales de este tipo de
contenido, podéis descargar de este enlace un ejemplo creado
e insertarlo en vuestro trabajo:
Enlace


27

3.- Lanzador de la capa geo-localizada.

También podemos añadir alguna capa que hayamos creado
con Geo-Layar Developer.
Tenemos que escribir el nombre de la capa que tengamos
creada.
Las demás opciones son a gusto de cada uno.


28

4.- Lanzador de app.

La última opción de la que disponemos es la de integrar
nuestro trabajo para que funcione con otras aplicaciones que
tengamos instaladas en nuestro dispositivo.
La primera elección que debemos tener en cuenta es si
queremos generar un enlace entre aplicaciones de manera
“generalista” o dirigido a algún dispositivo en concreto, ya
sea IOS o Android.


29

En el primer caso nos aparece un nuevo desplegable en el que
debemos definir qué tipo de codificación tiene.
Es un proceso complejo en el que, entre otras cosas, deberíamos
ponernos en contacto con el creador-desarrollador de la
aplicación para saber los términos en los que quedarían
enlazados.

En el segundo caso debemos elegir el sistema operativo. A
continuación procederemos a realizar el proceso anterior,
pero dirigido a IOS o Android.

Algunos de los URIs testados y que se sabe que funcionan
cuando los integramos:


30


31

• Botones:

Custom:

En este punto del tutorial nos habremos dado cuenta que
todos los botones que estamos usando vienen prediseñados,
cambiando simplemente el color o el texto que aparecen.
Pues bien, también tenemos la posibilidad de modificar y
crear nuestros propios botones.
Cuando entremos en esta opción, deberemos escribir el título,
subir una imagen que será nuestro nuevo botón y elegir la
acción que realizará.
Después podremos utilizarlo en cualquier contenido que
creemos.


32

Este material ha sido creado sin ánimo de lucro y está bajo
licencia Creative Commons:

Manual de usuario - Layar Creator by Miguel Gil is licensed under a
Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0
Internacional License.
Creado a partir de la obra en www.layar.com.


Manual de usuario de Layar Creator

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (7)

Similaire à Manual de usuario de Layar Creator

Similaire à Manual de usuario de Layar Creator (20)

Plus de MiguelGil

Plus de MiguelGil (11)

Dernier

Dernier (20)

Manual de usuario de Layar Creator