Gli ultimi post di Edit
Grafici, da Flash a Javascript nel nome dell’iPad
Mercoledì 16 Giugno 2010 - 08:14
di Cesare Lamanna
Qualche giorno fa un amico mi ha mostrato fiero il suo iPad, magnificandone gli aspetti positivi e lamentando di fatto un solo, vero problema: la mancanza di Flash. L’amico in questione è uno che lavora con Google Analytics ed essendo l’interfaccia di quel servizio fortemente basata su Flash, soprattutto per la generazione dei grafici, lo sfogo è comprensibile.
Quelli di Campaign Monitor devono aver avvertito, evidentemente, il problema. Se i nostri clienti hanno necessità o voglia di consultare dati e statistiche con un iPad, che facciamo? Li lasciamo a piedi o proviamo una via alternativa? Questa la strada seguita. Tutti i grafici del servizio sono stati convertiti da Flash a Javascript, sfruttando una libreria ricca e potente come Highcharts. Funziona? Pare di sì. A testimoniarlo questo breve video.
Categoria: Scripting | Permalink | Commenti (9)
Open Flash Chart 2
Lunedì 10 Maggio 2010 - 10:11
di napolux
Open Flash Chart 2 è la nuova versione di un componente Flash che permette di creare facilmente grafici interattivi nelle nostre pagine web basati su oggetti JSON.
Come funziona? Basta inserire il file SWF del componente all’interno della nostra pagina web e passare come parametro GET alla pagina il file JSON contenente i dati e la configurazione del nostro grafico.
Continua a leggere Open Flash Chart 2
Categoria: Grafica, Adobe World | Permalink | Commenta
Grafici interattivi con jQuery
Giovedì 18 Marzo 2010 - 07:08
di Kiko
Il web è il posto ideale per pubblicare contenuti interattivi. Pensate agli articoli tecnici o alle lezioni online. Se prima ci si affidava quasi esclusivamente ad Applet Java o alla tecnologia Flash, oggi si può fare completo affidamento alle librerie Javascript sempre più complete e sempre più potenti. jQuery offre ampie soluzioni e in questo blog continuiamo a pubblicare interessanti link. Anche oggi proseguiamo con questa ricerca e vi segnaliamo un articolo pubblicato su 1stwebdesigner.
L’articolo in questione prende in esame ben 5 librerie dedicate alla produzione di grafici interattivi: torte, grafici a barre, istogrammi e plotting. Tutte rilasciate con licenze libere.
Categoria: Scripting | Permalink | Commenti (1)
Grafici semplici e interattivi con Google Chart Tools
Venerdì 12 Febbraio 2010 - 12:33
di Cesare Lamanna
In principio furono le Google Charts API. Copio e incollo da post con cui presentavamo quasi tre anni fa questo tool:
Si tratta di un modo semplice e immediato per inserire grafici all’interno di pagine web. Meglio: per inserire immagini PNG che rappresentano in forma di grafico i dati passati all’applicazione di Google. Basta usare nel modo consueto il tag
imge usare come valore disrcla chiamata alle API sotto forma di un URL che contiene i parametri necessari alla generazione del grafico.
Esempio:
E codice usato:
<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=250x100& chl=January|February|March|April" alt="grafico" />
Continua a leggere Grafici semplici e interattivi con Google Chart Tools
Categoria: Scripting, Software e Servizi | Permalink | Commenti (2)
Librerie Javascript per la creazione di grafici
Lunedì 14 Dicembre 2009 - 08:28
di Cesare Lamanna
Due veloci segnalazioni per librerie Javascript dedicate alla creazione di grafici interattivi.
La prima è per dygraphs, un progetto open source che consente nello specifico la produzione di grafici di serie temporali. Il tutto è prodotto con un uso esteso di canvas (garantito il supporto a IE6 grazie di excanvas). I grafici generati sono zoomabili e intarattivi. Ricchissima la serie di esempi visualizzabili a partire dalla pagine principale del progetto.
Highcharts si presenta in una veste sicuramente più accattivante, sia per il sito sia per la qualità grafica dei grafici prodotti. Si appoggia a MooTools o jQuery per le funzionalità Javascript più comuni e fa anch’essa uso di canvas per la parte relativa al disegno.
Anche per Highcharts è disponibile sul sito una galleria di demo molto nutrita. L’uso della libreria è libero per siti personali o di organizzazioni no-profit. La licenza costa invece $80 per usi commerciali su un solo sito o $360 per l’uso su più siti. Maggiori dettagli su questa pagina.
Categoria: Scripting | Permalink | Commenti (6)
jqPlot: grafici con jQuery
Venerdì 5 Giugno 2009 - 08:25
di Riccardo Degni
jqPlot è un plug-in per il framework jQuery che, come indica il nome, permette di generare diversi tipi di grafici, tra cui gli immancabili line charts e bar charts.
Le caratteristiche interessanti si incontrano quando andiamo ad analizzare le feature offerte, come ad esempio la possibilità di trascinare i punti del grafico con l’auto-aggiornamento dello stesso, la presenza di ombreggiatura sugli elementi del grafico, la possibilità di includere una moltitudine di tracciati in un’unica presentazione (interamente customizzabili dall’utente tramite CSS), la possibilità di ruotare il testo e molto altro.
jqPlot offre una documentazione davvero dettagliata cosi come una sezione per le demo molto nutrita.
Infine, come riportato sul sito ufficiale, jqPlot è testato con IE 6, IE 7, IE 8, Firefox, Safari ed Opera.
Categoria: Scripting | Permalink | Commenti (4)
Protovis: ancora grafici con Javascript
Mercoledì 22 Aprile 2009 - 08:17
di Riccardo Degni
Nonostante il nome possa indurre a crederlo, Protovis non è un plug-in per il framework Prototype, ma uno script standalone che, mediante un complesso utilizzo della tecnologia Canvas, permette di traformare i dati numerici in molteplici rappresentazioni grafiche.
Nonostante sia ancora nelle sue prime fasi di vita, Protovis promette davvero bene: tramite le numerose demo è possibile percepirne le potenzialità. Lo script è attualmente compatibile con i browser di ultima generazione (Firefox 3, Chrome e Safari 4) ed è rilasciato sotto licenza BSD.
Categoria: Scripting | Permalink | Commenti (4)
A List Apart Survey 2008: i risultati
Giovedì 9 Aprile 2009 - 08:41
di Cesare Lamanna
Sono stati resi noti i risultati dell’annuale sondaggio promosso da A List Apart per fare il punto della situazione sulle professioni legate al web design. La messe di dati è veramente enorme e si entra nel dettaglio su tantissimi aspetti, dai salari alle skill fino alle questioni legate ai titoli di studio o all’alternativa tra lavoro dipendente o come freelance.
Un aspetto interessante è che quest’anno i risultati sono stati diffusi attraverso un sito ad hoc dietro il quale c’è la mano di designer quotati come Jason Santa Maria ed Eric Meyer.
A quest’ultimo, in particolare, si deve il lavoro sui CSS che ha reso possibile, senza ricorrere a Javascript, di creare le decine di grafici allegati. L’invito è quello di dare un’occhiata al codice sorgente (noterete che si tratta di un utilizzo intelligente di tabelle, div e paragrafi). Meyer ha postato sul suo blog alcune considerazioni al riguardo.
Categoria: Web Design | Permalink | Commenti (1)
Creare Line Graphs con i CSS
Venerdì 13 Febbraio 2009 - 08:21
di Riccardo Degni
Il nuovo articolo di Alen Grakalic apparso su CSSGlobe.com denominato Pure CSS Line Graph, ha notevolmente catturato la mia attenzione, essendo uno dei pochi post che si pongono l’ obiettivo di mostrare tutta la potenza offerta dai semplici CSS.
Dopo il precedente articolo (Pure CSS Data Chart) che spiegava come creare “semplici” grafici unicamente avvalendosi dei fogli di stile, Alen ha voluto spingersi ad un livello superiore: creare Line Graphs.
Per quanto complicata possa sembrare, la tecnica presentata si basa principalmente su pochi elementi HTML (dl, dd, span), classi CSS ed un’immagine che permette di simulare la creazione delle varie linee.
Oltre alle corpose spiegazioni, nell’articolo sono presenti molte immagini che mostrano i risultati in azione e soprattutto i file sorgenti degli esempi presentati.
Molto probabilmente questa tecnica verrà ignorata dalla maggior parte degli sviluppatori, dato che esistono controparti in Javascript e simili che offrono maggiore controllo e soprattutto maggiore rapidità in fase di creazione (senza contare che ancora non sono a conoscenza di quanto ampia sia la browser compatibility della tecnica in questione). Tuttavia, come nel caso di una mia vecchia segnalazione contenente un link ad una risorsa che mostrava come creare Homer Simpson con i CSS, è importante notare come con l’uso dei semplici CSS sia possibile raggiungere risultati davvero notevoli.
Categoria: CSS | Permalink | Commenti (2)
ASP.NET Chart Control
Venerdì 28 Novembre 2008 - 08:28
di Gianni Malanga
Microsoft ha da poco rilasciato un nuovo interessante controllo che permette di visualizzare grafici di tutti i tipi. Il controllo si chiama Chart Control ed è disponibile sia per ASP.NET sia per Windows Forms.
Una volta installato, questo controllo viene posizionato nel gruppo Data della Toolbox di Visual Studio 2008 da cui poi è possibile trascinarlo in una qualsiasi pagina ASP.NET o form di Windows Forms. È possibile impostare i dati da visualizzare tramite il controllo sia dichiarativamente che attraverso data binding, il risultato sarà sempre lo stesso: un’immagine generata dinamicamente che visualizzerà i dati sotto forma di grafico sulla base delle impostazioni da noi fornite. Le possibilità sono davvero tante e per avere un’idea di cosa è possibile fare e di come farlo è stato preparato anche un pacchetto di esempio nel quale vengono proposte circa 200 tipologie differenti di grafico e da cui è possibile ricavare il codice utilizzato per la loro generazione, anche in questo caso sia in ASP.NET che in WinForms. Per una perfetta integrazione di questo nuovo controllo in Visual Studio 2008 è richiesta l’installazione di un piccolo add-on che trovate in questa pagina. E’ disponibile inoltre anche la documentazione completa del controllo.
Categoria: Microsoft Dev | Permalink | Commenti (3)