Casino di Caprafico – Case Study

CasinodiCaprafico.com è il sito web dedicato all’azienda agricola di Giacomo Santoleri, immersa sulle Piane di Caprafico, a Guardiagrele nella provincia di Chieti. L’azienda produce cereali, legumi ed olive e si pone l’obiettivo di valorizzare queste produzioni curando la scelta delle varietà, le tecniche colturali e la trasformazione dei prodotti aziendali seguendo e riscoprendo metodiche tradizionali dell’alimentazione mediterranea. Accanto al centro aziendale sorge un vecchio casolare, ristrutturato di recente, adibito ad uso agrituristico. In esso tre unità abitative distinte possono accogliere da 3 a 5 persone ciascuna.

Sito esistente

Prima del mio intervento, il sito web era costruito con tecnologia Flash, con una grafica finemente curata, pulita e molto semplice. Devo dire che mi piaceva molto lo stile, anche se il tipo di navigazione mi risultava un po’ difficile e a volte poteva mandare in confusione un utente nuovo, appena “sbarcato” su queste pagine. In pratica, insomma, si trattava di una struttura (mappa del sito) che molto era tipica di quei siti in Flash che spesso si vedevano qualche anno fa.
Il sito, diviso in due parti, una dedicata all’agriturismo ed l’altra all’azienda agricola, presentava gli articoli prodotti in una apposita sezione, il quale proponeva, oltre una semplice descrizione, una foto ottimamente curata dallo studio fotografico BlueBlu come del resto tutte le immagini presenti.

Richieste ed esigenze del cliente

Dopo i primi anni che il vecchio sito web era online, il proprietario aveva, però, iniziato ad avvertire nuove esigenze, anche legate a richieste e problemi sollevati dai propri clienti.
Intanto molti degli ospiti dell’agriturismo, soprattutto stranieri, lamentavano il fatto che non fosse possibile accedere al sito con i nuovi dispositivi mobili di casa Apple e quindi, una volta arrivati nei pressi dell’agriturismo, volendo anche semplicemente cercare il numero di telefono per chiamare, non avevano potuto accedere alle pagine.
Oltre questo però, sorgevano problemi legati agli aggiornamenti di ruotine ai contenuti del sito che, come noto, nei sistemi Flash non sono diretti come quelli previsti da sistemi con un pannello di controllo per gli amministratori.
Per finire, un’ultima richiesta era quella di poter espandere il sito, in chiave futura, in modo da poter accogliere un sistema per l’e-commerce o per il booking online (prenotazione delle camere dell’agriturismo), senza stravolgere tutto.

ANALISI: PROBLEMI RILEVATI DAL SITO PRECEDENTE

Da una prima analisi effettuata sul precedente sito web, sono giunto facilmente a conclusione che gran parte dei problemi riscontrati (per non dire tutti) erano legati all’utilizzo di Flash nella costruzione delle pagine. Adobe Flash, all’epoca del web 1.0 aveva fama di essere croce e delizia di molti web desginer, infatti a fronte di alcuni PRO (con il senno di poi) corrispondevano molti CONTRO.

Pro di un sito in Flash

Tra i punti a favore di un sito web realizzato in Flash c’era senza dubbio il grande impatto grafico che un designer poteva donare ad un lavoro. Le grandi animazioni, a volte anche molto complesse, l’uso di qualsiasi tipo di font, la dinamicità intesa come prodotto finale completamente multimediale. Questo però fino all’avvento delle nuove tecnologie che, come noto, hanno ribaltato le cose.

Contro di un sito in Flash

