Recomendamos flash templates.

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

Online : Pagina de Consultas

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...


Novedad : Utilice nuestro Directorio gratuito para dar a conocer sus Productos y Servicios de Fotografia Multimedia.


Publicar Panoramas Interactivos En Otros Dispositivos Digitales



En esta pagina veremos como construir una visita virtual interactiva para iPhone, iPad y iPad Touch.


Ante la creciente difusion de dispositivos alternativos para navegar en Internet es importante poder compartir sus panoramas de 360 grados en soportes tales como tabletas y telefonos celulares para que esten disponibles para el mayor numero posible de usuarios. A continuacion veremos como utilizar un script compatible con los tres dispositivos mencionados. Para nuestro ejemplo utilizaremos el siguiente panorama esferico :





El script que implementaremos pertenece a Ninoslav Adzibaba, quien lo ofrece gratuitamente para uso personal aunque sugiere hacer una donacion a su sitio para quienes lo utilicen con fines comerciales.

A medida que el standard Html 5 compatible con diferentes tipos de dispositivos va ganando presencia en la web, poco a poco se van publicando nuevos scripts para contenidos interactivos basados en este lenguaje. El script que enseñaremos en esta pagina funciona excelentemente en iPhone, iPad y iPad Touch pero no funciona en Pc's ni otros telefonos celulares. Sin embargo permite configurarlo de manera tal que quienes accedan a traves de dispositivos no compatibles sean redirigidos inadvertidamente hacia paginas compatibles.



Transformacion De Panoramas En Caras De Cubo


Para funcionar este script requiere que los panoramas se presenten en formato cubico, es decir, proyectados sobre las seis caras de un cubo virtual. Un panorama esferico transformado a caras de cubo las ocupa en su totalidad, mientras que panoramas cilindricos solo las cubren parcialmente y disparos de ojo de pez cubren aproximadamente la mitad de la superficie del cubo. Para transformar panoramas planos a formato cubico utilizaremos una aplicacion gratuita de Thomas Rauscher Pano2QTVR. Iniciado el programa, daremos inicio a nuestra tarea haciendo click en Crear proyecto nuevo :





Como primer paso el programa muestra un cuadro de dialogo que requiere guardar un registro del nuevo proyecto. Seleccione la ubicacion que prefiera y haga click para seguir adelante :





En la pestaña Proyecto de la ventana principal de Pano2QTVR podemos ver el nombre de proyecto y la ruta de acceso al archivo. Puesto que nos proponemos transformar un panorama esferico haremos click para activar la opcion Panorama Equirectangular como Tipo de proyecto. Para seleccionar el archivo a transformar haremos click en el boton correspondiente junto al campo Imagen equirectangular :





Se abre entonces un cuadro de dialogo donde podemos seleccionar la ubicacion y el archivo esferico del que partiremos :





Despues de aceptar, volvemos a ver la ventana principal del programa donde ahora aparece escrita la ruta de acceso al archivo recien seleccionado. Ya estamos listos para iniciar la transformacion haciendo click en el boton Transformar en cubo :





Se abre entonces un nuevo cuadro de dialogo correspondiente a la transformacion con algunas opciones :





Optamos por crear las caras del cubo en formato .jpg y como prefijo para la denominacion de las mismas elegimos 1024 pues como veremos mas adelante esa denominacion nos sera util a la hora de crear nuestro Tour Virtual :





Luego de aceptar debemos reconfirmar una vez mas nuestra conformidad con el inicio de la conversion :





Mientras dura el proceso de la conversion, la ventana de Transformacion permanece abierta. Simultaneamente, en la ventana principal de Pano2QTVR ha aparecido una nueva pestaña llamada Consola que muestra en tiempo real los procesos internos de la conversion :





Al terminar el proceso el cuadro de dialogo Transformacion se cierra al aigual que la pestaña Consola. Las caras de cubo han sido credas en el mismo directorio donde se encontraba el panorama esferico original :





Las imagenes creadas, como podemos ver, miden 1272 pixeles de lado. El script que utilizaremos, sin embargo, requiere dimensiones diferentes: un grupo de caras de cubo de 1204 pixeles de lado y otro similar para la vista previa con caras de 480 pixeles de lado :





Necesitamos, entonces, acortar las dimensiones de los archivos creados. A pesar de no ser el programa mas practico para esta tarea, utilizaremos el editor de imagenes Gimp que hemos venido utilizando en gran parte de este tutorial. Comenzaremos por arrastrar un icono de imagen a la ventana de Gimp para abrir el archivo :





Vemos la imagen abierta :





Desplegando el menu Imagen / Imagen haremos click en Escalar Imagen / Scale Image :





