Usare le griglie non significa strutturare un design noioso. Un buon progettista applica le norme fondamentali del layout usando un modello grid-based, ma sa anche rompere queste regole in modo corretto!

Griglie e layout web: le basi

Una griglia è la suddivisione di un layout tramite linee guida verticali e / o orizzontali, che servono per organizare gli spazi e delimitare i margini e le colonne in modo da fornire un quadro per l’organizzazione dei contenuti.

Le griglie sono tradizionalmente presenti nei lavori di stampa, ma sono molto versatili anche per il web design. Una griglia non deve rendere un sito come il layout di un quotidiano, ma può essere certamente di aiuto nella creazione di una struttura uniforme con cui avviare il progetto grafico.
L’idea di griglia non è certo qualcosa che nasce sul web. In realtà, essa deriva da uno dei principi più antichi e alla base del Graphic e del Visual Design: l’allineamento.

Il nostro cervello tende a semplificare le cose per renderle facilmente comprensibili. È per questo che cerchiamo di imporre un ordine su cose che sembrano caotiche. Naturalmente, più è facile imporre l’ordine, più velocemente il nostro cervello è in grado di identificare un modello e andare avanti.
Le griglie sono così organizzate e ordinate, che non richiedono quasi alcuna interpretazione da parte nostra.

Una griglia è semplicemente uno strumento per aiutare il disegn, ma non deve diventare qualcosa con cui la progettazione si debba scontrare!

Sezione aurea: il web e la proporzione divina!

Fin dal Rinascimento, molti artisti e architetti hanno proporzionato le loro opere seguendo il rapporto aureo – in particolare sotto forma di rettangolo aureo, in cui il rapporto tra il lato più lungo al più corto è il rapporto aureo: 1.618. La logica alla base è la convinzione che questa proporzione sia organica, universale, armonica ed esteticamente piacevole. Infatti, essendo evidente in tutto l’universo (in realtà, molte cose che ci circondano possono essere espresse in questo rapporto), la proporzione divina (che è anche chiamata rapporto aureo, sezione divina, sezione d’oro o di Fidia) è probabilmente la legge delle proporzioni più conosciuta, con cui migliorare notevolmente la struttura del vostro layout web.

Layout Web a colonne: risorse e tool online

Senza l’utilizzo dei CSS3 o di jQuery per le colonne, non è esattamente facile spezzare una pagina in colonne senza entrare in noiosi calcoli matematici.

Per esempio, se si dispone di un contenitore da 1000 pixel di larghezza e si vuole dividerlo in tre colonne, ogni colonna avrà è 333 e 1 / 3 pixel di larghezza (non esattamente un bel numero intero). Inoltre, per distanziarle uno dall’altra, dobbiamo aggiungere un margine su ogni lato.
Se aggiungiamo un margine di 10 pixel per ogni lato di ogni colonna, dobbiamo sottrarre anche che 20 pixel dalla larghezza di ciascuna colonna. Questo ci dà 3 colonne di circa 313 pixel di larghezza ciascuna, con un margine di 10 pixel per ogni lato (arrivando così a 999px e non 1.000 px).
E questo è solo un semplice esempio, che non contempla layout complessi, con gabbie diverse o barre laterali!

Ecco quindi di seguito tool e risorse web che permettono di avere layout web a colonne senza troppi calcoli!

Grid Designer

Grid Designer è il tool più completo per calcolare al volo la larghezza delle colonne, per ottenere un layout perfetto al pixel!
Esso infatti permette di calcolare la larghezza del layout di pagina, delle colonne e dei margini intercolonna e di pagina: basta inserire numero di colonne, dimensione in pixel della colonna, gutters e margini. Il servizio consente modificare in tempo reale anche la tipografia del progetto, e di esportare il layout completo sotto forma di fogli di stile CSS.

960 Grid System

Grid System 960 è semplicemente un metodo per creare siti web utilizzando una griglia larga 960 pixel.
L’utilizzo di 960 pixel di larghezza è dovuto al fatto che il numero 960 permette un sacco di divisioni utilizzando numeri interi, se si considera la larghezza delle colonne e dei margini. E si adatta bene sulla maggior parte degli schermi.
La GS 960 è disponibile in due varianti principali: una griglia a 960 di 12 colonne e una griglia di 16 colonne (è inclusa anche una versione a 24 colonne per coloro che necessitano di controlli extra).

Grid System Generator

Il servizio offerto da gridsystemgenerator.com raccoglie il sopracitato 960 GS, assieme a un generatore di griglie basato sulla Regola Aurea, uno su 1Kb Grid e uno su SimpleGrid.

Gridr Buildrrr

Gridr Buildrrr offre uno strumento rapido per la creazione di griglie per layout web, con un controllo perfezionato dei margini, e con elementi segnaposto drag-and-drop per i banner pubblicitari.

GridFox

GridFox è un’estensione per Firefox che sovrappone una griglia su qualsiasi sito web. Facile da personalizzare, consente di creare una griglia esatta disegnata sul layout del sito web.

Grid overlay bookmarklet for 960.gs

Questo bookmarklet aggiunge una griglia in overlay di 12 o 16 colonne su qualsiasi pagina, venendo in aiuto alla progettazione, per testare i pixel alla perfezione.
Per installare il bookmarklet è sufficiente trascinare il link sulla barra degli strumenti.

Design by grid

Il magazine online designbygrid.com offre risorse e tutorial per creare perfetti layout grid-based.

Articoli correlati:

1. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
2. Cheat Sheets per il Web Design

La compatibilità con i browser sembra non essere più un grosso problema, da quando hanno iniziato a circolare risorse come Modernizr, ExplorerCanvas o IE7.js, per "modernizzare" i browser non compatibili con le nuove tecnologie, oppure per attivare i tag HTML5 su tutti i browser.

Dopo aver dato una occhiata alle maggiori novità di HTML5, e dopo aver dato uno sguardo alle tecniche per utilizzare già oggi i CSS3, ecco più di 10 template HTML5-CSS3 tutti da testare, con cui iniziare a progettare per il web di domani. Se li hai gà testati, dimmi cosa ne pensi nei commenti in fondo al post!

HTML5 Starter Pack

HTML5 Starter Kit è un template che non costringe a costruire un particolare tipo di sito web, ma si adatta a seconda delle esigenze.
Ecco le sue caratteristiche: gratuito, HTML5 cross-browser (compreso IE6), possibilità di utilizzare immediatamente Cufón @font-face, disponibilità di alcune classi strutturali riutilizzabili.
Infine, viene offerto il file .PSD per aggiornare il layout.

Gotta’ love HTML5 & CSS3

Template per le gallerie di immagini, sviluppato con HTML5-CSS3, che comprende:
transizioni animate (come l'hover animato per la descrizione delle immagini) e un’interfaccia a schede per diverse gallerie con CSS3 (che usa solo il selettore :target).

A Free HTML5 and CSS3 Theme

Il template permette di creare sotto-pagine funzionanti, tra cui un modulo di contatto con validazione lato server, e codice PHP per l’invio della posta elettronica.
Utilizza la griglia 960.gs, e ha un font personalizzato chiamato Chunkfive che fa uso di @font-face.

Coding A HTML 5 Layout From Scratch

Tutorial da Smashing Magazine: il template proposto è una vetrina per la maggior parte dei nuovi elementi di intestazione, piè di pagina, sezione, ecc.
Nelle strutture CSS3, c’è il popolare text-shadow e altri selettori come last-child o selection.

52framework

52framework è uno strumento completo per iniziare a progettare con HTML5 e CSS3 con l’uso dei nuovi tag, campi di input, angoli arrotondati, text-shadows, ecc…
Include un sistema di layout a griglia e un CSS-reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial molto dettagliato sulla creazione di una applicazione web per iPhone che utilizza HTML5 e CSS3.

Creare un sito elegante con HTML 5 e CSS3

Questo tutorial pemette di creare pagine web con HTML5 e CSS3, e di condividere il risultato sotto forma di download gratuito.
Molti nuovi elementi HTML5 vengono qui utilizzati e viene integrato Modernizr per la compatibilità di IE.

Free HTML5 Template

Template per layout HTML a 2 o 3 colonne, compreso il file .PSD per gli elementi di layout.

HTML5 & CSS3 Vertical One-Page Template

Un template per siti one-page a svluppo verticale, che utilizza jQuery per lo scorrimento del contenuto in verticale per la visualizzazione dei link.

OWMX 1 HTML5-CSS3 Template

Template per blog a 2 colonne che utilizza molte delle nuove caratteristiche CSS3 e dei tag HTML5.
Utilizza il microformato: hCalendar microformat.

FlipThru HTML5 and CSS3 Template

Il template è piuttosto semplice ma utilizza le maggiori funzionalità di HTML5-CSS3.
Tuttavia, è da notare la disponibilità di un accordion che fa solo uso di CSS3.

HTML5-CSS3 Starting Template

Questo template offre una struttura completa per siti web HTML5 costruiti con PHP.
Comprende inoltre gli stili CSS per il layout, per la tipografia, per la stampa e il CSS reset.
Sono già disponibili nel modello le funzioni include PHP per header, footer, ecc

Articoli correlati:

1. HTML5: tavola degli elementi interattiva!
2. CSS3: compatibilità cross-browser…da oggi!
3. HTML5: tag nuovi e anteprima delle novità

Purtroppo, anche se alcune di esse appartengono già alle specifiche CSS 2.1, non sono supportate da nesusn browser IE. Ecco allora che ci vengono in aiuto alcune librerie JavaScript che uniformano il comportamento di IE ai browser più recenti.

IE7.js è una libreria JavaScript (100kb) per far sì che Internet Explorer 6+ si comporti come un browser standard-compliant. Essa risolve molti problemi legati a HTML, CSS e fa funzionare correttamente con IE5 e IE6 le PNG trasparenti.
Scarichiamola e scegliamo di includere il JavaScript che ci permette di aggiornare tutti gli IE alla versione 9, così:

<!--[if lt IE 9]>
  <script src="IE9.js"></script>
<![endif]-->

Pseudoclassi: sintassi

Tutte le pseudo-classi seguono questa sintassi:

elemento:pseudoClasse {
...
}

Alcune pseudo-classi fanno uso anche delle parentesi. Per esempio, la pseudo-classe :not() dichiara quale regola CSS non applicare. Ciò è utile quando si desidera applicare qualcosa a tutto tranne a un certa classe/ID. Per esempio, questa dichiarazione:

.miaClasse:not(div) {
 background:#CCC;
}  

imposta uno sfondo di colore #CCC per tutti gli elementi che non siano div.

Utilizzo delle pseudo-classi

Pseudo-classi correlate ai link

Queste pseudo-classi applicano degli stili ai diversi stati di un link. Ecco di seguito la lista completa e cosa possiamo ottenere:

• :link applica uno stile a un link non visitato
• :visited applica uno stile a un link visitato
• :hover applica uno stile su un elemento al passaggio del mouse
• :active applica uno stile a un elemento attivo. Per esempio, un link è attivo da quando ci si clicca a quando si rilascia il click

A questo riguardo occorre ricordare che l’ordine sopra indicato non è casuale: in fatti, ogni pseudo-classe link-related ha una sua specificità.
Esiste una sorta di short-hand per ricordarsi la corretta successione: prendendo la lettera iniziale di ogni stato si ottiene "LVHA", che può essere ampliato a "LoVe HAte".

Pseudo-classi correlate a Input & link

• :focus applica uno stile a un elemento in uso. Per esempio, quando si scrive dentro una textarea, in quel momento essa è in uso
• :target se si dispone di un URL tipo index.html#about, questo permetterà di applicare i CSS per l’elemento con id="about"
• :enabled seleziona tutti gli elementi input in stato enable
• :disabled seleziona tutti gli elementi input in stato disabled
• :checked controllato nelle caselle di immissione selezionate
• :indeterminate seleziona i radio e i check-box, quando essi non sono né selezionata né non selezionata
• :required seleziona gli elementi input che sono required
• :optional seleziona gli elementi input che sono optional
• :invalid seleziona input non validi
• :in-range selziona elementi che sono in un range (da utilizzare con input type="range" in HTML5)
• :out-of-range seleziona elementi fuori dal range
• :default seleziona l’elemento di default, per esempio, in un form il bottone submit
• :valid seleziona un campo input valido (HTML5)

Pseudo-classi correlate alla posizione/numero

Ecco un esempio:

• :root applica uno stile CSS all’elemento radice, ossia il tag <html> in un documento HTML
• :first-child applica uno stile al primo figlio di un elemento
• :last-childapplica i CSS all’ultimo elemento contenuto. Esempio div p:last-child seleziona l’ultimo paragrafo d un div
• :nth-child(N) seleziona elementi numerati, su base 1. Per esempio, p:nth-child(3) seleziona l’elemento p che è il terzo figlio. Si possono anche aggiungere regole, per esempio p:nth-child(2n+1), dove n è il numero di partenza partendo da 0 e viene incrementato di 1. Perciò, questa regola seleziona tutti gli elementi pari (odd): in questo caso è equivalente a scrivere nth-child(odd), così come per i dispari si scrive nth-child(even)
• :nth-of-type(N) applicare i CSS a un elemento numerato di un certo tipo. Per esempio: div:nth-of-type(2) seleziona il secondo di quel tipo
• :nth-last-of-type(N) seleziona un elemento in base alla sua posizione, per esempio nth-last-of-type(4)
• :first-of-type applica i CSS solo al primo alemento di quel genere. Per esempio, se ci sono due div consecutivi, applica la regola solo al primo
• :last-of-type Seleziona l’utlimo elemento di un genere
• :only-child seleziona un elemento solo se è l’unico figlio del contenitore padre
• :only-of-type seleziona un elemento solo se esso è l’unico nel suo genere contenuto nell’elemento padre

Pseudo-classi relazionali

• :not(elemento | classe) applica una regola CSS solo agli elementi che non sono specificati tra le parentesi
• :empty applica i CSS a un elemento solo se è vuoto

Pseudo classi e paseudo elementi legati al testo

Pseudo-elementi

• :first-line definisce lo stile CSS della prima riga di un elemento
• :first-letter definisce lo stile CSS del primo carattere di un elemento

Pseudo-classi

• :lang() applica uno stile a un elemento che usa una lingua specifica, per esempio :lang(en) per l’inglese. È quindi possibile mettere lang = "en" in un tag HTML e impostare gli stili solo per esso
• ::selection permette di cambiare lo stile del testo selezionato nel browser
• :read-only seleziona gli elementi che sono read-only
• :read-write seleziona la parte editabile in un elemento

Content-related pseudo-elementi

• :before è in grado di aggiungere contenuti prima di un certo elemento
• :after è in grado di aggiungere contenuti, dopo un certo elemento

jQuery: pseudo-selettori CSS3

jQuery permette di usare tutti questi selettori, per esempio:

• :first funziona come :nth-child(1)
• :eq(X) è uguale a :nth-child(X)
• :contains('text')
• :lt(X)come :nth-child(-n+X), seleziona “i primi X elementi”
• :gt(X) è come :nth-child(n+X), seleziona tutto tranne “i primi (X-1) elementi”
• :even è come :nth-child(even) o :nth-child(2n)
• :odd è uguale a :nth-child(odd) o :nth-child(2n+1)
• :has(S) controlla se l’elemento contiene un certo discendente

Oltre a questi ve ne sono molti altri.

Selettori di discendenza

C’è una differenza tra figli e discendenti?

Vediamo come impostare degli stili CSS per capire come funzionano il combinatore figlio diretto, il combinatore fratello adiacente, e il combinatore fratello di pari livello.

Child: combinatore "figlio diretto"

Nel codice sottostante, dichiariamo una discendenza generica (Combinatore del discendente – Descendant), e di seguito, una diretta.

#child  p { color: #000;font-weight:normal; }
#child > p { color: #F00;font-weight:bold; }  

Adjacent sibling: combinatore "fratello adiacente"

Ecco come funziona adjacent sibling: in pratica appica lo stile all’elemento, se e solo se, esso è immediatamente successivo altro elemento indicato.

p + p { font-size: smaller; }
/* Applica lo stile solo al paragrafo che ne segue un altro (adiacente) */
#intro + ul { margin-top: 0; }
/* Applica lo stile solo alla lista che segue direttamente un elemento con  ID intro */

General sibling: combinatore "fratello generico"

General sibling è molto simile ad adiacent sibling: la differenza è che l’elemento che viene selezionato non ha bisogno di essere immediatamente successivo al primo elemento, ma può apparire ovunque dopo di esso. Ecco un esempio di general sibling:

p ~ p { background-color:#0F0; color:#FFF; padding:10px; }

Articoli correlati:

1. Tabelle HTML: come usarle, quando usarle
2. CSS3: compatibilità cross-browser…da oggi!
3. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!

CSS3 Columns

Attualmente solo Firefox, Safari e Chrome sono compatibili con il multi-columns. Mozilla utilizza il prefisso speciale moz-, mentre l’implementazione per Safari utilizza il prefisso -webkit, che abbinati alle regole ufficiali, permettono di creare layout multi-columns:

.columns {
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -moz-column-rule: 1px solid black;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  -webkit-column-rule: 1px solid black;
  column-count: 3;
  column-gap: 1em;
  column-rule: 1px solid black;
}

I browser ad oggi compatibili sono:

• Firefox 1.5+
• Safari 3+
• Chrome
• IE 9

Di seguito nel dettaglio ecco cosa abbiamo appena specificato per dividere il layout in colonne.

Column-count: come definire il numero di colonne

Abbiamo impostato column-count:3 per dividere il div che contiene il testo in tre colonne di uguale larghezza. Abbiamo inoltre specificato uno spazio tra le colonne, il column-gap:1em, che agisce come la proprietà padding, aumentando notevolmente la leggibilità. Notiamo che l’altezza delle colonne si adatta al contenuto di testo e che, aumentando il numero dei caratteri o la dimensione del testo, essa si adatterà per contenerlo. Di seguito il codice CSS3 che dovremo scrivere:

  column-count: 3;
  column-gap: 1em;

Column-width: impostare la larghezza delle colonne

Un altro modo per definire le colonne è impostare solo il column-width (e, come per l’esempio precedente, il column-gap). Per esempio, defininendo un column-width di 200px, tutte le colonne avranno 200 pixel di larghezza: il browser calcola di conseguenza quante colonne di questa larghezza possono inserirsi nell’elemento contenitore, e le crea in base a questo valore. Anche in questo caso, l’altezza delle colonne è definita dal contenuto testuale. Ecco cosa dobbiamo scrivere:

  column-width: 200px;
  column-gap: 1em;

Column-rule: dividere le colonne con dei filetti

La proprietà column-rule agisce come una sorta di border tra le colonne. Questa regola ha infatti le stesse proprietà del border: (larghezza, stile e colore), e come per esso, possono essere scritte tramite "shorthand":

/*Shorthand per column-rule*/
column-rule:1px solid black;
/*che equivale a:*/
column-rule-color: #000;
column-rule-style: solid;
column-rule-width: 1px;

Column-span: intestazione su più colonne

Questa proprietà non è ancora supportata da nessun browser.
Ecco cosa imposteremo nei fogli di stile con la regola CSS3 per espandere il titolo su più colonne::

/*Settiamo il numero delle colonne: n | all*/
column-span: all;

Colonne CSS3 cross-browser: Columnizer jQuery

Come abbiamo potuto notare, siamo ancora lontani dal poter utilizzare nella pratica la proprietà CSS3 multi-columns. Il framework jQuery ci mette però a disposizione un plugin che fa esattamente quanto abbiamo visto fin’ora. Ecco cosa dobbiamo fare: scarichiamo Columnizer jQuery Plugin e colleghiamolo alla nostra pagina HTML da dividere in colonne, così:

<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="script/jquery.autocolumn.min.js"></script>  

Scriviamo poi in pagina il nostro contenuto, agganciandovi una classe, per esempio columns:

<h1>CSS3 e jQuery multi-column module</h1>
<div class="columns">
  <p>The Columnizer jQuery Plugin will automatically layout your content
  in newspaper column format. You can specify either column width or a static
  number of columns. And, of course, it’s easy to use!</p>
</div>  

Adesso agganciamo il plugin a questa classe, così:

$(document).ready (function() {
  $('.columns').columnize({columns:2});
});

Ecco cosa succede: il plugin suddivide il contenuto in div ai quali assegna una classe column: alla prima aggancia la classe first, all’ultima la classe last.

jQuery e le colonne ad altezza uguale

Terminiamo con un ottima funzione che permette di impostare uguale altezza per elementi flottanti, semplicemente includendo questo script e agganciandolo al .mioElementoFloattante:

$(document).ready(function(){
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
} ;
equalHeight($(".mioElementoFloattante"));

});
 

Di questa funzione è stato realizzato anche un plugin.

Articoli correlati:

1. Web design e griglie: progettiamo grid layout!
2. CSS e float: blocchi flottanti e altezza del contenitore. Le soluzioni
3. CSS3: compatibilità cross-browser…da oggi!

L’introduzione dei CSS3 permetterà di realizzare siti web più flessibili e di ridurre i costi di sviluppo e di manutenzione. Per utilizzare già adesso la maggior parte delle proprietà CSS3, dobbiamo usare le specifiche estensioni del browser assieme alle proprietà originali. Le estensioni più comuni sono quelle usate per i browser basati su WebKit (per esempio, Safari), che iniziano con -WebKit, e browser basati su Gecko (per esempio, Firefox), che si aprono con -moz-. Konqueror (-KHTML-), Opera (-o) e Internet Explorer (-ms-) hanno le loro estensioni proprietarie. Come designer professionisti, dobbiamo tenere a mente che l’utilizzo di queste proprietà specifiche non permettere di validare i fogli di stile. Ma in alcuni casi, per sperimentare o per apprendimento, possiamo affiancarla alle proprità CSS validate.

Ma esattamente quali tecniche CSS3 possiamo già usare oggi?

Ecco di seguito le principali novità CSS3 e la compatibilità con i maggiori browser, da testare con i file di esempio.

CSS3: angoli arrotondati

Ecco il codice, utilizzato per realizzare i bordi arrotondati:

.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
     border-radius: 12px; /* Opera 10.5, IE 9 */
	}

• Firefox 1+
• Safari3+
• Chrome
• Opera 10.5
• IE 9

Una valida soluzione alternativa, realmente cross-browser (compreso IE6+), basata su JavaScript, è rappresentata da jQuery Corner. Update! Ecco come risolvere il bug dei bordi arrotondati su immagini di sfondo.

CSS3: ombra esterna

Le nuove dichiarazioni CSS3 permettono di proiettare ombra esterna da un oggetto. Per tutti i browser, tranne IE6-7-8, dopo la dichiarazione della proprietà, il primo valore consente di spostare l’ombra lungo l’asse x, il secondo la muove sull’asse delle y, il terzo gestisce il livello di blur, mentre l’ultimo definisce il colore. le versioni di IE sotto la 9, utilizzano invece filter.

Ecco un un esempio di elementi con ombra esterna:

.box_shadow {
	-moz-box-shadow: 0px 0px 4px #000000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 4px #000000; /* Opera 10.5, IE 9.0 */
    filter: /* IE6,IE7 e IE8 */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5) /* top */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) /* left */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) /* bottom */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5);  /* right */
}

• Firefox 3.5+
• Safari3+
• Chrome
• Opera 10.5
• IE6+

CSS3: sfumatura a gradiente verticale

Ecco cosa usare e per ottenere una sfumatura verticale. Da notare il mancato supporto di Opera:

