Tag: jquery

Presenteer.js: Kompakte HTML5-Präsentationen

Frameworks und Tools für HTML/CSS-Präsentation gibt es mittlerweile in Hülle und Fülle. Vertreter wie Reveal.js, Impress.js oder Deck.js bieten auch gleich eine Palette an Effekten für die Übergänge von Folien an. Wer es etwas kompakter mag, kann sich das Tool Presenteer.js: ansehen, mit dem sich schon mit einer Zeile Code fertige Präsentation erzeugen lassen.

Die Präsentationen basieren auf jQuery und eine fertige Implementierung kann etwa so aussehen:

• <div class="presentationcontainer" id="presentationcontainer1">
• <div class="presentationcanvas" id="presentation1">
• <div>First slide.</div>
• <div>Second slide.</div>
• <div>Third slide.</div>
• <div>Fourth slide.</div>
• </div>
• </div>
•  
• var presentation = new Presenteer(
• "#presentation1",
• $("#presentationq > div"),
• { followElementTransforms: false }
• );

Presenteer bietet die Möglichkeit, Slides auch mit Transformationen zu belegen. Auf der Seite des Skripts finden sich Beispiele, bei denen etwa Rotationen als Übergänge eingesetzt werden. Zudem können Presenteer-Präsentationen auch in den Vollbild-Modus geschaltet werden und Events für Folien-Interaktionen gibt es ausreichend. Weitere Details finden sich auf der Website des Projekts.

SelectBoxIt: Auswahlfelder durch jQuery UI darstellen

Das Umgestalten von HTML-Eingabefeldern mittels CSS stellt in der Regel kein Problem dar. Allerdings lässt sich auf die Verhaltensweise und die damit verbundenen Effekte nur per CSS3/JavaScript Einfluss nehmen. Wer in einem Projekt ohnehin schon jQuery UI einsetzt, könnte an dem Plugin SelectBoxIt interessiert sein, mit dem sich Auswahlfelder (Selectboxes) modifizieren und auch per ThemeRoller gestalten lassen.

Durch das Plugin können zudem eigene Icons eingesetzt werden und auch eine Suche per Tastatur ist möglich. SelectBoxIt basiert auf der jQuery UI Widget Factory, einem Muster, mit dem sich jQuery UI-Widgets entwickeln und erweitern lassen. Der Entwickler Greg Franko hat zudem den kommentierten Quellcode zu Lernzwecken bereitgestellt. Downloads gibt es wie üblich bei GitHub.

Timeline: Moderne Zeitachsen auf Websites einbinden

Interaktive Zeitachsen können in bestimmten Projekten ein wichtiges Element darstellen. Die Erstellung solcher Timelines kann komplex werden und es empfiehlt sich, ein fertiges Framework bzw. Plugin zu verwenden. Mit Timelinr oder Timeglider stehen bereits nützliche Vertreter dieser Art zur Verfügung.
Eine weitere Alternative stellt die jQuery-Lösung Timeline dar, die Daten im JSON- oder auch im Google Docs-Format verarbeiten kann.

Das Skript kann nicht nur dazu eingesetzt werden, individuelle JSON-Daten einzulesen, sondern kann auch für das Parsen von Google Maps-, Vimeo-, YouTube-, Flickr- oder Twitter-Daten verwendet werden. Das Timeline-Plugin erzeugt einen Container, der die eigentlichen Inhalte im oberen Bereich und eine interaktive Zeitachse im unteren Bereich darstellt. Die Zeitachse kann vergrößert und manuell verschoben werden. Die Ereignisse werden automatisch angeordnet, um eine gute Lesbarkeit zu gewährleisten. Auf der GitHub-Seite des Plugins gibt es wie immer weitere Details.

jQuery Scroll Path: Navigation entlang eines Pfades

Mit Skripten wie Scrollorama oder Waypoints lassen sich besondere Effekte erzielen, die durch das Scrollen einer Seite erzeugt werden. Ein weiterer Ansatz könnte darin bestehen, Elemente entlang eines definierten Pfades zu bewegen. Das jQuery-Plugin Scroll Path ermöglicht eine solche Pfad-Animation und kommt mit einer eigenen Scrollbar.

Auf der Demo-Seite des Plugins ist gut zu sehen, wofür sich das Skript einsetzen lässt. Optional kann der gezeichnete Pfad eingeblendet werden: DOM-Elemente werden an diesem Pfad ausgerichtet und können direkt angewählt werden. Zudem können der Pfad und seine Elemente rotiert werden, sofern der Browser des Benutzers die CSS3-Attribute dafür unterstützt. Für das Zeichnen der Pfad-Elemente kommt Canvas zum Einsatz. Bei GitHub finden sich weitere Informationen und kurze Beispiele.

