[PDF] Fonctionnalités de base du CMS Joomla 2.5 | Cours informatique

Enseignement Informatique Classe de BTS DATR 1

---M58: Animation, communication & négociation professionnelles. Objectif 2.3: Concevoir & mettre en œuvre

des pages ou un site WEB

---Fonctionnalités de base du CMS Joomla! en version 2.5.

Présenté par BELMOKHE Hocine, enseignant Informatique, LPA Erstein, Année 2012/2013 Version 1.0, Janvier 2013

Table des Matières

1. Introduction

2. Mise à jour

3. Définition composant

4. Définition module

5. Extensions

6. Installation extensions

7. Organier son contenu

8. Ajout/Suppression d'articles

9. Ajout/Suppression de menus

10. Template

Introduction

1/1

✔ Nous allons voir dans ce cours comment utiliser le CMS Joomla! au travers de ces fonctionnalités de base:

✔ Mise à jour de Joomla!; ✔ Gestion des extensions;

✔ Création/Suppression d'un article; ✔ Création/Suppression d'un menu; ✔ Sélection d'un template.

✔ Ce cours (en version 1.0) est très court car seule la pratique vous aidera. De plus, vous trouverez une multitude de sites proposant des exemples et autres explications sous forme d'articles mais aussi sous forme de vidéos.

✔ Remarques: N'oubliez pas de sauvegarder vos travaux sur votre compte en créant un dossier en date du jour et en y insérant vos exemples en les nommant clairement afin d'être retrouvés facilement. Et sauvegardez régulièrement vos travaux!!!!!

✔ N'oubliez pas les raccourcis clavier ci-dessous qui vous seront très utiles à chaque TP/TD:

✔ Ctrl s: Sauvegarder les modifications

✔ Ctrl z: Annuler les dernières modifications ✔ Ctrl y: Restaurer ce qui a été annulé

Mise à jour

1/6

✔ L'interface d'administration vous signale si le noyau Joomla! ou certaines extensions ne sont pas à jour:

Mise à jour

2/6

✔ Concernant la mise à jour du CMS, après avoir cliqué sur , il suffit de cliquer sur le bouton „Install the update“ :

Mise à jour

3/6

✔ Le message vous indique que la mise à jour a été effectué avec succès. Cliquez sur „Site“ puis „Control Panel“ afin mettre à jour les extensions .

Mise à jour

4/6

✔ Concernant la mise à jour des extensions, après avoir cliqué sur , sélectionnez l'ensemble des élements à mettre à jour via les cases à cocher situées à gauche puis cliquez sur le bouton „Update“ en haut à droite :

Mise à jour

5/6

✔ L'élement indique les mises à jours ont été réalisé avec succès, ne tenez pas compte des autres messages:

Mise à jour

6/6

Définition Composant

1/1

✔ Définition Générale: C'est une mini application intégrée à votre site Joomla!, disposant le plus souvent de sa propre interface de configuration dans la console d'administration Joomla!, et qui apporte de nouvelles fonctionnalités parfois trés utiles.

✔ Exemples de Composants inclus dans Joomla! lors de son installation:

✔ Banners (Bannières): Ce composant vous permet d'afficher les bannières de vos clients;

✔ Search (Recherches): Ce composant vous permet de faire des recherches dans un site via des mots-clés.

✔ Exemples de Composants non-inclus dans Joomla! lors de son installation:

✔ Kunena: Ce composant vous permet d'intégrer un forum au sein de votre site; ✔ DocMan: Ce composant vous permet d'installer un gestionnaire de fichiers.

Définition Module

1/1

✔ Définition Générale: C'est un bloc que l'on trouvera généralement dans la colonne de gauche ou de droite de notre site. Certains modules sont pré-installés, d'autres peuvent être installés ultérieurement grâce à l'espace d'administration. Ce petit ajout (add-on) permet d'apporter une fonctionnalité supplémentaire à Joomla!. Contrairement à un composant, ils sont essentiellement utilisés pour l'affichage de données, par exemple l'affichage des derniers articles parus, les plus populaires, les personnes actuellement connectées, voir même l’heure.

✔ Exemples de Modules inclus dans Joomla! lors de son installation:

✔ Breadcrumbs (fil d'ariane): Ce module est une aide à la navigation sous forme de signalisation d'une page dans un site web;

✔ Custom HTML (HTML personnalisé): Ce module permet d'afficher des élements personnalisés via le langage HTML.

✔ Exemples de modules non-inclus dans Joomla! lors de son installation:

✔ BgMax (Image de fond): Le but de ce module est de faciliter la mise en place d'une image de fond dans un site;

✔ GTranslate: GTranslate est un module de traduction utilisant les services de Google Traduction. 58 langues sont disponibles.

Extensions

1/1

✔ En résumé: Un composant ajoute une ou plusieurs fonctionnalités principales (forum, formulaires, galerie d'image, agenda, réservation, annuaire...) à Joomla! nécessitant le stockage d'information dans une base de donnée. Un module est juste un dispositif

d'affichage de données internes à Joomla! (et au site) ou externes (flux RSS par ex.) à la fois pour la partie publique comme la partie privée.

✔ Composants et modules sont appelés, dans la terminologie Joomla!, extensions.

Internet foisonne de sites proposants des modules, composants, templates, etc. gratuits ou payants. Faites vos propres recherches en fonction de vos besoins, sinon vous

pouvez trouver des centaines d'extensions pour Joomla! en français (composants, modules, plugins, templates et outils de développement) à l'adresse suivante:

Installation Extensions

1/1

Manager“:

✔ Après avoir, en amont, téléchargé l'extension souhaitée (au format zip), il suffit de cliquer sur „Choisissez un fichier“, chercher le zip sur votre ordinateur puis cliquez sur „Upload & Install“.

Organiser son contenu

1/2

„Content“ puis „Category Manager“.

✔ Les Catégories permettent d’organiser les articles du site, de les catégoriser de manière plus claire.

✔ Classer les articles du site permet de les afficher sur des pages réunissant par exemple plusieurs articles d’une catégorie. En publiant et dépubliant tout le contenu d’une

catégorie, on peut également faire apparaître ou disparaître du site tout ce qu’elle contient.

✔ La catégorie correspond au premier niveau de rubriquage. Il est possible de créer de sous catégories dépendant d'une catégorie „parente“.

✔ Exemples d'illustration de rubriquage catégories et sous catégories: ✔ Catégorie 1: sport;

✔ Sous catégorie: football, rugby, tennis, cyclisme, etc. ✔ Catégorie 2: culture;

Organiser son contenu

2/2

✔ La création d'une catégorie se fait via le bouton „New“ dans la gestion des catégories. Se référer à ce qui est dit pour la gestion des articles, les options sont quasi similaires.

✔ La création d'une sous catégorie est identique à la création d'une catégorie à la différence où il faut lui affecter une catégorie parente via la rubrique „Parent“.

A/S Articles

1/4

✔ Définition: Les articles constituent l’essentiel du contenu d’un site Joomla. C'est dans ces éléments que vous insérerez les textes et autres images que verront vos utilisateurs.

Pour accéder aux gestionnaires d'articles, rendez-vous dans le menu „Content“ puis „Article Manager“:

✔ Selon les réglages du site, la page d'accueil de la gestion des articles n'affiche seulement qu'un certain nombre d’entre eux. Vous avez bien sûr la possibilité de naviguer entre les pages d’articles à l’aide des menus prévus à cet effet en bas des pages, qui permet

également d’afficher un plus grand nombre d’articles par page (5, 10, 15, 20, 100, tous, etc.):

A/S Articles

2/4

✔ Certaines options de filtrage en haut de page vous permettront d’affiner votre recherche, et de retrouver un article en le triant ou le filtrant:

✔ Par son titre en cherchant dans le filtre situé en haut à droite;

✔ Par section, par catégorie, par auteur, ou par état (publié, dépublié, archivé).

Ces options de tri sont extrêmement pratiques pour retrouver un article en quelques

secondes. N'oubliez pas que Joomla garde en mémoire vos paramètres de tri pendant la même session, et qu'il pourra avoir conservé vos choix de tris ou de filtrage. Prenez bien soin de tout remettre par défaut en cliquant sur „Clear“ pour être certain d’afficher

A/S Articles

3/4

✔ La page Gestion des articles propose plusieurs fonctionnalités accessibles depuis la rangée de boutons située en haut à droite de la page:

✔ Il est possible d’éditer un article soit en cliquant directement sur le titre de l’article, ou en cliquant sur la petite coche située à sa gauche, puis en cliquant sur le bouton „Edit“ en haut à droite:

✔ L’intérêt des coches situées à côté des titres d’articles est également de pouvoir effectuer certaines actions sur plusieurs éléments à la fois, en sélectionnant plusieurs d’entre eux. En cliquant sur le bouton choisi (à l’exception „d’Edit“, de „New“ et de „Options“), il sera ainsi possible d’effectuer l’action sur tous les éléments sélectionnés au lieu de devoir le faire article par article. Il est également possible d’effectuer certaines actions en cliquant directement sur les icônes affichées dans la liste des articles:

A/S Articles

4/4

✔ Publier et dépublier un article en cliquant sur la petite icône dans la colonne „Status“; ✔ Mettre un article sur la page d’accueil ou l’en enlever en cliquant sur la petite icône

dans la colonne „Featured“.

✔ „Publish“ et „Unpublish“ servent à publier un article, c’est-à dire le rendre visible sur le site en frontal aux utilisateurs, ou le dépublier, c'est-à-dire à ne le rendre visible que dans l’interface d’administration, aux gestionnaires et administrateurs du site.

✔ Pour effacer un ou plusieurs article(s), il suffit de le ou les sélectionner, puis de cliquer sur le bouton „Trash“.

✔ „Edit“ et „New“ permettent d’éditer un article (ce qui revient à cliquer directement sur son titre) ou d’en créer un nouveau.

A/S Menus

1/4

✔ Un menu est une suite de liens, sur lesquels les utilisateurs peuvent cliquer pour naviguer sur le site, et qui les emmènent sur différentes pages: un article, une liste d’articles, une mise en page d’articles au format « blog », et, dans le cas où les composants nécessaires ont été installés, la liste des événements de l’agenda, l’annuaire, le forum, etc.

✔ Chacun de ces liens porte un nom, qui les identifie sur le site et qui permet aux

utilisateurs de savoir sur quelle partie du site ils vont se rendre en cliquant sur ce lien (ex: un lien nommé Forum qui amènera sur le forum). Chacun de ces liens est d’un type différent, selon la page vers laquelle il mène: on appellera ces liens des éléments de menu.

A/S Menus

2/4

✔ Pour accéder aux Menus, utilisez le bouton portant ce nom sur la page d’accueil de l’administration, ou le menu „Menus“ / „Menu Manager“ :

✔ La gestion des menus vous donne accès à une vision globale des menus, sans le détail de tous les liens (ou éléments de menu) qui les composent:

A/S Menus

3/4

✔ On ne va pas s'attarder sur la création d'un menu à proprement parler (plusieurs existent par défaut qu'il vous suffira de modifier) mais plutôt sur la création, la suppression ainsi que la modification d'un élément d'un menu.

✔ Un élément de menu est un simple lien présent dans un menu, et qui notamment peut pointer vers:

✔ Un article en particulier;

✔ Une page d'articles d'une section ou d'une catégorie disposés les uns sous les autres (dans Joomla on appelle ça le "format blog");

✔ Une liste des articles d’une catégorie; ✔ Une liste des catégories d’une section;

✔ La page d’accueil, qui est également une liste d'articles disposés au format blog; ✔ Un des composants du site: page de formulaire, élément de l’annuaire, événement

dans l’agenda, carte GoogleMap, etc.; ✔ Un lien externe (vers un autre site); ✔ Etc.

A/S Menus

4/4

✔ Pour créer un élément de menu, sélectionnez le menu dans la liste déroulante du menu „Menus“ puis cliquez sur le bouton „New“ pour y ajouter un nouvel élément de menu. S’offrent à vous une série de choix concernant le type d’élément de menu que vous souhaitez créer en cliquant sur le bouton „Select“:

Template

1/6

✔ Définition: Le template rassemble tous les éléments qui constituent l'apparence d'un site. Il se constitue la plupart du temps:

✔ D'une page dynamique index.php qui structure la page en colonnes, en lignes, etc grâce au langage HTML, et va intégrer le contenu de la base de données à cette structure au moyen du code PHP;

✔ D'une ou plusieurs feuilles de style (fichiers CSS) qui définissent la mise en forme du contenu: couleurs et polices de caractères, fonds, aspect des cadres, des tableaux, des menus, etc.

✔ De fichiers images appelés pour illustrer ou fabriquer la page: images de fond de page, de fond de tableau, logo, bandeaux, etc.

✔ Généralement, et même s'il n'y a pas de règles définies puisque chacun construit son site comme il l'entend, une page est constituée d'une zone supérieure, appelée header (ou en-tête), d'une partie centrale entourée de deux colonnes, à droite et à gauche, et d'une zone inférieure, appelée le pied de page.

Template

2/6

✔ C'est, globalement, la configuration basique d'une page web, même si là encore les chartes graphiques plus évoluées peuvent donner lieu à des structures plus complexes.

Template

3/6

✔ Chaque template possède plusieurs positions, des "emplacements" prédéfinis sur la

page, dans lesquels il sera possible de placer des modules. Ces positions sont intégrées directement au code HTML, dans les différentes zones de la page. Il peut par exemple y avoir plusieurs positions dans la zone d'en-tête : une position „header“ pour afficher un logo, une position „search“ pour afficher le moteur de recherche, une position „top“ pour y placer un module supplémentaire, etc.

Template

4/6

✔ Les positions sont définies par avance: il n'est pas possible d'en ajouter ou d'en supprimer sans retoucher au code HTML du template.

✔ Pour afficher les positions de votre template, ajoutez ?tp=1 après l'adresse de votre site. Par exemple: http://ersteininfo.binhoster.com/?tp=1

Template

5/6

✔ Les positions sont propres au template. Elles varient donc d'un template à l'autre, certains templates assez simples proposant une dizaine de positions, tandis que des créations commerciales plus avancées en embarquent parfois jusqu'à une trentaine. ✔ Cependant, par convention, on trouve souvent les positions suivantes sur un template:

✔ Une position „banner“ pour y placer la bannière;

✔ Une position „top“ (parfois „header“) pour la partie supérieure; ✔ Une position „search“ pour le module du moteur de recherche; ✔ Une position „nav“ ou menu destinée à accueillir le menu principal;

✔ Une position „breadcrumb“ (ou „breadcrumbs“) destinée à accueillir le fil d'ariane; ✔ Une position „left“, qui correspond à la colonne de gauche;

✔ Une position „right“, qui correspond à la colonne de droite;

✔ Des positions „user“ („user1“, „user2“, „user3“, etc), donnant une souplesse d'utilisation supplémentaires au template avec des positions "libres";

✔ Une position „footer“ pour le pied de page.

✔ Généralement, Joomla est installé avec plusieurs templates. Bien sûr, il est tout à fait possible de télécharger et d'installer de nouveaux templates, et donc de changer l'aspect visuel de son site en quelques clics sans toucher aux contenus.

Template

6/6

✔ Afin de sélectionner un nouveau template, il suffit de cliquer dans la colonne „Default“ afin que le template correspondant soit sélectionné. Il ne vous reste plus qu'à réactualiser le site. À noter qu'il existe un template pour le frontend (site) ainsi que pour le backend du site (administrator).

Conclusion

1/1

✔ Nous avons vu dans cette partie comment interagir avec les différents éléments de base de Joomla! 2.5. Ce cours est très succinct car seule la pratique vous permettra de vous sentir à l'aise avec ce CMS. Pour celles et ceux qui souhaitent aller plus loin, vous

pouvez lire le lien ci-dessous qui résume très bien cette version de Joomla! (PDF téléchargable à l'adresse http://cocoate.com/sites/cocoate.com/files/pdf/j25fr.pdf):

http://cocoate.com/fr/2012/03/joomla-25-le-guide-pour-debutant

✔ Pour vous entraîner, vous allez modifier la page d'accueil de votre site afin de reproduire la page d'accueil du site exempleinfo.binhoster.com.