.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')"; /* IE8 */
}

• Firefox 3.6
• Safari4
• Chrome
• IE6+

CSS3: effetto traparenza

Ecco come settare i CSS per ottenere un effetto trasparenza cross-browser. Di seguito il codice (notiamo che il filtro si comporta in questa maniera: il codice completo è #60CCFF00 dove 60 è l’Alpha, mentre il codice colore vero e proprio è CCFF00. Attenzione!):

.box_rgba_1 {
	background-color: rgba(204, 255, 0, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00'); /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00')"; /* IE8 */
}

• Firefox 3+
• Safari3+
• Opera 10.10+
• Chrome
• IE6+

CSS3: rotazione

Ecco come realizzare una rotazione cross-browser solo con i CSS: per prima cosa scaricate il file -ms-transform.htc e salvatelo nella cartella dei file CSS. Poi settate le regole come segue:

.rotate {
	behavior:url(-ms-transform.htc); /* IE6+ */
    -moz-transform:rotate(45deg); /* FF3.5+  */
    -webkit-transform:rotate(45deg); /* Saf3.1+, Chrome */
    -o-transform:rotate(45deg); /* Opera 10.5 */
    -ms-transform:rotate(45deg); /* IE */
}

• Firefox 3.5+
• Safari3.1+
• Opera 10.5+
• Chrome
• IE6+

…ed ecco come appaiono dei div ruotati.

CSS3: @font-face

Prima di iniaziare, ecco una guida essenziale al @font-face.
Scarichiamo un font e generiamo le regole CSS3.
La regola di base che ci serve per includere i font in pagina poggia sulla direttiva @font-face: occorre definire una regola @font-face per ciascun font che intendiamo utilizzare:

@font-face {
	font-family: 'IlMioFont';
	src: url('ballpark_weiner.eot'); /* IE6+ */
	src: local('Ballpark'),
		 local('IlMioFont'),
		 url('ballpark_weiner.woff') format('woff'), /* FF3.6 */
		 url('ballpark_weiner.ttf') format('truetype') /* Saf3+,Chrome,Opera10+ */
	;
}

…e usare i nostri font nelle dichiarazioni CSS consuete. In questo modo:

#ilMioSelettore {
	font:30px 'IlMioFont', Georgia, serif;
	color:#000;
}

• Firefox 3.6+
• Safari3+
• Opera 10+
• Chrome
• IE6+

Articoli correlati:

1. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
3. CSS Pseudo-classi: come usarle su IE6+!

La prprietà outline disegna una linea tratteggiata intorno all’elemento cui è applicata: outline è simile a border, nel senso che viene disegnata una linea intorno all’elemento, fuori dal bordo dell’elemento, ma a differenza di border, non è impossibile impostare una larghezza diversa per ogni lato, oppure impostare i colori e stili diversi per ogni lato. La struttura è la stessa su tutti i lati.

La proprietà outline non intacca il box model, non viene aggiunto in alcun modo alla larghezza o altezza dell’elemento.
Per azzerare la sua comparsa, settiamo così i CSS:

a {
	outline:none;
}

Così facendo lo abbiamo azzerato completamente per tutti gli stati del link, per esempio:

/* link - yellow */
/* link visitato - cyan */
/* mouse over sul link - firebrick */
/* link selezionato - lawn green */

a.one:link {color: yellow}
a.one:visited {color: #00FFFF}
a.one:hover {color: #B22222}
a.one:active {color: #7CFC00}

non avranno il bordo tratteggiato.

C’è da notare che le pseudoclassi per funzionare correttamente devono, a causa delle regole della Ereditarietà, cascade, conflitti tra stili, seguire un ordine ben prestabilito: l’ordine in cui vanno inserite in un CSS le dichiarazioni relative ai link è:

1. link
2. visited
3. hover
4. active

Per venire incontro alle esegenze estetiche senza intaccare l’usabilità, la soluzione migliore tra le tante, è settarlo a none solo per lo stato hover e active

a:hover, a:active { outline: none; }

Siamo così sicuri che gli utenti che utilizzano la tastiera potranno vedere i bordi tratteggiati quando scorreranno col TAB su un link e attiveranno lo stato focus.

Articoli correlati:

1. CSS: Bottoni espandibili con una sola immagine
2. CSS3: compatibilità cross-browser…da oggi!
3. Tabelle HTML: come usarle, quando usarle

La caratteristica principale di JavaScript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato, bensì c’è un interprete incluso nel browser, e dato che ognuno (ma soprattutto IE) interpreta con specifiche ed eccezioni proprie, è spesso impossibile essere certi del funzionamento cross-browser di uno script.
In risposta a questi problemi sono nati progetti di librerie (o meglio framework) in grado di garantire il funzionamento cross-browser degli script e di estendere o comunque facilitare le funzioni native di JavaScript.

Cos’è jQuery?

Proprio per “facilitare” la creazione di pagine web, nel 2006 John Resig pubblicò la prima versione del suo ormai famosissimo framework: jQuery.
jQuery nasce quindi con lo scopo di risolvere tali problemi e di fornire uno strumento che potesse velocizzare la stesura del codice. Ed è così che è diventato il framework più utilizzato e con il più alto numero di plugin disponibili. La libreria ha una dimensione inferiore a quella degli altri framework, ha una community estesa ed è facile da imparare.

JavaScript: cenni introduttivi

Per chi inizia da zero, ecco una breve introduzione alle buone e cattive pratiche da seguire nello scrivere codice JavaScript, quindi valide anche per jQuery.
Per prima cosa, maggiore è la separazione migliore è la qualità del nostro risultato.
Per ottenere ciò, è bene tenere a mente gli scopi per la quale una pagina web è scritta:

• descrivere il contenuto della pagina (HTML semantico)
• specificare la presentazione di tale contenuto (CSS)
• controllare il comportamento del contenuto (JavaScript)

Anche se è possibile agganciare per rapidità il codice JavaScript nei tag all’interno degli attributi “handlers” o all’interno dell’attributo href, questo rappresenta una cattiva pratica.

Evitare quindi gli handlers:

<a href="#" onclick="alert('Hello World');">click</a>

e il codice javaScript all’interno dell’attributo href:

<a href="javascript:alert('Hello World');">click</a>

È poi possibile inserire snippets di codice all’interno del tag script:

<script type="text/javascript">
	alert("Ciao mondo!");
</script>  

Sicuramente, a meno che non sia un piccolo esercizio, il codice JavaScript va messo in file esterni:

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

La posizione migliore per chiarezza è all’interno del tag head, anche se alcuni tipi di js esterni è meglio metterli al fondo (prima della chiusura del tag body). Questo perchè lo scarico del documento viene bloccato se ci sono problemi nel caricare la risorsa esterna. Se ad esempio il server di Google Analytics rispondesse per qualche ragione con tempi di attesa molto lunghi, ritarderebbe lo scaricamento dell’intera pagina web. Quindi, in generale è buon uso copiare gli script in locale, e se sono esterni valutare bene il loro scopo.

Lo stile di programmazione cambia a seconda della posizione. O per lo meno la chiamata (l’invocazione) di ciò che ho programmato dovra aspettare che il documento sia stato scaricato.

Ecco un’altra risorsa che illustra in modo esauriente questa tematica.

Iniziare ad usare jQuery

Per prima cosa occorre scaricare il core di jQuery, salvarlo in locale (per esempio: root\scripts\) e aggiungere all’intenro dell tag head il codice per richiamare la libreria. Così:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dove inserire il link al core di jQuery? Qui sotto!</title>
<meta name="description" content="jQuery Tutorial" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>

Possiamo poi iniziare a scrivere il codice in un file esterno, che va linkato dentro il tag head, dopo il link al core:

<script type=”text/javascript” src=”scripts/mioScript.js”></script>

Il codice di jQuery deve sempre iniziare con il costrutto $(document).ready(), per segnalare alla pagina di eseguire il codice quando tutto il contenuto è caricato:

$(document).ready(function(){
	// il codice va qui
});

In jQuery sono molto importanti le parentesi, ogni blocco di istruzioni è racchiuso in parentesi tonde che a loro volta inglobano 2 parentesi graffe.
Nel codice sopra c’è una parentesi tonda che inizia dopo ready e viene chiusa alla fine, seguita dal ;).

Ogni metodo è seguito dalle parentesi tonde che in alcuni casi possono non contenere nulla (tecnicamente si dice che non contengono argomenti), in altri casi invece possono contenere alcuni parametri utili al funzionamento.

Mostra/Nascondi elementi: toggle

Vogliamo creare un menù in cui ci saimo dei semplici box da mostrare/nascondere al click sul titolo.
Ecco tutte le risorse per completare il progetto e una preview del risultato:

1. Impostiamo la struttura e applichiamo gli stili

Incominciamo con l’impostare il menù, con il nostro primo contenuto, cioè il titolo con l’anchor, seguito dal contenuto vero e proprio, cioè il titolo h3 e un paragrafo di testo:

<div id="menu">
	<h2 class="trigger">
    <a href="#">Prima Voce del Menù</a>
	</h2>	<div class="container">
	 <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur
    congue justo, at ultricies diam mollis non.
    vestibulum libero. Donec consequat elementum
    tincidunt sapien malesuada fringilla.</p>
	</div>
</div>

Naturalmente possiamo inserire quanti elementi ci occorrono, all’interno del menù.
Applichiamo gli stili al codice, per esempio così:

body {
 font:normal 12px/14px "Lucida Sans Unicode",
 "Lucida Grande", sans-serif;
}
#menu {
 width:351px;
 margin:0 auto;
}
h2 {
 width:298px;
 padding:0 0 0 53px;
 height:40px;
 margin:0;
}
h2 a {
 color:#FFF;
 text-decoration:none;
 font-size:14px;
 line-height:40px;
}
h2.trigger {
 background:url(../gfx/bg_h2.jpg) left top no-repeat;
}
h2.active {
 background:url(../gfx/bg_h2.jpg) left bottom no-repeat;
}
.container {
 padding:20px;
 background:#f3f3f3;
 border:1px solid #999;
 color:#333;
}
h3 {
 margin:0;
 padding:0;
}
.container h3 {
 padding:0 0 20px 0;
 font-size:13px;
}
.container p {
 margin:0;
 padding:0;
}

2. Attiviamo il toggle con jQuery

Attiviamo odesso l’effetto toggle con jQuery. Per prima cosa nascondiamo tutti gli elementi cui è applicata la classe container. Selezioniamo poi tutti i titoli che hanno la classe trigger, applichiamo loro lo stile css cursor:pointer e attiviamo il toggle che aggiunge e rimuove la classe active. Per ultimo, agganciamo al click sul titolo il toggle:

$(document).ready(function()

  $(".container").hide();

  $("h2.trigger").css("cursor","pointer").toggle(function(){
  	$(this).addClass("active");
  }, function () {
  $(this).removeClass("active");
  });

  $("h2.trigger").click(function(){
  $(this).next(".container").toggle();
  });

});

