Letture consigliate

Firefox 4 e HTML5: nuovi elementi supportati
Aloha Editor – The HTML5 Editor

Articoli correlati:

1. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
2. HTML5: tag nuovi e anteprima delle novità
3. Cosa è HTML5? Ecco una infografica che lo spiega!

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

HTTP headers: Cosa sono?

Quasi tutto quello che vedi nel browser viene trasmesso al computer tramite il protocollo HTTP. Ad esempio, quando hai aperto questa pagina , il browser probabilmente ha inviato più di 40 richieste HTTP e ha ricevuto risposte HTTP per ciascuna di esse. Gli HTTP headers sono la parte centrale di queste richieste e risposte HTTP, e portano informazioni riguardo il browser client, la pagina richiesta, il server e altro ancora.
Ecco un esempio pratico:

Quando si digita un URL nella barra degli indirizzi, il browser invia una richiesta HTTP che può apparire come segue:

GET /miosito/blog/titolo-del-mio-articolo-/ HTTP/1.1
  Host: net.tutsplus.com
  User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  Accept-Language: en-us,en;q=0.5
  Accept-Encoding: gzip,deflate
  Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
  Keep-Alive: 300
  Connection: keep-alive
  Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120
  Pragma: no-cache
  Cache-Control: no-cache

La prima linea è la "Request Line", che contiene alcune informazioni di base sulla richiesta. E il resto sono gli header HTTP. Dopo tale richiesta, il browser riceve una risposta HTTP che può apparire come segue:

HTTP/1.x 200 OK
Transfer-Encoding: chunked
Date: Sat, 28 Nov 2009 04:36:25 GMT
Server: LiteSpeed
Connection: close
X-Powered-By: W3 Total Cache/0.8Pragma: publicExpires: Sat, 28 Nov 2013 08:13:04 GMTEtag: "pub1259380237;gz"Cache-Control: max-age=3600, publicContent-Type: text/html; charset=UTF-8Last-Modified: Sat, 05 Aug 2010 03:50:37 GMTX-Pingback: http://www.paitadesign.com/blog/xmlrpc.phpContent-Encoding: gzipVary: Accept-Encoding, Cookie, User-Agent

<!-- ... contenuto html ... -->

La prima linea è la "Status Line", seguita dagli "header HTTP", fino alla riga vuota.
Dopo di che, inizia il "contenuto" vero e proprio della pagina (in questo caso, un output HTML).
Quando si guarda il codice sorgente di una pagina web nel browser, si vedrà solo la parte di codice HTML e non le intestazioni HTTP, anche se effettivamente sono state trasmesse così come le vedete sopra.
Queste richieste HTTP sono state inviate e ricevute anche per altre cose, come immagini, file CSS e JavaScript, ecc…
Questo è il motivo per cui poco prima abbiamo accennato al fatto che il browser ha inviato almeno 40 o più richieste HTTP quando è stata caricata questa pagina.

Non ci interessa qui approfondire nel dettaglio gli HTTP headers.

HTTP status code: comprenderli e gestirli

I server HTTP rispondono utilizzando linee di status che informano il client sull’esito della richiesta.
Gli status contengono 3 campi:

1. versione del protocollo HTTP
2. status code
3. descrizione

Lo status code è dato da un numero a 3 cifre con i seguenti significati:
1XX consiste solo nella status line e in headers opzionali
2XX l’azione richiesta ha avuto successo: la pagina è presente e il server ne restituisce il contenuto
3XX richiesta di reindirizzamento
4XX è un errore lato client e contiene sintassi errata
5XX è un errore lato server e il server non ha potuto soddisfare la richiesta

SEO e Status code HTTP

Dal punto di vista dell’ottimizzazione SEO gli status code più importanti sono:

• 200 (OK) serve per indicare che la pagina esiste e ne restituisce successvamente il contenuto;
• 204 (No Content) indica che la richiesta è stata processata ma non è stato reperito alcun contenuto da inviare;
• 301 (Moved Permanently) indica che il file specificato è stato permanentemente spostato in un’altra locazione (è necessario specificare la nuova locazione permanente). Da utilizzare ai fini SEO nello spostamento di URL permanentemente.
• 403 (Forbidden) indica che la richiesta non è autorizzata, spesso causata dal settaggio dei permessi sul web server o dall’accesso non consentito ad un area coperta da user name e password;
• 404 (Not Found) serve ad indicare che la risorsa all’URL richiesta non è stata trovata. Da utilizzare ai fini SEO e di usabilità, impostando nel web server un Error Document con destinazione una pagina HTML con un messaggio di errore per l’utente;
• 410 (Gone) rappresenta la risposta in caso di risorsa non più disponibile;
• 500 (Internal Server Error) indica che il server è incorso in un errore inaspettato che non ha permesso di completare la richiesta;
• 503 (Service Unavailable) consente al bot di capire che il sito è temporaneamente fuori servizio. Importante utilizzare lo status 503 qualora il sito web non sia disponibile per un periodo superiore alle 5 ore per motivi tecnici.

Per impostare il redirect delle pagine di errore su pagine SEO freindly è possibile settare il file htaccess per i server Apache.

Articoli correlati:

1. WAMP e SSI: come aggiungere il supporto Server Side Include

Questo post è una traduzione autorizzata dall’autore, Roger Johansson, dell’articolo Bring on the tables, in cui si parla di come rendere l’utilizzo delle tabelle accessibile e corretto.
Secondo l’autore, bisogna evitare il più possibile l’utilizzo delle tabelle per elementi di layout, ma per mostrare dei dati tabulari, cioè informazioni presentate logicamente in righe e colonne, le tabelle sono lo strumento adatto!. Le tabelle mettono a disposizione molti più tag rispetto ai canonici td e tr, specialmente se si vuole rendere il contenuto più accesibile (e semantico!).

Ecco, per prima cosa, un po’ di informazioni generali.
L’affermazione "evitare l’uso di tabelle per il layout" si trova in "Introduzione alle tabelle" nelle specifiche HTML 4.01:

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

”

Direi che il testo è abbastanza chiaro, anche se la parola usata è "should", non "must": le specifiche tecniche consentono una certa flessibilità.

Ma questo articolo non vuole parlare della questione se utilizzare le tabelle per il layout o no. Tratta dell’utilizzo delle tabelle per la loro funzione originaria: la marcatura di dati tabulari.

Quando le tabelle vengono utilizzate per contrassegnare i dati effettivi, non sono solo una griglia per il layout. Le persone senza problemi di vista possono farsi un’idea del rapporto che c’è tra l’intestazione e le celle di dati osservando il layout e la presentazione visiva della tabella. Al contrario, le persone non vedenti o ipovedenti non possono farlo. Affinchè una tabella sia accessibile a persone che usano uno screen reader o qualche altro user-agent non-visivo, bisogna comunicare all’user-agent che rapporto hanno tra loro le informazioni che essa contiene.

Fortunatamente, l’HTML fornisce in abbondanza elementi e attributi per questo scopo. Meno fortunatamente, può essere piuttosto difficile capire come usare alcune di queste caratteristiche di accessibilità. In questo articolo cercherò di spiegare come utilizzarne la maggior parte.

Intestazione della tabella: il tag th

Cominciamo con una tabella molto semplice, che ha solo una singola riga di intestazioni, ognuna delle quali definisce i dati in una colonna.
Ecco come appare il codice contrassegnato alla vecchia maniera, con solo le righe e le celle:

<table>
  <tr>
    <td>Compagnia</td>
    <td>Dipendenti</td>
    <td>Fondazione</td>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Senza bordi o stili, nella maggior parte dei browser la tabella sarà più o meno così:

Per una persona senza problemi di vista, è facile e veloce fare il collegamento tra le intestazioni e le celle di dati che esse descrivono. Chi utilizza uno screen reader, d’altra parte, avrebbe sentito qualcosa del tipo "Compagnia Dipendenti ACME Fondata Inc 1000 1947 2000 1073 XYZ Corp". Non è molto facile trovare un senso in queste parole!!!

Il primo – e più semplice – passo per rendere più accessibile questa tabella, è quello di marcare le intestazioni in modo corretto.
E’ molto facile: basta utilizzare l’elemento th (Table Header: Intestazione di Tabella) invece di td (Table Data: Dati tabellari) per le celle di intestazione:

<table>
  <tr>
    <th>Compagnia</th>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Per questa semplice tabella, aver inserito le intestazioni è sufficiente per permettere a uno screen reader di informare l’utente su quale cella di intestazione dei dati è legata a quale cella. Un lettore di schermo potrebbe dire "Azienda: ACME Inc. dipendenti: 1000. Fondazione: 1947", e così via per ogni riga. Molto meglio, no?

Inserire le didascalie: caption

L’elemento caption può essere utilizzato per fornire una breve descrizione della tabella, in modo molto simile a alla funzione che ha una didascalia per l’immagine.
Come impostazione predefinita, la maggior parte dei browser rendono il caption in posizione centrata sopra la tabella.
La proprietà CSS caption-side può essere utilizzata per modificarlo, se necessario. La maggior parte dei browser visualizzerà la didascalia al di sopra (top) o sotto (bottom) il contenuto della tabella, mentre alcuni accettano anche i valori sinistra o destra. Vi lascio sperimentare!

Quando viene utilizzato, il caption deve comparire per primo subito dopo l’apertura del tag table, per esempio, così:

<table>
  <caption>Tabella 1: dati della Compagnia</caption>
  <tr>
    <th>Compagnia</th>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

È possibile utilizzare i CSS per lo stile della didascalia, se lo si desidera. Tuttavia, bisogna essere consapevoli del fatto che potrebbe essere necessario usare alcuni trick per mantenere la coerenza di layout su tutti i browser. Vi lascio esercitare anche su questo!

