Ajaxschmiede.de

Die bisherige Version den Acid3-Tests, über den wir bereits berichteten, beinhaltete einen Einzeltest, der von keinem Browser bestanden wurde – und auch nicht bestanden werden sollte.

Es handelt sich dabei im Grunde um eine Endlosschleife bei verschachtelten click-Events auf einem HTML-Element. Dies wäre zum Beispiel hier der Fall:

<input onclick="this.click()" type="checkbox" />

Da das Verhalten der Browser bei diesem Problem selbst im aktuellen Vorschlag von HTML5 nicht festgegelegt wurde, wird in der WHAT-WG-Mailingliste darüber diskutiert. Als Folge darauf entfernte der Acid3-Entwickler Ian Hickson den entsprechenden Test.

Zuvor kündigte das WebKit Open Source Project an, ihre Webkit-Engine wegen des problematischen click-Events nicht zu ändern.

Nachdem nun der Acid3-Test an die Situation angepasst wurde, schneiden nahezu alle Browser (ein wenig) besser ab. Der aktuelle Webkit-Browser, der Grundlage für Safari ist, kommt nun auf sensationelle 93 von 100 Punkten – wie man dem nachfolgenden Screenshot entnehmen kann.

Um Webkit nutzen zu können, muss vorher jedoch bereits Safari installiert wurden sein. Anschließend führt man die run-nightly-webkit.cmd-Datei aus.

Seit Version 3 steht der Apple-Browser neben MacOS- auch Windowssystemen zur Verfügung.

Ich hatte nicht geplant, dieses Jahr zur CeBIT zu fahren. Weniger Tage vor Messebeginn bekam ich jedoch 2 Fachbesucher-Tickets in die Hand gedrückt. Kurzfristig entschlossen Patrick und ich die Messe zu besuchen.

Green IT, also umweltfreundliche Informationstechnologie, lautet das Motto der diesjährigen CeBIT. In Halle 9 konnte man anhand zwei Musterbüros den Stromverbrauch im Jahr 2003 und 2008 vergleichen. Allein im Ruhezustand war der Verbrauch 2003 schon fast 3 mal höher als 2008. Ich war erstaunt, welch enormen Energieverbrauch Drucker bzw. derartige Multifunktionsgeräte haben.

Die CeBIT drehte sich aber auch um das Thema Internet. So gab es täglich Vorträge zum Thema Web 2.0, Ajax-Anwendungen, Online-Marketing, Suchmaschinenoptimierung und viele weitere. Microsoft präsentierte ihre kürzlich erschienene Beta 1 des Internet Explorer 8. Patrick hörte sich diesen Vortrag an und hat bereits ausführlich über Neuerungen im Internet Explorer 8 berichtet.

Auch präsentierten Anbieter ihre Software zum Erstellen von Webseiten, wie WebCreator oder Website5. Derartige Programme ermöglichen auch das Erstellen von ajaxbasierten Funktionalitäten.

Interessant war auch der mobile PC „Q1“ von Samsung. Das Gerät ist sehr handlich.
Die Bedienung über die Tasten rechts und lins oben neben dem Display ist jedoch ziemlich gewöhnungsbedürftig und umständlich.

Das Gerät lässt sich auch per Touch-Screen bedienen, das erleichtert die Sache aber nicht wirklich. Um halbwegs zügig damit zu arbeiten würde ich eine Maus und Tastatur anschließen.

Alles in allem war es ein stressiger, aber sehr interessanter Tag. Es gab einige innovative Technik und Software zu sehen. Die Vorträge zum Thema Web haben deutlich gezeigt, das Javascript, insbesondere die Ajax-Technologie, immer häufiger eingesetzt werden.

Den Besuch der CeBIT 2009 haben wir uns schon vorgemerkt. Hier noch 2 abendliche Bilder vom Messegelände.

