Tours Virtuales Online

Un Click Es Suficiente Para Crear Un Tour Virtual Online

El Creador de Tours Virtuales Online admite varios formatos y le permite crear Tours Virtuales de la nada en apenas dos clicks:

  • Un click de su camara para capturar 360 grados en una sola toma.


  • Un click de su mouse para transformar la fotografia en un Tour Virtual Interactivo.


Con su propia camara y gratis.



 

Espejos Parabolicos


Informacion De Contacto
contacto

360 Facil

Barcelona, España

Buenos Aires, Argentina

Santiago, Chile

Contáctenos

E-Mail : info@360facil.com


Espejo Parabolico Retraible


Foro

Encuentre Respuesta A Sus Dudas Entrando Al Foro


Este es el lugar donde preguntar aquello que no encontro y tambien un buen sitio para ayudar a otros con su conocimiento :


 

Gacetilla
Reciba Nuestra Gacetilla

Para recibir actualizaciones de nuestro sitio e info relacionada por favor ingrese su email :




 

Destacados

Una Inversion Minima Para Modernizar Su Inmobiliaria Online

Brinde mas y mejores servicios a sus clientes mostrando su cartera de inmuebles en Tours Virtuales de 360 grados. Nada mas parecido a estar realmente en el lugar y puede hacerlo usted mismo y con la misma facilidad conque lo hace con fotografias tradicionales.
Ver mas...



El Complemento Ideal Para Todo Sitio Web

Todo webmaster puede mejorar notoriamente sus servicios incorporando a su oferta Tours Virtuales interactivos que puede hacer por si mismo, con sus propios equipos y en tan poco como dos clicks.
Leer mas...



Los Programas Gratuitos Que Haran Todo El Trabajo

Dependiendo del tipo de panorama, la combinacion de estos cuatro programas gratuitos, tres, dos, uno o aun ninguno de ellos es todo lo que necesita el fotografo multimedia para realizar su tarea.
Leer mas...


Creador de Tours Virtuales Online Renovado : diseño mejorado, casilla de Comentarios de Facebook individuales para cada Tour Virtual, funcionamiento interno optimizado para mayor velocidad, compatibilidad con mas navegadores y seguridad incrementada.


Publicar Panoramas Interactivos En Html 5



El ultimo standard de Html permite la creacion y manipulacion de contenidos interactivos tales como Tours Virtuales que hasta la version anterior del lenguaje hubieran sido imposibles, y que funcionan sin necesidad de plugins en todos los sistemas operativos y en todos los navegadores, siendo incluso adaptables a tabletas y telefonos celulares.


Por lo antedicho se considera que este lenguaje tiene una gran proyeccion a futuro inmediato constituyendose en un competidor directo para los contenidos en Java y Flash. A pesar de los pronosticos optimistas, ese futuro aun no ha llegado y hasta el momento los Tours Virtuales basados en esta tecnologia presentan algunos inconvenientes.

El principal de ellos es que el elemento canvas de Html 5 sobre el que se basa gran parte de los desarrollos en proceso actualmente no tiene soporte en la mayoria de las versiones del navegador mas utilizado del mundo, el Internet Explorer. Solo a partir de la version 9 de este programa el mismo admite nativamente el uso de la etiqueta canvas, aunque como veremos existen metodos alternativos para poder utilizarla en versiones anteriores. Crearemos un Tour Virtual con el siguiente panorama :





Presentacion De Un Tour Virtual En Html Puro


El ejemplo que presentaremos en esta pagina esta basado en un Script de Ross Harmes y Ernest Delgado y consta, en principio, de tres archivos :





Haga click aqui para descargar los tres elementos juntos y descomprima el archivo a una carpeta vacia como se ve mas arriba. Llamaremos a esta carpeta Html5. Alternativamente puede optar por descargar cada elemento por separado y guardar cada uno con el nombre de archivo indicado en el vinculo :



utilities.js
panorama.jpg
pagina.htm



