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

   unzip Exam_TW_Dec2023_XXX.zip

   Le répertoire Exam_TW_Dec2023_XXX ainsi créé à la structure suivante (fig. 1)

   

2. Renommez le répertoire Exam_TW_Dec2023_XXX en Exam_TW_Dec2023_votreNom, où votreNom correspond à votre identifiant de login (sans espaces, ni accents).
   mv Exam_TW_Dec2023_XXX Exam_TW_Dec2023_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.

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

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

   • connectez vous sur moodle
   • si ce n'est déjà fait, enregistrez vous au cours Programmation Internet,
   • déposez le fichier Exam_TW_Dec2023_votreNom.tar.gz précédemment créé dans l'espace de dépot prévu à cet effet dans le moodle du cours Programmation Langages et Applications Internet.
   
   

   Pour des explications plus détaillées, suivez ce lien

Question 1.1 : Titre et Images

A partir du texte brut contenu dans le fichier index.md créez la page d'accueil de votre site index.html en réalisant sa mise en forme comme indiqué sur la figure ci-dessous. Pour cette mise en forme vous utiliserez les styles CSS de Bootstrap 5 (un simple container sans grille), vous n'avez pas à définir vos propres styles.

Question 1.2 : dotez la page DMSVersDD.html d'une barre de navigation comme indiqué sur la figure ci dessous

• La barre doit être remplacée par un bouton si la largeur de la page est inférieure à 576 pixels.

• Elle doit rester fixe en haut de la page quand l'utilisateur scrolle sur celle-ci.

Question 1.3

En utilisant Bootstrap 5, modifiez la page DMSVersDD.html afin d’obtenir un affichage identique à celui de la figure ci dessous.

• Si la largeur de la fenêtre du navigateur le permet (largeur supérieure ou égale à 768 pixels) :

  • la carte est affiché à droite et occupe 7/12 de la largeur.
  • les formulaires de saisie de coordonnées DMS, le bouton de conversion et le formulaire d'affichage des coordonnées DD calculées sont à gauche de la carte et occupent les 5/12 de la largeur restante.
  • Les formulaires de saisie de la latitude et de la longitude en coordonnées DMS sont côte à côte et occupent une largeur identique.

• Si la fenêtre du navigateur n’est pas assez large (largeur inférieure à 768 pixels), les éléments de la page sont affichés en bloc, les un en dessous des autres.

Question 2.1 :

Pour la page DMSVersDD.html modifiez le code afin que lorsque l'utilisateur saisit des coordonnées DMS (par exemple latitude 49° 15′ 39″ nord et longitude 123° 06′ 50″ ouest) puis clique sur le bouton convertir :

1. Les coordonnées Degrés Minutes Secondes saisies sont récupérées, converties en coordonnées Degrés Décimaux et affichée dans le formulaire prévu à cet effet.

2. La carte est mise à jour, centrée sur le point géographique correspondant aux coordonnées saisies avec un marqueur affichant les coordonnées DD et DMS du point (ici l ville de Vancouver, British Columbia, Canada).

• Pour le calcul de la conversion DMS vers DD vous disposez d'une fonction JavaScript déjà écrite dmsToDd() définie dans le fichier conversionCoordGPS.js (allez voir le code source de celle-ci pour comprendre son utilisation).

• De même pour la mise à jour de la carte et du marqueur montrant la position saisie, vous disposez d'une fonction déjà écrite updateMap() défine dans le fichier maps.js (allez voir le code source de celle-ci pour comprendre son utilisation).

Question 3.1 : Dans le fichier GPSLocations.js ecrivez :

