Con questo CODE-IT impareremo ad inserire una demo o un tutorial simile ad uno slideshow di Powerpoint nelle pagine HTML. Per farlo bastano poche righe di javascript e un minimo di competenze di fogli di stile. Inseriremo 5 slide che si potranno scorrere anche solo usando i pulsanti freccia della tastiera, vediamo insieme come fare.

La nostra pagina dovrà essere progettata come un grande layer contenente i vari step del nostro tutorial. Ogni step, o slide, è a sua volta un div di classe step. Il contenitore invece avrà la proprietà id uguale a tutorial.

Ext.js

div#tutorial {
	width:40%;
	border:1px solid #000000;
	background-color:#cecece;
	background-image:url(1.jpg);
	margin:auto;
    height:70%;
    min-height:70%;
	overflow:hidden;
	padding-bottom:4px;
	font-size:16px;
}

div#tutorial div.step {
	background-color:#cecece;
	background-image:url(1.jpg);
    color:#121212;
	text-align:left;
	overflow:hidden;
}

div#tutorial div.step h3 {
	background-color:#cecece;
	background-image:url(bg.gif);
	background-repeat:repeat-x;
	color:#344345;
	width:100%;
	height:32px;
	padding-top:8px;
	font-size:16px;
    text-align:center;
	margin:0px 0px 10px 0px;
}

div#tutorial div.step div {
	width:90%;
	margin:10px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:0.8em;
}

div#tutorial div.step div strong {
	color:#3B6FA3;
}

Dovremo quindi configurare il nostro spazio tutorial con uno sfondo, e in seguito settare l'aspetto dei diversi step. Nel nostro caso abbiamo scelto di dividere i nostri step in tre sezioni: titolo, corpo e codice. Diamo al layer con id uguale a tutorial e al corpo degli step la stessa immagine di sfondo. Al codice invece daremo uno sfondo nero e coloreremo le scritte di verde in modo da distinguerlo dal testo normale.

div#tutorial div.step pre {
	text-align:left;
	display:block;
	width:100%;
	padding:20px;
	margin:30px auto;
	background-color:#000000;
    color:#ccffcc;
	border:1px solid #999999;
	font-size:0.9em;
}

Infine andiamo a descrivere i link che puntano alle slide precedenti e successive. Utilizziamo per tutti due classi che chiameremo prev e succ.

div#tutorial div.step a {

}

div#tutorial div.step a.next:link, div#tutorial div.step a.next:visited, div#tutorial div.step a.next:active {
	color:#00000a;
}

div#tutorial div.step a.next:hover {
	color:#1111af;
}

div#tutorial div.step a.prev:link, div#tutorial div.step a.prev:visited, div#tutorial div.step a.prev:active {
	color:#00000a;
}

div#tutorial div.step a.prev:hover {
	color:#1111af;
}

La parte delle nostre slide in cui viene esposto il codice utilizza un tag speciale che viene inserito nei siti per formattare parti di testo complesse utili a mostrare istruzioni in un qualsiasi linguaggio di programmazione. Questo tag prende il nome di "pre". Per esempio, nei nostri code-it, nel tab trascrizione, questo tag speciale evidenzia in giallo le parti di codice html e javascript degli esempi che esponiamo di volta in volta.

 <pre>
...
div#tutorial div.step {
	background-color:#cecece;
	background-image:url(1.jpg);
    color:#121212;
	text-align:left;
	overflow:hidden;
}
...
</pre>

Un'altra particolarità che possiamo notare è l'utilizzo delle keyword < e > (fabio prn: and elleti e and giti) utili a rappresentare i simboli minore e maggiore all'interno di una pagina html. E' obbligatorio usare questi simboli, altrimenti il nostro browser potrebbe confonderli con quelli di intestazione dei tag e non visualizzerebbe correttamente il testo della nostra pagina.

Abbiamo scelto di rappresentare i link successivo e precedente, che servono a collegare le diverse slide tra loro, con due frecce simboleggiate da un trattino e i simboli maggiore e minore. Per far funzionare il nostro tutorial, abbiamo dato a tutti i link la stessa classe prev e succ, in modo che sia il javascript a iniettare successivamente gli eventi di click sui link stessi.

Il titolo delle nostre slide è inserito all'interno di un tag che si chiama h3. In html abbiamo diversi tag che identificano i titoli, la acca sta per header, i numeri per la rilevanza. H1 e' il titolo principale, h2 e' il sottotitolo e cosi' via. Grazie ai fogli di stile, abbiamo riscritto la formattazione standard dei titoli h3 per questa pagina. In particolare possiamo notare come sia stato semplice inserire una minuscola immagine di background, che troverete nel pacchetto allegato al CODE IT, e farla ripetere orizzontalmente per tutta la durata del nostro titolo. Questa tecnica è molto utile in termini di performance perchè l'immagine di sfondo pesa molto poco e il browser la scarica più rapidamente. E' utile notare che, quando usiamo un'immagine di sfondo, è buona norma mettere un colore uniforme simile all'immagine, in modo che i browser che non interpretano le immagini o di vecchia generazione, riescono comunque a visualizzare correttamente il testo.

Arriviamo all'unica riga del nostro codice javascript. E' possibile realizzare la nostra demo con cosi' poco codice perchè abbiamo utilizzato la libreria MooRD. Il plugin Tutorial ci viene in aiuto e possiamo cosi' vedere come il codice che prima compariva come una serie di slide, una di seguito all'altra, si trasformino automaticamente in uno slideshow.

var tutorial = new Tutorial('tutorial');

Esistono svariati framework come Mootools e MooRD per creare slideshow. In questo caso volevamo mostrare un tutorial rapido, ma sfogliando gli effetti delle librerie javascript è possibile notare effetti di transizione sempre più vicini a PowerPoint e alle presentazioni a cui siamo abituati.