Como siempre, trabajaremos con dos programas abiertos en simultaneo. Un navegador donde veremos la pagina web y un editor de textos donde veremos su codigo. Cada vez que editemos el codigo de la pagina podremos guardar el cambio y actualizar la vista en el navegador para comprobar si el cambio produce el efecto deseado en la apariencia de la pagina. Comenzamos por la pagina sin otros contenidos que la division basica entre encabezado y cuerpo y podemos ver que el navegador no muestra contenido alguno :





A continuacion editaremos la pagina para insertar un Tour Virtual. En el encabezado, encerrado entre el par de etiquetas <head> y </head> colocaremos la referencia al archivo utilities.js. Asimismo escribiremos referencias al estilo de la presentacion entre etiquetas <style> y </style>. Ademas, en este sector de la pagina colocaremos el script que origina el Tour Virtual entre etiquetas <script> y </script> :


<head>
<script type="text/javascript" src="utilities.js"></script>

<style type="text/css" media="screen">
* { outline : none; -moz-outline : none -moz-mac-focusring; }
#source-img   { position: absolute; left: -999em; }
  canvas         { position: absolute; float:center; top: -90px; }
#screen          { position: absolute; float:center; top: 0px; }
#screen div     { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;
background: #fffff; }
  div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;
width: 630px; }
</style>


