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 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. 2 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