Mon site web a 29 ans. Ne vous moquez pas

Cette semaine j’ai réalisé la refonte complète d’ici présent mon site professionnel en choisissant de travailler main dans la main avec ChatGPT-4, l’IA conversationnelle d’OpenAI accessible via mon abonnement ChatGPT Plus. Dans ce billet, je vous propose de découvrir ce retour d’expérience en trois volets :

1. La collaboration avec ChatGPT-4 dans le design web – Quels avantages et inconvénients à impliquer une IA dans un projet de conception ? Comment utiliser efficacement un outil comme ChatGPT tout en gardant le contrôle du projet ?
2. Les motivations et principes de la refonte – Pourquoi abandonner mon ancien site sous WordPress (thème Qode Bridge associé au page builder WPBakery) pour un site plus léger et résilient ? Quels choix d’ergonomie et de design ont guidé cette refonte ?
3. La réalisation technique de la refonte – Comment nous avons reconstruit le site sur des bases saines : importation des contenus, nouveau thème WordPress minimaliste, optimisation du code et utilisation du nouvel éditeur de blocs (Gutenberg).

Nous avons, ChatGPT-4 et moi collaboré aussi pour la rédaction du présent billet en faisant appels à nos mémoires. Même s’il y aura quelques fois des éléments un peu technique, nous essaierons d’avoir un ton accessible et pédagogique afin que chacun, même non spécialiste, comprenne les enjeux et les enseignements de cette refonte collaborative avec une IA.

Préambule : pour moi c’est elle et pas lui

On s’écrit, on se parle et j’essaye de bien lui « prompter »*.

Pour oublier que le bilan énergétique de l’IA est absolument catastrophique et exponentiel , j’ai féminisée ChatGPT-4 dans mes échanges .

Modalités d’interaction : texte et fichiers

En terme de modalités d’interactions, je passe la plupart du temps par des messages écrits pour échanger, mais aussi par l’envoi direct de bouts de code, de fichiers, et d’images parfois commentées, le résultat étant assez bluffant. Car bien souvent, ChatGPT-4 saura parfaitement analyser, en prenant en compte le contexte, une image que vous lui envoyez, par exemple une capture d’écran d’une fenêtre de paramétrage dans WordPress ou encore d’un écran d’affichage du contenu d’une table de la base de données dans PhpMyAdmin.

Mode vocal

J’utilise rarement l’interaction vocale, sauf quand je suis en mobilité ou quand j’ai des éléments bien en tête et que je sens que ça ira plus vite de le verbaliser plutôt que de l’écrire. Et là aussi, le résultat est bluffant, autant dans la compréhension et le traitement du langage naturel, mais aussi dans le réalisme de la voix de ChatGPT (plusieurs choix possibles).

L’art de bien prompter*

Un des principes à retenir quand on donne des instructions à une IA pour lui donner des tâches à réaliser, c’est de bien réfléchir et de très bien formuler sa demande. C’est une évidence et une nécessité.

(*) Un prompt, dans le contexte de l’intelligence artificielle (IA), est une instruction ou un ensemble de directives données à une IA pour accomplir une tâche spécifique

1. Concevoir un site web en tandem avec ChatGPT-4 : opportunités et limites

L’idée de collaborer avec une intelligence artificielle pour refaire son site pourrait sembler futuriste pour certains, et pour d’autres initiés rien de bien original, car cela fait déjà pas mal de temps que des développeurs travaillent avec l’aide de l’IA.

Concrètement, comment ChatGPT-4 m’a aidé ? En simplifiant, j’ai utilisé ChatGPT comme un assistant virtuel capable de répondre à mes questions techniques, de proposer des solutions, analyser du code, aider à la planification et même de générer du code ou du texte à intégrer sur le site. Grâce à mon abonnement ChatGPT Plus, j’ai pu exploiter la puissance de la version GPT-4, bien plus avancée que les modèles génériques, pour bénéficier de réponses précises et contextualisées.

➔ Un “co-pilote” pour le design et le développement 

ChatGPT-4 dispose d’une énorme base de connaissances couvrant le développement web, WordPress, le design UX, etc. Il peut ainsi fournir en quelques secondes des informations ou idées qu’il m’aurait fallu des heures à rechercher.

Il convient déjà à ce stade de rester prudent. ChatGPT-4 peut parfois proposer des solutions obsolètes ou erronées qui ne tiennent pas compte de versions récentes d’outils et applications.

L’IA propose des solutions en s’adaptant à votre niveau de connaissance. Par exemple, lors de la refonte, je lui ai demandé comment migrer proprement les contenus de mon ancien thème vers le nouveau en préférant l’utilisation de requêtes SQL dans ma base de données : elle a su me lister les étapes et même m’expliquer comment convertir des types de contenus personnalisés via des requêtes SQL. C’est un gain de temps appréciable, car l’IA automatise en quelque sorte les tâches de recherche ou de cadrage répétitives, ce qui « réduit considérablement le temps nécessaire pour créer un site web » (Source advisuel.com).

➔ Les avantages concrets d’une IA comme ChatGPT-4

Gain de temps et productivité

L’IA accélère de nombreuses tâches fastidieuses (recherche de code, synthèse de documentation, génération de texte), ce qui permet de se concentrer sur la vision globale du projet. En automatisant ces tâches répétitives ou techniques, on gagne en efficacité dans le processus de création (Source : advisuel.com).

Assistance 24h/24

ChatGPT est disponible à toute heure pour répondre à une question ou fournir un avis. Pas besoin d’attendre la réponse d’un collègue développeur ou de fouiller des forums pendant des heures. Cette disponibilité a été précieuse pour itérer rapidement.

Rappel des bonnes pratiques

J’ai de l’expérience en UX et ergonomie, et elle le sait. Je sais ce que je veux, mais ChatGPT joue un peu le rôle de filet de sécurité en faisant des rappels, par exemple, au responsive design ou encore en vérifiant la conformité RGPD (ce qu’il a fait notamment pour l’intégration des polices locales, voir plus loin) ou encore en fournissant des check-lists et des conseils basés sur l’état de l’art.

Booster de créativité

Paradoxalement, échanger avec l’IA stimule aussi la réflexion. En proposant des idées de design ou de contenu, même génériques, ChatGPT m’a permis d’envisager des directions auxquelles je n’aurais pas forcément pensé spontanément. Il sert de moteur à idées en phase de brainstorming.

Je préfère travailler avec des humains. Mais je préfère travailler avec une IA plutôt que tout seul dans bien des cas, car cela nous impose de réfléchir autrement, de reformuler, de se faire challenger, ce qui vient stimuler sa propre créativité et imagination.

Cependant, tout n’est pas rose dans la collaboration avec une IA et il faut connaître ses limites pour en tirer le meilleur parti.

➔ Garder un œil critique : les limites et risques à anticiper

Pas de véritable créativité ni de sensibilité humaine, risques de standardisations

ChatGPT, aussi avancé soit-il, reste un modèle statistique. Il manque de la créativité et de l’innovation qu’un designer humain peut apporter, et ses propositions peuvent manquer de personnalité. Il a tendance à donner des solutions génériques, déjà vues (puisqu’il s’entraîne sur de l’existant). Il faut donc éviter de prendre ses idées pour argent comptant, et toujours les adapter pour se démarquer et correspondre à son identité propre.

Des designs uniformes – Lié au point précédent, un risque en s’appuyant trop sur l’IA est de se retrouver avec un site « formaté » comme d’autres. Par exemple, si ChatGPT propose une structure de page standard et qu’on l’applique telle quelle, on obtient quelque chose d’efficace mais de peu original. Plusieurs utilisateurs pourraient recevoir les mêmes suggestions, aboutissant à des sites au look similaire. L’intervention humaine est donc cruciale pour injecter de l’unicité et de la personnalité dans le design.

Besoins de vérification et de contrôle. Le plus gros point noir à mon sens

