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 JQuery



Los Tours Virtuales basados en JQuery no requieren ningun plugin instalado en el equipo del usuario y funcionan aun en tabletas tales como la iPad.


A diferencia de los Tours Virtuales en Java y Flash, los Tours Virtuales basados en JQuery dependen de una libreria de Javascript que se ubica en el servidor u otra ubicacion de manera que el equipo del usuario no necesita ninguna instalacion previa y no requiere para funcionar mas que un navegador. JQuery funciona en cualquier navegador, incluso en dispositivos del tipo Tableta como la iPad de Apple.

A pesar de estas importantes ventajas, la libreria de Jquery para transformar Panoramas en Tours Virtuales brinda prestaciones relativamente basicas. El movimiento de la imagen es algo irregular y los panoramas se desplazan de derecha a izquierda y viceversa pero lo hacen de manera plana, sin la correccion de perspectivas y el efecto envolvente que caracteriza principalmente a los visores basados en Java y Flash. Los unicos controles que admite son botones para indicar la direccion del giro y su interrupcion y reinicio. Como consecuencia, este sistema es adecuado para Panoramas Cilindricos como el siguiente, que es el que usaremos para esta demostracion :





La version que presentamos en esta pagina, sin embargo, es una modificacion sobre el codigo abierto de este script creado por Arnault Pachot, que suma cierto grado de interactividad al visor propiamente dicho. En esta version, ademas de los controles normales, es posible arrastrar lateralmente la imagen picando sobre ella con el cursor del mouse. Esta mejora es parcial ya que no funciona en Tabletas, sin embargo en ellas el visor de panoramas funciona normalmente con las prestaciones basicas de JQuery.

En dias en que el mercado informatico se abre rapidamente al uso de tabletas, crear una alternativa a las paginas basadas en Java y Flash destinada a los usuarios de tabletas se torna rapidamente una necesidad y por el momento JQuery es una de las mas adecuadas.



Presentacion Del Visor De Panoramas JQuery


La estructura de esta presentacion consta de cinco archivos a los que para este ejemplo ubicaremos todos juntos en una carpeta a la que denominaremos JQuery :



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


jquery.js

jquery.panorama.js

jquery.panorama.css

pagina.htm

panorama.jpg


Como siempre trabajaremos con dos programas abiertos simultaneamente. En una ventana de nuestro navegador tendremos a la vista la pagina web y en una o varias ventanas de un editor de texto abriremos los archivos de extension .js y .css si queremos modificarlos. Cada vez que introduzcamos un cambio en uno de estos archivos, despues de guardarlo actualizaremos la pagina web en el navegador para ver si los cambios realizados en los otros archivos se reflejan de manera satisfactoria en la pagina.


El archivo jquery.js es la libreria Javascript de JQuery utilizada para todas las aplicaciones basadas en este lenguaje, que complementa las instrucciones particulares a cada aplicacion. Para su uso normal no se debe editar nunca este archivo.




El archivo jquery.panorama.js es la instruccion especifica para crear el visor de panoramas, en este caso la modificacion creada por Arnault Pachot. En general es recomendable no editar la mayor parte de este archivo, con excepcion de algunas lineas cerca del comienzo donde se establecen los valores para algunas variables :



Significado De Las Variables


viewport_width indica en pixeles el ancho de la ventana del visor de panoramas. Su valor por defecto es de 600 pixeles.

speed señala la velocidad de rotacion y su valor por defecto es 20000.

direction define la direccion de rotacion inicial del Tour Virtual. Admite dos valores, right (derecha) o left (izquierda) siendo este ultimo su valor por defecto.

control_display define la permanencia en pantalla de los controles para el Tour Virtual. Si el valor establecido es yes los controles estan a la vista permanentemente, mientras que si el valor establecido es auto estos solo se muestran cuando el cursor del mouse se mueve sobre el area correspondiente a ellos. El valor por defecto es auto.

start_position establece una posicion inicial para la imagen diferente a la posicion por defecto en el extremo izquierdo de la misma. El valor se mide en pixeles de distancia.

auto_start admite dos valores : true para que el panorama gire automaticamente inmediatamente despues de cargarse o false para que el mismo se cargue y no gire.

mode_360 tambien admite dos valores : true para permitir el giro continuo de la imagen alrededor de los 360 grados o false para que los extremos no se junten. El primero de estos valores es el atributo por defecto.

