Formation Joomla 3 Votre formateur : André Debaisieux 1
Sommaire Présentation d'un site réalisé avec Joomla...4 Lexique...5 Les menus...5 Les extensions...5 Les composants...5 Les modules...6 Le template...6 Les catégories...6 Les articles...6 Préparation de votre site...7 Votre ou vos menu(s) horizontal...7 Votre ou vos menu verticaux...8 Vos pages uniques...10 Vos pages de type blog...11 Choisir un nom de domaine...12 Ou acheter votre nom de domaine?...13 Hébergement...14 Informations légales...14 Gestion des images...15 Structures et Termes...16 Administrer son site...16 Installer un Template...20 Connaitre les positions disponibles de son template...21 Présentation des principales options...24 Installation de JCE...26 Installation de Akeeba backup...26 Configuration du site...27 Gestion du contenu...29 Gestion des médias...29 Gestion des catégories...29 Gestion des articles...31 2
Insérer une image dans un article...32 Mettre en page votre image...32 Gestion des menus...33 Gestion des liens de menus...33 Ajoutez des modules à votre site...34 Ajoutez des extensions...37 Avoir plusieurs templates dans un même site...38 Mettre son site à niveau...38 Gestion des sauvegardes...40 Gestion des utilisateurs...41 La gestion des tags...41 A PROPOS DE L'AUTEUR...43 Remerciement & sources...43 3
Présentation d'un site réalisé avec 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. Et un CMS, c'est quoi? Pour faire simple, un CMS est un logiciel web qui vous permettra de créer un site internet dynamique en toute simplicité. Joomla est un CMS Open Source distribué sous licence GNU/GPL (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. ( source joomla.fr) 4
Lexique Les menus Les menus dans Joomla, accueillent des liens qui vous permettent d'accéder à des pages, blog ou extensions. Les extensions Les extensions sont des programmes que l'on peut rajouter à votre site, certains sont présents par défaut dans votre site. Une extension peut regrouper des composants, des modules, des plugins voir un template. Comme exemple d'extensions on peut citer : une galerie photo, un formulaire de contact, une boutique en ligne. Les composants Bannières - permet de gérer l'affichage de bannières (publicitaires ou non) sur le site. Fiches de contact - permet de créer des formulaires de contact à partir desquels les visiteurs pourront entrer en contact avec vous. Fils d'actualité - permet de publier sur votre site des informations venant d'autres sites. Liens web - permet de publier des listes de liens web (avec description) vers vos sites partenaires ou amis. Messagerie privée - permet aux administrateurs du site de pouvoir communiquer entre eux. Mise à jour de Joomla! - permet de gérer les mises à jour du CMS. Recherche - permet aux utilisateurs du site de faire des recherches à travers le contenu de celui-ci. Recherche avancée - est un nouveau composant de recherche destiné à remplacer le composant de recherche. Redirection - référence les liens morts de votre site web et permet de les corriger en dirigeant vers de nouvelles adresses. Tags - permet d'afficher des contenus en provenance de différentes extensions. Message Post Installation permet de consulter les messages importants obtenus après les installations (d'extensions tierces) ou les mises à jour. 5
Les modules Les modules sont des extensions utilisées pour le rendu des pages. Ces modules peuvent également être comparés à des boites disposées autour d'un composant. Les menus, la fonctionnalité de recherche ou la connexion au site sont par exemple affichés par des modules. Il est possible d'afficher de nombreuses choses avec un module. Il est également possible de publier son propre code HTML grâce au module Contenu personnalisé. Les modules se placent sur les différentes positions du template, peuvent être affichés sur certaines pages et pas d'autres (grâce notamment à l'assignement de menu ou aux langues) et peuvent être affichés à certains utilisateurs mais pas à d'autres (grâce au niveaux d'accès). Le template Un template est un gabarit graphique indépendant du contenu de votre site. Gestion des templates : C'est ici que vous pourrez travailler sur vos templates, les modifier, les assigner à certains éléments de menu, les dupliquer... Plus d'information dans le chapitre sur les Templates. Les catégories Une catégorie est un classeur dans lequel vous allez regrouper des articles. Cela permet entre autre de réaliser un blog, mais surtout de pouvoir gérer finement l'arborescence de votre site. Les articles Les articles sont des pages représentant votre site. Ces pages peuvent contenir du texte, des images, des vidéos, des modules etc.. Préparation de votre site Pour préparer le projet de votre site, écrivez les liens de menus que vous désirez voir apparaitre dans votre site. cf exemple ci-dessous Votre ou vos menu(s) horizontal Saisissez le votre Faites de même avec les menus verticaux, si vous en éprouvez le besoin. 6
Votre ou vos menu verticaux Saisissez le votre Titre : ************ ( exemple Menu services) Titre : ************ ( exemple Menu produits) 7
8
Vos pages uniques Saisissez la liste de vos pages uniques, par exemple: mentions légales, qui sommes nous... Saisissez la liste de vos articles 9
Vos pages de type blog Un blog est une suite d'articles présentée dans une page. Un site Internet sans blog à ce jour a peu a de chance d'être référencé dans Google. Je vous invite à en créer au moins un. Par exemple : actualités d'entrepreprise, astuces de pro.. 10
Saisissez le ou les blogs à insérer Théme Nom Choisir un nom de domaine Choisir un nom de domaine pour votre site n'est pas anodin, il va accompagner la vie de votre site, pensez qu'il sera inscrit sur vos carte de visite. Prenez un nom simple, court et facile à retenir. Bien choisir son nom de domaine et son hébergement Un site web, ça a un nom de domaine (comme une plaque d'immatriculation) et un hébergement (sa maison). Quel nom choisir pour vous identifier? Le choix de votre nom de domaine demande une attention toute particulière. C est en effet grâce à lui qu on vous reconnaîtra sur la Toile. Et, s il est très facile de le réserver et de le mettre en ligne, il est vraiment compliqué de changer de nom, le jour où l on n en veut plus, car il est bien ancré dans les esprits et référencé. www.formation-cms.fr ou www.flash-comet.com 11
Ou acheter votre nom de domaine? Il existe pléthore de sites en ligne où vous pouvez réserver un nom de domaine le prix est d'environ de 10 par an. Voici une liste non exhaustive : Gandi, Amen, Ovh, 1&1, Nfrance... Dans cet exemple le formulaire correspond à OVH Saisissez votre nom de domaine : Hébergement Le choix d'un hébergement peut varier en fonction de vos besoins Pré requis : Sur un ordinateur : avoir installé un serveur comme EasyPHP ou Wamp Sur un serveur distant acceptant les bases de données Mysql et le langage PHP (préférez les hébergements pro) Site personnel Site d'association Site d'entreprise E-commerce Grosse entreprise Hébergement mutualisé prix à partir de 25 par an Hébergement mutualisé prix à partir de 25 par an Hébergement semi dédié environ 100 par an Hébergement semi dédié environ 100 par an Hébergemnet dédié à partir de 250 par an Informations légales On a parfois tendance à croire qu on peut placer tout et n importe quoi sur le Web. Et on ne sait pas toujours qu il y a des informations légales qui doivent impérativement figurer sur un site internet. 12
Vous placerez dans un article mentions légales, classé dans la catégorie utilitaires, et auquel vous donnerez accès facilement à l internaute, que ce soit via le menu principal ou en pied sur chacune de vos pages. 1 Sa dénomination ou sa raison sociale et son siège social. 2 Son numéro de téléphone. 3 S il s agit d une entreprise assujettie aux formalités d inscription au registre du commerce et des sociétés ou au répertoire des métiers, le numéro de son inscription, son capital social, l adresse de son siège social (numéro Siret, numéro de TVA...). 4 Le nom du directeur ou du codirecteur de la publication ou celui du responsable de la rédaction. 5 Le nom, la dénomination ou la raison sociale, ainsi que l adresse et le numéro de téléphone du prestataire hébergeant le site internet. Par ailleurs, tout site internet collectant des données doit faire une déclaration à l organisme qui, dans son pays, est chargé de la protection de la vie privée en matière d informatique (CNIL en France).» Saisissez vos mentions légales Nom du responsable : ************* Nom de l'entreprise : ************** Adresse************************* Siret**************************** Code Ape************************ Crédits photos ******************* Mail :*************************** Tel**************************** Jpg Png gif Tif AI SVG EPS BMP Oui Standard Oui si vous voulez gérer des fonds transparents Oui si ce n est pas une photo Non Non Non Non Non Trop lourd Gestion des images Vous allez très probablement insérer des images dans votre site, pour la bonne marche de votre projet il faut respecter quelques règles. Retaillez vos images afin quelles ne dépassent pas une largeur de 800 pixels. Renommez-les avec des noms de mots clés afin de vous donner plus de chance à votre futur référencement. Evitez les majuscules. Evitez les espaces entre les mots. Evitez les caractères spéciaux. 13
Séparez les mots par des tirets. Nom d'image à respecter Mon-image.jpg pas bon Format d image recommandé pour pas Joomla mon image.jpg bon Image-métier.jpg pas bon dsc0001.jpg pas bon mon-image.jpg : correct A préparer Les images pour les articles Les images pour les galeries photos Des images pour vos bandeaux Structures et Termes FRONTEND Par frontend nous entendons les zones du site Web que les visiteurs ou les utilisateurs enregistrés peuvent voir. Un utilisateur enregistré n'accède, normalement, qu'au frontend. C'est comme dans un magasin, où les marchandises sont exposées dans les vitrines et sur les étagères. C'est là que vous pouvez regarder ce qui y est présenté. BACKEND C'est votre espace d'administration ; donc nous l appellerons simplement administration. Vouspouvez donner aux utilisateurs enregistrés le droit de travailler dans votre backend. Ce privilège est généralement limité à quelques employés, qui sont chargés d'administrer certaines tâches sur le site. Vous pouvez accéder à la page de connexion de votre administration via /administrator. Administrer son site www.monnomdedomaine.com/administrator 14
Voir son site Cliquez sur le nom de votre site en haut à droite (dans notre exemple: Rugby) Cela donne : 15
16
Choisir son template Pour commencer une méthode simple, je vous invite à choisir un template à l'adresse suivante, une fois choisi et téléchargé, nous allons l'installer. http://billionthemes.com/themes/index? perpage=23&sorter=popularity&search.key=&search.cms=1&search.themler=false&search.artisteer=true &Search.ShowFree=False&Search.ShowPaid=False&Search.CategoryID= 17
Installer un Template Nous allons ensemble installer votre template, pas d'inquiétude, vous pourrez soit changer de template soit le modifier. Pour cela, cliquez sur extension, puis gestion des extensions. Cliquez sur le bouton "Choisissez un fichier", sélectionnez votre template au format "Zip" puis installez-le. Définir son site par défaut Votre template une fois installé, doit être déclaré par défaut pour que votre CMS le reconnaisse. Sachez qu'il est possible avoir plusieurs templates dans un même site, nous allons le voir un peu plus bas dans ce cours. 18
Connaitre les positions disponibles de son template Pour connaitre les positions de votre site ajoutez?tp=1derrière l'url de votre site par exemple : http://www.flash-comet.com/?tp=1 Astuce : Si les positions n'apparaissent pas activez les dans les paramètres de la gestion des templates. Pour cela, allez dans gestion des templates, puis cliquez sur le bouton "Paramètres" dans l'option : Prévisualisez la position des modules 19 cliquez sur "Activé"
Présentation de la partie "administration" 20
Présentation des principales options Gestion des articles Cette icône vous permet d accéder à la bibliothèque des articles, classés par catégories, de paramétrer leur ordre et leur publication. Gestion des catégories Cette icône vous permet d accéder à la fenêtre de gestion des catégories pour créer, modifier et supprimer vos catégories d articles. Gestion des médias Cette icône vous donne un accès rapide au dossier «images» de votre site dans lequel vous serez amené à classer tous vos médias. Gestion des menus Cette icône vous permet d accéder à la page de gestion des menus où vous pouvez les créer, les modifier et les supprimer. Gestion des utilisateurs Cette icône vous donne accès au panneau de gestion des utilisateurs du site. Vous pouvez y définir les droits d accès de chacun et y stocker des informations personnelles (mot de passe ). Gestion des modules Cette icône vous donne accès au panneau de gestion des modules. C est ici que vous manipulerez les différents éléments mobiles du site aux diverses positions de la feuille Joomla. Gestion des extensions Les extensions peuvent être différenciées en plusieurs familles Extensions Composants Modules Plugin En cliquant sur l icône de gestion des extensions, vous pourrez rapidement accéder au panneau de téléchargement des nouveaux composants, aux modules ou aux feuilles de style que vous souhaitez installer sur votre système. Gestion des langues Vous permet d accéder au panneau de gestion des langues installées sur votre site. Par défaut, vous avez installer votre site en français, mais la version anglaise est bien présente. Attention, il ne s agit pas, ici, d un outil de traduction. 21
Configuration Cette icône vous permet d accéder directement au panneau de configuration de votre système Joomla. C est ici que vous pouvez, par exemple, définir les mots-clés assignés à la page d accueil du site. Gestion des templates L icône de gestion des templates vous donne accès à la zone de gestion de vos feuilles de styles. Vous pouvez y gérer les feuilles déjà présentes, les assigner à certaines pages du site et en ajouter de nouvelles. Modifier mon profil Grâce à cette icône, vous accéderez en un clin d œil aux préférences de votre compte personnel : mise à jour de votre mot de passe, de votre courriel Joomla mettre à jour Voilà un outil très pratique qui nous arrive avec cette nouvelle version de Joomla. En cliquant sur l icône de mise à jour de Joomla, votre système installera lui-même la dernière version stable du système. C est le point d exclamation rouge qui vous informe si, oui ou non, il est nécessaire d effectuer l action. Pensez à effectuer une sauvegarde de votre base de données avant de mettre à jour le système. Extensions à jour Selon le même principe, vous êtes invité à cliquer sur l icône de mise à jour des extensions afin d en obtenir la dernière version. 22
Installation de JCE JCE est un puissant éditeur "WYSIWYG" pour page Web qui vous permet de manipuler du contenu HTML d une façon intuitive, sans avoir à connaître des langages de programmation. Installation de Akeeba backup Akkeba est un outil de sauvegarde en ligne de votre site 23
Configuration du site Cliquez sur "Configuration générale", pour accéder aux paramètres suivants : le nom du site, le message à afficher quand le site est en travaux, les méta données du site (description du site, les mots clés), les règles pour gérer les utilisateurs : vous pouvez créer/supprimer des utilisateurs, gérer les utilisateurs qui se sont enregistrés sur le site, les affecter à des groupes particuliers, les règles retenues pour la gestion des médias : format supporté, taille maximale d'un fichier... la gestion du cache, le mode de bug, la gestion des sessions administrateur, le choix du fuseau horaire, des paramètres techniques sur le serveur, le transfert FTP, la base de données, les réglages pour l'envoi de mails, utilisé notamment par la rubrique contactez-nous. Gestion du contenu Nous allons procéder dans cet ordre pour réaliser votre site Gestion des médias Le Gestionnaire de médias de Joomla! vous permet de classer tous les médias que vous souhaitez intégrer sur votre site, et de les insérer dans les contenus. 24
Organisez les répertoires dans lesquelles vous allez organiser vos photos Gestion des catégories Les catégories sont des classeurs dans lequel vous allez organiser vos articles. Avoir des liens de menus associés a des catégories pour permet de présenter des blogs et d'activer le "flux RSS" de votre site. 25
Gestion des articles Les articles sont des pages qui seront visibles dans votre site Créez d'abord vos articles (cliquez sur "gestion des articles" puis "nouveau") Le titre : le titre apparait par défaut dans vos pages L'alias : mot-clé exploité pour le référencement La catégorie : permet de classer vos articles, de présenter un blog et de déclencher un flux RSS Le statut : publié ou non publié Accès et droits : permet de gérer les droits En vedette : présente votre article dans la page d'accueil Langue : par défaut Français ID : numéro unique de votre article Texte de l'article : saisissez votre contenu L'éditeur : barre d'outils pour votre mise en page 26
Insérer une image dans un article 1. Préparez au préalable la t aille de votre image à insérer dans votre article. Si l image est trop volumineuse, le chargement de votre page sera longue, l internaute risque de quitter votre site et Google ne sélectionnera pas votre site comme un site de qualité. 2. Nommez votre image sans espace, caractère spécial, donnez lui des mots clés. 3. Cliquez dans l éditeur de votre article, à l endroit ou vous désirez 4. Cliquez sur bouton «image» (en bas de l éditeur) 5. Sélectionnez le répertoire dans lequel vous voulez uploader votre image, puis cliquez sur le bouton «sélectionner le fichier» 6. Vous êtes sur votre ordinateur, sélectionnez votre image puis cliquez sur le bouton «Démarrer l envoie» 7. Votre image est maintenant dans les médias de votre site, il vous faut enfin la sélectionner et cliquer sur «insérer» Mettre en page votre image 1. Sectionnez votre image dans l éditeur JCE 2. Cliquez sur l icone «Image» Le paramètre «Alignement» vous permet de positionner l image comme bon vous semble comme le démontre l exemple ci-dessous. 27
Gestion des menus Attribuez vos menus à des modules et donnez leur une position Gestion des liens de menus 28
Ajoutez des modules à votre site Dans la Gestion des modules vous pouvez ajouter et modifier des modules Joomla!. Les modules sont utilisés pour afficher du contenu et/ou des médias autour du contenu principal. Exemple de module Module de type personnalisé dans lequel, j'ai mis des images et des liens Module de type personnalisé dans lequel, j'ai mis le code googlemap Module de type personnalisé dans lequel, j'ai mis du texte et une photo 29
Module de type menu Module de type recherche Module de type fil d'ariane Module de type personnalisé dans lequel, j'ai mis un bouton Paypal Pour créer un module, allez dans "Gestion des modules" cliquez sur "Nouveau" Les paramètres sont différents en fonction du type de module en revanche, ce qu'ils ont tous en commun, c'est la position dans lequel vous allez le placer dans votre site 30
Pour connaitre les positions disponibles pour insérer des modules dans votre template, tapez: je veux dite?tp=1 Voila le résultat: 31
Ajoutez des extensions Accès Sélectionnez Extensions Gestion des extensions dans le menu principal de l'administration ou cliquez sur le lien Gestion Extensions du Panneau d'administration. Ensuite cliquez sur le lien "Installation" du menu en haut à gauche. Description Les extensions sont des compléments qui étendent les fonctionnalités de Joomla!. Joomla! inclut par défaut toutes les extensions nécessaires à la création d'un site simple, mais des milliers d'extensions complémentaires de tous types sont disponibles pour Joomla!, et leur développement se poursuit. Joomla! Extensions Directory icon external est le plus impoprtant site regroupant Des extensions Joomla!. Il existe cinq types d'extensions : composants, modules, plug-ins, templates et langues. Un composant est une mini-aplication qui est chargée d'afficher le corps principal de la page. Exemples de composants : Contacts, Contenu, Fils d'actualité, etc. Un module est une extension plus petite habituellement utilisée pour afficher des petits éléments qui s'affichent sur plusieurs pages. Exemples de modules : Menu, Articles en relation, etc. Un plug-in est un élément de code qui s'exécute quand un événement prédéfini de Joomla! survient. Exemples de plug-ins : les éditeurs sont exécutés quand une session d'édition est ouverte. Un template contrôle la façon dont le contenu d'un site web est affiché, y compris les emplacements et la disposition des éléments, les couleurs, les polices, etc. Les templates permettent que l'apparence d'un site web soit séparée de son contenu. Les langues permettent que le front-end et le back-end de Joomla! soient présenté dans n'importe quelle langue pour laquelle une extension de langue existe. De cette façon, Joomla! peut être publié dans une nouvelle langue sans aucun changement au noyau de Joomla!. 32
Avoir plusieurs templates dans un même site Il est possible dans Joomla d'avoir plusieurs template dans un même site, pour cela installez votre deuxième template puis cliquez dessus, puis cliquez sur Enfin sélectionnez les liens ou vous voulez faire apparaitre votre deuxième template. Mettre son site à niveau Le contrôle des version est automatique comme Joomla Gestion des extensions : Mises à jour Accès Sélectionnez Extensions Gestion des extensions dans le menu principal de l'administration ou cliquez sur le lien Gestion Extensions du Panneau d'administration. Ensuite cliquez sur le lien "Mises à jour" du menu en haut à gauche. Description Cet écran vous permet de mettre à jour les extensions installées. La fonctionnalité de mise à jour des extensions a été introduite dans Joomla! v1.6. Vous ne pourrez mettre à jour que les extensions qui supportent cette fonctionnalité. Pour les extensions qui supportent cette fonctionnalité, vous pourrez réaliser in mise à jour sur place sans avoir à télécharger et installer l'extension comme vous le faisiez avec les versions précédentes de Joomla!. La fonctionnalité de mise à jour utilise les mécanismes standards de 33
connexion HTTP pour télécharger les fichiers de mise à jour de l'extension du serveur distant de mise à jour. Cet écran vous permet de mettre à jour rapidement Joomla! sans avoir à télécharger de paquet du site web Joomla!. Gestion des sauvegardes 34
Gestion des utilisateurs Accès Pour accéder à cet écran vous pouvez : Cliquer sur l'icône rapide Gestion Utilisateurs du Panneau d'administration ou, sélectionner Utilisateurs Gestion des utilisateurs dans le menu déroulant de l'administration de Joomla!. Description Dans cet écran vous avez la possibilité de voir la liste de vos utilisateurs et de les trier de différentes façons. Vous pouvez aussi modifier et créer des utilisateurs, des groupes et des niveaux d'accès. La gestion des tags La version 3.1 de Joomla! à apporté un nouveau composant offrant une fonctionnalité de taille : Le système de Tags. Ce système va par exemple vous permettre d'assigner vos articles à plusieurs Tags, puis d'afficher ces articles (venant de catégories différentes) sur la même page : celle du Tag. Mais pas seulement, il va vous permettre d'afficher par Tags n'importe quel type de contenu. Vous pourrez ainsi afficher sur la même page : des articles, des liens web (du composant Liens web), des Fiches contact (du composant Fiche de contact), des Fils d'actualité (du composant Fils d'actualité), ou tout autre contenu venant d'une extension tierce et intégrant ce système de Tag. Cela reviendra à la possibilité de classer vos articles dans plusieurs catégories (cette fonctionnalité est très demandée par les utilisateurs Joomla!). Les Tags peuvent également s'imbriquer à l'infini (de la même manière que les catégories). Comment fonctionne le système de Tags? Sur une installation neuve de Joomla! (ne contenant pas d'extensions tierces), vous pouvez tagger les éléments suivants : Articles Catégories d'articles Fiches de contact 35
Catégories de Fiches de contact Fils d'actualité Catégories de Fil d'actualité Liens Web Catégories de Liens web Vous allez donc créer vos Tags dans le composant du même nom, puis vous irez ensuite Tagger vos éléments (catégories, articles, fiches de contact...). 36
A PROPOS DE L'AUTEUR André Debaisieux a une expérience de 15 ans dans les métiers du web. Son aventure professionnelle: il est passé par un certain nombre de SSII. Il a assuré des missions d'intégrateur, programmeur, chef de projet, analyste, et maintenant son préféré: formateur indépendant. Indépendant depuis 2008, il dispense les formations qu'il met au point et assure des conférences sur les nouvelles technologies. Spécialisé dans le Web la E-communication, les nouvelles technologies et l'impression 3D. Expert CMS Joomla, il maitrise toutefois Spip, Worpress, Prestashop, Google, les réseaux sociaux et enfin le monde des Smartphones et ses applications. Il a reçu plusieurs prix: "une mention dans la catégorie Talent de l'innovation technique et technologique", un Net d'or en 2001 pour le site "patrouille de France" et un Net d'or en 2000 pour le site "Cyber bébé" Son site : http://www.flash-comet.com Sa page Facebook : https://www.facebook.com/flashcomet Remerciement & sources Merci à tout les stagiaires, élèves et centres de formations qui ont contribués à la réalisation de ce support. Sources: Wikipedia, le journal du net, flash-comet.com, joomla.fr André Debaisieux 2015 andre@debaisieux.com 37