SPIP

2 047 vues

Publié le

Content Management System

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

SPIP

  1. 1. SPIP (www.spip.net) Saïd Radhouani Université de Genève mars 2005
  2. 2. SPIP - Développement collaboratif de sites <ul><li>Système de Publication sur Internet </li></ul><ul><li>Ensemble de fichiers, installés sur votre compte Web </li></ul><ul><li>Permettent de : </li></ul><ul><ul><li>Gérer un site à plusieurs, </li></ul></ul><ul><ul><li>Mettre en page des articles sans avoir à taper du code HTML, </li></ul></ul><ul><ul><li>Modifier très facilement la structure d'un site avec un simple navigateur </li></ul></ul><ul><li>Avec un simple navigateur, SPIP permet de “ fabriquer” et de tenir un site à jour, grâce à une interface très simple d’utilisation </li></ul>
  3. 3. SPIP - Développement collaboratif de sites <ul><li>SPIP permet de : </li></ul><ul><ul><li>Gérer un site Web de type magazine => composé d’ articles et de brèves insérés dans une arborescence de rubriques imbriquées les unes dans les autres </li></ul></ul><ul><ul><li>Séparer trois types de tâches : </li></ul></ul><ul><ul><ul><li>la composition graphique </li></ul></ul></ul><ul><ul><ul><li>la contribution rédactionnelle via proposition d’articles et de brèves </li></ul></ul></ul><ul><ul><ul><li>la gestion éditoriale du site (tâche qui comprend l’organisation des rubriques, la validation des articles proposés...) </li></ul></ul></ul>
  4. 4. SPIP - Séparation des t âches <ul><li>Webmaster  aspect graphique des pages HTML appelées &quot; squelettes &quot; </li></ul><ul><ul><li>modification de pages &quot;squelettes&quot; </li></ul></ul><ul><ul><li>modification de feuilles de style CSS </li></ul></ul><ul><li>Éditeurs : organisation du site </li></ul><ul><ul><li>création/modification de la hiérarchie des rubriques </li></ul></ul><ul><ul><li>validation des articles </li></ul></ul><ul><li>Rédacteurs : rédaction des pages à l’intérieur du site </li></ul><ul><ul><li>utilisent la hiérarchie de rubriques mais ne peuvent pas la modifier </li></ul></ul>
  5. 5. Principaux éléments de SPIP - Rubriques <ul><li>Une rubrique : espace destiné à accueillir des articles, des brèves (équivalent d'un dossier dans le système de fichiers ) </li></ul><ul><li>Structure de type hiérarchique : rubrique --> sous-rubriques, etc. </li></ul><ul><ul><li>Structure des rubriques => l’ossature du site </li></ul></ul><ul><ul><li>elle détermine : </li></ul></ul><ul><ul><ul><li>l’interface; </li></ul></ul></ul><ul><ul><ul><li>le mode de navigation; </li></ul></ul></ul><ul><ul><ul><li>les relations entre articles et entre brèves... </li></ul></ul></ul><ul><li>Rubriques secteurs (ex. 1 & 2) </li></ul>
  6. 6. Principaux éléments de SPIP - Rubriques <ul><li>pas de structures circulaires -> simplicité d’utilisation </li></ul><ul><li>Seules les rubriques actives (qui contiennent au moins un article publié) sont affichées sur le site public </li></ul><ul><li>On peut attacher un forum à chaque rubrique </li></ul><ul><li>Seuls les administrateurs peuvent créer, modifier ou supprimer des rubriques </li></ul>
  7. 7. Principaux éléments de SPIP - Articles <ul><li>Composé de plusieurs éléments définits au moment de l’administration du site : </li></ul><ul><ul><li>un titre, sous-titre, descriptif, text principal, etc... </li></ul></ul><ul><li>Équivalent d'une page web </li></ul><ul><li>Différents statuts possibles : </li></ul><ul><ul><li>en cours de rédaction </li></ul></ul><ul><ul><li>proposé à la publication </li></ul></ul><ul><ul><li>publié : l’article est publié sur le site public </li></ul></ul><ul><ul><li>refusé : l’article n’est pas publié </li></ul></ul><ul><li>Un article ne peut se trouver que dans une seule rubrique à la fois </li></ul><ul><li>O n peut attacher un forum à chaque article </li></ul>
  8. 8. Principaux éléments de SPIP - Brèves <ul><li>Les brèves : des «articles» de moindre importance que les véritables articles </li></ul><ul><li>Méthode simple et rapide de publication </li></ul><ul><li>Constituées d’un nombre très réduit d’informations : un titre, un texte et un lien hypertexte </li></ul><ul><ul><li>=> idéal pour le suivi de l’actualité, une revue de presse en ligne, etc. </li></ul></ul><ul><li>Gestion plus sommaire que les articles : </li></ul><ul><ul><li>non signées </li></ul></ul><ul><ul><li>mise en place très simple : interface réduite, validation d’un clic </li></ul></ul><ul><li>On peut attacher un forum à chaque brève </li></ul>
  9. 9. Position des brèves dans la structure du site <ul><li>Eviter que les brèves ne fassent double-emploi avec les articles => intégrer uniquement dans les rubriques secteurs </li></ul><ul><li>Exemple: </li></ul><ul><ul><li>brèves dans les rubriques 1 et 2 </li></ul></ul><ul><ul><li>pas dans leurs sous-rubriques (contrairement aux articles). </li></ul></ul><ul><li>=> la présentation de la page des brèves se fait directement en fonction de ces grandes rubriques </li></ul>
  10. 10. Principaux éléments de SPIP – Forums <ul><li>Par défaut, modérés à postériori : chaque message envoyé par un utilisateur du site est immédiatement publié </li></ul><ul><li>A dministrateurs : interface qui permet de lire les derniers messages postés et, éventuellement , de les supprimer </li></ul><ul><li>Administrateur : modifier le comportement des forums en choisissant : </li></ul><ul><ul><li>l’absence totale de forums sur son site </li></ul></ul><ul><ul><li>des forums modérés à priori </li></ul></ul><ul><ul><li>des forums sur abonnement </li></ul></ul><ul><li>Les messages supprimés ne sont pas détruits de la base : mis de côté + adresse IP de l’expéditeur + date et heure de l’envoi </li></ul><ul><li>+ forum à usage interne entre les différents auteurs autorisés à écrire </li></ul>
  11. 11. Principaux éléments de SPIP – mots clés <ul><li>Limitation de SPIP : structure hiérarchique --> un article ne peut appartenir qu’à une seule rubrique </li></ul><ul><li>mots-clés offrent => moyen de navigation transversal à l’intérieur du site </li></ul><ul><li>Associer des mots-clés à un article => navigation entre différents articles portant sur les mêmes thèmes (en créant des liens) </li></ul><ul><li>Les mots-clés n’ont réellement d’intérêt que si chaque mot est associé à plusieurs articles, afin de pouvoir les relier </li></ul><ul><li>Seuls les administrateurs peuvent : </li></ul><ul><ul><li>créer et modifier les mots-clés </li></ul></ul><ul><ul><li>désactiver l’utilisation des mots-clés (interface « configuration précise) </li></ul></ul><ul><li>Si structure des rubriques bien conçue => pas de mots-clés (articles de thèmes similaires se trouvent dans les mêmes rubriques) </li></ul>
  12. 12. Les sites référencés <ul><li>Un système complet permettant de gérer des listes de liens vers d’autres sites </li></ul><ul><li>Il permet de : </li></ul><ul><ul><li>regrouper ces listes dans des rubriques (avec des articles), ou dans des rubriques spécifiques dédiées à cet usage ~~ annuaire de liens) </li></ul></ul><ul><ul><li>attribuer un logo à chaque site </li></ul></ul><ul><ul><li>attribuer des mots-clés pour chaque site référencé </li></ul></ul><ul><ul><li>ajouter un descriptif personnalisé pour chaque site </li></ul></ul><ul><li>Référencer un nouveau site </li></ul><ul><ul><li>Bouton « référencer un nouveau site » dans la page de chaque rubrique </li></ul></ul><ul><ul><li>Méthode «traditionnelle» => indiquer le nom du site, URL, une description </li></ul></ul><ul><li>Référencement rapide : </li></ul><ul><ul><li>indiquer l’URL de la page à référencer et de valider </li></ul></ul><ul><ul><li>SPIP va récupérer automatiquement le titre de la page et un descriptif </li></ul></ul>
  13. 13. Principaux éléments de SPIP – Sites Syndiqués <ul><li>Fabriquer automatiquement un fichier standardisé indiquant les dernières publications du site (backend) </li></ul><ul><li>Aller récupérer de tels fichiers sur le réseau, et de les inclure dans sa propre navigation </li></ul><ul><li>=> Indiquer sur son propre site des listes des dernières publications d’autres sites </li></ul><ul><ul><li>Lorsque ces sites sont mis à jour, les nouveautés apparaissent automatiquement sur votre propre site </li></ul></ul><ul><li>Les sites syndiqués sont indiqués dans les rubriques (de façon à afficher, à côté de ses propres articles, des articles tirés d’autres sites ayant une thématique similaire) </li></ul><ul><li>Demo : http://www.davduf.net/backend.php3 </li></ul>
  14. 14. Fonctionnement du site public <ul><li>Contenu d’un site : stocké dans une base de données MySQL </li></ul><ul><li>Présenter le contenu aux visiteurs => il faut : </li></ul><ul><ul><li>récupérer les données de la base, </li></ul></ul><ul><ul><li>les organiser </li></ul></ul><ul><ul><li>les mettre en page, afin de délivrer une page HTML </li></ul></ul><ul><li>M ise en page : effectuée au moyen de squelettes qui contiennent des instructions permettant d’indiquer où et comment se placent les données dans la page </li></ul><ul><li>S ystème de cache => stocker chaque page + éviter de provoquer des appels à la base de données à chaque visite </li></ul>
  15. 15. Fonctionnement du site public <ul><li>Système de publication automatisé => ne pas redéfinir une interface différente en HTML pour chaque page isolée </li></ul><ul><ul><li>ex. tous les articles bénéficieront de la même interface, le système placera chaque fois des données différentes </li></ul></ul><ul><li>Pour chaque type de document =>deux fichiers : .php3 et .html </li></ul><ul><li>Répertoire principal de SPIP => les couples : article.php3 / article.html, rubrique.php3 / rubrique.html, etc . </li></ul><ul><li>Ces fichiers peuvent être modifiés et d'autres couples peuvent être créés </li></ul>
  16. 16. Modification de l'apparence du site public <ul><li>Deux possibilités : </li></ul><ul><ul><li>Modifier les feuilles de styles tout en gardant la même structure de pages </li></ul></ul><ul><ul><li>ET/OU </li></ul></ul><ul><ul><li>Modifier les squelettes pour créer une nouvelle structure de site </li></ul></ul>
  17. 17. Feuilles de style <ul><li>Les feuilles de styles par défaut sont : </li></ul><ul><li>spip_style.css styles de base http://www.spip.net/fr_article1177.html </li></ul><ul><li>typographie.css polices de caractères, alignement du texte </li></ul><ul><li>habillage.css mise en page des éléments : marges, bordures, éléments </li></ul><ul><li>impression.css utilisée pour l'impression </li></ul><ul><ul><li>ex. lien hypertexte -> désactiver la couleur + afficher l’URL à la suite du lien </li></ul></ul>
  18. 18. Squelettes <ul><li>Leur rôle ~ « modèles » pour la gestion de la mise en page </li></ul><ul><li>Des fichiers à l’extension .html </li></ul><ul><li>Chaque fichier est associé à un type de page différent : </li></ul><ul><ul><li>un squelette pour le sommaire, </li></ul></ul><ul><ul><li>un pour l’affichage des articles, </li></ul></ul><ul><ul><li>un pour l’affichage des rubriques, </li></ul></ul><ul><ul><li>etc. </li></ul></ul><ul><li>Un squelette contient : </li></ul><ul><ul><li>du HTML standard définissant l’habillage de la page, </li></ul></ul><ul><ul><li>Des balises spécifiques à SPIP pour définir quelles informations vont venir « habiter » cet habillage </li></ul></ul>
  19. 19. Squelettes <ul><li>Avant d’utiliser un squelette, il faut pouvoir l’appeler : </li></ul><ul><ul><li>crée r à la racine d u site un fichier , par exemple &quot; tutoriel.php3 &quot; contenant les lignes suivantes : </li></ul></ul><ul><ul><li><? </li></ul></ul><ul><ul><li>$fond = &quot;tutoriel&quot;; </li></ul></ul><ul><ul><li>$delais = 0; </li></ul></ul><ul><ul><li>include &quot;inc-public.php3&quot;; </li></ul></ul><ul><ul><li>?> </li></ul></ul><ul><li>=> fixer deux variables ($fond et $delais) + appeler le fichier qui déclenche le fonctionnement de SPIP (inc-public.php3) </li></ul><ul><li>$fond : nom du fichier qui contient la description de la mise en page ( le squelette ) </li></ul><ul><ul><li>Le fichier de description sera contenu dans tutoriel.html (dans $fond, on n’indique pas la terminaison .html) </li></ul></ul><ul><li>$delais : l’âge maximum pour l’utilisation du fichier stocké en CACHE (fixé en secondes) </li></ul>
  20. 20. Squelettes <ul><li>La base de données : toutes les informations sur l es articles, les rubriques, l es auteurs, etc. </li></ul><ul><li>&quot; fabriquer &quot; le site => extraire certains éléments de cette base à l'aide de boucles , de balises , de critères de sélection et de filtres </li></ul><ul><li>Un squelette de page contient : </li></ul><ul><ul><li>du code HTML </li></ul></ul><ul><ul><li>des références (appelées balises) aux colonnes des tables de la base de données </li></ul></ul>
  21. 21. Exemple <ul><li>Archive.html => HTML : varie en fonction du &quot;contenu&quot; que vous souhaitez afficher </li></ul><ul><li><html> </li></ul><ul><li><title>Mes archives</title> </li></ul><ul><li><head></head> </li></ul><ul><li><body> </li></ul><ul><li><!-- ici s'affiche mes archives --> </li></ul><ul><li><BOUCLE_archi(ARTICLES){tout}{par titre}> </li></ul><ul><li>[(#DATE|affdate)<br />] </li></ul><ul><li><a href=#URL_ARTICLE&quot;>[(#TITRE)<br />]</a> </li></ul><ul><li></BOUCLE_archi> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>=> Afficher &quot;tout&quot; les articles &quot;publiés&quot;, triés par date, avec un lien qui mène directement sur la page de l'article dans l'ensemble de votre contenu </li></ul>Archive.php3 => php: varie en fonction du $fond de son double en .html <?php $fond = &quot;archive&quot; ; $delais = 24 * 3600; include (&quot;inc-public.php3&quot;); ?> => Afficher le &quot;$fond&quot; de son double (archive.html)
  22. 22. Boucles <ul><li>La notion de base du langage de SPIP est la boucle </li></ul><ul><li>syntaxe : </li></ul><ul><ul><li><BOUCLEn(TYPE){critère1}{critère2}...{critèrex}> </li></ul></ul><ul><ul><li>Code HTML + balises SPIP </li></ul></ul><ul><ul><li></BOUCLEn> </li></ul></ul><ul><li>TYPE : type d’éléments qu' on veut récupérer </li></ul><ul><ul><li>correspondre obligatoirement à l’un des types prévus dans SPIP (ARTICLES, RUBRIQUES, AUTEURS, BREVES, etc. ) </li></ul></ul>
  23. 23. Boucles <ul><li>Exemple de fichier squelette « tutoriel.html » : </li></ul><ul><ul><li><BOUCLE_article(ARTICLES){id_article= 2 }> </li></ul></ul><ul><ul><li>#TITRE </li></ul></ul><ul><ul><li></BOUCLE_article> </li></ul></ul><ul><li>Pour l'appeler, utiliser l'url http://nom_site/tutoriel.php3 </li></ul><ul><li>SPIP va chercher le titre de l’article 2 de la base, et l’ inscrir à la place de #TITRE </li></ul>
  24. 24. Boucles <ul><li>En ajoutant d u HTML et d’autres balises SPIP, on obtient une page plus riche </li></ul><ul><ul><li><BOUCLE_article(ARTICLES){id_article= 2 }> </li></ul></ul><ul><ul><li><H1>#TITRE</H1> </li></ul></ul><ul><ul><li>< P >#CHAPO</ P > </li></ul></ul><ul><ul><li><P>écrit par: #LESAUTEURS</P> </li></ul></ul><ul><ul><li><P align=justify>#TEXTE </li></ul></ul><ul><ul><li></BOUCLE_article> </li></ul></ul>
  25. 25. Boucles <ul><li>Dans l'exemple précédent, le paramètre (numéro d'article) était &quot;codé en dur&quot;. Pour faire un squelette qui fonctionne pour n'importe quel article : </li></ul><ul><ul><li>On remplace {id_article= 2 } par {id_article} </li></ul></ul><ul><li>=> Appel avec une URL qui précise la valeur du paramètre : http://nom_site/tutoriel.php3?id_article= 2 </li></ul>
  26. 26. Boucles <ul><li>Boucle faisant la liste de tous les articles : </li></ul><ul><ul><li><BOUCLE_article(ARTICLES)> </li></ul></ul><ul><ul><li>#TITRE<BR> </li></ul></ul><ul><ul><li></BOUCLE_article> </li></ul></ul><ul><li>Boucle faisant la liste des 10 premiers articles : </li></ul><ul><ul><li><BOUCLE_article(ARTICLES){1,10}> </li></ul></ul><ul><ul><li>#TITRE<BR> </li></ul></ul><ul><ul><li></BOUCLE_article> </li></ul></ul>
  27. 27. Boucle avec critères multiples <ul><li>A ffich er les 10 articles les plus récents appartenant à une rubrique : </li></ul><ul><ul><li><BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{1,10}> </li></ul></ul><ul><ul><li><a href=#URL_ARTICLE>#TITRE</A><BR> </li></ul></ul><ul><ul><li></BOUCLE_article> </li></ul></ul><ul><li>Appel avec l'URL http:// nom_site /tutoriel.php3?id_rubrique=1 </li></ul><ul><li>{id_rubrique} : ne prend que les articles appartenant à la rubrique id_rubrique </li></ul><ul><li>{par date}{inverse} : tri par date dans l’ordre décroissant . . . </li></ul><ul><li>{1,10} : . . . et prend les 10 premiers résultats </li></ul><ul><li><a href=#URL_ARTICLE>#TITRE</A> va écrire non seulement le titre de l’article mais en plus créer un lien vers cet article </li></ul>
  28. 28. Boucles – éléments conditionnels <ul><ul><li><B n > </li></ul></ul><ul><ul><li>Code HTML optionnel avant </li></ul></ul><ul><ul><li><BOUCLE n (TYPE){critère1}{critère2}...{critèrex} > </li></ul></ul><ul><ul><li>Code HTML + balises SPIP </li></ul></ul><ul><ul><li></BOUCLE n > </li></ul></ul><ul><ul><li>Code HTML optionnel après </li></ul></ul><ul><ul><li></B n > </li></ul></ul><ul><ul><li>Code HTML alternatif </li></ul></ul><ul><ul><li><//B n > </li></ul></ul><ul><li>Le code optionnel avant n’est affiché que si la boucle contient au moins une réponse </li></ul><ul><li>Le code optionnel après n’est affiché que si la boucle contient au moins une réponse </li></ul><ul><li>Le code alternatif est affiché à la place de la boucle (et donc également à la place des codes optionnels avant et après) si la boucle n’a trouvé aucune réponse </li></ul>
  29. 29. Boucles imbriquées <ul><li>A fficher, sur la même page, les éléments de la rubrique elle-même et une liste des articles </li></ul><ul><ul><li><BOUCLE_rubrique(RUBRIQUES){id_rubrique}> </li></ul></ul><ul><ul><li><H1>#TITRE</H1> </li></ul></ul><ul><ul><ul><li><BOUCLE_article(ARTICLES){id_rubrique} {par date}{inverse}{0,10}> </li></ul></ul></ul><ul><ul><ul><li><a href=#URL_ARTICLE>#TITRE</A><BR> </li></ul></ul></ul><ul><ul><ul><li></BOUCLE_article> </li></ul></ul></ul><ul><ul><li>#TEXTE|justifier </li></ul></ul><ul><ul><li></BOUCLE_rubrique> </li></ul></ul><ul><li>Appel avec http://nom_site/tutoriel.php3?id_rubrique=1 </li></ul>
  30. 30. Boucles – balises et critères de sélection <ul><li>Pour une liste complète des boucles et des balises existantes, consulter la rubrique </li></ul><ul><ul><li>http://www.spip.net/fr_rubrique143.html </li></ul></ul>
  31. 31. Filtres <ul><li>L es boucles permettent de structurer la page de manière logique, reste à présenter les données de manière esthétique </li></ul><ul><li>Les filtres transforment le contenu de la base de données en code HTML plus présentable </li></ul><ul><li>Une donnée stockée dans la base se présente comme un bloc, et on peut avoir envie de manipuler la variable correspondante avant de l’afficher à l’écran </li></ul><ul><ul><li>exemples : justifier, aligner_droite, saison (qui affiche « été » si la variable est une date comprise entre le 21 juin et le 20 septembre) . . . </li></ul></ul><ul><li>Pour utiliser un filtre il faut utiliser la syntaxe : [ (#VARIABLE|filtre) ] </li></ul>
  32. 32. Filtres <ul><li>l es filtres peuvent être enchaînés [ (#DATE_REDAC|saison|majuscules) ] affichera &quot; HIVER &quot; </li></ul><ul><li>L'utilisation des crochets permet de ne pas afficher un bloc si une balise renvoie une chaîne vide </li></ul><ul><li>cf. éléments conditionnels des boucles </li></ul>
  33. 33. Exemples <ul><li>Voir le tableau des méthodes à utiliser pendant l'écriture d'un article pour ajouter des titres, du texte en gras, en italique, etc... </li></ul><ul><li>EPS Académie de Lyon : </li></ul><ul><ul><ul><li>http://www2.ac-lyon.fr/enseigne/eps/index.php </li></ul></ul></ul><ul><li>Éditeur de squelettes : http://www.glums.com/serveur/spip/squelette/ </li></ul><ul><li>Démo - C-L </li></ul><ul><ul><li>http://129.194.71.104/spip/ecrire/?bonjour=oui </li></ul></ul>

×