Ajaxschmiede.de

Über einen Blog von John Resig, Javascript-Guru und Mozilla-Foundation-Mitarbeiter, stieß ich auf eine sehr interessante Java-Implementierung in Javascript.

Das Orto (PDF in Japanisch) genannte Projekt ist eine Umsetzung der Java Virtual Machine (JVM) in JavaScript. Das bedeutet, dass grundsätzlich jede in Bytecode kompilierte Java-Anwendung sich mit Orto im Browser ausführen lässt. Orto erzeugt dabei aus dem Bytecode Javascript und bettet diesen in die Homepage ein.

Auch die Fähigkeit von Java Programme in mehreren Threads auszuführen, wird durch Timeouts nachgeahmt. Dadurch wird es möglich, Java-Spiele auf weiteren nicht-Java-fähigen Geräten wie dem iPhone zum Laufen zu bewegen. Desweiteren wird von den Entwicklern versucht die Java UI (User Interface)-Übereinstimmungen weitestgehend über HTML-Elemente zu simulieren, wodurch es erheblich leichter wird, existierende Anwendungen zu konvertieren. Dies ist aber nur bis zu einem bestimmten Grad machbar, da Java viel umfangreichere Möglichkeiten bietet.

Alles in allem wird es kaum möglich sein, Java vollständig zu unterstützen, somit ist dieses Projekt nur eine Machbarkeitsstudie.

Das Entwicklerteam hinter Orto veröffentlichte eine Xetris genannte Tetris-Demo, die einen ersten Eindruck ihrer Implementierung zeigt.

Harald Kirschner veröffentlichte Version 2.0 seiner Multi-Uploadlösung FancyUpload, die den Flashuploader swiff und die Javascript-Bibliothek MooTools voraussetzt.

FancyUpload ist eine einfach zu handhabende Anwendung, die es ermöglicht mehrere Uploads nacheinander auszuführen und diesen Vorgang graphisch darzustellen. Es ist leicht einzurichten, serverunabhängig, lässt sich mit Hilfe von CSS und XHTML vollständig frei gestalten und basiert auf MooTools, um auf allen aktuellen Browsern (Internet Explorer 6+, Opera 9, Firefox 1.5+ und Safari 2+) zu laufen.

Die Featureliste liest sich wie folgt:

• Auswählen und Uploaden von mehreren Dateien
• Herausfiltern von Dateitypen durch einen Auswahldialog
• Optionale Events um eigene Ereignisfunktionen einzubinden
• Anzeigen von nützlichen Dateiinformationen noch vor Beginn des Uploadvorgangs
• Begrenzen der Uploads über die Dateigröße oder – anzahl
• plattform- und serverunabhängig, setzt nur Flash 9+ vorraus
• Abbrechen laufender Uploads, Hinzufügen neuer Uploads während eines laufenden Hochladevorgangs
• Alles ist optional, dokumentiert und lässt sich leicht anpassen
• Serverantwort nach dem Uploaden zum Anzeigen zusätzlicher Dateiinformationen oder einer Bildvorschau
• Angabe der aktuellen Uploadgeschwindigkeit und der verbleibenden Zeit
• Senden zusätzlicher Informationen über Variablen mittels GET und POST
• Bestimmen des Dateinamens nach dem Uploadvorgang

Wie die Entwickler des WebKit-Browsers in ihrem Blog berichten, unterstützt ihr Schützling ab sofort CSS-Masken, mit denen sich sehr coole Effekte erzeugen lassen. Möglich wird dies durch die folgenden, neu eingeführten CSS-Eigenschaften:

• -webkit-mask (background)
• -webkit-mask-attachment (background-attachment)
• -webkit-mask-clip (background-clip)
• -webkit-mask-origin (background-origin)
• -webkit-mask-image (background-image)
• -webkit-mask-repeat (background-repeat)
• -webkit-mask-composite (background-composite)
• -webkit-mask-box-image (border-image)

Mit den CSS-Masken ergeben sich interessante Möglichkeiten um Überblendeffekte zu erstellen. So kann man beispielsweise ein Bild mit einem weichen Übergang zum Hintergrund erschaffen, indem man dem Bild eine Maskengrafik erweist. Der Quellcode dafür sieht wie folgt aus:

