Altro

• Banana team
  
• Links
• Licenza d'uso / License
• Download
• Credits

PhotoAlbum

I siti che raccontano viaggi sono corredati di decine di foto, spesso di ottima qualità e notevole interesse. Ma purtroppo la navigabilità non è sempre all'altezza delle foto e fa sì che il visitatore abbandoni il sito dopo la visione di poche foto poichè scoraggiato dalla navigabilità limitata. Questo problema me lo sono posto anch'io per questo sito, e ammetto che ho dovuto sudare non poco per scovare una soluzione soddisfacente. Dopo vari tentantivi con script JavaScript e applet Java (vedi SlideShow), ho scoperto la potenza e la flessibilità del dynamic HTML grazie al quale tutto è diventato molto più semplice. In questa pagina racconterò un pò i dettagli della soluzione che ho trovato sperando possa essere un utile spunto per chi ha problemi analoghi, ma non ha ancora trovato una soluzione soddisfacente.

Indice

1. Un esempio

Prima di partire con i dettagli e le discussioni del caso, magari un esempio farà rapidamente capire di cosa parlerò. Nella parte sinistra del riquadro successivo c'è una lista di foto in miniatura. Provando a cliccare su una di queste, la versione originale della foto e la relativa didascalia verranno aggiornati senza che questa pagina sia ricaricata.

< prev   next >

Amsterdam

Questo in linea di massima è l'obiettivo di questa presentazione. Un risultato più articolato sia graficamente che come navigabilità è presente in questo sito per ogni viaggio (come ad esempio West USA / Monument Valley). Cliccando su una delle miniature si apre una finestra da cui è possibile navigare tutte le foto in vari modi. Ad esempio è possibile selezionare la foto desiderata cliccando la sua didascalia dall'elenco, oppure andare alla successiva cliccando sulla foto stessa o sul tasto next, oppure infine tornare alla precedente cliccando sul tasto back.

2. Alcuni criteri di navigabilità

Un album di foto caratterizzato da una buona navigabilità dovrebbe prima di tutto facilitare il visitatore nel passaggio dalla foto corrente alla successiva riducendo al minimo i movimenti del mouse ed il numero dei click. Un classico esempio di scarsa navigabilità si ha quando l'album fotografico è composto da foto di vari formati (ad esempio foto scattate in orizzontale e verticale) ed i tasti di scorrimmento (next e back), tipicamente posti al di sotto della foto, variano la loro posizione verticale in base all'altezza della foto soprastante. L'alternarsi dei vari formati costringe il visitatore a dover rincorrere con il mouse il tasto di scorrimento.

Un altro aspetto fondamentale è la possibilità di poter saltare facilmente da una sezione all'altra dell'album in base al personale interesse del visitatore e non costringerlo a seguire necessariamente la sequenza impostata. Può capitare infatti che un visitatore non risulti particolarmente interessato ad una parte dell'album e desideri saltare ad una nuova sezione. Dare la possibilità di passare immediatamente a ciò che si desidera mantiene alto il livello di interesse e quindi le probabilità che la visita non termini prematuramente.

Un altro dettaglio che va tenuto in considerazione è l'integrazione dell'album fotografico con gli altri contenuti del sito. Spesso si sceglie di visualizzare le foto dell'album in pagine separate dal racconto (come ad esempio in questo sito). Ma la scelta non deve essere forzata da problemi e limitazioni implementative, bensì dettata da una precisa idea di organizzazione dei contenuti. Ad esempio esistono molti strumenti che per un insieme di foto producono automaticamente altrettante pagine web dove in ognuna di queste è visualizzata una foto ed i link di scorrimento alle foto adiacenti (precedente e successiva). In questo caso l'integrazione con gli altri contenuti del sito (ad esempio il racconto del viaggio) viene persa a causa dello strumento utilizzato e non per una scelta voluta.

3. I vari approcci per realizzare una sequenza di foto

Negli ultimi anni sono proliferati strumenti e tecnologie per indirizzare queste e molte altre esigenze di navigabilità. Per quanto mi è dato sapere, in linea di massima i possibili approcci sono i seguenti.

• HTML statico e scripting
  Con questi strumenti di base, per quanto impegno ci si metta, il risultato sarà probabilmente molto limitato. Tipicamente ciò che si riesce a fare è creare manualmente pagine che mostrano le foto e dare la possibilità di navigare da una pagina ad un altra. Oppure un'altra strada potrebbe essere quella di creare una pagina web che funziona come indice delle foto ed in seguito ad un click su uno degli elementi dell'indice aprire un pop-up contenente la foto. In entrambi i casi le foto restano abbastanza isolate dai contenuti.
• Frame HTML
  I frame HTML sono probabilmente la soluzione più rapida ed efficace per suddividere la pagina web in due parti: una che agisce come indice dell'album, l'altra che visualizza la foto scelta dall'indice. Sfortunatamente l'uso dei frame HTML, sebbene oggi supportato da tutti i browser in commercio, è fortemente scoraggiato. I motivi sono molteplici, ma fondamentalmente le ragioni principali sono due. Innanzi tutto i frame sono tag che esclusivamente danno indicazioni di formattazione sul contenuto, mentre nella pagina HTML dovrebbero essere presenti solo indicazioni semantiche sul contenuto. Ad esempio racchiudere un testo all'interno dei tag <p> ... </p> dovrebbe indicare che quel testo costituisce logicamente un paragrafo, e non indicare il tipo di formattazione a cui deve essere soggetto quel testo. Le informazioni di formattazione vanno isolate dalla pagina dei contenuti mediante i fogli di stile. Il secondo motivo per cui i frame sono sconsigliati è che il loro utilizzo fa sì che la URL mostrata dal browser (cioè la URL della pagina che crea i frame) non corrisponda più al contenuto visualizzato in quanto ciascun frame visualizza la pagina indirizzata dalla propria URL. Questa situazione crea problemi di bookmarking (quando salvo un bookmark potrebbe non essere ciò che effettivamente vedo) e di indicizzazione dei motori di ricerca.
• HTML dinamico
  L'HTML dinamico o DHTML (recita Wikipedia) è un metodo per creare pagine web interattive combinando l'HTML statico, un linguaggio di scripting (come JavaScript), il linguaggio di presentazione CSS e il Document Object Model (DOM). Questa definizione può far sembrare il DHTML molto complesso, ma in realtà non lo è. Il suo grosso vantaggio è che permette di rendere completamente dinamica una pagina statica usando un linguaggio di scripting (JavaScript è usualmente integrato nei browser) senza l'ausilio di plug-in esterni e senza interagire con il web server. Ogni elemento della pagina HTML può essere modificato (sia nei suoi contenuti che nello stile) in risposta ad eventi di navigazione. Nell'esempio precedente, effettuando un click su una foto in miniatura (evento di navigazione) il bordo di quest'ultima viene ingrandito (modifica dello stile) e la foto originale viene aggiornata con il nuovo nome del file (modifica del contenuto).
• Plug-in esterni
  I plug-in esterni come ad esempio Java e Macromedia Flash Player consentono di creare pagine web dai contenuti fortemente dinamici, interattivi e di grande effetto. Ad esempio tempo fa ho sviluppato un'applet Java (vedi SlideShow) che implementa lo slide show di un gruppo di foto. Allo stesso modo con Flash è possibile realizzare un album fotografico come ad esempio fa SimpleViewer. Sebbene questi plug-in offrano potenzialità enormi, qualche piccolo svantaggio è inevitabile. Innanzi tutto la curva di apprendimento di queste strumenti è sicuramente più ripida se confrontata a linguaggi più semplici come HTML e JavaScript. Inoltre non sempre gli strumenti ideali per sviluppare le proprie applicazioni sono a disponibili gratuitamente e spesso sono indispensabili. Un altro problema è che questi plug-in non vengono istallati contestualmente all'istallazione del browser, ma in una seconda fase dall'utente: quindi ciò che può capitare è che l'utente non riesca a visualizzare l'applicazione e che quindi debba scaricare il plug-in ed istallarlo (cosa non sempre alla portata di tutti). Ed infine, le applicazioni basate su questi plug-in girano tipicamente in una porzione della pagina web, rimanendo isolate e soprattutto slegate dal resto dei contenuti.
