Corsi on-line

Guide passo passo con Intro.js

Quando un visitatore giunge per la prima volta in un sito Web o nella pagina Internet dedicata ad un prodotto o ad un servizio specifico è necessario mettere a sua disposizione una demo che permetta di visualizzare le features fornite a corredo; disporre di informazioni dettagliate rappresenta un incentivo all’acquisto, al download di un un’applicazione o all’esecuzione di una determinata azione come per esempio un’iscrizione o la compilazione di un form in una landing page.

introjs

Intro.js è una soluzione basata su JavaScript che consente di realizzare delle guide passo passo (step-by-step) attraverso cui esporre in modo esauriente le caratteristiche e le funzionalità del contenuto che si intende descrivere, presentare e promuovere; uno dei vantaggi derivanti dall’utilizzo di questo script riguarda il fatto che esso è stato concepito per realizzare in modo semplice e veloce demo estremamente user-friendly.

Intro.js potrà essere impiegato sia per creare intro finalizzate al Web che per per guide introduttive da consultare tramite dispositivi mobili, garantendo in ogni caso un livello adeguato di responsività alle diverse diagonali dei display. L’applicazione si segnala anche per le dimensioni estremamente contenute, essa infatti è composta soltanto da due file GZippati e minificati: un file “.js” da appena 10 Kb, contenente il codice client side, e un foglio di stile da appena 2.5 Kb contenente le regole di stile CSS.

Le guide realizzate con questa soluzione supporteranno la navigazione tramite mouse o tastiera, si potrà adattare l’output prodotto al tema del proprio sito Internet o della propria Web application e sfruttare un elevato livello di compatibilità cross-browser che consentirà di ottenere un rendering ottimale su tutti i programmi più utilizzati per la navigazione in Rete: Google Chrome, Mozilla Firefox, Opera, Safari e persino alcune versioni più datate di Internet Explorer.

Distribuito sotto licenza Open Source tramite il code hosting di GitHub, per il suo utilizzo Intro.js prevede innanzitutto l’inclusione dei file intro.js e introjs.css; fatto questo si dovranno aggiungere i riferimenti data-intro e data-step agli elementi HTML tramite l’attributo data-hint:

<a href='http://blog.mrwebmaster.it' data-intro='Ciao! Scopri i vantaggi del nostro prodotto con questa guida passo passo.'></a>

Ora non resterà che chiamare la funzione JavaScript per il lancio dell’applicazione:

introJs().start();

Gli sviluppatori di Intro.js mettono a disposizione anche una serie di template liberi e gratuiti da personalizzare per l’inclusione nei propri progetti.

Via Intro.js

Post correlati
I più letti del mese
Tematiche