Publier dans le CMS Joomla - SYLVIE DUCZYNSKI janvier 2012
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Publier dans le CMS Joomla SYLVIE DUCZYNSKI Paternité - Pas d'Utilisation Commerciale - Pas de Modification : janvier 2012 http://creativecommons.org/licenses/by-nc-nd/2.0/fr/
Table des matières Objectifs 5 Introduction 7 I - Avant tout. 9 A. Accéder à votre site.......................................................................................9 B. Accéder à l'espace édition de votre site..........................................................10 II - Organiser le contenu. 15 III - Activité numéro 1 : à vous d'explorer maintenant. 17 A. Un peu de navigation...................................................................................17 B. Conclusion.................................................................................................18 C. A retenir :..................................................................................................19 D. Exercice.....................................................................................................19 E. Exercice.....................................................................................................19 IV - Introduction à la barre d'outils de l'éditeur JCE. 21 V - Sections et catégories. 23 A. Accéder à la liste des sections.......................................................................23 B. Accéder à la liste des catégories....................................................................25 C. Créer une catégorie.....................................................................................25 VI - Les articles 29 Sylvie Duczynski 3
A. Pour accéder à la liste des articles.................................................................29 B. La corbeille d'articles...................................................................................30 C. Les archives...............................................................................................30 D. Pour créer un nouvel article..........................................................................31 VII - Insérer un lien dans un article 33 VIII - Insérer une image dans un article. 39 IX - Insérer un tableau dans un article. 43 X - Créer des items de menu 47 A. Pour accéder au menu principal et à ses item :...............................................47 B. Pour créer un élément de menu....................................................................48 1. Choisir le type d'élément de menu:...................................................................................49 2. Compléter les différents champs.......................................................................................52 3. Choisir le contenu vers lequel l'élément va pointer...............................................................52 XI - Utilisation du composant Eventlist. 55 XII - Compléments 59 A. Effet pop up et bulle d'info...........................................................................59 B. Div et styles...............................................................................................62 C. Quelques onglets situés en bas de la fenêtre d'édition.....................................64 Sylvie Duczynski 4
Objectifs L'objectif de cette formation est de vous initier à l'utilisation des outils qu'offre le CMS Joomla pour la rédaction de contenus. L'administration d'un site sous Joomla ne sera pas abordée ici. . Vous aborderez les aspects suivants : publier du contenu, l'organiser, choisir sa présentation l'illustrer, joindre des documents gérer la navigation dans votre site intégrer un module. . Pour la rédaction des articles, vous utiliserez l'éditeur JCE, qui offre plus de fonctionnalités que l'éditeur fourni par défaut avec le CMS Joomla. . Rappel : l'ajout de contenus à un site web est régi par la législation en vigueur. Vous devrez respecter les règles de base en matière de droits et de protection. A consulter à ce sujet : Ressources académiques : http://www.ac-reims.fr/editice/index.php? option=com_k2&view=item&id=899&Itemid=579 Ressources nationales : http://www.educnet.education.fr/legamedia/ Sylvie Duczynski 5
Introduction JOOMLA est un CMS : Content Managing System (système de gestion de contenu) c'est à dire un logiciel de conception et de mise à jour de sites web. Il permet de créer des sites dont les pages sont générées dynamiquement. Dans ce type de site, les articles sont créés, à la volée, par le serveur de l'hébergeur, au moment où les rédacteurs les demandent. Dans un site fonctionnant avec une base de données, un article ne correspond pas à un fichier, mais chaque article est une simple ligne de la base de données. . Joomla se base sur la paire : Frontend (partie vitrine : le site tel que le voient les visiteurs) Backend (arrière-boutique : interface de rédaction et de gestion des pages pour les administrateurs et les rédacteurs dûment authentifiés). . Le noyau de Joomla est complété par des extensions : Composants pour ajouter de nouvelles fonctions à Joomla. Modules pour disposer des données provenant d'un composant. Dans un module, on récupère des données, on les dispose selon un format précis, dans une position précise. plug in : "bouts de code" pour ajouter des fonctionnalités particulières. Templates : sortes de gabarits visuels. C'est la forme de la mise en page et son apparence. Sylvie Duczynski 7
Avant tout. I- I A. Accéder à votre site. Pour accéder au site de formation, saisissez, dans votre navigateur, l'URL suivante : http://sepia.ac-reims.fr/form-datice-00/-joomla-/ Vous accédez, dans l'espace public (frontend) à la page d'accueil du site. Vous en avez une vue ci-dessous, avec les différentes zones qui la composent. On les nomme des modules. Ils sont de différents types : simples modules de contenu, ce qui est le cas de la plupart (encadrés en bleu) un module d'affichage des derniers articles parus dans la section : actualités (en vert) deux modules de menu (en rouge) Sylvie Duczynski 9
Avant tout. Module : actualités - bannière Module : agenda Module : logo Module : Menu principal Module : actualités - module Module : liens utiles Module : Coordonnées Module : vous êtes Module : Toute l'actualité Composition de la page d'accueil. Pour pouvoir accéder aux modules de contenu : agenda, liens utiles , il faudra qu'on vous ait donné un droit d'accès à ces modules. Contactez un administrateur pour connaître la procédure à suivre. Vous ne devriez pas avoir accès aux autres modules, qui sont du ressort des administrateurs du site. Quant aux articles affichés dans le module : actualités module, ce sont les derniers articles qui ont été publiés dans la section : actualité, catégorie : toutes. Ce sera peut-être l'un de vos articles, si vous êtes habilité à rédiger dans cette section et cette catégorie. B. Accéder à l'espace édition de votre site. Pour pouvoir rédiger vos articles à partir de l'espace édition, saisissez, dans votre navigateur, l'URL : http://sepia.ac-reims.fr/form-datice-00/-joomla-/administrator/ . Sylvie Duczynski 10
Avant tout. Vous obtenez la fenêtre suivante : connexion_administration Tapez l' identifiant et le mot de passe suivant : initialedevotreprenomnom et mot de passe identique (ex : fpallut ; fpallut) Si votre compte ne fonctionne pas, interrogez votre formateur par mail ou sur le forum. . Vous accédez alors à l'espace édition (backend) : tableau de bord Vous visualisez, ci-dessus, le tableau de bord. Il contient le panneau d'administration (avec tous ses icônes). A partir de là, vous pouvez accéder, en cliquant sur les icônes, aux sections, aux catégories, aux articles, et au menu. En haut de ce panneau, différents onglets vous permettent d'autres accès. La copie écran qui suit vous présente différents accès possibles à partir des onglets : site Sylvie Duczynski 11
Avant tout. contenu composants. ainsi que le détail de ce qu'ils contiennent. . Nous aurons l'occasion, au cours de cette formation, d'aller explorer un certain nombre d'entre eux et de tester les possibilités qu'ils offrent. Pour accéder aux dossiers contenant les images Pour retourner au panneau et les fichiers d'administration (ici, on y est) Les composants sont plutôt du ressort des Pour accéder administrateurs, il est aux éléments probable que vous ne des différents Voyiez pas cet onglet menus Pour créer des événements La gestion de la page Pour accéder d'accueil est du ressort aux différentes des administrateurs. Listes : articles, sections, catégories Graphique 1 Aperçu général des différents onglets Remarque : Un tableau de bord adapté à vos tâches. Selon les droits qui vont été accordés par votre administrateur, le nombre et le contenu des onglets peut varier. Par exemple, vous aurez peut-être un onglet : modules, dans votre tableau de bord. Si c'est le cas, cela signifie que votre administrateur vous a confié la gestion de certains modules. Par exemple, peut-être avez-vous été chargé de tenir à jour le module : agenda. Sylvie Duczynski 12
Organiser le II - II contenu. Dans Joomla, le contenu est organisé et hiérarchisé en : Sections : ce sont les rubriques de premier niveau. Au deuxième niveau, on trouve les catégories Et au troisième niveau, les articles. Remarque Pour pouvoir (vous ou les internautes, en général) accéder à ces différents contenus via l'espace public, il est nécessaire : qu'un item de menu ait été prévu pour cela ou bien qu'un lien inséré dans un article, y mène. C'est pourquoi vous devrez toujours penser, pour pouvoir visualiser votre travail, à prévoir un lien (de menu ou dans un article) qui mène vers lui. Méthode Dans l'espace édition, on accède aux sections, aux catégories et aux articles : panneau d'administration du tableau de bord (onglet Site → Panneau d'administration) ou par la barre d'outils qui est en haut du tableau de bord (via l'onglet contenu). Méthode Dans cette barre d'outils, on a aussi accès aux éléments généraux, par exemple : les menus (onglet menu) les modules (onglet extensions) A consulter : Webographie : site joomla : http://www.joomla.org site joomla France : http://www.joomla.fr/ tutoriels : http://aide.joomla.fr/ documentation au format pdf : http://aide.joomla.fr/telechargements/documentation aides joomla : http://www.aide-joomla.com/tutoriels site de ressources pour joomla : http://joomlatutos.com . Sylvie Duczynski 13
Organiser le contenu. Et les tutoriels qui vous disent l'essentiel sur joomla et son éditeur JCE : présentation de l'éditeur JCE : http://www.sarki.ch/jce15/ Joomla pour les nuls : http://aide.joomla.fr/telechargements/documentation/joomla-pour-les-nuls- version-1-5/download Un document très complet sur Joomla : http://www.glenan.fr/media/glenan.net_joomla_1.5.pdf Encore mieux ! http://systemelibre.free.fr/index.php/fr/telechargements/Documentation/ Sylvie Duczynski 14
Activité numéro III - III 1 Un peu de navigation. 17 Conclusion. 18 A retenir : 19 Exercice 19 Exercice 19 Objectifs Passer : du frontend (partie publique : visualisation) au backend (partie privée, espace édition : rédaction). A. Un peu de navigation. Sur votre navigateur préféré : ouvrez deux onglets : a. le premier pour visualiser, côté public : http://sepia.ac-reims.fr/etablissement/-joomla-/ b. le second pour observer, côté rédaction : http://sepia.ac-reims.fr/etablissement/-joomla-/administrator/ Vous verrez, avec l'habitude, qu'il vaut encore mieux ouvrir plusieurs onglets de chaque. C'est très pratique pour "jongler" d'un article à l'autre. onglet 1 (côté public): vous voyez apparaître la page d'accueil du site. Explorez le site en cliquant dans le menu. Voyez les articles proposés. Revenez à la page d'accueil. onglet 2 (côté rédaction) : identifiez-vous. a. Cliquez sur : gestion des sections. Voyez les sections proposées. Dans la barre de menus, en haut, cliquez sur l'onglet site, panneau d'administration (pour revenir). ATTENTION : Si vous êtes entré dans une section en cliquant sur son nom, dans la liste des sections, vous ne pouvez plus accéder aux onglets. Il vous faudra d'abord fermer la section. b. Cliquez sur : gestion des catégories. Observez. La suite du support de Sylvie Duczynski 15
Activité numéro 1 : à vous d'explorer maintenant. formation vous en dira plus. Dans la barre de menus, en haut, cliquez sur l'onglet site, panneau d'administration (pour revenir). c. Cliquez sur : gestion des articles. Dans la bande horizontale grise, cliquez sur : titre. Les articles sont alors reclassés par ordre alphabétique (de a à z, ou de z à a). Cliquez sur le titre du premier article, pour l'ouvrir en édition. onglet 1 (côté public): dans le menu gauche, cherchez cet article. Si vous ne le trouvez pas, c'est qu'aucun lien vers celui-ci n'a été prévu dans le menu. A retenir : avec le CMS Joomla, pour faire apparaître un article dans un menu, il faut avoir créé un élément de menu pour cela. Nous y reviendrons. onglet 2 (côté rédaction): on revient à l'article dans l'espace édition. a. Cliquez, en haut sur la croix avec fond rouge : fermer (on n'a fait aucune modification, il n'y a pas lieu de sauver ou d'appliquer). Vous revenez à la liste des articles. b. Cliquez, au dessus de la barre horizontale grise, sur : sélectionner une section. Dans le menu déroulant qui apparaît, sélectionnez-en une. Vous voyez alors les articles qui ont été créés dans cette section. Attention Pour pouvoir quitter l'espace édition, il faut : fermer ou sauver (si vous avez fait des modifications) l'article (ou autre) en cours. penser à se déconnecter (cela ferme toutes les activités Joomla en cours, même sur d'autres fenêtres, et évite des "blocages" ultérieurs). B. Conclusion. Il y a toujours des différences entre ce qu'on voit dans l'espace édition et ce qu'on voit réellement sur le site, partie publique, surtout lorsqu'on a utilisé des éléments un peu plus complexes. Il faut donc toujours penser à visualiser au fur et à mesure en enregistrant régulièrement ses modifications, cela évite de trop longs réglages, qui s'avéreront, au final, inutiles. D'autant qu'il faut aussi garder à l'esprit que les différents types de navigateurs n'interprètent pas toujours le code de la même façon. Internet Explorer a tendance à faire quelques caprices. Pensez à l'utiliser de temps entemps pour contrôler. C. A retenir : N'hésitez pas à explorer, à aller plus loin, mais pas trop, et sans vous inquiéter si c'est la première fois que vous utilisez un CMS. Vous verrez qu'avec un peu d'habitude beaucoup de choses s'éclairent. Sylvie Duczynski 16
Activité numéro 1 : à vous d'explorer maintenant. . N'oubliez pas que vous devrez toujours passer d'un point de vue (frontend, public, visualisation) à l'autre (backend, privé, côté rédaction) et vice versa pour savoir ce que vous devez faire et en voir le résultat. D. Exercice Un internaute peut-il capturer l'ensemble du contenu de tout un site bâti avec un CMS ? Oui, bien sûr, n'importe qui peut le faire, il y a des outils pour cela. Non, c'est impossible. Oui, mais ce n'est pas facile. Il faut trouver où sont stockés tous les articles. E. Exercice Tous les CMS ont-ils une base de données ? Bien sûr, sinon le CMS ne pourrait pas fonctionner. Un CMS n'a pas de base de données. Une base de données ne sert pas dans un site, c'est une collection d'informations. Ça dépend si c'est un bon CMS ou pas. Il y a des CMS avec base de données, d'autres sans. C'est un choix, selon les fonctionnalités qu'on veut obtenir. Sylvie Duczynski 17
Introduction à la IV - IV barre d'outils de l'éditeur JCE. Vous allez utiliser l'éditeur JCE pour rédiger ou modifier un article, une catégorie ou une section. Dans l'espace édition, l'éditeur JCE, qui a été installé, permet de disposer d'une barre d'outils assez complète, qui fournit des fonctions de base analogues à celles dont on dispose avec un traitement de textes classique. Vous en avez une vue commentée ci-dessous (les outils qui sont ceux d'un traitement de texte très classique ne sont pas commentés). Gestion des liens Annuler la des ancres dernière opération Copier - coller Insérer une image Gestion des tableaux Obtenir le rechercher Pleine page Gestion des calques code html de la page Lire la suite Saut de page Graphique 2 barre d'outils de l'éditeur Pour vous aider, au survol de chaque outil, une bulle d'infos vous en donne une courte description. Dans la suite, nous allons détailler l'utilisation des outils essentiels. Conseil Si vous cliquez sur l'outil : pleine page, vous pourrez rédiger votre article plus confortablement. Pour avoir à nouveau accès à la partie haute de la fenêtre, re cliquez sur pleine page, vous revenez à l'affichage normal. Vous avez fait "une gaffe" ? Vous pouvez annuler votre dernière opération. L'outil : rechercher est bien pratique pour rechercher toutes les apparitions d'un mot dans un article (exemple, changer un nom partout parce que la personne est partie, et a été remplacée). Lire la suite et saut de page, pour afficher en plusieurs fois les articles, les rend plus "digestes" s'ils sont trop longs. Sylvie Duczynski 19
Introduction à la barre d'outils de l'éditeur JCE. en bas, à gauche, l'icône : permet d'afficher le code html. On l'obtient aussi quand on clique, au-dessus de la barre d'outils, sur : Afficher/Masquer Pour en savoir plus sur les outils de JCE, rendez-vous sur : http://www.sarki.ch/jce15/les-icones/documentation/icones-barre-doutils-jce-15 Sylvie Duczynski 20
Sections et V- V catégories. A. Accéder à la liste des sections. Méthode Dans l'espace édition, pour accéder à la liste des sections : dans le panneau d'administration ou bien, dans l'onglet contenu cliquer sur : gestion des sections. On obtient la liste des sections déjà créées. Les sections sont le premier niveau de classement du site. Ce classement permet : d'une part, d'ordonner les articles dans l'espace édition pour pouvoir plus facilement les retrouver d'autre part de disposer d'un "groupe" qu'on pourra faire afficher au besoin (nous y reviendrons). Le choix des sections est un choix personnel pour chaque site. La copie écran ci-dessous montre la liste des sections créées pour formdatice Pour créer une nouvelle section En cochant devant la section, on peut lui appliquer des actions Nombre de catégories dans la section Nombre d'articles dans la section Graphique 3 Liste des sections En bas de la liste, on peut choisir d'afficher 5, 10, 20, .. toutes les sections créées. Sylvie Duczynski 21
Sections et catégories. Méthode En cochant devant le nom de la section, on peut lui appliquer des actions : exemples : dépublier/publier la section apparaîtra, ou non, sur le frontend (partie publique) du site copier cette action sera plus utile dans le cas d'un article, nous le verrons plus loin supprimer attention ! quand on supprime une section, on supprime tout ce qui se trouvait- les catégories et les articles - à l'intérieur. Pensez donc d'abord à changer les catégories de section, si vous voulez les conserver, ainsi que les articles qu'elles contiennent. ... Le nombre de catégories et d'articles contenus dans la section est indiqué dans les colonnes # catégorie(s) et #actif(s) (voir copie écran). Rappel Pour trier le contenu d'une colonne, cliquer dans la bande horizontale grisée. Le critère de tri s'adapte au contenu de la colonne. Remarque Pour créer une nouvelle section, il faut cliquer sur : nouveau. B. Accéder à la liste des catégories. Même démarche pour accéder à la liste des catégories. Les actions possibles sont les mêmes que pour les sections. Pour créer une nouvelle catégorie Attention ! Quand on supprime une catégorie, on supprime aussi tous les articles qui sont à l'intérieur On peut cliquer ici pour dépublier Section dans laquelle se la catégorie trouve cette catégorie Identifiant Ordre de cette catégorie de cette dans sa section catégorie Graphique 4 Liste des catégories Sur la copie écran, on a commenté certains renseignements qui sont fournis sur Sylvie Duczynski 22
Sections et catégories. chaque catégorie, beaucoup sont analogues à ceux dont on dispose pour les sections. Remarque Pour créer une nouvelle catégorie, cliquer sur : nouveau. C. Créer une catégorie. Rappel Dans le panneau d'administration, ou bien, dans l'onglet contenu, cliquer sur : gestion des catégories. On accède à la liste des catégories. En haut, à droite, cliquer sur nouveau. La fenêtre suivante apparaît : Penser à appliquer ou Renseigner le titre sauver pour enregistrer la nouvelle catégorie. Si on applique, on reste L'alias est généré automatiquement, il sert pour la création des liens ici et on peut continuer, Si on sauve, on ferme ceci et on revient à la liste des catégories On peut choisir une image pour sa catégorie, on peut prévoir une description, tout ceci n'apparaîtra que si on appelle cette catégorie grâce à un lien vers une catégorie Graphique 5 créer une catégorie Méthode Il faut, au minimum : donner un titre à cette nouvelle catégorie la placer dans une section (préalablement créée) la sauvegarder (appliquer ou sauver) Les autres réglages sont optionnels. Sylvie Duczynski 23
Sections et catégories. Conseil Pour voir comment on peut faire apparaître une catégorie et les articles qu'elle contient, par l'intermédiaire du menu : aller sur l'espace public : http://etab.ac-reims.fr/formdatice/-joomla-/1 cliquer, dans le menu gauche sur : matériel. C'est la catégorie matériel qu'on affiche avec les titres des articles contenus à l'intérieur. Le choix des options d'affichage de cette catégorie a été fait quand "l'item" de menu a été créé. 1 - http://etab.ac-reims.fr/formdatice/-joomla- Sylvie Duczynski 24
Les articles VI - VI A. Pour accéder à la liste des articles. Rappel Dans l'espace édition, pour accéder à la liste des articles : par le panneau d'administration ou bien, par l'onglet contenu cliquer sur : gestion des articles. On obtient la liste des articles déjà créés. Après avoir coché l'article, on peut lui appliquer les actions ci-dessous Pour créer un nouvel article Options d'affichage de l'article Différents critères de tri des articles Différents critères de classement des articles Ici on choisit le nombre d'articles à lister Suite de la liste Graphique 6 Liste des articles On peut : choisir le nombre d'articles à afficher (en bas, à gauche de la fenêtre) : 5 par 5, 10 par 10, ... tous. trier ces articles (filtre et formulaires de choix, sous la barre d'outils) : a. par section b. par catégorie c. par auteur d. en utilisant un mot du titre classer ces articles (en cliquant dans la bande horizontale grisée) a. par titre b. par section c. par catégorie d. par auteur e. par date ... en cochant l'article, on peut lui appliquer différentes actions : archiver/désarchiver, publier/dépublier, copier, mettre à la corbeille ... Sylvie Duczynski 25
Les articles en cliquant sur : nouveau, on peut créer un nouvel article les options générales d'affichage des articles du site sont réglées par les administrateurs. Pour chaque site, les choix généraux sont faits en fonction des besoins. Ils peuvent ensuite être affinés, article par article. Nous verrons comment par la suite. B. La corbeille d'articles. La corbeille d'articles permet de désactiver un article qui ne convient plus. Méthode Dans l'espace édition, dans la liste des articles, cochez l' article à supprimer puis, en haut de la liste, cliquez sur l'icône : corbeille l'article disparaît de la liste. Si vous avez trop vite supprimé un article et que vous regrettez ce geste, pas de souci, il n'a pas réellement disparu, mais a été rangé dans la corbeille d'articles. Pour le retrouver il suffira de contacter un administrateur qui le récupérera dans la corbeille, à laquelle il peut avoir accès. Remarque On peut donc utiliser la corbeille d'articles pour "mettre de côté" des articles pour une utilisation ultérieure. On peut donc se servir de la corbeille comme réserve : on y placera des copies d'articles qui pourront servir pour pallier les fausses manœuvres. C. Les archives. Quand un article est obsolète, on peut l'archiver. Méthode Dans l'espace édition, dans la liste des articles, cochez cet article puis, en haut de la liste, cliquez sur l'icône : archiver l'article reste dans la liste, mais il est "grisé". Il n'apparaîtra plus comme les autres sur le site public. Complément Un article archivé est cependant visualisable, par l'intermédiaire : d'un item de menu, type : liste des articles archivés (mais ceci est un autre chapitre) ou : du module archives, pourvu qu'il soit activé (mais ceci est aussi un autre chapitre). Sylvie Duczynski 26
Les articles D. Pour créer un nouvel article. Rappel Dans l'espace édition, cliquer sur : gestion des articles, on obtient la liste des articles. Puis, en haut de la liste des articles, dans la barre d'outils, au bout, cliquer sur : nouveau. : Pour les articles « longs », penser à appliquer de temps en temps pour Indiquer le titre sauvegarder, et, à la fin, à sauver. L'alias sera généré automatiquement Choisir la section et la catégorie auxquelles appartiendra l'article On peut modifier ces paramètres en cliquant Contenu de l'article Ici on règle les options d'affichage de l'article Graphique 7 créer un article Méthode Il faut, au minimum : donner un titre à ce nouvel article le placer dans une section (préalablement créée) et une catégorie (préalablement créée) de cette section Ecrire ou placer du contenu le sauvegarder (appliquer ou sauver) Complément Les autres réglages sont optionnels : (vous les explorerez petit à petit) paramètres de l'article, réglés par défaut, mais qu'on peut changer : - auteur - dates : de création (en la changeant, un article sera considéré comme nouveau, c'est intéressant pour le module : latest news par exemple) de publication, de modification. métadonnées (mots clé) paramètres avancés, c'est là qu'on peut modifier, pour cet article, les Sylvie Duczynski 27
Les articles options générales d'affichage (vus dans la partie précédente). Paramètres globaux : réglage général Mais on peut régler chaque article individuellement en sélectionnant : masquer ou montrer Graphique 8 paramètres individuels d'un article Attention Pour pouvoir visualiser, sur l'espace public, un article qu'on vient de créer, il faut créer un chemin qui mène vers lui. soit en créant un item de menu qui y mène. (nous y reviendrons) soit en prévoyant un lien vers lui dans un autre article précédemment créé (l'insertion des liens est l'objet du prochain chapitre). Sylvie Duczynski 28
Insérer un lien VII - VII dans un article Rappel Quand on survole un icône de la barre d'outils de l'éditeur JCE, une bulle d'information apparaît, qui donne brièvement son rôle. Dans cette barre d'outils, l'icône : "insérer un lien" se trouve dans la troisième rangée, juste à droite de l'ancre l'icône qui est à la droite de celui-ci permet de supprimer le lien. Insérer un lien supprimer un lien insérer une image Graphique 9 icônes lien image Méthode : Pour insérer un lien : Dans l'espace édition, il faut : évidemment d'abord ouvrir ou créer l'article qui contiendra le lien sélectionner, dans le contenu de l'article, le morceau de texte sur lequel vous voulez faire le lien cliquer, dans la barre d'outil, sur l'icône : insérer un lien Sylvie Duczynski 29
Insérer un lien dans un article La fenêtre qui s'ouvre vous permet d'insérer différents types de liens : Allez voir dans cet onglet avancé, il offre des options supplémentaires URL pour les liens web Pour une adresse mail Pour les liensvers un lien versununarticle articleinterne interne Choisir de préférence, pour les liens externes : nouvelle fenêtre optionnel Après réglages, insérer Graphique 10 insèrer un lien Le lien que vous voulez insérer peut être : une adresse email : cliquez en haut, à droite et tapez l'adresse n'oubliez pas : cible -> nouvelle fenêtre, cela évite que l'internaute sorte de votre site (et ne songe plus à y revenir !) externe : lien web, tapez l'URL (n'oubliez pas : cible -> nouvelle fenêtre) interne : lien vers un autre article déjà créé Méthode : Pour insérer un lien vers un article interne. Il va falloir aller chercher l'article en question dans sa section, puis, à l'intérieur de celle-ci, dans sa catégorie. Sylvie Duczynski 30
Insérer un lien dans un article La fenêtre que vous obtenez vous permet de parcourir ce chemin : Cliquer sur : articles puis sur la section voulue puis sur la catégorie voulue puis sur l'article voulu À la fin, cliquer sur insérer Graphique 11 insérer un lien interne cliquez sur : Articles puis cliquer sur la section où se trouve l'article vers lequel doit mener le lien puis cliquer vers sa catégorie puis cliquer sur l'article Attention Ne confondez pas, pour le choix du lien interne, les sections/catégories et les articles. Une section/catégorie est figurée par une petite icône qui montre deux pages Un article est figuré par une petite icône qui ne montre qu'une seule page avec des lignes le titre de l'article est indiqué, ainsi que son alias (l'alias est généré automatiquement par joomla, qui retire tous les caractères qui pourraient poser problème pour les liens : espaces, majuscules, caractères spéciaux) Méthode : Pour insérer un lien vers un fichier. L'insertion d'un lien vers un fichier, .doc ou .pdf, par exemple suit une démarche similaire à celle de l'insertion d'un lien vers un article. sélectionnez le "bout de texte" qui va porter le lien cliquez sur l'outil : insérer un lien (le même que précédemment) Sylvie Duczynski 31
Insérer un lien dans un article vous obtenez la fenêtre d'insertion : Cliquez ici pour accéder à l'explorateur de fichiers Graphique 12 accès à l'explorateur de fichiers cliquez sur l'icône indiqué La fenêtre de l'explorateur de fichiers apparaît. Sylvie Duczynski 32
Insérer un lien dans un article Choisissez le fichier insérez Cliquez sur le dossier Graphique 13 insérer un lien vers un document cliquez sur le dossier voulu (à gauche) pour l'ouvrir cliquez sur le fichier voulu (au milieu) pour le sélectionner insérer. Vous revenez à la fenêtre d'insertion. N'oubliez pas : cible -> nouvelle fenêtre. Complément Si le fichier que vous voulez insérer ne s'y trouve pas encore, il va falloir d'abord l'envoyer dans le dossier. Pensez d'abord à vous positionner dans le bon dossier, puis : -> suivez la même méthode que pour envoyer une image dans les dossiers de Joomla - prochain chapitre, 4ème méthode. Remarque Si, par la suite, vous voulez modifier votre lien, il est toujours possible de le faire : Ouvrez l'article cliquez à l'intérieur du bout de texte portant le lien cliquez sur l'icône : insérer un lien la fenêtre d'insertion d'un lien s'ouvre avec les réglages précédemment effectués il suffit de modifier et de cliquer sur : mettre à jour. Sylvie Duczynski 33
Insérer une VIII - VIII image dans un article. Rappel Dans la barre d'outils de l'éditeur JCE, l'icône : insérer une image se trouve au bout de la troisième rangée. Insérer un lien supprimer un lien insérer une image Graphique 14 icônes lien image Méthode Dans l'espace édition, il faut : évidemment d'abord ouvrir ou créer l'article qui contiendra l'image positionner le curseur à l'endroit voulu dans l'article cliquer, dans la barre d'outil, sur l'icône : insérer une image. Sylvie Duczynski 35
Insérer une image dans un article. La fenêtre suivante apparaît : Pensez à explorer ces onglets, ils contiennent des options intéressantes Les réglages pour l'image sont ici, mais on peut y revenir après Pour créer un nouveau dossier On clique ici pour envoyer une image dans le dossier On choisit l'image Choisir son dossier Graphique 15 insérer une image Méthode En bas, à gauche, cliquez sur le dossier voulu en bas, au milieu, le contenu du dossier s'affiche cliquez sur l'image voulue (si l'image n'a pas encore été placée dans Joomla, voir ci-dessous) une fois le choix fait, l'URL de l'image s'écrit automatiquement en haut en-dessous, on peut faire des réglages (optionnels) de toute façon, il est toujours possible d'y revenir ensuite (voir plus loin) cliquez sur : insérer. Méthode : Créer un sous-dossier pour optimiser le rangement Positionnez vous dans le dossier parent voulu cliquez sur la première icône, au milieu, à droite (voir copie écran ci-dessus) une petite fenêtre apparaît, indiquez le nom du sous-dossier et validez N'oubliez pas : Classer très finement ses images dans des sous-dossiers, sous-sous dossiers, ... n'est pas une perte de temps. Un rangement optimisé permet de retrouver rapidement ce qu'on cherche. Il vaut mieux perdre un tout petit peu de temps à peaufiner son classement, plutôt que d'en perdre énormément à entamer "des fouilles". Sylvie Duczynski 36
Insérer une image dans un article. Méthode Si l'image que vous voulez insérer n'a pas encore été envoyée dans Joomla : Une fois ouverte la fenêtre d'insertion image : Positionnez-vous dans le dossier voulu cliquez sur l'icône : envoyer une image (au milieu, à droite -> voir première copie écran de ce chapitre) Cette fenêtre apparaît d'abord Cliquer sur l'image voulue Cliquer sur : ajouter La fenêtre ci-contre s'ouvre L'image s'ajoute à la file d'attente On peut en ajouter d'autres ouvrir Quand on a fini d'ajouter, envoyer Graphique 16 envoyer des images dans Joomla la fenêtre : "envoyer" s'ouvre cliquez sur ajouter la fenêtre de parcours de vos dossiers locaux (ceux de votre ordinateur) s'ouvre parcourez et choisissez l'image à envoyer ouvrez votre image elle s'ajoute automatiquement à la file d'attente que vous voyer apparaître dans la fenêtre : "envoyer" vous pouvez ainsi cliquer à nouveau sur : ajouter, pour choisir d'autres images sur votre ordinateur et les ajouter à la file d'attente quand toutes vos images sont dans la file, cliquer sur : envoyer devant chaque image, la coche passe au vert :elles sont bien arrivées cliquez sur : fermer. vous revenez à la fenêtre d'insertion des images vous pouvez insérer celles que vous voulez. Remarque La méthode pour envoyer un document (.doc, .pdf ...) est identique. Nous parlerons plus tard de l'insertion de documents (ou plutôt de liens vers des documents). Sylvie Duczynski 37
Insérer une image dans un article. Méthode Pour revenir ultérieurement sur une image afin d'en modifier les réglages : ouvrez l'article clic droit sur l'image sélectionnez : insérer/éditer une image faites vos modifications mettez à jour. Attention Avant d'envoyer une image dans les dossiers de Joomla, assurez-vous que vous êtes positionné dans le bon dossier. Sinon vous aurez du mal à la retrouver ensuite :-( Remarque Le dossier contenant les images est le dossier : images/stories Pour la présentation de vos textes, vous disposez de différentes puces, icônes et flèches. Celles-ci se trouvent dans le sous-dossier : icones Complément En haut de la fenêtre d'insertion des images, il y a deux onglets : image réactive et avancé qui offrent des fonctionnalités supplémentaires. Si vous en avez le temps et la disponibilité, allez y jeter un œil, ces fonctionnalités sont intéressantes. Sylvie Duczynski 38
Insérer un IX - IX tableau dans un article. Rappel Les outils pour l'insertion d'un tableau se trouvent au troisième rang de la barre d'outils de l'éditeur JCE. Pour insèrer un tableau : on se positionne dans l'article on clique sur le troisième outil du troisième rang. Créer un tableau Graphique 17 icônes des outils tableau Sylvie Duczynski 39
Insérer un tableau dans un article. La fenêtre suivante apparaît : Onglet : Général Choisir le nombre de lignes et de colonnes marges Fixez au-moins la largeur, sinon le tableau sera difficile à voir et donc à remplir 100 % 300 Onglet : Avancé On peut choisir ses couleurs En cliquant ici : - Dans une palette - Ou en tapant le code Graphique 18 insèrer/modifier un tableau On y voit le contenu des deux onglets : général et avancé. On peut y effectuer les réglages voulus. Sylvie Duczynski 40
Insérer un tableau dans un article. puis on insère Méthode En utilisant tous les outils de la barre d'outils, on peut modifier le tableau à volonté : fenêtre : fenêtre : propriétés propriétés de de la ligne la cellule Fusionner la cellule diviser la cellule Afficher Insérer un Supprimer le Insérer une ligne: Insérer une colonne: les lignes tableau tableau Avant, après Avant, après supprimer supprimer On se place à l'endroit voulu pour appliquer les actions ci-dessus. Graphique 19 barre d'outils : tableau Sylvie Duczynski 41
Créer des items X- X de menu Introduction. Il existe, par défaut, un menu principal (Main Menu). On crée, à l'intérieur, des item (éléments de menu, sur lesquels on va cliquer), des sous-item, ... Les item de menu permettent un accès à différents contenus : Sous le type : lien interne : 1. sous-type : articles : lien vers une section - on obtient alors, selon le choix : - un éventail de tous les articles de cette section (sous forme blog) - ou toutes les catégories de cette section lien vers une catégorie - on obtient alors, selon le choix : - une liste de tous les articles de cette catégorie - ou un éventail de tous les articles de cette catégorie (sous forme blog) lien vers un article lien vers une liste des articles archivés Les autres sous-types donnent accès à diverses fonctionnalités, qui sont plutôt du ressort de l'administrateur du site. Pour les autres types : liens externes (liens web ou adresse mail) séparateur (un simple titre, sans lien, permettant de faire une séparation dans le menu) A. Pour accéder au menu principal et à ses item : Méthode : Pour accéder au menu principal : Main Menu. Dans l'espace édition, dans l'onglet : menu, en haut du tableau de bord, cliquer sur : Main Menu. Sylvie Duczynski 43
Créer des items de menu Cliquer sur l'onglet menu puis sur : Main Menu (menu principal) Actions applicables Cliquez sur : nouveau pour créer un nouvel item de menu On voit ici les items du menu principal Graphique 20 menu principal On voit apparaître les item et sous item du menu principal. B. Pour créer un élément de menu Méthode En haut, à droite, de la fenêtre affichant les item du menu principal (copie écran précédente), cliquez sur : nouveau. On obtient la fenêtre suivante : fenêtre de création d'un élément de menu. Sylvie Duczynski 44
Créer des items de menu 1. Choisir le type d'élément de menu: Méthode Il faut d'abord choisir le type (article - catégorie - lien externe ... -> voir l'introduction ci-dessus). Cliquez sur : changer le type (qui permet de choisir ou de changer le type) , à côté de : Un article, à droite. La fenêtre de choix s'affiche : types d'éléments de menu On clique sur le type désiré. Le cas échéant, les sous-types possibles se développent. Sylvie Duczynski 45
Créer des items de menu Exemple : ci-dessous, on a cliqué, dans : liens internes, sur : Articles : élément de menu de type article On choisit fréquemment : Article -> Un article. Cela permettra de mener vers un article qu'on a créé. Fondamental Pour créer un item menant vers un article, il faut cliquer sur : Articles, puis sur : Article -> Un article. Pour créer un item menant vers une catégorie, il faut cliquer sur : Articles, puis sur : Catégorie -> liste des articles d'une catégorie si on veut simplement que s'affichent les titres, cliquables, des articles qu'elle contient. Catégorie -> Articles d'une catégorie donnée en blog si on veut que s'affiche le contenu des articles qu'elle contient. 2. Compléter les différents champs. Une fois choisi le type, on revient à la fenêtre de création de l'élément de menu. Sylvie Duczynski 46
Créer des items de menu Méthode Il faudra ensuite : compléter le titre de l'élément de menu (l'alias se complétera automatiquement) choisir l'élément parent exemple : l'élément textes et styles a pour parent l'élément : matériel autre exemple : l'élément : stagiaires n'a pas de parent, c'est un élément principal, on a laissé sélectionné : haut. choisir : ouvrir dans : fenêtre parente ou nouvelle fenêtre 3. Choisir le contenu vers lequel l'élément va pointer. Fondamental Il faut enfin, selon le choix de type, cliquer, à droite, sur : Sélection, pour choisir vers quel article ou section ou catégorie pointera le lien. La fenêtre suivante apparaît : choix de l'article pour l'élément de menu Cliquez sur le contenu voulu puis fermer (croix, en haut, à droite). On revient à la fenêtre de création d'un élément de menu. L'URL du lien s'est complétée automatiquement (on peut la voir sous : titre - Alias). Sylvie Duczynski 47
Utilisation du XI - XI composant Eventlist. Le composant Eventlist permet de créer des catégories d'événements (catégories) afin de pouvoir créer et afficher des événements (events) avec, éventuellement, leurs dates de début et de fin, ainsi que les lieux où ils se dérouleront (venues). Il permet également d'associer des groupes d'utilisateurs (groups) qui pourront gérer et créer ces événements. Les groupes permlettent de fixer les droits d'édition sur les événements. On peut affecter un groupe à une catégorie d'événements, et dès lors, seuls les membres du groupe peuvent ajouter/modifier les événements de la catégorie. Méthode : Si vous avez été habilité à accéder au composant EventList : Au survol de l'onglet : Composants, cliquez sur EventList. La fenêtre suivante s'ouvre : Liste des groupes en charge des événements Ajouter un groupe de gestionnaires d'événements archivage des événements Liste des événements Liste des lieux Liste des catégories d'événements Réglage des paramètres Ajouter un événement Ajouter un lieu Ajouter une catégorie d'événements Tableau de bord du composant Eventlist Avant tout, il vous faudra créer une catégorie d'événements mais, éventuellement, avant cela, créer un groupe d'utilisateurs en charge de cette catégorie (et qui pourra créer, modifier, et archiver des événements en faisant partie) puis, éventuellement un lieu enfin vous pourrez créer des événements dans cette catégorie d'événements Sylvie Duczynski 49
Utilisation du composant Eventlist. Sylvie Duczynski 50
Utilisation du composant Eventlist. Attention : Il y a catégorie et catégorie. Ne confondez pas les catégories de votre site avec les catégories d'événements. Il s'agit d'entités différentes. Votre site, au départ, contient des catégories, mais pas de catégories d'événements. Il vous faudra donc en créer. Sylvie Duczynski 51
Utilisation du composant Eventlist. Méthode : Comment faire apparaître les événements créés ? Il vous faudra créer un élément de menu de type Eventlist dans votre menu principal. dans l'onglet menu, cliquez sur : Main Menu la liste des éléments du menu principal apparaît cliquez, en haut, sur : nouveau dans : Lien interne, cliquez sur : Eventlist Sylvie Duczynski 52
Utilisation du composant Eventlist. Vous aurez le choix entre les types suivants : Éléments de menu de type eventlist. En survolant chaque type, un bulle info vous en donne (en anglais) une description. Par exemple, le type : Simplelist Layout, présente un tableau de tous les événements prévus. Sylvie Duczynski 53
Compléments XII - XII Les chapitres suivants sont optionnels. Ils vont vous permettre de vous initier à des fonctionnalités intéressantes et pas forcément difficiles à mettre en œuvre. Si vous êtes relativement à l'aise dans ce qui précède, elles ne vous poseront pas de problème. Sinon, gardez-les pour plus tard. A. Effet pop up et bulle d'info. Méthode : Pour insérer une bulle d'infos sur une image. Insérez votre image selon la méthode habituelle Pendant l'insertion, cliquez sur l'onglet : avancé Dans : Liste des Classes CSS, sélectionnez : jce tooltip Dans : Classes CSS Appliquées, sélectionnez : jce tooltip Dans : Titre, tapez le texte qui sera contenu dans votre bulle d'infos. Il peut être assez long. Sauvez. Le tour est joué. Méthode : Pour provoquer un changement d'image lors du survol. Insérez votre image selon la méthode habituelle Dans la fenêtre d'insertion, cliquez sur l'onglet : Image Réactive Cochez : Activer Cliquez dans : image quand le curseur est dessus en-dessous, sélectionnez l'autre image Sauvez. Le tour est joué. Remarque : il est préférable que les deux images aient les mêmes dimensions. Sinon, l'ajustement pourra être approximatif et l'effet ne sera pas très heureux. Méthode : Pour créer un effet pop up sur une image. Il faut d'abord disposer de deux images, l'une de petite taille, l'autre de grande taille. Il faut ensuite les envoyer dans le dossier voulu de Joomla (en utilisant l'icône d'insertion des images). Puis : insérer dans votre article, à l'endroit voulu, l'image de petite taille puis sélectionnez cette image Sylvie Duczynski 55
Compléments cliquez sur l'icône : insérer un lien 2) cliquer sur : insérer un lien 1) Sélectionner l'image Cliquer sur l'explorateur de fichiers Graphique 21 insérer un lien popup Dans la fenêtre d'insertion des liens, cliquez sur l'icône : explorateur de fichiers (voir ci-dessus). choix du lien popup Choisissez alors, dans le dossier voulu, l'image de grande taille. cliquez, dans la même fenêtre, sur l'onglet avancé Sylvie Duczynski 56
Compléments réglage lien popup Dans : Liste des Classes CSS, sélectionnez : jce popup Dans : Classes CSS Appliquées , sélectionnez : jce popup Puis insérez. Seule la petite image apparaîtra à priori. Lorsqu'on cliquera sur elle, un calque transparent s'ouvrira dans lequel apparaîtra la grande image. Remarque On peut aussi créer un effet popup sur un mot ou une phrase, puisqu'il s'agit, ni plus ni moins, d'insérer un lien avec un style particulier. B. Div et styles Insérer une "div" (boîte rectangulaire). Pour régler très finement l'apparence d'une partie de votre page, vous pouvez utiliser la technique des "div". Méthode Sélectionnez la partie de votre page que vous allez "styler". Dans la barre d'outils, dans : sélectionnez : div Sylvie Duczynski 57
Compléments Dans la dernière rangée de la barre d'outils (à peu près au milieu), cliquer sur : La fenêtre suivante apparaît : En décochant ici, on règle indépendamment la marge du haut, du bas, de gauche et de droite Grâce à cet ensemble d'onglets, on peut régler très finement ou de façon originale : - l'aspect du texte - les couleurs, de fond, de bordure et d' encadrement on peut mettre une image de fond on peut fixer individuellement les marges, intérieures et extérieures et on peut positionner très exactement sa « boîte ». Graphique 22 divisions et styles Explorez tous les onglets. Dans l'onglet : boîte, ouvert ci-dessus, on règle : les dimensions de la boîte (fixez des dimensions à priori pour pouvoir localiser une boîte qui ne sera pas minuscule). la marge intérieure (distance entre le bord de la boîte et son contenu) la marge extérieure (distance entre le bord de la boîte et le corps de l'article). On peut aussi régler, avec les autres onglets : l'aspect du texte à l'intérieur de la boîte (les possibilités sont plus étendues qu'avec les outils habituels) les couleurs, l'aspect du fond, des bordures (les possibilités sont plus étendues qu'avec les outils habituels) on peut aussi mettre une image de fond. Allez voir, dans le menu gauche de l'espace public, dans l'article : matériel. Cliquez sur l'article "div". Vous verrez quelques exemples d'utilisation des "boîtes". Sylvie Duczynski 58
Compléments Conseil Pour revenir, à postériori, sur une boîte déjà créée : On a cliqué ici On voit ici, dans : chemin, En cliquant sur l'icône AA, qu'on se trouve bien on va pouvoir voir et rectifier à l'intérieur de la div. les réglages. Graphique 23 pour voir si on est bien situé à l'endroit désiré Se localiser précisément grâce au chemin sert à chaque fois qu'on veut revenir sur un réglage dans une mise en page un peu complexe. Cela permet d'être sûr qu'on est exactement positionné au bon endroit. C. Quelques onglets situés en bas de la fenêtre d'édition. En bas de la fenêtre d'édition des articles, vous disposez d'onglets. Les premiers offrent des fonctionnalités déjà accessibles grâce à la barre d'outils. Les deux derniers permettent d'accéder à des fonctionnalités avancées. Sylvie Duczynski 59
Compléments Insérer un Insérer un media dans module dans l'article l'article Graphique 24 onglets supplémentaires de la fenêtre d'édition d'un article Méthode : Insérer un media Vous disposez d'un plug in pour l'insertion de media, locaux (préalablement envoyés dans un dossier de Joomla) ou distants. Pour insérer un media local : Cliquez dans votre article, à l'endroit voulu cliquez, en bas, sur l'onglet : AVR Media (l'avant-dernier, à droite). Une fenêtre apparaît, cliquez sur l'onglet : Média local : insérer un media local Dans Média, choisissez le fichier contenant le media, il devra d'abord avoir été envoyé dans les dossiers de Joomla. (pour envoyer un fichier dans le dossier voulu, utilisez l'explorateur de fichiers, accessible par l'outil : insérer un lien) Sylvie Duczynski 60
Compléments Le dossier qui contiendra les videos est un dossier que vous aurez créé pour cela dans images/stories (le dossier de stockage des images et des documents) : dossier videos choisissez le type de media vous pouvez régler les dimensions du lecteur vous pouvez pré visualiser pour contrôler Insérez. insérer un media distant Tapez l'adresse du fournisseur choisissez le nom du fournisseur (l'éventail proposé est large) l'id est celle du media à insérer, vous le chercherez sur le site du fournisseur insérez. Méthode : Insérer un module dans le contenu d'un article Un certain nombre de modules sont disponibles dans Joomla xxiNG et peuvent être paramétrés et activés. Le choix, le paramétrage et l'activation des modules sont du ressort de l'administrateur de votre site. Ces modules peuvent ensuite être insérés dans un article. Cliquez dans votre article, à l'endroit voulu cliquez, en bas, sur l'onglet : Insérer Module (le dernier, à droite). Sylvie Duczynski 61
Compléments La fenêtre suivante apparaît : On va pouvoir insérer un « module » à l'intérieur de l'article. On voit des exemples ci-dessous de ce qu'on peut insérer, à condition que les modules en question aient été activés et paramétrés Ici, on règle la façon dont on va insérer le module, tel quel, ou dans un tableau, ou une div. Choix du module à insérer Graphique 25 insèrer un module Vous disposez alors d'une liste des modules que vous pourrez insérer. Il suffit de cliquer sur le module choisi. Sylvie Duczynski 62
Vous pouvez aussi lire