Tag: entwicklung

Adobe: Entwurf für CSS3-Shader eingereicht

Wer sich in WebGL oder generell in die 3D-Grafikprogrammierung einarbeiten will, kommt an Shadern nicht vorbei. Bei Shadern handelt es sich wie gesagt um kleine Programme, die von der Grafikkarte interpretiert werden und die Informationen einer 3D-Szene beeinflussen können. Durch Vertex-Shader können die Eckpunkte (Vertices) und durch Fragment-Shader (auch Pixel-Shader genannt) die Pixelwerte verändert werden. Für Transformationen der Oberfläche kommt also der Vertex-Prozessor zum Einsatz, während für Farbveränderungen auf Pixel-Ebene der Fragment-Prozessor angesprochen wird.
Shader werden in der C-ähnlichen Programmiersprache GLSL geschrieben und machen Gebrauch von der Hardwarebeschleunigung der Grafikkarte. OpenGL-Treiber müssen daher installiert sein.
Bei Adobe werden gerade wieder abgefahrene Ideen entwickelt und eine davon ist die Idee von CSS-Shadern: Damit sollen Shader also auch für DOM-Elemente mittels CSS möglich gemacht werden.

SVG-Filter sollen laut Adobe bald auch in HTML/CSS verfügbar (CSS-Attribut "filter") sein und CSS-Shader werden dann über eine Erweiterung der "Filter Effects" möglich sein. So können DOM-Elemente in ein Vertex-Mesh (also mehrere Polygone mit Eckpunkten) konvertiert und anschließend durch einen Vertex-Shader transfomiert werden. Bei der darauf folgenden Rasterung können die Pixel durch einen Fragment-Shader verändert werden, was Effekte wie "Gaußscher Weichzeichner" ermöglicht.
Adobe hat den Entwurf für CSS-Shader bei der W3C CSS-SVG Effects Task Force eingereicht und so könnten die Shader schon bald experimentell in WebKit eingesetzt werden.

HTML5: Aktuelle Demos und Notizen von Mozilla

Christian Heilmann, Principal Technical Evangelist bei Mozilla, hat die Slides zu einer kürzlichen HTML5-Präsentation auf der "Mozilla Vision 2012" in Tokio veröffentlicht. Diese variieren etwas von seinen vorherigen Präsentationen und zeigen die aktuellen Entwicklungen von Mozilla bezüglich HTML5 und CSS3 auf. Dazu werden wieder verschiedene Beispiele aufgeführt wie etwa der morphende CSS3-Würfel. Die 3D-Transitions funktionieren in Firefox erst ab Version 10, die sich momentan im Aurora-Status befindet.

Weiterhin wird der 3D CSS Tester aufgeführt, mit dem sich per GUI bequem CSS3-Attribute wie "perspective", "rotateZ" oder "keyframes" ausprobieren lassen. Auch die Firefox-Erweiterung Tilt wird erwähnt, mit der sich seit geraumer Zeit auf WebGL-Basis Websites dreidimensional betrachten lassen. Dabei wird die DOM-Struktur in verschiedenen Ebenen dargestellt, je nachdem, wie komplex die Verschachtelung der Seite ist.
Insgesamt finden sich in der Präsentation einige interessante Links zu aktuellen Beispielen, die den Einsatz von HTML5 und CSS3 demonstrieren.

Scrollorama: jQuery-Plugin für animierte Scroll-Effekte

Wem die Idee hinter der Promo-Website für die iPhone-Anwendung "Ben the bodyguard" gefallen hat, dem wird wahrscheinlich auch das jQuery-Plugin Scrollorama zusagen. Mit dem Skript können DOM-Elemente anhand der aktuellen Scroll-Position des Webbrowsers animiert werden. Sobald also eine bestimmte Position erreicht wird, können beliebige Effekte in einem definierten Zeitraum ausgeführt werden. Dabei werden die Animationen jedoch erst durch das Bewegen der Scroll-Leiste abgespielt.

