Collection of hacks and demos showing capability of HTML5 apps
HTML JavaScript PHP CSS ApacheConf
Latest commit eae156c Jun 18, 2015 @remy Merge pull request #67 from CoolOppo/patch-1
Fix it so that both videos play at the same speed!
Failed to load latest commit information.
assets adding the gum demos Mar 26, 2012
css ads: someone's gotta pay the bills Feb 16, 2012
demos Fix it so that both videos play at the same speed! Apr 13, 2015
images change promo and added IE9 support Apr 5, 2011
includes ads: someone's gotta pay the bills Feb 16, 2012
js worker demo. "px" is required for inline style's left Aug 25, 2014
server Remove submodule Nov 10, 2014
.gitignore ignore file Nov 10, 2014
.gitmodules updated promo & moved to node-websocket-server Oct 19, 2010
.htaccess Fixing history support test for Firefox, since it doesn't support one… Aug 23, 2010
MIT-LICENSE.TXT License Feb 3, 2010
README.markdown Fixed look of readme (I hope!) Mar 4, 2010
canvas-grad.html Small fix in canvas-grad Jul 4, 2011
composer.json For heroku hosting Nov 10, 2014
demos.json updated demos - usually adding safari support Jan 8, 2013
devnull.php new demo: dnd + filereader + xhr2 Mar 7, 2012
drag-orig.html Loading existing examples from html5demos.com Feb 3, 2010
drag2.html Loading existing examples from html5demos.com Feb 3, 2010
html5demo.appcache fixed broken git image in appcache May 17, 2011
index.php updated demo support - currently bug in Opera with files with spaces,… Jun 26, 2012
page.php manifest -> appcache May 17, 2011
postmessage-target.html Complete reorganisation of the directory so that making new demos app… Mar 4, 2010
video-canvas.html synced video to playback rate rather than timeupdate event Apr 25, 2011

README.markdown

HTML5 Demos and Examples

A collection of HTML5 experiments I've created, now open source and on GitHub, so please go ahead and help me hack this resource in to a wealth of demos that other authors can learn from.

Aim

  • If a user can hit view source on the demo, then we've done our job
  • Where possible browser support should be named (FF3.5, etc)
  • All content is open source and content is Creative Commons Share Alike 2.0
  • Individual demos, if authored by someone other than @rem can be credited as appropriate

Creating new demos

If the demo should take the default style - currently grey and dull - but it keeps the focus on the code ;) then follow these instructions. Otherwise, simply create the file in the root directory calling it [yourdemo].html and include it in the index.php.

Instructions to creating a new demo:

  • Create a .html in the /demos directory
  • Use the following template (also a sample in /demos/template.html):
<title><!-- Title of your demo, note this appears in the document title prefixed with "HTML5 Demo:" --></title>
<style>/** any custom styles live here **/</style>
<article><!-- any demo markup here --></article>
<script>
// your JavaScript
</script>
  • When requesting the demo, use html5demos.com/[yourdemo] and page.php will top and tail your page
  • Any additional JavaScript libraries should be stored in the /js directory, assets, such as video and audio live in the /assets directory.

That should be it.

By submitting any code, you're also agreeing that your code is covered by the MIT-LICENSE that this project is covered by, and all content is covered by Creative Commons Share Alike 2.0 - as is all of this project: it's all about sharing baby!

TODO

Demos Required

  • Microdata
  • SVG
  • More audio and video demos
  • More introductions to canvas
  • More event based stuff
  • WebSockets (@rem - have a demo ready, but not the server side)

Misc

  • Clearer versioning on the demos, rather than "All bar Opera", should include last version to support feature, i.e. Opera 10.10b, Chrome 4 dev, Safari 4.0, etc.