Saltar la navegación

5.1 Virtual Tour (360)

Para comenzar,  te vamos a mostrar un ejemplo del contenido interactivo  a crear. Como hemos hablado anteriormente, tanto en la web, si no has utilizado el traductor de tu navegador, como en el aula virtual la encontrarás como "Virtual Tour 360" .

Con esta actividad podemos enriquecer nuestras imágenes 360 (equirrectangulares) con contenido H5P. Se puede utilizar para crear recorridos virtuales a través de salas donde cada parte de la sala se explica en detalle utilizando texto o imágenes y puede contener preguntas para el que explora.

Esta herramienta no se limita a imágenes 360, también podemos usarla para navegar a través de escenas de imágenes estáticas

En este tutorial aprenderemos:

Cuándo usar Visita virtual (360)
Cómo crear un Visita virtual (360)

Aquí está el contenido de la visita virtual (360) que crearemos en este tutorial (arrastramos con el ratón o usamos flechas de navegación para explorar la escena):

Creación de un Virtual Tour

Paso 1: seleccionar Virtual Tour.

Vamos a hacer una visita virtual donde guiaremos al espectador por el Teatro Romano de Petra. Seleccionamos la opción "Nuevo contenido" y elegimos Visita virtual (360) de la lista de tipos de contenido:

Jose Luis Martos Quindós. Captura selección Virtual Tour (CC BY-SA)

Aparecerá el editor y añadiremos un título: "Visita Virtual Teatro Romano".
El editor debería verse así:

Jose Luis Martos Quindós. Captura editor título (CC BY-SA)



Paso 2: añadir una primera escena 360.

Vamos a añadir nuestra primera escena 360º ahora. Primero, necesitamos descargar una imagen de fondo. Esta es la imagen que usaremos en nuestro ejemplo:

Sitoo. 360 panorama from top of the Roman Theater in Petra, Jordan (Attribution-NonComercial-NoDerivs License Version: 2.0 Generic)

Obtener esta imagen a través del siguiente enlace

Al abrirse el enlace, haremos clic en "descargar" en la esquina inferior derecha y elegiremos "Grande".

Para agregar una escena, haremos clic en el botón "Nueva escena".   

Escribimos el título "Escena 01 Teatro Romano en Petra" y cargamos la imagen de fondo. La ventana emergente de la escena debería verse así:

Jose Luis Martos Quindós. Captura carga de imagen de fondo (CC BY-SA)

Al hacer clic en "Listo" añadiremos nuestra primera escena.
El editor ahora debería verse como en la siguiente imagen:

Jose Luis Martos Quindós. Captura editor Virtual Tour (CC BY-SA)

El ángulo inicial de la cámara está configurado de forma predeterminada. Si queremos cambiar el ángulo de la cámara, podemos mover la escena arrastrándola con el ratón. Una vez configurada la vista en el ángulo inicial que se desee, presionaremos el botón "Establecer posición inicial" en la esquina inferior derecha. Ahora la escena siempre comenzará con este ángulo de cámara.

Paso 3: añadir una segunda escena 360.

Al igual que con nuestra primera escena, haremos clic en el botón "Nueva escena".

Esta es la imagen que usaremos para nuestra segunda escena:

Sitoo. panorama_tomb_soldier (Atribución-NoComercial-SinObraDerivada Versión de la licencia: 2.0 Genérica)

Obtener esta imagen a través del siguiente enlace

Al abrirse el enlace, haremos clic en "descargar" en la esquina inferior derecha y elegiremos "Grande".

Al hacer clic en "Listo" se añadirá nuestra segunda escena.

Paso 4: agregar una escena estática.

Al igual que al crear escenas 360, haremos clic en el botón "Nueva escena".

Seleccionamos "Escena estática" en lugar de "Escena 360".
Incluiremos el título: "Petra, Jordania" y cargaremos esta imagen de fondo:

Jose Luis Martos Quindós. Atribución-NoComercial-SinObraDerivada Versión de la licencia: 2.0 Genérica (Atribución-NoComercial-SinObraDerivada Versión de la licencia: 2.0 Genérica)

Obtener esta imagen a través del siguiente enlace

