{"id":147,"date":"2011-02-21T21:15:12","date_gmt":"2011-02-21T20:15:12","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/svg-multipiattaforma-con-svgweb\/"},"modified":"2011-02-21T21:15:12","modified_gmt":"2011-02-21T20:15:12","slug":"svg-multipiattaforma-con-svgweb","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/svg-multipiattaforma-con-svgweb\/","title":{"rendered":"Scalable Vector Graphics multipiattaforma con svgweb"},"content":{"rendered":"<p><script type=\"text\/javascript\">\/\/ &lt;![CDATA[\n                \/\/convert table to json\n        \/\/@param t is the id of the table (string)\n        \/\/returns a json object with an array containing an object for each row\n        function tableToJSON(t){\n            var table = document.getElementById(t),\n                header_row = table.rows[0],\n                n_headers = header_row.cells.length,\n                n_rows = table.rows.length,\n                keys = [],\n                n_keys = 0,\n                json_data = [],\n                json = {};<\/p>\n<p>            \/\/rip through every row to create the JSON data objects\n            \/\/assume the first row contains the headers\n            for(var i=0; i < n_rows; i++){\n                if(i===0){\n                    for(var j=0; j < n_headers; j++){\n                        keys.push(header_row.cells[j].firstChild.nodeValue.toLowerCase());\n                    }\n                } else{\n                    var this_row = table.rows[i];\n                    var data = {};\n                    n_keys = keys.length;\n \n                    for( var j=0; j < n_keys; j++){\n                        data[keys[j]] = this_row.cells[j].firstChild.nodeValue;\n                    }\n \n                    json_data.push(data);\n                }\n \n            }\n \n            \/\/hide the table\n            table.style.display = 'none';\n            json[t] = json_data;\n            return(json);\n        }\n   \n        function init(){\n            \/\/get the svg map via the 'contentDocument' property\n            var map_svg = document.getElementById('state-map').contentDocument;\n            \/\/tableToJSON will return a JSON object with our data\n            var map_json = tableToJSON('results-data');\n            \/\/grab the actual array from the json object\n            var map_data = map_json['results-data'];\n            \/\/get the array length so you don't calculate it for every loop iteration\n            var n_map_data = map_data.length;\n           \n            \/\/loop through the map data and assign properties to each state on the map\n            for(var i=0; i < n_map_data; i++){\n                \/\/get the state on the map based on the ID in the data array\n                \/\/in this case, the ID is the state abbreviation\n                var map_state = map_svg.getElementById(map_data[i].state);\n \n                if(map_data[i].change === '-2 or more' ){\n                    map_state.style.fill = '#B26600';\n                } else if (map_data[i].change === '-1'){\n                    map_state.style.fill = '#FF9200';\n                } else if (map_data[i].change === '+1'){\n                    map_state.style.fill = '#19ABFF';\n                } else if (map_data[i].change === '+2 or more'){\n                    map_state.style.fill = '#0071B2';\n                }\n \n                \/\/assign the state a title, in this case the name of the state and the change in seats\n                map_state.title = map_data[i].state + ' will have a change of ' + map_data[i].change + ' seats';\n \n                \/\/give each state an event\n                \/\/for simplicity, the event is a simple alert that displays the title param we just assigned\n                \/\/yes, addEventListener even works in IE, thanks to svgweb\n                map_state.addEventListener('mouseup', function(e){\n                    alert(e.target.title);\n                }, false);\n            }\n        }\n \n        window.onsvgload = init;\n\/\/ ]]&gt;<\/script><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/02\/n24svg.jpg\" border=\"0\" align=\"left\" \/>Povera Scalable Vector Graphics! E' uno standard ufficiale fin da prima del rilascio di IE6 ma nonostante ci\u00f2 non ha mai trovato molto pubblico sul web, sicuramente non quello che si merita. E proprio quando <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr> stava cominciando ad essere supportato dai browser, ecco che arriva il tag <code>canvas<\/code> a rubargli l'idea delle immagini generate dinamicamente lato client.<\/p>\n<p>Nonostante tutta l'attenzione che si dedica a canvas, c'\u00e8 ancora un po' di posto per il buon vecchio SVG, particolarmente per gli sviluppatori che stanno cercando di rimpiazzare i plugin come Flash per la visualizzazione dei dati.<\/p>\n<div class=\"paragrafo\">\n<h2>Canvas e SVG<\/h2>\n<p>Una delle ragioni per cui Flash \u00e8 stato scelto dal grande pubblico per la visualizzazione dei dati \u00e8 la <a href=\"http:\/\/www.adobe.com\/livedocs\/flash\/9.0\/ActionScriptLangRefV3\/flash\/display\/Graphics.html\">rich graphics API<\/a> che \u00e8 stata introdotta alcune versioni fa. Questa API grafica, nativa del linguaggio di programmazione di Flash ActionScript, rende possibile disegnare in maniera dinamica diagrammi, grafici e mappe in maniera programmatica, basandosi sui dati o sull'input dell'utente, senza dover armeggiare con del middleware server-side, ma solo ed esclusivamente nel browser. Questa fu una rivelazione quando venne introdotta e apport\u00f2 molta innovazione nella grafica informativa interattiva.<\/p>\n<p>Qualche anno fa, Apple introdusse il tag <code>canvas<\/code> per permettere agli sviluppatori che creavano le widget per la Dashboard di utilizzare un meccanismo per disegnare forme arbitrarie usando solo HTML. Quella proposta, come sicuramente saprete, \u00e8 ora una parte ufficiale della <a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/the-canvas-element.html\">specifica di HTML5<\/a>. I metodi per disegnare che canvas ha introdotto sono effettivamente piuttosto simili a quelli che gli sviluppatori ActionScript stavano usando da un po'. Infatti, scommetterei che chiunque abbia mai fatto dei disegni dinamici in Flash potr\u00e0 spostarsi su canvas piuttosto facilmente. Raddoppier\u00f2 quella scommessa e vi dir\u00f2 che le similitudini tra il disegnare con ActionScript e con canvas siano almeno in parte responsabili del successo di canvas.<\/p>\n<p>Ci sono anche librerie per il disegno basate su JavaScript, come Rapha\u00ebl, in effetti, probabilmente avrete gi\u00e0 letto l'eccellente articolo di Brian Suda sull'utilizzo della <a href=\"http:\/\/www.italianalistapart.com\/articoli\/23-numero-11-3-agostoo-2010\/87-svg-con-aiuto-raphael\">libreria JavaScript Rapha\u00ebl per rendere SVG dinamicamente nel browser<\/a>. Rapha\u00ebl \u00e8 grandioso per rimuovere molta della complessit\u00e0 di SVG e per lavorare cross-browser, su su fino a IE6: ma una cosa che non fa \u00e8 lasciarvi caricare dei files SVG esterni, similmente a come carichereste un'immagine usando il tag <code>img<\/code>.<\/p>\n<p>Cosa c'entra la possibilit\u00e0 di caricare un file SVG? Beh, da una parte, significa che potete usare dei tool di terze parti come Illustrator o l'eccellente (e gratuito) <a href=\"http:\/\/inkscape.org\">Inkscape<\/a> per disegnare le vostre immagini SVG, che possono poi essere caricate e manipolate nel browser usando JavaScript. La differenza riguarda solo come approcciare il problema: ActionScript, canvas e Rapha\u00ebl vi permettono di disegnare immagini in maniera programmatica con il codice, mentre SVG vi permette di disegnare le immagini in un software di disegno, caricare quell'immagine in un browser e aggiungere lo script.<\/p>\n<p>Per far s\u00ec che tutto questo funzioni, useremo una libreria JavaScript open-source chiamata <a href=\"http:\/\/code.google.com\/p\/svgweb\/\">svgweb<\/a> per caricare il file SVG, aggiungere gli eventi e gestire i problemi di compatibilit\u00e0 cross-browser. Il modo in cui svgweb gestisce i browser pi\u00f9 vecchi, come IE, \u00e8 alquanto geniale: piuttosto che cercare di mappare SVG sulla API di disegno proprietaria di IE, che \u00e8 quello che fa Rapha\u00ebl, si sono creati il proprio renderer SVG in Flash. Questo renderer SVG basato su Flash carica i files SVG esterni e gestisce anche gli eventi JavaScript che arrivano dal browser, in maniera completamente trasparente.<\/p>\n<p>La libreria svgweb scopre se il browser ha il supporto nativo per SVG e, se non ce l'ha, fa l'embed del livello Flash che traduce SVG nei comandi di disegno nativi di Flash. (Questo \u00e8 simile a come alcuni player audio e <a href=\"http:\/\/sublimevideo.net\/\">video<\/a> in HTML5 usano Flash come meccanismo di fallback per far vedere i video codificati in H.264 nei browser che non supportano il tag <code>video<\/code> o i video codificati in H.264). Gli eventi in stile DOM sono gestiti e passati avanti e indietro tra il livello Flash ed il browser cos\u00ec che voi dobbiate solo scrivere una sola volta la logica dell'evento, in JavaScript, invece di dover scrivere anche gli handler ActionScript. Ci\u00f2 significa che svgweb rende disponibile SVG a qualcosa come il 95% dei browser, inclusi i dispositivi mobili come iPhone e iPad che gestiscono SVG nativamente. (I dispositivi Android al momento non supportano nativamente il rendering SVG, ma <a href=\"http:\/\/code.google.com\/p\/android\/issues\/detail?id=1376\">ci stanno lavorando<\/a>).<\/p>\n<p>Prima di proseguire, voglio solo sottolineare che non sto dicendo che un metodo sia migliore di un altro: penso che ci sia posto per canvas, Rapha\u00ebl e SVG. C'\u00e8 probabilmente addirittura un po' di sovrapposizione, che \u00e8 una buona notizia per gli sviluppatori perch\u00e9 ci permette di scegliere l'approccio che fa pi\u00f9 al caso nostro. Ho scoperto che il canvas sembra particolarmente adatto per il rendering immediato e client side di grafica raster: i grafici semplici sono un ottimo uso per il canvas e l'eccellente <a href=\"http:\/\/code.google.com\/p\/flot\/\">libreria Flot<\/a> rende estremamente semplice la creazione di grafici con JavaScript. SVG \u00e8 particolarmente indicato per mostrare forme complesse, come una mappa, che potreste voler disegnare in un'applicazione come Illustrator prima e poi utilizzare JavaScript per linkarci i dati dinamici.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Una mappa dati con <abbr title=\"Scalable Vector Graphics\">SVG<\/abbr><\/h2>\n<p>Ecco una richiesta che il mio team di designer e sviluppatori alla msnbc.com si sente fare molto spesso: creare una mappa per illustrare un articolo di giornale. Le mappe sono comode e noi abbiamo sviluppato un insieme di template per pubblicarle rapidamente, alcuni dei quali sono basati su servizi esistenti come Google o Bing e altri sono applicazioni Flash personalizzate. Si \u00e8 gi\u00e0 detto molto sul potere di sviluppare qualcosa sfruttando Google maps o perfino <a href=\"http:\/\/www.alistapart.com\/articles\/takecontrolofyourmaps\">creare il vostro motore di mappe tile-based<\/a>. Tuttavia, per la grafica informativa, le mappe tile-based possono essere eccessive e perfino distrarre: spesso \u00e8 meglio avere un disegno custom.<\/p>\n<p>Un classico esempio potrebbe essere una <a href=\"http:\/\/www.alistapart.com\/d\/cross-platform-scalable-vector-graphics-with-svgweb\/map-example\/\">mappa di una nazione che mostra dei dati per stato<\/a>, come le mappe rosse e blu della notte delle elezioni americane. Per <a href=\"http:\/\/www.alistapart.com\/d\/cross-platform-scalable-vector-graphics-with-svgweb\/map-example\/\">questo esempio<\/a>, useremo i dati del pi\u00f9 recente censimento degli Stati Uniti per mostrare quali stati hanno guadagnato o perso dei rappresentanti.<\/p>\n<p>Prima di cominciare, dobbiamo configurare alcune cose. Siccome alcuni browers hanno delle difficolt\u00e0 a caricare lo script ed il file Flash necessari direttamente dal file system del vostro computer, \u00e8 meglio farglieli arrivare da un web server. <em>Potreste<\/em> caricare tutto sul vostro host web ma probabilmente avete un webserver proprio nel computer su cui state sviluppando. Su Mac, create una nuova cartella chiamata <code>svg-info<\/code>nella cartella <code>Sites<\/code> nella home directory, poi andare su System Preferences &gt; Sharing ed abilitare Web Sharing. Digitate nella barra indirizzo del browser <code>http:\/\/localhost\/~your-username\/svg-info<\/code> (sostituendo <code>your-username<\/code> con lo username che state usando) e vedrete la cartella <code>svg-info<\/code> nel browser.<\/p>\n<p>Una volta fatto ci\u00f2, vi servir\u00e0 una mappa, in SVG. Potete trovarne una da diverse fonti: il grafico che lavora con voi potrebbe crearne una in Illustrator o usare un tool come <a href=\"http:\/\/www.esri.com\/software\/arcgis\/index.html\">ArcGIS<\/a> per generarne una partendo da uno <a href=\"http:\/\/it.wikipedia.org\/wiki\/Shapefile\">shapefile<\/a>. Oppure potete prenderne una da Wikipedia, che ha  <a href=\"http:\/\/en.wikipedia.org\/wiki\/Wikipedia:Blank_maps\">un'intera collezione di mappe SVG gratuite<\/a>, inclusa una <a href=\"http:\/\/commons.wikimedia.org\/wiki\/File:Blank_US_Map.svg\">mappa vuota degli Stati Uniti con ciascuno stato con la sua forma etichettata<\/a>. Assegnare un'etichetta correttamente a ciascuna forma \u00e8 importante quando viene il momento di creare un link tra i dati e la mappa: fortunatamente, i files SVG hanno un DOM simile a quello dei files HTML, con ciascuno stato contenuto all'interno del proprio nodo etichettato. Questo \u00e8 sicuramente qualcosa da tenere a mente se state generando le vostre mappe o forme.<\/p>\n<p>Questa mappa \u00e8 piuttosto grande per la maggior parte delle pagine web, quindi la prima cosa da fare \u00e8 rimpicciolirla di un po', usando Illustrator o Inkscape, entrambe apriranno ed editeranno i files SVG nativamente. Questo mostra gi\u00e0 uno dei vantaggi dell'uso di SVG: un grafico pu\u00f2 aprire ed editare file usando i tool che utilizza tutti i giorni. Ho ridotto la mappa ad una larghezza di 500 pixel cos\u00ec che entri in una pagina. Assicuratevi di ridurre anche il documento che la contiene. (In Illustrator, andate su File &gt; Document Setup &gt; Edit Artboards e poi impostate \u201cFit Artboard to Artwork bounds\u201d dai presets.)<\/p>\n<p>Poi, vi servono dei dati, che scriveremo nella pagina come una tabella, per renderli il pi\u00f9 accessibili possibile. La tabella sar\u00e0 simile a questa:<\/p>\n<pre><code> \n&lt;table id=\"results-data\"&gt;\n &lt;tr&gt;\n  &lt;th&gt;State&lt;\/th&gt;\n  &lt;th&gt;Change&lt;\/th&gt;\n &lt;\/tr&gt;\n &lt;tr&gt;\n  &lt;td&gt;AL&lt;\/td&gt;\n  &lt;td&gt;0&lt;\/td&gt;\n &lt;\/tr&gt;\n &lt;!-- snip! --&gt;\n &lt;tr&gt;\n  &lt;td&gt;WI&lt;\/td&gt;\n  &lt;td&gt;0&lt;\/td&gt;\n &lt;\/tr&gt;\n&lt;\/table&gt;\n \n<\/code><\/pre>\n<p>Ora, questa tabella non riflette esattamente quelle complessit\u00e0 del mondo reale in cui incappate con dei dati reali, ma dovrebbe andare bene per i nostri scopi.<\/p>\n<p>Vi starete chiedendo perch\u00e9 dobbiamo scrivere una tabella se lo scopo \u00e8 quello di mostrare una grafica e la risposta sta tutta nel rendere i dati accessibili. Gli spider dei motori di ricerca e gli screen reader, anche quelli JavaScript-aware, probabilmente non interpretano i dati sulla vostra mappa in alcun modo che abbia senso, quindi questa tabella li aiuter\u00e0 ad indicizzare i vostri dati. SVG \u00e8, in teoria, pi\u00f9 accessibile della grafica raster come JPEG, GIF e PNG (innanzitutto, SVG \u00e8 <em>scalabile<\/em> quindi i lettori ipovedenti potranno ingrandirla senza perdere dettagli) perch\u00e9 l'immagine stessa \u00e8 descritta come XML. La realt\u00e0, tuttavia, \u00e8 che il supporto per l'accessibilit\u00e0 in SVG \u00e8 ancora abbastanza agli albori quindi non potete contare sul fatto che gli screen reader saranno in grado di accedere all'informazione presente nello SVG. Un'umile tabella funzioner\u00e0 qui a meraviglia.<\/p>\n<p>Con questi dati sulla pagina, cominciamo ora a scrivere del JavaScript per farci qualcosa di pi\u00f9 interessante. Per prima cosa, <a href=\"http:\/\/code.google.com\/p\/svgweb\/downloads\/list?q=label:Featured\">scaricate l'ultima versione dei files svgweb<\/a> (l'ultima release ufficiale \u00e8 dell'Agosto scorso ma una nuova release \u00e8 prevista a breve) e unzippateli.<\/p>\n<p>Aprite la cartella svgweb che avete unzippato e poi aprite la cartella src e copiate <code>svg.js<\/code>, <code>svg.swf<\/code> e <code>svg.htc<\/code> in una cartella sul vostro webserver. Usare una sotto-cartella come <code>js<\/code> va bene, assicuratevi solamente di tenere tutti e tre i files nella stessa cartella. Ora, includete <code>svg.js<\/code> come primo tag <code>script<\/code> nel head del vostro file HTML.<\/p>\n<pre><code>&lt;script src=\"js\/svg.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Ora, scriviamo una funzione che prenda i dati dalla tabella e li converta in un oggetto <abbr title=\"JavaScript Object Notation\">JSON<\/abbr>. Mettete tutto ci\u00f2 in un tag script <em>dopo<\/em> il sorgente dello script per includere la libreria svgweb (gli a-capo sono segnati da \u00bb <em>\u2014Ed.<\/em>):<\/p>\n<pre><code> \n\/\/convert table to json\n\/\/@param t is the id of the table (string)\n\/\/returns a json object with an array containing an object for each row\nfunction tableToJSON(t){\n    var table = document.getElementById(t),\n        header_row = table.rows[0],\n        n_headers = header_row.cells.length,\n        n_rows = table.rows.length,\n        keys = [],\n        n_keys = 0,\n        json_data = [],\n        json = {};\n \n    \/\/rip through every row to create the JSON data objects\n    \/\/assume the first row contains the headers\n    for(var i=0; i &lt; n_rows; i++){\n        if(i===0){\n            for(var j=0; j &lt; n_headers; j++){\n               keys.push(header_row.cells[j].firstChild\u00bb\n.nodeValue.toLowerCase());\n            }\n        } else{\n            var this_row = table.rows[i]\n            var data = {};\n            n_keys = keys.length;\n \n            for( var j=0; j &lt; n_keys; j++){\n                data[keys[j]] = this_row.cells[j].firstChild.nodeValue;\n            }\n \n            json_data.push(data);\n        }\n \n    }\n \n    json[t] = json_data\n    return(json);\n}\n   \n<\/code><\/pre>\n<p>Non c'\u00e8 molto da dire su questa funzione: prende un singolo parametro (il nome della tabella) e poi fa un loop in tutte le righe per assemblarle e ritornare un oggetto JSON. Assume che la prima colonna della tabella siano label per ciascuna colonna, che vengono poi usati per ciascuna coppia nome-valore. Data la tabella di cui sopra, il nostro oggetto JSON sar\u00e0 cos\u00ec:<\/p>\n<pre><code> \n{ \"results-data\": [\n    {\"state\": \"AL\", \"change\": 0},\n     \/\/... snip! ...\n    {\"state\": \"WI\", \"change\": 0}\n  ]\n}\n \n<\/code><\/pre>\n<p>(Breve nota di produzione: questo \u00e8 un tentativo di mantenere il codice accessibile senza approfondire i dettagli delle implementazioni backend. Le vostre esigenze, ad esempio, potrebbero richiedere un feed JSON separato dal vostro database).<\/p>\n<p>I dati sono a posto, aggiungiamo la mappa. Useremo un tag <code>object<\/code> per caricare la mappa SVG come una risorsa esterna, con un commento condizionale per gestire IE. L'<code>object<\/code> specifico per IE usa alcuni parametri differenti, ossia <var>src<\/var> invece di <code>data<\/code> e <code>classid<\/code> al posto di <code>type<\/code>. Notate inoltre che dei files SVG che caricate, la maggior parte arriva dalla stessa sorgente (il vostro webserver) come lo stesso file HTML: non sono permessi cross-site scripting.<\/p>\n<pre><code> \n&lt;div id=\"results-map\"&gt;\n   &lt;!--[if IE]--&gt;\n       &lt;object src=\"states.svg\" classid=\"image\/svg+xml\"\n           width=\"500\" height=\"375\"\n           id=\"state-map\" alt=\"Interactive map graphic showing\u00bb\nelectoral gains and loses per state as of the 2010 census\"&gt;\n   &lt;!--[endif]--&gt;\n   &lt;!--[if !IE]--&gt;\n       &lt;object data=\"states.svg\" type=\"image\/svg\" \n           width=\"500\" height=\"375\"\n           id=\"state-map\" alt=\"Interactive map graphic showing\u00bb\nelectoral gains and loses per state as of the 2010 census\"&gt;\n   &lt;!--![endif]--&gt;\n       &lt;\/object&gt;\n&lt;\/div&gt;\n \n<\/code><\/pre>\n<p>Tutto ci\u00f2 dovrebbe essere abbastanza semplice. L'attributo <code>src<\/code>\/<code>data<\/code> (a seconda del browser) punta al file SVG: la larghezza e l'altezza dovrebbero essere impostate almeno alla dimensione a cui avete salvato prima il file SVG. Dovreste inoltre dare a ciascun oggetto lo stesso id, per riferimenti futuri. Notate che impostare la larghezza o l'altezza nel tag object non influisce sulla dimensione del file embedded, ma solo sull'oggetto che lo contiene. Se la larghezza\/altezza dell'oggetto sono pi\u00f9 piccole, vedrete le barre di scorrimento, se sono maggiori, ci saranno degli spazi bianchi. Gli attributi alt forniranno delle guide ai bot e agli screen reader.<\/p>\n<p>Se caricate questa pagina nel vostro browser, vedrete una mappa grigia degli Stati Uniti d'America. E se usate la funzione zoom nativa del browser, vedrete che la grafica \u00e8, in effetti, scalabile.<\/p>\n<p>Adesso \u00e8 il momento di collegare i dati alla mappa. Cos\u00ec come capita spesso con la programmazione JavaScript, dovrete assicurarvi che la mappa sia stata caricata prima di provare ad accedervi con lo script. Fortunatamente, svgweb fornisce un evento <code>onsvgload<\/code> su cui potete fare listen perch\u00e9 si attiva una volta che SVG \u00e8 stato caricato. Gli faremo chiamare una funzione <code>init<\/code> che gestir\u00e0 il processing dai dati alla mappa:<\/p>\n<pre><code> \nfunction init(){\n \n}\n \nwindow.onsvgload = init;\n \n<\/code><\/pre>\n<p>All'interno della funzione <code>init<\/code>, abbiamo bisogno per prima cosa di prendere la mappa, usando lo standard <code>getElementById<\/code> con una propriet\u00e0 extra, <code>contentDocument<\/code>, che ci permette di prendere proprio lo SVG.<\/p>\n<pre><code>var map_svg = document.getElementById('state-map').contentDocument;\n<\/code><\/pre>\n<p>Una volta presa la mappa SVG, si comporta in maniera simile ad un oggetto DOM ordinario.<\/p>\n<p>Dopo di che, chiamerete la funzione <code>tableToJSON<\/code> per ottenere i dati.<\/p>\n<pre><code> \n\/\/tableToJSON will return a JSON object with our data\nvar map_json = tableToJSON('results-data');\n\/\/grab the actual array from the json object\nvar map_data = map_json['results-data'];\n\/\/get the array length so you don't calculate it\u00bb\nfor every loop iteration\nvar n_map_data = map_data.length;\n<\/code><\/pre>\n<p>Ora, dobbiamo solo fare un loop tra i risultati ed applicare i dati alla nostra mappa.<\/p>\n<pre><code> \n\/\/loop through the map data and assign properties\u00bb\nto each state on the map\nfor(var i=0; i &lt; n_map_data; i++){\n    \/\/get the state on the map based on the ID in the data array\n    \/\/in this case, the ID is the state abbreviation\n    var map_state = map_svg.getElementById(map_data[i].state);\n \n    if(map_data[i].change === '-2 or more' ){\n        map_state.style.fill = '#B26600';\n    } else if (map_data[i].change === '-1'){\n        map_state.style.fill = '#FF9200';\n    } else if (map_data[i].change === '+1'){\n        map_state.style.fill = '#19ABFF';\n    } else if (map_data[i].change === '+2 or more'){\n        map_state.style.fill = '#0071B2';\n    }\n \n    \/\/assign the state a title, in this case the name of the state\u00bb\nand the change in seats\n    map_state.title = map_data[i].state + '\u00bb\nwill have a change of ' + map_data[i].change + ' seats';\n \n    \/\/give each state an event\n    \/\/for simplicity, the event is a simple alert that displays\u00bb\n \t\tthe title param we just assigned\n    \/\/yes, addEventListener even works in IE, thanks to svgweb\n    map_state.addEventListener('mouseup', function(e){\n        alert(e.target.title);\n    }, false);\n}\n<\/code><\/pre>\n<p>Quello che fa questo loop \u00e8 di cercare prima qualunque nodo SVG con un ID che si abbini allo stato presente nel nostro array di dati: entrambe sono abbreviazioni come \u201cAL\u201d per l'Alabama. Quando corrispondono lo stato sulla mappa e lo stato nel nostro array di dati, lo stato viene colorato in base al cambiamento, da arancio scuro a blu scuro.<\/p>\n<p>Infine, assegniamo a ciascun nodo un tag titolo. Questo ci permetter\u00e0 di accedere a questa informazione quando assegneremo un handler per il click del mouse a ciascuno stato. Avrete notato che usiamo <code>addEventListener<\/code>, uno standard DOM non supportato da IE per gli eventi JavaScript. Fortunatamente, le menti brillanti dietro a svgweb hanno gestito questo problema al posto nostro e hanno astratto l'event handler per usare il modello standard. Questo \u00e8 un evento molto semplice che fa apparire un alert JavaScript con il titolo che gli abbiamo appena assegnato.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Come se fosse il 1999<\/h2>\n<p>SVG ha mantenuto molte promesse non realizzate per pi\u00f9 di un decennio, con il supporto nativo che sta finalmente diventando mainstream (perfino IE9 includera il rendering nativo SVG quando verr\u00e0 lanciato pi\u00f9 avanti quest'anno). A differenza di canvas o di altri approcci script-only, SVG pu\u00f2 essere facilmente diviso tra elementi di grafica e di codice, con giusto un po' di codice per aggiungere l'interattivit\u00e0. Funziona persino su dispositivi come iPad e iPhone. Ed ora, grazie a svgweb e ad un uso oculato di Flash, funziona sulle piattaforme pi\u00f9 vecchie su cui nessuno mai immaginerebbe il supporto per SVG.<\/p>\n<p>E' ora di aggiungere SVG al nostro arsenale per costruire uno strabiliante web.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Povero Scalable Vector Graphics! E&#8217; uno standard ufficiale fin da prima del rilascio di IE6 e tuttavia non ha mai avuto molto pubblico sul web, sicuramente non quello che si merita. E proprio nel momento in cui SVG cominciava ad essere supportato abbastanza efficacemente dai browser, ecco che arriva il tag canvas a rubargli l&#8217;idea delle immagini generate lato client. Ma nonostante tutta l&#8217;attenzione che si dedica a canvas, c&#8217;\u00e8 ancora posto per SVG, in special modo per gli svluppatori che vorrebbero rimpiazzare plugin come Flash per la visualizzazione dei dati. A differenza di canvas o di altri approcci solo basati su script, SVG pu\u00f2 essere facilmente diviso tra elementi di design ed elementi di codice, con l&#8217;aggiunta di poco codice per aggiungere l&#8217;interattivit\u00e0. Funziona anche su dispositivi come l&#8217;iPad e l&#8217;iPhone. E ora, grazie a svgweb e ad un uso intelligente di Flash, funziona anche sulle piattaforme pi\u00f9 vecchie su cui nessuno si aspetterebbe che SVG possa funzionare. Jim Ray ci mostra come.<\/p>\n","protected":false},"author":818,"featured_media":7000609,"comment_status":"open","ping_status":"open","template":"","categories":[242,247,38],"tags":[],"coauthors":[325],"class_list":["post-147","article","type-article","status-publish","has-post-thumbnail","hentry","category-browser","category-html","category-numero-24-22-febbraio-2011"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000609"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=147"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}