Programmierung

Bewegte Oberfläche

Die meisten Web-Seiten werden heute mit HTML (für Inhalt und Struktur), CSS (für die Darstellung) und JavaScript (für die Interaktion mit dem Benutzer und den Datenaustausch mit dem Server) gebaut. Mit JavaScript können HTML-Elemente und CSS-Stilauszeichnungen verändert, entfernt und hinzugefügt werden. Dies ermöglicht es, Seiten mit interaktiven Einblendungen und Animationen anzureichern und Inhalte vom Server nachzuladen (allerdings, was nicht unerwähnt bleiben soll, auch betrügerische Manipulationen). Zu einem großen Teil ist ein Web-Programmierer bei der Erstellung seines Codes allerdings damit beschäftigt, Kompatibilität mit den verschiedenen Browsern herzustellen. Einige erfahrene Programmierer von Webseiten schätzen den Aufwand für das logische Grundgerüst auf unter 20 % des Gesamtaufwandes und den Aufwand nur für die Anpassung an Internet Explorer in den aktuellen Versionen auf über 50 %.

So stellt eine Bibliothek wie jQuery[1], welche die dialektalen Unterschiede der verschiedenen Browser normalisiert, eine außerordentliche Erleichterung dar. 2006 veröffentlichte der zweiundzwanzigjährige John Resig die erste Version der Bibliothek mit dem Versprechen Write Less, Do More (Schreibe weniger, schaffe mehr), die ihm bald Ruhm und Auszeichnungen einbrachte. Inzwischen wird jQuery in einer großen Zahl von Web-Seiten verwendet, u.a. auch in vielen, die zu den meist aufgerufenen zählen. Das ist kein Wunder, denn jQuery hat wegen seiner konzisen Programmierschnittstelle eine steile Lernkurve, befreit weitgehend von den Kopfschmerzen, welche das Finden von Lösungen für wenigstens die meisten Browser bereitet, und spart somit eine Menge Zeit. Zudem vereinfacht es Konzepte wie die Ereignisbehandlung mit Funktionsrückrufen und die Steuerung durch Zeitgeber, die auch bei Animationen eine bedeutende Rolle spielen.

Durch Übergänge kann der Benutzer Änderungen, die er auslöst, besser wahrnehmen, das System erscheint responsiver. Deshalb erschien es mir eine gute Idee, die Einblendung vergrößerter Ansichten in meinen Fotogalerien durch animierte Übergänge anzureichern. Wenn das Bild entsprechend groß ist, wird es beim ersten Klick nur soweit vergrößert, dass es noch in das Fenster passt, und erst beim zweiten Klick auf volle Größe gebracht (sinnvoll bei Panoramabildern wie z.B. den Terschellinger Waldstücken). Mit jQuery war die Programmierung ein Kinderspiel. Ich konnte mich auf die Anordnung der Elemente und ihre Koordinaten konzentrieren, ohne mich um Browser-Kompatibilität zu kümmern. Da es sich bei meiner Homepage um ein Hobby handelt, hätte ich es ohne jQuery bei der einfachen früheren Version belassen. Auf meinem alten G4 ruckeln die Zooms ein wenig (oder eiern vielmehr, sodass einem betrunken zumute wird), aber auf neueren Rechnern – in allen Konstellationen von Betriebssystem und Browser, die mir zum Testen zur Verfügung standen – läuft die Animation glatt.

1. Library, Dokumentation, Tutorien und mehr sind auf der englisch-sprachigen Web-Site des jQuery Project unter der Adresse http://jquery.com/ zu finden.

5. Januar 2012 von Kai Yves Linden
Kategorien: Programmierung | Schlagwörter: | Kommentare deaktiviert für Bewegte Oberfläche