TP HTML5 / Nouveaux moyens d'interaction

Introduction

Dans ce TP nous allons découvrir des applications de HTML5 mettant en oeuvre des devices mobiles (tablettes, smartphones) et des ordinateurs. Certains exercices montreront comment dans une même application on peut faire coopérer plusieurs tablettes avec un PC via les websockets de HTML5.

Dans un premier temps nous ferons des exercices ne mettant pas en oeuvre de serveur web ou de serveur de websockets, vous découvrirez au travers de tutoriaux les APIs JavaScript de HTML5 d'orientation et de géolocalisation. Dans un second temps vous intallerez un serveur NodeJS sur chacune de vos machines et interagirez via des websockets entre une tablette/smartphone et un le PC sur lequel le serveur tourne. Enfin, vous développerez une petite application multi-participants.

L'API d'orientation de HTML5

Travail à faire:

1. Découvrez en lisant cet article la manière dont fonctionnent les APIs d'orientation et de gestion des accéléromètres. Vous pourrez aussi lire cet article en français.
2. Muni d'un ipad, d'un mac portable récent ou d'un device android récent, vous  testerez les démonstrations proposées dansles articles cités mais également celle-ci : http://jsbin.com/uceciv/2/edit
   Nous vous conseillons de regarder ce dernier exemple en tenant le smartphone ou la tablette en position verticale, tenez le à bout de bras et tournez le autours d'un axe partant de votre poitrine, devant vous. Penchez le en avant et en arrière. Maintenant, imaginez que vous jouez à Mario Kart sur une Wii... vous voyez le topo ?

Nous laisserons de côté pour le moment la gestion de l'accéléromètre. Dans le TP nous nous contenterons de gérer l'orientation.

L'API de géolocalisation de HTML5