Die Mozilla Foundation veröffentlichte vor einigen Tagen die vierte Beta des Firefox 3. Mit dieser wahrscheinlich vorletzten Beta trimmten die Entwickler ihren feuerroten Browser in Sachen Speicherbedarf. Mozilla gibt an, dass mit der finalen Version in diesem Halbjahr gerechnet werden kann.

Wie dem Blog des FF3-Entwicklers Stuart „Pavlov“ Parmenter zu entnehmen ist, gelang es den Speicherverbrauch des neuen Browers enorm zu verringern. Dies erreichte man, indem die Fragmentierung des Speichers reduziert, der Cache weiter optimiert, die interne Bilderverwaltung vollkommen überarbeitet und hunderte von Speicherlecks gefixt wurden.

Auch die Javascript-Engine des Firefox wurde überarbeitet und beschleunigt. So soll Googlemail zum Beispiel jetzt doppelt so schnell ausgeführt werden

Optisch hat sich ebenso einiges getan: Das Menü erinnert jetzt stärker an den Internet Explorer 7. Ein neuer, erweiterter Downloadmanager wurde integriert. Die Gestalt der bereits besuchten Webseiten wurde ebenso erweitert. Der Passwortmanager arbeitet nun „intelligenter“: So wird der Benutzer erst nach dem Einloggen in einer weniger dominanten Infoleiste an der Oberseite des Anzeigebereichs gefragt, ob er das Passwort speichern möchte.

Desweiteren bietet der neue Firefox folgende Features, die für Webentwickler interessant sind:

• Unterscheidung zwischen online- und offline-Events
• Unterstützung von Cross-Site-XMLHttpRequests
• Bereitstellung der „alternative style sheet API“
• neue Events: drag und dragend – für Drag’n’Drop
• Unterstützung von Javascript 1.8
• Erweitung von XSLT um das Funktionenset EXSLT (mathematische Funktionen, reguläre Ausdrücke)
• Verbesserung und erweiterte Unterstützung in den Bereichen CSS, DOM, Canvas und SVG
• Unterstützung animierter png-Grafiken

Wer sich damit genauer beschäftigen möchte, werfe einen Blick in der Developer Center, in dem auf alle Neuerungen (in englische Sprache) eingegangen wird und zum Teil Beispiele präsentiert werden.

Vor vier Tagen präsentierte Microsoft eine erste Betaversion des Internet Explorers 8. Die Beta richtet sich vor allem an an Web-Entwickler, damit diese einen ersten Eindruck des zukünftigen Redmonder Browsers bekommen und sich darauf einstellen können.

Was der IE8 neues mit sich bringt, davon konnte ich mir auf der diesjährigen Cebit selbst ein Bild machen. Im TechNet-Kino des Microsoftstandes zeigten zwei MS-Mitarbeiter im Zuge des Developer Forum 2008 die Besonderheiten des neuen Internet Explorer und gingen dabei ebenso auf die für Web-Entwickler wichtige technische Seite ein.

Die IE-Entwickler haben sich groß das Einhalten von Web-Standards auf die Fahnen geschrieben. So besteht der Explorer in Version 8 als letzter großer Browser den Acid2-Test. Microsoft will sogar noch weiter gehen und nennt als Ziel die vollständige Unterstützung von CSS 2.1. Um dies zu erreichen, nutzt man über 700 Testfälle um das Verhalten des Explorers im Alltag zu überprüfen.

Über die Unterstützung von skalierbaren Vektorgrafiken (svg) und des Canvas-Elementes, die beide Bestandteil des Acid3-Test sind, schwiegen sich die Redmonder bisher aus. Die Microsoftmitarbeiter verstecken sich bei diesem Thema hinter der Aussage „Wenn das Feedback der Web-Entwickler zur ersten Beta des IE8 es wünscht, werden wir uns damit auseinandersetzen.“

Mit Hinblick auf das nicht offziell verabschiedete HTML5 wollen die Redmonder die brandneue Selector API zum Finden von Elementen via CSS-Syntax, Cross-Domain-Requests (Ajax über Domain-Grenzen hinweg), DOM Storage (erweiterte Cookies – bis zu 5 MB groß) und Connectivity Events unterstützen.

