Shakeart.it - Mappe ed arte assieme

Attorno alla fine del 2009, assieme ad un gruppo di 3 ragazzi miei coetanei decidemmo, dopo attenta analisi, di iniziare un progetto web per certi verso rivoluzionario e (a quel tempo) abbastanza complesso per la risoluzione sia tecnica che idealistica.
Essendo tutti e quattro dei cultori di arte nelle sue mille sfaccettature, avevamo pensato ad un servizio orientato all’utente che potesse fare il punto sulla situazione artistica in Italia, intesa come distribuzione e qualità degli eventi d’arte, principalmente mostre. Nacque così il concept di Shakeart, servizio map-oriented dove la parola d’ordine era (e sarà sempre!) semplicità di utilizzo per l’utente.

Ci “bastarono” 2 anni di duro lavoro (l’intero lavoro è stato possibile impiegando tutto il nostro - poco - tempo libero, trovandoci a lavorare anche fino a notte fonda!) e studi approfonditi su molte sfaccettature, ma siamo sinceri quando diciamo che è stato un lavoro straordinario! Fu questa la nascita di www.shakeart.it!

Step e idee
All’inizio fu traumatico! Dovevamo progettare tutto, dall’idea del branding, al mood, wireframe, prototyping, ecc...
Cominciammo con il nome, molto complesso da trovare in quanto doveva sia rispecchiare l’idea stessa del servizio ma anche essere un dominio libero! Ricademmo su Shakeart, nome che calza a pennello con la nostra idea: shake = mescolare, amalgamare più informazioni, dati, conoscenze in un'unica piattaforma per realizzare un qualcosa di nuovo. L’idea di mashup è alla base della realizzazione di Shakeart: dati geografici, testuali e multimediali che convogliano all’interno di mappe geografiche (Google Maps) il tutto condivisibile e contribuibile da qualsivoglia utente.
Questa era la base di partenza... adesso dovevamo pensare ad una possibile “campagna marketing” che potesse in qualche modo attirare interesse prima della resa online effettiva del servizio.
Ci abbiamo messo molto tempo e speso molto (in fatica) per arrivare ad un piccola campagna formata da una landing page e un video promozionale della durata di 2 minuti circa in cui andavamo a spiegare quelli che erano i punti chiave di shakeart.
Ovviamente, ma credo sia sottinteso, landing page e servizio finale sono stati realizzati interamente con Drupal.

Perchè Drupal?
Della parte squisitamente tecnica me ne sono preso carico io, lavorando oramai da parecchi anni in ambito web dove Drupal è la parte fondamentale del mio lavoro.
La scelta di ricadere su Drupal è molto semplice: ci serviva una piattaforma flessibile che ci potesse dare ampie possibilità di manovra e al tempo stesso che potesse essere orientata alle community, dove gli utenti potessero contribuire attivamente al processo di arricchimento del servizio stesso.
Drupal ci ha permesso questo e molto di più! Di fatto, alcune funzionalità sono state studiate ed implementate adhoc proprio per questo progetto.

Funzionalita: Landing Page
La landing page di pre-lancio del servizio è stata molto semplice da realizzare (a livello tecnico). Di fatto, era una semplice pagina con un webform in modalità blocco dove, al momento della compilazione, veniva inviata una mail HTML di grazie e riepilogativa dei dati immessi all’utente.
Il webform aveva il compito di raccogliere delle pre-iscrizioni al servizio definitivo, ossia utenti (i campi richiesti erano Nome utente, Mail e Password). Tali utenti sono stati, successivamente, importati nel sito definitivo tramite il modulo user_import.
Il video, hostato presso YouTube, era visualizzabile per mezzo dell’ottimo JWPlayer.

Funzionalità: Web Site
Il sito principale offre molteplici funzionalità, la maggior parte proveniente da moduli contribuiti utilizzata dalla maggior parte dei siti, nella fattispecie:

Moduli amministrativi:
admin
better_format
blocktheme
ckeditor
ctm
date
flag
imce
imce_mkdir
imce_rename
vertical_tabs

Moduli CCK
cck
emfield
filefield
imageapi
imagecache
imagefield
media_vimeo
media_youtube
scheduler
semanticviews
views
views_or
webform

Moduli SEO:
globalredirect
nodewords
page_title
pathauto
xmlsitemap

Moduli Social:
better_messagge
fbconnect
oauth
twitter

Moduli UI
checkbox_validation
colorbox
jquery_ui
jquery_update
legal
modalframe

Moduli Geografici:
getdirections
location
views_datasource

Altri Moduli:
mimemail
pathrules
rules
tagadelic
token

