Porte Aperte sul Web , navigazione veloce.
menu principali | contenuto principale | menu secondario piè di pagina
Benvenuti in Porte Aperte sul Web, Comunità di pratica per l'accessibilità dei siti scolastici - USR Lombardia

Porte Aperte sul Web [logo]. Link alla home page


menu principali
chi siamo | mappa | guida | faq | contatti

sei in home - newsletter - numero 1 - Scrivere presentazioni con S5


contenuto principale

Comunicare web a scuola - Numero 1

Scrivere presentazioni con S5

di Fabio Giovanetti, Liceo Sereni di Luino

S5, acronimo di A Simple Standards-Based Slide Show System, è uno strumento per creare presentazioni, totalmente gratuito e basato su xhtml.
Può essere visto come un’alternativa a Power Point: ciò è vero dal punto di vista dell’utilizzo anche se  la logica con la quale si realizzano le presentazioni è abbastanza diversa. Il sito dell’autore, Eric Meyer, esperto di fama mondiale per l’uso dei CSS,  ha una sezione dedicata a questo strumento: http://meyerweb.com/eric/tools/s5/
Una presentazione S5 è costituita da un file xhtml, alcuni CSS e una serie di javascript per gestirne il funzionamento. Ha una serie di controlli, abbastanza standard per far avanzare lo scorrimento e per navigare tra le varie diapositive. Possiamo far scorrere le pagine con frecce, barra spaziatrice, tasto sinistro del mouse, alcuni tasti o con dei controlli che compaiono spostando il mouse in basso a destra.

Come scrivere una presentazione

La presentazione ha una struttura organizzata con una serie di div che ne definiscono la struttura.
Un div con classe “presentation” contiene una serie di div con classe “slide”, ciascuno dei quali definisce una diapositiva. Ogni diapositiva ha un titolo marcato con h1 e contiene tipicamente una lista oppure dei paragrafi. Per ottenere gli effetti di animazione sugli elementi di lista si può usare la classe incremental.
Ecco un esempio di diapositiva:

<div class="slide">
<h1>Titolo della diapositiva</h1>
<ul>
<li class="incremental">Uno<li>
<li class="incremental">Due</li>
<li class="incremental">Tre</li>
</ul>
</div>

È anche possibile aggiungere delle parti da non proiettare e che compariranno solo nelle stampe, marcandole con <div class=”handout”>...</div>
Altri div, collocati all’inizio del documento, definiscono alcune caratteristiche delle diapositive, come ad esempio il pié di pagina. Partendo da una presentazione già pronta è abbastanza semplice modificare i contenuti mantenendone la struttura.  La versione originale di S5 viene fornita con una presentazione vuota e le istruzioni per un uso più avanzato (in inglese).

Vantaggi

Le presentazioni realizzate con S5 possono essere visualizzate con un qualsiasi browser, preferibilmente passando alla modalità “schermo intero”. Potendo scegliere però il supporto di Firefox agli standard utilizzati è sicuramente migliore.
Volendo pubblicare sul web le presentazioni potremo usare direttamente il file generato senza nessuna necessità di esportazione (è xhtml). Al massimo potremo cambiare il file css per presentare i contenuti con una modalità più adatta alla visualizzazione online. È una scelta consigliabile anche per ragioni di accessibilità, visto che le soluzioni utilizzate per la proiezione (font che si dimensionano automaticamente, uso di javascript) non sono l’ideale per la pubblicazione sul web.

Per cambiare l’aspetto grafico della presentazione potremo modificare i file css. Al momento non esistono online molti temi già pronti, ma trattandosi di CSS non è un lavoro molto difficile. Infine S5 include già un css per la stampa.
Un esempio di presentazione è disponibile all’indirizzo http://www.giovanetti.it/file/corso_linguaggi/pubblicare1.html (versione per la proiezione)
http://www.giovanetti.it/file/corso_linguaggi/pubblicare.html (versione web)


piè di pagina
Creative Commons License
I contenuti di questo sito, salvo diversa indicazione, sono rilasciati sotto una licenza Creative Commons License.
Tutti i marchi sono proprietà dei rispettivi proprietari