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

Tempo permettendo, cercherò di riportare qui le traduzioni degli articoli che meglio si prestano a questa operazione. Nel frattempovi invito a visitarlo e, se vi va,  a dire che ne pensate.

Il font è distribuito sotto Licenza Creative Commons e può essere utilizzato sia in progetti personali che commerciali.

download Breakfast at Michy’s

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…

Le immagini sotto sono unicamente a scopo dimostrativo, per utilizzare il pattern nelle dimensioni originali consiglio di scaricare il file zip

Download

Tecnicamente con la dichiarazione css @font-face sarebbe possibile (e piuttosto semplice) includere il font desiderato aggiungendo il link all’url dove si trova il font.  Finora questa soluzione non è stata utilizzata perchè non supportata dai vari browser (ma presto lo sarà) ma il motivo principale è che le licenze dei fonts non prevedono l’inclusione via css permettendone così una ridistribuzione via web.

Ed è qui che entra in gioco Typekit,  una sorta di intermediario che consentirà di utilizzare legalmente la dichiarazione @font-face.

Ma come funzionerà?

Dopo una registrazione sul sito,  si potrà usufruire in un primo tempo gratuitamente del  servizio.
Ci verrà fornito un codice Javascript da inserire nelle nostre pagine  che, utilizzato insieme a @font-face,  permetterà di visualizzare i testi nel font desiderato, cosa che fino ad oggi è stata possibile solo per la carta stampata o per i siti in Flash.

Typekit infatti sarà una grande libreria di fonts e,  grazie agli accordi  con molte foundries,  questi fonts avranno una licenza creata appositamente per il web.

E se i vantaggi di questa soluzione sono evidenti, saranno comunque necessari degli accorgimenti in caso di Javascript disabilitato o di malfunzionamento dei loro server.

A questo punto non rimane che  provare direttamente per vederlo in azione e valutarne costi e benefici

Intanto per essere avvisati appena il servizio sarà disponibile (è previsto per questa estate), potete iscrivervi sul sito con la vostra mail www.typekit.com

Per approfondimenti :

Annuncio ufficiale dal team di Typekit

Account Twitter di @typekit

Una curiosità: il sesso maschile sembra più incline ad utilizzare questa soluzione, sono più autoironici o soltanto più vanitosi?
E voi l’avete mai utilizzato nei vostri lavori?

Ma iniziamo a vederli uno per uno, iniziando ovviamente dalle donne che, in questo caso, sono in netta minoranza

• http://www.whoisnicoleharris.com/
  
• http://www.helenguttridge.com/
  
• http://digitalmash.com/
  
• http://www.erskinedesign.com/
  
• http://www.kinoz.com/
  
• http://www.olliekav.com/
  
• http://www.lanbruk.com.au/
  
• http://friml.com/
  
• http://kevinjohngomez.com/
  
• http://www.gpacheco.fr/
  

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.

Grazie a questo articolo ho scoperto che tra gli altri è stata inserita anche una mia creatura.

Si tratta di Style 4 You(lo vedete anche a fianco) un blog con vari consigli in fatto di moda e tendenze.
La cosa, ovviamente, mi ha fatto molto piacere.

Ricevere una gratificazione di questo tipo, del tutto inaspettata, è sicuramente una spinta a migliorare nonostante tutte le difficoltà del mondo web in Italia

Nello stesso articolo troviamo blog famosissimi come Veerle’s blog , Smashing Magazine e Ma.tt.
Alcuni della lista li conoscevo già da tempo, mentre altri, molto belli, non li avevo mai visti

Thank you Web Designer Magazine!

Nuova da tutti i punti di vista.

Ho dedicato la gran parte di queste ultime settimane a completare il sito anche perchè volevo accogliere così il nuovo anno.

Ci sono modifiche che avrei sempre voluto apportare alla versione precedente che mi hanno portato a realizzare quello che adesso state visitando. 

La piattaforma utilizzata è l’adorabile Wordpress e, oltre alla grafica, ho deciso di organizzare diversamente anche l’intera struttura del sito. 

 Nel portfolio ho preferito dare  maggiore spazio ad ogni singolo lavoro, inoltre curerò i contenuti del blog con articoli riguardanti il web design.

Infine ho aggiunto la sezione Freebies in cui metterò a disposizione alcune risorse utili per il vostro sito o blog da scaricare gratuitamente.

Che altro aggiungere? Beh visitate il sito e , se vi va, ditemi la vostra!