Ajaxschmiede.de

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.

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.

Es gibt zahlreiche Javascript-Frameworks und sehr viele Open Source Scripte, aber wer kennt das nicht: Genau, das was man sucht gibt es nicht. Bleiben also zwei Möglichkeiten, entweder man programmiert es komplett selber oder man findet ein Open Source Script, mit einer ähnlichen Funktionalität und passt dieses an seine Bedürfnisse an. Schwierig wird dies für Entwickler, die mit Javascript nicht so vertaut sind und sich erst einarbeiten müssen.

Wir schaffen Abhilfe! Ab sofort nehmen wir Programmier-Anfragen entgegen. Es muss sich dabei nicht nur um reines Javascript handeln, sondern kann auch in Kombination mit PHP und MySQL treten.

Hier ein paar unserer Programmierbeispiele, die wir auch im Blog veröffentlicht haben:

• dargestellten Programm-Code auf Webseiten automatisch einrücken
• Mathematische Funktionen mit flot darstellen, Teil 1 und Teil 2
• jQuery-Newsticker
• ein Ajax-Formular mit DOMAssistant

Das Kontaktformular findet ihr oben in der Menüleiste.

Auf Grundlage der schnellen Javascript-Bibliothek DOMAssistant, über die wir vor kurzem berichteten, hab ich ein Ajax-Formular entwickelt. Es besitzt auch einen Fallback-Modus für den Fall, dass der Besucher Javascipt im Browser deaktiviert hat.

Entsprechend der DOMAssistant-Kompatibilität funktioniert das Ajax-Formular mit den Browsern Internet Explorer 5.5 (und höher), Firefox 1.5 (und höher), Opera 9 und Safari 2.

Bevor ich auf die Besonderheiten meiner Implementierung eingehe, kann sich jeder selber ein Bild meiner Anwendung machen, indem er sich meine Demonstration anschaut.

Mein Script besteht aus 4 Javascript-Funktionen, deren Namen sich größtenteils selbst erklären: initAJAX, sendData, getData und resData. Die letzte Funktion wertet die Antwort der aufgerufenen PHP-Datei aus, an die die Daten geschickt worden.

DOMAssistant bietet die Möglichkeit Daten sowohl per post- als auch per get-Methode zu übertragen. Da man bereits im form-Element von HTML eine Methode zur Datenübertragung wählt, lasse ich in dem Script die Art der Übermittlung auslesen und dann entsprechend die Funktion DOMAssistant.AJAX.post beziehungsweise DOMAssistant.AJAX.get ausführen.

Um die zu übertragenden Daten zu bestimmen, habe ich die Funktion getData geschrieben, in der ich Gebrauch von CSS-Selektoren mache um den Inhalt und die name-Attribute aller Eingabefehler auszulesen.

function getData(id) {
	data = ""; // Datenstring
	// für alle input-Felder innerhalb des ausgewählten form-Elements
	//, die nicht das Attribut name mit dem Wert ref_page haben
	$("#" + id + " input:not([name=ref_page])").each(function () {
		// wenn input type nicht radio
		if ($(this).type === "radio") {
			// wenn radio-Button ausgewählt
			if ($(this).checked) {
			// Zusammensetzen des Datenstrings
				if (data != "") data += "&";
				data += $(this).name + "=" + $(this).value;
			}
			// wenn input-type nicht radio
		} else {
			if ($(this).type !== "submit") {
				// Zusammensetzen des Datenstrings
				if (data != "") data += "&";
				data += $(this).name + "=" + encodeURIComponent($(this).value);
			}
		}
	});
	// für alle select-Boxen und Textfelder
	$("#" + id + " select, #" + id + " textarea" ).each(function () {  
		// Zusammensetzen des Datenstrings
		if (data != "") data += "&";
		data += $(this).name + "=" + $(this).value;
	});
	// Rückgabe des Datenstrings
	return data;
}

Der Datenstring erhält anschließend die Form vorname=wert&nachname=wert&… und wird an die save.php geschickt.

Die save.php hat es in sich, da sie multifunktionell ist:

• Es ist egal, ob Daten per get oder post übertragen wurden, da sowohl das $_POST- als auch das $_GET-Array nach übergeben Werten überprüft werden. Ist eines der Arrays nicht leer, wird ein Zeiger mit dem Variablennamen $myData auf das entsprechende Array gelegt, wodurch der Inhalt des jeweiligen Array über $myData verfügbar wird.
• Diese eine Datei verarbeitet einerseits die Datenübertragungen per Ajax und anderseits auch die gewöhnlichen – sprich ohne Javascript. Entscheidend hierfür ist das versteckte input-Feld mit dem name-Attribbut ref_page, das die Adresse des jeweiligen Formulars durch den Aufruf echo $_SERVER[„PHP_SELF“]; enthält. Im Falle einer Ajax-Übermittlung wird dieses Feld nicht mit übertragen, bei der geläufigen Form schon und dient als Weiterleitungsadresse (header: Location), wodurch man die save.php nicht zu Gesicht bekommt.
• In allen Übermittlungsfällen (get oder post, ajax oder regulär) wird sowohl bei erfolgreicher als auch fehlgeschlagener Übertragung eine Meldung zurückgegeben. Im Ajax-Fall in Form eines Strings, im regulären Fall in Form der Weiterleitung mit übergebener get-Variable.

Auf welche Art die Daten auch übertragen wurden, es erfolgt in jedem Fall eine Benachtigung des Benutzers. Sollte der Datentransfer per Ajax geschehen sein, wird über Javascript ein h3-Element mit der entsprechenden Meldung angezeigt. Bei einer gewöhnlicher Übermittlung geschieht dies über PHP und die übergebene get-Variable.

Ich habe alle verwendeten Dateien in ein rar-Archiv gepackt, somit kann jeder interessierte Entwickler das Formular ausprobieren und anpassen.