1.

TABLE DES MATIRES

1.

Table des matires ......................................................................................... 4

2.

Introduction ..................................................................................................... 7
2.1.

Concours .................................................................................................................. 8

3.

Prsentation du projet............................................................................... 10
3.1.

Objectifs................................................................................................................... 10

3.2. Public cible ............................................................................................................. 10

3.3. Plan du site............................................................................................................. 11

4.

Quest ce quun CMS ?................................................................................. 12

4.1.

5.

Principales caractristiques ........................................................................... 12

Joomla! ............................................................................................................. 14
5.1.

Historique .............................................................................................................. 14

5.1.1.

Versions de Joomla!..................................................................................................... 15

5.2. Critiques .................................................................................................................. 15

5.2.1.

Ce que les internautes apprcient dans Joomla!...................................................... 15

5.2.2.

Ce que les internautes reprochent Joomla! ........................................................... 16

5.3.

Dfinition de trois termes ne pas confondre ........................................ 16

5.4. Prsentation du logiciel .................................................................................... 17

5.4.1.

5.5.

Menu .............................................................................................................................. 19

Types dutilisateurs............................................................................................. 22

5.6. Modules ................................................................................................................... 23

5.6.1.

Types de modules ......................................................................................................... 23

5.6.2.

Modules installs par Joomla!.................................................................................... 23

5.6.3.

Options gnrales des modules .................................................................................. 24

6.

Logiciels utiliss ........................................................................................... 26

6.1.

Dreamweaver 8 .................................................................................................... 26

6.2. Filezilla 2.2.29....................................................................................................... 26

6.3. Photoshop CS3...................................................................................................... 27
4

6.4. Top Style 3.1 ........................................................................................................... 28

6.5. WAMP5 version1.6.5 .......................................................................................... 28

7.

Dveloppement du projet ......................................................................... 29

7.1.

Choix de Joomla! ................................................................................................. 29

7.2.

Installation............................................................................................................. 29

7.2.1.

tapes de linstallation ................................................................................................ 29

7.3.

Utilisation des modules .................................................................................... 32

7.4.

Cration dun nouvel utilisateur ................................................................... 33

7.5.

Gestion des articles............................................................................................. 36

7.5.1.

Suppression dun article .............................................................................................. 36

7.5.2.

Cration dune section ................................................................................................. 36

7.5.3.

Cration dune catgorie.............................................................................................. 37

7.5.4.

Cration dun article .................................................................................................... 38

7.5.4.1

Paramtres de larticle .............................................................................................. 38

7.5.4.2 Insertion dune image ............................................................................................... 39

7.5.4.3 Insertion dune vido ................................................................................................ 40

7.6.

Menus ....................................................................................................................... 41

7.6.1.

Suppression dun menu ............................................................................................... 41

7.6.2.

Cration dun menu ..................................................................................................... 42

7.6.2.1

Ajout de liens dans un menu ................................................................................... 43

7.6.2.2 Cration dun sous-menu ......................................................................................... 44

7.6.2.3 Insertion de liens externes ....................................................................................... 45

7.7.

Cration dun formulaire de contact ........................................................... 47

7.8. Insertion dune galerie photos ....................................................................... 49

7.8.1.

Installation .................................................................................................................... 50

7.8.2.

Cration de la galerie ................................................................................................... 50

7.8.3.

Paramtres de la galerie .............................................................................................. 51

7.9.

Affichage du nom du site .................................................................................. 53

7.10.

Charte graphique ............................................................................................ 54

7.10.1.

Installation dun template ........................................................................................... 55

7.10.2.

Modification du template ............................................................................................ 55

7.10.2.1

Page index.php .................................................................................................. 55

7.10.2.2 Favicon ..................................................................................................................... 56

55

7.10.2.3 Choix des couleurs ? ............................................................................................... 56

7.10.2.4 Fond .......................................................................................................................... 57
7.10.2.5 Entte........................................................................................................................ 57
7.10.2.6 Contenu .................................................................................................................... 58
7.10.2.7

Menus ....................................................................................................................... 58

7.10.2.8 Pied de page ............................................................................................................. 58

7.11.

Plan du site ........................................................................................................ 58

7.11.1.

Installation .................................................................................................................... 59

7.11.2.

Paramtres .................................................................................................................... 59

7.11.3.

Cration du lien ............................................................................................................ 59

7.12.

Hbergement .................................................................................................... 60

8.

Glossaire/abrviations.............................................................................. 61

9.

Conclusion....................................................................................................... 64

10.

Aperu du site ................................................................................................ 65

11.

Abstract ............................................................................................................ 66

11.1.

Version franaise ............................................................................................ 66

11.2.

Version anglaise .............................................................................................. 66

12.

Bibliographie ................................................................................................. 67

12.1.

Livre...................................................................................................................... 67

12.2.

Personnes ressources.................................................................................... 67

12.3.

Document lectronique (PDF)................................................................... 67

12.4.

Sites Internet .................................................................................................... 67

2.

INTRODUCTION
Mon travail de fin dtudes sintitule Ralisation dun site sur les liens entre

lactivit sportive (rugby) et la sant somatique .

Comment ai-je choisi ce sujet ? Pour mon travail de fin dtudes, je dsirais
raliser un site internet. Encore fallait-il trouver un commanditaire qui accepterait
quil soit le fruit dun travail de fin dtudes.
Cest lors dune rencontre avec les professeurs de la coordination dcriture
Multimdia que ce sujet ma t propos. Dans le cadre de son travail de fin dtudes,
Victor Bastin, lve en 3e anne du baccalaurat en Communication dsirait sassocier
quelquun pour mettre en page son travail.
En effet, il participe au concours de lOlympic Health Foundation (voir ci-dessous).
Le titre de son travail est Rugby, sport de brutes jou par des gentlemen ? Quelle
image nous offre-t-on ?
Quelques jours plus tard, nous nous sommes rencontrs et nous avons discut
de ce quil souhaitait exactement. Aprs y avoir rflchi, jai accept.
Ce rapport se divise en deux parties.
-

Dans un premier temps, je vais dcrire le concours auquel nous participons.

Jexpliquerai ce quest un CMS et je mtendrai plus particulirement sur
Joomla! que jai utilis pour raliser le site. Je donnerai galement quelques
explications sur les logiciels utiliss.

Ensuite, je dcrirai la mthode utilise pour raliser le site, comment

ladministrer, comment crer un nouvel utilisateur

2.1.

Concours

Ce concours est organis par lOlympic Health

Foundation (OHF), une initiative du Comit Olympique
et Interfdral Belge (COIB). Celui-ci dveloppe son
action grce au soutien du monde politique, des
reprsentants des milieux acadmiques et des affaires.
Cette fondation a pour but de contribuer au dveloppement dune hygine de vie
saine de la population et en particulier dans les tranches dge de six dix-huit ans.
LOHF tente de dmontrer quel point lactivit physique influence la sant. En
effet, comme on peut le lire dans la charte une activit physique rgulire constitue
le fondement dune hygine de vie saine. Il faut prciser que lexpression activit
physique ne signifie pas forcment sport de haut niveau. Ce sont galement des
efforts lgers ainsi que des sports rcratifs.
Lactivit physique rgulire est donc le thme central autour duquel lOHF
souhaite dvelopper diverses initiatives : tudes et analyses scientifiques, actions
dinformation et de sensibilisation ainsi que des projets concrets. Le public cible est
principalement compos de jeunes et de leurs parents, dcoles via les professeurs de
gymnastique ainsi que de ditticiens, de nutritionnistes, de mdecins et dautorits
comptentes.
LOHF propose aux hautes coles et universits de Belgique de dvelopper des
travaux scientifiques abordant les thmes suivants : la relation entre une activit
physique rgulire et
-

la sant somatique,

la sant sociale,

la sant et alimention,

la sant psychique,

la sant et socioconomie.

Rsum de lOlympic Health Foundation Charte quon peut retrouver ladresse suivante :
http://www.olympic.be/Pub/OHF/OHF-Charter-fr.pdf
1

Cette initiative a pour objectif de rassembler diverses tudes afin dassurer une
large mdiatisation de limportance dune hygine de vie saine.
Pour que cette promotion soit efficace, il faut quil y ait une collaboration entre
toutes les parties concernes : les parents, les consommateurs, les ducateurs, les
acteurs conomiques et politiques ainsi que les experts. Trois lments ont donc un
rle primordial : linformation, la responsabilisation et la sensibilisation.
Pour raliser ses objectifs, lOlympic Health Foundation considre que le monde
des affaires est un partenaire indispensable. Toutefois, la coopration se fait toujours
en dehors de tout objectif commercial ou marketing. Tous les membres sengagent
respecter le contenu de la charte de lOHF.
Victor Bastin a choisi le thme visant montrer le lien entre lactivit physique
et la sant somatique. Grand fan de rugby mais galement joueur, il a dcid de se
concentrer sur son sport de prdilection. Le sujet de son travail de fin dtudes est
Rugby, sport de brutes jou par des gentlemen ? Quelle image nous offre-t-on ?

3.

PRSENTATION DU PROJET
3.1.

Objectifs

Lobjectif principal de ce projet est de raliser un site qui soit agrable

regarder et qui puisse tre facilement mis jour par quelquun qui na aucune
connaissance dans le domaine du web.
Quand jai discut pour la premire fois avec Victor, nous avons rflchi au futur
contenu du site. Nayant aucune connaissance du web, ses consignes taient claires et
simples : raliser un site attrayant dans lequel il pourrait facilement insrer le
contenu de son travail. Pour agrmenter cela, il souhaitait pouvoir afficher des vidos
et disposer dune galerie photos.
Le fait de voir Victor tous les jours ma aide dans le dveloppement du site. En
effet, nous avons tous deux effectu notre stage la Maison des Sports, situe Lige.
Ceci ma permis de lui soumettre rgulirement lavance du travail.

3.2.

Public cible

Gnralement, un site est conu pour une catgorie dutilisateurs. Cibler les
visiteurs est une tape importante lors de la cration dun site. En effet, laspect visuel
et le contenu dpendent en grande partie du public cible.
Quand jai demand Victor quel serait le public vis, il ma rpondu tous les
rugbymen mais aussi tous ceux qui sont intresss par ce sport ou sceptiques vis--vis
du rugby . Toutefois, si on sen rfre la charte de lOFH, on peut dclarer que le
public cible est assez vaste.
Comme le site sadresse un large public, il fallait donc de raliser un site
simple, avec des informations facilement accessibles par tous.

10

3.3.

Plan du site

Menu Le rugby

Menu Les blessures

Accueil (Introduction)
Le rugby
Historique
Comptitions
Folklore
Haka
Chants
3e mi-temps
Bagarres
Formes de rugby
7, 13, 15 !
Professionnel vs amateur
Le cas belge
Image du rugby
En Belgique
Ailleurs
Rugby dans la presse
En Belgique
Ailleurs
Rugby et pub
Rugby et B.D.

Interviews
Interview 1
Interview 2
Conclusion
Lexique
Les blessures
Introduction
Prsentation
Comparaisons
Conclusions
Conclusions
Menu horizontal

Accueil
Galerie photos
Vidos Contacts
Plan du site
Administration
Liens

Rugby
Sport et sant

4.

QUEST CE QUUN CMS ?

CMS est lacronyme de lexpression anglaise Content Management System ,

que lon peut traduire en franais par systme de gestion de contenu .

En rsum, cest un logiciel web qui, partir dun navigateur Internet, permet de
crer et grer un site web dynamique. Le but du CMS est de permettre lutilisateur
de pouvoir grer un site sans connaissance particulire en informatique.
Le CMS est vu par les fournisseurs de contenu comme une interface (protge
par mot de passe) qui permet de grer le site. Il existe de nombreux CMS, ceux-ci se
diffrencient entre autres par leur complexit, leur prix, leur langage de
programmation, leur licence d'utilisation, leurs options et leurs extensions.

4.1.
-

Principales caractristiques

La maintenance (cration, dition, gestion du contenu) se fait partir de

nimporte quel navigateur web (Internet Explorer, Opra, Firefox, Safari),
quel que soit lOS (Windows, Mac, Linux)

Il nest pas ncessaire de possder des connaissances particulires en HTML.

Les CMS disposent dune interface dadministration qui permet de grer
facilement du contenu.

