intro.js

Grazie a Intro.js è possibile avviare una sorta di “visita guidata interfaccia” alla scoperta delle varie funzionalità offerte dall’interfaccia del sito. È un plugin molto utile soprattutto quando si vogliono mettere in evidenza nuove funzionalità del sito, magari dopo l’aggiornamento di elementi dell’interfaccia, oppure, in fase di prototipizzazione, presentare al cliente le scelte fatte sull’interfaccia. Spesso sarà capitato di vedere funzionalità del genere apparse su Facebook o su altre applicazioni di Google, dopo aggiornamenti alle loro interfacce. Grazie a questo plugin, quindi, potremo creare un vero percorso step-by-step per l’utente, in cui verranno messe in evidenza le aree del sito e verrano date spiegazioni a riguardo.

Vediamo come implementarlo: Scaricate il plugin da questo link; Aggiungete il plugin al vostro HTML includendo i files INTRO.JS e INTROJS.CSS (se non avete necessità di modificare il plugin potete anche includere le versioni minified fornite). Se avete bisogno della compatibilità con le versioni antecedenti ad Internet Explorer 8 dovrete includere anche INTROJS-IE.CSS A questo punto bisognerà dare una successione degli elementi da evidenziare e una loro descrizione. Per far ciò dovremo utilizzare 2 attributi HTML5, ‘data-intro‘ e ‘data-step‘, in questo modo:

Fatto! A questo punto dobbiamo decidere in che modalità vogliamo che parta la “visita guidata”. Se vogliamo associarla al click di un bottone oppure all’ingresso nella pagina. Per la prima scelta scriveremo sul nostro bottone:   Mentre per la seconda scriveremo scriveremo sul tag body:

oppure in javascript window.onload = introJs().start()