In eigener Sache: Updates

Donnerstag, 09. Dezember 2010

So, heute hab ich mir mal die Zeit genommen, am Blog noch etwas Fine Tuning zu machen. Das ganze fing an mit Updates: WordPress 3.0.3 und einige Plugins.

Anschließend hab ich noch ein wenig am Theme gewerkelt. Das Theme gibt sich jetzt als HTML5 aus, auch wenn ich dessen ganzen Vorteile (semantische Strukturierung, neue Elemente) noch nicht nutze. Aber dafür habe ich jetzt validen Quelltext. Das Google Buzz-Plugin erzeugt nämliche mehrere data-Attribute, die es erst in HTML5 gibt. Das Suchfeld hab ich auch etwas angepasst, das stand so eckig und allein da rum. Jetzt hat es ‘nen Suchbutton, eine HTML5-Auszeichnung als Suchfeld (<input type="search">), runde Ecken und wurde noch ein paar Pixel verschoben. In Chrome gabs außerdem ‘nen hässlichen Bug, den hab ich behoben.

Firefox 4 Beta 4

Mittwoch, 25. August 2010

Es wird fleißig an Firefox geschraubt. Gestern ist die Beta 4 erschienen, 3 weitere und ein RC sollen noch folgen.

Mit Version 4 werde ich aufhören, Linux-x64-Versionen zu kompilieren, das macht Mozilla mittlerweile selbst. Die Beta 4 ist z.B. hier als x64 erhältlich.

Nun möchte ich noch zu einigen Neuerungen kommen. Die Oberfläche wurde schon mehrfach verbloggt, wird wohl mittlerweile jeder wissen: Tabs sind standardmäßig on Top, Windows Aero wird unterstützt, Menü wurde in einem Button zusammengefasst. Einige schreien hier vielleicht “geklaut!”, aber im Gegensatz zu z.B. Chrome lässt sich das in Firefox alles wieder ändern. Im folgenden möchte ich noch einige technische Neuerungen zeigen. Das ist eher für Web-Entwickler interessant.

Unter der Haube arbeitet eine neue JavaScript-Engine namens JägerMonkey, die derzeit auch noch stark entwickelt wird. Damit holt Firefox wieder etwas auf. Zugegeben, Firefox ist im Moment einer der langsamsten Browser, aber auf meinem Laptop läuft der immer noch. Und ich habe 40 AddOns installiert. Viele dieser Dinge gibt es gar nicht für Chrome.

Viele Dinge aus HTML5 und CSS 3 werden jetzt unterstützt. Dabei ist vor allem eine echter HTML5-Parser, Formular-Validierung, SVG-Animationen und CSS-Übergänge. CSS-Animationen sollen noch folgen. SVGs sollen auch als Bilder gerendert werden, sodass sie als <img> oder CSS-Hintergrund benutzt werden können. WebM wird in HTML5-Videos unterstützt, damit ist YouTube teilweise schon ohne Flash möglich. Neben 2D-Grafiken erlaubt <canvas> auch 3D-Bilder mittels WebGL.

Danke des HTML5-Parsers können SVG-Bilder und MathML-Objekte direkt in ein HTML-Dokument eingebettet werden.

Die Gecko-Engine erlaubt in CSS den calc()-Selecktor, mit dem Größen- und Positionsangaben viel flexibler angegeben werden können. Sollen z.B. zwei gleich große Boxen nebeneinander angezeigt werden, mit 1em Abstand außen und 3cm Abstand innen, kann man ihnen die Breite calc(50%-1.5cm-1em) geben.