Das Plugin ist einfach in der Handhabung: Für jedes zu animierende Element muss ein CSS-Selektor (vorzugsweise eine Klasse) erstellt werden, der dann an das Plugin übergeben wird:

• $(document).ready(function() {
• var scrollorama = $.scrollorama({
• blocks: ".scrollblock"
• });
• });

Anschließend können die Blöcke mit gewünschten Effekten belegt werden:

• scrollorama.animate("#block-1", {
• duration: 400, property: "opacity"
• })

Da auch die Website des Plugins von den Scroll-Effekten Gebrauch macht, wird hier schon gut ersichtlich, was sich mit dem Skript anstellen lässt.

KineticJS: HTML5/JS-Library für Canvas-Interaktivität

Spezielle Bibliotheken für HTML5-Canvas-Anwendungen gibt es mittlerweile in Mengen. Aktuelle Beispiele sind Paper.js oder RPG.js, die jeweils sehr unterschiedliche Ziele verfolgen. Auf die Erstellung von interaktiven Canvas-Anwendungen wurde hingegen das Framework KineticJS ausgelegt, das unter Anderem mit Event-Listenern für Canvas-Objekte aufwertet, die dadurch transformiert werden können. KineticJS kommt mit einem durchdachten Ebenen-System, das aus einer Buffer-, einer Hintergrund- und einer Benutzer-Ebene besteht und sich schließlich zum finalen Resultat zusammenfügt.

Die Bibliothek bietet etliche Funktionen, erfordert aber dennoch Kenntnisse über die Canvas-Technik, da durch die API lediglich Interaktionen vereinfacht werden. KineticJS enthält zudem auch Funktionen für mobile Geräte, so dass auch Touch-Ereignisse eingesetzt werden können.
Wer sich Beispiele des Frameworks ansehen möchte, erhält auf dieser Seite einen guten Eindruck. Übrigens lassen sich HTML5-Animationen inzwischen auch in der Cloud erstellen: Die Plattform Mugeda wäre ein solcher Dienst, der sich aktuell noch in einer Preview-Phase befindet.

jsMorph: Schnelles Micro-Framework für Animationen

In der Welt der JavaScript-Bibliotheken entstehen immer mehr Micro-Frameworks, die auf einen bestimmten Zweck optimiert wurden. Gerade im Bereich der Animationen blühen interessante Skripte wie jsAnim oder $fx auf. Derartige Bibliotheken bieten in der Regel keine eigene Selector-Engine oder ein Event-System. Doch darin kann der Vorteil liegen, wenn lediglich die Animationen benötigt werden und auf Geschwindigkeit sowie Dateigröße geachtet werden muss (besonders bei mobilen Webanwendungen).
Mit jsMorph gibt es eine weitere Bibliothek dieser Gattung und hier hat der Entwickler Wert darauf gelegt, eine möglichst gute Performance mit gleichbleibender Geschwindigkeit der Animationen zu gewährleisten.

Das jsMorph-Framework bietet verschiedene Features wie Chaining, ein Queueing-System, Zeitkorrektur und animierbare Eigenschaften wie Farbe oder Transparenz. Die Zeit sowie die Framerate (FPS) werden automatisch angepasst, so dass eine gleiche Darstellung auf untereschiedlichen Browsern und Geräten bestehen bleibt. Zudem bietet jsMorph eine automatische Konvertierung von Einheiten (Px, Em, %, etc.), wodurch eine hohe Flexibilität gegeben ist.
In den Tutorials finden sich etliche Anleitungen und die Demos sprechen für sich. Derzeit befindet sich die Bibliothek noch in einer Alpha-Version.

Impress.js: Effektvolle Zoom-Präsentationen mit CSS3

Das Flash-Präsentationstool Prezi erfreut sich schon einiger Zeit großer Beliebtheit, da sich relativ einfach räumliche Präsentationen erstellen lassen: Einzelne Slides werden in einem dreidimensionalen Raum platziert und durch Navigieren entsprechend vergrößert oder verkleinert. Diesem Vorbild folgt der Entwickler Bartek Szopka, der mit seinem JavaScript-Framework Impress.js ein ähnliches Werkzeug geschaffen hat. Der Unterschied liegt in der Technologie, da Impress-Präsentation mit JavaScript und CSS3 auskommen.

