Prima di cominciare: per personalizzare la nostra presentazione dovremo aggirarci nel codice HTML delle pagine, già perché come ho detto nel precedente articolo S5 è fatto di XHTML, CSS e un po’ di javascript. Niente panico, il linguaggio di markup di cui tutto il Web è fatto è davvero molto semplice, e quello scritto per S5 è anche particolarmente leggibile. È una buona occasione per vedere come funziona un documento XHTML ben strutturato.

Scaricate dal sito di Erick Meyer i file di base, decomprimete il file e scoprirete che contiene un file dal nome poco fantasioso s5-blank.html. Potete copiarlo e rinominarlo come volete, è su questo file che lavoreremo.

Una pagina XHTML costruita in modo da separare il contenuto dalla sua presentazione utilizza spesso dei tag

per delimitare delle sezioni del documento che verranno presentate in modo differente. S5 fa uso intenso di questo metodo, pertanto da qui in poi, quando parlerò di sezioni mi riferirò proprio a porzioni di codice delimitate da questi tag.

Apriamo il file con un editor (Dreamweaver, Noteped, Bbedit, Vim, ecc…) e diamo un’occhiata al codice. In generale vediamo che si suddivide in tre parti: in alto abbiamo l’intestazione del documento HTML con i collegamenti ai fogli di stile (che si occupano del modo in cui i contenuti vengono rappresentati).

Abbiamo poi una sezione “layout” nella quale troviamo le informazioni che verranno visualizzate nel piè di pagina.

Segue la sezione “presentation” che, come era facile immaginare, raccoglie il contenuto della presentazione con le varie slide.

Iniziamo con le modifiche. Cercate nell’intestazione la riga , sostituite il testo con il titolo della vostra presentazione: sarà visualizzato in cima alla finestra del browser.

Più in basso nella sezione “layout” troverete due elementi di questo tipo:

[location/date of presentation]

[slide show title here]

Qui potete inserire il luogo e la data della presentazione e, di nuovo, il titolo. Noterete che queste informazioni sono racchiuse fra due tag

ciò significa che questi due titoletti verranno visualizzati nel piè di pagina della presentazione.

Ora arriva il bello. La sezione “presentation” è costituita due sottosezioni “slide”, una per ogni pagina della presentazione. Basterà copiare e incollare il codice di una sottosezione per aggiungere quante pagine vogliamo alla presentazione. Possiamo aggiungere nel contenuto tutto quello che viene normalmente supportato da una pagina web, comprese immagini o collegamenti a filmati, ma in realtà il più delle volte quello che ci servirà saranno immagini, testo libero, o elenchi puntati/numerati. Un esempio di elenco puntato ci è già fornito dall’autore, basterà lavorare sulle righe:

• [point one]
• [point two]
• [point three]
• [point four]
• [point five]

inserendo il testo che desideriamo visualizzare a quello contenuto nelle parentesi quadre. Riporto qui di seguito come promemoria l’istruzione per inserire un’immagine, rimandando al sito w3schools per tutto ciò che riguarda la sintassi HTML.

Se viene voglia di stampare il vostro lavoro provate prima a fare una anteprima di stampa con il vostro browser: scoprirete che il testo viene presentato in modo diverso, più adatto alla stampa e ripulito da fronzoli. C’è di più, in ogni slide nella sottosezione “handout” del codice, avete la possibilità di inserire del testo che deve essere visualizzato in fase di stampa ma non sullo schermo.

Per avviare la presentazione basta aprire il file con estensione.html con un browser e muoversi con i seguenti comandi:

• slide successiva: freccia a destra, Pag giù, clic sinistro, barra spaziatrice, ener;
• slide precedente: freccia a sinistra, Pag su;
• il tasto “t” permette di visualizzare la pagine senza il foglio di stile della presentazione;
• passando il mouse in basso a destra apparirà un menu che permette di saltare in qualunque punto della presentazione.

Per concludere, S5 forse non sarà l’applicazione in grado di soppiantare Powerpoint e Keynote, però è un bell’esempio di riutilizzo di una tecnologia conosciuta, per creare qualcosa di utile e diverso. C’è inoltre da dire che la forza di S5 sta nell’essere assolutamente accessibile, portabile e compatibile con ogni sistema operativo. Non solo, producendo presentazioni web based, ricche dal punto di vista semantico, permettete a un motore di ricerca di indicizzare le slide come qualunque pagina web.

S5 è l’ennesimo esempio di Web semantico emergente o microformats, le soluzioni pratiche e “misura d’uomo” spesso vincenti per la risoluzione dei problemi quotidiani.