MatthiasSchuetz.com

Validatious: Formular-Validierung mit JavaScript

Matthias Schütz — Mon, 09 Nov 2009 06:38:31 GMT

Eine Echtzeit-Validierung für HTML-Formulare lässt sich mit JavaScript sehr gut realisieren und verbessert die Benutzerfreundlichkeit einer Website — mit Validatious steht eine fertige Lösung bereit, die kein Framework benötigt und sehr leicht implementiert werden kann. Das kleine Script funktioniert in allen modernen Webbrowsern sowie in Internet Explorer 6. Die Überprüfung der Benutzer-Eingaben erfolgt, sobald ein Input-Feld verlassen wurde (blur). Visualisiert werden die Auswertungen der Pflichtfelder durch kleine Symbole und farbliche Markierungen.

Die individuelle Validatious-Bibliothek kann per Konfigurator mit den gewünschten Validatoren ausgestattet werden. Das Script muss dann lediglich per script-Tag in die HTML-Datei eingebettet werden. Pflichtfelder müssen dann nur noch mit der "required"-Klasse versehen werden:

Eigene Fehlermeldung:

Alles Weitere findet sich in der Dokumentation von Validatious.

Émile: JavaScript-Framework für CSS-Animationen

Matthias Schütz — Sat, 07 Nov 2009 23:35:59 GMT

Thomas Fuchs, Autor von Script.aculo.us und Scripty2, hat es geschafft, mit 50 Zeilen JavaScript ein kleines Framework für reine Animationen zu schreiben: Mit Émile lassen sich einfach und schnell CSS-Eigenschaften animieren, ohne dass dafür ein komplettes Framework benötigt wird. Die kleine Bibliothek ist darauf ausgelegt, Bewegungen auf eine Website zu bringen — dabei können die allgemein verfügbaren Attribute von DOM-Elementen verwendet werden.

Eine schöne Funktionalität stellt die Möglichkeit dar, Farbewerte (color oder background) zu animieren. Thomas Fuchs hat zudem in seinem Beispiel eine Easing-Funktion (Bounce) beigefügt.
Émile lässt sich sehr einfach nutzen und bietet sogar die Möglichkeit eines Callbacks (after), sobald eine Animation beendet wurde. Wer hauptsächlich Objekte mit einer ID animieren möchte, könnte beispielsweise diesen Code verwenden:

function $(id){
return document.getElementById(id);
}
$("element").onmouseover = function(){
emile(this, "background:#000000;", { duration: 200 });
}
$("element").onmouseout = function(){
emile(this, "background:#ff0000;", { duration: 500 });
}

Das Mini-Framework funktioniert in allen gängigen Browsern (Internet Explorer 6 und aufwärts, Firefox, Safari, Chrome, usw.) und befindet sich noch in einer experimentellen Phase. Erweiterte Effekte und Optionen bietet Scripty2, das mit einer Größe von 9 KB ebenfalls sehr kompakt ist.

Google: Neue Suchoptionen nun auch in Deutsch

Matthias Schütz — Fri, 06 Nov 2009 23:20:45 GMT

Seit gestern sind nun auch auf der deutschen Google-Seite die neuen Suchoptionen verfügbar, die vorher nur den internationalen Google-Benutzern (Google.com) verfügbar gemacht worden waren. Die Funktionen umfassen etwa zeitliche Begrenzungen von Suchergebnissen, verwandte Suchvorschläge, Bilder der Seiten oder eine erweiterte Text-Ansicht. Auf dem GoogleWatchBlog können die Optionen auch noch einmal nachgelesen werden.
Momentan fehlen noch die Funktionen für weniger Onlineshop-Einträge ("fewer/more shopping sites") sowie das "Wonder wheel".

Fast zeitgleich wurde für Google.com zudem eine neue Suchfunktion freigeschaltet: Die "Page previews" genannte Funktion zeigt (falls möglich) eine kleine Vorschau der Websites neben den Suchergebnissen an.

Google zeigt eine interessante Entwicklung bei der Darstellung von Suchresultaten und es wird in Zukunft sicherlich noch weitere nützliche Neuerungen geben.

CSS: 20 kleine Tipps und Tricks mit großer Wirkung

Matthias Schütz — Fri, 06 Nov 2009 06:49:45 GMT

