Tag: werkzeuge

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.

URLi.st: Online-Verwaltung für Link-Listen aktualisiert

Vor rund 2 Jahren berichtete ich über den Online-Dienst URLi.st, mit dem sich Link-Sammlungen erstellen und mit Anderen teilen lassen. Inzwischen wurde das Projekt modernisiert und befindet sich in einer geschlossenen Beta-Phase. Die Idee von Link-Listen ist durchaus sinnvoll, da in vielen Fällen mehrere Links zu einer Thematik gehören und so gruppiert werden können. Zum einfachen Hinzufügen einer Seite steht ein URLi.st-Bookmarklet bereit, mit dem sich die eigene Liste einfach per Klick erweitern lässt.

Bei der aktuellen Version des Web-Dienstes können Listen sowohl öffentlich als auch privat zugänglich gemacht werden: Zudem können bestimmte Benutzer Zugriff auf eine Liste erhalten und diese bearbeiten. Links innerhalb einer Liste lassen sich mit Farben versehen und können von anderen Benutzern bewertet oder kommentiert werden. Link-Listen von URLi.st werden als Kurz-URL in Form von "http://urli.st/iD5" erzeugt und auch die Links innerhalb einer Liste stehen dann als Kurz-URL bereit. In der Tour sind alle Neuerungen aufgelistet. Momentan befindet sich das Projekt wie gesagt in einer Beta-Phase und Registrierungen sind derzeit nur per Einladung möglich. Das dürfte sich in absehbarer Zeit ändern.

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.

Rickshaw: Diagramme mit Zeitleisten erstellen

Um mit JavaScript interaktive Graphen aller Art zu erzeugen, bieten sich Frameworks wie Highcharts oder Flot an. Die Möglichkeiten solcher Bibliotheken sind teilweise sehr umfangreich und lassen keine Wünsche offen. Wer nach einer weiteren Lösung für interaktive Diagramme mit Zeitstrahlen sucht, könnte sich Rickshaw von Shutterstock ansehen. Die Bibliothek basiert auf dem Graphen-Framework D3.js und bietet ebenfalls viele Möglichkeiten.

Wie auch bei anderen Lösungen müssen die Diagrammdaten als Array mit Objekten übergeben werden. Rickshaw bietet neben verschiedenen Darstellungen wie Säulen-, Punkt-, Linien- oder Streudiagrammen auch Legenden, einen Timeslider und Annotationen. Wer sich mit dem Framework beschäftigen möchte, kann sich ein fertiges Tutorial ansehen, das die Einbindung von Graphen erläutert.

Hype: HTML5-Animationswerkzeug von Tumult

Sie heißen Adobe Edge, Sencha Animator oder Radi: Neuartige Anwendungen, mit denen sich HTML5- und CSS3-Animationen über eine grafische Oberfläche erzeugen lassen. Edge bietet zudem die Möglichkeit, Elemente mit JavaScript-Ereignissen zu versehen.
Natürlich werden zukünftig auch von anderen Herstellern derartige Tools erscheinen und Hype von Tumult macht hier den Anfang.

Die Software steht Adobe Edge grundsätzlich in nichts nach: Unterschiedliche Elemente wie Rechtecke, Bilder, Texte oder Videos können auf eine Bühne gezogen und anschließend per Timeline und Keyframes animiert werden. Ein zusätzliches Feature stellen die Reflektionen dar, die einfach per Auswahlfeld auf ein Objekt angewendet und eingestellt werden können. Es können verschiedene Szenen angelegt werden und auch in Hype lassen sich Elemente mit Ereignissen versehen, die in einem separaten Editor-Fenster bearbeitet werden können. Hype kostet 49,99 USD und der einzige Nachteil an der Software besteht darin, dass sie nur für Mac OS X erhältlich ist.

FlashJS: HTML5-Games mit ActionScript-API schreiben

Mit HTML5-Game-Engines wie Impact oder LimeJS stehen Entwicklern von Browser-Games solide Grundgerüste zur Verfügung, die unterschiedliche APIs bieten. Da Flash für viele Spieleentwickler immer noch die primäre Plattform darstellt und dennoch HTML5-Games weiter im Vormarsch sind, könnte eine JavaScript-Bibliothek wie FlashJS interessant sein. Das Framework bietet bekannte ActionScript-Objekte wie MovieClip, DisplayObject, Stage, Loader, KeyboardEvent oder Tween.

