Touch pour le Web et     Windows 8 en Javascript                  (WEB202)                       Philippe DIDIERGEORGES   ...
INFINITE SQUARE  STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES   Société de conseil, d’expertise, de réalisation et ...
Agenda•   Prendre la vague du tactile•   Design et ergonomie•   Gestion du touch en JavaScript•   Surprise•   Les gestures...
PRENDRE LA VAGUE DU TACTILECode / Developpement
La révolution tactile     • Explosion du nombre de terminaux tactiles          – 1 milliard de smartphones          – 80 m...
La révolution tactileCode / Developpement
La révolution tactile     • La révolution des Apps          – UX améliorée          – Ergonomie naturelle     • Ils y sont...
DESIGN ET ERGONOMIECode / Developpement
Quelques règles de base     • Le contenu est roi!     • Interfaces « naturelles »          – Eviter scroll bar, bouton de ...
Quelques règles de base     • Adaptation de l’UI à la manipulation aux       doigts          – Contrôles spécifiques      ...
Quelques règles de base     • Pas de contenu caché nécessitant un       survol à la souris (hover)     • Penser aussi aux ...
GESTION DU TOUCH EN        JAVASCRIPTCode / Developpement
Les Evènenements Touch     • Créé par Apple pour l’iPhone (2007)     • Draft W3C     • Les évènements:         touchstart ...
Les Evènements Touch     • Cool           – Supporté par une majorité de navigateurs mobiles et            tablettes     ...
Les Evènements Pointer     • Proposé par Microsoft avec IE10 et W8          –   Touch          –   Souris          –   Sty...
Les Evènements Pointer     • Les évènements:          MSPointerDown         MSPointerCancel          MSPointerMove        ...
Les Evènements Pointer     • Cool           – Support Touch+Souris+Stylet commun     • Pas Cool           – Supporté lim...
HANDJS        DAVID ROUSSET, L’HOMME QUI TOUCHE… EN JAVASCRIPT!Code / Developpement
LES GESTURES EN JAVASCRIPTCode / Developpement
Les Gestures Javascript (Touch Events)     • Les évènements:          – GestureStart          – GestureChange          – G...
Les Evènenements MSGesture (Pointer     Event)     • Les évènements:          –   MSGestureStart          –   MSGestureCha...
Evénement GestureChange (Touch)       Rotation        ScalingCode / Developpement
Evénement MSGestureChange     (MSPointer)       Rotation        Scaling      Translation       CSSMatrix          (Transla...
MSGesture (Pointer Events)     var myGesture = new MSGesture();     var touchElement = document.getElementById("container"...
Les Gestures Javascript     • Cool           – Simplifie la vie du développeur     • Pas Cool           – Inertie unique...
ET POUR WINDOWS 8?Code / Developpement
Donc…     • Passez au touch dès maintenant     • C’est le bon moment pour innover     • Pensez touch !           Un doigt...
Donnez votre avis !                                     Depuis votre smartphone, sur :                              http:/...
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web
Prochain SlideShare
Chargement dans…5
×

HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web

2 282 vues

Publié le

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.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 282
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Phil + Etienne
  • Etienne
  • Etienne
  • Philippe
  • Philippe
  • Philippe
  • Philippe
  • Etienne
  • Etienne
  • Etienne
  • Philippe
  • Philippe
  • Etienne
  • Philippe
  • Philippe
  • Philippe
  • David
  • Etienne
  • Etienne
  • Philippe
  • Etienne
  • Philippe
  • Etienne
  • Etienne
  • Etienne
  • Notation
  • HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de Windows 8 et du web

    1. 1. Touch pour le Web et Windows 8 en Javascript (WEB202) Philippe DIDIERGEORGES Etienne MARGRAFF Infinite Square #infinitesquare http://www.infinitesquare.comCode / Développement
    2. 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. 3. Agenda• Prendre la vague du tactile• Design et ergonomie• Gestion du touch en JavaScript• Surprise• Les gestures en JavaScript
    4. 4. PRENDRE LA VAGUE DU TACTILECode / Developpement
    5. 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-FirstCode / Developpement
    6. 6. La révolution tactileCode / Developpement
    7. 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 – FacebookCode / Developpement
    8. 8. DESIGN ET ERGONOMIECode / Developpement
    9. 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’utilisateurCode / Developpement
    10. 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 doigtsCode / Developpement
    11. 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 StandardsCode / Developpement
    12. 12. GESTION DU TOUCH EN JAVASCRIPTCode / Developpement
    13. 13. Les Evènenements Touch • Créé par Apple pour l’iPhone (2007) • Draft W3C • Les évènements: touchstart touchenter touchend touchleave touchmove touchcancelCode / Developpement
    14. 14. 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éeCode / Developpement
    15. 15. Les Evènements Pointer • Proposé par Microsoft avec IE10 et W8 – Touch – Souris – Stylet – 1 pointer = 1 point de contactCode / Developpement
    16. 16. Les Evènements Pointer • Les évènements: MSPointerDown MSPointerCancel MSPointerMove MSPointerOut MSPointerUp MSPointerHover • Propriétés Navigator.msMaxTouchPoints event.pointerTypeCode / Developpement
    17. 17. 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
    18. 18. HANDJS DAVID ROUSSET, L’HOMME QUI TOUCHE… EN JAVASCRIPT!Code / Developpement
    19. 19. LES GESTURES EN JAVASCRIPTCode / Developpement
    20. 20. Les Gestures Javascript (Touch Events) • Les évènements: – GestureStart – GestureChange – GestureEndCode / Developpement
    21. 21. Les Evènenements MSGesture (Pointer Event) • Les évènements: – MSGestureStart – MSGestureChange – MSGestureEnd – MSInertiaStart – MSGestureHold – MSGestureTapCode / Developpement
    22. 22. Evénement GestureChange (Touch) Rotation ScalingCode / Developpement
    23. 23. Evénement MSGestureChange (MSPointer) Rotation Scaling Translation CSSMatrix (Translation, Rotation, Scaling)Code / Developpement
    24. 24. 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
    25. 25. 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 JavascriptCode / Developpement
    26. 26. ET POUR WINDOWS 8?Code / Developpement
    27. 27. Donc… • Passez au touch dès maintenant • C’est le bon moment pour innover • Pensez touch !  Un doigt, c’est plus gros qu’une sourisCode / Developpement
    28. 28. 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 TechDayshttp://notes.mstechdays.fr

    ×