Kartograph: Framework für interaktive Vektor-Karten

Kartendienste wie Google Maps oder Bing Maps bieten umfangreiche Möglichkeiten, um interaktive Kartenelemente auf einer Website zu integrieren. Der Umfang der Dienste wird stetig erweitert und so bieten die APIs inzwischen auch Möglichkeiten für Routing. Wenn die Darstellung der Karte jedoch angepasst werden soll, wird es schwierig. Dienste wie CloudMade, die auf OpenStreetMap basieren, können hier weiterhelfen.
Manchmal sind jedoch individuelle Lösungen gefragt, bei denen nur ein bestimmter Teil eines Landes oder einer Stadt abgebildet werden muss. Für diesen Fall könnte eine Bibliothek wie Kartograph nützlich sein.

Auf der Basis von jQuery und Raphaël können hiermit SVG-Karten im Browser dargestellt und mit Interaktionen versehen werden. Bei GitHub findet sich die Dokumentation. Kartograph lässt sich auch für perspektivische Kartendarstellungen einsetzen. Das Framework befindet sich noch in einer frühen Phase, aber erste Demos können schon jetzt auf der Website des Skripts angesehen werden.

PageSlide: Zusatzinformationen am Rand einblenden

Manchmal kann es sinnvoll sein, weiterführende Informationen auf einer Website auszublenden und diese durch den Benutzer anzeigen zu lassen. Für dieses Szenario bieten sich diverse Lösungen wie Tabs, Accordions, Lightboxes oder andere modale HTML-Bereiche an, die wieder ausgeblendet werden können. Meerkat stellt beispielsweise eine elegante Möglichkeit dar, um Informationen im Fußbereich einzublenden. Wer diesen Effekt auf die Seite übertragen will und die komplette Website dabei verschieben möchte, sollte einen Blick auf das jQuery-Plugin PageSlide werfen.

Der Entwickler Scott Robbin bietet sein Plugin mit unterschiedlichen Optionen an: So können die Zusatzinformationen am Rand als modaler Bereich geöffnet werden, so dass diese durch eine Schaltfläche wieder versteckt werden können. Auch im "responsive Design" lässt sich das Plugin einsetzen, wie diese Demo veranschaulicht. PageSlide gibt es wieder bei GitHub mit weiterführenden Infos.

Stitches: Sprites für CSS mit HTML5 generieren

Um Sprites für den Einsatz in CSS vorzubereiten, bieten sich verschiedene Tools wie der Spritebaker oder Sprite Cow an. Allerdings fehlt in dieser Sammlung noch ein Werkzeug, mit dem sich aus einer Menge an einzelnen Grafiken ein großes Spritesheet sowie der dazugehörige CSS-Code erzeugen lässt. Dieses Bindeglied könnte Stitches sein, ein interaktiver Spritesheet-Generator, der auf HTML5 und jQuery basiert.

Die Funktionsweise ist denkbar einfach: Existierende Grafiken müssen einfach in das Browserfenster gezogen werden und anschließend kann daraus per Klick ein Spritesheet erzeugt werden. Hierbei kommt Canvas und die Base64-Enkodierung zum Einsatz. Das Spritesheet kann dann separat als Grafik abgespeichert oder wahlweise auch direkt als Data-URI eingebunden werden. Der Sprite-Generator funktioniert in aktuellen Versionen von WebKit und Gecko. Für Internet Explorer wurden verschiedene Shims (Dropfile, Flashcanvas) integriert, um die Funktionsweise zu gewährleisten — allerdings werden hierfür Flash und Silverlight vorausgesetzt. Mehr Details finden sich wieder bei GitHub.

TypeSequence: Auf Tastatureingaben reagieren

Mit JavaScript lassen sich nicht nur DOM- oder Maus-Ereignisse, sondern auch Tastatureingaben abfangen und steuern. Für bestimmte Projekte kann es erforderlich sein, dass eine Aktion ausgelöst wird, sobald ein bestimmtes Schlüsselwort oder eine Abfolge von Zeichen über die Tastatur eingegeben wurde. Eine einfache Möglichkeit, um mit einer Callback-Funktion auf derartige Ereignisse zu reagieren, bietet das jQuery-Plugin TypeSequence (das Skript kann auch separat ohne Framework verwendet werden).

TypeSequence benötigt die gewünschte Zeichenabfolge in Form eines Arrays und führt beim Eintreten des Ereignisses eine Funktion aus. Alternativ kann noch eine Option aktiviert werden, die festlegt, ob die Zeichenabfolge mit der Eingabetaste (Enter) bestätigt werden muss. Zudem lässt sich festlegen, ob die entsprechende Eingabe auf der Tastatur nur einmalig abgefangen werden soll, oder ob auch mehrmals auf eine Zeichenkette reagiert werden soll.