Enseignement Informatique Classe de BTS DATR 1

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
11. Conclusion
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
bouton „Install the update“
:
, il suffit de cliquer sur le
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
✔
Les élements
et
indique que les mises à jours ont été réalisé avec succès:
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:
http://extensions.joomla.fr/
Installation Extensions 1/1
✔
✔
Pour installer une extension, rendez-vous dans le menu „Extensions“/“Extension
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
✔
✔
✔
Les Catégories sont accessibles soit depuis la page d'accueil de l'administration, via
„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;
✔ Sous catégorie: cinéma, peinture, musique, etc.
✔
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
l’intégralité des articles et non pas uniquement ceux de votre précédente recherche.
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
✔
✔
✔
Vous pouvez ainsi:
✔ 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.