Hier gleich ein paar Anwendungsbeispiele:

//Variablen
@main_color: #2266bb;

h1 {
 color: @main_color;
}

// erweiterte Klassen
.rounded_corners (@radius: 5px) {
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
}

#header {
 .rounded_corners;
}

.main_table {
 .rounded_corners(10px);
}

// eingebettete Regeln
#header {
 color: red;
 a {
 font-weight: bold;
 text-decoration: none;
 }
}

// Funktionen
@border-width: 1px;
@base-color: #333333;

#header {
 color: @base-color * 3;
 border-left: @border-width;
 border-right: @border-width * 2;
}

.main_table {
 color: (@base-color + #111) * 1.5;
}

Um LESS zu nutzen bedarf es einer Anwendung, die den LESS-Code in normales CSS umwandelt. Dies kann man beispielsweise über die PHP-Klasse lessphp tun, die ich persönlich auch einsetze. Dies sieht dann in etwa so aus:

require 'lessc.inc.php';

try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:<br />'.$ex->getMessage());
}

Doch Alexis, der Entwickler von LESS, hat noch etwas viel genialeres vor. Derzeit arbeitet er an einer Javascript-Implementierung von LESS, die LESS-Code zur Laufzeit im Browser im normales CSS konvertiert – und dies in beeindruckender Geschwindigkeit. Damit entfällt das vorherige Parsen weg. Der Browser generiert selbst den CSS-Code. Dabei nutzt Alexis alle Möglichkeiten moderner Browser wie HTML5 und Local Storage voll aus.

Noch befindet sich LESS.js in Arbeit und wurde noch nicht freigegeben. Einen Eindruck der Arbeit kann man sich aber bereits jetzt beim Testen der Entwicklerversion holen.

Zum Einbinden von LESS.js ist folgender HTML-Code nötig (main.less stellt die LESS-Datei da):

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Das W3C Konsortium hat nun einen einheitliche Definition für das XMLHttpRequest-Objekt zur Standardisierung vorgeschlagen. Des Weiteren wird eine Spezifikation in Betracht gezogen, die die Domain-übergreifende Abfragen erlauben soll.

Lassen wir uns überraschen ob und wann die Standardisierung kommt und wie sie aussehen wird. Ich befürworte diesen Schritt jedoch grundsätzlich.

Doch es ist gar nicht so leicht, im heutigen Tarif-Dschungel den für sich passenden Anbieter mit dem richtigen Tarif zu finden. Nicht immer ist ein anfangs günstiger monatlicher Preis auch der beste Preis über die gesamte Laufzeit. Auf internetanbieter-tarife.de findet man aber eine nette Übersicht, bei der nicht nur der monatliche Preis für jeden Internetanbieter angezeigt wird, sondern über eine Laufzeit von 24 Monaten der durchschnittliche effektive Preis berechnet wird. Dabei sind aktuelle Sonderkonditionen und einmalige Einrichtungspreise berücksichtigt, z. B. die 7 Monate kostenlos von Vodafone.

Interessant für die meisten dürfte die Übersicht auf der Startseite sein, da man dort in Sekundenschnelle auswählen kann, welche Bandbreite man haben möchte, ob eine Telefonflatrate enthalten sein soll und ob man einen eventuell bereits bestehenden Telekomanschluss weiterhin nutzen möchte (für die Sortierung wird übrigens jQuery genutzt).

Wenn man sich die Übersicht anschaut, könnte man es schon fast schade finden, nicht in Baden Württemberg zu wohnen. Der Internetanbieter Kabel BW bietet nämlich Bandbreiten bis 100 MBit/s an. Der Upload könnte mit 2.500 kBit/s schneller ausfallen, ist aber letztlich doch mehr als der Downstream vieler DSL Kunden, wenn sie zu weit vom Verteiler entfernt wohnen.

Insgesamt eine empfehlenswerte und übersichtliche Seite, wenn man sich über aktuelle DSL-Tarife oder Sonderangebote der Internetanbieter informieren will. Aktuell scheint der Trend in Richtung VDSL zu gehen, wobei die Kabelanschlüsse immer leistungsfähiger werden und eine ernsthafte Konkurrenz zu den herkömmlichen DSL-Anbietern darstellen (zumindest in den Gebieten, in denen der Kabelanschluss auch geschaltet werden darf bzw. kann).

