Moderne Web-Animationen und Funktionen mit jQuery statt mit Flash

Wie geht es weiter auf Handys und iPad? Nach langem Drängen - nicht zuletzt von Apple und Google - stellt Adobe in Zukunft die Entwicklung von Flash auf mobilen Geräten ein.

Wie sollen Webentwickler nun eine attraktive Benutzeroberfläche und eine nutzerfreundliche Interaktion auf Webseiten für iPhone & Co darstellen? Viele Entwickler setzen bei der Programmierung von mobilen Seiten auf HTML5, andere auf jQuery, das mit seinen attraktiven Plugins schnell einsetzbar ist.

Was ist jQuery?

Technisch betrachtet ist jQuery ein "Framework", also ein technischer Rahmen und eine Bibliothek von Funktionen, die frei verwendet werden können. Dieses Framework ist in vielen Systemen wie etwa Wordpress schon vorhanden und wird von großen Unternehmen wie Mircosoft und Nokia unterstützt. Die freie JavaScript-Bibliothek beinhaltet zahlreiche Elemente zur Erstellung von Animationen, zur Interaktion mit dem User und ist recht einfach durch Plugins erweiterbar.

Laut w3techs verwenden 40% aller Seiten mit JavaScript-Unterstützung jQuery. Die verbreiteteste Anwendung sind sicher die jQuery-Slideshows - das Abspielen von verschiedenen Bildern und Dateien nacheinander mit den unterschiedlichsten Überblendungseffekten. Hierbei reichen die Varianten von einfachem Ein- und Ausfaden oder seitlichem rein und Rausschieben der angezeigten Daten bis hin zu sehr komplexen Bilder-Galerien.

Kleiner, einfacher und schneller

Mit dem JavaScript-Framework kann man beispielsweise Stylesheets, sowie Inhalte und Bilder verändern. Dies benötigt vergleichsweise relativ wenig HTML- und JavaScript-Kenntnisse. Der Vorteil für den User: Während er zum Abspielen einer Flash-Datei den Adobe-Flash Player benötigt, können jQuery Content Slider in jedem aktuellen Browser auch ohne Plugin wiedergeben werden - also auch am iPhone und iPad. Dazu weisen jQuery Animationen eine weitaus geringere Dateigröße auf als Flash-Files - das Framework ist also perfekt für mobile Webseiten. Was allerdings auch weiterhin für Flash spricht, ist das 3D-Effekte damit besser umgesetzt werden können.

Wie einsteigen?

Durch die schon breite Verfügbarkeit kann jeder Webdesigner sofort damit starten - etwa mit der Erstellung einer schicken Navigation oder einer Bildergalerie. Bei DrWeb findet sich eine Liste von 50 Tutorials für den Einstieg. Einen technischen Einstieg in Präsentationsformen haben wir auf Slideshare gefunden.

Hier einige Beispiele für gelungene jQuery Plugins:

1. Diapo - jQuery Slideshow mit Effekten (Open Source)

{bild79links}

Gerade in Blogs oder Magazinen können durch den jQuery-Content Slider Diapo Bilder optimal präsentiert werden. Das Diapo Plugin ist zudem kostenlos.

2. Image Zoom Tour

Mit Image Zoom Tour kann man in einem großen Bild kleinere Bereiche markieren. Zu diesem kann man dann ein anderes Bild hinterlegen. Bei einem Klick auf den markierten Teil zoomt man in das andere Bild hinein.

3. Fancy Player

Der Fancy Player erinnert ein wenig an das Thickbox Plugin. Die Darstellung der Videos ist aber besser als beim Konkurrenz Plugin.