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.

Mobile UI Patterns: Beispiele für mobile Anwendungen

Inspirationsquellen werden im Bereich des Webdesigns immer wichtiger, da hier stetig neue Trends entstehen. Seiten wie Pattern Tap, Design Meltdown oder MephoBox leisten hier sehr gute Dienste. Wer auch Inspirationen für mobile Anwendungen sucht, ist nun auch mit den Mobile UI Patterns gut bedient: Hier finden sich seit kurzem diverse Screenshots von iPhone-Anwendungen, die in unterschiedliche Kategorien eingeteilt sind.

Mobile UI Patterns stellt eine sehr einfache Sammlung ohne besondere Such- oder Filtermöglichkeiten dar. Elemente können durch Kategorien angesehen werden — dazu zählen beispielsweise "Activity Feeds", "Dashboard Navigation", "Grouped Table Views" oder "Custom Tab Navigation".
Die Sammlung ist derzeit noch recht übersichtlich, dürfte aber mit der Zeit wachsen und gehört daher in die Lesezeichen.

Tinycon: Animierte Favicons für Benachrichtigungen

Viele Web-Applikation, die durch Ajax gestützt werden, geben Hinweise oder Meldungen aus, sobald ein bestimmtes Ereignis eingetroffen ist. Das betrifft beispielsweise das Empfangen einer Nachricht oder das generelle Aktualisieren von Inhalten. Da die meisten Benutzer häufig auf mehreren Seiten gleichzeitig unterwegs sind und geöffnete Webanwendungen gerne in einem separaten Tab abgelegt werden, bieten sich spezielle Methoden für das Anzeigen von Benachrichtigungen an. Neben dem dynamischen Ändern des Seitentitels wäre auch ein Hinweis durch ein aktualisiertes Favorite Icon (Favicon, 16×16 Pixel) denkbar.
Das Skript Tinycon ist genau darauf ausgelegt und ermöglicht es, eine Zahl auf dem aktuellen Favicon einer Seite anzuzeigen.

Die Zahl kann also für die Anzahl neuer Nachrichten stehen und signalisiert dem Benutzer, das der Inhalt des Tabs aktualisiert wurde. Das Tinycon-Skript erlaubt es, die Darstellung des Bubbles anzupassen: Schriftart, Größe und Hintergrundfarbe können per Optionen festgelegt werden. Das Favicon wird dynamisch per Canvas erzeugt und über "toDataURL()" als Base64-Grafik eingebunden. Sollte HTML5/Canvas nicht vom Browser unterstützt werden, kann ein Fallback aktiviert werden, das dann nur den Seitentitel aktualisiert. Auf GitHub findet sich wieder der Quellcode des Projekts.

ThreeNodes.js: Modulares Node-System für WebGL

Wer grafisch aufwendige Echtzeit-Visualisierungen mit 3D-Szenen realisieren will, ohne dabei Code schreiben zu müssen, greift auf ein Toolkit wie vvvv (v4) zurück: Durch das Verbinden von Knotenpunkten (Nodes) können Effekte aller Art erzeugt werden. Derartige Node-Systeme finden ihre Anwendung eigentlich in komplexen Video- und VFX-Applikationen wie Fusion oder den Compositing-Tools von Autodesk. Aber auch die Textur-Software Filter Forge basiert auf dem Modell der Knotenpunkte.
Mit vvvv lassen sich wie gesagt Echtzeit-Animationen auf 3D-Ebene erstellen und seit geraumer Zeit ist auch eine JavaScript-Portierung vorhanden. Eine weitere Anwendung dieser Gattung, die zudem von WebGL und Three.js Gebrauch macht, stellt ThreeNodes.js dar.

Die Webanwendung funktioniert ähnlich wie vvvv und erlaubt es, 3D-Animationen durch das Verbinden von Nodes zu erzeugen und in Echtzeit zu verändern. Eine Live-Demo gibt es auf dieser Seite, wobei es sich hierbei noch um eine Alpha-Version handelt. Da durch WebGL die Grafikkarte direkt angesprochen wird, kann es durchaus vorkommen, dass aufgrund intensiver Rechenoperationen der Browser einfrieren kann. Effekte sollten also mit Bedacht ausgeführt werden.
Dennoch stellt das ThreeNodes-Projekt einen interessanten Ansatz dar, um auch ohne Programmierkenntnisse 3D-Szenen mit WebGL zu erstellen und auszuprobieren.

JavaScript: Sammlung mit Patterns und Anti-Patterns

In der Softwareentwicklung stellen Entwurfsmuster (Design Patterns) Lösungsansätze für bestimmte Probleme dar und lassen sich daher ganz unterschiedlich einsetzen. Ein Muster ist nur in einigen Fällen sinnvoll und sollte außerdem bestimmte Kriterien erfüllen. Auch für JavaScript gibt es bereits Entwurfsmuster, die verschiedene Bereiche abdecken.
So wie es Muster gibt, bestehen auch Antimuster (oder Anti-Patterns), die als "Bad Practices" anzusehen sind. Der Entwickler Shi Chuan hat sich die Mühe gemacht, etliche Muster und Antimuster für JavaScript zusammenzutragen. Auf dieser Website findet sich die Sammlung, die eine große GitHub-Seite widerspiegelt.

In der Sammlung finden sich allgemeine Muster, funktionale und objektbezogene Muster, Entwurfsmuster oder auch jQuery-Muster. Ein kleines Beispiel, das für die Erstellung eines Objekts das dazugehörige Muster und Antimuster zeigt:

• // Anti-Pattern
• var car = new Object();
• car.goes = "far";
•  
• // Empfohlenes Pattern
• var car = { goes: "far" };

Die Muster stammen von unterschiedlichen Quellen und diese sind auch im Quelltext vermerkt. Unter den klassischen Entwurfsmustern finden sich häufig verwendete Design-Patterns wie der Observer, das Singleton oder die Factory.
Die Sammlung soll künftig noch um weitere Patterns erweitert werden, wie etwa DOM- oder Browser-Muster.