Tag: tipps

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.

Code School: Die Anatomie von Backbone.js

Wer sich in eine Programmiersprache einarbeiten will oder die Materie zu einer komplexen Thematik vertiefen möchte, findet auch im Netz gute Anlaufstellen. Seiten wie Codecademy oder Code School bieten hier gute Quellen, die auch interaktiv genutzt werden können. So kann das Erlernte direkt auf der Seite ausprobiert und angewendet werden. Kürzlich erschien bei Code School auch eine Anleitung für Backbone.js, die Entwicklern das JavaScript-MVC-Framework näherbringen soll.

Die Anleitung, die aus Videos und interaktiven Bereichen besteht, gliedert sich in 7 Teile, in denen die Grundzüge von MVC, Templating, Events, Collections und Routing beleuchtet werden. Der komplette Kurs kostet 55 USD — hinter den Anleitungen von Code School steckt immerhin ein hoher Aufwand und die Qualität kann sich sehen lassen. Wer sich erst einmal selbst überzeugen will, kann das erste Level des Backbone-Tutorials auch ohne Anmeldung ausprobieren. Das Prinzip der "Levels" bei Code School zeigt den persönlichen Fortschritt der Anwender und hilft, das eigene Wissen in einem Bereich besser einzuschätzen.

Remote-Tilt: Bewegungssensor im Browser simulieren

Wer sich im Browser mit der Entwicklung von Anwendungen beschäftigt, die auf den Beschleunigungsmesser (Accelerometer) des Smart-Phones zugreifen, wird womöglich Schwierigkeiten haben, die Anwendung zu testen: Bei der Verwendung eines echten Geräts fehlen wichtige Entwicklerwerkzeuge des Browsers und ein Debugging geht eher schleppend voran. Eine logische Brücke zwischen Smart-Phone und Browser, welche die Bewegungsdaten überträgt (also als Proxy agiert), könnte mit JavaScript realisiert werden.
Kein Geringerer als Remy Sharp hat genau dieses Bindeglied entwickelt und es unter dem Namen Remote-Tilt veröffentlicht.

Bei Remote-Tilt handelt es sich also um eine JavaScript-Datei, die nur auf der Seite eingebunden werden muss, die getestet werden soll. Anschließend kann über ein Popup-Fenster ein Simulator gestartet werden, der sich dreidimensional rotieren lässt. Alternativ kann auch ein echtes Endgerät verwendet werden, das eine URL mit einem bestimmten Key aufrufen muss und dadurch die Daten des Beschleunigungsmessers und Gyro-Sensors an den Browser übermittelt. Auf der Seite von Remote-Tilt finden sich verschiedene Anwendungsbeispiele, die demonstrieren, wie das Skript in Aktion aussehen kann.

CSS3D Clouds: Studie über animierte Wolken mit CSS

Die Erzeugung von volumetrischen Wolken zählt hauptsächlich zum Bereich der Spieleentwicklung. Dort gibt es verschiedene Möglichkeiten, um realistisch wirkende Wolken darzustellen. Im Webbrowser hat Mr.doob bereits ein Beispiel auf WebGL-Basis entwickelt, das schon in ROME eingesetzt wurde. Ganz ohne WebGL und nur durch den Einsatz von CSS3D-Transformationen kommt dieses Experiment von Jaume Sánchez aus.

Im Endeffekt ähnelt das Beispiel der WebGL-Umsetzung von Mr.doob: Es werden einfach zweidimensionale Flächen (Sprites) mit Texturen belegt und durch Verzerrungen im Raum angeordnet. Durch die geschickte Kombination von verschiedenen Texturen entstehen derartige Wolken-Bilder. Das CSS-Beispiel erlaubt zudem, Explosionen und Rauch hinzuzufügen. Der Effekt ist sehr anschaulich und demonstriert, was sich mit relativ wenig Aufwand darstellen lässt.

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.

Test-Driven Development: Tests mit jQuery und QUnit

Ich hatte vor einiger Zeit einen Artikel über testgetriebene Entwicklung mit jQuery gefunden, der Einsteigern ein einfaches Beispiel an die Hand geben soll. Wer sich mit der Thematik "Test-Driven Development" in JavaScript auseinandersetzt, könnte den Beitrag von Attachments.me interessant finden. Dort beschreiben die Entwickler des Webdienstes ein einfaches Szenario, in dem sie mit jQuery und dem Test-Framework QUnit zwei einfache Tests entwickeln.

Bei der testgetriebenen Entwicklung wird Produktionscode anhand von zuvor durchgeführten Tests geschrieben: Das bedeutet, dass die Tests am Anfang stehen und zu Beginn fehlschlagen. Durch das Schreiben des entsprechenden Produktionscodes werden die Tests erfolgreich validiert und weitere Tests können durchgeführt werden. Nachdem ein Modul (Unit) durch ausreichende Testdurchläufe validiert wurde, kann es in das Gesamtsystem integriert werden.
In dem Artikel von Attachments.me werden die Grundzüge des Paradigmas beleuchtet und einfache Ajax-Tests durchgeführt. Die Code-Snippets finden sich auch bei GitHub. Ein nützliches Tool zum Erstellen von Stubs und Mocks stellt übrigens Sinon.JS, das auch mit QUnit eingesetzt werden kann.

Cannon.js: JavaScript-Physik-Engine für WebGL-Szenen

Wer mit WebGL und 3D-Szenen im Browser experimentiert, wird unter Umständen das Bedürfnis nach einer Physik-Engine hegen: Mit einer solchen Bibliothek lassen sich physikalisch korrekte Kollisionen von Objekten simulieren. Für Simulationen im zweidimensionalen Bereich hat sich Box2D bestens bewährt. Nun werden auch dreidimensionale Kollisionen interessant und aus diesem Grund hat sich der Entwickler Stefan Hedman aus Schweden eine eigene JavaScript-Physik-Engine gebaut. Sie heißt Cannon.js und kann zum Beispiel auf dieser Seite getestet werden.

Das Beispiel setzt auf Three.js, wobei die Cannon-Bibliothek auch unabhängig genutzt werden kann. Eine Schwierigkeit bei der Erstellung einer Physik-Engine liegt in der Optimierung der Berechnungen (Number Crunching), die der Entwickler durch den Einsatz von typisierten Arrays (Float32Array) erreicht hat. Momentan lassen sich nur Sphären und Flächen (Planes) animieren, doch die Arbeit an der Engine wird stetig fortgesetzt.
Eine alternative Physik-Bibliothek wäre Ammo.js, die allerdings mit einer Größe von über 1 MB noch etwas sperrig ausfällt.