In rete si trovano diversi esempi, ma ancora molto poco che spieghi nel dettaglio i vari passaggi per creare questo tipo di animazioni.
Così ho deciso di scrivere un breve tutorial su come simulare il volo di una mongolfiera in un cielo.

La demo funzionante si trova qui, ma attenzione che può essere vista per il momento solo con browser webkit (Chrome o Safari) .

L’articolo completo col tutorial invece si trova a questo indirizzo

E visto che ignorarlo ancora non è possibile nella maggioranza dei casi, vediamo alcune soluzioni a nostra disposizione per renderci la vita un po’ più semplice:

1. IE7 di Dean Edwards,  si tratta di un javascript che fa operare Explorer 6 in modalità standard compliant permettendo di interpretare correttamente anche alcuni selettori CSS3
   Pagina del progetto su Google Code
2. Il CSS universale per Internet Explorer 6, creato da Andy Clarke, è utilizzabile in qualunque sito salvo minimi adeguamenti. Questa soluzione rimuove completamente la grafica del sito e presenta esclusivamente i contenuti formattati in modo corretto.
   Articolo completo
   Pagina del progetto su Google Code
3. Infine, se vogliamo un’esatta corrispondenza del layout anche in questo browser potrà sicuramente esserci d’aiuto e risparmiarci un po’ di tempo questo cheat sheet sui bug di Internet Explorer 6

Insomma, le soluzioni ci sono, tutto dipende come sempre da vari fattori quali il tempo, il budget, la complessità del progetto…

Nel primo esempio, quello se vogliamo più scontato, il menu sarà posizionato in alto, subito sotto l’area branding.
Nel secondo porteremo il menu sulla sinistra tramite la proprietà float.
Infine, nel terzo esempio il menu verrà posizionato sulla destra grazie al posizionamento assoluto.

In fondo all’articolo troverete tutti gli esempi da scaricare e da utilizzare liberamente insieme ad alcuni riferimenti per approfondire il discorso.

Ma iniziamo a vedere il foglio di stile nel primo caso

1. Qui il foglio di stile è più che mai semplice, infatti i vari DIV si trovano già nella sequenza desiderata, quindi è sufficente dar loro una dimensione
   » vedi l’esempio
   
   
   La parte di codice che ci interessa è questa:
   
#page {
margin : 0 auto;
width : 960px;
background-color : #fff;
text-align : center;
}
#branding {
height : 100px;
width : 100%;
background-color : #eaeaea;
}
#navigation{
height : 30px;
background-color : #FFE682;
}
#content{
height : 350px;
width : 100%;
}
#content p{
padding : 10px ;
}
#site_info{
width : 100%;
height : 100px;
background-color : #eee;
}

2. Passiamo ora ad esaminare il codice col menu a sinistra:
   
   In questo secondo caso, i DIV si trovano sempre nell’ordine desiderato ed è sufficiente utilizzare la proprietà float
   » vedi l’esempio
   
   
   Ma vediamo il codice, in grassetto le parti aggiunte o modificate (ce la siamo cavata con 3 righe soltanto)
   
#page {
margin : 0 auto;
width : 960px;
background-color : #fff;
text-align : center;
}
#branding {
height : 100px;
width : 100%;
background-color : #eaeaea;
}
#navigation{
height : 350px;
background-color : #FFE682;
float : left;
width : 30%;
}
#content{
height : 350px;
}
#content p{
padding : 10px ;
}
#site_info{
clear : both;
width : 100%;
height : 100px;
background-color : #eee;
}

3. Vediamo infine l’ultimo caso, quello un po’ più anomalo , cioè con il menu spostato sulla destra
   
   Qui andremo a modificare qualche riga in più utilizzando il posizionamento assoluto.
   Le righe coinvolte in questo caso sono 5.
   » vedi l’esempio
   
   
   Ma vediamo il codice nel dettaglio:
   
#page {
margin : 0 auto;
width : 960px;
background-color : #fff;
text-align : center;
position : relative;/*questa proprietà ci permette di
posizionare il menu in modo assoluto*/
}
#branding {
height : 100px;
width : 100%;
background-color : #eaeaea;
}
#navigation{
position : absolute; /* queste prime 3 righe*/
top : 100px;/* ci permettono di posizionare*/
left : 640px; /*il div dove desideriamo */
width : 320px;
height : 350px;
background-color : #FFE682;
}
#content{
height : 350px;
width : 100%;
}
#content p{
padding : 10px 330px 10px 10px; /*ci permette di
lasciare lo spazio a destra dove inseriremo il menu*/
}
#site_info{
width : 100%;
height : 100px;
background-color : #eee;
}


Scarica il file zip con gli esempi

Per saperne di più sul markup semantico, consiglio il libro Oltre i CSS di Andy Clarke che è disponibile anche in italiano e che a mio parere vale veramente la pena di leggere.

Il markup semantico invece struttura il codice delle nostre pagine web in base al contenuto e al suo significato.
Vi posso assicurare per esperienza personale che, oltre ad essere il modo più corretto di scrivere il markup, permette di risparmiare anche parecchio tempo nella stesura del codice.

A questo punto un esempio pratico potrà forse essere più esplicativo.
Dobbiamo realizzare un layout di questo tipo

Abbiamo 4 blocchi principali da inserire nella pagina:

1. » il logo
2. » il menu
3. » il contenuto
4. » i dati aziendali

La sezione del menu è evidenziata in giallo perchè negli esempi successivi vedremo come sarà possibile cambiare il layout mantenendo lo stesso markup.
Per scrivere un markup semantico non dobbiamo preoccuparci di come questi elementi andranno a posizionarsi nel design, quello sarà compito dei CSS in un secondo momento.

Il markup risultante quindi sarà

<div id="branding">LOGO</div>
<div id="navigation">MENU</div>
<div id="content">CONTENUTO</div>
<div id="site_info">DATI AZIENDALI </div>Invece di
<div id="header">LOGO</div>
<div id="column_left">CONTENUTO</div>
<div id="column_right">MENU</div>
<div id="footer">DATI AZIENDALI </div>

Provate adesso a visualizzare i 2 esempi senza foglio di stile…

» esempio con markup presentazionale

» esempio con markup semantico

Gli elementi disposti in modo semantico saranno visualizzati correttamente anche in assenza di foglio di stile perché sono nel loro ordine logico.

Chiaramente ognuno di questi 4 div andrà a sua volta strutturato al suo interno in modo semantico, quindi le voci di menu saranno una lista non ordinata ecc.

Ma quali sono i vantaggi del markup semantico?
Come ho detto in precedenza, una maggiore velocità nella scrittura del codice. Ma non si tratta solo di questo. Anche l’accessibilità del sito migliora sensibilmente e se i contenuti sono nel giusto ordine anche Google se ne accorgerà. Anche una maggiore riusabilità aggiungerei, infatti, se un giorno decidiamo che il menu lo vogliamo in alto…. Ma questo sarà l’argomento del prossimo articolo dove vedremo nel dettaglio 3 diverse soluzioni CSS per 3 diversi layout mantendo invariato il markup.

Segnalo intanto un progetto a cui parteciperò il prossimo 9 aprile, si tratta del CSS Naked Day. Chi aderisce a questo evento rimuoverà per un giorno intero l’intero foglio di stile dal proprio sito per presentarlo per così dire nudo, sostenuto solo da un buon markup…