Ein skriptakulärer Online-Shop

Webentwicklung mit script.aculo.us
Kommentare

AJAX ermöglicht durch den asynchronen Datenaustausch zwischen Server und Client völlig neue Denkmuster bei der Gestaltung von Benutzeroberflächen im Browser. Die Unabhängigkeit vom Reload einer Website schafft Raum für innovative Konzepte, die stark auf intuitive Bedienung, Unterstützung des Users und optische Effekte setzen. Mit der JavaScript-Bibliothek script.aculo.us entstehen solche Webanwendungen in kurzer Zeit – so zum Beispiel ein Online-Shop im Stile von Web 2.0.

Der Inhalt des Updates auf Web 2.0, welches sich gerade eifrig selbst im Internet installiert, ist schwer zu beschreiben. Der Urheber dieses Begriffs, Tim O’Reilly, ist manchmal selbst überrascht, was alles in dieses Schlagwort hineininterpretiert wird. Er selbst tut sich hin und wieder schwer, klare Eckpunkte dieser immer realer werdenden Zukunftsvision zu definieren. Letztlich gibt es wohl nur einen unumstrittenen Punkt bei Web 2.0: Der User soll im Web der absolute Mittelpunkt sein. Um ihn und für ihn muss sich alles im Internet drehen. Das trifft bei weitem nicht nur auf die Dienstleistungen an sich zu. Die Art und Weise, wie benutzerfreundlich diese Angebote bedient werden können, ist dabei mindestens ein ebenso wichtiger Punkt. Oberflächen im Web-2.0-Stil müssen einfach, interaktiv, effizient, flexibel, schnell und aus dem Bauch heraus bedienbar sein. Im optimalen Fall verbreitet das Klicken und Tippen im Browser sogar Freude bei den Benutzern, was sich bei kommerziellen Angeboten oft auch auf der Einnahmenseite bemerkbar macht. Das ist aber nicht gemeint, wenn von Rich Internet Applications (RIA) die Rede ist. Vielmehr steht dieser Begriff für Anwendungen im Browser, die sich eher wie Desktop-Applikationen verhalten und sich gegen die ureigenen Paradigmen von verstaubten HTML-Formularen mit grauem Submit-Knopf und langer Ladezeit stellen. RIAs reagieren in Windeseile auf Useraktionen, holen mal eben ein paar Daten vom Server, unterstützen den User bei der Eingabe durch das Vorschlagen möglicher Werte oder machen die Webseite durch dezente und gezielte optische Leckerbissen lebendig und fesselnd. Bislang waren mit Rich Internet Applications meist Flash-Anwendungen im Browser gemeint, mit denen man daheim sein Traumauto per Drag’n’Drop zusammenbauen oder die zu erwartenden Zinsen einer Anlage berechnen kann, wobei individuell erstellte Diagramme zum Einsatz kommen. Als RIA kann man sicher auch die Webangebote bezeichnen, auf denen man vorab das neue Handy oder die neue Kamera virtuell ausprobieren kann. Rich kann man hier im Deutschen mit reichhaltig übersetzen. Es steht für Eigenschaften und Fähigkeiten, die eben nicht jede Weboberfläche hat und den Benutzer positiv und zielorientiert fordert, ohne ihn zu überfordern.

Rich Internet Applications mit JavaScript

Es muss aber nicht immer Flash sein, um eine faszinierende Benutzeroberfläche für eine Rich User Experience im Browser zu verwirklichen. Obgleich in Sachen Animation oder Sound- und Videounterstützung gegen Flash völlig chancenlos, darf JavaScript für die Entwicklung von reichhaltigen Applikationen im Browser nicht unterschätzt werden. Erst recht, seitdem sich JavaScript im Windschatten von AJAX mehr und mehr einen noch nie da gewesenen Stellenwert erobert hat. Erst durch JavaScript sind schlanke und schnelle Web-2.0-Oberflächen möglich, von denen eben die Rede war. Und im Gegensatz zu Flash-Applikationen im Browser ist kein Plug-in oder eine spezielle Authoring-Software für deren Erzeugung nötig. Ein ganz normaler Browser und ein ebensolcher Texteditor reichen aus, um RIAs mit JavaScript zu entwickeln.

