2010-02-03 09:59:46 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = utf-8 / >
< meta name = "viewport" content = "width=620" / >
2010-03-04 13:07:09 +01:00
< title > HTML5 Demos and Examples< / title >
< link rel = "stylesheet" href = "/css/html5demos.css" type = "text/css" / >
2010-02-03 09:59:46 +01:00
< / head >
< body >
< section id = "wrapper" >
< header >
< h1 > < abbr > HTML< / abbr > 5 Demos and Examples< / h1 >
< / header >
< article >
< p > < abbr > HTML< / abbr > 5 experimentation and demos I've hacked together:< / p >
< ul >
2010-03-02 23:08:02 +01:00
< li > < span class = "support" > < / span > < a href = "canvas-grad" > Interactive canvas gradients< / a > (all bar IE)< / li >
< li > < a href = "video-canvas" > Canvas & Video< / a > (all bar IE)< / li >
< li > < a href = "video" > Video< / a > (all bar IE)< / li >
2010-02-03 09:59:46 +01:00
<!-- <li><a href="http://people.opera.com/brucel/demo/html5 - forms - demo.html">Web Forms 2.0</a> (Opera 9+, very partial Safari support)</li> -->
< li > < a href = "canvas" > Canvas< / a > (all bar IE)< / li >
< li > < a href = "contenteditable" > Content Editable< / a > (all latest browsers)< / li >
< li > < a href = "geo" > Geolocation< / a > (FF3.5, iPhone OS 3)< / li >
< li > < a href = "postmessage" > postMessage< / a > (same domain) (all latest browsers)< / li >
< li > < a href = "postmessage2" > postMessage< / a > (cross domain) (all latest browsers)< / li >
< li > < a href = "drag" > drag and drop< / a > (IE, Safari 4, FF3.5)< / li >
< li > < a href = "drag-anything" > drag < em > anything< / em > < / a > (IE, Safari 4, FF3.5)< / li >
< li > < a href = "offline" > offline detection< / a > (FF3.5, iPhone OS 3)< / li >
< li > < a href = "offlineapp" > offline application using the manifest< / a > (Safari 4, FF3.5.3) (< em > Note: pre-FF3.5.3 < a href = "https://bugzilla.mozilla.org/show_bug.cgi?id=501422" > has a bug< / a > < / em > )< / li >
2010-03-02 23:08:02 +01:00
< li > < a href = "storage" > Storage< / a > (all latest browsers)< / li >
2010-02-15 18:02:36 +01:00
< li > < a href = "database" > Web SQL Database Storage< / a > (Safari, iPhone OS 3, Opera 10.50)< / li >
< li > < a href = "database-rollback" > Web SQL Database - rollback test< / a > (Safari, iPhone OS 3, Opera 10.50)< / li >
2010-02-03 09:59:46 +01:00
< li > < a href = "worker" > Web Workers< / a > (watch out - uses a < em > lot< / em > of CPU! < a href = "non-worker" > example without - will hang your browser< / a > )< / li >
< / ul >
<!-- <section>
< a href = "http://full-frontal.org" id = "ffad" title = "JavaScript Conference: Full Frontal, 20th November" >
< img src = "http://2009.full-frontal.org/images/ff.gif" alt = "Full Frontal Logo" width = "70" / >
< p > < b > Want to learn more about JavaScript?< / b > < / p >
< p > Full Frontal is a < strong > JavaScript conference< / strong > , < em > run by< / em > front end developers < em > for< / em > front end developers, held in the UK on 20th November.< / p >
< p > Early bird tickets start at £100. Find out more: < em class = "url" > http://full-frontal.org< / em > < / p >
< / a >
< / section > -->
< p > All content, code, video and audio is < a rel = "license" href = "http://creativecommons.org/licenses/by-sa/2.0/uk/" > Creative Commons Share Alike 2.0< / a > < / p >
< / article >
< footer > < a id = "built" href = "http://twitter.com/rem" > @rem built this< / a > < / footer >
< / section >
2010-02-03 10:03:26 +01:00
< a href = "http://github.com/remy/html5demos" > < img style = "position: absolute; top: 0; left: 0; border: 0;" src = "http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt = "Fork me on GitHub" / > < / a >
2010-02-03 09:59:46 +01:00
< script >
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
< / script >
< script >
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}< / script >
< / body >
< / html >