Guide de Joomla!

Voila le guide que j'avais créé pour le bureau de la Grem'. Bon courage !

Guide d'utilisation de Joomla! destiné aux membres du bureau de la Grem[/size]

Au programme
I. Connexion à l’interface d’administration
II. Présentation du menu de gestionnaire
III. Gestion des médias
1. Les médias, présentation & exemples
2. Les médias, mise en garde
3. Gestion de médias
IV. Gestion des Sections
1. Les sections, présentation & exemples
2. Les sections, mise en garde
3. Création d’une section
V. Gestion des catégories
1. Les catégories, présentation & exemples
2. Les catégories, mise en garde
3. Création d’une catégorie
IV. Gestion des articles
1. Les articles, présentation & exemples
2. Les articles, mise en garde
3. Création d’un article, vue générale de l’interface
4. Récapitulatif (A), paramètres d’article, paramètres avancés & méta-données (C)
5. L’interface d’édition



I. Connexion à l’interface d’administration

Le site de la Gremlyn est basé sur un noyau Joomla!, qui est ce que l’on appelle un éditeur WYSIWYG (What You See Is What You Get). En gros, ça signifie que vous n’avez pas besoin d’avoir de connaissances particulières en XHTML (qui est le langage informatique des pages web) pour pouvoir poster et interagir avec le site. Si j’ai fait ce choix, c’est bien sûr pour que chaque membre du bureau puisse gérer « sa » section du site (tut’ pour le VP tut’, etc…) sans trop s’emmerder ! J’espère donc que vous jouerez le jeu et que vous profiterez de cet outil qui est à votre disposition pour que le site soit dynamique et vivant !

A l’heure où j’écris ce tuto, tout n’est bien sûr pas encore fini. Mais le balle est quand même dans votre camp ! Soyez créatifs, inventifs, novateurs, et, ensemble, on arrivera à faire un truc vraiment bien, j’en suis sûr !

Bien sur c’est bien beau tout ça, mais encore faut-il que vous sachiez vous servir de l’interface ! On y vient justement.

Avant tout, sachez qu’il y a deux interfaces d’administration sur le nouveau site :

L’interface d’administration du forum est la première. On y accède via le forum, grâce au lien qui apparait en bas quand on est connecté sur celui-ci. Ce n’est pas le sujet, mais sachez que vous avez tous des privilèges de modérateurs sur le forum, ainsi que quelques privilèges d’administration (on en reparlera).
L’interface d’administration de Joomla! est celle qui nous intéresse, on y accède via cette adresse dans votre navigateur :



Plus tard, quand le site ne sera plus en alpha-test, vous pourrez supprimer le « /gremlynv2 » dans l’adresse.
Ensuite, vous tombez sur une page de connexion :



Ben la, vous l’aurez compris, faut taper votre login et votre mot de passe. Quel login et quel mot de passe ? Ben les mêmes que ceux que vous avez choisis lors de votre inscription au forum ! J’ai transféré les données pour vous simplifier la vie :] !

II. Présentation du menu de gestionnaire

Hop, vous voila sur un joli menu. C’est là que les choses sérieuses commencent !



L’image que vous voyez est une copie de mon menu. Vous avez un peu moins de boutons, mais vous avez ceux qui nous intéressent (ceux où ya un gros pâté rouge…).
Du coup, dans l’ordre, on a :

Le bouton de Gestion des médias (partie III du tutoriel)
Le bouton de Gestion des sections (partie IV)
Le bouton de Gestion des catégories (partie V)
Le bouton de Gestion des articles (partie VI)

Vous remarquerez le bouton « déconnexion » en haut à droite. Je vous demande d’en user et d’en abuser, parce que je vous ai donné beaucoup de privilèges sur l’interface, et qu’un sale coup du petit frère (voire de la petite sœur, les filles c’est encore plus vicieux) ou une blague d’un pote pourraient bien effacer le contenu du site en entier… Et je n’exagère pas ! Donc je vous donne des droits, beaucoup de droits sur le site, mais en contrepartie…je vous demande juste de faire gaffe ! C’est con mais ça peut vite arriver, et ça nous mettrait tous bien dans la merde.
Donc SVP déconnectez-vous quand vous allez bouffer, quand vous laissez votre ordi sans surveillance (surtout à la fac…) quand vous allez faire la caisse du chat, quand vous allez faire popo…
Fin bon j’arrête de faire mon relou ^^

III. Gestion des médias

Youpi on attaque des trucs plus sérieux (je vous motive comme je peux)… Donc les médias, Kesako ?

1. Les médias, présentation & exemples

Les médias, c’est en fait un peu tous les fichiers que vous avez sur votre ordi… Je m’explique ! En gros quand vous cliquez sur le bouton « médias » vous accédez à une interface qui vous permet d’uploader (comprenez « envoyer ») sur le site les fichiers dont vous avez besoin pour gérer votre section du site. Ca va d’images que vous pouvez inclure sur vos pages d’articles (on verra comment plus tard), à tous les fichiers possibles, par exemple un fichier .xls (excel) contenant les derniers résultats du tut’ que les tutoriens pourront télécharger !
En gros vous pouvez tout y mettre, mais si on y fait pas gaffe ça sera vite le bordel… Alors attention !

2. Les médias, mise en garde

Comme je vous le disais, si on veut que ça fonctionne, il faudra que tout le monde mette un point d’honneur à respecter les règles que je vais vous exposer. Ce n’est ni pour vous contraindre ni pour vous forcer, c’est juste que sinon ça ne fonctionnera pas ! Alors attention une fois de plus :]
Donc je pose 4 règles majeures, comme pour les hypertensions intracrâniennes, c’est à savoir « par cœur et pour toujours » :

i. La taille des fichiers qui ne devra jamais dépasser 2Mo (2000 Ko), ou alors de façon tout à fait exceptionnelle. La taille des images (celles que vous inclurez dans les pages web) ne devra au grand jamais dépasser 200 Ko ! Pourquoi ? Simplement parceque ça risque d’être très long d’afficher la page pour les gens qui n’ont qu’une petite vitesse de connexion. Préférez donc les images d’une 100aine de Ko.
ii. Le type des fichiers. Portez toujours une attention particulière au type de fichiers que vous mettrez en ligne, afin que tout le monde puisse les ouvrir. Exemple : si vous avez Office 2007, tant mieux pour vous, mais ce n’est pas le cas de tout le monde… Donc évitez d’enregistrer vos fichiers en .docx, .xlsx et autres, sinon 70% des gens ne pourront pas les ouvrir… Enregistrez en « mode de compatibilité » !
iii. Le nom des fichiers. Il doit être explicite (ex : photoamphihermann.jpg), donc on évite d’appeler ses fichiers 1.jpg, 2.jpg, etc… On évite aussi les xXxXxXtRDFSH.jpg et autres.
PAS de majuscules dans les noms de fichiers, PAS d’espaces (on met un _ « underscore » avec sa touche 8 ), PAS de caractères spéciaux ( ²°|}, etc…)
iv. Ce que vous uploadez. Le site de la grem ‘, ce n’est pas un espace de stockage pour les dernières photos du chien, pour le dernier film avec Bruce Willis, etc… Donc interdiction formelle d’uploader tout fichier qui ne serait pas en rapport direct avec les activités de la grem’…
v. L’organisation. Faites très attention ! Créez des dossiers* pour chaque section (ex : un gros dossier « tutorat »), et des sous dossiers dans ceux-ci !
Ex : Contenu du dossier « Tutorat » : Corrections (avec fichiers à télécharger dedans), photos (avec des photos dedans pour illustrer les pages), etc…
* : Je vais vous expliquer comment on fait, pas de souci ;]


3. Gestion des médias


Depuis le menu principal, vous avez un zouli boutton « gestion des médias ». Hop, on clique et on se retrouve la :



Alors ici nous avons :
1. C’est dans ce champ que vous tapez le nom du dossier que vous souhaitez créer. Par exemple si vous tapez « Kevin » puis que vous hittez le bouton 2 « créer un dossier », ben vous créez un répertoire à la gloire de notre président.
2. Vous avez compris l’idée
3. On clique et hop, on choisit un ou plusieurs fichiers que l’on veut uploader, puis on valide.
AVANT DE VALIDER :
- On vérifie qu’on est bien dans le bon répertoire (ben ouais ça serait balot de tout envoyer au mauvais endroit)
- On vérifie que : ce sont les bons fichiers, qu’on a pensé à en réduire la taille, qu’ils sont lisibles par tout le monde (on évite les .docx et autres), etc…
4. Quand on est bien sûr de tout, hop, hit sur le bouton 4 et le transfert commence !

IV. Gestion des Sections

1. Les sections, présentation & exemples

Pour faire simple, en gros, dans Joomla!, la section est un gros conteneur pour un sujet particulier (ex : section « tutorat », section « santé publique »). Elles sont peu nombreuses et vous n’aurez en général à en gérer qu’une seule.
L’intérêt, évidemment, c’est l’organisation : elles permettent de trier les différents articles selon leur sujet. En fait, Joomla! Contient des sections, qui contiennent elles-mêmes des catégories, catégories qui contiennent enfin les articles. Dans l’autre sens, quand vous créez un article, vous devez indiquer la section qui le contient ainsi que sa catégorie.

