Technologies Web 2 - Master 2 Miage

Vidéos des cours avec le MBDS

1ère séance le vendredi 30/10/2020 (Web Components)

• Vidéo 1 : 1ère partie du cours du matin 
• Vidéo 2 : seconde partie du cours du matin
• Vidéo 3 : le cours et le TP de l'après-midi 

2ème séance  le mardi 17/11/2020 (Intro à Angular)

• Vidéo 1 (8h30 - 10h30) 
• Vidéo 2 (10h45 - 12h45) 

Vidéos des cours avec les INTENSE

(la 1ère séance a eu lieu en présenciel)

2ème séance le mardi 3/11/2020 sur les WebComponents

• Vidéo sur YouTube.

3ème séance le mardi 17/11/2020 (Intro à Angular 1/3)

• Vidéo sur YouTube (13h-15h30)

4ème séance le lundi 23/11 de 8h30 à 10h30 (Intro à Angular 2/3)

• Vidéo sur YouTube (8h30-10h30) 

6ème séance le lundi 30/11 de 8h15 à 10h45 (Routeur Angular)

• Vidéo sur YouTube (8h15-10h45) 

7ème séance le lundi 8/12 de 8h à 10h (module HttpClient Angular)

• Vidéo sur YouTube (8h-10h) 

Travail à faire

1. Créer une  page HTML avec à l'intérieur un lecteur audio ou un lecteur video, vous pourrez reprendre le code d'exemples du MOOC présentant l'API des lecteurs audio et vidéo
    
2. Ajoutez à ce lecteur des boutons personnalisés pour play, stop, pause, retour à zéro, avancer 10s, reculer 10s, passer le lecteur en mode "loop" (à la fin de la vidéo ça recommence au début) etc. (vous pouvez ajouter d'autres choses...). Les boutons doivent être fonctionnels.
    
3. Reprenez le cours sur les WebComponents (transparents + le module 4.2 du MOOC HTML5 Apps and Games) et essayez de transformer le nouveau lecteur amélioré en <my-player src="...." loop="...">titre du lecteur</myplayer>.
   
   En ajoutant ce tag dans une page HTML cela doit fonctionner. Vous mettrez l'ensemble des codes JS  du WebComponent dans un fichier myPlayer/index.js. C'est ce fichier que vous importerez comme un JS module dans la page HTML pour que cela fonctionne.
    
4. CORRECTION simple steps 1-2-3 à refaire en mieux et plus beau ! https://mega.nz/file/21ImgL6a#vv6LXLHDjkX7TfJjv3zJRQlcH7G5hRGu0DOeBG3ej20
    
5. Maintenant, regardez les module 1.5.1 à 1.5.4 du MOOC "HTML5 Apps and Games" sur l'API WebAudio. Prenez un peu de temps pour lire les sections jusqu'à l'exemple qui ajoute un equalizer de fréquences.
    
6. Vous ajouterez dans le code de votre lecteur WebComponent de quoi régler le volume, la balance gauche/droite, et un égaliseur. Si vous vous sentez vous pourrez aussi rajouter un réglage de la réverbération comme proposé dans un autre exemple.
    
7. On va maintenant cacher le lecteur audio et utiliser la librairie webaudiocontrols qui fournit des WebComponents pour l'audio (boutons rotatifs etc.). Vous importerez donc le fichier webaudiocontrols.js dans le code JavaScript de votre Web Component (import "lib/webaudiocontrols.js" par exemple, après avoir récupéré le fichier). La documentation d'utilisation montre comment ajouter des boutons rotatifs, des sliders, des switches, etc. par exemple pour le réglage du volume, de la balance, etc. Dans la doc on montre comment récupérer des images custom pour les boutons, sliders, etc. Il y a un très large choix (des centaines de spritesheets), à vous de vous amuser...
   • Pour transformer URL relatif en absolu pour les images des knobs (boutons rotatifs), regardez cet exemple : https://github.com/53js/webaudiomodule/blob/master/packages/faustPingPongDelay/plugin/Gui/Gui.js
   • Pour les plus curieux, un tuto pour générer soi-même ses propres spritesheets webaudiocontrols : https://www.youtube.com/watch?v=z8_0_cJogP4
      
8. Maintenant, continuez la lecture du cours sur la WebAudio API et lisez les modules 1.5.5 à 1.5.7 sur les visualisations du signal audio. Vous ajouterez à votre WebComponent un ou plusieurs canvas pour visualiser tout d'abord les fréquences. Testez le résultat, n'oubliez pas de jouer sur vos réglages pour voir si cela affecte bien la visualisation.
    
9. Ajoutez maintenant la visualisation de la forme d'onde et des volumes. Ce serait bien d'avoir un switch fait avec webaudio controls pour passer d'une visualisation des fréquences à une visualisation de la forme d'onde (un toggle). J'aimerais vraiment avoir une visualisation des volumes comme dans le cours mais aussi à l'aide de vu-mètres à aiguille utilisant un webaudiocontrol comme celui présenté ici à la 4ème ligne, 1ère colonne (le Vintage_VuMeter).
    
10. Alors, avez-vous bien conçu votre WebComponent ? Avez-vous pensé à proposer une API pour que lui-aussi puisse être controlé de l'extérieur par du code JavaScript (par exemple, par quelqu'un qui l'aurait inclu dans sa propre page et qui voudrait l'augmenter, comme vous avez fait avec le WebComponent standard -car cela en est bien un- <audio> ou <video> ?
     
11. Avez-vous utiliser le MVC (le fait que certains attributs puissent être "surveillés"). Par exemple, si on change par programme le volume, il faudrait que le bouton de volume tourne dans la GUI. Et oui, si vous rendez votre composant controllable via une API, vous allez être obligé de mettre en place ce système ! Essayez d'exposer au moins les réglages de volume et de balance dans une API (méthodes avec getter et setters + attributeChangeCallback, voir les transparents du cours).

Voilà, cela fait pas mal de choses à faire.... c'est un bon départ avant d'attaquer les frameworks plus connus...