MONOGRAFIADocumento richiesto a fine di un

tirocinio formativo curricolare

1

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

8

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

14

15

16

Informa Disabile - Prototipo 1

17Informa Disabile - Prototipo 2

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

19

20

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

23

Informa Disabile - Confronto Versioni 2

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

25

Disabilità e sessualità - Prototipo 1

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

33

Informa Disabile - Pagina HTML 2

34

Disabilità e Sessualità - Pagina HTML

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