Verwendung von Touch-Eingaben in Browsern auf mobilen Endgeräten Seminarvortrag von David Kurtz
Inhalt Motivation Touch Events Standard Touch-Gesten Unterschiede zwischen Endgeräten Ausblick & Pointer Events Standard
Motivation
Warum Smartphones? Rund 44 Millionen Menschen in Deutschland verwenden ein Smartphone 93% davon besuchen damit das Internet 74% davon installieren zusätzliche Apps
Web- gegen Nativ-Applikation Mehr Menschen besuchen das Internet mit ihrem Smartphone, als sich zusätzliche Apps zu installieren Mobilfreundliche Internetseiten somit auch wichtig Verbessert die User Experience Hinterlässt einen guten Eindruck Derselbe Code für alle Endgeräte insbesondere für die GUI Keine kostenpflichtige Lizenz für AppStore notwendig Webapplikation ist immer auf der neuesten Version Nachteil: Internetzugang eventuell nötig Kann mittels Cache und Webseitendaten behoben werden
Was heißt mobilfreundlich? Angepasst für Smartphones Besonderheiten: Kleine Displays Meist hochkant, horizontal trotzdem möglich Bedienung per Finger und nicht per Mauszeiger Orientieren sich an native Applikationen Wird am seltensten berücksichtigt
Touch Events Standard
Touch Events Standard Basierend auf Apples API für den Safari Browser Vom W3C Gremium weiterentwickelt und 2013 als offizieller Standard veröffentlicht Von fast allen Webbrowsern unterstützt Plattformübergreifendes API Erlaubt es Fingereingaben zu erkennen und darauf zu reagieren Ereignis-basierte Implementierung für JavaScript Vergleichbar mit Mouse Events
API - Benutzerschnittstelle Low-Level Implementierung 3 grundlegende Schnittstellen: Touch Repräsentiert einen einzelnen Finger Hält Informationen über X- & Y-Koordinaten im Anzeigebereich oder der gesamten Webseite TouchList Beinhaltet Touch Objekte aller aktiven Finger TouchEvent Wird als Argument für Ereignisse übergeben, beinhaltet TouchList Objekte, Ereignistyp, gedrückte Tasten, etc. 4 Ereignistypen: touchstart, touchmove, touchend und touchcancel
API - Beispiel Touch Touch Touch TouchList touchmove Metadaten TouchEvent
Mauszeiger-Emulation Fingereingaben werden zu Mauseingaben übersetzt Dient dazu Kompatibilität für Webseiten zu erhalten, die für PCs entwickelt wurden MouseEvent Ereignisse werden auch auf Smartphones erzeugt zusätzlich zu den TouchEvent Ereignissen Keine 1:1 Umsetzung! Hovering ist nicht auf Touchscreen möglich Multi-Touch nur mit Touchscreens möglich
Touch-Gesten
Touch-Gesten Touch Events Standard stellt nur Low-Level Informationen zur Verfügung Entwicklungsumgebungen für native Applikationen besitzen hingegen High-Level implementierte Gesten Touch-Gesten müssen eigenhändig implementiert werden Nachteil: Jeder Entwickler implementiert die Gesten anders Gesten verhalten sich nicht identisch
Warum Touch-Gesten verwenden? Touch-Gesten können eine Webseite intuitiver machen, als mit Mausemulation Verschiedene Gesten werden mit bestimmtem Verhalten assoziiert Bsp.: Swipe to delete Für viele häufig verwendete Gesten wurde in der Seminararbeit behandelt: Übliche Anwendungsfälle in nativen Applikationen Kompatibilität mit Webbrowsern Beispiel für eine Ereignis-basierte Implementierung in JavaScript
Tipp-Geste (Tap) Häufig verwendete Geste Vergleichbar mit Mausklick Touch Events Standard nicht nötig click Ereignis kann verwendet werden Doppel-Tippen oder Gedrückt halten Muss via Zeitfenster mit einer Tipp-Geste unterschieden werden Kann für alternative Optionen verwendet werden, die weniger geläufig sind *Grafiken - Boris Smus 2012
Schwenkgeste (Pan) Wird in Browsern für das Scrollen verwendet kann unterbunden werden Anwendungsfall: Freies Positionieren eines Elements auf der Webseite Wischgeste (Swipe/Flick) Immer häufiger verwendet Nur semantischer Unterschied zur Schwenkgeste Bestimmte Geschwindigkeit, Richtung, Distanz, Schalter betätigen, Shortcuts (Swipe-To- Delete), etc. *Grafiken - Boris Smus 2012
Kneif- & Spreizgeste (Pinch & Spread) Normalerweise für das Zoomen verwendet kann unterbunden werden Eine nicht-skalierbare Webseite verhindert dies automatisch Multi-Touch nötig Rotationsgeste Findet wenig Verwendung in nativen Applikationen Kann zusammen mit Kneif-, Spreiz- und Schwenkgeste dazu verwendet werden Elemente frei zu transformieren ios bietet eigene API dafür bereit *Grafiken - Boris Smus 2012
Unterschiede zwischen Endgeräten
Unterschiede zwischen Endgeräten Trotz gemeinsamer API, existieren Unterschiede zwischen Endgeräten Abhängig von Betriebssystem oder Webbrowser Beispiel: Verschiedenes Verhalten in Webbrowsern, unterschiedliche Reihenfolge bei Ereignissen, etc. Ein Grund ist der nicht präzise definierte Touch Events Standard Problem: Unterschiede sind nicht dokumentiert Viele Unterschiede mussten für die Seminararbeit eigenständig analysiert werden
Ausblick
Touch Events Standard 2.0? Der Standard wurde erweitert, jedoch erschien bisher keine zweite offizielle Version W3C stoppte 2015 Arbeit an Touch Events Standard und arbeitet nun an dem Pointer Events Standard
Pointer Events Standard Basierend auf Microsofts Idee alle Formen der Eingabe zusammenzufassen Mäuse, Finger, Eingabestifte, usw. erzeugen dieselben Ereignisse Es wird vermerkt, welche Art von Eingabe verwendet wird Zusätzliche Metadaten beispielsweise: Druck des Fingers, Winkel eines Stiftes, Berührungsfläche Metadaten besitzen Standardwerte, falls vom Eingabemittel nicht unterstützt W3C - 2013
Pointer Events Standard Präzisere Definitionen Kann Unterschiede zwischen den Endgeräten unterbinden Es existieren Ereignisse für das Betreten oder Verlassen eines DOM-Elements Vorteil: Es behebt viele Probleme, die die Verwendung der Touch Events Standards erzeugt. Nachteil: Bisher wenig verbreitet Februar 2015 erste Version erschienen Hauptsächlich auf Microsoft Systemen und Browsern Apple weigert sich den Standard zu verwenden Weiterhin keine Ereignisse für High-Level Touch-Gesten
Vielen Dank