Flyout, Lightbox, Prototype, Greybox - im Dschungel der JavaScript-Anwendungen

Beispiel für Flyout

Beispiel für Lightbox

Beispiel für Greybox

Seit dem Boom des Web 2.0 finden verschiedene Anwendungen vermehrt Einzug in Webseiten. Dadurch eröffnen sich für Designer völlig neue Wege um Inhalte darzustellen. In diesem Fachbeitrag wird beschrieben, worum es sich bei diesen Anwendungen handelt und welche Möglichkeiten bei Design und der Programmierung der Webseite sich dadurch ergeben.

Technische Grundlagen

Hinter diesen Anwendungen steckt meist eine JavaScript-Bibliothek. JavaScript ist eine im Browser des Besuchers ausgeführte Scriptsprache. Sie wird bereits seit mehr als einem Jahrzehnt im Internet verwendet. Erst durch die Verbreitung von schnelleren Browsern und der breiteren Unterstützung durch diese konnte sie sich im Internet durchsetzen.

Die Zusammenstellung einer Vielzahl JavaScript-Funktionen ergibt eine JavaScript-Bibliothek. Diese hat eine bestimmte Aufgabe und Funktionsweise. Die darauf aufbauenden JavaScript-Anwendungen geben dem Webseitenersteller die Möglichkeit mit nur wenigen Einstellungen eine bestimmte Ausgabe in der Webseite zu erreichen. Manche JavaScript-Anwendungen erlauben es auch die Ausgabe des Designs seinen eigenen Wünschen anzupassen. Dies ist aber nicht immer möglich.

Inzwischen gibt es eine Vielzahl vorgefertigter JavaScript-Anwendungen, welche man bei der Webseitenerstellung in die Webseite einbauen kann. Sie bieten viele Möglichkeiten, stellen den Webseitenersteller wie auch den Designer vor einige Hürden.

Die Möglichkeiten

Mittels JavaScript kann man ...

.. die gerade geladene Seite mit weiteren Inhalten füllen.
.. von der gerade geladenen Seite Inhalte entfernen.
.. das Design der gerade geladenen Seite beeinflussen (z.B. neue Stylesheets setzen um etwas hervorzuheben oder anzuzeigen).
.. den Nutzer bei der Eingabe von Inhalten unterstützen.
.. Eingaben des Nutzers auf ihre Korrektheit prüfen (z.B. zur Formularfeldprüfung).
.. prüfen, welche Funktionen der Browser des Besuchers unterstützt (z.B. prüfen, ob ein Flash-Plugin vorhanden ist).

Der Haken

JavaScript erfordert eine entsprechende Unterstützung durch den Browser des Besuchers. Diese Unterstützung kann jedoch durch den Nutzer deaktiviert werden. Gründe hierfür sind meist Sicherheitsaspekte oder Unternehmensvorgaben. Dadurch würde ein Nutzer ohne JavaScript nicht die vom Inhaber der Webseite gewünschten Informationen oder Ansichten des Designs sehen können. Aus diesem Grund sollte man in den meisten Fällen auch eine JavaScript-freie Alternative verwenden, was auch durch den Designer berücksichtigt werden sollte.

Weiterhin gibt es zahlreiche JavaScript-Funktionen, welche nur von einem oder einigen Browsern unterstützt werden. Dies macht es komplizierter eine JavaScript-Anwendung zu programmieren, die in allen Browsern gleich funktioniert. Durch diese Diskrepanz steigt, je nach Anforderung durch das Design, auch der Aufwand bei der Erstellung der Webseite.

Flyouts und Layer

Als Flyouts bezeichnet man Ebenen, die sich über der eigentlichen Webseite öffnen und diese entweder teilweise oder komplett verdecken. Klicken Sie z.B. auf dieser Seite auf den ersten Screenshot. Es öffnet sich ein Flyout, welches eine zusätzliche Information (in dem Fall das vergrößerte Bild) ausgibt.

Man kann auf diese Weise unterschiedlichste Informationen ausgeben. Es muss nicht unbedingt ein Bild sein. Es kann auch eine weiterführende Information zu einem Artikel sein oder ein Beschreibungstext aus einem Glossar.

Solche Informationen könnte man natürlich auch in einem Popup ausgeben. Dies ist jedoch keine moderne Variante und wird von den meisten aktuellen Browsern unterdrückt. Aus diesem Grund sind Flyouts viel weniger gefährlich als Popups.

Die Art wie das Flyout aussieht ist völlig dem Designer überlassen, ebenso die Art der Anzeige (Einblenden, Ausblenden, Fade-Effekt ..).

Beispiele findet man auf www.viomatrix.de (die oben angesprochenen Bilder) und z.B. auf www.body-s.de (Produktkategorie links auswählen und eines der Produktbilder anklicken).

Lightbox

Die Lightbox ist eine fertige JavaScript-Bibliothek. Sie ermöglicht die Vergrößerung eines einzelnen Bildes oder einer einfachen Bildergalerie. Man kann optional eine Bildunterschrift unter jedem Bild angeben. Die Bildergalerie verfügt über eine vor- und zurück-Navigation sowie die Angabe wieviele Bilder in der Galerie vorhanden sind. Die Anzeige erfolgt oberhalb der Webseite, d.h. es wird ein Flyout darüber gelegt und das ganze animiert. Die eigentliche Webseite wird abgedunkelt.

Ein Nachteil der Lightbox ist, dass man sie vom Design her nur schwer anpassen kann. Die Grafiken für die Navigation und den Schließen-Link auszutauschen ist noch relativ einfach. Mehr ist jedoch nur mit großem Aufwand möglich.

Um eine Lightbox zu öffnen, muss

die JavaScript-Anwendung im <head>-Bereich eingebunden werden
ein Link mit dem Attribut "rel" und dem Wert "lightbox" oder "lightbox[galerienummer]" versehen werden.

Beispiel:

Die Lightbox kann man sich z.B. auf der Seite des Programmierers dieser Anwendung anschauen: www.huddletogether.com/projects/lightbox2/ (eines der "Examples" anklicken).

Greybox

Die Greybox dient ähnlichen Aufgaben wie die Lightbox. Sie hat jedoch im Vergleich zu dieser deutliche Vorteile:

Darstellung von beliebigem Content (auch Videos, andere Webseiten, einzelne Seiten)
Navigation zwischen den Contents unabhängig von der Art des Contents
Design kann weitergehend angepasst werden

Genau wie die Lightbox kann eine Greybox über jeden beliebigen Link geöffnet werden. Die eigentliche Webseite wird ebenfalls abgedunkelt.

Beispiel:

<a href="http://www.google.de" onclick="return GB_showCenter('Google', this.href, 630, 800);">Klicken zum Öffnen von Google.de in einer Greybox</a>

Die Greybox kann man sich z.B. auf der Seite des Programmierers dieser Anwendung anschauen: www.orangoo.com/labs/GreyBox/ (im Abschnitt "Website gallery" auf einen der Links klicken)

Thickbox

Ähnlich wie die Greybox ermöglicht es auch die Thickbox verschiedenste Inhalte über der Webseite anzuzeigen. Jedoch bietet diese konkrete Funktionen für die einzelnen Typen. Während bei der Greybox für bestimmte Inhalte noch eine extra HTML-Seite angelegt werden muss, ist dies bei der Thickbox bereits komplett enthalten.

Dadurch werden aber auch die Nachteile deutlich: man kann sie nicht so gut beeinflussen, und das betrifft auch das Design.

Ein Beispiel hierfür findet man auf der Webseite des Programmierers dieser Anwendung: www.ajaxdaddy.com/demo-jquery-thickbox.html.

Weitere JavaScript-Anwendungen

Sogenannte Rich Internet Anwendungen bieten die Möglichkeit einer Internetseite eine intuitive Oberfläche zu erstellen. Dies führte z.B. zu komplett im Webbrowser ablaufenden Programmen die unabhängig vom Betriebssystem weltweit genutzt werden können. Google Docs ist z.B. eine solche Anwendung. Internetnutzer können dort wie unter MS Word oder MS Excel ihre Dokumente und Tabellen verwalten und schreiben, befinden sich aber weiterhin in ihrem Webbrowser.