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.
2 / 18

Animazioni