2. Les sections, mise en garde

Ici encore c’est pas le bordel : une section c’est une grosse partie, donc ne créez pas des sections a tout va : une section roneo pour Laura, une Santé put’ pour Auré, etc… ça suffira largement !

3. Création d’une section

Dans le menu principal vous avez un bouton « gestion des sections ». Let’s Go !

Nous obtenons alors le gestionnaire des sections, qui nous indique les différents sections du site ainsi que leurs propriétés. Nous allons en créer une nouvelle (bouton « nouveau »)



Nous aboutissons alors sur cette page de gestion :



Dans l’ordre :
1 – C’est le titre de notre section. Ex : Tutorat
2 – C’est un autre nom que l’on peut donner à la section, il est facultatif
3 – Ici on peut choisir si la section (et donc le contenu) est publié ou non. Mettez toujours OUI.
4 – Il y a trois niveau d’accès : Public=votre petit frère peut tout consulter
Privé=il faut être inscrit & connecté pour consulter le contenu
Spécial=Réservé aux admins. Ne l’utilisez pas.
5 – Pour une description de la section, c’est pas très utile (car en effet vous allez plus tard créer un article complet qui présentera votre section (ex : présentation du tutorat))

On valide le champ en cliquant sur « sauvegarder »


V. Gestion des Catégories


1. Les catégories, présentation & exemples

Elles permettent, tout comme les sections, de trier les articles. Elles sont contenues dans les sections, ce qui implique donc qu’elles ont un sujet plus précis que les sections. Ex : La section tutorat pourra contenir les catégories « News », « Présentation/géneral », « ressources », « planning », etc…

2. Les catégories, mise en garde

Vous l’avez compris, il ne faut pas en abuser, car à vouloir trop trier on risque d’obtenir l’effet inverse et de ne plus savoir dans quelle section on a mis quoi. Donc, comme d’hab, attention ;]

3. Les catégories, mode d’emploi

Comme pour les sections, menuPrincipal -> « Gestion des catégories » -> « nouveau »



L’interface est quasiment la même que pour la création d’une section, sauf une chose très importante : le champ n°3. Vous devez en effet bien indiquer dans quelle section se trouve votre catégorie. Faites gaffe, on a tendance a vite le zapper, ce champ !


IV. Gestion des articles


Maintenant on attaque la grosse…fin, la dernière partie quoi !

1. Les articles, présentation & exemples

Ils sont la partie visible de votre travail ! Ce seront eux que vous montrerez aux autres utilisateurs, il faudra donc qu’ils soient particulièrement soignés ! Si vous avez bien suivi, les articles sont contenus dans des catégories, elles-mêmes contenues dans des sections.
Ex : L’article « Résultats de la Colle de bioch’ du 18/10 » contenu dans la catégorie « résultats » elle-même contenue dans la section « tutorat ». Attention c’est juste un exemple, libre à vous d’organiser tout ça comme vous le souhaitez ! Le tout est que ça soit organisé, justement !
Vous pouvez y mettre des images que vous avez uploadé, des liens vers des fichiers à télécharger, des liens tout court… Libre à vous !

2. Les articles, mise en garde