Dall’altra parte della medaglia, però, ecco sorgere problemi di carattere più tecnico: scarsa possibilità di tracciare i propri utenti sul sito, chiavi di ricerca e SEO quasi inesistenti, difficoltà ad espandere le pagine, aggiornamenti poco diretti.
Con l’avvento dei nuovi smartphone poi Apple finisce di complicare le cose non permettendo l’utilizzo dei plugin Flash sui suoi dispositivi, e su quei dispositivi dove restava possibile la visualizzazione, il controllo del touch non era dei migliori: si basti pensare a tutti quei bottoni che si attivavano con il passaggio del mouse, con il dito ora era possibile solo fare click…

Altri problemi rilevati

Nel caso specifico poi, le esigenze del cliente e l’impossibilità di reperire il file sorgente del sito, mi obbligavano a seguire la mia scelta iniziale, cioè migrare verso un sistema “tradizionale”, procedendo così alla conversione del sito (più nello specifico, della grafica) da Flash a xHTML/CSS/JS.

TIPO DI INTERVENTO EFFETTUATO E RISULTATI
Prime fasi ed ottimizzate per tutti i device (Responsive)

Dopo il mio periodo di analisi e pianificazioni di intervento, proposte ed approvate dal cliente, la prima operazione da me effettuata è stata quella di ricreare in modo statico, su pagine web HTML/CSS, tutte le sezioni principali del sito che mi sarebbero tornate poi utili nella seconda fase. In questa fase ho anche affrontato la soluzione per la visualizzazione del sito su qualsiasi piattaforma, ottimizzando le pagine in modo da essere responsive, cioè adattabili a tutte le dimensioni dei dispositivi su cui verranno visualizzate, che siano questi PC, notebook, iPhone, iPad o altri sistemi mobili come ad esempio Android.

Integrazione CMS e realizzazione tema personalizzato

La fase successiva è stata quella in cui, per venire in contro anche alle richieste del cliente, ho integrato un CMS a cui ho personalizzato il tema grafico, facendo in modo che le pagine statiche da me create in precedenza, potessero giovare dei privilegi del pannello di amministrazione, in modo che tutti gli aggiornamenti ai testi, le aggiunte di nuove pagine, voci nei menu, immagini ed altre correzioni, potessero ora venire effettuate direttamente tramite il CMS senza mettere mano al codice.

In questa fase, inoltre, ho lavorato per non precludere arricchimenti futuri a questo nuovo sistema. Infatti ora la natura modulare del CMS permetterebbe di aggiungere semplicemente sistemi per l’e-commerce con carrello elettronico e pagamento con carta di credito, ma anche un booking online per controllare la disponibilità e la prenotazione diretta delle camere da parte degli utenti.

Gestione delle traduzioni

A questo punto ho concentrato il mio lavoro sull’inserimento dei contenuti e sulle traduzioni. Come dal sito precedente, le lingue supportate, a parte l’italiano, sono inglese e tedesco. Le traduzioni possono ora essere facilmente inserite, controllate ed eventualmente corrette sempre tramite gli strumenti presenti nel pannello di controllo. Le lingue supportate possono inoltre, essere aumentate senza nessun limite e, cosa molto importante, ora generano keywords (parole chiave) perché i contenuti sono carpiti dai motori di ricerca, cosa che non accadeva prima con il vecchio sistema in Flash.

Ottimizzazione della SEO

In ultima battuta, prima di giungere ai test finali, ho voluto dedicare molta attenzione alla fase di ottimizzazione del SEO, inserendo un sistema interno al CMS che permettesse di inserire e gestire le parole chiave del sito anche in modo individuale, cioè inserendo determinate keywords nelle pagine più appropriate, in modo da ottenere maggiore pagerank in relazione di ricerche mirate.

Per far in modo che tutto questo lavoro possa essere monitorato, ho integrato il sistema di statiche offerto da Google capace di generare rapporti avanzati che vanno dal monitoraggio delle pagine più visitate, alle sorgenti delle visite, fino alle chiavi utilizzate sui motori di ricerca, ma anche il tipo di sistema operativo utilizzato durante la navigazione, la nazionalità dei visitatori, il tempo di permanenza e tanto altro ancora.