Dans cette session seront présentés les axes de réflexion dans l'adaptation des interfaces web à une utilisation tactile ainsi que les solutions techniques à disposition du développeur pour y parvenir. Le but étant de proposer dès aujourd'hui une expérience d'utilisation aussi agréable sur le web que pour une application native. Au programme : les règles à suivre dans la conception de votre interface pour une expérience utilisateur au top en tactile, le fonctionnement du touch dans IE10 et les autres navigateurs, la détection des gestures dans le navigateur avec et sans librairie et le touch côté de Windows 8 avec WinJS.

1. Touch pour le Web et
Windows 8 en Javascript
(WEB202)
Philippe DIDIERGEORGES
Etienne MARGRAFF
Infinite Square
#infinitesquare
http://www.infinitesquare.com
Code / Développement

2. INFINITE SQUARE
STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES
 Société de conseil, d’expertise, de réalisation et de formation exclusivement sur les technologies
de développement d’applications et la plateforme applicative Microsoft.
 30 collaborateurs spécialisés sur les techno MS, dont 10 MVP.
 GOLD Certified Partner
sur 4 domaines de compétences.
 Agréé CIR.
 Centre de formation agréé.
Infinite Square aux TechDays 2013

3. Agenda
• Prendre la vague du tactile
• Design et ergonomie
• Gestion du touch en JavaScript
• Surprise
• Les gestures en JavaScript

4. PRENDRE LA VAGUE DU TACTILE
Code / Developpement

5. La révolution tactile
• Explosion du nombre de terminaux tactiles
– 1 milliard de smartphones
– 80 millions de tablettes
• Évolution des OS vers le Touch-First
Code / Developpement

6. La révolution tactile
Code / Developpement

7. La révolution tactile
• La révolution des Apps
– UX améliorée
– Ergonomie naturelle
• Ils y sont déjà
– msn.com / outlook.com
– Google
– Facebook
Code / Developpement

8. DESIGN ET ERGONOMIE
Code / Developpement

9. Quelques règles de base
• Le contenu est roi!
• Interfaces « naturelles »
– Eviter scroll bar, bouton de zoom…
• Donner un retour visuel aux actions de
l’utilisateur
Code / Developpement

10. Quelques règles de base
• Adaptation de l’UI à la manipulation aux
doigts
– Contrôles spécifiques
– Taille minimum pour être « touchable » par tous les
doigts
Code / Developpement

11. Quelques règles de base
• Pas de contenu caché nécessitant un
survol à la souris (hover)
• Penser aussi aux autres
– Prévoir une utilisation souris / clavier / stylet
OU
– Prévoir un site touch et un site souris
• Utiliser les contrôles HTML5 Standards
Code / Developpement

13. GESTION DU TOUCH EN
JAVASCRIPT
Code / Developpement

14. Les Evènenements Touch
• Créé par Apple pour l’iPhone (2007)
• Draft W3C
• Les évènements:
touchstart touchenter
touchend touchleave
touchmove touchcancel
Code / Developpement

16. Les Evènements Touch
• Cool 
– Supporté par une majorité de navigateurs mobiles et
tablettes
• Pas Cool 
– Gestion souris / touch séparée
– Copyright Apple = standardisation bloquée
Code / Developpement

17. Les Evènements Pointer
• Proposé par Microsoft avec IE10 et W8
– Touch
– Souris
– Stylet
– 1 pointer = 1 point de contact
Code / Developpement

18. Les Evènements Pointer
• Les évènements:
MSPointerDown MSPointerCancel
MSPointerMove MSPointerOut
MSPointerUp MSPointerHover
• Propriétés
Navigator.msMaxTouchPoints
event.pointerType
Code / Developpement

20. Les Evènements Pointer
• Cool 
– Support Touch+Souris+Stylet commun
• Pas Cool 
– Supporté limité pour le moment
• MAIS:
– Standardisation W3C démarrée  
– Groupe de travail: Google, Mozilla, Microsoft, Opera…
Code / Developpement

21. HANDJS
DAVID ROUSSET, L’HOMME QUI TOUCHE… EN JAVASCRIPT!
Code / Developpement

22. LES GESTURES EN JAVASCRIPT
Code / Developpement

23. Les Gestures Javascript (Touch Events)
• Les évènements:
– GestureStart
– GestureChange
– GestureEnd
Code / Developpement

24. Les Evènenements MSGesture (Pointer
Event)
• Les évènements:
– MSGestureStart
– MSGestureChange
– MSGestureEnd
– MSInertiaStart
– MSGestureHold
– MSGestureTap
Code / Developpement

25. Evénement GestureChange (Touch)
Rotation Scaling
Code / Developpement

26. Evénement MSGestureChange
(MSPointer)
Rotation Scaling Translation
CSSMatrix
(Translation, Rotation, Scaling)
Code / Developpement

27. MSGesture (Pointer Events)
var myGesture = new MSGesture();
var touchElement = document.getElementById("container");
myGesture.target = touchElement;
touchElement.addEventListener("MSPointerDown",
function(evt){
myGesture.addPointer(evt.pointerId);
}
, false
);
Code / Developpement

29. Les Gestures Javascript
• Cool 
– Simplifie la vie du développeur
• Pas Cool 
– Inertie uniquement sur IE10 + Windows 8
• Et à part les APIs standard?
– Nombreuses librairies Javascript
Code / Developpement

30. ET POUR WINDOWS 8?
Code / Developpement

31. Donc…
• Passez au touch dès maintenant
• C’est le bon moment pour innover
• Pensez touch !
 Un doigt, c’est plus gros qu’une
souris
Code / Developpement

32. Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr/WEB202
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr