Ajaxschmiede.de

Die Betreiber der Seite PBwiki veröffentlichten vor kurzem einem Vergleich der verschiedenen Javascript-Bibliotheken in Sachen Ladegeschwindigkeit bei unterschiedlichen Versionen und Browsern mit interessanten Ergebnissen.

Auf dem Testparcour traten die folgenden JS-Tool gegeneinander an:

• Dojo (1.0.1)
• jQuery (1.2.1)
• Prototyoe (1.6.0)
• Yahoo UI (2.4.0)
• Protoculous (1.0.2)

Dabei wurde auch verglichen, welchen Vorteil gepackte gegenüber ungepackten Versionen beim Laden haben und wie groß der Vorteil von sich im Cache befindlicher Dateien ist.

Ladezeiten der Toolkits (Zeit in ms)

Während die Bibliotkek von Yahoo ungecached noch den vorletzten Platz belegt, gelang ihr, sobald sie im Cache vorliegt, der Sprung an die Spitze der Schnelligkeit. Ingesamt kann man sagen, dass der Cache die Zeit bis zur Ausführung des Scriptes auf etwa 1/5 der ursprünglichen Zeit reduziert wird.

Unkomprimiert vs komprimiert (JQuery, Zeit in ms)

Beim Vergleich der Komprimiermethoden bleibt festzuhalten, dass das minify-Verfahren gegenüber dem gewöhnlichen Packen überlegen ist. Das ist um so überraschender da die Dateigröße bei gepackter Form erheblich kleiner ist.

Vergleich der Browser (jQuery, cached, Zeit in ms)

Wie man sehen kann, können die Browser aus dem Hause Microsoft an der bisherigen Version des Firefox 2 sehr leicht vorbeiziehen. Die große Differenz ist eventell damit verbunden, dass die IEs enger ans Betriebssystem geknüpft sind. Zudem muss man auch in Erwägung ziehen, dass der Explorer vermehrt auf neueren und damit schnelleren Computersystem zum Einsatz kommt. Mozilla hat aber mit der 3er Version ein heißen Eisen im Feuer.

Der komplette Testbericht kann übrigens hier angesehen werden.

Der Grund für die neue Version liegt vorrangig – wie man dem Entwickler-Blog entnehmen kann – im Beheben von Fehler in jQuery 1.2.2. Die aktuelle Version ist jetzt absolut kompatibel zu Adobe AIR. Des Weiteren wird diese Version in dem CMS „Drupal 6“ eingesetzt und bildet die Grundlage für jQuery UI 1.5. Darüber hinaus wurden in dieser Version einige nebensächliche Funktionen für Plugin-Entwickler hinzugefügt.

.data() and .removeData()

Diese Methoden ergänzen die bereits existierenden Methoden jQuery.data und jQuery.removeData, die in jQuery 1.2 eingeführt wurden. Diese Methoden wurden für Plugin-Entwickler angepasst.

.unbind(”.namespace”)

In der Version 1.2 konnte man definierte Ereignisse hinzufügen und entfernen. Jedoch musste man immer ein Name des verwendeten Event-Typs inkludiert werden. Jetzt können alle gebundenen Ereignisse, die zu einem bestimmten Namensraum gehören, entfernt werden.

.trigger(”click!”)

Es wurde eine neue Ergänzgung hinzugefügt, die es erlaubt mit einem Namen versehene Ereignisse vom Ausgelöstwerden auszuschließen.

Alpha Versionen von jQuery UI 1.5 und jQuery Enchant 1.0

Außerdem präsentierten die jQuery-Entwickler die Alpha-Version von jQuery UI 1.5 vor. Diese Alpha stellt eine Generalüberholung des bestehenden Codes dar, behebt dabei unzählige Fehler und beschleunigt die API. Es wird noch einige Zeit und endloses Testen dauern bis diese Version genauso stabil läuft wie die 1.2er.

Zusätzlich gaben die jQuery-Väter bekannt, an einem Plugin namens jQuery Enchant zu arbeiten und veröffentlichten auch gleich eine Alpha-Version davon. jQuery Enchant soll die jQuery-Bibliothek um eine Menge zusätzlicher Effekte bereichern, wie zum Beispiel „Abschneiden“, „Wackeln“ und „Explodieren“. Auch Enchant wird noch eine Entwicklungs- und Testzeit verschlingen.

jQuery 1.2.3 herunterladen

