Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Chardin un forma simple de mostrar instrucciones

Chardin un forma simple de mostrar instrucciones 05.SEP.13

Alvaro José Rios Ch
Fundador WebBizarro

Actualmente tener una visita guiada de tu aplicación o sitio web es muy útil cuando necesitas mostrar una nueva característica o enseñar a tus usuarios a usar tu aplicación, Chardin js es un plugin de Jquery muy simple de usar y que te permite mostrar la ayuda de una forma elegante, que al mismo tiempo es muy simple de implementar.

Les dejo el código en mi github para que lo revisen 

Para usar la librería solo deben importar el css y js que pueden descargarlo en el siguiente link, además de Jquery por supuesto.

<link rel="stylesheet" type="text/css" href="css/chardinjs.css" media="screen" />
<script 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="js/chardinjs.js"></script>

En nuestro caso colocaremos un texto de ayuda a una imagen y a un bloque texto, así que colocaremos el siguiente html.

<img src="images/Mario8BitSprite.png" data-intro="Una excelente imagen del clasico mario del sistema NES" data-position="right" />
    		
<div data-intro="Un pequeño texto sacado de la Wikipedia" data-position="left">
Super Mario es un videojuego de plataformas, diseñado por Shigeru Miyamoto, lanzado el 13 de septiembre de 1985 y producido por la compañía Nintendo, para la consola Nintendo Entertainment System (NES).
</div>

Puedes notar que he colocado los atributos data-intro y data-position, y sí como puedes intuir estos son el texto a mostrar en la ayuda y la posición en que lo mostrará.

Chardin tiene algunos métodos que te permitirán mostrar o ocultar la ayuda.

start para mostrar la ayuda.

stop para detenerlo.

toggle para alternar entre mostrarla y ocultarla.

Nosotros usaremos start para mostrarla al cargar la página.

<script>
$(document).ready(function(){
    $('body').chardinJs('start');
});
</script>

Y eso es todo obtenemos una bonita forma de mostrar un texto de ayuda para tus aplicaciones web de una forma muy sencilla.