Spry: come rendere le pagine web più interattive e accattivanti con pochi clic, sfruttando AJAX

Rivista: Applicando
Data pubblicazione: Novembre 2007

Da più parti, su Internet, si sente parlare di AJAX, ma di cosa si tratta davvero? E soprattutto, è davvero così complicato metterci le mani? No, a patto che si disponga degli strumenti adatti. In primo luogo mettiamo ordine sul significato di questo termine: l’acronimo che lo contraddistingue (Asynchronous Javascript and XML), già da solo dovrebbe dare una prima idea di che cosa si tratti. AJAX non è un linguaggio, come alcuni hanno detto, bensì è un nuovo approccio allo sviluppo di applicazioni per il wev, che vede collaborare tra loro linguaggi e tecnologie già esistenti, in un modo nuovo. Tutto questo ha uno scopo ben preciso: rendere le pagine web più dinamiche e accattivanti,  senza però obbligare il browser a ricaricare ogni volta i contenuti, un pò come avviene con Flash. In quest’ottica, alcuni si sono chiesti fino a che punto AJAX sia una tecnologia alternativa a Flash. La risposta è semplice: AJAX non è un sostituto di Flash, più semplicemente permette di rendere dinamiche ed interattive le pagine web, fino al punto (se ben strutturate) di farle diventare a tutte gli effetti candidate ideali per la costruzione di siti in stile Web 2.0. La novità è che in Dreamweaver, AJAX viene implementato attraverso il Framework Spry, che richiede una conoscenza minima di base di HTML, CSS e Javascript, per essere utilizzato, ma che soprattutto può essere usato quasi del tutto in maniera visuale, attraverso i vari strumenti presenti nella Barra Spry. A questo proposito, nelle pagine che seguono, vedremo come creare rapidamente elementi Spry, con pochi clic, e senza dover necessariamente mettere le mani sul codice.

Per iniziare...

In primo luogo è importante sapere che i widget Spry funzionano a patto che gli elementi necessari (codice Javascript, CSS, immagini, ecc.) siano caricati sul web server del sito, insieme al resto dei documenti. Per evitare fraintendimenti, Dreamweaver CS3, mostra un avviso per i file dipendenti, al primo salvataggio di una pagina che contiene elementi Spry. Confermando l’avviso con OK, viene creata una cartella SpryAssets, che conterrà sia quelli appena copiati, sia tutti gli altri che si rendano necessari in base all’utilizzo dei vari widget.

Fig.1 – Al primo salvataggio di una pagina che contiene elementi Spry, Dreamweaver ci avverte che saranno copiati i files dipendenti, all’interno della cartella SpryAssets.

È importante quindi ricordare che questa cartella non deve essere rimossa dalla sua posizione, altrimenti le pagine che contengono gli elementi Spry smettono di funzionare. È però pur vero, che può essere spostata o rinominata dal pannello File di Dreamweaver, che mostra un avviso per l’aggiornamento dei file collegati.

Fig. 2 – Dreamweaver tiene traccia di qualunque modifica effettuata nel pannello File, segnalando all’utente se intende aggiornare i file collegati, al fine di preservare il funzionamento delle pagine.

È poi fondamentale sapere che prima di creare qualunque pagina web, che contenga qualunque elemento o tecnologia, come ad esempio Spry, è necessario definire un sito web in Dreamweaver, con il comando Sito > Nuovo sito. In questo articolo si assume che l’utente abbia una conoscenza di base del programma, per cui questa operazione non viene descritta nel suo iter.
Queste insomma sono le raccomandazioni essenziali per far si che l’implementazione di elementi Spry inizi senza intoppi: vediamo ora come si scelgono ed inseriscono i widget in una pagina web.

La barra di inserimento Spry

Il pannello inserisci, che si trova normalmente sopra la pagina attiva, si è arricchito di una nuova etichetta: Spry. Questa contiene in sintesi tutti gli elementi (chiamati con un termine ormai molto in voga, widget) che possono essere inseriti nelle pagine web. I widget sono divisi in tre sezioni principali; la prima dedicata interamente alla gestione di file XML; la seconda relativa invece alla compilazione di moduli (form), e l’ultima dedicata ad elementi di interfaccia, come menu a comparsa, pannelli a schede e a soffietto. In questo articolo ci dedicheremo proprio a quest’ultimi, che con pochi clic permettono di implementare elementi di interfaccia funzionali e accattivanti, senza alcuna conoscenza specifica di codice.