• Strumenti automatici
  Queste applicazioni, quale ad esempio JAlbum, sono molto utilizzate ed hanno sicuramente dalla loro parte la facilità d'uso e la rapidità con cui si riesce ad avere on-line il proprio album. Di contro un grosso svantaggio è dato dalla scarsa integrazione con il resto dei contenuti. Sono presenti anche alcuni inconvenienti minori. Ad esempio il fatto di avere una pagina per ogni foto comporta un proliferare non necessario di file sul proprio sito a discapito dell'ordine e dello spazio. Inoltre se per caso si decidesse di cambiare l'ordine, oppure di inserire o rimuovere alcune foto, occorrerebbe rigenerare l'intero insieme di pagine web e pubblicarle nuovamente sul proprio sito: anche se il programma automatizzerà il più delle operazioni, indubbiamente un grosso spreco di risorse.

4. Il dynamic HTML

A prima vista la definizione data del dynamic HTML può creare una sensazione di sconforto dovuta alle tante tecnologie che sono in ballo. In realtà il fascino di questo approccio sta proprio nella facilità di apprendimento e degli ottimi risultati che si ottengo dopo solo pochi tentativi. Prima di passare un esempio concreto di codifica, occorre dare un breve sguardo alle tecnologie coinvolte.

• HTML statico
  Per evitare di cadere nell'ovvio, proverò a fornire qualche curiosità. Per HTML statico si intende il linguaggio HTML (Hypertext Markup Language) introdotto da Tim Berners-Lee nel lontano 1993. Questo linguaggio è oggi uno standard mondiale e deve la sua incredibile fama a due motivi fondamentali. Il primo è il meccanismo dichiaritivo (piuttosto che dichiarativo) usato per la definizione dei contenuti che permette al programmatore di specificare la semantica del contenuto e non il meccanismo con cui tale contenuto debba essere visualizzato. Ad esempio è possibile aggregare dei dati in una tabella dichiarandone la struttura ed i contenuti e non scrivendo un programma che interagisce con il dispositivo grafico per visualizzare la tabella stessa. L'approccio dichiarativo libera l'utente da ogni aspetto programmativo (delegato al browser), potendo così concentrarsi sulla produzione e strutturazione dei contenuti. Il secondo motivo è l'uso di hyperlink come strumento di navigazione di straordinaria efficacia. La natura statica dell'HTML risiede nel fatto che il linguaggio non prevede un meccanismo per cambiare i contenuti iniziali della pagina in risposta ad eventi di navigazione generati dall'utente.
