Tutorial.js is a stand alone plug-in based on MooTools that weights about 1.4kb. It allows you to create professional presentations (for tutorial’s purposes, for example) of an infine number of tabs. Moreover it requires only a line of Javascript and the markup is all done by HTML.
Below in this article you can find how to use Tutorial.js, a demo and the download link.

Molte volte ho avuto la necessità di creare tutorial e presentazioni per i motivi più svariati, oltre che per applicazioni personali. Le solite fixed application mi avevano davvero annoiato, volevo qualcosa di leggerissimo e super veloce per adempire a questo compito.

Per questo motivo ho ideato il plug-in Tutorial.js, un file dall’incredibile peso di 1.4kb.
L’applicazione contiene la classe Tutorial, che permette appunto di creare presentazioni step by step di un numero illimitato di lezioni.
Il contenuto che potete inserire in ogni lezione è senza confini: basta poco HTML e il gioco è fatto, nessuna riga di Javscript aggiuntiva a parte quella che crea l’istanza.

Il file è rilasciato sotto licenza GNU GPL, ed è compatibilie e perfettamente funzionante con tutti i maggiori browser in circolazione: Internet Explorer 6, Internet Explorer 7, Firefox (qualsiasi), Safari 2+ e Opera 9+.

Attualmente Tutorial.js è un’applicazione stand alone e non richiede altro in aggiunta alla libreria MooTools.
Ma tutte le applicazioni che possono avere una logica integrativa e modulare vengono inserite al’interno della libreria moo.rd. Su richiesta, posso ampliare notevolmente le caratteristiche offerte dal plug-in (come la navigazione tramite tastiera, la navigazione tramite thumbnails, possibilità di personalizzazione e cosi via) ed integrarlo all’interno di moo.rd. Per questo mi rivolgo a tutti gli utilizzatori ponendo questa domanda.

Utilizzare Tutorial.js
Come accennato sopra, l’unica riga di Javascript che dovete utilizzare è quella che crea l’istanza:

1
2
3

window.addEvent('domready', function() {
	var tutorial = new Tutorial('tutorial');
});

Il markup HTML è dei più semplici possibili. Basta creare un container con id “tutorial” e tanti sotto elementi con id “step” quante sono le lezioni della vostra presentazione. Con i link dai class name “prev” e “next” è possibile navigare in ogni singola lezione, rispettivamente alla precedente ed alla successiva. Come titolo delle lezioni ho infine utilizzato un elemento h3. Ecco un esempio:

1
2
3
4
5
6
7
8
9

<div id="tutorial">
  <div class="step">
    <h3>Step1: First Step</h3>
    <div>
    Description of the first step...
    <a class="prev" href="#">prev</a>  <a class="next" href="#">next</a>
    </div>
  </div>
</div>

Niente di più semplice.

Demo e Download
Ecco ora la demo in azione: un semplice tutorial composto da 4 lezioni per creare un oggetto Class con MooTools. Il file è disponibile nella versione compressa con il packer di Dean Edwards.

Demo Download