Link to the original file, before conversion

Création d’un site web avec Joomla!®

Mise en route

Dominique Lieffrig

2017/2018

%LASTUPDATE%

Table des matières

Les CMS (Content Management System)

Définition

L’acronyme anglais CMS signifie « Content Management System ». En français, nous traduirons cela par « Système de Gestion de Contenu ». Cela désigne une famille d’applications permettant d’organiser et de gérer intégralement l’apparence et le contenu de votre site web. Via ces outils, les mises à jour de contenu pourront être réalisées très facilement. Par « contenu », il faut entendre : textes, images, vidéos…

Les CMS peuvent être utilisés sans connaissances préalables en programmation. Il faut cependant bien noter que quelques connaissances en langage HTML et CSS peuvent s’avérer extrêmement utiles.

En général, une interface web intuitive permet à l’administrateur de gérer le site web.

C’est ainsi que ces systèmes sont souvent utilisés par les organisations qui souhaitent un site web non-statique, dont l’ajout de contenu est facile. Dans le cas d’un hébergement externe, puisque l’ensemble du contenu est directement sur l’espace d’hébergement (et non sur un ordinateur personnel) cela permet de pouvoir accéder au site depuis n’importe quel ordinateur (ou autre appareil) relié à Internet afin notamment d’effectuer des mises à jour.

Quelques CMS

De très nombreux CMS sont disponibles sur le marché. En voici quelques-uns.

Drupal

Très célèbre, il s’installe et s’utilise relativement facilement. Drupal se distingue par un code source apprécié des développeurs. Si vous prévoyez de personnaliser le fonctionnement de Drupal, vous serez heureux de vous baser sur un code facile à modifier et robuste (les dernières versions exploitent le framework web Symfony apprécié des développeurs).

Des connaissances en HTML / CSS, PHP et Symfony vous seront très utiles pour créer vos propres extensions.

Joomla!

C’est l’un des CMS les plus célèbres avec Drupal et Wordpress. Joomla est très simple à installer et à utiliser. Sa communauté d’utilisateurs est dynamique, ce qui est un point important à vérifier quand on utilise un CMS open source. NB : le point d’exclamation après le nom fait partie de la marque commerciale – ce n’est pas une expression de surprise à chaque fois que nous l’utilisons. Afin de faciliter la lecture, dans les notes qui suivent, le point d’exclamation ne sera pas repris.

SPIP

SPIP est un CMS français, ce qui explique certainement qu’il soit si répandu dans l’Hexagone, notamment dans les administrations, universités et associations. Facile à installer et assez simple d’usage dans la pratique, il manque cependant de notoriété et dispose d’un nombre d’extensions restreint.

TYPO3

C’est le plus ancien des CMS de cette liste (lancé en 1997 !). Il est toujours activement maintenu, bien qu’en perte de vitesse comparé à Wordpress, Joomla et Drupal. Typo3 est puissant et très modulaire, mais reste réservé à des utilisateurs avancés et sa configuration peut se révéler particulièrement complexe.

WordPress

Wordpress est un outil très utilisé (CMS le plus populaire) pour la création de sites web. Pourtant, à la base, Wordpress n’est pas prévu pour créer des sites complets, mais est un moteur de blog, qui permet de publier des billets d’actualité. Si Wordpress est aujourd’hui tout à fait capable de se comporter comme un CMS, on sent par contre toujours qu’il s’agit plutôt d’un moteur de blog à l’origine.

Il est simple à utiliser et suivi par une très grande communauté active, qui fournit une impressionnante quantité d’extensions à télécharger.

Quand il s’agit de créer un blog ou un petit site très simple, Wordpress est rapide à mettre en place.

CMS spécialisés

Certains CMS sont conçus pour des domaines bien précis.

Exemples : Magento et Prestashop sont des systèmes de gestion de contenu pour l’e-commerce.

Joomla en quelques mots

Qu’est-ce que Joomla ?

Joomla est un système de gestion de contenu (en anglais, CMS, pour Content Management System) créé par une équipe internationale de développeurs récompensée à maintes reprises, celle-là même qui a hissé Mambo vers les sommets. Joomla est un CMS Open Source distribué sous licence GNU/GPL[1] (gratuit) avec lequel vous pourrez mettre en ligne du contenu et mettre à disposition de vos visiteurs des services (forum, boutique en ligne, galerie photos, etc.), le tout sans connaissance technique particulière.

D’où vient ce nom ?

Joomla est la transcription phonétique d’un mot swahili qui signifie « tous ensemble », ou encore « en un tout ».

Ce nom a été choisi parmi les milliers de propositions faites par la communauté, il a même été passé au banc d’essai par des professionnels du marketing et des marques, convaincus eux aussi que Joomla était le meilleur choix.

Ce qui rend Joomla différent, c’est l’engagement des créateurs et gestionnaires à le rendre aussi simple que possible, tout en offrant un maximum de fonctionnalités. Au final, des non techniciens pourront parfaitement gérer eux-mêmes leur site, sans être obligés de passer par des solutions propriétaires aux coûts exorbitants.

Joomla, ce n’est pas seulement une application, ce sont aussi des personnes. La communauté Joomla est composée de développeurs, de designers, d’administrateurs systèmes, de traducteurs, de rédacteurs et, le plus important, d’utilisateurs finaux.

Lexique

Source : http://cinnk.com/joomla/cms/glossaire-des-termes-joomla

ACL

Le système ACL (Access Control List) de Joomla regroupe les droits et accès des utilisateurs du site. C’est grâce à ce système que vous pouvez décider qui voit quoi et qui peut faire quoi, aussi bien dans la partie backend que frontend de votre site.

Administration

L’administration ou backend est la partie cachée du site. C’est ici que les administrateurs organisent le site, gèrent le contenu, les modules, les modèles, les utilisateurs...

Vous pouvez accéder à l’administration de votre site à l’adresse www.votre-site.???/administrator

Alias

Les alias dans Joomla sont utilisés pour définir les URL (Uniform Ressource Locator : adresse d’une page web) simplifiées qui mèneront à chacun de vos articles. Ces alias sont définissables dans les menus et dans les articles. Les alias peuvent être définis automatiquement par Joomla, il est cependant conseillé de les définir soi-même (ou tout au moins d’y jeter un coup d’œil) afin d’obtenir des éléments qui soient les plus explicites possibles et qui puissent améliorer le référencement.

Article

Un article est une entité contenant du texte, des images, des vidéos, des liens (dirigeant vers d’autres articles du site ou sur des sites externes)... Un article peut être placé dans une catégorie.

Afin de faciliter la rédaction des articles, Joomla est doté d’un éditeur WYSIWYG (What you see is what you get, signifiant littéralement en français « ce que vous voyez est ce que vous obtenez »).

Il est possible de créer/modifier/gérer les articles par l’administration du site. Selon, les droits dont vous héritez, il est également possible de modifier ces articles depuis le frontend du site.

Backend

Le backend, ou l’administration, est la partie cachée du site. C’est ici que les administrateurs organisent le site, gèrent le contenu, les modules, les templates, les utilisateurs...

Vous pouvez accéder au backend de votre site en ajoutant /administrator à la fin de l’adresse de votre site.

Catégorie

Dans Joomla, une catégorie est une collection d’articles. Les catégories peuvent s’imbriquer entre elles à l’infini. Désormais, une catégorie peut contenir des articles et/ou des catégories.

CSS

CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML.

Editeur

Un éditeur WYSIWYG (What You See Is What You Get) est une extension vous permettant de mettre en forme votre texte. Grâce à lui, vous tapez votre texte, vous soulignez, donnez des couleurs, des puces, créez des liens... et le code HTML correspondant se crée automatiquement. Joomla comporte nativement l’éditeur TinyMCE. D’autres éditeurs sont disponibles.

Extension

Joomla est un CMS nativement riche en fonctionnalités, mais si vous construisez un site avec Joomla et que vous avez besoin de fonctionnalités non présentes par défaut, vous pourrez facilement l’étendre en y installant des extensions.

Il existe différents types d’extensions sous Joomla : les Composants, les Modules, les Plugins, les Templates et les Langues. Chacune de ces extensions gère une fonctionnalité bien spécifique.

Frontend

À l’inverse du backend, le frontend est la partie publique du site. C’est la partie à laquelle les internautes ont accès.

FTP (client)

Un client FTP (File Transfer Protocol) est un logiciel vous permettant de transférer vos dossiers et fichiers de votre ordinateur vers votre hébergeur et inversement. Lors d’une sauvegarde d’un site, vous devez sauvegarder la base de données ET les dossiers et fichiers. Comme client FTP gratuit, compatible Mac, Windows, Linux, et facile d’utilisation, on peut par exemple citer Filezilla.

GNU/GPL

GNU: Le nom du projet GNU provient d’un acronyme récursif « GNU is Not UNIX » (« GNU ce n’est pas UNIX »). UNIX était un système d’exploitation très répandu dans les années 80, pour cette raison, Richard Stallman a conçu GNU de sorte qu’il soit très compatible avec UNIX pour permettre une migration aisée vers GNU. Ce nom permet de reconnaître que GNU présente des similitudes avec UNIX, mais il met également en avant que ces deux systèmes n’ont pas de liens de parenté directe. À l’inverse d’UNIX, GNU est un Logiciel Libre. NB : le logo du projet GNU est une tête de … gnou.

GPL: General Public License

Le terme GNU/GPL désigne le type de licence d’utilisation le plus en vigueur dans le monde du logiciel libre (open source). Cette licence permet notamment d’utiliser un logiciel librement, de le modifier, de le redistribuer et de mettre en circulation des versions du logiciel améliorées, en conservant à celui-ci le même type de licence d’utilisation.

Langue

Les Langues sont certainement les extensions les plus basiques. Les fichiers de langues peuvent être packagés de deux manières différentes, soit comme un pack de fichiers de langue pour le noyau de Joomla, soit comme un pack de fichiers de langue pour une extension. Ces fichiers sont essentiellement des clés/valeurs ou des chaînes de caractères. Ces chaînes de caractères permettent la traduction des textes statiques qui sont assignés avec le code source de Joomla. Ces packs de langue affecteront aussi bien le frontend que le backend.

Mise à jour

L’équipe Joomla travaille en permanence sur l’amélioration du CMS. Régulièrement, des bugs et/ou des failles de sécurité sont découverts. Joomla met donc rapidement à disposition une mise à jour. Depuis Joomla 2.5, ces mises à jour sont réalisables en quelques clics depuis l’administration de votre site. Avant chaque mise à jour, il est vivement conseillé de faire une sauvegarde complète du site.

Javascript

Javascript est un langage de script principalement utilisé dans les pages HTML. À l’opposé des langages serveurs (qui s’exécutent sur le site), Javascript est exécuté sur l’ordinateur de l’internaute par le navigateur lui-même. Ainsi, ce langage permet une interaction avec l’utilisateur en fonction de ses actions (lors du passage de la souris au-dessus d’un élément, du redimensionnement de la page...).

HTML

L’HTML est un langage informatique utilisé sur l’Internet. Ce langage est utilisé pour créer des pages web. L’acronyme signifie HyperText Markup Language, ce qui signifie en français « langage de balisage d’hypertexte ».

Ce n’est pas à proprement parlé un langage de programmation, mais plutôt un langage qui permet de définir le contenu d’une page. Les balises permettent de définir les différentes parties d’une page, d’insérer du texte, des images, des liens, de l’audio, de la vidéo.

Pour visualiser une page en HTML il est nécessaire d’utiliser un navigateur web.

Modèle

Cf. « Template ».

Module

Les modules sont des extensions légères et flexibles utilisées pour le rendu des pages. Ces modules peuvent être comparés à des « boîtes » permettant l’affichage d’un grand nombre d’éléments constituant une page. Nous utiliserons des modules pour :

PHP

Le PHP est un langage informatique utilisé sur l’Internet. Le terme PHP est un acronyme récursif de « Hypertext Preprocessor ».

Ce langage est principalement utilisé pour produire un site web dynamique. Il est courant que ce langage soit associé à une base de données, telle que MySQL.

Exécuté du côté serveur (l’endroit où est hébergé le site), les visiteurs ne doivent pas avoir de logiciels ou de plugins particuliers. Néanmoins, les webmasters qui souhaitent développer un site en PHP doivent s’assurer que l’hébergeur prend en compte ce langage.

Lorsqu’une page PHP est exécutée par le serveur, alors celui-ci renvoie généralement au client (aux visiteurs du site) une page web qui peut contenir du HTML, XHTML, CSS, JavaScript.

Plugin

Un Plugin est un type d’extensions pour Joomla. Les Plugins proposent des fonctionnalités associées à des événements déclencheurs. Joomla propose nativement un ensemble d’événements pour plugins, mais toute extension peut créer ou personnaliser des événements. Lorsqu’un événement particulier intervient, toutes les fonctions du plugin associées à l’événement sont exécutées en suivant une séquence.

Exemples :

Position de module

Les positions des modules sont les emplacements que peuvent occuper vos différents modules (menu, connexion, fil d’Ariane, recherche...). Vous pouvez attribuer une position à un module en l’éditant. Sur votre site, les positions de modules sont prédéfinies par le modèle que vous utilisez.

Préfixe des tables

Le préfixe des tables de la base de données est une chaîne de caractères précédant le nom des tables Joomla. Utiliser un préfixe vous permet de faire tourner plusieurs installations Joomla sur la même base de données. Le préfixe est défini aléatoirement lors de l’installation mais il est également possible de choisir ce préfixe lors de cette étape.

Sauvegarde

Une sauvegarde de votre site vous permet de le restaurer suite, par exemple, à une mauvaise manipulation ou un piratage. Pour sauvegarder entièrement votre site, vous devez sauvegarder votre base de données ET vos fichiers. Il est recommandé de sauvegarder régulièrement votre site, et pour faire cela il existe des outils pratiques et gratuits comme par exemple Akeeba.

Template (ou modèle)

Un template est un type d’extensions Joomla. Un Template est en réalité le design de votre site Joomla. Avec un template, vous pouvez changer le look ou l’atmosphère de votre site web. Les Templates sont relativement simples à construire (avec de bonnes bases en HTML et CSS), et vous apportent un maximum de flexibilité pour afficher votre site web comme vous le souhaitez.

Source de ce lexique : http://cinnk.com/joomla/cms/glossaire-des-termes-joomla

Faisons la distinction entre page, module et article

La page web correspond à l’ensemble des éléments illustrés ci-après.

Référez-vous aux bordures suivantes pour identifier les modules et l’article.

Apache, PHP, MySQL, Joomla : comment s’y retrouver ?

Dans la suite du cours, il va être question de différents outils : Apache, PHP, MySQL… Rien de mieux qu’un petit schéma pour éclaircir tout cela.

Joomla en local ou chez un hébergeur

Joomla peut être installé localement, donc sur votre ordinateur. Il s’agit d’une solution idéale pour réaliser notamment tous les premiers essais.

Une fois que vous souhaiterez mettre votre site en ligne, il faudra passer par les services d’un hébergeur.

Pour faire fonctionner Joomla en local sur votre ordinateur, il faut que plusieurs composants soient installés :

