130
4 1. TABLE DES MATIÈRES 1. Table des matières ......................................................................................... 4 2. Introduction ..................................................................................................... 7 2.1. Concours ............................................................... ................................................... 8 3. Présentation du projet ............................................................................... 10 3.1. Objectifs...................................................... ............................................................. 10 3.2. Public cible ............................................................... .............................................. 10 3.3. Plan du site ........................................................... .................................................. 11 4. Qu’est ce qu’un CMS ? ................................................................................. 12 4.1. Principales caractéristiques ............................................................... ............ 12 5. Joomla! ............................................................................................................. 14 5.1. Historique ............................................................... ............................................... 14 5.1.1. Versions de Joomla!............................................................. ........................................ 15

Mémoire Joomla

Embed Size (px)

DESCRIPTION

creation de site web

Citation preview

rapport-tfe

1. TABLE DES MATIRES1. Table des matires ......................................................................................... 42. Introduction ..................................................................................................... 72.1. Concours .................................................................................................................. 83. Prsentation du projet............................................................................... 103.1. Objectifs................................................................................................................... 103.2. Public cible ............................................................................................................. 103.3. Plan du site............................................................................................................. 114. Quest ce quun CMS ?................................................................................. 124.1. Principales caractristiques ........................................................................... 125. Joomla! ............................................................................................................. 145.1. Historique .............................................................................................................. 145.1.1. Versions de Joomla!..................................................................................................... 15

5.2. Critiques .................................................................................................................. 155.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 ........................................ 165.4. Prsentation du logiciel .................................................................................... 175.4.1. Menu .............................................................................................................................. 19

5.5. Types dutilisateurs............................................................................................. 225.6. Modules ................................................................................................................... 235.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 ........................................................................................... 266.1. Dreamweaver 8 .................................................................................................... 266.2. Filezilla 2.2.29....................................................................................................... 266.3. Photoshop CS3...................................................................................................... 276.4. Top Style 3.1 ........................................................................................................... 286.5. WAMP5 version1.6.5 .......................................................................................... 287. Dveloppement du projet ......................................................................... 297.1. Choix de Joomla! ................................................................................................. 297.2. Installation............................................................................................................. 297.2.1. tapes de linstallation ................................................................................................ 29

7.3. Utilisation des modules .................................................................................... 327.4. Cration dun nouvel utilisateur ................................................................... 337.5. Gestion des articles............................................................................................. 367.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 ....................................................................................................................... 417.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 ........................................................... 477.8. Insertion dune galerie photos ....................................................................... 497.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 .................................................................................. 537.10. Charte graphique ............................................................................................ 547.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 ..................................................................................................................... 5657.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 ........................................................................................................ 587.11.1. Installation .................................................................................................................... 59

7.11.2. Paramtres .................................................................................................................... 59

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

7.12. Hbergement .................................................................................................... 608. Glossaire/abrviations.............................................................................. 619. Conclusion....................................................................................................... 6410. Aperu du site ................................................................................................ 6511. Abstract ............................................................................................................ 6611.1. Version franaise ............................................................................................ 6611.2. Version anglaise .............................................................................................. 6612. Bibliographie ................................................................................................. 6712.1. Livre...................................................................................................................... 6712.2. Personnes ressources.................................................................................... 6712.3. Document lectronique (PDF)................................................................... 6712.4. Sites Internet .................................................................................................... 672. INTRODUCTIONMon 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 1Ce 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 socio- conomie.

1 Rsum de lOlympic Health Foundation Charte quon peut retrouver ladresse suivante :

http://www.olympic.be/Pub/OHF/OHF-Charter-fr.pdfCette 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 PROJET3.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.

103.3. Plan du siteMenu Le rugby 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.

Menu Les blessures Interviews

Interview 1

Interview 2

Conclusion

Lexique

Les blessures

Introduction Prsentation Comparaisons Conclusions

Conclusions

Menu horizontalAccueil

Galerie photos

Vidos Contacts Plan du site

Administration

LiensRugby

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/2 Certains CMS nutilisent pas de base de donnes. Les donnes sont sauves dans des fichiers textes ou XML. Quelques exemples : Zite/CMS, Phortail, pluxml.

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

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

4 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

5 Dfinition issue du site : http://joomla.cocoate.com/fr/Structure-fonctionnelle-d-un-CMSEnsuite, 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.

droite, par dfaut, les informations suivantes sont affiches :

Welcome to Joomla! : prsente un texte qui nous remercie davoir choisiJoomla! 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

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.

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 .

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

5.6. Modules

5.6.1. Types de modulesIl 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.

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

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

6. LOGICIELS UTILISS6.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

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.

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.6 Wamp est disponible pour Windows. Toutefois, il existe un quivalent pour Mac (MAMP) et pour

Linux (LAMP).

7. DVELOPPEMENT DU PROJET7.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 linstallationRemarque : 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 :

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.

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

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.

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-manager- author-registered-.qui-fait-2.htmlFrontend : 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.

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.

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

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

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

7.5.4. Cration dun articleAprs 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 larticlePour 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,

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

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

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

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

7.6.2. Cration dun menuPour 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 ( cot du nom du module) qui se transformera en.

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.

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

Paramtres Basique :Il faut cliquer sur Slection pour choisir larticle vers lequel le lien doit pointer. Dans cet exemple, je slectionne larticle historique .

Paramtres - ComposantCes 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 - SystmePermet 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-menuLe 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 .

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

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

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

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.

7.8.1. InstallationTout 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 galeriePour 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

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

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.

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.

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

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

7.10.1. Installation dun templateQuand 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 template7.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 :

La page est compose de balises , 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

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 appelle le module qui contient le menu horizontal.

7.10.2.2 FaviconUn 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.phpPour 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.

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 FondJai 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: repeat-

x; .Ceci permet de rpter horizontalement limage. Grce cela, limage insreest de petite taille et le chargement de la page est donc plus rapide.

7.10.2.5 EntteDans balise headerinside , jai supprim la ligne suivante :