1

Introduction
Joomla!, cest comme la vie ! Ce projet Open Source est sans cesse en mouvement. Il est surprenant, il fait parfois lobjet de rudes dbats, et son rythme de dveloppement est variable. Quoi quil en soit, voil plus de deux ans que son succs ne se dment pas auprs de ses millions dutilisateurs tout autour de la plante. Au dpart, il y avait la version stable et apprcie 1.0.x. Mais depuis deux ans, les dveloppeurs travaillent la nouvelle version Joomla! 1.5, la peaufi nant, lissant, rabotant, revenant en arrire, enrichissant et amliorant encore. Deux annes passionnantes se sont coules depuis la cration de Joomla! en 2005. Lquipe Joomla! sest structure et renforce. La ligne Joomla! 1.0.0 est alle jusqu la version 1.0.14. Dornavant, tous les efforts sont concentrs sur la version 1.5. Et les utilisateurs ont accompagn le mouvement. La plupart dentre eux avait dj fait migrer vers Joomla! un ou plusieurs sites Web conus lorigine avec Mambo. De nombreux utilisateurs sont venus les rejoindre au cours des deux ans passs, sans compter tous ceux qui ne connaissent pas encore ce systme. Joomla! est le systme de gestion de contenu (SGC) Web Open Source le plus rpandu au monde. lautomne 2006, soit un an aprs le dbut du projet, les dveloppeurs pouvaient se targuer denviron 5 millions dinstallations sur des serveurs accs public, tous niveaux de frquentation confondus. On pouvait compter 45 000 dveloppeurs inscrits travaillant sur 1 100 projets pour enrichir Joomla!. Le forum de discussions de joomla.org comptait 450 000 interventions par 50 000 utilisateurs. Un an plus tard, soit en dcembre 2007, voici les chiffres :

plus de 20 millions dinstallations ; 28 membres dont 16 dans l'quipe centrale ; plus de 2 000 projets dextension et denrichissement pour Joomla! ; les forums de discussion Joomla! contiennent plus de 1 millions dinterventions par plus de 100 000 utilisateurs.

Cela reprsente plus de 100 % daugmentation en un an ! Les sites Web pouvant tre crs avec cet outil vont de la page personnelle au site de commerce lectronique professionnel. Dans ce livre, je vais vous montrer comment sexplique la russite de Joomla! et comment vous pouvez lexploiter avec succs votre tour. La premire dition, qui concernait Joomla! 1.0, avait t crite dans le petit village de Ausleben en Saxe (Allemagne orientale). Il ny avait pas de connexion ADSL (toujours pas dailleurs), encore moins de points daccs WiFi public, pas de UMTS et aucune multinationale. Bref, le calme absolu. Le livre que vous tenez entre les mains a t crit Fitou dans le Roussillon. Plus aucun problme pour avoir un accs ADSL et un point daccs public WiFi. Il est devenu indispensable de pouvoir tre connect au Web en permanence. Cela acclre la vie quotidienne (mme si ce nest pas toujours un gage de srnit). En tout cas, de nombreuses choses deviennent plus simples, surtout la gestion des donnes personnelles dun individu sans cesse en dplacement. Il fallait continuellement synchroniser les donnes dun ordinateur lautre, ce qui prenait du temps et provoquait des erreurs.

Qui suis-je ?
Je me nomme Hagen Graf, jai 43 ans, et jhabite Fitou. Jai une femme adorable et quatre fi lles. Janime un blog personnel depuis aot 2004. Mes activits se rpartissent entre lenseignement, le conseil, lcoute, les tests, la programmation, ltude de structures, la cration dapplications, les questionnements et encore les tests. Je suis perptuellement la recherche de la meilleure description de mon travail. Les deux termes qui me semblent les plus appropris dornavant sont Exploitant de connaissances et Consultant en dveloppement . La plupart de ces activits peuvent tre effectues en ligne, distance. Mais il marrive aussi dtre en dplacement : visite de clients dans diffrents pays, autres langues, autres cultures, longs trajets en voiture, en car ou en train. Des temps de raction admis trs courts pour rpondre aux messages des clients. Cette manire de travailler a dimportantes rpercussions sur ce que lon appelle traditionnellement le bureau. Voil encore cinq ans, toutes les donnes critiques taient rassembles sur votre PC localement. De nos jours, une foule de fournisseurs daccs et de services vous proposent un espace disque quasi infi ni sur Internet. Les fournisseurs daccs Internet (FAI) investissent en quipements et la bande passante ne cesse de crotre. Les particuliers achtent dornavant plus dordinateurs portables que dordinateurs de bureau. La mme tendance se constate dans le monde de lentreprise et la pntration du march par les quipements mobiles relis Internet ne cesse de se confi rmer. Il marrive souvent de travailler en plusieurs endroits sur des machines diffrentes. Un jour chez moi, le lendemain ailleurs. Le poste de travail depuis lequel jaccde mes donnes devient de plus en plus interchangeable. Il me suffi t de disposer dune connexion stable et bon march Internet via un rseau WiFi, un tlphone UMTS ou une parabole, un navigateur, un cran confortable, un bon clavier, une souris et, videmment, de llectricit. Toutes ces possibilits vous obligent plus que jamais avoir une ide prcise de votre projet ! De nimporte o sur Terre, vous accdez votre capital de messages, dimages et autres documents. Dornavant, votre bureau se situe l o vous vous trouvez en ce moment.

Comment travaillez-vous ?
Je ne peux videmment pas deviner comment vous travaillez, mais la plupart des personnes que jai pu rencontrer fonctionnent un peu comme dcrit plus haut. Certains salaris en entreprise aimeraient adopter une autre faon de faire, mais les rgles en vigueur dans lentre prise le leur interdisent. Le niveau dexprience en informatique est lui aussi assez constant. La plupart ont utilis un vieux PC sous Windows lcole ou luniversit. Puis sur le terrain ils ont appris les dures ralits des applications bureautiques, les pertes de donnes, le manque de place sur le disque, les problmes de confi guration et dimpression qui sen suivent. Les merveilleuses imbrications de toutes ces choses sont rendues plus complexes avec larrive de la nouvelle approche oriente utilisateur du Web 2.0. Si vous ntes pas passionn au point de vous rveiller la nuit pour modifi er une option du systme dexploitation ou pour trier avec soin vos photos et vos fi chiers de musique, vous tes sans doute comme moi, juste trs satisfait de constater que vos appareils et vos programmes fonctionnent comme prvu. Ce qui vous intresse est de pouvoir accder Internet et vos donnes personnelles en toute srnit. La possibilit de rester en permanence oprationnel est encore plus importante si vous utilisez un ordinateur depuis votre domicile. Votre employeur
3

conomise de la surface de location de bureau, mais vous gagnez de la souplesse dorganisation. Quun logiciel ou quun matriel se mette en dfaut, et cette idylle devient vite un cauchemar.

Quelles sont les volutions logicielles et matrielles ?

Pour permettre daccder cette nouvelle manire de travailler, il faut bien sr que les logiciels appropris soient disponibles : des applications fonctionnant via un navigateur comme la messagerie, le commerce lectronique, lagenda de groupe, la gestion documentaire, les forums, les sites de rencontres et de vente aux enchres, et bien sr les nouvelles plates-formes de mise en rseau du Web 2.0, sont de plus en plus performantes, fi ables et simples utiliser. Le terme la mode de nos jours est Web 2.0 . Quand on songe la monte en puissance des mondes virtuels et des nouvelles manires de naviguer dans les informations, on pourrait songer passer directement la version 3.0. Pensez simplement aux cartes Google Maps, aux systmes de navigation, aux passerelles entre monde rel et mondes virtuels, au stockage de photos sur des sites comme fl ickr.com ou aux annuaires de liens du type del.ico.us. Vous trouvez tout ce qui peut intresser un homme sur digg.com et accrotre votre rseau damis et de connaissances, comme tout homme moderne qui se respecte, sur des rseaux sociaux comme facebook.com ou copainsdavant.com. Vous pouvez mme faire savoir si vous tes connect ou non grce des sites tels que twitter.com. Voil plus de dix ans, un chanteur trs clbre en Allemagne, Udo Lindenberg, que lon ne peut souponner davoir t infl uenc par Internet, avait crit une chanson intitule Je jure dont un passage disait peu prs ceci : ... parfois je suis clochard, et parfois un grand homme. Je ctoie des prsidents et des vagabonds, mais qui donc est vraiment proche de moi ? La vrit ne se montre que quand nous sommes ensemble... . Tous les rles que lon endosse, tous les contacts que lon noue, cette capacit d tre ensemble et mme cette vrit pntrent de plus en plus le monde virtuel et simbriquent dans les rseaux. En effet, les services cits plus haut peuvent entrer en interaction via des interfaces et tre intgrs votre site Web. Vous pouvez par exemple imaginer des annonces immobilires avec une indication cartographique. Sur un site tel que Twitter, les possibilits daccs des interfaces multiples ont encore plus dimportance que le site Web. De nos jours, les tlphones portables se combinent aux assistants personnels, lecteurs MP3 et appareils photos. Et le march sest encore acclr avec lapparition du iPhone. Dornavant, vous pouvez surfer sur le Web depuis votre mobile, remplir un formulaire puis le valider, envoyer et recevoir des courriels, prendre des photos et les transmettre, couter de la musique et bien dautres choses. Les PC de bureau se miniaturisent et les ordinateurs portables deviennent de plus en plus courants. Les nouvelles tendances concernent les communications sans fi l, la poursuite de miniaturisation des composants, le stockage sans partie mcanique (mmoire fl ash) et enfi n laugmentation de dure de vie et dautonomie des batteries.

Quelles consquences pour votre site Web ?

Dans le monde actuel, toute socit, institution ou association se doit doffrir un site Web agrable et polyvalent. Un site moderne, administrable via un simple navigateur, capable de remplacer votre armoire darchives et votre carnet dadresses, un site accessible depuis les nombreux types de terminaux et qui soit facile enrichir. Votre site Web est votre vitrine. Vous y indiquez aux autres ce que vous ou votre socit peut proposer. Cest le lieu disponible 24 heures sur 24, tous les jours de lanne pour rpondre aux besoins de
4

vos clients. Pendant son dveloppement, votre site Web peut se comparer un port dans lequel aborder les applications et les donnes les plus diverses, vous concernant ou concernant votre socit. Votre site Web devra donc prvoir des interfaces pour quil puisse tre exploit partir dautres applications. Jusqu rcemment, construire un tel site supposait un travail considrable. Mme sil ntait pas obligatoire dtre un spcialiste, un minimum de tnacit combin un intrt pour ce domaine tait indispensable pour obtenir un rsultat probant. Vous deviez rdiger des pages HTML statiques dans un diteur HTML puis les transfrer par FTP sur le serveur. La moindre possibilit dinteraction (livre dor, forum, etc.) supposait dapprendre un langage de programmation. Beaucoup de candidats ont de ce fait et pour des raisons tout fait valables prfr ne pas se lancer dans pareille aventure et ont fait appel une agence de communication ou bien ont relgu le projet aux oubliettes. Mais la solution existe dornavant, puisque le livre que vous tenez entre vos mains va tre votre guide de voyage dans le monde dun des meilleurs logiciels de gestion de contenus du monde : Joomla!

De quoi parle ce livre ?

Ce livre est bien sr consacr Joomla! et la manire de lexploiter. Cest un outil trs polyvalent, et vous pourrez lexploiter dans des contextes trs divers pour ladapter vos attentes. Pour vous offrir une entre en matire agrable, jai mis en place la structure suivante pour ce livre :

Le Chapitre 1 rappelle les concepts et conventions qui vous seront utiles dans votre dcouverte de Joomla!. Le Chapitre 2 prsente linstallation de Joomla! dans diffrents environnements dexploi tation. Le Chapitre 3 passe en revue les donnes dexemples installes en mme temps que Joomla!. Les Chapitres 4 11 se consacrent lexploitation de la partie administration, la confi guration et la gestion des contenus. Le Chapitre 12 prsente quelques possibilits dextension de Joomla!. Le Chapitre 13 montre comment concevoir un site Web et crer ses propres modles (templates). Le Chapitre 14 a t crit par ma collgue Angie Radtke, une experte dans le domaine de laccessibilit de Joomla!. Elle a cr avec Robert Deutz le modle daccessibilit nomm Beez. Au Chapitre 15 vous apprenez comment crer vos propres extensions. Le Chapitre 16 propose un exemple concret de cration dun site Web avec Joomla!, de lide initiale la mise en service. Le Chapitre 17 prsente deux templates (modles) qui sont fournis sur le CD-ROM livr avec louvrage et que vous pourrez utiliser pour votre site Web. L'Annexe donne des dtails intressants au sujet des mises jour, de la scurit et dautres points ne pas ngliger.

Que signifi e Joomla! ?

Joomla! est tir du mot swahili Jumla qui signifi e tous ensemble . En septembre 2007, jai reu un courriel dun lecteur qui ma prcis que le terme provenait en fait de larabe et a t repris en swahili. Joomla! est le logiciel qui est issu dune querelle de fond entre la fondation Mambo cre en aot 2005 et ses dveloppeurs dalors. Joomla! est un descendant du trs rput logiciel Mambo et offre les mmes fonctions : crer et administrer en toute simplicit un site Internet via un navigateur Web. Joomla! se prsente comme un logiciel sophistiqu de gestion de contenus CMS (Content Management System). Cest effectivement un des plus performants logiciels CMS du monde du logiciel libre Open
5

Source. Il a t adopt par des milliers de gens pour construire leur site personnel, tout autant que par de trs grandes entreprises. Il est simple installer, administrer et son fonctionnement est trs fi able.

Ce que vous saurez aprs avoir lu ce livre

Mme si vous tes dbutant en informatique, vous saurez mettre en place votre site Web et le grer via un navigateur. Si vous connaissez un peu le HTML, CSS et la retouche dimages, vous pourrez galement concevoir vos propres modles. Si vous tes rompu aux principes du langage PHP et en avez un minimum dexprience, vous pourrez crer vos propres composants, modules et plugins (alias mambots).

Des questions ?
Si vous avez la moindre question aprs avoir lu ce livre, commencez par visiter le site Web de rfrence de Joomla! en France : www.joomla.fr Vous pouvez aussi me faire part de vos remarques en mcrivant hagen@cocoate.com ! Mme si la rponse tardera sans doute venir. :-)

Le site Web du livre

Vous trouverez galement quelques complments (en allemand bien sr, mais aussi en anglais et certainement bientt en franais) sur le site compagnon du livre ladresse http://joomla.addison-wesley.de.

CHAPITRE 1 : CONCEPTS FONDAMENTAUX

1.1 Les systmes de gestion de contenus (CMS) 1.2 Un peu dhistoire 1.3 Structure fonctionnelle dun CMS 1.4 Joomla! en tant que btiment ? 1.5 Versions de Joomla! 1.6 Exemples de sites grs par Joomla!

1.1 Les systmes de gestion de contenus (CMS)

Lexpression Systme de Gestion de Contenus est la traduction de CMS, acronyme dans lequel on trouve Content (contenu) et Management (administration ou gestion). Elle dsigne de faon vague un systme (logiciel) pour grer des contenus dinformation. Une ardoise et une craie forment un CMS ; lencyclopdie libre Wikipedia ou le site de vente aux enchres eBay sont aussi des CMS. Dans ces trois exemples, ce sont des contenus quil faut grer. Dans les deux derniers cas, le nombre de membres participants est phnomnal. Ces membres ont un rle majeur dans un CMS soit en tant quadministrateurs, soit en tant quutilisateurs (users) ou rdacteurs. Nous nen avons pas fi ni avec les acronymes. ct des CMS, il existe des systmes de gestion de donnes dentreprise ERP (Enterprise Resource Planning Systems), des systmes de gestion de la relation client CRM (Customer Relationship Management Systems), des systmes de gestion documentaire DMS (Document Management Systems), des systmes de gestion des ressources humaines HRM (Human Resource Management Systems), etc. Mme les systmes dexploitation tels que Windows ou Linux grent des contenus. Cette infl ation demploi de la notion de contenu rend ardue la dfi nition du concept de CMS. Je trouve la dfi nition suivante tire de Wikipdia comme trs explicite : Les systmes de gestion de contenu ou SGC (de langlais Content Management System ou CMS), sont une famille de logiciels de conception et de mise jour dynamique de site Web ou dapplication multimdia. Ces derniers temps, cest lacronyme ECMS (Enterprise Content Management System) qui a le vent en poupe en tant que concept gnral englobant tous les autres cits ci-dessus. Joomla! entre dans la catgorie des systmes de gestion de contenus Web WCMS (Web Content Management System), puisquil nest destin qu grer des contenus qui seront consults via un navigateur Web. Dans le langage courant, le terme gestion de contenus sans autre prcision est le plus souvent associ des pages Web pouvant tre gres via un navigateur. Ce qui ne simplifi e pas ncessairement les choses.

1.2 Un peu dhistoire

Pendant que le constructeur informatique Sun dclarait au cours des annes 1990 : Le rseau est lordinateur , lditeur Microsoft maintenait son cap : Un ordinateur personnel sous Windows sur chaque bureau. Le dsir de Microsoft a t satisfait : il y a quasiment neuf PC sur dix sous Windows. Lordinateur auquel Microsoft faisait rfrence hbergeait un mlange de donnes binaires (programmes) et de donnes utilisateurs (informations). Les programmes devaient tre achets et installs par les clients, afi n de permettre daccder aux donnes utilisateurs. La suite Microsoft Offi ce a cette poque envahi quasiment tous les bureaux du monde. Lordinateur auquel Sun faisait rfrence tait un terminal non autonome : un quipement bon march runissant un clavier, un cran, une souris et un accs rseau. Les programmes et les donnes taient stocks non pas sur cette machine, mais quelque part sur le rseau. La philosophie de Microsoft tait plutt oriente vers lindividuel alors que celle de Sun ltait vers le collectif. Les motivations de part et dautre taient non pas philanthropiques, mais commerciales. Microsoft gagnait de largent en vendant des logiciels pour PC aux particuliers et aux PME, Sun vendait aux grandes et moyennes entreprises des serveurs et calculateurs avec les logiciels appropris. Au milieu des annes 1990 se produisit lirruption (on pourrait presque parler druption) du rseau Internet pourtant dj utilis depuis les annes 1960 par les chercheurs et les militaires, notamment grce au standard HTML (HyperText Markup Language, le langage de codage des formats dans les pages Web), la multiplication des serveurs Web et la cration des logiciels navigateurs (clients Web). Internet nest rien dautre quun ensemble de rgles du jeu et de conventions auxquelles se plient tous les quipements qui sy connectent. Lensemble est si bien conu quil na fallu que quelques annes pour constituer un rseau plantaire. Lindividu nest plus accessible sil ne dispose pas dune adresse de messagerie. Une entreprise sans site Web semble dpasse, et certains clients ignorent mme son existence. Le monde entier sest ru sur le nouveau rseau, pour faire partie de laventure. Des fi lms tels que Matrix sont devenus des hits et le cauchemar du livre 1984 de George Orwell ne sest apparemment pas ralis. Ceux qui avaient lhabitude dacheter leurs programmes ont achet des diteurs HTML et ont construit leurs pages Internet. Les autres ont rdig leurs pages HTML sans outil particulier sauf lditeur de texte que possde toute machine. Les agences de cration Web fi rent leur apparition pour faire le travail la place de leurs clients. Les deux camps souffraient du mme problme : les pages HTML taient statiques. Modifi er une page supposait de charger la page localement dans son diteur de texte, de la tester puis de la retransfrer sur le serveur pour la mettre jour. Ctait non seulement inconfortable, mais des sites complexes tels que eBay ou Amazon nauraient pas pu voir le jour. Dans chaque groupe furent trouves des solutions plus ou moins satisfaisantes.

Dans le camp des individuels apparurent des programmes performants pour crer et modifi er ses pages HTML, puis les faire renvoyer automatiquement sur le serveur. Ces pages contenaient des lments interactifs (compteur de visites, liens publicitaires, etc.). Le camp des collectifs sappropria les applets Java qui rendaient possible lcriture dun programme fonctionnant sur le serveur tout en tant pilot depuis un navigateur. Cette technique a permis lappa rition des premiers sites de commerce lectronique (ventes aux enchres, rservation de billets davion). Chaque groupe tenta de conqurir des parts de march. Il en a rsult un march assez stable pour chacun, le tout anim par une incessante guerre de chapelles pour savoir quel tait le meilleur systme dexploitation (Windows ? Linux ? Mac OS X ?), ce qui poussait les diteurs acclrer la frquence de parution des nouvelles versions. Les clients sy habiturent en se disant que les choses ntaient dcidment pas simples. Mais dans un tel contexte, il existe toujours une troisime voie. Dans notre cas, lautre approche a pris forme dans les langages de script Open Source tels que PHP. Lauteur de PHP, Rasmus Lerdorf, cherchait enrichir sa page personnelle avec des lments interactifs, et ses efforts ont donn naissance au langage PHP. Ds le dpart, ce langage tait optimis pour fonctionner en parfaite harmonie avec la base de donnes relationnelle libre MySQL (rgie comme PHP par la licence GNU/GPL). Par bonheur sont apparus la mme poque le systme dexploitation libre Linux et le serveur Web Apache. Toute linfrastructure logicielle dun serveur tait ainsi disponible. Le poste client utilisait un navigateur (le pionnier tant Netscape). Lacronyme LAMP (Linux, Apache, MySQL, PHP) devint le synonyme de la prsence interactive sur Internet associe la puissance dune base de donnes. Une vritable frnsie de cration vit apparatre les logiciels les plus divers pour crer des sites Web depuis un navigateur : forums de discussion, communauts, cyberboutiques, pages de sondage, etc. Aprs la partie technique incarne par Linux et Apache pouvait enfi n surgir la partie utilisateur. la fi n des annes 1990, la bulle spculative Internet clata. Soudain, on se remit penser en termes de commerce classique et revenir aux bonnes vieilles mthodes. En priode de restriction conomique, il en va toujours ainsi : la chasse aux conomies est ouverte. Il y avait, et il y a toujours, quantit de solutions ! Les applications PHP en activit cette poque se comptaient par millions. Citons par exemple les deux outils phpBB et phpMyAdmin. Le premier est devenu le standard de fait pour crer des forums Internet ; le second est linterface standard pour exploiter une base de donnes MySQL via une interface Web. Et le code source du langage PHP comme celui des outils environnants tant librement disponible, il samliorait de plus en plus vite, grce aux contributions de la foule dutilisateurs et de programmeurs qui sen souciaient. Plus un point fonctionnel tait conu de faon ouverte, communautaire, plus il avait de succs. Un expert pouvait lui seul faire conomiser des sommes normes une entreprise en trs peu de temps. Les pages HTML statiques taient relgues au panthon de lhistoire. Tout devait dornavant tre dynamique ! Voil o nous en sommes maintenant depuis plusieurs annes. Linux, Apache, MySQL et PHP sont devenus des standards reconnus faisant lobjet de cursus de formation offi ciels. La recherche dapplications PHP utilisables en milieu professionnel a alors commenc.
9

Voici les critres pris en compte dans une telle recherche :

installation simple ; facilit de maintenance du code source ; scurit du code source ; ergonomie (facilit demploi pour lutilisateur) ; facilit dextension ; facilit de prise en mains pour les nouveaux programmeurs ; interfaces de programmation standardises ; cot acceptable ; indpendance des fournisseurs. L'norme avantage des applications bases sur PHP est lindpendance du matriel et du systme dexploitation. Lenvironnement LAMP existe aussi pour Windows (WAMP) et pour Mac OS (MAMP). Le nom gnrique est XAMPP. Et c'est alors qu'est arriv le fameux Joomla! qui nous intresse ici.

1.2.1 Joomla! do vient-il ?

Une socit australienne nomme Miro avait conu en 2001 un systme de gestion de contenus quelle avait baptis Mambo. Elle avait dcid de diffuser ce logiciel dans les conditions Open Source, pour que le plus grand nombre ladopte et aide le tester. En 2002, la socit dcida de scinder Mambo en deux variantes : une commerciale et une Open Source. La variante payante a t rebaptise Mambo CMS ; lautre a t rebaptise Mambo Open Source (abrge en MOS). la fi n de 2004, tous les participants au projet estimrent dun commun accord que MOS pouvait dornavant sappeler Mambo tout court et dcidrent quil fallait cooprer pour assurer lvolution de ce CMS qui tait alors celui qui progressait le plus. Les avantages de la variante payante pour les entreprises (Mambo CMS) taient une plus grande scurit ainsi que la disponibilit de la socit Miro comme interlocuteur et fournisseur dextensions et de prestations spcifiques La variante Open Source (Mambo) a comme avantages sa gratuit et le libre accs au code source. De cette manire, on tait sr quun nombre important dutilisateurs et de dveloppeurs participait lvolution du logiciel. Cela nempchait nullement une entreprise dopter pour la variante Mambo comme point de dpart puis partir delle de concevoir une solution spcifi que. Au cours de lanne 2005, toutes les parties concernes ont rfl chi lopportunit de crer une fondation afi n de garantir la prennit et lvolution de Mambo (la variante Open Source). Durant lautomne 2005, tout a alors dmarr : la page Web offi cielle de Mambo annonait la naissance de la fondation Mambo. Pass les premires heures denthousiasme, il apparut assez vite vident que cette fondation avait t cre par la socit Miro en Australie sans la participation effective de lquipe de dveloppement au titre de membres fondateurs. Il sensuivit des discussions enfl ammes sur les forums de la communaut. Lquipe de dveloppement senferma quelques longs jours dans un mutisme complet. Peu de temps aprs, les dveloppeurs se manifestrent enfi n par une prise de position sur le site opensourcematters.org pour annoncer quils allaient prendre un conseil impartial auprs du centre Software Freedom Law Center et quils prvoyaient toujours de poursuivre le dveloppement de Mambo. Dj cette poque avait t mise lide de refondre le code source dans une version amliore de Mambo.

10

Comme dans un mnage en droute, lanimosit ne fi t que crotre de plus en plus vite entre la donation Mambo pilote par Miro (qui venait de perdre son indispensable quipe de dveloppeurs), cette quipe de dveloppeurs, qui avait dcid de partir crer une nouvelle branche du logiciel et devait bien sr lui trouver un nouveau nom, et une communaut mondiale compose de centaines de milliers dutilisateurs fort nervs qui sinvectivaient en mots peu tendres dans les blogs, les forums et les pages respectives des deux projets. Les deux projets se sont poursuivis en parallle. La nouvelle ligne Open Source a adopt le nom Joomla!. Lquipe de Joomla! a pris soin dinstituer des rgles dmocratiques. Lorsquil a t question de choisir le logo du projet, un concours a t lanc parmi la communaut naissante. En quelques jours, plus de 8 000 utilisateurs staient inscrits sur le forum. Les projets et les rsultats sont toujours disponibles sur le site offi ciel. Pendant ce temps, la fondation Mambo a rapidement mis en place une nouvelle quipe de dveloppeurs. Le 17 septembre 2005 a t lance la version 1.0 de Joomla!. Au niveau des dveloppeurs tiers, cest--dire des groupes de programmeurs qui craient des composants complmentaires pour Mambo, plusieurs projets importants ont vite bascul vers Joomla!, et notamment Simpleboard (qui sappelle maintenant FireBoard), DOCman et dautres. Cela na fait que renforcer la lgitimit de la nouvelle ligne. Les trois lettres mos qui servaient de prfi xe dans de nombreux noms de variables et didentifi ants dans le code source de Mambo ont t vite remplaces par jos. Vous trouverez sur Internet une description dtaille du droulement de ces oprations, mais en langue anglaise. Deux ans aprs sa fondation, Joomla! est lun des projets Open Source les plus rputs du monde. Au cours de ces deux annes, la mise sur pied dune nouvelle organisation a entran bien des dbats anims et bien des incomprhensions dues aux diffrences culturelles. Pendant ce temps, le Web 2.0 apparaissait. Le contenu gnr par les utilisateurs ne cessait de crotre. Le monde entier a dcouvert lunivers virtuel de Second Life. Le langage de programmation Ruby et sa dclinaison Ruby on Rails ont t de plus en plus adopts pour crer des sites Web. Les interfaces de programmation ont pris une importance particulire. Dans un domaine lvolution si rapide, la version 1.0.x de Joomla! a commenc paratre un peu dpasse. cette poque il ntait pas question den abandonner le dveloppement. Mais les utilisateurs commenaient lorgner dun oeil triste les nouvelles capacits de systmes comme Plone, TYPO3, Drupal et plusieurs autres. Tous ces projets navaient pas grer lhritage de Mambo et pouvaient prendre en compte les nouvelles techniques directement. Il est vrai que la version 1.0.x ntait depuis deux ans plus vraiment enrichie. Elle recevait pour lessentiel des correctifs de scurit et quelques petites retouches de code. Mais faire attendre deux ans la nouvelle version dun logiciel nest pas sans risque. Des mauvaises langues ont alors prtendu que Joomla! tait un projet mort. La presse spcialise na pas manqu darticles incendiaires prtendant que lon tenait l un bel exemple de la ruine un projet logiciel prometteur. Mais la nouvelle version Joomla! 1.5 est vraiment un bon produit. voir les nombreuses discussions sur les forums et listes de diffusion, les multiples changes de courriels et rencontres physiques, il me semble que lavenir de Joomla! est devenu plus brillant que jamais.
11

Sous un certain angle, la migration de la version 1.0.x la version 1.5.x rclamera des efforts. En effet les profonds remaniements du code source ne permettent pas de garantir une compatibilit descendante complte. Dun autre ct, cette nouvelle version permet Joomla! de faire partie des systmes de gestion de contenu de niveau entreprise. Le choix stratgique qui consiste faire de Joomla! une bote de construction (Joomla! Framework) simplifi ant lajout de fonctions par les programmeurs est une dcision intelligente qui montrera sa justesse. Il est dornavant enfi n possible de choisir parmi plusieurs mthodes dauthentifi cation et de construire des sites Web multilingues avec une accessibilit amliore. La cration de sites Web composites (mashup) rutilisant les donnes de plusieurs autres sites devient accessible Joomla! tout comme la cration de composants partir dun environnement de cration riche du style Eclipse. Quant on songe au nombre de membres de la communaut, de dveloppeurs et la quantit dinstallations actuelles, Joomla! saura sans aucun doute rpondre aux attentes dans ces diffrents domaines. De nombreux fournisseurs daccs et hbergeurs proposent dj Joomla! prinstall leur client. La nouvelle version 1.5 est suffisamment compatible avec la version 1.0.x pour quil ny ait aucun problme srieux lors de la migration dun site pas trop complexe.

1.3 Structure fonctionnelle dun CMS

Je vais me baser sur Joomla! pour illustrer la structure dun systme de gestion de contenu Web.

1.3.1 Frontend (Frontal) et Backend

Un systme CMS se base sur le couple Frontend et Backend. Le Frontend (partie vitrine) consiste en la page daccueil et toutes les autres pages du site telles que les voient les visiteurs et les utilisateurs identifis. Le Backend (partie arrire-boutique) contient linterface de gestion des pages par ladministrateur. Les activits de Backend comprennent la confi guration, la maintenance, la cration des statistiques et des nouveaux contenus. Le Backend est situ une adresse Web diffrente de la page daccueil du site (donc du Frontend).

1.3.2 Droits daccs

Ds que lon parle dadministration, il faut introduire des rgles pour garantir lutilisation organise des ressources disponibles : ce sont les droits daccs. Dans un CMS, toutes les personnes concernes se voient attribuer un identifi ant (nom dutilisateur) et un profi l daccs y est associ. Cohabitent ainsi des utilisateurs simplement reconnus, des crateurs et correcteurs de contenus qui ont plus de droits et un ou plusieurs administrateurs, qui ont accs tout. Selon le profi l de droits daccs, la page daccueil du site se prsente diffremment ou bien lutilisateur bnficie dune interface dadministration distincte de la page daccueil.

1.3.3 Contenus
Les contenus peuvent prendre des formes trs diverses : fi chiers textes, images, liens, fi chiers audio, donnes extraites dune application comme Google Maps ou une combinaison de ces lments. Pour que la gestion de tous ces contenus soit simplifi e, ils sont systmatiquement intgrs des structures daccueil. Les textes sont ainsi rpartis dans des catgories. Ces catgories consistent elles aussi en des contenus qui doivent tre administrables. Les fl ux dinformations RSS (RSS feeds) sont devenus trs populaires, dautant que la version 7 dInternet Explorer permet enfi n de les exploiter.
12

Au dbut 2008, plus de 75 % des internautes se servent encore de ce navigateur. Les fl ux RSS permettent dintgrer des donnes provenant de sources diverses. Lintgration, le classement, la valorisation, lhybridation et la mise jour de ce genre de contenus externes vont jouer un rle de plus en plus important et fi niront par constituer un liant pour fondre ensemble des sites Web distincts au dpart.

1.3.4 Extensions
Les composants, modules, templates et plugins sont runis sous le terme collectif extensions . Ils apportent des enrichissements fonctionnels par rapport ce que propose le noyau de Joomla!.

1.3.5 Templates (modles ou gabarits)

Un template est une sorte de gabarit visuel prt recevoir des contenus. Il dtermine les couleurs, les polices, les tailles de caractre, limage darrire-plan, les espacements et la distribution des souslments dune page. Il constitue donc une mise en page. Un template runit au moins un fi chier HTML dcrivant la structure de la page et un fi chier CSS dcrivant les styles daffi chage. Un template peut tre beaucoup plus complexe et rendre (affi cher) des donnes de Joomla! accessibles de multiples manires ou en autoriser le recyclage.

1.3.6 Plugins
Un plugin est un bloc de code qui vient se brancher en un point prcis de linfrastructure de Joomla! pour en modifi er le fonctionnement. Vous pouvez par exemple utiliser un plugin dans un contenu pour charger le contenu dun module dans un texte. Pour pouvoir tendre la fonction de recherche dun site Web un composant supplmentaire, il faut lui associer un plugin. Les plugins peuvent parfois tre vus comme une langage de macros pour Joomla!.

1.3.7 Modules
Un module est une extension du domaine des contenus de la partie utilisateur. Il permet de disposer de nouvelles donnes provenant dun composant. Les modules peuvent tre mis en place des positions prdfi nies dans le template. Un module li un composant permet de visualiser le contenu sous un format prcis ailleurs que dans le domaine des contenus du template. Par exemple, le module des dernires infos permet dextraire les titres des cinq derniers articles produits par les composants de contenu et de les transmettre au template. Il existe un autre module pour dterminer le nombre dutilisateurs actuellement connects et affi cher le rsultat.

1.3.8 Composants
Joomla! doit tre extensible pour sadapter lvolution des besoins. Le terme composant dsigne dans Joomla! des extensions qui ajoutent de nouvelles fonctions et sont en gnral gres par un domaine ddi de la partie administrative de Joomla!. Les principaux composants apparus ces derniers temps sont une boutique en ligne, une galerie de photos, une gestion de news et un forum de discussion. Les attentes actuelles en ce domaine sont notamment loptimisation des moteurs de recherche, la gestion des droits daccs, les formulaires multipages et les structures de contenus variables. Les composants incarnent la logique de traitement de votre site. Ils affi chent les donnes du domaine de contenu de votre site Web (Main Body).

13

1.3.9 Chanes de production (workflows)

Une chane de production (workfl ow, souvent non traduit ou bien traduit en flux de travaux) est une manire dorganiser formellement les interactions entre les processus et les personnes dans un objectif commun. Le service Expdition dune entreprise incarne une chane de production ; une recette de gteau en constitue une autre. Du fait quen gnral plusieurs personnes participent la gestion des contenus dun systme CMS, il est capital de dfinir de bonnes chanes de production. Un concept frquemment utilis dans ce contexte est celui de rservoir de tches dun utilisateur. Par exemple, un rviseur voit saffi cher en permanence la liste des nouveaux articles quil doit relire. Aprs lecture, il valide (ou non) chaque article, qui apparat alors dans la liste dentre du chef de rubrique qui dcide (ou non) de le placer en premire page.

1.3.10 Configuration gnrale et charte graphique

Ce paramtrage concerne toutes les pages du site : texte du titre dans la fentre du navigateur, mots cls pour les moteurs de recherche, options pour autoriser ou non lenregistrement du visiteur sur la page, pour rendre une page temporairement inaccessible, etc.

1.3.11 API
API est un acronyme (Application Programming Interface) anglais qui dsigne une interface de programmation. Il sagit dune convention stricte permettant deux programmes dentrer en interaction et de dialoguer. Il est devenu indispensable de pouvoir faire interagir Joomla! avec dautres programmes voire mme de le tlcommander. Cela ouvre de tous nouveaux horizons. Linterface API constitue la passerelle entre les crations des dveloppeurs tiers et le noyau Joomla!.

1.4 Joomla! en tant que btiment ?

Joomla! est une sorte de bote de construction, qui vous permet, aprs mise en place sur un serveur, de crer puis de faire voluer votre site personnel. Joomla! ressemble une maison que vous dcidez de construire sur le terrain de votre choix et que vous agrandissez ensuite votre rythme. La mtaphore immobilire est donc pertinente. Stop ! Jai encens la mobilit et voil que je parle de choses immobiles ? Ne prenez pas peur. Limmeuble que vous allez btir va rsider physiquement quelque part (sur votre serveur), mais le monde entier pourra venir vous rendre visite quasiment la vitesse de la lumire. Pour rendre un immeuble habitable, il faut ajouter les quipements indispensables que sont le chauffage, llectricit et leau courante. Voil dailleurs une raison pour faire hberger votre site Joomla! sur un serveur qui ne souffrira jamais de pannes secteur puisquil sengage une disponibilit 24h/24 7j/7 . Comme dans une maison, Joomla! distribue lespace en pices : une pice pour accueillir les visiteurs, une pour prparer les repas, une autre pour discuter, un bureau et une pice intime que vous ne montrez quaux vrais amis. Certains prfrent les espaces ouverts, de style loft, qui combinent toutes les fonctions. Quelle que soit votre prfrence en matire de distribution des espaces, il faut ensuite amnager le tout (revtements de sol et de murs, meubles et dcoration) puis faire priodiquement le mnage. Tous vos visiteurs laissent des traces pas toujours dsirables. Pour que vos visiteurs puissent trouver votre maison, il vous faut une adresse que vous ferez connatre au plus grand nombre. Mais il ny a pas de rpertoire gnral sur Internet ; vous devrez donc vous soucier de comment mieux faire rfrencer votre site.
14

Vous jouissez peut-tre dun jardin avec plusieurs portes daccs : un portail principal, une entre par une autre rue voire une porte drobe dans un coin du jardin, rserve aux bons amis. Ou bien vous ntes pas du style construire en dur, et prfrez les camping-cars, les tentes, les htels ou encore les rsidences communautaires. Ou alors vous choisissez de louer et de ne pas vous soucier de tous ces problmes. Si vous reliez les phrases prcdentes votre site Web, vous devinez quil est essentiel de dterminer ce que vous voulez faire, qui vous tes et comment vous dsirez paratre aux yeux du monde. On ne peut pas ne pas communiquer ! En revanche, on peut trop aisment mal communiquer et tre mal compris. Vous planifi erez donc votre site Internet avec grand soin. Rfl chissez aux textes, mais aussi aux couleurs, aux lments interactifs (calendrier, forum) et prvoyez toujours une zone rserve aux membres. Noubliez pas de guider vos visiteurs, sans pour autant les contraindre. Visitez de nombreux autres sites et voyez ce quil en ressort. Prenez le temps de rencontrer des personnes reprsentatives de vos futurs visiteurs. Vous vous fliciterez plus tard davoir enqut pralablement et davoir recueilli leurs avis. Vous serez tonn du nombre de choses auxquelles vous naviez pas pens. Cest une tactique rentable et effi cace pour trouver de nouvelles ides et viter les plus grossires erreurs. Consacrez beaucoup defforts sur ces points, car ils sont dterminants pour le succs de votre prsence sur le Web.

1.5 Versions de Joomla!

Comme pour tout logiciel, Joomla! volue par tapes. Lquipe Joomla! a rendu publique le 1er septembre 2005 une feuille de route (roadmap). La premire version publie est la 1.0. Cette nouvelle numrotation visait viter toute confusion avec le logiciel Mambo dont Joomla! est issu. La version 1.0 est une version retouche de la version 4.5.2.3 de Mambo. Les retouches concernaient le changement de nom, quelques erreurs en attente et des correctifs de scurit. lheure o nous mettons sous presse, Mambo est arriv la Version 4.6.2. Dans les deux annes qui viennent de scouler, il y a eu treize versions de Joomla! 1.0.x. Elles ont permis damliorer une foule de petits dtails dans le code. Si vous en avez suivi lvolution, vous aurez remarqu avec joie que Joomla! est devenu de plus en plus fi able.

1.4.2 Convention de versionnage de Joomla!

Les versions de Joomla! obissent la convention X.Y.Z :

X = Numro majeur. Ce chiffre progresse lors de modifi cations radicales du code source. Une nouvelle version majeure nest en gnral pas compatible avec les versions prcdentes. Y = Numro mineur. Ce chiffre progresse, en cas de modifi cations importantes au niveau fonctionnel. En gnral, la compatibilit est maintenue (moyennant quelques amnagements). Z = Numro de maintenance. Ce chiffre augmente de 1 ds quune nouvelle version est diffuse suite des corrections et suppressions de failles de scurit. La quantit de modifi cations est limite et les nouveauts fonctionnelles sont trs rares. La compatibilit est assure avec les versions prcdentes de mmes numros majeur et mineur (mmes valeurs X et Y). 15

Toute volution au niveau majeur (X) ou mineur (Y) correspond une full release. Dans ce cas prennent place des priodes probatoires en tat Alpha puis Bta. La dure de ces priodes de test nest pas fi ge et dpend de lquipe de dveloppement. Les versions Bta sont normalement mises disposition pendant trois semaines, ce qui permet aux concepteurs de composants de les adapter la nouvelle version. En revanche, une release de maintenance est immdiatement oprationnelle. La version 1.5.0 correspond la premire version majeure au bout de deux ans. Elle a dabord donn lieu des versions Alpha, puis Bta puis des versions candidates diffusion RC. Les crateurs de composants tiers ont eu le temps dadapter leurs produits la nouvelle version. La communaut a effectu des tests intensifs et les incompatibilits par rapport lancienne version ont t rpertories. Vous pouvez lire les dclarations et les rsolutions de problmes sur le site Web de Joomla! (dans le Bug-Tracker). Nhsitez pas apporter votre contribution si vous dcouvrez une erreur non encore dclare. Vous y trouverez galement la liste des amliorations les plus attendues. Le dveloppement de Joomla! 1.5 a commenc lautomne 2005, sans faire trop de bruit au dpart. Les ides taient dj trs claires cette poque, et la premire version Alpha est sortie en fvrier 2006.

1.4.3 Feuille de route (prvisions dvolution)

Cette feuille de route (roadmap) est bien sr sujette modifi cation ventuelle, mais elle donne une ide de la tendance gnrale.
Version Mambo 4.5.2 Joomla! 1.0.x Date prvue 17 fvrier 2005 Septembre 2005 Remarques Dernire version stable de Mambo Reprise de la version Mambo 4.5.2.3, correction d erreurs et de failles de scurit, dernire version stable de Joomla! Internationalisation (support complet de UTF8) Localisation de l interface d administration dans toutes les langues Plugins utilisateurs Base de donnes : support de MySQL et de MySQLi Systme de transfert FTP permettant de contourner le problme du mode scuris Safe Mode de PHP chez les fournisseurs d accs Rvision profonde de la structure en vue de permettre de crer des sites Web accessibles avec Joomla! (au niveau infrastructure) Sparation de la logique de programmation de celle de prsentation Optimisation de l exploitation par les moteurs de recherche (SEF) Mcanisme de mise en cache amlior Documentation des programmeurs (API, Howto) Optimisation de l interface API Amlioration du cache Meilleur support des URL pour les moteurs de recherche Introduction de l infrastructure JavaScript Mootools Intgration du Template accessible Beez dans le noyau Documentation utilisateur Texte d'aide Suppression d'erreurs Optimisation de scurit et de performances Tests multi-plates-formes et multinavigateurs La vraie version stable Nouveau systme de contrle des accs utilisateurs Versionnage des contenus Installation multisites (plusieurs pages Joomla! avec la mme installation) Mcanisme de mise jour Systme de fi chiers virtuel Support de plusieurs bases de donnes

Joomla! 1.5 Bta 1 Oct 2006

Joomla! 1.5 Bta 2 Mai 2007

Joomla! 1.5 RC1-4 Juillet-Dcembre 2007

Joomla! 1.5 stable Version suivante

Janvier 2008 Pas de date

16

Tableau 1.1 : Feuille de route de Joomla! (dcembre 2007) 1.4.4 Quelques dtails des volutions Comme le Tableau 1.1 le laisse deviner, la version 1.5 est la premire version vraiment complte de Joomla!. Dans un premier temps, lquipe de Joomla! a dabord pris en compte lhritage provenant de Mambo avant de trouver sa propre voie. Les enrichissements incorpors dans Joomla! 1.5 montrent clairement dans quelle direction soriente le logiciel.

Internationalisation

Tous les textes statiques peuvent dornavant tre traduits dans des fi chiers en plusieurs langues. Cela concerne notamment la partie administrative qui ntait au dpart disponible quen anglais ; Support de l'criture de droite gauche (RTL, par exemple pour larabe, lhbreu, le farsi et lurdu) ; Conversion intgrale vers le jeu de caractres UTF-8 pour coder et affi cher tous les caractres au format Unicode 16.

Plugins utilisateurs
Ce qui sappelait auparavant Mambot sappelle dornavant un plugin. Aux premiers plugins de contenu (content), ddition et de recherche sont venus se joindre des plugins utilisateur (User), dauthentifi cation, xmlrpc et systme. Ces nouveaux plugins permettent de mettre en place des mcanismes didentifi cation daccs partir de programmes externes.

Support de XML-RPC
Le mcanisme XML Remote Procedure Call constitue une spcifi cation permettant des logiciels situs sur des plates-formes diffrentes et des environnements diffrents de communiquer. Cette spcifi cation supporte tous les langages courants de programmation. Vous trouverez des librairies pour convertir le code vers XML-RPC. Joomla! est dot dune telle interface de programmation. Elle permet par exemple un utilisateur de transmettre une image depuis Flickr ou bien de rdiger un article avec OpenOffi ce pour le diffuser ensuite dans Joomla!. Les dveloppeurs ne sont pas en reste ; ils peuvent dornavant dialoguer avec Joomla! via cette interface depuis un programme Java.

Support de plusieurs bases de donnes

Joomla! 1.5 est dot dune couche logicielle de sparation grce laquelle il est possible dexploiter plusieurs versions de bases de donnes. Pour chaque installation Joomla!, il nest possible dutiliser quune seule base la fois. lheure actuelle, les deux versions MySQL 4.x et 5.x sont supportes mais dautres SGBD le seront ultrieurement.

Systme FTP pour grer le problme du mode scuris de PHP

Pour viter les problmes frquents de droit daccs aux donnes, il a t ajout une couche FTP. Elle permet dinstaller de nouveaux composants et deffectuer des transferts par tlchargement PHP et par FTP. Les paramtrages contraignants (mais justifi s) imposs par les FAI au niveau du langage PHP rendaient souvent diffi cile linstallation dextensions et le tlchargement des fi chiers.

17

Mise jour de linfrastructure Joomla!

Dans les premires versions, il ny avait pas dinfrastructure au sens strict, cest--dire une bote outils aux limites bien dfi nies pouvant servir dinterface de programmation API. Peu aprs la rupture avec Mambo, il est devenu vident quil fallait modifi er quasiment partout lancien code source. Il fallait reformuler et reprogrammer proprement les fonctions de Joomla!. Une infrastructure digne de ce nom (framework) doit tre souple, volutive, totalement spare de la partie affi chage et surtout, aise prendre en main. Il faut que les dveloppeurs tiers puissent crer en peu de temps des composants de bonne qualit. Une interface API est donc devenue incontournable. Joomla!1.5 en possde une.

Accessibilit
Laccessibilit pour les personnes handicapes est un sujet important, puisque depuis dbut 2006 tous les sites gouvernementaux dAllemagne doivent tre conformes aux standards dicts par lorganisation W3C. Joomla!1.5 est livre avec un template offrant une accessibilit complte (il sappelle Beez). La conformit aux standards est ainsi assure. Pour garantir cette accessibilit, il faut se conformer des standards du Web (du code HTML/ XHTML validable) Il faut aussi sparer rigoureusement les contenus (les textes et les images) de la manire de les prsenter, en utilisant des feuilles de styles en cascade CSS. Actuellement, seule la partie visible par les visiteurs est conforme. La partie administrative le sera dans une version ultrieure. Elle est dj pilotable par un non-voyant.

Adaptation aux moteurs de recherche

Le support des adresses URL exploitables par les moteurs de recherche a t extirp du noyau de Joomla! pour constituer dornavant un plugin. Il devient ainsi den utiliser les possibilits partir de composants dautres programmeurs, ce qui tait trs diffi cile auparavant.

Les projets Google Summer of Code

Depuis lanne 2005, la socit Google parraine les programmeurs talentueux dans leurs projets Open Source. Elle attribue chacun 4 500 $ US dans le cadre dun projet appel Summer of Code (programmation dt). Cela vite des tudiants de chercher un job dt et leur permet de se consacrer totalement leur passion, au profi t de la communaut mondiale, et bien sr celui de Google. Chaque anne, Summer of Code donne Google loccasion de se faire connatre, de recueillir de bonnes ides et de reprer de bons programmeurs. Les projets Open Source y trouvent leur compte aussi grce ce brassage dides, aux contacts nous et aux rsultats concrets. Chaque tudiant est suivi par un membre issu de la communaut de chaque projet qui est dsign comme mentor. Les rsultats des projets ont t et sont toujours intgrs peu aprs dans Joomla!. Au cours de lanne 2007, plusieurs nouveaux projets concernant Joomla! ont t ainsi fi nancs par Google. Voici les projets concerns :

Extension du modle des ensembles imbriqus grce des ensembles imbriqus liaisons fi ges. Enno Klasing (mentor Louis Benton Landry). Un projet permettant dimbriquer des catgories sans limite de niveaux. Interface de messagerie pour diffusion. Aini Rakhmawati (mentor Mateusz Krzeszowiec). Permet de crer des contenus Joomla! en envoyant des courriels. 18

Intgration smantique du Web. Charl van Niekerk (mentor Robert Schley). Production du code gnr par Joomla! dans un format XHTML valide afi n de servir de base pour constituer des sites Web accessibles et avancer dans la voie du Web smantique. Go-composant pour Joomla!. Mickael Maison (mentor Andrew Eddie). Intgration des standards gographiques tels que KML et GeoRSS pour exploiter ces donnes dans Joomla!, par exemple pour affi cher le domicile de lutilisateur sur une carte. Plugin Eclipse pour modules et composants Joomla!. Muhammad Fuad Dwi Rizki (mentor Laurens Vandeput). Consiste produire un plugin Joomla! appropri lenvironnement de dveloppement Eclipse, ce qui permet de construire des composants Joomla! de faon trs confortable. Composant de recommandation gnrale pour les contenus Joomla!. Faolan CheslackPostava (mentor Samuel Alexander Moffatt). Permet de proposer automatiquement des contenus par analyse du contexte et du moment.

1.4.5 Caractristiques actuelles de Joomla!

Voici la liste rsume des caractristiques actuelles de Joomla! :

code source disponible ; grande base installe dutilisateurs et de dveloppeurs ; systme de gestion de workfl ow simple ; systme de diffusion des contenus ; gestionnaire de tlchargement et la gestion des fi chiers distants ; exploitation des contenus dans le format RSS ; corbeille pour les contenus effacs ; adresses URL compatibles avec les moteurs de recherche ; gestion de bannires publicitaires ; frontal et administration disponibles en de nombreuses langues ; interface d'administration spare de laccs Web normal ; langage de macros pour traiter les contenus (Mambots) ; mcanisme de cache pour assurer une gnration rapide des pages choisies ; installation facile des modles et composants complmentaires ; systme de modles simple mais complet (HTML, CSS, PHP) ; groupes d'utilisateurs hirarchiss ; statistiques de frquentation simples ; diteur de contenus visuel (WYSIWYG) ; gestion de sondages ; mcanisme dvaluation des contenus.

Vous trouverez de nombreuses extensions sur le site http://extensions.joomla.org. Citons notamment :

gestion de forums ; gestion de galeries de photos ; systme de gestion documentaire ; calendriers.

Et presque 2 000 autres.

1.6 Exemples de sites grs par Joomla!

Pour vous faire une ide de ce que lon peut obtenir en utilisant Joomla!, nous vous proposons une courte liste de sites rels.

19

joomla.fr, France
Cest le site de rfrence officiel en langue franaise (voyez aussi joomla.fr).

Figure 1.1 http://www.joomla.fr

Travel Shop, Irlande

Un site touristique exploitant un systme de menu original provenant de joomlart.com.

Figure 1.2 http://www.travelshopireland.com

20

Mrio Moraes, Brsil

Le site Web officiel dun coureur automobile. Le template accueille de nombreux objets anims au format Flash.

Figure 1.3 http://www.mmoraes.com

Frank Ldtke, Allemagne

Un bel exemple de combinaison de Joomla! avec la galerie de photos Coppermine.

Figure 1.4 http://www.livinggallery.de/

21

Feuille blanche, France

Le site de deux crateurs graphiques.

Figure 1.5 http://www.feuilleblanche.com

Urth.tv, USA
Un site citoyen sadressant au monde entier !

Figure 1.6 http://www.urth.tv

22

unric.org, Europe
Les Nations Unies ont adopt Joomla!. Dans ce cas prcis, il fallait grer treize langues, et certaines devaient saffi cher en mme temps sur la mme page.

Figure 1.7 http://www.unric.org

porsche.com.br, Brsil
Pour fi nir en beaut, voici le site de limportateur brsilien des voitures Porsche. Il a accompagn toute lhistoire de Joomla! depuis lpoque de Mambo et vient de basculer vers la version Joomla!1.5.

Figure 1.8 http://www.porsche.com.br Vous trouverez dautres sites propulss par Joomla! en vous rendant dans la section Forum du site www.joomla.org. Cherchez le terme Showcase .

23

CHAPITRE 2 : INSTALLATION
Installer Joomla! ne prend que cinq minutes la premire fois et mme moins ensuite. Mais pour russir cette installation, il faut dabord mettre en place localement une sorte dInternet priv runissant un serveur Web, avec support du langage PHP, et un systme de gestion de base de donnes (SGBD) exploitable par Joomla!. Les fi chiers de Joomla! seront ensuite installs dans cette structure de dossiers puis confi gurs via un installateur interface Web. Il sagit dun exemple typique denvironnement client-serveur.

2.1 Les systmes client-serveur 2.2 Prrequis techniques pour Joomla! 2.3 lments requis pour installer un systme Joomla! 2.4 Dabord localement 2.5 Prparation locale de linfrastructure dexploitation 2.6 Sur un serveur virtuel en rseau 2.7 Installation de Joomla!

2.1 Les systmes client-serveur

Pour vous faire une ide gnrale de ce qui se passe en coulisses, parcourons les tapes successives de laccs dun ordinateur client un site Web propuls par Joomla! : 1. 2. 3. 4. 5. 6. 7. 8. 9. tablissement dune connexion Internet via un fournisseur daccs. Saisie de ladresse Web (URL) dans le navigateur client. Entre en contact du navigateur avec le serveur Web. Le serveur Web retransmet une requte son interprteur de langage PHP qui excute les commandes PHP appropries Joomla!. Linterprteur PHP transmet les donnes dentre la base de donnes. Linterprteur PHP gnre du code dhabillage HTML ou XHTML (selon le modle/template utilis) et retransmet les donnes de la base avec lhabillage au serveur Web. Le serveur Web envoie la page complte au navigateur du client. Le navigateur interprte les balises de style HTML et CSS et intgre les donnes externes (images, lments Flash, etc.) en allant les chercher un un auprs du serveur Web. Pendant le chargement des diffrentes ressources, le navigateur ralise le plus fi dlement possible le rendu de la page, cest--dire son affichage.

Vous comprenez que laffi chage dune page dun site Web Joomla! suit de nombreuses tapes. Plusieurs dentre elles ne concernent dailleurs pas Joomla! lui-mme.

2.2 Prrequis techniques pour Joomla!

Joomla! ncessite la configuration suivante :

Un serveur Web oprationnel, par exemple Apache partir de la version 1.13.19 ou Microsoft IIS. Le langage de script PHP partir de la version PHP 4.3. Le support de MySQL et de Zlib intgr PHP. Zlib est une librairie de fonctions qui permet PHP de lire des paquets de donnes compresses au format ZIP. Le systme de gestion de bases de donnes MySQL partir de la version 3.23.x. Dans le cadre de lutilisation du jeu de caractres Unicode, il faut utiliser MySQL partir de la version 4.1.x.

24

2.3 lments requis pour installer un systme Joomla!

Il vous faut dabord runir tous les lments indiqus ci-dessus pour mettre en place un systme Joomla!. Vous disposez normalement dau moins un PC avec un navigateur Web et une connexion Internet. Au niveau du serveur Web, du langage PHP et de la base de donnes, de nombreux choix sont possibles. Vous pouvez en effet :

installer la totalit du systme localement sur votre PC ; implanter le systme sur un intranet dentreprise ou un serveur de lentreprise ; louer un serveur virtuel (partag) un fournisseur daccs ; louer ou acheter un serveur ddi un fournisseur daccs (avec accs la racine).

Mieux encore, vous pouvez :

installer le serveur Web et le gestionnaire de bases de donnes sur des machines distinctes.

Vous pouvez enfi n exploiter :

diffrentes marques de serveurs Web ; diffrentes versions de linterprteur PHP ; diffrentes versions du gestionnaire de bases de donnes MySQL.

De plus, tous ces composants sont utilisables sur plusieurs systmes dexploitation. Cette grande libert dans le choix des ressources techniques peut effrayer au premier contact. Passons donc en revue quelques situations typiques.

2.3.1 Environnement de test local

Vous tes chez vous ou votre bureau et vous voulez construire un site Joomla!.

Systme dexploitation Windows

Variante 1
Dans Windows XP Professionnel et Vista Ultimate, vous disposez en standard dun serveur Web appel Internet Information Server (IIS). Il ne reste plus qu y ajouter le langage PHP et un gestionnaire de bases de donnes.

Variante 2
Vous installez un paquetage prconfi gur de type XAMPP et vous pouvez immdiatement travailler.

Systme dexploitation Linux

Dans ce cas, tout dpend de la distribution. Toutes permettent dinstaller facilement via la souris les paquets logiciels de Apache, PHP et MySQL. Dans certaines distributions, ces diffrents composants sont installs ds le dpart.
25

Variante 1
Vous vous servez des programmes qui ont t installs avec la distribution.

Variante 2
Vous installez un paquetage prconfi gur de type XAMPP (LAMPP dans ce cas) et vous pouvez immdiatement travailler.

Systme dexploitation Mac OS X

Vous disposez en standard dun serveur Web (Apache), mais il faut encore lactiver. En revanche, le langage PHP nest pas install. Il nexiste aucune version de PHP offi cielle pour Mac OS X. Vous pouvez en revanche mettre en place un module Apache-PHP. Il existe galement des versions de MySQL pour Mac OS X, que vous devrez tlcharger.

Variante 1
Vous utilisez le serveur Web Apache dj install et vous ajoutez les composants manquants.

Variante 2
Comme dans les deux autres systmes, vous vous procurez le paquetage prconfi gur XAMPP dans sa version Mac OS X. Vous linstallez et cest prt. Dans lenvironnement Mac OS X, vous pouvez prfrer la version ddie qui sappelle MAMPP.

2.3.2 Environnement de production

Vous avez ici aussi plusieurs possibilits.

Serveur virtuel en location

Vous signez un contrat de location de serveur Web auprs dun fournisseur daccs avec une fonction de gestion de bases de donnes, le support du langage PHP et souvent aussi votre propre nom de domaine. Vous disposez alors dun environnement permettant dinstaller Joomla!. Vous devez vrifi er avec votre fournisseur quelles versions de PHP et de MySQL il peut mettre en place. Il arrive que le fournisseur propose Joomla! prinstall avec plusieurs templates. Il ne vous reste plus alors qu activer Joomla! la souris pour en profiter.

Serveur ddi
Vous louez auprs dun fournisseur un serveur ddi et vous y installez un systme dexploitation votre convenance. Vous tes ladministrateur du systme et vous pouvez vous en servir comme si la machine tait pose chez vous ou dans votre bureau.

2.4 Dabord localement

Avant de plonger dans le monde sauvage dInternet, nous vous conseillons de vous entraner la maison sur votre PC. Cela vous offre lavantage de ne pas subir les ventuels ralentissements de votre connexion Internet.
26

Mais vous avez dj peut-tre chez vous un petit rseau reliant plusieurs PC. Vous pouvez alors installer Joomla! sur un PC (qui devient le serveur) et y accder depuis un autre PC (le client). Pour vous pargner de nombreux tlchargements, nous fournissons tous les programmes dont vous avez besoin sur le CD-ROM. Les diffrents paquetages logiciels sont indiqus dans lAnnexe. Ces programmes conviennent une installation locale et vous permettent de raliser tous les exercices prsents dans le livre. Rappelons nanmoins que ces logiciels sont en volution continuelle. Vous pourrez sans doute rcuprer des versions plus rcentes sur les sites Web offi ciels des diffrents composants. Attention: Lorsque vous dploierez Joomla! sur un serveur Web rel (public), vrifi ez que vous installez la version stable la plus rcente et compatible avec vos donnes afi n de profi ter des derniers correctifs de scurit. Ninstallez pas dans ce cas de version prliminaire.

2.5 Prparation locale de linfrastructure dexploitation

Pour installer Joomla! localement sur un PC, vous devez avant tout mettre en place linfrastructure logicielle dont le logiciel a besoin : Apache-MySQL-PHP.

2.5.1 Sous Windows

Windows (XP et Vista) est rput pour sa convivialit et son norme diffusion, dans la mesure o plus de 90 % des PC au monde en sont dots. Les trois applications Apache, MySQL et PHP ne sont pas fournies par Microsoft, puisquelles manent du monde du logiciel libre.

Figure 2.1 Gestion des utilisateurs sous Windows. Vous pouvez installer chacun des trois logiciels lun aprs lautre, mais il existe des paquets prconfigurs qui vous simplifi ent la vie. Sous XP comme sous Vista, vous devez avoir ouvert la session de travail en tant quadministrateur. En cas de doute, ouvrez le module de gestion des utilisateurs par DMARRER > PARAMTRES > PANNEAU DE CONFIGURATION > COMPTES DUTILISATEURS et modifiez vos droits (voir Figure 2.1). Sous Vista, choisissez DMARRER > PANNEAU DE CONFIGURATION > COMPTES DUTILISATEURS ET PROTECTION DES UTILISATEURS.
27

XAMPP pour Windows

XAMPP est un projet de Kai Seidler et Kay Vogelgesang. Ces deux collgues produisent depuis plusieurs annes dj un environnement de dveloppement complet partir des ingrdients Apache, MySQL, PHP, Perl et plusieurs autres extensions appropries puis mettent le fruit de cette synthse disposition sur leur site Web au format ZIP pour plusieurs systmes dexploitation. Cela constitue un norme avantage pour vous comme pour moi, puisque cest Joomla! qui nous intresse ici, et quil nous importe de ne pas perdre de temps avec linfrastructure quil lui faut. Le programme peut mme tre dsinstall par simple clic sur votre PC sous Windows. Passons maintenant aux choses concrtes : linstallation. Commencez par rcuprer le fi chier nomm xampplite-win32-1.6.5 depuis le CD-ROM ou depuis le site Web (http://www.apachefriends.org). Vous dcompressez larchive par double-clic sur le nom de fi chier (voir Figure 2.2). Vous pouvez dsigner directement une autre unit de disque. Le rsultat est une arborescence de dossiers dont la racine se nomme xampplite (voir Figure 2.3).

Figure 2.2 Extraction vers le disque C:

Figure 2.3 Lexplorateur Windows dans Vista. Double-cliquez sur le programme appel xampp-control.exe situ dans le dossier xampplite. Utilisez ensuite les boutons START pour dmarrer Apache, puis MySQL. PHP sera dmarr en mme temps que le serveur en tant que module Apache (voir Figure 2.4). Sachez que XAMPP ne cre aucune entre dans
28

la base de registre de Windows et nutilise aucune variable systme. Il peut arriver que le pare-feu Windows vienne bloquer votre enthousiasme. Il peut par exemple vous avertir que vous essayez de lancer deux serveurs et vous demande de confirmer. Confi rmez que vous ne voulez plus que votre programme soit bloqu par le pare-feu (voir Figure 2.5). Sous Vista, vous devez confirmer dans une seconde bote.

Figure 2.4 Le panneau de commande de xampp-control.exe.

Figure 2.5 Bote davertissement du pare-feu de Windows Vista. Il faut maintenant tester laccessibilit du serveur. Dans votre navigateur Web, saisissez ladresse locale dans lun des deux formats suivants :
http://127.0.0.1/ http://localhost/

Vous devez voir saffi cher la page daccueil de XAMPP. Cliquez sur le lien intitul FRANAIS pour accder la page suivante :
29

Figure 2.6 Page daccueil de XAMPP sous Windows. Le rpertoire racine des documents de votre page daccueil est :
[disque]\xampplite\htdocs

Ce rpertoire contiendra toutes les pages qui devront tre accessibles depuis dautres machines sur Internet. Parcourez le fi chier readme_fr.txt pour connatre les dtails au sujet des mots de passe requis et dcouvrir dventuelles remarques relatives la scurit. La dsinstallation est fort simple. Aprs avoir arrt les deux serveurs, vous effacez le contenu du rpertoire de xampplite. Attention: Si le serveur Web Apache ne russit pas dmarrer depuis XAMPP lite, il est possible quun autre service utilise dj le port 80. Cest par exemple le cas de loutil de tlphonie Skype. Dans les anciennes versions, il occupait le port 80 et empchait ainsi un autre service dy accder. Affi chez les options de Skype pour modifi er le numro de port utilis. Vous pouvez aussi dmarrer XAMPP lite avant Skype.2007

2.5.2 Linux
Sous Linux, les choses sont souvent trs simples. Plusieurs distributions sont dj dotes de confi gurations standardises. Le trio Apache-MySQL-PHP est en gnral dj install et nattend que dtre dmarr. Vous pouvez aussi installer la version Linux de XAMPP. Daprs moi, il est plus logique dinstaller les programmes dorigine un un. Ces installations sont trs simples puisquelles se droulent dans le gestionnaire de paquets.

30

SuSE (10.x), OpenSuSE

Sous SuSE et OpenSuSE, le programme YaST permet de sassurer que Apache, MySQL et PHP sont dj en place. Si ce nest pas le cas, il suffi t de slectionner les paquets correspondants pour installation et de laisser faire YaST. Les paquets logiciels concerns sont les suivants :
apache2, apache2-devel, apache2-mod_php5 mysql, php5-mysql

Reprez ces paquets dans linterface de YaST (voir Figure 2.7) sur les supports de la distribution ou sur des pages Web ddis.

Figure 2.7 Le Gestionnaire de paquets YaST. Dmarrez le serveur Web Apache ainsi :
/etc/init.d/apache2 start

Dmarrez ensuite le SGBD MySQL ainsi :

/etc/init.d/mysql start

Vous arrtez les deux programmes en remplaant dans la commande la mention start par stop. La mention help rappelle les paramtres autoriss.

Debian/Ubuntu
Dans le cas de Debian (et de ses drivs, tels que Ubuntu), loutil de gestion dinstallation est apt.
apt-get install [nompaquet]

Les paquets installer sont les suivants :

apache-common. Fichiers de support pour tous les serveurs Apache. php5. Langage de script du ct serveur imbriqu dans le HTML. mysql-common. Fichiers principaux de MySQL (par exemple /etc/mysql/my.cnf). 31

mysql-server. Excutables du serveur de base de donnes.

Vous trouverez ces paquets via apt sur Internet ou sur les CD/DVD de la distribution. Dmarrez ensuite Apache puis MySQL par les deux commandes indiques plus haut pour SuSE. Mise en place dun serveur chez un fournisseur daccs Lorsque vous avez dcid de louer linfrastructure dun site Web chez un fournisseur, vous avez normalement le choix entre plusieurs distributions Linux et un accs en mode Commande au systme. Le systme est normalement prconfigur avec tous les paquets logiciels et fi chiers de confi guration ncessaires. Le paramtrage se base en gnral sur un outil ddi interface Web comme Confixx ou Plesk qui permet notamment de dmarrer, darrter et de configurer les services Apache et MySQL.

2.6 Sur un serveur virtuel en rseau

Ce thme est rendu plus complexe, en raison de la grande disparit des confi gurations proposes par les nombreux hbergeurs de sites Web, mme si la plupart utilisent le trio gagnant Apache-PHP-MySQL. Tous nutilisent pas la mme version et les outils dadministration de lespace Web sont trs divers (Confixx, Visas, etc.). Voici les principaux points surveiller :

l'tat actif ventuel dun mode PHP scuris (Safe Mode) dans le fi chier php.ini (PHP-Safe) ; l'ventualit dune non-conversion des adresses URL par Apache cause de la dsactivation de sa fonction Rewrite Engine ; les droits d'accs aux sous-dossiers (permissions) qui sont dfi nis autrement sous Linux et sous Windows.

Lapproche qui est en gnral la plus susceptible de vous mener au succs est la suivante : 1. Rcuprez le fi chier Joomla_1.5.x-Stable-fr.zip (la plus rcente version stable) sur votre PC local et dsarchivez le contenu dans un dossier temporaire. 2. Transfrez les fi chiers de larchive par FTP sur le serveur Web dans un dossier accs non restreint. Le nom du dossier est souvent htdocs, public_html ou encore html. Vous pouvez crez un sous-dossier pour Joomla!. La plupart des hbergeurs autorisent le renvoi vers un sous-dossier partir du nom de domaine. Ce nom est capital, car cest celui que devront indiquer les visiteurs de votre site. 3. Vous devez dcouvrir le nom de votre base de donnes. La plupart des hbergeurs mettent une ou plusieurs bases de donnes disposition dans le cadre du forfait. Parfois les identifi ants dadministrateur et de base et les mots de passe sont fi gs, parfois ils doivent tre crs, et parfois ils existent dj, mais sont personnalisables. Vous intervenez ce niveau via un outil interface Web. La figure suivante donne un exemple dun tel outil. Notez ces informations qui vous seront ncessaires pour installer Joomla!.

32

Figure 2.8 Exemple doutil deconfiguration Web. Une fois que vous avez transfr les donnes sur le serveur et disposez des informations daccs ( la base notamment), vous pouvez vous engager dans linstallation de Joomla!.

2.7 Installation de Joomla!

Pour installer Joomla!, procurez-vous la plus rcente version stable, par exemple Joomla_1.5.xStable.tar.gz. Stockez le fichier dans un dossier spcifi que de votre systme.

2.7.1 Choix du dossier dinstallation

Vous devez choisir entre implanter le programme Joomla! directement dans le dossier racine des documents du serveur (/xampplite/htdocs) ou dans un sous-dossier. Le choix infl ue sur ladresse publique que devront saisir les visiteurs pour accder votre page daccueil.

Exemple
Si vous installez Joomla! directement dans le sous-dossier /htdocs, vous accdez votre page d accueil en indiquant le nom de votre domaine du style http://www.monsite.fr (ou http://localhost/ pour les essais locaux). Si vous crez un sous-dossier dans /htdocs/ du type /htdocs/Joomla150/, puis y implantez les fi chiers de larchive, il faut ensuite indiquer http://localhost/Joomla150/ pour accder au site. Pour les essais locaux, cela ne pose pas de problme, mais ladresse est moins facile mmoriser pour les visiteurs. Votre environnement dexploitation local xampplite sous Windows installe quelques fichiers HTML et quelques sous-dossiers dans /htdocs, par exemple pour la page daccueil de xampplite (voir Figure 2.6). Il en va de mme sous Linux, avec dinfi mes variations selon la distribution et les rglages du serveur.

Rpertoire racine
Nous vous proposons dopter pour lapproche du sous-dossier. Crez dans /xampplite/htdocs, un sous-dossier nomm joomla150. Sous Windows, utilisez lExplorateur et, sous Linux, la ligne de commandes ou votre navigateur de fi chiers prfr (Konqueror, Nautilus, Midnight Commander) :
33

[Installation de XAMPP]/htdocs/joomla150/

Aprs cette opration, la structure arborescente devrait se prsenter ainsi (exemple sous Windows en Figure 2.9).

Figure 2.9 Le dossier devant recevoir Joomla!. Si vous tentez maintenant daccder ladresse locale http://localhost/joomla150/, vous voyez avec Xampplite une page vide (voir Figure 2.10).

Figure 2.10 Affichage du sous-dossier vide par Apache. Sous Linux ou si la confi guration est diffrente, vous recevrez peut-tre un message vous indiquant que vous navez pas accs en criture ce dossier. Cette situation dpend de la configuration du serveur Web qui empche, pour des raisons de scurit, laffi chage du contenu des dossiers. En effet, un attaquant potentiel pourrait se servir de ces informations pour prparer un mauvais coup. Souvent, vous ne pouvez mme pas au dpart aller modifi er le paramtre dans le serveur Web Apache car le fi chier est protg. Si vous avez supprim cette interdiction, laissez malgr tout la protection prcdente en vigueur (masquage des contenus des dossiers).

Dsarchivage
Vous pouvez maintenant extraire les fi chiers de larchive (paquet) Joomla! et les placer dans le sousdossier que vous venez de crer (y compris tous les sous-dossiers, tels quels). Le fichier darchive est au format Tarball compress. Sous Windows XP ou Vista, vous avez doffi ce accs au contenu dans
34

lexplorateur. Dans les anciennes versions de Windows, vous devez disposer dun utilitaire du style TUGZip (www.tugzip.de). Cette structure est la mme quelle que soit la plate-forme, seul laffi chage pouvant varier. La fi gure suivante montre la fentre dun logiciel client FTP. Le volet gauche est le disque local et le volet est le serveur Web.

Installateur Web de Joomla!

partir de maintenant, tout va aller trs vite, car Joomla! est dot dun installateur fonctionnant dans votre navigateur. Allez ladresse http://localhost/Joomla150/.

Figure 2.11 Les fichiers de Joomla! installs.

Figure 2.12 Transfert de Joomla! via FTP sur un serveur.

35

tape 1 Choix de la langue

Linstallateur vous demande en franais de choisir votre langue. Vous tes face la premire des sept tapes de linstallation. Une fois votre choix fait, cliquez sur le bouton SUIVANT en haut droite (voir Figure 2.13).

Figure 2.13 Installateur Choix de la langue.

tape 2 Vrification de prinstallation

Vous passez alors ltape de vrifi cation (voir Figure 2.14). Cette prcaution permet de vrifi er que lenvironnement logiciel convient linstallation de Joomla!.

Figure 2.14 Installateur Vrification de prinstallation. Si vous voyez une grande majorit de tmoins verts, cest bon signe. Les dtails varieront selon votre confi guration. Linstallateur de Joomla! tient comptes des options de confi guration du serveur Web Apache, de PHP et du systme dexploitation. Vous devez notamment vous souciez des droits daccs en criture si vous utilisez un systme de type Unix (Linux, Mac OS X). Intressez-vous particulirement au fichier nomm configuration.php qui est gnr en fin dinstallation avec des valeurs spcifiques. Si linstallateur na pas le droit dcrire dans le dossier concern, Joomla! ne peut pas gnrer ce fichier et linstallation choue. Prenez donc le temps de confi gurer correctement les droits daccs. Vous pouvez alors cliquer sur le bouton VRIFIER NOUVEAU.
36

Attention: Tous les systmes dexploitation actuels (Windows, Linux, Mac OS X) sont multi-utilisateurs et tous disposent dun mcanisme de contrle des accs aux fi chiers et aux dossiers utilisant plusieurs niveaux : lecture, criture, lecture/excution, modifi cation et accs complet. Les dtails des droits daccs varient dun systme lautre. Dans la ligne des systmes Windows, une ligne de dmarcation peut tre trace entre les systmes antrieurs Windows NT (dont Windows 98 et Me) et les systmes postrieurs NT (XP et Vista). partir de NT, les dossiers, les fi chiers et les processus sont grs par des listes de contrle daccs ACL. Si ces listes ACL ne sont pas dfinies, tous les utilisateurs ont un accs complet tous les objets. Voil pourquoi vous naurez au dpart aucun problme pour exploiter XAMPP et Joomla! sur un tel systme. En revanche, dans Vista, la scurit a t renforce pour lexcution des processus. Cest pourquoi vous devez en gnral autoriser explicitement lexcution dun serveur Web et dun gestionnaire de bases de donnes. Dans les systmes de style Unix (Linux, Mac OS X) les droits daccs sont grs pour trois groupes dutilisateurs (le propritaire, son groupe et les autres) avec les niveaux lecture, criture et excution. Vous modifi ez les attributs de droits daccs des utilisateurs au moyen de la commande chown et les droits daccs aux fi chiers au moyen de la commande chmod. Votre outil de transfert FTP dispose de ces deux commandes (il suffit en gnral de faire un clic droit sur le nom du fi chier dont vous voulez modifier les droits). Pour une explication complte, voyez par exemple la page suivante : http://fr.wikipedia.org/wiki/Permissions_Unix Dans le cas dun serveur partag chez un fournisseur daccs, il peut arriver que le serveur Web soit confi gur avec des droits et des permissions diffrents de ceux dont dispose lutilisateur de FTP. Lorsque vous transfrez un fi chier, il hrite des droits daccs du serveur Web (par exemple avec lutilisateur wwwrun). Il peut arriver que vous ne puissiez plus ensuite supprimer le fichier partir de votre compte dutilisateur FTP (par exemple, Bertrand). La raison en est que lutilisateur FTP nest pas dans le mme groupe dutilisateurs que le serveur Web. Si vous optez pour la solution rapide XAMPP lite sous Windows, vous devriez obtenir le mme rsultat que dans les fi gures de ce livre. Cliquez sur le bouton SUIVANT pour passer ltape de la licence.

tape 3 Licence
Tout logiciel est diffus avec une licence. Dans le cas de Joomla!, il sagit de la licence de logiciel libre GNU/GPL dans sa version 2.0 (voir Figure 2.15). Attention: Vous trouverez une traduction franaise non offi cielle de la licence ladresse suivante : http://www.linux-france.org/article/ these/gpl.html Prenez le temps de parcourir ce texte. Il sagit dun des textes les plus connus dans le monde du logiciel.

Figure 2.15 Installateur Licence.

37

tape 4 Base de donnes

Ltape suivante propose un formulaire concernant les paramtres daccs la base de donnes (voir Figure 2.14). Dans lenvironnement xampplite, vous pouvez exploiter autant de bases que ncessaire. Un utilisateur existe avec le nom root sans mot de passe. Dans le SGBD MySQL, lutilisateur nomm root est ladministrateur. Il a plein accs ce systme. Linstallation sans dfi nir de mot de passe est une brche de scurit qui nest acceptable que lors dune installation locale, en vue de prendre en main le systme rapidement. Une fois votre site prt tre publi, vous devez absolument le protger au moyen dun mot de passe (http://localhost/security/). Uniquement dans le cadre dune installation locale, vous pouvez spcifi er les valeurs suivantes :

nom du serveur : localhost ; nom d'utilisateur : root ; mot de passe : [laisser vide mais attention la scurit !].

Il vous reste encore choisir le nom de la base de donnes. Dans une installation locale XAMPP, vous pouvez dfi nir plusieurs bases auxquelles lutilisateur root aura accs. Dans un environnement de production sur un serveur distant, une limite au nombre de bases de donnes vous sera sans doute impose. De plus, les paramtres daccs vos bases sont prdfi nies par le fournisseur daccs. Nous pouvons dans notre situation indiquer le nom dune base qui nexiste pas encore (joomla150). Cliquez ensuite dans le triangle vert des paramtres avancs.

Figure 2.16 Installateur Configuration de la base de donnes. Vous pouvez alors choisir de supprimer ou de sauvegarder les tables de donnes dune installation Joomla! antrieure en remplaant le prfi xe actuel par le prfixe bak_. Le prfixe de table MySQL est un paramtre trs pratique. Il est ajout en dbut de nom de toutes les tables gnres par linstallateur ; il est ainsi possible de distinguer les tables des diffrentes bases. Par dfaut, linstallateur propose jos_.
38

Ce prfixe sert notamment lorsque lhbergeur ne fournit quune seule base de donnes. Dans ce cas, le prfixe est le seul moyen de distinguer les tables lorsque vous crez deux sites Web avec Joomla!. Vous pouvez ainsi jongler avec les tables, comme dans jos_dubois_ ou jos_dupont_. Conservez le prfixe propos, jos_. Ce prfixe permet ensuite de distinguer les donnes sauvegardes (bak_).

tape 5 Configuration FTP

partir de la version 1.5, Joomla! permet dviter les problmes de droits daccs provoqus par un ventuel mode scuris PHP (Safe Mode). Vous pouvez dornavant exploiter les fonctions FTP de PHP pour transfrer et grer les donnes distantes. Cela ne vous concerne pas dans le cas dune installation locale de XAMPP lite. En revanche, si vous comptez installer Joomla! sur un serveur Web partag, spcifi ez les paramtres FTP ici, tels que vous les a transmis votre fournisseur. Sil autorise cette fonction, vous avez galement pour des raisons de scurit tout intrt crer des comptes FTP diffrents pour vous en tant quutilisateur et pour Joomla!. Nautorisez le compte FTP Joomla! que pour le dossier Joomla! correspondant (voir Figure 2.17).

Figure 2.17 Installateur Configuration FTP. tape 6 Configuration du site Cette importante tape de confi guration de Joomla! compte trois parties. Dans la premire partie, vous devez fournir le nom de votre site Web. Il apparatra par exemple dans la barre de titre du navigateur de vos visiteurs. Il est galement utilis en diffrents autres endroits, par exemple dans les courriels de confi rmation dinscription. Dans notre exemple, nous choisissons le nom Joomla! 1.5.0 (voir Figure 2.18).

39

Figure 2.18 Installateur Configuration du site (mot de passe). Dans la deuxime phase, vous devez dfi nir les chemins daccs au site Web, ladresse de messagerie de ladministrateur et son mot de passe. Notez bien ce mot de passe et placez votre note dans un endroit sr (ne la collez pas sur lcran ni sous le clavier). Dans la dernire phase, vous pouvez dcider quelles donnes doivent tre disponibles ds le dpart dans Joomla! (voir Figure 2.19).

Figure 2.19 Installateur Configuration du site (donnes dexemples).

Installation des donnes dexemples

Linstallateur de Joomla! vous invite fortement installer les donnes dexemples pour peupler votre site Web initial. Cela vous permettra dexplorer le programme sans crainte.

Charger le script SQL local

Lorsque vous avez construit un site Web Joomla! local, vous aurez besoin de transfrer les donnes vers votre site sur Internet. Cette option permet dindiquer les fi chiers .sql de la version locale qui contiennent vos donnes Joomla!. Le contenu des fi chiers doit concider parfaitement avec le schma de base de donnes de Joomla! 1.5 et utiliser le codage de caractres UTF8. Nous donnons dautres dtails ce sujet dans lAnnexe.

Charger le script de migration

Cette option permet de convertir une ancienne installation Joomla! 1.0.x vers la version 1.5. Nous dcrivons la migration dans lAnnexe. Vous constatez que linstallateur propose par dfaut dinstaller les donnes dexemples. Acceptez cette option car nous dcouvrirons Joomla! en nous servant de ces exemples. Cliquez donc sur le bouton INSTALLER LES DONNES DEXEMPLES. Linstallateur sexcute puis modifie laffichage (voir Figure 2.20). Observez bien car il nest pas trs vident de sassurer que lopration a russi. Le bouton disparat au profit dune petite fentre contenant du texte.

40

Figure 2.20 Installateur Confirmation dinstallation des donnes dexemples. Il ne reste plus qu cliquer sur le bouton SUIVANT pour que vos donnes soient prises en compte.

tape 7 Terminer
Cette dernire tape vous flicite pour avoir russi linstallation (voir Figure 2.21). Lisez bien le message crit en rouge et en gras. Vous devez absolument aller supprimer le sous-dossier nomm installation (dans xampplite\htdocs\joomla150). Si vous ne le faites pas, votre site Web ne pourra pas fonctionner. Astuces: Les lecteurs qui dsireraient voir comment construire un site Web partir de zro trouveront une rponse au Chapitre 16.

Info: Un fi chier nomm confi guration.php a t gnr dans votre dossier joomla150. Si vous devez relancer linstallation, il faut supprimer ce fichier avant de tenter de supprimer le dossier principal dinstallation. Cela permet linstallateur de redmarrer partir de zro lorsque vous demanderez accder depuis votre navigateur ladresse laquelle se situent les donnes Joomla!. Votre identifi ant dadministrateur est toujours admin. Vous avez bien not le mot de passe ? Info: Si vous avez oubli ou perdu le mot de passe, lAnnexe donne une solution.

Figure 2.21 Installateur Terminer.

41

Linstallation est termine. Vous pouvez maintenant personnaliser votre site et y insrer des contenus. Vous avez le choix entre accder la page daccueil (bouton SITE en haut droite) ou la partie administrative (bouton ADMIN). Allez donc dabord voir quoi ressemble la partie publique de votre site en cliquant sur SITE. Si vous navez pas encore supprim le sous-dossier installation, un message vous redemande de le faire. Vous pouvez ensuite actualiser la page. Le rsultat est tout fait encourageant (voir Figure 2.22). Prenez possession de votre proprit, cliquez, trouvez vos repres. Ce site dexemple prsente de nombreuses fonctions de Joomla!. Nous allons les dcouvrir une une dans le chapitre suivant.

Figure 2.22 La page daccueil du site juste aprs installation de Joomla!.

Fichier attach Joomla_1.5.1-Stable-Full_Package.zip Taille 5.2 Mo

42

CHAPITRE 3 : VISITE GUIDE DU SITE DEXEMPLE

Votre site est install et paramtr. Nous pouvons maintenant aller voir ce quil permet denvisager. Au premier coup doeil, la page peut sembler assez charge. Il sagit de la page publique (Frontend). Il existe aussi une page daccueil pour ladministration (Backend). Seule la partie publique est accessible aux visiteurs, comme une boutique. La partie arrire, latelier, nest connue que des administrateurs, auteurs et rdacteurs de contenus. 3.1 Partie publique Frontend 3.2 Administration (Backend)

3.1 Partie publique Frontend

Si vous analysez la page, vous dcouvrez des rgions distinctes qui correspondent autant de fonctions. Le choix dimplanter des donnes dexemples lors de linstallation permet de visualiser leffet de ces diffrentes fonctions. Pour simplifier la dcouverte, nous avons ajout des lgendes aux diffrentes sections, dans la fi gure suivante.

Figure 3.1 Structure de la page daccueil du site dexemple.

43

Lart de la conception Web a comme objectif de permettre au visiteur de reprer le plus vite possible les lments essentiels, en ignorant dans un premier temps ce qui lest moins, en somme dorganiser le placement des informations de faon logique, agrable et facile apprhender. Le rsultat est toujours un compromis entre richesse fonctionnelle et esthtique. Larchitecture dune page Web peut faire penser un journal ou un portail comme celui de Yahoo! ou de Wanadoo. Des colonnes gauche et droite proposent des encadrs (modules) aux contenus prdtermins. La partie centrale (Main Body) reoit les informations. La mise en page est dfinie par un template (modle). Vous pouvez changer de modle sans changer de contenu ou bien modifier le template courant, souplesse que la presse quotidienne envie au Web. Dcouvrons la maquette dexemple. Elle contient cinq catgories de sections :

des menus ; des contenus ; des publicits ; des fonctions complmentaires ; des lments dcoratifs.

3.1.1 Les menus

Les menus doivent permettre au visiteur de naviguer sur le site le plus aisment possible. Il existe des menus diffrents selon les besoins. Joomla! propose dans lexemple six menus prdfinis, et vous pouvez en ajouter dautres ou en masquer certains. vrai dire, un des menus nest pas visible dans lexemple. Il sagit du type usermenu, qui nest visible que par les utilisateurs enregistrs une fois quils ont ouvert une session.

Le menu suprieur (topmenu)

Figure 3.2 Le menu suprieur. Joomla! propose tout en haut de page un menu horizontal dont le nom technique est topmenu (voir Figure 3.2). Il doit permettre au visiteur daccder depuis nimporte quelle page aux contenus essentiels : retour la page daccueil, actualits, contact et liens.

Le menu principal (mainmenu)

Le menu principal (nom technique mainmenu) est le moyen de navigation principal de toute page (voir Figure 3.3). Ce menu doit toujours proposer un lien pour revenir la page daccueil (Home) et se trouver au mme endroit sur toutes les pages. Il participe au confort de la visite en vitant lutilisateur de se perdre dans le ddale de pages. Vous disposez aussi de la technique des miettes de pain. (breadcrumbs) Elle consiste en liens dposs sur les pages pour revenir en arrire dans la navigation ou se diriger vers des sections apparentes la page actuelle.

44

Figure 3.3 Le menu principal.

Les menus complmentaires (othermenu)

Vous pouvez ajouter un menu complmentaire (nom technique othermenu) en diffrents points prdfinis (des positions de modules). Lajout de tels menus dpend des particularits des pages. Un site de e-commerce aura par exemple souvent besoin de menus complmentaires.

Figure 3.4 Un menu complmentaire.

3.1.2 Les contenus

Les voici enfin, ces contenus ! Ce sont les informations diffuser et administrer.

Quest-ce quun contenu ?

Un contenu peut prendre la forme statique dun communiqu, dun article rdactionnel ou dune page dexplications. Il peut aussi sagir de donnes gnres la demande, donc dynamiques, comme les rsultats dune recherche dans Google, une liste darticles dans un cybermagasin ou un site de vente aux enchres. Les contenus peuvent aussi tre modifiables par tout visiteur. Cest le cas de lencyclopdie libre Wikipedia (http://www.wikipedia.fr/) dont lapproche communautaire se nomme dailleurs Wiki. Cette libert de modifier nimporte quel contenu semble jusqu prsent fonctionner. Personne ne
45

tente de rdiger ni de modifier du contenu sans avoir les comptences requises (hormis quelques dbats passionns relatifs la structure ou aux contenus) Lexact contraire de lapproche Wiki est le contenu statique. Une fois rdig, il reste valable tel quel pendant une priode de temps assez longue, comme un livre imprim. Si le sujet abord est en volution perptuelle (comme cest le cas de ce livre), certains aspects du contenu statique deviennent rapidement obsoltes. Il offre nanmoins lavantage de constituer un point de rfrence et une prsentation complte et didactique du thme. Lauteur de contenus doit les mettre jour, ce qui constitue une forme de gestion de contenus, les outils tant dans ce cas par exemple Joomla! et OpenOffice.org. Les prospectus, dpliants, communiqus dentreprise et modes demploi sont par nature statiques. Ils sont destins documenter un objet concret ou un vnement et deviennent obsoltes lorsque lobjet nest plus en usage ou que lvnement est pass. Les anciens sites Web ne proposaient que des contenus statiques, mais Internet acclre le temps. Ce qui est tolr, voire souhaitable, pour un livre, une notice et tout autre document imprim (ce qui y est dcrit devient un lot de connaissances partags entre tous les lecteurs, une source en termes de formation et de recrutement) sera considr comme inacceptable sur un site Web. Il est trs dommageable pour limage dune entreprise de proposer un site Web statique dont les contenus nont pas volu depuis des annes, avec un joli bouton Powered by... menant un logiciel de cration qui na plus cours depuis des lustres. Les possibilits de mise en forme des contenus sont trs varies et dpendent dabord des contraintes de bande passante (vitesse daccs), des capacits du terminal (ordinateur, assistant personnel, tlphone), donc des possibilits du visiteur. Vous devez par consquence vous soucier dabord de votre cible daudience. Comment la dterminer ? Une rgle trs simple simpose : Lessentiel, cest le contenu ! Cest le contenu qui fait laudience. Les agences de publicit Web sourient de ce postulat puis retournent leur conception de sites Web la chane. Aprs tout, les milliards dpenss en publicit pour des pinards surgels et des automobiles sont la meilleure preuve quil est possible de communiquer effi cacement sans attirer lattention par la qualit du contenu. Le principe consistant considrer le contenu comme dterminant reste valable, lexprience le prouve. Si vous navez rien dire ni proposer, personne naura envie de vous lire ni de vous couter si vous ne comptez pas consacrer des millions attirer lattention par la publicit. Cest peine perdue que de peaufiner laspect visuel de vos pages pour le plus grand nombre de priphriques possible si ces pages sont quasi vides. Personne ne viendra vous voir. Attention Rflchissez srieusement la teneur de vos contenus ! Une fois publis, ils vont devenir accessibles au monde entier et chacun peut se retourner contre leur auteur. Vous pourriez devenir la cible de procs, des critiques de vos collgues et autres pripties dsagrables. Mais cette communication plantaire est aussi un formidable atout : tout le monde peut y accder, ragir et prendre contact avec vous. Une opportunit incomparable ! Tenez compte de ces deux points lorsque vous rdigez tous vos contenus.
46

Premire page ou page daccueil (Frontpage)

Cest sur cette page que sont prsents les articles mis en vedette.

Figure 3.5 La page daccueil dun site. Tout contenu a comme attributs le nom de lauteur, la date de rdaction, le titre, le chapeau (introduction) et parfois des illustrations. Le chapeau doit tre rdig pour donner envie au visiteur de lire la suite en cliquant sur le lien automatique Lire la suite.... chaque article peuvent tre associes plusieurs autres commandes : imprimer, accder au fichier PDF, envoyer comme courriel un ami, etc.

Derniers articles/Articles les plus consults

Les articles peuvent se prsenter sous diffrentes formes mais, dans tous les cas, les visiteurs sintressent dabord aux plus rcentes informations et celles qui sont les plus lues (voir Figure 3.6).

Figure 3.6 Derniers articles/Articles les plus consults.

47

Le modle dexemple prvoit une section dans laquelle sont affi chs les titres des cinq articles les plus rcents (LATEST NEWS) et une autre qui Affiche les titres des cinq articles les plus consults (POPULAR). Joomla! gre en effet des compteurs de lecture pour tous les articles qui sont incrments lors de chaque accs lenregistrement dun contenu dans la base de donnes.

3.1.3 La publicit
Si votre site gnre assez daffluence par lintrt de ses contenus, vous pouvez envisager de louer un espace publicitaire. La principale forme de publicit Web est la bannire, une image rectangulaire litalienne (plus large que haute) au format .GIF, .JPG, .PNG ou .SWF. Lattrait visuel de la bannire doit inviter le visiteur cliquer sur limage pour se rendre sur le site de lannonceur, et donc quitter le vtre. Si vous acceptez cela, il suffit dutiliser la section rserve cet effet dans le modle de page en laissant clairement comprendre quil sagit dune publicit.

Section de bannire
La section de bannire accepte des liens texte (voir Figure 3.7) ou des graphiques (voir Figure 3.8). Le format de bannire graphique devenu standard est un bandeau de 468 pixels de large sur 60 pixels de haut.

3.1.4 Les fonctions

Les fonctions dun site Web sont les lments interactifs. Dans Joomla!, elles correspondent des modules. Un module est un lment qui occupe un certain espace sur les pages et qui remplit une certaine fonction dynamique.

Figure 3.7 La section de bannire avec des liens texte.

48

Figure 3.8 La section de bannire avec une bannire graphique.

Section de connexion (Login Form)

Ce module permet de trier les visiteurs du site en deux catgories : ceux qui restent anonymes, et ceux qui dsirent devenir utilisateurs rguliers et qui ont alors accs la partie privative du site. Ces utilisateurs doivent pouvoir se faire connatre en crant un compte (en senregistrant) puis pouvoir ouvrir une session lors de leurs prochaines visites. Il faut aussi prvoir le cas des utilisateurs qui oublient leur mot de passe. Le module Login prend en charge toutes ces situations.

Figure 3.9 Le module douverture de session Login Form.

Module de sondage (Polls)

Puisque vos contenus sont a priori cibls, il est intressant de demander rgulirement vos visiteurs de donner leur avis sur un sujet qui les concerne. Cest la solution la plus simple pour savoir notamment ce quils pensent de votre site.

Figure 3.10 Le module de sondage (Polls). Joomla! intgre un module de sondage qui Affiche un pav sur la page daccueil.

49

Le module de tmoin de prsence (Whos online ?)

Cet autre module est clairement orient communaut. Le visiteur apprcie de savoir combien de personnes sont actuellement en train de visiter le mme site. Les visiteurs anonymes sont distingus des utilisateurs enregistrs.

Figure 3.11 Le module de tmoin de prsence (Whos online ?). Rflchissez avant dactiver laffichage de ce genre de module sur votre site. Si vous prtendez dans le contenu que vous tes site franais dchanges de sonneries pour portables le plus important, et que les visiteurs voient quils sont seuls sur le site, vous perdez toute crdibilit et donc toute chance de raliser votre rve. En revanche, si vous avez presque en permanence 10 20 visiteurs en ligne, le fait de le signaler augmente lintrt du site et son dynamisme.

Fils dactualit (NewsFeeds)

Les fils dactualit sont de plus en plus courants. Il sagit de slections de vos contenus pouvant tre envoys ceux qui sy abonnent. Cest en quelque sorte du contenu sans son habillage. Le module dabonnement Syndicate sait exploiter plusieurs standards de Feeds. Nous en reparlons au Chapitre 10.

Figure 3.12 Le module dabonnement Syndicate.

Le champ de recherche
Un autre lment systmatique que tout visiteur sattend trouver sur votre site est la fonction de recherche locale. Cette fonction est souvent disponible sur les sites Web, mais il nest pas rare quelle soit incomplte, cest--dire quelle ne scrute pas tous les contenus. Dans Joomla!, absolument toutes les pages sont prises en compte. Il suffit de cliquer dans le champ de saisie, dindiquer le critre et de valider avec la touche ENTRE. Vous obtenez en rponse une liste de liens dans lesquels le critre est mis en exergue.

Figure 3.13 Le module de recherche.

50

3.1.5 Les lments dcoratifs

Aprs avoir dcouvert les contenus, les modules et les fonctions, voyons la partie visuelle, celle qui donne son identit, sa personnalit au site, quil sagisse dune entreprise ou dun particulier. Laspect visuel est dtermin par le modle (template) qui joue le rle dune structure invisible dans laquelle sont verss les contenus et les modules des positions prdfinies. afin que les prfrences de chacun soient satisfaites, le modle en vigueur sur un site peut tre chang avec les mmes contenus. Vous pouvez par exemple adopter un modle en hiver et un autre en t ou un modle particulier pendant la coupe du monde de football. Nous abordons la cration des modles au Chapitre 13. Lessentiel dun modle est de dfinir des zones pour les contenus, une combinaison de couleurs, un ou plusieurs logos, un choix de polices pour les textes, le tout en sorte doffrir un rsultat cohrent et attrayant. Le modle dexemple comporte deux logos et un pied de page.

Figure 3.14 Exemple de logo.

3.1.6 Le point de vue global

Aprs ce tour dhorizon concret, vous devinez sans doute que la maintenance et la mise jour dun tel site peuvent reprsenter un travail non ngligeable. Joomla! simplifi e ces tches autant que faire se peut. Lessentiel est de conserver un point de vue global sur le site.

3.2 Administration (Backend)

Admin Administrator Backend Joomla! Kapitel 3

Ladministration du site se droule dans la partie arrire (Backend) qui est une sorte de site bis appel Joomla! Administration. Vous accdez la page daccueil de ladministration par ladresse suivante :
[NomDomaine]/administrator/

Dans le cas de linstallation locale de notre exemple, ladresse relle devient :

http://localhost/joomla150/administrator/

51

Figure 3.15 Ouverture de session pour ladministration de Joomla!. Comme nom, indiquez admin. Comme mot de passe, saisissez celui gnr par linstallateur ou choisi par vous pendant linstallation (dernire tape de linstallation). La page daccueil propos une barre de menus, une barre doutils avec des boutons et des onglets de pages doptions, cest--dire une interface conforme aux canons actuels de lergonomie. Vous remarquerez que linterface nest que partiellement en franais.

Figure 3.16 Page daccueil de linterface dadministration de Joomla!. Nous verrons dans au prochain chapitre comment intervenir sur les langues de linterface. Les donnes dexemples de la partie publique resteront en anglais, car elles ne sont pas encore traduites et seront trs vite remplaces par vos propres contenus.

52

Attention: Dans un environnement de production, vous devriez protger le dossier suivant par un fichier cach .htaccess :
[InstallJoomla!]/administrator/

Le grand succs de Joomla! laisse craindre que les tentatives dintrusion dans la partie administrative vont se multiplier. Cherchez sur le Web comment tablir ce fichier de protection. Voyez par exemple la page suivante : http://www.joomlafacile.com/Questions-diverses/Securisez-votre-administration.html

53

CHAPITRE : 4 ADAPTER JOOMLA! LANGUE ET MODLE

Nous avons vu au chapitre prcdent que la partie administrative permettait dadapter la structure de votre site Web et de lui injecter des contenus. Tout utilisateur non anglophone doit raliser en premier ces deux oprations : vrifier et modifier la langue de linterface puis personnaliser les structures des menus et les couleurs du template. Voyons donc tour tour ces deux tapes primordiales.

4.2 Changement de modle (template) 4.1 Vrifier et changer la langue du site public

4.2 Changement de modle (template)

Aprs cette premire incursion dans les coulisses de Joomla!, voyons comment modifier en un seul geste laspect gnral du site. Dans sa version actuelle, Joomla! 1.5.0 est livr avec deux templates : le template par dfaut rhuk_ milkyway (Kepri) et un nouveau template, qui garantit laccessibilit des sites aux personnes handicapes. Il porte le nom de beez. Il a fallu remanier une grosse partie du code source de Joomla! 1.0 pour satisfaire aux normes daccessibilit. Les deux concepteurs allemands Angie Radtke et Robert Deutz ont propos ce template. Ils ont engag avec la communaut Joomla! une longue discussion quant lintrt de laccessibilit des sites Web. Ce template a en consquence t incorpor la livraison standard de Joomla!. Cela ne pourra que favoriser la diffusion de Joomla! sur le territoire europen (nous dcrivons Beez en dtail au Chapitre 14). Actuellement se droule un concours sur le site de joomla.org afin de choisir un autre template incorporer en standard avec Joomla!. Il est trs facile de passer dun template lautre. Voyons dabord comment ajouter un troisime template aux deux qui sont fournis en standard. Info: Le dossier CHAP17 du CD-ROM contient des modles complmentaires. Le Chapitre 16 exploite un modle spcifique au site de vente direct dun viticulteur (Bertrand). Pour charger le fichier du nouveau template, servez-vous de la commande EXTENSIONS > INSTALLER/ DSINSTALLER, comme pour le fichier de langues en dbut de chapitre. Cherchez sur le CD-ROM, dans le dossier CHAP17 le fichier ngo1.5.zip. Linstallateur indique que le transfert a russi (voir Figure 4.6).

54

Figure 4.6 Installation dun nouveau modle. Accdez ensuite la section de gestion des templates par EXTENSIONS > GESTION DES TEMPLATES. Le template actif une toile jaune. Lorsque vous amenez le pointeur sur le nom dun template, vous voyez apparatre un aperu (voir Figure 4.7).

Figure 4.7 Le Gestionnaire des Templates (modles). Pour activer un template, cliquez dans le bouton radio gauche du nom puis cliquez sur le boutonaction DFAUT en haut droite. Ltoile est place dans la ligne correspondante. Rafrachissez laffichage de votre site Web pour juger de la diffrence. La Figure 4.8 montre le template Beez. Nous expliquons comment crer de nouveaux templates au Chapitre 13 et verrons un template spcifique au Chapitre 16.

Figure 4.8 Le modle Beez daccessibilit.

4.2.1 Personnalisation des couleurs du modle

Mme le template standard rhuk_milkyway offre quelques paramtres de personnalisation au niveau des couleurs du premier plan et du fond. Rinstituez ce template comme expliqu plus haut puis basculez en mode DITION en cliquant dans le bouton radio gauche du nom du template puis sur le bouton DITER. Certains paramtres ne sont pas modifiables pour le template par dfaut. Vous pouvez en revanche changer deux paramtres de couleurs et la largeur du template (voir Figure 4.9).

55

Figure 4.9 Personnalisation du modle par dfaut rhuk_milkyway Vous pouvez essayer de modifier les couleurs et juger du rsultat dans votre site Web. Info: Il est utile de tirer profi t des onglets de navigateurs avec Joomla!. Internet Explorer dispose de tels onglets depuis sa version 7, FireFox depuis plus longtemps. Vous pouvez ainsi tablir un onglet sur la partie dadministration et un autre sur la partie publique. Il suffit de frapper la combinaison CTRL+TAB pour passer dun onglet lautre. Notez que les navigateurs Firefox, Opera, Safari et Konqueror possdent des onglets depuis plusieurs annes. Ils sont cependant pour linstant moins rpandus que IE.

4.1 Vrifier et changer la langue du site public

Si vous prvoyez de vous adresser des visiteurs francophones, soit environ 100 millions de personnes, vous devez bien sr commencer par basculer votre site Web entirement en franais. En revanche, si vous prvoyez une frquentation internationale, vous opterez plutt pour la langue anglaise. Pour le franais, vous pourriez mme, si le site est destin aux enfants, envisager une formulation des expressions fondes sur le tutoiement. Mais cette variante nest actuellement pas disponible dans Joomla! Quel que soit votre choix, vous pourrez avoir besoin dun fichier de langues. Pour le franais, les traductions ont dj t intgres. Pour dautres langues, il faudra rcuprer les fichiers de langues sur le site Web officiel appropri.

4.1.1 Installation dun fichier de langues

Si ncessaire, rcuprez les fichiers de langues depuis le site officiel de Joomla!. Normalement, vous devez disposer dun fichier de langues pour la partie publique et dun second pour la partie administrative. Pour installer les fichiers, ouvrez une session dadministration comme indiqu au Chapitre 2. Ouvrez ensuite le menu EXTENSIONS et choisissez INSTALLER/DSINSTALLER (voir Figure 4.1).

56

Figure 4.1 Installation dun fichier de langues. Vous pouvez installer les fichiers de langues de trois manires :

en effectuant un transfert local des fichiers dj situs sur le PC ; en accdant un dossier du domaine des documents de votre serveur Web ; en fournissant une adresse URL qui mne au fichier dsir.

Supposons la premire approche. Dans ce cas, vous cliquez sur le bouton PARCOURIR de la premire section puis vous dsignez le fichier compress *.zip. Vous cliquez ensuite sur lautre bouton, TRANSFERT DE FICHIERS ET INSTALLATION. Si tout se passe bien, vous obtenez ensuite un message dans ce style :
Install Language Success

Faites de mme avec le second fichier de langues. Rendez-vous ensuite au niveau du Gestionnaire de langues par la commande EXTENSIONS > GESTION DES LANGUES. Notez bien quil y a deux onglets dans la partie infrieure, Site et Administrateur. Au dpart, vous voyez que les deux langues anglais et franais sont installes (french FR). Vrifiez que la coche verte est bien situe dans la ligne du franais. Si ce nest pas le cas, cliquez dans le bouton radio gauche dans la ligne dsire puis cliquez sur licne DFAUT en haut droite (voir Figure 4.2). Cest toujours dans ce coin suprieur droit que sont runis les boutons-icnes des actions applicables. Noubliez pas galement de vrifier la langue de la partie administrative. Votre Joomla! doit maintenant se prsenter en franais dans les deux parties. Cest une chose que les utilisateurs francophones attendaient depuis longtemps. Dans Joomla! 1.5, ce dsir est enfin satisfait.

Figure 4.2 Slection de la langue (Gestionnaire de langues).

57

4.1.2 Traduction dun lment de menu

Si vous accdez votre site Web local, vous constatez quil est en franais, mais pas totalement. Rappelons que vous accdez votre site via ladresse http://localhost/joomla150/. Saisissez par exemple le terme contenu dans le champ de recherche en haut. Vous constatez quil ny a aucun rsultat. En effet, linterface est en franais, mais pas les donnes dexemples. Si vous effectuez une recherche du terme anglais content, vous obtiendrez plusieurs rponses. Pourquoi cela ? Les contenus constituent un autre ensemble de donnes. Lquipe franaise de Joomla! a dabord concentr ses efforts sur la localisation (traduction) de linterface visible par le public, puis de celle dadministration. Dautre part, les contenus dexemple vont rapidement tre remplacs par vos contenus vritables, et cest vous qui choisirez la langue dans laquelle ils sont rdigs. Si vous observez bien la page daccueil, vous constaterez que certains lments pourraient nanmoins tre dj franciss. Voyez par exemple la premire entre du menu principal qui indique Home. Voyons comment traduire cette entre, puis comment traduire le titre du menu Main Menu. Dans le cas de lentre de menu, choisissez MENUS > MAIN MENU. Vous arrivez dans la partie de gestion des lments de menu. Cliquez sur la ligne du lien HOME (voir Figure 4.3) pour basculer en mode DITION DANS UN FORMULAIRE (voir Figure 4.4). Pour linstant, ne cherchez pas dcouvrir les nombreuses possibilits de configuration qui soffrent vous. Slectionnez le contenu du champ TITRE et saisissez la traduction Accueil. Frappez la touche TAB pour entrer dans le champ ALIAS et saisissez nouveau accueil. Cliquez enfin en haut droite sur le bouton SAUVER. Allez vrifier la page daccueil en la ractualisant.

Figure 4.3 Le Gestionnaire des lments de menu.

58

Figure 4.4 dition dun lment de menu. Joomla! distingue les trois actions, Appliquer, Sauver et Fermer :

Appliquer valide vos modifications et reste en mode dition ; Sauver valide les modifications mais quitte le mode dition et revient au niveau prcdent ; Fermer ou Annuler abandonne les modifications en quittant le mode dition.

4.1.3 Modification dune entre (lment) de menu

Pour franciser le titre du menu Main Menu, accdez au Gestionnaire des modules via la commande EXTENSIONS > GESTION DES MODULES (voir Figure 4.5). Cliquez sur le lien MAIN MENU pour basculer en mode dition.

Figure 4.5 La gestion des modules Indiquez comme titre Menu principal puis cliquez sur APPLIQUER ou sur SAUVER. Allez recharger votre page daccueil pour voir votre menu principal.

59

CHAPITRE 5 : STRUCTURE DE LADMINISTRATION JOOMLA!

Joomla! offre peu prs le mme confort quune application locale interface graphique, telle que le proposent Windows, Linux (KDE, Gnome) ou Mac OS (Aqua). Ce nest pourtant pas une chose simple que de produire un progiciel de gestion de site Web ergonomique. Larme secrte est ici une utilisation intensive du langage de script JavaScript et une intgration pousse de composants Ajax. Ce langage est excut localement sur votre machine. Il peut avoir t dsactiv dans votre navigateur. Dans ce cas, vous ne pouvez pas utiliser linterface dadministration de Joomla!. Voil plusieurs annes que les navigateurs savent intgrer JavaScript correctement et quil ny a plus de problmes majeurs de scurit. Cest pourquoi vous pouvez activer le support de JavaScript. Je profi te de locca sion pour suggrer aux utilisateurs de Windows dadopter lun des navigateurs Open Source Mozilla ou Firefox. Tous deux sont nettement plus srs et plus confortables que le navigateur Internet Explorer. la diffrence de ce dernier, ces navigateurs se maintiennent en conformit avec les standards Internet dict par lorganisme W3C. 5.1 Organisation de laffichage 5.2 Aide 5.3 Le menu Aide

5.1 Organisation de laffichage

5.1.1 La barre de menus
Comme la partie publique du site Web, la partie administrative de Joomla! est constitue de plusieurs lments. La barre de menus en haut (voir Figure 5.1) prsente les diffrents menus. Du ct droit se trouve quatre lments :

un lien direct vers le site Web (Prvisualiser) ; un tmoin daffichage du nombre de nouveaux courriels reus ; un tmoin daffichage du nombre dutilisateur actuellement connect ; le bouton Dconnexion.

Figure 5.1 La barre de menus

5.1.2 La barre doutils

Juste sous la barre de menus se trouve la barre doutils (voir Figure 5.2). Voici par exemple celle des lments du menu principal Main Menu.

Figure 5.2 Exemple de barre doutils. gauche est rappel le nom de la sous-section courante avec son icne. Plus droite se trouve un nombre variable de boutons-action. Lorsque vous amenez le pointeur sur un tel bouton, il est mis en valeur. Il suffit de cliquer avec le bouton gauche pour lancer la commande correspondante. Le tableau suivant prsente les boutons-action que vous rencontrerez le plus souvent.
60

Bouton-action Affecter Aide Annuler Aperu Appliquer Archiver Copier Corbeille Crer Dfaut Dplacer Dpublier diter Nouveau Publier Restaurer Sauver Supprimer Transfrer

Description (ASSIGN) L lment slectionn est associ un autre lment (HELP) Accs l Aide en ligne de Joomla! (CANCEL) Les modifications sont abandonnes (PREVIEW) L lment slectionn s Affiche dans une fentre indpendante en aperu (APPLY) Les modifications sont enregistres mais la bote reste ouverte (ARCHIVE) L lment slectionn sera envoy dans l archive (COPY) L lment slectionn est rcupr d une autre section, d une autre catgorie (TRASH) L lment slectionn sera envoy dans la Corbeille (CREATE) Un sous-rpertoire est cr sur le serveur (DEFAULT) L lment slectionn devient l lment standard (MOVE) L lment slectionn est envoy dans une autre section ou une autre catgorie (UNPUBLISH) L lment slectionn sera retir de la partie publique (EDIT) L lment slectionn est charg en mode dition (NEW/NEW ITEM) Cre un nouvel lment (lien, contact, actualit) (PUBLISH) L lment slectionn sera publi (RESTORE/UNTRASH) L lment slectionn est rcupr de la Corbeille (SAVE) L lment slectionn est enregistr et la bote ferme (DELETE ou REMOVE) L lment slectionn sera effac (UPLOAD) Le fichier slectionn est transfr sur le serveur

Tableau 5.1 : Principaux boutons-action de la barre doutils 5.1.3 Les sous-menus Souvent, la barre doutils surplombe des sous-menus. La Figure 5.3 montre les trois sous-menus de la gestion des bannires, avec les trois onglets BANNIRES, CLIENTS et CATGORIES. Il arrive quun message du systme soit affi ch cet endroit (voir Figure 5.4).

Figure 5.3 Les sous-menus de la gestion des bannires.

Figure 5.4 Les sous-menus de la configuration gnrale.

61

5.1.4 Composants de filtrage

De temps autre, vous avez accs des composants de filtrage sous les sous-menus. Ils permettent de filtrer les donnes affi ches dans la partie infrieure selon diffrents critres (voir Figure 5.5). Vous pouvez lancer une recherche ou par exemple nAfficher que les modules situs une position spcifique. Lorsque vous slectionnez par exemple un template (modle) dans la liste de filtrage, seuls les modules qui font partie de ce template sont prsents.

Figure 5.5 Composants de filtrage.

5.1.5 Zone daffichage du contenu

Sous les ventuels composants de filtrage se situe la vaste surface daffichage des contenus. Elle existe en trois variantes principales.

5.1.6 Listes
Ce format sert prsenter des lments sous forme de liste. Une case cocher ou un clic dans une ligne permet de choisir llment sur lequel intervenir. La case cocher du haut de la colonne sert slectionner tous les lments en un seul geste. Ce genre de liste contient souvent une fonction de tri. Frquemment, vous pouvez activer ou dsactiver un lment en cliquant directement sur son nom. Sous la liste apparaissent parfois des boutons de navigation. En bas de fentre, un champ permet de dfinir le nombre dlments lists pour chaque page cran. Lexemple correspond au contenu du menu Key Concepts (voir Figure 5.6).

Figure 5.6 Exemple de contenu au format liste.

5.1.7 Format bote de dialogue

Ce format permet dAfficher les dtails dun seul lment (voir Figure 5.7). Il peut sagir dun contenu, dun module, dun menu, dun lment de menu, dun template ou autre. En gnral, la partie gauche contient les paramtres gnraux, et la partie droite les paramtres dtaills pour llment de gauche. Mais il nest pas simple de toujours sparer clairement les proprits gnrales des proprits dtailles. Vous trouverez donc parfois du ct gauche des valeurs directement paramtrables.

62

Figure 5.7 Exemple de format bote de dialogue.

5.1.8 Format divers

Nous englobons sous ce terme les affichages spcifiques comme celui du PANNEAU DADMINISTRATION (voir Figure 5.8) qui sAffiche au dpart lorsque vous vous connectez la partie administrative. La partie gauche runit des boutons pour les principales commandes. La partie droite donne des informations concernant le site Web. Certains contenus de Joomla! ne pouvant pas tre affi chs en utilisant le format liste, ou le format bote, vous rencontrerez de temps autre des sections avec un format particulier. La systmatique des affichages est diffi cile maintenir dans le cas des composants additionnels complexes.

Figure 5.8 Exemple daffichage spcifique.

5.2 Aide
Un accs facile laide est indispensable de nos jours. Joomla! tente doffrir un tel accs ds que possible.

5.2.1 Le bouton-action Aide

Dans la plupart des listes et des botes de dialogue, vous trouverez un bouton du ct droit de la barre doutils pour accder laide. Lorsque vous cliquez sur ce bouton, et si vous disposez dune connexion Internet, vous voyez apparatre une page daide extraite du serveur daide du site joomla. org dans une fentre fl ottante. Pour le moment, les travaux sont en cours. Le but est de mettre disposition un serveur daide par langue, avec une possibilit de mise jour centralise.

Figure 5.9 Accs au systme daide.

63

5.2.2 Bulles daide Une forme daide locale trs pratique sont les Bulles daide (voir Figure 5.10). Pour les faire apparatre, il suffit de maintenir le pointeur sans bouger sur lobjet dsir. Le texte de cette aide locale fait partie des fichier de langues, ce qui permet dy avoir accs mme sans connexion Internet et den voir une version traduite.

Figure 5.10 Une Bulle daide.

5.3 Le menu Aide

Le menu AIDE est le dernier dans la barre de menus. Il contient deux commandes : Aide Joomla! et Infos systme. Cliquez dabord sur AIDE JOOMLA!.

5.3.1 Aide Joomla!

La zone daffichage est divise en trois parties. En haut, vous disposez dun champ de recherche et dune barre de liens (voir Figure 5.11).

Figure 5.11 Fentre de laide en ligne. Le volet gauche contient une table des articles daide et le volet droit Affiche les dtails de larticle slectionn. Les articles sont lus sur le serveur daide ladresse http://help.joomla.org/. Vous pouvez reconfi gurer ladresse du serveur daide (voyez le Chapitre 6). La fonction de recherche accde au mme serveur. Il faut donc dans tous les cas disposer dune connexion Internet. Mais ce genre de logiciel suppose de toutes les manires de pouvoir accder au Web.

64

Les autres liens concernent laffichage du texte de la licence GPL, le journal des modifications qui permet dapprendre par exemple quun certain Johan Janssens a ajout des traductions en octobre 2007.

5.3.2 Infos systme

La commande AIDE > INFOS SYSTME centralise toutes les informations concernant votre machine, en cinq catgories :

Infos systme ; Paramtres PHP ; ichier de configuration ; Permissions des dossiers ; Informations PHP.

La page Infos systme. Rcapitule les paramtres du systme dexploitation et du serveur qui sont indispensables au fonctionnement de Joomla!. La Figure 5.12 montre quil sagit dun environnement Windows avec XAMPP lite (nous lavons install au Chapitre 2). Dans un tel environnement de test local, vous disposez de versions plus rcentes des logiciels (Apache 2.2.6 et PHP 5.2.5) que sur un serveur lou.

Figure 5.12 Les informations systme. La page Paramtres PHP. Donne des informations issues du fichier php.ini. Cest dans ce fichier que vous dcidez de ltat du mode scuris Safe Mode de PHP. Dans le cas dun serveur lou chez un fournisseur daccs, vous ne pouvez gnralement pas modifier php.ini. La page Fichier de configuration. Valeurs des variables trouves dans le fichier configuration.php gnr pendant linstallation. Les paramtres de base de donnes sont masques pour des raisons de scurit. La page Permissions des dossiers. Affiche tous les droits daccs des sous-dossiers. Pour que Joomla! fonctionne correctement, tous ces dossiers doivent tre accessibles en criture. Rappelons que vous modifiez les permissions des dossiers dans votre programme FTP au moyen de la commande chmod. La page Informations PHP. Affiche les donnes qui sont renvoyes par la fonction phpinfo(). Elle dcrit toute la configuration de linterprteur PHP. Chez certains fournisseurs daccs, vous pourrez intervenir sur la configuration via ce fichier, par exemple pour augmenter la quantit despace mmoire.

65

CHAPITRE 6 : LE MENU SITE

Un certain nombre de paramtres sappliquent toutes les pages et votre serveur. Ils sont runis dans le premier menu appel SITE. Ce menu contient cinq commandes (voir Figure 6.1) :

Panneau d'administration ; Gestionnaire des utilisateurs ; Gestion des mdias ; Configuration globale ; Dconnexion.

6.1 Panneau dadministration

Cette premire commande vous ramne la page prsente au dmarrage de la section administrative. Vous pouvez depuis ce PANNEAU DADMINISTRATION utiliser les menus ou bien les boutons-action qui donnent un accs direct aux rubriques les plus utilises de ladministration.

Figure 6.1 Le Panneau dadministration.

6.2 Gestionnaire des utilisateurs

Les utilisateurs sont une des ressources fondamentales de votre site Joomla!. Vous pouvez en dfinir autant que vous voulez. Vous pouvez leur permettre de crer certains contenus ou bien seulement den visualiser en fonction des permissions qui leurs sont octroyes. Au dpart, il ny a quun utilisateur : ladministrateur de Joomla!. Son Identifiant, vous le savez dj, est admin. Il peut modifier toute linstallation de Joomla!. Si vous activez la possibilit de senregistrer sur votre site Web comme nous le verrons plus loin dans ce chapitre, le nombre de comptes dutilisateurs va vite augmenter. La rubrique GESTIONNAIRE DES UTILISATEURS (voir Figure 6.2) permet de modifier les comptes, den supprimer, de modifier leurs permissions et bien sr de crer de nouveaux comptes.

66

Figure 6.2 Site > Gestionnaire des utilisateurs. La vue LISTE Affiche les informations essentielles pour chaque compte. Nous y trouvons le nom complet (Administrator), lIdentifiant (admin), ltat connect ou non (une coche verte ou une croix rouge), ltat activ du compte, le groupe auquel il appartient (Super Administrator), son adresse de messagerie et la date de sa dernire visite. Cette donne tient compte des visites de la partie publique et de la partie administrative. Nous trouvons enfin le numro unique permettant didentifier ce compte dans la base, par exemple ID (62). Vous pouvez filtrer laffichage par groupe et par tat de connexion. Le champ de saisie de critres de recherche gauche permette de trouver un compte en indiquant le dbut dun nom dutilisateur. La barre doutils offre les cinq boutons DCONNEXION, SUPPRIMER, DITER, NOUVEAU et AIDE. Vous pouvez appliquer certaines actions plusieurs utilisateurs, par exemple SUPPRIMER. Il suffit de les slectionner dabord en cochant leur case du ct gauche. La case de tte de colonne slectionne tous les utilisateurs de la liste. Pour basculer en mode DITION DUN COMPTE, cliquez directement dans le nom (ou slectionnez le compte puis cliquez sur DITER).

6.2.1 Dconnexion autoritaire dun utilisateur

Cette fonction est trs pratique lorsque vous avez besoin en tant que modrateur de bannir un utilisateur de votre site.

6.2.2 Supprimer un compte dutilisateur

Utilisez cette fonction avec prcaution car elle supprime les utilisateurs slectionns via leur case cocher (ce qui en fait des candidats la prochaine action).

6.2.3 diter un compte dutilisateur

Cette commande permet de modifier les paramtres dun compte. Prenons comme exemple le seul compte qui existe au dpart, celui de ladministrateur. Cliquez sur le lien de son nom ou bien cochez sa case puis cliquez sur le bouton DITER.

Figure 6.3 Menu Site > Gestionnaire des utilisateurs > diter. La page qui apparat se compose de trois volets :
67

Dtails de lutilisateur ; Paramtres ; Informations sur le contact.

Dtails de lutilisateur
Nom. Le nom complet de ce compte dutilisateur (ici Administrator). Identifiant. LIdentifiant est le nom quil faut saisir pour ouvrir une session avec ce compte. Il doit tre court et facile mmoriser. partir du nom Emile Dioux, nous pourrions driver lIdentifiant edioux. Joomla! autorise les espaces, les signes spciaux et tout autre caractre du jeu Unicode. Sachez cependant quil faudra parfois saisir cet Identifiant sur un clavier qui ne possde pas les caractres spciaux. Restreignez-vous aux caractres alphabtiques anglais et aux chiffres. Email. Son adresse de messagerie. Nouveau mot de passe. Le mot de passe doit tre saisi deux fois pour plus de scurit. Si vous ne saisissez rien ici, vous conservez votre ancien mot de passe. Le mot de passe doit compter au moins six caractres. Groupe. Lappartenance un groupe se divise en deux parties. Les utilisateurs classiques qui se connectent seulement la partie publique (Public Frontend) (voir Tableau 6.1). Les utilisateurs qui doivent accder linterface dadministration de Joomla! voir Tableau 6.2). Tout contenu de Joomla! peut tre associ ces deux groupes.
Groupe Enregistr Auteur diteur Publication Droits Un utilisateur enregistr peut accder un plus grand nombre de pages qu un visiteur normal. L auteur peut rdiger des contenus et en modifier s ils sont les siens. Il dispose d un lien cet effet dans son menu d utilisateur. Peut raliser tout ce que fait l auteur et modifier tous les contenus publis. Dispose des droits de l diteur et peut dcider de rendre ou non public certains contenus.

Tableau 6.1 : Groupes dutilisateurs de la partie publique (Frontend)

Groupe Gestion Droits Le manager peut crer des contenus et Afficher des informations concernant le systme. Il n a pas le droit : de grer les utilisateurs ; d installer des modules et des composants ; de promouvoir un utilisateur en superadministrateur ni de modifier un superadministrateur ; d accder laConfiguration du site (Menu site) ; d mettre un message global tous les utilisateurs ; de modifier et d installer des modles et des fichiers de langues. L administrateur n a pas le droit : de promouvoir un utilisateur en superadministrateur ni de modifier un superadministrateur ; d accder laConfiguration du site (Menu site) ; d mettre un message global tous les utilisateurs ; de modifier ni d installer des modles et des fichiers de langues. Le superadministrateur peut excuter toutes les fonctions de l administration de Joomla!. C est le seul pouvoir crer un autre superutilisateur.

Administrateur

Super Administrateur

68

Tableau 6.2 : Groupes dutilisateurs de la partie administration (Backend) Vous pouvez dcider dans le volet des dtails si lutilisateur doit recevoir ou non les courriels du systme. Vous voyez enfin la date denregistrement (dinscription) de lutilisateur et la date de sa dernire ouverture de session russie. Info: Un mot au sujet des utilisateurs spciaux (Special Users) qui seront intgrs Joomla! dans une toute prochaine version. Un utilisateur spcial est quelquun qui possde plus de droits quun administrateur. Dans la mesure o il nest pas encore possible de dfinir plusieurs groupes dutilisateurs dans Joomla!, le groupe des utilisateurs spciaux permet de restreindre laccs certains contenus un groupe en particulier. Cest ce qui permet par exemple de crer une zone prive dans un site, auquel nauront accs que les utilisateurs spciaux. Ce mcanisme avait t annonc comme pouvant tre intgr la version 1.5.0, mais il a t repouss. Un des projets Google Summer of Code sy consacre.

Paramtres
Le volet PARAMTRES contient deux listes pour choisir la langue pour cet utilisateur. Vous pouvez galement choisir lditeur de texte avec lequel il pourra modifier les contenus ainsi que ladresse du serveur daide, en fonction de la langue. Dans Joomla! 1.5, vous pouvez choisir des langues diffrentes pour la partie publique et pour la partie administrative. Notez que cela peut aboutir des combinaisons tranges. Au niveau du choix de lditeur, celui qui est intgr en standard Joomla!1.5 est un diteur telcrantelcrit Wysiwyg, lditeur TinyMCE (voir Figure 6.4).

Figure 6.4 Exemple de session ddition avec TinyMCE. Vous pouvez enrichir TinyMCE avec des extensions pour grer les fichiers et les images depuis le site Web de lditeur, mais ces extensions sont payantes. Il existe bien dautres choix au niveau de lditeur dans Joomla!. Citons par exemple JCE et FCKEditor. Pour rdiger du code XHTML valid, procurez-vous la version gratuite de lditeur XStandard-lite (www.xstandard.com). Cest un diteur visuel trs puissant qui produit du code HTML valid et offre de nombreuses options dintgration. Cet
69

diteur ntant pas fourni avec Joomla!, vous devrez le tlcharger depuis le site. Il existe galement une version payante Pro. Le navigateur FireFox sait dtecter le changement dditeur et charge au besoin celui que vous avez choisi en tant que Plugin. Une fois que vous lavez install puis dsign au niveau du compte dutilisateur, cest lui qui apparat en mode DITION (voir Figure 6.5).

Figure 6.5 Exemple de session ddition avec lditeur XStandard XHTML. Vous pouvez enfin choisir un site daide dans la liste. Cest ici que vous pourrez choisir la version franaise de laide lorsquelle sera acheve. Nous en avons galement parl au Chapitre 5.

Informations sur le contact

Ce dernier volet indique un ventuel formulaire pour entrer en contact avec lutilisateur. Joomla! est dot dun composant permettant de gnrer des formulaires de contact individualiss, comme nous le montrons au Chapitre 9. La commande utiliser est COMPOSANTS > CONTACTS > CONTACTS. Pour faire prendre en compte vos choix, vous utilisez le bouton-action SAUVER. Le bouton APPLIQUER enregistre les modifications sans quitter la page en cours.

6.2.4 Crer un compte dutilisateur

Aprs cette premire dcouverte de linterface de gestion des utilisateurs, procdez la cration dun premier compte en plus de ladministrateur. Associez cet utilisateur au groupe des utilisateurs enregistrs puis dcidez des autres paramtres. Dans notre exemple, lutilisateur sappelle Emile Dioux, son identifi ant est emile, il nest pour linstant pas connect (mais il est activ), il fait partie du groupe Enregistr et son Identifiant numrique ID vaut 63. Vous recevrez un message derreur si le courriel de bienvenue ne peut pas lui tre transmis. Cest normal ici car nous travaillons localement et quil ny a aucun serveur de messagerie confi gur. Linterprteur PHP ne peut donc pas envoyer le courriel (voir Figure 6.6).

Figure 6.6: Cration dun nouveau compte utilisateur.

70

Vous pouvez dornavant vous dclarer dans la partie publique du site. Ladministrateur peut se charger de crer les comptes dutilisateur ou bien laisser les visiteurs crer les comptes eux-mmes. Nous reviendrons sur ce point plus loin dans ce chapitre, dans laConfiguration globale.

6.3 Gestion des mdias

Administration Joomla! Kapitel 6 Medien Menue Site Upload

6.3 Gestion des mdias

La rubrique de gestion des mdias peut tre compare un explorateur de fichiers combin un programme de tlchargement FTP (voir Figure 6.7). Les formats de fichiers manipulables sont trs nombreux. Vous pouvez grer les fichiers portant les extensions suivantes :

.csv, .doc, .odg, .odp, .ods, .odt, .ppt, .txt, .xls (formats bureautiques) ; .bmp, .epg, .gif, .ico, .jpg, .pdf, .png, .swf et .xcf (formats graphiques).

Vous pouvez tlcharger des fichiers vers votre serveur en les distribuant dans des sous-dossiers. Ce gestionnaire est trs pratique lorsque vous disposez des droits dadministration sans avoir un accs FTP.

Figure 6.7 Site Gestion des mdias. Cet outil offre deux volets :

Les Miniatures. Elles permettent de voir des aperus rduits des fichiers. Les Dtails. Affichent le nom et la taille des fichiers sous forme de liste.

Vous constatez quil y a un volet pour les dossiers gauche et un volet pour les fichiers. Ds que vous slectionnez un dossier gauche, vous voyez apparatre les fichiers quil contient droite. Loutil permet de grer tous les types de fichiers que Joomla! sait exploiter en standard. Cest par exemple le cas du dossier Smilies (les moticnes) et les graphiques du dossier M_images.
71

Voici les fonctions disponibles dans ce gestionnaire :

Vous pouvez crer et supprimer des dossiers (la suppression nest possible quen vue dtaille) ; vous pouvez tlcharger un ou plusieurs fichiers et les supprimer (la suppression nest elle aussi possible quen vue dtaille).

Cration dun sous-dossier

Le volet principal des fichiers comprend dans sa partie suprieure un champ affichant le chemin daccs au dossier courant (voir Figure 6.8). sa droite se trouve un champ de saisie suivi dun bouton CRER DOSSIER. Saisissez le nom de votre sous-dossier (par exemple france) puis cliquez sur le bouton. Pensez ensuite vous rendre ventuellement dans ce sous-dossier.

Figure 6.8 Gestion des mdias > Cration dun sous-dossier.

Rapatrier un ou plusieurs fichiers

La partie infrieure de la fentre contient un bouton PARCOURIR qui donne accs une bote de dialogue standard du systme dexploitation pour dsigner un ou plusieurs fichiers. Vous pouvez effectuer une multislection en appliquant les normes en vigueur dans votre systme (touches CTRL ou MAJ) (voir Figure 6.9). Vous navez qu cliquer sur le bouton LANCER LE TRANSFERT pour copier les fichiers rcuprs dans le dossier courant. Ils sont ensuite prsents sous forme de miniatures (voir Figure 6.10). Il ne reste plus ensuite qu les distribuer dans diffrentes sections de contenu comme nous le verrons dans un autre chapitre. Lorsque vous cliquez dans une miniature, lcran principal de Joomla! sestompe et limage apparat en taille relle.

Figure 6.9 Gestion des mdias > Transfert de fichiers.

72

Figure 6.10 Gestion des mdias > Transfert de fichiers II. Attention: Joomla! exploite les fichiers tels quils sont. Il est fortement dconseill de mettre en place dans une page Web des images tires directement dun appareil photo numrique si le volume dpasse 3 ou 4 Mo. Sur Internet, il est prfrable de limiter la taille de la plupart des images 50 ou 100 Ko. Pensez ceux qui nont pas encore de liaison haut dbit ! Comme rgle de base pour le transfert, partons du cas typique dun fichier de 100 Ko (la taille moyenne dune page daccueil avec quelques images). Le tableau suivant indique les temps de transfert correspondants. Notez quune seule image pesant 300 Ko peut dtourner de votre site tous les visiteurs qui nont quun accs lent Internet, analogique ou numrique.
Mode daccs ADSL NUMERIS Modem analogique(56 Ko) Transfert de 100 Ko de donnes Moins de 1 seconde Environ 15 secondes Environ 25 secondes

Tableau 6.3 : Dure dun tlchargement de 100 Ko

Configuration globale
Cet espace de travail permet daccder aux paramtres stocks dans le fichierConfiguration.php, qui sont essentiels au fonctionnement du systme. Vous y trouvez notamment les paramtres pour accder au serveur de bases de donnes, mais galement des paramtres moins cruciaux, comme le nombre prdfini de lignes pour les affichages LISTES. Cette rubrique comprend trois pages et donc trois onglets (voir Figure 6.11).

Site ; Systme ; Serveur.

73

Figure 6.11 Configuration globale > Site > Paramtres du site.

6.4.1Configuration du Site
La page deConfiguration du site propose trois volets :

Paramtres du site ; Paramtres des mtadonnes ; Paramtres SEO.

Site hors ligne. Vous activerez ce mode pour mettre le site temporairement hors service afin de raliser des modifications. Message lorsque le site est hors ligne. Le texte saisi ici est celui affi ch sur le site Web lorsque le site nest pas accessible. Vous pouvez lessayer tout de suite. Basculez le site hors ligne en cliquant sur le bouton OUI puis en cliquant sur le bouton APPLIQUER en haut droite. Par une autre fentre de navigateur ou un autre onglet, essayez daccder au site Web. Il nest plus accessible. En revanche, les utilisateurs ayant au minimum un profil Gestion peuvent accder la partie administrative (voir Figure 6.12).

Figure 6.12 Message apparaissant sur le site lorsquil est hors ligne. Nom du site. Vous retrouvez ici le nom que vous aviez choisi pendant linstallation. Ce nom sAffiche dans la barre de titre du navigateur, dans le cartouche dexpditeur des courriels du systme, dans les flux dactualits et en diffrents autres endroits dans lesquels il est utile didentifier le site Web.
74

diteur WYSIWYG par dfaut. WYSIWYG est labrviation de What you see is what you get, qui a t francis en Tel cran, tel crit . Lexpression date des dbuts des interfaces utilisateur graphiques dotes dune souris. Il tait devenu possible cette poque de crer et de modifier des textes en les affichant de manire assez fi dle au rsultat qui sera imprim. Dans notre cas prcis, cest moins la fidlit limpression qui nous intresse que la fidlit au rsultat affi ch par le visiteur.

Figure 6.13 Lditeur par dfaut TinyMCE. Sur Internet, vous remplissez en temps normal les formulaires sans pouvoir appliquer des options de format. En effet, le contrle du format se base sur des balises HTML ou des abrviations spcifi ques lapplication. En utilisant un diteur WYSIWYG, vous disposez dun plus grand confort parce que vous pouvez utiliser les icnes de la barre doutils pour enrichir le texte. Cet diteur est automatiquement activ dans tous les champs texte pour lesquels des options de format sont appropris (voir Figure 4.17). Lditeur fonctionne dans lensemble des navigateurs actuels, comme par exemple lditeur XStandard lite (voyez plus haut dans le mme Chapitre). En standard, Joomla! dfinit par dfaut lditeur TinyMCE. Longueur des listes. Sur un site Web, de nombreuses pages prsentent des listes, par exemple pour les actualits et les liens. Cette option permet de contrler le nombre dentres standard dune liste.

Paramtres des mtadonnes

Cette page doptions concerne les mtadonnes, cest--dire les donnes qui servent dcrire la nature des donnes que contient votre site Web.

Figure 6.14 Configuration globale > Site > Paramtres des mtadonnes.
75

Ces mtadonnes jouent un grand rle auprs des robots dindexation des moteurs de recherche Internet. Bien quil ne faille pas systmatiquement esprer un bon rfrencement de la simple prsence de ces mtadonnes, elles permettent de prsenter en quelques mots ce qui est propos sur le site. Si vous chargez le code source HTML dune page Joomla!, vous pourrez voir dans la partie suprieure les mtadonnes (du code XHTML) comme ceci :
<meta <meta <meta <meta <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> name=robots content=index, follow /> name=keywords content=joomla, joomla!, Joomla, Joomla!, J! /> name=description content=Joomla! - un portail et un SGC dynamique /> name=generator content=Joomla! 1.5 - Gestion de contenus Open Source />

Mta description du site. Cette description du contenu est souvent affi che dans les rsultats des moteurs de recherche. Vous devez donc rdiger cette expression avec soin, car de sa prcision dpend parfois la dcision pour un internaute de visiter votre site. Vous pourrez ajouter dautres descriptions sur chaque page de contenu individuel en complment de cette description globale. Mots cls du site (Meta Keywords). Il sagit des mots cls du document. Mentionnez au minimum les concepts principaux. Certains robots de recherche sont friands de ces mots cls. Sparez les mots par des virgules et des sries de mots par plusieurs virgules et des espaces. Ne dpassez pas 1 000 caractres, le surplus ne serait pas pris en compte. Notez bien : moins vous indiquez de mots cls, plus ceux qui sont mentionns possdent dinfl uence au niveau du moteur de recherche. Rflchissez aux mots cls qui risquent dtre le plus souvent recherchs. Vous pourrez ajouter dautres descriptions sur chaque page de contenu individuel en complment de cette description globale. Afficher la balise Meta du titre. Cette option permet dAfficher le titre du contenu de chaque page en tant que balise de mtadonnes, par exemple : <meta name=title content=Bienvenue dans Joomla! />. Afficher la balise Meta de lauteur. Comme pour loption prcdente, mais concerne le nom de lauteur, par exemple : <meta name=author content=Administrateur />.

Paramtres SEO (Search Engine Optimization)

Cette page doptions concerne loptimisation du moteur de recherche, et notamment lactivation dune fonction permettant de convertir les adresses pour les rendre moins fl uctuantes (voir Figure 6.15).

Figure 6.15 Configuration globale > Site > Paramtres SEO. En temps normal, ladresse URL dune page dans un systme de gestion de contenus prend laspect suivant : http://localhost/Joomla!/index.php?option=com_contact&Itemid=3
76

Ce genre dadresse nest pas stock par les moteurs de recherche. Ils supposent que le contenu est gnr dynamiquement, ce qui a pour effet de rendre ladresse trs vite obsolte. URL explicites (SEF). Cette option permet de convertir les adresses URL dynamiques en adresses URL compatibles avec les moteurs de recherche. Lorsque loption est active, le lien prcdent est converti en celui-ci : http://localhost/joomla150/contact Cette option se base sur un mcanisme du serveur Web Apache appel Rewrite Engine, qui permet de convertir des adresses URL. Pour que la fonction soit en vigueur, il faut galement modifier le nom du fichier htaccess.txt du rpertoire principal de Joomla! en .htaccess (avec un point initial). Cette modification nest possible sous Windows quavec certains diteurs de texte, comme UltraEdit (ultraedit.com) ou bien sur la ligne de commande de la faon suivante :
rename htaccess.txt .htaccess

Sous Linux, le changement de nom ne pose aucun problme, mais le fichier nest gnralement plus affi ch ensuite dans le client FTP (tout dpend de laConfiguration du serveur). Certains fournisseurs daccs interdisent la mise en place de fichiers .htaccess car ils peuvent reprsenter un risque en termes de scurit pour le serveur. Info: Pour profiter aussi sous Windows avec XAMPP des adresses URL optimises pour les moteurs de recherche, il faut modifier le fichier suivant :
[LettreDisque]:\xampplite\apache\conf\httpd.conf

Chargez ce fichier dans un diteur de texte sous Windows (par exemple WordPad) et cherchez la ligne suivante :
#LoadModule rewrite_module modules/mod_rewrite.so

Supprimez le signe # en dbut de ligne pour la rendre active :

LoadModule rewrite_module modules/mod_rewrite.so

Enregistrez le fichier puis redmarrez le serveur Apache via le panneau de contrle de XAMPP. Les adresses optimises devraient fonctionner ensuite. Ajouter un suffixe aux URL. Provoque lajout dune extension .html la fin de ladresse URL pour quelle se prsente comme une page HTML. Leffet sur les moteurs de recherche est discutable.

6.4.2 Systme

Paramtres systme
Mot secret. Il sagit dun code qui est gnr pendant linstallation de Joomla! afin de constituer une sorte dempreinte unique. Ce mot secret est utilis en combinaison avec linterface de programmation XML-RPC. Le but est de garantir que seuls les systmes distants dment identifi s et autoriss pourront exploiter cette interface fonctionnelle.

77

Chemin vers le dossier Log. Vous pouvez profiter de la capacit de journalisation de Joomla! en indiquant ici un chemin daccs. Vous pouvez modifier celui propos. Il doit indiquer un dossier situ en dehors de la partie publique, cest--dire ailleurs que dans la racine relative htdocs de vos documents. Activer les services Web. Vous savez que Joomla! dispose en standard dune interface XML-RPC qui rend des services disponibles. Vous pouvez lactiver et la dsactiver ici. Cela ne concerne que les connexions entrantes XML-RPC, pas celles sortantes, mises par le serveur. Serveur daide. Vous dcidez ici du nom du serveur daide standard. Vous pouvez confi gurer un serveur diffrent pour chaque compte dutilisateur.

Figure 6.16 Configuration globale > Systme > Paramtres systme. Info: Notez que vous pourrez bientt utiliser un serveur daide local. Il faut bien sr y installer les textes daide dans la langue dsire (par exemple en Franais fr-FR). Ils doivent tre placs dans le dossier \xampplite\htdocs\Joomla150\administrator\help\fr-FR (cas de Windows). Pour linstant, il nexiste pas dinstallation automatique de ces fichiers. Restez lafft des nouveauts de lquipe franaise ce sujet.

Paramtres des utilisateurs

Cette section concerne les paramtres valables globalement pour les comptes utilisateurs (voir Figure 6.17). Autoriser lenregistrement des utilisateurs. Vous choisissez ici si chaque utilisateur doit senregistrer ou non. Si vous exploitez par exemple le site Web dune entreprise, vous pouvez dfinir des comptes utilisateurs, tout en interdisant la cration des comptes par les visiteurs. Dans le site Web dune communaut, il est gnralement prfrable de laisser chaque utilisateur sinscrire lui-mme. Figure 6.17 Configuration globale > Systme > Paramtres des utilisateurs Nouveau type denregistrement utilisateur. Permet de dcider quel groupe dutilisateurs un utilisateur est affili lorsquil senregistre (lorsquil sinscrit). Les diffrents groupes dutilisateurs sont prsents aux Tableaux 6.1 et 6.2 plus haut dans ce chapitre. Activation du compte du nouvel utilisateur. Pour se protger, dans une certaine mesure, des programmes qui sont capables de crer automatiquement 20 000 comptes dutilisateurs sur votre site, il suffit de demander une activation en plusieurs tapes. Lutilisateur reoit dans ce cas un message lectronique ladresse fournie. Ce message contient un lien permettant dactiver le compte. Une fois le compte activ, lutilisateur peut sidentifier.

78

Front-end user parameters (Paramtres accessibles lutilisateur). Cette option permet de donner accs dans la partie publique aux paramtres de langue et de fuseau horaire (voir Figure 6.18). Il faut cliquer sur le lien qui sappelle au dpart YOUR DETAILS dans le menu USER MENU.

Figure 6.18 Partie publique > Accs aux paramtres de lutilisateur.

Paramtres des mdias

Cette section concerne la gestion des mdias. Vous pouvez dcider quelles extensions de noms de fichiers sont autorises en transfert et choisir les chemins daccs des dossiers dans lesquels ces fichiers doivent tres stocks (voir Figure 6.19).

Figure 6.19 Configuration globale > Systme > Paramtres des mdias. Vous pouvez galement spcifier des types MIME. Cela offre lavantage de contrler le contenu des fichiers de faon plus scurise. Dans le cas o les modules ncessaires ne sont pas activs au niveau du serveur Web Apache, vous pouvez utiliser le bouton TRANSFERTS RESTREINTS pour que les utilisateurs non privilgis de la partie publique ne puissent transfrer que des images. Vous pouvez enfin spcifier le poids (la taille) maximale, jusqu atteindre la limite prdfinie par PHP (voir la remarque qui suit). Info: La taille unitaire maximale des fichiers transfrer dpend de laConfiguration PHP du fournisseur. Dans le cas de lauteur, la limite est fi xe 16 Mo. Les fichiers de plus grosse taille doivent tre transfrs par FTP. Vous pouvez aussi modifier la valeur upload dans le fichier de configuration php.ini.
79

Paramtres de dbogage
Lorsquun programmeur informatique recherche des erreurs, il parle de dbogage. Ce terme vient de langlais bug qui signifie insecte . Il a des origines tout fait physiques. Dans les annes 1950, les premiers ordinateurs (les calculateurs) taient construits avec des tubes lectroniques qui dgageaient de la chaleur. Cela constituait un refuge idal pour des tas de petites bestioles qui venaient ronger les cbles et provoquer des erreurs de calcul. De nos jours, il ny a plus beaucoup dinsectes dans nos PC, mais il y a de plus en plus de bogues, par exemple des requtes de base de donnes qui chouent.

Figure 6.20 Configuration globale > Systme > Dbogage. Dbogage systme. Une fois cette fonction active, vous disposerez dans la partie infrieure de la fentre de votre site Web dune zone affichant les messages de la base de donnes. Si vous activez la fonction, vous verrez que le dbogage est trs dtaill (voir Figure 6.21). Pensez faire dfiler le contenu de la fentre. Dbogage de la langue. Il sagit dun dbogage limit aux chanes de caractres qui ont t traduites dans linterface. Cela permet de mettre au point les fichiers de langues.

Figure 6.21 Exemple de dbogage dans le bas de la fentre du site. Vous savez que vous avez activ le dbogage de la langue en vous rendant ensuite dans la partie publique. Tous les termes qui sont traduits sont dlimits par de petites puces noires (voir Figure 6.22).

Figure 6.22 Exemple daffichage spcifique au mode de dbogage de la langue.

80

Paramtres du cache
Un cache est une zone mmoire intermdiaire. Il existe par exemple un cache pour les images dans le navigateur, ce qui lui vite de recharger depuis le Web des images dont il dispose dj. Joomla! utilise un mcanisme de cache au niveau du serveur pour y stocker les pages PHP gnres. En activant cette fonction, vous pouvez sensiblement abrger les temps de rponses aux pages trs demandes (voir Figure 6.23).

Figure 6.23 Configuration globale > Systme > Cache. Cache. Permet dactiver et de dsactiver le cache. Dure de vie du cache. Indique le temps (en minutes) pendant lequel un contenu doit tre maintenu dans la mmoire cache avant de pouvoir tre remplac. Gestionnaire de cache. Permet de dutiliser soit un fichier soit une base de donnes pour le cache (actuellement, seul le fichier de cache est oprationnel).

Configuration des sessions

Dure de session. Vous ouvrez une session en vous Identifiant en tant quutilisateur. Si vous oubliez de vous dconnecter, votre session sera automatiquement interrompue au bout du dlai indiqu ici. Gestionnaire de session. Permet de faire grer les sessions dans soit un fichier soit une base de donnes, au choix. La mthode utilisant une base de donnes est sensiblement plus rapide que lautre sur un site Web trs frquent.

Figure 6.24 Configuration globale > Systme > Session.

6.4.3 Serveur
Cette page doptions runit les dtails techniques de lenvironnement dexploitation du serveur.

81

Paramtres du serveur

Figure 6.25 Configuration globale > Systme > Serveur. Chemin vers le dossier Temp. Joomla! doit de temps autre crer des fichiers temporaires, par exemple lors dun transfert. Vous pouvez dcider ici o ces fichiers doivent tre crs puis supprims. Compression GZIP des pages. Ce mcanisme provoque la compression des pages avant de les renvoyer au navigateur du client. Il faut que le navigateur et le serveur Web sachent exploiter cette fonction. Elle est conseille lorsque les visiteurs sont nombreux ne pas disposer dune connexion ADSL. En revanche, si le serveur commence tre surcharg, il vaut mieux ne pas activer cette option. Elle oblige un traitement supplmentaire, sauf si la librairie de fonctions GZIP a t intgre directement dans le code du serveur. Dans certainesConfigurations de serveur, le fonctionnement est plus rapide sans cette fonction ! Rapport derreurs. Permet de contrler la densit des messages derreurs issues du systme de gestion derreurs de PHP. Notez que les messages ne sont pas stocks dans un fichier pour exploitation ultrieure, mais affi chs lcran du navigateur ! Mfiez-vous !
Option Description

Par dfaut Le paramtre est repris du fichier deConfiguration php.ini. Aucun Simple Aucune erreur n est journalise. Ce rglage est conseill pour les sites rels, car cela vite de donner une occasion supplmentaire d attaquer le site. Les erreurs et les avertissements sont journaliss. Ce rglage correspond au paramtre error_reporting(E_ERROR|E_WARNING|E_PARSE).

Maximum Journalise les erreurs, les avertissements et les conseils. Correspond au paramtre error_reporting(E_ALL).

Tableau 6.4 : Catgorie des rapports derreurs Paramtres de localisation (fuseau horaire)
Fuseau horaire. Ce rglage permet dAfficher lheure approprie au lieu dexploitation de votre site Web. Vous pouvez par exemple rgler lheure dun serveur que vous louez dans un pays loign pour des visiteurs locaux. Pensez rgler lheure UTC sur +01:00, lheure de Paris.

Figure 6.26 Configuration globale > Serveur > Fuseau horaire.

82

Paramtres FTP
Le protocole FTP permet de contourner les problmes de transferts de fichiers via PHP rendus impossibles par certains paramtres de scurit des fournisseurs daccs. Il vous suffit de saisir ici vos paramtres daccs au serveur FTP du fournisseur. Le champ intitul RACINE FTP mrite une explication. Lorsque vous vous connectez via FTP, vous tes dirig vers un dossier bien prcis, qui change selon le fournisseur daccs. Indiquez ici le chemin daccs votre installation Joomla! relati vement au point dentre de la connexion FTP, par exemple /htdocs/joomla150 (voir Figure 6.27).

Figure 6.27 Configuration globale > Serveur > FTP.

Paramtres de la base de donnes

Vous pouvez modifier ici les paramtres daccs votre base de donnes. La moindre erreur de saisie dans cette section peut rendre Joomla! inutilisable. Vous ne pourriez en effet plus accder linterface dadministration (voir Figure 6.28).

Figure 6.28 Configuration globale > Serveur > Base de donnes. Si cela vous arrive, il faut modifier manuellement le fichier nomm configuration.php avec un diteur de texte. Tous les paramtres que vous changez dans ce sous-menu SITE > CONFIGURATION GLOBALE sont mmoriss sous forme de variables dans le fichier configuration.php.
<?php class JConfig { var $dbtype = mysql; var $host = localhost; var $user = root; var $password = ; var $db = joomla150; var $dbprefi x = jos_; //

83

// Autre variables // --} ?>

Listing 6.1: Le fichier configuration.php Rglages e-mail (courriel) Serveur de mail. Permet de choisir la fonction de messagerie intgre PHP, le programme sendmail ou un autre compte de messagerie, par exemple chez Free ou chez Yahoo!. Adresse de lexpditeur. Adresse de messagerie qui sera mentionne comme celle de lexpditeur pour les messages gnrs automatiquement par Joomla!. Nom de lexpditeur. Nom de lexpditeur dun message automatique de Joomla!. Chemin daccs sendmail. Si vous dsirez utiliser la place de la fonction Mail de PHP le programme disponible sur tous les serveurs Linux nomm sendmail, vous devez indiquer ici le chemin daccs ce programme. Identification SMTP requise. Permet de faire utiliser un serveur de messagerie externe. Utilisateur SMTP. Nom de lutilisateur chez le fournisseur de messagerie. Mot de passe SMTP. Mot de passe chez le fournisseur de messagerie. Hte SMTP. Nom du serveur SMTP de ce fournisseur de messagerie.

Figure 6.29 Configuration globale > Serveur > Rglages email.

6.4.4 Dconnexion
Cette dernire commande du menu SITE permet de se dconnecter de la partie administrative. Vous tes automatiquement ramen lcran douverture de session.

84

CHAPITRE 7 : LE MENU MENUS

La partie publique du site propose plusieurs menus qui se prsentent en gnral sous forme de cadres indpendants runissant une srie de commandes (voir Figure 7.1).

Figure 7.1 Exemple de menu vertical (Main Menu). Il est cependant possible de crer des menus de listes de commandes horizontales. Ces menus sont moins frquents et sont moins aisment reconnus en tant que tels (voir Figure 7.2).

Figure 7.2 Exemple de menu horizontal (Top Menu). Il existe enfin des menus CSS, avec parfois un effet de transparence. Voici un exemple tir de joomlart.com (voir Figure 7.3).

Figure 7.3 Exemple de menu droulant. Dans Joomla!, les contenus de ces menus sont extraits la vole dune base de donnes. La gestion passe, en mme temps que celle des objets qui sont lis ces lments de menus, par le menu dadministration intitul MENUS. Les donnes dexemples comptent six menus : MAIN MENU, TOP MENU, OTHER MENU, USER MENU, EXAMPLE PAGES et KEY CONCEPTS. Le Top Menu est un menu horizontal, tous les autres tant des menus classiques verticaux. Chaque menu est associ un module dont la gestion est ralise au niveau du Gestionnaire des modules (dcrit au Chapitre 10).

7.1 Gestion des menus 7.2 Adaptation dun menu existant 7.3 Corbeille de menu 7.4 Cration dun nouveau menu

7.1 Gestion des menus

Cette commande donne accs une vue globale des menus actuellement dfinis (voir Figure 7.4). Vous pouvez accder aux contenus des sous-menus par lune des commandes MENUS > MAIN MENU, OTHER MENU, etc. Vous pouvez aussi cliquer directement dans la ligne correspondant au menu dsirdans cette vue globale.
85

Figure 7.4 Menus > Gestion des menus. Cet affichage global permet dapprendre quels sont les lments de menu actuellement visibles (publis) ou non (dpublis). Vous apprenez galement le nombre dlments qui sont en attente de suppression dans la corbeille de menu ainsi que lIdentifiant ID de chaque lment. Cest ce niveau que vous pouvez par exemple copier un menu ou en crer un nouveau.

7.2 Adaptation dun menu existant

Pour une premire prise en main, dcouvrons les menus existants. La procdure qui suit sapplique tous les menus. Choisissez par exemple la commande MENUS > MAIN MENU. Vous voyez apparatre les lments de menu qui sont rassembls dans ce menu principal (voir Figure 7.5). Si vous avez suivi nos exemples du Chapitre 4, vous avez dj francis llment Home en Accueil. Dans cette liste, vous pouvez lancer diffrentes commandes la souris. En cliquant une fois dans la coche verte, vous dsactivez llment. Cliquez nouveau pour le ractiver. Vous pouvez modifier lordre des lments dans le menu en utilisant les petits triangles verts ou en modifi ant les chiffres dans les champs voisins. Si vous adoptez la mthode des chiffres, il faut penser cliquer ensuite sur la petite icne reprsentant une disquette droite de lintitul de colonne ORDRE afin de faire prendre en compte la modification.

Figure 7.5 Gestionnaire dlment de menu > Menu principal Main Menu.
86

La colonne ACCS permet par clics successifs de basculer llment entre ltat public, ltat de rservation aux utilisateurs enregistrs (Enregistr) ou la limitation daccs au groupe dutilisateurs particuliers (Spcial). En fonction des droits daccs, le visiteur verra ou ne verra pas certains lments de menus.

7.2.1 Le bouton Menus

Ce bouton permet tout simplement de revenir la vue globale du menu concern.

7.2.2 Le bouton Dfaut

Dans le menu principal, llment qui contient une toile jaune dans sa ligne est celui qui sera affi ch en guise de bienvenue lorsque le visiteur saisit ladresse URL du site. Par dfaut, il sagit de llment Accueil. Vous pouvez en choisir un autre pour en faire votre page daccueil. Il suffit de cocher la case pour slectionner puis de cliquer sur le bouton DFAUT.

7.2.3 Les boutons Publier/Dpublier

Un lment de contenu peut tre soit visible, (cest--dire publi), soit invisible (dpubli). Vous basculez entre les deux tats en cliquant sur la coche verte ou la croix rouge. Vous pouvez aussi slectionner la ligne puis cliquer sur le bouton appropri en haut droite. Cette seconde approche permet dappliquer lopration plusieurs lments la fois.

7.2.4 Le bouton Dplacer

Ce bouton permet de dplacer un lment en un autre endroit dun menu. Prenons le cas de llment dont le titre est More about Joomla!. Slectionnez cette ligne puis cliquez sur le bouton DPLACER. Vous voyez apparatre un formulaire prsentant tous les menus disponibles. droite sont prsents les lments dplacer (voir Figure 7.6).

Figure 7.6 Menus > Main Menu > Dplacer. Slectionnez le menu qui doit devenir le parent de llment concern. Vrifi ez ensuite le rsultat dans la partie publique du site (voir Figure 7.7).

Figure 7.7 Cration dun sousmenu dans Top Menu.

87

7.2.5 Le bouton Copier

Vous pouvez bien sr copier un lment de menu. Slectionnez-le (ou plusieurs) avant dutiliser le bouton COPIER. Vous voyez apparatre un formulaire qui prsente comme pour le dplacement les diffrents menus disponibles. Il suffit de slectionner le menu destinataire.

7.2.6 Le bouton Corbeille

Pour offrir un peu plus de scurit, les lments de menus que vous supprimez ne sont pas immdiatement dtruits. Ils sont envoys dans la Corbeille qui constitue une zone temporaire. Pour supprimer un lment, slectionnez-le puis cliquez sur le bouton CORBEILLE. Vous pouvez ensuite visualiser le contenu de la Corbeille des menus au moyen de la commande MENUS > CORBEILLE DE MENU.

7.2.7 Le bouton diter (dition dlment de menu)

Cette commande permet de modifier un menu existant. Prenons comme exemple llment intitul Web Links. Slectionnez la ligne approprie puis cliquez sur le bouton DITER, ou bien cliquez directement sur le nom dans la colonne LIEN DE MENU. Vous voyez apparatre un formulaire ddition (voir Figure 7.8).

Figure 7.8 Main Menu > Accueil > diter. Ce formulaire compte trois sections :

Type de l'lment de menu ; Dtails de llment de menu ; Paramtres Basique, Composant, Systme.

88

Type de llment de menu

Tout lment de menu possde un type. Nous y reviendrons lors de la cration dun lment de menu. Un lment peut par exemple faire rfrence un composant intgr Joomla! ou un lment de contenu. Il peut aussi reprsenter un lien menant un site Web externe, entre autres choses. Cette section de la page permet de connatre le type du lien. Dans notre exemple, cest un lien vers le composant Weblinks de Joomla! (voir Figure 7.9).

Figure 7.9 dition dlment de menu > Changer llment de menu. Ce gestionnaire est une nouveaut de la version 1.5 de Joomla!. Dans la version 1.0.x, vous ne pouviez pas modifier le type des lments de menu. Il fallait supprimer tous les lments dun menu pour en crer un nouveau. Dornavant, vous pouvez modifier le type pour chaque catgorie ou pour un lment de menu, ce qui permet aux visiteurs de proposer de nouveaux liens externes. Vous pouvez ensuite refermer lditeur. Nous y reviendrons lors de la cration dun lment de menu en fin de chapitre.

dition dlment de menu Dtails

ID. Pour que les choses soient bien gres, elles doivent toutes tre identifi es de faon unique. Cest donc aussi le cas de nos lments de menu. Dans lexemple, llment possde lIdentifiant 48. La valeur est fournie par Joomla! lors de la cration de llment. Son usage est purement interne et vous ne pouvez la modifier. Titre. Cest le nom du menu tel quil apparat sur le site Web public. Alias. Il sagit dun nom ajout dans ladresse URL aprs le nom de domaine, dans un but doptimisation par rapport aux moteurs de recherches. Si le mcanisme est activ (revoyez le Chapitre 6 ce sujet), voici
89

comment se prsente ladresse URL de cet lment de menu : http://localhost/joomla150/web-links

Figure 7.10 dition dlment de menu > Dtails. Lien. Ce paramtre concerne le composant, cest--dire la portion de ladresse URL qui est situe aprs le nom de domaine. Dans notre exemple, ce lien scrit : index.php?option=com_weblinks&view=categories Afficher dans. Cette option modifie le lieu dapparition de llment, ce qui le dplace dans un autre menu. La liste associe permet de choisir parmi les menus existants. lment parent. Vous pouvez bien sr mettre en place une structure arborescente de menus et sousmenus. Dans la liste, la mention Haut signifie que llment va apparatre au plus haut niveau. Les autres lignes correspondent des sous-menus. Si nous faisons descendre le lien Web Links pour quil soit sous News, laffichage dans la liste devient celui de la Figure 7.11. Le site Web prend alors laspect de la Figure 7.12. Aprs lopration, Web Links devient un sous-menu de News. Notez quil faut dabord cliquer sur News pour accder ces dtails et voir Web Links. Vous pouvez ainsi crer une structure complexe de menus et de sous-menus. Publi. Permet de rendre llment visible ou non. Ordre. Vous choisissez ici la position de llment relativement aux autres. Niveau daccs. Vous pouvez dcider dautoriser laccs tout le monde, aux utilisateurs enregistrs ou seulement ceux du groupe spcial.
90

Figure 7.11 Arborescence dans le Gestionnaire des lments de menus.

Figure 7.12 Arborescence sur le site Web public. En cliquant, ouvrir dans. Cette option trs pratique permet de choisir de faire apparatre la cible du lien (de la commande) dans la mme fentre du navigateur ou dans une nouvelle fentre. La nouvelle fentre peut tre ouverte avec ou sans lments de navigation.

dition dlment de menu Paramtres

Les paramtres dun lment de menu dpendent de son type. Un lien simple contient moins de paramtres quune liste personnalisable ou que le lien de la page daccueil. Dans notre exemple, il sagit dun lien de catgorie (nous prsentons ce type de composants au Chapitre 9). Pour accder aux dtails dun volet de paramtres, il suffit de cliquer dans sa ligne de titre. Vous voyez le petit triangle vert orient soit droite, soit vers le bas.

Paramtres Basique
Ce groupe runit les paramtres qui sappliquent tous les types dlments de menu (voir Figure 7.13).

Figure 7.13 dition dlment de menu > Paramtres Basique.

91

Image. Permet de dsigner un fichier dimage qui doit se trouver dans la racine du Gestionnaire de mdias (/images/stories/). En fonction du modle, limage sera prsente ct de llment de menu, dans un format dpendant du modle en vigueur. Alignement de limage. Permet de dcider de faire apparatre limage gauche ou droite. Show a Feed Link (Afficher un lien de fil RSS). Il est devenu possible dans Joomla! 1.5 de gnrer un fil dinformations RSS pour chaque affichage de liste. Cette option nest pas pertinente pour tous les types de listes. Si cette option est active, des liens de fil RSS sont affi chs dans le navigateur. Ils contiennent les lments de la liste.

Paramtres Composant
Ce sous-groupe de paramtres concerne le composant qui est associ un lien ou lment de menu. Dans notre exemple il sagit du composant nomm Weblinks. Ce composant sinstalle en plusieurs tapes. Aprs le premier clic, nous voyons apparatre dans notreConfiguration les diffrentes catgories avec un texte standard (voir Figure 7.14).

Figure 7.14 Les catgories du composant Weblinks dans la partie publique. En cliquant sur une catgorie, vous voyez apparatre un tableau contenant tous les liens correspondants (voir Figure 7.15). Vous pouvez intervenir sur les paramtres du composant (voir Figure 7.16). Description. Permet dAfficher ou de masquer les titres des catgories. Intro des liens Web. Permet de saisir un titre spcifique une entre (voir Figure 7.17). Hits (accs). Vous disposez dun compteur de visites dans une colonne de la liste pour chaque page. Vous pouvez Afficher ou masquer cette colonne.

Figure 7.15 affichage sous forme de tableau dune srie de liens.

92

Figure 7.16 dition dlment de menu > Paramtres Composant.

Figure 7.17 Exemple de texte personnalis dans laffichage dune catgorie. Description des liens. Permet dAfficher ou de masquer la description situe sous le lien dans la liste. Autres catgories. Lorsque vous tes dans laffichage sous forme de tableau des liens, vous voyez apparatre soit le texte standard, soit celui saisi dans les paramtres. Vous trouvez en dessous une liste de catgories et de sections (sil y en a dautres). Cette option permet dAfficher ou de masquer cette liste. En-ttes du tableau. Permet dAfficher ou de masquer les titres des colonnes du tableau au-dessus des liens.

Paramtres Systme
Les paramtres runis dans ce groupe concernent laspect du lien de menu. La sparation logique entre les paramtres basiques et les paramtres systme nest pas toujours facile comprendre. Titre de la page. Ce champ permet dindiquer le texte du titre tel quil apparatra sur le site Web et dans le haut du navigateur.
93

Afficher le titre. Permet dAfficher ou de masquer le titre. Suffixe de classe CSS. Ce champ est destin recevoir une chane de texte spciale, par exemple mon_elementmenu. Ce texte est ajout la fin des noms de classe dans le code HTML gnr. Vous devez dfinir au niveau du fichier des styles CSS une classe portant le mme nom pour pouvoir intervenir sur la prsentation du menu concern. SSL actif. Permet dutiliser le protocole de dialogue scuris HTTPS. Le mcanisme suppose que le serveur dispose dun environnement SSL oprationnel. Dans lenvironnement local XAMPP lite, la scurisation SSL fonctionne sans problme.

Figure 7.18 dition dlment de menu > Paramtres Systme.

7.2.8 Bouton Nouveau

Ce bouton sert crer un nouveau menu, comme nous lexpliquons un peu plus loin.

7.3 Corbeille de menu

La Corbeille de menu dresse la liste de tous les lments de menu qui ont t supprims (voir Figure 7.19). Vous pouvez slectionner un ou plusieurs lments puis cliquer sur le bouton RESTAURER pour les rcuprer (voir Figure 7.20). La suppression dfinitive se fait avec le bouton SUPPRIMER.

Figure 7.19 Menus > Corbeille de menu.

Figure 7.20 Menus > Corbeille de menu > Restaurer.

94

7.4 Cration dun nouveau menu

Voyons maintenant comment crer un nouveau menu. Nous allons choisir le nom Livre JOOMLA! 1.5. Le lien devra mener la page du site offi ciel de Joomla! en France, http://www.joomla.fr/. Nous ferons apparatre le site dans une autre fentre. Le nouveau menu sera prsent sous le menu principal dans la colonne gauche. Slectionnez la commande MENUS > GESTION DES MENUS puis cliquez sur NOUVEAU. Dans le champ du type de menu, vous devez indiquer le nom interne du menu. Il faut choisir un nom suggestif sans utiliser despace ni de lettre accentue. Un nom plus suggestif peut tre donn dans le champ TITRE. Il apparatra sur le site Web. Vous devrez galement dsigner le module correspondant, et dsigner les lments pour peupler le nouveau menu (voir Figure 7.21).

Figure 7.21 Menus > Gestion des menus Nouveau. Type de menu. Cest le nom utilis dans le code de Joomla!. Vous navez pas le droit aux espaces ni aux lettres accentues. Choisissons par exemple livre_joomla. Cet Identifiant ne sera jamais visible sur le site Web. Il sert tablir la connexion logique entre le module et le menu. Titre. Le nom public du menu. Dans lexemple, nous indiquons Livre JOOMLA! 1.5. Description. Une description facultative qui napparat que dans la partie administrative, par exemple dans les listes. Titre du module. Le nom public du module. Nous choisissons aussi Livre JOOMLA! 1.5. Cliquez sur le bouton SAUVER pour provoquer la cration dun nouveau module avec les paramtres choisis. Vous revenez dans la vue globale des menus. Le nouveau menu apparat, mais il est vide (voir Figure 7.22). Par ailleurs, le nouveau menu a t ajout au menu gnral MENUS.

Figure 7.22 Le nouveau menu vide.

95

Dans la ligne du nouveau lien LIVRE JOOMLA! 1.5, cliquez sur la petite icne de la colonne LMENTS DE MENUS (elle symbolise un crayon, mais cest difficile voir). Vous accdez ainsi la page de gestion du contenu de ce menu (voir Figure 7.23).

Figure 7.23 Liste des lments du nouveau menu. Pour linstant, le menu est vide. Cliquez sur le bouton NOUVEAU. Commencez par choisir le type de llment parmi les diffrents domaines proposs (voir Figure 7.24). Pour ne pas nous aventurer dans quelque chose de trop complexe, nous allons choisir un lien externe simple qui mnera vers le site joomla.fr.

Figure 7.24 Slection du type dlment de menu. Cliquez donc sur le lien intitul LIEN EXTERNE. Vous voyez apparatre un page de saisie (voir Figure 7.25).

Figure 7.25 Nouveau lien de menu.

96

Vous connaissez dj le contenu de ce formulaire. Voici comment le renseigner dans le cas dun lment de menu. Titre. Le nom du lien qui apparat dans le menu (Site Web du projet Joomla!). Alias. Le nom abrg de ladresse URL (projet-joomla). Lien. Le lien qui mne la page Web (http://www.joomla.fr) Afficher dans. Nous allons lAfficher dans notre nouveau menu, Livre JOOMLA! 1.5. lment parent. Il ny en a pas encore car cest le premier lment. Publi. Vous allez dcider de publier ce menu ? (Oui). Ordre. Puisque cest le premier lment, il ny a pas encore de tri possible. En gnral, les nouveaux lments sont ajouts la fin des menus. Vous pourrez modifier lordre aprs avoir utilis Sauver. Niveau daccs. Choisissez de rendre le menu accessible tous les visiteurs (Public), ce qui sont Enregistr ou au groupe Spcial. En cliquant, ouvrir dans. Choisissez de faire apparatre la cible du lien dans une nouvelle fentre de navigateur. Si vous cliquez sur APPLIQUER, vous restez dans la mme page. Cliquez sur SAUVER pour enregistrer les donne et quitter cette page. Le menu est dornavant peupl dun lment. Il nest pas encore visible dans la partie publique. Il faut de nouveau publier le module correspondant. Choisissez la commande EXTENSIONS > GESTION DES MODULES (voir Figure 7.26). Cliquez dans la croix rouge de la colonne ENABLED (ACTIV). Notez les petits triangles qui permettent dintervenir sur lordre. Ny touchez pas.

Figure 7.26 Extensions > Gestion des modules. Vous pouvez dornavant accder votre site Web (pensez ractualiser par F5). Vous devriez voir apparatre le nouveau menu LIVRE JOOMLA! 1.5 (voir Figure 7.27).

97

Figure 7.27 Le nouveau menu Livre JOOMLA! 1.5 sur le site. Mais le nouveau menu na pas le mme aspect que le menu principal. Il na pas ce cadre bleu caractristique. La prsentation dpend du fichier CSS du template. Il nous reste relier logiquement notre nouveau menu au mme template que celui du menu principal. Il faut que le module fasse rfrence une classe de style CSS bien prcise. Pour linstant, notre menu est associ la classe nomme module. Il suffit daccder au code source HTML de la page pour le vrifi er (Listing 7.1).
<div class=module><div><div><div> <h3>Livre JOOMLA! 1.5</h3> <ul class=menu> <li class=item54> <a href=http://www.joomla.fr target=_blank> <span>Site Web du projet Joomla!</span> </a> </li> </ul> </div></div></div></div>

Listing 7.1 : Code source du nouveau sous-menu En comparaison, le menu principal fait rfrence la classe intitule module_menu (Listing 7.2).
<div class= module_menu><div><div><div> <h3>Menu principal</h3> <ul class=menu> <li id=current class=active item1> <a href=http://localhost/joomla150/> <span>Accueil</span> </a> </li> ... autres liens ... </ul> </div></div></div></div>

Listing 7.2 : Code source du menu principal Main Menu Il faut accder la gestion des modules pour crer la bonne liaison entre le menu et la classe CSS. Choisissez nouveau EXTENSIONS > GESTION DES MODULES > LIVRE JOOMLA! 1.5. Accdez aux dtails du volet des paramtres avancs. Dans le champ SUFFIXE DE CLASSE DE MODULE, saisissez lIdentifiant suivant (voir Figure 7.28) :
_menu

98

Figure 7.28 Modification du suffixe de classe CSS

Accdez nouveau votre site Web. Le menu est correctement mis en forme (voir Figure 7.29). Si vous cliquez sur lunique lien du menu (SITE WEB DU PROJET JOOMLA!), la page daccueil du site cible apparat.

Figure 7.29 Le nouveau menu avec un style CSS adapt.

99

CHAPITRE 8 : LE MENU CONTENU

Le menu Contenu regroupe toutes les sections de contenus du site. Un contenu correspondant du texte avec du formatage HTML sappelle dans Joomla! un article. La structure de stockage des contenus est la suivante dans Joomla! :
Contenus-+- Section1 -+- Catgorie1 -+| | +| | +| +- Catgorie2 +| ++- Section1 -+- Catgorie1 -+| | +| | +| +- Catgorie2 +| ++- Contenu statique-+- Contenu +- Contenu +- Contenu Contenu1 Contenu2 Contenu3 Contenu1 Contenu2 Contenu1 Contenu2 Contenu3 Contenu1 Contenu2 non catgoris1 non catgoris2 non catgoris3

Cette structure se rapproche beaucoup de celle dune arborescence de dossiers de disque dur. Vous pouvez crer autant de sections, de catgories et de contenus statiques que vous voulez. Vous ntes pas forc de classer tous vos articles dans des sections et des catgories. Lorsque vous archivez un lment, toute la structure permettant de reprer cet lment est prise en compte dans larchive. Cette structure prdtermine a des avantages et des inconvnients. Le principal avantage est le fait que la structure reprsente une sorte de standard qui permet tout administrateur de sy retrouver. Cela simplifi e la prise en mains et permet de garder une bonne vue densemble du site. Linconvnient est que cette structure deux sous-niveaux nest pas modifi able. Certains administrateurs se sentent de ce fait limits dans la personnalisation de leur site Web. Mais ce sujet est trs suggestif. Vous pouvez reprsenter nimporte quelle structure de navigation en combinant correctement des sections, des catgories, des Menus et des contenus. Le problme le plus important est plutt celui-ci : Quest-ce que je dsire communiquer avec quelle logique ? Le menu CONTENU donne accs diffrents espaces de travail (crans) permettant dintervenir sur la structure et sur les contenus (voir Figure 8.1).

Figure 8.1 .
100

8.1 Gestion des articles 8.2 Cration dun article 8.3 Corbeille des articles 8.4 Gestion des sections 8.5 Gestion des catgories 8.6 Gestion de la page daccueil 8.7 dition directe sur le site

8.1 Gestion des articles

Le sous-menu CONTENU > GESTION DES ARTICLES donne accs la vue globale des articles (voir Figure 8.2). Cest votre table dorientation parmi tous les articles du site Web. Vous pouvez filtrer la liste au moyen des quatre listes den-ttes de colonne, par section, catgorie, auteur et tat. Vous disposez galement dun champ de recherche pour retrouver des articles en fonction de leur titre. Sous la liste se trouve la barre de navigation qui permet de passer dune page lautre. Un paramtre permet de choisir le nombre de lignes par page daffichage. Par dfaut, la valeur est la mme que celle dfinie dans les paramtres (voir la section 8.1.2).

Figure 8.2 Contenu - Liste des articles. Vous pouvez modifier lordre de tri en cliquant dans len-tte dune des colonnes SECTION, CATGORIE, AUTEUR et TITRE.

8.1.1 Description de la liste des articles

gauche de chaque ligne une case cocher permet de slectionner llment puis de lui appliquer une action. La case cocher de len-tte de la colonne permet de slectionner tous les articles de la liste. Vous pouvez cliquer dans le titre dun article pour basculer en mode dition de son contenu (voir Figure 8.3).

101

Figure 8.3 Exemple ddition dun article. De retour dans laffichage dans la liste, nous trouvons les options suivantes pour chaque article : Publi. Permet de savoir si larticle est visible sur le site (coche verte) ou non (croix rouge). Un article peut ne pas tre visible mme sil est Publi parce que sa date de fin de publication est passe. Llment a dans ce cas t automatiquement archiv. En bas de liste se trouve la lgende des icnes de ltat de publication (en suspens, courant, expir, non publi, archiv). Page daccueil. Permet de savoir si larticle est visible sur la premire page du site (revoyez le Chapitre 3). Ordre. Elle permet dintervenir sur lordre des articles en utilisant les petites fl ches vertes. Vous pouvez galement saisir un nouveau numro dordre dans le champ associ, en cliquant ensuite sur la petite icne reprsentant une disquette pour enregistrer la modification. Accs. Affiche surtout des mentions Public. En cliquant sur la mention, vous basculez tour tour entre les trois tats Public, Enregistr et Spcial. Section. Elle indique la section laquelle appartient larticle. Vous pouvez cliquer sur le nom de section pour basculer en mode dition. Les articles non lis une section sont marqus comme Non catgoriss. Ils correspondent aux anciens contenus statiques de Joomla! 1.0. Catgorie. Elle correspond des sous-sections. En cliquant sur le nom, vous basculez en dition de la catgorie. Auteur. Rappelle le nom de lauteur du contenu. Si vous cliquez sur le nom, vous accdez la gestion de cet utilisateur. Date. Rappelle la date de cration de larticle. ID. Cest un Identifiant unique pour larticle dans la base de donnes. Cette valeur est utilise dans ladresse URL qui dsigne larticle.
102

Info: Joomla! 1.0.x dfinissait deux champs de type Texte, un pour le chapeau (accroche ou Teaser) et un autre pour le texte complet. Cette structure a t abandonne dans Joomla! 1.5, mais un aspect visuel quivalent est disponible. Dornavant, vous pouvez dsigner lendroit o larticle doit tre coup en utilisant lun des deux boutons LIRE LA SUITE et SAUT DE PAGE. Il ny a plus non plus de distinction entre les articles statiques et les articles dynamiques. Les articles statiques sont dornavant des articles Non catgoriss. Ils peuvent aussi apparatre sur la page daccueil.

8.1.2 Boutons de gestion des articles

Vous pouvez appliquer diffrents traitement un ou plusieurs articles slectionns dans la liste (voir Figure 8.4).

Figure 8.4 Les boutons disponibles dans la gestion des articles.

Archiver et Dsarchiver
Comme son nom lindique une archive sert conserver des contenus en rserve mais ils ne sont plus consultables par les visiteurs. Vous pouvez envoyer un article dans ce stock en cliquant sur le bouton ARCHIVER. Larticle apparat ensuite sur un fond gris dans la liste (voir Figure 8.5).

Figure 8.5 Exemple darticles archivs. En utilisant la mention ARCHIV dans le filtre dtat, vous pouvez limiter la liste aux articles archivs. Dans certains contextes, vous pouvez avoir intrt rendre invisible un article archiv. Voyez galement le Chapitre 10.3.7.

Publier et Dpublier
Ces deux boutons permettent de rendre un article visible ou non sur le site.

Dplacer et Copier
Ces deux boutons permettent de dplacer ou de copier un ou plusieurs articles vers une autre catgorie ou une autre section.

103

Corbeille
Permet denvoyer un ou plusieurs articles dans la Corbeille pour suppression ultrieure.

Paramtres
Ce bouton fait apparatre une fentre fl ottante sur fond assombri qui runit tous les paramtres de la Configuration gnrale relative aux articles (voir Figure 8.6). Vous pouvez personnaliser laspect dun article au moyen des paramtres spcifiques disponibles dans la fentre ddition de contenu. Info: La version 1.0 de Joomla! comportait de nombreux paramtres dans la section deConfiguration globale. Dans Joomla! 1.5, les paramtres ont t ramens au niveau de chaque composant. Cest pourquoi vous trouvez les paramtres des articles dans la liste de gestion des articles et les paramtres deConfiguration des chanes de recherche dans le composant de recherche.

Figure 8.6 Paramtre deConfigurationgnrale des articles.

8.2 Cration dun article

Voyons comment crer un article qui doit apparatre sur la page daccueil. Dans la liste des articles, cliquez sur le bouton NOUVEAU. Vous voyez apparatre une fentre ddition contenant une vaste zone de saisie sur la gauche (voir Figure 8.7).
104

Figure 8.7 Exemple de cration dun article. Saisissez un titre pour larticle (par exemple Mes Actualits) et ventuellement un Alias (par exemple mesactu). Saisissez ensuite le texte de larticle ou bien rcuprez quelques blocs de texte dans un autre fichier (vous pouvez copier/coller le texte du site www.loremipsum.net). Voici comment configurer les autres options :

Section : Non catgoris ; Catgorie : Non catgoris ; Publi : Oui ; Page d'accueil (Frontpage) : Oui.

Cliquez sur le bouton APPLIQUER puis basculez dans la partie publique de votre site Web. Votre nouvel article apparat dj sur la page daccueil !

Figure 8.8 Le nouvel article sur la page daccueil.

105

En quelques secondes, lessentiel est fait. Occupons-nous maintenant du dtail. Nous voudrions tout dabord ne faire apparatre que le dbut de larticle sur la page daccueil. Rebasculez dans la page ddition et placez le curseur lendroit o vous voulez sparer le chapeau de la suite. Sous le volet ddition, cliquez sur le bouton LIRE LA SUITE. Vous voyez apparatre une ligne tirete rouge qui marque la sparation entre les deux parties du texte (voir Figure 8.9).

Figure 8.9 dition darticle : Insertion dune section Lire la suite. Vous pouvez galement enrichir laspect du texte au moyen des nombreux outils ddition disponibles. Cliquez ensuite sur APPLIQUER et allez voir le rsultat sur la page daccueil (voir Figure 8.10).

Figure 8.10 Le lien Lire la suite est en place. Revenons tudier les paramtres disponibles pour un article.

8.2.1 Paramtres
Comme au chapitre prcdent, lors de la cration dun nouveau menu, vous disposez de plusieurs blocs de paramtres. La partie suprieure de la colonne de droite donne des informations gnrales.
106

ID de larticle. Numro didentifi cation unique de larticle dans la base de donnes. tat. tat actuel (Publi dans lexemple). Clics. Nombre daccs cet article. Le bouton RINITIALISER permet de remettre le compteur zro. Rviser. Au dpart, les articles portent le numro de rvision 1. Ce numro augmente chaque sauvegarde (vous pourrez profiter de ce paramtre pour mettre en place une gestion des mises jour). Cr. Date de cration de larticle. Dernire modification. Date de dernire rvision du contenu.

Paramtres Article
Le premier bloc de paramtres runit les informations gnrales (voir Figure 8.11). Auteur. Vous pouvez modifier le nom de lauteur dans la liste. Elle propose tous les utilisateurs identifis. Pseudo de lauteur. Permet dindiquer un pseudonyme la place du nom vritable de lauteur. Niveau daccs. Choix parmi les trois groupes dutilisateurs. Date de cration. Vous pouvez modifier ici la date de cration. Utilisez le petit bouton de calendrier pour choisir la date de faon confortable.

Figure 8.11 dition darticle Paramtres darticles. Dbut de publication. Permet de dcider de la date partir de laquelle larticle sera rendu public. Par dfaut, ils le sont immdiatement. Profi tez du bouton CALENDRIER.
107

Fin de publication. Permet de spcifier une date limite de publication de larticle. Par dfaut, cest Jamais. Vous disposez galement dun bouton CALENDRIER.

Paramtres Avancs
Ce bloc de paramtres permet de personnaliser toute une srie de paramtres galement dfinis de faon globale, revoyez le Chapitre 8.1 (voir Figure 8.12). Ces paramtres nont deffet que lorsque vous Affichez le texte complet de larticle, cest--dire aprs avoir cliqu sur le lien LIRE LA SUITE. Pour laffichage de la partie initiale (le chapeau), les paramtres sont modifier dans la dfinition du lien de menu correspondant. Afficher le titre. Voulez-vous ou non Afficher le titre de larticle ? Titres cliquables. Permet de personnaliser les paramtres globaux. Texte dintroduction. Faut-il Afficher ou non le texte du chapeau ? Nom de la section. affichage ou pas du nom de la section. Titre de section cliquable. Le nom de section doit-il apparatre comme lien dans tous les articles de la section ? Nom de catgorie. Faut-il Afficher le nom de la catgorie ?

108

Figure 8.12 dition darticle Paramtres avancs. Nom de catgorie cliquable. Faut-il Afficher le nom de la catgorie comme lien dans toutes les catgories de cette section ? Les sept paramtres suivants permettent de personnaliser les rglages globaux. Voyons les derniers paramtres : Langue du contenu. Permet de choisir la langue dans laquelle larticle est rdig. Cest une nouvelle fonction qui offre dintressantes possibilits en combinaison avec lextension Joomfi sh de Alex Kempkens. Le site Web peut ainsi tre affi ch dans une langue ou une autre en fonction de la langue des contenus. Rfrence de cl. Vous pouvez spcifier ici les rfrences qui serviront dans le cas dune exportation au format DocBook. Nintresse actuellement que les dveloppeurs qui soccupent du systme daide. Texte alternatif Lire la suite. Permet dindiquer un autre texte pour le lien LIRE LA SUITE, ce qui est notamment utile pour augmenter laccessibilit du site aux personnes handicapes.

Informations sur les mtadonnes

Ce troisime bloc de paramtres sert dfinir une description et des mots cls qui sont exploites sous forme de mtadonnes. Ce que vous saisissez ici sera insr au niveau du code source HTML au niveau des balises Mta, en complment des mtadonnes dj dfinies dans laConfiguration globale (voir Figure 8.13).

Figure 8.13 dition de larticle Mtadonnes. Vous pouvez dfinir dans la section ROBOTS des mots cls qui seront exploits par les robots de classification des sites Web. Voici la balise Mta correspondante :
<meta name= robots content= Mot1 Mot2 />

109

Enfin, le champ AUTEUR permet dajouter un nom dauteur diffrent lintention des programmes qui exploitent les balises Mta.

8.2.2 Images et illustrations

Comment faire pour illustrer les contenus avec des images ? Cette question revient sans cesse dans le monde des systmes de gestion de contenus. Voici les diffrentes tapes requises :

il faut crer limage (appareil photo numrique ou scanner) ; il faut la transfrer (ADSL ou rseau) ; il faut ventuellement la retoucher (logiciel de retouche graphique de style GIMP) ; il faut la transfrer sur le serveur (par FTP ou PHP-Upload) ; et il faut enfin l'insrer dans larticle.

Diffrentes possibilits soffrent vous chaque tape. Joomla! exploite dabord les fichiers dimages qui ont t ajoutes sa zone de mdias. Vous pouvez les y slectionner directement pour les insrer dans un article. Une fois que vous tes devant lditeur de contenu, placez le curseur dans le texte lendroit o limage doit apparatre. Cliquez ensuite dans le bas de la fentre sur le bouton IMAGE pour faire apparatre une bote spcifique dinsertion (voir Figure 8.14).

Figure 8.14 dition darticle Image. Vous pouvez choisir nimporte quelle image de la zone des mdias. Si limage ny est pas encore, vous pouvez la faire ajouter en utilisant le bouton LANCER LE TRANSFERT dans le bas de la bote. Choisissez ventuellement un sous-dossier puis slectionnez limage insrer et cliquez sur le bouton INSRER en haut droite. Notez que vous pouvez donner un titre limage avant de linsrer.
110

Vous voyez ensuite apparatre limage dans le texte (voir Figure 8.15). Vous pouvez intervenir sur ses proprits dans lditeur TinyMCE. Slectionnez limage en cliquant du bouton gauche de la souris. Dans les barres doutils de lditeur, reprez le bouton reprsentant un arbre ( droite de celui montrant une ancre). Ce bouton permet douvrir la bote des proprits dimage de lditeur dans laquelle vous pouvez rgler dautres paramtres comme les liens, lexistence dune fentre surgissante, etc. (voir Figure 8.16). Dans notre exemple, nous avons dfini 15 pixels de marge verticale et horizontale (vertical/horizontal space). Pensez cliquer ensuite sur le bouton APPLIQUER pour pouvoir vrifier laspect sur le site Web ou bien via le bouton PRVISUALISER. Vous pouvez galement insrer des sauts de page. Placez le curseur puis cliquez dans le bas de la fentre sur le bouton SAUT DE PAGE. Vous voyez apparatre une bote de paramtrage du saut de page (voir Figure 8.17).

Figure 8.15 Exemple dimage insre dans un article.

Figure 8.16 Bote des paramtres dimage dans TinyMCE.

111

Figure 8.17 dition darticle Saut de page. Vous pouvez en profiter pour indiquer le titre de la page suivante et spcifier un Alias qui sera utilis par la fonction de gnration de table des matires automatiques de Joomla!. Dans notre exemple, larticle se nomme Mes actualits, mais la table des matires indique Tout sur les radis. Cliquez enfin sur le bouton INSRER UN SAUT DE PAGE pour voir apparatre le rsultat sous forme dune ligne grise. Allez voir le rsultat sur le site Web (voir Figure 8.18).

Figure 8.18 Exemple darticle rparti sur plus dune page. Vous voyez en haut darticle la mention Page x de y ainsi quun sommaire contenant le texte choisi droite. Sous larticle ont t ajouts deux liens PRC et SUIVANT pour circuler parmi les pages. Le nombre dimages et de sauts de page pouvant tre insrs dans un article nest pas limit.

8.3 Corbeille des articles

Comme pour les lments de menus, vous disposez dun filet de scurit en suppression darticle. Lorsque vous utilisez le bouton CORBEILLE dans le mode dition darticle, larticle est envoy dans ce purgatoire. En accdant la Corbeille des articles, vous pouvez restaurer un ou plusieurs articles, ou les supprimer dfinitivement (voir Figure 8.19).

8.4 Gestion des sections

La liste globale des sections propose un format qui vous est maintenant connu. Elle se distingue par la prsence de quelques colonnes spcifiques : le nombre de catgories pour chaque section, combien de ces catgories sont actives et combien sont en attente de suppression dans la Corbeille (voir Figure 8.20).

112

Figure 8.19 Corbeille des articles.

Figure 8.20 Vue globale des sections. Depuis cette fentre, vous pouvez publier ou dpublier une section, la copier, la supprimer, lditer et en crer de nouvelles.

8.4.1 diter une section

titre dexemple, voyons comment modifier un texte de la section existante News puis la relier notre nouvel lment de menu LIVRE JOOMLA! 1.5. Slectionnez la section NEWS par sa case cocher puis cliquez sur le bouton DITER (voir Figure 8.21). Titre (de la section). Il apparat dans la barre de titre du navigateur. Alias. Nom utilis dans les listes internes de Joomla!. Publi. Permet de basculer entre tat Publi et non Publi. Ordre. Permet dintervenir sur lordre des sections. Niveau daccs. Pour dcider des personnes qui accdent la section. Images. Sert associer une petite image laffichage de la section. Limage doit tre implante dans la racine du Gestionnaire de mdias (/images/stories/). Nous avons par exemple laiss le choix articles.jpg.

113

Figure 8.21 Section dition. Position de limage. Permet de contrler la position exacte de limage. Description. Cest dans cette zone de saisie que vous dcrivez la section. Si vous disposez dun diteur WYSIWYG (par dfaut), vous pourrez enrichir le texte. Mais il nous reste crer un lien avec notre nouvel lment de menu Livre JOOMLA! 1.5. Quittez la fentre ddition de la section par le bouton SAUVER. Nous devons intervenir au niveau de llment de menu Livre JOOMLA! 1.5 pour choisir le type daffichage et le nom de lentre. Choisissez la commande MENUS > MAIN MENU et cliquez sur le bouton NOUVEAU. Dans larborescence qui apparat, cliquez sur lentre ARTICLES pour accder aux dtails (voir Figure 8.22). Vous avez de nombreux choix. Puisque nous dsirons rendre visible la section des Actualits, nous pouvons choisir entre :

Section/Mise en page de la section Blog ; Section/Section Layout.

Vous pouvez dcider de prsenter les articles sous forme dune liste (toutes catgories confondues) ou dans le format BLOG (comme sur la page daccueil).

Figure 8.22 Slection dun type dlment de menu.

114

Le format LISTE prsente toutes les catgories qui dpendent de la section concerne. Le titre est celui de la section. Dans notre exemple, nous navons accs quaux deux catgories Latest News et Newsflash (voir Figure 8.23). Un clic sur le lien de catgorie fait Afficher le contenu au format dun tableau.

Figure 8.23 Vue Liste de la section News. Dans Joomla!, le format BLOG reprsente une liste dentre avec un texte dintroduction (le chapeau ou laccroche) et ventuellement un lien LIRE LA SUITE (voir Figure 8.24). Dans les deux formats, le navigateur Affiche un bouton orange li un fil dactualits appropri au contenu.

Figure 8.24 Le format Blog de la section News. Vous pouvez tester les deux formats. Ds que vous cliquez sur un format, vous basculez dans la fentre ddition du lien. La plupart des paramtres qui vous y attendent ont dj t prsents plus haut.

8.5 Gestion des catgories

Les catgories sont destines peupler les sections. Vous les contrlez de la mme faon. La vue globale sous forme de liste vous est dj familire. Dans le cas des catgories, vous voyez le nom de la section parente, le nombre darticles actifs de la catgorie et le nombre darticles en attente de suppression (voir Figure 8.25).
115

Figure 8.25 Vue globale des catgories. Si nous partons de larticle cr en dbut de chapitre, nous basculons en mode dition par la commande CONTENU > GESTION DES ARTICLES puis en cliquant sur le bouton DITER. Vous pouvez alors slectionner la section NEWS (ou Actualits) puis la catgorie LATEST NEWS (voir Figure 8.26). Larticle apparatra ensuite automatiquement dans les Listes correspondantes.

Figure 8.26 Rsultat de laffectation dun article une section et une catgorie.

8.6 Gestion de la page daccueil

La page daccueil est stratgique puisque cest celle que lon voit en arrivant sur le site Web. Le format propos par Joomla! contient les articles les plus reprsentatifs du contenu. Dans le cas dun site Web simple, comme certains prsents la fin du Chapitre 1, les choses peuvent tre diffrentes. Il peut suffi re dimplanter un grand article gnral sur la page daccueil. Rflchissez la manire dont vous pensez que votre site Web devra pouvoir voluer. Si votre page daccueil doit hberger plusieurs articles (ce qui est le cas gnral), vous allez sans doute opter pour le format BLOG prsent plus haut. Au niveau de chaque article, vous pouvez en mode dition choisir loption PAGE DACCUEIL. Si elle est active, larticle apparatra dans la fentre de gestion de la page daccueil. Cette liste possde un format proche de celui de la liste des articles. Vous pouvez crer des articles (voir Figure 8.27), et vrifi er le titre, la section, la catgorie et lauteur. Rappelons que les articles non catgoriss sont des contenus statiques. Limitez laffichage au moyen des champs de filtrage. Si le contenu de larticle dpasse les capacits daffichage de la page d accueil, des liens de navigation sont automatiquement ajouts en bas de page sur le site Web.

116

Vous pouvez intervenir sur le format de la page daccueil dans les menus (MENUS > MAIN MENU, SLECTION DE PAGE DACCUEIL puis clic sur DITER). Vous pouvez dcider quelles colonnes sont affiches et dans quel ordre, ainsi que rgler les paramtres des chapeaux des articles (voir Figure 8.28).

Figure 8.27 Contenu > Gestion de la page daccueil.

Figure 8.28 Menus > Main Menu dition de la page daccueil.

8.7 dition directe sur le site

Si vous ouvrez une session avec un compte dutilisateur privilgi comme celui de ladministrateur, vous pouvez modifier directement les contenus depuis la partie publique du site. Vous disposez cet effet dun nouveau bouton-icne qui reprsente un crayon (voir Figure 8.29).

Figure 8.29 Le bouton du mode dition depuis le site Web public.

117

Ds que vous cliquez sur ce bouton, vous voyez apparatre une fentre ddition trs proche de celle que vous utilisez dans la partie administrative (voir Figure 8.30).

Figure 8.30 dition directe depuis le site public. Le formulaire ddition propose quelques paramtres complmentaires sous lditeur. Vous pouvez par exemple charger des images et les slectionner, comme dans ladministration.

118

CHAPITRE 9 : LE MENU COMPOSANTS

En informatique, on appelle composant un programme destin tre intgr une application globale disposant dune interface utilisateur dans certains cas, et dans tous les cas dune ou de plusieurs interfaces fonctionnelles. Vous pouvez considrer les composants comme des botes noires. Vous envoyez des donnes en entre et obtenez des donnes en sortie. Vous navez pas vous proccuper de ce qui se passe lintrieur. Les botes noires peuvent avoir des domaines demploi trs divers. Certains composants sont conus de faon trs gnrique et diffuss sous forme de paquets prts installer. Cette ide de composants est trs proche de Joomla! lui-mme. La gestion des bannires ou celle dun forum de discussion se base sur des blocs fonctionnels gnriques puis adapts pour fonctionner dans Joomla! avec tous les templates et avec linterface dadministration. Dans la majorit des cas, un composant est exploit en combinaison avec un Module et un Plugin. Le Module se charge de laffichage des donnes sur le site Web et le Plugin ajoute des capacits fonctionnelles au texte qui lui est fourni (un peu comme un langage de script). Actuellement, il existe dj plus de 2 000 composants additionnels pour Joomla! 1.01 et de plus en plus dentre eux sont radapts si ncessaire pour Joomla! 1.5. Limitons-nous la prsentation de quelques composants fournis en standard. 9.1 Bannires 9.2 Contacts 9.3 Fils dactualits (Newsfeeds) 9.4 Sondages (Polls) 9.5 Liens Web (Weblinks)

9.1 Bannires
Le composant de gestion de bannires permet dAfficher cycliquement les bannires publicitaires sur le site. Le passage dune bannire lautre est gr dans Joomla! en fonction du paramtre de nombre de passages appel impression. chaque affichage du site Web, une autre bannire est prsente. Une bannire peut tre de type graphique, mais aussi de type texte (sous forme dune srie de liens). Vous pouvez en effet profiter de la mme possibilit qui est offerte au site partenaire de Google sur lesquels apparat un cartouche avec une srie de liens commerciaux. chaque affichage de votre site, une autre srie de liens texte est injecte dans la section correspondante de laffichage. Chaque affichage compte pour une impression. Le visiteur peut videmment cliquer sur la bannire ou le lien TEXTE pour accder au site Web dont ladresse a t fournie en paramtre. Le composant permet de grer les bannires et les clients annonceurs. En standard, les bannires sont en pleine taille, cest--dire 468 60 pixels. La taille du fichier ne devrait gnralement pas dpasser 20 Ko. Les trois formats supports sont .gif, .jpg et .png. Voyons comment mettre en place une bannire publicitaire. Vous devez au dpart crer, ou bien rcuprer, un fichier de bannire dont les dimensions doivent tre de 468 sur 60 pixels (voir Figure 9.1). La bannire dont nous nous servons dans lexemple suivant se trouve sur le CD-ROM dans le dossier CHAP09.

Figure 9.1 Exemple de bannire mesurant 468 pixels de large sur 60 pixels de haut.
119

9.1.1 Clients
Avant de mettre en place une bannire, il faut dfinir au moins un client qui est votre annonceur. Utilisez la commande COMPOSANTS > BANNIRE > CLIENTS, puis le bouton NOUVEAU pour crer un nouveau compte dannonceur. Validez au moyen du bouton SAUVER (voir Figure 9.2).

Figure 9.2 Composants > Bannire > Clients : cration dun client. Vous arrivez la liste des clients de bannires. Pour chaque client est indiqu le nombre de bannires actives.

9.1.2 Liste de gestion des bannires

Il reste maintenant associer une bannire graphique ou textuelle lannonceur. Par la commande COMPOSANTS > BANNIRE > BANNIRES, vous accdez la liste des bannires existantes (voir Figure 9.3). Nom. Le nom de la bannire. Client. Le nom de lannonceur. Catgorie. La catgorie de la bannire. Publi. La bannire est publie ou pas. Ordre. Permet dintervenir sur lordre daffichage des bannires dans une srie. Post-it. Les bannires ainsi dsignes sont prioritaires. affichages. Nombre daffichages effectu et nombre daffichages restant. Clics. Nombre de clics sur les bannires en absolu et relativement au nombre daffichages. Balises. Permet de dfinir des balises de catgorie pour la bannire afin de contrler son affichage. ID. Code numrique unique dans la base de donnes.

120

Figure 9.3 Composants > Bannire > Bannires.

9.1.3 Bannires graphiques

Pour dfinir une nouvelle bannire, il faut dabord charger le fichier graphique dans le stock de mdias (SITE > GESTION DES MDIAS), dans le sous-dossier /images/banner/ (Images Folder banners). Vous pouvez supprimer un fichier de bannire par la mme fentre de Gestion des mdias. Il suffit daccder aux dtails et de cliquer dans la croix rouge (voir Figure 9.4). Ds que votre fichier de bannire est disponible au bon endroit, vous pouvez utiliser le bouton NOUVEAU dans la liste de Gestion des bannires. Il ne reste qu remplir le formulaire (voir Figure 9.5). Nom. Choisissez un nom suggestif pour votre bannire pour la reprer facilement. Alias. Ce champ na pas encore dutilisation relle dans Joomla!. Il sera sans doute utilis pour ladresse URL de la bannire. Afficher la bannire. Permet de supprimer une bannire du cycle daffichage dune srie. Post-it. Les bannires ainsi dsignes sont affi ches dabord. Ordre. Permet de contrler lordre daffichage des bannires. Catgorie. En classant vos bannires dans des catgories, vous pouvez grer leur affichage de faon plus organise. Vous devez associer une catgorie chaque bannire. La gestion passe ensuite par la commande COMPOSANTS > BANNIRE > CATGORIES.

Figure 9.4 Site > Gestion des mdias.

121

Figure 9.5 Composants > Bannire > Bannires : bouton Nouveau. Clients. Choisissez lun des annonceurs dans la liste. Nombre daffichages achets. Vous indiquez ici le nombre daffichages auquel droit ce client. Vous pouvez utiliser loption ILLIMIT. URL pour le clic. Vous indiquez ici ladresse URL de la page Web vers laquelle le clic doit mener. Code personnalis pour la bannire. Ici peut tre insr un bloc de code spcial, tel que fourni par les programmes daffiliation des annonceurs partenaires. Cet cran sert galement modifier les bannires. Voil pourquoi vous trouvez galement un champ rappelant le nombre de clics effectu ainsi quun bouton pour remettre zro les clics. Description/Notes. Commentaires internes relatifs la bannire. Slecteur dimages. Permet de choisir limage associer la bannire. Elle sAffiche sous le champ du slecteur. Balises. Permet dindiquer les balises appropries. Ds que vous cliquez sur le bouton SAUVER, la bannire fait partie du cycle daffichage et devrait apparatre sur la page Web (ventuellement au bout de plusieurs actualisations).

9.1.4 Liens texte

Pour dfinir une bannire de type texte, il suffit de spcifier le lien au format HTML dans le champ intitul CODE PERSONNALIS. Pour viter de mlanger les diffrents types de bannires, vous avez intrt
122

 dfinir des catgories distinctes. Pour les liens Texte, choisissez par exemple la catgorie prdfinie Text Ads. Laffichage des bannires sur le site Web dpend dun module que nous prsentons au Chapitre 10.

9.2 Contacts
Lorsquun visiteur de votre site dsire entrer en contact avec vous, il faut que la dmarche soit simple. De nombreux sites Web de grandes et moyennes entreprises, employant donc des centaines ou des milliers de salaris, noffrent sur le site Web quune seule adresse gnrique pour prendre contact, du style info@societe.fr. Quil sagisse dun formulaire ou de la simple adresse, le visiteur, client ventuel, ne sait pas exactement qui va lire son message. Dans Joomla!, vous avez la possibilit de crer des catgories de contacts. Vous pouvez ainsi obtenir plus de prcision sur les visiteurs qui tentent de vous joindre. Joomla! peut ainsi gnrer un tableau des salaris dun dpartement dentreprise ou bien un formulaire de contact pour chaque contact. 9.2.1 Gestion des Contacts Cest dans cette fentre que vous grez toutes les informations relatives un contact via un formulaire. Au dpart, le contact propos est associ au groupe nomm Contacts. Crons un nouveau contact par la commande COMPOSANTS > CONTACTS > CONTACTS. Au dpart, vous faites face aux donnes dexemples (voir Figure 9.6).

Figure 9.6 Composants > Contacts. Cliquez sur le bouton NOUVEAU pour dfinir les coordonns du nouveau contact. Vous remarquez que vous disposez de trois volets assez chargs (voir Figure 9.7).

Figure 9.7 Composants > Contacts : Nouveau.

123

Dtails
Nom. Le nom public du contact. Alias. Ladresse URL courte. Publi. Oui ou non. Catgorie. Permet dassoci le contact une catgorie. Au dpart, il ny a que la catgorie dexemple Contacts. Lier lutilisateur. Permet de relier une dfinition de contact un compte dutilisateur existant. Niveau daccs. Groupes dutilisateurs autoriss accder cette information. ID. Code numrique unique didentifi cation du contact dans la base de donnes (en marge droite de la vue liste).

Informations diverses
Ce volet runit les informations dtailles du contact. Les champs vides sont automatiquement inaccessibles. Vous pouvez fournir quelques dtails internes dans la zone INFORMATIONS DIVERSES. Le champ IMAGE permet dajouter un portrait du contact, le fichier devant se trouver dans le sous-dossier /images/stories/. Vous pouvez bien sr utiliser SITE > GESTION DES MDIAS pour aller chercher le fichier ailleurs sil ne sy trouve pas encore.

Paramtres
Ce volet permet de choisir quelles informations doivent tre visibles. Signalons que le format VCard est un format standardis de carnet dadresses. Validez la cration du nouveau contact par le bouton SAUVER pour quil apparaisse ensuite dans la liste.

9.2.2 Cration dun lien de menu pour le contact

Supposons que nous voulions accder aux donnes de ce contact depuis le menu horizontal Top Menu. Choisissez la commande MENUS > TOP MENU puis le bouton NOUVEAU. Dans le type dlment de menu, choisissez CONTACT. Vous accdez alors aux dtails. Il vous reste choisir le format, soit une liste de tous les contacts de la catgorie (Mise en page de Catgorie Contact), soit une fi che individuelle (Mise en page standard des contacts). Choisissez le deuxime format (voir Figure 9.8). Vous faites face un formulaire de saisie dans lequel vous devez fournir un NOM et un ALIAS pour le lien, sans oublier de slectionner le contact dans les paramtres. Vous pouvez dfinir dautres paramtres au passage.

124

Figure 9.8 Liaison dlment de menu, choix du type dlment.

Figure 9.9 Cration dun lien dlment de menu. Vous pouvez maintenant vous rendre sur votre site Web. Votre menu horizontal Top Menu contient droite le nouveau lien CONTACTS. Cliquez pour voir apparatre les donnes du contact. Ladresse de courriel du destinataire nest pas visible, ce qui vite ce formulaire de devenir la cible des courrielleurs (spammers) (voir Figure 9.10). Lautre format permet de crer une liste de contacts. Dans notre exemple, elle Affiche par dfaut des numros de tlphone que nous prfrerions maintenir secrets (voir Figure 9.11). Pour modifier cela, il faut diter le lien de menu par MENUS > TOP MENU, en basculant llment CONTACTS dans le mode DITION. Si vous accdez au volet des paramtres, vous pouvez rendre invisible les champs (voir Figure 9.12).

125

Figure 9.10 Le formulaire du contact sur le site Web.

Figure 9.11 Le format Liste de contact.

Figure 9.12 Les paramtres de contrle de laffichage des dtails dun contact. Vous devez intervenir dans le volet PARAMTRES-COMPOSANT et masquer les champs. Une fois cette modification effectue, il suffit de cliquer sur le nom du contact pour ne plus voir apparatre que les donnes dans le formulaire de contact.
126

9.2.3 Catgories de contacts

Cette commande sert crer de nouvelles catgories et modifier celles qui existent. Vous y accdez par la commande CONTACTS > CATGORIES ou en cliquant sur le lien donglet CATGORIE dans la page ddition de contact (voir Figure 9.13).

Figure 9.13 Contacts > Catgories. Il suffit dutiliser le bouton DITER ou de cliquer sur le nom de la catgorie pour basculer en mode DITION. Vous pouvez associer une image la catgorie et modifier la description via lditeur intgr.Notez que pour tester le rsultat, vous devez accder llment du menu Top Menu puis utiliser le bouton CHANGER LE TYPE.

Figure 9.14 Contacts > Catgories : diter.

9.3 Fils dactualits (Newsfeeds)

Les fils dactualit sont formidables. La quantit sans cesse croissante dinformations disponibles sur Internet a rendu indispensable la cration de mthodes dorganisation effi caces. Si vous avez par exemple lhabitude de visiter rgulirement une vingtaine de sites Web la recherche de nouveauts, vous perdez du temps. Si le nombre de sites surveiller est suprieur, cela devient physiquement impossible. Les fils dactualit tentent de rsoudre ce problme. Le composant Newsfeeds permet de faire rfrence des fils dactualit qui correspondent dautres pages Web pour les intgrer vos pages. Vous disposez dun Gestionnaire de catgories et dun Gestionnaire de contenus. Les donnes dexemple proposent dj plusieurs catgories et fils dactualit.

127

Voyons comment crer un nouveau fil. Cherchez un fil disponible au moyen dun moteur de recherche ou voyez sur les sites que vous visitez habituellement o se trouve un petit bouton ou une option de fil dactualit.

9.3.1 Fils
Pour illustrer le mcanisme des Fils dactualits, nous allons dfinir un Fil qui mne la page de Blog de lauteur de ce livre. Choisissez la commande COMPOSANTS > FILS DACTUALITS > FILS puis le bouton NOUVEAU (voir Figure 9.15).

Figure 9.15 Dfinition dun nouveau Fil dactualit. Nom. Nom du Fil dactualits tel quil apparat sur le site. Alias. Adresse URL courte. Publi. Permet de contrler si le Fil doit tre publi ou non. Catgorie. Choisissez la catgorie approprie. Lien. Lien qui mne au Fil dactualits, qui est dans notre exemple ladresse du Blog de lauteur. Nombre darticles. Nombre darticles qui doivent tre relis. Priode du cache (en seconde). Frquence de rafrachissement du contenu exprim en seconde. Ordre. Les nouveaux Fils dactualits sont par dfaut prsents au dbut. Vous pouvez modifier lordre une fois que vous avez sauv votre modification. Si vous disposez dun accs Internet, le nouveau Fil peut tre suivi pour accder directement au contenu dans votre site Web (voir Figure 9.16).

9.3.2 Catgories de fils

Permet de grer les catgories pour les Fils dactualits, de la mme manire que les catgories de Contacts.

128

Figure 9.16 Nouveau Fil dactualits menant un blog.

9.4 Sondages (Polls)

Joomla! possde en standard un module de gestion de sondages qui permet de demander leur avis vos visiteurs. Un sondage est dj dfini comme exemple (voir Figure 9.17). Vous pouvez vous amuser traduire les questions comme nous lavons fait. Titre. Titre du sondage. Dlai. Dlai en secondes avant lcoulement duquel il nest pas possible de revoter. Ce paramtre permet de se prmunir contre les falsifi cations ventuelles. Options. Cette srie de champs permet dindiquer jusqu 12 options.

Figure 9.17 Composants > Sondages : Mode dition. Cliquez sur le bouton daperu PRVISUALISER pour voir quoi ressemble votre srie de questions. afin que le sondage puisse rellement sAfficher sur le site, vous devez vrifi er si le template en vigueur prvoit la place pour un cartouche de sondage. Dans le template standard, le cartouche apparat dans la colonne de droite. Vous pouvez admirer le rsultat sur le site Web.

129

Figure 9.18 Exemple de sondage sur le site Web. Essayez de voter. Vous voyez apparatre un masque de rsultat courant du vote (voir Figure 9.19). En revenant la page que vous consultiez prcdemment, vous constatez que le sondage nest plus prsent puisque vous y avez rpondu.

9.4.1 Statistiques des recherches

Dans Joomla! 1.0, vous disposiez de nombreuses possibilits pour obtenir des statistiques de frquentation de votre site Web. Mais ce mcanisme impliquait une occupation mmoire importante sur le serveur. Lquipe de dveloppement de Joomla! a donc dcid de supprimer le module de statistiques du noyau (ce qui ne pose pas de problme maintenant que lon dispose doutils externes tels que Google Analytics). Ce quun responsable dun site Web a besoin de savoir en permanence est ceci : Quest-ce que les visiteurs viennent chercher sur mon site ? . Dans Joomla! 1.5, les termes saisis pour la recherche avec leur frquences sont disponibles dans les statistiques de recherche. Il vous faut cependant activer la journalisation des critres de recherches.

Figure 9.19 Rsultat courant dun sondage sur le site Web.

130

9.5 Liens Web (Weblinks)

Cette fonction permet de btir une liste de liens ou de fichiers tlchargeables, que vous intgrez ensuite votre site Web. Pour en simplifi er la gestion, vous pouvez exploiter les catgories. Joomla! compte le nombre daccs chacun des liens. Vous pouvez dfinir les autorisations de chacun des utilisateurs enregistrs en termes daccs aux diffrents liens. Les liens autoriss apparaissent dans la liste qui sAffiche par la commande COMPOSANTS > LIENS WEB > LIENS. Les liens doivent non seulement satisfaire aux autorisations daccs par lutilisateur, mais ils doivent tre galement rendus publics.

9.5.1 Gestion des liens Web

Dans la page de gestion des liens Web, vous voyez apparatre tous les liens dfinis avec leur catgorie et le compteur daccs (voir Figure 9.20).

Figure 9.20 Composants > Liens Web > Liens. Vous pouvez modifier les paramtres applicables tous les liens globalement et dfinir de nouveaux liens en contrlant leur mode de diffusion (voir Figure 9.21).

Figure 9.21 Composants > Liens Web > Liens : Mode dition. Nom. Nom du lien tel quil apparat sur le site Web. Alias. Adresse URL courte. Publi. Publi ou non. Catgorie. Choix dune des catgories de liens. URL. Adresse URL cible du lien.
131

Ordre. Tri parmi la liste des liens. Paramtres. Permet de choisir de faire apparatre la cible du lien dans une nouvelle fentre (avec ou sans lment de Navigation) ou dans la mme fentre. Description. Permet dajouter une description du lien.

9.5.2 Catgories
Les catgories de liens Web sont accessibles par le menu COMPOSANTS > LIENS WEB > CATGORIES et permettent dorganiser la gestion des liens Web (voir Figure 9.22).

Figure 9.22 Composants > Liens Web > Catgories.

132

CHAPITRE 10 : LE MENU EXTENSIONS

Le menu Extensions centralise les fonctions de gestion de toutes les possibilits dextensions sauf les Composants qui ont leur propre menu. Il sagit donc des modules, des plugins (anciennement Mambots), des templates et des langues. Cest dans ce menu que se trouve la fonction Installateur qui permet de mettre en place et de supprimer nimporte quelle extension dans Joomla! en quelques clics (voir Figure 10.1).

Figure 10.1 Le menu Extensions. 10.8 Extensions &gt; Gestion des langues 10.1 Installer/Dsinstaller 10.2 Modules 10.3 Modules du site 10.4 Copie dun module 10.5 Modules de ladministration 10.6 Gestion des plugins 10.7 Gestion des modles-templates

10.8 Extensions &gt; Gestion des langues

Nous avons dj dcouvert cette fonction au Chapitre 4. Elle permet de choisir la langue de linterface de la partie publique et de la partie administrative.

Figure 10.29 Extensions > Gestion des langues.

10.1 Installer/Dsinstaller
partir du moment o vous en connaissez les rgles, vous pouvez vous-mme crer des extensions pour Joomla! puis les intgrer votre site Web via le module Installateur. La liste que cette commande fait apparatre prsente toutes les extensions installes, composants y compris. Vous disposez de trois mthodes pour installer une extension (voir Figure 10.2).
133

Figure 10.2 Extensions > Installer/Dsinstaller.

Tlchargement dun fichier paquetage (Archive transfrer) ; Installation depuis un rpertoire local ; Installation par dsignation dune adresse URL.

Les extensions sont prsentes sous forme de plusieurs listes pour les composants, les modules, les plugins, les templates et les langues. Nous aborderons linstallation de plusieurs composants au Chapitre 12.

10.1.1 Liste des extensions installer

Si vous accdez par exemple la liste des composants en cliquant sur le lien donglet, vous voyez tous ceux actuellement installs avec le numro de version, la date de cration et le nom de lauteur. Pour dsinstaller une extension, il suffit de slectionner la ligne puis de cliquer sur le bouton DSINSTALLER en haut droite. Attention: Les composants disparaissent inluctablement suite la dsinstallation, en emmenant parfois toutes les donnes ! Il ny a pas de Corbeille pour cette dsinstallation ! Cette approche est volontaire. Elle oblige le concepteur de lextension dcider dune stratgie. Il est parfois utile de ne pas supprimer les tableaux de donnes, par exemple lors dune mise jour. Dans notre cas, il faut supprimer toutes les donnes. Vous verrez au Chapitre 15 tous les dtails ce sujet. Vous devez dans tous les cas lire soigneusement la documentation du composant pour savoir comment le grer.

10.2 Modules
En comparaison dun composant, un module est plus simple. Cest un petit bloc de code (ou sniplet) qui est intgr puis exploit par une autre portion du programme principal, en gnral pour afficher sur le site Web des donnes gnres par un composant. La polyvalence du langage de script PHP permet de faire rcolter des donnes de sources diverses par les modules. La source peut tre situe sur votre propre site Web (par exemple les cinq articles les plus rcents) ou sur un site extrieur afin dobtenir les donnes de la mto, les cours de la Bourse, des propositions commerciales, etc.
134

Un module comprend une logique de traitement et une interface utilisateur. Il ne dispose pas de section dadministration autonome, la diffrence des composants. Cest le template de votre site Web qui exploite directement les modules et qui les dmarre. Les modules tant des programmes indpendants, vous disposez dune certaine libert, par exemple au niveau de la position dune bannire. Rappelons que le template na pas dautre but que de distribuer plusieurs modules de faon harmonieuse au sein dune mme page Web. La structure des modules offre lavantage de permettre un enrichissement simple du site Web. Du fait que les modules de la partie publique et de la partie administration de Joomla! sont diffrents, les modules correspondants sont diffrents aussi. La liste des modules affiche par la commande EXTENSIONS > GESTION DES MODULES est le point central de gestion de tous vos modules (voir Figure 10.3).

Figure 10.3 Extensions > Gestion des modules Nom du module. Nom tel quil apparat sur le site. Publi. tat visible ou non du module (Enabled). Ordre. Vous pouvez spcifier directement un numro de position puis cliquer une fois sur licne pour viter de cliquer rptition sur les fl ches bleues. Accs. modalits daccs ce module (Public, Enregistr, Spcial). Position. ce paramtre est utilis par le template pour dcider de lendroit dans la page o le module doit tre affich. Vous avez le choix entre huit positions diffrentes dans un template.

Banner (Bandeau de la bannire) ; Left (Colonne de gauche) ; Right (Colonne de droite) ; Top (Partie suprieure) ; user1 (Dfini par lutilisateur 1) ; user2 (Dfini par lutilisateur 2) ; user3 (Dfini par lutilisateur 3) ; user4 (Dfini par lutilisateur 4).

droite au-dessus de la liste, vous disposez de deux listes pour choisir la position directement et pour filtrer la liste en fonction du type de module. Nous prsentons les positions des constituants dun template dans la section 10.7 de ce chapitre. Pages. Permet de dcider dafficher le module sur toutes les pages ou seulement sur certaines.
135

Type. Il existe plusieurs types de modules. Le type MOD_MAINMENU apparat plusieurs fois dans la mesure o tous les menus se basent sur ce type. Les diffrents menus se distinguent par les paramtres. Utilisez le champ de filtrage selon le type au-dessus de la liste. ID. Numro denregistrement du module dans la base de donnes.

10.2.1 Filtrage de laffichage des Modules

Vous disposez de nombreuses possibilits de filtrage pour limiter laffichage. Elles sont les bienvenues dans la mesure o Joomla! est fourni ds le dpart avec presque trente modules. Ldition de chaque module est toujours identique. En dehors du nom et des conditions daccs, il vous faut surtout choisir dans quelle page le module doit apparatre et quelle est la position du module dans le template. Il suffit de basculer en dition de module en cliquant sur le nom du module. La liste des paramtres est trs importante au niveau des modules. Nous allons donc ne pas les ngliger dans la description que nous faisons des modules standard. La plupart des modules peuvent tre copis puis les copies personnalises au niveau du titre, de la position et des paramtres.

10.3 Modules du site

10.3.1 Breadcrumbs (mod_breadcrumbs)
Le mcanisme appel Breadcrumbs (miettes de pain ou Fil dAriane) consiste afficher les noms de la hirarchie de pages menant la page actuelle (voir Figure 10.4). Laffichage de ce fil conducteur permet au visiteur de ne jamais se perdre dans sa navigation. Un paramtre permet dafficher ou non le premier niveau (correspondant la page daccueil). Vous pouvez dsactiver laffichage du module.

Figure 10.4 Breadcrumbs. Dans le volet des paramtres, vous pouvez choisir de masquer le niveau Accueil et den changer le nom. Vous pouvez enfin ajouter un sparateur et dfinir le suffi xe de classe de module pour personnaliser laspect.

Figure 10.5 Les paramtres de Breadcrumbs.

136

10.3.2 Footer (mod_footer)

Ce module permet dafficher les informations lgales de Joomla! dans le pied de page. Vous pouvez masquer son affichage dans la page daccueil.

10.3.3 Banner (mod_banners)

Ce module sert afficher les bannires. Vous disposez dun ensemble de paramtres dans le volet DTAILS et vous pouvez dcider des pages dans lesquelles le module doit apparatre. Voici les autres paramtres disponibles (voir Figure 10.6) :

Figure 10.6 Module Bannires : Paramtres. Cible. Mode daffichage de ladresse cible : soit dans la mme fentre, soit dans une autre avec ou sans navigation. Nombre daffichages (Count). Nombre daffichages raliser. Annonceur. Permet de nafficher la bannire que dun seul client dans ce module. Catgorie. Permet de limiter les bannires affiches celles qui font partie dune catgorie spcifi e (par exemple seulement les liens textes). Recherche par tag (balise). Vous pouvez associer des balises chaque bannire. Cette option permet de limiter laffichage aux seules bannires qui possdent un mot cl particulier. Hasard. Vous pouvez contrler lordre daffichage des diffrentes bannires. Le choix SCOTCH, TRI implique que les premires bannires safficher sont celles que dsigne le marqueur Sticky. Puis les autres bannires sont prises en compte dans lordre de tri de la liste. Le choix SCOTCH, AU HASARD fait afficher dabord les bannires qui possdent le marqueur Sticky, mais aprs une slection alatoire parmi celles-ci.
137

Texte den-tte. Le texte avant la bannire. Texte de pied. Le texte aprs la bannire. Suffixe de classe de module. Permet de spcifier un identifi ant qui est ajout la fin du nom de la classe de formatage CSS. Si vous indiquez par exemple dans le champ table, la classe portera le nom module_table. Il faut dans ce cas dfinir cette nouvelle classe dans le fichier CSS appropri du template.

10.3.4 Menu principal (mod_mainmenu)

Le descriptif de module interne appel mod_mainmenu correspond au module le plus utilis. Cest ce type de module qui a servi crer le nouveau menu du Chapitre 7 (que nous avions appel LIVRE JOOMLA! 1.5). Il est du type main_menu. Les variantes correspondent au menu vertical (Main Menu) et au menu horizontal (Top Menu). Dans le cas dun menu vertical, vous pouvez choisir un affichage sans hirarchie (liste simple). Nom du menu. Indique le nom du menu auquel est associ ce module. Style du menu. Vertical, horizontal ou liste simple. Niveau de dpart. Niveau hirarchique partir duquel les articles du menu doivent tre affichs. Dernier niveau. Profondeur maximale hirarchique daffichage des articles de ce menu. Toujours afficher les sous-menus. Permet de faire afficher les dtails dun menu ou pas. Loption na dintrt quavec un menu hirarchis (voir Figure 10.8). Position de la cible. Les valeurs spcifi es ici sappliquent tous les lments de menu dont le paramtre de choix de mode douverture demande louverture dans une nouvelle fentre sans navigation. Voici un jeu de paramtres possible : top=10, left=10, width=200, height=300. Vous pouvez par les paramtres de compatibilit afficher les lments de menu sous forme dicnes de menu la manire de Joomla! 1.0.

Figure 10.7 Le volet des paramtres de module du menu principal.

138

Figure 10.8 Exemple de menu avec sous-menu. Surbrillance active. Ce paramtre permet de marquer comme actifs les lments parents. En temps normal, seul le lien actif est marqu ainsi. Attention : marquer plusieurs liens comme actifs simultanment est contraire au standard XHTML. Afficher les icnes du menu. Vous pouvez dcider ici de faire afficher les icnes, tout en sachant que la fonction dpend aussi du template en vigueur. Alignement de licne du menu. Permet de choisir entre laffichage de licne gauche ou droite. Image dindentation. Sert personnaliser la puce habituellement prsente gauche dun lment de menu. Vous pouvez slectionner une icne issue du template, conserver le choix standard de Joomla!, dfinir une image diffrente pour chaque niveau de la hirarchie ou ne rien afficher du tout. Image dindentation 1-6. Permet de choisir licne pour chacun des six niveaux. lment despacement/sparateur. Il est conseill dans le cas des menus horizontaux comme Top Menu de prvoir un sparateur entre les lments. Sparateur de fin. Vous pouvez ajouter un petit symbole la fin des lments de menus horizontaux au moyen de cette option.

10.3.5 Statistiques (mod_statistics)

Ce module est inactif par dfaut. Une fois que vous lactivez, vous devez dsigner la page sur laquelle il doit apparatre. Il donne les informations au sujet du serveur et du site Web. Info serveur. Affichage ou non des informations du serveur. Info site. Affichage ou non des informations du site. Compteur de clics. Affichage ou non du compteur de visites. Augmentation du compteur. Modification de la valeur de dpart du compteur.

10.3.6 Login Form (mod_login)

Ce module offre deux modes daffichage. Lorsque le visiteur nest pas encore identifi , il voit un formulaire didentification. Si les paramtres globaux du site le permettent (SITE > CONFIGURATION
139

GLOBALE), il peut senregistrer comme nouvel utilisateur identifi (voir Figure 10.9). Une fois que lidentification a russi, le module montre un bouton pour se dconnecter (voir Figure 10.10).

Figure 10.9 Module douverture de session mod_login.

Figure 10.10 Module douverture de session, session ouverte.

Paramtres du module
Mise en cache. Permet de maintenir le contenu du menu dans la mmoire cache pour acclrer les chargements. Suffixe de classe de module. Permet de spcifier un suffi xe qui sera ajout la classe CSS pour personnaliser laffichage du menu. Texte avant. Texte qui sera prsent avant le formulaire dans le mode Ouverture de session Login. Texte aprs. Texte prsent la fin du module. Page de redirection aprs la connexion. Sert indiquer une adresse URL vers laquelle le visiteur est amen sil russit ouvrir une session. URL de redirection aprs la dconnexion. Comme le prcdent, mais lors de la fermeture dune session (Logout). Message daccueil. Le module change daspect lorsque louverture de session russit. Il affiche alors un message daccueil et un bouton de dconnexion. Vous pouvez dcider de masquer ce message. Nom/Identifiant. Permet de faire afficher le nom complet ou le seul identifi ant dans le message daccueil.

10.3.7 Archive (mod_archive)

Comme celui des statistiques, ce module nest pas actif par dfaut. Vous devez aprs lavoir activ choisir la ou les pages sur lesquelles il doit apparatre. Il rappelle le contenu de larchive, group par mois.
140

Paramtre
Dcompte. Nombre de mois darchives afficher.

10.3.8 Sections (mod_sections)

Ce module nest pas non plus actif par dfaut. Il prsente la liste des sections existantes sur le site. Une fois quil est activ, il faut choisir les pages sur lesquelles il doit apparatre. Il offre toutes les sections disponibles (voir Figure 10.11).

Figure 10.11 Le Module Sections.

Paramtre
Dcompte. Nombre maximal de sections afficher.

10.3.9 Related Items (mod_related_items)

Ce module prsente les titres des contenus qui sont apparents au contenu actuel. Les relations sont faites en fonction des mtadonnes, donc des mots cls. Tous les mots cls du contenu actuel sont compars aux mots cls de tous les autres contenus. Si vous avez par exemple ajout dans la page prdfinie JOOMLA! LICENSE GUIDELINES ainsi que dans une page de mention lgale les termes lgal et juridique, vous verrez apparatre le nom dune des deux pages lorsque lautre saffiche.

10.3.10 Wrapper (mod_wrapper)

Ce module permet dincorporer un contenu externe, non gr par Joomla! au sein dune balise HTML nomme iframe. Cette balise incarne une zone daffichage avec barre de dfilement. Grce ce module, vous pouvez incorporer des pages HTML compltes se trouvant sur dautres serveurs dans la zone de contenu de Joomla!. La Figure 10.12 fournit un exemple.

141

Figure 10.12 Exemple de page Web lie par le module Wrapper. URL. Saisissez ici une adresse standard. Ascenseurs. Permet dafficher ou non des barres de dfilement ou dutiliser des barres automatiques qui napparaissent quen cas de besoin. Largeur/Hauteur. Largeur et hauteur du cadre en pourcentage ou en pixels. Hauteur auto. Ajustement automatique de la hauteur. Ajout automatique. Par dfaut, ladresse indique reoit en prfi xe la mention http:// si cette adresse ne commence ni par http:// ni par https://. Vous pouvez empcher ce mcanisme. Nom de la cible. Permet de spcifier le nom du cadre iframe (name attribut).

10.3.11 Feed Display (mod_feed)

Ce module permet dafficher un fil dactualit sur la page Web (voir Figure 10.13).

Paramtres du module
Url du fil. Permet de spcifier ladresse URL du Fil dactualit. Sens dcriture (Feed RTL). Permet de choisir entre criture de droite gauche ou de gauche droite.

Figure 10.13 Un fil dactualit Newsfeed en tant que module. Titre du Fil. Pour afficher ou masquer le titre. Description du Fil. Pour afficher ou masquer le texte du Fil. Image du Fil. Pour afficher ou masquer le logo du Fil. lments. Nombre dlments afficher en mme temps. Description de llment. Permet dafficher ou de masquer le corps de texte de chaque lment. En gnral, mieux vaut le masquer (comme dans notre figure). Comptage des mots. Permet de limiter laffichage de la description au nombre de mots stipul.

142

10.3.12 Qui est en ligne (Whos Online, mod_whosonline)

Ce module sert savoir qui est actuellement connect au site. Les visiteurs anonymes et les visiteurs enregistrs sont distingus.

Paramtre
Affichage. Permet de contrler laffichage du module. Vous avez le choix entre :

nombre de visiteurs anonymes et nombre de membres ; noms des utilisateurs membres enregistrs ; une combinaison des deux choix prcdents.

Figure 10.14 Le module Whos Online.

10.3.13 Sondages (Polls, mod_poll)

Ce module sert afficher les sondages. Le traitement de ces sondages est ralis par le composant appropri, qui a t dcrit au Chapitre 9.4 et qui est accessible par la commande COMPOSANTS > SONDAGES. Vous pouvez choisir dans les paramtres quel sondage afficher.

10.3.14 Publicit (Advertisement, mod_banners)

Ce module est une simple copie du module des bannires. Il est spcialis dans les bannires de la catgorie prdfinie Text Ads, cest--dire des liens textes.

10.3.15 Image alatoire (Random image, mod_random_image)

Ce module permet dafficher une des images dun dossier, choisie au hasard. Le module est actif par dfaut, mais il nest associ aucune page. Vous devez donc procder cette association en utilisant le bouton DITER pour modifi er les paramtres.

Paramtres
Type de limage. Choix du format dimage (.JPG, .PNG ou .GIF). La gestion dun seul type la fois est possible. Dossier de limage. Nom du dossier ou du dossier dans lequel se trouve la srie dimages. Choisissez par exemple images/stories/. Lien. Si vous indiquez une adresse ici, vous pouvez cliquer sur limage pour accder la page cible. Largeur (px)/Hauteur (px). Largeur et hauteur de limage afficher en pixels. Si le paramtre est non dtermin, les images sont affiches le mieux possible en fonction des contraintes du template.

143

10.3.16 Syndication (mod_syndicate)

Ce module propose les diffrents fils dactualit. Les paramtres permettent de contrler le nombre de standards supports et lutilisation dimages standard ou spcifi ques. Les contenus des fils proposs correspondent aux entres sur la page de couverture (voir Figure 10.15).

Figure 10.15 Le module Syndication.

10.3.17 Flash actu (Newsflash, mod_newsflash)

Ce module slectionne au hasard le chapeau (dbut) dun des articles du site.

Figure 10.16 Le module Newsflash.

Paramtres
Catgorie. Permet de restreindre la slection alatoire une catgorie. Mise en page. Permet de choisir entre un affichage en colonne (horizontal) ou comme dans la figure prcdente (vertical). Afficher les images. Permet de faire afficher ou non les images se trouvant dans le contenu. Titres cliquables. Si vous rpondez oui loption TITRE DE LARTICLE, vous pouvez choisir ici de relier le texte du titre la page de contenu sous forme de lien. Lire la suite (lien). Permet dafficher ou non le lien LIRE LA SUITE.... Titre de larticle. Permet dafficher ou non le titre de larticle. # darticles. Nombre maximal darticles affichs en mme temps.

10.3.18 Derniers articles (Latest News, mod_latestnews)

Ce module permet dafficher les articles dactualit les plus rcents (voir Figure 10.17). Par dfaut, le module est positionn lendroit user1 dans la page. Vous pouvez le dplacer, par exemple sur la droite.

Paramtres
Nombre afficher. Permet de dfinir le nombre dlments prsenter dans le module.
144

Ordre. Permet dafficher les articles les plus rcents ou bien les plus rcemment modifi s. Auteur. Permet de filtrer laffichage aux seuls articles dun auteur. Articles de la page daccueil. Permet dincorporer dans laffichage les articles dj affichs sur la page daccueil. ID section. Vous pouvez indiquer ici des numros denregistrement de sections (voir la colonne correspondante) en les sparant par des virgules pour limiter la slection des contenus ceux de ces sections. ID catgorie. Comme pour les sections mais pour les sous-sections que sont les catgories.

10.3.19 Articles les plus lus (Popular, mod_mostread)

Ce module slectionne et affiche les articles les plus consults.

Figure 10.17 Le module Latest News.

Figure 10.18 Le module Popular.

Paramtres
Les paramtres sont les mmes que ceux du module Latest News.

10.3.20 Fonction de recherche (Search, mod_search)

Dans le template standard, laffichage du module de recherche se limite un champ de saisie en haut droite. Les templates fournis avec Joomla! ne changent rien ce paramtrage (voir Figure 10.19).

145

Figure 10.19 Le module Search.

Paramtres du module
Largeur du champ de recherche. Longueur maximale de la saisie, par exemple trente caractres. Texte. Texte initial qui doit tre affich dans le champ pour inviter la saisie. Bouton de recherche. Permet de faire afficher un bouton de recherche. Position du bouton. Si vous avez activ le bouton, vous pouvez en choisir la position ( droite, gauche, en haut, en bas). Bouton recherche comme image. Permet dutiliser un fichier graphique pour le bouton. Texte du bouton. Permet de dfinir la lgende du bouton de recherche.

10.4 Copie dun module

Comme exemple simple de copie dun module, supposons que nous souhaitions laffichage de deux images alatoires. Un module affichera une image tire du dossier ou dossier A et lautre module des images du dossier B. Slectionnez le module RANDOM IMAGES en cochant sa case de gauche puis cliquez sur le bouton COPIER. Vous voyez apparatre un nouveau module dont le nom est COPIE DE RANDOM IMAGES. Modifi ez les donnes de votre nouveau module.

Figure 10.20 Rsultat de la copie dun module. Si vous dpubliez les deux modules LATEST NEWS et POPULAR qui occupent la place pour linstant, vous pouvez affecter les deux modules dimages au hasard aux positions user1 et user2 pour les faire apparatre cte cte au-dessus des autres rubriques de la colonne centrale.

10.5 Modules de ladministration

En cliquant sur longlet ADMINISTRATEUR de la liste des modules, vous accdez un gestionnaire analogue celui des modules du site, mais il ne prsente que les modules qui ont un emploi dans le domaine de ladministration (voir Figure 10.21).

146

Figure 10.21 Liste des modules de la partie Administration.

10.5.1 Utilisateurs connects (Logged in Users, mod_logged)

Ce module affiche la liste des utilisateurs enregistrs actuellement connects. La liste apparat en tant quonglet de page dans le panneau de contrle CONTROL PANEL, cest--dire la position cpanel (voir Figure 10.22).

10.5.2 Articles les plus lus (Popular, mod_popular)

Ce module prsente la liste des contenus les plus consults la position cpanel.

10.5.3 Derniers articles ajouts (Recent added Articles, mod_latest)

Ce module affiche la liste des articles les plus rcents la position cpanel. Les articles dj affichs sur la page daccueil ne sont pas pris en compte.

10.5.4 Menu Stats (mod_stats)

Ce module affiche les statistiques dutilisation des diffrentes commandes de menu la position cpanel.

Figure 10.22 Exemples de modules dans le volet droit du Panneau dadministration.

147

10.5.5 Footer (mod_footer)

Ce module affiche les informations lgales de Joomla! dans le bas de la fentre de la partie Administrative.

10.5.6 Unread Messages (mod_unread)

Ce module indique le nombre de messages dadministrateurs non encore lus la position header, soit en haut droite.

10.5.7 Online Users (mod_online)

Ce module affiche le nombre dutilisateurs enregistrs sur le ct la position header.

10.5.8 Quick Icons (mod_quickicon)

Ce module propose les icnes permettant daccder aux lments du panneau dadmnistration.

10.5.9 Login Form (mod_login)

Ce module se charge de laffichage du formulaire douverture de session pour la partie administrative. Ne le dsactivez jamais !

10.5.10 Admin Menu (mod_menu)

Ce module affiche les composants de navigation JavaScript de ladministration. Ne le dsactivez jamais !

10.5.11 User Status (mod_status)

Ce module gre laffichage de la zone dinformation en haut droite. Ne le dsactivez jamais !

10.5.12 Admin Submenu (mod_submenu)

Ce module se charge de la zone daffichage des onglets de page. Ne le dsactivez jamais !

10.5.13 Title (mod_title)

Ce module se charge de laffichage de la description et de licne gauche de la barre doutils. Ne le dsactivez jamais !

10.5.14 Toolbar (mod_toolbar)

Ce module se charge de laffichage de la barre doutils. Ne le dsactivez jamais !

10.5.15 CSS Admin Menu

Ce module facultatif se charge de laffichage du menu de ladministration de Joomla!.

10.6 Gestion des plugins

148

Administration Joomla! Kapitel 10 Menue Plugins

Les Plugins (alias Mambots) de Joomla! constituent une sorte de langage de script interne. Nous avons dj tir profi t dun Plugin sous la forme de lditeur TinyMCE. Tout Plugin possde un type. lheure actuelle, il existe des Plugins dans sept sections : authentication, content, editors, editors-xtd, search, system et xmlrpc. La liste des Plugins permet dactiver et dsactiver certaines fonctions (voir Figure 10.23). La grande majorit des Plugins ne possdent pas ou peu de paramtres. Ce qui est logique dans la mesure o ils sont conus pour remplir un rle clairement dfini et sont optimiss en ce sens.

10.6.1 Plugins de type Authentication

Dans Joomla! 1.5, les utilisateurs peuvent sidentifi er de diffrentes manires. Vous pouvez notamment viter vos visiteurs de senregistrer sans cesse en renouvelant leur identifi ant et leur mot de passe. Il suffit de publier le Plugin correspondant pour disposer de ces diffrents mcanisme dauthentification.

Figure 10.23 Extensions > Gestion des Plugins.

Joomla
Cest le mcanisme normal qui est en vigueur aprs un enregistrement sur le site Web.

LDAP
LDAP est un protocole rseau qui permet de grer un annuaire dutilisateurs. Il gre des services dannuaire rseau. Le Plugin se charge des interactions entre le client dannuaire LDAP (qui est ici le site Web Joomla!) et le fichier dannuaire dans lequel sont stockes les donnes didentification des personnes. Les annuaires LDAP sont trs utiliss en entreprise. Ce Plugin permet dexploiter un tel annuaire pour mettre en place un intranet dentreprise.

149

 la diffrence des autres, le Plugin LDAP compte de nombreux paramtres. Si vous optez pour ce genre dannuaire, vous devez savoir comment configurer ces paramtres.

OpenID
Le concept de lannuaire OpenID est de proposer aux utilisateurs de se faire connatre auprs dun serveur OpenID avec un compte dutilisateur, sans quils aient besoin de disposer dun compte propre avec un mot de passe. Dans certains domaines dutilisation du site Web, cela peut constituer un vritable avantage.

GMail
Google propose avec le service Gmail un systme dauthentification bas sur ladresse de messagerie. Il faut que lutilisateur dispose dun compte Gmail pour se faire reconnatre auprs de votre site. Dans certains domaines, ce mcanisme peut apporter un vrai confort.

10.6.2 Plugins de type Content

Image
Ce Plugin facultatif est conserv pour maintenir la compatibilit avec Joomla! 1.0.x. Il excute la commande {mosimage} qui peut tre insre dans les textes pour afficher des images. Certains puristes estiment que cette manire de procder est dconseiller. Son avantage est de permettre de retoucher les images facilement via le Plugin. Vous pouvez par exemple dans les paramtres rgler lespace autour et lintrieur des images.

Page Navigation
Ce Plugin se charge de la gestion et de laffichage des liens de page prcdente et page suivante sous les articles. Il faut donc lactiver.

Rating
Ce Plugin affiche les rsultats courants des votes. Il faut lactiver si vous en avez besoin.

Email Cloaking
Ce Plugin sert convertir une adresse de courriel qui a t fournie dans un article au format nom@exemple.com pour produire un lien, puis il masque ladresse dorigine (tout cela en JavaScript). Cela protge dune certaine manire les adresses de courriel du site Web contre les robots de rcupration automatique dadresses de messagerie sur les sites.

GeSHi
Comme son collgue code, GeSHI assure un formatage du code source. Il est plus riche car il offre une mise en couleurs syntaxique et permet de gnrer des listings bien prsents sur le site. Il suffit dinsrer le code source formater dans un jeu de balises <pre> ... </pre> (voir aussi le site http://qbnz.com/highlighter).
<pre>

150

if ($compteur > 0){ echo $compteur; } else{ $compteur++; } </pre>

Listing 10.1 : Utilisation du Plugin GeSHI

Load Module
Ce Plugin permet de charger les modules dans les articles. Vous pouvez par exemple lutiliser en crivant {loadposition user1}. Pagebreak Ce Plugin prend en charge les sauts de page dans les articles dans leur approche Joomla! 1.0.x. Vous lutilisez de la mme manire que le Plugin image en linsrant dans le contenu. Vous pouvez non seulement stipuler ainsi un saut de page, mais galement un titre de page ou darticle. Dans Joomla! 1.5, vous obtenez la mme chose via la bote de dialogue de dfinition de sauts de page (vue au Chapitre 8.2). Syntaxe :
<hr title= Titre de page alt= Titre class=system-pagebreak>

10.6.3 Plugins de type Editors

1.No Editor
Vous devez activer ce Plugin pour proposer aux utilisateurs laccs aux champs de type textarea sans diteur.

2.TinyMCE 2.0
Ce Plugin est naturellement activ pour intervenir sur les contenus des champs de type textarea avec lditeur TinyMCE dans sa version 2.0.

10.6.4 Plugins de type Editors-xtd Editor Button Image/Pagebreak/Readmore

Ces trois Plugins permettent de gnrer les trois boutons qui sont placs sous la fentre de lditeur. Chaque bouton mne une bote de dialogue pour respectivement, insrer une image, rgler les paramtres de saut de page et rgler les paramtres du lien LIRE LA SUITE.

10.6.5 Plugins de type Search

Les six Plugins de recherche peuvent tre activs pour les modules Content, Weblinks, Contacts, Categories, Sections et Newsfeeds. Ils tendent le primtre de travail du module de recherche. Vous devez activer le Plugin dune section pour que la recherche scrute son contenu. Pour que la recherche stende aux composants complmentaires, il faut dfinir et activer des Plugins spcifi ques.
151

10.6.6 Plugins de type System

SEF
SEF signifie Search Engine Friendly, cest--dire compatible avec les moteurs de recherche . Cest ce Plugin qui gnre les adresses URL optimises pour les robots des moteurs de recherche en correspondance avec les contenus. Vous devez lactiver si vous utilisez cette aide au rfrencement.

Log
Ce Plugin incarne le journal systme. Vous pouvez choisir lemplacement de stockage du fichier (revoyez le Chapitre 6.4). Le Listing 10.2 donne un exemple du contenu dun tel journal.
#Version: 1.0 #Date: 2008-10-29 23:39:56 #Fields: date time level c-ip status comment #Software: Joomla! 1.5.0 Production/Stable [ Takriban ] 5-October-2007 21:00 GMT 2008-10-29 23:39:56 - 127.0.0.1 - stories/france 2008-10-30 12:00:12 - 127.0.0.1 FAILURE: Invalid password 2008-10-31 13:44:11 - 127.0.0.1 FAILURE: Invalid password

Listing 10.2 : Fichier journal

Debug
Correspond la fonction de dbogage dcrite au Chapitre 6.4. Vous pouvez contrler via les paramtres la densit dinformations afficher.

Legacy
Ce Plugin dhritage a donn lieu dimportants dbats car il constitue une passerelle par rapport aux extensions de lancien monde de Joomla! 1.0. En activant ce Plugin, vous simplifi ez votre migration depuis Joomla! 1.0 vers Joomla! 1.5.

Cache
Ce Plugin gre le fonctionnement du mcanisme de cache. Vous pouvez exploiter le cache de navigateur du client et rgler la dure de maintien des donnes dans le cache.

Remember Me
Ce Plugin sert mmoriser les donnes didentification dans un fichier Cookie sur disque, ce qui vite de les saisir trop souvent pour se connecter au site Web. Ce stockage nest ralis quaprs accord de lutilisateur en cochant une case.

Backlink
Ce Plugin de compatibilit permet de convertir danciens liens de Joomla! 1.0 menant des articles pour quils fonctionnent selon la logique de Joomla! 1.5.
152

10.6.7 Plugins de type User

Joomla!
Ce Plugin cre un enregistrement pour un utilisateur dans la table de base de donnes ds quil a russi ouvrir une session.

10.6.8 Plugins de type xmlrpc

Rappelons que linterface de programmation XML-RPC permet de piloter et de dialoguer avec Joomla! de lextrieur.

XML_RPC_Joomla
Ce Plugin permet de contrler des fonctions spcifi ques de linfrastructure de Joomla! via linterface XML-RPC.

XML-RPC-Blogger API
Ce Plugin sert accueillir des contenus en provenance dautres plates-formes, par exemple des photos de Flickr. lheure actuelle, linterface reconnue est celle de Blogger. Rappelons que de nombreuses plates-formes Web 2.0 exploitent linterface API MetaWeblog, qui sera trs prochainement disponible pour Joomla! 1.5. Au niveau des paramtres, vous pouvez slectionner la section et la catgorie auxquelles les articles rcuprs doivent tre associs.

10.7 Gestion des modles-templates

Nous connaissons dj la liste des templates puisque nous avions vu au Chapitre 4 comment changer le template du site Web. Joomla! distingue les templates du site public de ceux de la partie administrative (voir Figure 10.24). Dans la suite, nous parlerons de TEMPLATE ou de MODLE, dans la mesure o linterface utilisateur franaise nest pas encore fi ge sur ce point de terminologie.

10.7.1 Gestion des templates : Site

Cette liste prsente les templates actuellement installs pour la partie publique. Nous avons vu au Chapitre 4 que vous pouviez changer le template par dfaut et modifi er le template utilis pour certains lments de menu. Notez que vous navez pas accs tous les paramtres du template actuellement par dfaut. Pour le modifi er, activez un autre template (Dfaut) le temps dappliquer vos modifications.

Figure 10.24 Gestion des templates.

dition dun template

Le bouton DITER permet daccder aux proprits du template slectionn (voir Figure 10.25). La lliste des paramtres rappelle notamment les lments de menu associs au template. Vous pouvez effectuer une slection parmi les lments de cette liste. Pour slectionner plusieurs lments non voisins,
153

maintenez enfonc la touche CTRL tout en cliquant. Notez que seuls les paramtres que le template peut prendre en compte sont proposs.

Bouton Prvisualiser
Ce bouton est beaucoup plus utile que son nom le laisse croire. Il vous permet dadmirer un aperu de la structure du template par dfaut du site Web. Un effet graphique permet de distinguer les limites des positions des diffrents modules. Cela vous aide comprendre comment placer vos modules en fonction des diffrentes zones de laffichage (voir Figure 10.26).

Figure 10.25 Extensions > Gestion des templates : dition.

Figure 10.26 Affichage des positions des modules du template standard.

Bouton diter le HTML

Cette commande donne un accs direct au code source HTML du template slectionn (voir Figure 10.27). Tout template contient un fichier HTML. Rappelons que les Templates Snippets sont des commandes prdfinies permettant de dclencher des actions prcises dans le template.

Bouton diter le CSS

Cette commande permet daccder au code source des feuilles de style CSS du template. Vous pouvez grer plusieurs fichiers CSS pour un mme template (voir Figure 10.28). Vous devez dans ce cas choisir votre fichier puis cliquer sur le bouton DITER.
154

Figure 10.27 Site > Gestion des templates : dition du HTML.

Figure 10.28 dition du code source CSS dun template. Info: Il est conseill davoir une bonne matrise des langages HTML et CSS avant dintervenir sur ces fichiers sources. Il reste nanmoins intressant de voir (sans rien changer) comment est structure la dfinition dun template, mais nous y reviendrons au Chapitre 13.

10.7.2 Modles-templates de ladministration

Lapproche est strictement la mme pour la partie administration que pour la partie publique. Vous accdez la liste des templates installs et vous pouvez intervenir sur chacun deux. En standard, il ny a quun template dadministration.

155

CHAPITRE 11 : LE MENU OUTILS

Le menu Outils runit quelques fonctions rserves aux administrateurs : un systme de messagerie interne, une fonction de diffusion de courriels en circulaire et une fonction de libration technique des verrous bloquant laccs aux articles. 11.1 Systme de messagerie interne 11.2 Envoi massif de courriels (circulaires) 11.3 Vrification globale

11.1 Systme de messagerie interne

La commande OUTILS > LIRE LES MESSAGES correspond une bote de rception de courriel. Vous y trouvez tous les messages des utilisateurs ou du systme destins ladministrateur du site (voir Figure 11.1).

Figure 11.1 Bote de rception de la messagerie interne. Cliquez sur le sujet ou lexpditeur pour lire le message. Cette action active automatiquement son tmoin de lecture. Vous trouverez ici les messages mis par le systme lorsquun utilisateur a ajout un nouveau contenu ou un nouveau lien depuis linterface publique. Le bouton NOUVEAU ou la commande OUTILS > CRIRE UN MESSAGE permet de rdiger un message destination de lun des utilisateurs autoriss accder la partie administrative du site. Le bouton PARAMTRES donne accs quelques options de confi guration : Verrouiller la bote de rception. Si vous tes lunique administrateur du site, vous pouvez verrouiller la messagerie interne pour ne plus recevoir de messages. Si vous tes plusieurs, demandez dabord lavis de vos collgues. Me prvenir par e-mail lors de nouveaux messages. Cette fonction pratique demande Joomla! de retransfrer les messages ladresse spcifie dans la partie de gestion des comptes utilisateurs. Purger automatiquement les messages. Permet de vider la bote de rception priodiquement en supprimant les messages au bout du nombre de jours de prsence spcifi.

11.2 Envoi massif de courriels (circulaires)

Profitez de la possibilit de prvenir tous vos utilisateurs avec un seul envoi de message (voir Figure 11.2).

156

Figure 11.2 Exemple de courriel en circulaire. Cette fonction est idale pour maintenir un contact riche avec vos utilisateurs, mais nen profi tez pas pour devenir un pourrielleur (spammer) ! E-mail aux sous-groupes. Si vous activez cette option, le message est adress galement aux sousgroupes du groupe dutilisateurs slectionn. Envoyer en HTML. Cette option permet de prserver les enrichissements de format que vous aurez ajouts au texte de votre message. De plus en plus de clients de messagerie acceptent ce format enrichi. Mais chaque utilisateur peut interdire ou refuser au coup par coup de recevoir un message ce format (par peur des virus ou, de faon plus fonde, pour viter les messages dans lesquels ont t insrs des pices jointes lourdes). Groupe. Permet de choisir le groupe dutilisateurs destinataire de la circulaire Sujet. Len-tte de votre message. Message. Le corps du message. Pour expdier votre circulaire, il faut dabord rgler un paramtre par la commande SITE > CONFIGURATION GLOBALE, PAGE SERVEUR, VOLET RGLAGES E-MAIL. Par exemple, pour envoyer la circulaire dans un contexte local sans avoir confi gur de serveur de messagerie, vous pouvez indiquer lidentit du serveur SMTP de votre fournisseur daccs. Le bouton de paramtrage donne accs des options pour dfi nir le pied de message et un prfi xe pour la ligne de sujet. Ce prfi xe est trs pratique car il peut servir faire trier les messages en rception dans des sous-dossiers.

11.3 Vrification globale

Lorsquun utilisateur autoris bascule en mode ddition dun contenu, llment est verrouill. Seul cet utilisateur peut alors y accder. Pendant ce temps, les autres utilisateurs voient apparatre un cadenas gauche du nom de llment. Une fois que le contenu a t sauvegard, il est dverrouill et le cadenas disparat. Si lutilisateur a referm brutalement sa fentre de navigation ou si sa connexion Internet sest interrompue, llment reste verrouill et nest plus modifi able.

157

Cest pour rsoudre ce problme qua t conue la fonction de validation globale. En choisissant cette commande, vous faites vrifi er tous les lments en cours de modifi cation, ce qui permet dafficher ensuite la liste des lments concerns (voir Figure 11.3). Linconvnient de cette vrifi cation globale est quelle dverrouille rellement tous les contenus. Si quelquun sapprte modifi er un lment, ce dernier reste dverrouill et deux modifi cations en parallle deviennent possibles. Utilisez donc cette fonction avec prcaution et vrifi ez dabord qui est actuellement connect.

Figure 11.3 Vrification globale.

12 Extensions
Vous pouvez trs facilement augmenter la richesse fonctionnelle de Joomla! en lui ajoutant des extensions. Il en existe dj des centaines pour Joomla! 1.0.x. Lquipe de projet de Joomla! a mis en place une section ddie sur le site Web offi ciel. Rendez-vous lune des deux adresses http://www.joomlafrance.org/telecharger ou http://extensions.joomla.org/. Vous pouvez y faire votre choix dextensions puis procder leur mise en place (voir Figure 12.1).

Figure 12.1 Exemple dannuaire des extensions Joomla!.

158

Vous pouvez mme crer vos extensions comme nous le montrons au Chapitre 15. Si cette extension peut tre utile aux autres, il vous suffira ensuite de la faire ajouter lannuaire. Les utilisateurs de Joomla! pourront linstaller, lvaluer et vous renvoyer des commentaires. Vous verrez rapidement que ce milieu est trs enthousiaste, et vous obtiendrez sans doute de laide pour amliorer encore votre cration. Le terme extension regroupe les composants, les modules, les plugins et dautres programmes externes. Joomla! possde une structure trs modulaire. Grce son installateur, les extensions sont faciles mettre en place. titre dexemple, le nombre dextensions disponibles en novembre 2007 slevait 2 267, dont 97 composants dont la compatibilit a t vrifi e avec Joomla! 1.5 (ce nest pas encore le cas de tous). En effet, certains composants trs apprcis comme celui de commerce lectronique Virtuemart ou la galerie de photos Pony nont pas encore t adapts Joomla! 1.5. Mais toutes les extensions les plus utilises sont en cours de migration. Tenez-vous au courant des dernires volutions. Lexploitation des extensions ne change pas dans Joomla!1.5. Les modifications concernent le code source et une meilleure intgration. Nous allons dans ce chapitre dcouvrir lextension de gestion de forums de discussion FireBoard et lextension de gestion de tlchargement de documents et de fichiers DOCman. Pour ces deux composants, vous devez activer un plugin spcial de compatibilit appel Legacy en accdant la liste des Plugins par le menu EXTENSIONS. Lactivit de ce mode peut se vrifier par la prsence dun tmoin indiquant Compatibilit 1.0 ou Legacy 1.0 dans le coin suprieur droit de la fentre (voir Figure 12.2).

Figure 12.2 Le Plugin Legacy activ et son tmoin. Pour installer et dsinstaller un composant, vous utilisez le mme outil que pour les langues, les templates, les modules et les plugins (commande EXTENSIONS > INSTALLER/DSINSTALLER). Les extensions se prsentent presque toujours sous forme de paquetages, cest--dire dun fichier archive compress contenant une structure de sous-dossiers, et au moins un fichier de description XML pour linstallateur. Cest grce lui quil est possible dans Joomla! dinstaller des extensions trs diverses avec le mme outil.
159

Vous verrez aux Chapitres 13 et 15 comment crer votre tour un tel fichier paquetage.

12.1 Fireboard (Forum)

Chapitre 12 Fireboard Forum

Fireboard constitue un excellent forum de discussion disposant de nombreuses possibilits :

1. 2. 3. 4. cration de catgories et de sous-catgories ; gestion de Forums multiples avec droit d'accs ; profi ls des utilisateurs et avatars ; tlchargement de fichiers et dimages avec les messages.

Et bien dautres choses encore.

12.1.1 Installation
Linstallation du forum est trs simple. Procurez-vous le fichier paquetage le plus rcent (sur le CD compagnon, nous fournissons le fichier Fireboard_Forum_1.0.4_Stable.zip). Certains paquetages sont des regroupements quil faut dcompresser pour avoir accs au paquetage du composant luimme (le nom du fichier commence gnralement par com_. Lorsque vous tes face votre fichier paquetage, jetez un oeil son contenu. Sil contient directement de nombreux fichiers, vous pouvez linstaller tel quel. Vous devez au minimum reprer dans le premier sous-niveau un fichier au format XML portant le nom du composant (par exemple fireboard.xml). Choisissez la commande EXTENSIONS > INSTALLER/DSINSTALLER puis cliquez sur le bouton PARCOURIR et dsignez le fichier paquetage. Cliquez ensuite sur le bouton TRANSFERT DE FICHIER ET INSTALLATION puis patientez (voir Figure 12.3).

Figure 12.3 Installation de Fireboard. En fin dinstallation, vous devez voir apparatre toute une srie de messages affichs en vert. Faites dfiler le contenu jusqu voir la fin de la liste des messages (voir Figure 12.4).
160

Figure 12.4 Message de fin dinstallation russie. Les fichiers du composant ont t distribus dans les sous-dossiers appropris. Si vous ouvrez maintenant le menu COMPOSANT, vous devez voir une nouvelle commande intitule Choisissez cette commande pour accder au panneau de contrle gnral. Vous devez maintenant installer les tables de la base de donnes.
FIREBOARD.

Reprez sous la barre de menu les deux boutons de lassistant de base de donnes et cliquez sur le bouton APPLIQUER (voir Figure 12.5).

Figure 12.5 Installation des tables de la base de donnes. Votre forum est maintenant install.

12.1.2 Fichiers de langues

Le paquetage que vous avez install dispose normalement des fichiers de langues pour profiter de linterface en franais. Pour dautres composants, ce ne sera pas le cas. Voyons donc rapidement comment ajouter les fichiers de langues appropris et comment vrifier sils sont bien en place. Si vous disposez dun fichier paquetage de langues, il faut le dcompresser pour obtenir une structure hirarchique comme celle de la Figure 12.6.

161

Figure 12.6 La structure hirarchique qui mne aux fichiers de langues. Dans le cas du composant Fireboard, il y a deux sous-dossiers contenant chacun trois fichiers. La structure du fichier paquetage dune langue est identique celle de la structure destinataire dans linstallation de Joomla! 1.5. Le fichier de linterface administrative suivant est copier depuis le paquetage :
[Paquetage]administrator/components/com_fireboard/language/french.php

Il faut le copier cet endroit

[CheminJoomla]/administrator/components/com_fireboard/language/french.php

De mme pour le fichier de linterface publique :

[Paquetage]/components/com_fireboard/language/french.php

Il faut le copier dans ce sous-dossier :

[CheminJoomla]/components/com_fireboard/language/french.php

Aprs une telle opration, les interfaces du ct public et du ct administration utilisent les nouveaux fichiers de langues (voir Figure 12.7).

162

Figure 12.7 Aspect gnral de Fireboard avec une interface en franais. Info: Dans certaines langues, il existe deux jeux de fichiers. Par exemple en allemand, il y a germani.php et germanf.php. Il en va ainsi dans les langues o il est possible dadopter une interface vouvoiement ou tutoiement. Joomla! ne peut grer quun seul fichier de langues qui sappelle dans ce cas german.php. Cest vous de dcider si vous voulez tutoyer ou vouvoyer vos visiteurs. Vous devez choisir une variante puis renommer le fichier en enlevant la lettre distinctive la fin du nom.

12.1.3 Configuration
Une fois le composant en place, quelques oprations de confi guration minimale sont raliser. Fireboard possde une telle richesse de paramtrage que nous pourrions y consacrer cinq chapitres. Limitons-nous lessentiel. Vous trouverez aisment votre chemin car linterface est trs explicite. Dans le panneau de contrle de Fireboard, cliquez sur licne CONFIGURATION DU FORUM. Vous devez au minimum choisir un nom pour le forum et spcifier une adresse de messagerie pour ladministrateur. Cest cette adresse que seront envoys les messages (voir Figure 12.8).

Figure 12.8 Configuration du forum.

12.1.4 Mise en page dun forum de discussion

Pour tirer profi t du forum, il faut dabord crer une structure. Il faut commencer par une catgorie de discussion pour ensuite dfinir des forums dans cette catgorie (voir Figure 12.9). Cliquez sur le bouton ADMINISTRATION DU FORUM puis sur le bouton NOUVEAU.

Figure 12.9 Cration dune catgorie de forum.

163

Une fois la catgorie dfi nie, utilisez le mme bouton NOUVEAU pour crer un forum dans la catgorie (voir Figure 12.10).

Figure 12.10 Cration dun nouveau forum. La liste permet de voir toutes les catgories avec les forums quelle contient. Les noms des forums sont affichs avec un retrait pour montrer leur dpendance. Il reste encore rendre publique la catgorie du forum (voir Figure 12.11).

Figure 12.11 Activation dun nouveau forum de discussion. Vous pouvez maintenant rendre votre forum accessible sur le site Web.

12.1.5 Publication du forum sur le site Web

Supposons que nous aimerions proposer un lien menant au forum dans notre nouveau menu Livre JOOMLA! 1.5. Choisissez la commande MENUS > LIVRE JOOMLA! 1.5 puis cliquez sur le bouton NOUVEAU. Vous voyez apparatre la fentre de slection du type. Slectionnez le nouveau type qui est apparu, FIREBOARD FORUM (voir Figure 12.12).

Figure 12.12 Choix du type de lien pour le forum.

164

Vous basculez ensuite dans la page ddition de llment de menu. Fournissez un titre suggestif et un alias puis cliquez sur le bouton SAUVER (voir Figure 12.13).

Figure 12.13 Choix du nom de llment de menu. Basculez maintenant vers votre site Web et rafrachissez laffichage. Vous devez voir apparatre le nouvel lment de menu. Cliquez pour accder votre forum (voir Figure 12.14).

Figure 12.14 Le forum en place sur le site Web. Vous devez bien sr ouvrir une session pour participer aux discussions.

12.2 DOCman (Plateau de tlchargement et gestion de documents)

Le composant DOCman sert associer des fichiers des descriptifs et des licences dutilisation puis rendre disponible ces lments des groupes dutilisateurs spcifi ques, pour quils puissent les tlcharger.
165

Voici les principales fonctions de DOCman :

Classement des documents dans des catgories et des sous-catgories. Importation des fichiers sur un serveur local ou un serveur distant. Accs aux documents rgis par des permissions. Cration de groupes dutilisateurs pour contrler les accs aux documents. Gnration de statistiques de tlchargement dtailles. Systme de recherche spcifi que. Vous pouvez chercher les documents daprs le nom du fichier ou daprs le descriptif. Un Plugin complmentaire permet dintgrer les documents DOCman la recherche de Joomla!. Le chemin d'accs effectif chaque document nest jamais visible. Plusieurs modles sont disponibles pour sadapter au site Web. La documentation disponible sur le Web au format Wiki est trs complte.

12.2.1 Installation
Linstallation de ce composant suit les mmes rgles que celles du forum FireBoard vu en dbut de chapitre. Rcuprez le fichier de paquetage com_docman_1.4.0rc1.zip depuis le CD-ROM ou le rseau (slectionnez bien le seul composant, pas le paquetage global qui le contient). Installez-le via la commande EXTENSIONS > INSTALLER/DSINSTALLER (voir Figure 12.15).

Figure 12.15 Installation de DOCman. Sous le logo gauche, vous voyez ensuite un bouton intitul ADD SAMPLE DATA permettant dinstaller les fichiers dexemples. Utilisez ce bouton pour que DOCman installe les lments suivants :

un fichier d'essai ; une description approprie du fichier ; une catgorie dans laquelle la description est verse ; un groupe d'utilisateurs ; une licence d'exemple.

Vous pouvez immdiatement exploiter DOCman une fois les donnes dexemples installes.

12.2.2 Configuration
DOCman est un des premiers composants supporter parfaitement lapproche structurelle des menus de Joomla! 1.5 (voir Figure 12.16).
166

Figure 12.16 Le centre de contrle de DOCman. Les menus principaux se prsentent sous forme horizontale sous le logo. Le centre de contrle propose des icnes pour accder rapidement aux mmes commandes. La partie droite est un groupe de volets dinformations. Cliquez sur le bouton ou sur le lien CONFIGURATION pour dcouvrir les nombreuses possibilits de paramtrages.

12.2.3 Fichier de langues

Normalement, le composant DOCman que vous rcuprez possde dj les fichiers de linterface en franais. Si ce nest pas le cas, vous devez rcuprer un fichier dont le nom ressemble french_docman_v1.4.0rc1.zip. Si linstallation nest pas possible par linstallateur de Joomla!, il faut implanter manuellement les cinq fichiers nomms french.backend.php, french.common.php.french.doclink. php.french.frontend.php et french.module.php depuis le sous-dossier du paquetage :
[PaquetLangue]french_docman_v1.4.0rc1\language

vers le sous-dossier suivant (voir Figure 12.17) :

[CheminJoomla]administrator\components\com_docman\language

Vous devez ensuite pour la partie publique du site rcuprer le fichier nomm french.php depuis le sousdossier du paquetage :
[PaquetLangue]french_docman_v1.4.0rc1\themes\language

vers le sous-dossier suivant (voir Figure 12.18) :

[CheminJoomla]components\com_docman\themes\default\language

167

Figure 12.17 Les fichiers de langues de la partie administration.

Figure 12.18 Le fichier de langues de la partie publique. Aprs cette opration, vous disposez des commandes et messages en franais dans la partie administrative et la partie publique (voir Figure 12.19).

Figure 12.19 Configuration de DOCman.

168

Au dpart, vous pouvez laisser tous les paramtres leur valeur dorigine. Ceux qui ont connu DOCman auparavant peuvent se rendre compte du chemin parcouru. Loutil est vraiment devenu puissant. Passons en revue les diffrentes sections fonctionnelles de DOCman : Home. Ramne au centre de contrle. Fichiers. Permet de tlcharger des fichiers vers le serveur. Documents. Sert crer des descriptions et les associer des fichiers. Permet galement de dfinir les permissions daccs et le type de licence du tlchargement. Catgories. Gestion des catgories dans lesquelles sont classs les documents. Groupes. Gestion des groupes dutilisateurs. Licences. Gestion des diffrentes licences. Le nombre nest pas limit. Statistiques. Donne accs aux statistiques des tlchargements de chaque document. Journaux de tlchargement. Donne accs aux fichiers de journalisation. Configuration. Configuration globale de DOCman. Thmes. Vous pouvez dfinir des thmes spcifi ques DOCman. Des thmes sont disponibles sur le site offi ciel du projet. Ils concernent la partie publique. Crdits. Journal des volutions depuis lanne 2004.

12.2.4 Activation du composant sur le site

La procdure est la mme que pour le forum Fireboard (voir le Chapitre 12.1). Supposons que nous dsirions crer un lment de menu dans notre menu LIVRE JOOMLA! 1.5 pour laccs aux tlchargements. Comme type dlment de menu, il faut choisir DOCMAN (voir Figure 12.20). Vous dfinissez ensuite les dtails dans la fentre ddition dlment (voir Figure 12.21).

Figure 12.20 Cration dun lment de menu pour DOCman.

169

Figure 12.21 dition de llment de menu. Il reste choisir un titre et un alias pour llment. Vous pouvez amener directement le visiteur sur une catgorie de documents partir du lien. Il suffit de spcifier lidentifi cateur ID de la catgorie dans les paramtres. Les numros ID sont affichs dans la section des catgories de ladministration de DOCman. Ds que vous cliquez sur SAUVER, ractualisez le site Web pour disposer immdiatement dune fonction de tlchargement de niveau professionnel (voir Figure 12.22).

Figure 12.22 DOCman disponible sur le site Web. Lorsque vous cliquez sur le bouton TLCHARGER, vous devez accepter ou refuser la licence associe. Le tlchargement ne dmarre quensuite (voir Figure 12.23).

Figure 12.23 Demande dacceptation de la licence.

170

12.2.5 Ajout de contenus

Vous pouvez ajouter de nouveaux fichiers et de nouvelles descriptions votre plateau de tlchargement depuis la partie Administration. Cest aussi possible depuis la partie Publique si vous ouvrez une session avec un compte dutilisateur appropri, tel que admin. Dans ce cas, vous voyez dans la partie suprieure une icne et un lien SOUMETTRE UN FICHIER (voir Figure 12.24). Trois tapes suffi sent implanter un nouveau document. Dans la premire tape, vous dsignez lemplacement source du document. Il peut tre situ sur votre propre ordinateur ou sur un serveur distant. Vous pouvez aussi tablir un lien dynamique avec la source du document (voir Figure 12.24).

Figure 12.24 Soumission dun document : tape 1. Supposons que nous ayons opt pour la premire solution (fichier local). Nous choisissons un fichier compress Zip (voir Figure 12.25).

Figure 12.25 Soumission dun document : tape 2.

171

Figure 12.26 Soumission dun document : tape 3. Une fois le transfert russi, nous arrivons la dernire tape dans laquelle nous saisissons une description, et dfi nissons les permissions daccs, la catgorie et le type de licence. Il suffit alors de cliquer sur le bouton vert en haut droite (il possde une coche) pour terminer la mise en place. Le document est doffi ce rendu public, dans la mesure o lutilisateur qui vient de dfinir ce tlchargement dispose des droits suffisants. Cet utilisateur dispose dailleurs dun nombre de boutons plus important quun utilisateur normal (voir Figure 12.27). En temps normal, vous devez publier explicitement les documents dans la partie Administration (voir Figure 12.28).

Figure 12.27 Le nouveau document disponible au tlchargement sur le site.

172

Figure 12.28 Rendre un document public.

12.2.6 Le Plugin de recherche de DOCman

Si vous mettez beaucoup de fichiers disposition, il est indispensable dajouter une fonction de recherche parmi tous ces documents, mais un Plugin a t prvu cet effet. Vous linstallez comme le composant en dsignant le fichier nomm bot_docman_search_1.4.0rc1.zip depuis le CD-ROM compagnon ou depuis le Web. Votre Plugin de recherche DOCman apparat ensuite dans la liste des Plugins (menu Extensions). Il faut encore lactiver (voir Figure 12.29).

Figure 12.29 Le Plugin de recherche de DOCman. Vous pouvez ensuite saisir un critre de recherche dans le champ de la fonction de recherche gnrale du site Web. Vous verrez apparatre tous les documents contenant ce critre dans la description (voir Figure 12.30).

Figure 12.30 Recherche dun document.

12.2.7 Module complmentaire

Si le plateau de tlchargement est de taille consquente, il devient utile dafficher les noms des documents les plus demands. Il suffit cet effet dinstaller le module appropri (fichier mod_
173

docman_mostdown_1.4.0rc1.zip).

Vous utilisez linstallateur normal de Joomla! puis vous lactivez par la liste des Modules (voir Figure 12.31). Par dfaut, le module se prsente gauche, mais vous pouvez le placer une autre position et modifi er son titre. Les paramtres permettent de contrler le nombre dentres et laffichage de licne et du nombre. En standard, le module offre laspect de la Figure 12.32.

Figure 12.31 Un module de DOCman.

Figure 12.32 Un module de DOCman sur le site public.

12.3 Expos : une galerie base Flash

Les galeries de photos et de vidos consultables deviennent monnaie courante avec lavnement du Web 2.0 notamment grce la multiplication des accs Web haut dbit. Les sites tels que Flickr (www.flickr.com) ou YouTube (www.youtube.com) sont trs faciles demploi et donnent accs des masses de contenus multimdias. Les attentes en termes de prsentation des donnes ne cessent daugmenter. Une simple numration statique de photos commence donner un aspect dsuet. Expos est un composant bas sur le format graphique Adobe Flash qui sert afficher et grer des photographies, des graphiques et des vidos. Il est visuellement trs attrayant (Figures 12.36, 12.37 et 12.38, plus loin). Voici ce que permet Expos :

cration de collections et dalbums en nombre non limit ; retaille des images lors du transfert sur le serveur ; gnration de miniatures pour les albums ; lecture de vidos via le lecteur Flash Player dans un format compress ; ajout de commentaires audio aux images individuelles. 174

Il existe en outre une variante autonome locale de Expos pour constituer les collections confortablement avant de les poster. Le format Flash est assez compact pour transfrer les images sans trop dattente sur une liaison Web lente. Loutil Album Manager servant grer les documents dans la partie Administration rclame quelques lments spcifi ques au niveau de PHP : la librairie GD et les extensions DOMXML et iconv. Dans lenvironnement dexploitation local XAMPP lite, ces conditions sont remplies au niveau du serveur. Si votre fournisseur daccs ou hbergeur ne propose pas ces lments, une solution existe (revoir ltape 5 de linstallation de Joomla au Chapitre 1 et la section 6.4 du Chapitre 6). Du ct public (Frontend), il faut au minimum que le navigateur du visiteur soit dot du lecteur Flash Player en version 8. Cest le cas denviron 96 % des navigateurs.

12.3.1 Installation
Pour mettre en place le composant principal de Expos, vous installez le fichier com_expose_4.6.2.zip depuis le CD-ROM daccompagnement ou le site du projet (www.gotgtek.com). Rappelons la procdure : EXTENSIONS > INSTALLER/DSINSTALLER, bouton PARCOURIR, choix du fichier et bouton TRANSFERT DE FICHIER & INSTALLATION. Surveillez bien les messages de fin dinstallation (voir Figure 12.35). Si certains sont affichs en rouge, vrifiez que vous avez bascul Joomla! en mode compatible en activant le Plugin Legacy (EXTENSIONS > GESTION DES PLUGINS). Lisez aussi la remarque qui suit. Notez bien votre mot de passe !

Figure 12.33 Fichiers placer dans /components/com_expose. la date de mise sous presse du livre, le composant Expos souffrait encore de quelques problmes de stabilit en rapport avec le plugin Legacy de Joomla!. Cest tonnant dans la mesure o ce composant ne fait que se servir de Joomla! comme zone dhbergement de ses affichages. Au cas o, voici la srie dinstructions SQL faire excuter pour crer quelques enregistrements adquats dans une table de la base de donnes :
175

INSERT INTO `jos_components` (`id`, `name`, `link`, `menuid`, `parent`, `admin_menu_link`, `admin_menu_alt`, `option`, `ordering`, `admin_menu_img`, `iscore`, `params`) VALUES(51, Expose, option=com_expose, 0, 0, , Expose, com_expose, 0,../administrator/ components/com_expose/expose_icon.png, 0, ), (52, Manage Albums, , 0, 51, option=com_expose&task=manage, Manage Albums, com_expose, 0, ../administrator/components/com_expose/manage.png, 0, ), (53, Configuration, , 0, 51, option=com_expose&task=config, Configuration, com_expose, 1, ../administrator/components/com_expose/confi g.png, 0, ), (54, Manual, , 0, 51, option=com_expose&task=manual, Manual, com_expose, 2, ../ administrator/components/com_expose/docs.png, 0, );

Dans ce cas, il faut galement dcompresser manuellement le composant dans un sous-dossier puis copier les fichiers dans deux sous-dossiers de linstallation de Joomla! (Figures 12.33 et 12.34). La destination de chaque fichier est dcrite dans le fichier expose.xml

Figure 12.34 Fichiers placer dans /administrator/components/com_expose. Si linstallation du composant choue ou si la solution de dpannage vous effraie, tenez-vous inform de la solution qui ne saurait tarder apparatre.

176

Figure 12.35 Messages de bonne installation de Expos.

12.3.2 Intgration de Expos au site Web

Au dpart, le composant est install avec des donnes dexemples (deux photos et une vido). Pour y accder, il faut crer un lment de menu qui y fasse rfrence. Crons une nouvelle entre dans notre menu Livre JOOMLA! 1.5. 1. Choisissez la commande MENUS > LIVRE JOOMLA! 1.5 puis le bouton NOUVEAU. 2. Dfinissez les paramtres dun nouveau lien en choisissant comme type Expose qui est apparu dans larborescence des types. Donnez llment le nom Galerie multimdia (revoyez si ncessaire la section 7.4 du Chapitre 7). 3. Basculez dans le volet du site et cliquez sur le nouveau lien. Vous voyez apparatre deux dossiers : une Collection (qui contient des albums) et un Album vido. 4. Cliquez dans la fl che de droite de la collection pour accder ses dtails. Le chiffre correspond au nombre de documents que contient le dossier (lalbum). La collection dexemples contient un seul album qui contient deux images (voir Figure 12.36). 5. En cliquant sur lalbum (Sample album), vous accdez la visionneuse appele Image Strip (voir Figure 12.37). 6. Vous circulez dans ce bandeau avec le pointeur de souris. Limage du centre subit un lger effet de zoom. Vous pouvez aussi cliquer sur les triangles sils sen prsentent. 7. Un clic de plus vous amne laffichage dune image en grand format (voir Figure 12.38).

Figure 12.36 Vue gnrale de la galerie Expos. Voici les oprations possibles :

naviguer parmi les images par les boutons en bas de fentre ; faire afficher un diaporama automatique ; afficher la visionneuse par le bouton SHOW IMAGE STRIP en bas droite ; remonter aux collections par le bouton SELECT ALBUM en bas droite ; afficher une image en grand format en cliquant ; voir dans quel albums vous vous trouvez ; afficher un cran daide sur les symboles. 177

Figure 12.37 La visionneuse dimages Image Strip.

Figure 12.38 Vue individuelle.

Vidos
8. Remontez jusquau premier niveau pour accder la vido. Le principe du bandeau de visionnage reste en vigueur. 9. Cliquez dans laperu pour lancer la lecture de la vido slectionne par sa position centrale (voir Figure 12.39).

178

Figure 12.39 Lecture dun fichier vido. Voici les oprations possibles :

navigation dans la vido ; arrt/marche du son en cliquant sur le symbole de haut-parleur et rglage du volume.

12.3.3 Gestion des documents avec Album Manager

Pour peupler vos galeries avec vos images et vos vidos, choisissez la commande COMPOSANTS > EXPOS > MANAGE ALBUMS. Vous devez vous identifier. Le mot de passe initial est manager. Nhsitez pas le changer au moyen du bouton associ, puisque vous pouvez le faire mmoriser pour cette machine via loption SAVE (voir Figure 12.40). Le panneau de gestion prsente plusieurs volets (voir Figure 12.41).

179

Figure 12.40 Album Manager Connexion.

Figure 12.41 Album Manager Administration. 1. Zone de cration de collections et dalbums. Le volet au-dessus sert dplacer (MOVE TO), renommer (RENAME) et supprimer un lment (DELETE). 2. Slectionnez ici une image puis cliquez sur CREATE ALBUM THUMB pour produire une miniature de couverture dalbum. 3. Le bouton UPLOAD PHOTOS sert dsigner un ou plusieurs fichiers du disque dur. Les images en taille rduite sont gnres automatiquement. Vous pouvez donc dsigner des images en format natif. 4. Il en va de mme pour les vidos au format fl v via le bouton UPLOAD VIDEOS. Vous pouvez les convertir dans ce format avec la version dessai de Dreamweaver CS3 fournie sur le CD-ROM (www.adobe.com) ou plus simplement avec loutil Freeware Riva FLV Encoder 2 (www.rivavx.com) fourni aussi sur le CD-ROM. 5. Le bouton ADD FROM BUCKET est trs pratique. Rcuprez des fichiers distants via FTP et stockezles dans le dossier suivant :
[CheminJoomla!]components/com_expose/expose/manager/bucket

Vous pourrez ensuite puiser dans ce rservoir via Add from Bucket. 6. Le bouton PARAMETERS permet de dcider des tailles des versions rduites des images et des vidos. Pour les photos, il est possible dajouter un fi ligrane de proprits (voir Figure 12.42). Vous quittez le panneau de gestion par le bouton LOGOUT en bas droite.

12.3.4 Dsinstallation
La suppression du composant est classique : choisissez la commande EXTENSIONS > INSTALLER/ DSINSTALLER et accdez la page COMPOSANT (voir Figure 12.43). Slectionnez EXPOS et cliquez sur DSINSTALLER.

180

Figure 12.42 Paramtres de Expos.

Figure 12.43 Dsinstallation dun composant.

12.3.5 Album Manager en programme autonome

La manipulation distance de fichiers volumineux peut devenir peu commode. Cest la raison pour laquelle a t conue une version locale autonome appele Album Manager. Elle existe pour Windows et pour Mac OS X. Sous Windows, double-cliquez sur le nom du fichier AlbumManager-2.7-Setup.msi pour linstaller. Sous Mac OS X, vous installez le fichier AlbumManagerMac.dmg. Tous deux sont fournis sur le CDROM. Album Manager cherche les documents dans le dossier suivant :
[CheminJoomla!]components/com_expose/expose

Si vous travaillez en local, vous pouvez directement dsigner ce dossier au dmarrage du programme Album Manager.

181

Album Manager permet de modifi er les contenus et la structure. Lutilisation est identique celle de la version Web (voir Figure 12.44). [no picture] Figure 12.44 Le programme autonome Album Manager sous Windows. Vous pouvez utiliser Album Manager pour grer les documents multimdias dun site. Rapatriez les documents en copiant le dossier depuis le Web via FTP, procdez vos modifications localement puis remontez le tout sur le serveur.

182

CHAPITRE 13 : CONCEPTION DE TEMPLATES JOOMLA! (MODLES)

Pour adapter le site Web lidentit de votre entreprise ou de votre association, ne serait-ce quau niveau du choix des couleurs, il vous faut modifier un template existant plus ou moins en profondeur ou bien en concevoir un nouveau. Cest ce que nous vous proposons dtudier dans ce chapitre. 13.1 Identit du site et charte graphique 13.2 HTML/XHTML, CSS, XML 13.3 Cration dun template Joomla!

13.1 Identit du site et charte graphique

La notion didentit dentreprise ou Corporate Identity englobe les rgles appliques dans la perception dune entreprise au sens large par le monde extrieur (cela sapplique autant aux institutions quaux associations), notamment, mais pas seulement, au niveau visuel ; elle rejoint donc la notion de charte graphique. Cette manire dapparatre, cette identit, sera guide en premier lieu par lhistoire et la tradition de lentit prsenter, mais elle peut aussi tre totalement redfinie. Cette identit cohrente transmet aux visiteurs du site un sentiment positif par rapport lentit et simplifi e sa reconnaissance spontane. Voici quelques lments de rflexion :

politique (stratgie tarifaire, de produits et de publicit) ; personnalit visuelle (charte graphique) ; relations publiques (modalits de dialogues avec lextrieur) ; thique (comportements des salaris entre eux et avec les partenaires).

Tous ces domaines doivent avoir t pris en compte lors de la conception initiale du site. Pour les mettre en place, il faut savoir crer un template Joomla! prsentant au minimum un logo, une police de caractres et des couleurs standardises dans lentreprise. Vos visiteurs doivent reconnatre votre site au premier regard.

13.2 HTML/XHTML, CSS, XML

Les sigles HTML/XHTML, CSS et XML dsignent des technologies Internet exploites dans Joomla!. Toutes ont t standardises par le consortium W3 (http://www.w3.org/).

13.2.1 HTML/XHTML
Vous savez que le rseau Web se fonde sur le langage de description de pages HTML (HyperText Markup Language). Rappelons quil sagit non pas dun langage de programmation, mais dun langage prcisant laspect des informations sur un cran distant du serveur. Tout texte un peu long est constitu dlments structurels : titres, sous-titres, paragraphes de texte, listes, mots en gras ou en italique, tableaux, etc. Le principe de HTML est dinsrer des codes spciaux appels balises (tags) entre les mots du texte. Une balise se distingue en commenant par un signe < et en se terminant par un signe >. Voici comment est cod un texte qui doit tre affich en tant que titre de premier niveau :
<h1>Je suis un grand titre</h1>

183

Cest dans le navigateur du visiteur que les balises sont interprtes et supprimes du texte tout en affichant ce texte selon les rgles dfinies pour le type de balise concern. HTML est un langage trs simple apprendre. Vous trouverez des dizaines de sites et de livres qui vous en expliqueront les rudiments. HTML ne progresse plus, car il est remplac progressivement par son descendant XHTML dans sa version 1.06.

13.2.2 CSS
CSS signifie Cascading Stylesheets ou feuilles de style en cascade. Cest un complment au langage HTML rendu ncessaire pour permettre une plus grande richesse de mise en page des sites Web. Ce nest pas non plus un langage de programmation ; il sagit dun vocabulaire pour dfinir les proprits dune srie de styles, proprits qui sont applicables aux contenus de certaines balises HTML. Les directives CSS permettent par exemple de stipuler que les titres de premier niveau doivent tre affichs en corps 18 dans la police Arial non gras avec un espace entre paragraphes de 15 mm. Ce genre de contrle de laspect est impossible avec les seules balises HTML, car ce langage navait pas prvu daller aussi loin lpoque de sa conception. De nos jours, une grande richesse visuelle et une forte cohrence visuelle des sites Web sont devenues indispensables, surtout pour les sites de commerce lectronique. Trois approches sont possibles pour exploiter des styles CSS dans des pages HTML. Voyons-les de la plus locale la plus globale.

Au niveau local dun fichier HTML

Dans ce cas, les instructions CSS sont insres au dbut du fichier HTML dans une balise <style> :
<head> <title>Nom du fichier</title> <style type="text/css"> <!-/* ... Instructions CSS ... */ --> </style> </head>

Dans un fichier CSS indpendant

La solution la plus effi cace et la plus rpandue consiste crer un fichier de feuilles de style extension .css qui devient de ce fait exploitable par toute une srie de fichiers HTML. Il suffit dinsrer une rfrence ce fichier au dbut de chaque fichier HTML concern. Cest lapproche choisie dans Joomla! :
<head> <title>Nom du fichier</title> <link rel="stylesheet" type="text/css" href="formate.css"> </head>

184

 lintrieur dune balise HTML

Vous pouvez insrer des instructions CSS lintrieur dune balise HTML, mais la lisibilit sen ressent :
<body> <h1 style="... Instructions CSS ...">...</h1> </body>

Combinaisons
Les trois approches peuvent se combiner et se contredire au sein dun mme fichier HTML. Vous pouvez dfinir des rgles de base dans le fichier CSS externe, qui sappliquent toutes les pages, sauf celles dans lesquelles le mme style est redfini. Mais cette mthode entrane rapidement de grosses difficults de maintenance. Il est prfrable de faire voluer le fichier CSS partag.

13.2.3 XML
Le langage de marquage tendu XML (Extended Markup Language) est un univers lui seul. Il constitue en effet un mtalangage, cest--dire un langage pour dfinir des langages tels que le HTML. Son origine remonte aux annes 1960 avec le langage SGML (Standard Generalized Markup Language). Dans notre contexte, XML nous permet de dcrire les mtadonnes des templates qui vont servir linstallateur de templates et laffichage dans le Gestionnaire de templates de Joomla!. Le principe reste dinsrer des balises entre chevrons :
<name>Livre Joomla!</name>

Lnorme diffrence est quen XML aucune balise na deffet intrinsque. Vous tes entirement libre de dfinir la structure arborescente de balises et sous-balises et les noms des balises (mais des standards se mettent en place au niveau plantaire pour assurer les changes de donnes).

13.3 Cration dun template Joomla!

Nous voulons crer un template de partie publique de site. Bien des choses sont raliser dans lordre adquat. Progressons pas pas. Mais dabord un peu de thorie.

13.3.1 Le concept
Commencez par dfinir les grandes lignes de votre projet de structure. Lorsque lon envisage de crer un template de site, il faut partir dun schma ou dun croquis sommaire. Vous pouvez utiliser un crayon et du papier (millimtr) ou dgrossir le projet dans un outil ddition graphique comme Adobe Photoshop ou son quivalent libre Gimp (http://www.gimp.org/).

Dimensions fixes ou adaptables ?

Les dimensions dun template de site peuvent tre soit fixes, soit variables. Un template variable est capable de sadapter la largeur et la hauteur daffichage disponibles dans la fentre du navigateur du visiteur. Dans ce cas, si lcran du visiteur offre une rsolution de 1600 1200 pixels, sil ouvre le navigateur en plein cran, les constituants de la page Web vont tre distribus sur ce vaste espace. Les lments graphiques, a priori non retaillables (logo, bannire, textes), nauront plus laspect prvu par le concepteur du template. Le contrle exact du rsultat vous chappe.
185

Lautre approche est plus conservatrice. Vous dcidez dun format minimal dcran, par exemple 800 600 (1024 768 est courant, mais pas universel) et vous positionnez exactement tous les lments au pixel prs. Le contrle est total. Si le visiteur dispose dune meilleure rsolution, les marges libres devront tre remplies par un motif rptitif pour viter la vacuit. Il ny a pas de solution idale. Pesez le pour et le contre de chaque approche puis dcidez-vous. Tenez compte de vos besoins de mise en conformit avec la Loi Handicap en tudiant laccessibilit de votre template (voir le Chapitre 14) et concevez deux variantes. Vous connaissez sans doute des sites Web sur lesquels le visiteur peut faire varier la taille des textes. ct de la commande de changement de taille se trouve souvent un bouton pour changer de prsentation (voir Figure 13.1).

Figure 13.1 Changement de prsentation. Si vous optez pour la taille fixe 800 600 pixels que quasiment tous les crans actuels supportent de nos jours (rflchissez si votre site doit tre accessible dans des pays en voie de dveloppement moins richement dots), vous devez tenir compte de la barre de dfilement du ct droit de la fentre du navigateur et du cadre. Il ne vous reste donc plus que 780 pixels utilisables en largeur.

Structure
Vous travaillez sur des donnes structures. Il faut donc organiser leur positionnement dans une matrice qui sera plus ou moins visible. Joomla! exploite normalement la structure suivante (voir Figure 13.2).

Figure 13.2 Exemple de structure de page. Partie 1

186

Section 1 : espace du logo ou image marquante et nom de page (header) ; Section 2 : champ de recherche ; Section 3 : champ servant de barre dadresse (breadcrumbs).

Partie 2

Section 4 : les menus principaux viennent en colonne gauche (left) ; Section 5 : le contenu de la page est au centre (mainbody) ; Section 6 : les menus secondaires et les cartouches viennent en colonne droite (right).

Partie 3

Section 7 : pied de page avec accs aux mentions lgales (footer).

13.3.2 La rdaction en langage HTML

Une fois la maquette labore, nous pouvons passer la rdaction du code HTML correspondant. Si vous avez utilis un diteur graphique, vous pouvez parfois exporter limage de la maquette sous forme de code HTML. Mais vous pouvez aussi travailler manuellement dans un diteur de texte ou un diteur HTML (il en existe plusieurs gratuits et dautres payants comme Macromedia Dreamweaver). Info:
<table>

ou <div> ?

Dans le langage HTML, la balise <table> peut tre enrichie ou remplace par la balise <div>. Cette dernire permet de regrouper de faon logique plusieurs lments HTML qui peuvent tre du texte ou du graphique. Cette section na pas dautre effet visuel que de forcer commencer sur une nouvelle ligne. La balise <div> na pas dautres proprits spcifiques. En revanche, elle devient trs intressante lorsquelle est combine avec des instructions de style CSS. Cest dailleurs pour cette raison qua t invente la balise <div>. Jusquen 2004 peu prs, la structure des pages Web utilisait principalement des tableaux HTML. Mais la balise <div> et les styles CSS ont t de plus en plus apprcis, et leur support dans les navigateurs a fini par tre total. Cest pourquoi vous rencontrez de plus en plus de templates nutilisant aucun tableau HTML. Pour autant, les sites Web qui ne contiennent que du HTML correctement formul sans utilisation daucun tableau sont encore rares. Un excellent premier pas dans la bonne direction consiste adopter justement cette balise <div> pour structurer les pages. Joomla! 1.5 abandonne de plus en plus lapproche tabulaire et propose dcrire du code HTML validable. Il reste nanmoins possible de continuer utiliser des tableaux HTML. Le template fourni en standard rhuk_milkyway nutilise aucune balise de tableau car toute la structure est dfinie au moyen de balises <div>. Vous pouvez jeter un oeil sur le code source du template pour vous acclimater cette nouvelle approche. Pour en savoir plus au sujet de cette puissante balise <div>, cherchez sur le Web. Ajoutons que le logiciel Dreamweaver supporte trs bien cette nouvelle approche. Le code source du fichier HTML initial possde laspect du Listing 13.1. Nous avons volontairement conserv un contenu simple. Dailleurs, len-tte nest pas conforme au standard XHTML. Le nom du fichier de cette prsentation doit tre index.php. En effet, Joomla! va essayer de linterprter en tant que fichier du langage PHP.

187

Observez la section head. Cest cet endroit que sera rfrenc le fichier CSS externe contenant les styles du template (voir Listing 13.2). Pour le moment, le fichier CSS ne contient quune seule instruction pour dfinir la taille des caractres.
<html> <head> <link href="/joomla150/templates/livrejoomla150/css/template.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Partie1">Zone den-tete / header<br /><br /> <div id="Section1">Section1</div> <div id="Section2">Section2</div> </div> <div id="Partie2">Zone principale / main<br /><br /> <div id="Section3">Breadcrumbs</div> <div id="Section6">Colonne droite</div> <div id="Section4">Colonne gauche</div> <div id="Section5">Contenu</div> </div> <div id="Partie3">Pied de page /footer<br /><br /> <div id="Section7">Section7</div> </div> </body></html>

Listing 13.1 : Fichier CSS /index.php

body{ font-size: 12px; font-family: Helvetica,Arial,sans-serif; } #Partie1{ /* header */ float: left; border: 2px dotted green; } #Partie2{ /* main */ float: left; border: 2px dotted yellow; } #Partie3{ /* Pied */ clear:all; border: 2px dotted red; } #Section1{ /* A droite en haut */ float: left; width: 18em; margin: 0 0 1.2em; border: 1px dashed silver; background-color: #eee; } #Section2{ /* A gauche en haut */ float: right; width: 12em; margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; } #Section3{ /* Breadcrumbs */ border: 1px dashed silver; background-color: #eee; } #Section4{ /* Colonne gauche */ float: left; width: 15em; margin: 0 0 1.2em; border: 1px dashed silver; } #Section5{ /* Contenu */ margin: 0 12em 1em 16em; padding: 0 1em; border: 1px dashed silver; } #Section6{ /* Colonne droite */ float: right; width: 12em; margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; } #Section7{ /* Pied */ margin: 0 0 1.1em;

188

background-color: #eee; border: 1px dashed silver; }

Listing 13.2 : Fichier CSS /css/template.css Pour ce premier essai, et dans un but pdagogique, nous allons mettre en place manuellement les fichiers de ce template dans larborescence de Joomla!. Nous verrons ensuite comment crer un fichier paquetage dinstallation dont nous testerons linstallation au moyen du module appropri de Joomla!. Pour le moment, intressez-vous ce fichier HTML qui doit porter le nom index.php. Vous devez le transfrer dans le sous-dossier [CheminJoomla]/templates/livrejoomla150/. Le fichier template.css doit se trouver dans un sous-dossier qui sappelle [CheminJoomla]/templates/livrejoomla150/css/. Ces deux fichiers suffisent un template minimal. Il ne manque quun fichier XML pour que le Gestionnaire de templates puisse prendre en compte ce nouveau couple de fichiers.

13.3.3 Arborescence de dossiers dun template

Dcouvrons donc les conventions invariables que vous devrez suivre. Le template doit tre stock en utilisant les trois sous-dossiers suivants :
[CheminJoomla]/templates/[NomDuTemplate]/ [CheminJoomla]/templates/[NomDuTemplate]/css/ [CheminJoomla]/templates/[NomDuTemplate]/images/

Dans NomDuTemplate, vous ne devez utiliser ni lettres accentues, ni espaces, ni caractres spciaux. Lorsque nous produirons un paquetage installable, linstallateur se servira de ce nom pour crer le sousdossier. Cest ce qui peut entraner des problmes sur certains systmes dexploitation si vous utilisez des caractres ne faisant pas partie du jeu minimal. Essayez de choisir un nom suggestif malgr tout. Nous avons choisi pour notre exemple livre joomla150. Plusieurs fichiers sont prvoir dans les diffrents dossiers de cette structure, et leurs noms sont invariables.

Fichiers de mise en page

/templates/livrejoomla150/index.php

Cest le fichier HTML que nous avons tudi plus haut. Il doit porter lextension .php pour que Joomla! puisse le faire interprter comme du langage PHP.

Image miniature daperu

/templates/livrejoomla150/template_thumbnail.png

Ce fichier dont le nom est fig contient une image rduite de la fentre du template. Cette image apparat lorsque vous amenez le pointeur dans la ligne du template dsir, dans la liste des templates (EXTENSIONS > GESTION DES TEMPLATES). Les aperus doivent avoir un format denviron 200 sur 150 pixels. Vous pourrez gnrer ce fichier plus tard, lorsque vous aurez besoin de vrifier laffichage de laperu.

Mtadonnes du Template
/templates/livrejoomla150/templateDetails.xml

189

Ce fichier contient les instructions destines linstallateur du template. Les donnes sont utilises dans la liste des templates du gestionnaire. Cest ici que vous indiquez quels fichiers doivent tre copis o, comment se nomme le concepteur du template, et dautres mtadonnes. Lorsque nous verrons comment installer le template automatiquement par linterface, ce fichier sera exploit par le langage PHP pour copier les donnes en place partir des indications. Dans notre exemple, vous pouvez partir du fichier prsent dans le Listing 13.3 et le personnaliser. Il faut dfinir une balise container XML pour chacun des fichiers utiliss par le template. Vous devez indiquer le nom de fichier et le chemin daccs.
<files> <filename> ... Nom du fichier dans la racine du template ... </filename> <filename> ... Un conteneur filename par fichier</filename> </files>

Les autres conteneurs du fichier XML servent dcrire le template. Voici le listing source complet de ce fichier XML (Listing 13.3) :
<install version="1.5" type="template"> <name>livrejoomla150</name> <version>1.0</version> <creationDate>11.11.2007</creationDate> <author>Hagen Graf+OE</author> <copyright>GNU/GPL</copyright> <authorEmail>hagen@cocoate.com</authorEmail> <authorUrl>http://www.cocoate.com</authorUrl> <version>0.1</version> <description>... Description</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>css/template.css</filename> </files> </install>

Listing 13.3 : Le fichier templateDetails.xml Le fichier templateDetails.xml doit lui aussi se trouver dans la racine relative [CheminJoomla]/ templates/livrejoomla150/.

Fichier CSS
/templates/livrejoomla150/css/template.css

Vous pouvez prvoir plusieurs fichiers CSS pour un seul template. Les noms et le contenu des fichiers sont libres. Tenez cependant compte des conventions en vigueur pour les lments CSS. Vous trouverez quelques informations ce sujet dans la section A.3 de lAnnexe. Pour linstant, un seul fichier CSS nous suffira.

Images et illustrations
/templates/livrejoomla150/images/[fichiers dimages au choix]

Cest dans ce sous-dossier que vous pouvez runir les fichiers graphiques rfrencs par votre template. Linstallateur copiera ces fichiers dans le sous-dossier images.

190

13.3.4 Premier essai

Une fois que tous les sous-dossiers sont prts dans la racine relative [CheminJoomla]/templates/ avec les fichiers adquats (voir Figure 13.3), nous pouvons tester le nouveau template en y accdant dans Joomla! Par le menu EXTENSIONS > GESTION DES TEMPLATES, ouvrez la liste des templates. Slectionnez le nouveau template qui est apparu et cliquez sur le bouton DFAUT (voir Figure 13.4). Si vous accdez la partie publique de votre site, vous voyez le rsultat (voir Figure 13.5). Pour linstant, il ny a aucun contenu. En effet, les contenus tant gnrs de faon dynamique, il faut ajouter des instructions pour les injecter dans les diffrentes sections du template. Nhsitez pas utiliser la structure dexemple que nous avons prpare pour vous dans le dossier CHAP13 du CD-ROM accompagnant le livre.

Figure 13.3 Structure de sous-dossiers et fichiers du template livrejoomla150.

Figure 13.4 Le nouveau template dans la liste des templates.

191

Figure 13.5 Aspect du nouveau template minimal dans le navigateur.

13.3.5 Injection des donnes depuis les modules Joomla!

Linjection des donnes gnres par les modules se base sur les instructions places dans le code HTML. Le principe se fonde sur un espace de noms conventionnels appel jdoc que Joomla! utilise pour positionner les lments dans le template. Si nous ajoutons par exemple dans len-tte du fichier index.php la ligne de linstruction jdoc suivante :
<head> <jdoc:include type="head" /> </head>

le template affiche un titre et le petit symbole dabonnement un fi l dactualits dans la barre dadresse (voir Figure 13.6).

Figure 13.6 La page avec un titre et une icne dabonnement RSS. Si vous demandez laffichage du code source HTML de la page depuis votre navigateur, vous constatez que les mtadonnes dfinies dans ladministration ont t injectes dans le code HTML (voir Listing

192

13.4). Les fils dactualits RSS ont t rfrencs par les balises de liens. Cest ce qui permet un navigateur du type Firefox dafficher licne dabonnement RSS dans la barre dadresse.
... <head> <base href="http://localhost/joomla150/" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="joomla, joomla!, Joomla, Joomla!, J!" /> <meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" /> <meta name="generator" content="Joomla! 1.5 - Gestion CMS Open Source" /> Joomla_Book.indb 234 25/02/08 11:52:57 <title>Welcome to the Frontpage</title> <link href="/joomla150/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="/joomla150/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> <script type="text/JavaScript" src="/joomla150/media/system/js/mootools.js"> </script> <script type="text/JavaScript" src="/joomla150/media/system/js/caption.js"> </script> ...

Listing 13.4 : Extrait du code source de la page gnre Puisque notre premire injection sest bien droule, nous pouvons maintenant insrer les autres instructions jdoc. Linstruction suivante :
<jdoc:include type="modules" name="top" style="none" />

attend en paramtre dentre le type dinjection, qui est ici modules. Le paramtre name dtermine la position du module (top, right, left, user1...) sur la page. Vous contrlez cette position dans la section des modules de la commande EXTENSIONS > GESTION DES MODULES. Le paramtre nomm style indique une valeur qui dtermine la nature exacte du code HTML gnre par le module. Lorsque la valeur est none, les donnes HTML sont pures, sans aucune balises de structuration <div> (voir le Tableau 13.1).
Paramtre table horz xhtml rounded Rsultat Les donnes du module sont affiches dans une colonne de tableau. Les donnes sont prsentes horizontalement dans une cellule du tableau courant. Les donnes du module sont prsentes dans un lment <div> conforme au XHTML. La prsentation utilise des coins arrondis. La classe de l lment <div> passe de moduletable module.

beezDivision Option spcifique au template Beez. Elle permet de faire varier la taille des titres (header). L option n est pas disponible en dehors du module Beez. <jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" /> none Les donnes du module sont affiches sans formatage.

Tableau 13.1 : Paramtres de module Voyons lensemble des instructions dinjection jdoc dans le fichier dfinitif index.php est visible dans le Listing 13.5.
193

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN" http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <jdoc:include type="head" /> <link href="css/template.css" rel="stylesheet" type="text/css" /> <link href="/joomla150/templates/livrejoomla150/css/template.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Partie1">Zone den-tete / header<br /><br /> <div id="Section1">Section1 <jdoc:include type="modules" name="user3" style="xhtml" /> </div> <div id="Section2">Section2 <jdoc:include type="modules" name="top" style="xhtml" /> </div> </div> <div id="Partie2">Zone principale / main<br /><br /> <div id="Section3">Miettes de pain / breadcrumbs <jdoc:include type="modules" name="breadcrumb" style="xhtml" /> </div> <div id="Section6">Colonne droite <jdoc:include type="modules" name="right" style="xhtml" /> </div> <div id="Section4">Colonne gauche <jdoc:include type="modules" name="left" style="xhtml" /> </div> <div id="Section5">Contenu <jdoc:include type="component" style="xhtml" /> </div> </div> <div id="Partie3">Pied de page /footer <br /><br /> <div id="Section7">Section7 <jdoc:include type="modules" name="footer" style="xhtml" /> </div> </div> </body> </html>

Listing 13.5 : index.php avec les injections jdoc Si vous affichez la version mise jour de votre template sur le site Web, vous voyez dornavant les contenus dynamiques. Le template a accueilli toutes les donnes du module. Laspect visuel pourrait tre encore amlior, mais vous avez compris les principes. Vous savez maintenant crer un template.

Figure 13.7 Un template contenant des donnes dynamiques.

194

Voyons enfin comment crer un paquetage pour installer automatiquement le template.

13.3.6 Cration dun paquetage de template

Pour diffuser votre template, vous devez le conditionner dans une archive compresse. Pensez crer tout dabord, si ce nest encore fait, le fichier image daperu (fichier template_thumbnail.png) en lui donnant les dimensions 227 sur 162 pixels. Cest cette miniature qui permet davoir un aperu du template avant de lactiver (voir Figure 13.8).

Figure 13.8 Image daperu du template livrejoomla150. Il ne reste plus qu crer un fichier compress partir de tous les fichiers qui se trouvent dans la racine relative livrejoomla150, avec les sous-dossiers. Mfi ez-vous de ne pas crer deux sousniveaux homonymes en crant larchive. Placez-vous dans la racine relative suivante et slectionnez tous les fichiers et sous-dossiers :
[CheminJoomla]/templates/livrejoomla150/

Produisez un fichier darchive portant le nom livrejoomla150.zip. Faites une sauvegarde de votre template. Cest fini !

Dsinstallation de lancien template

Vous pouvez maintenant diffuser votre paquetage auprs des autres. Pour le tester, il nous faut dabord dsinstaller le mme template que nous avions install manuellement. Pour ce faire, il faut ractiver lun des autres templates. Par la commande EXTENSIONS > GESTION DES slectionnez un autre template et cliquez sur le bouton DFAUT.

TEMPLATES,

Vous pouvez maintenant dsinstaller le template. Par la commande EXTENSIONS > INSTALLER/DSINSTALLER, cliquez sur le lien de la page TEMPLATES. Choisissez le template livrejoomla150 puis cliquez sur le bouton DSINSTALLER (voir Figure 13.9).

Figure 13.9 Desinstallation du template install manuellement.

195

13.3.7 Installation avec linstallateur de template de Joomla!

Une fois que vous avez limin toute trace de linstallation manuelle antrieure (supprimez le sousdossier sil na pas pu ltre par Joomla! parce que vous aviez laiss une fentre dexplorateur ouverte), choisissez la commande EXTENSIONS > INSTALLER/DSINSTALLER. Servez-vous du bouton PARCOURIR pour dsigner votre fichier livrejoomla150.zip puis cliquez sur le bouton TRANSFERT DE FICHIER & INSTALLATION. Normalement, linstallateur affiche ensuite un message comme quoi linstallation a russie. Le message qui apparat a t tir du fichier XML (voir Figure 13.10). Si vous revenez dans la liste des templates, vous devriez maintenant voir rapparatre livrejoomla150 (revoir la Figure 13.8).

Figure 13.10 Russite de linstallation du paquetage du template.

13.3.8 Quel code source provient de Joomla! ?

Nous savons maintenant crer un template. tudions brivement le code HTML gnr avec les donnes injectes par Joomla!. Joomla! gnre le code qui est prsent dans les conteneurs de la prsentation. Il sagit de balises HTML qui font rfrence des classes de styles CSS et des identificateurs ID. Joomla! se base notamment sur deux fichiers CSS qui dcrivent certaines classes et identificateurs et qui doivent tre prsentes dans tout template. Ces deux templates se nomment /templates/system/css/system.css /templates/system/css/general.css. et

Les deux fichiers sont rfrencs dans la section den-tte <head> du template au moyen des instructions suivantes :
<link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/system/css/general.css" type="text/css" />

Dcouvrons brivement les classes et les identificateurs ID que contiennent ces fichiers.

tude dtaille de la position de module left

Prenons comme sujet dtude le container correspondant la colonne de gauche (voir Figure 13.11). Voici le code HTML qui se trouve dans le fichier de mise en page index.php :
196

<div id="Section4">Colonne gauche <jdoc:include type="modules" name="left" style="xhtml" />

La balise <div> de la section est relie un identificateur de style CSS par le nom Section4. Si vous affichez le code source dans le navigateur, le listing rsultant sera bien plus long, puisque toutes les instructions jdoc ont fait lobjet dune injection de donnes par Joomla! (Listing 13.6).

Figure 13.11 Le module dans la position left.

... Autres instructions HTML <div id="Section4">Colonne gauche <div class="moduletable_menu"> <h3>Menu principal</h3> <ul class="menu"> <li id="current" class="active item1"> <a href="http://localhost/joomla150/">Accueil</a> </li> <li class="item2"> <a href="/joomla150/joomla-license">Licence de Joomla! </a> </li> </ul> </div> ... Autres instructions HTML

Listing 13.6 : Extrait du code source HTML gnr et affich

197

Remarquez dans cet extrait les trois classes CSS appeles menu, active item1 et item2. Nous avons prsent les diffrents suffixes CSS dans les paramtres de module au Chapitre 7. Ces suffixes sont utiliss ici. Vous les reprez aisment dans un fichier CSS du template standard rhuk_milkyway :
div.module_menu h3 { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #eee; margin: -23px -4px 5px -5px; padding-left: 10px; padding-bottom: 2px; } div.module_menu { margin: 0; padding: 0; margin-bottom: 15px; } div.module_menu div div div { padding: 10px; padding-top: 30px; padding-bottom: 15px; width: auto; } div.module_menu div div div div { background: none; padding: 0; } div.module_menu ul { margin: 10px 0; padding-left: 20px; } div.module_menu ul li a:link, div.module_menu ul li a:visited { font-weight: bold; }

Dans ce cas prcis, les blocs CSS permettent dafficher des coins arrondis pour les menus. Dautres instructions dans le mme fichier permettent de contrler le format des titres de troisime niveau (<h3></h3>) et les listes non tries (les lments de menu). Cest bien cette mthode de formatage des contenus laquelle nous nous attendions. Les donnes gnres dans les structures de balises <div> peuvent recevoir une personnalisation supplmentaire via lattribut style. Dans notre template dexemple, nous nous sommes cantonn un paramtre style avec la valeur XHTML. Dans le prcdent template, le mme paramtre utilisait la valeur rounded. Il correspond la balise en quatre parties <div>. Ce mode de gnration du code est tout fait appropri au contrle du format par des styles CSS. Mais si vous poursuivez la lecture du code source, vous allez nouveau tomber sur des balises de tableaux ! En effet, le composant Content continue utiliser cette ancienne mthode. Cest l que vos problmes commencent, si vous prenez lide de vouloir contrler le format de Content (le contenu du milieu de la page) de faon individuelle, sans utiliser le tableau. Mais Joomla! vous propose une solution.

Template Overrides (adaptation des donnes HTML en sortie sans modification des donnes de dpart)
Pour rsoudre le problme de lutilisation des tableaux en sortie, il faudrait normalement modifier les donnes dorigine dans Joomla!. Content serait dans ce cas libr du problme des tableaux,
198

mais vos donnes personnalises seraient sans doute crases ds la prochaine mise jour de Joomla!. Pour se librer de ce souci, Joomla!1.5.0 propose le concept de vue (View). chaque composant est associ un sous-dossier supplmentaire appel views dans lequel se trouvent diffrentes vues de sortie des donnes du composant. Dans le cas du composant nomm com_content, les cinq sousdossiers sappellent archive, article, category, frontpage et section. Chacun deux contient des fichiers qui offre des vues diffrentes du contenu. Souvenez-vous des affichages sous forme de tableau et de blog. Chacun des cinq sous-dossiers contient un dossier tmpl qui contient son tour plusieurs fichiers chargs de contrler la prsentation (voir Figure 13.12). Pour adopter cette nouvelle approche, il faut dfinir un nouveau sous-dossier dans le dossier de votre template. Si nous conservons le mme exemple, ce sous-dossier doit sappeler com_content/article si vous dsirez intervenir sur la prsentation des donnes du composant Content dans la mise en page du type article. Autrement dit, il faut copier les fichiers suivants :
[CheminJoomla]/components/com_content/view/article/tmpl/*.*

Dans le nouveau sous-dossier du template puis les adapter vos besoins exacts.
[CheminJoomla]/templates/[nomtemplate]/html/com_content/article

Cette approche est facile adopter en relation avec le template Beez. Dans ce cas prcis, les fichiers se trouvent cet endroit :
[CheminJoomla]/templates/beez/html/com_content/article

Ils passent outre les donnes du noyau sans les modifier (surcharge, override). Joomla! va ensuite chercher les diffrents fichiers dans le dossier du template. Sil les trouve, il les utilise. Sil ne les trouve pas, il utilise les donnes du noyau provenant du composant lui-mme.

Figure 13.12 Structure arborescente du sous-dossier views.

199

CHAPITRE 14 : LACCESSIBILIT DANS JOOMLA!

par Angie Radtke, conceptrice du modle Beez Quand Hagen Graf ma demand de rdiger ce chapitre, je me suis sentie un peu mal laise au dpart, car il ne me restait environ quune semaine. dire vrai, je partais avec un peu davance. La plupart des sujets que jaborde dans ce chapitre ont dj t dcrits en dtail dans mon livre sur La conception Web et laccessibilit cosign avec Michael Charlier (pas encore traduit en franais). Mais ici, je dois me concentrer sur lessentiel. Je vais donc prsenter les principes de la conception Web accessible. Puis je passerai en revue la manire dont ces concepts ont t mis en pratique dans le template standard Beez, qui permet de crer des pages Web accessibles avec Joomla!. Jusqu sa version 1.0.3, laccessibilit tait quasiment hors de porte de Joomla!. Lopration ntait vraiment pas simple. Avec la version 1.5 et le template Beez, il ny a plus dobstacle la cration dun site Web dont les contenus sont accessibles tous les individus. 14.01 Principes de laccessibilit ? 14.02 La rglementation en vigueur 14.03 Aperu des critres daccessibilit des pages 14.04 Accessibilit dans Joomla! 14.05 Le code HTML 14.06 Repres visuels de navigation 14.07 Beez et les modules 14.08 Le composant com_content 14.09 Formulaires 14.10 Tables de base de donnes 14.11 La conception et les styles CSS 14.12 Fonctions daccessibilit internes de Joomla! 14.13 Sources dinformations sur laccessibilit

14.01 Principes de laccessibilit ?

Pour beaucoup, Internet sest intgr la vie quotidienne. Au bout de la souris, se trouve une masse dinformations que lon recueille facilement : promotions du supermarch du coin, heures douverture de la mairie, pages jaunes, dictionnaires, etc. Tout est toujours disponible. Finies les fastidieuses recherches dans les bibliothques ou les annuaires. Il suffit daller voir sur le Web. Mais tout le monde ne profite pas de ce fantastique progrs. Les handicaps physiques ou mentaux ne participent pas totalement la vie sociale. En thorie, ils devraient rduire cette mise lcart grce aux techniques modernes de communication. Mais ils butent sur des barrires qui les empchent daccder aux informations ou de profiter des offres. Pourtant la plupart de ces barrires peuvent tre leves, condition de structurer la prsentation des informations en consquence. Les responsables de sites de commerce lectronique et de sites bancaires devraient tre les premiers se soucier de ce pourcentage non ngligeable de leur clientle ventuelle. Presque 10 % de la population allemande (ou franaise) souffre dun handicap physique qui leur rend plus difficile laccs aux informations sur Internet.

200

La conception Web accessible a pour but dorganiser les contenus et linterface utilisateur pour rendre les contenus accessibles tous les groupes dutilisateurs et sur tous les quipements. On rsume communment la conception Web accessible aux prcautions quil faut prendre pour rendre Internet accessible aux aveugles. Cette dfinition ne fait pas le tour de la question, loin de l. Je me suis dailleurs souvent demande do venait cette simplifi cation. Peut-tre parce que lcran informatique est devenu le symbole de lordinateur ? Celui qui ne voit pas, ne peut pas sen servir. Je fais rgulirement ce constat : des non-voyants sen sortent parfois mieux que dautres handicaps devant une page Internet non conue leur gard. On considre comme non-voyant ou mal-voyant une personne dont la vision se rduit quelques pourcentages de la valeur moyenne. Rien quen Allemagne, il y en a entre 150 000 et 200 000. Certains utilisent un ordinateur en augmentant la taille des caractres et en accentuant les contrastes des couleurs des textes, mais cela reste un dcryptage. Dautres doivent se rabattre sur une lecture vocale des donnes affiches ou un quipement de lecture en braille. Le pourcentage de personnes ayant des difficults de vision est encore plus important. Environ un quart de la population en ge de travailler souffre dun problme de vision, et le temps narrange pas les choses. Certains problmes se corrigent grce des verres, mais pas tous. Des pathologies oculaires peuvent tre rpares par la chirurgie, ou du moins rduites. Dautres, comme la rtinopathie pigmenteuse ou la rtinopathie diabtique, entranent une perte progressive et totale de la vision. Le syndrome de vision en tunnel rduit normment le champ de vision. Tenez une pice dun euro au bout du bras et imaginez que le diamtre de la pice soit votre champ de vision. Environ 10 % de la population masculine souffre dune certaine insensibilit aux couleurs. Le daltonisme les empche de distinguer les tons rouges des tons verts, en gnral. En revanche, la confusion des autres couleurs ou linsensibilit totale aux couleurs sont trs rares chez les femmes, le daltonisme les touche moins aussi. Un autre groupe rassemble les utilisateurs qui ne peuvent saisir les objets. Tout le monde ne peut pas manipuler une souris ou un clavier normal. Les causes sont multiples : bras et doigts paralyss, ou difficiles contrler, amputation ou paralysie de la totalit du tronc ou dun ct suite un infarctus. Mais tant quune personne reste capable de communiquer, mme via un signal binaire constitu de 0 et de 1, si elle a de lnergie, lenvie dapprendre et un logiciel appropri, elle pourra piloter toutes les fonctions dun ordinateur. Il y a par ailleurs presque 100 000 personnes en Allemagne qui connaissent des difficults daudition. Quelques milliers dentre elles en souffrent depuis lenfance. un point tel quelles ont eu beaucoup de difficults apprendre lire et crire, et nont atteint quun niveau scolaire quivalent au CM2. Cela pour souligner limportance de la formulation des textes dans les logiciels. Pour communiquer entre elles, mais aussi pour trouver des informations dans le monde qui les entourent, ces personnes utilisent la langue des signes franaise (LSF). Attention: l ny a pas que les malentendants qui naviguent sur le Web sans se servir de leurs oreilles ! Vous ne devez jamais vous contenter dmettre une alerte sous forme dun signal audio. Il faut toujours laccompagner dun message visuel facile distinguer

201

Plus Internet simmisce dans tous les domaines de la vie, plus les handicaps de situation prennent de limportance : accs ralentis Internet depuis un htel, conditions dclairage insuffisantes dans un moyen de transport, impossibilit dutiliser le son au travail, etc. Tout le monde tirera profit de sites Web plus accessibles. Il ne sagit pas pour autant de chercher satisfaire toutes les rgles dictes, comme le font les sites offi ciels des tablissements publics. Le moindre effort en direction de laccessibilit renforce le confort dutilisation des pages Web. Le succs qua rencontr Joomla! en fait un vecteur srieux pour propager ces concepts. Grce au template standard Beez, il est devenu assez simple de crer des pages accessibles au plus grand nombre.

14.02 La rglementation en vigueur

Les recommandations visant rendre les ordinateurs utilisables par les personnes handicapes sont plus anciennes quInternet. Ds dcembre 1982, les Nations Unies ont mis au point un programme daction mondiale (WPA) visant rendre accessibles les technologies modernes aux handicaps. Les multinationales telles que IBM, Microsoft et Sun ont dans les annes suivantes atteint dimportants objectifs ce niveau. En dcembre 1993, lpoque o le protocole du Web HTTP navait qu peine deux ans, lAssemble gnrale des Nations Unies a rdig une rsolution. Elle avait pour objectif de permettre un accs gal aux informations et la communication pour les handicaps. Quelques pays ont pris en compte cette recommandation en publiant des lois et rglements appropris. En France, cest la Loi Handicap de fvrier 2005 (http://www.handicap.gouv.fr/). En 1994 a t cr le Consortium de normalisation W3C. Parmi ses nombreuses activits de standardisation, le Consortium a mis en place un comit pour tablir des rgles daccessibilits du Web. Les travaux se sont termins en 1998, ce qui a permis aux Nations Unies de les prendre en compte dans leur amendement de dcembre 1998 (section 508). La publication de cette norme a rendu obligatoire pour le gouvernement des tats-Unis et ses fournisseurs la mise en conformit de tous leurs produits. Linitiative daccessibilit du Web du W3C a de son ct produit en mai 1999 un document appel Rgles daccessibilit des contenus Web (WCAG 1.0). Ce document a t repris sans retouches importantes par le gouvernement allemand dans son dcret BITV (Barrierefreie Informationstechnologie Verordnung). Il a suivi la loi sur lgalit des personnes handicapes de 2002 et bien dautres rglements parus entretemps dans dautres pays. Aprs lan 2000, dautres rgles ont t dfinies, par exemple en ce qui concerne la conception accessible des navigateurs Web et des autres logiciels dagent utilisateur (UAAG) ou de cration (Authoring, ATAG). Attention: Pour en savoir plus, rendez-vous sur le site gouvernemental http://delegation.Internet.gouv.fr/actions/accessibilite.htm. Certaines prconisations du document original WCAG1 de 1998 sont devenues obsoltes de nos jours, en raison des volutions technologiques. Nous ne nous en servons plus dans nos travaux actuels. Un document rvis WCAG2, qui aurait d paratre ds 2001, est en cours de validation. Une version prliminaire en t publie courant 2007 et son contenu est actuellement en dbat. Lexpert en accessibilit canadien Joe Clark avait propos en juin 2007 lErrata Samurai de WCAG dans lequel il faisait des propositions de rvision drastique du document original. Malgr leurs faiblesses actuelles, les documents bass sur WCAG1 restent pour lheure les seules bases stables pour guider la cration des pages Web accessibles. Nous conseillons de ce fait tous les intresss de sen tenir ces rgles, sauf exception justifi e. Surveillez galement les discussions souvent publiques qui vont mener la publication de la version 2.
202

Le document WCAG1 runit 14 recommandations, chacune articule en plusieurs points. La conformit ce document compte trois niveaux : objectifs obligatoires, objectifs conseills et objectifs complmentaires. Selon le niveau de conformit dun site Web, il obtient la note A, AA ou AAA respectivement (niveaux croissants). Le dcret allemand BITV regroupe les deux premiers niveaux, ce qui ramne deux les niveaux distinguer : ce qui est obligatoire et ce qui est facultatif. Les sites ne peuvent tre donc que de niveau AA ou AAA. Autrement dit, les objectifs du BITV sont en thorie plus rigoureux que ceux du document WCAG.

14.03 Aperu des critres daccessibilit des pages

14.3.1 Sparation du contenu et de la mise en page
La premire rgle est la plus importante suivre pour les concepteurs de sites Web : la sparation la plus complte possible des contenus et de leur prsentation :

du code HTML propre et pur pour les contenus ; pas d'utilisation inutile des cadres de mise en page ; formatage uniquement par des styles CSS ; structuration logique et arborescente des contenus ; repres visuels de saut.

La prsentation linaire des contenus et le formatage uniquement bas sur CSS constituent lune des principales dcisions pour augmenter laccessibilit. Ainsi, les techniques et appareillages dassistance au handicap prparent et exploitent les contenus sans infl uer sur la prsentation visuelle. La dfinition de la prsentation par des feuilles de style permet par exemple un mal-voyant de mettre en place ses propres feuilles de style pour adapter laffichage des pages ses attentes. La prsentation linaire des contenus et une structuration en rapport avec le sens des contenus sont notamment indispensables pour les utilisateurs des lecteurs dcran. Un lecteur dcran value le contenu dune page Web de haut en bas, donc de faon linaire. Si vous utilisez trop de tableaux pour la prsentation, le flux linaire est rompu. La notion de smantique des pages Web peut sembler difficile saisir au dpart. Vous pourriez songer une analyse linguistique. Sans aller si loin, le concept de smantique joue un grand rle dans les contenus Web. Par exemple, un outil de lecture dcran permet souvent lutilisateur de passer en revue les grands titres ou seulement les listes, afin de se faire une ide gnrale du contenu. Si la page Web ne contient aucun titre, cela nest plus possible. La structure de prsentation du document devrait dans la mesure du possible refl ter la structure signifi ante de son contenu. Dailleurs, de nombreux projets de publication Web doivent se conformer une charte rdactionnelle quant lemploi des diffrents niveaux de titres.

Repres visuels
La prsentation linaire des contenus souffre dun inconvnient srieux : il faut parfois revenir loin en arrire pour retrouver un contenu antrieur. En choisissant une prsentation sur trois colonnes par exemple, il est possible de faire dmarrer en haut plusieurs articles. Le regard embrasse plus dinformations, en utilisant ventuellement des aides visuelles. Ces aides sont reprsentes par des repres. Le but est dobtenir une formulation diffrente de celle de la prsentation graphique. Un quipement de lecture linaire exploite ainsi un plus grand nombre de domaine dinformations ds le dbut de la page. Ensuite, le lecteur se rend directement au bloc dinformations qui lintresse.
203

En gnral, les repres visuels prennent la forme dun menu pour naviguer dans chaque page. Ce menu plac en dbut de page doit tre masqu dans laffichage graphique. Il est assez dsagrable pour les valides de constater que rien ne se passe lorsquils cliquent sur un lien, puisque la cible du lien est dj prsente dans laffichage. Le menu des repres visuels ne doit jamais tre trop long et son contenu bien pens. Il ne faut pas quil vienne ajouter la complexit. Il est gnralement conseill de choisir comme premier repre visuel un lien pour revenir la page daccueil. Les visiteurs qui connaissent dj le site et ont pris lhabitude de la navigation disposent ainsi dun chemin rapide pour revenir au point de dpart de leur navigation. Ces observations vous ont sans doute permis de mieux comprendre que les pages, notamment les plus complexes, doivent offrir une prsentation graphique tudie et avoir fait lobjet dune vritable conception des contenus. Le but est quelles ne constituent pas de barrires inutiles pour les logiciels dexploitation linaire.

14.3.2 Contraintes de conception et de contenu

Crer un site Web ne se limite pas trouver une belle prsentation. La conception doit aider les visiteurs assimiler les informations. Elle doit montrer les possibilits dinteraction tout en laissant transparatre lidentit du propritaire des pages, que ce soit une entreprise ou un particulier. La conception doit permettre de mener le visiteur dans un chemin logique travers les contenus essentiels, en sorte quil se sente guid pour capter le concept global. Voici les points surveiller dans la conception dun site accessible :

une distribution logique des contenus ; un choix rflchi des couleurs ; un contraste visuel suffisant ; des tailles de caractres variables ; des mises en page retaillables (mise lchelle) ; aucun texte sous forme graphique ; aucun arrire-plan transparent pour les graphiques ; des textes d'attente senss pour les images ; des composants de navigation de dimensions suffisantes ; des prcautions pour mettre en place des vnements pilots seulement via la souris.

14.3.3 Organisation visuelle et smantique du contenu

Pour guider de faon logique le visiteur dans votre site, il faut obtenir une bonne sparation des diffrentes zones des pages. Plus la structure est logique, mieux les visiteurs trouveront leur route. La structuration des contenus a autant dimportance que celle de la prsentation. Dailleurs, il existe une rgle importante au niveau de la structuration des contenus : Vous devez structurer vos contenus conformment aux attentes de vos visiteurs. Cet objectif nest pas toujours simple atteindre, et il faut parfois changer dapproche. Les auteurs des contenus connaissent leur projet ou leur entreprise. Ils ont donc tendance structurer les choses dune manire qui nest pas celle que le visiteur choisirait. Plusieurs conventions destines la structuration visuelle ont fini par stablir : le haut de page contient en gnral des informations concernant lauteur du site. Lobjectif de la page et les principaux composants de navigation (contact, mentions lgales et aide la navigation) sont prsentes au mme
204

endroit avec parfois des liens vers un plan du site et une fonction de recherche. Cette position particulire permet de placer certaines informations directement devant le visiteur, ce qui fournit un point de rfrence en cas de souci daccs. Dans les langues occidentales, lcriture se faisant de gauche droite, loeil est entran naturellement analyser le contenu dun document dans le mme sens, soit de gauche droite et de haut en bas. Voil pourquoi le logo est gnralement plac dans le coin suprieur gauche. Cest cet endroit que lon sattend le voir. La plupart des utilisateurs sattendent trouver les lments de navigation du ct gauche. Cest un vaste sujet de dbat, et les dtracteurs prtendent que cela prouve un certain manque dimagination. Mais les hommes aiment les habitudes, y compris sur le Web. Chacun a son exprience et agit en consquence. En laissant lendroit habituel les lments attendus, vous faites gagner du temps aux visiteurs. Ils trouvent plus facilement ses repres.

14.3.4 Choix des couleurs

Le choix des couleurs est essentiel pour limiter les obstacles laccs. Mme les individus souffrant de handicaps visuels doivent profiter pleinement de votre site Web. Testez votre site en le forant en niveaux de gris, ce qui vous permet de le voir comme les personnes insensibles aux couleurs. La capacit de distinguer diffrentes nuances de gris dpend bien sr de lindividu. Nombreux sont les handicaps qui ont appris se reprer dune autre manire, et parviennent deviner quelles couleurs correspondent les tons quils voient. Ils savent que lherbe est verte et peuvent ainsi reprer dautres tons verts par rapprochement.

Figure 14.1 Aspect du modle Beez aprs conversion en niveaux de gris. Le daltonisme est plus rpandu. Les daltoniens confondent le rouge et le vert ainsi que les mlanges de ces deux couleurs. Attention: Vous pouvez en dduire quil faut bannir les combinaisons de rouge sur vert ou linverse.
205

14.3.5 Contraste
Loptimisation du choix des couleurs permet galement de faciliter la navigation aux personnes souffrant dautres problmes visuels. En effet, ce nest pas que la nuance de couleur qui a de limportance, mais galement le contraste suffisant entre plusieurs couleurs. Dans les zones de texte, la couleur darrire-plan et davant-plan doivent offrir un contraste suffisant. Il nest cependant pas possible de satisfaire tout le monde. Un texte noir sur fond blanc est ce qui offre le plus de contraste. Pour viter un effet dblouissement, il peut tre utile dadoucir un peu la teinte du fond. Certains mal-voyants ont besoin dun contraste trs marqu pour distinguer les lments dune page. Les combinaisons du style texte en blanc sur fond orange leur seront inaccessibles. Dautres individus sont blouis par un contraste trop fort.

14.3.6 Tailles de caractres configurables

Une autre rgle importante consiste laisser lutilisateur augmenter le corps des caractres. Les navigateurs actuels offrent tous la possibilit daugmenter ou de rduire la taille des caractres lcran. Mais cela nest possible que si les dfinitions des tailles de caractres ont t faites de faon relative, et non en nombre de pixels. Vous pouvez indiquer les valeurs en pourcentage ou dans lunit em (largeur dun M en capitale). Ces deux units font rfrence la hauteur des caractres lorsque vous les associez la proprit nomme font-size.

14.3.7 Mises en page gomtrie variable

Dans le domaine de la conception Web, on peut distinguer les mises en page figes et les mises en page souples. Une mise en page souple est capable de sadapter aux dimensions variables de la fentre daffichage. Les largeurs des colonnes doivent tre spcifi es en pourcentage ou en espace em pour exploiter toute la surface daffichage disponible. Le contenu est automatiquement remis en page en fonction des dimensions de la fentre. Il sagit a priori dune excellente manire de procder. mes yeux toutefois, la largeur ne devrait pas dpasser 1000 pixels afin dviter que les lignes de texte deviennent trop longues, ce qui nuit la lisibilit.

14.3.8 Graphiques et illustrations

Les objets graphiques peuvent tre implants dans les pages Web soit au niveau du template, soit au niveau des contenus. En ce qui concerne les templates, il faut bien prparer le logo en vitant de le concevoir avec un fond transparent. Supposons un logo avec un texte en noir sur un fond transparent. Les mal-voyants activent souvent le mode daffichage invers sous Windows. Dans ce cas, le texte est en clair sur un fond sombre. Le logo de Beez possde un arrire-plan blanc, ce qui le rend lisible mme sur un fond noir (voir Figure 14.2).

206

Figure 14.2 Affichage invers. Il va sans dire que si le texte est noir sur un fond transparent, il deviendra invisible si le fond est noir. vitez dans la mesure du possible dutiliser des textes sous forme de graphiques. Prvoyez au minimum un texte de remplacement. En effet, les textes graphiques ne peuvent pas tre retaills par lutilisateur pour offrir des caractres plus lisibles. Mais il arrive que le client du site demande une police particulire. Si vous devez gnrer des textes sous forme graphique, produisez une version en gros caractres puis rduisez la taille en pourcentage em afin de laisser lutilisateur augmenter un peu la taille du texte. Et noubliez pas de toujours prvoir un texte de rechange (alternatif) suggestif. Rflchissez bien aux contenus de ces textes de rechange pour les graphiques. Ceux qui ne peuvent pas lire le contenu de vos graphiques nont que ces textes pour comprendre votre message. Vous pouvez aisment dfinir vos textes de rechange au moyen de lattribut Alt de la balise IMG. Il nest pas toujours simple de trouver un texte bref mais informatif. Vous ne pouvez notamment pas fournir de texte pour une image trop vague. Cest le cas de toutes les images de dcor ou des simples agrments visuels. Il faut reconnatre quil nest pas facile avec de telles images de se conformer une des premires rgles daccessibilit des sites Web. Dun autre ct, vous pouvez rencontrer des problmes pour trouver des textes de rechange adquats pour les graphiques trs chargs en informations, comme cest le cas pour une image rappelant le rsultat des dernires lections. Dans ce cas il faut recourir lattribut nomm longdesc. Cet attribut reoit comme valeur un chemin daccs un fichier externe qui contient un texte complmentaire :
<img src="ResultatsVote.jpg" width="271" height="265" alt="Rsultats des municipales 2008" longdesc="resultatsvote.html">

Sachez cependant que longdesc nest pas correctement exploit par tous les logiciels de lecture cran.

14.3.9 Des boutons de navigation confortables

Les handicaps pour utiliser une souris doivent exploiter dautres mthodes, par exemple le clavier. Lastrophysicien anglais Steven Hawking est un des plus clbres handicaps moteur du
207

monde. Il souffre dune forme rare de sclrose latrale amyotrophique (SLA) et pilote son fauteuil roulant avec sa bouche. Les appareillages qui ont t invents pour satisfaire les besoins des handicaps sont de vritables bijoux technologiques qui permettent datteindre un rsultat incroyable. Pendant des annes, on a considr quil fallait viter de dfinir des vnements qui taient contrlables uniquement avec une souris. Ils ntaient pas pilotables par les handicaps moteur ni par les utilisateurs dun logiciel lecteur dcran. Mais les choses ont volu dans ce domaine et la simulation de la souris est devenue possible (http://assistiveware.com). Cela dit, les personnes nutilisant que le clavier nont toujours pas accs certains vnements normalement raliss la souris. Dans tous les cas, songez concevoir des boutons de commande offrant une surface suffisante. Il nest pas facile de pointer sur un lien ou sur un bouton de trop petite taille, y compris pour les personnes ne souffrant daucun handicap.

14.3.10 Formulaires
Linteractivit est devenue prpondrante sur le Web. Elle doit tre conue en sorte de simplifier les communications entre le visiteur et lditeur du site. Le visiteur fournit souvent des donnes personnelles quun programme recueille prcieusement. lheure actuelle, la technique favorite dinteraction reste le formulaire HTML. Cest une bonne chose au niveau accessibilit. Le langage HTML fournit des possibilits minimales pour tablir des interactions indpendantes de la plate-forme et de lquipement du visiteur. Il ny a pas remettre en cause lutilisation des formulaires lorsquils permettent dadapter la fonction des handicaps qui se servent dappareillages complmentaires. Les principaux points considrer lors de la conception dun formulaire HTML accessible sont la linarit du contenu et le regroupement.

Les lments fieldset et label

Les concepteurs Web ont souvent tendance implanter leurs formulaires dans des tableaux pour la mise en page. La conception des formulaires est simplifie. Mais dans la structure qui en rsulte, les relations logiques entre les contenus, notamment entre lgendes et lments de saisie, ne peuvent plus tre suivies. Info: Article BITV 10.2 : tous les composants de contrle des formulaires dots de lgendes implicites doivent tre conus en sorte que les lgendes soient correctement places. Rgle BITV 12.4 : les lgendes doivent tre associes prcisment aux composants concerns. Pour tablir une relation logique entre un lment de formulaire et sa lgende, il suffit dutiliser llment nomm label du langage (X)HTML :
<label for="Prenom" title="Prenom">Prnom:</label><input id="Prenom" type="text" size="20" name="Prenom" value="" />

208

Le champ de saisie de lexemple porte un nom unique en utilisant lattribut universel ID. Lattribut for de llment label peut ainsi y faire rfrence. Info: Rgle BITV 12.3 : les blocs de donnes volumineux doivent tre distribus en plusieurs groupes plus lgers laide de balises du langage considr. Lorsquun formulaire prsente tout une srie de champs de saisie similaires, comme par exemple le nom de lpoux et celui de lpouse, groupez les sous-ensembles au moyen de fieldset, selon des frontires logiques :
<fieldset> <legend> Donnes pouse</legend> <label for="PrenomEpouse">Prnom de lpouse :</label> <input id="PrenomEpouse" type="text" size="20" name="Prenom" value="" /> ... </fieldset> <fieldset> <legend> Donnes poux</legend> <label for="PrenomEpoux">Prnom de lpoux :</label> <input id="PrenomEpoux" type="text" size="20" name="Prenom" value="" /> ...

Info: La plupart des logiciels de lecture cran lisent le contenu de legend dans le mode Formulaire avant chaque label. Le contenu doit donc tre court. Les utilisateurs de lecteur cran Jaws peuvent profiter dans le cadre de legend dune aide la navigation. En effet, ils passent dun groupe fieldset au suivant, et ainsi se font rapidement une ide globale des lments du formulaire. Le logiciel WebFormator ne propose pas cette possibilit.

14.04 Accessibilit dans Joomla!

Figure 14.3 Le logo de Beez. Joomla! est lun des systmes de gestion de contenus les plus rpandus. En le dotant dun template daccessibilit tel que Beez, ce produit peut faire concrtement progresser le monde du Web en direction de laccessibilit pour tous. Beez est le fruit dimportants efforts de programmation, et encore plus de persuasion. Ce template permet aux professionnels dacclrer la cration de projets Web accessibles. Cest un gain de temps, un gain dargent et une incitation tenir compte des besoins des personnes handicapes. Cest une approche trs intressante pour les sites des mairies et autres structures tatiques qui doivent montrer lexemple.

209

Mais Beez a galement t structur pour permettre des individus peu verss dans la programmation de concevoir des pages complexes et trs accessibles. Ainsi, Joomla! combin Beez constitue un excellent outil de multiplication des sites Web compatibles avec les attentes du monde du handicap. Le template Beez nest quun exemple des possibilits nouvelles qui souvrent dans Joomla! 1.5. Cest un point de dpart que vous pouvez facilement modifier et enrichir. Vous pouvez notamment intervenir sur son aspect visuel en modifi ant librement les fichiers CSS. Les programmeurs peuvent crer de nouveaux templates partir de Beez, en tant assurs de rester conformes aux recommandations daccessibilit sans perdre en performance. lheure actuelle, ce que lon dsigne comme template Joomla! est la partie qui gre laspect visuel. Au premier regard, Beez ne semble pas trs attrayant. Il faut savoir que laspect visuel et le code CSS associ ne constituent quun piderme que vous pouvez aisment modifier si vous connaissez la syntaxe du langage CSS. Le fichier index.php ne scarte quasiment pas de celui des templates habituels. Nous nen aborderons pas les dtails. Voici dabord quelques exemples de sites qui ont t raliss avec ce template sans effectuer de personnalisation pousse.

Figure 14.4 http://www.lichtblick.ch/

Figure 14.5 http://jobs.pr-journal.de/

210

Figure 14.6 http://www.assfinet.de/

Figure 14.7 http://www.kommkonzept.de/

Figure 14.8 AWO.

211

14.05 Le code HTML

Dans Joomla!, les contenus taient jusqu prsent verss dans des tableaux de mise en page. Dans Joomla! 1.5, un nouveau systme fait son apparition : les Template-Overwrites. Il devient possible de positionner les donnes HTML dans le template sans avoir recours une multiplication de tableaux. Cela permet de se mettre en conformit avec les objectifs daccessibilit. Il nest pas trs simple dagir sur le code HTML en sortie, mais la structure des donnes reste logique et lensemble forment un tout. Il suffit de quelques connaissances en langage PHP pour russir ajouter des personnalisations. Joomla! se base donc sur le systme appel Template-Overwrites. Son principe est le suivant : si Joomla! trouve dans le dossier des templates un sous-dossier HTML avec du contenu, il en exploite les fichiers. Dans le cas contraire, il utilise le code standard qui se base sur des tableaux pour des raisons de compatibilit. Beez illustre trs bien ce nouveau mcanisme. Voyez ce sujet la section 13.3.8 du Chapitre 13. Si lon analyse la structure arborescente des dossiers de Beez, le nouveau sous-dossier HTML saute aux yeux (voir Figure 14.9).

Figure 14.9 Structure arborescente dun modle avec dossier HTML. Ce dossier contient les noms de tous les modules et composants dfinis dans cette installation de Joomla!. La gnration des donnes HTML en sortie pour tous ces fichiers a t adapte. Pour tre conforme lobjectif de sparation entre contenu et prsentation, jai conu une convention de marquage
212

qui reproduit la structure des contenus. Elle suffit la plupart des domaines demploi sans retouches supplmentaires. Il en dcoule les points suivants :

Tous les lments dun document sont rangs dans lordre logique, quelle que soit la position laquelle ils seront prsents ensuite lcran ( ct ou dessous). Tous les lments ont t conus en conformit avec leur signifi cation dans le document (leur smantique) : les titres sont des titres, les paragraphes sont des paragraphes, les citations aussi, etc. Cela permet de rexploiter le mme document vers diffrents priphriques de sortie, y compris de faon optimale via un logiciel de lecture dcran.

La Figure 14.10 donne un aperu de la structure apparente des titres et sous-titres de Beez.

Figure 14.10 Structure des titres.

14.06 Repres visuels de navigation

Lnorme inconvnient de la reprsentation linaire des contenus est dobliger le visiteur, dans certain cas, passer par de nombreuses tapes pour revenir un contenu antrieur. Beez gre les repres visuels de navigation de deux manires. Tout dabord par le fichier index.php dans lequel la position courante est mentionne. Beez gre galement les repres visuels au niveau des composants et des modules qui contiennent des lments de formulaire.

14.6.1 Le fichier index.php

Voici un extrait du dbut du code source de ce fichier :
<ul> <li><a href="#content" class="u2"> <?php echo JText::_(Skip to Content); ?> </a></li> <li><a href="#mainmenu" class="u2">

213

<?php echo JText::_(Jump to Main Navigation and Login); ?> </a></li> <li><a href="#additional" class="u2"> <?php echo JText::_(Jump to additional Information); ?> </a></li> </ul>

Les liens de repres visuels font rfrence lintrieur du document leur point dancrage. Ils sont insrs de faon smantiquement correcte dans une liste. Les instructions JText servent la localisation. Elles sont automatiquement traduites dans la langue choisie pour linterface (revoyez le Chapitre 4). Avant chaque ancre apparat un titre dont la position est dfinie par un style CSS au niveau de la surface daffichage Viewport. Le titre est normalement cach, mais il est exploit par les appareillages tels que les lecteurs dcran. Cela facilite grandement la comprhension de la structure du contenu.
<h2 class="unseen"> <?php echo JText::_( View , Navigation and Search); ?> </h2> ... <a name="mainmenu"></a>

Il est galement possible de placer le repre de saut en relation directe avec lidentificateur ID de la balise locale <div>, ce qui est encore plus en adquation avec la notion de document structur. Mais il faut tenir compte des logiciels de lecture dcran plus anciens qui ne savent pas grer cette approche.

14.6.2 Les liens de saut dans les formulaires

Un utilisateur dun appareillage de lecture cran valide un formulaire qui nest pas dot dune balise de repre de saut. Il arrive au niveau du dbut de la page et doit tout dabord faire dfiler jusquau contenu qui lintresse. Pour viter cela, les formulaires utiliss dans le template Beez dfinissent des repres permettant de se rendre directement au contenu :
<form action="<?php echo JRoute::_( index.php?option=com_search#content ) ?>" method="post" class="search_result<?php echo $this->params->get(pageclass_sfx) ?>">

14.07 Beez et les modules

Joomla! est livr ds le dpart avec toute une srie de modules apportant des enrichissements fonctionnels au noyau. Certains permettent dutiliser du code HTML en rdaction libre. Dautres, trs spcialiss, permettent par exemple dafficher la liste des articles les plus lus. Dans la partie administrative de Joomla!, vous pouvez dcider de la position exacte des diffrents modules au sein du template dans la partie publique. Les identifi ants des diffrentes positions possibles pour les modules sont dfinis dans le fichier XML interne au template. Lintervention dans ce fichier permet de personnaliser la structure de la page en fonction des besoins particuliers de chaque projet. Lexemple de code suivant implante un module dans la zone de position left :
<jdoc:include type="module" name="left" />

214

Le template Beez dispose dune mthode particulire pour associer les modules une position. Cest ce qui permet de contrler llment header-level, cest--dire la reprsentation smantique des titres du module. chaque module peut tre associ un titre issu dun niveau de hirarchie. Le choix de laspect des titres et sous-titres revt une grande importance dans les pages. La prsentation doit paratre logique dans la mesure o les diffrents contenus ont des importances ingales.
<jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" />

Un module remarquable en relation avec la cration de page accessible est le module Most Read. En prsentant les articles les plus consults, il facilite lassimilation des donnes par le lecteur.

14.08 Le composant com_content

Le composant com_content dirige la gnration en sortie de tous les contenus. Il constitue le noyau de notre code de template. Les fichiers correspondants sont disponibles dans le sous-dossier templates/beez/html/com_content. Dans le template standard, Joomla! use et abuse des tableaux pour mettre en page les contenus. Cela ne ncessite aucune dfinition CSS. Si vous adoptez Beez, il faut tout revoir. Dans ce template, nous dfinissons des balises <div> imbriques et associes diffrentes classes CSS afin doffrir une grande souplesse de mise en page. Il existe des classes pour les lignes et colonnes individuelles, ce qui permet dadapter laspect quasiment tous les besoins de prsentation. Ceux qui considrent cette varit de classes comme trop riche peuvent supprimer le code appropri avec la fonction de recherche et de remplacement. Voici comme exemple un extrait du fichier beez/html/com_content/frontpage/default.php :
<div class="article_row<?php echo $this->params>get(pageclass_sfx); ?>"> <?php for ($z = 0; $z < $colcount && $ii < $introcount && $i < $this->total; $z++, $i++, $ii++) : ?> <div class="article_column column<?php echo $z + 1; ?> cols<?php echo $colcount; ?>" > <?php $this->item =& $this->getItem($i, $this->params); echo $this->loadTemplate(item); ?> </div> <span class="article_separator">&nbsp;</span> <?php endfor; ?> <span class="row_separator<?php echo $this->params->get(pageclass_sfx); ?>">&nbsp;</span> </div>

14.09 Formulaires
Vous savez que Beez abandonne dfinitivement les tableaux de mise en page, notamment au niveau des formulaires.
215

Jai dcid, en conformit avec les standards, dtablir les liaisons logiques entre les lments des formulaires et leurs lgendes en utilisant llment label. Les champs de saisie sont identifi s grce lattribut universel ID, et nous faisons rfrence ce numro dans lattribut for de llment label. Tous les lments de formulaire ont t repenss en consquence dans le template Beez. chaque endroit o il me semblait logique de procder ainsi, jai regroup les contenus par un lment fieldset et je lui ai associ un lment legend (par exemple pour le formulaire ddition de contenu)

14.10 Tables de base de donnes

Il ne faut pas bannir totalement les tableaux. Lorsquils servent reprsenter des structures de donnes, ils restent le mode de prsentation le plus pertinent. Joomla! utilise dans de nombreuses occasions des tableaux de donnes peu complexes. Cest notamment le cas dans la liste des liens Web ou celle des contacts. Les tableaux de donnes restent des lments accessibles lorsquils sont utiliss pour reprsenter des donnes tabulaires. Lattribut nomm headers tablit la liaison entre chaque cellule de donnes (balise td) et son titre (balise th) via lidentificateur ID du titre ou, lorsquil y a plusieurs titres, par identificateurs ID numriques croissants. Cette approche est utilise pour les tableaux de donnes internes de Joomla!. Rappelons par ailleurs que la configuration de la liste des liens Web ou celle des contacts contient un paramtre pour masquer la ligne des en-ttes de tableaux. Attention: Veillez ne pas masquer cette ligne, car cela rduit la lisibilit de vos tableaux de donnes.

14.11 La conception et les styles CSS

Jai fait mon possible pendant la conception pour rpondre aux multiples questions relatives CSS au fur et mesure quelles se faisaient jour. Cest notamment le cas des contenus flottants et celui du positionnement absolu par rapport des lments relatifs. Attention: Les personnes qui matrisent le langage CSS trouveront rapidement leurs repres dans le code propos afin de ladapter leurs besoins. Les dbutants auront intrt se tourner dabord vers un livre dinitiation CSS.

14.11.1 Les fichiers CSS internes de Beez

Vous trouverez toute une srie de fichiers CSS dans le sous-dossier nomm CSS. Leurs rles sont divers. Le positionnement et laffichage ont t volontairement distribus dans plusieurs fichiers. Ce qui permet, par exemple pour modifier les couleurs, de nintervenir que sur un fichier, tel layout.css. Vous ne risquez pas de modifier par mgarde des positions avec cette approche. Cest une garantie de scurit.

216

Liste des fichiers CSS

position.css ; layout.css ; print.css ; template.css ; ie7only.css ; ieonly.css ; general.css ; template_rtl.css.

14.11.2 Positionnement
La position exacte de chaque contenu est rgie par les dfinitions du fichier position.css. Il contient toutes les instructions CSS pour le document cadre, tel quil a t dfini dans le fichier index.php, ainsi que pour la position sur une ou deux colonnes de la zone de contenu et celle de larticle dentre Leading story. Nintervenez sur le contenu de position.css que si vous savez exactement ce que vous voulez faire. Lexemple suivant ajoute larticle Leading story une image dabeille en arrire-plan :
.leading { background: #EFDEEA url(../images/biene.gif) no-repeat top left; border: solid 1px #CCC; color: #000; margin: 30px 0px 10px 0px; padding: 20px 20px 40px 120px; position: relative; }

14.11.3 La mise en page ou prsentation

Vous pouvez en revanche vous en donner coeur joie en termes de personnalisation dans le fichier layout.css. Il ne dfinit que les formats et les choix de couleurs. Vous trouverez cependant certaines dfinitions de position pour les contenus. Lexemple de style CSS suivant gre lapparence du titre de larticle Leading story puis place le lien pour la suite dans le coin infrieur droit. Nous utilisons un positionnement absolu lintrieur de llment position relative Leading story :
#main .leading h2,#main2 .leading h2 { background:#EFDEEA; border-bottom:solid 0 #333; color:#93246F; font-family:trebuchet MS, sans-serif; font-size:1.4em; font-weight:normal; margin:0 0 10px; text-transform:uppercase; } #main .leading .readon,#main2 .leading .readon { background:url(../images/pfeil.gif) #93246F no-repeat; border:solid 0; bottom:0; color:#FFF !important; display:block !important;

217

margin-top:20px !important; position:absolute; right:0; text-decoration:none; padding:2px 2px 0 30px; }

14.11.4 Autres considrations

Le fichier template.css est intgr Joomla! ds que vous demandez laffichage dun contenu dans une fentre sans composant de navigation. Cest par exemple le cas dans la fentre flottante denvoi dun courriel ou lorsque vous choisissez ce genre daffichage pour un article. Dans ces conditions, la mise en page est totalement dpendante des dfinitions trouves dans ce fichier. Les deux fichiers ie7only.css et ieonly.css prennent en charge le bogue de non-conformit des diffrentes gnrations du navigateur Internet Explorer. Elles sont actives de faon conditionnelle au tout dbut du fichier index.php via des commentaires conditionnels. Rappelons que les commentaires conditionnels ne sont visibles que par le navigateur Internet Explorer de Microsoft partir de la version 5. Les instructions quil dlimite ne sont interprtes que par ces navigateurs :
<!--[if lte IE 6]> <link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if IE 7]> <link href="<?php echo $this->baseurl ?>/templates/beez/css/ie7only. css" rel="stylesheet" type="text/css" /> <![endif]-->

Le fichier print.css ne rclame pas de commentaires. Il se charge de mettre en forme la page pour une impression et ne sert dans aucun autre domaine. En revanche, vous pourriez vous tonner de voir apparatre en gros caractres le mot Content juste avant le contenu, alors que ce mot ntait pas dans les donnes dorigine. Il faut savoir que CSS permet dinjecter du contenu dans un document, comme le montre lextrait qui suit. Notez que seuls les navigateurs conformes la norme sont capables dinterprter cette demande :
#main2:before { content: content ; }

Le fichier nomm general.css permet de personnaliser laspect des messages derreur internes de Joomla! pour quils sintgrent bien la prsentation choisie. Enfin, le fichier template_rtl.css se charge de grer laffichage des pages avec une criture de droite gauche. Lacronyme RTL signifie Right to Left. Vous choisissez le sens dcriture dans le fichier XML des fichiers de langues en vigueur. Il est disponible sous forme dune variable dans le fichier index.php du template.
<?php if($this->direction == rtl) : ?> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ beez/css/template_rtl.css" type="text/css" /> <?php endif; ?>

218

Cet extrait dun fichier CSS permet par exemple dexploiter le template Beez avec des contenus en langue hbraque ou arabe. Vous pouvez vous amuser voir le rsultat dun basculement dun contenu en anglais ou en franais vers une criture de droite gauche. Il suffit de faire passer 1 la variable mentionne (voir Figure 14.11). Chemin daccs : language/en-GB/en-GB.xml
... <metadata> ... <rtl>1</rtl> ... </metadata>

Figure 14.11 Beez avec un affichage en criture de droite gauche (RTL).

14.12 Fonctions daccessibilit internes de Joomla!

Dans Joomla!, vous pouvez faire apparatre seulement le dbut des articles, cest--dire les chapeaux ou les accroches. Dans les prcdentes versions de Joomla!, chaque dbut darticle tait suivi dun lien indiquant Lire la suite (ou Read more). Le texte de ce lien tait le mme partout jusqu la version 1.5. Les appareillages daide tel que les lecteurs dcran ne permettent de traiter que les liens dune seule page. Par consquent, il devient ncessaire de reformuler les textes des liens pour identifier la cible avant de dcider de sy rendre. Cette dmarche concerne galement le libell de type Lire la suite, qui doit tre personnalis pour chaque article. Si vous ne conformez pas le site cette contrainte, il sera rejet ds le premier test de conformit. Dans Joomla! 1.5, le libell du lien de suite est positionn de faon standard, ce qui aide le distinguer de la cible du lien. Cette approche nest cependant pas viable long terme. Elle provoque lapparition dune information en double et cest une donne qui est difficilement accessible aux rdacteurs.
219

Nous avions vu au Chapitre 8 (section 8.2.1) comment accder aux paramtres avancs dun article, afin de dcider de son aspect et du contenu rendre visible sur chaque page. Dans Joomla! 1.5, un nouveau paramtre est apparu. Il sintitule Texte alternatif Lire la suite. Vous pouvez le distinguer dans le bas de la liste montr la Figure 14.12.

Figure 14.12 Le paramtre de saisie du texte alternatif pour les liens Lire la suite. Il est envisageable de faire de la saisie dun contenu suggestif dans ce paramtre un impratif rdactionnel. En effet, il ne sert pas qu personnaliser les textes des liens. Il permet galement dattirer la curiosit du lecteur afin de linviter lire la suite.

14.13 Sources dinformations sur laccessibilit

Assistive Technologien Barrierefreiheit Beez Checkertools Joomla! Kapitel 14

14.13.1 Allgemeines

einfach-fuer-alle.de wob11.de barrierefrei-kommunizieren.de 220

webaccessibility.de (umfangreiche Linksammlung von Martin Stehle) blog.der-auftritt.de

14.13.2 Assistive Technologien

Webformator: webformator.com IBM Homepagereader: -5.ibm.com/de/accessibility/hpr.html Jaws: freedomscientific.com/fs_downloads/jaws.asp Windows eyes: gwmicro.com VIRGO: baum.at

14.13.3 Checkertools

Colour Contrast Analyser: o juicystudio.com/services/colourcontrast.php o visionaustralia.org.au/info.aspx?page=628 o webforall.info/html/deutsch/col_analy.php Vischeck: vischeck.com/ Cynthia Says: contentquality.com Bobby: webxact.watchfire.com Validator: validator.w3.org Validator: htmlhelp.com Wave: wave.webaim.org/wave/index.jsp AIS Toolbar: webforall.info/html/deutsch/asistoolbar.php Accessibility Toolbar Mozilla/Firefox: cita.disability.uiuc.edu/software/mozilla/

14.13.4 Buchtipp
Angie Radtke u. Michael Charlier. Barrierefreies Webdesign. Attraktive Websites zugnglich gestalten. Addison-Wesley 2006. ISBN 978-3-8273-2379-8.

221

CHAPITRE 15 : CONCEPTION DE COMPOSANTS, DE MODULES ET DE PLUGINS

Supposons que vous deviez rpondre un besoin informatique pour lequel Joomla! noffre aucun composant appropri. Prenons comme exemple un concessionnaire automobile qui aimerait proposer des automobiles doccasion via un site Web Joomla!. Vous pouvez facilement augmenter le primtre fonctionnel en concevant de nouveaux composants, modules et plugins. Au dpart, cela peut paratre une aventure complexe, mais mme les dbutants en langage PHP en viennent bout. Le Chapitre 13 vous a permis de dcouvrir les rouages de la construction et de la mise en place dun template (modle). Vous devinez donc ce qui vous attend. Dans ce chapitre, nous allons moins nous intresser la prsentation quau traitement des donnes. Info: partir du 1er janvier 2008, la version 4 de PHP nvolue offi ciellement plus. Toutes les nouvelles extensions doivent donc tre conues pour la version 5 de PHP. Joomla! est compatible avec les deux standards dans sa version 1.5. Pour en savoir plus, rendezvous sur le site http://gophp5.org/.

15.0.1 Lapproche MVC (Model View Controller)

La version 1.5 de Joomla! introduit une nouvelle approche pour la conception des extensions : lapproche Modle-Vue-Contrleur que lon abrge en MVC. Ce concept se rpand de plus en plus dans le monde du dveloppement logiciel afin de maintenir un minimum dorganisation. En matire de dveloppement de logiciel, on distingue gnralement trois domaines :

un modle de donnes (le Modle) ; une prsentation des donnes (la Vue) ; un pilotage du programme (le Contrleur).

Ces trois domaines ont t standardiss, mais les programmeurs, souvent trs individualistes, ont tendance mal ragir toute injonction externe. Il faut donc leur apporter de vritables avantages. Voyons-les plus en dtail.

M : le Modle (model)
Le modle dfinit les donnes traiter et afficher. Lorigine de ces donnes nest pas fige. Le modle ne sait ni comment les donnes vont tre prsentes, ni comment elles vont tre traites et modifies.

V : la Vue (prsentation, view)

Ce domaine sintresse lutilisation des donnes par affichage ou transfert. Une connexion fonctionnelle doit tre tablie entre le modle et la vue pour exploiter les donnes.

C : le Contrleur
Que reste-t-il au contrleur ? Il se charge du contrle de lensemble des oprations. Cest le contrleur qui ragit aux donnes saisies par lutilisateur et aux autres vnements. Cest lui qui gre les modles et les vues, et retransmet les donnes de sortie une vue (ou une autre).

222

15.0.2 Quels sont les avantages de MVC ?

Nous avons dit plus haut que cette approche permettait de mieux organiser le dveloppement avec Joomla!. Dans la version 1.0, vous pouviez programmer btons rompus. Cest dornavant dconseill dans Joomla! 1.5. Le but nest pas de crer un carcan pour la cration, mais de mieux rpondre aux attentes des utilisateurs, cest--dire peut-tre vous. Voici en effet ce que vous pouvez dsirer :

des sites Web accessibles tous (overrides) ; des adresses URL optimises pour les moteurs de recherche (rfrencement) ; une authentification distribue ; des possibilits de localisation vers dautres langues ; la scurit et la facilit de maintenance ; des possibilits de rutilisation ; et bien d'autres possibilits...

Toutes ces autres possibilits sont une des raisons principales de vouloir maintenir de lordre dans le projet. Si vous tes la tte dune entreprise unipersonnelle, vous pouvez encore stocker lorganisation dans votre petite tte avec un papier et un crayon. Mais cela devient bien plus difficile avec dix salaris. Si votre socit commence crotre, il vous faut un systme pour grer vos projets ! MVC est une rponse, tout du moins au niveau du logiciel. Cette approche permet de concevoir les programmes pour simplifier leur modification ultrieure et en permettre la rutilisation dans dautres projets. Ce nest pas la panace, mais cest dj un pas dans la bonne direction. Si vous vous conformez aux rgles que dfinit cette approche, cest tout bnfi ce pour vous ! Bien sr, des questions fondamentales surgissent :

O dois-je placer ma logique de traitement ? Dans le contrleur ou dans le modle ? Comment rutiliser des bote de dialogue ? Dans la vue ? Comment jongler avec plusieurs vues (tableaux, fiches, partie publique, partie administrative).

Il ny avait pas de structure comparable dans Joomla! 1.0. Cest pourquoi je pense que ladoption et la ralisation concrte de ce modle dans Joomla! 1.5 reprsente lun des plus beaux objectifs atteint par lquipe de Joomla!. Seul lavenir nous dira si les utilisateurs et les programmeurs en conviennent aussi. :-)

Quel est donc lavantage pour tous ?

Lavantage de cette approche, vous le connaissez dj. Il est beaucoup plus simple de maintenir en ordre votre bureau, votre cuisine, votre garage, votre vhicule ou votre grenier si vous avez pris un jour la dcision de tout bien y ranger. Dans le monde de la conception des logiciels, cette prcaution doit tre prise ds le dpart pour que le projet puisse voluer et rester contrlable. Joomla! nen est quau dbut de sa longue route. Autrement dit, puisque lquipe qui sen occupe a pris la dcision de faire le mnage dans Joomla! 1.0, cest pour vous la garantie que Joomla! pourra rpondre lavenir tous vos besoins.
15.1 Le composant dexemple hallo 15.2 Un exemple complet : auto 15.3 Cration dun module 15.4 Conception dun plugin 15.5 Conclusion

223

15.1 Le composant dexemple hallo

Avant de plonger dans un composant trop complexe, plions-nous la tradition qui consiste choisir comme premier programme complet un programme qui se contente dafficher un petit message de bienvenue du style Bonjour tout le monde ! ( Hello world en anglais et Hallo Welt en allemand). Les composants se rpartissent en composants de partie publique Frontend et composants dadministration Backend. Les rsultats des premiers sont visibles par les visiteurs alors que les autres ne servent qu ladministration du site, notamment celle de la partie publique. Vous pouvez reconnatre le type du composant la manire dont ladresse de la page correspondante est crite : Ladresse URL suivante : http://localhost/joomla150/index.php?option=com_contact fait appel un composant de la partie publique appel com_contact. Si nous plongeons dans les dossiers de Joomla!, nous trouverons dans le sous-dossier [CheminJoomla]/components toute une srie de composants, parmi lesquels ce fameux com_contact (voir Figure 15.1).

Figure 15.1 Le sous-dossier des composants de Joomla! Pour chaque dossier de composants, est cr un certain nombre de sous-dossiers. Ils contiennent des fichiers qui incarnent les constituants de lapproche MVC.

15.1.1 Un lieu de rsidence pour lexemple

Tout composant possde son dossier unique. Voici comment Joomla! trouve son chemin pour atteindre le composant :
1. Joomla! analyse la valeur transmise dans ladresse URL : /index.php?option=com_hallo. 2. Il cherche dans le tableau des composants sil trouve un composant nomm com_hallo. 3. Il cherche ensuite un sous-dossier portant le nom com_hallo. 224

4. Dans ce sous-dossier il cherche un fichier appel hallo.php. 5. Il excute le contenu de ce fichier.

Pour que lexcution soit correcte, plusieurs fichiers sont ncessaires :

hallo.php : le point dentre fonctionnel du composant ; controller.php : le module de contrle ; views/hallo/view.html.php : la prsentation qui transmet les donnes au template ; views/hallo/tmpl/default.php : un modle par dfaut qui est remplac par les dfinitions du

modle en vigueur ou qui est utilis tel quel par dfaut ; hallo.xml : le fichier XML utilis par linstallateur pour connatre le paquetage du composant, o il doit tre install et qui en est responsable.

Certains dentre vous auront envie de tourner les talons pour se rfugier dans le douillet monde chaotique de Joomla! 1.0. Rsistez ! Venez dcouvrir ce nouveau monde ! Pour voir le rsultat, vous pouvez immdiatement installer le paquetage du composant com_hallo.zip via linstallateur de Joomla!. Pensez crer un lment de menu pour afficher le rsultat. Aprs linstallation, tous les fichiers sont dans les bons sous-dossiers et vous pouvez consulter le texte source tout en lisant la suite.

15.1.2 Le point de dpart (/component/com_hallo/hallo.php)

Cest ce fichier qui est excut dabord, lorsque vous fournissez ladresse URL suivante : http://localhost/joomla150/index.php?option=com_hello&view=hello ou plus simplement lorsque vous slectionnez llment de menu que vous y avez associ. Le rsultat nest pas dcoiffant. Vous voyez seulement apparatre le message de bienvenue dans la partie centrale de la fentre. tudions le code source de ce fichier (voir Listing 15.1).
<?php // Accs direct interdit defined(_JEXEC) or die(Restricted access); // Lecture du contrleur primaire require_once (JPATH_COMPONENT.DS.controller.php); // Dfinition dun autre contrleur $classname = HalloController.$controller; $controller = new $classname( ); // Chercher si des paramtres sont fournis (Requests) $controller->execute( JRequest::getVar(task)); // Redirection dans le contrleur $controller->redirect(); ?>

Listing 15.1 : /component/com_hallo/hallo.php Voyons cela en dtail.

defined(_JEXEC) or die(Restricted access);

La premire ligne est un test de scurit. Elle vrifie que lexcution des instructions a t demande par Joomla!. Si le script a t appel directement, il est interrompu immdiatement via la fonction die().
225

require_once (JPATH_COMPONENT.DS.controller.php);

Nous procdons ensuite lappel du premier contrleur. Il est dsign par le chemin daccs absolu JPATH_COMPONENT (components/com_hallo). Le suffixe DS est le caractre servant de sparateur dans les chemins daccs en vigueur sur le systme dexploitation concern. Vous savez que sous Windows, les sparateurs des chemins daccs sont des barres obliques inverses (\) alors que sous Unix ce sont des barres obliques directes (/). Joomla! gre automatiquement cette divergence.
$classname = HalloController.$controller; $controller = new $classname( );

Nous pouvons ensuite passer la cration en mmoire du premier contrleur qui devient ensuite utilisable. Lorsque nous navons quun contrleur, et cest souvent le cas dans la partie publique Frontend, les instructions suivantes suffisent :
$controller = new HalloController(); $controller->execute( JRequest::getVar(task));

Les instructions destines au composant scrivent sous la forme suivante : index.php?option=com_ hallo&task=Tche (save, edit, new, ...) Elles doivent tre intgres ladresse URL. La ligne de lexemple vrifie sil y a des donnes lire.
$controller->redirect();

Souvent, le contrleur doit retransmettre la demande une autre page, par exemple pour la sauvegarde des donnes. Cest la raison dtre de la dernire instruction.

15.1.3 Le contrleur (/component/com_hallo/controller.php)

Notre composant est volontairement simple. Son contrleur na rien dautre faire que laffichage des donnes. Nous navons besoin daucun modle de donnes et dune seule mthode daffichage display() (voir Listing 15.2).
<?php jimport(joomla.application.component.controller); class HalloController extends JController { function display(){ parent::display(); } } ?>

Listing 15.2 : /component/com_hallo/controller.php Nous dcidons du nom et de la prsentation de la vue dans lappel la mthode display(). Vous verrez le rsultat des variantes daffichage lorsque vous crerez par exemple un nouvel lment de menu. Notre composant simplifi nutilise que la prsentation standard.

226

Figure 15.2 lment de menu pour le composant com_hallo.

15.1.4 La vue (/component/com_hallo/views/hallo/views.html.php)

Et voici pour terminer notre vue standard (voir Listing 15.3).
<?php jimport( joomla.application.component.view); class HalloViewHallo extends JView{ function display($tpl = null){ $greeting = Salut tout le monde!"; $this->assignRef( greeting, $greeting ); parent::display($tpl); } } ?>

Listing 15.3 : /component/com_hallo/views/hallo/views.html.php La vue, cest--dire la prsentation, reoit en temps normal des donnes provenant du modle, puis les met en forme et les envoie en direction du template.
$greeting = Salut tout le monde!"; $this->assignRef( greeting, $greeting ); parent::display($tpl);

Dans notre premier exemple, le modle est inutilis puisque nous affectons une valeur littrale la variable nomme $greeting. Elle pourrait tout fait recevoir le rsultat dune requte complexe auprs dune base de donnes. La mthode assignRef() permet de transmettre le contenu de la variable et son nom au template. Enfin linstruction suivante passe le contrle au template :
parent::display($tpl);

15.1.5 Le template (/component/com_hallo/views/hallo/tmpl/ default.php)

Nous arrivons enfin notre template standard. Son nom est toujours default.php. Dans son format le plus simple, il se prsente comme ceci (voir Listing 15.4).
227

defined(_JEXEC) or die(Restricted access); ?> <h1><?php echo $this->greeting; ?></h1>

Listing 15.4 : /component/com_hallo/views/hallo/tmpl/default.php

15.1.6 Le rsultat visible

Si vous accdez votre site public et demandez laffichage de llment, le rsultat nest pas spectaculaire (voir Figure 15.3) :

Figure 15.3 Affichage du composant minimal.

15.1.7 Linstallation du composant

Il suffit de runir tous les fichiers de la structure de sous-dossiers dans un fichier paquetage compress au format zip. Ce fichier devient ensuite installable dans Joomla!. Les fichiers de la partie publique Frontend du composant /component/com_hallo doivent tre runis dans un sous-dossier nomm site. La partie administrative, cest--dire /com_hallo/administrator/component doit tre place dans un sous-dossier nomm admin. Il faut enfin ajouter un fichier XML qui dcrit les diffrents fichiers et qui doit porter le nom du composant, cest--dire ici hallo.xml (voir Listing 15.5).
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install SYSTEM "http://dev.joomla.org/xml/1.5/componentinstall.dtd"> <install type="component" version="1.5.0"> <name>Hallo</name> <creationDate>November</creationDate> <author>Personne</author> <authorEmail>moi@example.org</authorEmail> <authorUrl>http://www.example.org</authorUrl> <copyright>Copyright Info</copyright> <license>License Info</license> <version>Component Version String</version> <description>Description du composant ...</description> <!-- Site Main File Copy Section --> <files folder="site"> <filename>index.html</filename> <filename>hallo.php</filename> <filename>controller.php</filename> <filename>views/index.html</filename> <filename>views/hallo/index.html</filename> <filename>views/hallo/view.html.php</filename>

228

<filename>views/hallo/tmpl/index.html</filename> <filename>views/hallo/tmpl/default.php</filename> </files> <administration> <!-- Administration Menu Section --> <menu>Salut le monde !</menu> <!-- Administration Main File Copy Section --> <files folder="admin"> <!-- Site Main File Copy Section --> <filename>index.html</filename> <filename>admin.hallo.php</filename> </files> </administration> </install>

Listing 15.5 : hallo.xml Soyez bien attentif lorsque vous crez votre fichier Zip. La fi gure suivante montre o se placer pour crer le Zip sans produire de premier niveau inutile. Le fichier doit porter le nom com_hallo.zip (voir Figure 15.4) :

Figure 15.4 Cration du paquetage dinstallation du composant. Vous pouvez maintenant procder linstallation depuis Joomla!.

15.1.8 Conclusion
Le composant minimal que nous venons de crer est facile maintenir, enrichir et simple analyser. Au premier regard, les nombreux petits fichiers peuvent rendre perplexe, mais ce nest quune impression vite estompe. En effet, chaque fichier contient relativement peu de code source, ce qui permet de bien garder le contrle des choses. Cest exactement cet effet que veut promouvoir le concept MVC. Si vous avez besoin de produire un template plus sophistiqu, il suffit de remplacer par le code source de votre template les fichiers de la partie Vue (revoyez le Chapitre 13 la section 13.3.8).

15.2 Un exemple complet : auto

Faisons maintenant un grand pas vers plus de complexit. Nous voulons disposer dune liste de vhicules doccasion pouvant tre mise jour depuis la partie administrative. Il nous faut concevoir les lments suivants :

un nouveau composant public pour le Frontend ; un composant d'administration pour le Backend ; une table de donnes ddie ; 229

(facultatif) un module pour afficher les entres sur le site Web ; (facultatif) un module de recherche pour tendre la recherche de Joomla! vos nouveaux contenus.

Pour vous faire une ide de lobjectif que nous dsirons atteindre, la fi gure suivante prsente la liste sur le site. Vous pouvez immdiatement voir le rsultat en installant le composant nomm com_auto.zip. Vous devez voir apparatre sur le site une liste de vhicules avec une vue miniature. Si vous cliquez sur une miniature, une fentre apparat avec une vue dtaille du vhicule (voir Figure 15.5). Notre liste concerne des types de vhicules, mais vous pouvez grer des donnes trs diffrentes. En gnral, une telle liste convient aux attentes des visiteurs. Nous ne les autorisons pas modifier les donnes. Ladministrateur doit en revanche pouvoir ajouter, supprimer et modifier des enregistrements. Cette gestion des donnes comprend les oprations suivantes :

cration de nouveaux enregistrements ; modification des enregistrements existants ; suppressions des enregistrements existants.

Pour viter de rendre lexemple trop complexe, nous allons nous limiter quatre champs. Deux champs contiendront du texte (pour le type de vhicule et le constructeur) et deux autres champs contiendront les rfrences des fichiers des photos (petit et grand format). Vous comprendrez vite le principe de la programmation dun composant dans Joomla! et vous aurez sans doute envie de rutiliser lexemple avec une structure de donnes plus complexe. Le composant doit sintgrer la structure dadministration existante. Linterface de gestion doit offrir un aspect comme celui de la Figure 15.6. Il faut pouvoir raliser les fonctions qui sont proposes par les boutons standard du haut de la fentre. Vous devez prvoir une barre doutils pour laffichage sous forme de liste et une autre pour le mode dition dun enregistrement. Vous devez publier et dpublier les enregistrements et profiter de la fonction de slection multiple avec les cases cocher gauche des lignes dans la liste.

Figure 15.5 Exemple de composant spcifique sur le site Web.

230

Figure 15.6 Affichage de linterface de gestion dans ladministration de Joomla! Il faut galement concevoir un formulaire pour le mode Modifi cation et un autre pour le mode Cration denregistrement (voir Figure 15.7). Nous dcidons dappeler ce composant com_auto. Pensez installer le composant pour mieux suivre les explications. Vous pourrez ventuellement dcompresser le paquetage dans un dossier de travail pour le modifier, ou le modifier directement dans son dossier dimplantation. Aprs chaque retouche, vous pouvez juger de son impact (pour parfois constater que cela ne fonctionne plus). Un exemple trop complexe devient vite incomprhensible. Voil pourquoi jai cherch maintenir les fichiers courts, en ne conservant que lessentiel.

Figure 15.7 Exemple denregistrement en mode dition dans ladministration de Joomla!

15.2.1 La table de donnes MySQL

Le composant se base sur une table MySQL dans laquelle sont stocks les enregistrements des vhicules. Cette table est cre automatiquement pendant linstallation. Les instructions SQL correspondantes sont stockes aprs linstallation dans le fichier nomm /administrator/com_auto/install.sql. Il existe par ailleurs un fichier uninstall.sql pour supprimer la table lorsque vous dsinstallez le composant. Vous pouvez visualiser cette table nomme jos_auto en naviguant sur le site local jusqu la racine puis dans ladministration PHP par ladresse http://localhost/phpmyadmin. Vous pouvez accder la table jos_auto (voir Figure 15.8). Le prfixe jos_ a t dfini pendant linstallation de Joomla! dans la configuration. Le champ nomm published contient soit la valeur 1 (lenregistrement est publi), soit la valeur 0 (non publi). Pour les deux photos, nous prvoyons un chemin daccs que vous devrez sans doute adapter. En vous servant du libell, vous devinerez o crer un sous-rpertoire portant le nom du composant et contenant les images fournies sur le CD-ROM daccompagnement.

15.2.2 La partie publique Frontend

Commenons par la liste des vhicules visibles par les visiteurs. Comme avec le premier composant, il nous faut plusieurs fichiers :
/components/com_auto/auto.php ; /components/com_auto/controller.php ;

231

/components/com_auto/views/auto/view.html.php ; /components/com_auto/views/auto/tmpl/default.php ; /components/com_auto/models/auto.php.

Figure 15.8 La table spcifique jos_auto dans MySQL. Cette fois-ci, nous utilisons un modle, ce qui est normal puisque nous allons grer des donnes provenant dune base de donnes.

Le point dentre (/components/com_auto/auto.php)

Il est normal davoir un point dentre. Il correspond au fichier /components/com_auto/auto.php. Ce fichier centralise les lments puis dlgue les diffrentes oprations (voir Listing 15.6).
<?php // Accs direct interdit defined(_JEXEC) or die(Restricted access); // Chargement du contrleur primaire de Joomla! require_once (JPATH_COMPONENT.DS.controller.php); // Cration dun contrleur $controller = new AutoController(); // Lecture de la tche raliser $controller->execute(JRequest::getCmd(task)); // Redirection depuis le contrleur $controller->redirect(); ?>

Listing 15.6 : /components/com_auto/auto.php Le code source est trs proche de celui du composant com_hallo (vous voyez que le recyclage fonctionne !) (voir Listing 15.7).

Le contrleur (/components/com_auto/controller.php)
Nous retrouvons les mmes lignes que dans le composant com_hallo :
<?php

232

defined(_JEXEC) or die(); jimport(joomla.application.component.controller); class AutoController extends JController{ function display(){ parent::display(); } }

Listing 15.7 : /components/com_auto/controller.php

La vue (/components/com_auto/views/auto/view.html.php)
Cest ici que nous divergeons du prcdant exemple. Il faut dfinir comment rcuprer les donnes pour peupler notre liste (voir Listing 15.8).
<?php jimport( joomla.application.component.view); class AutoViewAuto extends JView{ function display($tpl = null){ $model = &$this->getModel(); $rows = $model->getAutoList(); $this->assignRef(rows , $rows); parent::display($tpl); } } ?>

Listing 15.8 : /components/com_auto/views/auto/view.html.php

$model = &$this->getModel();

Nous crons une instance du modle, cest--dire un objet qui est stock dans la variable appele $model :
$rows = $model->getAutoList();

La mthode getAutoList() est appele dans lobjet et renvoie en rsultat un tableau de type Array appel $rows (il contient les lignes ou enregistrements) :
$this->assignRef(rows, $rows); parent::display($tpl);

Les donnes qui en rsultent sont rcupres puis transmises au template.

Le template (/components/com_auto/views/auto/tmpl/default.php)
Dans le template standard, les diffrentes lignes contenues dans le tableau $rows sont transmises une une dans une boucle for (voir Listing 15.9).
<?php defined(_JEXEC) or die(Restricted access); ?> <script type="text/JavaScript"> function FensterOeffnen (Adresse) { MeinFenster = window.open(Adresse, "Auto", width=400,height=300,left=100,top=200"); MeinFenster.focus();

233

} </script> <h1><?php echo "Liste de nos voitures"; ?></h1> <ul> <? // Lecture des enregistrements vers un tableau Array foreach ($this->rows as $row) { ?> <li><?php echo $row->type; ?> <small><em>(<?php echo $row>constructeur; ?>) </em></small><br> <a href="<?php echo $row->photo_grande; ?>" onclick="FensterOeffnen (this.href); return false"><img src=<?php echo $row->photo_mini; ?>> </a> </li> <?php } ?> </ul> foreach ($this->rows as $row) { ?> <li> <?php echo $row->type; ?> <?php echo $row->constructeur; ?> <?php echo $row->photo_mini; ?> </li> <?php } ?>

Listing 15.9 : /components/com_auto/views/auto/tmpl/default.php Cest la seule partie spcifique dans ce template. Les autres lignes concernent le formatage en HTML ou le code JavaScript pour ouvrir la fentre flottante. Vous pouvez enrichir ces portions du code source avec des effets visuels. Servez-vous doutils appropris comme Dreamweaver ou MooTools. Cette partie du formatage est devenue autonome dans Joomla!1.5, hormis la variable $rows.

Le Modle (/components/com_auto/models/auto.php)
Nous allions oublier lessentiel, le modle ! Il faut expliquer comment accder aux donnes (voir Listing 15.10).
<?php defined(_JEXEC) or die(); jimport(joomla.application.component.model); class AutoModelAuto extends JModel { function _getAutoQuery( &$options ){ $db = JFactory::getDBO(); $id = @$options[id]; $select = a.*; $from = #__auto AS a; $wheres[] = a.published = 1; $query = "SELECT " . $select . "\n FROM " . $from . "\n WHERE " . implode( "\n AND ", $wheres ); return $query; } function getAutoList( $options=array() ){ $query = $this->_getAutoQuery( $options ); $result = $this->_getList( $query ); return @$result; } } ?>

Listing 15.10 : /components/com_auto/models/auto.php

234

Deux mthodes sont essentielles dans ce modle. Tout dabord, la mthode _getAutoQuery() qui se charge daccder aux donnes. Cest elle qui contient linstruction SQL. Lautre mthode se nomme getAutolist(). Elle contrle laccs et rcupre le rsultat. Vous vous souvenez peut-tre encore du contenu du fichier views.html.php. Il contenait la ligne suivante :
$rows = $model->getAutoList();

Cest de cette manire que la mthode accde lobjet reprsentant le modle puis rcupre les donnes rsultantes dans $rows. Dans la classe AutoModelAuto, ce renvoi des donnes est ralis par la mthode getAutoList().

Conclusion
Nous sommes entrs dans une poque o il est normal de plonger dans le langage PHP et la programmation oriente objet. Pourtant, mme si vous navez aucune connaissance des concepts de classe, de mthode et dhritage, vous pourrez parvenir crer des projets (mais vous serez quelque peu perdu). En vous laissant guider par lapproche MVC de Joomla!, vous comprenez concrtement comment ces diffrents concepts sarticulent. Si vous comparez par exemple le premier composant com_hallo la partie de com_auto que nous venons de voir, force est de constater que 80 % du code ne change pas (sauf le modle bien sr).

15.2.3 La partie administration de com_auto

Laffichage des donnes sur le site Web sest avre assez simple, mais leur gestion sera un peu plus complexe. Ici, nous devrons prsenter les donnes aux yeux de ladministrateur, pour quil puisse les modifier, crer de nouveaux enregistrements, en supprimant et dcider lesquels doivent tre visibles, donc publis. Il faut prvoir beaucoup plus de fonctions dinteractivit.

La table des composants

Dans Joomla!, tous les lments des menus des composants sont dfinis sous forme denregistrements dans une table de la base de donnes qui porte le nom [prfixe]components. Cest galement cet endroit que vous trouverez les lments de menu de tous les composants de la partie administrative. Il nest donc pas tonnant que nous y trouvions le composant com_auto (voir Figure 15.9). Vous remarquerez quil y a galement un objet graphique dans cette table. Cest celui qui doit apparatre gauche du menu (js/ThemeOffice/component.png). Tous les graphiques des menus se trouvent dans le sous-dossier [CheminJoomla]/includes/js/ThemeOffice (voir Figure 15.10).

235

Figure 15.9 La table components dans phpMyAdmin.

Figure 15.10 Le petit graphique gauche de llment de menu. Pour crer la partie administrative du composant, il faut encore plus de fichiers. Voici tous les fichiers en langage PHP du sous-dossier [CheminJoomla]/administration/components/com_auto/ :
/administration/components/admin.auto.php ; /administration/components/controller.php ; /administration/components/controllers/auto.php ; /administration/components/com_auto/views/autos/view.html.php ; /administration/components/com_auto/views/autos/tmpl/default.php ; /administration/components/com_auto/views/auto/view.html.php ; /administration/components/com_auto/views/auto/tmpl/form.php ; /administration/components/com_auto/tables/auto.php ; /administration/components/com_auto/install.sql ; /administration/components/com_auto/uninstall.sql.

236

Le point dentre (/administration/components/com_auto/admin.auto.php)

La partie dadministration prsente elle aussi un point dentre fonctionnel (voir Listing 15.11).
<?php defined(_JEXEC) or die(Restricted access); $controller = JRequest::getVar(controller, auto); require_once(JPATH_ADMINISTRATOR.DS.controllers.DS.$controller..php; $classname = AutosController.$controller; $controller = new $classname( ); $controller->execute( JRequest::getVar(task)); $controller->redirect(); ?>

Listing 15.11 : /administration/components/com_auto/admin.auto.php Maintenant que nous sommes devenus des spcialistes, tout cela ne nous pose aucun problme de comprhension. La seule nouveaut est ventuellement linstruction conditionnelle if qui permet de chercher dautres contrleurs aprs le contrleur primaire.

Le Contrleur (/administration/components/com_auto/controller.php)
Le contrleur primaire ne nous apporte rien de neuf (voir Listing 15.12).
<?php jimport(joomla.application.component.controller); class AutosController extends JController{ function display(){ parent::display(); } }?>

Listing 15.12 : /administration/components/com_auto/controller.php Un autre contrleur (/administration/components/com_auto/controllers/auto.php) Les choses deviennent plus spcifiques maintenant. Nous devons dfinir un autre contrleur que voici (voir Listing 15.13) :
<?php defined(_JEXEC) or die(); class AutosControllerAuto extends AutosController{ function __construct(){ parent::__construct(); $this->registerTask( add, edit ); $this->registerTask( unpublish, publish); } function edit() { JRequest::setVar( view, auto ); JRequest::setVar( layout, form ); JRequest::setVar(hidemainmenu, 1); parent::display(); } function save() { $model = $this->getModel(auto); if ($model->store($post)) { $msg = JText::_( Auto sauvegarde OK ! ); } else { $msg = JText::_( Erreur de sauvegarde de Auto ); }

237

$link = index.php?option=com_auto; $this->setRedirect($link, $msg); } function remove(){ $model = $this->getModel(auto); if(!$model->delete()) { $msg = JText::_( Erreur: Une ou plusieurs autos non supprimees ); } else { $msg = JText::_( Auto(s) supprimees ); } $this->setRedirect( index.php?option=com_auto, $msg ); } function publish(){ $this->setRedirect( index.php?option=com_auto ); $db =& JFactory::getDBO(); $user =& JFactory::getUser(); $cid = JRequest::getVar( cid, array(), post, array ); $task = JRequest::getCmd( task ); $publish = ($task == publish); $n = count( $cid ); if (empty( $cid )) { return JError::raiseWarning( 500, JText::_( Pas de selection ) ); } JArrayHelper::toInteger( $cid ); $cids = implode( ,, $cid ); $query = UPDATE #__auto . SET published = . (int) $publish . WHERE id IN ( . $cids . ) ; $db->setQuery( $query ); if (!$db->query()) { return JError::raiseWarning( 500, $row->getError() ); } $this->setMessage( JText::sprintf( $publish ? Publies : Non publis, $n ) ); } function cancel(){ $msg = JText::_( Operation annulee ); $this->setRedirect( index.php?option=com_auto, $msg ); } } ?>

Listing 15.13 : /administration/components/com_auto/controllers/auto.php Ce contrleur dfinit toute une srie de mthodes : edit, save, remove, publish et cancel. Le modle est instanci dans ces mthodes. Des appels sont effectus dans le modle, par exemple la mthode de stockage store. Les deux classes statiques nommes JText et JError permettent de renseigner lutilisateur sur la russite ou non de lopration (voir Figure 15.11).

Figure 15.11 Affichage dun message par la classe statique JText.

238

La vue Liste (/administration/components/com_auto/views/autos/view.html.php)

Cette dfinition de vue est un peu plus complexe car il faut insrer une barre doutils spcifique (voir Listing 15.14).
<?php defined(_JEXEC) or die(); jimport( joomla.application.component.view ); class AutosViewAutos extends JView{ function display($tpl = null){ JToolBarHelper::title( JText::_( Auto Manager ), generic.png ); JToolBarHelper::publishList(); JToolBarHelper::unpublishList(); JToolBarHelper::deleteList(); JToolBarHelper::editListX(); JToolBarHelper::addNewX(); $items = & $this->get( Data); $this->assignRef(items, $items); parent::display($tpl); } }

Listing 15.14 : /administration/components/com_auto/views/autos/view.html.php

Figure 15.12 Aperu de la barre doutils dans la liste des autos. La classe nomme JToolbarHelper se charge de laffichage (voir Figure 15.12). La liste du template (/administration/components/com_auto/views/autos/tmpl/default.php) Il faut bien sr assurer une mise en forme de la liste. Nous procdons donc la prparation des donnes du template standard (voir Listing 15.15).
<?php defined(_JEXEC) or die(Restricted access); ?> <form action="index.php" method="post" name="adminForm"> <div id="editcell"> <table class="adminlist"><thead><tr> <th width="5"><?php echo JText::_( NUM ); ?></th> <th width="20"> <input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count( $this->items ); ?>);" /></th> <th class="title"><?php echo JHTML::_(grid.sort, Auto, a.text, @$lists[order_Dir], @$this->lists[order] ); ?></th> <th width="5%" align="center"><?php echo JHTML::_(grid.sort, Published, a.published, @$this->lists[order_Dir], @$this->lists[order] ); ?> </th> <th width="1%" nowrap="nowrap"><?php echo JHTML::_(grid.sort, ID, a.id, @$this->lists[order_Dir], @$this->lists[order] ); ?></th> </tr></thead> <?php $k = 0; for ($i=0, $n=count( $this->items ); $i < $n; $i++){ $row = &$this->items[$i]; $published = JHTML::_(grid.published, $row, $i ); $link = JRoute::_( index.php?option=com_auto&controller=auto&task= edit&cid[]=.$row->id ); ?> <tr class="<?php echo "row$k"; ?>">

239

<td></td> <td></td> <td><a href="<?php echo $link; ?>"><?php echo $row->type; ?></a></td> <td align="center"><?php echo $published;?></td> <td align="center"><?php echo $row->id; ?></td> </tr> <?php $k = 1 - $k; } ?> </table></div> <input type="hidden" <input type="hidden" <input type="hidden" <input type="hidden" </form>

name="option" value="com_auto" /> name="task" value="" /> name="boxchecked" value="0" /> name="controller" value="auto" />

Listing 15.15 : /administration/components/com_auto/views/autos/tmpl/default.php Le template est constitu dun code HTML assez simple dans un formulaire. Cest ce code qui se charge de laffichage de la table (voir Figure 15.13).

Figure 15.13 La table du composant auto.

La vue formulaire (/administration/components/com_auto/views/auto/view.html.php)

Il faut galement prvoir un affichage sous forme de fiche pour chaque auto (un seul enregistrement). Observez bien le nom du sous-dossier. Nous sommes prsent dans le sous-dossier auto, alors que la liste se trouve dans le sous-dossier autos au pluriel (Listing 15.16).
<?php defined(_JEXEC) or die(); jimport( joomla.application.component.view ); class AutosViewAuto extends JView{ function display($tpl = null){ $auto =& $this->get(Data); $isNew = ($auto->id < 1); $text = $isNew ? JText::_( New ) : JText::_( Edit ); JToolBarHelper::title( JText::_( Auto ).: <small>[ . $text. ] </small> ); JToolBarHelper::save(); if ($isNew) { JToolBarHelper::cancel(); } else { JToolBarHelper::cancel( cancel, Close ); } $this->assignRef(auto, $auto); parent::display($tpl); } }

Listing 15.16 : /administration/components/com_auto/views/auto/view.html.php

240

Nous procdons la construction de la barre doutils pour la vue fiche (voir Figure 15.14). Dans cet affichage, nous pouvons insrer des donnes et modifier un enregistrement existant. La variable nomme $isNew permet de dcider entre les deux contextes.

Figure 15.14 La barre doutils du formulaire du mode fiche.

Formulaire du template (/administration/components/com_auto/views/auto/tmpl/form.php)

Ce template standard permet de construire le formulaire de la vue fiche individuelle (voir Listing 15.17).
<?php defined(_JEXEC) or die(Restricted access); ?> <script language="JavaScript" type="text/JavaScript"> function submitbutton(pressbutton) { var form = document.adminForm; if (pressbutton == cancel) { submitform( pressbutton ); return; } // do field validation if (form.text.value == "") { alert( "<?php echo JText::_( Texte obligatoire, true ); ?>" ); } else { submitform( pressbutton ); } } </script> <form action="index.php" method="post" name="adminForm" id="adminForm"> <div> <fieldset class="adminform"> <legend><?php echo JText::_( Details ); ?></legend> <table class="admintable"> <tr> <td width="110" class="key"> <label for="title"> <?php echo JText::_( Type ); ?>: </label> </td> <td> <input class="inputbox" type="text" name="type" id="type" size="60" value="<?php echo $this->auto->type; ?>" /> </td> </tr> <tr> <td width="110" class="key"> <label for="alias"> <?php echo JText::_( Constructeur ); ?>: </label> </td> <td> <input class="inputbox" type="text" name="constructeur" id="constructeur" size="60" value="<?php echo $this->auto-> constructeur; ?>" /> </td> </tr> <tr> <td class="key">

241

<label for="lag"> <?php echo JText::_( Photo mini (120px) ); ?>: </label> </td> <td> <input class="inputbox" type="text" name="photo_mini" id="photo_ mini" size="60" value="<?php echo $this->auto->photo_mini; ?>" /> <?php echo JText::_( (Veuillez indiquer un lien avec http:// vers un fichier de photo) ); ?> </td> </tr> <tr> <td colspan="2"> <?php if ($this->auto->photo_mini){?> <img src="<?php echo $this->auto->photo_mini; ?>"> <?php } ?> </td> </tr> <tr> <td class="key"> <label for="lag"> <?php echo JText::_( Photo grande (350px) ); ?>: </label> </td> <td> <input class="inputbox" type="text" name="photo_grande" id="photo_ grande" size="60" value="<?php echo $this->auto->photo_grande; ?>" /> <?php echo JText::_( (Veuillez indiquer un lien avec http:// vers un fichier de photo) ); ?> </td> </tr> <tr> <td colspan="2"> <?php if ($this->auto->photo_grande){?> <img src="<?php echo $this->auto->photo_grande; ?>"> <?php } ?> </td> </tr> <tr> <td width="120" class="key"> <?php echo JText::_( Published ); ?>: </td> <td> <?php echo JHTML::_( select.booleanlist, published, class= "inputbox", $this->auto->published ); ?> </td> </tr> </table> </fieldset> </div> <div class="clr"></div> <div class="clr"></div> <input type="hidden" name="option" value="com_auto" /> <input type="hidden" name="id" value="<?php echo $this->auto->id; ?>" /> <input type="hidden" name="task" value="" /> <input type="hidden" name="controller" value="auto" /> </form>

Listing 15.17 : /administration/components/com_auto/views/auto/tmpl/form.php Nous trouvons nouveau du code HTML pur ainsi que des variables PHP ($this->auto->id) et des appels de classes statiques (JText). La Figure 15.15 montre le rsultat affich.

242

Figure 15.15 Formulaire de modification dun enregistrement de la table.

La table auto (/administration/components/com_auto/tables/auto.php)

Il nous reste dfinir la classe de la table pour que le modle sache quelles donnes il doit manipuler. La classe nomme JTable simplifi e tous les accs aux donnes. Cest une classe abstraite (autrement dit une interface). Les classes qui en drivent peuvent exploiter la structure dont elles hritent via leurs mthodes. Le nom de la table et la cl primaire (lindex) sont dfinis au niveau du constructeur de la classe (voir Listing 15.18).
<?php // Accs direct interdit defined(_JEXEC) or die(Restricted access); class TableAuto extends JTable { /** @var int Primary key */ var $id = 0; /** @var string */ var $type = ; /** @var string */ var $constructeur = ; /** @var string */ var $photo_mini = ; /** @var string */ var $photo_grande = ; /** @var string */ var $published = 0; /** @var int */ /** * Constructor * * @param object Database connector object */ function TableAuto(& $db) { parent::__construct(#__auto, id, $db); } } ?>

Listing 15.18 : /administration/components/com_auto/tables/auto.php

243

Installation (/administration/components/com_auto/install.sql) et dsinstallation (idem/uninstall.sql)

Les deux procdures dinstallation et de dsinstallation supposent pour Joomla! de savoir crer la table du composant et la supprimer. Deux fichiers contenant des instructions SQL sont conus cet effet (voir Listings 15.19 et 15.20).
DROP TABLE IF EXISTS `#__auto`; CREATE TABLE `#__auto` ( `id` int(11) NOT NULL auto_increment, `type` text character set utf8 NOT NULL, `constructeur` varchar(100) character set utf8 NOT NULL, `photo_grande` varchar(200) character set utf8 NOT NULL, `photo_mini` varchar(200) character set utf8 NOT NULL, `published` tinyint(1) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=5 ; INSERT INTO `#__auto` (`id`, `type`, `constructeur`, `photo_grande`, `photo_mini`, `published`) VALUES (2, Smart fortwo, Smart, http://localhost/joomla150/images/stories/ com_auto/smart_grande.jpg, http://localhost/joomla150/images/stories/ com_auto/smart_mini.jpg, 1), (4, Roadster, Smart, http://localhost/joomla150/images/stories/com_ auto/roadster_grande.jpg, http://localhost/joomla150/images/stories/ com_auto/roadster_mini.jpg, 1); Listing 15.20 : administration/ components/com_auto/uninstall.sql DROP TABLE IF EXISTS `#__auto`;

Listing 15.19 : /administration/components/com_auto/install.sql

15.2.4 Test du composant

Aprs avoir tudi tous ces fichiers sources, vous pouvez tester le composant et vrifier que vous pouvez grer entirement la table de donnes par ladministration Joomla!. Essayez de crer des enregistrements, den effacer, den modifier et den publier. Vous pouvez agir sur tout un groupe en slectionnant plusieurs enregistrements par leur case cocher.

15.2.5 Cration dun paquetage dinstallation

Pour concevoir un paquetage exploitable par linstallateur, il nous reste crire le fichier XML contenant les mtadonnes.

administrator\components\com_autoauto.xml
Cest dans ce fichier que vous dcrivez les lments qui constituent le nouveau composant. Linstallateur va se servir de ces descriptions. Le fichier doit contenir tous les noms de fichiers enchsss dans des balises XML. Cest grce cela que linstallateur de Joomla! va savoir crer les sousdossiers, y copier les fichiers et enfin crer la table de donnes (voir Listing 15.21).
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install SYSTEM "http://dev.joomla.org/xml/1.5/component-install.dtd"> <install type="component" version="1.5.0"> <name>Auto</name> <creationDate>November 2007</creationDate> <author>Hagen Graf</author> <authorEmail>hagen.graf@gmail.com</authorEmail>

244

<authorUrl>http://www.cocoate.com</authorUrl> <copyright>All rights reserved</copyright> <license>GNU/GPL</license> <version>Component Version String</version> <description>Description du composant ... </description> <files folder="site"> <filename>index.html</filename> <filename>auto.php</filename> <filename>controller.php</filename> <filename>views/index.html</filename> <filename>views/auto/index.html</filename> <filename>views/auto/view.html.php</filename> <filename>views/auto/tmpl/index.html</filename> <filename>views/auto/tmpl/default.php</filename> <filename>models/auto.php</filename> </files> <install> <sql> <file charset="utf8" driver="mysql">install.sql</file> </sql> </install> <uninstall> <sql> <file charset="utf8" driver="mysql">uninstall.sql</file> </sql> </uninstall> <administration> <menu>Livre Joomla! 1.5 : Auto</menu> <files folder="admin"> <filename>index.html</filename> <filename>admin.auto.php</filename> <filename>controller.php</filename> <filename>controllers/auto.php</filename> <filename>controllers/index.html</filename> <filename>models/auto.php</filename> <filename>models/autos.php</filename> <filename>models/index.html</filename> <filename>views/autos/view.html.php</filename> <filename>views/autos/index.html</filename> <filename>views/autos/tmpl/default.php</filename> <filename>views/autos/tmpl/index.html</filename> <filename>views/auto/view.html.php</filename> <filename>views/auto/tmpl/form.php</filename> <filename>views/auto/index.html</filename> <filename>views/auto/tmpl/index.html</filename> <filename>tables/auto.php</filename> <filename>tables/index.html</filename> <filename>install.sql</filename> <filename>uninstall.sql</filename> </files> </administration> </install>

Listing 15.21 : administrator\components\com_autoauto.xml Vous savez dj crer le paquetage en rassemblant tous les fichiers dans un fichier .zip qui porte le nom du composant. Dans notre cas le paquetage sappelle com_auto.zip. Les fichiers de la partie Frontend sont dans le sous-dossier de premier niveau site et ceux de ladministration dans le sousdossier admin (voir Figure 15.16).

245

Figure 15.16 Les fichiers du composant com_auto prt tre empaquets. Vous pouvez maintenant procder linstallation du fichier .zip dans Joomla! et le diffuser dautres utilisateurs. Pensez toujours dsinstaller la version prcdente du composant avant de le rinstaller. Vous savez comment faire : EXTENSIONS > INSTALLER/DSINSTALLER, slection du composant et cliquez sur le bouton DSINSTALLER.

15.3 Cration dun module

Joomla! Kapitel 15 Module mod_auto.php mod_auto.xml

Un module est beaucoup plus simple quun composant, tout dabord parce que les modules nont en gnral pas dinterface dadministration, mais seulement quelques paramtres. Le but du module est de traiter des donnes pour produire une nouvelle prsentation sur le site public. Le module coopre avec le template. En gnral, les modules viennent enrichir les fonctions dun composant existant et lon peut donc supposer que les tables de donnes avec leur contenu sont dj disponibles. Pour concevoir un module, il faut deux fichiers : un pour la logique de traitement et laffichage, puis un fichier XML pour linstallateur de Joomla!. Les deux fichiers doivent avoir un nom commenant par le prfixe mod_.

15.3.1 Le code source du module

tudions le code source des diffrents fichiers. Nous utilisons ici aussi un template spcifique. Il y a quatre fichiers considrer :
mod_auto.php ; helper.php ; tmpl/default.php ; mod_auto.xml.

Dcouvons-les tour tour. Le point dentre (mod_auto.php) Le fichier intitul mod_auto.php sert de point de contrle du module (voir Listing 15.22).
<?php defined(_JEXEC) or die(Restricted access); require_once (dirname(__FILE__).DS.helper.php);

246

$auto = modAutoHelper::getAuto($params); require(JModuleHelper::getLayoutPath(mod_auto)); ?>

Listing 15.22 : mod_auto.php Vous remarquez que nous ne dfinissons aucun contrleur primaire, mais en revanche une classe de soutien Helper.

La classe Helper (helper.php)

Cette classe de soutien combine le contrleur au modle (voir Listing 15.23). (En gras est prsente la seule rfrence au nom dun champ de la table de donnes.)
<?php defined( _JEXEC ) or die( Restricted access ); class modAutoHelper { function getAuto(&$params){ global $mainframe; $db =& JFactory::getDBO(); $query = "SELECT *" . "\n FROM #__auto" . "\n WHERE published = 1" . "\n LIMIT 0,5"; $db->setQuery( $query ); $rows = $db->loadObjectList();; $auto = "<ul>\n"; if ($rows) { foreach ($rows as $row) { $auto .= " <li>". $row->type . "</li>\n"; } } $auto .= "</ul>\n"; return $auto; } } ?>

Listing 15.23 : helper.php Dans cette classe, nous trouvons tout dabord une opration dextraction des donnes puis leur prparation dans une boucle for.

Le template du module (tmpl/default.php)

Ce code source trs simple ne fait quafficher le contenu de la variable $auto qui appartient la classe Helper. Vous pourriez tout fait faire excuter la boucle itrative for cet endroit afin de mieux contrler le code HTML gnr en sortie. Cela permettrait un concepteur de template de redfinir le code source (voir Listing 15.24).
defined( _JEXEC ) or die( Restricted access ); ?> <?php echo $auto; ?>

Listing 15.24 : tmpl/default.php

247

mod_auto.xml
Enfin, pour installer ce module, il faut crer le traditionnel fichier XML de description (voir Listing 15.25).
<?xml version="1.0" encoding="utf-8"?> <install type="module" version="1.5.0"> <name>Auto</name> <author>Hagen Graf</author> <creationDate>November 2007</creationDate> <copyright>(C) 2007 cocoate.com All rights reserved.</copyright> <license>GNU/GPL</license> <authorEmail>hagen.graf@gmail.com</authorEmail> <authorUrl>www.cocoate.com</authorUrl> <version>0.1</version> <description>Module Auto</description> <files> <filename module="mod_auto">mod_auto.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <filename>tmpl/default.php</filename> <filename>tmpl/index.html</filename> </files> </install>

Listing 15.25 : mod_auto.xml

15.3.2 Installation
Runissez tous les fichiers dans un seul sous-dossier et produisez un paquetage au format .zip en lui donnant le nom mod_auto.zip. Vous pouvez ensuite installer le module depuis Joomla! et le diffuser. Si ce nest pas votre premier essai, pensez dsinstaller la version antrieure du module auparavant. Noubliez pas dactiver le module par la commande EXTENSIONS > GESTION DES MODULES.

15.3.3 Aspect sur le site Web

Vous devriez ensuite apprcier laffichage de votre nouveau module la position choisie. Il prsente les donnes trouves dans la table de donnes jos_auto (voir Figure 15.17).

Figure 15.17 Affichage du module mod_auto sur le site Web.

248

15.4 Conception dun plugin

Terminons ce tour dhorizon en permettant la fonction de recherche standard de Joomla! de scruter les donnes gres par notre nouveau composant. cet effet, nous devons concevoir un plugin du type search. Au niveau des plugins, il ny a pas un sous-dossier pour chacun deux, mais seulement un sousdossier par type de plugin. Nous allons donc travailler dans le sous-dossier [CheminJoomla]/plugins/search puisque cest un plugin de recherche. Il faut prvoir au minimum un fichier PHP pour la logique de recherche (voir le Listing 15.26) et le traditionnel fichier XML de description pour linstallateur. Les noms des fichiers doivent driver du nom du composant qui est ainsi enrichi. Les deux fichiers sappelleront donc auto.php et auto.xml. (Pour crire un plugin de type User, vous dcidez des noms des fichiers par rapport lobjectif du plugin.) Dans notre exemple, nous faisons directement rfrence au composant com_auto. Comme les autres extensions, les plugins doivent tre inscrits dans une table de gestion, qui sappelle dans ce cas jos_plugins. Linstallateur se charge dajouter un enregistrement dans cette table. Notre fonction de recherche est assez complte et pourrait tre rendue encore plus souple en prvoyant des paramtres. Le code source qui suit donne une ide des possibilits. Notre composant ne conserve pas trace de la date de cration des enregistrements ni du nombre daccs chacun deux (nous navons pas prvu de page des dtails par voiture). De nombreuses possibilits de recherche restent donc inutilises ici.
<?php defined( _JEXEC ) or die( Restricted access ); $mainframe->registerEvent( onSearch, plgSearchAuto ); $mainframe->registerEvent( onSearchAreas, plgSearchAutoAreas ); function &plgSearchAutoAreas() { static $areas = array(auto => Auto); return $areas; } function plgSearchAuto( $text, $phrase=, $ordering=, $areas=null ){ $db =& JFactory::getDBO(); $user =& JFactory::getUser(); if (is_array( $areas )) { if (!array_intersect( $areas, array_keys( plgSearchAutoAreas() ) )) { return array(); } } $plugin =& JPluginHelper::getPlugin(search, auto); $pluginParams = new JParameter( $plugin->params ); $limit = $pluginParams->def( search_limit, 50 ); $text = trim( $text ); if ($text == ) { return array(); } $section = JText::_( Auto ); $wheres = array(); switch ($phrase){ case exact: $text = $db->getEscaped($text); $wheres2 = array(); $wheres2[]= "LOWER(a.type) LIKE %$text%"; $wheres2[]= "LOWER(a.constructeur) LIKE %$text%"; $where = ( . implode( ) OR (, $wheres2 ) . ); break; case all: case any: default: $words = explode( , $text ); $wheres = array(); foreach ($words as $word) {

249

$word = $db->getEscaped($word); $wheres2 = array(); $wheres2[] = "LOWER(a.type) LIKE %$word%"; $wheres2[] = "LOWER(a.constructeur) LIKE %$word%"; $wheres[] = implode( OR , $wheres2 ); } $where= ( . implode( ($phrase == all ? ) AND ( : ) OR (), $wheres ) . ); break; } switch ( $ordering ) { default: $order = a.type ASC; break; } $query = "SELECT * FROM #__auto AS a" . "\n WHERE ( $where )" . "\n AND published = 1" . "\n ORDER BY $order"; $db->setQuery( $query, 0, $limit ); $rows = $db->loadObjectList(); foreach($rows as $key => $row) { $rows[$key]->href = index.php?option=com_auto&view=auto; } return $rows; } ?>

Listing 15.26 : auto.php Le fichier dinstallation auto.xml contient la description des fichiers du plugin (voir Listing 15.27).
<?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="plugin" group="search"> <name>Search - Auto</name> <author>Hagen Graf</author> <creationDate>November 2007</creationDate> <copyright>(C) 2007 cocoate.com. All rights reserved.</copyright> <license>GNU/GPL</license> <authorEmail>hagen.graf@gmail.com</authorEmail> <authorUrl>www.cocoate.com</authorUrl> <version>0.1</version> <description>Plugin de recherche pour composant com_auto</description> <files> <filename plugin="auto">auto.php</filename> </files> </install>

Listing 15.27 : auto.xml Installez le plugin puis activez-le par la commande EXTENSIONS > GESTION DES PLUGINS. Vous pouvez essayer de faire chercher un terme nexistant que dans les donnes du composant. Les deux champs du type et du constructeur sont scruts dans la base et les rsultats affichs dans le masque de rsultat de recherche standard de Joomla! (voir Figure 15.18).

Figure 15.18 Exemple dutilisation du plugin de recherche plu_auto.

250

Ce plugin est volontairement simple. Il faudrait par exemple ajouter un lien dynamique dans les rsultats de recherche pour se rendre directement la vue dtaille de lenregistrement trouv. Mais nous navons pas prvu dans le composant de vue dtaille et ne pouvons donc pas mettre en place un tel lien.

15.5 Conclusion

Fazit Joomla! Kapitel 15 Komponenten Module Plugins

Nous avons voulu dans ce chapitre vous offrir un aperu global du processus de conception dun composant, dun module et dun plugin. Vous pouvez envisager dautres dveloppements en partant des composants existants. Notre composant na par exemple quune vue table. Pour y ajouter une vue dtaille (une vue fiche), inspirez-vous dun composant qui en dispose, par exemple com_contact. De mme au niveau des paramtres des modules, cherchez parmi ceux fournis en standard puis concevez votre propre module. Ce qui paraissait en dbut de chapitre assez complexe savre, vous en conviendrez, assez simple en fi n de compte. Je vous souhaite bien du plaisir dans vos dveloppements !

251

CHAPITRE 16 : UN SITE WEB COMPLET AVEC JOOMLA!

Si vous venez des pages prcdentes du livre, vous avez pu voir des dizaines de captures dcran de la partie administration. Vous en savez plus sur les imbrications des technologies et les approches de conception Web et vous avez lesprit truff dacronymes : HTTP, HTML, CSS, SQL, PHP, SEO, SEF, DIV, MVC, et tutti quanti. Mais en ralit, vous vouliez seulement crer un site Web ! Mais peut-tre vous tes vous rendu directement ce chapitre pour savoir comment faire ? Dans tous les cas, bienvenue dans ce projet concret. Nous allons voir comment concevoir puis raliser un site Web avec Joomla!, de lide initiale la publication. 16.1 Lide de dpart Le site Web que nous allons raliser est celui dune famille de viticulteurs du Languedoc, les Bertrand. Le chef de lentreprise se nomme Pascal Bertrand. Il en incarne la troisime gnration. Il propose la vente diffrents cpages et millsimes. Jusqu ce jour, il livrait son vin une cooprative viticole, avec un peu de vente directe pendant la saison estivale. Mais M. Bertrand voudrait aussi proposer son vin sur Internet, et se servir de Joomla! pour y parvenir. Voici les objectifs de son site : prsentation de lentreprise Bertrand ; informations gnrales sur la viticulture ; possibilit de commande et de rglement en ligne ; possibilit pour M. Bertrand de diffuser des actualits sur son site ; ajout de reportages photo et vido prsentant les vendanges et les installations ; cration dune zone rserve aux utilisateurs identifis, pour leur proposer des promotions et une lettre dinformation ; formulaire de contact pour les visiteurs ; injection de fils d'actualit en provenance de la branche viticole. On dispose dun dlai de deux jours pour raliser le site. 16.2 Prparatifs Pour atteindre cet objectif, il faut un peu se prparer. 16.2.1 Le logo et la charte visuelle La famille Bertrand rencontre une illustratrice appele Ruth Prantz pour rfl chir sur laspect visuel du site, exception faite des contenus diffuser. Ruth demande tout dabord sil existe dj un logo et une charte graphique qui seraient utiliss dans les documents imprims (prospectus, papier de correspondance, factures, enseigne). Lentreprise possde en effet un logo qui avait t dessin voil bien longtemps par le grand-pre Bertrand (voir Figure 16.1).

Figure 16.1 Le logo dessin par le grand-pre Bertrand.

252

Effectivement, le logo apparat sur diffrents documents historiques de lentreprise. Il ny a cependant pas de charte graphique constante. Les couleurs varient dun imprim lautre, les polices aussi tout comme les illustrations et les styles graphiques. Ruth cherche ensuite connatre les attentes de la famille Bertrand pour son site Web et des groupes de clients viss. Les vignes Bertrand sont conduites en culture biologique en portant une attention particulire la qualit, ce qui est bien dans lair du temps. Lobjectif est de vendre environ 5 % de leur production via le Web. Les clients attendus sont dabord des amateurs de vin et leurs cercles damis, avec un pro dge de 35 ans et plus. Pour que le site se distingue de la concurrence, Ruth conseille M. Bertrand de travailler sur le logo, les couleurs et les caractres sans attendre. En moins dune heure, un premier projet apparat lcran (voir Figure 16.2).

Figure 16.2 Le premier projet du logo Bertrand retravaill par Ruth. Ruth a utilis le logiciel de retouche graphique Photoshop Elements de Adobe que de nombreux fournisseurs daccs Internet proposent gratuitement lors de la signature du contrat dhbergement.Vous pouvez bien sr vous servir de nimporte quel autre programme et notamment le logiciel libre Gimp. La famille Bertrand apprcie le premier projet. Ruth prend cong en promettant de concevoir un template partir du logo et du choix des couleurs. Pendant ce temps, la famille Bertrand va runir des documents pour les publier sur le site Web et rfl chir la structure du site dans Joomla!. 16.2.2 Illustrations Il est indispensable de diffuser des photographies et des illustrations pour donner au visiteur une ide de la production du vin, de lenvironnement, des cpages, du processus de fabrication et de la famille.Le fils Didier et la le Marlne sont chargs de fouiller dans la grande masse darchives photos et vidos dont ils disposent pour slectionner des lments. Par ailleurs, ils partent faire un reportage vido sur la fte viticole qui a justement lieu le mme jour. 16.2.3 Textes En ce qui concerne les textes diffuser sur le site, M. Bertrand tient sen occuper personnellement. Il a dj rdig de nombreux prospectus et recueilli des articles dans la presse locale et spcialise. Il possde galement une srie dattestations danalyse des sols et des vins. Il aimerait bien numriser tous ces documents et les proposer en tlchargement au format PDF, mais uniquement aux membres. 16.3 Ralisation technique I Pendant que ses enfants rassemblent les documents, M. Bertrand aimerait commencer prparer la structure de son site Web.

253

16.3.1 Installation locale Il dcide dinstaller une version locale de Joomla! dans un environnement XAMPP lite, comme dcrit au Chapitre 2. Son site ne sera pas implant dans la racine relative prcdente [CheminJoomla]/joomla150, mais dans une nouvelle branche qui sera [CheminJoomla]/bertrand. Voici les donnes quil saisit lors de ltape dinstallation relative au serveur MySQL : Nom du serveur : localhost ; Nom d'utilisateur : root ; Mot de passe : aucun (laisser le champ vide) ; Nom de la base de donnes : bertrand. Il na pas besoin des donnes dexemples pour son site puisquil va injecter ses propres contenus. Dans ltape correspondante de linstallation, M. Bertrand vite donc de cliquer sur le bouton des donnes dexemples. Bien sr, laffichage peut tre perturbant puisque le bouton doption ct du bouton daction propose dinstaller les donnes dexemples. Tant que lon ne clique pas sur le bouton action, les donnes ne seront pas installes, ce qui est le but ici (voir Figure 16.3).

Figure 16.3 Installation de Joomla! Il clique donc sur le bouton SUIVANT. Linstallateur cr un site Joomla! vide. Dans le haut de la page dadministration apparat dj le nom Les Vins de Bertrand (voir Figure 16.4). Figure 16.4 La partie publique du site sans donnes dexemples. Le site nest pas totalement vide. Aprs avoir accd la partie dadministration, M. Bertrand choisit la commande EXTENSIONS > GESTION DES MODULES. Il constate quil y a un module activ, Main Menu (voir Figure 16.5).

Figure 16.5 Un seul module est activ pour le menu gnral.

254

M. Bertrand se demande o sont passs tous les autres modules systme, comme le module de

c onnexion Login. En utilisant le bouton NOUVEAU, il est rassur. Tous les modules sont bien l, il suffit de les activer (voir Figure 16.6).

Figure 16.6 Accs aux modules du systme. Langues de linterface M. Bertrand vrifie que la langue de la partie publique et de la partie administrative est bien le franais. Cela devrait tre le cas puisquil a install un Joomla! en franais. Trois premiers articles... M. Bertrand veut maintenant dgrossir la structure en insrant trois premiers articles au format blog et visibles sur la page daccueil du site. Ces trois articles nentreront dans aucune catgorie. Il utilise la commande CONTENU > GESTION DES ARTICLES, le bouton NOUVEAU et cre tour tour trois articles dactualit (Article 1, 2 et 3). Il en profi te immdiatement pour crer un chapeau en positionnant le curseur lendroit de la rupture puis en cliquant sous la fentre ddition sur le bouton LIRE LA SUITE. Il voit apparatre la ligne rouge. Il choisit NON catgoris pour la section et pour la catgorie, et vrifie que loption PAGE DACCUEIL est bien active par OUI (voir Figure 16.7).

Figure 16.7 Rdaction dun premier article.

255

Les trois articles apparaissent immdiatement sur la page daccueil ainsi que dans la liste CONTENU > GESTION DE LA PAGE DACCUEIL. M. Bertrand en profite pour activer le template Beez par la commande EXTENSIONS > GESTION DES TEMPLATES (voir Figure 16.8). M. Bertrand voudrait immdiatement faire une retouche pour masquer la date de cration, celle de modification et le nom de lauteur. Pour masquer ces trois lments, il utilise la commande CONTENU > GESTION DES ARTICLES, le bouton PARAMTRES puis choisit loption MASQUER dans les trois champs de lauteur et des deux dates (voir Figure 16.9).

Figure 16.8 La page daccueil avec les trois articles dans le template Beez.

Figure 16.9 Retouche de la configuration des trois articles. Sa page daccueil est maintenant peu prs acheve (il reste ventuellement mettre du vrai texte la place du texte dattente). Il constate avec joie que Joomla! a automatiquement cr un dactualit RSS qui devient visible dans Internet Explorer partir de la version 7 et dans Firefox dans la barre dadresse (cest un symbole orange). En cliquant dans ce symbole, il voit apparatre une page de demande dabonnement (voir Figure 16.10).
256

Figure 16.10 La page de demande dabonnement un dactualit dans Firefox. Une fois quil se sera abonn, le visiteur obtiendra un message concernant lapparition de nouveaux articles sur la page daccueil. Ce mcanisme sapplique galement dautres programmes de lecture dactualit. Le concept est dailleurs devenu accessible aux appareils mobiles tels que les tlphones portables et les assistants personnels. M. Bertrand espre que de nombreux clients sabonneront ses actualits et sintresseront ensuite ses promotions (voir Figure 16.11).

Figure 16.11 Les articles dans un menu de dactualit du navigateur. Mentions lgales Dans de nombreux pays dEurope, il est indispensable de prvoir une page pour y rassembler les mentions lgales et le nom du responsable du site. Le visiteur doit toujours pouvoir contacter le directeur de publication du site. Dans le cas de M. Bertrand, le cartouche de mentions lgales peut scrire ainsi : Directeur de la publication: GAEC Bertrand 2 impasse de Beauchamps 66200 Menfort France Messagerie : atruc@tortifer.com Tlphone : 05 12 90 00 01 N TVA Intracommm. : 232 009 112 012 Puisque le site prsente une partie commerciale, il est obligatoire dajouter le numro de TVA intracommunautaire.
257

Pour obtenir cette page, il cre par la commande CONTENU > GESTION DES ARTICLES, bouton NOUVEAU un article non catgoris appel Mention lgale. Cette fois-ci, il ne fait pas afficher larticle dans la page daccueil. Le lien qui permettra dafficher les mentions lgales devra se trouver en tant qulment du menu gnral (Main Menu). M. Bertrand slectionne la commande MENUS > MAIN MENU, puis le bouton NOUVEAU. Dans lassistant de cration dlment, il choisit la catgorie ARTICLES, puis ARTICLES puis encore ARTICLE LAYOUT (voir Figure 16.12).

Figure 16.12 Cration dun lment de menu pour un article. Arriv dans la page ddition de llment de menu, M. Bertrand saisit le nom (Mentions lgales). Dans le volet des paramtres droite il doit choisir quel article associer cet lment de menu (voir Figure 16.13). (Vous avez remarqu que nous avons crit le titre de larticle au singulier et le titre de llment au pluriel pour les distinguer plus aisment.)

Figure 16.13 Cration dun lien (lment de menu) pour les Mentions lgales. En cliquant sur le bouton SLECTION, il voit apparatre la liste de tous les articles disponibles (voir Figure 16.14).

258

Figure 16.14 Slection dun article pour llment de menu. M. Bertrand choisit larticle Mention lgale. Son lment est termin. Il clique sur le bouton SAUVER pour linsrer dans le menu. Il reste vrifier que llment est bien publi (coche verte et non croix rouge). Notez quil sagit de la publication de llment de menu et non de celle de larticle. Pour finir, il suffit de faire remonter le nouvel lment de menu dune position au moyen des petites flches vertes (voir Figure 16.15). Le site Web donne le rsultat suivant (voir Figure 16.16).

Figure 16.15 Llment Mentions lgales dans la liste du menu gnral.

Figure 16.16 Le cartouche des Mentions lgales sur le site Web. M. Bertrand constate que les trois icnes pour imprimer, afficher le PDF et envoyer un message sont inutiles. Il accde son article Mention lgale (CONTENU > GESTION DES ARTICLES, clic sur MENTION LGALE) pour aller modifier dans le volet PARAMTRES AVANCS la valeur des trois options PDF, Imprimer et Email. Il choisit MASQUER (voir Figure 16.17).

259

Figure 16.17 Masquage de trois boutons pour larticle Mention lgale. Notre premier lment de menu est termin. M. Bertrand doit maintenant sintresser la structure des sous-menus. 16.3.2 Cration des sous-menus pour les vins et les terroirs Pour linstant, il ny a quun seul menu Main Menu hbergeant deux liens, un pour revenir la page daccueil et un pour afficher les mentions lgales. M. Bertrand aimerait tout de suite disposer dun module didentification du visiteur (Login). Il commence par renommer le menu en Menu gnral et llment Home en Accueil du site. Pour modifier le titre de menu, il utilise la commande MENUS > EXTENSIONS > GESTION DES MODULES puis il choisit MAIN MENU et modifie le contenu du champ TITRE. Pour le module identification Login, il slectionne dabord EXTENSIONS > GESTION DES MODULES, bouton NOUVEAU (voir Figure 16.18). Il choisit immdiatement le bon titre pour le module en indiquant Accs membres.

Figure 16.18 Mise en place du module didentification (Login). Enfin, pour changer le titre du premier lment du menu, il choisit la commande MENUS > MAIN MENU > HOME et indique comme titre Accueil du site. Il constate que le message dans la barre de titre
260

de la fentre est toujours en anglais, Welcome to the Frontpage. Il dcide donc de masquer ce message en accdant aux paramtres systme (SITE > CONFIGURATION GLOBALE). 16.3.3 La structure des menus M. Bertrand aimerait proposer trois menus : le menu gnral, un menu sous forme de barre horizontale en haut et un menu utilisateur runissant les commandes qui ne doivent tre accessibles quaux visiteurs identifis. Structure du menu gnral Voici la structure prvue pour le menu gnral de la colonne gauche :
- Accueil du site - Actualits - Nos vins - Texte de prsentation -- Nos blancs - Description de produit et commande -- Nos rouges - Description de produit et commande -- Nos ross - Description de produit et commande - Notre terroir - Texte de prsentation -- Les costires Description avec lien vers le vin -- Le littoral Description avec lien vers le vin -- La plaine Description avec lien vers le vin - Photographies Composant Galerie sur les vendanges - Promotions Oprations spciales - Contact - Mentions lgales

Structure du menu horizontal Le menu horizontal va permettre daccder rapidement plusieurs pages essentielles. Lorsque lon clique dans ce menu, le lien quivalent dans le menu gnral doit souvrir le cas chant.
Nos vins - Texte de prsentation Notre terroir - Texte de prsentation Reportages Composant Galerie sur les vendanges Contact

Structure du menu utilisateur Lorsque le visiteur sest identifi par le module Login, il doit pouvoir accder une partie prive du site proposant des promotions. Le but est de renforcer les liens entre producteur et consommateurs. Il est prvu de leur proposer une page frquemment mise jour contenant des promotions, avec une possibilit de commander et de payer en ligne. De plus, M. Bertrand veut proposer un lien de tlchargements qui permet aux utilisateurs enregistrs de puiser dans le lot de documents quil met leur disposition.
- Promotions - Tlchargements - Dconnexion

Insertion des textes et des liens dans le menu gnral Pour linstant, tous les textes, hormis le formulaire de contact et la galerie de reportages qui vient plus loin, sont de type Non catgoris. M. Bertrand les cre par la commande CONTENU > GESTION des articles. Il vrifie bien quaucun de ces nouveaux contenus ne va apparatre sur la page Accueil du site (Frontpage). Tous les articles doivent tre munis des trois boutons PDF, Email et Imprimer, mais il faut masquer la date de cration. Une fois les articles gnrs, il faut passer la cration des lments de menu. Pour que les trois liens NOS BLANCS, NOS ROUGES et NOS ROSS constituent un sous-menu, il faut slectionner chaque fois llment parent Nos vins (voir Figure 16.19) qui doit donc tre cr dabord.

261

Figure 16.19 Cration de liens dans un sous-menu. Il faut procder de mme avec les trois lments du sous-menu Notre terroir. Au final, la liste de MENUS > MAIN MENU doit montrer une structure arborescente comme en Figure 16.20. Le nom Main Menu est conserv, seul le titre qui apparat sur le site indique dornavant Menu gnral.

Figure 16.20 Structure arborescente des menus et sous-menus. Cration dun lien de contact M. Bertrand dsire profi ter du composant standard de Joomla! nomm Contact. Il doit dabord crer une catgorie de contacts en lui donnant le nom GAEC Bertrand. Pour y parvenir, il choisit la commande COMPOSANTS > CONTACT, page CATGORIES (voir Figure 16.21).

Figure 16.21 Cration dune catgorie de contact. Il clique ensuite en haut gauche sur le lien CONTACT (nous avons prsent cela au Chapitre 9 en section 9.2). Il ne dfinit au dpart quun seul contact pour lui-mme. Dautres pourront tre ajouts plus tard. Un seul formulaire suffit pour linstant (voir Figure 16.22).

262

Figure 16.22 Cration dun nouveau contact dans la seule catgorie existante. Il reste insrer un lment dans le menu gnral pour accder ce contact. Par la commande MENUS > MAIN MENU > NOUVEAU, M. Bertrand aboutit la fentre de choix du type et slectionne CONTACT puis MISE EN PAGE STANDARD DES CONTACTS. Il arrive ensuite dans la page ddition de llment. Les contacts existants sont slectionnables dans le volet droit des PARAMTRES BASIQUE. Pour linstant il ny en a quun. Il slectionne sur son nom puis clique sur le bouton SAUVER (voir Figure 16.23).

Figure 16.23 Cration de llment de menu pour le contact. Il ne reste plus qu vrifier par MENUS > MAIN MENU que llment pour le contact est bien publi (colonne Publi ou Activated). Il repositionne ventuellement llment pour quil ne soit pas en dernier dans le menu. En allant voir le rsultat sur le site Web, il suffit de cliquer sur le lien CONTACT pour voir apparatre les coordonnes de Pascal Bertrand suivies dun formulaire dans lequel le visiteur peut lui crire. Menu horizontal en haut (menu-barre) Notre menu gnral est presque achev. Il ne restera qu ajouter un lien pour accder la galerie des reportages. M. Bertrand veut maintenant crer un menu-barre horizontal en haut. Il choisit la commande MENUS > GESTION DES MENUS puis clique sur le bouton NOUVEAU. Il donne son nouveau menu le nom MenuBarre (voir Figure 16.24).

263

Figure 16.24 Cration dun nouveau menu. Le menu doit tre immdiatement positionn lendroit dsir. Au moyen de la commande EXTENSIONS> GESTIONS DES MODULES, M. Bertrand opte pour la position user3. Il vrifie que le menu est activ. Le titre choisi na pas dimportance, car les menus barre ne prsentent gnralement pas de titre, et celui-ci restera donc masqu (voir Figure 16.25).

Figure 16.25 Choix de la position des nouveaux menus. Pour peupler le nouveau menu qui reste invisible tant quil est vide, pourquoi ne pas profi ter des lments qui existent dj dans le menu gnral ? Il choisit la commande MENUS > MAIN MENU, slectionne par la coche les trois lments NOS VINS, NOTRE TERROIR et CONTACT puis clique sur le bouton COPIER (voir Figure 16.26).

Figure 16.26 Copie de trois lments de menu. Dans la page qui apparat, il faut slectionner le menu destinataire, Top menu puis cliquer sur le bouton COPIER. En allant vrifier sur le site, le nouveau menu-barre apparat en haut. Il contient bien les trois lments. Lorsque lon clique sur lun des lments, larticle saffiche. En revanche, le choix dun des deux menus ne fait pas ouvrir les dtails de llment correspondant du menu gnral. En tudiant le contenu de la barre dadresse, M. Bertrand constate que la fin de ladresse est diffrente selon que lon clique par exemple sur NOS VINS par le menu gnral ou par le nouveau menu-barre. La solution est de modifier le type des lments du menu-barre pour quils fassent rfrence au menu ouvert par un lien externe. (Pour russir cette modification, le plus confortable est de disposer de deux onglets dans votre navigateur, un avec le site et lautre avec la partie administration.) M. Bertrand a donc modifi le type des deux liens NOS VINS et NOTRE TERROIR en rcuprant ladresse exacte qui permet den afficher les dtails par le menu gnral. En choisissant la commande MENUS > MENU BARRE puis llment NOS VINS, il bascule dans la page ddition dans laquelle il peut cliquer sur le bouton CHANGER LE TYPE puis choisir le type LIEN EXTERNE (voir Figure 16.27).

264

Figure 16.27 Changement du type dun lment de menu. Au retour dans la page ddition, le champ nomm LIEN devient accessible. Il ne reste plus qu insrer les bonnes coordonnes dans la fin du nom. Les valeurs exactes varient dune installation lautre, car elles dpendent de lordre dans lequel vous avez cr les diffrents lments. Il peut par exemple sagir des valeurs suivantes : pour Nos vins : index.php?option=com_content&view=article&id=5&Itemid=4 pour Nos terroirs : index.php?option=com_content&view=article&id=9&Itemid=8 Une solution simple consiste slectionner dans la barre dadresse la fin du lien partir du a de article puis de basculer dans la partie administration pour coller cette mention la place de la fin du lien dans le champ LIEN. Notez quil ne faut pas ajouter de barre oblique au dbut avant index.php. Cette barre oblique ferait chercher dans le dossier des documents du serveur Web Apache. Le rsultat sera dafficher la page de bienvenue de XAMPP lite que nous avons vue lors de linstallation. Les liens doivent tre relatifs la position courante. Cest ce qui permet de transplanter un site Web dun endroit lautre. Les liens relatifs restent valables au sein de la sous-structure. Avec des liens absolus, il faut tout mettre jour ds que lon implante la sous-structure dans une racine situe ailleurs. 16.3 Ralisation technique II 16.3.4 La boutique (shop) Pour que les clients puissent commander et rgler en ligne, il faut ajouter au site un systme de prise de commande et de paiement. lheure o nous mettons sous presse, il nexiste aucun composant de ecommerce qui fonctionne de faon suffi samment stable avec la nouvelle version Joomla!1.5 (mais lexcellent VirtueMart en version 1.1 sera sans doute disponible quand vous lirez ceci). De plus, M. Bertrand aimerait ne pas installer trop de composants additionnels, pour limiter les efforts de maintenance et de mise jour. Son fils Didier a alors lide de mettre en place un panier de commande PayPal, le systme de paiement Web le plus rpandu au monde qui appartient la socit eBay. PayPal propose un grand nombre doutils pour les vendeurs, et notamment un systme de panier de commande. M. Bertrand dcide donc de crer un compte PayPal associ une carte bleue. Il existe des systmes concurrents PayPal, comme WorldPay, qui offrent peu prs les mmes fonctions. Pour linstant, trois produits sont proposs la vente :

un blanc 10 euros la bouteille ; un ros 10 euros la bouteille ; un rouge 12 euros la bouteille.

265

PayPal permet de crer des boutons qui peuvent tre associs aux articles dcrivant ces produits. En cliquant sur le bouton, larticle est dpos dans le panier PayPal. Prcisons que les frais dexpdition et les taxes sont grs (voir Figure 16.28). M. Bertrand dcide dajouter des boutons pour PayPal dans laffichage du texte des articles Blancs, Rouges et Ross (pas dans les lments de menu !). Il va crer un module cet effet. Pour simplifier linjection du code HTML, il choisit No Editor dans le paramtre diteur WYSIWYG par dfaut accessible par la commande SITE > CONFIGURATION GLOBALE, page SITE. Par la commande EXTENSIONS> GESTION des modules, bouton NOUVEAU, il slectionne le type de module Custom HTML. Il ne reste plus qu insrer le code HTML rcupr depuis la page adquate du site PayPal dans la zone de texte de lditeur (sil avait conserv un diteur Wysiwig, il aurait fallu utiliser le bouton HTML pour insrer le bloc HTML). Le nouveau module sera plac dans la colonne gauche sous le menu gnral. Il reste choisir les pages dans lesquelles le bouton doit apparatre au moyen de la liste en bas gauche (voir Figure 16.29).

Figure 16.28 Dfinition des boutons du panier de commande.

266

Figure 16.29 Le nouveau module pour accder la boutique. Dans cet exemple utilisant PayPal, ladresse de messagerie de M. Bertrand est obligatoire dans le code source, mais le plugin Email Cloaking activ en standard masque ladresse pour des raisons de scurit. PayPal ne peut pas dans ce cas accder correctement au panier de commande. Il faut donc dsactiver le plugin par la commande EXTENSIONS > PLUGINS. Le site Web montre ensuite laspect de la Figure 16.30.

Figure 16.30 Un bouton de commande PayPal sur le site Web. Lorsque le visiteur clique sur un tel bouton, il bascule dans laffichage dun panier de commande PayPal. Nous nexpliquons pas les dtails de cette prparation ici, mais sachez que cela permet de choisir le nombre darticles puis de passer au rglement (voir Figure 16.31).

Figure 16.31 Exemple de panier de commande sur PayPal. Si le client possde un compte PayPal, il peut payer immdiatement. Les internautes qui achtent sur le Web disposent souvent dun tel compte PayPal, et leur nombre ne fera quaugmenter. 16.3.5 Les reportages Pour offrir aux visiteurs de son site un aperu de la rgion dans laquelle il est implant, M. Bertrand dcide de donner accs des images et des vidos. Il installe dabord le composant de galerie de photos Expose (revoyez la section 12.3 du Chapitre 12). Il cre une collection Vendanges contenant un album
267

2007, une collection Fiesta vinicole avec un Album 2007 et une collection Production (voir Figure 16.27). Son fils Didier ajoutera dautres documents ultrieurement.

Figure 16.32 Le gestionnaire dalbum Expos. Il cre ensuite un lment de menu vers le nouveau composant par la commande MENUS > MAIN MENU, bouton NOUVEAU. Il donne au lien le titre Reportages. Une fois quil la sauv, il peut dfinir exactement la position de llment au sein du menu. Les images sont ensuite disponibles partir du nouveau lien REPORTAGES (voir Figure 16.33).

Figure 16.33 La section Reportages du site Web. 16.3.6 Lespace rserv aux membres Lespace rserv aux visiteurs qui possdent un compte dutilisateur doit leur proposer des promotions, un plateau de tlchargement de documents au format PDF (certificats, analyses du sol, etc.) ainsi quun moyen de modifier les coordonnes du compte.

268

Le menu utilisateur M. Bertrand cre un nouvel article non catgoris portant le titre Promotions. Il vrifie que larticle est publi, quil napparat pas sur la page daccueil et quil nest accessible quaux utilisateurs enregistrs (voir Figure 16.34).

Figure 16.34 Le nouvel article Promotions Par la commande MENUS > GESTION DES MENUS, bouton NOUVEAU, il cre un nouveau menu quil appelle Menu utilisateur (voir Figure 16.35).

Figure 16.35 Cration du troisime menu, Menu utilisateur. Il place par la commande EXTENSIONS > GESTION des modules le nouveau menu dans la colonne gauche, il lactive et en limite laccs aux utilisateurs enregistrs (voir Figure 16.36).

269

Figure 16.36 Le menu utilisateur dans la gestion des modules. Il connecte ensuite larticle son nouveau menu en rglant le niveau daccs sur ENREGISTR (voir Figure 16.37).

Figure 16.37 Llment du menu utilisateur. Il va alors vrifier le rsultat sur son site Web. Il ouvre une session avec son compte dadministrateur pour constater lapparition de son nouveau Menu utilisateur conditionnel. De plus, ayant ouvert la session en mode Administrateur, il dispose dune icne de crayon permettant de modifier tous les contenus depuis la partie publique (voir Figure 16.38).

Figure 16.38 Le nouveau Menu utilisateur sur le site Web. Il en profi te pour cliquer sur licne ddition pour modifier le contenu dun article. Il peut mme accder aux paramtres et aux mtadonnes. Il se souvient tout coup que le bouton DCONNEXION nest peut tre accessible que sur la page ACCUEIL DU SITE. Dans ladministration, il choisit la commande EXTENSIONS > GESTION DES MODULES et accde aux paramtres du module LOGIN (Accs membres) pour choisir loption Tous dans la section Affectation de menu gauche. Le plateau de tlchargement Il faut ensuite dfinir une section du site proposant des documents tlcharger. M. Bertrand voudrait permettre aux visiteurs dobtenir les certificats, mais seulement aprs quils se soient identifis. Il va utiliser cet effet le composant standard Lien Web de Joomla. Par la commande COMPOSANTS > LIENS WEB, page CATGORIES, il commence par crer trois catgories :

Communiqus ; Certificats ; Analyses du sol.

270

Il prvoit pour chaque catgorie une petite description et pourra ajouter plus tard une image. Les catgories ne doivent tre accessibles quaux utilisateurs enregistrs (voir Figure 16.39).

Figure 16.39 Cration dune catgorie de liens Web. Les fichiers PDF tlcharger doivent tre stocks dans un sous-dossier spcial du dossier des mdias (SITE > GESTION DES MDIAS). Il cre ce sous-dossier en saisissant dans le champ ct du chemin daccs le nom pdf puis en cliquant sur CRER UN DOSSIER (voir Figure 16.40).

Figure 16.40 Cration du sous-dossier pdf. Il ne reste plus qu transfrer tous les documents PDF. Pour les tests en local, il suffit de copier les fichiers dans le sous-dossier de XAMPP lite [CheminJoomla]/bertrand/images/pdf. Ils pourront tre transfrs sur serveur via FTP plus tard (voir Figure 16.41). (Quelques fichiers sont fournis sur le CD-ROM.)

Figure 16.41 Les fichiers PDF accessibles depuis Joomla! Il reste crer les moyens daccder au moyen dune adresse URL ces documents PDF via la commande COMPOSANTS > LIENS WEB, bouton NOUVEAU. Le lien indiquer doit effectivement permettre daccder aux documents (voir Figure 16.42). Il faut galement choisir la catgorie de rattachement. Nous dcidons de faire ouvrir le document dans une nouvelle fentre sans navigation. Rappelons quen local, ladresse URL scrit http://localhost/bertrand/images/pdf. Lors du transfert vers le site Web public, il faudra mettre jour ces adresses ou bien saisir directement le nom de domaine appropri.
271

Figure 16.42 Cration dun lien Web. Aprs quelques oprations rptitives, M. Bertrand dispose de plusieurs liens menant des documents PDF (voir Figure 16.43).

Figure 16.43 La srie de liens de tlchargement. Il reste donner accs cette srie de liens par le Menu utilisateur. M. Bertrand utilise la commande MENUS > MENU UTILISATEUR, bouton NOUVEAU. Dans la fentre de choix du type, il slectionne Liens Web puis le sous-type LISTE DES CHAMPS DES CATGORIES DE LIENS WEB (voir Figure 16.44).

Figure 16.44 Choix du type et du sous-type pour un lien Web.

272

Dans la fentre de dfinition de llment de menu, il choisit le titre Tlchargements. Seul les utilisateurs enregistrs doivent y accder. Ds quil clique sur Sauver, il peut dans la liste positionner le nouveau lien sous le lien des promotions. Sur le site Web, le lien apparat effectivement. Il donne accs aux trois catgories. En cliquant sur une catgorie, cela fait apparatre une liste de fichiers PDF avec un lien pour les afficher ou les transfrer (voir Figure 16.45). M. Bertrand est trs satisfait. Il ne sagit pas dun vritable systme de gestion documentaire mais il suffit amplement ses besoins, dautant plus quil peut tout de mme suivre le nombre de clics pour chaque document. Les descriptions et le mode daffichage du tableau peuvent tre paramtrs par MENUS > MENU UTILISATEUR > TLCHARGEMENTS, bouton PARAMTRES. 16.3.7 Coordonnes de lutilisateur M. Bertrand se souvient que les donnes dexemples de Joomla! possdaient un lien dans le Menu utilisateur. Il permettait au visiteur identifi de modifier ses coordonnes (adresse de messagerie, mot de passe, etc.). Il veut quun tel lien soit disponible dans son propre menu utilisateur. Il cre donc un nouvel lment de menu et choisit comme type Utilisateur, puis encore Utilisateur, puis User form layout (Mise en page formulaire utilisateur). Son menu dispose ensuite dun lien appel Mes coordonnes accessible ds quune session nominative est ouverte (voir Figure 16.46).

Figure 16.45 Le plateau de tlchargement sur le site Web.

Figure 16.46 Accs aux coordonnes dun utilisateur enregistr.

273

16.3.8 Conclusion dtape M. Bertrand est tonn de la vitesse laquelle tout cela a progress. Il contacte Ruth pour lui faire part de lavancement des travaux. Mais Ruth est un peu dcontenance parce que les templates quelle avait conus t destins la version Joomla!1.0.x. Or, elle vient de constater que bien des choses ont chang dans la version 1.5. Elle pense cependant mettre jour ses templates pour le lendemain. Elle transmet par messagerie deux captures dcran des travaux en cours (voir Figure 16.47 et Figure 16.48). Lorsquelle a essay dinstaller lun de ses templates dans Joomla! 1.5, Ruth a trs vite remarqu que de nombreuses classes CSS avaient chang de nom. Pour mieux tudier les noms de ces classes et les autres paramtres, Ruth dcide dinstaller et de faire afficher la barre doutils appele Web Developer pour Firefox (voir Figure 16.49). Cette extension de Firefox est fournie sur le CD-ROM en franais.

Figure 16.47 Le projet de templates du site Web public.

Figure 16.48 Le projet de templates de la partie boutique.

274

Figure 16.49 Affichage des noms des classes CSS grce lextension Web Developer de Firefox. Ruth et M. Bertrand dcident que M. Bertrand implantera son site Web sur le serveur public avec un template standard. Les templates spcifiques seront mis en place plus tard. 16.3.9 M. Bertrand dcouvre le langage CSS M. Bertrand nest plus un dbutant en langage HTML. Il aimerait bien savoir plus prcisment comment fonctionne son template. Sen suit une longue discussion avec Ruth... Ruth lui explique que laspect visuel du template est dfini par deux fichiers CSS qui indiquent au navigateur du visiteur comment celui-ci doit prsenter les donnes. Ce sont ces fichiers qui dterminent par exemple la couleur rouge ou brune de larrire-plan, lajout dun graphique, et bien dautres choses. Le langage CSS se fonde sur un concept de feuilles de styles en cascade (une arborescence) et les deux fichiers CSS se nomment template.css et joomlastuff.css. Ruth a optimis ces deux fichiers pour les navigateurs les plus rpandus, cest--dire Internet Explorer 6.0 et Firefox 1.5 sous Windows dune part, et Firefox 1.06 et Safari 2.03 sous Mac OS X 10. Mais M. Bertrand aimerait apprendre le CSS pour crer lui-mme des templates ou modifier ceux qui lui sont fournis. Ruth lui explique alors le principe des feuilles de style en cascade (Cascading Stylesheets CSS) : le terme cascade signifi e que les formats sont lus de haut en bas, et que certains formats sont des sous-formats de formats prcdents. En cas de redfinition dun style, la nouvelle dfinition remplace lancienne. Voici quel endroit les dfinitions CSS peuvent tre implantes : dans un fichier CSS externe indpendant ; dans la partie d'en-tte dun fichier HTML ; directement imbriqus dans une balise HTML. Les instructions CSS rencontres dans les balises HTML ont priorit sur celles de mme nom trouves dans un fichier CSS externe. Cette remarque a son importance car Joomla! prdfinit certains formats CSS et les injecte directement dans les balises HTML, remplaant vos propres dfinitions. Vous devez en tre averti. Pour que la feuille de styles du template de M. Bertrand reste simple, Ruth dcide de bien utiliser la structure hirarchique offerte par CSS.
275

Elle choisit de faire contrler laspect des textes par les balises HTML classiques : body, table, div, p et form. Tous les contenus de ces lments doivent apparatre avec la police Verdana dans un certain corps et une couleur grise. Lorsquil est ncessaire de diverger de ce style de base un certain endroit du site Web, il suffit de lier les balises HTML une classe de style. Si nous partons par exemple de la classe nomme .tableaugris possdant la proprit suivante : { background-color: #333; } Elle devient utilisable dans une balise HTML de la faon suivante : <table class=tableaugris> Il est donc possible de personnaliser des lments individuels grce aux classes CSS. Joomla! propose un grand nombre de classes prdfinies, ce qui permet de concevoir assez facilement ses propres templates. En guise dexemple, tudions le code servant la colonne gauche de navigation (voir Figure 16.50). Cette colonne hberge trois modules Joomla! : Main Menu/Menu gnral ; User Menu/Menu utilisateur ; User Login/Accs membres. Laspect visuel de cette zone de navigation est contrl par les classes suivantes (voir Listing 16.1).

Figure 16.50 La colonne gauche de navigation sur le site. ... <div class=moduletable_menu> <h3>Menu gnral</h3> <ul class=menu> <li id=current class=active item1> <a href=http://localhost/bertrand/>Accueil du site</a> </li> <li class=parent item4> <a href=index.php?option=com_content...>Nos vins</a> </li> <li class=parent item8>
276

<a href=index.php?option=com_content...>Notre terroir</a> </li> ... </ul> </div> <div class=moduletable> <h3>Connexion</h3> <form action=index.php method=post name=login id=form-login> <fieldset class=input> <p id=form-login-username> <label for=modlgn_username>Identifiant</label><br> <input id=modlgn_username name=username class=inputbox alt=username size=18 type=text> </p> ... </fieldset> <ul> <li> <a href=index.php?option=com_user...>Mot de passe oubli ?</a> </li> ... </ul> <input name=option value=com_user type=hidden> ... </form> </div> <div class=clear></div> ... Listing 16.1 : Le code HTML de la colonne de navigation Le formatage CSS pas pas Schma Ltude du code HTML laisse deviner une certaine systmatique. Pour atteindre son objectif de prsentation, Ruth a dcid de demander dans le fichier index.php de gnrer les donnes du module sous leffet de linstruction style=xhtml. Sous leffet de cette demande, tous les modules utiliss dans le projet voient leurs donnes gnres lintrieur de couples de balises <div> sous forme dlments list. Les containers <div> reoivent des titres dsigns par la balise HTML <h3> suivie de listes. Les listes contiennent les liens. Cette approche offre beaucoup de souplesse car toutes les balises HTML peuvent tre contrles soit directement, soit via les classes prdfinies dans Joomla!. Les modules prsentent une image de fond estompe dfinie dans une balise HTML globale pour sappliquer tous les modules. Les classes conues pour lensemble HTML sont runies dans le fichier nomm template.css, de mme pour la couleur de fond de la colonne de navigation (voir Listing 16.2). .naviside { /*Image de fond */
277

background: url(../images/naviseite_oben.jpg) top left; /* Largeur */ width: 210px; /* Placement des contenus sur le bord suprieur */ vertical-align: top; /* Bordure */ border: 0px; /* Marge interne*/ padding: 0px; /* Marge externe*/ margin: 0px; /* Couleur de fond*/ background-color: #fff; /*Placement align gauche*/ text-align: left; /* Position globale dans le bloc HTML */ float: left; } Listing 16.2: Code CSS de .naviside Ruth dcrit ensuite les diffrentes balises <div> qui sont exploites par les classes moduletable_menu et moduletable (Login Form). Elles dclarent les proprits applicables tous les menus. Il sagit de la largeur, des marges et de la couleur. Il suffit pour cela de connatre les deux classes .moduletable et .moduletable_menu. Ces deux classes sont prdfinies dans Joomla!. Ruth a distribu logiquement ses propres classes et celles prdfinies par Joomla! dans les deux fichiers CSS joomla_stuff.css et template.css. .naviside .moduletable, .moduletable_menu { width: 210px; /* Largeur */ background: none; /* Fond */ margin-top: 18px; /* Ecart du module en haut */ text-align: left; /* Align gauche */ padding: 0px; /* Pas de marge interne entre module et contenu */ } Listing 16.3: Code CSS Titres des modules Pour obtenir un titre conservant le mme aspect dans tous les modules (voir Figure 16.51) il suffit de faire rfrence au style de titre depuis le module via la balise <h3>. Dans le fichier CSS, il faut dabord rappeler la classe qui est ici .navioben. Tous les modules sont englobs dans cette division <div> via la classe .navioben. Cette manire de faire assure que seules les donnes des titres dans la rgion .navioben subissent un formatage avec ces styles CSS. Il ne reste plus
278

qu stipuler lindispensable balise <h3>. Ruth a prvu une image de fond pour les titres afin denrichir laspect des menus (Listing 16.4).

Figure 16.51 Exemple de titre de module. /* Dfinition des titres du module li */ .navioben h3 { font: 18px/18px Times New Roman, serif; /* Corps/Police*/ font-weight: normal; /* Variante de police */ color: #A49A66; /* Couleur */ background: url(../images/blatt.gif) top left; /* Image de fond */ background-repeat: no-repeat; /* Rptition du fond */ padding-left: 25px; /* Marge interne du bord gauche */ height: 25px; /* Hauteur div */ width: 185px; /* Largeur */ } Listing 16.4: Style de titre de module lments des menus Aprs le titre, il faut sintresser la mise en forme des liens dans les listes HTML (voir Figure 16.52).

Figure 16.52 Exemples dlments de menu (sous-menu).

279

Ruth ne veut pas voir de puce gauche des liens, ni de retrait vers la droite. Elle fait rfrence une liste en exploitant les classes prdfinies de Joomla! appeles .menu et .moduletable (Listing 16.5). ul.menu, .naviside .moduletable ul { list-style: none; /* Liste sans puces */ display: block; /* Element de bloc, */ /* formatable comme bote */ width: 210px; /* Largeur */ margin: 0px; /* Marge externe */ border: 0px; /* Bordure */ padding: 0px; /* Marge interne */ } Listing 16.5: Formatage dune liste de module Filets sparateurs Pour sparer visuellement les diffrents lments de menu, Ruth utilise des balises <li> dans la liste : ul.menu li { border-bottom: 1px dotted #ccc; /* Bordure infrieure */ } Il est possible de faire rfrence aux sous-rubriques des liens, par exemple pour forcer un retrait sur la bordure gauche (Listing 16.6). /* Format des listes des sous-rubriques */ ul.menu ul { /* Marge externe simulant un retrait du texte */ margin-left: 10px; background-color: #EEE; /* Autre couleur de fond */ width: 200px; /* Largeur rduite */ } Listing 16.6: Exemple de sous-rubrique La bordure infrieure des sous-rubriques est personnalise en harmonie avec la couleur de fond : ul.menu ul li { border-bottom: 1px solid #fff; /* Bordure infrieure */? } Il serait mme possible de personnaliser laspect de chaque lment de la liste puisque chaque balise <li> possde sa propre classe : level1 item1, .level1 item2 parent, .level1 item3 parent, .level1 item4 Liens vers les contenus Nous en arrivons enfin aux liens. Le formatage concerne la balise <a> situe dans la liste <ul> et se base sur la classe .menu.
280

Voici comment tous les liens doivent se prsenter : ul.menu a {? text-decoration: none; /* Lien sans soulignement */ color: #6B5E588; /* Couleur de texte */ font-size: 11px; /* Corps de texte */ padding-left: 10px; /* Marge gauche de bordure */ } Leffet visuel appel hover (survol) permet de faire varier la couleur de fond ou de texte dun lien lorsque le pointeur est amen au-dessus sans cliquer. Ruth a dcid de grer ce cas de la manire suivante : ul.menu a:hover { color: #CAC303; text-decoration: none; } Finalement, la classe suivante est utilise pour mettre en valeur llment de menu de la page actuellement affiche : .menu li#current a { color: #B22819; /* Couleur de texte */? } ... et ce sera tout ! Aprs toutes ces explications, M. Bertrand se rjouit de constater que le formatage CSS nest pas aussi complexe quil lavait craint. Il a encore la tte qui bourdonne, mais Ruth lui conseille quelques sites pour parfaire ses connaissances. Les styles CSS ont fait lobjet de nombreux tutoriaux sur le Web. 16.3.10 Prise en compte de nouveauts de la version 1.5 Si vous avez dj conu ou pris une certaine habitude dutiliser des templates Joomla! 1.0.x, vous apprendrez avec joie que Joomla! 1.5 permet de continuer les exploiter si vous les basculez dans le mode compatibilit Legacy (voyez aussi le Chapitre 12)! Il y a quelques prcautions prendre lorsque lon est concepteur de templates. Les anciennes instructions mosload() du code PHP ainsi que les anciennes classes CSS situes dans le fichier index.php du template ne fonctionnent parfois plus dans certains contextes car le formatage a volu. volutions au niveau du menu Les possibilits de mise en forme des modules et des composants ont normment augment par rapport Joomla!1.0. Il tait possible auparavant de les personnaliser en faisant rfrence des extensions de classes CSS dfinies par le programmeur. Dornavant, vos donnes HTML gnres peuvent tre contrles au niveau du format au moyen des instructions suivantes places dans le fichier index.php du template. Voici les options disponibles : table (par dfaut). Les donnes du module sont prsentes dans une colonne de tableau. horz. Le module est prsent horizontalement dans la cellule du tableau environnant. xhtml. Le module est prsent dans un lment div simple. rounded. La sortie utilise un format permettant d'afficher des coins arrondis. Le nom de l'lment <div> passe de moduletable module.
281

 none. Les donnes du modules saffichent sans aucune mise en forme. Cette volution est fantastique ! Il devient possible de produire tout un site Joomla! sans utiliser aucune balise de tableau. Cela permet de garantir un contenu prsent de faon logique et qui peut atteindre ses objectifs daccessibilit. Par ailleurs, en adoptant le principe des balises <div>, on dispose dune bien plus grande libert quavec les tableaux HTML, qui navaient lorigine pas t conus pour une si lourde tche. 16.4 Implantation sur le serveur Web Pour linstant, le site Web de M. Bertrand est purement local, mais il possde maintenant laspect dsir pour le lancer dans le vaste cybermonde. M. Bertrand a fait une tude de march pour slectionner un fournisseur daccs Internet et a fini par opter pour une petite entreprise gographiquement proche. Elle lui a propos une interface dadministration scurise SLL avec Plesk pour le paramtrage du serveur Web, de la base de donnes et de la configuration de messagerie (voir Figure 16.53). Linterprteur PHP fonctionne en mode scuris, Safe Mode. La base de donnes est administre par le trs connu outil phpMyAdmin. M. Bertrand tenait administrer son serveur avec un outil Web, pour ne pas avoir diter manuellement diffrents fichiers de configuration (cest dailleurs dangereux pour celui qui ne sy connat pas bien). Il existe bien dautres interfaces dadministration en dehors de Plesk, comme par exemple Confixx, Visas ou encore Webmin. La plupart des fournisseurs daccs Internet proposent soit lun des outils standard, soit une version personnalise.

Figure 16.53 Exemple dinterface dadministration Web. 16.4.1 Procdure dinstallation Dans son installation locale, M. Bertrand sest dabord servi de linstallateur Web intgr Joomla! pour configurer le programme. Il a ensuite procd la cration de son site en le peuplant de donnes. Il aimerait fortement pouvoir transfrer les donnes et les dfinitions de son site. Au moins deux possibilits soffrent lui : Il transfre tous les fichiers de Joomla! par FTP sur le serveur du fournisseur daccs puis modifie manuellement les fichiers de configuration et importe enfin la base de donnes via phpMyAdmin.
282

 Il charge un fichier Joomla! par FTP sur le serveur puis procde linstallation distance avec linstallateur de Joomla! pour importer enfin les donnes via phpMyAdmin. M. Bertrand opte pour la premire approche. Il lui faut dabord rassembler ses donnes de connexion FTP, son nom et son mot de passe MySQL, et bien sr son nom de domaine. Voici les donnes daccs dont il a besoin (ces donnes sont videmment diffrentes pour vous) : FTP Machine hte : bertrand.cocoate.com ; Identifiant (user) : fusfusfus ; Mot de passe : pwpwpw. Machine hte : localhost ; Identifiant (user) : dbusdbus ; Mot de passe : pwpwpwpw ; Base de donnes : dbdbdb. 16.4.2 Installation de Joomla! sur le site public M. Bertrand dmarre son programme de transfert FTP et se connecte son espace. Il utilise loutil FTP propos par son fournisseur (FileZilla est fourni sur le CD-ROM).

Figure 16.54 Transfert FTP. 1. Il transfre toute la sous-structure de dossiers c:\xampplite\ htdocs\bertrand dans le dossier httpdocs (ou autre) du serveur chez son fournisseur daccs. 2. Il cre une sauvegarde de son fichier local configuration.php sur son propre PC puis ouvre loriginal dans un diteur de texte. Il doit en effet modifier quelques paramtres pour que la version locale puisse fonctionner sur le serveur distant. /* Paramtres de base de donnes */ ... var $host = localhost; // Normalement = localhost var $user = ; // Identifiant MySQL var $password = ; // Mot de passe MySQL var $db = ; // Nom de la base MySQL
283

3. Il transfre ensuite le fichier de configuration modifi via FTP dans le dossier httpdocs (ou autre) du serveur 4. Puis il rgle les droits daccs (permission) de ce fichier avec la commande chmod 0777. Quasiment tous les programmes FTP savent excuter des commandes systme pour modifier les droits daccs un dossier ou un fichier. Au niveau des dossiers, Joomla! a besoin au minimum du niveau daccs correspondant chmod 755. Pour les fichiers, le niveau chmod 644 suffit. 16.4.3 Importation des donnes SQL Pour que la base de donnes MySQL chez votre fournisseur daccs puisse disposer de vos donnes, il faut dabord les extraire de linstallation locale XAMPP lite. M. Bertrand accde via son navigateur son interface dadministration par ladresse http://localhost/phpmyadmin. 1. Il slectionne la base de donnes bertrand dans la liste de gauche puis clique sur le bouton EXPORTER en haut. 2. Il clique si ncessaire sur loption TOUT SLECTIONNER car toutes les tables doivent tre exportes. 3. Dans la zone STRUCTURE, il active loption gnrale STRUCTURE ainsi que loption supplmentaire AJOUTER DROP TABLE. Ce choix permet dajouter une instruction SQL pour supprimer dventuelles tables homonymes avant de crer les nouvelles et dinsrer leurs donnes. Cette option est obligatoire puisque linstallateur Web a cr des tables vides qui entreraient en confl it sans cette option. 4. Dans le groupe doptions DONNES, il active loption globale DONNES ainsi que loption INSERTIONS TENDUES. 5. Tout en bas, au niveau de COMPRESSION, il choisit loption ZIPP, pour rduire la taille du fichier transfrer. 6. Il active bien sr en bas loption TRANSMETTRE, pour que les donnes exportes soient proposes via tlchargement. 7. Il ne reste plus qu cliquer sur le bouton EXCUTER (voir Figure 16.55). Un fichier portant le nom bertrand.sql.zip est propos au tlchargement (voir Figure 16.56).

284

Figure 16.55 Prparation de lexportation des donnes.

Figure 16.56 Rcupration du fichier dexportation bertrand.sql.zip. Cette archive contient toutes les bases de donnes avec les donnes contenues. Le fichier doit tre stock dans un dossier extrieur la structure de dossiers de Joomla!. Il faut ensuite dcompacter larchive afin dobtenir le fichier nomm bertrand.sql. Il contient une longue srie dinstructions SQL (vous pouvez le visualiser avec un diteur) qui permettent de recrer la structure de la base puis dy injecter toutes les donnes prsentes au moment de lexportation. M. Bertrand accde donc linterface phpMyAdmin de son fournisseur daccs. Il slectionne sa base de donnes actuelle (il faut lavoir cre) puis clique sur le bouton IMPORTER. Il se sert du bouton PARCOURIR pour slectionner son fichier local bertrand.sql puis clique sur EXCUTER pour recrer la base de donnes distance. Si tout sest bien pass, il doit pouvoir immdiatement accder son site Web chez le fournisseur daccs (voir Figure 16.57).

285

Figure 16.57 Opration dimportation des instructions SQL. Le site Web doit avoir le mme aspect que son site local. Dans son exemple, ladresse correspondante tait http://bertrand.cocoate.com (voir Figure 16.58). 16.4.4 Droits daccs aux dossiers et fichiers Au moindre souci dans cette phase, il faut dabord vrifier les droits daccs ou permissions des dossiers dans lesquels vous avez stocker des fichiers. En ce qui concerne Joomla!, choisissez la commande AIDE > INFOS SYSTME pour obtenir une liste de toutes les permissions en cours (voir Figure 16.59).

Figure 16.58 Aspect du site Web public http://bertrand.cocoate.com.

Figure 16.59 Liste des permissions daccs aux dossiers.

286

Le fournisseur daccs slectionn par M. Bertrand utilise le systme Linux sur ses serveurs. Sous Linux, les accs sont grs par utilisateurs et par groupes. Un utilisateur est dfini pour M. Bertrand et un autre pour le programme serveur Web Apache. Dans certaines configurations, ces deux utilisateurs ne font pas partie du mme groupe. Dans ce cas, il faut forcer les permissions pour que lun puisse accder aux donnes appartenant lautre, grce la commande en mode ligne chmod 0755. M. Bertrand en profi te pour aller personnaliser le mot de passe du composant de galerie de photos Expos qui est au dpart manager. 16.5 Moteurs de recherche M. Bertrand effectue deux oprations pour que son site soit aisment trouv par les moteurs de recherche Internet. 16.5.1 Adresses URL optimises Chez la plupart des fournisseurs daccs, il possible dutiliser une option pour que les adresses URL prennent un aspect adapt aux moteurs de recherche. Le fournisseur choisi par M. Ber trand autorise ces adresses optimises. M. Bertrand active donc la fonction par la commande SITE > CONFIGURATION GLOBALE > PARAMTRES SEO (dans la page Site). Il modifie ensuite le nom htaccess.txt en .htaccess. Cela permet ensuite daccder la galerie Expos en crivant ladresse ainsi : http://bertrand.cocoate.com/Reportages (Voir aussi la section 6.4.1 du Chapitre 6.) Notez que cette reformulation des adresses ne fonctionne quavec le serveur Web Apache. 16.5.2 Balises Mta M. Bertrand avait pris soin dajouter une petite description et quelques mots cls dans tous ses articles (revoyez la section 6.4.1 du Chapitre 6 au sujet des mots cls). 16.6 Ajout des templates spcifiques Le lendemain matin, la fte du vin est termine. Didier et Marlne ramnent de nombreux documents photographiques. M. Bertrand met en place les fichiers PDF sur son site. La connexion pour le paiement par PayPal a t teste. Tout le monde se retrouve pour le djeuner, car Ruth a entretemps termin la conception de ses deux templates. Elle rapporte les fichiers sur une cl USB et raconte les dtails du processus de ralisation. 16.6.1 Installation des templates M. Bertrand dcompresse les deux fichiers zip des templates pour obtenir deux dossiers avec des sousdossiers pour chacun deux. Il transfre ensuite chacun des deux sous-dossiers via FTP dans le dossier bertrand/templates de son site Web (il faut dabord supprimer un ventuel sous-dossier portant le mme nom). Il choisit ensuite la commande EXTENSIONS > GESTION DES TEMPLATES pour instaurer son nouveau template tmpl_bertrand comme template par dfaut (voir Figure 16.60).

Figure 16.60 Activation du nouveau template dans le gestionnaire des templates.

287

Le template secondaire tmpl_bertrand_shop doit tre utilis uniquement dans les pages concernant le vin, pour permettre une commande directe. Il suffit pour cela daller dans les paramtres dtaills de ce template (voir Figure 16.61). 16.6.2 volution des templates Ruth a conu les deux templates avec plusieurs objectifs en tte. volution M. Bertrand veut faire voluer son site, y compris au niveau de son aspect. La conceptrice en a tenu compte. Elle a cre un gabarit bien structur qui permettra M. Bertrand de remplacer les images dans la partie suprieure lorsquil en aura le dsir. Mise en page Ruth explique la manire dont elle a travaill pour concevoir les templates : Laspect visuel dun site Web offre de nombreuses possibilits. M. Bertrand veut vendre du vin.

Figure 16.61 Slection des pages pour lesquelles le template de boutique doit tre utilis. Son template doit donc vhiculer une ide de recherche de la qualit dans la tradition, pour que lon devine que lon pourra acheter ici du vin de qualit. Il aurait t inefficient de concevoir un template de style technologique avec des effets mtalliques, mme si cela aurait donn un aspect moderne. Nous avons choisi des visuels de grappes de raisins et des couleurs de terroir. Les tons ont t appareills au niveau des couleurs de fond et des lments graphiques. Plusieurs lments participent laspect visuel : le logo, le choix des couleurs, le style des photographies et des graphiques (les graphiques regroupent tous les lments qui ne sont pas des photographies, et donc aussi les boutons et symboles) et enfin les polices de caractres. Tous ces lments doivent tre correctement positionns pour occuper lespace de la page. Les lments doivent bien sadapter et cohabiter pour donner un effet visuel harmonieux. Mieux vaut nutiliser quune seule police de caractres, en la faisant varier par le gras et litalique. Dans les templates Bertrand, jai opt pour une police de caractres trs classique pour les titres, afin de donner un aspect traditionnel. Il sagit de la police Times, trs utilise dans les quotidiens. Il nest pas
288

ncessaire de vouloir toujours tre original. La sobrit a du bon. Un portrait retrouv Pendant toutes ces discussions, Ruth a griffonn un petit portrait de M. Bertrand quelle lui transmet par messagerie. Il lajoute immdiatement sa galerie de photos.

Figure 16.62 Portrait de M. Bertrand. Fichier attach Taille Fichier attach Taille tmpl_bertrand_shop.zip 171.64 Ko tmpl_bertrand.zip 261.64 Ko 16.7 Tout est bien qui finit bien Le site est en ligne et les travaux nont effectivement durs que deux jours. Au cours des deux semaines suivantes, M. Bertrand insre les nombreuses photographies des vendanges et peaufine ses textes. Il demande des amis et connaissances de venir visiter le site et de senregistrer pour le tester. Il obtient mme dj une premire commande. Aprs avoir discut longuement avec son fournisseur daccs au sujet des procdures de mise jour de Joomla!, M. Bertrand signe un contrat de maintenance dans lequel le fournisseur sengage procder automatiquement aux mises jour de Joomla! ds quelles sont disponibles. Le site reste assez simple maintenir dans son tat actuel. Il utilise en effet les composants standard de Joomla!. La galerie Expos fonctionne dans un cadre iframe HTML sur le mme principe que le composant Wrapper. M. Bertrand est rassur de savoir que les mises jour sont dj organises. Vous pouvez visiter le site de la conceptrice Ruth ladresse http://www.ateliersite.de si vous tes germanophone. 16.7.1 Retour dexprience La majorit des petits sites Web naissent comme celui de M. Bertrand. Jai personnellement vcu trs souvent cette approche. Mme si les grandes entreprises ne lavouent pas aisment, leurs propres sites Web aussi commencent modestement. Les principes restent en effet les mmes. Une agence de conception graphique prend en charge la cration visuelle et une quipe technique se charge de la programmation et des traitements. Souvent des quipes spcifiques sont dfinies pour rdiger les textes, pour se charger de la charte graphique et pour se soucier de la scurit. Lquipe technique soccupe galement de limplantation sur les machines htes des serveurs. Gnralement, tout se droule sans souci sous Joomla!.

289

CHAPITRE 17 : QUELQUES TEMPLATES SUPPLMENTAIRES

Aprs avoir dcouvert dans les chapitres prcdents comment concevoir des composants, des modules, des plugins, des templates et mme un site Web complet, vous avez certainement envie de crer vos propres templates. Remercions Alex Kempkens qui a supervis la cration des deux templates que nous vous proposons de dcouvrir. Attention: Sachez que vous tes autoris rutiliser ces modles dans le cadre de vos propres projets, quils soient privs ou commerciaux, deux conditions : les templates ne doivent pas tre revendus (cest lauteur qui seul peut en dcider) et vous devez prendre connaissance de quelques limitations au niveau des contenus (regardez parmi les fichiers du template concern). Nous avons cherch slectionner des templates signifi catifs dans deux domaines dapplication importants. Les vainqueurs de notre slection rigoureuse sont les deux templates suivants :

un template pour association ou organisation non gouvernementale de Tom Bohacek ; un template pour entreprise de Andy Miller.

Tout en rdigeant le Chapitre 16, le projet de site dun viticulteur sest toff au point davoir entran la cration de nouveaux templates :

deux templates conus par Ruth Prantz destins un ngociant en vin du Languedoc.

Le Chapitre 16 a prsent la cration et lexploitation de ces deux templates.

17.1 NGO : un template pour ONG

Lacronyme ONG se dit en anglais NGO (Non Governmental Organization) et dsigne les organisations non gouvernementales, cest--dire des entits runissant des individus dans le cadre dune action humanitaire ou culturelle but non lucratif. Au sens large, les syndicats, les associations sportives ou culturelles sont galement des ONG. Une association conforme la loi 1901 but non lucratif entre dans ce primtre. Le designer Tom Bohacek a comme mission de proposer dautres professionnels et des entreprises de les aider rsoudre des problmes de communication au moyen des technologies modernes. Il a dcid dutiliser Joomla! pour une raison trs simple, comme il le dit lui-mme : Parce que cest avec cet outil que jai le plus de libert pour concrtiser mes ides. Laissons donc Tom nous prsenter son template.

17.1.1 Un template de connaissance mondiale

Au dpart, jai eu lide de concevoir un template capable de sadapter aux frquentes volutions des contenus et aux nombreuses sources dinformation que doit souvent grer une ONG.

290

Figure 17.1 Le modle NGO. Cest ainsi que jai imagin le concept de connaissances du monde ONG. Jai cherch trouver comment grer et valoriser des trsors de connaissances culturelles.

17.1.2 Approche visuelle

Me remmorant la phrase de Goethe comme quoi Ce qui est gris nest que de la thorie , jai choisi un assortiment de couleurs agrables rappelant le parchemin et les bibliothques, cest--dire la connaissance. Jai mis en valeur les lments importants et les aides la navigation en bleu turquoise. Cette couleur contrastante incarne bien le concept de connaissances. La mme teinte est reprise pour la couverture du livre de la demoiselle en haut droite. De nombreuses ONG tant actives dans des contextes multiculturels, jai pris soin de ne pas charger la prsentation pour donner plus de chances des individus de cultures diffrentes de sy retrouver vite. Au niveau des textes, jai opt pour la famille de polices Helvetica. Elle revient la mode, non seulement suite la vague denthousiasme pour le Web 2.0, mais aussi parce que cest une police lisible qui inspire le srieux. De plus, elle est disponible sur quasiment toutes les machines.

17.1.3 Approche structurelle

La mise en page du site prsente quatre parties. La partie den-tte, la barre de navigation et les deux sections de contenu. Dans ces dernires aboutissent les articles, une section destine recevoir les images, des informations et des liens appropris au contexte courant. Il ny a pas de sous-niveaux dans les menus de la colonne gauche. Il est cependant possible dy insrer plusieurs sections de navigation (par exemple Prsent et Futur). Pour bien transmettre lesprit de lassociation concerne, nous proposons un accs direct une page qui en prsente les dtails au format dun article ou dun blog. Tous les niveaux infrieurs dinformations sont rendus accessibles par des liens contextuels, soit ct du corps des articles, soit directement dans larticle. Cela garantit une structure de navigation cohrente, tout en permettant doffrir une bonne dynamique daffichage des articles individuels. Tom Bohacek (http://www.bohacek.de)
291

17.2 Versatility : un template pour entreprise

Une entreprise est une entit prive pilote par un comit de direction. Mais les choses ne sont jamais simples. Lobjectif statutaire dune entreprise est la cration de bnfi ces. Cela suppose de transmettre une image de srieux pour tablir la confi ance des clients actuels et futurs. Ce srieux doit galement se refl ter par le site Web de lentreprise en sorte que les clients qui viennent le visiter aient immdiatement confi rmation quils ont fait le bon choix. Transmettre une image de professionnalisme via le site Web de lentreprise occupe des milliers dagences de cration Web. Le template conu par Andy Miller constitue un outil pour vhiculer de telles valeurs dentreprise auprs des clients.

17.2.1 propos dAndy Miller et de son projet

Andy Miller est programmeur et concepteur Web. Il a plus de10 ans dexprience dans la cration dapplications Web destines aux professionnels. Il fait partie de lquipe de dveloppement Joomla!, et faisait dj partie de celle de Mambo. Ses responsabilits au sein de Joomla! concernent surtout linterface utilisateur, laspect visuel et lacces sibilit. Andy peut donc se prvaloir dune connaissance approfondie de Joomla!, notamment dans le domaine de la cration des templates. Tous les templates standard de Mambo et de Joomla!, pour la partie publique et la partie administrative sont passs entre ses mains (son nom dutilisateur est rhuk). Par ailleurs, Andy a fond la socit RocketTheme (http://www.rockettheme.com) qui propose ses clients de leur fournir de nouveaux templates sous forme dabonnement mensuel et dintgrer une communaut dutilisateurs pour faire voluer les templates existants. Ses forums de discussion sont accessibles aux non-abonns. Son template nomm Versatility II est une volution du template Versatility qui a bnfi ci dune srieuse optimisation technique. Vous disposez par exemple de 15 positions de modules (ils ne sont tous visibles sur le site que si les modules correspondants sont installs). Cette structure riche donne toute la souplesse ce template.

Figure 17.2 Le template Versatility II de Andy Miller. Vous disposez de quatre options au niveau des menus dans ce template :
292

SplitMenu ; SuckerFish ; menu droulant drop-down ; menu SuperSucker.

De plus, des systmes de menus spcifiques ou conus par dautres programmeurs peuvent aisment tre intgrs. La Figure 17.3 montre linteraction avec le systme de menus standard de Joomla!. Les visiteurs du site Web peuvent choisir parmi trois largeurs pour le template Versatility II. Il en va de mme pour la taille des caractres du template pour lequel trois tailles diffrentes peuvent tre slectionnes par les visiteurs.

Figure 17.3 Un systme de menus dans Versatility II.

A.1 Ressources Web

Joomla! est un projet libre Open Source qui reprsente le fruit des ides et de lexprience des milliers dindividus qui lexploitent, le font voluer et le mettent disposition sur le Web. Les sites Web de rfrence pour Joomla sont ceux-ci : http://www.joomla.fr http://www.joomlafrance.org http://www.joomlafacile.fr http://www.joomlabs.net/ Voici le site de rfrence en langue anglaise et en langue allemande : http://www.joomla.org/ http://forge.joomla.org/ http://www.joomla.de/ Vous y trouverez rponse presque toutes vos questions. Fouillez surtout dans les forums. Ainsi arm, vous tes assur de pouvoir exploiter Joomla! avec satisfaction. Voyez aussi le site xing qui hberge un forum Joomla! particulirement actif : http://www.xing.com/net/mambo
293

Enfin au niveau scurit, voyez ce site : http://help.joomla.org/component/option,com_easyfaq/task,view/id,167/Itemid,268/

A.2 Tlchargements et CD-ROM daccompagnement

Contrairement un rfl exe habituellement sain, ne vous jetez pas sur la version la plus rcente de Joomla!, dun composant ou dun module ! Entre la version allemande et cette adaptation franaise, bien de leau a coul sous les ponts de Paris comme de Berlin. Si vous mettez en place la version 1.1, il est possible que certains lments fonctionnels ne se comportent plus de la mme manire. En installant uniquement les fichiers fournis sur le CD-ROM et prsents dans le Tableau A.1 (aucun tlchargement), vous vous placez dans les conditions du livre et pourrez suivre exactement nos conseils. Si vous rencontrez un problme, vrifiez si une version plus rcente (dun composant, dun template ou ou de Joomla!) ne serait pas disponible.

Chapitre Fichier CHAP02 Joomla-1.5.0.Stable-FR.zip FileZilla_3_0_6 XAMPP lite tugzip3402.exe CHAP04 CHAP06 CHAP12 Quelques fichiers d images xstandard_1_0.zip Expos RivaEncoderSetup.exe Fireboard_Forum_1.0.3.zip com_docman_x.x.x CHAP13 CHAP15 livrejoomla150.zip ACopierDans... com_hallo.zip com_auto.zip mod_auto.zip plu_auto.zip CHAP16 web-developer.xpi tmpl_bertrand.zip tmpl_bertrand_shop.zip CHAP17 ngo.zip

Description Version 1.5.0 de Joomla! franais Programme FTP Environnement logiciel (Apache, MySQL, PHP) pour Apple OS X, Windows et Linux Compresseur/dcompresseur

Plugin d diteur pour Joomla! Composant de galerie photo Expos (cherchez une version plus rcente si possible) Outil de cration de fichier vido .flv Composant Forum Composant DOCman Template d exemple Dossier d images copier l emplacement indiqu Composant Composant Module Plugin Extension pour Firefox Template Bertrand Template Boutique Bertrand Template ONG

294

rt_versatility_ii_sienna.zip

Template Entreprise

Tableau A.1 : Contenu du CD-ROM Attention: Le contenu exact du CD-ROM peut diverger de cette liste car sa production est postrieure la mise sous presse du livre papier.

ANNXE 3 : CONCEPTION D'UN SITE WEB

Cette page prsente quelques considrations sur la conception de sites web. Certaines sont nonces par des spcialistes et d'autres sont plus personnelles. Je ne prtends pas dtenir la Vrit Absolue; je me propose simplement de vous faire profiter de mon exprience en tant que webmaster et surfeur.

1. Questions prliminaires - 2. Les outils - 3. Faire un plan du futur site - 4. Ralisation - 5. Test du site 6. Mise en ligne - 7. Maintenance et mises jour - Rfrences et liens

Il convient tout d'abord d'apporter une prcision sur les rapports entre "pages web", "site web" et "page d'accueil": un site web est en quelque sorte une publication constitue d'un certain nombre de pages web. Parmi ces pages, la page d'accueil occupe une place de choix, puisqu'elle fait office de couverture pour cette publication sur le web. La visite d'un site commence gnralement par cette page de dmarrage. 1. Questions prliminaires

Quel est l'objectif vis? Que souhaitez-vous prsenter? qui s'adressera votre site? Quel nombre de pages prvoyez-vous de produire? Quelle doit tre l'apparence des pages? Avez-vous une ide concrte ou des pages d'exemples? Qui est le responsable du projet ? S'il y en a plusieurs, quelle sera la tche de chacun? Est-il prvu d'apporter par la suite des modifications ou de faire des mises jour? Qui devra s'en charger? Quel est le budget?

2. Les outils

Un diteur de pages web: Claris HomePage, Frontpage, Adobe Golive, Dreamweaver, .... On peut aussi composer les pages dans n'importe quel diteur condition d'utiliser le langage HTML. Un logiciel de traitement d'images Un scanner Pour des sites plus interactifs, des livres sur javascript, java, Flash, DHTML, php, etc.

295

3. Faire un plan du futur site

Structurez, hirarchisez votre site! La maintenance en sera plus aise et votre site aura une certaine logique qui facilitera le surf. Faites sur papier un schma de la structure du site. Reliez les pages par des flches. Ci-dessous, une (petite) partie du schma du site du Lyce cantonal de Porrentruy.

Faites des croquis de l'aspect qu'auront les pages avant de vous lancer dans la ralisation. Exemple tir de .net d'octobre 2000 (voir rfrences): structure du site Killing wave.

Structure du site

Page d'accueil

Page "Snow"

Pages "Surf"

Pages "Windsurf"

296

Page "Catalogue"

Page "Liens"

Page "Forum"

Sur votre ordinateur, vous regrouperez dans des dossiers les pages et images appartenant un mme sujet (vous devrez viter les longs noms de dossier, car cela rallongera l'adresse URL de la page). Attention aux noms de vos fichiers! Les fichiers images doivent avoir comme suffixe .jpg ou .gif, selon le format de l'image. Les fichiers textes doivent avoir le suffixe .html ou .htm.

4. Ralisation Deux principes de base - La page d'accueil est la plus importante - Navigation dans le site - Les pages doivent tre lisibles - Apparence graphique

Deux principes de base o Le plus important, ce sont les visiteurs! Faites le maximum pour eux. o Le contenu doit primer sur le contenant. On ne vous demande pas d'blouir vos visiteurs par votre virtuosit technique, on vous demande de les informer. La page d'accueil est la plus importante o Elle doit tre attrayante graphiquement, rapide, sans fautes d'orthographe et elle doit donner une bonne ide du contenu du site. o Le nom du site et son logo doivent figurer sur la page d'accueil, afin que l'internaute sache tout de suite o il se trouve. Un exemple: CFF o Mettez les informations les plus importantes en haut de la page. o Dites non aux crans d'introduction. Ils ont une utilit seulement quand il s'agit de prvenir le visiteur que le contenu du site peut le choquer (sites rotiques), lui proposer une langue, ou lui permettre de choisir entre une version rapide et une version lente. o vitez les pages d'accueil tellement charges que l'on ne sait plus o donner de la tte. o Appelez toujours la page d'accueil "index.html", cela raccourcit l'adresse URL. En effet, la page index.html est choisie par dfaut, ce qui veut dire que l'on peut supprimer le "index.html" la fin d'une adresse.
297

Il est utile de mettre sur la page d'accueil une table des matires et/ou un moteur de recherche. Un exemple: Lyce cantonal de Porrentruy. o vitez d'ouvrir automatiquement des fentres supplmentaires pour de la pub ou autre. C'est franchement agaant. o Dans le mme ordre d'ide, vitez les pages produisant automatiquement des sons. Il est prfrable de laisser au visiteur le choix d'entendre la musique ou non. o Attention aux pages d'accueil mtaphoriques! Elles peuvent dsorienter le visiteur. Un exemple: Virtual Museum Of Arts El Pais Navigation dans le site o L'utilisateur ne doit jamais se perdre! Il devrait toujours pouvoir retourner la page d'accueil d'un seul clic (par exemple en utilisant, avec parcimonie, les cadres). Un exemple: The Tigger Movie o Les cadres: sujet controvers! Ils sont trs mal grs par les moteurs de recherche. Aussi est-il possible qu'un visiteur arrive sur une page sans les cadres qui vont avec. Si votre systme de navigation est exclusivement concentr dans les cadres, l'internaute sera bloqu sur cette page. Un mauvais exemple: problme si on tombe sur cette page (sans cadres) plutt que sur celle-l (avec cadres)! o Consquence du point prcdent, une page doit toujours contenir au moins un lien pour la raccrocher au reste du site, par exemple en mettant en bas de la page un bouton permettant de revenir la page qui la prcde logiquement. En effet, il est possible qu'un internaute "tombe" sur une page via un moteur de recherche et s'y retrouve ainsi bloqu, n'ayant aucun lien sur lequel cliquer. o Signalez clairement les liens. Le mieux est de garder la couleur standard, savoir bleu soulign. o Un visiteur doit pouvoir deviner o un lien le conduira avant mme de cliquer dessus. Un mauvais exemple: les archives d'Archimde. o vitez un cheminement linaire. Un site web n'est pas un livre. Attention toutefois ne pas perdre le visiteur. Les pages doivent tre lisibles o vitez les fonds d'cran qui font mal aux yeux. Choisissez des couleurs douces et de faibles contrastes. o Si vous crivez en blanc sur fond noir, pensez que l'utilisateur aura des difficults imprimer la page. o N'crivez pas trop petit. Le mieux est de garder les polices et les tailles standard. o Ne tombez pas dans l'excs inverse. Il est agaant de devoir bouger l'ascenseur horizontal. Ne dilapidez pas la place. o vitez aussi de concevoir votre site pour une rsolution d'cran bien prcise. Si vous pensez que le visiteur va changer la rsolution de son cran juste pour voir votre site, vous rvez! Un mauvais exemple: Killing wave o Sur un cran, l'criture italique fatigue vite les yeux. Pour mettre des mots en vidence, prfrez-y l'criture en gras. o l'inverse, les pages ne contenant que deux lignes de texte sont ridicules. o vitez plusieurs sujets sans rapport entre eux sur une mme page. Rgle: 1 sujet = 1 page. o vitez les textes trop longs. Il n'est pas trs agrable de lire sur un cran. Au-del de 500 mots, la lecture d'une page web devient pnible. En cas de longs textes, crez des ruptures (sous-titres, icnes). D'un autre ct, si le texte est destin tre imprim, autant tout mettre sur une seule page, comme c'est la cas sur la page que vous lisez actuellement. o Jakob Nielsen a fait des recherches sur la manire dont les internautes lisent les page web en analysant leurs mouvement oculaires. Il ressort de cette tude que l'on lit des pages web selon un motif en F (voir image ci-contre). On remarque que
o

298

l'attention des utilisateurs commence dans le haut de la page, les yeux suivent une verticale gauche de la page, ds qu'un lment intressant est repr dans le cheminement vertical, l'utilisateur se dtourne de sa recherche pour lire la phrase plkus attentivement. On n'crit donc pas une page web comme une page d'un livre. Il faut faire des plus petits paragraphes, commencer la phrase par les lments les plus percutants et ne pas hsiter insrer des sous-titres pour accrocher l'oeil.

Apparence graphique o N'abusez pas des images. C'est joli, mais le temps de tlchargement de la page sera plus long. L'utilisateur sera-t-il assez patient? o N'abusez pas non plus des animations, cela finit par donner la nause. Sans compter que cela prend du temps tlcharger... o Une certaine ligne graphique doit tre respecte afin de ne pas dsorienter le visiteur. Un excellent exemple: Science U. Pour plus d'interactivit, vous pouvez installer un forum et/ou un livre d'or, ou encore un sondage (par exemple grce pouroucontre).

Ici vient la phase de cration l'aide de logiciels spcialiss.

5. Test du site

Vrifiez que tous les liens aboutissent bien sur les pages souhaites. En particulier, peut-on revenir facilement la page d'accueil? Testez l'apparence de chaque page sur les dernires versions de Netscape Communicator ET Internet Explorer. On a parfois de mauvaises surprises! En effet, l'interprtation du langage HTML n'est pas tout fait identique sur les deux navigateurs, principalement concernant l'aspect des tableaux et des listes. Vrifiez que toutes les images apparaissent. En cas de problme, vous verrez apparatre le symbole ci-contre. Vrifiez et revrifiez l'orthographe! N'hsitez pas demander l'avis de vos amis concernant la navigation dans votre site et son contenu.

6. Mise en ligne

Hbergement: Pour les sites privs, il y a des hbergeurs gratuits (malheureusement pollus par la publicit). Pour des prix raisonnables, on peut avoir un serveur soi, avec une base de donnes, PHP, etc., par exemple chez AlpHosting (chez lequel ce site est hberg). Outils pour transfrer vos fichiers sur un serveur (upload). Mac: Fetch, PC: Filezilla, FTP Expert, ... Choisissez bien le nom de votre site pour qu'il soit facile mmoriser. Veillez tre bien rfrenc dans les moteur de recherche les plus connus Une fois le site mis en ligne, testez la version en ligne. Parfois la version locale (celle sur votre ordinateur) marche, mais la version en ligne "foire" (en ligne, les majuscules et minuscules des noms de fichiers sont diffrencies, alors qu'elles ne le sont pas sur la version locale).
299

7. Maintenance et mises jour

Si vous avez des liens avec d'autres sites, vrifiez priodiquement que ces sites sont toujours accessibles. Il est possible de faire des vrifications automatiques grce LinkAlarm. Ne changez pas les noms de vos fichiers HTML! Pensez aux gens qui ont peut-tre mis cette adresse dans leurs signets (favoris sur Internet Explorer). Vous pouvez observer la frquentation de vos pages grce des compteurs d'accs et en tirer des conclusions. Vrifiez que toutes les informations que vous donnez sont jour! Un site doit tre vivant! Un site qui ne subit pas de mises jour rgulires et qui contient trop d'informations obsoltes sera vite dlaiss par les visiteurs. Un bon exemple: HC Ajoie Gardez toujours une copie intgrale du site sur votre ordinateur personnel. On ne sait jamais ce qui peut arriver au serveur!

Rfrences et liens

Conception de sites Web. L'art de la simplicit, par Jakob Nielsen, CampusPress, 2000. ISBN 2-7440-0887-7 Graphisme des sites web, par Florian Schffer, Micro Application, 2000. ISBN 2-7429-1499-4 .net, hors-srie pratique, Comment crer votre site web en une semaine chrono, octobre 2000

ANNEXE 4 : CONCEVOIR UN SITE SUITE

300

Concevoir un site web : L'architecture de l'information

Concevoir un site web, c'est d'abord en dfinir le contenu, puis l'architecture de celui-ci, et en quipe si possible (sinon, pourquoi militer dans une association ?). C'est le thme abord dans cette fiche, l'tape suivante consistant concevoir la charte graphique (voir fiche : "Charte graphique et ergonomie"). Un bon rubricage, c'est avant toute chose, un fichier texte. Travaillez donc avec votre diteur de texte favori, avant de vous lancer dans le HTML. Vous obtiendrez, en suivant les conseils qui suivent, un document inestimable, qui vous accompagnera jusqu' la ralisation complte de votre site, vous permettant de crer vos pages au bon endroit, avec le bon contenu et la bonne navigation, et de n'oublier aucune information. Bref, ce premier document constituera la gense du site : chaque avance ou obstacle, il vous servira de rfrence. Quelques questions prliminaires doivent tre poses et dbattues avant de passer l'action. Un site web, pour quoi faire ? Voulez-vous un site vitrine (pure " carte de visite ", de prsentation) ou un site d'information (plus dynamique, plus agitateur) ? Pour satisfaire quel(s) public(s) ? Comment le web peutil amliorer votre actuelle communication ? A quelles questions des lecteurs votre site devra-t-il rpondre ? Ou encore : le web peut-il faciliter la circulation de l'information l'intrieur de votre association ? Voulez-vous utiliser le courrier lectronique pour favoriser les contacts plus directs, en donnant des adresses cibles (" pour adhrer ", " pour tre tenu au courant de nos initiatives " - avec une lettre de diffusion, par exemple, " pour nous financer ") ? Etudiez donc les sites des associations proches de la vtre par le thme ou la sensibilit, pour trouver de bonnes ides. Si vous vous lancez dans la refonte de votre site, faites la liste de tout ce qui convient encore et de tout ce que vous souhaitez retirer. En gardant l'esprit les rponses toutes ces questions, vous dterminerez l'ensemble des informations proposer. L'quipe de conception Pour rpondre toutes questions, rien de mieux que de runir toute l'quipe : de " vieux " militants qui connaissent l'histoire de l'association, un " politique " qui pourra prendre des dcisions (" est-ce qu'on met en ligne l'intgrale du journal, quitte perdre quelques rentres d'argent ? "), mais aussi un " jeune " militant qui se souvient de ses difficults comprendre comment a marche. Pensez faire collaborer les personnes qui se chargeront de la mise jour du site, plus tard, et les activistes proches de l'information (ils penseront mieux, plus tard, alimenter leurs pages). Bref, intgrez l'quipe-web toutes les personnes intresses par une aventure qui prendra sans doute plusieurs semaines, occasionnant nombre de runions agites mais enrichissantes. Vous pouvez trs bien, si vous avez une bonne pratique du courrier lectronique, travailler distance, avec des militants disperss aux quatre coins de l'hexagone (ou de la plante) : je recommande cependant, pour l'avoir moi-mme expriment, au moins une runion intermdiaire " pour se voir " autour d'un camembert et d'un paquet de carambars. Les grandes lignes de votre communication web traces, il est temps de runir, en vrac, toutes les informations qui vous semblent ncessaires : le numro de tlphone, l'adresse postale, les statuts, la liste du bureau, les conditions d'adhsion, les communiqus, les actions passes, la liste des collectifs locaux Certaines informations tranent dans un disque dur, d'autres sont saisir depuis le papier, les dernires, enfin, ne sont pas encore crites (attention, la rdaction est souvent l'tape la plus gourmande en temps : les bonnes plumes ne se bousculent pas souvent). Le rubricage
301

Ces informations, vous allez les trier pour les runir en grandes rubriques, entre 4 et 7 au mieux. Pour chaque rubrique, vous dterminez les sous-rubriques ncessaires, puis les sous-sous-rubriques, jusqu' l'information elle-mme (une ide = une page HTML). Voil votre rubricage, l'arborescence de votre site. C'est le moment de veiller adapter le contenu de votre site vos forces : voir la fiche " Mettre jour son site web " pour la charge de travail. Pensez galement la vie du site : comment les diffrentes rubriques volueront ? Quelles pages seront archives, et comment y accdera-t-on ? Attention : pas de naissance avant terme, pas de rubrique " en chantier ". Lors du lancement de votre site, soit la rubrique offre un minimum d'informations, soit elle ne sera propose que plus tard, une fois complte. Vous ralisez peu peu un fichier texte, avec l'architecture complte, dans l'ordre : 1. Premire rubrique (son nom dfinitif, courte description) 1.1. Premire sous-rubrique (nom dfinitif, courte description) 1.2. Deuxime sous-rubrique 1.2.1. Premire sous-sous-sous-rubrique, etc. 2. Deuxime rubrique Sont gnralement extraites, ce stade, les rubriques de type " Services " : ce sont aussi bien les aides l'utilisation du site (FAQ, plan du site, moteur de recherche), qu' l'utilisation de l'association (liste des contacts avec tlphone et e-mail, abonnement la liste de diffusion). La charte graphique prvoit gnralement un espace part pour ces liens. Contenu Vrifiez que chaque page a un contenu : les pages web sont la fois pages de navigation et d'information. Une page d'accueil de rubrique (par exemple la 1.1) doit proposer un texte d'information et les liens vers les pages dpendant de la rubrique. Mme les pages en bout d'architecture peuvent proposer des liens vers d'autres pages, d'autres rubriques. Pour chaque page, notez o se trouve le document-source, s'il faut le saisir, ou bien l'crire (et qui s'en charge). Si vous travaillez la refonte d'un site existant, notez l'URL de la page actuelle. Conservez soigneusement ce document : il est indispensable lors de la ralisation du site. Il donne tout d'abord la navigation principale (toutes les rubriques de niveau 1), puis la navigation secondaire, par rubrique (toutes les rubriques de niveau 2). Vous y notez les noms des rpertoires (le plus simple tant de faire un rpertoire par rubrique, puis, pour les sous-rubriques, un sous-rpertoire lorsqu'elles contiennent beaucoup de fichiers) et des fichiers HTML. Cette faon de prparer le travail vous permettra de vous concentrer sur le HTML, quand vous en serez la ralisation du site, ce qui suffira votre bonheur, me semble-t-il. Toutes les questions de contenu et de navigation auront dj trouv rponse. Ce document sert galement raliser, de manire rapide et efficace, le plan du site. Enfin, maintenant que vous connaissez le nombre de vos rubriques et sous-rubriques, vous pouvez travailler une charte graphique " sur mesure ", qui mettra en valeur votre navigation et votre contenu. Voir la fiche "Charte graphique et ergonomie". Pour une description complte du rubricage, voyez mon livre, accessible intgralement et gratuitement en ligne : " Conception, suivi et animation d'un site web associatif ", l'URL : http://www.internatif.org/eve/serveurs, et plus particulirement le chapitre 3, les lments de l'architecture.

Concevoir un site web : Charte graphique et ergonomie

302

Si vous avez mis en application la fiche "Concevoir un site web : l'architecture de l'information", vous voil prt laborer votre charte graphique. A quoi sert-elle ? Et quels sont les lments ncessaires pour la concevoir ? Rponse ci-dessous. Pour concevoir une charte graphique, une feuille de papier, des crayons de couleur, et un navigateur pour reprer les sites dont la prsentation vous plat suffisent. Qu'est-ce qu'une charte graphique ? Et quoi sert-elle ? Pas seulement faire joli : c'est mme un aspect relativement accessoire. La charte graphique, c'est un ensemble d'lments visuels qui facilitent la vie du lecteur : ils sont clairs, s'affichent rapidement, sont toujours l o on pense les trouver, remplissent correctement une seule et mme fonction, et rendent explicites ce que vous venez de dfinir : le rubricage, grce une navigation efficace. La charte graphique, c'est l'art et la manire de rendre votre site ergonomique, facile et agrable consulter. Quels en sont les lments ? Ce sont ceux qui rpondent aux questions fort prcises de vos lecteurs (voir ci-dessous), et non les jolis fonds colors ou les images qui tournicotent. Illustration parfaite de ces propos sous forme de jeu de piste : retrouver les lments cits sur le site de la Bibliothque Mazarine : http://www.bibliotheque-mazarine.fr. Une liste de questions Voici les questions auxquelles doit rpondre votre lecteur, rapidement et sans se tromper : " O suis-je ? " : l'en-tte soit le titre du site - le nom de l'association -, identique sur toutes vos pages, rpond cette question ; " O puis-je aller ? " : la barre de navigation simple et claire est toujours au mme endroit ; vous pouvez sparer visuellement les rubriques de contenu des rubriques de type " Services ". Pas de sous-rubriques proposes par du javascript si vous ne le matrisez pas et ne l'avez pas test, car les navigateurs de vos lecteurs risquent de ne pas le prsenter correctement (voire pas du tout, dans certains cas). " Qu'y-a-t'il comme information ? " : c'est la troisime zone, celle de la lecture. Vous y donnez le titre de la page (qui correspondra, rgle lmentaire, l'intitul du lien de la navigation sur lequel on a cliqu pour y arriver), toujours au mme endroit, toujours de la mme manire, puis le texte, que vous devez prvoir court, structur avec des intertitres. Pour l'espace de lecture, vous peaufinez votre typographie, la couleur du fond de la page et celle du texte (noir sur fond blanc, on n'a jamais rien invent de plus lisible ?), celles des titres et sous-titres (un peu de couleur, du moment qu'elle est visible, mais pas plus de 2 ou 3), la couleur des liens (il vous en faut deux : une pour les liens non visits, une autre pour les liens visits). Espace fourre-tout : c'est trs pratique de caler dans le " pied de page " quelques informations importantes, mais qui ne mritent pas l'espace glorieux du premier cran. Vous y reprenez, en petit, votre navigation (les grandes rubriques et les services), mais sous forme de simples liens hypertextes sur du texte. Vous y installez le copyright, si vous voulez, ou bien la date de mise jour de la page, l'URL du site, le e-mail du webmestre : tous ces petits riens que l'on cherche partout et que l'on trouve rarement quand on en a besoin. " Sur quelle genre d'association suis-je tomb(e) ? ". C'est l'tape la plus difficile mais aussi la plus crative. Les photos que vous choisissez, les couleurs, l'organisation des pages, tout cet ensemble dispense une atmosphre, celle que vous voulez donner de votre association (rigolote ? austre ? combattante ? baba-cool ? intello ? etc.). Exemple du site d'une autre bibliothque pour que vous puissiez comparer avec celle de la Mazarine : le site de la British Library (http://www.bl.uk/index.shtml). Ne comparez pas la technique, comparez l'impression que donnent les deux " papiers peints ". On est chaque fois dans une bibliothque srieuse, mais l'impression rendue par la charte graphique n'est pas du tout la mme. Un conseil, si vous n'avez pas de graphiste sous la main : trouvez un site qui vous plat, avec la
303

bonne " atmosphre ", et inspirez-vous en, en tentant de comprendre comment cette atmosphre est rendue. Si l'exercice vous semble trop difficile, faites simple... Dernier conseil et non des moindres : une fois que vous avez trouv une charte graphique, vous devez absolument l'appliquer toutes vos pages : c'est la condition principale pour qu'elle remplisse son rle, mettre l'aise votre lecteur pour qu'il puisse oublier le dcor et se concentrer sur le contenu. Pour une description complte de la charte graphique, lire mon livre, accessible intgralement et gratuitement en ligne : " Conception, suivi et animation d'un site web associatif ", l'URL suivante : http://www.internatif.org/eve/serveurs, et plus particulirement les chapitres 5.1 - Graphisme simple, efficace et adapt au thme et 5.2 - Si vous avez un(e) graphiste sous la main. Pour la ralisation des pages partir de la charte graphique, quelques conseils pratiques dans le reste du chapitre 5. A propos de l'ergonomie : Voyez l'annexe Annexe 3 - Ergonomie sur le web, de mon livre (URL ci-dessus) ; Et les fiches de lecture sur l'ergonomie, " Documentation sur l'ergonomie ", mises jour sur le site " Web 1901 " : http://www.web1901.org/article18.html

Le portail d'information
Site d'information thmatique ou d'une communaut dfinie, Intranet d'une organisation... un portail d'information peut prendre diffrentes formes. Leur cration est aujourd'hui facilite par la mise disposition de logiciels d'dition coopratifs. Un portail est un site Internet visant offrir un public cibl la palette la plus large possible de ressources et d'informations sur une mme thmatique (environnement, conomie sociale, femmes, etc.). Le principe : constituer un espace virtuel o le visiteur sait qu'il trouvera tout ce qui l'intresse sur un sujet ou, tout au moins, qu'il pourra s'en servir comme porte d'entre vers d'autres sources d'information pertinentes. A ce titre, le portail propose de l'actualit, des dossiers d'information, des espaces de discussion, un annuaire de liens, des adresses utiles, etc. Il deviendra, ainsi, un passage oblig pour le surfeur sur la thmatique traite (voir encadr). Si votre souhait est simplement de prsenter votre structure (activits, membres, statuts, etc.), votre site ne pourra en aucun cas tre considr comme un portail. Dcider de crer un site portail dpend donc, en partie, du statut de votre organisation (tte de rseau, centre de ressources, etc.) ou de votre ambition quant votre prsence sur Internet (traiter un sujet dans son ensemble ou seulement un aspect). En rsum, un site portail est un site ouvert vers l'extrieur qui joue le rle de relais d'information ; il se doit, ce titre, de proposer des liens, et de prsenter ses partenaires ou les acteurs incontournables oeuvrant dans la thmatique traite. Ce positionnement doit tre clairement dfini au plus tt car la construction du site autant que ses modalits de fonctionnement en seront transforms. Exigence et dynamisme Au-del de l'intrt ditorial ou du service qu'il rend, un site portail d'information doit rpondre une certaine discipline en matire de contenu (suivre l'actualit quotidienne sur le thme trait est par exemple indispensable), et surtout des exigences d'interactivit et d'animation. La pertinence et la longvit d'un site portail dpendent des quelques rponses aux questions que le ou les instigateurs du projet Web doivent initialement se poser. La mise plat des objectifs concrets d'un site portail d'information constitue donc la premire tape dcisive de sa cration et de sa gestion. Il est galement important de bien cerner la communaut vise - le public -, l'audience que l'on veut toucher (nophytes, spcialistes, grand public, les trois runis, etc.). Des rponses ces questions dcouleront les moyens techniques et humains mettre en place, afin de ne pas surpasser ou sous-estimer ses objectifs.

304

La technique de cration d'un site portail n'est plus l'affaire de spcialistes. Grce aux logiciels dit de cration participative (voir fiche "Les sites web s'ouvrent la cration participative") gratuits et grand public (Spip par exemple), il est relativement facile de crer de toute pice un vritable site portail dynamique, mis jour sans besoin de connaissance technique pralable par un ou plusieurs rdacteurs la fois. L'utilisation de cette technologie dynamique permet d'instaurer une grande ractivit dans la mise jour de l'information en ligne, pour un volume d'information croissant. Par ailleurs, ce type de site portail dynamique, du plus complexe au plus simple, permet facilement de faire voluer le site sur le plan ditorial, ce qui n'est pas le cas d'un site dit statique dvelopp en page html classique. Interactivit matrise et animation Un site portail d'information n'en serait pas tout fait un si une stratgie d'interactivit n'tait pas mise en place avec les visiteurs. Si les mails et forums sont dsormais incontournables, certains sites vont plus loin en permettant leurs lecteurs d'tre mis au courant de la vie du site, par une lettre de diffusion lectronique (voir fiche "Newsletter, mode d'emploi"). D'autres portails mettent en place une vritable coproduction de l'information. Aprs une simple inscription, chacun peut proposer des articles l'ensemble des rdacteurs, qui valident les textes en fonction d'une ligne ditoriale bien dfinie (voir le site Uzine). Certains moyens techniques permettent, par ailleurs, de dvelopper l'interactivit. Des sites portails, surtout Intranet, permettent, par exemple, de personnaliser les informations selon les centres d'intrts du visiteur. Il convient, ds la phase de cration d'un site portail d'information d'tablir les modes d'animation et de mise jour. En fonction de la taille et des objectifs du site, l'animation peut se rvler un travail important. Il faut tout d'abord assurer le lien avec les visiteurs, en rpondant systmatiquement tous les messages reus. Les forums doivent retenir toute l'attention, et une procdure de modration doit tre mise en place. Classer, grer, structurer, rechercher l'information font aussi partie des tches de l'animateur, plus ou moins fastidieux en fonction du volume d'information. Enfin, la mise en place d'une procdure spcifique (sorte de comit ditorial du site) est ncessaire lorsque le site est mis jour par plusieurs rdacteurs. Un site portail d'information, s'il veut toucher un large public, se doit galement de dployer une vritable stratgie de communication-animation autour de son site et du sujet qu'il souhaite mettre en avant. Le rfrencement, la fidlisation par la lettre de diffusion, les moyens classiques de marketing, feront partie des moyens mis en place pour promouvoir et animer le site portail. Guide des termes du portail et de l'Intranet http://www.admiroutes.asso.fr/webmestre/intranet.htm La charte de participation au site collaboratif Uzine (crateur de Spip) : http://www.uzine.net/article1331.html
Exemples de sites portail

- www.balkans.eu.org, site portail sur l'actualit des Balkans ; - www.educ-pop.org, site portail de l'ducation populaire ; - www.cvotresolidarite.com, site portail de la solidarit, de l'humanitaire, du bnvolat ; - rezo.net, l'autre portail, le site portail des portails ; - www.trictrac.net, site portail des jeux de socit ; - www.mondomix.org, site portail de la musique du monde.

Raliser des tests-utilisateurs sur un site web : comment ?

305

Vous avez fini votre site, vous avez bien sr organis votre information en rubriques et sousrubriques et conu le principe de navigation idoine. Vous avez ralis une charte graphique la fois trs belle et absolument efficace. Toutes les pages sont faites, les liens tests, les pages vrifies sur diffrents navigateurs. Et vous tes convaincu qu'il faut raliser quelques tests utilisateurs (pourquoi ? voir http://www.web1901.org/article96.html, pour corriger la grosse bourde et vous assurer que vos lecteurs s'y retrouvent. Voici comment faire, bien, et pour pas cher. Tout d'abord, il faut faire. Et mieux vaut faire simple, plutt que de ne pas faire du tout. Les prix actuels varient entre 0 et 10 000 euros [1], le plus cher comprenant un studio avec prise de vue vido, salle miroir sans tain pour que l'quipe de conception puisse suivre les tests sans tre vue, enregistrement du mouvement de la pupille de l'internaute et autres fariboles. Restons simples : question finances, vous pouvez prvoir un paquet de carambars et une bouteille de jus d'orange, pour le(s) testeur(s), et ne pas oublier de le(s) inviter au pot de lancement du site. La mthode ci-dessous est largement inspire de la mthode propose par Steve Krug (voir bibliographie), que j'ai pratique moi-mme.

Quand ?
On peut faire des tests n'importe quel moment de la conception et de la ralisation [2]. Ceux que j'ai pratiqus et vous dcris ci-dessous ont t raliss sur des sites termins, juste avant la mise en ligne sur le site de production : les informations n'taient peut-tre pas toutes jour, mais toutes les pages, y compris la page d'accueil, avaient t cres, tous les liens fonctionnaient, et les titres de page taient dfinitifs, de manire ce que le testeur puisse s'assurer d'avoir trouv la bonne page. Si vous voulez faire des tests-utilisateurs en amont, avant la ralisation des pages, voyez l'ouvrage de Steve Krug (en bibliographie).

Choisir les testeurs : combien ? qui ?

5 devraient suffire [3]. Voyez de combien de temps vous disposez : comptez une petite heure par test, plus une autre petite heure, tout de suite aprs, pour rdiger le compte-rendu. Difficile d'en faire plus de deux par jour, surtout si l'on veut corriger une grosse erreur sur le site, entre-temps, afin de pouvoir entriner la correction avec le testeur suivant.

Les testeurs sont choisis dans le(s) groupe(s) de visiteurs vis(s) par le site [4] Tentez de mlanger des pros du web et des utilisateurs hsitants, si vous pensez que votre lectorat sera ainsi. Je dconseille d'embaucher des testeurs qui sont eux-mmes concepteurs de site : ils ont du mal se mettre dans la peau de l'internaute "lambda". Ils font souvent des propositions, bonnes ou pas, pour amliorer le site, mais elles ne concernent pas l'ergonomie (peu de webmestres ont des notions d'ergonomie). Ils s'expriment sous forme de conseils de ralisation, et non sous forme d'hsitations (or, c'est vous qui tirez les conclusions, et justement partir des hsitations). Prvenez les testeurs qu'ils vont tester un site en cours de ralisation, afin que vous puissiez l'amliorer, et que le tout durera environ une heure. Ne leur parlez pas du site avant (ils ne doivent pas l'avoir vu, ou trs peu). Le comportement du testeur
Quoi que vous disiez, il aura l'impression que c'est lui qu'on teste, et non le site. Il est trs important de le mettre l'aise. Comme vous lui dites de parler voix haute, il aura tendance exagrer ses ractions, positives ou ngatives : tenez-en compte.

Le comportement du conducteur de test

306

Soyez patient, ouvert, empathique, sachez couter. Restez calme, silencieux. Tentez de ne pas ragir : il vous faut faire oublier que vous avez quelque chose voir avec la ralisation du site, de crainte que le testeur ne vous dise pas tout, par peur de vous froisser. Soyez convaincu que la personne qui teste fait de son mieux. Souvenez-vous qu'elle exagre ses ractions (pour faire plaisir). Encouragez, rassurez, remerciez. Evitez d'orienter, de diriger, de corriger : notez au contraire avec soin les hsitations. Dtendez-vous. Ne tirez pas de conclusions avant d'avoir ralis 2 ou 3 tests. Notez trs succintement pendant le test le parcours du testeur, pour suivre l'volution de son utilisation des outils de navigation. Notez les points positifs, et surtout les hsitations, les propositions, les reproches, les informations non trouves Notez les questions du testeur pour y rpondre la fin, question de politesse.

En fait, il faut tout la fois discuter un peu avec le testeur, le dtendre, suivre attentivement son parcours dans le site et prendre des notes : a marche quand mme mieux deux, o le deuxime, prpar la chose, n'intervient absolument pas, mais prend des notes. Il aura galement le temps de choisir les questions poser lors du "parcours impos". J'ai toujours pris comme second une personne qui avait collabor la conception du site : ainsi, en cas de grossire erreur sur le site mise jour par le testeur, on est deux porter le poids de la faute, donc on s'nerve moins contre le testeur. Prparation du test
Les tests comprennent deux parties, pour le testeur. Tout d'abord, dix minutes de "parcours libre", o le testeur se balade son gr dans le site. Puis dix minutes de "parcours impos", o vous lui demandez de trouver, partir d'une liste de questions prpare l'avance, des informations trs prcises, sur ce mme site : le tlphone de la secrtaire, le rapport d'activit de l'anne dernire, la dernire campagne de l'association, comment devenir membre donateur

Prparez tout d'abord un questionnaire avec les questions de base (voir plus loin "Dterminer le profil du testeur"), puis rdigez une liste de questions, c'est--dire d'informations trouver pour le "parcours impos". Prvoyez-la vaste, de manire pouvoir choisir les plus pertinentes, selon le profil du testeur et ce que vous en aurez appris durant le "parcours libre". On tchera de choisir des informations que l'internaute a rellement envie de trouver : vous serez tonn de la diffrence de performance du testeur, dnicher une information qui l'intresse personnellement, d'une autre "pour vous faire plaisir". Pour chaque test, vous aurez donc porte de main un exemplaire du questionnaire remplir (cf. par. "Quelques questions"), et un exemplaire de la liste de questions, o vous cocherez au fur et mesure celles que vous jugez pertinentes pour la seconde partie du test. Les conditions matrielles
Choisissez un lieu paisible, sans tlphone ni curieux. Prvoyez un ordinateur avec plusieurs navigateurs, pour utiliser celui dont l'internaute a l'habitude.

Vrifiez que le site de test fonctionne, mais ne l'affichez pas tout de suite. Prvoyez un signet menant au site tester, pour pouvoir l'afficher plus vite. S'il s'agit d'une refonte, affichez l'ancien site : ce sera peut-tre intressant que le testeur, s'il connat l'ancienne version, vous explique ce qu'il y aimait et ce qu'il y dtestait, ou tout simplement ce qu'il y
307

utilisait ou n'y avait jamais trouv. Vous pourrez aussi lui demander, aprs le test, en quoi le nouveau site est mieux. Droulement du test
- Premire tape : mise l'aise

Le testeur doit tre l'aise ; les remarques durant l'entretien seront faites pour dtendre l'atmosphre (et non pour engueuler). Voici le petit speech que je dlivre, en tout dbut d'entretien : "Bonjour, je suis Eve Demazire. Nous allons tester un site pour voir si il est facile utiliser, si on y retrouve bien l'information qu'on y cherche. "C'est le site que nous testons, pas vous, ni vos capacits utiliser le web. Vous ne pouvez donc pas vous tromper, ni faire d'erreurs. "Ce n'est pas vous qui tes jug, ni votre capacit utiliser l'informatique ou le web, mais le site. Tout ce que vous direz sera utilis pour amliorer le site. "Nous avons besoin de savoir exactement ce que vous pensez : n'ayez pas peur de nous blesser. Je vais au contraire vous demander de penser tout haut, afin de prendre des notes. "N'hsitez pas poser des questions : peut-tre n'y rpondraije pas tout de suite, car ce qui m'intresse c'est de voir comment se dbrouillent les gens sans aide, mais je les noterai et y rpondrai en fin d'entretien. "Je vais vous poser quelques questions pour dterminer votre profil et remplir un questionnaire. Celui-ci est anonyme : ce qui est intressant, c'est votre profil (ge, profession, pratique du web), pas votre nom ni votre numro de scu. "Des questions ? - Deuxime tape : dterminer le profil du testeur Faites remplir le questionnaire : Profession, ge : permet d'approcher quelque peu la relation du testeur avec l'internet. Relation avec l'association l'origine du site (employ, militant, curieux) : permet de cerner la connaissance de l'information, et le type d'information qui sera recherche sur le site. Quelle utilisation du web ? Combien de temps ? Pour quoi faire ? O (maison - bureau) ? Quel navigateur ? Sites favoris ? A dj ralis des sites web (ou particip la ralisation de sites) ? Dans le cas d'une refonte de site : Quelle utilisation du site actuel de l'assocation ? Quels besoins ? Quels problmes ? - Puis expliquez que le test consiste en deux tapes : Un parcours libre (environ 10 mn), puis un parcours impos, o il lui sera demand de rechercher des informations prcises. Bien sr, parmi la liste des questions que vous avez prpares, vous pouvez dj cocher celles qui l'intressent. J'insiste : on trouve mieux et plus vite quelque chose dont on a besoin ! Et en gnral, l'internaute va sur le web pour trouver une information prcise, dont il a besoin.
308

- Troisime tape : parcours libre (10 min) Affichez le site et rappelez quelques principes du test : "Pensez tout haut". "Regardez et dites-moi ce que vous voyez et o vous pouvez cliquer" (pour obtenir une information supplmentaire) "O allez-vous aller maintenant, et pour obtenir quoi ?" But de ce parcours libre = est-il facile de dterminer quoi sert le site ? (= "qu'est-ce que je vais y trouver") et comment il marche ? (= "o est-ce que je vais pouvoir trouver les informations dont j'ai besoin") - Quatrime tape : parcours impos (10 min) "Pouvez-vous trouver ces informations ?" 4 ou 5 questions, choisir dans votre liste, durant le questionnaire initial et le parcours libre. Ne laissez pas le testeur chercher trop longtemps ce qu'il ne trouve pas, cela risque de le dcourager pour les questions suivantes. Laissez-le donner sa langue au chat, et soyez brave, rpondez-lui. Notez les questions poses, et la facilit/difficult trouver l'information. - Conclusion Avant de le mettre la porte ("il n'a vraiment rien compris du tout mon uvre, l'abruti"), prenez-le temps de dire votre testeur : "Avez-vous des remarques, des commentaires sur le site, faire ?" "Merci d'avoir particip."

Rdaction du compte-rendu
Pour chaque test, rdigez immdiatement le compte-rendu, car les impressions glanes au cours d'un test sont trs riches, et pleines de dtails, vous risquez d'en oublier (ne serait-ce que par intrt personnel). 1 ou 2 feuillets, maximum.

Le compte-rendu reprend les rponses au questionnaire-profil du testeur, plus une apprciation de l'aisance manier le web. Puis vous pouvez regrouper vos notes en : "aspects positifs", "aspects ngatifs", "amliorations apporter". Soyez le plus prcis, le plus concret possible, dans votre rdaction. Les pros du test-utilisateur dnombrent trois types d'erreur, de la part du concepteur : les trs graves, celles qui empchent de trouver l'information (l'internaute se fait une fausse ide de la navigation, et finit perdu) ; les embtantes, qui gnent ou ralentissent l'accs l'information : si l'utilisateur s'en sort quand mme et
309

contourne la difficult, ne vous y attardez pas ; les considrations mineures, d'ordre esthtique. Si certains points sont graves, tentez de les corriger avant le testeur suivant, afin de vrifier que la correction va dans le bon sens. Bilan
On reprend tous les tests, on fait une liste des bons points (a peut servir "communiquer" sur le site, car ces points ont t jugs positifs par les utilisateurs, et non par le concepteur) ; on fait la liste des points amliorer, et on les amliore. Ne cherchez pas modifier les cueils que les testeurs surmontent seuls, et vite. Et prenez enfin le temps d'admirer votre uvre : maintenant qu'elle est passe au filtre de l'utilisateur, vous pouvez la mettre en ligne.

Bibliographie
Don't make me think, de Steve Krug, d. Paperback. Traduit en franais sous le doux nom de "Zro prise de tte", d. Dunod, 202 pages, 28,24 EUR. Voil un livre court et efficace sur l'ergonomie. Les trois derniers chapitres sur les tests sont excellents (pourquoi il faut absolument tester, quand, et comment faire pas cher). Avec ce livre, vous comprenez tout et vous tes tir d'affaire.

Si vous voulez trouver de l'info (en anglais) sur le web, tapez "user testing" sur votre Google favori. Voici une rapide slection : "Why You Only Need to Test With 5 Users", du gourou de l'ergonomie Jakob Nielsen : http://www.useit.com/alertbox/20000319.html (en anglais) "Usability testing" : les tests-utilisateurs prsents par une web agency de San Francisco, http://www.gotomedia.com/seattle00/usability/ (en anglais) Un article d'une autre gourou de l'ergonomie, Jennifer Fleming : http://www.ahref.com/guides/design/199806/0615jef.html Sur le site "Usable Web" (un portail proposant des liens sur le thme de l'ergonomie), une page de liens vers des articles sur les tests-utilisateurs : http://usableweb.com/topics/000878-0-0.html. L'auteur prcise dans son site qu'il a cess en 2001 d'ajouter des liens (mais qu'il maintient jour leur validit) : mais le temps que vous ayez tout lu... [1] Voir (en anglais) : http://www.gotomedia.com/seattle00/usability/basics/basics3.html, les prix aux Etats-Unis [2] Pour une description des diffrents tests diffrentes tapes de dveloppement du site, voir Steve Krug, Don't make me think (cf. bibliographie) [3] "Why You Only Need to Test With 5 Users", du gourou de l'ergonomie Jakob Nielsen : http://www.useit.com/alertbox/20000319.html (en anglais) [4] La dfinition du (des) public(s) fait partie de la conception du site. Cf. "Conception, suivi et animation d'un site web associatif" > "Quelles informations pour quel public" : http://www.internatif.org/eve/serveurs/3_1.html.

Raliser des tests-utilisateurs sur un site web : pourquoi ?

Vous avez fini votre site, vous avez bien sr organis votre information en rubriques et sousrubriques et conu le principe de navigation idoine. Vous avez ralis une charte graphique la fois trs belle et absolument efficace. Toutes les pages sont faites, les liens tests, les pages vrifies sur
310

diffrents navigateurs : bref, a suffit, il est temps de mettre en ligne. Non ? Non ! Il est temps de raliser quelques "tests-utilisateurs", pour corriger la grosse bourde et vous assurer que vos lecteurs s'y retrouvent. Voici pourquoi. Le "Voici comment" est trait dans l'article "Raliser des tests-utilisateurs sur un site web : comment", en http://www.web1901.org/article97.html Remerciements : Catherine Letondal., pour sa sensibilit aux utilisateurs ("le souci de l'utilisateur, chez les informaticiens, c'est bien une proccupation de femme") ; Don't make me think, de Steve Krug, qui rend les choses simples [1] ; Les diffrents testeurs qui ont bien voulu me confier leur perplexit devant mes sites. Intuitif (Larousse 2002) : qui procde par intuition. Intuition : 1. Perception immdiate de la vrit, sans l'aide du raisonnement. 2. Facult de prvoir, de deviner. Foi d'ergonome, l'intuitivit, a n'existe pas, sur le web. Le travail d'un bon concepteur de sites est justement de rendre rapide et facile le travail de comprhension, puis d'appropriation du site web, de son principe de navigation et de l'organisation de l'information, jusqu' la russite totale : l'internaute qui pense "pour obtenir telle information, il faut que je clique ici", qui clique, et qui trouve l'information laquelle il s'attendait. Les tests-utilisateurs sont l pour a : ils vous permettent de vrifier que votre site est clair, comprhensible et facilement utilisable, en observant attentivement comment des utilisateurs internautes, extrieurs votre projet, y naviguent. Il faut tout d'abord comprendre, et vous n'chapperez pas cette premire surprise, que personne n'utilise un navigateur web de la mme manire : certains ne font confiance qu'au bouton "back", pour retrouver leur chemin, d'autres utilisent systmatiquement la navigation de bas de page [2], lorsqu'ils arrivent la fin du texte, et non celle du haut, que vous avez tellement peaufine. L'valuation de la fonction des espaces graphiques est galement tout fait personnelle, et pas toujours matrisable : l'espace "Nouveauts" que vous avez plac en page d'accueil, sera parfois utilis comme barre de navigation globale, parce qu'il propose des liens, et qu'il a t immdiatement repr par l'utilisateur. Cette appropriation individualise est indpendante de l'ge de l'utilisateur ou de sa matrise du navigateur et du web en gnral. Un internaute aguerri (et plus encore un concepteur de sites) aura uniquement comme avantage qu'il cherchera la logique de votre site, la trouvera (s'il y en a une) et la mmorisera plus vite et plus srement qu'un apprenti-surfeur. En rsum, l'internaute ne fait pas (souvent, toujours) ce que vous aviez prvu qu'il ferait : soyez humble, restez zen Rptez avec moi : "c'est lui qui a raison, c'est lui qui a raison, c'est lui qui a raison" Il faut donc, lors de la phase de conception, penser aux diffrentes pratiques des internautes, dbutants ou dbrouillards, mais aussi aux lecteurs qui viennent pour la premire fois, et ceux qui reviennent chercher une information prcise ou utiliser une fonctionnalit utile qu'ils veulent trouver tout de suite, sans perdre de temps. L'ergonomie consiste en faire que les chemins mnent tous Rome, mme ceux auxquels on n'a pas pens. Il faut multiplier en somme les accs tout en simplifiant le principe gnral. Elmentaire Il va falloir tout recommencer ?
Personne donc n'utilise votre navigation de la mme manire. On ne saurait penser tout, mais rassurez-vous : les plus grosses incomprhensions apparaissent ds les trois premiers testeurs. Si l'architecture de votre site a t rflchie, et la navigation cre en consquence, les tests-utilisateurs ne mnent pas tout recommencer : il s'agit uniquement de corriger le tir sur certains dtails (qui peuvent tre d'importance). 311

Les pros du test-utilisateur dnombrent trois types d'erreur, de la part du concepteur : les trs graves, celles qui empchent de trouver l'information (l'internaute se fait une fausse ide de la navigation, et finit perdu) ; les embtantes, qui gnent ou ralentissent l'accs l'information ; les considrations mineures, d'ordre esthtique. Il faut rapidement corriger les premires, avant la fin des tests, pour vrifier avec les derniers testeurs que la bourde a t correctement rpare. Les secondes ? Si vous avez une solution simple, allez-y. Sinon, tant que l'internaute trouve l'info Pour les troisimes, coutez votre cur. Deux exemples : Dans le cas cit plus haut, de l'encadr "Nouveauts" trop grand, en page d'accueil, qui tait pris pour la navigation, la solution a t trs simple. Il a suffit d'en diminuer la taille, de dcider qu'il ne contiendrait que trois informations, et jamais plus, et de modifier le titre ("Dernire infos !") pour renforcer l'ide d'un espace spcialis. Les deux premiers testeurs s'y tant tromps, la modification a t ralise avant le troisime, et plus jamais la confusion n'a t faite. C'tait un gros handicap, qui n'a demand qu'une page modifier = 15 minutes de travail. Dans un autre site, toutes les pages d'accueil de rubriques comprenaient, outre la navigation vers les sous-rubriques en dpendant, un texte de prsentation dcrivant justement le contenu de ces sousrubriques. Le lecteur, tout heureux de s'arrter lire et curieux du reste, cherchait dsesprement les liens hypertextes dans le contenu (ben oui, comme certains liens ne sont plus souligns, et mme plus d'une autre couleur, on promne le curseur partout en cliquant nerveusement pour dnicher les liens). Or le texte n'en proposait pas, puisque les sous-rubriques taient clairement tablies, juste au-dessus du titre : m'enfin, y faut quand mme pas exagrer, s'tait dit le concepteur ! Et bien si, il faut exagrer, et remettre des liens dans le contenu, voire veiller ce que le texte de prsentation permette bien de proposer toutes les sous-rubriques. Encore un cueil important, pour l'internaute, qui ne trouvait pas ce qu'on lui promettait : 6 rubriques = 6 courts textes vrifier et mailler des liens adquats = 45 minutes de travail. Ces erreurs taient de type 1, de celles qui peuvent faire natre un sentiment d'chec chez votre lecteur, et la solution a t mise en place en moins d'une heure. Le parcours du combattant en 30 minutes
On peut envisager de faire des tests-utilisateurs diffrents stades de la rflexion, du dveloppement du site [Vous trouverez la description de ces differents tests dans Steve Krug, Don't make me think.]. Les tests que j'ai raliss ont eu lieu lorsque le site tait termin. Ils ont dur en moyenne 30 minutes (voir article suivant, "Raliser des tests-utilisateurs sur un site web : comment ?" en http://www.web1901.org/article97.html ). Ils comprenaient deux parties, pour le testeur. Tout d'abord, dix minutes de "parcours libre", o le testeur se balade son gr dans le site. Puis dix minutes de "parcours impos", o vous lui demandez de trouver, partir d'une liste de questions prpare l'avance, des informations trs prcises, sur ce mme site. Par exemple, pour un site associatif : le tlphone de la secrtaire, le rapport d'activit de l'anne dernire, comment participer la prochaine campagne de l'association, comment devenir membre donateur (On tchera de choisir des informations que l'internaute a rellement envie de trouver.)

Que se passe-t-il en 1800 secondes chez le cobaye-testeur ? Comme vous l'y avez incit, le testeur se met l'aise, et manifeste sa bonne volont. Vous lui avez dit que c'tait permis, voire obligatoire, donc il profite du "parcours libre" pour se promner comme il veut dans votre site, tout d'abord au hasard, puis de manire plus planifie. J'ai remarqu que son approche du site se faisait en plusieurs tapes :
312

1. Dans un premier temps, il clique et suit des liens (il a d bien sr tout de suite reprer comment se matrialisaient ceux-ci), et lit un peu l'information. Il utilise donc tout la fois l'espace de navigation et l'espace de lecture. L'espace de navigation lui sert, au dbut, uniquement de rservoir texte soulign/liens hypertexte, pour aller ailleurs. Bref, il clique sur tout ce qui bouge, et lit un peu. 2. Peu peu, il tente de se faire une reprsentation de l'organisation de l'information (pour s'y retrouver). Il travaille tablir les liens entre la proposition que lui fait la navigation et le contenu l'autre bout du lien : "Et si je clique ici, est-ce que je vais bien obtenir a ?" 3. Puis il vrifie que sa reprsentation "fonctionne" (qu'elle se reproduit, et qu'il peut deviner ce qu'il y a derrire un lien). Il labore un schma de structure de l'information et le teste : il utilise maintenant l'espace de navigation pour s'y retrouver. "a marche !" 4. Si le schma est stable, rptitif, fonctionnel, et lui permet de trouver une information prcise, il l'adopte ; s'il est suffisamment simple, il le mmorise. " a y est, j'ai compris : c'est simple !" 5. Puis il oublie le schma, en le mettant en pratique : c'est drlement "intuitif", hein ! La preuve, vous pouvez tout fait demander votre testeur, lors du "parcours impos", de retrouver une page qu'il a vue lors de sa promenade "libre" : s'il n'a pas compris et appris votre principe de navigation, ce n'est pas sr qu'il la retrouve, car cela met en uvre un tout autre type de conduite (trouver sciemment, en raisonnant, au lieu de rencontrer par hasard). Convaincu ? Voyez donc comment faire, sans avoir louer un studio d'enregistrement Los Angeles, dans l'article "Raliser des tests-utilisateurs sur un site web : comment ?", en http://www.web1901.org/article97.html

Bibliographie
Don't make me think, de Steve Krug, d. Paperback. Traduit en franais sous le doux nom de "Zro prise de tte", d. Dunod, 202 pages, 28,24 EUR. Voil un livre court et efficace sur l'ergonomie. Les trois derniers chapitres sur les tests sont excellents (pourquoi il faut absolument tester, quand, et comment faire pas cher). Avec ce livre, vous comprenez tout et vous tes tir d'affaire.

Si vous voulez trouver de l'info (en anglais) sur le web, tapez "user testing" sur votre Google favori. Voici une rapide slection : "Why You Only Need to Test With 5 Users", du gourou de l'ergonomie Jakob Nielsen : http://www.useit.com/alertbox/20000319.html (en anglais) "Usability testing" : les tests-utilisateurs prsents par une web agency de San Francisco, http://www.gotomedia.com/seattle00/usability/ (en anglais) Un article d'une autre gourou de l'ergonomie, Jennifer Fleming : http://www.ahref.com/guides/design/199806/0615jef.html Sur le site "Usable Web" (un portail proposant des liens sur le thme de l'ergonomie), une page de liens vers des articles sur les tests-utilisateurs : http://usableweb.com/topics/000878-0-0.html. L'auteur prcise dans son site qu'il a cess en 2001 d'ajouter des liens (mais qu'il maintient jour leur validit) : mais le temps que vous ayez tout lu...

[1] voir la bibliographie en fin d'article. [2] La navigation du bas, en texte seul, tait pour moi une survivance du temps o l'on faisait des navigations tarabiscotes, avec des images, et o on offrait aux "pauvres" coupant le chargement d'images
313

pour conomiser la note de tlphone, une navigation alternative plus lgre, mais en bas de page. M'apercevoir que certains internautes n'utilisent pratiquement que a, pour naviguer dans un site, a t l'une de mes plus fortes commotions, lors de mes premiers tests. Je mets donc dsormais partout des navigations "texte seul" en bas de page.

Documentation sur l'ergonomie

L'ergonomie commence, depuis 2001, faire parler d'elle, particulirement avec l'as de la communication, Jakob Nielsen, spcialiste de l'ergonomie sur le web. Voici les ressources que nous apprcions. La prsentation de l'ergonomie par un ergonome : http://www.lergonome.org/dev/pages/article_1.asp Pour ceux qui lisent l'anglais : Un livre amusant et pdagogique sur l'ergonomie : "The Design of Everyday Things", de Donald A. Norman, The MIT Press, 1998. Plein d'anecdotes tordantes sur pourquoi vous n'avez jamais pu faire marcher votre magntoscope, et comment vous vous tes bouillant l'htel, la dernire fois que vous avez tent de comprendre comment fonctionnaient les robinets ultra-modernes de la baignoire. Ces principes fondamentaux d'ergonomie sont dcliner pour les sites web. Actuellement puis en franais, en anglais uniquement. En franais, un peu : Jakob Nielsen, "Conception de sites Web - L'art de la simplicit", Campus Press - juin 2000 - 420 pages - 249,00 FF. Jakob Nielsen est le gourou actuel de l'ergonomie. Comme tous les gourous, il a ses dtracteurs ("Nielsen parle de tout, d'un ton trs assur, mme de ce qu'il ne connat pas") et ses admirateurs ("Nielsen parle simplement de tout ce qu'il faut savoir"). Pour ma part, je trouve que M. Nielsen ne devrait pas se mler de graphisme, parce qu'il n'y connat rien et dit des btises, mais aussi que son bouquin est simple comprendre (allez, j'avoue : j'y ai mme trouv une ou deux ides, si, si), mme s'il dlaie beaucoup. Et puis surtout M. Nielsen prne un web simple et efficace. Ne vous laissez pas influencer par le mot "ergonomie", ses conseils sont de bon sens, accessibles tous. Voil pourquoi je l'ai class dans les documents "gnriques". Si vous lisez l'anglais, consultez de temps en temps son site : http://www.useit.com/ "Don't make me think", de Steve Krug (traduit sous le doux nom de "Zro prise de tte", d. Dunod, 202 pages, 28,24 EUR). Les mmes thmes sont repris, mais sous un autre angle, ce qui fait toujours du bien. C'est plus amusant, plus condens, plus efficace, mais aussi bien moins dtaill que Nielsen (voir cidessus). Par contre, les trois derniers chapitres sur les tests sont excellents (pourquoi il faut absolument tester, quand, et comment faire pas cher). Le site de Vincent Bnard, Veblog, se dfinit comme un centre de "ressources pour russir des projets internet centrs sur les besoins de leurs utilisateurs". Trs intressant. http://www.veblog.com/ Lisez, par exemple, cet article sur "Le temps de chargement : une question moins simple qu'il n'y parat", plein d'explications et d''excellents conseils : http://www.veblog.com/fr/2002/0304-temps-chargement.html
314

Le site de Ergoweb (site canadien en franais) fournit, dans sa rubrique "Outils", une intressante liste de dfinitions de terme, et donc d'objectifs : "valuation heuristique", "Critres ergonomiques", "Tests d'utilisabilit"... http://www.ergoweb.ca/ Patboulard suggre de citer le travail d'ergonomes franais sur le site "L'ergonome" : http://www.lergonome.org/dev/pages/home.asp En dernier, car tout le monde ne parle pas anglais, voici les sites de deux ergonomes tats-uniens, pointus et tout la fois comprhensibles. J'ai dj parl de Jakob Nielsen : http://www.useit.com/. Il y a aussi Keith Instone : http://user-experience.org/ .

315

ANNEXE 5 : CAHIER DES CHARGES SITE INTERNET

PRESENTATION DE LENTREPRISE ................................................................... 316 PRESENTATION DU PROJET ................................................................................ 316 2.1 RLES ..................................................................................................................... 316 2.2 OBJECTIFS DU SITE .................................................................................................. 317 2.3 A QUI SADRESSE LE SITE ........................................................................................ 317 2.4 CONTENUS .............................................................................................................. 317 2.5 ARBORESCENCE ...................................................................................................... 317 3 PRESTATIONS ATTENDUES .................................................................................. 317 3.1 CHARTE GRAPHIQUE ET CHARTE DITORIALE.......................................................... 317 3.2 CRATION ET RCUPRATION DE CONTENUS ........................................................... 318 3.3 DVELOPPEMENT .................................................................................................... 318 3.4 MAQUETTE DU SITE ................................................................................................. 318 3.5 DPT DU NOM DE DOMAINE ET ADRESSES MAIL .................................................... 318 3.6 HBERGEMENT ....................................................................................................... 318 3.7 RFRENCEMENT .................................................................................................... 319 3.8 MISES JOUR .......................................................................................................... 319 3.9 STATISTIQUES DE CONNECTIONS ............................................................................. 319 4 LIVRABLES ATTENDUS .......................................................................................... 319 5 PROPRIETES ET DROITS ....................................................................................... 320 PRESENTATION DE LENTREPRISE Dans cette partie, prsentez votre entreprise en indiquant : - son historique, - sa taille (CA et nombre de salaris), - Ses activits principales, - Produits et services vendus. Indiquez au prestataire que dans le cadre de cette consultation, vous souhaitez que sa proposition vous parvienne avant une date que vous fixez. PRESENTATION DU PROJET Indiquez ici, dun point de vue gnrale, ce que vous attendez de ce site. Exemples : - faire connatre lentreprise, - vendre vos produits sur internet, - donner vos clients des conseils sur vos produits ou services, - gnrer des contacts de nouveaux prospects. Indiquez galement la date laquelle vous souhaitez que le site soit en ligne. Rles Indiquez ici comment seront rpartis les rles entre votre entreprise et le prestataire. Rle de votre entreprise : - valider les phases de choix (graphisme, ergonomie, contenus), - valider le respect du cahier des charges, - veiller au respect des dlais, - fournir les contenus de base (textes, plaquettes, logos, images, photos). Rle du prestataire :
316

1 2

concevoir et raliser le site internet, respecter les dlais, Proposer un planning de ralisation en accord avec le client.

Objectifs du site Indiquez les principales orientations du site : - site de vente, - site dinformation, - support de communication, - support de fidlisation, - Indiquez les principaux rsultats attendus : - chiffre daffaire souhait dans le cas dun site de vente, - nombre de nouveau prospects, - amliorer limage de lentreprise - A qui sadresse le site Notez ici le nombre de cibles diffrentes et les hirarchiser. Pour chacune : - caractristiques de la cible (entreprise, particulier, tudiant, retrait), - importance de la cible (primaire, secondaire), - centres dintrts de la cible (recherche dinformations, besoins de services) Contenus Dcrivez les contenus que vous fournissez (image, photos, textes, lment scanner). Indiquez aussi leurs formats (formats informatiques des images, textes, photos et formats physique : diapositives, textes papier). Les volumes sont mentionner dans cette partie : - nombre total de pages estimes pour le site, - nombre de photos et images, - tailles des bases de donnes et des fichiers informatiques. Arborescence Proposez une arborescence pour montrer larchitecture du site telle que vous limaginez. Celle-ci sera prsente sous forme schmatique avec les rubriques principales, les sous-rubriques et les liens qui les unissent. Exemple darborescence :
Accueil

Rubrique1

Rubrique2

Rubrique3

Rubrique4

Script

html Base de donnes

PRESTATIONS ATTENDUES Charte graphique et charte ditoriale Demandez au prestataire :

317

recherche graphique et iconographique, recherche dun systme de navigation (schma des diffrentes navigations possibles dans le site), propositions de mise en page et de charte ditoriale.

Cration et rcupration de contenus Demandez au prestataire : - adapter une prsentation web les contenus fournis, - numriser les donnes qui sont ncessaires, - crer les lments graphiques (fond de page, boutons, icnes). Dveloppement Spcifiez si dans le site, il faut des lments qui font appel de la programation et des bases de donnes. Exemples : - moteur de recherche interne au site, - formulaire de collecte dinformation, - boutique lectronique, - sondage, - quizz, - gestion automatique dactualits, - interface de mise jour du site, - Autre point, exigez du prestataire que les langages utiliss pour les dveloppements soient standards (exemples : php, java, xml). Demandez la fourniture dune documentation technique commentes des codes informatiques. Maquette du site Le but de la maquette est de vrifier que le site est conforme aux objectifs. Elle permet galement de valider la navigation dans le site. Elle doit tre ralise avec des liens statiques en HTML pour simuler laffichage de tous les types de contenus. Dpt du nom de domaine et adresses mail Indiquez ici le type de nom de domaine que vous souhaitez dposer (.fr, .com, .net) et le nombre. Demandez au prestataire : - dposer le nom de domaine auprs de lorganisme comptent, - indiquer le montant de la redevance annuelle pour chacun des noms de domaine. Cas particulier : vous tes dj propritaire dun nom de domaine. Prcisez au prestataire de se charger du transfert du nom de domaine auprs de lhbergeur du site. Hbergement Indiquez au prestataire la dure souhaite de lhbergement. Demandez les conditions de rsiliation ventuelles. Le prestataire hbergera-t-il le site dans sa structure ? Si non, o sera hberg le site. Demandez le dtail de linfrastructure dhbergement : - la liste des sites dj hbergs sur ses serveurs, - le nombre de connexions par jour actuellement constat sur ses serveurs, - larchitecture des serveurs dhbergement, - larchitecture et le dbit de son lien avec linternet, - les redondances mises en uvre pour assurer la continuit du service, - les ressources et outils dadministration utiliss, - le service de hot line client, - la protection des pages et applications hberges, - la bande passante partage disponible,
318

lespace disque attribu, la priodicit des sauvegardes, fourniture dune situation rgulire prsentant la disponibilit du site hberg comportant notamment les coupures de services, taux de disponibilit du site, pnalit en cas de dpassement de ce taux de disponibilit, dlai de rtablissement en cas de coupure de service, pnalit en cas de dpassement de ce dlai.

Rfrencement Indiquez au prestataire les lments quil devra raliser : - Pour les moteurs de recherche : - mots cls du site, - descriptif du site, - texte index. - Pour les annuaires : - catgorie choisie, - description. - Liste des annuaires et moteurs slectionns. Eventuellement, demandez une prestation de suivi de rfrencement, en indiquer la dure, la frquence des rapports de positionnement et la rinscription dans les moteurs et annuaires lorsque cela sera ncessaire. Mises jour Demandez au prestataire dindiquer les moyens mis la disposition pour mettre jour les pages du site. Exemple : accs FTP, interface de mise jour par le web, logiciel acqurir. Demandez, si ncessaire, une formation loutil de mise jour. Dans le cas o le prestataire effectuera lui-mme les mises jour, demandez la tarification. Statistiques de connections Demandez au prestataire un accs en ligne aux statistiques de frquentation du site. Celles-ci doivent comprendre : - nombre daccs visiteurs, - mots cls taps par les internautes, - moteurs et annuaires de provenance, - nombre de visites, - pages visites, - provenance gographique des internautes, - jours et tranches horaires des visites, - types de navigateurs utiliss, - fournisseurs daccs dorigine. LIVRABLES ATTENDUS Les pices livrer par le prestataire internet pendant et aprs la ralisation du site sont les suivantes : - planning de ralisation avec un engagement sur la date de mise en ligne, - arborescence dtaille du site, - fichiers informatiques source (pages HTML, graphismes, bases de donnes, programmes) - documents dcrivant le site, son fonctionnement et son hbergement, - version du code HTML utilis, - version des navigateurs compatibles, - preuves des dclarations (rcpiss CNIL, copies dcrans des dclarations annuaires et moteurs, fiche descriptive du nom de domaine), - identifiant et mot de passe pour accder au serveur.
319

Tous ces livrables peuvent tre demands sur CD-Rom. PROPRIETES ET DROITS Prcisez que vous acqurez la proprit de lensemble des images, graphismes, icne et autres contenus crs pour le site.

320