Fig. 3 – La barra di inserimento Spry.

Creare una barra di menu Spry

Già dalle precedenti versioni di Dreamweaver era possibile creare barre di menu, con il comando Inserisci > Oggetti immagine > Barra di navigazione. In effetti questa funzione è ancora disponibile in Dreamweaver CS3. È però ormai datata e anche alquanto macchinosa, e non ci stupiremmo se scomparisse definitivamente nelle prossime versioni del programma. Vediamo quindi come la stessa cosa possa essere realizzata con Spry in pochi passaggi.
Si parte con un nuovo documento impartendo il comando File > Nuovo. Si sceglie una Pagina Vuota in formato HTML, si imposta <nessuno> come Layout e si fa clic sul pulsante Crea.

Fig. 4 – La finestra Nuovo documento da cui è possibile scegliere diversi tipi di pagine.

Si salva la pagina appena creata con il nome Barra_Menu_Spry.html (File > Salva col nome). Ora non serve altro, è sufficiente fare clic sul pulsante Barra di menu Spry, dalla barra di inserimento Spry. In alternativa si può impartire il comando Inserisci > Oggetti layout > Barra di menu Spry. Dreamweaver mostra una finestra di dialogo per la scelta del layout, orizzontale o verticale. Si lascia l’impostazione su Orizzontale e si conferma on OK. 

Fig. 5 – La finestra di scelta per il Layout del menu.

Subito dopo appare la barra di menu nella parte superiore della pagina web. Questa è già preconfigurata con quattro menu principali. Il primo e il terzo di questi (voce 1 e voce 3) contengono già un menu a comparsa con alcune voci. A questo punto è necessario salvare nuovamente la pagina, e visto che è stato inserito un nuovo widget Spry, Dreamweaver ci informa con un nuovo messaggio per la copia dei file dipendenti.

Fig.6 – Con il nuovo salvataggio, Dreamweaver ci avverte ancora una volta che saranno copiati i files dipendenti, all’interno della cartella SpryAssets.

Per verificare già il risultato ottenuto è sufficiente eseguire un anteprima sul browser (Alt+F12).

Fig.7 – Il risultato, visualizzato su Safari.

A questo punto dedichiamoci alla comprensione di questo widget, e di come possa essere modificato. In primo luogo bisogna porre attenzione al metodo di selezione del widget. Se invece si fa clic sul bordo del DIV, si accede direttamente alle sue opzioni di modifica (mostrate nel pannello Proprietà). Se invece si fa clic sul testo delle singole voci, si possono fare solo modifiche marginali. In effetti, se si evidenzia il testo voce 1 e si tenta di modificarne il corpo o il font, si perde il legame con il suo CSS MenuBarItemSubmenu. Questo non va quindi fatto; ciò che si può realmente fare è modificare il testo, ed eventualmente allinearlo rispetto al DIV (sinistra, centrato, destra).

Fig.8 – Nel pannello Proprietà lo stile predefinito per il DIV è già impostato; qui, per non creare problemi si può solo decidere l’allineamento del testo.

Procediamo quindi, modificano le voci di menu come in figura 9, evidenziando solo il testo contenuto nei singoli DIV, senza toccare altro.

Fig.9 – I testi modificati.

A questo punto possiamo procedere con la modifica delle varie sotto voci di menu. In questo caso è necessario selezionare l’intero widget Spry, facendo clic sull’etichetta celesta posta sopra la barra dei menu, recante il nome Barra di menu Spry: MenuBar1. A seguire quindi il pannello Proprietà muta il suo aspetto, mostrando le opzioni di modifica per il widget.

Fig.10 – Il pannello Proprietà muta il suo aspetto, mostrando le opzioni di modifica per il widget selezionato.

Ora passiamo alla modifica delle voci del primo menu. Nel pannello delle proprietà si fa clic sul termine Software nella prima colonna a sinistra. Nella colonna di destra appaiono quindi le voci del menu a comparsa. Si fa quindi clic sulla prima e la si modifica, inserendo il nuovo testo nella casella Testo, posta alla sua destra. Si procede così per tutte le tre voci, come indicato in figura 11.