En el cuadro de dialogo que se abre vemos las dimensiones actuales de la imagen :





En su lugar estableceremos las dimensiones requeridas 1024x1024 pixeles :





Despues de hacer click para aceptar veremos como la imagen se reduce :





Desplegando el menu Archivo / File haremos click en Guardar / Save :





Se abre un cuadro de dialogo para elegir el porcentaje de compresion del archivo reducido. Para no perder calidad optamos por guardarlo al 100 por ciento :





Luego de guardar el cambio, podemos comprobar en la ventana donde vemos las caras de cubo que la imagen procesada ahora mide los 1024 pixeles de lado que se requieren :





A continuacion repetiremos este proceso para las cinco caras de cubo restantes :





Al concluir, tenemos las seis caras de cubo que conforman el panorama, midiendo los 1024 pixeles de lado que requiere el script y nombradas de acuerdo a la convencion que tambien utiliza el script. Es importante señalar que la numeracion que complementa el nombre base de los archivos sigue la misma logica que el script que utilizamos : las primeras cuatro imagenes corresponden a vistas laterales consecutivas, mientras que la quinta muestra el cenit y la sexta el nadir :





Aun nos falta una segunda tanda de caras de cubo, identica a la anterior pero de dimensiones mas reducidas para ser mostradas mientras las imagenes mas pesadas todavia estan siendo descargadas desde la web. Podemos simplemente seleccionar los archivos de imagen y haciendo click con el boton derecho del mouse desplegar el menu de opciones para elegir Copiar / Copy :





Desplegando el menu Editar / Edit haremos click en Pegar / Paste :





De esta manera hemos creado copias de todas las imagenes :





Para poder utilizarlas con nuestro script necesitamos renombrarlas de acuerdo a una convencion similar a la de las imagenes mas grandes, en este caso, utilizando como raiz para sus nombres la medida de un lado de cara de cubo, 480 pixeles. Es importante no cambiar la terminacion numerica del nombre de cada archivo para conservar la coherencia del conjunto :





A continuacion, utilizaremos esta ultima serie de imagenes para repetir el proceso de remapeo de las fotografias. Comenzamos por abrir una de ellas :





Desplegando el menu Imagen haremos click en Escalar Imagen / Scale Image :





Se abre el cuadro de dialogo con las dimensiones iniciales de la imagen es decir 1024 pixeles de lado :





En su lugar introducimos las dimensiones de deseadas, 480x480 pixeles :





Despues de aceptar vemos que la fotografia se ha achicado. Haremos click en el boton cerrar para finalizar la transformacion :





Un cuadro de dialogo nos preguntara si guardar o no los cambios antes de cerrar el archivo. Haremos click en Guardar / Save para que se abra el ultimo cuadro de dialogo con las opciones de compresion de imagen :





Elegiremos el grado de compresion que nos parezca razonable y haremos click en Guardar / Save :





Lo mismo haremos con las cinco imagenes restantes :





De esta manera ya tenemos los dos grupos de caras de cubo que conforman dos versiones a distinta resolucion del panorama esferico de origen. Estamos en condiciones de crear el Tour Virtual :



Presentacion Del Resto De Los Archivos Y El Script


Una vez que ya tenemos los panoramas convertidos a formato cubico, crear los Tours Virtuales es una tarea sencilla. Solo necesitamos crear una carpeta y descargar alli adentro un grupo de carpetas y archivos, y reemplazar los archivos de imagenes por nuestras propias caras de cubo. Para crear mas de un Tour Virtual simplemente crearemos mas carpetas identicas. Haga click para descargar VR5 Pano Viewer desde nuestro sitio o desde su Ubicacion Original.

Para nuestro ejemplo, descomprimiremos el archivo descargado a una carpeta de nombre esfera y veremos que en un primer nivel se trata de dos directorios y un archivo :





Entraremos dentro de la carpeta vr_files y veremos que alli adentro se encuentran otras tres carpetas y otro archivo. Entraremos a la carpeta cube_faces :





Vemos que alli adentro se encuentran doce archivos de imagen, todas cuadradas, seis de ellas 1024 pixeles de lado y las otras seis de 480 pixeles de lado. Se trata en efecto, de dos grupos de imagenes que componen cada uno un panorama esferico en alta y en baja resolucion, similares a los que acabamos de crear utilizando Pano2QTVR :





Procederemos a arrastrar o copiar dentro de la carpeta cube_faces los archivos que creamos mas arriba :





Un cuadro de dialogo nos pedira confirmacion antes de proceder al reemplazo de unas imagenes por otras :