Al abrirse el enlace, haremos clic en "descargar" en la esquina inferior derecha y elegiremos "Grande".

Al hacer clic en "Listo" se añadirá nuestra tercera escena.

Paso 5: navegar entre escenas.

Ahora tenemos tres escenas. Para navegar entre escenas, hacemos clic en el menú desplegable en la esquina inferior izquierda donde podemos leer "Escena actual...". Se abrirá el selector de escenas y se verán todas las escenas que hemos creado hasta ahora.

Jose Luis Martos Quindós. Captura configurar navegación entre escenas (CC BY-SA)

Explicaremos cada parte de un selector de escena:

  • Iconos encima de la imagen: este icono indica si la escena es 
  • Contorno verde y fondo verde: así es como marcamos la escena seleccionada actualmente (en la que estamos trabajando ahora).
  • Botón "Establecer como escena de inicio": hacer clic aquí para establecer esta escena como la escena de inicio de su contenido. La escena inicial es la primera escena que ve el usuario final.
  • Botón "Ir a escena":  hacer clic aquí para abrir la escena.
  • Botón "Editar": hacer clic aquí para editar la escena (Fondo, Título, Descripción, etc.)
  • Botón "Eliminar":hacer clic aquí para eliminar la escena.

Paso 6: conectar escenas.

Como autor, se puede navegar entre escenas mediante el selector de escenas. Para que los alumnos se muevan de una escena a otra, debemos agregar algunos elementos de navegación. Los elementos de navegación se crean utilizando la herramienta "Ir a escena", ubicada en el menú superior.

A continuación crearemos algunos elementos de navegación. Hacemos clic en el selector de escena y vamos a nuestra 1ª escena. Queremos crear una navegación desde esta escena hasta la escena #2. Hacemos clic en el icono "Ir a escena"   en el menú superior. Aparecerá el siguiente cuadro de diálogo:

Jose Luis Martos Quindós. Captura configurar conexión de escenas (CC BY-SA)


Elegimos "Scene 02 Tomb Soldier" y hacemos clic en "Listo". El nuevo elemento de navegación aparecerá en la escena:

Jose Luis Martos Quindós. Captura 2 editor Virtual Tour (CC BY-SA)

El usuario usará este botón para pasar de la escena #1 a la escena #2. Puede cambiar la posición de este elemento arrastrándolo por la escena. Cuando haga clic en él, obtendrá un menú contextual (como se muestra en la siguiente imagen).

Jose Luis Martos Quindós. Captura menú contextual (CC BY-SA)
  • La 1ª opción "Ir a escena" navegará (abrirá) la escena a la que conduce el objeto "Ir a".
  • La 2ª opción editará el objeto "Ir a".
  • La 3ª opción eliminará el objeto "Ir a".

Ahora queremos crear una navegación de la escena #2 a la escena #1. Hacemos clic en el selector de escena y vamos a la 2ª escena.
Hacemos clic en el icono "Ir a escena" en el menú superior, seleccionamos "Escena 01 Teatro Romano en Petra"   y hacemos clic en "Listo".
Ahora tenemos navegación tanto de la escena #1 a la escena #2 y viceversa.

Consejo: Al crear un objeto "Ir a", hacemos doble clic en él y se abrirá la escena a la que apunta. ¡Esto puede ahorrarnos mucho tiempo!

El último elemento de navegación que queremos agregar es de la escena #1 a la escena #3 (escena estática). Hacemos clic en el selector de escena y elegimos la escena #1. Hacemos clic en el icono "Ir a escena" en el menú superior, seleccionamos "Petra-Jordan"   y hacemos clic en "Listo". Tenemos un elemento adicional "Ir a escena" en nuestra escena #1. El resultado será el siguiente:

Jose Luis Martos Quindós. Captura 3 editor Virtual Tour (CC BY-SA)

Hacemos doble clic en el segundo "Ir a interacción". Navegaremos a la escena estática. Podemos observar que esta escena tiene un botón "Atrás" en la esquina superior izquierda:

Jose Luis Martos Quindós. Capura acceso al botón "atrás" (CC BY-SA)