Plusieurs utilisateurs peuvent travailler sur le mme site ou une partie de

celui-ci. Il est possible de paramtrer diffrents types dutilisateurs qui on
attribue un rle et un accs spcifiques. Par exemple, un rdacteur pourra
rdiger et grer les articles mais ne sera pas autoris modifier les options du
site. Ceci permet dviter des erreurs dans un contenu non autoris.

Le design du site (mise en page par CSS) et le contenu sont modifiables

sparment. Cela assure une cohrence graphique dans tout le site.

Le contenu du site est gnralement stock dans une base de donnes2. Pour
la mise en ligne, il faut donc veiller choisir un hbergement acceptant au
moins une base de donnes et un langage de script.

Grce la sparation du contenu et de la mise en page, les rdacteurs ont la

possibilit de se concentrer sur le contenu. Beaucoup de CMS sont dots dune
interface WYSIWYG (What you see is what you get). Traduit littralement, cela
signifie ce que vous voyez est ce que vous obtenez . Les rdacteurs ont
leur disposition une interface similaire celle dun traitement de texte qui
permet de voir lcran quoi ressemblera le rsultat final. Il nest donc pas
ncessaire davoir des connaissances en HTML/CSS.

Certains CMS permettent lajout dextensions (forum, galerie photo, livre dor,
enqute) pour amliorer le site. Les utilisateurs expriments peuvent crer
ces extensions. Dans le monde de l'Open Source, elles sont diffuses sur le web
afin que tous les utilisateurs puissent en bnficier.
La frontire entre CMS et logiciels de gestion de WebLog est assez floue, ces

derniers peuvent tre considrs comme des CMS permettant de grer un type de
contenu particulier (blog). La grande majorit des applications appartenant ces
deux catgories sont des logiciels libres dvelopps en PHP, perl, python, avec entre
autres MySQL comme SGBD (systme de gestion de base de donnes).
Il existe plusieurs dizaines d'applications de ces deux types, auxquels il faudrait
encore ajouter des variantes tels que l'apprentissage en ligne LMS, l'e-commerce
Exemples de CMS : Mambo, Joomla!, SPIP, Typo3, PhpNuke, Plone...
Exemples de logiciels de gestion de blogs : WordPress, Drupal, DotClear...
On trouve de nombreuses listes plus exhaustives sur Internet :
http://www.knoler.eu/liste-des-cms
http://www.cmsmatrix.org/
http://www.opensourcecms.com/

Certains CMS nutilisent pas de base de donnes. Les donnes sont sauves dans des fichiers textes
ou XML. Quelques exemples : Zite/CMS, Phortail, pluxml.
2

5.

JOOMLA!
Pour raliser le site, jai utilis Joomla!, un systme de gestion de contenu Open

Source3 cr par une quipe internationale de dveloppeurs. La communaut se

compose de traducteurs, de rdacteurs, de dveloppeurs, de webdesigners et
d'administrateurs systmes.
Ce CMS est distribu sous licence GNU/GPL et a t rcompens plusieurs
reprises. Joomla! a pour but de permettre la cration dun site sans connaissance
particulire. De nombreux modules existants permettent denrichir les sites. Pour les
utilisateurs disposant de comptences dans le domaine, il est possible de mettre la
main la pte en effectuant des modifications dans les codes.

5.1.

Historique

Lorigine du nom Joomla ! est un mot swahili qui signifie tous ensemble ou
en un tout . Le nom a t choisi parmi des milliers dautres proposs par la
communaut. Cr partir du CMS Open Source Mambo, cest en 2005 que naquit
Joomla!. Suite des dsaccords entre la socit propritaire du nom Mambo (Miro)
et certains des dveloppeurs Open Source, ces derniers ont dcid de crer leur
propre CMS. Nombreux sont les utilisateurs qui ont rapidement suivi le mouvement.
La premire version de Joomla!(1.0.0) tait pratiquement identique la
dernire version de Mambo de lpoque (4.5.2.3), certains bugs ayant t corrigs.
Par la suite, Joomla! a suivi son propre chemin. En 2006 et 2007, Joomla! a t lu
meilleur CMS Open Source (Open Source CMS Award Winner). En janvier 2008,
la version 1.5 est sortie, apportant de nombreuses innovations.

Dsigne une application libre, spcifie en 9 points : la divulgation de la source, l'ouverture des
possibles volutions de la source, la non-discrimination des personnes, la non-limitation des
utilisations, le maintien de l'intgrit de la source d'origine, la redistribution libre de l'application, la
non-contamination des ventuels conceptions des autres, la redistribution de la licence et enfin
l'interdiction de spcification un autre produit de cette licence.
Dfinition issue du site http://dictionnaire.phpmyvisites.net/
3

5.1.1.

Versions de Joomla!

Les numros de version ont toujours la mme structure : X.Y.Z . Comme

1.5.2, la version que jutilise. Que signifient ces chiffres ?
-

X : Numro majeur. Cela montre des modifications importantes dans le code

source de Joomla! qui peuvent avoir comme consquence une incompatibilit
avec des versions antrieures. Pour linstant, ce chiffre na jamais t modifi,
cest toujours 1 .

Y : Numro mineur. Cela signifie quil y a des changements dans larchitecture

et dans les fonctionnalits du logiciel. La modification de ce chiffre indique des
risques dincompatibilit.

Z : Numro de stabilit. Cela indique une mise jour de Joomla! pour

rsoudre des bugs, des problmes de scurit ou pour installer des petites
amliorations. En principe, il ny a pas de problme de compatibilit avec les
versions antrieures.

5.2.

Critiques

Aprs avoir visit de nombreux sites, jai dress une liste des avantages et
inconvnients souvent cits sur le net.

5.2.1.

Ce que les internautes apprcient dans Joomla!

Installation et mise en route rapide. Prise en main facile.

De nombreuses extensions disponibles sur le web.

Large communaut trs active, notamment sur les forums.

diteur de texte WYSIWYG. (TinyMCE 2.0 est fourni de base. Toutefois, il est
possible den installer dautres. Par exemple FCK Editor.)

Modules personnalisables sur chaque page.

Disponible en plusieurs langues.

Publication et expiration dun article une date prcise.

Moteur de recherche intgr.

Possibilit de voir un aperu de la mise en page avant la publication.

Gestion des bannires de publicit.

Linterface dadministration permet de grer facilement le contenu du site

(textes et images).

Logiciel Open Source.

Aprs la suppression dun lment (menu, article), il est encore possible de le

grer dans la corbeille (suppression ou restauration).

Lorsque le site est hors ligne (notamment pour cause de maintenance), il reste
toutefois visible pour les administrateurs.

Possibilit dditer des balises mta pour chaque article.

Possibilit de visualiser les statistiques de frquentation : classement des

articles les plus affichs (avec le nombre de clics sur le lien), mots les plus
recherchs dans le site.

Cration aise dun sondage.

Les articles peuvent tre transforms en PDF, imprims ou envoys par mail,
grce aux trois icones prsentes dans chaque article. (Icnes qui peuvent tre
masques.)

Gestionnaire de formulaires de contact.

5.2.2.
-

Ce que les internautes reprochent Joomla!

De nombreux plugins sont disponibles. Cest un avantage car cela permet

damliorer son site selon ses besoins. Toutefois, cet avantage peut devenir un
inconvnient. En effet, inclure trop de modules provoque le ralentissement du
site. De plus, les plugins ne sont pas toujours compatibles entre eux. Enfin,
quand une mise jour de Joomla! est disponible, il faut vrifier que les plugins
sont compatibles.

Prise en main assez difficile (les avis sont contradictoires ce sujet).

Interface dadministration pas trs intuitive.

Gestion des utilisateurs pas assez pousse .

Terminologie utilise par Joomla! parfois difficile comprendre.

5.3.

Dfinition de trois termes ne pas confondre

Pour mieux comprendre comment fonctionne Joomla!, il est important davoir

assimil la signification de ces termes :
-

Composant : mini application intgre votre site Joomla!, qui dispose de

sa propre interface de configuration dans la console d'administration
16
16

Joomla! 4. Certains sont prinstalls (gestion des contacts, des sondages, des
liens web), dautres peuvent tre ajouts par aprs. Dans mon cas, jai
rajout un composant pour la galerie photos (Phoca Gallery) et un pour le plan
du site (Xmap).
-

Module : un module est un bloc dont la position sur le site est

paramtrable. Il peut comporter diffrents types dinformations : menu,
formulaire, pied de page, images alatoires Le sujet sera dvelopp plus
loin dans le travail.

Plugin : Un plugin est un bloc de code qui vient se brancher en un point

prcis de linfrastructure de Joomla! pour en modifier le fonctionnement. 5
Un exemple de plugin prinstall : Editor - TinyMCE 2.0 qui est lditeur
de texte par dfaut.

5.4.

Prsentation du logiciel

Pour avoir accs la partie dadministration dun site ralis laide de

Joomla!, il existe deux solutions :
-

Dans un navigateur, crire ladresse du site suivie de /administrator .

Sur le site, il existe un lien qui donne accs ladministration. Dans mon cas,
le lien Administrator a t renomm et sappelle dsormais
Administration . Celui-ci se situe dans le menu horizontal.
Les deux solutions donnent accs la

page de connexion. Dans celle-ci, on trouve

un mini formulaire dans lequel on insre
lidentifiant et le mot de passe. On peut
galement modifier la langue.

Dfinition issue du PDF : GAUTREAU Ivan. Joomla! pour les Nuls. Ou comment crer
et administrer en toute znitude un site Web avec Joomla! Version 0.9. Avril 2007
4

Dfinition issue du site : http://joomla.cocoate.com/fr/Structure-fonctionnelle-d-un-CMS

17
17

Ensuite, on accde la page daccueil de ladministration.

Ci-dessus, la page affiche lorsquon se connecte en tant que Super Admin .

En effet, Joomla! propose une page daccueil dadministration qui varie selon le rang
de lutilisateur. Sur cette photo, toutes les options sont prsentes car le Super
Admin dispose de tous les droits.
Au dessus de la page, le titre du site est affich ainsi que la version de Joomla!
(1.5.2 dans mon cas). En dessous, gauche, le menu horizontal (dcrit plus loin) qui
reprend toutes les fonctions.

droite du menu, le lien Prvisualiser permet dafficher un aperu du site

dans une nouvelle fentre. Ensuite, on peut voir le nombre de messages reus et de
personnes connectes ladministration du site. Enfin, un lien permet la dconnexion
de ladministration.
Ensuite, des raccourcis (sous
forme dicnes) vers les principales
fonctions de Joomla! sont affichs.
Ces fonctions sont galement
accessibles via la barre de menus.
18
18

 droite, par dfaut, les informations suivantes sont affiches :

Welcome to Joomla! : prsente un texte qui nous remercie davoir choisi
Joomla! et qui donne quelques conseils sur son utilisation.
Logged in Users : affiche les membres connects ainsi que des donnes les
concernant (type dutilisateur, heure de la dernire activit).
Popular : affiche la liste des articles les plus populaires, leurs dates de
cration et le nombre de clics.
Recent added Articles : affiche la liste des derniers articles, leurs auteurs et
leurs dates de cration.
Menu Stats : affiche les noms des menus et le nombre dlments quils
contiennent.
Ces informations peuvent tre modifies ou supprimes de la page daccueil
dadministration en allant dans Extension > Gestion des modules, puis en cliquant
sur Administrateur. Afin dajouter des informations cet endroit, il faut choisir
cpanel comme position.

5.4.1.

Menu

Site : propose les options suivantes :

o Panneau dadministration : lien pour le retour la page daccueil de
ladministration.
o Gestionnaire des utilisateurs : permet dajouter, supprimer un/des
utilisateur(s) ou den modifier les paramtres.
o Gestion des mdias : affiche une page dans laquelle sont affichs tous
les sous-dossiers de media . Il est possible de modifier le contenu de
ces dossiers (envoyer des images sur le serveur, en supprimer ou en
modifier).
o Configuration globale : permet de modifier les paramtres du site.
Ceux-ci sont diviss en trois catgories : site, systme, serveur.
o Dconnexion : lien cliquer pour se dconnecter de l'administration.
Toutefois, si on ferme la fentre sans stre dconnect, la session se
19
19

fermera automatiquement aprs un certain dlai. (Celui-ci peut tre

modifi via Site > Configuration Gnrale > Systme dans Configuration des
sessions.)