• Linguaggio di scripting
  Un linguaggio di scripting è uno strumento programmativo (in contrapposizione ad un linguaggio dichiarativo quale è l'HTML) che permette di definire una sequenza di istruzioni (script) che vengono analizzate ed eseguite da un interprete. Nel contesto di un web browser usualmente almeno un interprete è tipicamente integrato all'interno del browser (ad esempio il JavaScript) e non richiede una istallazione esterna (come ad esempio richiede il plug-in Macromedia Flash Player). Tipicamente gli script sono integrati nella pagina HTML o contenuti in file dedicati che poi vengono inclusi nelle pagine HTML mediante istruzioni di inclusione.
• Cascading Style Sheet
  Il Cascading Style Sheet (CSS) è un linguaggio di presentazione che consente di definire regole di formattazione e visualizzazione per gli elementi semantici definiti in una pagina HTML mediante uno o più fogli di stile. Una pagina HTML ben scritta non dovrebbe utilizzare i tag a scopo di formattazione, ma esclusivamente per marcare semanticamente i contenuti. Questo compito è lasciato ai fogli di stile che vengono interpretati dal browser ed applicati alla pagina HTML in fase di visualizzazione. I vantaggi del disaccoppiamento fra contenuti e regole di presentazione sono molteplici. Innanzi tutto le regole di presentazione non sono ripetute in tutte le pagine HTML ma confinate nei fogli di stile, rendendo immediata la propagazione di una modifica dello stile in tutte le pagine. Inoltre il linguaggio di stile è orientato esclusivamente alla presentazione, mentre l'HTML alla esclusiva marcatura. Questo comporta che nel primo caso il browser segue regole di presentazione esplicite, mentre nel secondo applica regole implicite non garantendo un risultato unico.
• Document Object Model
  Il Document Object Model (DOM) è uno standard che definisce un modello per la rappresentazione di documenti costituiti da nodi organizzati secondo una struttura gerarchica. Le tipologie di documenti a cui si applica diffusamente nella pratica questo modello sono l'HTML e l'XML, documenti il cui formato prevede nodi (i tag) per cui è possibile identificare una gerarchia (ad esempio il tag <html> è il parent del tag <body>). Il DOM definisce una gerarchia di interfacce che rappresentano i vari nodi del documento. Semplificando, ciascuna interfaccia contiene la definizione i dati che caratterizzano un nodo del documento e le operazioni che tale nodo consente. Ad esempio il DOM definisce l'interfaccia Node come nodo generico all'interno della gerarchia. Tale interfaccia ha ad esempio il dato nodeName che rappresenta il nome del nodo e l'operazione hasChildNodes che segnala se il nodo ha figli o no. Un aspetto di grande interesse è che tali interfacce definiscono delle operazioni per navigare all'interno della gerarchia. Questo significa che dato il DOM di una pagina HTML è possibile mediante l'uso di queste operazioni selezionare un tag desiderato per poi modificarne gli attributi o invocarne una operazione. Il linguaggio di scripting del browser implementa il DOM secondo i costrutti specifici del linguaggio stesso. Ad esempio il JavaScript permette di indirizzare un nodo mediante la dot syntax ovvero elencando la discendenza dei nodi separati da un punto partendo dalla radice fino alla foglia (ad esempio self.document.link).

5. Dalla teoria alla pratica

Dopo tanta teoria è ora di passare alla pratica. Sebbene sia possibile studiare la realizzazione dell'esempio dato sopra semplicemente visualizzando il contenuto di questa pagina, vale la pena evidenziare l'uso delle tecnologie precedentemente discusse. Diamo prima di tutto un'occhiata alla struttura generale di questo piccolo album. Gli elementi dell'album sono formattati a video mediante una tabella: nella colonna sinistra sono elencate le miniature delle foto e in quella destra la foto corrente in dimensioni originali con la sua didascalia. Questi elementi sono identificati univocamente mediante un nome specificato nell'attributo id. Ad esempio il tag per la foto originale è

<img id="PictureBox" class="imgBig" src="images/amsterdam.jpg">

e l'id utilizzato per identificare questo tag è PictureBox. Il valore assegnato all'id è di fondamentale importanza per poter accedere l'elemento della pagina dalle funzioni JavaScript. Ad esempio per ottenere l'elemento identificato da PictureBox, basterà invocare il metodo di ricerca getElementById appartenente al document specificando il valore dell'id:

var pictureBox = document.getElementById("PictureBox");

Gli elementi di navigazione dell'album (le miniature, i link di scorrimento e la foto) sono stati programmati in modo che vengano chiamate delle funzioni JavaScript in virtù di particolari eventi generati dall'utente. Ad esempio ciascuna miniatura è stata programmata a chiamare la funzione JavaScript updatePicture in seguito ad un click da parte dell'utente sulla miniatura stessa (evento onClick).

<img onClick="javascript:updatePicture(1);" ... >

La funzione JavaScript updatePicture ha lo scopo di aggiornare gli elementi dell'album in virtù della selezione fatta dall'utente. Fondamentalmente le azioni implementate sono: controllo della validità dell'indice della nuova foto (linee 4-6), riduzione del bordo della miniatura corrente (linea 9), caricamento della nuova foto (linee 11-14), aggiornamento della disdascalia (linea 16), ingrandimento del bordo della nuova miniatura (linea 18), memorizzazione dell'indice della nuova foto per un uso successivo (linea 20). Vediamo i dettagli dei vari passi.

 1    function updatePicture(pictureNo)
 2    {
 3        // validate input
 4        if ( pictureNo < 0 ) { return; }
 5        if ( pictureNo >= photo.length ) { return; }
 6        if ( pictureNo == index ) { return; }
 7
 8        // update the style for the leaving small picture
 9        document.getElementById(index).className = "imgOff";
10        // load the image
11        var preloadedImage = new Image();
12        preloadedImage.src = photo[pictureNo];
13        // update the big picture
14        document.getElementById("PictureBox").src = preloadedImage.src;
15        // update the picture caption
16        document.getElementById("CaptionBox").innerHTML = caption[pictureNo];
17        // update the style for the incoming small picture
18        document.getElementById(pictureNo).className = "imgOn";
19        // update the current index
20        index = pictureNo;
21    }

Il parametro pictureNo (linea 1) identifica l'indice della foto selezionata dall'utente. Le foto sono numerate partendo da 0. L'URL di ogni foto è memorizzata nell'array photo e le corrispondenti didascalie nell'array caption. Per brevità le definizioni di questi array non sono riportate esplicitamente e possono essere visualizzate nel sorgente di questa pagina. Il parametro pictureNo viene controllato (linee 4-6) affinchè il suo valore sia valido: ad esempio deve puntare ad un elemento esistente dell'array photo.

Come si potrà facilmente notare la selezione di una foto fa sì che la corrispondente miniatura sia bordata con uno spessore maggiore delle altre; l'intento è quello di facilitare l'utente nell'associazione della miniatura alla foto. Questo cambiamento è realizzato modificando lo stile del tag img della miniatura contestualmente alla selezione della foto. Per questi tag sono stati definiti due possibili stili:

img.imgOn {border:2px solid #ccc; margin:2px;}
img.imgOff {border:1px solid #444; margin:3px;}

Lo stile imgOn è assegnato alla miniatura corrispondente alla foto visualizzata, imgOff a tutte le altre. Lo stile imgOn è caratterizzato da un bordo più spesso (2 pixel invece che 1 pixel) e da un colore grigio più chiaro (#ccc è più vicino al bianco di quanto lo sia #444). La miniatura corrente dovrà abbondare il suo bordo spesso per cederlo alla nuova miniatura selezionata. Vale la pena notare che l'indice della foto (e dalla miniatura) corrente è memorizzato nella variabile index. Tale variabile verrà impostata con l'indice della nuova foto al termine del aggiornamento grafico (linea 20). In seguito alla selezione di una nuova miniatura, la miniatura corrente subirà un cambiamento di stile da imgOn a imgOff (linea 9), mentre la miniatura selezionata subirà un cambiamento di stile da imgOff a imgOn (linea 18). Usando il metodo getElementById dell'oggetto document si ottiene l'oggetto che rappresenta il tag img della miniatura desiderata. La proprietà className di tale oggetto è impostata allo stile da applicare (la proprietà className corrisponde all'attributo class di un tag HTML). Questa operazione di cambiamento di stile di un tag in conseguenza di un evento generato dall'azione dell'utente è un classico esempio di programmazione dinamica di una pagina HTML.

Il caricamento della nuova foto (linee 11-14) avviene tramite la creazione di un oggetto di tipo Image (linea 11) che corrisponde al tag HTML img. Impostando l'attributo src di questo oggetto all'URL della nuova foto (linea 12), il browser procederà al caricamento in memoria della foto richiesta. A questo punto la foto è disponibile nell'oggetto preloadedImage ma di fatto non è ancora visualizzata. Per scatenare la sua visualizzazione occorre variare dinamicamente l'attributo src del tag img che visualizza la foto di dimensioni reali (linea 14).

L'ultimo passo da commentare è l'aggiornamento della didascalia (linea 16). Il procedimento è quello già visto in precedenza. Il testo della didascalia è incluso fra i tag <div> ... </div>.

<div id="CaptionBox">Amsterdam</div>

Usando il metodo getElementById dell'oggetto document si recupera l'oggetto JavaScript corrispondente al tag div che incapsula la didascalia e si cambia il contenuto (la didascalia) modificandone l'attributo innerHTML.

6. Link utili

Inutile dire che il web offre innumerevoli esempi e discussioni che sviscerano i dettagli di ogni argomento accennato in questo articolo. Fornirò in questo paragrafo alcuni link che ho trovato utili nell'approfondire le varie tematiche. Non ho la pretesa di riportare i migliori siti, ma sono semplicemente i primi arrivati da una ricerca del web che mi hanno soddisfatto. Per il dynamic HTML Dynamic Drive è una risorsa infinita di esempi. Per i fogli di stile CSS c'è il blog theCSSweblog ed ovviamente l'imperdibile CSS Zen Garden. Per il JavaScript un breve tutorial è disponibile su WebMonkey e molti esempi su CodeLifter. Brevi ma efficaci tutorial su tutte le tecnologie web trattate sono su W3 Schools.

7. Licenza d'uso

Il contenuti di questo articolo può essere usato per fini non commerciali secondo le condizioni stabilite dalla Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Italy License.

8. Contatti

Per ogni suggerimento, problema o idea per il miglioramento di questo articolo è possibile inviare una email all'indirizzo di posta elettronica postmaster@thebananatours.com.