Tag: html-css

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.

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.

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.

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.