Manual de usuario. Layar creator (Miguel Gil)

Transcripción

1 Manual de usuario Layar creator (Miguel Gil)

2 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.

3 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. Las demás opciones no son necesarias ser modificadas, ya dependerá de las opciones personales que queramos darle a 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 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. Las demás opciones no son necesarias ser modificadas, ya dependerá de las opciones personales que queramos darle a este contenido.

5 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 : 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-a1b1-348d9f4c2307" }, "actions": [], "object": { "url": "", "contenttype": "", "size": 1 }, "transform": { "scale": 1, "translate": { "x": 0, "y": 0, "z": 0 } } }

23 23 Esta primera parte debemos dejarla tal cual: { "id": "103481", "anchor": { "referenceimage": "f772fb35-31ee-4422-a1b1-348d9f4c2307" }, 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 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: is-response/animations/ "Type" - Define el tipo de animación que se producirá.

25 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 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": " urashima_-_apple.mp3", "autotrigger": true, "autotriggeronly": true, "contenttype": "audio/mp3" }],

26 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 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 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 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 30

31 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 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