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
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:
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:
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)
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.
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:
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).
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:
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:
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:
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í:
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í:
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
Hacemos clic en "Listo" y añadimos la tercera interacción a esta escena. Arrastramos las interacciones para reposicionarlas. El resultado será el siguiente:
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.