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.

Looking for…

La nouvelle viens de tomber, mon CDD de webmaster ne donnera pas de suite.

Je suis donc à nouveau sur le marché, et suis à la recherche d’un nouveau poste de « webmaster++ ».

Par « webmaster++ » j’entend que je sais un peu plus que simplement mettre à jour du contenu via un CMS:

  • au vu du contenu de ce blog, on peut constater que je possède de bonnes bases de jQuery (et non JavaScript pur)
  • je possède également de bonnes bases en PHP procédural
  • lors de cette première expérience j’ai utilisé le CMF MODX, et ai été amené à créer des « snippets », petits bouts de code PHP pour ajouter des fonctionnalités

[JavaScript/HTML5] Et maintenant ajoutons quelques couleurs

Dans mon précédent article Amusons-nous avec les canvas, nous étions arrivés au résultat ci-dessous:

Nous avons donc ici un effet que l’on aurait pu obtenir en CSS. Mais grâce aux <canvas> nous pouvons à présent remplir notre texte avec autre chose qu’une unique couleur ; avec les <canvas> on peut utiliser des dégradés, ainsi que des images.

Continuer la lecture

[JavaScript/HTML5] Amusons-nous avec les canvas

Aujourd’hui nous allons voir comment ajouter du texte aux nouveaux éléments <canvas> du HTML5.

Comme les plus attentifs d’entre-vous l’auront déjà remarqué, le titre de l’article révèle déjà une partie du contenu de l’article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript.

Continuer la lecture

[jQuery] Une fenêtre modale

Bonjour à tous, aujourd’hui nous allons voir comment réaliser une fenêtre modale en jQuery.

Qu’est-ce que c’est ?

Wikipédia donne la définition suivante:

Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et de l’écran. Elle est en général associée à une question à laquelle il est impératif que l’utilisateur réponde avant de poursuivre, ou de modifier quoi que ce soit.

Comme une démonstration vaut mieux qu’un long discours, j’ai mis en place une page de test.

Principe

Le principe utilisé ici est très simple:

  1. on place une div au-dessus de la page, grace à un z-index élevé. Cette div permet de masquer et de bloquer toute interaction avec le reste du document.
  2. on rajoute au-dessus de cette div une autre div faisant office de «fenêtre»
Continuer la lecture

[jQuery] Une horloge sous forme de diagramme

Avant de m’essayer à l’horloge présentée dans l’article précédent, je m’était posé la question de trouver une forme plus originale d’afficher l’heure. Après quelques recherches et essai, je suis arrivé à ce résultat.

Continuer la lecture

[Illustrator/jQuery] Comment réaliser une carte interactive (2/2)

À la fin de la première partie de ce tutoriel (voir ici) nous avions :

  • un dossier images contenant la carte
  • un fichier HTML comprenant notre map HTML
  • notre fichier Illustrator

Partie 2: Rendre la carte interactive à l’aide de jQuery

Les zones de maps n’étant pas stylisables via CSS, nous sommes obligés de passer par jQuery (ou tout autre framework JavaScript).

Principe utilisé: la carte de France est l’image de fond d’une division, la map HTML est appliquée sur une image transparente, qui au survol d’une zone surligne la région correspondante.

Continuer la lecture