Master Miage IA2 2021-2022 Technologies Web

Supports de cours :

• Transparents de présentation 
• Module 4.2 du MOOC "HTML5 Apps and Games" consacré aux Web Components. 
   

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

• Squelette de l'exemple fait en cours en live coding : tp1_squelette.zip 

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 semaine prochaine, 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 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 utilisé 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 TP1 mais vous commencez à faire votre propre générateur de logo, ajoutez plein d'options :-)

Ici une version du TP1 faite en live coding, un peu plus complète (avec attributs et background image, utilisation de getBaseURL() etc :

• tp1_squeletteCours2.zip