lorenzo, Author at Appunti e tutorial su front-end web technology

lorenzo

Grafici con Google Chart

Feb 112012

Un’esigenza che si manifesta molto spesso è quella di creare dei grafici in modo dinamico,
senza ovviamente ricorrere a delle immagini da inserire nel proprio sito.
Esistno da tempo molte soluzioni ma per lo più consentono di realizzare istogrammi o altri grafici molto semplici.
Attraverso Google Chart possiamo realizzare grafici anche complessi senza troppo sforzo.

Vediamo un esempio di grafico a torta, la soluzione viene proposta in svg (adottano VML per le vecchie versioni di IE ):
come prima cosa bisogna inserire il collegamento alla libreria:

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>

e poi passiamo alla parte di javascript:
come prima cosa carichiamo il package corretto:

google.load(‘visualization’, ’1.0′, {‘packages’:['corechart']});

ora impostiamo un callback quando l’applicazione viene caricata in modo da leggere i dati e fare le operazioni necessarie:

 google.setOnLoadCallback(disegnaGrafico);

Quindi creiamo il nostro oggetto:

var data = new google.visualization.DataTable();

Aggiungiamo la colonna che funzionerà da etichetta:

data.addColumn(‘string’, ‘Browser’);

e aggiungiamo una seconda etichetta numerica

data.addColumn(‘number’, ‘Slices’);

e ora i dati:

data.addRows([

['Firefox', 86],

['Chrome', 54],

['Internet explorer', 17],

['Safari', 15],

['Opera', 1]

]);

Non resta che settare titolo e dimensioni

var options = {‘title’:'Statistiche Browser’,'width’:400,’height’:300};

e implentare il nostro oggetto collegandolo al div che lo ospiterà:

var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

L’esempio

CSS3: gradiente come sfondo

CSS3 No Responses »

Jan 022012

Con il CSS3 è possibile usare un gradiente come sfondo a un elemento, peccato che, al momento, la funzionalità sia scarsamente supportata, per usare un eufemismo, dai browser di casa Microsoft.

Nella pagina inserisco un div con delle dimensioni fisse e a questo applico il gradiente:

background-image: linear-gradient(topright, #FFFFFF0%, #AACFEF100%);

Dove top right è la posizione di partenza da scegliere tra top, bottom, left, right o loro combinazioni come nel nostro caso e poi nell’ordine il primo e il secondo colore di stop.

Questo è un esempio

CSS3: l’ombra sui testi

CSS3 No Responses »

Dec 282011

Un effetto che sicuramente riscuoterà successo specificato da CSS3 è l’ombra sui testi, ora come probabilmente ci si aspetta il problema è legato a internet explorer ma forse conviene iniziare a portarsi avanti, gli utenti che usano browser obsoleti saranno esteticamente penalizzati ma la fruizzione dei contenuti non risultera compromessa. Tecnicamente non c’è molto da dire:


p {text-shadow: 2px 2px 3px #333 ;}

dove il primo valore è lo spostamento dell’ombra in orizzontale e il secondo è lo spostamento dell’ombra in verticale; quindi il livello di sfocatura e il colore dell’ombra.

Un esempio si può vedere in questa pagina

Calendario in italiano completo

JQuery No Responses »

Dec 272011

Spesso dobbiamo inserire delle date usando un calendario, ma molte volte abbiamo dei piccoli fastidiosi problemi legati alla durata o alla comodità di selezione delle date.

Costruiremo un calendario in italiano che vada a risolvere alcuni di questi problemi.

Per prima cosa colleghiamo jquery, jqueryUI, un tema e la traduzione dei mesi e dei giorni attingendo dai repository di google, ovviamente, volendo, tutti questi files possono essere scaricati in locale sul proprio server web:


<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css” />
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js”></script>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.datepicker-it.js”></script>

Nella nostra pagina inseriremo un frammento di form con un campo di input:


<label for=”data”>Data:</label>
<input type=”text” id=”data” name=”data” />

Quindi al caricamento della pagina andreamo a mappare sul nostro controllo html la trasformazione in calendario:


$().ready(function(){
var dates1 = $( “#data” ).datepicker({

});
})

A questo punto avendo già agganciato la traduzione italiana le date saranno automaticamente nel formato giorno-mese-anno, abilitiamo le opzioni per modificare velocemente mese e anno senza dver necessariamente scorrere di mese in mese:


changeMonth:true,
changeYear:true,

e infine rendiamo dinamico lo scorrere del range degli anni: per fare questo partiremo dall’anno in corso e calcoleremeo i limiti prima e dopo:


var oggi=new Date();
var anno=oggi.getFullYear();
var da=parseInt(anno-5);
var a=parseInt(anno+2);

infine l’ultima proprietà sarà dunque l’yearRange:


yearRange: da+’:'+a

L’esempio

Creare un calendario da a (date range)

JQuery No Responses »

Dec 272011

Per creare una selezione di un periodo di date senza impazzire con i vari controlli un’ottima soluzione è ricorrere a jQuery UI, avremo a disposizione un calendario e tutti gli strumenti che ci servono.

Per prima cosa serve include il core di jQuery (direttamente dalla CDN di google):


<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js”></script>

Poi jquery UI:


<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>

e, se necessario, la localizzazione in italiano (questa formatterà anche di default la data anche se poi lo potremo modificare):


<script type=”text/javascript” src=”js/jquery.ui.datepicker-it.js”></script>

Infine usiamo un tema fra quelli disponibili:


<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css” />

Nell’html della pagina la parte che ci interessa è composta semplicemente da due campi di input:


<input type=”text” id=”da” name=”da” />
<input type=”text” id=”a” name=”a” />

A questo punto bisogna “solo” trasformarli in controlli datepicker sncronizzati al caricamento della pagina:


$().ready(function(){
var dates1 = $( “#da, #a” ).datepicker({
defaultDate: “+1w”,
numberOfMonths: 1,
yearRange: ’1990:2011′,
onSelect: function( selectedDate ) {
var option = this.id == “da” ? “minDate” : “maxDate”,
instance = $( this ).data( “datepicker” ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates1.not( this ).datepicker( “option”, option, date );
}
});
})

dove $().datepicker() per mette di trasformare appunto in datepicker i due input con id “a” e “da”;

infine all’evento select della prima data prepariamo il secondo datepicker disabilitando le date non selezionabili (perché precedenti).

Per provare l’esempio completo portare il focus nei due campi di input.

CSS3: l’ombra sui box

CSS3 No Responses »

Dec 222011

Per molti anni uno dei principali motivi di discussione fra designer e sviluppatori era legato alle ombre inserite nei layout e di una discreta complessità da montare nelle pagine html, comunque facendo ricorso alla grafica tradizionale con le inevitabili scomodità del caso.

CSS3 propone una soluzione a questo problema introducendo la possibilità di gestire le ombre. L’istruzione cardine è questa:


box-shadow: 5px 5px 10px 2px #333333;

Esaminiamola nel dettaglio: i primi due valori indicano rispettivamente lo spostamento orizzontale e quello verticale, valori positivi spostano l’ombra verso destra e verso il basso, mentre valori negativi spostano l’ombra verso sinistra e verso l’alto. Il terzo valore rappresenta il grado di sfocatura, valori più bassi determinano ombre più nette. Il quarto valore imposta il grado di diffusione dell’ombra, più è alto e più l’ombra tende ad espandersi. L’ultimo valore, ma questo è abbastanza scontato, rappresenta il colore dell’ombra.

In pratica

CSS3: box con bordi arrotondati

CSS3 No Responses »

Dec 212011

Una delle novità forse più attese del css3 è la possibilità di arrotondare tramite il foglio di stile gli angoli dei nostri div o degli altri tag html.

Uno dei nuovi attributi del css è dunque il border-radius, che poi può essere suddiviso nei 4 angoli: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Inoltre è possibile non solo specificare il raggio del bordo, ma si possono creare ellissi dano il doppio valore per l’asse orizzontale e verticale.

L’esempio che segue presenta bordi ellittici negli angoli a sinistra e circolari a destra:


border-top-left-radius:20px 10px;
 border-top-right-radius:20px;
 border-bottom-left-radius:20px 10px;
 border-bottom-right-radius:20px;

Il risultato lo si può vedere in questa pagina

CSS3: opacità (seconda opzione)

CSS3 No Responses »

Dec 202011

CSS3 offre una seconda opzione per gestire la trasparenza in alternativa a quella presa in considerazione nel post precedente. Si tratta di usare la notazione RGBa, dove oltre alla percentuale del colore RGB possiamo specificare la trasparenza con il canale alfa.
Riprendendo l’esempio precedente:

body{ font-family:Verdana; font-size:75%; background-image:url(images/sky.jpg);}
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
}

