Hier gibt es Artikel und Gedanken rund um Webdesign, Grafikdesign, Webentwicklung, Photoshop, Flash, TYPO3, CSS, jQuery, JavaScript, Inspirationen, Windows,
Content-Management-Systeme, 3D-Visualisierung
und vieles mehr.

Webdesign: Farbspiele, Typografie und mehr

Mit Farben lässt sich nicht nur in Bildbearbeitungsprogrammen spielen: Zur kommenden Seite Method of Action wurde das Spiel Color entwickelt, in dem es darum geht, möglichst schnell Farben und Farbpaare anhand eines Farbkreises zuzuordnen. Was zu Beginn relativ einfach durch die Werte "Hue" und "Saturation" zu bewerkstelligen ist, wird später schon etwas schwieriger, wenn analoge oder ternäre Farbschemata erkannt werden müssen.
Das Spiel ist sehr gelungen und hilft in jedem Fall dabei, Farben und deren Anordnungen besser zu verstehen. Zudem stehen noch zwei weitere Spiele bereit, mit denen sich typografische Details studieren lassen: Bei Shape Type und Kern Type können sowohl die Pfade einzelner Buchstaben als auch deren Laufweite in ganzen Wörtern analysiert und abgeschätzt werden.

Bei der Seite "Method of Action", die sich derzeit in einer Preview-Phase befindet, wird es unter Anderem darum gehen, ein besseres Verständnis für Design zu vermitteln. In "Missionen" können Benutzer bestimmte Design-Tasks erledigen und von erfahrenen Benutzern bewerten lassen. Nach und nach werden dann komplexere Missionen freigeschaltet und mit jeder erfolgreich abgeschlossenen Mission steigt auch die virtuelle "Erfahrung", die dann auch dazu genutzt werden kann, über eingereichte Design-Tasks von anderen Benutzern zu entscheiden. Man darf also gespannt sein.

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.

Adobe Edge: Preview 4 mit Symbolen und Web-Fonts

Adobe arbeitet kräftig an seinem neuartigen Animationswerkzeug für HTML5- und CSS3-Animationen. Kurz vor Weihnachten wurde ein Trailer veröffentlicht, in dem die neuen Features der vierten Preview-Version gezeigt wurden. Nun wurde das Preview 4 von Edge veröffentlicht und steht zum Download bereit. Auf der Features-Seite können die Neuerungen eingesehen werden. Unter der Haube wurden etliche Verbesserungen hinsichtlich Performance und Stabilität eingearbeitet und auch im Interface gibt es interessante Erweiterungen.

So wurden "Symbole" eingeführt, wie man sie aus Flash Professional kennt: Objekte auf der Bühne können also in einem Container verpackt und ineinander verschachtelt werden. Dadurch wird das Erstellen von komplexeren Animationen wesentlich vereinfacht und die Übersicht auf der Bühne wird verbessert.
Weiterhin können nun Web-Fonts eingebettet werden — da Typekit inzwischen zu Adobe gehört, ist eine Einbindung von Typekit-Fonts entsprechend einfach. Unterstützt werden hier neben den bezahlten "Token"-Services auch Offline-Font-Packages (wie FontSquirrel) oder verlinkbare Font-Services wie Google Web Fonts.
Auch die restlichen Neuerungen können sich sehen lassen, so dass Edge immer mehr zu einem wichtigen Werkzeug für moderne HTML/CSS-Animationen wird.