Script.aculo.us: JavaScript für Web 2.0

Script.aculo.us ist eine frei nutzbare Java­Script-Bibliothek, die vor allem für optische Effekte und attraktive Steuerelemente auf Websites genutzt werden kann. Sie basiert auf dem ebenfalls im Zuge von AJAX populär gewordenen Framework Prototype, welches neben seinen ausgeklügelten AJAX-Klassen auch eine Vielzahl weiterer äußerst nützlicher Funktionen für den Programmiereralltag mitbringt. Auf der Script.aculo.us-Website finden Sie neben dem freien Download der unter einer Open-Source-Lizenz stehenden Bibliothek ein umfangreiches Wiki, das die Objekte, Methoden und Eigenschaften von Script.aculo.us beschreibt. Es geht auch auf die integrierte Bibliothek Prototype ein, zu der es keine offizielle Dokumentation gibt. Die Website ist auch deshalb ein guter Ausgangspunkt für Script.aculo.us-Neueinsteiger, vor allem weil dort viele Beispiele zur Verwendung zur Verfügung stehen, die durchaus eine inspirative Wirkung haben. Script.aculo.us ist so programmiert, dass eine größtmögliche Browserkompatibilität gewährleistet ist. Die nervliche Belastung auf der Suche nach Gründen, warum dies und das in jedem Browser anders abläuft, entfällt. Die aktuellen Versionen von Firefox, Internet Explorer, Konqueror, Opera und Safari werden dabei von Script.aculo.us berücksichtigt. Die jüngst erschienene Version 1.6.2 verbessert die Kompatibilität sogar noch. Browserunabhängigkeit ist aber nur ein wichtiger Punkt. Weshalb Script.aculo.us innerhalb kürzester Zeit darüber hinaus zum Star unter den JavaScript-Bibliotheken  avancierte, erfahren Sie sicher am besten an einem Praxisbeispiel: Ein Online-Shop, der den kompletten Datenverkehr reloadfrei abwickelt, ein von der realen Welt abgeschautes Drag’n’Drop-Warenkorb-System bietet und den User durch kleine optische Effekte auf Veränderungen an der Oberfläche hinweist.

Das Konzept

Der Shop greift einige aktuelle Usability-Trends auf, die teilweise vom Desktop kommen, aber auch aus der internetfreien Welt stammen. Das ist auch der Grund, weshalb Sie beispielsweise gleich das Wort Regal lesen werden. Die Artikel, die unser fiktiver Online-Shop anbietet, werden zunächst in Form eines Fotos und einigen wichtigen Daten via AJAX und JSON als Datenaustauschformat vom Server abgerufen und im Browser dargestellt. Nach der Bestückung des Verkaufsraums kann der potenzielle Kunde bestimmen, welche Waren angezeigt werden sollen. Gerade bei einer umfangreicheren Produktpalette ist das Filtern des Angebots eine willkommene Hilfe. Zu diesem Zweck steht im oberen Bereich des Regals ein Eingabefeld zur Verfügung. Gibt man dort einen Begriff ein, so zeigt das Regal nur noch Artikel an, die in ihrer Bezeichnung diesen Begriff enthalten. Dabei hilft die Auto-Complete-Funktion von Script.aculo.us, die während des Eintippens passende Vorschläge zu möglichen Eingaben macht.

Abb. 1: Guten Tag, was darf’s denn sein?