<img src=”kate.png” style=”-webkit-mask-box-image: url(mask.png) 75 stretch;” />

Des weiteren ist ebenso gut möglich, die vor kurzem vorgestellten Gradienten als Maskengrafik zu verwenden um Verläufe zu erzeugen. Der Code hierfür lautet:

<img src=”kate.png” style=”-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1), to(rgba(0,0,0,0))” />

Auch svg-Grafiken eigenen sich als Grundlage für CSS-Masken. Dafür wird folgende Syntax angewandt:

<img src=”kate.png” style=”-webkit-mask-image: url(circle.svg)” />

WebKit stellt die Mittel zur Verfügung, es liegt an uns Webentwicklern die Chancen zu erkennen und die neuen Funktionen zu verwenden.

Ich bezweifle jedoch, dass sich die hier vorgestellten Masken in dieser Form mittelfristig durchsetzen werden, da sie erst in zukünftigen CSS-Definitionen Einzug halten. Es wird noch etliche Zeit dauern bis CSS-Masken auch von den „gewöhnlichen“ Browsern, zu denen ich WebKit nicht zähle, unterstützt werden.

Stephen Celis veröffentliche Anfang der Woche den Javascript-Kalender Timeframe mit vielen Extras.

Der Timeframe-Kalender ermöglicht das Markieren eines Tag oder gar mehrerer Tage. Voraussetzung zum Nutzen der Anwendung ist zum einen Prototype und zum anderen die timeframe.js-Datei.

Um Timeframe in ein bestehendes Projekt einzubinden, erzeugt man ein neues Objekt der Klasse Timeframe. Das sieht in der allgemeinen Form so aus: new Timeframe(element, options), wobei element für die ID des Elements steht, in welches der Kalender gezeichnet werden soll.

options bietet folgende Möglichkeiten zum individuellen Anpassen:

• calendars – Anzahl der Monate die auf einmal angezeigt werden sollen (Standard: 2)
• format – gibt das Datumsformat der input-Felder an (default: %b %d, %Y)
• weekoffset – definiert den Tag des Wochenbeginn (1 um die Woche miit Montag beginnen zu lassen)
• startfield, endfield – bestimmt den Beginn und das Ende der markierten Tage (standardmäßig werden diese von Timeframe erzeugt)
• previousbutton, todaybutton, nextbutton, resetbutton – legt die Navigationselemente fest (standardmäßig werden diese von Timeframe dargestellt)

Ein Aufruf sieht beispielsweise so aus:

new Timeframe('calendars', {
startfield: 'start',
endfield: 'end',
previousbutton: 'previous',
todaybutton: 'today',
nextbutton: 'next',
resetbutton: 'reset' });
//]]>

Kürzlich wurde die Version 0.1.0 des Javascript-Rollenspiels ProtoRPG veröffentlicht.

Auf den ersten Blick erinnert diese Spieledemo stark an die Anfänge des Rollenspielgenres auf den Konsolen. Auch die Steuerung ist sehr einfach gehalten. Mittels Pfeiltasten bewegt man sich in der virtuellen Umgebung. Durch Drücken einer Aktionstaste und anschließend einer Pfeiltaste werden besondere Events ausgelöst, die da wären:

• U + Richtungstaste : Benutzen (Tür öffnen, Schalter betätigen, usw.)
• T + Richtungstaste : Sprechen (Gespräch beginnen)
• L + Richtungstaste : Durchstöbern (Truheninhalt ansehen)
• P + Richtungstaste : Schieben (Objekt verschieben)
• A + Richtungstaste : Angriff
• G + Richtungstaste : Item einsammeln

Das gesamte RBG läuft im Browser und ist nur in Javascript geschrieben. Dabei wird auf die Bibliotheken Prototype und Script.aculo.us zurückgegriffen.

ProtoRPG kann leicht verändert und durch eigene Dialoge und Grafiken angepasst werden, da nur gewöhnliche Bildformate und Klartextdateien verwendet werden.

Der Entwickler plant für die kommenden Versionen folgende Erweiterungen:

