{"id":6855,"date":"2014-03-20T05:05:46","date_gmt":"2014-03-19T18:05:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6855"},"modified":"2014-03-20T05:05:46","modified_gmt":"2014-03-19T18:05:46","slug":"touch-swipe-gesture-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/touch-swipe-gesture-primer-tutorial\/","title":{"rendered":"Touch Swipe Gesture Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/swipe_gesture.png\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Touch Swipe Gesture Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/swipe_gesture.png\" title=\"Touch Swipe Gesture Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Touch Swipe Gesture Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s tutorial talks about the tablet Swipe Gesture, following up on the <a target=_blank title='Pinch Guesture' href='#tpgpt'>Pinch Gesture<\/a> (as shown below), is pretty intuitive, and lots of people spend lots of time on their tablets, from then on, &#8220;swiping&#8221; their way though the web &#8230; but watch out for angry spiders (whose hairstyles have been adversely affected).   The word &#8220;gesture&#8221; is fairly pertinent here as a touch screen gesture is that bit different to traditional mouse events in the sense that it involves two (or more) fingers to achieve it (and so it is arguable whether the &#8220;one finger swipe&#8221; is technically a &#8220;gesture&#8221; as such), so in the event logic, that is a difference that means that it is hard to think of a one-to-one correspondence with many mouse event &#8220;habits&#8221; that match perfectly with any tablet touch &#8220;gestures&#8221;.  However, a touch &#8220;touchstart&#8221; event can be thought of as similar to a &#8220;mousedown&#8221; event.   Let&#8217;s see below Wikipedia&#8217;s definition of multi-touch, where the term gesture comes into play.<\/p>\n<blockquote>\n<p>In computing, multi-touch refers to the ability of a surface (a trackpad or touchscreen) to recognize the presence of two or more points of contact with the surface. This plural-point awareness is often used to implement advanced functionality such as pinch to zoom or activating certain subroutines attached to predefined gestures.<\/p>\n<p>In an effort of disambiguation or marketing classification some companies further break down the various definitions of multi-touch. An example of this is 3M, defining multi-touch as a touch-screen&#8217;s ability to register three or more distinct positions.[1]<\/p>\n<\/blockquote>\n<p>The swipe gesture is really not a big change to what non-tablet users would have understood as &#8220;scrolling&#8221;, and if\/when such non-tablet users get onto a tablet they will find it far more instantly intuitive than the Pinch Gesture.   However, as for crossing the road with those huge walk sign buttons that are so pleasurable to hit (tap?), the flourish (and follow through) that the Swipe Gesture allows can give the day that extra &#8220;drama&#8221; you are looking for &#8230; try following through so hard you stand up &#8230; is good for your health to move around a bit (lot?!) if you are in the office.   Dare I say, take the tablet to an unusual room and swipe away with flourish and fanfare!   Add musical affects to your swiping <a target=_blank title='Swipe Gesture music ... Wagner ... Ride of the Valkyries' href='https:\/\/www.youtube.com\/watch?v=V92OBNsQgxU'>here<\/a>.<\/p>\n<p>Was in the process of creating an illustrative webpage for this, but got a wake up call with regard to the old &#8220;keep it simple&#8221; (because often (but not always) it is) paradigm.   Just about all the old-style tutorial slideshows at this blogpost show the way the Swipe Gesture &equiv; Scrolling (by the way &#8220;&equiv;&#8221; is &#8220;equivalent to&#8221;), and will point you in the direction of some recent such slideshows that suit the Swipe Gesture (on a tablet) and the horizontal scrollbar (on non-tablets).<\/p>\n<ul>\n<li><a target=_blank title='Data Security Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Security\/'>Data Security Primer Tutorial<\/a> (download <a target=_blank title='DataSecurityPrimerTutorial.html' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/DataSecurityPrimerTutorial.html_GETME'>here<\/a>)<\/li>\n<li><a target=_blank title='Eclipse and Android Studio Dynamic Text View Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/Java\/Eclipse\/NewTextView\/'>Eclipse and Android Studio Dynamic Text View Primer Tutorial<\/a> (download <a target=_blank title='EclipseAndAndroidStudioDynamicTextViewPrimerTutorial.html' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/EclipseAndAndroidStudioDynamicTextViewPrimerTutorial.html_GETME'>here<\/a>)<\/li>\n<li><a target=_blank title='Android Studio Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/Java\/AndroidStudio\/'>Android Studio Primer Tutorial<\/a> (download <a target=_blank title='AndroidStudioPrimerTutorial.html' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/AndroidStudioPrimerTutorial.html_GETME'>here<\/a>)<\/li>\n<li> &#8230; and that complex try (that doesn&#8217;t work for all platform\/browser combinations but shows vertical swiping &equiv; vertical scrolling &#8230;<\/li>\n<li><a target=_blank title='Vertical Swipe Gesture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/vertical_swipe.html'>The Complex (Vertical) Swipe Webpage<\/a> (download <a target=_blank title='Vertical Swipe Gesture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/vertical_swipe.html_GETME'>here<\/a>)<\/li>\n<li><a target=_blank title='Horizontal Swipe Gesture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/horizontal_swipe.html'>The Complex (Horizontal) Swipe Webpage<\/a> (download <a target=_blank title='Horizontal Swipe Gesture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/swipe\/horizontal_swipe.html_GETME'>here<\/a>)<\/li>\n<\/ul>\n<p>While we are here let&#8217;s just say that you can probably say the Tap &#8220;Gesture&#8221; &equiv; Mouse Click.<\/p>\n<p>Happy (flourishing) swiping to you (on your tablet)!<\/p>\n<hr \/>\n<p id='tpgpt'>Previous <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6110\">Touch Pinch Gesture Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/touch_events_pinch.png\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Touch Pinch Gesture Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/touch_events_pinch.png\" title=\"Touch Pinch Gesture Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Touch Pinch Gesture Primer Tutorial<\/p><\/div>\n<p>The Pinch Gesture on a tablet is pretty intuitive, and lots of people spend lots of time from then on &#8220;pinching&#8221; their way though the web &#8230; but watch out for angry spiders.   The word &#8220;gesture&#8221; is fairly pertinent here as a touch screen gesture is that bit different to traditional mouse events in the sense that it involves two (or more) fingers to achieve it, so in the event logic, that is a difference that means that it is hard to think of a one-to-one correspondence with many mouse event &#8220;habits&#8221; that match perfectly with any tablet touch &#8220;gestures&#8221;.  However, a touch &#8220;touchstart&#8221; event can be thought of as similar to a &#8220;mousedown&#8221; event.   Let&#8217;s see below Wikipedia&#8217;s definition of multi-touch, where the term gesture comes into play.<\/p>\n<blockquote>\n<p>In computing, multi-touch refers to the ability of a a surface (a trackpad or touchscreen) to recognize the presence of two or more points of contact with the surface. This plural-point awareness is often used to implement advanced functionality such as pinch to zoom or activating certain subroutines attached to predefined gestures.<\/p>\n<p>In an effort of disambiguation or marketing classification some companies further break down the various definitions of multi-touch. An example of this is 3M, defining multi-touch as a touch-screen&#8217;s ability to register three or more distinct positions.[1]<\/p>\n<\/blockquote>\n<p>Below are some links of interest for this tutorial (thanks heaps):<\/p>\n<ul>\n<li><a target=_blank title='Basic Zooming using the Pinch Gestures' href='https:\/\/developer.apple.com\/library\/ios\/documentation\/windowsviews\/conceptual\/UIScrollView_pg\/ZoomZoom\/ZoomZoom.html'>Basic Zooming using the Pinch Gestures<\/a><\/li>\n<li><a target=_blank title='Basic Zooming using the Pinch Gestures' href='http:\/\/en.wikipedia.org\/wiki\/Multi-touch'>Multi-touch<\/a> (as for quote above)<\/li>\n<li><a target=_blank title='How to recognize touch events using jQuery in Safari for iPad? Is it possible?' href='http:\/\/stackoverflow.com\/questions\/4755505\/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible'>How to recognize touch events using jQuery in Safari for iPad? Is it possible?<\/a><\/li>\n<li><a target=_blank title='Simplest way to detect a pinch' href='http:\/\/stackoverflow.com\/questions\/11183174\/simplest-way-to-detect-a-pinch'>Simplest way to detect a pinch<\/a><\/li>\n<li><a target=_blank title='TouchEvent Class Reference' href='https:\/\/developer.apple.com\/library\/safari\/documentation\/UserExperience\/Reference\/TouchEventClassReference\/TouchEvent\/TouchEvent.html#\/\/apple_ref\/doc\/uid\/TP40009358'>TouchEvent Class Reference<\/a><\/li>\n<\/ul>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/touch_events_pinch.html_GETME' title='touch_events_pinch.html'>touch_events_pinch.html<\/a> and <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Mac\/Safari\/touch_events_pinch.html' title='Live Run'>live run<\/a> (which has only been tested on an iPad using Safari).<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d6110' onclick='var dv=document.getElementById(\"d6110\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6110' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d6855' onclick='var dv=document.getElementById(\"d6855\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6855' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s tutorial talks about the tablet Swipe Gesture, following up on the Pinch Gesture (as shown below), is pretty intuitive, and lots of people spend lots of time on their tablets, from then on, &#8220;swiping&#8221; their way though the web &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/touch-swipe-gesture-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[485,795,997,1229,1230,1239,1294,1319],"class_list":["post-6855","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-gesture","tag-mobile","tag-programming","tag-swipe","tag-swipe-gesture","tag-tablet","tag-touch","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6855"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=6855"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6855\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=6855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=6855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=6855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}