Come si può notare, otteniamo un mostra nascondi piuttosto scattoso. Per ottenere un effetto "a tendina", possiamo utilizzare slideToggle:

$("h2.trigger").click(function(){
	$(this).next(".container").slideToggle("slow");
});

e ottenere una animazione più fluida.

Articoli correlati:

1. jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!
2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
3. PHP CSS o jQuery: come evidenziare la pagina corrente nel menù di navigazione

Le Cheat Sheet sono uno strumento di riferimento che fornisce semplici, brevi istruzioni per realizzare un compito specifico.

Ecco quindi di seguito una selezione di riferimenti rapidi per numerosi linguaggi e tecnologie web, gratuiti e stampabili:

ASCII – Caratteri speciali

Character Entity References in HTML 4 and XHTML 1.0
HTML: Special Characters
Decimal ASCII code, Reference, URL code and HTML entity
HTML special character reference
HTML – Special Entity Codes
Using HTML Symbol Entities

Colori e web

Coloreminder.com; find colors palette easily and inspiration
RGB Hex Colour Chart
Web safe color chart
The browser safe colors

CSS

CSS2.1 Sheet
CSS3 Sheet
CSS Shorthand Guide
CSS Property Index
CSS Cheat Sheet (V2)
CSS Cheat Sheet: Inheritance, Cascade, Specificity
CSS Shorthand Cheat Sheet
CSS Properties and Values
Esempi di utilizzo di CSS
Will the browser apply the rule(s)?

