Support de formation pour l utilisation des outils de création d articles pour le site Internet de la commune de Neulise réalisé par :

Transcription

1 Support de formation pour l utilisation des outils de création d articles pour le site Internet de la commune de Neulise réalisé par : l architecte de votre image 01 - Ouvrir votre navigateur, nous vous invitons à utiliser " Mozilla Firefox " qui permet d afficher correctement les sites Internet de dernières générations. Ce navigateur permet de gérer correctement les polices de caractères. Saisir ensuite dans la barre d adresse l adresse du site : page 01

2 02 - Voici le site ouvert Allez dans le sous-menu " Connectez-vous " du menu " Contact ". page 02

3 04 - La page " Connectez-vous " s ouvre. Dans le champ avec l icône tapez votre identifiant. Dans le champ avec l icône tapez votre mot de passe puis validez en cliquant sur " Login " Vous voici entré dans les entrailles du C.M.S. Wordpress de Neulise ou Back-end. page 03

4 06 - Allez sur la barre verticale de pictos sur la gauche et survolez le menu " Articles ". Cliquez ensuite sur " Ajouter " Une nouvelle fenêtre " Ajouter un nouvel article " s ouvre. Saisissez le titre (ici : Mon article de test sportif). page 04

5 08 - Sur la droite descendez afin de voir le cartouche " Catégories ". Dans ce même cartouche cochez " Catégorie " " Actualités associations sportives ", ceci permettra de faire apparaître l article dans sa catégorie (Menu " Associations " -> " Actus des associations " -> " Actus sportives ") mais aussi en page d accueil dans " ARTICLES RÉCENTS " Descendez jusqu au cartouche " Extrait ". Puis saisissez un extrait de l article. Cet extrait apparaîtra en page d accueil dans " ARTICLES RÉCENTS " et " Actus sportives ". Il doit inciter le visiteur à cliquer pour en savoir plus. page 05

6 10 - Remontez tout en haut de la page puis cliquez sur " Enregistrer brouillon ". Ensuite cliquez sur " Aperçu ". Lorsque vous cliquez pour demander une quelconque opération, attendez bien que le navigateur ait bien fini de travailler avant de lancer une autre manipulation Un nouvel onglet de navigateur s ouvre. Vous pouvez constater que votre identifiant apparaît ainsi que la date de création, la catégorie à laquelle l article appartient et le titre de l article. Fermez ce nouvel onglet afin de revenir sur le Back-end page 06

7 12 - À présent vous allez importer des images afin de les intégrer à votre article. Survolez sur la gauche le picto " Médias " puis cliquez sur " Ajouter " Cette nouvelle fenêtre s ouvre. Cliquez sur " Sélectionner des fichiers ". page 07

8 14 - Récupérez sur votre ordinateur les photos afin de les importer dans la bibliothèque. Ici nous prenons 2 photos Une fois sélectionnées, les photos se téléchargent sur le serveur en ligne automatiquement. page 08

9 16 - Une fois les photos téléchargées cliquez sur " Afficher " sur la première photo La première photo se déploie. Tapez un nouveau titre explicite ainsi qu un texte alternatif qui permettra d'améliorer le référencement du site dans les moteurs de recherche. page 09

10 18 - Répétez la même opération : cliquer sur " Afficher " sur la deuxième photo et tapez un nouveau titre explicite ainsi qu un texte alternatif qui permettra d'améliorer le référencement du site dans les moteurs de recherche. Cliquez ensuite sur " Enregistrer toutes les modifications " Survolez sur la gauche le picto " Articles " et cliquez sur " Tous les articles ". page 10

11 20 - La pages de tous vos articles s affiche. Survolez " Modifier " sur votre article puis cliquez (ici " Mon article de test sportif ") Votre article s affiche. Descendez afin de visualiser le cartouche " Image à la une " situé en bas à droite. Cliquez sur " Mettre une image à la une ". page 11

12 22 - Une fenêtre blanche sur fond sombre s ouvre. Cliquez sur " Bibliothèque " L onglet Bibliothèque s ouvre. Vous retrouvez ainsi vos photos précédemment importées. Cliquez sur " Afficher " situé en face de votre première photo. page 12

13 24 - Dans cette nouvelle fenêtre descendez un peu afin de visualiser " Cible du lien ", puis cliquez sur " Aucun ". Et enfin cliquez sur " Utiliser comme image à la une ". Cliquez sur la croix en haut à droite pour fermer la fenêtre Votre article s affiche de nouveau avec dans le cartouche " Image à la une ", la photo que vous venez de sélectionner. Remontez tout en haut de votre page d article. page 13

14 26 - Cliquez sur " Enregistrer brouillon ", puis sur " Aperçu " Un nouvel onglet de navigateur s ouvre. Vous pouvez observer l ajout de votre photo sur votre article. page 14