lo integriamo modificando le istruzioni sul background del box in questo modo

background-color: rgba(255, 255, 255, 0.5);

dove l’ultima voce è appunto il canale alfa dell’opacità. A questo punto la domanda è sulla differenza rispetto al post precedente: nel caso dell’attributo opacity questo viene applicato allo sfondo del box e agli elementi contenuti, mentre nel caso della notazione RGBa sarà solo lo sfondo del box ad essere trasparente e non gli elementi contenuti nel box.

Ecco l’esempio

CSS3: opacità

CSS3 No Responses »

Dec 192011

CSS3 offre la possibilità di gestire la trasparenza sui box. In questo esempio metteremo un’immagine di sfondo sul body:

body{
font-family:Verdana;
font-size:75%;
background-image:url(images/sky.jpg);
}

All’interno della pagina metteremo un box contenente del testo e poi con il css diamo alcune istruzioni di formattazione tradizionali:

	width:400px;
	height:400px;
	padding:20px;
	color:#000;
	background-color: white;

e finalmente l’opacità, con un valore che va da 0 (trasparente) a 1 opaco:

opacity:0.5;

infine dobbiamo garantire la compatibilità con ie8:


-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;;

e ie7:

filter: alpha(opacity=50);

Ecco l’esempio

Canvas: un disegno manipolato da un form

HTML5 No Responses »

Dec 132011

Questo post nasce da una esigenza che ho avuto: un semplice disegno che reagisse a delle modifiche di valori tramite delle select di un form. La soluzione, per vari motivi, non poteva essere flash e quindi mi sono orientato a usare l’ogetto canvas di html5. La compatibilità con i vari ie è garantita dalla libreria excanvas.js

Quindi ho creato le mie tre select che raffigurano una linea vertivale, una linea obliqua e l’angolo; l’html della pagina è completato dal nostro canvas.

Al caricamento della pagina, via jquery, associo l’onchange delle select con la modifica al disegno mediante la chiamata alla funzone disegna.

La funzione disegna, innanzitutto si predispone e “aggancia” il canvas pronto per il disegno 2D:


var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);

La parte successiva è un po’ noiosa e consiste nella lettura del form e nel calcolo dei valori necessari al nostro disegno: difatti il canvas è un piano cartesiano e per disgnare delle lineee con punto di partenza e di arrivo bisogn far ricorso a un po’ di trigonometria. Ma la parte che più interessa è quella del disegno vero e prorpio:


context.beginPath();
context.moveTo(290, hfinestra);
context.lineTo(290, 45);

Mi posiziono in un punto fisso sull’asse delle x e la cui altezza è determinata dalla select della linea verticale e traccio una riga fino a un punto fisso di congiunzione delle due righe


context.lineTo(coseno, seno);
context.lineWidth = 10;
context.strokeStyle = “black”;

La seconda linea va da dove sono arrivato fino al puntodeterminato dal coseno e al seno calcolati in base all’angolo e alla lunghezza della linea verticale. Setto spessore e colore della linea, infine la disegno:


context.stroke();

La pagina contiene anche un pulsante che chiama una funzione per pulire

L’esempio completo

Older Entries Newer Entries