Vous vous êtes toujours demandé quelle différence il pouvait y avoir entre le HTML et le PHP, entre le CSS et le JavaScript ? Cet article est fait pour vous. Après l’avoir lu, vous serez incollables, ou presque, sur les technologies du Web.
Pourquoi choisir MODX ?
Répondre
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.
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.
[JavaScript/HTML5] Tout est dans le placement
À la fin de l’article précédent j’avais utilisé une image comme motif. Comme on ne pouvait pas le deviner l’image utilisée était la suivante.
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.
[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:
- 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.
- on rajoute au-dessus de cette div une autre div faisant office de «fenêtre»
[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[jQuery] Une horloge en image
Aujourd’hui, nous allons voir comment réaliser en jQuery une horloge utilisant des images, que vous pouvez voir en action ici.
Continuer la lecture