Oft sind es Kleinigkeiten und banale Einstellungen, die in CSS eine große Wirkung erzielen. Bei hartnäckigen Problemen hilft meistens nur langwieriges Ausprobieren oder Hilfestellungen aus dem Netz. Zeit spart man, indem man auf bewährte Lösungen zurückgreift. Natürlich gibt es keine perfekt zugeschnittenen Lösungen, denn viele Probleme sind sehr individuell und so muss das Patentrezept in der Regel selbst entwickelt werden. Dennoch kann man sich für allgemeine Aufgaben Hilfe aus diversen Tipp-Sammlungen, Büchern oder Cheatsheets holen.
Bei ViralPatel gibt es derzeit einen interessanten Artikel, der 20 generelle Tipps und Tricks für Cascading Style Sheets enthält.

Die kleinen Codebausteine dürften den meisten Webentwicklern bekannt sein, dennoch könnte ein nützliches Snippet dabei sein. Unter Anderem finden sich in der Sammlung Codes für Cross-Browser-Transparenz, eine druckfreundliche Darstellung oder das Zentrieren eines Containers. Ein Trick verhindert zum Beispiel das "Springen" von Firefox, sobald eine Scrollbar auf einer Seite benötigt wird (Scrollbar Jump):

html {
overflow-y: scroll;
}

Damit wird die vertikale Scrollbar in Firefox also dauerhaft angezeigt, was die Verschiebung der Seite verhindert.
Für die persönlichen Lesezeichen ist die Sammlung sicherlich eine schöne Ergänzung.

7 Taskbar Tweaker: Windows 7-Taskleiste optimieren

Matthias Schütz — Fri, 06 Nov 2009 06:24:18 GMT

Benutzer von Windows 7 werden sich mit der neuen Taskleiste angefreundet haben — oder auch nicht. Mit den Standard-Einstellungen von Windows 7 lässt sich der XP-Stil fast komplett wiederherstellen. Wer die Funktionen der Taskbar erweitern oder abschalten möchte, kann dafür 7 Taskbar Tweaker nutzen: Mit dem kleinen Programm lässt sich beispielsweise die automatische Gruppierung von Fenstern deaktivieren. Weiterhin kann das Standard-Kontextmenü von Taskbar-Symbolen geändert werden und die Aktion für das Ablegen von Dokumenten auf einem Symbol (Dropping) kann angepasst werden.

Die Anwendung ist auf jeden Fall gelungen und sorgt für eine bessere Bedienbarkeit der ohnehin schon gut durchdachten Windows 7-Taskleiste. Zusammen mit Start Killer (entfernt Start-Button) und Launchy lassen sich Programme zudem sehr komfortabel mit der Tastatur starten.

Notepad++: Makros, Treffer und Standardsprache

Matthias Schütz — Thu, 05 Nov 2009 06:25:11 GMT

Zwischendurch gibt es mal wieder ein paar schnelle Tipps für Notepad++, die nicht ganz offensichtlich sind. Seit Version 5.5 hat sich im beliebten Code-Editor viel getan, aber zwei Tipps beziehen sich auch auf allgemeine Funktionen. So auch die erste Einstellung: Wer oft Code-Snippets einer bestimmten Sprache in Notepad++ einfügt und gleich das richtige Syntax-Highlighting eingestellt haben möchte, kann dies im Menü "Einstellungen -> Optionen …" tun. Im "Optionen"-Dialog lässt sich unter "Neu/Öffnen/Speichern" eine Standardsprache einstellen, mit welcher der Editor von Beginn an geöffnet wird.

Der zweite Tipp bezieht sich auf Makros, die eine tolle Funktionalität von Notepad++ darstellen. Das Aufnehmen und Speichern von Makros ist denkbar einfach, da der Editor hierfür Schaltflächen und das "Makro"-Menü bietet. Allerdings ist nicht sofort ersichtlich, wie sich Makros wieder löschen oder bearbeiten lassen. Dies geht über den Menü-Eintrag "Einstellungen -> Tastatur …" und anschließend im Reiter "Macros". Dort lassen sich alle Makros per Kontextmenü editieren und entfernen.

Schließlich noch ein Tipp für die neuen Such-Features von Notepad++, die unter Anderem mehrface Markierungen von gefundenen Wörtern erlauben. Im "Suchen"-Dialog (STRG + F) gibt es die Einstellung "Treffer markieren", die mit der Schaltfläche "Alle suchen" genutzt werden kann.

