24 H POUR CRER MON SITE WEB

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

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

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

24 H POUR CRER MON SITE WEB

Joomla! 1.5

Ou on parlera dergonomie, de gestion de contenu et de graphisme, en passant par les bases de lhtml

Version Joomla! de ce syllabus: Joomla! 1.5

ASBL Arcade Wallonie 2009

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Au fil du temps
0 MI N UTE 1 1 3 HEURES 70

Tous ensemble .

Notions dhtml.

HEURE 4

1 4

HEURES 91

Installation en local ou sur un serveur.

Test 4 dhtml cration dune page basique.

HEURES 10

1 5

HEURES 92

Dcouverte du site dexemple.

Notions de CSS.

HEURES 13

1 6

HEURES

Personnalisation du cms Joomla! 1.5.

Test de CSS cration dune page basique avec une feuille de style. 94

HEURES 33 1 7 HEURES 95

Extensions: dcouverte.

CSS gestion des menus par lexemple. 5 HEURES 35 1 8 HEURES

Rflexion et conception.

Atelier et questions. 6 HEURES 50 1 9 HEURES

96

Arborescence et ergonomie.

Modifications en profondeur du template. 7 HEURES 56 2 0 HEURES

97

Identit du site et charte graphique.

Atelier structure. 8 HEURES 58 2 1 HEURES

103

Croquis, et recherches graphiques.

Atelier CSS. 9 HEURES 59 2 2 HEURES

104

Recherche et installation dun template.

Questions frquentes. 1 0 HEURES 61 2 3 HEURES

107

Rvision et sance de questions.

Sance de prsentation au groupe: 1 1 HEURES 62 2 4 1 2 HEURES HEURES 109 critiques et autocritiques. 108

Les images pour le Web, les formats.

Modifications et valuation finale.

Installation du template: modifications des images. 68 QUEL QUE S Bote outil MI N UTES DE +

Une ralisation de lASBL Arcade Wallonie - 2009

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[0] Premire minute, premires notions

Tous ensemble .

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

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

0 .1 Ralisation dun portfolio personnel Ce support de cours a t revu et corrig avec lapparition de la version 1.5 du cms Joomla!, il est prvu, la base, pour des graphistes et est bas sur un exercice: la cration dun portfolio reprenant des travaux dans une galerie, une prsentation, un CV et un formulaire. Cet exercice peut bien sur tre dclin sur tout autre projet. Il est indispensable dassister la formation, car dautres notions seront donnes en fonction du droulement des ralisations!

HEURE dapprentissage de test dexercice de rvision

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Pr requis souhaits: Matriel requis:

html, feuille de style (CSS), traitement de limage, traitement de texte. Un ordinateur rcent et une bonne connexion ADSL. Dreamweaver, Photoshop, Illustrator Adobe et Gimp.

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[1] Premire heure

Installation en local ou sur un serveur .

Y
H E U R E

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

1.0 En rsum dapprentissage de test dexercice de rvision La connaissance directe des codes de manipulation est moins importante que dans les dbuts de lapparition de lInternet dans les annes 1990. Cependant linstallation distante de Joomla! et la mise en ligne votre de celuici require une certaine mthodologie. Comprenant que la technologie et le langage Web peuvent vous paratre impntrable, nous avons synthtis ci-dessous ce processus. Une vido explicative vient appuyer ce propos.