Menus :
o Gestion des menus : affiche tous les menus du site. Cest depuis cette
page quon peut crer, copier ou supprimer un menu.
o Corbeille des menus : lors de la suppression dun menu, celui-ci est dplac
vers la corbeille. Depuis celle-ci, on peut supprimer dfinitivement un menu
ou le restaurer. (Option qui savre utile quand on supprime un menu par
erreur.)
o Liste des menus : dans cette liste, on retrouve tous les menus. En
cliquant sur lun deux, on peut en modifier les paramtres et grer les
liens que contient le menu.

Contenu :
o Gestion des articles : permet de crer, supprimer, (d)publier, modifier,
(ds) archiver, dplacer les articles.
o Corbeille article : la suppression dun article, celui-ci nest pas supprim
dfinitivement. Depuis la corbeille, il peut tre restaur ou effac
dfinitivement.
o Gestionnaire des sections : Cest sur ce lien quil faut cliquer pour
crer, (d)publier, copier, supprimer ou modifier une section existante.
o Gestionnaire des catgories : Cest ce lien quil faut utiliser pour crer,
(d)publier, dplacer, copier, supprimer ou modifier une
catgorie existante.
o Gestion de la page daccueil : comme son nom lindique, cette page
permet de grer les lments qui sont affichs sur la page daccueil.

Composants : permet de grer tous les composants du site. la base on

retrouve les composants suivants : Bannires, Contacts, Fils dactualits,
Sondages, Recherche, Liens web. Pour mon travail, deux composants ont t
ajouts : Phoca Gallery (galerie photos) et Xmap pour afficher le plan du site.

Extensions :
o Installer/Dsinstaller : lien utiliser quand on dsire installer ou
dsinstaller des composants, modules, plugins, langues et templates.
20
20

o Gestion des modules : permet de grer les modules. (On peut choisir leur
position, lordre dapparition, le niveau daccs et choisir sils sont activs ou
dsactivs)
o Gestionnaires des plugins : il permet, entre autres, de choisir si le plugin
est activ, de rgler le niveau daccs et de modifier les paramtres.)
o Gestionnaire des templates : cette page permet de choisir le design du site
mais aussi dassigner une feuille de style certaines parties du site.
o Gestion des langues : la page permet de choisir la langue utilise sur le site
mais aussi dans ladministration.
-

Outils :
o Lire les messages : affiche la liste des messages reus.
o crire un message : permet de rdiger un message pour une personne
inscrite sur le site. Remarque : le systme de messagerie ne fonctionne
quentre les personnes qui ont accs ladministration.
o Envoi massif demail : option qui permet denvoyer un message
plusieurs personnes inscrites sur le site en slectionnant le groupe voulu. Par
exemple, on peut envoyer un message tous les administrateurs.
o Vrification globale : Quand un administrateur rdige un article, celui-ci
est inaccessible pour les autres utilisateurs. Ceci vite que plusieurs
personnes travaillent sur le mme article en mme temps. Dans la liste des
articles, celui en cours est prcd dun cadenas qui disparait quand le
rdacteur sauvegarde larticle ou quitte la page via loption
Annuler . Cependant, si le rdacteur quitte la page de rdaction sans avoir
sauvegard ou cliqu sur Annuler , larticle restera bloqu pour tous les
autres utilisateurs. Loption Vrification globale permet de renregistrer
tous les contenus (articles, liens), mme ceux qui sont en cours d'dition par
d'autres diteurs du site. Ainsi, tous les cadenas disparaissent et tous les
articles deviennent accessibles tous les membres enregistrs.
o Nettoyer le cache : permet de supprimer tout le contenu du cache.
Remarque : pour nettoyer le cache il faut quil soit activ. Ceci se fait via
Site > Configuration gnrale > Systme dans Paramtres du cache .

21
21

Aide :
o Aide Joomla! : comme son nom lindique, ce lien donne accs laide du
logiciel. Pour y accder, il faut disposer dun accs Internet.
o Infos systme : permet dobtenir des informations sur le systme, les
paramtres PHP, le fichier de configuration, les permissions des dossiers
et les informations PHP.

5.5.

Types dutilisateurs

Joomla! offre la possibilit doctroyer un statut aux utilisateurs :

Source : http://www.joomlafacile.com/Questions-diverses/Super-Admin-Admin-managerauthor-registered-.qui-fait-2.html

Accs non autoris !

Accs autoris !

Frontend : partie du site visible par nimporte quel utilisateur.

Backend : partie dadministration du site.
Remarques
-

Quand une personne sinscrit via la partie publique du site, par dfaut, elle
appartient au groupe Registred . Pour acqurir dautres droits, son profil
doit tre modifi par un membre de la partie prive.

prsent, le terme Mambot est remplac par Plugin .

22
22

5.6.

Modules
5.6.1.

Types de modules

Il existe plusieurs types de modules :

-

Ceux qui sont installs automatiquement par Joomla!. Par exemple, le menu
principal, la bannire, le pied de page

Ceux qui sont installs par lutilisateur. Par exemple, les modules lis un
composant.

Ceux qui sont crs par utilisateur. Par exemple, en crant un module pour un
nouveau menu.

5.6.2.

Modules installs par Joomla!

Advertisement : affiche une liste de liens publicitaires.

Archive : affiche un calendrier mensuel des lments archivs. La mise jour se

fait automatiquement quand on archive un article.

Banners : permet dafficher des bannires.

Breadcrumbs : appel aussi fil d'Ariane , permet linternaute de savoir

tout moment o il se situe dans le site.

Example Pages : affiche un menu avec des liens vers des exemples de pages.

Feed Display : permet l'affichage d'un fil d'actualit.

Footer : affiche en bas de page les infos concernant le copyright de Joomla!

Key Concepts : affiche un menu. ( la base, il contient les liens

Extensions , Content Layouts et Example Pages )

Latest News : affiche les derniers articles.

Login Form : affiche un formulaire didentification et un lien utiliser en cas de

mot de passe oubli.

Main Menu : menu principal.

Newsflash : affiche au hasard un lment diffrent chaque

rafrachissement. Il peut aussi afficher plusieurs lments dans un cadre
horizontal ou vertical.

Polls : affiche un sondage.

Popular : affiche les articles les plus populaires.

23
23

Random Image : affiche alatoirement une image issue dun rpertoire

choisi.

Related Items : affiche une liste darticles en rapport avec larticle affich.
Cette liste est gnre grce aux mots-cls de chaque article.

Resources : la base, ce menu contient des liens comme Joomla! Home ,

Joomla! Forum ainsi que le lien Administrator pour accder la
partie administration.

Search : affiche un formulaire de recherche dans le site.

Sections : affiche une liste reprenant toutes sections du site. En cliquant sur
un nom de section, une page saffiche avec les catgories qui dpendent de la
section. De mme, si on clique sur une catgorie, une nouvelle page saffiche
avec tous les articles appartenant la catgorie.

Statistics : module qui affiche des informations sur le serveur, les

utilisateurs, le nombre d'articles prsents dans la base de donnes, lheure,
ainsi que le nombre de membres

Top Menu : menu horizontal situ au dessus du site.

User Menu : affiche un menu disponible pour les personnes enregistres.

Who's Online : affiche le nombre de visiteurs (invits et enregistrs)

connects sur le site.

Wrapper : affiche une IFrame un endroit choisi.

5.6.3.

Options gnrales des modules

La page de gestion des modules est un grand tableau qui affiche tous les
modules. Il est possible dditer un module en cliquant sur son nom.
partir de la page de gestion, on peut voir et/ou modifier les options gnrales :
-

Nom du module : affiche le nom du module. En cliquant dessus, il est

possible dditer celui-ci.

Activ : contient licne

quand le module est activ et licone

quand il ne lest pas. Il suffit de cliquer sur licne pour la faire changer dtat. Il
est galement possible de supprimer le module en cochant la case prcdant le
nom du module et en cliquant sur Supprimer .
-

Ordre

: Permet de modifier lordre dapparition des modules.

24
24

Accs : affiche si laccs est public (pour tous les visiteurs), enregistr
(seulement pour les membres enregistrs) ou spcial (uniquement pour les
utilisateurs membres des groupes Author, Publisher, Manager, Admin ou Super
Admin).

Position : affiche le positionnement de chaque module : droite, gauche, en

haut, en bas

Pages : dfinit si le module est affich sur une page en particulier, sur toutes les
pages ou sur aucune page.

Type : affiche le type de module. Ex: mod_breadcrumbs, mod_mainmenu,

mod_footer.

ID : chaque lment possde un numro ID diffrent afin de se diffrencier des

autres.

25
25

6.

LOGICIELS UTILISS
6.1.

Dreamweaver 8

Cette version du logiciel a t dveloppe par Macromedia. (Dreamweaver CS3,

la dernire version, est dveloppe par Adobe.)
Ce programme est un clbre diteur de sites destin aux professionnels comme
aux dbutants. Il offre deux modes de conception :
-

Le mode cration , appel aussi WYSIWYG (What You See Is What You
Get), permet dinsrer du contenu laide doutils simples similaires ceux
que lon trouve dans des programmes de traitement de texte. Lutilisateur voit
donc directement le rsultat final.

Le mode code qui sera prfr par les dveloppeurs car il permet dcrire
soi-mme les lignes de code. Toutefois, ce mode requiert des connaissances
dans le domaine du web.
En divisant la page en deux parties, ces deux modes peuvent tre combins.

Ainsi, on peut coder en voyant le rsultat final. Ce logiciel ne se limite pas ldition
de code HTML. Il permet, entre autres, dcrire du code PHP, ASP, XML, CSS
Ce programme ma permis deffectuer certaines modifications dans les codes de
Joomla!. Japprcie sa simplicit, la possibilit de restructurer et coloriser le code, ce
qui facilite la lecture.

6.2.

Filezilla 2.2.29

Cr par lallemand Tim Kosse, Filezilla est un logiciel FTP (protocole de

transfert de fichiers) gratuit et Open Source grce auquel on peut se connecter un
serveur distant pour y tlcharger des fichiers.
Il est dot dun gestionnaire de sites qui permet de sauvegarder les adresses des
sites auxquels on se connecte rgulirement. Le logiciel est capable de reprendre des
26
26

tlchargements interrompus et il dispose dune file dattente. Filezilla permet

dafficher larborescence des dossiers locaux et distants en vis--vis. Les
dplacements de fichiers se font grce au glisser-dposer . Enfin, il est disponible
en plusieurs langues (dont le franais).
Pour la mise en ligne du site, jai utilis ce logiciel pour transfrer les fichiers du
site vers le serveur de lhbergeur.

6.3.

Photoshop CS3

Photoshop, dvelopp par Adobe, est un des meilleurs logiciels de retouche

photo. Il est disponible dans de nombreuses langues et possde son propre format
(PSD). Il permet galement dimporter et dexporter dans de nombreux autres
formats tels que : JPEG, PNG, TIFF, GIF, PDF, TARGA
Photoshop est un logiciel ddition graphique bitmap. Toutefois, Photoshop
dispose de certains outils qui utilisent le vectoriel. Citons par exemple la plume ou
certaines formes (cercles, toiles, carrs).
Photoshop est dot de nombreuses options qui font de lui un outil professionnel :
-

Utilisation des calques.

Diffrents outils pour effectuer une slection : lassos, baguette magique,

rectangle de slection, outil de slection rapide.

Outils pour le dessin en mode bitmap : crayons, pinceaux, gomme.

Outils pour le dessin en mode vectoriel : plume, diffrentes formes.

Outils pour colorer : pot de peinture, dgrads, pipette.

Outils pour insrer un texte et le paramtrer.

Outils pour les retouches photos : outil pice, tampon de duplication, outil de
nettet, outil de densit + et -

Rglages des couleurs, de la lumire, du contraste, de la saturation

Nombreux filtres pour ajouter des effets : flous, contours, ombres, textures

Couleurs RVB, CMJN

Il existe encore de nombreuses options mais il serait trop long de toutes les
numrer.
27
27

Jai utilis ce logiciel pour raliser la bannire, le pied de page, les images de fond du
site, du menu horizontal et des titres des menus.

6.4.

Top Style 3.1