Completado el reemplazo subiremos un nivel hasta la carpeta vr_files donde se encuentra el archivo config.js :





La edicion de este archivo nos permite personalizar la apariencia y el funcionamiento de nuestro Tour Virtual. Las variables editables del codigo son las siguientes :



Significado De Las Variables


vrTitle, vrSubTitle y vrDescription definen titulo, subtitulo y descripcion que se hacen visibles cuando el Tour Virtual toma orientacion vertical.

startPan señala un angulo de paneo inicial al cargarse el panorama.

startTilt define un angulo de inclinacion vertical al cargarse el Tour Virtual.

startZoom es el valor inicial del zoom al iniciarse el Tour Virtual y comprende un rango que va de 0.6 a 1.4.

useLimits admite dos valores : false se utiliza para habilitar la proyeccion esferica completa de panoramas equirectangulares mientras que true indica que se trata de un panorama parcial.

TopLimit, BottomLimit, leftLimit y rightLimit se usan en conjuncion con un valor de true en la variable anterior y señalan los limites de desplazamiento medidos en grados respectivamente hacia arriba, hacia abajo, hacia la izquierda y hacia la derecha.

enableAutoButton habilita el boton para iniciar y detener la rotacion automatica del Tour Virtual.

autoRotateOnStart y autoRotateOnIdle permiten habilitar o deshabilitar la rotacion automatica del panorama respectivamente al cargarse el Tour Virtual o al cesar la accion del usuario sobre el mismo.

autoRotateDelay define un tiempo de espera medido en segundos antes de comenzar la rotacion automatica.

enableSound habilita y deshabilita el sonido de fondo y solo funciona en iPad mientras se encuentren online.

flashPage es una opcion muy importante. Permite reemplazar la pagina por defecto que se muestra cuando se accede a la ubicacion del Tour Virtual desde un dispositivo no compatible, tal como una PC, por otra pagina que puede ser el mismo Tour Virtual en un entorno compatible tal como Flash, Java u otros.

useLogo, useOfflineInfo y linkLogo habilitan la aparicion de un logo con un vinculo en un extremo del Tour Virtual. Asimismo linkLogoURL y urlConfirm permiten reemplazar el vinculo original por uno propio, sin embargo el autor del script solicita se considere una donacion a su sitio si se elimina el vinculo que conduce a el.

bgdColor es la definicion del color de fondo de la pagina.

informWhenOfflineAvailable habilita o deshabilita la aparicion de una notificacion cuando la informacion esta disponible en cache para el uso del Tour Virtual en modo offline (solo funciona en Safari).

showNotifications permite habilitar y deshabilitar las notificaciones cuando se alcanza los limites del panorama, zoom, etc.



A continuacion el codigo del archivo config.js ya editado para mejor funcionamiento de acuerdo a nuestro ejemplo :



/* IMPORTANT: Dont USE character ' - if you need it for text use \' (slash before ') or html code ’ */
/* --- CONTENT ---------------------------------------
Leave it blank if you dont need it. You can use HTML code for styling. If subtitle and description are set, this content is displayed in portrait mode.
i.e.
var vrTitle = 'Lorem ipsum dolor sit amet';
var vrSubTitle = 'by Ninoslav Adzibaba';
var vrDescription = 'Duis et nunc velit, eu molestie lorem. Morbi vel risus urna... '; */
var vrTitle = 'Tour Virtual Para Tabletas';
var vrSubTitle = '360 Facil';
var vrDescription = 'Ejemplo para el Tutorial de 360 Facil';
/* --- START VIEW ------------------------------------ */
var startPan = 13; /* left is negative, right is positive value */
var startTilt = -2;
var startZoom = 1.0; /* 0.6 - 1.4 */
/* --- PARTIAL PANORAMA ------------------------------ */
var useLimits = false;
var TopLimit = 60; /* 0 - 90 */
var BottomLimit = -60; /* 0 - -90 */
var leftLimit = -120; /* 0 - 180 */
var rightLimit = 120; /* 0 - 180*/
/* --- AUTO ROTATE ----------------------------------
Auto rotate, returns view to horizont and sets zoom to 1 */
var enableAutoButton = true; /* Auto rotate button, if clicked overrides autoRotateOnIdle */
var autoRotateOnStart = false;
var autoRotateOnIdle = false;
var autoRotateDelay = 15; /* seconds, works with Rotate on start or Rotate on idle. */
/* -------------------------------------------------- */
/* --- BACKGROUND AUDIO -----------------------------
Background sound is available only on the iPad, if browser is online.
Overwrite sound.mp3 in folder "vr_files/sound"
var enableSound = true; */
var enableSound = false;
/* --- ALTERNATIVE FLASH CONTENT --------------------
link to Flash version, leave it blank if you don't need it. eg.:
var flashPage = 'http://www.yoursite.com/pano_name.html' */
var flashPage = 'http://www.360facil.com/contenidos/creador-de-tours-virtuales-online/esp.paginacontourvirtualgrande.php?image_id=2';
/* --- LOGO ------------------------------------------
Please leave VR5 logo and link or consider donating */
var useLogo = true;
var useOfflineInfo = true; /* works with useLogo = true */
var linkLogo = true;
var linkLogoURL = 'www.vrhabitat.com';
var urlConfirm = 'Open VRhabitat.com?';
/* --- OTHER ------------------------------------- */
var bgdColor = '#FFFFFF'; /* Background color of the page */
var informWhenOfflineAvailable = true; /* Notification when Safari if finished caching the files for offline use */
var showNotifications = true; /* Notifications about pano limits, zoom limits etc. */
/* DO NOT change next lines */
var consoleLog = false;


