Presentazioni in XHTML

S5

Fabio Giovanetti

Liceo di Luino

Cos'è S5

• A Simple Standards-Based Slide Show System
• Strumento creato da Eric Meyer
• Permette di fare delle presentazioni con un semplice browser
• Niente formati proprietari: solo standard

Come funziona

• Unione di file xhtml, css e javascript
• xhtml per il contenuto e relative marcature
• css per l'aspetto grafico
• javascript per gestire le diapositive e le animazioni
• Comandi classici da presentazione

Come procurarsi S5

• Dal sito http://meyerweb.com/eric/tools/s5/
• Si scaricano:
  • una guida introduttiva
  • un file vuoto pronto da modificare
  • qualche tema alternativo
  • altra documentazione

Struttura di una presentazione

• un div con class "presentation" racchiude l'intera presentazione
• ogni diapositiva è marcata con un div con classe "slide"
• ogni diapositiva contiene tipicamente un titolo (h1), dei paragrafi (p) o delle liste

Altri elementi di struttura

• Altre informazioni racchiuse nell'intestazione (elementi meta):
  • autore
  • data
• in un div con classe "layout" si può definire un piè di pagina per le diapositive

Classe "incremental"

• Marcando i paragrafi o gli elementi di lista con la classe "incremental" si ottiene un effetto a comparsa
• Negli esempi avanzati dell'introduzione di Meyer vengono fatti comparire in successione anche immagini trasparenti (png) sovrapposte

Stampa e commenti

• Un file css a parte definisce l'aspetto della stampa
• si può mettere in ogni diapositiva un div con classe handout da stampare ma non visualizzare

Pubblicare sul Web

• Una presentazione S5 è già xhtml e come tale si può pubblicare sul Web
• Alcuni aspetti (gestione automatica delle dimensioni dei caratteri, uso di javascript) potrebbero rendere consigliabili delle modifiche
• Basta cambiare solo le righe che richiamano i file css per avere pronta una versione web alternativa
• Esempio con questa presentazione

Temi

• Sul sito di Meyer c'è qualche tema alternativo
• Siccome la grafica è gestita con i CSS ci si possono preparare i propri temi

Vantaggi

• Serve solo un browser per visualizzarla (con firefox è meglio)
• Pubblicazione sul web
• Stampa
• Costo zero per la creazione

Svantaggi

• Occorre conoscere qualcosa (molto poco) di XHTML
• La scrittura non è visuale come in PP

Alternative

• Oltre a S5 ci sono altri strumenti analoghi:
  • Slidy del W3C, con copyright
  • Slideous di Stefan Gössner
  • AJAX-S di Robert Nyman
  • presentacular di Juan Manuel Caicedo, una estensione di S5 con effetti visuali di script.aculo.us (se proprio non potete fare a meno di tante animazioni)

Credits e licenza

• Questa presentazione è realizzata con S5 di Eric Meyer
• Si tratta di uno strumento per realizzare presentazioni scrivendo semplicemente un file html, quindi con strumenti standard e non proprietari
• Eccetto dove diversamente specificato, i contenuti di questa presentazione sono rilasciati sotto Licenza Creative Commons