Dynamische Elemente in Webseiten

Die meisten Internetnutzer benutzen sie täglich ohne sie wirklich als solche wahrzunehmen: dynamische Funktionen in Webseiten. Diese sind mittlerweile derart vielfältig und weit verbreitet, dass man sie schon als normal ansehen kann und sich gar nicht mehr darüber wundert, was denn eigentlich dahinter steckt.

Werfen Sie in diesem Fachbeitrag einen Blick hinter die Webseite um zu Erkunden wieso es Dynamität in Webseiten gibt und wieso manche davon bei einigen Besuchern gar nicht funktioniert.

Worum geht es?

Dynamische Funktionen von Webseiten stellen durch Interaktion mit dem Besucher Veränderungen innerhalb der Webseite dar. Sie können zusätzliche Inhalte einblenden, aber auch ausblenden, schnell oder langsam. Sie können Farben wechseln, sie können ein Bild vergrößern oder verkleinern oder auch ganz ausblenden.

Im Unterschied zu Flash-Animationen benötigen diese dynamischen Funktionen keine zusätzlichen Plugins im Browser des Besuchers und auch (meist) keine zusätzlichen Installationen auf dem Webserver. Sie basieren auf der Scriptsprache JavaScript, welches heute bei praktisch allen Browsern verfügbar ist und clientseitig läuft (Ausnahmen wie der Browser Lynx werden eher selten verwendet). Dadurch werden jedoch auch gleichzeitig ihre Nachteile deutlich:

• im Browser des Besuchers muss JavaScript aktiviert sein damit dieser die Animationen und Effekte sehen kann
• je nach Leistungen des Systems des Besuchers und auch abhängig vom verwendeten Browser können die Animationen und Effekte unterschiedlich schnell dargestellt werden. Eine von der Geschwindigkeit her einheitliche Darstellung kann nicht gewährleistet werden.

Daraus ergeben sich für die Entwicklung von diesen dynamischen Funktionen folgende Einschränkungen:

• sichere die Funktionen derart ab, dass sie auf Grund einer langen Laufzeit keinen Absturz des Browsers des Besuchers verursachen
• beschränke dich auf die minimalsten Programmierungen für die Umsetzung der Programmierung
• stelle sicher, dass Inhalte die diese Funktionen einblenden auch ohne JavaScript erreicht werden kann, was besonders bei Shop-Systemen ratsam ist da sonst Nutzer ohne JavaScript keine Bestellungen durchführen könnten

Wie sieht das jetzt eigentlich aus?

Wie schon angedeutet, gibt es sehr viele Beispiele für JavaScript-basierten Funktionen. Die besten Beispiele für die vielfältigen Einsatzmöglichkeiten sind die bekannten Communities meinVZ/studiVZ und Facebook. Diese Webseiten basieren praktisch nur auf JavaScript, aus dem Grund wirken sie auch sehr dynamisch, modern und so als würden sie sich ständig verändern.

Es gibt natürlich noch viele andere Beispiele, auch deutlich kleinere. Klicken Sie z.B. auf dieser Webseite hier oben rechs auf das Wort "Suche". Es öffnet sich daraufhin ein Flyout, welches ein Suchfeld bereitstellt. Auch dieser Effekt ist JavaScript zu verdanken. Auch sind animierte Menüs wie hier möglich. Oder der dynamische Wechsel von Inhalten inkl. animierter Anpassung des Layouts wie hier.

Vorlagen nutzen

Um sich die Arbeit bei der Programmierung etwas zu erleichern, gibt es einige JavaScript-Frameworks oder -Bibliotheken. Diese stellen für viele der meistgenutzten Effekte fertige Funktionen bereit, die meist auch in allen aktuellen Browsern lauffähig sind. Beispiele hierfür sind die mooTools und jQuery. Einige weitere Bibliotheken wurden bereits im Fachbeitrag Flyout, Lightbox, Prototype, Greybox - im Dschungel der JavaScript-Anwendungen beschrieben.

Dadurch kann man sich die Arbeit etwas erleichern, allerdings schlittert man gleichzeitig in die Gefahr hinein, dass man fremde Software in die eigene Webseite einbaut in die man selbst keinen oder nicht genügend Einblick hat. Im schlimmsten Fall unterstützt die fremde Funktion zwar eine Animation, stellt diese aber im Internet Explorer 7 falsch darf - oder die eingebundene Bibliothek beinhaltet Code der die Software automatisch Zugriffsdaten ermitteln lässt. Noch schlimmer wäre es, wenn die Bibliothek ein Virus oder irgendeinen anderen Schadcode enthalten würde, was aber bei öffentlich verfügbaren und sehr oft verwendeten Bibliotheken wie den o.g. sehr unwahrscheinlich ist.

Man muss also abwägen, ob der Einsatz einers JavaScript-Frameworks oder einer -Bibliothek im Rahmen einer Webseite sinnvoll ist, ob sie nicht vielleicht doch mehr Schaden als Nutzen bringt. Zudem kann sie auch mehr Aufwand bedeuten: jede Software muss gewartet werden, dazu gehört auch die Aktualisierung. Man muss also regelmäßig schauen, ob es eine neue Version der JavaScript-Bibliothek gibt und ob diese z.B. Fehlerbeseitigungen beinhaltet die die eigene Webseite betreffen könnten.

jQuery einbinden

Grundsätzlich sollte man die aktuellste JavaScript-Datei von www.jquery.com für die Webseite verwenden. Die Einbindung dieser Datei ist dann auch schnell erledigt und kann nicht nur im CMS VIO.Matrix so einfach vorgenommen werden:

<script type="text/javascript" src="jquery.js"></script>

Und dann kann man auch schon die Bibliothek verwenden. Einfaches Beispiel:

<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Danke für Ihren Besuch!");
});
});
</script>

Durch diesen Code würde sich beim Laden der Seite ein JavaScript-Hinweisfenster öffnen, welches "Danke für Ihren Besuch!" als Text beinhaltet.

Die einzelnen zur Verfügung stehenden Funktionen von jQuery werden recht ausführlich auf der offiziellen Webseite beschrieben: api.jquery.com - hervorzuheben sind hierbei z.B. fadeIn() und fadeOut() sowie animate(), welche sehr ansehnliche Möglichkeiten zur Beeinflussen des Styles durch Animationen ermöglichen.

mooTools

Die mooTools lassen sich ebenso einfach integrieren. Einfach die JavaScript-Datei von der offiziellen Webseite runterladen und in der Dokumentation die gewünschten Funktionen heraussuchen.

Die Bedeutung wird weiter zunehmen

JavaScript-Bibliotheken sind in vergangenen Jahren zu einem unersetzbaren Bestandteil des Internets geworden. Ohne diese würden viele Webseiten nur halb so gut aussehen, viele Darstellungen auch gar nicht möglich sein. Viele Unternehmen wären nicht zu dem geworden was sie heute sind: Marktführer wie Facebook oder Google setzen zu großen Teilen fast ausschließlich auf JavaScript-basierte Dynamität.

Internetnutzer, die die aktuellsten Browserversionen verwenden, kommen zudem in den Genuss von immer schnelleren, nahezu perfekten Darstellungen dieser Animationen. Jede neue Browsergeneration liefert wieder neue Möglichkeiten und wischt vorherige Grenzen beiseite.

Als Teil des bekannten "Web 2.0"-Begriffs wird die Bedeutung von dynamischen Funktionen in Webseiten auch weiter zunehmen. Grenzen setzt hier nur der Mensch selbst durch seine eigenen Vorlieben.