Ähnlich wie in Prezi-Präsentationen werden auch hier die Slides räumlich angeordnet und durch einen Zoom-Effekt animiert. Zum Einsatz kommen unter Anderem die CSS3-Attribute "rotate" und "perspective", die beispielsweise auf dieser WebKit-Seite gut demonstriert werden. Leider liegt auch hier noch das Problem: Durch die Verwendung von "perspective" funktionieren die Präsentationen derzeit nur in WebKit-Browsern wie Safari oder Chrome. In Firefox werden solche Transformationen erst ab Version 10 möglich sein.
Wer sich das Framework dennoch ansehen und damit experimentieren möchte, kann den Quelltext bei GitHub herunterladen.

HTML5 Cheatsheet: Tags, Event Handler und Support

Dokumentation, Referenzen oder kurze Beispiele können das Leben eines Entwicklers wesentlich erleichtern. Oft werden nur kompakte Informationen zu einer Thematik benötigt — hier haben sich Kurz-Referenzen in Form von Cheatsheets bewährt. Bei Devcheatsheet oder Cheat-Sheets.org finden sich gleich ganze Sammlungen an Cheatsheets zu verschiedenen Sprachen.
Auch für HTML5 gibt es mittlerweile nennenswerte Referenzen: Neben dem Canvas-Cheatsheet lohnt sich auch ein Blick in die HTML-Cheatsheets von InMotion Hosting, die sowohl Tags und Event Handler als auch den Browser-Support abdecken.

Bei den Übersichten handelt es sich um hochauflösende PNG-Grafiken mit einer Größe von 2.740 × 1.880 Pixeln. Das erste Cheatsheet zeigt einen Überblick von neuen, bestehenden und obsoleten HTML-Tags, die alphabetisch sortiert sind. In der zweiten Grafik finden sich die neuen Event Handler, die als DOM-Attribute oder per JavaScript-Event-Listener eingesetzt werden können. Dazu zählen beispielsweise Drag 'n' Drop-Events, Medien-Aktionen oder Formular-Ereignisse.
Im letzten Cheatsheet werden schließlich die Webbrowser und deren HTML5-Unterstützung aufgezeigt, so dass die 3 Referenzen eine nützliche Kurz-Dokumentation für HTML5-Entwickler darstellen.

Spine Mobile: MVC-Framework für mobile Web-Apps

Mit Spine steht ein kompaktes JavaScript-MVC-Framework für Entwickler zur Verfügung, die nicht den vollen Umfang von Backbone.js benötigen. Wer sich mit MVC in JavaScript noch etwas schwer tut, sollte einen Blick auf Agility.js werfen, da hier das MVC-Entwurfsmuster sehr einfach angewendet und ausprobiert werden kann.
Die Entwickler von Spine.js haben ihr Framework nun auch auf mobile Webanwendungen optimiert und Spine Mobile vorgestellt.

Die Bibliothek setzt auf HTML5, CSS3, Node.js, jQuery, GFX und wahlweise auf CoffeeScript. Mit der "Spine.app" wird ein Grundgerüst erzeugt, auf dem eine Anwendung aufgesetzt werden kann. Die MVC-Architektur eignet sich natürlich nur für Anwendungen, die Benutzereingaben annehmen, verarbeiten und ausgeben. Für mobile WebApps, die auf Smartphones ausgelegt werden müssen, dürfte die mobile Version von Spine also ein interessante Wahl sein.
Auch eine Unterstützung für PhoneGap ist vorhanden, wobei sich dieses Feature noch in einer frühen Phase befindet. Das PhoneGap-Framework gehört inzwischen zu Adobe und hat sich als kostenloses Framework für native Smartphone-Anwendungen bewährt.