Konzeption und Gestaltungsprinzipien - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 90

Scroll - vertikales Ziehen des Fingers auf dem Bildschirm
Swipe - horizontales Ziehen des Fingers auf dem Bildschirm
Flick - schnelles horizontales Ziehen des Fingers auf dem Bildschirm
Auf Multitouch-fähigen Geräten, also allen modernen Smartphones und Tablets, ste-
hen dem Nutzer weitere Gesten zur Verfügung, die über das einfache Antippen hin-
ausgehen:
Pinch - zwei Finger werden auf dem Bildschirm zueinander- oder auseinanderbe-
wegt, um ein Element bzw. den Bildschirminhalt zu vergrößern oder zu verkleinern.
Rotate - zwei Finger werden auf dem Bildschirm im Kreis bewegt, um ein Element
zu drehen.
Auf iOS-Geräten haben sich außerdem folgende Gesten etabliert:
4-Finger-Swipe - vier Finger werden gleichzeitig horizontal bewegt, um auf dem iPad
zwischen Apps zu wechseln.
5-Finger-Pinch - fünf Finger werden gleichzeitig zueinanderbewegt, um auf dem
iPad eine App zu schließen.
Shake - das Gerät wird geschüttelt, um eine Eingabe oder eine Aktion zu widerrufen.
Soweit die Theorie. Wir werden im Folgenden die englischen Begriffe verwenden, da
diese als EventHandler-Bezeichnungen in JavaScript Verwendung finden.
Besonders wichtig für Touch-basierte Interfaces ist, dass alle interaktiven Elemente
von Beginn an für die Eingabe per Antippen konzipiert werden. Eine menschliche
Fingerkuppe hat in etwa eine Grundfläche von 1 × 1 cm. Alle Buttons, Eingabefelder
oder Checkboxen sollten daher mindestens genauso groß sein und über ausreichend
Abstand zu Nachbarelementen verfügen, um Fehler beim Antippen zu vermeiden.
Im Gegensatz zu einem Mauszeiger verdeckt ein Finger beim Antippen das betref-
fende Element fast vollständig, die Hand verdeckt dabei große Teile des restlichen
Bildschirms. Aus diesem Grund klappen Menüs unter iOS von unten nach oben aus -
der Inhalt soll sofort lesbar sein und nicht verdeckt werden.
Ebenso gibt es keinen MouseOver -Zustand. Menüs, die sich bei Mausberührung öff-
nen, oder Tooltips mit wichtigen Hinweisen funktionieren hier nicht.
In der Praxis - der Bau einer Schaltfläche
Aber genug der Theorie, in einem kleinen Beispiel bauen Sie mit HTML und CSS eine
Touch-fähige Schaltfläche.
1. Schritt: HTML
Zunächst gilt es, ein geeignetes HTML-Element für die Interaktion auszuwählen.
Generell könnten Sie jedes Element mit einem entsprechenden EventHandler verse-
hen und damit zu einer Schaltfläche machen. Die HTML-Spezifikation sieht jedoch