Embed Size (px)
Citation preview
Publier dans le CMS Joomla
Paternité - Pas d'Utilisation Commerciale - Pas de Modification : http://creativecommons.org/licenses/by-nc-nd/2.0/fr/
SYLVIE DUCZYNSKI
novembre 2015
Cinquième version
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é : à vous d'explorer maintenant. 17
A. Un peu de navigation...................................................................................17
B. Conclusion.................................................................................................19
C. A retenir :..................................................................................................19
D. Exercice.....................................................................................................19
E. Exercice.....................................................................................................20
IV - Introduction à la barre d'outils de l'éditeur JCE. 21
V - Catégories. 23
A. Accéder à la liste des catégories....................................................................23
B. Créer une catégorie.....................................................................................24
VI - Les articles 27
Sylvie Duczynski3
A. Pour accéder à la liste des articles.................................................................27
B. La corbeille d'articles...................................................................................28
C. Les archives...............................................................................................28
D. Pour créer un nouvel article..........................................................................29
VII - Régler les droits d'accès sur un article, une catégorie, ou un lien de menu. 33
A. Régler les droits d'accès sur un article...........................................................33
B. Régler les droits d'accès sur une catégorie ou un élément de menu...................34
VIII - Insérer un tableau dans un article. 35
IX - Insérer une image dans un article. 39
X - Insérer un lien dans un article 47
XI - Insérer un lien pour faire apparaître un lecteur son ou vidéo 53
XII - Créer des items de menu 59
A. Pour accéder au menu principal et à ses item :...............................................59
B. Pour créer un élément de menu....................................................................60 1. Choisir le type d'élément de menu:...................................................................................61 2. Compléter les différents champs.......................................................................................63 3. Choisir le contenu vers lequel l'élément va pointer...............................................................63
XIII - Utiliser le composant Phocamaps 65
A. Créer un plan.............................................................................................67
B. Créer un marqueur......................................................................................70
C. Intégrer le plan phoca dans un article............................................................72
XIV - Utilisation du composant Phocagallerie. 75
A. Créer et garnir une galerie d'images..............................................................77 1. Première étape : créer une galerie.....................................................................................77 2. Deuxième étape : joindre des images à cette galerie...........................................................79
B. Joindre une galerie d'images à un article........................................................81
XV - Compléments 85
A. Effet de survol et effet pop up.......................................................................85
B. Div et styles...............................................................................................89
Sylvie Duczynski4
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/utiliser-internet-de-maniere-responsable1
Ressources nationales : http://eduscol.education.fr/internet-responsable/
1 - http://www.ac-reims.fr/editice/index.php?option=com_k2&view=item&id=899&Itemid=579
Sylvie Duczynski5
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 Duczynski7
I - Avant tout. I
A. Accéder à votre site.
Pour accéder au site de votre établissement, saisissez, dans votre navigateur, l'URL suivante : http://sepia.ac-reims.fr/etablissement/-joomla-/2 .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)
2 - http://etab.ac-reims.fr/formdatice/-joomla-/
Sylvie Duczynski9
Image 1 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 catégorie : actualité.Ce sera peut-être l'un de vos articles, si vous êtes habilité à rédiger dans 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/etablissement/-joomla-/administrator/3 .
3 - http://etab.ac-reims.fr/formdatice/-joomla-/administrator/
Avant tout.
Sylvie Duczynski10
Module : logo
Module : vous êtes
Module : actualités - bannière
Module : liens utiles
Module : actualités - module
Module : agenda
Module : Coordonnées
Module : Toute l'actualité
Module : Menu principal
Vous obtenez la fenêtre suivante :
Image 2 connexion à l'administration
Tapez l' identifiant et le mot de passe qui vous ont été fournis.Si vous ne les avez pas reçus, demandez-les à votre administrateur..Vous accédez alors à l'espace édition (backend) :
Graphique 1 panneau d'administration
Vous visualisez, ci-dessus, le tableau de bord d'un administrateur. Il contient le panneau d'administration (avec tous les icônes accessibles à l'administrateur). Les accès les plus courants sont proposés dans un menu, à gauche, qu'on nomme menu contextuel (menu dont le contenu s'adapte à l'endroit où vous vous trouvez).Tous les accès possibles sont proposés dans la barre d'onglets, en haut.La partie centrale est réservée à des informations.
L'apparition des différents accès est conditionnée par les droits qui vous ont été accordés par l'administrateur du site.
Avant tout.
Sylvie Duczynski11
Ici, accès aux fonctionnalités les plus courantes
En cliquant sur chaque onglet, vous pouvez le développer afin d'accéder à toutes les fonctionnalités
Pour vous déconnecter, c'est ici
Il est probable que votre tableau de bord personnel sera plus succinct que celui présenté ci-dessus.Voici, ci-dessous, un tableau de bord restreint.Cette personne est autorisée à accéder à l'interface administration, mais n'est autorisée qu'à rédiger des articles :
tableau de bord restreint
Dans la partie gauche, on voit sue cette personne peut accéder à la liste des catégories et aux articles, mais elle ne peut pas les éditer ( ou bien, en haut, elle peut utiliser l'onglet contenu).Par contre, elle peut créer un nouvel article et ensuite le modifier.Tout cela a été paramétré par l'administrateur du site.
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.Vous pouvez aussi avoir accès à des fonctionnalités plus étendues, offertes par l'onglet : composants.Notez donc que les chapitres concernant les composants : phocagallery, phocamaps, vous concernent, mais que vous n'aurez peut-être qu'un accès partiel à leurs fonctionnalités.Par exemple, vous ne pourrez pas forcément créer une galerie d'image, mais vous pourrez, par contre, utiliser celles qui existent déjà.
Avant tout.
Sylvie Duczynski12
II - Organiser lecontenu.
II
Dans Joomla, le contenu est organisé et hiérarchisé : Les catégories , qui peuvent contenir des (sous) catégories, puis des (sous-
sous) catégories, et ainsi de suite sans limitation Les articles qui seront classés dans les catégories.
A noter qu'il existe un catégorie particulière qui est la catégorie : "non catégorisé". Elle permet de mettre à part des articles, comme, par exemple, la page d'accueil.
RemarquePour 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éthodeDans l'espace édition, on accède aux catégories et aux articles :
par le tableau de bord du panneau d'administration ou par la barre d'onglets qui est en haut du tableau de bord (via l'onglet
contenu).
MéthodeDans cette barre d'onglets, on a aussi accès aux éléments généraux, par exemple :
les menus (onglet menu) les modules (onglet extensions)
Ceci, bien sûr, si vous êtes habilité à accéder à ces onglets, sinon, vous ne les verrez ps apparaître.
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
Sylvie Duczynski13
site de ressources pour joomla : http://joomlatutos.com .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/
Organiser le contenu.
Sylvie Duczynski14
III - Activité : à vousd'explorermaintenant.
III
Un peu de navigation. 17
Conclusion. 19
A retenir : 19
Exercice 19
Exercice 20
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://www.ac-reims.fr/editice/
b. le second pour observer, côté rédaction :http://www.ac-reims.fr/editice/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 catégories. Observez. La suite du support de
formation vous en dira plus.Dans la barre de menus, en haut, cliquez sur l'onglet site, panneau d'administration (pour revenir).ATTENTION : Si vous êtes entré dans une catégorie en cliquant sur son
Sylvie Duczynski15
nom, dans la liste des catégorie, vous ne pouvez plus accéder aux onglets. Il vous faudra d'abord fermer la catégorie.
b. 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 catégorie. Dans le menu déroulant qui apparaît, sélectionnez-en une.Vous voyez alors les articles qui ont été créés dans cette catégorie.
AttentionPour 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 en temps 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..N'oubliez pas que vous devrez toujours passer d'un point de vue (frontend, public,
Activité : à vous d'explorer maintenant.
Sylvie Duczynski16
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.
Activité : à vous d'explorer maintenant.
Sylvie Duczynski17
IV - Introduction à labarre d'outils del'éditeur JCE.
IV
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).
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
Sylvie Duczynski19
Couper copier - coller
Gestion des tableauxrechercher
Lire la suiteSaut de page
Pleine page Gestion des liens des ancres Insérer une
image
Annuler la dernière opération
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.
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
RemarqueUtilisations particulières de l'outil : insérer un lien.En sélectionnant un morceau de texte et en cliquant sur l'outil : insérer un lien, on peut, en utilisant la classe popup JCE Mediabox (voir plus loin les chapitres correspondants) :
insérer un lien vers une image, qui apparaîtra, en transparence dans une fenêtre popup
insérer un lien vers un média (film ou son) qui aura été envoyé dans un dossier de Joomla.
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
Introduction à la barre d'outils de l'éditeur JCE.
Sylvie Duczynski20
V - Catégories. V
A. Accéder à la liste des catégories.
MéthodeDans l'espace édition, on peut accéder à la liste des catégories :
grâce au lien "catégories" dans le menu gauche du panneau d'administration ou bien, par l'onglet contenu
On obtient la liste des catégories déjà créées.Les catégories permettent de classer les articles 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 catégories est un choix personnel pour chaque site.La copie écran ci-dessous montre la liste des catégories créées pour votre site.
Graphique 3 Liste des catégories
MéthodeEn cochant devant le nom de la catégorie, on peut lui appliquer des actions :exemples :
dépublier/publier
Sylvie Duczynski21
On peut cliquer ici pour dépublier la catégorie
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
Identifiant de cette catégorie
Pour supprimer, cocher devant la catégorie puis cliquer sur corbeille
Niveau d'accès : Public, Enregistré ou Spécial
la catégorie apparaîtra, ou non, sur le frontend (partie publique) du site archiver mettre à la corbeille
attention ! quand on supprime une catégorie, on supprime tout ce qui se trouvait à l'intérieur : les sous-catégories et les articles.Par contre, il est parfaitement possible de changer le nom d'une catégorie sans dommage pour son contenu (pensez à changer aussi son alias - l'alias est ce qui est utilisé dans les liens).
...
En haut de la liste, à droite, on peut choisir d'afficher 5, 10, 20, .. toutes les catégories créées.Pour trier le contenu d'une colonne, cliquez sur son titre. Le critère de tri s'adapte au contenu de la colonne.
B. Créer une catégorie.
RappelDans le panneau d'administration, partie gauche, , cliquer sur : Catégories. Puis, en haut, à gauche, cliquez sur : Nouveau (en vert).Ou bien, dans l'onglet contenu, Catégories, cliquer sur : Ajouter une catégorie.
La fenêtre suivante apparaît :
Graphique 4 créer une catégorie
MéthodeIl faut, au minimum :
donner un titre à cette nouvelle catégorie la sauvegarder
Les autres réglages sont optionnels.
Catégories.
Sylvie Duczynski22
Renseigner le titre L'alias est généré automatiquement, il sert pour la création des liens
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égoriegrâce à un lien vers une catégorie
Penser à enregistrer pour sauver la nouvelle catégorie. Si on enregistre et ferme, on revient à la liste des catégories
Catégorie ou sous-catégorie ?
L'alias sera généré automatiquement. Cet alias correspond au titre de la catégorie. Les espaces sont remplacés par des tirets, les accents sont supprimés. Cela permet d'éviter tout problème.
Catégories.
Sylvie Duczynski23
VI - Les articles VI
A. Pour accéder à la liste des articles.
RappelDans l'espace édition, on peut accéder à la liste des articles :
grâce au lien "Articles" dans le menu gauche du panneau d'administration ou bien, par l'onglet contenu
On obtient la liste des articles déjà créés.
Graphique 5 Liste des articles
On peut : choisir le nombre d'articles à afficher (à droite de la liste des articles) :
5 par 5, 10 par 10, ... tous. trier ces articles, en complétant le formulaire de recherche (en utilisant un
mot du titre , par exemple) ou :en cliquant sur : Outils de recherche, on peut trier par :- statut- catégorie- niveau d'accès- auteur- ........
classer ces articles (en cliquant sur le titre des colonnes), par :- statut- titre- niveau d'accès- auteur
Sylvie Duczynski25
Après avoir coché l'article, on peut lui appliquer les actions ci-dessous
nombre d'articles à lister par page
Différents critères de classement des articles
Créer un nouvel article
Options d'affichage de l'article
Publier Archiver - Supprimer
- ........ en cochant l'article, on peut lui appliquer différentes actions :
modifier, publier, dépublier, archiver, mettre à la corbeille ... 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.
RemarqueOn 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.
MéthodeQuand un article est obsolète, on peut l'archiver :
Dans l'espace édition, dans la liste des articles, cochez cet article puis, en haut de la liste, cliquez sur : archiver
l'article n'apparaît plus dans la liste, mais on peut le voir en sélectionnant le statut Archivé.
Il n'apparaîtra plus comme les autres sur le site public.Pour le désarchiver, contactez un administrateur.
ComplémentUn 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)
Les articles
Sylvie Duczynski26
ou : du module archives, pourvu qu'il soit activé (mais ceci est aussi un autre chapitre).
D. Pour créer un nouvel article.
RappelDans l'espace édition, on peut accéder à la création d'un article :
en cliquant sur Ajouter un article, dans le menu gauche du panneau d'administration
ou par l'onglet contenu, Articles, Ajouter un article
Graphique 6 créer un article
MéthodeIl faut, au minimum :
donner un titre à ce nouvel article (l'alias sera généré automatiquement) le placer dans une catégorie (préalablement créée) Écrire ou placer du contenu l'enregistrer
RemarqueSur la copie écran ci-dessus, on parle de : régler les droits de l'article.Il s'agit d'accorder le droit, à certains groupes d'utilisateurs, d'éditer et de modifier, de supprimer, de modifier le statut de cet article.Pour accéder à cette fonctionnalité, il faudra qu'on vous l'ait accordée. Ce ne sera souvent pas le cas
ComplémentLes autres réglages sont optionnels : (vous les explorerez petit à petit)
Les articles
Sylvie Duczynski27
Indiquer le titre L'alias sera généré automatiquement
Choisir la catégorie à laquelle appartiendra l'article
Contenu de l'article
On peut modifier ici les paramètres de l'articleIci on fixe les paramètres de publication de l'article
Pour les articles « longs », penser à enregistrer de temps en temps pour sauvegarder, et, à la fin, enregistrer et fermer.
Ici se règlent les droits concernant cet article
On peut choisir le statut et le niveau d'accès
Outils supplémentaires
paramètres de publication 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. paramètres de l'article, c'est là qu'on peut modifier, pour cet article, les
options générales d'affichage (vus dans la partie précédente).
Les articles
Sylvie Duczynski28
Image 3 paramètres d'affichage d'un article
AttentionPour 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éé
Les articles
Sylvie Duczynski29
(l'insertion des liens est l'objet du prochain chapitre).
Les articles
Sylvie Duczynski30
VII - Régler les droitsd'accès sur unarticle, unecatégorie, ou unlien de menu.
VII
A. Régler les droits d'accès sur un article.
Si vous y avez été autorisé, vous allez pouvoir régler les droits d'accès sur l'article que vous venez de rédiger, c'est à dire que vous aller pouvoir restreindre la possibilité de visualiser votre article sur le site, grâce au choix du niveau d'accès.Par défaut, dans Joomla 2.5, il existe trois niveaux d'accès :
public : cet article (ou cette rubrique) sera visible par tout le monde. enregistré : cet article sera visible seulement par les utilisateurs qui se
seront connectés, grâce à leur identifiant et leur mot de passe, propres au site.
spécial : cet article sera visible seulement par les membres des groupes dont les droits sont supérieurs à ceux du groupe : enregistré, c'est à dire les autres groupes, définis par défaut dans Joomla ou créés par l'administrateur du site
Mais votre administrateur a la possibilité d'en créer autant d'autres que nécessaire. C'est à lui que vous devrez vous adresser pour créer un accès particulier.Par exemple, on voit sur la copie écran ci-dessous que l'administrateur a créé le niveau d'accès : sections technologiques.Il a affecté ce niveau d'accès à un groupe d'utilisateurs.Ce sont ces utilisateurs qui, après connexion, pourront visualiser les articles auxquels auront été affecté ce niveau d'accès.
Sylvie Duczynski31
choix du niveau d'accès d'un article
Pour restreindre l'accès à un article, il suffit donc, dans les réglages de l'article, de choisir : Accès -> niveau voulu. Puis d'enregistrer, bien sûr.
AttentionLes droits d'accès sont hérités à priori, c'est à dire que ces droits sont aussi valables pour un groupe de droits supérieurs, et les droits d'accès d'une catégorie sont transmis, sauf réglages contraires, à ses sous-catégories.Vérifiez donc bien, auprès de votre administrateur, la hiérarchie des droits qu'il a construite.
B. Régler les droits d'accès sur une catégorie ou un élément de menu
De la même façon que pour un article, on peut, dans les réglages de la catégorie ou de l'élément de menu, choisir le niveau d'accès désiré.S'il s'agit d'un élément de menu, cet élément n'apparaîtra à l'utilisateur que s'il s'est connecté, et si son groupe bénéficie du droit d'accéder à cet élément.
Régler les droits d'accès sur un article, une catégorie, ou un lien de menu.
Sylvie Duczynski32
VIII - Insérer untableau dans unarticle.
VIII
RappelQuand 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.Les outils pour l'insertion d'un tableau se trouvent au troisième rang de la barre d'outils de l'éditeur.
icônes des outils tableau
Pour insèrer un tableau : on se positionne dans l'article on clique sur l'outil : insérer/modifier un tableau.
Sylvie Duczynski33
Créer un tableau
La fenêtre suivante apparaît :
Graphique 7 insèrer/modifier un tableau
Insérer un tableau dans un article.
Sylvie Duczynski34
Choisir le nombre de lignes et de colonnes
100 % 300Fixez au-moins la largeur, sinon le tableau sera difficile à voir et donc à remplir
Onglet : Général
Onglet : Avancé
On peut choisir ses couleursEn cliquant ici :- Dans une palette- Ou en tapant le code
marges
On y voit le contenu des deux onglets : général et avancé. On peut y effectuer les réglages voulus :
général : nombre de ligne/colonnes, alignement, marges, taille ... avancé : image de fond, cadre, couleur de bordure, couleur de fond ....
puis on insère.
MéthodeEn utilisant tous les outils de la barre d'outils, on peut modifier le tableau à volonté :
Graphique 8 barre d'outils : tableau
Insérer un tableau dans un article.
Sylvie Duczynski35
Insérer un tableau
Supprimer le tableau
fenêtre : propriétés de la ligne
fenêtre : propriétés de la cellule
Insérer une ligne:Avant, aprèssupprimer
Insérer une colonne:Avant, aprèssupprimer
Fusionner les cellules
diviser les cellules
On se place à l'endroit voulu pour appliquer les actions ci-dessus.
IX - Insérer uneimage dans unarticle.
IX
RappelDans la barre d'outils de l'éditeur JCE, visualisez (ci-dessous) l'icône : insérer une image.
Graphique 9 icônes lien image
Méthode : Pour insérer une image figurant déjà dans les dossiers de JoomlaDans 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 Duczynski37
Insérer un liensupprimer un lien
insérer une imageInsérer une ancre
La fenêtre suivante apparaît :
Graphique 10 insérer une image
Méthode Vous devriez être dans le dossier stories, sinon, ouvrez-le, puis cliquez sur
le dossier vouluen bas, au milieu, le contenu du dossier s'affiche
double-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 (sinon, cliquez à nouveau sur l'image)
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 (en bas).
Méthode : Créer un sous-dossier pour optimiser le rangementDans la fenêtre d'insertion des images :
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.
Insérer une image dans un article.
Sylvie Duczynski38
Choisir son dossier
Pour créer un nouveau dossier
On clique ici pour envoyer une image dans le dossier
On choisit l'image
Les réglages pour l'image sont ici, mais on peut y revenir après
Pensez à explorer ces onglets, ils contiennent des options intéressantes
Il vaut mieux perdre un tout petit peu de temps à peaufiner son classement, plutôt que d'en perdre énormément à entamer "des fouilles".
Méthode : Pour envoyer une image dans les dossiers de Joomla avant insertionSi 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 (voir copie écran ci-dessous)
La fenêtre d'envoi des documents apparaît. Vous pouvez procéder :
par glisser-déposer ou par sélection du fichier (une fenêtre de parcours de vos dossiers locaux
s'ouvre)
glisser_deposer
Insérer une image dans un article.
Sylvie Duczynski39
Graphique 11 envoyer une image
Insérer une image dans un article.
Sylvie Duczynski40
Si vous avez ouvert le dossier voulu sur votre ordinateur, vous pouvez procéder par glisser-déposer (voir image ci-dessous)
Sinon, cliquez sur parcourir pour ouvrir une fenêtre d'exploration de votre ordinateur Quand vous avez localisé votre
image, ouvrez-la puis cliquez sur : envoyer
Vous pouvez déposer plusieurs images et les envoyer en groupe :
envoi_des images
les images choisies s'affichent au fur et à mesure dans la fenêtre cliquez à nouveau sur : ajouter, pour choisir d'autres images sur votre
ordinateur, ou glissez-les directement quand toutes vos images sont dans la file, cliquer sur : envoyer
derrière chaque image, la coche passe au vert : elles sont bien arrivées
cliquez sur : fermer. vous revenez à la fenêtre d'insertion des images
Insérer une image dans un article.
Sylvie Duczynski41
L'image s'ajoute à la file d'attenteOn peut en ajouter d'autres
Quand toutes les images ont été ajoutées à la file d'attente, cliquer sur : envoyer
Puis, quand tous les coches sont passés au vert, fermer
l'image a été envoyée
Il n'y a plus qu'à bien sélectionner l'image envoyée (double clic) puis l'insérer.
RemarqueLa méthode pour envoyer un document (.doc, .pdf ...) est identique. Nous parlerons plus tard de l'insertion de ces documents (ou plutôt de l'insertion de liens vers des documents).
Méthode : Ajuster les réglages d'un imagePour 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.
AttentionAvant 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 :-(
Insérer une image dans un article.
Sylvie Duczynski42
Votre image a été placée dans le dossier, on la voit ci-dessus.Double - cliquez ici pour bien la sélectionner
Puis cliquez sur : insérer
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
Conseil : Pour les documents trop lourds.Le "poids" des documents qui peuvent être envoyés dans le dossier : images/stories par la méthode classique, exposée précédemment, est limité.Les images peuvent toujours être redimensionnées et compressées, mais les films, même compressés, sont souvent très lourds.Si vous devez envoyer des fichiers trop lourds, vous pouvez utiliser l'espace de stockage WebDav (contactez votre administrateur pour cela).Les fichiers ainsi stockés seront accessibles ensuite par la méthode classique.
ComplémentEn 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.
Insérer une image dans un article.
Sylvie Duczynski43
X - Insérer un liendans un article
X
Rappel Dans la barre d'outils de JCE, l'icône : "insérer un lien" se trouve dans la
quatrième rangée l'icône qui est à la gauche de celui-ci permet de supprimer le lien.
Graphique 12 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'outils, sur l'icône : insérer un lien
Sylvie Duczynski45
Insérer un liensupprimer un lien
insérer une imageInsérer une ancre
La fenêtre qui s'ouvre vous permet d'insérer différents types de liens :
Graphique 13 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.
Insérer un lien dans un article
Sylvie Duczynski46
URL pour les liens web
Pour une adresse mail
Choisir de préférence, pour les liens externes : nouvelle fenêtre
S'il n'est pas renseigné, c'est l'URL qui sera indiquée
Pour faire apparaître la cible du lien dans un popup
Après réglages, insérer
Pour les liens vers un article interne
La fenêtre que vous obtenez vous permet de parcourir ce chemin :
Graphique 14 insérer un lien interne
cliquez sur : Articles puis cliquez sur la catégorie où se trouve l'article vers lequel doit mener le
lien puis éventuellement sur la sous-catégorie .............................................. puis cliquez sur l'article
AttentionNe confondez pas, pour le choix du lien interne, les catégories et les articles.
Une 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 lignesle 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)
Insérer un lien dans un article
Sylvie Duczynski47
Cliquer sur : articles
puis sur la section voulue
puis sur la catégorie vouluepuis sur l'article voulu
À la fin, cliquer sur insérer
vous obtenez la fenêtre d'insertion :
Graphique 15 accès à l'explorateur de fichiers
cliquez sur l'icône indiquéLa fenêtre de l'explorateur de fichiers apparaît.
Insérer un lien dans un article
Sylvie Duczynski48
Cliquez ici pour accéder à l'explorateur de fichiers
Graphique 16 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émentSi le fichier que vous voulez insérer ne s'y trouve pas encore, il va falloir d'abord l'envoyer dans le dossier.Dans la fenêtre précédente, 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.
RemarqueSi, 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.
Insérer un lien dans un article
Sylvie Duczynski49
Cliquez sur ledossier voulu
Choisissez le fichier
insérez
Cliquer ici si le fichiern'a pas encore été
envoyé dans le dossier
Pour créer un nouveau dossier
XI - Insérer un lienpour faireapparaître unlecteur son ouvidéo
XI
Pour insérer un lien vers une vidéo (ou un son), on utilise la procédure classique pour insérer un lien vers un fichier :
On sélectionne la partie de texte ou l'image sur laquelle on veut insérer le lien.
On clique sur l'icône : insérer un lien. Dans la fenêtre : gestionnaire de liens, qui apparaît (première fenêtre ci-
dessous), on clique sur l'icône : explorer le serveur. La fenêtre : gestionnaire de fichiers apparaît (deuxième fenêtre ci-dessous).
Sylvie Duczynski51
Insérer un media.
Si la vidéo se trouve déjà dans un dossier sur le serveur, on choisit le dossier voulu, la vidéo voulue, on clique sur : insérer.
Sinon, après s'être positionné dans le dossier désiré, on clique sur l'icône : envoyer sur le serveur- on choisit , sur son PC, le media à envoyer, puis on l'ouvre et on clique
enfin sur : envoyer.
AttentionPour que la vidéo apparaisse dans une fenêtre popup :
Dans la fenêtre : gestionnaire de liens, cliquez ensuite sur l'onglet : popups
Insérer un lien pour faire apparaître un lecteur son ou vidéo
Sylvie Duczynski52
Explorer le serveur
Envoyer sur le serveur
classe popup
sélectionnez : popups JCE mediabox. n'oubliez pas de choisir les dimensions de la fenêtre de lecture (sinon, une
fenêtre insuffisante apparaîtra) et de choisir le type de contenu cliquez sur : insérer (ou modifier)
Exemple : Et voilà ce que cela donne :Près du morceau de texte choisi apparaît un petit sigle, formé de deux petits carrés (figurant deux fenêtres superposées)
Insérer un lien pour faire apparaître un lecteur son ou vidéo
Sylvie Duczynski53
Insertion d'une vidéo sur un lien.
En cliquant sur le lien on voit apparaître dans une fenêtre popup un lecteur qui permet de visionner la vidéo, ou d'écouter la bande son :
Pop up contenant un lecteur vidéo.
Insérer un lien pour faire apparaître un lecteur son ou vidéo
Sylvie Duczynski54
Lecteur son
Insérer un lien pour faire apparaître un lecteur son ou vidéo
Sylvie Duczynski55
XII - Créer des itemsde menu
XII
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, ...Voici, ci-dessous, les item de menu que vous utiliserez le plus couramment.Ils permettent un accès à différents contenus :Sous le type : Articles :
sous-type Article : lien vers un article sous-types Liste de toutes les catégories et Blog d'un catégorie :
affichage de toutes les catégories, ou affichage sous forme blog du contenu d'une catégorie
sous-type Liste des articles d'une catégorie sous-type articles archivés :
pour créer un accès aux articles qui ont été placés dans les archives....
Sous le type liens divers : sous-type URL externe : lien vers un site externe séparateur (un simple titre, sans lien, permettant de faire une séparation
dans le menu)....
Pour les autres types, ils sont plutôt du ressort de l'administrateur du site.
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 (ou lien Menu, à gauche), cliquez sur : Menu principal.
Sylvie Duczynski57
Graphique 17 menu principal
On voit apparaître les item et sous item du menu principal.
B. Pour créer un élément de menu
MéthodeEn 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 :
Image 4 Ajouter un élément de menu
1. Choisir le type d'élément de menu:
MéthodeIl faut d'abord choisir le type (article - catégorie - lien externe ... -> voir
Créer des items de menu
Sylvie Duczynski58
Cliquer sur l'onglet menu puis sur : Menu principal
On voit ici les éléments du menu principal
Cliquez sur : nouveau pour créer un nouvel élément de menu
Actions applicables sur l'élément de menu coché
l'introduction ci-dessus).Cliquez sur le rectangle bleu : Sélection (qui permet de sélectionner ou de changer le type d'élément de menu).La fenêtre de choix s'affiche :
Graphique 18 types de liens de menu
On clique sur le type désiré.On choisit fréquemment : Articles -> Article. Cela permet de mener vers un article qu'on a créé.
FondamentalPour créer un item menant vers un article, il faut cliquer sur : Articles, puis sur : ArticlePour créer un item menant vers une catégorie, il faut cliquer sur : Articles, puis sur :
Liste des articles d'une catégoriesi on veut simplement que s'affichent les titres, cliquables, des articles qu'elle contient.
Blog d'une catégoriesi on veut que s'affiche le contenu des articles qu'elle contient.
2. Compléter les différents champs.
MéthodeUne fois choisi le type, on revient à la fenêtre de création de l'élément de menu.
Créer des items de menu
Sylvie Duczynski59
En cliquant on développe les sous-types de liens
Par exemple, pour un élément type : Articles -> Article :
créer un élément de menu
Il faudra ensuite : compléter le titre de l'élément de menu (l'alias se complétera
automatiquement) choisir : Lien parent
exemple : l'élément "le mot du proviseur" a pour parent l'élément : "présentation"mais : l'élément : "présentation" n'a pas de parent, c'est un élément principal, quand on l'a créé, on a laissé sélectionné : haut.
choisir : fenêtre cible : fenêtre parente ou nouvelle fenêtre
3. Choisir le contenu vers lequel l'élément va pointer.
Fondamental : Si on a choisi le type "Article", ou le type "Blog d'une catégorie" ou "Liste des articles d'une catégorie"Il faut, selon le choix de type, cliquer, en-dessous de : Type de lien de menu, sur : Sélectionner un article -> Sélection (ou Sélectionner une catégorie, ou Catégorie principale) pour choisir vers quel article (ou catégorie) pointera le lien.
Créer des items de menu
Sylvie Duczynski60
On peut changer le type
Choisissez l'article en cliquant ici, l'URL secomplétera ensuite automatiquement en-dessous
Choisissez l'élément parent :(ce sera un sous-item de quel item ?)
Pour les liens externes :Ouvrir dans une nouvelle fenêtre
Ici, on a choisi le type : Articles → Article
Le réglage du niveau d'accès estexpliqué dans un chapitre ultérieur
Renseigner le titre
La fenêtre suivante apparaît :
Image 5 sélectionner l'article
En haut, on dispose de filtres de recherche.Cliquez sur l'article voulu.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 à gauche sous : Note).
Créer des items de menu
Sylvie Duczynski61
XIII - Utiliser lecomposantPhocamaps
XIII
Le composant phocamaps permet de créer des plans google maps, qui pourront ensuite être intégrés dans des articles.Pour cela, il faut :
d'abord créer un plan puis créer un marqueur (pointeur)
Une fois le plan et son marqueur créés, on pourra intégrer le plan phoca correspondant :
soit directement dans l'article soit sous forme de lien, qui, quand on cliquera dessus ouvrira un popup
contenant le plan.Pour pouvoir accéder au composant phocamaps (onglet composants), il faudra que votre administrateur vous en ait donné le droit.
Sylvie Duczynski63
Méthode : Accéder au composant Phocamaps.Pour accéder au composant phocamaps, au survol de l'onglet composants, vous voyez apparaître le composant phocamaps :
accès au composant phocamaps
Cliquez sur : panneau de contrôle.Vous y retrouvez les deux fonctionnalités principales : plans et marqueurs
panneau de contrôle du composant Phocamaps
Utiliser le composant Phocamaps
Sylvie Duczynski64
A. Créer un plan.
Dans le panneau de contrôle du composant Phocamaps (ou dans l'onglet cartes Phoca), cliquez sur : Plans.Une fenêtre s'ouvre vous présentant la liste des plans déjà créés :
liste des plans Phocamaps déjà créés
Cliquez sur : nouveau. La fenêtre de création d'un plan Phoca s'ouvre :
Création d'une carte Phoca
Pour obtenir la longitude, la latitude et le degré de zoom, cliquez sur : coordonnées.Une fenêtre type googlemaps s'ouvre.
Utiliser le composant Phocamaps
Sylvie Duczynski65
Renseignez le titre
Pour obtenir la latitude et la longitude, cliquez sur Paramétrer les coordonnées
Choisissez la taille de votre plan
Description de la carte : optionnel.
Vous pouvez : avec les différents curseurs, localiser la zone désirée :
localisation manuelle de la carte.
Utiliser le composant Phocamaps
Sylvie Duczynski66
ou bien entrer une adresse (en bas de la fenêtre de réglage), la localisation se fera automatiquement :
réglage des coordonnées en entrant une adresse.
Quand tous les réglages sont effectués, sauvez.
B. Créer un marqueur.
Il vous faut maintenant créer un pointeur. Contrairement aux apparences, il n'est pas créé automatiquement.Dans le panneau de contrôle du composant Phocamaps, cliquez sur : Marqueurs.
Utiliser le composant Phocamaps
Sylvie Duczynski67
Une fenêtre s'ouvre vous présentant la liste des marqueurs déjà créés :
liste des marqueurs déjà créés
Cliquez sur : nouveau. La fenêtre de création d'un marqueur Phoca s'ouvre :
créer un nouveau marqueur
Elle est analogue, en partie, à la fenêtre de création d'un plan. Vous pouvez récupérer les coordonnées du plan, puis affiner.N'oubliez pas de sélectionner le plan qui sera associé au marqueur.En bas, vous pouvez choisir la taille et l'aspect du marqueur.A la fin, sauvez.
AttentionAprès avoir créé votre plan et votre marqueur, revenez à la liste des plans (dans le
Utiliser le composant Phocamaps
Sylvie Duczynski68
panneau de contrôle, ou l'onglet de phocamaps, cliquez sur : Plans).Votre nouveau plan y figure. Sur la ligne qui le concerne, on vous indique le code correspondant, à intégrer dans votre article.
codes phocamaps à copier.
N'oubliez pas de copier le bout de code désiré.
C. Intégrer le plan phoca dans un article.
Il suffira, dans votre article, de copier le bout de code relevé précédemment.
Utiliser le composant Phocamaps
Sylvie Duczynski69
Ce code, intégré dans un article, provoquera l'affichage direct de la carte avec son marqueur
Ce code, intégré dans un article, provoquera l'affichage d'un lien qui ouvrira un popup contenant la carte et son marqueur
Ci-dessous, on vous présente ce qu'on obtient après avoir intégré le premier bout de code dans un article :
intégration d'une carte Phoca dans un article.
Utiliser le composant Phocamaps
Sylvie Duczynski70
Et ci-dessous, ce qu'on obtient après avoir intégré le second bout de code :
intégration d'un lien phoca et fenêtre popup correspondante
Utiliser le composant Phocamaps
Sylvie Duczynski71
XIV - Utilisation ducomposantPhocagallerie.
XIV
Créer ou, simplement utiliser une galerie d'images.Le composant phocagallery vous concerne, mais vous n'aurez peut-être qu'un accès partiel à ses fonctionnalités.Vous ne pourrez pas forcément créer une galerie d'images (pour cela, il faut pouvoir accéder au composant) si votre administrateur ne vous en a pas accordé la possibilité, mais vous pourrez, par contre, utiliser celles qui existent déjà.Dans ce cas, vous vous reporterez à la partie 2 ci-dessous.
Méthode : Accéder au composant : phocagallery.Au survol de l'onglet : composants, vous voyez apparaître le composant phocagallery :
Accès au composant Phocagallery
Sylvie Duczynski73
Cliquez sur : panneau de contrôle :
panneau de contrôle du composant Phocagallery
Vous allez maintenant pouvoir visualiser les galeries d'images existantes ou en créer une nouvelle. La méthode est détaillée ci-dessous.
A. Créer et garnir une galerie d'images.
Pour créer une nouvelle galerie d'images, il faut : d'abord créer une galerie et son dossier associé : première étape ensuite joindre à cette galerie les images désirées : deuxième étape
1. Première étape : créer une galerie.
MéthodePour créer une nouvelle galerie, dans le panneau de contrôle de Phoca gallery :
cliquez sur : Catégoriesla liste des galeries déjà créées apparaît :
liste de galeries déjà créées
Utilisation du composant Phocagallerie.
Sylvie Duczynski74
Sélectionner la galerie pour pouvoir exécuter l'une des actions encadrées ci-dessus
autoriser l'accèsà cette galerie
(autres rédacteurs)
Créer unegalerie
On ne peut supprimerune galerie que si
on a d'abord supprimétoutes les imagesqu'elle contenait
Publiercette galerie
Cliquer sur la galerie pour éditer ses caractéristiques
Cliquez ensuite sur : ajout
créer une nouvelle galerie
Complétez les différents champs.Attention ! Il est impératif que votre galerie soit associée à un dossier. Il faudra donc cliquer sur l'icône dossier pour choisir ou créer ce dossier.
Utilisation du composant Phocagallerie.
Sylvie Duczynski75
Renseignez le titre
On peut hiérarchiser les galeries (sous-galerie de ...)
Galerie autorisée et activée par défaut
Réglez les droits d'accès
Impératif : créez ou choisissez le dossier de la galerie
Réglages pour la géolocalisation de la galerie. On peut :- indiquer les coordonnées- ou les définir à l'aide d'une carte
Et on peut rédiger en-dessous une description de la galerie
Enregistrez après avoir complété les champs nécessaires
On peut ensuite définir le niveau de zoom
La fenêtre suivante apparaîtra :
Créer ou choisir un dossier galerie
Une fois les champs renseignés et les choix effectués, enregistrez votre galerie.La liste des galeries est à nouveau affichée. Vérifiez que votre nouvelle galerie y figure bien.Pour la prochaine étape, cliquez sur : images.
2. Deuxième étape : joindre des images à cette galerie.
MéthodeIl va maintenant falloir joindre des images à votre galerie.Cliquez, dans la page : liste des galeries, sur l'onglet : images. (ou bien, dans : composants, phocagallery,cliquez sur : images)
Utilisation du composant Phocagallerie.
Sylvie Duczynski76
ou bien, tapez le nom du dossier à créerpuis cliquez sur : Créer répertoire
Choisissez l'un des dossiers ci-dessus(en cliquant sur la flèche)
ajout d'images à la galerie
Remarque : vous pouvez effectuer vos ajouts d'images un par un en cliquant sur : ajout, mais l'ajout multiple d'images est plus pratique.Vous obtenez la fenêtre suivante :
contenu du dossier de la galerie
Ouvrez le dossier de votre galerie afin de vous y positionner. S'il contient déjà des images, vous allez les voir apparaître.Vous pourrez envoyer des images dans ce dossier, puis, après envoi et sélection de votre galerie et de ces images, vous remplirez alors votre galerie.
Utilisation du composant Phocagallerie.
Sylvie Duczynski77
Double-cliquez d'abordsur votre dossier pour l'ouvrir
Cliquez sur : ajout multiple
Suivez bien l'ordre des opérations indiqué sur la copie écran ci-dessous :
garnissage de la galerie
Vous verrez apparaître un message vous signalant la création des miniatures, puis vous verrez à nouveau la fenêtre d'affichage des images dans laquelle figureront maintenant vos nouvelles images, associées à leur dossier et leur galerie.
B. Joindre une galerie d'images à un article.
MéthodeDans l'espace édition, après avoir ouvert votre article, cliquez sur l'onglet : Phoca Gallery Image, en bas de la fenêtre d'édition.
Utilisation du composant Phocagallerie.
Sylvie Duczynski78
2Parcourez vos propres dossiers
choisissez les images puiscliquez sur : démarrer Upload
On voit apparaître iciau départ les imagesdéjà envoyées. Cellesque vous allez envoyermaintenant s'ajouteront
en-dessous
3Quand toutes vos images ont été envoyées
Cliquez devant pour les sélectionner
1N'oubliez pas de
choisir votre galerie
4Et pour finir
n'oubliez pasD'enregistrer
Une seule image à la fois
Plusieurs images à la fois
Renseignez le titre
insérer une galerie dans un article
La fenêtre d'insertion apparaît alors. Cliquez sur : Diaporama (c'est le choix le plus fréquent).
insertion d'un diaporama dans un article.
Choisissez vos réglages puis cliquez sur : insérer code.Le code nécessaire va être inséré dans l'article. N'oubliez pas de sauver.A la visualisation, vous verrez apparaître des images qui défileront
Utilisation du composant Phocagallerie.
Sylvie Duczynski79
Choisissez votre galerie
Choisissez les dimensionsdu diaporama
Choisissez la vitessede défilement :
500 : très rapide3000 : lent
Une fois les réglageseffectués, cliquez sur
insérer code
Cliquer sur l'onglet Phoca Gallery Image Cette fenêtre apparaît alors Cliquer alors sur : Diaporama
automatiquement à la vitesse voulue.
RemarqueDans la fenêtre d'insertion d'une galerie, vous voyez que vous avez d'autres possibilités que de faire apparaître directement un diaporama. Vous pouvez aussi faire apparaître :
un dossier correspondant à la galerie (choix : galerie), en cliquant dessus, on voit apparaître toutes les images.
directement toutes les images de la galerie (choix : images) une seule des images de la galerie (choix : image - sans s)
A vous d'essayer les différentes possibilités avec leurs différents réglages et de visualiser ainsi les différents rendus.
Utilisation du composant Phocagallerie.
Sylvie Duczynski80
XV - Compléments XV
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 de survol et effet pop up.
Méthode : Pour provoquer un changement d'image lors du survol. Cliquez sur l'outil d'insertion d'image Dans la fenêtre d'insertion, cliquez sur l'onglet : Rollover Cliquez dans : Mouseover (survol) et sélectionnez l'image que vous voulez
voir apparaître lors du survol en-dessous, cliquez dans Mouseout (sortie) et sélectionnez l'autre image,
celle qui apparaîtra par défaut Cliquez sur : insérer. 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éthodeCréer une bulle infoGrâce au plugin Tooltip GC, vous pouvez créer une bulle info.Il faut pour cela insérer un bout de code dans votre article, du style :{tooltip}déclencheur{end-texte}contenu de la bulle info{end-tooltip}déclencheur est le morceau de texte qui va "porter" l'infobulle.Pour régler finement l'aspect de l'infobulle, il faudra enrichir le code. Au lieu d'écrire {end-texte} tout court, on pourra écrire :{end-texte|w=350|offsetx=50|offsetx=50|tipd=1000|mood=800}
w : largeur de la bulle en pixels mood : durée de l'effet avant apparition de la bulle tipd : durée avant disparition de la bulle
Les trois paramètres précédents peuvent être réglés par défaut par votre administrateur dans l'onglet extension gestion des plugins, en sélectionnant le plugin : Content tootip GC.
offsetx : décalage horizontal en pixels
Sylvie Duczynski81
offsety : décalage vertical en pixels
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 cliquez sur l'icône : insérer un lien
Graphique 19 insérer un lien popup
Dans la fenêtre d'insertion des liens, cliquez sur l'icône : explorateur de fichiers (voir ci-dessus).
Compléments
Sylvie Duczynski82
1) Sélectionner l'image
2) cliquer sur : insérer un lien
Cliquer sur l'explorateur de fichiers
Image 6 choix du lien popup
Choisissez alors, dans le dossier voulu, l'image de grande taille. cliquez sur : Insérer cliquez, dans la même fenêtre, sur l'onglet Popups
Compléments
Sylvie Duczynski83
Image 7 popup sur une image
Dans : Type, sélectionnez : Popups JCE Mediabox Dans : Type de contenu , sélectionnez : Image Complétez les autres champs Cliquez sur : Mettre à jour Enregistrez.
Seule la petite image apparaîtra à priori. Lorsqu'on cliquera sur elle, un calque transparent s'ouvrira dans lequel apparaîtra la grande image.
RemarqueOn 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.Si on utilise le popup html, on ouvre une petite (on peut régler sa dimension) fenêtre de navigateur flottante dans laquelle apparaîtra, par exemple, le contenu du document vers lequel mène le lien.
Compléments
Sylvie Duczynski84
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
Dans la dernière rangée de la barre d'outils (à peu près au milieu), cliquer sur :
La fenêtre suivante apparaît :
Graphique 20 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.
Compléments
Sylvie Duczynski85
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' encadrementon peut mettre une image de fondon peut fixer individuellement les marges, intérieures et extérieureset on peut positionner très exactement sa « boîte ».
En décochant ici, on règle indépendamment la marge du haut, du bas, de gauche et de droite
ConseilPour revenir, à postériori, sur une boîte déjà créée :
Graphique 21 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.
Compléments
Sylvie Duczynski86
On a cliqué ici
On voit ici, dans : chemin,qu'on se trouve bienà l'intérieur de la div.
En cliquant sur l'icône AA,on va pouvoir voir et rectifierles réglages.
