Insertar fotografía esférica 360 en tu web

¿Quieres mejorar la experiencia del usuario en tu sitio web o blog? Como ya lo he mencionado en este espacio, la principal preocupación de un generador de contenidos debe ser su audiencia. Ella es la que determina el éxito o fracaso de la estrategia.

Así pues, buscando mejorar estas experiencias, te comparto un tutorial sobre cómo insertar fotografías esféricas 360 (photosphere images) en una página web. Seguro este recurso mejorará -con creces- el impacto y la interacción de tus usuarios.

Por cierto, si lo que estás buscando es insertar una fotografía panorámica te recomiendo mi entrada “Insertar imagen 360 VR en tu web”. En ese texto te explico cómo capturar y publicar una imagen panorámica, utilizando Google CardBoard.

Qué es una fotografía esférica

Antes de iniciar el tutorial tengamos presente que una fotografía esférica es una imagen panorámica que captura todo lo que se encuentra alrededor del punto de captura, es decir, revela lo que está en todas las direcciones de la cámara: arriba, abajo y a los lados.

La fotografía panorámica tradicional solo permite desplazamientos horizontales (paneo) o verticales (tilt). Mientras que la esférica, agrupa todas las posibles direcciones.

Este tipo de imagen recibe ese nombre por la sensación que causa en el usuario – espectador: la fotografía parece ser una esfera, donde el usuario se ubica en el centro y las imágenes se proyectan es la superficie de esta.

Cómo capturar una foto esférica

Existen diferentes técnicas y dispositivos.

En Internet existen tutoriales sobre cómo lograr este tipo de recurso con una cámara réflex. La tarea no es sencilla, toda vez que se deben tomar más de 30 imágenes y luego unirlas con un programa de fotografía. El proceso es complejo y puede ser frustrante.

La otra opción está en aplicaciones móviles. Algunos teléfonos inteligentes (como el Nexus 5) traen una aplicación nativa que permite este tipo de fotos. También hay que tomar varias imágenes, pero el mismo dispositivo orienta la captura y se encarga de reunir las instantáneas en una imagen.

Y la última opción es adquirir una cámara 360, como es mi caso. Para este tutorial utilicé la Ricoh Theta S. Una cámara cómoda; fácil de transportar, y con un manejo y configuración bastante intuitivo.

Cómo publicar la imagen 360 en la web

Para este proceso es necesario tener conocimientos básicos en HTML y CSS. Aunque se van a insertar librerías JavaScript, no hace falta tener habilidades en este lenguaje de programación.

Lo primero entonces es insertar las siguientes líneas de código en el HEAD del documento:

<link href="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r70/three.min.js"> </script>

<script src="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.js"> </script>

La primera llama un recurso CSS, que se encarga de dar apariencia al visor. Las otras dos son librerías JS que se ocupan de la visualización e interacción del usuario.

Luego, en el mismo HEAD se debe anexar la siguiente línea de CSS:

<style>
  #photosphere { height:600px; width:100%; margin: 0 auto }
</style>

Esta declaración de estilos permite definir el tamaño del visor fotoesférico.

Luego se inserta la siguiente línea HTML en el BODY:

<div id=”photosphere”> </div>

Este DIV debe ir donde se quiere presentar el visor.

Por último, al final del BODY, se debe anexar el siguiente código JS:

<script>

  // 360 viewer
  var PSV = new PhotoSphereViewer({
    panorama: 'Aquí va la URL de la imagen',
    container: 'photosphere',
    loading_img: 'Aquí va la URL del icono',
    navbar: 'autorotate zoom download fullscreen',
    caption: 'texto'',
    default_fov: 65,
    mousewheel: false,
    size: {
      height: 400
    }
  });

</script>

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

En este código hay que hacer algunos cambios. Pero son sencillos.

En panorama se debe anotar la URL absoluta (desde http:// hasta la extensión de la imagen) de la imagen 360.

En loading_img se indica la URL absoluta de la imagen de precarga. Esto no es obligatoria, pero es una buena práctica.

En navbar se define las herramientas disponibles en el visor. En el código anterior están todas las posibles: reproducción automática, zoom, descarga y pantalla completa. En caso de querer eliminar alguna solo hace falta borrar su nombre del código.

En caption se puede escribir el pie de fotografía. Este puede llevar etiquetas de formato HTML, como negrita y cursiva.

Al final de este tutorial anexo un video donde se explica en detalle cada paso.

Lo último

Para que este código funcione en necesario llevar las imágenes y la página HTML a Internet, es decir, publicarlo en un servidor. Ten presente que este recurso no va a funcionar en local.

Y para facilitar el proceso, te comparto un video que está en mi canal YouTube y describe el paso a paso

En el canal YouTube «Escuela Digital» puedes encontrar más videos sobre el tema.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

¡Vamos por los 25.000 suscriptores en YouTube! Suscríbete

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

—

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Insertar fotografía esférica 360 en tu web por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internaciona . Basada en una obra en https://e-lexia.com/blog .