• Anlegen und Laden von Speicherständen (mittels AJAX und / oder durch das Verwenden der neuen „Local Storage API“, die in den Browsern der nächsten Generation Einzug halten wird)
• Töne (über den neuen <sound>-Tag, der in HTML 5.0 angekündigt wurde)
• Magiesystem mit Zaubern und der Herstellung von Tränken
• Weitere Befehle zum Aufrufen von Events im Spielverlauf
• Zwischensequenzen

Ich gehe davon aus, dass uns in naher Zukunft noch weitere, viel aufwendigere JS-Spiele von pfiffigen Entwicklern erreichen werden und unser bisherigen Verständnis von Browsergames verändern werden.

In dieser Woche sind jeweils neue Versionen und Snapshots der wichtigsten Browser erschienen. Während die einen Sicherheitslücken schließen, bieten andere gänzlich neue Möglichkeiten.

Den Anfang machen die beiden Browser der Mozilla Foundation mit Namen Firefox und Appels Safari. Die neuen Versionen 2.0.0.14 von FF und 3.1.1 von Safari, die jeweils auch in deutscher Sprache zur Verfügung stehen, beheben einige Sicherheitslücken, die es zum Beispiel ermöglichten den Browser zum Absturz zu bringen bzw. schadhaften Code aus dem Clienten-Rechner auszuführen. In beiden Fällen steckte der Fehler in der Javascript-Engine.

Ein Fehler, der nur im Safari – sowohl die Windows- als auch die Mac-Version, betrifft, ermöglichte das Ausführen von Cross-Site-Scripting-Attacken indem ein Doppelpunkt in die Adressleiste eingegeben wurde.

Es wird dringend empfohlen, auf die veröffentlichen Versionen upzudaten!

Auch bei den Opera-Entwicklern gibt es Neuigkeiten zu vermelden. Im aktuellen Nightly Build wurde eine neue Schutzfunktion zum Warnen vor gefakten und betrügerischen Websites integriert. Diese „fraud protection“ ermöglicht besseres, schnelleres und nachvollziehbareres Blocken von unerwünschten Seiten und ist standardmäßig aktiviert. Zudem wurde eine zweite Beta der Version 9.5 in Aussicht gestellt.

Völliges Neuland betreten die Entwickler von WebKit. Ihr Browser unterstützt ab sofort die in HTML5 erwähnten Gradientenfarbverläufe. Die Syntax sieht wie folgt aus:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Die einzelnen Attribute haben folgende Bedeutung:

• type – bestimmt die Art des Gradienten („linear“ oder „radial“)
• point – ist ein Pärchen von mit Leerzeichen abgetrennten Werten (in Zahlen, Prozentangaben und Beschreibungen wie „bottom“)
• radius – gibt den Radius des Gradienten beim Typ „radial“ an
• stop – ist eine Funktion mit Namen „color-stop“, die 2 Argumente erwartet – „stop value“ (ein Wert zwischen 0 und 1 oder prozentual) und „color“ (eine css-konforme Farbangabe)

Die Gradientenverläufe lassen sich auf Hintergründe, Rahmen, Listengrafiken und als eingebettete Grafiken verwenden. Wer genaueres wissen möchte, schaue sich den WebKit-Blog zu diesem Thema an.

Auf der dänischen Javascript-Website Nihilogic wurde vor wenigen Tagen eine Canvas-Adaption des Spieleklassikers Super Mario vorgestellt.

Das gesamte „Spiel“ kommt ohne Grafikdateien aus. Die dargestellten Elemente werden über Canvas, einem HTML5-Element zum Darstellen von Grafiken im Webbrowser, erzeugt. Da der Internet Explorer, einschließlich Version 8 – wie wir berichten – Canvas nicht unterstürzt, wurde ein DIV-Fallbackmodus eingerichtet.

Auch an die Hintergrundmusik wurde gedacht. Diese stammt von einer MIDI-Datei, die mittels base64-Kodierung direkt in den Javascript-Code eingebunden wurden.

Die Ausführgeschwindigkeit der JS-Spielerei kann zwar zwischen den einzelnen Browern variieren, läuft aber sowohl mit Firefox, Opera, Safari als auch mit dem erwähnten IE.

Ich halte die Umsetzung für eine gelunge Demonstration, was in Zukunft alles möglich ist im Web, wenn sich gewisse (neuere) Standards durchsetzen. Es handelt sich hierbei um keinen komplettem Level!

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 🙂