SummArg | Cursos y recursos para webmasters

01/07/2011

Visitas guiadas en un website con la librería Guiders.js

Hace un tiempo vimos un método para guiar al usuario en un website utilizando jQuery. En este caso utilizaremos un plugin llamado Guiders.js que nos permite añadir varios tooltips que tienen por finalidad ir guiando a nuestros visitantes paso a paso.

Tras la descarga de los archivos, debemos insertarlos en nuestro documento. El archivo readme.html tiene un demo para ayudarlos.
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="guider.js"></script>
<link rel="stylesheet" href="guider.css" type="text/css" />

Luego colocamos un elemento con id #clock, que mostrará un reloj.
<span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
<br />
<img src="clock.gif" width=150 height=150 />
</span>

Y antes de la etiqueta de cierre </body>, cargamos el primer paso de la guía.
<script type="text/javascript">
guider.createGuider({
buttons: [{name: "Next"}],
description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
id: "first",
next: "second",
overlay: true,
title: "Welcome to Guiders.js!"
}).show();
</script>

Con lo que obtendremos el inicio de nuestro recorrido guiado:

Ahora estamos en condiciones de añadir un segundo paso. En el primer paso indicamos en el parámetro “next:second” que el siguiente paso sería el id “second“.
<script type="text/javascript">
guider.createGuider({
attachTo: "#clock",
buttons: [{name: "Close"},
{name: "Next"}],
description: "For example, this guider is attached to the 12 o'clock direction relative to the attached element. The Guider.js API uses a clock model to determine where the guider should be placed.<br/><br/>Attaching a guider to an element focuses user on the area of interest.",
id: "second",
next: "third",
position: 12,
title: "Guiders are typically attached to an element on the page."
});
</script>

Y resultará en el siguiente cuadro:

Descargar Guiders.js | visto en optimizely

Dejar un comentario

  1. Yo estoy usando el mismo plugin y no soy capaz de tener un elemento (En este caso el reloj) y que al abrir la página al darle click salga la caja con el comentario.
    Según el manual pone que habría que poner un link con #guider:iddelguider

    pero cuando lo hago en mi web:

    ejemplo.es/index.html#guider:second
    No funciona pero si queda reflejado en la dirección del navegador, sin embargo si refresco la página si funciona… tenéis idea de por qué es esto???

  2. Nekko

    Hola mrglean!

    La url debe construirse con un signo igual y luego el ID del paso. En tu caso posiblemente no funcione porque utilizás dos puntos.

    Fijate así: pagina.html#guider=first

  3. Perdón por el error, si es verdad que con dos puntos no sale tiene que ser con el igual, pero aún así no me sigue apareciendo…

    cuando haces click en la imagen vinculante a esta dirección con la #guider=second no hace nada pero si aparece en la barra de dirección, si actualizas la página si aparece…

    Sabes por qué puedes ser???

    Muchas gracias Nekko

  4. Nekko

    La verdad no sé que será. Yo pruebo ir directamente al cuarto paso en el ejemplo del ejercicio README.html#guider=fourth y puedo hacerlo desde una ventana nueva y sin actualizar (desde FF4 y Chrome).

    Se me ocurre que quizás si colocaste las llamadas al script al final del documento, puedas probar de colocarlas en el y ahí nuevamente probar.

Dejar un comentario