Accueil > Intranet Michel Buffa > Technologies Web 2 - Master 2 Miage

Technologies Web 2 - Master 2 Miage

De $1

Master 2 Intense visio mardi 24/11 de 8h à 10h


Sujet : Zoom meeting invitation - Réunion Zoom de Michel Buffa

Heure : 24 nov. 2020 08:00 AM Paris


Participer à la réunion Zoom

https://univ-cotedazur.zoom.us/j/820...NSMUJQZ2V1UT09


ID de réunion : 820 5064 4949

Code secret : 852565

Introduction

Dans ce cours nous continuerons l'exploration des technologies front-end, back-end avec nodeJS, BDs NoSQL, hébergement dans le cloud etc.

Séance 1 : intoduction aux Web Components (standards du W3C)

Supports de cours :

Vidéos des cours avec le MBDS

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

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

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

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

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

TP1 : écriture de lecteurs multimédia améliorés sous forme de Web Components

Vous le savez, on peut lire des fichiers audio ou vidéo en HTML5 à l'aide des tags <audio> et <video>. Ces éléments viennent avec une très riche API qui permet de les contrôler via JavaScript.

L'API de ces éléments  permet de récupérer le lecteur audio ou vidéo sous la forme d'un objet, et d'intéragir avec lui en modifiant ses propriétés (par ex en changeant la propriété currentTime on va pouvoir lire d'autres parties du fichier audio ou vidéo), en appelant des méthodes (play, stop, pause, etc.), mais aussi en écoutant les événements qu'il émet (onprogress, onload, etc.)

Vous trouverez de nombreux exemples montrant comment utiliser cette API dans le Module 2.2 du MOOC "HTML5 Coding essentials and best practices".

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...
  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...

Séance 2 : introduction à Angular

Séance 3 : suite intro (passage de données père et fils -> autre, début services)

 

Mots clés:
FichierTailleDateAttaché par 
 tp2_angular.zip
Aucune description
361.18 Ko07:32, 23 Nov 2020MichelBuffaActions
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.