Enseignement Informatique

Classe de BTS DATR 1

-----------------------------------------------------------------------

M58: Animation, communication & ngociation professionnelles.Objectif 2.3: Concevoir & mettre en uvre

des pages ou un site WEB-----------------------------------------------------------------------

Fonctionnalits de base du CMS Joomla! en version 2.5.

Prsent par BELMOKHE Hocine, enseignant Informatique, LPA Erstein, Anne 2012/2013 Version 1.0, Janvier 2013

Table des Matires1. Introduction

2. Mise jour

3. Dfinition composant

4. Dfinition 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 fonctionnalits de base:

Mise jour de Joomla!; Gestion des extensions; Cration/Suppression d'un article; Cration/Suppression d'un menu; Slection d'un template.

Ce cours (en version 1.0) est trs 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 vidos.

Remarques: N'oubliez pas de sauvegarder vos travaux sur votre compte en crant un dossier en date du jour et en y insrant vos exemples en les nommant clairement afin d'tre retrouvs facilement. Et sauvegardez rgulirement vos travaux!!!!!

N'oubliez pas les raccourcis clavier ci-dessous qui vous seront trs utiles chaque TP/TD:

Ctrl s: Sauvegarder les modifications Ctrl z: Annuler les dernires 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, aprs 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 succs. Cliquez sur Site puis Control Panel afin mettre jour les extensions .

Mise jour 4/6 Concernant la mise jour des extensions, aprs avoir cliqu sur , slectionnez l'ensemble des lements mettre jour via les cases cocher situes gauche puis cliquez sur le bouton Update en haut droite :

Mise jour 5/6 L'lement indique les mises jours ont t ralis avec succs, ne tenez pas compte des autres messages:

Mise jour 6/6 Les lements et indique que les mises jours ont t ralis avec succs:

Dfinition Composant 1/1 Dfinition Gnrale: C'est une mini application intgre votre site Joomla!, disposant le plus souvent de sa propre interface de configuration dans la console d'administration Joomla!, et qui apporte de nouvelles fonctionnalits parfois trs utiles.

Exemples de Composants inclus dans Joomla! lors de son installation: Banners (Bannires): Ce composant vous permet d'afficher les bannires de vos

clients; Search (Recherches): Ce composant vous permet de faire des recherches dans un

site via des mots-cls.

Exemples de Composants non-inclus dans Joomla! lors de son installation: Kunena: Ce composant vous permet d'intgrer un forum au sein de votre site; DocMan: Ce composant vous permet d'installer un gestionnaire de fichiers.

Dfinition Module 1/1 Dfinition Gnrale: C'est un bloc que l'on trouvera gnralement dans la colonne de gauche ou de droite de notre site. Certains modules sont pr-installs, d'autres peuvent tre installs ultrieurement grce l'espace d'administration. Ce petit ajout (add-on) permet d'apporter une fonctionnalit supplmentaire Joomla!. Contrairement un composant, ils sont essentiellement utiliss pour l'affichage de donnes, par exemple l'affichage des derniers articles parus, les plus populaires, les personnes actuellement connectes, voir mme lheure.

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

