Home

konzeption eines web-frameworks zur gestenerkennung auf basis

1. 23 3 3 Implementierung eines webbasierten TUIO Clients nach Teiche etal 2009 Rusadi 2009 und lG illiauret dl 20091 2 2 ars a Ne ae le 25 3 4 Showcases f r die Verwendung von JavaScript Frameworks f r mobile Webanwendungen 27 3 5 Abbildung der Himmelsrichtungen nach Sibt e Hassan 2010 2 222222 29 3 6 Formale Beschreibung einr Kreisbewegung 2 2 2 22mm nn 29 3 7 Komponenten in TouchToolkit Khandkar und Maurer 20106 32 3 8 LASSO Geste zur Auswahl einer Objektmenge oaoa aaa 32 3 9 Midas Framework Architektur Scholliers etal 2011 2 2 2222 o oo on 33 3 10 Beispiele der Formalisierung mit GeForMT 2 2 2 2 2 oo on n nn 34 3 11 Formalisierung des Objekt und Aktionsbezugs Henzen 2010 35 3 12 Modell eines k nstlichen Neurons oaoa a 37 3 13 Nicht lineares Matching von Referenz und Testmuster in DIW 37 3 14 Gegen berstellung der Abstraktionsgrade nach Kammer etal 2010 Cooper etal 2007 Und WSC 20106 ct ae Saar ee Are ee ee here A oh ae 45 3 15 Stiftbasierte Mehrfach Selektion nach Wigdor und Wixon 2011 46 3 16 SWIPE Geste zum Bl ttern in Ansichten 00 00 00000 ee 47 3 17 Manipulation eines Video Objektes Cailliau etal 2009 222222222 47 3 18 Drehbares Kreisdiagramm mit Dojo Mobile Dojo 2011 2 222222 47 3 19 Touch Stack Widget nach Murray 2010 22 2 2 oo onen 47 3 20 Duplizieren durch Abrei en und
2. CCW 1 9 0 9 ON OFF Listing 3 6 GeForMT Syntax Spezifikation in EBNF Kammer etal 2011 Die Beziehung zu Objekten der Benutzeroberfl che wird in der focus Regel herge Schnittstellen zwischen stellt unterliegt jedoch einer eher unscharfen abstrahierten Klassifikation Dar ber Formalisierung und hinaus beinhaltet die Sprache im Vergleich zu TouchToolkit und Midas keine Aus drucksm glichkeiten ber die R ckkopplung also welche Informationen die Appli Implementierung kation erhalten soll und wie sie sie entgegen nimmt Der Entwurf dieser Schnitt stellen unterliegt plattformspezifischen Entwurfsmustern weshalb eine konkretere Formulierung an Allgemeing ltigkeit verlieren w rde HENZEN beschreibt die Inter aktionskomponenten Geste Objekt und Aktion als Dreieckskonstellation vgl Abb 3 11 die sich auf der Grundlage des Implementierungswissens formal abbilden und verkn pfen lassen Der Ansatz verfolgt eine klassenbasierte Repr sentation von Ob jekten in der der Klassenname und zugeh rige Methoden in der Formalisierung verwendet werden hnlich wie Shadows in Midas OBJEKT AKTION MP MOVE Pic PicClass gt movePic Abbildung 3 11 Formalisierung des Objekt und Aktionsbezugs Henzen 2010 35 3 Verwandte Arbeiten Hidden Markov Model 36 3 3 2 4 Zusammenfassung Gegen ber den Formalisierungsans tzen in TouchToolkit und Midas konzentriert sich GeFor
3. Canada Canada Canadian Information Processing Society 2010 Gl 10 S 245 252 URL http portal acm org citation cfm id 1839214 1839258 ISBN 978 1 56881 712 5 Apers 2011 Apers Chris WebApp NET A web application micro framework 2011 URL http webapp net com Zugriffsdatum 10 02 2012 Apple 20092 Apple iPhone User Guide Online Benuzterhandbuch f r das iPhone 3 0 2009 URL http help apple com iphone 3 mobile Zugriffsdatum 10 02 2012 Apple 2009b Apple Magic Mouse Okt 2009 URL http www apple com de magicmouse Zugriffsdatum 14 10 2011 Apple 2010 Apple Magic Trackpad Juli 2010 URL http www apple com magictrackpad Zugriffsdatum 14 10 2011 Apple 2011a Apple Safari Web Content Guide Dez 2011 URL http developer apple com library safari documentation AppleApplications Reference SafariWebContent Zugriffsdatum 28 09 2011 Apple 2011b Apple Webapps What are WebApps 2011 URL http www apple com de webapps whatarewebapps html Zugriffsdatum 04 11 2011 Apple 2012 Apple Apple iOS 2012 URL http www apple com de ios Zugriffsdatum 11 02 2012 Bieh 2008 Bieh Manuel Press Galileo Hrsg Mobiles Webdesign Konzeption Gestaltung Ent wicklung 2008 ISBN 978 3 8362 1153 6 Bimber etal 2000 Bimber Oliver Encarna o L M Stork Andr A multi layered architecture for sketch based interaction within virtual en
4. Murray 2010 wird gezeigt dass dieses Konzept auch auf Basis von Web Standards Mediia H Views i Payk udn Abbildung 3 16 SWIPE Geste zum Bl ttern in Ansichten Abbildung 3 17 Manipulation eines Video Objektes Cailliau etal 2009 Environment 26 67 1 i I 1995 20 2005 2010 Abbildung 3 18 Drehbares Kreisdiagramm mit Dojo mobile Dojo 2011 mm Abbildung 3 19 Touch Stack Widget nach Murray 2010 47 3 Verwandte Arbeiten Abbildung 3 20 Duplizieren durch Abrei en l o und Abziehen r u u are easy fuse when developing Hefining new gestures requires a level recognition of tofich data To L _ Abbildung 3 21 Kontextment in Safari unter iOS Abbildung 3 22 L schen durch Durchkreuzen l o oder Ausradieren r u u u L _ Abbildung 3 23 Schleife nach links zum Widerrufen von Aktionen nach Dorau 2011 S 160 48 umgesetzt werden kann siehe Abbildung 3 19 Kopieren und Einf gen Dem Kopieren von Objekten steht das Duplizieren sehr nahe Eine einfache M glich keit ist das zu vervielf ltigende Element mit einem Finger festzuhalten HOLD und mit einem zweiten die zu erwartende Kopie zu verschieben DRAG Nach Dorau 2011 S 156 auch als Abziehen bezeichnet Mit Abrei en benennt DORAU eine Geste die durch eine schnelle Zick Zack Bewegung auf dem Objekt ein Du
5. Poirier 2005 Dieses Prinzip ist dem Formalisierungsansatz von GeForMT vgl Kapitel 3 3 2 3 im Grunde sehr hnlich Ascheifchilsaumnore RKSTUNUR ZI 71 Tl u O1l23lt sie iT1l8lg Abbildung 3 26 Ausschnitt aus dem Symbolalphabet in Graffiti Blickenstorfer 1995 Abbildung 3 25 Gesture Search Li 2010a 49 3 Verwandte Arbeiten 50 3 4 5 Bewertung des derzeitigen Stands touchbasierter Web Anwendungen Es ist festzustellen dass sich die Entwicklung gestenbasierter Web Anwendungen in einer Findungsphase befindet Dies ist nicht zuletzt darauf zur ckzuf hren dass die softwaretechnischen L sungen noch sehr jung und nicht vollends ausgereift sind vgl Kapitel 3 2 1 Die vorgestellten Anwendungsbeispiele dieses Kapitels wei sen erste Prototypen auf die eine Gesteninteraktion auf anwendungsspezifischen Web Elementen in Betracht ziehen Derartige Konzepte m ssen sich jedoch noch in komplexeren Anwendungsbeispielen behaupten Aktuell dominieren Gesten die f r die Steuerung von Web Dokumenten wesentlich sind und vom Web Browser bereitgestellt werden Dazu z hlen vorallem SHRINK und PINCH zum Skalieren und DRAG zum Verschieben des gesamten Dokumentes vgl Kapitel 3 4 4 Diese adap tieren die Interaktionskonzepte von klassischen Fenstersystemen jedoch nur in einem gewissen Ma Es wurde w hrend der Recherche beobachtet dass sich ein Gro teil von Web Anwendungen noch nicht auf die Dom ne der mobilen Multit
6. arbeiten dennoch eng zusammen Sch fer 2011b Die Kompatibilit t von Web Anwendungen ist damit ma geblich davon abh ngig Acid Test wie gut die Web Browser die Empfehlungen des W3C umsetzen Um dies festzustel len ist eine Pr fung gegen die Spezifikationen notwendig 1998 entwickelte Todd Fahrner den sogenannten Acid Test an dem sich Browser Hersteller messen k n nen Grundlage des Tests ist eine Referenzgrafik die es m glichst fehlerfrei zu ren dern gilt Auf dieser Basis folgten weitere Versionen die vom WaSP Web Standards Project ver ffentlicht wurden und weitere Richtlinien des W3C aufnahmen Wiki pedia 2011 Aktuelle Tests ergeben eine breite Unterst tzung der Standards in den zuvor genannten Browsern vgl Wikipedia 2011 2 2 GESTENBASIERTE INTERAKTION Interaktion ist nach Lessiak 2008 S 14 ein zielorientierter Dialog der aus einer Begriff Interaktion wechselseitigen Abfolge von Aktion und Reaktion der Handlungspartner besteht Im Fokus dieser Arbeit steht der Dialog zwischen Mensch und System in dem die Geste das Mittel der Verst ndigung ist Die Geste ist eine Form der non verbalen Kommunikation und als bedeutungstra Begriff Geste gende Handlung im Dialog zu verstehen vgl Lessiak 2008 In dieser Arbeit wird der Begriff auf zweidimensionale Gesten eingegrenzt Betrachtet werden damit Hand lungen die auf einer definierten Fl che erfolgen Die wesentlichen Eigenschaften zweidimensi
7. 2010 URL http ase cpsc ucalgary ca upLoads Publications KhandkarDSM2010_v2 pdf Zugriffsdatum 11 02 2012 Khandkar und Maurer 2010b Khandkar Shahedul H Maurer Frank GestureToolkit A toolkit to simplify the multi touch application development and testing complexities Okt 2010 URL http gesturetoolkit codeplex com Zugriffsdatum 16 11 2011 Koch 2010 Koch Peter Paul Touch table 07 2010 URL http www quirksmode org mobi Le tableTouch html Zugriffsdatum 28 09 2011 Lessiak 2008 Lessiak Marius Interaktionsdesign in Webapplikationen Gestalten Bewerten Umset zen Vdm Verlag Dr M ller 3 2008 ISBN 9783836464505 Li 20103 Li Yang Gesture search a tool for fast mobile data access In Proceedings of the 23nd annual ACM symposium on User interface software and technology New York NY USA ACM 2010 UIST 10 S 87 96 URL http doi acm org 10 1145 1866029 1866044 ISBN 978 1 4503 0271 5 Li 2010b Li Yang Protractor a fast and accurate gesture recognizer In Proceedings of the 28th international conference on Human factors in computing systems New York NY USA ACM 2010 CHI 10 S 2169 2172 URL http doi acm org 10 1145 1753326 1753654 ISBN 978 1 60558 929 9 Majda 2010 Majda David PEG js Parser Generator for JavaScript 2010 URL http pegjs majda cz Zugriffsdatum 06 11 2011 Moyle und Cockburn 2003 Moyle Michael Cockburn An
8. 3 3 3 1 Zusammenfassung und Vergleich der Methoden Aus der Beschreibung der Methoden gehen drei wesentliche Aspekte der Gestener kennung hervor die in Hinblick auf den Entwurf eines sprachbasierten Web Frame works zu bewerten sind e Repr sentatives Datenmodell Es ist ein geeignetes Datenmodell zu finden das aus der formalen Gestenbe schreibung abgeleitet werden kann Insbesondere in mobilen Webanwendun gen spielt dabei der Speicherverbrauch eine wichtige Rolle Merkmalsextraktion und selektion Die elementaren Ereignisse einer gestischen Eingabe sind in Hinblick auf das Datenmodell zu verarbeiten und in eine vergleichbare Repr sentation zu ber f hren Es m ssen entsprechend relevante Merkmale aus einer Ereignisse quenz extrahiert werden Da dies zur Eingabezeit geschieht ist der Aufwand der sich damit ergibt und die daraus resultierende Verarbeitungsgeschwin digkeit ein wichtiger Faktor bei der Wahl einer Erkennungsmethode Klassifikationsverfahren Das Verfahren der Zuordnung einer Eingabe zu einer definierte Geste basie rend auf einer Vergleichslogik ist das Bindeglied zwischen Datenmodell und Merkmalsextraktion Bewertungsgrundlage sind dabei die Erkennungsrate und Performanz Verbesserungen des 1Recognizer nach LI Zusammengesetzte Gesten mit N Weitere Verfahren Bewertungskriterien 39 3 Verwandte Arbeiten Klassifikation der Prinzipiell k nnen statistische Klassifikationsverfahren HMM KNN R
9. Eine einfachere Methode Objek te aufzubauen bieten Objekt Literale Durch eine Aufz hlung von Schl ssel Wert Paaren vgl Listing 2 3 wird die Objektdefinition kompakt und bersichtlich vgl Stefanov 2011 S 42 Objekt Literale werden als Konfigurations Objekte vgl Ste fanov 2011 S 80 f r den Datenaustausch und zur Umsetzung des Singleton Entwurfmusters vgl Listing 2 3 eingesetzt Stefanov 2011 S 143 Es var object Eigenschaft property MyProperty Getter Methode getProperty function return this property Setter Methode 9 setProperty function property 10 this property property 11 12 3 AN A UN AUN Listing 2 3 Objekt Literal mit Getter und Setter Methoden 9 Singleton ist ein Entwurfsmuster das nur eine Instanz von einer Klasse erlaubt Im klassenlosen Java Script ist jedes erzeugte Objekt ein Singleton da Objekte sich nicht gleichen Stefanov 2011 5 143 JavaScript Eigenschaften Objekt Erzeugung 2 Grundlagen Konstruktoren und Wie bereits erw hnt kennt JavaScript keine Klassen sondern nur Objekte Den Prototypen Prinzip der Vererbung durch Prototypen noch lassen sich Konstruktoren definieren die Instanzobjekte erzeugen Ein Kon struktor ist in dem Fall nichts anderes als ein Function Objekt Jede Funktion be sitzt eine Eigenschaft prototype die bei der Initialisierung standardm ig auf Ob ject prototype verweist Durch Prototype
10. HTML 4 01 Specification W3C Recommendation 24 December 1999 Dec 1999 URL http www w3 org TR htm14 1 Zugriffsdatum 17 10 2011 W3C 2000 W3C Pixley Tom Hrsg Corp Netscape C Hrsg Document Object Model DOM Level 2 Events Specification Nov 2000 URL http www w3 org TR DOM Level 2 Events events htmL Zugriffsdatum 27 09 2011 vi Literaturverzeichnis W3C 2010 W3C Media Queries W3C Candidate Recommendation 27 July 2010 Juli 2010 URL http www w3 org TR 2010 CR css3 mediaqueries 20100727 Zugriffsdatum 18 10 2011 W3C 2010b W3C Schepers Doug Hrsg Web Events Working Group Charter 10 2010 URL http wwm w3 org 2010 webevents charter Zugriffsdatum 27 09 2011 W3C 2011a W3C CSS Basic User Interface Module Level 3 Editor s Draft 29 October 2011 Okt 2011 URL http dev w3 org csswg css3 ui pointer events Zugriffsdatum 10 11 2011 W3C 2011b W3C DeviceOrientation Event Specification W3C Working Draft 28 June 2011 June 2011 URL http www w3 org TR orientation event Zugriffsdatum 18 10 2011 W3C 2011c W3C Schepers Doug Hrsg Rossi Jacob Hrsg H hrmann Microsoft B Hrsg H garet Philippe L Hrsg Pixley Tom Hrsg Document Object Model DOM Level 3 Events Speci fication W3C Working Draft 31 May 2011 05 2011 URL http www w3 org TR 2011 WD DOM Level 3 Events 20110531 Zugriffsdatum 30 09 2011 W3C 20
11. ISBN 9783642031007 Dumke etal 2003 Dumke Reiner Lother Mathias Wille Cornelius Zbrog Fritz Web Engineering 1 Aufl Pearson Studium 9 2003 ISBN 9783827370808 Echtler und Klinker 2008 Echtler Florian Klinker Gudrun A multitouch software architecture In Proceedings of the 5th Nordic conference on Human computer interaction building bridges New York NY USA ACM 2008 NordiCHI 08 S 463 466 URL http doi acm org 1 1145 1463160 1463220 ISBN 978 1 59593 704 9 Echtler etal 2010 Echtler Florian Klinker Gudrun Butz Andreas Towards a unified gesture de scription language In Proceedings of the 13th International Conference on Humans and Compu ters Fukushima ken Japan Japan University of Aizu Press 2010 HC 10 S 177 182 URL http portal acm org citation cfm id 1994486 1994528 Literaturverzeichnis ELO TouchSystems 2011 ELO TouchSystems ELO Touch Systems Touchscreen Technologie M g lichkeiten 2011 URL http www eLotouch de Produkte detech2 asp Zugriffsdatum 17 10 2011 Forlines etal 2007 Forlines Clifton Wigdor Daniel Shen Chia Balakrishnan Ravin Direct touch vs mouse input for tabletop displays In Proceedings of the SIGCHI conference on Human factors in computing systems New York NY USA ACM 2007 CHI 07 S 647 656 URL http doi acm org 10 1145 1240624 1240726 ISBN 978 1 59593 593 9 Gei ler 2001 Gei ler J rg De
12. Nyg rd 2010 eine Berechnung von Winkeln f r jeden Punkt des Gestenpfads vor und ordnet ihm daraufhin einen der acht Rich tungsvektoren zu Dieses Vorgehen ist dem SiGeR Algorithmus Simple Gesture Re cognizer nach Swigart 2005 im Grunde sehr hnlich Basierend auf einer der artigen Formalisierung ist es m glich ein stringbasiertes Pattern Matching durch zuf hren wie es auch in Henzen 2010 im Zusammenhang mit dem Ansatz von STIEFMEIER ET AL beschrieben ist Grundlage f r die Erkennung von hnlichkeiten ist die Berechnung der Levensthein Distanz Nyg rd 2010 WOBBROCKETAL schlagen mit dem 1Recognizer eine koordinatenbasierte bildli che Auswertung von Einzelpfad Gesten vor Die Erkennungsmethode setzt lediglich eine Koordinatenliste als Referenzmuster voraus auf deren Basis eine hnlichkeit zu den Punkten der Eingabe Kandidat festgestellt wird Inbegriffen ist eine verein heitlichende Vorverarbeitung die eine einfachere Berechnung erm glicht und Ab weichungen bez glich der Orientierung Gr e und Position der Geste toleriert It supports configurable rotation scale and position invariance does not require feature selection or training examples is resilient to variati ons in input sampling and supports high recognition rates even after only one representative example Wobbrock etal 2007 Der Algorithmus durchl uft im Wesentlichen vier Schritte 1 Resampling Gesten werden durch ungleichm ig
13. Um dem Gorilla Arm Problem entgegenzuwirken k nnten wichtige Bedienelemente so angeordnet werden dass weniger Bewegungen n tig sind Abbildung 4 2 greift die stabilste Haltung des Tablet Ger tes auf und veranschaulicht die ergonomisch nutzbare Fl che blau markierter Bereich In diesen seitlichen Bereichen die in An lehnung an die Interaktionszonen in Henzen 2010 auch Bequemlichkeitszonen ge nannt werden k nnen beispielsweise h ufig angewendete Navigationsfunktionen wie das Bl ttern oder Scrollen der Seite umgesetzt werden siehe Kapitel 3 4 1 Das Scrollen in einem Web Dokument ist ein Grundkonzept von Web Browsern das auch auf Multitouch Ger ten adaptiert wird Insbesondere auf kleineren Dis plays gewinnt diese Funktion an Bedeutung Aufbauend auf der implementierten Navigation in Hunter etal 2010 ist auf das Potenzial des Bl tterns als Alternative oder zus tzliche M glichkeit hinzuweisen Web Dokumente die viel Text beinhal ten und aus Kapiteln zusammensetzen k nnten dadurch besser strukturiert werden Dar ber hinaus kann sich weniger Text auf einer Seite positiv auf das Leseverhalten des Anwenders auswirken Einsatzm glichkeiten des Konzepts zeigen sich berall dort wo nummerierte Linkleisten implementiert werden die auf weitere Eintr ge verweisen Eine solche Navigationsleiste ist beispielsweise in www google de im plementiert wird aber auch h ufig f r Bildergallerien verwendet Ein weiterer Optimierungsvo
14. Ziel der Diplomarbeit war es ein Framework auf Basis der Gestenbeschreibungs sprache GeForMT zu entwerfen und im Anwendungsbereich von webbasierten Um gebungen prototypisch zu implementieren Hierf r wurden zun chst gegenw rtige softwaretechnische Grundlagen der Web Entwicklung erarbeitet sowie Eigenschaf ten zweidimensionaler Gesten behandelt Unter dem Gesichtspunkt einer ger te bergreifenden Anwendung des Frameworks lag der Schwerpunkt der technischen Grundlagenbehandlung vor allem auf der Eingabedatenverarbeitung und m glichen Ans tzen der Generalisierung von Maus Touch und Stifteingaben Diesbez glich wurden die Interaktionstechniken f r eine webkonforme Gestenfor malisierung gegen bergestellt und deren Abbildbarkeit analysiert Durch die Ber ck sichtigung dieser Aspekte in der Framework Implementierung werden sowohl klas sische mausbasierte Desktop Systeme als auch ber hrungsbasierte Eingabesysteme unterst tzt Gem einer breiten und vielf ltigen Unterst tzung unabh ngig von der eingesetzten Hardware wurde erg nzend die Verarbeitung des TUIO Protokolls in Betracht gezogen Des Weiteren wurden im Kapitel der verwandten Arbeiten bestehende Web Frameworks untersucht und festgestellt dass sich die meisten L sungen auf eine Menge verbreiteter Gesten festlegt und h ufig auf eine Emulation plattformspezifischer mobiler User Interfaces abzielen Das umgesetzte GeForMT Framework konzentriert sich hingegen auf eine Er
15. hend von den in GeForMT beschriebenen Eigenschaften einer atomaren Geste wie die Art der Bewegung Bewegungsrichtung und Rotation werden Punkte erzeugt die den idealen Bewegungspfad beschreiben Dabei sind Anzahl und Abst nde der Punkte einheitlich Im Fall einer Komposition von Gestenatomen mit dem Komma Operator wie es im Beispiel gezeigt wird werden die Pfade konkateniert Resultat ist ein auf Koordinaten basiertes Referenzmuster Die Eingabe des Nutzers besteht zun chst aus einer Folge von Ereignissen aus denen lediglich die tats chlichen Koor dinaten zu entnehmen sind Eine hnlichkeit zwischen Referenzmuster und ausge f hrter Geste kann nur unter den gleichen Bedingungen festgestellt werden wes halb die Punktpfade im n chsten Schritt normiert werden wie es in Kapitel 3 3 3 73 5 Konzeption und Implementierung beschrieben wurde Danach kann die durchschnittliche Distanz zwischen den Punkt Mustern ermittelt werden Liegen mehrere Gestenbeschreibungen und damit meh rere Referenzmuster vor sind dementsprechend viele Berechnungen vorzunehmen Die Geste mit der geringsten Abweichung gilt als erkannt Der Algorithmus wird um einen Grenzwert der maximalen Abweichung erweitert damit Fehleingaben nicht als Systemanweisung interpretiert werden 2 Datenmodell Merkmalsextraktion DEFINITION LINE_S LINE_E EREIGNISPROFIL touchstart touchmove touchmove touchend TEMPLATEBUILDER LINE_S
16. oder zuletzt besuchte Seiten Verbreitet ist auch das Feature das grafische Interface des Browsers zu verstecken Vollbildfunktion Das Web Interface erscheint dadurch als alleinstehende Anwendung in einem Raum der allein durch den Display Rahmen begrenzt ist 2 2 Gestenbasierte Interaktion 2 1 3 Kompatibilit t und Standardkonformit t Das World Wide Web Consortium W3C ist eine Organisation f r die internationale World Wide Web Standardisierung von Web Technologien Ihre Ziele formuliert sie mit Web for All Consortium und Web on Everything Zum einen setzt sie sich f r die Internationalisierung und Bedienbarkeit von Web Seiten verschiedener Anwendergruppen ein Zum anderen tritt sie daf r ein das Web auf verschiedensten Plattformen und Systemen einheit lich zug nglich zu machen Jede Organisation kann eine Mitgliedschaft im W3C beantragen und aktiv auf die Entwicklung der Empfehlungen Einfluss nehmen Aufgrund schleppender Entwicklungen der Standards und Uneinigkeit ber die Ar Initiative der beit des W3C im Zeitraum um 2004 gr ndeten die f hrenden Browser Hersteller die growser Hersteller Arbeitsgruppe VVHATWG Web Hypertext Application Technology Working Group die um die Akzeptanz der Browser Hersteller und einen schnelleren Fortschritt be m ht ist Sie begannen einen unabh ngigen Entwurf eines HTML Standards zu erar beiten der dem W3C unterbreitet wurde siehe Kapitel 2 3 2 Die beiden Initiativen
17. r 3 3 Interpretation von Gesten die Art der Gestenerkennung ON und OFF Die Wiederverwendung des Bezeich ners bereits definierter Gesten wie es in TouchToolkit und Midas m glich ist wird hier ebenso in Betracht gezogen vgl Kammer etal 2011 definition a z A Z CLa z A Z gesture operator gesture name complex gesture atomfocus focuslist focus function operator relation atom identifier vector shape direction rotation integer time name compLex complex time relation gesture operator gesture function C atomfocus atomfocus atomfocus atomfocus atom atom focuslist t focus focus a l s l o integer m integer integer F integer H integer B 4 Pd ey SYNC 1 JOIN SPLIT CROSS gt CONNECT identifier vector _ direction shape _ direction _ rotation MOVE POINT DEPOINT HOLD LINE CIRCLE SEMICIRCLE NORTH EAST SOUTH WEST IPN TPE IT S Tew NORTHEAST SOUTHEAST SOUTHWEST NORTHWEST l NE I SE SW I NW I N I E I S I W CLOCKWISE CW COUNTERCLOCKWISE
18. 2011 URL http mootools net forge p mobi Le Zugriffsdatum 15 11 2011 Qooxdoo 2011 Qooxdoo gooxdoo 1 5 Mobile Framework Juli 2011 URL http manual gqooxdoo org 1 5 pages mobile mobile_overview html Zugriffsdatum 14 11 2011 Robbins 2010 Robbins Jennifer N Lang Jorgen W Hrsg HTML amp XHTML Taschen kurz amp gut Taschenbibliothek O Reilly 4 Auflage O Reilly Media 2010 ISBN 978 3 89721 558 0 Robinson 2010 Robinson Tom iPhone Light Table 2010 URL http tLrobinson net projects iphone light table Zugriffsdatum 25 11 2011 Rubine 1991 Rubine Dean Specifying gestures by example In SIGGRAPH Comput Graph 25 1991 July S 329 337 URL http doi acm org 10 1145 127719 122753 ISSN 0097 8930 Rusadi 2009 Rusadi Fajran I Multitouch browser Juli 2009 URL http log fajran web 1d 2009 06 05 multitouch browser Zugriffsdatum 20 01 2012 TUIOjs und npTuioCli ent Saffer 2008 Saffer Dan Designing Gestural Interfaces 1 O Reilly Media 11 2008 ISBN 9780596518394 Samsung 2012 Samsung Samsung mobile Smartphones 2012 URL http smartphones samsung de Zugriffsdatum 25 01 2012 Sch fer 2011a Sch fer Mathias Einf hrung in JavaScript 2011 URL http molily de js Zugriffsdatum 18 08 2011 Sch fer 2011b Sch fer Mathias F r mehr Qualit t im Web Webkrauts Was sind Web Standards Aug 2011 URL http w
19. Abschnitt 2 3 4 zum Einsatz die den jeweiligen Entwicklungsbereichen zuordenbar sind 2 3 2 Inhalte und Struktur mit X HTML Die Hypertext Markup Language HTML ist eine Auszeichnungssprache um die In halte einer Web Seite zu strukturieren und semantisch einzuordnen Dumke etal 2003 Der erste Entwurf auf Basis der Metasprache SGML Standard Generalized Markup Language geht auf die Entwicklung des Hypertext Systems von Tim Berner Lee zur ck vgl Kapitel 2 1 1 Die Version HTML 4 01 W3C 1999 die 1999 vom W3C verabschiedet wurde ist nach Aussage in Robbins 2010 die am weitesten verbreitete Spezifikation Es folgte eine Neuformulierung der Auszeichnungssprache auf Basis der strengeren Regeln von XML Extensible Markup Language genannt XHTML Extensible Hypertext Markup Language In dem gemeinsamen Projekt des W3C und der WHATWG wird aktuell an HTML 5 als Nachfolger Spezifikation zur HTML Version 4 gearbeitet die voraussichtlich 2014 verabschiedet wird vgl W3C 2011e 7User Experience z dt Bedienerlebnis ist ein von Donald A Norman gepr gter Begriff als Designaspekt interaktiver Anwendungen Dorau 2011 2 3 Softwaretechnologische Grundlagen Die Auszeichnungen erzeugen Elemente der Benutzeroberfl che die sich wie folgt grob klassifizieren lassen Strukturelemente zeichnen Seitenbereiche und inhaltliche Zusammenschl sse aus Sie werden demnach vorallem f r die Gruppierung von Ele menten verwendet Eine
20. Abziehen 2 2 2 48 3 21 Kontextmen in Safari unter iOS 2 0 0 a a a a a a 48 3 22 L schen durch Durchkreuzen oder Ausradieren 2 2 22 aa a a 48 3 23 Schleife nach links zum Widerrufen von Aktionen nach Dorau 2011 S 160 48 3 24 Best tigen in einem Dialog 2 2 2 2 En En nn 49 3 25 Gesture Search Li 20 108 s 4 eevee be cB ahs deta A al oe eel ea m 49 3 26 Ausschnitt aus dem Symbolalphabet in Graffiti Blickenstorfer 1995 49 4 1 Ubliche Bedienung eines Multitouch Tablets 2 2 2 2 con 51 4 2 Bequemlichkeitszonen 2 2 2 2 nn 52 4 3 Elemente des Ereignisprofils von Gesten 2 2 2 nn n nn 53 Abbildungsverzeichnis 4 4 Beispiele f r die Formalisierung der r umlichen Anordnung zusammengesetzter Gesten 4 5 Spiralforrmige Bewegung 2 4 4 ea esse mn ee eben 4 6 Geschlossenes Rechteck 0 aa a 4 7 Formalisierung von Interaktionsbereichen zur Spezifizierung des Objektkontext 4 8 Herstellung des Objektbezugs von Gesten au erhalb des Erkennungsbereichs 5 1 Module im Namensraum GeForMT und verwendete Bibliotheken 5 2 Adaption der Parserimplementierung 2 2222 22 nn nn nn 5 3 Adaption der Selector Engine Sizzle 2 22 on En nn 5 4 Zentrales Datenmodell 2 2 0 000000 0 a 5 5 TemplateBuilder Modul 2 0 020200 a 5 6 Erkennung pfadbasierter Gesten basierend auf GeForMT und dem Verfahren nach Wob brocketials 2007 4 sate ES a Be re ee
21. E HIT ENTER LEAVE RELEASE IIIT Folge von Mare Ereignissen Objekt y f Sof 9 l CSS Sea SS ee B Registrierung Ausf hrung Abschluss Abbildung 2 2 Einheiten des Ereignisprofils einer zweidimensionalen Geste Die Einheiten eines Ereignisprofils sind wie in Abbildung 2 2 dargestellt einzuord Elementare Ereignisse nen und werden im Folgenden erl utert vgl Dorau 2011 5 174 ff Der Begriff Kontakt wird dabei als verallgemeinerte ger teunspezifische Bezeichnung f r eine registrierte Aktion verwendet e HIT Ber hren Es wird ein Kontakt hergestellt der je nach Eingabemodalitat der Ber hrung auf einer sensitiven Oberfl che dem Dr cken einer Maustaste oder einer bestimmte Hand Konfiguration bei ber hrungslosen Eingabesyste men entspricht 2 Grundlagen Einfachste Geste Objektorientierte und freie Gesten Einzelpfad Gesten und zusammengesetzte Gesten Statische und dynamische Gesten ENTER Eintreten Das Eintreten bezieht sich auf einen r umlichen Geltungs bereich an dessen R ndern das Ereignis ausgel st wird sobald eine Bewegung in den Bereich hineinf hrt e MOVE Bewegen Ausgel st durch die Ver nderung der Position repr sen tiert das Ereignis eine Bewegungseinheit Eine Sequenz von Bewegungs Ereignissen beschreibt einen Bewegungspfad e LEAVE Austreten Das Ereignis ist vergleichbar mit ENTER setzt aber voraus dass ein Kontakt innerha
22. Implementierung eines Gestenerkennungs Frameworks umzusetzen vgl Cheng etal 2009 Khandkar und Maurer 2010a Kammer etal 2010 und Henzen 2010 Allgemeine Architektur nach ECHTLER ET AL 21 3 Verwandte Arbeiten Hardware und Hardware Abstraktion 22 Transformation Interpretation und Applikation Gliederung der folgenden Kapitel Die Hardware Ebene bildet die Basis eines jeden Eingabesystems Bez glich Weban wendungen kommen verschiedene Eingabeger te zum Einsatz Relevant sind dabei haupts chlich die Eingabetechniken Wie in Kapitel 2 2 1 differenziert sind Maus Stift und Touch Eingaben zu unterscheiden Die Interaktion mit der Hardware er zeugt Daten die von der dar berliegenden Schicht Hardware Abstraction Layer in ein ger teunabh ngiges Format bersetzt werden Als Austauschformat zwischen Multitouch Eingabenger ten und Verarbeitungsschichten wird h ufig das TUIO Pro tokoll verwendet vgl Khandkar und Maurer 2010a G rg 2009 Cheng etal 2009 und Henzen 2010 Das auf OSC Open Sound Control basierte Protokol berliefert sowohl Ber hrungspunkte und deren Parameter als auch physische Ob jekte die auf der sensitiven Oberfl che erkannt werden Tangibles TUIO wird in Kapitel 3 2 2 nochmal aufgegriffen Die Transformationsschicht dient nach Echtler und Klinker 2008 S 2 vor allem der Integration des Kalibrierungsprozesses So gesehen bildet die Schicht eine Program
23. JavaScript Framework 2011 URL http www sencha com products touch Zugriffsdatum 30 09 2011 Sibt e Hassan 2010 Sibt e Hassan Zohaib moousture Jan 2010 URL http maxpert github com moousture Zugriffsdatum 30 09 2011 Sizzle 2012 Sizzle Sizzle JavaScript Selector Library 2012 URL http sizzlejs com Zugriffsdatum 10 01 2012 Smus 2011a Smus Boris Developing for Multi Touch Web Browsers April 2011 URL http www htmL5rocks com en mobile touch html Smus 2011b Smus Boris MagicTouch Spec compatible touch events based on npTuioClient call backs April 2011 URL https github com borismus MagicTouch Zugriffsdatum 03 11 2011 Stefanov 2011 Stefanov Stoyan JavaScript Patterns 1 O Reilly Media 2011 ISBN 978 3 89721 598 6 Swigart 2005 Swigart Scott Easily Write Custom Gesture Recognizers for Your Tablet PC Applicati ons Nov 2005 URL http msdn microsoft com en us lLibrary aa480673 aspx tbconcustomgesturerecooverview Zugriffsdatum 12 08 2011 Teiche etal 2009 Teiche Alex Rai Ashish K Yanc Chris Moore Christian Solms Donovan Cetin G rkem Riggio Justin Ramseyer Nolan D Intino Paul Muller Laurence Khoshabeh Ramsin Bedi Rishi Bintahir Mohammad T Hansen Thomas Roth Tim Sandler Seth Cetin G rkem Hrsg Bedi Rishi Hrsg Sandler Seth Hrsg Multi touch Technologies Natural User Interface Group 5 2009 W3C 1999 W3C
24. Kammer etal 2010 werden sprach basierte Frameworks auf Basis dieses Architekturmodells vorgestellt Bez glich eines webbasierten Modells werden die Architekturschichten spezifiziert und in Abbildung 3 1 vergleichsweise dargestellt rechts im Bild EEE RE EEE EEE E aee ret FERIEN ER Widget Layer Application Webanwendung Registry 4 T Events Registry J T Events Registry L T Gesture Events Gesture Recognition Framework Interpretation Gesture Recognition ren egistry Ow Level Events Framework sf NL BR nee soe SE W3C ECMA Standards Transformation Web Browser Finger Hand Positions T Low Level Data T Low Level Data T i i Windows i iOS Hardware Abstraction Device Drivers Tracker Linux Betriebssystem Android OS X Symbian Hardware Hardware Cog Li g L PE EEEREN IA EEE ATE E a ey ee L vorranging Maus Interaktion Touch Interaktion i Abbildung 3 1 Architekturmodelle nach Echtler und Klinker 2008 links Kammer etal 2010 und Khandkar und Maurer 2010a mittig gegen ber einem webbasierten Ansatz eines Gestenerkennungs Frameworks rechts Nach Echtler und Klinker 2008 gliedert sich ein Gestenerkennungs Framework in vier Schichten Indem Software Komponenten der Eingabeverarbeitung entkoppelt werden wird eine Modularisierung herbeigef hrt die letztlich die Erweiterungen und den Austausch von Komponenten erm glicht Der Ansatz ist f r viele Vorbild um eine ger teunabh ngige und anwendungsunspezifische
25. Layer wird auf Basis antrainierter Gewichtungen die eigentliche Klassifikation der Geste vorgenommen Jedes Neuron der Ausgabeschicht Output Layer repr sentiert letztlich eine Klasse von Gesten Das KNN ist ein leistungsf hi ger Ansatz der Gestenklassifikation der sich hnlich wie HMM durch Training zu optimieren ist Wood 2008 W hrend k nstliche neuronale Netze Muster und ihre Verarbeitung erst erlernen m ssen baut Fuzzy Logik auf vorhandenem Wissen auf Im Gegensatz zur Pr di katenlogik in der eine klare Abgrenzung von wahren und falschen Aussagen vor genommen werden kann f hrt Fuzzy Logik unterschiedliche Zugeh rigkeitsgrade zu einer Eigenschaft ein um Aussagen zu approximieren vgl Wood 2008 Die Theorie wird in der Gestenerkennung daf r genutzt absolute Messdaten in un scharfe Formalismen zu berf hren In Bimber etal 2000 wird eine Klassifikation von geometrischen und dynamischen Eigenschaften von Gesten wie zum Beispiel die L nge eines Gestenpfads die relative Ausrichtung oder Aussagen ber die Ge radlinikeit einer Bewegung vorgenommen Jede Eigenschaft ist ber vergleichbare Wertemengen definiert die eine graduelle bereinstimmung einf hren HENZEN beschreibt einen hnlichen Ansatz nach JORGE ET AL der auf Basis dieser Theo rie ebenso eine Merkmalsextraktion vornimmt und die passende Geste ber einen Entscheidungsbaum ermittelt vgl Henzen 2010 Dynamic Time Warping DTW ist ein Template
26. Objekt Literals Der erste Ansatz ist in dieser Hinsicht die einfachere Methode da sie sich durch eine kompakte Schreibweise und mehr Flexibilit t aus zeichnet Die bersichtlichkeit und Zuordenbarkeit ist jedoch diskutabel Der zweite Ansatz stellt sich als praktikabel heraus wenn es um die Erweiterbarkeit und Wieder verwendung von Gestendefinitionen geht In Kapitel 4 2 7 wird das Potential eines Konfigurations Objektes nochmals aufgegriffen 4 2 7 Konfigurationsparameter Im vorangegangen Abschnitt wird mit dem Ansatz eines Objekt Literals nahe ge Interoperabilit t legt die Gestenbeschreibung in Form eines GeForMT Ausdrucks von der framework spezifischen Konstruktion zu separieren Es wird demnach der Standpunkt vertreten dass die Beschreibungssprache keine softwaretechnischen Konzepte abbilden sollte zum Beispiel eine Handler Funktion vgl Abschnitt 4 2 6 die die Interoperabilit t auf eine bestimmte Programmiersprache oder ein bestimmtes Gestenerkennungs verfahren einschr nken Aus diesem Blickwinkel ist auch die Verwendung von Se lektoren f r den Objektbezug vgl Abschnitt 4 2 5 in weiterf hrenden Arbeiten zu berdenken und gegebenenfalls zu abstrahieren Als ebenso nachteilig wird die Erweiterung von Sprachbausteinen gesehen die das Framework konfigurieren Ein Beispiel hierf r ist die Einf hrung der Sprachbaustei ne ON und OFF vgl Kapitel 3 3 2 3 um die Strategien der Gestenerkennung zu bestimmen Dieser P
27. Ziffer 1 Dies ist jedoch nicht auf die Komposition von kreisf rmigen Gesten anwendbar wie zum Beispiel eine spiralf rmige Bewegungsform die in Kapitel 4 2 4 in Be tracht gezogen wurde Deutlich wird das Problem vorallem in zusammengesetz ten Gesten deren Pfade sukzessiv verarbeitet werden Symbolhafte Gesten wie bei spielsweise D beschrieben durch LINE_S SEMICIRLCE_S und P beschrieben durch LINE_S LINE_S SEMICIRLCE_S k nnen nicht unterschieden werden Eine Aufl sung dieser Problematik erfordert Erweiterungen die die L nge und den Umfang von Pfaden in die Erkennung einbeziehen In Hinblick auf eine vollst ndige Implementierung der in GeForMT definierten Spra choptionen besteht ebenso noch Erweiterungsbedarf Eine Unterscheidung zwischen asynchroner und synchroner Komposition von Gesten wird beispielweise nicht um gesetzt und erfordert Erweiterungen die zeitliche Dimensionen ber cksichtigen In Ermangelung einer Zeiterfassung wird in dieser Version auch das l ngere Halten eines Kontaktes HOLD nicht erkannt Die Visualisierung von Ber hrungen und Bewegungspfaden wird im Framework wei testgehend unabh ngig vom Ausf hrungskontext definierter Gesten implementiert In weiterf hrenden Arbeiten k nnten Feedback und Geste st rker in Beziehung ge setzt werden um in der Art der Visualisierung zu differenzieren Ein Ansatz in diese Richtung zeigt das Verfahren bei zusammengesetzten Gesten in dem die Erwartung weiterer Eingabe
28. ausgef hrt wird und diesen Schwung auf die Scrollgeschwindigkeit bertr gt Dorau 2011 S 138 ff F r die indirekte Eingabe von Gesten beispielsweise mit dem Trackpad oder einer Multitouch Maus haben sich f r das Scrollen Mehrfinger Gesten durchgesetzt die sich von der Positionierung des Cursors mit einem Finger abheben vgl Apple 2010 und Apple 2009b DORAU verweist in diesem Zusam menhang auf das Potenzial hin die Anzahl der Finger f r die Variation der Scrollge schwindigkeit zu nutzen Mehr Finger betonen in dem Fall die Absicht einer Geste 3 4 Applikation und sind ein Multiplikator f r die Geschwindigkeit Dorau 2011 S 139 Ange lehnt an das sogenannte Clickwheel dass mit Apples iPod Ger ten bekannt gewor den ist stellt eine kreishafte Bewegung SPIN zum Durchsuchen von Listen ebenso eine Option dar Dorau 2011 S 139 und Saffer 2008 Das Bl ttern SWIPE von Ansichten ist eine diskrete Variante des Scrollens und eignet sich besonders f r Anwandungsfalle in denen der Nutzer zu festgelegten Navigationspunkten gef hrt werden soll Beispielsweise beim Durchsuchen einer Bildergallerie oder die nderung ganzer Ansichten HUNTER ET AL implementieren diese Geste als Grundnavigation ihrer Webanwendung Hunter etal 2010 Statt die Seiten vertikal zu scrollen wer den sie hnlich wie in einem Buch gebl ttert Abbildung 3 16 veranschaulicht dieses Verhalten Skalieren und Zoomen Der Bedeutungsunte
29. ausgeliefert und unmittelbar interpre tiert Dumke etal 2003 S 235 Sie werden der Reihenfolge ihrer Einbindung ent sprechend ausgef hrt Konsequenz dessen ist dass ein Skript auf Objekte vorher eingebundener Skripte Zugriff haben kann jedoch nicht auf nachfolgende Sch fer 201 1a Weitere Eigenschaften der Sprache sind der objektorientierte klassenlo se Ansatz und das Vererbungskonzept ber Prototypen siehe Abschnitt 2 3 5 Bis auf f nf primitive Datentypen number string boolean null undefined wer den alle Datenstrukturen selbst Funktionen als Objekte beschrieben die wiederum Eigenschaften und Methoden besitzen Zu unterscheiden sind native Objekte und Host Objekte Native Objekte sind entweder von ECMAScript bereitgestellte Objekte Object Array Function u w oder selbst definierte Objekte Host Objekte hin gegen werden von der Browser Umgebung bereitgestellt DOM Objekte window document u w Stefanov 2011 2 3 5 JavaScript Coding Muster STEFANOV erkl rt dass wichtige Entwurfsmuster wie Strategy Factory oder Obser ver in einer schwach typisierten Sprache wie JavaScript nur schwer abzubilden sind Interessanter erscheint daher ein Einblick in die sogenannten Coding Muster zu ge ben die JavaScript spezifisch sind und sich f r bestimmte Probleme bew hrt haben Stefanov 2011 S 2 Prinzipiell werden eigene Objekte durch new Object erzeugt und deren Eigen schaften und Methoden im nachhinein definiert
30. bei diesem Modell konkret um ein eventbasiertes Schichtenmodell handelt Auf Systemebene physical werden elementare Eingaben wie ein oder mehrere Kontakte auf der sensitiven Oberfl che verarbeitet Weiter hin sind ger tespezifische Eingabeparameter zu ber cksichtigen wie die Gr e und Form des Kontaktes oder variierender Druck Auf n chsth herer Ebene gestura werden komplexe Gesten die sich aus der Kompositionen elementarer Ereignisse ergeben zusammengefasst Erst im representational Layer erfolgt eine semantische Anreicherung die der Aufgabe gerecht wird Die Trennung zwischen gestural und representational ist vorallem deshalb wichtig weil eine 1 zu N Beziehung zwischen den Schichten vorliegt die sich vorallem durch Variationen der Ausf hrung ergibt vgl Hinrichs und Carpendale 2011 Beispielsweise ist die repr sentative Geste die bez glich der formalen Umschreibung ZOOM die Intention des Anwenders und die resultierende Aktion einbezieht durch eine PINCH Geste ein DOUBLE TAP oder Modell nach KAMMER ET AL Modell nach COOPER ET AL Abstraktionsgrade des W3C 45 3 Verwandte Arbeiten options Item 1 Item 3 Abbildung 3 15 Stiftbasierte Mehrfach Selektion nach Wigdor und Wixon 2011 46 eine andere anwendungsspezifische Geste auszuf hren Au erhalb des technischen Systems sind die Assoziationen zum Bedienelement entscheidend f r die Wahl einer Geste intentional ge
31. derselben Finger ID im Zeitrahmen von 500 Millisekunden die mindestens f nf Cursor Events beinhal tet F r Relationen bez glich der Zeit Dimension und Bewegung einer Geste exi stieren entsprechende Operationen Die Operation movingLeft bedingt beispiels weise eine links ausgerichtete Bewegung M glich sind auch movingRight movin gUp und movingDown Analog k nnen Operationen wie tEqual tMeets tBefore tAfter und tContains f r temporale Relationen und sDistance sNear sNear LeftOf sNearRightOf und sInside f r r umliche Relationen angewandt werden Sind alle definierten Bedingungen der Regel erf llt wird eine Aktion ausgel st die nachfolgend mit dem vorangestellten Zeichen gt beschrieben ist zZ z_m moimebocoe os cc mm mz Cdefrule FlickLeft eventList L lt ListOf Cursor same id within 500 min 5 movingLeft eventList gt assert FlickLeft events eventList Listing 3 5 Aufbau einer Regel am Beispiel der FLICK Geste Scholliers etal 2011 Architektur Regel Syntax 33 3 Verwandte Arbeiten Objektbezug und Komposition Sprachbausteine nach 34 KAMMER ET AL Gestenerkennungs Framework basierend auf GeForMT W hrend TouchToolkit den Objektbezug au erhalb der Beschreibungssprache her stellt vgl Khandkar und Maurer 2010a konstruiert Midas sogenannte shadow facts die in der Definition angewendet werden k nnen Shadow facts bilden die At tribute
32. ebenso wie es dem na t rlichen Wesen von Stiften und Ber hreingaben widerspricht den Tracking Zustand einer Maus zu emulieren Stifteingabe Pr zision und Erreichbarkeit Pfadbasierte Gesten 43 3 Verwandte Arbeiten Fat Finger Problem Verdeckung Gorilla Arm Problem Differenzierung von Anweisung und Aktion 44 Dimension der gestenbasierten Interaktion 3 4 2 Besonderheiten des Multitouch Interface Wie zu Beginn dieser Arbeit bereits erkl rt wurde ist die Interaktionskonzepte von Web Anwendungen historisch bedingt auf Eingabeger ten abgestimmt die das Zu standsmodell einer klassischen Maus abbilden F r die Adaption auf ber hrungs basierte Eingabeschnittstellen sind Besonderheiten des Multitouch Interface zu be trachten Das Fat Finger Problem bezeichnet die Herausforderung des Interaktionssystems die gr ere Kontaktfl che des Fingers in eine pr zisere Zeigeposition zu bersetzen Nach Dorau 2011 S 189 wird dazu meist der geometrische Mittelpunkt der Kon taktfl che berechnet Es existieren jedoch unterschiedliche Verfahren f r das Tracken eines Kontaktes vgl Holz und Baudisch 2011 Grafisch l sst sich das Problem mit der vergr erten Darstellung interaktiver Elemente l sen Diesem Ansatz steht je doch der Trend zu kleineren Touchscreens in mobilen Ger ten gegen ber vgl Wig dor und Wixon 2011 S 74 ff Nach Dorau 2011 S 191 f kann mit einem nicht sichtbaren Toleran
33. einfach gehaltenen in formativen Web Seite umgesetzt Optimiert ist die Implementierung f r die Bedie nung auf einem iPad Version 4 3 3 Das ger te bergreifende Framework Konzept erlaubt die Anwendung der umgesetzten Gesten jedoch auch f r mausbasierte Ein gabesysteme In den Abbildungen 5 14a und 5 14a wird der Aufbau des Web Anwendung deutlich Angelehnt an eine simple Unternehmenspr sentation wur den insgesamt f nf Seiten umgesetzt die wie gewohnt ber das Hauptmen in der oberen Leiste aufgerufen werden k nnen GeForMT js sample GeForMT js sample Lorem ipsum Lorem ipsam a Bl ttern Funktion im Anwendungsprototypen b Anwendung symbolischer Gesten GeForMT Definition GeForMT Definition des Fragezeichen Symbols 1FCLINE_WC nextPageLabel ON 1FCSEMICIRCLE_SE LINE_S 1FCPOINT OFF Abbildung 5 14 Interface des Anwendungsprototypen Alternativ k nnen diese Seiten ber die seitlichen Pfeilmarkierungen durchgebl t tert werden Die darauf auszuf hrende Geste ist der Bedienung eines Lesezeichens in einem Buch nachempfunden Entsprechend m ssen die Marken ausreichend weit vom Seitenrand weggezogen werden um auf die verlinkte Seite zu gelangen vgl Abbildung 5 14a Die Bl ttern Funktion bezieht sich in diesem Fall auf die Haupt seiten Die Reihenfolge orientiert sich an der Auflistung der Men punkte Denkbar w re diese Art der Nutzerf hrung vorallem auf m glichen Unterseiten in Anlehnung an eine St
34. f r web basierte Software ist noch weitgehend unerforscht und erfordert praktische Anwen dungsbeispiele Eine H rde bei der Entwicklung innovativer Bedienkonzepte stellt jedoch die verh ltnism ig komplizierte Umsetzung einer Gestenerkennung dar Es existieren Bibliotheken die sich des Problems annehmen Deren Fokus liegt jedoch in der Bereitstellung vordefinierter anwendungstauglicher Gesten oder sind meist auf einen bestimmten Anwendungsbereich spezialisiert Es fehlt demnach an gene rischen Ans tzen die es Webentwicklern erlauben anwendungsspezifische Gesten ebenso einfach zu implementieren wie die Struktur und das Layout einer Websei te Grundlage eines solchen Ansatzes ist eine Gestenbeschreibungssprache die sich aus verarbeitbaren Regeln zusammensetzt und darauf aufbauend erlaubt den Er kennungsprozess von der Konzeption einer Geste zu trennen 1 2 ZIELSTELLUNG Aufbauend auf der Gestenbeschreibungssprache GeForMT Gesture Formalization for Multi Touch Kammer et al 2010 ist es das Ziel dieser Diplomarbeit ein Gesten erkennungs Framework f r Web Anwendungen zu konzipieren In Hinblick auf eine plattform bergreifende Verwendung wird dabei auf standardisierten Web Techno logien aufgebaut Dies beinhaltet auch die Betrachtung einer ger te bergreifenden Eingabeverarbeitungsmethodik die eine umfassende Unterst tzung der in Web Anwendungen verwendeten Eingabeger te und Interaktionstechniken gew hrlei sten soll Hierzu is
35. fung mit dem Stern Operator eine zeitgleiche Ausf hrung von Bewegungen defi niert werden vgl Abb 3 10d Die Komposition von Gesten Atomen l sst viele Va riationen zu Durch Relationen werden genauere Bedingungen bez glich der Bezie hung verkn pfter Gesten festgelegt Der Ausdruck CROSS bedingt beispielsweise dass sich die Pfade der Gesten berschneiden Abb 3 10c JOIN und SPLIT for dern dass sich die Kontakte aufeinander zu oder voneinander weg bewegen Abb 3 10d Der Fokus beschreibt den Geltungsbereich auf dem eine Geste definiert wird Er kann sich ber ein einzelnes Objekt eine Objektmenge oder die gesamte Benutzeroberfl che erstrecken Dp oR BE T E L AL tL JL a 2F MOVE d JOIN LINE LINE c SEMICIRCLE_N_CCW CROSS LINE_S LINE_E Abbildung 3 10 Beispiele der Formalisierung mit GeForMT Die Entwicklungsarbeit an dem Gestenerkennungs Framework GeRahMT GeForMT Rahmenwerk f r Multitouch in Henzen 2010 deckt Schwachstellen der Formali sierung auf aus denen entsprechende Spracherweiterungen resultieren Der aktu elle Stand der GeForMT Syntax stellt sich in Listing 3 6 entsprechend dar Aufge nommene Sprachzus tze nach Henzen 2010 betreffen haupts chlich die Angabe eines Bezeichners durch die EBNF Regel name Variationen von Gesten durch Optio nen Oder Operator I und tendenziellen Richtungsangaben beispielsweise N eine pr zisere Lagebeschreibung durch die Relation CONNECT und Parametern f
36. mit direkter Ber hrung sicherer da der Koordinierungsaufwand geringer ist Dies gilt aber nur solange die Angriffsfl che des Elements gro genug ist und in unmittelbarer N he ist vgl Forlines etal 2007 Die Fehlerrate erh ht sich je doch mit zunehmender Distanz In Henzen 2010 S 62 ff werden diesbez glich vier Interaktionszonen unterschieden die sich an markanten Erreichbarkeitsgren zen orientieren und dementsprechend zu adaptieren sind Sobald Armbewegungen einbezogen werden m ssen um entfernte Bereiche des Touch Interface zu bedie nen erh ht sich die Zeit f r die Bew ltigung von Interaktionsaufgaben vgl Forlines etal 2007 Die Maus Interaktion erscheint f r primitive Aufgaben wie das Best tigen einer Ak tion mit einem Klick oder ffnen von Ordnern mit einem Doppelklick die effizientere Alternative zu sein Nach Forlines etal 2007 bevorzugen 9 von 12 Testpersonen diese Eingabetechnik f r einfache Aufgaben Dies ist damit zu begr nden dass die Maus mehr Komfort bietet und sich bereits kleinste Bewegungen des Handgelenks bersetzten lassen Die Ausf hrung pfadbasierter Gesten ist hingegen komplizier ter Open up a drawing program and try drawing a perfect heck even passable circle Now grab a pen and a piece of paper Which one was faster and which one looks better Wigdor und Wixon 2011 S 118 Das Interaktionkonzept der Maus ist nicht daf r ausgelegt um kontrolliert Pfade zu skizzieren
37. named websites 70 of the mobile acces sed websites provide current i e weather forecast news timetables or general information i e Wikipedia 17 focus entertainment Music Video and 13 Social Networks i e Facebook Schmiedl etal 2009 Obwohl ein auf Unterhaltung ausgerichtetes Anwendungsbeispiel wie zum Beispiel Anwendungsbereich ein Browserspiel das gr te Potenzial und besonders viel Spielraum f r gestenba Informative Web Seiten sierte Interaktionskonzepte bietet konzentriert sich dieses Kapitel auf klassische informative Webseiten wie zum Beispiel ein Nachrichtenportal Wissensdatenban ken wie www wikipedia de aber auch einfache Onlinepr sentationen zur Vor stellung von Unternehmensleistungen Ziel ist es die gebr uchlichen Interaktions konzepte des Webs f r ber hrungsbasierte Eingabesysteme zu erweitern und zu optimieren womit ein weites und profanes Anwendungsfeld f r den Einsatz eines Web Frameworks zur Gestenerkennung erschlossen werden soll Unter der festgelegten Fokussierung auf informative Web Seiten wird das Anwen dungsszenario an dieser Stelle konkretisiert Ausgangspunkt ist die die Bedienung von Web Anwendungen auf einem Multitouch Tablet Aufgrund des Formats eines Abbildung 4 1 Multitouch Tablets das der Gr e eines Buches oder Schreibblocks gleichkommt Ubliche Bedienung eines ist von der Bedienung mit einer Hand auszugehen w hrend die andere das Ger t h lt Abbildung 4 1 il
38. umzusetzen erfordert aber ebenso mehrere Muster beispiele die zuvor in das System eingelesen werden m ssen Fuzzy Logik ist dem Ansatz von KNN sehr hnlich kommt aber ohne Training aus Herausfordernd ist 3 3 Interpretation von Gesten jedoch die Implementierung eines komplexen Regelsystems das m glichst viele Un terscheidungsmerkmale zur Klassifikation einbezieht Template Matching Verfahren basieren auf einer festgelegten Datenbasis Jede Ge Template Matching ste wird durch ein Referenzmuster repr sentiert das mit der Eingabe verglichen wer Verfahren den kann Nachteil dessen ist dass eine solche Datenbank mit zunehmender Anzahl von Gesten sehr speicherintensiv ist Dies stellt insbesondere in DTW ein Problem dar Die erforderliche Erkennungszeit mit DTW ist daf r aber im Vergleich zu HMM und KNN geringer vgl Wood 2008 Dennoch bewerten WOBBROCK ET AL den Algorithmus wie folgt Dynamic programming methods are computationally ex pensive and sometimes too flexible in matching and although improvements in speed are possible these improvements put the algorithms well beyond the reach of most Ul designers and prototypers Wobbrock etal 2007 S 2 In dieser Hinsicht sind Algorithmen wie SiGer eindeutig besser geeignet denn die Definition von Gesten erfolgt auf Basis verstandlicher Ausdrucksformen der Speicherbedarf ist dadurch niedrig und der Vergleichsalgorithmus effizient Die Performanz dieses An satz
39. und Methoden entsprechend der Klassendefinition eines grafischen Elements ab und erlauben so einen transparenten Zugriff auf deren Eigenschaften innerhalb der Definition Das Regelwerk ist sehr umfassend und bietet viele Ausdrucksm glich keiten an Dem kommt die Wiederverwendung einer Geste ber ihren Bezeichner entgegen die in komplexeren Definitionen verbaut werden kann 3 3 2 3 GeForMT Gestenformalisierung f r Multi Touch KAMMER ET AL schlagen mit GeForMT Gesture Formalization for Multi touch ei ne Beschreibungssprache f r Multitouch Gesten vor die nach Kammer etal 2010 im Wesentlichen aus f nf Sprachbausteine besteht Die Funktion beschreibt die Art der Eingabe und Anzahl simultaner Kontakte einer Geste beispielsweise 2F vgl Abb 3 10a Atomare Gesten gelten als die elementaren Einheiten einer Bewegung Sie bilden sowohl punkthafte Gesten wie POINT und HOLD als auch eindimensiona le LINE und zweidimensionale Pfade MOVE CIRCLE SEMICIRCLE ab Zus tzliche Richtungsangaben in Form einer Himmelsrichtung beispielsweise NORTH oder SOU THEAST oder Kreisbewegungsrichtung beispielsweise CLOCKWISE konkretisieren die Definition der Bewegungsform vgl Abb 3 10b Operationen erm glichen die Komposition atomarer Gesten zu komplexen Definitionen So kann beispielswei se durch eine Sequenz atomarer Gesten verkn pft durch den Komma Operator ein komplexes Symbol gebildet werden vgl Abb 3 10c oder durch die Verkn p
40. 11a das verschiedene Entwurfsmuster kombiniert vgl Stefanov 2011 S 100 ff Listing 2 5 zeigt dessen Umsetzung in JavaScript un A Erzeugung eines Namensraum var NAMESPACE Definition eines Moduls im Namensraum NAMESPACE Module function Private Eigenschaften und Methoden var privateProperty private function privateMethod O ffentliche Schnittstelle API return publicProperty public publicMethod function O HO AN AU KRWN a Se a WN O 0 Listing 2 5 Revealing Module Pattern Um die Anzahl und Auspr gung globaler Variablen zu verringern und folglich Na menskollisionen zu umgehen kann es sinnvoll sein Funktionen und Objekte in ei nem Objekt zu kapseln das als Namensraum dient Zeile 2 Ein Modul Definition in Zeile 4 schlie t zusammengeh rige Teile der Funktionalit t ein und repr sentiert ei ne abgeschlossene Komponente einer Software Das Modul Muster hilft neben der Kapselung dabei den Code zu organisieren indem es einen privaten Bereich Zeile 5 8 und eine ffentliche Schnittstelle in einem return Block Zeile 9 12 definiert Letztere ist von au en sichtbar Private Eigenschaften und Methoden sind hinge gen vor u eren Zugriffen gesch tzt und k nnen lediglich innerhalb des Moduls angesprochen werden Der Prozess der Gestenerkennung kann unter Umst nden einige Zeit in Anspruch nehmen was sich letztlich negativ auf das Bed
41. 11d W3C HTML Media Capture W3C Working Draft 14 April 2011 April 2011 URL http www w3 org TR html media capture Zugriffsdatum 08 02 2012 W3C 2011e W3C HTML5 HTML 5 A vocabulary and associated APIs for HTML and XHTML W3C Working Draft 25 May 2011 M rz 2011 URL http www w3 org TR 2011 WD html5 20110525 Zugriffsdatum 17 10 2011 W3C 2011f W3C Schepers Doug Hrsg Moon Sangwhan Hrsg Brubeck Matt Hrsg Touch Events Specification 2011 URL http dvcs w3 org hg webevents raw file default touchevents html Zugriffsdatum 13 11 2011 W3C 20119 W3C Schepers Doug Hrsg Moon Sangwhan Hrsg Brubeck Matt Hrsg Touch Events version 1 W3C Working Draft 13 September 2011 Sept 2011 URL http www w3 org TR 2 11 WD touch events 20110913 Zugriffsdatum 27 09 2011 W3C 2011h W3C Hickson lan Hrsg Web Workers W3C Working Draft 01 September 2011 Sept 2011 URL http www w3 org TR 2011 WD workers 20110901 Zugriffsdatum 10 02 2012 Webel etal 2008 Webel Sabine Keil Jens Zoellner Michael Multi touch gestural interaction in X3D using hidden Markov models In Proceedings of the 2008 ACM symposium on Virtual reality software and technology New York NY USA ACM 2008 VRST 08 S 263 264 URL http doi acm org 1 1145 145 579 1450644 ISBN 978 1 59593 951 7 Weil 2010 Weil Florian Gestures for pointing devices in screen based environme
42. 2 6 beschrieben Der Webprogrammierer erh lt dadurch die M glichkeit auf Fehleingaben entspre chend zu reagieren und beispielsweise eine Hilfe anzubieten 5 3 3 Testumgebung Ein Nebenprodukt der Framework Entwicklung ist eine HTML basierte Testumge bung deren Benutzeroberfl che sich in drei Bereiche unterteilt Anhand eines Screen shots in Abbildung 5 10 k nnen diese nachvollzogen werden Im linken Teil k nnen Einstellungen vorgenommen werden vordefinierte Gesten geladen werden sowie eigene Gesten basierend auf GeForMT definiert werden Der grau hinterlegte Be reich sowie die enthaltenen blau hinterlegten Quadrate sind als div Elemente im plementiert und stellen die Testobjekte dar auf denen Gesten angewendet werden k nnen Die entsprechenden Selektor Ausdr cke werden f r die Verwendung in der Definition benutzerdefinierter Gesten im jeweiligen Objekt angezeigt Unter der Zei chenfl che ist eine Konsole integriert die den Status der Gestenerkennung ausgibt In der Konsole kann demnach verfolgt werden ob eine Geste erkannt wurde oder nicht GeForMT js Test Environment div canvas 1 Initialize recognition and gesture sets Global Settings M Show feedback M Prevent default O Graffiti Multistroke gestures O Multitouch gestures OObject oriented gestures J Ob J g Initialize 2 Define custom gesture Identifier of the gesture GeForMT expression Recognition configuration QOnline
43. 777 E Erkennungsbereich Sichtbare Objektform Begrenzung der Gestaltungs breichen nach dem Box Modell II Elementare Ereignisse ENTER LEAVE Abbildung 4 8 Herstellung des Objektbezugs von Gesten au erhalb des Erkennungsbereichs Naheliegende Formalisierungsans tze a AFCENTERC object LINEC object LEAVEC object b LINEC object c CIRCLE ohne Objektbezug d CIRCLEC object e an Ausf hrungsform orientiert CIRCLEC container oder ereignisorientiert ENTERC objects Erster Anhaltspunkt f r die Aufl sung dieser Problematik ist das Ereignisprofil bez g lich ENTER und RELEASE Ereignissen auszuwerten F r die STRIKE Geste ist die Er eigniskette ENTER MOVE LEAVE charakteristisch Start und Endpunkt werden nicht erfasst Eine naheliegende L sung um diese Geste formal auszudr cken w re die Erweiterung der atomaren GeForMT Gesten um entsprechende gleichnamige Sprach 59 4 Synthese Aktionszuordnung als Bestandteil der Sprache 60 GeForMT Aktionszuordnung durch Objektmodell bausteine siehe Beschriftung von Abb 4 8a Dieser ereignisorientierte Ansatz eig net sich auch f r die Selektion von Objektmengen basierend auf der Angabe ei nes Klassenselektors siehe Beschriftung von Abb 4 8e Er ist jedoch nicht f r ei ne LASSO Geste praktikabel die Objekte umschlie t ohne sie zu treffen vgl Abb 4 8c Eine alternative L sung die die formale Spezifikation unber hrt l
44. 7c grafisch veranschaulicht Im Mittelpunkt steht die Information zum Beispiel eine Grafik oder Text Handlung Formalisierung von und Information stehen hier direkt in Beziehung Die Problematik der Verdeckung jnteraktionsbereichen vgl Kapitel 3 4 2 ist hier jedoch besonders signifikant und sollte bei der Wahl der Gesten ber cksichtigt werden Der umgebene Toleranzbereich kann diesbez glich Abhilfe schaffen Er ist der padding Eigenschaft des Box Modells nachempfunden und grenzt den Inhalt deutlich vom Rahmen des Objekts ab Der Rahmen stellt als u erste Grenze des Elements eine Beziehung zur Umwelt her Ein Raster teilt den Rahmen in interaktive Eck und Randfl chen Das Box Modell dient hier lediglich als Vorbild und beschr nkt sich nicht auf eine derartige softwaretechnische Imple mentierung Die Verschachtelung von Strukturelementen die jeweils einen eigenen Geltungsbereich definieren k nnte ebenso ein Ansatz f r die Realisierung sein Im einfachsten Fall wird der Erkennungsbereich des Objekts nicht verlassen wo Eintreten und Verlassen durch der Objektbezug fortw hrend hergestellt werden kann Einige Gesten werden des Erkennungsbereich jedoch im Abseits des Erkennungsrahmens ausgef hrt und sind dennoch objektbe zogen wie zum Beispiel das Durchkreuzen STRIKE eines Objekts Abb 4 83 um es zu entfernen oder eine LASSO Geste um ein oder mehrere Objekte zu selektieren Abb 4 8c und Abb 4 8e 1111
45. Alan Reimann Robert Cronin David About Face 3 The Essentials of Interaction Design 3rd Wiley 5 2007 ISBN 97804700841 13 Damaraju und Kerne 2008 Damaraju Sashikanth Kerne Andruid Multitouch Gesture Learning and Recognition System 2008 URL http www sriramsubramanian com tabletop2008 images paper244 pdf Zugriffsdatum 11 02 2012 Debreuil 2001 Debreuil Robin Just What is Object Oriented Programming The Prototype 2001 URL http www debreuil com docs ch 1_Prototype htm Zugriffsdatum 20 10 2011 Dell 2011 Dell DELL Monitors Dell SX2210T 55cm 21 5 W Multi Touch Monitor with Webcam 2011 URL http www dell com ae business p dell sx2210t pd Zugriffsdatum 14 10 2011 Deveria 2011a Deveria Alexis When can I use pointer events Compatibility table for support of pointer events in desktop and mobile browsers Oct 2011 URL http caniuse com pointer events Zugriffsdatum 10 02 2012 Deveria 2011b Deveria Alexis When can Iuse Web Workers Compatibility table for support of Web Workers in desktop and mobile browsers Sept 2011 URL http caniuse com webworkers Zugriffsdatum 24 10 2011 Dojo 2011 Dojo Dojo mobile Juli 2011 URL http dojotoolkit org features mobi Le Zugriffsdatum 30 09 2011 Dorau 2011 Dorau Rainer Emotionales Interaktionsdesign Gesten und Mimik ineraktiver Systeme X Media Press 1 st Edition Springer Berlin 5 2011
46. LINE_E TEMPLATEBUILDER 1 gt bd Oise gt Er e N ERETTI IL IT Il ee ce oo Adaption des Algorithmus bez glich 74 der Varianz Erkennung zusammengesetzter Gesten Erkennung von Multitouch Gesten q Klassifikation 1 RECOGNIZER 1 Normierung 2 Distanzberechnung d 3 Best Fit min d9 dj dm Muster Geste i _ Abbildung 5 6 Erkennung pfadbasierter Gesten basierend auf GeForMT und dem Verfahren nach Wobbrock etal 2007 Das vorgestellte Verfahren wirft die Frage auf wie mit der Formalisierung ohne An gabe einer Bewegungsrichtung zu verfahren ist Eine L sung hierf r ist bereits im Algorithmus integriert Die Erkennung von Varianten wird erh ht indem die Tem plates einheitlich auf 0 gedreht werden Das Framework baut darauf auf und nutzt dieses Vorgehen bei unkonkreten Gestenbeschreibungen aus Es kann jedoch nicht auf die Rotationsrichtung bei kreisf rmige Gesten angewendet werden Ebenso sind komponierte Einzelpfad Gesten davon ausgenommen Beispiel IFCLINE LINE In den F llen werden variierende Referenzmuster konstruiert die jeweils mit der Eingabe verglichen werden m ssen Das dargelegte Beispiel in Abb 5 6 erkl rt das Verfahren bei Einzelpfad Gesten Die Verarbeitung zusammengesetzter Gesten vgl Kapitel 4 2 4 liegt nah Bei zwei se quentiell ausgef hrten Gestenpfaden wird zun chst der erste Teil ausge
47. MT auf die Beschreibung der wesentlichen Bewegungsform einer Geste Die weitgehende Selbstbeschreibungsf higkeit der Syntax und ihr einfacher Auf bau der an mathematische Ausdr cke erinnert erh ht nicht nur die Lesbarkeit und senkt die Lernkurve sondern erm glicht bereits in einem einzeiligen Ausdruck die Spezifizierung einer komplexen Gesten Die Gestendefinition in Midas setzt durch ihr eventbasiertes Konzept deutlich mehr Implementierungswissen voraus und ist dadurch verh ltnism ig kompliziert Die eigent mliche Syntax der Variablen und Funktionsdefinitionen sowie deren Klammerung erschweren die Anwendung auf erdachte Gesten Die Ann herung an programmierbare Datenstrukturen erh ht da f r aber den Abstraktionsgrad des Erkennungsalgorithmus und l sst somit Erwei terungen ber die Sprache zu TouchToolkit strukturiert die Definition in Bl cken und f rdert dadurch die bersichtlichkeit Wie in Midas werden die Gesten aufbau end auf harten Fakten spezifiziert Im Gegensatz zu den geometrischen Primitiven in GeForMT deren r umliche Verh ltnisse und temporalen Eigenschaften unbestimmt und damit variabel sind k nnen die g ltige Wertebereiche f r die Erkennung einer Geste sehr genau eingestellt werden 3 3 3 Methoden der Gestenerkennung Wie im Zusammenhang mit der Beschreibung von Formalisierungsgraden im letzten Kapitel erkl rt wurde erfordert die Erkennung formal definierter Gesten repr sen tative mathematisch berechen
48. Matching Algorithmus der auf dy namischer Programmierung basiert und haupts chlich in der Sprach Mustererken nung eingesetzt wird vgl Wobbrock etal 2007 Er ist jedoch genauso gut auf Gesten anwendbar vgl Scholliers et al 2011 Dabei stellen Referenzmuster Tem plates das Vokabular des Systems dar welches erkannt werden kann Der Vergleich der Eingabe Testmuster wird mit den Referenzmustern abgeglichen Dabei stellt sich das Problem dass Eingaben vorallem in ihrer zeitlichen Dimension variieren und ein direkter Abgleich meist zu negativen Ergebnissen f hrt In der Sprache sind es vorallem Vokale die oft unterschiedlich lang ausgesprochen werden und deshalb vom angenommenen Referenzmuster abweichen Dies kann auf die Ausf hrung von Gesten bertragen werden Der Algorithmus verarbeitet zeitabh ngige Eigenschaf ten wie zum Beispiel einzelne Positionsdaten eines Gestenpfads und stellt sie den bekannten Referenzmustern gegen ber Das Prinzip der dynamischen Programmie rung optimiert die Vergleichslogik indem zun chst Teilprobleme definiert werden die dann zu einer Gesamtl sung kombiniert werden Der Algorithmus erzielt damit eine gute Erkennungsrate Nachteilig ist jedoch die Performanz bei der Erkennung und ein hoher Speicherplatzbedarf f r die Menge an Referenzmustern was insbe sondere auf mobilen Endger ten ein Problem darstellt vgl Wobbrock etal 2007 und Wood 2008 K nstliche Neuronale Netze Gewichtu
49. Nachdem das Ar beitsthema in diesem ersten Kapitel eingeleitet wurde werden nachfolgend in Ka pitel 2 die Grundlagen der Webentwicklung und der gestenbasierten Interaktion behandelt Neben der Kl rung wiederverwendeter Begriffe werden hier vorallem softwaretechnische Grundlagen erkl rt die im weiteren Verlauf der Arbeit voraus gesetzt werden und f r die Konzeption des Frameworks von Bedeutung sind Der Aufbau von Kapitel 3 orientiert sich an den wesentlichen Verarbeitungsschritten von Gesten Das zugrunde liegenden Architekturmodell webbasierter Software wird in Kapitel 3 1 erl utert Darauf aufbauend werden Ans tze der Eingabedatenverarbei tung Kapitel 3 2 und anschlie end verwandte Arbeiten aus dem Bereich der For malisierung und der methodischen Erkennung von Gesten vorgestellt Kapitel 3 3 Das Kapitel schlie t mit der Auseinandersetzung von Aspekten des Interaktionsde signs auf Anwendungsebene ab Kapitel 3 4 In der Synthese Kapitel 4 werden die gewonnenen Erkenntnisse aufgegriffen und ein Anwendungsszenario formu liert in dem der praktische Nutzen eines Gestenerkennungs Frameworks in Web Anwendungen dargelegt wird Dar ber hinaus werden in Kapitel 4 2 Ans tze der Gestenbeschreibungssprache GeForMT im Kontext der Webentwicklung diskutiert In diesem Rahmen werden Optimierungs und Erweiterungsvorschl ge entwickelt Kapitel 5 besch ftigt sich anschlie end mit der konkreten softwaretechnologischen Umsetzung des Gestenerkennu
50. Online Gesten in Kammer etal 2010 Letztere fordern ein stetiges Feedback w hrend der Ausf hrung und werden daher unmittelbar und fortlaufend interpretiert Offline Gesten hingegen werden einmalig erkannt nach dem die Ausf hrung abgeschlossen ist 2 3 SOFTWARETECHNOLOGISCHE GRUNDLAGEN 2 3 1 Clientseitige Webentwicklung Web Anwendungen sind in Regel auf Basis einer Client Server Architektur imple mentiert Ein Webserver im Internet stellt die Anwendung bereit und der Client Web Browser nimmt Daten auf Anfrage hin in Empfang Die vorliegende Arbeit konzentriert sich auf die clientseitige Programmierung Das bedeutet dass die Aus f hrung der Anwendunglogik auf dem Endger t erfolgt Dumke etal 2003 Diese Entscheidung liegt darin begr ndet dass die Verarbeitung von Nutzereingaben eine auf Performanz ausgerichtete Architektur erfordert Die zeitintensive Kommunikati on zwischen Client und Server beschr nkt sich damit auf die vom Nutzer bewusst initiierten Anfragen wie der Wechsel einer Seite Die Konzeption einer Anwendung erfolgt nach Cooper etal 2007 in drei Diszipli nen vgl Abb 2 3 die zusammen ein optimales Bedienerlebnis zum Ziel haben Dies geht mit der Auffassung nach Dumke etal 2003 einher dass die techni sche Trennung von Inhalt Gestaltung und Logik zum guten Programmierstil geh rt Entsprechend kommen Web Standards wie X HTML siehe Abschnitt 2 3 2 CSS siehe Abschnitt 2 3 3 und JavaScript siehe
51. Programmierung SiGer Formale Repr sentation der Extraktion der Ausf hrungs Ermittlung der Abwei acht m glichen Ausf hrungs richtungen beispielsweise chung ber Levenshtein richtungen als Zeichenkette ber Winkelberechnung Distanz 1 N Liste von Koordinaten Filterung und Normierung Berechnung der durch Protractor des Ausf hrungspfads schnittlichen Abweichung Statistische Verfahren 40 der Koordinaten Tabelle 3 1 Methoden der Gestenerkennung im Uberblick Statistische Verfahren wie HMM und KNN m ssen vorab trainiert werden was sehr langwierig und aufw ndig sein kann Sie sind sehr m chtig erfordern aber ein be sonderes Verst ndnis ber die zugrunde liegende Theorie Die Modelle werden an wendspezifisch konstruiert sind aber dadurch nicht besonders flexibel Dennoch zeichnen sie sich durch ihre besonders gute Erkennungsrate und Verarbeitungsge schwindigkeit aus vgl Wood 2008 Nichtsdestotrotz werden sie in Wobbrock etal 2007 S 2 als unpraktisch f r prototypische Implementierungen erachtet vorallem wegen des unumg nglichen Trainingsvorgangs Dieser Aspekt ist auch im Zusammenhang mit der Generierung des Datenmodells aus einer formalen Spezifi kation heraus problematisch zu sehen Des Weiteren ist die Konzeption und Umset zung der Algorithmen komplex was die Programmierung und die Fehlerdiagnose erschweren Wobbrock etal 2007 S 2 Das Arbeiten mit Vektoren nach Rubine 1991 ist hingegen leichter
52. S Abbildung 5 1 gibt eine bersicht ber die Bestandteile des Frameworks die je weils als Module vgl Listing 2 5 realisiert sind Frameworkinterne Module sind im Namensraum GeForMT zusammengefasst Der Namensraum bildet gleichzeitig das Hauptmodul des Frameworks und stellt damit die Anwendungsschnittstelle f r den Webprogrammierer bereit Die Konzeption und Verwendung der API wird in Ab schnitt 5 3 2 n her erl utert Desweiteren regelt das Hauptmodul die Initialisierung und Verkn pfung aller Komponenten und steuert den Datenfluss FI E GestureModel VisualFeedback Observation Parser GeneratedGeForMTParser GestureRecognition TemplateBuilder SelectorEngine 2 Abbildung 5 1 Module im Namensraum GeForMT und verwendete Bibliotheken Mit der Definition einer Geste auf Basis einer formalen Beschreibung werden im Wesentlichen sechs Verarbeitungsschritte durchlaufen Zun chst wird der GeForMT Ausdruck durch die Parser Komponente validiert und in seine Syntaxbausteine zer legt Abschnitt 5 2 2 Das SelectorEngine Modul pr ft enthaltene Selektoren und gibt die zugeh rigen ELement Knoten des DOM Baumes aus Abschnitt 5 2 3 Dar auf aufbauend registriert sich das Observation Modul f r Maus und Touch Events 5 2 Komponenten des Frameworks auf diesen Elementen Abschnitt 5 2 4 Im TemplateBuilder Modul werden die formalen Parameter des geparsten Ausdrucks in eine mathematisch berechenbare Datenstruktur tr
53. TECHNISCHE wy UNIVERSITAT DRESDEN FAKULTAT INFORMATIK INSTITUT FUR SOFTWARE UND MULTIMEDIATECHNIK PROFESSUR MEDIENGESTALTUNG Diplomarbeit zum Thema KONZEPTION EINES WEB FRAMEWORKS ZUR GESTENERKENNUNG AUF BASIS DER BESCHREIBUNGSSPRACHE GEFORMT zur Erlangung des akademischen Grades Diplom Medieninformatikerin 13 Februar 2012 eingereicht von Dana Henkens Matrikelnummer 3249276 Verantwortlicher Hochschullehrer Prof Dr Ing habil Rainer Groh Wissenschaftlicher Betreuer Dipl Medieninf Dietrich Kammer EIDESSTATTLICHE ERKL RUNG Hiermit versichere ich die vorliegende Arbeit zum Thema KONZEPTION EINES WEB FRAMEWORKS ZUR GESTENERKENNUNG AUF BASIS DER BESCHREIBUNGSSPRACHE GEFORMT selbstst ndig und unter ausschlie licher Verwendung der angegebenen Literatur und Hilfsmittel erstellt zu haben Dresden 13 Februar 2012 Dana Henkens DANKSAGUNG Ich m chte mich an dieser Stelle bei Prof Dr Groh und Dietrich Kammer f r die Erm glichung dieser Arbeit bedanken Vielen Dank f r die engagierte und kompetente Betreuung Herzlichen Dank auch an alle Korrekturleser f r die hilfreichen Anmerkungen Ein besonderer Dank gilt meiner Familie die mich w hrend meines gesamten Studiums uneingeschr nkt unterst tzt hat und immer an mich geglaubt hat Meinen Freunden und Kommilitonen danke ich f r ihren Zuspruch und Ansporn Ein gro er Dank geht an Martin der sich stets um mein pers nliches Wohl w hrend der Arbei
54. akten rotation den Drehwinkel Die Angaben sind relativ zur Ausgangsituation die mit dem Start der Geste festgesetzt ist Folgende Event Typen k nnen auftreten Details der Spezifikation stehen noch zur Diskussion Siehe W3C Editor s Draft der Touch Events version 2 in W3C 2011 3 2 Web Browser e gesturestart Tritt ein sobald ein zweiter oder weiterer Finger den Touch screen ber hrt e gesturechange Tritt ein wenn sich die Positionen der Kontakte innerhalb der Geste ver ndert e gestureend Tritt ein wenn die Geste endet indem nur noch ein oder kein Finger den Touchscreen ber hren 3 2 2 TUIO basierte Eingabeverarbeitung Wie in Kapitel 3 1 eingeleitet wurde hat sich das TUIO Protokoll hinsichtlich einer TUIO ger teunabh ngigen Implementierung einer Multitouch Gestenerkennung durch Framework Architektur gesetzt Abbildung 3 3 verdeutlicht die allgemeine Funktionsweise eines TUIO Frame works nach Teiche etal 2009 und stellt ihr zwei Ans tze einer TUIO Client Imple mentierung f r Webanwendungen nach Rusadi 2009 und Cailliau etal 2009 gegen ber Die Eingabe Hardware erzeugt zun chst einmal ger te und techno logiespezifische Sensordaten Raw Data wie zum Beispiel Bilddaten oder sonstige elektrische Messungen Die Tracker Implementierung wertet diese Datenstr me zu diskreten Eingabedaten wie die Position oder Gr e eines Kontaktes aus und berei tet diese im TUIO Protokoll auf Die genaue Sp
55. akti onsbereiche Erkennung von Gesten im Abseits von Objekten durch ereignisorientierten Ansatz mit den Sprach zus tzen ENTER und LEAVE oder durch Erweite rung des Erkennungsrahmens Schnittstellendefinition f r Aktionszuordnung als Sprachzusatz die Implementierung der Geste Aktionszuordnung durch erweiterbare JavaScript Datenstruktur Konfigurations Objekt Adaption der Wiederver Konkretisierung der Einschr nkungen bei der Wie wendung von Gestenbe derverwendung von Gestenbezeichnern und Ein schreibungen f hrung von Trennzeichen Vorschlag der kontextunabh ngigen Vordefinition von Gesten f r die Verwendung als Vorlage Tabelle 4 2 bersicht der Optimierungs und Erweiterungsvorschl ge Die Erweiterung von GeForMT um Ans tze zur sequentiellen Komposition ist be sonders zu empfehlen da sie Mehrdeutigkeiten bez glich der Zusammensetzung 4 2 Webkonforme Gestenformalisierung und Anordnung von Offline Gesten auf ein Minimum einschr nken Die Konzep tion der Schnittstellen zwischen Formalisierung und Implementierung ist vorrangig anwendungsspezifisch und bei einer bernahme hinsichtlich der in Kapitel 4 2 7 be schriebenen Interoperabilit t zu pr fen Die Wiederverwendung ist ein Zusatz der die Definition einer Vielzahl von Gesten erleichtern kann 65 5 KONZEPTION UND IMPLEMENTIERUNG Inhalt dieses Kapitels ist die softwaretechnische Realisierung des Web Frameworks auf Basis der webkonformen Gestenforma
56. alige Durchstreichen bietet sich vorallem f r Text und Textbausteine an F r gr ere Elemente oder Textpassagen wird das Duch kreuzen siehe Abb 3 22 bevorzugt Gei ler 2001 S 92 Eine schnelle Zick Zack Bewegung vgl Abb 3 22 die mit dem Ausradieren assoziert werden kann ent spricht einer ausdr cklicheren Form des Entfernens vgl Dorau 2011 S 158 und Gei ler 2001 S 92 Undo und Redo Undo und Redo beziehen sich als integrierte Browser Funktion haupts chlich auf die Folge besuchter Hypertext Knoten spich angesteuerter Web Dokumente Nach Dorau 2011 S 160 kann die Anweisung mit Gestik umgesetzt werden wenn man sich einen Zeitstrahl vorstellt und bildlich Vergangenheit links und Zukunft rechts trennt Dementsprechend wird eine Schleife CURL nach links oder rechts ausgef hrt um in der Browser History zu navigieren vgl Abb 3 23 MOYLE ET AL schlagen einen sehr hnlichen Ansatz basierend auf Marking Menus vor und imple mentiert darauf aufbauend eine FLICK Geste erkl rt unter dem Abschnitt Scrollen und Bl ttern in JavaScript Die Evaluation zeigt dass eine gestenbasierte Ausf h rung der Aktion gegen ber dem Bet tigen des Back Buttons signifikant schneller ist vgl Moyle und Cockburn 2003 Auf Marking Menus aufbauende Shortcut Gesten sind ebenso f r kontextbezogenen Funktion wie das Kopieren Einf gen oder L schen interessant 6Marking Menus basieren auf dem Konzept von s
57. all einer horizontalen Anordnung mit einer Pfeil Geste Die Schw che dieses Ansatzes ist jedoch dass keine konkrete Richtung der Anordnung festgelegt ist Der Punkt des Fragezeichens k nnte genauso auch ber den ersten Gestenzug platziert sein Ein dritter Ansatz ber cksichtigt die Richtung basierend auf der EBNF Regel direction vgl Kapitel 3 3 2 3 Abbildung 4 4d stellt einen ersten Gestenzug dar dessen Um feld in acht m gliche Quadranten unterteilt ist in denen ein weiterer Gestenzug aus gef hrt werden kann Beispielsweise k nnte mit Angabe des Relations Ausdrucks ADJOIN_E die gerichtete Anordnung von links nach rechts der Pfeil Geste aus Ab bildung 4 4c konkretisiert werden Ans tze der r umlichen Anordnung SchlUsselworter Ankn pfung CONNECT_START CONNECT_END Horizontale und vertikale Nachbarschaft AMONG ASIDE Nachbarschaft mit optionaler Richtungsangabe ADJOIN _direction Tabelle 4 1 Zusammenfassung der Ans tze zur Beschreibung der r umlichen Anordnung zusammengesetzter Gesten Durch die Unterschiedung geometrischer Formen und Bewegungsrichtungen in Ge ForMT k nnen bereits viele Bewegungsformen formal beschrieben werden Dabei gibt der Formalisierungsansatz jedoch nicht die r umliche Dimension einer atoma ren Geste vor Die L nge einer Linie oder der Radius eines Kreises k nnen variieren Das folgende Beispiel zeigt die Uneindeutigkeit einer Beschreibung die hierbei ent stehen kann Eine bedeutende Bewegu
58. ameworks 222222 2m nn 3 3 3 Methoden der Gestenerkennung 222 2 nn nn nr 3 A gt sApplikatloni 3 Ce N With th A er a NR oh a ha a en eR ds hie nk 3 4 1 Vergleich von Maus Stift und Touch Interaktion 0 0 3 4 2 Besonderheiten des Multitouch Interface 2 2 2222 22 nn 3 4 3 Aktionen und Anweisungen 2 2 22 22 nn nn RWW WwW ON NO UU u 12 12 12 13 14 15 18 3 4 4 Anwendung von Gesten 2 2 2 nn nn 3 4 5 Bewertung des derzeitigen Stands touchbasierter Web Anwendungen 4 Synthese 4 1 Entwicklung und Anwendung einer mobilen Web Anwendung 2 2 ee 4 2 Webkonforme Gestenformalisierung 2 2 nr nenn 4 2 1 Ereignisprofil atomarer Gesten 2 22 oo n nn 4 2 2 Formalisierung von Mausgesten 2 2 22 aa 4 2 3 K ntakttypen asra 2 na wer un ar es eo n 4 2 4 Sequentielle Komposition 2 2 2222 2 4 2 5 Geltungsbereich und Objektkontext 2 22 nn nn nn 4 2 6 Aktionsbeschreibung und zuordnung 22200 0000s 4 2 7 Konfigurationsparameter s s o e ea i a a e e e a e a e E E aA 4 2 8 Potenzial der Wiederverwendung von Definitionen 4 2 9 3Anomallenz 2 44 Pre a Marte d aa Bley a ik g a Bi 2 42 10 Zusammenfassung 2 4 6 2 222 aa aaee a a aan BAMA 5 Konzeption und Implementierung 5 1 Anforder ngskriteriena 2 2 227 2 ee ar ha LE a OY 5 2 Komponenten des Frameworks 2 222 on nn 5 2 1 Globale Konstanten 22 22 on nn nn 52 2 RAINS ot owen ee tn e
59. ansformiert Abschnitt 5 2 6 Diese Vorlagen bilden die Vergleich basis f r die Gestenerkennung welche im Modul GestureRecognition vorgenom men wird Abschnitt 5 2 6 Zuvor werden die Ergebnisse der parsenden und trans formierenden Komponenten in einem Objektmodell zusammengefasst und an zen traler Stelle im Modul GestureModel abgelegt Abschnitt 5 2 5 Die folgenden Abschnitte behandeln den Aufbau und die Arbeitsweise der Module im Detail Im Sinne einer Abbildung des Modul Entwurfmusters sind deren ffent liche Schnittstellen als eigenst ndige Objekte in den gezeigten UML Diagrammen modelliert Hinzuf gend ist zu bemerken dass die folgende Erl uterung nur die wichtigsten Operationen und Eigenschaften behandelt Es existieren dar ber hinaus weitere Hilfsfunktionen deren Unterschlagung jedoch das Verst ndnis f r die Kon zeption des Framworks nicht beintr chtigt Eine vollst ndige Darstellung der Funk tionen ist der Dokumentation zu entnehmen 5 2 1 Globale Konstanten Das Framework baut unmittelbar auf der Gestenbeschreibungssprache GeForMT auf Insbesondere die Verwendung von Terminalsymbole der Grammatik werden von verschiedenen Modulen gepr ft um das davon abh ngige einzusetzende Ver fahren zur Verarbeitung der Geste zu bestimmen Zu Gunsten der Interoperabili t t der Module wird eine gemeinsame Verst ndigungsbasis f r derartige Syntax bausteine in Form globaler Konstanten geschaffen Gem der Grammatikregeln wer
60. ar ber hinaus ist eine Standardisierung des Zugriffs auf die Elemente des Web Interface notwendig Die Browserhersteller entwickelten zun chst eigene Modelle sogenanntes dynamisches HTML DHTML die jedoch weit auseinander gingen und nicht kompatibel waren 1998 schaltete sich das W3C mit einer offiziellen Empfeh lung f r ein standardisiertes Modell mit der Bezeichnung Document Object Model DOM ein Die JavaScript Version die DOM erstmals umsetzt ist die Version 1 5 Sch fer und Str big 2007 DOM definiert eine Programmierschnittstelle f r den Zugriff auf Elemente von HTML und XML Dokumenten und das zugrundeliegenden Objektmodell Das Objektmo dell bildet die Elemente des Interface durch hierarchisch in Beziehung gesetzte Kno ten ab vgl Abbildung 2 5 Im Mittelpunkt stehen dabei die Knoten vom Typ Ele ment in der Grafik durch Rechtecke markiert F r den Knotenbaum des Dokumen tes wird im Folgenden die Bezeichnung DOM Baum verwendet Dumke etal 2003 S 88 8 Aktuelle ECMAScript Spezifikation unter der URL http www ecma international org publications standards Ecma 262 htm Aufruf 14 Sept 2011 2 3 Softwaretechnologische Grundlagen Unter JavaScript sind demnach verschiedenste Programmierschnittstellen APIs zu sammengefasst die im Kern auf ECMAScript basieren Als Skriptpsprache kommt JavaScript ohne eine Vor bersetzung wie es beispielsweise bei JAVA blich ist aus Skripte werden in Form von Quelltext
61. arameter wird als framework spezifische Konfiguration angese hen Mit der Separierung wird das Ziel verfolgt einer zunehmenden Spezialisierung der Sprachbestandteile auf einen bestimmten Anwendungsbereich entgegenzuwir ken Beispielsweise k nnte die Sprache im Bereich der Visualisierung von Gesten ein gesetzt werden insbesondere in der Umsetzung von Hilfesystemen Feed Forward Auch Entwicklungswerkzeuge k nnten von einer Generalisierung profitieren Die 61 4 Synthese Erweiterbarkeit Wiederverwendung Einschr nkungen Wiederverwendung durch Beschreibungs vorlagen 62 Verwendung von GeForMT als Austauschformat kann sich an der Stelle als Vorteil erweisen Ein weiteres Ziel ist die Konfiguration einer Geste erweiterbar zu gestalten Bezug nehmend auf die in Kapitel 3 3 2 1 und 3 3 2 2 vorgestellten Ans tze in TouchTool kit und Midas k nnten zeitliche und r umliche Einschr nkungen vorgenommen werden um die Geste zu spezifizieren In Midas ist es beispielsweise m glich ei nen zeitlichen Rahmen festzulegen vgl Kapitel 3 3 2 2 Die Beschreibungssprache in TouchToolkit bietet beispielsweise Ausdr cke an um Grenzwerte der Pfadl n ge oder der Gr e der eingeschlossenen Fl che festzulegen vgl Kapitel 3 3 2 2 Weiterhin k nnten Einstellungen bez glich der Geschwindigkeit oder dem auszu benden Druck f r die Gestenerkennung von Bedeutung sein Interessant erscheint vorallem eine Konfiguration in der die Tol
62. bare Datenmodelle Im Folgenden werden verschie dene Ans tze der Gestenerkennung beschrieben die anschlie end f r die Verwen dung in einem Web Framework bewertet werden Eine verbreitete Methode in der Mustererkennung ist das Hidden Markov Model HMM Es setzt sich aus zwei stochastischen Prozessen zusammen Der erste Prozess wird durch eine Markow Kette bestehend aus Zust nden und Zustands berg ngen beschrieben Eine Markow Kette zeichnet sich dadurch aus dass die Wahrschein lichkeit eines bergangs zu einem bestimmten Zustand allein von dem Vorg nger Zustand abh ngt Ein zweiter Zufallsprozess erzeugt auf dieser Grundlage zu jedem Zeitpunkt ein beobachtbares Ausgabesymbol vgl Wood 2008 Die Wahrschein lichkeit mit der eine Ausgabesequenz erzeugt wurde kann mit dem sogenann ten Vorw rts R ckw rts Algorithmus ermittelt werden Wood 2008 Die Zust nde der Markow Kette bleiben dabei verborgen hidden Um die Parameter zu ermit teln die die wahrscheinlichste Ausgabesequenz erzeugen wird der Baum Welch Algorithmus angewendet Damaraju und Kerne 2008 Die Modellparameter wer den daraufhin optimiert Eine beispielhafte Umsetzung des HMM wird in Webel etal 2008 vorgestellt WEBEL ET AL schlagen eine HMM basierten Programmier schnittstelle vor die den X3D Standard um Knoten f r die Multitouch Gestener kennung erweitert Um Gesten korrekt klassifizieren zu k nnen m ssen sie jedoch zun chst aufwendig antrainier
63. ber Kommandozeilen Befehle als auch ber die JavaScript generierten APlim Browser vorgenommen werden Die Parsergenerator API l sst sich theoretisch direkt in das Framework integrieren Da die dynamische Parsergenerierung jedoch nur f r die Frameworkentwicklung und nicht f r den Einsatz in einer Webanwen dung Bedeutung hat wird der generierte Parser statisch unter dem Modulnamen GeneratedGeForMTParser im Namensraum PEG eingebunden und anschlie end vom generalisierten Parser adaptiert Parser Implementierung 5 2 3 Selector Engine SelectorEngine Modul Das theoretische Konzept zur Herstellung des Objektbezugs einer Geste wurde in Kapitel 4 2 5 erl utert Demnach wird der in GeForMT als focus definierte Geltungs bereich einer Geste durch Selektoren beschrieben die eine Auswahl von HTML Elementen treffen In dem Modul SelectorEngine wird das selbe Entwurfsmu ster f r eine generalisierte Schnittstelle angewendet wie in der Parser Komponente siehe Abb 5 3 Konkrete Engine Implementierungen werden demnach adaptiert und der Zugriff ber diese Schnittstelle geregelt Somit k nnen auch hier externe Bibliotheken ber die Methode registerEngine einfach eingebunden und ausge tauscht werden Die Kernfunktionalit t wird mit der Methode getElements bereits gestellt die einen oder mehrere Selektor Ausdr cke entgegennimmt und eine Liste von DOM Objekten vom Typ Element zur ckliefert 70 5 2 Komponenten des Frameworks u u e
64. beziehen kann Dies erfordert eine vereinfachte Repr sention einer GeForMT Geste in Form eines Objekt modells das in Abbildung 5 4 veranschaulicht wird GestureModel ComplexGesture AtomicGesture relationType 1 functionType getGestureByld identifier isMultistrokeGesture composite numberOfContacts addGesture gestureC onfig isSynchronousComposedGesture gestureType removeGesture identifier isAsynchronousComposedGesture rotationinvariant elementList gestures templates isPathGesture 058 options GestureObjectModel L Abbildung 5 4 Zentrales Datenmodell Eine Geste wird durch die Klasse Gesture abgebildet Es enth lt in erster Linie die Parameter die bei der Definition in der Hauptschnittstelle angegeben wurden vgl Kapitel 5 3 2 Die Abbildung des GeForMT Ausdruckes als Objektmodell wurde so weit vereinfacht dass die Geste in drei Klassen modelliert werden kann Sie repr sen tieren im weitesten Sinne die Grammatik Regeln definition complex und gesture vgl Kapitel 3 3 2 3 GestureObjectModel h lt folglich eine Liste von ComplexGe sture Objekten als Optionen Dieses Konstrukt wurde in Henzen 2010 mit dem Operator eingef hrt um Varationen ausdr cken zu k nnen ComplexGesture bildet eine Komposition mehrerer atomarer Gesten ab Als Eigenschaften werden die Art der Komposition und die Definition einer Relation festgehalten Die Klasse AtomicGesture ist als kleinste Einheit einer Gestenbe
65. ch DOM Level 2 W3C 2000 18 3 1 Initialisierung von Multitouch Gesten mit WKTouch Gibson 2011 28 3 2 Einbindung von Multitouch Gesten in Jester Seaward 2010 02 29 3 3 Formalisierung und Registrierung einer Kreis Geste in Moousture Sibt e Hassan 2010 29 3 4 LASSO Geste in GDL Khandkar und Maurer 20103 48 32 3 5 Aufbau einer Regel am Beispiel der FLICK Geste Scholliers etal 2011 33 3 6 GeForMT Syntax Spezifikation in EBNF Kammer etal 2011 35 4 1 Einschr nkung der GeForMT Syntax auf anwendbare Regeln f r die Beschreibung von Maus und Single Touch Gesten 2 2 En nn nn 54 4 2 Angepasste EBNF Regel f r Komposition von Gesten 2 2 222 22mm nn 55 4 3 Angepasste EBNF Regeln f r die Nutzung von Selektoren als Objektidentifikation 57 4 4 Angepasste EBNF Regel f r die Aktionszuweisung angelehnt an Henzen 2010 S 83 60 4 5 Aktionszuweisung basierend auf einem Objekt Literal in JavaScript 61 4 6 Klammerung von wiederverwendeten Bezeichnern ooo 62 4 7 Verwendung von Beschreibungsvorlagen f r eine kontextunabh ngige Formalisierung 63 5 1 Auszug der Grammatik nach PEG js Spezifikation f r die Parser Generierung 70 5 2 Einbindung des Frameworks in HTML 2 2 2222 oo n nn 78 5 3 Initialisierung beim Laden des HTML Dokumentes 2 222 rn 79 5 4 Einbindung des Frameworks in HTML 2 2 2222 on nn 79 5 5 Defi
66. d mobile Web Browser Grundfunktionen tionen Auf dieser Basis entstehen Bibliotheken und Frameworks die die Entwick lung von Web Anwendungen auf einem h heren Abstraktionsniveau erlauben Les siak 2008 S 6 Der Fortschritt zeigt sich besonders im Nutzungswandel Der Computer wird zum all t glichen universellen Werkzeug wodurch sich verschiedenste Interessen bez glich der Verwendung der zentralen Plattform herausbilden Das anf nglich reine Infor mationsmedium entwickelte sich zu einem interaktiven Raum in dem Nutzer kol laborativ Inhalte konsumieren und produzieren Diese neue Generation wird auch unter dem Schlagwort Web 2 0 zusammengefasst Dar ber hinaus entwickeln sich Techniken die die Information des Mediums semantisch in Beziehung setzen was zu einer Vernetzung auf h herer Ebene f hrt Daraus folgt unter anderem eine zu nehmende Personalisierung und Adaptierung gegen ber dem Nutzungskontext Es entstehen immer komplexere Web Applikationen die Dienste bereitstellen und mit denen sich Gesch ftsprozesse zentral abwickeln lassen vgl Cooper etal 2007 S 174 ff Mit der fortschreitenden Entwicklung der Mobilfunkttechnik gewinnt das mobile Internet an Bedeutung Es erm glicht einen standortungebundenen Zugang zu We binhalten Man spricht auch von Ubiquitat Allgegenw rtigkeit Bieh 2008 S 159 Die Nutzung des Webs ber mobile Endger te erfordert jedoch neue Adaptions techniken und Bedienkonzepte die d
67. daptionsprobleme indem sie unterschiedliche ger tespezifische Versionen ihrer Anwendung implementieren Es existieren jedoch Frameworks die elementare Touch und Mauseingaben weitestgehend aufeinan der abbilden und vereinheitlichen Die JavaScript Bibliothek Phantom Limb Carsten sen 2011 emuliert beispielsweise Touch Events mit der Maus Das jQuery Plugin Touchables Schwab 2011 implementiert ebenso einen generischen Ansatz f r die Verarbeitung von Maus und Touch Ereignissen Einige wenige Framework Implementierungen konzentrieren sich allein auf die Er kennung von Gesten wenn auch vorangig Standard Gesten die an beliebige HTML Elemente gebunden werden k nnen Ein Beispiel wurde in Kapitel 3 2 2 vorgestellt jPooky Auch MooTools bietet eine von grafischen Bibliotheken losgel ste Erweite rung Pojer 2011 f r mobile Touch Interfaces an Im Folgenden wird die Verwen dung der vergleichbaren unabh ngigen Frameworks WKTouch und Jester genauer beschrieben um Erkenntnisse f r eine geeignete Schnittstellenbeschreibung zu ge winnen WkTouch ist ein kleines Framework mit dem die gestenbasierte Manipulation von HTML Elementen erm glicht wird Gibson 2011 Das betrifft insbesondere das Skalieren Rotieren und Verschieben von Objekten durch verbreitete Multitouch Gesten F r die softwaretechnische Umsetzung siehe Listing 3 1 sieht das Frame work das Objekt WKTouch vor mit dessen Instanz ein manipulierbares Objekt defi niert wi
68. den dass eine Geste mit einem HIT Ereignis beginnt und einem RELEASE Ereignis endet Das bedeutet allerdings nicht dass ein RELEASE Ereignis bereits Anlass ist die Geste auszuwerten und zu interpretieren Das Ereig nisprofil einer DOUBLE TAP Geste setzt sich beispielsweise aus der Ereignissequenz HIT RELEASE HIT RELEASE zusammen Um das Ereignisprofil einer Geste korrekt ab bilden zu k nnen m ssen also neben r umlichen Relationen auch zeitliche Parame ter ber cksichtigt werden F r die DOUBLE TAP Geste bedeutet das dass nach dem ersten RELEASE Ereignis in einem gewissen Zeitrahmen ein weiteres Ereignis erwar tet wird Dieser Zeitrahmen wird auch Kontiguit tsintervall genannt Dorau 2011 S 196 Damit findet sich ein weiteres Merkmal einer zweidimensionalen Geste Eine Einzelpfad Geste ist im Rahmen der Ereignisse HIT und RELEASE definiert Eine Geste kann sich unter Ber cksichtigung des Kontiguit tsintervalls aus einer sequentiellen Abfolge von Einzelpfad Gesten zusammensetzen Zusammengesetzte Geste Am Beispiel der DOUBLE TAP Geste zeigt sich der Fall dass eine Geste nicht zwangs l ufig durch eine Bewegung charakteristiert sein muss Zu unterscheiden sind nach Saffer 2008 statische und dynamische Gesten gleichbedeutend mit der Klassifizie rung von punkthaften und pfadbasierten Gesten nach Henzen 2010 Pfadbasierte Gesten zeichnen sich durch ihre Bewegungsform aus repr sentiert durch einen Be wegungspfad Eine Bewegungs
69. den die Konstanten klassiziert Daraus ergeben sich folgende Datentypen im GeForMT Namensraum OPERATION_TYPES RELATION_TYPES FUNCTION_TYPES CONTACT_TYPES VECTOR_TYPES SHAPE_TYPES DIRECTION_TYPES und ROTATI ON_TYPES Sie repr sentieren jeweils eine Aufz hlung der in GeForMT definierten Terminalsymbole 5 2 2 Parser Das Parsen der definierten Gesten wird auf Grundlage der GeForMT Grammatik vorgenommen die als EBNF vorliegt vgl Kapitel 3 3 2 3 Die formalen Ausdr cke werden dabei in ihre Syntaxbausteine zerlegt und in ein f r die Weiterverarbeitung geeignetes Format transformiert Das Parser Modul verf gt ber Methoden die konkrete Parser Implementierungen adaptieren siehe Abb 5 2 Diese k nnen mit der Methode registerParser eingebunden werden indem der Name und die zu adaptierende Funktion bergeben wird Der Zugriff auf die Operation erfolgt dann ber die zentrale Methode parse Dieses Entwurfsmuster vereinfacht die Erweite rung oder den Austausch konkreter Parserimplementierungen Parser GeneratedGeForMTParser parser lt lt uses gt gt parse expression a oe gt parse input startrule registerParser name parseFunction L _ Abbildung 5 2 Adaption der Parserimplementierung Anmerkung Repr sentation von Terminalsymbolen der Grammatik Generalisierte Schnittstelle 69 5 Konzeption und Implementierung Parsergenerierung F r die Entwicklung einer konkreten Parser Imple
70. der Gestaltungs breichen nach dem Box Modell b o Abbildung 4 7 Formalisierung von Interaktionsbereichen zur Spezifizierung des Objektkontext a Translatorische Bewegung auf einem Eckbereich b Skalierung eines Objektes in horizontaler Richtung ber die Randbereiche c Allgemeine Unterteilung in interaktive Bereiche Beispielsweise ist f r eine physische Geste Beispiel 1FCMOVEC object die nach Definition vgl Kapitel 2 2 3 ein realistisches Reaktionsverhalten anstrebt bedeu tend ob sich der Angriffspunkt mittig oder auf einer Ecke des Elements befindet vgl Abb 4 7a So kann aus dem Kontext bereits die Art der Manipulation geschlos sen werden Zum Beispiel ob das Objekt nur verschoben oder auch gedreht werden soll Bez glich der Objektskalierung k nnte die Differenzierung von Ecken und Kan ten M glichkeiten f r die Einstellung der Proportionserhaltung bieten Beispielswei se kann die Fokussierung gegen berliegender Randbereiche als Skalierung in hori zontaler oder vertikaler Richtung vgl Abb 4 7b interpretiert werden w hrend die Interaktion auf Eckbereichen f r eine proportianale Skalierung reserviert ist Aus der 4 2 Webkonforme Gestenformalisierung Kombinierung ergibt sich weiteres Potenzial Zum Beispiel das Festhalten des Inhal tes im Zentrum und Agieren auf den Randfl chen Daraus folgt eine Einteilung des Objektkontextes in interaktive Eck Rand und Kernfl chen wie die Abbildung 4
71. dy The design and evaluation of a flick gesture for back and forward in web browsers In Proceedings of the Fourth Australasian user interface conference on User interfaces 2003 Volume 18 Darlinghurst Australia Australia Australian Literaturverzeichnis Computer Society Inc 2003 AUIC 03 S 39 46 URL http portal acm org citation cfm id 820086 820097 ISBN 0 909925 96 8 Mozilla 2011 Mozilla Mozilla Developer Network 2011 URL https developer mozilla org Zugriffsdatum 28 09 2011 Mozilla 2012 Mozilla Mozilla Firefox Browser 2012 URL http www mozilla org de firefox Zugriffsdatum 10 02 2012 Murray 2010 Murray Greg iPad Web Development 2010 URL http gregmurray org ipad Zugriffsdatum 04 10 2011 Nygard 2010 Nygard Espen S Multi touch Interaction with Gesture Recognition Norwegian Uni versity of Science and Technology Department of Computer and Information Science Diplomarbeit June 2010 URL http citeseerx ist psu edu viewdoc download jsessionid Q FA32BF38832DC34020370E 1BCBC47A doi 10 1 1 175 422 amp rep rep1 amp type pdf Zugriffsdatum 11 02 2012 Poirier 2005 Poirier Franck Glyph A New Stroke Alphabet for Stylus Based or Key Based Text Ent ry 2005 URL http citeseerx ist psu edu viewdoc download doi 10 1 1 89 6001 amp rep repl amp type pdf Zugriffsdatum 11 02 2012 Pojer 2011 Pojer Christoph MooTools Mobile
72. e pr gten Gestenbeschreibung basierende FRAMOUS Framework for abstRct repre sentAtion of MultitOUch geStures G rg 2009 und der generische Ansatz von libTisch Tangible Interactive Surfaces for Collaboration between Humans Echtler und Klinker 2008 auf dem die formale Merkmalspezifikation von Gesten nach Echtler etal 2010 aufbaut Erweiternd werden im Folgenden zwei Frameworks auf Basis regelbasierter Sprach Gliederung der ans tze nach Khandkar und Maurer 2010a und Scholliers et al 2011 vorgestellt folgenden Abschnitte Anschlie end wird in Abschnitt 3 3 2 3 die Beschreibungssprache GeForMT die den Schwerpunkt dieser Arbeit ausmacht n her gebracht 3 3 2 1 TouchToolkit TouchToolkit ist ein Softwareentwicklungswerkzeug das die Entwicklung und den Prinzipieller Aufbau Test von Multitouch Anwendungen auf Basis der Microsoft Technologien Windows Presentation Foundation WPF und Silverlight unterst tzen soll Khandkar und Mau rer 2010b Abbildung 3 7 zeigt die Frameworkarchitektur deren Grundz ge bereits in Kapitel 3 1 im Vergleich zu Echtler und Klinker 2008 und Kammer etal 2010 DSL Domain Specific Language z dt Dom nenspezifische Sprache ist eine formale Sprache die f r ein spezifisches Problemfeld entworfen ist und eine fachlich ausgerichtete leichter erlernbare Programmierschnittstelle bildet 31 3 Verwandte Arbeiten Gestendefinition in GDL Abbildung 3 8 LASSO Geste zu
73. e RE a De ae BL kod 5 2 3 Selector ENGINE 2 8 car PH RG ee a EL an 5 2 4 Ereignisverarbeitung 2 2 0 5 25 Datenmodell ua Ae ey 2 2 28 a en ORE ES Ge EAE E Sa 5 2 6 Template Erzeugung und Gestenerkennung oaoa a 5 2 7 Feedback a 2 8 22 aa ar re en Br Be he A et 5 3 Anwendung u deed 2 Se en Sate be m De Drak INStallation ev war a zn Aig le nad 5 3 2 Anwendungsschnittstellen ooa a 5 337 TESLUMgEBUNGE A a iea RE a ea a a a E ae 5 3 4 Anwendungsprototyp 2 2222 2 2 a 6 Zusammenfassung und Fazit 6 1 FAUSBIIEK I 26 2 En ee ie An oe a BB AA Literaturverzeichnis Abbildungsverzeichnis Tabellenverzeichnis Listingverzeichnis 51 51 53 53 54 54 55 57 60 61 62 63 64 67 67 68 69 69 70 71 72 73 76 78 78 78 80 82 85 86 xi xii 1 EINLEITUNG 1 1 MOTIVATION Die Gestaltung von Webseiten ist ma geblich durch Eingabeger te wie die Maus und Tastatur gepr gt Mit dem Trend zur Mobilit t wachsen die Interaktionstechni ken des Internets ber ihre klassische Dom ne hinaus Web Anwendungen werden immer mehr ber ber hrungssensitive Benutzungsschnittstellen wie sie in Smart phones und Tablets verbreitet sind bedient Im Zuge dieser Entwicklung werden Programmierschnittstellen standardisiert die es Webentwicklern erm glichen auf Ber hrungen des Touch Displays zu reagieren und darauf aufbauend Multitouch Gesten in Webseiten zu implementieren Das daraus entstehende Potenzial
74. e gem der drei Phasen vgl Kapitel 2 2 2 einer Geste zu verarbeiten Listing 3 2 verdeutlicht die Schnittstellen Syntax Die Funktion jester repr sen tiert die Initialisierungs Komponente und stellt die Objektbindung zu einem HTML 3 3 Interpretation von Gesten Element her das durch Zugriffsfunktionen der DOM API zu erhalten ist Der zweite Parameter bestimmt die Konfiguration der gebundenen Gesten Im Beispiel wird die Interpretation einer TAP Geste zeitlich begrenzt Die Definitionen werden wie dar gestellt funktional verkettet und beziehen sich damit allesamt auf die genannten Einstellungen Die ausgewerteten Eingabedaten werden einer Handler Funktion in einem benutzerdefinierten TouchGroup Objekt geliefert optional auch die Ausf h rungsrichtung AR Er GE es jester document getElementById elementId tapTime 80 1 2 tapChandler 3 doubletap handler 4 swipe handler 5 var handler function touchGroup direction Listing 3 2 Einbindung von Multitouch Gesten in Jester Seaward 2010 Moousture ist ein Framework das auf der JavaScript Bibliothek Mootools aufbaut Das Ziel von Moousture lehnt an die Zielstellung dieser Arbeit an die Uber die Ver arbeitung von Standard Gesten hinaus geht Das Framework unterst tzt die Ent wicklung und Integration benutzerdefinierter Gesten und erm glicht die Steuerung des Erkennungsprozesses vgl Sibt e Hassan 2010 Die Komponenten des Frame works be
75. e w re eine genaue Positionierung auf Basis relativer Bewegungen sehr schwer man k nnte behaupten unm glich Das Tracking bersetzt die Bewegungen auf die Cursorposition leitet jedoch keine bedeutenden Systemaktionen ein Hierf r ist ein weiterer ausdrucks st rkerer Zustand des Eingabesystems vorgesehen der durch durch das Bet tigen einer Maustaste oder vergleichbare Schaltmechanismen initiiert wird Ein derarti ger Zustand ist essentiell um eine gestische Handlung sicher abzugrenzen und zu erkennen Am Beispiel des Trackpads ist zu sehen dass ein ber hrungssensitives Ein 3 4 Applikation gabeger t durchaus f hig ist ein Zeigesystem wie die Maus zu emulieren vgl Wig dor und Wixon 2011 S 69 Die Anwendung des 2 Zust nde Modells der Touch Interaktion f r die absolute Positionierung des Cursors ist dahingegen schwieriger wenn Ein und Ausgabebereich separiert sind Der Nutzer m sste die Benutzerober fl che vor seinem geistigen Auge auf die Eingabefl che projezieren und die Position und Gr enverh ltnisse sch tzen was hinsichtlich der Genauigkeit dieser Methode problematisch ist Stiftbasierte Eingabesysteme sind weitaus flexibler einsetzbar Einige Grafiktablets erlauben es besipielsweise zwischen relativer Zeigersteuerung und absoluter Eingabe im Rahmen von Tablet Grenzen umzuschalten Dies setzt entsprechende Technolo gien und Hardware voraus mit denen sich die genannten Zust nde emulieren lassen Beispie
76. egen beim Zeich Bewegungsformen in nen einer Pfeilspitze beschrieben durch den Ausdruck LINE_SE LINE_SW erst ab dem Pfadknick ausreichend Daten vor um die Geste zu klassifizieren Die sequen tielle Komposition ist demzufolge nicht sinnvoll Aber auch die Erkennung einer atomaren Geste wie eine Kreisbewegung zur Eingabezeit ist in dieser Hinsicht ei ne Herausforderung Die Formalisierung von Online Gesten konzentriert sich damit auf eindimensionale und willk rliche Bewegungen Online Gesten Die Komposition zu Mischenformen aus zusammengesetzten Gesten und Multitouch Komposition zu Gesten setzt in ihrer Implementierung eine Priorisierung der Operationen voraus An Wischformen dieser Stelle wird eine in ihrer Implementierung nicht zu untersch tzende Komplexi t t zugelassen Die Anwendbarkeit dieser Gesten ist abzuw gen und in weiterf h renden Arbeiten anhand von Beispielen zu evaluieren Relationen wie SYNC JOIN SPLIT wurden eingef hrt um r umliche Beziehungen Operationsbezogene zwischen ein oder mehreren synchron ausgef hrten Bewegungen n her zu spezi Relationen fizieren Sprachbausteine wie CROSS und CONNECT konzentrieren sich hingegen auf sequentielle Kompositionen atomarer Gesten In Kapitel 4 2 4 wurden weitere Vorschl ge gemacht die sich speziell auf die Anwendung in zusammengesetzten Gesten beziehen 63 4 Synthese 64 Die Spezialf lle zeigen den Bedarf einer Validierungsvorschrift der Sprache auf die
77. eitig detektiert werden Bedeutend ist die Anzahl der Kontakte In yultitouch Gesten Weil 2010 werden darauf aufbauend 7 bis 5 Level Gesten betrachtet die system abh ngig mehr oder weniger Relevanz haben W hrend 1 Level Gesten die Grund lage f r Zeigehandlungen bilden und einen hohen Kompatibilit tsgrad verschiede ner Eingabeger te aufweisen erweitern Level 2 Gesten das Gestenrepertoire nicht nur quantitativ sondern auch qualitativ um neue Steuerungsm glichkeiten wie die Objektmanipulation oder hnliche kontextbezogene Eingaben Dorau 2011 S 174 H herwertige Gesten sind nach Weil 2010 in gr eren Systemen vertre ten und erst bei einem ausreichend gro en Touchscreen sinnvoll Multitouch Gesten k nnen ein oder beidh ndig ausgef hrt werden Dies hat sich jedoch bisher nicht als unterscheidbares Merkmal durchgesetzt sondern vertritt Anweisungen meist in gr eren Dimensionen Wobbrock etal 2009 Bez glich der Anzahl registrierter Kontakte ergeben sich viele Variationen einer Geste vgl Hinrichs und Carpendale 2011 dessen prinzipielle Ausf hrung und Intention oftmals die selbe ist In Wobbrock etal 2009 wird eine semantische Unterscheidung von Gesten be Semantische z glich ihrer Natur vorgenommen Symbolische Gesten wie zum Beispiel ein Pfeil Klassifikation oder ein Fragezeichen sind bildlich zu interpretieren Physikalische Gesten bilden das Verhalten bei der Manipulation von realen Obj
78. ekten ab In Kammer etal 2010 wird dar ber hinaus unterschieden ob eine physische Geste eine Zeigehandlung darstellt deiktisch objektorientiert ist manipulierend oder als freie Geste auf die gesamte Ansicht Einfluss nimmt navigierend Das Auseinanderbewegen mehrerer Finger auf einem Objekt f hrt beispielsweise zu dessen Skalierung w hrend die selbe Geste applikationsweit ein Zoomen in die dargestellte Szene bewirkt Als me taphorisch wird eine Geste bezeichnet die ein Verhalten abstrahiert und imitiert Dabei ist zu beachten dass Metaphern je nach kulturellem Hintergrund verschieden ausgelegt werden k nnen Kammer etal 2010 Eine abstrakte Geste erkl rt sich hingegen nicht ber eine Metapher oder ein Symbol und muss folglich erst erlernt werden Ein Beispiel nach Wobbrock etal 2009 ist das dreimalige Tippen auf ein Objekt um es zu l schen 2 Grundlagen Online und Offline Gesten Client Server Architektur FORM CONTENT Graphic Information Designers Architects css HTML JS BEHAVIOR Interaction signers Abbildung 2 3 Design Disziplinen nach Cooper etal 2007 S xxxi und zugeordnete Web Standards Historische Entwicklung Ein entscheidender Aspekt f r das Ruckmeldeverhalten von Gesten ist der Zeitpunkt ihrer Interpretation WOBBROCK ET AL unterscheiden eine diskrete und kontinu ierliche Erkennung vgl Wobbrock etal 2009 gleichbedeutend mit der Klassi fikation von Offline und
79. engr e und der Abstand zu den umgebenden und bergeordeneten Elementen in den vier m g lichen Seiten genau bestimmt werden kann Ein weiteres hilfreiches Konzept f r die Adaption des Layouts an verschiedene Aus gabemedien ist das sogenannte Media Query Ein Media Query ist ein logischer Aus druck der die Bedingungen des Ausgabemediums festlegt f r die die enthaltenen CSS Regeln bestimmt sind Das Layout kann an die Voraussetzungen des Ger tes angepasst werden indem Gr e Aufl sung Farbsystemeigenschaften Format und Medientyp abgepr ft werden vgl W3C 2010a Das Beispiel in Listing 2 2 zeigt wie das Layout aufbauend auf einem Media Query f r ein mobiles Endger t im Quer format optimiert werden kann SB LT DZ gt msi 1 media handheld and max device width 480px 2 and orientation landscape Listing 2 2 Beispiel eines Media Queries f r die optimierte Darstellung auf einem mobilen Endger t 2 3 4 Programmiersprache JavaScript JavaScript ist eine Programmiersprache die 1995 von Netscape eingef hrt wurde Netscape bem hte sich um die Verbreitung der Sprache als Standard und spannte dazu die Organisation ECMA European Computer Manufacturers Association mit ein Der Sprachkern von JavaScript wurde in der Spezifikation ECMA 262 zum Stan dard deklariert und ist unter dem Namen ECMAScript bekannt Sch fer und Str big 2007 Die aktuelle Ausgabe von ECMAScript ist in der Version 5 ver ffentlicht D
80. ent Anwendung von Methoden der Gestenerkennung Erweiterung um andere Template Matching Verfahren Schnittstelle des Moduls 76 Grafischer Kontext Implementierung Des Weiteren stellt der RecognitionProcessManager eingehende Touch Events und deren enthaltene Daten in einem Profil zusammen Unter priorities wer den potenzielle Kandidaten aufgelistet F r jeden Kandidaten werden das Event profil eventProfiles und Templates unter Zuhilfenahme des TemplateBuilder Moduls gesturePathes aktualisiert Au erdem wird das jeweilige Objektmodell models bereitgestellt Daran lehnt die Klasse CheckModel an Sie bildet die Be standteile einer Geste als eine Art Aufgaben Checkliste f r den Erkenner ab Somit kann gepr ft werden ob eine Geste vollst ndig erkannt ist und wenn nicht welcher Bestandteil als n chstes zu pr fen ist Der Recognizer ist als generalisierte Schnittstelle f r die Erkennungsroutinen im plementiert Alle Anfragen zur Auswertung einer Geste werden an dessen Metho de recognize gerichtet Der RecognitionProcessManager schn rt hierf r ein In formationspaket das im Diagramm in Abbildung 5 7 als RecognitionContext zu finden ist und der besagten Methode bergeben wird Es enth lt alle bis zum Zeit punkt der Anfrage gesammelten Daten Kandidaten Eventprofile Templates Ob jektmodelle etc Je nach Kontext und Problemstellung wird darauf aufbauend ein konkretes Erkennungsverfahren angewandt Das bedeutens
81. er Einarbeitung und Benutzung des Frameworks Diese Ziele gehen mit der Beschreibungssprache GeForMT konform auf der das Framework aufbaut In Hinblick auf die weiterf hrende Optimierung des Frameworks wird eine modulare Implementierung der Komponenten vorgeschlagen um die Wiederverwendung und Austauschbarkeit dieser zu erm glichen Die Umsetzung erfolgt auf Basis bew hrter Entwurfs und Coding Muster wie beispielsweise das Revealing Module Pattern das in Kapitel 2 3 5 vorgestellt wurde und unter anderem ein Konzept f r die Struktu rierung und Zugriffskontrolle des Codes bereitstellt Kompatibilit t stellt sich als Kriterium in zweierlei Auspr gungen dar Zum einen den ger te und plattformunabh ngige Einsatz des Frameworks zum anderen die Verwendung als Werkzeug neben anderen Bibliotheken die sich beispielsweise auf Transparenz Erweiterbarkeit Kompatibilit t 67 5 Konzeption und Implementierung Performanz Feedback bersicht implementierter Module Verarbeitungsschritte einer Gestendefinition 68 die grafische Gestaltung des User Interface konzentrieren Die L sung der ersten Problematik st tzt sich auf den Erkenntnissen in Kapitel 3 2 Anhaltspunkt f r die plattform bergreifende Unterst tzung des Frameworks sind die empfohlenen Stan dards des W3C Darauf aufbauend ist eine Adaption von Maus und Touch Eingaben vorzunehmen damit das Framework sowohl in desktopbasierten als auch mobilen Web Browser
82. er eingeschr nkten Leistungsf higkeit wie der geringeren Rechenkapazit t und Bildschirmaufl sung gerecht werden vgl Bieh 2008 S 27 f Insbesondere die fehlende Zeigersteuerung in kleinen Mobilger ten erschwert die Interaktion mit Web Seiten die urspr nglich f r eine Bedienung mit der Maus aus gelegt sind Apple gelang 2007 die erfolgreiche Markteinf hrung des iPhones das allein durch Ber hrung des Displays zu steuern ist und setzte damit den Ma stab f r kommende Mobilger te vgl Bieh 2008 S 27 f 2 1 2 Web Browser Der Web Browser bildet einen grafischen als auch funktionalen Rahmen um das Web Interface und bietet grundlegende Funktionen an um in Web Seiten zu navi gieren Kern der Anwendung ist die Rendering Engine die f r die grafische Umset zung der Web Seiten Dokumente verantwortlich ist Namhafte Web Browser sind Firefox Internet Explorer Safari Chrome und Opera vgl Wikipedia 2012 F r den mobilen Einsatz in Smartphones und Tablets haben die Hersteller kompaktere Versionen ihrer Browser entwickelt die speziell an die Erfordernisse der Ger te an gepasst sind Sie basieren auf Betriebssystemen wie zum Beispiel iOS Apple 2012 oder Android Google 2011 Zur funktionalen Grundausstattung der Web Browser z hlen im Allgemeinen die Adresszeile die Einbindung eines Web Suchdienstes Funktionen zum Vor und Zu r ckbl ttern in der sogenannten Browser History sowie eine Ablage f r favorisierte
83. eranz bei der Interpretation einer Ge ste angepasst werden kann Beispielsweise indem eingestellt wird wie viel Prozent bereinstimmung mindestens notwendig ist dass die Geste als erkannt gilt Die Konfigurationsparameter w rden letztlich als Variablen des Objekt Literals imple mentiert vgl Listing 4 5 4 2 8 Potenzial der Wiederverwendung von Definitionen Die Wiederverwendung von Definitionen ist von Vorteil wenn sich Teilausdr cke wiederholen oder Bestandteil komplexerer Gesten sind F r die Wiederverwendung wird der eindeutige Bezeichner einer Geste dazu benutzt um ihn in einer anderen Definition einzubetten vgl Henzen 2010 Zu beachten ist dabei dass der Bezeichner einer Geste nicht im dazugeh rigen GeForMT Ausdruck enthalten ist da mit dem Ersetzungsprozess des Frameworks eine Rekursion durchl uft die nur durch eine eingreifende Abbruchbedingung ter miniert Man k nnte sich diese rekursive Vorschrift zu nutze machen allerdings sind hierf r noch Anwendungsbeispiele zu finden Desweiteren ist zu pr fen dass der Ausdruck der Geste auch nach der Substitution des Bezeichners ein g ltiger Aus druck gem der GeForMT Syntax ist In der Implementierung der Wiederverwen dung zeigt sich der Bedarf von Symbolen die den Gesten Bezeichner eindeutig vom Rest des Ausdrucks abgrenzen Dies zeichnet das Nicht Terminalsymbol zum einen auf geeignete Weise aus Zum anderen wirkt es dem Fall entgegen dass Bezeichner in anderen B
84. erfahren Matching Verfahren wie der 1 Recognizer sind aufgrund ihres ausgewogenen Ver h ltnisses von Erkennungsrate Speicherbedarf Toleranz und Umsetzbarkeit in ei ner JavaScript Implementierung eine geeignete Wahl Ein entscheidender Vorteil des Verfahrens ist der geringe Aufwand hinsichtlich der Merkmalsextraktion die w h rend der Laufzeit der Anwendung erfolgt Die zu Grunde liegende Datenstruktur besteht aus normierten Koordinaten die einen Gestenpfad repr sentieren An die ser Stelle setzt das Modul TemplateBuilder an Das Modul erzeugt sowohl aus der formalen Gestenbeschreibung als auch auf TemplateBuilder Modul der Basis von Ereignissen Template Objekte eine Punktliste f r jeden Gestenpfad Jedes Template erh lt einen Identifikator identifier der es insbesondere bei Multitouch Gesten erlaubt einzelne Ber hrungspunkte in Beziehung zu setzen und damit einem Pfad zuzuordnen Abbildung 5 5 veranschaulicht die Modellierung TemplateBuilder u createTemplateBasedOnFormalization atomType directionType rotationType createTemplatesBasedOnEventProfile events updateTemplatesBasedOnEventProfile events templates T lt lt creates gt gt 1 V Template Point 0 L i _ Abbildung 5 5 TemplateBuilder Modul Das Schema in Abbildung 5 6 verdeutlicht die Zusammenh nge der drei Hauptas Erkennung von pekte der Gestenerkennung vgl Kapitel 3 3 3 1 am Beispiel einer L Geste Ausge GeforMT Gesten mit 1
85. erkehrs plan bietet ausreichend Potenzial f r ein gestenbasiertes Interaktionsdesign Doch auch im Bereich der prototypischen Software Entwicklung kann sich das Framework als n tzliches Werkzeug erweisen Im Sinne einer kundenorientierten Entwicklung propriet rer Software wie beispielsweise einer App auf einem iPad w re eine ru diment re Implementierung der Benutzerschnittstelle sogenannte Mock ups auf Grenzen des Erkennungsverfahrens Erweiterung um eine Zeiterfassung Feedback und Feed Forward Entwicklung konkreter Anwendungen 87 6 Zusammenfassung und Fazit 88 Dreidimensionale Gestenerkennung Basis von Web Technologien erg nzt um die Gestenformalisierung mit weniger Im plementierungsaufwand und Programmierwissen verbunden Basierend auf weiteren in Arbeit befindlichen W3C Standards wie beispielsweise der DeviceOrientation Spezifikation W3C 2011b und kommenden Schnittstellen f r die Kameraauswertung W3C 2011d ist eine Weiterentwicklung von GeForMT hinsichtlich der dreidimensionalen Gestenerkennung denkbar F r die Formalisie rung r umlicher Gesten k nnten Ans tze aus Henkens 2011 aufgegriffen werden Die M glichkeiten f r die Weiterf hrung der Arbeit sind damit sehr vielf ltig LITERATURVERZEICHNIS Anthony und Wobbrock 2010 Anthony Lisa Wobbrock Jacob O A lightweight multistroke re cognizer for user interface prototypes In Proceedings of Graphics Interface 2010 Toronto Ont
86. ern Knoten und m s sen demnach auch als solche registriert werden Durch das Bubbling wird das Event an die Elternelemente vererbt und so eine Blockade vermieden 71 5 Konzeption und Implementierung Entwicklung auf Basis 72 von TUIO Objektmodell einer Gestenbeschreibung Das Browser Plugin npTU OClient und die JavaScript Connector Implementierung MagicTouch die in Kapitel 3 2 2 behandelt wurden sind eine optimale Erweiterung des Event Systems um auch TUIO basierte Systeme zu unterst tzen Die L sungen sind vom Framework unabh ngig und k nnen bei Bedarf zus tzlich installiert wer den Insbesondere f r das Testen des Frameworks auf dem Entwicklungssystem ist ihr Einsatz von Vorteil Damit ist es beispielsweise m glich Touch Eingaben mit dem Simulator des ReacT Vision Frameworks Kaltenbrunner und Bencina 2009 zu simu lieren Noch komfortabler ist das Testen unter der Verwendung eines Multitouch Ger tes wie zum Beispiel ein Tablet Trackpad oder Touchscreen Monitor M gliche Tracker und Serverimplementierungen die hierf r verwendet werden k nnen sind in Kaltenbrunner 2011 zusammengefasst 5 2 5 Datenmodell Das GestureModel Modul fasst alle Ergebnisse des Verarbeitungsprozesses einer GeForMT Definition zusammen und speichert sie f r die Laufzeit der Anwendung Es bildet damit das Kernst ck des Frameworks aus dem der Gestenerkenner letzt lich Informationen ber die Parameter formal definierter Gesten
87. ert wurde behandelt wird Die Bubbling Phase reicht das Event in entgegengesetzter Reihenfolge zum Cap turing Prozess weiter sprich an alle Eltern Elemente Je nach Festlegung des Para meters kann entweder die Capturing Phase oder die Bubbling Phase bersprungen werden Damit entscheidet sich der Entwickler f r die Richtung des Event Flusses vgl W3C 2011c Die Weitergabe der Events kann nach Belieben mit der Methode event stopPropagation unterbunden werden berlicherweise implementie ren die Web Browser ein Standardverhalten f r die Ereignisse Beispielsweise wird bei der Selektion eines Eingabefeld ein Fokusrahmen als Markierung gesetzt Auch wenn das primitive Feedback durchaus seine Berechtigung hat kann es in speziellen F llen st ren Mit der Methode event preventDefault C l sst sich das Standard verhalten unterdr cken W3C 2011c 13 DeviceOrientation Event Spezifikation W3C 2011b Event Ausbreitung Capturing und Bubbling none HH Abbildung 2 7 Phasen der Event Ausbreitung im DOM Baum 3 VERWANDTE ARBEITEN 3 1 ARCHITEKTURMODELL Ziel der folgenden Betrachtung ist den generellen Aufbau eines Gestenerkennungs systems und die Einordnung eines daraufbezogenen Frameworks vor allem in Bezug auf den Einsatz in Webanwendungen zu verstehen Abbildung 3 1 zeigt den Ansatz einer allgemeinen Schichtenarchitektur nach Echtler und Klinker 2008 links im Bild In Khandkar und Maurer 2010a und
88. es richtet sich hier ma geblich nach der Methode die die Ausf hrungsrichtung ermittelt WOBBROCK LI und ANTHONY schlagen statt der bersetzung in formale Parameter eine Normierung der Koordinaten vor und schaffen damit eine tolerante Vergleichsbasis auf elementarer Ebene Wobbrock etal 2007 Li 2010b Ant hony und Wobbrock 2010 Einer hohen Erkennungsrate die mit DTW vergleichbar ist Wobbrock etal 2007 steht die F higkeit gegen ber hohe Abweichungen von den Vorlagen als Fehleingabe zu interpretieren Dies leistet der Algorithmus nicht Eine differenzierte Klassifikation der Gesten h ngt in diesem Ansatz ma geblich von den Vorlagen ab Die Normierung f hrt dazu dass bestimmte Unterscheidungs merkmale wie zum Beispiel die Gr enverh ltnisse nicht in die Erkennung einflie en k nnen Hinsichtlich der Erkennung von Multitouch Gesten fehlt den richtungs und koordinatenbasierten Template Matching Methoden grunds tzlich der zeitliche Be zug Es erfolgt demnach lediglich eine Auswertung der Bewegungsform Dennoch eignen sich diese Verfahren am ehesten f r den Einsatz in einem Web Framework vorallem in Hinblick auf die Anwendung in mobilen Webanwendungen und hin sichtlich ihrer Flexibilit t und Erweiterbarkeit 41 3 Verwandte Arbeiten Bezugssystem Relative Zust nde absoluter und 42 und absolute Positionierung relativer Eingaben 3 4 APPLIKATION In diesem Kapitel werden Aspekte des Interaktionsdesig
89. eworks und Methoden der Gestenerkennung vorgestellt siehe Kapitel 3 3 Schlie lich werden in Kapitel 3 4 entsprechend der obersten Architektur Schicht As pekte des Interaktionsdesigns in Multitouch und Webanwendungen thematisiert 3 2 Web Browser 3 2 WEB BROWSER Die grundlegenden Funktionen eines Web Browsers wurden bereits in Kapitel 2 1 2 beschrieben Deren Implementierung variiert hinsichtlich der Erfordernisse des zu grunde liegenden Betriebssystems Auf Basis der Empfehlungen des W3C von deren Umsetzung auszugehen ist vgl Kapitel 2 1 3 kann das Web Framework auf ein heitlichen Schnittstellen aufgebaut werden Die folgenden Abschnitte besch ftigen sich mit Ans tzen f r die Einbindung elementarer ber hrungsbasierter Eingaben in Webanwendungen 3 2 1 Verarbeitung von Multitouch und Stift Eingaben In Kapitel 2 3 6 wurden bereits Konzepte der Ereignisbehandlung in JavaScript be schrieben Die Standardisierung bez glich der Interaktion im Web bezieht sich dabei historisch begr ndet auf klassischen Eingabetechniken wie Maus und Tastaturein gaben Auch wenn Browser wie zum Beispiel der auf iOS basierende Safari Apple 2012 die Bedienbarkeit von Web Seiten sicherstellt indem er Gesten wie TAP auf Mausklicks technisch abbildet entspricht dies nur einem Bruchteil des Potenzials der ber hrungssensitiven Interaktion vgl Kapitel 2 2 3 Event EventTarget a g addEventListener currentTarget
90. ezeichnern enthalten sein k nnen Die Einklammerung in spitzen Klam mern wie in Listing 4 6 vorgestellt wird erscheint hierf r als geeignet Es wird dazu das Beispiel aus Henzen 2010 aufgegriffen das einen Pfeil Richtung Norden und dessen zweimalige sequentielle Ausf hrung beschreibt Die Freiheiten in der Wahl des Bezeichners bleiben durch die Abgrenzung gewahrt SSS Zkhyz sr v v GG EEEEEEEGGG lt E HI Nordpfeil LINE_N LINE_NE LINE_SE Doppelpfeil lt Nordpfeil gt lt Nordpfeil gt Listing 4 6 Klammerung von wiederverwendeten Bezeichnern Eine andere Form der Wiederverwendung ist in Abschnitt 4 2 5 mit der Definition von Objektmengen mit Selektoren erkl rt Im Folgenden wird ein alternativer Ansatz vorgestellt in dem die Beschreibung der Gestenausf hrung als objektunabh ngige Vorlage verwendet werden kann Der Aktion die durch die Erkennung einer Geste ausgef hrt wird steht die An weisung gegen ber wie es in Kapitel 3 4 3 erkl rt wurde Die Gestenbeschreibung 4 2 Webkonforme Gestenformalisierung mit GeForMT sind haupts chlich in das dort erl uterte Abstraktionslevel gestural einzuordnen da sie die Handlung selbst abbildet Die Erweiterung des Wiederver wendungskonzepts in der Form wie sie in Listing 4 7 beispielhaft abegbildet ist erm glicht die Formalisierung von Gesten auf der representational Ebene Der Ob jektkontext wird in der Beschreibung offen gehalten indem stattdessen Platzhalte
91. ezifikation von TUIO kann in Kalten brunner 2011 nachgeschlagen werden Der TUIO Server bildet eine Vermittlungs schicht Auf der Client Seite empf ngt ein installierter TUIO Receiver die TUIO Pakete und gibt sie in adaptierter aber nicht standardisierter Form an die Anwendung wei ter Es schlie t sich je nach Anwendungskontext ein Gestenerkennungsmodul an HARDWARE TRACKER TRANSFORMATION INTERPRETATION TUIO SERVER TUIO CLIENT APPLICATION Pattern Image TUIO Architektur Processing TUIO Gesture nach Teiche et al raw mage a TUIO Receiver rate p Recognition o eo Detection Update Scene TUIO Client Se add nach Rusadi rar bata p TUIO gt npTuioClient ue catacelp TUIOjs update Impl ms remove touchstart a rar bata TUIO P PookyTouch ERSA DD jPooky Impl By g touchcancel gesturechange WEB BROWSER JAVASCRIPT u PLUGIN CONNECTOR Abbildung 3 3 Implementierung eines webbasierten TUIO Clients nach Teiche etal 2009 Rusadi 2009 und Cailliau etal 2009 25 3 Verwandte Arbeiten 26 Ans tze der Client Implementierung RUSADI und CAILLIAU ET AL schlagen jeweils ein Browser Plugin f r die Aufga ben des TUIO Receiver vor npTuioClient ist eine NPAPI basierte Implementierung eines Browser Plugins und damit in verschiedenen Plattformen und Browsern wie Firefox Chrome und Safari einsetzbar Mit jedem Empfang von TUIO Daten wird die JavaScript Cal
92. feinander abbilden lassen vgl Ereignis Typen in Kapitel 2 2 2 Kapitel 2 3 6 und Kapitel 3 2 1 HIT ENTER MOVE LEAVE RELEASE touchstart touchenter touchmove touchleave touchend mousedown mouseover mousemove mouseout mouseup Abbildung 4 3 Elemente des Ereignisprofils von Gesten Pfadbasierte Gesten zeichnen sich durch die auf Bewegung basierenden Ereignisse Nachbildung des ENTER MOVE und LEAVE aus F r atomare Gesten die in GeForMT als LINE CIRCLE Ereignisprofils SEMICIRCLE und MOVE beschrieben sind ist eine H ufung dieser Ereignisse cha rakteristisch Entscheidend ist die Auswertung der Bewegungsform und richtung Statische Gesten kommen im Idealfall mit den Ereignis Typen HIT und RELEASE aus wobei Kontaktform und temporale Parameter in den Vordergrund r cken Es k n nen Gesten wie POINT und HOLD abgeleitet werden DEPOINT ist ein Sonderfall der als Kontaktverlust entsprechend dem RELEASE Ereignis zu interpretieren ist und vorrangig als Trenner in der Definition zusammengesetzter Gesten dient ENTER und LEAVE werden von der Sprache nach aktuellem Stand nicht erfasst In Abschnitt 4 2 5 wird ihre Relevanz im Kontext des Objektbezugs diskutiert 53 4 Synthese Voraussetzungen Anwendbare Sprachbausteine Abstraktion und konkrete Auspr gung 54 Unterscheidung 4 2 2 Formalisierung von Mausgesten Aufbauend auf der Abbildung verschiedenartiger elementarer Ereignistypen im vor angegangenen Absc
93. form ist demnach ein charakteristisches r umliches 2 2 Gestenbasierte Interaktion Muster eines Bewegungspfades Nach Dorau 2011 S 178 f k nnen folgende Bewegungsformen unterschieden werden Bewegungsformen Translatorische Bewegung Eine eindimensionale geradlinige Bewegung Wellenf rmige Bewegung Eine Bewegung die einem frequenten Muster folgt Kreisf rmige Bewegung Eine Bewegung die gleichm ig um einen zentralen Punkt herumgef hrt wird Spiralf rmige Bewegung Eine kreisf rmige Bewegung mit dynamischen Ab stand zum Kreiszentrum Spur Nach Dorau 2011 wird eine Spur als Abfahren eines Bewegungspfa des definiert Sie ist als komplexe Form aufzufassen die sich aus verschiedenen Bewegungsformen zusammensetzen kann R umliche Muster sind nicht nur innerhalb eines Bewegungspfades elementarer R umliche Muster pfadbasierter Gesten festzustellen Durch die Kombination elementarer Gesten bil kombinierter Gesten den sich Relationen zwischen den jeweiligen Eigenschaften und Bewegungsmerk malen Diese lassen sich als weitere Charakteristik der Geste erschlie en Eine Ge ste die sich beispielsweise aus mehreren TAP Gesten zusammensetzt und bewusst unterschiedliche Positionen fokussiert folgt in ihrer Gesamtheit einem r umlichen Bewegungsmuster Das selbe gilt f r die Komposition pfadbasierter Gesten Abh ngig vom Erkennungsspektrum des Eingabesystems k nnen ein oder mehrere Single und Kontakte gleichz
94. ften entity property Entity alert entity property Entity oo o aauRrkWwh N gt Listing 2 4 Konstruktoren und Prototypen In Listing 2 4 wird ein Beispiel der konkreten Implementierung in JavaScript gegeben Es zeigt die Definition des Konstruktors mit dem Namen MyObject Zeile 2 und der Objekt Instanziierung Zeile 6 In Zeile 4 wird eine Eigenschaft des Prototyp Objektes berschrieben Diese gilt f r alle zugeh rigen Instanzen vgl Zeile 7 Mit Zuweisung einer Instanz Eigenschaft unter dem selben Eigenschaftsnamen Zeile 9 und 10 wird die Prototyp Eigenschaft berlagert Dies gilt dann aber nur f r die eine Instanz 2 3 Softwaretechnologische Grundlagen Prototypen geben die M glichkeit Code wiederzuverwenden und performant zu halten da Eigenschaften und Methoden nicht f r jede Instanz neu erzeugt werden m ssen Weiterhin erlauben sie bestehende Host oder ECMAScript Objekte um neue Funktionalit t zu erweitern Sie sind damit ein wichtiges Werkzeug f r die Entwicklung anwendungsspezifischer Datenstrukturen Eine besondere Herausforderung ist die Kapselung von Skripten um sie vor uner w nschten Zugriffen zu sch tzen Ziel ist es die Portierbarkeit in andere Umgebun gen und Kompatibilit t zu Code anderer Entwickler zu gew hrleisten Im Grunde sind dazu Namenskollisionen zu vermeiden Stefanov 2011 5 11 ff Ein verbrei tetes Muster ist das sogenannte Revealing Module Pattern Sch fer 20
95. geben Unter der Bezeichnung Touchscreen Monitor werden in dieser Arbeit be r hrungsempfindliche Displays zusammengefasst die in Desktopsystemen einge setzt werden oder auch in Notebooks integriert sind um die Touch Bedienung op tional neben der Steuerung ber die Standardeingabeger ten zu erlauben vgl Ab bildung 2 1b Insbesondere in mobilen Endger ten wie Smartphones vgl Abb 2 1d PDAs Perso nal Digital Assitant Tablets vgl Abb 2 1c und hnliche Handheld Ger te hat sich 6Handheld Engl Bezeichnung f r ein tragbares Mobilger t das in einer Hand gehalten werden kann 2 2 Gestenbasierte Interaktion die Multitouch Technologie mit steigender Rechenkapazit t verbreitet Die Hardware Tastatur wird allm hlich von den flexibleren softwaregest tzten Eingabekonzepten die sich mit Touchscreens offenbaren ersetzt Weil 2010 Der Zugang zum Internet ber eine entsprechende Browsersoftware geh rt mittlerweile zu den Standardfunk tionen mit denen die Ger te ausgeliefert werden Zus tzlich zu den Touchscreen Sensoren verf gen moderne Ger te ber Bewegungssensoren die die Ausrichtung erfassen Verbreitet ist die Unterscheidung zwischen Hochkant und Querformat wonach die Darstellung optimiert wird Eine weitere erw hnenswerte Eingabetechnik ist die stiftbasierte Eingabe Stifte die Stiftbasierte Systeme nen als Werkzeug f r eine pr zisere Eingabe das vorallem in Grafikbearbeitungs und Schreibsoftwa
96. gef hrter Gesten Das letzte Set definiert objektorientierte Gesten Option Object oriented gestures Da sie zum Gro teil zur Eingabezeit erkannt werden wird an dieser Stelle ein spe zifisches Feedbackverhalten implementiert um die Erkennung dieser Gesten besser testen zu k nnen Vier objektorientierte Gesten sind in diesem Set definiert Das An tippen tapObject Verschieben moveObject Skalieren moveObject und die Aus wahl von einem oder mehreren Objekten mit einer LASSO Geste Abbildung 5 13 veranschaulicht das Verhalten der Objekte bei Erkennung der letzten drei Gesten F 1 moveObject scaleObject lasso Abbildung 5 13 Skizzierung der objektorientierter Gesten zum Verschieben Skalieren und Selektieren Details zum Bestand der Gesten und deren Ausf hrungseigenschaften k nnen der jeweiligen formalen Definition entnommen werden Diese werden in der Testumge bung bei der Initialisierung in der Konsole angezeigt Set 3 Multitouch Gesten Set 4 Objekt orientierte Gesten 81 5 Konzeption und Implementierung F hrung durch die Web Anwendung durch Bl ttern Symbolische Gesten und Navigation durch Browser History Herausforderungen f r 82 Web Entwickler 5 3 4 Anwendungsprototyp Fur die Implementierung eines Anwendungsprototypen wird das in Kapitel 4 1 be schriebene Anwendungszenario aufgegriffen Die darin vorgestellten Konzepte der gestenbasierten Navigation werden exemplarisch in einer
97. h dabei um Maus und Tastatureingaben erg nzt um Ereignisse f r die Auswertung der Orientierung mobiler Endeger te vgl W3C 2000 W3C 2011c und W3C 201 1b e Maus Eingaben click dbclick mousedown mouseup mousemove mou seover mouseout wheel e Tastatur Eingaben keyDown keyUp keyPress 12 Eingef hrt im Arbeitsentwurf der DOM Level 3 Event Spezifikation in W3C 2011c 2 3 Softwaretechnologische Grundlagen e Orientierung orientationchange devicemotion compassneedscali bration Es existieren weitere Ereignistypen die sich speziell auf die Bedienelemente des HTML Dokumentes beispielsweise focus select oder submit oder des Browser Interface beispielsweise resize oder scroll beziehen Touch Events werden ge sondert an anderer Stelle dieser Arbeit betrachtet siehe Kapitel 3 2 Der Parameter capturing der Interface Methoden in Listing 2 7 ist ein boolscher Wert der die Art der Event Ausbreitung oft auch als Event Fluss bezeichnet be stimmt Dabei ist zu verstehen dass ein abgesetztes Event einen Prozess bestehend aus drei Phasen durchl uft Abbildung 2 7 veranschaulicht diese am Beispiel eines Events das auf dem HTML Element div definiert wurde In der Capturing Phase wird das Event im DOM Baum von dem obersten Eltern Knoten durch alle Element Knoten auf dem Pfad zum Zielelement durchgereicht Es folgt die At Target Phase in der das Ereignis auf dem Zielelement auf dem es registri
98. hneten Objektes wie zum Beispiel eine Checkbox Oftmals geht diese Art der Selektion auch mit der Ausf hrung einer Funktion und Weiterleitung zu einer neuen Ansicht einher wie es bei Links und Buttons der Fall ist F r stiftbasierte Systeme eignet sich auch das Unterstreichen oder Umkreisen eines Objektes oder einer Textauswahl Gei ler 2001 S 75 WIGDOR ET AL weisen auf das Potenzial des Durchstreichens von Auswahloptionen siehe Abb 3 15 zur Adaption des traditionellen Selektions prinzips f r Stifteingaben hin Wigdor und Wixon 2011 S 121 f F r verteilte Objektmengen bietet sich eine umschlie ende Kreisbewegung an die in diesem Sinne auch als LASSO Geste bezeichnet wird vgl Abb 3 8 Ein Beispiel daf r dass primitive Anweisungen wie die Selektion in Verbindung mit weiteren Aktionen zu komplexen Gesten mit neuer Absicht konstruiert werden k nnen ist das Prinzip von DRAG amp DROP Selektieren Verschieben Loslassen Scrollen und Bl ttern Das Scrollen von Ansichten geh rt zum Grundkonzept von Fenstersystemen Multi touch Anwendungen adaptieren diese Form der Navigation durch direkte Manipu lation einer Ansicht beruhend auf dem Prinzip der Verankerung Dorau 2011 S 110 ff Die Assoziation die damit verkn pft ist ist das Verschieben eines Blattes Pa pier hinter den Fenstergrenzen DORAU bezeichnet diese Geste auch als DRAG Auf dieser Bewegungsform baut auch die FLICK Geste auf die jedoch schneller und k r zer
99. hnitt ist die Gestenformalisierung bez glicher ihrer Beschrei bungsf higkeit von Mausgesten zu untersuchen Ausgangspunkt ist dass eine Maus geste ber das Feststellen der Maustaste definiert ist um sich den Eigenschaften diskreter Ber hreingaben anzun hern vgl Kapitel 3 4 1 Das Gestenpotenzial der Maus kommt nicht an die M glichkeiten von Multitouch Gesten heran ist unter den beschriebenen Voraussetzungen aber als eine Untermenge von Multitouch Gesten beschreibbar Die Differenzierung bezieht sich haupts chlich auf den Kontakttyp siehe Abschnitt 4 2 3 und die Pr senz mehrerer Kontakte zur selben Zeit Aus diesem Grund sind mehrere Regeln in GeForMT nicht auf Mausgesten anwendbar siehe grau hinter legte Sprachbausteine in Listing 4 1 Das betrifft die Operationen f r die synchrone und asynchrone Komposition von Gesten sowie Relationen die f r die Spezifizie rung synchroner Gestenz ge ausgelegt sind Die Anzahl m glicher Kontaktpunkte ist im Funktions Konstrukt entsprechend auf einen beschr nkt Die Restriktion f hrt die Sprache auf die Beschreibung von Single Touch Gesten zur ck Das Zeichen F f r Ber hrungen mit dem Finger ist dieser Hinsicht eine vertretbare Formalisierung f r einen Kontakt relation SYNC JOIN SPLIT CROSS CONNECT function integer F integer H integer B operator reece a E a integer se AL Listing 4 1 Einschr nkung der GeFo
100. ie Contentbox und die umgebenden Boxen Padding und Border Die User Interface Komponenten der Webanwendung werden in der Regel im HTML Dokument definiert Sie liegen dann als hierarchisch angeordnete Objekte im Spei cher vor und sind ber die DOM API mindestens ber ihren HTML Tagnamen identi fizierbar Eine eindeutigere Auszeichnung bietet das Attribut id wie es in WKTouch vgl Kapitel 3 3 1 zur Herstellung des Objektbezugs verwendet wird Eine naheliegende L sung ist die Adaption von Selektoren wie sie standardm ig in CSS Regeln f r die Zuweisung von Stilregeln verwendet werden siehe Kapitel 2 3 3 Ihre Syntax ist dem Web Entwickler im Allgemeinen bekannt und leicht erlernbar Syntaktisch sind Selektoren und GeForMT gut zu vereinen Dies erlaubt eine naht lose Integration in die Gestenbeschreibung Beispielsweise definiert der Ausdruck 1FCMOVECimg picId eine Bewegung auf einem Bild mit dem Id Attributwert pi cld Die entsprechende Adaptierung der GeForMT Grammatik ist in Listing 4 3 auf gef hrt Von der Abbildung der komplexen Struktur eines Selektor Ausdrucks wird dabei abgesehen Die EBNF Regel focus grenzt lediglich den g ltigen Zeichenvorrat ein atomfocus atom atom C focuslist focuslist focus focus focus A Za z0 9 A OL 1I_ s Listing 4 3 Angepasste EBNF Regeln f r die Nutzung von Selektoren als Objektidentifikation Das Konzept erm glicht die Bestimmung von Obje
101. ieden wird Die naheliegendsten Hauptrichtung be stimmt die Orientierung des Kandidaten Weiterhin werden normierte Vektoren f r die Repr sentation der Gesten verwendet Basierend auf der Berrechnung minimaler Winkel zwischen den Vektoren wird die hnlichkeit zwischen der Geste und den Vorlagen festgestellt Mit dieser Methode bertrifft Protractor den 1 Algorithmus mit einer h heren Erkennungsgeschwindigkeit einer besseren Erkennungsrate und einen um 1 4 geringeren Speicherverbrauch Li 2010b S 3 Die vorgestellten Ans tze konzentrieren sich vorrangig auf die Erkennung von Einzel pfad Gesten Eine Vielzahl symbolischer Gesten l sst sich allerdings nur ber mehre re Ausf hrungspfade beschreiben die im Verbund zu interpretieren sind Neben der Erkennung ein und mehrpfadige Gesten als wesentliches Merkmal des Ansatzes im N Erkennungsverfahren Anthony und Wobbrock 2010 wurden Verbesserungen hinsichtlich der Erkennung eindimensionaler Gesten der Orientierung einer Geste und der Verarbeitungsgeschwindigkeit vorgenommen Neben den genannten Verfahren werden in Henzen 2010 weitere Ans tze be schrieben wie zum Beispiel das auf einer Rasterung des Eingabebereichs basierende Matching nach CELENTANO ET AL logikbasierte Funktionsvektoren nach CHO im Ansatz hnlich wie die Methode nach Rubine 1991 der Vergleich XML basierter Beschreibungen nach SOLMS oder die Analyse von Ecken und Kr mmungen eines Gestenpfads nach SEZGIN
102. ienerlebnis auswirkt Um die Per formanz zu erh hen werden an kritischen Stellen der Verarbeitung oft Threads ein gesetzt die die Abarbeitung der Aufgaben parallelisieren JavaScript bietet keine Threads an dennoch l sst sich mit einem sogenannten Web Worker ein hnliches Verhalten erzielen vgl Stefanov 2011 S 192 Dazu wird das rechenintensive Script in eine Datei ausgelagert die von einem Worker Objekt gesteuert wird Die Kommunikation mit dem Hauptprogramm erfolgt ber Events Listing 2 6 zeigt die allgemeine Umsetzung eines Web Workers in JavaScript 10 Nach Dorau 2011 S 20 ist die Performanz und Zuverl ssigkeit eines Systems ein wichtiges Merkmal f r ein positives Bedienerlebnis 11Web Worker Spezifikation in W3C 2011h Mehrwert der prototypbasierten Programmierung Module und Kapselung Web Worker f r die parallele Verarbeitung 2 Grundlagen Bestandteile der Ereignisbehandlung Event Typen ee Erzeugung des Worker Objekts var worker new Worker path to myWorker js Registrierung auf Events des Workers worker onmessage function event Kommunikation mit dem Worker Script worker postMessage Do something ou BWN Listing 2 6 Web Worker Nachteilig ist jedoch die derzeit geringe Unterst tzung des Konzepts Insbesondere auf Plattformen mobiler Endger te ist eine Unterst tzung erst in n chster Zeit abzu sehen Unter iOS sind Web Worker beispiel
103. ken nungsmethodik unspezifizierter Gesten Dem Web Entwickler wird damit ein Instru ment angeboten das ihm gr tm gliche gestalterische Freiheiten gew hrt und den Implementierungsaufwand von Gesten auf ein Minimum reduziert Dies wird nicht zuletzt durch die verst ndliche und leicht zu erlernende Beschreibungssprache Ge ForMT unterst tzt die den Kern der Framework API bildet Hinsichtlich einer nahtlosen Integration formaler Gestendefinitionen in Web Doku menten wurden in der Synthese dieser Arbeit M glichkeiten der Schnittstellenim plementierung diskutiert die die Interoperabilit t zwischen grafischen Interface Komponenten und Aktionsbeschreibung herstellen Hierbei wurde auf bew hrte Softwaretechniken wie beispielsweise die Verwendung von Selektoren zur ckge griffen Dar ber hinaus wurde sich auch mit generellen Ans tzen der Formalisierung auseinandergesetzt und daraus resultierend Erweiterungsm glichkeiten vorgestellt die in erster Linie Uneindeutigkeiten aufl sen sollen und dar ber hinaus die Beschrei bungsf higkeit der Sprache erh hen Das Endprodukt dieser Arbeit ist ein modulares JavaScript Framework das sich durch seine Erweiterbarkeit und seinen plattform bergreifenden flexiblen Einsatz aus zeichnet Aufbauend auf der Bewertung bestehender Methoden der Gestenerken nung hinsichtlich ihrer Realisierbarkeit in einer webbasierten Software und Anwend barkeit auf formale Gestendefinitionen wurde sich f r die Erke
104. kn pfungs Operatoren ist wie folgt zu kon kretisieren Das Komma definiert eine sequentielle Verkn pfung von Bewegungspfaden die im Rahmen eines Gestenzuges ausgef hrt werden ohne dass der Kontakt verloren geht Die Operation schlie t implizit die Bedingungen der CONNECT Relation mit ein Das Semikolon legt hingegen fest dass der Gestenzug endet RELEASE und neu beginnt HIT Die Lage des darauffolgenden Gestenzuges ist nicht durch die Operation festgelegt Mit dem Schl sselwort CONNECT existiert aktuell nur eine einzige M glichkeit die Lage einer ankn pfenden atomaren Geste zu beschreiben Ein anderer L sungs weg der Lagebeschreibung wird in Henzen 2010 mit der Verschachtelung von Gestenatomen unter Angabe der Richtung vorgeschlagen Dieser Ansatz erh ht die Komplexit t der Sprache jedoch erheblich Aus diesem Grund werden im folgenden erweiternde Sprachbausteine vorgeschlagen die sich in den Bestand der Relationen einf gen und die relative Lage zusammengesetzter Gesten bei minimaler Ver nde rung der Syntax konkretisieren Die Ans tze sind in Tabelle 4 1 zusammengefasst und werden in der beispielhaften Skizzierung in Abbildung 4 4 veranschaulicht Der erste Vorschlag betrifft die Erweiterung von CONNECT um einen Parameter der den Ort der Verkn pfung festlegt die Anfangsposition oder Endposition des vor angegangenen Gestenzuges W hrend CONNECT_END der Definition der CONNECT Relation nach Henzen 2010 entspricht wi
105. ktmengen durch die Vergabe von Klassen Selektoren Auz hlungen oder hnliche Ausdr cke wie sie in Kapitel 4 3 vorgestellt wurden Die Regel focuslist stellt konsequenterweise eine redundante Funktion dar Die Auswahl von Objekten durch Selektoren ist gegen ber der ur spr nglichen Idee hinter dem focuslist Konstrukt jedoch anders zu interpretieren In CSS beinhaltet der Typ Selektor beispielsweise eine Anwendung der Eigenschaften u u Abbildung 4 5 Spiralf rmige Bewegung L _ Abbildung 4 6 Geschlossenes Rechteck Identifikation von Elementen des User Interface Formalisierung des Objektbezugs Objektmengen 57 4 Synthese 58 Optionale Angabe Elementstruktur Beispiele auf jedes Element von diesem Typ bertragen auf die Formalisierung ist die Geste auf verschiedenen Objekten auf gleiche Weise anwendbar und kommt somit einer Art Vorlage f r eine Gruppe von Elementen gleich Beispielsweise definiert der Aus druck 1FCMOVECimg dass alle Bilder der Webseite verschoben werden k nnen Die urspr ngliche Bedeutung einer Objektmenge ist aber mit dem Stichwort Um fassen zu beschreiben Das bedeutet dass der Bezug zu jedem Objekt der Menge hergestellt sein muss Ein Beispiel ist die LASSO Geste die eine Objektmenge um schlie t Das Beispiel wird in den n chsten Abs tzen noch einmal aufgegriffen Die Arbeit st tzt sich im weiteren auf die erste der beiden Bedeutungen welche
106. lb des r umlichen Geltungsbereiches besteht und ei ne Bewegung nach au en stattfindet RELEASE Loslassen Der Kontakt geht verloren indem der Finger vom Touch screen oder der Maustaste abgehoben wird oder sonstige Systementschei dungen zum Abbruch der Geste f hren Aus der Sequenz der elementaren Ereignisse formt sich das charakteristische Ereig nisprofil einer Geste Die einfachste Geste besteht aus der Ereignis Sequenz HIT RELEASE Im Sinne einer Touch Eingabe ist dieses Ereignisprofil einer TAP Geste zu zuordnen Als Maus Geste w rde die Bezeichnung CLICK zutreffen 2 2 3 Klassifikationsmerkmale Jede Geste bezieht sich entweder auf ein Objekt das in Folge einer Aktion manipu liert wird oder hat zumindest einen r umlichen Geltungsbereich in dem sie erkannt wird Nach Dorau 2011 S 170 werden demnach objektorientierte und freie Ge sten unterschieden Im Allgemeinen umfasst der Geltungsbereich f r freie Gesten die gesamte Benutzeroberfl che und bildet eine virtuelle Eingabeschicht die ber al len Inhalten und Bedienelementen zu liegen scheint In Wobbrock etal 2009 wird eine hnliche Klassifikation vorgenommen die dar berhinaus Mischformen unter scheidet Dies sind Gesten deren Umgebungsparameter in Beziehung zu setzen sind world dependent oder sowohl objektorientiert als auch frei sind mixed dependen cies wie es beispielsweise bei einer zweih ndigen Geste der Fall sein kann Es kann verallgemeinert wer
107. lback Funktion tuio_callback aufgerufen TU Ojs ist ein in Ja vaScript implementierter Connector der die Daten ein weiteres Mal auswertet und Ereignisse wie object_add cursor_change oder cursor_remove generiert Rusadi 2009 In Cailliau etal 2009 hingegen werden die Ereignisse die sich an der Sa fari API vgl Apple 2011a orientieren bereits im Java basierten Browser Plugin PookyTouch erzeugt jPooky ist als jQuery Plugin implementiert das die Ereignis Handler defininiert und damit ein festes Verhalten ber hrungsbasierte Manipula tion von HTML und SVG Elementen festlegt Cailliau etal 2009 Die JavaScript Connector Implementierung MagicTouch nach Smus 201 1b erweitert den Ansat zes von RUSADI um standardkonforme Touch Events hnlich wie sie in PookyTouch generiert werden vgl Smus 2011b 2NPAPI Netscape Plugin Application Programming Interface ist eine plattform bergreifende Plugin Architektur die von den meisten Web Browsern unterst tzt wird 3 3 Interpretation von Gesten 3 3 INTERPRETATION VON GESTEN 3 3 1 Web Frameworks Im Zuge der Entwicklung der in Kapitel 3 2 1 beschriebenen Schnittstellen entstan JavaScript Framework den auch zahlreiche Web Frameworks die die Integration von Multitouch Gesten auf einer abstrakteren Ebene erm glichen Im Sinne der clientseitigen Web Entwick lung basieren Web Frameworks in der Regel auf der Programmiersprache JavaScript Sie stellen einen problembezogene
108. ldung 5 8 skizziert den Aufbau der Schichten mas Abbildung 5 8 Zwei Zeichenfl chen f r die Visualisierung der Gestenpfade und aktuellen Kontaktpunkte ber den Inhalten des Webdokumentes Das Modul kn pft an die in Abschnitt 5 2 4 und 5 2 6 beschriebenen Module an in dem es sich f r die Ereignisse der Module Observation und GestureRecognition registriert Es flie en folglich sowohl aktuelle Positionsdaten als auch der Status der Gestenerkennung in die Visualisierung ein Folgende Herausforderung ergibt sich aus dem beschriebenen Ansatz In der Re gel werden Ereignisse nur nach dem Prinzip des hierarchischen Ausbreitung vererbt siehe Kapitel 2 3 6 und Konzeption in Abschnitt 5 2 4 Die canvas Elemente sind jedoch von dieser Hierarchie ausgeschlossen und blockieren den Eventfluss wenn sie die Benutzerobfl che berlagern Das Problem wird mit der CSS Eigenschaft pointer events gel st die im aktuellen Arbeitsentwurf von CSS 3 definiert ist W3C 2011a und nach Deveria 2011a weitestgehend von den Browsern un tert tzt wird Mit dieser Eigenschaft werden die canvas Elemente von der Ereig nisverarbeitung ausgeklammert und somit durchl ssig Problematik der Durchl ssigkeit von Ereignissen 77 5 Konzeption und Implementierung Einbindung in eine Webanwendung Komprimierte und volle 78 Version Initialisierung 5 3 ANWENDUNG 5 3 1 Installation Die Module die das Framework bilden vgl Ka
109. limit formt einen geschlossenen Kreis Closed loop und wird ausgewertet sobald der Finger von der sensitiven Oberfl che abgehoben wird Touch state Dar ber hinaus werden die Dimensionen bez glich des Geltungs bereichs der Geste Touch path bounding box der Pfadl nge Touch path length und der eingeschlossenen Fl che Enclosed area festgelegt Der re turn Block beschreibt das Ergebnis das zur ckgeliefert wird wenn die Eingabe alle Bedingungen der Geste erf llt Dabei kann genaustens bestimmt werden welche Information f r die jeweilige Geste in der R ckgabe relevant sind EEE name Lasso validate Touch state TouchUp Touch limit 1 Closed loop and Touch path bounding box 200x200 1000x1000 and Touch path length 600 100000 and Enclosed area 5000 1000000 return Touch points Listing 3 4 LASSO Geste in GDL Khandkar und Maurer 2010a Die M glichkeit mehrere validate Bl cke in einer Definition zu definieren ver spricht Flexibilit t in der Beschreibung komplexer Gesten Die Regelbl cke k nnen jeweils adressiert werden um sie in einer Kompositionsregel wiederzuverwenden Auch bez glich der Erweiterung der Sprache geht das Framework mit gutem Beispiel voran und bietet eine Schnittstelle in GDL an um neue Bedingungsregeln hinzuzu f gen die in den Gestendefinitionen verwendet werden k nnen vgl Khandkar und Maurer 2010a 3 3 Interpretation von Gesten 3 3 2 2 Midas Eine hnliche Konstruktion vo
110. lisierung die in Kapitel 4 2 erarbeitet wur de In Kapitel 5 1 werden zun chst haupts chlich nicht funktionale Anforderungen an das Framework abgesteckt und deren Umsetzung in Hinblick auf die Abgrenzung der Kriterien erl utert Im darauf folgenden Kapitel 5 2 werden die implementierten Komponenten und deren Entwurf erkl rt Die Darlegung der Funktionsweise des Erkennungsalgorithmus ist Schwerpunkt dieses Kapitels siehe 5 2 6 Anschlie end wird die Installation Abschnitt 5 3 1 und Anwendung Abschnitt 5 3 2 des Frame works dargelegt In den letzten Abschnitten wird der praktische Bezug anhand von Anwendungsbeispielen hergestellt Es wird zum einen die Testumgebung vorge stellt in der verschiedenartige Gesten exemplarisch implementiert sind Abschnitt 5 3 3 Zum anderen wird der Prototyp einer mobilen Web Seite pr sentiert der auf den konzeptionellen berlegungen in Kapitel 4 1 aufbaut 5 1 ANFORDERUNGSKRITERIEN Ein wichtiges Kriterium f r die sichere Anwendbarkeit eines Frameworks ist des sen Verst ndlichkeit Unter Transparenz ist in dieser Hinsicht eine nachvollziehbare Arbeitsweise des Frameworks zu verstehen ohne den Anwender mit Details der Verarbeitung zu berfordern Dennoch soll der Entwickler auf wichtige Entschei dungsfragen durch die Bereitstellung von Optionen Einfluss nehmen k nnen Kon figurierbarkeit Die Schnittstellen Implementierung API folgt klaren Regelungen und einer verst ndlichen Sprache zu Gunsten d
111. lsweise werden Schaltfl chen an den Stift angebracht um eine Klickaktion zu erm glichen Eine bestimmte Druckst rke kann ebenso einen solchen Zustands ber gang einleiten Diese Arbeit konzentriert sich haupts chlich auf die Verwendung von Stiften als Ersatz des Fingers in direkten Touch Eingabesystemen mit dem Ziel sich die Pr zision dieses Hilfsmittels zu nutze zu machen Der Fokus liegt damit allein auf den Positionsdaten die das Ger t bei direkter Ber hrung liefert Stifte sind ein gebrauchlicher Alltagsgegenstand f r schriftliche und bildnerische Aufzeichnungen weshalb sie vorallem f r symbolische Gesten geeignet erscheinen Bez glich der Pr zision in direkt zu bedienenden Benutzeroberfl chen ist der Stift gegen ber der Interaktion mit dem Finger zu bevorzugen Ein Mauscursor kann dem gegen ber jedoch noch genauer positioniert werden da eine pixelgenaue Vir tualisierung des Zeigeinstruments vorliegt vgl Gei ler 2001 S 32 Ein entschei dender Unterschied ist auch die M glichkeit Korrekturen bei der Fokussierung von Objekten vorzunehmen basierend auf der Trennung von Zust nden f r die Positio nierung und Ausf hrung Korrekturen sind jedoch auch immer mit einem h heren Aufwand und Zeit verbunden auch wenn die bertragung der Mausbewegungen grundlegend schneller ist als bei anderen Eingabeger te vgl Forlines etal 2007 und Wigdor und Wixon 2011 S 118 In dieser Hinsicht ist das Selektieren von Elementen
112. lustriert das Szenario In dem Fall dass keine Eingaben auf Multitouch Tablets 51 Synthese Adaption des Web Interface Abbildung 4 2 Be quemlichkeitszonen Bl ttern und Scrollen Adaption von Browser Funktionen Symbolische Gesten als 52 Access Keys Entwicklung mit GeForMT dem Touchscreen erforderlich sind umschlieBen beide Hande das Tablet ftir mehr Bequemlichkeit und Stabilitat vgl Abb 4 2 Wie in Kapitel 3 4 4 und 3 4 5 beschrieben wurde implementieren mobile Web Browser bereits Gesten welche die Anwendung der urspr nglich f r eine Maus interaktion konzipierten Web Seiten unterst tzen Oftmals m ssen in diesem Fall jedoch Seitenbereiche mit interaktiven Element wie beispielsweise Links stark ver gr ert werden um sie bedienen zu k nnen Dabei geht jedoch auch der berblick ber das Web Dokument verloren und eine H ufung dieser Notwendigkeit kann f r den Nutzer frustrierend sein Daher ist zu empfehlen die Gestaltung mobiler Web Anwendungen an die Erfordernisse des Ger tes anzupassen Drei wichtige As pekte zur Gestaltung von Multitouch Anwendungen wurden in Kapitel 3 4 2 be handelt Demnach ist darauf zu achten dass interaktive Elemente gro genug und mit gen gend Abstand zueinander gestaltet werden damit sie nicht verfehlt oder verwechselt werden k nnen Softwaretechnisch kann die Adaption der Gestaltung mit Media Queries realisiert werden die in Kapitel 2 3 3 vorgestellt wurden
113. men siehe Kapitel 5 3 2 Ein grafischer Kontext wird durch das canvas Element bereitgestellt das mit HTML 5 eingef hrt wurde JavaScript stellt hierf r Zeichenfunktionen bereit die es erlau ben zweidimensionale Grafiken dynamisch zu erzeugen und auf der Zeichenfl che abzubilden Die Verwendung als Feedbackkomponente erfordert dass das canvas eine ber allen Webinhalten bergeordnete transparente Schicht bildet und Eigen schaften bez glich der Gestaltung und Interaktion nicht beeinflusst Bei der Initialisierung des Moduls werden zwei canvas Elemente mittels JavaScript Methoden zur DOM Manipulation erzeugt und bei Aktivierung des Feedbacks dem body des HTML Dokumentes hinzugef gt Das erste canvas wird daf r genutzt um 5 2 Komponenten des Frameworks ein kontinuierliches Feedback ber die aktuelle Position der Eingabe zu geben Ent sprechend wird jeder Kontakt als Kreis dargestellt Auf dem zweiten canvas wird der Pfad der Geste und visualisiert Grund der Verteilung des Feedbacks auf zwei Schichten ist einerseits die Trennung der Funktionalit t Kontakt und Gestenpfad visualisierung andererseits die Ber cksichtigung der Performanz bei der Aktuali sierung des Gestenpfades Ein hoher z index sorgt daf r dass die Zeichenfl chen ber anderen Webinhalten liegen Ihre r umlichen Dimensionen richtet sich nach der Fenstergr e so dass die visuelle R ckmeldung konsequent ber die gesamte Benutzeroberfl che erfolgt Abbi
114. mentierung existieren generische Ans tze die auf Basis der EBNF Spezifikation entsprechenden Programmcode erzeu gen sogenannte Parsergeneratoren Zur Generierung eines webkonformen Parsers wird die JavaScript Bibliothek PEG js eingesetzt siehe Majda 2010 Sie basiert auf dem Parsing Expression Grammar Formalismus PEG einem Grammatiktyp der einen linearen ordnungsabh ngigen Analyseprozess vorsieht PEG js orientiert sich an der gel ufigen EBNF Syntax erweitert diese dar ber hinaus um JavaScript hnliche Sprachoptionen Sie erlauben JavaScript Code innerhalb der Grammatik Spezifikation Dies erm glicht eine direkte Adaption der auszugegebene Datenstruk tur Ergebnis ist ein Objektmodell in dem die in Abschnitt 5 2 1 beschriebenen glo bal definierte Konstanten bereits angewendet werden Listing 5 1 zeigt die entspre chende Grammatik am Beispiel der GeForMT Regeln definition und function Th definition complex complex opt Coption complex var definition options definition options push complex for var i 0 i lt opt length i definition options pushCopt i 1 return definition function num integer functionType F var func type GeForMT FUNCTION_TYPES FINGER number null if typeof num undefined func number num return func Listing 5 1 Auszug der Grammatik nach PEG js Spezifikation f r die Parser Generierung Integration der Die Generierung kann sowohl
115. mierschnittstelle die die Rohdaten nochmals filtert und bez glich der Einstellungen in anschaulichere Daten bersetzt Diese Abstraktion ist dem Web Browser zuzu ordnen der seine APIs an Standards ausrichtet In der dar berliegenden Schicht kn pft die Gestenerkennung an Im Sinne einer lo sen Kopplung des Frameworks und der blichen Verarbeitung von Nutzereingaben sieht das Modell eine eventbasierte Architektur vor Auf Anwendungsebene erfolgt die Implementierung der konkreten Benutzeroberfl che die sich haupts chlich auf die grafische Visualisierung konzentriert Die Umsetzung und Verarbeitung der ge stenbasierten Interaktion der Web Seite wird durch das Einbinden des Frameworks weitestgehend abgenommen Die vorgestellte Architektur einer webbasierten Gestenerkennungs Software bildet die Grundlage f r die weiteren berlegungen bez glich der Konzeption des Frame works Sie bestimmt die folgende Kapitelstruktur Die Schicht der Hardware wird im Rahmen dieser Arbeit allerdings nicht n her beleuchtet F r Informationen zu den Technologien ber hrungsempfindlicher Eingabeger te sei an dieser Stelle auf Tei che etal 2009 und Nygard 2010 verwiesen In Kapitel 3 2 wird der aktuelle Stand bez glich der Abstraktion und Transformation der Eingabedaten erl utert der sich in diesem Kontext auf den Webbrowser und dessen implementierte Web Standards bezieht Anschlie end werden im Sinne der Interpretation von Gesten verschiede ne Fram
116. mit dem Finger liegt in deren Bezugssystem Die traditionelle Maus ist ein Werkzeug das relativen Bewegungen der Hand auf die Darstellungsfl che des Interface projeziert Ein Cursor hilft dabei die aktuelle Position und Bewegung nachzuvollziehen Die F hrung der Maus erfolgt intuitiv auf Basis der visuellen R ck meldung erfordert nach Gei ler 2001 S 32 jedoch eine h here Konzentration um Hand Maus Bildschirm Auge und Gehirn zu koordinieren Touchscreens bauen auf einem absoluten Positionierungssystem auf in dem eine direkte Beziehung zwi schen Eingabeort und fokussiertem Bereich der Benutzeroberfl che besteht Die Ko ordinierungsarbeit des Anwenders wird dadurch gest tzt dass sich Eingabebereich und Darstellungsfl che decken Im Gegensatz zu Mauszeigersystemen ergeben sich daraus konkrete klar definierte Systemgrenzen WIGDOR ET AL nehmen ein Vergleich anhand von Zustandsmodellen vor vgl Wig dor und Wixon 2011 S 65 ff Touch Eingaben beziehen sich lediglich auf zwei Zust nde d e und Active Eine Ber hrung ist eine messbare Gr e und versteht sich daher als Aktivierung des Systems Ein Kontakt ist da oder eben nicht Die Mauszeigersteuerung kann durch drei Zust nde beschrieben werden Out of Ran ge Tracking und Engaged und ist bereits ohne zutun des Users aktiv denn die Pr senz des Cursors ist unter dem verbreiteten GUI Grundprinzip WIMP Windows Icons Menus Pointer vorgegeben Ohne diese Orientierungshilf
117. n 5 7 GestureRecognition Modul 222 2m nn nn 5 8 Zwei Zeichenfl chen f r die Visualisierung der Gestenpfade und aktuellen Kontaktpunkte ber den Inhalten des Webdokumentes 2 2 2 2 E nn nn 5 9 Haupt Programmierschnittstelle 22 222 Coon nn 5 10 Web Interface der Testumgebung 2 222222 2 nn nn 5 11 Skizzierung der vordefinierten sequentiell komponierten Gesten 5 12 Skizzierung der definierten Menge synchron ausgef hrter Gesten 2 2 2222 5 13 Skizzierung der objektorientierter Gesten zum Verschieben Skalieren und Selektieren 5 14 Interface des Anwendungsprototypen 2 2 2 2 E mann nn TABELLENVERZEICHNIS 2 1 3 1 4 1 4 2 Wichtige CSS Selektoren im berblick 2 2 2 2 2222 oo 13 Methoden der Gestenerkennung im berblick 2 222222 40 Zusammenfassung der Ans tze zur Beschreibung der r umlichen Anordnung zusammen gesetzte Gesten u Den ne Te ie pae ee ee to ar nn eS 56 bersicht der Optimierungs und Erweiterungsvorschlage 22222222222 64 xi LISTINGS 2 1 Allgemeiner Aufbau einer CSS Regel 2 22 22 oo nn 13 2 2 Beispiel eines Media Queries f r die optimierte Darstellung auf einem mobilen Endger t 14 2 3 Objekt Literal mit Getter und Setter Methoden 2 2222 nn 15 2 4 Konstruktoren und Prototypen 2 222 Eco nn nn 16 2 5 Revealing Module Pattern aoaaa aaa 17 2 67 Web WORKER ea een Ant ee et ern re re rn er 18 2 7 API Methoden f r die Event Registrierung na
118. n Programmierrahmen bereit der die Anwen dungsentwicklung durch vereinfachte Programmierkonzepte erleichtert Einige namhafte und weit verbreitete Javascript Frameworks sind jQuery Dojo Tool Frameworks f r mobile kit MooTools YUI Library und Ext JS vgl Hallman 2011 Durch ihr Plugin Konzept Webanwendungen sind anwendungsspezifische Erweiterungen m glich die auf ihrer Kernfunktionali t t aufbauen F r die Anwendung in touch basierten mobilen Endger ten wurden Erweiterungen entwickelt mit denen sich bew hrte Multitouch Bedienkonzepte in mobilen Webanwendungen realisieren lassen Dazu z hlen die jQuery Erweiterungen jQTouch Kaneda und Stark und jQuery Mobile jQuery 2011 das Dojo Plugin do jox mobile Dojo 2011 die Ext JS Variante Sencha Touch Sencha 2011 und wei tere Frameworks wie zum Beispiel Qooxdoo Qooxdoo 2011 UI Hewitt 2011 WebApp NET Apers 2011 oder PastryKit von Apple vgl Calhoun 2009 Der Fo kus dieser Implementierungen liegt auf der Nachbildung der Interaktionskonzepte und des Erscheinungsbildes nativer Anwendungen native Apps sprich dem iOS und Android Interface In den Abbildungen 3 4a 3 4c wird dies an ausgew hlten Beispielen demonstriert Das Gestenrepertoire beschr nkt sich auf gel ufige Stan dardgesten die in der Regel an die vom Framework angebotenen User Interface Komponenten gebunden sind Apple fasst die Anwendungen unter dem Begriff WebApp zusammen vgl A
119. n Regeln zur Modellierung von Multitouch Gesten mit vergleichbaren Zielen wie GDL erdachten sich SCHOLLIERS ET AL in dem Frame work Midas Die Formalisierung sieht hingegen einzelne Events oder Event Sequenzen als Basismodell vor auf dem die Regeln angewendet werden Abbildung 3 9 zeigt den Aufbau des Frameworks Die Basis der Eingabeverarbeitung bildet das Infrastructure Layer in dem Eingabestr me adaptiert und in logische Fak ten Fact Base bersetzt werden Im Core Layer werden sie mit einer Regelmenge Rule Base abgeglichen die zuvor im Application Layer definiert wurde Diese Ver gleichslogik der Interference Engine produziert weitere Fakten f r die Interpretation der Eingabe und l st Prozeduren auf Anwendungsebene aus Midas Application Layer GUI Shadows Model Core Layer Fact Inference Rule Base Engine Base Infrastructure Layer Hardware Bridge Translator Abbildung 3 9 Midas Framework Architektur Scholliers etal 2011 Eingeleitet wird eine Regel mit dem Schl sselwort defrule und dem Bezeichner der Geste Listing 3 5 verdeutlicht die Syntax am Beispiel einer FLICK Geste Jede Eingabe produziert einen Fakt vom Typ Cursor beschrieben durch eine Id der Position dem Status des Ereignis sowie r umlichen und zeitlichen Parametern Mit der ListOf Operation k nnen Bedingungen ber eine Menge von Cursor Ereignissen festge legt werden Das Beispiel definiert eine Sequenz von Ereignissen
120. n eingesetzt werden kann Die Verkn pfung mit grafischen Bibliothe ken wird in dieser Arbeit nicht betrachtet Die Implementierung zielt jedoch auf un abh ngige und erweiterbare Schnittstellen ab um Entwicklern die Anbindung gra fischer Komponenten und anwendungsspezifischer Funktionen zu erm glichen Die Verarbeitungsgeschwindigkeit bei der Gestenerkennung spielt eine wichtige Rol le in Hinblick auf die Akzeptanz gestenbasierter Bedienkonzepte In Bezug auf die Framework Implementierung wird dieser Aspekt vorallem bei der Wahl der Erken nungsmethode die auf der Bewertung bestehender Ans tze in Kapitel 3 3 3 1 ba siert ber cksichtigt Des Weiteren wird auf dem Prototyp Konzept von JavaScript vgl Kapitel 2 3 5 aufgebaut sowie die Kompremierung des Codes in Betracht ge zogen um den Speicherbedarf und die Ladezeiten zu verringern Die R ckmeldung wird in Kapitel 2 2 2 als elementare Eigenschaft einer Geste de finiert und auch in Kapitel 3 4 wird dessen Stellenwert deutlich Daher wird ein visuelles Feedback auf elementarer Ebene ber cksichtigt und prototypisch als Teil des Frameworks umgesetzt siehe Kapitel 5 2 7 Prinzipiell soll dem Web Entwickler jedoch freigestellt werden in welcher Art und Weise eine R ckmeldung erfolgt ins besondere wenn es darum geht anwendungsspezifische Aktionen auszul sen Das R ckmeldeverhalten wird blicherweise auf Basis einer eventbasierten Architektur realisiert 5 2 KOMPONENTEN DES FRAMEWORK
121. n in die Visualisierungslogik einflie en Eine Differenzierung bez g lich der Eingabetechnik ist ebenfalls abzuw gen Dar ber hinaus fehlt es noch an Einstellungsm glichkeiten um auf die Gestaltung des primitiven Feedbacks Einfluss zu nehmen Um den Nutzer in der Bedienung gestenbasierter Anwendungen zu unterst tzen sind des Weiteren gestalterische Aspekte von Web Bedienelementen zu fokussieren Dies beinhaltet insbesondere Feed Forward Mechanismen die dem Nutzer Hilfestellung zu anwendbaren Gesten anbieten Motiviert wurde die Entwicklung des Gestenerkennungs Frameworks durch die Idee der Unterst tzung von Web Programmierern bei der Gestaltung neuer Bedienkon zepte Auf Basis dieser Grundlagenschaffung kann der Fokus auf das Design von ge stenbasierten Web Anwendungen gelegt werden Hinsichtlich einer Weiterf hrung des Themas sind konkrete Anwendungen zu entwickeln Kleinere Anwendungsbei spiele bez glich der Adaption einer Web Seite auf einem Multitouch Tablet wurden in dieser Arbeit vorgestellt und k nnten in einem komplexeren Anwendungsszena rio aufgegriffen werden Interessant w re vorallem die Kombinierung des GeForMT Frameworks mit grafischen UI Bibliotheken welche im Folgenden noch zu testen ist Als Anregung f r einen konkreten Anwendungsfall k nnten beispielsweise Web Seiten f r ffentliche Verkehrsmittel entwickelt werden Insbesondere eine Routen planung auf Basis einer Karte wie beispielsweise Google Maps oder einem V
122. n k nnen Eigenschaften und Metho den auf alle Instanzobjekte die mit der Funktion erzeugt wurden vererbt werden Das Vererbungsprinzip kann zum besseren Verst ndnis mit der Glasplattenmetapher nach Debreuil 2001 veranschaulicht werden siehe Abb 2 6 Instanz BE new MyObject E Prototyp des E Konstruktors Oo MyObject prototype Et Standardprototyp E Object prototype Abbildung 2 6 Verbildlichung des Vererbungsprinzips in JavaScript anhand der Glasplattenmetapher nach Debreuil 2001 Die Metapher beschreibt die Objekte in der sogenannten Prototype Chain als Glas platten Auf ihnen sind jeweils Zettel angebracht die eine Objekteigenschaft re pr sentieren und deren Position ein Eigenschaftname entspricht Die Glasplatten werden bereinander gelegt Auf unterster Ebene ist das initiale Prototyp Objekt dar ber der Prototyp des Konstruktors und aufliegend die Instanz die ber den Konstruktor erzeugt wird Schaut man nun durch alle Glasplatten scheinen einige Eigenschaften der darunterliegenden Prototyp Objekte durch Andere werden wie derum von Instanz Eigenschaften verdeckt Der Zugriff erfolgt in jedem Fall gleich ber die Instanz e Konstruktor Definition function MyObject Erweiterung der Prototyp Eigenschaften MyObject prototype property Prototype Erzeugung von Instanzen var entity new MyObject alert entity property Prototype Erweiterung der Instanz Eigenscha
123. nauso wie dessen Reaktionsverhalten HINRICHS ET AL beob achten im Rahmen einer Studie dass die Wahl nacheinander ausgef hrter Gesten oftmals davon abh ngt welche Aktionen zuvor ausgef hrt wurden Aktionen gehen dabei oft flie end ineinander ber und bilden einen Verbund mehrer Gesten Bei spielsweise werden auf einem Multitouch Tisch manipulierbare Objekte wie Bilder f r eine n here Betrachtung in den Einflussbereich des Anwenders herangezogen und dabei bereits gedreht und vergr ert vgl Hinrichs und Carpendale 2011 3 4 4 Anwendung von Gesten Grundlage f r die Entwicklung neuer Bedienkonzepte ist das Wissen um gebrauchs taugliche Gesten Bezeichnend sind ihre Ausdrucksst rke und ein verbreitetes Ver st ndnis um ihrer Bedeutung Ihr Durchsetzungsverm gen gr ndet auf einer star ken metaphorischen Beziehung und Selbstbeschreibungsf higkeit aber auch auf gezielter Vermarktung Die Umsetzbarkeit dieser Gesten mit dem Framework ist aus diesem Grund von besonderer Bedeutung Angelehnt an die aufgabenbezo gene Darlegung von Anwendungskonzepten in Dorau 2011 S 136 werden im Folgenden geeignete Gesten vorgestellt In einigen F llen lassen sich konkrete Web Implementierungen finden die im Kontext dieser Arbeit von besonderem Interesse sind Selektieren und Markieren Die einfachste Form der Selektion ist eine Zeigehandlung wie das Tippen TAP oder Halten des Fingers HOLD auf einem f r derartige Anweisungen ausgezeic
124. ne nachdr ckliche Aufforderung interpretiert werden oder das Zeichnen eines Frage zeichen als Hilfeaufruf Wobbrock etal 2009 Weitere symbolische Gesten sind in Wobbrock etal 2007 und Anthony und Wobbrock 2010 aufgef hrt BAA 9 31 Pm Eine Besonderheit der direkten symbolbehafteten Eingaben ist die Handschrifterken nung Das zugrundeliegende Alphabet beschreibt dabei die Ausf hrungsform der Symbole Die komplexe Erkennung von Schreibschrift liegt dabei au erhalb des Fo kus dieser Arbeit Vielmehr geht es um das Potenzial von Gesten einzelne alphabeti sche Symbole nachzubilden Ein Anwendungsbeispiel zeigt das f r Android Systeme entwickelte Tool Gesture Search nach Li 2010a mit dem es m glich ist eine Liste zu durchsuchen Der Anfangsbuchstabe des gesuchten Listenelementes wird dazu ber die gesamte Breite des Interface gezeichnet siehe Abb 3 25 Nichts desto trotz ist die Komplexit t des lateinischen Alphabets nicht zu untersch tzen GOLD BERG und RICHARDSON arbeiteten aus diesem Grund ein Symbolalphabet auf Basis von Einzelpfad Gesten aus Goldberg und Richardson 1993 welches abgewan delt in der Gestenerkennungs Software Graffiti unter Palm OS umgesetzt wurde vgl Blickenstorfer 1995 Abbildung 3 26 zeigt einen Auszug dieses sogenannten Uni Stroke Alphabets Im Gegensatz dazu stellt POIRIER eine Eingabemethode vor in der Buchstaben als Komposition einfacher Formen wie Halbkreise und Linien aufgefasst werden
125. ng Eingaben Aktivierungs funktion x Str Schwellwert u Abbildung 3 12 Modell eines k nstlichen Neurons Xi gt Fuzzy Logik Dynamic Time Warping Testmuster Referenzmuster Abbildung 3 13 Nicht lineares Matching von Referenz und Testmuster in DTW 37 3 Verwandte Arbeiten Merkmalsextraktion und Gewichtung nach 38 RUBINE Richtungsbasiertes Pattern Matching 1Recognizer RUBINE wendet f r die Erkennung von einfachen Maus und Stiftgesten eine Metho de an die auf der Berechnung von sogenannten Feature Vektoren basiert Rubine 1991 Jede Geste wird durch einen solchen Vektor repr sentiert der mehrere ihrer Eigenschaften Features beschreibt 13 Features werden in Rubine 1991 insge samt vorgeschlagen um eine ausreichende Unterscheidung von Gesten vornehmen zu k nnen darunter beispielsweise die Dauer L nge oder Geschwindigkeit in der sie gezeichnet wird Das Verfahren st tzt sich auf einer Menge von antrainierten Beispielen f r die jeweilige zu klassifizierende Geste Auf dieser Basis wird eine Ge wichtung ermittelt die in die sogenannte Diskriminanzfunktion einflie t ber den gr ten errechneten Wert kann schlie lich die zugeh rige Klasse bestimmt wer den Ein einfacher auf Ausf hrungsrichtungen basierender Ansatz wurde in Kapitel 3 3 1 im Verfahren von Moousture vorgestellt Der Erkennungsalgorithmus nimmt nach der ausf hrlichen Beschreibung in
126. ng complex mathematical calculati ons pattern recognition algorithms and the like This can help the deve lopers focus on designing the gesture at a level that is most appropriate to the application context without worrying about the implementation details Khandkar und Maurer 2010a W hrend die Sprachgrammatik das Format der Verst ndigung festlegt ist auf Sy stemebene eine Auswertung der erkannten Eingabeparameter gegen ber den for mal beschriebenen Attributen vorzunehmen Dies erfordert eine bereinkunft auf mathematischer Ebene die durch die Modellierung interner Datenstrukturen her beigef hrt wird Dieser Formalisierunggrad wird in Kammer etal 2011 auch als Algorithmenstufe bezeichnet Die Implementierung der genannten Formalisierungsgrade und ihre Verkn pfung in Ableitung der einem Framework f hrt nicht nur Abstraktionsebenen ein die dem Entwickler ein Frameworkarchitektur Ausdrucksmittel in die Hand geben um gestenbasierte Interaktionskonzepte in sei ner Anwendung effizienter zu entwickeln sondern erzeugt auch eine Trennung von Verantwortlichkeiten in der Frameworkarchitektur Die modulare Umsetzung f hrt nicht zuletzt zu einem h heren Ma an Wiederverwendbarkeit Austauschbarkeit und Erweiterbarkeit von Komponenten der Gestenerkennung Diese Zusammenfas sung entspricht im wesentlichen den Anforderungskriterien der in Henzen 2010 vorgestellten sprachbasierten Frameworks Darunter das auf einer mathematisch g
127. ng werden au erhalb der Beschreibungsspra che definiert Die Beziehungen bleiben durch die Objektstruktur gewahrt Listing 4 2 Webkonforme Gestenformalisierung 4 5 greift das Beispiel des vorangegangenen Absatzes auf um den Ansatz zu erl u tern ZZ ZZ mmm aay 1 var draw 2 identifier draw 3 expr MOVE 4 handler functionCe oder auch DrawContext draw 5 Listing 4 5 Aktionszuweisung basierend auf einem Objekt Literal in JavaScript Der Name der Geste wird mit dem Variablenbezeichner des Literals definiert kann aber vereinfacht unter identifier festgelegt werden Das Schl sselwort expr weist den GeForMT Ausdruck zu Die Variable handler beinhaltet die Handler Funktion Die Implementierung der Funktion kann direkt im Objekt Literal vorgenommen wer den M glich ist aber auch ein Verweis auf die Funktion hnlich wie im sprachba sierten Ansatz Dies erm glicht dem Webentwickler frei zu entscheiden an welcher Stelle des Programms er die Folgeaktion implementiert Gegen ber der Aktionszuweisung als Bestandteil von GeForMT hat der zweite An Vor und Nachteile satz den Vorteil dass die Implementierung Aktionsbeschreibung direkt zugeordnet werden kann Nachteilig ist jedoch der h here Lernaufwand der mit der zus tzli chen Spezifikation eines Objektmodells einhergeht denn die Schnittstelle erfordert weiteres Implementierungswissen ber den Aufbau und zu verwendende Bezeich nungen des
128. ngines lt lt uses gt gt getElements selector STD Sizzle selector context registerEngine name adaptedFunction Abbildung 5 3 Adaption der Selector Engine Sizzle Mit Sizzle Sizzle 2012 wird eine alleinstehende browser bergreifende L sung Sizzle einer Selector Engine angeboten die auch im JavaScript Framework jQuery vgl jQuery 2011 verbaut ist Das Parsen der Ausdr cke und die Selektion zugeord neter DOM Objekte wird dadurch weitestgehend abgenommen Die API Methode Sizzle ist Einstiegspunkt f r die Operation 5 2 4 Ereignisverarbeitung Die Entgegennahme und Verarbeitung elementarer Ereignisse der Nutzereingabe Observation Modul liegt im Zust ndigkeitsbereich des GeForMT Observation Moduls Im Sinne einer losen Kopplung wird das Observer Muster in Anlehnung an Stefanov 2011 S 174 umgesetzt das es anderen Komponenten des Frameworks erlaubt sich f r Nachrich ten der Observation zu registrieren Sie nehmen die Rolle des Beobachters ein und m ssen entsprechende Callback Methoden implementieren Das Modul verwaltet EventObservation Objekte die die Interaktion auf genau ei Fvent Registrierung nem DOM Element registriert und verarbeitet Sie implementieren demnach Event Handler sowohl f r Touch als auch f r Maus Ereignisse In Kapitel 4 2 1 und 4 2 2 wurde die Beschreibbarkeit von Mausgesten mit GeForMT und deren Gemeinsam keiten mit Touch Eingaben bereits diskutiert Eine EventObservation f h
129. ngs Frameworks An dieser Stelle werden Entwurfs entscheidungen einzelner Module und deren Beziehungen zueinander erl utert so wie die Installation und Anwendung des Frameworks erkl rt Der Implementierungs teil schlie t mit einem Anwendungsprototypen ab Das letzte Kapitel Kapitel 6 fasst die Ergebnisse zusammen und gibt einen Ausblick f r die Weiterentwicklung der Ar beit 2 GRUNDLAGEN 2 1 WEB INTERFACE Der Begriff Web Interface wird in dieser Arbeit f r die Benutzerschnittstelle engl User Interface einer Software verwendet die ber einen Web Browser n heres dazu in Kapitel 2 1 2 zug nglich ist Das Web ist demnach ein Dienst des Internets der Web Seiten verwendet wird auch der Begriff Web Anwendung auf Basis des Hyper Text Transfer Protocol HTTP ausliefert 2 1 1 Entwicklung und Wandel 1989 schl gt Tim Berners Lee am CERN den Global Hypertext Space Lessiak 2008 vor Urspr ngliche Idee des Projektes war wissenschaftliche Dokumente ber ein Netzwerk austauschbar zu machen und zu verkn pfen Das erste Hyptertext Pro gramm wird im darauffolgenden Jahr unter dem Namen WorldWideWeb entwickelt Dumke etal 2003 S 14 Viele Unternehmen erkannten das Potenzial eines glo balen Netzwerks und so folgten Browser Implementierungen wie Mosaic 1993 Netscape Navigator 1994 und der Internet Explorer von Microsoft 1995 Mit Erscheinen des Internet Explorers entbrannte ein Wettstreit um die f hrende Marktpo
130. ngsform ist neben der Kreis Bewegung die spiralf rmige Bewegungen vgl Kapitel 2 2 3 Abbildung 4 5 stellt die besagte Be wegungsform dar die sich in GeForMT Systax wie folgt beschreiben l sst 4 2 Webkonforme Gestenformalisierung 1FCSEMICIRCLE_S SEMICIRCLE_N SEMICIRCLE_S Der Ausdruck k nnte aber auch als geschlossener Kreis oder als invertierte Spiral form interpretiert werden Angelehnt an den L sungsansatz in der Sprache GDL beschrieben in Kapitel 3 3 2 1 wird eine weitere Relation mit der Bezeichnung CLOSE vorgeschlagen Sie definiert dass der Bewegungspfad eine geschlossene Form ergeben muss Folglich entspricht die Anfangsposition der Geste der Position des Endpunktes Die Gr enverh ltnisse werden mit dem Konstrukt zwar nicht explizit bestimmt es schr nkt den Interpreta tionsspielraum jedoch erheblich ein Abbildung 4 6 stellt ein geschlossene Rechteck dar das wie folgt zu definieren w re CLOSE LINE_E LINE_S LINE_W LINE_N 4 2 5 Geltungsbereich und Objektkontext Der Kontext einer Geste ergibt sich in erster Linie durch den Ausf hrungsort auf der Benutzeroberfl che Liegt dieser im definierten Geltungsbereich der Geste sind in zweiter Instanz deren Ausf hrungseigenschaften zu analysieren Der Geltungsbe reich einer Geste ist durch das Gr enformat zugeordneten Ul Elements bestimmt Bezugnehmend auf das zu Grunde liegende Box Modell eines Web Elements vgl Kapitel 2 3 3 erstreckt sich der Bereich ber d
131. nige zielen jedoch auf eine Konzeption anwendungsspezifischer Gesten ab Mit Moousture wurde ein Framework gefunden das eine Formalisierung von Gesten in Betracht zieht und damit den Anforderungen an diese Arbeit nahe kommt allerdings k nnen hiermit lediglich Einzelpfad Gesten angewandt werden Es wurde festge stellt das sich eine Vielzahl von Frameworks auf die Imitierung von plattformspezi fischen Benutzeroberfl chen konzentrieren WebApps CHARLAND ET AL sind der Auffassung dass derartige Implementierungen die Zukunft mobiler Software sind We re confident that Web technologies will become indistinguishable from native experiences Charland und LeRoux 2011 Entgegen dieser Aussage wird in dieser Arbeit jedoch der Standpunkt vertreten dass die Frameworks die gestalterischen Freiheiten eines Webentwicklers sehr stark einschr nken indem sie Bedienelemen te und darauf anwendbare Gesten vorgeben Das Fazit dieses Kapitels ist demnach dass trotz vieler L sungen nach wie vor ein Mangel an Instrumenten f r die Imple mentierung touchbasierter Web Interfaces besteht insbesondere in Hinsicht auf die Konzeption selbst definierter Multitouch Gesten 3 3 2 Sprachbasierte Frameworks Die Implementierung spezieller anwendungsspezifischer Gesten auf Basis einer uni versell einsetzbaren Programmiersprache wie JavaScript erfordert fundiertes Wis sen der Softwareentwicklung und Kenntnisse ber die Verwendung des zu Grunde liegenden Event Inte
132. nition einer Geste und Registrierung 2 2 2 2 2 nn nn nn nn 79 xiii
133. nnungsmethodik des 85 6 Zusammenfassung und Fazit Weitere Systemtests vornehmen Performanzoptimierung 86 1 Recognizer entschieden Bew hrt hat sich dieser Algorithmus insbesondere in Bezug auf seine Erweiterbarkeit Es konnte gezeigt werden dass ber die Standard Implementierung hinaus auch zusammengesetzte Gesten Multitouch Gesten und sogar Online Gesten erkannt werden k nnen Details zum Entwurf der Framework Komponenten sowie die allgemeine Anwendung des API wurden im Kapitel der Konzeption und Implementierung beschrieben Zu Testzwecken wurde eine Web Anwendung entwickelt in der die Funktionsweise des Frameworks nachvollzogen werden kann Die Testumgebung beinhaltet sowohl beispielhafte vordefinierte Gesten Sets als auch Funktionen mit denen sich weitere Gesten definieren lassen Entwicklern wird damit auch ein Werkzeug angeboten mit dem Gesten dahingehend berpr ft werden k nnen ob sie harmonieren oder mit einander in Konflikt treten Die Arbeit schlie t mit einem Anwendungsprototypen auf einem Multitouch Tablet ab der Perspektiven f r den Einsatz des Gestenerken nungsframeworks in einfachen informativen Web Seiten aufzeigt 6 1 AUSBLICK M gliche Erweiterungen der Gestenformalisierung speziell f r Web Anwendungen wurden in Kapitel 4 2 10 zusammengefasst und sind auf hinreichende Bedeutung f r die Weiterentwicklung der Beschreibungssprache zu pr fen In diesem Kapitel werden Perspektiven f r die Wei
134. ns auf Anwendungsebene in Betracht gezogen Das Interaktionsdesign konzentriert sich nach der Definition in Cooper etal 2007 auf die Konzeption des Verhaltens der Applikation sowie alle Elemente die dieses Verhalten kommunizieren Nach Dorau 2011 bedeutet Interaktionsdesign nicht nur die Entwicklung eines Bedienkonzepts sondern es m s sen ebenso sthetische Aspekte und das mentale Modell einbezogen werden Dies liegt im Verantwortungsbereich der Web Entwickler Das Web Framework soll die se Aufgabe unterst tzen ohne die gestalterischen Freiheiten einzuschr nken Ziel dieses Kapitels ist es demnach nicht Vorgaben f r ein gutes Design zu erarbeiten oder Best Practices wiederzugegeben sondern ein grundlegendes Verst ndnis f r die Anwendung von Gesten auf dieser Konzeptionsebene zu entwickeln Das ist notwendig um den Entwurf des Frameworks zweckm ig und benutzerorientiert zu berdenken Im Folgenden werden daf r Interaktionstechniken verglichen Ab schnitt 3 4 1 sowie Eigenschaften und Besonderheiten von Touch Interfaces n her beleuchtet Abschnitt 3 4 2 Des Weiteren besch ftigt sich dieses Kapitel mit der Beziehung zwischen elementarer Eingabe und zu l sender Aufgabe Abschnitt 3 4 3 und pr sentiert konkrete Beispiele f r die Anwendung von Gesten Abschnitt 3 4 4 3 4 1 Vergleich von Maus Stift und Touch Interaktion Der offensichtlichste Unterschied zwischen der Bedienung mit der Maus und der di rekten Eingabe
135. nts http www derhess de Dez 2010 URL http www derhess de sonstiges paper_ gesturedesign_print pdf Zugriffsdatum 11 02 2012 Wigdor und Wixon 2011 Wigdor Daniel Wixon Dennis Brave NUI World Designing Natural User Interfaces for Touch and Gesture 1 Morgan Kaufmann 4 2011 ISBN 9780123822314 wikipedia 2011 Wikipedia Acid Browsertests Nov 2011 URL http de wikipedia org wiki Acid_Browsertests Zugriffsdatum 02 11 2011 Wikipedia 2012 Wikipedia Webbrowser Feb 2012 URL http de wikipedia org wiki Webbrowser Zugriffsdatum 11 02 2012 vii Literaturverzeichnis Wobbrock etal 2009 Wobbrock Jacob O Morris Meredith R Wilson Andrew D User defined gestures for surface computing In Proceedings of the 27th international conference on Human factors in computing systems New York NY USA ACM 2009 CHI 09 S 1083 1092 URL http doi acm org 10 1145 1518701 1518866 ISBN 978 1 60558 246 7 Wobbrock etal 2007 Wobbrock Jacob O Wilson Andrew D Li Yang Gestures without libraries toolkits or training a 1 recognizer for user interface prototypes In Proceedings of the 20th annual ACM symposium on User interface software and technology New York NY USA ACM 2007 UIST 07 S 159 168 URL http doi acm org 1 1145 1294211 1294238 ISBN 978 1 59593 679 0 Wood 2008 Wood Daniel Methods for Multi touch Gesture Recognition 2008 URL ht
136. obile Touch Optimized Web Framework for Smartphones Tablets Okt 2011 URL http jquerymobile com Zugriffsdatum 14 11 2011 Kaltenbrunner 2011 Kaltenbrunner Martin TUIO 2011 URL http www tuio org Zu griffsdatum 20 01 2012 Kaltenbrunner und Bencina 2009 Kaltenbrunner Martin Bencina Ross reacT Vision 1 4 a toolkit for tangible multi touch surfaces Mai 2009 URL http reactivision sourceforge net Zugriffsdatum 07 11 2011 Kammer etal 2011 Kammer Dietrich Henzen Christin Keck Mandy Taranko Severin GeForMT Gestenformalisierung f r Multitouch In Groh Rainer Hrsg Zavesky Martin Hrsg Wieder mehr Sehen Aktuelle Einblicke in die Technische Visualistik TUDpress 2011 Kammer etal 2010 Kammer Dietrich Wojdziak Jan Keck Mandy Groh Rainer Taranko Severin Towards a formalization of multi touch gestures In ACM International Conference on Interactive Tabletops and Surfaces New York NY USA ACM 2010 ITS 10 S 49 58 URL http doi acm org 1 1145 1936652 1936662 ISBN 978 1 4503 0399 6 Kaneda und Stark Kaneda David Stark Jonathan jQTouch A jQuery plugin for mobile web development on the iPhone Android iPod Touch and other forward thinking devices URL http jqtouch com Zugriffsdatum 14 11 2011 Khandkar und Maurer 2010 Khandkar Shahedul H Maurer Frank A Domain Specific Language to Define Gestures for Multi Touch Applications Oct
137. ogenannten Pie Menus ein radiales Men dessen Segmente mit verschiedenen Kontextfunktionen belegt sind Die Ausf hrungsrichtung der Geste be stimmt demnach die Aktion Marking Menus verzichten auf diese grafische Unterst tzung womit der Fokus mehr auf der Ausf hrung selbst liegt Das Prinzip ist jedoch das selbe Moyle und Cockburn 2003 3 4 Applikation Symbole Symbolische Gesten finden sich in einem breiten dom nenspezifischen Anwendungs feld wieder und unterliegen kulturellen Unterschieden wie unterschiedliche Um Tene gangsformen und Metaphern oder Unterschiede die in der Sprache und dem Al AGBs zu phabet begr ndet liegen Aus diesem Grund kommen symbolische Gesten wie auch Abbrechen fi Shortcuts nicht ohne Lernhilfen aus As with other types of shortcuts gesture shortcuts face several major challenges such as learnability memorability and scalability Li 2010a Abbildung 3 24 Best tigen in einem Dialog Beispielhaft ist die Umsetzung des Kontextmen s im Showcase von Moousture vgl Kapitel 3 3 1 zu nennen das durch eine Kreis Geste oder durch das Symbol W aufgerufen wird Sibt e Hassan 2010 F r die Selektion einzelner Objekte eignen sich Gesten wie das Ankreuzen Gei ler 2001 S 75 oder Abhaken Gei ler 2001 S 85 Letzteres vorallem auch f r die Best tigung von Dialogen wie es in Abbil dung 3 24 gezeigt wird Gei ler 2001 S 83 Ein Ausrufezeichen kann als ei
138. onaler Gesten werden in Abschnitt 2 2 2 Gliederung der genauer betrachtet Zuvor werden in Abschnitt 2 2 1 die f r dieses Thema relevanten folgenden Abschnitte Eingabeger te vorgestellt In Abschnitt 2 2 3 wird anschlie end eine Klassifikation anhand bedeutungsunterscheidender Merkmale von Gesten vorgenommen 3World Wide Web Consortium URL http www w3 org Stand 29 09 2011 Web Hypertext Application Technology Working Group URL http www whatwg org Stand 26 01 2012 gt Web Standards Project URL http www webstandards org Stand 26 01 2012 2 Grundlagen Maus Trackpad Multitouch Maus Touchscreen Monitor Tablets und Smartphones 2 2 1 Klassifikation von Eingabeger ten Dieser Abschnitt gibt einen berblick ber die Eingabeger te die blicherweise im Umgang mit einem Web Interface eingesetzt werden Im Fokus liegt dabei das Po tenzial der Gesteninteraktion oo 6d L bom a Trackpad Magic b Monitor c Tablet TouchPad d Smartphone Galaxy Trackpad Apple 2010 Multi Touch Monitor HP 2011 Note mit beiliegendem SX2210T Dell 2011 Eingabestift Samsung 2012 Abbildung 2 1 Beispiele von Eingabeger ten f r die Interaktion mit Webinhalten Die klassische Maus ist in Desktop Computersystemen die am meisten verbreite te Eingabeperipherie Durch sie k nnen relative Bewegungen von Hand und Arm bertragen werden Sie verf gt blicherweise ber zwei Finge
139. ouch Systeme eingestellt hat In vielen F llen sind Web Implementierungen so sehr auf die Maus Interaktion und gr ere Monitore spezialisiert dass die Anwendung nicht ber Tablets oder Smartphones bedient werden kann Im umgekehrten Fall ist die ses Problem sogar noch st rker ausgepr gt Bis auf einige wenige Ausnahmen wie zum Beispiel das in Kapitel 3 3 1 vorgestellte JavaScript Framework jQuery Mobi le legen sich die Entwickler auf eine Optimierung f r mobile ber hrungssensitive Eingabeger te fest 4 SYNTHESE Dieses Kapitel unterteilt sich in zwei abgrenzbare Bereiche In Kapitel 4 1 wird ein Szenario vorgestellt das die Perspektiven von Web Entwickler und Web Nutzer n her bringt die sich hinsichtlich der Anwendung eines JavaScript Frameworks zur Gestenerkennung bieten Kapitel 4 2 besch ftigt sich mit dem Thema der Gesten formalisierung und ihrer Integration in Web Anwendungen 4 1 ENTWICKLUNG UND ANWENDUNG EINER MOBILEN WEB ANWENDUNG Insbesondere mit der zunehmenden Mobilisierung von internetf higen Ger ten ha Intention der Nutzer ben sich die Funktionen des Webs bedarfsgerecht und anwendungsspezifisch erwei tert dennoch ist die grundlegende Absicht der Nutzung des Internets das Beziehen aktueller Informationen und neuen Wissens unver ndert und am verbreitetsten Die Ergebnisse einer Nutzerstudie im mobilen Anwendungsbereich Schmiedl etal 2009 unterstreichen diese Tendenz Based on a categorization of
140. pezialisiert Wesentliches Merk mal von Multitouch Eingaben ist dass mehrere Ber hrungseingaben synchron auf treten k nnen Das TouchList Interface repr sentiert daher eine Menge Kontak te welche jeweils durch den Datentyp Touch beschrieben werden Jedem neuen Ber hrungspunkt wird dabei eine Nummer zugeteilt identifier wodurch eine Zuordnung in zuvor aufgetretenen oder darauffolgenden Ereignissen m glich ist Es werden drei Typen von TouchList unterschieden Das Attribut touches liefert eine Liste aller zum aktuellen Zeitpunkt auf dem Touchscreen registrierten Ber h rungspunkte changedTouches beschr nkt sich auf die Ber hrungspunkte die sich zu den vorangegangenen Ereignissen ver ndert haben und targetTouches bezieht sich auf die Ber hrungspunkte die dem Element zuzuordnen sind auf dem die Ge ste begonnen wurde EventTarget bildet die Schnittstelle f r die Registrierung von Events die bereits in Kapitel 2 3 6 erl utert wurde vgl W3C 2000 und W3C 2011g Je nach sensorischer Ausstattung des Ger tes k nnen verschiedene Informationen ber einen Ber hrungspunkt erfasst werden Folgende Eigenschaften eines Kontak tes sind im Interface Touch festgelegt e Position clientX clientY pageX pageY screenX und screenY e Druck force e Orientierung rotationAngle e Kontaktgr e radiusX und radiusY Zahlreiche Web Browser setzen die erl uterte Spezifikation die sich ma geblich an den Konzepten der Safari Even
141. pitel 5 2 sind in einer einzigen JavaScript Datei zusammengefasst Die Integration in eine Web Seite erfolgt ber das script Tag in HTML wie in Listing 5 2 gezeigt wird O O lt head gt lt script type text javascript src GeForMT min js gt lt script gt lt head gt Oo BWN Listing 5 2 Einbindung des Frameworks in HTML Das Volumen der Datei wird durch die Kompremierung des Quelltextes Verk rzung von Bezeichnern und Filterung von Kommentaren und Leerzeichen reduziert um die Ladezeit zu verringern Als Endprodukt entsteht demnach eine minimale Version vgl Listing 5 2 und eine Vollversion GeForMT full js die Namenskonventionen beibeh lt und die Code Dokumentation beinhaltet 5 3 2 Anwendungsschnittstellen Das Framework API ist ber den Namensraum GeForMT zug nglich vgl Kapitel 5 2 Abbildung 5 9 zeigt die Funktionen deren Anwendung im Folgenden erl utert werden p ooo GoM E u init gestures settings addGesture gesture removeGesture identifier addRecognitionStartedEventListener function addRecognizedCandidatesEventListener function addRecognitionFailedEventListener function Abbildung 5 9 Haupt Programmierschnittstelle Die Initialisierung der Framework Komponenten durch die Methode init ist obli gatorisch Dabei k nnen optional globale Einstellungen settings vorgenommen und eine Menge vordefinierter Gestenbeschreibungen gestures bernommen werden Im einfachsten Fall is
142. plikat erzeugt Abbildung 3 20 illustriert die beiden Gesten Das Einf gen eines Objek tes wird blicherweise mit einer DRAG amp DROP Geste realisiert wobei entscheidend ist an welcher Stelle das Objekt losgelassen wird Die Unterst tzung dieser Anwei sungen in Webanwendungen geht vom Browser aus und lehnt an klassische GUI Konzepte an Unter iOS wird basierend auf einer Selektion von Text oder anderen grafischen Elementen ein Kontextmen aufgerufen ber das die Funktionen aus w hlbar sind siehe Abb 3 21 F r den Aufruf eines Kontextmen s hat sich die Geste mit der Bezeichnung TAP amp HOLD durchgesetzt Dorau 2011 S 154 Dabei wird ein Finger auf dem Bedienelement wie zum Beispiel ein Eingabefeld gehalten w hrend ein zweiter die Fl che kurz antippt vgl Abb 3 21 Entfernen Das Entfernen von Inhalten hat viele Facetten und beruht meist darauf dass der Anwender die Rolle eines Gestalters einnimmt Der Anwender erzeugt ordnet an und entfernt wenn n tig Bezogen auf das Web finden sich diese Aufgaben in personalisierbaren Webportalen wie zum Beispiel iGoogle oder soziale Netzwer ke wieder Aber auch ins Internet ausgelagerte Werkzeuge wie Mail Assistenten beispielsweise Google Mail Dokumenten Sharing Portale beispielsweise Google Docs oder Grafik und Diagramm Werkzeuge bis hin zu Online Betriebssystemen Systemen OOS unterst tzen derartige gestalterische Prozesse die das Entfernen von Objekten erm glichen Das einm
143. pple 2011b iPod 09 21 Nurullo to purchase necessary tools and repair the faciities Abdulmumin to Purchase feriizar Inna Oleinik to purchase women s sweaters cardigans and jackets Wireless amp networks ses Eintan Call settings inf hrung B Grundlagen Sound amp display Synchronisierung und gt Telefon gt Mail u Location amp security A Alisher 8 to repair the car DI Applications Safari een U U m m ca a Beispiel einer Webanwendung entwickelt mit b Nachstellung des c Online dem JavaScript Framework Sencha Touch nativen Benutzerhandbuch fur Sencha 2011 Android Interface mit das Apple iPhone mit dojox mobile Dojo PastryKit Apple 2009a 2011 Abbildung 3 4 Showcases f r die Verwendung von JavaScript Frameworks f r mobile Webanwendungen 3Eine native App ist eine plattformspezifische Anwendungssoftware in einem mobilen Endger t wie beispielsweise einem Smartphone vgl Charland und LeRoux 2011 27 3 Verwandte Arbeiten Kompatibilit t der Interaktionstechniken Kontextunabh ngige L sungen der Integration von Gesten 28 Ww KTouch Jester Eine Herausforderung der ger te bergreifenden Darstellung von Web Seiten ist die Bedienbarkeit unter verschiedenen Interaktionskonzepten zu gew hrleisten Dies er fordert die gleichbedeutende Unterst tzung von Maus und Ber hreingaben Viele Web Entwickler umgehen derartige A
144. prachkonzept folglich unter Ber cksichtigung der Eigenschaften von JavaScript zu erweitern ist _ SS a a a U a a definition complex I complex _ time gt handler handler A Za z0 9_ A Za z0 9_ O Listing 4 4 Angepasste EBNF Regel f r die Aktionszuweisung angelehnt an Henzen 2010 S 83 Der Sprachzusatz spezifiziert den Eventbezug indem der Formalisierung der Bezeich ner des zugeh rigen Event Handlers angehangen wird Im Sinne der Objektorien tierung wird dabei auch die M glichkeit ber cksichtigt den Geltungsbereich des Handlers anzugeben Runde Klammern am Ende sind lediglich unterst tzende Ele mente um den Funktionscharakter des Konstrukts zu verdeutlichen Der Ausdruck draw MOVE gt DrawContext draw ordnet der Geste beispielsweise die Handler Funktion draw zu die im anwendungsspezifischen Objekt DrawContext implemen tiert ist Ein anderer Ansatz basiert auf der Zuordnung durch eine Datenstruktur die der Be schreibungssprache bergeordnet ist In JavaScript bieten sich hierf r Objekt Literale an In Kapitel 2 3 5 wurde beschrieben dass Objekt Literale f r die Konfiguration verwendet werden Im folgenden wird daher auch von der Konfiguration einer Ge ste gesprochen GeForMT wird dabei zu ihrer wesentlichen Aufgabe zur ckgef hrt indem die Sprachbausteine auf die Formalisierung der Bewegung reduziert wird Der Bezeichner und die Aktionsbeschreibu
145. r Auswahl einer Objektmenge Khandkar und Maurer 2010a Kombination und Erweiterung der Sprachoptionen 32 dargelegt wurden Die Definition von Gesten erfolgt auf Basis der Gesture Definiti on Language GDL nach Khandkar und Maurer 2010a die als Konfiguration des Frameworks ausgelagert ist Jede Definition beschreibt eine Geste die ber Regi strierfunktionen der API zur Laufzeit eingebunden werden k nnen Die Regeln wer den in ein internes Datenmodell transformiert auf dessen Basis der Gestenprozessor eine Validierung der Eingabedaten vornimmt Callback Gesture Processor Gesture Der Definition A i Model roller Abbildung 3 7 Komponenten in TouchToolkit Khandkar und Maurer 2010b Register gesture event Input Providers Hardware abstraction Layer Raw input Eine GDL Definition beginnt mit dem Schl sselwort name gefolgt von einem ein deutigen Bezeichner der Geste Einige h ufig verwendete Gesten sind zur Wieder verwendung bereits vordefiniert vgl Khandkar und Maurer 2010b Eine ber schreibung zum Zweck der Neudefinition dieser Standardgesten ist unter Angabe des selben Bezeichners m glich Mit dem Schl sselwort validate wird der Block f r die Regeln die die Geste beschreiben eingeleitet Sie setzen sich aus atoma ren Bedingungen zusammen Das Beispiel in Listing 3 4 definiert eine LASSO Geste vgl Abb 3 8 mit folgenden Einschr nkungen Die Eingabe wird mit einem Finger ausgef hrt Touch
146. r definiert werden vgl Listing 4 7 Z 2 Dieses Konstrukt bildet die Beschreibungs vorlage die lediglich die Bewegungsform der Geste abbildet Die Anwendung der Vorlage hat den Charakter einer Funktion die die Gestenbeschreibung in einen Kon text setzt der sich haupts chlich ber den Geltungsbereich definiert Als Platzhalter bieten sich Marken an gefolgt von einem Zahlenwert der die Parameterposition in der Anwendungsfunktion repr sentiert SSS EE 2 ee Gestenbeschreibung als Vorlage gestural pinch SPLIT LINEC 1 LINEC 1 Geste mit Objektbezug representational scale pinch id Listing 4 7 Verwendung von Beschreibungsvorlagen f r eine kontextunabh ngige Formalisierung Das Beipsiel zeigt eine PINCH Geste die durch das Spreizen der Finger auf einem Ob jekt zu beschreiben ist Eine m gliche Folgeaktion ist das Skalieren dieses Objektes Ein Beispiel f r die Anwendung dieses Ansatzes ist Standardgesten vorzudefinieren um sie anschlie end mit einem einfachen Funktionsaufruf an ein Objekt zu binden und so den Kontext zu bestimmen 4 2 9 Anomalien In diesem Abschnitt werden Auspr gungen der Beschreibungssprache diskutiert die auf Basis der GeForMT Grammatik syntaktisch zul ssig jedoch in der Implementie rung uneindeutig oder nicht anwendbar sind In Online Gesten sind komplexe Bewegungsformen schwer zu erfassen da das Er Komplexe eignisprofil der Eingabe zun chst unvollst ndig ist Beispielsweise li
147. r Kom positionsvielfalt im Bereich der M glichkeiten des Eingabeger tes Im Kontext der Systemanwendung wird den Gesten eine Bedeutung zugeordnet Semantics mit der ein Bezug zur Aufgabe geschaffen wird Diesbez glich wurden Klassifikations ans tze in Kapitel 2 2 3 vorgestellt Pragmatics umfassen das mentale Modell des Anwenders insbesondere dessen Absichten und Erwartungen im Dialog mit dem System COOPER ET AL betrachten die Dimensionen der Interaktion in Zusammenhang mit Bedienelementen der Benutzungsschnittstelle und den M glichkeiten der darauf an wendbaren Aktionen Zu den Primitives geh ren elementare Eingaben wie das Be t tigen einer Taste auf dem Eingabeger te oder eine einfache Zeigehandlung Die Konsequenz ist ein elementares Feedback wie zum Beispiel die Neupositionierung des Cursors Compounds sind Kompositionen elementarer Anweisungen wie zum Beispiel die Selektion verschiedener Bedienelemente oder ein Doppelklick um ein Programm auszuf hren Unter dioms sind komplexe aufgabenspezifische Anwei sungen und Aktionen zusammegefasst wie das Zeichnen Erzeugen oder L schen von Objekten information related to the user s work patterns and goals and not specifically to the computerized solution Cooper etal 2007 S 281 Nach der Web Events Working Group Charter unter W3C 2010b wird eine hn liche Differenzierung von Gesten vorgenommen Hinsichtlich der Umsetzung der Charter wird deutlich dass es sich
148. rMT Syntax auf anwendbare Regeln f r die Beschreibung von Maus und Single Touch Gesten 4 2 3 Kontakttypen Das Architekturmodell vgl Kapitel 3 1 sieht eine Abstraktion der Eingabedaten auf unterster Ebene vor Damit ist die Spezifizierung primitiver Eingaben auf Anwen dungsebene weitestgehend unabh ngig von der eingesetzten Technologie da das System die Daten im einfachsten Fall in diskrete Werte zur Positionsbestimmung bersetzt Das standardisierte Touch Event Interface sieht die Bereitstellung von In formation zu den Ma en der Ausrichtung und dem Druck einer Ber hrung vor so fern die Parameter durch entsprechende sensorische Vorrichtungen messbar sind vgl Kapitel 3 2 1 Die Erkennung der Hand oder eines Blobs wie sie in GeForMT als Sprachoptionen H und B angedacht sind ist bisher kein verbreitetes Bedienkonzept in Webanwendun gen Dies ist darauf zur ckzuf hren dass die Multitouch Technologie vorrangig in mobilen Endger ten Anwendung findet Deren Interaktionskonzepte konzentrieren sich auf Eingaben mit dem Finger oder einem beigef gten Stift Stylus Theore tisch kann auf Basis der Gr e und Form des Kontaktpunktes auf den Kontakttyp geschlossen werden und die Auswahl anwendbarer Gesten gegen ber dem Einga beger te adaptiert werden F r die Klassifikation kommen der Kontakt durch einen Maus Cursor der Stiftkontakt und die Ber hrung mit dem Finger in Frage 4 2 Webkonforme Gestenformalisierung Die Einteil
149. rd Der Objektbezug erfolgt ausschlie lich ber die Id des HTML Elementes Durch die bergabe eines Konfigurationsobjektes kann genau bestimmt werden welche Operation und Eigenschaften auf dem Objekt m glich sein sollen SSS m 1 var element new WKTouchC elementId 1 2 dragable true 3 scalable false 4 rotatable true 5 opacity false 6 H initO Listing 3 1 Initialisierung von Multitouch Gesten mit WKTouch Gibson 2011 Der Ansatz ist dahingehend interessant dass Gesten implizit Uber zugewiesene Ei genschaften festgelegt werden statt sie formal zu definieren und danach zuzuwei sen Dar berhinaus erfolgt die Objekterzeugung mit einhergehender Initialisierung der Gestenerkennung im Sinne des Entwurfsmusters mmediate Object Initialisierung nach Stefanov 2011 S 76 Das macht den Ansatz zu einer kompakten L sung Das Verhalten bei erfolgreicher Erkennung der Gesten ist wie in jPooky jedoch be reits vorgegeben Eine Aktionszuweisung entf llt also Der Ansatz nach Seaward 2010 sieht in dem Framework Jester ebenfalls ein festes Repertoire m glicher Gesten vor berl sst dem Web Entwickler jedoch die Imple mentierung der Folgeaktion Jester stellt acht verbreitete Gesten zur Verf gung Sie werden jeweils durch Funktionen repr sentiert denen gem einer eventbasierten Architektur ein Event Handler bergeben wird Zus tzlich bietet es Funktionen an um elementare Ereigniss
150. rd mit CONNECT_START die Bedingung eingef hrt dass alle Gestenz ge im gleichen Punkt starten siehe Abb 4 4a Ein zweiter Ansatz ist die Klassifikation von horizontal und vertikal angeordneten Ge sten Durch die Relationen AMONG und ASIDE lassen sich diese Bedingungen formal Vor und Nachteile der Klassifikation Komposition mit dem Komma Operator Verkn pfungs parameter CONNECT Definition Komma und Semikolon R umlichen Anordnung zusammengesetzter Gesten Ankn pfung Horizontale und vertikale Nachbarschaft 55 4 Synthese 56 Nachbarschaft mit optionaler Richtungsangabe Uneindeutige Beschreibung der Bewegungsform u TTI gA II y bp i 2 OoOo JL Je s a CONNECT_START b AMONG c ASIDE Pfeil Symbol d ADJOIN Ankn pfung im Fragezeichen Symbol in in horizontaler Richtungsbasierte Startpunkt vertikaler Anordnung Anordnung Nachbarschaft Abbildung 4 4 Beispiele f r die Formalisierung der r umlichen Anordnung zusammengesetzter Gesten Legende Schraffierte Bereiche verdeutlichen den G ltigkeitsbereich von verkn pften Gestenz gen Entsprechende GeForMT Ausdr cke a CONNECT_START LINE_SW LINE_SE b AMONG SEMICIRCLE_S_CW LINE_S POINT c ASIDE LINE_E LINE_SE LINE_SW d ADJOIN_E LINE_SW beschreiben Abbildung 4 4b zeigt die gestenhafte Skizzierung eines Fragezeichens dessen G ltigkeitsbereich sich ber ein horizontales Band erstreckt Abbildung 4 4c zeigt den F
151. re eingesetzt wird Nicht selten werden in den im vorigen Ab schnitt beschriebenen mobilen Endger ten zus tzlich Stifte angeboten vgl Abb 2 1d Vorallem bei sehr kleinen Displays kommen sie als Eingabehilfe zum Einsatz Spezialisierte Grafik Tablets verf gen ber M glichkeiten der sensorischen Erken nung die ber das reine registrieren eines Kontaktes hinausgehen Basierend auf Induktion und elektromagnetischer Resonanz k nnen Druck Stiftneigung Ausrich tung und axiale Drehung erfasst werden vgl Dorau 2011 2 2 2 Eigenschaften und Struktur zweidimensionaler Gesten Die kommunikative Absicht einer Geste die in der Einf hrung dieses Kapitels be Haupteigenschaften schrieben wurde formuliert DORAU als eine von vier elementaren Eigenschaften Gesten sind dar ber hinaus an einen bestimmten Geltungsbereich gebunden ha ben ein R ckmeldeverhalten und lassen sich durch ihr charakteritisches Ereignisprofil und anhand distinktiver Merkmale spezifizieren Dorau 2011 S 170 ff Das Ereignisprofil wird in Dorau 2011 S 172 als Choreografie einer Geste be Profil einer Geste schrieben die aus einer Kette elementarer Ereignisse besteht und in ihrer Gesamt heit ein charakteristisches Muster der Ausf hrung bilden Nach Wu etal 2006 und Wigdor und Wixon 2011 l sst sich eine Geste in zeitlich abgrenzbare Phasen einteilen Die Registrierung Ausf hrung und der Abschluss einer gestischen Hand lung
152. reRecognizedEvent uses GestureRecognitionCandidatesEvent GestureRecognitionFailedEvent amp DollarRecognizer lt lt creates gt gt 1 1 RecognitionContext recognize Recognizer recognize context StaticGestureRecognizer a ee sear recognize RelationRecognizer recognize _ Abbildung 5 7 GestureRecognition Modul Der zentral gelegene RecognitionProcessManager steuert die wichtigsten Pro zesse und entscheidet wann eine Geste beginnt endet zu interpretieren ist und als erkannt gilt Es stehen ihm vier Ereignistypen zur Verf gung die den Status der Gestenerkennung vermitteln e GestureRecognitionStartedEvent Tritt ein wenn die Berechnung startet e GestureRecognizedEvent Tritt ein sobald eine Geste als erkannt gilt und liefert hautps chlich das zusammengestellte Ereignisprofil und die daraus ex trahierten Punktpfade f r die Weiterverarbeitung aus e GestureRecognitionCandidatesEvent Vermittelt Zwischenergebnisse wenn zusammengesetzte Gesten verarbeitet werden Es tritt ein sobald ein Teil der Geste erkannt wurde und listet potenzielle Kandidaten auf e GestureRecognitionFailedEvent Tritt ein wenn der Gestenerkenner kei ne Ergebnisse hervorbringt was bedeutet dass die Eingabe auf keine Beschrei bung passt Erkennung von Online Gesten Entwurf des Gestener kennungsmoduls 75 5 Konzeption und Implementierung Datenmanagem
153. recognition Offline recognition ion successfully completed Add Gesture Abbildung 5 10 Web Interface der Testumgebung Die vordefinierten Gesten verdeutlichen die vielf ltigen Anwendungsf lle die in der Implementierung des Frameworks ber cksichtigt wurden Aus diesem Grund wer den die Gesten Sets im Folgenden vorgestellt Examplarisch f r Einzelpfad Gesten sind in der ersten Auswahl Gesten aus dem Graffiti Symbolalphabet A Z definiert Sie wurden bereits in Kapitel 3 4 4 vorgestellt vgl Abb 3 26 Es folgt eine Auswahl zusammengesetzter Gesten Option Multistroke gestures wie sie in Abbildung 5 11 skizziert sind Ihre Erkennung basiert haupts chlich auf der Differenzierung von sequentiellen Kompositionsoperatoren in Kapitel 4 2 4 sowie der Implementierung der horizontalen und vertikalen Nachbarschaftsbeziehung 5 3 Anwendung A D H G Q R 2 a 2 4 2 4 5 A ND tt Ge AR 1 Gl z asterisk exklamation questionmark avg arrowhead sixPointStart dots xl 1 GB gt UX Abbildung 5 11 Skizzierung der vordefinierten sequentiell komponierten Gesten Abbildung 5 12 skizziert die repr sentativen Multitouch Gesten Option Multitouch gestures deren Erkennung sich vorallem auf einer Unterscheidung der vorgeschrie benen Relationen SYNC SPLIT und JOIN st tzt waves multiTap pinch shrink 2 5 finger se F RY 5 Abbildung 5 12 Skizzierung der definierten Menge synchron aus
154. removeEventlListener dispatchEvent stopPropagation preventDefault UlEvent MouseEvent TouchEvent touches TouchList 7 Touch changedTouches identifier targetTouches Abbildung 3 2 MouseEvent und TouchEvent Interface nach W3C 2000 und W3C 2011g Die Web Events Working Group des W3C arbeitet aktuell an einem Standard f r die Standardisierung von Integration von Multitouch und Stifteingaben in Web Seiten Dessen Entwicklung Multitouch und schlie t laut dem Meilensteinplan in W3C 2010b mit einer offiziellen Empfeh lung im August 2012 ab Der aktuelle Arbeitsstand der Spezifikation ist in W3C 2011g beschrieben Demnach hat man sich auf folgende Event Typen festgelegt touchstart touchend touchmove touchcancel touchenter und touchleave Die Bedeutung der Ereignisse ist der von Maus Events sehr hnlich vgl Abschnitt 2 3 6 Die Unterschiede werden jedoch mit Betrachtung des Event Interfaces welches in Abbildung 3 2 dargestellt ist deutlich Stift Eingaben Details der Spezifikation stehen noch zur Diskussion Siehe W3C Editor s Draft der Touch Events version 2 in W3C 2011 23 3 Verwandte Arbeiten TouchEvent Interface Spezifikation von Eigenschaften eines Kontaktes Umsetzung in Web Browsern GestureEvent Interface 24 in Safari TouchEvent erbt wie auch das bekannte MouseEvent von dem Interface UIEvent welches sich auf die vom Nutzer initiierten Ereignisse s
155. rface Die Abbildung der Komplexit t und Vielfalt von Gesten kann unter Umst nden sehr kompliziert und un bersichtlich werden Aus diesem Grund werden in diesem Kapitel Ans tze der Gestenformalisierung betrachtet Eine umfassende Einordnung von Ans tzen der Gestenbeschreibung wird in Hen zen 2010 vorgenommen Demnach werden lineare baumstrukturierte und netz artige Formalisierungsans tze unterschieden Dar ber hinaus kann eine Gestenbe schreibung bez glich ihrer Darstellungsart und dessen Formalisierungsgrad vgl Kam mer etal 2011 klassifiziert werden Eine f r den Menschen intuitiv verst ndliche Methode ist die nat rliche Sprache und bildliche Verdeutlichung Benutzerstufe vgl Kammer etal 2011 beispielsweise durch die Skizzierung der Gestenpfade Wie in Henzen 2010 bemerkt wird ergeben sich hinsichtlich einer rechnergest tzten 3 3 Interpretation von Gesten Auswertung jedoch Probleme da sich Mehrdeutigkeiten ergeben k nnen Forma le Sprachen hingegen basieren auf einer strukturierten und logischen Verkn pfung von Zeichen die mit Kenntnis ihrer Semantik sowohl aus Benutzersicht als auch von Rechensystemen lesbar und auswertbar sind In Kammer etal 2011 wird dies folglich als Austauschstufe bezeichnet KHANDKAR ET AL bringen den Zweck einer formalen Gestenbeschreibungssprache auf den Punkt A domain specific language DSL for definition gestures can hide the low level complexities by encapsulati
156. rhzeigersinn Benutzerdefinierte Gesten mit Moousture Abbildung 3 5 Abbildung der Himmelsrichtungen nach Sibt e Hassan 2010 Abbildung 3 6 Formale Beschreibung einr Kreisbewegung nach Sibt e Hassan 2010 29 3 Verwandte Arbeiten Klassifikation von For 30 malisierungsans tzen ausgef hrt wird vgl Abb 3 6 Die Zuweisung der Geste zu einem Geltungsbereich wird mit der Klasse Moousture MouseProbe realisiert vgl Listing 3 3 Zeile 8 Ent sprechend der Bezeichnung wird in dem Fall eine Mausgeste behandelt Es existiert jedoch auch eine Erweiterung f r den Einsatz in touchbasierten Webanwendun gen die durch die Funktion Moousture iPhoneProbe gekapselt ist Das Objekt auf dem die Geste definiert ist wird mit der in Mootools integrierten Selector Engine Celement ausgew hlt und der Klasse bergeben Den Verarbeitungsprozess der Nutzereingaben bernimmt die Klasse Moousture Recorder auf Basis der gege benen Konfiguration vgl Listing 3 3 Zeile 10 Zuletzt bestimmt die Komponente Moousture Monitor den Ablauf der Gestenerkennung vgl Listing 3 3 Zeile 16 Die initialen Parameter legen die Genauigkeit und Fehlertoleranzgrenze fest Die Er kennungsphase wird letztlich mit den Methoden start und stop gesteuert 3 3 1 1 Zusammenfassung Die Recherche zu webbasierten Frameworks die die Entwicklung von Gesten auf Multitouch Systemen unterst tzen zeigt ein breites Spektrum an L sungen auf Nur we
157. rschied zwischen Skalieren und Zoomen liegt im Ausf hrungs kontext der Geste Dies kann ein Objekt oder die allumfassende Ansicht der Anwen dung sein Die Ausf hrung selbst ist jedoch die gleiche das Zusammenziehen oder Auseinanderspreizen der Finger auch als PINCH und SHRINK bezeichnet Mobile Webbrowser setzen die Geste f r das Zoomen der gesamten Web Seite um so dass auch auf kleineren Bildschirmen sowohl ein berblick als auch Details der Ansicht erfasst werden k nnen Alternativ f hrt auch das zweimalige Antippen der Ansicht DOUBLE TAP zu einer diskreten Zoom Stufe vgl Apple 2011a Eine prototy pische Umsetzung der Manipulation von Web Elementen wie zum Beispiel Bilder oder Videos ist beispielsweise in Robinson 2010 und Cailliau etal 2009 zu se hen vgl Abb 3 17 Drehen Wie im Beispiel des Skalierens und Zoomens ist auch das Drehen eines Objektes und das Rotieren zum Zweck eines Perspektivwechsels zu unterscheiden In einer zwei dimensionalen Darstellung hat sich als Multitouch Geste eine rotierende Bewegung zweier Kontakte um ihren Mittelpunkt durchgesetzt wie es dem Umgang mit phy sischen Objekte entspricht Dorau 2011 S 149 Anwendung findet die Geste zum Beispiel in Kartenansicht oder auf Medien Objekten vgl Abb 3 17 die zur besseren Ansicht ausgerichtet werden m ssen Unabh ngig davon zeigt Abbildung 3 18 ein Beispiel in dem ein interaktives Kreisdiagramm basierend auf JavaScript implemen tie
158. rschlag f r die Gestaltung einer mobilen Web Seite ist der Idee in Moyle und Cockburn 2003 nachempfunden und verbindet die Naviga tion in der Browser History mit einer freien Geste Hierf r eignet sich eine schleifen f rmige Bewegung wie sie in Kapitel 3 4 4 vorgestellt wurde In Folge der bernah me h ufig verwendeter Browser Funktionen kann das Browser Interface versteckt werden was zu einem Platzgewinn f r die Web Inhalte f hrt Das Potenzial von symbolischen Gesten wird vorrangig in der Adaption von Access Keys gesehen Access Keys erlauben einen Schnellzugriff auf Seitenbereiche oder Men punkte und werden in der Regel ber die Tastatur ausgef hrt vgl W3C 1999 Beispielsweise k nnten die Anfangsbuchstaben der Men punkte als Access Keys definiert werden bertragen auf ein gestenbasiertes Konzept werden die Symbole als freie Gesten implementiert und k nnen dementsprechend anwendungs weit ausgef hrt werden Von Vorteil ist diese Methode vorallem dann wenn Links zu klein dargestellt sind oder zu dicht beieinander liegen so dass sie aufgrund des Fat Finger Problems vgl Kapitel 3 4 2 nur schwer bedient werden k nnen In dem Fall w re das Zeichnen des darauf verweisenden Symbols schneller und einfacher W hrend eine lineare Geste f r die Bl ttern Funktion noch einfach zu realisieren ist ist die Implementierung komplexer symbolischer Gesten mit einem kaum berechen 4 2 Webkonforme Gestenformalisierung baren A
159. rt au er dem einen Katalog zugeh riger Gesten der es erlaubt f r jedes Ereignis eine Aus wahl relevanter Gesten zu treffen Das zu Grunde liegende Event Interface orientiert sich an den in Kapitel 3 2 1 be Vereinheitlichung des schriebenen Konventionen f r Touch Events Um auch Maus Ereignisse gleicher Eyent Interface ma en verarbeiten zu k nnen wird eine Transformation des Event Objektes nach Touch Event Spezifikation vorgeschlagen Angelehnt an den Ansatz in Phantom Limb vgl Kapitel 3 3 1 und MagicTouch vgl Kapitel 3 2 2 wird die Emulation durch Ab setzung eines neuen Events mit der JavaScript Methode dispatchEvent vgl Ka pitel 2 3 6 realisiert Dieses wird dann von den touchspezifischen Event Handlern empfangen und damit Single Touch Gesten simuliert Die Prinzipien der Event Ausbreitung wurden in Kapitel 2 3 6 behandelt Als Strate Vererbung von Events gie f r die Ereignisbehandlung wird das Bubbling gew hlt Diese Herangehensweise durch Bubbling liegt in dem folgenden Fallbeispiel begr ndet Angenommen der Web Seitenentwick ler definiert sowohl eine freie Geste gebunden an das Element html als auch ein objektorientierte Geste auf einem kleineren div Element Der User beabsichtigt nun eine freie Geste auszuf hren durchquert dabei jedoch das enthalten div Element oder beginnt die Geste sogar darin Die Ereignisse die auf dem div registriert wur den geh ren potentiell auch zu der freien Gesten auf dem Elt
160. rt wurde Darin muss das Diagramm zun chst rotiert werden um Informationen zu den einzelnen Segmenten in Form eines dar ber angeordneten Tooltips zu er halten Eine spezielle Herausforderung ist die perspektivische und objektorientierte Rotation in dreidimensionalen Ansichten HAYES zeigt am Beispiel eines 3D W rfels implementiert auf Basis von Web Standards wie die Rotation f r Tastatur Maus Stift und Touch Interaktion gleicherma en realisiert werden kann Hayes 2010 In Bezug auf einen Perspektivwechsel dominiert in Web Browsern mobiler Endge r te die Drehung auf Basis der Bewegungssensoren Je nachdem wie das Ger t ausgerichtet wird quer hochkant passt sich die Ansicht dem Format an portrait landscape ffnen und Schlie en Der Doppelklick hat sich f r das ffnen eines Ordners oder Aktivieren eines Pro gramms in Desktop Betriebssystemen bew hrt und damit besonders eingepr gt Dorau 2011 S 152 In Multitouch Systemen wird die Technik in Form des dop pelten Antippens DOUBLE TAP adaptiert Oftmals gen gt jedoch ein einfaches Antippen TAP des jeweiligen Objektes Ein erweitertes Konzept zum ffnen und Schlie en existiert durch Anwendung der PINCH und SHRINK Geste wie sie auch zum Skalieren und Zoomen verwendet werden Die Intention des Anwenders mag dabei sein sich einen Ordner n her anzusehen Aufbauend auf der Stapel Metapher wird diese Geste auf kategorisierte Bilder im iPad Programm Fotos angewendet In
161. rtasten die mit den Zust nden f r Links und Rechtsklick belegt sind Zum Scrollen von Ansichten hat sich das Maus Rad durchgesetzt Das Trackpad ist ein Eingabefeld das h ufig in Notebooks unterhalb der Tastatur integriert ist und zu Mobilit tszwecken die klassische Maus ersetzt hnlich wie bei der Maus Steuerung werden relative Bewegungen in Zeigerbewegungen bersetzt Zus tzlich werden Tasten angeboten um das Interaktionspotenzial der Maus nach zubilden Moderne Trackpads erlauben dar ber hinaus die Eingabe von Multitouch Gesten wie zum Beispiel das Scrollen mit zwei Fingern Das Magic Trackpad Apple 2010 ist ein Beispiel eines externen Ger tes dieser Art siehe Abbildung 2 1a Neue Entwicklungen wie die Multitouch Maus beispielsweise die Magic Mouse App le 2009b kombinieren die Eingabetechniken der klassischen Maus und des Track pads in einem Ger t Die Oberfl che der Maus reagiert auf Ber hrungseingaben und erm glicht Touch Gesten die haupts chlich f r das Bl ttern und Scrollen von Ansichten reserviert sind Zu den Touchscreens z hlen im Allgemeinen Displays deren visueller Ausgabebe reich eine unauff llige Schicht von Sensoren integriert die direkte Eingaben auf dem Bildschirm registrieren Das Potenzial der Gesten Eingabe h ngt stark von der verwendeten Hardware und Messtechnik ab Ein berblick ber die verschiedenen Multitouch Technologien wird in Teiche etal 2009 und ELO TouchSystems 2011 ge
162. rukturierung der Informationen in Kapiteln Aufbauend auf dem Konzept von Access Keys vgl Kapitel 4 1 k nnen die Sei ten alternativ ber assoziierte Symbole angesteuert werden Hierzu wurden die An fangsbuchstaben der Men punkte als Gesten implementiert Weitere Gesten wie beispielsweise ein Fragezeichen f r den Hilfeauruf wurden ebenso mit aufgenom men vgl Abbildung 5 14b Dar berhinaus wird das Bl ttern in der Browser History mit einer schleifenartigen Bewegung erm glicht wie es als Adaption von Browser Funktionen in Kapitel 4 1 angedacht wurde N heres zu der Bewegungsausf hrung sowie Formalisierung der Gesten mit GeForMT ist auf der Hilfeseite der Anwen dung beschrieben Bei Eingaben die vom Framework nicht als Geste erkannt wer den konnten wird eine Fehlermeldung mit Verweis auf die Hilfe ausgegeben In der Implementierung des Anwendungsprototypen werden generelle Probleme bei der Umsetzung von Gesten in Web Anwendungen deutlich Die Herausforderung besteht darin dass Web Browser standardm ig Gesten implementieren die mit anwendungsspezifischen Gesten in Konflikt treten Das standardm ige Verschie ben und Skalieren einer Seite zur Eingabezeit steht in Konflikt mit den symbolischen 5 3 Anwendung Gesten dieses Anwendungsprototypen Verallgemeinernd besteht dieser Konflikt zwischen Online und Offline Gesten Online Gesten werden aufgrund des fr he ren Interpretationszeitpunkt priorisiert Das Gestenerkennung
163. s Framework kann so konfiguriert werden dass das Standverhalten des Browsers unterdr ckt wird vgl Kapitel 5 3 2 Daraus folgt jedoch auch dass das ber hrungsbasierte Scrollen wie auch Skalieren der Web Dokumente nicht mehr m glich ist Der Anwendungspro totyp implementiert daher eine adaptierte Variante einer DRAG Geste basierend auf GeForMT Das Scrollen der Seite ist damit an den seitlichen R ndern des Dokumentes m glich Gem einer Gr enanpassung von Inhalten kann die Schriftgr e einzel ner Textpassagen mit einer PINCH bzw SHRINK Geste vgl Kapitel 3 4 4 optimiert werden M gliche Erweiterungen des Anwendungsbeispiels sind gestenbasierte Kontextme n s Zum Beispiel k nnten Ringmen s die durch das Halten mehrerer Finger auf dem Touch Oberfl che oder auch durch eine kreisf rmige Gesten aufgerufen wer den die statische Men leiste ersetzen und so mehr Platz f r Inhalte geben Erwei ternd k nnten Gesten wie das Abhaken Ankreuzen Unterstreichen oder Umkrei sen f r die Selektion verbreiteter interaktiver Elemente wie Links oder Auswahlop tionen in Formularen und Dialogen umgesetzt werden Auch das Scrollen und Bl t tern auf elementaren Komponenten des Web Interface k nnte mehr fokussiert wer den um beispielsweise Frames in touchbasierten Web Anwendungen zu adaptiert Das GeForMT Framework bietet ausreichend Potenzial um diese Konzepte umzu setzen Erweiterungspotenzial 83 6 ZUSAMMENFASSUNG UND FAZIT
164. schr nken sich im Grunde auf vier Klassen die am Beispiel der Implemen tierung der Anwendungsschnittstelle in Listing 3 3 nachzuvollziehen sind Se Erzeugung des Gestenerkenners var gesture new Moousture ReducedLevenMatcher Beschreibung und Erzeugung der Geste gesture addGesture 3 2 1 0 7 6 5 4 ccwCircle Event Handler function ccwCircleCerror Objekt Zuweisung var probe new Moousture MouseProbe Cdocument Konfiguration var recorder new Moousture Recorder f maxSteps 20 minSteps 8 matcher gesture H Steuerung des Erkennungsprozess var monitor new Moousture Monitor 30 2 monitor start probe recorder monitor stop OANA NBPWN OO WAN DUN RPWN gt Listing 3 3 Formalisierung und Registrierung einer Kreis Geste in Moousture Sibt e Hassan 2010 Zun chst wird der Gestenerkenner initialisiert und mit ihm der Erkennungsalgorith mus festgelegt vgl Listing 3 3 Zeile 2 Eine weitere Aufgabe dieser Komponente ist die Registrierung der Geste Die Methode addGesture nimmt hierf r zwei Pa rameter Eine Repr sentation der Geste und eine Handler Funktion f r die Aktions Zuweisung Der Ansatz ist den Pfad einer Einzelpfad Geste als eine Sequenz forma ler Bewegungsrichtungen zu beschreiben Abgebildet auf acht diskrete Werte siehe Abb 3 5 wird dem Gestenerkenner demnach eine Liste von Zahlen bergeben Im Code Beispiel repr sentiert die Sequenz einen Kreis der gegen den U
165. schreibung zu verstehen Die Kontaktart functionType die Anzahl der Kontakte numberOfContacts die Be wegungsart gestureType und m glichen Geltungsbereichen eLementList der Geste fassen die Eigenschaften einer atomaren Geste zusammen die sich aus dem geparsten GeForMT Ausdruck extrahieren lassen Dar berhinaus wird aus der Anga be von Richtungsangaben interpretiert ob in dieser Hinsicht Variationen zugelassen sind rotationInvariant Ebenso wird aus der Art der Geste geschlossen ob es 5 2 Komponenten des Frameworks sich um eine pfadbasierte Geste handelt isPathGesture Eine Besonderheit stellt die Eigenschaft templates dar Sie enth lt eine oder mehrere Template Objekte die in Hinblick auf eine mathematisch Berechnung in der Gestenerkennung eine geeignetere Repr sentation der Geste darstellen N heres zu dieser Datenstruktur wird in Abschnitt 5 2 6 behandelt Das GestureObjectModel Modul stellt selbst keine Funktionalit t f r die semantische Auswertung der Bausteine eines GeForMT Ausdruckes bereit sondern unterst tzt lediglich die Datenhaltung Eine Adaption der Daten die vom Parser geliefert wird und die berf hrung in das erl uterte Ob jektmodell wird im Hauptmodel vorgenommen 5 2 6 Template Erzeugung und Gestenerkennung In Kapitel 3 3 3 wurden verschiedene Verfahren der Mustererkennung vorgestellt Template Matching als und f r den Einsatz in einem sprachbasierten Web Framework bewertet Template Frkennungsv
166. sich hin sichtlich der verwendeten Web Technologien als der praktikablere Ansatz erweist In weiterf hrenden Arbeiten k nnte eine differenziertere Unterscheidung anhand von Selektor Typen diskutiert werden Gem dem Fall dass kein Fokus festgelegt ist Beispiel 1F MOVE kann davon aus gegangen werden dass es sich ich um eine freie Geste handelt die anwendungs weit g ltig ist Eine geeignete L sung ist die Geste an das Struktur Element html zu binden Das Box Modell ist ein wichtiges Konzept f r die Gestaltung des Webinterface da es auf jede Ul Komponente angewendet werden kann Bis auf die Begrenzung eines interaktiven Geltungsbereichs hat die Box Einteilung jedoch keine Bedeutung f r die Interaktion sondern ist ein rein gestalterisches Mittel Die Webstandards sehen in ihren Schnittstellen nach derzeitigem Stand keine Unterscheidung vor der erkennen l sst ob sich der Ausf hrungsort einer Geste auf dem Rand im Padding Bereich oder zentral auf dem Inhalt befindet Eine daran angelehnte Formalisierung von Interaktionsbereichen kann jedoch f r die Erkennung der Intention einer Anweisung wertvoll sein Sie erm glicht weitere kontextabh ngige Funktionen insbesondere spezifischere Option der direkten Manipulation Geltungsbereich einer objektorientierten Geste Interaktive Eckbereiche Interaktive Randbereiche Direkter Inhaltsbezug Toleranzbereich Indirekter Inhaltsbezug Begrenzung
167. sign und Implementierung einer stiftzentrierten Benutzungsoberfl che Darmstadt Technische Universit t Darmstadt Dissertation April 2001 Gibson 2011 Gibson Alex WKTouch Sept 2011 URL https github com alexgibson WKTouch Zugriffsdatum 30 09 2011 Goldberg und Richardson 1993 Goldberg David Richardson Cate Touch typing with a stylus In Proceedings of the INTERACT 93 and CHI 93 conference on Human factors in computing systems New York NY USA ACM 1993 CHI 93 S 80 87 URL http doi acm org 10 1145 169059 169093 ISBN 0 89791 575 5 Google 2011 Google Offizieller Webauftritt der Android Entwickler 2011 URL http www android com Zugriffsdatum 22 01 2011 G rg 2009 G rg Martin A Framework for Abstract Representation and Recognition of Gestures in Multi Touch Applications Technische Universit t Berlin Diplomarbeit Okt 2009 Hallman 2011 Hallman Daniel lt script src js gt Vergleich von JavaScript Frameworks Pu blikation unter http isuu com Feb 2011 URL http issuu com visualcosmos docs artikel_ _js_frameworks Zugriffsdatum 04 11 2011 Hayes 2010 Hayes Paul CSS 3D cube with touch gestures click and drag Sept 2010 URL http www pauLrhayes com 2010 09 3d css cube ii touch gestures click and drag Zugriffsdatum 04 10 2011 Henkens 2011 Henkens Dana Kombination gestenbasierter Interaktion in multimodalen Anwen dungen Technische Uni
168. sition hinsichtlich der Browser Entwicklung Eine Folge der Auseinanderset zung zwischen Netscape und Microsoft ist die Vernachl ssigung von Web Standards Lessiak 2008 Stattdessen implementierten beide Seiten propriet re Erweiterungen um die Konkurrenz abzudr ngen Sowohl die Spezifikationen der Web Technologien und Bibliotheken entwickelte sich auseinander vgl Kapitel 2 3 4 als auch die Aus legung dieser f r die Web Seitenvisualisierung Der Konflikt endete 1998 mit dem Ausscheiden von Netscape Dumke etal 2003 Aus dieser historischen Entwicklung heraus erhob sich eine Initiative siehe Abschnitt 2 1 3 die die browser bergreifende Funktion des Webdienstes durch die Standar disierung der Web Technologien erm glichen sollte Der Wettstreit der Browser Hersteller erfolgt seitdem zunehmend um die Einhaltung standardisierter Spezifika 1CERN Conseil Europ en pour la Recherche Nucl aire z dt Europ ische Organisation f r Kernfor schung nennt sich eine Forschungseinrichtung in Genf in der Schweiz 2Mosaic wurde 1993 im National Center for Supercomputing Applications an der Universitat Illinois als erster Browser mit grafischer Benutzeroberflache f r verschiedene Betriebssysteme entwickelt Lessiak 2008 S 3 Anf nge und Entwicklung des Webs Browserkriege Standardisierung 2 Grundlagen Wandel der Nutzung und Wahrnehmung Allgegenw rtigkeit Ber hrungssensitive Eingabetechniken Desktopbasierte un
169. spezielle Datenstrukturierung kann mit Listen und Tabellen vorgenommen werden W hrend Text ein elementares Medium in Webdokumen ten ist das auch ohne Auszeichnung eingebettet werden kann stellt die Sprache Medien Elemente bereit mit denen sich haupts chlich Bilder Audio und Videoin halte integrieren lassen Aber auch Sub Anwendungen wie zum Beispiel Applets lassen sich durch Konstrukte dieser Elemente Klasse einbetten sofern der Web Browser das Format unterst tzt Zu den interaktiven Elementen z hlen vorallem Link Auszeichnungen und seit HTML 5 unter anderem auch Zeichenfl chen und dy namische Men s Eine weitere wichtige Gruppe in Bezug auf die Nutzereingabe stel len die Formularelemente dar Eine umfassende und tiefer greifende Beschreibung aller m glichen HTML Elementen wird in Robbins 2010 gegeben 2 3 3 Gestaltung und Adaption mit CSS Die Gestaltung der in HTML definierten Inhalte wird in Form von Cascading Style Sheets CSS vorgenommen Der Begriff Cascading steht f r das Prinzip der Verer bung und berlagerung der Stil Eigenschaften Listing 2 1 zeigt den allgemeinen Aufbau einer CSS Regel au nn Selector property value AUN gt Listing 2 1 Allgemeiner Aufbau einer CSS Regel Die Schnittstelle zu HTML bildet dabei der Selector ein formales Suchmuster an hand dessen ein oder mehrere HTML Elemente ausgew hlt werden um ihnen Stil Eigenschaften zuzuweisen Die verarbeitende Softwarekomponente wird a
170. sst ist die Er weiterung des Erkennungsbereichs Im Fall eines einzelnen Objekts wird der Randbe reich zum transparenten Toleranzbereich Visuell liegt der Ausf hrungspfad au er halb der Objektgrenzen Der Objektbezug ist dennoch gegeben vgl Abb 4 8b und Abb 4 8d Bei Objektmengen ist hingegen ein bergeordneter Erkennungsbereich erforderlich der durch das Container Objekt gegeben ist Diese L sung bezieht sich auf die Ausf hrungsform Die Selektion umschlossener Objekte ist dann aber an wendungsspezifisch nach dem Erkennungsprozess vorzunehmen 4 2 6 Aktionsbeschreibung und zuordnung Die Aktion steht als zentrale Komponente der Gesteninteraktion in Relation zum Kontext Objekt und der formal beschriebenen Bewegung Geste vgl Abb 3 11 in Kapitel 3 3 2 3 Sie beschreibt das Verhalten der Anwendung im Fall der Erkennung einer Geste Das Framework muss in der Lage sein diese Beziehungen herzustel len Dies setzt eine konkrete Schnittstellen Definition sowohl auf Seite der formalen Sprache als auch auf Framework und Anwendungsebene voraus Im Kontext der JavaScript Programmierung bietet sich f r die Implementierung von Aktionen das Konzept der Ereignisbehandlung an siehe Kapitel 2 3 6 Ein erster Ansatz um die Beziehung der Interaktions Komponenten herzustellen ist die Abbildung von Objekt Klassen und Methoden als Bestandteil der formalen Definition in GeForMT vgl Abb 3 11 in Kapitel 3 3 2 3 Listing 4 4 zeigt wie das S
171. st werden 3 4 3 Aktionen und Anweisungen Eine Geste ist wie schon in Kapitel 2 2 2 erfasst wurde eine Handlung die einer kommunikativen Absicht des Anwenders folgt Aufgabe des Systems ist sie als kon krete Anweisung zu intepretieren und als Konsequenz eine Aktion zu generieren die m glichst den Erwartungen des Akteurs entspricht Wichtigster Aspekt einer Aktion ist das Feedback das dem Anwender Sicherheit im Umgang mit der Anwendung gibt Gesten k nnen demnach auch als Vermittler zwischen Anweisung und Aktion verstanden werden Diesbez glich sind Gesten in einem Modell von Abstraktionsgraden zwischen Sy stem und Anwender einzuordnen Abbildung 3 14 fasst die konzeptionellen Ans tze nach Kammer etal 2010 Cooper etal 2007 und W3C 2010b zusammmen 3 4 Applikation Kammer et al Cooper et al W3C 2010 USER aufgaben 5 PRAGMATICS INTENTIONAL spezifisch x 2 8 p 5 K y SEMANTICS IDIOMS REPRESENTATIONAL u APPLIKATION f Anweisung Aktion Abstraktionsgrad COMPOUNDS GESTURAL SYSTEM SYNTACTIC PRIMITIVES PHYSICAL eingabe L spezifisch Abbildung 3 14 Gegen berstellung der Abstraktionsgrade nach Kammer etal 2010 Cooper etal 2007 und W3C 2010b Das Modell nach Kammer etal 2010 unterscheidet drei Aspekte im Fokus der Se miotik als wissenschaftlichen Rahmen f r die Formalisierung von Gesten Syntactics beschreiben Gesten in ihren elementarsten erfassbaren Einheiten und ihre
172. sweise erst ab Version 5 0 implementiert vgl Deveria 201 1b 2 3 6 Ereignisverarbeitung Wie in Kapitel 2 2 2 erl utert wurde k nnen Gesten durch ein Ereignisprofil be schrieben werden In diesem Zusammenhang erscheint es wichtig Grundlagen der Ereignisverarbeitung in JavaScript zu betrachten Diese ist unter DOM Level 2 stan dardisiert W3C 2000 Darauf aufbauend werden Ereignisse berwacht indem sie unter Angabe des Event Typs auf einem Knoten des DOM Baumes registriert wer den Als Event Handler wird die Funktion bezeichnet die unter dem Ereignis ausge f hrt wird Der Handler Funktion wird dabei ein Event Objekt als Parameter ber geben welches n here Informationen zu den Ereignisbedingungen liefert Wie die Event Schnittstelle folglich implementiert ist zeigt Listing 2 7 EE Registrierung der Handler Funktion auf einem Element element addEventListener event handler capturing function handler event alert event type Event Typ 1 2 3 4 5 6 Event Handler entfernen 7 element removeEventListener event handler capturing 8 Ereignis ausl sen 9 element dispatchEvent event Listing 2 7 API Methoden f r die Event Registrierung nach DOM Level 2 W3C 2000 Der erste Parameter der Funktionen in Listing 2 7 legt den Event Typ fest Die folgen de Auflistung f hrt die wesentlichen durch eine Zustands nderung im Eingabeger t initiierten Event Typen auf Es handelt sic
173. t API orientiert vgl Apple 2011a bereits um Die Unterschiede liegen oft im Detail wie der Vergleich von Event Schnittstellen ver schiedener Plattformen und Web Browser in Koch 2010 Smus 2011a und Blas 2011 zeigt Die Umsetzung einer Gesten API schreitet z gig voran Dies geht mit einem rasanten Prozess der Ver ffentlichung und Veraltung von Browser Versionen einher Am Beispiel von Firefox wird dies deutlich vgl Mozilla 2011 Mit der Version 3 5 Juni 2009 wurden browserspezifische Mausgesten Ereignisse wie zum Beispiel MozSwipeGesture MozMagnifyGesture und MozRotateGesture umge setzt die mit der Maus oder einem Trackpad eingegeben werden Version 3 6 Ja nuar 2010 erweitert die Browser Funktionen mit dem MozOrientation Event und spezifischen Media Queries um M glichkeiten die Bewegungssensoren eines mobi len Endger tes auszuwerten Version 4 M rz 2011 implementiert experimentell die Ereignisse MozTouchDown MozTouchUp und MozTouchMove f r die Unterst tzung von Multi Touch Gesten In Version 6 August 2011 werden sie letztlich durch die erl uterte Spezifikation des W3C ersetzt Mittlerweile wurde Version 10 herausge geben Mozilla 2012 Die Safari API implementiert eine weitere Schnittstelle Apple 2011a Das Gestu reEvent Interface liefert Informationen ber die geometrische Beziehung gleich zeitig registrierter Ber hrungspunkte Das Attribut scale liefert beispielsweise den Abstand zwischen zwei Kont
174. t die Verwendung dieser Funktion ausreichend da hier bereits alle notwendigen Daten eingespeist werden k nnen Es ist zu empfeh len die Initialisierung beim Laden des Webdokumentes durchzuf hren wie es in Listing 5 3 dokumentiert ist 5 3 Anwendung m 1 lt script type text javascript gt 2 window onload function 3 GeForMT init gestures settings A 35 5 lt script gt Listing 5 3 Initialisierung beim Laden des HTML Dokumentes Listing 5 4 zeigt die Anwendung einer Konfiguration und der Einstellungsparameter Globale Einstellungen die in der vorliegenden Version implementiert sind Die Einstellung feedback ent scheidet ber die Visualisierung des Gestenpfades vgl Kapitel 5 2 7 durch prev entDefault l sst sich das Standardverhalten des Browsers unterdr cken Letzte Ei genschaft legt das Kontiguit tsintervall in Millisekunden fest vgl Kapitel 5 2 6 Die Konfiguration ist optional und greift standardm ig auf eine Voreinstellung zur ck eee 1 var settings 2 feedback true default true 3 preventDefault false default true 4 contiguityInterval 800 default 1000 5 3 Listing 5 4 Einbindung des Frameworks in HTML Kern einer Gestendefinition ist die Gestenbeschreibung in GeForMT In den Kapi Definition von Gesten teln 4 2 6 und 4 2 7 wurden M glichkeiten diskutiert wie Formalisierung Aktion und Konfiguration in Beziehung gesetzt werden k nnen Bez glich der Erweiter barkei
175. t und Wiederverwendung berwiegen die Vorteile bei der Realisierung als Konfigurations Objekt Listing 5 5 Zeile 1 9 konkretisiert den Ansatz am Beispiel Ein Gesten Set wie es bei der Initialisierung bergeben werden kann besteht folg lich aus mehreren solcher Objekt Literale die in einem Sammel Objekt zusammen gefasst sind JavaScript verleiht Web Seiten aus technischer Sicht eine gewisse Dynamik in Hin Anwendung zur blick auf deren Inhalte und Aussehen Dieser Aspekt wird auch f r die Interakti jaufzeit on ber cksichtigt indem Methoden zum Hinzuf gen addGesture und Entfernen removeGesture von Gestendefinitionen zur Laufzeit angeboten werden m SHS 1 Definition 2 var gesture 3 identifier movePic 4 expr MOVECimg pic 5 online true 6 handler function e f 7 8 9 10 Hinzuf gen einer Geste 11 GeForMT addGesture gesture 12 Geste entfernen 13 GeForMT removeGesture movePic Listing 5 5 Definition einer Geste und Registrierung 79 5 Konzeption und Implementierung Status des Erkennungsprozesses Aufbau der Testanwendung Vordefinierte Gesten zum Testen Set 1 Einzelpfad Gesten Set 2 Zusammen gesetzte Gesten 80 Erg nzt werden die Hauptschnittstellen durch die Registrierung von Callback Methoden in denen das Verhalten bei eintretenden Ereignissen des Gestenerkennungs Moduls bestimmt werden kann vgl Abb 5 9 Diese wurden in Kapitel 5
176. t werden vgl Webel et al 2008 und Damaraju und Kerne 2008 gt X3D Ein XML basiertes Standardformat zur Beschreibung von 3D Modellen die im Webbrowser dar gestellt werden k nnen 3 3 Interpretation von Gesten K nstliche Neuronale Netze KNN sind gewichtete Graphen bestehend aus einem Verbund k nstlicher Neuronen Es ist ein abstraktes Modell der Informationsverar beitung dass durch biologische neuronale Netze motiviert ist Ein ktinstliches Neu ron vgl Abb 3 12 gewichtet den Einfluss von Eingaben und bestimmt mit der Ak tivierungsfunktion dessen Lernverhalten Indem neue Neuronen oder deren Verbin dungen hinzugef gt oder gel scht Gewichtungen ver ndert oder Schwellenwerte angepasst werden kann das KNN trainiert werden Die Struktur und Anordnung der Neuronen eines KNN kann zweckm ig verschieden ausfallen Eine typische Struk tur ist nach Wood 2008 S 2 das mehrschichtige Feedforward Netz Feedforward Multi Layer Perceptron in dem Signale ein dreischichtiges Netz gerichtet durchlau fen Input Layer Hidden Layer und Output Layer Eine ausgef hrte Geste wird in ihre Bestandteile zerlegt die als Merkmale der Klassifikation dienen Diese Daten wer den an die Neuronen der Eingabeschicht Input Layer weitergegeben In Nyg rd 2010 werden zwei Ans tze vorgestellt zum einen die Klassifikation basierend auf Richtung und Winkeln zum anderen die Eingabe von Bildpixeln In der versteckten Schicht Hidden
177. t zu analysieren inwiefern sich die Maus Touch und Stiftinter aktion aufeinander abbilden lassen und welche softwaretechnischen Ans tze in Hin blick auf eine Generalisierung existieren Des Weiteren ist zu untersuchen wie die In teroperabilit t zwischen der formalen Gestenbeschreibung und bestehenden Stan dards der Webprogrammierung herzustellen ist Dies erfordert ein tieferes Verst nd nis der Konventionen der verf gbaren Programmierschnittstellen Neben der soft 1 Einleitung waretechnischen Realisierung ist vorallem auch die praxistaugliche Anwendung von Gesten auf Elementen der Web Benutzeroberfl che von Interesse und wird aufbau end auf der Recherche beispielhafter Implementierungen diskutiert Den Schwer punkt dieser Arbeit bildet die Entwicklung eines Verfahrens f r die Erkennung der formal definierten Gesten basierend auf primitiven Eingabedaten Dazu sind beste hende Erkennungsalgorithmen f r den Einsatz in einer webbasierten Umgebung zu bewerten und auf ihr Potenzial hinsichtlich Erweiterungen zu pr fen die den An forderungen des Formalisierungsansatzes in GeForMT gen gen Aufbauend auf den genannten theoretischen berlegungen ist die Implementierung des Framework Konzepts vorzunehmen und dessen Funktionsweise anhand von Beispielen praktisch zu testen 1 3 GLIEDERUNG Die vorliegende Arbeit gliedert sich in sechs Hauptkapitel deren Inhalte in diesem Abschnitt f r einen berblick kurz zusammengefasst werden
178. te Verfahren der 1 Recognizer wurde in den vorangegangenen Abs tzen bereits erl utert und ist im DollarRecognizer implementiert Da diese Methode nur auf pfadbasierte Gesten anwendbar ist und sich auf die Erkennung der Bewegungsform konzentriert wer den erweiternde Implementierungen angeboten Der StaticGestureRecognizer deckt beispielsweise die Erkennung punkthafter Gesten ab Der RelationReco gnizer pr ft geforderte Eigenschaften gem der in GeForMT spezifizierten Rela tionen Die Konzeption des Gestenerkennungsmoduls erlaubt es in wenigen Schritten die Erkennungsmethode zu ersetzen oder zu erweitern So k nnte in weiterf hrenden Arbeiten beispielsweise die Online Gestenerkennung als spezialisierte Implementie rung neben DollarRecognizer realisiert werden Zum Beispiel k nnte das SiGer Verfahren nach Swigart 2005 vgl Kapitel 3 3 3 als Alternative implementiert werden In dem Fall w rde das Template Objekt um formale Richtungsangaben erweitert werden Die Auswertung dieser erfolgt dann auf Basis einer Anpassung der Hauptschnittstelle im Recognizer in der SiGer eingebunden wird 52 7 Feedback Das Modul VisualFeedback deckt die Anforderung an ein elementares visuelles Feedback ab Mit der ffentlichen Methode setVisualFeedback die einen bool schen Wert als Parameter nimmt kann die Option aktiviert oder unterbunden wer den Der Webentwickler kann diese Einstellung Uber die Hauptschnittstelle in der Konfiguration vorneh
179. terf hrung des Themas gegeben Im Sinne einer kritischen Auseinandersetzung mit dem Framework Konzept werden an dieser Stelle auch optimierbare Aspekte herausgestellt Ein erster Diskussionspunkt ist die Verallgemeinerung dass das Framework aufbau end auf den Standards des W3C als plattformunabh ngig gilt Letztlich ist die Funk tion des Frameworks nur dann gew hrleistet wenn dessen Ausf hrungsumgebung sprich der Web Browser die Empfehlungen des W3C korrekt umsetzt Trotz weitrei chender Verbreitung der Standards sind browserspezifische Differenzen und Eigen heiten nicht auszuschlie en Insbesondere von der Umsetzung von Standards die sich noch in ihrer Entwurfsphase befinden ist nicht unmittelbar auszugehen Ent wickelt und getestet wurde das Framework im Mozilla Firefox der aktuell in der Version 10 0 vorliegt und im integrierten Safari Browser des iPad 4 3 von Apple Im n chsten Schritt sind weitere mobile als auch desktopbasierte Web Browser zu testen um Aussagen zur Unterst tzung des Frameworks zu konkretisieren In Anbetracht der umfangreichen Optionen die aus dem Formalisierungsansatz her vorgehen und interpretiert werden m ssen stellt die Anforderung an eine perfor mante Verarbeitung ein besondere Herausforderung dar Auf den getesteten Sy stemen wird die Verarbeitunggeschwindigkeit als akzeptabel erachtet dennoch be steht Optimierungsbedarf insbesondere f r leistungsschw chere mobile Endger te Eine M glichkeit
180. tp people cs uct ac za nschiff ipadGame pdfs daniel pdf Zugriffsdatum 11 02 2012 Wu etal 2006 Wu Mike Shen Chia Ryall Kathy Forlines Clifton Balakrishnan Ravin Gesture Registration Relaxation and Reuse for Multi Point Direct Touch Surfaces In Proceedings of the First IEEE International Workshop on Horizontal Interactive Human Computer Systems Washington DC USA IEEE Computer Society 2006 S 185 192 URL http dl acm org citation cfm id 1109723 1110635 ISBN 0 7695 2494 X vill ABBILDUNGSVERZEICHNIS 2 1 Beispiele von Eingabeger ten f r die Interaktion mit Webinhalten 2 2 2 2 8 2 2 Einheiten des Ereignisprofils einer zweidimensionalen Geste 2 2 2 2 22 222 9 2 3 Design Disziplinen nach Cooper etal 2007 S xxxi und zugeordnete Web Standards 12 2 4 Box Modell eines Web Elements 2 2 2 2 En nn nn 14 2 5 Repr sentativer DOM Baum eines HTML Dokuments 2 2 2 22 nn 14 2 6 Verbildlichung des Vererbungsprinzips in JavaScript anhand der Glasplattenmetapher nach Debreuil 200M ass are ee ea ae uns Brey eee BY 16 2 7 Phasen der Event Ausbreitung im DOM Baum 222 2 2 nn nn nn 19 3 1 Architekturmodelle nach Echtler und Klinker 2008 Kammer etal 2010 und Khand kar und Maurer 2010a gegen ber einem webbasierten Ansatz eines Gestenerkennungs Frameworks ae ee en on a er EN et Bei ate ke wath 21 3 2 MouseEvent und TouchEvent Interface nach W3C 2000 und W3C 2011g
181. tszeit gesorgt hat INHALTSVERZEICHNIS 1 3 Einleitung LA MIOUVALION rs ee ET Lae aul GAP RMA ee ig 1 2 Zielstell ng ck a a Bl cre cya nee BRD A Bh ket teed haan ee oe ae Ba e N 1 32 Gliederung ee Ak ete Sol Bah AE ate nt al i I a Grundlagen Jit Webslntertace as at u bk seat ot Be Nt ok Be A ile db T daet 2 1 1 Entwicklung und Wandel 2 2 2 2 2 nn n nn 2 1 2 Web Browser u am or Ban A we ADNE eu Ak ee u 2 1 3 Kompatibilit t und Standardkonformit t 2 2222 nn nn 2 2 Gestenbasierte Interaktion 2 n nn nn 2 2 1 Klassifikation von Eingabeger ten 2 2 22 ann nn 2 2 2 Eigenschaften und Struktur zweidimensionaler Gesten 2 2 2222 2 2 3 Klassifikationsmerkmale 2 2222 2 Eon 2 3 Softwaretechnologische Grundlagen 2 0 2 nam n nn 2 3 1 Clientseitige Webentwicklung 2 222222 n nn nn 2 3 2 Inhalte und Struktur mit X HTML 2 2 3 3 Gestaltung und Adaption mit CSS 2 2 2 non 2 3 4 Programmiersprache JavaScript 22222 2 n nn nn 2 3 5 JavaScript Coding Muster 2 2 22 2 on nn 2 3 6 Ereignisverarbeitung 2222222 oo nn Verwandte Arbeiten 3 1 Architekturmodell ssia Ku 26442 SD ES ei END a nn 32 MVeb BIOWSEREn he ee es oe Eat eR ea ee ee le Se er er ate 3 2 1 Verarbeitung von Multitouch und Stift Eingaben 2222 22 2 3 2 2 TUIO basierte Eingabeverarbeitung 222222222 nn 3 3 Interpretation von Gesten 2 on nn nn 3 3 1 Web Frameworks 2222 nn 3 3 2 Sprachbasierte Fr
182. ubine Algorith Verfahren mus die auf einem trainierten Modell aufbauen und Template Matching Verfahren unterschieden werden DTW SiGer 1Recognizer und Erweiterungen die eine ko ordinatenbasierte strukturelle oder syntaktische hnlichkeitsanalyse auf Basis ver gleichbarer Vorlagen vornehmen Tabelle 3 1 gibt einen zusammenfassenden ber blick ber die beschriebenen Verfahren Ansatz Datenmodell Merkmalsextraktion Klassifikation HMM Modellierung von Zust nden modellabh ngig Stochastische Berechnung Training der bergangswahr scheinlichkeiten KNN Modellierung eines Neuro modellabh ngig Durchlaufen von Filter nennetzes Training der funk bzw Aktivierungsfunktio tionalen Paramter nen Fuzzy Logik Modellierung von Wertebe Merkmalsspezifische Berech Regelsystem z B Entschei reichen mit unscharfen Klassi nungen nach Bimber etal dungstabelle oder baum fikationsgrenzen f r verschie 2000 etwa 27 dene Ausf hrungseigenschaf ten Rubine Repr sentation der Gesten nach Rubine 1991 sind 13 _Diskriminanzanalyse basie merkmale als Feature Vektor Berechnungen f r die Merk rend auf Feature Vektoren mehrere Referenzmuster pro malsextraktion vorzunehmen und Gewichtung der Ge Geste als Datenbasis erforder stenklassen lich DTW Zeitabh ngige Signale als Re Filterung der Eingabedaten Template Matching ba ferenzmuster hoher Spei nach relevanten Merkmalen sierend auf dynamischer cherbedarf bspw Positionsdaten
183. uch Selector Engine genannt Tabelle 2 1 fasst die wichtigsten Selektor Typen zusam men Bezeichnung Beschreibung Beispiel Typ Selektor Selektiert Elemente anhand des Tag body div Namen Klassen Selektor Selektiert Elemente mit dem class myClass Attribut myClass Id Selektor Selektiert Elemente mit der Id myld Attributwert myld Universal Selektor Gilt f r jedes Element Tabelle 2 1 Wichtige CSS Selektoren im Uberblick In einer Regel k nnen mehrere Selektoren durch Komma getrennt aufgez hlt wer den Dar ber hinaus gibt es Attributselektoren Einschr nkung der Anfrage anhand Zusammenfassung von HTML Elementen CSS Regel Selektoren Selektor Typen 2 Grundlagen EEEE Pes sessi margin T x border padding j left ak h Abbildung 2 4 Box Modell eines Web Elements Darstellungsoptimierung mit Media Queries ECMAScript Document Object Model Abbildung 2 5 Repr sentativer DOM Baum eines HTML Dokuments von Attributwerten Kombinatoren Selektion anhand von Verwandtschaftsbezie hungen in der Element Hierarchie oder Pseudoklassen wie zum Beispiel der Aus druck Link um unbesuchte Verweise herauszufiltern Ein wichtiges Konzept f r die Formgestaltung von Elementen ist das Box Modell vgl Abb 2 4 Der Inhalt content wird von den Boxen padding border und mar gin umgeben mit denen jeweils der Abstand zum Rahmen die Rahm
184. ufwand verbunden Ein Web Framework auf Basis von GeForMT vgl Kapitel 3 3 2 3 kann dem Web Entwickler an dieser Stelle viel Arbeit abnehmen und w re zudem flexibel einsetzbar Aufbauend auf der Konzeption des Frameworks sollen die hier vorgestellten Anwendungsbeispiele in einem Prototypen umgesetzt werden siehe Kapitel 5 3 4 4 2 WEBKONFORME GESTENFORMALISIERUNG Auf Basis der GeForMT Spezifikation die in Kapitel 3 3 2 3 beschrieben wurde stellt dieses Kapitel die Formalisierung von Gesten in den Kontext der Webentwicklung Webkonform bedeutet in diesem Sinne sowohl syntaktische als auch semantische Konzepte der Sprache dahingehend zu adaptieren dass sie mit standardisierten Webtechnologien einhergehen Neben den zentralen Fragestellungen zur Integrati on der Gestenbeschreibung in Webanwendungen und der Objekt und Aktionsbe schreibung einer Geste werden auch allgemeing ltige Konzepte der Sprache und dessen Erweiterungsponzial aufgegriffen und diskutiert 4 2 1 Ereignisprofil atomarer Gesten Das Ereignisprofil bildet die Grundlage f r die Erkennung einer Geste vgl Kapitel Abbildung von 3 1 Im Fokus dieser Arbeit liegt dabei auch die ger teunabh ngige Beschreibung Freignis Typen zweidimensionaler Gesten Dies bedeutet f r die softwaretechnologische Umset zung eine Vereinheitlichung von Maus und Touch Events Abbildung 4 3 zeigt die verschiedenen Ereignis Typen und wie sie sich auf Basis der Erkenntnisse in Kapitel 3 4 1 au
185. um die Performanz zu erh hen wurde in den Grundlagen dieser Arbeit aufgezeigt Dabei handelt es sich um den Einsatz von Web Worker siehe Kapitel 2 3 5 mit denen Verarbeitungsprozesse parallelisiert werden k nnen Auf grund der geringen Unterst tzung dieser Methode auf den eingesetzten Testsyste men wurde sie in der Implementierung nicht weiter ber cksichtigt Weiterhin wurde in Kapitel 3 3 3 eine Optimierung des 1 Berechnungsverfahren auf Basis von Vekto ren nach Li 2010b vorgestellt Der Ansatz wurde als Option ber cksichtigt und im plementiert zeigte aber Schw chen bei der Erkennung eindimensionaler Gesten auf und konnte daher nicht angewendet werden In der Weiterentwicklung des Frame works sollten diese Ans tze vorallem hinsichtlich des erh hten Rechenaufwands bei 6 1 Ausblick der Erkennung von Multitouch Gesten und der Visualisierung von Gestenpfaden in Betracht gezogen werden Hinsichtlich der Optimierung ist an dieser Stelle auf eine Schw che des 1 Erken nungsverfahrens hinzuweisen Es wurde erkl rt dass die Berechnungsmethode eine Normierung der Punktkoordinaten von Testmuster und Referenzmuster voraussetzt Dies f hrt dazu dass die r umlichen Dimensionen nicht mehr ber cksichtigt wer den k nnen Bei der Definition von Einzelpfad Gesten kann diese Schw che durch Wiederholungen von Gestenatomen ausgeglichen werden Ein Beispiel hierf r ist die Gestendefinition LINE_NE LINE_S LINE_S f r die Beschreibung der
186. ung bietet das Potenzial Gesten an einen anwendungsspezifischen Einga bemodus zu kn pfen der sich aus der Wahl der Eingabetechnik ergibt Beispiels weise ein Schreibmodus bei Erkennung einer Stifteingabe Gegen eine derartigen Klassifikation im Sprachkonzept von GeForMT spricht allerdings die Anforderung an eine ger teunabh ngige Verwendung des Frameworks in der die Funktionsf hig keit einer Webanwendung ungeachtet der Eingabetechnik gew hrleistet sein soll Es wird demnach eine Verallgemeinerung des Kontakttyps bevorzugt wie er in Ab schnitt 4 2 2 definiert wird 4 2 4 Sequentielle Komposition Sequentielle Verkn pfungen atomarer Gesten werden in GeForMT mit dem Komma Operator spezifiert Dabei ist jedoch nicht festgelegt ob der Kontakt dabei verloren gehen darf Hinsichtlich einer Klassifikation zwischen Einzelpfad Gesten und zusam mengesetzten Gesten vgl Kapitel 2 2 3 ist eine Erweitung der Sprache notwendig Syntaktisch bietet sich das Semikolon als ausdrucksstarkes Trennzeichen zwischen Einzelpfaden an Die EBNF Regel operator w re demnach wie folgt zu erweitern operator Se 2er a S Listing 4 2 Angepasste EBNF Regel f r Komposition von Gesten Mit Einf hrung des Verkn pfungsparameters CONNECT wurde eine Relation einge f hrt die eine genauere Lagebeschreibung erm glicht Er definiert nach Henzen 2010 dass die Endposition eines Gestenzuges die Anfangposition einer nachfol genden Geste ist Die Definition der Ver
187. versit t Dresden Bakkalaureat 2011 Henzen 2010 Henzen Christin Prototypische Konzeption eines Frameworks basierend auf einer formalen Beschreibungssprache basierend auf einer formalen Beschreibungssprache Technische Uni versit t Dresden Diplom 2010 Hewitt 2011 Hewitt Joe iU web framework for smartphones high end devices 2011 URL www iui js org Zugriffsdatum 30 09 2011 Hinrichs und Carpendale 2011 Hinrichs Uta Carpendale Sheelagh Gestures in the wild study ing multi touch gesture sequences on interactive tabletop exhibits In Proceedings of the 2011 an nual conference on Human factors in computing systems New York NY USA ACM 2011 CHI 11 S 3023 3032 URL http doi acm org 10 1145 1978942 1979391 ISBN 978 1 4503 0228 9 Holz und Baudisch 2011 Holz Christian Baudisch Patrick Understanding touch In Proceedings of the 2011 annual conference on Human factors in computing systems New York NY USA ACM 2011 CHI 11 S 2501 2510 URL http doi acm org 10 1145 1978942 1979308 ISBN 978 1 4503 0228 9 HP 2011 HP HP Produkte und Devices TouchPad 2011 URL http h41112 www4 hp com promo webos de de tablet touchpad html Zugriffsdatum 25 01 2012 iii Literaturverzeichnis Hunter etal 2010 Hunter Jason Driscoll Jim Murray Greg The HTML Pad 2010 URL http htmlpad wordpress com Zugriffsdatum 04 10 2011 jQuery 2011 jQuery jQuery M
188. verteilte Punkte repr sen tiert was vorallem auf unterschiedliche Ausf hrungsgeschwindigkeiten zu r ckzuf hren ist Um die Vergleichbarkeit zu gew hrleisten werden die Punk te auf dem gegebenen Pfad des Kandidaten neu verteilt Alle Vorlagen und Kandidaten werden damit durch die gleiche Anzahl von Punkten repr sentiert 2 Vereinheitlichung der Orientierung Der Rotationswinkel des Kandidaten wird ber das Zentrum der Geste und dessen ersten Punkt ermittelt Der Kandidat wird anschlie end auf 0 um sein Zentrum gedreht 3 Skalieren und Verschiebung Die Dimension und Position des Kandidaten wird anhand eines festgelegten Referenzquadrates und Referenzpunktes verein heitlicht 4 Template Matching Der Kandidat wird mit allen Vorlagen verglichen indem die durchschnittliche Abweichung ihrer zugeh rigen Punkte errechnet wird Die minimale Pfad Distanz wird dann normiert und schlie lich bewertet 3 3 Interpretation von Gesten Im Rahmen eines Google Research Projektes stellt LI eine Erweiterung des Algo rithmus vor das unter dem Namen Protractor ver ffentlicht wurde Li 2010b Die vorgeschlagenen Verbesserungen betreffen insbesondere die M glichkeit den Al gorithmus so zu konfigurieren dass verschieden ausgerichtete Gesten unterschie den werden Diese als orientation sensitive benannte Eigenschaft wird gegeben indem die Geste nicht mehr einheitlich auf 0 gedreht wird sondern zwischen acht Hauptausrichtungen untersch
189. vironments In Computers Graphics 2000 S 851 867 Blas 2011 Blas Kin The Current State of Touch Events M rz 2011 URL http blogs adobe com adobeandjquery 2011 03 07 the current state of touch events Blickenstorfer 1995 Blickenstorfer C H Graffiti Wow Pen Computing Magazine In Pen Compu ting Magazine 1995 Jan S 30 31 Cailliau etal 2009 Cailliau Pieter Demeulemeester Aljosha Deprez Jean Luc Schepper Kri stof D Frederix Jan Mees Pieter Seurynck Jense Bulcke Dieter V den Vittorelli Michael Poo ky PookyTouch and jPooky 2009 URL http pooky sourceforge net Zugriffsdatum 11 02 2012 Literaturverzeichnis Calhoun 2009 Calhoun David PastryKit digging into an Apple Pie Dez 2009 URL http davidbcalhoun com 2009 pastrykit digging into an apple pie Zugriffsdatum 15 11 2011 Carstensen 2011 Carstensen Brian Phantom Limb Jan 2011 URL http www vodori com blog phantom Limb html Zugriffsdatum 30 09 2011 Charland und LeRoux 2011 Charland Andre LeRoux Brian Mobile Application Development Web vs Native In Queue 9 2011 April S 20 20 20 28 URL http doi acm org 10 1145 1966989 1968203 ISSN 1542 7730 Cheng etal 2009 Cheng Kelvin Itzstein Benjamin Sztajer Paul Rittenbruch Markus A unified multi touch multi pointer software architecture for supporting collocated work on the desktop 2009 Cooper etal 2007 Cooper
190. von der Grammatik nicht abgedeckt werden kann Es ist notwendig die Sprachbau steine in ihrer Zusammenstellung zu analysieren und hinsichtlich ihrer Deutbarkeit und Anwendbarkeit zu bewerten 4 2 10 Zusammenfassung Das Kapitel schlie t mit einer zusammenfassenden Darstellung der aufgezeigten Pro blemfelder ab Diskutiert wurde der Sprachansatz vorrangig im Kontext einherge hender Web Technologien insbesondere in Bezug auf die Realisierung von Objekt und Aktionsbeschreibung Als weiterer thematischer Schwerpunkt der das Sprach konzept allgemein betrifft wurde die sequentielle Komposition von Gesten behan delt In Tabelle 4 2 werden die vorgestellten Optimierungsans tze und Erweiterungs vorschl ge in einer bersicht zusammengefasst Problemfeld Ans tze der Optimierung Sequentielle Komposition Erweiterung um Semikolon Operator l sst Unter mit Komma Operator ist scheidung zwischen Einzelpfad Gesten und zu uneindeutig definiert sammengesetzten Gesten zu Fehlen von Ans tzen einer Einf hrung von Relationen f r Ankn pfung ho relativen Lagebeschrei rizontale und vertikale Nachbarschaft sowie rich bung in zusammengesetz tungsbasierte Nachbarschaft ten Gesten Geschlossenheit einer Be Einf hrung der Relation CLOSE wegungsform ausdr cken Formalisierung des Ob Verwendung von Selektoren als Schnittstelle zu jektbezugs im Kontext von Interface Elementen Web Anwendungen me Spezifizierung des Objektkontext durch Inter
191. wegungspfade geh rt und ob diese eine hnlichkeit aufweisen Zu l sen ist demnach ein Korrespondenzproblem In diesem Fall ist der Verarbeitungsaufwand mit insgesamt vier Berechnungsschritten vertretbar Er erh ht sich jedoch mit der Zunahme simultaner Kontakte und weiteren hnlichen Kandidaten Dies ist beim Interaktionsdesign mit GeForMT zu ber cksichtigen Die Erkennung von Gesten zur Eingabezeit wird ebenfalls mit dem zuvor beschriebe nen Verfahren realisiert In diesem Fall wird der Algorithmus mehrfach durchlaufen w hrend das Referenzmuster mit jeder Bewegung erweitert wird Demnach wird immer der gesamte Bewegungspfad in der Berechnung ber cksichtigt Die Gren zen der Online Gestenerkennung wurden in Kapitel 4 2 9 dargelegt und sind in der Formalisierung zu ber cksichtigen Abbildung 5 7 zeigt den Entwurf des Moduls GestureRecognition Es ist als Be obachter des Observation Moduls registriert und implementiert demnach Event handler die die adaptierten Nutzereingaben in Empfang nehmen RecognitionProcessManager CheckModel contiguityIntervalTimer priorities checkmodel eventProfiles 0 gesturestart event gesturechange event gestureend event gesturePathes getNextTaskldx models optionProcessed createEventProfiles event updateEventProfiles event excludeGestureFromRecognition id start stop reset recognitionCallback context GestureRecognitionStartedEvent Le eed Gestu
192. wertet und wenn dieser erkannt ist der Zweite Bedeutend ist hierf r die Implementierung eines Zeitfensters als contiguityIntervalTimer vgl Abb 5 7 dem in Kapitel 2 2 3 definierten Kontiguit tsintervall Innerhalb dieses Intervalls werden weitere gesti sche Eingaben erwartet die jeweils gepr ft werden bis alle atomaren Bestandteile der Definition abgearbeitet sind Der erweiterte Erkennungsalgorithmus entspricht in den Grundz gen dem N Recognizer von Anthony und Wobbrock 2010 vgl 3 3 3 unterscheidet sich jedoch in den Punkten des Auswertungszeitpunktes und den Mechanismen um Variationen abzudecken Die Erkennung zeitgleich ausgef hrter Eingaben wie sie nach GeForMT Spezifikation durch die synchrone und asynchrone Komposition und die Anzahl von Kontakten vorgesehen ist erfordert ebenso Erweiterungen des Algorithmus Die Verfahrens weise wie sie in Abbildung 5 6 dargestellt ist ndert sich im Wesentlichen nicht Es erh ht sich allerdings die Anzahl der Templates die abzugleichen sind Das folgende Beispiel veranschaulicht dies Definiert wird eine Geste die als zwei auseinanderflie hende Linien beschrieben werden kann 1FCLINE_W 1FCLINE_E 5 2 Komponenten des Frameworks Im Datenmodell werden hierf r zwei Referenzmuster abgelegt F hrt der Nutzer nun eine Bewegung mit zwei Fingern aus besteht die Herausforderung ihrer Interpre tation darin zu erkennen welches der beiden Referenzmuster zu welchem der bei den Be
193. ww webkrauts de 2011 08 29 was sind webstandards Zugriffsdatum 02 11 2011 Literaturverzeichnis Sch fer und Str big 2007 Sch fer Mathias Str big Joachim SELFHTML Einf hrung in JavaScript und DOM 2007 URL http de selfhtml org javascript intro htm Zugriffsdatum 14 11 2011 Schmiedl et al 2009 Schmiedl Grischa Seidl Markus Temper Klaus Mobile phone web browsing a study on usage and usability of the mobile web In Proceedings of the 11th International Conference on Human Computer Interaction with Mobile Devices and Services New York NY USA ACM 2009 MobileHC 09 S 70 1 70 2 URL http doi acm org 10 1145 1613858 1613942 ISBN 978 1 60558 281 8 Scholliers etal 2011 Scholliers Christophe Hoste Lode Signer Beat De Meuter Wolfgang Midas a declarative multi touch interaction framework In Proceedings of the fifth international conference on Tangible embedded and embodied interaction New York NY USA ACM 2011 TEI 11 S 49 56 URL http doi acm org 1 1145 1935701 1935712 ISBN 978 1 4503 0478 8 Schwab 2011 Schwab Gregor Touchable jQuery Plugin Feb 2011 URL https github com dotmaster Touchable jQuery Plugin Zugriffsdatum 30 09 2011 Seaward 2010 Seaward Scott Jester Simple Gesture Recognition in JavaScript Sept 2010 URL https github com plainview Jester Zugriffsdatum 01 11 2011 Sencha 2011 Sencha Sencha Touch Mobile
194. zbereich hit area der das interaktive Element umgibt erreicht werden dass die Bedienung auch bei leichtem Verfehlen funktioniert Der Erken nungsbereich einer Geste ist demnach gr er als das dargestellte Element Dar ber hinaus ist ein gr erer Abstand zwischen interaktiven Elementen wie Hyperlinks zu empfehlen um Fehleingaben und Verwechslungen entgegenzuwirken Ein weiterer beachtenswerter Punkt bei der Gestaltung von Multitouch Anwendung en ist die Verdeckung von Bildschirmbereichen Das betrifft zum einen die Ver deckung die mit dem Fat Finger Problem einhergeht zum anderen aber auch die Teile die bei der Interaktion vom Rest der Hand berschattet werden Es ist demnach darauf zu achten dass die visuelle R ckmeldung und wichtige Informationen die f r weitere Aktionen entscheidend sind auch w hrend einer Eingabe im sichtbaren Bereich liegen Eine Folge der absoluten Positionierung der Finger auf dem Touchscreen ist die schnelle Erm dung hevorgerufen durch h ufige Bewegungen Auf und Absetzen von Hand und Arm Das unter der Bezeichnung Gorilla Arm bekannte Ph nomen ist vorallem bei vertikal aufgestellten und gro en Displays ein Problem Teiche etal 2009 Aber auch kleinere Bewegungen mit einem Finger k nnen die Muskeln auf Dauer berstrapazieren Das Ablegen der Hand oder Aufst tzen des Arms kann hier Abhilfe schaffen allerdings ist hierbei zu bef rchten dass Inhalte verdeckt werden oder Aktionen ungewollt ausgel

konzeption eines web-frameworks zur gestenerkennung auf basis

Contents

Download Pdf Manuals

Related Search

Related Contents