SlideShare une entreprise Scribd logo
Touch pour le Web et
     Windows 8 en Javascript
                  (WEB202)
                       Philippe DIDIERGEORGES
                             Etienne MARGRAFF

                                   Infinite Square

                                        #infinitesquare
                         http://www.infinitesquare.com
Code / Développement
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
Agenda
•   Prendre la vague du tactile
•   Design et ergonomie
•   Gestion du touch en JavaScript
•   Surprise
•   Les gestures en JavaScript
PRENDRE LA VAGUE DU TACTILE

Code / Developpement
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
La révolution tactile




Code / Developpement
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
DESIGN ET ERGONOMIE

Code / Developpement
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
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
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
GESTION DU TOUCH EN
        JAVASCRIPT
Code / Developpement
Les Evènenements Touch
     • Créé par Apple pour l’iPhone (2007)
     • Draft W3C
     • Les évènements:
         touchstart    touchenter
         touchend      touchleave
         touchmove     touchcancel


Code / Developpement
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
Les Evènements Pointer
     • Proposé par Microsoft avec IE10 et W8
          –   Touch
          –   Souris
          –   Stylet
          –   1 pointer = 1 point de contact




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

Code / Developpement
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
HANDJS
        DAVID ROUSSET, L’HOMME QUI TOUCHE… EN JAVASCRIPT!


Code / Developpement
LES GESTURES EN JAVASCRIPT

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




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

          – MSGestureHold
          – MSGestureTap

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




Code / Developpement
Evénement MSGestureChange
     (MSPointer)
       Rotation        Scaling      Translation



       CSSMatrix
          (Translation, Rotation, Scaling)

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
     );


Code / Developpement
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
ET POUR WINDOWS 8?

Code / Developpement
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
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

Contenu connexe

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

Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
Microsoft
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
Introduction au développement Windows 8.1
Introduction au développement Windows 8.1Introduction au développement Windows 8.1
Introduction au développement Windows 8.1
Microsoft
 
Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014Etienne Margraff
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2day
Alexandre Jubien
 
Prez web vr chtijs
Prez web vr chtijsPrez web vr chtijs
Prez web vr chtijs
Thomas Balouet
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en action
Microsoft
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Stéphanie Hertrich
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
Microsoft
 
Mobile Day : Enjeux d'aujoourd'hui
Mobile Day : Enjeux d'aujoourd'huiMobile Day : Enjeux d'aujoourd'hui
Mobile Day : Enjeux d'aujoourd'hui
Michel HUBERT
 
[Meetup Paris Unity] - Créer des jeux pour windows phone et windows store a...
[Meetup Paris Unity]  - Créer des jeux pour windows phone et windows store a...[Meetup Paris Unity]  - Créer des jeux pour windows phone et windows store a...
[Meetup Paris Unity] - Créer des jeux pour windows phone et windows store a...
BeMyApp
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Microsoft
 
Mon site en version mobile
Mon site en version mobileMon site en version mobile
Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices
Microsoft
 
TechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longueTechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longueTouchify
 
Etat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile MicrosoftEtat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile Microsoft
Microsoft Décideurs IT
 
TechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courteTechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courteTouchify
 
App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...
App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...
App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...
Guillaume Brout
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 

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

Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Introduction au développement Windows 8.1
Introduction au développement Windows 8.1Introduction au développement Windows 8.1
Introduction au développement Windows 8.1
 
Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2day
 
Prez web vr chtijs
Prez web vr chtijsPrez web vr chtijs
Prez web vr chtijs
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en action
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
 
Mobile Day : Enjeux d'aujoourd'hui
Mobile Day : Enjeux d'aujoourd'huiMobile Day : Enjeux d'aujoourd'hui
Mobile Day : Enjeux d'aujoourd'hui
 
[Meetup Paris Unity] - Créer des jeux pour windows phone et windows store a...
[Meetup Paris Unity]  - Créer des jeux pour windows phone et windows store a...[Meetup Paris Unity]  - Créer des jeux pour windows phone et windows store a...
[Meetup Paris Unity] - Créer des jeux pour windows phone et windows store a...
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
 
Mon site en version mobile
Mon site en version mobileMon site en version mobile
Mon site en version mobile
 
Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices
 
TechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longueTechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longue
 
Etat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile MicrosoftEtat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile Microsoft
 
TechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courteTechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courte
 
App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...
App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...
App211 techdays 2013 Windows 8 concevoir des applications efficaces et perfor...
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 

Plus de Microsoft

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
Microsoft
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
Microsoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
Microsoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
Microsoft
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
Microsoft
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Microsoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
Microsoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
Microsoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
Microsoft
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 

Plus de Microsoft (20)

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 

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

  • 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
  • 12.
  • 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
  • 15.
  • 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
  • 19.
  • 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
  • 28.
  • 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

Notes de l'éditeur

  1. Phil + Etienne
  2. Etienne
  3. Etienne
  4. Philippe
  5. Philippe
  6. Philippe
  7. Philippe
  8. Etienne
  9. Etienne
  10. Etienne
  11. Philippe
  12. Philippe
  13. Etienne
  14. Philippe
  15. Philippe
  16. Philippe
  17. David
  18. Etienne
  19. Etienne
  20. Philippe
  21. Etienne
  22. Philippe
  23. Etienne
  24. Etienne
  25. Etienne
  26. Notation