Go to file
remy 1e9460f2d5 updated promo & moved to node-websocket-server 2010-10-19 20:07:30 +01:00
assets Added webm demos 2010-06-09 15:21:01 +01:00
css updated promo & moved to node-websocket-server 2010-10-19 20:06:58 +01:00
demos Removing the test - since actually I can't setAttribute on the window object - DOH! 2010-08-23 17:55:18 +01:00
images Tweaking opacity on browser support 2010-03-05 01:02:27 +00:00
includes updated promo & moved to node-websocket-server 2010-10-19 20:06:58 +01:00
js updated promo & moved to node-websocket-server 2010-10-19 20:07:30 +01:00
server updated promo & moved to node-websocket-server 2010-10-19 20:07:30 +01:00
.gitmodules updated promo & moved to node-websocket-server 2010-10-19 20:06:35 +01:00
.htaccess Fixing history support test for Firefox, since it doesn't support onevent in object 2010-08-23 17:15:31 +01:00
MIT-LICENSE.TXT License 2010-02-03 09:08:26 +00:00
README.markdown Fixed look of readme (I hope!) 2010-03-04 12:24:03 +00:00
canvas-grad.html Complete reorganisation of the directory so that making new demos appears, visually, more consistent. I'd like a better way to credit other people if they start contributing demos - but for now, no one has ;-) 2010-03-04 12:07:09 +00:00
demos.json Opera adds Web Socket support to nightly 2010-10-11 16:26:31 +01:00
drag-orig.html Loading existing examples from html5demos.com 2010-02-03 08:59:46 +00:00
drag2.html Loading existing examples from html5demos.com 2010-02-03 08:59:46 +00:00
html5demo.manifest Complete reorganisation of the directory so that making new demos appears, visually, more consistent. I'd like a better way to credit other people if they start contributing demos - but for now, no one has ;-) 2010-03-04 12:07:09 +00:00
index.php updated promo & moved to node-websocket-server 2010-10-19 20:07:30 +01:00
page.php Complete reorganisation of the directory so that making new demos appears, visually, more consistent. I'd like a better way to credit other people if they start contributing demos - but for now, no one has ;-) 2010-03-04 12:07:09 +00:00
postmessage-target.html Complete reorganisation of the directory so that making new demos appears, visually, more consistent. I'd like a better way to credit other people if they start contributing demos - but for now, no one has ;-) 2010-03-04 12:07:09 +00:00
video-canvas.html Created assets directory - more cleaning, template.html for examples of what demos should contain and expanded on the README to explain how to contribute a demo. 2010-03-04 12:18:09 +00:00

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.