Ajaxschmiede.de

John Resig, Mitarbeiter der Mozilla Foundation für JavaScript-Angelegenheiten und Kopf hinter der jQuery-Bibliothek, entwickelt derzeit mit Dromaeo an einem einheitlichen JavaScript-Benchmark für alle üblichen Browser.

Der Dromaeo-Test bedient sich dabei beim JavaScript-Benchmark SunSpider vom WebKit-Project, setzt diese Tests aber anders um. So werden zum Beispiel die Einzeltests nicht in iFrames umgesetzt, da durch Versuche bewiesen werden konnte, dass andere Browserkomponenten die Ergebnisse bei iFrames stark beeinflussen können.

Bisher läuft der Test auf folgenden Browsern:

• ab Firefox 2
• ab Safari 3
• ab Opera 9
• ab Internet Explorer 6

Das an dem Benchmarktest noch gearbeitet werden muss, zeigt sich zum Beispiel darin, dass der „DNA Sequence Alignment“-Einzeltest im IE6 und IE7 extrem langsam läuft (etwa 15-20 Minuten).

Wer mehr über Dromaeo erfahren will, dem empfehle ich einen Blick ins Mozilla Wiki.

Zwei Benchmarkvergleiche will ich unseren Lesern nicht vorenthalten: der erste zeigt einen Vergleich zwischen IE6, IE7 und IE8; der zweite zwischen Firefox 3 (beta5pre), Safari 3 (525.13) und Opera 9.50.

Nach etwa 5 Wochen harter Programmierarbeit wurde die auch von mir oft genutzte DOMAssistant-Bibliothek in Version 2.7 veröffentlicht. Neben weiterer Geschwindigkeitsoptimierungen überzeugt das neue Release mit einigen neuen Funktionen und Unicode-Unterstützung.

Unicode-Support

Da das Web bekannterweise international und vielsprachig ist, war das Anliegen der DA-Entwickler Unicode-Unterstützung zu bieten. Dadurch ist es möglich, Webseiten in nahezu allen Sprachen anzusprechen. Um „neue Märkte“ zu erschließen, steht die Dokumentation nun auch in chinesisch zu Verfügung.

Neue Funktionen

cssSelect – führt eine CSS-Selektoranfrage über eine DOM-Elementreferenz aus. Zum Beispiel:

$(document).cssSelect(".hover[type=div]");

ajax – Diese Methode bietet dem Web-Entwickler umfangreichere und genauere Möglichkeiten um eine Ajax-Anfrage zu manipulieren. Zum Beispiel:

$("#container").ajax({
	url: "ajax.php",
	method: "POST",
	params : "name=DOMAssistant",
	callback: functionReference,
	headers : {
		"Content-type" : "application/x-www-form-urlencoded"
	}
});

setStyle – Ermöglicht den direkten Zugriff zum Ändern von Stylesheet-Angaben. Zum Beispiel:

$("#container").setStyle("border", "10px solid red");

$("#container").setStyle({
	background : "#ffffa2",
	color : "#f00"
});

first – Diese Hilfsmethode gibt das erste Element einer CSS-Selektoranfrage zurück. Zum Beispiel:

$("#navigation a").first();

Performance und Genauigkeit

Wie bereits erwähnt, beschleunigten die DOMAssistant-Entwickler nochmals nach Version 2.6 ihre Bibliothek. Vor allem die Ausführungsgeschwindigkeit von Selektoranfragen im Microsoft Internet Explorer wurde enorm verkürzt. Auf der eingerichteten SlickSpeed-Testseite kann sich jeder von der Schnelligkeit von DA 2.7 überzeugen.

Abschließend sei gesagt, dass auch etliche Fixes in die neue Version Einzug hielten, die die Stabilität der Anwendungen und die Genauigkeit der Ergebnisse erhöhen.

Den Web-Übersetzer von Google kennen sicher die meisten. Google bietet mit der „Google AJAX Language API“ jetzt für Webentwickler die Möglichkeit eine derartige Übersetzungsfunktion in ihre Seiten einzubinden. Geniale Sache!

Die Entwickler-API wird per Javascript in die Applikation eingebettet. Der nachfolgende Code-Schnipsel zeigt, wie einfach das geht. Es wird die zu übersetzende Zeichenkette sowie Quell- und Zielsprache übergeben. Bei Erfolg wird die Ausgabe in den div-Container mit der id „translation“ geschrieben.

google.language.translate("Hello world!", "en", "de", function(result) {
if (!result.error) {
    var container = document.getElementById("translation");
    container.innerHTML = result.translation;
  }
});

Das Script liefert wie zu erwarten die Ausgabe: Hallo Welt!

