Virtuelle Flecken mit HTML5 Canvas entfernen – so geht eine Touch Advert
Kommentare

Zewa Wisch & Weg kennt jeder aus der Werbung. Wer derzeit der offiziellen Website der Haushaltstücherexperten einen Besuch abstattet, kann den Wisch & Weg Effekt auch im Browser selbst nachvollziehen. Abgeleitet vom TV-Spot bewegt man ein digitales Küchentuch über einen virtuellen Fleck.

Das „Touch Advert Special“ wurde von der Agentur Nuisol entwickelt und wird nur auf kompatiblen Endgeräten angezeigt. Am besten kommt das Wischerlebnis natürlich auf einem Tablet, wenn mann das digitale Tuch mit den Fingern bewegen kann.

Zewa Wisch & Weg 1
Oh Schreck, oh Schreck, oh Schreck, ein Fleck! In der Touch Advert muss ein virtueller Fleck beseitigt werden.

Wir haben mit Christian Kuhn, Geschäftsführer von Nuisol, über die technischen Aspekte hinter dem Promo-Gimmick gesprochen.

Das Hauptaugenmerk lag bei der Umsetzung auf HTML5 Canvas. Die HTML5 Spezifikationen definieren das Canvas Element als „Auflösung abhängiges bitmap canvas“, das für das On-the-Fly-Rendern von Graphen, Spielegrafiken oder anderen visuellen Bildelementen vorgesehen ist. „Hauptsächlich bietet Canas ein low level interface zum Zeichnen, welches man via JavaScript anspricht“, erläutert Christian. „Seit wir es geschafft haben, die komplette Programmiersprache quasi ‚at our disposal’ zu haben, war es relativ einfach die Zeichnungen in Animationen umzuwandeln und diese dann wieder in Gamegrafik.“

Gerade um eine Interaktion mit dem User aufzubauen, beispielsweise über traditionelle DOM Manipulation, ist das Canvas Element eine gute Option, „denn es erlaubt uns, Pixel individuell zu animieren und ist ebenso sehr gut für Bildmanipulation zu verwenden“, erklärt der Agenturchef weiter.

Doch die Bildmanipulation ist nur eine Seite der Medaille. Denn bei der Entwicklung stellte sich heraus, dass beispielsweise Browser auf Tablets beim Ausführen der Wisch & Weg Aktion schnell an ihre Grenzen stoßen. „Für uns war es deshalb eine der Hauptaufgaben, die Performance einer solchen Anwendung auf einem Device wie dem Tablet festzustellen. Das verlässlichste war das iPad mit Safari oder Chrome als Browser.“ Es ging vor allem darum, herauszubekommen, wie gründlich der Fleck entfernt wurde. Der einfachste Weg, um dies zu tun, war laut Christian ein sogenanntes Timed Event. „Jedoch konnte die Timer Frequenz nicht sehr hoch sein, andernfalls, konnte das Tablet damit nicht umgehen. Die Lösung bestand darin, ein gutes Zeitinterval zu finden, das die Tablet Performance nicht verzögert.“

Ferner stellte sich heraus, dass Android Browser das Script nicht mit der gleichen Performance wie der Safari auf iOS verarbeiten können. „Hauptsächlich ist dieses Problem dem Browser und seiner Art das Canvas zu rendern, zu zuschreiben. Es findet eine Validierung statt, welches das Timer Intervall ändert, um zusätzlichen ‚Prozessstress’ zu unterbinden.“

Zewa Wisch & Weg 2
Das Küchentuch saugt langsam den Fleck auf.

Um herauszufinden wie sauber das Canvas arbeite, validierten Christian und sein Team die Gesamtmenge des zu wischenden Bereiches und verglichen ihn mit der vorherigen Datenspur.

Und welche Devices werden nun unterstützt? „Das Hauptziel war der Safari unter iOS, der Desktop-Safari und der Desktop-Chrome. Es funktioniert ebenso unter Android Chrome, jedoch mit deutlich schwächerer Performance und IE 9.“ Während dem Testen diente den Entwicklern das iPad 2 als Haupttestgerät, während des finalen Debugging-Prozesses verfolgte und überprüfte man die Datenperformance und Resultate durch die Konsole, in den oben genannten Browsern.

Zewa Wisch & Weg 3
Jetzt ist er fast weg…

Generell sollte eine Website in der Lage sein, folgende Scripte auszuführen, um die Wisch & Weg Applikation zu hosten:

  • jQuery 1.7.2 (oder früher)
  • jquery md5 plugin
  • JQ iOS Shake detection plugin

Am wichtigsten ist laut Christian ferner, möglichst alle JavaScripts zu vermeiden, die die normale Website-Performance beeinträchtigen. „Bevor das Touch Script auf die Homepage importiert wird, wäre es am besten die Konsole zu checken, um Fehler zu verfolgen und die Ladeperformance zu überprüfen.“

Na dann: fröhliches Wischen allerseits!

Quelle alle Bilder: Screenshots zewa.de

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -