http://blog.DoZarte.com

Se volete mostrare una tipica foto “prima e dopo la cura” in una pagina web, ora c’è più di una opzione per farlo.
Prima d’ora l’unica possibilità, parlando di soluzioni pratiche e veloci da mettere in pratica, era pubblicare le due foto affiancate; ora c’è un plugin per jQuery che consente di sovrapporre le due foto e implementa un sistema per passare da una all’altra in maniera controllata.

Il plugin per jQuery Before/After inserisce infatti un cursore (slider) – totalmente manovrabile tramite il mouse – che scorre a destra e a sinistra, rivelando l’una o l’altra fotografia; inoltre è possibile inserire due pulsanti per visualizzare completamente una delle due immagini.

Il plugin pesa solamente 7 KB è può essere usato più di una volta sulla stessa pagina; se il navigatore non ha javascript attivato allora vedrà entrambe le fotografie. Per usarlo bisogna richiamare jQuery e jQuery UI, oltre al plugin:

(continua…)

Nonostante altre soluzioni per usare qualsiasi font su una pagina web anche se questo non è installato nel sistema operativo dell’utente/navigatore, si stanno “pian piano” affermando delle soluzioni che possiamo trovare incorporate direttamente all’interno dei browser.

Il supporto per la regola @font-face permette di usare una particolare sintassi all’interno dello stile CSS di una pagina html, richiamando un file TTF (True Type font) opure OTF (Open Type Font) tramite una semplice riga di codice.
Il supporto per questa regola è disponibile però non in tutti i browser attualmente usati: Firefox 3.5, Safari 3.1 e Opera 10 (ed ovviamente le versioni successive) supportano la regola @font-face.

In Google Chrome il supporto della regola @font-face ci sarebbe, ma è stato disabilitato per questioni di sicurezza; sembra però che nelle versioni future il supporto alla regola verrà riattivato nella configurazione di default.

Per Microsoft Internet Explorer il discorso è – come sempre! – diverso: il supporto per la regola @font-face c’è addirittura dalla versione 4 di Explorer (!), ma il supporto per i font TTF e OTF è sostituito dal supporto per i font EOT (Embedded OpenType), che è un tipo di font studiato e sviluppato da Microsoft per l’uso sul web.

L’uso della regola @font-face, come detto, è molto semplice…

(continua…)

Dopo la marea di metodi per creare slide di immagini, ecco un altro plugin per jQuery che serve “solamente” per effettuare un cambio di immagini sfruttando alcuni effetti animati molto carini: ImageSwitch.

Con jQuery è facile creare effetti come la dissolvenza, muovere oggetti, ecc.
Sfortunatamente, quando si ha bisogno di creare un effetto per scambiare delle immagini diventa un po’ più complicato: non è impossibile, ma non è nemmeno semplice, semplicemente richiede più codice da scrivere.

Il punto di forza di questo plugin è fornire un metodo facile e veloce per creare questi effetti quando se ne ha bisogno.
Il plugin supporta vari effetti come la dissolvenza, il “volo”, il “flip”, lo scroll, … sia in entrata che in uscita.
Inoltre è ben commentato, il che rende ancora più facile il suo uso.

(continua…)

Captify è un plugin per jQuery molto semplice, che consente un facile inserimento di didascalie alle immagini. Le didascalie possono essere fisse e sempre attive, oppure impostate per apparire/sparire in dissolvenza al passaggio del mouse. Inoltre i sottotitoli possono anche comparire dall’alto o dal basso.

Captify è stato ispirato da ImageCaptions, un altro plugin per jQuery per mostrare didascalie; Captify è però più semplice, facile, leggero e completo da usare; è testato per Firefox, Chrome, Safari, e Internet Explorer.

(continua…)

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