CSS3

Tutto quello che c’è da sapere su CSS3

Google

Google Guide Quick Reference: Google Advanced Operators
The Google Cheat Sheets: Everything You Need To Know

Freelance

Esempio di contratto per prestazione occasionale
Pubblicare un sito web: verifiche e controlli preventivi

HTML 5

HTML 5 Visual Cheat Sheet (Reloaded)
HTML 5 Cheat Sheet

HTML/XHTML

HTML Cheat Sheet
HTML Codes Cheat Sheet
Character Entity References in HTML 4 and XHTML 1.0
HTML Cheat Sheet: quick reference guide
A Simple Guide To HTML
Browser Compatibility Master Table
HTML/XHTML in one page

jQuery

jQuery 1.4 Cheat Sheet
Woork: jQuery Visual Cheat Sheet

Lorem Ipsum generators

Render dummy text in English, French, German…

Mac OS

The OS X Keyboard

Programmi Adobe

Dreamweaver CS4: Cheat Sheet and shortcuts
Photoshop: Toolbox Reference
Flash CS4: PC Shortcuts

SEO

Web Developer’s SEO Cheat Sheet

Tipografia e Font

The New CSS Font-Family List
Approximate Conversion from Points to Pixels
PX to EM conversion made simple.
Compare screen type
16 Gorgeous Web Safe Fonts To Use With CSS
Top 10 (Web Safe) Blogging Fonts
How safe are Web-safe Font Families really? Font preview

UI and wireframing

Sketching & Wireframing kit free set
UI and wireframing tools
Browser Safe Area

