diff --git a/README.markdown b/README.markdown index c214e86..c608ee9 100644 --- a/README.markdown +++ b/README.markdown @@ -9,6 +9,31 @@ A collection of HTML5 experiments I've created, now open source and on GitHub, s * All content is open source and content is [Creative Commons Share Alike 2.0](http://creativecommons.org/licenses/by-sa/2.0/uk/) * Individual demos, if authored by someone other than [@rem](http://twitter.com) 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 of your demo, note this appears in the document title prefixed with "HTML5 Demo:" --> + +
+` + +* 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 @@ -18,8 +43,6 @@ A collection of HTML5 experiments I've created, now open source and on GitHub, s * More event based stuff * WebSockets (@rem - have a demo ready, but not the server side) -## TODO +## 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. -* Reorganise the directory structure to categorise demos -* Create an easy way to drive the template for the site (currently it's a complete copy for each of the files) \ No newline at end of file diff --git a/dizzy.mp4 b/assets/dizzy.mp4 similarity index 100% rename from dizzy.mp4 rename to assets/dizzy.mp4 diff --git a/dizzy.ogv b/assets/dizzy.ogv similarity index 100% rename from dizzy.ogv rename to assets/dizzy.ogv diff --git a/demos/template.html b/demos/template.html new file mode 100644 index 0000000..3bcbc28 --- /dev/null +++ b/demos/template.html @@ -0,0 +1,10 @@ +This is a template example + +
+

Instructions or related markup might should appear inside the <article> element, and code in the <script> below.

+
+ \ No newline at end of file diff --git a/demos/video.html b/demos/video.html index b80fb60..808eae1 100644 --- a/demos/video.html +++ b/demos/video.html @@ -1,8 +1,8 @@ Video

diff --git a/index.html b/index.php similarity index 100% rename from index.html rename to index.php diff --git a/video-canvas.html b/video-canvas.html index 5ee4d11..5f58b66 100644 --- a/video-canvas.html +++ b/video-canvas.html @@ -13,8 +13,8 @@ p { margin-top: 20px;}