I selettori in jQuery utilizzano la sintassi dei selettori CSS; sono quindi concate-nabili e molto precisi nel ritornare gli elementi voluti.
Un altro vantaggio derivante dall’utilizzo di jQuery consiste nella moltitudine di progetti disponibili in rete (molto spesso con licenza Gnu GPL), i quali basano il proprio funzionamento proprio su jQuery. Pertanto aggiungere alla pagina elementi di interfaccia grafica avanzati, come strutture ad albero o menu a tendina, diventa davvero molto semplice.
Altra tecnologia che viene utilizzata in URC è AJAX [6]. AJAX, acronimo di Asynchronous JavaScript and XML. Questa è una tecnica di sviluppo per la realiz-zazione di applicazioni web interattive (Rich Internet Application). Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l’aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell’utente (vedi Figura 5.1).
AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Normal-mente le funzioni richiamate sono scritte con il linguaggio JavaScript. Tuttavia, e a dispetto del nome, l’uso di JavaScript e di XML non è obbligatorio, come non è necessario che le richieste di caricamento debbano essere necessariamente asincrone. Ad ogni modo il vantaggio più grande di usare AJAX è la grande velocità con la quale un’applicazione risponde agli input dell’utente.
5.4 Studio dell’interfaccia utente
Lo studio dell’interfaccia utente del sistema URC si pone come obiettivo principale di portare l’usabilità dell’applicazione ai massimi livelli. Questo, nell’ottica di lavoro di UNOX richiede la massima semplicità.
Semplificare la struttura di interfaccia significa garantire elevate prestazioni (an-che in mobilità), pulizia del layout e maggiore facilità d’uso. Per tale ragione, fin dalle fasi di progettazione della grafica, si è cercato di andare in tale direzione, svi-luppando un’interfaccia semplificata sia sotto il profilo grafico, sia sotto quello delle funzionalità.
Per cominciare occorre fare un elenco delle funzionalità che dovranno essere implementate nell’applicativo di interfaccia:
• Gestione delle diverse attività: la funzione principale consiste nell’avere il con-trollo sulle attività svolte dal servizio di sistema; per tale ragione le maschere di interfaccia dovranno consentire il recupero e la modifica dei dati salvati nella tabella activity del database e in tutte le altre tabelle di appoggio.
• Setup del sistema: la webapp di interfaccia utente dovrà permettere una com-pleta configurazione del sistema, ad esempio per la parte di preferenze e di configurazione dei figli diretti del nodo.
• Gestione utenti: considerando che la webapp può essere usata da utenti diffe-renti con privilegi diversi risulta importante prevedere un sistema di autenti-cazione e modifica degli utenti abilitati ad accedere al sistema.
5. L’INTERFACCIA UTENTE WEB-BASED 89
• Gestione multilingua: l’applicazione dovrà permettere la presentazione dei con-tenuti in più lingue (l’idea che sta alla base di tale funzionalità è già stata vista in precedenza).
Partendo dunque da tali considerazioni e cercando di aderire agli standard del settore, si è pensato di strutturare l’interfaccia come un classico pannello di amministrazione, nel quale le diverse funzionalità possono essere raggiunte attraverso un apposito menu di selezione.
La struttura del menu della webapp di URC è rappresentata in Figura 5.2.
Dashboard
Stato di funzionamento del sistema e statistiche riepilogative dei dati
Programmazione Controllo Manutenzione Setup
• Programmi di cottura
• Parametri di funz. • Programmi di cottura• Parametri di funz. • Log HACCP • Log cotture Sel. lingua • Warning e allarmi • Log autodiagnosi • Update firmware • Preferenze di sistema • Gestione nodi • Gestione attività • Gestione utenti • Gestione timers Login
Il login dell’utente è necessario per accedere ai contenuti della webapp
Figura 5.2: Struttura del menu funzioni dell’applicativo di interfaccia utente. Come è visibile nell’immagine si è deciso che tutti i contenuti della webapp debba-no essere raggiungibili previa autenticazione dell’utente; il login rappresenta quindi una condizione necessaria per poter utilizzare l’applicazione. Una volta effettuato il login si accede alla Dashboard, una pagina che riassume lo stato del sistema e una serie di dati statistici, come ad esempio il numero di nodi, il tempo medio di funzionamento dei forni collegati al sistema, ecc. Le diverse funzioni sono state in-vece raggruppate in 4 sezioni principali: programmazione, controllo, manutenzione e setup; ogni area racchiude in sè le attività appartenenti a quella specifica categoria. La selezione della lingua, invece, appare come una funzionalità del sistema alla quale si può accedere in qualsiasi momento, senza bisogno di accedere ad una particolare pagina.
Vediamo dunque come sono strutturati i contenuti di ogni diversa pagina analiz-zando il template grafico e il layout della webapp di URC.
5.4.1 Template grafico, layout e analisi di usabilità
Per la realizzazione del template grafico si è pensato di adottare uno stile sobrio, ma pur sempre elegante, e che segua le linee guida del più semplice layout in ambito web, composto dai blocchi header (testata), content (contenuto) e footer (fondo pagina).
90 5.4. STUDIO DELL’INTERFACCIA UTENTE
Inoltre per il disegno della grafica si è pensato di mantenere il set di colori usato solitamente dall’azienda: nero preponderante e scale di grigi.
Figura 5.3: Template grafico dell’applicativo di interfaccia utente.
Per fare in modo che l’utente possa raggiungere in ogni momento tutte le fu-nionalità del sistema si è deciso di posizionare nell’header della pagina un menu di selezione, il quale risulta ben visibile e facilmente accessibile. La posizione di tale menu non è stata scelta casualmente, ma deriva dalle regole di usabilità del mondo web. In quest’ambito, infatti, la parte della pagina che più di tutte attira l’atten-zione dell’utente è quella superiore. Posizionando il menu in tale zona si soddisfano inoltre le esigenze orientative dell’utente, in modo tale che non si affatichi durante l’esperienza di navigazione (perché, ad esempio, non sa spiegarsi come raggiungere la pagina dedicata ad una determinata funzionalità).
Un’altra scelta fondamentale è stata quella di rendere il layout della webapp non fisso, in modo che l’applicazione occupi tutta l’area visibile del browser web. In questo modo utenti dotati di monitor ad alta risoluzione possono sfruttare a pieno tutta l’area dello schermo.
Le opzioni per la selezione della lingua sono state posizionate nella parte superiore destra di ogni pagina, in modo tale che siano ben visibili e sempre accessibili.
Sempre nella parte superiore destra è stato posizionato il blocco di login/logout e come per la selezione della lingua anche questo blocco gode dei vantaggi offerti da tale posizionamento.
Il risultato è visibile in Figura 5.3, dove vengono messi in risalto gli elementi minimi di composizione del layout. L’immagine evidenzia, inoltre, alcuni piccoli accorgimenti che sono stati adottati in fase di sviluppo, come l’utilizzo del colore azzurro per i link (gli utenti sono infatti abituati ad identificare i link con questo colore), o la selezione di un colore differente per la voce di menu attiva.
5. L’INTERFACCIA UTENTE WEB-BASED 91
Figura 5.4: Struttura dei contenuti dell’applicativo di interfaccia utente con tab verticali.
I contenuti propri di ogni sezione sono stati organizzati in una struttura con dei tab verticali. L’effetto risultante è riportato in Figura 5.4, la quale evidenzia anche il risultato della visualizzazione dei contenuti in lingua inglese. In sostanza ogni funzionalità interna ad una determinata sezione può essere raggiunta selezionando il relativo tab laterale, il quale fa sì che il riquadro con i relativi contenuti compaia nell’area centrale-destra della pagina. Anche in questo caso il posizionamento dei pulsanti relativi ai diversi tab non è casuale, in quanto sfrutta l’area calda di sinistra, che dopo la zona superiore risulta essere la parte della pagina più vista dall’utente. 5.4.2 Gestione delle richieste AJAX e i loading box
Come è stato detto in precedenza, l’interfaccia utente di URC fa larghissimo uso di AJAX per aggiornare dinamicamente gli elementi contenuti nelle diverse pagine. AJAX, quando deve recuperare nuovi dati, evade una richiesta al server in back-ground per ottenere l’XML (o la stringa) di risposta. Al ricevimento dell’XML le librerie AJAX, se necessario, avvieranno automaticamente la funzione JavaScript incaricata di modificare la pagina (ad esempio facendo uso di jQuery) per visualiz-zare i nuovi dati richiesti. Considerando però che la richiesta HTTP effettuata da AJAX viene eseguita in background di default l’utente non ha un riscontro diretto sull’effettiva attività in corso.
Ad esempio, se l’attività viene avviata alla pressione di un link, nell’arco di tempo successivo al click (fino al ricevimento dei dati da parte del server) l’utente non può capire se la richiesta AJAX è stata effettivamente ricevuta dal server e se