Weil ich der Meinung bin, dass HTML5 mittlerweile relativ verbreitet und stabil geworden ist, habe ich das Experiment (leicht vereinfacht) mit JavaScript und dem Canvas Element neu implementiert. Zum Einsatz kam dabei die JS Library easeljs, welche die Arbeit mit dem Canvas Element deutlich beschleunigt. Dennoch war es relativ überraschend, wie schnell das Ergebnis fertig war. Auch die Performance des Ganzen ist sehr gut – selbst auf dem iPad gibt es keinerlei Ruckler oder kantige Striche.

Hier das Ergebnis:

• JS/HTML5 Stiftsimulation öffnen (Popup)
• Dateien herunterladen

Welche Gedanken hinter dem Ganzen stehen, ist auf der Seite des ursprünglichen Experiments nachzulesen.

Jetzt ist es zum Beispiel wieder möglich, seine JS Applikation trotz der Verwendung von auto-compress.py produktiv zu Debuggen. Konfigurationsdateien können nun übersichtlicher gestaltet werden.

Änderungen

auto-compress.py gibt nun aus, welche Aktion aktuell durchgeführt wird. Falls ein Problem beim Ausführen einer Instruktion auftritt, etwa durch einen Syntaxfehler in einer JS-Datei, so wird das nun klarer angezeigt als in der vorherigen Version.

Neue Instruktionen

[compression-disabled]

Für die darauf folgenden Instruktionen ist die Kompression deaktiviert. Es werden lediglich die Inputdateien konkateniert, und anschließend an den Zielort bewegt. Dieses Vorgehen empfiehlt sich zu Anfang der Entwicklungsphase, oder wenn man seinen JS Code debuggen möchte.

[compression-enabled]

Die Kompression wird für die darauf folgenden Instruktionen wieder aktiviert.

chdir path/absolute/or/relative/to/current/path

Ändert den aktuellen Ordner. Dies bietet sich an, wenn man seine JS-Sourcefiles in einem Unterordner (etwa src/js) speichert, denn so kann man das ständige Wiederholen des Ordnerprefix weglassen.

Download

auto-compress.py

Wie auch bei Version 1: Eine kleine Demo ist beigefügt. Wie man auto-compress.py aufruft, kann der readme.rtf entnommen werden.

Hier ist die Lösung: auto-compress.py ist ein kleines Python Script das Änderungen an den Quelldateien erkennt, und die betroffenen, komprimierten Dateien neu erstellt. Dabei geht es nach einem Pattern vor, das man selbst definieren kann. Zum Beispiel:

#auto-compress.config
DateiA.js + DateiB.js => DateiAB.min.js
style.css => style.min.css

Hier wird DateiA.js mit DateiB.js zusammen in eine gemeinsame, komprimierte js Datei umgewandelt. style.css wird nach style.min.css komprimiert. Jedes mal wenn man eine Änderung an DateiA.js oder DateiB.js macht, wird DateiAB.min.js neu erstellt. Bei Änderung von style.css wird auch style.min.css aktualisiert.

Hier kannst Du das Script herunterladen:

• Neue Version vom 10.02.2012
• Alte Version vom 19.01.2012

Eine kleine Demo ist beigefügt. Wie man auto-compress.py aufruft, kannst Du der readme.rtf entnehmen.

Durchaus richtig ist die Annahme, dass die Verwendung von Flash im Web kontinuierlich abnehmen wird. Diesen Trend hat man auch schon vor der Ankündigung durch Adobe sehen können. Dennoch habe ich die Ankündigung zum Anlass genommen, wieder nach einer HTML(5) IDE für Animationen (wie Flash Pro) zu suchen.

Ich bin eigentlich direkt auf Adobe Edge* gestoßen. Ein Kollege hat mir vor einiger Zeit relativ euphorisch davon erzählt. Ich für meinen Teil denke immer Grafik+HTML5=Canvas, was aber in diesem Fall nicht stimmt. Die Animationsbühne (stage) wird in Edge mithilfe von div-Containern aufgebaut, Animationen sind mit jQuery und CSS3 transformations realisiert.

Das primäre Ziel von solchen IDE sollte es aktuell sein, einfache Animationen auch möglichst einfach umsetzen zu können. Beispielsweise simple Werbebanner. Dort geht es hauptsächlich darum, in wenigen Sekunden Animationszeit das Interesse des Users zu wecken. Und tatsächlich — mit Edge konnte ich ohne Vorkenntnisse innerhalb von ca. 45 Minuten einen kleinen Banner herstellen (seitlich eingebunden). Hauptsächlich weil einige Konzepte und UI Elemente von Flash Pro übernommen wurden. Die Timeline ist kein Unbekannter, und auch Features wie Labels, zu denen man zur Laufzeit springen kann, sind vorhanden. Natürlich hat Edge noch viele Fehler und der Funktionsumfang ist recht eingeschränkt. Es produziert aber relativ sauberen Code, was allgemein enorm wichtig ist.

