Jahresendvision 2010

Verdammte Axt am Weihnachtsbaum! Das Jahr neigt sich schon wieder dem Ende. Man passt kurz nicht auf, zack ist Weihnachten Chrismukkah. Und dann Silvester und schon ist alles vorbei. Halten wir kurz inne und schauen zurück, denn wie hat schon Ferris Bueller gesagt: Life moves pretty fast. If you don’t stop and look around once in a while, you could miss it. Verpassen wir also diesmal nichts und schauen zurück in das gute alte 2010, eh‘ der Sekundenzeiger nach 2011 springt.

The Year of the Pad

2010 war das Jahr des iPads und damit wieder einmal das Jahr des Apple. Habe ich noch Anfang des Jahres mein Fanboytum zurückhalten müssen und gehofft, dass 2010 das Jahr des Tablets würde, kann ich Ende des Jahres ohne weiteres behaupten: es gibt keine wirkliche Alternative zum iPad, Apple beherrscht diesen selbstgeschaffenen Markt. Der Hype indes klingt langsam ab, es macht sich ein wenig Ernüchterung in jenen Chefetagen breit, wo man auf die Rettung des gedruckten Wortes durch Steve Jobs‘ Wundermaschine geglaubt hatte, oder wo man heute noch glaubt, das Internet würde sich eh‘ nicht durchsetzen. Eine Mitschuld an der Krise des Druckerzeugnisse-zu-iPad-Gedankens dürfte zweifelsohne der Megaflop des WeTab tragen, der die Hoffnung auf eine deutsche iPad-Alternative aber sowas von begrub…

Die allgegenwärte Fokussierung auf Apps ließ dem gemeinen Webentwickler dann aber glücklicherweise ein wenig Zeit, Vorstellungen davon zu entwickeln, wie man Webseiten auf das iPad bringt und wie diese auszusehen haben. Nicht alle Prehype-Ideen und -gedanken haben sich dabei bewahrheitet, aber letztendlich ist Apples Touchdevice auch kein Hexenwerk, wie sich nach intensiver Nutzungsphase deutlich herausstellte. Und schnell war man sich einig: die beste App auf dem iPad ist der Safari. Trotzdem, auch 2010 kam der Medienwandel, wie jedes Jahr.

I love my HTML5

Das zweite große Thema des Jahres war ein weiterer Hype, nämlich HTML5. Das war zwar auch schon 2009 Thema, aber 2010 konnte man mit AJAX keinen Stich mehr beim Buzzwordbingo machen, da diese Worthülse komplett durch HTML5 ersetzt wurde. Es gibt ja Leute, die fordern den HTML5-Begriff zu ersetzen durch »HTML canvas«, »HTML localStorage«, »HTML video« und so fort. Das ist sehr vorrauschauend, denn irgendwann wird uns der HTML5-Begriff natürlich auf die Füße fallen. Ich jedoch sage: who cares? Solange ich mit diesem Begriff modernes Webdevelopment mit standardkonformer Technik und slicken Seiteneffekten wie bspw. Barrierefreiheit unter die Leute bringen kann, will ich den Begriff hübsch (be)halten. 😉

Was kommt 2011

Und nun wird es Zeit in die Glaskugel zu schauen. Nachdem ich 2010 über Barrierefreiheit hauptsächlich nur gequatscht habe, wird es 2011 sicherlich wieder mehr um die praktischen Dinge gehen. Ich spüre jedenfalls Nachholbedarf. Desweiteren wird es sicherlich noch die eine oder andere HTML5-App geben, in der ich meine Finger drin habe. Ansonsten sehe ich auch 2011 wieder den Datenjournalismus weiter wachsen. Webdeveloper, die aus einem Haufen Daten eine ansehnliche Applikation stricken können, sind dabei natürlich ebenso gefragt. In dieser Richtung bewegt sich meiner Meinung nach auch das art directed blogging als die Blaupause für art directed articles. Mal sehen.

Ich wünsche nun allen Leserinnen und Lesern, die mir auch 2010 trotz mäßigen Outputs treu geblieben sind und natürlich allen die neu hinzugekommen sind, wieder frohe Ostern, nein, ein happy X-mas und einen besonders guten Rutsch nach 2011. Wo wir uns dann hier wiederlesen können. Zwischen den Jahren soll man übrigens nicht waschen, stattdessen… könnt‘ ihr ja noch schnell für mich bei der t3n-Blog-des-Jahres-Suche stimmen, muss aber auch nicht…

Der Eisbär steht im Londoner Hyde Park, fotografiert von bortescristian unter CC Lizenz, mit dem speziellen Niedlichkeits- und Kuschelfaktor extra für _ben (Happy New Year, Alder!)

Touchbedienung in der Webapp

Bildergalerie, iPad Version

Bildergalerie bei ZEIT ONLINE, Ansicht auf dem iPad

Die Touchbedienung ist einer der großen Unterschied zwischen Tablet- und Desktopcomputer. Dieses Bedienkonzept, wie es der Nutzer inzwischen auch schon aus den sog. nativen Apps gelernt hat, so sinnvoll wie möglich umzusetzen und zu nutzen, sollte auf jeden Fall Teilaufgabe einer HTML5-App sein. Leider stehen der App im Browser nicht alle Schnitsstellen und Fähigkeiten zur Verfügung, die bei der Programmierung einer nativen App genutzt werden können. Darauf kommt es aber allein auch nicht an, wie gesagt, es geht eben auch und vordringlich um das Bedienkonzepte.

Als alten Hut muss man zum Beispiel die Bedienung mit Knöpfen sehen, denn Buttons sind eben typischerweise Klickziele für den Mauszeiger und weniger für den Finger. Obwohl ein Button natürlich auch in der Touchbedienung funktionieren kann; dann muss er aber groß und gut zu treffen sein, und auch noch erkennbar, wenn der Nutzer den Finger darauf legt. Trotzdem, ein Button zum Vor- und Zurückblättern in einer Bildergalerie, ist nicht wirklich tabletgemäß.

Um es kurz zu machen: in einer Bildergalerie wie dieser hier will der Nutzer sliden – mit dem Finger das Bild aus dem Viewport schieben – und nicht Knöpfe drücken. In der Tabletversion haben wir das im Ansatz umgesetzt. Nutzt man die Seite mit dem iPad, kann man mit dem Finger von einem Bild zum nächsten navigieren. Da ich danach gefragt wurde, will ich kurz erklären wie das funktioniert (und danach auch noch dazu kommen, was noch verbessert werden muss).

Zunächst mal haben wir das Konzept der meisten Bildergalerien auf ZEIT ONLINE übernommen. Die bestehen zum Ladenzeitpunkt nur aus ihrem ersten Bild, die restlichen Bilder werden nachgeladen und versteckt horizontal rechts vom ersten Bild aufgereiht. Klickt man einen der Buttons wird der Container mit den Bildern einfach immer um Bildbreiter nach links oder rechts bewegt.

Die Bedienung durch die Buttons haben wir nur durch die Touchbedienung erweitert. Vielleicht sei kurz erwähnt wie Javascript einen solchen Touchevent sieht: es gibt die vier Events touchstart, touchmove, touchend und touchcancel. Die ersten drei laufen immer nacheinander ab, wobei touchmove solange wiederholt wird, wie man mit dem Finger über die Touchoberfläche slidet. touchcancel tritt auf, wenn eine Touchaktion abgebrochen wird, bspw. wenn man mit dem Finger über den Bildschirm hinaus geht. Die Events haben als Eigenschaften (man kennt das von Mouseevents) u.a. die Bildschirmkoordinaten, wo sie ausgelöst wurden.

Damit lässt sich also leicht erkennen, ob zwischen touchstart und touchend eine Bewegung, also ein Swipe stattgefunden hat. Hier mein seht vereinfachtes, beispielhaftes jQuery-Plugin dazu (nur als Beispiel, nicht zur Implementation gedacht oder empfohlen):

[js]
$.fn.addSomeTouch = function (options) {
var xmoved = 0, xstart = 0;
return this.each( function() {
// touchstart event
$( "img", this ).bind( "touchstart", function () {
// jeder Finger ist ein Feld im Array
// hier: 1-Finger-Geste
if( event.touches.length == 1 ) {
// Startpunkt merken
xstart = event.touches[0].pageX;
}
});

// touchmove event
$( "img", this ).bind( "touchmove", function () {
// Bewegungsentfernung messen
xmoved = event.touches[0].pageX – xstart;
});

// touchend event
$( "img", this ).bind( "touchend", function () {
// Limit für Verzögerung
if( xmoved >= 50 ) {
alert( "I was touched and will move left." );
} else if( xmoved <= -50 ) {
alert( "I was touched and will move right." );
}
// Reset
xstart = 0;
xmoved = 0;
});

$( "img", this ).bind( "touchcancel" , function() {
// bei Abbruch zurücksetzen
xstart = 0;
xmoved = 0;
});

});
};
[/js]

Wie gesagt, das ist kein Code für den Produktionseinsatz.

Und was stimmt jetzt nicht? Nun, im Moment setze ich die Fingerbewgung nur als Schalterersatz ein. D.h., die Reaktion ist dieselbe, als würde man auf den Links- oder Rechtsknopf drücken, die ehrlicherweise ja auch noch da sind. Da bleibt ja noch Raum für die Weiterentwicklung, denn so richtig responsiv ist das ja noch nicht.

Und am Schluss noch ein schöner Link dazu: bei Touching and Gesturing on the iPhone, gibt’s viele Grundlagen nachzulesen und das meiste gilt auch für’s iPad.