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;
}

I “mescolamenti” (mixins) permettono di inserire tutte le proprietà di una classe dentro ad un’altra classe semplicemente includendone il nome come fosse una proprietà. Come le variabili, ma per classi intere!
Questi possono comportarsi come delle funzioni, e prendere argomenti, come nell’esempio sotto…

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}

Regole nidificate
Piuttosto che scrivere lunghissimi nome dei selettori si possono nidificare i selettori dentro altri selettori; questo rende l’eredità delle proprietà più semplice ed intuitiva.

#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}

Operazioni
Alcuni elementi nei tuoi fogli di stile sono proporzionati ad altri elementi?
Le “operazioni” ti consentono di sommare, sottrarre, dividere e moltiplicare i valori e i colori delle proprietà, dandoti il potere di creare complesse relazioni tra le varie proprietà.

@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}

Molto presto vedremo la prossima generazione di Less. Ci saranno cambiamenti maggiori rispetto a quelli fatti in ogni versione precedente perchè ora Less è stato re-implementato in Javascript.
Questo significa che non sarà più necessario un linguaggio lato server come Ruby, Asp o Php per usare Less, ma solo il browser.

Less.js è quindi la versione Javascript di Less per Ruby.
Comq per ogni javascript basta includerne il codice nel file Html e basta! Less processerà direttamente il codice less senza dover richiamare un file Css per la pre-compilazione.

Sui browser che implementano Html5, Less.js memorizzerà in nella memoria locale il codice Css generato, a favore della velocità di esecuzione.

Non è ancora disponibile una versione ufficiale di Less.js, ma la versione “lavori in corso” è disponibile nel repository (deposito) di Github e Google Code.

Prima di tutto bisogna inserire la solita riga di codice nell’Head della pagine html; poi, per usare il codice “Less”, bisogna includere il file .less come fosse un file .css ma avendo l’accortezza di inserire la proprietà rel=”stylesheet/less” in modo che il compilatore Less sappia che quello è un file di cui deve occuparsi!

Basta assicurarsi – almeno – di inserire il Javascript dopo la chiamata al file .less .

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Infine, c’è una caratteristica che in fase di progettazione può risultare moooolto utile, e fa in modo che il Css venga ricaricato ogni volta che il file Less viene salvato con delle modifiche; basta usare questo codice qua:

<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>

fonte: Less.js Will Obsolete CSS , Less

Articoli simili

1. Come aggiungere nuovi funzionalità al CSS
2. Disegnare grafici dinamici tramite javascript /2
3. Cambiare colore ad un MovieClip
4. Come evidenziare i commenti dell’autore
5. “Fare clic per attivare questo controllo e utilizzarlo”
6. Aprire una pagina nel “suo” frameset
7. Sifr via javascript con Typeface
8. Galleria di immagini in Javascript MOOOLTO interattiva
9. Non preoccupiamoci più di Explorer 6
10. Inserire un SWF nelle pagine web: la soluzione definitiva?

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

link: Cycle , Cycle Lite

Articoli simili

1. “Scambiatore” di immagini
2. Flickr slideshow widget
3. Editor video gratuiti online
4. Prima/Dopo la cura slider
5. Galleria di immagini in Javascript MOOOLTO interattiva
6. Isolare un oggetto in primo piano ed eliminarne lo sfondo
7. Creare puzzle da un’immagine, in javascript
8. Grafici tridimensionali accattivanti e gratuiti
9. Programmi gratis per disegnare online /2
10. Lightbox, Lightwindow

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
 $('#container').beforeAfter();
});
</script>

Le immagini, che devono ovviamente avere entrambe le stesse dimensioni, devono essere sistemate ognuna dentro un DIV, i quali a loro volta vanno messi dentro un altro DIV contenitore; inoltre è obbligatorio inserire altezza e larghezza, altrimenti il plugin non funziona su browser basati su Webkit (come Safari e Chrome).

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

DEMO e link: Before/After jQuery Plugin

Articoli simili