Möchte man die farblichen Markierungen wieder entfernen, kann man dies mit der "Zurücksetzen"-Schaltfläche tun. Übrigens können gleiche Wörter auch per Doppelklick und anschließend über den Kontextmenü-Eintrag "Hervorhebung 1" farblich markiert werden.

jQuery-Tutorial: Interaktionen mit Events steuern

Matthias Schütz — Wed, 04 Nov 2009 21:31:34 GMT

Interaktionen stellen wahrscheinlich den wichtigsten Aspekt eines JavaScript-Frameworks dar. Die Bedienung einer Website oder Webanwendung kann durch den Einsatz von jQuery wesentlich verbessert und moderner gestaltet werden. Die JavaScript-Bibliothek bietet etliche Möglichkeiten, um Maus- und Tastatur-Ereignisse zu verarbeiten. In diesem Tutorial will ich auf die allgemeinen Event-Funktionen von jQuery eingehen, mit denen sich schnell dynamische Bedienelemente realisieren lassen.
Basis für diesen Workshop bildet der folgende HTML-Code, der wie gehabt in JS Bin eingefügt und bearbeitet werden kann:

Die CSS-Anpassungen nehme ich wieder mit jQuery vor:

Quelltext
$("a").css({
"width": "200px",
"height": "200px",
"margin": "5px",
"color": "white",
"background": "blue",
"float": "left"
});
$("input").css({
"margin": "5px",
"float": "left",
"clear": "both"
});

Der weitere JavaScript-Code dieses Tutorials sollte dann an den oben stehenden Code angefügt werden.
An dieser Stelle gibt es etwas zu beachten: Die Zuweisung der Attribute background und color überschreibt alle Farbwerte, die vorher in CSS definiert wurden — dazu zählen auch folgende Farben:

a:hover {
color: #654321;
background: #123456;
}

Bei Links existiert bereits ein HTML-Event (hover), das durch entsprechende jQuery-Deklarationen überschrieben wird. Dieser Effekt kann gewünscht sein oder auch nicht. Wir werden dieses Verhalten später reproduzieren.

Bevor wir mit dem Erstellen erster Beispiele beginnen, gibt es noch ein paar Dinge, die man über Events (also Ereignisse) wissen sollte:

bestimmte DOM-Elemente (a, input) sind von vornherein mit Events belegt (hover, Ankersprung, Zeichenausgabe, etc.)
jedes Event in jQuery hat verschiedene Eigenschaften (type, target, usw.)
Events an sich führen noch nichts aus, weshalb sie an eine Funktion (function) gekoppelt werden müssen
innerhalb einer Event-Funktion kann anschließend this verwendet werden, um das referenzierende Objekt anzusprechen
einem DOM-Element können mehrere Events zugewiesen werden
jedes DOM-Element kann mit Events verknüpft werden

Zur Verdeutlichung hier das Grundkonstrukt einer an ein Event (click) gebundene Funktion:

$("element").click(function(){
// Code
});

Ich will daher mit einem einfachen Beispiel anfangen, das mit einem Problem verknüpft ist, welches vielen Einsteigern über den Weg laufen dürfte. Zum Ausprobieren kann dieser Code in JS Bin eingefügt werden, der bei einem Klick auf das Link-Element mit der ID "link1" eine Nachricht (alert) anzeigt.

Quelltext
$("#link1").click(function(){
alert("Nachricht");
});

