Deck.js è un plugin jQuery che ci permette di realizzare presentazioni e slideshow a partire da semplici file HTML. La presentazione prende forma sfruttando il contenuto HTML al quale associare comportamenti tramite alcune classi predefinite dalla libreria.
In questo articolo analizzeremo un caso pratico partendo dall'installazione del plugin fino all'analisi dei vari moduli a disposizione che attualmente sono 7: deck.core, deck.goto, deck.hash, deck.menu, deck.navigation, deck.scale, deck.status.
Il più importante è deck.core, che contiene le funzionalità basilari: creazione e navigazione dell'insieme di slide (denominato "deck", ovvero "mazzo"), collegamento con i fogli di stile CSS per governare l'aspetto del documento, collegamenti basilari con la tastiera per la navigazione della presentazione. Gli altri li descriveremo più avanti.
La prima presentazione con Deck.js
Per cominciare ad esaminare il funzionamento di tutti questi elementi, occorre scaricare l'insieme dei file necessari. Possiamo trovare il pacchetto completo cliccando su "Download" nella home page di Deck.js, oppure cercando il progetto su GitHub.
Si può notare che tutto è suddiviso in maniera efficiente, in cartelle ben definite in base all'uso e alla cosiddetta "essenzialità" del componente.
In una prima cartella, denominata core ci sono tutti i file basilari: file html di prova, css per lo stile e plugin in formato js, ovviamente. I file di questa cartella possono essere scaricati tutti. Per ora ignoreremo le altre cartelle, con le estensioni, preoccupandoci solo di fare una prima prova.
Apriamo il nostro editor HTML preferito ed iniziamo a scrivere le prime righe di codice. Qualcosa di molto simile a questo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Primo Test con Deck.JS</title>
<link rel="stylesheet" href="css/deck.core.css">
<link rel="stylesheet" id="style-theme-link" href="css/web-2.0.css">
<link rel="stylesheet" id="transition-theme-link" href="css/horizontal-slide.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="deck-container">
<section class="slide">
<h1>Slide1</h1>
<p>Premi il tasto "Freccia Destra" per continuare.</p>
</section>
<section class="slide">
<h2>Slide2</h2>
<p>... contenuto ...</p>
<p class="slide">contenuto extra</p>
</section>
<section class="slide">
<h2>Slide3</h2>
<ul>... lista ...</ul>
</section>
<section class="slide">
<h2>Slide4</h2>
<iframe>... video ...</iframe></p>
</section>
<script src="js/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/deck.core.js"></script>
<script type="text/javascript">
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>Il codice completo della pagina lo troviamo qui
A livello di stile è stato usato lo stesso di quello della pagina di prova consultabile nella cartella "introduction" del pacchetto scaricato. Nel tag head vengono linkati i fogli di stile (nell'ordine, quello del core del plugin, il tema di default utilizzato e le direttive in css degli effetti di transizione da una slide e l'altra).
Gli script invece vengono richiamati a fondo pagina (il file deck.core.js, jQuery e la chiamata al metodo principale). A questo punto, esaminiamo da vicino il codice della singola slide.
<section class="slide">
<h1>Primo Test con Deck.js</h1>
<h2>di Francesco Malatesta per HTML.IT</h2>
<p>Premi il tasto "Freccia Destra" per continuare.</p>
</section>Ogni slide è caratterizzata (nel suo tag principale, in questo caso "section") dall'agganciamento alla classe ".slide" che viene poi usata come collegamento per Deck.js nel suo metodo principale. All'interno della slide stessa si può inserire qualsiasi tipo di elemento, come faremmo per una comune pagina HTML. Nessun tipo di accorgimento extra è richiesto: abbiamo la massima libertà d'azione.
Se vogliamo mostrare a più riprese i contenuti della stessa slide, inoltre, è possibile inserire in una diapositiva altri tag della classe "slide" per fare in modo di far apparire, sempre con lo stesso effetto di transizione, i contenuti nel momento che più ci aggrada. Ecco un esempio di "nested slide":
<section class="slide">
<h2>Contenuti di Prova</h2>
<p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna ..."</em></p>
<p>Tutti i contenuti si possono formattare con HTML o CSS.</p>
<p class="slide">contenuto extra</p>
</section>Come applicazione base è più che sufficiente: il markup di base risulta piuttosto semplice, quanto all'aspetto grafico, si risolve grazie al supporto di temi tramite file CSS extra.
Possiamo quindi fare un passo avanti e espandere il nostro plugin con i moduli extra che abbiamo trovato sul sito ufficiale del progetto.
Funzionalità aggiuntive per la nostra presentazione con Deck.js
La suddivisione modulare di Deck.js permette di abilitare alcune features extra. Si tratta in genere di aggiunte non essenziali: alcune riguardano l'input da parte dell'utente (le frecce) altre invece riguardano informazioni sullo stato della presentazione (il modulo Status). Analizziamoli brevemente e vediamo come attivarli.
deck.goto
Questo modulo aggiunge tre metodi per saltare da una parte all'altra della presentazione, senza seguire l'andamento regolare:
showGoTo, mostra un input col quale scegliere su quale "diapositiva" posizionarsihideGoTo, che permette di nascondere questo form di inputtoggleGoTo, per alternare la presenza o l'assenza del form senza usare i pulsanti
deck.hash
Il modulo hash crea dei link ad-hoc per spostarsi all'interno del documento, ma anche "dall'esterno", tramite la costruzione di permalink perfettamente funzionanti. Non ci sono metodi previsti ma solo impostazioni da applicare, seguendo le opzioni fornite dal modulo. Per maggiori dettagli sul loro uso si deve ricorrere all'help ufficiale.
deck.menu
Consente di realizzare un menu che permette di selezionare la slide del deck da visualizzare. In modo simile al modulo GoTo, abbiamo i tre metodi showMenu, hideMenu e toggleMenu.
deck.navigation
Permette di aggiungere alla presentazione i due bottoni per andare avanti e indietro. Anche in questo caso bisogna collegare a determinate classi gli elementi creati sulla pagina: maggiori informazioni si trovano sull'help del progetto.
deck.scale
Aggiunge il ridimensionamento automatico alle presentazioni, per poterle adattare a qualsiasi tipo di schermo. Molto interessante pensando alla proiezione su diversi media. Unica nota dolente: ci sono problemi nel ridimensionamento di video.
deck.status
Aggiunge alla presentazione un indicatore del tipo "slide_attuale" / "slide_totali", mostrando il punto della presentazione in cui ci si trova. Anche qui niente metodi: ci sono solo alcune classi ben definite (statusCurrent e statusTotal) che permettono di gestire l'aspetto. Anche in questo caso si consiglia l'uso dell'help per verificare l'esattezza della configurazione.
Questo plugin si rivela uno dei migliori attualmente in circolazione per questo tipo di lavoro. Se inoltre si controlla la sezione dell'help relativa al modulo principale, "deck.core", si scopre che tramite la direttiva "extend" è possibile realizzare metodi aggiuntivi per espandere il plugin in base alle proprie necessità.
Esempio di presentazione con Deck.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Primo Test con Deck.JS</title>
<link rel="stylesheet" href="css/deck.core.css">
<link rel="stylesheet" id="style-theme-link" href="css/web-2.0.css">
<link rel="stylesheet" id="transition-theme-link" href="css/horizontal-slide.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="deck-container">
<section class="slide">
<h1>Primo Test con Deck.js</h1>
<h2>di Francesco Malatesta per HTML.IT</h2>
<p>Premi il tasto "Freccia Destra" per continuare.</p>
</section>
<section class="slide">
<h2>Contenuti di Prova</h2>
<p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</em></p>
<p>Tutti i contenuti si possono formattare con il semplice HTML o CSS.</p>
<p class="slide">contenuto extra</p>
</section>
<section class="slide">
<h2>Altri Elementi di Prova</h2>
<p>Ecco altri esempi di contenuti di una slide. Una lista:</p>
<ul>
<li>La vostr'anima egue le gitazioni dell'oceano; essa va dietro ai vostri bei vascelli che, colla loro superba alberatura, vogando sopra i flutti, sembrano i sovrani, o i primi cittadini del mare, e signoreggiano sulla flla dei minuti navigli, che offrono loro un umile omaggio passando sospinti dalle loro ali di lino.</li>
</ul>
<p><em> da "Il Mercante di Venezia" di W. Shakespeare</em></p>
<ul>
<li>L'ora delle nostre nozze è prossima, o bella Ippolita: quattro giorni ancora di felice attesa, e apparirà la nuova luna; ma, oh, quanto questa vecchia luna è lenta a tramontare! Essa fa languire le mie brame come una matrigna o vedova che con l'aiuto del tempo lasci avvizzire le sostanze del giovane erede.</li>
</ul>
<p><em>da "Sogno di una notte di mezza estate" di W. Shakespeare</em></p>
</section>
<section class="slide">
<h2>Inclusione di Media</h2>
<p>Includiamo un video nella slide, senza nessuna istruzione aggiuntiva.</p>
<p><iframe width="560" height="315" src="http://www.youtube.com/embed/SVq2yMuAMVQ?rel=0" frameborder="0" allowfullscreen></iframe></p>
</section>
<section class="slide">
<h1>Fine del Primo Test.</h1>
</section>
<script src="js/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/deck.core.js"></script>
<script type="text/javascript">
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>