http://blog.DoZarte.com

Come programmatori di pagine web, cerchiamo sempre di usare il codice al meglio delle sue potenzialità; se usiamo i Css ma vorremmo avere qualcosa di più potente sotto le mani, ma comunque ci garantisca compatibilità coi i browser più diffusi, senza dimenticare l’odiato Internet Explorer…

Less è un pre-processore di Css che espande le regole css tradizionali ed aggiunge ad essi nuove funzioni, rendendoli più potenti e più snelli da scrivere.

Less nasce come RubyGem ma non dobbiamo preoccuparci se non abbiamo familiarità con Ruby, perché è anche disponibile per Php e .Net .

Le variabili permettono di specificare dei valori usati molte volte in un singolo passaggio, e poi essere usate nello stile css richiamandole, rendendo il cambiamento di valori globali facile come cambiare una sola riga di codice.

@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}

(continua…)

Capita di aver bisogno di mostrare in un sito web uno slideshow, una carrellata o una sequenza di immagini o fotografie, e i modi per fare questo sono sicuramente molti.
Esistono servizi online in cui basta caricare le foto e dopo averle caricate ci viene fornito il codice per incorporare un player con il nostro slideshow, magari pure arricchito di musica.
Però se vogliamo qualcosa di relativamente più semplice, che non comporti l’uso di servizi esterni o l’utilizzo di tecnologie video o Flash, ci sono dei javascript che fanno al caso nostro!

Cycle è un plugin per jQuery per creare slideshow e caroselli di immagini, animare sequenze di immagini, con diversi tipi di animazioni e transizioni; supporta la pausa on-hover del mouse, l’auto-stop, l’adattamento automatico delle immagini, …e tanto altro. Supporta – ma non richiede – i plugin Metadata e Easing.

Cycle Lite è una versione più leggera di Cycle.
Questa versione lite è ottimizzata nelle dimensioni dei file e supporta solamente la transizione in dissolvenza.
Supporta anche il pause-on-hover (e cioè arresta il ciclo nel momento in cui il mouse si sovrappone all’immagine), l’adattamento automatico, i callback prima/dopo, e reagisce al click del mouse.

Per funzionare, il plugin mette a disposizione un metodo chiamato “cycle” il quale è richiamato su un contenitore di elementi (le immagini, o gli elementi, che andremo a “ciclare”); ogni elemento figlio del contenitore diventa uno “slide”.

Ci sono diversi parametri facoltativi per personalizzare lo slideshow: il tempo tra le varie transizioni, la loro velocità, l’altezza del contenitore, ritardo addizionale per la prima transizione (anche negativo), ecc.ecc.

Ad esempio, per farlo creare uno slideshow nella configurazione base basta una riga:
$('#slideshow1').cycle()

(continua…)

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…)