• le code d'une première classe d'objets GPSLocation qui représente un lieu géographique définit par un nom, sa latitude et sa longitude exprimées en Dégrés Décimaux (DD). En plus d'un constructeur permettant de fixer les propriétés d'un tel objet, cette classe comportera les trois méthodes suivantes :

  • toString qui renvoie une chaîne de caractères indiquant le nom du lieu et ses coordonnées GPS au format DMS (Degrés Minutes Secondes). Par exemple pour le lieu de nom UFR IM2AG et de coordonnées GPS (45.193889 , 5.768333) la méthode toString renverra la chaîne 'UFR IM2AG (45° 11' 38.00" N , 5° 46' 6.00" E)'

    Pour l'écriture de cette méthode vous pouvez réutiliser et adapter le code de la fonction ddToDms définie dans le dossier js du projet GPSCoordConverter.

  • isInSouthernHemisphere qui renvoie un booléen à vrai si le lieu est situé dans l'hémisphère Sud ou sur l'équateur, faux sinon.

  • afficher qui affiche sur la console JavaScript les caractéristiques du lieu et l'hémisphère où il se trouve. Par exemple afficher pour le lieu représentant l'UFR IM2AG produira la sortie suivante :

    UFR IM2AG (45° 11' 38.00" N , 5° 46' 6.00" E)
    ce lieu est dans l'hémisphère Nord
                                            

• un programme principal qui crée trois objets instances de la classe GPSLocation et les affiche sur la console. Par exemple si le programme crée les trois lieux suivants :

  • UFR IM2AG de latitude 45.193889 et longitude 5.768333
  • Golden Gate Bridge de latitude 37.820055 et longitude -122.478581
  • Corcovado de latitude -22.951679 et longitude -122.478581

  L'affichage produit sera

  UFR IM2AG (45° 11' 38.00" N , 5° 46' 6.00" E)
  ce lieu est dans l'hémisphère Nord
  
  Golden Gate Bridge (37° 49' 12.20" N , 122° 28' 42.89" W)
  ce lieu est dans l'hémisphère Nord
  
  Corcovado (22° 57' 6.04" S , 43° 12' 41.05" W)
  ce lieu est dans l'hémisphère Sud

Question 3.2 : toujours dans le fichier GPSLocations.js ecrivez une seconde classe City qui représente un lieu géographique correspondant à une ville. En plus du nom et des coordonnes GPS en degrés décimaux, un objet City aura les propriétés suivantes

• sa population, un nombre

• le nom du pays où se situe la ville (une chaîne de caractères)

• l'indication de si la ville est la capitale du pays ou non (un booléen)

La classe City possède les mêmes méthodes que la classe GPSLocation :

• toString qui comme pour les objets GPSLocation renvoie une chaîne de caractères indiquant le nom du lieu et ses coordonnées GPS au format DMS (Degrés Minutes Secondes) mais avec en plus le nom du pays où se situe la ville, le fait que c'est la capitale ou non et la taille de sa population. Par exemple pour la ville de Paris dont les coordonnées GPS (latitude et longitude DD) sont (45.193889 , 5.768333), la population est de 10 856 407 habitants la méthode toString renverra la chaîne

  'Paris (48° 51' 24.00" N , 2° 21' 7.00" E), France (capitale), population : 10856407'

  Alors que pour la ville de San Francisco dont les coordonnées GPS (latitude et longitude) sont (37.7775 , -122.416389) et dont la population est de 884363 habitants la chaîne retournée sera :

  San Francisco (37° 46' 39.00" N , 122° 24' 59.00" W), Etats-Unis, population : 884363

• affiche qui comme pour les objets GPSLocation affiche sur la console le résultat de toString et sur la ligne en dessous l'hémisphère où elle se situe. Par exemple, pour la ville de Paris affiche produira l'affichage suivant

  Paris (48° 51' 24.00" N , 2° 21' 7.00" E), France (capitale) , population : 10856407
  ce lieu est dans l'hémisphère Nord

Pour tester cette classe vous rajouterez au programme principal contenu dans le fichier GPSLocations.js les instructions qui permettent de créer trois villes et de les afficher. Par exemple si le programme crée les trois villes suivantes :

• Paris de latitude 48.856667, longitude 5.768333 , capitale de la France et de population 10 856 407 d'habitants,

• San Francisco de latitude 37.777500, longitude -122.416389, située aux Etats-Unis et d'une population de 884 363 habitants,

• Dakar de latitude 14.731944, longitude -17.457222, capintale du Sénégal et de population 1 250 000 habitants

L'affichage sur la console de ces trois objet donne la sortie suivante

Paris (48° 51' 24.00" N , 2° 21' 7.00" E), France (capitale) , population : 10856407
ce lieu est dans l'hémisphère Nord

San Francisco (37° 46' 39.00" N , 122° 24' 59.00" W), Etats-Unis , population : 884363
ce lieu est dans l'hémisphère Nord

Dakar (14° 43' 55.00" N , 17° 27' 26.00" W), Sénégal (capitale) , population : 1250000
ce lieu est dans l'hémisphère Nord 

Question 3.3 : toujours dans le fichier GPSLocations.js ecrivez une fonction plusPeupléeDesVilles qui recherche dans un tableau d'objets City celui qui a la plus grande population et retourne cet objet.

Les paramètres de cette fonction sont les suivants :

• tabCity un tableau d'objets instances de la classe City

• north un paramètre booléen optionel qui, si il est présent, permet de limiter la recherche aux villes d'un hémisphere :

  • L'hemisphères nord si le paramètre north a la valeur vraie,
  • l'hemisphères Sud si le paramètre north a la valeur faux.

  Si le paramètre north est absent (valeur undefined) la recherche s'applique à toutes les villes quelque soit l'hémisphère où elles se trouvent.

Dans le fichier GPSLocations.js, écrivez le code de cette fonction et un code permettant de la tester.

Question 4 : QUESTION BONUS à ne faire que si il vous reste du temps.

1. dotez les pages DDVersDMS.html et index.html d'une d'une barre de navigation similaire à celle demandée pour la page DMStoDD.html à l'exercice 1.2.

2. Faites en sorte que, comme pour la page DMSVersDD.html, sur la page DDVersDMS.html (exercice 1.3) la carte s'affiche à droite des formulaires si la largeur de l'écran est supérieure ou égale à 768 pixels.

   

3. Comme pour l'exercice 2.1, faites en sorte de gérer l'interaction pour faire le calcul de conversion de coordonnées DD (Degrés Décimaux) vers des coordonnées DMS (Degrés Minutes Secondes).