Firefox 3.5 bietet gegenüber den Vorgängern einen “private surf”-Modus, eine überarbeitete Chronik und eine verbesserte Tab-Bedienung. Die neue TraceMonkey-Javascriptengine beschleunigt die Ausführung von JS-Code imens. Weitere Infos sind in einem älteren AS-Beitrag bereits aufgelistet.

Im Frühjahr 2010 soll dann die Version 3.6 des Mozilla-Browsers erscheinen. Die Entwickler haben sich vorgenommen, die Programmoberfläche samt Menüleiste nochmals schlanker und übersichtlicher zu gestalten. Es soll sogar möglich sein, die Menüleiste automatisch ganz abzuschalten. Allgemein soll FF schneller starten und auf Benutzereingaben flotter reagieren.

Im Inneres des Browsers werkelt dann die Gecko-Engine in Version 1.9.2, die es ermöglicht Töne bei festgelegten Ereignissen auszugeben. Zudem kann die GeolocationAPI nun neben Breiten- und Längenangaben auch mit für Menschen lesbare Ortangaben zurückgehen.

TraceMonkey wurde nochmals optimiert und arbeitet nun noch ein Stückchen schneller. Einige weitere CSS3-Eigenenschaften werden unterstützt. So können nun mehrere Hintergrundbilder für eine Element definiert werden, als Hintergrund dürfen nun auch Farbverläufe angegeben werden und die Hintergrundgröße seperat festgelegt werden.

Die erste Alpha-Vorversion von 3.6 steht zu Testzwecken zum Download zur Verfügung.

Inzwischen existiert bereits eine erste Entwicklerversion von Firefox 3.7. Über technische Neuerungen schweigt Mozilla sich noch aus. Bekannt wurde jedoch, dass man verstärkt Glass-Effete ala Windows Vista/7 verstärkt einsetzen will.

Aber auch am nächsten Hauptrelease FF4 wird schon getüftelt. Dabei setzt man wie in bei FF3.7 auf Glass-Efekte. Unter den Entwicklern diskutiert man derzeit, ob man, wie bei Googles Chrome, die Tableiste anstelle der Titelleiste in den Fensterkopf verschiebt um so vertikalen Platz zu schaffen. Zudem denkt man darüber nach, die Lesezeichen-Leiste ganz zu entfernen und diese durch ein Widget zu ersetzen.

Hier ein paar visuelle Eindrücke der zukünftigen Versionen, an denen derzeit gearbeitet wird.

Flash bietet sehr vielseitige Möglichkeiten und gilt seit jeher de facto als Standard für Webanimationen. Die Wiedergabe geschieht über den kostenfreien Flash-Player, der mittels Plugin in den Browser eingebunden wird. Jedoch handelt es sich bei Flash um eine proprietäre Software. Sie muss also durch teure Lizenzgebühren erworben werden um eigene Anwendungen in Flash zu erstellen.

Genau hier fehlte es bisher an geeigneten Alternativen.

Bereits vor über einem Jahr veröffentlichte Ilmari Heikkinen – wohl weitestgehend unbemerkt – seine Javascript-Bibliothek CakeJS (Canvas Animation Kit Experiment). CakeJS orientiert sich im Groben am “großen Bruder” Flash.

Auf der Demo-Seite des Projekts finden sich zahlreiche kleine Beispielanimationen, die einen Vorgeschmack darauf geben, was mit CakeJS möglich ist. Das Highlight sind die beiden mit CakeJS erstellten Spiele Missle Fleet und Web Mega Pong. Beide Spiele lassen sich leicht per Tastatur steuern und machen ziemlich Spaß.

In der umfangreichen Dokumentation findet man eine gute Übersicht aller zur Verfügung stehenden Funktionen und Methoden samt Erklärungen.

