Cette application nécessite l'activation de Javascript.
Apprenez comment activer Javascript dans votre navigateur.
Vous n'êtes pas connecté.
Connexion
Ma Page
Changements Récents
Outils
Aide
Pages récentes
TP HTML5 2013-2014 / No...
M1 informatique - M1 MB...
Savary Frédéric
TP 2013 - Nouveaux moye...
Programmable Web client...
Accueil
Intranet Michel Buff...
...
Applications web, M...
Applications web M1...
Apprentissage de l'i...
Lettres
Client android pour ...
Cours composants di...
Cours composants di...
Cours composants di...
Cours HTML5 CityWa...
Cours HTML5/NodeJS...
Cours HTML5/NodeJS...
Cours Miage d'Evry, ...
Cours Web 2.0 / HTM...
Cours web 2.0 2009
Cours web 2.0 année...
Cours Web 2.0 Casa...
Cours web 2.0 M2 Mi...
Cours web 2.0 MBDS...
Cours Web 2.0 MBDS...
Cours web 2.0 Miage...
Cours web 2.0 Miage...
Design Patterns Jav...
Droits d'accès dans ...
EDx: trucs et astuce...
Exemples interactifs...
Exemples interactifs...
Gestion du projet IS...
HTML5 MBDS 2015-2...
HTML5 Monster cont...
HTML5 pour la L3 Pr...
HTML5 Tutorial for ...
HTML5 tutorial for W...
Installation de Node...
JavaEE6 Weblogic e...
JavaEE6 Weblogic e...
Journée ISN du lund...
Journées ISN 6 et 1...
Java EE6 Weblogic E...
L3 Miage : technos ...
M1 informatique - M...
M1 Miage 2014-2015 ...
M1 Miage 2015-2016 ...
M2 MBDS Casablanca...
M2 MBDS Casablanca...
M2 NTDP - Web 2.0
Master 1 IFI 2015-2...
Premiers pas avec A...
Master Miage NTDP ...
Master Miage NTDP ...
MBDS - Madagascar ...
MBDS 2014-2015 Pri...
MBDS 2015-2016: We...
MBDS Casablanca 20...
MBDS Casablanca 20...
MBDS Mini-projet 20...
Miage Evry 2015-201...
MT5, a multitrack pl...
Option web 2.0 Mast...
HTML5 new structuri...
Plarpebu 1.1 : netbe...
Plasticité des IHM W...
Préparation à la cer...
Programmable Web -...
Programmable Web 2...
Programmable Web c...
Projet année Miage ...
Projet Blitzmax EPU ...
Projet Web 2.0/HTML...
Projets et TP rendus...
Server-side JavaScri...
Technologie Web M1...
Technologies Web, M...
TestPagePourSteph
TP 2013 - Nouveaux ...
TP HTML5 / Nouveau...
TP HTML5 2013-2014...
TP Plasticité des IH...
Web 2.0 2010
Web 2.0 MBDS 2012-...
Web 2.0 Rabat proje...
Web 2.0/HTML5 201...
Web Avancé EPU 201...
Web avancé Master ...
Web Sciences 2016-...
Web services REST /...
Weblogic / Java EE6...
Modifier
la page
Nouvelle
page
Imprimer
la page
Plus
Page modifiée à
05:11, 17 Oct 2013
par
MichelBuffa
0
Préférences d'impression
Voir la Table des Matières
Montrer les infos de modification
Montrer les notes finales en lien
TP HTML5 2013-2014 / Nouveaux moyens d'interaction
De $1
Table des matières
1.1.
Introduction
2.
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.
2.1.
L'API d'orientation de HTML5
3.
Travail à faire: 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. 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.
3.1.
L'API de géolocalisation de HTML5
4.
L'API de géolocalisation de HTML5 utilise un des moyens disponibles (gps, wifi, 3G, IP), peut forcer l'utilisation du GPS, peut renvoyer à intervalle réguliers la position courante (utile pour faire du tracking), etc. Vous commencerez par lire cet article en français puis vous executerez sur votre PC et / ou sur devices mobiles les exemples de ce tutorial HTML5. Regardez notamment le dernier exemple avec une carte interactive, il possède une fonction drawPosition(position) que vous réutiliserez par la suite. Les curieux peuvent aller voir ce site qui est une référence sur l'utilisation de l'API de Google Maps : http://econym.org.uk/gmap/
4.1.
L'API des WebSockets et les librairies de plus haut niveau bâties au-dessus
5.
Vous allez utiliser des WebSockets dans la suite du TP, via un serveur web qui les supporte: le micro serveur NodeJS. Mais avant toute chose, vous allez lire dans cette présentation les principes des WebSockets ainsi qu'une rapide présentation des librairies socket.io et nowJS que nous allons utiliser. Ces dernières permettent une utilisation de plus haut niveau des WebSockets et assurent la compatibilité même avec des vieux navigateurs. Lire donc la partie "WebSockets" de cette présentation. Les plus curieux pourront lire dans le wikipedia anglais les articles sur les WebSockets, sur NodeJS, sur socket.io.
5.1.
Installation du serveur NodeJS et premiers tests
6.
Avant toute chose, il vous faut installer le serveur nodeJS et faire des tests pour vérifier qu'il fonctionne mais aussi pour comprendre comment on peut utiliser les WebSockets à l'aide de la librairie NowJS qui facilite énormément le développement d'applications client-serveur en JavaScript. Pour cela, vous allez suivre ce tutorial qui montre comment développer un programme de chat : Prenez le temps de comprendre comment l'exemple du chat fonctionne. N'hésitez pas à demander des explications si nécessaire.
6.1.
Faire en sort que NodeJS "serve" les pages HTML5 d'exemples de l'API d'orientation et de l'API de géolocalisation
7.
Nous vous avons préparé un petit projet pour nodeJS qui contient l'exemple à peine modifié de l'API d'orientation, dans lequel nous avons intégré le chat de la section précédente, et aussi ajouté une fonction permettant d'envoyer depuis la tablette l'orientation au PC via un appel de méthode distance. Récupérez le fichier suivant (note : il contient un répertoire node_modules pour windows, si vous êtes sur mac ou linux, reprenez celui de la question précédente). Récupérez et dézippez cette archive : TP_interactions.zip (1.8Mo) Dans ce répertoire, lancez la commande "node Server.js", le serveur se lance sur le port 80 de votre machine. Pour vérifier que le serveur fonctionne correctement, ouvrez la page pointée par le lien "je suis un PC" dans un onglet de votre navigateur, entrez un nom. Puis ouvrez un autre onglet et entrez un autre nom, testez le chat. Cela doit fonctionner.
7.1.
Tester l'interaction avec une tablette ou un smartphone
8.
Nous abordons ici un point un peu délicat car pour qu'une tablette puisse parler à un serveur situé sur votre machine, dans les locaux de l'EPU c'est un peu compliqué, c'est pour cela que votre enseignant a apporté un routeur WIFI. Suivez les étapes suivantes : Connectez vous au réseau local intitulé "DLINK", la clé est "61LeMoMagique07" Ce réseau local donne des adresse en 10.0.0.xxx, regardez quelle est l'adresse IP qui vous a été allouée (ipconfig /all sous windows, etc.) Depuis la tablette, invoquez le serveur depuis un navigateur web, par exemple lors des tests de ce TP j'ai invoqué http://10.0.0.101 et j'ai cliqué sur "je suis une tablette". Entre la même adresse dans un onglet du navigateur web tournant sur le PC, et cliquez sur "je suis un PC". Normalement vous devriez avoir le logo HTML5 qui s'affiche sur la tablette et sur le PC et lorsqu'on oriente la tablette, le logo doit bouger sur la tablette mais aussi sur le PC. Ouvrez un autre onglet avec la même adresse, les logos des deux onglets bougent en même temps... Essayez d'ouvrir cette page depuis un autre onglet d'un navigateur tournant sur un autre PC de la salle, regardez le résultat !!! Oui, les évènements sont broadcastés à tout le monde sauf à l'émetteur. Maintenant essayez de connecter une seconde tablette. Que se passe-t-il ?
8.1.
Pour terminer le TP : faire pareil avec la géolocalisation !
9.
Reprenez l'exemple qui utilisait l'API de géolocalisation en début de TP. Insérez dans la page Html pour tablette le code qui récupère la position géographique de la tablette. Juste cela. Affichez cette position en texte dans la page pour vérifier que cela fonctionne. Ajoutez dans le code serveur une fonction appelable depuis les clients, qui broadcaste la position recu, de la même manière qu'on a procédé avec l'orientation, Dans la page pc.html, récupérez la position et affichez là, affichez aussi le nom de la personne emettrice. Regardez les exemples en début de TP pour afficher la position sur une google map, Essayez en connectant plusieurs tablettes de récupérer les différentes positions et de les afficher. Dommage qu'on ne puisse pas accèder au réseau local en se promenant dehors avec un tel + GPS n'est-ce pas ? Si néanmoins cette matière vous a plus, vous pouvez heberger votre application chez un un des hébergeurs d'applis nodeJS comme nodester.com, no.de ou heroku.com. Ici un tutorial fait par un élève de l'an dernier pour héberger sur nodester L'application qu'il héberge est la suivante : http://mathieumiollan.nodester.com, un paint multi-participants.
« 50 précédents
50 suivants »
Sélectionnez les versions à comparer et cliquez sur 'Comparaison versions'.
Comparer
Date de révision
Modifié par
Résumé des modifications
Voir la version
05:11, 17 Oct 2013
MichelBuffa
aucun mot modifié
Voir la version
05:11, 17 Oct 2013
MichelBuffa
page créée, 1211 mots ajoutés
« 50 précédents
50 suivants »
Powered by
MindTouch Deki Open Source Edition
v.8.08
Flux RSS
Utilisateurs
Modèles
Plan du site
Pages populaires
A propos
Surveiller
Attacher fichier ou image
Accès restreint
Déplacer
Supprimer
Mots clés
Envoyer la page
Propriétés de la page
Page de discussion
Table des matières
1.1.
Introduction
2.
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.
2.1.
L'API d'orientation de HTML5
3.
Travail à faire: 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. 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.
3.1.
L'API de géolocalisation de HTML5
4.
L'API de géolocalisation de HTML5 utilise un des moyens disponibles (gps, wifi, 3G, IP), peut forcer l'utilisation du GPS, peut renvoyer à intervalle réguliers la position courante (utile pour faire du tracking), etc. Vous commencerez par lire cet article en français puis vous executerez sur votre PC et / ou sur devices mobiles les exemples de ce tutorial HTML5. Regardez notamment le dernier exemple avec une carte interactive, il possède une fonction drawPosition(position) que vous réutiliserez par la suite. Les curieux peuvent aller voir ce site qui est une référence sur l'utilisation de l'API de Google Maps : http://econym.org.uk/gmap/
4.1.
L'API des WebSockets et les librairies de plus haut niveau bâties au-dessus
5.
Vous allez utiliser des WebSockets dans la suite du TP, via un serveur web qui les supporte: le micro serveur NodeJS. Mais avant toute chose, vous allez lire dans cette présentation les principes des WebSockets ainsi qu'une rapide présentation des librairies socket.io et nowJS que nous allons utiliser. Ces dernières permettent une utilisation de plus haut niveau des WebSockets et assurent la compatibilité même avec des vieux navigateurs. Lire donc la partie "WebSockets" de cette présentation. Les plus curieux pourront lire dans le wikipedia anglais les articles sur les WebSockets, sur NodeJS, sur socket.io.
5.1.
Installation du serveur NodeJS et premiers tests
6.
Avant toute chose, il vous faut installer le serveur nodeJS et faire des tests pour vérifier qu'il fonctionne mais aussi pour comprendre comment on peut utiliser les WebSockets à l'aide de la librairie NowJS qui facilite énormément le développement d'applications client-serveur en JavaScript. Pour cela, vous allez suivre ce tutorial qui montre comment développer un programme de chat : Prenez le temps de comprendre comment l'exemple du chat fonctionne. N'hésitez pas à demander des explications si nécessaire.
6.1.
Faire en sort que NodeJS "serve" les pages HTML5 d'exemples de l'API d'orientation et de l'API de géolocalisation
7.
Nous vous avons préparé un petit projet pour nodeJS qui contient l'exemple à peine modifié de l'API d'orientation, dans lequel nous avons intégré le chat de la section précédente, et aussi ajouté une fonction permettant d'envoyer depuis la tablette l'orientation au PC via un appel de méthode distance. Récupérez le fichier suivant (note : il contient un répertoire node_modules pour windows, si vous êtes sur mac ou linux, reprenez celui de la question précédente). Récupérez et dézippez cette archive : TP_interactions.zip (1.8Mo) Dans ce répertoire, lancez la commande "node Server.js", le serveur se lance sur le port 80 de votre machine. Pour vérifier que le serveur fonctionne correctement, ouvrez la page pointée par le lien "je suis un PC" dans un onglet de votre navigateur, entrez un nom. Puis ouvrez un autre onglet et entrez un autre nom, testez le chat. Cela doit fonctionner.
7.1.
Tester l'interaction avec une tablette ou un smartphone
8.
Nous abordons ici un point un peu délicat car pour qu'une tablette puisse parler à un serveur situé sur votre machine, dans les locaux de l'EPU c'est un peu compliqué, c'est pour cela que votre enseignant a apporté un routeur WIFI. Suivez les étapes suivantes : Connectez vous au réseau local intitulé "DLINK", la clé est "61LeMoMagique07" Ce réseau local donne des adresse en 10.0.0.xxx, regardez quelle est l'adresse IP qui vous a été allouée (ipconfig /all sous windows, etc.) Depuis la tablette, invoquez le serveur depuis un navigateur web, par exemple lors des tests de ce TP j'ai invoqué http://10.0.0.101 et j'ai cliqué sur "je suis une tablette". Entre la même adresse dans un onglet du navigateur web tournant sur le PC, et cliquez sur "je suis un PC". Normalement vous devriez avoir le logo HTML5 qui s'affiche sur la tablette et sur le PC et lorsqu'on oriente la tablette, le logo doit bouger sur la tablette mais aussi sur le PC. Ouvrez un autre onglet avec la même adresse, les logos des deux onglets bougent en même temps... Essayez d'ouvrir cette page depuis un autre onglet d'un navigateur tournant sur un autre PC de la salle, regardez le résultat !!! Oui, les évènements sont broadcastés à tout le monde sauf à l'émetteur. Maintenant essayez de connecter une seconde tablette. Que se passe-t-il ?
8.1.
Pour terminer le TP : faire pareil avec la géolocalisation !
9.
Reprenez l'exemple qui utilisait l'API de géolocalisation en début de TP. Insérez dans la page Html pour tablette le code qui récupère la position géographique de la tablette. Juste cela. Affichez cette position en texte dans la page pour vérifier que cela fonctionne. Ajoutez dans le code serveur une fonction appelable depuis les clients, qui broadcaste la position recu, de la même manière qu'on a procédé avec l'orientation, Dans la page pc.html, récupérez la position et affichez là, affichez aussi le nom de la personne emettrice. Regardez les exemples en début de TP pour afficher la position sur une google map, Essayez en connectant plusieurs tablettes de récupérer les différentes positions et de les afficher. Dommage qu'on ne puisse pas accèder au réseau local en se promenant dehors avec un tel + GPS n'est-ce pas ? Si néanmoins cette matière vous a plus, vous pouvez heberger votre application chez un un des hébergeurs d'applis nodeJS comme nodester.com, no.de ou heroku.com. Ici un tutorial fait par un élève de l'an dernier pour héberger sur nodester L'application qu'il héberge est la suivante : http://mathieumiollan.nodester.com, un paint multi-participants.
effacer le message
voir détails
Ce message disparaitra dans
secondes
Le temporisateur de message a été arrêté
Affichage Détails: