SlideShare a Scribd company logo
Getting Touchy Feely
with the Web
WDC Melbourne 23 May, 2012



@ajfisher
slideshare.net/andrewjfisher
                            github.com/ajfisher/wdc


Image (CC) flickr - zzpza
1. Mechanics of the API
2. Using the components
3. Applications
Mechanics of the API




Image (CC) flickr – grunge textures
Touch Event API
touchstart
touchend
touchmove
touchcancel
touchenter
touchleave

http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
Touch Event API
touchstart
touchend
touchmove
touchcancel
touchenter
touchleave

http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
TouchEvent Object

TouchList touches
TouchList targetTouches
TouchList changedTouches
boolean altKey, metaKey, ctrlKey, shiftKey
EventTarget relatedTarget
TouchEvent Object

touches
All touches

targetTouches
Touches related to DOM object with bound event.
Watch out for nesting

changedTouches
Touches that caused this event to fire
Touch Object
identifier
target
pageX, pageY
clientX, clientY
screenX, screenY
radiusX, radiusY
force
rotationAngle
Touch Object
identifier
target
pageX, pageY
clientX, clientY
screenX, screenY
radiusX, radiusY
force
rotationAngle
Support
Touch
  Android 2.1+ / iOS 3+ / Opera Mobile / Firefox Mobile
Multi touch
  iOS 3+
  Android 3+ (targetTouches only)
  Android 4+ (all)
  Opera Mobile & Firefox Mobile (depends on OS)
Touch API is likely to change
Making things touchable




Image (CC) flickr – Mary Scheirer
Detecting a single touch
canvas.addEventListener("touchstart", (function(evt) {    Single Touch
     evt.preventDefault();
     start_point = $.extend({}, evt.changedTouches[0]);
     end_point = null;
     draw_touches();
}), false);
canvas.addEventListener("touchend", (function(evt) {
     end_point = evt.changedTouches[0];
     current_point = null;
     draw_touches();
}), false);
canvas.addEventListener("touchmove", (function(evt) {
   evt.preventDefault();
   current_point = evt.targetTouches[0];
   draw_touches();
}), false);
Single touch - demo




Demo at http://ajfisher.me/wdc/singletouch.html
Detecting multi touches




Image (CC) flickr – Jason White
canvas.addEventListener("touchstart", (function(evt) {      Multi touch
   evt.preventDefault();
   start_point.push($.extend({}, evt.changedTouches[0]));
   draw_multi_touches();
}), false);
canvas.addEventListener("touchend",(function(evt) {
   end_point.push($.extend({}, evt.changedTouches[0]));
   draw_multi_touches();
   if (evt.targetTouches.length == 0) {
     start_point = new Array();
     end_point = new Array(); }
}), false);
canvas.addEventListener("touchmove", (function(evt) {
   evt.preventDefault();
   current_point = evt.targetTouches;
   draw_multi_touches();
}), false);
Multi touch - demo




Demo at http://ajfisher.me/wdc/multitouch.html
Consider default behaviours

event.preventDefault()
event.stopPropagation()
Understanding gesture




Image (CC) flickr – Marc Wathieu
Pinch Zoom - touchstart
imgzoom.addEventListener("touchstart", check_zoom, false);
function check_zoom(evt) {
    evt.preventDefault();
    var tt = evt.targetTouches;
    if (tt.length >= 2) {
        dist = distance(tt[0], tt[1]);
        scaling = true;
    } else {
        scaling = false; }
}
Pinch Zoom - touchmove
imgzoom.addEventListener("touchmove", do_zoom, false);
function do_zoom(evt) {
    evt.preventDefault();
    var tt = evt.targetTouches;
    if (scaling) {
        curr_scale = distance(tt[0], tt[1]) / dist * scale_factor;
        imgzoom.style.WebkitTransform =
                "scale(" + curr_scale + ", " + curr_scale + ")";
    }
}
Pinch Zoom - touchend
imgzoom.addEventListener("touchend", end_zoom, false);
function end_zoom(evt) {
    var tt = evt.targetTouches;
    if (tt.length < 2) {
        scaling = false;
        if (curr_scale < min_zoom) { scale_factor = min_zoom; }
        else {
            if (curr_scale > max_zoom) { scale_factor = max_zoom; }
            else { scale_factor = curr_scale; } }
        }
        imgzoom.style.WebkitTransform =
                              "scale(" + scale_factor + ", " + scale_factor + ")";
    } else { scaling = true; }
}
Pinch Zoom- demo




Demo at http://ajfisher.me/wdc/pinchzoom.html
Applications of touch




Image (CC) flickr – Jamie Buscemi
Drag and drop- demo




Demo at http://quirksmode.org/m/tests/drag2.html
NY Times Skimmer- demo




Demo at http://nytimes.com/skimmer/#/World
OnSwipe- demo




Demo at http://ajfisher.me with a mobile device
Flickr- demo




Demo at http://flickr.com/photos/kaisphotos/lightbox
Resources
W3C spec
dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
HTML Rocks Touch
html5rocks.com/en/mobile/touch/
Big list of touch stuff
github.com/bebraw/jswiki/wiki/Touch
My demo code
github.com/ajfisher/wdc
Touch patent issues
blog.jquery.com/2012/04/10/getting-touchy-about-patents/
w3.org/2012/01/touch-pag-charter
Getting Touchy Feely
with the Web
WDC Melbourne 23 May, 2012



@ajfisher
github.com/ajfisher
slideshare.net/andrewjfisher

More Related Content

Viewers also liked

The ten commandments for a successful user observation
The ten commandments for a successful user observationThe ten commandments for a successful user observation
The ten commandments for a successful user observation
Jonne Valola
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014
Andrew Fisher
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailers
Andrew Fisher
 
Recherche d'information sages femmes
Recherche d'information sages femmesRecherche d'information sages femmes
Recherche d'information sages femmesLaetitia Raimbault
 
All out in the Cloud - CloudEast 2012
All out in the Cloud - CloudEast 2012All out in the Cloud - CloudEast 2012
All out in the Cloud - CloudEast 2012
Jan Jongboom
 
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get StartedResponsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
jennybchicken
 
Varnish in action phpuk11
Varnish in action phpuk11Varnish in action phpuk11
Varnish in action phpuk11
Combell NV
 
Wakanda#1
Wakanda#1Wakanda#1
Wakanda#1
kmiyako
 
Lançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuoLançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuo
Hélio Medeiros
 
I Want My $28! Rockin' Email Marketing ROI
I Want My $28! Rockin' Email Marketing ROII Want My $28! Rockin' Email Marketing ROI
I Want My $28! Rockin' Email Marketing ROI
emfluence
 
Conquering The Context Conundrum
Conquering The Context ConundrumConquering The Context Conundrum
Conquering The Context Conundrum
Daniel Eizans
 
Why Apps, Data and Mobile Converge in the Open Cloud
Why Apps, Data and Mobile Converge in the Open CloudWhy Apps, Data and Mobile Converge in the Open Cloud
Why Apps, Data and Mobile Converge in the Open Cloud
Andy Piper
 
No money? No matter - Improve your website with next to no cash
No money? No matter - Improve your website with next to no cashNo money? No matter - Improve your website with next to no cash
No money? No matter - Improve your website with next to no cash
IWMW
 
After the install
After the installAfter the install
After the install
Al Davis
 
How releasing faster changes testing
How releasing faster changes testingHow releasing faster changes testing
How releasing faster changes testing
Dr. Alexander Schwartz
 
Instant LAMP Stack with Vagrant and Puppet
Instant LAMP Stack with Vagrant and PuppetInstant LAMP Stack with Vagrant and Puppet
Instant LAMP Stack with Vagrant and Puppet
Patrick Lee
 
Scott Chacon, GitHub, SXSW Lean Startup 2013
Scott Chacon, GitHub, SXSW Lean Startup 2013Scott Chacon, GitHub, SXSW Lean Startup 2013
Scott Chacon, GitHub, SXSW Lean Startup 2013
500 Startups
 
360Alumni; The Case For Online Communities
360Alumni; The Case For Online Communities360Alumni; The Case For Online Communities
360Alumni; The Case For Online Communities
megrebale
 

Viewers also liked (20)

The ten commandments for a successful user observation
The ten commandments for a successful user observationThe ten commandments for a successful user observation
The ten commandments for a successful user observation
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailers
 
Recherche d'information sages femmes
Recherche d'information sages femmesRecherche d'information sages femmes
Recherche d'information sages femmes
 
Pubmed
PubmedPubmed
Pubmed
 
All out in the Cloud - CloudEast 2012
All out in the Cloud - CloudEast 2012All out in the Cloud - CloudEast 2012
All out in the Cloud - CloudEast 2012
 
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get StartedResponsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
 
Varnish in action phpuk11
Varnish in action phpuk11Varnish in action phpuk11
Varnish in action phpuk11
 
Wakanda#1
Wakanda#1Wakanda#1
Wakanda#1
 
Lançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuoLançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuo
 
I Want My $28! Rockin' Email Marketing ROI
I Want My $28! Rockin' Email Marketing ROII Want My $28! Rockin' Email Marketing ROI
I Want My $28! Rockin' Email Marketing ROI
 
Open data
Open dataOpen data
Open data
 
Conquering The Context Conundrum
Conquering The Context ConundrumConquering The Context Conundrum
Conquering The Context Conundrum
 
Why Apps, Data and Mobile Converge in the Open Cloud
Why Apps, Data and Mobile Converge in the Open CloudWhy Apps, Data and Mobile Converge in the Open Cloud
Why Apps, Data and Mobile Converge in the Open Cloud
 
No money? No matter - Improve your website with next to no cash
No money? No matter - Improve your website with next to no cashNo money? No matter - Improve your website with next to no cash
No money? No matter - Improve your website with next to no cash
 
After the install
After the installAfter the install
After the install
 
How releasing faster changes testing
How releasing faster changes testingHow releasing faster changes testing
How releasing faster changes testing
 
Instant LAMP Stack with Vagrant and Puppet
Instant LAMP Stack with Vagrant and PuppetInstant LAMP Stack with Vagrant and Puppet
Instant LAMP Stack with Vagrant and Puppet
 
Scott Chacon, GitHub, SXSW Lean Startup 2013
Scott Chacon, GitHub, SXSW Lean Startup 2013Scott Chacon, GitHub, SXSW Lean Startup 2013
Scott Chacon, GitHub, SXSW Lean Startup 2013
 
360Alumni; The Case For Online Communities
360Alumni; The Case For Online Communities360Alumni; The Case For Online Communities
360Alumni; The Case For Online Communities
 

Similar to Getting Touchy Feely with the Web

Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Patrick Lauke
 
Moustamera
MoustameraMoustamera
Moustamera
Bram Vandewalle
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
Jean Michel
 
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Patrick Lauke
 
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
Eric ShangKuan
 
Utility libraries to make your life easier
Utility libraries to make your life easierUtility libraries to make your life easier
Utility libraries to make your life easier
Oleksii Prohonnyi
 
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...
Patrick Lauke
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
franksvalli
 
The Death of a Mouse
The Death of a MouseThe Death of a Mouse
The Death of a Mouse
Geert Bevin
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mohammad Shaker
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
gerbille
 
Of class1
Of class1Of class1
Of class1
Janet Huang
 
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Patrick Lauke
 
Palestra - Utilizando tensorflow mobile e seus desafios
Palestra - Utilizando tensorflow mobile e seus desafiosPalestra - Utilizando tensorflow mobile e seus desafios
Palestra - Utilizando tensorflow mobile e seus desafios
Gustavo Monteiro
 
Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25
Robert Niederreiter
 
Angular.js & hammer.js - Clayton Meador & Canyon Boak
Angular.js & hammer.js - Clayton Meador & Canyon BoakAngular.js & hammer.js - Clayton Meador & Canyon Boak
Angular.js & hammer.js - Clayton Meador & Canyon Boak
cmeador
 
Asynchronous Programming at Netflix
Asynchronous Programming at NetflixAsynchronous Programming at Netflix
Asynchronous Programming at Netflix
C4Media
 
Angular animate
Angular animateAngular animate
Angular animate
Yating Chatiron
 
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Patrick Lauke
 
Attribute actions
Attribute actionsAttribute actions
Attribute actions
Matthew Beale
 

Similar to Getting Touchy Feely with the Web (20)

Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
 
Moustamera
MoustameraMoustamera
Moustamera
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
 
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
 
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
 
Utility libraries to make your life easier
Utility libraries to make your life easierUtility libraries to make your life easier
Utility libraries to make your life easier
 
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...
Getting touchy - an introduction to touch events / Sainté Mobile Days / Saint...
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
 
The Death of a Mouse
The Death of a MouseThe Death of a Mouse
The Death of a Mouse
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
 
Of class1
Of class1Of class1
Of class1
 
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
 
Palestra - Utilizando tensorflow mobile e seus desafios
Palestra - Utilizando tensorflow mobile e seus desafiosPalestra - Utilizando tensorflow mobile e seus desafios
Palestra - Utilizando tensorflow mobile e seus desafios
 
Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25
 
Angular.js & hammer.js - Clayton Meador & Canyon Boak
Angular.js & hammer.js - Clayton Meador & Canyon BoakAngular.js & hammer.js - Clayton Meador & Canyon Boak
Angular.js & hammer.js - Clayton Meador & Canyon Boak
 
Asynchronous Programming at Netflix
Asynchronous Programming at NetflixAsynchronous Programming at Netflix
Asynchronous Programming at Netflix
 
Angular animate
Angular animateAngular animate
Angular animate
 
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
 
Attribute actions
Attribute actionsAttribute actions
Attribute actions
 

More from Andrew Fisher

Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.
Andrew Fisher
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardware
Andrew Fisher
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
Andrew Fisher
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving Experience
Andrew Fisher
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user context
Andrew Fisher
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiences
Andrew Fisher
 
Web Facilitated Play in the Real World
Web Facilitated Play in the Real WorldWeb Facilitated Play in the Real World
Web Facilitated Play in the Real World
Andrew Fisher
 
Arduino and the real time web
Arduino and the real time webArduino and the real time web
Arduino and the real time web
Andrew Fisher
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physical
Andrew Fisher
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added fun
Andrew Fisher
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobile
Andrew Fisher
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the Business
Andrew Fisher
 

More from Andrew Fisher (12)

Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardware
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving Experience
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user context
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiences
 
Web Facilitated Play in the Real World
Web Facilitated Play in the Real WorldWeb Facilitated Play in the Real World
Web Facilitated Play in the Real World
 
Arduino and the real time web
Arduino and the real time webArduino and the real time web
Arduino and the real time web
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physical
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added fun
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobile
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the Business
 

Recently uploaded

What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 

Recently uploaded (20)

What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 

Getting Touchy Feely with the Web

