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.
Ora non ci resta che passare ai contenuti, e in particolare alla loro marcatura per realizzare le presentazioni. Se osservate il codice HTML dell'esempio, noterete che si sono usati div, paragrafi, liste e più in generale markup semantico e minimale, senza l'ausilio di tabelle. In particolare, la struttura portante dello slideshow è realizzata attraverso i div. Vediamo l'HTML essenziale:
<body>
<div id="header">
<h1>Qui il titolo</h1>
</div>
<div id="slides">
<div>
<!-- prima diapositiva -->
</div>
<div>
<!-- seconda diapositiva -->
</div>
<div>
<!-- e così via ... -->
</div>
</div>
</body>
Dopo il div id="header" segue il div id="slides" che è il contenitore principale della presentazione. È importante che l'id di questo elemento si accordi con il primo parametro della chiamatajavascript incorporata nella pagina che abbiamo introdotto poco fa.
All'interno del div con id="slides", ogni diapositiva è racchiusa in un div. Questi div vengono automaticamente rilevati da Javascript, che oltre a renderli in forma di presentazione si occuperà di numerarli così da consentirne la serializzazione. Ciascun div-diapositiva potrà contenere ogni sorta di elemento, eventualmente anche altri div: infatti vengono serializzati solo i div direttamente contenuti dal div principale per la presentazione.
Da notare infine che l'header della pagina è sempre presente in tutte le diapositive: questo perchè si trova all'esterno del div con id="slides". Più in generale, gli elementi esterni al div contenitore delle diapositive verranno mostrati sempre. Per esempio, se oltre all'header volessimo avere anche un footer, basterebbe inserirlo dopo la chiusura del div id="slides" e prima della chiusura del body.
Prima di concludere questa prima parte, due parole sulla stampa: se fate anche solo un' anteprima di stampa noterete che tutte le diapositive vengono viste dalla stampante.
Abbiamo visto come sia facile preparare una presentazione basata sul template con solo l'HTML. Vedremo da vicino il funzionamento del Javascript e del CSS dell'esempio insieme ad un altro template.
Abbiamo introdotto Minislides, un sistema di presentazioni basato su HTML, CSS e Javascript, e abbiamo visto come strutturare le nostre pagine HTML per trasformarle in presentazioni.
Vediamo ora le altre due componenti essenziali, ovvero il Javascript e il CSS. Di entrambi non è necessaria la conoscenza per poter usare Minislides con il template di default (o uno degli altri che vedremo qui) ma dovrebbe essere sufficiente quanto detto nella prima parte.
Lo script
Lo script non necessita di modifiche, ma la comprensione di come agisce è importante per la personalizzazione del CSS. Chi non è pratico di Javascript, ma lo è dei CSS, non ha da preoccuparsi: qui traccieremo a grandi linee il suo funzionamento in generale, e nel prossimo capitolo presenteremo le informazioni essenziali utili per il foglio di stile.
Ripresentiamo l'esempio. Questo usa un singolo file Javascript, di cui è possibile consultare il contenuto qui.
Lo script è piuttosto breve, all'incirca 80 righe, ma abbastanza denso concettualmente. Ecco a grandi linee come opera:
- Nasconde il div con le diapositive scrivendo la regola CSS relativa grazie ad un document.write
- Appena il div principale è pronto nel dom, reperisce i div figli diretti
- Li nasconde tutti, e ad assegna a ciascuno un id progressivo così da poterli nascondere o mostrare comodamente
- Crea il div per la navigazione delle slides, con i link contenenti le due immagini e il contatore
- Abilita la navigazione da tastiera
- Mostra la prima diapositiva
- Mostra il div con le diapositive
Da notare che il div per le diapositive (con id="slides" nell'esempio) viene inizialmente nascosto grazie a Javascript e CSS, per poi essere mostrato solo all'ultimo, ovvero quando lo slideshow è pronto. Questo velocizza molto le operazioni di preparazione dello stesso, e riduce a zero l'effetto di transizione di cui soffrono gli altri due sistemi di presentazioni di cui abbiamo accennato in apertura della prima parte, ovvero S5 e DomSlides.
Questo in breve il funzionamento dello script, ma c'è ancora un aspetto essenziale da considerare, ovvero come viene creata la navigazione per le slides. Vediamo.
Il markup "invisibile"
Uno degli aspetti più potenti di Javascript, e del DOM in particolare, è la capacità di creare e manipolare elementi, attributi e contenuto. Elementi creati tramite il DOM risultano invisibili nel markup, ma figurano nel browser come se fossero davvero presenti nella pagina HTML, e sono quindi in grado di essere personalizzati con i fogli di stile.
Minislides sfrutta questa potenzialità per creare la piccola navigazione tra le diapositive. Rivediamo l'esempio, e riprendiamo la chiamata Javascript incorporata nella pagina:
<script type="text/javascript">
StartShow("slides","back.png","fwd.png");
</script>
La chiamata consente la serializzazione del div id="slides" e aggiunge la navigazione tra le diapositive grazie ai bottoni-link che corrispondono alle immagini back.png e fwd.png. Quello che farà il Javascript, tra le altre cose, è aggiungere alla pagina grazie al DOM il seguente codice HTML appena prima dell'apertura del div che contiene le diapositive:
<div id="slidenav">
<a id="prev" href="#" onclick="Show(Prev())">
<img src="back.png" alt="slide precedente" title="slide precedente">
</a>
<a id="next" href="#" onclick="Show(Next())">
<img src="fwd.png" alt="slide successiva" title="slide successiva">
</a>
<div id="index">1/15</div>
</div>
<!--qui c'è l'apertura di del div id="slides" -->
Ovviamente i nomi delle immagini corrisponderanno a quelli passati come parametro alla funzione principale, e il contatore mostrerà di volta in volta il numero di slide corrente e il numero di slides totali effettive.
Questo è tutto per la parte Javascript, ora non ci resta che passare al CSS.
Il CSS
Il CSS del primo esempio è davvero semplice, ed è suddiviso in tre sezioni logiche che sono:
- Stili generici e tipografia
- Colori e sezioni di pagina
- Stili per la navigazione tra le diapositive
Questo per permettere una facile personalizzazione dell'aspetto delle diapositive. La sezione relativa agli stili generici e tipografia è stata pensata per costitutire una solida base per tutti gli elementi di pagina:
html,body{margin:0;padding:0}
body{font:85%/1.5 Verdana,Arial,sans-serif}
h1{font-size:250%;margin:0}
h2{font-size: 180%;margin: 1em 0 0.3em}
h3{font-size: 130%;margin: 1em 0 0}
img{border: 0 solid}
p{margin: 0 0 1em}
ul{margin-left: 0.7em;padding-left: 0.7em}
dt{font-weight: bold}
dd{margin:0 0 0.5em 2em}
Ed ecco la parte relativa ai colori e alle sezioni di pagina. La parte essenziale da notare è che il div principale con le diapositive è dimensionata in em, così da avere un effetto elastico: ridimensionando il carattere tramite le opzioni del browser, la larghezza del contenitore delle slides varierà la sua larghezza.
body{background: #FFFCF3}
h2{color: #D8AD2D}
h3{color: #747474}
a{color: #36C}
a:hover{color: #900}
div#header{height: 80px;line-height: 80px;padding-left: 30px;
background: #8697BB;color: #E1E5F0}
div#slides{width: 40em;margin-left:30px}
Ora non ci resta che vedere la parte relativa alla navigazione tra le diapositive: ricordo che viene aggiunto dal javascript un div id="slidenav" con al suo interno i due link con le immagini e il div id="index" per il contatore:
div#slidenav{position:absolute;top: 10px; right: 30px;text-align: center}
div#slidenav div#index{font-size: 70%;color: #333}
Da notare che si sono usati i posizionamenti assoluti per sistemare la mini-navigazione nell'angolo in alto a destra della pagina e che il testo del contatore risulta centrato rispetto ai due bottoni grazie alla proprietà text-align.
Un altro template per minislides
Ho preparato un secondo template: si tratta di un layout centrato a larghezza fissa molto semplice. Anzitutto vediamo la struttura di base della pagina HTML:
<div id="container">
<div id="header">
<h1>Titolo</h1>
</div>
<div id="content">
<div>
Prima diapositiva
</div>
<div>
Seconda diapositiva
</div>
<div>
..e così via
</div>
</div> <!--chiude content -->
</div> <!-- chiude container -->
In questo caso l'intera pagina è racchiusa in un container principale e le diapositive sono contenute nei div all'interno del div id="content". Infatti la chiamata per abilitare lo slideshow è la seguente:
<script type="text/javascript">
StartShow("content","back1.gif","fwd1.gif");
</script>
Anche in questo caso CSS esterno, immagini di sfondo, navigazione e script andranno sistemati nella stessa cartella della pagina HTML. Il CSS è davvero semplice, e lascio al lettore il suo studio. Ora è tempo di conclusioni.
Conclusioni
Si conclude qui questo articolo dedicato a MiniSlides, un sistema di presentazioni basato su HTML, CSS e javascript. La parte di scripting è quella fondamentale, ma come avete visto non sono necessarie conoscenze di Javascript per poterlo usare.
Ci sono diverse funzionalità che avrei voluto aggiungere, ma ho preferito fare le cose nella maniera più semplice e leggera possibile. Non è esclusa comunque una versione 2. Codice, immagini ed esempi sono disponibili per il download. Buon divertimento.
