Ferentino

374 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
374
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ferentino

  1. 1. Restyling del sito web del Comune di Ferentino (FR)Realizzato da RamDesign Web Agency composta da:Marisa FAUSONEMarco MASINORoberto PAGANOTorino, 20 febbraio 2012
  2. 2. Sito web a cura di RamdesignProgettoRestyling sitoweb Comune diFerentino1)Analisi delsito attualeCheck-up2)Diagrammadi GANTT(stima deitempi)3) Scelta dellayout -Creazione 2bozzetti grafici4)Organigrammainformazioninuovo sito5) Costruzionesito inHTML/CSSValidazioneW3C e SEO6)Realizzazioneversione Mobilegli step
  3. 3. Sito web a cura di Ramdesign1) Analisi del sito attuale - CHECK-upI 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 dinavigazione (breadcrumb), strumenti di ricerca e traduzione;link spezzati;aggiornamento del sito insufficiente e discontinuo;scarsa attenzione al SEO (Search Engine Optimisation).
  4. 4. Sito web a cura di Ramdesign2) 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 indicanoi brief interni della Ramdesign.
  5. 5. Sito web a cura di Ramdesign3) scelta del layout - creazione 2 bozzetti grafici (slide 1-4)La scelta del layout è maturata dall’analisi di un ragguardevole numero di siticomunali e di PA (Pubblica amministrazione) nonchè dalla valutazione sulle ricaduteche la scelta operata avrebbe determinato nell’usabilità del sito.Alla fine, il tradizionale layout a 3 colonne con voci di menu interamente avista, ci è sembrato il più adatto a fornire all’utente il quadro d’insieme in unsolo “colpo d’occhio”.La grafica, volutamente semplice e sobria, è arricchita dalle immagini di sfondodell’header e del footer che danno un tocco di originalità al sito, e ravvivata daibanner statici che identificano Aziende e Comuni gemellati.HeaderFooter
  6. 6. Sito web a cura di Ramdesign3) 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 elementisalienti 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, anchesecondo quanto stabilito dalle Linee guida emanate dal Ministero per la PA el’Innovazione.Banner Enti e AziendeBanner Comuni gemellati
  7. 7. Sito web a cura di Ramdesign3) 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 4occupate 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 1orizzontale sotto l’header oltre alla sezione centrale dedicata alle News e ai box di pubblica utilità.1° proposta2° versione sviluppata
  8. 8. Sito web a cura di Ramdesign3) scelta del layout - creazione 2 bozzetti grafici (slide 4-4)In quanto principianti, siamo partiti dal templatepreconfezionato a due colonne, a sinistra …… per arrivare al template a trecolonne, a destra
  9. 9. Sito web a cura di Ramdesign4) Organigramma informazioni nuovo sito (slide 1-4)Categorizzazione e labelling della Home page –Header, menu orizzontale e menu di sinistraHome pageComuneSindaco GiuntaConsiglio comunale DelibereUffici Area riservataPubblicazioniBandi-Gare-Concorsi Statuto - AttiAvvisiConsultazionielettoraliTrasparenza, valutazione e meritoEnti e dintorniProloco Ferentino SER.A.F.MarketingterritorialeBasket FerentinoAvis Ferentino Radio FerentinoCentro studi ErminiEventi emanifestazioniRicorrenze annuali Locali-divertimentoCiociaria turismo Eventi in CiociariaMenu orizzontaleHome Mappa sitoPEC Albo PretorioURP SUAPNews MobileHeader(img sfondo)Data corrente Medaglia doroLazio - Frosinone Terme di Pompeo
  10. 10. Sito web a cura di Ramdesign4) Organigramma informazioni nuovo sito (pag. 2-4)Home pageGuida aiserviziCittadinoDiritti edoveriFamiglia(figli)Tasse AmbienteResidentestranieroOttenere lacittadinanzaImprenditoreGestireunattivitàTributiTuteladellambienteTuristaItinerariItinerariocittàItinerarioreligiosoModulisticaModuli on-lineAutocertificazione on-lineLink aRegione LazioIl territorioArrivare-trasportiAuto, treni, busStoriaOriginiPersonaggistoriciChiese eMonumentiGalleriafotograficaCanalitematiciStruttureeducativeStrutturesanitarieStrutturericettiveStrutturesportiveStruttureculturaliFerentino.orgMeteo3B+Aziende eassociazioniTrasportopubblicoEnelFerentinoACEA ATO5 FarmacieRaccoltarifiutiEnergiaalternativaGemellaggiSan SeverinoMarcheRockfordEkaterinburg RaszynIacobeniCategorizzazione e labelling della Home page – menu di destra
  11. 11. Sito web a cura di Ramdesign4) Organigramma informazioni nuovo sito (pag. 3-4)Nell’organizzazione dei contenuti abbiamo tenuto conto dei più recenti criteri diaccessibilità e usabilità dettati da esperti del web come il prof. Polillo.Il flusso delle informazioni è studiato per essere fruibile da un’utenza ampia edeterogenea, con pari efficacia.Così il “cittadino” potrà trovare rapidamente tutto ciò che gli serve e allo stessomodo 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 lepeculiarità 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. 12. Sito web a cura di Ramdesign4) Organigramma informazioni nuovo sito (pag. 4-4)Alcune sezioni, come“La Storia”, hanno richiestoun minuzioso lavoro di ricercae selezione di contenuti adintegrazione di quelli offertidal sito originalealtre, quali le“Strutture educative” sonostate create ex-novo.
  13. 13. Sito web a cura di Ramdesign5) Costruzione sito in HTML/CSS - Validazione W3C e SEO (1-2)Il sito è un doctype Strict che combina una struttura di contenuti in linguaggioHTML (marcatore) ad una formattazione di tale struttura con i CSS (fogli di stile).Nel rispetto del SEO (reperibilità nei motori di ricerca), sono stati introdottiMeta-name keywords e description nella “head” delle pagine HTML.Tag HTML per la lista del menu sxRegole CSS applicate alla medesima lista
  14. 14. Sito web a cura di Ramdesign5) Costruzione sito in HTML/CSS - Validazione W3C e SEO (2-2)Abbiamo ottenuto la validazione CSS del W3C validation serviceE sulla validazione HTML ci stiamo ancora lavorando! D’altro canto, Strictvuol dire anche questo …
  15. 15. Sito web a cura di Ramdesign6) 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 inmovimento.Pensato per chi cerca un’informazione “al volo”, e vuole trovarla in pochiistanti senza inutili perdite di tempo e di denaro causate dal caricamento diuna grafica troppo ambiziosa.Dotato di numeri rapidi e sms che si attivano tramite un link nel footer.
  16. 16. Sito web a cura di RamdesignPubblicazione del sitoUna 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 suserver remoto) sul proprio computer per poter pubblicare le pagine webnello spazio che Altervista ci riserva.Se poi vogliamo rendere il nostro sitodinamico, basta attivare il database efare qualche SELECT *… con Php, maquesta è un’altra storia che inizia conun <?

×