Fig.11 – Le voci di menu modificate.

Ci si sposta ora sul terzo menu, che ha preso il nome di Recensioni, selezionandolo ancora una volta dalla prima colonna a sinistra. In questo caso il menu è composto in modo diverso, giacchè oltre alle singole voci, esistono altre sotto voci nella prima posizione. Il criterio di modifica rimane comunque identico a quanto appena visto; quindi si procede inserendo i nuovi testi come in figura 12.

 Fig.12 – Le modifiche sul pannello delle proprietà sono immediatamente riscontrabili anche nella pagina web.

A questo punto possiamo terminare la modifica del menu, inserendo le URL a cui devono puntare tutte le voci. Sempre dal pannello Proprietà si selezionano le singole voci e si inserisce per ognuna la URL specifica nella casella Collegamento. Questa può essere trascritta, ad esempio nel caso di collegamenti esterni, oppure selezionata dai file locali, facendo clic sull’icona Sfoglia a lato della casella.

Modificare i colori di una barra di menu Spry

La personalizzazione dei widget spry viene eseguita operando direttamente sui file CSS a questi collegati. Se non si è molto pratici, un buon metodo è quello di iniziare dalla guida in linea. In effetti, quando si seleziona un widget dalla pagina attiva, nell’angolo in basso a sinistra del pannello Proprietà è scorgere la frase Personalizza questo widget. Facendo clic viene lanciata la guida in linea di Dreamweaver, già posizionata sulla sezione dedicata alle modifiche. 

Fig.13 – La guida in linea è un’ottima risorsa da cui partire per la modifica dei widget.

Dedichiamoci ora a modifiche basilari di colore. L’intento è quello di sostituire quel grigio spento, con colori più vivaci. Si apre il pannello CSS con il comando Finestra > Stili CSS. Nel pannello, se non già selezionata, si seleziona l’etichetta Stili CSS, e successivamente si fa clic su Tutte. In questo modo vengono mostrati tutti gli stili predefiniti per il widget selezionato. Scorriamo l’elenco fino a trovare lo stile ul.MenuBarHorizontal a. Selezionandolo, nel pannello inferiore (Proprietà di “ul.MenuBarHorizontal a”i) vengono mostrati i suoi attributi. Per modificare il colore di fondo si fa clic sulla casella grigia accanto a background-color e si seleziona un nuovo colore dalla palette. Volendo, è possibile modificare anche il colore del testo, selezionandolo dalla casella grigia scura, accanto  a color.

Fig.14 – Le modifiche effettuate nel pannello CSS vengono di nuovo immediatamente applicate ai menu nella pagina.

Andiamo ora a modificare il colore dello stato over per i menu, ovvero il colore che assume il DIV quando il puntatore si trova sopra questo. Scorriamo ancora la lista di stili alla ricerca di ul.MenuBarHorizontal a.MenuBarItemHover. Lo selezioniamo e nel pannello inferiore modifichiamo nuovamente il background-color sostituendolo con un altro colore.

Fig.15 – Bisogna indentificare con attenzione lo stile relativo allo stato over.

A questo punto possiamo effettuare un’anteprima nel browser (Alt+F12). Poichè le modifiche sono state effettuate sui file CSS e non direttamente sulla pagina, Dreamweaver presenta una finestra di dialogo, dove richiede che questi vengano salvati, per visualizzare correttamente la pagina. Si fa clic su Sì.

Fig.16 – Questo messaggio appare in fase di anteprima sul browser se i file CSS sono stati modificati ma non salvati.

Sostituire gli sfondi di colore dei DIV con immagini bitmap

Uno dei vantaggi dei CSS è la rapidità con cui si possono fare modifiche “cosmetiche” alle pagine web e agli elementi contenuti in queste. Proseguendo nella nostra esplorazione è interessante vedere quindi come gli sfondi di colore uniforme, finora usati nella barra del menu, possono essere sostituiti con immagini gif ad hoc. Nel nostro caso useremo le immagini gif già pronte che trovate nel CD allegato. Ciò non toglie che ognuno è libero di creare i propri sfondi a piacimento. A titolo informativo, noi abbiamo usato Adobe Fireworks CS3. Nel CD si trovano infatti anche i files sorgenti PNG.
La procedura che andiamo a descrivere merita molta attenzione per via di come è stato composto il menu di base. Allo stato attuale, salvo il menu Hardware, tutti gli altri contengono delle piccole frecce di colore nero, che indicano l’apertura di un sotto menu. Queste non sono altro che immagini gif, conservate dentro la cartella SpryAssets. In pratica, quindi, il procedimento prevede la sostituzione delle immagini gif già presenti in alcuni DIV e l’inserimento ex-novo di immagini gif, nei DIV che hanno solo un colore uniforme. Vista la nomenclatura presente nel pannello CSS è quindi importante fare molta attenzione ai vari passaggi, per evitare errori.
In primo luogo è necessario che all’interno della cartella principale del sito sia presente anche la cartella Immagini, con le relative gif da sostituire. Nel nostro caso, sono già presenti due gif (PulsanteOFF.gif e PulsanteON.gif) relative ai due stati di base.

Fig.17 – Il pannello File mostra gli elementi basilari della pagina. Si noti la cartella Immagini ed il suo contenuto.

Per iniziare si apre il pannello CSS, si fa clic sull’etichetta Tutte e si evidenzia lo stile ul.MenuBarHorizontal a. Nel pannello inferiore si fa clic su Aggiungi proprietà e dal menu a comparsa si sceglie background-image. Viene visualizzata una casella di immissione sulla destra, e in fondo ci sono due icone. Si fa clic sull’icona Sfoglia e nella finestra di dialogo che si apre si sceglie il file PulsanteOFF.gif, localizzato nella cartella Immagini del sito. Dopo questa operazione, si possono già notare alcuni DIV del menu che hanno mutato il loro sfondo dal colore uniforme alla nuova immagine. Ora è necessario definire una regola per la centratura e la ripetizione dell’immagine. Si fa clic nuovamente su Aggiungi proprietà e si sceglie background-position. Nella casella bianca che appare affianco si scrive center. Questo fa si che l’immagine venga centrata rispetto al DIV. Ora è necessario aggiungere un’ultima proprietà: background-repeat, e dal menu a comparsa che appare affianco si sceglie no-repeat. In questo modo, l’immagine sarà rappresentata una sola volta all’interno del DIV, senza che venga ripetuta. Per finire, è necessario rimuovere la proprietà background-color che determina il colore di fondo: basta evidenziarla e cancellarla con il comando Elimina proprietà CSS (il cestino in basso a destra).

Fig.18 – Dopo le prime modifiche, il risultato è già visibile nella pagina web, e i dettagli dell’operazione compiuta sono elencati nel pannello Proprietà del DIV prescelto.

A questo punto procediamo con l’intento di inserire la gif dello stato over, nei DIV che abbiamo appena modificato. Si evidenzia lo stile ul.MenuBarHorizontal a:hover e nel pannello inferiore si aggiungono le medesime proprietà già viste per il passaggio precedente, compresa la rimozione del colore di fondo, con la differenza che il file gif da selezionare è PulsanteON.gif. Al termine si esegue un’anteprima sul browser (Alt+F12) per verificare la correttezza delle operazioni.

Fig.19 – L’inserimento della gif per lo stato over è visibile con l’anteprima sul browser.

Ora passiamo ad occuparci dei DIV che già contengono un’immagine. Il primo da selezionare è ul.MenuBarHorizontal a.MenuBarItemSubmenu. In questo caso non aggiungeremo nuove proprietà, ma ci limiteremo a modificare quelle già esistenti. Nel pannello inferiore si fa clic sulla casella accanto a background-image. Questa già contiene il file SpryMenuBarDown.gif. Si fa clic sull’icona Sfoglia e lo si sostituisce con il file PulsanteOFF.gif. Poi si modificano le proprietà background-position e background-repeat come già visto. Adesso dobbiamo modificare nuovamente lo stato over, sostituendo il file gif con quello già visto in precedenza. In questo caso però, lo stato over non è solo uno, poichè le frecce colorate cambiano la loro direzione (richiamando altrettanti file gif) a seconda dello stato del puntatore. Per cui, l’operazione di sostituzione dovrà essere estesa a tre stili: ul.MenuBarHorizontal ul a.MenuBarItemSubmenu, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover e ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover.

Fig.20 – I tre stili da modificare per lo stato over.

