“The way I think about it is: HTML5 is HTML5. You implement the standard to the letter and then in addition to that, there are ways to differentiate the broader web browsing experience,” Bixhorn said. “If you look at our hardware acceleration implementation and you compare it to other browser makers, we’re all doing the HTML5 spec, but we’re able to differentiate the experience in IE. With site pinning, it’s outside of the bounds of HTML, but we’re creating a better experience there too.”
Internet Explorer Evangelist Ari Bixhorn, readwriteweb.com

Warum wird mir immer übel, wenn ich von Mitarbeitern von Microsoft sowas lese?

Und wieder zwei Seiten die Euch interessieren werden, wenn ihr HTML5 interessant findet und schon heute nutzen wollt.

• Peter Kröner hat eine kleine FAQ zum Thema veröffentlicht: Fragen zu HTML5 beantwortet
• Bei den Nettuts gibt es 25 Dinge, die man über HTML5 wissen sollte: 25 HTML5 Features, Tips, and Techniques you Must Know

Das Foto ist diesmal von N-ino@flickr

Die Kommunikation zwischen Browser und Server erinnert mich momentan irgendwie an die Schlümpfe. Es läuft immer nach dem Motto “Papa Schlumpf, wie weit ist es denn noch?” Worauf der der Server Papa Schlumpf antwortet “Nicht mehr weit.”. Das ganze wiederholt sich andauernd und hat einen entscheidenden Nachteil: Es verursacht Last auf dem Server, wo wir sie nicht wirklich benötigen.

Mit HTML5 bietet sich uns hier eine neue Möglichkeit die Kommunikation zwischen Client und Server zu realisieren: WebSockets.

Technisch betrachtet startet das WebSocket-Protokoll wie ein ‘normaler’ http-Request/Response-Zyklus, nur, dass nach der Übertragung der HTTP-Request- und Response-Header die zugrundeliegende TCP-Connection bestehen und dadurch für binäre bzw. Zeichenketten-Übertragung in beide Richtungen frei wird. Dadurch kann auch der Server zu jedem Zeitpunkt Daten zum Client schicken. Zudem wird der weitere Protokoll-Overhead im vergleich zu HTTP stark reduziert (im Idealfall nur 2 Bytes zusätzlich pro Text-Nachricht und Richtung).Wikipedia

Was für einen kleinen Blog eher uninteressant ist macht für größere Applikationen schon mehr Sinn. Noch kann man WebSockets nur mit Safari und Chrome nutzen aber wer sich ein wenig mit JavaScript auskennt kann hier eine schicke Fallback-Lösung entwickeln.

Neugierig? Ein Blick auf nettuts.com lohnt sich: Start using HTML5 WebSockets today

Foto Trevor Coulthart@flickr

Das Resultat kann sich sehen lassen denn es ist in meinen Augen momentan die brauchbarste Quelle zu HTML5 und ein hervorragender Einstieg in den (vielleicht irgendwann mal) neuen Standard. Nach einer informativen Einführung in die Thematik demonstriert Peter anhand zahlreicher Beispiele die Neuheiten in HTML5. Der enorme Vorteil an diesem Buch ist aber auch zugleich die kalkulierte Schwäche: Das Buch beschreibt einen Standard der noch nicht fertig ist (und wenn es nach dem W3C geht dies wohl auch nicht in den nächsten 10 Jahren wird) und der sich in Entwicklung befindet. Viele interessante Diskussionen werden noch immer über HTML5 geführt und auch wenn alle modernen Browser in einem gewissen Umfang HTML5 unterstützen nutzt das Buch in gewisser Weise den momentanen Hype um HTML5.

Trotzdem möchte ich das Buch allen empfehlen, die sich für HTML5 interessieren und sich als “early adopter” sehen. Einige Dinge kann man sicherlich schon jetzt produktiv bei kleinen Projekten verwenden und ich persönlich erwarte auch nicht das viele der Dinge, die Peter in seinem Buch beschreibt, nochmal über den Haufen geworfen werden. Gerade bei Themen wie Canvas sollte man, meiner Meinung nach, schnell Erfahrungen sammeln denn hier bieten sich sehr viele potentielle Möglichkeiten für neue Anwendungen im Web.

Immer komplexere Webanwendungen erfordern auch immer größere Mengen an Daten, die gespeichert werden müssen. Mit HTML5 kann man diese zumindest teilweise auf den Client auslagern oder wenigstens die Last auf den eigenen Datenbankservern etwas mindern.

Für die kommende Ausgabe der Weave (#4.2010) habe ich auf 5 Seiten ein kleines Tutorial geschrieben das Euch zeigt, wie man mit modernen Browsern schon jetzt dieses wirklich geniale feature von HTML5 nutzen kann.

Nachdem Arne Kriedemann mich aber eben auf einen etwas älteren Artikel im Smashing Magazine hingewiesen hat habe ich auch auf dieser Seite die HTML5-Integration etwas vorangetrieben. Noch ist das alles nicht sehr umfangreich aber es wird langsam aber sicher.

Wie sieht es bei Euch aus? Ist HTML5 schon in der Planung oder noch leise Zukunftsmusik?

Eigentlich spielen wir ja alle gerne mit Dingen, die noch nicht fertig sind und wenn manche könnten, hätten wir hier sicherlich schon Seiten mit HTML6 oder so. Damit wir aber erstmal alle damit aufhören können uns lange Doctypes zu merken, wie für XHTML oder HTML4 stellen wir unsere Seite mit wenigen Zeilen Code auf HTML5 um:

1. <!DOCTYPE html>
2. <html>
3. <head>

Das tut keinem Browser weh und wir können jetzt hier und da noch ein paar Attribute sparen.

Beispiel: Zeichensatz

1. <meta charset="UTF-8" />

Klar, das ist noch keine vollständige Umstellung auf HTML5 denn HTML5 bietet noch zahlreiche sehr coole Funktionen aber wir fangen doch alle irgendwie klein an und was spricht schon gegen einen neuen Doctype.

PS: Wenn ihr es nicht mehr erwarten könnt und beispielsweise schon zahlreiche neue Elemente einbauen wollt dann schaut mal beim HTML5Doctor rein und vergesst den IE6 und Firefox 2 nicht.

Dieses Blogposting wurde übrigens inspiriert von Kommentaren beim Nasendackel. It’s HTML5-time.

Foto: adactio@flickr

HTML5 revolutioniert das Web, meint Sebastian Deutsch – Gründer der Agentur 9elements. Er berichtet in WEAVE 06.2009 über die Potentiale, Möglichkeiten und das derzeit bereits Machbare. Außerdem stellt er hier noch ein paar gute Quellen zum Thema zur Verfügung
weave.de

Übrigens: In der Weave erscheinen auch hin und wieder Artikel von mir. Dieser Blogpost ist aber vollkommen unabhängig von dieser Kooperation.

Besonders gut gefällt mir bei Chrome der Ansatz, den die Entwickler bei den Erweiterungen gehen: Mozillas Firefox zeigte hier ja schon vor einigen Jahren, wie interessant Erweiterungen für Nutzer sein können. Angefangen bei Werbeblockern, E-Mail Benachrichtungen bis zu vollwertigen Twitter-Clients findet man allerlei nützliches (aber auch überflüssiges) um den eigenen Browser zu verbessern.

Googles Chrome geht hier einen interessanten Weg denn im Prinzip basieren die Extensions erstmal auf HTML, CSS und JavaScript und nutzen die Möglichkeiten, die diese Sprachen liefern (u.a. auch client-side data storage in HTML5), vollständig. Es lässt sich also, mit Kenntnissen in diesen drei Sprachen schon eine eigene Erweiterung programmieren, was ich Euch an einem einfachen beispiel demonstrieren möchte.

Vorbereitungen

1. Lade Dir Chrome oder Chromium (wenn Du ein wenig Googlest ersparst Du Dir ggf. den Browser selber compilieren zu müssen) auf Deinen Rechner: (Windows/Linux / Mac)
2. Erstelle einen Ordner "HelloWorld" auf Deinem Rechner der den Code beinhalten wird.
3. Erstelle eine Datei manifest.json, die einige Informationen zu Deiner Erweiterung beinhalten wird.

manifest.json

1. {
2. "name": "Hallo Welt",
3. "version": "1.0",
4. "description": "Meine erste Erweiterung.",
5. "browser_action": {
6. "default_icon": "icon.png"
7. }
8. }

Die Bezeichnungen in der JSON-Datei sollten selbsterklärend sein. Die einzigen Punkte hier sind "browser_action" und "default_icon" welche wir brauchen, damit unsere Erweiterung auch ein Icon neben der Adressleiste in Chrome bekommt.

icon.png

Natürlich brauchen wir auch ein passendes Icon für unsere Anwendung. Ich greife hier auf ein Iconset von Manuela Hoffmann zurück, welches ihr unter www.pixelgraphix.de findet. Das Icon Eurer Wahl wandelt Ihr dann noch schnell in png um und nennt es icon.png. Sowohl manifest.json als auch icon.png kommen in den Ordner HelloWorld.

Erster Test

Und schon können wir die Erweiterung testen:

1. Öffne Chrome und dort die Seite mit den Erweiterungen. (Unter Linux findet man diese, wenn man auf das Icon mit dem Schraubenschlüssel klickt. Am Mac unter dem Menüpunkt "Fenster.")
2. Klicke auf "Entwicklermodus"
3. Importiere den Ordner HelloWorld indem Du auf "Entpackte Erweiterung laden…" klickst

Du solltest jetzt, wenn Du alles richtig gemacht hast, das Icon oben neben der Adressleiste sehen. Du kannst zwar schon auf das Icon klicken aber noch bringt Dich das nicht weiter.

Etwas anzeigen

Interessanter wird es jetzt, wenn wir die Erweiterung ein wenig ausbauen. Es geht uns jetzt erstmal nur um ein kleines Fenster in dem, wie der Name des Tutorials schon vermuten lässt, "Hallo Welt" steht.

Damit unsere Erweiterung auch weiß, welche HTML-Datei sie anzeigen soll, ergänzen wir die manifest.json nun um eine neue Zeile:

1. ...
2. "browser_action": {
3. "default_icon": "icon.png",
4. "popup": "popup.html"
5. },
6. ...

popup.html

Bei der Datei popup.html, die wir ebenfalls in unserem Ordner HelloWorld speichern, handelt es sich um eine simple HTML5-Datei:

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Hallo Welt</title>
6. </head>
7. <body>
8. <p>
9. Hallo Welt.
10. </p>
11. </body>
12. </html>

Wenn Du diese Erweiterung jetzt installierst (deinstallier die allte Version besser vorher – habe ich schon erwähnt, wie toll es ist nicht bei jeder Änderung an Erweiterungen den Browser neu starten zu müssen?) solltest Du bei einem klick auf Dein Icon den Text "Hallo Welt" lesen können.

Optimierungen

Damit unsere Ausgabe nun etwas schöner ist formatieren wir sie jetzt noch mit etwas CSS. Auf die Möglichkeiten die JavaScript uns noch bietet gehe ich vielleicht später mal ein.

HTML

1. <head>
2. ...
3. <link rel="stylesheet" href="style.css" type="text/css" />
4. </head>

CSS

1. body {
2. font-size: 150%;
3. font-family: Helvetica,Arial,Verdana,sans-serif;
4. color: #fff;
5. text-shadow: 0px 2px 3px #555;
6. font-weight: bold;
7. background: #cdd9e6;
8. width: 350px;
9. height: 75px;
10. }