html5, javascript et css3: concevoir des interfaces tactiles à destination de windows 8 et du web
DESCRIPTION
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.TRANSCRIPT
![Page 1: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/1.jpg)
Touch pour le Web et Windows 8 en
Javascript (WEB202)Philippe DIDIERGEORGES
Etienne MARGRAFF
Infinite Square
Code / Développement
#infinitesquarehttp://www.infinitesquare.com
![Page 2: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/2.jpg)
INFINITE SQUARE STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES
GOLD Certified Partnersur 4 domaines de compétences.
Agréé CIR.
Centre de formation agréé.
Infinite Square aux TechDays 2013
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.
![Page 3: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/3.jpg)
• Prendre la vague du tactile• Design et ergonomie• Gestion du touch en JavaScript• Surprise• Les gestures en JavaScript
Agenda
![Page 4: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/4.jpg)
PRENDRE LA VAGUE DU TACTILE
Code / Developpement
![Page 5: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/5.jpg)
Code / Developpement
• Explosion du nombre de terminaux tactiles– 1 milliard de smartphones– 80 millions de tablettes
• Évolution des OS vers le Touch-First
La révolution tactile
![Page 6: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/6.jpg)
Code / Developpement
La révolution tactile
![Page 7: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/7.jpg)
Code / Developpement
• La révolution des Apps– UX améliorée– Ergonomie naturelle
• Ils y sont déjà– msn.com / outlook.com– Google– Facebook
La révolution tactile
![Page 8: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/8.jpg)
DESIGN ET ERGONOMIE
Code / Developpement
![Page 9: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/9.jpg)
Code / Developpement
• Le contenu est roi!• Interfaces « naturelles »– Eviter scroll bar, bouton de zoom…
• Donner un retour visuel aux actions de l’utilisateur
Quelques règles de base
![Page 10: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/10.jpg)
Code / Developpement
• Adaptation de l’UI à la manipulation aux doigts– Contrôles spécifiques– Taille minimum pour être « touchable » par tous
les doigts
Quelques règles de base
![Page 11: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/11.jpg)
Code / Developpement
• 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
Quelques règles de base
![Page 12: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/12.jpg)
demo
![Page 13: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/13.jpg)
GESTION DU TOUCH EN JAVASCRIPT
Code / Developpement
![Page 14: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/14.jpg)
Code / Developpement
• Créé par Apple pour l’iPhone (2007)• Draft W3C• Les évènements:
Les Evènenements Touch
touchentertouchleavetouchcancel
touchstarttouchendtouchmove
![Page 15: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/15.jpg)
demo
![Page 16: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/16.jpg)
Code / Developpement
• Cool – Supporté par une majorité de navigateurs
mobiles et tablettes
• Pas Cool – Gestion souris / touch séparée– Copyright Apple = standardisation bloquée
Les Evènements Touch
![Page 17: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/17.jpg)
Code / Developpement
• Proposé par Microsoft avec IE10 et W8– Touch– Souris– Stylet– 1 pointer = 1 point de contact
Les Evènements Pointer
![Page 18: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/18.jpg)
Code / Developpement
• Les évènements:MSPointerDownMSPointerMoveMSPointerUp
• PropriétésNavigator.msMaxTouchPointsevent.pointerType
Les Evènements Pointer
MSPointerCancelMSPointerOutMSPointerHover
![Page 19: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/19.jpg)
demo
![Page 20: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/20.jpg)
Code / Developpement
• 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…
Les Evènements Pointer
![Page 21: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/21.jpg)
HANDJSDAVID ROUSSET, L’HOMME QUI TOUCHE… EN JAVASCRIPT!
Code / Developpement
![Page 22: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/22.jpg)
LES GESTURES EN JAVASCRIPT
Code / Developpement
![Page 23: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/23.jpg)
Code / Developpement
• Les évènements:– GestureStart– GestureChange– GestureEnd
Les Gestures Javascript (Touch Events)
![Page 24: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/24.jpg)
Code / Developpement
• Les évènements:– MSGestureStart– MSGestureChange– MSGestureEnd
Les Evènenements MSGesture (Pointer Event)
– MSInertiaStart
– MSGestureHold– MSGestureTap
![Page 25: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/25.jpg)
Code / Developpement
Evénement GestureChange (Touch)
Rotation Scaling
![Page 26: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/26.jpg)
Code / Developpement
Evénement MSGestureChange (MSPointer)
TranslationRotation Scaling
CSSMatrix(Translation, Rotation, Scaling)
![Page 27: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/27.jpg)
Code / Developpement
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
);
![Page 28: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/28.jpg)
demo
![Page 29: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/29.jpg)
Code / Developpement
• Cool – Simplifie la vie du développeur
• Pas Cool – Inertie uniquement sur IE10 + Windows 8
• Et à part les APIs standard?– Nombreuses librairies Javascript
Les Gestures Javascript
![Page 30: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/30.jpg)
ET POUR WINDOWS 8?
Code / Developpement
![Page 31: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/31.jpg)
Code / Developpement
• Passez au touch dès maintenant• C’est le bon moment pour innover
• Pensez touch ! Un doigt, c’est plus gros qu’une
souris
Donc…
![Page 32: HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web](https://reader035.vdocuments.us/reader035/viewer/2022070322/559190741a28ab877c8b45d4/html5/thumbnails/32.jpg)
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