Come creare presentazioni HTML

Per creare presentazioni accattivanti sei abituato ad usare i classici strumenti desktop che, diciamocelo… sono scomodi da utilizzare quando ti sposti per lavoro. Devi sempre avere il tuo portatile con te e soprattutto non permettono di creare presentazioni condivisibili. Immagina invece di poter aprire un browser e vedere la tua presentazione li dove tutti la possono poi rivedere con un semplice click su un indirizzo… ora ti spiego come creare presentazioni HTML.

Creare presentazioni in un formato standard come l’HTML ha enormi vantaggi. Primo tra tutti la portabilità! Immagina le persone che stanno ascoltando la tua presentazione con un tablet in mano e le tue slide che scorrono sullo schermo. Immagina poi di dover modificare queste slide durante una pausa senza avere il tuo notebook a portata di mano. Quello che ti serve è solo un accesso ad internet.

Per realizzare presentazioni HTML esistono molti strumenti e quello di cui ti parlo oggi è Reveal.js, uno strumento potente con molte funzionalità avanzate. Con Reveal.js puoi creare presentazioni che supportano le operazioni tipiche dei dispositivi mobile come sfogliare le pagine o ingrandire le foto con un gesto delle dita. Puoi inoltre creare presentazioni utilizzando un editor visuale senza dover mettere mano al codice. Inoltre dispone di moltissimi temi grafici ed effetti di transizione pronti all’uso.

Come creare presentazioni HTML con Reveal.js

Per iniziare a creare presentazioni in HTML devi scaricare i file di Reveal.js in formato zip dal repository ufficiale. Il pacchetto contiene alcuni file e queste cartelle:

• css: gli stili grafici
• js: le dipendenze javascript
• plugin: alcuni componenti sviluppati come estensioni di Reveal.js
• lib: componenti di terze parti necessari al funzionamento (JavaScript, CSS, fonts)
• test: esempi di presentazioni

Per prima cosa devi includere nella tua pagina HTML  i file javascript necessari al funzionamento inserendo questo codice prima della chiusura del tag body.

<script src="lib/js/head.min.js"></script>  
<script src="js/reveal.min.js"></script>

e nel head della pagina devi includere i css per i temi grafici. Puoi scegliere tra default, sky, beige, simple, serif, night, moon e solarized modificando il valore l’id del tema

<link rel="stylesheet" href="css/reveal.min.css"> 
<link rel="stylesheet" href="css/theme/default.css" id="theme">

Codifica HTML

Proviamo adesso a creare una presentazione con tre slides per vedere una semplice codifica html di Reveal.js. Alla base di una presentazione ci sono tre elementi fondamentali: <div class=”reveal”>, <div class=”slides”> e <section>. Nel tag <section> devi inserire il contenuto della slide. Il movimento predefinito della slide è lo scorrimento orizzontale ma se vuoi inserire una sotto slide a scorrimento verticale devi inserire un altro tag <section> annidato come in questo esempio:

<div class="reveal"> 
  <div class="slides"> 
    <section>questa slide è orizzontale</section> 
    <section> 
     <section>e questa slide è verticale</section> 
    </section> 
  </div> 
</div>

Per la presentazione dimostrativa nella prima slide inserisci la parte dell’introduzione, gli approfondimenti nella seconda e alla fine una citazione nella terza con un link interno. Per l’introduzione utilizziamo i tag h1 e h3:

<section> 
   <h1>GiuseppeFava.com</h1> 
   <h3>Come creare presentazioni HTML con Reveal.js</h3> 
</section>

Per la seconda inserisci il tag fragments per inserire il testo che apparirà ad ogni pressione del pulsante avanti

<section> 
  <section id="fragments"> 
  <h2>Approfondimenti</h2> 
    <p>Premi la freccia per far apparire il testo!</p> 
    <p class="fragment">Primo approfondimento</p> 
    <p class="fragment">Secondo approfondimento</p> 
    <p class="fragment">Hey...perché io sono sempre l'ultimo???</p> 
  </section> 
</section>

Come slide finale inseriamo una citazione con il tag <blockquote> che crea lo stile adatto e un link esterno con un semplice tag <a>:

<section> 
  <h2>Citazione</h2> 
  <p>Citazione di <a href=http://it.wikipedia.org/wiki/Umberto_Eco" rel="external">Umberto Eco</a>:</p> 
    <blockquote> 
    "Il computer non è una macchina intelligente che aiuta le persone stupide ma l'esatto contrario!"
    </blockquote> 
  <p>Clicca  <a href="#">qui</a> per tornare alla homepage.</p> 
</section>

Bene, ora che abbiamo finito la presentazione dobbiamo inserire alla fine della pagina il codice di inizializzazione subito prima della chiusura del tag body:

<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
});
</script>

Queste sono le funzionalità di base di Reveal.js. Per una lista completa puoi consultare la pagina dello sviluppatore dove puoi trovare nel dettaglio tutte le caratteristiche di questo strumento così versatile come ad esempio il  markdown, le note, e l’auto-sliding.

Ora che hai visto come creare presentazioni HTML con Reveal.js eccoti gli screenshot della presentazione appena creata.

ecco la seconda Slide con gli approfondimenti

e la terza con la citazione di Eco