<script type="text/javascript">
var YD = YAHOO.util.Dom,
YE = YAHOO.util.Event;
var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,
stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {
canvas = YD.get('cv');
ctx = canvas.getContext('2d');
canvas.width = 630;
canvas.height = 815;
canvas.style.width = '630px';
canvas.style.height = '815px';
stage = YD.get('screen-overlay');
YE.on(stage, 'mousedown', startMoveBackground);
YE.on(stage, 'mousemove', moveBackground);
YE.on(stage, 'mouseout', stopMove);
YE.on(stage, 'mouseup', stopMoveBackground);
stagePos = YD.getXY(stage);
stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];
img = YD.get('source-img');
redraw(); }
function startMoveBackground(e) {}
function moveBackground(e) {
dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;
if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {
if(moveDirection === 'left' || !moveDirection) {
clearInterval(moveInterval);
moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}
else
{ if(moveDirection === 'right' || !moveDirection) {
clearInterval(moveInterval);
moveInterval = setInterval(function() { moveLeft(); }, timeInt);
moveDirection = 'left'; }}}
function stopMove() {
clearInterval(moveInterval);
moveDirection = null; }
function moveRight() {
imgOffset += dist;
redraw(); }
function moveLeft() {
imgOffset -= dist;
redraw(); }
function stopMoveBackground(e) {}
function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {
if(typeof offset === 'undefined') offset = 0;
var h = img.height,
w = (img.width - 2) / 2.5;
var polarity = (pixelWidth > 0) ? 1 : -1;
var widthFactor = Math.abs(pixelWidth) / w;
var delta = Math.abs(pixelWidth);
var dHeight, dWidth, dy, dx;
var constant = Math.pow(100000, scalingFactor); //380;
var firstInc = ((delta / 2) * (delta / 2)) / constant;
for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {
(function(m) {
sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +
((inc * m + offset) % img.width) };})(n);
sy = 0;
sWidth = inc;
sHeight = h;
firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;
secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;
dHeight = (n < len / 2) ? firstHalf : secondHalf;
dWidth = inc * widthFactor;
dy = y + (h - dHeight) / 2;
dx = x + (inc * n * widthFactor * polarity);
data.push({
sx: sx,
sy: sy,
sWidth: sWidth,
sHeight: sHeight,
dx: dx,
dy: dy,
dWidth: dWidth,
dHeight: dHeight }); } }
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }
function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {
if(data.length === 0) {
precalculate(img, x, y, pixelWidth, scalingFactor, offset); }
var slice, sx;
for(var n = 0, len = data.length; n < len; n++) {
slice = data[n];
ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,
slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}
YAHOO.util.Event.on(window, 'load', init);
</script>
</head>

En el cuerpo de la pagina, alli donde queremos ubicar el Tour Virtual, entre las etiquetas <body> y </body> colocaremos el elemento canvas conteniendo la referencia al archivo de imagen :


<body>
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</body>

Actualizando la vista de la pagina en el navegador, encontramos que el Tour Virtual ahora es visible :





El aspecto inusual del mismo tiene que ver con las caracteristicas del elemento canvas en que esta basado. El presente script corta de manera virtual la imagen panoramica en bandas verticales a las que estira tanto en alto como en ancho de acuerdo a una proporcion matematica para emular la deformacion que producen las perspectivas en un panorama. Desplace el cursor del mouse sobre la imagen para imprimirle movimiento :



Cambio De Aspecto


Si bien el aspecto original de este Tour Virtual es interesante tambien es posible darle una presencia mas tradicional. Para ello editaremos la referencia en el cuerpo de la pagina a la etiqueta canvas :





La encerraremos ente pares de etiquetas <div> y </div> a las cuales daremos atributos de estilo que nos permitan emular una ventana que asoma al Tour Virtual :





Este es el codigo que hemos utilizado :


<div id="iframe" style="width:600;height:350;overflow:hidden;scroll;no;">
<div width="600" height="350" style="position:relative;bottom:177px">
<div id="bd">
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</div>
<div id="ft"></div>
</div>
</div>

De esta manera el Tour Virtual interactivo ahora es un rectangulo y funciona igualmente pasando el cursor del mouse por encima de la imagen :





Compatibilidad Con Internet Explorer


Internet Explorer, el navegador mas difundido en el mundo solo ha incorporado soporte para el elemento canvas, sobre el que se basan los Tours Virtuales interactivos, a partir de la version 9 que requiere para funcionar Windows 7 o Vista. Esto significa que una gran cantidad de usuarios que aun utilizan versiones anteriores del sistema operativo e Internet Explorer version 8 o anteriores no pueden ver elementos creados utilizando la etiqueta canvas. Abriendo el archivo pagina.htm en Internet Explorer 8 comprobaremos que la pagina no es presentada con su contenido. En el primer intento Internet Explorer bloquea el contenido activo requiriendo la autorizancion del usuario para ejecutarlo :





El usuario debe desplegar la opciones en la barra de informacion y aceptar para continuar adelante :





A continuacion es necesario volver a cargar la pagina. Podemos comprobar que Internet Explorer sigue sin mostrar el elemento canvas que contiene al Tour Virtual :





La solucion, si bien parcial, consiste en agregar un nuevo archivo al sistema :





El archivo excanvas.js es un plugin desarrollado por Google para permitir la compatibilidad de Internet Explorer con el elemento canvas de Html 5. Cabe señalar que todos los otros navegadores principales soportan este elemento de manera nativa desde varias versiones atras. Esto permite utilizarlos para interactuar con elementos basados en Canvas con un rendimiento razonable, mientras que la emulacion para Internet Explorer no carece de fallas y su rendimiento puede ser hasta 30 veces mas lento que utilizando otros navegadores. Para poder utilizar excanvas.js es necesario incluir un referencia a este archivo antes de cualquier otra referencia en el codigo al elemento, de manera que es una buena practica colocarla en el encabezado y cerca del comienzo de la pagina :





Este es el codigo de la referencia :


<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

De esta manera, con el simple agregado de un archivo externo y una linea de referencia en el codigo de la pagina, todos los navegadores principales y aun versiones antiguas de Internet Explorer pueden ser utilizados para ver Tours Virtuales en Html puro. A pesar de las limitaciones mencionadas para este importante navegador, cabe reiterar que las mismas deben desaparecer a partir de la version 9 del programa.

Los Tours Virtuales en Html 5 son relativamente una novedad por lo que es de esperarse que vayan apareciendo nuevos programas y scripts que mejoren los pocos que se han publicado hasta ahora. Lo mejor de Html 5 aun esta por llegar y es probable que se convierta en el nuevo standard en contenidos interactivos, para todo tipo de dispositivos, a medida que continue aumentando la cantidad de scripts disponibles y la velocidad de las conexiones y los procesadores.

Haga click con el boton derecho de su mouse sobre los vinculos y elija la opcion adecuada para ver el Tour Virtual Sin Enmarcar y el Tour Virtual Enmarcado en Internet Explorer.

Para mas informacion acerca de este script dirijase a la pagina original del Script de Ross Harmes y Ernest Delgado .


Aportes De Visitantes


Nimrod (nimrod.castillo@hotmail.com) dice :

Esta genial! crees que pudieras incluir un codigo para agregar hotspots a este tipo de vistas en 360?

URL :


360 Facil (info@360facil.com) dice :

Hola y Gracias por participar en 360 Facil. Nos interesa la respuesta a la inquietud que planteas pero no tenemos la respuesta exacta para darte. Hasta tanto tengamos tiempo de investigar el tema, te sugerimos ver la URL adjunta a este comentario, ya que el ejemplo que alli se muestra es precisamente el caso que planteas. Aparentemente el elemento CANVAS esta incluido dentro de un DIV junto con otros DIVS identificados cada uno con un nombre de clase que remite cada uno a un script con la orden que ejecuta cada hotspot. Atencion: el ejemplo solo funciona en Mozilla Firefox y Google Chrome.

URL : www.visual-experiments.com/demo/Html5VirtualTour/index2.html


Rovermons (rovermonserrat@hotmail.com) dice :

Excelente material.... el límite está en nuestra mente... gracias por aportar ideas

URL : URL


360 Facil (info@360facil.com) dice :

Gracias a ti, Rovermons!

URL : URL


josue (askraysonyk@gmail.com) dice :

exelente tuto me encanto sensillo y rapido pero hay un problema cuando quiero que la imagen sea cuadrada no me lo genera y nose por que me podrias prestar tu codigo para adaptarlo al mi porfa o explicarmelo un poco mas a fondo muchas gracias...

URL : www.360facil.com/esp/fotografia-360-grados-publicacion-tours-virtuales-html5-navegadores.php


JAVIER (javier.dorantes@gmail.com) dice :

Gracias por compartir

URL : URL


Claudio (caponce@uc.cl) dice :

Hola! Muy util el post. Gracias. Me gustaría poder posicionar el contenido al centro de la pantalla. Cómo se haría para eso? Gracias de antemano.

URL : URL


Agregar Un Aporte, Duda O Comentario


Ningun campo es obligatorio. Los mensajes que no tengan que ver con el tema podran ser moderados.


Escriba 123 aqui (verificacion anti-spam)

Enviarme un recordatorio de esta publicacion.






Si le ha gustado 360 Facil por favor compartalo con sus redes sociales

  


Con cualquier camara


Panoramas Interactivos De
360 Grados En Tres Simples Pasos



Despues de leer el tutorial usted estara en condiciones de crear su primer fotografia de 360 grados interactiva con la camara que ya tiene :

1 - Fotografiar
1 - Fotografiar

Tome una o mas fotografias del lugar que desea mostrar.

2 - Editar
2 - Editar

Convierta sus fotografias en panoramas de 360 grados.

3 - Publicar
3 - Publicar

Haga interactivos a sus panoramas y ofrezcalos al mundo a traves de internet.

Iniciar Tutorial

Si una imagen vale más que mil palabras, una Fotografía Interactiva de 360 Grados vale más que mil imágenes...

Recomendado...!!!


Creador De Tours Virtuales Online



Utilizando el Creador de Tours Virtuales Online podra :


Convertir sus fotografias de 360 grados en tours virtuales con apenas un click.


Insertar sus tours virtuales en sitios web, emails, blogs o cualquier lugar donde quiera con solo copiar y pegar un texto.


Conocer de una manera practica todos los tipos de fotografia de 360 grados.


Descubrir que puede crear centenares de tours virtuales interactivos con la misma facilidad conque toma fotos con su camara.


Comprobar que con solo un click de su camara y otro click de su mouse puede crear un tour virtual interactivo de 360 grados a partir de la nada. Y completamente gratis!!!


Puede comenzar ahora mismo, aun si no tiene una camara



Crear Un Tour Virtual Ahora



Encuentrenos en Facebook y gracias por hacer click en Me gusta.