1. Téléchargez sur votre compte le fichier TW_CCNov2025_XXX.zip et décompressez le (sous linux en ligne de commande dans un terminal unzip TW_CCNov2025_XXX.zip).

   Le répertoire TW_CCNov2025_XXX ainsi créé contient deux sous répertoires Partie1_CodageUnicode et Partie2_JavaScript, contenant le code que vous utiliserez et compléterez pour les exercices de cette épreuve sur machine.

   

2. Renommez le répertoire TW_CCNov2025_XXX en TW_CCNov2025_votreNom, où votreNom correspond à votre identifiant de login (sans espaces, ni accents) (sous linux en ligne de commande: mv TW_CCNov2025_XXX TW_CCNov2025_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 (fichier .zip ou .tar.gz soit en utilisant l'interface graphique du bureau Ubuntu soit depuis un terminal via des commandes unix. Dans ce second cas ouvrez une fenêtre terminal et procédez comme suit :

   1. placez vous dans le répertoire contenant votre répertoire de travail TW_CCNov2025_votreNom. Par exemple, si votre votre répertoire de travail se trouve dans votre home dir utilisez la commande cd ou bien cd ~,

   2. pour créer le fichier archive au format .tar.gz tappez la commande
      tar zcvf TW_CCNov2025_votreNom.tar.gz TW_CCNov2025_votreNom

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

   1. connectez vous sur Moodle avec votre identifiant et mot de passe agalan (explications détaillées)
   2. déposez le fichier archive (fichier TW_CCNov2025_votreNom.zip ou TW_CCNov2025_votreNom.tar.gz) précédemment créé dans l'espace de dépot prévu à cet effet dans le Moodle du cours Technologies du Web Internet (explications détaillées)

Question 1 : liens entre la page d'accueil (index.html) et les autres pages du site

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 la barre de navigation de la page index.html pour que
  1. l'item Exemples renvoie vers la page exemplesUnicode.html
  2. l'item A propos renvoie vers la page about.html
• Modifiez le code de la barre de navigation de la page about.html pour que
  3. l'item Accueil renvoie vers la page d'accueil index.html
  4. l'item Exemples renvoie vers la page exemplesUnicode.html

Question 2: lien externe vers unicode.org

Modifiez la page d'accueil afin d'ajouter un lien qui permet d'ouvrir dans un nouvel onglet la page d'accueil du site officiel de l'organisation Unicode (unicode.org), comme indiqué sur la figure 4 ci-dessous.

Question 3: liens vers un élément particulier de la page exemplesUnicode.html

Pour le moment, nous ne nous intéresserons pas aux liens de navigation vers les autres pages depuis la page exemplesUnicode.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. les liens permettant d'aller directement des détails de codages d'un caractère vers le bloc de codes auquel il appartient
2. les liens inverses permettant d'aller d'un bloc de code vers un exemple détaillé d'un caractère appartenant à ce bloc

Question 4: lien depuis la page d'accueil vers un élément particulier de la page exemplesUnicode.html

Modifiez le code de la page d'accueil afin de créer un lien hypertexte vers la partie Exemples de blocs Unicode de la page exemplesUnicode.html comme le montre la figure 6 ci-dessous.

Question 5:

Les détails des exemples de codage de caractères sont présentés sous la forme de listes à points (éléments <ul>). Modifiez le code HTML afin que cette présentation se fasse sous la forme d'une table en respectant la structure indiquée sur la figure 7 ci-dessous.

Question 6:

Modifiez la feuille de styles de votre site afin que les tables de la page exemplesUnicode.html soit affichées avec la mise en forme suivante.

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

En utilisant Bootstrap 5, modifiez la page exemplesUnicode.html afin d’obtenir un affichage conforme à celui présenté sur la figure 8.

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 index.html ou de la page about.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 Exemples, est mis en évidence (couleur blanc).
• Les tables présentant le codage des caractères A, ê, Б, ت, ∀ et ☃ sont réparties sur une grille de deux lignes de trois colonnes de largeur identique.
• Bien entendu la taille (largeur) des colonnes s'adapte automatiquement à la largeur de la fenêtre du navigateur. Par contre si cette dernière est inférieure à 768 pixels, la disposition en lignes et colonnes est abandonnée au profit d'une disposition en blocs les uns au dessous des autres.
• La taille des images des différents blocs de codes s'ajuste automatiqument si la largeur de la fenêtre du navigateur est trop petite pour les afficher entièrement (images responsives).

Question 1 : Dans le dossier Partie2_JavaScript 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 de manière alternée des chaînes définies par les paramètres motif1 et motif2, le paramètre 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 d'arguments 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_CCNov2025_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).

>PS P:\TW_CCNov2025_PhG\03_FonctionsIterationsNode>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
...