{"id":374,"date":"2013-05-03T10:48:56","date_gmt":"2013-05-03T08:48:56","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/hack-your-map\/"},"modified":"2013-05-03T10:48:56","modified_gmt":"2013-05-03T08:48:56","slug":"hack-your-map","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/hack-your-map\/","title":{"rendered":"Hack your map"},"content":{"rendered":"

Le mappe web hanno fatto parecchia strada. Dati migliori, design pi\u00f9 pulito, performance migliori e controlli pi\u00f9 intuitivi hanno reso le mappe web un componente onnipresente e critico di molte app. Sono anche diventate uno dei trapianti di maggior successo dello spazio mobile dal momento che sempre pi\u00f9 app girano su device dotati di funzionalit\u00e0 di localizzazione. Lo stesso paradigma centrale dell’UI delle web map – una superficie continua, che si pu\u00f2 esplorare e su cui si pu\u00f2 fare zoom – si \u00e8 diffusa perfino oltre le funzionalit\u00e0 di mappa in tutte le interfacce.<\/p>\n

Nonostante ci\u00f2, abbiamo appena cominciato a far funzionare le web map nei nostri design. Creiamo icon font, griglie responsive, framework CSS, strategie per il progressive enhancement e perfino dei nuovi processi di progettazione. Demoliamo vecchie soluzioni e ne creiamo di nuove, ci prendiamo anche un secondo extra per condividere storie di battaglie in prosa e di persona. Tuttavia, a quasi cinque anni dall’articolo di Paul Smith, \u201cTake Control of Your Maps<\/a>\u201d, le web map costituiscono ancora un punto cieco per la maggior parte dei designer.<\/p>\n

Avete mai smontato una mappa? Lavorato con una mappa come parte critica del vostro design? Sviluppato trucchi, hack, workaround o miglioramenti progressivi per le mappe?<\/p>\n

Questo articolo costituisce il compagno atteso per lungo tempo dell’articolo di Paul. Egli si avventura nei livelli del mapping da 10000 piedi, mentre noi esamineremo un singolo processo di design e implementeremo una mappa web moderna. Camminando su questo sentiero, spero di cominciare a rendere le mappe una parte della conversazione collettiva di noi designer.<\/p>\n

\n

Categorico sull’open<\/h2>\n

Paul adduce una buona ragione sul perch\u00e9 dovreste usare degli strumenti di mapping open invece di quelli stabiliti attualmente. Non ricostruir\u00f2 qui le sue ragioni, ma vorrei espandere la sua ultima: gli open tool sono quelli che si possono modificare in maniera migliore.<\/p>\n

Non c’\u00e8 nulla di misterioso sulle mappe web. Prendete un qualunque piano spaziale, scomponetelo in sezioni discrete (tile), posizionatele nel DOM e aggiungete degli event handler per l’esplorazione e lo zoom. La formula di base pu\u00f2 essere applicata a Portland, Marte o a Super Mario Land. Funziona per mostrare le mappe di grandi strade, ma nulla ci impedisce di armeggiarci per esplorare gallerie d’arte, creare mondi finti per i giochi, imparare l’anatomia umana o semplicemente per navigare una pagina web. Gli open tool ci svelano i lati nascosti di questo meccanismo, permettendoci di vedere un range di possibilit\u00e0 pi\u00f9 ampio.<\/p>\n

\"La<\/p>\n

Il funzionamento delle web map non \u00e8 limitato alle mappe stradali.<\/p>\n<\/div>\n

Dovremmo conoscere le condizioni sotto le quali vengono caricate e distrutte le immagini della mappa, dovremmo discutere per capire se le “tile” della mappa vengono posizionate in maniera migliore con CSS transform oppure no, e dovremmo prestare attenzione se gli elementi vettoriali sono disegnati con SVG o Canvas. Gli open tool ci permettono di conoscere questi dettagli operativi delle nostre mappe e ci consentono di fare esperimenti. Se non si possono ottenere in nessun altro modo con HTML5, CSS o con delle librerie JavaScript, allora non dovremmo accontentarci di meno per le mappe.<\/p>\n

In breve, lavoreremo con un mapping stack completamente open. MapBox<\/a>, dove lavoro io, ha messo insieme svariate librerie open source in una singola API che pubblichiamo con in mapbox.js<\/a>. Altre librerie di mapping open che valgono il vostro tempo includono: Leaflet<\/a> e D3.js<\/a>.<\/p>\n<\/div>\n

\n

Cominciamo<\/h2>\n

Sono un grande fan di Sherlock Holmes. Tra il recente film Hollywoodiano con Robert Downey Jr. e la serie contemporanea della BBC, sono completamente in fissa. Ma so che mi sto perdendo la ricchezza dell’ambientazione che Sir Arthur Conan Doyle voleva fosse letta nei suoi racconti brevi, dal momento che non sono mai stato a Londra.<\/p>\n

Un tipico approccio consiste nell’inserire una web map con dei pin di varie location insieme ad una storia di Sherlock. Con questo approccio la mappa diventa un’appendice, un elemento superfluo che gioca una piccola parte nella narrazione di Doyle. Al contrario, noi espanderemo il ruolo della nostra mappa, integrandola completamente nella narrazione. Sar\u00e0 il palcoscenico, dar\u00e0 il ritmo e influenzer\u00e0 l’umore della nostra storia.<\/p>\n

\"Confronto<\/div>\n<\/div>\n
\n

La storia di alcuni posti<\/h2>\n

Per stabilire un riferimento per la nostra storia, ho riorganizzato The Adventure of the Bruce-Partington Plans<\/cite> perch\u00e9 venga narrata attorno ai posti. Ho scelto ho location chiave dal testo originale<\/a>, ho tirato fuori i dettagli essenziali del mistero e li ho incorniciati con HTML, CSS e JavaScript.<\/p>\n

\"Demo<\/a><\/p>\n

Una storia di Sherlock Holmes come solo testo. Si veda la Demo 1<\/a><\/p>\n

. <\/a><\/div>\n

<\/p>\n