In JavaScript wird es einfacher, mit Dateien des Benutzers zu arbeiten (<input type="file"> oder Drag’n'Drop). Neben dem FormData-Objekt, dass ein einfaches Hochladen von Dateien mittels XMLHttpRequest erlaubt, lässt mit der url-Eigenschaft eines File-Objektes eine Bild fast überall in der Webseite benutzen, z.B. als Quelle für ein <img>-Element oder als CSS-Hintergrund.

Unter Windows Seven wird Multi-Touch unterstützt, wenn der Bildschirm es unterstützt. Webseiten können also erkennen, dass ein Multitouch-Gerät verfügbar ist, können Touch-Eingabe von Mausklicken unterscheiden und mehrere Finger gleichzeitig verarbeiten.

Als eine der letzen Änderungen ist eine neue CSS-Funktion eingeflossen. Damit können beliebige HTML-Elemente einer Webseite als Hintergrund für ein anderes Element benutzt werden. Zwei sinnvolle Nutzungsmöglichkeiten sind Reflektionen von Elementen, die automatisch generiert werden sowie Galerien, die Vorschaubilder aller Seiten anzeigen. Da die die Hintergründe live aktualisiert werden, funktioniert das ganze sogar mit Videos und Iframes.

Schlägereien um HTML5

Montag, 07. Juni 2010

Ich bin ja großer Befürworter von HTML5, und auch wenn Flash vielleicht einige sinnvolle Anwendungsgebiete hat, lässt sich 80% seiner heutigen Aufgaben auch mit HTML5 lösen. Dafür muss aber eine ausreichende Browser-Unterstützung gegeben sein. Mittlerweile rüsten eigentlich alle nennenswerten Browser auf, nur die beiden großen kommerziellen wollen das ganze zu einer Schlammschlacht machen.

Der Vorteil von HTML5 gegenüber beispielsweise Flash ist ja seine Offenheit. Eigentlich kann jeder HTML5 lernen, es benutzen, oder auch Software dafür schreiben. Was in HTML5 geschrieben ist, sollte eigentlich Browser-übergreifend funktionieren, vorausgesetzt, der Browser beherrscht es ausreichend. Aber Apple ist sich dafür zu gut. Deswegen habe  sie eine Galerie online gestellt, in der man die Vorteile von Standards wie HTML5, CSS3 oder JavaScript demonstriert bekommt.

These web standards are open, reliable, highly secure, and efficient. [...] Standards aren’t add-ons to the web. They are the web. And you can start using them today.

Es ist dann aber eine Sauerei, diese Demos nur für den hauseigenen Browser zu schreiben. Andere Browser werden grundsätzlich ausgesperrt. Nicht weil sie kein HTML5 könnten, sondern weil Apple Browser-Snffing benutzt. Die “wenigen Zeilen Quellcode”, mit denen sich die Beispiel schreiben lassen sollen, sind mehrere 100kB groß, gespickt mit WebKit-spezifischen Angaben. Gut, diese Browser-Erweiterungen muss man im Moment noch nutzen, um HTML5 übergreifend seinsetzen zu können. Aber dann auch bitte alle. Um einen border-Radius zu benutzen, empfiehlt sich folgende Auszeichnung im CSS:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Damit sind eigentlich alle Browser abgedeckt (außer IE, der keinerlei runde Ecken unterstützt). Hilfreich ist hier auch der CSS3 Generator.

Das hier ist einfach nur noch frech:

Not all browsers offer this support. But soon other modern browsers will take advantage of these same web standards

Tatsächlich unterstützen nicht alle Browser diese Standards. Beim IE und beim Firefox sind tatsächlich noch einige Dinge nicht implementiert. Zumindest beim Firefox weiß ich aber genau, wie weit die Entwicklerversion schon ist. Die macht wieder einiges wett. Wie der GoogleWatchBlog berichtet, funktionieren in Chrome alle Demos – bis auf das Video-Demo. Doch Tobi hat sich noch mehr Mühe gemacht und das genauer analysiert. Angeblich wird das Video nur von Quicktime abgespielt. Tatsächlich handelt es sich bei dem Video um eine .mov-Datei, die allerdings auf eine MP4-Video verweist, welches Chrome wiederum problemlos abspielen kann.

Jetzt möchte ich zum anderem Big Player kommen: Microsoft hat nämlich auch getestet, wie gut die Browser HTML5 können. Und sie sind zum Schluss gekommen, dass der IE der einzige Browser ist, der HTML5 vollständig unterstützt. Nur haben sie sich halt ein paar Tests rausgesucht, die der IE auf jeden Fall besteht, und dann mal bei der Konkurrenz geschaut. Und deswegen wurde auch direkt ein Gegentest entworfen, der nur Tests enthält, von denen der IE nicht einen besteht. Traue keiner Statistik, die du nicht selbst gefälscht hast.

Zuletzt möchte ich noch ein paar andere Seiten nennen, die sich mit der Verbeitung von HTML5 beschäftigen: