Relazione sul restyling del sito del Comune di Ferentino. Progetto didattico di gruppo svolto nell'ambito del corso "Tecnico gestione siti Internet" del Cnosfap Valdocco di Torino

1. Restyling del sito web del Comune di Ferentino (FR)
Realizzato da RamDesign Web Agency composta da:
Marisa FAUSONE
Marco MASINO
Roberto PAGANO
Torino, 20 febbraio 2012

2. Sito web a cura di Ramdesign
Progetto
Restyling sito
web Comune di
Ferentino
1)
Analisi del
sito attuale
Check-up
2)
Diagramma
di GANTT
(stima dei
tempi)
3) Scelta del
layout -
Creazione 2
bozzetti grafici
4)
Organigramma
informazioni
nuovo sito
5) Costruzione
sito in
HTML/CSS
Validazione
W3C e SEO
6)
Realizzazione
versione Mobile
gli step

3. Sito web a cura di Ramdesign
1) Analisi del sito attuale - CHECK-up
I punti di forza emersi:
Albo pretorio (pubblicità on-line del Comune) raggiungibile nella Home;
PEC (posta elettronica certificata) in evidenza;
grafica sobria;
colori accessibili ai daltonici;
link poco profondi;
disponibilità costante del sito;
aggiornamento del server.
I punti di debolezza rilevati:
informazione male organizzata e ripetitiva;
stile dei contenuti trascurato e ridondante;
assenza di strumenti interattivi (registrazione al sito, forum, newsletter,
modulistica on-line);
mancanza di mappa sito, accessori leggibilità, tecniche di
navigazione (breadcrumb), strumenti di ricerca e traduzione;
link spezzati;
aggiornamento del sito insufficiente e discontinuo;
scarsa attenzione al SEO (Search Engine Optimisation).

4. Sito web a cura di Ramdesign
2) Diagramma di GANTT (stima dei tempi)
Il progetto si è svolto dal 20/12/2011 al 20/02/2012, con scadenze intermedie,
il 30/01 (consegna cartaceo) e 15/02 (consegna sito), le altre milestones indicano
i brief interni della Ramdesign.

5. Sito web a cura di Ramdesign
3) scelta del layout - creazione 2 bozzetti grafici (slide 1-4)
La scelta del layout è maturata dall’analisi di un ragguardevole numero di siti
comunali e di PA (Pubblica amministrazione) nonchè dalla valutazione sulle ricadute
che la scelta operata avrebbe determinato nell’usabilità del sito.
Alla fine, il tradizionale layout a 3 colonne con voci di menu interamente a
vista, ci è sembrato il più adatto a fornire all’utente il quadro d’insieme in un
solo “colpo d’occhio”.
La grafica, volutamente semplice e sobria, è arricchita dalle immagini di sfondo
dell’header e del footer che danno un tocco di originalità al sito, e ravvivata dai
banner statici che identificano Aziende e Comuni gemellati.
Header
Footer

6. Sito web a cura di Ramdesign
3) scelta del layout - creazione 2 bozzetti grafici (slide 2-4)
La gamma di colori utilizzata, si ispira alla brand image - lo stemma del Comune -
e gioca sull’alternanza di bordeaux, grigio e bianco per evidenziare gli elementi
salienti del sito e talvolta creare effetti piacevoli allo sguardo dell’utente.
Il menu orizzontale sotto l’header ha lo scopo di accogliere le informazioni di
“prima mano” che in un sito della PA devono essere subito rintracciabili, anche
secondo quanto stabilito dalle Linee guida emanate dal Ministero per la PA e
l’Innovazione.
Banner Enti e Aziende
Banner Comuni gemellati

7. Sito web a cura di Ramdesign
3) scelta del layout - creazione 2 bozzetti grafici (slide 3-4)
la 1° proposta grafica prevede l’uso di un template a 3 colonne, ripartito in 5 sezioni, di cui 4
occupate da menu verticali e una in basso, larga quanto tre colonne, accoglie i link utili;
la 2° versione, poi implementata, si basa su un template a tre colonne con 2 menu verticali e 1
orizzontale sotto l’header oltre alla sezione centrale dedicata alle News e ai box di pubblica utilità.
1° proposta
2° versione sviluppata

8. Sito web a cura di Ramdesign
3) scelta del layout - creazione 2 bozzetti grafici (slide 4-4)
In quanto principianti, siamo partiti dal template
preconfezionato a due colonne, a sinistra …
… per arrivare al template a tre
colonne, a destra

9. Sito web a cura di Ramdesign
4) Organigramma informazioni nuovo sito (slide 1-4)
Categorizzazione e labelling della Home page –
Header, menu orizzontale e menu di sinistra
Home page
Comune
Sindaco Giunta
Consiglio comunale Delibere
Uffici Area riservata
Pubblicazioni
Bandi-Gare-Concorsi Statuto - Atti
Avvisi
Consultazioni
elettorali
Trasparenza, valutazi
one e merito
Enti e dintorni
Proloco Ferentino SER.A.F.
Marketing
territoriale
Basket Ferentino
Avis Ferentino Radio Ferentino
Centro studi Ermini
Eventi e
manifestazioni
Ricorrenze annuali Locali-divertimento
Ciociaria turismo Eventi in Ciociaria
Menu orizzontale
Home Mappa sito
PEC Albo Pretorio
URP SUAP
News Mobile
Header
(img sfondo)
Data corrente Medaglia d'oro
Lazio - Frosinone Terme di Pompeo

10. Sito web a cura di Ramdesign
4) Organigramma informazioni nuovo sito (pag. 2-4)
Home page
Guida ai
servizi
Cittadino
Diritti e
doveri
Famiglia
(figli)
Tasse Ambiente
Residente
straniero
Ottenere la
cittadinanza
Imprenditore
Gestire
un'attività
Tributi
Tutela
dell'ambiente
Turista
Itinerari
Itinerario
città
Itinerario
religioso
Modulistica
Moduli on-
line
Autocertificaz
ione on-line
Link a
Regione Lazio
Il territorio
Arrivare-
trasporti
Auto, treni, b
us
Storia
Origini
Personaggi
storici
Chiese e
Monumenti
Galleria
fotografica
Canali
tematici
Strutture
educative
Strutture
sanitarie
Strutture
ricettive
Strutture
sportive
Strutture
culturali
Ferentino.org
Meteo3B+
Aziende e
associazioni
Trasporto
pubblico
Enel
Ferentino
ACEA ATO5 Farmacie
Raccolta
rifiuti
Energia
alternativa
Gemellaggi
San Severino
Marche
Rockford
Ekaterinburg Raszyn
Iacobeni
Categorizzazione e labelling della Home page – menu di destra

11. Sito web a cura di Ramdesign
4) Organigramma informazioni nuovo sito (pag. 3-4)
Nell’organizzazione dei contenuti abbiamo tenuto conto dei più recenti criteri di
accessibilità e usabilità dettati da esperti del web come il prof. Polillo.
Il flusso delle informazioni è studiato per essere fruibile da un’utenza ampia ed
eterogenea, con pari efficacia.
Così il “cittadino” potrà trovare rapidamente tutto ciò che gli serve e allo stesso
modo il “residente straniero”, “l’imprenditore” e il “turista”.
Tutto è a portata di mano e in qualsiasi momento le “briciole di pane”
riconducono al punto di partenza.
La testata del sito associa alla funzione grafica, la data corrente (javascript) e le
peculiarità del Comune:
decorato con medaglia d’oro;
ubicato nella Regione Lazio;
in Provincia di Frosinone;
famoso per le Terme di Pompeo.
L’utente ne trae così una prima panoramica della località ed è stimolato a
“saperne di più” cliccando sui rispettivi link.

12. Sito web a cura di Ramdesign
4) Organigramma informazioni nuovo sito (pag. 4-4)
Alcune sezioni, come
“La Storia”, hanno richiesto
un minuzioso lavoro di ricerca
e selezione di contenuti ad
integrazione di quelli offerti
dal sito originale
altre, quali le
“Strutture educative” sono
state create ex-novo.

13. Sito web a cura di Ramdesign
5) Costruzione sito in HTML/CSS - Validazione W3C e SEO (1-2)
Il sito è un doctype Strict che combina una struttura di contenuti in linguaggio
HTML (marcatore) ad una formattazione di tale struttura con i CSS (fogli di stile).
Nel rispetto del SEO (reperibilità nei motori di ricerca), sono stati introdotti
Meta-name keywords e description nella “head” delle pagine HTML.
Tag HTML per la lista del menu sx
Regole CSS applicate alla medesima lista

14. Sito web a cura di Ramdesign
5) Costruzione sito in HTML/CSS - Validazione W3C e SEO (2-2)
Abbiamo ottenuto la validazione CSS del W3C validation service
E sulla validazione HTML ci stiamo ancora lavorando! D’altro canto, Strict
vuol dire anche questo …

15. Sito web a cura di Ramdesign
6) Realizzazione versione Mobile
“La città in un touch”, ecco come vogliamo che sia il nostro sito per Mobile!
Facile, rapido, essenziale, per agevolare la navigazione da un universo in
movimento.
Pensato per chi cerca un’informazione “al volo”, e vuole trovarla in pochi
istanti senza inutili perdite di tempo e di denaro causate dal caricamento di
una grafica troppo ambiziosa.
Dotato di numeri rapidi e sms che si attivano tramite un link nel footer.

16. Sito web a cura di Ramdesign
Pubblicazione del sito
Una pratica scontata per un web designer professionista, ma per noi …
trampolino di lancio delle nostre prime opere virtuali.
La pubblicazione di un sito si espleta in due fasi:
registrazione di un dominio gratuito su Altervista.org;
download ed installazione di FileZilla (software per la gestione di file su
server remoto) sul proprio computer per poter pubblicare le pagine web
nello spazio che Altervista ci riserva.
Se poi vogliamo rendere il nostro sito
dinamico, basta attivare il database e
fare qualche SELECT *… con Php, ma
questa è un’altra storia che inizia con
un <?