Présence autochtone II (HTML+CSS)

J’ai profité du temps des fêtes pour avancer un peu le projet Présence autochtone, en prenant des photos dans le Vieux-Québec et en travaillant les marqueurs Leaflet avec HTML et CSS. Sur le terrain, j’ai réalisé que le projet faisait plus de sens sur un téléphone intelligent qu’un ordinateur. J’ai donc adapté le code. Le site est maintenant parfaitement lisible sur un mobile. Je me suis servi de ce tutoriel. Les changements apportés sont minimes, en fait.

html, body, #map {
      height: 100%;
      width: 100vw;
    }

vw tient pour Viewport width, soit la largeur de l’aire visible par l’utilisateur.

J’ai ensuite marqué mon code avec du HTML (le m tient d’ailleurs pour markup). Au début de l’Internet, les concepteurs de site Web se servaient de ce langage pour mettre en italiques ou en gras du texte etc. Je l’ai fait pour le titre du livre cité dans l’attribution, car il n’apparaît qu’une fois.

myMap.attributionControl.addAttribution('Source: René Gilbert. <i>Présence autochtone à Québec et Wendake.</i> Québec: Editions GID. 2010');

J’aurais pu le faire pour changer l’apparence de chacun de mes marqueurs Leaflet. Mais advenant que je ne suis plus satisfait de la mise en forme, il me faudrait à nouveau changer manuellement les 44 marqueurs! C’est pourquoi dès le milieu des années 1990 est apparu le langage CSS (Cascade Style Sheets), qui permet de définir des classes. Ces classes sont d’abord créées avec du HTML. On leur donnera des noms significatifs pour se faciliter la vie.

MonumentIncarnation.bindPopup("<p class='titre'>Le monument Mère Marie-de-l\'Incarnation</p>  <p class='adresse'>2, rue du Parloir, à l\'angle de la rue Donnacona</p> <p class='google'><a href='https://www.google.ca/maps/place/46.81186,%20-71.20823' target='_blank'>Ouvrir dans GoogleMaps</a> </p>  <img src='images/monument_guyart.jpg' width='100px'/> <p class=texte>Situé dans le jardin du monastère des Ursulines, ce momument représente Marie Guyart (1639-1672) et une fillette huronne agenouillée et tenant un crucifix. La fillette serait Skanudharoua, première religieuse autochtone au Canada. Elle prit le nom de Geneviève-Agnès de Tous-les-Saints. Elle meurt à 15 ans en 1657. On doit cette oeuvre à Jean-Émile Brunet et elle date de 1939.</p>");
	

J’ai donc ici une classe Titre qui identifie mon marqueur. J’ai ensuite une classe Adresse qui contient l’adresse civique ou alors des indications pour trouver le lieu. Puis vient une classe Google pour l’hyperlien sur lequel l’utilisateur peut cliquer pour ouvrir Google Maps et éventuellement se faire suggérer un itinéraire pour s’y rendre. On remarquera que les y et les x sont séparés par un %. On notera également que le lien s’ouvre dans une nouvelle fenêtre (target=’_blank’). J’aurais pu créer une classe aussi pour les images, mais je me suis contenté de leur attribuer ici directement une largeur de 100px. Enfin, la classe Texte est réservée à la description du marqueur.

La prochaine étape consiste à écrire le code CSS qui va nous permettre de changer rapidement et aussi souvent qu’on veut l’apparence de ces classes. Normalement, on écrit une feuille de style que l’on enregistrera dans le même dossier qui contient notre fichier HTML. Nous avions d’ailleurs (vous vous en souviendrez) déjà un dossier CSS qui venait avec Leaflet et auquel on renvoyait en en-tête (head):

<link rel="stylesheet" href="../leaflet/leaflet.css" />

Ça fait du sens d’écrire une feuille de style CSS quand on a un site Web de plusieurs pages, car sinon il nous faudrait changer le CSS dans chaque page. En réfèrant simplement à la feuille de style au début de chaque page HTML, il suffit de changer la dite feuille pour que l’entièreté de notre site soit métamorphosé en un clin d’oeil. Mais comme ici je n’ai qu’une page HTML, j’ai simplement ajouté le CSS directement dans la section style de mon code:

    .titre {
      font-family: Arial;
      color: black;
      font-weight: bold;
      font-size: 18px !important;
    }
    .adresse {
      font-family: Arial;
      color: green;
      font-style: italic;
    }
    .google {
      font-family: Arial;
      color: blue;
    }

La classe est toujours précédée d’un point quand on la définit. On peut ajouter plus d’une famille de polices dans le cas où celle-ci ne serait pas disponible dans le navigageur de l’utilisateur. La seconde police indiquée sera alors choisie par défaut. On peut s’assurer que la définition d’une classe prévaut sur celle qui pourrait être donnée ailleurs (par exemple dans leaflet.css) en la faisant suivre de !important. Il faut savoir que le navigateur appliquera toujours la dernière définition à survenir dans le code, à moins justement qu’il y ait une précision de ce type. On aurait aussi pu enregistrer ce code dans un document se terminant par .css et s’assurer d’y référer dans la section head. Le résultat donne ceci:

Si vous visitez le site, vous serez accueilli par le message suivant:

Vous pouvez cliquer sans crainte. C’est juste que le site qui m’est alloué par l’université n’est pas https. Or, pour pouvoir géolocaliser l’utilisateur (avec sa permission préalable), le site doit être sécurisé. Je vais donc prochainement bouger le site vers un autre serveur, ce qui permettra de situer sur la carte l’utilisateur: très pratique quand on veut savoir où l’on se trouve par rapport aux marqueurs.

Si vous souhaitez inspecter l’intégralité du code de la carte, vous pouvez toujours utiliser les outils pour développeur (qu’on trouve dans la plupart des navigateurs), par exemple ici dans Chrome:

On trouve énormément de ressources sur HTML et CSS dans le Web. Prochainement, nous verrons comment ajouter à sa carte des icônes personnalisées. Bonne année 2020!