Formation SPIP : Rédacteur

samedi 14 mai 2011
par  JMG
popularité : 100%

>Initialement rédigé à l’attention des membres de EVP dont le site sert de modèle

>

 UTILISER SPIP EN QUALITÉ DE RÉDACTEUR

Version 1.5a du 5 juin 2011

Document disponible au téléchargement, en bas de l’article

 1. Qu’est-ce-que SPIP ?

SPIP est d’abord destiné à vous permettre de publier sur internet (presque) tout ce que vous voulez, textes, images, vidéos, musiques.... sans vous préoccuper de la technique !

Vous avez accès à un espace privé perso dans lequel vous peaufinez votre communication avant de choisir de la mettre en ligne et de la rendre accessible à tous.

Le programme prend alors en charge ce « contenu » et s’occupe de tout.

Rassurez vous, même depuis cette partie privée, vous ne pouvez pas planter le système !

 2. Comment ça marche

Vos données sont insérées dans des gabarits (squelettes ou templates) écrits en un langage compris et géré par votre navigateur.

Elles sont envoyées chez l’hébergeur et rangées dans une base de données d’où elles sont ressorties et traitées en fonction de la demande des utilisateurs.

 3. Définitions

3.1 Visiteurs, rédacteurs, administrateurs, administrateurs restreints, webmestre(s)

Spip étant conçu pour permettre le travail collaboratif, sa gestion des « possibilités d’accès » est à la carte

  • Visiteurs : ce sont les utilisateurs qui viennent sur le site ; ils peuvent disposer de quelques droits comme écrire des commentaires, participer aux forums, s’inscrire à des mailing-listes, des flux RSS...
  • Rédacteurs : ont accès à l’espace privé où ils peuvent proposer des articles avec du texte, des vidéos, images... Pour être publiées, ces propositions doivent être validées par un administrateur.
  • Administrateurs : ont accès à l’espace privé et ont « tous les droits » sur le site, dont la publication des articles proposés par les rédacteurs.
  • Administrateurs restreints : la même chose que les administrateurs mais sur un choix de rubriques seulement
    Sur notre site, tous les membres de l’ensemble sont « Administrateurs restreints » de la rubrique « Blog ».

Mais la rubrique blog n’est pas visible du grand public, seulement des membres de l’ensemble lorsqu’ils s’identifient.

Ceci permet une inter-communication libre.

  • Webmestre : il a accès au code et peut tout faire, même étendre les fonctionnalités initiales de Spip
    Le webmestre à la charge technique de mettre à votre dispositions tous les outils dont vous avez besoin, les administrateurs sont en charge de la ligne éditoriale, sans possibilité d’accès au code.

>

3.2 S’identifier

A droite il y a un pavé bleu très foncé avec la case connexion

On clique sur connexion

Apparaît à gauche un petit formulaire « Se connecter comme membre du site », remplir avec le login et le mot de passe, valider.

>

Vous remarquez qu’il y a la rubrique Blog en plus, en haut à droite et la possibilité d’accéder à l’ « Espace privé » dans le pavé bleu foncé :

Le nom de l’auteur, ici « Collectif » est aussi inscrit.

>

3.3 Espace public

C’est le site à disposition des internautes.

>

3.4 Espace public restreint

Quand vous vous identifiez, le menu des rubriques offre une possibilité supplémentaire, ici « Blog » (cette possibilité n’est pas native dans le logiciel mais organisée par le webmestre)

>

3.5 Espace privé

C’est la partie où vous préparez vos communications

Cela se présente comme ça :

 4. Le contenu

Le contenu du site permet de définir les pages du site.

Les deux éléments principaux du contenu sont :

  • les rubriques (‘équivalents’ des dossiers) ;
  • les articles (‘équivalents’ des fichiers).

>

On peut ainsi créer une arborescence de rubriques et d’articles.

À chaque rubrique ou article, SPIP affecte un numéro définitif qui les identifie dans le site.

4.1 Exemple d’arborescence

Voici un extrait du plan d’arborescence actuel du site :

# : rubrique ;

o : article ;

>

# Notre Directeur

o Graham O’Reilly

>

# Les choriste

o Les unes et les autres

o Les choristes instrumentistes

>

# Concerts

# Artistes Professionnels invités

