JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Questa è la traduzione dell'articolo SVG with a little help from Raphaël di Brian Suda, pubblicato originariamente su A List Apart il 20 Luglio 2010. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Raphaël è una libreria Javascript leggera che, nel contesto di una pagina web, rende a schermo grafica SVG dinamica, inclusi grafici, animazioni vettoriali, componenti per l'interfaccia utente. Ora forse state pensando: posso farlo anche con jQuery, con Google Charts, anche con Flash. È vero, ma Raphaël offre nuove possibilità, caratteristiche e funzionalità non ancora disponibili con queste tecnologie. Impareremo allora come creare immagini vettoriali scalabili che funzionano sui vari browser e degradano in maniera intelligente.

Un linguaggio aperto per il web aperto

Il web gira tutto intorno agli standard aperti e a tecnologie non proprietarie. Raphaël, che usa il linguaggio SVG (uno standard del W3C) e una licenza open source MIT, rientra perfettamente in tale contesto.

Ma cosa fare con Internet Explorer 6? Non supporta SVG! È vero, ma IE6 supporta il linguaggio proprietario VML (Vector Markup Language). Per quanto riguarda le altre versioni del browser di Microsoft, IE9 supporterà SVG 1.1; IE7 e IE8 non sanno cosa fare con un file SVG, così Raphaël seleziona automaticamente la modalità di rendering giusta. Insomma, Raphaël allontana dalle preoccupazioni dello sviluppatore tutte le questioni che riguardano i browser. Lo stesso codice Javascript creerà una bella grafica SVG o VML in base alle caratteristiche del browser. Si scrive il codice una volta sola ed esso funziona dovunque. Inoltre, superando l'uso di Flash per la grafica vettoriale, possiamo distribuire il risultato su un numero maggiore di dispositivi, tra cui quelli equipaggiati con WebKit per il mobile e i dispositivi basati su iOS. La vostra bella grafica vettoriale, scalabile e interattiva, renderà al meglio a qualunque risoluzione sui dispositivi supportati.

jQuery

E jQuery? Ci sono tantissimi plugin per la gestione della grafica. Perché affidarsi a Raphaël?

Tra gli interessanti plugin dedicati alla grafica ricordiamo jqPlot, Flot, jQuery SVG. Con jQuery ci affidiamo a una libreria che, compressa, supera i 50kb di peso. Aggiungiamo il core per la UI, alcuni plugin, le librerie extra per lavorare con IE. Byte su byte facciamo un bel pacchetto, ma abbiamo anche molti byte di cui non abbiamo bisogno.

Raphaël è nel complesso più piccola per creare grafica vettoriale di base. Controllare il peso in kb è qualcosa da considerare quando si sviluppano applicazioni su larga scala, ma lo è anche la scelta dello strumento giusto per il lavoro che si deve portare a termine.

Non deve diventare comunque uno scenario del tipo 'o l'uno o l'altro'. Se usate già jQuery, è possibile aggiungere Raphaël senza conflitti di sorta. Molte di queste librerie Javascript possono convivere in perfetta armonia, cosa che rende molto più semplice la vita degli sviluppatori.

Immagini dinamiche

Prima che avessimo a disposizione tutte queste librerie, questi servizi web, questi strumenti, le immagini generate dinamicamente erano create sul server attraverso script CGI. Come sono cambiate le cose! Ora abbiamo accesso a servizi come Google Charts e altri che usano il protocollo REST. Basta specificare i parametri per ottenere in risposta un magnifico grafico.

Incorporare Google Charts in un elemento <img> è un modo veloce e flessibile per creare grafici a barre, ma è un approccio che ha i suoi svantaggi. Dal momento che si tratta di un elemento immagine, abbiamo a disposizione solo l'attributo alt. Per etichettare le varie regioni del grafico dobbiamo usare l'attributo longdesc o una mappa immagine alterata. Tutti i dati sono compresi e bloccati nei pixel dell'immagine, non nel codice HTML. Le immagini statiche sono rese poi ad una certa dimensione. Significa che zoomando l'immagine diventa tutta pixelata. Realizzando infatti grafici professionali, si scoprono presto i problemi derivanti dall'uso di formati raster come JPEG, GIF e PNG, che non scalano molto bene. SVG, invece, è un formato vettoriale, così è indipendente dalla risoluzione. Dal momento che il web è disponibile in tutte le forme e in tutte le dimensioni, e dal momento che sempre più spesso i dati transitano fuori e dentro il web, la grafica deve mantenere la sua risoluzione dalla qualità ottimale per la stampa fino ad una risoluzione bassa come quella dei 72dpi di certi schermi.

Altri articoli

Altre guide

Altre newsletter