Programmable Web client-side 2016-2017

Séance 1 : état des lieux, standards du Web, de l'industrie, etc.

• Support de cours / transparents: contiennent de très nombreux liens...

Séance 2 : présentation de 53JS + TP géolocalisation WebSockets (pour sujet projet 1) et multimédia (pour sujet 2)

Les sujets ont été décrits dans les grandes lignes à la fin des transparents du support de cours de la séance 1.

TP WebSockets / Cartographie

• Vous inscrire aux MOOCs HTML5 part 1 et HTML5 part 2 sur la chaine W3Cx, vous ne les suivrez pas intégralement mais dans le cours on risque de se référer à certains chapitres. Jetez un oeil rapide aux titres des différents chapites (ce sont les "Weeks")
   
• Faire le TP sur les Web Sockets, technologie nécessaires pour le sujet No 1 (jeu de piste), servira à échanger les positions entre joueurs, à implémenter le chat, etc.
  
  
  • Support de cours : transparents ici 
  • TP sur les WebSockets version simple (chat multi participants mais sans salles virtuelle, montre aussi comment syncrhoniser des positions dans un jeu).
    • Autre version du TP, avec jQuery et chat multiroom. 
       
• Etudier les exemples dans le MOOC HTML5 part 1 sur la géolocalisation, technologie nécessaire au sujet No 1.
   
• Essayer de mettre une carte dans les exemple de chat et de visualiser votre position sur la carte.
   
• Testez avec plusieurs personnes connectées, et faites en sorte que chacun puisse voir la position des autres sur la carte. Vous "tricherez" en donnant de fausses positions pour chaque personne en modifiant les Longitudes et Latitudes depuis l'outil de développement de votre browser (tester donc avec plusieurs browsers ou avec plusieurs fenêtres privées). L'outil de développement apparait avec ctrl-shift-i ou cmd-alt-i sur Mac.
   
• Les "bons" peuvent suivre un des tutos proposés dans les transparents, sur React, Angular 1 ou 2, Polymer, ou encore étudier les nouveautés de ES2016/ES7 (les liens sont dans les transparents). Vous pouvez voir votre enseignant pour un ensemble de vidéos (30) sur ReactJS.

TP multimédia

Exemple/preuve de concept : http://jsbin.com/moyiyu/edit?css,js,console,output

Suivre :

• la Week 2 du MOOC HTML5 part 1 sur le multimedia, et
• la Week1 du MOOC HTML5 part 2 aussi sur le multimedia avancé

Réfléchir à un outil d'annotations de vidéo (par exemple, tablette graphique à la BeinSport), avec lequel on pourra :

• Faire pause sur une vidéo
• Dessiner des flèches, ellipses animées, textes, autres...
• Reprendre la vidéo
• Remettre des annotations graphiques, etc.
• On pourra par la suite rejouer la vidéo et il faudra que les annotations graphiques apparaissent, que la vidéo se mette en pause, qu'on puisse repartir etc.

Pour réaliser cela on va utiliser une pratique très puissante de HTML5 :

• Utiliser un <canvas> HTMK5 pour dessiner l'image courante de la vidéo (voir Week3/4 du MOOC HTML5 part 1 sur le canvas)
• Puisque l'image courante est dessinée en temps réel alors, on a l'impression d'avoir deux fois la vidéo sur le même écran, sauf qu'on pourra dessiner sur la seconde avec l'API du canvas HTML5.
• On pourra finalement cacher la "vraie" video via CSS
• On utilisera l'API JavaScript de l'élément <video> comme expliqué dans la Week2 du MOOC HTML5 part 1, pour contrôler la vidéo depuis des boutons customs, pour écouter des évènements (notamment l'évènement 'timeupdate').
• On pourra utiliser les techniques plus avancées de syncrhonisation via des fichiers .webVTT (voir le chapitre dédié dans le MOOC HTML5 part 2, Week1, sur "syncrhoniser une vidéo avec des éléments extérieurs"
•