o Chanteurs et accompagnateurs

>

etc etc....

>

Note : En bas de la page d’accueil du site, sur sa partie publique, on peut cliquer sur « plan du site »

>

4.2 Les rubriques

L’arborescence des rubriques est gérée automatiquement par le menu horizontal sous l’image et le logo, avec effet accordéon

TRES IMPORTANT :

Une rubrique apparaît dans le menu du site public si elle (ou si une de ses sous-rubriques) contient un article publié (c’est-à-dire mis à disposition des internautes).

Lorsqu’on clique sur la rubrique dans ce menu, la rubrique est affichée. Cependant si la rubrique ne contient qu’un seul article, c’est l’article de la rubrique qui est affiché et non la rubrique.

>

4.3 Les articles

Un article n’apparaît dans le site public que s’il est publié (c’est-à-dire mis à disposition des internautes) ou prévisualisé (article proposé à l’évaluation).

La règle de développement est donc de publier les articles, une fois qu’ils sont terminés, ou pour les tester en réel, ou alors de les tester en prévisualisation.

>

Pour ce faire : après avoir terminé votre article, enregistrez le (en bas à droite)

Sous le numéro, en haut à gauche, s’affiche le numéro de l’article puis différentes options dont « proposé à l’évaluation »

Un clic sur cette option permet d’utiliser l’option « Prévisualiser » (après un message de mise en garde où on répond « OK »

 5. Le développement du site

Il y a deux grands types de personnes qui développent le site. On les appelle des « auteurs », ce sont :

  • les administrateurs 
  • les rédacteurs

>

 6. Développer

Pour développer, allez dans votre espace privé.

Entrer votre login et votre mot de passe ( voir 3.1)

Vous pouvez ensuite créer des articles et des rubriques.

Concentrons nous sur la création d’un article dans « Blog ».

Un clic sur « Édition » (en haut à gauche, voir 3.5) :

On est à la racine du site :

Un clic sur « 8.Blog »

Un autre sur « Écrire un nouvel article »

>

Tout est prêt

6.1 Le titre

Vous pouvez saisir le titre avec un numéro qui sert au classement des articles et des rubriques. En effet, les articles ou les rubriques sont classés dans le site par numéro croissant.

Ce numéro sera suivi d’un point et d’un espace (par exemple, 10. Titre). Il n’apparaît pas pour les internautes et peut être modifié.

6.2 La zone de saisie

C’est une zone Wiki, c’est-à-dire que l’on peut définir la mise en page de façon typographique avec essentiellement les éléments suivants :

  • texte 
  • images, vidéos, son 
  • liens

Le système génère ensuite automatiquement la mise en page.

On peut ajouter d’autres objets comme des formulaires, plus généralement des « modèles » ; cette faculté est en cours de développement dans la communauté Spip car cela transforme le produit en véritable « framework » au delà de la destination d’origine de gestion éditoriale...

>

6.2.1 Texte

Le texte est mis en forme à la volée : il comprend des paragraphes qui sont séparés par des lignes blanches.

Il y a quelques commodités typo au dessus de la zone de saisie et la possibilité de « voir » le résultat sans sortir de son travail.

>

Le principe est toujours le même, on sélectionne le morceau de texte et on clique sur la touche de l’effet désiré.

On peut de gauche à droite dans la barre d’outils ci-dessus :

  • créer des intertitres
  • mettre du texte en gras ou en italique

Le logiciel ajoute des accolades par exemple gras est écrit en gras, on peut procéder « à la main » (accolades avec, sur PC, les touches Alt Gr et 4 ou +)

  • créer des listes à puces ou numérotées, avec des indentations

Le niveau 1 est un tiret (du 6, -), le second on ajoute une étoile (-*) et ainsi de suite. Pratique de pouvoir corriger à la main...

  • créer un lien hypertexte
  • transformer en note numérotée de bas de page
  • citer un message
  • utiliser les guillemets français « »
  • utiliser les guillemets anglais " "
  • caractères spéciaux comme les majuscules accentuées

Au survol, des bulles explicatives s’ouvrent

Quelques compléments utiles :

  • les espaces qui se suivent dans le texte équivalent à un seul espace.
  • les lignes blanches qui se suivent dans le texte équivalent à une seule ligne blanche.
  • les sauts de lignes sont ignorés ; pour forcer un saut de ligne, taper en tête de ligne un underscore (« _ », touche du 8) suivi d’un espace.
  • si vous ne voulez pas de mise en forme automatique, tapez le texte brut et mettez-le entre les deux balises réservées <poesie> et </poesie> :
Elle était donc couchée et se laissait aimer
Et du haut du divan elle souriait d’aise
_ À mon amour profond et doux comme la mer,
_ Qui vers elle montait comme vers sa falaise.

Charles Baudelaire

>

Le résultat est différent de <quote>

>

  • du texte entre deux barres droites (Alt Gr et 6) est encadré
  • on fait une ligne de séparation avec 4 tirets (du 6, ----)
  • La plupart des balises HTML sont valides, exemples :
    • <BR> pour les retours à la ligne, les « FONTS » et leurs attributs...
    • <FONT COLOR="ff0000"<texte</FONT< colore le texte en rouge
    • du texte entre <u> et </u> :est souligné
    • ….

Pour être exact, je ne les ai pas toutes testées...

Attention à la balise CENTER (ou préciser center de quoi, voir son cours de HTML favori...)

Si cela ne suffit pas, on peut ajouter quelques améliorations.

Enfin, pour les gourmands, il est possible d’implémenter des « facilités » comme CKEditor.

CKEditor propose une interface très riche :

Mais la mise en place avec des images est capricieuse...

>

Pensez à enregistrer souvent votre travail...

>

Pour revenir à l’édition, « Modifier cet article »

>

6.2.2 Images

Pour insérer des images, il faut d’abord les préparer puis les télécharger.

6.2.2.1 Préparer les images

>

Le poids idéal pour les images est inférieur à 150 kilo-octets, celles qui sortent de l’Appareil Photo Numérique (APN) sont bien plus lourdes.

Sur notre site, toutes les images ont une hauteur de 488 pixels, ça donne un bon effet avec les diaporamas, respecter cette valeur.

Vous pouvez utiliser XnView (http://www.xnview.com/fr/download.html) par exemple qui est gratuit et s’il y a plusieurs images, le traitement peut se faire par « lot » (mode d’emploi avec la version 1.98 de mai 2011) :

  • télécharger et installer XnView
  • créer un dossier destination pour les images redim
  • sélectionner les images à traiter
  • aller dans « outils », « Convertir...
    Indiquer le répertoire de « Destination »
  • tout en haut à gauche, onglet « transformation »
  • sélectionner « Redimensionner », double clic ; redimensionner doit apparaître dans la liste à droite
  • choisir la hauteur en indiquant 488, rien dans la largeur
  • « Lancer » en bas à gauche, c’est terminé
    Quand le lot d’images est traité, on peut l’envoyer dans un fichier zip grâce à l’explorateur de windows.

L’explorateur est accessible par exemple par « Démarrer » puis « Ordinateur », ou « Tous les programmes », « Accessoires »

Mettez-donc un raccourci sur votre bureau !

Depuis l’explorateur, allez dans le répertoire où sont rangées vos images préparées, sélectionnez les toutes, clic sur la patte droite, « Envoyer vers », « Dossier compressé ».

Le fichier zip est créé, nommez-le comme il vous semble.

Vous avez de suite compris que la méthode marche aussi avec vos mails !

Votre ou vos images sont prêtes à être insérées dans votre article.

6.2.2.2 Télécharger les images

Dans votre article en phase écriture, vous avez la possibilité de charger des images :

Un clic sur parcourir, choisir la photo ou le fichier .zip, télécharger

Le logiciel vous propose d’installer le .zip, n’acceptez pas, cochez l’option « décompressé.... »

Valider

Bien sûr avec une seule image on télécharge direct.

Le logiciel numérote automatiquement vos photos.

Une fois qu’une image est téléchargée, elle est utilisable partout dans le site.

N’oubliez pas de saisir le titre de l’image .

Dans le texte de votre article, il faut mettre :

  • <img|left> pour mettre l’image sur la gauche
  • <img|center> pour centrer l’image
  • <img|right> pour mettre l’image sur la droite

>

Si à la place d’img, vous utilisez doc : le titre de l’image sera placé automatiquement sous l’image.

>

Vous pouvez aussi utiliser les diaporamas avec les syntaxes :

<sjcycle112|docs=numéro des images(facultatif)>

Ici « 112 » est le numéro de l’article où sont stockées vos images.

Il se trouve en haut à gauche lorsque vous enregistrez votre article :

Ce numéro n’est pas nécessairement celui de l’article en cours

Cela provoque le défilement des photos, essayez.

Pour avoir le mur d’images, la syntaxe serait : <cooliris|id_article=112>

Copiez ce bout de texte pour l’instruction de vos lecteurs :

Poser le curseur (la souris) sur l’image arrête le défilement du diaporama et fait apparaître le titre de la photo

<cooliris|id_article=xxx>

Le mur d’image évolue avec la souris (clic gauche maintenu et déplacer) et sa molette

Au survol, des miniatures le titre apparaît

Un clic sur une photo : elle s’agrandit avec un halo blanc

Un clic sur l’icône en forme d’écran entre les deux flèches en bas au centre lance le diaporama

Un dernier clic sur les deux flèches en bas à droite et le diaporama passe en plein écran....

>

Il y a beaucoup d’autres possibilités....

6.2.3 Son et Vidéos

Le site dispose d’un lecteur multimédia pour les formats mp3 (son et flv (vidéos)

6.2.3.1 Préparer les vidéos

Le format supporté par la plupart des machines est le Flash Video d’extension .flv

Vous devrez souvent convertir vos fichiers avant de les uploader sur le site, il y a un bon logiciel, Free Video Converter , gratuit et bien propre sur lui (je me sers de la version 2.92.0.0).

L’utilisation est facile, copiez-collez (ou faites glisser) le fichier à convertir, choisissez l’extension (flv) et le format (4/3 ou 16/9).

Pour le son sélectionnez le Codec mp3.

Précisez votre chemin de sortie.

"Convertir".

6.2.3.2 Préparer les sons

Sans tomber dans les usines à gaz, il y a Free Mp3 Wma Converter V1.9

6.2.3.3 Télécharger sons et vidéos

Uploadez vos sons et images comme vos autres documents (fonction télécharger) appelez le lecteur , dans votre article, insérez pour le son :

>

<playliste|id_article=XXX> ou <playliste|site>

>

Au préalable, classez vos enregistrements en mettant une numérotation « nombre » « point » « espace »

>

Pareil pour la vidéo avec la syntaxe :

>

<playliste|video>

Là encore les options « |center » « |right » « |left » sont possibles (la barre verticale se fait en pressant conjointement avec la touche du 6/trait d’union avec Alt Gr)

Dans le cas d’un seul enregistrement, vous pouvez utilider :

<docXX|player>

où XX est le numéro de votre fichier son ou vidéo

6.3 Redirection

Lorsqu’on veut pointer :

  • vers un site extérieur 
  • ou bien à l’intérieur du site

>
On crée un lien hypertexte de redirection soit à la main soit avec la touche faite pour ça (« créer un lien hypertexte » en 6.2.1)

Le principe est toujours le même, le texte d’appel du lien et l’adresse de destination sont entre crochets (Alt Gr et 5 et° sur les PC) et séparés par ->

6.3.1 Redirection externe

Pour cette redirection vers l’extérieur du site, l’adresse commence par http://

On prépare l’adresse de destination (copier dans le presse papier), un clic sur la touche « créer un lien hypertexte », coller là où le logiciel vous propose, fini.

Exemple : tapez Directeur, sélectionnez ce mot, un clique sur la touche magique et hop !

[Directeur->http://ensemblevocaldepontoise.net/spip.php?article64]

Le mot qui déclenche la redirection et l’adresse sont entre crochets et séparés d’une flèche -> faite avec le tiret du 6 et le symbole > à côté du W (clavier PC toujours)

6.3.2 Redirection interne

Même principe , on peut faire à la main ou avec la touche, mais l’adresse est simplifiée (pour l’utilisateur) :

  • à la main :
    • le numéro de l’article : [blabla->8] va à l’article 8 en cliquant sur blabla
    • le numéro de la brève avec br devant : [blabla->br 8]
    • le numéro de la rubrique avec rub devant : [blabla->rub 8]
  • avec la touche« créer un lien hypertexte », dans le masque vous remplissez avec 8, br 8, ou rub 8, selon.

6.4 Gestion de l’arborescence

Vous pouvez déplacer les rubriques et les articles à l’intérieur de l’arborescence.

6.5 Supprimer une rubrique

Vous pouvez supprimer une rubrique seulement lorsqu’elle est vide.

6.6 Supprimer un article

Vous ne pouvez pas supprimer un article…

Une façon de faire est de le mettre au statut « refusé » ou « en cours de réalisation » (ne pas le mettre à la « poubelle ») puis de le réutiliser : pour cela, vous pouvez le déplacer dans l’arborescence…

6.7 Supprimer une image

Vous pouvez supprimer une image téléchargée dans un article (vérifier qu’elle n’est plus utilisée dans le site…).

 7. Façon de travailler

7.1 Dans la zone de développement

Le bouton (sous « A suivre », voir 3.5) vous permet aussi d’afficher l’arborescence dans le site de travail et de pouvoir naviguer pour accéder aux rubriques et aux articles.

Le bouton vous permet de basculer sur le site public et de faire vos tests d’affichage dans le site public (n’oubliez pas de publier les articles).

Vous pouvez aussi utiliser la fonctionnalité « Voir en ligne » ou « Prévisualiser » d’un article ou d’une rubrique pour voir dans le site public l’article ou la rubrique correspondante.

>

7.2 Dans le site public

Si les modifications que vous avez faites n’apparaissent pas dans le site public, vous avez en haut à droite un rectangle Recalculer cette page qui vous permet de prendre en compte ces modifications.

Cette option s’obtient dans la partie privée en activant le cookie de correspondance :

>

>

7.3 En cas de problème

  • lié à la communication entre site de travail et site public ;
  • lié à un affichage non conforme

>

Pensez à utiliser Recalculer…

En effet, on utilise des « caches » destinés à stocker des pages toutes faites pour gagner du temps, il faut les mettre à jour 

Votre navigateur fait de même, « Actualisez » votre page ou rechargez-là.

Pour vider le cache utilisez la fonction ad-hoc sous l’icône :

7.4 Problème CGI Error

Le message est généralement : « The specified CGI application misbehaved by not returning a complete set of HTTP headers ».

Le CGI (Common Gateway Interface, interface de passerelle commune) est un programme exécuté côté serveur permettant l’affichage de données traitées par une autre application, comme par exemple un système de gestion de base de données (d’où le nom de passerelle)

Comme on a dit au début, vos pages sont dynamiquement construites pour répondre à l’interrogation de l’internaute.

Le stockage et le traitement de vos données peut être victime de petits désagréments du type de celui-ci.

Si vous rencontrez ce problème :

  • allez dans la barre d’adresse du navigateur, cliquez là où est affichée l’URL courante et relancer cette URL en appuyant sur Entrée
  • sinon quittez le navigateur : puis relancez le navigateur et videz le cache du navigateur et videz l’historique

 8. Fin d’une session

Lorsque vous avez fini de travailler, n’oubliez pas de vous déconnecter .

 9. Contacts

Support technique

>

Pour des renseignements au sujet du développement sous SPIP :

Jean-Marie GOURDIN

  • courriel : jm2210b@orange.fr

>

 10. Pour aller plus loin…

SPIP possède de nombreuses autres possibilités qui n’ont pas été traitées ici. Par exemple :

  • les brèves 
  • pour un article :
    • le sur-titre 
    • le sous-titre 
    • le descriptif rapide 
    • le chapeau 
    • le post-scriptum 
  • pour l’affichage du texte :
    • le centrage de texte 
    • la justification à droite 
    • la création de tableaux 
  • les documents 
  • les galeries de photos 
  • l’agenda 
  • les forums 
  • les mots-clés…

>

Si vous voulez approfondir, allez sur le site officiel de SPIP (www.spip.net) pour consulter la documentation de SPIP.


PS en PJ, la version 1.5a du 5 juin 2011


Documents joints

PDF - 727 ko

Commentaires  Forum fermé

mardi 30 août 2011 à 09h14

Salutation,

Je suis tomb

Agenda

<<

2018

 

<<

Décembre

 

Aujourd’hui

LuMaMeJeVeSaDi
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
Aucun évènement à venir les 6 prochains mois