 |
Programmable Web client-side 2016-2017
De $1
Table des matières- 1. Séance 1 : état des lieux, standards du Web, de l'industrie, etc.
- 2. Séance 2 : présentation de 53JS + TP géolocalisation WebSockets (pour sujet projet 1) et multimédia (pour sujet 2)
- 3. Séance 3 : promesse ES6/7 et divers
- 4. Séance 4 : upload de fichiers en multipart, drag'n'drop, file API, XhR2, etc.
- 4.1. Upload de formulaires multipart avec fichiers attachés
- 4.2. Compléments sur l'héritage en ES5 mais aussi en ES6/ES2016 + modularisation avec Black Box Model (définir des APIs en JavaScript)
- 4.2.1. Objet
- 4.3. Exemple JsBin avec les différentes syntaxes (objets singleton statiques, fonctions constructeurs, black box model, pseudo classes ES2016): http://jsbin.com/wawehis/edit?js,console
- 4.3.1. Héritage :
- 4.4. Le plus simple pour commencer est de tester des exemples simples que je vous ai préparé sur JsBin: Exemple 1 qui couvre les cas "classiques" : classes et sous-classes, héritage de propriété et de méthodes. Différentes syntaxe d'appel des constructeurs hérités (avec et sans utilisation de la méthode call) Exemple 2 qui montre comment redéfinir une méthode héritée sans changer son nom, et en gardant la possibilité d'appeler la méthode de la classe dont on hérite (équivalent du super.methode...) Exemple 3 avec le Black Box model (qui n'est pas de l'héritage mais de la composition, on peut quand même simuler l'héritage et la redéfinition, vous verrez, mais l'opérateur instanceof ne donnera plus l'appartenance des instances à plusieurs types en même temps). Pour en savoir plus sur la l'héritage et la définition de pseudo-classes avec la syntaxe JavaScript classique, voir ce cours en français sur le Mozilla Developer Network Exemples 4 avec ES6, la nouvelle version de JavaScript. Attention, ES6 ne support pas vraiment les classes, il s'agit ici d'un "sucre syntaxique" permettant d'avoir une syntaxe plus proche de ce que l'on connait en Java/C#, mais en coulisse, on a toujours affaire à des "prototypes". Ici un tutoriel plus détaillé pas trop dur à digérer... Et ici un article très détaillé si vous voulez connaitre toutes les subtilités de cette syntaxe
- 4.5. TP à faire (très court)
- 5. Resources utiles pour le mini projet
- 1. Séance 1 : état des lieux, standards du Web, de l'industrie, etc.
- 2. Séance 2 : présentation de 53JS + TP géolocalisation WebSockets (pour sujet projet 1) et multimédia (pour sujet 2)
- 3. Séance 3 : promesse ES6/7 et divers
- 4. Séance 4 : upload de fichiers en multipart, drag'n'drop, file API, XhR2, etc.
- 4.1. Upload de formulaires multipart avec fichiers attachés
- 4.2. Compléments sur l'héritage en ES5 mais aussi en ES6/ES2016 + modularisation avec Black Box Model (définir des APIs en JavaScript)
- 4.2.1. Objet
- 4.3. Exemple JsBin avec les différentes syntaxes (objets singleton statiques, fonctions constructeurs, black box model, pseudo classes ES2016): http://jsbin.com/wawehis/edit?js,console
- 4.3.1. Héritage :
- 4.4. Le plus simple pour commencer est de tester des exemples simples que je vous ai préparé sur JsBin: Exemple 1 qui couvre les cas "classiques" : classes et sous-classes, héritage de propriété et de méthodes. Différentes syntaxe d'appel des constructeurs hérités (avec et sans utilisation de la méthode call) Exemple 2 qui montre comment redéfinir une méthode héritée sans changer son nom, et en gardant la possibilité d'appeler la méthode de la classe dont on hérite (équivalent du super.methode...) Exemple 3 avec le Black Box model (qui n'est pas de l'héritage mais de la composition, on peut quand même simuler l'héritage et la redéfinition, vous verrez, mais l'opérateur instanceof ne donnera plus l'appartenance des instances à plusieurs types en même temps). Pour en savoir plus sur la l'héritage et la définition de pseudo-classes avec la syntaxe JavaScript classique, voir ce cours en français sur le Mozilla Developer Network Exemples 4 avec ES6, la nouvelle version de JavaScript. Attention, ES6 ne support pas vraiment les classes, il s'agit ici d'un "sucre syntaxique" permettant d'avoir une syntaxe plus proche de ce que l'on connait en Java/C#, mais en coulisse, on a toujours affaire à des "prototypes". Ici un tutoriel plus détaillé pas trop dur à digérer... Et ici un article très détaillé si vous voulez connaitre toutes les subtilités de cette syntaxe
- 4.5. TP à faire (très court)
- 5. Resources utiles pour le mini projet
Séance 1 : état des lieux, standards du Web, de l'industrie, etc.
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).
- 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"
-
Séance 3 : promesse ES6/7 et divers
Séance 4 : upload de fichiers en multipart, drag'n'drop, file API, XhR2, etc.
Upload de formulaires multipart avec fichiers attachés
Compléments sur l'héritage en ES5 mais aussi en ES6/ES2016 + modularisation avec Black Box Model (définir des APIs en JavaScript)
-
Objet - Le plus simple pour commencer est de tester des exemples simples que je vous ai préparé sur JsBin:
- Exemple 1 qui couvre les cas "classiques" : classes et sous-classes, héritage de propriété et de méthodes. Différentes syntaxe d'appel des constructeurs hérités (avec et sans utilisation de la méthode
call)
- Exemple 2 qui montre comment redéfinir une méthode héritée sans changer son nom, et en gardant la possibilité d'appeler la méthode de la classe dont on hérite (équivalent du
super.methode...)
- Exemple 3 avec le Black Box model (qui n'est pas de l'héritage mais de la composition, on peut quand même simuler l'héritage et la redéfinition, vous verrez, mais l'opérateur instanceof ne donnera plus l'appartenance des instances à plusieurs types en même temps).
- Pour en savoir plus sur la l'héritage et la définition de pseudo-classes avec la syntaxe JavaScript classique, voir ce cours en français sur le Mozilla Developer Network
TP à faire (très court)
- Testez cet exemple qui fait de l'upload de fichiers. Pensez à installer les modules express et multer dans le répertoire avant d'exécuter.
- Complétez-le pour qu'il fonctionne aussi avec du drag'n'drop (voir le MOOC Week 3)
- Complétez-le pour qu'on puisse aussi avoir des champs de formulaire en plus des fichiers ajoutés, quand on soumet le formulaire, ça envoie le tout, et on le récupère côté serveur.
Resources utiles pour le mini projet
Resource pour ceux qui font le jeu de piste en application hybride (Adobe Cordoba) et qui veulent que l'appli tourne en tâche de fond et continue à envoyer des positions même quand le téléphone se met en veille : lien pour le plugin de tâche en arrière plan pour Cordova:
|
Vous n'êtes pas connecté. Connexion