Vous êtes sur la page 1sur 21

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

[Tapez l'adresse de la socit]

DIRECTION DE LA COMMUNICATION
- 2013 -

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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.

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

- 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.

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

- 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).

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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.

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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.

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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.

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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.

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

- 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

10

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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.

11

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

-Cration dun menuLe 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

12

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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 -

13

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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 -

14

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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 -

15

Chapitre 01

PRISE EN MAIN DE CMS JOOMLA

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.

16

Chapitre 02

EXPLOITATION DES RESSOURCES

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.

17

Chapitre 02

EXPLOITATION DES RESSOURCES

- 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 -

18

Chapitre 03

RECOMMENDATIONS ET REGLES D'USAGE

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
Corps du texte

Arial,Helvetica
Arial,Helvetica

Normal
Normal

22px
12px

#006699
#333333

Liens textuels

Arial,Helvetica

Normal

13px

#006699

Liens textuels visits


Texte des actualits

Arial,Helvetica
Arial,Helvetica

Soulign
Normal

13px
12px

#006699
#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

19

Chapitre 03

RECOMMENDATIONS ET REGLES D'USAGE

- 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)
- webmaster.bejaia@univ-bejaia.dz

- infographe@univ-bejaia.dz

20