personnaliss 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 rsum: Un composant ajoute une ou plusieurs fonctionnalits principales (forum, formulaires, galerie d'image, agenda, rservation, annuaire...) Joomla! ncessitant le stockage d'information dans une base de donne. Un module est juste un dispositif d'affichage de donnes internes Joomla! (et au site) ou externes (flux RSS par ex.) la fois pour la partie publique comme la partie prive.

Composants et modules sont appels, 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 franais (composants, modules, plugins, templates et outils de dveloppement) l'adresse suivante:

http://extensions.joomla.fr/

Installation Extensions 1/1 Pour installer une extension, rendez-vous dans le menu Extensions/Extension Manager:

Aprs avoir, en amont, tlcharg l'extension souhaite (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 Catgories sont accessibles soit depuis la page d'accueil de l'administration, via Content puis Category Manager.

Les Catgories permettent dorganiser les articles du site, de les catgoriser de manire plus claire.

Classer les articles du site permet de les afficher sur des pages runissant par exemple plusieurs articles dune catgorie. En publiant et dpubliant tout le contenu dune catgorie, on peut galement faire apparatre ou disparatre du site tout ce quelle contient.

La catgorie correspond au premier niveau de rubriquage. Il est possible de crer de sous catgories dpendant d'une catgorie parente.

Exemples d'illustration de rubriquage catgories et sous catgories: Catgorie 1: sport;

Sous catgorie: football, rugby, tennis, cyclisme, etc. Catgorie 2: culture;

Sous catgorie: cinma, peinture, musique, etc.

Organiser son contenu 2/2 La cration d'une catgorie se fait via le bouton New dans la gestion des catgories. Se rfrer ce qui est dit pour la gestion des articles, les options sont quasi similaires.

La cration d'une sous catgorie est identique la cration d'une catgorie la diffrence o il faut lui affecter une catgorie parente via la rubrique Parent.

A/S Articles 1/4 Dfinition: Les articles constituent lessentiel du contenu dun site Joomla. C'est dans ces lments que vous insrerez les textes et autres images que verront vos utilisateurs. Pour accder aux gestionnaires d'articles, rendez-vous dans le menu Content puis Article Manager:

Selon les rglages du site, la page d'accueil de la gestion des articles n'affiche seulement qu'un certain nombre dentre eux. Vous avez bien sr la possibilit de naviguer entre les pages darticles laide des menus prvus cet effet en bas des pages, qui permet galement dafficher un plus grand nombre darticles par page (5, 10, 15, 20, 100, tous, etc.):

A/S Articles 2/4 Certaines options de filtrage en haut de page vous permettront daffiner 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 catgorie, par auteur, ou par tat (publi, dpubli, archiv).

Ces options de tri sont extrmement pratiques pour retrouver un article en quelques secondes. N'oubliez pas que Joomla garde en mmoire vos paramtres de tri pendant la mme session, et qu'il pourra avoir conserv vos choix de tris ou de filtrage. Prenez bien soin de tout remettre par dfaut en cliquant sur Clear pour tre certain dafficher lintgralit des articles et non pas uniquement ceux de votre prcdente recherche.

A/S Articles 3/4 La page Gestion des articles propose plusieurs fonctionnalits accessibles depuis la range de boutons situe en haut droite de la page:

Il est possible dditer un article soit en cliquant directement sur le titre de larticle, ou en cliquant sur la petite coche situe sa gauche, puis en cliquant sur le bouton Edit en haut droite:

Lintrt des coches situes ct des titres darticles est galement de pouvoir effectuer certaines actions sur plusieurs lments la fois, en slectionnant plusieurs dentre eux. En cliquant sur le bouton choisi ( lexception dEdit, de New et de Options), il sera ainsi possible deffectuer laction sur tous les lments slectionns au lieu de devoir le faire article par article. Il est galement possible deffectuer certaines actions en cliquant directement sur les icnes affiches dans la liste des articles:

A/S Articles 4/4 Vous pouvez ainsi:

Publier et dpublier un article en cliquant sur la petite icne dans la colonne Status; Mettre un article sur la page daccueil ou len enlever en cliquant sur la petite icne

dans la colonne Featured.

Publish et Unpublish servent publier un article, cest- dire le rendre visible sur le site en frontal aux utilisateurs, ou le dpublier, c'est--dire ne le rendre visible que dans linterface dadministration, aux gestionnaires et administrateurs du site.

Pour effacer un ou plusieurs article(s), il suffit de le ou les slectionner, puis de cliquer sur le bouton Trash.

Edit et New permettent dditer un article (ce qui revient cliquer directement sur son titre) ou den crer 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 emmnent sur diffrentes pages: un article, une liste darticles, une mise en page darticles au format blog , et, dans le cas o les composants ncessaires ont t installs, la liste des vnements de lagenda, lannuaire, 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 amnera sur le forum). Chacun de ces liens est dun type diffrent, selon la page vers laquelle il mne: on appellera ces liens des lments de menu.

A/S Menus 2/4 Pour accder aux Menus, utilisez le bouton portant ce nom sur la page daccueil de ladministration, ou le menu Menus / Menu Manager :

La gestion des menus vous donne accs une vision globale des menus, sans le dtail de tous les liens (ou lments de menu) qui les composent:

A/S Menus 3/4 On ne va pas s'attarder sur la cration d'un menu proprement parler (plusieurs existent par dfaut qu'il vous suffira de modifier) mais plutt sur la cration, la suppression ainsi que la modification d'un lment d'un menu.

Un lment de menu est un simple lien prsent dans un menu, et qui notamment peut pointer vers:

Un article en particulier; Une page d'articles d'une section ou d'une catgorie disposs les uns sous les autres

(dans Joomla on appelle a le "format blog"); Une liste des articles dune catgorie; Une liste des catgories dune section; La page daccueil, qui est galement une liste d'articles disposs au format blog; Un des composants du site: page de formulaire, lment de lannuaire, vnement

dans lagenda, carte GoogleMap, etc.; Un lien externe (vers un autre site); Etc.

A/S Menus 4/4 Pour crer un lment de menu, slectionnez le menu dans la liste droulante du menu Menus puis cliquez sur le bouton New pour y ajouter un nouvel lment de menu. Soffrent vous une srie de choix concernant le type dlment de menu que vous souhaitez crer en cliquant sur le bouton Select:

Template 1/6 Dfinition: Le template rassemble tous les lments 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 grce au langage HTML, et va intgrer le contenu de la base de donnes cette structure au moyen du code PHP;

D'une ou plusieurs feuilles de style (fichiers CSS) qui dfinissent la mise en forme du contenu: couleurs et polices de caractres, fonds, aspect des cadres, des tableaux, des menus, etc.

De fichiers images appels pour illustrer ou fabriquer la page: images de fond de page, de fond de tableau, logo, bandeaux, etc.

Gnralement, et mme s'il n'y a pas de rgles dfinies puisque chacun construit son site comme il l'entend, une page est constitue d'une zone suprieure, appele header (ou en-tte), d'une partie centrale entoure de deux colonnes, droite et gauche, et d'une zone infrieure, appele le pied de page.

Template 2/6 C'est, globalement, la configuration basique d'une page web, mme si l encore les chartes graphiques plus volues peuvent donner lieu des structures plus complexes.

Template 3/6 Chaque template possde plusieurs positions, des "emplacements" prdfinis sur la page, dans lesquels il sera possible de placer des modules. Ces positions sont intgres directement au code HTML, dans les diffrentes zones de la page. Il peut par exemple y avoir plusieurs positions dans la zone d'en-tte : une position header pour afficher un logo, une position search pour afficher le moteur de recherche, une position top pour y placer un module supplmentaire, etc.

Template 4/6 Les positions sont dfinies 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 aprs 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 crations commerciales plus avances 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 bannire; Une position top (parfois header) pour la partie suprieure; Une position search pour le module du moteur de recherche; Une position nav ou menu destine accueillir le menu principal; Une position breadcrumb (ou breadcrumbs) destine 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 supplmentaires au template avec des positions "libres"; Une position footer pour le pied de page.

Gnralement, Joomla est install avec plusieurs templates. Bien sr, il est tout fait possible de tlcharger 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 slectionner un nouveau template, il suffit de cliquer dans la colonne Default afin que le template correspondant soit slectionn. Il ne vous reste plus qu' ractualiser 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 diffrents lments de base de Joomla! 2.5. Ce cours est trs 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 rsume trs bien cette version de Joomla! (PDF tlchargable 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 entraner, vous allez modifier la page d'accueil de votre site afin de reproduire la page d'accueil du site exempleinfo.binhoster.com.

Diapo 1Diapo 2Diapo 3Diapo 4Diapo 5Diapo 6Diapo 7Diapo 8Diapo 9Diapo 10Diapo 11Diapo 12Diapo 13Diapo 14Diapo 15Diapo 16Diapo 17Diapo 18Diapo 19Diapo 20Diapo 21Diapo 22Diapo 23Diapo 24Diapo 25Diapo 26Diapo 27Diapo 28Diapo 29Diapo 30