Man darf gespannt sein, wie die Entwicklung voranschreitet. Gibt es erst einmal etablierte, verbreitete HTML5 IDEs für interaktive und animierte Inhalte, so steht einem flächendeckenden Einsatz von HTML5 und Ersatz von Flash nichts mehr im Wege. Ich würde auf jeden Fall empfehlen Edge im Auge zu behalten.

Hier noch die Quelldateien des Banners.

Adobe Edge Preview 3 Screenshot #1

Adobe Edge Preview 3 Screenshot #2

*Adobe Edge ist momentan als “preview” in den Adobe Labs. Es befindet sich also aktuell in Entwicklung, und kann vor Veröffentlichung einen anderen Namen erhalten.

• Überarbeitete Menüstruktur
• Neue Overview Ansicht
• Änderung an der Authentifizierung: Es wird nun statt AuthToken die Username+Passwort Kombination abgefragt

Du kannst die app wie gewohnt aus dem AppStore laden: Live Visitors for Piwik

Zur Projektseite

Durch den enormen Aufwand eine solche app zu erstellen, und in Hinblick auf die offizielle Piwik app, die ja genau das selbe Ziel hat, entschied ich mich dazu den Funktionsumfang und das Ziel der app deutlich abzuändern.

Die neue app erkennt live alle Besucher der Websites, und visualisiert diese entsprechend. Sobald ein User eine Aktion durchführt, etwa das Öffnen einer Unterseite, wird das von der app registriert und angezeigt. Eine Besonderheit dabei ist, dass die Websites nicht einzeln betrachtet werden müssen. Es werden vielmehr die Besucher aller Websites im Piwik System gemeinsam in einer einzigen Liste dargestellt.

Version 1.0 wurde vor circa einer Woche im AppStore veröffentlicht und ist zur Zeit nur für das iPhone verfügbar. Aktuell wird aber bereits an Version 2.0 Entwickelt, wobei die Entwicklung schon sehr weit fortgeschritten ist. In der neuen Version wird ein Übersichtsview, sowie eine neue Navigation eingeführt. Außerdem gibt es viele Detailverbesserungen.

Mehr zur app

Die letzte Umsetzung ist dabei einen neuen Weg gegangen: Es wird ein generelles Design vorgegeben, und einige Basiselemente sind fertig programmiert. Das umfasst etwa einen Standardemitter, einige Partikelarten und Bitmap- sowie Spriterenderer.

Manipulieren kann man die Partikel indem man der ParticleCollection (Emitter basieren auf der ParticleCollection) sog. ParticleActions hinzufügt. Auch hier sind die essentiellen Actions schon vorprogrammiert (Actions zum Entfernen von Partikeln, gravity, acceleration etc.).

Alles, was benötigt wird um einfache Effekte zu erstellen, ist also schon vorhanden. Das generelle Design zielt allerdings darauf ab, dass man das Partikelsystem leicht erweitern kann um so komplexe, einzigartige Aufgaben gut umzusetzen. Es ist beispielsweise außerordentlich einfach eigene Actions zu implementieren. Man kann dabei unter Anderem jedem Partikel eine neue Eigenschaft hinzufügen und diese dann manipulieren und auswerten. Natürlich kann man auch eigene Partikelarten, Renderer und Emitter schreiben. Da diese jeweils das entsprechende Interface implementieren müssen, ist die Kompatibilität stets gegeben.

Ich werde hier bald eine Download- oder Projekt-Section einführen. Wenn es so weit ist, wird das ParticleSystem dort auch vertreten sein. Dort werde ich dann auch Updates und Tutorials oder Beispiele veröffentlichen.

Die aktuellen Sources findest Du hier: release-1.0.0 (mit ASDoc Dokumentation)

Eine Demo (die hier eingesetzte Headeranimation) ist hier zu finden: AruLabsParticleSystemDemo1

Also habe ich nach einem Plugin gesucht, was die Tweets per AJAX nachlädt und das Ganze schön darstellt, mit dezenten Animationen und einem Lade-Indikator. Alle Plugins die ich gefunden habe fand ich entweder nicht simpel genug, denn ich will nur den Text des Tweets und das Datum anzeigen,  oder hatten keine bzw. schlechte Animationen.

Deswegen habe ich einfach schnell ein eigenes kleines Widget geschrieben, was genau meinen Wünschen entspricht. Falls jemand Interesse hat: Die Sources gibt es hier: WordPress Twitter Widget. Benötigt wird zudem jQuery.

Gedanken

