IE 10: Več kot brskanje Tomaž Ščavničar

WINDOWS 8 TOUCH LANGUAGE

touch – action : ?

DO 1: PROVIDE AMPLE ROOM FOR YOUR FINGER AVG. 11MM - 40PX

DO 2: DON‘T HIDE CONTENT BEHIND HOVER

DO 3: USE HTML5 INPUT TYPES  Touch optimized keyboards  Faster typing experience

TAKE ADVANTAGE OF NATIVE SCROLLING AND ZOMMING

DEMO DEMO DEMO :)

POINTER MODEL

POINTER EVENTS  Similar to mouse events, pointer events fire on down, move, up, over, and out for each pointer:  MSPointerDown MSPointerDown  MSPointerMove MSPointerMove  MSPointerUp MSPointerUp  MSPointerOver MSPointerOver  MSPointerOut MSPointerOut  MSPointerHover MSPointerHover

HOW TO MIGRATE TO POINTER EVENTS  Changing mouse for pointer  Default css property  Why not just preventDefault()?  Performance!  Applied Sciences Group: High Performance Touch Applied Sciences Group: High Performance Touch

ADDITIONAL DEVICE PROPERTIES  Finger  Width  Height  Pen  Pressure  Orientation of the pen:  tiltx  tilty

GOING BEYOND: KINECT + IE

KINECT JOINTS DETECTION

THE SCRIPT  Framework for extension  Mapping points from Kinect world (320 x 240) to PC screen  Detecting movements of every joint  Custom events checking for conditions to trigger action

GETTING THE DATA

PUSH GESTURE  Detecting hand movements  Detecting handOverOut events  Getting DOM element from x, y coordinates  Calculating the depth movements and checking condition  Triggering event if condition is satisfied

KDO SEM?  TSMB FREELANCE WEB DEVELOPER

RESOURCES  Available under vendor prefix in IE10  msPointer  Poliflys  Hand.js –  Pointer.js –  W3C:  Touch Design:  Web Platform Docs:  Kinected browser Kinected browser  Design guidance for Windows Store apps Design guidance for Windows Store apps  Best Web award Best Web award  

VPRAŠANJA Prosimo vas, da po koncu predavanja izpolnite vprašalnike. Nekoga izmed vas bomo nagradili z Nokio Lumia 820. Vprašalniki bodo poslani na vaš e-naslov, dostopni pa bodo tudi preko profila na spletnem mestu Najlepša hvala! Iščete kakovostno izobraževanje? Obiščite Microsoftove izobraževalne centre: Uspeh = Znanje = Microsoftovi uradni tečaji + certificirani Microsoft predavatelji