tutoriel joomla content editor pour l`univers de l`entraineur.com

TUTORIEL JOOMLA CONTENT EDITOR
POUR L’UNIVERS DE L’ENTRAINEUR.COM
V1.0
TUTORIEL JCE - EDITEUR
Le nouvel outil pour vos articles...
Pour les plus anciens d’entre vous, vous avez connu la transmission des articles sous NVU, à Pierre (Malonapi)
à l’occasion de la nouvelle version d’UDE, nous vous proposons de faciliter votre travail et de surtout simplifier nos procédures.
Première étape vous devez être loggué
Le message suivant s’affiche
Dans le menu du site, vous trouverez le bouton «Le club UDE» , le
dernier sous-menu est le bouton «Staff», là vous avez trois choix :
- Proposer un article Foot : cela concerne les articles portraits, bilan de championnat, bref tous les articles touchant au foot de la
vie réelle.
- Proposer un article FM : cela concerne tous les articles sur FM09,
championnats, équipes, joueurs ...
- Proposer un article CM : le pendant de FM, pour les articles
CM09.
Une nouvelle page s’ouvre.
On a en premier le Titre facile à deviner, ce sera le titre de l’article.
En deuxième position, on a la sélection de la catégorie. C’est
un point important, il faut être vigilant sur la catégorie que vous
sélectionnez, même si ca reste modifiable... Vous trouverez en
annexe les différentes sections et catégories du site.
Tous les outils sont répartis au-dessus de la zone de texte. Je ne
vais pas tous les détailler, car ils ne seront pas tous utiles, si vous
voulez des précisions supplémentaires, vous pouvez consulter
le site sarki.ch
Sur la nouvelle page qui s’est ouverte, il y a deux zones de texte, la première concerne le texte d’introduction, c’est le texte que vous
trouverez sur la page d’accueil du site. On a pris l’option de toujours l’accompagner d’une image de 100x100 px et d’un texte à droite
de cette dernière. Vous trouverez la procédure pour traiter l’introduction à la page suivante...
Tutoriel JCE - Joomla Content Editor pour l’Univers De l’Entraineur.com | v1.0 || Novembre 2008
1
On insert tout d’abord un tableau
Cliquer sur le bouton «Inserts a new tables» (1)
Dans la fenêtre qui s’ouvre, choisissez 2 colonnes et 1 ligne (2)
Puis cliquez sur le bouton Insert (3)
Vous obtenez ceci. Oui ce n’est pas joli, mais c’est pas grave les
bordures seront invisibles au final...
Donc dans la cellule 1, il faut mettre l’image et dans la cellule 2,
il faut mettre le texte.
On arrive au point le plus critique de ce tutoriel...
Pour insérer une image, il faut cliquer sur le bouton Insert/Edit
Image (1)
Une nouvelle fenêtre s’ouvre... qui est en fait un navigateur des
dossiers images qui sont présents sur le serveur UDE. Vous pouvez
accéder au dossier souhaité soit par le (2) soit par le (3).
Le (4) vous indique les fichiers ou dossiers présents dans le répertoire où vous êtes. Bref c’est le même fonctionnement que votre
explorateur Windows...
En (5), vous avez la photo sélectionnée, mais surtout l’information
concernant la taille de l’image.
Enfin en (6) vous avez des boutons très utiles :
- Le premier est pour remonter dans le dossier source
- Le deuxième vous permet de créer un nouveau dossier
- Le troisième est pour enregistrer une de vos images sur le serveur. Attention cette option est à utiliser avec justesse, si vous
uploadez une image, il faudra qu’elle corresponde à la charte
graphique, que vous pouvez consulter sur le forum (section graphisme), et donc qu’elle porte un nom spécifique.
- Le quatrième ouvre l’aide de JCE (en anglais), mais de toute façon, vous en avez pas besoin vous avez ce tutoriel...
Dans le cadre sur la partie haute de la fenêtre, et comme vous
l’aurez sûrement deviné, la première ligne reprend le chemin de
votre image
La deuxième ligne Description, le texte saisi s’affichera lorsque
l’image ne peut être chargée ou lors de l’ouverture de votre page.
Sur la capture, j’ai seulement indiqué le nom de l’image, il vous
2
est demandé de saisir un texte plus explicite du genre ‘Logo UDE
FM 2009 Football Manager 2009’.
Enfin la troisième ligne Title concerne le message qui s’affiche
lorsque la souris est immobile sur l’image. Là encore soyez assez
précis. Si vous souhaitez rendre votre image cliquable, il est inutile de renseigner ce champ, il le sera par la suite.
Remarque, il est possible de revenir à la fenêtre image pour y
faire des modifications, en effectuant un clic droit sur l’image.
Pour valider, il faut cliquer sur le bouton Insert.
Tutoriel JCE - Joomla Content Editor pour l’Univers De l’Entraineur.com | v1.0 || Novembre 2008
On a parlé des images cliquables... On va donc le traiter.
Alors on sélectionne son image (ou son texte, les deux sont possibles et la méthode est identique), puis on clique sur les maillons
de la chaîne (attention il y a celui de la chaîne brisée, vous l’aurez
deviné c’est pour supprimer un lien existant).
Et là devinez quoi, une nouvelle fenêtre s’ouvre...
J’en entends déjà qui disent pourquoi on à de nouveau URL ?
C’est tout simplement que cette fois c’est l’adresse de la page où
vous souhaitez que le lecteur se dirige en cas de clic.
Je passe sur Anchors, Target est plus intéressant, vous pouvez
décider d’ouvrir une nouvelle fenêtre, un nouvel onglet...
Title comme pour la photo, c’est le message qui s’affiche lorsque
la souris est immobile sur l’image, je vous avais alors dis de ne pas
le renseigner car c’est ici qu’il faut le faire, en effet par défaut, c’est
le titre de l’image qui s’affiche. Soyez explicite dans le texte, par
exemple : ‘Suivez la Liga espagnole sur le Forum UDE’
Vous pouvez aussi indiquer une adresse mail...
Mais le plus beau se situe dans le dernier cadre. Car je suis sûr
vous ne savez pas le lien exact menant vers la section Actu Foot
par exemple, plutôt que de passer par un copié collé, choisissez
Section puis la section souhaitée, ou alors la catégorie ou même
un article... Par ce biais, vous n’aurez pas à saisir d’adresse dans
le champ URL.
On peut maintenant passer au texte d’accompagnement, à moins que ce soit l’image qui accompagne le texte, comment ca vous êtes perdus ?
Alors le souhait ici c’est que le texte d’introduction soit au maximum
aussi haut que l’image, ce qui correspond à peu près à 80 mots.
Vous tapez directement votre texte dans la cellule 2, ne vous fiez
pas à la police de base, sélectionnez l’intégralité de votre texte et
sélectionnez le menu format Paragraph. Cette opération permet d’indiquer à votre navigateur le format du texte que vous
souhaitez.
Vous allez me dire, que c’est long et dire qu’on a fait que le texte d’introduction....
Rassurez vous, on a vu les éléments clefs, car que ce soit pour votre texte d’introduction ou le texte de l’article, les outils sont les
mêmes...
Passons maintenant à la mise en place de l’article.
Tutoriel JCE - Joomla Content Editor pour l’Univers De l’Entraineur.com | v1.0 || Novembre 2008
3
Là vous êtes devant votre page blanche, vous avez plusieurs solutions, soit vous tapez directement votre texte dans la zone dédié,
soit vous avez déjà votre texte qui est réalisé sur l’éditeur de texte
de votre choix (word, notepad, éditeur de texte quelconque...).
Personnellement j’utilise Notepad++ un logiciel gratuit qui permet d’éditer pas mal de codage (HTML, CSS, document texte...)
Si vous êtes dans le deuxième cas, passez obligatoirement par le
bouton Past as Plain Text (en effet il existe trois bouton coller),
ce dernier est le plus adapté car il supprime tous les effets sur les
textes (mise en gras, italique, titre...), il est donc inutile de le faire
avec votre éditeur de texte.
Vous avez maintenant un ou des gros pavés. On va les mettre en forme, si vous êtes attentifs, vous savez déjà comment faire...
Mais si souvenez vous le menu déroulant Format où nous avions sélectionné Paragraph pour notre texte d’introduction. Il faut
donc sélectionner à nouveau Paragraph pour vos paragraphes, quelle logique implacable.
Et pour vos titres... Heading 1, heading 2... Il n’est pas question de trouver un heading supérieur sans le heading inférieur.
N’hésitez pas à bien aérer vos articles...
Vous le savez, on utilise des images en 300x150 px pour égayer
nos articles.
Pour les intégrer, on créé le même tableau que pour le texte d’introduction. On ajoutera une légende à la droite de la photo.
Mais on veut aussi que le tout soit centré.
Pour ce faire, on indique à JCE que l’on souhaite un alignement
centré.
Dernier point, vous souhaitez peut-être intégrer une vidéo dans
votre article, rien de plus facile. Cette fois, il faut aller chercher
l’information sur le site où la vidéo se trouve (Youtube, Dailymotion...), vous trouverez une des mentions suivantes :
Sélectionnez l’intégralité de la ligne et copiez la.
Retournez sur l’édition de votre article
Cliquez sur le bouton avec les balises < >
Une fenêtre s’ouvre, positionnez le curseur au bon endroit et collez le code par un Ctrl+V.
Le code que vous avez saisi débute par <object width=»425»
height=»344»>
Insérez le code suivant sur la ligne avant : <div align=»center»>
A la fin du code de la vidéo, Insérez </div>
Voilà ce tutoriel est à présent terminé, si vous avez des questions, vous pouvez vous rendre sur le forum dans la section Le rdv des
Modos UDE et poser votre question dans le fil JCE . Ce document évoluera en fonction de vos demandes...
En espérant que ce n’était pas trop long et assez explicite
4
Tutoriel JCE - Joomla Content Editor pour l’Univers De l’Entraineur.com | v1.0 || Novembre 2008