![](/skins/common/icons/icon-trans.gif)
|
MBDS Casablanca 2016-2017 JavaScript/HTML5/WebApps
De $1
Séance 1 : intro sur les standards du Web, HTML5, JavaScript etc.
Supports de cours :
- MOOCS sur HTML5 (part 1 et part 2), sur W3Cx Inscrivez-vous à HTML5 part 1 et part 2. Il faudra me donner vos emails d'inscription + suivre HTML5 part 1/Week 2, 3 et 4, et HTML5 part 2 Week 1 sauf WebAudio. Je regarderai vos réponses aux quizzes de fin de chapitre, qui compteront dans la note finale de ce module.
- Transparents HTML5
Exemples étudiés en cours: MBDS CASA 2016-2017.zip
Séance 3: gestion des événements, interaction JavaScript et éléments de formulaires
Exemples d'écouteurs d'événement vus en cours (mais attention, dans le MOOC Week 4 et Week 5 vous avez bcp plus d'information): http://jsbin.com/qonexal/2/edit?js,console,output
Outil sympa vu en cours pour jouer avec CSS en temps réel: http://liveweave.com/
Travail à faire:
1 - Vérifier que vous avez compris les règles de base pour travailler.
- Créer un nouveau projet JsBin (c'est plus simple) -vérifier que vous êtes bien enregistrés (créez un compte) sinon vous risquez de perdre votre travail.
- Mettez un canvas dans le HTML, taille par exemple 400x400
- Faites apparaitre une bordure (ajouter une règle CSS)
- Ajoutez dans le JavaScript une fonction init() appelée quand la page est chargée
- Appliquez les bonnes pratiques vues en cours pour déclarer un canvas, un contexte graphique, etc.
- Dessinez un rectangle noir en x=10, y=10, taille 100x100 pour vérifier que tout marche.
- Créez un objet singleton var rectangle = {...} et mettez à l'intérieur :
- Les propriétés x, y, l, h, couleur du rectangle
- Une méthode draw() qui le dessine à sa position courante
- Une méthode move(x, y) qui change sa position x, y
- Ecrivez une boucle d'animation qui dessine 60 fois par seconde ce rectangle, vous l'appelez depuis la fonction init()
- Le recangle doit s'afficher 60 fois par seconde. Maintenant modifiez la boucle d'animation pour qu'il se déplace vers la droite en ajoutant un rectangle.x ++; dans la boucle
- Reprenez l'exemple de Gabriel Mopolo animé et regardez comment on a fait la detection de collision et comment on l'a fait rebondir.
2 - Regardez dans le MOOC où se trouve une fonction qui permet de dessiner des flèches (aide: c'est dans la Week 3 du MOOC HTML5 part 1)
- Dans la boucle d'animation, dessinez 60 fois par seconde une flèche rouge qui va de 0, 0 à la position de votre rectangle qui rebondit.
- Ajoutez, en vous inspirant de l'exemple vu en cours au début de l'heure, des écouteurs pour les clics souris, pour le déplacement de la souris. Mettez des console.log dans les écouteurs/callbacks de ces événements et vérifiez qu'on détecte bien les déplacements de la souris (coordonnées x et y du pointeur correctes) et les clicks.
- Maintenant, au lieu de suivre Gabriel Mopolo, la flèche qui part de 0, 0, doit suivre la souris, plus Gabriel Mopolo !
- Maitenant, on ne dessine plus la flèche depuis (0,0) jusqu'au curseur, mais on veut le comportement suivant:
- Quand on clique et qu'on déplace la souris en gardant le bouton cliqué, la flèche se dessine depuis l'endroit où on a cliqué, jusqu'à la position du curseur. Tant qu'on ne relâche pas le bouton, la flèche suit le curseur.
- Quand on relâche le bouton, la flèche reste en place et ne suit plus le curseur.
- Si on reclique ailleurs, la flèche d'avant n'apparait plus mais on en redessine une autre.
- Créez un tableau des flèches avec var
tabFleches = []; - Maintenant, quand on relâche le curseur après avoir dessiné une flèche, on ajoute dans le tableau un objet de cette forme:
{x1:valeur, y1=valeur, x2:valeur, y2:valeur, couleur:valeur} , on pourra utiliser la méthode push(element) des tableaux: tabFleches.push({...}); - Vérifier après avoir dessiné plusieurs flèches que le tableau contient bien les éléments corrects (utilisez la console de debug)
- Maintenant ecrire une fonction
dessineToutesLesFleches qui va parcourir le tableau et dessiner toutes les flèches précédentes. Cette fonction sera appelée par la boucle d'animation. - On pourrait utiliser une fonction constructeur pour modéliser les flèches, ou une classe ES2015. Pourquoi ne pas essayer ?
3 - ajout d'éléments de formulaire pour paramétrer la création des flèches:
- Ajoutez en dessous, ou à côté du canvas, des éléments de formulaire. Rappel :
- <input type="color"> permet de choisir une couleur,
- <input type="number"> permet de choisir un nombre,
- <input type="range"> permet de faire apparaitre un slider
Vous pourrez regarder la semaine 5 du MOOC HTML5 part 1 consacré aux formulaires, pour voir comment utiliser ces éléments de formulaire et comment récupérer leur valeur en JavaScript. Quel est le type d'événement qu'il faut écouter ? Comment on récupère la valeur ? Faites des console.log dans les écouteurs/callbacks pour vérifier que ça marche... - Maintenant faites en sorte que la flèche que l'on dessine soit de la couleur qu'on a choisi dans le selecteur de couleur, que son épaisseur de trait soit en rapport avec le slider (input type="range") de choix d'épaisseur, etc.
- Vous rajouterez les attributs qu'il faut dans les modèles objets des flèches.
Séance 4: tableaux, API multimedia, interactions canvas et video
Exemples vus en cours:
Pour les curieux qui veulent voir un jeu desktop + mobile (celui-là: http://mainline.i3s.unice.fr/mooc/SkywardBound/): les sources du jeu du lapin qui saute sur des boules de Noël (le lancer avec un serveur web, avec http://, je ne suis pas sûr qu'il marche avec file://): gameForMooc.zip
Ce jeu respecte les bonnes pratiques données dans la Week 2 du cours HTML5 part 2 intulée "HTML5 game programming".
Travail à faire :
- En vous inspirant de la correction ci-dessus, finir le TP d'hier,
- Rajouter un moyen de choisir si on dessine des ellipses ou des cercles, dans un premier temps, en mode "flèche" on dessine une flèche par clic et drag de la souris, en mode ellipse on dessine une ellipse de taille et couleur fixe.
- Maintenant on veut pouvoir choisir le rayon de l'ellipse à la souris avec clic et drag
- Gérer un tableau des ellipses comme on a fait pour le tableau des flèches.
Séance 5: début du mini projet, API vidéo
TP:
- Quelques éléments de l'API JavaScript de l'élément <video> (étudié dans le MOOC HMTL5 partie 1 Week 2 et HTML5 partie 2 Week 1): http://jsbin.com/wokexa/edit?console,output
Cet exemple montre comment : mémoriser des temps d'arrêt dans une vidéo, pour que quand la vidéo est rejouée, elle s'arrête là où on mémorisé des temps d'arrêt. - Comment sauvegarder des objets de manière persistente, dans le navigateur,
- Comment on pourrait les envoyer en Ajax sur un Serveur, et les récupérer.
DATE DE RENDU : LE 1er Mars 2017 !!!!
Sujet 1: faire un logiciel de dessin, mais intégrant des animations:
ICI UNE PAGE AVEC PLEIN DE LOGICIELS DE PAINT DONT CERTAINS SONT ANIMES (pour piquer des idées) : http://smashinghub.com/10-best-html5...-designers.htm
Truc fait en cours (rectangle qui suite la souris, avec calcul de l'angle entre la souris et un rectangle, puis calcul des déplacements en fonction de l'angle, pour que ça suive la souris) : http://jsbin.com/saxaju/edit?js,console,output
- Vous continuerez les TPs vus en cours, mais en ajoutant de nombreuses options pour dessiner de multiples formes:
- Cercles, en fil de fer ou plein, avec un contour ou pas,
- Lignes
- Flèches
- Texte
- Etoiles (voir cet exemple vu en cours: http://jsbin.com/nizujuz/edit?js)
- Triangles
- Formes prédéfinies (Gabriel Mopolo par exemple)
- On pourra choisir les épaisseurs, les couleurs. Si vous lisez le MOOC HTML5 part 1, semaine 3, vous verrez des exemples pour faire des dégradés, des textures, des ombres, etc.
- J'aimerais aussi des formes animées: des étoiles qui tournent, des objets qui changent de couleur, des flèches qui grandissent et rapetissent, etc.
- Si c'est interactif, tant mieux: je clique sur un bouton pour choisir "étoile", je choisis dans des petits éléments de formulaires spécifiques la couleur, l'épaisseur du trait, le nombre de branches, puis je clique pour choisir l'emplacement, je garde le bouton enfoncé et je déplace la souris pour règler la taille, je lâche: j'ai une étoile dans mon canvas. Comme on a fait pour les flèches !
Sujet 2: Annotation de vidéos, sujet complémentaire du sujet 1, pour les plus forts...
Mode édition de vidéo
- Maintenant on veut annoter une vidéo
- On dessine la vidéo en temps réel dans le canvas (comme image de fond) en s'inspirant e l'exemple vu en cours.
- On dessine des objets animés par dessus (cf sujet 1)
- On peut arrêter la vidéo avec un bouton custom "play/pause".
- Quand on est en pause, on peut dessiner sur la vidéo. On enregistre les éléments dessinés (flèches, ellipses, etc.), avec en plus le temps où ils devront être dessinés (c'est le temps courant dans la vidéo).
- Si on clique sur le bouton play/pause pour que la vidéo reprenne, les objets disparaissent de l'écran.... si on repause la vidéo, on revient à l'étape précédente: on peut dessiner des objets qu'on ajoutera dans un tableau avec le temps courant etc....
Mode lecture
Quand on relira la vidéo, on utilisera un événement timeupdate avec un écouteur pour avoir un bout de code qui sera appelé régulièrement. On récupérera le temps dans cet écouteur (propriété currentTime de l'élément video). Quand la vidéo atteint un temps où on avait fait pause et dessiné des objets, la vidéo s'arrête.
Là on affiche un bouton "continuer". Si on clique dessus la vidéo reprend et les objets dessinés disparaissent. La lecture continue jusqu'au prochain arrêt prévu, etc...
Options pour les meilleurs:
- Au lieu que les objets disparaissent, on veut pouvoir indiquer quand on les créée le temps pendant lequel ils seront visibles. Par exemple on dessine une flèche visible 4 secondes. Quand la vidéo en lecture est en pause, la flèche apparait, quand on reprend elle reste 4s.
- On voudrait visualiser et éditer les objets en cours (comme dans un outil de montage vidéo)... avoir une timeline avec le temps en horizontal, et des rectangles dessinés qui correspondent aux objets dessinés, la largeur du rectangle indique la durée. Y'a bcp de travail, mais si vous êtes inspirés....
|