Simon's Homepage

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!

Html5 on the one side...

... Flash on the other side

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

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/