Hemos destacado en color rojo las modificaciones que hemos introducido sobre el codigo original descargado desde adentro del archivo vr5.zip. El Tour Virtual ya esta creado. Solo resta subir la carpeta completa a su futura ubicacion en Internet. Utilice su programa favorito de FTP o suba los archivos desde el Panel de Control de su alojamiento Web cuidando de no alterar la estructura de archivos y carpetas :





El Tour Virtual ya funciona. Haga click en la imagen para comprobarlo. Recuerde que solo puede ser visto y navegado desde un iPhone, iPad o iPad Touch. Si accede a esta ubicacion desde su PC, sera redirigido a la pagina que hemos definido en la variable flashPage, en este caso una creada en nuestro Creador De Tours Virtuales Online que incluye un Tour Virtual Del Mismo Panorama Esferico En Flash :





La funcionalidad del script es la que se espera para este tipo de dispositivos. El marco se reorienta automaticamente al cambiar la posicion y el panorama es navegable con el movimiento de un dedo en contacto con la pantalla. Es posible hacer Zoom para alejar o acercar la imagen aproximando o separando los dedos de la mano siempre en contacto con la pantalla :





La edicion de las variables en el archivo config.js hace posible crear Tours Virtuales para iPhone, iPad y iPad Touch con Panoramas Esfericos, Disparos de Ojo de Pez y Panoramas Parciales. En todos los casos resulta imprescindible la conversion previa del panorama a caras de cubo o formato cubico.

Encuentre mas informacion sobre este script en el sitio de su creador Ninoslav Adzibaba en .





De esta manera completamos el Tutorial de Fotografia de 360 Grados. Hasta aqui hemos aprendido todos los sistemas de fotografiar panoramas y la manera de combinar las fotografias obtenidas y transformarlas en Tours Virtuales interactivos utilizando nuestros programas favoritos, todos ellos gratuitos. Estos no son, sin embargo, las unicas opciones disponibles. Para conocer otros programas, tanto comerciales como gratuitos, que sirven a los mismos fines con otras herramientas lo invitamos a conocer nuestra seccion acerca de software.




Aportes De Visitantes


Alex (alexestudio86@gmail.com) dice :

Muchísimas gracias por el tuto, esta genial y super fácil, una pregunta, habría forma de hacerlo pero que solo se desplace a la dera o izquierda? esque las fotos que tengo son panorámicas pero no cubren el techo, muchas gracias de antemano y felicidades por ésta excelente página.

URL : www.alexestudio86.blogspot.com


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

Muchas Gracias a ti, Alex. Puedes conseguir lo que deseas editando en el archivo configuracion.js los parametros var TopLimit y var BottomLimit. El primero admite valores entre 0 y 90 grados y es el limite de desplazamiento vertical hacia arriba y el segundo, con valores entre 0 y -90 es el limite de desplazamiento hacia abajo. No tenemos una iPad a mano para comprobarlo ahora pero es probable que de cualquier manera debas completar la imagen pegando tu panorama cilindrico sobre una base de dimensiones 2x1 imitando a un panorama esferico. Alternativamente puedes probar Pano2VR que admite tanto panoramas esfericos como cilindricos (ve la URL adjunta al comentario). En el capitulo software/aplicaciones encuentras otras aplicaciones para este tipo de dispositivos, aunque aun no hemos tenido tiempo de explorarlas. Buena suerte y saludos.

URL : www.360facil.com/esp/panorama-software-publicacion-flash-comercial-pano2vr.php


Alex (alexestudio86@gmail.com) dice :

Hola, solo pase a darte las gracias por todo, excelente explicación y excelente página, saludos.

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.