CakeJS ist für Browser entwickelt wurden, die von Haus aus Canvas unterstützen und funktioniert mit Firefox (2+), Safari (3+) und Opera (9.6+). Grundsätzlich sollte es zwar möglich sein, dass CakeJS auch in Microsofts Internet Explorer mittels ExplorerCanvas läuft, jedoch scheint die Ausführungsgeschwindigkeit zu langsam und der Resourcenverbrauch zu hoch zu sein um die Animationen ordentlich darstellen zu können.

Vorgenommen hatte sich Heikkinen viel: Physikengine, Kollisionsabfrage und das Senken der CPU-Last, doch seit mehreren Monaten steht die Entwicklung still. Vielleicht kommt demnächst ja doch noch eine neuere Version…

InfoVis ermöglicht das Darstellen interaktiver, dynamischer Graphen und Baumdiagramme. Das hört sich genial an und sieht in der Praxis noch viel besser aus.

In der nun vorliegenden Version 1.1. wurde die Bibliothek in einzelne Module unterteilt um die Wiederverwendbarkeit des Quellcodes zu erhöhen.

Zudem kann man nun mehrfache Instanzen einer jeden Animation erzeugen. Dadurch können nun die Darstellungsformen kombiniert und hintereinander ausgeführt werden.

InfoVis arbeitet mit jeder Javascript-Bibliothek zusammen, egal ob jQuery, Prototype, YUI, MooTools usw, InfoVis lässt sich zusammen mit allen nutzen.

Vorhandere Klasse können leicht verändert und erweiteret werden, außerdem lassen sich eigene Animation erstellen. Die Möglichkeiten sind grenzenlos.

Eine erstklassige Dokumentation und viele Beispiele sind auf der Entwickler-Seite für jedermann zugänglich.

Am gestrigen Mittwoch stellte Adobe mit dem eigenen BrowserLab ein von der Funktionalität her ähnliches Tool zur Verfügung, das ebenso die Website-Gestaltung in bezug auf Browserprobleme vereinfachen soll.

Im Gegensatz zu Microsofts Anwendung wird Adobe BrowserLab als Online-Dienst angeboten. Vorerst wird dieser sogar kostenlos verfügbar sein. Adobe möchte sein Tool jedoch später zu einem kostenpflichtigen Dienst umstellen. Wann dies geschehen soll, ist noch offen.

Im BrowserLab ist es zum einen möglich eine Homepage auf zwei verschiedenen Browsern oder sogar Betriebssystem nebeneinander oder überlagend darzustellen, wodurch es recht einfach ist, Unterschiede der einzelnen Renderer auszumachen.

Bisher werden folgende Browser unterstützt (weitere folgen):

• Internet Explorer 6 (Windows XP)
• Internet Explorer 7 (Windows XP)
• Firefox 2 (Windows XP)
• Firefox 3 (Windows XP)
• Firefox 2 OS X
• Firefox 3 OS X
• Safari 3 OS X

Von Haus bietet Canvas in keiner Implementierung eine Funktion zum schnellen und einfachen Erzeugen von regelmäßigen Vielecken. Daher setzte ich mich hin und programmierte angeregt durch canvas.quaese.de zwei entsprechenende canvas-Objekterweiterungen.

Außerdem wollte ich gern gezackte Figuren wie Sterne und Sonnen mit einem Funktionsaufruf erzeugen können. Also nahm ich meinen bisherigen Code her und überarbeitete ihn.

Das Ergebnis all des Codens kann sich meines Erachtens sehen lassen. Vor allem bei Mehrfachaufrufen ergeben sich sehr schicke Muster.

Die Methoden selbst sind nach einem simplen Prinzip aufgebaut. Man gibt die Position des Vieleckmittelpunktes, die Anzahl der Ecken, den Radius (Mittelpunkt->Ecke) und Anfangswinkel (meist 0) an.

Den Quelltext der Objekterweitungen kann ich nachfolgend sehen:

canvas.drawPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.drawZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

// Anwendungsbeispiel:
canvas.fillStyle = "#009";
canvas.strokeStyle = "rgb(0,0,0)";
canvas.lineWidth = 2;
// Sechseck
canvas.drawPoly(60,60,6,40,0);

