Ottavo capitolo della mia tesi di laurea, dedicata allo sviluppo di un CMS per gestire un’Azienda di Promozione Turistica, utilizzando Joomla. Per maggiori informazioni, si veda la pagina della tesi.
L’analisi dell’usabilità del sito APT Lecco è stata effettuata dopo che il sito è stato realizzato nella sua interezza e i contenuti sono stati inseriti.
Il metodo utilizzato è il metodo MiLE, un metodo di valutazione dell’usabilità di applicazioni web che si basa sul concetto di scenario, sviluppato dal Politecnico di Milano in collaborazione con l’Università di Lugano.
Il metodo MiLE prevede una analisi preliminare compiuta da esperti, la quale è seguita da una fase di user testing in cui sono coinvolte figure non professionali, ma che rappresentano quella che è la fascia di utenza della applicazione Web.
8.1 Valutazione tecnica usabilità del sito APT Lecco
La prima parte dell’analisi di usabilità prevede l’analisi tecnica del sito APT Lecco e la presentazione dei problemi riscontrati durante questa fase.
La valutazione tecnica viene realizzata attraverso una Expert Review basata sugli scenari: vengono eseguiti dei particolari percorsi chiamati task consistenti in una sequenza di operazioni atte a raggiungere uno scopo che potrebbe essere ad esempio trovare un particolare evento all’interno del sito oppure scoprire ulteriori dettagli riguardo un monumento importante.
Per ognuno di questi scenari sono utilizzate come strumento di ispezione delle dettagliate check list, che ci consentono di esaminare in dettaglio l’applicazione tenendo conto dei principali aspetti di design: la navigazione, la grafica, la semiotica dell’interfaccia, i contenuti, le performance tecniche e cognitive.
Sono stati analizzati cinque scenari, selezionati in base a quello che l’APT vuole che il sito fornisca agli utenti, per soddisfare le loro necessità.
Per ogni task che compone lo scenario sono messi in evidenza i problemi rilevati durante la Expert Review, e l’aspetto di design coinvolto.
Per meglio analizzare i problemi rilevati, viene assegnato un punteggio ad ogni problema rilevato. Il punteggio parte da -1 per i problemi poco gravi ed arriva a -3 per i problemi molto gravi.
Anche gli scenari hanno un punteggio, che ne identifica la loro priorità rispetto agli altri.
Questo punteggio viene moltiplicato per la media dei puteggi dei task, fornendo così un punteggio pesato in base alla priorità dello scenario.
8.1.1 Scenari
Scenario 1 Un turista vuole conoscere cosa c’è nella zona di Lecco
Profilo utente: turista, prima volta che visita il sito
Goal: informarsi per visitare Lecco
Peso dello scenario: 0.9
Punteggio: -1
Voto Pesato: -0.9
Descrizione: Un turista con l’intenzione di visitare Lecco si collega al sito dell’APT Lecco, per informarsi su quelle che sono le possibilità offerte dalla cittadina. Cerca quali sono i luoghi più interessanti della zona.
Task 1: Ricerca dei luoghi Punteggio: -2
Task 2: Visione delle informazioni sul luogo scelto Punteggio: /
Task 3: Visione degli altri luoghi presenti nello stesso comune Punteggio: -1
Task 1: Ricerca dei luoghi
Navigation strategy effectiveness [Navigazione]: Non è possibile ricercare i luoghi in base al comune dove si trovano, dall’elenco dei luoghi. E’ possibile visualizzare l’elenco dei luoghi che si trovano in un comune solamente accedendo alla pagina del comune.
Punteggio: -2
Task 2: Visione delle informazioni sul luogo scelto
Nessun problema riscontrato
Task 3: Visione degli altri luoghi presenti nello stesso comune
Visibilità del percorso [Navigazione]: Per scoprire quali sono gli altri luoghi di interesse presenti nello stesso comune, bisogna aprire la pagina del comune e questo non è intuitivo perchè l’utente non sa che nella pagina dedicata al comune sono elencati tutti i luoghi che
si trovano sul suo territorio.
Punteggio: -1
Intuitività [Semiotica]: determinare come è possibile visualizzare gli altri luoghi presenti
nel comune non è intuitivo.
Punteggio: -1
Scenario 2 Una persona vuole sapere maggiori informazioni riguardo ad un evento di cui ha sentito parlare
Profilo utente: turista
Goal: informarsi su un particolare evento
Peso dello scenario: 0.8
Punteggio: -1
Voto Pesato: -0.8
Descrizione: Un turista sente parlare da amici di una particolare mostra che è in esposizione a Lecco. Egli è particolarmente interessato all’argomento, quindi decide di saperne di più: vuole informazioni su dove si svolge, cerca qualche immagine per rendersi conto di cosa lo aspetta e cerca un numero di telefono da chiamare per poter prenotare il suo biglietto ed evitare code noiose. Ricerca l’evento e individua quello che fa al caso suo, per poi accedere alla pagina dove vengono visualizzati i dettagli della mostra.
Task 1: Ricerca dell’evento di cui ha sentito parlare Punteggio: -2
Task 2: Visione informazioni sull’evento Punteggio: /
Task 3: Prende visione delle date dell’evento Punteggio: -1
Task 1: Ricerca dell’evento di cui ha sentito parlare
Technicality [Semiotica]: l’utilizzo di un calendario elettronico potrebbe essere dif-
ficoltoso per chi non ne ha mai utilizzato uno.
Punteggio: -1
Accuratezza [Contenuti]: Le date degli eventi sono espresse in lingua inglese, mentre il resto del sito è in italiano. Se una persona non conosce la lingua inglese ha difficoltà ad orientarsi nel calendario.
Punteggio: -3
Task 2: Visione informazioni sull’evento
Nessun problema riscontrato
Task 3: Prende visione delle date dell’evento
Technicality [Semiotica]: la gestione delle date si basa sul calendario elettronico, che potrebbe risultare di difficile utilizzo per gli utenti meno abituati all’uso di tecnologie informatiche.
Punteggio: -1
Scenario 3 Una persona vuole scoprire gli eventi programmati nel prossimo mese
Profilo utente: turista
Goal: informarsi sui prossimi eventi
Peso dello scenario: 0.7
Punteggio: -1
Voto Pesato: -0.7
Descrizione: Un turista ha prenotato un hotel a Lecco per due settimane nel prossimo mese, e pregustando la vacanza trascorre una serata a casa cercando gli eventi che si svolgeranno nella zona di Lecco nel periodo in cui la frequenterà. Scoprendo qualcosa che lo interessa,
cerca un numero di telefono da chiamare per maggiori informazioni e segna l’evento sulla propria agenda.
Task 1: Ricerca degli eventi del mese prossimo Punteggio: -2
Task 2: Visione informazioni sull’evento Punteggio: /
Task 1: Ricerca degli eventi del mese prossimo
Technicality [Semiotica]: l’utilizzo di un calendario elettronico potrebbe essere dif-
ficoltoso per chi non ne ha mai utilizzato uno.
Punteggio: -1
Accuratezza [Contenuti]: Le date degli eventi sono espresse in lingua inglese, mentre il
resto del sito è in italiano. Se una persona non conosce la lingua inglese ha difficoltà ad
orientarsi nel calendario.
Punteggio: -3
Task 2: Visione informazioni sull’evento
Nessun problema riscontrato
Scenario 4 Un turista cerca dei percorsi guidati per esplorare le bellezze del luogo
Profilo utente: turista
Goal: cercare dei percorsi guidati che lo interessino per passare una giornata diversa dal
solito
Peso dello scenario: 0.7
Punteggio: -0.33
Voto Pesato: -0.23
Descrizione: Un turista decide di trascorrere una o più giornate nella zona di Lecco e per av-
ere una bella esperienza durante la visita vuole seguire i consigli forniti attraverso un per-
corso guidato, che lo possa guidare tra le innumerevoli attrazioni e bellezze del posto.
Task 1: Visione dell’elenco dei percorsi Punteggio: /
Task 2: Scelta del percorso Punteggio: /
Task 3: Visione dei luoghi visitati dal percorso Punteggio: -1
Task 1: Visione dell’elenco dei percorsi
Nessun problema riscontrato
Task 2: Scelta del percorso
Nessun problema riscontrato
Task 3: Visione dei luoghi visitati dal percorso
Navigation strategy effectiveness [Navigazione]: Un miglioramento per la UX potrebbe essere raggruppare i luoghi visitati dal percorso in base al comune dove si trovano. In questo modo l’utente conosce in anticipo il territorio lungo il quale si disloca l’itinerario.
Punteggio: -1
Scenario 5 Una persona vuole contattare APT Lecco
Profilo utente: utente
Goal: un visitatore vuole contattare l’APT per una qualsiasi evenienza
Peso dello scenario: 0.6
Punteggio: /
Voto Pesato: /
Descrizione: Un utente del sito ha bisogno di contattare l’APT per un motivo qualsiasi, quindi accede al sito e compila la form di contatto.
Task 1: Apre la pagina dei contatti Punteggio: /
Task 2: Compila la form di contatto Punteggio: /
Task 1: Apre la pagina dei contatti
Nessun problema riscontrato
Task 2: Compila la form di contatto
Nessun problema riscontrato
8.1.2 Problemi di carattere generale rilevati durante l’analisi
L’analisi presentata nelle pagine precedenti riguarda i singoli task, e i problemi rilevati in essi. Sono tuttavia stati rilevati alcuni problemi che riguardano il sito in generale, e vengono qui riportati.
Problema generale 1: il doppio menu
Overlapping [Semiotica]: Il sito presenta un doppio menu ridondante, identico per funzionalità e voci. Quando viene scelta una voce del menu in alto, essa viene attivata anche nel menu laterale, e viceversa. Tuttavia, per non confondere l’utente, è bene eliminare il menu
laterale. In questo modo lasciamo un’unica scelta all’utente, e nella zona occupata dal menu laterale possiamo inserire i moduli che forniscono informazioni aggiuntive riguardo al contenuto visualizzato nella parte principale della pagina.
Problema generale 2: i link non sono ben riconoscibili
Identità dell’ancora [Grafica]: I link all’interno del sito non sono ben riconoscibili, anzi si mimetizzano all’interno del testo. Questo non accade all’interno del contenuto informativo ma all’interno della navigazione. Occorre modificare il file CSS per sottolineare i link
oppure cambiarne il colore.
8.2 Valutazione da parte degli utenti
8.2.1 User recuiting
Il sito APT Lecco è rivolto a un target di utenza molto ampio, dato che la categoria “turista” si amplia fino a racchiudere una fascia di età molto ampia ed ogni background culturale possibile.
Per quanto riguarda la scelta degli utenti per effettuare l’user testing sono stati scelti tester con background culturali e tecnici molto diversi tra di loro: dal negoziante allo studente, passando per l’impiegato. E ancora dall’esperto informatico all’inesperto, dall’abituale utilizzatore del web alla persona che naviga poco frequentemente.
8.2.2 Organizzazione dei test
I test sono stati effettuati presso l’abitazione degli interessati o presso l’abitazione del sottoscritto. In tutti i casi il sito viene visto in locale in quanto esso si trova sull’installazione Apache del computer di cui dispongo.
Per registrare il comportamento degli utenti è stato utilizzata una telecamera ed un software utilizzato per registrare ciò che avviene sullo schermo del computer e le parole pronunciate durante il test, chiamato iShowU.
Il test prevede lo svolgimento di cinque operazioni principali, che sono
- Prima operazione “Informazioni sui luoghi”: cerca informazioni su un luogo, un monumento che ti interessa (o uno a scelta) nella città di Lecco. Quindi scopri gli altri luoghi di interesse presenti nello stesso comune.
- Seconda operazione “Informazioni su eventi”: Hai sentito parlare dell’evento “x”. Cerca informazioni riguardo a questo evento: data di svolgimento, orari, informazioni generali.
- Terza operazione “Prossimi eventi”: Cerca informazioni sugli eventi programmati nel prossimo mese
- Quarta operazione “Percorsi”: Cerca un percorso guidato che ti possa interessare, visionando i luoghi che il percorso visita.
- Quinta operazione “Contatti”: Contatta l’apt per chiedere informazioni riguardo ad un evento.
Questi scenari sono stati scelti in base alla loro importanza all’interno del sito web dell’APT Lecco, in quanto centrali per gli obiettivi che gli stakeholders vogliono raggiungere.
Il test prevede la spiegazione all’utente di quello che dovrà fare nel test, quindi viene fornito un foglio contenente queste cinque operazioni e viene filmato il comportamento dell’utente davanti al monitor del computer.
8.2.3 Risultati del test con gli utenti
8.2.3.1 Operazione 1 “Informazioni sui luoghi”
Utente 1
Analizziamo il comportamento per quanto riguarda la prima domanda, cercare informazioni sui luoghi. La posizione del modulo “Tipologie di luoghi” confonde l’utente perchè lo porta a pensare che deve scegliere per forza una tipologia di luogo, dato che il modulo è talmente lungo che l’utente non vede l’elenco dei luoghi, poichè non è “above the fold”, non è visibile senza scorrere verso il basso la pagina.
Un ulteriore difetto di questa visualizzazione dei luoghi è che essi non sono suddivisi per comune, anzi il comune non è nemmeno menzionato e l’utente si trova davanti un elenco di luoghi, monumenti e quant’altro senza sapere dove sono dislocati e quindi non sa come comportarsi: “come faccio a sapere se sono a Lecco?”
Utente 2
L’utente non vede l’elenco dei luoghi perchè il modulo “Tipologie di luoghi” occupa tutta la porzione di pagina visibile sullo schermo.
Utente 3
L’utente prima ancora di visionare l’elenco dei luoghi, sceglie una tipologia.
Utente 4
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
8.2.3.2 Operazione 2 “Informazioni su eventi”
Utente 1
“Dove devo cliccare?” - L’utente trova difficoltà nel capire che dopo aver ricercato un evento è possibile cliccare su di esso e quindi approfondire le informazioni. Questo difetto è già stato visionato nella Expert Review, l’utente si aspetta che un link sia sottolineato e così dovrebbe essere.
L’utilizzo del calendario non desta particolari problemi anche se l’utente non ha mai utilizzato un calendario elettronico. Il calendario fornito da JEvents risulta quindi abbastanza intuitivo.
Alla fine del test è stato chiesto all’utente come le sembrava l’utilizzo del calendario, e la risposta è stata “Il calendario va bene, basta leggere attentamente e si capisce tutto”
Particolarità: verso la fase centrale del test, il tester ha chiesto “Ma il menu in alto, è lo stesso che compare a sinistra?”
Come già ipotizzato nella Expert Review, il doppio menu desta diversi dubbi nell’utente, che si accorge dopo alcuni minuti che i due menu riportano le stesse voci, e potrebbero essere la stessa cosa.
Utente 2
L’utente riscontra qualche difficoltà nel capire che è possibile ricercare l’evento in base alle parole chiave, con la funzione Cerca, e tenta di trovare l’evento in base alla sua categoria. Il risultato della ricerca con JEvents porta ad una schermata tipo
Purtroppo l’utente ha cliccato “Festa paesana”, pensando di essere portato alla pagina dell’evento selezionato, mentre viene visualizzata una pagina contenente l’elenco di tutte le feste paesane in programma. La cosa non è di vitale importanza poichè nella pagina in questione è elencata anche la “Festa di Lecco”, ma non è quello che l’utente si aspettava.
Utente 3
L’utente crede di poter inserire il nome dell’evento che sta cercando nella parte iniziale della pagina, indicata dalla freccia.
Purtroppo la parte indicata non è eliminabile per come è stato concepito il sistema, e la cattiva interpretazione della situazione è anche imputabile alla poca competenza informatica dell’utente, il quale non sa che l’input dei dati attraverso pagine web può essere eseguito solamente via form.
Occorre anche sottolineare come la form per l’inserimento del nome dell’evento sia poco riconoscibile, e l’utente - poco avvezzo all’uso delle form - non la nota.
Utente 4
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
8.2.3.3 Operazione 3 “Prossimi eventi”
Utente 1
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
Utente 2
L’utente tenta di accedere agli eventi del prossimo mese cliccando il modulo Calendario. L’uso delle frecce, in particolare, cha destato alcuni problemi. Infatti cliccando la freccia “>”, che indica il mese successivo, il modulo riporta ancora “Novembre”, mentre l’utente si aspetta che esso cambi in “Dicembre”.
Anche l’intestazione della pagina dedicata agli eventi desta alcuni problemi.
Infatti le frecce singole portano al mese precedente/successivo, mentre le frecce doppie portano all’anno precedente/successivo, funzione che a mio avviso non è utile nel contesto del sito, anzi disorienta il visitatore ponendo un ulteriore incognita di utilizzo del sistema.
Utente 3
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
Utente 4
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
8.2.3.4 Operazione 4 “Percorsi”
Utente 1
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
Utente 2
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
Utente 3
L’utente dapprima visualizza tutte le tipologie di percorso, poi il suo occhio cade sull’elenco dei percorsi guidati, e ne seleziona uno.
Utente 4
L’utente
8.2.3.5 Operazione 5 “Contatti”
Utente 1
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
Utente 2
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
Utente 3
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
Utente 4
L’utente non trova particolari difficoltà nel svolgere le operazioni correlate a questo scenario.
8.3 Riepilogo dei problemi
Facciamo un breve riepilogo dei problemi riscontrati durante l’analisi di usabilità. Nella se-
guente tabella elenchiamo i problemi riscontrati durante la expert review.
- Non è possibile ricercare i luoghi in base al comune dove si trovano, dall’elenco dei luoghi. E’ possibile visualizzare l’elenco dei luoghi che si trovano in un comune solamente accedendo alla pagina del comune.
- Per scoprire quali sono gli altri luoghi di interesse presenti nello stesso comune, bisogna aprire la pagina del comune e questo non è intuitivo perchè l’utente non sa che nella pagina dedicata al comune sono elencati tutti i luoghi che si trovano sul suo territorio.
- Determinare come è possibile visualizzare gli altri luoghi presenti nel comune non è intuitivo.
- L’utilizzo di un calendario elettronico potrebbe essere difficoltoso per chi non ne ha mai utilizzato uno.
- Le date degli eventi sono espresse in lingua inglese, mentre il resto del sito è in italiano. Se una persona non conosce la lingua inglese ha difficoltà ad orientarsi nel calendario.
- Un miglioramento per la UX potrebbe essere raggruppare i luoghi visitati dal percorso in base al comune dove si trovano. In questo modo l’utente conosce in anticipo il territorio lungo il quale si disloca l’itinerario.
- Il sito presenta un doppio menu ridondante, identico per funzionalità e voci.
- I link all’interno del sito non sono ben riconoscibili, anzi si mimetizzano all’interno del testo.
Ora riassumiamo i problemi rilevati durante il test con gli utenti.
- I moduli “Tipologie di….” sono troppo invadenti e nascondono il contenuto del sito.
- Dopo aver ricercato un evento, l’utente non capisce dove deve cliccare per visualizzarne i dettagli.
- L’utente dopo una ricerca confonde l’evento con la sua categoria.
- Il calendario prevede delle frecce che permettono di passare da un anno all’altro, ma questa funzionalità non è utile per il sito e confonde l’utente.
8.3 Risoluzione dei problemi riscontrati nell’analisi di usabilità
Alcuni dei problemi riscontrati sono abbastanza gravi e potrebbero compromettere l’esperi-
enza utente, quindi si è deciso di correggere le imperfezioni prima di considerare completo il
sito.
Presento nella seguente tabella le correzioni da implementare:
- 1 Realizzo un componente, visualizzato quando l’utente richiama l’elenco dei luoghi, che permetta di sapere in quale comune si trova un luogo
- 2-3 Creo un modulo che visualizzi gli altri luoghi presenti nello stesso comune del luogo che sto visualizzando
- 4 Posso creare una breve guida all’utilizzo del calendario
- 5 Localizzo JEvents in lingua italiana
- 6 Modifico il modulo “Luoghi Visitati”, mod_luogo_percorso, per tenere conto dei comuni.
- 7 Elimino il menu superiore
- 8 Intervengo sul CSS per evidenziare i links.
- 9 Modifico i moduli “Tipologie di..” perchè occupino meno spazio: o utilizzo due colonne oppure elenco le tipologie una a fianco dell’altra.
- 10-11 Modifico JEvents in modo che nei risultati di una ricerca non compaia la categoria dell’evento e sia più intuitivo vedere i dettagli dell’evento cercato.
- 12 Elimino le frecce che permettono di avanzare di anno in anno.
Problema 1
La creazione di un nuovo componente è necessaria in quanto vogliamo modificare il modo in cui vengono presentate le informazioni che compongono la parte principale della pagina.
Chiameremo il nuovo componente com_luoghi_per_comune.
Esso interroga il database, estraendo tutti i luoghi presenti nel sistema. Quindi li classifica e raggruppa in base al comune dove si trovano, permettendo in questo modo di visualizzarli in modo ordinato.
Il codice del componente è riportato qui di seguito.
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$id = intval( mosGetParam( $_REQUEST, 'id', 0 ) );
switch ($task) {
case 'view':
listLuoghi();
break;
}
function listLuoghi() {
global $database, $mainframe;
//prendo tutti i comuni dal database
$query = "SELECT * FROM #__content where sectionid=7 and (publish_down > CURRENT_TIMESTAMP or
publish_down=\"0000-00-00 00:00:00\") and state=1";
$database->setQuery( $query );
$temp = $database->loadObjectList();
$related = array();
if (count($temp)) {
foreach ($temp as $row ) {
if (($row->cat_state == 1 || $row->cat_state == '') && ($row->sec_state == 1 || $row-
>sec_state == '') && ($row->cat_access <= $my->gid || $row->cat_access ==
'') && ($row->sec_access <= $my->gid || $row->sec_access == '')) {
$related[] = $row;
}
}
}
unset($temp);
/* elenco quello che ho trovato nel db */
if ( count( $related ) ) {
?>
<div class=”componentheading”>Elenco dei luoghi classificati per comune</div><br />
<?php
$comuni = array();
$id_e_titolo_comune = array();
$i = 0;
foreach ($related as $item) {
//prendo prima tutti i comuni
if ($item->catid == 16) {
$id_e_titolo_comune[0] = $item->title;
$id_e_titolo_comune[1] = $item->id;
//controllo che l’id del luogo indicato non sia già nell’elenco
$z=0;
$esiste = false;
foreach ($comuni as $comune) {
if ($comune[1] == $item->id) {
$esiste = true;
}
}
if ($esiste == false) {
$comuni[$i++] = $id_e_titolo_comune;
}
}
}
//poi per ogni comune prendo il luoghi che ci sono associati e creo la lista.
foreach ($comuni as $comune) {
$luoghiNelComune = array();
$id_e_titolo_comune = array();
$j = 0;
$i = 0;
foreach ($related as $item) {
//ora prendo tutti i luoghi e li associo a ciascun comune
if ($item->catid == 19) { // se è un luogo (e non un comune)
$metakey = $item->metakey;
// keys è un array che contiene le stringhe che prima erano
// separate da una virgola
$keys = explode( ‘,’, $metakey );
$chiavi = array();
// assemble any non-blank word(s)
foreach ($keys as $key) {
$key = trim( $key );
//prendo solo le stringhe che iniziano con comune:
if (strstr($key,”comune:”)) {
$chiavi[] = $database->getEscaped( $key );
}
//ora in chiavi[] ho le keywords di questo. Le mie le ho
//in likes[]
//confronto i due array e quando trovo un campo uguale
//metto l’id di simile nell’array uguali[].
if ($chiavi[0] == “comune:”.$comune[0]) {
$id_e_titolo_luogo[0] = $item->title;
$id_e_titolo_luogo[1] = $item->id;
//controllo che l’id del luogo indicato non
//sia già nell’elenco
$z=0;
$esiste = false;
foreach ($luoghiNelComune as $luogo) {
if ($luogo[1] == $item->id) {
$esiste = true;
}
}
if ($esiste == false) {
$luoghiNelComune[$i++] = $id_e_titolo_luogo;
}
}
}
} //fine if ($item->catid == 19)
} //fine foreach ($related as $item)
//stampo il comune solo se ho luoghi in questo comune
if ($luoghiNelComune != null) {
//ora in luoghiNelComune[] ho un elenco dei luoghi toccati dal percorsi, ed
//il loro comune. stampo la cosa corretta.
$href = sefRelToAbs(
“index.php?option=com_content&task=view&id=$comune[1]&Itemid=37″ );
?><p> <b><a href=”<?php echo $href; ?>”>
<?php echo $comune[0]; ?></a></b>
<?php
$k = 0;
foreach ($luoghiNelComune as $luogo) {
$href = sefRelToAbs(
“index.php?option=com_content&task=view&id=$luogo[1]&Itemid=36″ );
?>
<li>
<a href=”<?php echo $href; ?>”>
<?php echo $luogo[0]; ?></a>
</li>
<?php
$k++;
}
}
$i++;
} //fine foreach ($comuni as $comune)
}
}
?>
Il risultato ottenuto utilizzando questo componente per visualizzare l’elenco dei luoghi rispetto al componente standard com_content, è visualizzato qui sotto:
Come si vede i luoghi sono visualizzati in modo confusionario, senza alcuna indicazione circa il comune dove si trova un luogo.
Questa nuova visualizzazione è molto più chiara, usabile e piacevole da vedere.
Problemi 2 - 3
Per poter inserire informazioni aggiuntive riguardo i luoghi presenti nello stesso comune del
luogo che sto visitando, è opportuno creare un nuovo modulo. Chiameremo il nuovo modulo
mod_luoghi_stesso_comune, “Luoghi di interesse nello stesso comune di questo”.
Per evitare di re-inventare la ruota, guardiamo i moduli che abbiamo già creato. Il modulo
mod_luoghi_comune sembra proprio fare al caso nostro, dato che visualizza i luoghi presenti in
un comune.
Copiato il modulo e sistemato il file XML descrittivo secondo le nuove caratteristiche, ed as-
sociato il modulo alle pagine di contenuto di categoria “Luoghi”, sorprendentemente il mod-
ulo fa il suo dovere senza bisogno di alcuna modifica al codice.
La nuova struttura delle pagine dedicate ai luoghi è quindi
E’ possibile notare in basso a sinistra il nuovo modulo informativo.
Problema 5
Occorre scaricare dal sito ufficiale la localizzazione italiana del componente.
Problema 6
Dobbiamo modificare il modulo mod_percorso_luogo per distinguere tra comuni e luoghi, in particolare elencando i luoghi di ogni comune in una lista. Voglio ottenere un risultato come
Lecco
-Monumento ai caduti
-Ponte Azzone Visconti
Per fare ciò occorre dapprima identificare i comuni visitati dal percorso, quindi capire in quale comune risiede un luogo ed assegnarlo alla lista. Infatti il metodo utilizzato per associare ad un percorso l’elenco dei luoghi visitati è il seguente: viene utilizzata la metakey “luogo:” sia per identificare i luoghi visitati sia per identificare i comuni visitati.
Come procedere? Dapprima identifichiamo i luoghi visitati dal percorso.
Quindi vengono identificati tutti i comuni menzionati nelle metakey del percorso, caratterizzati (nel database) da un ID di categoria 16.
Quindi per ogni comune scorro l’elenco dei luoghi, e se un luogo risiede nel comune in considerazione, viene aggiunto alla lista.
In conclusione viene creato l’output da mostrare nel modulo, composto da una parola evidenziata che rappresenta il comune, seguita dai luoghi presenti sul suo territorio:
La chiarezza e immediatezza del risultato sono evidenti, se paragonati a come il modulo si presentava prima della modifica apportata:
Problema 7
Per risolvere problema relativo al doppio menu, occorre intervenire sul template utilizzato.
Un template definisce la presentazione del contenuto, l’interfaccia grafica che viene visualiz-
zata nel browser web, ed è costituito - in Joomla - da files PHP, CSS, immagini e XML.
Il file XML definisce la struttura del templates ed i files che vengono utilizzati.
Il file index.php è composto da una serie di istruzioni che permettono al server Apache di as-
semblare la pagina HTML che viene presentata all’utente.
All’interno dei div #allwrapper, #mwrapper, .core si trova il div #header. Esso è il punto che ci interessa, poichè lì viene richiamato il menu, attraverso l’istruzione PHP echo $mycssPSLITmenu_content;.
Eliminiamo le istruzioni
A questo punto possiamo anche eliminare il file mysplitcssmenu.php, che si occupava della visualizzazione del menu che non usiamo più. Inoltre dobbiamo eliminarne il riferimento all’interno del file XML di definizione del template.
Occorre anche intervenire sui file CSS perchè il menu occupava dello spazio nella pagina che ora non viene più utilizato, quindi potrebbero generarsi degli sfasamenti. Per ripristinare il layout che il sito aveva prima della modifica, è necessario modificare le seguenti istruzioni CSS
E applicare un margin-top ad ognuna di esse, in questo modo:
Le due figure sotto riportate illustrano il cambiamento effettuato grazie a queste operazioni.
Problema 8
Per risolvere il problema relativo ai link che non sono evidenziati in maniera adeguata, interveniamo sul file CSS del template.
a:link, a:visited {
color: #333333;
text-decoration:none;
}
a:hover {
color: #000000;
}
Potrebbe essere modificato in
a:link, a:visited {
color: #333333;
text-decoration: underline;
}
a:hover {
color: #000000;
text-decoration: underline;
}
Il procedimento permette di evidenziare i links sottolineandoli, metodo standard ed universalmente conosciuto per identificare un collegamento ipertestuale presente sul Web. Il componente JEvents non segue le direttive CSS del nostro template, quindi dobbiamo intervenire anche su esso, modificando il file components/com_events/events_css.css, ed in particolare aggiungendo la sottolineatura, trasformando le istruzioni
in
Problema 9
Il modulo mod_tipo_di_luogo e mod_tipo_di_percorso_guidato sono stati concepiti come una lista di tipologie.
Il problema è sorto quando la mole di dati gestita dal sito è aumentata e quindi le tipologie di dati sono incrementate. Cerchiamo di fare in modo che questi moduli occupino il minor spazio possibile: ora come sono concepiti, essi rappresentano i dati nel seguente modo:
Lo spreco di spazio è evidentissimo. Una soluzione potrebbe essere affiancare le categorie, separate da spazi e caratteri speciali. Ad esempio: “Culturale | Storico | ….”
Modifichiamo mod_tipo_di_luogo: la parte che si occupa della gestione dell’output è
Modificandola in
Otteniamo la schermata seguente, che ottimizza in modo più che soddisfacente lo spazio a
disposizione.
La stessa operazione la svolgiamo anche per il modulo mod_tipo_di_percorso_guidato.
Problema 10 - 11
Il calendario, come detto, è controllato e gestito dal componente JEvents. Possiamo interve-
nire sul codice sorgente del componente per realizzare una miglioria al sito, evitando di con-
fondere gli utenti inserendo nei risultati delle ricerche anche la categoria dell’evento.
Per fare ciò ho editato il file components/com_events/events.php.
Alla linea 1764 il file originale riportava
$catname = mosEventsHTML::getCategoryName( $row->catid );
Per eliminare la categoria dall’elenco, sostituisco questa riga di codice con
$catname = “”;
Le due figure seguenti riportano il risultato ottenuto, che semplifica l’interazione con il cal-
endario.
Problema 12
Per risolvere il problema delle doppie frecce, apro il file
components/com_events/events.html.php. Intorno alla linea 625 compaiono le istruzioni che
definiscono i collegamenti alle freccie:
Eliminiamo la definizione delle due frecce doppie per eliminarle dal frontend:
Articoli correlati:
April 4th, 2008 at 4:38 am
[...] Dario Morrone: [...]