Beim Rendern bietet der Internet Explorer 8 – gezwungener Maßen – drei verschiedene Modi an:

• Quirks-Mode – Darstellung von Seiten, die sich – wie die Vorgänger des IE6 – kaum an Web-Standards halten
• Kompatibilitäts-Modus – Darstellung von Seiten, die das Fehlverhalten des IE6 und 7 benötigen
• Standard-Mode – Darstellung von Seiten, die sich an die W3-Standards halten

Standardmäßig startet der IE8 im zuletzt genannten Modus. Sollte es dennoch zu Fehlern beim Anzeigen einer Homepage kommen, kann man jedoch jederzeit auf den Renderer der 7er-Version wechseln.

Microsoft spendiert dem neusten Sproß der IE-Familie umfangreiche Tools, mit denen Web-Entwickler in Echtzeit eine Homepage debuggen können – ähnlich dem Plugin Firebug für Firefox. Desweiteren soll die Javascript-Anwendungen beschleunigt worden sein.

Sehr praktisch finde ich die neue Funktion nicht nur eine sondern gleich mehrere Startseiten beim Öffnen des Browser in Tabs anzuzeigen.

Der Schutz des Benutzers beim unbeabsichtigen Besuchen bösartiger Websites ist nun weitaus auffallender. So wird die Url in der Adressleiste farblich in Abschnitte geteilt, wodurch des für den Nutzer leichter sein soll, zu erkennen, auf welchem Seite er gerade unterwegs ist und ob die Verbindung gesichert ist.

Außerdem kündige Microsoft zwei neue, interessante Features mit den Namen Activities und WebSlices an.

Acitivities sind Plugins, die man mit einem Klick installieren kann und die das bisherige Markieren und Einfügen von Text auf Webseiten überflüssig lassen werden soll. So kann man z.B. eine Anschrift auf einer Homepage selektieren und mit einem Klick in einem Mapservice wie Live Maps anzeigen lassen.

WebSlices sind spezielle Lesezeichen – ähnlich RSS-Feeds -, die in einem kleinen Popup-Fenster angezeigt werden und deren Inhalt ständig aktualisiert wird. Damit ist es beispielsweise möglich, während man im Internet surft, Ebay-Angebote zu beobachten ohne auf der Seite selbst sein zu müssen.

Das Erstellen eigener Plugins soll mit dem Openservice Format relativ einfach von der Hand gehen, da die Syntax an XML angelehnt ist.

Die IE8 Beta 1 steht auf der englischsprachigen Website von Microsoft für folgende Betriebssysteme (inklusive x64-Varianten) zum Download zur Verfügung:

• Windows Vista
• Windows XP SP2
• Windows Server 2008
• Windows Server 2003 SP2

Zudem steht ein VirtualPC-Image mit voraktiviertem Windows XP zum Download zur Verfügung, wodurch es möglich ist, ohne Risiken in einer simulierten Umgebung den neuen Browser zu testen.

Wann der Internet Explorer 8 erscheinen soll, wurde bisher nicht genannt. Die Nachfrage meinerseits wurde von einem Microsoft-Mitarbeiter mit „No Date“ kommentiert. Sicher gilt jedoch, dass es noch mindestens eine weitere Vorabversion geben wird.

Das Web Standards Project (WaSP) veröffentlichte vor wenigen Tagen den Acid3-Browsertest um aufzuzeigen, wie konform moderne Browser die Vorgaben des W3-Consortiums einhalten.

Im Vergleich zum Vorgänger Acid2 wurde der Parcour, den die Renderer der Browser bewältigen müssen, gewaltig aufgestockt und erweitert – vor allem in Hinblick auf Web 2.0 Anwendungen, die von Javascript Gebrauch machen. So wird neben der CSS- auch die Unterstützung der DOM-Manipulationen (als Bestandteil von JavaScript) sowie die SVG-Fähigkeiten der Web-Clienten unter die Lupe genommen.