Ormai l’operazione diventa quasi di routine, l’importante è sostituire il file gif con quello corretto PulsanteON.gif oltre ad impostare correttamente le proprietà di ripetizione e allineamento di questo. Come ultimo passaggio è necessario rimuovere i bordi grigi dei menu a comparsa. Si evidenzia lo stile ul.MenuBarHorizontal ul e nel pannello inferiore si elimina la proprietà border. Al termine di tutto si esegue nuovamente un’anteprima sul browser (Alt+F12) per verificare il risultato.

Fig.21 – Il risultato finale visualizzato su Safari.

Creare un Pannello a schede Spry

I pannelli a schede sono un valido aiuto nell’organizzazione di contenuti che devono essere immediatamente accessibili in una homepage. Un’esempio pratico è il sito di Repubblica, che in alto a destra mostra sempre un pannello con tre schede che riportano notizie di spicco dagli altri canali tematici. In questo modo, con un semplice clic, è possibile passare da una scheda all’altra, e grazie ad AJAX, senza alcuna necessità di ricaricare la pagina.

Fig.22 – Un esempio di impiego dei pannelli a schede sul sito di Repubblica.

L’inserimento e la modifica di un pannello a schede Spry è a dir poco imbarazzante per quanto semplice. Si fa clic sull’omonimo widget, dalla barra di inserimento Spry, e in un’istante appare il pannello nella pagina attiva. Di base sono presenti solo due pannelli, ma se ne possono aggiungere molti altri, dalla finestra delle proprietà. Come già visto in precedenza è necessario fare clic sul rettangolo celeste presente sopra i pannelli, modificando poi le impostazioni nella finestra Proprietà. Per passare invece da una scheda all’altra, con l’intento di popolarle di contenuti, è sufficiente spostare il puntatore sopra queste: appare un’occhio e con un clic viene visualizzata la scheda prescelta. I contenuti delle schede possono essere di qualunque tipo: testi, immagine, codice, contenuti multimediali, ecc. È sufficiente cancellare la parola Contenuto... sostituendola con ciò che serve. La personalizzazione dei colori e l’aggiunta di immagini si ottiene allo stesso modo di quanto già visto per la barra di menu Spry, ovvero operando direttamente sugli stili CSS.

Creare un Pannello a soffietto Spry

Il pannello a soffietto Spry è simile concettualmente al pannello a schede. Ma mentre il primo viene in genere usato per proporre contenuti eterogenei, questo viene usato per organizzare in sezioni parti diverse di un medesimo contenuto. Un’esempio pratico può essere la compilazione di un modulo, nel quale vengono richiesti una serie di dati che possono essere facilmente divisi in sezioni. Si pensi ad un modulo di richiesta informazioni per un sito di turismo, nel quale l’utente è invitato a lasciare sia le sue informazioni di contatto, sia le informazioni relative al suo soggiorno. Mettere insieme queste informazioni può dare un pò il senso del disordine, dividerle con un pannello a soffietto è invece più elegante oltre che utile.
Per inserire un pannello a soffietto si seleziona con un clic il widget Pannello a soffietto Spry, sempre dalla barra di inserimento Spry. Come per il pannello a schede, per passare da un soffietto all’altro ci si sposta sulla barra del soffietto, e non appena appare l’icona a forma di occhio si fa clic su questa. Anche in questo caso i soffietti possono essere aggiunti e riorganizzati tramite il pannello Proprietà, così come possono essere modificati nelle fattezze tramite gli stili CSS.

Fig.24 – Il pannello a soffietto Spry è concettualmente simile al pannello a schede.

Fig.25 – Un esempio di applicazione del pannello a soffietto Spry per la richiesta di informazioni di una residenza estiva.

Creare un Pannello comprimibile Spry

Il pannello comprimibile è sicuramente il più elementare tra tutti i widget. Lo scopo è quello di racchiudere un contenuto in un unica barra orizzontale, fino a quando l’utente non lo riapre facendoci clic. Di sicuro non aggiunge un grande valore a livello di interfaccia e navigazione, come invece accade con gli altri widget. È però pur vero che l’animazione intriga sempre un pò tutti: vedere un’immagine o un testo che appaiono e scompaiono in maniera altrettanto fluida è sicuramente piacevole. Le uniche impostazioni possibili sono la direzione (apertura o chiusura) e lo stato iniziale, entrambe si impostano dal pannello delle proprietà. Anche in questo caso, la personalizzazione grafica può essere effettuata lavorando con i CSS.

Effetti d’animazione con AJAX

Se sul versante dell’interattività e delle interfacce AJAX torna davvero utile, un altro campo in cui può essere usato efficacemente è l’animazione fluida di elementi. In effetti, il pannello comprimibile appena visto ci da già un primo assaggio di cosa è possibile fare, ma il bello deve ancora venire. Per capire cosa si può fare bisogna scavare un pò tra i menu di Dreamweaver, poichè gli effetti, non sono poi così in vista nell’interfaccia, come altre funzioni. Fanno infatti parte dei Comportamenti, e quindi bisogna aprire l’omonimo pannello (Finestra > Comportamenti) per poterli attivare. Una volta aperto si fa clic sul pulsante + e si sceglie la voce di menu Effetti. Ci sono in tutto sette effetti diversi:

1. Dissolvenza
2. Estensione
3. Evidenziazione
4. Scorrimento
5. Scossa
6. Spremuto
7. Veneziane

Per via dello spazio a disposizione non ci è possibile descriverli tutti, quindi ci focalizzaremo solo su uno. Comunque, come già visto per i widget Spry, una volta capito il criterio di funzionamento risulta semplice applicarlo agli altri. Nella breve procedura che segue vedremo come è possibile far apparire la versione ingrandita di un’immagine a partire da una miniatura. Presupposto fondamentale perchè questo riesca è appunto di avere due immagini: una piccola e una grande. Nel nostro esempio useremo le immagini che si trovano già nel CD di Applicando; potete usare quelle oppure due a piacimento.
Per iniziare si crea una nuova pagina vuota HTML (File > Nuovo), e la si salva subito con il nome Effetti_AJAX.html, nella cartella locale del sito. Per importare la miniatura si impartisce il comando Inserisci > Immagine. Nella finestra di dialogo che si apre si seleziona la cartella Immagini, si seleziona il file Copertina_Small.gif (oppure una vostra immagine piccola) e si fa clic su Scegli. Cogliamo l’occasione per ricordare che ai fini dell’accessibilità, Dreamweaver (già dalla versione 8) richiede l’inserimento di un testo ALT e di una eventuale descrizione lunga per l’immagine.
Ora è necessario inserire l’immagine grande. Per poter funzionare correttamente, non può però essere importata direttamente nella pagina, ma è necessario inserirla in un DIV. Siamo liberi di scegliere però se si tratta solo di un tag Div (per il quale dovremo poi creare una regola CSS), oppure di un Div PA (DIV con posizionamento assoluto) per il quale viene già creata una regola CSS. La convenienza dell’uno o dell’altro dipende da molti fattori, legati soprattutto al tipo di layout e funzionalità di cui è dotata un sito. Nel nostro caso, per esemplificare inseriamo un Div PA (Inserisci > Oggetti layout > Div PA), che è più facilmente posizionabile sulla pagina. 
Ora possiamo inserire l’immagine grande. Si fa clic all’interno del Div PA e si impartisce nuovamente il comando Inserisci > Immagine. Dalla cartella Immagini scegliamo il file Copertina_Big.gif

Fig.26 – Come si presenta la pagina dopo le prime operazioni: la miniatura si trova a sinistra al Div PA, che contiene l’immagine grande.

Sebbene il DIV si allarghi automaticamente per far posto all’immagine è opportuno impostarne la corretta dimensione, rendendola uguale all’immagine. Si apre il pannello CSS (Finestra > Stili CSS), si fa clic sull’etichetta Tutte, si fa clic sulla voce <stile> ed infine si seleziona lo stile #apDiv1. Nel pannello inferiore vengono mostrate le proprietà dello stile; l’altezza (height) e la larghezza (width) devono essere modificate per rispecchiare quelle dell’immagine. Nel nostro caso i valori sono rispettivamente 635 e 400. Oltre questo bisogna inserire due nuove proprietà, left (posizione rispetto al margine sinistro) e top (posizione rispetto al margine superiore), impostandole come in figura.

Fig.27 – Le dimensioni del Div PA devono essere modificate come quelle dell’immagine, e vanno aggiunte le proprietà left e top con i valori indicati.

