Formation Web

Crer son site Web avec Joomla!

Les cinq grandes phases de cration dun site Web

1 2 3 4 5 Analyses Design graphique Dveloppement / Intgration Dploiement (mise en ligne) Rfrencement / Indexation

Phase 1 : Analyses

Analyse stratgique, fonctionnel et technique Comparer la comptition numrer les services offerts tablir larborescence et la structure du site Dterminer, valuer et produire les contenus. Sassurer dadapter les contenus dj existant. Travailler avec des images et des photos. (http://www.istockphoto.com) Rflchir aux stratgies dindexations et de rfrencement

Phase 2 Design graphique

Le graphisme de votre site reflte la nature de votre entreprise. Il est essentiel davoir un design qui rpond le plus nos attentes Dveloppement sur mesure vs achat dun gabarit prconus 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
Prfrez les noms courts; Prfrez un nom agrable loreille, facile mmoriser; Choisissez un nom qui informe linternaute sur votre activit, un nom intuitif; vitez les caractres difficiles saisir comme les tirets par exemple; Prfrez un nom qui suscitera peu derreur; Idalement, prenez votre nom dentreprise comme nom de domaine; Sassurer que le nom de domaine est votre nom.

Quest-ce quun CMS?

Un systme de gestion de contenu ou SGC (Content Management Systems ou CMS) est une famille de logiciels destins la conception et la mise jour dynamique de site web partir dun navigateur Web. Ils partagent les fonctionnalits suivantes: Permet ldition de page simplifie laide doutil de mise en forme. Permet de sparer le contenu de la prsentation Permet de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) Permet plusieurs individus de travailler sur un mme document avec un systme de gestion des droits. Ne ncessite pas de connaissance technique avance.

Un CMS se rsume : Autonomie

Construire votre site Web

Joomla! 1.5

Quest-ce que Joomla?

Joomla! est un systme 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 donnes MySQL.

Source : Wikipedia

Joomla! permet de grer tout le contenu de son site partir dun panneau dadministration : templates, articles, catgories, section, menus de navigation, etc.

Il possde galement plusieurs fonctionnalits permettant dajouter des options supplmentaires au site quon 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 Ladministration du site Web

tapes de cration de votre site

Prise en main de la console dadministration Cration des articles (contenu) Cration des items de menu Utilisation des menus Choix et mise en place dun template Configuration des modules Manipulation des images Optimisation pour les moteurs de recherche

La console dadministration

