Ratgeber: "Webdesign"
Plug-ins für jQuery im Test
jQuery-basierte Erweiterungen für die Website gehören längst nicht mehr zur gewagten Avantgarde, sondern sind die Kür einer anspruchsvollen Webpräsenz. Wir haben nützliche Plug-ins getestet.
Gleitende Bildanimationen, interaktive Bildergalerien, beeindruckende Navigationsmenüs und schicke Seitenübergänge lassen sich mit den geeigneten jQuery-Plug-ins elegant umsetzen.Zahlreiche innovative und flexibel konfigurierbare Plug-ins ermöglichen die Umsetzung erweiterter Funktionen wie Bildern mit Parallax-Animationen, elastischen Video-Playern oder neuartigen Navigationskonzepten.
Navigationsinnovationen
Kaum eine Technologie hat eine so hohe Akzeptanz in der Webgestaltung gefunden wie auf jQuery basierende Interaktivität. In der Kategorie Navigation gibt es einige Perlen, die einer jeden Website das gewisse Etwas verleihen können.Ascensor.jsGetestete Version: 1.0Anbieter: Galley SamaritaineKompatibilität: keine AngabePreis: kostenlos www.kirkas.ch/ascensor
Mit Ascensor.js können Sie einer jeden Website in Windeseile einen unverkennbaren Charakter verleihen, indem Sie konventionellen Seitenaufbau, den wir alle von Browsern gewohnt sind, durch eine gleitende Animation der Inhalte benachbarter Seiten ersetzen.Auf einer Ascensor-gestützten Website liegen einzelne Seiten auf einem imaginären Schachbrett dicht nebeneinander. Wechselt der Benutzer von einer Seite zur nächsten, entschwindet das ursprüngliche Dokument aus der Sicht während die Zielseite hinein gleitet und den frei werdenden Platz im Browserfenster einnimmt.Ascensor.js bietet dem Benutzer als Navigationshilfe eine zweidimensionale Sitemap. Webbesucher können auf die einzelnen Navigationselemente klicken, um die betreffenden Seiten je nach ihrer relativen Position zueinander vertikal, horizontal, oder diagonal gleiten zu lassen.Das Modul eignet sich hervorragend zur Umsetzung von Websites mit knappen, aber strategisch positionierten Inhalten, welche den Besucher mit dem Flair einer gezielt überdimensioniert angelegten Animation beeindrucken sollen.Dropkick.jsGetestete Version: v1.0.0-2-g5b230fbAnbieter: jamielotteringKompatibilität: einschließlich Internet Explorer ab Version 7; vollständige Unterstützung für iOS setzt die Bibliothek Scrollability vorausPreis: Dropkick.js erlaubt es Ihnen, jQuery-basierte Navigationsmenüs ins Leben zu rufen. Zu den Stärken dieser Lösung zählt ihre Abwärtskompatibilität mit dem Internet Explorer ab Version 7 und die Unterstützung von iOS-Geräten. Um natives Scrollen unter iOS zu ermöglichen, benötigt Dropkick.js die Bibliothek Scrollability (joehewitt.github.com/scrollability/ ).In Browsern mit deaktiviertem Javascript greift dem Besucher ein Fallback-Mechanismus unter die Arme, welcher hier eine Navigation auf Basis ganz gewöhnlicher HTML-Elemente bereitstellt.jMenuGetestete Version: 1.8 vom Januar 2012Anbieter: MyJQueryPluginsKompatibilität.
Wie schon der Name des Plug-ins andeutet, können Sie damit jQuery-animierte Menüs bauen. Zahlreiche Parameter erlauben es Ihnen, den Ablauf der Animation mit einer hohen Präzision zu beeinflussen. Sie können unter anderem die Verzögerung der Animation beim Aufklappen eines Menüs in Millisekunden einstellen und die Art der Animation aus insgesamt zwölf unterstützten Varianten aussuchen.
Bildpräsentation
Eine zentrale Herausforderung in vielen Website-Projekten ist die geschickte Darstellung von Bildern. Innovative jQuery-Plug-ins können zur gelungenen Umsetzung dieser Funktionalität einen wesentlichen Beitrag leisten.Cloud ZoomVersion: v1.0.2Anbieter: Professor CloudKompatibilität: alle gängigen Browser, einschließlich Internet Explorer ab Version 6, Firefox, Chrome, Opera und SafariPreis: kostenlos/Spende willkommen www.professorcloud.com/mainsite/cloud-zoom.htm Dieses gerade einmal 6 KByte große Plug-in erlaubt Ihnen die Umsetzung beeindruckender Zoomeffekte zur Anzeige einer Detailansicht von Bildern. Die erweiterte Funktion beinhaltet Effekte wie einen Farb- oder einen Weichzeichnungsfilter, die sich auf das Bild außerhalb des Detailausschnitts anwenden lassen. Cloud Zoom garantiert Ihnen zudem uneingeschränkte Barrierefreiheit in Browsern ohne Javascript- und CSS-Unterstützung.Skitter Version: 3ae97e5Anbieter: Thiago S.F.Kompatibilität: jQuery ab Version 1.6.3Preis: kostenlos thiagosf.net/projects/jquery/skitter/
Bei Skitter handelt es sich um eine jQuery-Bibliothek, mit der Sie eine Sammlung von Bildern in einem Slider-Modul mit bemerkenswerter Eleganz präsentieren. Dank der hohen Anzahl unterstützter Parameter wird Skitter auch sehr hohen Anforderungen gerecht und kann praktisch jeden Geschmack treffen.Sie können unter anderem den Ablauf der Animation beim Bildwechsel, die Art der Visualisierung des Fortschritts, den Typ der zu verwendenden Navigationselemente sowie andere nützliche Optionen direkt auf der Website des Anbieters unter Verwendung rein grafischer Tools einstellen und den resultierenden Code dem Online-Assistenten entnehmen. Skitter unterstützt mehrere Instanzen von Slider-Modulen und ist auch als Plug-in für Wordpess und CakePHP-Helfer verfügbar.
Responsives Webdesign
Die unterschiedlichen Anforderungen mobiler User Agents fordern responsives Webdesign, welches den technischen Voraussetzungen gerecht werden kann. Abhilfe schaffen innovative jQuery-Plug-ins.FlexsliderVersion: 1.8Anbieter: Tyler SmithKompatibilität: alle führenden BrowserPreis: kostenlos/Spende willkommen flex.madebymufffin.com/ Bei Flexslider handelt es sich um ein vollständig responsives jQuery-Plug-in zum Bauen gleitender Diashows. Es passt die Dimensionen der eigenen Slider-Module der tatsächlichen Displaygröße an, ohne die Qualität der Inhalte zu beeinträchtigen. Da sich Flexslider die Hardwarebeschleunigung des Browsers zu Nutze macht, läuft die Slider-Animation reibungslos.Flexslider unterstützt sowohl horizontale als auch vertikale Animation in einer oder sogar mehreren Diashows. Es basiert auf vollständig semantischem Markup und da es beliebige HTML-Elemente innerhalb der einzelnen Dias präsentieren kann, eignet es sich hervorragend zur Integration in ein Blog-Theme. Das integrierte Callback-API bietet Webentwicklern einen beachtlichen Grad an Flexibilität.fitvids.jsVersion: 1.0Anbieter: Chris Coyier und ParavelKompatibilität: HTML5-fähige Browser je nach unterstützter Videoplattform; in Frage kommen Youtube, Vimeo, Blip.tv, Viddler, KickstarterPreis: kostenlos fitvidsjs.com Fitvids.js verleiht einer Handvoll unterstützter Videoplayer die bemerkenswerte Fähigkeit, in HTML5-Websites in Abhängigkeit von der aktuellen Größe des Browserfensters die Frame-Größe des Videoclips zur Laufzeit elastisch zu skalieren. Es unterstützt derzeit YouTube, Vimeo, Blip.tv, Viddler und Kickstarter.Der Einsatz von Fitvids.js ist denkbar einfach. Um das Plug-in anzusprechen, müssen Sie die jQuery-Bibliothek in der Version 1.7 oder höher und die Bibliothek Fitvids.js aufrufen, um dann das Containerelement für das betreffende Video mittels fitVids() zu adressieren. Für die eigentliche Anpassung der Dimensionen zeichnet das CSS-Stylesheet verantwortlich.Eine ähnliche Aufgabe wie das Fitvids-Plug-in in Bezug auf Videoclips erfüllt seine Schwesterbibliothek Fittext von Paravel (fittextjs.com ) in Bezug auf die Schriftgröße. Wer noch feinere Kontrolle über das Aussehen und Verhalten einzelner Textzeichen benötigt, dem sei Lettering.js ans Herz gelegt.Response JSVersion: 0.2.9Anbieter: ryanveKompatibilität: mobile User Agents und Desktop-BrowserPreis: kostenlos responsejs.com Response JS ist ein winziges jQuery-Plug-in für den Aufbau responsiver Websites nach dem Konzept "mobile first". Das Plug-in tauscht semantisch aufgebaute Abschnitte des Markups anhand vordefinierter Unterbrechungspunkte (der so genannten Breakpoints) aus, um dem jeweiligen Gerät jeweils eine leistungsoptimierte Version der Website zu präsentieren. Es liefert Medien an den Browser progressiv unter Verwendung von data-Attributen in HTML5.Dieses objektorientiert umgesetzte Plug-in bietet Webentwicklern Hooks, mit deren Hilfe sich responsive Aktionen auslösen lassen, und boolesche Variablen zum Testen responsiver Eigenschaften.Bei einer Viewport-Breite von 320 bis 640 Pixeln und in Browsern mit deaktiviertem Javascript serviert das Plug-in eine Miniaturversion der Abbildungen (falls gewünscht sogar in Schwarzweiß); User Agents mit einer noch geringeren Breite der Viewport-Größe bekommen eine Version der Website ohne Bilder geliefert, da sie diese wahrscheinlich ohnehin nicht adäquat darstellen könnten. Leistungsfähigere Geräte erhalten automatisch die betreffenden Abbildungen in ihrer vollen Pracht.
Touch-Ereignisse und mobiles Webdesign
Touchfähige UIs sind nicht nur auf mobilen Kleingeräten wie Smartphones oder Tablets genießbar. Mit dem Erscheinen einer neuen Generation touchfähiger PCs mit Windows 8 dürften Touchfähigkeit von Websites auf breiter Front an Bedeutung gewinnen. jQuery-Erweiterungen können die Bedienbarkeit der Websites auf touchfähigen Geräten erleichtern.jQTouchVersion: 1 Beta 4rcAnbieter: Sencha LabsKompatibilität: Webkit-Browser unter iOS, Android, BlackBerry und WebOSPreis: kostenlos www.jqtouch.com jQTouch für Zepto/jQuery greift Ihnen bei der Entwicklung mobiler Websites unter die Arme. Es bringt die Fähigkeit zur Auswertung von Touchgesten auf Geräten wie dem iPhone oder iPad mit. jQTouch erkennt nicht nur Wischfingergesten, sondern unterstützt auch native Webkit-Animationen, Callback-Ereignisse und Erweiterungen.OverscrollVersion: v1.6.0Anbieter: AzoffKompatibilität: alle aktuellen Browser, vorzugsweise Safari ab Version 5, Chrome ab Version 5 und Firefox abVersion 3Preis: kostenlos www.azoffdesign.com/overscroll Das jQuery-Plug-in Overscroll simuliert das iPhone-/iPad-typische Scrollverhalten in einem ganz gewöhnlichen Browser. Scrollen gelingt mit der Maus durch Klicken und Ziehen anstelle einer Wischfingergeste.
Animation
Eine zielsichere Methode, um eine Website im Bewusstsein ihrer Besucher zu verankern, besteht im dezenten Einsatz aussagekräftiger Animationen.SpritelyVersion: 0.6.1Anbieter: Artlogic Media LimitedKompatibilität: alle gängigen Browser, einschließlich Internet Explorer ab Version 6 und mobilem Safari unter iOSPreis: kostenlos www.spritely.net Spritely erzeugt Charakteranimationen und animierte Landschaften in purem HTML und Javascript (ohne Flash). Das Plug-in geht sehr schonend mit der Bandbreite um und kann Objekte im gesamten Bereich des Browserfensters animieren, ohne die Leistung zu beeinträchtigen. Animierten Objekten kann man die Fähigkeit verleihen, auch über dem Text zu schweben.jParallaxVersion: 0.9.9 BetaPreis: kostenlos/Spende willkommen webdev.stephband.info/parallax.html
jParallax ermöglicht die Umsetzung von Parallaxenanimationen mit HTML, Javascript und CSS. Eine Parallaxenanimation simuliert eine 3D-Szene unter Verwendung von 2D-Bildern. Mit einer Parallaxenanimation angereicherte Bilder sehen oftmals extrem unterhaltsam aus. Als Ausgangsmaterial eignen sich sowohl gezeichnete Grafiken als auch (freigestellte) Elemente aus Fotos, Textzeichen und Collagen.Die jQuery-Erweiterung jParallax verwandelt ein HTML-Element in einen Container einer 3D-Szene; seine Kindelemente werden in dem Vaterelement absolut positioniert. Um den Eindruck einer bewegten 3D-Szene zu erwecken, animiert jParallax die einzelnen 2D-Ebenen der 3D-Szene in Abhängigkeit von ihrer vermeintlichen Position auf der simulierten z-Achse zueinander. Die gesamte Szene wird erst durch Mausbewegungen zum Leben erweckt und reagiert interaktiv auf Aktivitäten des Benutzers.
Fazit
Vorbei sind die Zeiten, als Webentwickler erweiterte Interaktivität mühsam in Javascript stricken mussten. Mit den richtigen Plug-ins für jQuery können Sie Ihre Webprojekte einfach und in kürzester Zeit um viele innovative und nützliche Funktionen erweitern.
