Tutoriel SPIP

Back office SPIPBack office SPIPMode d’emploiMode d’emploiwww.ccvol.comwww.ccvol.com

La gestion dynamique de La gestion dynamique de contenuscontenus

04/12/23 2

La gestion de contenu dynamiqueLa gestion de contenu dynamique

Le rédacteur accède à l’interface d’administration du site pour alimenter,

modifier ou supprimer son contenu en texte et images. Il n’a pas besoin de connaissances

techniques particulières

Le visiteur consulte le site développé par SPIP à partir des éléments intégrés par le

rédacteur.

Les opérations se font par l’intermédiaire des navigateurs habituels.

Connections à l’interface par login et mot de passe

http://www.monsite.comhttp://www.monsite.com/ecrire

04/12/23 3

Extranet*Extranet*Espace de Espace de

travailtravailpartagépartagé

Extranet*Extranet*Espace de Espace de

travailtravailpartagépartagé

Site Site « Grand « Grand public »public »

Site Site « Grand « Grand public »public »

Espace Espace «utilisateurs«utilisateurs

»»

Espace Espace «utilisateurs«utilisateurs

»»

Contenu éditorialContenu éditorialPrésentationMissionsServicespartenaires

Espace Espace AdministratiAdministrati

on on

Espace Espace AdministratiAdministrati

on on

Fonctions interactives Fonctions interactives et rubriques et rubriques réservées aux réservées aux

visiteurs habilitésvisiteurs habilités

Forumdocumentation réservée

Fonctions et Fonctions et rubriques réservées rubriques réservées

aux utilisateurs aux utilisateurs internesinternes

méthodes et outilsDocumentationEspace de travail

FonctionnalitésFonctionnalités Agendaactu Rechercheliens

Espace Internet libre Consultation sur internet

à accès restreint

Interface d’administration

Une seule interface web

Administration du Administration du sitesite

Rédaction des articlesNewsletterModération ForumGestion des droits d’accèsEtc…

Organisation générale du siteOrganisation générale du site

04/12/23 4

Racine du siteRacine du siteRacine du siteRacine du site

Architectures et organisation du contenuArchitectures et organisation du contenu

Rubrique Rubrique 11








Sous Sous rubriqrubriq

ueue


ueue


ueue


ueue

Article

Article

Article

Article

Article

Article

Article

Article

Article

Article

Article

ArticleArticl

e

Article

Article

ArticleArticl

e

ArticleArticl

e

Article

Article

ArticleArticl

e

ArticleArticl

e

Article


ueue


ueue


ueue


ueue


ueue


ueue


ueue


ueue

Article

Article

Article

ArticleArticl

e

ArticleArticl

e

Article

04/12/23 5

La gestion de contenu dynamiqueLa gestion de contenu dynamique

Une interface Web intuitive : proposition d’articles et de brèves gestion éditoriale du site mise en forme un texte sans avoir à

utiliser le langage HTML (raccourcis typographiques)

contribution rédactionnelle accessible à tous, et aussi simple que l’écriture d’un e-mail.

http://www.spip.net/fr_article464.html

Accéder à l’interface Accéder à l’interface d’administrationd’administration

Mode d’emploiMode d’emploi

04/12/23 7

Se connecter à l’administrationSe connecter à l’administration

Pour se connecter en tant qu’administrateur ou rédacteur sur http://www.ccvol.com/ il faut :

Taper le lien http://www.ccvol.com/ecrire dans

le champ adresse du navigateur.

04/12/23 8


Vous arrivez alors sur l’écran suivant : Entrez votre login et validez

04/12/23 9


Ecran suivant : Entrez votre mot de passe et validez

Présentation de Présentation de l’interface l’interface

d’administration de d’administration de SPIPSPIP

DécouverteDécouverte

04/12/23 11

Les différents éléments affichésLes différents éléments affichés

Deux lignes de boutons d’outils principaux

Commandes éditorialesIdentité

Rubriques

Articles à valider

Articles en cours de rédaction

04/12/23 12