loop_180 solo puede usarse en combinacion con un valor de false en el parametro anterior. En dicho caso, un valor de true para este atributo hara que la imagen panee automaticamente de izquierda a derecha y viceversa mientras que si se establece el valor false la imagen no se movera por si misma.



Para el ejemplo que ilustra esta pagina utilizaremos los siguiente valores :



/* =========================================================
// jquery.panorama.js
// Author: OpenStudio (Arnault PACHOT)
// Mail: apachot@openstudio.fr
// Web: http://www.openstudio.fr
// Copyright (c) 2008 Arnault Pachot
// licence : GPL
========================================================= */
(function($) {
$.fn.panorama = function(options) {
this.each(function(){
var settings = {
viewport_width: 450,
speed: 20000,
direction: 'left',
control_display: 'yes',
start_position: 0,
auto_start: true,
mode_360: true };


El archivo jquery.panorama.css es un archivo de estilos donde se establece la apariencia de los elementos que constituyen el Tour Virtual, tales como dimensiones del mismo y de los controles, fuentes, colores, etc :



Este es otro archivo que debemos configurar para dar a nuestro visor de Tours Virtuales el aspecto que convenga a nuestras necesidades : En el se definen clases y sub-clases de elementos y a cada una se atribuyen los valores deseados. Es conveniente experimentar modificando algunos de estos valores y viendo el resultado de cada modificacion en la pagina web actualizada en el navegador hasta encontrar la apariencia mas adecuada a cada caso. El contenido de este archivo para el ejemplo de esta pagina es el siguiente :



.panorama-viewport { position: relative;
    width: 100000px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-align: left; }
.panorama-container { position: relative;
    width: 100000px;
    margin: 0;
    padding: 0; }
.panorama-control { position: absolute;
    display: none;
    padding: 0;
    margin: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 30px;
    background: black;
    filter: alpha(opacity=50);
    opacity: .5;
    text-align: left; }
.panorama-control-left,
.panorama-control-right,
.panorama-control-pause { float: left;
    padding: 0;
    margin: 0;
    color: white;
    text-decoration: none;
    font-size: 20px;
    line-height: 30px;
    width: 33%;
    text-align: center;
    font-family: 'Arial',sans-serif }
.panorama-control-left:hover,
.panorama-control-right:hover,
.panorama-control-pause:hover { text-decoration: none; }
.panorama-control-pause { text-transform: uppercase; }
.panorama-panel { position: absolute;
    display: none;
    top: 0;
    right: 0;
    background: #009cff;
    filter: alpha(opacity=50);
    opacity: .5;
    color: white;
    padding: 4px; }
.panorama-panel h2 { font-size: 11px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    text-align: right; }
.panorama-panel ul { display: none; }
.panorama { position: relative;
    margin: 0;
    padding: 0;
    border: none; }


El archivo pagina.htm es la pagina web donde se inserta el Tour Virtual :



Este es el archivo que contiene todas la referencias a los demas archivos. Las referencias a los codigos externos, es decir los archivos de formato .js y .css deben ubicarse en el encabezado de la pagina entre las etiquetas <head> y </head>, mientras que en el cuerpo de la pagina, entre las etiquetas <body> y </body> en la ubicacion exacta donde se desee insertar el Tour Virtual debemos ubicar un elemento DIV delimitado por un par de etiquetas <div> y </div> agregando en la etiqueta de apertura la identificacion del elemento con una clase definida en el archivo de estilos .css, en este caso la clase page.

Dentro de este elemento DIV colocaremos la fotografia panoramica valiendonos de una simple etiqueta de imagen IMG a la que sin embargo agregaremos un atributo definido por otra clase tambien definida en la hoja de estilos, en este caso la clase panorama. De esta manera conseguiremos que la imagen no se muestre en su forma plana sino como Tour Virtual.

El ancho (width) definido en la etiqueta corresponde al ancho real medido en pixeles de la imagen panoramica utilizada mientras que el alto (height) es el alto que se define para la ventana del Tour Virtual :



<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.panorama.css"/>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="jquery.panorama.js"></script>
</head>
<body>
<div id="page">
<img src="panorama.jpg" class="panorama" width="1040" height="300"/>
</div>
</body>
</html>


El Tour Virtual creado se ve asi :




Para mas informacion sobre este script dirijase a la pagina de Arnault Pachot .




Aportes De Visitantes


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.