(Liens utiles : version PDF de cet article | liste des articles en PDF de la même rubrique)


L'histoire de la migration de ce site de Joomla! 1.5.20 vers Joomla! 3.1.1
The story of the migration of this site from Joomla! 1.5.20 to Joomla! 3.1.1


Le but de cet article, qui est fondé sur une expérience vécue, est double :
The purpose of this article, which is based on a real-life experience, is twofold:

1) fournir des informations pouvant être utiles aux utilisateurs de Joomla!, un outil de création de sites web et de gestion de contenu ;
1) to provide information that may be useful to users of Joomla!, a website creation and content management tool;

2) fournir, au moyen de phrases complètes, du vocabulaire en français et en anglais relatif au domaine couvert par ce récit.
2) to provide, by means of complete sentences, vocabulary in French and in English related to the area covered by this story.

Vous pouvez lire ce compte rendu de mon expérience en français seulement (phrases en bleu), en anglais seulement (phrases en vert) ou dans les deux langues.
You can read this account of my experience in French only (sentences in blue), in English only (sentences in green), or in both languages.

Bonne lecture !
Enjoy the reading!

Neil Minkley

PS 1 : envoyez-moi vos commentaires et suggestions à l'adresse suggérée par ceci : « neil arobase minkley point fr ». Merci !
PS 1: send me your comments and suggestions to the address suggested by this: "neil at minkley dot fr". Thanks!

PS 2 : les deux liens ci-dessous conduisent aux sites web officiels de Joomla!, en français et en anglais respectivement.
PS 2: the two links below lead to the official Joomla! websites, in French and in English respectively.

>> joomla.fr

>> joomla.org


>> Retour en haut de la page / Return to the top of the page


Table des matières / Table of contents

Pour aller directement à l'une des parties de cet article, cliquez/tapez sur le lien approprié dans le tableau ci-dessous.
To go to one of the parts of this article directly, click/tap on the appropriate link in the table below.

Cyberattaque et problèmes résultants
Cyber-attack and resulting problems
Actions correctrices à court-terme
Short-term corrective actions
Retour à la période 2008-2010 : de SPIP à Joomla!
Back to the 2008-2010 period: from SPIP to Joomla!
Migration vers une version plus récente de Joomla!
Migrating to a more recent version of Joomla!
> Création d'une nouvelle base de données
> Creating a new database
> Installation de Joomla! 3.1.1 et sa configuration pour la base de données
> Installing Joomla! 3.1.1 and configuring it for the database
> Conversion de la base de données Joomla! 1.5 en base de données Joomla! 3
> Converting the Joomla! 1.5 database into a Joomla! 3 database
> Transfert des modules complémentaires de Joomla! 1.5 vers Joomla! 3
> Transferring the complementary modules from Joomla! 1.5 to Joomla! 3
> Problème avec l'adresse des articles
> Problem with the addresses of articles
Modèle (« template ») Protostar
Protostar template
> Problème d'affichage des tableaux
> Table display problem
> Personnalisation de la feuille de style
> Customizing the style sheet
>> Ajout de classes spécifiques
>> Adding specific classes
>> Autres modifications
>> Other modifications
>> À propos du processus de modification...
>> About the modification process...
> À propos des modules...
> About modules...
Quelques mots pour finir
A few final words


>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Cyberattaque et problèmes résultants
Cyber-attack and resulting problems

Au début juillet 2013, mon site web « Anglais pratique - Practical English » a subi une « cyberattaque » aboutissant à un « déni de service », ce qui signifie que le site n'était plus accessible.
Early July 2013, my "Anglais pratique - Practical English" website was subjected to a "cyber-attack" resulting in a "denial of service", which means that the site could no longer be accessed.

En effet, une ou plusieurs personnes malveillantes ont exploité une « faille de sécurité » dans la version 1.5 de la plate-forme logicielle Joomla!, le « contenant » de mon site (par opposition à son contenu), pour installer plus de 250 fichiers parasites dans le répertoire de mon site sur l'un des serveurs de mon prestataire de service d'hébergement (à savoir 1&1 Internet).
Indeed, one or several malicious persons took advantage of a "security fault" in version 1.5 of the Joomla! software platform, the "container" of my site (as opposed to its content), to install more than 250 intrusive files in the directory of my site on one of the servers of my hosting service provider (namely 1&1 Internet).

Ces « pirates » ont également modifié les droits d'accès de certains fichiers d'administration du site, rendant ainsi l'outil d'administration inaccessible.
Those "hackers" also modified the access rights to certain files used for the site administration, thus making the administration tool inaccessible.

De plus, les « cyberdélinquants » avaient enregistré trois utilisateurs « bidons » au cours des semaines précédant l'attaque, alors qu'il n'y avait aucune fonction d'enregistrement apparente sur le site ! (Cela aurait dû éveiller mes soupçons...)
Furthermore, the "cyber-offenders" had registered three "dummy" users during the weeks before the attack, although there was no apparent registration function on the site! (That should have aroused my suspicions...)

La base de données du site, ç-à-d son précieux contenu, n'avait heureusement pas été altérée.
The database of the site, ie its precious content, had fortunately not been corrupted.

La motivation réelle des auteurs de l'attaque m'est inconnue mais il est certain qu'ils ont agi avec l'intention de nuire !
The actual motivation of the perpetrators of the attack is unknown to me, but it is certain that they acted with malicious intent!

Mon hébergeur (1&1 Internet) m'a envoyé son diagnostic du problème, ainsi qu'un ensemble de recommandations à suivre pour remédier au problème et réduire la probabilité qu'il puisse se reproduire.
My hosting service provider (1&1 Internet) sent me its diagnosis of the problem, as well as a set of recommendations to follow in order to remedy the problem and reduce the probability that it might recur.


>> Retour au début de la section / Return to the beginning of the section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Actions correctrices à court-terme
Short-term corrective actions

J'ai pu rétablir l'accès à mon site en quelques heures en supprimant à la main tous les fichiers parasites, l'un après l'autre.
I managed to reestablish access to my site within a few hours by deleting by hand all intrusive files, one after another.

La tâche fut fastidieuse parce que la plupart des fichiers avaient été placés par les pirates dans les profondeurs de la structure hiérarchique de mon répertoire sur le serveur.
The task was tedious because most of the files had been placed by the hackers in the depths of the hierarchical structure of my directory on the server.

Grâce à un tuyau fourni par l'un de mes amis, qui avait été confronté à une situation similaire, j'ai pu récupérer l'usage de l'outil d'administration de mon site en rétablissant les droits d'accès d'origine (adfrw) du fichier « index.php » à la racine du dossier « administrator » dans le répertoire de mon site. (Ces droits d'accès avaient été changés en « w ».)
Thanks to a tip given by a friend of mine, who had faced a similar situation, I was able to recover the use of the administration tool for my site by restoring the original access rights (adfrw) of the "index.php" file at the root of the "administrator" folder in the directory of my site. (Those access rights had been changed to "w".)

J'ai alors immédiatement modifié mon identifiant et mon mot de passe d'administrateur.
I then immediately modified my administrator identifier and password.

Enfin, j'ai supprimé les trois utilisateurs parasites figurant dans la partie « Gestion des utilisateurs » de l'outil d'administration.
Lastly, I deleted the three intrusive users listed in the "User manager" part of the administration tool.


>> Retour au début de la section / Return to the beginning of the section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Retour à la période 2008-2010 : de SPIP à Joomla!
Back to the 2008-2010 period: from SPIP to Joomla!

J'avais initialement construit ce site, au début 2008, avec un outil français dénommé SPIP.
(Voir : spip.net/fr...)

I'd initially built this site, in early 2008, with a French tool named SPIP.
(See: spip.net/en...)

Une mise à jour technique de SPIP avait été appliquée à mon site à deux occasions. Dans les deux cas la mise à niveau avait provoqué des incompatibilités et des dysfonctionnements.
A technical update of SPIP had been applied to my site on two occasions. In both cases the upgrade had caused incompatibilities and malfunctions.

J'avais perdu beaucoup de temps à remédier aux incompatibilités mais je n'avais rien pu faire concernant les problèmes du moteur de recherche de SPIP.
I'd wasted a lot of time remedying the incompatibilities, but there'd been nothing I could do about the problems in SPIP's search engine.

C'est pourquoi j'ai décidé, en septembre 2010, de changer d'outil et d'adopter la plate-forme Joomla!, qui m'avait été recommandée par plusieurs personnes.
That is why I decided, in September 2010, to change tools and adopt the Joomla! platform, which had been recommended to me by several people.

Cela m'a aussi incité à me méfier des mises à jour techniques !
It also prompted me to beware of technical updates!


>> Retour au début de la section / Return to the beginning of the section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Migration vers une version plus récente de Joomla!
Migrating to a more recent version of Joomla!


Évidemment, j'ai eu tort de ne pas avoir appliqué les mises à jour de Joomla! à mon site pendant près de trois ans, puisqu'il est progressivement devenu de moins en moins sécurisé donc de plus en plus vulnérable.
Obviously, I was wrong to have not applied Joomla! updates to my site for almost three years, since it gradually became less and less secure, therefore more and more vulnerable.

Donc je suis maintenant fermement décidé à tenir mon site à jour sur le plan technique !
So I am now determined to keep my site technically up to date!

(En fait, j'ai fait une mise à jour de Joomla! 3.1.1 en Joomla! 3.1.5 le 5 août 2013 et j'ai appliqué toutes les mises à jour successives depuis lors.)
(Actually, I did an update from Joomla! 3.1.1 to Joomla! 3.1.5 on August 5, 2013, and I have applied all successive updates since then.)

Un site web comme le mien doit en effet se caractériser par « un contenu sain dans un contenant sain ». :-)
A website like mine should indeed be characterized by "healthy content in a healthy container". :-)

Ce qui suit décrit les étapes d'une mise à niveau technique majeure de mon site, les problèmes rencontrés et comment je les ai résolus, ce qui sera, je l'espère, utile à d'autres...
What follows describes the steps of a major technical upgrade of my site, the problems encountered, and how I solved them, which will hopefully be useful to others...


>> Retour au début de la section / Return to the beginning of the section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Création d'une nouvelle base de données
Creating a new database

Joomla! stocke le contenu principal d'un site dans une base de données MySQL.
(Voir : mysql.fr)

Joomla! stores the core content of a site in a MySQL database.
(See: mysql.com)

La base de données (BD) doit être créée avant l'installation de Joomla!. Des informations d'identification de la BD doivent être fournies à Joomla! au moment où il est configuré.
The database (DB) must be created before Joomla! is installed. Identification (ID) information concerning the DB needs to be provided to Joomla! at configuration time.

J'ai donc créé une nouvelle BD dans mon espace web chez 1&1 Internet.
So I created a new DB in my web space at 1&1 Internet.

J'ai naïvement fait l'hypothèse que Joomla! accepterait une BD garnie (non vide) donc j'ai exporté les données de mon site en Joomla! 1.5 puis les ai importées dans la nouvelle BD créée pour le site en Joomla! 3.
I naively assumed that Joomla! would accept a populated (non-void) DB, so I exported the data of my Joomla! 1.5 site then imported them into the new DB created for the Joomla! 3 site.


>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Migration » / Return to the beginning of the "Migration" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Installation de Joomla! 3.1.1 et sa configuration pour la base de données
Installing Joomla! 3.1.1 and configuring it for the database