Comme d’hab’ une petite mise en garde, histoire que vous gardiez à l’esprit que je suis relou ! ^^
Tout d’abord, toujours penser à rester organisé, et donc à bien mettre ses articles dans la bonne section et dans la bonne catégorie de cette section…
Ensuite, pensez à mettre les infos à jour, et à supprimer ce qui ne sert plus (l’article qui présente l’action Lyon Nord au téléthon 2008, il peut passer à la trappe en février 2009 ! (ou du moins être dépublié)

3. Création d’un article, vue générale de l’interface

On clique sur le bouton « nouvel article », et on atterrit là-dessus :



Nous avons dans l’ordre :
1 – Le titre de votre article (ex : Présentation de GAELIS)
2 – Alias du titre (facultatif)
3 – Ici vous indiquez la section dans laquelle l’article sera publié. C’est MAJEUR !
4 – Publication de l’article. A vous de voir en fonction de vos besoins, de l’avancement de celui-ci…
5 – A cocher si votre article doit apparaitre sur la page d’accueil du site… Donc attention, ce n’est pas le cas de tous !
6 – La catégorie de votre article. C’est MAJEUR de l’indiquer !
7 – Pour prévisualiser votre article !

4. Récapitulatif (A), paramètres d’article, paramètres avancés & méta-données (C)

Le gros cadre A

Il contient le récapitulatif de votre article : S’il est publié, le nombre de visites (clics), le nombre de révisions, sa date de création et de modification. Ce sont des infos intéressantes pour un ancien article !

Le gros cadre C

Il contient plusieurs onglets interchangeables :

Le premier, les paramètres de l’article, permettent notamment de définir le niveau d’accès à l’article (enregistré ou public), ce qui est important pour les infos qui ne doivent pas être consultables par tout le monde (résultats du tut’…). Il permet aussi de définir la date de publication et de fin de publication, ce qui est important pour des articles devant être retirés après un certain évènement (ex : après une soirée on peut virer l’article qui la présente !)

Le deuxième est plus complexe, vous n’y toucherez pas en général

Le troisième est plus important, il s’agit des méta-données. Kesako ? Ce sont les informations utilisées par les moteurs de recherche pour référencer les pages web. Par exemple, si vous indiquez dans les « mots-clefs » « paillarde, fanchon, dudule », la personne qui cherche « fanchon » sur Google tombera sur votre page dans les résultats. Attention cependant, il faut se limiter dans les mots-clefs au sujet de la page web ! La « description » est le texte que vous voyez sur Google quand vous cherchez un truc.

Un exemple pour faire plus simple. Je cherche « morue » sur Google. J’obtiens cette liste :



Je vais m’intéresser à la « Fête de la morue de Bègles » (youpi >_< ). Si je visite ce magnifique site et que je demande le code source de la page (ne prenez pas peur ça sera simple !), j’obtiens ça (du moins pour le début :



Je vous fais remarquer la balise (on parle de balises en html) « meta keywords », qui signale les mots clefs : le mot clef « morue » figure dans la liste, justement ! Ce n’est pas un hasard si je suis tombé sur ce site en cherchant ce terme sur Google. Ensuite remarquez la balise « description » : c’est le même texte que celle que vous avez vue sur Google, justement…
Enfin, tout ça pour vous dire que les metas c’est important, et que si vous voulez qu’on tombe sur notre site en cherchant sur Google, ben faudra les remplir pour chaque page !

5. L’interface d’édition
Ben la y’a rien a faire, c’est la gros morceau, donc autant prendre le taureau par les cornes ! Ce sera bientôt fini.



Je vous fais les fonctions de base, pour les plus compliquées je vous laisse voir avec le temps :
1 – Les traditionnels annuler/rétablir
2 – Forme et disposition du texte
3 – C’est pour appliquer un style CSS prédéfini au texte. Autrement dit, un des effets de mise en forme du site, autrement dit on s’en branle.
4 – On s’en tape les babouches aussi
5 – Pour les listes à puces ou numérotées
6 – Pour indenter le texte
7 – Indice-exposant
8 – Pour effacer toute la mise en forme du texte surligné. Retenez-le, ca peut être très pratique parfois
9 – Couper/copier/coller
10 – Très utile, retenez bien ! Le premier sert à coller du texte copié depuis Word (en gardant la mise en forme). Servez-vous-en ! Le deuxième c’est pour copier du texte brut (sans aucun effet de style)
11 – Pour rechercher dans le texte, et rechercher et remplacer
12 – Pour mettre une ancre. Si je parle chinois, regardez là
http://fr.wikipedia.org/wiki/Aide:Lien_ancr%C3%A9
13 – Pour insérer un caractère spécial
14 – Font family, c’est la police utilisée. Gardez celle d’origine SVP, sauf ponctuellement dans une page
15 – Taille de la police
16 – Surlignage, couleur du texte
17 – Les outils de tableau. Ce sont les mêmes que sous word
18 – Pour ajouter un calque, genre une image qui se balade ou quelque chose comme ça.
19 – Pour gérer la position de vos images et de vos calques par rapport au texte (devant, derrière le texte ?
20 – Position absolue ou pas de votre calque
21 – pour mettre des citations, la définition d’un acronyme…
22 – Pour les révisions de texte
23 – Pour éditer le style CSS (c’est plus compliqué)
24 – Pour mettre une tête de bonhomme qui sourit, qui fait la gueule, qui chiale…
25 – Pour mettre un lien ou le briser (quand on le veut plus)
26 – Pour mettre une image
27 – Pour mettre en plein écran la fenêtre d’édition. Essayez, c’est cool !
28 – Je sais plus, mais rien de trop important.
29 – Vous devinerez tout seul
30 – Pour mettre un saut de page, c'est-à-dire que quand vous avez un long article, c’est pour mettre un lien vers la « page 2 », puis la « page 3 »,etc…
31 – Pour mettre une ligne horizontale
Bouton « lire la suite » en bas – Très utile quand votre article est en page d’accueil, il vous permet d’afficher votre texte jusqu'à cette borne, avec un bouton « lire la suite » pour que les gens puissent lire le reste de l’article.

un point pour le mammouth!!

+1 da ^^