Una escena estática tiene un botón opcional "Atrás" y está marcado de forma predeterminada. Así es como se ve la opción:

Por supuesto, se puede desactivar este "Botón Atrás" y crear un elemento "Ir a escena".

Paso 7: agregar interacciones.

Ahora, vamos a agregar algunas interacciones a nuestras escenas. Primero, agregaremos una interacción de imagen a la escena #2.
Esta es la imagen que añadiremos:

Michael Gunther. Façade of the Roman Soldier Tomb in Petra (Attribution ShareAlike (CC-BY-SA)Versión de la licencia: 3.0 Unported)


Obtener esta imagen a través del siguiente enlace

Navegamos a la escena #2. Hacemos clic en el icono en el menú superior. Aparecerá un cuadro de diálogo. Subimos la imagen y añadimos texto alternativo como se muestra aquí:

Jose Luis Martos Quindós. Captura carga de imagen de fondo 2 (CC BY-SA)


Hacemos clic en "Listo". Hemos añadido la primera interacción. Lo arrastramos y colocamos como se muestra aquí:

Jose Luis Martos Quindós. Captura muestra interacción 1 (CC BY-SA)

Ahora, agregaremos tres interacciones a nuestra escena estática (escena # 3):

  • Texto sobre el teatro.
  • Vídeo.
  • Imagen de la entrada.

Haremos clic en el selector de escena y eligiremos la escena #3.

Primero, agregaremos la interacción de texto (Fuente: https://en.wikipedia.org/wiki/Petra_Theater):

El teatro fue construido en el ápice cultural y político del reino nabateo bajo Aretas IV (9 aC-40 dC) donde se llevaron a cabo proyectos de construcción cívica a gran escala en Petra y otras importantes ciudades comerciales nabateas en Hijaz y el Negev. Se dice que las actividades de construcción de teatro de Herodes el Grande pueden haber instado al rey nabateo a seguir el ejemplo. El enorme teatro con su gran capacidad se posicionó para traer el mayor número de tumbas a la vista.

Aunque de diseño romano, ser tallado en oposición a ser construido es característicamente distintivo estilo nabateo y no una manera romana. Los capiteles florales del teatro también son distintivamente elementos artísticos nabateos. Pequeñas alteraciones del teatro fueron hechas por Aretas son Malichus II y más tarde por los romanos que reconstruyeron la pared exterior.

Hacemos clic en el icono  en el menú superior. Aparecerá un cuadro de diálogo. Copiamos el texto de arriba y pegamos en el cuadro de diálogo, debería verse así:

Jose Luis Martos Quindós. Captura cuadro de diálogo (CC BY-SA)

Hacemos clic en "Listo". La interacción  de texto debe mostrarse en el medio de la escena. Lo arrastramos para reposicionarlo.

En segundo lugar, agregaremos algunos videos. Hacemos clic en el icono  en el   menú superior. Aparecerá un cuadro de diálogo. Agregamos el título: "Petra, Jordania - una observación inusual sobre el teatro romano y las tumbas nabateas a su alrededor" y la fuente: https://www.youtube.com/watch?v=Jlexhg-9Vf8

Jose Luis Martos Quindós. Captura agregar vídeo (CC BY-SA)

Hacemos clic en "Listo". La interacción   de video debe mostrarse en la escena. Lo arrastramos para reposicionarlo.

Finalmente, agregaremos esta imagen:

David Bjorgen. Façade of the Roman Soldier Tomb in Petra (Attribution ShareAlike (CC-BY-SA)Versión de la licencia: 2.5 Generic)


Obtener esta imagen a través del siguiente enlace

Hacemos clic en "Listo" y añadimos la tercera interacción a esta escena. Arrastramos las interacciones para reposicionarlas. El resultado será el siguiente:

Jose Luis Martos Quindós. Captura muestra interacción 2 (CC BY-SA)

Paso 8: guardar la actividad.

Guardamos nuestro contenido para ver su visita virtual terminada (360).
Ahora debería tener el mismo resultado que el ejemplo en la parte superior de la página.

REFERENCIAS:

Este material está basado y adaptado en base al tutorial alojado en h5p.org disponible en este enlace.