Was passiert: Zuerst wird die JavaScript-Anweisung "alert" ausgeführt, woraufhin das Standard-Event des Links folgt — in unserem Fall verweisen die Links auf einen unbenannten Anker, also ein Rautezeichen (#). Ein unbenannter bzw. undefinierter Anker weist den Browser an, zum Anfang einer Seite (oberer Rand) zu scrollen. In JS Bin führt das dazu, dass die Seite "in sich selbst", also in dem iframe angezeigt wird. Mit einem Klick auf die "Zurück"-Schaltfläche des Browsers gelangt man wieder zum Code-Fenster von JS Bin.
Nichtsdestotrotz ist dieses Verhalten in der Regel ungewollt, da beim Klick auf ein interaktives Element die aktuelle Scroll-Position beibehalten werden soll. Aus diesem Grund muss das zugewiesene Standard-Event des Links (ein Ankersprung) unterdrückt werden. In jQuery gibt es dazu die vordefinierte Funktion preventDefault(), die dazu verwendet werden sollte. Die Funktion benötigt jedoch das eigentliche Event als Konstruktor, welches über einen Parameter ausgewertet werden kann. Mit diesem Code werden beispielsweise Event-Objekt und Event-Typ des verknüpften DOM-Elements ausgegeben:

Quelltext
$("#link1").click(function(event){
alert(event + " " + event.type);
});

Entscheidend für die preventDefault()-Funktion ist der Parameter "event", der optional ist und nur für bestimmte Zwecke benötigt wird. In unserem Fall lässt sich damit der Ankersprung vermeiden, so dass das folgedene Code-Snippet lediglich eine Nachricht anzeigt:

Quelltext
$("#link1").click(function(event){
alert(event + " " + event.type);
event.preventDefault();
});

Neben dem click-Event gibt es natürlich noch eine Reihe weiterer Events, die an DOM-Elemente gebunden werden können. So zählen vor allem Maus-Events zu den beliebtesten Interaktionen — in diesem Zusammenhang werden wir ein hover-Verhalten simulieren, da wie oben erwähnt die CSS-Zuweisungen des Pseudo-Elements ":hover" durch jQuery aufgehoben werden. Ein Beispiel könnte etwa so aussehen:

Quelltext
$("a").hover(
function(){
$(this).css("background", "red");
},
function(){
$(this).css("background", "blue");
}
);

Wie man sieht, bietet jQuery mit der "hover()"-Funktion eine tolle Hilfsfunktion, mit der sich jQuery-Code bei einem "over"- und einem "out"-Status ausführen lässt (mehr darüber in der jQuery-Dokumentation). Im obigen Beispiel wird bei dem "over"-Ereignis die Hintergrundfarbe auf "rot" gesetzt, während das "out"-Ereignis (Mauszeiger verlässt Element) die Farbe wieder auf "blau" setzt. Alternativ können auch folgende Maus-Events verwendet werden:

Quelltext
$("a")
.mouseover(function(){
$(this).css("background", "red");
})
.mouseout(function(){
$(this).css("background", "blue");
});

Hier werden die beiden Events "mouseover()" und "mouseout()" aneinander gehängt (Chaining). Wichtig beim Chaining ist das Weglassen der Semikolons (hier in Zeile 4), da die Funktionen nacheinander ausgeführt werden sollen und ein Semikolon eine Anweisung beendet. Wer zudem mit verschachtelten Elementen bzw. Links arbeitet, sollte auf "mouseenter()" und "mouseleave()" zurückgreifen. Der Unterschied wird sehr gut in der offiziellen jQuery-Dokumentation erklärt.

Weiterhin lassen sich in jQuery mittels "bind()" mehrere Events an ein DOM-Objekt koppeln. Die Events müssen dann durch eine Leerstelle aufgelistet werden. Um das eben erstellte Beispiel mit der "bind()"-Funktion zu reproduzieren, könnte der Code so aussehen:

Quelltext
$("a").bind("mouseover mouseout", function(event){
if (event.type == "mouseover") {
$(this).css("background", "red");
} else {
$(this).css("background", "blue");
}
});

Das Gegenstück zu "bind()" stellt "unbind()" dar — damit lassen sich zugewiesene Events wieder von DOM-Elementen entfernen. Hier können auch Events wieder aufgehoben werden, die nicht mit der "bind()"-Funktion deklariert wurden. Das folgende Snippet vervollständigt unser kleines Beispiel mit einem "click()"-Event, das die "unbind()"-Funktion enthält:

Quelltext
$("a")
.mouseover(function(){
$(this).css("background", "red");
})
.mouseout(function(){
$(this).css("background", "blue");
})
.click(function(event){
$(this)
.html("Deaktiviert")
.css("background", "grey")
.unbind("mouseover mouseout");
event.preventDefault();
});

Bei einem Klick auf einen Link wird also der Text des Elements auf "Deaktiviert" gesetzt und die Hintergrundfarbe wird auf "grau" eingestellt. Durch die Verwendung von "unbind()" werden die beiden Events "mouseover" und "mouseout" folglich ignoriert.

Ein weiterer Verwendungszweck für Events stellen Eingabefelder (input) dar. Hier können beispielsweise Einfärbungen oder Überprüfungen von Eingabewerten erfolgen. Ein kleines Beispiel demonstriert Farbänderungen bei den Events "focus" und "blur", welche als Standard-Ereignisse von input-Feldern definiert sind:

Quelltext
$("input")
.focus(function(){
$(this).css("background", "yellow");
})
.blur(function(){
$(this).css("background", "white");
});

Erhält also ein input-Feld den Fokus, wird es gelb eingefärbt. Für Formulare wäre dies also eine Möglichkeit, um die Benutzerfreundlichkeit zu erhöhen (sofern der Browser die ":focus"-Pseudo-Klasse nicht unterstützt).

Schließlich bietet jQuery noch tolle Möglichkeiten zur Abfrage von Tastatur-Ereignissen. Bei diesen Events spielen die sogenannten "Keycodes" eine Rolle: Jede Taste auf der Computertastatur kann mithilfe einer definierten Zahl abgefragt werden. Eine Liste aller verfügbaren Keycodes gibt es beispielsweise auf dieser Seite. In Verbindung mit dem "keydown()"-Event können in jQuery also auch Tasten zur Bedienung einer Website verwendet werden. Hier ein Beispiel zum Testen, welches es ermöglicht, durch die input-Felder mit den beiden Pfeiltasten "nach oben" und "nach unten" zu navigieren.

Quelltext
$("input")
.focus(function(){
aktiv = $("input").index(this);
$(this).css("background", "yellow");
})
.blur(function(){
$(this).css("background", "white");
});
$(window).keydown(function(event){
letzterInput = $("input").length - 1;
switch (event.keyCode) {
case 40: // "Pfeil nach unten"-Taste
if (aktiv == letzterInput) {
$("input:eq(" + aktiv + ")").blur();
$("input:eq(0)").focus();
} else {
$("input:eq(" + aktiv + ")").blur();
$("input:eq(" + (aktiv + 1) + ")").focus();
}
break;
case 38: // "Pfeil nach oben"-Taste
if (aktiv == 0) {
$("input:eq(" + aktiv + ")").blur();
$("input:eq(" + letzterInput + ")").focus();
} else {
$("input:eq(" + aktiv + ")").blur();
$("input:eq(" + (aktiv - 1) + ")").focus();
}
break;
}
});

Die "aktiv"-Variable repräsentiert die Index-Nummer des aktiven input-Feldes. Betätigt der Benutzer eine der beiden deklarierten Tasten, wird mit dem "eq()"-Filter der Fokus auf das entsprechende Eingabefeld gelegt. Weiterhin kann man hier sehen, wie Variablen in jQuery als Selektoren verwendet werden können (Maskierung durch Anführungszeichen).

Zu guter Letzt ist noch die "trigger()"-Funktion erwähnenswert: Damit lassen sich Events untereinander verknüpfen. Sobald also ein Event bei einem DOM-Element ausgelöst wurde, kann zusätzlich die Event-Funktion eines anderen Elements ausgeführt werden. Das sieht in der Praxis etwa so aus (der Code des vorherigen Beispiels kann entfernt werden):

Quelltext
$("#link1").click(function(){
$("#link3").after("Test1");
});
$("#link2").click(function(){
$("#link3").after("Test2");
$("#link1").trigger("click");
});
$("#link3").click(function(){
$("body > span").each(function(){
$(this).remove();
});
});
$("#link1, #link2, #link3").bind("click", function(event){
event.preventDefault();
});

Hier wurden nun mehrere Funktionalitäten demonstriert: Die "trigger()"-Funktion in Zeile 7 führt bei einem Klick auf den Link mit der ID "link2" das "click"-Event von "link1" aus. Somit werden die beiden span-Elemente mit "Test1" und "Test2" erzeugt.
In Zeile 11 wurde die "each()"-Funktion verwendet, die auf jedes span-Element (Kind-Element) des body-Bereichs angewendet wird und das jeweilige Element entfernt. Somit werden beim Klick auf den Link "link3" alle span-Elemente aus der DOM-Struktur gelöscht.
Zeile 16 zeigt noch einmal, dass die "bind()"-Funktion auch bei einer Aufzählung von Elementen (Grouping) funktioniert — allen drei Links wird nachträglich "preventDefault()" zugeteilt, so dass der Ankersprung unterdrückt wird.

Mit Events lassen sich also komplette Benutzeroberflächen programmieren und Interaktionen sehr genau steuern. In Verbindung mit Animationen lassen sich so optisch ansprechende Ereignisse erzielen. Mehr über Effekte gibt es im nächsten Tutorial.

Web-Typografie: @font-face in allen Browsern

Matthias Schütz — Wed, 04 Nov 2009 06:54:03 GMT

Mit dem Web Open Font Format wird es in Firefox 3.6 eine neue Möglichkeit geben, individuelle Schriftarten für Headlines und Fließtext nutzen zu können. Das Format wird vorerst ausschließlich von dem Mozilla-Browser unterstützt werden, weshalb praktikable Cross-Browser-Lösungen benötigt werden. Zu diesem Thema wurde letzte Woche auf dem ThemeForest-Blog ein interessanter Beitrag veröffentlicht, der die Implementierung von verschiedenen Schrift-Formaten beschreibt. In dem Artikel von Devon Govett wird der @font-face Kit Generator von Font Squirrel erwähnt, mit dem sich eine OTF- oder TTF-Schriftart in TrueType (TTF), EOT, SVG und WOFF konvertieren lässt. Anschließend können die Formate mit entsprechendem CSS-Code so eingebettet werden, dass die Schrift in allen gängigen Browsern dargestellt werden kann.

In der Praxis funktioniert die Methode sehr gut. Allerdings muss man ein paar Wermutstropfen in Kauf nehmen: Das Anti-Aliasing und die Strichstärke der Schriftart variieren je nach Browser — unter Windows lässt die Kantenglättung noch zu wünschen übrig. Weiterhin kann in manchen Browsern ein unschöner "Flash of Unstyled Content" (FOUC) auftreten.
Trotz der Möglichkeiten von "@font-face" müssen natürlich die Lizenzbestimmungen einer Schriftart beachtet werden. Wer sicher gehen will, sollte also bei Font Squirrel nach einem passenden Zeichensatz suchen. Alternativ gibt es immer noch JavaScript-Methoden wie Cufón, die zumindest für Überschriften eine gute Cross-Browser-Lösung darstellen — auch hier muss die EULA der jeweiligen Schriftart "Web Embedding" erlauben.

15 Sans Serif-Schriftarten zum Sammeln

Matthias Schütz — Tue, 03 Nov 2009 16:01:47 GMT

Um frischen Wind in das heimische Schriftarchiv zu bringen, habe ich wieder einmal etwas gestöbert und eine kleine Sammlung von modernen Sans Serif-Schriftarten zusammengestellt. Ich habe versucht, möglichst unbekannte bzw. aktuelle Fonts auszusuchen. Die Schriftdesigner leisten exzellente Arbeit und so erscheinen ständig interessante Zeichensätze.
Bei meiner kleinen Sammlung sind ausschließlich Freeware- oder Donationware-Schriftarten aufgelistet — manche Fonts dürfen nur für private Zwecke genutzt werden. Auf der DaFont-Seite oder in der "Readme"-Datei der jeweiligen Schriftart können die Lizenzbestimmungen noch einmal nachgelesen werden. Über eine Spende freuen sich die Designer natürlich immer.

Motionographer: Kreative Animationen und Effekte

Matthias Schütz — Mon, 02 Nov 2009 18:34:59 GMT

Es gibt viele Quellen für gute Inspiration — Bewegtbild stellt zweifellos den anspruchsvollsten Bereich dar, in dem sich kreative Köpfe austoben können. Sowohl Werbespots als auch Zeichentricksequenzen und Kurzfilme gehören zu den Projekten, die auf Motionographer fast täglich präsentiert werden. Von 3D-Animationen über Realfilmszenen bis hin zu beeindruckenden Effekten dürfte für jeden Geschmack etwas dabei sein. Das Film-Archiv gibt es seit 2006 und beinhaltet eine immense Menge an inspirierenden Sequenzen.

Bei Motiongrapher finden sich neben den Video-Präsentationen auch viele Links zu Ressourcen wie Tutorials, Communities oder anderen Inspirationsquellen. Auch wenn sich das Design von bewegten Bildern nur sehr abstrakt auf die Gestaltung feststehender Grafiken übertragen lässt, so können Dynamik und Farbenvielfalt der Animationen gute Ideengeber für visuelle Konzepte sein.
Wer noch mehr Anregungen aus dem Bereich der bewegten Kunst sucht, kann bei Motionspire oder Motion Served vorbeischauen.