monografia - elite.polito.itelite.polito.it/files/thesis/fulltext/didonnasamuele.pdf ·...
TRANSCRIPT
INFORMAZIONI TIROCINIO
Azienda ospitante Redazione Passepartout – Comune di Torino
Locazione Via San Marino, 10 – 10137 Torino
Tutor aziendale Marina Sutelli
Periodo di svolgimento 16 Maggio 2011 – 29 Luglio 2011 – 300 ore
Azienda richiedente Politecnico di Torino
Corso di studi Ing. del cinema e dei mezzi di comunicazione – III Facoltà
Studente Samuele Di Donna – Matricola 155375
Tutor accademico Fulvio Corno
2
INDICE
INTRODUZIONE.........................................................................................3
Background storico dell'azienda..................................................................3
Il progetto...........................................................................................4
Descrizione.......................................................................................5
Requisiti tecnici..................................................................................5
PREPARAZIONE.........................................................................................6
Analisi generali......................................................................................6
Sezioni principali individuate..................................................................8
Problematiche riscontrate nell'attuale versione............................................8
Requisiti di accessibilità necessari............................................................9
Raccolta conoscenze pratiche...................................................................10
PROGETTAZIONE.....................................................................................10
Prototipazione.....................................................................................11
Informa Disabile - Modelli....................................................................12
Informa Disabile – Valutazione e scelta.....................................................15
Disabilità e sessualità – Modelli..............................................................19
Disabilità e sessualità – Valutazione e scelta..............................................22
REALIZZAZIONE.......................................................................................22
Stadi di realizzazione.............................................................................23
Raccolta del materiale........................................................................23
Costruzione della struttura HTML...........................................................23
Realizzazione dello stile CSS.................................................................24
Utilizzo degli script............................................................................25
Utilizzo degli script............................................................................25
Fase di testing..................................................................................26
Traduzione: problematiche e migliorie........................................................30
Miglioramento del metodo.......................................................................31
CONCLUSIONE........................................................................................32
3
INTRODUZIONE
Il seguente testo espone il lavoro che ho svolto presso la redazione Passepartout del
Comune di Torino, durante lo svolgimento del tirocinio curricolare per il mio corso di
laurea presso il Politecnico di Torino. Il fine è quello di descrivere l'andamento, i risultati
ottenuti e l'esperienza accumulata durante questo percorso formativo.
La narrazione segue una linea logica e non cronologica per via della natura non ordinata
del lavoro svolto. Siccome il progetto è composto da diversi sotto-progetti, nella prima
parte del testo viene illustrato tutto in maniera generale; successivamente viene
sviluppato nel particolare utilizzando parti dei diversi sotto-progetti.
Background storico dell'azienda
La redazione Passepartout nasce con lo scopo di realizzare un apparato informativo per
tutti coloro che sono portatori di disabilità. Inizialmente la ricerca di informazioni e
materiale era un'attività “a tempo perso” ma, con il passare del tempo e con l'aumento
della richiesta, il numero di membri è andato via via crescendo, dando oltretutto la
possibilità proprio ai primi interessati di poter lavorare come operatori. Attualmente la
redazione offre l'opportunità a coloro che possiedono una forma di handicap di svolgere
stage lavorativi presso la redazione.
Passepartout è costituita da diversi reparti che si occupano nello specifico di determinati
argomenti e dello svolgimento di compiti diversi. Per quanto riguarda il progetto di
Informa Disabile sono due le parti coinvolte: una team tecnico che ha il compito di
gestire ed amministrare gli strumenti informatici che formano la struttura dell'apparato
informativo, ed una team “giornalistico” che si occupa di ricercare ed inserire all'interno
dei vari siti web notizie, normative ed altro materiale relativo al mondo dei disabili e
egli ausili messi a disposizione da vari enti pubblici e privati.
Il sito web di Informa Disabile è composto oltretutto da rubriche, magazine, video-
notiziari ed altro ancora. La piattaforma su cui si basa è stata realizzata tramite la
collaborazione del Politecnico di Torino che ha messo a disposizione del personale
competente. La struttura si basa su un CMS (content management system) proprietario
chiamato PASS, realizzato dagli ingegneri del Politecnico. Il progetto attualmente,
risulta superato e obsoleto rispetto alle esigenze del personale e agli enormi
4
cambiamenti avvenuti in Internet. Durante il corso degli anni sono state apportate
diverse migliorie e aggiornamenti; il risultato è una struttura funzionante ma
estremamente intricata e disordinata che non può più soddisfare le esigenze per il quale
era stata progettata.
Per questo è per altri motivi si è scelto di passare ad un nuovo CMS: Wordpress.
Attualmente è in corso la migrazione dei dati dal vecchio sistema a Wordpress. Dati
questi cambiamenti si è deciso di effettuare una ristrutturazione della veste grafica e,
soprattutto, della struttura organizzativa dei contenuti che non risulta più compatibile
con le necessità attuali.
Il progetto
Descrizione
Il tirocinio consiste dunque nella progettazione e realizzazione di una struttura che
consenta un'organizzazione dei contenuti più coerente con la tipologia d informazioni
pubblicate sui siti; è necessario rendere la navigazione accessibile e immediata in modo
che si adatti alle esigenze di tutti, normodotati e non. La struttura deve risultare
modulare in modo da essere compatibile per un futuro adattamento con il CMS. Dati i
presupposti bisogna ideare anche una veste grafica che si adatti al meglio ai
cambiamenti della nuova struttura.
Come accennato bisogna comprendere la collocazione del sito (fra quale categoria si
annovera il sito – blog, commerciale, giornalismo, ecc.) e sviluppare la struttura in
modo che sia appropriata ad ospitare i contenuti di quella categoria.
Il sito Informa Disabile, pur essendo un sito a se stante, fa parte del portale web del
Comune di Torino; deve dunque possedere caratteristiche comuni che ne consentano il
riconoscimento di appartenenza al gruppo (es. loghi, pie di pagina, ecc). A sua volta i
magazine e gli altri siti satelliti che rispondono al sito Informa Disabile, devono avere
anch'essi caratteristiche di riconoscimento che rimandino al sito capo-fila.
Ovviamente il posizionamento dei contenuti nella pagina non può essere uguale per
tutti, ma cambia in base al tipo di contenuti che vengono maggiormente inseriti (es. se
il sito contiene principalmente news, deve avere un certo tipo di struttura che ne
5
evidenzia e favorisce la fruizione); nonostante ciò deve essere riconoscibile la sua
appartenenza.
Ulteriore importante restrizione è l'utilizzo dei colori che devono essere visibilmente
conformi a quelli del logo di Informa Disabile, se non gli stessi. Naturalmente alcune
scelte devono essere effettuate in base alle esigenze dei committenti.
Requisiti tecnici
I prerequisiti che il nuovo aspetto grafico deve avere sono i seguenti:
• Il sito deve essere adatto ad essere navigato da persone con disabilità di diverso
tipo, motorie e visive principalmente. Questo comporta una costruzione il più
possibile accessibile e che rispetti le norme dello standard W3C (validazione del
codice HTML e CSS).
• Dalle statistiche raccolte sull'utilizzo del sito è stato riscontrato che molti accessi
vengono eseguiti con versioni di browser obsolete e risoluzioni del monitor molto
basse. Da qui la necessità di una struttura scalabile e compatibile non solo con
diversi browser ma anche con diverse versioni degli stessi.
• Il codice deve essere il più possibile modulare e comprensibile per essere ripreso
in un secondo momento ed adattato al CMS.
PREPARAZIONE
Una importante fase della realizzazione del progetto è quella preparatoria nella quale
vengono raccolte tutte le informazioni necessarie, le conoscenze pratiche ed il
materiale necessario per l'inizio del lavoro.
Possiamo dividere questa fase in due parti: la raccolta delle informazioni/conoscenze
pratiche (analisi per raccogliere informazioni preliminari, conoscenze pratiche per la
realizzazione di script e codice, ecc.) e la raccolta del materiale (es. loghi, banner,
ecc).
Analisi generali
Come fase preparatoria ho cominciato ad analizzare la struttura del sito di Informa
6
Disabile attuale concentrandomi sulla disposizione delle informazioni all'interno del sito.
Ho individuato alcune macro-sezioni che compongono il sito e ne organizzano il
contenuto; con occhio critico ho cercato di evidenziare punti deboli e di forza
dell'attuale struttura, in modo da comprendere cosa può essere migliorato e cosa
mantenuto.
7
Sezioni principali individuate
Le macro-sezioni individuate all'interno del sito sono le seguenti:
• Header (testa della pagina)
◦ Logo
◦ Barra di ricerca
◦ Link rapidi
• Menu di sinistra
◦ Barra della lingua
◦ Menu di navigazione del sito
◦ Box informativi
• Menu di destra
◦ Link a pagine correlate
◦ Box informativo
• Corpo della pagina
◦ Sezione in evidenza
◦ Notizie
◦ Barra di navigazione
• Footer (pie' di pagina)
◦ Contatti rapidi
Problematiche riscontrate nell'attuale versione
Da un'attenta analisi sono emersi alcuni aspetti problematici che dovranno essere risolti
nella nuova veste grafica.
• Cattiva nomenclatura che rende difficile la comprensione di determinate
operazione (es. il link “cambia visualizzazione” risulta essere molto vago).
• Errata posizione di alcuni parti del sito (es. il box delle lingue dovrebbe stare in
cima alla pagina per consentire un'immediata scelta).
• Sono presenti molti spazi vuoti che non vengono sfruttati, dovuti ad
un'organizzazione errata dei contenuti.
• La lista puntata come elenco delle news non si adatta molto alla struttura
giornalistica su cui è improntato il sito.
9
Requisiti di accessibilità necessari
Per poter prendere in considerazione un modello al quale far riferimento nella
costruzione della struttura del sito, ho effettuato un'ulteriore ricerca sul web per
individuare siti che avessero caratteristiche simili al sito del progetto da realizzare.
Selezionando ed analizzando qualche sito ho raccolto una serie di caratteristiche
indispensabili per dare resa accessibile alle varie sezioni.
• Menu
◦ Intestazione chiara e ben delineata.
◦ Voci simili a pulsanti, alti e larghi, con un nome coerente al contenuto.
◦ Separazione del menu di navigazione con quello sulle aree tematiche.
◦ Shortcut da tastiera legati al menu.
• Post
◦ Titoli grandi e cromaticamente ben contrastati
◦ Testo mediamente grande, ben spaziato, senza grazie
• Intestazione della pagina
◦ Barra di ricerca abbastanza grande
◦ Lingue disponibili per la fruizione del sito
◦ Link alla mappa del sito
◦ Link alla guida di utilizzo del sito
◦ Scelta dei diversi stili css
▪ Ingrandisci testo
▪ Rimpicciolisci testo
▪ Solo testo
▪ Versione ad alto contrasto
• Pie' di pagina
◦ Contatti rapidi
◦ Link veloci
• Altro
◦ Indicizzazione al sito del Comune di Torino in evidenza
◦ Utilizzo di immagini legate ai post
10
Raccolta conoscenze pratiche
Prima di partire con il lavoro ho cercato sul web degli spunti puramente grafici. Mi sono
avvalso di un sito che da la possibilità ai web designer di postare i propri lavori grafici
realizzati con CSS e JavaScript, creando raccolte e portfolii che gli utenti del sito
possono sfogliare ma non scaricare. [CSS Mania]
Per sfruttare al meglio le potenzialità offerte dalle nuove versioni degli standard HTML e
CSS, ho cercato qualche guida che illustrasse il codice da utilizzare per creare
determinati effetti (ombra esterna, bordi arrotondati), per migliorare la stesura del
codice (classi multiple) e per altri accorgimenti.
Per poter realizzare prototipi grafici professionali mi sono avvalso di un editor grafico
professionale, cercando di migliorare le tecniche già in mio possesso tramite delle guide
tutorial prese dal web. Lo stesso vale per l'utilizzo dell'editor di testo col quale ho
scritto il codice.
PROGETTAZIONELa fase di progettazione è cruciale per la buona riuscita del lavoro. Se i prototipi
realizzati sono ben curati e dettagliati sarà più facile realizzare il codice per il sito;
questo perché si avrà ben chiaro cosa fare e come farlo.
Più dettagli si inseriscono nei modelli e meno tempo si spenderà successivamente per
effettuare scelte e per pensare. L'unica operazione necessaria sarà la traduzione da
modello grafico a codice per pagine web. In questa fase di traduzione emergeranno
inevitabilmente problemi dovuti alle differenze tra le possibilità offerte dal software di
disegno grafico/vettoriale e dalle reali possibilità di costruzione che il codice permette;
ma di questo parleremo più avanti.
Per comodità suddivideremo questa fase in due tranci: l'effettiva realizzazione dei
progetti e delle varie versioni, con esempi annessi, e la valutazione seguita dalla scelta
del miglior prototipo che si adatti meglio alle esigenze precedentemente elencate.
Naturalmente questa seconda parte è seguita da tutta una serie di richieste per la
modifica di alcune parti del prototipo scelto.
11
Prototipazione
Primo punto - ho provato ad immaginare una possibile distribuzione dei contenuti che
fosse pratica e ben delineata, in modo che l'utente medio potesse distinguere con
chiarezza le parti della pagina con le quali interagire.
Secondo punto - è stato necessario distribuire lo spazio della pagina in modo che i
contenuti più importanti, quelli da enfatizzare maggiormente, occupassero più spazio
degli altri e che fossero subito visibili a colpo d'occhio, distribuendo quelli meno
importanti in secondo piano.
Terzo punto - ho cercato di associate un significato agli oggetti grafici in modo che non
fossero solo delle appendici ma che fossero parte integrante del significante della
pagina.
Ultimo punto - non ultimo per importanza, lavorando sugli aspetti di accessibilità ho
scelto in maniera adeguata:
1. dimensioni appropriate per i bottoni, per le voci dei menu, per il testo nella
pagina, in modo che gli utenti affetti da disabilità motoria potessero avere più
spazio per effettuare il click;
2. utilizzando delle etichette per ogni blocco di contenuti della pagina risulta più
immediato intuire ciò che il blocco contiene;
3. con un sistema di evidenziazione per i link sulle immagini ho migliorato la
visibilità dell'elemento selezionato, che non sarà confuso con quelli adiacenti
visto il poco distacco che vi è fra loro;
Questa che ho appena descritto è la linea generale che ho usato per la creazione di tutti
i prototipi. Naturalmente la resa effettiva varia da modello a modello in base alle
caratteristiche specifiche del sito.
Di seguito propongo due modelli per due siti differenti, con le relative diverse versioni
proposte. Ho scelto come esempio il sito di “Informa Disabile” e quello di “Disabilità e
Sessualità” perché esprimono bene le differenze dovute ai diversi ambiti in cui sono
collocati.
Nota importante: le pagine HTML sviluppate risultano essere leggermente diverse dai
rispettivi modelli per i motivi precedentemente elencati.
12
Informa Disabile - Modelli
Iniziamo con il capo-fila, ovvero l'Informa Disabile che abbiamo preso in analisi nella
fase di preparazione. Le versioni che ho realizzato e proposto sono due.
La prima l'ho creata da zero, senza riferirmi a un modello preciso, ma prendendo spunto
da parti di siti differenti. Per la seconda versione invece mi sono ispirato analizzando la
struttura del sito di Repubblica [Repubblica.it], il quotidiano online. Dato che per la
maggior parte il sito di Informa Disabile contiene notizie pubblicate quotidianamente, ho
pensato potesse soddisfare le esigenze richieste.
13
Si può notare che i due prototipi, anche se fondamentalmente diversi, contengono gli
stessi contenuti.
Di particolare importanza è la barra di accessibilità: posta in cima alla pagina, contiene
gli accorgimenti necessari per:
• cambiare il tipo di visualizzazione scegliendo di ingrandire il testo, di trasformare
il sito con colori ad alto contrasto (per gli ipovedenti) o farlo tornare alla versione
originale.
• Variare la lingua in cui è scritto il sito
• Cercare contenuti all'interno del sito tramite l'apposita barra
Un'altra cosa sulla quale ho lavorato è stata l'appartenenza alla città di Torino. Mi è stato
espressamente richiesto che sia possibile un riconoscimento immediato della località a
cui è legato il sito: siccome le schede normative e molte delle notizie sono legate alla
città di Torino diventa importante fare in modo che l'utente si renda subito conto di
trovarsi su un sito del Comune di Torino. Così, oltre al logo del Comune ho utilizzato, in
entrambi i casi, richiami alla Mole Antonelliana, simbolo inconfondibile della città.
Per far in modo che l'utente potesse distinguere bene tra una notizia è l'altra ho
utilizzato degli identificatori che consistono in immagini affiancate alle news, e dei
separatori costituiti, nel primo caso da uno sfondo colorato e nel secondo caso da delle
linee grigio scuro.
Informa Disabile – Valutazione e scelta
In una riunione con gli altri membri della redazione ho proposto i modelli sviluppati.
Dopo un'accurata analisi la scelta è ricaduta sul secondo prototipo. Il motivo principale è
stato appunto l'impronta più giornalistiche con cui è stato realizzato. Uno dei motivi più
tecnici è stato il fatto di aver delimitato ad una dimensione massima il corpo della
pagina; infatti un problema sorto in precedenza è stato l'esagerata espansione dei
contenuti sui monitor a grande definizione (2560x1600).
Successivamente sono stare richieste alcune modifiche come la variazione di posto di
alcuni blocchi della pagina in base alla loro importanza.
18
Confrontiamo ora le due versioni del sito Informa Disabile. A sinistra abbiamo la versione
antecedente al restyling mentre a destra osserviamo il prototipo di quella nuova.
Per un'analisi accurata ho suddiviso il layout in dieci blocchi e li ho numerati con lo
stesso indice in entrambe, in modo da vedere subito la loro posizione all'interno della
pagina. Per la precisione le dieci sezioni sono:
1. Strumenti per l'accessibilità
2. Banner e loghi
3. Menu
4. Campo di ricerca
5. Sezione con le informazioni più in evidenza
6. Link ai magazine
7. Bacheca
21
Informa Disabile - Confronto Versioni 1
8. Notizie
9. Link a siti consigliati
10. Copyright
Possiamo notare da subito alcuni fondamentali cambiamenti nella struttura di
distribuzione delle informazioni della nuova versione rispetto quella precedente.
Andiamo per ordine.
• UNO – Il box contenente gli shortcut per cambiare lingua del sito è stato spostato
in alto in modo che sia immediatamente visibile all'utente straniero. La barra di
accessibilità occupa tutta la larghezza della struttura.
• DUE – Anche il banner con i relativi loghi occupa tutta la larghezza della
struttura.
• TRE – Il menu è stato suddiviso in due parti rispetto quello della versione
precedente. Sono stati usati dei pulsanti molto larghi e ben visibili in modo così
da facilitare puntamento e clic. Inoltre è stato posizionato orizzontalmente,
affiancato dal campo di ricerca.
• QUATTRO – Anche il campo di ricerca è stato ingrandito e reso ben visibile.
• CINQUE – La sezione evidenza è rimasta simile alla precedente; è stata suddivisa
in due colonne ed ogni coppia link più data è stato separate dalle altre tramite
divisore grafico.
• SEI – Poco da dire, oltre al restyling grafico non è stato fatto nient'altro che
spostare il box a destra secondo i criteri della struttura a due colonne del layout.
• SETTE – Sono stati raccolti tutti i contenuti sparsi per la pagina e sono stati
raggruppati in una sessione denominata “Bacheca”.
• OTTO – Le novità sono state decisamente rinnovate; ogni news è ora la
composizione di un'immagine segnaposto, di un teaser della notizia intera e di
informazioni pratiche quali titolo, data e così via. Inoltre ogni notizia è separata
dalla successiva tramite un separatore grafico.
• NOVE – I mini banner che linkano a siti sono stati ordinati orizzontalmente
anziché verticalmente per evitare l'effetto scorrimento infinito della pagina. Se
venissero aggiunti altri link la dimensione della pagina continuerebbe ad
aumentare diventando poco accessibile.
• DIECI – Non sono state apportati cambiamenti sostanziali al copyright.
22
Per completezza analizziamo nello stesso modo una pagina di secondo livello del sito:
1. Menu
2. Percorso a briciole di pane
3. Stampa pagina
Guardiamo quali sono le modifiche più rilevanti.
• UNO – Come precedentemente detto il menu è stato scisso in due parti: un menu
principale presente sia nella home-page che in tutte le altre pagine ed uno
secondario per le “Aree tematiche” suddiviso in più sotto-menu. Questa
suddivisione di sotto-menu rende la navigazione tra le pagine più immediata e
permette di passare velocemente da una pagina all'altra.
• DUE – Il percorso a briciole di pane è praticamente lo stesso per entrambe le
versioni.
• TRE – Ho sistemato poi la barra che contiene il link per stampare e la data di
ultimo aggiornamento.
Disabilità e sessualità – Modelli
Anche per il sito di Disabilità e sessualità ho ideato due modelli. Diversamente da quello
precedente, la collocazione non è di tipo giornalistico; al contrario, la maggioranza di
contenuti sono testi che descrivono progetti, comitati, concorsi e premi acquisiti. In
maniera molto sporadica viene inserita qualche news.
Una parte importante è rappresentata dallo sportello di ascolto che deve saltare
all'occhio immediatamente all'apertura della pagina.
24
Notiamo che la barra di accessibilità viene ripresa anche qui. I loghi e il copyright al
fondo della pagina notificano l'appartenenza del sito al gruppo dell'Informa Disabile.
Nella prima versione i blocchi che formano la pagina non sono perfettamente delineati;
al contrario la grafica del secondo modello è fondata proprio sulla netta separazione del
contenuto. Vengono riprese le etichette esplicative delle sezioni e la struttura a bottoni
del menu che troviamo anche nel precedente sito.
Una sezione intera della pagina è stata dedicata allo sportello, avvalendosi di un
immagine per evidenziarlo.
Rimane molto simile al sito precedente la costruzione dei siti consigliati, tenendo i mini-
banner come collegamento agli altri siti del gruppo di Informa Disabile.
26
Disabilità e sessualità - Prototipo 2
Disabilità e sessualità – Valutazione e scelta
La valutazione per questo secondo sito è avvenuta in maniera differente.
Tra la creazione della prima versione e della seconda è trascorso un sostanziale lasso di
tempo. Questo mi ha permesso di fare un'analisi autocritica del mio lavoro. Mi sono
infatti reso conto che la prima versione che avevo creato non si addiceva molto alle
richieste che mi erano state fatte. Così ho preso la decisione di non continuare a
modificare il prototipo 1 per farlo rientrare forzatamente in quello schema di regole che
possedevo, ma di ripensare completamente ad un secondo modello.
La proposta finale è stata dunque del secondo prototipo che è piaciuto immediatamente
ed è stato scelto, previe le consuete modifiche su alcuni blocchi di contenuti.
REALIZZAZIONEQuesta fase del tirocinio prevede l'implementazione in codice web dei modelli ricavati in
precedenza. Il mio compito richiedeva solamente la creazione di una struttura grafica
che organizzasse all'interno della pagina i contenuti e la loro posizione. Tutto ciò che sta
dietro, come la conservazione ed estrazione dei contenuti da database, non è di mia
competenza. È ovvio che la struttura deve essere pensata in modo flessibile così che si
possa adattare a qualsiasi tipo di infrastruttura sottostante.
Affrontando il passaggio dal modello grafico alla rispettiva implementazione sono sorte
varie problematiche è nuove necessità, che mi hanno obbligato a apportare delle
modifiche rispetto ai modelli originali.
Un'ulteriore punto sul quale mi sono concentrarmi è l'aspetto di standardizzazione di
alcune parti dei diversi siti; infatti per rendere maggiormente intuitivo il legame tra il
sito capo-fila (Informa Disabile) e i suoi siti satelliti, ho dovuto necessariamente
provvedere ad uno standard grafico. Vedremo degli esempi più avanti in questo capitolo.
Per quanto riguarda la strumentazione tecnica, mi sono avvalso di tre diversi programmi
per la stesura del codice: Adobe Dreamweaver, Notepad++ e NetBeans. Il motivo di
questa variazione non è legato alla realizzazione del codice, ma unicamente ad un
fattore personale.
Ho inoltre fatto uso di varie guide online per trovare accorgimenti da utilizzare
all'interno dei siti. [W3C Schools, JQuery Documentation]
27
Stadi di realizzazione
Per rendere più leggibile il testo ho suddiviso la fese di realizzazione in diversi stadi; in
realtà questa suddivisione non risulta essere così netta.
Possiamo pensare il lavoro organizzato nel seguente modo:
• Raccolta del materiale
• Costruzione della struttura HTML
• Realizzazione dello stile CSS
• Utilizzo degli script
• Fase di testing
Raccolta del materiale
Come primo passo c'è indubbiamente la raccolta e, quando necessario, la realizzazione
del materiale che andrà a comporre la pagina web.
Parlando di materiale mi riferisco principalmente alle immagini che compongono la
grafica: bottoni, loghi, banner, pattern di sfondo e immagini segnaposto.
Bottoni, banner e pattern di sfondo sono stati realizzati quasi tutti da me; non
conoscendo le dimensioni esatte da assegnargli e dovendo rendere il sito scalabile
evitando l'effetto di sgranamento sulle risoluzioni più alte, ho scelto volutamente
dimensioni sostanziose, ridimensionate ad hok utilizzando le proprietà dei CSS. Questa
soluzione potrebbe portare il sito ad avere una dimensione eccessiva ma, con le attuali
velocità delle connessioni ADSL, risulta un problema marginale.
I loghi mi sono stati forniti dai colleghi della redazioni, quelli che non erano disponibili li
ho recuperati dal web, come le immagini segnaposto.
Costruzione della struttura HTML
In questo stadio e nel prossimo mi riferirò alla costruzione della pagina principale del
sito Informa Disabile. Ho scelto questo come esempio generale perché rappresenta bene
il lavoro svolto nel progetto.
Per la struttura della pagina ho utilizzato un metodo standard che si utilizza spesso sul
web. Come prima cosa ho utilizzato una DIV che sarà il contenitore generale di ogni
altro blocco della pagina. Tutto ciò che si inserirà nella pagina sarà contenuto in essa.
Successivamente l'ho suddiviso in blocchi orizzontali; in particolare ho creato una DIV
28
per la barra di accessibilità posta in cima alla pagina, una per il corpo della pagina
(body-page) ed un ulteriore DIV per il pie di pagina (footer). Quest'ultimo conterrà
semplicemente le informazioni di copyright e i contatti rapidi del sito.
Il corpo della pagina è suddiviso a sua volta in due DIV anch'essi orizzontali: il primo è
l'intestazione (header) mentre il secondo è un blocco generico suddiviso nel particolare
in due colonne destra e sinistra che saranno i contenitori effettivi dei contenuti del sito.
L'intestazione è formata semplicemente dal banner del sito e dalla barra del menu (che
contiene inoltre il form di ricerca).
Quello che mi preme spiegare è la costruzione dei blocchi di contenuti. Per ogni blocco
ho individuato alcuni elementi in comune: l'etichetta e l'involucro interno che raggruppa
il materiale contenuto. Questa forma “blocco = etichetta + involucro” è l'entità che
viene riportata identicamente per ogni sezione del sito. Questa struttura modulare
permette un efficiente flessibilità e adattamento alla infrastruttura sottostante,
qualunque essa sia. Ciò che varierà sarà solamente il contenuto dell'involucro. Oltre
tutto anche questo è suddiviso in sotto-unità; prendiamo in esempio le news, ognuna di
essa ha, in linea generale, un titolo, un'immagine e un blocco di testo. Questo schema
viene riportato per ogni singola news.
Le varie sezioni sono poi distribuite nella pagina secondo il layout a due colonne; la
posizione è stata scelta dai committenti in base all'importanza che queste hanno
all'interno del sito. Le più importanti appariranno in cima mentre quelle di minor
rilevanza sono poste verso il basso.
Realizzazione dello stile CSS
Come esposto all'inizio di questo testo, una delle richieste era la possibilità di variare le
dimensioni del font ed utilizzare una versione della pagina in alto contrasto. Questo
necessità dello sviluppo di tre differenti fogli di stile. Per comodità parlerò solo di uno di
essi, facendo di quando in quando qualche accenno agli altri.
Ad ogni DIV o elemento HTML di rilevanza è stato assegnato un selettore quali ID o CLASS
per associargli un particolare stile. Mi soffermerò solo sulle cose più rilevanti.
Innanzi tutto ho posizionato gli elementi utilizzando gli attributi MARGIN e PADDING,
giocando sulle dimensioni delle DIV con appropriati valori di WIDTH, lasciando il calcolo
automatico dell'altezza (HEIGHT) al browser in relazione alla dimensione del contenuto
29
interno. Ho impostato i valori in parte in percentuale e in parte in em. Le dimensioni in
em sono relative alla dimensione della lettera m del font utilizzato. Ho fatto questa
scelta in modo che quando l'utente utilizza il comando di zoom del testo del browser
CTRL + o CTRL - , parte della struttura si adatti e il testo non fuoriesca.
Per le etichette delle sezioni ho utilizzato l'attributo BACKGROUND-IMAGE e REPEAT in
modo che lo sfondo che compone l'etichetta potesse essere ripetuto per tutta la
lunghezza della DIV.
Un'ulteriore cosa che ritengo essere rilevante è lo stile usato per i mini-banner che
linkano a siti esterni. Al passaggio del mouse sopra al singolo banner questo viene
evidenziato da una “cornice” colorata. Per realizzare questo effetto ho inserito lo stile
attraverso l'attributo HOVER sul link. In molti altri casi ho utilizzato questo accorgimento
posizionando l'attributo non su un link ma su un qualsiasi altro elemento; questa
funzione è offerta dalla versione nuova versione di CSS, ed è rilevata da quasi tutti i
browser.
Altre funzionalità della nuova versione dello standard CSS di cui ho usufruito sono i bordi
arrotondati e l'ombra esterna ad alcuni elementi. È stato interessante notare come
browser diversi interpretassero in maniera differente questi attributi. Per esempio, tra
Chrome e FireFox vi è una leggera differenza di effetto aliasing sui bordi arrotondati e
sull'intensità cromatica dell'ombra. Internet Explorer invece non riconosceva affatto i
bordi, lasciandoli squadrati (eccezion fatta per l'ultima versione che riconosce anche le
ombre).
Per la versione ad alto contrasto ho scelto di non eliminare gli attributi che regolano la
struttura, come si è soliti fare; al contrario mi sono limitato ad aumentare le dimensioni
del testo e a cambiare i colori sia del testo che degli sfondi, in modo che creassero il
maggior contrasto possibile. In particolare ho impiegato colori scuri per gli sfondi e
chiari per il testo; alcune persone provano fastidio nel visualizzare siti con sfondi troppo
chiari, da questo deriva la mia scelta.
Utilizzo degli script
Il linguaggio JavaScript offre un ottima libreria contenente utili funzioni per realizzare
diversi tipi di script da inserire nelle proprie pagine web: Jquery.
La prima cosa che ho fatto per iniziare la costruzione degli script è stato scaricare e
30
inserire nelle pagine questa libreria.
Dopo di che mi serviva un'altra piccola libreria per correggere un problema dovuto alla
trasparenza delle immagini PNG con i browser più obsoleti, come IE 5.5.
Una volta preparato il materiale necessario, ho creato un file sempre JavaScript che ho
chiamato “Functions” e che ho allegato alla pagina. Questo racchiude tutte le funzioni
presenti nelle varie pagine HTML.
Le prime che ho implementato sono state quelle per la variazione dei fogli di stile
cliccando sugli appositi bottoni. Rilevando il click dalla pagina, seleziono il foglio CSS
associato al bottone sul quale si è premuto e sostituisco lo stile, memorizzandolo inoltre
in un file cookie in modo che permanga mentre navigo il sito.
Un secondo utilizzo importante che ne ho fatto è stato per i vari menu a cascata (drop-
down). Per rendere visibile il secondo livello del menu al passaggio del mouse ho
utilizzato una coppia di funzioni messe a disposizione da Jquery: SlideDown() e
SlideUp(). Associate ad un evento, permettono di rendere visibile un determinato
elemento che prima non lo era, facendolo comparire con una transizione dall'alto verso
il basso, e viceversa.
Un altro script degno di essere citato è quello utilizzato per il magazine “Parole per i
sordi” (subordinato all'Informa Disabile). Il magazine in questione possiede un canale
YouTube su cui carica mensilmente o settimanalmente dei video-notiziari in linguaggio
LIS. Nella home-page del sito viene mostrato embedded il video più recente, ma l'utente
deve poter vedere gli altri video senza andare su YouTube per sfogliarli. Per far ciò ho
costruito un piccolo menu a tendina che contiene tutte le date dei video-notiziari in
modo che possano essere selezionati. Una volta scelto quello da vedere, lo script
interviene andando a selezionare il valore della voce selezionata che corrisponde al
codice univoco del video per YouTube e lo sostituisce a quello presente fino a quel
momento nella home.
Fase di testing
Utilizzando vari strumenti mi sono accertato che le pagine realizzate fossero (il più
possibile) compatibili con i diversi browser, scalabili su diverse risoluzioni e validate
secondo gli standard che regolamentano il web.
Mi sono avvalso di un monitor ad alta risoluzione e di un plug-in per il browser, per
31
assicurarmi che le pagine fossero scalabili sulle alte definizioni, e che raggiungessero un
minio di 800x600 pixel.
Ho installato sul computer tre diversi tipi di browser: Internet Explorer, Mozzila FireFox
e Google Chrome. Aprendo le pagine con ognuno di questi mi sono accertato della
corretta visualizzazione. Per verificare che codici presi dalle versioni più recenti degli
standard fossero compatibili con i browser (anche i più obsoleti) ho fatto riferimento ad
una tabella trovata online.
Infine con un plug-in chiamato “HTML validator” ed un sito per la validazione dei fogli di
stile CSS Lint, mi sono assicurato della correttezza sintattica del codice.
32
Informa Disabile - Pagina HTML 1
Traduzione: problematiche e migliorie
Come già detto in precedenza, con il termine “traduzione” intendo l'operazione di
conversione dal modello grafico al codice web. In questo caso, mi sono occupato io
stesso sia dei progetti grafici sia della realizzazione del codice. Questo fattore limita
grandemente il nascere di problematiche di traduzione. Infatti, più o meno, conosco
bene le possibilità del codice HTML e CSS e i suoi limiti; per questo nella fase di
ideazione dei modelli mi sono limitato a progettare cose che sarebbe stato possibile
realizzare.
Sotto questo punto di vista viene naturale intuire che le problematiche sorte sono
davvero minime. La cosa interessante di questo aspetto è l'altra faccia della medaglia:
35
Informa Disabile - Magazine "Parole per i sordi" - Pagina HTML
costruendo i prototipi mi sono limitato su alcuni aspetti che poi, durante la stesura del
codice, non erano presenti; pertanto le pagine realizzate presentano molte migliorie
rispetto ai relativi progetti.
Un esempio di questo sono i bordi arrotondati: nella progettazione mi sono limitato al
loro utilizzo perché, non conoscendo perfettamente lo standard CSS 3.0, sapevo fossero
da realizzare tramite degli escamotage che comportano difficoltà di gestione e di
scalabilità.
Miglioramento del metodo
Passando il tempo a scrivere il codice, cercando informazioni su Internet e leggendo
guide online, ho aggiunto al mio bagaglio di conoscenze nuove tecniche con le quali ho
potuto accrescere di livello la mia metodologia in questo settore. Via via ho acquistato
praticità e capacità che mi hanno portato a migliorare la resa e la velocità di
produzione. I miglioramenti acquisiti sono di vario tipo:
• Maggiori conoscenze del funzionamento alla base del codice (soprattutto per
quanto riguarda JavaScript).
• Maggior intuizione per la risoluzione dei problemi.
• Capacità di ricercare ed acquisire le informazioni necessarie per lo sviluppo di
determinate applicazioni.
• Ampliamento delle possibilità di scelta per effettuare una stessa operazioni con
metodi differenti.
Segue una descrizione esemplificativa di ciò che ho appena detto.
Cronologicamente il progetto è stato realizzato partendo dal sito Informa Disabile e
terminando con quello di Disabilità e Sessualità.
Realizzando il primo mi sono trovato difronte ad un problema: il sito è formato
fondamentalmente da due pagine, la prima ha un layout a due colonne rispettivamente
30 e 70 percento, mentre la seconda ha dimensioni opposte (70 e 30 percento). Volendo
utilizzare un unico foglio di stile risulta comprensibilmente difficile assegnare due
dimensioni diverse alle stesse identiche colonne. Un'ulteriore ostacolo è stato il verso
delle etichette; infatti nella colonna di destra l'etichetta sporge sulla destra, al
contrario nella colonna di sinistra l'etichetta sborda sulla sinistra.
Come prima soluzione ho creato altri due fogli di stile oltre a quello generico,
36
suddividendo tutti gli attributi in comune delle due pagine con layout diverso in un unico
foglio; tutti gli attributi specifici per le diverse pagine li ho assegnati rispettivamente al
CSS di una pagina e a quello dell'altra. Fino a prova contraria quel metodo mi è
sembrato la soluzione migliore tra tutte le possibilità.
Andando avanti nel tirocinio mi sono trovato ad affrontare un problema simile (anche se
non totalmente identico) per il sito di Disabilità e Sessualità. Durante il mio percorso
formativo avevo trovato una guida che spiegava come assegnare più classi CSS ad uno
stesso elemento (classi multiple css). Utilizzando due classi differenti per lo stesso
selettore sull'elemento è possibile differenziare lo stile, magari in base alla posizione
destra/sinistra della pagina. Questa soluzione, rispetto a quella utilizzata all'inizio è di
gran lunga migliore, consentendomi di risparmiare parecchie risorse.
CONCLUSIONEIn totale ho realizzato cinque diversi temi grafici: uno per il sito Informa Disabile, tre
per i suoi magazine, Arte e cultura, Sport e Parole per i sordi, ed infine il tema per il sito
Disabilità e sessualità.
Questi sono solo dei temi, ovvero dei modelli in codice HTML e CSS di come organizzare i
contenuti. Saranno poi da “montare” sull'infrastruttura che gestisce i contenuti
apportando delle modifiche minime per il loro adattamento completo.
Attualmente si sta per cominciare la migrazione dal cms PASS a quello nuovo,
WORDPRESS. Il web è ricco di documentazione per WordPress con informazioni accurate
per la realizzazione di temi adatti. Bisognerà dunque prendere il materiale che ho
prodotto e trasformarlo in temi specifici per WordPress.
Personalmente sono abbastanza contento del mio lavoro e di come sia andata questa
esperienza formativa. Oltre alle nozioni acquisite in ambito tecnico, ho potuto entrare
maggiormente nella mentalità lavorativa: come viene organizzato e gestito un
determinato progetto, quali sono le fasi del lavoro, come comportarsi all'emergere di
problemi e come fare per adattarsi alle esigenze di più persone.
In particolare il progetto in cui sono stato coinvolto è solo una piccola parte di quello
globale; la suddivisione del lavoro in varie piccole parti, ognuna assegnata ad un singolo
individuo che, nell'inseme, forma un team, risulta essere un ottimo metodo lavorativo.
37
Le principali fasi del tirocinio sono state:
• La presentazione e spiegazione del lavoro da svolgere
• Conoscenza del background storico e dei colleghi di lavoro, con i rispettivi
incarichi.
• Suddivisione del progetto sotto-progetti e a loro volta in fase: prototipazione,
valutazione e scelta, realizzazione e testing.
• Scelta del punto di partenza: da quale sito conviene cominciare a lavorare.
• CheckPoint intermedi per verificare la situazione e l'andamento del lavoro.
• Presentazione finale del lavoro.
Un importante aspetto è stato il continuo relazionarsi con i colleghi che si occupano
della parte redazionale. Infatti sono proprio loro i primi ad utilizzare il sito per la ricerca
delle informazioni; per questo motivo risulta fondamentale la loro opinione riguardante
la struttura.
Concludo dicendo che questa esperienza mi ha lasciato un bagaglio di conoscenze che mi
saranno sicuramente utili nella mia carriera professionale futura.
38