1. Come creare un dropdown menu
2. Come ordinare le righe di una tabella HTML
3. Creare slide di immagini
4. Velocizza i tempi di accesso al tuo framework preferito tramite le AJAX Libraries API di Google
5. “Fare clic per attivare questo controllo e utilizzarlo”
6. Non preoccupiamoci più di Explorer 6
7. Un altro script per gallerie Ajax: Fancy Zoom
8. Less: meno codice CSS, più funzioni!
9. 15 trucchetti con i CSS
10. Come evidenziare i commenti dell’autore

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…

All’interno di un foglio di stile, ogni uso della regola definisce il nome di una famiglia di caratteri da usare, il file del font da caricare e le caratteristiche dello stile (come grassetto, corsivo, ecc.):

@font-face {
font-family: Carattere personale;
src: url(SEVESBRG.TTF);
}
body {
font-family: Carattere personale, verdana, arial;
}

Tramite l’uso di “font-weight” e “font-style” si possono definire gli stili diversi di un medesimo font, andando ben oltre la combinazione di grassetto/corsivo, in quanto i valori di Font-Weight possono essere arrivare fino a 9.

Siccome lo scaricamento di un font richiede banda e tempo – perché il file in sé ha un certo peso in termini di kb – si può scegliere di usare una sintassi che faccia in modo di usare per primi i font installati localmente e, se assenti, di scaricarli dal server, :

src:
local("Helvetica Neue Bold"),
url(HelveticaNeueBold.ttf);

Il nome esatto da usare per richiamare un carattere è solitamente formato dal nome della famiglia più il nome dello stile.
In Mac OsX è possibile risalire a questi semplicemente accedendo FontBook e cliccando su Show Font Info.
su Windows questo è possibile scaricando il programma gratuito Font properties extension; con il programma installato, il pannello informazioni aperto su un file TTF o OTF permette di accedere alle informazioni del singolo carattere; il nome da usare è indicato alla voce Font Name.

Risorse e Link

Se comunque non volete stare lì a studiarvi tutti i vari metodi per convertire ed usare un font TTF in un sito web, c’è un sito che offre un servizio online gratuito molto bello: vi permette di caricare uno (o più) file TTF, dopodiché potrete scaricare la versione convertita di questo font – ovvero font in formato EOT, WOFF, CFF e SVG – ed un file HTML comprensivo di stile CSS che vi mostra come implementare il font in una pagina web in una maniera “a prova di proiettile”!
link: Font Face Generator

Per ulteriori e maggiori informazioni: mozilla , w3c
Per aggiornamenti sulla compatibilità offerta dai browser: webfonts

Articoli simili

1. Usare font non standard su pagine web
2. Come usare qualsiasi font nei titoli
3. Sifr via javascript con Typeface
4. Usare PNG trasparenti su IE6
5. Come scegliere lo stile del font giusto per il web
6. TypeSelect ovvero usare font non standard nelle pagine web
7. Font & fonts: gratis, gratuiti e free
8. Un ottimo font manager gratuito per Macintosh e Windows
9. 15 trucchetti con i CSS
10. Come inserire una chat nel proprio sito internet /2

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.

link: ImageSwitch

Articoli simili

1. Come mettere le didascalie nelle immagini
2. Come creare un dropdown menu
3. Creare slideshow di foto in una pagina web
4. Creare pulsanti con rollover
5. Integrare l’effetto Lightbox nelle nuove gallerie
6. Angoli arrotondati agli elementi HTML
7. Creare slide di immagini
8. Come creare un fading incrociato di immagini in pagine html
9. Come ordinare le righe di una tabella HTML
10. Come inserire codice HTML in WordPress

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.

link: Captify

Articoli simili

1. “Scambiatore” di immagini
2. Menù ad albero in Javascript
3. Prima/Dopo la cura slider
4. Come fare affinché Explorer funzioni su tutti i siti
5. Altro script per gallery multimediali: Shadowbox
6. Angoli arrotondati agli elementi HTML
7. Come modificare impostazioni nascoste di Leopard: Super Docker
8. Come personalizzare check box e radio button nei form html
9. Quali sono i browser più usati?
10. Come creare un dropdown menu

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?

Per prima cosa bisogna richiamare lo script all’interno dell’HEAD:

<script src="jscharts.js"></script>

Poi preparare un “contenitore” per il grafico:

<div id="grafico">TESTO ALTERNATIVO</div>

Infine inserire nella pagine lo script con i dati e le istruzioni per il grafico:

<script>
var myData = new Array([10, 20], [15, 10], [20, 30]);
var myChart = new JSChart('grafico', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>

La prima riga passa i dati a coppie: nei grafici a linea spezzata i valori indicano un punto della linea, in quelli a barre e a torta sono un nome ed un valore.
La seconda riga inizializza il grafico fornendo l’ID del contenitore e il tipo di grafico (line, bar, pie).
La terza invia i dati allo script e la quarta disegna il grafico.

Come detto, al posto di un array scritto direttamente nella pagine html, possiamo scrivere i dati in un file XML esterno:

<?xml version="1.0"?>
<JSChart>
<dataset type="line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
</dataset>
</JSChart>

…e scrivendo poi lo script in questa maniera:

<script>
var myChart = new JSChart('grafico', 'bar');
myChart.setDataXML('data.xml');
myChart.draw();
</script>

link: JS Charts

Articoli simili

1. Grafici tridimensionali accattivanti e gratuiti
2. Disegnare grafici con Google charts
3. Creare grafici e diagrammi in Flash
4. Disegnare grafici dinamici tramite javascript
5. Come alleggerire il lavoro di dattilografo
6. “Fare clic per attivare questo controllo e utilizzarlo”
7. Come ordinare le righe di una tabella HTML
8. Come creare un dropdown menu
9. Sifr via javascript con Typeface
10. Aprire una pagina nel “suo” frameset

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

Articoli simili

1. CoolTipCha!
2. Immagini con didascalie in pagine HTML
3. ProtoTip: tooltip pronti all’uso
4. Come creare aree con tooltip su un’immagine
5. “Nessuna Sidebar definita” come attivare gli widget
6. Ricercare immagini più rapidamente in Flickr
7. Editor di immagini nel menù contestuale di Windows
8. Screenshot su Mac: fotografare lo schermo
9. Font & fonts: gratis, gratuiti e free
10. Come ingrandire una foto “senza” perdere qualità /2

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è.

link: FancyZoom

Articoli simili

1. Prima/Dopo la cura slider
2. Come creare un dropdown menu
3. Galleria di immagini in Javascript MOOOLTO interattiva
4. Creare slide di immagini
5. Come ordinare le righe di una tabella HTML
6. Non preoccupiamoci più di Explorer 6
7. Disegnare grafici dinamici tramite javascript /2
8. Altro script per gallery multimediali: Shadowbox
9. Aprire una pagina nel “suo” frameset
10. Less: meno codice CSS, più funzioni!

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;
}

4.

Evidenzia i link che puntano a file PDF o DOC:
a[href$="pdf"]:after,
a[href$="doc"]:after {
background:#ff9;
content: " (PDF)";
}
a[href$=".doc"]:after {content: " (DOC)";}

5.

Usare le pseudo classi in ordine (la regola LVHA):
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

6.

Usare…
overflow:auto
…nei DIV che contengono materiale che ‘sborda’

7.

Usare il pagebreak per separare i commenti dai post (printer friendly):
#comments {page-break-before:always;}

8.

Dai uno stile alle Liste Ordinate (OL):
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

9.

Crea immagini ridimensionabili via CSS:
<div class="resize2"><img src="image.jpg" alt="" /></div>
.resize2 {
border: 3px double #333;
float: left;
height: 12em;
margin: .2em 1em 1em 0;
overflow: hidden;
width: 12em;
}
.resize2 img {
margin: -220px 0 0 -210px;
padding: 6em 0 0 6em;
}

Gli atri 6 sono:

• crea un effetto roll-over sulle liste di link
• resetta gli stili CSS
• usa i capilettera ingranditi
• la trasparenza cross-browser
• angoli arrotondati via CSS

fonte: DevSnippets

Articoli simili

1. I 10 migliori hack per CSS
2. CSS diversi per browser diversi
3. Come aggiungere nuovi funzionalità al CSS
4. Prima/Dopo la cura slider
5. Generatore di abbinamenti cromatici
6. Non preoccupiamoci più di Explorer 6
7. Sifr via javascript con Typeface
8. Usare font non standard su pagine web
9. Come scegliere lo stile del font giusto per il web
10. Usare PNG trasparenti su IE6