Question 1 : mise en forme de la page index.html

Ajoutez à horloges.css de nouvelles règles de styles CSS pour définir une couleur de fond bleu clair (composantes primaires Rouge : 208, Vert: 222 et Bleu: 252) pour toutes les pages du site et pour que les vignettes contenant l'horloge et la photographie de chacune des villes soient matérialisées de la manière suivante :

• avec un fond de couleur lightsteelblue et dont les coins sont arrondis (rayon 15 pixels),
• cette couleur de fond change et prend la valeur steelblue si la vignette est survollée par la souris,
• la vignette à des marges internes et une marge externe inférieure de 10 pixels,
• tout le contenu de la vignette (nom de la ville, horloge, image de la ville) est centré.

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

• Modifiez le code de la page d'accueil index.html afin que
  • la vignette contenant de la ville de Vancouver supporte un lien hypertexte qui renvoie vers la page vancouver.html. Quel que soit l'endroit où l'utilisateur clique sur la vignette (le texte Vancouver, l'horloge, l'image du drapeau, la photographie réduite de la ville, le fond de la vignette) le lien est suivi.
  • pour les vignettes concernant les autres villes (Sidney, New York, Rio de Janeiro, ...) un lien hypertexte redirige vers la page underconstruction.html, page provisoire qui sera remplacée ultérieurement par des pages spécifiques à chacune des villes. Ne le faire que pour le ville de Sidney.
• Modifiez le code de underconstruction.html pour que
  • l'item Acceuil renvoie vers la page d'accueil index.html

Question 3: liens externes vers iconarchive.com et wikimedia.org

Modifiez la page about.html, comme indiqué sur la figure 4 afin que

• dans les crédits pour l'auteur des images des drapeaux, on ait un lien vers la page de téléchargement des images sur le site iconarchive.com (l'url de cette page est https://www.iconarchive.com/show/flags-icons-by-icondrawer.html),

• dans les crédits pour les photographies des villes, on ait un lien vers la page d'accueil (https://commons.wikimedia.org) du site Wikimedia Commons d'où ces images sont issues.

Faites en sorte que ces pages s'ouvrent dans un nouvel onglet du navigateur.

Question 4: 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 aux informations générales depuis les informations climatiques

Question 5: 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 ci-dessous.