Bisher schafft es noch kein Browser an die Referenz heranzukommen. Nach der Veröffentlichung des Acid2-Tests dauerte es immerhin über 3 Jahre bis Browser den Test bestanden. Einzige Ausnahme war der Mac-Browser Safari, der bereits nach einem Jahr dazu im Stande war. Erst ab Version 3 wird auch Firefox dazu in der Lage sein. Beim Internet Explorer muss man wohl auf Version 8.0 warten.

Ich habe Acid3 auf verschiedenen, aktuellen Browsern durchlaufen lassen und erhielt dabei folgende Ergebnisse:

• Safari 3.1 Build 525.12 – 76 / 100 Punkte
• Firefox 3 Beta 4 – 67 / 100 Punkte
• Opera 9.50 Beta Build 9815 – 65 / 100 Punkte
• Firefox 3 Beta 3 – 59 / 100 Punkte
• Firefox 2.0.0.12 – 50 / 100 Punkte
• Internet Explorer 8 Beta 1 – 17 / 100 Punkte
• Internet Explorer 7 – 12 / 100 Punkte
• Internet Explorer 6 – 11 / 100 Punkte

Update 09.03.08 07:45 Uhr:

Nachdem die erste Beta des Internet Explorer 8 erschienen ist, habe ich den neuen Browser aus dem Hause Microsoft ebenso durch den Acid3-Test geschickt. Das nicht-berauschende Ergebnis kann der Tabelle entnommen werden. Nebenbei bemerkt: Der IE8 besteht den Acid2-Test tatsächlich.

Was genau ich zu Gesicht bekam, kann man den folgenden Screenshots entnehmen.

Während der Weiterentwicklung an meiner Demoseite zur Darstellung von mathematischen Funktionen durch Javascript, stieß ich auf einige Ungereimtheiten der in der Schleife verwendeten Laufvariablen i. Eine genauere Überprüfung brachte für mich völlig unerklärliche Werte zum Vorschein. Die einfache Gleichung 0.2 + 0.1 ergab nicht wie erwartet 0.3 sondern 0.30000000000000004.

Ich konnte es mir absolut nicht erklären, woher dieser – in meinen Augen – Fehler zu Stande kam. Ich schloß sämtliche Fehlerquellen aus. Als dies auch nichts half, beschloss ich der Sache auf den Grund zu gehen – ohne vorher zu ahnen, dass ich mit meiner so simplen Rechnung auf eine in Kauf genommene Schwachstelle unserer heutigen schnellen Computertechnik gestoßen war. Doch der Reihe nach.

Als erstes sei klargestellt, dass die nachfolgend beschriebene Ungenauigkeit nur bei Kommarechnung auftriit – da jedoch in jeder Programmiersprache, egal ob Javascript, PHP oder C. Integerzahlen bleiben davon gänzlich unberührt.

Um das angesprochene Problem deutlich zu machen, habe ich eine Testseite erstellt, auf der man eine Tabelle sieht, in deren linken Spalte sich die Zahlenwerte von 0 bis „ungefähr 1.9“ befinden. Die Werte werden in einer for-Schleife mit dem Startwert 0, der Abbruchbedingung kleiner-gleich 2 und einer Erhöhung der Laufvariable um jeweils 0.1 pro Durchlauf erzeugt und via jQuery an die Tabelle angehangen.

Wie man unschwer erkennen kann, weichen eine Vielzahl der in der linken Tabellenhälfte stehenden Werte geringfügig vom erwarteten Wert ab. Es tritt eine Ungenauigkeit auf.

Die Ursache des „Problems“ liegt in der binären Darstellung von Zahlen innerhalb von Programmen. So wird die Zahl 15 intern als 00001111 im Speicher abgelegt. Das selbe geschieht auch mit Kommazahlen, jedoch kann es dabei zu Ungenauigkeiten in der Darstellung kommen, da eine Vielzahl gebrochenener Zahlen binär periodisch abgebildet wird. So entspricht 0.1 im Dualsystem der Ziffer 1.1001 E-101, wobei E den Exponenten symbolisiert.

Eine ausführliche Abhandlung findet man auf DCLJS.

Um in Javascript dem Problem ein wenig aus dem Weg zu gehen, nutze ich die numlib-Bibliothek, die unter anderem eine Funktion namens dezRound zum Runden einer beliebigen Anzahl von Nachkommastellen zur Verfügung stellt. Mit dieser Funktion stelle ich sicher, dass Zahlen mit relativ wenigen Nachkommastellen genau angegeben werden – ich entschied mich auf 9 Stellen zu runden. Leider baue ich dadurch bei längeren gebrochenen Zahlen selbst eine Ungenauigkeit durch das Runden ein, die ich aber in meinem Fall in Kauf nehme.

Die Seite Coding Horror veröffentlichte vor wenigen Tage einen für Javascript- und im speziellen Ajax-Entwickler interessanten Performancevergleich der Browser in Sachen Ausführungsgeschwindigkeit von Javascript. Der mit Hilfe des Javascript-Benchmarks Sunspider erstellte Bericht testete die aktuellen Browser (Firefox 2, Opera 9.5, Internet Explorer 7 und Safari 3.0.4) u.a. in den Bereichen 3D-Rendering (Fließkommaberechnung), mathematische Funktionen, reguläre Ausdrücke, Kontrollstrukturen und String-Funktionen. Dabei stellte sich heraus, dass der sehr beliebte und kostenlose Firefox nur dank des schlechten String-Handlings des Internet Explorer 7 nicht auf dem letzten Platz landete. In 3 der 8 Szenarien schnitt der Firefox deutlich schlechter als die Konkurrenz ab, vor aber im Umgang mit Bit-Operationen.

Der komplette Test kann bei den Kollegen von www.codinghorror.com angesehen werden.

Microsoft hat die Bezeichnung für seinen neuen Webbrower bekannt gegeben. Er wird (wie zu erwarten war) als „Internet Explorer 8“ klassifiziert. Wie IE 7 wird er auch in zwei Ausbaustufen verfügbar sein, das heißt je nachdem welches Betriebssystem installiert ist (Windows XP oder Vista), stehen unterschiedliche Funktionen zur Verfügung. Welche detaillierten Neuerungen der Browser mit sich bringt, ist noch unklar, er soll jedoch einen besseren Umgang mit Webstandards besitzen. CSS und Ajax sollen somit besser unterstützt werden.

Eine Beta-Version soll noch im Dezember 2007 erscheinen.

Kaum ist das Update auf Version 2.0.0.10 durch, kommt auch schon die nächste Version. Aber so ist das nun, wenn Programmierer am Werk sind, Bugs entstehen immer. Der Fehler verhinderte das dynamische Zeichnen von Grafiken mit Hilfe des HTML5 Elementes „Canvas“ und der JavaScript Funktion „drawImage“.

Übrigens eignet sich Firefox auch bestens für die Entwicklung von Ajax Anwendungen. Mit Hilfe der Extension Firebug lassen sich Anwendungen während des Entwicklungsprozesses debuggen und erleichtern dem Entwickler die Arbeit.

Den Firefox-Browser könnt ihr über die folgende Grafik runterladen und installieren.

Jeder Ajax Entwickler hat sicher schon einmal mit animierten GIF Grafiken, sogenannten Activity Indicators gearbeitet. Im Internet findet man eine Vielzahl solcher Grafiken, wie zum Beispiel bei napyfab.com.

Doch was, wenn die Animation in einer anderen Farbe benötigt wird? Kein Problem – ajaxload.info biete einige Animationen zur Auswahl an, bei denen die Vordergrund- und Hintergrundfarbe angepasst werden können.

Eine durchaus nützliche Spielerei 🙂