Will man ein simples Malprogramm für den Computer entwickeln, so wird man meistens Dicke, Intensität und Farbe eines Stifts oder Pinsels definieren. Beim Zeichenprozess zieht man dann eine Linie mit genau diesen Eigenschaften vom letzten bekannten Punkt der Maus bis zur aktuellen Position des Stifts. Möchte man nun allerdings realistische Zeichnungen simulieren, ist dieses Konzept unbrauchbar. Was muss man also anders machen um mehr Realismus zu erreichen?

Es liegt eigentlich auf der Hand: Der Pinsel muss mehr Parameter als bloß die Farbe, Dicke und Intensität besitzen. Zwei weitere Parameter wären zum Beispiel eine Textur und Skalierungsänderung über Zeit. Wenn man dem Stift also genug Parameter gibt und anschließend ein wenig mit ihnen herumexperimentiert, sollten sich schnell gute Ergebnisse erzielen lassen.

Definition des Pinsels für das Experiment

Es gibt verschiedene Parameter die eine Pinselspitze definieren können. Die wahrscheinlich charakteristischste Eigenschaft ist die Textur. Auf die Textur werden diverse Transformationen angewandt bevor sie auf die Arbeitsfläche / Canvas gezeichnet wird. Eine Wiederholrate beeinflusst den Zeitabstand zwischen zwei Textur-Zeichenoperationen. Eine Basistextur ist also essenziell um den Pinsel/Stift zu definieren. Auch die Zeichen-Wiederholrate ist notwendig. Diese kann allerdings durch das nahtlose Zeichnen ersetzt werden. Transformationseigenschaften dagegen sind optional.

Eine erste Transformationseigenschaft ist die Skalierung der Pinselspitze. Diese kann statisch definiert werden oder sich über Zeit oder Bewegungsgeschwindigkeit* ändern. Ähnliches gilt für eine Rotation. Diese kann ebenfalls statisch gegeben sein, oder durch Bewegungsrichtung beeinflusst werden. Eine Definition der Intensität sollte ebenfalls statisch vorgenommen werden können, allerdings kann ein Pinsel über Zeit* oder zurückgelegten Weg seit Aufsetzen an Intensität ab- oder zunehmen (z.B. Wasserfarb Pinsel).

Für all diese Eigenschaften, mir Ausnahme von Textur und Wiederholrate, kann es sinnvoll sein einen Delta Wert zu definieren um (z.B. natürliche) Schwankungen zu erzeugen. Zudem kann ein Delta für die Positionierung der Textur einen sogenannten “jitter”, also einen Streuungseffekt, hervorrufen, welcher hochgradig unregelmäßige Pinselspitzen charakterisiert.

* in dem Experiment nicht implementiert

Anmerkungen

In dem Experiment implementiert der Pinsel direkt Funktionen zum Zeichnen auf ein BitmapData Objekt, wahlweise nahtlos oder mit Wiederholrate. Dieses Vorgehen war bewusst so gewählt, da es das Experiment kompakter hält. Eine Auslagerung solcher Methoden macht bei komplexeren Projekten allerdings durchaus Sinn.

Da ich selber Piwik für diverse Websites einsetze, habe ich vor Kurzem nach einer brauchbaren, kostenlosen App dazu für mein iPad gesucht. Leider erfolglos. Das Piwik Projekt bietet zwar selbst eine iPhone App an, allerdings muss man sie auf dem iPad hoch skalieren, was eher suboptimal ist.

Da ich ohnehin ein etwas größeres Projekt zum Erlernen fortgeschrittener CocoaTouch Techniken brauchte (es geht nichts über learning by doing), habe ich mich entschlossen diese Lücke im AppStore zu füllen. Angefangen habe ich mit dem Erstellen von Mockups. Das Aussehen und die Funktion der App wurden also ursprünglich in Photoshop entwickelt. Dabei hat mir das großartige iPad GUI Design Template weitergeholfen.

Weiter ging es mit den ersten ViewControllern und der Programmierung der Kommunikation mit der Piwik API. Weiter ins Detail gehen will ich hier nicht, allerdings sei gesagt, dass hinter den Kulissen schon viel passiert ist was man so noch nicht sieht.

Das spezielle an dieser App ist, dass man sich nicht auf eine Website beschränken muss von der man die aktuellen Informationen und Statistiken angezeigt bekommt sondern man kann mehrere aktive Seiten wählen. Die Statistiken dieser Seiten werden dann immer zusammen visuell aufbereitet und aggregiert sodass Zusammenhänge und Events einfacher zu interpretieren sind.

Einige Bilder zur Illustration und zum Überblick sind hier angehängt.

Ausgewählte Mockups

Overview Bildschirm

Last Visits Graphen

Visitor Log Bildschirm

Echte Screenshots

Server Settings View

Server Settings View -> Active Site Selection

Server Settings View -> Active Site Selection

Overview

Date Selector

Custom Date

Quick Settings

Quick Settings: Server

Quick Settings: Sites