5 Evoluzione
5.1 Verso EPC v3
Una volta stabilite le aree con maggiore necessità di intervento (§ 4.3.6.4), è stata proget- tata l’interfaccia grafica che EPC v3 avrebbe dovuto avere. A tale proposito si è deciso di effettuare le seguenti modifiche maggiori:
• Adottare un layout grafico realizzato con i <div> ed i fogli di stile, al posto delle tabelle;
• Realizzare un menu principale realizzato con le tabs piuttosto che con i bottoni, impiegando un colore diverso e distintivo per ogni pagina;
• Inserire un albero di navigazione valutando la possibilità di poter visualizzare tutti gli antenati di un nodo, tutti i figli ed eventualmente i fratelli;
• Rimuovere la pagina dei dettagli inserendo un elemento per visualizzare i dettagli di un nodo senza dover cambiare pagina;
• Inserire funzioni di zoom e pan nella visualizzazione delle immagini;
• Migliorare la qualità grafica e l’usabilità generale inserendo animazioni.
Analogamente è stato pianificato di apportare miglioramenti alla base di dati, all’architet- tura software e alla logica delle funzioni realizzate.
Le modifiche da effettuare hanno condotto ad esempio all’esigenza di utilizzare strumenti avanzati come le librerie JQuery e alla necessità di adottare le classi per ottenere un mag- giore rigore nel controllo delle entità del sistema.
Nei seguenti paragrafi saranno descritte le varie novità inserite evidenziando le differenze tra EPC v3 e la precedente versione.
5.2 Modifiche alla base di dati
La base di dati, pur non avendo subito stravolgimenti, ha visto numerose migliorie sia concettuali che strutturali rispetto alla struttura riportata in § 3.5. Le modifiche effettuate sono le seguenti:
• I nomi degli attributi sono stati modificati in modo da essere univoci, pertanto non ambigui anche se non sono specificate le tabelle interessate;
• Le parti ed i disegni adesso appartengono ad uno specifico catalogo. Questo significa che le eventuali stesse parti utilizzate in più cataloghi vengono inserite nel data base con id differenti. Questo perchè i relativi campi “name” e “title” possono essere diffe- renti per ogni catalogo;
• Le informazioni che associano i nodi ai disegni sono state spostate nella tabella dei nodi, pertanto non è più necessaria la tabella “presence”;
• Le informazioni relative ai disegni sono state suddivise tra la tabella “drawings”, che mantiene le informazioni codice disegno e titolo, e la tabella “sheets”, che acquista le informazioni di numero di foglio, indice di revisione e nome del file relative ad una specifica tavola. L’associazione è di un disegno a molte tavole;
• L’identificativo “dn” (drawing number) ha sostituito il campo “dwgnum” nella tabella
“drawings”, in modo da rendere tale campo analogo all’attributo “pn” della tabella
“parts”;
• Le informazioni relative alla tabella “countries” sono state suddivise tra la tabella
“countries” stessa e la tabella “languages”, in modo da separare concettualmente paesi e lingue. In questo modo i paesi sono associati alle aziende e le lingue sono associate agli utenti;
• La tabella “partlists” per pura comodità è stata rinominata in “lists”.
Oltre a questo sono stati rivisti i tipi degli attributi, riguardo ad un dimensionamento più oculato delle strutture dati.
Figura 5-1. Base di dati di EPC v3
• BASKETS (basket_user_id, basket_part_id, basket_qty);
• CATALOGUES (cat_id, cat_name, cat_code, cat_impfile, cat_comp_id);
• COMPANIES (comp_id, comp_name, comp_code, comp_type, comp_country_tag);
• COUNTRIES (country_tag, country_name);
• CUSTOMS (custom_part_id, custom_cpn, custom_comp_id);
• DRAWINGS (dwg_id, dwg_cat_id, dwg_dn, dwg_title);
• LANGUAGES (language_tag, language_name)
users PK user_id
user_name user_password user_firstname user_lasttname user_level FK2 user_language_tag FK1 user_comp_id
baskets PK,FK2 basket_user_id PK,FK1 basket_part_id
basket_qty
catalogues PK cat_id
cat_name cat_code cat_impfile FK1 cat_comp_id
companies PK comp_id
comp_name comp_code comp_type FK1 comp_country_tag
countries PK country_tag
country_name
customs PK,FK2 custom_part_id PK custom_cpn PK,FK1 custom_comp_id drawings
PK dwg_id
FK1 dwg_cat_id dwg_dn dwg_title
imports PK import_id
import_line import_cat_id import_del import_fbs import_parent_fbs import_ref import_pn import_cpn import_description import_qty import_mu import_spn import_supplier import_spare import_rep import_dn import_title import_rev import_sheet import_filename import_insertion nodes
PK node_id
FK2 node_cat_id FK3 node_parent_id
node_fbs FK1 node_part_id
node_ref node_qty node_mu FK4 node_dwg_id
node_line
lists PK list_id
list_line list_cat_id list_del list_seq list_assy list_ref list_pn list_cpn list_description list_qty list_mu list_spn list_supplier list_spare list_rep list_dwgnum list_title list_rev list_sheets list_filename list_insertion parts
PK part_id
part_pn FK1 part_cat_id
part_name part_spare part_rep sheets
PK sheet_id
FK1 sheet_dwg_id sheet_num sheet_rev sheet_filename
supplies PK,FK1 supply_part_id PK supply_spn PK,FK2 supply_comp_id languages
PK language_tag language_name
• NODES (node_id, node_cat_id, node_parent_id, node_fbs, node_part_id, node_ref, node_qty, node_mu, node_dwg_id, node_line);
• PARTS (part_id, part_cat_id, part_name, part_spare, part_rep);
• SHEETS (sheet_id, sheet_dwg_id, sheet_num, sheet_rev, sheet_filename);
• SUPPLIES (supply_part_id, supply_spn, supply_comp_id);
• USERS (user_id, user_name, user_password, user_firstname, user_lastname, user_level, user_language_tag, user_comp_id);
5.3 Architettura software
Differentemente dalle precedenti versioni descritte in § 3.6, EPC v3 ha un livello di fram- mentazione elevato. Le pagine Web sono raccolte secondo un doppio raggruppamento: ad un livello interno sono raggruppate per funzione svolta, mentre ad un livello esterno sono raggruppate per tipologia di pagina (.php, .js, .css, .html). In questo modo la logica è man- tenuta completamente separata dalla grafica, come meglio illustrato in seguito in § 5.3.4.
Le cartelle sono quindi strutturate modo seguente:
• classes: contiene i files .php delle classi di accesso al data base;
• drawings: cartella che contiene le figure di ogni catalogo, a loro volta strutturate in cartelle nominate secondo il codice catalogo;
• export: cartella di default in cui esportare i cataloghi inseriti (file Excel .xls);
• import: cartella di default in cui si conservano i file Excel .xls dei cataloghi importati;
• inc: contiene una serie di script di fondamentale importanza, tra i quali:
- ajax: cartella contenente la logica (file .php) delle pagine Web, sotto-strutturata nelle cartelle “basket”, “catalogues”, “companies”, “print”, “search”, “structure” e
“users”;
- lang: cartella che contiene i files di lingua (file .php);
- inc.class_inclusion.php: contiene la logica che include automaticamente le classi;
- inc.start.php: script contenente funzioni da lanciare all’avvio e di utilità, avvio ses- sioni, connessione al DB, scelta della lingua etc;
- inc.config.php: script contenente le informazioni di configurazione;
- inc.end.php: script contenente funzioni di chiusura applicazione;
• libs: cartella contenente le librerie esterne:
- dompdf: contiene la libreria “dompdf”;
- smarty: contiene la libreria “smarty” più alcune funzioni specifiche sviluppate;
• log: cartella che contiene i log di importazione dei cataloghi. Tiene traccia di qualsiasi anomalia riscontrata durante l’importazione;
• resources: cartella contenente le risorse utilizzate dall’applicazione:
- css: cartella contenente i fogli di stile utilizzati (files .css);
- images: cartella che contiene le immagini e le icone richiamate nei fogli di stile;
- js: cartella contenente gli script Javascript (file .js) inclusi da JQuery e quelli cre- ati specificatamente per l’applicazione;
• templates: cartella che contiene tutti i file di presentazione grafica dei contenuti all’utente finale:
- basket: cartella contenente i layout della pagina “carrello della spesa”;
- catalogues: cartella contenente i layout della pagina “cataloghi”;
- companies: cartella contenente i layout della pagina “aziende”;
- search: cartella contenente i layout della pagina “ricerca”;
- structure: cartella contenente i layout della pagina “struttura”;
- users: cartella contenente i layout della pagina “utenti”;
- base.html: template principale che include tutti gli script Javascript e i fogli di stile;
- base_inner.html: template che include la top_bar (ovvero le lingue, il messaggio di benvenuto e il comando di logout) e la tabs_bar (menu principale);
- empty_response.html: contiene il template per i casi in cui si hanno liste di risultati nulle;
- heatmap.html: template per le mappe di calore;
- init_js.html: contiene la variabile impostata sul percorso principale dell’applica- zione;
- login.html: contiene il form di accesso ad EPC;
• templates_c: cartella che contiene i file di presentazione grafica compilati, ovvero pre-processati e trasformati in PHP;
• ajax.php: file principale di gestione dei comandi AJAX;
• index.php: pagina iniziale.
Figura 5-2. EPC3 - Struttura dei files
5.3.1 AJAX - Asyncronous Javascript and XML
Un Browser effettua connessioni al Server non solo quando l'utente digita un nuovo indi- rizzo sulla barra degli indirizzi o quando preme su di un link, ma anche quando nell'HTML sono presenti riferimenti a
esterni, tramite TAG come IMG, SCRIPT, EMBED, OBJECT, STYLE, etc…
Ad ognuna di queste richieste il Browser invia le informazioni necessarie per riconoscere lo User-Agent (il Browser stesso) ed i cookie per riconoscere l'utente.
I tipi di richiesta HTTP possono essere GET e POST (o anche PUT nel caso di upload).
Talvolta i Browser potrebbero memorizzare in cache le pagine con parametri GET e quindi non inoltrare nuove richieste desiderate dal Client.
Con l'uso di Javascript è possibile aggiungere all'HTML alcuni elementi con riferimenti esterni. Se ad esempio viene caricata un’immagine e subito dopo si vuole visualizzarne le dimensioni è necessario considerare il fatto che l'immagine, scaricata da un thread diverso da quello che esegue il Javascript, potrebbe non essere ancora completamente scaricata:
Figura 5-3. Flussi a diverse velocità
È facile ritrovarsi a caricare immagini i cui tempi di caricamento siano maggiori del tempo di esecuzione delle istruzioni JavaScript e quindi è facile incontrare questo problema.
Un meccanismo per caricare dinamicamente i contenuti della pagina può essere quello di utilizzare l'header “Refresh” del protocollo HTTP: con questo header il Server può dire al Browser di aggiornare la pagina dopo un numero specificato di secondi. Se la pagina è in PHP può modificare il contenuto dell'output e presentare contenuti differenti. Utiliz- zando questo metodo, tuttavia ogni elemento della pagina viene ricaricato, e quindi il Browser è costretto ad effettuare un nuovo rendering per ogni nuovo elemento ricaricato nella pagina (all'inizio formatta il testo, ma nel caso vengano caricate immagini il testo deve essere impaginato nuovamente). In questa situazione è molto difficile per l'utente riconoscere i cambiamenti da una pagina all'altra perché le modifiche avvengono progres- sivamente generando una sorta di movimento su tutti gli elementi. La percezione del movimento che ha l'occhio umano suggerisce di aggiornare su una pagina solamente le parti che devono essere modificate e non tutta la grafica. Piccole variazioni possono essere subito percepite dall'utente.
Con JavaScript è possibile richiamare il caricamento di un singolo oggetto, ad esempio specificando degli attributi diversi nei tag da ricaricare (dimensione delle immagini, coo- kie, etc…). Con questo meccanismo si può caricare, ad esempio, come immagine uno script PHP sul Server che, in base alle variabili GET impostate, setta dei cookie sul Client.
Caricamento img Esecuzione JS
document.write(“<img…/>”);
…
…
// lettura dimensioni
Tali cookie vengono aggiunti al vettore dei cookie relativi alla pagina corrente sul Browser e si possono accedere tramite JavaScript.
Una soluzione tecnologicamente più elegante è quella di effettuare richieste al Server e porsi in attesa della risposta da parte di esso.
Nel JavaScript non è presente la funzione sleep(), ma possiamo memorizzare lo stato di esecuzione e impostare un timeout per riprendere dopo un certo tempo l'esecuzione.
AJAX consente di creare richieste HTTP al Server, inviarle ad un Server e attendere la ricezione della risposta. Tramite apposite interfacce consente di memorizzare una o più richieste, e di ricevere notifiche all'avvenuto completamento della transazione. Questi tempi non sono fissi, ma dipendono dallo stato attuale della rete e dalla dimensione della richiesta e della risposta. AJAX non garantisce, quindi, l'ordine in cui vengono richiamati gli handler di notifica di avvenuto completamento. A questo proposito bisognerebbe con- siderare la necessità di lavorare in mutua esclusione sulle variabili condivise, ma poiché JavaScript viene eseguito su un singolo thread il problema non si pone.
Il meccanismo di funzionamento delle richieste AJAX prevede di creare un particolare oggetto JavaScript che si chiama XMLHttpRequest in Firefox, o ActiveXObject in Inter- net Explorer.
Per preparare la richiesta da inviare al Server si devono quindi prevedere dei tentativi per individuare il tipo corretto di oggetto da istanziare a meno che non si utilizzi una qualche soluzione che compia tale operazione in modo trasparente al programmatore.
5.3.2 JQuery - libreria Javascript
Jquery è un nuovo tipo di libreria JavaScript, distribuita sotto licenza GPL v2, veloce e sintetica che semplifica la navigazione tra gli elementi dell’HTML, la gestione degli eventi, l’animazione e soprattutto le interazioni di tipo AJAX [24].
Figura 5-4. JQuery logo
I principali motivi per cui è stato scelto di utilizzare JQuery sono i seguenti:
• Cross-browser: JQuery rende il codice Javascript indipendente dal Browser utiliz- zato, per cui quando viene utilizzato AJAX il programmatore non deve curarsi di instanziare l’oggetto corretto, dal momento che questo onere è demandato a JQuery.
• Migliaia di plugin disponibili: JQuery offre plugins per qualsiasi necessità, ci sono plugins per l’uso di AJAX, per le animazioni e gli effetti, per il DOM, per gli eventi, per i form, per la navigazione, per le tabelle, e tanti altri.
• Codice sintetico: JQuery offre un semplificato accesso agli elementi del DOM ed una facile concatenazione degli eventi ottenuta attraverso il semplice accodamento del codice sulla stessa riga di comando.
EPC v3 fa largo uso di JQuery v1.3.2, inclusi molti plugins per le ottenere le strutture, le funzioni e gli effetti desiderati.
La seguente tabella elenca i plugins JQuery utilizzati nell’applicazione.
Tabella 5-1. Plugins JQuery utilizzati
Nome File incluso Funzione
autocomplete jquery.autocomplete.js
jquery.autocomplete.css
Propone all’utente una lista di risultati in accordo con i caratteri iniziali specificati. Quanti più caratteri sono inseriti, tanto più la lista viene affinata
blockui jquery.blockui.js Blocca le interazioni dell’utente con una pagina mentre è in corso un’operazione (ad esempio AJAX)
easing jquery.easing.1.3.js Permette di scegliere tra una vasta gamma di effetti per le animazioni di apertura/chiusura di un elemento form jquery.form.js Abilita i form ad utilizzare il metodo AJAX mousewheel jquery.mousewheel.min.js Aggiunge il supporto all’utilizzo della rotella del
mouse per gestire eventi
preloadCssImages preloadCssImages_v5.js Precarica automaticamente le immagini dal CSS scrollTo jquery.scrollTo.min.js Permette di effettuare lo scrolling automatico della
pagina verso la posizione desiderata
Successivamente saranno descritte nel dettaglio le soluzioni adottate che sono risultate particolarmente complesse ed interessanti dal punto di vista tecnico.
5.3.2.1 Struttura ad albero del catalogo
Per quanto riguarda la struttura ad albero è stato dapprima pensato di utilizzare il plugin JQuery “File Tree”, tuttavia nessuna configurazione dei parametri disponibili permetteva di ottenere la grafica desiderata. Quindi sono state sviluppate una logica e una grafica ad hoc composte dagli elementi mostrati in Figura 5-5.
Figura 5-5. Struttura ad albero
1. Icona “Homepage”: icona a forma di casetta per indicare il nodo radice;
2. Riga “Homepage”: nodo radice di tutti i cataloghi caricati;
3. Riga legenda “ancestori”: riga non funzionale che indica il significato dei campi corri- spondenti, ovvero il part number (P/N) e la descrizione;
tablesorter jquery.tablesorter.min.js Permette all’utente di ordinare una tabella secondo un campo a scelta senza ricaricare la pagina
ui jquery-ui-1.7.2.min.js Fornisce un set di plugin che includono le interazioni, i widgets ed effetti grafici
Tabella 5-1. Plugins JQuery utilizzati
Nome File incluso Funzione
1 2
4 3 6 5
7 9 8
10 11
12
4. Icona “cartella numerata”: icona a forma di cartella aperta con un numero posizionato sopra che indica la profondità di livello del relativo nodo;
5. Righe azzurre, testo in corsivo: righe dei nodi ancestori dal nodo corrente fino a risa- lire verso il nodo radice (“Homepage”);
6. Icona rossa: indica il nodo corrente, ovvero quello aperto al momento. Può essere una cartella o un documento a seconda che lo stesso nodo abbia o non abbia nodi figli associati;
7. Riga blu, testo grassetto: riga del nodo corrente, dotata degli stessi campi dei nodi ancestori;
8. Riga legenda “figli”: riga non funzionale che indica il significato dei campi corrispon- denti, ovvero il riferimento in figura (Ref.), il part number (P/N) e la descrizione;
9. Icona “documento”: indica uno dei nodi figli del nodo corrente, che non ha ulteriori figli, ovvero rappresenta una foglia della struttura;
10.Scroll bar: barra di scorrimento verticale che compare automaticamente quando il numero di figli eccede l’altezza della pagina;
11.Icona “cartella”: indica uno dei nodi figli del nodo corrente, dotato esso stesso di ulte- riori figli;
12.Righe bianche, testo normale: righe dei nodi figli. Nel caso la descrizione sia troppo lunga hanno overflow: hidden, quindi la parte in eccesso è nascosta, tuttavia può essere letta per intero sul pannello dei dettagli.
La logica di funzionamento prevede che il nodo corrente sia salvato in una variabile di sessione, per cui viene mantenuto al cambiare di pagina, finché l’utente non naviga verso un nodo diverso.
5.3.2.2 Pannello dei dettagli
Il pannello dei dettagli consiste in un <div> nel quale sono riportati i dettagli relativi al nodo esaminato, nonché un form per l’invio al carrello della spesa della parte associata al nodo stesso.
La logica di gestione dell’apertura e della chiusura del pannello è realizzata tramite le due funzioni JQuery openBubbleInfo() e closeBubbleInfo(), comandate principalmente dagli eventi “mouseover” e “mouseout”, per la realizzazione delle quali è stato preso spunto dal plugin Coda Bubble [25].
Apertura:
• Il pannello dettagli è normalmente nascosto su un livello z-index superiore a quello della pagina;
• Il pannello dettagli viene mostrato al passaggio del mouse sulla riga relativa al nodo corrente oppure a ciascuno dei nodi figli, con una trasparenza pari al 5% rispetto alla tavola illustrata sullo sfondo;
• L’apertura avviene con un’animazione di fade in da sinistra verso destra che copre una distanza orizzontale di 30 pixels;
• La posizione della freccia è in grado di trascorrere verticalmente sull’intero lato sini- stro del pannello, in modo da indicare sempre quale sia il nodo di cui si mostrano i dettagli, anche se questo si trova nella lista in una posizione in basso rispetto alla pagina.
Figura 5-6. Pannello dettagli
Chiusura:
• All’uscita del mouse dall’area del pannello dettagli si avvia un timer di chiusura di 1 secondo;
• Se entro tale periodo il mouse non rientra nell’area, il pannello viene chiuso (nasco- sto);
• La chiusura avviene con un’animazione di fade out da sinistra verso destra che copre una distanza orizzontale di 30 pixels;
Passaggio:
• Se il mouse si sposta verticalmente sulla riga corrispondente ad un nodo diverso da quello del quale si sta visualizzando il pannello dettagli, il sistema mostra il nuovo pannello;
• Il passaggio avviene attraverso uno scroll verticale della posizione del pannello e/o della freccia, sostituendo le informazioni interne al pannello stesso con quelle relative al nuovo nodo visualizzato;
• Il nuovo pannello visualizzato è sottoposto a tutte le precedenti regole riguardo alla chiusura.
Mantenimento:
• Sotto le seguenti condizioni di spostamento del mouse da un nodo ad un altro si ha il mantenimento del pannello dettagli relativo al primo nodo puntato:
- se il mouse si muove verso destra all’interno del cono di 90° di cui in Figura 5-7;
- se il mouse si muove al di sopra di una certa velocità tale che la differenza di posi- zione tra due successivi eventi di tipo mousemove sia superiore a 2 pixels;
Le condizioni di mantenimento sono state studiate in modo da permettere all’utente di spostarsi sul pannello dettagli per aggiungere la parte selezionata al carrello della spesa senza passare accidentalmente ad un’altro nodo (e quindi ad un’altra parte del veicolo). A tal fine si osservi che il cono di colore più scuro di Figura 5-7 si trova sempre inscritto nel cono di 90° sviluppato a destra della riga corrente.
Figura 5-7. Area di mantenimento
5.3.2.3 Visualizzatore delle immagini
Le tavole illustrate sono poste entro un <div> con overflow: hidden per cui qualsiasi parte di immagine al di fuori dallo spazio delimitato dalla finestra principale viene nascosta.
Normalmente l’immagine verrebbe visualizzata a dimensioni reali. Con la logica adottata il Client, dopo aver impostato lo zoom = 0, legge la larghezza sizex e l’altezza sizey dell’immagine e ne calcola il rapporto:
Quindi sono ricavate la larghezza max_w e l’altezza max_h dell’area di visualizzazione e l’immagine viene ridimensionata in base alle dimensioni della suddetta area, nel seguente modo:
• Immagine “larga” se :
imgratio sizey sizex ---
=
maxw imgratio maxh
• Immagine “alta” se
dove w ed h sono le dimensioni dell’immagine adattata a max_w e max_h.
A questo punto è necessario ricavare la posizione dove inserire l’immagine, attraverso le formule:
Figura 5-8. Posizionamento dell’immagine all’interno dell’area di visualizzazione
Se è presente un coefficiente di zoom > 0 il posizionamento dell’immagine cambia di conseguenza. Le nuove dimensioni dell’immagine sono quindi:
In base alla posizione del mouse al momento della richiesta di zoom, vengono calcolati due parametri:
• ratiox = (posizione_orizzontale_ mouse - offset_orizzontale_div) / width
• ratioy = (posizione_verticale_mouse - offset_verticale_div) / height w = maxw
h = w imgratio
maxw imgratio maxh
w h
imgratio ---
=
h = maxh
posx maxw–w ---2
=
posy maxh–h ---2
=
posy
posx
w = w1+zoom h = h1+zoom
Quindi la nuova posizione dell’immagine risulta essere centrata nel punto dal quale viene lanciato il comando di zoom:
dove width e height mantengono le dimensioni dell’immagine precedenti allo zoom.
Lo zoom è una funzione additiva che viene comandata dal movimento della rotella del mouse aggiungendo/sottraendo il 10% delle dimensioni ad ogni scatto. Coefficienti di zoom inferiori a zero vengono comunque impostati a zero.
La funzione pan è invece realizzata con l’aiuto del plugin jqueryUI, attraverso l’istru- zione:
$("#drawing img:first").draggable()({"stop": moved});
La funzione draggable installa gli handler per mousedown, mousemove e mouseup per la gestione del trascinamento. A questa si aggiunge l’hash {'stop': moved} che chiama la funzione moved al rilascio del tasto del mouse (mouseup).
function moved(event, ui) {
posx = ui.position.left;
posy = ui.position.top;
}
La funzione moved ricalcola le posizioni correnti dove è posizionato l’estremo superiore sinistro dell’immagine.
5.3.2.4 Impaginazione dei risultati
L’impaginazione dei risultati è utilizzata nella pagina “Ricerca” per evitare che al proli- ferare del numero di risultati di una ricerca siano istanziati centinaia o addirittura migliaia di oggetti, con conseguente rallentamento dell’interfaccia o addirittura blocco dell’esecu- zione dello script nel caso peggiore.
A livello di logica la funzione di impaginazione si ottiene limitando il numero di risultati della query di ricerca a 30 records attraverso l’aggiunta del seguente vincolo:
posx = posx–w–width ratiox posy = posy–h–height ratioy
zoom max 0 zoom delta ---10
+
=
LIMIT <primo indice>, <secondo indice>
Figura 5-9. Strumenti di navigazione delle pagine dei risultati
A livello grafico la navigazione attraverso le pagine è composta dai seguenti strumenti:
• Bottone “<<“: prima pagina dei risultati;
• Bottone “<“: pagina precedente;
• Numero pagina in blu sottolineato (link): fino a 3 pagine precedenti;
• Numero pagina in nero: pagina attuale;
• Numero pagina in blu sottolineato (link): fino a 3 pagine successive;
• Bottone “>“: pagina successiva;
• Bottone “>>“: ultima pagina dei risultati;
• Dropdown list: selezione della pagina dall’elenco completo.
5.3.2.5 Ordinamento dei risultati
L’ordinamento dei risultati è stato introdotto nelle pagine dove si ha una lista di risultati, vale a dire:
• pagina “Ricerca”;
• pagina “Utenti”;
• pagina “Cataloghi”;
• pagina “Aziende”;
• pagina “Carrello della spesa” (esempio in Figura 5-10);
Figura 5-10. Ordinamento degli articoli contenuti nel carrello della spesa
L’ordinamento è ottenuto attraverso l’impiego del plugin “tablesorter”, ed in particolare nel caso di EPC v3 è stato configurato con le seguenti opzioni:
• headers: { 0: {sorter: false} }: la prima colonna, dedicata alle azioni, non è oggetto di ordinamento;
• sortList: [[2,0]]: ordinamento di default, il primo numero è la colonna di ordinamento (0 = prima colonna), ed il secondo numero è il tipo di ordinamento (0 = ascendente, 1 = discendente);
• widgets: ['zebra']: applica un’alternanza di colori a scelta tra le righe pari (even) e le righe dispari (odd).
5.3.2.6 Feedback delle operazioni utente
Ad ogni inserimento, modifica e cancellazione è necessario che l’utente abbia un riscontro visivo dell’esito positivo dell’operazione. Un esito negativo è segnalato dalla comparsa di uno o più campi di errore nel form associato, per cui non necessita di ulteriori effetti. A tal fine è stato scelto di utilizzare la seguente grafica:
• inserimento: se la lista dei risultati presenta una scroll bar verticale, allora la lista scorre automaticamente in 1 secondo di tempo fino a portare la riga inserita al primo posto. Di seguito la nuova riga inserita viene evidenziata di un colore verde chiaro per 2 secondi;
• modifica: la riga selezionata per la modifica viene evidenziata di un colore giallo chiaro. Al completamento dell’operazione se la riga modificata non è visibile allora la lista scorre automaticamente in 1 secondo di tempo fino a portare la riga inserita al primo posto. Infine la riga modificata viene evidenziata nuovamente di un colore giallo chiaro per 2 secondi;
• cancellazione: la riga selezionata per la cancellazione viene evidenziata di un colore arancio chiaro. Alla conferma dell’operazione la riga da eliminare riduce progressiva- mente la sua altezza e il font fino a scomparire in 0,5 secondi.
Le funzioni sopra descritte sono realizzate con i metodi addClass(), animate() e remove- Class() di JQuery, con il plugin scrollTo() per lo scorrimento automatico della scroll bar ed con l’apporto della notazione JSON (Javascript Object Notation), descritta in § 5.3.3.
Esempi di applicazione:
scrollTo("#id", 1000, {easing: "swing", onAfter: function(){ ... } La funzione scrollTo si applica ad un id, in un certo tempo in millisecondi, con l’effetto scelto (easing: “swing”) e di seguito si applica la funzione specificata.
$("#id").addClass("modify")
La funzione addClass aggiunge la classe CSS “modify” all’id selezionato.
$("#id").animate({'opacity':1}, 2000, 'swing', function() { .. } La funzione animate esegue la funzione CSS specificata con un certo indice di traspa- renza, nel tempo indicato in millisecondi, con l’effetto grafico scelto (swing)
$("#id").removeClass("modify");
La funzione addClass toglie la classe CSS “modify” dall’id selezionato.
5.3.3 JSON - notazione
Ad un’interrogazione da parte di un Client il Server risponde inviando una pagina HTML.
Tuttavia se oltre a chiedere una pagina HTML si richiede al Server di rispondere con uno stato di successo o fallimento di una certa operazione, questo non ha modo di soddisfare la richiesta.
In tale contesto interviene JSON, permettendo di ottenere un vettore contenente l’HTML, l’indice di successo e l’elemento del DOM dove andare ad inserire il risultato. In caso di successo si ha:
$json_response['ok'] = true;
$json_response['html'] = $smarty->fetch($template_1);
$json_response['target'] = '<target_id_1>';
Mentre in caso di fallimento si ha:
$json_response['ok'] = false;
$json_response['html'] = $smarty->fetch($template_2);
$json_response['target'] = '<target_id_2>';
La funzione json_encode trasforma quindi in stringa il contenuto dell’array, ed il comando echo invia tale risultato a schermo:
echo json_encode($json_response);
5.3.4 Smarty - motore di template
Le versioni precedenti di EPC sono state sviluppate mischiando la logica con la grafica, ovvero nelle pagine Web era utilizzato il linguaggio PHP sia per processare i form degli utenti, scrivere nel data base e leggere i risultati da mostrare agli utenti, sia per creare HTML dinamico per l’impaginazione grafica dei risultati.
Sviluppando quindi un'architettura di tipo integrale la grafica e la logica risultano dipen- denti l'una dall'altra e per cui non è possibile modificare l'una senza modificare l'altra.
Per EPC v3 è stato deciso di applicare il pattern Model View Controller (MVC) [26], il quale divide il progetto in tre livelli:
• Modello (MySQL): memorizza lo stato dell’applicazione. Le funzioni di accesso al data base sono i metodi delle classi PHP, i quali possono consistere in operazioni di lettura oppure scrittura. La lettura viene eseguita in risposta ad una richiesta di stato da parte delle Viste, mentre entrambe (lettura e scrittura) rispondono alle richieste di cambio di stato del Controllo;
• Viste (HTML): rapresentano l’interfaccia con cui il modello viene rappresentato agli utenti. Interrogano il modello per ricevere l’aggiornamento sullo stato dell’applica- zione. Parallelamente vengono rappresentati i form per raccogliere gli input da parte degli utenti, dati che vengono inviati in ingresso al Controllo;
• Controllo (PHP): realizza le funzioni logiche dell’applicazione, comanda il cambio delle Viste, elabora gli input degli utenti e conseguentemente invia al Modello le richieste di cambio di stato. Inoltre ritorna gli errori oppure i feedback positivi alle Viste, in modo da tenere informati gli utenti sugli esiti delle operazioni svolte;
Figura 5-11. Model View Controller
Mentre appare evidente che Modello e Controllo interagiscono tramite PHP, resta da chia- rire come le Viste si interfacciano con gli altri due elementi.
A tale fine è stato scelto di utilizzare Smarty v2.6.26 [27], che è un motore di template con cui si svolge lo scambio di informazioni con PHP da un lato, e la manipolazione degli elementi dell’HTML dall’altro, distribuito sotto licenza LGPL.
Figura 5-12. Smarty logo
Smarty è una classe, sviluppata in PHP, da cui si instanzia l’oggetto $smarty.
include_once(dirname(__FILE__)."/libs/smarty/Smarty.class.php");
$smarty = new Smarty();
La direttiva “force_compile” è utilizzata soltanto in fase di sviluppo, mentre in fase di uti- lizzo viene disabilitata per risparmiare tempo.
$smarty->force_compile = TRUE;
In Figura 5-13 è mostrato come i template HTML vengono compilati in file PHP.
Figura 5-13. compilazione dei template Smarty
La variabile PHP da passare a Smarty può essere un oggetto, un vettore o uno scalare:
$smarty->assign("<variabile_smarty>", <variabile_PHP>);
Il contenuto di un template HTML può essere visualizzato a schermo con il comando display, oppure ritornato come stringa con il comando fetch:
$smarty->display($template);
$smarty->fetch($template);
Eventuali script lato-Client devono essere inclusi entro il tag {literal} perchè general- mente contengono i caratteri “{” e “}” i quali coincidono anche con i tag utilizzati per aprire e chiudere Smarty.
{literal}
<script_JS>
{/literal}
Il blocco condizionale ha la seguente sintassi:
{if <condizione>}
<comando>
force_compile = true
?
Esiste il file
compilato ? COMPILAZIONE
template.html
template.php SI
SI
NO NO
{else}
<comando>
{/if}
Un blocco iterativo ad esempio per scorrere un vettore si realizza nel seguente modo:
{section name=<iteratore> loop=<vettore>}
<comandi>
{/section}
dove il vettore si scorre con la sintassi:
{<vettore>[<iteratore>]}
Infine Smarty permette di creare funzioni personalizzate, come illustrato di seguito:
function smarty_function_<nome>($params, &$smarty) {
<elaborazione $params>
$o = <HTML_da_ritornare>;
return $o;
}
Di norma tali funzione vengono collocate in una cartella che le raccoglie tutte, e che viene indicata al sistema come la cartella contenente i plugins personalizzati attraverso l’istru- zione:
$smarty->plugins_dir = array("plugins","plugins/custom");
In questo modo quando vengono utilizzate nelle pagine HTML, le funzioni vengono sem- plicemente richiamate utilizzando il <nome> specificato:
{<nome> <parametro_1>=’<valore_1>’ <parametro_2>=’<valore_2>’}
Le funzioni Smarty realizzate sono descritte nella seguente tabella:
Tabella 5-2. Funzioni smarty realizzate
Nome Parametri Funzione
box
box_end
id, container_id, title, logo, print, state, color, color-container
global $_LANG
implementa un contenitore rettangolare, caratterizzato da una barra in alto (logo, titolo, colore, stampa, stato) e da un’area per i contenuti (colore). Lo stato è un’icona che permette di aprire o chiudere il box breadcrumb color, section
global default
global current_node
implementa il breadcrumb che indica la posizione del nodo corrente nella struttura ad albero a partire dalla homepage
heatmap page identifica la pagina di EPC da associare ai click ed ai movimenti registrati
5.3.5 Dompdf - libreria per la stampa pdf
La libreria dompdf v0.5.1 è un convertitore da HTML a PDF che permette di creare stampe molto accurate [28], distribuito sotto licenza LGPL.
Figura 5-14. dompdf logo
La versione utilizzata ha le seguenti caratteristiche:
• gestisce la maggior parte delle proprietà e dei selettori CSS v2.1;
• supporta la maggior parte degli attributi HTML v4.0;
• supporta fogli di stile esterni;
• supporta tabelle complesse: inclusi colspan e rowspan, vari modelli di border, stile delle singole celle e tabelle multi-pagina;
• supporta immagini nei formati .png, .gif e .jpeg;
• non dipende da librerie PDF esterne;
• supporta le ancore (link);
• supporta script PHP inline.
Sono presenti alcune limitazioni, che tuttavia non hanno effetti sull’uso che è stato fatto di dompdf su EPC v3:
• non supporta tabelle innestate (tabelle dentro altre tabelle);
• non supporta liste ordinate;
input id, name, type, value, error, autocomplete, disa- bled, style, label, checked, js
realizza un form di input (text, password, checkbox, radio, reset, file, submit) con i parametri passati. Alcuni di essi sono significativi solo per certi tipi di input
language_selector global $default
global $_LANG
visualizza le bandiere di lingua corrispondendi alle sole lingue disponibili in php nella cartella /lang
page_selector page, min, max
global $_LANG
realizza la grafica di selezione delle pagine nei risultati di ricerca
select id, name, list, selected, error, empty, stule, value_field, onchange, description_field, disa- bled, js
realizza un form di selezione (dropdown-list). I para- metri value_field e description_field sono rispettiva- mente i valori passati e le descrizioni mostrate all’utente
Tabella 5-2. Funzioni smarty realizzate
Nome Parametri Funzione
• non supporta gli stili float, e il positioning absolute e relative;
• i files di grandi dimensioni possono impiegare un tempo maggiore per essere impagi- nati;
• tabelle molto grandi richiedono parecchia memoria, pertanto è raccomandato di impo- stare memory_limit almeno a 32 MB nel file di configurazione php.ini;
Nei file PHP (controllo), al fine di utilizzare il dompdf, come prima azione si crea un oggetto della classe DOMPDF():
$dompdf = new DOMPDF();
Ricordando che in precedenza era stato utilizzato il comando fetch di Smarty per la gene- razione dell’output del template HTML, si caricano tali dati nell’oggetto $dompdf creato:
$html = $smarty->fetch($template);
$dompdf->load_html($html);
Eventualmente può essere scelto il tipo di carta da utilizzare per l’impaginazione:
$dompdf->set_paper("A4", "portrait");
Quindi si lancia il comando per l’impaginazione dell’HTML in formato PDF:
$dompdf->render();
Infine si trasmette il PDF creato al Client:
$dompdf->stream("miopdf.pdf", array("Attachment" => 0));
Nell’opzione indicata sopra è stato specificato di aprire il PDF in una nuova scheda.
Nelle pagine HTML (grafica), è possibile effettuare operazioni direttamente sulla classe PDF istanziata nel PHP. In particolare si utilizzano i metodi della classe Canvas (riquadro di pagina), ricordando che:
• $pdf è l’istanza corrente di Canvas;
• $PAGE_NUM è il numero di pagina di stampa corrente;
• $PAGE_COUNT è il numero totale di pagine di stampa.
I metodi Canvas::open_object(), Canvas::close_object() e Canvas::add_object() sono utili per creare testo e disegnare oggetti e forme da utilizzare ad esempio come header e footer delle pagine di stampa.
Ad esempio si consideri il codice seguente per creare un footer con un rettangolo, una linea, un’immagine e l’indice dei numeri di pagina.
$footer = $pdf->open_object();
$w = $pdf->get_width();
$h = $pdf->get_height();
$pdf->rectangle(<x1>,<y1>,<larghezza>,<altezza>,<colore>,<spes- sore>);
$pdf->line(<x1>,<y1>,<x2>,<y2>,<colore>,<spessore>);
$pdf->image("<image_URL>","jpg",<x>,<y>,<larghezza>,<altezza>);
$text = "Pagina {PAGE_NUM} di {PAGE_COUNT}";
$font = Font_Metrics::get_font("verdana", "bold");
$pdf->page_text(<x>,<y>,$text,$font,<dimensione>,<colore>);
$pdf->close_object();
$pdf->add_object($footer,"all");
Con l’ultimo comando l’oggetto footer creato viene aggiunto a tutte le pagine.
5.4 Modifiche ai criteri di usabilità
La grafica delle pagine Web presenta soluzioni moderne che difficilmente si sposano con Internet Explorer v6. Per ottenere una visualizzazione ottimale si consigliano pertanto i seguenti Browsers:
• Internet Explorer v7.0 o superiore;
• Firefox v2.0 o superiore;
• Opera v7.0 o superiore;
• Chrome v1.0 o superiore;
• Safari v3.0 o superiore.
A difesa di tale scelta si può osservare dalla Figura 5-15 che l’utilizzo di IE6 nell’ultimo anno è crollato da circa il 20% a meno del 9% di marzo 2010 [29].
Figura 5-15. Statistiche di utilizzo dei browsers
Il Browser maggiormente usato resta Firefox (non mostrato in Figura 5-15), che da solo occupa oltre il 45% del totale. I Browsers Opera e Safari mantengono una posizione di nicchia relativamente attorno al 2% ed al 3%. Dal grafico si vede che anche IE7 ha perso il 15% di share in un solo anno, mentre gli unici Browsers a mantenere un trend positivo sono IE8 e Chrome.
La combinazione di linguaggi standard adottati nello sviluppo di EPC v3 è la seguente:
• XHTML v.1 strict: struttura delle pagine;
• CSS v.2: fogli di stile;
• JQuery v.1.3.2: programmazione lato Client;
In particolare l’utilizzo del plugin “blockUI” di JQuery, il quale indica quando il sistema è “occupato”, rende l’utente costantemente consapevole della possibilità o meno di effet- tuare operazioni sull’applicazione.
0,0%
2,5%
5,0%
7,5%
10,0%
12,5%
15,0%
17,5%
20,0%
22,5%
25,0%
27,5%
gen-09 feb-09
mar-09 apr-09
mag-09 giu-09
lug-09 ago-09
set-09 ott-09
nov-0 9
dic-09 gen-10
feb-10 mar-10 IE8
IE7 IE6 Chrome
5.5 Nuovo layout grafico
EPC v3 si presenta con una veste grafica completamente rinnovata, basata su un utilizzo efficace e rigoroso dei <div> e dei fogli di stile.
La pagina di accesso mostra un unico pannello dove l’utente deve inserire un “nome utente” ed una “password” validi per accedere alla pagina principale dell’applicazione.
Figura 5-16. EPC3 - pagina di accesso
All’atto della verifica delle credenziali inserite, il colore dello schermo diventa di colore grigio ed una gif animata informa l’utente che il sistema si trova in stato di attesa. Questa caratteristica accompagna tutte le operazioni che l’utente può svolgere all’interno dell’applicazione.
Figura 5-17. EPC3 - accesso in corso
Il menu principale di navigazione è affidato alle tabs, ognuna delle quali è riconoscibile attraverso un colore pastello, applicato come bordo all’intera pagina selezionata.
Nella pagina "Struttura" le scelte grafiche riguardo l'albero di navigazione, il pannello dei dettagli e la visualizzazione delle tavole illustrate sono già state ampiamente dettagliate in § 5.3.
Al momento dell’invio al carrello della spesa viene mostrata un’animazione che indica chiaramente all’utente che la parte selezionata è stata aggiunta al carrello della spesa.
Figura 5-18. EPC3 - pagina struttura con dettagli
La pagina “Ricerca” permette di effettuare “ricerche per parte” oppure “ricerche per dise- gno”. Nei campi di ricerca è possibile inserire dati completi o parziali, avendo cura di sce- gliere la tipologia di ricerca corretta tra:
• uguale a;
• diverso da;
• contiene;
• non contiene;
• inizia con;
• non inizia con;
• finisce con;
• non finisce con.
Quando è presente un campo di tipo dropdown list è possibile soltanto scegliere tra:
• uguale a;
• diverso da;
Più campi possono essere specificati per la ricerca, mentre i campi vuoti vengono ignorati.
Figura 5-19. EPC3 - pagina ricerca
La lista dei risultati è limitata ad un massimo di 30 records per pagina. Ogni risultato rap- presenta un nodo della struttura ad alberto, pertanto utilizzando l’icona a forma di occhio posizionata a lato, è possibile visualizzare tale nodo nella struttura ad albero del veicolo.
È altresì possibile ottenere in output la stampa della lista dei risultati, la quale in intesta- zione elenca i campi utilizzati dall’utente come input della ricerca effettuata.
La pagina “Utenti” è utilizzata per gestire gli account, quindi sono disponibili le opera- zioni di creazione, modifica e cancellazione. La lista degli utenti accreditati può essere stampata.
Figura 5-20. EPC3 - pagina utenti
La pagina “Cataloghi” permette di caricare, modificare, cancellare o esportare un cata- logo. All’atto del caricamento è necessario scegliere il tipo di specifica applicato come descritto in § 3.3. La lista dei cataloghi presenti può essere stampata.
Figura 5-21. EPC3 - pagina cataloghi
La pagina “Aziende” è utilizzata per registrare fornitori e clienti. Analogamente alla pagina “Utenti” le aziende possono essere inserite, modificate o cancellate. La lista delle aziende presenti può essere stampata.
Figura 5-22. EPC3 - pagina aziende
La pagina “Carrello della spesa” mostra gli articoli aggiunti al proprio carrello della spesa.
L’inserimento diretto consente di aggiungere un articolo nel caso si disponga del part number (P/N) o di parte di esso. Nel secondo caso la funzione autocomplete proporrà una lista di possibili codici. La modifica consente di cambiare il numero di unità per ogni arti- colo. Le altre funzioni sono la cancellazione di un articolo, lo svuotamento di tutto il car- rello e, come in precedenza, la possibilità di stampare la lista.
Figura 5-23. EPC3 - pagina carrello della spesa
5.6 Nuovo test di usabilità
Il test di usabilità effettuato su EPC v3 è rimasto fedele al precedente, in modo da poter effettuare comparazioni realistiche tra i risultati ottenuti nei due casi. Quindi per tutte le
informazioni riguardanti la preparazione del test, il questionario di screening e lo svolgi- mento del test stesso si rimanda al § 4.3.
5.6.1 Piano di test modificato
Il piano di test è analogo a quello riportato in § 4.3.2, fatta eccezione per l’eliminazione del primo task, nel quale veniva richiesto di effettuare operazioni di creazione ed attiva- zione di un carrello della spesa, dal momento che in EPC v3 il carrello della spesa è unico e precaricato per ogni utente.
La nuova lista di task da eseguire è quindi riportata in seguito, mentre per il documento completo si rimanda ad “Appendice D - Test di usabilità EPC3”.
1. Visitare la struttura del Veicolo denominato "Emu V250 High Speed Train" e navigare fino a visualizzare il montaggio dei freni "brakes mounting" di uno dei "motor bogie", quindi scegliere le pastiglie freni di destra "right brake pad" e poi di sinistra "left brake pad" ed inviarne al carrello della spesa 2 unità ciascuna.
2. Ricercare la parte del veicolo denominata ruota "wheel", visualizzare il disegno ed inviarne al carrello della spesa 4 unità.
3. Visualizzare il carrello della spesa, cancellare la parte "wheel" dal carrello ed inviarlo in stampa (pdf). Quindi rimuovere tutti gli articoli dal carrello.
4. Creare l'account "mrossi", con password "ciao", nome "mario" e cognome "rossi".
Impostare a livello "4 - Amministratore" e lingua "english". In seguito modificarne la lingua in "italiano". Cancellare l'utente "mrossi".
5. Ricercare il disegno "AA03DNN" e visualizzarlo. Quindi navigare sul nodo figlio
"wheel set assembly".
6. Aggiungere l'azienda fornitrice di finestrini denominata "Tecnoglass" all'elenco delle aziende, specificandone il codice "TG" e la nazionalità italiana. Quindi modificarne il codice "TG" in "TGLASS". Cancellare l'azienda "Tecnoglass".
5.6.2 Analisi dei risultati del test
Ancora una volta i dati sono stati raccolti ed organizzati in fogli di lavoro, in modo da poter preparare statistiche e grafici.
I risultati raccolti possono essere classificati come segue:
• Analisi dei tempi di svolgimento dei task;
• Analisi della percentuale di successo dei task;
• Analisi dei commenti espliciti degli utenti;
• Analisi delle mappe di calore: si rimanda al § 5.6.3