Vor wenigen Tagen veröffentliche Nick Stakenburg Version 1.1.0 seines Lightview-Tools, mit dessen Hilfe man eine sehenswerte Fotogalerie recht schnell auf die eigene Homepage zaubern kann.

Zu den Stärken dieses Javascript-Tools zählt sicherlich die hohe Browserunterstützung (Internet Explorer 6+, Firefox 1.5+, Safari 2+ and Opera). Es ist dafür ausgelegt, in allen Browsern ein sauberes Bild – ohne Flackern – zu erzeugen und passt sich automatisch der Bildschirmauflösung an.

Desweiteren lässt sich Lightview ohne große Vorkenntnisse in ein bestehendes Projekt einzubinden. Es können dabei sowohl einzelne Bilder als auch Galeriegruppen angesprochen werden, wobei es bei letzteren auch die Möglichkeit gibt, die Bilder in einer Diashow wiederzugeben.

Lightview setzt die kürzlich veröffentlichte Prototype-Version 1.6.0.2 voraus. Falls man Effekte nutzen möchte, benötigt man zusätzlich Scriptaculous 1.8.1.

Wie bei ähnlichen Frameworks werden im HTML-Kopf die erforderlichen Dateien geladen.

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/lightview.js'></script>

Bis auf die scriptaculous.js, die benötigt wird, wenn man besondere Effekte einbauen will, sind alle anderen Dateien Pflicht.

Der Anwenden von Lightview auf ein einzelnes Bild geschieht über das class-Attribut.

<a href='image.jpg' class='lightview'>image</a>

Es ist ebenso möglich Bilder zu Gruppen zusammenzufassen. Dafür verwendet man zusätzlich das rel-Attribut mit dem Wert gallery[group], wobei group frei gewählt werden kann.

<a href='image.jpg' class='lightview' rel='gallery&#91;group&#93;'>image</a>
<a href='image.jpg' class='lightview' rel='gallery&#91;group&#93;'>image</a>

Desweiteren bietet Lightview die Möglichkeit Bilder mit Titeln und Untertiteln zu versehen. In beiden Fällen wird das title-Attribut benutzt. Als Trennzeichen zwischen Titel und Untertitel dienen zwei Doppelpunkte.

<a href='image.jpg' title='Eine Bildüberschrift' class='lightview'>image</a>
<a href='image.jpg' title='Eine Bildüberschrift :: und sogar ein Untertitel' class='lightview'>image</a>

Zum Veranschaulichen habe ich folgende Demonstrations-Seite erstellt.

Eine Zeit lang war es ruhig um TinyMCE von Moxiecode, doch jetzt wurde die Version 3.0 des Javascript-basierenden WYSIWYG-Editor veröffentlicht.

Der Code wurde komplett neu implementiert sowie optimiert und ist somit um einiges schlanker geworden. Über Ajax kann Text direkt von der Festplatte geladen und eingebunden werden. Zahlreiche Fehler wurden behoben. Bisher wurden die Browser Firefox, Internet Explorer und Opera unterstützt, jetzt ist der Editor auch mit Safari von Apple kompatibel.

TinyMCE zeichnet sich durch folgende Fähigkeiten aus:

• er lässt sich mit nur 2 Zeilen Code integrieren
• über Themes und Plugins kann der Editor individuell angepasst werden
• anpassbare Ausgabe des Quelltextes im XHTML 1.0 Format
• Unterstützung von Mehrsprachigkeit
• Unterstützung der gängigsten Webbrowser
• Einsatz von Ajax zum Speichen und Laden von Inhalten

Der Editor ist bei Online-Redakteuren sehr beiliebt.
Er ist in Web-Conent-Management-Systemen wie Mambo oder Joomla der Standard-Editor und kann in anderen Systemen wie z.B. Typo3 über eine Extension integriert werden. Ich selbst nutzte schon seit geraumer Zeit ausschließlich diesen Editor. Unseren Blog haben wir um das TinyMCE Advanced Plugin für WordPress erweitert.

Hier ein Screenshot:

Auf dieser Beispielseite der Entwickler könnt ihr euch von den Fähigkeiten des Editors selbst überzeugen.

Die letzten beiden Wochen verbrachte ich unter anderen damit, mein Skript zur Darstellung mathematischer Funktionen mittels flot weiterzuentwickeln. Dabei entdeckte ich die fehlerhafte Darstellung gebrochener Zahlen in heutigen PC-Systemen und etliche andere Kleinigkeiten, auf die ich gleich eingehen werde. Insgesamt bin ich einen großen Schritt vorwärts gekommen.

Erfolgreich implementierte ich die Möglichkeit eine Kurvenschar (Funktionsschar) anzeigen zu lassen. Als zweiten Parameter entschied ich mich für die Variable z, da mir das für gewöhnlich genutze a größere Probleme beim Ersetzen des Parameters durch konkrete Werte bereitet hätte. So kommt beispielsweise ein a in Math.exp() beim Verwenden einer Exponentialfunktion vor.

Wie angekündigt habe ich die Möglichkeit eingebaut, sich über Scrollbuttons in der Grafik zu bewegen. Das erleichtet das Verfolgen eines Funktionsverlaufs erheblich. Mir ist es bisher nicht gelungen, das Zoomen mit dem Mausrad mittels des mousewheel-Plugins für jQuery 1.2.2 zu integrieren.

Alle Änderungen im Überblick:

• Einbau der numlib-Bibliothek zum Eingrenzen des Binärdarstellungsproblems von gebrochenen Zahlen
• Möglichkeit zur Darstellung von Kurvenscharen
• Integration einer Scrollfunktion in die Funktionsgrafik
• Möglichkeit die Schrittweite automatisch berechnen zu lassen
• Zulassen von gebrochenen Zahlen im Exponenten der Exponentialfunktion ( = Wurzelfunktion )
• Fehler bei negativen Zahlen behoben ( — gleich +)
• Potenzgesetze in einfacher Form eingebaut ( x[2][3] gleich x[6] )

Ich werde weiter am Ball bleiben und das Skript stetig ergänzen. Man sieht bereits, dass es vorgesehen ist, eine zweite selbstdefinierte Funktion parallel in der Grafik anzuzeigen.

Folgende Neuerungen plane ich bis zur nächsten Veröffentlichung zu realisieren:

• e-Funktion soll verwendet werden können
• ebenso trigonometrische Funktionen
• Optimierung der Scrollfunktion (nicht bei jeder Bewegung alle Werte neu berechnen)
• Mausrad-Zoom-Funktion
• Möglichkeit zwei unabhängige Funktionen darzustellen
• Verallgemeinerung der regulären Ausdrücke
• ausgeprägtere Gliederung in Funktionen oder Objekte
• Erweiterung der Potenzgesetze

Und nun viel Spaß beim Ausprobieren der aktuellen Version meiner flot-Anwendung.

Ich habe mich an den letzten beiden Tagen mit jQuery beschäftigt, mit dem Ziel einen einfachen Live-Ticker zu erstellen. Der Ticker sollte sich mittels Buttons steuern lassen und die auszugebenden Nachrichten in div-Containern ablegen.

Die Buttons zur Steuerung entstammen der Sweetie-Icon-Gallerie. Jeder Grafik wird nach dem vollständigen Laden der Seite über jQuery ein click-Event zugewiesen.

Die Klickereignisse bewirken im Einzelnen:

• eine Nachricht zurück,
• automatischen Wechsel pausieren/fortsetzen,
• nächste Nachricht anzeigen,
• zur ersten Nachricht und
• zur letzten Nachricht gehen.

Etliche Probleme bereiteten mir die Funktionen zum Durchschalten der Nachrichten-divs. Meine ersten Versuche einen Zähler zu integrieren, brachten nicht den erwünschten Erfolg. Ich beschloss dann anders an die Sache heranzugehen. Anstatt über eine Laufvariable festzulegen auf welches Container-div ich zugreifen will, ändere ich einfach die Reihenfolge der divs innerhalb des Containers.

Beim Vorwärtsgehen wird das erste Element ans Ende des div-Containers gehangen und das neue erste div (das ehemalige zweite) angezeigt. Beim Zurückschalten wird das letzte Element angezeigt und an die erste Stelle verschoben. Um die div-Elemente zu verschieben nutze ich die jQuery-Befehle clone() und remove().

function nextNews () {
	$("#ticker_container").append( $("#ticker_container div:first").clone(true) );
	$("#ticker_container div:first").remove();
	$("#ticker").html($("#ticker_container div:first").html());
}

function preNews () {
	$("#ticker").html($("#ticker_container div:last").html());
	$("#ticker_container").prepend( $("#ticker_container div:last").clone(true) );
	$("#ticker_container div:last").remove();
}

function stopNews () {
	window.clearInterval( int_ticker );
	$("#navi #navi_pause").attr("src", "24-arrow-next.png");
	int_ticker = null;
}

Zum Aufruf des automatischen Vorwärtsgehens nutze ich die Javascript-Funktion window.setInterval(), deren Rückgabewert in der Variablen int_ticker gespeichert wird. Sobald der Ticker durch irgendein Ereignis gestoppt wird, wird int_ticker auf NULL gesetzt. Damit stelle ich sicher, dass das automatische Weiterschalten jederzeit fortgesetzt werden kann.

Das Skript in Aktion kann man in dieser Demo sehen.

In unserer Einführung zu jQuery kann man sich die Grundlagen im Umgang mit diesem Framework anschauen.

Wie golem.de berichtete, steht ab sofort das neue Visual Studio 2008 Express von Microsoft zum Download zur Verfügung und kann sowohl privat als auch gewerblich völlig kostenlos genutzt werden.

Microsoft bietet sein mächtiges Entwicklungswerkzeug in 4 verschiedenen Express-Editionen an. Neben Basic, C# und C++ gibt es zur Entwicklung von dynamischen Webanwendungen Visual Web Developer 2008 Express. Entwicklern steht das neue ASP.NET AJAX zum schreiben von ajaxbasierten Webseiten zur Verfügung.

Zusätzliche Web-Komponenten und -Controls bietet das ASP.NET AJAX Toolkit, welches als Open Source Software auf CodePlex veröffentlicht ist. Einige Beispiele, welche Art von Ajax-Anwendungen sich mit diesem Toolkit realisieren lassen, sind hier zu finden.

Visual Web Developer 2008 Express herunterladen

AJAX Control Toolkit herunterladen

Die neue Version das Javascript Framework Prototype behebt einige Kompatibilitäts- und Sicherheits-Probleme und bietet verbesserte Sicherheitsmaßnahmen für Entwickler, die Prototype außerhalb einer Webbrowser-Umgebung nutzen.

Einige wichtige Änderungen sind:

• 28 Fehler behoben
• über ein Dutzend Verbesserungen im Programmcode, einschließlich Performance-Verbesserungen für CSS Selektoren in Safari 3 sowie für die Methoden Element#up/#down/#next/#previous und Event#findElement in allen Browsern
• Unterstützung von Opera 9.25 und höher

Neben der zahlreichen Beseitigung von Fehlern, gibt es eine Änderung in der Art und Weise, wie Ajax.Request automatisch Javascript-Antworten auswertet. Frühere Versionen von Prototype verließen sich auf die XMLHttpRequest same-origin policy des Browsers, um sicherzustellen das Antworten mit dem Inhaltstyp ‚text/javascript‘ sicher ausgewertet werden. „Same-origin policy“ bedeutet, dass Domainname, Protokoll und Port übereinstimmen müssen, damit ein Script sicher ausgeführt wird.

Bestimmte Umgebungen außerhalb von Webbrowsern, zum Beispiel Opera´s Widget System, erzwingen nicht die same-origin policy und deswegen besteht die Cross-Domain-Sicherheitslücke. Um das zu verhindern, wurde die „Ajax.Request#isSameOrigin“-Methode eingeführt. Diese liefert „wahr“ zurück, wenn eine Anfrage zur selben Domain, zum selben Port und Protokoll gesendet wird, wie die Seite besitzt. Zudem wird Prototype keine Javascript-Antwort mehr automatisch auswerten, wenn diese Methode „falsch“ zurückliefert.

Die aktuelle Version ist abwärtskompatibel und kann somit problemlos gegen die veraltete Version 1.6.0 ausgetauscht werden. Ebenso wurden die Sicherheitsupdates auch für die Version 1.5 durchgeführt. Prototype 1.5 Nutzer können somit auf die Version 1.5.1.2 aktualisieren.

Prototype herunterladen

Vor kurzem wurde die Beta-Version des Javascript-Frameworks MooTools 1.2 veröffentlicht.

MooTools, das mit zu den umfangreichsten Javascript-Programmiergerüsten gehört, bietet – ähnlich wie jQuery – Möglichkeiten zum vereinfachten Ansprechen von Elementen samt Unterstützung einer Vielzahl an CSS-Selektoren und zur Erzeugung von Effekten.

Kernstück der MooTools ist sicherlich die sehr gut implementierte Unterstützung des objektorientierten Ansatzes von Javascript, die den Umgang mit Klassen für JS-Entwickler erheblich erleichtert. Eine Einführung in die Grundlagen der MooTools-API findet sich auf der Projekthomepage.

Folgende Neuerungen fanden in Version 1.2 Einzug:

• breitere Unterstützung erweiterter Selektoren, z.B. CSS 3-Pseudo-Selektoren wie var myElements = $$(‚div:disabled‘); oder verschachtelter Selektoren wie $$(‚div.class1.class2[id=“someid“][name=“somename“]‘);
• vollständige iFrame-Unterstützung
• vereinfachte Anwendung von „generics“ zum Hinzufügen vom prototype-Funktionen an ein Objekt
• konsistenter Class-Konstruktor, der es ermöglicht, die Klasse zu erfragen, von der ein Objekt erzeugt wurde
• eine Vielzahl weiterer kleiner Verbesserungen

Gesondert möchte ich eine weitere Neuerung eingehen, die das Speichern und Verwalten von Elementen betreffen.

Wie MooTools-Entwickler Tom in seinem Blog in englischer Sprache genauer erklärt, wurde es durch Probleme mit dem Internet Explorer notwendig, sich dem Verwalten von Objekten als Elementattribute zu beschäftigen.
Das Ergebnis ist ein Workaround, das jegliche Probleme beseitigt und den Entwicklern dadurch ermöglicht, an Elemente Objekte als Attribut anzuhängen – ohne sich um die Besonderheiten des IE zu kümmern.

Wie das nun konkret ausschaut, soll der nachfolgende, von mir kommentierte Beispielcode zeigen:

var element = $('myElement');
// greift auf Element "myElement" zu
var data = element.retrieve('galleryData', {});
// hängt an ein leeres Objekt mit dem Namen 'galleryData' an 'myElement' an
data.id = 16;/
/ hängt Attribut 'id' an 'galleryDate' an
data.source = '/images/16.jpg';
// setzt Attribut 'source' für 'galleryDate'
data.title = 'Some Title';
// Element 'galleryDate' bekommt 'title'-Attribut

Der Zugriff funktioniert genauso:

$('myElement').retrieve('galleryData');
// Rückgabewert: { id: 16, source: '/images/16.jpg', title: 'Some Title' }
$('myElement').retrieve('galleryData').id;
// Rückgabewert: 16

MooTools 1.2 beta 2 herunterladen

Dieser Beitrag richtet sich an alle, die ihre Webseiten mit einer eleganten, animierten Bildergalerie aufpeppen möchten.

Die Web2.0 Bildergalerie „slideshow“ von pathfusion bietet dafür einen nützlichen Funktionsumfang. Sie ermöglicht es, die Einzelbilder mit Effekten wie fade (überblenden), wipe (verschieben) und slide (überdecken) zu wechseln.

Die Integration und Konfiguration des Scripts ist sehr einfach.

Zuerst müssen die benötigten Javascript-Dateien im Header eingebunden werden.

<link rel="stylesheet" type="text/css" href="slideshow.css" media="screen" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="backgroundslider.js"></script>
<script type="text/javascript" src="slideshow.js"></script>

Konfiguriert wird das Script wie folgt:

var obj = {
	wait: 3000, /*Wartezeit bis zum Bildwechsel*/
	effect: 'fade', /*Effekt*/
	duration: 1000,
	loop: true, /*als Endlosschleife abspielen (ja / nein)*/
	thumbnails: true, /*Vorschaubilder nutzen (ja / nein)*/
	backgroundSlider: true, /*die bachgrundslider-Klasse für Vorschaubilder nutzen (ja / nein)*/
	onClick: function(i){alert(i)} /*Funktionsaufruf, wenn ein Bild angeklickt wird*/
}
/*ein neues Objekt der SlideShow-Klasse erstellen*/
show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);

Den restlichen, zugehörigen HTML Code entnehmt ihr der slideshow Projektseite.

Die Galerie benötigt das Javascript Framework mootools und ist mit Firefox 2, IE 6, IE 7 und Safari kompatibel.

Ich habe eine Demoseite erstellt, auf der ihr euch den gesamten Funktionsumfang anschauen und testen könnte. Über die Formularelemente auf der rechen Seite können die Parameter der Galerie variiert werden.

Auf das Bild Klicken, um zur Demoseite zu gelangen: