SlideShare a Scribd company logo
1 of 16
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
http://ramdesign.altervista.org
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
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).
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.
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
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
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
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
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,
valutazione 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
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,
bus
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
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.
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.
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
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 …
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.
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 <?

More Related Content

Similar to Ferentino

microASP.it
microASP.itmicroASP.it
microASP.itictblog
 
Figure libro "Plasmare il Web"
Figure libro "Plasmare il Web"Figure libro "Plasmare il Web"
Figure libro "Plasmare il Web"Roberto Polillo
 
Drupal Day 2011 - Il geoportale del Comune di Bergamo
Drupal Day 2011 - Il geoportale del Comune di BergamoDrupal Day 2011 - Il geoportale del Comune di Bergamo
Drupal Day 2011 - Il geoportale del Comune di BergamoDrupalDay
 
SEO (Search Engine Optimization) Indicizzazione nei motori di ricerca
SEO (Search Engine Optimization) Indicizzazione nei motori di ricercaSEO (Search Engine Optimization) Indicizzazione nei motori di ricerca
SEO (Search Engine Optimization) Indicizzazione nei motori di ricercaCarlo Marenzi
 
La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...
La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...
La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...Paolo Nesi
 
nuove professioni digital, lavori emergenti in ambito Digital, web, social me...
nuove professioni digital, lavori emergenti in ambito Digital, web, social me...nuove professioni digital, lavori emergenti in ambito Digital, web, social me...
nuove professioni digital, lavori emergenti in ambito Digital, web, social me...Luca Papa
 
Analizzare un link con gli occhi di Google
Analizzare un link con gli occhi di GoogleAnalizzare un link con gli occhi di Google
Analizzare un link con gli occhi di GoogleBizup
 
Accessibile.it: progetto e indagine accessibilità dei siti
Accessibile.it: progetto e indagine accessibilità dei sitiAccessibile.it: progetto e indagine accessibilità dei siti
Accessibile.it: progetto e indagine accessibilità dei sitiMentine
 
Webbit Mappa interattiva
Webbit Mappa interattivaWebbit Mappa interattiva
Webbit Mappa interattivaMassimo Schiro
 
IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità: una strat...
IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità:  una strat...IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità:  una strat...
IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità: una strat...TSW
 
Email marketing and Web 2.0 - Email Power 2007
Email marketing and Web 2.0 - Email Power 2007Email marketing and Web 2.0 - Email Power 2007
Email marketing and Web 2.0 - Email Power 2007Alberto Giusti
 
Rich Snippet - ST 2012
Rich Snippet - ST 2012Rich Snippet - ST 2012
Rich Snippet - ST 2012ST2012
 
Msc Crociere B2B2C XML
Msc Crociere B2B2C XMLMsc Crociere B2B2C XML
Msc Crociere B2B2C XMLEstensa Srl
 
Project work. per la galleria ce o
Project work. per la galleria ce oProject work. per la galleria ce o
Project work. per la galleria ce oCarolaCaretto
 
Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011
Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011
Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011Mentine
 
Evoluzione della link buidling - Webinar Monari per Semrush/WME
Evoluzione della link buidling - Webinar Monari per Semrush/WMEEvoluzione della link buidling - Webinar Monari per Semrush/WME
Evoluzione della link buidling - Webinar Monari per Semrush/WMEBizup
 
Accessibilità e Usabilità biblioteche toscane
Accessibilità e Usabilità biblioteche toscaneAccessibilità e Usabilità biblioteche toscane
Accessibilità e Usabilità biblioteche toscanebammamtre
 

Similar to Ferentino (20)

microASP.it
microASP.itmicroASP.it
microASP.it
 
Figure libro "Plasmare il Web"
Figure libro "Plasmare il Web"Figure libro "Plasmare il Web"
Figure libro "Plasmare il Web"
 
Drupal Day 2011 - Il geoportale del Comune di Bergamo
Drupal Day 2011 - Il geoportale del Comune di BergamoDrupal Day 2011 - Il geoportale del Comune di Bergamo
Drupal Day 2011 - Il geoportale del Comune di Bergamo
 
SEO (Search Engine Optimization) Indicizzazione nei motori di ricerca
SEO (Search Engine Optimization) Indicizzazione nei motori di ricercaSEO (Search Engine Optimization) Indicizzazione nei motori di ricerca
SEO (Search Engine Optimization) Indicizzazione nei motori di ricerca
 
La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...
La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...
La piattaforma Km4City: dai dati ai servizi (SMAU 2015 Firenze), for smart ci...
 
nuove professioni digital, lavori emergenti in ambito Digital, web, social me...
nuove professioni digital, lavori emergenti in ambito Digital, web, social me...nuove professioni digital, lavori emergenti in ambito Digital, web, social me...
nuove professioni digital, lavori emergenti in ambito Digital, web, social me...
 
Analizzare un link con gli occhi di Google
Analizzare un link con gli occhi di GoogleAnalizzare un link con gli occhi di Google
Analizzare un link con gli occhi di Google
 
Accessibile.it: progetto e indagine accessibilità dei siti
Accessibile.it: progetto e indagine accessibilità dei sitiAccessibile.it: progetto e indagine accessibilità dei siti
Accessibile.it: progetto e indagine accessibilità dei siti
 
Webbit Mappa interattiva
Webbit Mappa interattivaWebbit Mappa interattiva
Webbit Mappa interattiva
 
IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità: una strat...
IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità:  una strat...IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità:  una strat...
IAB Forum 2009, Miriam Bertoli - Visibilità, Identità e Usabilità: una strat...
 
curriculum
curriculumcurriculum
curriculum
 
Email marketing and Web 2.0 - Email Power 2007
Email marketing and Web 2.0 - Email Power 2007Email marketing and Web 2.0 - Email Power 2007
Email marketing and Web 2.0 - Email Power 2007
 
Rich Snippet - ST 2012
Rich Snippet - ST 2012Rich Snippet - ST 2012
Rich Snippet - ST 2012
 
Msc Crociere B2B2C XML
Msc Crociere B2B2C XMLMsc Crociere B2B2C XML
Msc Crociere B2B2C XML
 
Project work. per la galleria ce o
Project work. per la galleria ce oProject work. per la galleria ce o
Project work. per la galleria ce o
 
Mobile UI Design
Mobile UI DesignMobile UI Design
Mobile UI Design
 
Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011
Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011
Accessibilità e Pubblica Amministrazione. Un'idea di Framework | Uxconf 2011
 
Em1 s
Em1 sEm1 s
Em1 s
 
Evoluzione della link buidling - Webinar Monari per Semrush/WME
Evoluzione della link buidling - Webinar Monari per Semrush/WMEEvoluzione della link buidling - Webinar Monari per Semrush/WME
Evoluzione della link buidling - Webinar Monari per Semrush/WME
 
Accessibilità e Usabilità biblioteche toscane
Accessibilità e Usabilità biblioteche toscaneAccessibilità e Usabilità biblioteche toscane
Accessibilità e Usabilità biblioteche toscane
 

Recently uploaded

Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoyanmeng831
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaSalvatore Cianciabella
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxlorenzodemidio01
 
Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptcarlottagalassi
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxlorenzodemidio01
 
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxlorenzodemidio01
 
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxlorenzodemidio01
 

Recently uploaded (7)

Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceo
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione Civica
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
 
Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.ppt
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptx
 
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
 
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
 

Ferentino

  • 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 http://ramdesign.altervista.org
  • 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, valutazione 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, bus 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 <?