Un editor HTML5

Ma ora con Edge avremo la possibilità di realizzare animazioni HTML5 con un editor simile a quello che già in molti conoscono di Flash, quindi con una timeline, keyframe, motiont, rotazioni….
Adobe mette a disposizione un Preview gratuita di Edge installabile su Windows e su Mac, per poter procedere al download di Edge serve un account Adobe, l’iscrizione è gratuita. La demo di Edge sarà gratuita utilizzabile gratuitamente fino alla fine del 2011. Non perdete tempo!

Qualche esempio di HTML5 con Edge

Ecco qualche esempio di Edge direttamente dal sito di Adobe:

• Getting Jumpy 1
• Getting Jumpy 2
• Sunshine and Sailing
• Ferris Wheel and Roller Coaster
• Simple Rich Ad

Una prova veloce di Edge

L’ho installato ed ho provato ad aprire Edge per creare la mia prima animazione HTML5, naturalmente molto banale, e molto semplice. Curiosando nel codice mi accorgo della presenza di jQuery probabilmente per garantire il funzionamento delle animazioni anche su browser obsoleti.

La pagina ufficiale di Edge:
http://labs.adobe.com/technologies/edge/

Una riflessione…

Secondo voi un editor HTML5 è un bene o un male? Questo dubbio mi è venuto quando ho ricevuto un riscontro da @Luglio7 su twitter.
Nella storia i vari editor che hanno aiutato a compilare codice spesso hanno contribuito a rendere il codice più pesante e pieno di errori, a partire dal Front Page, ma anche Dreamweaver ci metteva del suo.
Cosa dire del fatto che ultimamente sul web, la navigazione si è fatta più piacevole ed usabile, merito anche della quasi scomparsa dei menu animati tipici di Flash. Con Edge, o con qualsiasi altro Editor HTML5, rischieremo di rivedere animazioni che ci faranno impazzire?

Sto seguendo da qualche settimana l’evoluzione di questa 3D Wall Gallery su codrops un esempio di Photogallery movimentata da effetti jQuery davvero interessanti, anche se attualmente ancora molto sperimentale.

3D Wall Gallery

Nella parte superiore viene proposta una gallery a scorrimento navigabile dalla barra orizzontale, o cliccando sulle immagini. L’effetto scorrimento riesce ad esprimersi al meglio con Safari, che oltre allo scorrimento riesce a generare un piacevole effetto 3D simile all’effetto scorrimento di cooliris.com una funzione davvero stupefacente che qualche tempo fa non avremmo mai sognato di vedere su un browser senza l’aiutino di Flash.

• 3D Wall Gallery: Tutorial
• 3D Wall Gallery: Demo (effetto 3D visibile solo con Safari)

ThumbnailsPreviewSlider

Di 3D Wall Gallery trovo ancora più interessante l’effetto ThumbnailsPreviewSlider una sorta di navigazione preview a scorrimento decisamente ben riuscita. La vedrei ben volentieri in alcuni progetti che ho in mente.

• ThumbnailsPreviewSlider: Tutorial
• ThumbnailsPreviewSlider: Demo

Nel caso li troviate interessanti sarei curioso di vedere qualche vostro progetto che si basa si questi effetti o effetti simili.

Alessandro Coscia  di Codicefacile.it e Youreporter.it propone due soluzioni per rendere i comportamenti di Internet Explorer più simili a quelli degli altri browser.

Margini IE6 duplicati

L’attenzione è stata dedicata sulla duplicazione dei margini su IE6, infatti utilizzare i margini di un qualsiasi elemento quando lo stesso è posizionato con Float:left, porta al raddoppio del margine. E questa è la sua soluzione jQuery: jQuery: Fix IE6 Double Margin bug
Esiste anche una soluzione tramite css, basta aggiungere nello stesso punto dove è stampato  Float:left,  il parametro: display:inline

Dimensioni Box model

L’interpretazione delle dimensioni di un elemento (Esempio: Box Model), nel momento in cui vengono utilizzati margin padding e border, può riscontrarsi differente nei vari browser:
Ed anche in questo caso Alessandro ci mostra il suo espediente tramite jQuery: jQuery: Box Model Fix

Testerò anch’io  nei prossimi giorni queste interessanti soluzioni, un ringraziamento va ad Alessandro.