Editor's Notes

  1. Hi, my name’s Andrew Fisher and my background is as an interaction developer and today we’re going to get touchy feely with the web for the next 15 minutes. I’m conscious that touch is a pretty big subject
  2. However with a group of developers who are used to learning stuff fast with steep learning curves I’m sure you’re all be able to walk away with the tools and techniques you need to build beautiful expressive touch interfaces for web applications. So let’s get startedImage: http://www.flickr.com/photos/zzpza/3269784239/sizes/o/in/photostream/
  3. Today we’re going to cover off these three areas. The mechanics of the API, how we use each of the components individually and then looking at bringing it together in an application at the end.
  4. The Touch API is still pretty rough around the edges as the technology is still developing and the use cases for the web are being understood. So the areas I’m going to cover are the API as it stands today (down), the considerations we need to have if we want to use it in our applications and what future considerations do we need to have to deal with legacy as the API will change.http://www.flickr.com/photos/grungetextures/4224085160/in/photostream
  5. The spec defines 6 new events for us to be able to play around with. If you want the really gory details then you can get the latest spec here.
  6. Unfortunately not all of the spec has been implemented or is likely to be for reasons I’ll get onto in a moment. So today we’re just going to focus on the top three – touch start, end and move.
  7. Luckily for us all of these work in the same way. The bit we’re going to focus on are these three TouchLists which are just arrays of Touch Objects however there is some subtlety to how they work together.
  8. Touches is a global and it provides every touch object in contact with the surface at the time.TargetTouches are just the touches that are in relation to the object that this event handler was bound to however there is some consistent weirdness with nested objects as the event will be bound to the lowest level object it can find under the touch even if the event handler is bound to it’s parent.Changed touches is a subset which provides the touch object that caused the event to fire.
  9. So what does a touch object look like – again we have a stack of properties defined by the spec.
  10. But not everything has been implemented. So what we’re left with is largely positional information as well as an identifier which gives us an id back to the touch object so we know which one we’re talking about. even with this very simple object we can do some pretty interesting things with it.So now we know what the API does, under what conditions can we use it in our applications?
  11. Well touch support itself is pretty wide these days with good support for the common mobile browsers. MultiTouch is well supported by iOS devices but less so by Android though we’ll see a big shift as a lot of Gingerbread devices get upgraded to ICS in the next 6 months so plenty of opportunity for building using the touch api.I mentioned earlier that the API is likely to change.
  12. Well the technology itself is encumbered and is under legal review. It takes a while for this stuff to happen and as it is we’re left with a relatively stable API to play with. It will be a while before we need to consider these changes although we should but my advice is not to get hung up on it.So now we understand the mechanics of the API, the support we have for it and that we do need to think about maintenance for the future of our code let’s see how we can start using it.
  13. Let’s use the Touch API in practice – I’m going to build this up starting with Single Touch, Multi Touch and then Gestures and we’ll look at some example code and demos to illustrate it.Image: http://www.flickr.com/photos/maryscheirer/4906553164/
  14. Starting with single touch which is the most basic touch interaction we can create. I’ve set up a basic html page which simply has a canvas element dropped onto it. As such all my event handlers will be bound to that.
  15. We have the three event handlers bound to the canvas and all I’m doing in each case is just allocating the touch object to a one of the points I’ve defined and then we simply plot the points on the canvas. Let’s take a look at a Demo of this now
  16. This does as you’d expect I touch and a point goes down, it then tracks my finger and then leaves a point behind when my touch ends. Pretty simple.
  17. Multi touch is a little more complex as there’s multiple touches in play at different time but it works largely the same way. I’m going to use the same canvas object with the same event handlers bound to it.
  18. In this instance I need to keep track of multiple start and end points which I just push onto and remove from an Array. In my move I’m using the entire list of targettouches on this element to draw them. The draw works the same way except it just iterates over a list rather than a single point. So let’s look at the demo of this
  19. The single Touch works the same as before but now I can add multiple touches onto the screen as many as I like and take them off again.
  20. When we start using multiple touches there are some behaviours implicit in the browser and the OS for example zooming or two finger scrolling. As such don’t forget to use prevent Default and Stop Propagation to stop those default behaviours. Only instance I’ve see where this doesn’t work is the multitasking gestures on an iPAD
  21. We can’t talk multi-touch without talking gesture. There’s no current API for gesture though Apple have attempted an implementation in Mobile safari showing scale and rotation but it doesn’t work with more than 2 touches. The key with gesture however is that it’s both cultural and contextual. As such I’m not sure an API can accommodate that beyond the mechanisms we already have within Touch already.For the moment for compatibility you’re going to have to implement for your own gestures anyway based on what’s correct for your context. As such I’m going to show you how to implement the basics of your own gesture so you can see the way we go about doing it. The code for this is a little longer so I’ll break up each handler onto it’s own slide.Image: http://www.flickr.com/photos/marcwathieu/4074440716/sizes/l/in/photostream/
  22. Here’s our start which waits until we have two touches on screen at once and when it does measures the distance between them as the base distance.
  23. Our move then just keeps tracking the positions and determining if they are getting closer or further away and routes the scaling factor to a CSS scale transformation.
  24. Our end does some clean up like maintaining state between pinches and looking for boundary conditions for too much or too little zoom and cleans up accordingly.
  25. This is it in action then – very simple and you can take this a lot further with origin transforms between the touch points etc but this gives you the basics of how you implement a gesture.Now we know how to detect single and multiple touches and work with them to be able to build up gestures let’s look at some applications of this.
  26. I’m going to run through a couple of quick examples to highlight some applications of this for your interface that go beyond the seemingly ubiquitous canvas finger painting application.Image: http://www.flickr.com/photos/48873600@N08/5139924820/sizes/l/in/photostream/
  27. This first shows the ability to do drag and drop with elements. So you could imagine building an interface that you could rearrange quite happily in this way. Or drag something to a save pile for review later.
  28. The NY Times site works much like most copy heavy sites do with a swipe to advance the page. However they’ve introduced a vertical swipe as well which activates the story menu if you want it. Making it quite efficient
  29. And finally OnSwipe which is a plugin to WordPress has an interesting feature where if you want to dismiss an overlay you can just scrunch it up and it disappears.
  30. The next one is the way flickrlightboxes on a touch device, taking you full screen, giving you swipe and then being able to zoom in and pan around. Whilst this looks very simple in expression there’s a lot of hidden depth as you need to track all of your transformations along with the action you’re taking on the one image as there are multiple gestures in play at any time.These are some good examples of how touch can be used to create much more interesting interactions that are quite efficient for touch devices and particularly start to use their multitouch capabilities to enhance the application.
  31. We’ve covered a lot in a very small amount of time, the mechanics of the API itself, how we use each of the components to build up interfaces and we’ve looked at some examples of some applications of things you can do with it.I’ve got some resources here for you, besides the background stuff of the first three there’s all my demos on my github that you can play around with and see working – they’ve been designed to be cross platform as well which some of the others aren’t. Maxine has all of these so she’ll send around today so you have things to play with. And I’ll have my presso up on slideshare pretty shortly which has all my notes and links in it too.
  32. Unfortunately we don’t have any time for questions right now but I’m around today and tomorrow so please feel free to come and grab me and ask away if you have one and I’ll be more than happy to chat about touchy stuff.Thanks very much for listening and I hope you’ll all go from here and start to build beautiful, expressive touch interfaces for your web applications.