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

Touch pour le Web et Windows 8 en

Javascript (WEB202)Philippe DIDIERGEORGES

Etienne MARGRAFF

Infinite Square

Code / Développement

#infinitesquarehttp://www.infinitesquare.com

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.

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

Agenda

PRENDRE LA VAGUE DU TACTILE

Code / Developpement

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

Code / Developpement

La révolution tactile

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

DESIGN ET ERGONOMIE

Code / Developpement

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

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

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

demo

GESTION DU TOUCH EN JAVASCRIPT

Code / Developpement

Code / Developpement

• Créé par Apple pour l’iPhone (2007)• Draft W3C• Les évènements:

Les Evènenements Touch

touchentertouchleavetouchcancel

touchstarttouchendtouchmove

demo

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

Code / Developpement

• Proposé par Microsoft avec IE10 et W8– Touch– Souris– Stylet– 1 pointer = 1 point de contact

Les Evènements Pointer

Code / Developpement

• Les évènements:MSPointerDownMSPointerMoveMSPointerUp

• PropriétésNavigator.msMaxTouchPointsevent.pointerType

Les Evènements Pointer

MSPointerCancelMSPointerOutMSPointerHover

demo

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

HANDJSDAVID ROUSSET, L’HOMME QUI TOUCHE… EN JAVASCRIPT!

Code / Developpement

LES GESTURES EN JAVASCRIPT

Code / Developpement

Code / Developpement

• Les évènements:– GestureStart– GestureChange– GestureEnd

Les Gestures Javascript (Touch Events)

Code / Developpement

• Les évènements:– MSGestureStart– MSGestureChange– MSGestureEnd

Les Evènenements MSGesture (Pointer Event)

– MSInertiaStart

– MSGestureHold– MSGestureTap

Code / Developpement

Evénement GestureChange (Touch)

Rotation Scaling

Code / Developpement

Evénement MSGestureChange (MSPointer)

TranslationRotation Scaling

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

);

demo

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

ET POUR WINDOWS 8?

Code / Developpement

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…

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