L’attributo summary: come spiegare il contenuto della tabella!

Una persona vedente può facilmente decidere se studiare una tabella in dettaglio. Un rapido sguardo ci dirà quanto è grande la tabella, e più o meno ciò che contiene.
Una persona che utilizza uno screen reader invece non può farlo, a meno che il webdesigner non aggiunga alla tabella un attributo che sintetizzi il contenuto. In questo modo è possibile fornire una descrizione più dettagliata della tabella rispetto a quanto faccia l’elemento caption.

Il contenuto dell’attributo summary non viene reso visibile dai browser visuali: in questo modo è possibile scrivere una descrizione abbastanza lunga, per fare in modo che chi ascolta capisca a pieno di cosa parla la tabella. Non bisogna però esagerare: utilizziamo l’attributo di sintesi solo quando è necessario, cioè per più tabelle complesse, per cui una sintesi sarà più facile, per chi utilizza un lettore di schermo, comprendere il contenuto della tabella. Ecco la tabella di prima con il tag summary:

<table summary="Il numero di dipendenti e l'anno di
 fondazione di alcune compagnie immaginarie.">
  <caption>Tabella 1: dati della Compagnia</caption>
  <tr>
    <th>Compagnia</th>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Come accorciare le intestazioni? Con l’attributo abbr!

Quando uno screen reader incontra una tabella, può annunciare l’intestazione associata (o header) prima di ogni cella di dati.
Se la tabella dispone di intestazioni lunghe però, sentendole ripetere più e più volte, può risultare noioso per chi ascolta. Utilizzando l’attributo abbr per fornire una versione abbreviata di eventuali intestazioni lunghe, potete dare agli screen reader qualcosa che possono utilizzare al posto del testo nella stessa intestazione. L’uso dell’attributo abbr è opzionale, e la maggior parte delle volte gli header saranno (o meglio, dovrebbero essere!) comunque piuttosto brevi.

La tabella di esempio è stata leggermente modificata, per rendere le intestazioni più lunghe. Vediamo come viene utilizzato l’attributo abbr:

<table summary="Il numero di dipendenti e l'anno di
 fondazione di alcune compagnie immaginarie.">
<caption>Table 1: Compagnia data</caption>
  <tr>
    <th abbr="Compagnia">Compagnia Name</th>
    <th abbr="Impiegati">Numero di Impiegati</th>
    <th abbr="Fondazione">Anno di fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Uno screen reader leggerà quindi leggere le intestazioni (con la descrizione lunga) per la prima riga dei dati, per poi utilizzare l’abbreviazione per le righe rimanenti.

Considerando quanto difficile possa essere l’inserimento di tabelle nei layout web, direi che è più comune l’esigenza contraria: per rendere le intestazioni più brevi possibile, o anche abbreviate, è meglio utilizzare l’attributo title o l’elemento abbr per fornire una spiegazione più lunga.

Come collegare le intestazioni con i dati?
Con gli attributi scope, ID e headers

Molte tabelle sono più complesse rispetto alla tabella di esempio che abbiamo visto finora. La renderemo un po’ più complessa, eliminando l’intestazione "Compagnia" e modificando le celle di dati nella prima colonna, e nelle celle dell’intestazione

<table summary="Il numero di dipendenti e l'anno di
 fondazione di alcune compagnie immaginarie.">
  <caption>
  Table 1: Compagnia data
  </caption>
  <tr>
    <td></td>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <th>ACME Inc</th>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <th>XYZ Corp</th>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

In questa tabella, ogni cella di dati ha due intestazioni. Il metodo più semplice, cioè per un markup più "saggio", per fare in modo che un browser non-visivo possa dare un senso a questa tabella, è quello di aggiungere un attributo scope a tutte le celle di intestazione:

<table summary="Il numero di dipendenti e l'anno di
fondazione di alcune compagnie immaginarie.">
  <caption>
  Table 1: Compagnia data
  </caption>
  <tr>
    <td></td>
    <th scope="col">Dipendenti</th>
    <th scope="col">Fondazione</th>
  </tr>
  <tr>
    <th scope="row">ACME Inc</th>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <th scope="row">XYZ Corp</th>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

L’attributo scope definisce se una cella di intestazione fornisce informazioni di intestazione per una colonna o una riga:

• col: informazioni di intestazione per la colonna in cui si trova
• row: informazioni di intestazione per la riga in cui si trova

L’aggiunta di un attributo scope con il valore col alle intestazioni nella prima riga dichiara che sono le intestazioni per le celle di dati sotto di esse.
Allo stessa maniera, dando uno scope con valore row alle intestazioni che iniziano ogni riga, le rendiamo intestazioni per tutte le celle di dati che si trovano alla loro destra.

L’attributo scope può assumere altri due valori:

• colgroup: informazioni di intestazione per il resto del gruppo di colonne che la contiene
• rowgroup: informazioni di intestazione per il resto del gruppo di righe che la contiene

Un gruppo di colonne è definito dall’ elemento colgroup. Ragruppamenti di rige sono definiti dagli elementi thead , tfoot e tbody.
Ma di quest’ultimi torneremo a parlare tra poco.

Che cosa succede se si desidera: sia mantenere l’intestazione "Compagnia", e che i nomi delle società siano le intestazioni di riga?
Ciò farebbe sì che le celle che contengono i nomi delle società debbano fornire sia le informazioni di intestazione, sia i dati. In questo caso, td dovrebbe essere usato assieme all’attributo scope:

<table summary="Il numero di dipendenti e l'anno di
fondazione di alcune compagnie immaginarie.">
  <caption>
  Table 1: Compagnia data
  </caption>
  <tr>
    <th scope="col">Compagnia</th>
    <th scope="col">Dipendenti</th>
    <th scope="col">Fondazione</th>
  </tr>
  <tr>
    <td scope="row">ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td scope="row">XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

In questo modo, nei browser visuali non verranno visualizzati i nomi delle società come intestazioni di default, quindi è necessario un po’ di CSS per rimediare.
Per questo esempio, ho usato il seguente codice CSS:

td[scope] {
	font-weight:bold;
}

Si noti che questa regola utilizza un selettore di attributo, che Internet Explorer non supporta. Una soluzione sarebbe aggiungere una classe a qualsiasi celle di dati da stilare come intestazione.

Un’altra tecnica per collegare le celle di una tabella con l’intestazione cui fanno riferimento comporta il dover dare a ogni intestazione un ID univoco.
Va poi aggiunto ad ogni cella un attributo headers. Questo attributo contiene un elenco, separato da spazi, degli id di ogni cella di intestazione che si applica a quella cella di dati. Questa tecnica è più complicata, e deve essere utilizzata solo quando le celle di dati che devono essere collegate a più di due celle di intestazione e l’attributo scope è insufficiente, come può accadere in una tabella molto complessa o irregolare.

Per illustrare questo caso, ho cambiato la tabella in modo tale da mostrare, per ogni socità, il numero di dipendenti di ciascun sesso:

<table class="extbl" summary="Il numero di dipendenti e l'anno di
fondazione di alcune compagnie immaginarie.">
  <caption>
  Tabella 1: dati della Compagnia
  </caption>
  <tr>
    <td rowspan="2"></td>
    <th id="employees" colspan="2">Dipendenti</th>
    <th id="founded" rowspan="2">Fondazione</th>
  </tr>
  <tr>
    <th id="men">Uomini</th>
    <th id="women">Donne</th>
  </tr>
  <tr>
    <th id="acme">ACME Inc</th>
    <td headers="acme employees men">700</td>
    <td headers="acme employees women">300</td>
    <td headers="acme founded">1947</td>
  </tr>
  <tr>
    <th id="xyz">XYZ Corp</th>
    <td headers="xyz employees men">1200</td>
    <td headers="xyz employees women">800</td>
    <td headers="xyz founded">1973</td>
  </tr>
</table>

Come si può ben vedere, questo metodo diventa rapidamente molto complicato, quindi se è possibile, è meglio utilizzare l’attributo scope.

Raggruppare celle con rowspan e colspan

Nel vecchio approccio web (layout con tabelle), gli attributi rowspan e colspan erano spesso usati per unire le celle delle tabelle in diverse righe o colonne, al fine di metterci dentro, in fila una dopo l’altra, tutte le immagini ritagliate. Tali attributi sopravvivono ancora, dato che non vi è alcun modo per usare i CSS per specificare lo "spanning".
Se ci pensate bene, è abbastanza logico: le fusioni di righe e di colonne sono parte della struttura di una tabella, non sono la sua presentazione!

Colonne e gruppi di colonne: col e colgroup

L’HTML mette a disposizione gli elementi colgroup e col per raggruppare colonne correlate . Questo permette (in alcuni browser) l’uso di CSS per dare alle colonne dello stile in modo indipendente. Per fare gruppi di colonne, può essere utilizzato anche l’attributo scope, per specificare che una cella contiene informazioni di intestazione per il resto del gruppo di colonne che la contiene.

Questo è tutto ciò che diremo in questo articolo su colonne e gruppi di colonne.
Per informazioni più dettagliate, date un’occhiata ai collegamenti nella sezione "What I didn’t tell you" dell’articolo originale, oppure in fondo a questa pagina.

Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>

Le righe della tabella possono essere raggruppate in una sezione intestazione di tabella racchiusa nei tag thead, in una sezione piè pagina nel tag tfoot, e in uno o più sezioni corpo della tabella mediante il tag tbody. Ogni gruppo di righe deve contenere una o più righe di tabella.

Se una tabella contiene una sezione di testa thead, quest’ultima deve comparire prima del piè pagina e delle sezioni del corpo tabellare.
La sezione tfoot deve sempre comparire prima del (o dei) tag tbody.
Se nella tabella non è usata nè thead nè tfoot, l’elemento tbody non è richiesto (ma non vietato: potete aggiungerlo, se volete).

La struttura di una tabella che contiene i gruppi di righe appare così:

<table>
  <thead>
    <tr></tr>
  … altre righe per la table-head
  </thead>
  <tfoot>
    <tr></tr>
  … altre righe per la table-foot
  </tfoot>
  <tbody>
    <tr></tr>
  … altre righe per la table-body
  </tbody>
  <tbody>
    <tr></tr>
  … altre righe per la seconda table-body
  </tbody>
  … altre righe per le altre eventuali table-body
</table>

Raggruppare le righe è essere utile per diversi motivi:

1. Si può facilmente applicare lo stile al tfoot, thead, e alle sezioni tbody di una tabella in modo indipendente l’uno dall’altro, senza dover aggiungere classi.
2. Quando si stampano tabelle molto lunghe, alcuni browser (come quelli basati su Mozilla) ripeteranno le informazioni dell’intestazione e del piè pagina in ogni pagina stampata, rendendo più facile leggere la tabella stampata.
3. Separare l’intestazione e il piè pagina dal corpo vero e proprio permette anche ad alcuni browser di scorrere solo il corpo della tabella.

Solo per le tabelle di dati

Tutto quanto fin qui descritto riguarda l’uso di tabelle HTML per strutturare e presentare i dati. Se si utilizzano tabelle per il layout, nessuna delle tecniche qui descritte qui dovrebbero essere usate. Nessun attributo summary, nessuna intestazione, né caption, niente. Solo una semplice, tabella con layout vecchio stile, composta nientaltro che dai tag table, tr e td.
Altrimenti si rischia di confondere ancora di più gli utenti che utilizzano screen-reader.

I vantaggi

Può sembrare un sacco di lavoro per creare tabelle di dati accessibili in HTML. Per le tabelle complesse, lo è. A volte al punto in cui diventa quasi impossibile scriverle manualmente.
Per le tabelle semplici, però, utilizzare celle di intestazione con un attributo scope è veloce e facile.

E ‘ovvio che le persone che usano screen-reader o altra tecnologia assistiva, trovano beneficio dalle tabelle che utilizzano le funzioni di accessibilità disponibili. Cercare di dare un senso a un grande e complessa tabella per chi ascolta può ancora essere molto difficile, quindi, se possibile, cerchiamo di semplificare la tabella.

Meno è ovvio che traggono beneficio anche i progettisti e gli utilizzatori di browser grafici: una tabella accessibile è ricca di ganci strutturali da applicare ai CSS, e uno stile scritto bene può rendere la tavola più fruibile per tutti.

Quello che non vi ho detto

Ma ci sarebbe molto altro da dire sulle tabelle di dati che qui non ho citato. Per esempio, non ho menzionato per niente (fino ad ora) l’attributo axis, e non ho descriitto nel dettaglio gli elementi colgroup e col. Non ho nemmeno accennato alla formattazione e allo stile, o ai tipi di bordo. Inoltre, manca un esempio di una tabella estremamente complessa.

Per quelli di voi che cercano informazioni più dettagliate, ecco dei link ad alcuni ulteriori approfondimenti:

• Tables in HTML documents
• CSS formatting of tables
• Techniques for Accessible HTML Tables
• Building accessible websites: Tables and frames
• A table, s’il vous plaît

Articoli correlati:

1. Tag HTML: capire la differenza tra elementi block e inline

Il grafico tratteggia le principali novità e tutte le caratteristiche del nuovo standard, mettendo anche a confronto i maggiori browser per verificare quali tra essi sia già pronti per affrontare la rivoluzione.

Articoli correlati:

1. HTML5: tag nuovi e anteprima delle novità
2. HTML5: tavola degli elementi interattiva!
3. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!

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à

Di seguito sono riportati alcuni piccoli trucchi e consigli molto utili, raccolti da varie fonti in Internet, che permettono di migliorare l’interazione dell’utente e di risolvere alcune problematiche in modo semplice ed efficace, anche per i webdesigner meno esperti e gli sviluppatori principianti. Dal momento che questi esempi sono incentrati su jQuery, il codice proposto non entra nei dettagli dei CSS.

CSS diversi per browser diversi

Ecco come dichiarare codice JavaScript per browser specifici:

jQuery.each(jQuery.browser, function(i) {
   if($.browser.msie && $.browser.version <= 6 ){
     // fai questo e quello
   }
});

//Target Safari
  if( $.browser.safari )
//Target IE6+
  if ($.browser.msie && $.browser.version > 6 )
//Target IE6 e precedenti
  if ($.browser.msie && $.browser.version <= 6 )
//Target Firefox 2 e successivi
  if ($.browser.mozilla && $.browser.version >= "1.8" )

Disabilitare il tasto destro del mouse dal menu contestuale

Ci sono molti frammenti JavaScript disponibili per disattivare il tasto destro del mouse dal menu contestuale, ma jQuery rende le cose molto più facili:

$(document).bind("contextmenu",function(e){
	return false;
 });

Verifichiamo che un elemento esista in jQuery…

if ($('#id').length) {
 // fai questo e quello
 }

…per caricare un plugin solo quando serve!

Quando il lavoro su un determinato sito cresce, gli script esterni iniziano ad accumularsi nella sezione <head> del documento, e alla fine ciò impatta sulle prestazioni.
Grazie al metodo $.getScript, ecco una soluzione elegante a questo problema.

if ($('a.email').length > 0){
	$.getScript('js/jquery.mailto.js',function(){
		$('a.email').mailto();
	});
}

Eseguire solo ciò che serve veramente

Ogni programmatore/webdesigner per comodità di solito scrive tutto il codice JS per il sito web in un unico file.
jQuery però impiega tempo per cercare gli elementi nella pagina, anche se non esistono, e questo rallenta le cose. Ci sono due modi con cui è possibile aggirare questa situazione terribile. Quella più semplice è quello mettere un ID al tag body (il nome della pagina, ad esempio) ed eseguire il codice necessario per quell’unica pagina:

$(document).ready (function () {
	if ('body').hasClass ('home') {
  // codice per home page}else if ('body').hasClass ('blog') {
  // codice per la pagina blog
}
// e così via
});

Modalità non conflittuale

Per evitare conflitti quando si utilizzano più framework in un sito web, è possibile utilizzare questo Metodo jQuery, e assegnare un nome diverso alla variabile invece che il segno di dollaro. Ecco tutte le informazioni per utilizzare jQuery con altre librerie.

var $j = jQuery.noConflict();
$j('#mioDiv').hide();

Aggiungere un’icona per link diversi

Questo trucco è molto semplice e utile per l’usabilità. Se i link portano a siti Web esterni, vogliamo che una immagine venga visualizzata accanto al link, così come se sono presenti link a documenti .pdf, o .doc. Dopo aver definito delle regole CSS per ogni tipo di collegamento, associamole ai link corrispondenti:

// Link a pdf
		$("a[href$='.pdf']").addClass("pdf");
// Link a documenti (doc, rtf, txt)
		$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
// Link ad archivi compressi (zip, rar)
		$("a[href$='.zip'], a[href$='.rar']").addClass("zip");
// Email link
		$("a[href^='mailto:']").addClass("email");
//Aggiungiamo uno stile per i link esterni:
		$('a').filter(function() {
//Compariamo l'host name nell'anchor tag con 's host name location
		return this.hostname && this.hostname !== location.hostname;
    }).addClass("external");
//Possimao anche aggiungere l'attributo _blank al terget dei link esterni:
/*
	$('a').filter(function() {
  //Compariamo l'host name nell'anchor tag con 's host name location
  	return this.hostname && this.hostname !== location.hostname;
    }).addClass("external").attr("target", "_blank");
*/

Applicare un effetto hover a qualsiasi elemento

$('#hover-demo2 p').hover(function() {
  $(this).addClass('pretty-hover');
}, function() {
  $(this).removeClass('pretty-hover');
});

Rendere cliccabile qualsiasi elemento

Vogliamo rendere cliccabile qualsiasi elemento (attenzione: il nostro HTML non sarà più validato!):

<div class="clickable" url="http://google.com">
	Contenuto del div
</div>

Ecco come fare:

$("div.clickable").click(
function()
	{
  window.location = $(this).attr("url");
});

Imparare ad usare correttamente le animazioni

Il metodo animate() prende semplicemente qualsiasi stile CSS e lo fa passare in modo fluido da un valore all’altro. Quindi, è possibile modificare width, height, opacity, background-color, top, left, margin, color, font-size tutto quello che accetta un valore numerico. Ecco per esempio come è facile animare tutte le voci di un menù facendole crescere a 100 pixel di altezza quando si passa sopra il mouse:

$('#miaLista li').mouseover(function() {
		$(this).animate({"height": 100}, "slow");
});

A differenza di altre funzioni jQuery, le animazioni sono automaticamente eseguite in coda, quindi se si desidera eseguire una seconda animazione una volta che la prima è finita, basta chiamare il metodo animate() per due volte, senza funzioni di callback ulteriori:

$('#mioBox').mouseover(function() {
		$(this).animate({ "width": 200 }, "slow");
   $(this).animate({"height": 200}, "slow");
});

Se si desidera che le animazioni avvengano in concomitanza, basta mettere entrambi gli stili nei parametri di una singola chiamata, così:

$('#mioBox').mouseover(function() {
	$(this).animate({ "width": 200, "height": 200 }, "slow");
});

È possibile animare qualsiasi proprietà che sia numerica. È però possibile scaricare un plugin per animare le proprietà che non sono numeriche, come i colori.

Shorthand per l’evento ready

Ecco un piccolo trucco che permette di salvare alcuni caratteri utilizzando una scorciatoia per la $(document).ready(function(){}).
Invece di:

$(document).ready(function (){
	// codice da eseguire
});

…possiamo scrivere:

$(function (){
	// codice da eseguire
});

Scorrere fino alla parte superiore di una pagina web

Per tornare a inizio pagina in modo fluido utilizzando le animazioni di jQuery, inseriamo questo codice HTML in pagina:

<a href="#top">Torna a inizio pagina</a>

…e settiamo l’animazione così:

$('a[href=#top]').click(function(){
	$('html, body').animate({scrollTop:0}, 'slow');
	return false;
});

…oppure possiamo realizzare lo stesso scroll animato con jQuery tramite una funzione a cui passiamo come parametro l’ id del selettore desiderato:

function scrollWin(anc){
	target = $(anc);
	$('html, body').animate({
		scrollTop: target.offset().top
	}, 1000);
}
$(".scroller").click(function() {
    scrollWin("#pippo");
});

Come personalizzare le liste

Aggiungiamo a ogni list-item ,per esempio, l’elemento “»":

$("ul").addClass("Replaced");
$("ul > li").prepend("»");

Impostiamo i CSS in modo tale da nascondere i bullet-point preimpostati:

ul.Replaced {
 list-style : none;
}

Cambiare i fogli di stile

Vogliamo aggiungere uno “style-switch” in modo che i navigatori del nostro sito possano scegliere, per esempio, tra uno stile ad alto contrasto e uno stile di stampa? E’ molto facile da fare: quello che ci serve è una serie di link con ID univoco:

<h1>Scegli uno stile:</h1>
	<ul>
  <li><a id="StyleContrast" href="#">Contrast</a></li>
  <li><a id="StylePrint" href="#">Print</a></li>
  <li><a id="StyleNormal" href="#">Normal</a></li>
</ul>

Ecco come impostare i comandi JavaScript:

$("#StyleContrast").click(function() {
	$("link[media='screen']").attr("href", "Contrast.css");
  });
$("#StylePrint").click(function() {
	$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
	$("link[@media='screen']").attr("href", "Normal.css");
});

Campi di ricerca personalizzati

Un piccolo script, che popola un campo di testo di un modulo con un testo predefinito come descrizione.
Questo testo sparisce se l’input è in focus, e ricompare se il focus è perso senza alcun input:

<form action="#" method="post">
	<input id="SearchText" name="text" />
  <button>Cerca</button>
</form>

Dato che questo compito può essere usato in diverse situazioni, è una buona idea scrivere una funzione riutilizzabile. Il primo parametro è un selettore (nel nostro caso “#Testo di ricerca”, ma qualcosa come “input[@name=search]” potrebbe andare bene), il secondo parametro è il nuovo valore predefinito di tale elemento di input (ad esempio “Inserisci i termini di ricerca qui ..”).

function populateElement(selector, defvalue) {
 $(selector).each(function() {
         if($.trim(this.value) == "") {
                     this.value = defvalue;
         }
})
 $(selector).focus(function() {
        if(this.value == defvalue) {
                    this.value = "";
         }
});
$(selector).blur(function() {
        if($.trim(this.value) == "") {
        this.value = defvalue;
        }
      });
}

Nel nostro caso particolare il codice JavaScript potrebbe apparire così:

populateElement('#SearchText', 'Inserisci la parola che cerchi..');

Prevenire il comportamento di default

Supponiamo di avere una pagina molto lunga, e di avere un link simile a quello qui sotto che viene utilizzato per scopi diversi da un collegamento ipertestuale. Se si fa clic su di esso, ci porterà in cima alla pagina. La ragione di questo comportamento è la presenza del simbolo #.

<a href="#" id="chiudi"></a>

Per risolvere questo problema, è necessario annullare il comportamento predefinito, in questo modo:

$('#chiudi).click(function(e){
     e.preventDefault();
}); 

/* oppure */

$('#chiudi).click(function(){
    return false;
});

Font resizing

Questo è una delle più usate funzionalità in una pagina web, cioè la possibilità di permettere all’utente aumentare/diminuire la dimensione del carattere.
Siamo in grado di specificare l’ID, le classi o gli elementi HTML di cui si desidera regolare il carattere tramite un array.

$(document).ready(function(){
	 //Inseriamo un un array gli ID, classi e tag di cui vogliamo ridimensionare i font
  //Mettiamo html or body se vogliamo rendere tutti i caratteri ridimensionabili:
  var section = new Array('span','.section2');
  section = section.join(',');

	 //Resettiamo il font-size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
  $(section).css('font-size', originalFontSize);
  });

  //Aumentiamo il font-size
  $(".increaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $(section).css('font-size', newFontSize);
  return false;
  });

  //Diminuiamo il font-size
  $(".decreaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $(section).css('font-size', newFontSize);
  return false;
  });
  });

Impostiamo adesso un pannello per passare da un font-size a un altro:

<div>
		<a class="increaseFont">+</a> |
		<a class="decreaseFont">-</a> |
		<a class="resetFont">=</a>
</div>
	<span>Questo font può cambiare di dimensione</span>
  <div class="section1">Questa sezione non cambia il font!</div>
  <div class="section2">Questa invece sì!</div>

Rimuovere una parola

Ecco il modo più semplice: usiamo le espressioni regolari:

var el = $('#id');el.html(el.html().replace(/parolaDaRimuovere+parolaDaRimuovere/ig, ""));

Ottimizziamo l’uso dei Plugin

I plugin di jQuery devono essere inclusi nella pagina principale dopo il core jquery.js, così:

<script type="text/javascript" src="jquery-core.js"></script>
<script type="text/javascript" src="jquery.plugin-1.0.js"></script>
<script type="text/javascript" src="jquery.plugin-2.4.js"></script>

Il metodo migliore però è quello di copiare tutti i file JavaScript in un singolo file e poi comprimerli con YUI e impacchettarli.

Aggiungere / inserire elementi HTML dentro un elemento

Il metodo .append() inserisce il contenuto specificato come l’ultimo figlio di ciascun elemento della collezione jQuery (per inserirlo come primo figlio, usare. .prepend()).

I metodi .append() e .appendTo() svolgono lo stesso compito. La principale differenza è nella sintassi, in particolare, nel posizionamento dei contenuti e di destinazione.
Con append(), l’espressione che precede il metodo di selezione è il contenitore in cui è inserito il contenuto. Con .appendTo(), al contrario, il contenuto precede il metodo, sia come espressione di selezione o di markup creati al volo, ed è inserita nel contenitore di destinazione. Ecco cosa scrivere:

$('#questoDiv').append("<b>testo inserito</b>");

..che equivale a:

$('<p>testo inserito</p>').appendTo('#questoDiv');

Aggiungere / inserire elementi HTML dopo un elemento

Dobbiamo usare .insertAfter(), oppure .after()

Rimpiazzare un <div> con jQuery

$('#questoDiv').replaceWith('<div>Altro div</div>');

Rimuoviamo un elemento dopo gli effetti Fadeout e Slideup

Combiniamo più effetti in jQuery per animare e rimuovere un elemento dal DOM:

$("#myButton").click(function() {
        $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
            $(this).slideUp("slow", function() { //slide up
            $(this).remove(); //e rimozione dal DOM
        });
});
});

…alla fine: Javascript Error Checker!

Adesso che abbiamo tutti questi script da utilizzare nel nostro sito, come testarli? Il debug di script javascript possono essere molto lunghi in termini di tempo. Così, se non riusciamo a risalire a che cosa sta causando gli errori, è possibile utilizzare questo strumento online gratuito: JSLint

Articoli correlati:

1. jQuery: imparare le basi con toggle. Mostra e nascondi con stile!
2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

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!

Server Side Include: cosa sono

I comandi Server Side Include sono dei semplici script utilizzati nelle pagine HTML e permettono di includere il contenuto (che può essere dinamico) di un documento in un altro, rendendo più facile la manutenzione del sito.
Il comando SSI "include" è probabilmente il comando più usato.
Il file o il parametro virtuale specifica il file (pagina HTML, file di testo, script, ecc.) da includere. Di solito, i server web non supportano SSI, tranne pochi, tra cui i Apache. Con Apache il file che include deve avere estensione shtml (cioèserver-parsed HTML, o Secure HTML), .shtm, o .stm, mentre il file che viene incluso può avere qualsiasi estensione. Se non viene attribuita al file che include un’estensione "shtml", l’inclusione non avviene. Solo i file con queste estensioni vengono infatti processati per trovare ed effettuare le direttive di inclusione. I files "html" e "htm" invece vengono "serviti" al client così come sono, senza essere processati, dal momento che Apache in questo modo sa a priori che non contengono inclusioni. Quando un file SSI viene analizzato (parsing) nel server, il server prende l’intero contenuto del file e lo inserisce nella pagina, sostituendo il codice incluso:

<!--#include file="mioFile.html" -->  

Come aggiungere il supporto SSI in Wamp

Ecco come procedere:

1. Cercare la cartella C:\wamp\bin\apache\Apache2.2.11\conf
2. Aprire il file http.conf
3. Cercare

   <IfModule mime_module>...</IfModule>

   e aggiungervi il seguente codice:

   AddType text/html .shtml
Options +Includes
AddOutputFilter INCLUDES .shtml

4. poi trovare Options Indexes FollowSymLinks e sostituirlo con:

   Options +Indexes +FollowSymLinks +Includes

5. Riavviare tutti i servizi.

Articoli correlati:

1. SEO e HTTP status code