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

3. WINDOWS 8 TOUCH LANGUAGE

4. touch – action : ?

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

6. DO 2: DON‘T HIDE CONTENT BEHIND HOVER

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

8. TAKE ADVANTAGE OF NATIVE SCROLLING AND ZOMMING

9. DEMO DEMO DEMO :)

10. POINTER MODEL

11. 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

12. 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

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

14. GOING BEYOND: KINECT + IE

16. KINECT JOINTS DETECTION

17. 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

18. GETTING THE DATA

19. 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

20. KDO SEM?  tomaz.scavnicar@kodirnica.net tomaz.scavnicar@kodirnica.net TSMB FREELANCE WEB DEVELOPER

21. RESOURCES  Available under vendor prefix in IE10  msPointer  Poliflys  Hand.js – http://aka.ms/handjshttp://aka.ms/handjs  Pointer.js – http://aka.ms/pointerjshttp://aka.ms/pointerjs  W3C: http://www.w3.org/TR/pointerevents/http://www.w3.org/TR/pointerevents/  Touch Design: http://bit.ly/win8touchguidancehttp://bit.ly/win8touchguidance  Web Platform Docs: http://bit.ly/pointerdochttp://bit.ly/pointerdoc  Kinected browser Kinected browser  Design guidance for Windows Store apps Design guidance for Windows Store apps  Best Web award Best Web award  www.exploretouch.ie www.exploretouch.ie  http://www.contrejour.ie/ http://www.contrejour.ie/

22. 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 www.ntk.si www.ntk.si Najlepša hvala! Iščete kakovostno izobraževanje? Obiščite Microsoftove izobraževalne centre: Uspeh = Znanje = Microsoftovi uradni tečaji + certificirani Microsoft predavatelji