Camastra-AG

Le animazioni web con i CSS3 decreteranno  la fine delle animazioni realizzate in Flash???

Su Ilarialab.com, un blog che seguo con attenzione, ho letto la notizia riguardante Sencha Animator, una applicazione desktop (gratuita) per creare animazioni CSS3.

CSS3, come sapete è un nuovo set di istruzioni (o regole)da utilizzare nei fogli di stile (Cascade Style Sheet) per ’impaginare’ le pagine web. Con questo sistema i contenuti (testo e media) delle pagine web vengono separati dalla formattazione ( o ‘impaginazione’). Per chi vuole approfondire l’argomento può farlo da QUI.

Sencha Animator è un editor molto simile a quello per produrre le animazioni Flash.

Con un questa applicazione e un pò di pazienza, chiunque potrà creare animazioni in CSS3 in maniera semplice e veloce.

Curioso (come al solito) ed affascinato dalle novità, ho voluto verificare di persona la funzionalità di questo software così, dopo averlo scaricato da QUI ed averlo installato sul mio pc, ho creato una piccola animazione.

Nel lato sinistro della schermata del programma sono incolonnati gli oggetti  che fanno parte dell’aminazione, mentre nella colonna centrale per ognuno di questi è presente la linea temporale o Timeline. Nella colonna a destra dello schermo troviamo invece  i pannelli di controllo dei vari elementi  che compongono l’animazione con i CSS3, nel dettaglio:

• Proprietà del progetto (project properties);
• Proprietà dell’oggetto (object properties);
• Proprietà del keyframe (keyframe properties), dove è possibile specificare la posizione del frame nella Timeline;
• Animazione (animation), i vari effetti di animazione;
• Dimensione, posizione e flusso ( dimension, position and flow);
• Bordi (borders) dove è possibile specificare : posizione, spessore, colore, tipo di linea  e raggio (radius) per i bordi arrotondati;
• Sottofondo (background), colore, immagine, ombre ed effetti;
• Tipo (type) per inserire tutte le caratteristiche del testo;
• CSS Personalizzato (Custom CSS) per inserire personalizzazioni del codice CSS.

Come sottolieato da Ilaria nel suo POST il software è semplice da usare per creare animazioni CSS3 in maniera veloce.

Dopo aver realizzato la mia animazione di prova (che vedete nella figura sopra) l’ho testata  sui browser più diffusi: Internet Explorer ,Firefox, Google Chrome, Safari con questi risultati:

• Internet Explorer – al caricamento della pagina non succede nulla (ma già sapevo che IE non era conpatibile con i CSS3);
• Firefox - la vera sorpresa è stata la mancata visualizzazione della animazione prodotta con Sencha Animator, nonostante la proclamata compatibilità del browser di casa Mozilla con i CSS3;
• Google Chrome -  é l’unico che visualizzato l’animazione completa;
• Safari – ha visualizzato parzialmente l’animazione.

E’ chiaro che si tratta di una tecnologia nuova e come sempre dobbiamo dare il tempo ai produttori dei  browser  più diffusi di adeguare i loro software per la piena compatibilità alle nuove direttive in fatto di fogli di stile.

E’ comunque vero, che il codice prodotto da Sencha Animator per il mio test non è stato correttamente interpretato in browser che pur ne dichiarano la completa compatibilità come Safari e Firefox. (a chi la colpa?)

In conclusione, i CSS3 portano certamente grandi innovazioni per quanto riguarda la realizzazione di pagine web ma per ovvi problemi di compatibilità è consigliabile non utilizzarlo  se non per scopi didattici.