Rédacteur 2 SPIP Samedi 24 mars 2018 Philippe Giron, diacre permanent Mission Internet
Sommaire Quelques rappels Référencer un site web Documents et images Les raccourcis typographiques Le porte-plume et les enluminures Les tableaux L’agenda en ligne Autres astuces Quelques règles d’écriture
Introduction Site de SPIP : http://www.spip.net/ Site diocésain : http://saintbrieuc-treguier.catholique.fr/ Site de documentation : http://internet22.catholique.fr/ Site de tests : http://ww2.internet22.catholique.fr/ La version de SPIP décrite : 3.1.x (x = 8 actuellement) Ce document présente les fonctions du rédacteur 2 de SPIP. Les fonctions d'administrateur et de webmestre ont l'objet de deux autres formations.
Formation La formation SPIP qui suit est valable pour les sites SPIP mutualisés du diocèse utilisant SoyezCréateurs. Même version de SPIP Mêmes principes d’administration. Documentation en ligne http://internet22.catholique.fr/-Documentation-redacteur-
Quelques rappels Modifier ses informations personnelles, écrire une brève, écrire un article, référencer un site…
Informations personnelles Regroupe les informations d’un auteur Signature : Prénom Nom selon les sites dans cet ordre. Majuscules seulement aux initiales. Votre adresse email (vous pouvez la changer) Qui êtes-vous ? En deux mots, qui on est, ce qu’on fait… Site web : on peut communiquer son site web personnel ou son blog. Clé PGP : inutilisé a priori sur les sites du diocése. Login : identifiant de connexion (si possible ne pas changer) Mot de passe : il est conseillé de le changer de temps en temps. Logo de l’auteur : conseillé. Si pas de photo, SPIP créée un avatar automatique lié à l’adresse de courriel.
Affichage des informations personnelles Numéro d'ordre chronologique de l’auteur Prénom Nom dans cet ordre Votre photo Clé PGP : non utilisée a priori Adresse de courriel (Peut être changée) Ne pas trop changer son login… Qui êtes- vous ? Votre site web personnel éventuel ou votre blog (ne pas confondre le nom et l’adresse !) …mais on peut changer son mot de passe (très conseillé)
Le rédacteur de SPIP Il faut être enregistré avec un login (identifiant) et un mot de passe pour pouvoir rédiger un article. Les rédacteurs peuvent écrire dans n’importe quelle rubrique – ou presque – donc bien faire attention où est placé l’article. Les rédacteurs ne peuvent pas mettre en ligne les articles eux-mêmes. Par contre, ils peuvent voir tous les nouveaux articles en attente de publication et même donner leur avis grâce à un forum interne lié à tout article.
Article et brève Articles Brèves Signés par une ou plusieurs personnes. Non signées Sujet traité plutôt de fond Sujet traité plutôt conjoncturel Contenu rédactionnel : surtitre, titre, sous-titre, chapeau, texte, post- scriptum. Contenu rédactionnel : titre et texte Site web associé possible Images et documents joints. Images et documents joints, pas de portfolio. Positionnés partout dans le site Positionnées seulement dans les rubriques de plus haut niveau (secteurs)
Article virtuel (1) C’est un article présenté sur le site mais qui n’est pas hébergé dessus. Exemple : Site de Lannion-Pleumeur-Bodou Site de FlickR
Article virtuel (2) Créer un article Lui mettre un titre, un logo Décrire l’article dans la Bulle d’aide Mettre l’adresse réelle de l’article dans la fenêtre REDIRECTION et cliquer sur Changer.
Une image vaut mieux que cent mille mots… (Proverbe chinois) Documents et images Une image vaut mieux que cent mille mots… (Proverbe chinois)
Images Dans les articles et dans les brèves Seuls formats autorisés : jpg, gif, png Insertion : Dans le corps du texte En documents joint, déposée dans le « portfolio » Portfolio : pour les grosses images (plus de 700 px) elles seront vignettisées. Il est souhaitable de mettre un titre à tous les documents (penser aux mal voyants). Pour cacher le titre (il sera seulement visible en infobulle), remplacer doc par img. On peut les télécharger par lots.
Positionnement des images Positionner le curseur à l’endroit où on veut mettre l’image. Cliquer ensuite sur le code de l’image Code : <imgxxx> : image cadrée à gauche <imgxxx|left> : image cadrée à gauche <imgxxx|center> : image cadrée au centre <imgxxx|right> : image cadrée à droite. Ne jamais écrire sur la même ligne <imgxxx|left> <imgxxx|right>
Documents Ça peut être des images Mais aussi du Word, de l’Excel, de la vidéo, du PDF… Une vignette spécifique indique le type du document. Si on les met dans le corps du texte, le code doit être systématiquement <docxxx…> Si on ne les met pas dans le texte, ils s’affichent en bas de l’article.
Cartouches d’insertion Dans la colonne de gauche. Soit par lot Soit image par image (ou document par document) Téléverser : mot français pour « importer vers le site »
Petit diaporama Les images ne sont pas dans le corps du texte. Il faut qu’elles soient dans le portfolio. Défilement Si beaucoup de photos : FlickR
Grand diaporama Déposer les photos dans FlickR Lannion : https://www.flickr.com/photos/paroissedelannion/albums Pleumeur-Bodou : https://www.flickr.com/photos/paroissepleumeurbodou/albums Faire un article avec le titre du diaporama Remplir le champ « Bulle d’aide » Rediriger l’article sur la page FlickR du diaporama (= Article virtuel) Accès à FlickR : voir avec les webmestres
Exemple d'image ajoutée Image 322 callée à droite Image 321 centrée
Ajouter des documents Sert surtout à ajouter des documents en ligne Les documents sont affichés sous forme de vignettes cliquables s’ils sont dans le texte. On peut insérer un document dans le texte (comme une image) ou bien en pièce jointe. Avec les fichiers images, on crée automatiquement un diaporama. Le document d’origine doit être sur l’ordinateur au départ.
Deux façons d'insérer des documents Cartouches d'insertion de documents Sous le texte : l’article a déjà été enregistré par son auteur (Articles seulement) Colonne de gauche : l’article est en cours de modification
Exemple d'insertion de documents Diaporama (images en portfolio) (article seulement) Documents images dans le texte Documents joints (ici : documents PDF)
Retravailler une image Ne pas confondre images et documents. Le format des images est nécessairement : .jpg, .gif ou .png. Il est parfois nécessaire de retailler ou de redimensionner certains images. Les images de plus de 700 px sont réduites automatiquement. SPIP permet de le faire facilement.
Redimensionner une image Dans la fenêtre de l’image cliquer sur Editer cette image. Cliquer sur Réduire l’image et choisir la bonne dimension. L’autre dimension se mettra à jour automatiquement quand on cliquera dedans. Cliquer sur le bouton L’image originale sera enregistrée… pour garder l’image originale. Cliquer sur Valider et continuer.
Recadrer une image Dans la fenêtre de l’image cliquer sur Recadrer cette image. Entrer le ratio de la sélection : libre, 1:1, 4:3, 16:9 Entrer les dimensions de la nouvelle image : Hauteur Largeur Coordonnées du coin sup. gauche (Coordonnées du coin inf. droit) Valider Voir :http://ww2.internet22.catholique .fr/Traitement-d-image
Les raccourcis typographiques Raccourcis communs aux articles et aux brèves, pour se simplifier la vie…
Rappel sur les raccourcis typographiques Ils servent à mettre du texte en gras, en italique, réaliser des tableaux, mettre du texte en couleur… Contrairement à Word, par exemple, ils ne sont pas wysiwyg (« What You See Is What You Get ») Ils apparaissent dans le texte avec des signes spécifiques sans changer l’apparence du texte lui-même. On peut les écrire « à la main ». Il existe des raccourcis par défaut. Attention sur SoyezCréateurs les raccourcis peuvent être un peu différents des versions standards de SPIP.
Rappel : quelques raccourcis sans icône La ligne horizontale de séparation L’espace insécable. Le soulignement Les caractères biffés Les bulles d’aide
Les listes Liste non numérotée Liste numérotée Note -* 1er niveau -** 2ème niveau -*** 3ème niveau -** 2ème niveau Liste numérotée -# 1er ligne -# 2ème ligne -## Sous-niveau numéroté -# Retour à la liste Note On écrit les listes l’une en dessous de l’autre, tout simplement.
Autres raccourcis simples Ligne horizontale de séparation ---- : 4 tirets (du 6) côte à côte (précédés et suivis d’une ligne vide) donneront un trait de séparation horizontal. Espace insécable ~ : (Alt-Gr 2 et espace) correspond au blanc insécable de Word (ou au du HTML) il empêchera les deux mots d’être séparés par un retour à la ligne malvenu. Exemple : 02~96~01~02~03 : le numéro de téléphone restera écrit sur une même ligne. Soulignement (à éviter, réservé aux liens) <u>…texte… </u> s’écrit à la main. Bulle d’aide sur les liens, le glossaire… [CEF|Conférence des évêques de France]
Raccourcis sur les liens Insérer un lien dans une page SPIP est très simple Lien de site web [Visitez ce lien ->http://www.monlien.com/] Lien de courriel [Philippe Giron->philippe.giron@orange.fr] [-> philippe.giron@orange.fr] Lien vers une rubrique interne [->rub25] Le titre de la rubrique s’affichera automatiquement. Généralisation [->art345], [->breve45], [->aut59], [->site16]
Recommandations sur les raccourcis A priori, ne pas mélanger les raccourcis En tous cas : Ne jamais mélanger les intertitres avec d’autres raccourcis (par exemple mettre du gras dans les intertitres !) Ne jamais utiliser autre chose que les intertitres pour faire des intertitres : c’est un problème d’accessibilité. On peut écrire tous les raccourcis à la main.
Le porte-plume et les enluminures Une barre de raccourcis pour se faciliter plus l’édition
Les intertitres Ces 2 derniers intertitres (rarement utilisés) n’ont pas d’icônes, ils sont à faire « à la main » : Intertitre de 1er niveau : {{{…bla…}}} Intertitre de 4e niveau : {{{****…bla…}}} Intertitre de 2e niveau : {{{**…bla…}}} Intertitre de 5e niveau : {{{*****…bla…}}} Intertitre de 3e niveau : {{{***…bla…}}}
Liens hypertextes Sélectionner le texte que l’on veut transformer en lien Cliquer sur le bouton de la barre Enter l’adresse du lien (web, courriel…) Valider
Surligner le texte de la note puis cliquer ici Notes de bas de page Surligner le texte de la note puis cliquer ici Les appels de note sont cliquables et les retours aussi. L’incrémentation des indices est automatique. Codage à la main ? Comparer les deux tableaux ! Texte à afficher : Je suis allé à Stockholm (1) la semaine dernière. (1) Capitale de la Suède Codage « à la main » : Je suis allé à Stockholm[[Capitale de la Suède]] la semaine dernière.
Ecriture « à la main » de raccourcis Liens hypertextes (rappels) Forme générale [->lien] ou [titre->lien] Liens externes au site [Nom du site web->http://wwwmonsite.fr/] [Philippe Giron->philippe.giron@orange.fr] [->philippe.giron@orange.fr] Liens internes au site Article : [->artxxx] Rubrique : [->rubxxx] Brève : [->brevexxx] Auteur : [->autxxx] Site web : [->sitexxx] Notes de bas de page Texte[[Texte de la note]].
Liste des raccourcis « texte » Mise en évidence : [*texte en évidence*] Mise en évidence (variante) : [**texte en évidence (autre couleur)*] Mise en exposant : <sup>texte en exposant</sup> Petites capitales : <sc> texte en petite capitales</sc> Biffé : <del>texte biffé</del> Bulle d’aide : [GPL|Gnu Public Licence] Et aussi sur les entrées de glossaire Wikipédia : [?GPL|Gnu Public Licence] Lien avec bulle d’aide [texte du lien|Le site officiel de SPIP-> http://www.spip.net/] Ancre et retour à l’ancre [definition_ancre<-] et [retour à l’ancre-> #definition_ancre]
Appel des caractères spéciaux Guillemets de 1er niveau Guillemets de 2e niveau Passer en majuscules Passer en minuscules Il est facile d’ajouter des caractères spéciaux : lettres accentuées, symbole de l’euro… Cliquer sur l’icône Cliquer sur le caractère à insérer. Il sera inséré à l’endroit du curseur.
Tous les raccourcis typographiques Ils sont visibles à cette adresse : http://internet22.catholique.fr/Les-raccourcis- typographiques-de
Gérer les tableaux avec SPIP : c’est très simple.
Traitement des tableaux Les tableaux se traitent par un raccourci typographique. Créer ou modifier un tableau : mais c’est très simple ! C’est un outil puissant qui permet de gérer des tableaux même avec des cellules fusionnées.
Ajouter ou modifier un tableau Gérer un tableau Ajouter ou modifier un tableau Pour créer un tableau : cliquer sur le bouton. Pour modifier un tableau existant : sélectionner le tableau entier avec la souris et cliquer sur le bouton. On peut les créer « à la main », mais c’est relativement compliqué. Attention à garder une ligne blanche après le tableau dans la fenêtre Texte.
Installation d’un tableau Dans l’article en modification. Cliquer sur le bouton On a la fenêtre suivante, qui est le tableau par défaut. Le tableau se positionnera où se trouve le curseur.
Exemple de tableau La ligne supérieure est toujours réservée pour le nom des colonnes. On ne peut pas changer le style d’un tableau (programmation des « feuilles de style » CSS). Il faut mettre un titre au tableau. Le tableau est codé dans l’article, c’est difficile de le modifier « à la main ».
Remplir le tableau Titre du tableau Résumé du tableau (obligatoire pour des raisons d’accessibilité) Ajouter une colonne avant Ajouter une ligne au-dessus Supprimer la ligne Supprimer la colonne On remplit chaque cellule avant de valider le tableau. On peut laisser des cellules vides. La première ligne du tableau accueille toujours les intitulés des colonnes.
Modifier un tableau Surligner l’ensemble du tableau avec la souris, même le titre du tableau. Cliquer sur le raccourci typographique.
Tableaux avec fusion de cellules On peut fusionner des cellules de façon simple. On utilise toujours le raccourci typographique de gestion des tableaux.
Créer un tableau avec cellules fusionnées Jamais sur la 1re ligne < : fusionne la cellule avec la précédente On peut fusionner plusieurs cellules en hauteur ou en largeur. ^ : fusionne la cellule avec celle du dessus
Cellule fusionnée avec celle du dessus Codage « à la main » Le tableau précédent se code de la façon suivante. On comprend l’usage du raccourcis typographique ! Résumé du tableau Titre du tableau cellule fusionnée avec celle à gauche ||Tableau avec fusion|Test de tableau avec cellules fusionnées|| |{{Colonne 1}}|{{Colonne 2}}|{{Colonne 3}}| |Ligne 1|Cellule fusionnée avec la suivante|<| |Ligne 2|Cellule fusionnée avec celle du dessous|Normale| |Ligne 3|^|Normale aussi| Les intitulés des colonnes sont par défaut en gras Cellule fusionnée avec celle du dessus Séparateur | (Alt-Gr 6)
Chaque structure présente sur le diocèse a ou aura son agenda… L’agenda en ligne Chaque structure présente sur le diocèse a ou aura son agenda…
Mettre à jour son agenda Chaque paroisse, service, communauté ou mouvement du diocèse a la possibilité d’avoir un agenda qui peut être mis à jour. Dans une paroisse il peut y avoir plusieurs agendas : Catéchisme, vie paroissiale, mouvements… Un agenda est un article dans lequel on entre des événements. Pour mettre à jour son agenda, il faut être administrateur (restreint ou non), ou être auteur de l’article, donc de l’agenda. Un auteur pouvant donc modifier son agenda, le principe est expliqué diapo suivante.
Principe Il n’y a pas besoin de mettre l’article en modification pour modifier l’agenda. Les événements peuvent être ajoutés, modifiés, supprimés. Les événements passés n’apparaissent plus. Attention en supprimant un article passé : vérifier que l’événement n’est pas répété (voir plus loin).
Créer un événement (1) Aller dans l’article dans lequel on veut ajouter un événement. Remplacer le titre de l’article par l’article de l’événement Positionner date et heure Même jour : les deux dates doivent être les mêmes L’heure est facultative Horaire de début seulement : les deux horaires doivent être les mêmes Indiquer les répétitions éventuelles Suite
Créer un événement (2) Mettre un descriptif en utilisant les raccourcis typographiques Indiquer le lieu. Choisir un ou deux mots clés, s’il y a lieu..
Les mots-clés de l’événement Ils peuvent varier selon les sites. Ils servent à donner des caractéristiques des événements : Thème de l’agenda Concert Repas Pèlerinage Etc _AgendaStatut Entré gratuite Réservation obligatoire Etc. Les webmestres peuvent les gérer : Edition > Mots-clés > _AgendaStatut ou …> Thèmes de l’Agenda
Modifier un événement On ne peut modifier que les événements que si on est auteur de l’agenda. Cliquer sur le titre de l’événement Le cartouche s’ouvre et on peut modifier l’événement. Ne pas oublier d’enregistrer les modification
Autres astuces On ne sait jamais tout…
La vidéo en ligne On suppose que la vidéo existe sur Youtube par exemple. Créer un article, lui mettre (sans obligation) le titre de la vidéo. Récupérer le code d’intégration (pas seulement le lien !) Le coller dans le chapeau. Ajouter éventuellement du texte dans la partie Texte. Vidéo à la une : positionner le mot-clé VideoALaUne dans le groupe _Specialisation. La vidéo apparait dans la colonne de droite, correctement dimensionnée.
Les articles à la une Ce sont des articles qui ont le mot-clé ALaUne du groupe _Specialisation validé. Les rédacteurs peuvent valider ce mot-clé avant de demander la publication. Les administrateurs jugeront… ;-)
L’éditorial Les éditoriaux sont à ranger dans la même rubrique. Mettre le mot-clé EDITO dans le groupe _Specialisation Mettre la photo de l’auteur en logo de l’article. Titre : Mois année : Titre Surtitre : Edito L’auteur de l’article est l’auteur de l’éditorial. Ne pas signer en bas de l’édito, puisque l’auteur est déjà indiqué. Ne pas ajouter de pjotos dans l’article.
Les archives Les articles anciens ne sont pas tous à jeter. Mais ils encombrent les menus ! Solution : le mot-clé Archives dans le groupe _Specialisation_Rubrique_ou_Article L’article n’apparaît pas dans les menus mais est toujours accessible par les moteurs de recherche. Pour voir les Archives , cliquer sur le bouton Archives en haut à droite d’un article. Valable pour les articles et les rubriques.
Les ancres (liens internes) Une ancre est un point dans une page sur lequel on souhaitera faire pointer un lien. Aller au §3 Retour haut de page... Il n’y a plus d’icône dans la barre. Les sous-titres de 1er niveau ont une ancre automatique (Sommaire) Principe : [texte->#nom_ancre] crée un lien vers l'ancre nom_ancre [#nom_ancre<-] crée l'ancre #nom_ancre
Rappel : l’utilisation des raccourcis Nécessaires pour une bonne accessibilité Les malvoyants utilisent des appareils de lecture audios. Donc le texte a besoin d’être structuré et sa structure soit être reconnue. Indispensable et donc obligatoires Respect de la hiérarchie des sous-titres En premier {{{…}}} Puis, dans l’ordre : {{{**…}}}, {{{***…}}}, etc… Pas de sous-titres hors des raccourcis officiels : Pas de [*<sc>Mon sous-titre</sc>*] qui n’est pas pris pour un sous-titre.
Rappel : composition du texte Eviter les tout en majuscules dans une phrase, utiliser plutôt le gras. Parallèlement ne mettre du gras et des italiques que pour des raisons précises. Truc de la presse écrite : Le 1er paragraphe n’a pas de sous-titre Tous les autres en ont un. Contrairement à la presse écrite : Ce qui est important est en tête. Extrêmement conseillé : un descriptif d’une ou deux phrases.
Et maintenant... à vous la parole sur vos site ! Merci de votre attention !