A questo punto non rimane che rendere l’immagine grande invisibile, in modo che appaia solo quando l’effetto viene applicato. Dobbiamo quindi aggiungere una nuova proprietà: visibility (visibilità), impostandola su hidden (nascosto). Dopo aver aggiunto questa proprietà, notiamo che l’immagine grande scompare dalla pagina web. Niente paura! qualora servisse di riselezionarla per operare altre modifiche è sufficiente fare clic sull’etichetta Elementi PA del pannello CSS e poi di nuovo clic sull’unico DIV della lista, ovvero apDiv1. Ora siamo quasi in dirittura d’arrivo. L’immagine grande è stata correttamente modificata con tutte le proprietà giuste; non rimane che aggiungere l’effetto animato alla miniatura. Si fa clic quindi su quest’ultima. Si apre poi il pannello Comportamenti e si fa clic sul pulsante +. Dal menu a comparsa si sceglie la voce Effetti e poi ancora Scorrimento.

Fig.28 – Il menu Effetti si trova nel pannello Comportamenti.

Nella finestra di dialogo che si apre è necessario selezionare l’elemento di destinazione, aprendo il relativo menu a comparsa. Nel nostro caso c’è un solo elemento: apDiv1. Poi si passa ad impostare la durata dell’effetto in millisecondi, inserendo 500 al posto del valore standard. A questo punto si sceglie la direzione dell’effetto, impostando Scorrimento in basso dal menu a comparsa Effetto. I valori percentuali che seguono, servono a determinare il punto di partenza e di arrivo dell’elemento. Lasciandoli impostati a 0% e 100% si ha la certezza che il DIV appare dal “nulla” fino ad essere visualizzato per intero. L’ultima opzione riguarda l’alternanza dell’effetto, che può essere impostata in modo che l’animazione sia eseguita solo una volta, oppure a ciclo continuo, in avanti e indietro. Attiviamola, spuntando l’opzione Alterna effetto. Confermiamo le impostazioni con OK.

Fig.29 – La finestra delle opzioni per l’effetto Scorrimento.

Al termine delle impostazioni viene quindi creato un nuovo comportamento, visibile nell’omonimo pannello. L’evento standard è il clic del mouse (onClick). Volendo è però possibile modificarlo, facendo in modo che l’immagine fuoriesca anche solo quando il puntatore del mouse è sopra la miniatura. In questo caso si modificherebbe l’evento inserendo onMouseOver. Terminiamo con il salvataggio del file. Dreamweaver mostra un nuovo avviso per i file dipendenti, relativo al codice Spry necessario per far funzionare l’effetto.

Fig.30 – L’evento può essere modificato scegliendolo dal piccolo menu a comparsa nel pannello Comportamenti. Con un doppio clic sull’effetto Scorrimento, invece, si riapre nuovamente la finestra di impostazioni, per ulteriori modifiche.

A questo punto non rimane che effettuare un’anteprima nel browser (Alt+F12) e godersi il risultato. Nella pagina web è sufficiente fare clic sulla miniatura, per vedere l’immagine grande che appare dall’alto. Un altro clic sulla miniatura, provoca l’effetto contrario, con l’immagine che scompare verso l’alto.

Considerazioni finali

Quello che abbiamo visto è una parte delle potenzialità di Spry. In particolar modo, ci siamo soffermati sulle funzioni immediatamente accessibili dalla maggior parte degli utenti che sono un pò a digiuno di nozioni sul codice. C’è però tutta un’altra interessante parte relativa all’accesso dei dati in formato XML e alla preparazione dei form, sul quale Spry risulta essere davvero utile. Certo, in questo caso, è impossibile prescindere da una buona conoscenza dell’XML e da una conoscenza basilare sui form. In ogni caso, Adobe, con l’implementazione di questo framework, ha dato una grande mano a tutti quegli utenti che desiderano rendere le proprie pagine più ricche ed interattive, ma non conoscono i linguaggi di programmazione che stanno dietro le quinte del web. In effetti, come abbiamo potuto vedere, con pochi clic e qualche impostazione, è facile ottenere risultati di sicuro impatto.

Prima di scappare via, dai un'occhiata alla mappa del sito... potresti scoprire che ciò che cercavi è "nascosto" in un altra pagina, o potresti trovare altre cose interessanti, affini alla tua ricerca... un clic in più potrebbe avvicinarti alla soluzione... :-)