Formation

Web
Créer son site Web avec
Joomla!
 Les cinq grandes phases de
création d’un site Web

1 Analyses

2 Design graphique

3 Développement / Intégration

4 Déploiement (mise en ligne)

5 Référencement / Indexation
 Phase 1 : Analyses

•Analyse stratégique, fonctionnel et technique

•Comparer la compétition
•Énumérer les services offerts
•Établir l’arborescence et la structure du site

•Déterminer, évaluer et produire les contenus.

•S’assurer d’adapter les contenus déjà existant.
•Travailler avec des images et des photos.
(http://www.istockphoto.com)
•Réfléchir aux stratégies d’indexations et de
référencement
 Phase 2 – Design graphique
•
Le graphisme de votre site
reflète la nature de votre
entreprise. Il est essentiel
d’avoir un design qui répond le
plus à nos attentes

Développement sur mesure vs

achat d’un gabarit préconçus

Template en vente sur Internet

http://www.pixelsparadise.com/showcase
http://demo.rockettheme.com
http://demo.yootheme.com
http://www.monstertemplate.com
http://www.hypertemplate.com
 Choix du nom de domaine

Quelques conseils…

•Préférez les noms courts;

•Préférez un nom agréable à l’oreille, facile à mémoriser;
•Choisissez un nom qui informe l’internaute sur votre activité, un
nom intuitif;
•Évitez les caractères difficiles à saisir comme les tirets par
exemple;
•Préférez un nom qui suscitera peu d’erreur;
•Idéalement, prenez votre nom d’entreprise comme nom de domaine;
•S’assurer que le nom de domaine est à votre nom.
 Qu’est-ce qu’un CMS?

Un système de gestion de contenu ou SGC (Content Management

Systems ou CMS) est une famille de logiciels destinés à la conception
et à la mise à jour dynamique de site web à partir d’un navigateur Web.

Ils partagent les fonctionnalités suivantes :

•Permet l’édition de page simplifiée à l’aide d’outil de mise en forme.
•Permet de séparer le contenu de la présentation
•Permet de structurer le contenu (utilisation de FAQ, de documents, de
blogs, de forums de discussion, etc.)
•Permet à plusieurs individus de travailler sur un même document avec un
système de gestion des droits.
•Ne nécessite pas de connaissance technique avancée.
•

Un CMS se résume à : Autonomie

Construire votre site
Web
Joomla! 1.5
 Qu’est-ce que Joomla?

Joomla! est un système de gestion de contenu (en

•

anglais CMS pour Content Management System) Open

Source et gratuit. Il est écrit en PHP et utilise une base
de données MySQL.
•

• Source : Wikipedia
•

Joomla! permet de gérer tout le contenu de son site à

•

partir d’un panneau d’administration : templates,

articles, catégories, section, menus de navigation, etc.
•

Il possède également plusieurs fonctionnalités

•

permettant d’ajouter des options supplémentaires au

site qu’on appelle module et composant. Par exemple
un moteur de recherche ou une galerie photos.
Concept de modularité
 Survol des fonctions de Joomla!

• Site Web vs Administration

• Le panneau de control principal
• Le menu principal
• La gestion des menus
• La gestion de contenu
• La gestion des composants
• Les extensions
• Les outils
• L’administration du site Web
 Étapes de création de votre site

• Prise en main de la console

d’administration
• Création des articles (contenu)
• Création des items de menu
• Utilisation des menus
• Choix et mise en place d’un template
• Configuration des modules
• Manipulation des images
• Optimisation pour les moteurs de
recherche
 La console d’administration

• La gestion du contenu ce fait à même le

site Web.(
http://www.votresite.com/administrator)
Exercice

• Se connecter à la console
d’administration
Po u r a ccé d e r à la co n so le d ’ a d m in istra tio n il
su ffit :

1. E n tre z l’ a d re sse :
h ttp :// j0 0 0 X . h p jfo rm a tio n . co m / a d m in istra to r
2. E n tre z le s in fo rm a tio n s q u e n o u s vo u s
a vo n s d o n n é e s p o u r vo u s co n n e cte r :
•N o m d ’ u tilisa te u r
•M o t d e p a sse
Exercice

• Choisissez un titre pour votre site

•

Po u r m o d ifie r le titre d e vo tre site W e b il

•
su ffit :
•
1. A ccé d e r à la co n so le d 'a d m in istra tio n
Jo o m la ! , d a n s le m e n u site ->
co n fig u ra tio n g lo b a l,
2. R e m p lir le ch a m p s N o m d u site et
sa u ve g a rd e r.
 Création d’un article

•Les articles sont le contenu principal

du site
•Ils sont classés par catégories et
sections
•Peuvent être affichés de différente
façon :
• Comme le contenu principal d’une page,
comme un article d’un blogue ou
comme une nouvelle brève.
•

L’ensemble du contenu de votre site

•
 Gestion des articles

À p a rtir d u p a n n e a u d ’ a d m in istra tio n

À p a rtir d u m e n u p rin cip a l ( m e n u co n te n u )

En débutant un nouvel article, il est nécessaire de
•

préciser un titre ainsi que la section et la catégorie

dans lequel il apparaîtra (sélectionnez Non catégorisé
s’il n’appartient pas à une section précise).
•

•Pour effectuer la mise en page de votre texte, utilisez

les boutons de l’éditeur, qui fonctionnent comme
ceux d’un traitement de texte ordinaire.

Po u r e n sa vo ir p lu s...
h ttp :// g u id e s. h p jso lu tio n s. co m
Exercice

C ré e z d e s a rticle s p o u r vo tre site

Allez voir le site de guides en ligne :

h ttp :// g u id e s. h p jso lu tio n s. co m / g e stio n -d e s-a rticle s/ cre e r-d e s-a rticle
h ttp :// g u id e s. h p jso lu tio n s. co m / u tilisa tio n -d e -le d ite u r. h tm l
Gestion des sections & catégories
 Structure arborescente de votre site

Pour en savoir plus...

Exercice

Divisez vos articles en sections et

catégories

http://guides.hpjsolutions.com/gestion-des-articles/creer-des-sections-e
 Gestion des menus

Le menu est essentiel pour que le visiteur puisse

•

accéder au contenu du site, peu importe la page où il

se trouve.
•

La gestion des menus, accessible à partir du

•

panneau d’administration du site ou du menu Menus,

permet de voir tous les menus existants et d’en
ajouter des nouveaux à l’aide du bouton Nouveau.
 Création de nouveaux menus

Lors de l’ajout d’un nouveau menu, quatre champs

•

sont à remplir :
•Nom du menu,
•un nom unique (qui peut être identique au nom du
menu mais qui ne doit pas être utilisé par un autre
menu du site),
•la description du menu (facultative) et
•le nom du module.
•
Le module servira à ajouter le menu sur le site, si aucun
•

nom ne lui est donné, il ne sera pas créé et devra être

fait manuellement plus tard.
 Ajouter des éléments au menu
•Pour ajouter des éléments, cliquez sur
l’icône située à droite du menu dans la
Gestion des menus ou sélectionnez le nom
de votre menu dans le menu Menus.
•

Main Menu est le menu principal de votre site.

En cliquant sur le bouton
•

Nouveau, Joomla! propose

une longue liste d’options
possibles. Pour faire un lien
directement vers un article,
sélectionnez Lien interne>
Articles > Article > Un
article, ce qui mettra votre
article en contenu principal
de la page.
•
Dans les Détails de l’élément, inscrivez un
•

titre, qui sera le texte apparaissant dans le

menu. Puis, dans Paramètres – basique,
cliquez sur le bouton Sélection et choisissez
votre article. Cliquez sur Sauver pour
enregistrer vos paramètres et recommencer
pour chaque éléments du menu.
Exercice

Modifiez « Main Menu » pour votre site en y

plaçant
les articles que vous avez écrits plus tôt.

http://guides.hpjsolutions.com/gestion-des-menus/creer-des-menus.html
 Configuration des modules

Les modules sont des petits blocs d’informations

•

pouvant facilement être déplacés sur la page et

pouvant apparaître sur une seule ou plusieurs
pages.
•

•Parmi les modules les plus populaires, on retrouve

les menus du site, un moteur de recherche, le
pied de page, etc. Les modules peuvent être
créés par des programmeurs expérimentés ou
contenir seulement du texte.
•

La gestion des modules se trouve dans le menu

•

Extensions. Certains modules s’y trouvent déjà

par défaut, comme par exemple les menus du
site.
•Pour choisir l’emplacement du module, cliquez sur
son nom pour l’ouvrir. Dans la section Détails, vous
pouvez changer son nom et décidez si celui-ci
apparaîtra au dessus du module. L’option Activé
doit être à Oui, car c’est ce qui détermine si le
module apparaît ou non sur le site. Ensuite, l’option
Position permet de choisir où le module appraît sur
la page, par exemple en entête ou dans la colonne
de gauche. Ces espaces sont prédéfini dans la
template. Si plusieurs modules sont placés à la
même position, l’option Ordre permet de décider
lequel s’affiche en premier.
La section Affectation de menu permet de
•

sélectionner sur quelles pages le module

apparaîtra. Un élément comme le menu et la
barre de recherche se retrouveront sur
toutes les pages, mais un menu secondaire
pourrait par exemple se retrouver sur
quelques pages seulement.
Exercice

Placez votre menu ainsi que le

moteur de recherche à l’endroit
désiré sur votre site.
 Création d’un nouveau module

•Dans la gestion des modules,

cliquez sur nouveau pour créer
un nouveau module. Dans la
liste d’option, sélectionnez
HTML personnalisé, ce qui
permettra de placer du texte
dans le module.
D o n n e z u n titre à vo tre m o d u le e t
•

sé le ctio n n e z sa p o sitio n su r la p a g e . In scrive z

e n su ite vo tre texte à la ’ id e d e lé
’ d ite u r, d e la
m ê m e fa ço n q u e lo rsq u e vo u s é crive z u n
a rticle . C liq u e z su r sa u ve z lo rsq u e vo u s a ve z
te rm in é .
Exercice

Créez un module contenant un Copyright,

qui sera placé dans le bas de toutes les
pages du site.
 Optimisation du site

L’optimisation aide les moteurs de

•

recherches à mieux comprendre le contenu

du site. Ainsi, le site pourra apparaître plus
fréquement dans les recherches et attirer
plus de visiteurs intéressés par son contenu.
•

La base d’une bonne optimisation est

•

d’associer des mots-clés pertinents avec le

contenu. Pour se faire, allez dans
Configuration globale dans le menu Site.
Dans les Paramètres du site, choisissez un
•

titre pour votre site. Ensuite, dans la section

Paramètres des métadonnés, écrivez une
description qui réfète bien le contenu du site
et des mots clés variés et en rapport avec le
contenu.
•

Ensuite, dans la section Paramètres SEO,

•

cochez Oui pour les URL explicites. Cette

option remplace la longue adresse générée
par Joomla par le titre de la page, ce qui aide
une fois de plus les moteurs de recherche à
comprendre le contenu de la page.
 Gestion des images

• Utilisation du logiciel gratuit Gimp.

Gimp est un logiciel permettant de manipuler les images que
•

vous utilisez sur votre site web.

•

•Exercice
•http://guides.hpjsolutions.com/images/preparation
 Gestion des fichiers

• Utilisation du logiciel gratuit FileZilla.

FileZilla est un logiciel permettant de manipuler les fichiers
•

sur votre unité d’hébergement.

•

•Exercice
•http://guides.hpjsolutions.com/outils-utiles/utilisat

s
Exercice

Choisissez un titre pour votre site, composez

une description et des mots clés et activez
les URL explicites.
 Choix et installation d’un template

•Le template (ou gabarit) permet de

changer l’apparence du site.
•Dans la console d’administration de

votre site
(http://votresite.com/administrator),
cliquez sur le Gestionnaire des
templates, situé dans le menu
Extensions.
•Dans la liste disponible, sélectionnez
le template de votre choix et cliquez
sur Défaut (l’étoile jaune dans le
menu). Une étoile apparaîtra à côté du
nom de la template, signifiant qu’elle
est sélectionnée pour le site.
•
Exercice

S é le ctio n n e z le te m p la te d e vo tre site

 Les outils nécessaires au webmestre
Outils pour faciliter
votre travail

•Un CMS (Joomla)

•Un logiciel pour les image
(Gimp)
•Un client FTP (FileZilla)
•Un éditeur de texte (Notepad)
•Un éditeur HTML (CoffeeCup)
 Liens utiles

• Comment faire évoluer votre

site...
•

• http://www.joomla.org/ - Le site officiel de Joomla.

• http://www.gimp.org/ - Logiciel gratuit pour manipuler des images.
• http://filezilla-project.org/ - Logiciel FTP.
• http://www.coffeecup.com – Editeur HTML gratuit.
• http://www.joomfish.net/ - Composant Joomla pour avoir un site
multilingue.
• http://getfirebug.com/ - Plugin Firefox pour consulter la structure
de votre site.
•
•