JavaScript  »  Articoli  »  DHTML 

Negli ultimi tempi le presentazioni, come forma di comunicazione, stanno uscendo dalle mura di università, scuole, aziende e congressi per farsi spazio nel web.

Questa piccola rivoluzione ha avuto luogo in buona parte grazie a Eric Meyer, che ha rilasciato S5, un sistema di presentazioni basato su HTML, CSS e Javascript.

S5 consente di preparare agilmente slideshow con un semplice editor di testo e di visualizzarli sul browser, svincolando così sviluppatori e utenza da software proprietari quali PowerPoint, Flash o Acrobat.

Recentemente Chris Heilmann ha proposto il suo sistema di presentazioni: DomSlides, che si presenta forse meno versatile ma molto più leggero e semplice rispetto a S5.

Anch'io mi sono cimentato nel realizzare sistema di presentazioni, con un obiettivo principale: la semplicità del codice e dell'uso. Ecco così Minislides, un sistema di presentazioni basato su HTML, CSS e Javascript.

In questo appuntamento vedremo il suo funzionamento a grandi linee e come realizzare presentazioni basate sul template di default. Nella seconda parte vedremo da vicino il Javascript e il CSS per personalizzare il template e crearne di nuovi.

Minislides

Vediamo subito l'esempio che accompagna l'articolo: si tratta una presentazione introduttiva a Minislides, realizzata con Minislides stesso.

Noterete che nell'angolo in alto a destra ci sono due bottoni che consentono la navigazione tra le diapositive e un contatore che indica la diapositiva corrente e il numero di diapositive totali. È possibile inoltre navigare tra le diapositive con i tasti cursore: la freccia indietro passerà alla slide precedente, quella avanti alla slide successiva.

Minislides si basa su una perfetta interazione dei tre livelli essenziali: HTML, CSS e Javascript, ciascuno con un compito specifico.

L'HTML si occupa dei contenuti, i CSS si occupano dell'aspetto mentre il Javascript si occupa della serializzazione. Tre livelli ben distinti, eppure volti a formare un'unità che è la presentazione stessa.

Prima di iniziare, due parole sulla compatibilità, che è decisamente buona: MiniSlides è stato testato con IE5, IE5.5, IE6, Opera 7.6, Firefox e Safari.

Da notare infine che nel caso Javascript fosse disabilitato sul browser dell'utente, verrà semplicemente mostrata la pagina con tutte le diapositive, senza la navigazione.

Come funziona

Una presentazione realizzata con Minislides ruota intorno a una singola pagina HTML. Se guardate il codice dell'esempio noterete che è molto semplice. Essenzialmente si compone di due parti: una sezione dichiarativa nell'head, e, ovviamente, i contenuti. La parte nell'head serve a linkare il foglio di stile e il Javascript:

<link rel="stylesheet" type="text/css" href="slides.css">
<script type="text/javascript" src="minislides.js"></script>
<script type="text/javascript">
StartShow("slides","back.png","fwd.png");
</script>

Nelle prime due righe del codice appena riportato vengono linkati nella pagina il CSS e la libreria Javascript per l'esempio. Un secondo script incorporato nella pagina invoca la funzione StartShow, riportata in grassetto, che è l'unica riga che andrà eventualmente cambiata. Tra parentesi, separati da virgole e indicati tra doppi apici abbiamo nell'ordine i tre parametri che sono:

• ID dell'elemento che conterrà le diapositive
• Immagine per il tasto indietro
• Immagine per il tasto avanti

I file slides.css, minislides.js e le due immagini che nel caso del template di default sono back.png e fwd.png andranno sistemate preferibilmente nella stessa cartella della pagina HTML, oppure andranno indicati con il relativo percorso.

Altri articoli

Altre guide

Altre newsletter