Monthly Archives: January 2014

data jornalism, html5, jquery UI, JS, SoftwareLibero

Grafici interattivi

Aggiornamento 2:
tool grafici
http://infogr.am
http://live.amcharts.com/
http://www-958.ibm.com/software/analytics/manyeyes/
https://www.draw.io/
Aggiornamebto:
Con questo il New York times si è vinto un premio:
http://www.nytimes.com/2013/07/22/business/in-climbing-income-ladder-location-matters.html?_r=2&

 
eccone uno davvero bello !
http://www.nytimes.com/interactive/2011/10/23/sunday-review/an-overview-of-the-euro-crisis.html?_r=0
http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html?_r=0#God
Strumenti utilizzati:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://graphics8.nytimes.com/packages/js/newsgraphics/2011/1020-debt/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://graphics8.nytimes.com/packages/js/newsgraphics/2011/1020-debt/underscore-min.js" type="text/javascript" charset="utf-8"></script>
Ovvero:
Devo dire che quest’ultimo non lo conoscevo 🙂 ma credo che sia funzionale a http://www.documentcloud.org/ e non alla creazione del grafico in se.
Quindi il grafico viene creato e disegnato in SVG dentro a un riquadro canvas con Raphael e poi si passa da uno all’altro utilizzando il semplice metodo delle tab di jquery:
E quindi il segreto delgrafico è tutto qua: nelle indicazioni di quel che deve fare il canvas.. e nel JS che lo anima:
esercizi, html5, jquery mobile, jquery UI

Drag&Drop .. su jquery mobile?!?!

[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/drag.html” width=”600″ height=”480″]
BH.. uno passa da jquery UI a jquery mobile… e… scopre che si pestano i piedi a vicenda!
Hanno entrambi la stessa dipendenza da jquery 1.9 ma costruiscono due USER INTERFACE differenti.
JQ mobile usa dei tag html non standard e questo mi lascia un po perplessa.. anche il mio IDE è dello stesso parere 😉
Ecco il meglio che ho accrocchiato per mantenere il drag&drop anche in jquery mobile, però usando jqueri UI, ma senza i fogli di stile.. brr che impasto..
suggerimenti?
Sembra carino e pare pure che funzioni…
AHH altra pecca.. pensavo che jquery mobile racchiudesse già i plugin per il touch ed immagino sia sicuramente così…
tranne… per i drag&drop.. quindi ho dovuto aggiungere:
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
*  jquery.ui.widget.js
*  jquery.ui.mouse.js
*/
 

html5, jquery mobile, JS

Grid responsive!!

Eddai! sembra un ossimoro, no? però devo dire che funzionano benino una volta capite.. ne parlavo quanche tempo fa in un post.. ovvero il fatto che le tabelle/griglie sono superate dall’html3.. ma ce le troviamo riapparire nell’html5.. come mai? perchè hanno un significato semantico.
Alcune cose non avrebbero lo stesso significato se non fossero rappresentate secondo una tabella. E questa non è una semplice scelta stilistica da racchiudere nei fogli di stile, ma è SIGNIFICATO e come tale deve essere nell’html, in modo che se la pagina viene vista solo come CONTENUTI, in ogni modo il messaggio viene trasmesso..
ovvero?!?!?!esempio in un comunissimo questionario Vero e FAlso o delle domande a risp multipla. Se i radio e check box, ovvero i quadratini o rotondini dove potete clikkare e spuntare la risposta non sono in qualche modo “associati” alla domanda..
iframe 600pxX480px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”600″ height=”480″]
come si fa?!?!
Se nel fare una pagina responsive.. poi a prima vista non riesco più a ricondurre quale risposte appartengono a quale domande…CAvolo!! Chissenefrega che è responsive.. non è più utilizzabile! Quindi veniamo alla pratica..
Da una settimana sto litigando con jquerymobile.. rimando ad un altro post le mie prime impressioni HARGGGHH!!!
Quindi se vogliamo una griglia responsive di due colonne sarà così
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
Ma in questo modo .. la tabella c’è e si vede!
a voi la scelta!
iframe 300pxX450px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”300″ height=”480″]

Uncategorized

Iframe grafico a bolle

grazie alla libreria js D3 http://d3js.org/ è possibile creare splendidi grafici.
Qui un esempio in iframe:
E’ come una finestra su un’altra pagina html, con i proprio codice javascript e librerie.
Quindi non è una immagine, ma è un GRAFICO INTERATTIVO:
clikkare per credere!
[iframe src=”http://open.dataninja.it/wp-content/uploads/app/datascuoleinfanzia/” height=”600″ width=”600″ ]