{"id":1472,"date":"2018-06-28T16:14:40","date_gmt":"2018-06-28T21:14:40","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1472"},"modified":"2024-11-01T11:36:53","modified_gmt":"2024-11-01T16:36:53","slug":"insertar-fotografia-esferica-360-web","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/insertar-fotografia-esferica-360-web\/","title":{"rendered":"Insertar fotograf\u00eda esf\u00e9rica 360 en tu web"},"content":{"rendered":"<p>\u00bfQuieres mejorar la experiencia del usuario en tu sitio web o blog? Como ya lo he mencionado en este espacio, la principal preocupaci\u00f3n de un generador de contenidos debe ser su audiencia. Ella es la que determina el \u00e9xito o fracaso de la estrategia.<\/p>\n<p>As\u00ed pues, buscando mejorar estas experiencias, te comparto un tutorial sobre c\u00f3mo insertar fotograf\u00edas esf\u00e9ricas 360 (<em lang=\"en\">photosphere images<\/em>) en una p\u00e1gina web. Seguro este recurso mejorar\u00e1 -con creces- el impacto y la <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/interaccion\/\" rel=\"noopener\" target=\"_blank\">interacci\u00f3n<\/a> de tus usuarios.<\/p>\n<p>Por cierto, si lo que est\u00e1s buscando es insertar una fotograf\u00eda panor\u00e1mica te recomiendo mi entrada \u201c<a href=\"http:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/\">Insertar imagen 360 VR en tu web<\/a>\u201d. En ese texto te explico c\u00f3mo capturar y publicar una imagen panor\u00e1mica, utilizando Google CardBoard.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Qu\u00e9 es una fotograf\u00eda esf\u00e9rica<\/h2>\n<p>Antes de iniciar el tutorial tengamos presente que una fotograf\u00eda esf\u00e9rica es una imagen panor\u00e1mica que captura todo lo que se encuentra alrededor del punto de captura, es decir, revela lo que est\u00e1 en todas las direcciones de la c\u00e1mara: arriba, abajo y a los lados.<\/p>\n<p>La fotograf\u00eda panor\u00e1mica tradicional solo permite desplazamientos horizontales (paneo) o verticales (<em>tilt<\/em>). Mientras que la esf\u00e9rica, agrupa todas las posibles direcciones.<\/p>\n<p>Este tipo de imagen recibe ese nombre por la sensaci\u00f3n que causa en el usuario \u2013 espectador: la fotograf\u00eda parece ser una esfera, donde el usuario se ubica en el centro y las im\u00e1genes se proyectan es la superficie de esta.<\/p>\n<h2>C\u00f3mo capturar una foto esf\u00e9rica<\/h2>\n<p>Existen diferentes t\u00e9cnicas y dispositivos.<\/p>\n<p>En Internet existen tutoriales sobre c\u00f3mo lograr este tipo de recurso con una c\u00e1mara r\u00e9flex. La tarea no es sencilla, toda vez que se deben tomar m\u00e1s de 30 im\u00e1genes y luego unirlas con un programa de fotograf\u00eda. El proceso es complejo y puede ser frustrante.<\/p>\n<p>La otra opci\u00f3n est\u00e1 en aplicaciones m\u00f3viles. Algunos tel\u00e9fonos inteligentes (como el Nexus 5) traen una aplicaci\u00f3n nativa que permite este tipo de fotos. Tambi\u00e9n hay que tomar varias im\u00e1genes, pero el mismo dispositivo orienta la captura y se encarga de reunir las instant\u00e1neas en una imagen.<\/p>\n<p>Y la \u00faltima opci\u00f3n es adquirir una c\u00e1mara 360, como es mi caso. Para este tutorial utilic\u00e9 la Ricoh Theta S. Una c\u00e1mara c\u00f3moda; f\u00e1cil de transportar, y con un manejo y configuraci\u00f3n bastante intuitivo.<\/p>\n<h2>C\u00f3mo publicar la imagen 360 en la web<\/h2>\n<p>Para este proceso es necesario tener conocimientos b\u00e1sicos en HTML y <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a>. Aunque se van a insertar librer\u00edas JavaScript, no hace falta tener habilidades en este lenguaje de programaci\u00f3n.<\/p>\n<p>Lo primero entonces es insertar las siguientes l\u00edneas de c\u00f3digo en el <code>HEAD<\/code> del documento:<\/p>\n<pre>\r\n&lt;link href=\"https:\/\/cdn.rawgit.com\/mistic100\/Photo-Sphere-Viewer\/3.1.0\/dist\/photo-sphere-viewer.min.css\" rel=\"stylesheet\"&gt;\r\n<\/pre>\n<pre>\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/threejs\/r70\/three.min.js\"&gt; &lt;\/script&gt;\r\n<\/pre>\n<pre>\r\n&lt;script src=\"https:\/\/cdn.rawgit.com\/mistic100\/Photo-Sphere-Viewer\/3.1.0\/dist\/photo-sphere-viewer.min.js\"&gt; &lt;\/script&gt;\r\n<\/pre>\n<p>La primera llama un recurso CSS, que se encarga de dar apariencia al visor. Las otras dos son librer\u00edas JS que se ocupan de la visualizaci\u00f3n e interacci\u00f3n del usuario.<\/p>\n<p>Luego, en el mismo <code>HEAD<\/code> se debe anexar la siguiente l\u00ednea de CSS:<\/p>\n<pre>\r\n&lt;style&gt;\r\n  #photosphere { height:600px; width:100%; margin: 0 auto }\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>Esta declaraci\u00f3n de estilos permite definir el tama\u00f1o del visor fotoesf\u00e9rico.<\/p>\n<p>Luego se inserta la siguiente l\u00ednea HTML en el <code>BODY<\/code>:<\/p>\n<pre>\r\n&lt;div id=\u201dphotosphere\u201d&gt; &lt;\/div&gt;\r\n<\/pre>\n<p>Este <code>DIV<\/code> debe ir donde se quiere presentar el visor.<\/p>\n<p>Por \u00faltimo, al final del <code>BODY<\/code>, se debe anexar el siguiente c\u00f3digo JS:<\/p>\n<pre>\r\n&lt;script&gt;\r\n\r\n  \/\/ 360 viewer\r\n  var PSV = new PhotoSphereViewer({\r\n    panorama: 'Aqu\u00ed va la URL de la imagen',\r\n    container: 'photosphere',\r\n    loading_img: 'Aqu\u00ed va la URL del icono',\r\n    navbar: 'autorotate zoom download fullscreen',\r\n    caption: 'texto'',\r\n    default_fov: 65,\r\n    mousewheel: false,\r\n    size: {\r\n      height: 400\r\n    }\r\n  });\r\n\r\n&lt;\/script&gt;\r\n<\/pre>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<p>En este c\u00f3digo hay que hacer algunos cambios. Pero son sencillos.<\/p>\n<p>En <code>panorama<\/code> se debe anotar la URL absoluta (desde http:\/\/ hasta la extensi\u00f3n de la imagen) de la imagen 360.<\/p>\n<p>En <code>loading_img<\/code> se indica la URL absoluta de la imagen de precarga. Esto no es obligatoria, pero es una buena pr\u00e1ctica.<\/p>\n<p>En <code>navbar<\/code> se define las herramientas disponibles en el visor. En el c\u00f3digo anterior est\u00e1n todas las posibles: reproducci\u00f3n autom\u00e1tica, zoom, descarga y pantalla completa. En caso de querer eliminar alguna solo hace falta borrar su nombre del c\u00f3digo.<\/p>\n<p>En <code>caption<\/code> se puede escribir el pie de fotograf\u00eda. Este puede llevar etiquetas de formato HTML, como negrita y cursiva.<\/p>\n<p>Al final de este tutorial anexo un video donde se explica en detalle cada paso.<\/p>\n<h2>Lo \u00faltimo<\/h2>\n<p>Para que este c\u00f3digo funcione en necesario llevar las im\u00e1genes y la p\u00e1gina HTML a Internet, es decir, publicarlo en un servidor. Ten presente que este recurso no va a funcionar en local.<\/p>\n<p>Y para facilitar el proceso, te comparto un video que est\u00e1 en <a href=\"https:\/\/www.youtube.com\/user\/juanca826?sub_confirmation=1\">mi canal YouTube<\/a> y describe el paso a paso<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" title=\"C\u00f3mo insertar IMAGEN 360 (Fotoesf\u00e9rica) en una p\u00e1gina web. Paso a paso | [EPW]\" width=\"774\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/PhyzhuqMyb8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@escuela-digital?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abEscuela Digital\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQuieres mejorar la experiencia del usuario en tu sitio web o blog? Como ya lo he mencionado en este espacio, la principal preocupaci\u00f3n de un generador de contenidos debe ser su audiencia. Ella es la que determina el \u00e9xito o fracaso de la estrategia. As\u00ed pues, buscando mejorar estas experiencias,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[66,26],"class_list":["post-1472","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-hipermedia","tag-wordpress","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1472"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1472\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}