Prise en main cms Joomla (Univ Bejaia).pdf

UVERSITE A. MIRA - BEJAIA

Support Web Administration et gestion des portails web des facults

- Universit A.Mira Bjaia -

Prise en main de CMS Joomla Exploitation des ressources

Recommandations et Rgles dusage

[ T a p e z l ' a d r e s s e d e l a s o c i t ]

DIRECTION DE LA COMMUNICATION - 2013 -

Chapitre 01 PRISE EN MAIN DE CMS JOOMLA

1

Prsentation de CMS Joomla Joomla est un systme de gestion de contenu (en anglais, CMS, pour Content Management system) Open source sous licence GNU/GPL. Il permet de crer un site Internet dynamique et de le grer grce une

interface dadministration. Un systme CMS se base sur le couple Frontend et Backend. Frontend (partie vitrine) : est simplement la partie visible de votre site qui correspond la page d'accueil

de votre site et aux autres pages ainsi qu'aux diffrents contenus associs telles que les voient les visiteurs. Backend (partie arrire-boutique): contient linterface de gestion des pages par ladministrateur. Les

activits de Backend comprennent la configuration, la maintenance, la cration des statistiques et des nouveaux contenus. Le Backend est situ une adresse Web diffrente de la page daccueil du site (donc

du Frontend). Ladministration du site se droule dans la partie arrire-boutique (Backend). Vous accdez la page daccueil de ladministration par ladresse suivante :

www.univ-bejaia.dz/faculte/ [Nom de facult]/administrator

Dans le cas de la facult de mdecin, ladresse relle devient : www.univ-bejaia.dz/Fac_Technologie/administrator

- Ouverture de session pour ladministration de Joomla -

Saisissez votre Identifiant et Mot de passe pour accdez la page daccueil de ladministration.

La page daccueil propose une barre des menus, une barre doutils avec des boutons et des onglets de pages doptions, cest--dire une interface conforme aux canons actuels de lergonomie.


2

- Page daccueil de linterface dadministration de Joomla - La barre de menus Comme la partie publique du site Web, la partie administrative de Joomla! Est constitue de plusieurs

lments. La barre des menus en haut (voir figure au-dessus) prsente les diffrents menus. Du ct droit se trouve

quatre lments : un lien direct vers le site Web (Prvisualiser) ;

un tmoin daffichage du nombre de nouveaux courriels reus ; un tmoin daffichage du nombre dutilisateur actuellement connect ; le bouton Dconnexion.

La barre doutils Juste sous la barre des menus se trouve la barre doutils (voir figure au-dessus). Voici par exemple celle

des lments du menu principal Main Menu.

Gestion des mdias

La rubrique de gestion des mdias peut tre compare un explorateur de fichiers combin un programme de tlchargement FTP. Les formats des fichiers manipulables sont trs nombreux.

Vous pouvez grer les fichiers portant les extensions suivantes : 1. .csv, .doc, .odg, .odp, .ods, .odt, .ppt, .txt, .xls (formats bureautiques) ;

2. .bmp, .epg, .gif, .ico, .jpg, .pdf, .png, .swf et .xcf (formats graphiques). Vous pouvez tlcharger des fichiers vers votre serveur en les distribuant dans des sous-dossiers. Ce

gestionnaire est trs pratique lorsque vous disposez des droits dadministration sans avoir un accs FTP.


3

- Interface de gestion des mdias -

Cet outil offre deux volets :

Les Miniatures. Elles permettent de voir des aperus rduits des fichiers. Les Dtails. Affichent le nom et la taille des fichiers sous forme de liste. Vous constatez quil y a un volet pour les dossiers gauche et un volet pour les fichiers. Ds que vous

slectionnez un dossier gauche, vous voyez apparatre les fichiers quil contient droite. Loutil permet de grer tous les types de fichiers que Joomla sait exploiter en standard. Voici les fonctions disponibles dans ce gestionnaire :

Vous pouvez crer et supprimer des dossiers (la suppression nest possible quen vue dtaille) ; vous pouvez tlcharger un ou plusieurs fichiers et les supprimer (la suppression nest elle aussi possible quen vue dtaille).


4

Cration dun sous-dossier Le volet principal des fichiers comprend dans sa partie suprieure un champ affichant le chemin daccs au dossier courant. sa droite se trouve un champ de saisie suivi dun bouton CRER DOSSIER. Saisissez le nom de votre sous-dossier puis cliquez sur le bouton. Pensez ensuite vous rendre ventuellement dans ce sous-dossier.

- Cration dun sous-dossier -

Rapatrier un ou plusieurs fichiers La partie infrieure de la fentre contient un bouton parcourir qui donne accs une bote de dialogue standard du systme dexploitation pour dsigner un ou plusieurs fichiers.

- Transfert de fichiers -

Vous navez qu cliquer sur le bouton lancer le transfert pour copier les fichiers rcuprs dans le dossier courant. Ils sont ensuite prsents sous forme de miniatures.


5

Gestion des articles Le sous-menu CONTENU > GESTION DES ARTICLES donne accs la vue globale des articles.

- Interface daccs la gestion des articles -

Vous pouvez filtrer la liste au moyen des quatre listes den-ttes de colonne, par section, catgorie, auteur et tat. Vous disposez galement dun champ de recherche pour retrouver des articles en fonction de leur titre.

Interface de gestion des articles


6

En dessous de la liste se trouve la barre de navigation, qui permet de passer dune page lautre. Un paramtre permet de choisir le nombre des lignes par page daffichage. Par dfaut, la valeur est la mme que celle dfinie dans les paramtres.

- Interface de gestion des articles -

Vous pouvez modifier lordre de tri en cliquant dans len-tte dune des colonnes SECTION, CATGORIE, AUTEUR et TITRE. Description de la liste des articles gauche de chaque ligne une case cocher permet de slectionner llment puis de lui appliquer une

action. La case cocher de len-tte de la colonne permet de slectionner tous les articles de la liste.


7

Vous pouvez cliquer dans le titre dun article pour basculer en mode dition de son contenu.

- Exemple ddition dun article - De retour dans laffichage dans la liste, nous trouvons les options suivantes pour chaque article : Publi : Permet de savoir si larticle est visible sur le site (coche verte) ou non (croix rouge). Un article peut ne pas tre visible mme sil est Publi parce que sa date de fin de publication est passe. Llment a dans ce cas t automatiquement archiv. En bas de la liste se trouve la lgende des icnes de ltat de publication (en suspens, courant, expir, non

publi, archiv). Page daccueil : Permet de savoir si larticle est visible sur la premire page du site Ordre: Elle permet dintervenir sur lordre des articles en utilisant les petites flches vertes. Vous pouvez galement saisir un nouveau numro dordre dans le champ associ, en cliquant ensuite sur la petite icne reprsentant une disquette pour enregistrer la modification.

Accs : Affiche surtout des mentions Public. En cliquant sur la mention, vous basculez tour tour entre les trois tats Public, Enregistr et Spcial.

Section : Elle indique la section laquelle appartient larticle. Vous pouvez cliquer sur le nom de section pour basculer en mode dition. Les articles non lis une section sont marqus comme Non catgoriss.

Catgorie : Elle correspond des sous-sections. En cliquant sur le nom, vous basculez en dition de la catgorie.

Auteur : Rappelle le nom de lauteur du contenu. Si vous cliquez sur le nom, vous accdez la gestion de cet utilisateur.


8

Date : Rappelle la date de cration de larticle. ID : Cest un Identifiant unique pour larticle dans la base de donnes. Cette valeur est utilise dans ladresse URL qui dsigne larticle. Boutons de gestion des articles Vous pouvez appliquer diffrents traitement un ou plusieurs articles slectionns dans la liste.

- Les boutons disponibles dans la gestion des articles - Archiver et Dsarchiver Comme son nom lindique un archive sert conserver des contenus en rserve mais ils ne sont plus consultables par les visiteurs. Vous pouvez envoyer un article dans ce stock en cliquant sur le bouton

ARCHIVER. Larticle apparat ensuite sur un fond gris dans la liste

- Exemple darticles archivs -

Publier et Dpublier : Ces deux boutons permettent de rendre un article visible ou non sur le site. Dplacer et Copier : Ces deux boutons permettent de dplacer ou de copier un ou plusieurs articles vers une autre catgorie ou une autre section.

Corbeille : Permet denvoyer un ou plusieurs articles dans la Corbeille pour suppression ultrieure.

Paramtres : Ce bouton fait apparatre une fentre flottante sur fond assombri qui runit tous les paramtres de la configuration gnrale relative aux articles.


9

Cration dun article Dans la liste des articles, cliquez sur le bouton NOUVEAU. Vous voyez apparatre une fentre ddition

contenant une vaste zone de saisie sur la gauche.

- Exemple de cration dun article - Saisissez un titre pour larticle (par exemple Prsentation de dpartement de Mines) et ventuellement un Alias (par exemple presentation-de-departement-de-mines). Saisissez ensuite le texte de larticle ou bien rcuprez quelques blocs de texte dans un autre fichier (vous pouvez copier/coller le texte). Voici comment configurer les autres options :

Section : Facults; Catgorie : technologie ; Publi : Oui ;

Page d'accueil (Frontpage) : Non. Cliquez sur le bouton APPLIQUER puis basculez dans la partie publique de votre site Web.

Insertion des images dans larticle Joomla exploite dabord les fichiers des images qui ont t ajoutes sa zone de mdia. Vous pouvez les y

slectionner directement pour les insrer dans un article. Une fois que vous tes devant lditeur de contenu, placez le curseur dans le texte lendroit o limage doit apparatre. Cliquez ensuite dans le bas de la fentre sur le bouton IMAGE pour faire apparatre une

bote spcifique dinsertion


10

- Bote dinsertion des images - Vous pouvez choisir nimporte quelle image de la zone des mdias. Si limage ny est pas encore, vous

pouvez la faire ajouter en utilisant le bouton PARCOURIR dans le bas de la bote. Choisissez ventuellement un sous-dossier puis slectionnez limage insrer et cliquez sur le bouton INSRER en haut droite. Notez que vous pouvez donner un titre limage avant de linsrer.

Vous voyez ensuite apparatre limage dans le texte

- Exemple dimage insre dans un article


11

Gestion des Menus Cette commande donne accs une vue globale des menus actuellement dfinis. Vous pouvez accder aux contenus des sous-menus par lune des commandes MENUS > MAIN MENU, OTHER MENU, etc. La barre doutils gauche comprend : Copier : Permet de copier un menu en le slectionnant vous devrez lui donner un autre nom ainsi que le nom du module lui correspondant. Supprimer : permet de supprimer le menu slectionn. Editer : permet dditer le menu (faire des modifications). Nouveau : permet de crer un nouveau menu. Vous pouvez aussi cliquer directement dans la ligne correspondante au menu dsir dans cette vue globale.

- Gestion des menus -

Cration dun nouveau menu : Pour crer un nouveau menu, il ya deux tapes faire :

1. Crer un nouveau menu dans la gestion des menus et lui crer ses liens. 2. Crer le module qui correspond ce menu afin de permettre au menu dtre affich sur le site. Et les menus peuvent tres horizontales ou verticales et ils peuvent safficher dans plusieurs positions

gauche, droite

Nous allons maintenant crer un menu et le module associ afin d'y placer des liens vers les articles ou les catgories des articles que nous avons crs.


12

-Cration dun menu-

Le champ Nom du menu (exemple Menu test) est le nom utilis par Joomla pour identifier le menu dans le code, vous ne devez pas utiliser d'espace ou de caractres spciaux pour ce nom. Le champ Titre du module (exemple Test) est le nom tel qu'il sera vu sur le site par vos visiteurs. Renseignez les deux champs puis cliquez sur le bouton Sauver:

- Nouveau menu - Ct des modules du site (menu Modules / Modules).Vous pouvez constater que le module (Test) a t cr automatiquement, qu'il n'est pas publi (non visible sur le site) et qu'il est en position Left. Vous


13

pouvez le publier en cliquant sur la croix rouge et lui changer la position daffichage et votre menu serra visible. En cliquant sur le module de la figure qui suit apparait, on y trouve : Dtails : permettent de changer le nom, la position ainsi que lordre daffichage. Affectation de menu: Choisir les pages ou le module menu serra visible. Paramtres : liste des diffrents paramtres spcifiques chaque type de module.

- Module correspondant au menu -


14

Ajout des liens dans un menu : Slectionnez le menu dans lequel vous allez ajouter des liens (menu Menu) vous trouverez des liens dj crs. Cliquez sur le bouton NOUVEAU.

- Cration dun nouveau lien -

Tout lment de menu possde un type. Un lment peut par exemple faire rfrence un composant intgr Joomla ou un lment de contenu par exemple un article. Il peut aussi reprsenter un lien

menant un site Web externe.

- Les lments dun menu -


15

Commencez par choisir le type de llment parmi les diffrents domaines proposs. Pour ne pas nous aventurer dans quelque chose de trop complexe, nous allons choisir un lien vers un article prcdemment

cre.

- Slection dun lment dun menu - Vous serrez rediriger vers la page de la figure sui suit :

- Lien vers un article -


16

Ce formulaire compte trois sections : Type de l'lment de menu ;

Dtails de llment de menu ; Paramtres Basique, Composant, Systme. dition de llment de menu Dtails : Titre : Cest le nom du menu tel quil apparat sur le site Web. Alias : Il sagit dun nom ajout dans ladresse URL aprs le nom de domaine, dans un but doptimisation par rapport aux moteurs de recherches. Lien : Ce paramtre concerne le composant, cest--dire la portion de ladresse URL qui est situe aprs le nom de domaine. Dans notre exemple, ce lien scrit /index.php?option=com_weblinks&view=categories Afficher dans : Cette option modifie le lieu dapparition de llment, ce qui le dplace dans un autre menu. lment parent : Vous pouvez bien sr mettre en place une structure arborescente des menus et des sous menus. Dans la liste, la mention Haut signifie que llment va apparatre au plus haut niveau. Les autres lignes correspondent des sous-menus. Publi : Permet de rendre llment visible ou non. Ordre : Vous choisissez ici la position de llment relativement aux autres. Niveau daccs : Vous pouvez dcider dautoriser laccs tout le monde, aux utilisateurs enregistrs ou seulement ceux du groupe spcial dition de llment de menu Paramtres : Les paramtres dun lment de menu dpendent de son type. Un lien simple contient moins de paramtres quune liste personnalisable ou que le lien de la page daccueil.

Dans le cas dun article aprs avoir donn un titre au lien il vous donne la main de slectionner larticle dsir.

- Lien vers un article - Et pour terminer cliquer sur le bouton sauver et quitter et voila vous avez cre votre lien.

Chapitre 02 EXPLOITATION DES RESSOURCES

17

En tant qu'administrateur du Web vous souhaiterez certainement vous munir d'outils si possible performants

et gratuits qui vous accompagneront dans votre tche, on citera comme exemple le besoin de mettre certains

fichiers (pdf, word, image,) dans votre espace sur le serveur pour faire des liens vers ces derniers ou autres.

Pour cela est il ncessiter dutiliser le protocole FTP pour lenvoi et la rception de fichiers et on vous

recommande dutiliser le client FTP(Filezilla).

FTP

FTP (de l'anglais File Transfer Protocol) est l'un des protocoles les plus anciens et les plus utiliss que l'on trouve sur Internet de nos jours. Son but est de transfrer de manire scurise des fichiers entre les ordinateurs htes d'un rseau sans que l'utilisateur ne doive se connecter directement l'hte distant ou ne doive savoir comment utiliser le systme distant. Ce protocole permet aux utilisateurs d'accder des fichiers sur des systmes distants en utilisant un ensemble standard de commandes simples.

Pour laccs ftp nous utiliserons FileZilla qui est un client ftp vous permettant daccder a votre espace (dossiers) afin denvoyer ou rcuprer un document.

- Interface Filezilla -

Pour cela vous saisirez les champs : Hte : univ-bejaia.dz Identifiant : login que nous allons vous transmettre Mot de passe : mot de passe. De cette faon vous aurez accs votre espace (facult). Linterface de Filezilla est reprsenter en deux partie ; celle de gauche correspond au(x) disque(s) prsent(s) sur votre ordinateur est celle de droite reprsente votre espace sur le serveur.

Pour transfrer un fichier de votre ordinateur vers le serveur on navigue jusqu' lemplacement de fichier en cliquant sur le bouton droit de la souris un menu apparait et on choisie Envoyer et le fichier se transfrera vers le serveur.

Chapitre 02 EXPLOITATION DES RESSOURCES

18

- Transfrer un fichier -

Pour dplacer un fichier du serveur vers votre ordinateur, se dplacer jusqu' lemplacement du fichier cliquer sur le bouton droit un menu apparait, choisir Tlcharger et le fichier se transfrera sur votre

ordinateur.

- Tlcharger un fichier -

Chapitre 03 RECOMMENDATIONS ET REGLES D'USAGE

19

Recommandations et rgles dusage Afin d'homogniser l'ensemble des publications web sur les diffrents portails des facults, conserver une identit graphique tout au long de la visite de linternaute et lors du passage dune rubrique

une autre. Nous vous recommandons d'appliquer les rgles d'usage qui suivent.

Police de caractres La couleur du fond sur lequel s'inscrit le texte est blanc. Le texte est en gris (#333333) sur fond blanc.

La police utilise (font-family: Arial,Helvetica) taille(font-size: 12px).

police Style taille Couleur

Titre darticle Arial,Helvetica Normal 22px #006699

Corps du texte Arial,Helvetica Normal 12px #333333

Liens textuels Arial,Helvetica Normal 13px #006699

Liens textuels visits Arial,Helvetica Soulign 13px #006699

Texte des actualits Arial,Helvetica Normal 12px #777777

Tableaux

- Bordure : 1px solid #FFFFFF

- Titre : Arrire plane #E9E9E9, Police de caractres Arial,helvetica, Style gras, taille 9px

- Contenu: Arrire plane #E8EDFF, Police de caractres Arial,helvetica, Style normal, taille 9px

- Cellule : hauteur (height) 20px , largeur(width) li a le contenu de la cellule

- Exemple dun tableau -

Elments graphiques

- Les images et photographies ne doivent pas excder un poids de 50 Ko pour allger les temps de chargement des pages.

- Utiliser des formats gratuits du type JPEG, JPG, GIF, PNG

- Faire attention aux droits d'auteurs et droit l'image des personnes photographies

- Modrer la taille et la qualit de vos images

Animations

Chapitre 03 RECOMMENDATIONS ET REGLES D'USAGE

20

- Ne pas abuser des animations. Elles doivent souligner des lments d'une page vritablement importants

pour le lecteur - Les animations ne doivent pas tre trop voyantes car elles attirent le regard et gnent la lecture.

La mise jour des pages Toutes informations publies doivent tre mises jour rgulirement. Les informations primes sont

bannir !

Mise en page

- Attention l'abus de caractre gras est un faux ami et rend la lecture indigeste

- Faire simple, clair et comprhensible

- Placer les informations importantes en haut de page et accessibles en un minimum de clics

- Ne pas trop charger les pages : arer les textes

- Eviter les pages trop longues avec ascenseurs

- Vrifier la mise en place sur diffrentes plates-formes et sur diffrents navigateurs avec diffrents rsolutions d'cran

- Eviter les fonds de couleurs criardes

Menu

la mise jour des liens se fera uniquement dans le menu vertical.

- type module utiliser c'est "mainmenu"

- position c'est gauche (left)

Contenu

- crire des phrases courtes la construction simple

- Vrifier lorthographe des noms propres, les numros de tlphone, adresses lectroniques, qui sont de

multiples sources derreurs

- Doser la longueur des lignes

- viter les abrviations

- Mettre le moins possible de majuscules

- viter au maximum les sigles

Pour tout autre information et suggestion n'hsitez pas prendre contact avec la direction de la

communication (webmaster & Infographe)

- [email protected] - [email protected]

Documents

Prise en main cms Joomla (Univ Bejaia).pdf