La gestion du contenu ce fait mme le site Web.( http://www.votresite.com/administrator)

Exercice

Se connecter la console dadministration

Po u r a cc d e r l co n so l d a d m i i a e n stra ti n i o l su ffi : t 1. E n tre z l a d re sse : h ttp :// j 0 0 X . h p j rm a ti n . co m / a d m i i 0 fo o n stra to r 2. E n tre z l s i fo rm a ti n s q u e n o u s vo u s e n o 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 ti i te u r l sa M o t d e p a sse

Exercice

Choisissez un titre pour votre site

Po u r m o d i e r l ti d e vo tre si W e b i fi e tre te l su ffi : t 1. A cc d e r l co n so l d ' d m i i a e a n stra ti n o J o m l ! , d a n s l m e n u site -> o a e co n fig u ra tio n g lo b a l, 2. R e m p l r l ch a m p s N o m d u site et i e sa u ve g a rd e r.

Cration dun article Les articles sont le contenu principal du site Ils sont classs par catgories et sections Peuvent tre affichs de diffrente faon :
Comme le contenu principal dune page, comme un article dun blogue ou comme une nouvelle brve.

Lensemble du contenu de votre site

Gestion des articles

p a rti d u p a n n e a u d a d m i i r n stra ti n o

p a rti d u m e n u p ri ci a l ( m e n u co n te n u ) r n p

En dbutant un nouvel article, il est ncessaire de prciser un titre ainsi que la section et la catgorie dans lequel il apparatra (slectionnez Non catgoris sil nappartient pas une section prcise).

Pour effectuer la mise en page de votre texte, utilisez les boutons de lditeur, qui fonctionnent comme ceux dun traitement de texte ordinaire.

Po u r e n sa vo i p l s... r u h ttp :// g u i e s. h p j l ti n s. co m d so u o

Exercice

C r e z d e s a rti e s p o u r vo tre si cl te

Allez voir le site de guides en ligne :

h ttp :// g u i e s. h p j l ti n s. co m / g e sti n -d e s-a rti e s/ cre e r-d e s-a rti e d so u o o cl cl h ttp :// g u i e s. h p j l ti n s. co m / u ti i ti n -d e -l d i u r. h tm l d so u o l sa o e te

Gestion des sections & catgories

Structure arborescente de votre site

Pour en savoir plus...

Exercice

Divisez vos articles en sections et catgories

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

Gestion des menus

Le menu est essentiel pour que le visiteur puisse accder au contenu du site, peu importe la page o il se trouve.

La gestion des menus, accessible partir du panneau dadministration du site ou du menu Menus, permet de voir tous les menus existants et den ajouter des nouveaux laide du bouton Nouveau.

Cration de nouveaux menus

Lors de lajout dun 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 lments au menu

Pour ajouter des lments, cliquez sur licne situe droite du menu dans la Gestion des menus ou slectionnez 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 doptions possibles. Pour faire un lien directement vers un article, slectionnez Lien interne> Articles > Article > Un article, ce qui mettra votre article en contenu principal de la page.

Dans les Dtails de llment, inscrivez un titre, qui sera le texte apparaissant dans le menu. Puis, dans Paramtres basique, cliquez sur le bouton Slection et choisissez votre article. Cliquez sur Sauver pour enregistrer vos paramtres et recommencer pour chaque lments du menu.

Exercice

Modifiez Main Menu pour votre site en y plaant les articles que vous avez crits plus tt.

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

Configuration des modules

Les modules sont des petits blocs dinformations pouvant facilement tre dplacs sur la page et pouvant apparatre 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 crs par des programmeurs expriments ou contenir seulement du texte.

La gestion des modules se trouve dans le menu Extensions. Certains modules sy trouvent dj par dfaut, comme par exemple les menus du site.

Pour choisir lemplacement du module, cliquez sur son nom pour louvrir. Dans la section Dtails, vous pouvez changer son nom et dcidez si celui-ci apparatra au dessus du module. Loption Activ doit tre Oui, car cest ce qui dtermine si le module apparat ou non sur le site. Ensuite, loption Position permet de choisir o le module apprat sur la page, par exemple en entte ou dans la colonne de gauche. Ces espaces sont prdfini dans la template. Si plusieurs modules sont placs la mme position, loption Ordre permet de dcider lequel saffiche en premier.

La section Affectation de menu permet de slectionner sur quelles pages le module apparatra. Un lment 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 lendroit dsir sur votre site.

Cration dun nouveau module

Dans la gestion des modules, cliquez sur nouveau pour crer un nouveau module. Dans la liste doption, slectionnez HTML personnalis, ce qui permettra de placer du texte dans le module.

D o n n e z u n ti vo tre m o d u l e t tre e s l cti n n e z sa p o si o n su r l p a g e . I scri z e o ti a n ve e n su i vo tre texte la i e d e l d i u r, d e l te d te a m m e fa o n q u e l rsq u e vo u s cri z u n o ve a rti e . C l q u e z su r sa u ve z l rsq u e vo u s a ve z cl i o te rm i . n

Exercice

Crez un module contenant un Copyright, qui sera plac dans le bas de toutes les pages du site.

Optimisation du site
Loptimisation aide les moteurs de recherches mieux comprendre le contenu du site. Ainsi, le site pourra apparatre plus frquement dans les recherches et attirer plus de visiteurs intresss par son contenu.

La base dune bonne optimisation est dassocier des mots-cls pertinents avec le contenu. Pour se faire, allez dans Configuration globale dans le menu Site.

Dans les Paramtres du site, choisissez un titre pour votre site. Ensuite, dans la section Paramtres des mtadonns, crivez une description qui rfte bien le contenu du site et des mots cls varis et en rapport avec le contenu.

Ensuite, dans la section Paramtres SEO, cochez Oui pour les URL explicites. Cette option remplace la longue adresse gnre 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 dhbergement.

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

Exercice

Choisissez un titre pour votre site, composez une description et des mots cls et activez les URL explicites.

Choix et installation dun template Le template (ou gabarit) permet de changer lapparence du site. Dans la console dadministration de votre site (http://votresite.com/administrator), cliquez sur le Gestionnaire des templates, situ dans le menu Extensions.

Dans la liste disponible, slectionnez le template de votre choix et cliquez sur Dfaut (ltoile jaune dans le menu). Une toile apparatra ct du nom de la template, signifiant quelle est slectionne pour le site.

Exercice

S l cti n n e z l te m p l te d e vo tre si e o e a te

Les outils ncessaires 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.