1. Téléchargez sur votre compte le fichier M2CCI_PLAI_DSDec2022_XXX.zip et décompressez le.

   unzip M2CCI_PLAI_DSDec2022_XXX.zip

   Le répertoire M2CCI_PLAI_DSDec2022_XXX ainsi créé contient trois sous répertoires 01_Horloges, 02_VisagesAnimes3 et 03_LettresEtMots contenant le code que vous utiliserez et compléterez pour les exercices de cette épreuve sur machine.

   

2. Renommez le répertoire M2CCI_PLAI_DSDec2022_XXX en M2CCI_PLAI_DSDec2022_votreNom, où votreNom correspond à votre identifiant de login (sans espaces, ni accents). Sous linux :

   mv M2CCI_PLAI_DSDec2022_XXX M2CCI_PLAI_DSDec2022_votreNom

3. C'est le contenu de ce répertoire que vous devrez rendre en fin d'épreuve. Soyez très vigilants à ce que tout le travail que vous effectuez durant l'épreuve soit bien enregistré dans ce répertoire.

4. A la fin de l'épreuve créez une archive compressée de votre travail.

   1. placez vous dans le répertoire contenant votre répertoire de travail M2CCI_PLAI_DSDec2022_votreNom. Par exemple, si celui-ci est dans votre home dir : cd ou bien cd ~
   2. créez un fichier archive, .zip sous windows, ou .tar.gz sous linux. La commande sous linux:

      tar zcvf M2CCI_PLAI_DSDec2022_votreNom.tar.gz M2CCI_PLAI_DSDec2022_votreNom

5. Déposez l'archive sur le serveur moodle.

   1. connectez vous sur moodle
   2. si ce n'est déjà fait, enregistrez vous au cours Programmation Internet,
   3. déposez le fichier M2CCI_PLAI_DSDec2022_votreNom.tar.gz précédemment créé dans l'espace prévu à cet effet dans le moodle du cours Applications Internet (ici).
   
   

   Pour des explications plus détaillées : Comment déposer un devoir sur Moodle

Question 1 : liens entre la page d'accueil et les pages de description des villes

Pour le moment la barre de navigation est inactive car aucun lien n'a été mis en place. La figure 3 ci-dessous vous présente les liens à établir.

• Modifiez le code de index.html pour que
  1. l'item Vancouver dans la liste drop-down ainsi que le texte Vancouver au dessus de l'horloge vous renvoient vers la page vancouver.html
  2. les autres items (New York, Rio de Janeiro, ..., Sidney) vous renvoient vers la page underconstruction.html, page provisoire qui sera remplacée ultérieurement par des pages spécifiques à chaque ville.
• Modifiez le code de underconstruction.html pour que
  1. l'item Acceuil renvoie vers la page d'accueil index.html
  2. l'item Vancouver vous renvoie vers la page vancouver.html

Question 2: lien externe vers iconarchive.com

Modifiez la page index.html afin que, dans les crédits pour l'artiste auteur des images des drapeaux, le texte iconarchive.com soit un lien hypertexte permettant d'ouvrir dans un nouvel onglet la page de téléchargement des images de drapeaux comme indiqué sur la figure 4. L'url de cette page est https://iconarchive.com/show/flags-icons-by-icondrawer.html

Question 3: liens internes à la page vancouver.html

Pour le moment, nous ne nous intéresserons pas aux liens de navigation vers les autres pages depuis la page vancouver.html, cela sera mis en oeuvre lorsque vous utiliserez Bootstrap 5 pour sa présentation. Par contre vous pouvez dès à present mettre en place les liens de navigation internes à celle-ci à savoir :

1. le lien permettant d'aller directement aux informations climatiques depuis la présentation générale
2. le lien permettant d'aller directement au début de la page depuis les informations climatiques

Question 4: modification du tableau des informations climatiques

Modifiez ce tableau de façon à ce que les informations de températures et de précipitations soient regroupées comme indiqué sur la figure 7 ci-dessous.

Question 5: mise en forme de la page vancouver.html avec Bootstrap 5

En utilisant Bootstrap 5, modifiez la page vancouver.html afin d’obtenir un affichage conforme à celui présenté sur la figure 8 et dans la vidéo 2.