Wie im Laden um die Ecke können die gewünschten Produkte aus dem Regal in einen Einkaufskorb gelegt werden (Abb. 1), der hier natürlich nur virtuell und zweidimensional vorliegt. Aber auch hier gilt: Produkt greifen, in den Korb packen, loslassen. Der Mauszeiger ist hierbei der verlängerte Arm des Users, der seine Erfahrungen aus der Offline-Welt adaptieren kann. Und sollte es mal nicht gleich Klick machen, steht noch ein kleiner Hinweis im Warenkorb-Bereich, der das Einkaufen erklärt. Natürlich muss es im Online-Shop wie in der realen Welt für den Einkäufer auch eine Möglichkeit geben, einen Artikel wieder zurückzustellen. Wie geht das? Produkt im Warenkorb greifen, zurück ins Regal, loslassen. Die Option der realen Welt, die nicht gewollte Ware kurz vor dem Bezahlen noch schnell in die Impulsivkäufe an der Kasse zu integrieren, wird hier nicht unterstützt. Der im rechten Teil des Shops positionierte Kassenzettel passt sich jeder neuen Situation an – egal, ob dem Warenkorb etwas hinzugefügt oder entnommen wurde. Er bietet stets einen Überblick über die preisliche Lage im Kosumkörbchen. Sämtliche dafür notwendige Berechnungen finden im Browser statt. Bei jeder Veränderung des Kassenzettels soll der Yellow-Fade-Effekt zum Einsatz kommen. Bei Yellow Fade verfärbt sich der geänderte Bereich nach und nach in ein sattes Gelb, ehe die ursprüngliche Farbe wenig später wieder erscheint. Das Ganze dauert etwa ein bis zwei Sekunden. Dieser Effekt wird zur Hervorhebung veränderter Bereiche genutzt. Gerade bei AJAX-Anwendungen, deren Datenverkehre nicht mehr auffällig durch Seiten-Reloads signalisiert werden, sondern meist nebenbei und unmerklich für den User stattfinden, ist das ein echtes Plus an Usability. Sind Warenkorb und Kassenzettel zu Genüge mit Artikeln gefüllt, bringt ein Klick auf Jetzt bestellen den User zu einer Eingabemaske, die die Lieferadresse entgegennimmt. Dabei werden Regal und Warenkorb effektvoll und mit der Unterstützung von Script.aculo.us aus- und die Adresseingabefelder eingeblendet. Völlig klar, die Showeinlage muss natürlich nicht sein. Doch der Benutzer erkennt durch diese verlangsamte, animierte Veränderung, dass er sich nun in einem anderen Bereich des Shops befindet. Möchte der User doch noch weitere Einkäufe tätigen, kann er durch einen Klick auf Weiter einkaufen wieder zurück zu Regal und Warenkorb. Dabei wird ein weiteres Mal die Script.aculo.us-Effektmaschine angeworfen. Andernfalls startet ein Klick auf den Button Bestellung abschicken die Übertragung der Order an den Webserver, der die Kundenwünsche speichert. Damit der User das auch mitbekommt, wird eine entsprechende Meldung so lange eingeblendet, bis der Server das Signal gibt, dass er die Bestellung erhalten hat. Fertig. Und wir halten fest: Während des gesamten Ablaufs des Einkaufsvorgangs hat der Client nur zweimal Daten vom Server geholt bzw. an selbigen geschickt. Alles andere, Berechnungen, Filtern, Speichern des Warenkorb-inhalts, findet im Browser statt. Das ist typisch für Rich Internet Applications.

Sie können den eben beschriebenen Einkaufstempel gern selbst ausprobieren und das Gelesene nachvollziehen. Sie bekommen auch garantiert keines der dort erhältlichen Produkte zugeschickt, versprochen! Möglicherweise werden Sie sich aber während Ihrer Einkaufstour die Frage stellen, wie groß denn der Programmieraufwand für einen solchen Shop ist. Die Antwort: Mit der Hilfe von Script.aculo.us (inklusive Prototype) ist das im Handumdrehen erledigt. Werfen wir einen Blick auf einige interessante Stellen im Quelltext. Dabei soll das Hauptaugenmerk auf die Clientseite gerichtet werden. Die Serverseite lassen wir dabei fast komplett außer Acht, lediglich zwei Dummy-PHP-Skripte mit minimaler Programmlogik, die auf Anfragen der AJAX-Engine des Shops antworten, kommen bei unserer Rich Script.aculo.us Experience zum Einsatz.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -