The Power of HTML5La puissance d’HTML5

To begin with my first note on this blog, I ‘ll talk a bit of HTML5, I suppose that, with the buzz on the internet, everyone knows what i’m talking about! The new HTML norm has already appeared to wide public with Youtube and it’s video player written with html5 instead of Flash.

But for a Web developer, it’s interesting to see the infinite possibilities! For example, the html5vsflash website shows us a beautiful demonstration of flash animations reproduced with HTML5 without get a up to date flash version. (useful for the free only community, for who flash is an heretic anti-free software and they refuse to use the flashplugin-nonfree).

Html5.VS.Flash includes a bit of comics humor by placing the two heroes: Flash & Green Lantern with an apple, but don’t make confusion between HTML5 and the Apple company!

Exemple html5
Html5 on the one side...
example flash
... Flash on the other side

The documents structure is now easier to analyse to use the common CSS properties:

Exemple de structure
Example of a HTML5/CSS2(3) structure
<br />&lt;!doctype html&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br /><%%KEEPWHITESPACE%%>    &lt;title&gt;Page title&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /><%%KEEPWHITESPACE%%>    &lt;header&gt;<br /><%%KEEPWHITESPACE%%>        &lt;h1&gt;Page title&lt;/h1&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/header&gt;<br /><%%KEEPWHITESPACE%%>    &lt;nav&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Navigation --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/nav&gt;<br /><%%KEEPWHITESPACE%%>    &lt;section id="intro"&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Introduction --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/section&gt;<br /><%%KEEPWHITESPACE%%>    &lt;section&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Main content area --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/section&gt;<br /><%%KEEPWHITESPACE%%>    &lt;aside&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Sidebar --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/aside&gt;<br /><%%KEEPWHITESPACE%%>    &lt;footer&gt;<br /><%%KEEPWHITESPACE%%>        &lt;!-- Footer --&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/footer&gt;&lt;/p&gt;<br />&lt;p&gt;&lt;/body&gt;<br />&lt;/html&gt;<br />

To finish this little presentation, this link show you the start of an FPS entirely made with HTML5 and Javascript!

Example of a HTML5 game!

sources:

http://net.tutsplus.com/category/tutorials/html-css-techniques/

http://html5tutorial.net/category/general

http://www.benjoffe.com/code/

http://html5vsflash.tumblr.com/



Pour commencer mon premier article sur ce blog, je  vais vous parler un peu d’HTML5, je suppose qu’avec le buzz que ça à fait sur le net, tout le monde connait! La nouvelle norme HTML à déjà fait parler d’elle auprès du grand public avec Youtube et sa version lecteur vidéo HTML5 à la place de Flash.

Mais pour un développeur Web, il est intéressant de voir les possibilités quasi-infinies  que cela laisse à celui-ci. Par exemple le site  html5vsflash nous présente une belle démonstration des animations flash qui sont faisable en HTML5 sans pour autant posséder une version de flash à jour (pratique pour les puristes du libre, pour qui flash est une hérésie propriétaire et qui se refusent d’utiliser le flashplugin-nonfree).

Html5.VS.Flash à intégré une petite touche d’humour comics en prenant les personnages Flash et Green Lantern arborant une pomme, mais il ne faut pas faire l’amalgame entre html5 et Apple!

Exemple html5
D'un coté html5...
example flash
... de l'autre Flash

La structure des documents est maintenant plus facile à analyser  pour utiliser les propriétés CSS habituelles :

Exemple de structure
Exemple de structure facilement réalisable en HTML5/CSS2(3)
t

Pour finir cette petite présentation, je vous met un lien pour découvrir le début d’un FPS entièrement en HTML5 et en Javascript!

Exemple d'un jeu réalisé entièrement en HTML5

sources:

http://net.tutsplus.com/category/tutorials/html-css-techniques/

http://html5tutorial.net/category/general

http://www.benjoffe.com/code/

http://html5vsflash.tumblr.com/