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 : www.neulise.fr page 01
02 - Voici le site ouvert. 03 - Allez dans le sous-menu " Connectez-vous " du menu " Contact ". page 02
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 ". 05 - Vous voici entré dans les entrailles du C.M.S. Wordpress de Neulise ou Back-end. page 03
06 - Allez sur la barre verticale de pictos sur la gauche et survolez le menu " Articles ". Cliquez ensuite sur " Ajouter ". 07 - Une nouvelle fenêtre " Ajouter un nouvel article " s ouvre. Saisissez le titre (ici : Mon article de test sportif). page 04
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 ". 09 - 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
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. 11 - 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
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 ". 13 - Cette nouvelle fenêtre s ouvre. Cliquez sur " Sélectionner des fichiers ". page 07
14 - Récupérez sur votre ordinateur les photos afin de les importer dans la bibliothèque. Ici nous prenons 2 photos. 15 - Une fois sélectionnées, les photos se téléchargent sur le serveur en ligne automatiquement. page 08
16 - Une fois les photos téléchargées cliquez sur " Afficher " sur la première photo. 17 - 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
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 ". 19 - Survolez sur la gauche le picto " Articles " et cliquez sur " Tous les articles ". page 10
20 - La pages de tous vos articles s affiche. Survolez " Modifier " sur votre article puis cliquez (ici " Mon article de test sportif "). 21 - 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
22 - Une fenêtre blanche sur fond sombre s ouvre. Cliquez sur " Bibliothèque ". 23 - 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
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. 25 - 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
26 - Cliquez sur " Enregistrer brouillon ", puis sur " Aperçu ". 27 - Un nouvel onglet de navigateur s ouvre. Vous pouvez observer l ajout de votre photo sur votre article. page 14
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 ". 29 - 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
30 - Un cartouche gris clair " Resizable Column " s affiche, puis cliquez sur " Add a Module ". 31 - 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
32 - Un cartouche bleu " Text Block " est créé. Cliquez sur la droite de ce cartouche afin d ouvrir ce panneau " Text Block ". 33 - 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
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. 35 - 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
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. 37 - Nous allons à présent formater le texte. Sélectionnez votre sous-titre " SAISON 2013-2014 " puis cliquez sur la fonction située juste au dessus afin de sélectionner " Titre 2 ". page 19
38 - Sélectionnez les 3 lignes d introduction puis cliquez dans la barre d outils sur " B " afin de passer cette introduction en gras. 39 - 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
40 - Sélectionnez les 2 lignes plus bas puis cliquez dans la barre d outils sur " I " afin de passer ces lignes en italique. 41 - 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
42 - Cliquez sur " Enregistrer les modifications " afin de fermer cette fonction. 43 - 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
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. 45 - Une petite fenêtre sur fond sombre s ouvre, collez votre texte à l intérieur puis cliquez sur " Insérer ". page 23
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 ". 47 - Cliquez sur " Save Changes " et remontez tout en haut de votre fenêtre. page 24
48 - Cliquez sur " Enregistrer brouillon " puis sur " Aperçu ". 49 - Un nouvel onglet de navigateur s ouvre. Vous pouvez observer le formatage de votre texte sur votre article. page 25
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. 51 - 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
52 - Cliquez sur la droite de cette fonction " Image Slider " afin de la déployer. 53 - 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
54 - Une fenêtre sur fond sombre s'ouvre, cliquez sur " Bibliothèque ". 55 - Sélectionnez une première photo en cliquant sur " Afficher " puis cliquez sur " Insert Into Slider ". page 28
56 - Cliquez de nouveau sur " Add Slider Image ". 57 - Une fenêtre sur fond sombre s'ouvre, cliquez sur " Bibliothèque ". page 29
58 - Sélectionnez votre deuxième photo en cliquant sur " Afficher " puis cliquez sur " Insert Into Slider ". 59 - Cliquez sur " Enregistrer les modifications ". page 30
60 - Cliquez sur " Save Changes " et remontez tout en haut de la fenêtre. 61 - Cliquez sur " Enregistrer brouillon " puis sur " Aperçu ". page 31
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. 63 - 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
64 - Une fois fait, cliquez sur l'icône d'ouverture du module " Testimonial " bleu créé afin de le déployer. 65 - Commencez par cliquer sur " Upload " afin d'insérer la photo de la personne qui témoigne. page 33
66 - Une fenêtre sur fond sombre s'ouvre, cliquez sur " Bibliothèque ". 67 - Cette fois tapez le nom de la photo à rechercher (ici hubert_roffat) puis cliquez sur " Chercher parmi les médias ". page 34
68 - La photo recherchée apparaît, cliquez alors sur " Use This Image ". 69 - Remplissez ensuite les champs " Author Name ", " Company's Position " et " Author Site URL ". Cliquez ensuite sur le picto " Coller du texte simple ". page 35
70 - Collez votre texte de témoignage puis cliquez sur " Insérer ". 71 - Cliquez sur " Enregistrer les modifications ". page 36
72 - Et enfin cliquez sur " Save Changes ". Remontez tout en haut de votre fanêtre d'article. 73 - Cliquez sur " Enregistrer brouillon " puis sur " Aperçu ". page 37
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. 75 - 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
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é. 77 - 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
78-1 - 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. 78-2 - 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 "). 78-3 - Voici tous les caractères particuliers disponibles. page 40
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
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. 80 - Cliquez sur " Upload ". page 42
81 - Une fenêtre sur fond sombre s'ouvre. Cliquez sur " Bibliothèque ". 82 - Sélectionnez votre photo en cliquant sur " Afficher ". page 43
83 - Une fois la fenêtre déployée, cliquez sur le bouton " Use This Image " situé un peu plus bas. 84 - Remplissez ensuite le champ " Image Title " 'saisissez un titre pour votre image. page 44
85 - Cliquez ensuite sur le bouton " Enregistrer les modifications ". 86 - Cliquez ensuite sur le bouton " Save Changes ". page 45
87 - Remontez tout en haut de votre fenêtre d'article puis cliquez sur " Enregistrer brouillon " et ensuite sur " Aperçu ". 88 - Voilà votre image seule, cliquez dessus pour l'afficher en plus grand. page 46
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. 90 - 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
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 : www.laclique-abill.com 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 04 77 64 65 48 - contact@laclique-abill.com LES RATIS - 42590 NEULISE l architecte de votre image page 48