Windows

Alt Key + Numeric Codes

WordPress

WordPress Cheat Sheet
WordPress Help Sheet in Italiano

Cheat Sheet per tutto, tutte insieme!

All cheat sheets, round-ups, quick reference cards.

Articoli correlati:

1. HTML5: tavola degli elementi interattiva!
2. SEO: guida pratica per ottimizzazione e posizionamento nei motori di ricerca
3. Eliminare il bordo tratteggiato attorno a un link mantenendo l’usabilità

Immagine di sfondo al 100%

Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno larghezza e altezza di 100%, il margin e il padding sono azzerati.
Con la proprietà overflow evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser. L’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.

Ecco il codice HTML…

<body>
	<img src="bg.jpg" id="sfondo" alt="" />
</body>

…a cui associamo queste riche di CSS:

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#sfondo{
	position:absolute;
	height:100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

Ecco come appare il nostro esempio.

Immagine di sfondo scalabile

Un limite dell’esempio precedente è che l’immagine, adattandosi alla dimensione della pagina, di fatto si distorce. Vediamo come poter aggirare il problema.
Inseriamo in pagina questo:

<div id="bg">
	<div>
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td><img alt="" src="bg.jpg" /></td>
			</tr>
		</table>
	</div>
</div>

Ed ecco come impostare il CSS relativo:

html, body, #bg, #bg table, #bg td {
	height:100%;
	overflow:hidden;
	width:100%;
}

#bg div {
	height:200%;
	left:0;
	position:absolute;
	top:0;
	width:200%;
}

#bg img {
	margin:0 auto;
	min-height:50%;
	min-width:50%;
}

#bg td {
	text-align:left;
	vertical-align:top;
}

Per vedere il risultato, ecco la pagina di esempio.

jQuery: Immagine di sfondo scalabile!

Ecco un aggiornamento al post con il quale segnalo un semplice plugin di jQuery che permette di aggiungere un’immagine di sfondo ridimensionata dinamicamente a una pagina qualsiasi. L’immagine verrà allunagata per adattarsi alla pagina, e verrà automaticamente ridimensionata quando l’utente cambia la dimensione della finestra.
Il plugin si chiama jQuery Backstretch, ed ecco come inserirlo:

<script type="text/javascript">
	$.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg");
</script>

Articoli correlati:

1. CSS: Bottoni espandibili con una sola immagine

Blocchi flottanti e altezza del contenitore: perchè ti comporti così?

Dobbiamo realizzare un layout che preveda una impaginazione a due colonne e un footer: assegnamo ai nostri blocchi la proprietà float: left, definiamo una larghezza per entrambi in modo tale che non superi la larghezza del blocco contenitore, inseriamo il footer, cui assegnamo la proprietà clear: both e se abbiamo fatto tutto senza errori dovremmo ottenere cioò che ci aspettiamo, cioè che l’altezza del contenitore si adatta a quella dei blocchi flottanti, e invece in tutti i browser (tranne che in IE6, che apparentemente, si comporta correttamente) l’altezza del contenitore non varia, in quanto i blocchi flottanti sono a tutti gli effetti sottratti dal flusso della pagina.
Questo comportamento, che potrebbe sembrare assurdo, ha in realtà una spiegazione: esso è necessario per gestire, per esempio, l’altezza di paragrafi contenenti immagini flottanti. Se l’altezza del paragrafo fosse determinata dall’altezza dell’immagine flottante, il testo del successivo paragrafo non potrebbe salire e disporsi attorno all’immagine stessa. Non è ancora chiaro? Ecco una pagina di esempio con il comportamento corretto e quello errato.

Ecco di seguito i fix per fare in modo che tutti i browser abbiano un comportamento uniforme:

1) Inserire un elemento vuoto con "clear: both"

Questa tecnica ristabilisce il normale flusso della pagina inserendo dopo gli elementi flottanti un elemento vuoto con proprietà clear: both. Il punto debole di questa tecnica è l’inserimento in pagina di un elemento con valore semantico pari a zero. Ecco un esempio:

<div id="contenitore">
  <div class="floatLeft">Contenuto del blocco</div>
  <div class="floatLeft">Contenuto del blocco</div>
    <div class="clearBoth"><!-- --></div>
</div>

Ed ecco come impostare correttamente i CSS:

#contenitore {
	width:700px;
  background:#C30;
}
.floatLeft {
  float:left;
  background:#0C0;
  color:#FFF;
  padding:20px;
  width:50px;
  margin:0 50px 0 0;
}
.clearBoth {
	clear:both;
}

2) Utilizzare la pseudoclasse :after

Utiliziamo la pseudoclasse :after per aggiungere un "punto invisibile" al termine del contenitore:

<style type="text/css">
   .clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
} 
.clearfix { /* for IE/Mac */
   display: inline-block;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
   zoom: 1;     /* triggers hasLayout */
   display: block;     /* resets display for IE/Win */
}  /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>  <![endif]-->

Ecco la pagina di esempio.

3) Utilizzare overflow:hidden

Ecco la soluzione più semplice:

Di seguito il codice css…

div.container {
   border: 1px solid #000000;
   overflow: hidden;
   width: 100%;
}

div.left {
   width: 45%;
   float: left;
}

div.right {
   width: 45%;
   float: right;
}

…ecco la pagina di esempio.

Articoli correlati:

1. IE6: Fix per i più comuni bug
2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
3. CSS Pseudo-classi: come usarle su IE6+!