MBDS Casablanca 2016-2017 JavaScript/HTML5/WebApps

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 2 : introduction au canvas/dessin/animation et l'objet en JavaScript

Exemple 1 vu en cours (Gabriel Mopolo animé dans un canvas, avec un modèle objet) : http://jsbin.com/qupoyus/edit?js,console,output

Même exemple mais avec Mopolo qui tourne sur lui-même et qui rebondit sur les murs: http://jsbin.com/gafegud/51/edit?js,console,output

Exemples sur les objets :

1. Exemples sans héritage : http://jsbin.com/yiqusa/edit?js,console,output

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.

1. 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.
2. Mettez un canvas dans le HTML, taille par exemple 400x400
3. Faites apparaitre une bordure (ajouter une règle CSS)
4. Ajoutez dans le JavaScript une fonction init() appelée quand la page est chargée
5. Appliquez les bonnes pratiques vues en cours pour déclarer un canvas, un contexte graphique, etc.
6. Dessinez un rectangle noir en x=10, y=10, taille 100x100 pour vérifier que tout marche.
7. 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
8. Ecrivez une boucle d'animation qui dessine 60 fois par seconde ce rectangle, vous l'appelez depuis la fonction init()
9. 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
10. 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)

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.
2. 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.
3. Maintenant, au lieu de suivre Gabriel Mopolo, la flèche qui part de 0, 0, doit suivre la souris, plus Gabriel Mopolo !
4. 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.
5. Créez un tableau des flèches avec var tabFleches = [];
6. 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({...});
7. Vérifier après avoir dessiné plusieurs flèches que le tableau contient bien les éléments corrects (utilisez la console de debug)
8. 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.
9. 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:

1. 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...
2. 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.
3. 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:

• Correction partielle du TP de la séance 3 (tableau de flèches, ellipses): http://jsbin.com/nizujuz/edit?js,output

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 !