Master Miage IA2 2020-2021 Technologies Web

Supports de cours :

• Transparents de présentation¹² 
• Module 4.2 du MOOC "HTML5 Apps and Games"¹³ consacré aux Web Components. 
  
   
• Vidéo de la séance de 8h15 à 10h45 du 14/12/2020¹⁴ 

TP1 : écriture d'un générateur de logos

Vous le savez, on peut faire de très jolies choses pour transformer un texte (une chaîne de caractères) en logo coloré, texturé, avec des bordures, des ombres, des animations etc. Uniquement avec HTML et CSS ont peut faire des choses assez impressionnantes. Mais si on met JavaScript et si on utilise par exemple le canvas HTML5 alors on peut faire des animations et des effets encore plus complexes.

L'idée de ce TP est de commencer à voir comment écrire un composant <app-logo> qui accepte un certain nombres d'attributs, par exemple :

• taille, couleur, couleur bordure, texture, transparence texture, ombre, animation (="rebond" ou "rotationZ", etc.)
• Et affiche aussi (plus tard optionnellement) quelques champs <input> pour pouvoir aussi modifier cela une fois le logo affiché.

Dans un premier temps on génèrera le logo en utilisant depuis la classe JS du WebComponent l'attribut style de l'élément HTML utilisé dans le template (un <span> ou un <div> par exemple)... dans un second temps vous essaierez d'animer le logo (toujours via CSS)

Enfin, et ce sera à rendre pour la rentrée, vous ajouterez une option pour un logo sous forme de canvas HTML5 et proposerez des animations plus évolués avec des effets plus rigolos.

API JavaScript de votre composant :

1. 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 démarrer l'animation en cliquant par exemple sur un bouton et en appelant logo.startAnim(20); (20 étant par exemple une vitesse de rotation ou d'animation)... Vous pourrez vous aider par exemple de ce site qui propose des animations CSS¹⁵ .
    
2. Avez-vous utiliser le MVC (le fait que certains attributs puissent être "surveillés"), si on change par programme la couleur, il faudrait que l'<input type="color"> se mette à jour, si on change la vitesse, que le <input type="range"> se mette à jour etc.

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

TP2 : on continue le travail précédent

• Ici une archive du projet fait en live lors du TP1¹⁶. Dezipper et ouvrir index.html avec un serveur http (ou le live server de visual studio code, quand on est en train d'éditer index.html)
   
• Vidéo de la séance du 17/12 de 8h à 10h30¹⁷ sur le générateur de logos