Les points qui sont demandés (et que vous pouvez réaliser dans n'importe ordre) sont :

• mise en place d'une barre de navigation similaire à celles de la page d'accueil ou de la page underconstruction.html. Cette barre devra avoir les propriétés suivantes :
  • position fixe en haut de la fenêtre, elle reste toujours visible même lorsque l'on scrolle dans la page,
  • la barre se transforme en bouton avec menu déroulant lorsque la fenêtre n'est plus assez large pour afficher tous les items de navigation,
  • l'item sélectionné, en l'occurence ici Villes et l'item Vancouver sont mis en évidence (style actif, blanc pour l'item Villes, blanc sur fond bleu pour l'item Vancourver dans la liste drop-down ).
    

    

• La présentation générale de la ville de Vancouver est faite sur deux colonnes
  • la première section et l'image de la ville de Vancouver sont dans une première colonne qui occupe les 3/4 de la largeur de la fenêtre du navigateur,
  • la deuxième et la troisième section ainsi que le portrait de Georges Vancouver sont dans une deuxième colonne qui occupe 1/4 de la largeur de la fenêtre du navigateur,
  • la quatrième section et les sections suivantes occupent toute la largeur de la fenêtre du navigateur.
• Les deux images ont un effet de vignette (bordure blanche) et de plus un découpage circulaire est appliqué à l'image du portrait de Georges Vancouver. La taille des images s'adapte automatiqument à la largeur de la colonne où elles se situent.
• Le tableau est mis en forme avec une bordure autour de chacune des cellules, avec les noms de colonnes en blanc sur fond noir et ensuite la couleur du fond des lignes du tableau varie entre deux nuances de gris une ligne sur deux afin de produire un effet de bandes (stripped).
  De plus si la fenêtre n'est pas assez large pour afficher le tableau dans son entier, le tableau devient automatiquement scrollable et on peut parcourir son contenu à l'aide d'un ascenseur horizontal.

Question 1 : Dans la version du code fournie, les VisagesExpressifs sont systématiquement créés avec un expression indifférente (code = 0).

• Modifiez le code du constructeur de la classe VisageExpressif afin de pouvoir spécifier en paramètre une expression initiale, avec la valeur 0 (indifférent) comme valeur par défaut.
• Pour tester votre code, modifiez testVisageExpressif.html afin que au chargement de la page trois VisagesExpressifs soient crées chacun avec une expression différente (0: indifférent, 1: joyeux et 2: triste) comme le montre la vidéo ci-dessous.

Question 2 : définissez et testez un nouveau type d'objet VisageClown

Créez une nouvelle classe VisageClown et une page testVisageClown.html qui comme testVisagesExpressifs.html vous permettra de la tester en créant et animant trois visages clown chacun avec une expression et une taille de nez différente.

La vidéo ci-dessous montre le résultat attendu.

Question 3 : Modification de visages.html

Modifiez visages.html de manière à ce que :

• au chargement de la page trois visages (un visage clown, un visage classique et un visage expressif) soient créés et affichés dans la zone de dessin,
• lors de la génération aléatoire de visages, des visages des trois types soient créés (de manière équiprobable).
  • Pour les visages expressifs, l'expression initiale est elle aussi définie de manière aléatoire
  • Pour les visages clown, en plus de l'expression la taille du nez est fixée de manière aléatoire dans les limites suivantes :
    • rayon minimum du nez : 0.1 * rayon du visage
    • rayon maximum du nez : 0.3 * rayon du visage

La vidéo ci-dessous montre le résultat attendu.

Question 1 : dans un premier programme JavaScript rechercheLettre.js écrivez:

• une fonction nbreOccurences(lettre, mot) qui renvoie un entier correspondant au nombre d'occurences de la lettre lettre dans le mot mot.
• un programme principal qui lit un mot puis lit une lettre et calcule et affiche le nombre d'occurences de cette lettre dans le mot

Exemples de traces d'exécution de ce programme (en jaune les entrées de l'utilisateur)

Question 2 : dans un second programme JavaScript rechercheMot.js écrivez:

• une fonction estPresente(lettre, mot) qui renvoie un booléen indiquant si la lettre lettre est présente ou non dans le mot mot.
• une fonction toutesPresentes(mot1, mot2) qui renvoie une chaîne dont la valeur est soit
  • '' (la chaîne vide) si toutes les lettres de mot1 sont présentes dans mot2
  • la première lettre de mot1 qui n'est pas présente dans mot2
• un programme principal qui lit deux mots puis teste si toutes les lettres du premier mot lu sont présentes dans le second.

Exemples de traces d'exécution de ce programme (en jaune les entrées de l'utilisateur)

Question 3 (question Bonus ): en utilisant la fonction encore définie dans utils.js modifiez les programmes précédents afin de permettre à l'utilisateur de recommencer plusieurs recherches sans quitter le programme. La figure ci-dessous vous montre des traces d'exécution attendues