Im Grundlagenbeitrag zu Canvas kann man sich genauere Informationen zum Einbau holen. Auch ein Blick in den Quellcode meiner angefertigen Demo hilft sich dem ein oder anderen und zeigt die Möglichkeiten der Methoden auf.

Ziel des Spiels ist es, aus den zur Verfügung stehenden Buchstaben (englische) Wörter zu bilden, für die Punkte gibt. Manche Buchstaben bringen mehr, andere weniger Punkte. Bei längeren Wörter (mehr als 3 Buchstaben) kommen noch verschiedene Multiplikatoren hinzu, die zu einem gehörigen Punktezuwachs sorgen.

Das noch unfertige Spiel ist im Groben ein Mix aus Tetris und Scrabble. So fern man dem Englischen mächtig ist, macht das Spiel auch richtig Spaß. Achtung: Suchtgefahr!

Methoden zum Darstellen von Text sind in den (vorläufigen) Spezifikationen des Canvas-Elementes bereits vorgesehen.

Aktuelle Versionen von Webkit, Safari4 (Beta), Chrome 2 (Beta) und Firefox 3.5 (Beta) implementieren die Canvas-Text-Methoden, doch für die breite Masse eingesetzter Browser gilt dies nicht.

Die Lösung liefert ein Javascript-Bibliothek mit dem einfachen und treffenden Namen canvas-text.

Diese Bibliothek fügt die drei HTML5-Methoden zum Zeichnen von Text in Canvas (strokeText, fillText und measureText) den Browsers hinzu, die diese Funktionen nicht von Haus aus beherrschen (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3 und Chrome 1.0).

Canvas-text wurde so umgesetzt, dass es die Richtlinien des W3C und des WHATWG für das canvas-Elemente nach HTML5 erfüllt. Außer der ExCanvas-Bibliothek für den Internet Explorer und der canvas.text.js-Datei werden keine anderen Dateien benötigt.

Vorhandene browser-spezifische Implementierungen werden nicht überschrieben, es sei denn, man gibt dies explizit an.

Der Einbau sieht wie folgt aus:

<!--[if IE]><script type="text/javascript" src="excanvas.js" /><![endif]-->
<script type="text/javascript" src="canvas.text.js" />

Um canvas.text auch zu nutzen,benötigt man nun noch Schriftarten. Typeface.js bietet einige Font-Files an. Eine größere Auswahl gibt es bei Mada’s Playground. Diese müssen unbedingt in einem Ordner mit dem Namen faces abgelegt werden, der sich im selben Verzeichnis wie die Datei canvas.text.js befindet.

Zudem gilt es zu beachten:

Der Dateiname canvas.text.js darf NICHT geändert werden!

Die Schriftartendateien müssen klein geschrieben werden und dem Format family-weight-style.js entsprechen. Family gibt den Namen der Schriftart an wie Arial oder Times new roman, weight steht für die Stärke (bold [=fett] oder normal) und style für den Stil (italic [=kursiv] oder normal).

Bei Schriften mit mehreren Wörtern werden die Leerzeichen durch Unterstriche ( _ ) ersetzt.

Hier ein korrektes Beispiel: optimer-normal-normal.js

Die Schriftarten-Dateien müssen nicht explizit eingebunden werden. Dies geschieht per Ajax zur Laufzeit.

Die browsereigenen canvas.text-Umsetzungen lassen sich per Schalter deaktivieren. Dafür ist folgender Aufruf geeignet:

<script type="text/javascript" src="canvas.text.js?reimplement=true" />

Auf der Projektseite von canvas.text finden sich 5 Live-Demos, die die Möglichkeiten aufzeigen. Ein Blick in den Quellcode zeigt auch einige Kniffe zur Umsetzung.

Zu guter letzt noch ein Codeschnipsel, wie man in Canvas dann damit umgeht:

canvas.font = "20px 'optimer'";
canvas.strokeStyle = "rgb(0,0,200)";
canvas.textAlign = 'left';
canvas.textBaseline = 'middle';
canvas.fillText('Ein normaler Beispieltext ...', 150, 100);
canvas.font = "bold 25px 'optimer'";
canvas.strokeText('... und noch ein fetter Beispieltext', 150, 200);