L’interface d’administrationL’interface d’administration

Interface : Vous êtes maintenant sur l’interface qui vous

permet de gérer le contenu du site.

Vous pouvez créer une Rubrique ou un article depuis n’importe quelle

page en utilisant le menu.

04/12/23 13

L’interface d’administrationL’interface d’administration

Interface : L’interface vous donne accès à Plusieurs

niveaux dans l’arborescence :

Les sous rubriques

Les articles

Les rubriques

04/12/23 14

Le menu de l’interfaceLe menu de l’interface

Permet de revenir au site public

Comme son nom l’indique, il s’agit de

l’aide en ligne. Attention, elle n’est

pas locale et suppose donc une connexion à

l’Interne

Écran de l’interface privée par défaut. Elle présente l’état du site

et de ses propres travaux, en cours ou

non. On est à la racine, prêt à naviguer

Il s’agit d’un forum interne,

chaque article en possède un

On a ici accès à la liste des auteurs

(rédacteurs et administrateurs

Parties « Statistiques » et « configuration »

réservées aux administrateurs

04/12/23 15

Le menu de l’interfaceLe menu de l’interface

Moteur de recherche interne :

remplacer Rechercher avec le mot

dont on cherche les occurences.

Messagerie personnelle :

permet de noter des

penses-bêtes dans l’agenda

et de communiquer

en interne avec les autres

membres.

Navigation sur l’ensemble du

site Si on clique sur la boule de l’icône, on peut

déplier toute l’arborescence..

Navigation rapide : affiche vos articles en

cours de rédaction, les

articles proposés à l’évaluation, les

boutons de création de

brèves, d’articles...

Agenda, permet un affichage journalier,

hebdomadaire, mensuel

Suivre la vie du site :

permet de synchroniser un agenda compatible iCal (Mozilla Calendar de Firefox par

exemple), de connaître les adresses de

syndication...

Modifier son profil Modifier son profil utilisateurutilisateur


04/12/23 17

Modifier son profil utilisateur Modifier son profil utilisateur

Pour modifier votre profil utilisateur (nom, login, mot de passe, adresse mail,…), cliquez votre login dans le menu principal.

Informations personnelles

04/12/23 18

Cliquez sur « modifier cet utilisateur »


04/12/23 19

Modifiez ou complétez les champs souhaités

Une fois les modifications effectuées, cliquez sur « enregistrer »


Créer une rubrique ou Créer une rubrique ou une sous rubriqueune sous rubrique


04/12/23 21

Seul les administrateurs du site peuvent créer une rubrique ou une sous rubrique.

Cliquez sur

« Créer une rubrique »

Créer une rubriqueCréer une rubrique

04/12/23 22

La procédure pour une rubrique ou une sous rubrique est la même, il suffit d’affecter votre rubrique à la racine du site pour qu’elle soit de niveau 1 (rubrique) ou à une rubrique ou sous rubrique existante pour qu’elle soit de niveau 2, 3, 4 ou plus (sous rubrique).

Remplissez les champs

(au moins le titre)

Indiquez si la rubrique se rattache à la racine du site ou si elle est une sous

rubrique d’une rubrique déjà

existante.

Enregistrez


04/12/23 23

Une fois la rubrique créée, il est toujours possible de la modifier ou de la supprimer après l’avoir enregistrée.

Pour modifier la rubrique

Pour supprimer la rubrique (Si cette

dernière possède des d’articles ou des sous rubriques, supprimez

ou déplacez ces derniers avant de la

supprimer)


Rédiger mettre un Rédiger mettre un article en lignearticle en ligne


04/12/23 25

Vous avez un statut de rédacteur, vous pouvez rédiger un article, ce dernier devra être valider par un administrateur pour être publié.

Vous avez un statut d’administrateur, vous pouvez rédiger un article et le publier directement vous même.

Cliquez sur

« Ecrire un nouvel article »

Proposer un articleProposer un article

04/12/23 26

Rédigez votre article directement dans cette interface ou faites un « copier-coller » à partir de votre logiciel de traitement de texte.

Cliquez ensuite sur « enregistrer » pour valider et

afficher un aperçu de la mise en forme.

Préciser la rubrique (partie du site ou sera publié votre article)Vous pouvez déplacer un article en lui affectant une autre rubrique de votre choix

Sous-titre (si besoin)

Titre (obligatoire)

Descriptif (si besoin)

Chapeau

Raccourcis typographiques (mise en forme de votre texte)

Texte


04/12/23 27

Votre article est prêt à être publié. Vous pouvez toujours revenir en arrière pour le modifier.

N’oubliez pas d’ajouter les mots-clés nécessaires (voir tutoriel mots-clés).

« Votre article est : » Mettez « proposer à l’évaluation » si vous êtes rédacteur.

Mettez « publié en ligne » si vous êtes administrateur.

Pour supprimer un article, sélectionnez « mettre à la poubelle » et validez.

Vous pouvez joindre un document en le téléchargeant directement depuis votre ordinateur

Numéro de l’article


Gestion des mots clésGestion des mots clés


04/12/23 29

Un mot-clé est une information attribuée à une rubrique ou à un article et qui détermine son lieu ou sa modalité d’affichage dans le site. Ex : Un mot-clé « page d’accueil de rubrique » sera associé à un article si l’on veut que ce dernier s’affiche sur la page d’accueil de sa rubrique.

Les mots-clé sont déterminés à la construction du site.

ATTENTION, toute modification ou suppression de mot-clé dans l’interface d’administration risquerait d’affecter l’affichage correct des contenus.

Qu’est-ce qu’un mot-clé?Qu’est-ce qu’un mot-clé?

04/12/23 30

1. Dépliez le cadre « mot-clé »

2. Sélectionnez le mot-clé choisi et cliquez sur « choisir »

3. Le nouveau mot-clé vient s’ajouter dans la liste

Une fois votre article rédigé, vous pouvez lui affecter un mot-clé en fonction de sa destination et de ses modalités d’affichage.

Liste des mots-clé associé à

l’article.

Affecter un mot-clé à un articleAffecter un mot-clé à un article

04/12/23 31

Liste des mots-clésListe des mots-clés

Nom Attribution Effet ExempleActualités + archives Fonction de la rubrique Mise en page de rubriques de

type actualitésActualités et évènements

Agenda Fonction de la rubrique Mise en page de rubriques de type « agenda » (affichage de la liste des évènements contenus dans les articles de la rubrique)

Spectacles et animations

Annuaires de liens Fonction de la rubrique Mise en page de rubriques de type « Annuaires de liens »

Multilingue Fonction de la rubrique Pour les rubriques dont la page d’accueil doit afficher un résumé des articles multilingues.

Logements anciens

Réservé Fonction de la rubriqueRubrique avec accueil simple Fonction de la rubrique Mise en page des rubriques à

accueil simpleAccès et transports

Rubrique avec descriptif des articles et sous rubriques

Fonction de la rubrique Mise en page de rubriques affichant le descriptif des sous rubriques.

Nos parcs et terrains

Téléchargements Fonction de la rubrique Mise en page de rubriques ne contenant que les documents à télécharger (ex les réunions du conseil communautaires)

Réunions du conseil communautaire

Nom Attribution Effet ExemplePage d’accueil de rubrique Fonction de la page Affiche l’article sur la page

d’accueil de sa rubrique Enfance et éducation

04/12/23 32

Liste des mots-clésListe des mots-clés

Nom Attribution Effet ExempleArticle accueil Options de la page Affiche l’article en page

d’accueil du siteAccueil du site

Brève accueil Options de la page Affiche un résumé de l’article sur la page d’accueil du site dans la partie « en bref »

Accueil du site

Edito accueil Options de la page Affiche l’article dans la partie « Editorial » de la page d’accueil du site

Accueil du site

Page avec menu déroulant Options de la pagePage portfolio Options de la page Affiche l’article avec le

visionneuse d’imageOrdures ménagères

Témoignage Options de la page Affiche un résumé de l’article dans la partie « témoignage » de la page d’accueil de la rubrique

Vie économique

Zoom_accueil Options de la page Affiche un résumé de l’article dans la partie « zoom » de la page d’accueil

Zoom_secteur Options de la page Affiche un résumé de l’article dans la partie « zoom » de la page d’accueil de la rubrique principale

Zoom_rubrique Options de la page Affiche un résumé de l’article dans la partie « zoom » de la page d’accueil de la rubrique

Mettre un article Mettre un article en pageen page


04/12/23 34

SPIP vous offre la possibilité de mettre en forme votre texte en utilisant une barre de mise en forme typographique telle que l’on peut en trouver dans un logiciel de traitement de texte.

Il suffit de surligner le texte à mettre en forme et de cliquez sur l’élément typographique choisi.

Italique Gras Mise en évidence

Exposant

Petites capitales

Interligne 1

Accès à :•Interligne 2 et 3•Alignement du texte•Encadrer le paragraphe•Mode Poésie

Gestion des ancres

Note de bas de page

Glossaire Wikipédia

Lien

Tableau

Mode pré visualisati

on

Caractères spéciaux

Recherche

Mise en forme d’un articleMise en forme d’un article

Accès galerie images

04/12/23 35

Outre la barre de mise en forme pour le texte, vous pouvez agir sur la mise en forme des paragraphes.

Mettre un trait de séparation horizontal : Tapez une succession d’au moins 4 tirets (Tiret 6 sur le clavier pc)

Ex : ---- devient ____________________________________________

Commencer une phrase à la ligne Mettre un tiret bas (tiret 8 sur le clavier pc) + espace avant le premier

mot. Ex : « Je passe directement _ à la ligne » devient

Je passe directementà la ligne

Sauter une ligne Faire un retour chariot comme sur tout traitement de texte.

Mise en forme des paragraphesMise en forme des paragraphes

04/12/23 36

Faire une liste à puces Mettre un tiret (tiret 6 sur le clavier pc) + espace avant le premier mot de

chaque point. Ex : Je peux mettre en forme mes paragraphes - soit en sautant des lignes - soit en revenant à

la ligne -soit en créant une liste à puces. devient Je peux mettre en forme mes paragraphes

Soit en sautant des lignes Soit en revenant à la ligne Soit en créant une liste à puces

Créer des niveaux différents de puces Mettre un tiret (tiret 6 sur le clavier pc) + * + espace avant le premier mot

de chaque point. Ex : - France -*Aquitaine -**Bordeaux

Devient France

Aquitaine

- Bordeaux

Les puces sont personnalisées en fonction de votre charte graphique


04/12/23 37

Faire une liste numérotée Mettre un tiret (tiret 6 sur le clavier pc) + « # »

Ex : - #. Numéro un- #. Numéro deux- #. Numéro troisDevient1. Numéro un2. Numéro deux3. Numéro trois

La numérotation est automatique

Créer des niveaux différents de puces Mettre un tiret (tiret 6 sur le clavier pc) + * + espace avant le premier mot

de chaque point. Ex :

- France -*Aquitaine -**BordeauxDevient

France Aquitaine

- Bordeaux

Les puces sont personnalisées en fonction de votre charte graphique


04/12/23 38

Créer des notes de bas de page Utiliser le bouton de la barre typographique après avoir surligner le texte à

mettre en note. Ex : C’est au CNRS [[Centre National de Recherche Scientifique]] que le projet

fut confié.Devient

C’est au CNRS [1] que le projet fut confié.Et en bas de page : [1] Centre National de Recherche Scientifique

Créer des tableaux Utiliser le bouton de la barre typographique et complétez les informations.

Ex : || titre du tableau | titre du tableau ||| {{nom}} | {{fonction}} || Martin | communication || Dupont | transport |

Les tableaux sont personnalisées en fonction de votre charte graphiqueManuellement : Il suffit de faire des lignes dont les « cases » sont séparées par le symbole « | » (pipe, un

trait vertical) : sur PC : Alt+6 et sur Mac : Alt+maj.+ la lettre « l »

Il est impératif de :

laisser au moins deux lignes vides avant et après ce tableau laisser un espace avant et après chaque | commencer le tableau par || titre | titre ||

Titre du tableau

nom fonction

Martin communication

Dupont transport


Créer des liensCréer des liens


04/12/23 40

Créer des liens hypertextes dans le texte d’une page

Créer un lien depuis l’article Mettre un lien direct vers un site se référant au contenu de l’article

Vous pouvez créer lien soit vers une page externe, soit vers un lien interne, une rubrique ou un article du site. Dans ce cas, il suffit de repérer le numéro de la rubrique ou de l’article et de mettre dans le champs à remplir : art10 ou rub3 par exemple.

1. Surligner le texte devant servir de lienEX : Alternat.net 2. Cliquez sur le bouton « lien »

3. Inscrivez l’adresse complète

4. Cliquez sur OK[Alternat.net->http://www.alternat.net]

DevientAlternat.net

1. Donner un titre (qui apparaîtra en bas de l’article sous la

forme d’un lien)

2. Inscrivez l’adresse complète (Url d’un site ou numéro d’article ou de rubrique de votre site :

ex : art37, rub3,…)

Insérer des liensInsérer des liens

04/12/23 41

Créer un lien vers une adresse mail

Ex : [Contactez-nous->mailto:[email protected]]devient Contactez-nous (lien menant directement vers la messagerie par défaut du visiteur).

Créer des ancres à l’intérieur d’un texte

Une ancre vers le haut de la page

[haut<-]Le début de ma page…..….. la fin de ma page[vers le haut de page->#haut]devient en bas de la pagevers le haut de page (lien cliquable « remontant » le visiteur vers le haut de la page)

Une ancre vers un paragraphe d’une même page

1. Placer une ancre au début du paragraphe concerné : Ex : [par1<-] Le projet consiste en l’élaboration concerté d’une…..2. Créer le lien qui doit renvoyer vers cette partie de texte Ex: [Nature du projet->part1]

Le lien devient Nature du projet et renvoie vers la partie du texte suivant l’ancre.

Il est bien sûr possible de reproduire ce processus dans un texte autant de fois que nécessaire

Insérer des liensInsérer des liens


Intégrer des images Intégrer des images et des documentset des documents

04/12/23 43

Le format

Les trois formats d’images acceptés par tous les navigateurs internet sont :

GIF

JPEG ou JPG

PNG (certains navigateurs n’affichent pas encore ce format correctement)

La taille

Pour certaines zones d’affichage, il est important de ne pas aller au delà d’une certaine taille EX : largeur maxi : 400 pixels. Cela dépend des choix de développement graphiques de votre site.

La résolution

Il est conseillé également de ne pas dépasser une résolution de 72 dpi, la technologie actuelle ne permettant pas d’afficher une résolution plus importante. Au delà l’image serait trop lourde (donc plus lente à afficher) pour un rendu à l’écran identique.

Formats et caractéristiques des Formats et caractéristiques des imagesimages

04/12/23 44

Caractéristiques des logos d’article

Format JPG ou PNG

Un seul logo par article

Les logos d’article sont redimensionnés automatiquement et un filtre automatique est appliqué afin de leur donner une forme s’intégrant à la charte graphique développée.

Formats et caractéristiques des Formats et caractéristiques des imagesimages

04/12/23 45

1. Accédez à l’article dans le quel vous souhaitez insérez l’image

2. Cliquez sur « choisir le fichier » et sélectionner sur votre disque dur

l’image à insérez. Cliquez sur « choisir »

3. Cliquez sur « télécharger »

4. Copier/coller un de ces codes à l’endroit souhaité de votre texte en fonction de la position désirée de

l’image : à gauche, centrée ou à droite du texte.

5. Ajouter un titre et un descriptif si besoin et n’oubliez pas d’enregistrer. (les codes « img » se transformeront

alors en codes « doc »)

Si vous souhaitez supprimer l’image ou la remplacer par une autre, cliquez sur

« supprimer cette image » et supprimer également le code du texte .

Insérer une image dans un articleInsérer une image dans un article

04/12/23 46

1. Accédez à l’article dans le quel vous souhaitez insérez un logo

2. Cliquez sur le cadre relatif au logo de l’article et suivez exactement la même procédure que pour insérer

une image.Le logo s'insère automatiquement à l’endroit prévu sur

la page de votre site

3. Une fois le logo téléchargé, vous pouvez le supprimer en dépliant le cadre avec le petit triangle noir et en cliquant sur « supprimer »

4. Spip offre la possibilité d’intégrer une deuxième image pour créer un effet de

« survol » au passage de la souris.Procédez de la même facon que pour le logo

simple.

Attention ! Si vous supprimer la première image de logo, le logo de survol sera

également supprimé.

Le logo est une image associée à l’article ou à la rubrique. C’est souvent un élément d’identification du contenu et peut servir d’image de lien pour la navigation. C’est pourquoi il n’est possible d’insérer qu’un seul logo par article ou par rubrique.

Insérer un logo d’articleInsérer un logo d’article

04/12/23 47

1. Accédez à l’article dans le quel vous souhaitez insérez le document

2. Cliquez sur « choisir le fichier », sélectionnez le fichier sur votre disque

dur, cliquez sur « choisir », puis sur « télécharger ».

3. Le document est présenté avec une vignette automatique correspondant à son type. Le document est inséré de façon à ce que le visiteur puisse cliquez

sur sa vignette pour le télécharger. Vous pouvez aussi lui affecter une vignette personnalisée.

4. Faites un copier/coller du code dans la partie de l’article choisie. (idem insertion

image)

Vous pouvez joindre un document à un article , soit en pièce jointe, soit directement inséré dans le corps de l’article avec une vignette de prévisualisation.

5. Pour mettre votre document à télécharger hors du texte (en marge), modifiez le code du document : <docX|enmarge>. Ex : <doc7|enmarge>.

Pour inclure une vignette personnalisée.

Pour supprimer le document.

Insérer un document dans un articleInsérer un document dans un article

6. Remplissez les champs « titre » et « descriptif » si besoin avant d’enregistrer

votre article

04/12/23 48

La procédure d’insertion pour un document vidéo ou audio est la même que pour les autres types de documents. Vous avez le choix entre deux types d’insertion :

Inclusion en tant qu’image (document à télécharger) Dans ce cas l’intégration se fait en tant que « doc » ex : <doc10|center>

Inclusion directe (le document peut être lu directement sur la page) Dans ce cas l’intégration se fait en tant que « emb » ex : <emb10|center>

Le choix d’un type d’intégration se fait en fonction de la nature du document à insérer. (voir tableau ci après)

Insérer un document vidéo ou Insérer un document vidéo ou audioaudio

04/12/23 49

Légende image : intégration en tant qu’image embed : lecture directe via plugin non : téléchargement uniquement

Tableau des formatsTableau des formats

04/12/23 50

Légende image : intégration en tant qu’image embed : lecture directe via plugin non : téléchargement uniquement

Tableau des formats (suite)Tableau des formats (suite)

Utiliser l’agendaUtiliser l’agenda


04/12/23 52

La partie « agenda » propose de mettre en ligne sous forme de calendrier tout événement (réunion, congrès, formation,…) associé à un article.

L’accès à l’agenda se fait dans chaque article entré dans l’administration du site

Déplier la partie « agenda » en cliquant sur la flèche.

Entrer un événement dans l’agendaEntrer un événement dans l’agenda

04/12/23 53

1. Remplissez les champs

Titre

Lieu

1. Sélectionner les dates et les horaires si besoin

Descriptif

1. Sélectionner les mots-clés correspondants en dépliant les menus

Type d’événement

Autres mots clés associés

Cliquez sur « ajouter »

Entrer un événement dans l’agendaEntrer un événement dans l’agenda

Tutoriel SPIP

Education

Transcript of Tutoriel SPIP