Le téléchargement de Joomla! 3.1.1 sur mon ordinateur puis la copie par FTP (avec FileZilla) de tous les fichiers dans le nouveau répertoire que j'avais créé dans mon espace web chez 1&1 Internet se sont déroulés très facilement.
Downloading Joomla! 3.1.1 to my computer then copying via FTP (with FileZilla) all the files into the new directory I had created in my web space at 1&1 Internet were carried out very easily.

Au fait... / By the way...
FTP = File transfer protocol = protocole de transfert de fichiers

J'avais modifié au préalable la destination de « anglopedia.net », l'un des noms de domaines de mon site, pour qu'il pointe sur le nouveau répertoire correspondant au futur site en Joomla! 3.1.1. (Les autres adresses conduisaient toujours au site en Joomla! 1.5.20.)
I had modified beforehand the destination of "anglopedia.net", one of the domain names for my site, so that it pointed to the new directory corresponding to the future site in Joomla! 3.1.1. (The other addresses were still leading to the site in Joomla! 1.5.20.)

(C'est une bonne illustration de l'utilité d'avoir plusieurs noms de domaines pour un site web !)
(Voir : adresses du site « Anglais pratique - Practical English »)

(It's a good illustration of the usefulness of having several domain names for a website!)
(See: addresses of the "Anglais pratique - Practical English" site)

Ainsi, dès la fin de l'installation, j'ai eu accès par l'adresse « anglopedia.net/administrator » à l'outil d'administration du nouveau site pour configurer Joomla! en fonction de mes besoins particuliers.
So, as soon as the installation was completed, I had access via the "anglopedia.net/administrator" address to the administration tool of the new site in order to configure Joomla! according to my specific requirements.

NB : l'outil d'administration est souvent appelé « back end » ou « backend » ou encore « back-end site » (« site dorsal »), par opposition au site destiné aux utilisateurs, qui est appelé « front end » ou « frontend » ou encore « front-end site » (« site frontal »).
NB: the administration tool is often called "back end" or "backend" or "back-end site", as opposed to the site intended for users, which is called "front end" or "frontend" or "front-end site".

Joomla! propose deux options relatives au contenu de la base de données (BD) : le sauvegarder ou le supprimer. J'ai naturellement choisi « Sauvegarder ».
Joomla! proposes two options related to the database (DB) content: save it or delete it. I naturally chose "Save".

C'est à ce moment-là que j'ai eu ma première mauvaise surprise...
At that point I had my first bad surprise...

J'ai affiché le nouveau site et constaté que mon contenu n'y était pas !
I displayed the new site and noticed that my content wasn't there!

J'ai alors examiné la liste des tables (de contenu) de ma nouvelle BD dans mon espace web chez 1&1 Internet : les tables sauvegardées (préfixées par « bak_jos_ ») avaient une taille non nulle, tandis que les nouvelles tables (préfixées par « jos_ ») étaient vides.
I then examined the list of tables (of content) of my new DB in my web space at 1&1 Internet: the saved tables (prefixed with "bak_jos_") had non-null sizes, while the new tables (prefixed with "jos_") were void.

J'ai voulu renommer les tables pour que Joomla! prenne en compte celles déjà garnies de contenu mais ce que j'ai fait n'a pas marché.
I wanted to rename the tables so that Joomla! would take into account those already populated with content, but what I did didn't work.

Par ailleurs, j'ai remarqué que la liste des tables n'était pas exactement la même pour une BD Joomla! 1.5 et une BD Joomla! 3.
In addition, I noticed that the list of tables was not exactly the same for a Joomla! 1.5 DB and a Joomla! 3 DB.

À ce stade, quelques recherches sur le web m'ont fait comprendre que les BD Joomla! 1.5 et Joomla! 3 étaient incompatibles et qu'une conversion était nécessaire !
At that stage, a little web searching made me realize that Joomla! 1.5 and Joomla! 3 DBs were incompatible, and that a conversion was required!


>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Migration » / Return to the beginning of the "Migration" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Conversion de la base de données Joomla! 1.5 en base de données Joomla! 3
Converting the Joomla! 1.5 database into a Joomla! 3 database

Deux outils de conversion, jUpgrade et SP Upgrade, étaient recommandés sur la page « officielle » (en anglais) suivante : Joomla 1.5 to 3.x Step by Step Migration.
Two conversion tools, jUpgrade and SP Upgrade, were recommended on the following "official" page (in English): Joomla 1.5 to 3.x Step by Step Migration.

Après avoir lu des commentaires sur ces outils sur divers forums, j'ai choisi SP Upgrade, de la société chypriote SP CYEND (site en anglais), pour lequel la plupart des critiques étaient très positives.
After reading comments about those tools on various forums, I chose SP Upgrade, by the Cypriot company SP CYEND (site in English), for which most reviews were very positive.

Je ne regrette pas d'avoir dépensé 29,95€ pour cet outil, dans la mesure où il m'a donné presque entière satisfaction et dans la mesure où j'ai apprécié la disponibilité, la qualité et la rapidité de son assistance technique (par mail).
I don't regret spending €29.95 for that tool, insofar as it gave me almost complete satisfaction, and insofar as I appreciated the availability, quality and promptness of its technical support (via e-mail).

(Le prix actuel de SP Upgrade est peut-être différent de celui indiqué ci-dessus...)
(The current price of SP Upgrade may be different from that given above...)

Bien sûr, j'ai dû une nouvelle fois créer une base de données (BD), installer Joomla! 3.1.1 et le configurer pour la BD, cette fois-ci avec l'option « Supprimer » au lieu de « Sauvegarder ».
Of course, I had to once again create a new database (DB), install Joomla! 3.1.1 and configure it for the DB, this time with the "Delete" option instead of "Save".

J'ai ensuite installé SP Upgrade comme extension de Joomla! (dans l'outil d'administration) et je l'ai démarré à partir du menu « Composants ».
I then installed SP Upgrade as an extension of Joomla! (in the administration tool) and launched it via the "Components" menu.

J'ai suivi les instructions (assez complexes...) fournies (en anglais) sur le site suivant : User Guide - SP Upgrade.
I followed the (fairly complex) instructions provided (in English) on the following site: User Guide - SP Upgrade.

À la fin du processus de conversion, j'ai eu le plaisir de voir l'intégralité de mes articles sur mon nouveau site.
At the end of the conversion process, I was pleased to see all of my articles on my new site.

J'ai également vérifié, dans l'outil d'administration, que les métadonnées de mes articles avaient aussi été importées.
I also checked, in the administration tool, that the metadata of my articles had been imported too.


>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Migration » / Return to the beginning of the "Migration" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Transfert des modules complémentaires de Joomla! 1.5 vers Joomla! 3
Transferring the complementary modules from Joomla! 1.5 to Joomla! 3

Les différents modules complémentaires (Google AdSense, etc.) avaient été correctement transférés par SP Upgrade de Joomla! 1.5.20 vers Joomla! 3.1.1 mais le « Fil de navigation » (« Fil d'Ariane ») standard avait disparu dans l'opération, alors qu'il était présent après l'installation de Joomla! 3.1.1, avant l'exécution de SP Upgrade.
The various complementary modules (Google AdSense, etc.) had been correctly transferred by SP Upgrade from Joomla! 1.5.20 to Joomla! 3.1.1, but the standard "Navigation trail" ("Breadcrumb trail") had disappeared in the process, although it was present after the installation of Joomla! 3.1.1, before running SP Upgrade.

Je n'ai pas trouvé le moyen de réinstaller le fil de navigation standard de Joomla! 3.1.1 et je ne voulais pas d'une extension non standard.
I couldn't find how to reinstall Joomla! 3.1.1's standard navigation trail, and I didn't want a non-standard extension.

J'ai donc une nouvelle fois parcouru l'ensemble du processus de création de BD, installation et configuration de Joomla! puis installation et exécution de SP Upgrade.
So I once again went through the whole process of creating a DB, installing and configuring Joomla!, then installing and running SP Upgrade.

Cette fois-ci, j'ai choisi de ne pas importer les modules, ce qui m'a permis de préserver le fil de navigation.
This time, I chose to not import the modules, which enabled me to preserve the navigation trail.

En fait, j'ai appris (trop tard) par l'assistance technique de SP CYEND que j'aurais dû choisir l'option suivante relative aux modules : « Transfer items and save with new IDs » (Transférer les éléments et les enregistrer avec de nouveaux identifiants) !
In fact, I found out (too late) from SP CYEND technical support that I should have chosen the following option related to modules: "Transfer items and save with new IDs"!

La reconstruction des modules spécifiques à mon site a été rapide et facile, puisque j'utilise peu de modules et j'avais une sauvegarde de leur code source.
Rebuilding the modules specific to my site was quick and easy, since I use few modules and I had a backup of their source code.

À ce sujet, j'ai dû utiliser l'éditeur « CodeMirror » (au lieu de « TinyMCE ») dans l'outil d'administration pour que le code de certains modules (de Google et de 1&1 Internet) soit accepté.
On that subject, I had to use the "CodeMirror" editor (instead of "TinyMCE") in the administration tool in order for the code of certain modules (Google's and 1&1 Internet's) to be accepted.


>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Migration » / Return to the beginning of the "Migration" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Problème avec l'adresse des articles
Problem with the addresses of articles

Beaucoup de mes articles comportent des liens vers d'autres articles sur mon site.
Many of my articles feature links to other articles on my site.

En testant quelques-uns de ces liens, je me suis aperçu qu'ils ne fonctionnaient plus.
By testing a few of those links, I noticed they no longer worked.

La raison en était que les adresses (URL) sur mon site en Joomla! 1.5 étaient sous la forme « anglais-pratique.fr/rubriques... » ou « anglais-pratique.fr/annexes... », alors que les adresses sur mon site en Joomla! 3 avaient pris la forme « anglais-pratique.fr/index.php/rubriques... » ou « anglais-pratique.fr/index.php/annexes... ».
The reason was that addresses (URLs) on my site in Joomla! 1.5 were in the form "anglais-pratique.fr/rubriques..." or "anglais-pratique.fr/annexes...", whereas addresses on my site in Joomla! 3 had taken the form "anglais-pratique.fr/index.php/rubriques..." or "anglais-pratique.fr/index.php/annexes...".

Au fait... / By the way...
URL = Uniform resource locator = localisateur uniforme de ressources

Selon l'assistance technique de SP CYEND, le problème pourrait être résolu par des réglages appropriés dans la configuration de mon site dans l'outil d'administration.
According to SP CYEND technical support, the problem might be solved by appropriate settings in the configuration of my site in the administration tool.

J'ai trouvé un site (en anglais) où les réglages à faire sont bien expliqués (en deux étapes) :
I found a site (in English) where the settings to be performed are well explained (in two steps):
>> Using Search Engine Friendly URLs in Joomla 3.0
>> How to remove "index.php" from URLs in Joomla 3.0

J'ai suivi les instructions mais cela n'a pas fonctionné pour mon site (j'ai peut-être fait quelque chose de travers...).
I followed the instructions but it didn't work for my site (maybe I did something wrong...)

Je me suis alors souvenu que j'avais déjà eu un problème avec mon site Joomla! 1.5 concernant les « Paramètres SEO », dont les deux premiers étaient initialement :
« URLs explicites (SEF) = Oui » et « Utiliser la réécriture au vol des URLs = Oui »
(et j'avais bien renommé le fichier « htaccess.txt » en « .htaccess », comme cela est requis pour un serveur Apache).

I then remembered I'd already had a problem with my Joomla! 1.5 site concerning the "SEO Settings", the first two of which were initially:
"Search-Engine Friendly URLs" = Yes" and "Use URL rewriting = Yes"
(and I had correctly renamed the "htaccess.txt" file" to ".htaccess", as required for an Apache server).

Au fait... / By the way...
SEF = Search-engine friendly = adapté aux moteurs de recherche
SEO = Search-engine optimization = optimisation pour les moteurs de recherche

Le problème était que la fameuse « réécriture au vol des URLs » ne fonctionnait plus et la seule page de mon site qui était accessible était la page d'accueil !
The problem was that the famous "URL rewriting" wasn't working any more, and the only page that could be accessed on my site was the home page!

À ce moment-là une personne de l'assistance technique de 1&1 Internet m'avait suggéré de modifier le second paramètre SEO en « Utiliser la réécriture au vol des URLs = Non », ce qui avait résolu le problème.
At that time, a 1&1 Internet technical support person had suggested that I change the second SEO setting to "Use URL rewriting = No", which had solved the problem.

Cette fois-ci cependant, l'assistance technique de 1&1 Internet n'a pas pu me fournir de solution.
This time round however, 1&1 Internet technical support was unable to provide me with a solution.

Je me suis alors rendu compte que le problème était plutôt complexe (tout au moins pour moi !), qu'il était peut-être lié à la configuration du serveur Apache chez 1&1 Internet et que j'aurais du mal à avoir un soutien technique dans ce domaine de la part de mon hébergeur (ou d'ailleurs de qui que ce soit d'autre...).
I then realized that the problem was rather complex (at least for me!), that it was maybe related to the configuration of the Apache server at 1&1 Internet, and that I would have difficulty obtaining technical support in that area from my hosting service provider (or from anyone else for that matter...).

À ce stade je n'ai pas voulu prendre de risques donc j'ai décidé de choisir « Réécriture au vol des URLs = Non » (voir l'image ci-dessous) et d'insérer le fameux « /index.php » dans tous mes liens vers d'autres articles de mon site.
At that stage, I didn't want to take any risks, so I decided to choose "Use URL rewriting = No" (see the picture below) and to insert the famous "/index.php" into all my links to other articles on my site.

Paramètres SEO

Heureusement, l'éditeur de textes (Notepad++) que j'utilise sur mon PC de bureau me permet d'appliquer un « Rechercher et remplacer... » à tous les fichiers dans un dossier (et ses sous-dossiers) en une seule opération.
Fortunately, the text editor (Notepad++) I use on my desktop PC enables me to apply a "Find and replace..." to all files within a folder (and its subfolders) in a single operation.

La présence de « /index.php » dans l'adresse des articles sur mon nouveau site à rendu nécessaire la réindexation du site « Anglais pratique - Practical English » par Google. (Le processus d'indexation a été étalé sur une dizaine de jours par Google.)
(Voir : Google | Webmasters)

The presence of "/index.php" in the addresses of articles on my new site made it necessary to have the "Anglais pratique - Practical English" reindexed by Google. (The indexing process was spread over ten days or so by Google.)
(See: Google | Webmasters)

Enfin, j'ai prévenu les visiteurs de mon site, par un message sur la page d'accueil (voir l'image ci-dessous), qu'ils devraient modifier leurs favoris pour le nouveau site.
Lastly, I warned the visitors to my site, by means of a message on the home page (see the picture below), that they would need to change their bookmarks for the new site.

Message sur favoris


>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Migration » / Return to the beginning of the "Migration" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Modèle (« template ») Protostar
Protostar template

Les outils de création de sites web tels que Joomla! incluent des modèles (ou maquettes ou gabarits) de mise en page de sites.
Web creation tools such as Joomla! include site layout templates.

(Dans le jargon des webmasters francophones, le mot anglais « template » est souvent utilisé à la place du mot français « modèle ».)
(In francophone webmaster jargon, the English word "template" is often used instead of the French word « modèle ».)

Pour mon site en Joomla! 3, j'ai choisi le modèle standard nommé « Protostar », qui m'a paru le plus simple et qui a l'avantage d'adapter automatiquement l'affichage des pages aux smartphones et tablettes.
For my site in Joomla! 3, I chose the standard template named "Protostar", which appeared to me as the simplest, and which has the advantage of automatically adapting the display of pages to smartphones and tablets.

Avec mon site par exemple, le menu « NAVIGATION » et les publicités, qui s'affichent à droite sur un ordinateur de bureau, sur un ordinateur portable et sur un iPad 2, sont affichés sous le corps des articles sur un smartphone tel que mon (vieil) iPhone 3G.
With my site for example, the "NAVIGATION" menu and the ads, which display on the right on a desktop computer, on a laptop and on an iPad 2, are displayed below the body of articles on a smartphone such as my (old) iPhone 3G.

Le lien ci-dessous conduit à un site (en anglais) qui décrit le modèle Protostar et comment l'utiliser.
The link below leads to a site (in English) that describes the Protostar template and how to use it.

>> What is Protostar?


>> Retour au début de la section « Modèle » / Return to the beginning of the "Template" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Problème d'affichage des tableaux
Table display problem

J'ai dû réduire la largeur des tableaux dans mes articles à 660 pixels, parce qu'avec leur largeur antérieure (700 pixels) ils dépassaient le bord droit du corps des articles sur mon iPad 2, même en mode d'affichage horizontal !
I had to reduce the width of the tables in my articles to 660 pixels, because with their previous width (700 pixels) they exceeded the right border of the body of articles on my iPad 2, even in horizontal display mode!

À 660 pixels, mes tableaux sont toujours trop larges pour mon iPhone 3G en modes horizontal et vertical, ainsi que pour pour mon iPad 2 en mode vertical, mais il y a une limite à ce que je peux faire pour les smartphones et les tablettes !
At 660 pixels, my tables are still too wide for my iPhone 3G in both horizontal and vertical modes, as well as for my iPad 2 in vertical mode, but there's a limit to what I can do for smartphones and tablets!

La première image ci-dessous montre une partie de tableau affichée correctement sur mon iPhone avec le modèle « JA Purity » sur mon site en Joomla! 1.5 (la taille du tableau était ajustée automatiquement pour tenir dans la largeur disponible) ; la seconde image montre le même tableau affiché sur mon iPhone avec le modèle Protostar sur mon site en Joomla! 3 (la taille du tableau n'est plus ajustée automatiquement !).
The first picture below shows part of a table properly displayed on my iPhone with the "JA Purity" template on my site in Joomla! 1.5 (the table size was automatically adjusted to fit in the available width); the second picture shows the same table displayed on my iPhone with the Protostar template on my site in Joomla! 3 (the table size is no longer automatically adjusted!).

(1) Tableau sur iPhone (AP J1.5) Tableau sur iPhone (AP J3) (2)

Je pourrais peut-être résoudre ce problème en adoptant un autre modèle que ceux livrés en standard avec Joomla! 3 mais je veux minimiser la dépendance de mon site à l'égard d'extensions non standard, pour le moment tout au moins.
I could perhaps solve that problem by adopting a template other than the standard ones delivered with Joomla! 3, but I want to minimize the dependence of my site on non-standard extensions, for the time being at least.

En tout cas, si vous visitez mon site sur un smartphone ou une tablette, utilisez le mode d'affichage horizontal pour un meilleur confort de lecture !
In any case, if you visit my site on a smartphone or a tablet, use the horizontal display mode for better reading comfort!


>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Modèle » / Return to the beginning of the "Template" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Personnalisation de la feuille de style
Customizing the style sheet


Ajout de classes spécifiques
Adding specific classes

La feuille de style d'un modèle définit sa présentation à l'affichage. L'abréviation « CSS » désigne à la fois la feuille de style et le langage dans lequel elle est codée.
The style sheet of a template defines how it will be presented when displayed. The abbreviation "CSS" designates both the style sheet and the language in which it is coded.

Au fait... / By the way...
CSS = Cascading style sheet = feuille de style en cascade

(Voir : Tutoriel CSS)
(See: CSS Tutorial)

La CSS d'un modèle peut être modifiée (dans l'outil d'administration de Joomla!) pour la personnaliser.
The CSS of a template can be modified (in Joomla!'s administration tool) in order to customize it.

Pour mon site, j'ai défini des balises (correspondant à des « classes ») spécifiques, que j'utilise dans le code HTML de mes articles pour en déterminer l'aspect (taille et couleur du texte par exemple). Ces éléments doivent être déclarés dans la CSS du modèle utilisé pour le site.
For my site, I defined specific tags (corresponding to "classes"), which I use in the HTML code of my articles in order to determine their appearance (text size and colour for example). Those elements need to be declared in the CSS of the template used for the site.

J'ai donc ajouté ces déclarations à la CSS du modèle Protostar.
So I added those declarations to the CSS of the Protostar template.

(Évidemment, j'ai sauvegardé la CSS originale de Protostar sur mon PC avant de la modifier.)
(Of course, I saved the original Protostar CSS on my PC before modifying it.)

Le lien ci-dessous conduit à un article (en français) sur mon site qui décrit mes balises (classes) spécifiques.
The link below leads to an article (in French) on my site that describes my specific tags (classes).

>> Test de CSS

Le lien suivant conduit à une capture d'écran (d'une partie du code source HTML de cet article-ci affiché dans mon éditeur de texte) qui illustre comment j'utilise mes balises (classes) spécifiques.
The following link leads to a screenshot (of part of the HTML source code of this article displayed in my text editor) that illustrates how I use my specific tags (classes).

>> Exemple de code HTML / Example of HTML code

Au fait... / By the way...
HTML = Hypertext markup language = langage de balisage (marquage) (d')hypertexte

(Voir : Tutoriel HTML)
(See: HTML Tutorial)


>> Retour au début de la sous-section / Return to the beginning of the subsection


Autres modifications
Other modifications

Malheureusement, la CSS du modèle Protostar de Joomla! ne contient aucun commentaire donc j'ai dû repérer dans le code source des diverses pages de mon site les balises correspondant aux éléments dont je voulais modifier la déclaration.
Unfortunately, the CSS of Joomla!'s Protostar template doesn't contain any comment, so I had to locate in the source code of the various pages of my site the tags corresponding to the elements whose declaration I wanted to modify.

C'était assez simple pour des éléments (sélecteurs) tels que « body » et « site-title » mais beaucoup moins pour d'autres éléments. (J'ai parfois du procéder par essais et erreurs.)
It was fairly straightforward for elements (selectors) such as "body" and "site-title", but much less so for other elements. (I sometimes had to proceed by trial and error.)

(Des commentaires feraient gagner beaucoup de temps à beaucoup de monde ! J'espère donc que cet article permettra à quelques personnes de gagner un peu de temps...)
(Comments would save many people a lot of time! So I hope this article will enable a few people to save a little time...)

Dans la partie « font-family » de la déclaration de l'élément « body », j'ai changé « Helvetica Neue » en « Verdana », parce que je préfère cette dernière police de caractères pour mes articles !
In the "font-family" part of the declaration of the "body" element, I changed "Helvetica Neue" to "Verdana", because I prefer the latter character font for my articles!

Pour modifier l'apparence du titre du site et ajuster sa taille pour qu'il s'affiche sur une seule ligne sur un iPhone 3G en mode horizontal, j'ai changé la déclaration de « site-title » en :
To modify the appearance of the site title and adjust its size so that it is displayed on a single line on an iPhone 3G in horizontal mode, I changed the declaration of "site-title" to:

site-title

ce qui donne le résultat suivant :
which produces the following result:

site-title

Pour votre information, voici les liens vers deux sites (en anglais) qui peuvent être utilisés pour trouver le code HTML des couleurs :
FYI, here are the links to two sites (in English) that can be used to find HTML colour codes:

>> HTML color codes and names

>> HTML Color Codes

Afin d'afficher un cadre autour du corps de mes articles et de changer la couleur du fond en jaune (très) clair, j'ai ajouté la déclaration ci-dessous à la CSS de Protostar.
In order to display a border around the body of my articles and to change the background colour to (very) light yellow, I added the declaration below to the CSS of the Protostar template.

div.item-page

(Je n'ai cependant pas réussi à appliquer la modification mentionnée ci-dessus à la page d'accueil, qui a un statut particulier.)
(I was however unable to apply the above-mentioned modification to the home page, which has a particular status.)

Quelques autres versions modifiées de déclarations de sélecteurs dans la CSS de Protostar sont décrites ci-dessous...
A few other modified versions of selector declarations in the Protostar template are described below...

Pour changer l'apparence du titre des catégories (« Rubriques » et « Annexes ») quand on en affiche le contenu :
To change the appearance of the titles of categories ("Rubriques" and "Annexes") when their contents are displayed:

h1

J'ai également modifié le sélecteur « h3 », qui détermine l'apparence du titre « Sous-catégories » quand on affiche le contenu d'une catégorie.
I also modified selector "h3", which determines the appearance of the title "Subcategories" when the contents of a category are displayed.

Pour changer l'apparence du titre des sous-catégories quand on en affiche la liste :
To change the appearance of the titles of subcategories when their list is displayed:

item-title

Voici le résultat (tronqué) des trois modifications décrites ci-dessus (h1, h3, item-title) :
Here is the (truncated) result of the above-described three modifications (h1, h3, item-title):

liste de rubriques

Pour changer l'apparence du titre du menu principal (que j'ai renommé « NAVIGATION ») :
To change the appearance of the title of the main menu (which I renamed "NAVIGATION"):

page-header > NAVIGATIONs

Pour modifier la couleur et l'épaisseur de la ligne horizontale standard, ainsi que l'espacement autour de la ligne :
To modify the colour and thickness of the standard horizontal line, as well as the spacing around it:

hr

Le résultat est visible sous forme de la ligne ci-dessous !
The result is visible in the form of the line below!


>> Retour au début de la sous-sous-section / Return to the beginning of the subsubsection

>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Modèle » / Return to the beginning of the "Template" section


À propos du processus de modification...
About the modification process...

D'après ce que j'ai expérimenté, on peut dupliquer un modèle dans l'outil d'administration de Joomla! 3 mais seule la CSS du modèle d'origine peut être modifiée !
According to what I experimented, a template can be duplicated in Joomla! 3's administration tool, but only the CSS of the original template can be modified!

J'ai donc sauvegardé la CSS du modèle Protostar sur mon PC, j'en ai fait une copie et j'ai effectué mes ajouts et modifications dans la copie.
So I saved the CSS of the Protostar template on my PC, I made a copy of it, and I made my additions and modifications in the copy.

De plus, j'ai trouvé qu'il était beaucoup plus rapide de copier et coller l'intégralité de la CSS à chaque étape de la personnalisation pour mettre à jour la CSS dans l'outil d'administration.
Furthermore, I found that it was much faster to copy and paste the whole of the CSS at each customization step in order to update the CSS in the administration tool.

En effet, le temps de réponse de l'outil d'administration étant extrêmement long en ce qui concerne la partie CSS, l'édition de la CSS au sein de l'outil est quasi impraticable.
Indeed, since the administration tool's response time is extremely long as far as the CSS part is concerned, editing the CSS within the tool is virtually impractical.

Qui plus est, la hauteur de la zone d'édition de la CSS est ridiculement petite, comme le montre la capture d'écran (en français) ci-dessous.
Moreover, the height of the editing area of the CSS is ridiculously small, as shown in the screenshot (in French) below.

Admin-CSS

Pour votre information, l'élément visible dans la zone d'édition dans l'image ci-dessus est l'une de mes « classes » spécifiques, à savoir « engt », que j'utilise dans mes articles pour les titres en anglais.
FYI, the element visible in the editing area in the above picture is one of my specific classes, namely "engt", which I use in my articles for titles in English.

Je l'ai localisé en cliquant dans la zone d'édition et en faisant une recherche de « engt » dans la page, le défilement du contenu de la zone étant beaucoup trop lent pour être utilisable !
I located it by clicking in the editing area and doing a page search for "engt", because scrolling the content of the area is much too slow to be usable!

J'espère que les défauts de l'outil d'administration seront corrigés dans de futures versions de Joomla!...
I hope the defects of the administration tool will be corrected in future versions of Joomla!...

Le 5 août 2013, j'ai fait une mise à jour de Joomla! 3.1.1 en Joomla! 3.1.5, ce qui a effacé les changements que j'avais apportés à la CSS de Protostar en juillet. Pour rétablir l'apparence personnalisée de mon site, j'ai simplement eu besoin de réappliquer les modifications que j'avais sauvegardées sur mon PC à la CSS qui avait été installée dans le cadre de la mise à jour.
On August 5, 2013, I did an update from Joomla! 3.1.1 to Joomla! 3.1.5, which erased the changes I had made to the Protostar CSS in July. In order to restore the customized appearance of my site, I simply needed to reapply the modifications I'd saved on my PC to the CSS that had been installed as part of the update.

À cette occasion j'ai remarqué que le défaut de Joomla! 3.1.1 mentionné ci-dessus concernant la hauteur de la zone d'édition avait été corrigé dans Joomla! 3.1.5, ce qui était une bonne nouvelle !
On that occasion I noticed that the above-mentioned defect of Joomla! 3.1.1 concerning the height of the editing area had been corrected in Joomla! 3.1.5, which was good news!


>> Retour au début de la sous-sous-section / Return to the beginning of the subsubsection

>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Modèle » / Return to the beginning of the "Template" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


À propos des modules...
About modules...

Les divers modules complémentaires doivent être attribués à des « positions » prédéterminées dont le nom est spécifique à chaque modèle.
The various complementary modules need to be assigned to predetermined "positions", the names of which are specific to each template.

L'emplacement des diverses positions peut être visualisé en ajoutant « /?tp=1 » à l'adresse (URL) d'un site en Joomla!, comme illustré par la page (en français) à laquelle conduit le lien ci-dessous.
The locations of the various positions can be visualized by adding "/?tp=1" to the address (URL) of a site in Joomla!, as illustrated by the page (in French) to which the link below leads.

>> http://anglais-pratique.fr/?tp=1

Cela ne fonctionnera que si la fonction « Prévisualisez la position des modules » a été préalablement activée dans la partie « Gestion des templates > Paramètres » de l'outil d'administration, comme le montre la capture d'écran (en français) ci-dessous.
It will work only if the "Preview Module Positions" function has been enabled beforehand in the "Templates Manager > Options" part of the administration tool, as shown in the screenshot (in French) below.

Prévisualisez la position des modules

L'attribution d'un sous-titre au site était une fonction standard de Joomla! 1.5 mais elle ne semble pas exister dans Joomla! 3. J'ai donc dû créer un module pour afficher un sous-titre en « position-1 » (et je me suis assuré que sa longueur ne dépasse pas celle du titre du site).
Assigning a subtitle to a site was a standard function of Joomla! 1.5, but it doesn't appear to exist in Joomla! 3. So I had to create a module to display a subtitle in "position-1" (and I made sure its length didn't exceed that of the site title).

Les deux images ci-dessous montrent le code HTML du module et son résultat à l'affichage.
The two pictures below show the HTML code of the module and its result when displayed.

Code module Sous-titre

Sous-titre

Je n'ai rencontré que deux problèmes avec la (re)création des modules spécifiques à mon site en Joomla! 3.
I encountered only two problems with the (re)creation of specific modules for my site in Joomla! 3.

Le premier problème, que j'ai évoqué dans une précédente section de cet article, était que le code de certains modules (de Google et de 1&1 Internet) n'était pas accepté par l'éditeur « TinyMCE » de l'outil d'administration. La solution a consisté à utiliser l'éditeur « CodeMirror ».
The first problem, which I mentioned in a previous section of this article, was that the code of certain modules (Google's and 1&1 Internet's) wasn't accepted by the "TinyMCE" editor in the administration tool. The solution consisted in using the "CodeMirror" editor.

Le second problème est survenu lorsque j'ai voulu utiliser le même code source pour le module de « Recherche personnalisée Google™ » que celui de mon site en Joomla! 1.5.
The second problem occurred when I wanted to use the same source code for the "Google™ Custom Search" module as for my Joomla! 1.5 site.

Voici comment ce module apparaissait sur mon site en Joomla! 1.5 :
Here's how that module appeared on my site in Joomla! 1.5:

Google Search J1.5

Voici le résultat du même code en Joomla! 3 :
Here's the result of the same code in Joomla! 3:

Bad Google Search J3

Puisque je voulais que la fonction « Recherche » soit présentée sur une seule ligne, j'ai essayé tous les autres styles de présentation proposés par Google et n'en ai trouvé qu'un qui satisfasse mes exigences. J'ai donc importé le code source correspondant, ce qui a produit le résultat suivant :
Since I wanted the "Search" function to be presented on a single line, I tried all other presentation styles proposed by Google and could find only one that met my requirements. So I imported the corresponding source code, which produced the following result:

Google Search J3

Malheureusement, la zone de saisie et le bouton « Rechercher » ne sont pas correctement alignés mais je ne sais pas y remédier !
Unfortunately, the input area and the "Search" button aren't properly aligned, but I don't know how to fix that!


>> Retour au début de la sous-section / Return to the beginning of the subsection

>> Retour au début de la section « Modèle » / Return to the beginning of the "Template" section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Quelques mots pour finir
A few final words

Je n'ai pas pu trouver la réponse à toutes mes questions (concernant Joomla! 3) sur le web mais il y a tout de même des sites qui sont d'un certain secours, par exemple ceux auxquels conduisent les liens ci-dessous (le premier site est en français, le second en anglais).
I couldn't find the answers to all of my questions (concerning Joomla! 3) on the web, but there are nevertheless sites that provide some help, in particular those to which the following links lead (the first site is in French, the second one in English).

>> Joomla! 3 Le Livre Pour Tous

>> Joomla! Tutorial

J'espère que vous avez trouvé cet article-ci à la fois intéressant et utile, que ce soit pour les informations sur Joomla! ou pour le vocabulaire français-anglais.
I hope you found this article both interesting and useful, whether for information about Joomla! or for the French-English vocabulary.

N'hésitez pas à m'envoyer vos commentaires et suggestions à l'adresse suggérée par ceci : « neil arobase minkley point fr ». Merci !
Don't hesitate to send me your comments and suggestions to the address suggested by this: "neil at minkley dot fr". Thanks!

Neil Minkley

Fin de l'histoire :-)
End of story :-)


>> Retour au début de la section finale / Return to the beginning of the final section

>> Retour au début de la table des matières / Return to the beginning of the table of contents

>> Retour en haut de la page / Return to the top of the page


Copyright © 2013-2017 Neil Minkley. Tous droits réservés. All rights reserved.