Con Ajax e il Web 2.0 l'uso di indicatori di attività per evidenziare
transizioni di stato o effetti grafici è sempre più presente.
Gli indicatori di attività, ovvero delle piccole GIF animate, possono
essere usati anche con i CSS, ad esempio come sfondi alle immagini
in attesa del loro caricamento. È quello di cui parleremo in questo
appuntamento.
Vediamo subito l'esempio che accompagna
l'articolo, e come viene mostrata un'immagine in fase di caricamento:
La tecnica è decisamente semplice. Cominciamo dal markup dell'esempio:
<div class="pic">
<img src="london.png" alt="immagine" width=256 height=192>
</div>
Il div class="pic" è in realtà superfluo ai fini della tecnica
ed è usato principalmente per rendere float l'immagine e aggiungere una piccola cornice.
Costituisce però un buon aggancio grafico e consente un buon livello di personalizzazione,
potremo ad esempio aggiungere una drop-shadow o
un effetto ombra particolare.
Quello su cui vale la pena soffermarsi è il fatto che nell'immmagine vengano specificate le dimensioni
attraverso gli attributi width e height nel markup. Si tratta, è vero, di attributi
presentazionali ma comunque e sempre vincolati alle immagini a cui sono assegnati.
Attribuire dimensioni alle immagini è importante non solo se vorremo usare gli indicatori di attività,
ma più in generale per prevenire "salti di pagina" fintanto che queste sono caricate. Si può fare in
diversi modi, ovvero con gli attributi nell'HTML, oppure tramite stile in linea
(<img style="width:256px;height:192px">), oppure ancora tramite CSS esterni
assegnando classi e/o ID alle singole immagini. Personalmente, ritengo più pratico e leggero l'uso di
attributi nell'HTML.
Procediamo ora con il CSS dell'esempio. Per quanto riguarda il div esterno,
questo viene reso float e gli viene attribuita una cornice e dei margini per distanziare il testo:
div.pic{ float: left;
margin: 0 10px 10px 0;
border: 1px solid; border-color: #CCC #999 #999 #CCC;
padding: 4px}
Ora la parte più importante, ovvero l'indicatore di attività. Basterà
rendere l'immagine block-level, assegnarle un colore di sfondo e centrare la piccola GIF animata:
div.pic img{
display: block;
background: #EEF1F9 url(loading.gif) no-repeat center center}
Con due semplici regole abbiamo ottenuto immagini con indicatori di attività,
una tecnica che si presta bene soprattutto in siti con immagini di dimensioni
medio-grandi (fotografie ad esempio) oppure con molte miniature. La compatibilità
è estesa a tutti i browser con un supporto anche minimo dei CSS. Da evidenziare
che l'indicatore di attività resterà visibile nel caso in cui l'immagine
non sia disponibile (come nella seconda immagine dell'esempio).
Per quanto riguarda gli indicatori di attività, segnalo in conclusione
alcuni siti in cui si possono reperire e/o personalizzare:
AjaxLoad, Ajax Loading GIF Generator,
Load Info e Ajax Activity Indicators.
Alla prossima!
