Missions

Mission 1

Amélioration d'un plugin SPIP pour les images interactives

Contexte

Le plugin SPIP image_cliquable permet de créer des images interactives où certaines zones de l'image sont cliquables et peuvent mener vers différents liens. C'est comme une carte géographique où chaque région mène vers une page différente.

Problème initial

Le plugin ne gérait pas correctement le redimensionnement des images. Quand une image était redimensionnée (par exemple, quand on regarde le site sur un téléphone mobile), les zones cliquables ne suivaient pas le redimensionnement de l'image. Les zones cliquables restaient à leur position d'origine, ce qui créait un décalage avec l'image redimensionnée.

Solution apportée

J'ai développé une solution qui :

  1. Mémorise la taille originale de l'image
  2. Calcule automatiquement le ratio de redimensionnement quand l'image change de taille
  3. Ajuste les coordonnées des zones cliquables en fonction de ce ratio
  4. Met à jour les zones cliquables en temps réel lors du redimensionnement de la fenêtre

Impact

Cette amélioration permet maintenant d'avoir des images interactives qui fonctionnent correctement sur tous les appareils et qui s'adaptent automatiquement à la taille de l'écran.

Technologies utilisées

  • JavaScript/jQuery/PHP
  • SPIP

Mission 2

Mise à jour du plugin SPIP CKEditor

Contexte

CKEditor est un éditeur de texte WYSIWYG - What You See Is What You Get. Un éditeur WYSIWYG permet de créer et modifier du contenu web de manière visuelle, comme dans un traitement de texte, sans avoir à écrire de code HTML. Le plugin CKEditor pour SPIP permet d'intégrer cet éditeur dans les sites SPIP.

Problème initial

Le plugin SPIP CKEditor utilisait une ancienne version (CKEditor 4) qui n'est plus maintenue depuis 2023. Cette obsolescence pouvait créer des problèmes de sécurité et de compatibilité avec les navigateurs modernes. De plus, CKEditor 4 ne bénéficie plus des nouvelles fonctionnalités et améliorations de performance.

Solution apportée

Cette mise à jour a représenté un défi technique car le code existant était très ancien et CKEditor 4 possède une architecture très différente de CKEditor 5. J'ai dû adapter le code existant pour qu'il fonctionne avec la nouvelle version tout en conservant les fonctionnalités spécifiques à SPIP. Cette adaptation a nécessité une réécriture de certaines parties du code, mais aussi l'adaptation de celui déja existant. J'ai également profité de cette mise à jour pour moderniser certaines parties du code en suivant les meilleures pratiques actuelles de développement.

Impact

Cette mise à jour majeure apporte de nombreux avantages aux utilisateurs de SPIP. En premier lieu, la sécurité est renforcée grâce aux corrections des vulnérabilités connues dans l'ancienne version. L'interface utilisateur est également modernisée, offrant une expérience d'édition plus fluide et intuitive. Les utilisateurs bénéficient maintenant d'une meilleure sécurité et ont accès aux nouvelles fonctionnalités de CKEditor 5.

Technologies utilisées

  • JavaScript/jQuery/PHP
  • SPIP/HTML