Firefox + Multitouch + HTML5 + CSS3 + SVG = Awesomeness



Don’t fret if you don’t know what that means. We’ll explain it for you. That’s what we do.

The Firefox team has been hard at work creating some pretty amazing web functionality that will have you forgetting you’re not using an app. This includes enabling users to perform some pretty amazing seamless video effects, transitions, layering, and MultiTouch gestures that you would find on an iPad. Of course you’ve seen this type of design in Flash or inside an app, but with the Firefox 4 Beta this is possible inside your browser.

firefox

Don’t take our word for it. It’s something you really should see in action to understand (videos below). You can test all this yourself in the Firefox 4 Beta and if your one of those “lucky” Windows 7 users with a touch display (so not jealous), you can test the MultiTouch webpages out.

All this is making for a media rich web experience and a platform for Living Art to thrive.

Here’s a quick summary:

HTML5

If you’ve been living under rock, there’s a war going down and it’s Flash vs. HTML5. Flash, an add-on to browsers, provides advanced animations, video, and a plethora of other pretty little things, but as critics point out, it can but excessive strain on browsing speed, battery life, and can be buggy on mobile platforms, which is why Apple has decided to leave it out on the iPhone and iPad. HTML5 aims to reproduce what Flash offers while being more simple to encode and less processor intensive and completely integrated in the browser.

SVG

SVG stands for Scalable Vector Graphics. It is code that lets developers designers make really cool graphics and animations without the need for an add-on like flash. This includes pattern and gradient fills, sophisticated filter-effects, anti-aliased rendering, clipping to arbitrary paths, and animations. What makes this different from Flash is the fact that it is compliant with popular open source web standards such as XSL, DOM, and CSS while Flash relies on technology that is not open source.

CSS3 Transitions

CSS3 Transitions provide a way to animate CSS code properties without having the changes take place instantly. This means you are able to take HTML elements and apply certain properties such as scale, translate, or skew, and apply to them over time instead of doing it instantly. An example provided by Firefox is “if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

HTML5 + CSS3 + SVG Video:

MultiTouch Video:

For more information please check out Mozilla Hacks.

Tagged as: , , , , , , , , , , , , ,

Leave a Response