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).

Points d’action

Comme expliqué ci-dessus, le Web est très énergivore. Donc un premier point d’action (et qui ne concerne pas uniquement le Web) est de se tourner vers des sources d’énergie dégageant moins de gaz à effet de serre.

Un deuxième point d’action est d’optimiser le fonctionnement des sites. C’est-à-dire (et là c’est le développeur qui parle) optimiser tous les appels aux resources du serveur nécessaires à l’affichage d’une page, comme par exemple optimiser les images avec le meilleur ratio qualité/taille de fichier (ce point a en plus une influence sur le référencement de vos pages), optimiser les requête auprès des base de données…

D’autres solutions viennent de société proposant de replanter des arbres contre un petit article à propos de leur initiative et l’ajout d’un lien sur votre site. J’ai participé moi-même à une de ces initiatives sur mon blog WordPress.com. Cette action (dont je parle plus précisemment dans cet article) fait partie de nombreuses autres présentes sur la Toile.

Enfin, le meilleur moyen de diminuer le coût énergétique du Web, est de tous adopter de meilleures pratiques d’utilisation, comme par exemple:

  • si vous connaissez l’adresse d’un site, ne la rentrez pas sur un moteur de recherche, mais directement dans la barre d’adresse de votre navigateur
  • si vous visitez fréquemment un site, ajoutez le à vos favoris, ou utilisez l’auto-complétion de la barre d’adresse ; cela vous fera gagner du temps et économiser une recherche
  • limitez votre utilisation des mails

Conclusion

J’espère que cet article vous aura fait prendre conscience de l’impact du Web sur votre environnement, et que vous suivrez quelques uns de mes conseils.

Le green geek

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 Lire la suite

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 Lire la suite

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.

Lire la suite

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>.

Lire la suite

Pourquoi choisir MODX ?

Comme je l’ai annoncé dans l’article précédent, j’ai choisis d’utiliser MODX pour mon site. Dans cet article je vais vous présenter MODX et vous dire ce qui me l’a fait choisir.

Présentation de MODX

MODX est un sytème de gestion de contenu (Content Management System en anglais) qui existe depuis 2005. Actuellement (mars 2014) deux versions majeures sont disponibles: MODX Evolution, version 1, et MODX Revolution, version 2.

MODX gère les ressources/documents par un système d’arbre.

Arbre de ressources MODX

Contrairement aux autres ténors des CMS il est possible, même si cela n’est pas recommandé, d’utiliser pour chaque ressource une structure HTML différente.

Chaque ressource utilise un modèle, qui contient des données génériques (titre, date de publication, auteur…), mais aussi des données qui lui sont propres (un champ de type fichier, un champ de type menu déroulant…). De plus, un modèle peut ne pas contenir de données HTML.

En plus de ces données, on peut associer aux modèles deux autres types de ressources: les snippets et les chunks. Un snippet est un script PHP permettant, entre autres, d’aller chercher des données dans d’autres ressources, enfants ou non de la ressource affichée, pour alimenter un carrousel, faire une liste… Un chunk est un petit bout de code HTML qui peut-être utilisé par plusieurs ressources, comme un en-tête ou un pied de page.

Pourquoi j’ai adopté MODX

J’ai découvert MODX pendant mon CDD chez Yellow Cactus, et suis rapidement tombé sous son charme. Le système d’arbre permet d’alimenter des carrousels (ou autre, comme générer un flux JSON pour utilisation sur un autre site) facilement.

Le site nouveau est arrivé !!!

Bon OK, si vous êtes allés le voir, vous ne constaterez aucun changement, et c’est normal !

La nouveauté n’est ni dans le contenu, ni dans la forme, mais sous le capot.

En effet, jusqu’à présent mon site n’avait aucun CMS – sauf bien entendu ce blog ici présent qui tourne sous WordPress. C’est désormais chose faite, mon site est maintenant « fièrement propulsé » par MODX.

J’ai découvert MODX lors de ma première expérience pro. MODX est basé sur un système d’arbre de ressources et permet la création de « snippets » (petits bouts de code PHP). Le site officiel (voir ci-dessus) vous en diras plus que moi.