JAST-A-Slide

L'evoluzione delle diapositive on-line!

URL:: http://jastegg.it/jastASlide/

Che cos'è JAST-A-Slide?

JAST-A-Slide è un sistema semplice ed innovativo per creare delle presentazioni multipiattaforma ed accessibili.

Il sistema consente di costruire le proprie diapositive come si costruirebbe una pagina web, esattamente come fino ad oggi è stato fatto con HTML Slidy.

JAST-A-Slide non ha la presunzione di voler sostituire uno strumento come Microsoft Power Point o Open Office Impress, ma di affiancarli con lo scopo di creare presentazioni per il web.

Osserveremo nelle prossime slides il suo funzionamento.

La navigazione sulle diapositive.

È possibile navigare le diapositive di questa presentazione, in quattro differenti modi:

Navigazione da tastiera: (tasti freccia sinistro e destro);
Con la pressione del tasto sinistro del mouse;
Tramite la barra di navigazione predisposta in basso;
Tramite l'Elenco delle diapositive posto sulla barra di navigazione;

La struttura di una presentazione (1 di 4).

Le diapositive sono organizzate secondo una semplice struttura XHTML con DTD di tipo Strict.

Quanto segue è lo schema logico di creazione di una presentazione:

Intestazione;
Prima diapositiva (pagina frontale);
Slide numero 1;
Slide numero 2;
...
Slide numero n;
Piè di pagina;

Ciascuno degli elementi indicati in nell'elenco precedente, corrisponde ad un elmento HTML di tipo div

La struttura di una presentazione (2 di 4).

L'intestazione e il piè di pagina.

L'intestazione e il piè di pagina sono due elementi div con rispettivo id="header" e id="footer"

Un ipotetico header potrebbe essere il seguente:


				<div id="header">

					JAST-A-Slide - L'evoluzione delle diapositive on-line!

				</div>

.

Come si può notare corrisponde all'header di questa diapositiva

La struttura di una presentazione (3 di 4).

La prima diapositiva.

La prima diapositiva, che titola l'intera presentazione, ha una caratteristica particolare: deve avere id="front-page".

Altro requisito della diapositiva frontale è di avere un elemento di intestazione h1 che identifica tra l'altro il titolo dell'intera presentazione (che viene applicato alla finestra e visualizzato nell'elenco delle diapositive).

Segue un esempio di diapositiva frontale:


				<div id="front-page" class="slide">

					<h1>Titolo della presentazione</h1>

					<p>Testo titolo presentazione</p>
				</div>

La struttura di una presentazione (4 di 4).

Le diapositive.

Tutte le diapositive (ad eccezione della prima), devono avere un solo elemento di intestazione h2, che identifica il titolo della relativa diapositiva.

Ecco un esempio:


				<div class="slide">

					<h2> Titolo della presentazione </h2>

					<p> Testo presentazione </p>

					<p> Ulteriore testo presentazione </p>

				</div>

A ciascuno il suo stile (1 di 3).

Per semplificare la creazione di nuovi modelli, esistono due fogli di stile:

base.css: che è il foglio di stile principale. Il suo effetto è quello di formattare questa presentazione;
custom.css: è il foglio di stile che rende la presentazione personalizzata;

Ciascun elemento importante nella presentazione è rappresentato da un id e da una classe:

Nelle prossime slides vedremo i selettori di classe e di elemento principali.

A ciascuno il suo stile (2 di 3).

I selettori di elemento

header: è la sezione di intestazione visibile su ciascuna slide;
footer: è la sezione di piè di pagina visibile su ciascuna slide;
toc: che sta per table of contest è il box che elenca i titoli delle slides
panel: è il pannello dei comandi posto in basso su questa presentazione.
commands: è l'insieme delle funzioni disponibili sul pannello dei comandi
toc-link: è il link che apre l'elenco delle slides
move-next e move-previous: sono i link per la navigazione sulle slides che portano alla slide successiva e precedente

A ciascuno il suo stile (3 di 3).

I selettori di classe.

slide: ciascuna diapositiva è segnata da questo selettore di classe;
toc: è l'elenco delle diapositive riportate nel selettore #toc;

Selettori di classe dinamici.

Author e Created: sono classi che vengono attribuite agli elementi Definition List presente sulla prima slide;

Per `META` informazioni...

Ci sono alcuni meta tag che vengono acquisiti dallo script come elementi informativi.

Author: Consente di indicare il nome dell'autore e viene riportato in una specifica sezione che ha id = meta-info;
Created: Consente di specificare la data di creazione della presentazione, e viene riportata nella suddetta sezione meta-info;
meta-info-*: Tutti i meta che hanno come prefisso meta-info- vengono riportati sempre nella sezione meta-info;

...Per `META` etichette...

Altri meta tag, consento di configurare le etichette delle slide:

Le etichette

label-move-next: è il testo che su questa presentazione è identificato da Avanti;
label-move-previous: è il testo che su questa presentazione è identificato da Indietro;
label-toc: è il testo che su questa presentazione è identificato da TOC (il link alla tabella dei contenuti);
label-toc-close: è il testo che su questa presentazione è identificato da Chiudi TOC;
other-text: è il testo che viene riportato come ultima informazione sulle slide (dopo Avanti);

...E per `META` configurazione!

Altri meta tag infine consentono di configurare il comportamento della procedura:

sync-link: Indica il link di sincronizzazione per una presentazione remota
master: se indicato come true il sistema imposterà la presentazione come guida per le utenze remote (esisterà un solo master e tanti slave. Entrambe dovranno puntare allo stesso sync-link).

Effetti? Sì grazie ne vorrei uno!

Applicando class="progressive" ad un elemento della pagina (non all'intera slide), sarà possibile avere delle comparse graduali del testo.

Nella prima diapositiva ce n'è un esempio... Prova ad tornarci dall'elenco delle diapositive.

Ma questo è un altro esempio:

Gli elementi
di questo elenco puntato
hanno class="progressive"
guarda l'HTML se non ci credi! :)

Cosa serve per creare una diapositiva quindi?

Basta conoscere un po' di XHTML: quanto basta per creare del codice semanticamente e strutturalmente valido
Seguire le regole indicate in questa diapositiva...
Aggiungere nell'header i riferimenti agli script (puoi usare questa diapositiva come esempio)

Fatto! Semplice vero?

C'è di più!

La presentazione che avete appena visto è predisposta ad essere letta dalle tecnologie assistive. Per verificare questa cosa prova ad installare firevox e ascoltare le diapositive.

Ne esiste una versione AJAX che consente la consultazione da parte dei discenti di una presentazione che un ipotetico docente sta tenendo a distanza! Questi sono gli URL per provarla:

Ringraziamenti.

Le diapositive che avete appena visto, sono state sviluppate con Eclipse ed Aptana HTML Editor;
JAST-A-Slide è un plug-in per JAST sviluppato da Diego La Monica;
JAST (JavaScript Toolkit) è stato sviluppato da Diego La Monica;
JAST è un framework JavaScript sviluppato con Eclipse e Aptana JavaScript Editor;
Questa presentazione è stata testata con:
- Screen Reader Firevox, tra i primi a supportare WAI-ARIA;
- Browsers Microsoft Internet Explorer 6.0 e superiori, Mozilla Firefox 2.0 e superiori, Opera 9, Apple Safari 3.0;
Ringrazio il W3C per aver fatto sì che si costituisse il gruppo di lavoro Protocols & Formats;
Ringrazio il gruppo di lavoro Protocols & Formats (del quale faccio parte) per aver dato alla luce ad ARIA;
Grazie a te per aver seguito fin qui questa presentazione!

Diritti e proprietà

Questa presentazione è stata possibile grazie a:

JAST

Chiunque è libero di riutilizzare questo strumento per produrre presentazioni web che siano supportate dalle tecnologie assistive.

L'assenza della presente diapositiva alla fine della presentazione sarà ritenuta una violazione del diritto d'autore e potrà essere perseguibile secondo le normative vigenti.

Grazie!
Diego La Monica