24 H POUR CRER MON SITE WEB

Via un Systme de gestion de contenu [ cms Joomla! 1.5 ]

Support de cours Version 3 ASBL Arcade Janvier 2009 www.crayons.be

cms joomla! Ralisations de templates joomla ! formations et rfrencement www.croquis.be

24 H POUR CRER MON SITE WEB

Joomla! 1.5

Ou on parlera dergonomie, de gestion de contenu et de

graphisme, en passant par les bases de lhtml

Version Joomla! de ce syllabus: Joomla! 1.5

ASBL Arcade Wallonie 2009

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

Au fil du temps
0

MI N UTE

Tous ensemble .

HEURES

HEURES

Personnalisation du cms Joomla! 1.5.

HEURES

92

HEURES

Test de CSS cration dune page basique

avec une feuille de style.

94

HEURES

Extensions: dcouverte.

33

1 7

HEURES

CSS gestion des menus par lexemple.

5

95

HEURES

Rflexion et conception.

35

1 8

HEURES

Atelier et questions.
6

96

HEURES

Arborescence et ergonomie.

50

1 9

HEURES

Modifications en profondeur du template.

7

56

2 0

HEURES

Atelier structure.

103

HEURES

Croquis, et recherches graphiques.

58

2 1

HEURES

Atelier CSS.
9

104

HEURES

Recherche et installation dun template.

59

2 2

HEURES

Questions frquentes.
1 0

97

HEURES

Identit du site et charte graphique.

91

HEURES

Notions de CSS.

1 6
13

70

Test
4 dhtml cration dune page basique.

1 5
10

HEURES

Notions dhtml.

1 4

Dcouverte du site dexemple.

HEURE

Installation en local ou sur un serveur.

1 3

107

HEURES

Rvision et sance de questions.

61

2 3

HEURES

Sance de prsentation au groupe:

1 1

critiques et autocritiques.

HEURES

Les images pour le Web, les formats.

62
2 4

1 2

108

HEURES

Modifications et valuation finale.

HEURES

109

Installation du template:
modifications des images.

68

QUEL QUE S

MI N UTES

Bote outil

Une ralisation de lASBL Arcade Wallonie - 2009

DE

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[0] Premire minute, premires notions

Tous ensemble .

oomla! est un systme de gestion de contenu (en anglais,

CMS, pour Content Management system) cr par une
quipe internationale de dveloppeurs. Joomla! est un CMS
Open Source distribu sous licence GNU/GPL (entirement
gratuit) avec lequel vous pourrez mettre votre site dynamique en
ligne (forum, boutique en ligne, galerie photos, sondages...), le tout
sans connaissance technique particulire.
Sil vous faut les services dun graphiste avec des connaissances en html pour le
dveloppement dun graphisme et dune charte graphique personnalise, il ne
faut pas de notions particulires pour la gestion du contenu; de simples notions
de traitement de texte suffisent.
0.0 Origine du nom

Joomla! est la transcription phontique d'un mot swahili qui signifie tous ensemble , ou encore en un
tout .

Ce qui rend Joomla! diffrent, c'est notre engagement le rendre aussi simple que possible, tout en
offrant un maximum de fonctionnalits. Au final, des non techniciens pourront parfaitement grer euxmmes leur site, sans tre obligs de passer par des solutions propritaires aux cots exorbitants.
Joomla! ce n'est pas seulement un logiciel, ce sont aussi des personnes.
La communaut Joomla! est compose de dveloppeurs, de designers, d'administrateurs systmes, de
traducteurs, de rdacteurs et, le plus important, d'utilisateurs finaux
http://www.joomla.fr

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

0 .1 Ralisation dun portfolio personnel

HEURE
dapprentissage
de test
dexercice
de rvision

Ce support de cours a t revu et corrig avec lapparition de la version 1.5

du cms Joomla!, il est prvu, la base, pour des graphistes et est bas sur
un exercice: la cration dun portfolio reprenant des travaux dans une galerie,
une prsentation, un CV et un formulaire.
Cet exercice peut bien sur tre dclin sur tout autre projet. Il est
indispensable dassister la formation, car dautres notions seront
donnes en fonction du droulement des ralisations!

Ce document bas sur 24h, vous permettra au final davoir ralis un site dynamique, li une base de
donnes, et ceci sans connaissances particulires de programmation.
Des notions de base en html et graphisme sont voques et passes en revue; des liens sont proposs.
Mais ces notions ne sont pas ncessaires pour une gestion du contenu.
Jespre que ce document vous apportera une aide tangible, il est le fruit de notre exprience en webdesign
depuis une quinzaine danne.
Dans les premires pages vous trouverez des rponses techniques simples et prcises, ainsi que des pistes
pour une bonne structuration et organisation de votre site Internet. Par la suite, la partie crative est
aborde. Nous traitons aussi de principes plus gnraux comme le rfrencement, le css, sujets trs
importants qui font lobjet de formations annexes.
0.2 Mthodologie
chaque heure est attribue une tche. Plusieurs taches peuvent tres attribues pour une mme
heure. En fonction des connaissances du groupe, on peut modifier lhoraire, qui est donn ici titre de
structure.
Au final, des travaux de recherches, de rvisions et de tests peuvent tres donns entre les cours.
Les 24 h numres ici, doivent se donner idalement par groupe de 2h, sur plusieurs jours. Ceci pour
permettre lacquisition de certaines notions, via des exercices. Quand on aime, on ne compte pas. Il faudra
ensuite continuer ses exprimentations, et cent fois remettre son site en question. Dautres modules de
formation viendront complter celui-ci (traitement de limage, photographie, rfrencement).
Au final, un blog vous permettra de poser vos questions et de profiter de la synergie du groupe.
http://joomla-cms.blogspot.com et sur Facebook: http://www.facebook.com/group.php?gid=23676315149
Nous vous recommandons aussi la visite du site sur le Code dthique de linfographiste:
http://www.infographiste.net
Bonne formation!
Ivan Lammerant [ www.crayons.be ]
et les formateurs dArcade Wallonie ASBL.

2 4

Pr requis souhaits:
Matriel requis:

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

html, feuille de style (CSS), traitement de limage, traitement de texte.

Un ordinateur rcent et une bonne connexion ADSL.
Dreamweaver, Photoshop, Illustrator Adobe et Gimp.

Copyright 2009 Ivan Lammerant - ASBL Arcade Wallonie www.crayons.be / Sauf mention contraire, le
contenu de cette page est sous contrat Creative Commons.
Extraits avec laimable accord du site Joomladraft Copyright Joomladraft www.joomladraft.org
Blog de cette formation: http://joomla-cms.blogspot.com/.Ce blog via vos critiques et suggestions, nous permettra
daffiner ce syllabus en fonction de vos besoins. Si nous avons oublis de signaler des contributeurs, o des emprunts via
des ressources sur le net, merci de nous le faire savoir. Merci Didier Delhez de Mgalopole www.megalopole.com pour
la relecture de ce document et les corrections apportes.
Les auteurs du prsent tutorial et lASBL Arcade Wallonie ne sauraient tre tenus pour responsables des erreurs
ou des dysfonctionnements constats lors des phases de tests ou de mise en production dun site Joomla! suite
la lecture de ce document.
Vous avez la possibilit de faire un lien vers la page de tlchargement du document sur Calamo
http://fr.calameo.com/accounts/15960
http://creativecommons.org/licenses/by-nc-nd/2.0/fr/
Vous tes libres: de reproduire, distribuer et communiquer cette cration au public.
Selon les conditions suivantes:
Paternit. Vous devez citer le nom de l'auteur original de la manire indique par l'auteur de l'uvre ou le titulaire des
droits qui vous confre cette autorisation (mais pas d'une manire qui suggrerait qu'ils vous soutiennent ou approuvent
votre utilisation de l'uvre).
Copyright 2009 Ivan Lammerant - ASBL Arcade Wallonie www.crayons.be
Pas d'Utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette cration des fins commerciales.
Pas de Modification. Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette cration.
A chaque rutilisation ou distribution de cette cration, vous devez faire apparatre clairement au public
les conditions contractuelles de sa mise disposition. La meilleure manire de les indiquer est un lien
vers cette page web.
Chacune de ces conditions peut tre leve si vous obtenez l'autorisation du titulaire des droits sur cette
uvre.
Rien dans ce contrat ne diminue ou ne restreint le droit moral de l'auteur ou des auteurs.

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[1] Premire heure

Installation en local ou sur un serveur.

essss! Le grand jour est arriv, je vais enfin installer mon site Internet en quelques
minutes! Sans connaissances pralables de programmation ou de gestion de serveur.
Les deux doigts dans le nez

1.0 En rsum
H E U R E

dapprentissage
de test
dexercice
de rvision

La connaissance directe des codes de manipulation est moins importante que

dans les dbuts de lapparition de lInternet dans les annes 1990.
Cependant linstallation distante de Joomla! et la mise en ligne votre de celuici require une certaine mthodologie. Comprenant que la technologie et le
langage Web peuvent vous paratre impntrable, nous avons synthtis
ci-dessous ce processus. Une vido explicative vient appuyer ce propos.

1.1 Deux pr requis imposs pour une installation de Joomla!

Lhbergeur choisi, quil soit gratuit ou non, doit rpondre imprativement aux prs-requis suivants:
1.
2.

vous donner accs une base MySQL

supporter le moteur de script PHP
Site officiel de My SQL: www.mysql.fr

1.2 Configuration du client ftp

Aprs avoir install un client FTP (http://www.01net.com/index.html), vous devrez avoir sous la main, les
paramtres de connexion fournis par lhbergeur:

Nom dhte (le nom du serveur FTP de votre hbergeur), par exemple: ftp.boat.be
Nom dutilisateur (ou login): ivan
Mot de passe: xxxxxxxxxxx

1.3 Marche suivre

1. Entrez dans linterface du client ftp.
Votre fentre est compose de deux volets d'exploration:
le volet site Local, situ sur votre pc et le volet site distant, sur le serveur de votre hbergeur, sur
lequel se trouve un rpertoire qui s'appelle www, web ou public_html (selon l'hbergeur), qui est le
rpertoire racine de votre site Internet, celui o vous allez transfrer les fichiers sources
d'installation de Joomla!

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

2. Dans le volet site distant, double-cliquez (2 clics) sur le rpertoire racine de votre site (www ou
public_html), puis dans le volet d'exploration site local dplacez vous dans le dossier o vous avez
dcompress l'archive contenant les sources d'installation de Joomla!. Slectionnez tout le contenu du
dossier (les fichiers et dossiers sources d'installation de Joomla!) puis effectuez un clic droit / charger sur
le serveur: le transfert va prendre quelques minutes en fonction de votre connexion et, en final
larborescence du site distant sera identique celle du site local.
Comme pour les informations de configuration du client FTP, votre hbergeur doit vous fournir les
informations de connexion votre base de donnes.

Nom du serveur de base de donnes (gnralement): localhost

Nom de lutilisateur de la base de donnes (par exemple): loginmysql
Mot de passe de lutilisateur de la base de donnes: xxxxxxxx
Nom de la base de donnes (par exemple): mondomaine_db1

Le rpertoire accueillant Joomla! doit tre en mode d'criture (CHMOD 775 ou 777)
Si vous ne pouvez pas lui attribuer ces droits, il faut crer un fichier de configuration: configuration.php
(fichier vide de tout code html, cr via un diteur de texte) ncessaire l'installation.
3. Ouvrez la page d'accueil de votre site afin de lancer lassistant d'installation de Joomla! 1.5.:
Encodez ladresse de votre nom de domaine http://www.monsite.be/index.php dans votre navigateur
favori. (www.firefox.be)
4. Passons maintenant au lancement de l'installation de Joomla!
Ouvrez tout simplement la page d'accueil de votre serveur Web, l mme o vous avez transfr les
sources d'installation de Joomla! 1.5.
Le processus d'installation s'effectue sur une srie de pages de manire chronologique. Une fois que
vous avez cliquez sur le bouton Suivant pour passer l'tape suivante, ne revenez pas en arrire! Cela
risquerait de compromettre la procdure dinstallation qui devrait alors tre reprise depuis le dbut.
Les 7 tapes de l'installation de Joomla! 1.5 sont
Le choix de la langue d'installation
Pr-installation
Lacceptation de la License
La configuration de la base de donnes
La configuration FTP
La configuration principale
La suppression du dossier d'installation
5. Nous voici sur la premire page d'installation, cette tape, vous choisissez la langue dinstallation.
Nous pouvons continuer en cliquant sur le bouton Suivant

2 4

6.

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

Seconde page d'installation, cette tape est effectu un contrle de la configuration du

serveur Web. Si tout est vert, c'est bon signe! Le fichier configuration.php doit tre prsent
la racine du site et en mode criture.

Nous pouvons continuer en cliquant sur le bouton Suivant.

7.

1 . 5

Vous lisez et vous acceptez les termes de la License GPL en cochant la case puis vous
cliquez sur le bouton Suivant.

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

8.

Compltez les champs pour la configuration de la base de donnes (fournies par votre
hbergeur), puis cliquez sur le bouton Suivant.

9.

Compltez galement les champs pour la configuration ftp, cette fonctionnalit pouvant
poser problme lexcution de certaines extensions, il est possible par la suite de la
dsactiv dans la configuration gnrale de Joomla!, cliquez sur le bouton Suivant.

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

10. La page suivante, vous permet de configurer le titre du site, et les paramtres de
ladministrateur. Le choix vous est donn dinstaller des fichiers dexemples ou de migrer
votre ancien site. (Joomla! 1.0)

11. La dernire page vient confirmer linstallation, il faut supprimez au final le rpertoire
d'installation et le fichier install.php.

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

12. Vous retournez sur la page d'accueil de votre site Internet. Vous rafrachissez laffichage de
votre navigateur (au moyen de la touche F5 pou le pc), et apparat alors votre cms Joomla!
1.5 avec son template et sa configuration de base.

Vous pouvez aussi installer le cms en local, travailler sur votre site et
ensuite le recopier sur Internet. La dmarche est similaire.
Plus dinfos sur: http://wiki.joomlafacile.com/

Joomla! 1.5.x: packages d'installation et patches

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[2] Deuxime heure

Dcouverte du site dexemple

ups!: front-end, back-end, plugins, modules, composants

Dans quelle galre, me suis-je embarqu?
Partons vaillamment la dcouverte de ce merveilleux outil, qui mal gr peut
rapidement devenir une usine gaz. Nous nous efforcerons au fil de cette formation de
mettre en avant le cot pratique et utile de ce cms .

H E U R E

dapprentissage
de test

Usine gaz: loc. f. [Argot] Dans les annes 1950, ce terme dsignait un
ordinateur, qui occupait en gnral 500 m2 de surface au sol et pesait 30
tonnes. Dsormais, c'est un norme logiciel contenant des centaines de
fonctions pas toujours indispensables et parfois ranges n'importe comment
dans les menus.

dexercice
de rvision
2.0 En rsum
Assis devant votre cran, vous dcouvrez linterface de Joomla! 1.5, cette heure traitera des
deux parties du cms, le front-end et le back-end . Le front-end tant la partie publique,
le ct client qui est visualis par lutilisateur, le back-end la partie prive dadministration, le
ct serveur qui est utilise par le webmestre et ou est gre la base de donnes. Ces donnes
encodes du ct serveur sont envoyes vers le front-end, via un navigateur Web.
2.1 Le Front-end
Il sagit de la page publique.
Elle contient diffrentes parties distinctes qui correspondent chacune une fonction. Sur le site dexemple,
on peut distinguer des menus; des fonctions; des contenus types et des lments dcoratifs
relevant du template et de la charte graphique.
2.1.1 Les menus
Joomla! Propose quatre types de menus dans cet exemple. Le quatrime, est visible uniquement pour le
Webmestre ou les membres enregistrs, lorsquils sont connects usermenu .
Le menu principal horizontal du dessus sappelle topmenu .
Les autres menus sappellent intuitivement othermenu . Ces termes sont paramtrables via le backend. Vous pouvez crer autant de menus que ncessaire, tout en veillant na pas drouter le visiteur et en
respectant des rgles lmentaires de navigabilit et dergonomie.
2.1.2 Les contenus
Ils peuvent tre statiques ou dynamiques. Communiqus, articles, tutoriaux, galeries, cv
Joomla! 1.5. Permet une gestion aise et rapide via un diteur wysiwyg, qui sapparente linterface de
votre diteur de texte traditionnel [wyziwyg] est l'acronyme de la locution anglaise What you see is what
you get , signifiant littralement en franais ce que vous voyez est ce que vous obtenez . L'utilisateur
voit directement l'cran ce quoi ressemblera le rsultat final.
10

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Loutil, tout aussi complet soit-il, ne peut pas palier la faiblesse de vos contenus.
Rflchissez la teneur de vos contenus avant leur publication! Vrifiez vos sources, les droits dauteurs et
votre orthographe. Le monde entier aura lil sur vous!
2.1.3 Les fonctions
Elles correspondent un module, (on peut comparer Joomla! 1.5 une bote de lego).
En voici les principales visibles sur lexemple: lidentification login form ; les sondages pools ; le
module de prsence en ligne whos online? , les fils dactualits newsfeeds
Vous verrez comment installer des modules supplmentaires via le back-end.
2.1.4 Les lments dcoratifs
Il sagit ici de lhabillage et de la charte graphique du site, de son template . Si vous tes graphiste, vous
pouvez aisment crer un graphisme personnalis, ou modifier un template existant. Cela fera lobjet dune
autre formation. Pour les autres, il existe de nombreux sites de rfrence distribuant des templates payants
ou gratuits. On peut citer notamment, Joomlart (www.joomlart.com) ou joomlashack
(www.joomlashack.com). Mais attention alors au manque doriginalit: il ny a pas dexclusivit sur ces
crations! On peut aisment devenir Webmestre, plus difficilement graphiste. Il est toujours bon de
travailler avec un professionnel.
2.2 Le Back-end
Page daccueil de la partie invisible dadministration.
On y accde en rajoutant /administrator lurl principale: www.monsite.be/administrator, via un login et
un mot de passe.

Ce tableau de bord vous permet de grer intuitivement tout votre site Web, via un systme de sections,
catgories, et articles. Il vous permet dinstaller des modules, des Plugins et des composants, pour largir
les fonctionnalits de base. Un ct pratique de Joomla! est le fait que lon peut travailler plusieurs en
mmes temps sur diffrentes parties du site. Je peux installer un module via le back-end, pendant que vous
modifiez un article par le front-end et que dautres personnes rajoutent du contenu.
11

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Pendant ce temps la, le site peut rester visible en ligne!

Un point important retenir dans un coin de votre tte pour la suite, la structure de Joomla!, comme de la
plupart des cms. Soit l'organisation en sections, catgories et articles. Ce systme hirarchique, n'est
valable que pour l'organisation des donnes!
Les menus, eux, sont totalement indpendants de cette organisation. Dans lancienne version de Joomla!
un article ne pouvait tre publi que dans une catgorie qui faisait partie dune section, il existe dsormais
la possibilit de publier des articles non catgoriss dans la version 1.5.

12

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[3] Troisime heure

Personnalisation du CMS Joomla!

ettons les mains dans le cambouis! Rien de tel pour apprendre le mtier.
Parcourons ensemble linterface dadministration et testons les diffrentes options et
fonctionnalits. Cela nous permettra de personnaliser notre site Web. Ce passage oblig
par la technique, vous laisse encore le temps de rflchir la structure et au contenu.
3.0 En rsum

H E U R E

dapprentissage
de test
dexercice
de rvision

Lemploi du cms assure un plus grand contrle sur la structure sous-jacente

du site Web, cela sans affecter et rduire la conception graphique que vous
mettez en place. Ladministration peut sembler rbarbative un graphiste ou
quelquun peut habitu et sensibilis la beaut du code . Quil se
rassure, il est possible den apprendre assez en une heure, pour crer son
arborescence et mettre en place une structure solide sur laquelle votre
crativit viendra spanouir.

3 .1 Initiation linterface dadministration

Vous y accder via ladresse suivante: http://www.monsite.be/administrator
Gardez bien secret votre mot de passe et votre login, car via cette interface, cest tout votre site qui est
gr du point de vue contenu et graphisme.

13

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Il faut savoir que la session administration de Joomla! est rgle sur quinze minutes, en cas dinactivit,
vous serez dconnect automatiquement. Ce rglage par dfaut est modifiable via la Configuration
globale et longlet Systme
Ce support de cours devrait tre suffisant pour une prise en main du cms Joomla!
A la fin de celui-ci, une bote outils vous permettra via diverses ressources daller plus loin.
Nous vous invitons utiliser aussi notre Blog: http://joomla-cms.blogspot.com/ ou sur
Facebook: http://www.facebook.com/group.php?gid=23676315149
Calamo: http://fr.calameo.com/accounts/15960

Le panneau de contrle est compos dune srie de menus suprieurs, et de boutons daccs rapide dans le
corps de la page. Sur la droite, un tableau reprend les membres connects sur le site, les composants
installs, et une srie de statistiques.
Un bouton site , en haut gauche vous permet de revenir en tout temps cette page daccueil.
Icones
Icones de linterface dadministration
Pour crer et ajouter un nouvel article
(contenu)

Pour grer et lister vos articles

(structure interne - contenu)

Pour grer les articles visibles en page

daccueil

Pour grer et lister vos sections

(structure interne)

Pour grer et lister vos catgories

(structure interne)

Pour une gestion ordonne de vos diffrents

mdias: images, vidos, animations
(graphisme interactivit)

Pour crer, modifier et organiser vos menus

(ergonomie navigation)

Choix des langues

Pour grer les utilisateurs

(communaut)

Pour grer globalement le site

(configuration)

14

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

Icones de ladministration interne

Nouveau

diter

Copier

Dplacer

Corbeille - supprimer

Publier ou actif

D publier

Dsarchiver

Archives

Restaurer

Pr visualiser

Assign ou appliquer sans quitter

Sauver et quitter

Annuler et quitter

Gestionnaire de menu

Modifier le code html du template

Modifier le css du template

Modifier le code xml du template

Ajouter un utilisateur

Verrouiller

Rafraichir

Aide

Paramtres

Dfaut

Imprimer

Rechercher

Envoyer un courriel

Prcdent

Suivant - transfert

Upload

Download

Exporter

15

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

3.2 Comment grer mon site?

Dans premier temps, il serait pertinent de complter les paramtres gnraux du site.

Via le menu Site , vous avez accs trois champs de paramtres:

Paramtre globaux du site, avec principalement
Paramtre des mtadonnes
Paramtre SEO
Les menus Systme et serveur doivent tres modifis en connaissances de causes !
En final, il vous faudra sauver les paramtres de la configuration gnrale.

16

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Configuration du site:

Paramtres du site
o

Site hors ligne: Slectionnez si laccs au front-end du site est permis ou non. Si oui, le
front-end affichera un message encod au pralable dans le champ prvu cet effet, sur la
page de configuration.

Message lorsque le site est hors ligne: message affich lorsque le site est hors-ligne.

Nom du site: Il sera utilis divers endroits par exemple dans la barre de titre de la partie
administration et sur les pages du site hors-ligne.

diteur WYSIWYG par dfaut: Choisissez votre diteur WYSIWYG par dfaut. Notez que les
membres pourront modifier ce paramtres en ce qui les concernent dans leurs prfrences,
si vous leur laisser la possibilit.

Longueur des listes: fixer pour tous les utilisateurs, la taille des listes utilise dans
ladministration.

Longueur du fil d'actualit: slectionnez le nombre darticles rcents publier dans le(s)
fil(s).

Paramtres des mtadonnes

o

Mta description du site: saisissez une description de votre site qui sera ensuite utilise par
les moteurs de recherche. Gnralement une liste de 20 mots max est optimale.

Mots cls du site (Meta keywords): saisissez les mots cls et la description de votre site.
Sparez les mots cls par une virgule, et les groupes de mots par une apostrophe.

Afficher la balise mta du titre: afficher la balise mta du titre de larticle en cour.

Afficher la balise mta de l'auteur: afficher la balise mta de lauteur de larticle en cour.

Paramtres SEO
o

URLs explicites (SEF): rglages doptimisation des moteurs de recherches.

Utiliser le module Apachemod_rewrite (rcriture au "vol" des URLs): Utiliser le module

Apachemod_rewrite (rcriture au "vol" des URLs).

Ajouter un suffixe aux URLs: si oui, le systme ajoutera un suffixe lURL partir du
document type.

Il conviendra ensuite de configurer les onglets: systme et serveur en connaissance de cause !

Configuration du systme:

Paramtres systme
o

Mot secret: cest un code alphanumrique unique auto-gnr pour chaque installation de
joomla!. Il est utilis pour des fonctions de scurit.

Chemin vers le dossier Log: pour une journalisation de joomla!, veuillez spcifier un
dossier.

17

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Activer les services Web: permet dactiver les services RPC (Remote Procedure Calls)
utilisant HTTP comme mode de transfert et XML comme langage dencodage. Cette fonction
est obligatoire pour que la plupart des extensions fonctionnent.

Serveur d'aide: slectionnez le nom de serveur daide que joomla! interrogera pour afficher
les pages daide. Choisissez local pour utiliser les fichiers installs lors de linstallation de
joomla!. Cliquez sur le bouton de rafraichissement Rinitialiser pour mettre jour la
liste des serveurs.

Paramtres des utilisateurs

o

Autoriser l'enregistrement des utilisateurs: si actif, permet aux nouveaux utilisateurs de

sauto-enregistrer.

Groupe par dfaut pour les nouveaux utilisateurs: niveaux daccs des nouveaux
utilisateurs senregistrant par linterface publique.

Activation du compte de nouveaux utilisateurs: si oui, lutilisateur recevra par email un lien
sur lequel il devra cliquer pour activer son compte avant de pouvoir se connecter.

Paramtres utilisateurs en front-end: affiche, ou non, les prfrences des utilisateurs pour
quils puissent modifier la langue dinterface du site, lditeur WYSIWYG et le site daide
quand ils seront connects.

Paramtres des mdias

o

Extensions autorises (types de fichier): extensions de fichiers pouvant tres transfrs,

spares par une virgule.

Taille maximum (en octets): la taille maximale des fichiers transfrs (en octets).

Chemin vers le dossier fichier: vous pouvez crer un nouveau dossier pour lutiliser avec le
gestionnaire de Mdia et entre le chemin du dossier ici. Attention : ne pas changer ou
effacer le nom du dossier images car les dossiers images/banners ,
images/smilies et images/stories sont utiliss par joomla!.

Chemin vers le dossier image: vous pouvez crer un nouveau dossier pour lutiliser avec le
Gestionnaire de Mdia et entre le chemin du dossier ici. Si vous voulez accder ce dossier
partir du gestionnaire de Mdia, utilisez le mme nom de dossier ou faites en un sousdossier du dossier du Gestionnaire de Mdia. Attention : ne pas changer ou effacer le nom
du dossier images/stories car il est utilis par joomla!.

Transferts restreints: en labsence de fileinfo ou de MIME Magic, les transferts sont limits
aux images pour les utilisateurs dont le niveau dautorisation est infrieur manager.

Vrification des Types MIME: utilisation de fileinfo ou de MIME Magic pour essayer de
vrifier les fichiers. Dsactiver si vous obtenez des erreurs de types MIME.

Extensions des images autorises (types de fichier): extensions des images que vous
pouvez tlcharges, spares par une virgule. Elles sont utilises pour contrler les
enttes des images valides.

Extensions ignores: extensions des fichiers ignores pour les vrifications des types MIME
et les restrictions dupload.

Types MIME accepts: spars la liste des types MIME accepts pour le tlchargement par
une virgule.
18

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Types MIME refuss: spars la liste des types MIME accepts pour le tlchargement par
une virgule. (liste noire)

Activation de l'interface de transfert en flash: slectionnez si vous voulez utiliser linterface

en flash ou non pour le transfert de fichiers dans le Gestionnaire de Mdia.

Paramtres de dbogage
o

Dbogage systme: si activ, le diagnostic, la traduction et les erreurs SQL, sil y en a,

seront affiches. Les informations seront affiches en bas de chaque page de votre site
(cot utilisateur front-end et cot administrateur back-end). Nous vous conseillons de ne
pas laisser le mode dbogage activ lorsque vous avez fini les tests et tes la version
finale de votre site.

Dbogage de la langue: choisissez ou pas dafficher les informations de dbogage de la

langue (* *) oo ( ?... ?) des fichiers de langue joomla!. Le dbogage de la traduction
fonctionnera mme si le dbogage systme est dsactiv mais vous nobtiendrez pas les
rfrences dtailles supplmentaires qui pourraient vous aider corriger les erreurs.

Paramtres du cache
o

Cache: choisissez ou non dactiver le cache.

Dure de vie du cache: dure maximale en minute, avant que le cache stock ne soit
rafraichit.

Gestionnaire de cache: le mcanisme par dfaut du cache est bas sur des fichiers.

Configuration des sessions

o

Dure de session: dconnexion automatique des utilisateurs inactifs durant le nombre de

minutes choisi. Ne pas choisir un temps trop long.

Gestionnaire de session: la mthode utilise par joomla! pour identifier connect utilisant
des cookies non-persistants.

Configuration du serveur:

Paramtres du serveur
o

Chemin vers le dossier Temp: veuillez slectionner un dossier Temp accessible en criture.

Compression GZIP des pages: activez la compression du tampon sil est pris en charge.

Rapport d'erreurs: choisissez le niveau de rapport dans la liste droulante.

Forcer SSL: forcer toujours utiliser laccs au site avec le protocole SSL (https) pour
certaines zones. Vous ne serrez pas en mesure daccder certaines zones no-ssl. Notez
que vous devez avoir activ SSL sur votre serveur pour utiliser cette option.

Paramtres de localisation
o

Fuseau horaire: date et heure courante configure pour laffichage.

Paramtres FTP
o

Activer le FTP: active la fonction ftp interne, la place de la fonctionnalit de transfert

habituelle de joomla!.
19

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

Serveur FTP: entrez le nom du serveur ftp.

Port FTP: entrez le port utilis par ftp, par dfaut il sagit du 21.

Identifiant FTP: identifiant utilis pour votre connexion ftp.

Mot de passe FTP: entrez le mot de passe ftp.

Racine FTP: chemin vers la racine du site. Le dossier racine est le rpertoire de base,
auquel vous avez accs.

1 . 5

Paramtres de la base de donnes

o

Type de base de donnes: types de base de donnes saisit lors de linstallation.

Ne modifiez pas ce champ moins que vous ayez migr vers un nouveau type de base de
donnes.

Nom du serveur: nom dhte de votre base de donnes saisit lors de linstallation.
Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert
vers un nouvel hte.

Identifiant: identifiant pour laccs la base de donnes saisit lors de linstallation.

Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert
vers un nouvel hte.

Base de donnes: nom de votre base de donnes saisit lors de linstallation.

Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert
vers un nouvel hte.

Prfixe des tables: prfixe de votre base de donnes saisit lors de linstallation.
Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert
vers un nouvel hte.

Rglages email
o

Serveur de mail: slectionnez quel service est utilis pour envoyer les emails du site.

Adresse de l'expditeur: adresse utilise pour envoyer vos courriels.

Nom de l'expditeur: par dfaut se champ contient le nom du site saisit lors de
linstallation.

Chemin d'accs sendmail: entrez le chemin du rpertoire de lexcutable Sendmail sur le

serveur.

Identification SMTP requise: choisir oui si votre smtp requiert une authentification.

Utilisateur SMTP: entrez le nom dutilisateur du compte smtp.

Mot de passe SMTP: entrez le mot de passe du compte smtp.

Hte SMTP: entrez le nom du compte smtp.

20

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Revenons maintenant au contenu !

Un peu plus haut dans le texte, javais attir votre attention sur la structure de Joomla!
Lorganisation en sections
catgories
articles.
Ce systme hirarchique dcoulera de larborescence de votre site.
Une section sera donc un des grands domaines de votre site.
Dans le cas dun portfolio de vos travaux, on peut imaginer ces domaines.
Accueil

Qui suis-je? Mes ralisations

Me contacter

Une catgorie sera une subdivision: par exemple la section Mes ralisations aura pour catgories
dessins , peintures , infographies . Elle peut tre dplace dune section lautre dun seul clic!
Pour crer une section, vous pouvez le faire via le menu contenu
ou licne Gestion des sections .

gestionnaire des sections

Pour crer une catgorie, vous pouvez le faire via le menu contenu
ou licne Gestion des catgories .
Pour crer un article, vous pouvez le faire via le menu contenu
ou licne Ajouter un nouvel article .

21

gestion des catgories

gestion des articles

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Entrons dans le gestionnaire de sections (idem que le gestionnaire de catgories), pour y crer une nouvelle
section. Cliquez sur le bouton Nouveau en haut droite.

Vous aurez vite pris lhabitude de retrouver cette srie de boutons et fonctionnalits cet endroit, pour la
plupart des oprations dadministration et ddition.

Vous entrez le contenu aux endroits indiqus et au final, vous sauvez ou appliquez votre travail.
Le rsultat est identique, sauf que dans le deuxime cas, vous restez sur cette interface de travail et pouvez
continuer ldition.
Vous pouvez prciser les dtails :
Le titre est destin apparatre dans le menu.
Lalias est destin apparatre dans lurl.
Le nom de la section apparatra en haut de la page.
La description, vous est utile vous en tant que Webmestre et napparat pas priori sur le
site, sauf si vous crez une page reprenant un tableau des sections ou des catgories.
Vous pouvez aussi donner un niveau daccs:
Public: la section et ses catgories seront visibles de tous.
Membres: rservs aux membres inscrits sur le site.
22

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Spcial: aux usagers du site ayant des privilges plus haut que le simple enregistr (registred).
[ Registred
Author
Editor
Publisher
Manager
Administrator
Super Administrator ]
Le Webmestre en charge du site, (vous), sera le super administrator .

Accs NON autoris!

Accs autoris!
Enfin, on peut aussi attribuer une image cette section, qui apparatra alors dans le site, en haut de la
page.
Du coq lne:
Nous dcouvrons lors de cette manipulation, un diteur html wysiwyg , il est prsent dans toutes les
interfaces et ressemble celui de notre traitement de texte favori.

Le bouton droulant format sert dfinir sur des styles et des niveaux de titres, un texte slectionn.
Le bouton droulant style , peut tre enrichis via la feuille de style de votre template.
On retrouve les fonctionnalits habituelles, texte en Bold, italique, soulign, les positionnements du texte,
les listes, etc. Les autres boutons sont dcouvrir, lors de leur survol; un petit texte explicite en donne la
fonction.

23

2 4

3.2.1

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Le gestionnaire darticle

Nous arrivons enfin la partie dition de contenu. Deux possibilits, vous sont offertes pour accder au
gestionnaire darticle: par le menu contenu ou via les icnes. Via cette dernire solution, Tous les
articles vous offrira une liste droulante qui vous permettra de visualiser les lments par section, par
catgorie, par auteur et galement par niveau daccs.

article publi

article d publi

article publi galement en page daccueil

Les onglets disposs sur la droite, Paramtres - Article , Paramtres - Avancs , Informations des
mta-donnes vous permettent daffiner la publication. Nous allons les expliquer ci-aprs.

24

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Onglet Paramtres - Article

Vous permet de paramtrer

Auteur: nom de lauteur

Pseudo de l'auteur: alias de lauteur
Niveau d'accs: niveau d'accs pour cet article
Date de cration: date de cration de larticle
Dbut de publication: date et heure de dbut de publication
Terminer la publication: date et heure de fin de publication

Onglet Paramtres - Avancs

Vous permet de paramtrer

Afficher le titre: montrer ou masquer le titre des lments

Titres cliquables: transforme le titre de larticle en lien vers larticle complet, idal quand seul le
texte dintro est affich
Texte d'introduction: montrer ou masquer le texte dintroduction
Nom de la section: montrer ou masquer la section laquelle appartient larticle
Titre de section cliquable: transforme le titre de la section en lien vers la section actuelle
Nom de catgorie: montrer ou masquer la catgorie laquelle appartient larticle
Nom de catgorie cliquable: transforme le titre de la catgorie en lien vers la catgorie actuelle
valuation de l'article: montrer ou masquer le bouton valuation, affecte uniquement cette page
Nom de l'auteur: montrer ou masquer lauteur de cette page, affecte uniquement cette page
Date et heure de cration: montrer ou masquer la date de cration, affecte uniquement cette
page
Date et heure de modification: montrer ou masquer la date de dernire modification, affecte
uniquement cette page
Icne PDF: montrer ou masquer le bouton pdf, affecte uniquement cette page
Icne imprimer: montrer ou masquer le bouton imprimer, affecte uniquement cette page
Icne email: montrer ou masquer le bouton email, affecte uniquement cette page
Langue de l'article: langue de rdaction de larticle
Cl de rfrence: texte cl relatif larticle et par lequel il pourra tre rfrenc (commepar ex.
une rfrence une aide)
Texte alternatif au Lire la suite: saisissez le texte que vous voullez afficher cot du lien lire la
suite au lieu du titre de larticle (dfaut)

25

2 4

P O U R

C R E R

M O N

S I T E

Onglet Informations des mta-donnes

Vous permet de paramtrer

Description: description pour les mta-donnes

Mots-cls: mots cls pour les mta-donnes
Robots: mots cls pour les robots
Auteur: nom de lauteur dans les mta-donnes

26

W E B

V I A

L E

C M S

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Petit truc ! En passant sur les titres des fentres de ladministration, un texte explicatif vient safficher !
Plus simplement si on veut paramtrer lensemble des articles ou modifier les paramtres par dfaut, il faut
cliquer sur paramtres via linterface Gestion des articles

Ce qui vous ouvrira un pop-up reprenant ces paramtres.

27

2 4

3.2.2

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Gestion des articles non catgoriss

Ils nappartiennent aucune catgorie. Ils sont de ce fait utiliss pour crire par exemple des conditions
gnrales de ventes, des informations lgales ou toute autre information qui sort de la structure de votre
arborescence principale.
3.2.3

Gestion des articles multipages

Si vous tes amen crire un article trs long, il est possible de le scinder en plusieurs pages distinctes
sans pour autant avoir raliser plusieurs articles.
Le visiteur aura alors sa disposition deux outils de navigation: un petit index positionn en haut
droite de l'article et une barre de navigation en bas de chaque page de l'article (prcdent suivant).
Cela donnera, un confort visuel au visiteur de votre site et lui facilitera ainsi grandement la lecture.
Mise en place
En bas gauche de l'diteur HTML, vous avez trois boutons. Le second saut de page permet
d'insrer ces fameux sauts de page.

Placez votre curseur l'endroit o vous souhaitez faire le saut de page et cliquez sur le bouton saut
de page . Le rsultat sera lapparition ce de pop-up. Dans cet exemple la page suivante se
nommera: curriculum vitae et son alias sera: cv

Une fois valider via le bouton insrer un saut de page linsertion dun texte
<hr title="curriculum vitae" alt="cv" class="system-pagebreak" />
pour indiquer au logiciel de changer de page. Votre article est maintenant scind en diffrentes pages.
X DE L'ARTICLE
Curriculum vitae

Vous pouvez maintenant nommer les pages, pour une meilleure navigation.
Le titre de la premire page viendra s'ajouter au titre de l'article sur toutes les pages.

28

2 4

3.2.4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Gestion des menus

Une fois le contenu cr, il faut guider lutilisateur au moyen dun site parlant, clair et efficace.
Il faut pratiquement le prendre par la main.
Vous pouvez avoir plusieurs menus et attribuer chacun
des pages spcifiques.
Le mainmenu (le menu principal) est gnralement
le menu par dfaut de votre template; il est aussi le seul
menu obligatoire et indispensable du cms.
Comme vu auparavant, la manire la plus simple est, via
larticle cr, d'utiliser le dernier onglet de son diteur, via
longlet: Crer un Lien .
La solution la plus usite et la plus logique, pour crer
des options de menu consiste utiliser le gestionnaire
de menus . Dans le cas prsent du menu principal,
slectionnez le mainmenu du menu menu .

Le gestionnaire de menu qui apparat alors, reste

bien dans la logique des autres gestionnaires de Joomla!.
Vous avez alors le choix de faire des liens vers une liste de type blog, des catgories, des sections,
vers un article, un site externe
En passant votre souris sur les propositions, des infos supplmentaires apparaissent.

Une fois loption choisie et le lien correspondant cliqu, vous devrez encoder le nom que vous
souhaitez donner l'option de menu, vous devrez galement choisir avec quel lment de contenu
vous souhaitez faire le lien et, en final, paramtrer si le lien doit s'ouvrir dans une nouvelle fentre ou
non. Les options proposes dpendent du type de menu slectionn la premire tape.

29

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

La bote de slection lment parent donne une liste de tous les lments de menu existants et
vous permet d'en choisir un comme parent de l'lment que vous tes en train de crer, soit de
crer un sous-menu. Vous devez avoir prvu cette ventualit dans votre template au niveau de la
feuille de style!
Une fois sauvegard votre lment de menu, de nouvelles options sont disponibles, si vous rditez
vos lments de menus!
3.2.5

Gestion des mdias

Le gestionnaire de media va vous permettre de transfrer, dajouter et dorganiser les images de

votre site afin de pouvoir les placer dans les articles.
Pour accder au celui-ci, cliquez sur l'icne Mdias de la page d'accueil ou sur l'option Gestion
des Mdias du menu Site . Pour pouvoir utiliser les images dans vos articles, elles doivent tre
stockes uniquement dans le dossier stories , ou dans des sous-dossiers crs par vos soins. Je
vous conseille de garder la mme logique que pour vos sections et catgories.
Pour atteindre ce dossier vous pouvez, soit cliquer sur son icne, soit le slectionner dans la liste
droulante des rpertoires.
Diverses oprations sont possibles:
transfrer une image
crer un dossier
supprimer une image
afficher l'adresse de l'image slectionne
agrandir l'image choisie via un pop up
afficher les proprits de l'image.

30

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Malheureusement, lheure actuelle, il nest toujours pas possible de dplacer une image dun dossier
vers un autre, sauf via votre logiciel ftp favori.
3.2.6

Gestion de la page daccueil

La premire page est la porte dentre de votre site. Elle doit tre reprsentative et permettre au
visiteur de visualiser vos offres, services et produits dun coup dil. Je vous conseille donc une page
de contenu, surtout pour optimiser votre rfrencement.
Dans Joomla! le contenu de la page d'accueil est gr par le gestionnaire de page d'accueil . Pour y
accder, il faut cliquer soit sur l'icne page d'accueil , soit sur l'option gestion de la page
d'Accueil du menu contenu .
Vous utiliserez ce gestionnaire pour dfinir l'ordre des articles sur la page d'accueil
Attention, pour la disposition des articles pour la page, (le nombre d'articles sur la page, le nombre de
colonnes, le nombre de lien, etc.) vous allez devoir changer les paramtres du composant page
d'accueil dans le mainmenu .
Nb: ce lien accueil est indispensable pour le bon fonctionnement de Joomla! Cest partir de lui
que sont dtermins tous les chemins, vous ne devez en aucun cas le supprimer ou le dpublier.
Ce paramtrage est valable pour tous les lments de menu du type blog
3.2.7

Gestion des archives

Lorsqu'un article est prim et n'a plus de raison d'tre sur votre site, je vous conseille de ne pas
le dtruire. Vous pouvez utiliser la fonction archiver pour le conserver. Il est alors transfr dans
un lieu de stockage tout en conservant ses paramtres initiaux de section et de catgorie. Vous
pouvez mme lier les archives un menu pour permettre aux visiteurs du site de continuer les
consulter.
Pour archiver un article, cochez la case gauche de son nom, soit sur le gestionnaire d'article soit sur
le gestionnaire de page daccueil, puis cliquez sur l'icne archiver dans la barre d'outils.

31

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Pour accder la liste des articles archivs, slectionnez gestion des archives dans le menu
contenu . Ceci vous amne l'cran gestion des Archives .
Si vous souhaitez restaurer un article son emplacement d'origine dans sa section et sa catgorie,
slectionnez le, puis cliquez sur l'icne dsarchiver . Il faut aprs le republier si vous souhaitez qu'il
rapparaisse nouveau dans le site.
3.2.8

Gestion de la corbeille

Les articles, sections, catgories, menus supprims sont placs dans la corbeille en attendant leur
suppression dfinitive ou leur restauration.
Pour accder au gestionnaire de corbeille , cliquez sur l'icne corbeille de la page d'accueil ou
sur l'option Gestion de la Corbeille du menu Site . Seuls les utilisateurs ayant un statut
d'administrateur ou de super administrateur peuvent accder la corbeille.
Ce statut dadministration ne doit pas tre octroy la lgre.

Pour restaurer un lment, slectionnez-le puis cliquez sur l'icne Restaurer dans la barre d'outils.
L'lment reprendra alors son emplacement d'origine sous le statut non publi .
Pour supprimer dfinitivement un article ou un menu de la base de donnes, slectionnez-le puis
cliquez sur l'icne Supprimer . L'opration est irrversible!

32

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[4] Quatrime heure

Extensions: dcouverte

xtensions, rflexions Joomla! est un systme fiable, mais des failles de scurit peuvent
apparatre par une mauvaise gestion et un choix non rflchis des extensions.
Je vais donc vous donner ma liste dextensions testes et valides par www.atipi.be sur
ses diffrents sites. Aprs votre choix, en fonction de vos besoins, nous les installerons.
4.0 En rsum

H E U R E

dapprentissage

http://www.joomlafrance.org/telecharger.html

Les Plugins, composants ou modules du cms Joomla! sont des extensions

utilisables dans la conception de votre site Web. Une solide rflexion est
dexercice
suggre avant leur mise en place. Le dveloppement de ces outils est
constant dans la communaut internationale de Joomla!, leur nombre est
de rvision
croissant, il faut faire attention de ne pas se laisser attirer par le ct
clinquant du Web. Une quipe ou un webmestre qualifi sera quels sont les besoins et a quel moment, il
sera opportun et essentiel de les dlivrer. Loutil ne doit jamais lemporter sur la rflexion.
de test

Enfin, une petite mise en garde est ncessaire, une maintenance est indispensable pour garder une scurit
optimum de votre site ! Cela passe par des mises jours de ces extensions et des visites rgulires sur le
forum de www.joomla.fr.
4.1 La slection de lASBL Arcade
Toujours vrifier si il existe des mises jours!

Newsletter: http://www.acajoom.com/ Acajoom

Rcriture durl: http://www.artio.net/ ARTIO JoomSEF
Communaut dutilisateurs: http://www.joomlapolis.com/
Cration de formulaires: http://www.facileforms.biz/ FacileForms
Forum: http://www.bestofjoomla.com/ Fireboard
Galerie dimages: http://www.joomlaworks.gr/ Simple Image Gallery Plugin
Galerie de vidos: http://www.joomlaworks.gr/ AllVideos Plugin
Explorateur de fichiers: http://joomlacode.org/gf/project/joomlaxplorer Joomlaxplorer
Calendrier: http://events.Joomla!forge.net Event
Traduction: http://www.joomfish.net/ Joomfish
Boutique en ligne: http://www.virtuemart.net/ VirtueMart
Menu droulant: http://jscook.yuanheng.org/JSCookMenu/index.html jscookmenu

Attention de ne pas rendre votre site tentaculaire, avec des services inutiles (mto, heure,
proverbe du jour. etc.) Il sapparenterait alors pour lutilisateur un vritable labyrinthe.
Pour les installer, Le menu installation est prvu cet effet et conserve la mme logique et la
mme simplicit habituelle. Elle est pas belle la vie?

33

2 4

P O U R

C R E R

M O N

S I T E

34

W E B

V I A

L E

C M S

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[5] Cinquime heure

Rflexion et conception

S
5.0

ynthtisez votre rflexion, schmatisez votre travail, et concevez ds le dbut un plan de

ralisation organis de votre futur site Web. Le cms Joomla! peut rapidement devenir une
usine gaz, sans cohrence. Il est donc primordial davoir une mthodologie de travail, et
de la respecter.

En rsum

H E U R E

dapprentissage
de test
dexercice
de rvision

Il est important davoir ds le dbut, un plan et une mthodologie de

travail. Cela passera par la ralisation et le suivit pas pas dun cahier
des charges. Pour vitez de dpasser la date de lancement ou doublier
dautres impratifs, tablissez toujours un calendrier en parallle de votre
cahier des charges, car sans cela, il n y aura aucune urgence. Le stress
est un facteur qui bien utilis se rvlera positif. Votre statut de
responsable de projets, subira alors diffrentes mutations: Concepteur &
Directeur artistique, rdacteur, codeur et en final testeur.

5.1 Ralisation dun cahier des charges

* Il est pertinent de lier chaque tape un calendrier de ralisation.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Rencontrer le client, via un formulaire ou des questions types. Dfinir ses besoins et
objectifs. Dans le cas prsent, rpondez vous-mme ce formulaire.
Raliser la charte graphique.
Analyser et critiquer le contenu existant ou le contenu fourni par le client.
Dvelopper la structure du site: organiser et structurer cette information:
accueil > sections > rubriques > articles.
Raliser un calendrier des diffrentes phases de ralisations et le cas chant y dtacher
divers intervenants.
Raliser et faire valider une maquette (3 projets diffrents max.).
Prsentation de la maquette en HTML, compatible www3C.
Finaliser le site.
Publication sur un serveur Web via un logiciel ftp. Avec le cms, on peut raliser le site test
en local et puis en faire une copie sur le serveur (mise en production).
Tester votre site auprs d'un large public dutilisateurs.
Raliser les ajustements soulevs.
Publier votre site.
Lancer un rfrencement et une promotion de votre site.
Faire vivre et voluer votre site, par une maintenance journalire.

35

2 4

5.1

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Questions types poser au client ou se poser

Formulaire client de la socit: http://www.55thinking.com/

Chaque personne participant au processus de prise de dcision doit remplir ce formulaire,
et rpondre aux questions de manire concise et complte. En fin de questionnaire, vous
trouverez une zone de commentaire libre. Bien entendu, si vous rencontrez des questions qui
ne s'appliquent pas votre cas, passez directement la question suivante.

5.1.1

Information gnrale

Entreprise..........................................................................................................................
Activits principales produits & services
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
Site Web actuel URL:http://.............................................................................................
Votre prnom.....................................................................................................................
Votre nom..........................................................................................................................
Titre...................................................................................................................................
Tlphone..........................................................................................................................
Email.................................................................................................................................
Portable.............................................................................................................................
5.1.2

Objectifs du projet Web

Pourquoi avez-vous pris la dcision de lancer ce projet Web (ex: nouveau business model,
site actuel obsolte, nouveaux services, audience diffrente, etc.)?
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
36

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Quels sont les objectifs stratgiques de votre site Web?

Objectif principal
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Objectif secondaire
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

Autres commentaires
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

Comment allez-vous mesurer le succs de votre nouveau site?

(ex: 20% des ventes en ligne en plus, 15% d'appels en moins aux dpartements de service clientle,
70% de rsultats positifs une enqute de satisfaction, etc.)?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

37

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

5.1.3. Analyse du site Web existant

Avez-vous l'impression que le site Web actuel dlivre une exprience en ligne positive?
Justifiez.
OUI / NON
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Quelles parties du site actuel vous semblent avoir du succs auprs de vos visiteurs?
Quelles sont, selon vous, les raisons de ce succs?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

38

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Quelles sont les limitations du site Web actuel? Si vous le pouviez, quels sont les trois aspects que vous
changeriez en priorit dans votre site Web actuel?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Avez-vous ralis des tudes d'usinabilit ou rassembl les feedbacks de vos visiteurs lors d'une tude
spcifique? En cas de rponse positive, veuillez inclure le rapport ou les conclusions de votre tude.
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Faut-il maintenir le Look & Feel et le logo actuels?
OUI / NON
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

39

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

5.1.4 Audience
Veuillez dcrire avec le plus de dtail possible les profils de visiteurs qui viennent sur votre site Web.
(ex: ge, profession, pages favorites, dure de connexion, etc.)
Profil de visiteur principal
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Profil de visiteur secondaire
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Autres commentaires
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Quelle est laction principale que chaque visiteur devrait raliser lors dune visite sur votre site Web
(ex: lire des articles, recherches des informations, senregistrer un service en ligne, vous contacter,
acheter en ligne, etc.)?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

40

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Quelles sont les raisons cls qui expliquent que vos clients achtent vos produits / services?
(ex: prix, valeur ajoute, qualit, facilit d'usage, dlais de livraison, etc.)?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Combien de personnes visitent votre site Web par jour, semaine et mois?
Combien de pages tlcharge le visiteur moyen?
............................................................................................................................................
............................................................................................................................................
5.1.5 Perception
Utilisez une srie dadjectifs afin de dcrire comment le visiteur devrait percevoir votre nouveau site Web
(ex: prestigieux, sympathique, institutionnel, inspirant confiance, fun, visionnaire, innovant, sexy, etc.)
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Utiliser une srie dadjectifs afin de dcrire le look and feel dsir pour votre nouveau site Web.
(ex: facile naviguer, tendance, classique, moderne, color, traditionnel, etc.)
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Comment est perue votre entreprise dans sa communication offline?
Souhaitez-vous vhiculer le mme genre de messages pour votre prsence online?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
41

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Comment vous dmarquez-vous de vos concurrents?

Croyez-vous que votre audience est diffrente de celle de vos concurrents?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Veuillez lister les sites Web de trois concurrents importants (indiquez lurl).
Quels sont les points que vous apprciez et que vous napprciez pas, site par site ?
1 http://.....................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
2 http://.....................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
3 http://.....................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

42

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

5.1.6 Image corporative

Existe-t-il une charte graphique officielle que vous devriez rutiliser?
En cas de rponse positive, veuillez prciser jusqu' quel point chaque lment constituant est
personnalisable (police, couleurs, logo, etc.)
OUI / NON
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Que souhaitez-vous communiquer travers le graphisme de votre logo?
Quelle genre de rponse motionnelle ce logo devrait crer chez votre client?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Veuillez joindre quelques logos qui vous plaisent et expliquer pourquoi cette attirance?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

43

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Quels symboles ou couleurs vhiculent le mieux la personnalit de votre entreprise et ses services?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Quel message daccroche doit tre inclus avec le logo?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
5.1.7 Contenus
Approximativement, combien de sections / catgories / pages, aura votre site Web?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Avez-vous dj dfini le plan de votre site Web? En cas de rponse positive, veuillez inclure cette
information. En cas de rponse ngative, souhaitez-vous que nous vous aidions lors de cette activit?
OUI / NON
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
44

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Exemple de plan de site

http://www.skyteam.com/EN/tools/siteMap.jsp
Votre nouveau site rutilisera-t-il les contenus existants?
OUI / NON
Si les contenus ne sont pas produits, qui se chargera de leur production et de leur validation?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Avez-vous une prfrence en terme de navigation pour votre site Web?
............................................................................................................................................
............................................................................................................................................
Exemple 1: http://www.spanair.com/es/index.asp?ac=infocorporativa
Exemple 2: http://www.qantas.com.au/info/bookings/index
Exemple 3: http://www.usairways.com/about/pressroomindex.htm (About us vertical menu)
Exemple 4: http://www.blue1.com/
5.1.8 Fonctionnalits
Veuillez identifier les fonctionnalits de votre site Web
Gestion des nouvelles
Formulaire de contact
Newsletter
Moteur de recherche interne
Catalogue
ZONE D'ACCES RESTREINT
Enqute
Vente en ligne
Gestion documentaire/Tlchargements
Gestion des questions / rponse frquentes
Gestion des liens
Forum
Annuaire
Solution multilingue
Calendrier/Evnement
Vido/Audio streaming
Fils RSS
Plan du site
Blog
Autre fonctionnalit

45

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
...........................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
...........................................................................................................................................
5.1.9

Gestion des contenus

Qui sera responsable de la maintenance et des actualisations de contenu de votre site Web?
Si vous partez sur une solution en interne, veuillez lister nom, exprience et capacit technique des
personnes identifies.
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Selon votre exprience, quelle est la priodicit d'actualisation des contenus publis dans votre site Web?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
...........................................................................................................................................
Utilisez-vous l'heure actuelle un outil de gestion de contenu (CMS)?
En cas de rponse positive, de quel outil s'agit-il et quelles sont ses fonctionnalits principales ?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
46

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Si vous recherchez une nouvelle solution de gestion de contenu (CMS), veuillez spcifier les fonctionnalits
souhaites, les diffrents profils d'utilisation et leurs droits d'accs.
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
5.1.10 Marketing & promotion
Avez-vous dfini un plan marketing spcifique pour promouvoir vos activits en ligne?
Veuillez dcrire dans les grandes lignes comment vous comptez faire connatre votre site Web lors de son
lancement.
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

47

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

5.1.11 Budget & Planning

Quel(s) est (sont) le(s) dcideur(s) final(aux) pour l'achat de ce projet Web au sein de votre organisation?
Veuillez lister prnom/nom/email/tlphone.
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Avez-vous fix une date pour la mise en ligne de votre projet Web?
Cette date correspond-elle un vnement prcis?
(ex, lancement PR, salon professionnel, sminaire, prsentation des rsultats annuels, etc.)?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
De quel budget/fourchette budgtaire disposez-vous pour mener bien ce projet?
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

48

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

5.1.12 Commentaires libres

Si vous souhaitez nous faire part d'autres aspects important qui n'ont pas t abords dans les sections
prcdentes veuillez remplir le bloc ci-dessous.
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

49

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[6] Sixime heure

Arborescence et ergonomie

vant dentreprendre la ralisation graphique du site, ce qui est trs tentant, je lavoue!
Il faut prendre une feuille et tracer les grandes lignes du site. Larborescence, fait
rfrence pour moi, un arbre, dont le fichier index.html serait la racine; les sections, le
tronc et ses ramifications; les rubriques, les branches et les articles seraient les feuilles.
6.0 En rsum

H E U R E

dapprentissage
de test
dexercice
de rvision
6.1

On vous demandera ici de dvelopper une carte simple des liens de votre
site, sous la forme dune arborescence. Elle devra tre la manire la plus
logique de tester la structure de votre site et la navigabilit de celui-ci.
Le but principal tant dobtenir une facilit de navigation pour lutilisateur, qui
identifiera ds lors directement le contenu spcifique recherch. Diffrentes
structure de navigation existe en fonction de la clientle vise et du sujet du
site Web: linaire ; hirarchique ou web.

Arborescence

Larborescence de votre site Web est un outil de planification des liens entre les diverses sections,
rubriques ou articles.
Larborescence servira ainsi de fil conducteur pour lorganisation des fichiers sur le serveur, pour la
construction dune maquette par le graphiste, pour la ralisation des menus et sous-menus. Elle va dcrire
les diffrents liens unissant vos pages.
Ce travail de recherche et de mise en place se fait sur un papier. Les diffrentes sections et subdivisions,
ainsi que les pages seront nommes de noms pertinents pour le rfrencement. Contrairement au secteur
du prpresse, il ne faut pas utiliser de mots de plus de neuf lettres, ne mettre aucun espaces et accents qui
sont mal compris par les navigateurs, et remplacs par des signes bizarrodes .
La premire page s'appelle toujours index ou default par convention, lextension est htm, html ou
php.
6.1.2 Ensuite, on ralise une hirarchisation du site
1.
2.
3.
4.
5.
6.
7.

page d'accueil, de prsentation

page d'informations: produits, services
page de tlchargement
plan du site (important pour le rfrencement)
page de liens
page de contacts
etc.

Les pages seront dcrites de manire synthtique et sommaire. Il est important de ne pas dpasser en
gnral 4 niveaux, car l'arborescence risque de devenir un labyrinthe. Le nombre de clic , soit nombre
de liens slectionner partir de la page d'accueil pour accder une rubrique donne doit tre limit.
Prvoir galement dans l'arborescence, les dossiers et sous-dossiers, pour classifier de manire rigoureuse
les diffrents mdias.
50

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

(Les accents et les espaces sont prohibs, en minuscules, lettres, chiffres, trait d'union, crer un dossier
par type de contenu avec un nom significatif: les images dans un dossier images , les feuilles de style
dans un dossier CSS , )
Voici quoi pourrait ressembler votre schma: Arborescence/plan du site
http://educationca
nada.cmec.ca/FR/
SiteMap.php

Dans Joomla!, la structure aura gnralement cet aspect sur 4 niveaux:

Accueil
sections
catgories
articles.
Niveau 1: La page daccueil, comportant les mentions principales: nom, logo, un sommaire et/ou une
courte description, le menu principal de navigation, comportant un lien vers le plan du site. Cette page a
un comportement, un aspect diffrents des autres. Les articles des diffrentes sections peuvent y
apparatrent en rsum. On y trouve aussi, des news, le login, les derniers articles publis etc.
Niveau 2: Sections, texte explicatif dintroduction, liens vers les catgories.
Niveau 3: Catgories, texte explicatif dintroduction, liens vers les articles.
Niveau 4: Les articles.

51

2 4

P O U R

C R E R

M O N

S I T E

6.1.3 Dessinez-ci, larborescence de votre site

52

W E B

V I A

L E

C M S

J O O M L A

1 . 5

2 4

6.2

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Ergonomie

Il sagit du concept de navigabilit lintrieur du site. Un site Web est dit ergonomique quand il propose
lutilisateur un mode de navigation ais et intuitif, et de ce fait une prise en main rapide de ses diverses
fonctionnalits. Efficacit, accessibilit, confort d'utilisation, simplicit sont les matres mots.
Voici la dfinition de lergonomie daprs Alain Wisner:
Lensemble des connaissances scientifiques relatives lHomme ncessaires pour concevoir des outils,
des machines et des dispositifs qui puissent tre utiliss avec le maximum de confort, de scurit et
defficacit .
Le succs de votre site Web, dpendra en premier de son contenu (lerreur de bien des graphistes, est de
raliser un site pour graphistes ou autres spcialistes, en oubliant le public cible), dautres facteurs
interviennent, la frquence des mises jours (grandement simplifie grce au cms), le temps de
chargement minimal qui dpend du poids de vos pages et de votre hbergement, enfin comme dit
prcdemment, la facilit de navigation sera un atout majeur.
Deux critres prvalent pour quune interface Web soit ergonomique:
UTILIT

UTILISABILIT

Soit rpondre un besoin

Capter

Soit faciliter la satisfaction du

besoin
&

Prolonger

lexprience des internautes

sur le site Internet
Les internautes viennent
POUR faire quelque chose

On doit les aider y arriver,

le plus FACILEMENT possible

La notion dutilit est recouvre plusieurs dimensions, un sens gnral qui amne la question dutilit ;
quoi sert mon site Internet ? (Exemples: prsenter des formations), ensuite des micro applications en
termes dutilit, de services et fonctionnalits (exemples: cours en ligne, tutorat, annexes, etc.)
La notion dutilisabilit se rapporte la facilit dapprentissage, lefficacit dutilisation, lutilisation sans
erreurs et en final la satisfaction des utilisateurs.
Lors dun sminaire organis par Technofuturtic, jai pu travailler selon la mthode des personas . Il
sagit de personnages virtuels, reprsentants des utilisateurs typiques, cest une base pour dcrire et
hirarchiser les objectifs utilisateurs des futurs visiteurs.
La formalisation de personas au dbut dune telle tude permet davoir toujours en tte leurs profils et
leurs besoins, et non ceux dun utilisateur type , dont la dfinition peut tre vague. Il est important de
crer diffrents personas . Je vous rfre cet effet Ergolab http://ergolab.net , le trs bon site de
Amlie Boucher, experte et formatrice en ergonomie.
On pourrait rapidement scinder ce quil faut et ne faut pas faire, en final lergonomie cest juste
du gros bon sens.

53

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

A ne pas faire
Un sapin de Nol: Un site remplis danimations et multicolore. O inversement, avec peu
de contraste entre le fond d'cran et le texte.
Placer un contenu, qui exigera par sa longueur, un effet de scrolling . Ne noyez pas le
visiteur sous un contenu indigeste. Trop dinformation, tue linformation.

A faire
Travailler sur la lisibilit, pour un public large!
Ne pas crer de redondances dans les chemins pour arriver une mme page.
Permettre un temps minimal de chargement de la page, en compressant la taille des
fichiers.
En final, respecter tant que possible, les standards du Web http://www.w3.org/ du
W3C. Votre site aura alors un comportement et un graphisme similaire sur toutes les plateformes.
Tous ces principes, sont bien souvent mis en balance avec les exigences et desideratas du client.
Il sagit alors de se mettre dans le rle du conseiller et dargumenter. Ne tombez cependant pas dans
lexcs des ergonomes et de leurs recettes miracles: du genre Le nombre magique de Miller , la
rgle des trois clics etc. Lexprience vous montrera que ce nest pas aussi simpliste que cela !
6.3

Structure de navigation

Si votre site a pour vocation la pdagogie, il sera moins lourd quun site faisant la vente et la promotion de
voitures customises ! Suite une enqute approfondie et minutieuse de votre secteur dactivit et de la
concurrence, vous travaillez alors mettre en place la structure de navigation adquate. Quels seront les
points darrive et dentre sur votre site, quel sera le comportement du visiteur type et quels menus
devrez vous mettre en place. Les visiteurs de votre site, voudront trouver rapidement et facilement
linformation recherche, la frustration daller et retour incessant le fera partir dfinitivement de votre site
Web. Oubliez les effets graphiques et subtils, propres aux graphistes, et en final privilgiez plutt une
navigation horizontale que verticale.
6.3.1 Structure linaire
Elle convient notamment des tests en ligne, ou des sondages, ou le visiteur par une srie de choix et de
validations est guid tout au long dun parcourt. Cette structure est comparable notre lecture habituelle
dans un livre, allant de page en page, de gauche droite.

54

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

6.3.2 Structure hirarchique

Elle est la plus courante sur Internet, et convient surtout aux sites ayant un grand contenu rparti dans
diverses sections et catgories. Ce qui correspond la structure de notre cms Joomla!

6.3.3 Structure Web

Elle ne part pas dune structure pr tablie, mais est compose dune srie de liens allant dans tous les
sens. Cette manire de fonctionner nest pas recommande.

55

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[7] Septime heure

Identit du site et charte graphique

a charte graphique est le document qui contient l'ensemble des rgles fondamentales
d'utilisation des signes graphiques qui constituent l'identit graphique de votre projet
Web. Il vous appartient de dvelopper ce type de document de manire rflchie.
Ce document serra une rfrence pour la personne qui fera la maintenance de votre site.
7.0 En rsum

H E U R E

dapprentissage
de test
dexercice
de rvision

Nous allons dfinir ici, le but et les intrts de la charte graphique de votre
site. Le contenu de celle-ci tant le logotype, les couleurs, les polices de
caractres, les lments graphiques et le choix des images et des
illustrations. Vous endossez ici la casquette du directeur artistique.
7.1

But et intrts de la charte graphique

La charte graphique de votre futur site Internet est un document qui permet de
dfinir la position des diffrents lments, les principes de navigation, les
couleurs hexadcimales qui constituent les principales pages d'un site avant la
programmation de celles-ci. lments participants la bonne perception de
limage que vous voulez vhiculer pour le visiteur.
Le but de la charte graphique est de conserver une cohrence graphique dans
toutes vos ralisations graphiques papier, Web ou multimdia, quels que soient les diffrents acteurs de la
production (Webmestre, Web designer, traducteur, rdacteur, graphiste, directeur artistique).
L'identit graphique reste intacte quelles que soient les ralisations graphiques, afin que l'organisation, le
projet ou l'entreprise parle d'une seule voix .
La charte graphique permet aux visiteurs d'identifier facilement votre communication et, par habitude si la
cohrence est respecte, de se reprer visuellement dans vos diffrentes ralisations graphiques.
Il est primordial denvisager le maximum de cas de figures o des rgles doivent s'appliquer pour l'utilisation
des signes graphiques de l'identit graphique.
7.2

Contenu dune charte graphique Internet

Chaque signe graphique utilis par l'organisation est class par thme en prcisant son sens et en
effectuant une liste des concepts qui s'y rattachent. Il ne s'agit pas d'appliquer ces codes dans leur
intgralit mais d'en slectionner quelques-uns afin que tout nouveau document mis par la socit
participe la construction de son image. L'essentiel est de rester dans l'univers graphique de l'entreprise, ou
parfois de le crer.

56

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

La charte graphique s'applique dfinir

7.2.1 Le logotype: ses couleurs dfinies grce au nuancier Pantone, sa position dans la page
sur tous les supports (papier en-tte, documents officiels, plaquettes, dossier et chemises,
camion, etc.), la zone d'exclusion (espace protg minimum autour du logo), ses dclinaisons
sur des fonds blancs et de couleurs. La charte peut galement dfinir les interdits: par exemple,
l'interdiction d'apposer le logo sur un fond noir, de redimensionner le logo sans garder un rapport
d'homothtie
7.2.2 Les polices de caractres utilises dans les documents afin de permettre de crer
diffrents niveaux de textes et d'apporter un bon confort de lecture. La typographie est l'une des
composantes essentielles de l'univers graphique d'une entreprise pour sa reconnaissance. Dans
certains cas comme Renault ou l'Aroport de Paris, on va jusqu' crer une police de caractres
spcifique.
7.2.3 Les jeux de couleurs dclinables sur les diffrents supports de communication: d'une
manire gnrale la charte indique les valeurs Pantone, CMJN, RVB et hexadcimale de chaque
couleur.
7.2.4 L'utilisation des lments graphiques tels que les filigranes, dtail du logo agrandi,
courbes et traits spcifiques l'entreprise.
7.2.5 Les principes du choix des images et des illustrations.
Parmi les problmes que doit prendre en considration la charte graphique, citons la photocopie
et la tlcopie (fax): les documents doivent rsister ces traitements en restant lisibles et
identifiables. La charte prvoit parfois cet effet des versions simplifies des logos, en noir et
blanc ou avec des contrastes tranchs.

57

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[8] Huitime heure

Croquis, et recherches graphiques

rocurez-vous un carnet, et notez tout ce que vous aimeriez voir apparatre dans votre
site. Faites des croquis de la structure au niveau graphique. Parcourez les sites de
banques dimages, de templates gratuits ou en ventes, ou tout simplement les sites de
vos concurrents. Rsistez aux effets de mode, aux graphismes flash et bruyants, pensez
en terme de longvit, de bon got et surtout de lisibilit.

H E U R E

dapprentissage

propos dimages, je vous conseille: www.sxc.hu (gratuit) et

www.stockxpert.com (payant).

de test

8.0 En rsum

dexercice

Un template est un moyen de sparer le fond (le contenu informationnel) de

la forme (la manire dont il est prsent).

de rvision

Trs utilis dans la conception de sites Internet, un template agit comme un modle dans lequel seul
certains lments sont modifiables (le contenu). Cela facilite la conception et la mise jour des sites, aussi
bien sur le contenu que sur la prsentation.
Changer la charte graphique du site revient changer le template, et cela met jour toutes les pages du
site, ajouter une page ne consiste plus qu' en crire le contenu.
Beaucoup de moteurs de template destins la construction de sites sont construits en PHP.
Un autre moyen de grer des templates au niveau d'un site consiste utiliser des feuilles de style CSS.
http://fr.wikipedia.org/wiki/Template

58

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[9] Neuvime heure

Recherche et installation dun template

echercher un template Joomla! est une chose aise vu le grand nombre de sites gratuits.
Trouvez un bon template, valide W3C, compatible sur tous les systmes et toutes les
plateformes est une autre paire de manches.

H E U R E

dapprentissage
de test
dexercice
de rvision

9.0 En rsum
Le but de cette nest pas de faire de vous des webdesigners professionnels. Il
existe diverses manires de mettre en page sur Internet, en html, xhtml,
avec du javascript ou en flash. Notre propos est ici de vous donner un
contrle gnral sur le contenu et le graphisme, via un template existant
multi plateforme et ce sans notions prliminaires ou dveloppement. Une
seconde tape permettra ceux qui le dsirent daller plus loin en partant de
zro.

Si vous ne dsirez pas partir de zro tout de suite, de trs bons sites, vous permettent dacqurir pour des
sommes modestes, en gnral 30 euros, des templates qui reprennent toutes ces conditions. A charge
aprs pour vous de rentrer dans le code html et de le personnaliser.
Je vous conseille les trs bons sites: Joomlashack: www.joomlashack.com et Joomlart: www.joomlart.com
qui proposent dailleurs tous les deux des templates gratuits dexcellentes qualits!
Depuis, le dbut de cette formation, nous travaillons sur le template dexemple fournis par Joomla! Il
est temps daller plus loin. Une fois votre template de prdilection tlcharg ou ralisvient le
moment de linstallation. Facile comme un clic!

Cette feuille de style est annote en franais et reprend tous les styles indispensables Joomla! 1.0 et
1.5.
9.1

Installer un template

Via l'espace d'administration

le menu Installation
Templates-Site .
Vous pouvez maintenant envoyer et installer votre template via la page Installer un nouveau
template .
Cliquer sur le bouton Parcourir
parcourir le disque et slectionner l'archive Zip du template
choisis
une fois le template slectionn
cliquer ensuite sur le bouton Installer
un message
de confirmation apparat, vous n'avez plus qu' cliquer sur le lien Continuer
Dans le menu Templates du Site. Cocher la case du template que vous venez d'installer, et cliquer sur
l'icne Dfaut pour valider l'utilisation de celui-ci. Vous pouvez mettre un template par dfaut et
59

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

attribuez des templates diffrents dautres pages. Par exemple pour avoir une ambiance de couleur
par sections.

60

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

[10] Dixime heure

Rvision et sance de questions

Oui! Toi au fond de la classe, parles plus fort sil te plat!

10.0 En rsum
Cette heure sera consacre une vision panoramique des travaux raliss et des
problmes rencontrs sur les notions vues prcdemment.

H E U R E

dapprentissage
de test
dexercice

Alors que le processus de cration en est ces prmices, il nen est pas
moins vrais que les processus techniques et de structuration restent des
passages obligs. Assurez vous donc bien que toutes les notions sont
comprises.

de rvision

61

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[11] Onzime heure

Les images pour le Web, le multimdias, les formats

our illustrer vos documents sur le Web, il vous faudra optimiser vos illustrations,
photographies ou vidos. Un bon site Web, devra tre lger et dun affichage rapide, pour
cela, le poids final des mdias doit toujours tre revus la baisse, mais tout en
privilgiant une qualit acceptable sans pixellisation excessive.

H E U R E

dapprentissage
de test
dexercice

Diffrents logiciels de retouches dimages existent sur le march, mais depuis

longtemps Adobe occupe une place prpondrante et de monopole.
Le traitement de limage est donc une base et un pr requis, la ralisation
de votre site. Nous donnons ce sujet, une autre formation.

de rvision

11.0 En rsum
La faon dont vous retouchez et travaillez vos images est primordiale et doit toujours se faire partir
doriginaux de bonne qualit. Les images et le multimdia en gnral seront abords durant cette heure par
leurs formats utilisables sur Internet, lintgration html, un descriptif des diffrents attributs et en final de la
manire dintgrer tout cela.
11.1

Les images

11.1.1

Les formats utilisables sur Internet

Le Web ne supporte trs peu de formats d'image: le GIF et le JPEG, les plus frquents, et le dernier venu le
PNG.
1.

GIF, le Graphics Interchange Format a t cr par CompuServe. Ce format s'est rapidement

impos sur le Web, il est utilis essentiellement pour des images avec des zones transparentes,
avec des aplats de couleurs (logo) et dans le cas danimations. Il est limit un maximum de 256
couleurs distinctes.

2.

JPEG, le Joint Photographic Experts Group utilise une technique plus puissante, d'o des images
plus compactes. Vous devez choisir le taux de compression en fonction de la qualit souhaite.
En gnral, je prconise un taux de compression 60%. Ce format est idal pour vos
photographies et illustrations trs nuances dans les coloris. Il supporte des images de 24 bits
(million de couleurs) mais naccepte pas les transparences ni les entrelacements.

3.

PNG, le Portable Network Graphic allie les qualits des deux formats prcdents: transparence,
affichage progressif, pas de limitation du nombre de couleurs et bon taux de compression.
Cest un algorithme de compression sans perte de donnes.
62

2 4

11.1.2

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Intgration html

Pour intgrer une image au sain du document html, il faut utiliser la balise IMG. Laffichage peut tre
enrichi par des attributs. Joomla! utilise un diteur WYSIWYG (se prononce wiziwig) littralement:
Ce que vous voyez est ce que vous obtenez, ce terme dsigne les logiciels qui prsentent une
interface d'dition permettant de visualiser immdiatement le rsultat final obtenu. Il existe deux
manires de raliser les pages HTML: un diteur de texte classique comme Notepad, ou tout autre
bloc-notes... soit avec un diteur WYSIWYG comme Dreamweaver, Golive, Webexpert... Joomla! vous
propose les 2 alternatives.
11.1.3

Tableau des diffrents attributs

Attribut

Description

src
width
height
alt
hspace
vspace
align
usemap

nom du fichier image

largeur de l'image
hauteur de l'image
commentaire
marge horizontale de l'image
marge verticale de l'image
Alignement du texte par rapport l'image
nom de la carte d'image ractive utilise

11.1.4 Comment intgrer votre image?

Une fois votre image place dans le gestionnaire des mdias de Joomla!, dans
le dossier stories et le sous rpertoire cr par vos soins.
Vous devez l'insrer dans votre article. C'est ici qu'intervient la balise <IMG>,
si vous nutilisez pas lditeur de Joomla! Comme vu prcdemment. Il est
donc utile, de revoir quelques notions dintgration html. La balise <IMG> a
besoin de lattribut SRC, lequel prend comme valeur le nom de l'image
afficher, avec son extension (jpg, gif ou png).
Deux autres attributs, WIDTH et HEIGHT, sont optionnels. Mais leur utilisation
est conseille. Ils dfinissent la largeur et la hauteur de l'image, ce qui permet
au navigateur danticiper et d'organiser le texte en consquence. Ces valeurs
permettent aussi d'tirer ou de rtrcir les images pour obtenir des vignettes,
mais ce systme est dconseill, car il utilise inutilement des images alourdies
et la qualit daffichage est mauvaise.
L'attribut ALT, sert insrer un commentaire, en lie et place de l'image, si elle
ne devait pas safficher.

63

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

11.1.5 Exemple
<IMG SRC= images/stories/crayon.jpg WIDTH= 150 HEIGHT= 250 alt= Crayon la plage >
tania.jpg, se trouve donc, dans ce cas de figure, dans le dossier images et le sous dossier stories .
HSPACE et VSPACE permettent de dfinir une marge autour des images, dfinissants le nombre de pixels
sparant l'image, des textes ou images qui l'entourent.
ALIGN paramtre l'alignement vertical de l'image avec le texte qui l'entoure.
ALIGN= bottom
le bas de l'image sera align avec la base de la ligne du texte.
ALIGN= middle
le milieu de l'image qui sera align avec la base du texte.
ALIGN= top
le haut de l'image sera align avec la base du texte.
Une image peut aussi tre place en fond de page, de tableau
<BODY BGCOLOR= #ffffff BACKGROUND= images/fond.jpg > ou <TD BGCOLOR= #ffffff
BACKGROUND= images/fond.jpg > etc
Dans joomla, les images faisant parties du template, se trouvent dans le dossier: templates la racine
du site, puis dans le sous-dossier portant le nom de votre template, et en final dans le dossier images ,
ce dossier est accessible via une connexion ftp, ou via lexcellent composant: JoomlaXplorer, qui vous
permet dexplorer votre cms. Il nest pas install dorigine et ne semble pas encore ce moment compatible
entirement avec la version 1.5 de Joomla!. Vous pouvez alors diter les fichiers html, php et les images.
Cette manire de procder est vue la douzime heure de ce syllabus.
http://www.joomlafrance.org/telecharger/fileinfo/JoomlaXplorer.html

64

2 4

11.1.6

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Exercice

Dans le but de la ralisation finale, et en fonction de leur utilisation, il vous est demand doptimiser vos
images pour votre portfolio .
Par la suite, et via votre Dreamweaver , nous allons visualiser lintgration html, et le code gnr.
Jai beaucoup appris tudier les pages de codes des sites qui mintressaient sur le Web.
Pour ce faire, via votre navigateur, aller dans le menu fichier et slectionner enregistrer sous
11.2

Les formats multimdias

11.2.1

Les formats utilisables sur Internet

Par multimdia, on entend, la musique, les vidos, les animations (flash, 3D) et les vidos. Attention, ces
types de fichiers sont souvent trs lourds et ralentissent laffichage de votre page. Il est donc important de
se pencher avant, sur la pertinence ou non de leurs utilisations!
Pour le son
1.
2.
3.

MIDI, le format trs lger.

WAV, le format non compress.
MP3, RealAudio, formats compresss.

Pour la vido
1.
2.
3.
4.
5.
6.
11.1.3

SWF, animations vectorielles - Flash

MOV, AVI, ASF, formats trs peu compresss.
MPEG format adopt pour les CD-Vido, les DVD et aussi la TV numrique.
RealVideo, format pour la vido sur le Web.
VRML (Virtual Reality Markup Language) Ralit virtuelle en 3D.
Java.
Intgration html

La aussi, Joomla! vous permet de grer cela trs facilement via linterface de son diteur html.
Lien vers un fichier multimdia
Pour ajouter du multimdia sur son site, il suffit de faire un lien classique vers le son ou la vido.
65

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Exemple
<A HREF= crayon_plage.avi >Cliquez ici pour voir Crayon la plage</A>
Quand l'utilisateur clique sur ce lien, 2 cas de figures peuvent se proposer:
1. Aucun logiciel (plug-in) n'est associ ce type de fichier.
Le navigateur propose l'utilisateur de tlcharger le fichier, lequel pourra ensuite tre lu hors
connexion.
2. Un logiciel (plug-in) est associ ce type de fichier.
Le fichier est pris en charge automatiquement par le programme adquat aprs
tlchargement. Dans certains cas, le fichier peut galement tre lu en direct, on parle alors
de streaming, pour ce genre dopration, il faut avoir un hbergement avec une bonne bande
passante. On ne peut pas voir par la suite le fichier hors connexion.
11.1.14

Tableau des diffrents attributs

Dautres attributs peuvent enrichir votre code. En mode Wysiwyg, Dreamweaver offre la possibilit
d'ajouter facilement des fichiers multimdias avec les valeurs adquates, l'aide de la balise
<EMBED>. Je vous conseille donc dutiliser cette manire de procder si vos connaissances en html
sont basiques.
SRC
ALIGN, BORDER, WIDTH, HEIGHT
AUTOLOAD, AUTOSTART

LOOP
HIDDEN
PLUGINSPACE

pour indiquer le nom du fichier intgrer.

alignement et dimensions du mdia.
indication que le fichier doit tre charg et jou
automatiquement si leur valeur est true. Dans le cas
contraire (valeur false), vos visiteurs devront
appuyer sur le bouton de lecture pour jouer le
mdia.
le nombre de fois que le fichier doit tre jou.
Une valeur de -1 signifie que le fichier sera lu
l'infini.
cache la barre de contrle du mdia.
spcifie l'URL o tlcharger le plug-in
correspondant.

Exemple pour une vido

<EMBED SRC= tania_plage.mov WIDTH= 400 HEIGHT= 250 CONTROLLER= true
AUTOPLAY= true >
Si vous aimez les ambiances de fond, vous pouvez placer une musique sur votre page au format
MIDI. Attention de ne pas attraper le syndrome du sapin de Nol!
On utilise la balise <BGSOUND>:
<BGSOUND SRC= /sons/mer.mid LOOP=-1>

66

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Cette balise possde deux attributs

SRC

indique le chemin du fichier MIDI, ici mer.mid se

trouve dans le dossier sons .

LOOP

le nombre de fois que le fichier sera entendu.

Pour jouer le fichier en boucle, utiliser la valeur -1.

67

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[12] Douzime heure

Installation du template - modifications des images

C
H E U R E

Omment faire? Il y a toujours une solution trs simple. Vous avez donc prcdemment
install un magnifique template, et vous voulez remplacer la bannire montrant deux
hommes daffaires se congratulant, par la photo de Poutine , votre caniche favori!
Utilisez cet effet, lexplorateur de fichiers, frachement install dans votre interface
dadministration: http://joomlacode.org/gf/project/joomlaxplorer
Joomlaxplorer.

dapprentissage
de test
dexercice
de rvision

Vous avez alors accs la racine du site: vous choisissez le dossier

templates ensuite le dossier de votre template, et vous avez accs
direct aux images et la feuille de style.
12.0 En rsum

Pour effectuer la transformation du template basique plac lors de linstallation, il suffit de remplacer
les images, en faisant bien attention de garder les mmes noms, tailles et extensions. Si vous voulez
aller plus loin dans les modifications en touchant la feuille de style, cela fera lobjet dun cours
suivant. Patience!

68

2 4

P O U R

C R E R

M O N

S I T E

69

W E B

V I A

L E

C M S

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[13] Treizime heure

Notions dHTML

n site est compos de fichiers (pages HTML, images, base de donnes) stocks sur
un serveur. Visualisez le code source d'autres pages, en commenant par des
pages simples. Vous avez accs au code source en tapant Ctrl-U. C'est le plus
souvent par l'imitation d'autres pages qu'on apprend. Firefox vous permet
galement via sa barre de dveloppeur de visualiser la feuille de style et la structure
de la page.

H E U R E

dapprentissage

13.0 En rsum

Lorsque vous tapez une adresse dans la barre d'adresses de votre

navigateur, votre fournisseur d'accs va vous mettre en relation avec le
dexercice
serveur sur lequel se trouve le site en question. Pour que votre site soit
visible de n'importe quel navigateur, on utilise le langage HTML qui est
de rvision
ncessaire pour afficher, mettre en page votre texte, insrer des images ou
crer des liens hypertextes. Cette heure est consacre un survol de ces notions.
de test

13.1 Dfinitions
13.1.1 Qu'est-ce qu'un serveur?
Ce n'est ni plus ni moins qu'un ordinateur dont la fonction principale est de vous envoyer des donnes
(pages, images, programmes...)
13.1.2 HTML: Ce langage repose sur le concept de balises qui s'utilisent comme suit:
Texte auquel on applique cette balise
Ainsi, voici en HTML les mots suivants:
gras: <b>gras</b>
italique: <i>italique</i>
soulign: <u>soulign</u>
lien vers crayons.be: <a href= http://www.crayons.be/ >lien vers crayons</a>
Il existe ainsi des dizaines de balises HTML qui permettent de dfinir votre page selon votre got l'aide de
tableaux, de style, de cadres et autres.

Aujourd'hui, grce aux diteurs HTML trs intuitifs, aucune connaissance en HTML n'est ncessaire
pour commencer faire son site Internet, mais ce serait comme rduire notre langage lalphabetpour
aller plus loin et matriser loutil, il faut pouvoir entrer dans le code html et savoir le modifier, ladapter aux
besoins.

70

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Les balises ouvrantes et fermante

Une page HTML est un fichier texte pur, dans lequel sont tapes des balises (ou tags, en anglais). Les
balises sont dfinies par les symboles < et >. Comme par exemple <B> qui passe un mot en gras. La
plupart des balises vont par paire (balise ouvrante / balise fermante). Pour mettre un mot en gras, la
syntaxe exacte est: <B>le mot en gras</B>. De mme, les balises pour dfinir l'italique sont <I> et </I>.
Certaines balises sont uniques, comme <HR> qui dfinit une ligne horizontale. Il n'existe donc pas de
</HR>.
Les seules balises qui ne se ferment pas en HTML sont la balise <br> et la balise <img>. Pour tre plus
conforme au XHTML (plus strict que le HTML) o l'on demande ce que les balises soient toujours fermes,
nous dirons qu'il faut les fermer comme ceci: <br />
13.2 La structure gnrale d'une page HTML est
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
1.
2.
3.

Les limites de la page sont donnes par <HTML> et </HTML>.

Les limites de l'en-tte sont donnes par <HEAD> et </HEAD>.
Les limites du corps de la page (partie principale) sont donnes par <BODY> et </BODY>.

La notion d'attribut
<p align= right >Crayons</p>
On peut rajouter un attribut pour donner la balise des proprits supplmentaires.
Ici, on dit la balise <p> (paragraphe) que l'on va changer son alignement (align).
Les attributs ont des valeurs pour prciser la valeur qu'aura l'attribut.
Ici, Crayons sera align droite (align= right ). Chaque balise peut comporter un ou plusieurs
attributs, chacun pouvant avoir soit aucune, soit une ou plusieurs valeurs.
On peut imbriquer les balises, condition qu'elles soient fermes dans l'ordre inverse celui o elles ont t
ouvertes:
<b><i>Ce texte est en gras et en italique</i> et celui ci en gras</b>
Ce texte est en gras et en italique et celui ci en gras
Mais attention aux inversions, qui ne marcheront pas!
<b><i>Cette imbrication est mauvaise</b> et ne marchera pas</i>

71

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

13.3 Index des attributs

Le logo

signifie que cet attribut est obligatoire avec les balises indiques.

Le logo

signifie que l'utilisation de cet attribut est dconseille.

Source: http://www.themanualpage.org/html/html_attributs.php
nom

balises

format/valeurs

commentaires

abbr

TD, TH

texte

accept-charset

FORM

jeux de caractres

accept

FORM, INPUT

content types

accesskey

caractre

action

A, AREA, BUTTON,
INPUT, LABEL, LEGEND,
TEXTAREA
FORM

abrviation
pour les cellules
d'en-tte
liste des jeux
de caractres
supports
liste des types
MIME pour
l'upload de
fichiers
touche
d'accessibilit

align

CAPTION

top, bottom, left,

right

align

APPLET, IFRAME, IMG,

INPUT, OBJECT

bottom, middle, top,

left, right

align

LEGEND

top, bottom, left,

right

align

TABLE

left, center, right

align

HR

left, center, right

align

DIV, H1, H2, H3, H4,

H5, H6, P

left, center, right,

justify

align

COL, COLGROUP,
TBODY, TD, TFOOT, TH,
THEAD, TR

left, center, right,

justify, char

alink

BODY

couleur

alt

APPLET

texte

alt

AREA, IMG

texte

description
courte

alt

INPUT

CDATA

description
courte

72

URI

ressource
serveur qui
traitera le
formulaire
alignement par
rapport la
table
alignement
vertical ou
horizontal
alignement par
rapport au
FIELDSET
position de la
table par
rapport la
fentre
alignement
horizontal de la
ligne
alignement du
texte
alignement des
donnes et
justification du
texte dans la
cellule
couleur pour les
liens
slectionns
description
courte

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

archive

APPLET

CDATA

archive

OBJECT

CDATA

axis

TD, TH

CDATA

background

BODY

URI

bgcolor

TABLE

couleur

bgcolor

TR

couleur

bgcolor

TD, TH

couleur

bgcolor

BODY

couleur

border

TABLE

pixels

border

IMG, OBJECT

pixels

cellpadding

TABLE

Length

cellspacing

TABLE

Length

char

COL, COLGROUP,
TBODY, TD, TFOOT, TH,
THEAD, TR

caractre

charoff

Length

charset

COL, COLGROUP,
TBODY, TD, TFOOT, TH,
THEAD, TR
A, LINK, SCRIPT

checked

INPUT

sans valeur

cite

BLOCKQUOTE, Q

URI

cite

DEL, INS

URI

liste d'archives
spares par
des virgules
liste d'URIs
spars par des
espaces
liste d'en-ttes
apparents
spars par des
virgules
image
d'arrire-plan
du document
couleur
d'arrire-plan
des cellules
couleur
d'arrire-plan
pour la ligne
couleur
d'arrire-plan
pour la cellule
couleur
d'arrire-plan
du document
paisseur de la
bordure de la
table
paisseur de la
bordure
lorsqu'un lien
est blit sur la
balise
marge
intrieure des
cellules
espacement
entre les
cellules
caractre
d'alignement,
par exemple
char=:
dcalage pour
le caractre
d'alignement
jeu de
caractres de la
ressource
pointe
coche les cases
cocher
(checkbox) ou
les boutons
radio
URI du
document ou
du message
source
raison pour
laquelle on a
chang

73

jeu de caractres

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

class

CDATA

liste de classes
spares par
des espaces

classid

toutes les balises sauf

BASE, BASEFONT,
HEAD, HTML, META,
PARAM, SCRIPT, STYLE,
TITLE
OBJECT

URI

identifie une
implmentation

clear

BR

left, all, right, none

code

APPLET

CDATA

saut de ligne.
La valeur par
dfaut est
none.
fichier.class de
l'applet

codebase

OBJECT

URI

codebase

APPLET

URI

codetype

OBJECT

content type

color

BASEFONT, FONT

couleur

cols

FRAMESET

MultiLengths

cols

TEXTAREA

nombre

colspan

TD, TH

nombre

compact

DIR, DL, MENU, OL, UL

sans valeur

content

META

CDATA

information
associe

coords

AREA

Lengths

coords

Lengths

data

OBJECT

URI

liste de
longueurs
spares par
des virgules
utilis pour les
zones d'image
cliquables
URI des
donnes de
l'OBJECT

74

URI servant de
base pour le
calcul des URI
des attributs
classid, data,
archive
URI facultative
de base pour
l'applet
content type du
code de
l'OBJECT
couleur du
texte
liste de
longueurs.
Valeur par
dfaut: 100%
(1 col)
largeur visible
en largeurs
moyennes
caractres
nombre de
colonnes
couvertes par
la cellule. La
valeur par
dfaut est 1.
rduit l'espace
entre les items

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

datetime

DEL, INS

Datetime

date et heure
du changement

declare

OBJECT

sans valeur

defer

SCRIPT

sans valeur

dir

toutes les balises sauf

APPLET, BASE,
BASEFONT, BDO, BR,
FRAME, FRAMESET,
IFRAME, PARAM, SCRIPT
BDO

ltr, rtl

dclare mais
n'instancie pas
le flag
pour diffrer
l'excution d'un
script (on peut
attendre la fin
de la
gnration du
document)
sens de lecture
d'un texte
neutre

ltr, rtl

sens de lecture
du texte

sans valeur

enctype

BUTTON, INPUT,
OPTGROUP, OPTION,
SELECT, TEXTAREA
FORM

face

BASEFONT, FONT

CDATA

for

LABEL

ID

frame

TABLE

frameborder

FRAME, IFRAME

void, above, below,

hsides, lhs, rhs,
vsides, box, border
1, 0

headers

TD, TH

IDs

height

IFRAME

Length

rend un
contrle non
disponible
content type
utilis pour
envoyer le
formulaire au
serveur. La
valeur par
dfaut est
application/xwww-formurlencoded .
liste de noms
de polices
(fonts) spars
par des
virgules
associe ce
LABEL au
contrle
indiqu
quelle partie du
cadre doit tre
affich
doit-on afficher
une bordure
entre les
frames? La
valeur par
dfaut est 1.
liste d'ID de
cellules d'entte
hauteur de la
frame

height

TD, TH

Length

dir
disabled

75

content type

hauteur de la
cellule

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

height

IMG, OBJECT

Length

force la hauteur
de l'OBJECT

height

APPLET

Length

hauteur initiale

href

A, AREA, LINK

URI

href

BASE

URI

hreflang

A, LINK

code de la langue

URI de la
ressource
pointe
URI servant de
base pour le
calcul des URI
relatives
code de la
langue

hspace

APPLET, IMG, OBJECT

pixels

http-equiv

META

nom

id

ID

ismap

toutes les balises sauf

BASE, HEAD, HTML,
META, SCRIPT, STYLE,
TITLE
IMG, INPUT

label

OPTION

texte

label

OPTGROUP

texte

lang

code de la langue

language

toutes les balises sauf

APPLET, BASE,
BASEFONT, BR, FRAME,
FRAMESET, IFRAME,
PARAM, SCRIPT
SCRIPT

link

BODY

couleur

longdesc

IMG

URI

longdesc

FRAME, IFRAME

URI

76

sans valeur

CDATA

marge
horizontale
autour de
l'objet
nom de l'entte HTTP de la
rponse
identifiant
unique de la
balise
sur une image
cliquable,
permet
d'envoyer les
coordonnes du
point cliqu
tiquette de
l'lment de la
liste droulante
tiquette
utiliser pour
l'OPTGROUP
code de la
langue

langage de
programmation
utilis pour le
script
couleur des
liens
lien vers une
description
longue
(complment
de alt)
lien vers une
description
longue
(complment
de alt)

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

marginheight

FRAME, IFRAME

pixels

marginwidth

FRAME, IFRAME

pixels

maxlength

INPUT

nombre

media

STYLE

MediaDesc

media

LINK

MediaDesc

method

FORM

GET, POST

multiple

SELECT

sans valeur

name

BUTTON, TEXTAREA

CDATA

hauteur de la
marge en
pixels
largeur de la
marge en
pixels
nombre maxi
de caractres
que peut
contenir un
champ texte
cette feuille de
style est
prvue pour tel
mdia
cette page est
prvue pour
ces mdia
mthode HTTP
utiliser pour
envoyer le
formulaire. La
valeur par
dfaut est GET.
liste slection
multiple. Par
dfaut, c'est
une slection
simple.
nom du
contrle

name

APPLET

CDATA

name

SELECT

CDATA

name

FORM

CDATA

name

FRAME, IFRAME

CDATA

name

IMG

CDATA

name

CDATA

name

INPUT, OBJECT

CDATA

name

MAP

CDATA

77

nom de
l'applet. Permet
aux autres
applets de la
trouver.
nom de la liste
nom du
formulaire.
Utilis pour les
scripts.
nom de la
frame. Utilis
avec l'attribut
target.
nom de
l'image. Utilis
pour les
scripts.
nom de
l'ancrage
nom envoy
dans un
formulaire
nom utilis
avec usemap

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

name

PARAM

CDATA

nom du
paramtre

name

META

nom

nohref

AREA

sans valeur

nom de la
mtainformatio
n
cette rgion n'a
pas d'action

noresize

FRAME

sans valeur

noshade

HR

sans valeur

nowrap

TD, TH

sans valeur

object

APPLET

CDATA

onblur

A, AREA, BUTTON,
INPUT, LABEL, SELECT,
TEXTAREA
INPUT, SELECT,
TEXTAREA

script

l'lment perd
le focus

script

la valeur de
l'lment a
chang
on vient de
cliquer sur un
bouton de la
souris

onchange

onclick

ondblclick

onfocus

onkeydown

toutes les balises sauf

APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
toutes les balises sauf
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
A, AREA, BUTTON,
INPUT, LABEL, SELECT,
TEXTAREA
toutes les balises sauf
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE

78

script

l'utilisateur
peut-il changer
la taille de la
frame?
la ligne est
dessine avec
une seule
couleur, plutt
qu'avec un
effet d'ombre
supprime les
sauts de ligne
automatiques
fichier d'applet
srialize

script

on vient de
double-cliquer
sur un bouton
de la souris

script

l'lment
gagne le focus

script

une touche a
t enfonce

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

onkeypress

script

une touche a
t enfonce
puis relche

script

une touche a
t relche

onload

toutes les balises sauf

APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
toutes les balises sauf
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
FRAMESET

script

onload

BODY

script

onmousedown

toutes les balises sauf

APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
toutes les balises sauf
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
toutes les balises sauf
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
toutes les balises sauf
APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE

script

toutes les
frames
viennent d'tre
charge
le document
vient d'tre
charg
un bouton de la
souris a t
enfonc

onkeyup

onmousemove

onmouseout

onmouseover

79

script

la souris vient
de bouger au
dessus de
l'lment

script

la souris quitte
la zone
graphique de
l'lment

script

la souris vient
d'arriver audessus de
l'lment

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

onmouseup

script

un bouton de la
souris vient
d'tre relch

onreset

toutes les balises sauf

APPLET, BASE,
BASEFONT, BDO, BR,
FONT, FRAME,
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE
FORM

script

onselect

INPUT, TEXTAREA

script

le formulaire
vient d'tre
rinitialis
du texte a t
slectionn

onsubmit

FORM

script

onunload

FRAMESET

script

onunload

BODY

script

profile

HEAD

URI

prompt

ISINDEX

texte

readonly

TEXTAREA

sans valeur

readonly

INPUT

sans valeur

rel

A, LINK

types de liens

rev

A, LINK

types de liens

rows

FRAMESET

MultiLengths

rows

TEXTAREA

nombre

80

on vient
d'envoyer le
formulaire
toutes les
frames
viennent d'tre
enleves
le document
vient d'tre
enlev
liste de fichiers
contenant des
meta
informations
message de
prompt
empche de
changer le
contrle
ne fonctionne
que pour text
et passwd
liste de types
de liens
identifiant la
ressource
pointe dans
href
liste de types
de liens
identifiant la
ressource ayant
amene la
page courante
dfinit le
dcoupage
horizontal des
frames. Liste
de longueurs.
Valeur par
dfaut: 100%
(1 ligne)
nombre de
lignes afficher

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

rowspan

TD, TH

nombre

rules

TABLE

none, groups, rows,

cols, all

scheme

META

CDATA

scope

TD, TH

row, col, rowgroup,

colgroup

scrolling

FRAME, IFRAME

yes, no, auto

selected

OPTION

sans valeur

shape

AREA

rect, circle, poly,

default

shape

rect, circle, poly,

default

size

HR

pixels

nombre de
lignes
couvertes par
la cellule. La
valeur par
dfaut est 1.
gre l'affichage
de lignes entre
les colonnes et
les lignes. La
valeur par
dfaut est
none.
dsigne un
procd pour
l'interprtation
de la balise
META
domaine
couvert les
cellules d'entte
ajoute une
barre de
dfilement ou
non. La valeur
par dfaut est
auto.
slectionne
l'OPTION en
question dans
la liste SELECT
contrle
l'interprtation
des
coordonnes.
La valeur par
dfaut est rect.
forme et
position de la
zone cliquable.
La valeur par
dfaut est rect.
hauteur de la
ligne

size

FONT

[+|-]nn (ex. size=

+1 , size= 4 )

taille de la
police (font)

size

INPUT

CDATA

size

BASEFONT

CDATA

size

SELECT

nombre

largeur du
contrle. En
pixels, sauf
pour les INPUT
de type text et
password
(nombre de
caractres).
taill de base
pour les
lments FONT
nombre de
lignes visibles

81

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

span

COL

nombre

span

COLGROUP

nombre

src

SCRIPT

URI

src

INPUT

URI

src

FRAME, IFRAME

URI

src

IMG

URI

standby

OBJECT

texte

start

OL

nombre

style

toutes les balises sauf

BASE, BASEFONT,
HEAD, HTML, META,
PARAM, SCRIPT, STYLE,
TITLE
TABLE

feuille de style

nombre de
colonnes
couvertes par
l'lment COL.
La valeur par
dfaut est 1.
nombre par
dfaut de
colonnes du
groupe. La
valeur par
dfaut est 1.
URI pointant
vers un script
externe
URI o trouver
l'image pour le
contrle
source du
contenu de la
frame
URI de l'image
inclure dans
le document
message
afficher
pendant que
l'OBJECT se
charge
numro qui
dmarre la
section OL
feuille de style
associe
l'lment

A, AREA, BUTTON,
INPUT, OBJECT,
SELECT, TEXTAREA
A, AREA, BASE, FORM,
LINK

nombre

text

BODY

couleur

title

texte

type

toutes les balises sauf

BASE, BASEFONT,
HEAD, HTML, META,
PARAM, SCRIPT, TITLE
A, LINK

content type

content type
indicatif

type

OBJECT

content type

content type
des donnes
spcifies par
data

summary

tabindex

target

82

texte

FrameTarget

rsum du
contenu de la
table pour le
rendu audio
position dans la
squence de la
touche tab
le rsultat de
l'action sera
affich dans la
frame dsigne
par target
couleur du
texte du
document
titre indicatif

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

type

PARAM

content type

type

SCRIPT

content type

type

STYLE

content type

type

INPUT

type

LI

type

OL

text, password,
checkbox, radio,
submit, reset, file,
hidden, image, button
disc, square, circle
(for UL), 1, A, a, I, i
(for OL)
1, A, a, I, i

content type de
l'attributvalue
quand
valuetype=
ref
content type du
langage de
script
content type du
langage de la
feuille de style
type de
contrle. La
valeur par
dfaut est text.
liste de styles
pour les puces
et numros
style de
numrotation

type

UL

disc, square, circle

style de puce

type

BUTTON

button, submit, reset

usemap

IMG, INPUT, OBJECT

URI

valign

top, middle, bottom,

baseline

value

COL, COLGROUP,
TBODY, TD, TFOOT, TH,
THEAD, TR
INPUT

value

OPTION

CDATA

value

PARAM

CDATA

type de bouton.
La valeur par
dfaut est
submit.
image map
utiliser avec
l'OBJECT
alignement
vertical dans
les cellules
Pour les radio
buttons et
checkboxes
valeur de
l'lment
OPTION
valeur du
paramtre

value

BUTTON

CDATA

value

LI

nombre

valuetype

PARAM

data, ref, object

version

HTML

CDATA

vlink

BODY

couleur

83

CDATA

valeur
renvoye au
serveur avec le
formulaire
rinitialise la
squence de
nombre
comment
interprter la
valeur. La
valeur par
dfaut est data.
la version de
HTML utilis
dans ce
document
couleur pour
les liens visits

2 4

P O U R

C R E R

M O N

S I T E

W E B

L E

C M S

J O O M L A

1 . 5

nom

balises

format/valeurs

commentaires

vspace

APPLET, IMG, OBJECT

pixels

width

HR

Length

marge verticale
autour de
l'OBJECT
largeur de la
ligne

width

IFRAME

Length

largeur de la
frame

width

IMG, OBJECT

Length

force la largeur
de l'OBJECT

width

TABLE

Length

largeur de la
table

width

TD, TH

Length

largeur de la
cellule

width

APPLET

Length

largeur initiale

width

COL

MultiLength

largeur de la
colonne

width

COLGROUP

MultiLength

width

PRE

nombre

largeur par
dfaut des
colonnes
rassembles
dans
COLGROUP
largeur
suggre en
nombre de
caractres pour
l'affichage de la
zone PRE

13.3 Les tableaux

<table width= 90% align=left >...
La balise d'un tableau est <table>.
Ici, on spcifie la largeur (90% de la page) et l'alignement ( gauche).
On noublie pas de fermer ce tableau avec la balise </table>.
Exemples dun tableau de 3 colonnes sur 2 ranges
<table>
<tr>
<td>colonne
<td>colonne
<td>colonne
</tr>
<tr>
<td>colonne
<td>colonne
<td>colonne
</tr>
</table>

V I A

1</td>
2</td>
3</td>
1</td>
2</td>
3</td>

84

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

<table> ouvre le tableau. Les colonnes sont introduites par la balise <tr> (rows=colonnes), et on spcifie
dans chaque colonne le nombre de cellules avec la balise <td>.
13.4 La cration de liens
La balise <a> permet de dfinir un lien.
<a href= http://www.crayons.be >Un lien vers Crayons.be</a>
L'attribut href indique l'adresse url du lien.
Pour crer un lien vers la page suivante, on a deux possibilits: faire un lien relatif, ou absolu.
1.
2.

Lien absolu: http://www.crayons.be/couleurs/

Lien relatif: ../couleurs/

Le lien absolu dmarre la racine du site et va jusqu'a la page que l'on veut atteindre. Avec cela, peut
importe o l'on soit, on atteindra l'adresse.
Le lien relatif tient compte de la page o l'on est.
Si l'on veut qu'un lien vers un autre site s'ouvre dans une nouvelle fentre, il est ncessaire de spcifier
dans le lien la cible de ce lien.
La cible d'un lien se dfinit par l'attribut target. Le plus utilis est target= _blank , qui ouvre une nouvelle
fentre du navigateur par dfaut.
Cependant, si l'on spcifie le nom de la nouvelle fentre (ex: target= fenetre ), on peut faire ouvrir
plusieurs liens dans une mme fentre.
<a href= http://www.crayons.be target= fenetre >Mon lien versCrayons</a>
<a href= http://www.croquis.be target= fenetre >Mon lien vers Croquis</a>
13.5 L'insertion d'images
La balise <img>:<img src= http://www.crayons.be/mascotte.jpg >
L'attribut src indique la source de l'image.
13.6 Les listes
On a souvent besoin d'numrer des listes d'lments, il existe en HTML diffrents types de liste, pour vos
diffrents cas de figures.
1.
2.
3.

les listes puces reprsentes par l'lment UL

les listes numrotes reprsentes par l'lment OL
les listes de dfinitions reprsentes par l'lment DL
<UL>
<LI>item 1
<LI type= circle > item 2
<LI type= square > item 3
</UL>

On commence par placer les balises <UL>

(Unordered List) qui vont dlimiter la liste. Chaque
lment de la liste est ensuite reprsent par
l'lment LI (List Item) dont la balise fermante est
optionnelle. On peut changer l'aspect de la puce en
changeant la valeur de l'attribut type de l'lment LI.
Si on ne donne pas de valeur l'attribut, on a un
cercle plein, avec circle, on a un cercle vide et enfin
avec square, on a un carr plein.

<OL>
<LI type= I > item 1
<LI type= A > item 2
<LI type= i > item 3
<LI type= a > item 4

Comme pour les autres listes, on commence par

dlimiter la liste avec des balises <OL> (Ordered
List) cette fois-ci et ensuite on ajoute les lments
de la liste avec l'lment LI galement.
85

2 4

P O U R

C R E R

M O N

S I T E

</OL>

W E B

V I A

L E

C M S

J O O M L A

1 . 5

On peut changer la faon de numroter les lments

de la liste en changeant la valeur de l'attribut type
avec une des valeurs reprises dans le tableau
suivant:
Type

Aspect

rien ou 1 (dfaut) numrotation arabe

I

numrotation romaine majuscule

numrotation romaine minuscule

numrotation alphabtique majuscule

numrotation alphabtique minuscule

On peut galement changer la valeur de l'attribut

value de l'lment LI. On force ainsi cet lment
avoir un certain numro. Les lments prendront des
numros qui continueront partir de ce numro.
Attention nanmoins, avec cette technique, on peut
se retrouver avec des listes dont les numros ne se
suivent pas et ne sont pas croissants comme en
tmoigne l'exemple suivant.
<OL>
<LI value= 99 >Premier item
<LI>Second item

<DL>
<DT>Item 1
<DD>Dfinition item 1
<DT>Item 2
<DD>Dfinition item 2
</DL>

La liste est dlimite par les balises <DL> (Definition

List), ensuite, on utilise l'lment DT (Definition Title)
pour donner le titre de la dfinition et l'lment DD
pour donner la dfinition. Pour les deux lments DT
et DD, la balise fermante est optionnelle.

Il est tout fait possible d'imbriquer les listes, c'est--dire de mettre une liste comme lment d'une autre
liste.

86

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

13.7 Balises html de base

HTML> et </HTML>

Dbut et fin de la page HTML.

HEAD> et </HEAD>

Dbut et fin de l'en-tte de la page

(zone dans laquelle peuvent tre dfinis un certain
nombre d'lments, dont la plupart sont invisibles pour
le visiteur).

BODY> et </BODY>

Dbut et fin du corps de la page (partie principale).

TITLE> et </TITLE>

Dfinit le titre de la page, tel qu'il apparat au visiteur, en

haut de son navigateur ou browser.
TITLE>Bienvenue sur mon site</TITLE>

<FONT> et </FONT>

Dfinit la police de caractres utilise, la taille, la couleur.

<FONT FACE= verdana SIZE= 3 COLOR=
#000000 >Texte noir en verdana de taille 3</FONT>

<B> et </B>

Affiche le texte en gras.

<I> et </I>

Affiche le texte en italique.

<HR>

Affiche une ligne de sparation horizontale.

<BR>

Provoque un retour la ligne (au sein d'un mme

paragraphe).

<P> et </P>

Dfinit un paragraphe.

<TABLE> et </TABLE>

Dfinit un tableau. Chaque ligne du tableau se

dcompose en <TR> et </TR>, chaque colonne en
<TD> et </TD>.

<A HREF= > et </A>

Dfinit un lien dans une page HTML.

<A HREF= http://www.crayons.be >Aller sur
Crayons</A>

<IMG...>

Insre une image dans une page HTML.

<IMG SRC= image.png >

13.8

Mise en forme du texte

Le langage html ne gre toujours pas les caractres spciaux ou les accents, pour quil saffiche
correctement, il faut utiliser ces codes.
Accent
a accent grave
A accent grave
a accent aigu
A accent aigu
a accent circonflexe
A accent circonflexe
a tilde

Aspect

87

HTML
&agrave;
&Agrave
&aacute;
&Aacute;
&acirc;
&Acirc;
&atilde;

2 4

P O U R

C R E R

M O N

S I T E

W E B

Accent
A tilde
a trma
A trma
a rond
A rond
ae ligatur
AE ligatur
e accent grave
E accent grave
e accent aigu
E accent aigu
e accent circonflexe
E accent circonflexe
e trma
E trma
i accent grave
I accent grave
i accent aigu
I accent aigu
i accent circonflexe
I accent circonflexe
i trma
I trma
o accent grave
O accent grave
o accent aigu
O accent aigu
o accent circonflexe
O accent circonflexe
o tilde
O tilde
o trma
O trma
o barr
O barr
u accent grave
U accent grave
u accent aigu
U accent aigu
u accent circonflexe
U accent circonflexe
u trma
U trma
n tilde
N tilde
c cdille
C cdille
y accent aigu
Y accent aigu
double s allemand
guillemet franais ouvrant
guillemet franais fermant
paragraphe
copyright
espace inscable

88

Aspect

V I A

L E

C M S

HTML
&Atilde;
&auml;
&Auml;
&aring;
&Aring;
&aelig;
&AElig;
&egrave;
&Egrave;
&eacute;
&Eacute;
&ecirc;
&Ecirc;
&euml;
&Euml;
&igrave;
&Igrave;
&iacute;
&Iacute;
&icirc;
&Icirc;
&iuml;
&Iuml;
&ograve;
&Ograve;
&oacute;
&Oacute;
&ocirc;
&Ocirc;
&otilde;
&Otilde;
&ouml;
&Ouml;
&oslash;
&Oslash;
&ugrave;
&Ugrave;
&uacute;
&Uacute;
&ucirc;
&Ucirc;
&uuml;
&Uuml;
&ntilde;
&Ntilde;
&ccedil;
&Ccedil;
&yacute;
&Yacute;
&szlig;
&laquo;
&raquo;
&para;
&copy;
&nbsp;

J O O M L A

1 . 5

2 4

13.9

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

Liste des caractres spciaux en code HTML

caractre

'

(
)
[
]
{
}

`
^

#
*
,
.
:
;

''
''
''
''

&
@
/
\

code texte
&quot;
&laquo;
&raquo;
&lsaquo;
&rsaquo;
&ldquo;
&rdquo;
&bdquo;
&apos;
&lsquo;
&rsquo;
&sbquo;
&hellip;
!
&iexcl;
?
&iquest;
(
)
[
]
{
}
&uml;
&acute;
`
^
&circ;
~
&tilde;
&cedil;
#
*
,
.
:
;
&middot;
&bull;
&macr;
&oline;
&ndash;
&mdash;
&brvbar;
&dagger;
&Dagger;
&sect;
&para;
&copy;
&reg;
&trade;
&amp;
@
/
\
&loz;
&euro;
$
&cent;

commentaire
guillemet anglais,
guillemet franais
guillemet franais
guillemet franais
guillemet franais

guillemet droit (quote)

ouvrant
fermant
simple ouvrant
simple fermant

guillemet double fermant, guillemet apostrophe double

guillemet double fermant bas, guillemet virgule double infrieur
guillemet simple droit
guillemet simple ouvrant, guillemet apostrophe culbut
guillemet simple fermant, guillemet apostrophe
guillemet simple fermant bas, guillemet virgule infrieur
points de suspension
point d'exclamation
point d'exclamation invers
point d'interrogation
point d'interrogation invers
parenthse ouvrante
parenthse fermante
crochet ouvrant
crochet fermant
accolade ouvrante
accolade fermante
accent aigu
accent grave
accent circonflexe
accent circonflexe
tilde
petit tilde
cdille
toile
virgule
point
deux-points
point-virgule
point mdian
gros point mdian
macron
tiret en chef (overline, spacing overscore)
tiret, tiret quart cadratin, tiret de mots composs
tiret demi cadratin, tiret d'incise
tiret cadratin, tiret de dialogue
barre verticale scinde
double oble
section
paragraphe
copyright
marque dpose
marque commerciale (trade mark)
et commercial
arobase
diviser (slash)
anti-slash
losange
euro (monnaie europenne)
dollar (monnaie amricaine)
cent (monnaie amricaine)
89

1 . 5

2 4

P O U R

&pound;
&yen;
&fnof;

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

pound (Livre sterling, monnaie anglaise)

yen (monnaie japonaise)
florin (idem fonction)

Pour aller plus loin dans vos connaissances, Internet regorge de nombreux tutoriaux sur le html

90

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[14] Quatorzime heure

Test dhtml cration de pages basiques

Place la pratique, lexprimentation!

<html>

H E U R E

dapprentissage
de test
dexercice
de rvision

</html>
91

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[15] Quinzime heure

Notions de CSS

Omme toute chose, sur le Web le langage aussi volue. Html, dhtml, xml, xhtml et les
fameuses feuilles de styles: CSS = Cascading Style Sheet. Modle de feuille de style
utilis dans les browsers Web ( partir des versions 4 pour MSIE et Navigator).
Elles permettent (entre autres) de modifier l'aspect de tout un site en ne touchant qu' un
seul fichier (la feuille de style), et donc d'allger grandement la gestion d'un site.

H E U R E

dapprentissage
de test
dexercice
de rvision

Par extension, nom de format de fichier, pour ceux qui contiennent une
description de CSS. Dans tous les exemples prsents ici, nous utiliserons
deux fichiers: index.html , qui va contenir le code HTML, et style.CSS ,
qui va contenir toutes les dfinitions de style.
Le fichier style.CSS est inclus et li comme suit dans notre fichier HTML
(entre les balises <head> et </head>): <link rel= stylesheet type=
text/CSS href= styles.CSS >

La feuille de style peut galement tre incluse au fichier html

15.0

En rsum

Lutilisation de la feuille de style assure un contrle prcis sur la conception et la mise en page graphique et
cela sans affecter la structure sous-jacente. En CSS, il existe deux grandes familles d'lments: les
lments de type bloc , et les lments de style en-ligne . Grosso modo, les lments de type
bloc (DIV, UL, FORM, BLOCKQUOTE, PRE,...), servent la mise en page gnrale de la page en crant de
grands rectangles ' conteneurs . Ils peuvent contenir soit d'autres lments de type bloc , soit des
lments de type en-ligne .
15.1

Les types dlments

Les lments de type en-ligne (A, B, FONT, IMG, INPUT, U, SPAN,...) sont juste des conteneurs plus
petits que bloc, avec un comportement spcifique. IMG et INPUT sont des lments vides d'aprs la DTD.
D'une manire gnrale, vitez d'utiliser les balises HTML pour la mise en forme du contenu, dans l'ide de
sparer au maximum le fond le la forme (le tag U en HTML peut tre avantageusement remplac par textdecoration: underline; en CSS).De plus, ces balises ont des marges externes (margin) et internes (padding)
dfinies par dfaut 0 et non re-dfinissables. Par dfaut, les lments de type bloc vont prendre toute
la largeur de la page.
15.2

Le flux

Cf. Cd ou documents annexes fournis lors de la formation.

http://pbnaigeon.developpez.com/tutorial/CSS-HTML/notions-de-base/#L0

92

2 4

15.3

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Positionnement des lments

http://pbnaigeon.developpez.com/tutorial/CSS-HTML/notions-de-base/#L0
15.4

Proprits des lments

http://pbnaigeon.developpez.com/tutorial/CSS-HTML/notions-de-base/#L0

_____________________________________________________________________________________
Nous ne pouvons pas ici faire le tour complet des multiples possibilits du CSS.
Nous vous recommandons vivement de parcourir les liens en fin de syllabus et de tlcharger les templates
gratuits, pour faire vos premires armes.

93

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[16] Seizime heure

Test de CSS cration de pages basiques

Place la pratique, lexprimentation

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

H E U R E

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
<html xmlns= http://www.w3.org/1999/xhtml lang= fr
xml:lang= fr >

dapprentissage
de test
dexercice
de rvision

</html>
94

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[17] Dix-septime heure

CSS gestion des menus par lexemple

nfantin! Le portail de Joomla! vous propose une srie de modules pour crer et grer vos
menus. http://www.joomlafrance.org/, plus prcisment
http://www.joomlafrance.org/telecharger/select/Menu_et_Navigation/par_titre/1.html

Pour lexercice, je vous demande de tlcharger un menu au choix, de linstaller et de le

paramtrer.

H E U R E

dapprentissage
de test
dexercice
de rvision

17.0

En rsum

Cette heure est consacre au dveloppement dun menu droulant ou non, et

comportant plusieurs niveaux de navigation. Nous allons linstaller et le
modifier. Si vous dsirez aller plus loin dans les modifications de la feuille de
style du menu, il est recommand davoir des notions dhtml et CSS. Les liens
en fin de syllabus devraient vous aider la personnalisation graphique.

95

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[18] Dix-huitime heure

Atelier et questions

S
H E

Top aux notions thoriques! Ces dernires heures vont tres consacres la mise en
chantier de votre site Web, de votre cms Joomla!. Les notions parcourues ci-dessus sont
donnes titre indicatif, ce syllabus est la comme aide mmoire. Lachat dun carnet
rserv vos dcouvertes, ides, ou dveloppement est judicieux.

Une autre suggestion est de crer sur son navigateur, un dossier avec ses favoris, dossier
qui reprendrait tous les sites de rfrences ou dexemples. Rpercutez vos
interrogations sur: http://joomla-cms.blogspot.com/ et
U R E
http://www.facebook.com/group.php?gid=23676315149
dapprentissage
18.0 En rsum
de test
dexercice
de rvision

Les heures dateliers sont prvues pour mettre la main la pte et tester le
cms dans ses moindres recoins. La thorie ne sera explique que sur des cas
concrets, le but ici tant de devenir autonome face la logique et la structure
de Joomla!

96

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[19] Dix-neuvime heure

Modifications en profondeur du template

oncevoir son template est lobjectif de tout graphiste qui se respecte.

Cest facile si vous avez des notions dhtml.
Guide tir gracieusement de http://www.joomladraft.org avec la permission de M.
Servais.

H E U R E

dapprentissage
de test
dexercice
de rvision

19.0

En rsum

Vous avez install Joomla! avec succs; mis en place vos sections et
catgories; rdig avec brio quelques articles; install et publi avec succs
une pliade de composants et de modules et ajout vos menus spcifiques.
Le contenu de votre site Web est parfait. Vous devriez tre satisfait, mais il
n'en est rien. C'est l'esthtique qui ne vous convient pas. Vous avez parcouru
Internet dans tous les sens la recherche de ce template pour Joomla! qui
donnerait l'apparence adquate votre site. Mais vous n'avez pas trouv
l'objet de votre convoitise.

Alors vous avez dcid de concevoir votre template tout seul. Mais vous ne
savez pas comment faire. En surfant sur les forums, vous avez dcouvert que
c'tait une affaire de spcialistes. Aussi avec ce tutorial, vous vous dites que
vous avez enfin trouv ce qu'il vous fallait et que a va tre facile.
Peut-tre ?si vous suivez attentivement le guide; et si vous avez suffisamment de motivation.
19.1

Marche suivre

Avant de commencer encoder un template, il faut avoir une ide assez prcise de l'objectif atteindre. Un
simple croquis sur une feuille de papier permet de fixer les ides. Voici le schma du template que nous
allons raliser ensemble:
Vous remarquerez que ce croquis comporte:
Les diffrentes parties du template:

Le header, le corps du site avec ses colonnes et le footer.

Les diffrentes positions d'affichage:

Elles sont visualises par des rectangles rouges sur fond gris. Vous pouvez bien sr indiquer vos choix de
dimensions et de couleurs.

97

2 4

19.2

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Structure du template

Tous les templates Joomla! reposent sur un ensemble de dossiers et de fichiers structurs suivant une
arborescence prdfinie. Il est primordial de respecter cette arborescence afin que Joomla! puisse trouver
les informations qui lui sont ncessaires.
L'arborescence des fichiers et des dossiers d'un template est la suivante: (voir schma ci-dessous)
ATTENTION: Dans l'illustration, ci-dessous, Joomla! a t install dans un dossier dnomm joomla. Vous
pouvez trs bien avoir install Joomla! dans un dossier portant un autre nom. A mon avis, il est prfrable
d'installer dans un dossier spcifique que directement sous la racine du dossier www. En effet, il est ainsi
possible d'installer localement plusieurs Joomla! Tous les templates du site sont placs dans le dossier
templates.
Les fichiers et dossiers composant un template donn sont regroups dans un dossier identifi par le nom
du template. Ce dossier comporte toujours deux sous-dossiers:

Le dossier CSS est rserv la feuille de style du template,

Le dossier images est destin au stockage des dessins, des textures et des photographies lis au
template.

Le dossier d'un template comporte toujours sa racine les fichiers suivants:

Un fichier index.html dont le contenu est limit la couleur de la page,

Le fichier index.php qui contient le squelette du template,
Un fichier d'installation du template: templateDetails.xml,
Une image rduite du template: template_thumbnail.png.
98

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Les noms de ces dossiers et fichiers sont imposs par Joomla!.

19.3

Mise en place de larborescence

Nous allons maintenant passer aux choses srieuses:

Etape 1:
Etape 2:

Avec l'aide de votre gestionnaire de fichiers, ouvrez le dossier templates de votre site local,
Crez un nouveau dossier et nommez-le: mon_template_1,

C'est le nom du template. Vous pouvez bien sr taper le nom de votre choix.
Il convient cependant de proscrire l'usage des lettres accentues et des espaces, et de prendre de bonnes
habitudes en n'utilisant que des minuscules.
Etape 3: Aprs avoir cr le dossier, ouvrez-le et crez successivement les deux autres dossiers suivants:
CSS et images. Respectez scrupuleusement la convention de nommage des deux noms de dossier, sinon le
template ne fonctionnera pas: les noms de ces deux dossiers sont en minuscules et images est au pluriel.

99

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Vous avez maintenant ceci:

Et bien voil, vous venez de mettre en place l'arborescence de votre premier template.
C'est un bon dbut.
19.4

Les fichiers index.html

Vous avez sans doute remarqu la prsence de plusieurs fichiers index.html dans l'arborescence du
template:

Si vous examinez le contenu de quelques templates disponibles en tlchargement alors vous devriez
constater que ces fichiers ne sont pas toujours prsents. Cela empchent un utilisateur avertis de remonter
la racine de votre dossier.
La mise en place de ces fichiers est trs facile:
tape 1: Ouvrez votre diteur HTML prfr et crer cette page.
tape 2: Enregistrez ensuite ce nouveau fichier dans le dossier racine de votre template en le nommant
index.html.
tape 3: Puis copiez ce fichier dans chacun des sous-dossiers de votre template.

100

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Voil une bonne chose de faite, nous progressons rapidement puisque nous avons:

encod notre premier programme;

mis en place 50% des fichiers ncessaires;
et en plus nous avons scuris une partie du template.

Mais avant de passer la suite, n'avez-vous pas oubli de faire quelque chose?
Alors, vous attendez quoi pour aller vrifier que les fichiers index.html sont bien prsents dans les templates
que vous utilisez pour vos sites Web dj prsents sur la toile?
Il faut vraiment tout vous dire!
La majorit des templates disponibles en tlchargement ne contiennent pas les fichiers index.html. Ajouter
ces fichiers, comme il est mentionn i-avant pour protger votre site.
19.5

Feuille de style CSS

Joomla! utilise de nombreux styles pour l'affichage des diffrents lments du site. Tous ces styles sont
regroups dans un fichier dnomm template_CSS.CSS. Ils incluent les noms des polices, les couleurs et
les espacements de chaque lment. Nous fournissons lors de cette formation, une feuille de style type,
avec des commentaires en franais.
19.6

Le fichier template_thumbnail.png

Le fichier template_thumbnail.png est une image rduite de votre template. Cette image est affiche par
Joomla! dans le gestionnaire des templates du site lors du survol du nom du template par la souris.
La version dfinitive de cette image ne peut tre ralise que lorsque l'encodage du template est
entirement termin. Par consquent, nous allons utiliser une image provisoire afin de rfrencer cette
image dans notre template et viter tout dysfonctionnement de cet lment.
19.7

Le fichier templateDetails.xml

Un template contient toujours un fichier templateDetails.xml.

Joomla! fait appel aux informations incluses dans ce fichier pour pouvoir installer le template et l'afficher sur
le site. La convention de dnomination de ce fichier doit imprativement tre respecte pour que Joomla!
puisse trouver le fichier.
Vous remarquerez:

La prsence de la lettre D en majuscule,

L'absence de lettres accentues.

Le fichier est un fichier XML et son encodage ne laisse pas de place la fantaisie:

pour la casse des balises;

et pour l'ordre d'affichage des donnes.

Le non respect de ces 4 rgles empche Joomla! d'installer le template.

19.8

Le fichier index.php

Le fichier index.php est trs souvent dnomm: Fichier de disposition du template. En langue anglaise, on
utilise l'appellation Layout file. Ceci s'explique par le fait que ce fichier contient le squelette du template avec
les diffrentes positions d'affichage des modules et composants de Joomla!.
101

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

L'extension du fichier laisse supposer qu'il s'agit d'un programme encod en langage PHP. En ralit, il
contient seulement quelques petits bouts de code crits dans ce langage. En effet, l'encodage de l'ossature
du template est ralis en XHTML. Il est dconseill d'utiliser le langage HTML.
XHTML est l'abrviation de eXtensible HyperText Markup Language. Ce langage peut tre considr comme
une volution du HTML 4.01. Il reprend toutes les balises du HTML en appliquant la syntaxe du XML.
Globalement, ceci ne change pas grand chose, il suffit de fermer toutes les balises et de les encoder en
minuscules. Pour plus d'informations, tapez xhtml dans votre moteur de recherche.
19.9

Conseil

Nous vous conseillons sur base de la feuille de style donne, de vous construire un template Joomla! qui
servira de base future toutes vos ralisations! Les fondations en quelque sorte.
Le temps pass prparer ces bases sera bnfique pour votre futur!

102

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[20] Vingt heure

Atelier

Place la pratique, lexprimentation

Thme, problmatique du jour: http://joomla-cms.blogspot.com/ et sur
http://www.facebook.com/group.php?gid=23676315149
20.0 En rsum
H E U R E

dapprentissage
de test

Les heures dateliers sont prvues pour mettre la main la pte et tester le
cms dans ses moindres recoins. La thorie ne sera explique que sur des cas
concrets, le but ici tant de devenir autonome face la logique et la structure
de Joomla!

dexercice
de rvision

103

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[21] Vingt et une heure

Atelier

Place la pratique, lexprimentation

Thme, problmatique du jour: http://joomla-cms.blogspot.com/ et sur
http://www.facebook.com/group.php?gid=23676315149
21.0 En rsum
H E U R E

dapprentissage
de test
dexercice

Les heures dateliers sont prvues pour mettre la main la pte et tester le
cms dans ses moindres recoins. La thorie ne sera explique que sur des cas
concrets, le but ici tant de devenir autonome face la logique et la structure
de Joomla!

de rvision

104

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[22] Vingt deuxime heure

Questions frquentes

Posez vos questions sur notre blog, elles feront lobjet dune refonte de ce
chapitre: http://joomla-cms.blogspot.com/

Comment uploader plus de types de fichiers dans le gestionnaire

de mdia?
H E U R E

dapprentissage
de test
dexercice
de rvision

Il faut rajouter l'extension voulue (mp3, pps... etc) dans le fichier

admin.media.php qui se trouve dans:
administrator/components/com_media . Pour ce faire, ditez
admin.media.php , faites une recherche sur $allowable=array et
rentrez les extensions dsires.

Pourquoi ces messages bizarres qui commencent par Notice ?

Parce que votre serveur Web est un peu trop bavard et que Joomla! le laisse parler! Pour ne plus
afficher ces messages, qui n'ont aucun incidence sur le fonctionnement de votre site, procdez comme
suit
Depuis l'espace d'administration de votre site:
1.
2.
3.
4.

cliquez
cliquez
cliquez
cliquez

sur
sur
sur
sur

l'icne Configuration Gnrale

l'onglet serveur
le menu droulant Rapport d'erreurs: et slectionnez simple
l'icne Enregistrer pour sauvegarder les modifications

Pourquoi il y a un cadenas ct de mon article?

Cette question peut tre reformule en Qu'est ce que la Vrification Globale? , qui rsout en fait le
problme pos. En mode dition de contenu, la personne qui accde ce contenu en est le
propritaire durant le temps de son dition. Une fois l'article sauvegard, ou en quittant le mode
dition par le bouton Annuler / Fermer , celui-ci redevient disponible pour les autres diteurs
du site. Ce systme a t mis en place pour ne permettre qu' une seule personne la fois d'diter un
article.
Le problme survient lorsque cette personne quitte le mode dition sans utiliser soit la sauvegarde
(Sauver), soit l'annulation des modifications (Annuler ou Fermer).
Dans ce cas, par exemple en utilisant un lien du menu, l'article reste attribu la personne
actuellement ditrice dans le systme, et devient inaccessible pour tout le monde.
Seules solutions:

105

2 4

1.
2.

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

cette mme personne rdite l'article et utilise Sauver ou Annuler/Fermer pour quitter l'cran
d'dition (mthode prfre),
ou le fameux Vrification Globale . Cette vrification renregistre tous les contenus
(articles, liens Web, etc.), mme ceux tant en cours d'dition par d'autres diteurs du site! lors
de l'activation de ce lien ( trouver dans le menu Systme )!
Attention donc si vous avez plus qu'un diteur sur votre site!

Note: une icne de cadenas dans la liste des articles indique le(s) articles qui sont checked out ,
donc inaccessibles au(x) non propritaire(s).
Comment faire une iframe dans un article?
Insrer un iframe est tout fait possible dans un article ou dans un module. Dans le gestionnaire
d'utilisateurs ditez votre compte et slectionner No Wysiwyg Editor. Ensuite, dans l'article (ou le
nouveau module) en question insrer les codes php habituels des iframes et sauvegardez; pensez
ractiver l'diteur. Ce processus est valable pour toute insertion de code php.
Comment insrer du flash?
Bien qu'il existe des plugins et modules pour a, une solution simple consiste dsactiver
temporairement votre diteur wysiwyg. Revenez sur votre article et insrez le code d'appel du flash,
comme celui-ci. (Pensez changer les urls)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29
,0" width="ma-hauteur" height="ma-largeur" align="middle">
<param name="movie" value="/images/mon-flash.swf" />
<param name="quality" value="high" />
<embed src="/images/mon-flash.swf"width="ma-largeur" height="ma-hauteur" align="middle"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash"></embed>
</object>

Sauvegardez l'article et ractivez votre diteur wysiwyg.

Rappel: n'ditez pas votre article par la suite car certains diteurs wysiwyg retire ces codes.
Qu'est-ce qu'un composant?
C'est une mini application intgre votre site Joomla! et disposant, le plus souvent de sa propre
interface de configuration dans la console d'administration Joomla!. Cela apporte de nouvelles
fonctionnalits, parfois trs utiles.

Exemples de Composants inclus dans Joomla! lors de son installation:

1.
2.
3.

Banners (Bannires): ce composant vous permet d'afficher les bannires de vos clients.
Web Links (Liens Web): ce composant vous permet de constituer un annuaire de sites Web.
Polls (Sondages): ce composant vous permet de mettre en place des sondages.

106

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Qu'est-ce qu'un mambot?

Ce sont des morceaux de scripts qui permettent d'automatiser certaines tches sur votre site Joomla!,
ce terme nexiste plus sur dans la version 1.5.
Exemples de Plugins inclus dans Joomla! lors de l'installation:
1.
2.

Le Plugins de recherche est un script qui permet d'effectuer une recherche sur votre
site.
Le Plugins TinyMCE WYSIWYG Editor permettra, lui de convertir le texte que vous
saisissez dans l'diteur WYSIWYG en code HTML, interprtable par votre navigateur.

Qu'est-ce qu'un module?

C'est un bloc que l'on trouvera gnralement dans la colonne de gauche ou la colonne de droite de
notre site.
Certains modules sont pr-installs, d'autres, et le plus souvent associs des composants, peuvent
tre installs ultrieurement grce l'espace d'administration. Ce petit ajout (add-on) permet
d'apporter une fonctionnalit supplmentaire Joomla!. Cependant, contrairement un composant,
ils sont essentiellement utiliss pour l'affichage de donnes, l'affichage des derniers articles parus, les
plus populaires, les personnes actuellement connectes, voir mme lheure. Par ailleurs, ils peuvent
servir pour afficher certaines ressources comme les menus, les bannires, le bloc d'identification.
Questions types tires de Joomlafacile : http://www.joomlafacile.com
Nous attendons les vtres!
Puis-je utiliser toutes les polices de caractres sur min site Internet?
La rponse est dfinitivement non! Exceptions faites des images ou des animations flash. Cela est d
au peu de choix propos parles diffrents systmes et navigateurs, et leur manque dhomognit en
la matire. La liste considre comme sres est trs courte:

Arial et Arial Black, Comic sans ms, Courier New, Georgia, Impact,
Times New Roman, Trebuchet MS, Verdana.

107

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[23] Vingt troisime heure

Sance de prsentation au groupe critiques

Place la critique
Prsentation et argumentation
23.0 En rsum

H E U R E

dapprentissage
de test

Les statistiques et avis des utilisateurs sont des lments indispensables pour
juger de la russite ou non dun site Internet. Cette sance se veut positive et
doit tre vcue comme un test final dont le seul but est de faire grandir les
connaissances du groupe et en final aboutir des sites Internet dont les buts
et objectifs sont atteints.

dexercice
de rvision

108

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[24] Vingt quatrime heure

Modifications et valuation finale

Valuation et grille danalyse. La grille danalyse contient une partie gnrale

didentification et de prsentation du site.

Font lobjet dune valuation: le contenu, la navigation, la prsentation visuelle et

laccessibilit. Des points sont accords en fonction des diffrents lments de chacune des
sections. La pondration a t faite de faon privilgier llment contenu tant donn la
priorit accorde la pertinence de linformation. Il est conseill dutiliser les recommandations
ci-dessous pour assurer une meilleure valuation.

24.0 En rsum
Nous voici la fin de cette formation, il est irraliste dessayer danticiper et de solutionner tous les
problmes qui pourraient survenir, nous esprons avoir rpondu vos attentes. Le moment est venu
danalyser une dernire fois votre site, via la grille danalyse ci-jointe. Le rsultat sera analys en groupe.
24.1 Recommandations pour une bonne utilisation de la grille danalyse
Si un critre ne peut pas tre valu, il ne faut pas lui attribuer dvaluation.
24.1.1 Contenu
1.
2.
3.
4.
5.
6.
7.
8.

Information dtaille et tendue du site: profondeur du sujet et exhaustivit?

Exploitation de tous les aspects?
Logique de lorganisation des informations: structure cohrente simple et comprhensible de
linformation? Organisation par thme, alphabtique ou alatoire?
Pertinence des liens vers lextrieur: qualit des sites choisis? Pertinence?
Les liens sont-ils encore fonctionnels?
Date de la dernire mise jour: mise jour et maintenance rgulire du site?
Accs en ligne aux documents: disponibilit dans le site mme de linformation recherche?
En format intgral?
Qualit de la langue et/ou de la traduction: exactitude de lorthographe?
Formulation et structure de phrase correctes? Qualit de la traduction?
Prsence utile et pertinence des illustrations: illustrations significatives? Valeur ajoute au contenu?
Sources dinformation claires et bien identifies: mention de responsabilit et identification des
sources bibliographiques et des dates de publications?

24.1.2 Navigation
1.
2.
3.
4.

Facilit de dplacement: pour les documents prsents sur plusieurs pages, facilit de navigation
entre les parties?
Comprhension aise des boutons d'orientation: icnes significatives? Mtaphores efficaces?
Qualit de loutil de recherche indexant le contenu du site: qualit et efficacit de cet outil?
Rapidit de chargement du site et des diffrentes pages: navigation fluide teste diffrentes
priodes de la journe?

109

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

24.1.3 Prsentation visuelle

1.
2.
3.
4.

Design du site et couleurs utilises: sobrit des couleurs? Prsentation are?

Bruit caus par la lourdeur de la prsentation ou des messages publicitaires?
Lisibilit du texte: facilit de lecture lcran? Choix des caractres?
Harmonie entre la couleur du fond et les caractres?
Rapidit de chargement des illustrations: lgret et quantit dillustrations?
Qualit de limpression (imprimante): format du texte?
Lisibilit des impressions notamment en fonction des couleurs?

24.1.4 Accessibilit
1.
2.

Prsence dans les principaux rpertoires et outils de recherche: site index par Google, Yahoo, Alta
Vista, Hotbot, etc..
Adresse intuitive: identification significative de l'adresse du site? Reprage facile?

110

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

[+] Fiche dvaluation

Site Web: ____________________________________

Nom du site:
..................................................................................................................
Adresse (URL):
http://........................................................................................................

Webdesigner / Webmestre
Nom:.........................................

Prnom:................................................

Classe:.......................................

Anne:..................................................

Correcteur
Nom:.........................................

Rsultat de lanalyse:

/100

Prnom:................................................

Site valu le:......./.........../.........

Le site a obtenu un score suprieur 80% (Trs bien)

Le site a obtenu un score entre 60% et 79% (Bien)
Le site a obtenu un score infrieur 60%
(Faible)
Notes:
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................

111

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

Public(s) cible(s)
Grand public

Spcialis

Catgories dinformation
Information factuelle
(version intgrale)

Documents

Rpertoire / Liste (prcisez):.......................................................

Banque de donnes (prcisez):....................................................
Mode de prsentation
Texte

Texte/illustrations

Multimdia

Tarif

Limit (prcisez):..........

Accs au site
Libre
Option de langue
Franais

........................................
Anglais

Contenu (60%)

Autres:........................

Faible Bien Trs bien

(1 point) (5 points) (9 points)

Information dtaille / tendue du site

Logique de lorganisation des informations
Pertinence des liens vers lextrieur: qualit des pointeurs
Date de la dernire mise jour
(si moins de trois mois; mettre trs bien)
Accs en ligne au texte complet des documents
Qualit de la langue et/ou de la traduction

112

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

Prsence utile et pertinence des illustrations

ou des animations
Sources dinformation claires et bien identifies
Total des colonnes
.................................../60

Navigation (20%)

Faible Bien Trs bien

(1 point) (3 points) (5 points)

Facilit de dplacement
(aller-retour, retour page daccueil, plan du site)
Comprhension aise des boutons dorientation
Qualit de l'outil de recherche indexant le contenu du site
Rapidit de chargement du site et des diffrentes pages
Total des colonnes
.................................../20

Prsentation visuelle (14%)

Faible Bien Trs bien

(1 point) (3 points) (5 points)

Design du site et couleurs utilises

Lisibilit du texte
Rapidit de chargement des illustrations
Qualit de limpression (imprimante)
Total des colonnes
.................................../14

113

1 . 5

2 4

P O U R

C R E R

Accessibilit (6%)

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Faible Bien
(1 point) (3 points)

Prsence dans les principaux rpertoires

et outils de recherche
Adresse intuitive

Total des colonnes

.................................../6

Total gnral
................................/100
Recommandations finales pour la remise finale du travail (par le formateur):
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................

114

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

[..] Quelques minutes de plus

Bote outils

ites Internet, ressources diverses

Communaut Joomla! sur le Web

Portail
www.joomla.fr
Extensions
www.joomlafrance.org
Aide
www.joomlafacile.com
Forum
forum.joomlafacile.com/
Wikipdia
fr.wikipedia.org/wiki/Joomla!
Joomladraft
www.joomladraft.org
Aide Joomla!
www.aide-joomla.fr
Blog de cette formation
joomla-cms.blogspot.com
Facebook
www.facebook.com/group.php?gid=23676315149
115

L E

C M S

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

Calamo
http://fr.calameo.com/accounts/15960
Ergonomie sur le Web
www.w3.org
www.commentcamarche.net/Web/Webintro.php3
wwwedu.ge.ch/cptic/prospective/enseignements/sic/pages_Web/intro.html
www.commentcamarche.net/html/htmlintro.php3
www.activis.net
www.temesis.com
www.ergolab.net
www.dsi.cnrs.fr/bureau_qualite/ergonomie/ergonomie.asp
www.lergonome.org/pages/accueil.php
boxesandarrows.com
deyalexander.com
www.hcibib.org
www.usableweb.com
www.digital-web.com
www.useit.com
www.usability.gov
www.yourtotalsite.com
www.guuui.com
eleganthack.com/articles
www.adaptivepath.com/publications/essays/archives
www.sitepoint.com/cat/80
jthom.best.vwh.net/usability
www.usabilitynet.org
www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/558
www.uzilla.net
www.themindcanvas.com
www.lergonome.org
www.veblog.com
www.redaction.be
www.ergoweb.ca
fredcavazza.net
ergologique.com
aptic.ulaval.ca/guidew3educatif/
fr.wikipedia.org/wiki/Serveur_HTTP
Couleurs sur le Web
www.mariaclaudiacortes.com
www.smartpixel.net/chromoWeb
pourpre.com/chroma
Les codes couleur
www.dezign-box.net/Webdesign/couleurs/coul1.php
www.dezign-box.net/Webdesign/couleurs/coul2.php
www.dezign-box.net/Webdesign/couleurs/coul3.php

Symbolique des couleurs

www.dezign-box.net/Webdesign/couleurs/symbolique.php
116

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

http://perso.orange.fr/wolferico/couleurWeb.htm
Images sur le Web
Images gratuites
www.sxc.hu
Images payantes
www.stockexpert.com
www.gettyimages.com

Charte graphique
www.dezign-box.net/Webdesign/couleurs/charte.php
Exemples de charte graphique
chartegraphique.wallonie.be
egov.wallonie.be/guideWeb/
Typographie
edu.ca.edu/typo
Tutoriaux css
www.alsacreations.com
www.CSSzengarden.com/tr/francais/
CSS.alsacreations.com/Construction-de-menus-en-CSS/
CSS.alsacreations.com/Galeries-de-menus-en-CSS
www.peutetreunereponse.net
www.team-masters.com/22-menus-verticaux-en-CSS-prets-a.html
www.ultra-fluide.com/ressources/CSS/menu-onglets.htm
Templates gratuits CSS
www.freeCSStemplates.org
www.free-CSS-templates.com/free-templates.html
www.intensivstation.ch/en/templates/
www.zwatla.com/kits_graphiques.html
templates.arcsin.se/the-hobbit-Website-template/
www.smashingmagazine.com/2007/01/12/free-CSS-layouts-and-templates/
Site ducationnel sur le CSS
slaout.linux62.org/html_CSS/
asl.univ-montp3.fr/tutorialHTML/
Tutorial XHTML
www.tuteurs.ens.fr/Internet/Web/html/bases.html

117

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

Tutorial CSS.:
www.tuteurs.ens.fr/Internet/Web/html/CSS.html
Spcifications du W3C
www.w3.org/TR/xhtml1/
www.w3.org/TR/CSS21/
www.tuteurs.ens.fr/Internet/Web/html/themes.html
www.w3.org
www.upsdell.com/BrowserNews/
Sites gnraux sur le CSS
meyerWeb.com/eric/CSS/
www.brunildo.org/test/
www.CSSplay.co.uk/index.html
www.456bereastreet.com/
www.satzansatz.de/CSS.html
www.westciv.com/style_master/academy/browser_support/
w3development.de/CSS/hide_CSS_from_browsers/
www.thenoodleincident.com/tutorials/CSS/index.html
www.accessify.com
CSS Bug sites
www.satzansatz.de/CSSd/onhavinglayout.html
www.Webstandards.org/action/acid2//
www.mako4CSS.com/index.htm
www.macedition.com/cb/ie5macbugs/index.html
www.l-c-n.com/IE5tests/
www.gtalbot.org/BrowserBugsSection/
Sites exprimentaux CSS
www.fu2k.org/alex/CSS/
meyerWeb.com/eric/CSS/edge/slantastic/demo.html
www.infimum.dk/DHTMLindex.html
www.markschenk.com/CSSexp/
www.designdetector.com
www.CSSplay.co.uk

118

V I A

L E

C M S

J O O M L A

1 . 5

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Littrature
Joomla!: Crez et maintenez vos sites Web
de Hagen Graf (Auteur), Olivier Engler (Traduction)
Prix diteur:

29,00

Prsentation de l'diteur
Joomla!, hritier de Joomla!, est le systme de gestion de contenus CMS (Content
Management System) qui a rvolutionn le domaine de la cration et du maintien
jour des sites Web, quel que soit leur contenu. Il runit une palette fonctionnelle
de qualit professionnelle et une interface facile d'accs, ce qui vous permet, lorsque vous concevez votre
site Web, de rester concentr sur ce qui vous importe: vos contenus. Grce ce livre, vous allez apprendre
comment convertir vos projets Web existants en Joomla! et en assurer la maintenance.
L'auteur prsente d'abord les concepts de la gestion de contenus, puis vous guide dans l'installation et la
configuration de Joomla!, tant sous Windows que sous Linux. Il explique en dtail comment utiliser
l'interface d'administration pour grer les contenus et les utilisateurs et comment adjoindre des outils
d'autres diteurs pour augmenter la palette fonctionnelle de Joomla!: calendrier, forum de discussion,
galerie photos, gestion de documents, plate-forme de tlchargement, boutique en ligne, support de
plusieurs langues, etc. Un chapitre entier est consacr la cration de vos modles Joomla! avec les
extensions Dreamweaver, le XHTML, les styles CSS, et un autre vous rvle tout ce que vous avez besoin
de savoir pour exploiter le langage PHP en vue de crer vos extensions Joomla!
Biographie de l'auteur
Hagen Graf est consultant en informatique spcialis dans le secteur de la programmation Web.
Il a travaill sur de nombreux projets Joomla! en Allemagne et dans d'autres pays, et notamment sur celui
de l'universit britannique de Westminster.
Dtails sur le produit

Broch: 310 pages

* Editeur: Pearson Education (16 dcembre 2006)
* Collection: Rfrence
* Langue: franais
* ISBN-10: 2744021296
* ISBN-13: 978-2744021299
--------------------------------------------------------------------------------------------------------Joomla!, un jeu denfant
Crez et grez votre site.
http://www.competencemicro.com/
Prix diteur:

6,00

Description: Que ce soit un site Web commercial ou communautaire, un site

Web sophistiqu et riche en contenu demande beaucoup de travail. Il faut
passer du temps crer son architecture, dfinir son apparence, coder les
pages et les faire voluer au fil du temps. Ce n'est pas tout: il faut l'enrichir
rgulirement en contenu! Cela se complique encore un peu plus si vous tes
plusieurs contribuer au site: qui fait quoi, quand et comment? Comment
grer les diffrents utilisateurs et les contributeurs? Et comment grer les
diffrentes contributions? Faut-il laisser tout le monde publier directement, ou
faut-il modrer?
119

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Joomla! est un CMS, ou systme de gestion de contenu (Content Management System, en anglais), qui a
t dvelopps pour nous faciliter la vie. Aussi bien au niveau de la cration que de la gestion du site: tout
est cr par le CMS, la construction se base sur des modles dj cods parmi lesquels ont peut choisir,
que l'on peut personnaliser ou crer de toutes pices! Les CMS permettent galement d'ajouter des options
pour enrichir votre site: panier d'achat, forum, galerie d'images, etc. Mais aussi au niveau de la gestion des
utilisateurs: cration de comptes et gestion efficace des droits de chacun. Attribution des rles, gestion et
validation des articles et du contenu, etc. Mais, comme la plupart des CMS, ce puissant outil peut sembler
droutant et impressionnant au premier abord. Pour profiter pleinement de Joomla !, il faut le domestiquer
! C'est le but de cet ouvrage: vous guider de faon pouvoir utiliser Joomla! rapidement et efficacement.
Vous verrez comment l'installer sur Internet (et en local), comment le configurer et le personnaliser ! Vous
ne connatrez pas tout de Joomla! la fin de cet ouvrage, mais nous esprons que vous en aurez appris
assez pour vous lancer avec confiance dans la cration de votre site Web !
Supplments: Les exemples et le templates DreamWeaver.
Auteur: Johann-Christian Hanke Johann-Christian Hanke est n en 1968. Il est titulaire de matrises
d'anglais, amricain et de langues germaniques. Auteur de plus de 11 ouvrages sur Windows, Office,
Outlook et Intenet, Johann-Christian Hanke est aussi journaliste pour plusieurs magazines spcialiss
allemands, tels que PC-Praxis, PCIntern, Handwerk, etc.

120

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Lexique
html, xhtml, java

Vocabulaire du petit Webmestre

Accs commut (connexion commute, dial-in)
tablissement d'une communication entre un utilisateur et un ordinateur au moyen d'un modem reli au
rseau tlphonique commut.
Accessibilit
Cela correspond au fait de transmettre la mme information l'internaute, quel que soit le moyen qu'il
emploie pour y accder, et quelles que soient ses capacits motrices, mentales, visuelles ou auditives.
Introduction l'accessibilit: www.openWeb.eu.org
Adresse lectronique (electronic mail address, email address, Internet address, courriel)
Numro mnmotechnique grce auquel un utilisateur peut se connecter une inforoute; c'est la carte
d'identit d'un utilisateur qui contient son nom@nom_du_serveur_hte.pays.
Adresse url (uniform resource locator)
Systme d'adressage universel permettant d'accder un site www.
L'ensemble des donnes comprend la mthode d'accs, le nom du serveur et le chemin.
Adresse IP (Internet Protocol)
Dsignation unique dun quipement informatique, tel quun ordinateur. Elle se compose dune srie de 4
nombres du type 255.255.255.0. Cette adresse peut tre fixe ou dynamique, dans le cas o lquipement
informatique na pas besoin dtre constamment sur le rseau. Le serveur affecte dynamiquement votre
ordinateur une adresse diffrente chaque fois que vous vous connectez.
Alias
Nom simplifi de substitution pour une adresse lectronique plus complexe.
Applet
Petite application intractive tlcharge partir d'un serveur, sur un low cost Internet box (network
computer, Web computer, hollow pc ou terminal tte creuse) et donc qui n'a pas tre lue par un microordinateur (programm en Java).
@ (at) Arobace ou Arobasse
Symbole servant de sparateur dans une adresse lectronique; il se place entre le nom du serveur hte et
celui de l'internaute (voir: adresse lectronique).
Antivirus
Logiciel destin dtecter et dtruire les virus informatiques.
Bande passante
Largeur de bande d'un canal de transmission servant transmettre un signal. Son amplitude est mesure
en mgahertz (MHz) (sa capacit est exprime en bits par seconde ou bps).
De ses caractristiques dpend la qualit du signal transmis et reu, etdonc le nombre d'informations qui
peuvent y tre vhicules (voir baud). Les messages vocaux sont vhiculs sur des bandes troites, tandis
que les messages multimdias exigent des bandes larges.
Banque ou base de donnes (data bank)
Ensemble des fichiers informatiss contenant des informations structures sur un domaine prcis et
accessibles distance grce aux inforoutes.
121

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Bavardage (chat)
Session interactive d'changes d'ides en temps rel entre internautes.
Bogue (bug)
Une erreur de conception ou de programmation dans l'criture d'un programme.
Bote aux lettres (mailbox)
Espace de mmoire d'un serveur o peuvent tre stocks des messages envoys une adresse prive.
Bookmark
Favori, Signet: Marque ta page ....Web
Browser
cf. Navigateur
Chat
cf. IRC; cf Bavardage
Client-serveur (client-server)
Systme permettant l'utilisateur d'un rseau d'avoir accs l'ensemble des donnes d'un serveur.
Communication de paquet (packet switching)
Technique de transmission dans laquelle on divise le message transmettre en paquets; ceux-ci sont
envoys et rassembls la rception par le systme.
Commut (ligne commute, dial-up line)
Rseau tabli au moment de la communication par le rseau tlphonique entre deux systmes.
Compression numrique
Ensemble des techniques (jpeg, gif, stuffit, etc.) servant compacter les donnes inutiles ou les moins
significatives des signaux d'origine, aprs chantillonnage, afin d'occuper le moins de place possible dans
les espaces mmoires ou les inforoutes. Elles permettent de diffuser une plus grande quantit
d'informations sur une moins grande largeur de bande.
Coupe_feu (firewall, mur de flamme)
Logiciel de protection plac entre un rseau et Internet pour maintenir les utilisateurs non autoriss hors de
ce primtre.Systme de scurit employ par un intranet pour de protger des accs inamicaux ou nonsouhaits. Le coupe-feu assure la scurit du systme informatique et la confidentialit des donnes.
Courrier lectronique
ml, courriel en franais (message lectronique) ou e-mail en anglais (electronic mail) Service le plus utilis
des internautes, qui leur permet dchanger des messages en les dposant dans les botes aux lettres
lectroniques. Ces messages peuvent tre diffuss un groupe dusagers, on parle alors de listes
destinataires ou, en anglais de mailing-lists. C'est le service le plus ancien et le plus rpandu.
Cryptage (encryptage, encryption, chiffrement, algorithmes cryptographiques)
Algorithme encodant un message de manire ce qu'il ne soit lu que par l'utilisateur choisi par l'metteur.
CSS
C'est l'abrviation du terme anglais Cascade Style Sheet , qu'on pourrait traduire par feuille de style
en cascade . Il s'agit d'un document complmentaire au contenu d'un site, qui regroupe toutes les
informations de mises en forme destines tre appliques sur toutes les pages. Cela permet une
meilleure uniformit de la mise en page du site, ainsi qu'une simplification de la maintenance lors de
changements dans l'aspect du site.

122

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

DNS - Domain Name Servers

Serveur de noms de domaine
Si lon compare Internet un rseau tlphonique, un serveur de nom est un annuaire automatis.
Non pas lannuaire des adresses de courrier lectronique, mais des autres serveurs.
Chacun deux est caractris par une adresse IP et seule cette srie numrique est comprise par le rseau.
Cette IP peut tre associe un nom, appel adresse alphanumrique, dite URL, plus simple utiliser.
Les serveurs de noms font donc le lien entre URL et IP. Ils traitent chacune des requtes avant de la
transmettre sur le rseau. Les DNS sont eux aussi accessibles par leur IP et fonctionnent en gnral par
paire.
Dorsale
Rseau de connexion bande large entre commutateurs. Synonyme anglais: Backbone
dvi (carte dvi)
Algorithme de compression destin aux squences vido.
Ethernet
Rseau local permettant de relier les ordinateurs d'une mme entreprise (dvelopp par Xerox).
Extranet Synonyme extranet network n. m.
Rseau informatique caractre commercial, constitu des intranets de plusieurs entreprises qui
communiquent entre elles, travers le rseau Internet, au moyen d'un serveur Web scuris. Un extranet
peut tre mis en place rapidement et de faon conomique par la cration d'un site Web commun aux
entreprises participantes. Ces entreprises doivent cependant partager le mme type d'quipement.
FAQ
Frequently Asked Questions - Foire aux questions
Questions les plus souvent poses sur un sujet donn. Les rponses sont apportes sous forme de fichiers
consultables en ligne, permettant ainsi dconomiser une circulation dinformation inutile.
Flash
Il s'agit d'une technologie utilise essentiellement pour l'animation des sites Web, ajoutant une plus grande
part de crativit et d'interactivit que la technologie HTML. Le dtenteur de cette technologie est la socit
Adobe.
Fibre optique
Technique de transmission l'aide d'un mince fil de fibre de verre acheminant, l'aide d'une impulsion
laser, de vastes quantits d'informations, la vitesse de la lumire (voir laser).
Fichier (file)
Ensemble d'informations de mme nature ou concernant un mme sujet.
Firewall
cf. Coupe-feu
Freeware
cf. Graticiel
FTP - File Tranfer Protocol
Protocole permettant le tlchargement de dossiers. Protocole de transfert de fichiers permettant le
tlchargement de toute information numrique.
On parle de download lorsquon rcupre des fichiers du serveur vers lordinateur personnel.
Si lon dispose des droits suffisants, on peut galement tlcharger vers lordinateur distant upload ,
comme dans le cas des pages personnelles.
GIF
(graphic interchange format) Standard servant compresser des images dans des fichiers.
123

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Graticiel
Logiciel distribu gratuitement en ligne.
Syn.anglais: Freeware
Ne pas confondre avec shareware pour lequel l'auteur demande une contribution (voir shareware).
Groupware
cf. Tltravail en groupe.
Hte
cf. serveur.
HTLM - Hyper text Mark-up Language
Langage utilis pour mettre en forme les informations prsentes sur le Web. Lutilisateur final reoit un
fichier HTLM qui est dcod par son navigateur pour apparatre sur son propre cran.
HTTP - Hyper Text Terminal Protocol
Protocole de communication dinformations hypertextuelles utilis sur le Web. HTTP est le mode de
communication entre le logiciel client (celui qui demande linformation) et le serveur (celui qui la fournit).
chaque fois quun utilisateur demande daccder une page, une requte HTTP est envoye au serveur,
qui renvoie le document HTLM correspondant.
Hypermdia
Mdia dont le contenu est prsent de faon telle qu'il permet une navigation non linaire grce des liens
crs et refaits entre divers lments.
Hypertexte (hypertext, hyperdocument)
Texte multidimensionnel, c'est--dire rfrences croises avec d'autres textes, offrant l'utilisateur un
accs intuitif ; technique de rseau associatif permettant de passer d'un lment d'information un autre.
(terme invent par Ted Nelson en 1965)
Interface-utilisateur (gestionnaire d'utilisateurs) (gui, user interface design, wimp, look and feel)
Logiciel grant les lments concerns par les rponses que le systme informatique doit fournir selon les
demandes transactionnelles de l'utilisateur.
Internet Internet - Interconnexion of Networks
Interconnexion de rseaux informatiques couvrant l'ensemble de la plante. Ensemble des diffrents
rseaux interconnects entre eux suivant le protocole TCP/IP. Pour cette raison, on parle de rseau des
rseaux. On parle aussi dautoroutes de l information, car des flots de donnes y circulent depuis les
terminaux dorganismes publics, dentreprises et de particuliers.
Intranet
Rseau dune organisation (commerciale, ducative, militaire...) qui offre au personnel de lorganisation
des services semblables Internet. La plupart des intranets sont raccords Internet.
Laccs un intranet est limit aux seules personnes autorises. Les intranets se dfendent des accs non
autoriss par des systmes de scurits ( coupe-feu ).Rseau local (LAN) priv utilisant l'infrastructure
et les normes techniques Internet, ddi l'usage restreint d'une entreprise.
IRC - Internet Relay Chat ou Chat
Une des applications dInternet, permettant de correspondre avec plusieurs personnes simultanment et en
temps rel sur le rseau. Radio amateur version Internet permettant de bavarder (chat) en temps rel
avec d'autres utilisateurs (similaire au CB).
IAP - Internet Access Provider - Fournisseur daccs Internet.
Oprateur offrant linfrastructure ncessaire pour la connexion Internet aux ISP.
ISP - Internet Service Provider - Fournisseur de services Internet
Prestataire auquel sadresse le client pour avoir un accs Internet et dautres services tels que la mise
disposition dune ou plusieurs botes aux lettres, laccs aux forums de discussion...
124

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

JPEG - joint photographic expert group

Norme pour la compression d'images fixes (photos).
Lan
cf. Rseau local
Lien hypertexte
Enchanement de textes vers dautres textes. Le principe de lhypertexte fut invent en 1945 par Vannevar
Bush, qui on doit aussi les principaux termes de lInternet. Mais on ne sest pas arrt en si bon chemin
et limit au texte. On a appliqu ce principe de lhyper texte toutes les formes de linformation, son,
image fixe ou anime; vido formulaire, interface 3D, animation interactive, etc.
Mots souligns et colors ou images qui permettent par un simple clic de passer d'un document l'autre.
Un systme de liaison qui fait entre autre la richesse du World Wild Web.
Messagerie lectronique voir Courrier lectronique
Microsoftnet (msn) Rseau commercial cr par la compagnie Microsoft s'appuyant sur l'utilisation de
Windows 95, OLE, etc. Il offre des services gratuits et payants; il peut aussi devenir un rseau ferm pour
une entreprise qui loue un espace rserv.
Midi (musical instrument digital interface)
Protocole permettant les communications entre les instruments de musique et un systme informatique;
il contient les codes qui indiquent au synthtiseur les instruments utiliser et les notes jouer.
Modem
contraction de MOdulateur/DEModulateur
Appareil convertissant des lments binaires en signaux de transmission et vice versa et permettant aux
ordinateurs de communiquer par ligne tlphonique ou par cble. Equipement informatique connect un
ordinateur et une ligne tlphonique qui permet de transmettre des informations numriques
(informatiques) sur une ligne analogique (tlphonique). Lorsquon met des donnes numriques sur la
ligne, le modulateur MODule les donnes; lorsquon reoit des donnes analogiques sur un ordinateur, le
modem les DEModule. Les modems sont soit des cartes internes insres dans lordinateur, soit des
botiers externes.
Mot de passe (password)
Code priv et secret que l'utilisateur tape lors de la procdure d'accs un systme informatique ou une
inforoute.
MPEG (moving pictures expert group)
Normes pour la compression et la diffusion numrique audio et vido, surtout pour les images animes.
Multimdia
Une famille de techniques mettant en uvre une convergence mdiatique de la voix, des donnes et de
diffrents types d'images, avec l'interactivit, sur un mme support.
Navigateur (Butineur, Fureteur, logiciel de navigation)
Logiciel qui permet de retrouver une information dans un rseau.
Logiciel de consultation des documents du World Wide Web. Par cette interface conviviale, vous cliquez
avec la souris de votre micro-ordinateur sur le sujet recherch, repr par un lien hypertexte.
Syn. anglais: browser.
Naviguer (Surfer)
Partir la dcouverte d'informations sur Internet.
Netiquette (contraction de tiquette et Internet ou Net)
Ensemble de rgles, de conventions de biensance et d'attitudes rgissant le comportement des
utilisateurs d'Internet. La Ntiquette est un ensemble de rgles dontologiques constituant un code de
bonne conduite reconnu par la majorit des internautes. Il en existe plusieurs versions diffrentes,
notamment des traductions franaise. Plusieurs chartes de lInternet ont t mises en chantier ces
125

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

dernires annes, directement inspires de ces us et coutumes, sans quaucune nait pu tre ratifie
lunanimit des fournisseurs daccs. La Ntiquette na pas de valeur lgale, mais une valeur contractuelle
lorsquelle est mentionne dans le contrat entre le fournisseur daccs et lusager.
La Ntiquette reprend notamment les rgles fondamentales de politesse et de savoir vivre et vise
principalement circonscrire les comportements excessifs. Elle interdit par exemple les messages abusifs,
tels que les spams (pratique consistant envoyer massivement des messages caractre commercial
via la messagerie ou via les forums.)
Newsgroup
cf. forum de discussion
NIC - Network Info Center
Organisme de rgulation du Net, notamment dans lattribution des noms de domaine.
Numrique (digital)
Capacit qu'ont les systmes informatiques et tlmatiques d'exprimer, de traiter et de stocker une
information sous la forme d'un nombre dans la base de numrotation 2, donc une suite de bits; c'est le
langage commun aux systmes, sorte d' esperanto des machines communiquer.
Mode de transmission de l'information dans lequel le signal transport ne peut tre dgrad ni par les
supports de diffusion, ni par l'loignement des machines.
Technique codant la voix de lutilisateur en chiffres binaires (0 et 1) lors de lmission, puis la dcodant lors
de la rception. Le numrique limine les risques dinterfrence ou le parasitage et offre une grande qualit
dcoute.
Numrisation
Processus de conversion d'un signal en code binaire (srie de zro et un).
Page daccueil (HOMEPAGE, page de bienvenue)
Premire page qui apparat sur l'cran lorsqu'on accde un service ou une application Web en ligne.
Partagiciel (Shareware)
Programme ou logiciel diffus gratuitement mais soumis une faible redevance que doit acquitter
lutilisateur sil dcide den faire usage.
Logiciels semi-gratuits (souvent accessibles par les inforoutes).
Passerelle (gateways, bridge, bretelles d'accs)
Logiciels permettant de traduire des donnes entre deux rseaux.
pdf (portable document format)
Format reproduisant et transmettant en rseau une publication telle quelle, peu importe le logiciel de mise
en page utilis au dpart.
pict (de picture format) Format de fichier graphique (sur Macintosh).
Plurimdia
Mdiatisation d'un contenu devant tre diffus simultanment sur plusieurs supports mdiatiques (une
sortie la fois imprime, sur CD-ROM ou en rseau, par exemple).
Point d'cran (pixel, picture element)
La plus petite unit d'une image-cran que le concepteur mdiatique peut contrler; cette unit sert
exprimer la dfinition de l'cran.
Pointcasting (diffusion personnalise)
Adressage d'un service vers un client dtermin.
Protocole
Langage informatique
126

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Proxy
Serveur qui acclre laccs aux pages les plus couramment consultes par les abonns. Celles-ci sont en
effet enregistres sur les ordinateurs du fournisseur daccs. Le proxy peut jouer un rle de filtre en
interdisant laccs certains sites.
Requte de page
Dsigne le chargement dune page HTLM par un utilisateur quelconque.
Cest aujourdhui la seule rfrence pour juger de la frquentation dun site Web.
Rseau
Ensemble dordinateurs connects par une ligne spcialise ou par RTC, pour assurer une communication
locale ou distante et faciliter lchange dinformations entre des utilisateurs ayant des intrts communs.
Rseau local d'entreprise (lan)
Ensemble d'ordinateurs situs proximit les uns des autres et connects par un lien de communication.
Serveur (server, host, hte)
Terme gnrique dsignant un ordinateur, gnralement puissant, destin grer les accs de clients
et donc distribuer de linformation sur le rseau.
Il fournit des informations la demande et accessibles par une inforoute.
Shareware cf: partagiciels
Signet Favori (Bookmark)
Marque permettant de conserver en mmoire la rfrence un document que l'utilisateur juge intressant.
Adresse dun site Web que lon conserve pour le consulter sans avoir retaper ladresse chaque fois.
Sorte de carnet dadresse.
Standards du Web
Il s'agit de la norme tablie progressivement depuis 1994, lors de la cration du World Wide Web
Consortium, qui vise uniformiser la manire de faire les sites, en sparant le fond de la forme, rendant
ainsi possible l'accs de l'information par tous quel que soit le mode de rendu utilis.
TCP/IP et PPP - Transmission Control Protocol/Internet Protocol
Protocoles de communication sur Internet. PPP fixe la mthode suivant laquelle un ordinateur est reconnu
par un serveur, et TCP/IP fixe la manire suivant laquelle lordinateur accde aux donnes sur le rseau
Internet.
Tltravail en groupe
(groupware, cooperative work, computer-supported cooperative work, cscw, synergiciel, collectique)
Service intgr et collectif, grce la grance des flux d'informations entre les membres d'un mme
groupe de travail; mode de travail privilgiant les relations entre les membres d'un goupe relis par un
rseau leur
tiff (tagged image file format)
Format d'enregistrement d'images de haute densit compatible avec divers
URL - Uniform Resource Locator
Adresse, en caractres alphanumriques, dterminant le chemin daccs dun document disponible sur
lInternet.
Elle est analyse par le navigateur puis transmise au proxy, traduite par la DNS en adresse IP et finalement
trait par le serveur.
Vidoconfrence (visioconfrence)
Systme de runion distance dans lequel on voit et on entend son ou ses interlocuteurs, et permettant
d'changer des images vido, des textes et des sons.

127

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Webdesign
C'est la mise en forme graphique d'un site selon une ergonomie simple et efficace en prenant en compte
l'identit de l'entreprise qui influence l'aspect final du site. Le travail de Webdesign reprsente la phase de
recherche graphique, et l'intgration de ce graphisme dans une maquette semi-interactive qui comprend
les comportements au survol et clic de souris.
Web Accessibility Initiative (WAI)
Il s'agit de l'organisation complmentaire du W3C, qui tablit des normes visant rendre Internet
accessible tous, y compris auprs des personnes qui souffrent de handicaps (moteur, mental, visuel ou
auditif).
Site officiel (en anglais): www.w3.org/wai/
World Wide Web Consortium (W3C)
Il s'agit de l'organisation fonde en 1994, alors qu'Internet commenait sa rvolution. Ds le dbut, elle a
tout fait pour mettre en place des standards visant uniformiser la manire de faire les sites, en sparant
le fond et la forme, pour rendre possible l'accs de l'information tous.
Site officiel (en anglais): www.w3.org
SOURCE/ http://www.pluginup.com

128

2 4

P O U R

C R E R

M O N

S I T E

W E B

129

V I A

L E

C M S

J O O M L A

1 . 5