Il s’agit des versions minimales, il est recommandé de travailler avec des versions ultérieures. Certaines extensions requièrent d’ailleurs des versions plus récentes.

L’installation de tous ces éléments est reprise ci-après.

Préparons notre environnement

Installer différents outils

Installer quelques outils de base (navigateurs, modules pour Firefox…)

Sur votre ordinateur, installez les éléments suivants (certains outils sont probablement déjà présents sur votre système) :

Installer WampServer

WampServer est une plate-forme de développement Web sous Windows pour des applications Web dynamiques. Cette plate-forme se base sur l’application serveur Apache, le langage de scripts PHP et des bases de données MySQL. Elle possède également phpMyAdmin pour gérer plus facilement vos bases de données. Tout cela est bien technique, pour simplifier, WampServer permet à notre ordinateur de devenir un serveur web. Nos sites pourront ainsi être développés et testés localement.

Si vous utilisez un Mac, vous pouvez installer MAMP (https://www.mamp.info/en/downloads) ou XAMPP (https://www.apachefriends.org/fr/index.html).

Avec Linux, vous pouvez utiliser XAMPP (https://www.apachefriends.org/fr/index.html).

Pour installer WampServer :

  1. Vérifiez la version de Windows se trouvant sur votre ordinateur : 32 bits ou 64 bits. Pour ce faire, formez la combinaison de touches : touche « Windows » touche-windows + touche « Pause/Break ». Sinon, beaucoup d’autres possibilités existent, en passant notamment par le panneau de configuration.

Vous obtenez alors l’information voulue :

  1. Avant de lancer l’installation de WampServer, il est possible que vous deviez installer des bibliothèques de fonctions qui sont pré-requises. Toujours sur le site Internet www.clicparclic.eu (rubrique « Cours / Seniors – 4me année – Sites web »), vous pouvez télécharger les fichiers suivants : vcredist_x86.zip et vcredist_x64.zip, les décompresser (extraire) puis les exécuter.

  2. Via le site Internet www.clicparclic.eu (rubrique « Cours / Seniors – 4me année – Sites web »), téléchargez le fichier compressé correspondant à votre système : 32 ou 64 bits.

32 bits: wampserver3.1.0_x86.zip

64 bits: wampserver3.1.0_x64.zip

  1. Décompressez (extrayez) le fichier téléchargé puis effectuez un double-clic sur celui-ci.

  2. Après un certain temps (qui peut être relativement long, jusqu’à une minute), vous obtiendrez probablement un avertissement de sécurité, donnez votre autorisation.

  3. Suivez les différentes étapes proposées.

  1. Sur le bureau, vous disposez d’un raccourci vous permettant de lancer Wampserver. Lancez Wampserver et donnez l’autorisation requise.

  2. Si tout se passe bien, dans le coin inférieur droit de l’écran, vous devez voir le pictogramme relatif à Wamp devenir vert : . Lors du démarrage des services, il passera par les couleurs suivantes : rouge => orange => vert

NB : lorsqu’ils ne vous sont pas nécessaires, vous pouvez également, si vous le souhaitez, arrêter les services Apache et MySQL. Ne pas oublier de les redémarrer quand cela est nécessaire.

Problèmes pouvant être rencontrés lors de l’installation de WampServer

Créer « un site Joomla » en local

Voici la procédure pour installer « une instance » de Joomla (donc un site). Chaque fois que vous créez un nouveau site, il faut réaliser ces différentes opérations.

  1. Démarrez l’Explorateur de fichiers, atteignez le dossier suivant : C:\wamp64\www Attention, si vous utilisez un autre serveur que WampServer, les dossiers peuvent se nommer différemment. Par exemple avec MAMP, vous aurez C:\mamp\htdocs Avec XAMP, on a : C:\xampp\htdocs

  2. Créez un dossier dont le parent sera « C:\wamp64\www ». Ce dossier sera nommé en utilisant des lettres et des chiffres mais en évitant les caractères accentués, les espaces et les caractères spéciaux. Dans l’exemple qui suit, le nom est « les-cent-pas », à adapter selon les cas.

  3. Rendez-vous sur le site www.clicparclic.eu (rubrique « Cours / Seniors – 4me année – Sites web ») et téléchargez le fichier getjoomlafr.zip dans le dossier qui vient d’être créé. Effectuez une extraction du fichier dans le dossier lui-même, il ne faut pas qu’un sous-dossier soit créé. Vous devriez obtenir quelque chose de semblable à ce qui suit.

Le fichier « getjoomlafr.zip » peut être supprimé. Il ne restera que le fichier « index.php » dans le dossier.

  1. Démarrez un navigateur, Firefox par exemple.

  2. Via la barre d’adresse du navigateur (pas avec Google), atteignez l’adresse suivante (à adapter suivant le nom du dossier précédemment défini) : localhost/les-cent-pas NB : ne pas oublier d’appuyer sur Enter/Return pour valider.

  1. Sélectionnez la version de Joomla que vous souhaitez installer (au moment de l’écriture de ces notes, la dernière version est la 3.8.0). Cliquez sur « Installer ».

  1. Après quelques secondes d’attente, l’installation débute. Suivez les différentes étapes proposées. Dans la première étape, définissez le nom du site, indiquez une adresse email, choisissez un identifiant et un mot de passe. Ces dernières informations vous permettront d’accéder à l’administration du site.

L’installation s’effectue.

  1. Demandez la suppression du répertoire d’installation.

  1. Cliquez sur « Administration ».

  1. Encodez l’identifiant et le mot de passe (définis en début d’installation) puis cliquez sur « Connexion ».

  1. Vous accédez à l’administration du site (backend).

  1. Cliquez sur le lien suivant (coin supérieur droit de la fenêtre) afin d’accéder au frontend du site.

  1. Vous accédez au frontend.

Vous serez donc très souvent amené à passer d’un onglet à l’autre : administration (backend) partie frontale (frontend)

Se connecter et se déconnecter du backend (partie administration)

Pour vous connecter au backend afin d’administrer votre site web :

  1. Atteignez l’adresse suivante (à adapter suivant le nom de votre site et en utilisant la barre d’adresse de votre navigateur et non pas Google) : localhost/les-cent-pas/administrator

  2. Encodez vos données de connexion puis cliquez sur « Connexion ».

Pour vous déconnecter de l’administration (du backend) :

Cliquez sur le bouton suivant présent dans le coin supérieur droit de l’écran : puis sur « Déconnexion ».

À faire directement après l’installation d’un nouveau site Joomla

Choisir et installer l’éditeur par défaut

Introduction

Lorsque l’on souhaite créer un article, une page web, il est très utile de disposer d’outils nous permettant de définir une mise en forme, d’insérer des images, des liens… Joomla inclut un éditeur nommé TinyMCE. Celui-ci a été considérablement complété avec les dernières versions de Joomla. Cependant, afin de disposer de quelques fonctionnalités complémentaires, nous installerons l’’éditeur JCE.

Installer JCE Editor

Voici la procédure d’installation. Celle-ci est identique pour toutes les autres extensions.

  1. Connectez-vous à l’administration du site (si ce n’est déjà fait).

  2. Cliquez sur « Extensions / Gérer ».

  3. Au sein de l’onglet « Transférer un paquet », cliquez sur le bouton « Ou rechercher le fichier », il est également possible de glisser-poser le fichier voulu.

  1. Atteignez le dossier contenant le fichier permettant l’installation de l’extension JCE puis effectuez un double-clic sur celui-ci.

  1. L’installation s’effectue, le système vous avertit que tout s’est correctement déroulé.

  1. Afin que les options de cette extension soient en français, vous pouvez installer le pack de langue FR. NB : si le bouton ci-dessous n’est plus visible, il suffit de passer par « Extensions / Gérer ».

NB : le numéro de version aura probablement changé au moment où vous lirez ces notes.

  1. Vous obtenez la confirmation que tout s’est bien déroulé.

Définir JCE Editor comme éditeur par défaut

L’éditeur JCE est maintenant installé. Il faut indiquer à Joomla que vous souhaitez utiliser celui-ci par défaut au lieu de celui qui est livré avec Joomla (TinyMCE).

  1. Cliquez sur « Système » puis sur « Configuration ».

  1. Faites le choix voulu dans la liste « Éditeur par défaut » puis cliquez sur « Enregistrer & Fermer ».

Définir le paramètre « Autoriser l’accès à la racine » pour l’éditeur JCE

Lorsque vous souhaiterez, par exemple, insérer des liens hypertextes internes à partir de l’éditeur JCE, il est important que vous ne soyez pas limité au dossier « Images » mais que vous puissiez accéder en tant qu’administrateur à la racine de l’hébergement.

Pour ce faire :

  1. Une fois connecté à la partie administation du site, cliquez sur « Composants » puis sur « Editeur JCE ».

  2. Cliquez sur « Profils JCE ».

  3. Cliquez sur « Default ».

  1. Cliquez sur « Paramètres de l’éditeur » puis sur « Fichier système ».

  1. Sélectionnez « Oui » au niveau de la propriété « Autoriser l’accès à la racine » puis cliquez sur « Enregistrer & Fermer ».

Définir les extensions de fichiers autorisées au niveau du gestionnaire de fichiers

Nous utiliserons le gestionnaire de fichiers de JCE pour envoyer des fichiers ayant l’extension .ico

Les fichiers .ico sont utilisés pour définir les favicons. Ces petites images apparaissent dans les onglets de navigation :

Cette extension .ico n’est pas reprise par défaut, il faut donc l’ajouter. Voici la procédure :

  1. Cliquez sur « Composants / Editeur JCE »

  2. Cliquez sur « Profils JCE ».

  1. Cliquez sur le profil « Default ».

  1. Activez l’onglet « Paramètres des plug-ins » puis cliquez sur « Gestionnaire de fichiers ». Cliquez sur le bouton suivant au niveau de la propriété « Extensions autorisées ».

  1. Atteignez la fin de la liste qui est apparue après avoir cliqué sur le bouton , puis ajoutez l’extension ico.

  1. Cliquez sur « Enregistrer & Fermer ».

Installer quelques extensions incontournables (ou presque)

Akeeba Backup

Akeeba Backup est un système de sauvegarde très complet pour Joomla (et pas uniquement).

Il s’agit d’une extension incontournable.

  1. Une fois connecté à l’administration du site, cliquez sur « Extensions / Gérer ».

  2. Cliquez sur le bouton « Ou rechercher le fichier » présent dans l’onglet « Transférer un paquet ». NB : il est également possible de glisser-déposer le fichier voulu.

  1. Ouvrez le dossier contenant l’extension puis effectuez un double-clic sur le fichier voulu.

NB : le numéro de version aura probablement changé au moment où vous lirez ces notes.

  1. Le système confirme que l’installation s’est bien déroulée.

  1. Si nécessaire, cliquez sur l’onglet « Transférer un paquet » puis sur le bouton « Ou rechercher le fichier » afin d’installer le pack de langue permettant d’obtenir les options en français.

  1. Ouvrez le dossier contenant le fichier reprenant la traduction en français puis effectuez un double-clic sur le fichier voulu.

  1. Vous retrouverez alors l’option « Akeeba Backup » dans le menu « Composants ».

Lors du premier lancement d’Akeeba Backup, la configuration sera réalisée.

Admin Tools

Admin Tools est un composant permettant de rehausser le niveau de sécurité de votre site.

Pour l’installer, il suffit de suivre la même procédure que celle vue pour Akeeba Backup, en sélectionnant les fichiers relatifs à l’extension :

NB : les numéros de version auront probablement changé au moment où vous lirez ces notes.

L’activation de certaines fonctions d’Admin Tools ne se fera que lorsque le site sera chez un hébergeur.

Email Protector

Lorsque vous faites apparaître des adresses emails dans un site web, il est important de protéger celles-ci afin qu’elles ne soient par collectées par des robots qui ensuite effectueront des envois de courriers indésirables.

Il faut savoir qu’il existe un plugin de protection des emails intégré à Joomla mais ce dernier permet essentiellement de protéger les adresses emails apparaissant dans des articles. Afin d’étendre la protection, nous allons installer une extension nommée « Email Protector ».

Procédure :

  1. Une fois connecté à l’administration du site, cliquez sur « Extensions / Gérer ».

  2. Cliquez sur le bouton « Ou rechercher le fichier » présent dans l’onglet « Transférer un paquet ». NB : il est également possible de glisser-déposer le fichier voulu.

  1. Ouvrez le dossier contenant l’extension puis effectuez un double-clic sur le fichier voulu.

NB : le numéro de version aura probablement changé au moment où vous lirez ces notes.

  1. Le système confirme le succès de l’installation.

Dans le cas présent, normalement, le plugin est automatiquement activé après son installation (généralement ce n’est pas le cas avec d’autres plugins). Si vous souhaitez modifier certains paramètres du plugin :

  1. Cliquez sur « Extensions / Plugins ».

  2. Si vous le souhaitez, vous pouvez effectuer une recherche sur base d’un mot-clé.

  1. Cliquez sur le nom du plugin afin d’accéder à ses options. Il est alors possible d’apporter les modifications voulues puis il suffit d’enregistrer et fermer.

GoogliC Analytics

GoogliC Analytics est un plugin qui vous permet d’insérer facilement sur votre site, le code de suivi des statistiques Google Analytics.

Il offre de plus la possibilité d’exclure (des statistiques) des groupes d’utilisateurs.

Pour installer « GoogliC Analytics », il suffit de suivre une procédure analogue à celle qui a été vue pour JCE Editor, Akeeba Backup…

  1. Une fois connecté à l’administration du site, cliquez sur « Extensions / Gérer ».

  2. Cliquez sur le bouton « Ou rechercher le fichier » présent dans l’onglet « Transférer un paquet ». NB : il est également possible de glisser-déposer le fichier voulu.

  1. Ouvrez le dossier contenant l’extension puis effectuez un double-clic sur le fichier voulu.

NB : le numéro de version peut avoir changé au moment où vous lirez ces notes.

Ultérieurement, le plugin devra être activé et paramétré en indiquant le code de suivi qui sera attribué par Google. Ceci peut se faire une fois que le site est en ligne.

Cookies CK

Cookies CK est un plugin qui permet d’afficher un bandeau informatif sur l’utilisation des cookies sur votre site.

  1. Une fois connecté à l’administration du site, cliquez sur « Extensions / Gérer ».

  2. Cliquez sur le bouton « Ou rechercher le fichier » présent dans l’onglet « Transférer un paquet ». NB : il est également possible de glisser-déposer le fichier voulu.

  3. Ouvrez le dossier contenant l’extension puis effectuez un double-clic sur le fichier voulu.

NB : le numéro de version peut avoir changé au moment où vous lirez ces notes.

  1. L’installation est confirmée.

  1. Cliquez sur « Extensions / Plug-ins ».

  2. Recherchez le plugin « Cookies CK ».

  1. Cliquez sur le plugin « Cookies CK ».

  2. Définissez les propriétés voulues puis enregistrez et fermez. NB : il ne faut pas oublier d’activer le plugin.

Le bandeau suivant s’affichera dans le bas de votre site.

Configurer le site et définir la valeur par défaut de certains paramètres

Activer la prévisualisation des positions disponibles dans les templates

Procédure :

  1. Connectez-vous à l’administration du site (si ce n’est déjà fait).

  2. Cliquez sur « Système » puis sur « Configuration ».

  1. Cliquez dans la liste de gauche sur le type de composants concerné. Dans le cas présent, il faut cliquer sur « templates ».

  1. Sélectionnez « Activé » pour la propriété « Prévisualisez la position des modules » puis enregistrez.

Ne pas indexer (référencer) le site

Lorsqu’un site est en cours de création et qu’il est hébergé à l’extérieur (pas en local), il est important de veiller à ce qu’il ne soit pas indexé par les moteurs de recherche tant qu’il n’est pas finalisé.

Pour empêcher l’indexation par les moteurs de recherche :

  1. Connectez-vous à l’administration du site (si ce n’est déjà fait).

  2. Cliquez sur « Système » puis sur « Configuration ».

  1. Dans l’onglet « Site » (pas visible ci-après), vous trouvez l’option « Robots ».

  1. Sélectionnez la valeur « No index, no follow » : n’indexe ni le contenu, ni les liens (Google ne suivra pas les liens situés dans les pages).

  2. Enregistrez.

NB : une fois le site finalisé en ligne, il ne faudra pas oublier de modifier ce paramètre.

Définir le nom du site, une description, le fuseau horaire…

Pour définir ou modifier le nom du site, indiquer une description, définir des mots-clés… :

  1. Connectez-vous à l’administration du site (si ce n’est déjà fait).

  2. Cliquez sur « Système » puis sur « Configuration ».

  3. Via l’onglet « Site » notamment, définissez les paramètres voulus puis enregistrez.

Pour définir le fuseau horaire :

  1. Cliquez sur « Système » puis sur « Configuration ».

  2. Activez l’onglet « Serveur » puis sélectionnez le fuseau horaire adéquat.

  1. Enregistrez.

Activer l’option « Réécriture au ‘vol’ des URL »

L’activation de l’option « Réécriture au ‘vol’ des URL » permet d’obtenir des URL plus propres. La partie « index.php » n’apparaîtra plus.

  1. Connectez-vous à l’administration du site (si ce n’est déjà fait).

  2. Cliquez sur « Système » puis sur « Configuration ».

  3. Via l’onglet « Site », affectez la valeur « Oui » à la propriété « Réécriture au ‘vol’ des URL » puis enregistrez.

  1. Pour que cela fonctionne, il faut un fichier .htaccess à la racine du site. Pour ce faire, démarrez Notepad (ou autre éditeur), ouvrez le fichier « htaccess.txt » se trouvant à la racine du site.

  1. Ensuite, cliquez sur « Fichier / Enregistrer sous… ». Nommez le fichier « .htaccess » et sélectionnez « All types » dans la liste « Type ». Enregistrez.

Retrouver certaines données techniques

Où retrouve-t-on le nom de la base de données dans laquelle toutes les données de contenu sont stockées ?

  1. Connectez-vous à la partie administration (si ce n’est déjà fait).

  2. Cliquez sur « Système » puis sur « Configuration ».

  3. Cliquez sur « Serveur ». Vous obtenez les informations voulues : type de base de données, nom de la base, préfixe des tables… Vous trouvez également l’emplacement du dossier temporaire.

Note :

Le dossier temporaire (tmp) correspond à l’endroit où Joomla stocke temporairement les fichiers durant les procédures d’installation. Il n’est pas rare que des fichiers restent « coincés » dans ce répertoire, cela ne gêne pas le bon fonctionnement du site mais occupe inutilement de l’espace. Vous pouvez donc de temps à autre vider ce dossier.

– Cas d’utilisation –

Au terme de l’étude de ce premier cas, vous serez capable de(d’) :

Donc, dans ce premier cas :

L’objectif est de créer un site Internet pour le club de marche « Les Cent Pas ».

Site visible à l’adresse suivante : https://les-cent-pas.clicparclic.eu

Arborescence du site

Dimensions, couleurs, police(s)…

Largeur du site

La largeur du site est de 1170 px. Cette valeur est définie par le template (modèle) utilisé.

Couleurs utilisées

Domaine d’application Décimal Hexadécimal Aperçu
Fond de page R255 V255 B255 #FFFFFF
Fond de l’en-tête (liens vers les réseaux sociaux, téléphones, email) et fond des blocs en pied de page R245 V245 B245 #F5F5F5
Fond du titre des pages et fond de la zone prévue pour le copyright en bas de page R43 V182 B115 #2BB673
Fond des boutons (état normal) R43 V182 B115 #2BB673
Fond des boutons au survol R33 V141 B89 #218D59
Liens hypertextes (état normal) R43 V182 B115 #2BB673
Liens hypertextes au survol R33 V141 B89 #218D59

Corps de texte et titres

Ci-dessous, ce sont les caractéristiques qui seront définies par défaut. Elles peuvent être modifiées « localement ».

Style Caractéristiques
Corps de texte Couleur : #333333 (gris très foncé)

Police(s) utilisée(s) : Open Sans

Taille des caractères : 14 px | | H1 | Épaisseur (font-weight) : 600

Police : Open Sans

Taille : 24 px | | H2 | Épaisseur (font-weight) : 600

Police : Open Sans

Taille : 22 px | | H3 | Épaisseur (font-weight) : 400

Police : Open Sans

Taille : 14 px |

Les pages du site : croquis et résultat à obtenir

Page « Accueil »

Page « Le Club / Affiliation »

Page « Le Club / Documents »

Page « Le Club / Historique »

Page « Le Club / Le conseil d’administration »

Page « Infos utiles / Le matériel »

Page « Infos utiles / Quelques conseils »

Page « Photos »

Page « Agenda »

Page « Contact »

Une fois le site en ligne, il faudra activer le plugin voulu et paramétrer celui-ci.

Suivant les nécessités, nous supposons que les différents outils voulus ont été installés comme expliqué dans le point « Préparons notre environnement » (page 11).

Installer Joomla

Pour installer une nouvelle instance de Joomla pour le présent site, vous pouvez vous référer à la procédure reprise dans le point « 2 Créer « un site Joomla » en local » figurant à la page 18.

Gérer les frameworks et les templates

Présentation

Pour rappel, un template (modèle) est un type d’extensions Joomla. Un template correspond au design de votre site Joomla. C’est au niveau du template que sont définies les différentes positions dans lesquelles des éléments peuvent être publiés. De plus, c’est à ce niveau que les couleurs, polices de caractères… sont définies. Le template définit le look ou l’atmosphère de votre site web.

Un framework est un ensemble d’outils conçu en vue de nous aider dans notre travail. Il n’est pas indispensable d’ajouter un framework à Joomla pour créer un site mais cela peut aider. Différents frameworks sont disponibles pour Joomla : Expose, Gantry, Helix, T3…

Dans cet exercice, c’est le framework Helix qui sera utilisé.

Concrètement, le framework Helix permet de personnaliser facilement un template basé sur celui-ci. Certaines caractéristiques (couleurs, polices de caractères, tailles des caractères, styles de titre, logo, favicon…) seront modifiables de manière très conviviale via l’interface graphique (listes déroulantes, boutons, zones de saisie…), d’autres modifications devront être effectuées via du code.

De plus, grâce au framework Helix, il est simple :

TEMPLATE HELIX III TEMPLATE AZORA TEMPLATE RHINO
FRAMEWORK HELIX III Templates Beez, Protostar… Extension
JCE Editor
Extension Akeeba Backup Extension SP Portfolio Extension SP Page Builder
JOOMLA
SERVEUR WEB
(WampServer : Apache + MySQL + PHP)

Les grilles dans le webdesign

Il est très important de savoir que de nombreux frameworks utilisent une grille comptant douze colonnes. Nous allons retrouver cette grille de 12 colonnes lors de l’utilisation de l’extension SP Page Builder (Page Builder CK également).

Voici différents cas d’utilisation lorsque l’on travaille avec une colonne, deux colonnes…

1 colonne : la colonne occupe toute la grille en largeur

2 colonnes : les colonnes occupent équitablement la grille en largeur

3 colonnes

4 colonnes

5 colonnes Eh oui : il n’est pas possible d’obtenir 5 colonnes de même largeur (5 n’est pas un diviseur de 12).

6 colonnes

Installer un nouveau template (modèle)

Dans le cas présent, l’objectif est d’installer le template Helix III.

En installant le template Helix III, le framework Helix III sera également automatiquement installé.

Il faut donc constater que « Helix III » est une dénomination qui est donnée à un framework et à un template. Tout en utilisant le framework Helix III, vous pouvez installer bien d’autres templates qui sont construits sur celui-ci : Doctor, News365, Radon, Rhino, Xeon, Yoga…

Procédure :

Pour installer le template (modèle) qui sera mis à votre disposition :

  1. Connectez-vous à l’interface d’administration (si ce n’est déjà fait).

  2. Cliquez sur « Extensions » puis sur « Gérer »

  1. Au sein de l’onglet « Transférer un paquet », cliquez sur « Ou rechercher le fichier ».

  1. Ouvrez le dossier voulu et effectuez un double-clic sur le fichier du template Helix.

  1. Le système confirme le succès de l’installation.

  1. Cliquez sur le bouton « Ou rechercher le fichier ».

  1. Ouvrez le dossier voulu et effectuez un double-clic sur le fichier de langue FR. De cette manière les options apparaîtront en français.

  1. Le système confirme l’installation.

Positions disponibles dans le template Helix III

Définir le template (modèle) utilisé par défaut

Pour définir le template (modèle) qui sera utilisé par défaut :

  1. Connectez-vous à l’interface d’administration (si ce n’est déjà fait).

  2. Cliquez sur « Extensions » puis sur « Templates ».

  1. Vous obtenez la liste des modèles. Cliquez sur le bouton suivant afin de définir le modèle voulu par défaut.

  1. Cliquez sur le lien de prévisualisation.

  1. Vous obtenez un aperçu du site avec le template actif.

Désinstaller un template (modèle)

Il faut noter que le template (modèle) qui est défini par défaut ne peut pas être désinstallé. Vous obtiendrez un message du type suivant : « Désinstallation d’un template : impossible de supprimer le template par défaut. »

Objectif :

Désinstaller le template (modèle) nommé « protostar ». En effet, il ne sert à rien de garder de nombreux templates inutilisés. Pour la partie « site », il est cependant intéressant de garder un autre template que celui défini par défaut et ce à des fins de tests dans certains cas.

Procédure pour désinstaller le template « Protostar » :

  1. Connectez-vous à l’interface d’administration (si ce n’est déjà fait).

  2. Cliquez sur « Extensions » puis sur « Gérer »

  3. Cliquez sur « Gestion » dans la colonne de gauche. Filtrez les données pour ne voir que les templates. Sélectionnez le modèle que vous souhaitez désinstaller et cliquez sur « Désinstaller ».

  1. Le système demande de confirmer la suppression.

  1. Le système confirme que le template a été désinstallé.

Voir les positions disponibles dans un template (modèle)

Avant tout, il faut que la prévisualisation de la position des modules ait été activée (cf. point 4.3.1. Activer la prévisualisation des positions disponibles dans les templates figurant à la page 37).

  1. À partir de l’administration du site, cliquez sur « Extensions / Templates ».

  2. Au niveau de la liste des modèles, cliquez sur le pictogramme présent à gauche du template pour lequel vous souhaitez voir les positions.

  1. Vous obtenez la structure du template.

Gérer les extensions

Définition

Pour rappel : Joomla est un CMS nativement riche en fonctionnalités, mais si vous construisez un site avec Joomla et que vous avez besoin de fonctionnalités non présentes par défaut, vous pourrez facilement l’étendre en y installant des extensions.

Il existe différents types d’extensions sous Joomla : les composants, les modules, les plugins, les templates et les langues. Chacune de ces extensions gère une fonctionnalité bien spécifique.

Installer des extensions

Si vous voulez essayer une nouvelle extension pour laquelle vous n’avez pas reçu d’avis d’autres personnes, dont vous ne connaissez pas l’auteur… effectuez d’abord des tests sur un site « brouillon » et faites une sauvegarde de votre site avant d’installer l’extension.

Il faut noter qu’il existe une option permettant de lancer l’installation d’extensions directement à partir du web. Cependant, celle-ci n’est pas optimale notamment pour deux raisons : les options de filtrage proposées ne sont pas convaincantes et d’autre part, vous ne pourrez pas installer les packs de langue via cette méthode. Nous optons donc pour les installations à partir des packages préalablement téléchargés. Cette procédure d’installation a déjà été abordée précédemment, il s’agit ici d’un rappel.

Voici la procédure pour installer une extension à partir d’un package. Dans le cas présent, notre objectif est d’installer « Slider CK ». Cette extension permet de présenter des images avec un effet de défilement (carrousel).

  1. Connectez-vous à l’interface d’administration.

  2. Cliquez sur « Extensions » puis sur « Gérer »

  3. Au sein de l’onglet « Transférer un paquet », cliquez sur « Ou rechercher le fichier ».

  1. Ouvrez le dossier voulu et effectuez un double-clic sur le fichier de l’extension « Slider CK ».

NB : le numéro de version aura probablement changé au moment où vous lirez ces notes.

  1. Le système confirme que l’installation a été effectuée avec succès.

En suivant cette procédure, installez les extensions suivantes.

Nom Description – Fichiers Site web
iCAgenda Permet de gérer un calendrier d’événements.

| https://icagenda.joomlic.com/fr/ | | RSForm Pro | Permet de créer des formulaires.

| https://www.rsjoomla.com | | SP Page Builder | Permet de créer des pages.

| https://www.joomshaper.com |

Pour rappel, d’autres extensions ont été installées dans le cadre du point « 4.2 Installer quelques extensions incontournables (ou presque) » figurant à la page 30.

Lors de l’installation de certaines extensions, il est parfois nécessaire d’activer des plugins afin de bénéficier des fonctionnalités attendues. Pour ce faire, il suffit de passer par « Extensions / Plugins ». Ensuite, il faut rechercher le(s) plugin(s) concerné(s) puis les activer.

Exemple :

Voir les extensions installées

Pour voir l’ensemble des extensions installées, une fois connecté à l’administration, cliquez sur « Extensions » puis sur « Gérer ».

Il faut bien se placer dans le volet « Gestion », vous obtenez une liste semblable à ce qui suit. Il faut noter que des possibilités de filtrage existent, heureusement, vu le nombre d’extensions que nous pouvons rencontrer dans un site.

Désactiver une extension

Il est possible de désactiver une extension qui n’est plus nécessaire durant un certain temps. Cette technique peut également être intéressante pour détecter des conflits entre extensions.

Une extension désactivée peut être réactivée à tout moment, c’est donc bien différent d’une désinstallation.

  1. Connectez-vous à l’interface d’administration (si ce n’est déjà fait).

  2. Cliquez sur « Extensions » puis sur « Gérer ».

  3. Cliquez sur « Gestion » dans la colonne de gauche, recherchez l’extension que vous souhaitez désactiver puis utilisez le bouton présent dans la colonne « Statut ».

Désinstaller une extension

Supposons qu’une extension soit devenue inutile, il est alors vivement conseillé de la désinstaller.

Pour désinstaller une extension :

  1. Connectez-vous à l’interface d’administration (si ce n’est déjà fait).

  2. Cliquez sur « Extensions » puis sur « Gérer ».

  3. Cliquez sur « Gestion » dans la colonne de gauche, recherchez l’extension que vous souhaitez désinstaller, cochez celle-ci puis utilisez le bouton « Désinstaller ».

Note

En fonction des besoins, il est possible de cocher plusieurs extensions puis d’utiliser le bouton « Désinstaller ». Cependant, dans certains cas (tout dépend des extensions concernées), cela peut poser des problèmes et provoquer l’affichage de messages d’erreur. Il suffit alors d’effectuer la désinstallation extension par extension. Il faut également noter, qu’un message d’erreur peut apparaître alors que tout ce que vous souhaitiez désinstaller l’a bien été (une suppression en cascade ayant eu lieu). Il faut vérifier au cas par cas.

Envoyer quelques images et autres fichiers (pdf…)

Au préalable, il est très important d’avoir redimensionné les images et d’avoir allégé le poids des fichiers. Cette opération peut être évitée dans le cas où l’on utilise une extension qui permet de réaliser cette tâche au vol, c’est-à-dire lors de l’envoi des fichiers.

Objectif : envoyer les images qui seront utilisées lors de la création des pages du site.

  1. Connectez-vous à l’interface d’administration (si ce n’est déjà fait).

  2. Cliquez sur « Composants » puis sur « Editeur JCE ». NB : il faut bien évidemment que cette extension ait été installée comme expliqué précédemment (cf. point « 4.1 Choisir et installer l’éditeur par défaut » à la page 24).

  3. Cliquez sur « Gestionnaire de fichiers ».

  1. Ouvrez le dossier « Images ». NB : il ne faut pas oublier d’ouvrir le dossier à partir duquel des sous-dossiers devront être créés. Ensuite, cliquez sur « Nouveau dossier ».

  1. Nommez le dossier puis cliquez sur « Valider ».

  1. Nous souhaitons créer un sous-dossier dépendant de « galeries », il faut donc ouvrir ce dernier.

  1. Cliquez sur « Nouveau dossier », nommez le sous-dossier « fagnes-2017 » puis validez.

Voici l’arborescence obtenue.

  1. Veillez à ce que le sous-dossier « fagnes-2017 » soit ouvert puis cliquez sur « Envoyer ».

  1. Dans la fenêtre suivante, vous pouvez glisser-déposer les fichiers à envoyer, il est également possible de cliquer sur « Explorer ».

  1. Atteignez le dossier contenant les photos à envoyer, sélectionnez les photos puis cliquez sur « Ouvrir ».

  1. Cliquez sur « Envoyer ».

  1. Les photos se trouvent dans le dossier voulu.

  1. Pour obtenir un aperçu des photos sous forme de vignettes, cliquez sur le bouton suivant :

Si vous sélectionnez par exemple un fichier, vous disposez de boutons (partie droite de la fenêtre) permettant de supprimer, renommer, copier, couper, prévisualiser ou transformer l’image.

En suivant une procédure analogue, transférez les photos suivantes.

Et enfin, transférez les fichiers pdf suivants :

Une fois les envois de fichiers terminés, il suffit de fermer la fenêtre.

Note

Ce type de transfert de fichiers peut également se faire soit via l’Explorateur de fichiers si on travaille localement soit via un client FTP (WinSCP, FileZilla…) si le site se trouve chez un hébergeur externe. L’extension gratuite Asikart RemoteImage est également très intéressante.

Personnaliser le template, intégrer du contenu

Modifier certaines propriétés du template (modèle)

Pour les différents points qui suivent, commencez par ceci :

  1. Cliquez sur « Extensions / Templates ».

  2. Cliquez sur le template « shaper_helix3 » (dans la colonne « Styles »).
  1. Dans l’onglet « Principal » définissez la valeur « Oui » pour la propriété « Go To Top ».

  1. Toujours dans l’onglet « Principal », cliquez sur le bouton « Sélectionner » au niveau de la propriété « Favicon ».

  1. Ouvrez le dossier voulu, sélectionnez le fichier souhaité puis cliquez sur « Insérer ».

  1. L’image sélectionnée apparaît.

  1. Dans le groupe d’options « LOGO », cliquez sur le bouton « Sélectionner » au niveau de la propriété « Image ».

  1. Ouvrez le dossier voulu, sélectionnez le fichier souhaité puis cliquez sur « Insérer ».

  1. L’image sélectionnée apparaît.

  1. Enregistrez.

Modifier le texte en pied de page

Procédure pour modifier le texte en pied de page (ne pas oublier les étapes reprises à la suite du titre 6.1 si ce n’est déjà fait) :

  1. Toujours dans l’onglet « Principal », descendez jusqu’à la propriété « Informations de copyright » puis encodez le texte voulu.

  1. Enregistrez et vérifiez dans la partie frontale que le pied de page est bien modifié.

Définir les liens pour les réseaux sociaux

Procédure pour définir les liens pour les réseaux sociaux (ne pas oublier les étapes reprises à la suite du titre 6.1 si ce n’est déjà fait) :

  1. Toujours dans l’onglet « Principal », descendez jusqu’aux propriétés « Lien URL Facebook » et « Lien URL Twitter » puis encodez les adresses de vos pages sur ces réseaux sociaux. Dans le cas présent, c’est l’adresse des pages d’accueil des deux réseaux sociaux qui ont été indiquées, il faut personnaliser pour vos pages.

  1. Enregistrez et vérifiez dans la partie frontale que deux icônes se trouvent au-dessus du logo.

Définir les informations de contact

Procédure pour définir les informations de contact : téléphones et email (ne pas oublier les étapes reprises à la suite du titre 6.1 si ce n’est déjà fait) :

  1. Toujours dans l’onglet « Principal », descendez jusqu’aux propriétés « Téléphone », « Mobile » et « E-mail » puis encodez les données voulues.

  1. Enregistrez et vérifiez dans la partie frontale que les informations sont affichées dans le coin supérieur droit.

Changer le style de couleurs (parmi les styles prédéfinis)

Procédure pour modifier les couleurs prédéfinies (ne pas oublier les étapes reprises à la suite du titre 6.1 si ce n’est déjà fait) :

  1. Activez l’onglet « Prédéfinis » puis sélectionnez le bouton « PRESET3 », nous supposons que nous souhaitons aller vers une couleur verte.

  1. Enregistrez et vérifiez le résultat obtenu dans la partie frontale.

Personnaliser les styles de titre

Procédure pour personnaliser les styles de titre (ne pas oublier les étapes reprises à la suite du titre 6.1 si ce n’est déjà fait) :

  1. Activez l’onglet « Typographie » puis personnalisez le style H1.

  1. Personnalisez le style H2.

  1. Enregistrez et fermez.

Publier les modules en bas de page

Les différents modules ci-après sont communs à toutes les pages. Nous pouvons les créer dès à présent.

Comme nous pouvons le voir au niveau du template, ce sont les positions bottom1, bottom2, bottom3 et bottom4 qui seront utilisées. NB : pour revoir les positions, vous pouvez par exemple passer par « Extensions / Templates / shaper_helix3 (colonne de gauche) » puis onglet « Mise en page ».

Procédure pour créer les modules :

  1. Cliquez sur « Extensions / Modules ».

  2. Vous pouvez constater la présence de modules alors que vous n’en avez par encore créés. Ceci est dû au fait que quelques modules sont présents dès l’installation de Joomla et d’autres modules ont été ajoutés lors de l’installation d’extensions. Nous pouvons supprimer certains modules comme repris ci-après. Attention : supprimer par exemple le module SP Page Builder ne signifie pas que le composant est désinstallé (heureusement !).

  1. Le système confirme la suppression.

NB : pour voir le contenu de la corbeille et éventuellement vider cette dernière, il faut cliquer sur le bouton « Outils de recherche » puis sélectionner « Dans la corbeille » au niveau de la liste « Sélectionner un statut ».

  1. Pour créer un module, cliquez sur « Nouveau »

  1. Sélectionnez le type « Contenu personnalisé ».

  1. Définissez un titre, encodez le contenu du module, définissez quelques propriétés. Il est prudent de vérifier dans l’onglet « Assignation des menus » qu’il est bien indiqué « Assignation à… Sur toutes les pages ». Pour les modules de type « Contenu personnalisé » ce sera le cas par défaut mais pour certaines extensions, le module n’est assigné à aucune page. Une fois le module créé, vous pourrez cliquer sur « Enregistrer & Nouveau » et répétez les actions pour les autres modules. Tout est repris ci-après.

Vérifiez si vous obtenez ce que vous attendez dans la partie frontale.

Supposons que nous souhaitions réduire l’espace supérieur et inférieur au niveau des modules qui viennent d’être créés.

  1. Cliquez sur « Extensions / Templates ».

  2. Cliquez sur le template « shaper_helix3 » (colonne de gauche).

  1. Activez l’onglet « Mise en page ». Descendez jusqu’à la section « Bottom » puis cliquez sur « Paramètres ».

  1. Faites défiler les propriétés et modifiez les marges intérieures. Cliquez sur « Appliquer ».

  1. Enregistrez la modification apportée au template.

  1. Vérifiez le résultat obtenu dans la partie frontale.

Créer le squelette des pages

À présent, nous allons créer le squelette des pages que nous viendrons compléter ensuite. Dans un souci d’organisation, nous créerons également des catégories.

  1. Cliquez sur « SP Page Builder / Pages ».

  1. Cliquez sur « CATÉGORIES ».

  1. Cliquez sur « Nouveau ».

  1. Définissez le titre de la catégorie puis cliquez sur « Enregistrer & Nouveau ».

  1. Nommez la deuxième catégorie puis cliquez sur « Enregistrez & Fermer ».

  1. Cliquez sur « Pages ».

  1. Cliquez sur « Nouveau ».

  1. Définissez le titre de la page : « Accueil ». Cliquez sur la flèche située à droite du bouton « Enregistrer » puis sélectionnez « Enregistrer & Nouveau ».

  1. Encodez le titre de la page « Affiliation ». Afin d’attribuer une catégorie à cette page, cliquez sur « Options ».

  1. Activez l’onglet « PUBLIER », sélectionnez la catégorie puis cliquez sur « Appliquer ».

  1. Cliquez sur la flèche située à droite du bouton « Enregistrer » puis sélectionnez « Enregistrer & Nouveau ».

  1. En suivant une procédure analogue, créez les pages suivantes :

Compléter le menu

C’est bien d’avoir créé des pages mais il faut maintenant disposer d’options permettant de les afficher dans la partie frontale.

Pour ce faire, nous allons compléter le menu.

Rappel de l’arborescence du site :

Créer les entrées de menu

Procédure :

  1. Cliquez sur « Menus / Menu principal ».

  1. Une entrée de menu « Home » existe déjà. Cliquez sur celle-ci. Nous allons modifier l’intitulé, le type et la cible.

  1. Sélectionnez le type « SP Page Builder » puis « Page ».

  1. Cliquez sur le bouton « Sélection » en vis-à-vis de « Sélectionner une page ».

  1. Sélectionnez la page voulue.

  1. Pour cette entrée de menu (pas nécessaire pour les autres), activez l’onglet « Paramètres d’affichage de la page » puis sélectionnez « Paramètres globaux (Non) » au niveau de la propriété « Afficher l’en-tête de page ». Cliquez sur « Enregistrer & Nouveau ».

  1. Définissez le titre de l’entrée de menu suivante puis cliquez sur « Sélection ».

  1. Le menu « Le club » est un peu particulier, en ce sens qu’il ne conduira vers aucune page mais qu’il proposera différentes options : Affiliation, Documents, Historique… Cliquez sur « Liens divers » puis « Séparateur ».

  1. Vous obtenez ce qui suit. Cliquez sur « Enregistrer & Nouveau ».

  1. Nommez l’entrée de menu « Affiliation » puis cliquez sur « Sélection » et suivez les fenêtres ci-après.

  1. Vous obtenez ce qui suit. Pour cette entrée de menu, il est très important de définir le lien parent.

Complétez le menu afin d’obtenir ce qui suit :

Accédez à la partie frontale du site.

Le menu est complété.

Si vous utilisez les options du menu, il ne faut pas s’étonner qu’aucun contenu n’apparaît, les pages sont actuellement vides (exceptés quelques modules).

Compléter le module « Vous informer »

Le menu étant créé, nous pouvons compléter le module « Vous informer » présent en position « bottom2 ».

Procédure :

  1. À partir de l’administration du site, cliquez sur « Extensions / Modules ».

  2. Cliquez sur le module « Vous informer ».

  1. Cliquez dans la partie « Contenu » puis sur le bouton « Insérer/Modifier un lien » .

  1. Définissez les propriétés « Texte », « Titre » et sélectionnez le lien de menu voulu. Cliquez sur « Insérer ».

  1. Pour revenir à la ligne tout en restant dans le même paragraphe appuyez sur « Shift + Return ».

  1. Suivez une procédure analogue pour créer les autres liens :

  1. Enregistrez et fermez.

Le module est ainsi complété (vue dans la partie frontale) :

Publier un module dans la position « offcanvas »

À droite du menu, figure un bouton « hamburger » . Si on clique sur celui-ci, le système nous demande de publier un module dans la position « offcanvas ». C’est ce que nous allons faire.

Procédure :

  1. Cliquez sur « Extensions / Modules ».

  2. Cliquez sur le module nommé « Menu principal » si celui-ci existe encore, sinon il suffit de créer un nouveau module de type « Menu ».

  3. Définissez les propriétés suivantes.

  1. Cliquez sur « Enregistrer & Fermer ».

Notre menu « hamburger » fonctionne.

Compléter les pages

Dans le cadre du présent site, le contenu des pages sera géré via l’extension « SP Page Builder ». Comme son nom l’indique, cette extension permet de construire des pages (de manière très conviviale).

Page « Accueil »

Procédure :

  1. Placez-vous dans la partie frontale du site puis cliquez sur l’option « Login » dans le menu.

  2. Introduisez vos données d’authentification (idem à l’administration) puis validez.

  3. Vous accédez à votre profil, cliquez sur « ACCUEIL » dans le menu.

  1. Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne »

  1. Glissez sur la ligne créée puis cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE ». Définissez les marges intérieures en haut et en bas.

  1. Dans ce même onglet, cliquez sur le bouton « Charger une image » sous « Image de fond ».

  1. Cliquez sur « BROWSE FOLDERS » (en français : parcourir les dossiers).

  1. En effectuant un double-clic, ouvrez le dossier « illustrations », sélectionnez l’image voulue (un clic) puis cliquez sur « Insérer ».

  1. L’image apparaît dans les propriétés.

  1. Toujours dans l’onglet « STYLE », choisissez la valeur « Défilement » au niveau de la propriété « Comportement de l’image de fond »

  1. Cliquez sur « Apply ». Vous obtenez ce qui suit. Cliquez sur « Save ». IMPORTANT : cliquez très régulièrement sur « Save ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur l’addon « Titre ».

  1. Dans l’onglet « GENERAL », définissez le titre, le style de titre, la taille et l’épaisseur de la police.

  1. Activez l’onglet « STYLE » puis définissez la couleur du texte (blanc). Validez.

  1. Voici le résultat obtenu. Cliquez sur « Save ».

  1. Glissez sur la première ligne, puis cliquez sur le bouton « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Colonnes » et définissez le nombre de colonnes voulues (4). NB : pour rappel, la notion de grille est expliquée dans le point 3.2 à la page 67.

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Sélectionnez l’addon « Boîte de fonctionnalités ».

  1. Au sein de l’onglet « GENERAL », définissez de manière adéquate certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply ».

  2. Voici le résultat obtenu. Cliquez sur « Save ».

  1. Utilisez le bouton « Ajouter un nouvel addon » des trois autres colonnes et en appliquant la même procédure que celle vue pour la première colonne créez ce qui suit. Cliquez sur « Save ».

  1. Glissez sur la ligne qui vient d’être créée puis cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Colonnes » et définissez deux colonnes.

  1. Cliquez sur le bouton « Ajouter un nouvel addon » dans la colonne de gauche.

  1. Cliquez sur l’addon « Image »

  1. Cliquez sur le bouton « Charger une image ».

  1. Cliquez sur « BROWSE FOLDERS » puis effectuez un double-clic sur le dossier « illustrations ».

  1. Sélectionnez l’image voulue puis cliquez sur « Insérer ».

  1. Via la propriété « Alt texte », vous pouvez définir le texte alternatif qui est important pour l’accessibilité du site et le référencement. Validez.

  1. Voici le résultat obtenu. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Sélectionnez l’addon « Bloc de texte ».

  1. Définissez les propriétés reprises ci-après.

  1. Cliquez sur « Apply ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur « Ajouter un nouvel addon ».

  1. Cliquez sur « Témoignages Pro ».

  1. Cliquez sur « Item 1 » puis définissez le nom… comme repris ci-après.

  1. Cliquez sur « Add New » pour définir un deuxième élément.

  1. Modifiez les données pour la deuxième personne.

  1. Ajoutez un troisième élément.

  1. Cliquez sur « Apply ». Si vous ne voyez pas les éléments définis, pas d’inquiétude, cela va s’arranger.

  2. Avant tout, cliquez sur « Save » puis actualisez la page.

  1. Cliquez sur le bouton « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « Style » puis définissez les propriétés reprises ci-après.

  1. Cliquez sur « Apply ».

  2. Voici le résultat obtenu. Cliquez sur « Save ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ». Cliquez sur « Appel à l’action ».

  1. Définissez les propriétés comme repris ci-après.

  1. Cliquez sur « Apply ». Vous obtenez ce qui suit. Cliquez sur « Save ».

La page « Accueil » est terminée.

Page « Affiliation »

Dans cette page figure un formulaire. Nous allons commencer par créer celui-ci.

Formulaire à obtenir :

Procédure pour créer le formulaire :

  1. Placez-vous dans la partie « Administration » (backend) du site (…/les-cent-pas/administrator).

  2. Cliquez sur « Composants / RSForm! Pro ». Si nécessaire, authentifiez-vous.

  3. Cliquez sur « Gestion formulaires ».

  1. Cliquez sur « Nouveau ».

  1. Cliquez sur « Quitter l’assistant ».

  1. Cliquez sur « Liste déroulante » puis définissez les propriétés voulues.

  1. Cliquez sur « Enregistrer & Fermer ». Vous obtenez ce qui suit.

  1. Cliquez sur « Ligne de texte » puis définissez les propriétés voulues.

  1. Cliquez sur « Enregistrer & Fermer ».

  2. En suivant une procédure analogue, créez les champs suivants.

  1. Pour le champ « Email », cliquez sur « Ligne de texte » puis complétez les propriétés de la manière suivante.

  1. Pour le champ « Commentaires », cliquez sur « Zone de texte » puis complétez les propriétés de la manière suivante.

  1. Cliquez sur « Enregistrer & Fermer ».

  2. Pour le champ « Date de naissance », cliquez sur « Calendrier » puis complétez les propriétés de la manière suivante.

  1. Cliquez sur « Enregistrer & Fermer ».

  2. Pour le champ « reCAPTCHA », cliquez sur « reCAPTCHA v2 » puis complétez les propriétés comme illustré ci-après. NB : il faut que le plugin voulu ait été installé et activé (cf. page 75).

  1. Cliquez sur « Enregistrer & Fermer ».

  2. Pour le bouton d’envoi, cliquez sur « Bouton soumettre » puis complétez les propriétés comme illustré ci-après.

  1. Cliquez sur « Enregistrer & Fermer ».

Voici l’ensemble des champs obtenus :

  1. Cliquez sur « Enregistrer » (coin supérieur gauche de la fenêtre).

  2. Cliquez sur « Propriétés » puis sélectionnez « Bootstrap 3.3.5 ».

  1. Définissez les propriétés suivantes.

  1. Cliquez sur « Modifier le message d’erreur ».

  2. Complétez le message qui apparaîtra si toutes les informations voulues ne sont pas correctement encodées. Cliquez sur « Enregistrer & Fermer ».

  1. Cliquez sur « Modifier le message de remerciement ».

  1. Définissez le message qui apparaîtra une fois que le formulaire aura été complété et envoyé. Ensuite, cliquez sur « Enregistrer & Fermer ».

  1. Cliquez sur « Enregistrer ». Vous disposez d’un bouton permettant de prévisualiser le site.

Il faut à présent créer un module qui permettra l’affichage du formulaire.

  1. Cliquez sur « Extensions / Modules ».

  2. Si un module de type RSForm ! Pro Module est encore disponible, vous pouvez l’utiliser sinon cliquez sur « Nouveau ».

  3. Sélectionnez le type de module suivant :

  1. Définissez les propriétés voulues puis enregistrez et fermez.

Procédure pour créer la page :

Placez-vous dans la partie frontale du site. Si vous n’êtes plus authentifié à ce niveau, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « LE CLUB / Affiliation ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Bloc de texte ».

  1. Définissez le contenu puis appliquez.

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Numéro de bloc ».

  1. Dans l’onglet « GENERAL », complétez les propriétés suivantes.

Il est fait référence à une classe de style personnalisée définie au niveau du template (Extensions / Templates).

  1. Dans l’onglet « STYLE », définissez une marge externe inférieure. Une autre technique consisterait à intégrer la définition de cette marge dans la classe de style personnalisée.

  1. Confirmez en cliquant sur « Apply ». Cliquez sur « Save ».

  2. Répétez les mêmes actions pour les points 2 et 3. Vous pouvez soit utiliser le bouton « Ajouter un nouvel addon » soit dupliquer l’addon puis le personnaliser en utilisant le bouton suivant :

  1. Cliquez sur « Save ».

  2. Cliquez sur « Ajouter un nouvel addon ».

  1. Cliquez sur « Séparateur ».

  1. Validez.

  1. Cliquez sur « Ajouter un nouvel addon ».

  1. Cliquez sur « Module Joomla ».

  1. Complétez les propriétés voulues.

  1. Cliquez sur « Apply ».

  2. Cliquez sur « Save » puis actualisez la page. Cette actualisation est importante sinon le rendu obtenu n’est pas toujours fidèle à ce que l’internaute verra.

Il faudra définir les paramètres voulus pour le contrôle reCAPTCHA. Ceci sera fait une fois que le site sera mis en ligne.

La page « Affiliation » est terminée.

Page « Documents »

Procédure :

Si vous n’êtes plus authentifié au niveau de la partie frontale, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « LE CLUB / Documents ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Appel à l’action ».

  1. Définissez les propriétés suivantes.

Il est fait référence à une classe de style personnalisée définie au niveau du template (Extensions / Templates).

En suivant la même procédure, créez les autres boutons. Pour rappel, il est possible de dupliquer un addon puis de le personnaliser.

La page « Documents » est terminée.

Page « Historique »

Procédure :

Si vous n’êtes plus authentifié au niveau de la partie frontale, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « LE CLUB / Historique ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Ligne du temps ».

  1. Complétez les propriétés de la manière suivante pour les différents éléments (items).

  1. Cliquez sur « Apply » puis sur « Save ».

La page « Historique » est terminée.

Page « Le conseil d’administration »

Procédure :

Si vous n’êtes plus authentifié au niveau de la partie frontale, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « LE CLUB / Le conseil d’administration ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Colonnes » et demandez 4 colonnes.

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Personne ».

  1. Complétez les propriétés reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Répétez les actions pour les 3 autres personnes. N’oubliez pas d’enregistrer.

La page « Le conseil d’administration » est terminée.

Page « Le matériel »

Procédure :

Si vous n’êtes plus authentifié au niveau de la partie frontale, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « INFOS UTILES / Le matériel ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Colonnes » et demandez 6 colonnes.

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Image ».

  1. Sélectionnez l’image voulue puis appliquez. NB : plus bas dans la fenêtre, vous trouverez une option très intéressante permettant d’activer la fonction Lightbox.

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Bloc de texte ».

  1. Complétez les propriétés ci-dessous.

  1. Cliquez sur « Apply » puis sur « Save ».

  1. En suivant la même procédure, créez les autres éléments.

La page « Le matériel » est terminée.

Page « Quelques conseils »

Procédure :

Si vous n’êtes plus authentifié au niveau de la partie frontale, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « INFOS UTILES / Quelques conseils ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Bloc de texte ».

  1. Complétez la zone « Contenu ».

  1. Cliquez sur « Apply » puis sur « Save ».

La page « Quelques conseils » est terminée.

Page « Photos »

Un module de type « Slider CK » sera inséré dans cette page pour présenter les photos.

Procédure pour créer le module de type « Slider CK » :

  1. Placez-vous dans la partie « Administration » (backend) du site (…/les-cent-pas/administrator).

  2. Cliquez sur « Extensions / Modules ».

  3. Cliquez sur « Nouveau »

  1. Choisissez le type « Slider CK ».

  2. Définissez les propriétés suivantes.

  1. Cliquez sur « Enregistrer & Fermer ».

Procédure pour créer la page :

Placez-vous dans la partie frontale du site. Si vous n’êtes plus authentifié à ce niveau, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « PHOTOS ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Module Joomla ».

  1. Complétez les propriétés suivantes.

  1. Cliquez sur « Apply ». La présentation des photos apparaît totalement destructurée. Pas d’inquiétude, cliquez sur « Save » puis actualisez la page.

La page « Photos » est terminée.

Page « Agenda »

Un module de type « iCagenda – Event List » sera inséré dans cette page pour présenter les événements.

Ajout d’une catégorie et d’événements

  1. Placez-vous dans la partie « Administration » (backend) du site (…/les-cent-pas/administrator).

  2. Cliquez sur « Composants / !Cagenda ».

  3. Cliquez sur « Ajouter une catégorie ».

  1. Définissez la catégorie : titre et couleur.

  1. Cliquez sur « Enregistrer & Fermer ».

  2. Cliquez sur « Évènements » puis utilisez le bouton « Nouveau » afin de créer les évènements qui suivent.

1er événement :

2ème événement :

Nous supposons que les événements sont créés et enregistrés.

Procédure pour créer le module de type « iCagenda – Event List » :

  1. Si vous ne vous y trouvez plus, replacez-vous dans la partie « Administration » (backend) du site (…/les-cent-pas/administrator).

  2. Cliquez sur « Extensions / Modules ».

  3. Cliquez sur « Nouveau »

  1. Choisissez le type « iCagenda – Event List ».

  2. Définissez le titre, masquez le titre…

  1. Cliquez sur « Enregistrer & Fermer ».

Procédure pour créer la page « Agenda » :

Placez-vous dans la partie frontale du site. Si vous n’êtes plus authentifié à ce niveau, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « AGENDA ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Module Joomla ».

  1. Complétez les propriétés voulues.

  1. Cliquez sur « Apply ». La présentation de l’agenda apparaît quelque peu destructurée. Pas d’inquiétude, cliquez sur « Save » puis actualisez la page.

La page « Agenda » est terminée.

Page « Contact »

Une fois le site en ligne, il faudra activer le plugin voulu et paramétrer celui-ci.

Procédure :

Si vous n’êtes plus authentifié au niveau de la partie frontale, cliquez sur « LOGIN » puis connectez-vous.

  1. Cliquez sur « CONTACT ». Cliquez sur « Modifier la page ».

  1. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Options de ligne ».

  1. Activez l’onglet « STYLE » et définissez les propriétés suivantes puis validez.

  1. Cliquez sur « Save » puis sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Titre ».

  1. Complétez certaines propriétés. La liste des propriétés étant très longue, seules celles qui ont été modifiées et/ou qui sont importantes dans le cas présent, sont reprises ci-après.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter une nouvelle ligne ».

  1. Cliquez sur le bouton « Ajouter un nouvel addon ».

  1. Cliquez sur « Bloc de texte ».

  1. Dans l’onglet « GENERAL », encodez le contenu voulu.

  1. Dans l’onglet « STYLE », définissez une marge externe inférieure.

  1. Cliquez sur « Apply » puis sur « Save ».

  2. Cliquez sur « Ajouter un nouvel addon ».

  1. Cliquez sur « Formulaire de contact ».

  1. Définissez les propriétés suivantes

Il est fait référence à une classe de style personnalisée définie au niveau du template (Extensions / Templates).

Voici le formulaire obtenu.

Le plugin « ReCaptcha » sera activé et configuré une fois que le site sera mis en ligne.

La page « Contact » est terminée.

Optimiser pour les moteurs de recherche

S’il est bien un sujet qui fait couler beaucoup d’encre chez les webmasters, c’est bien celui du trafic que notre site génère. Forcément, la finalité d’un site internet c’est bien d’être visité. Une question va alors très vite se poser : comment générer ce trafic et comment amener du monde à visiter notre site web ?

La notion de référencement naturel doit être définie. Le référencement naturel, aussi appelé SEO (Search Engine Optimization), désigne un ensemble de techniques et de savoir-faire pour améliorer le positionnement d‘un site dans les résultats des moteurs de recherche et ce sans faire appel à une campagne publicitaire payante de type « Google AdWords ».

Le référencement naturel permet de répondre aux exigences des moteurs : que le site soit pertinent par rapport aux requêtes des internautes et qu’il soit populaire.

Un site qui répond à ces exigences a de grandes chances d’être bien positionné dans les résultats des moteurs et donc de générer un fort trafic de qualité.

Le référencement naturel est une discipline à part entière et les leviers d’optimisation sont nombreux.

Le choix des mots clés est la colonne vertébrale de la stratégie de référencement naturel. Ensuite les leviers d’optimisation du référencement peuvent être divisés en deux grandes familles :

Référencement naturel : les critères On-Page

Ce sont eux qui vont permettre aux moteurs de se rendre compte de l’adéquation de votre contenu avec la requête de l’internaute : la pertinence.

Pour qu’un site soit pertinent il devra proposer un contenu unique et de qualité, mais aussi être facilement « lisible » par les moteurs : menus clairs, structure de texte bien définie, navigation facilitée…

Référencement naturel : les critères Off-Page

En référencement naturel, les critères Off-Page, permettent aux moteurs de déterminer la popularité de votre site. En effet ils vont considérer que plus votre site est évoqué par d’autres internautes/sites plus son contenu est susceptible d’être intéressant. Le principe est donc simple, il faut faire en sorte que l’on parle de vous !

Le référencement naturel n’est pas une science exacte

Il est important de préciser que le référencement naturel n’est pas une science exacte. Il repose sur l’étude des algorithmes complexes des moteurs de recherche. Algorithmes en constante évolution et dont bien des paramètres sont secrets.

En conséquence, pour tout référenceur qui se respecte il est impossible d’affirmer pouvoir placer un site web (sur des mots clés très concurrentiels) en première position dans les résultats de recherche.

Il faut également préciser que selon le site, le secteur d’activité, la concurrence… les moyens SEO[2] mis en œuvre pour référencer votre site peuvent être différents.

Référencement naturel : un travail qui s’inscrit dans le temps

Le référencement naturel, à l’inverse de l’achat de mots clés type Google Adwords, prend du temps pour être effectif. Il faut, dans certains cas, compter entre 2 et 6 mois pour voir les premiers résultats faire leur apparition. En revanche, les effets du référencement naturel sont durables. Une fois une place obtenue, elle génèrera durablement du trafic qualifié.

Référencer un site demandera beaucoup d’efforts dans un premier temps afin d’atteindre un positionnement optimal. Une fois la place optimale obtenue, le travail de référencement naturel consistera à maintenir cette position. Aussi, de gros efforts ponctuels pourront être demandés pour maintenir cette place en cas de changement d’algorithme d’un moteur ou l’arrivée agressive d’un concurrent. D’où la nécessité pour un référenceur d’être continuellement en veille sur son marché et les évolutions techniques des algorithmes des moteurs.

Source : texte repris et adapté de: http://tacticweb.fr/

http://www.web-biz.fr/wp-content/uploads/2013/11/referencement-naturel.jpg

Illustration reprise du site: http://web-biz.fr

http://www.proximalab.it/wp-content/uploads/2015/01/SEO-Digital-Marketing.jpg

Illustration reprise du site: http://www.supinfo.com

Pour obtenir une (longue) liste de conseils, vous pouvez vous reporter au document « Guide de démarrage Google – Optimisation pour les moteurs de recherche », support papier ou accessible à l’adresse suivante: https://static.googleusercontent.com/media/www.google.com/fr//intl/fr/webmasters/docs/search-engine-optimization-starter-guide-fr.pdf (ou encodez « Guide de démarrage Google » dans un moteur de recherche).

Transférer un site Joomla vers un espace d’hébergement

En résumé

Le site développé localement doit à présent être transféré vers un espace d’hébergement externe.

Sauvegarder un site

À présent, nous allons voir comment faire une sauvegarde d’un site Joomla.

Il existe plusieurs façons de sauvegarder un site Joomla. Nous allons utiliser la sauvegarde à l’aide du composant Akeeba Backup qui permet de réaliser cette opération en quelques clics.

Pour rappel, les données d’un site Joomla sont stockées à deux endroits différents :

Pour que la sauvegarde soit complète, et pour que le site fonctionne, il faut évidemment sauvegarder ces deux parties.

Akeeba Backup est un composant gratuit permettant de faire une sauvegarde d’un site Joomla (fichiers + base de données) et de réinstaller cette sauvegarde sur n’importe quel serveur (local ou distant) remplissant les prérequis de Joomla.

Télécharger et installer Akeeba Backup

Dans le cas présent, Akeeba Backup a déjà été installé, cf. point 4.2.1 à la page 30.

Akeeba Backup configuration post-installation

La première fois que vous accédez à l’administration d’Akeeba Backup via « Composants / Akeeba Backup », le système propose une configuration automatique et vous pourrez prendre connaissance de certaines informations relatives à Akeeba.

  1. Cliquez sur « Configuration automatique ».

  1. Vous pouvez suivre l’évolution de la configuration.

  1. Cliquez sur « Configuration ».

  1. Vous pouvez par exemple choisir le répertoire où seront placées vos sauvegardes. Par défaut, ce répertoire est « administrator/components/com_akeeba/backup ». Sur un site qui est en ligne, pour des raisons de sécurité, il est important de ne pas laisser vos fichiers de sauvegarde dans ce dossier, il faut les copier ailleurs. Il est également possible de définir le nom de la sauvegarde par défaut…

NB : il faut noter que différents profils de sauvegarde peuvent être créés. Un profil peut correspondre à une sauvegarde totale, un autre peut exclure certains dossiers de la sauvegarde…

  1. Dans le cas présent, seul le nom des sauvegardes a été modifié.

  1. Cliquez sur « Enregistrer & Fermer ».

Sauvegarder le site

Pour sauvegarder votre site avec Akeeba Backup :

  1. Connectez-vous à l’administration du site (si ce n’est déjà fait).

  2. Cliquez sur « Composants » puis sur « Akeeba Backup ».

  3. Cliquez sur « Sauvegarder ».

NB : un bouton de sauvegarde en 1 clic est disponible. Il permet d’éviter une fenêtre.

  1. Choisissez une description pour votre sauvegarde. Par défaut, la date du jour sera utilisée. Vous pouvez inscrire un commentaire pour votre sauvegarde. Cliquez sur le bouton « Sauvegarder ».

Vous pouvez suivre la progression de la sauvegarde. Surtout, NE FERMEZ PAS CETTE PAGE avant la fin de la sauvegarde, sinon elle serait interrompue. Selon la taille du site, cela peut prendre plusieurs minutes et vous pouvez parfois avoir l’impression que la sauvegarde est bloquée (le pourcentage de progression stagne voire régresse) alors qu’il n’en est rien.

  1. Une fois la sauvegarde terminée Akeeba vous affiche un message.

  1. Cliquez sur le bouton « Gestion des sauvegardes » afin d’afficher toutes les sauvegardes effectuées. Vous avez accès à toutes vos sauvegardes, vous pouvez les télécharger (mais il faut éviter cette technique), les supprimer une fois que vous les avez sauvegardées ailleurs.

Il est possible que vous obteniez la fenêtre suivante lors de la première utilisation.

Transférer les fichiers voulus chez un hébergeur

Une fois que vous aurez choisi une formule d’hébergement pour votre site, l’hébergeur vous communiquera certaines informations techniques.

ATTENTION : toutes les données présentées ci-après ne sont pas toujours fournies. L’accès au panneau de contrôle et les données FTP peuvent suffire car ensuite via le panneau de contrôle vous pouvez créer vos bases de données…

Panneau de contrôle (d’autres dénominations peuvent être utilisées: Control Panel, panneau de configuration)
Adresse /URL pour accéder au panneau de contrôle: xxxxxxxxxx
Nom d’utilisateur: xxxxxxxxxx
Mot de passe: xxxxxxxxxx
FTP ou SFTP
Hôte: xxxxxxxxxx (adresse FTP)
Nom d’utilisateur: xxxxxxxxxx
Mot de passe: xxxxxxxxxx
E-MAIL
Serveur IMAP: xxxxxxxxxx
Serveur POP3: xxxxxxxxxx
Serveur SMTP: xxxxxxxxxx
Webmail: Xxxxxxxxxx (adresse / URL)
MySQL
Hôte: xxxxxxxxxx
Base de données: xxxxxxxxxx
Nom d’utilisateur: xxxxxxxxxx
Mot de passe: xxxxxxxxxx
phpMyAdmin
phpMyAdmin: xxxxxxxxxx (adresse / URL)
Nom d’utilisateur: xxxxxxxxxx
Mot de passe: xxxxxxxxxx

Il nous reste à transférer les fichiers voulus vers l’espace d’hébergement.

Pour ce faire :

  1. Démarrez votre client FTP (File Transfer Protocol), WinSCP, FileZilla... Dans le cas présent, c’est WinSCP qui est illustré.

  2. Cliquez sur « Nouveau Site ».

  1. Définissez le protocole, l’hôte, le numéro du port, le nom d’utilisateur…

  1. Cliquez sur « Sauver ».

  2. Définissez le nom sous lequel la session sera enregistrée, confirmez par OK.

  1. Cliquez sur « Connexion ».

  1. Le système vous demande d’introduire le mot de passe. Ensuite, cliquez sur « OK ».

  1. Atteignez le dossier (en local) contenant le fichier de sauvegarde à copier vers l’espace d’hébergement. Sélectionnez le fichier puis faites-le glisser de la gauche vers la droite.

  1. Faites de même avec les deux fichiers « kickstart » ci-après.

  1. La copie s’effectue et vous obtenez les trois fichiers voulus chez l’hébergeur.

Restaurer un site

Une fois les fichiers voulus envoyés chez l’hébergeur, nous pouvons lancer la restauration.

Procédure :

  1. Démarrez un navigateur, Firefox par exemple, puis encodez l’URL voulue dans la barre d’adresse (pas dans Google) puis appuyez sur Return.

ATTENTION : la première partie dépend du domaine (ou sous-domaine) qui correspond à votre site.

  1. La page suivante s’affiche. Après avoir pris connaissance du message, cliquez sur le lien « Cliquez ici … ».

  1. Si vous avez suivi ce tutoriel depuis le début, vous n’avez rien à modifier, cliquez simplement sur le bouton « Démarrer ».

  1. L’extraction se lance. Ne quittez surtout pas cette page, et laissez l’extraction se faire. Suivant la taille du site, cela peut prendre quelques minutes ou plus...

  1. Si tout se déroule correctement, vous arrivez sur cette page. Cliquez sur le bouton afin de lancer le programme d’installation.

  1. Si tout est au vert, cliquez sur « Next » (en français : « Suivant », désolé mais le système bascule en anglais). NB : l’essentiel est que tous les indicateurs à gauche soient au vert. À droite, il peut y avoir certains éléments à l’orange.

  1. Définissez les données voulues pour la restauration de la base de données puis cliquez sur « Next » (en français : « Suivant »).

  1. La fenêtre popup suivante s’ouvre pendant l’insertion des contenus dans la base de données.

  1. Une fois la restauration de la base terminée, cliquez sur le bouton « Next step » (en français : « Étape suivante »).

  1. Entrez un nom pour le site, ainsi qu’une adresse mail valide. Choisissez un identifiant, associez-lui un mot de passe. Cliquez sur le bouton « Next ».

  1. Fermez l’onglet dans lequel les informations suivantes apparaissent. Attention de ne pas fermer votre navigateur. L’objectif est d’accéder à l’onglet qui se cache derrière l’onglet actif.

  1. Cliquez sur « Nettoyage ».

  1. Les boutons suivants permettent d’accéder au frontal ou à l’administration du site.

  1. Faites plusieurs vérifications/tests (aussi bien en Frontend qu’en Backend) afin de vous assurer que tout fonctionne correctement.

À faire après la mise en ligne du site

Utiliser le service reCAPTCHA

Rappel en image de ce qu’est reCAPTCHA :

NB : reCAPTCHA peut se présenter sous d’autres formes et même être invisible.

Pour obtenir les valeurs à introduire dans « Clé de site » et « Clé secrète », il faut utiliser les services disponibles au niveau de : https://www.google.com/recaptcha puis utiliser le bouton « Get reCAPTCHA ». Dans le cas présent, c’est le type « reCAPTCHA (version 2) » qui a été sélectionné.

Ceci implique que vous devez posséder un compte Google afin de pouvoir générer les clés voulues via le site énoncé ci-dessus.

De plus, pour que cela fonctionne, il faut que le site ait été mis en ligne.

Une fois les clés obtenues, il faut les introduire dans notre site.

  1. Connectez-vous à l’administration du site qui est en ligne.

  2. Cliquez sur « Extensions / Plug-ins ».

  3. Recherchez les plugins « recaptcha ». Cliquez sur « Captcha – ReCaptcha ».

  1. Encodez les clés, activez le plugin puis enregistrez et fermez.

  1. Cliquez sur « Composants / RSForm! Pro » puis sur « Configuration ».

  1. Complétez les clés puis enregistrez et fermez.

Cette configuration sera utile pour le formulaire qui se trouve dans la page « Affiliation ».

Envoyer des messages électroniques à partir du site

L’envoi de messages électroniques à partir du site est souvent nécessaire. Notamment au niveau des formulaires afin que l’internaute reçoive une confirmation de soumission, que la personne responsable soit avertie d’une demande…

Pour accéder à la configuration du site pour l’envoi d’emails, ouvrez le menu « Système » puis sélectionnez l’option « Configuration ». Activez l’onglet « Serveur ».

La zone « Réglages e-mail » permet de définir la configuration voulue. Trois orientations sont possibles. Elles sont présentées ci-après.

Utilisation de l’option « PHP Mail »

Dans ce cas, c’est la fonction mail( ) de PHP qui est utilisée et le système va chercher certaines informations dans php.ini (auquel nous n’avons pas accès avec un hébergement mutualisé).

Utilisation de l’option « Sendmail »

Sendmail est un serveur de messagerie électronique dont le code source est ouvert. Si vous choisissez « Sendmail », il faudra préciser le chemin d’accès à « Sendmail », c’est à dire le répertoire du serveur dans lequel il est installé.

Utilisation de l’option « SMTP »

Dans le cas présent, nous faisons appel à un serveur SMTP (Simple Mail Transfer Protocol).

Si vous optez pour l’option « SMTP », l’idéal consiste à utiliser une adresse email d’expéditeur liée au nom de domaine du site et de faire appel au serveur SMTP de l’hébergeur.

Renforcer la sécurité avec Admin Tools

L’objectif est ici d’ajouter un niveau de sécurité au niveau de l’accès à l’administration. Concrètement, une fenêtre supplémentaire apparaîtra dans laquelle il faudra s’authentifier.

Si ce n’est déjà fait, installez l’extension « Admin Tools » (cf. point 4.2.2 à la page 31).

Ne faites ce qui suit que lorsque le site est hébergé sur un serveur utilisant Linux et non pas Windows. Ne faites donc pas cette opération lorsque le site est en local sur votre ordinateur tournant sous Windows par exemple.

Atteignez « Admin Tools » en cliquant sur « Composants » puis sur « Admin Tools ». Dans la fenêtre qui apparaît, cliquez sur « Protection d’accès à l’Administration ».

Définissez un identifiant et un mot de passe (différents des autres identifiants et mots de passe déjà définis précédemment). Ces données vous seront demandées avant de pouvoir atteindre la fenêtre de connexion à l’administration.

Si votre accès à l’administration du site devient impossible, supprimez les fichiers « .htaccess » et « .htpasswd » du répertoire « administrator » en utilisant votre client FTP (WinSCP…) ou le gestionnaire de fichiers de votre serveur. Vous pouvez également simplement modifier l’extension de ceux-ci en .txt

Utiliser Google Analytics

Il est intéressant d’obtenir des statistiques fiables concernant la fréquentation d’un site web.

Ceci permet de connaître le nombre de visites, la durée moyenne passée sur le site, d’adapter le contenu en fonction des critères de recherche des internautes, de modifier la présentation en fonction du type d’appareils utilisés…

Dans le cas présent, c’est Google Analytics qui sera utilisé. NB : il faut disposer d’un compte Google.

Ajouter le suivi d’un site dans Google Analytics

Pour ajouter le suivi d’un site dans Google Analytics :

  1. Si ce n’est déjà fait, installez le plugin « GoogliC Analytics » comme toute autre extension (cf. point 4.2.4 à la page 34). NB : d’autres plugins ou techniques existent.

  2. Rendez-vous à l’adresse suivante : https://www.google.com/analytics/ (sinon il suffit d’encoder Analytics comme critère de recherche dans Google).

  3. Cliquez sur « Se connecter » puis connectez-vous avec votre compte Google.

  4. Si ce n’est déjà fait, vous devrez probablement vous inscrire.

  5. Complétez le formulaire proposé.

  1. Cliquez sur « Obtenir un ID de suivi ».

  2. Vous devez accepter les conditions d’utilisation.

  1. Vous obtenez l’identifiant de suivi.

  1. Accédez à l’administration de votre site. Cliquez sur « Extensions / Plug-ins ». Cherchez le plugin « Système – GoogliC Analytics ». Cliquez sur ce plugin.

  1. Activez le plugin.

  1. Activez l’onglet « Paramètres GoogliC Analytics » et encodez l’identifiant de suivi obtenu précédemment.

  1. Enregistrez et fermez.

Consulter les statistiques obtenues avec Google Analytics

Pour consulter les statistiques de votre site web, il suffit de vous connecter à Google Analytics.

Une fois connecté, la page « Accueil » vous permet d’accéder aux statistiques de votre(vos) site(s).

Vous accédez à toute une série de données notamment via l’option « AUDIENCE ».

Les options présentes dans la colonne de gauche vous permettent d’accéder à différentes statistiques.

Gérer les redirections

Il faut éviter au maximum les erreurs 404 (pages introuvables) car c’est peu sympathique pour les visiteurs du site et cela vous pénalisera au niveau du classement dans les moteurs de recherche.

Ce type de problème peut se présenter si vous modifiez l’alias de certains éléments (menus, articles…) mais également si vous restructurez complètement un site ou si un ancien site est remplacé par un nouveau.

Exemple de page obtenue :

L’outil « Search Console » de Google peut nous aider

Nous supposons ici que vous avez défini votre site dans l’outil « Search Console » de Google (anciennement appelé « Google Webmaster Tools »).

Dans Search Console, cliquez sur « Exploration / Erreurs d’exploration ».

Vous obtenez le nombre d’erreurs de type 404 et la liste des URL qui ont posé problème.

Vous pouvez ainsi identifier les URL pour lesquelles il faut définir une redirection, pour lesquelles des fichiers ne sont plus disponibles en téléchargement alors qu’ils l’étaient précédemment…

NB: si vous activez le plugin « Système – Redirection » de Joomla, vous pourrez également obtenir ce type de données (en moins complet).

Utilisation du composant de redirection natif de Joomla

Pour utiliser le composant de redirection natif de Joomla :

  1. Activez le plugin « Système – Redirection » en passant par la gestion des plugins.

  2. Cliquez sur « Composants / Redirections ».

  1. Cliquez sur « Nouveau ».

  2. Définissez la redirection voulue puis enregistrez.

Dans le cas présent, nous supposons qu’il existait précédemment un lien du type : ..../galerie qui est devenu …./photos

Il est important de noter que lorsque le plugin « Système – Redirection » est activé, en utilisant « Composants / Redirections », vous obtiendrez la liste des URL qui ont généré une erreur 404. Vous pouvez ainsi partir de cette liste pour y remédier. Si cette collecte ne vous intéresse pas, vous pouvez désactiver l’option au niveau du plugin (propriété « Collecte d’URLs »).

Les redirections définies via ce composant de Joomla ne donnent pas lieu à une modification du fichier .htaccess à la racine du site mais à l’ajout d’un enregistrement dans la table *préfixe*_redirect_links

NB: si vous faites de nombreux essais en activant, désactivant… les redirections, n’oubliez pas vider le cache de votre navigateur afin que les dernières modifications soient prises en compte.

https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Emblem-important-green.svg/2000px-Emblem-important-green.svg.png

Il est possible de cocher plusieurs URL obsolètes et d’indiquer une URL cible.

https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Emblem-important-green.svg/2000px-Emblem-important-green.svg.png

Dans les paramètres du composant de redirection, il est possible d’activer le mode avancé.

Si le mode avancé est activé, une propriété « Code statut de redirection » est disponible afin de choisir le type de redirection 301 (redirection permanente), 302 (redirection temporaire)…

Définir une redirection dans le fichier .htaccess

Les redirections 301

Source : http://www.annuaire-info.com/redirection-301/

La redirection 301 permet d’indiquer qu’une nouvelle adresse a été définitivement allouée à la ressource demandée et toute référence future à cette ressource DEVRAIT utiliser la nouvelle adresse indiquée.

Les navigateurs modernes suivent automatiquement ces redirections 301. Ils affichent également la nouvelle adresse dans la barre d’adresse.

La norme recommande donc d’utiliser la redirection 301 quand le changement d’adresse d’une page est permanent.

Redirection 301 et moteurs de recherche

Selon la norme, les moteurs de recherche devraient remplacer automatiquement l’URL qui fait une redirection 301 par l’adresse destinataire de la redirection et ils devraient sauvegarder cette dernière comme adresse officielle du contenu concerné.

Quand une page a changé d’adresse de manière permanente, Google recommande d’ailleurs d’utiliser une redirection 301. Bizarrement, le numéro 1 des moteurs de recherche a parfois besoin de plusieurs semaines, voire de plusieurs mois, pour prendre en compte cette information dans les résultats de recherche.

Quand utiliser une redirection 301 ?

La redirection 301 est la meilleure technique de redirection quand une page a changé d’adresse et que vous souhaitez que les moteurs de recherche remplacent l’ancienne adresse par la nouvelle dans leur index. La nouvelle adresse bénéficiera de la réputation existante de l’ancienne. Le contenu de la nouvelle page peut être différent, mais le thème de la page devrait être identique.

Redirection 301 avec un fichier .htaccess

Si votre serveur permet l’utilisation d’un fichier .htaccess, plusieurs techniques sont disponibles pour définir une redirection 301:

Ces techniques peuvent être utilisées pour éviter le « duplicate content », comme dans les cas présentés ici:

Redirect permanent / http://nouvelle-adresse.be/

Toutes les pages sont alors redirigées. Si par exemple, vous demandez d’atteindre la page: ancien-site.be/fr/photos la redirection se fera vers: nouvelle-adresse.be/fr/photos

Redirect permanent /dossier1 /dossier2/

Si par exemple, vous demandez d’atteindre la page: votre-site.be/dossier1/photos la redirection se fera vers: votre-site.be/dossier2/photos

Redirect permanent /fr/photos /fr/engins-spatiaux

Si l’internaute clique sur le menu « Photos », il sera dirigé vers l’article lié au menu « Engins spatiaux ».

Redirect gone /chemin/fichier-supprime.html

RedirectMatch (.*)\.gif$ http://www.anotherserver.com$1.jpg

RedirectMatch est équivalente à la directive Redirect mais permet l’utilisation d’expressions régulières, au lieu d’une simple correspondance de préfixe…

Pour plus d’informations concernant la syntaxe à utiliser dans les expressions régulières: http://www.apachefrance.com/Manuels/Apache\_1.3\_VF/mod/mod\_alias.html

Les redirections temporaires (type 302)

Les redirections temporaires peuvent être utiles si par exemple vous travaillez sur une partie d’un site et que vous souhaitez rediriger le trafic pour que les visiteurs n’arrivent pas dans la partie en travaux. Il convient alors de ne pas mettre en place une redirection permanente sinon une visite d’un moteur de recherche provoquerait des changements dans la base de données de celui-ci qui ne tiendrait plus compte des pages qui sont en travaux et qui redeviendront disponibles plus tard.

Redirect temp /fr/photos https://pixabay.com/fr/photos/l’espace/

Définir une redirection 301 par un script php

On a vu que les expressions régulières dans le .htaccess permettait d’adapter la redirection à des besoins spécifiques. On peut aller encore plus loin en exécutant la redirection à l’intérieur d’un programme exécuté sur le serveur (PHP, Perl, ASP ou autre).

Exemple en PHP:

<?php

header(“Status: 301 Moved Permanently”, false, 301);

header(“Location: http://www.domaine.com/nouveau-dossier/nouveau-fichier.html”);

exit();

?>

Définir une redirection HTML

Source : http://www.annuaire-info.com/redirection-html/

La redirection HTML peut être installée sur n’importe quel site web, quel que soit l’hébergement. Elle permet d’introduire un délai avant que la redirection soit exécutée. La redirection HTML est parfois appelée redirection « META refresh ».

Votre navigateur affichera donc la page telle quelle pendant le temps spécifié, puis redirigera automatiquement le visiteur vers la page indiquée par la redirection.

Redirection HTML et moteurs de recherche

Concernant le traitement des redirections HTML par Google, il faut distinguer deux cas:

Quand utiliser une redirection HTML ?

Utilisez la redirection HTML quand vous souhaitez afficher une page, puis après un délai de plusieurs secondes, passer automatiquement à l’affichage d’une autre page. Dans les autres cas, donnez la préférence aux redirections 301 et 302.

Code pour une redirection HTML

<html>

<head>

<meta http-equiv="refresh" content="secondes;URL=adresse-de-redirection">

</head>

<body>

</body>

</html>

On recommande généralement d’ajouter un lien standard pour les quelques utilisateurs qui ont désactivé la redirection automatique dans leur navigateur.

Exemples de redirection HTML :

<meta http-equiv="refresh" content="5;URL=/nouvelle-page.html">

La page contenant ce code sera affichée pendant 5 secondes. Ensuite, elle sera remplacée par « /nouvelle-page.html ».

<meta http-equiv="refresh" content="12;URL=http://www.annuaire-info.com/"&gt;

La page contenant ce code sera affichée pendant 12 secondes, puis elle sera remplacée par la page d’accueil du site « annuaire-info.com ».

<meta http-equiv="refresh" content="0;URL=/une-autre-page.html">

La page contenant ce code apparaîtra mais, elle sera immédiatement remplacée par « /une-autre-page.html ». La plupart des utilisateurs ne remarqueront même pas la présence de la page faisant la redirection.

Tester une redirection

Voici un site permettant de tester une redirection et de déterminer s’il s’agit d’une redirection 301, 302… : http://www.annuaire-info.com/outil-referencement/test-redirection/

Gérer la page d’erreur 404

Voici un exemple de page proposée lors d’une erreur 404 (page non trouvée).

Assurez-vous que les internautes ne se retrouvent jamais devant une page d’erreur 404 page non trouvée, dénuée de sens. La page d’erreur par défaut de Joomla est particulièrement laide mais aussi complètement différente de l’aspect du reste de votre site, les internautes pourraient même penser que votre site n’est plus fonctionnel et le quitter.

Si cela arrive souvent cela peut avoir un impact négatif sur votre positionnement dans les moteurs de recherche (SEO Ranking).

Le mieux est de créer une page 404 personnalisée pour votre template. Si votre page d’erreur est suffisamment sensée pour les internautes, ils vont simplement suivre vos indications, que vous proposiez un lien vers une page de recherche ou vers votre page d’accueil.

Éviter les erreurs 404

La première chose à faire est d’éviter que les internautes rencontrent la page d’erreur 404. Évitez de renommer vos articles ou vos éléments de menu (à moins que vous ne gardiez les mêmes alias), car les internautes pourraient rencontrer cette page d’erreur lorsqu’ils sont redirigés via Google. Assurez-vous aussi de ne pas avoir de liens internes à votre site qui pointeraient vers des pages non-existantes. C’est mauvais pour votre SEO. Si vous devez impérativement changer vos Urls, assurez-vous d’utiliser une redirection 301 pour pointer l’ancienne URL vers la nouvelle.

La mise en place de redirections est abordée dans le point précédent.

D’autre part, suivez les erreurs 404 en utilisant le composant « Redirections » (ou utilisez une extension similaire). Vous pouvez aussi utiliser un service non Joomla qui vérifiera votre site et détectera les erreurs 404. Pour ce faire, vous pouvez utiliser des outils tel que « Screaming Frog SEO Spider Tool » ou des outils gratuits tels que « www.brokenlinkcheck.com ».

Soyez conscient que toutes les erreurs 404 ne sont pas si mauvaises. Si vous avez un article ou un produit d’une vente en ligne qui est obsolète, retirer ce genre de page conduira vers une page d’erreur 404. Mais dans ce cas, l’erreur 404 peut être utilisée par Google & Bing pour désindexer ces items de leur index. Google a précisé que dans ce cas, cela n’affectera pas votre SEO.

Créer une page d’erreur 404 personnalisée pour Joomla

En utilisant le framework et le templatre Helix

Procédure pour personnaliser la page d’erreur :

  1. À partir de l’administration du site, cliquez sur « Extensions / Templates ».

  2. Cliquez sur « shaper_helix3 » (dans la colonne de gauche).

  1. Dans l’onglet « Principal », descendez dans la page jusqu’à la rubrique « PAGE D’ERREUR ». Définissez les propriétés voulues puis enregistrez.

En utilisant les fonctions natives de Joomla

La création d’une page 404 personnalisée est facile.

  1. Dans un premier temps, créez un article qui sera affiché en cas d’erreur 404. Nommez cet article comme vous le souhaitez. Encodez le texte, effectuez la mise en forme, créez un lien vers votre page d’accueil ou une page de recherche. Un formulaire peut être inséré dans cette page…

  2. Enregistrez et fermez cet article. Notez l’ID de votre article (la dernière colonne si vous êtes dans la vue de gestion des articles).

  3. Affectez la valeur « No index, no follow » à la propriété « Robots » de cet article (onglet « Publication »).

  4. Créez un fichier « error.php » avec l’éditeur de votre choix et insérez le code suivant :

<?php

defined('_JEXEC’) or die;

if (($this->error->getCode()) == '404') {

header(“HTTP/1.0 404 Not Found”);

echo file_get_contents(JURI::root().'index.php?option=com_content&view=article&id=16');

exit;}

?>

identifiant de votre article devant être affiché en cas d’erreur 404

  1. Copiez le fichier « error.php » dans le dossier relatif à votre template.

Tester et optimiser la vitesse de votre site

Pour tout ce qui suit, il faut être prudent et toujours avoir une copie de sauvegarde de son site et un accès FTP aux fichiers. Certaines manipulations peuvent conduire à un « plantage » complet du site.

Outils pour tester la vitesse d’un site

Voici quelques outils permettant de tester la vitesse d’un site Internet.

Optimiser la vitesse d’un site

Utiliser les fonctions proposées par Helix
  1. À partir de l’administration du site, cliquez sur « Extensions / Templates ».

  2. Cliquez sur « shaper_helix3 » (dans la colonne de gauche).

  1. Dans l’onglet « Avancé », activez la compression CSS et Javascript.

  1. Enregistrez et fermez.
Les caches en natif

Quelques notions

Source : http://magazine.joomla.org/international-stories-all/articles-in-french-all/le-cache-de-joomla

  1. Réglages du cache

Joomla! propose nativement d’améliorer la vitesse de chargement de votre site grâce à l’activation du cache. Pour cela, on se connecte au panneau d’administration. Ensuite, cliquez sur « Système / Configuration ». Dans l’onglet « Système », vous avez un volet « Paramètres du cache » avec trois options :

Si nous observons les réglages possibles du cache dans un module (onglet « Paramètres avancés »), nous constatons qu’il n’y a que deux options à notre disposition :

  1. Gestion du cache

Revenons dans la configuration globale et précisément dans le volet « Paramètres du cache » où vous avez une deuxième option appelée « Gestion du cache ». Pour utiliser une option autre que « Fichier », vous devez avoir installé une extension appropriée.

  1. Durée du cache

La dernière option concerne la durée de mise en cache. Plus votre site est dynamique, plus cette valeur doit être basse. Si vous laissez le réglage par défaut sur 15 minutes, les changements sur votre page apparaîtront toutes les 15 minutes. Par contre, si votre site est mis à jour plus souvent, vous pouvez réduire cette durée. Si votre site est rarement mis à jour, une durée plus longue est tout à fait envisageable ici.

  1. Cache de page

Pour activer ce paramètre, allez dans « Extensions » puis « Plug-ins » et activez le plugin « Système – Cache de page ».

Schématiquement, ce plugin « photographie » la totalité des pages en incluant les composants, les modules, les plugins et le template. C’est le plus rapide mais c’est aussi l’approche la moins flexible de toutes les options de mise en cache puisque cela couvre la totalité de la page, sans distinction.

  1. Cache du navigateur

L’activation de cette option se fait au même endroit : plugin « Système – Cache de page ».

Cliquez sur le plugin et définissez la valeur « Oui » pour la propriété « Cache du navigateur ».

Avec le cache du navigateur, à chaque fois qu’une personne visite une de vos pages (ou une image), son navigateur en fait une copie. Si l’internaute demande à revoir cette page ultérieurement (avant un certain laps de temps, tout de même), plutôt que de solliciter Internet, le navigateur affichera la version enregistrée localement. Cela rendra votre site Joomla beaucoup plus rapide.

La compression GZIP

Si vous activez le système interne de compression disponible dans Joomla, la page téléchargée par les internautes sera compressée avant d’être transférée au navigateur. Elle se chargera beaucoup plus rapidement et donc s’affichera également beaucoup plus vite.

Pour activer cette compression, utilisez « Système / Configuration / onglet ‘Serveur’ ».

Outils proposés par les hébergeurs

Certains hébergeurs proposent des outils permettant d’augmenter la vitesse de vote site : SuperCacher, Varnish Cache…

La propriété « Robots »

Si vous souhaitez que votre site soit indexé par les moteurs de recherche, n’oubliez pas de définir de manière adéquate la propriété « Robots ».

  1. À partir de l’administration de votre site, cliquez sur « Système / Configuration ».

  2. Au sein de l’onglet « Site », sélectionnez « Index, Follow » au niveau de la propriété « Robots ».

  1. Enregistrez et fermez.

Et ce n’est pas (jamais) fini !

Une fois le site en ligne, il faut :

Sauvegarde et sécurité

de votre site web

Source de ce point 1 consacré à la sécurité: http://cinnk.com/joomla/3/le-livre-pour-tous/s%C3%A9curit%C3%A9

Merci à Simon Grange pour ses publications.

Une fois que votre site Joomla est en ligne, vous n’avez pas fini votre travail.

Déjà, il est presque certain que vous allez vouloir ajouter de nouveaux contenus, modifier du contenu existant et peut être aussi ajouter de nouvelles fonctionnalités à votre site.

Mais ce n’est pas le sujet de ce chapitre, une tâche qui va vous demander également un peu d’investissement concerne la sécurité de votre site. Le but de ce chapitre est de vous donner les moyens de remettre rapidement votre site sur pied si vous rencontrez un problème survenu après le piratage de votre site, une mauvaise manipulation (de votre part ou de celle d’un autre administrateur du site), d’un problème rencontré par votre hébergeur... mais surtout d’éviter ces problèmes.

Voici les quelques règles que vous devrez constamment respecter.

Sauvegarde, sauvegarde, sauvegarde

La règle numéro 1 est sans aucun doute les sauvegardes. Même si vous vous faites hacker, si vous faites des sauvegardes régulières de votre site, vous pourrez, dans la grande majorité des cas, restaurer votre site.

Ces sauvegardes ne doivent surtout pas être stockées sur le serveur sur lequel est votre site, vous devez les transférer, et les tester. Une sauvegarde non testée ne doit pas être considérée comme une sauvegarde.

D’une manière générale, vous devez sauvegarder régulièrement votre site. Vous devez le sauvegarder avant et après avoir installé, désinstallé ou mis à jour une extension ou avant et après avoir fait la mise à jour de Joomla lui-même. Vous devez faire une sauvegarde après avoir créé du contenu. Vous devez faire une sauvegarde avant et après avoir apporté des modifications et surtout, vous devez faire une sauvegarde avant de faire toute intervention dont vous n’êtes pas certain du résultat.

Si vous plantez votre site ou si un piratage survient, il y a des chances pour que la meilleure des solutions soit de restaurer une sauvegarde. Si cette sauvegarde est ancienne de 3 mois, vous perdrez 3 mois de travail.

Pour sauvegarder un site Joomla, il faut faire une sauvegarde des fichiers ET de la base de données. Pour voir comment sauvegarder votre site, reportez-vous au point 8.2 figurant à la page 209.

Effectuer les mises à jour

La règle numéro 2 consiste à toujours faire les mises à jour de Joomla et des extensions installées sur le site. Avec Joomla 3, les mises à jour se font en quelques clics. Pour les extensions tierces, certaines se font également en quelques clics, et pour les autres, vous devez simplement télécharger un patch à installer comme n’importe quelle extension ou à envoyer par FTP. Cela ne prend que quelques minutes.

A chaque mise à jour, les développeurs rendent publiques les changements qu’apporte le patch, il est donc important de faire rapidement ces mises à jour. En effet, si le développeur d’une extension indique que telle mise à jour corrige tel problème de sécurité, tout le monde est mis au courant de la faille qui existait.

Avant de faire une mise à jour, pensez à faire une sauvegarde.

Mots de passe

La règle numéro 3 consiste à choisir des mots de passe solides. Evitez tous les mots simples, votre nom, votre prénom, votre date de naissance...

Pour construire un mot de passe solide, choisissez par exemple une phrase, sélectionnez toutes les premières lettres (ou les deuxièmes, ou les troisièmes) et faites-en un mot. Mettez une lettre sur deux de ce mot en majuscule, et ajoutez des numéros. Cette phrase sera simple à retenir, et le mot de passe difficile à casser. Des caractères spéciaux peuvent également être ajoutés.

De même, il est fortement déconseillé de choisir “admin” comme nom d’utilisateur lorsque vous êtes le super utilisateur du site.

Si vous utilisez FileZilla, ne stockez pas vos mots de passe (ils sont stockés non-cryptés). Ce point sera à nouveau abordé plus loin dans les présentes notes.

N’installez que les extensions utiles

Ne faites pas l’erreur d’installer des extensions en grand nombre. Vous ne devez installer sur votre site que les extensions utiles à son fonctionnement. Beaucoup de débutants installent des extensions qu’ils trouvent sympas, ou tout simplement pour les tester. Avant d’installer une extension sur votre site, assurez-vous qu’elle sera utile, qu’elle répond à vos besoins, et installez-la sur un site de tests au préalable afin de l’essayer. Si vous avez sur votre site des extensions inutiles, désinstallez-les.

Chaque extension demande de la maintenance, et chaque extension non à jour est une porte d’entrée pour les hackers.

Cette liste doit être considérée avec prudence, en effet, certaines extensions dangereuses peuvent ne pas y figurer et il peut arriver qu’une extension qui a été mise à jour, afin de corriger une faille, y figure encore.

Ne pas utiliser les sites « warez »

Les sites warez sont des sites sur lesquels on trouve des contenus piratés (extensions, logiciels, musique, vidéos…) mis à disposition sans paiement des droits aux auteurs de ces contenus.

Le terme « warez » vient d’une déformation du mot anglais « wares » qui signifie « marchandises ».

Sans parler du fait qu’en téléchargeant des extensions provenant de sites warez, on vole le travail d’un développeur; en les installant sur un site, on risque d’installer également du code malicieux intégré par les personnes proposant ces extensions. Par la suite, ces codes servent de portes pour les pirates.

Pour rappel, les Templates (modèles) sont également considérés comme étant des extensions.

Choisissez un bon hébergeur

De nombreux utilisateurs souhaitent à tout prix héberger leur site chez un hébergeur gratuit. Alors nous allons le dire une fois pour toute : il n’est pas possible de faire fonctionner correctement Joomla 3 sur ces “hébergeurs”.

Et si par chance vous parvenez à installer Joomla sur un de ces hébergeurs, non-seulement vous rencontrerez des bugs, mais vous rencontrerez certainement aussi des problèmes de sécurité.

Mais pour effectuer des tests durant 90 jours, vous avez : https://demo.joomla.org

Seul petit bémol, c’est en anglais.

Droits sur les dossiers et fichiers

Vous avez parfois besoin de modifier les fichiers et dossiers de votre site Joomla. Avant de toucher à ces droits, soyez certain de ce que vous faites et/ou demandez conseil à votre hébergeur.

Pour une question simple de sécurité, ces droits ne doivent JAMAIS être en 777 (sauf sur recommandation spéciale de votre hébergeur). Généralement, ils doivent être en 705/755 pour les dossiers et 604/644 pour les fichiers.

Droits d'accès - CHMOD

Le premier chiffre correspond à vos droits. Le second à votre groupe. Le troisième à tous les utilisateurs.

Quelques exemples:

Droits de votre utilisateur: Lecture et écriture (6)

Droits de votre groupe: Lecture seule (4)

Droits de tous les utilisateurs: Lecture seule (4)

Valeur octale: CHMOD 644 (droits par défaut d’un fichier)

Droits de votre utilisateur: Tous les droits (7)

Droits de votre groupe: Lecture et exécution (5)

Droits de tous les utilisateurs: Lecture et exécution (5)

Valeur octale: CHMOD 755 (droits par défaut d’un répertoire)

Droits de votre utilisateur: Tous les droits (7)

Droits de votre groupe: Tous les droits (7)

Droits de tous les utilisateurs: Tous les droits (7)

Valeur octale: CHMOD 777 (fortement déconseillé pour des raisons de sécurité !)

Droits de votre utilisateur: Lecture et écriture (6)

Droits de votre groupe: Lecture et écriture (6)

Droits de tous les utilisateurs: Aucun droit (0)

Valeur octale: CHMOD 660

Extensions tierces

Vous trouverez plusieurs extensions vous permettant d’améliorer la sécurité de votre site. Voici quelques exemples.

aeSecure

L’extension aeSecure vous permet de sécuriser votre site Joomla à différents niveaux. L’extension intercepte tous les accès à votre site internet avant même que l’URL n’atteigne vos pages php. De cette manière, Joomla ne verra même pas une URL dangereuse, car elle sera bloquée préalablement par aeSecure.

aeSecure vous permet également de “cacher” votre page de connexion à l’administration, de vérifier les droits de vos fichiers et dossiers, de “cacher” votre version de Joomla, etc.

aeSecure est très simple à mettre en place, et surtout très simple à administrer car toutes les fonctionnalités sont accessibles à partir d’un seul écran. Chaque fonctionnalité peut être activée/désactivée simplement en cliquant sur un bouton.

Vous retrouverez plus de détails sur aeSecure plus loin dans ce cours.

AdminTools

L’extension Admintools est un composant Joomla, vous proposant différentes fonctionnalités, comme “cacher” la page de connexion de votre administration, modifier le préfixe des tables de votre base de données, apporter des sécurités supplémentaires en modifiant votre fichier htaccess.

Il a déjà été question de cette extension.

Autres extensions

Sur le JDE/JED (journal des extensions : http://extensions.joomla.org ou en français (beaucoup moins d’extensions proposées) : http://extensions.joomla.fr), vous trouverez d’autres extensions liées à la sécurité.

Vous pouvez également trouver d’autres applications intéressantes, par exemple Crawlprotect, une extension externe à Joomla qui bloque les attaques envers votre site.

Même si vous respectez à la lettre toutes ces règles, vous devez garder en tête que le risque 0 n’existe pas. Il y a toujours une chance, aussi infime qu’elle soit que vous vous fassiez hacker. Dans ce cas, vous aurez fait la majorité du travail si vous avez respecté la règle n°1.

Source de ce point consacré à la sécurité: http://cinnk.com/joomla/3/le-livre-pour-tous/s%C3%A9curit%C3%A9

Merci à Simon Grange pour ses publications.

Conclusion

Sauvegardez votre site !

Personne ne le répètera jamais assez : les sauvegardes sont très importantes.

En cas de problème, de mauvaise manipulation, de piratage, de problème chez l’hébergeur… à partir du moment où vous avez une sauvegarde complète de votre site, plus de 80% du travail nécessaire à le remettre en ligne est fait. Faites des sauvegardes.

Sauvegardez votre site régulièrement

Il est important de sauvegarder votre site de façon régulière (la fréquence dépend de l’activité sur le plan des mises à jour…), afin de perdre le moins de travail possible si un problème arrive.

Sauvegardez votre site avant chaque mise à jour (de Joomla ou d’une extension) et avant chaque nouvelle installation d’une extension.

Testez vos sauvegardes

Comme déjà dit, une sauvegarde non-testée ne doit pas être considérée comme une sauvegarde. Donc transférez vos sauvegardes en local et/ou sur un site de test et testez-les afin de vous assurer qu’elles sont complètes et utilisables.

Ne laissez pas vos sauvegardes sur le même serveur que celui de votre site, les éventuels hackeurs y auraient accès. Dès que votre sauvegarde est effectuée, transférez-la, testez-la et rangez-la en lieu sûr.

Source et compléments : http://cinnk.com/joomla/3/le-livre-pour-tous/sauvegarder-restaurer-d%C3%A9placer-un-site#sthash.kHfpfCPq.dpuf Merci à Simon Grange

[1] Le terme GNU/GPL désigne le type de licence d’utilisation le plus en vigueur dans le monde du logiciel libre (opensource). Cette licence permet notamment d’utiliser un logiciel librement, de le modifier, de le redistribuer et de mettre en circulation des versions du logiciel améliorées, en conservant à celui-ci le même type de licence d’utilisation.

[2] SEO : Search Engine Optimization