Elemente auf einer Bühne können mit Methoden wie "addChild()", "removeChild()", "getChildByName()" oder "getChild()" verwaltet werden. Animationen müssen nach wie vor per Code erzeugt werden. Grafische Werkzeuge wie Edge oder der Sencha Animator bieten sich natürlich an.
Ein Beispiel, das auf FlashJS basiert, stellt das Mini-Game "Smarty the deer" dar, bei dem auch ein CollisionManager zum Einsatz kommt.

Webdesign: Retina-Grafiken für iPad/iPhone ausliefern

Mit der Einführung des "Retina Displays" steht bei neueren iPhone- und iPad-Modellen die vierfache Menge an Pixeln zur Verfügung. Das iPad 3 kommt so beispielsweise mit einer Bildschirmauflösung von 2048×1536 Pixeln und bietet eine entsprechend höhere Bildqualität, die sich in erster Linie bei HD-Videos bemerkbar macht.
Auch im Web kann das eine Umstellung bedeuten, denn Grafiken können jetzt mit der doppelten Größe ausgeliefert werden, so dass mehr Details geboten werden können. Bei der Entwicklung von nativen iOS-Apps können Retina-Grafiken einfach durch den Dateinamen kenntlich gemacht werden und so muss lediglich der Suffix "@2x" angehängt werden. Wer diese Lösung auch auf Websites einsetzen möchte, kann sich Retina.js ansehen: Die JavaScript-Lösung überprüft, ob eine Retina-Version einer Grafik existiert und tauscht diese entsprechend aus.

Eine weitere Lösung, bei der noch PHP zum Einsatz kommt, wäre Retina Images. Hier besteht der Vorteil darin, dass nur eine Grafik an den Benutzer ausgeliefert wird und zudem Fallbacks bestehen, wenn JavaScript oder Cookies deaktiviert sind. Das PHP-Skript wertet die vorliegende Information über die Bildschirmauflösung aus und liefert die bestmögliche Größe aus. Zu beachten ist, dass img-Grafiken die Attribute "width" und "height" und CSS-Background-Images das Attribut "background-size" besitzen müssen. Downloads und Informationen finden sich wieder bei GitHub.

Canvas Animation Playground: Animationen im Browser

Ich hatte mit HTMLiveCode einen Browser-Editor entwickelt, der auf das Erstellen von HTML/CSS/JS-Prototypen ausgelegt ist. Auf der Basis von HTMLiveCode entstand schließlich der Canvas Animation Playground: Ein experimentelles Tool, das dem "Creative Coding" zugeschrieben ist und es ermöglicht, Canvas-Animationen direkt im Browser zu erzeugen. Genau wie HTMLiveCode besteht auch der Canvas-Spielplatz aus einem Editor-Bereich und einer Echtzeit-Vorschau, die ein <canvas>-Element darstellt. Der Editor übernimmt die grundlegenden Schritte und so wird die Funktion "CanvasAnimationLoop()" per "requestAnimationFrame" abgespielt. Eigener Code kann also direkt hier eingefügt und ausgeführt werden. Fertige Animationen können zudem als Vollbild-Animation exportiert werden.

Inspiriert wurde meine Arbeit an dem Editor von bestehenden WebGL-Spielplätzen wie der GLSL Sandbox, dem Shader Toy oder dem WebGL Playground. Natürlich bieten die genannten Tools weitaus komplexere Möglichkeiten, da hardwarebeschleunigte Animationen möglich sind. Für experimentierfreudige JavaScript-Entwickler, die erste Erfahrungen mit Canvas-Animationen sammeln wollen, könnte der Canvas Animation Playground dennoch eine Hilfestellung sein.
Wer ohnehin auf der Suche nach guten Ressourcen aus diesem Bereich ist, sollte bei CreativeJS vorbeischauen. Hier finden sich aktuelle Beiträge und Tutorials rund um kreatives Programmieren.