Cross Browser Helper

Html 5 Validator (en)

http://html5.validator.nu/

Html5 Browser capability test (en)

http://html5test.com/

Html readyness – fancy browser comparison (en)

http://html5readiness.com/

Modernizr – Cross-Browser Html5 & CSS3 Support (en)

http://www.modernizr.com/

Html5Shiv – Html5 for IE (en)

http://code.google.com/p/html5shiv/

IE-7 js – Standard complient IE 7 (en)

http://code.google.com/p/ie7-js/

Html 5 CSS-Reset (en)

http://html5reset.org/
http://html5doctor.com/html-5-reset-stylesheet/

HTML 5 Boilerplate – Best Practices, Scripts und Server-Konfigurationen

http://html5boilerplate.com/ (en)
http://de.html5boilerplate.com/ (de)

Audio/Video

Html 5 Audio and Video – What you must know (en)

http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

Video accessiblity (en)

http://wearehugh.com/public/2010/08/html5-video-accessibility/Your text to link…

Canvas

Reference Guide (de)

http://canvas.quaese.de/

Canvas beginners guides (en)

http://www.brighthub.com/internet/web-development/articles/38744.aspx
http://www.visitmix.com/Articles/Translating-CANVAS-with-HTML5

Canvas demos & tutorials (en)

http://www.canvasdemos.com/

Cookbooks & Tutorials

Html 5 cheatsheet

http://websitesetup.org/html5-cheat-sheet/

WHATWG Weblog (en)

http://blog.whatwg.org/

Html 5 laboratory (en)

http://www.html5laboratory.com/

Dive into Html 5 (en)

http://diveintohtml5.org/

Html5 Playground (en)

http://www.html5rocks.com/

Tag reference (en)

http://www.w3schools.com/html5/html5_reference.asp

Fancy tag reference (en)

http://joshduck.com/periodic-table.html

Html5 Techniques – Ultimate collection of tutorials (en)

http://www.tutoriallounge.com/2010/11/html5-techniques-ultimate-collection-of-tutorials/

Useful html 5 code snippets (en)

http://www.onextrapixel.com/2010/11/15/useful-html5-code-snippets-you-can-use-today/

Geolocation using the Google API (en)

http://papermashup.com/html5-geo-location-using-the-google-api/

Fun with html5 forms

http://thinkvitamin.com/code/fun-with-html5-forms/

Blog-Artikel & andere Quellen

Webkrauts Artikel zum Thema (de)

http://www.webkrauts.de/category/html5-einfuehrung/

What beautiful Html5 code looks like (en)

http://css-tricks.com/what-beautiful-html-code-looks-like/

48 Flash killing HTML 5 demos (en)

http://www.hongkiat.com/blog/48-excellent-html5-demos/

HTML 5 facts & myths (en)

http://www.smashingmagazine.com/2010/09/23/html5-the-facts-and-the-myths/

Learning to love html 5 (en)

http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/

Designing a html 5 layout from scratch (en)

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Ein Feature allerdings, über das ich erst nach jahrelanger Nutzung gestolpert bin, passt sehr gut ins nerdpress: 2html.

Was dieses Kommando macht?

Na, HTML-Code aus dem Inhalt des aktuellen Puffers as is erzeugen – optional mit Zeilennummern und CSS-Code.

Und so geht das:

• Syntaxhighlighting einschalten
  

  :syntax on

• den Code erzeugen
  

  :runtime! syntax/2html.vim  [oder :TOhtml]

• vim springt direkt in das neue split-Fenster, dort sollte man den Code direkt speichern

  :w

fertig.

Falls man die Zeilennummern drin haben möchte, hilft vor der HTML-Erzeugung folgendes Kommando

:let html_number_lines = 1

Und wenn es CSS sein soll, statt der älteren Font-Tags, geht auch das

:let html_use_css = 1

Einfacher geht es kaum… oder?

http://codepress.sourceforge.net/
Dies wird aber scheinbar nicht weiterentwickelt und hat zudem einige Bugs.

Weiterhin gibts dann http://sourcepad.org.
Das sieht ganz gut aus, für meine Zwecke schon zu gut, daher habe ich mich für dieses entschieden:
http://marijn.haverbeke.nl/codemirror

Also der CodeMirror:
Installation ist einfach:
Runterladen, die nötigen Files einbinden:

<script type="text/javascript" src="js/codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="css/docs.css">

Den linenumber style setzen (warum das nicht in der docs.css schon drin, fragt man sich?)

<style type="text/css">
      .CodeMirror-line-numbers {
        width: 2.2em;
        color: #aaa;
        background-color: #eee;
        text-align: right;
        padding-right: .3em;
        font-size: 10pt;
        font-family: monospace;
        padding-top: .4em;
      }
</style>

Eine Textarea anlegen:

<textarea id="code" name="PAGE_CONTENT"></textarea>

und das Highlighting aktivieren:

    var editor = CodeMirror.fromTextArea('code', {
    height: "350px",
    width: "700px",
    parserfile: "parsexml.js",
    stylesheet: "css/xmlcolors.css",
    path: "js/",
    continuousScanning: 500,
    lineNumbers: true
  });

Das wars schon.
Die Konfigurationsmöglichkeiten werden im Manual ganz gut erklärt, da gibts dann weitere Infos.

Spannend wirds allerdings wenn nun die Form submitted werden soll um den geänderten Code zu verarbeiten.
Denn der Trick bei dieser, wie auch bei den anderen Libs ist, dass das die Textarea unsichtbar gemacht wird und stattdessen ein iFrame gerendert wird mit dem Highlighting.

Submitted man nun die Form, wird natürlich nicht der aktuelle Inhalt übertragen sondern unverändert der alte.
Um zu erreichen, dass der neue Inhalt übertragen wird, muss man vorher den Code aus dem iFrame holen und in die ursprungliche Textarea setzen.
Daher besser keinen Submit Button benutzen, da ein Submit direkt feuert.
Besser ein onclick auf einen normalen Button und eine javascript funktion zwischenschalten die den Transfer übernimmt und danach submittet.
CodeMirror bietet dafür, sehr praktisch, eine Funktion an, die einem den geänderten Code liefert: getCode()
Als prototype event sehe das dann so aus:

//button id=save
Event.observe('save','click',function(event) {
 	 	  $('code').value = editor.getCode();
		  $('form').submit();//die form mit id = form
});

So siehts aus:

coole sache!

Des Rätsels Lösung ist ja eigentlich meistens Flash – so auch bei Soundmanager 2.
Nur bleibt Flash hier komplett im Hintergrund und wird nur als “Ausgabegerät” missbraucht.

Sounds lassen sich dann mittles einer wirklich mal sehr coolen JS API einbinden, triggern und noch einiges mehr.
Dazu ist das ganze auch noch hervorragend dokumentiert.

Im einfachsten Fall sieht sowas dann so aus:

var mySoundObject = soundManager.createSound({
 id: 'mySound',
 url: '/audio/mysoundfile.mp3'
});

mySoundObject.play();

soweit so praktisch schonmal.
Die Performance ist übrigens ebensfalls hervorragend.

Richtig gut wird es dann, wenn man Flash 9 vorrausetzt:

waveformData array: 
256 waveform data values available while playing sound

eqData array: 
256 EQ spectrum data values available while playing sound

peakData object: 
Left and right channel peak/volume data available while playing sound

damit lassen sich dann mal eben eigene Meter Darstellungen skripten. In JS.

someSoundObject.whileplaying = function() {
// Move 256 absolutely-positioned 1×1-pixel DIVs, for example (ugly, but works)
var gPixels = document.getElementById(‘graphPixels’).getElementsByTagName(‘div’);
var gScale = 32; // draw -32 to +32px from “zero” (i.e., center Y-axis point)
for (var i=0; i<256; i++) { graphPixels[i].style.top = (gScale+Math.ceil(this.waveformData[i]*-gScale))+'px'; } } [/sourcecode] HTML Canvas beispiel : http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html

benutzt wird das ganze übrigens unter anderem von:
http://muxtape.com/
http://thecloudplayer.com/
http://8tracks.com/
und natürlich http://openchords.org ;)