http://blog.DoZarte.com

Dopo aver visto come disegnare grafici usando la struttura offerta da Google Charts oppure usando librerie in javascript da implementare nelle nostre pagine web, facciamo amicizia con un nuovo framework.

JS Charts è un generatore di grafici gratuito basato su javascript che richiede pochissima programmazione per essere usato. Basta preparare i dati in array javascript o in un file XML ed inserire lo script in una pagina html per vedere un grafico, senza bisogno di plugin particolari.

I grafici che si possono disegnare sono grafici a torta, grafici a barre e diagrammi a linee.
Il sito da cui è disponibile JS Charts mette a disposizione anche un’interfaccia per l’inserimento dei dati e l’esportazione dello script personalizzato pronto all’uso.

Le caratteristiche sono…

1. non bisogna scrivere codice
2. è facile da usare
3. personalizzabile
4. puoi farti i grafici online
5. supporta i 3 tipi di grafici più comuni
6. puoi salvare i tuoi grafici sul tuo account
7. puoi pubblicare codice “hostato” sul sito di jscharts
8. compatibile coi comuni browser
9. non servono moduli server-side
10. 100% javascript
11. gratuito e senza watermark

È compatibile con i più diffusi browser: Firefox 1.5+, Internet Explorer 6+, Safari 3.1+, Opera 9+ su Windows; Firefox 1.5+,, Safari 2+ su Mac, e iPhone 1+.

Come si usa JS Charts?

(continua…)

Abbiamo visto come sia facile creare tooltip normali e anche più complessi. Un altro modo facilissimo per fare degli spettacolari tooltip con preview di un’immagine è usando jQuery: lo script in questione è un plugin che pesa solo 2 kb e che può essere usato in molti modi.

Il primo mostra semplicemente l’attributo TITLE del link come un “normale” tooltip:

<a class="tooltip" title="TOOLTIP" href="http://...">LINK</a>

Un altra possibilità è usarlo come preview di immagini, con o senza didascalie (sempre tramite l’uso del TITLE):

<a class="preview" title="DIDASCALIA" href="image.jpg">LINK</a>

Una terza bella possibilità e di associare ad un link testuale una immagine di anteprima, con didascalia (in questo caso il file di anteprima è richiamato tramite l’attributo REL):

<a class="screenshot" title="DIDASCALIA" rel="ANTEPRIMA.JPG" href="http://www....">LINK</a>

Come si può vedere, tra le tre versioni cambia la CLASSE: tooltip, preview e screenshot.
Il tutto va ovviamente poi “condito” con qualche righettina di codice CSS.

fonte: CSS globe

Come LightBox e ShadowBox (e molti altri…) anche FancyZoom è uno script, solo che questo non si basa su nessun framework esterno.
FancyZoom, come dice il nome, ha di bello l’essere molto elaborato e particolare: salta subito all’occhio l’effetto ZOOM in dissolvenza che si ha nel passaggio dall’icona all’immagine ingrandita.

Per il resto le caratteristiche complete sono…

• dissolvenza in entrata ed in uscita
• allineamento automatico al centro della pagina
• adatta l’ingrandimento alla dimensione del browser
• pre-caricamento delle immagini n background
• 2 script JS  ed 1 cartella in tutto (61 kb)
• aggiunge l’ombra agli ingrandimenti (in Safari 3 usa la caratteristica nativa)
• si inserisce nelle pagine con 2 righe di codice
• testato su Safari, Firefox, IE7, e IE6

Le due righe di codice per implementarlo sono per la solita inclusione tra i tag HEAD:

<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>

L’unica pecca che gli ho trovato, a parte mostrare solo immagini, e che al ridimensionare la finestra del browser oppure allo scorrere la pagina, l’immagine resta fissa dovè.

(continua…)

Dopo i 10 migliori hack da usare con i CSS, ecco altri 15 trucchi da usare con i CSS…

1.

Nascondi il testo con la rientranza del margine:
text-indent:-9999px;/*Hide Text, keep for SEO*/

2.

Cross browser min height:
#container { min-height:500px; } * html #container { height:500px; }
…oppure…
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

3.

Evidenzia i target:_blank links:
a[target="_blank"]:before,
a[target="new"]:before {
background:#ff9;
}
(continua…)

Ho già parlato di un rinomato quanto semplice metodo per creare menu a tendina usando CSS; ecco qui invece come creare un drop-down menu, cioè un menù a tendina, in modo facile e veloce, usando jQuery ed un plugin per jQuery: Pop!

Primo passo: includere tra i tag HEAD il fle CSS e i 2 JS, uno per jQuery ed uno per Pop!…

<link href="/pop/stylesheets/pop.css" media="all" rel="stylesheet" type="text/css"/><script language="javascript" src="/pop/javascripts/jquery.js" type="text/javascript"></script>
<script language="javascript" src="/pop/javascripts/jquery.pop.js" type="text/javascript"></script>

Poi inizializzare Pop! con la solita sintassi che si usa in jQuery…

(continua…)

Agile Carousel

Agile Carousel è un altro plugin di jQuery per la crezione di slide, ricco di funzioni: oltre all’effetto slide permette anche transizioni e dissolvenze, pulsanti avanti-indietro, pulsanti per saltare più “pagine”, auto play, loop, …

link: Agile Carousel

Easy Slider

Per creare degli slide di immagini, cioè quell’effetto in cui delle immagini (o altro contenuto web) si scambiano fra loro scorrendo verso una direzione (verticale od orizzontale), non c’è niente di meglio di un bel plugin per jQuery semplicissimo da implementare: Easy slider jQuery plugin!

La sintassi per usarlo è basilare:

Richiamare i due file Javscript tra i tag Head…

<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/easySlider.js"> </script>

…dopodiché impostare il nostro DIV con le immagini inserita in una lista non ordinata…

<div id="slider">
<ul>
<li>immagine 1</li>
<li>immagine 2</li>
<li>immagine 3</li>
</ul>
</div>

(continua…)