Il web e le interfacce utente
La User Experience (UX) e lo studio delle User Interface (UI)
sono oggetto di studio nel campo dello sviluppo software da molti anni,
tanto che tutte le aziende produttrici di sistemi operativi hanno
sempre speso molte risorse nella realizzazione e ottimizzazione di
linee guida per la creazione di controlli per l'interazione
applicazione - utente.
Nel web il campo di studi relativo alle
interfacce utente è invece stato limitato dalle scarse risorse di
interattività offerte dai linguaggi web che fino a poco tempo fa erano
rappresentate da link e form.
Negli ultimi anni, soprattutto grazie al
rinnovamento dei motori di rendering JavaScript e a nuove risorse per i
CSS e non ultimo per l'HTML, è stato possibile sperimentare nuove vie
di interazione, applicando e spesso riadattando i controlli utilizzati
in ambiente software alle pagine web.
L'esigenza in questo caso è
stata fin da subito quella di rendere l'ambiente del web il più
possibile simile a quello più diffusamente conosciuto dei programmi
desktop, applicando pattern come quello delle finestre
modali, dei calendari dinamici e dell'aggiornamento dei dati in tempo
reale senza bisogno di refresh.
JavaScript e AJAX sono i principali protagonisti di questa rivoluzione negli usi e costumi delle interfacce internet, anche grazie all'introduzione di framework e librerie di supporto per gli sviluppatori.
jQuery UI
In questa guida parleremo dell'attuale progetto ufficiale per la realizzazione di interfacce utente di jQuery, chiamato jQuery UI.
Il progetto, nonostante alcuni gravi problemi di compatibilità e
stabilità delle prime versioni, ha raggiunto ormai una buona maturità
ed un'architettura estendibile che lo rendono un ottimo punto di
partenza per tutti gli sviluppatori che vogliano dedicarsi alla
realizzazione di una moderna applicazione per il web.
Partito come un progetto parallelo a jQuery, UI è stato ben presto inglobato
nello sviluppo della libreria, pur mantenendo un gruppo di sviluppo
autonomo ancor oggi guidato da Paul Bakaus, il primo
sviluppatore del progetto. Arrivato alla prima versione stabile nel
tardo 2007, ha subito numerose revisioni e riscritture fino all'attuale
versione 1.7. Un'altro contributo importante al progetto viene da Filament Group, l'azienda alla base della struttura grafica dei controlli (o widget) e della loro architettura a temi (che vedremo in una lezione successiva).
Al momento jQuery UI è suddivisa in 3 macroaree di interesse:
- effetti grafici (in aggiunta a quelli di jQuery);
- interazioni complesse (ordinamento di elementi, drag and drop, etc);
- widget (controlli complessi come calendari, finestre modali e navigazione a schede).
jQuery UI: come, dove, quando
Poiché la struttura della libreria è estremamente modulare, sul sito del progetto è disponibile sia un download completo di tutto il codice (sia sorgente che compresso per la produzione), sia un builder,
con il quale ognuno può realizzare una versione personalizzata della
libreria e del tema per i controlli in modo da scaricare solo ciò che
serve all'applicazione: http://jqueryui.com/download.
In generale, quest'ultima opzione è utile una volta concluso il progetto
e definiti gli effetti ed i controlli di cui abbiamo veramente bisogno
in modo da alleggerire il peso dell'applicazione.
Pronti, partenza...
La versione di UI che useremo negli esempi è la 1.7.2 nel formato "completo" che si basa su jQuery 1.3 e versioni successive.
In ogni caso, tutti i pacchetti scaricati dal sito sono installabili molto semplicemente.
Decomprimete il file scaricato. Troverete tre cartelle: css (contenente il tema dei controlli (nel nostro caso smothness), js (con i file compressi di jQuery e jQuery UI) e development-bundle (con tutti i sorgenti ed i file dei singoli moduli della libreria).
inserite questo codice nella sezione della pagina in cui userete jQuery UI:
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>Nel caso abbiate già inserito un tag per richiamare
jQuery, potete omettere la seconda riga. Fate attenzione, comunque, che
la versione 1.7.2 di jQuery UI richiede jQuery 1.3.2.
Vedremo
più avanti come poter caricare altri temi e personalizzarli. Al momento
iniziamo a scoprire cosa ci offre jQuery UI a partire dagli effetti
grafici.
Per la natura stessa della guida, infine, vi consigliamo di abbinare la sua lettura a quella della Guida jQuery per cogliere al meglio le specificità del progetto e i modi in cui completa l'offerta del framework principale.