A fronte di questi sono state realizzate delle funzionalità specifiche o dei moduli che vanno ad estendere alcuni moduli sopraelencati, come ad esempio modalframe.
La parte più complessa è stata proprio l’implementazione e l’ottimizzazione di Google Maps e dei dati associati ad essa.
Il primo approccio fu proprio con il modulo gmap. Il modulo gmap, che ho avuto modo di utilizzare in altri progetti, tutto sommato faceva quello che avevamo in testa: visualizzava marker (nodi) in una mappa. Poi però ci rendemmo conto di alcune debolezze o lacune: la prima fra tutte è che non utilizzava le ultime release del motore gmap ma ancore le vecchie API che sono tutt’ora sconsigliate dalla stessa Google (non so se al momento il modulo ha implementato le nuove API, dato che proprio grazie a Shakeart sono riuscito a realizzare un modulo leggero e flessibile anche per altri progetti). Altri fattori come richieste AJAX, update della mappa in tempo reale e personalizzazioni grafiche mi hanno fatto propendere per la realizzazione di un modulo custom.
Dopo molto cercare, mi sono imbattuto in un plugin per jQuery chiamata jMapping, ottimo plugin con una idea alla base molto accattivante: ogni marker della mappa viene creato da una lista fisicamente presente nell’HTML e, grazie ad attributi HTML5 applicati ai tag, possiamo categorizzare i marker, impostare le coordinate, inserire il testo nel baloon, ecc.
Inoltre, il plugin va ad utilizzare le API 3 di Google Maps. L’adozione di tale plugin fu immediata!
Realizzai, per lo scopo, un piccolo modulo per utilizzare il plugin e una piccola area di configurazione nell’amministrazione di Drupal in modo da facilitare alcune configurazioni.
Ad un certo punto, però, ci rendemmo (purtroppo) conto di un limite molto importante del plugin: se da una parte l’idea di avere anche una versione HTML della mappa era interessante (a livello SEO più che altro) dall’altra aveva lo sfortunato inconveniente che i tempi di caricamento di una pagina con un centinaio di marker erano infinitamente lunghi! Cosa assolutamente inaccettabile visto la mole di marker che, idealmente, avremmo dovuto visualizzare nella mappa generale. Per cui, l’unica soluzione possibile era.... rifare tutto da capo!!! Ci pensai un pò, e alla fine arrivai a due considerazioni: avevo bisogno di un formato con cui poter caricare i dati dei miei marker che fosse leggero e allo stesso tempo mi permettesse tutta la flessibilità di prima e, cosa molto importante ai fini della performance generale, avevo bisogno di utilizzare un clustering per i marker (il clustering è una tecnica per cui se 2 o più marker sono relativamente vicini ad un certo livello di zoom, vedrò un’unico marker che in realtà ne raggruppa più di uno e, al click o allo zoom, vedrò anche il resto dei marker). Per quanto riguarda il clustering mi sono orientato verso il plugin MarkerClusterer, ottimo e flessibile quanto basta! Per quanto riguarda il formato per i dati dei marker, l’unico leggero e flessibile che io conosca è JSON. Per cui, tutti i dati necessari dei marker vengono estratti con delle viste e sputati fuori in JSON, tramite l’ottimo (e salvavita... anche in altre occasioni!) views_datasource. L’unico punto debole di views_datasource è il modo con cui manda fuori i dati in JSON... ogni tag HTML viene rimosso (in modo corretto da specifiche JSON) invece che venir convertito in HTML-entity... lavoro che ho dovuto fare io direttamente da views andando a sovrascrivere i vari campi (N.B.: avrei potuto inserire anche i tag via Javascript, ma ho preferito questa via per svariati motivi)!
Il resto è stato una passeggiata! Ho preso come base di partenza il plugin jMapping ed ho creato un plugin ex-novo che andasse a lavorare a stretto contatto con AJAX.
Ora, al caricamento della pagina, viene fatta una semplice richiesta AJAX al JSON di turno (parliamo di 4K contro gli 80/100K del plugin originale) e vengono elaborate le relative informazioni dal plugin stesso.

Il resto dei moduli custom è stato:

• shake - insieme di moduli che va ad estendere alcune funzionalità base di Drupal in combinazione con modalframe (cosa che verrà cambiata tra breve, in quanto modalframe comincia a non piacermi più! Troppo da caricare per un semplice layer!);
• rss_custom - piccolo modulo che genera (tramite una vista) un link personalizzato a seconda di cosa si voglia seguire via RSS del sito;

più alcune piccole messe a punto minori su altri moduli.

Project Team:

• Giovanni Buffa: web designer;
• Massimo Racozzi: sceneggiatore;
• Fabio Babich: fumettista;
• Alan Millo: digital artist.