Cómo crear una visita guiada en tu web

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Seguro que en más de una ocasión has entrado en una web y sin hacer o seleccionar nada, lo primero que has visto son tooltips o cajas de información guiándote a través de su interfaz, botones o haciendo un recorrido a través de las funcionalidades de la págisna. Esta técnica tiene el nombre de visitas guiadas o tour web y es muy utilizada en páginas tipo: e-commerce, redes sociales, webs orientadas en principio a un público mayor o cualquier tipo de site que requiera seguir una serie de pasos.

Una forma sencilla de realizar visitas guiadas en una web es através de Codrops, un pequeño script en jQuery muy fácil de integrar en las páginas que abrirá una ventana modal en la que se mostrarán los mensajes de información.

Codrops-visitas-guiadas

Existen dos modos, uno automático que no requiere que el visitante realice ninguna acción ni con el teclado, ni con el ratón para que comiencen a aparecer en el sitio las primeras informaciónes y otro manual que requiere de la acción del visitante (avanzar/retroceder). Para seleccionar entre ambos casos solo hay que agregar una clase a cada elemento que vayamos a mostrar en el tour (tipo_1 o tipo_2)

<div class="box left">
    <h2 class="tour_1">Bienvenidos a nuestra web</h2>
    <p>Desde este botón podrás...</p>
</div>
Dentro del código anterior JSON object se pueden ajustar y cambiar los siguientes parámetros:
  • Nombre: la clase dada al elemento en el que desea que aparezca la información sobre herramientas.
  • Bgcolor: el color de fondo de la caja de descripción.
  • Color: el color del texto de información sobre herramientas
  • Texto: el texto dentro de la descripción.
  • Tiempo: si pasa a la siguiente acción de forma automática, será el tienmpo en ms para este paso.
  • Posición: la posición de la punta.

Puedes ver un ejemplo entrando en tympanus.net donde nada más acceder comenzará el tour guiado a través de su web.

 

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.