Retour sur ma première carte interactive

Dans mon dernier article (voir), j’ai indiqué que la première solution de carte interactive que j’avais présentée dans une série de deux articles (1 et 2) ne fonctionnait pas sous Chrome.

Récemment, en consultant le code d’une page de reserves-naturelles.org, je me suis aperçu que la carte des régions de ce site fonctionnait sur le même principe que ma première solution et fonctionnait sous Chrome.

En comparant les deux codes je me suis aperçu de la différence : la map utilisée avait un attribut id au lieu d’un attribut name, ce qui fait que Chrome était incapable de la charger.

La démo originale a été corrigée, mais j’ai également fait une nouvelle version utilisant uniquement du JavaScript natif.

Le code HTML reste le même. Le code JavaScript est le suivant :

var areas = document.getElementsByTagName("area"); // array de toutes les areas
var target = document.getElementById("hovered"); // image dont on va changer la source

for (var i=0; i < areas.length; i++) { // pour chaque area de la page
	areas[i].addEventListener("mouseenter", function(evt) { // attachement à l'entrée de la souris
		// on récupère l'attribut "id" de l'élément déclencheur avec evt.target.getAttribute("id")
		target.src = "/assets/files/images/" + evt.target.getAttribute("id") + ".png"; // on change la source de l'image de couverture
	});
	areas[i].addEventListener("mouseleave", function(evt) { // attachement à la sortie de la souris
		target.src = "/assets/files/images/map.gif"; // on rétablit l'image transparente
	});
}

Comme quoi, même après plusieurs années on apprend toujours.

Remake de ma carte interactive avec OpenLayers

Il n’y a pas très longtemps, en faisant la maintenance de mon site (oui, même si le contenu n’évolue quasiment pas, le site n’est pas à l’abandon) je suis retombé sur la carte interactive que j’avais réalisées plusieurs années auparavant.

Cette carte reposait sur l’utilisation d’une image comme fond de carte, et d’une map HTML plus un script jQuery.

J’avais résumé le processus de création dans deux articles :

  1. Création de la carte et du mappage
  2. Ajout interactivité avec jQuery

L’inconvénient de cette solution est quelle ne fonctionne pas sur Chrome. Et Chrome étant le navigateur avec la plus grosse part de marché cela est problématique.

Dernièrement, lors de ma mission chez Orange, j’ai été amené à travailler sur une partie de cartographie. Pour des raisons de confidentialité, il avait été décidé de ne pas utiliser de solution commerciale (celle de big G dans ce cas), mais une solution open-source.

Le choix final c’est arrêté sur la librairie OpenLayers, avec un fond OpenStreetMap.

Or cette librairie (compatible avec tous les navigateurs modernes) permet l’utilisation d’une image statique comme fond de carte (voir cet exemple). C’est donc pourquoi j’ai décidé de refaire une carte interactive à l’aide de cette librairie.

Création de la carte

Préparatifs

Comme avec toute librairie, il faut d’abord l’intégrer à votre page (via un CDN ou en local), ainsi que sa feuille de style.

Ensuite, il faut créer dans le corps de la page une div qui sera utilisée par OpenLayers pour créer la carte. De plus, cette div doit être préalablement dimensionnée, si vous ne souhaitez pas qu’elle occupe toute la largeur disponible.

Le script de création de la carte, quant à lui, doit être placé à la fin du body de la page.

Bon, tout est près ? Il est temps de passer à la création de notre carte.

Continuer la lecture

Pour un web plus écolo

Après avoir lu divers articles et visionné plusieurs vidéos à ce sujet, j’ai moi aussi envie de m’exprimer sur l’impact environnemental du Web, et sur quelques astuces afin de diminuer cet impact.

Le web a un impact environnemental ?

À tous ceux se posant encore cette question, je répond oui. Le Web n’est rien d’autre qu’un ensemble d’ordinateurs reliés entre eux. Et un ordinateur a besoin d’énergie pour fonctionner et effectuer les tâches qui lui sont demandées. Or, le Web est en activité 24h/24 et 7j/7, et est très utilisé (sans parler de la consommation énergétique des systèmes de refroidissement des data-center).

Continuer la lecture

Le multi-site avec MODX

Grâce à son système de contextes, MODX Revolution permet la gestion de plusieurs sites à partir de la même installation du système. Nous allons voir dans cet article comment faire.

Le système de contextes

Ce système permet de clairement séparer les ressources dans leur arbres (voir image ci-dessous). La première section correspond aux ressources crées pour le site principal, alors que la/les suivante(s) correspond(ent) à/aux autre(s) site(s) rajouté(s) au système par la suite.

Arbre multi-contextes
Continuer la lecture

Un menu pour mobile avec MODX

Avec la généralisation des terminaux mobiles (smartphones et tablettes) il est important de prendre en compte la taille réduite de leur affichage lors de la conception de votre site. Un élément essentiel du design d’un site est le menu principal de navigation. Pour les terminaux mobiles, une des solutions est de remplacer le classique combo liste de liens non ordonnée (<ul>) + css par une liste déroulante (<select>) et du JavaScript.

Menu pour smartphone
Continuer la lecture

Ajouter une méta « generator » à MODX Revolution

J’ai longtemps cherché à rajouter la balise méta « generator » à mon MODX Revolution, et en fouillant la foisonnante doc de MODX j’ai enfin trouvé une solution.

Ma solution utilise un snippet (pour aller chercher le numéro de version), et un snippet (pour mettre le tout en HTML).

Le snippet

Le numéro de version est un paramètre du système (‘settings_version’ pour être plus précis). Pour afficher un paramètre système, il faut utiliser la méthode getOption de la classe modx. Cela donne donc:

return $modx->getOption('settings_version');

Le chunk

Le chunk consiste juste en une meta avec un attribut name égal à ‘generator’, et un attribut content égal au retour du snippet (que j’ai appelé ‘generator’). Cela nous donne:

<meta name="generator" content="MODX Revolution [[!generator]]" />

Utilisation du chunk

Pour utiliser le chunk, il suffit simplement de l’appeler dans le header du modèle ([[$generator]]).

Le PHP, qu’est-ce que c’est ?

Qu’est-ce que le PHP ?

Le PHP est un langage de programmation (ou script), qui permet de rendre les pages dynamiques; c’est-à-dire par exemple, utiliser un seul et unique squelette HTML pour générer des centaines de pages différentes, comme dans tous les CMS modernes.

Continuer la lecture

Comment marche le HTML ?

Comme vu précédemment le HTML est un des piliers du Web. Nous allons voir ici comment ça marche.

Les balises

La base du HTML est le principe de balises. Une balise est là pour délimiter une zone. en HTML, une balise s’écrit à l’aide de chevrons; exemple: <p>.

En HTML, sauf exception, les balises fonctionnent par paire: une balise ouvrante, et une balise fermante; exemple: <p></p>.

Continuer la lecture