Stand der Unterstützung von W3C-Touch

Stand der Unterstützung von W3C-Touch-Events
in aktuellen mobilen und Desktop-Browsern
Philipp Schmied
Kilian Neumaier
Betreuender Professor: Prof. Dr. Küpper
16. Juni 2015
Hochschule für Technik und Wirtschaft Aalen
Fakultät Elektronik und Informatik
Studiengang Informatik
Ehrenwörtliche Erklärung
Wir versichern hiermit, dass wir unsere schriftliche Ausarbeitung und die dazugehörige Präsentation mit dem Thema “Stand der Unterstützung von W3C-TouchEvents in aktuellen mobilen und Desktop-Browsern“ selbstständig verfasst und
keine anderen als die angegebenen Quellen und Hilfsmittel benutzt haben.
Aalen, 16. Juni 2015
......................................
Philipp Schmied
......................................
Kilian Neumaier
Abbildungsverzeichnis
1
Marktanteile der Browser (März 2015) . . . . . . . . . . . . . . . .
3
2
Das Konzept der Seitenaufrufe über den Opera-Mini-Server. . . . . 12
3
Die Unterstützung von Touch-Events in den meistgenutzten Browsern und ihren Versionen [Dev] . . . . . . . . . . . . . . . . . . . . . 15
4
Pointer-Events — Verallgemeinerung von Eingaben [W3Ca] . . . . . 17
Tabellenverzeichnis
1
Mobile Browser - Teil 1 . . . . . . . . . . . . . . . . . . . . . . . . .
7
2
Mobile Browser - Teil 2 . . . . . . . . . . . . . . . . . . . . . . . . .
8
3
Desktop-Browser - Teil 1 . . . . . . . . . . . . . . . . . . . . . . . .
9
4
Desktop-Browser - Teil 2 . . . . . . . . . . . . . . . . . . . . . . . . 10
Inhaltsverzeichnis
1 Einleitung
1
1.1
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1.2
Problemstellung der Seminararbeit . . . . . . . . . . . . . . . . . .
1
1.3
Ziel der Seminararbeit . . . . . . . . . . . . . . . . . . . . . . . . .
2
1.4
Vorgehen bei der Seminararbeit . . . . . . . . . . . . . . . . . . . .
2
2 Grundlagen
3
2.1
Übersicht über die untersuchten Browser . . . . . . . . . . . . . . .
3
2.2
Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.3
Kurzbeschreibung der W3C Touch-Events . . . . . . . . . . . . . .
5
3 Analyse und Erkenntnisse
6
3.1
Vorgehen bei der Browser-Analyse . . . . . . . . . . . . . . . . . . .
6
3.2
Ergebnisse der Analyse . . . . . . . . . . . . . . . . . . . . . . . . .
6
3.2.1
Mobile Browser . . . . . . . . . . . . . . . . . . . . . . . . .
7
3.2.2
Desktop-Browser . . . . . . . . . . . . . . . . . . . . . . . .
9
3.3
Erkenntnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3.1
Mobile Browser . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3.2
Desktop-Browser . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.3
Sonstige Erkenntnisse . . . . . . . . . . . . . . . . . . . . . . 15
4 Zusammenfassung und Ausblick
16
5 Quellenverzeichnis
19
1
1.1
Einleitung
Motivation
Touchscreens sind heutzutage allgegenwärtig. Sie sind aus dem Alltag nicht mehr
wegzudenken und werden von einer Vielzahl von Menschen täglich verwendet, um
unter Anderem mit Smartphones im Internet zu surfen. Auf dem Markt sind diverse Web-Browser von verschiedenen Herstellern, welche zum Teil sehr unterschiedliche Marktanteile besitzen und technische Details abweichend voneinander umsetzen. Es gibt zudem zahlreiche Arten von Endgeräten, welche sich zum Surfen im
Internet eignen. Diese können, aber müssen nicht touchfähig sein. Trotzdem sollte
sich die Bedienung einer Webseite oder Web-Applikation auf all diesen Geräten so
gering wie möglich unterscheiden. Wenn diese Unterschiede sehr groß sind, kann
ein erheblicher Mehraufwand bei der Implementierung und Wartung die Folge sein.
Vor Allem jedoch, sollte die Bedienung browserunabhängig und fehlerfrei funktionieren. All diese Unterschiede müssen bei der Konzipierung und Implementierung
von modernen Webseiten und Web-Applikationen berücksichtigt werden, insbesondere wenn touchfähige Endgeräte das Ziel der Webseite oder Web-Applikation
sind.
1.2
Problemstellung der Seminararbeit
Im Bereich des Webdesigns müssen oftmals Webseiten speziell auf bestimmte
Browser angepasst werden, um zum Beispiel Darstellungsprobleme zu beheben.
Dies ist nötig, da nicht gewährleistet ist, dass zwei verschiedene Browser technische Details gleichermaßen umsetzen.
Dies kann bei (Touch-)Events ebenfalls zutreffen. Es besteht zudem die Möglichkeit,
dass bestimmte Touch-Events von einem Browser (noch) nicht implementiert sind
und somit auch nicht verarbeitet werden können. Es können auch gravierende Unterschiede in der Realisierung von Touch-Events bei einzelnen Browsern bestehen.
Diese Unterschiede können sich auf die Funktionsweisen, aber zum Beispiel auch
auf Performance-Aspekte der Browser auswirken. Wenn dies nicht berücksichtigt
wird, können Webseiten und Web-Applikationen für einzelne Browser eventuell
schlecht bedienbar oder sogar unbenutzbar werden.
1
1.3
Ziel der Seminararbeit
Mit der Bearbeitung dieses Seminarthemas soll überprüft werden, wie und ob die
am häufigsten verwendeten Browser die vom World Wide Web Consortium (W3C)
spezifizierten Toch-Events umsetzen, und wie dies realisiert wurde. Dies geschieht
bei Desktop-Browsern unter Windows und zudem werden einzelne mobile Geräte
und mobile Browser für die Tests verwendet. Die Unterschiede bei der Umsetzung
und den Arbeitsweisen werden behandelt und aufgezeigt. Hierzu werden die untersuchten Browser untereinander verglichen. In einem abschließenden Ausblick wird
auf aktuelle Ansätze eingegangen, die das Ziel haben die in den Problemstellungen
beschriebenen Punkte zu beheben.
1.4
Vorgehen bei der Seminararbeit
Diese Seminararbeit ist in vier Kapitel unterteilt.
Das Erste Kapitel bildet die Einleitung in diese Ausarbeitung und erläutert Motivation, Problemstellung, Zielsetzung und das Vorgehen bei der Bearbeitung dieses
Themas.
Im zweiten Kapitel dieser Seminararbeit werden die Grundlagen für das Verständnis
dieser Ausarbeitung erläutert. Zunächst werden im Grundlagen-Kapitel die untersuchten Browser und ihre Marktanteile genannt. Es folgt eine kurze Einführung in
die Thematik der Browser-Events und eine Übersicht über die zu untersuchenden
W3C-Touch-Events.
Kapitel drei — der Hauptteil — stellt zuerst das Vorgehen bei der Analyse der
Browser dar. Zudem werden die Ergebnisse der Analyse-Phase und die daraus
gezogenen Erkenntnisse und Schlüsse beschrieben.
Das letzte Kapitel schließt diese Seminararbeit mit einer Zusammenfassung und
einem Ausblick ab.
2
2
Grundlagen
2.1
Übersicht über die untersuchten Browser
Es werden hauptsächlich die folgenden Browser untersucht:
• Google Chrome (mobil und Desktop)
• Mozilla Firefox (mobil und Desktop)
• Internet Explorer (Desktop)
• Opera (mobil und Desktop)
• Safari (mobil)
Zusätzlich werden, abhängig von Thematik und verfügbaren Informationen, weitere Browser in die Untersuchungen eingebunden.
Die Marktanteile des Monats März im Jahr 2015 bezüglich [W3S] sind in diesem
Kreisdiagramm dargestellt:
Abbildung 1: Marktanteile der Browser (März 2015)
3
2.2
Events
Heutige Web-Applikationen und Webseiten bestehen nicht mehr nur aus statischem
HTML. Meistens wird JavaScript verwendet, um dynamische Webinhalte zu erstellen. Damit werden intuitive Bedienkonzepte, wie zum Beispiel die Bedienung
mittels Berührung, möglich. Um dies umzusetzen, müssen dynamische Webinhalte
Aktionen, wie zum Beispiel eine Berührung, erkennen und darauf entsprechend
reagieren.
Dieser Prozess wird mittels Events (Ereignisse) umgesetzt. Sogenannte EventHandler können auf verschiedene Elemente einer Webseite registriert werden. Beispielsweise kann ein Event-Handler auf einen Button einer Webseite registriert
sein, sodass die vom Event-Handler definierten Operationen ausgeführt werden,
sobald der Button betätigt wird.
Im folgenden Beispielcode wird ein Button definiert, welcher einen onClick-Handler
besitzt. Sobald auf den Button geklickt wird, erscheint eine Textbox mit dem Text
Hello World!.
<input value=” Button ” onclick=” a l e r t ( ’ H e l l o World ! ’ ) ; ”
type=” button ”/>
Wenn auf ein einzelnes Element mehrere Event-Handler registriert sind, werden
diese sequenziell (nacheinander) abgearbeitet [Kan].
Es gibt verschiedene Arten von Event-Handlern, welche verschiedene Event-Typen
verarbeiten. Unter Anderem gibt es diese Events und Event-Typen [Häß]:
• Maus-Events (click, mousedown, mouseup, mouseover, . . . )
• Tastatur-Events (keydown, keypress, . . . )
• Touch-Events (touchstart, touchend, touchmove, . . . )
Event-Objekte werden vom Browser erzeugt, sobald ein Event eintritt. Ein keydownHandler kann mithilfe des entsprechenden Event-Objekts zum Beispiel nicht nur
feststellen, ob irgend eine Taste gedrückt wurde, sondern auch welche Taste gedrückt wurde.
4
2.3
Kurzbeschreibung der W3C Touch-Events
Wegen der zunehmenden Verbreitung von touchfähigen Geräten, begann das W3C
im Jahre 2011 Touch-Events zu spezifizieren [W3Cb]. Mithilfe dieser Events können
touchfähige Geräte gezielt mit Web-Applikationen und Webseiten interagieren.
Vier Typen von Touch-Events wurden vom W3C spezifiziert [W3Cc]:
1. touchstart
Ein Benutzer hat einen Finger oder einen Stift auf ein Element platziert.
2. touchend
Ein Benutzer hat eine zuvor gestartete Berührung auf ein Element beendet.
Dieses Event feuert auch, wenn die Beendigung der Berührung nicht mehr
auf dem zuvor berührten Element stattfindet
3. touchmove
Ein Benutzer führt eine zuvor begonnene Berührung in Form einer Bewegung
auf dem Bildschirm fort. Die Anzahl der gesendeten touchmove-Events hängt
unter Anderem von Hardware und Implementierung ab.
4. touchcancel
Eine zuvor begonnene Berührung wird softwareseitig beendet oder der Benutzer beendet die Berührung. Dieses Event feuert auch, wenn mehr Finger
auf den Bildschirm platziert werden, als das System verwalten kann.
5
3
Analyse und Erkenntnisse
3.1
Vorgehen bei der Browser-Analyse
Desktop-Browser werden in dieser Seminararbeit stets unter Windows untersucht.
Mobile Browser werden, mit Ausnahme von Safari (iPhone, iPad), auf AndroidGeräten (Smartphones und 10“ Tablet) getestet.
Zur Analyse der verschiedenen Browser werden HTML-Seiten mit eingebettetem
JavaScript benutzt [Hlab]. Mit all diesen Seiten können die verschiedenen von
den Browsern abgefeuerten Events protokolliert und angezeigt werden. Diese Seiten werden zur Analyse von den zu untersuchenden Browsern mit verschiedenen
Geräten geöffnet.
Es gibt zwei separate Ergebnis-Tabellen für mobile Browser und für DesktopBrowser. Dabei werden die verwendeten Geräte, die dazugehörigen Betriebssysteme und Browser-Versionen aufgelistet. Die Verhaltensweisen der Browser werden
in folgendermaßen unterteilt:
• Erste Berührung
• Zweite Berührung
• Berührung außerhalb
Die Unterteilung “Zweite Berührung“ ist notwendig, da die untersuchten Browser bei wiederholter Berührung des selben Elements einer Webseite im Gegensatz
zur ersten Berührung andere Events verarbeiten. Durch die Berührung eines Elements, wird dieses Element fokussiert. Beim Verlust des Fokus werden auf diesem
Element verschiedene Event-Handler ausgeführt. Diese Events werden in der Spalte
“Berührung außerhalb“ protokolliert.
3.2
Ergebnisse der Analyse
In den folgenden Tabellen können die Ergebnisse der Analyse-Phase eingesehen
werden. Die Testwerte resultieren aus Tests mit der Seite event listener - all
events, no timings [Hlab].
6
3.2.1
Mobile Browser
Browser/
Gerät
Firefox 37.0.2,
Firefox 38.0 beta
(Nexus 4 - Android 5.0,
Nexus 5 - Android 5.1
Nexus 10 - Android 4.4.3)
AOSP-Browser 5.0.2-19
(Nexus 4 - Android 5.0)
Chrome 39.0.2171.93
(Nexus 10 - Android 4.4.3)
Chrome 42.0.23
(Nexus 4 - Android 5.0,
Nexus 5 - Android 5.1)
Opera 28.0.1764.90386
(Nexus 4 - Android 5.0,
Nexus 5 - Android 5.1
Nexus 10 - Android 4.4.3)
Erste Berührung
touchstart
touchend
mouseover
mouseenter
mousemove
mousedown
focus
mouseup
click
mouseover
mousemove
touchstart
touchend
mousedown
focus
mouseup
click
touchstart
touchend
mouseover
mousemove
mousedown
focus
mouseup
click
touchstart
touchend
mouseover
mousemove
mousedown
focus
mouseup
click
Tabelle 1: Mobile Browser - Teil 1
7
Zweite Berührung
Berührung
außerhalb
touchstart
touchend
mousemove
mousedown
mouseup
click
mouseout
mouseleave
blur
mousemove
touchstart
touchend
mousedown
mouseup
click
mouseout
blur
touchstart
touchend
mousemove
mousedown
mouseup
click
mouseout
blur
touchstart
touchend
mousemove
mousedown
mouseup
click
mouseout
blur
Browser/
Gerät
Erste Berührung
Opera Mini 8.0.1807.9181
(Nexus 4 - Android 5.0,
Nexus 5 - Android 5.1
Nexus 10 - Android 4.4.3)
Safari
(iPhone 4S - iOS 8.3,
iPad 4- iOS 8.3)
Spartan/Edge
(Nachfolger des Internet Explorer)
Windows 10 Mobile Technical
Preview
(OS version 10.0.12534.59) [Hlaa]
mouseover
mousemove
mousedown
focus
mouseup
click
touchstart
touchend
mouseover
mouseenter
mousemove
mousedown
mouseup
click
pointerover
pointerenter
pointerdown
touchstart
(gotpointercapture)
pointermove
pointerup
touchend
mouseover
mouseenter
mousemove
mousedown
focus
mouseup
click
(lostpointercapture)
pointerout
pointerleave
Tabelle 2: Mobile Browser - Teil 2
8
Zweite Berührung
Berührung
außerhalb
mousemove
mousedown
mouseup
click
Wird nicht erkannt
tochstart
touchend
mousemove
mousedown
mouseup
click
Wird nicht erkannt
pointerover
pointerenter
pointerdown
touchstart
(gotpointercapture)
pointermove
pointerup
touchend
mousemove
mousedown
mouseup
click
(lostpointercapture)
pointerout
pointerleave
mouseout
mouseleave
3.2.2
Desktop-Browser
Browser/
Gerät
Erste Berührung
Firefox 36.0
(Dell Inspiron 17 (7000 Series 7737) - Windows 8.1)
Chrome 42.0.2311.135m
(Dell Inspiron 17 (7000 Series 7737) - Windows 8.1)
Opera 29.0.1795.47
(Dell Inspiron 17 (7000 Series 7737) - Windows 8.1)
mouseover
mouseenter
mousemove
mousedown
focus
mouseup
click
touchstart
touchend
mouseover
mousemove
mousedown
focus
mouseup
click
touchstart
touchend
mouseover
mousemove
mousedown
focus
mouseup
click
Zweite Berührung
Berührung
außerhalb
mousemove
mousedown
mouseup
click
mouseout
mouseleave
blur
touchstart
touchend
mousemove
mousedown
mouseup
click
mouseout
blur
touchstart
touchend
mousemove
mousedown
mouseup
click
mouseout
blur
Tabelle 3: Desktop-Browser - Teil 1
9
Browser/
Gerät
Erste Berührung
InternetExplorer 11.0.9600.17690
(Dell Inspiron 17 (7000 Series 7737) - Windows 8.1)
Spartan/Edge
(Nachfolger des Internet Explorer)
Windows 10 Pro Technical Preview (build 10041) [Hlaa]
Zweite Berührung
mousemove
mousemove
pointerover
pointerover
mouseover
mouseover
pointerenter
pointerenter
mouseenter
mouseenter
pointerdown
pointerdown
mousedown
mousedown
getpointercapture
gotpointercapture
focus
pointermove
pointermove
mousemove
mousemove
pointerup
pointerup
mouseup
mouseup
lostpointercapture
lostpointercapture
pointerout
pointerout
mouseout
mouseout
pointerleave
pointerleave
mouseleave
mouseleave
click (ca. 300ms)
click (ca. 300ms)
pointerover
pointerenter
pointerover
pointerdown
pointerenter
touchstart
pointerdown
focus
(gotpointercapture) touchstart
(gotpointercapture)
pointermove
pointerover
pointerup
pointerup
touchend
(lostpointercapture) touchend
(lostpointercapture)
mouseover
mouseenter
mousemove mousedown
mouseup
mousemove
click
mousedown
pointerout
mouseup
pointerleave
click
pointerout
pointerleave
Tabelle 4: Desktop-Browser - Teil 2
10
Berührung
außerhalb
blur
blur
3.3
Erkenntnisse
Im Folgenden werden die Erkenntnisse, welche aus den Ergebnissen der AnalysePhase gezogen werden, dargestellt. Die Erkenntnisse werden in mobil und Desktop
untergliedert.
3.3.1
Mobile Browser
Mobile Browser wurden später als Desktop-Browser entwickelt und für mobile
Browser angepasste Webseiten waren lange Zeit keine Selbstverständlichkeit. Dies
hat zur Folge, dass mobile Browser Desktop-Events ausführen müssen, welche eigentlich nicht für diese vorgesehen waren. Beispielsweise wird grundsätzlich ein
mousemove-Event pro Touch auf einen Button abgefeuert, allein aus Kompatibilitätsgründen. Ohne dieses Verhalten müssten alle Webseiten zusätzlich speziell
auf mobile Browser angepasst werden und die Bedienung von Desktop-Webseiten
mit mobilen Browsern wäre nicht ohne Weiteres möglich. Allerdings wird nicht
jedes mögliche Event von Desktop-Browsern abgefeuert. Ein mouseenter-Event
führen zum Beispiel nur die wenigsten mobilen Browser bei einem Touch auf einen
Button aus.
Fast alle mobilen Browser feuern bei der ersten Berührung die Events in der selben Reihenfolge ab. Zuerst werden die Touch-Events touchstart und touchend
abgefeuert, gefolgt von einigen Maus-Events, focus, mouseup, und zuletzt click.
Oder anders dargestellt:
1. touchstart
2. touchend
3. mouseover
4. mousemove
5. mousedown
6. focus
7. mouseup
8. click
11
Eine Ausnahme bildet zum Beispiel der AOSP-Browser. Dieser Browser war für
lange Zeit der Standard-Browser von Android, bevor er durch Google Chrome
abgelöst wurde. Vereinzelt gibt es Unterschiede zwischen den Browsern im Hinblick
auf die Maus-Events. Firefox und Safari feuern zum Beispiel zusätzlich noch ein
mouseenter ab, und der AOSP-Browser feuert mouseover und mousemove vor den
Touch-Events ab.
Es kann zudem festgestellt werden, dass eine Berührung “außerhalb“ von Safari
und Opera Mini nicht erkannt wird, das heißt es werden hierzu keine Events abgefeuert. Bei manchen anderen Browsern wird bei derselben Aktion kein blur-Event
abgefeuert, was zu Folge hat, dass die vorher angetippte Fläche aktiv bleibt.
Auffällig ist, dass von allen getesteten mobilen Browsern bei Edge – dem neuen
Browser für Windows 10 Mobile, als einziger zusätzliche Events abfeuert werden.
Dies sind sogenannte Pointer-Events. Von diesen existieren für jedes “klassische“
Event jeweils ein passendes äquivalent für Pointer. Die zusätzliche Verarbeitung
von Pointer-Events hat zur Folge, dass etwa die doppelte Anzahl Events abgefeuert
wird, im Vergleich zu anderen Browsern. Pointer-Events werden im Kapitel 4 auf
Seite 16 näher erläutert. Edge wahrt trotzdem die Grundreihenfolge der Verarbeitung von Events, wenn die zusätzlichen Pointer-Events vernachlässigt werden.
Opera Mini verarbeitet im Unterschied zum Standard-Opera für mobile Geräte,
obwohl er auch für mobile Geräte ausgelegt ist, keine Touch-Events. Dies ist
sehr überraschend. Laut Opera [Bro] liegt dies daran, dass Opera Mini möglichst
klein und schlank sein soll. Daher werden nicht unbedingt benötigte Events vernachlässigt um Rechenkapazität zu sparen. Der extrem schlanke Browser kann
durch seine Sparsamkeit selbst auf sehr alter Hardware ausgeführt werden. Um
noch mehr Rechenleistung zu sparen, kommuniziert Opera Mini nicht direkt mit
den von Benutzer gewünschten Web-Servern, sondern schickt seine Anfrage an
einen Server des eigenen Unternehmens, der dann die eigentliche Seite von dem
Ziel-Server erfragt.
Abbildung 2: Das Konzept der Seitenaufrufe über den Opera-Mini-Server.
12
Es sei am Rande bemerkt, dass die Opera-Mini-Server jegliche vom Benutzer angeforderten Webinhalte analysieren können und zudem einen “Single point of failure“
darstellen.
Allgemein kann man bei den mobilen Browsern festhalten, dass die abgefeuerten
Events einerseits geräteunabhängig verarbeitet werden, und dass es eine grobe
Grundstruktur in der Reihenfolge der Eventverarbeitung gibt. Es gibt jedoch Unterschiede bei abgefeuerten Events, welche sich im Detail verstecken.
13
3.3.2
Desktop-Browser
Die Desktop-Browser unterscheiden sich grundsätzlich in der Verarbeitungsreihenfolge nicht von mobilen Browsern. Chrome und Opera feuern sogar genau dieselben
Events in derselben Reihenfolge wie ihre mobilen Versionen ab.
Eine Auffälligkeit ist, dass Firefox standardmäßig keine Touch-Events unterstützt.
Diese können jedoch durch setzen eines bestimmten Flags in den Optionen des
Browsers aktiviert werden.
Somit ist der Interner Explorer streng genommen der einzige getestete DesktopBrowser, welcher keine Touch-Events unterstützt. Allerdings hat sich das bei seinen
Nachfolger, dem Edge-Browser für Windows 10, geändert. Bei Edge und Internet Explorer werden, wie beim mobilen Edge-Browser, zusätzliche Pointer-Events
abgefeuert. Dies führt dazu, dass im Vergleich zu den anderen Browsern ohne
Pointer-Events ebenfalls die doppelte Anzahl an Events abgefeuert wird.
Der Internet Explorer hat dazu noch eine weitere Besonderheit aufgezeigt. Ein
Test mit Zeitmessung auf der Seite event listener - all events, including
timings [Hlab] hat ergeben, dass zwischen dem vorletzten Event und dem click
an letzter Stelle immer eine Verzögerung von 300 ms stattfindet. Diese 300 ms
sind ursprünglich dazu gedacht ein “double-tab“ zu erkennen, um den “doubletab Zoom“ ausführen zu können. Dies hat zur Folge, dass bei jedem Tippen diese
Verzögerung stattfindet. Diese 300 ms waren in allen Browsern integriert, doch
die meisten Browser haben in den aktuellen Versionen eine Möglichkeit um diese Verzögerung zu umgehen [Hlaa] (unter “Suppressing 300ms delay for touchscreen interactions“). Beispielsweise durch das Setzen des viewports auf bestimmte Größen, lassen sich Webseiten auf die eingestellte Größe beschränken und die
Verzögerung so umgehen.
14
3.3.3
Sonstige Erkenntnisse
Fast alle Browser weisen auch schwächen auf, wenn es darum geht Bewegungen
von Berührungen zu unterscheiden. Dieses Problem zeigte sich sehr oft, vor allem
weil die Tests mit einem Finger anstatt mit einem Stift durchgeführt wurden. Mit
einem Stift kann man präziser einen bestimmten Punkt treffen und sofort den Bildschirm wieder verlassen. Mit einem Finger berührt man eine relativ große Fläche
und bewegt den Finger dabei, meistens ungewollt, auch noch ein wenig. Dadurch
erkennen die Browser eine Bewegung und führen dementsprechende Events oder
Gesten aus.
Diese Bewegungen sind, wenn sie bewusst gemacht werden, in manchen Situationen sehr hilfreich. Vor allem im Hinblick auf Gesten wie Zoomen durch das
“Auseinanderziehen“ der Finger, oder das Umblättern durch wischen werden erfahrungsgemäß häufig benutzt und werden auch von allen Browser unterstützt.
Gesten wurden allerdings nicht genauer untersucht.
Zur Übersicht gibt es im Internet diverse Tabellen, welche die Unterstützung von
Touch-Events in einer Browserübersicht darstellen.
Abbildung 3: Die Unterstützung von Touch-Events in den meistgenutzten Browsern und ihren Versionen [Dev]
15
4
Zusammenfassung und Ausblick
Zusammenfassend kann festgehalten werden, dass Unterschiede bei der Umsetzung
von W3C-Touch-Events zwischen verschiedenen Browsern bestehen, welche sich im
Detail verstecken. Eine grundlegende Reihenfolge der Events lässt sich jedoch bei
allen Browsern erkennen. Eine gezielte Anpassung von Webseiten auf bestimmte
Browser ist zwar möglich, aber alle Unterschiede und Details können schwer im
Blick behalten werden. Die Verwendung von JavaScript-Frameworks, wie zum Beispiel jQuery, scheint eine gute Wahl zu sein, um eine übergreifende Kompatibilität
zu gewährleisten.
Anhand der Testergebnisse lässt sich erkennen, dass verarbeitete Events unabhängig
vom Gerät, aber in seltenen Fällen nicht unabhängig vom Softwarestand sind. Als
Beispiel eignet sich folgender Sachverhalt:
There is a bug in WebKit (affecting iOS7.1/Safari and WebView) where
mouseenter mouse compatibility event is not being fired correctly. [. . . ]
This has been fixed in iOS8. [Hlaa]
Mobile Browser führen meist aus Gründen der Kompatibilität Desktop-EventHandler wie mousemove aus, um Webseiten korrekt darzustellen. Im Kontrast dazu,
gibt es mobile Browser, welche keine Touch-Events verarbeiten 3.2.1.
16
Eine aktuelle Entwicklung im Bereich der Browser-Events ist die Spezifikation von
Pointer-Events vom W3C in Form eines Vorschlags [W3Ca]. Das Ziel ist es, eine
einheitliche API für die Verarbeitung von Eingaben zu erarbeiten. Dabei soll es
irrelevant sein, ob eine Eingabe von einer Maus, einem Touch-Stift oder einem
Finger erfolgt.
Abbildung 4: Pointer-Events — Verallgemeinerung von Eingaben [W3Ca]
Ein Pointer im Sinne dieser Spezifikation ist somit eine Verallgemeinerung der
Eingabewerkzeuge, welche im obigen Bild zu sehen sind.
Von vielen Seiten wird diese Vereinheitlichung begrüßt. Das jQuery-Team, welches
das gleichnamige JavaScript-Framework entwickelt, schreibt beispielsweise im eigenen Blog:
We’re excited to announce that the Pointer Events specification has
become a W3C Recommendation! As we’ve said before, we love Pointer Events because they support all of the common input devices today
– mouse, pen/stylus, and fingers – but they’re also designed in such a
way that future devices can easily be added, and existing code will automatically support the new device. While reaching Recommendation
status is a monumental moment, there’s still much work to do. [jQu]
Momentan werden Pointer-Events lediglich von den Microsoft-Browsern Internet
Explorer und Spartan/Edge umgesetzt. Dies kann ebenfalls den Testergebnissen
17
der Desktop-Browser entnommen werden 4. Diese Browser unterstützen zusätlich
Touch-Events, obwohl diese durch die Verwendung von Pointer-Events überflüssig
wären. Da sich Pointer-Events aber erst in der Spezifikations-Phase befinden,
werden wahrscheinlich aus Kompatibilitätsgründen zusätzlich Touch-Events unterstützt. Die Unterstützung seitens Microsoft erfolgt nicht zuletzt aus eigenem
Interesse, denn die Pointer-Events waren unter Anderem die Idee von Microsoft
[Bri]. Weitere Browser-Hersteller, wie zum Beispiel Google, werden jedoch laut aktuellen Aussagen [Tea] ebenfalls Pointer-Events in ihre Browser implementieren.
Ob Apple dies auch machen wird, ist noch offen [Bri].
Die Umsetzung der Pointer-Events von allen gängigen Browsern wäre wichtig für
den Bereich der Web-Entwicklung. Mit einer flächendeckenden Umsetzung kann
eine komplette Vereinheitlichung von Browser-Events erreicht werden und der Aufwand bei der Implementierung reduziert werden. Nicht zuletzt wird sichergestellt,
dass Webseiten und Web-Applikationen auf jedem touchfähigen Endgerät so funktionieren, wie man es bei der Konzeption und Entwicklung vorgesehen hat.
18
5
Quellenverzeichnis
[Bri]
Peter Bright. Pointer Events finalized, but Apple’s lack of support still a
deal breaker. http://arstechnica.com/information- technology/
2015 / 02 / pointer - events - finalized - but - apples - lack - of support-still-a-deal-breaker/. Aufgerufen: 28.05.2015 10:57 Uhr.
[Bro]
Tiffany Brown. Opera Mini and JavaScript. https : / / dev . opera .
com/articles/opera-mini-and-javascript/. Aufgerufen: 12.06.2015
12:14 Uhr.
[Dev]
Alexis Deveria. Touch Events. http : / / caniuse . com / #feat = touch.
Aufgerufen: 12.06.2015 12:14 Uhr.
[Häß]
U. Häßler. Javascript Events. http://www.mediaevent.de/javascript/
events.html. Aufgerufen: 24.04.2015 17:45 Uhr.
[Hlaa]
Patrick Hlauke. Touch/pointer events test results. http://patrickhlauke.
github.io/touch/tests/results/. Aufgerufen: 25.04.2015 20:29 Uhr.
[Hlab]
Patrick Hlauke. Touch/pointer tests and demos. http://patrickhlauke.
github.io/touch/. Aufgerufen: 25.04.2015 12:29 Uhr.
[jQu]
Scott Gonzalez (jQuery-Team). Getting on Point. http://blog.jquery.
com/2015/02/24/getting- on- point/. Aufgerufen: 28.05.2015 09:32
Uhr.
[Kan]
Ilya Kantor. Introduction into browser events. http : / / javascript .
info/tutorial/introduction-browser-events. Aufgerufen: 24.04.2015
17:36 Uhr.
[Tea]
Google Chromium Team. Intent to Implement: Pointer Events. https:
/ / groups . google . com / a / chromium . org / forum / # ! topic / blink dev/ODWmcKNQl0I. Aufgerufen: 28.05.2015 09:25 Uhr.
[W3Ca]
W3C. Pointer Events - W3C Recommendation 24 February 2015. http:
//www.w3.org/TR/pointerevents/. Aufgerufen: 28.05.2015 09:21 Uhr.
[W3Cb] W3C. Touch Events Publication History. http://www.w3.org/standards/
history/touch-events. Aufgerufen: 06.05.2015 10:25 Uhr.
[W3Cc]
W3C. Touch Events - W3C Recommendation 10 October 2013. http:
//www.w3.org/TR/touch-events/. Aufgerufen: 24.04.2015 18:43 Uhr.
[W3S]
W3Schools. Browser Statistics März 2015. http : / / www . w3schools .
com / browsers / browsers _ stats . asp. Aufgerufen: 24.04.2015 16:13
Uhr. Diagramm wurde mit https://google-developers.appspot.com/chart/interactive/docs/
erstellt.
19

Download Report