ChatGPT n’est pas infaillible. Il lui arrive de se tromper ou de proposer du code erroné, de s’enfoncer dans des « tunnels » d’erreurs en cascade, ce qui, tout d’abord, peut être extrêmement chronophage (et donc à l’inverse de ce dont on en attend) ou pire, mener à des catastrophes ou de la casse. Il peut affirmer des choses fausses, même en lui rappelant sans cesse de ne pas être affirmatif, d’étayer… De mon point de vue, c’est son plus gros défaut. Dans notre collaboration, j’ai dû vérifier chaque recommandation technique avant de l’appliquer. Par exemple, l’IA m’a suggéré une requête SQL pour convertir mes anciens posts de portfolio en articles standards : j’ai dû la tester sur une copie de la base et ajuster certaines syntaxes. Aucune action n’a été faite aveuglément. L’IA est un excellent assistant, mais il faut garder le manche. En ergonomie, on parle d’automation surveillée, et c’est exactement cela : j’ai utilisé l’IA pour aller plus vite, tout en gardant constamment le contrôle humain et en validant chaque étape avec mon expertise.

En ergonomie, bien avant l’ère de l’IA générative actuelle, nous connaissons depuis longtemps les problématiques de supervision de systèmes automatisés, de coopération entre les hommes et les machines. C’est d’ailleurs ici, depuis un peu plus d’un siècle, que l’ergonomie moderne est née : dans les cockpits et dans les salles de contrôle de systèmes complexes où des hommes supervisent des machines intégrant des automatismes.

Dépendance et perte de compétences

Un écueil à éviter est de devenir dépendant de l’IA pour la moindre décision. Il était tentant parfois de demander à ChatGPT de rédiger directement un paragraphe de présentation ou de générer un style CSS complet. Je l’ai fait ponctuellement, mais toujours en retravaillant ensuite le résultat. Je reste conscient que s’appuyer excessivement sur l’IA peut faire régresser certaines compétences sur le long terme. Il est important de continuer à pratiquer et à décider par soi-même, sans quoi on risque de perdre la maîtrise technique ou rédactionnelle. ChatGPT doit rester un outil, pas un remplaçant de notre savoir-faire. Ce point ouvre un très vaste débat concernant les risques et les enjeux de l’introduction de l’IA sur les compétences et métiers. C’était un des volets traité dans une expertise que j’ai réalisé récemment pour un leader de l’informatique européen.

Analyse et conseil stratégique sur l'introduction de systèmes d'intelligence artificielle - Pierre Lannes

