tutoriel spip
Post on 25-May-2015
27.294 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Rubrique Rubrique 11
Rubrique Rubrique 22
Rubrique Rubrique 22
Rubrique Rubrique 33
Rubrique Rubrique 33
Rubrique Rubrique 44
Rubrique Rubrique 44
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
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
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
ueue
Sous Sous rubriqrubriq
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
Se connecter à l’administrationSe connecter à l’administration
Vous arrivez alors sur l’écran suivant : Entrez votre login et validez
04/12/23 9
Se connecter à l’administrationSe connecter à l’administration
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
Mode d’emploiMode d’emploi
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 »
Modifier son profil Modifier son profil utilisateurutilisateur
04/12/23 19
Modifiez ou complétez les champs souhaités
Une fois les modifications effectuées, cliquez sur « enregistrer »
Modifier son profil Modifier son profil utilisateurutilisateur
Créer une rubrique ou Créer une rubrique ou une sous rubriqueune sous rubrique
Mode d’emploiMode d’emploi
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
Créer une rubriqueCréer une rubrique
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)
Créer une rubriqueCréer une rubrique
Rédiger mettre un Rédiger mettre un article en lignearticle en ligne
Mode d’emploiMode d’emploi
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
Proposer un articleProposer un article
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
Proposer un articleProposer un article
Gestion des mots clésGestion des mots clés
Mode d’emploiMode d’emploi
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
Mode d’emploiMode d’emploi
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
Mise en forme des paragraphesMise en forme des paragraphes
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
Mise en forme des paragraphesMise en forme des paragraphes
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
Mise en forme des paragraphesMise en forme des paragraphes
Créer des liensCréer des liens
Mode d’emploiMode d’emploi
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:contact@alternat.net]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
Mode d’emploiMode d’emploi
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
Mode d’emploiMode d’emploi
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
top related