Die zu übersetzende Sprache kann aber auch dank AJAX automatisch erkannt werden. Die korrekte Erkennung hängt jedoch von der Menge des Textes ab. Den Beispielcode für die Erkennung der Sprache und die automatische Übersetzung sind im Developer’s Guide der Language-API zu finden.

Google plant für die Zukunft weitere nette Fähigkeiten für ihre Sprach-API. Lassen wir uns überraschen 🙂

Die zum Zeichnen von Graphen entwickelte flot-Javascriptbibliothek ist seit einiger Zeit in der Version 0.4 erhältlich.

Zu den Änderungen gegenüber der bisheriger 0.3er Version gehören unter anderem folgende Punkte:

• Unterstützung von Zeitangaben an den Graphenachsen über mode=“time“
• Unterstützung farbiger Hintergrundflächen mittels grid.coloredAreas( x1, y1, x2, y2 ) – die Parameter geben die beiden Eckpunkte der Fläche oben-links und unten-rechts an
• Unterstützung von Strichlinien
• die Rahmenbreite ist nun veränderbar
• Überarbeitung des automatischen Achsen-Skalierungsalgorithmuses

Wie man flot ein bindet und was man damit anfangen kann, haben wir in unserer Vorstellung dieser Bibliothek aufgezeigt. Zudem haben wir auf Grundlage von flot einige Beispielanwendungen erstellt.

Diesmal ging es ja wirklich flott. Berichteten wir vor wenigen Tagen, dass der Webkit-Browser im Acid3-Test 93 von 100 möglichen Punkte erreichte, investierten die Entwickler nochmals viel Zeit und Geduld um auch die verbleibenden Tests erfolgreich zu bestehen.

Wie man den Webkit-Webblog entnehmen kann, hatten die Entwickler Erfolg dabei, ihren Browser acid3-fit zu machen. Zwar wirken einige Animationen noch nicht so flüssig, aber man arbeitet daran.

Die Opera-Entwickler waren seit der Veröffentlichung des neuen Acid-Tests ebenso nicht untätig. Wie in ihrem Blog zu lesen ist, ist auch ihnen mit viel Arbeit gelungen in den Browserkern die fehlenden Webstandards zu implementieren.

In den folgenden Wochen wird es auch ein öffentliches PreRelease von Opera geben, das den Acid3-Test besteht, wovon sich jeder dann überzeugen kann.

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.

Durch den Kommentar von Jan zu meinem Beitrag über die von mir geschriebene Funktion zum Scrollen mittels div-Elementen angeregt, habe ich diese Funktion derart erweitert, dass nun auch eine Scroll-Begrenzung nach unten besteht. Damit ist das Problem des Endlos-Scrollens nach unten behoben.

Um die Höhe des div-Elements, in dem der anzuzeigende Inhalt steht, zu bestimmen, benutze ich die Javascript-Methode offsetHeight. Von dieser ermittelten Höhe ziehe ich die Höhe des Anzeigebereichs (tool-div) ab und erhalte damit den unteren Grenzwert beim Scrollen.

Der Code der erweiterten Funktion sieht nun wie folgt aus:

function moveDIV( var1, var2 ) {
	if ( var1 == 0 ) {
		document.getElementById("zeug").style.left = "0px";
		document.getElementById("zeug").style.top = "0px";
	} else {
		if ( var2 ) {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.left;
			var2 = Number(var2.substring(0, var2.length-2)) + var1;
			
			var3 = document.getElementById("zeug").style.width;
			var3 = Number(var3.substring(0, var3.length-2));
			
			var4 = document.getElementById("tool").style.width;
			var4 = Number(var4.substring(0, var4.length-2)) - var3;

			// wenn nicht am linken "rahmen" angekommen
			if ( var2 <= 0 ) {
				// wenn nicht am rechten "rahmen" angekommen
				if ( var2 >= var4 ) {
					document.getElementById("zeug").style.left = var2 + "px";
				} else {
					document.getElementById("zeug").style.left = var4 + "px";
				}
			} else {
				document.getElementById("zeug").style.left = "0px";
			}
		} else {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.top;
			var2 = Number(var2.substring(0, var2.length-2)) + var1;

			var3 = document.getElementById("zeug").offsetHeight;
			
			var4 = document.getElementById("tool").style.height;
			var4 = Number(var4.substring(0, var4.length-2)) - var3;

			// wenn nicht am oberen "rahmen" angekommen
			if ( var2 <= 0 ) {
				// wenn nicht am unteren "rahmen" angekommen
				if ( var2 >= var4 ) {
					document.getElementById("zeug").style.top = var2 + "px";
				} else {					
					document.getElementById("zeug").style.top = var4 + "px";
				}
			} else {
				document.getElementById("zeug").style.top = "0px";
			}
		}
	}
}

Das Script in Aktion kann auf dieser Demoseite angesehen werden.