2025 – Dans le cadre d’une mission d’expertise habilitée, j’ai accompagné un grand groupe européen du secteur IT dans l’analyse et l’orientation stratégique de l’intégration de systèmes d’intelligence artificielle (IA). L’intervention a couvert les volets suivants : organisation, évolution de l’offre de services, transformation des processus internes, accompagnement des métiers (formation,…

Pierre Lannes

En résumé, cette première partie de l’aventure montre que ChatGPT-4 a été un formidable allié, m’offrant support et gain de temps, mais qu’il a fallu l’utiliser de manière réfléchie. L’IA n’est pas (encore) une baguette magique capable de refaire votre site toute seule gratuitement – c’est votre expertise combinée à la sienne qui fait la différence. D’ailleurs, même les experts du domaine soulignent que « l’IA est un excellent outil pour automatiser certaines étapes […]. Toutefois, elle ne remplace pas la créativité et la sensibilité humaines […] pour des sites plus personnalisés ou complexes, l’intervention humaine reste indispensable » (Source:  advisuel.com). Ce projet en collaboration avec ChatGPT illustre bien ce principe : j’ai pu accélérer et sécuriser ma refonte grâce à l’IA, tout en imprimant ma patte et en prenant chaque décision finale.

Dans la partie suivante, nous allons voir pourquoi j’ai entrepris cette refonte totale. Quels étaient les problèmes de l’ancienne version du site, et quels objectifs m’ont poussé à tout recommencer sur de nouvelles bases.

2. Pourquoi refondre ? Un site plus léger, résilient et épuré

Mon site professionnel existait depuis de nombreuses années et avait connu plusieurs évolutions. Avant la refonte, il tournait sous WordPress avec un thème premium nommé Bridge (par Qode), très populaire il y a quelques années. Ce thème était couplé au constructeur de pages WPBakery (anciennement Visual Composer), un plugin de page builder visuel intégré. Si cette solution m’avait permis à l’époque de bâtir un site au design riche sans coder, elle montrait désormais ses limites. Voici les raisons principales qui m’ont poussé à abandonner l’ancienne version.

Un site devenu lourd et lent à charger

Le thème Bridge est un thème « tout-en-un » offrant des dizaines de modèles et de fonctionnalités (sliders, animations, portfolio intégré, etc.), embarquant énormément de code même pour des fonctions que je n’utilisais pas. De même, WPBakery injecte de nombreux shortcodes et scripts pour chaque mise en page. Des tests comparatifs indiquent qu’en moyenne, un site construit avec un page builder peut charger jusqu’à 57 % plus lentement que le même site réalisé avec l’éditeur Gutenberg natif (Source : kalamuna.com), l’éditeur de blocs de WordPress. Cette différence de performance, due à l’excès de code embarqué, pénalise l’expérience utilisateur et potentiellement le référencement dans les moteurs de recherche. L’objectif de la refonte était donc d’alléger drastiquement le site pour améliorer sa rapidité.

Une maintenance complexe et des mises à jour risquées

Utiliser un thème lourd et un page builder rend les mises à jour de WordPress délicates. Chaque nouvelle version du CMS ou de PHP peut casser des éléments du thème Bridge ou de WPBakery. D’ailleurs, mettre à jour le thème Bridge nécessitait d’attendre des patchs du fournisseur, et WPBakery devait aussi être mis à jour séparément (parfois via une licence). Cela créait une dépendance vis-à-vis de l’éditeur du thème. De plus, la quantité d’extensions installées augmentait les risques de conflit ou de faille de sécurité. Je voulais un site plus résilient, c’est-à-dire capable de traverser les évolutions sans encombre, en s’appuyant un maximum sur le noyau WordPress natif (core) plutôt que sur des couches tierces. En passant à un site “allégé”, je réduis la surface d’attaque et les problèmes de compatibilité, et gagne en stabilité sur le long terme.

Le verrouillage du contenu (“content lock-in”)

C’est un problème bien connu des sites construits avec des page builders propriétaires. Concrètement, si vous désactivez WPBakery/Bridge, vos pages ne ressemblent plus à rien. Elles affichent une bouillie de shortcodes invraisemblables (Source : kalamuna.com). En refondant le site avec les blocs WordPress (Gutenberg) qui sont maintenant intégrés au core, je m’assure que mes articles et pages resteront lisibles et éditables peu importe le thème actif. WordPress évolue désormais vers plus de standardisation avec les block themes, il était logique d’embrasser ce mouvement pour pérenniser mes contenus.

Une interface d’édition contraignante pour le blog 

WPBakery permettait de jolis layouts, mais pour rédiger un simple article de blog, c’était overkill. L’éditeur était lourd, peu ergonomique pour du texte, avec des shortcodes partout dans le contenu en mode édition. À l’inverse, le nouvel éditeur WordPress (Gutenberg) offre une expérience bien plus fluide pour la rédaction : on voit directement à l’écran le rendu, on peut structurer avec des blocs (paragraphes, images, titres, etc.) de façon claire.

Un design à moderniser et épurer

Sur le plan visuel, mon ancien site n’était pas « moche », mais il commençait à dater. J’avais par exemple une colonne latérale (sidebar) avec des widgets, des effets de transition au scroll, etc., hérités de l’ère des blogs des années 2010. Aujourd’hui les tendances design penchent vers plus d’aération, de minimalisme, et surtout un usage majoritaire du mobile qui rend les sidebars souvent superflues. J’ai donc voulu simplifier l’interface : tout est centré sur le contenu principal, j’ai retiré les animations gadgets pour revenir à quelque chose de plus sobre.

En termes de style, j’ai opté pour un design très épuré qui met en valeur le contenu et la lecture, avec une palette restreinte respectant ma charte graphique mais sans fioritures. Cette épuration visuelle s’aligne avec mon positionnement professionnel (ergonomie, design centré sur l’utilisateur) : un site simple d’apparence, mais efficace pour communiquer l’essentiel.

En résumé, la refonte s’est imposée car sous le capot, il y avait trop de complexité et de lourdeur. Mon objectif était triple : alléger (pour la performance), standardiser (pour la maintenabilité et la durabilité), et simplifier (pour l’UX et l’édition de contenu). À l’arrivée, même si en apparence le site reste dans la continuité (mêmes contenus, même auteur ), les changements techniques sont majeurs. J’ai pratiquement divisé par deux le nombre d’extensions actives, éliminé tout ce qui était spécifique au thème précédent, et adopté une solution WordPress beaucoup plus « pure » et pérenne.

Dans la partie suivante, entrons dans le concret : comment avons-nous procédé avec notre amie ChatGPT-4 pour réaliser cette refonte ? Quelles étapes ont été suivies, et quelles solutions techniques mises en place pour atteindre ces objectifs ?

3. Repartir sur des bases saines : réalisation technique de la refonte

Une refonte complète implique généralement de réinstaller un nouveau site et d’y migrer les contenus de l’ancien. C’est exactement l’approche que j’ai suivie : nouveau serveur de test, installation fraîche de WordPress, puis import des données et mise en place du nouveau thème/configuration, avant de mettre en production. J’ai pu m’appuyer sur ChatGPT-4 pour planifier ce chantier et éviter d’oublier des étapes. Voici un aperçu détaillé des actions réalisées.

Importation et conversion des contenus de l’ancien site

Export des données depuis l’ancien site

Sur le site sous Bridge/WPBakery, j’ai exporté l’ensemble des contenus à l’aide des outils WordPress (fichiers XML d’export pour les articles, pages, menus, médias…). Cela m’a permis de récupérer mes textes et images. J’ai également veillé à exporter les réglages SEO : j’utilisais le plugin All In One SEO (AIOSEO) auparavant, qui stocke les balises méta (titres SEO, descriptions, etc.). Il était crucial de ne pas perdre ce travail de référencement lors de la migration.

Import dans le nouveau site WordPress vierge

J’ai installé un nouveau WordPress minimal sur un hébergement de test. Aucune extension superflue, juste le nécessaire. J’ai importé le fichier XML des contenus via l’outil d’import natif (ce qui a recréé tous mes articles, pages et médias dans la base). J’ai installé le plugin SEO Press (mon choix pour remplacer AIOSEO, plus moderne et léger) et utilisé sa fonction d’importation des métadonnées SEO depuis AIOSEO. Ainsi, toutes mes pages ont conservé leurs optimisations SEO (titres personnalisés, descriptions, textes ALT d’images…) après la migration, malgré le changement de plugin.

Conversion de l’ancien portfolio en articles standards

Sur mon ancien site, le thème Bridge utilisait un type de contenu personnalisé “Portfolio” pour présenter mes Missions réalisées. Plutôt que de conserver ce format propriétaire, j’ai décidé d’intégrer ces réalisations comme des articles WordPress, standards pour m’éviter d’installer un plugin de portfolio, faciliter et alléger l’édition de ces contenus. Avec l’aide de ChatGPT, j’ai mis au point une requête SQL permettant de transformer ces entrées de portfolio en articles WordPress normaux. Techniquement, cela revient à changer la valeur post_type de chaque entrée portfolio en post dans la table de la base de données, et à remapper les taxonomies associées (les catégories/étiquettes du portfolio ont été converties en catégories du blog). Cette manipulation s’est bien déroulée et m’a fait gagner un temps fou : plutôt que de copier-coller chaque ancien projet manuellement, tout a été converti en une opération.

Nettoyage de la base de données

Après ces opérations, j’ai passé un petit coup de balai dans la base WordPress. J’ai supprimé les tables laissées par l’ancien thème et ses plugins (par exemple les tables spécifiques à Bridge ou WPBakery s’il y en avait, ainsi que des entrées wp_options obsolètes). J’ai aussi vérifié qu’il n’y avait pas d’erreurs d’encodage, et reconstruit les permaliens. L’idée était d’avoir une base propre et allégée, sans vestiges du passé, afin d’assurer les meilleures performances et éviter tout conflit. Ce nettoyage s’apparente à un démarrage frais : on élimine tout le “gras” accumulé.

À ce stade, sur le nouveau site, tous mes contenus étaient en place (articles, pages, images, menus) mais avec le thème WordPress par défaut et aucune personnalisation visuelle. J’avais donc un site fonctionnel mais très brut visuellement. La prochaine étape a été de construire le nouveau design minimaliste et la structure du site selon les principes définis.

Minimalisme, thème enfant et Full Site Editing

De Blocksy à Blockbase : pourquoi ce choix ?

Au début du projet, j’ai testé le thème Blocksy — moderne et riche en options —, mais je me suis vite rendu compte qu’il regorgeait encore de fonctionnalités non indispensables (scripts dynamiques, système de hooks propriétaire, panneau d’options très lourd). Je cherchais quelque chose de plus minimaliste et 100 % axé Full Site Editing (FSE) l’éditeur de site complet introduit dans WordPress 5.9 (Source : wpmarmite.com). Pour faire simple, le FSE permet d’éditer non seulement le contenu des pages, mais aussi le header, footer, modèles d’articles… le tout depuis l’interface WordPress avec des blocs, sans écrire une ligne de code.

C’est ainsi que je me suis orienté vers Blockbase, un thème parent FSE ultra minimaliste fourni et maintenu par les développeurs de WordPress (société Automattic). Blockbase fournit :

• Un socle ultra-léger (quelques templates et un fichier theme.json concis) offrant une bonne base “minimum syndical” pour construire sa propre identité visuelle,
• Aucun framework JS supplémentaire,
• La garantie d’une compatibilité native avec l’éditeur de site WordPress.

J’ai donc créé blockbase-child, mon thème enfant, pour surcharger les styles (style.css), embarquer mes polices locales et ajouter quelques fonctions PHP mineures sans toucher au code du thème parent (ce qui assure qu’on pourra mettre à jour le parent sans perdre nos modifications). Dans mon thème enfant, j’ai surtout travaillé sur le fichier style.css pour y définir mes styles personnalisés :

• Couleurs exactes de ma charte, choix typographiques, marges et mises en page spécifiques
• Comme dans la version précédente de mon site, il y a 2 styles : un pour le mode clair, et un pour le mode sombre : ils se chargent automatiquement en fonction de la configuration du système de l’utilisateur consultant le site

• Intégration des polices de caractères en local plutôt que de les appeler depuis l’extérieur. Cela présente plusieurs avantages : aucune requête externe n’est nécessaire pour les polices, ce qui améliore les temps de chargement et l’indépendance du site vis-à-vis de services tiers (Source : blog.raidboxes.io), et c’est également bien plus respectueux du RGPD : plus de transfert de l’IP du visiteur vers Google Fonts pour charger la police de caractère.
• En plus du CSS, j’ai défini un fichier de fonctions du thème enfant pour de légers ajustements. L’ensemble de ces personnalisations m’a permis d’atteindre un design épuré sur mesure : un fond clair, une typo professionnelle, un rendu compatible sur mobile et desktop, le tout sans l’encombrement d’un page builder.

Un design épuré et centré contenu

Comme évoqué précédemment, j’ai supprimé les éléments visuels superflus. Concrètement, le site adopte désormais une mise en page sur une seule colonne (plus de sidebar latérale). Le menu de navigation est en haut de page de façon classique ainsi que le pied de page. Les articles de blog s’affichent avec une largeur de texte confortable pour la lecture, sans distractions autour. J’ai également limité la palette de couleurs aux tons de ma charte, sans ajouter d’effets graphiques inutiles. Moins d’effets = plus de clarté pour le lecteur. Les quelques illustrations présentes servent le contenu. Cette sobriété rend le site non seulement plus élégant et lisible, mais contribue aussi aux performances (moins d’images de déco, moins de scripts d’animation, etc.). C’est en phase avec le courant du minimalisme web dont l’un des bénéfices est justement d’accélérer le site et d’améliorer le SEO en réduisant le temps de chargement (Source : crocoblock.com).

Utilisation du système de blocs (Gutenberg) et du Full Site Editing

L’une des évolutions majeures de WordPress ces dernières années est l’éditeur Gutenberg et le FSE. Je souhaitais capitaliser sur cet outil pour faciliter la gestion du site à l’avenir. Concrètement, après avoir activé mon thème enfant Blockbase, je suis passé par l’éditeur de site (Apparence > Éditeur dans l’admin WP) pour personnaliser mes gabarits : articles de blog, page d’accueil, de contact, etc., en assemblant des blocs (en-tête, titre du site, liste des derniers articles, zone de contenu, formulaire de commentaire, pied de page…). C’est un plaisir de pouvoir faire cela visuellement, en direct, sans toucher au PHP : WordPress affiche une prévisualisation du site et on glisse/dépose les blocs souhaités. Et si un jour je veux changer la disposition d’un élément (par ex. placer la date sous le titre ou inversement), je peux le faire en 3 clics dans cet éditeur de site.

En parallèle, pour la rédaction au quotidien, j’utilise maintenant pleinement l’éditeur de blocs Gutenberg. Plus besoin de WPBakery : quand je créé un nouvel article, j’ai une page blanche où chaque paragraphe, image ou citation est un bloc qu’on peut styliser et déplacer facilement. C’est bien plus intuitif pour un utilisateur lambda qu’un builder à interface complexe. D’ailleurs, en n’ayant plus qu’un seul système (les blocs natifs) à maîtriser, je simplifie la formation et la maintenance : « Parce que Gutenberg fait partie de WordPress, il suffit de former les éditeurs de contenu sur un seul système, pas deux » note un expert (Source : kalamuna.com). C’est exactement ce que je recherchais : unifier l’expérience d’édition.

Réduction drastique des extensions

Qui dit simplicité dit aussi limiter le nombre de plugins. J’ai pu supprimer plusieurs extensions liées à l’ancien thème (slider, portfolio, page builder…). À présent, le site tourne avec moins d’extensions : essentiellement SEOPress pour le référencement, cache/performance (pour servir les pages encore plus vite aux visiteurs, bien que le site soit déjà rapide, un cache ne fait pas de mal), 2 extensions pour la sécurité, une autre pour le formulaire de contact ; globalement, une dizaine d’extensions, contre plus d’un quinzaine auparavant. Chaque plugin en moins, c’est du code en moins, donc potentiellement des gains de performance et moins de risques de faille. C’est en cela que le site est plus léger et maintenable : la plupart des fonctions sont assurées soit par WordPress lui-même, soit par quelques dizaines de lignes dans le thème enfant, plutôt que par de grosses extensions.

Une extension « maison » développée avec ChatGPT-4

L’interface de recherche (icône loupe en haut à droite de ce site) lance une fenêtre modale pleine page pour faire une recherche sur le site en utilisant les fonctionnalités standards intégrées à WordPress. Comme je voulais quelque chose de spécifique et de très léger, j’ai fait du sur mesure avec ChatGPT-4 qui m’a développé une grande partie du code. Je lui ai fait faire quelques ajustements et j’ai codé le style CSS moi-même.

En conclusion

Cette refonte de mon site professionnel en collaboration avec ChatGPT-4 a été une expérience enrichissante. Le résultat est à la hauteur de mes attentes : un site à l’apparence sobre et professionnelle, qui cache une architecture modernisée et épurée. J’y ai gagné en vitesse (le site se charge beaucoup plus vite qu’avant), en flexibilité (je peux faire évoluer la mise en page ou les contenus très facilement grâce aux blocs), et en sérénité (moins de bugs à craindre lors des mises à jour, un codebase allégé que je comprends de A à Z).

Travailler avec ChatGPT-4 m’a clairement fait gagner du temps et m’a aidé à éviter bien des écueils techniques, tout en me permettant d’apprendre de nouvelles astuces au passage. Cette collaboration humain + IA illustre bien comment on peut, dès aujourd’hui, mener un projet web de bout en bout en tirant parti de l’intelligence artificielle sans jamais perdre la main sur les décisions. Les avantages sont nombreux – assistance, inspiration, efficacité – à condition de rester maître du processus et de ne pas tomber dans la facilité de tout déléguer aveuglément.

Si vous envisagez vous aussi de refondre votre site (ou tout autre projet de design), je ne peux que vous conseiller d’essayer cet accompagnement d’un nouveau genre. Bien utilisé, ChatGPT-4 peut être un véritable catalyseur pour vos projets numériques, vous permettant d’aller plus loin et plus vite, tout en enrichissant votre propre expertise. Et qui sait, vous aurez peut-être, comme moi, envie de raconter cette expérience innovante sur votre blog  !

Ce billet est une compilation des différentes bidouilles et hacks qui m’ont permis de faire tourner parfaitement le composant de newsletter / e-mailing  YaNC sous Joomla! 1.5 sur mes sites webs (sachant que YaNC, dans sa version actuelle, ne fonctionne qu’avec Joomla! 1.0)

Les modifications mentionné ici ont permis de faire fonctionner YaNC sur 2 sites sous Joomla! 1.5 chez 2 hébergeurs différents :

• Le site du DODO Surf Club sur un hébergement mutualisé chez OVH PHP 5.2.10
• Le site des Pénibles de Mauvezin sur un un serveur dédié chez Haisoft PHP 5.1.6

Yanc, un excellent système de Newsletter pour Joomla!

Le composant YaNC, considéré par beaucoup comme le meilleur système de Newsletter pour Joomla!, n’évolue plus 2 ans. La version disponible au téléchargement sur le site du développeur n’est pas compatible avec Joomla 1.5, et ce malgré l’activation du plugin Legacy Mode. Ce plugin rend possible l’installation et le fonctionnement sous Joomla! 1.5 de certains composants, modules, etc. de l’ancien Joomla! 1.0. (le support de la branche 1.0 de Joomla! a été abandonné officiellement le 22 juillet dernier).

Le développeur de YaNC semble se décider à travailler sur une version 2 de son composant, pour Joomla! 1.5. Mais la roadmap reste incertaine. On peut se replier vers certains composants alternatifs avec des capacités d’import d’autres composants de Newsletter, comme Acajoom, mais en ce qui me concerne étant habitué à YaNC j’ai essayé (et réussi) à le faire tourner sur Joomla! 1.5.

Les fonctionnalités de YaNC

• Multilingue
• Gestion de plusieurs Newsletters
• Possibilité de personnaliser et gérer plusieurs templates pour les e-mails
• Gestion de plusieurs listes d’abonnés (e-mails) avec fonction d’import/export de listes (formats XML, CSV)
• Gestion de l’association d’un abonné avec un compte utilisateur Joomla! / Community Builder
• Possibilités pour les visiteurs du site de s’inscrire à une newsletter depuis un module ou une page
• Possibilité pour un utilisateur du site de gérer ses inscriptions aux newsletters depuis la modification de son profil Community Builder
• Possibilité pour les administrateurs de créer, supprimer, confirmer, bloquer des abonnés
• Possibilité d’envois automatique d’e-mails de confirmation d’inscription/désinscription aux abonnés et à l’administrateur
• Possibilité de donner accès aux archives des emails aux visiteurs et utilisateurs du site dans le front-end
• Gestion des niveaux d’accès Joomla!
• Possibilité de renvoyer des éléments d’archives depuis le site pour tout visiteur ou utilisateur
• Envoi d’e-mails aux formats HTML et texte
• Gestion des éditeurs WYSIWYG de Joomla! (TinyMCE, JCE, etc.)
• Insertion d’images et de pièces jointes dans les e-mails
• Inclusion de lien de désabonnement
• Enregistrement et affichage d’aperçu avant d’envoyer l’e-mailing
• Indicateur de progression d’envoi de Newsletter en AJAX
• Planification des envois automatiques
• Différents moyens d’envoyer des mails: PHP mail, sendmail ou SMTP
• Statistiques sur la lecture des mails par les abonnés et les clicks sur les liens contenus dans les e-mails

Les différents hacks et bidouilles à opérer pour faire tourner YaNC sous Joomla! 1.5

Installer la version « trunk » du 20 juin 2008

Pour installer Yanc! et le faire fonctionner il faudra que vous activiez le plugin Legacy Mode dans votre Joomla! 1.5.

Il vous faudra d’abord récupérer une version « tronquée » du composant YaNC réalisée par le développeur lui-même. Comme c’est la galère pour récupérer cette fameuse version, je vous la mets à disposition ici :

[download id= »2″]

Installation d’un fichier de langue française complet et paramétrage de l’affichage des accents

La version de langue française dans le package d’installation est incomplet, et incompatible avec le format d’affichage UTF-8 (configuration de caractère standard pour des sites en PHP 5.x). Ci-dessous un fichier complet au bon format, à déposer dans le répertoire /administrator/components/com_yanc/language :

[download id= »1″]

Dans le panneau d’administration du composant, il faudra également, dans la configuration du composant, saisir la valeur « UTF-8 » dans le champ « Encodage du message », pour éviter des titres d’emails illisibles.

Correction du problème d’apparition d’Antislash (stripslashes) dans les textes

Le problème : Yanc! a la fâcheuse tendance à rajouter un « \ » avant les apostrophes dans les textes a chaque enregistrement de données.

Source du hack : fix for problem in administrator when magic quotes are switched on

Dans les fichiers letter.php, mailing.php et subscriber.php (répertoire administrator/components/com_yanc/classes) au niveau de la fonction save() :

rajouter le code:

$_POST = yanc::fix_magic_quotes($_POST);

au dessus de la ligne :

$row->bind($_POST);

ce qui donne donc :

$_POST = yanc::fix_magic_quotes($_POST);
$row->bind($_POST);

Dans le fichier /administrator/components/com_yanc/yanc.class.php, rajoutez la fonction suivante dans la classe « yanc » :

Juste après :

class yanc {

rajouter :

function fix_magic_quotes($a)
{
if(!get_magic_quotes_gpc())
return $a;
foreach($a as $key=>$val)
if(!is_array($val))
$a[$key] = stripslashes($val);
return $a;
}

Intégration avec le composant Community Builder

Le composant Community Builder intègre un plugin « YaNC 1.4b3 Newsletters » qui permet à un utilisateur, lors de son inscription sur le site ou lors de la modification de son profil, de gérer son inscription aux Newsletters auxquelles il a accès sur le site. Pour faire fonctionner cela sous Joomla! 1.5, il faut faire quelques modifications.

Source du hack numéro 1 : Yanc 1.5x – Compatible with Joomla 1.5.3?

Dans /components/com_yanc/yanc.html.php

Ramplacer (à la ligne line 73 ou 99 environ ?) :

$my->load( );

par

$my = & JFactory::getUser();

Source du hack numéro 2 : Getting YaNC Working With CB 1.2 RC4

Modifier le fichier /administrator/components/com_yanc/classes/subscriber.php

Sous la fonction :

confirm($hash)

changer la ligne :

echo "<script> 
alert('". Y_FRONT_SUBSCRIPTION_CONFIRMED . "'); 
document.location.href='index.php?option=$option&Itemid=$Itemid';
</script>\n";

par :

echo "<script> 
alert('". Y_FRONT_SUBSCRIPTION_CONFIRMED . "'); 
document.location.href='index.php?view=article&id=129';
</script>\n";

Correction du problème d’affichage des pages dans le front-end

Le problème : lorsqu’on veut accèder à une archive d’e-mail ou utiliser le fonction de transfert d’une archive, l’affichage pête complétement la page /template du site.

La solution : dans le fichier yanc.html.php, la chaine  &no_html=1 doit être supprimée

Pour cela, dans le fichier

Ramplacer :

sefRelToAbs('index2.php?option=' 
. $option . '&act=archive&task=view&cid=' 
. $mailing->id . '&Itemid=' . $Itemid . 
'&no_html=1');

Par :

sefRelToAbs('index2.php?option=' 
. $option . '&act=archive&task=view&cid=' 
. $mailing->id . '&Itemid=' 
. $Itemid);

Correction du problème des boutons inactifs dans le front-end

Le problème : les boutons accessibles dans le front-end du site ne fonctionnent pas : confirmation d’abonnement à une newsletter, confirmation d’envoi d’un e-mail archivé à un ami, etc.

La solution : rajouter le script joomla.javascript.js dans la balise head du fichier index.php de votre template actif :

<head>
<jdoc:include type="head" />
<script src="<?php echo $this->baseurl ?>/includes/js/joomla.javascript.js" type="text/javascript"></script>
(...)

Enlever un petit message d’erreur dans le front-end lors de la visualisation d’une archive d’e-mail en plein écran

Le problème : j’ai pu constater l’apparition d’un petit message d’erreur en haut de page lors de la visualisation d’une archive d’e-mail en plein écran dans le front-end. Cela était visible sur un seul de mes deux sites (la différence entre les deux sites vient sans doute de la configuration de l’affichage des erreurs sur le serveur).

La solution : j’ai modifié le fichier plugins/yanc/core.php en remplacant la chaine

#__mambots

par la chaîne

#__plugins

Voilà ! Maintenant bon e-mailing et bon Joomla! à vous !

Un bon CMS qui aime frôler la mort

Joomla! est un CMS – système de gestion de contenu – qui permet de gérer un site web. Alors qu’il vient de fêter ses 4 ans le premier septembre dernier, le moins que l’on puisse dire est que sa petite enfance a été particulièrement chaotique, mais c’est finalement un peu le lot de ces bons outils fournis gratuitement à la communauté. Il faut aussi en être un sacré fan ou/et aimer le risque pour l’avoir utilisé depuis ses débuts….

Ce n’est pas un hasard si on devient fan de Joomla! : une fois la bête apprivoisée c’est un formidable gestionnaire de site, qui permet notamment de réaliser un des objectifs ultimes d’un bon site web : faciliter l’animation d’un site en rendant autonomes et efficaces les contributeurs et rédacteurs du site, qui vont pouvoir gérer avec aisance la création et le suivi du contenu de leur site.

Dans mon cas personnel, j’ai failli abandonner Joomla! il y a peu. Mais finalement j’ai réussi à migrer mes sites vers la nouvelle version avec très peu de pertes et de dégâts. Je vais y revenir ci-dessous, dans un style se situant entre le tutoriel et le retour d’expérience sur la migration. En attendant, un peu d’histoire…

De Mambo Open Source à Joomla! : un passage en douceur…

La plupart des sites webs que je conçois et administre fonctionnaient à partir de 2003 avec le CMS Mambo Open Source. En 2005, Mambo est dans la tourmente, et la branche libre et open source du CMS devient Joomla!. Quelques temps plus tard, je réalise la migration de mes sites de Mambo vers Joomla!. Le code informatique des 2 branches est alors très proche à ce moment là, et la migration du contenu, templates, composants, modules et plugins (encore appelés « mambots » à l’époque) est donc facile.

De Joomla! 1.0 à Joomla! 1.5 : une violente rupture sous la douce apparence d’un + 0.5

La communauté des développeurs et contributeurs du projet réalise un formidable travail et fait preuve d’une grande dévotion…. et de patience, face à des utilisateurs aux questions déjà traitées plusieurs fois dans les forums, mais peut être est-ce la rançon du succès ? Alors que la certains utilisateurs (comme moi) dormaient tranquillement pendant que leurs sites ronronnaient aussi tranquillement sous Joomla!, nous avons eu un réveil difficile début 2008.

Avec la sortie de la nouvelle 1.5 de Joomla!, c’est un virage brutal dans les fondements du framework, marquant une rupture avec les branches Mambo/Joomla! 1.0. Conséquence : les anciens templates, composants, modules et plugins deviennent incompatibles entre les versions 1.0.x et 1.5.x de Joomla! Un plugin Legacy Mode est censé permettre la compatibilité pour les différents modules, composants et mambots/plugins, mais ce plugin ne fonctionne pas systématiquement avec certains d’entre eux. En ce qui concerne les templates, les anciennes versions ne fonctionnent plus. Bref, C’EST L’HORREUR…. . On a forcément une pensée pour les généreux créateurs de templates, composants, plugins et modules, mettant à disposition leur travail gratuitement : c’est tout leur travail qui est remis en question…

Un an et demi pour enfin disposer du nécessaire pour envisager une migration de Joomla! 1.0.x à Joomla! 1.5.x

Au début, les procédures de migrations sont réduites aux fonctions natives de Joomla!, c’est à dire : sections et catégories, contenus des articles, groupes et utilisateurs/groupes, liens web, contacts…. Le composant de migration Migrator pour Joomla! 1.0.x. est le composant officiellement recommandé. Progressivement, des plugins complémentaires pour Migrator sont mis à disposition pour pouvoir migrer les données des composants : il faut laisser le temps aux développeurs de faire les adaptations. Tout cela représente un énorme travail qui prendra du temps… En ce qui me concerne, le composant Migrator se révèlera inefficace, j’aurai beaucoup de mauvaises surprises sur l’import des données, j’ai donc abandonné cette piste.

Heureusement, depuis quelques temps, le composant Mtwmigrator, permettant l’import de données directement depuis Joomla! 1.5 en allant récupérer et convertir les données depuis la base de l’ancien site sous Joomla! 1.0.x., s’est révélé efficace pour mes sites web, malgré encore quelques imperfections.

Certains composants pour Joomla! 1.5, eux, fonctionnent très bien avec les données contenues dans les anciennes bases, d’autres intègrent des fonctions d’importations des données de leurs anciennes versions ou même de données de composants équivalents fonctionnellement, j’y reviendrais plus bas.

Dans mon cas il aura donc fallu attendre un an et demi pour que la migration devienne donc réellement envisageable… ça tombe bien, puisque le support de la branche 1.0 de Joomla! a été abandonné officiellement le 22 juillet dernier.

Le plus gros frein au changement : d’excellents composants pour Joomla! 1.0 qui ne fonctionnent plus et ne sont pas mis à jour pour Joomla! 1.5

Même avec le mode de compatibilité pour les anciennes versions, certains composants (et leurs modules et plugins associés) ne fonctionnent pas sous Joomla! 1.5. Pour les développeurs, la mise à jour de leurs composants pour les rendre compatibles peut être un énorme boulot : certains projets seront alors abandonnés... C’est le cas de Zoom Media Gallery pour la gestion de galeries d’image, incompatible avec Joomla! 1.5, même en Legacy Mode. A mon sens, Zoom Media Gallery était de très loin le meilleur gestionnaire de galerie d’image pour Joomla!, et le seul composant avec lequel j’arrivais à faire tourner l’excellent Java JUplad, facilitant la vie des contributeurs de site pour uploader des fichiers images sur leur site web. Progressivement, de nouveaux composants de galerie de très bon niveau ont vu le jour pour Joomla! 1.5, citons parmi ceux-ci Phoca Gallery et Joomgallery. J’ai choisi ce dernier pour remplacer l’obsolète Zoom Media Gallery, mais sans avoir la possibilité d’importer directement les anciennes données, sauf à bidouiller des scripts de migration. Mais j’en ai marre des nuits blanches…

Le composant YaNC, considéré par beaucoup comme le meilleur système de Newsletter pour Joomla!, n’évolue plus 2 ans. Mais il le faut pas désespérer, puisque le développeur semble se décider à travailler sur une version 2 de son composant, pour Joomla! 1.5. Mais la roadmap reste incertaine. On peut se replier vers certains composants alternatifs avec des capacités d’import d’autres composants de Newsletter, comme Acajoom, mais en ce qui me concerne, je m’étais bien attaché à YaNC. C’est pour cela que moyennant quelques recherches et bidouilles, j’ai réussi à le faire tourner sur Joomla! 1.5, voir mon billet « Faire fonctionner le composant de newsletter YaNC sous Joomla! 1.5« .

Dans tous les cas, le fait que les composants YaNC et Zoom Media Gallery permettent des fonctionnalités parmi les plus importantes sur mes sites web, et qu’ils soient à l’abandon du fait de leur incompatibilité avec Joomla! 1.5, a failli me pousser à abandonner complètement Joomla!. Je pense que je ne suis pas le seul, quand on sait la place que prennent désormais d’autres CMS, également Open Source et gratuits…

Réaliser la migration vers Joomla 1.5

J’attire l’attention au lecteur sur le fait que le contenu ci-dessous n’est pas une procédure officielle, il s’agit simplement de faire partager (à toutes fins utiles) mon expérience personnelle en décrivant les procédés qui m’ont permis de réussir le migration de 2 sites webs :

• Le site du DODO Surf Club sur un hébergement mutualisé chez OVH PHP 5.2.10
• Le site des Pénibles de Mauvezin sur un serveur dédié chez Haisoft PHP 5.1.6

Installer un Joomla! 1.5

Tout d’abord, il vaut mieux commencer à faire une sauvegarde en local des fichiers et de la base de données du site en vieille version Joomla! 1.0.x., en laissant une version en ligne, pour faire plus tard l’importation des données, et des comparaisons de l’ancienne et la nouvelle version du site.

Il faut ensuite créer une nouvelle base de données, en notant les paramètres d’accès à cette base de données, puis installer un Joomla 1.5 en partant de zéro. Il vaut mieux l’installer sur le serveur d’hébergement (par exemple dans un sous répertoire du site actuel), c’est mieux que faire l’installation en local, ça évitera des problèmes de transfert liés aux différentes configurations par la suite.

Une fois le nouveau Joomla! 1.5 installé, il faut aller dans l’administration et activer le plugin Legacy Mode, afin de rendre possible l’installation de composants, modules, etc. de l’ancien Joomla! 1.0 compatibles avec la version 1.5.

Migrer les fichiers de contenu de Joomla! 1.0 à Joomla! 1.5

Il faut ensuite transférer le contenu de l’ancien répertoire /images vers le nouveau. Il ne faut pas transférer les fichiers qui ont été uploadés avec les différents composants du site existants (fichiers DOCman, images et fichiers issus d’attachement depuis un forum, fichiers de vidéos, mp3, etc.). Il faudra les transférer par la suite, dans les bons répertoires correspondants, une fois que les nouveaux composants seront installés sur la nouvelle version.

Je n’ai récupéré aucun fichier au niveau des composants et mambots/plugins.

Le cas particulier des fichiers de module

Concernant les fichiers liés aux modules, c’est peu plus compliqué et quelquefois au cas par cas :

• Pour les modules dont le fonctionnement est lié à des composants spécifiques, la suppression ou le remplacement de ces modules dépendra de la version du composant qu’on installera sur le nouveau site, de leur compatibilité, de la mise à disposition de nouveaux modules adaptés aux nouveaux composants installés, etc.
• J’ai choisi de ne pas récupèrer les fichiers des modules pour lesquels il existe une nouvelle version pour Joomla! 1.5 : pour trouver les nouvelles versions il faut faire des recherches sur le web (aller voir le lien web sur la ligne de descriptif du module, aller voir sur le site officiel des extensions) et récupérer les fichiers d’installations des nouvelles versions des modules pour Joomla! 1.5.
• Pour les vieux modules qui n’ont pas de versions pour Joomla! 1.5, la plupart tourneront en Legacy Mode sur la nouvelle version de Joomla! en 1.5. Il faut récupérer les fichiers et répertoires associés de l’ancienne version. Ensuite, il faut savoir que dans la version 1.5 de Joomla! les fichiers de module ne sont pas installés dans le répertoire racine /modules . Chacun des modules est dans un sous-répertoire spécifique sous /modules , portant le même nom que le fichier PHP principal du module. Par exemple si vous avez un fichier mod_birthday.php, il faudra créer un répertoire « mod_birthday » dans le répertoire /modules du nouveau Joomla!., et y transférer ensuite le fichier mod_birthday.php et mod_birthday.xml, et éventuellement le répertoire associé au module s’il existe (avec son contenu). Pour les paramètres des modules, ça se passe dans la base de données (voir plus bas).

Convertir son template Joomla! 1.0 en Joomla! 1.5

Tout d’abord, copier le (ou les) répertoires de votre (ou vos) ancien(s) template(s) vers le répertoire /templates de votre nouvelle installation Joomla! 1.5.

Une partie du code des templates pour Joomla! 1.0 (patrons de mise en page de votre site) devient incompatible avec Joomla! 1.5. En revanche, aucun problème avec les feuilles de styles CSS et images des templates : elles sont exploitables sans modifications. Dans mon cas, l’activation du plugin de compatibilité Legacy Mode avec Joomla! 1.0 n’aura aucun effet sur mes anciens templates : aucun ne fonctionnent. Pour les mettre à jour, ce sera « à l’ancienne », mettre les mains dans le cambouis, c’est à dire dans le code PHP, avec un bon vieil éditeur de texte. Ce n’est pas trop sorcier, il faut remplacer le code spécifique pour les commandes d’appels de fonctions Joomla!, faire des tests, chasser les lignes de code obsolètes, etc.

A la sortie de Joomla! 1.5, je ne trouve aucun tutoriel satisfaisant, c’est très énervant... et surprenant, quant on connait l’effervescente communauté d’utilisateurs de ce CMS… A croire que beaucoup d’entre eux avaient comme moi la gueule de bois en janvier 2008 avec la sortie de Joomla! 1.5. Ceux qui n’ont pas envie d’aller dans le code sont obligés d’utiliser de nouveaux templates, ou bien payent des prestataires pour réaliser la mise à jour de compatibilité de leur ancien template.

Heureusement, il y a des gens sympas : voir ce tableau récupéré dans un doc joint dans une discussion sur le forum francophone de Joomla! (j’y ai réalisé quelques modifications) faisant un petit inventaire des modifications à faire dans les fichiers de template (TemplateDetails.xml et index.php) :

Migration directe de données de Joomla! 1.0 à Joomla! 1.5

Certains composants pour Joomla! 1.5 fonctionnent très bien avec les données telles qu’elles existent dans les anciennes bases, ou bien ils intègrent des fonctions d’importations des données de leurs anciennes versions, au moment de l’installation : le gestionnaire de communauté Community Builder, Kunena Forum (qui exploite sans problème les données du composant de forum Fireboard, son prédécesseur), le gestionnaire multilingue Joomfish, le gestionnaire de jeux vidéos d’arcade PUarcade.

D’autres composants intègrent des fonctions d’importations de données de composants équivalents fonctionnellement. Dans mon cas le composant de messagerie privé UddeIM importe sans problème les messages issus de l’ancien composant JIM. Le composant de commentaires Jcomments importera les commentaires articles des composants AkoComments, mXcomments, (cf. image ci-dessous) , etc.

Pour tous ces composants, il faudra donc récupérer la structure et les données des tables concernées dans votre ancien site Joomla: 1.0, et les intégrer directement dans votre nouvelle base sous Joomla! 1.5. Ces fonctions sont faciles à réaliser avec l’utilitaire PhpMyAdmin, qui est mis à disposition en ligne par la plupart des hébergeurs.

Migration des autres données à l’aide d’un composant

Pour les données des fonctions natives de Joomla! (structure de menus, paramètres de modules, sections, catégories, articles, contacts, liens webs, sondages…) et pour certains composants, j’ai utilisé le composant Mtwmigrator.

Une fois le composant installé dans votre nouveau Joomla 1.5, il faut aller dans l’écran de configuration du composant (cf. image ci-dessous, cliquer sur celle-ci pour l’agrandir), saisir les données d’accès à votre ancienne base de données de votre ancien site en Joomla! 1.0 (serveur/host, nom de la base, identifiant et mot de passe de connexion à la base : ces informations sont disponibles dans le fichier configuration.php à la racine de votre ancien site).

Sur la partie droite de l’écran de configuration du composant, vous avez la possibilité de rajouter un import pour certains composants. Dans mon cas, je n’ai utilisé que l’import des données du composant de gestion de fichiers DOCman (à noter, ce composant ne dispose pas encore de version pour Joomla! 1.5, mais il fonctionne en Legacy Mode). Je ne me suis pas servi du composant Mtwmigrator pour l’import des données des composants Community Builder, Kunena Forum, Joomfish et PUarcade : je suis passé par l’import direct (voir paragraphe précédent).

Pour information, j’avais auparavant essayé d’importer les données de Community Builder avec Mtwmigrator, et ça n’avait pas marché (peut être à cause des champs additionnels dans les tables, générés par certains plugins de Community Builder ?). Dans mon cas, l’import direct des données (voir paragraphe précédent) pour Community Builder a parfaitement fonctionné.

Certaines fonctions de Mtwmigrator sont très efficaces. Par exemple, au niveau de l’import des articles, il récupère parfaitement les informations, et convertit même l’ancienne balise {mosimage} en lien vers les bonnes images.

Import des données de modules

En ce qui me concerne, le seul point noir concerne les modules. L’importation des données n’a pas marché, et cela sur les 2 sites que j’ai migré. Il a fallu donc faire un peu de bidouillage, au niveau des données des tables mos_modules et mos_module_menu. J’ai importé les données (pas la structure) des anciennes tables du site sous Joomla! 1.0, et fait un petit « UPDATE » sur les champ ID et MODULEID pour rajouter la valeur +10 200 :

UPDATE jos_modules SET id=id+10200

UPDATE jos_modules_menu SET moduleid=moduleid+10200

J’ai ensuite inséré ces données dans la base de données du nouveau site sous Joomla! 1.5 en veillant bien de ne pas écraser les valeurs existantes. Par bonheur, les structures de ces tables n’ont pas changé entre Joomla! 1.0 et Joomla! 1.5, ce qui fait que l’insertion de données de l’ancienne base est possible sans manipulation.

Ensuite, rendez-vous dans le panneau d’administration de Joomla! 1.5, il faut faire des tests et des modifications de paramétrages sur les modules, c’est du cas par cas. Les modules « utilisateurs » (custom) sont récupérés sans problème. En ce qui concerne les modules utilisateurs qui contiennent du code provenant de sites externes (javascript ou autre, c’est souvent le cas par exemple quand on veut installer un petit widget météo…), il faudra installer le module Custom Code for Joomla 1.5.

Installation des plugins

Dans la mesure du possible, il est recommandé d’installler les plugins les plus récents.

Dans le cadre de la migration de mes sites, il était important d’installer le plugin MosModule, qui fonctionne en en Legacy Mode, et permet d’afficher des modules dans des articles, technique que j’ai largement utilisée sur mes sites.

Bonne surprise, la dernière version (2.2.2) du plugin JCE Utilities, qui permet entre autres choses d’afficher de beaux effets Lightbox (exemple ci-dessous) sur les images des articles, fonctionnera parfaitement avec les articles importés qui contiennent des tags de classes antérieurs des anciennes versions de JCE Utilities. Attention, j’ai remarqué qu’avec l’ancienne version de JCE Utilities, la 2.2.1, les effets de Lightbox du composant de galerie d’images Joomgallery ne fonctionnaient pas (aucun souci avec la version 2.2.2 de JCE Utilities, bien sûr).

Même chose pour le plugin AllVideos, qui permet d’insérer des vidéos dans les articles (fichiers vidéos internes ou vidéos issus de services externes tels YouTube, Dailymotion, etc.) : les nouvelles versions pour Joomla 1.5 interprèteront bien les balises intégrées dans vos articles issus d’un import, les vidéos s’afficheront donc sans problèmes. Au passage, je signale l’existence d’un package composant/plugin/module appelé AllVideos Reloaded, qui est conçu sur le base d’AllVideos, qui facilite l’insertion de vidéos dans un site Joomla!.

Ajustements de paramètres après l’import de données

Après l’import des données, il y a des ajustements à réaliser : certains liens de menus vers des composants ne fonctionnent plus, il faut les recréer. C’est le cas du composant natif de contact par exemple. Bizarrement, j’ai également remarqué que les pages de contacts ne s’affichaient plus. Il suffit d’aller dans le panneau d’administration, ouvrir et sauver chaque formulaire de contact sans les modifier pour qu’ils s’affichent de nouveau sur le site (sans doute un champ est mis à jour dans la base de données quand on sauve le formulaire).

J’ai eu également quelques soucis avec le composant de gestion multilingue Joomfish, il a fallu bidouiller pas mal de paramètres pour que la gestion multilingue fonctionne à nouveau.

Autre correction à réaliser, j’ai remarqué que dans les articles certains liens vers d’autres articles étaient encore sur l’ancien modèle Mambo (…)option=content(…), ces liens ne fonctionnent plus. Il a fallu donc extraire les données de la table jos_content, faire un remplacement de la chaine « option=content » par la chaine de caractère « option=com_content », puis restaurer les données dans la table avec PhpMyAdmin (pour l’édition de texte, j’utilise l’éditeur freeware PSPad).

Epilogue

Avec la fin du support de la branche 1.0 de Joomla!, la sortie ces dernières semaines d’une nouvelle version de Joomla! (la 1.5.14), la fiabilité accrue des fonctions de migration, les nombreux composants maintenant disponibles pour Joomla 1.5, cette rentrée 2009 est finalement une bonne période pour faire sa migration de site Joomla! 1.0 vers Joomla! 1.5. Selon moi le point noir concerne les modules, comme je les ai évoqué plus haut : j’ai réussi leur migration, mais le procédé a été un peu fastidieux. J’espère que mon exposé sera utile à certains d’entre vous. Les deux sites webs sur lesquels j’ai réalisé la migration ces derniers jours sont le site du DODO Surf Club et le site des Pénibles de Mauvezin.

• La discussion « [News] – Une migration facile! » sur le forum joomla.fr.
• Le site francophone de Joomla! : https://www.joomla.fr

Bon Joomla!

Edit du 23/02/2016 : le plugin Lifestream est obsolète et n’est plus mis à jour depuis 2 ans. J’utilise désormais le plugin Flow-Flow Social Stream dans sa version pro payante

Edit du 01/03/2014 : depuis mars 2014 le thème WordPress du blog est Scroller Parallax, Scroll & Responsive Theme

J’ai modifié le thème visuel Ocean Mist du présent blog WordPress, en élargissant la zone de colonne latérale (la « sidebar« ) avec la possibilité d’avoir deux colonnes. Pour cela j’ai modifié les images de fond et le code du thème.

Des nouveaux modules (des Widgets) occupent maintenant toute la largeur de la colonne latérale droite de ce blog : « BLOG : LES 3 DERNIERS BILLETS », « MON DERNIER CHECKIN GOWALLA », « MA DERNIÈRE LOCALISATION CONNUE », « MES DERNIÈRES E-ACTIVITÉS / LIFESTREAM », « MES DERNIÈRES PHOTOS PUBLIQUES », « MES DERNIÈRES VIDÉOS FAVORITES », et « MES DERNIERS COUPS DE CŒURS MUSICAUX ». Les autres widgets, quant à eux, sont répartis dans des sous-colonnes allant par 2. Pour gérer le multicolonne, il a fallu faire quelques modifications dans les fichiers de thème sidebar.php et functions.php.

Pour intégrer les modules de Lifestream, des dernières photos Flickr et des coups de coeur musicaux, j’ai récupéré des morceaux de code PHP/HTML et CSS du thème visuel Irresistible, un thème WordPress très « web 2.0« . Les fonctions qui m’intéressaient de reprendre étaient l’intégration et l’uniformisation des styles CSS pour les plugin de Lifestream (voir ci-dessous) et iLastfm (récupération des écoutes musicales depuis Last.fm)  ainsi qu’une gestion totalement intégrée de l’affichage dans un widget de photos issus d’un compte Flickr. Le code récupéré du thème visuel Irresistible permet également la gestion dans l’interface administrateur de WordPress des paramètres d’affichage du plugin Lifestream et des fonctionnalités d’affichage des photos issues de Flickr. Pour ce qui concerne la gestion des autres widgets (derniers checkins, géolocalisation, vidéos, etc.) voir mon billet « 30 extensions WordPress après migration sur un hébergement ».

Le lifestreaming

L’utilisation de différents comptes d’un même utilisateur sur les médias sociaux (Twitter, Facebook, Flickr, etc.) ont pour conséquence l’éclatement et la dispersion de ses contributions et publications sur le web. Le plugin Lifestream (j’utilise maintenant le plugin Flow-Flow Social Stream) permet, comme les services de lifestreaming (concaténation chronologique de flux d’activité sur les médias sociaux), de centraliser et de publier en un seul endroit toutes les activités sur le web. Les avantages de ce type de plugin sont leur totale intégration dans WordPress, avec la récupération des évènements, des possibilités de personnalisation et de paramètrage des flux des différents services diffusés : voir dans la page « Veille et flux ».

Les réseaux sociaux sur le web 2.0

Les médias sociaux sur le web peuvent servir entre autres choses à publier des contenus : statut (microblogging), liens web, photos, billets (blogging) et autres contenus… Une des caractéristiques des services web 2.0, c’est la multiplication des profils pour une seule et même personne.

Les entrées

Certains services de multi-diffusion comme ping.fm permettent d’avoir un seul point d’entrée sur divers supports (micro-ordinateurs, smartphones) pour la diffusion de contenus sur tous les différents réseaux sociaux.

Les sorties

Des services de lifestreaming comme Friendfeed ou Profilactic permettaient autrefois de diffuser à un seul endroit tous les contenus produits sur les divers réseaux sociaux.

Des objets capturant des instants

Dans mon cas, il s’agit d’appareils photos numériques, smartphones, et appareils GPS portables qui capturent des images, en les géolocalisant. Elles peuvent être publiés sur internet quasi instantanément avec un appareil comme le iPhone qui combine à lui seul toutes ces fonctionnalités, au travers de l’application Brightkite. Les photos prises avec mon boitier Reflex numérique, seront, quant à elles, triées, retouchées, taguées et géolocalisées (automatiquement ou manuellement, voir mon billet sur le sujet) avant d’être diffusées sur internet via un micro-ordinateur.

Le service d’audioscrobbling Last.fm quant à lui, permettra de remonter sur les réseaux sociaux les listes de morceaux de musique écoutés avec mon lecteur audio numérique portable.

Le schéma ci-dessous représente les différents flux de diffusion de contenus multimédias géolocalisés sur les réseaux sociaux sur internet et les connections entre mes divers périphériques : Lencouse (mon lapin Nabaztag), iPhone, micro-ordinateurs, appareil photo numérique et GPS.