{"id":1347,"date":"2016-10-18T00:55:05","date_gmt":"2016-10-18T05:55:05","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1347"},"modified":"2024-11-01T11:39:22","modified_gmt":"2024-11-01T16:39:22","slug":"insertar-imagen-360-vr-en-tu-web","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/","title":{"rendered":"Insertar imagen 360 VR en tu web"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"100%\" height=\"200\" frameborder=\"0\" allowfullscreen=\"\" scrolling=\"no\" src=\"http:\/\/co.ivoox.com\/es\/player_ej_14325885_2_1.html?data=kpmglJqcfJahhpywj5WaaZS1lZWah5yncZOhhpywj5WRaZi3jpWah5yncari1Mrf1sbWb8rhwszS0JCXepGft7eYx9OPuNaf2MrPj4qbh46-1sbbjajFts3j1JC60dfFsMbnjLiah5yncZU.&#038;\" style=\"height:110px !important\"><\/iframe><\/p>\n<p>La creaci\u00f3n y administraci\u00f3n de sitios web (independiente de su objetivo y tipo) no es una tarea sencilla. La actualizaci\u00f3n de contenidos, el aseguramiento de la informaci\u00f3n y la integraci\u00f3n de nuevas soluciones son una peque\u00f1a muestra de las m\u00faltiples tareas que tiene a cargo el equipo web.<\/p>\n<p>Para ayudar un poco en la tarea de colegas y amigos, me propuse investigar y documentar <strong>c\u00f3mo se insertan im\u00e1genes 360 grados en una web<\/strong>. El resultado fue atractivo, considerando que las herramientas necesarias para lograrlo est\u00e1n al alcance de todos.<\/p>\n<p>Comencemos:<\/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>Identificaci\u00f3n del escenario<\/h2>\n<p>El primer paso es identificar el escenario que se quiere compartir en el sitio web.<\/p>\n<p>Conviene tener presente:<\/p>\n<ul>\n<li>buena iluminaci\u00f3n;<\/li>\n<li>sonido ambiente agradable (en caso que se quiere anexar audio);<\/li>\n<li>un momento del d\u00eda en que no haya movimiento de personas u objetos, y<\/li>\n<li>un espacio que sea digno de representarse en 360 grados.<\/li>\n<\/ul>\n<h2>Las herramientas<\/h2>\n<p>Una vez superado lo anterior, lo sigue es identificar y configurar la c\u00e1mara que realizar\u00e1 la panor\u00e1mica.<\/p>\n<p>Para este caso, se utilizar\u00e1 un tel\u00e9fono inteligente -de gama media o alta- y un tr\u00edpode con base giratoria. Si es necesario, un par de luces que mejoren la calidad y fidelidad de la imagen.<\/p>\n<h2>Capturando la imagen<\/h2>\n<p>El tercer paso es instalar la aplicaci\u00f3n \u00ab<a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.google.vr.cyclops&#038;hl=es_419\" target=\"_blank\" rel=\"noopener noreferrer\">C\u00e1mara Cardboard<\/a>\u00bb en el dispositivo m\u00f3vil. Esta permite realizar capturas en 360 grados, adem\u00e1s del sonido ambiente.<\/p>\n<p>Seg\u00fan la tienda PlayStore, \u00abC\u00e1mara Cardboard\u00bb es una soluci\u00f3n que permite capturar y compartir fotograf\u00edas de realidad virtual. Adem\u00e1s -si as\u00ed lo desea el creador de contenido-, es posible grabar el audio en cualquier direcci\u00f3n, logrando una sensaci\u00f3n de profundidad al momento de visualizar el recurso.<\/p>\n<p>Aqu\u00ed tambi\u00e9n toma lugar el tr\u00edpode, pues el registro del escenario requiere un movimiento horizontal (conocido como \u00abpaneo\u00bb), lento y estable. Aunque puede realizarse \u00aba mano alzada\u00bb, es recomendable un apoyo.<\/p>\n<h2>Convertir la imagen<\/h2>\n<p>Aunque las im\u00e1genes que genera la aplicaci\u00f3n en menci\u00f3n son compatibles con visores de realidad virtual, su visualizaci\u00f3n desde un sitio web no lo es, debido a que no est\u00e1 en el formato correcto.<\/p>\n<p>Para dar soluci\u00f3n a esto, Google ha habilitado un servicio en l\u00ednea que <a href=\"https:\/\/storage.googleapis.com\/cardboard-camera-converter\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">convierte las im\u00e1genes de la \u00abC\u00e1mara Cardboard\u00bb<\/a> en un formato compatible con el visor web de realidad virtual. Este formato es conocido como \u00abequirectangular\u00bb.<\/p>\n<p>As\u00ed, de una imagen de 10320 pixeles de ancho por 1732 pixeles de alto, se pasa a una de 4096 pixeles de ancho y alto, que tiene una disposici\u00f3n de elementos compatibles con cualquier visor VR.<\/p>\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<h2>El c\u00f3digo<\/h2>\n<p>A continuaci\u00f3n se integra el API de Google que carga el Visor de Realidad Virtual en el sitio web y se anexa la imagen convertida. Para ello se utiliza la etiqueta IFRAME y los siguientes par\u00e1metros:<\/p>\n<pre>\r\n&lt;iframe width=\"800\" height=\"450\" allowfullscreen src=\"\/\/storage.googleapis.com\/vrview\/2.0\/index.html?image=\/\/URL-de-la-imagen-convertida.jpg&is_stereo=true\" &gt; &lt;\/iframe&gt;\r\n<\/pre>\n<p>En detalle, los par\u00e1metros que se definen son:<\/p>\n<pre>width=\"800\" height=\"450\"<\/pre>\n<p>Aqu\u00ed se especifica el ancho y alto del visor.<\/p>\n<pre>allowfullscreen<\/pre>\n<p>Permite que el recurso sea visualizado en pantalla completa.<\/p>\n<pre>src=\"\/\/storage.googleapis.com\/vrview\/2.0\/index.html<\/pre>\n<p>Carga el API de Google para ejecutar el visor VR en la p\u00e1gina web.<\/p>\n<pre>image=\/\/URL-de-la-imagen-convertida.jpg<\/pre>\n<p>Define la ruta (ubicaci\u00f3n) de la imagen equirectangular.<\/p>\n<pre>is_stereo=true<\/pre>\n<p>Espec\u00edfica el tipo de imagen, que para este caso es est\u00e9reo.<\/p>\n<h2>Publicar<\/h2>\n<p>El \u00faltimo paso es guardar el documento, publicarlo en internet y probarlo. Si los pasos anteriores se realizaron correctamente, no debe aparecer ning\u00fan error.<\/p>\n<p>Aqu\u00ed est\u00e1 mi imagen de ejemplo:<\/p>\n<p><iframe loading=\"lazy\" width=\"600\" height=\"450\" allowfullscreen frameborder=\"0\" src=\"\/\/storage.googleapis.com\/vrview\/2.0\/index.html?image=\/\/e-lexia.com\/blog\/wp-content\/uploads\/360.jpg&#038;is_stereo=true\" style=\"margin: 2em auto; display: block; box-shadow: 4px 4px 10px #CCC\"><\/iframe><\/p>\n<h2>Ayuda<\/h2>\n<p>Para ilustrar mejor esta entrada, he compartido un video sobre el proceso en <a href=\"https:\/\/www.youtube.com\/user\/juanca826?sub_confirmation=1\" target=\"_blank\" rel=\"noopener noreferrer\">mi canal de YouTube<\/a>.<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" title=\"Insertar imagen 360 VR en sitio web. Tutorial | [EPW]\" width=\"774\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/uLekR-UEOOo?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<p class=\"nota\"><strong>Actualizaci\u00f3n:<\/strong> en el video no aparece el directorio \u00ab2.0\u00bb luego de \u00abvrview\u00bb. Te recomiendo utilizar el c\u00f3digo que aparece en este art\u00edculo, pues est\u00e1 actualizado.<\/p>\n<p>\u00bfLo lograste? Comparte en los comentarios tu visor VR implementado o las inquietudes que tengas sobre el proceso.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La creaci\u00f3n y administraci\u00f3n de sitios web (independiente de su objetivo y tipo) no es una tarea sencilla. La actualizaci\u00f3n de contenidos, el aseguramiento de la informaci\u00f3n y la integraci\u00f3n de nuevas soluciones son una peque\u00f1a muestra de las m\u00faltiples tareas que tiene a cargo el equipo web. Para ayudar&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1588,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,66],"class_list":["post-1347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"juancadotcom\"\/>\n\t<meta name=\"google-site-verification\" content=\"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Escuela Digital - Aprende con e-Lexia.com\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Insertar imagen 360 VR en tu web - Escuela Digital\" \/>\n\t\t<meta property=\"og:description\" content=\"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/\" \/>\n\t\t<meta property=\"fb:admins\" content=\"42896562054\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"975\" \/>\n\t\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t\t<meta property=\"article:tag\" content=\"escuela de producci\u00f3n\" \/>\n\t\t<meta property=\"article:tag\" content=\"c\u00f3digo\" \/>\n\t\t<meta property=\"article:tag\" content=\"hipermedia\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2016-10-18T05:55:05+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-11-01T16:39:22+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Insertar imagen 360 VR en tu web - Escuela Digital\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"juancadotcom\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura estimado\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#blogposting\",\"name\":\"Insertar imagen 360 VR en tu web - Escuela Digital\",\"headline\":\"Insertar imagen 360 VR en tu web\",\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/camara-teclado.jpg\",\"width\":975,\"height\":550,\"caption\":\"Icono camara. Fondo teclado.\"},\"datePublished\":\"2016-10-18T00:55:05-05:00\",\"dateModified\":\"2024-11-01T11:39:22-05:00\",\"inLanguage\":\"es-ES\",\"commentCount\":25,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#webpage\"},\"articleSection\":\"Escuela de Producci\\u00f3n, c\\u00f3digo, hipermedia\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"position\":2,\"name\":\"Escuela de Producci\\u00f3n\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#listItem\",\"name\":\"Insertar imagen 360 VR en tu web\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"name\":\"Inicio\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#listItem\",\"position\":3,\"name\":\"Insertar imagen 360 VR en tu web\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\",\"name\":\"e-Lexia.com\",\"description\":\"Aprende con e-Lexia.com\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"telephone\":\"+573053933953\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/e-Lexia-Logo-v5-circle.png\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#organizationLogo\",\"width\":600,\"height\":600,\"caption\":\"Logo de e-Lexia.com\"},\"image\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/@escuela-digital\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/\",\"name\":\"juancadotcom\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g\",\"width\":96,\"height\":96,\"caption\":\"juancadotcom\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/juancadotcom\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#webpage\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/\",\"name\":\"Insertar imagen 360 VR en tu web - Escuela Digital\",\"description\":\"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/camara-teclado.jpg\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#mainImage\",\"width\":975,\"height\":550,\"caption\":\"Icono camara. Fondo teclado.\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/insertar-imagen-360-vr-en-tu-web\\\/#mainImage\"},\"datePublished\":\"2016-10-18T00:55:05-05:00\",\"dateModified\":\"2024-11-01T11:39:22-05:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"name\":\"Escuela Digital\",\"description\":\"Aprende con e-Lexia.com\",\"inLanguage\":\"es-ES\",\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Insertar imagen 360 VR en tu web - Escuela Digital","description":"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.","canonical_url":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#blogposting","name":"Insertar imagen 360 VR en tu web - Escuela Digital","headline":"Insertar imagen 360 VR en tu web","author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg","width":975,"height":550,"caption":"Icono camara. Fondo teclado."},"datePublished":"2016-10-18T00:55:05-05:00","dateModified":"2024-11-01T11:39:22-05:00","inLanguage":"es-ES","commentCount":25,"mainEntityOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#webpage"},"isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#webpage"},"articleSection":"Escuela de Producci\u00f3n, c\u00f3digo, hipermedia"},{"@type":"BreadcrumbList","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","position":1,"name":"Inicio","item":"https:\/\/e-lexia.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","position":2,"name":"Escuela de Producci\u00f3n","item":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#listItem","name":"Insertar imagen 360 VR en tu web"},"previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","name":"Inicio"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#listItem","position":3,"name":"Insertar imagen 360 VR en tu web","previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}}]},{"@type":"Organization","@id":"https:\/\/e-lexia.com\/blog\/#organization","name":"e-Lexia.com","description":"Aprende con e-Lexia.com","url":"https:\/\/e-lexia.com\/blog\/","telephone":"+573053933953","logo":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/01\/e-Lexia-Logo-v5-circle.png","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#organizationLogo","width":600,"height":600,"caption":"Logo de e-Lexia.com"},"image":{"@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#organizationLogo"},"sameAs":["https:\/\/twitter.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/@escuela-digital","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"Person","@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author","url":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/","name":"juancadotcom","image":{"@type":"ImageObject","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g","width":96,"height":96,"caption":"juancadotcom"},"sameAs":["https:\/\/x.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/juancadotcom","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"WebPage","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#webpage","url":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/","name":"Insertar imagen 360 VR en tu web - Escuela Digital","description":"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#breadcrumblist"},"author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"creator":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg","@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#mainImage","width":975,"height":550,"caption":"Icono camara. Fondo teclado."},"primaryImageOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/#mainImage"},"datePublished":"2016-10-18T00:55:05-05:00","dateModified":"2024-11-01T11:39:22-05:00"},{"@type":"WebSite","@id":"https:\/\/e-lexia.com\/blog\/#website","url":"https:\/\/e-lexia.com\/blog\/","name":"Escuela Digital","description":"Aprende con e-Lexia.com","inLanguage":"es-ES","publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"}}]},"og:locale":"es_ES","og:site_name":"Escuela Digital - Aprende con e-Lexia.com","og:type":"article","og:title":"Insertar imagen 360 VR en tu web - Escuela Digital","og:description":"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.","og:url":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/","fb:admins":"42896562054","og:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg","og:image:secure_url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg","og:image:width":975,"og:image:height":550,"article:tag":["escuela de producci\u00f3n","c\u00f3digo","hipermedia"],"article:published_time":"2016-10-18T05:55:05+00:00","article:modified_time":"2024-11-01T16:39:22+00:00","twitter:card":"summary_large_image","twitter:site":"@juancadotcom","twitter:title":"Insertar imagen 360 VR en tu web - Escuela Digital","twitter:description":"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.","twitter:creator":"@juancadotcom","twitter:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/11\/camara-teclado.jpg","twitter:label1":"Escrito por","twitter:data1":"juancadotcom","twitter:label2":"Tiempo de lectura estimado","twitter:data2":"4 minutos"},"aioseo_meta_data":{"post_id":"1347","title":null,"description":"Aprende a integrar un recurso inmersivo 360 VR en tu sitio web. Con pocas instrucciones HTML, CSS y JS, da el primer paso para el metaverso.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-12-24 03:24:25","updated":"2025-06-04 14:13:58","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\" title=\"Inicio\">Inicio<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/\" title=\"Escuela de Producci\u00f3n\">Escuela de Producci\u00f3n<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tInsertar imagen 360 VR en tu web\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Inicio","link":"https:\/\/e-lexia.com\/blog"},{"label":"Escuela de Producci\u00f3n","link":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/"},{"label":"Insertar imagen 360 VR en tu web","link":"https:\/\/e-lexia.com\/blog\/insertar-imagen-360-vr-en-tu-web\/"}],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1347","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=1347"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1347\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1588"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}