TopStyle est un logiciel dvelopp par Bradbury Software qui est utilis pour la
mise en forme des sites Internet. En effet, il permet dditer des fichiers CSS.
TopStyle se dcline en deux versions : TopStyle Pro et TopStyle Lite. Ce dernier
est gratuit et se limite ldition de code CSS. La version Pro est payante mais dote
de plus de fonctions. Elle permet notamment dditer du code HTML et XHTML.
Grce ce logiciel, on peut rapidement modifier le style dune page (marges,
couleurs, polices). Une fentre permet de voir le rsultat et il est possible de valider
le rsultat dans diffrents navigateurs. Ceci est bien utile quand on sait quils ne
ragissent pas toujours de la mme manire une feuille de style. Dans la fentre de
droite, quand on slectionne un lment (par exemple un lment lien ), une liste
saffiche avec les options pouvant tre paramtres.

6.5.

WAMP5 version1.6.5

WAMP est lacronyme de Windows6 Apache MySQL PHP .

Lors de linstallation de WAMP, celui-ci installe quatre programmes: Apache,
PHP, MySQL, PhpMyAdmin. Ils permettent de faire fonctionner en local des bases
des donnes et des scripts contenant du PHP.
Grce cela, il nest pas ncessaire de disposer dun hbergeur en ligne lors du
dveloppement dun projet (lhbergeur reste nanmoins obligatoire pour mettre un
site en ligne). Dans mon cas, il fut trs utile car il ma permis de dvelopper mon site
sur ma machine. Cest seulement quand il fut fini que je lai envoy chez un
hbergeur.

Wamp est disponible pour Windows. Toutefois, il existe un quivalent pour Mac (MAMP) et pour
Linux (LAMP).
6

28
28

7.

DVELOPPEMENT DU PROJET
7.1.

Choix de Joomla!

Pourquoi avoir choisi Joomla! pour la conception du site ? Quand le sujet de

mon travail fut fix, je ne savais pas encore que je travaillerais avec ce logiciel.
Ayant des difficults commencer la base de donnes, jai pris contact avec Monsieur
Lemort, professeur la Haute Ecole Lon Eli Troclet. Celui-ci a eu lide de me
diriger vers un CMS. Encore fallait-il en choisir un. Il en a parl avec son confrre,
Monsieur Fransolet, galement enseignant lcole. Selon lui, Joomla! tait le mieux
adapt mes besoins. Avec Monsieur Lemort, nous avons fait quelques recherches
pour obtenir de plus amples renseignements. Notre choix sest finalement arrt sur
Joomla!.

7.2.

Installation

La premire tape fut linstallation de Joomla!

Je me suis rendue sur le site officiel francophone (http://www.joomla.fr/) o jai
dcouvert quil existait deux versions : 1.0.15 et 1.5.1.
Jai opt pour la dernire version (1.5.1), sortie depuis le dbut de cette anne et
dclare stable . Par la suite, je lai mise jour pour avoir la version 1.5.2.
Aprs avoir visit le site, jai tlcharg le PDF Joomla! Pour les nuls , un
manuel de 106 pages expliquant clairement le mode dutilisation. Ce PDF est
applicable la version 1.0.12. Toutefois, il ma aid comprendre les grands principes
de ce CMS. Avant dinstaller Joomla! , jai donc parcouru la table des matires de ce
guide. Grce cela, jai pu remarquer que linstallation tait explique tape par
tape.

7.2.1.

tapes de linstallation

Remarque : Les tapes qui suivent sont dcrites pour linstallation en local.
-

Aprs avoir tlcharg le pack dinstallation, jai dcompress le contenu dans

un nouveau dossier (TFE) situ dans C:/wamp/www. Ensuite, il faut ouvrir un
navigateur (Firefox ou Internet Explorer par exemple) et y entrer :
29
29

http://localhost/ + le nom du dossier dans lequel se trouvent tous les fichiers

dcompresss. Pour ma part, jai donc insr ladresse suivante :
http://localhost/TFE/. Linstallation peut dmarrer.
-

1re tape : Choix de la langue. Lutilisateur a le choix entre + - 50 langues.

Jai choisi le franais.

2e tape : Pr-installation. On vrifie si le systme est correctement

configur afin de pouvoir excuter Joomla!
Certains paramtres sont obligatoires (support dXML, version de PHP
suprieure 4.3.10), dautres sont recommands (transfert de fichiers
autoris)

3e tape : Licence. Affichage de la licence : Licence Publique Gnrale GNU

4e tape : Configuration de la base de donnes :

5e tape : Configuration FTP. On y insre le type de base de donnes, le nom

du serveur, les paramtres du FTP Dans un premier temps, je nai rien rempli
car jai dabord utilis Joomla! en local. De plus, ces options peuvent tre
compltes dans Joomla! une fois linstallation termine.

6e tape : Configuration principale.

o Indication du nom du site.
o Indication de l'email et du mot de passe de l'administrateur.
30
30

o Choix entre : charger les donnes d'exemples, restaurer ou migrer un

contenu sauvegard.
-

7 e tape : Terminer. Sil ny a pas eu de problme, on peut lire :

Flicitations! Joomla! est install. ainsi que N'OUBLIEZ PAS DE
SUPPRIMER COMPLTEMENT LE RPERTOIRE 'INSTALLATION' Vous
ne pourrez pas aller au del de cette tape tant que le rpertoire
d'installation ne sera pas supprim. Ceci pour des raisons de scurit de
Joomla!
partir de l, il est possible de voir le site ou de se diriger vers la partie

administration. Une fois le logiciel install en local, jai donc voulu voir quoi
ressemblait le site. Voici un aperu:

Par la suite, jai explor le contenu de la partie administrateur ainsi que ses
divers menus.
Ensuite, jai repris le guide. Celui-ci conseille de commencer par modifier
lidentifiant du compte administrateur afin de scuriser laccs la partie
dadministration ( admin tant impos par dfaut lors de linstallation,
contrairement au mot de passe qui est choisi par lutilisateur lors de linstallation).
31
31

7.3.

Utilisation des modules

La premire chose que jai remarque en ouvrant le site, cest le nombre de

modules affichs.
Dans le cadre de ce site, beaucoup ne sont pas utiles. Jai donc dsactiv ceux
qui ne me semblaient pas ncessaires. Jai choisi de les dsactiver et non de les
supprimer afin de pouvoir ventuellement les utiliser par la suite.
Jai gard les modules suivants :
-

Breadcrumbs : qui me semble trs utile car grce cela, linternaute sait
tout moment o il se situe dans le site.

Footer : car il affiche les informations du copyright de Joomla!.

Image alatoire : ce module permet de faire dfiler des images contenues

dans un dossier choisi.

Main Menu : je lai utilis comme menu principal du site. Main menu est
le nom qui est fix lors de linstallation. Je lai renomm ( Le rugby ) car ce
menu contient les liens qui donnent accs aux informations dont le sujet
principal est le rugby.

Search : est un module qui me parait trs utile car il offre la possibilit de
faire une recherche dans le site. Ceci permet un accs plus rapide
linformation recherche.

Top menu : il est utilis comme menu horizontal en haut de la page. Je lai
renomm Menu haut
Jai ajout deux modules :

Liens : menu qui contient des liens vers des sites en rapport avec le travail de
Victor.

Menu secondaire (Les blessures) : menu qui affiche les liens vers la
deuxime partie du travail de Victor.

32
32

7.4.

Cration dun nouvel utilisateur

Aprs linstallation, il ny a quun seul utilisateur : le Super Admin qui a

accs toutes les parties du site et de ladministration.
Dans le cadre de ce site, il faut crer un deuxime compte utilisateur afin que Victor
puisse alimenter le site.
Lorsquon veut crer un nouvel utilisateur, il faut dabord se demander quels
seront ses droits sur le site. Dans le cas qui nous occupe, Victor doit pouvoir
ajouter/diter des articles, crer et modifier les menus et ventuellement rajouter un
module.
Si on sen rfre au tableau suivant, il faut donc crer un utilisateur de type
Admin .

Source : http://www.joomlafacile.com/Questions-diverses/Super-Admin-Admin-managerauthor-registered-.qui-fait-2.html

Frontend : partie du site visible par nimporte quel utilisateur.

Backend : partie dadministration du site.
Aprs avoir choisi de quel niveau sera le nouvel utilisateur, il faut se rendre dans
le menu Site > Gestionnaire des utilisateurs. En haut droite, cliquer sur Nouveau
pour crer le nouvel utilisateur.
33
33

Ensuite, il faut entrer les donnes suivantes : nom, identifiant, email, nouveau
mot de passe, confirmation du mot de passe et choisir le type dutilisateur.
Enfin, il faut slectionner la langue de linterface dadministration et de
linterface publique, lditeur de texte de lutilisateur, le site daide et le fuseau
horaire. Le nouvel utilisateur est ensuite cr.
Lorsquon se connecte la partie administration en tant qu Admin on
constate que les options sont lgrement rduites par rapport ladministration
Super Admin

Page daccueil de ladministration en se connectant en tant qu Admin

Page daccueil de ladministration en se connectant en tant que Super Admin .

On constate donc les options pour grer les langues et pour configurer Joomla!
ne sont pas prsentes pour ce type dutilisateur.

34
34

Le menu Site contient une option de moins : configuration globale .

Un Admin ne peut donc pas modifier les options Site , Systme et
Serveur .
Les gestionnaires dutilisateurs et des mdias sont toujours prsents.
Toutefois, dans le gestionnaire des utilisateurs, il ne peut pas modifier les
donnes du Super Admin .

Le menu Menus est identique. Ce qui signifie que Victor peut grer les
menus (ajouter, modifier, supprimer).

Le menu Contenu est similaire. Victor a donc la possibilit de grer les

articles et la page daccueil, crer, supprimer et modifier les sections et
catgories.

Le menu Composants est semblable. Victor peut modifier les contacts,

ajouter des fils dactualit, crer un sondage, modifier la galerie photos, afficher
des liens web ou modifier le plan du site.

Le menu Extensions nest pas tout fait identique. Victor peut grer les
modules et les plugins. Cependant, il na pas accs la gestion des langues et des
templates.

Le menu Outils ne contient que les options Vrification globale et

Nettoyer le cache . Les options de messagerie ne sy trouvent pas, contrairement
au Super Admin . Pour avoir accs ces options, il faut cliquer cot de la
petite enveloppe situe en haut droite. Ceci affiche les messages reus. Loption
Nouveau permet de rdiger un nouveau message et Supprimer permet
deffacer les messages reus.

Le menu Aide est identique. Lutilisateur Admin peut avoir accs

laide de Joomla! ainsi quaux informations relatives au systme.

35
35

7.5.

Gestion des articles

Avant de publier des articles, jai dabord supprim ceux qui sont installs
automatiquement lors de linstallation.

7.5.1.

Suppression dun article

Pour ce faire, je me suis rendue dans le menu Contenu > Gestion des articles. Un
tableau saffiche avec lensemble des articles. En cochant la petite case situe au
dessus des noms darticles, il est possible de slectionner tous les articles prsents sur
la page. Ensuite, il suffit de cliquer sur licne Corbeille . ce stade, larticle est
dans la corbeille. Il nest donc pas totalement supprim. Pour leffacer dfinitivement,
il faut se rendre dans Contenu > Corbeille article, slectionner les articles supprimer
et cliquer sur Supprimer . Un message en rouge rappelle alors que les articles
seront dfinitivement supprims de la base de donnes si on clique sur licne
Supprimer .
Si un article est envoy par erreur dans la corbeille, il suffit alors de cliquer sur
Restaurer et larticle sera replac son emplacement initial.
Ceci peut paratre ennuyant quand on veut supprimer dfinitivement un article
mais cette scurit peut savrer trs utile. En effet, on peut tre trs embt lors de la
suppression dun article par erreur.

7.5.2.

Cration dune section

Avant de crer un article, il faut avoir cr au moins une section et une

catgorie. Explication :
-

Chaque section comprend une/des catgorie(s)

Chaque catgorie contient un/des article(s)

Un site tout simple peut contenir une seule section avec une seule catgorie,
laquelle sont rattachs tous les articles (les pages du site).
Il faut donc commencer par crer une section et une catgorie. Le travail de

Victor se divise en deux parties : la premire o il dcrit le rugby et la deuxime o il

36
36

voque le rapport entre le rugby et la sant (principalement les blessures).

Jai donc cr deux sections (rugby et sant) dans lesquelles jai cr des
catgories qui correspondent aux chapitres principaux de son travail.
Pour ce faire, je me suis rendue dans Contenu > Gestionnaire des sections.
Aprs linstallation, trois sections existaient dj. Si on dsire les supprimer, il faut
avoir effac les catgories quelles contiennent.
Remarque : il est impossible de supprimer une section contenant une catgorie. De
mme, on ne peut effacer une catgorie contenant des articles.
Aprs avoir supprim les catgories, il faut donc revenir dans le menu des
sections pour supprimer celles qui sont prsentes. Il suffit de toutes les slectionner
et de cliquer sur licne Supprimer .
On peut maintenant crer les sections dsires en cliquant sur Nouveau . Il
faut insrer les informations suivantes : titre et alias. Cocher si la section doit tre
publie (oui ou non) et choisir le niveau daccs (public, enregistr ou spcial).
Il est galement possible dafficher une image et une description.
Par dfaut la nouvelle section est affiche en dessous des autres. Pour modifier lordre
dune section, il faut dabord lavoir enregistre.

7.5.3.

Cration dune catgorie

Ensuite, jai cr des catgories. Celles-ci portent les noms des chapitres
principaux du travail de Victor. Cependant, certains noms ont t modifis afin dtre
plus courts. Un titre tel que Place du rugby dans la presse, avant, pendant et aprs
la Coupe du Monde 2007 est bien trop long. Il peut tre remplac par Le rugby
dans la presse . Pour crer/modifier une catgorie, il faut se rendre dans Contenu >
Gestion des catgories. Les informations remplir sont quasi identiques celles

introduire lors de la cration dune section. En plus, il faut choisir quelle section
appartient la catgorie.

37
37

7.5.4.

Cration dun article

Aprs avoir cr une catgorie et une section, on peut rdiger un article. Pour
cela, il faut aller dans Contenu > Gestion des articles et cliquer sur Nouveau .
Ensuite, il faut donner un titre larticle, un alias et choisir quelle section et
quelle catgorie il appartient. Il faut galement choisir si larticle sera publi et sil sera
prsent sur la page daccueil. Il ne reste plus qu insrer le texte puis cliquer sur
Sauver et larticle est prt tre publi.
Ceci est la manire la plus simple pour rdiger un article. Aucun paramtre na
t modifi et larticle nest compos que de texte.
Quand on publie un article assez long, il gnre forcment une longue page. Ceci
nest ni esthtique, ni agrable pour le lecteur. Joomla! propose une option pour
diviser larticle en plusieurs pages. Pour cela, il faut se placer lendroit o le texte
doit tre coup et cliquer sur Saut de page en bas gauche. Une fentre souvre.
Dans celle-ci, un formulaire dans lequel il faut complter le titre et lalias de la page.
prsent, quand on est face un article fort long, on peut voir (en
dessous de la page) les liens Prc et Suivant >> . De plus,
sur le haut de la page, un index indique les noms des diffrentes
pages.
7.5.4.1

Paramtres de larticle

Pour chaque article, on peut modifier :

Paramtres de larticle :
Nom et pseudo de lauteur, niveau daccs, date de cration, dbut et fin de
publication.
Paramtres avancs :
-

On choisit si les options suivantes sont affiches, masques ou si elles

correspondent aux paramtres globaux : titre, texte d'introduction, nom de la
section, nom de catgorie, valuation de l'article, nom de l'auteur, date et
heure de cration, date et heure de modification, icne PDF, icne imprimer,
38
38

icne email.
-

On choisit galement si les lments suivants sont cliquables : titre, titre de

section, nom de catgorie.
Informations des mta-donnes (amliorent lindexation par les moteurs
de recherche) :
On peut insrer une description et des mots-cls pour les mta-donnes, des
mots-cls pour les robots et le nom de lauteur qui apparaitra dans les mtadonnes.
Remarque : Ces options sappliquent larticle en cours.

Il est possible de rgler les options pour quelles sappliquent tous les articles. Pour
cela, il suffit de se rendre dans la page daccueil de la gestion des articles et de cliquer
sur licne Paramtres .
7.5.4.2

Insertion dune image

Pour agrmenter une page, on peut y insrer des images. Dans Joomla!, lors de
la cration dun article, cest possible grce licne Image situe en dessous de
lditeur de texte. Si on clique sur cette icne, une fentre souvre :

39
39

Les images doivent se trouver dans un rpertoire bien prcis de Joomla! :

/images/stories (ou dans un sous-rpertoire de stories). Comment transfrer les
images dans ce dossier ? Plusieurs mthodes existent :
-

La premire consiste utiliser la fentre que lon vient douvrir. Dans celle-ci
se trouve loption Transfrer . Ceci permet de parcourir le disque dur et de
tlcharger les images dans le bon dossier de Joomla!.

La deuxime, via le menu, en allant dans Site > Gestion des mdias. Cette
page affiche larborescences des dossiers de Joomla!. En cliquant sur un nom
de dossier, le contenu de celui-ci saffiche. En bas, on trouve loption
Transfrer un fichier [ Max = 10M ] grce laquelle on peut parcourir le
disque dur la recherche de limage voulue. Quand le choix est fait, il ne reste
plus qu cliquer sur Lancer le transfert .
Cette page permet galement de crer de nouveaux dossiers, de supprimer des
mdias/dossiers.
Remarque : si on dispose de beaucoup dimages, il est prfrable de crer des
sous-dossiers de stories .

La troisime, via le logiciel FTP (qui permet de mettre un site en ligne), en

copiant directement les images dans le dossier voulu.
Maintenant que lon dispose dimages dans le dossier stories , il suffit de

cliquer sur Image en dessous de lditeur de texte, choisir limage voulue, lui
donner un titre, une description et dfinir son alignement.
7.5.4.3

Insertion dune vido

Pour illustrer certains points de son travail, Victor souhaitait afficher des vidos
provenant du clbre site Youtube.com . Pour illustrer le Haka, Victor a trouv
une vido ladresse suivante : http://www.youtube.com/watch?
v=9Zvs4T4RU30&feature=related Pour chaque vido, Youtube
propose un script semblable celui-ci :
<object width="425" height="355"><param name="movie"
value="http://www.youtube.com/v/9Zvs4T4RU30&hl=fr"></param><param
name="wmode" value="transparent"></param><embed
src="http://www.youtube.com/v/9Zvs4T4RU30&hl=fr"
type="application/x-shockwave-flash" wmode="transparent" width="425"
height="355"></embed></object>
40
40

Ce code est copier dans larticle voulu, en mode HTML (dans lditeur de texte,
il faut cliquer sur licone HTML). Dans larticle, la vido est reprsente sous forme
dun rectangle jaune contenant l'icne du lecteur Flash. (

7.6.

Menus

Maintenant quun article est cr, il faut permettre aux visiteurs davoir accs
linformation. Il faut donc crer un menu en se rendant dans Menus > Gestion des
menus.

la base, Joomla! cre 6 menus : Main Menu, User Menu, Top Menu,
Resources, Example Pages et Key Concepts.
Avec Victor, nous avons pens utiliser quatre menus :
-

Un menu vertical (plac gauche) concernant la premire partie de son travail

( Le rugby ).

Un second du mme type plac en dessous pour afficher les liens vers la
seconde partie de son travail ( Les blessures ).

Un menu horizontal plac au dessus avec des liens divers (accueil, galerie
photos, vidos, contacts, plan du site et administration)

Un autre menu vertical, celui-ci plac droite, dans lequel sont affichs des
liens vers des sites en rapport avec le travail de Victor ( Liens ).
Des 6 menus originaux, je nai gard que Main Menu (qui a t renomm en

Le rugby ) et Top Menu (renomm en Menu haut ) qui est utilis comme
menu horizontal.

7.6.1.

Suppression dun menu

La suppression dun menu est trs simple. En effet, quand on se trouve sur la
page de gestion de menu (accessible via Menus > Gestion des menus), il suffit de
slectionner le menu effacer et de cliquer sur licne Supprimer . Cependant, le
menu nest pas supprim dfinitivement. Pour cela, il faut aller dans Menus >
Corbeille de menu. Ensuite, on peut supprimer le menu ou le restaurer.
41
41

7.6.2.

Cration dun menu

Pour crer un menu, il faut se rendre dans la page daccueil de gestion des
menus (via Menus > Gestion des menus) et cliquer sur Nouveau . Ensuite, il faut
remplir un formulaire comportant quatre champs :
-

Type de menu : nom utilis par Joomla! pour identifier le menu dans les
codes. Les caractres spciaux et les espaces sont interdits. (Ce nom est
unique.)

Titre : nom qui sera visible dans la partie administration.

Description : champs optionnel.

Titre du module : nom du menu qui sera visible sur le site. Il est obligatoire
car il permet la cration dun nouveau module.
Jai donc cr un menu qui affiche les liens vers la seconde partie du travail de

Victor.

Ensuite, il suffit de cliquer sur Sauver . Le menu est maintenant cr. Par
contre, si on affiche le site (grce loption Prvisualiser ), on remarque que le
menu nest pas affich. Pour ce faire, il faut aller dans la gestion des modules
(Extensions > Gestion des modules), cliquer sur
transformera en

( cot du nom du module) qui se

On peut modifier les paramtres du module en cliquant sur son nom.

Jai paramtr les options suivantes Montrer le titre : Oui , Position : left ,
Ordre : 2 : Les blessures , Niveau daccs : Public .
Le menu secondaire (les blessures) est donc affich gauche, sous le menu principal
et tous les visiteurs y ont accs.
42
42

On peut maintenant sauvegarder les modifications. Si on prvisualise, on constate

que le menu est publi, mais quil ne contient pas encore de lien.
7.6.2.1

Ajout de liens dans un menu

Une fois que le menu existe, il faut lui attribuer des liens.
On clique sur Menus > Menu blessures (nom que jai choisi). Dans cette page, on
choisit Nouveau et on slectionne le type dlment du menu.
Comme je dsire un lien vers un article en particulier, je slectionne donc :
Lien interne > Articles > Article > Un article.

Aprs avoir choisi le type de lien, on accde une nouvelle page.

Comme exemple, je vais crer un lien vers larticle historique . Les informations
suivantes sont complter :
-

Titre : Historique (nom du lien prsent dans le menu).

Alias : historique .

Lien : option dj complte.

Afficher dans : Le rugby (on choisit le menu dans lequel apparaitra le

lien).

lment parent : je ne modifie rien (cela permet ventuellement de crer un

sous-menu).

Publi : Oui .

Ordre : par dfaut, les nouveaux lments du menu sont placs en dernire
position. Aprs la sauvegarde, lordre peut tre modifi.

Niveau daccs : Public .

En cliquant, ouvrir dans : Fentre parente avec navigation .

43
43

Paramtres Basique :
Il faut cliquer sur Slection pour choisir larticle vers lequel le lien doit
pointer. Dans cet exemple, je slectionne larticle historique .
Paramtres - Composant
Ces paramtres sont identiques ceux prsents lors de la cration dun article.
(Exemples : choix de laffichage du titre de larticle, de la section, de la catgorie, du
nom de lauteur, de la date)
Paramtres - Systme
Permet entre autres de donner un titre la page et de choisir sil sera affich.
Quand tout cela est complt, on peut appuyer sur Sauver . Ainsi, le lien
historique est affich dans le menu principal.
7.6.2.2

Cration dun sous-menu

Le rapport de Victor contient des titres mais aussi des sous-titres. Dans le site,
chaque lien du menu correspond un de ces titres. Pour se rapprocher au plus de
larborescence de son travail, il faut donc crer des sous-menus.
Par exemple, le titre Folklore contient 4 sous-titres : Haka , Chants ,
Troisime mi-temps et Bagarres .
Pour crer un sous-menu, il suffit de suivre la mthode applique pour la
cration dun menu (expliqu prcdemment), une diffrence prs : il faut donner
un lment parent au lien.
Pour les 4 liens (Haka , Chants, Troisime mi-temps et Bagarre), il faut donc
dclarer que Historique est llment parent.
Quand on ouvre la page de gestion du menu concern (ici le menu principal), on
remarque que le lien Historique est un llment parent de Haka .
44
44

Sur le site, par dfaut, seul lien parent est visible dans le menu. Pour afficher les
liens enfants, il faut cliquer sur le lien parent. Pour quils soient affichs
automatiquement, il faut diter le module du menu (Extensions > Gestion des
modules). Dans les paramtres, on doit slectionner oui dans loption Toujours

afficher les sous-menus .

Remarques : Par dfaut, le lien vers la page daccueil sappelle home . Je
lai modifi pour quil sappelle Accueil en changeant le titre et lalias de ce lien.
Par contre, dans le module breadcrumbs , le nom nest pas modifi. Pour changer
cela, il faut aller dans Extensions > Gestion des modules > Breadcrumbs. Dans
Paramtres , on peut modifier Texte pour le chemin d'accs de la page
d'accueil .
La position initiale du lien Accueil tait dans le menu principal. Cependant,
on prfrait quil se trouve dans le menu horizontal. Un lien peut tre dplac
facilement dun menu lautre grce loption Dplacer qui permet de choisir le
nouvel emplacement dun lien.
7.6.2.3

Insertion de liens externes

Jusqu prsent, tous les liens des menus pointaient vers des lments du site.
Cependant, on peut aussi insrer des liens vers des sites externes.
Pour ce faire, dans Menus, il faut slectionner le menu dans lequel le lien sera
insr, cliquer sur Nouveau et slectionner Lien externe . Ensuite, il faut
introduire le titre, lalias, ladresse du lien et slectionner le menu dans
45
45

lequel il apparaitra. Il faut galement slectionner llment parent (optionnel),

choisir si le lien sera publi et le niveau daccs. Par dfaut, le lien souvre dans la
fentre courante mais il est possible de modifier ce paramtre afin quil apparaisse
dans une nouvelle fentre (avec ou sans barre de navigation).
Cette mthode fonctionne trs bien mais peut poser problme quand on a de
nombreux liens. En effet, le menu comportant les liens risque davoir une longueur
importante. Cest pourquoi, il est possible de rattacher chaque lien une catgorie.
Ainsi, dans le menu, seul le nom de la catgorie est affich. En cliquant dessus, on
accde une nouvelle page affichant les liens.
Avant de crer les liens, il faut dabord concevoir les catgories.
Pour ce faire, il faut se rendre dans Composant > Liens web > Catgories et cliquer
sur Nouveau . Le principe est le mme que pour la cration de catgories darticles
(voir 7.5.3).
Ensuite, il faut crer le lien via Composants > Liens web > Liens o on clique sur
Nouveau . Dans la page qui apparait, il faut introduire le nom du lien, lalias et
ladresse (URL), cocher sil sera publi et slectionner la catgorie laquelle il
appartient. Lordre des liens ne peut tre modifi quaprs avoir t sauvegard. De
plus, on peut entrer une brve description du lien et choisir si le site souvrira dans la
fentre utilise ou dans une nouvelle fentre (avec ou sans navigation).
Pour terminer, il faut insrer le(s) lien(s)
dans un menu. Dans ce site, les liens externes
font partie dun menu plac droite. Jai donc
cr un nouveau menu appel
Liens . Dans celui-ci, jai cliqu sur
Nouveau et jai slectionn Liste de
catgories qui se trouve dans Lien Interne >
Liens web > Catgorie. Dans cette page, on
introduit un titre, un alias, on coche le menu
dans lequel il apparait, la catgorie laquelle
46
46

il appartient et sil sera publi. Lordre des liens ne peut tre modifi quaprs avoir
t sauvegard. On dcide galement si le site souvrira dans la fentre active ou dans
une nouvelle (avec ou sans navigation). Dans les paramtres basiques, il ne faut pas
oublier de slectionner la catgorie vers laquelle le lien pointera. Grce cette
mthode, les liens ne sont plus directement affichs dans le menu Liens . Seul le
nom de la catgorie est affich.
Un exemple pour mieux comprendre : si Victor dsire insrer un nombre
important de liens vers des sites en rapport avec le rugby, il peut crer une catgorie
Rugby . Celle-ci sera affiche dans le menu Liens . En cliquant dessus, on
accde un nouvelle page affichant les liens.

7.7.

Cration dun formulaire de contact

Lorsquon cre un site internet, il est important de penser la rubrique

Contact(s) . En effet, quand un internaute visite un site, il peut avoir envie dentrer
en contact avec le rdacteur, le webmaster ou toute autre personne en rapport avec le
site. Il est donc ncessaire de ne pas ngliger cette partie du site. Cest pourquoi
Joomla! permet la cration dun formulaire.
Tout dabord, il faut crer un contact via le menu Composants > Contacts >
Contacts. La liste des contacts est affiche. Pour crer un nouveau, il faut cliquer sur

Nouveau . Ensuite, il faut entrer certaines informations sur le contact.

On commence par remplir la partie Dtails . On y inscrit le nom du contact,
on prcise sil doit tre publi, quelle catgorie il appartient, sil est li un
utilisateur, lordre et le niveau daccs.
Ensuite, on remplit les Informations (adresse, numro de tlphone, photo).
Enfin, on peut modifier les :
Paramtres du contact : on dcide quelles seront les informations visibles
sur le site.
Paramtres avancs : on choisit les icnes utilises pour certaines
47
47

informations (tlphone, mail)

Paramtres de lemail : on dcide si la page affiche un formulaire de
contact. Si cest le cas, on peut choisir si le formulaire contient une option
permettant linternaute de recevoir une copie du message envoy. On peut
galement saisir des mots qui, sils sont introduits dans le formulaire,
permettront de bannir le message.
Une fois que le contact existe, il faut encore crer un lien qui pointe vers lui. On
se rend donc dans le menu dans lequel le lien va apparatre, on cre un nouveau lien
et on slectionne Fiche standard de contacts

Dans cette page, on insre le titre et lalias. On choisit sil sera publi, le niveau
daccs et le menu dans lequel apparaitra le lien.
Dans les paramtres basiques, on slectionne le contact afficher. On peut
galement choisir loption Menu droulant : montrer . Cette option se rvle bien
utile quand on a plusieurs contacts. Je lai utilise dans le site car elle permet de
rassembler tous les contacts dans une mme page. Il suffit de choisir le contact voulu
dans le menu droulant et les informations sont affiches.

48
48

7.8.

Insertion dune galerie photos

Insrer une galerie photos tait une des consignes de Victor. De nombreux
composants et plugins sont disponibles sur le net mais le choix ne fut pas trs facile.
En effet, je travaille sur une version rcente de Joomla! (1.5) et il nexiste pas encore
beaucoup de galeries photos adaptes.
Je me suis rendue sur le site officiel (www.joomla.org) qui ma redirig vers
http://extensions.joomla.org/. Dans un premier temps, jai opt pour Slimbox
Image Gallery Plugin for Joomla! v 1.5 dont le rendu est assez similaire la
clbre galerie Lightbox . En cliquant sur une des vignettes, limage sagrandit.
Quant au reste du site, il sassombrit en arrire-plan. En passant la souris sur
limage, les boutons permettant le passage limage suivante ou prcdente
apparaissent.
Linstallation du plugin est trs simple mais lutilisation devient pnible quand
on a de nombreuses photos afficher. En effet, pour lutiliser, il faut crer un article
dans lequel on insre le code suivant :
{slimbox url de limage1, url de la vignette1, commentaire1 ; url de limage2, url de la
vignette2, commentaire2}. On crit une fois slimbox suivi de lurl de limage, de la
vignette et ventuellement un commentaire. Ces lments sont spars par une
virgule. Si on dsire afficher plusieurs images, on spare les donnes de chaque image
par un point virgule.
Je nai pas supprim ce plugin car il peut savrer utile quand on dsire afficher
quelques photos dans un article.
Jai donc dcid de me mettre la recherche dune autre galerie, plus facile
grer. Cest ainsi que jai dcouvert Phoca Gallery with Slideshow, similaire la
galerie prcdemment teste.
Aprs avoir vu plusieurs exemples et modes demploi de cette galerie, je lai
tlcharge et installe.

49
49

7.8.1.

Installation

Tout dabord, il faut aller dans Extensions > Installer/Dsinstaller.

Dans Archive transfrer , parcourir pour atteindre le fichier dinstallation (avec
lextension .zip ) et cliquer sur Transfert de fichier & Installation . Un premier
message apparait : Installateur Composant Succs et un deuxime prcise que le
dossier images\phocagallery\ a bien t cr. Aprs, on a le choix entre deux
options : installer ou mettre jour. Dans mon cas, jai donc choisi dinstaller. Un
message confirme que linstallation est russie. ( Phoca Gallery was successfully
installed ).

7.8.2.

Cration de la galerie

Pour commencer, il faut crer une catgorie via le menu Composants > Phoca
Gallery > Categories en cliquant sur Nouveau . Dans mon exemple, je lui ai donn

le titre Rugby , jai vrifi que Oui tait bien coch pour loption Publi . On
peut aussi insrer une image et une description.
Quand plusieurs catgories existent, il est possible de crer des sous-catgories en
dsignant une catgorie comme tant llment parent.
Ensuite, il faut crer les dossiers comprenant les images. Ceux-ci doivent se
situer dans images\phocagallery . Cette opration peut tre ralise grce au menu
Site > Gestion des mdias. Aprs avoir cr un dossier (ici, appel rugby), il faut donc

y insrer les images en utilisant loption Parcourir le disque qui se trouve dans
Transfrer un fichier [ Max = 10M ] . Ensuite, il faut lancer le transfert.
Dans le menu Composants > Phoca Gallery > Gallery, il faut cliquer sur
Multiple Add , vrifier que oui est bien slectionn pour loption Publi et
choisir la catgorie. Puis il faut slectionner toutes les images et il ne reste plus qu
enregistrer.
Remarque : La cration des vignettes se fait automatiquement lors de la
sauvegarde.
Maintenant que la galerie est cre, il faut un lien pour y accder. Dans ce site,
le lien est dans le menu horizontal situ sur le haut de la page. Il faut donc
50
50

aller dans Menus > Menu haut et cliquer sur Nouveau . Dans la page affiche, il
faut choisir Phoca Gallery (dans lien interne), puis :
-

All Categories > Phoca Gallery Category List Layout si on veut afficher une
liste de toutes les galeries.

Category > Phoca Gallery Category Layout si on dsire afficher une galerie
prcise.
Dans la page affiche, il ne reste plus qu donner un nom, par exemple

galerie (nom du lien dans le menu) et sauvegarder. prsent, la galerie est prte
fonctionner et elle dispose dun lien pour y accder.
La page affiche les vignettes des images. Quand on clique sur lune delles,
limage sagrandit et le reste du site sassombrit en arrire plan. On peut galement
afficher les photos sous forme de diaporama dans lequel les images dfilent
automatiquement. Aperu du rendu :

7.8.3.

Paramtres de la galerie

La galerie telle quelle est dans laperu ci-dessus est affiche avec les
paramtres de base. De nombreuses options peuvent tre ajustes.
Dans longlet Gallery de Phoca Gallery, un tableau affiche toutes les images
prsentes dans les diffrentes galeries.

51
51

La vignette de limage est affiche, suivie du titre, du nom du fichier, de licne

qui signale si limage est publie ou non, lordre, la catgorie et lID.
Par dfaut, le titre est identique au nom du fichier. Toutefois, en cliquant dessus, il
peut tre modifi.
Pour paramtrer la galerie, il faut aller dans le menu qui contient la galerie et
cliquer sur le nom de la galerie. Il est ainsi possible de modifier les couleurs et tailles
des diffrents textes, la couleur et la taille de la bordure entourant la photo, la couleur
de fond. On peut choisir si on affiche le nom, la description, la catgorie de limage et
les icnes (pour zoomer et tlcharger). Les options du diaporama peuvent galement
tre modifies : intervalle entre deux images, affichage des boutons, taille des images.
Le style a t lgrement modifi :
-

Jai modifi la couleur de la petite bordure qui saffiche quand on survole une
vignette : Border color (mouseover) : #f66200. Cest une couleur orange
identique la couleur affiche au survol de certains liens.

Diminution de la largeur de la bordure entourant limage agrandie :

8 pixels au lieu de 10.
Par dfaut, le nom de la photo est affich en dessous de la vignette. Jai

dsactiv cette option et jai activ celle qui permet dafficher une description.
Comment crire une description ?
Dans ladministration (via Composants > Phoca Gallery > Gallery), lorsquon clique
sur le nom dune image, on peut modifier son nom, sa catgorie, lordre, son tat de
publication mais galement introduire une description.

52
52

7.9.

Affichage du nom du site

Dans la version 1.5 de Joomla!, pour afficher le nom du site dans la barre de
titre du navigateur ainsi que dans les onglets, un plugin est ncessaire. Aprs avoir
effectu quelques recherches, je me suis dirige vers : Website name .
Pour linstaller, il faut aller dans Extensions > Installer/Dsinstaller, choisir le fichier
plugin_1.5_website_name.zip en utilisant le bouton Parcourir , puis cliquer
sur Transfert de fichier & Installation . Sil ny pas eu de problme lors de
linstallation, un message apparait Installateur Plugin Succs .
Ensuite, dans Extensions > Gestionnaire des plugins, il faut cliquer sur System
- Website name plugin et mettre Activ Oui . Dans les paramtres, on peut
choisir si le nom du site est plac avant ou aprs le titre de la page. On peut galement
insrer un sparateur entre les deux lments.
premire vue, ce plugin fonctionnait trs bien. Cest aprs quelques jours que
jai remarqu que ce ntait pas le cas sur toutes les pages. En effet, sur les pages
contenant seulement des articles, il ny avait aucun problme. Par contre, sur la page
Contacts , Galerie photos et Plan du site il n'affichait pas les noms des
pages.
Jai fait part de ce problme sur http://forum.joomlafacile.com/, le forum du
portail francophone de Joomla!. Dautres utilisateurs ont affirm avoir le mme
problme. Aprs quelques jours, un modrateur du site a propos une nouvelle
version du plugin ( plugin_1.5_website_name-May2008.zip ). Jai donc remplac
lancienne version par celle-ci et depuis, cela fonctionne correctement.

53
53

7.10. Charte graphique

Par dfaut, Joomla! propose 2 templates. ( Beez et rhuk milkyway .)
Pour slectionner le template afficher, il faut se rendre dans : Extensions >
Gestionnaire des templates.

Chaque template se trouve dans un sous-dossier de Templates , chacun deux

est constitu dun :
-

Dossier css : ce dossier contient toutes les CSS (feuilles de style en cascade).

Dossier images : contient les images utilises pour la cration du template.

Dossier script : dossier qui contient des scripts. (Ce dossier nest pas
toujours prsent.)

Fichier index.php : corps du template, c'est la page qui contient

larchitecture du site, les appels vers les modules, les balises CSS, les scripts

Fichier template_thumbnail.png : image

(gnralement avec l'extension .png ) qui prsente
l'apparence du template. Cette image est utilise dans le
gestionnaire des templates quand on survole le nom
dun template. Exemple ci-contre :

Fichier favicon.ico : image (de 16 x 16 pixels) affiche cot de ladresse du

site. Il permet de mettre en valeur le site dans une liste de favoris.

Fichier templateDetails.xml : fichier d'installation du template. Il contient

des lments sur le template : nom, date de cration, auteur, email et site de
lauteur, type de licence, version, description, fichiers qui composent le
template (exemples : CSS et images), les positions disponibles pour les
modules et les paramtres.
Pour le design de ce site, jai dcid de reprendre les

bases du template Aster et de le modifier. Pourquoi avoir

choisi ce template ? Car il ma plu par sa disposition des
lments et sa simplicit. Le rendu est identique dans les 3
navigateurs que jai tests (Firefox 2, Internet Explorer 7 et
Opra 9).
54
54

Tout dabord, je lai linstall pour vrifier quil fonctionnait correctement.

7.10.1. Installation dun template

Quand on tlcharge un template, il est gnralement dans un dossier
compress. Pour linstaller, il faut aller dans Extensions > Installer/Dsinstaller.
Ensuite, parcourir le disque la recherche du dossier compress et cliquer sur
Transfert de fichier & Installation . En principe, un message signale que
linstallation a bien eu lieu.
Ensuite, jai copi le dossier de ce template et modifi le fichier
templateDetails.xml pour lui donner un nouveau nom afin de pouvoir le
diffrencier de loriginal.
Enfin, il faut se rendre dans Extensions > Gestionnaire des templates et
slectionner le template afficher.

7.10.2. Modification du template

7.10.2.1 Page index.php
Comme expliqu prcdemment, le template contient une page index.php .
Pour mieux comprendre la suite, il est essentiel de comprendre limportance de cette
page. Celle-ci contient la structure des pages, elle est compose de code HTML et PHP.
Voici un extrait :
<div id="header">
<div id="headerinside">
</div>
<div id="topmenu">
<jdoc:include type="modules" style="horizontal" name="user3"
style="xhtml" />
</div>
</div>

La page est compose de balises <div></div>, celles-ci permettent de diviser le

site en blocs pour raliser la mise en page.
Dans lexemple ci-dessus, il y a donc un premier groupe (header) qui englobe deux

55
55

autres groupes ( headerinside et topmenu ). Le groupe header correspond

lentte du site qui regroupe la bannire ( headerinside ) et le menu horizontal
( topmenu ).
Dans la balise topmenu , la ligne <jdoc:include type="modules"
style="horizontal" name="user3" style="xhtml" /> appelle le module qui

contient le menu horizontal.

7.10.2.2 Favicon
Un favicon est mot issu de la contraction entre favorites et icon . Cest
une petite icne (gnralement 16 x 16 pixels) qui est affiche dans les navigateurs
web, notamment dans la barre dadresse. On la retrouve galement dans la liste des
favoris et dans les onglets, son but est dattirer le regard. Il existe diffrents moyens
pour crer ce type dicne :
-

En crant une image au format 16 x 16 pixels. Ensuite, il ne reste plus qu

modifier lextension en .ico .

laide de logiciels spcialiss : IconEdit32, IconWare

Via certains sites o il suffit denvoyer une image, celle-ci est transforme en
fichier .ico . Ensuite, il ne reste plus qu tlcharger limage. Exemple :
http://1favicon.com/en/index.php
Pour le site, jai utilis une image contenant un ancien ballon de rugby. Jai

redimensionn limage dans Photoshop, puis jai modifi lextension.

Avec Joomla!, une fois que licne est cre, il faut la renommer ( favicon.ico ) et la
placer dans le dossier du template, avec les dossiers CSS , images et
index.php . Rsultat :
7.10.2.3 Choix des couleurs ?
Pour certains sites, il nest pas ncessaire de se poser la question car la charte
graphique dpend dun logo. Ceci ntait pas mon cas. Le choix des couleurs ne fut
donc pas chose facile. Quand jai demand lavis de Victor, il ma rpondu quil navait
aucune prfrence.

56
56

Jai donc fait quelques essais avec les couleurs suivantes : bleu, orange, rouge.
Victor a finalement choisi la version contenant un fond beige avec une bande
horizontale rouge fonce, le contenu du site tant affich sur fond blanc.
On peut constater que la charte graphique du site est assez simple. Cest voulu et
cela pour deux raisons :
-

Un design trop charg a pour consquence un temps de chargement de la page

plus long, ce qui nerve les internautes et les pousse parfois fermer la page.

Le but de ce site est de prsenter des informations. Le fond prime sur la forme,
il faut donc viter tout ce qui pourrait dtourner l'attention du visiteur.
7.10.2.4 Fond
Jai dabord travaill le fond. Au dpart, il tait de couleur grise. Je lai modifi

pour quil soit beige clair avec une bande horizontale rouge fonce. Celle-ci fait 40
pixels de large et 225 pixels de haut. Pour quelle saffiche sur toute la largeur, il est
ncessaire dinsrer une ligne dans la CSS : background-repeat: repeatx; .Ceci permet de rpter horizontalement limage. Grce cela, limage insre

est de petite taille et le chargement de la page est donc plus rapide.

7.10.2.5 Entte
Dans balise headerinside , jai supprim la ligne suivante :
<h1 style="margin:0"><img src="templates/<?php echo $this->template
?>/images/logo.png" width="400" height="140" alt="<?php echo
$mainframe->getCfg('sitename');?>" /></h1>

Ce code tait prsent pour afficher une image (un logo par exemple) ou le titre
du site dans la bannire. Le nom du site est dj sur la bannire, il nest donc pas
ncessaire de le rpter.
Jai adapt la hauteur de lentte afin de pouvoir afficher une bannire de taille
plus importante. Elle comporte le titre du travail de Victor ainsi des images de rugby
que nous avons choisies ensemble. Jai appliqu un effet de dgrad sur les photos
pour quelles se fondent mieux entre elles.

57
57

7.10.2.6 Contenu
Le contenu du site est crit en noir sur fond blanc, les titres en orange.
Le code suivant a t ajout afin de pouvoir afficher le fil dAriane.
<div id="pathway">
<jdoc:include type="modules" name="breadcrumb" />
</div>

7.10.2.7 Menus
Les liens du menu horizontal sont affichs en blanc et prennent la couleur
orange quand on les survole. Limage de fond a t ralise dans Photoshop. Cest un
rectangle rouge fonc, aux angles arrondis avec un lger ombrage en dessous.
Les menus verticaux sont crits en gris trs fonc sur fond beige. Au survol dun
lien, celui-ci devient rouge sur fond blanc.
Les titres sont crits en blanc avec une image de fond semblable celle qui est utilise
pour le menu horizontal. Cependant, la taille est rduite.
7.10.2.8 Pied de page
Le contenu du pied de page est galement crit en blanc. Limage de fond est un
rectangle (rouge fonc) dont les coins infrieurs sont arrondis. Aux deux extrmits,
jai insr deux petites images de rugby dont jai rduit lopacit pour une meilleure
intgration.

7.11. Plan du site

Le plan du site (sitemap en anglais) est un lment important. En effet, il
permet aux internautes davoir une vue globale du site en un seul coup d'il. De plus,
il permet un meilleur rfrencement car les moteurs de recherche ont la possibilit de
trouver les adresses de toutes les pages au mme endroit.
Pour afficher un plan dans un site Joomla!, il faut utiliser un composant.
Aprs avoir fait des recherches, jai opt pour Xmap , bas sur le populaire
Joomap . Il permet de crer des plans de site en utilisant la structure des liens des
menus. De plus, il est compatible avec la version 1.5 de Joomla!. Il cre galement un
58
58

plan du site au format XML. Ladresse de celui-ci peut tre soumise des moteurs de
recherche (Google par exemple) ce qui amliore le rfrencement du site.

7.11.1. Installation
Pour linstaller, il faut se rendre dans Extensions > Installer/Dsinstaller et
choisir le fichier com_xmap-1.1_for_Joomla_1.5.zip puis cliquer sur Transfert
de fichier & Installation . Sil ny a pas eu de problme rencontr, un message
saffiche : Installateur Composant Succs .

7.11.2. Paramtres
Pour modifier les paramtres, il faut se rendre dans Composants > Xmap. Trois
onglets sont notre disposition :
-

Sitemaps : dans cette partie, on peut choisir quels sont les menus affichs
dans le plan ainsi que leur ordre. Des statistiques indiquent le nombre de liens
et de visites sur la page affichant le plan.
En cliquant sur Options en haut droite, un menu droulant apparait.
Parmi les options proposes, il y a la possibilit de modifier les prfrences.

CSS : permet de modifier la feuille de style du plan. Celle-ci a t dsactive et

la mise en page se fait grce la CSS principale (template.css).

Extensions : permet de rajouter des extensions au composant.

7.11.3. Cration du lien

Pour crer le lien, il faut aller dans Menus et slectionner le menu dans lequel le
lien apparaitra. Ensuite, cliquer sur Nouveau et slectionner Xmap dans
Lien interne . Les lments complter sont les mmes que pour les liens
expliqus prcdemment.
59
59

7.12. Hbergement
Hberger un site signifie que lon dispose dun espace sur le web afin dafficher
un site en ligne. Il existe de nombreux hbergeurs et diffrents types dhbergements
qui se diffrencient notamment par la taille de lespace disque disponible, le prix, la
scurit, la taille de la base de donnes, les langages de script
Le dveloppement du site a t ralis en local, sur mon ordinateur. Ensuite, je
lai transfr sur mon site, dans un sous dossier (www.pierlu.be/tfe), afin de vrifier
le bon fonctionnement du site en ligne. Avec Victor, nous avons discut du futur nom
de domaine, c'est--dire ladresse du site. Celle-ci doit tre courte, simple et facile
retenir. Il a propos rugbyetblessures.be . Cest une adresse simple qui rsume
bien son travail.
Cependant, le site ne sera utilis que si Victor participe au concours. Pour cela, il
doit avoir obtenu une cote minimum de 16/20 pour son travail de fin dtudes. Nous
avons donc dcid de laisser temporairement le site sur mon hbergement. Si son
travail est reu et quil est autoris participer au concours, nous transfrerons le
projet vers un autre hbergement avec ladresse voulue.

60
60

8.

GLOSSAIRE/ABRVIATIONS

Alias : les mots insrs dans alias sont utiliss si lurl rewriting est activ.
Quest ce que lurl rewriting ? Cest une option qui permet de crer des adresses url
plus mnmotechniques. Un exemple pour mieux comprendre : voici quoi ressemble
une adresse quand lurl rewriting nest pas activ : http://nomdusite/index.php?
option=com_content&view=article&id=44&Itemid=54
&a42ae665c0cca35feb7e3649fd4477c8=3d16e9687b91a465cb25567ce2a1e508 .
Alors que si on lactive, pour la mme page, cela donne ceci :
http://nomdusite/index.php/historique. Pour un article, on peut insrer le titre
Historique du rugby et lalias historique . Cest ce dernier qui sera utilis lors
de la formation de ladresse url.
Atom : voir Flux de syndication
Balises mta : ce sont des informations places dans lentte des pages HTML. Elles
contiennent, entre autres, des mots-cls, le nom de lauteur, le titre de la page, une
description Ces informations ne sont pas visibles par les internautes, elles sont
utilises par les moteurs de recherche.
Bitmap : les images en mode bitmap sont composes de petits carrs appels pixels.
Si on agrandit une image bitmap, Photoshop doit donc inventer les pixels
manquants ce qui provoque une perte de qualit. Ce mode soppose au vectoriel,
utilis par exemple par Illustrator, galement dvelopp par Adobe.
Blog : un blog (ou blogue) est un site compos de billets (ou articles) crits dans
lordre chronologique. Cest une sorte de journal intime, de journal de bord dans
lequel le blogueur (le propritaire du blog) insre un contenu textuel mais aussi des
images, des vidos, du son. En gnral, les blogs permettent aux lecteurs dinsrer un
commentaire.

61
61

Breadcrumbs : en franais, on utilise le terme fil dAriane . Cest une suite de

liens hirarchiss qui affichent le chemin de navigation.
Exemple : Accueil Galerie photos Rugby
Couleur RVB : RVB est lacronyme de Rouge Vert Bleu. En combinant ces trois
couleurs, on obtient du blanc (procd appel synthse additive). Cest un format de
codage des couleurs qui est utilis en vido ainsi que pour laffichage sur les crans.
Couleur CMJN : CMJN est labrviation de Cyan, Magenta, Jaune (et Noir). Ce
mode de couleur est utilis en imprimerie.
CSS : acronyme de Cascading Style Sheets (en franais : feuilles de style en cascade).
Cest un langage qui, partir dun seul fichier (la feuille de style), permet de dfinir la
prsentation de plusieurs pages web.
Flux de syndication : Le format RSS (traduisez Really Simple Syndication )
permet ainsi de dcrire de faon synthtique le contenu d'un site web, dans un fichier
au format XML, afin de permettre son exploitation par des tiers. 7
Atom est galement un flux de syndication, concurrent de RSS.
GNU/GPL : La Licence Publique Gnrale GNU est la licence la plus utilise par les
logiciels libres. Elle permet davoir accs aux codes sources dun logiciel, de modifier
le programme, de distribuer des copies
IFrame : Fentre qui permet dinsrer une page web dans une autre page. La taille et
lemplacement sont paramtrables.
LMS : Une plate-forme d'apprentissage en ligne, appele parfois LMS (Learning
Management System), est un site web qui hberge du contenu didactique et facilite la
mise en uvre de stratgies pdagogiques.

Source : http://www.commentcamarche.net/www/rss.php3
62
62

Une plate-forme e-learning (ou LMS) est un produit driv des logiciels CMS
(content management system) mais prsente des fonctions diffrentes pour la
pdagogie et l'apprentissage. 8
PHP : (Hypertext Preprocessor) langage qui permet de crer des sites dynamiques.
Pixel : un pixel, px en abrg, est le plus petit lment qui constitue une image.
Rss : voir flux de syndication.
Template : le template permet de modifier lapparence dun site. Dans Joomla!, un
template contient au minimum une page dcrivant la structure de la page et un fichier
CSS qui dfinit la prsentation de la page.
Vectoriel : Le mode vectoriel utilise des courbes mathmatiques. Une ligne, par
exemple, nest dfinie que par les coordonnes des points de ses extrmits.
Lavantage de ce procd est quil ne gnre pas de perte de qualit lors dun
agrandissement.
XML : acronyme deXtensible Markup Language. Cest un langage qui permet de
structurer les donnes afin de faciliter les changes.

Source :http://fr.wikipedia.org/wiki/Plate-forme_d'apprentissage_en_ligne

63
63

9.

CONCLUSION
Le travail de fin dtudes est une tape importante de ce baccalaurat, cest

laboutissement de trois annes de labeur. Il a pour objectif de mettre en application

les connaissances acquises durant notre formation mais cest aussi loccasion de faire
des dcouvertes. Personnellement, ce travail ma offert la possibilit de dcouvrir les
CMS et plus particulirement Joomla!. Je ne peux que remercier les professeurs de
lcole qui mont conseille lors de ce choix. En effet, cet outil est de plus en plus
rpandu, certaines socits de cration de sites se sont mme spcialises dans
lutilisation de ce CMS.
Un autre aspect positif de ce projet est le travail en quipe. Le multimdia ne se
rsume pas un concepteur devant son ordinateur. Travailler en groupe permet
denrichir un projet grce lapport dides et de connaissances. Victor na aucune
connaissance dans le domaine du multimdia. Par consquent, raliser ce site avec lui
ma aid grce son regard diffrent sur le projet. Jai galement demand lavis des
personnes extrieures au projet car il nest pas toujours facile davoir un regard
critique sur son propre travail. Ceci ma permis damliorer le site.
Si on se rfre aux objectifs fixs initialement, je pense pouvoir affirmer que jai
men bien ma tche. Victor dispose dun site dans lequel il pourra insrer le
contenu de son travail. linstant o jcris ces lignes, le site nest pas encore
totalement termin. Victor vient dachever son travail, nous allons donc pouvoir
insrer son contenu. En plus de laide que je lui apporterai, mon rapport sera sa
disposition, comme un petit guide qui reprend toute les fonctions qui lui seront
utiles. Un site nest jamais parfait, il est donc probable que le site subisse quelques
modifications.
Pour conclure, jajouterai que ce travail ma conforte dans lide que je me
faisais du multimdia, un domaine vaste et en perptuelle volution. Jai le sentiment
davoir progress tout en sachant quil me reste encore beaucoup apprendre

64
64

10. APERU DU SITE

65

11. ABSTRACT
11.1. Version franaise
Ce travail de fin dtudes consiste en la cration dun site internet pour Victor
Bastin, lve la Haute Ecole de la Province de Lige, dans loption communication.
Il rdige son travail de fin dtudes dans le cadre dun concours organis par
lOlympic Health Foundation (OHF). Lobjectif est dexpliquer un des cinq thmes
repris dans la charte de lOHF.
Ce rapport se divise en deux parties, une thorique et une autre pratique :
-

Dans un premier temps, il explique en quoi consiste le concours de lOHF.

Ensuite, il parle des logiciels employs et des CMS (Content Management
Systems), plus particulirement de Joomla! , un des plus puissant systme
de gestion de contenu open source utilis pour la cration et mise jour du site.

La seconde partie dcrit le dveloppement du site internet

11.2. Version anglaise

This degree-conferring dissertation consists in building a website for Victor
Bastin, a student in communication studies at Haute Ecole de la Province de Lige
whose own dissertation deals with a contest organized by the Olympic Health
Foundation (OHF). The objective is to explain one of the five themes of the OHF
charter.
This work is divided into two parts, one theoretical, the other one practical:
-

The first one explains what the OHF contest consists in.
Then it deals with the kind of software used and with Content Management
Systems, more particularly the cutting edge Joomla!, one of the most powerful
open source management systems used to build and update websites.

The second part describes the development of the website itself.

66
66

12. BIBLIOGRAPHIE
12.1. Livre
Sur le site http://joomla.cocoate.com/fr jai pu lire une partie du livre suivant :
HAGEN Graf. Joomla 1.5. (3e dition).
Paris: Pearson, 2008 (Le campus), 420 pages

12.2. Personnes ressources

LEMORT, Albert
Haute Ecole Lon Eli Troclet, Jemeppe
Professeur
FRANSOLET, Roger
Haute Ecole Lon Eli Troclet, Jemeppe
Professeur

12.3. Document lectronique (PDF)

GAUTREAU Ivan. Joomla! pour les Nuls. Ou comment crer et administrer en toute
znitude un site Web avec Joomla! (Version 0.9.)
Avril 2007, 106 pages

12.4. Sites Internet

Actualit technologique et scientifique - News & Dossiers[En ligne]
http://www.techno-science.net/?onglet=glossaire&definition=620 (FR)
Consult le 5 mai 2008
Aide-Joomla.fr [En ligne]
http://www.aide-joomla.fr/ (FR)
Consult le 19 avril 2008

67
67

Alsacrations Cours et tutoriels HTML, CSS et standards Web [En ligne]

http://css.alsacreations.com/ (FR)
Consult le 9 avril 2008
BORDERIE, Xavier. Le Journal du Net [En ligne]
http://www.journaldunet.com/developpeur/tutoriel/out/outils-dreamweaver8/0.shtml (FR)
Consult le 30 avril 2008
CMS-FR.NET | Essayez-les avant de les installer ! [En ligne]
http://www.cms-fr.net/ (FR)
Consult le 20 avril 2008
Comment Ca Marche - Communaut informatique [En ligne]
http://www.commentcamarche.net (FR)
Consult le 19 avril 2008
Deziner Folio [En ligne]
http://www.dezinerfolio.com/ (AN)
Consult le 27 avril 2008
Filezilla : Le meilleur client FTP open source [En ligne]
http://www.filezilla.fr/ (FR)
Consult le 4 mai 2008
GNUArt [En ligne]
http://gnuart.org/francais/gnugpl.html (FR)
Consult le 26 avril 2008
GRAF, Hagen. Joomla! 1.5 Tutorial - Hagen Graf | Websites organisieren und
gestalten mit dem Open Source CMS [En ligne]
http://joomla.cocoate.com/fr/Versions-de-Joomla (FR)
Consult le 26 avril 2008
68
68

Guide CMS [En ligne]

http://guidecms.com/ (FR)
Consult le 19avril 2008
Joomla! [En ligne]
http://www.joomla.org (AN)
Consult le 18 avril 2008
Joomla! Extensions Directory [En ligne]
http://extensions.joomla.org/ (AN)
Consult le 18 avril 2008
Joomlafacile, le site de support Joomla! en franais [En ligne]
http://www.joomlafacile.com/ (FR)
Consult le 19 avril 2008
Joomla Templates, Components and Free Downloads for Joomla CMS [En ligne]
http://www.joomlashack.com/ (AN)
Consult le 13 avril 2008
Le Site du Zro, site communautaire de tutoriels gratuits pour dbutants :
programmation, cration de sites Web, Linux... [En ligne]
http://www.siteduzero.com/tuto-3-66-1-un-programme-utile-wamp.html#ss_part_1
Consult le 30 avril 2008
NewsGator - The RSS Company [En ligne]
http://www.newsgator.com/Individuals/TopStyle/Default.aspx (AN)
Consult le 29 avril 2008
NPDS - Gnrateur de portail Php / MySQL en Open Source [En ligne]
http://www.npds.org/article.php?sid=385 (FR)
Consult le 19avril 2008
69
69

Phoca.cz [En ligne]

http://www.phoca.cz/ (AN)
Consult le 12 avril 2008
SUREAU, Denis. Liste des CMS | Encyclopdie [En ligne]
http://www.knoler.eu/liste-des-cms (FR)
Consult le 28 avril 2008
Test Extensions [En ligne]
http://lesh.fr.nf/joomla_test/index.php (FR)
Consult le 19 avril 2008

70
70