15 28 - Fermez l onglet précédemment ouvert et retournez ainsi sur votre page d article en mode back-end. Puis descendez votre page jusqu à trouver le cartouche " Layout Builder ", puis cliquez sur " Add a Column " Nous allons maintenant créer le canevas du corps de l'article. Cliquez-glissez " Resizable Column " jusqu à " Drag a Module Onto Your Canvas " situé en dessous. page 15

16 30 - Un cartouche gris clair " Resizable Column " s affiche, puis cliquez sur " Add a Module " Un nouvel onglet de fonctions apparaît. Cliquez-glissez le bouton " Text Block " dans le cartouche " Resizable Column " en gris clair que vous venez de créer. page 16

17 32 - Un cartouche bleu " Text Block " est créé. Cliquez sur la droite de ce cartouche afin d ouvrir ce panneau " Text Block " Vous allez à présent compléter le texte de votre article. Pour cela, cliquez sur le bouton " Afficher/cacher " les options si celles-ci ne sont pas déjà affichées. page 17

18 34 - Cliquez sur le picto " Coller du texte simple ", ceci permettra de supprimer tous les embellissements et formatages de texte (gras, italiques, tabulations, listes ) et on évitera ainsi les bugs de typographie. Cette opération est indispensable, mais vous pouvez si vous le souhaitez saisir tout simplement votre texte directement depuis le back-end WordPress de Neulise Une petite fenêtre sur fond sombre s ouvre, collez le texte (que vous aurez préalablement copié depuis un fichier de traitement de texte par exemple) puis cliquez sur " Insérer ". page 18

19 36 - Vérifiez que vos retours de ligne n'aient pas été mal interprétés par le logiciel, ce qui peut arriver. Votre texte apparaît désormais dans votre mise en page Nous allons à présent formater le texte. Sélectionnez votre sous-titre " SAISON " puis cliquez sur la fonction située juste au dessus afin de sélectionner " Titre 2 ". page 19

20 38 - Sélectionnez les 3 lignes d introduction puis cliquez dans la barre d outils sur " B " afin de passer cette introduction en gras Sélectionnez les 3 paragraphes 1 par 1 puis cliquez dans la barre d outils sur " Liste non ordonnée " afin de les transformer en liste à puce. page 20

21 40 - Sélectionnez les 2 lignes plus bas puis cliquez dans la barre d outils sur " I " afin de passer ces lignes en italique Sélectionnez le numéro de téléphone puis cliquez dans la barre d outils sur " B " afin de passer ce téléphone en gras. page 21

22 42 - Cliquez sur " Enregistrer les modifications " afin de fermer cette fonction Vous allez à présent créer une mise en évidence dans un bloc gris. Pour cela repérez dans " Add a Module " la fonction " Text Block " et glissez-la en dessous du " Text Block bleu " existant. Ensuite cliquez sur le bouton sur la droite de cette nouvelle fonction afin de l ouvrir. page 22

23 44 - Cliquez sur le picto " Coller du texte simple ", ceci permettra de supprimer tous les embellissements et formatages de texte (gras, italiques, tabulations, listes ) et on évitera ainsi les bugs de typographie. Cette opération est indispensable, mais vous pouvez si vous le souhaitez saisir tout simplement votre texte directement depuis le back-end WordPress de Neulise Une petite fenêtre sur fond sombre s ouvre, collez votre texte à l intérieur puis cliquez sur " Insérer ". page 23

24 46 - Une fois le texte collé, sélectionnez-le et cliquez sur " afin de faire une mise en évidence dans un bloc gris. Enfin cliquez sur " Enregistrer les modifications " Cliquez sur " Save Changes " et remontez tout en haut de votre fenêtre. page 24

25 48 - Cliquez sur " Enregistrer brouillon " puis sur " Aperçu " Un nouvel onglet de navigateur s ouvre. Vous pouvez observer le formatage de votre texte sur votre article. page 25

26 50 - Si vous descendez un peu, vous pouvez observer l ajout de votre mise en évidence sur cartouche gris clair. Fermez cet onglet de navigateur afin de retrouver l'onglet du back-end Vous allez créer à présent un diaporama automatique. Dans votre back-end descendez jusqu'à voir " Layout Builder ", puis cliquez-glissez la fonction " Image Slider " située dans " Add a Module " en dessous du dernier Text Block bleu. page 26

27 52 - Cliquez sur la droite de cette fonction " Image Slider " afin de la déployer Vous allez à présent importer dans ce diaporama les photos que vous avez importé plus tôt. Saisissez les mêmes paramètres que sur cette capture d'écran. Cliquez sur " Add Slider Image ". page 27

28 54 - Une fenêtre sur fond sombre s'ouvre, cliquez sur " Bibliothèque " Sélectionnez une première photo en cliquant sur " Afficher " puis cliquez sur " Insert Into Slider ". page 28