1.1 Deux pr requis imposs pour une installation de Joomla! Lhbergeur choisi, quil soit gratuit ou non, doit rpondre imprativement aux prs-requis suivants: 1. 2. vous donner accs une base MySQL supporter le moteur de script PHP Site officiel de My SQL: www.mysql.fr 1.2 Configuration du client ftp Aprs avoir install un client FTP (http://www.01net.com/index.html), vous devrez avoir sous la main, les paramtres de connexion fournis par lhbergeur: Nom dhte (le nom du serveur FTP de votre hbergeur), par exemple: ftp.boat.be Nom dutilisateur (ou login): ivan Mot de passe: xxxxxxxxxxx

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

6.

Seconde page d'installation, cette tape est effectu un contrle de la configuration du serveur Web. Si tout est vert, c'est bon signe! Le fichier configuration.php doit tre prsent la racine du site et en mode criture.

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

8.

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

9.

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[2] Deuxime heure

Dcouverte du site dexemple

O
H E U R E

ups!: front-end, back-end, plugins, modules, composants Dans quelle galre, me suis-je embarqu? Partons vaillamment la dcouverte de ce merveilleux outil, qui mal gr peut rapidement devenir une usine gaz. Nous nous efforcerons au fil de cette formation de mettre en avant le cot pratique et utile de ce cms . Usine gaz: loc. f. [Argot] Dans les annes 1950, ce terme dsignait un ordinateur, qui occupait en gnral 500 m2 de surface au sol et pesait 30 tonnes. Dsormais, c'est un norme logiciel contenant des centaines de fonctions pas toujours indispensables et parfois ranges n'importe comment dans les menus.

dapprentissage de test dexercice de rvision 2.0 En rsum

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

12

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[3] Troisime heure

Personnalisation du CMS Joomla!

M
H E U R E

ettons les mains dans le cambouis! Rien de tel pour apprendre le mtier. Parcourons ensemble linterface dadministration et testons les diffrentes options et fonctionnalits. Cela nous permettra de personnaliser notre site Web. Ce passage oblig par la technique, vous laisse encore le temps de rflchir la structure et au contenu. 3.0 En rsum Lemploi du cms assure un plus grand contrle sur la structure sous-jacente du site Web, cela sans affecter et rduire la conception graphique que vous mettez en place. Ladministration peut sembler rbarbative un graphiste ou quelquun peut habitu et sensibilis la beaut du code . Quil se rassure, il est possible den apprendre assez en une heure, pour crer son arborescence et mettre en place une structure solide sur laquelle votre crativit viendra spanouir.

dapprentissage de test dexercice de rvision

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

13

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

Le panneau de contrle est compos dune srie de menus suprieurs, et de boutons daccs rapide dans le corps de la page. Sur la droite, un tableau reprend les membres connects sur le site, les composants installs, et une srie de statistiques. Un bouton site , en haut gauche vous permet de revenir en tout temps cette page daccueil. Icones Icones de linterface dadministration
Pour crer et ajouter un nouvel article (contenu) Pour grer les articles visibles en page daccueil Pour grer et lister vos catgories (structure interne) Pour crer, modifier et organiser vos menus (ergonomie navigation) Pour grer les utilisateurs (communaut) Pour grer et lister vos articles (structure interne - contenu) Pour grer et lister vos sections (structure interne) Pour une gestion ordonne de vos diffrents mdias: images, vidos, animations (graphisme interactivit) Choix des langues

Pour grer globalement le site (configuration)

14

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Icones de ladministration interne

Nouveau diter

Copier

Dplacer

Corbeille - supprimer

Publier ou actif

D publier

Dsarchiver

Archives

Restaurer

Pr visualiser

Assign ou appliquer sans quitter

Sauver et quitter

Annuler et quitter

Gestionnaire de menu

Modifier le code html du template

Modifier le css du template

Modifier le code xml du template

Ajouter un utilisateur

Verrouiller

Rafraichir

Aide

Paramtres

Dfaut

Imprimer

Rechercher

Envoyer un courriel

Prcdent

Suivant - transfert

Upload

Download

Exporter

15

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

3.2 Comment grer mon site? Dans premier temps, il serait pertinent de complter les paramtres gnraux du site.

Via le menu Site , vous avez accs trois champs de paramtres: Paramtre globaux du site, avec principalement Paramtre des mtadonnes Paramtre SEO Les menus Systme et serveur doivent tres modifis en connaissances de causes ! En final, il vous faudra sauver les paramtres de la configuration gnrale.

16

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Configuration du site: Paramtres du site o Site hors ligne: Slectionnez si laccs au front-end du site est permis ou non. Si oui, le front-end affichera un message encod au pralable dans le champ prvu cet effet, sur la page de configuration. Message lorsque le site est hors ligne: message affich lorsque le site est hors-ligne. Nom du site: Il sera utilis divers endroits par exemple dans la barre de titre de la partie administration et sur les pages du site hors-ligne. diteur WYSIWYG par dfaut: Choisissez votre diteur WYSIWYG par dfaut. Notez que les membres pourront modifier ce paramtres en ce qui les concernent dans leurs prfrences, si vous leur laisser la possibilit. Longueur des listes: fixer pour tous les utilisateurs, la taille des listes utilise dans ladministration. Longueur du fil d'actualit: slectionnez le nombre darticles rcents publier dans le(s) fil(s).

o o

Paramtres des mtadonnes o Mta description du site: saisissez une description de votre site qui sera ensuite utilise par les moteurs de recherche. Gnralement une liste de 20 mots max est optimale. Mots cls du site (Meta keywords): saisissez les mots cls et la description de votre site. Sparez les mots cls par une virgule, et les groupes de mots par une apostrophe. Afficher la balise mta du titre: afficher la balise mta du titre de larticle en cour. Afficher la balise mta de l'auteur: afficher la balise mta de lauteur de larticle en cour.

o o

Paramtres SEO o o URLs explicites (SEF): rglages doptimisation des moteurs de recherches. Utiliser le module Apachemod_rewrite (rcriture au "vol" des URLs): Utiliser le module Apachemod_rewrite (rcriture au "vol" des URLs). Ajouter un suffixe aux URLs: si oui, le systme ajoutera un suffixe lURL partir du document type.

Il conviendra ensuite de configurer les onglets: systme et serveur en connaissance de cause ! Configuration du systme: Paramtres systme o Mot secret: cest un code alphanumrique unique auto-gnr pour chaque installation de joomla!. Il est utilis pour des fonctions de scurit. Chemin vers le dossier Log: pour une journalisation de joomla!, veuillez spcifier un dossier.

17

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Activer les services Web: permet dactiver les services RPC (Remote Procedure Calls) utilisant HTTP comme mode de transfert et XML comme langage dencodage. Cette fonction est obligatoire pour que la plupart des extensions fonctionnent. Serveur d'aide: slectionnez le nom de serveur daide que joomla! interrogera pour afficher les pages daide. Choisissez local pour utiliser les fichiers installs lors de linstallation de joomla!. Cliquez sur le bouton de rafraichissement Rinitialiser pour mettre jour la liste des serveurs.

Paramtres des utilisateurs o Autoriser l'enregistrement des utilisateurs: si actif, permet aux nouveaux utilisateurs de sauto-enregistrer. Groupe par dfaut pour les nouveaux utilisateurs: niveaux daccs des nouveaux utilisateurs senregistrant par linterface publique. Activation du compte de nouveaux utilisateurs: si oui, lutilisateur recevra par email un lien sur lequel il devra cliquer pour activer son compte avant de pouvoir se connecter. Paramtres utilisateurs en front-end: affiche, ou non, les prfrences des utilisateurs pour quils puissent modifier la langue dinterface du site, lditeur WYSIWYG et le site daide quand ils seront connects.

Paramtres des mdias o Extensions autorises (types de fichier): extensions de fichiers pouvant tres transfrs, spares par une virgule. Taille maximum (en octets): la taille maximale des fichiers transfrs (en octets). Chemin vers le dossier fichier: vous pouvez crer un nouveau dossier pour lutiliser avec le gestionnaire de Mdia et entre le chemin du dossier ici. Attention : ne pas changer ou effacer le nom du dossier images car les dossiers images/banners , images/smilies et images/stories sont utiliss par joomla!. Chemin vers le dossier image: vous pouvez crer un nouveau dossier pour lutiliser avec le Gestionnaire de Mdia et entre le chemin du dossier ici. Si vous voulez accder ce dossier partir du gestionnaire de Mdia, utilisez le mme nom de dossier ou faites en un sousdossier du dossier du Gestionnaire de Mdia. Attention : ne pas changer ou effacer le nom du dossier images/stories car il est utilis par joomla!. Transferts restreints: en labsence de fileinfo ou de MIME Magic, les transferts sont limits aux images pour les utilisateurs dont le niveau dautorisation est infrieur manager. Vrification des Types MIME: utilisation de fileinfo ou de MIME Magic pour essayer de vrifier les fichiers. Dsactiver si vous obtenez des erreurs de types MIME. Extensions des images autorises (types de fichier): extensions des images que vous pouvez tlcharges, spares par une virgule. Elles sont utilises pour contrler les enttes des images valides. Extensions ignores: extensions des fichiers ignores pour les vrifications des types MIME et les restrictions dupload. Types MIME accepts: spars la liste des types MIME accepts pour le tlchargement par une virgule.
18

o o

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Types MIME refuss: spars la liste des types MIME accepts pour le tlchargement par une virgule. (liste noire) Activation de l'interface de transfert en flash: slectionnez si vous voulez utiliser linterface en flash ou non pour le transfert de fichiers dans le Gestionnaire de Mdia.

Paramtres de dbogage o Dbogage systme: si activ, le diagnostic, la traduction et les erreurs SQL, sil y en a, seront affiches. Les informations seront affiches en bas de chaque page de votre site (cot utilisateur front-end et cot administrateur back-end). Nous vous conseillons de ne pas laisser le mode dbogage activ lorsque vous avez fini les tests et tes la version finale de votre site. Dbogage de la langue: choisissez ou pas dafficher les informations de dbogage de la langue (* *) oo ( ?... ?) des fichiers de langue joomla!. Le dbogage de la traduction fonctionnera mme si le dbogage systme est dsactiv mais vous nobtiendrez pas les rfrences dtailles supplmentaires qui pourraient vous aider corriger les erreurs.

Paramtres du cache o o Cache: choisissez ou non dactiver le cache. Dure de vie du cache: dure maximale en minute, avant que le cache stock ne soit rafraichit. Gestionnaire de cache: le mcanisme par dfaut du cache est bas sur des fichiers.

Configuration des sessions o Dure de session: dconnexion automatique des utilisateurs inactifs durant le nombre de minutes choisi. Ne pas choisir un temps trop long. Gestionnaire de session: la mthode utilise par joomla! pour identifier connect utilisant des cookies non-persistants.

Configuration du serveur: Paramtres du serveur o o o o Chemin vers le dossier Temp: veuillez slectionner un dossier Temp accessible en criture. Compression GZIP des pages: activez la compression du tampon sil est pris en charge. Rapport d'erreurs: choisissez le niveau de rapport dans la liste droulante. Forcer SSL: forcer toujours utiliser laccs au site avec le protocole SSL (https) pour certaines zones. Vous ne serrez pas en mesure daccder certaines zones no-ssl. Notez que vous devez avoir activ SSL sur votre serveur pour utiliser cette option.

Paramtres de localisation o Fuseau horaire: date et heure courante configure pour laffichage.

Paramtres FTP o Activer le FTP: active la fonction ftp interne, la place de la fonctionnalit de transfert habituelle de joomla!.
19

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

o o o o o

Serveur FTP: entrez le nom du serveur ftp. Port FTP: entrez le port utilis par ftp, par dfaut il sagit du 21. Identifiant FTP: identifiant utilis pour votre connexion ftp. Mot de passe FTP: entrez le mot de passe ftp. Racine FTP: chemin vers la racine du site. Le dossier racine est le rpertoire de base, auquel vous avez accs.

Paramtres de la base de donnes o Type de base de donnes: types de base de donnes saisit lors de linstallation. Ne modifiez pas ce champ moins que vous ayez migr vers un nouveau type de base de donnes. Nom du serveur: nom dhte de votre base de donnes saisit lors de linstallation. Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert vers un nouvel hte. Identifiant: identifiant pour laccs la base de donnes saisit lors de linstallation. Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert vers un nouvel hte. Base de donnes: nom de votre base de donnes saisit lors de linstallation. Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert vers un nouvel hte. Prfixe des tables: prfixe de votre base de donnes saisit lors de linstallation. Ne modifiez pas ce champ sauf absolue ncessit, comme par exemple lors dun transfert vers un nouvel hte.

Rglages email o o o Serveur de mail: slectionnez quel service est utilis pour envoyer les emails du site. Adresse de l'expditeur: adresse utilise pour envoyer vos courriels. Nom de l'expditeur: par dfaut se champ contient le nom du site saisit lors de linstallation. Chemin d'accs sendmail: entrez le chemin du rpertoire de lexcutable Sendmail sur le serveur. Identification SMTP requise: choisir oui si votre smtp requiert une authentification. Utilisateur SMTP: entrez le nom dutilisateur du compte smtp. Mot de passe SMTP: entrez le mot de passe du compte smtp. Hte SMTP: entrez le nom du compte smtp.

o o o o

20

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Revenons maintenant au contenu ! Un peu plus haut dans le texte, javais attir votre attention sur la structure de Joomla! Lorganisation en sections catgories articles. Ce systme hirarchique dcoulera de larborescence de votre site. Une section sera donc un des grands domaines de votre site. Dans le cas dun portfolio de vos travaux, on peut imaginer ces domaines. Accueil Qui suis-je? Mes ralisations Me contacter

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

gestion des articles

21

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

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

23

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

3.2.1

Le gestionnaire darticle

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

article publi

article d publi

article publi galement en page daccueil

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

24

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Onglet Paramtres - Article Vous permet de paramtrer Auteur: nom de lauteur Pseudo de l'auteur: alias de lauteur Niveau d'accs: niveau d'accs pour cet article Date de cration: date de cration de larticle Dbut de publication: date et heure de dbut de publication Terminer la publication: date et heure de fin de publication

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

25

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Onglet Informations des mta-donnes Vous permet de paramtrer Description: description pour les mta-donnes Mots-cls: mots cls pour les mta-donnes Robots: mots cls pour les robots Auteur: nom de lauteur dans les mta-donnes

26

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

27

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

3.2.2

Gestion des articles non catgoriss

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

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

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

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

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

28

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

3.2.4

Gestion des menus

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

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

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

29

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

30

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

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

31

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

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

32

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[4] Quatrime heure

Extensions: dcouverte

E
H E U R E

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

dapprentissage de test

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

Les Plugins, composants ou modules du cms Joomla! sont des extensions utilisables dans la conception de votre site Web. Une solide rflexion est dexercice suggre avant leur mise en place. Le dveloppement de ces outils est constant dans la communaut internationale de Joomla!, leur nombre est de rvision croissant, il faut faire attention de ne pas se laisser attirer par le ct clinquant du Web. Une quipe ou un webmestre qualifi sera quels sont les besoins et a quel moment, il sera opportun et essentiel de les dlivrer. Loutil ne doit jamais lemporter sur la rflexion. Enfin, une petite mise en garde est ncessaire, une maintenance est indispensable pour garder une scurit optimum de votre site ! Cela passe par des mises jours de ces extensions et des visites rgulires sur le forum de www.joomla.fr. 4.1 La slection de lASBL Arcade Toujours vrifier si il existe des mises jours! Newsletter: http://www.acajoom.com/ Acajoom Rcriture durl: http://www.artio.net/ ARTIO JoomSEF Communaut dutilisateurs: http://www.joomlapolis.com/ Cration de formulaires: http://www.facileforms.biz/ FacileForms Forum: http://www.bestofjoomla.com/ Fireboard Galerie dimages: http://www.joomlaworks.gr/ Simple Image Gallery Plugin Galerie de vidos: http://www.joomlaworks.gr/ AllVideos Plugin Explorateur de fichiers: http://joomlacode.org/gf/project/joomlaxplorer Joomlaxplorer Calendrier: http://events.Joomla!forge.net Event Traduction: http://www.joomfish.net/ Joomfish Boutique en ligne: http://www.virtuemart.net/ VirtueMart Menu droulant: http://jscook.yuanheng.org/JSCookMenu/index.html jscookmenu

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

33

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

34

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[5] Cinquime heure

Rflexion et conception

S
5.0 En rsum
H E U R E

ynthtisez votre rflexion, schmatisez votre travail, et concevez ds le dbut un plan de ralisation organis de votre futur site Web. Le cms Joomla! peut rapidement devenir une usine gaz, sans cohrence. Il est donc primordial davoir une mthodologie de travail, et de la respecter.

dapprentissage de test dexercice de rvision

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

5.1 Ralisation dun cahier des charges

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

35

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

5.1

Questions types poser au client ou se poser

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

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

5.1.1

Information gnrale

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Quels sont les objectifs stratgiques de votre site Web? Objectif principal ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ Objectif secondaire ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................

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

Comment allez-vous mesurer le succs de votre nouveau site? (ex: 20% des ventes en ligne en plus, 15% d'appels en moins aux dpartements de service clientle, 70% de rsultats positifs une enqute de satisfaction, etc.)? ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................

37

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

38

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

39

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

40

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

42

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

43

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

45

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ........................................................................................................................................... ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ........................................................................................................................................... 5.1.9 Gestion des contenus

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

47

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

48

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

49

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[6] Sixime heure

Arborescence et ergonomie

A
H E U R E

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

dapprentissage de test dexercice de rvision 6.1 Arborescence

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

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

51

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

6.1.3 Dessinez-ci, larborescence de votre site

52

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

6.2

Ergonomie

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

Capter

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

53

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

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

54

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

55

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[7] Septime heure

Identit du site et charte graphique

L
H E U R E

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

dapprentissage de test dexercice de rvision

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

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

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

56

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

57

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[8] Huitime heure

Croquis, et recherches graphiques

P
H E U R E

rocurez-vous un carnet, et notez tout ce que vous aimeriez voir apparatre dans votre site. Faites des croquis de la structure au niveau graphique. Parcourez les sites de banques dimages, de templates gratuits ou en ventes, ou tout simplement les sites de vos concurrents. Rsistez aux effets de mode, aux graphismes flash et bruyants, pensez en terme de longvit, de bon got et surtout de lisibilit. propos dimages, je vous conseille: www.sxc.hu (gratuit) et www.stockxpert.com (payant). 8.0 En rsum Un template est un moyen de sparer le fond (le contenu informationnel) de la forme (la manire dont il est prsent).

dapprentissage de test dexercice de rvision

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

58

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[9] Neuvime heure

Recherche et installation dun template

R
H E U R E

echercher un template Joomla! est une chose aise vu le grand nombre de sites gratuits. Trouvez un bon template, valide W3C, compatible sur tous les systmes et toutes les plateformes est une autre paire de manches. 9.0 En rsum Le but de cette nest pas de faire de vous des webdesigners professionnels. Il existe diverses manires de mettre en page sur Internet, en html, xhtml, avec du javascript ou en flash. Notre propos est ici de vous donner un contrle gnral sur le contenu et le graphisme, via un template existant multi plateforme et ce sans notions prliminaires ou dveloppement. Une seconde tape permettra ceux qui le dsirent daller plus loin en partant de zro.

dapprentissage de test dexercice de rvision

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

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

60

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[10] Dixime heure

Rvision et sance de questions

?
H E U R E

Oui! Toi au fond de la classe, parles plus fort sil te plat! 10.0 En rsum Cette heure sera consacre une vision panoramique des travaux raliss et des problmes rencontrs sur les notions vues prcdemment. Alors que le processus de cration en est ces prmices, il nen est pas moins vrais que les processus techniques et de structuration restent des passages obligs. Assurez vous donc bien que toutes les notions sont comprises.

dapprentissage de test dexercice de rvision

61

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[11] Onzime heure

Les images pour le Web, le multimdias, les formats

P
H E U R E

our illustrer vos documents sur le Web, il vous faudra optimiser vos illustrations, photographies ou vidos. Un bon site Web, devra tre lger et dun affichage rapide, pour cela, le poids final des mdias doit toujours tre revus la baisse, mais tout en privilgiant une qualit acceptable sans pixellisation excessive. Diffrents logiciels de retouches dimages existent sur le march, mais depuis longtemps Adobe occupe une place prpondrante et de monopole. Le traitement de limage est donc une base et un pr requis, la ralisation de votre site. Nous donnons ce sujet, une autre formation.

dapprentissage de test dexercice de rvision

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

11.1.1

Le Web ne supporte trs peu de formats d'image: le GIF et le JPEG, les plus frquents, et le dernier venu le PNG. 1. GIF, le Graphics Interchange Format a t cr par CompuServe. Ce format s'est rapidement impos sur le Web, il est utilis essentiellement pour des images avec des zones transparentes, avec des aplats de couleurs (logo) et dans le cas danimations. Il est limit un maximum de 256 couleurs distinctes. JPEG, le Joint Photographic Experts Group utilise une technique plus puissante, d'o des images plus compactes. Vous devez choisir le taux de compression en fonction de la qualit souhaite. En gnral, je prconise un taux de compression 60%. Ce format est idal pour vos photographies et illustrations trs nuances dans les coloris. Il supporte des images de 24 bits (million de couleurs) mais naccepte pas les transparences ni les entrelacements. PNG, le Portable Network Graphic allie les qualits des deux formats prcdents: transparence, affichage progressif, pas de limitation du nombre de couleurs et bon taux de compression. Cest un algorithme de compression sans perte de donnes.
62

2.

3.

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

11.1.2

Intgration html

Pour intgrer une image au sain du document html, il faut utiliser la balise IMG. Laffichage peut tre enrichi par des attributs. Joomla! utilise un diteur WYSIWYG (se prononce wiziwig) littralement: Ce que vous voyez est ce que vous obtenez, ce terme dsigne les logiciels qui prsentent une interface d'dition permettant de visualiser immdiatement le rsultat final obtenu. Il existe deux manires de raliser les pages HTML: un diteur de texte classique comme Notepad, ou tout autre bloc-notes... soit avec un diteur WYSIWYG comme Dreamweaver, Golive, Webexpert... Joomla! vous propose les 2 alternatives. 11.1.3 Attribut src width height alt hspace vspace align usemap Tableau des diffrents attributs Description nom du fichier image largeur de l'image hauteur de l'image commentaire marge horizontale de l'image marge verticale de l'image Alignement du texte par rapport l'image nom de la carte d'image ractive utilise

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

63

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

64

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

11.1.6

Exercice

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

11.2.1

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

Pour la vido 1. 2. 3. 4. 5. 6. 11.1.3 SWF, animations vectorielles - Flash MOV, AVI, ASF, formats trs peu compresss. MPEG format adopt pour les CD-Vido, les DVD et aussi la TV numrique. RealVideo, format pour la vido sur le Web. VRML (Virtual Reality Markup Language) Ralit virtuelle en 3D. Java. Intgration html

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

Dautres attributs peuvent enrichir votre code. En mode Wysiwyg, Dreamweaver offre la possibilit d'ajouter facilement des fichiers multimdias avec les valeurs adquates, l'aide de la balise <EMBED>. Je vous conseille donc dutiliser cette manire de procder si vos connaissances en html sont basiques. SRC ALIGN, BORDER, WIDTH, HEIGHT AUTOLOAD, AUTOSTART pour indiquer le nom du fichier intgrer. alignement et dimensions du mdia. indication que le fichier doit tre charg et jou automatiquement si leur valeur est true. Dans le cas contraire (valeur false), vos visiteurs devront appuyer sur le bouton de lecture pour jouer le mdia. le nombre de fois que le fichier doit tre jou. Une valeur de -1 signifie que le fichier sera lu l'infini. cache la barre de contrle du mdia. spcifie l'URL o tlcharger le plug-in correspondant.

LOOP HIDDEN PLUGINSPACE Exemple pour une vido

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

66

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Cette balise possde deux attributs SRC indique le chemin du fichier MIDI, ici mer.mid se trouve dans le dossier sons . le nombre de fois que le fichier sera entendu. Pour jouer le fichier en boucle, utiliser la valeur -1.

LOOP

67

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[12] Douzime heure

Installation du template - modifications des images

C
H E U R E

Omment faire? Il y a toujours une solution trs simple. Vous avez donc prcdemment install un magnifique template, et vous voulez remplacer la bannire montrant deux hommes daffaires se congratulant, par la photo de Poutine , votre caniche favori! Utilisez cet effet, lexplorateur de fichiers, frachement install dans votre interface dadministration: http://joomlacode.org/gf/project/joomlaxplorer Joomlaxplorer. Vous avez alors accs la racine du site: vous choisissez le dossier templates ensuite le dossier de votre template, et vous avez accs direct aux images et la feuille de style. 12.0 En rsum

dapprentissage de test dexercice de rvision

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

68

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

69

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[13] Treizime heure

Notions dHTML

U
H E U R E

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

dapprentissage de test

Lorsque vous tapez une adresse dans la barre d'adresses de votre navigateur, votre fournisseur d'accs va vous mettre en relation avec le dexercice serveur sur lequel se trouve le site en question. Pour que votre site soit visible de n'importe quel navigateur, on utilise le langage HTML qui est de rvision ncessaire pour afficher, mettre en page votre texte, insrer des images ou crer des liens hypertextes. Cette heure est consacre un survol de ces notions. 13.1 Dfinitions 13.1.1 Qu'est-ce qu'un serveur? Ce n'est ni plus ni moins qu'un ordinateur dont la fonction principale est de vous envoyer des donnes (pages, images, programmes...) 13.1.2 HTML: Ce langage repose sur le concept de balises qui s'utilisent comme suit: Texte auquel on applique cette balise Ainsi, voici en HTML les mots suivants: gras: <b>gras</b> italique: <i>italique</i> soulign: <u>soulign</u> lien vers crayons.be: <a href= http://www.crayons.be/ >lien vers crayons</a> Il existe ainsi des dizaines de balises HTML qui permettent de dfinir votre page selon votre got l'aide de tableaux, de style, de cadres et autres.

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

70

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

71

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

13.3 Index des attributs Le logo Le logo signifie que cet attribut est obligatoire avec les balises indiques. signifie que l'utilisation de cet attribut est dconseille.

Source: http://www.themanualpage.org/html/html_attributs.php
nom abbr balises TD, TH format/valeurs texte commentaires abrviation pour les cellules d'en-tte liste des jeux de caractres supports liste des types MIME pour l'upload de fichiers touche d'accessibilit ressource serveur qui traitera le formulaire alignement par rapport la table alignement vertical ou horizontal alignement par rapport au FIELDSET position de la table par rapport la fentre alignement horizontal de la ligne alignement du texte alignement des donnes et justification du texte dans la cellule couleur pour les liens slectionns description courte description courte description courte

accept-charset

FORM

jeux de caractres

accept

FORM, INPUT

content types

accesskey

action

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

caractre

URI

align

CAPTION

top, bottom, left, right bottom, middle, top, left, right top, bottom, left, right left, center, right

align

APPLET, IFRAME, IMG, INPUT, OBJECT LEGEND

align

align

TABLE

align

HR

left, center, right

align align

DIV, H1, H2, H3, H4, H5, H6, P COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

left, center, right, justify left, center, right, justify, char

alink

BODY

couleur

alt alt alt

APPLET AREA, IMG INPUT

texte texte CDATA

72

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom archive

balises APPLET

format/valeurs CDATA

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

archive

OBJECT

CDATA

axis

TD, TH

CDATA

background

BODY

URI

bgcolor

TABLE

couleur

bgcolor

TR

couleur

bgcolor

TD, TH

couleur

bgcolor

BODY

couleur

border

TABLE

pixels

border

IMG, OBJECT

pixels

cellpadding

TABLE

Length

cellspacing

TABLE

Length

char

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

caractre

charoff

Length

charset

jeu de caractres

checked

INPUT

sans valeur

cite

BLOCKQUOTE, Q

URI

cite

DEL, INS

URI

73

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom class

balises toutes les balises sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE OBJECT BR

format/valeurs CDATA

commentaires liste de classes spares par des espaces

classid clear

URI left, all, right, none

identifie une implmentation saut de ligne. La valeur par dfaut est none. fichier.class de l'applet URI servant de base pour le calcul des URI des attributs classid, data, archive URI facultative de base pour l'applet content type du code de l'OBJECT couleur du texte liste de longueurs. Valeur par dfaut: 100% (1 col) largeur visible en largeurs moyennes caractres nombre de colonnes couvertes par la cellule. La valeur par dfaut est 1. rduit l'espace entre les items information associe liste de longueurs spares par des virgules utilis pour les zones d'image cliquables URI des donnes de l'OBJECT

code codebase

APPLET OBJECT

CDATA URI

codebase

APPLET

URI

codetype

OBJECT

content type

color cols

BASEFONT, FONT FRAMESET

couleur MultiLengths

cols

TEXTAREA

nombre

colspan

TD, TH

nombre

compact content coords

DIR, DL, MENU, OL, UL META AREA

sans valeur CDATA Lengths

coords

Lengths

data

OBJECT

URI

74

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom datetime declare

balises DEL, INS OBJECT

format/valeurs Datetime sans valeur

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

defer

SCRIPT

sans valeur

dir

dir disabled

toutes les balises sauf APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT BDO BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA FORM

ltr, rtl

ltr, rtl sans valeur

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

enctype

content type

face

BASEFONT, FONT

CDATA

for

LABEL

ID

frame

TABLE

frameborder

FRAME, IFRAME

void, above, below, hsides, lhs, rhs, vsides, box, border 1, 0

headers

TD, TH

IDs

height height

IFRAME TD, TH

Length Length

75

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom height height href

balises IMG, OBJECT APPLET A, AREA, LINK

format/valeurs Length Length URI

commentaires force la hauteur de l'OBJECT hauteur initiale URI de la ressource pointe URI servant de base pour le calcul des URI relatives code de la langue marge horizontale autour de l'objet nom de l'entte HTTP de la rponse identifiant unique de la balise sur une image cliquable, permet d'envoyer les coordonnes du point cliqu tiquette de l'lment de la liste droulante tiquette utiliser pour l'OPTGROUP code de la langue

href

BASE

URI

hreflang hspace

A, LINK APPLET, IMG, OBJECT

code de la langue pixels

http-equiv

META

nom

id

ismap

toutes les balises sauf BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE IMG, INPUT

ID

sans valeur

label

OPTION

texte

label

OPTGROUP

texte

lang

language

toutes les balises sauf APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT SCRIPT

code de la langue

CDATA

link longdesc

BODY IMG

couleur URI

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

longdesc

FRAME, IFRAME

URI

76

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom marginheight

balises FRAME, IFRAME

format/valeurs pixels

commentaires hauteur de la marge en pixels largeur de la marge en pixels nombre maxi de caractres que peut contenir un champ texte cette feuille de style est prvue pour tel mdia cette page est prvue pour ces mdia mthode HTTP utiliser pour envoyer le formulaire. La valeur par dfaut est GET. liste slection multiple. Par dfaut, c'est une slection simple. nom du contrle nom de l'applet. Permet aux autres applets de la trouver. nom de la liste nom du formulaire. Utilis pour les scripts. nom de la frame. Utilis avec l'attribut target. nom de l'image. Utilis pour les scripts. nom de l'ancrage nom envoy dans un formulaire nom utilis avec usemap

marginwidth

FRAME, IFRAME

pixels

maxlength

INPUT

nombre

media

STYLE

MediaDesc

media

LINK

MediaDesc

method

FORM

GET, POST

multiple

SELECT

sans valeur

name name

BUTTON, TEXTAREA APPLET

CDATA CDATA

name name

SELECT FORM

CDATA CDATA

name

FRAME, IFRAME

CDATA

name

IMG

CDATA

name name

A INPUT, OBJECT

CDATA CDATA

name

MAP

CDATA

77

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom name name

balises PARAM META

format/valeurs CDATA nom

commentaires nom du paramtre nom de la mtainformatio n cette rgion n'a pas d'action l'utilisateur peut-il changer la taille de la frame? la ligne est dessine avec une seule couleur, plutt qu'avec un effet d'ombre supprime les sauts de ligne automatiques fichier d'applet srialize l'lment perd le focus la valeur de l'lment a chang on vient de cliquer sur un bouton de la souris

nohref noresize

AREA FRAME

sans valeur sans valeur

noshade

HR

sans valeur

nowrap

TD, TH

sans valeur

object onblur

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

CDATA script

onchange

script

onclick

script

ondblclick

script

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

onfocus

script

l'lment gagne le focus une touche a t enfonce

onkeydown

script

78

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom onkeypress

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

format/valeurs script

commentaires une touche a t enfonce puis relche

onkeyup

script

une touche a t relche

onload

script

onload

BODY

script

onmousedown

onmousemove

onmouseout

onmouseover

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

script

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

script

la souris vient de bouger au dessus de l'lment

script

la souris quitte la zone graphique de l'lment

script

la souris vient d'arriver audessus de l'lment

79

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom onmouseup

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

format/valeurs script

commentaires un bouton de la souris vient d'tre relch

onreset

script

onselect onsubmit

INPUT, TEXTAREA FORM

script script

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

onunload

FRAMESET

script

onunload

BODY

script

profile

HEAD

URI

prompt readonly

ISINDEX TEXTAREA

texte sans valeur

readonly

INPUT

sans valeur

rel

A, LINK

types de liens

rev

A, LINK

types de liens

rows

FRAMESET

MultiLengths

rows

TEXTAREA

nombre

80

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom rowspan

balises TD, TH

format/valeurs nombre

commentaires nombre de lignes couvertes par la cellule. La valeur par dfaut est 1. gre l'affichage de lignes entre les colonnes et les lignes. La valeur par dfaut est none. dsigne un procd pour l'interprtation de la balise META domaine couvert les cellules d'entte ajoute une barre de dfilement ou non. La valeur par dfaut est auto. slectionne l'OPTION en question dans la liste SELECT contrle l'interprtation des coordonnes. La valeur par dfaut est rect. forme et position de la zone cliquable. La valeur par dfaut est rect. hauteur de la ligne taille de la police (font) largeur du contrle. En pixels, sauf pour les INPUT de type text et password (nombre de caractres). taill de base pour les lments FONT nombre de lignes visibles

rules

TABLE

none, groups, rows, cols, all

scheme

META

CDATA

scope

TD, TH

row, col, rowgroup, colgroup

scrolling

FRAME, IFRAME

yes, no, auto

selected

OPTION

sans valeur

shape

AREA

rect, circle, poly, default

shape

rect, circle, poly, default

size size size

HR FONT INPUT

pixels [+|-]nn (ex. size= +1 , size= 4 ) CDATA

size

BASEFONT

CDATA

size

SELECT

nombre

81

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom span

balises COL

format/valeurs nombre

commentaires nombre de colonnes couvertes par l'lment COL. La valeur par dfaut est 1. nombre par dfaut de colonnes du groupe. La valeur par dfaut est 1. URI pointant vers un script externe URI o trouver l'image pour le contrle source du contenu de la frame URI de l'image inclure dans le document message afficher pendant que l'OBJECT se charge numro qui dmarre la section OL feuille de style associe l'lment rsum du contenu de la table pour le rendu audio position dans la squence de la touche tab le rsultat de l'action sera affich dans la frame dsigne par target couleur du texte du document titre indicatif

span

COLGROUP

nombre

src

SCRIPT

URI

src

INPUT

URI

src

FRAME, IFRAME

URI

src

IMG

URI

standby

OBJECT

texte

start

OL

nombre

style

summary

toutes les balises sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE TABLE

feuille de style

texte

tabindex

target

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

nombre

FrameTarget

text

BODY

couleur

title

type type

toutes les balises sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE A, LINK OBJECT

texte

content type content type

content type indicatif content type des donnes spcifies par data

82

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom type

balises PARAM

format/valeurs content type

commentaires content type de l'attributvalue quand valuetype= ref content type du langage de script content type du langage de la feuille de style type de contrle. La valeur par dfaut est text. liste de styles pour les puces et numros style de numrotation style de puce type de bouton. La valeur par dfaut est submit. image map utiliser avec l'OBJECT alignement vertical dans les cellules Pour les radio buttons et checkboxes valeur de l'lment OPTION valeur du paramtre valeur renvoye au serveur avec le formulaire rinitialise la squence de nombre comment interprter la valeur. La valeur par dfaut est data. la version de HTML utilis dans ce document couleur pour les liens visits

type type

SCRIPT STYLE

content type content type

type

INPUT

type

LI

type type type

OL UL BUTTON

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

usemap

IMG, INPUT, OBJECT

URI

valign

value

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

top, middle, bottom, baseline CDATA

value

OPTION

CDATA

value value

PARAM BUTTON

CDATA CDATA

value

LI

nombre

valuetype

PARAM

data, ref, object

version

HTML

CDATA

vlink

BODY

couleur

83

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

nom vspace

balises APPLET, IMG, OBJECT

format/valeurs pixels

commentaires marge verticale autour de l'OBJECT largeur de la ligne largeur de la frame force la largeur de l'OBJECT largeur de la table largeur de la cellule largeur initiale largeur de la colonne largeur par dfaut des colonnes rassembles dans COLGROUP largeur suggre en nombre de caractres pour l'affichage de la zone PRE

width width width width width width width width

HR IFRAME IMG, OBJECT TABLE TD, TH APPLET COL COLGROUP

Length Length Length Length Length Length MultiLength MultiLength

width

PRE

nombre

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

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

84

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

Le lien absolu dmarre la racine du site et va jusqu'a la page que l'on veut atteindre. Avec cela, peut importe o l'on soit, on atteindra l'adresse. Le lien relatif tient compte de la page o l'on est. Si l'on veut qu'un lien vers un autre site s'ouvre dans une nouvelle fentre, il est ncessaire de spcifier dans le lien la cible de ce lien. La cible d'un lien se dfinit par l'attribut target. Le plus utilis est target= _blank , qui ouvre une nouvelle fentre du navigateur par dfaut. Cependant, si l'on spcifie le nom de la nouvelle fentre (ex: target= fenetre ), on peut faire ouvrir plusieurs liens dans une mme fentre. <a href= http://www.crayons.be target= fenetre >Mon lien versCrayons</a> <a href= http://www.croquis.be target= fenetre >Mon lien vers Croquis</a> 13.5 L'insertion d'images La balise <img>:<img src= http://www.crayons.be/mascotte.jpg > L'attribut src indique la source de l'image. 13.6 Les listes On a souvent besoin d'numrer des listes d'lments, il existe en HTML diffrents types de liste, pour vos diffrents cas de figures. 1. 2. 3. les listes puces reprsentes par l'lment UL les listes numrotes reprsentes par l'lment OL les listes de dfinitions reprsentes par l'lment DL
<UL> <LI>item 1 <LI type= circle > item 2 <LI type= square > item 3 </UL> On commence par placer les balises <UL> (Unordered List) qui vont dlimiter la liste. Chaque lment de la liste est ensuite reprsent par l'lment LI (List Item) dont la balise fermante est optionnelle. On peut changer l'aspect de la puce en changeant la valeur de l'attribut type de l'lment LI. Si on ne donne pas de valeur l'attribut, on a un cercle plein, avec circle, on a un cercle vide et enfin avec square, on a un carr plein. Comme pour les autres listes, on commence par dlimiter la liste avec des balises <OL> (Ordered List) cette fois-ci et ensuite on ajoute les lments de la liste avec l'lment LI galement. 85

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

</OL>

On peut changer la faon de numroter les lments de la liste en changeant la valeur de l'attribut type avec une des valeurs reprises dans le tableau suivant: Type Aspect

rien ou 1 (dfaut) numrotation arabe I i A a numrotation romaine majuscule numrotation romaine minuscule numrotation alphabtique majuscule numrotation alphabtique minuscule

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

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

La liste est dlimite par les balises <DL> (Definition List), ensuite, on utilise l'lment DT (Definition Title) pour donner le titre de la dfinition et l'lment DD pour donner la dfinition. Pour les deux lments DT et DD, la balise fermante est optionnelle.

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

86

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

13.7 Balises html de base

HTML> et </HTML> HEAD> et </HEAD> Dbut et fin de la page HTML. Dbut et fin de l'en-tte de la page (zone dans laquelle peuvent tre dfinis un certain nombre d'lments, dont la plupart sont invisibles pour le visiteur). Dbut et fin du corps de la page (partie principale). Dfinit le titre de la page, tel qu'il apparat au visiteur, en haut de son navigateur ou browser. TITLE>Bienvenue sur mon site</TITLE> <FONT> et </FONT> Dfinit la police de caractres utilise, la taille, la couleur. <FONT FACE= verdana SIZE= 3 COLOR= #000000 >Texte noir en verdana de taille 3</FONT> <B> et </B> Affiche le texte en gras.

BODY> et </BODY> TITLE> et </TITLE>

<I> et </I> <HR> <BR>

Affiche le texte en italique. Affiche une ligne de sparation horizontale. Provoque un retour la ligne (au sein d'un mme paragraphe). Dfinit un paragraphe. Dfinit un tableau. Chaque ligne du tableau se dcompose en <TR> et </TR>, chaque colonne en <TD> et </TD>. Dfinit un lien dans une page HTML. <A HREF= http://www.crayons.be >Aller sur Crayons</A>

<P> et </P> <TABLE> et </TABLE>

<A HREF= > et </A>

<IMG...>

Insre une image dans une page HTML. <IMG SRC= image.png >

13.8

Mise en forme du texte

Le langage html ne gre toujours pas les caractres spciaux ou les accents, pour quil saffiche correctement, il faut utiliser ces codes.
Accent a accent grave A accent grave a accent aigu A accent aigu a accent circonflexe A accent circonflexe a tilde 87 Aspect HTML &agrave; &Agrave &aacute; &Aacute; &acirc; &Acirc; &atilde;

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

Aspect

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

88

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

13.9

Liste des caractres spciaux en code HTML

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

&pound; &yen; &fnof;

pound (Livre sterling, monnaie anglaise) yen (monnaie japonaise) florin (idem fonction)

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

90

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[14] Quatorzime heure

Test dhtml cration de pages basiques

Place la pratique, lexprimentation! <html>

H E U R E

dapprentissage de test dexercice de rvision

</html>
91

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[15] Quinzime heure

Notions de CSS

C
H E U R E

Omme toute chose, sur le Web le langage aussi volue. Html, dhtml, xml, xhtml et les fameuses feuilles de styles: CSS = Cascading Style Sheet. Modle de feuille de style utilis dans les browsers Web ( partir des versions 4 pour MSIE et Navigator). Elles permettent (entre autres) de modifier l'aspect de tout un site en ne touchant qu' un seul fichier (la feuille de style), et donc d'allger grandement la gestion d'un site. Par extension, nom de format de fichier, pour ceux qui contiennent une description de CSS. Dans tous les exemples prsents ici, nous utiliserons deux fichiers: index.html , qui va contenir le code HTML, et style.CSS , qui va contenir toutes les dfinitions de style. Le fichier style.CSS est inclus et li comme suit dans notre fichier HTML (entre les balises <head> et </head>): <link rel= stylesheet type= text/CSS href= styles.CSS >

dapprentissage de test dexercice de rvision

La feuille de style peut galement tre incluse au fichier html 15.0 En rsum

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

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

Cf. Cd ou documents annexes fournis lors de la formation. http://pbnaigeon.developpez.com/tutorial/CSS-HTML/notions-de-base/#L0

92

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

15.3

Positionnement des lments

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

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

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

93

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[16] Seizime heure

Test de CSS cration de pages basiques

Place la pratique, lexprimentation <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd > <html xmlns= http://www.w3.org/1999/xhtml lang= fr xml:lang= fr >

H E U R E

dapprentissage de test dexercice de rvision

</html>
94

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[17] Dix-septime heure

CSS gestion des menus par lexemple

E
H E U R E

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

Pour lexercice, je vous demande de tlcharger un menu au choix, de linstaller et de le paramtrer. 17.0 En rsum

dapprentissage de test dexercice de rvision

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

95

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[18] Dix-huitime heure

Atelier et questions

S
H E

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

Une autre suggestion est de crer sur son navigateur, un dossier avec ses favoris, dossier qui reprendrait tous les sites de rfrences ou dexemples. Rpercutez vos interrogations sur: http://joomla-cms.blogspot.com/ et U R E http://www.facebook.com/group.php?gid=23676315149 dapprentissage 18.0 En rsum de test dexercice de rvision Les heures dateliers sont prvues pour mettre la main la pte et tester le cms dans ses moindres recoins. La thorie ne sera explique que sur des cas concrets, le but ici tant de devenir autonome face la logique et la structure de Joomla!

96

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[19] Dix-neuvime heure

Modifications en profondeur du template

C
H E U R E

oncevoir son template est lobjectif de tout graphiste qui se respecte. Cest facile si vous avez des notions dhtml. Guide tir gracieusement de http://www.joomladraft.org avec la permission de M. Servais.

19.0

En rsum

dapprentissage de test dexercice de rvision

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

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

Avant de commencer encoder un template, il faut avoir une ide assez prcise de l'objectif atteindre. Un simple croquis sur une feuille de papier permet de fixer les ides. Voici le schma du template que nous allons raliser ensemble: Vous remarquerez que ce croquis comporte: Les diffrentes parties du template: Le header, le corps du site avec ses colonnes et le footer. Les diffrentes positions d'affichage:

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

97

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

19.2

Structure du template

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

Le dossier d'un template comporte toujours sa racine les fichiers suivants: Un fichier index.html dont le contenu est limit la couleur de la page, Le fichier index.php qui contient le squelette du template, Un fichier d'installation du template: templateDetails.xml, Une image rduite du template: template_thumbnail.png.
98

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

19.3

Mise en place de larborescence

Nous allons maintenant passer aux choses srieuses: Etape 1: Etape 2: Avec l'aide de votre gestionnaire de fichiers, ouvrez le dossier templates de votre site local, Crez un nouveau dossier et nommez-le: mon_template_1,

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

99

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Vous avez maintenant ceci:

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

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

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

100

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Voil une bonne chose de faite, nous progressons rapidement puisque nous avons: encod notre premier programme; mis en place 50% des fichiers ncessaires; et en plus nous avons scuris une partie du template.

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

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

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

Un template contient toujours un fichier templateDetails.xml. Joomla! fait appel aux informations incluses dans ce fichier pour pouvoir installer le template et l'afficher sur le site. La convention de dnomination de ce fichier doit imprativement tre respecte pour que Joomla! puisse trouver le fichier. Vous remarquerez: La prsence de la lettre D en majuscule, L'absence de lettres accentues.

Le fichier est un fichier XML et son encodage ne laisse pas de place la fantaisie: pour la casse des balises; et pour l'ordre d'affichage des donnes.

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

102

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[20] Vingt heure

Atelier

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

dapprentissage de test dexercice de rvision

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

103

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[21] Vingt et une heure

Atelier

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

dapprentissage de test dexercice de rvision

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

104

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[22] Vingt deuxime heure

Questions frquentes


H E U R E

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

Comment uploader plus de types de fichiers dans le gestionnaire de mdia? dapprentissage de test dexercice de rvision Il faut rajouter l'extension voulue (mp3, pps... etc) dans le fichier admin.media.php qui se trouve dans: administrator/components/com_media . Pour ce faire, ditez admin.media.php , faites une recherche sur $allowable=array et rentrez les extensions dsires.

Pourquoi ces messages bizarres qui commencent par Notice ? Parce que votre serveur Web est un peu trop bavard et que Joomla! le laisse parler! Pour ne plus afficher ces messages, qui n'ont aucun incidence sur le fonctionnement de votre site, procdez comme suit Depuis l'espace d'administration de votre site: 1. 2. 3. 4. cliquez cliquez cliquez cliquez sur sur sur sur l'icne Configuration Gnrale l'onglet serveur le menu droulant Rapport d'erreurs: et slectionnez simple l'icne Enregistrer pour sauvegarder les modifications

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

105

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

1. 2.

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

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

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

Exemples de Composants inclus dans Joomla! lors de son installation: 1. 2. 3. Banners (Bannires): ce composant vous permet d'afficher les bannires de vos clients. Web Links (Liens Web): ce composant vous permet de constituer un annuaire de sites Web. Polls (Sondages): ce composant vous permet de mettre en place des sondages.

106

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Qu'est-ce qu'un mambot? Ce sont des morceaux de scripts qui permettent d'automatiser certaines tches sur votre site Joomla!, ce terme nexiste plus sur dans la version 1.5. Exemples de Plugins inclus dans Joomla! lors de l'installation: 1. 2. Le Plugins de recherche est un script qui permet d'effectuer une recherche sur votre site. Le Plugins TinyMCE WYSIWYG Editor permettra, lui de convertir le texte que vous saisissez dans l'diteur WYSIWYG en code HTML, interprtable par votre navigateur.

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

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

107

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[23] Vingt troisime heure

Sance de prsentation au groupe critiques

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

H E U R E

dapprentissage de test dexercice de rvision

108

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[24] Vingt quatrime heure

Modifications et valuation finale

Valuation et grille danalyse. La grille danalyse contient une partie gnrale didentification et de prsentation du site.

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

24.0 En rsum Nous voici la fin de cette formation, il est irraliste dessayer danticiper et de solutionner tous les problmes qui pourraient survenir, nous esprons avoir rpondu vos attentes. Le moment est venu danalyser une dernire fois votre site, via la grille danalyse ci-jointe. Le rsultat sera analys en groupe. 24.1 Recommandations pour une bonne utilisation de la grille danalyse Si un critre ne peut pas tre valu, il ne faut pas lui attribuer dvaluation. 24.1.1 Contenu 1. 2. 3. 4. 5. 6. 7. 8. Information dtaille et tendue du site: profondeur du sujet et exhaustivit? Exploitation de tous les aspects? Logique de lorganisation des informations: structure cohrente simple et comprhensible de linformation? Organisation par thme, alphabtique ou alatoire? Pertinence des liens vers lextrieur: qualit des sites choisis? Pertinence? Les liens sont-ils encore fonctionnels? Date de la dernire mise jour: mise jour et maintenance rgulire du site? Accs en ligne aux documents: disponibilit dans le site mme de linformation recherche? En format intgral? Qualit de la langue et/ou de la traduction: exactitude de lorthographe? Formulation et structure de phrase correctes? Qualit de la traduction? Prsence utile et pertinence des illustrations: illustrations significatives? Valeur ajoute au contenu? Sources dinformation claires et bien identifies: mention de responsabilit et identification des sources bibliographiques et des dates de publications?

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

109

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

24.1.3 Prsentation visuelle 1. 2. 3. 4. Design du site et couleurs utilises: sobrit des couleurs? Prsentation are? Bruit caus par la lourdeur de la prsentation ou des messages publicitaires? Lisibilit du texte: facilit de lecture lcran? Choix des caractres? Harmonie entre la couleur du fond et les caractres? Rapidit de chargement des illustrations: lgret et quantit dillustrations? Qualit de limpression (imprimante): format du texte? Lisibilit des impressions notamment en fonction des couleurs?

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

110

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[+] Fiche dvaluation

Site Web: ____________________________________

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

Webdesigner / Webmestre Nom:......................................... Classe:....................................... Correcteur Nom:......................................... Prnom:................................................ Prnom:................................................ Anne:..................................................

Rsultat de lanalyse:

/100

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

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

111

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Public(s) cible(s) Grand public Catgories dinformation Information factuelle (version intgrale) Documents Spcialis

Rpertoire / Liste (prcisez):....................................................... Banque de donnes (prcisez):.................................................... Mode de prsentation Texte Accs au site Libre Option de langue Franais Anglais Tarif Limit (prcisez):.......... ........................................ Autres:........................ Texte/illustrations Multimdia

Contenu (60%)

Faible Bien Trs bien (1 point) (5 points) (9 points)

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

112

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Prsence utile et pertinence des illustrations ou des animations Sources dinformation claires et bien identifies Total des colonnes .................................../60

Navigation (20%)

Faible Bien Trs bien (1 point) (3 points) (5 points)

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

Prsentation visuelle (14%)

Faible Bien Trs bien (1 point) (3 points) (5 points)

Design du site et couleurs utilises Lisibilit du texte Rapidit de chargement des illustrations Qualit de limpression (imprimante) Total des colonnes .................................../14

113

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Accessibilit (6%)

Faible Bien (1 point) (3 points)

Prsence dans les principaux rpertoires et outils de recherche Adresse intuitive

Total des colonnes .................................../6

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

114

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

[..] Quelques minutes de plus

Bote outils

S
Portail Extensions

ites Internet, ressources diverses

Communaut Joomla! sur le Web

www.joomla.fr

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

Symbolique des couleurs www.dezign-box.net/Webdesign/couleurs/symbolique.php

116

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

117

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

118

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

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

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

120

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

Lexique html, xhtml, java

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

122

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

127

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

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

128

2 4

P O U R

C R E R

M O N

S I T E

W E B

V I A

L E

C M S

J O O M L A

1 . 5

129