Tag: javascript

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.

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.

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.

HTMLiveCode: HTML/CSS/JS-Prototyping im Browser

Ich hatte mich vor einigen Monaten etwas stärker mit CodeMirror beschäftigt und als die Notwendigkeit entstand, mehrere HTML-Prototypen zu erstellen, entwickelte ich einen kleinen Browser-Editor auf der Basis von CodeMirror. Mittlerweile gibt es unzählige Online-IDEs wie JS Bin, jsFiddle, Ideone oder Fiddle Salad, mit denen sich die verschiedensten Komponenten direkt im Browser entwickeln lassen. Hier dürften keine Wünsche offen bleiben, denn in den neuesten Versionen einiger Editoren werden auch erweiterte Module wie HAML, SCSS, SASS, LESS oder Stylus unterstützt.
Für meine Zwecke genügte allerdings ein einfacher HTML-Editor, der nicht mit den genannten Tools konkurrieren soll. Entstanden ist schließlich HTMLiveCode — ein Werkzeug, das in erster Linie auf lokale Prototypen ausgelegt ist und nur Gebrauch von "localStorage" macht, um den aktuellen Code zwischen zu speichern. Im Gegensatz zu den meisten Online-Editoren funktioniert HTMLiveCode auch in Internet Explorer ab Version 9.

HTMLiveCode besteht nur aus einem Editor-Bereich sowie der Echtzeit-Vorschau. Eingegebener Code wird also direkt interpretiert. Um die Fehlerkonsole etwas zu schonen und JavaScript-Code bei der Eingabe zu validieren, kommt JSLint zum Einsatz. Der Editor bietet Shortcuts sowie Anpassungsmöglichkeiten. Zudem kann ein "Image proxy path" eingestellt werden, mit dem sich CSS-Background- und IMG-URLs ("src" und "background-image") mit einem virtuellen Pfad-Präfix versehen lassen (nur bei lokaler Installation). HTMLiveCode steht bei GitHub zur Verfügung, wo sich auch die Dokumentation befindet.

ThreeFab: Three.js-Szenen per WYSIWYG-Editor erstellen

Wer mit WebGL und der Three.js-Engine experimentieren möchte, kann sich diverser Tutorials bedienen. Womöglich wird es bald eine Erweiterung geben, mit der sich Three.js wie jQuery verwenden lässt.
Das Erstellen von 3D-Szenen in Three.js stellt noch eine gewisse Hürde da, denn 3D-Objekte müssen in JavaScript erzeugt und animiert werden. 3D-Anwendungen wie Blender schaffen Abhilfe, denn hierfür gibt es bereits einen WebGL-Exporter, mit dem sich Szenen als JSON-Objekt exportieren lassen. Darin können auch Animationen enthalten sein.
Eine andere Möglichkeit steht nun mit ThreeFab bereit, denn damit lassen sich Three.js-Szenen direkt im Browser erstellen.

ThreeFab versteht sich also als 3D-Editor, mit dem sich 3D-Objekte einfügen und anpassen lassen. So können Position, Größe, Farbe, Transparenz und Shading per Schieberegler eingestellt werden. Das Positionieren im dreidimensionalen Raum ist denkbar einfach, da die Objekte auf einem virtuellen Boden platziert werden. Die Szene kann dann einfach per Klick exportiert und zusammen mit der Three.js-Bibliothek eingesetzt werden.
ThreeFab befindet sich momentan noch in einer Alpha-Version und so ist das Feature für Animationen noch experimentell. Dennoch wird das Projekt in Zukunft sicherlich sehr interessant werden, wenn es darum geht, Three.js-Szenen im Browser zu erstellen.

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.

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.

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.