29 56 - Cliquez de nouveau sur " Add Slider Image " Une fenêtre sur fond sombre s'ouvre, cliquez sur " Bibliothèque ". page 29

30 58 - Sélectionnez votre deuxième photo en cliquant sur " Afficher " puis cliquez sur " Insert Into Slider " Cliquez sur " Enregistrer les modifications ". page 30

31 60 - Cliquez sur " Save Changes " et remontez tout en haut de la fenêtre Cliquez sur " Enregistrer brouillon " puis sur " Aperçu ". page 31

32 62 - Un nouvel onglet de navigateur s ouvre. Vous pouvez observer l ajout de votre diaporama automatique au bas de votre article. Fermez cet onglet afin de revenir en mode back-end Descendez afin de voir le panneau " Add a Module " avec ses fonctions " Add a Module ". Nous allons créer à présent un Bloc Témoignage, pour ce faire, cliquez-glissez " Testimonial " en dessous du dernier Text Block bleu. page 32

33 64 - Une fois fait, cliquez sur l'icône d'ouverture du module " Testimonial " bleu créé afin de le déployer Commencez par cliquer sur " Upload " afin d'insérer la photo de la personne qui témoigne. page 33

34 66 - Une fenêtre sur fond sombre s'ouvre, cliquez sur " Bibliothèque " Cette fois tapez le nom de la photo à rechercher (ici hubert_roffat) puis cliquez sur " Chercher parmi les médias ". page 34

35 68 - La photo recherchée apparaît, cliquez alors sur " Use This Image " Remplissez ensuite les champs " Author Name ", " Company's Position " et " Author Site URL ". Cliquez ensuite sur le picto " Coller du texte simple ". page 35

36 70 - Collez votre texte de témoignage puis cliquez sur " Insérer " Cliquez sur " Enregistrer les modifications ". page 36

37 72 - Et enfin cliquez sur " Save Changes ". Remontez tout en haut de votre fanêtre d'article Cliquez sur " Enregistrer brouillon " puis sur " Aperçu ". page 37

38 74 - Un second onglet de navigateur apparaît avec l'ajout du bloc témoignage. Fermez cet onglet de navigateur afin de retourner sur l'onglet back-end Vous allez associer des mots-clefs qui serviront à la recherche de votre article et au référencement. Descendez jusqu'à trouver sur la droite le cartouche " Mots-clefs ". Dans le champ Mots-clefs saisissez un premier mot ayant un rapport direct avec le contenu de votre article et figurant dans le corps de l'article, puis cliquez sur " Ajouter " et ainsi de suite. Une fois fini, cliquez sur Enregistrer brouillon. page 38

39 76 - Votre article est à présent terminé. Vous devez cliquer sur " Soumettre à relecture " pour que l'équipe de la mairie qui possède les droits de publication sur le site valide votre article. La mairie recevra automatiquement un courriel pour signaler que vous avez créé cet article. Une fois que l'équipe de la mairie valide et donc publie votre article, vous recevrez un courriel en anglais vous signalant que votre article a été validé et publié Nous vous conseillons d'utiliser des images au format " JPEG ". Le format de compression de fichier bitmap JPEG doit-être utilisé de façon logique et toujours égale. Le nom des photos ne doit contenir que des minuscules sans accents, des " - " et des " _ " seulement et doivent se terminer avec l'extension ".jpeg " ou ".jpg ". Évitez les noms trop compliqués, mais privilégiez des noms avec un rapport avec la photo (ex : clocher-eglise_01.jpg ou la-mairie-et-son-maire_01.jpg. Si vous possédez plusieurs photos d'une même série nommez-les ainsi : la-mairie-et-son-maire_01.jpg, la-mairie-et-son-maire_02.jpg). Chaque photo doit avoir une taille de 9x6 cm en 300 dpi et un taux de compression de 6 sur une échelle de 1 à 10. Ceci permettra d avoir un poids de fichier pas trop lourd et une qualité d image sans trop de pixels apparents et disgracieux. Privilégiez les photos au format paysage (9x6 cm, 9 étant la largeur), si vous avez des notions en retouche photos et la possibilité de les éditer, essayez de régler au mieux les niveaux, les courbes et les contrastes afin que vos photos ne soient pas trop sombres, ceci évitera de faire des pâtés sombres dans la mise en page de votre article (au plus une photo est petite au plus elle paraît sombre). Pour chaque article essayez d insérer au moins deux photos (une qui servira d'en tête d article en tant qu image à la une et une deuxième pour remplir le diaporama avec la première). page 39

