While playing with it, I was wondering, which is the coolest feature introduced in this new release? Well, if you are a user, it should be the full screen support for native HTML5 video. If you are a developer, it may be the new CSS enhancements. But, what if you are a Macbook user?

If you are a Macbook user, it will surely be the detection of the notebook orientation using its integrated accelerometer.

There are a bunch of demo showing this new functionality, they were so exciting I wanted to build one on my own. So, here it is a brand new orientation bookmarklet:

SteerMe

Simply drag and drop the SteerMe button into the bookmarks toolbar of Firefox, or copy its link and manually create a new bookmark. Then, go to a new web page, press the newly created bookmark and begin to rotate your Macbook.

You will see the page still vertical while you rotate the notebook on the left and on the right, you will see it stretched and tightened while you move the keyboard up and down. And you will see the page bounce when, ehm…, you drop your precious notebook!

Tablet-like visualization with Macbook rotated on the left

Stretched page with keyboard upside down

How does it work? This is the bookmarklet code with extra spaces:

1
2
3
4
5
6
7
8
9
10
11
12

window.addEventListener &&
window.addEventListener("MozOrientation", function(e) {
    var h = innerHeight,
        ox = scrollX + innerWidth / 2,
        oy = scrollY + h / 2,
        bs = document.body.style;
    bs.MozTransformOrigin = ox + "px " + oy + "px";
    bs.MozTransform = "rotate(" + (90 * e.x) + "deg) " +
                      "scaleY(" + (e.y + 1) + ") " +
                      "translateY(" + (-h * (e.z + 1)) + "px)";
}, true);
void(0);

As with every bookmarklet, its Javascript code must be as short as possible and tends to be quite obfuscated, but it is very simple. First of all, we will listen to the new MozOrientation event on the window object. Then we will apply a CSS transform to the body of the page using the event orientation data.

Una di queste consiste nella nuova proprietà CSS transform che per il momento sarà utilizzabile con il nome proprietario -moz-transform. Mutuata da WebKit, questa proprietà permetterà di applicare trasformazioni come rotazioni, traslazioni o variazioni di scala agli elementi delle proprie pagine web.

Mi sembra il modo giusto di procedere, da convinto sostenitore della separazione tra presentazione e contenuto credo che il potenziamento delle funzionalità fornite dai fogli di stile CSS sia il modo migliore per poter realizzare interfacce accattivanti, senza dover ricorrere ad un uso eccessivo di immagini o, peggio ancora, a prodotti proprietari.

L’elemento <video> ha lo scopo di semplificare decisamente l’inclusione di filmati all’interno delle proprie pagine web, rendendone l’inserimento facile come l’utilizzo di immagini attraverso il tag <img>.

In dettaglio, l’inserimento del video avviene utilizzando codice HTML di questo tipo:

<video controls="controls" src="URL filmato"></video>

L’elemento potrà inoltre contenenere altro codice HTML, come testo o immagini, che saranno visualizzati dai browser non compatibili, al posto del filmato.

In Firefox 3.1 l’unico formato supportato sarà Ogg Theora con audio Ogg Vorbis e per la decodifica non verrà utilizzato alcun tipo di plugin. All’interno dei sorgenti sono state infatti direttamente incluse le librerie sviluppate dalla fondazione Xiph.Org.

Presso il blog degli sviluppatori del browser Opera, è possibile trovare alcune pagine di esempio che utilizzano questo nuovo elemento HTML. Visitandole con la nuova versione alfa di Firefox, si potrà verificare direttamente quali risultati si possano ottenere:

Elemento <video> in Firefox 3.1 alfa 2

Rimane soltanto da fare un’ultima considerazione: la creazione di nuovi elementi come <audio> e <video> delinea una filosofia alla base dello sviluppo del nuovo standard HTML 5 che non ritengo completamente condivisibile. Per la visualizzazione di filmati o audio, escludendo il diffusissimo ricorso ad appositi player in Flash, era già disponibile l’elemento <object>, che ha il vantaggio di essere generico e quindi adatto a qualsiasi utilizzo non inizialmente previsto. Il rischio che si corre è infatti quello di abbandonare la strada intrapresa dal W3C che aveva portato alla differenziazione tra documenti HTML Transitional e documenti HTML Strict.

I nuovi elementi presentano comunque dei vantaggi, come ad esempio la disponibilità di un’API JavaScript studiata appositamente per la gestione di oggetti multimediali. Inoltre si potrebbe addirittura ottenere come effetto collaterale la diffusione e l’eventuale successo di un formato video standard e libero da royalty, se solo il working group di HTML 5 riuscisse a raggiungere un consenso al riguardo…