HTML5: Neue Tags usw.

Als erstes Firefox 4 Beta geladen.

Der Audio Tag funktionierte erst nachdem ich die Datei ein mal direkt in der Adressleiste eingegeben hatte und ein entsprechendes Programm gewählt hatte. Ein „diese Auswahl immer verwenden / speichern / merken“ ist nicht nötig.

<audio src=“http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg“  autoplay>Your browser does not support the <code>audio</code> element.</audio>

Der Videotag funktionierte auf Anhieb. Ich vermute, daß der Player direkt im Firefox drin ist. Es sieht auf den ersten Blick nicht nach dem üblichen „Standard-Flash-Plugin“ aus.

<video src=“http://tinyvid.tv/file/1dmtxdzd1tuov.ogg&#8220; preload=“none“ width=“320px“ height=“240px“ poster=“http://tinyvid.tv/poster/1dmtxdzd1tuov.png&#8220; controls=“controls“>No HTML5 video tag support …</video>

Sehr interessant ist der <canvas> Tag. Man kann 2D mit Javascript rummalen.

function draw() {
var canvas = document.getElementById(„canvas“);
var ctx = canvas.getContext(„2d“);

ctx.fillStyle = „red“;

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
// was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
ctx.lineTo(30, 30);
ctx.fill();
}

<canvas id=“canvas“ width=“300″ height=“300″></canvas>

Spontan fallen mir Monitoring- / Statistikseiten ein, die Graphen malen. In etwa so wie SVG Grafiken, in denen man mit XML malt.

Offline Surfen / Caching: Mittels einer /cache.manifest definiert man was wie auf Browser-/Nutzerseite zwischengespeichert werden soll. Im Firefox passiert das ganze in einem extra Verzeichnis. Z.B. Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache .

Für einzelne Dateien oder ganze Verzeichnisse kann ein Fallback definiert werden:

CACHE MANIFEST
FALLBACK:
foo/bar/ foo.html

Alles unter foo/bar: foo/bar/test/1.htm …

Ein Versionierungskommentar

CACHE MANIFEST
# v1

zeigt dem Browser an, ob er alles neu laden soll / es eine Änderung an der Manifest Datei gegeben hat. Einfach auf v2 setzen oder anderweitig ändern.

Die boolsche Eigenschaft „navigator.online“ zeigt online/offline Browsing an. Im auf dieser Seite beschriebenen Beispiel wird im offline Modus alles in ein Javascript Variable gespeichert. Man hat ja keinen Zugriff auf das Dateisystem. Wenn man also die Seite schließt, ist es trotzdem weg. Das Beispiel sendet beim Wieder-Online-Gehen alle offenen Änderungen an den Server. Es ist sicher vorstellbar, daß man es auch in einer lokalen CouchDB speichern könnte. Ubuntu hat es seit einigen Ausgaben standardmäßig mit drin. Vieles ist möglich …

Offline Caching gibt es seit FF3. Mit HTML5/FF4 kommt eine richtige FileAPI. Damit kann man auf vorher vom Nutzer freigegebenen lokale Dateien zugreifen. Damit kann man o.g. Beispiel gut erweitern. Seit FF2 gibt es ein Feature „DOM Storage“. Siehe auch die W3C Web Storage Spezifikation. Wird aber bis heute nur von Gecko/Webkit Browsern unterstützt und ist damit quasi nicht brauchbar.

Um lokale Dateien einzulesen, benutzt man das FileReader Objekt.

Es gibt scheinbar (noch) keine benutzbare Möglichkeit um Dateien zu schreiben …

Web Workers: Hintergrundprozesse welche mit dem aufrufenden „Vordergrundprozeß“ interagieren können. Können „Ajax-Anfragen“ (XMLHttpRequest) absetzen.

var myWorker = new Worker(‚my_worker.js‘);
myWorker.onmessage = function(event) {
print(„Called back by the worker!\n“);
};

Die Thread laufen „nonstop“ / ein mal oder werden per setInterval() periodisch aufgerufen. Ein Timeout kann auch gesetzt werden. Ein Worker kann Subworker starten / aufrufen.

Worker können Nachrichten hin und her schicken. Die Nachrichtenobjekte werden automatisch intern in JSON umgewandelt.

Es gibt im DOM Worker und SharedWorker. Worker habe Listener/Properties onMessage und onError. Sie haben eine postmessage und eine terminate Methode. Es gibt einen WorkerGlobalScope. Ein ChromeWorker hat nichts mit Google zu tun. Er ist wie ein „normaler“ Worker, läuft nur zusätzlich mit „chrome“ Rechten. SharedWorker ist noch nicht umgesetzt.

Sehr interessante Beispiele hier. Oder hier.

Advertisements
Dieser Beitrag wurde unter Uncategorized veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s