Question 6: 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 ci-dessous.

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 des autres pages du site (index.html, about.html ou 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 (burger menu ) lorsque la fenêtre n'est plus assez large pour afficher tous les items de navigation,
  • les items Accueil et A propos correspondent à des liens hypertexte qui conduisent respectivement aux pages index.html et about.html.
• La présentation générale de la ville de Vancouver est faite avec la disposition (layout) suivant :
  • le contenu de la page occupe toute la largeur de la fenêtre du navigateur,
  • les trois premiers articles de la section Informations générales sont affichés sur deux colonnes :
    • la premier article avec l'image de la ville de Vancouver est dans une première colonne qui occupe les 3/4 de la largeur de la fenêtre du navigateur,
    • le deuxième article (avec le portrait de Georges Vancouver) et le troisième article sont dans une deuxième colonne qui occupe 1/4 de la largeur de la fenêtre du navigateur,
    • la taille (largeur) des colonnes et des images s'adapte automatiquement à la largeur de la fenêtre du navigateur. Par contre si cette dernière est inférieure à 576 pixels, la disposition en colonnes est abandonnée au profit d'une disposition en blocs les uns au dessous des autres
  • tous les autres éléments (titres, sections, articles, tableau) 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 automatiquement à 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 du navigateur 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 7: modification de la barre de navigation

Dans la page vancouver.html rajouter entre les items Accueil et A propos un nouvel item Ville permettant à l'aide d'un menu déroulant (dropdown menu) d'accéder aux pages de description des différentes villes pour lesquelles il y a une horloge sur la page d'accueil. La figure 11 ci-dessous présente le fonctionnement attendu pour ce menu.

Question 8: ajouter une horloge dans la page vancouver.html

Dans le titre de niveau 1 (élément h1) de la page de description de la ville de Vancouver rajoutez une horloge qui affiche l'heure locale de cette ville comme indiqué sur la figure ci-dessous. Le décalage horaire entre Vancouver et la France est de -9 heures.

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 le dossier 03_FonctionsIterationsNode créez un fichier javascript damier.js contenant :

• une fonction motifsAlternes(nbMotifs, motif1, motif2) qui retourne une chaîne de caractères correspondant à la concaténation des chaînes motif1 et motif2 de manière alternée, nbMotifs étant le nombre de motifs total (nombre de motif1 + nombre de motif2) présents dans la chaîne retournée,

• les instructions permettant de tester la fonction avec les jeux de paramètres donnés sur la figure ci-dessous et d'afficher le résultat sur la console du terminal.

  

Exécutez le programme damier.js avec node depuis un terminal et vérifiez que les résultats produits correspondent bien à ceux indiqués dans le tableau ci-dessus.

Qestion 2 : rajoutez à damier.js une deuxième fonction damier qui en vous servant de la fonction motifsAlternes permet d'afficher sur la console du terminal un 'damier'. La figure ci-dessous donne un exemple d'un damier affiché par cette foncion.

Rajoutez au programme damier.js les instructions permettant de tester votre fonction damier en affichant deux damiers comme montré sur la trace d'exécution ci-desous.

PS P:\TW_ExamDec2024_PhG\03_FonctionsIterationsNode> node damier.js

Tests de la Fonction motifsAlternes
+++%%+++%%+++
000---000---000---
000---000---000---000

Tests de la Fonction damier

---000---000---
---000---000---
000---000---000
000---000---000
---000---000---
---000---000---

XXXX    XXXX    XXXX    XXXX
XXXX    XXXX    XXXX    XXXX
XXXX    XXXX    XXXX    XXXX
    XXXX    XXXX    XXXX
    XXXX    XXXX    XXXX
    XXXX    XXXX    XXXX
XXXX    XXXX    XXXX    XXXX
XXXX    XXXX    XXXX    XXXX
XXXX    XXXX    XXXX    XXXX
    XXXX    XXXX    XXXX
    XXXX    XXXX    XXXX
    XXXX    XXXX    XXXX
PS P:\TW_ExamDec2024_Correction\03_FonctionsIterationsNode>

Question 3 : en utilisant le module readline-sync et la fonction encore définie dans le module utils.js comme vu en TP, rajoutez à votre programme la possiblité de permettre à l'utilisateur de fixer par une saisie au clavier les paramètres contrôlant l'affichage d'un damier. Vous trouverez ci-dessous un extrait de la trace d'exécution attendue (en jaune les données rentrées par l'utlisateur).

> node damier.js
... // traces des questions 1 et 2

Génerez vos propres damiers

caractère du motif1 : $ 
caractère du motif2 : -
nombre de caractères par motif : 5
nombre de motif alternés sur une ligne : 5
nombre de lignes de motifs alternés pour une ligne du damier : 3
nombre de lignes de lignes du damier : 4

$$$$$-----$$$$$-----$$$$$
$$$$$-----$$$$$-----$$$$$
$$$$$-----$$$$$-----$$$$$
-----$$$$$-----$$$$$-----
-----$$$$$-----$$$$$-----
-----$$$$$-----$$$$$-----
$$$$$-----$$$$$-----$$$$$
$$$$$-----$$$$$-----$$$$$
$$$$$-----$$$$$-----$$$$$
-----$$$$$-----$$$$$-----
-----$$$$$-----$$$$$-----
-----$$$$$-----$$$$$-----

Voulez-vous afficher un autre damier ? (O/N): O
caractère du motif1 : !
caractère du motif2 : X
nombre de caractères par motif : 2
nombre de motif alternés sur une ligne : 8
...