40 Voici quelques règles élémentaires de typographie selon l'académie Française, l'imprimerie Nationale et le CFPJ (Centre de Formation pour les Journalistes). Il est impératif de les respecter, sachez que pour qu'un code soit vu et compris sans équivoque par tout le monde il doit-être écrit toujours de la même façon. Attention cette liste n'est pas exhaustive, si vous êtes intéressé pour en savoir plus, n'hésitez-pas à faire une recherche sur Internet et vous trouverez des tas d'ouvrages gratuits en ligne sur les règles typographiques Pour faire apparaître tous les caractères typographiques disponibles et utilisables pour vos articles, cliquez sur " Insérer un caractère particulier " dans la barre d'outil de votre article (ici " Block Text ") Voici tous les caractères particuliers disponibles. page 40

41 78-4 QUELQUES RÈGLES ÉLÉMENTAIRES DE TYPOGRAPHIE : LA PONCTUATION Fin de phrase : mmm. Mmm Virgule : mmm, mmm Deux-points : mmm : Mmm Point virgule : mmm ; mmm Point d exclamation : mmm! Mmm Point d interrogation : mmm? Mmm Trait d union : mmm-mmm Tiret en début de liste : - mmm Parenthèse ouvrante et fermante : mmm (mmm mmm) mmm Guillemet Français ouvrant et fermant : mmm «mmm mmm» mmm Point de suspension : mmm Virgule et point de suspension : mmm, QUELQUES RÈGLES ÉLÉMENTAIRES DE TYPOGRAPHIE : LES ABRÉVIATIONS On écrit : etc., et la suite de la phrase On écrit : etc. pour la fin de phrase On n'écrit pas : etc, On n'écrit pas : etc article : art. bulletin : bull. tome : t. page, pages : p. numéro : n O N O numéros : n os document : doc. édition : éd. sous la direction de : sld [en anglais ed.] et collaborateurs : et coll. [et non et al.] note de la rédaction : n.d.l.r. confer (= voir) : cf. [en romain] c est-à-dire : c.-à-d. [et non c.a.d ni i.e.] Monsieur : M. Madame : Mme Adjectif : premier : 1 er, ou 1er première : 1 re, ou 1re premières : 1 res, ou 1res deuxième : 2 e, ou 2e On veillera à utiliser systématiquement les capitales accentuées, y compris sur la préposition À. C'est également valable sur la première lettre en début de phrase : (ex. «À vos souhaits»). page 41

42 79 - Voici une variante pour n'importer qu'une photo dans votre article : Dans votre article ouvert en mode backend descendez afin de trouver " Layout Builder " et cliquez sur " Add a Module " puis sélectionnez la fonction " Image " afin de la faire glisser en dessous de votre block bleu " Text Block ". CLiquez ensuite sur le bouton à droite pour déployer cette fonction Cliquez sur " Upload ". page 42

43 81 - Une fenêtre sur fond sombre s'ouvre. Cliquez sur " Bibliothèque " Sélectionnez votre photo en cliquant sur " Afficher ". page 43

44 83 - Une fois la fenêtre déployée, cliquez sur le bouton " Use This Image " situé un peu plus bas Remplissez ensuite le champ " Image Title " 'saisissez un titre pour votre image. page 44

45 85 - Cliquez ensuite sur le bouton " Enregistrer les modifications " Cliquez ensuite sur le bouton " Save Changes ". page 45

46 87 - Remontez tout en haut de votre fenêtre d'article puis cliquez sur " Enregistrer brouillon " et ensuite sur " Aperçu " Voilà votre image seule, cliquez dessus pour l'afficher en plus grand. page 46

47 89 - ÉQUIPE DE LA MAIRIE : vous allez recevoir une alerte par courriel à chaque fois qu'un article aura été créé. Il vous suffira de cliquer sur le lien bleu " Adresse pour approuver et publier ". Votre navigateur (si il a été configuré normalement) devrait ouvrir automatiquement la page du site Si vous n'êtes pas connecté, la page ci-dessous s'ouvrira, Il vous faudra alors taper votre " Identifiant " et votre " Mot de passe ". page 47

48 91 - Enfin, voilà la page de l'article reçu. Il vous suffit alors de la vérifier et de la valider en cliquant sur " Publier ". Une fois cette opération faite, cet article sera mis en ligne et un courriel automatique sera envoyé à l'auteur de l'article pour lui signaler que son article a été approuvé et est publié à présent sur le site. Pour plus de renseignements : la clique à bill, un interlocuteur unique : - Pour la réflexion, l organisation et la création de votre communication visuelle - Pour la création de vos photos - Pour la prise en charge et la gestion de toutes vos impressions - Pour la création et la gestion de votre site Internet, medias numériques et marketing web - Pour la prise en charge et la gestion de tout objet publicitaire la clique à bill, studio de création photo-graphique global contact@laclique-abill.com LES RATIS NEULISE l architecte de votre image page 48