Mobile Web on Touch Event and YUI
Upcoming SlideShare
Loading in...5
×
 

Mobile Web on Touch Event and YUI

on

  • 4,427 views

Touch device and

Touch device and

Statistics

Views

Total Views
4,427
Views on SlideShare
4,426
Embed Views
1

Actions

Likes
5
Downloads
32
Comments
0

1 Embed 1

http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Web on Touch Event and YUI Mobile Web on Touch Event and YUI Presentation Transcript

  • Mobile Web on Touch Device &YUI
    Morgan Cheng
    Jan 25th 2011
  • Why Mobile?
  • Why Touch Device?
  • Touch is Direct User Intent
  • Touch Device
  • Why Web?
  • Web: Cross Platform Solution
  • Web: Cross Platform Solution
  • Web: Cross Platform Solution
  • Mobile + Touch Device + Web
  • Touch API Support Layer
    Web App
    Browser
    OS
    Hardware
  • Apple Touch Layer
    Web App
    Browser
    OS
    Hardware
  • Microsoft Touch Layer: Limited
    Web App
    Browser
    OS
    Hardware
  • Android Layer: Not Complete
    Web App
    Browser
    OS
    Hardware
  • What’s different for Mobile Touch Web?
  • Touch Event
  • Why not mousedown/mousemove/mouseup?
  • mousedown/mousemove/mouseup doesn’t work as usual in touch browser
    Semantically, touch event is different from mouse event
    Multi-touch!!!
  • How does touch event look?
  • Touch Events in iOS/Safari
    touchstart
    touchmove
    touchend
    touchcancel
  • Touch Events in iOS/Safari
    var target = document.getElementById(‘demo’);
    target.addEventListener(‘touchstart’, function(e) {
    // e.touches
    // e.targetTouches
    // e.changedTouches
    }, false);
  • Touch Events in iOS/Safari
    var target = document.getElementById(‘demo’);
    target.addEventListener(‘touchstart’, function(e) {
    // e.touches[0].clientX
    // e.touches[0].clientY
    // e.touches[0].screenX
    // e.touches[0].screenY
    // e.touches[0].pageX
    // e.touches[0].pageY
    // e.touches[0].target
    // e.touches[0].identifier
    }, false);
  • Touch Events in Android/Webkit
    No multi-touch
    event property
    event.touch === event.touches[0]
  • Touch Events in Firefox 4 Beta
    MozTouchDown
    MozTouchMove
    MozTouchUp
  • Touch Events in Firefox 4 Beta
    document.addEventListener(‘MozTouchDown’, function(e) {
    // e.clientX
    // e.clientY
    // e.streamId
    // e.mozInputType
    }, false);
  • Touch Friendly CSS
  • Eliminate :hover pseudo class
  • How to tell whether it is a touch device?
  • Server Side UserAgent Sniffing
    RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
    RewriteRule ^(.*)$ http://ipad.domain.com [R=301]
  • Media Query
    @media handheld, only screen and (max-device-width: 1024px) {
    /* iPad specific CSS */
    }
    <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"
    href="iPhone.css">
  • JavaScript Sniffing
    function isIPad(){
    return navigator.platform == "iPad";
    }
    function isTouchDevice() {
    return ‘ontouchstart’ in document;
    }
  • Gesture
  • Gesture Event
    User Intent
    Touch Event
    User Action
  • Gesture Events in iOS/Safari
    gesturestart
    gesturechange
    gestureend
  • Gesture: Only for Multi Touch
  • Gesture Events in iOS
    var target = document.getElementById(‘demo’);
    target.addEventListener(‘gesturechange’, function(e) {
    // e.scale
    // e.rotation
    }, false);
  • Gesture Events in Webkit on Android
    Not yet 
  • YUI with Touch
  • YUI Touch Events is simple wrapper
  • Touch Events in YUI
    Y.one(“#demo”).on(“touchstart”, function(e) {
    // e.touches
    // e.targetTouches
    // e.changedTouches
    // Each element of these arrays are instance of
    // DOMEventFacade
    }, false);
  • Touch Events in YUI
    Y.one(“#demo”).on(“gesturechange”, function(e) {
    // e.scale
    // e.rotation
    }, false);
  • YUI Gesture Events is abstraction of mouse and touch
  • Drag & Drop
  • D&D
    Mouse Event
    Touch Event
  • Extend Touch Event with Synthetic Event
  • flick
  • gesturemovestartgesturemovegesturemoveend
  • Summary
    Focus User Intent
    Make Touch Friendly UI
    YUI Helps
  • Resources
    Touch State-of-the-art
    http://www.quirksmode.org/blog/archives/2010/02/the_touch_actio.html
    Touch and Gesture on iOS
    http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
    Touch on Firefox 4
    http://hacks.mozilla.org/2010/08/firefox4-beta3/
  • ThanksQ&A