Introduction à l'outil Spip (version 3) Objectifs Connaître les principales caractéristiques de cet outil Etre capable de mettre en place un site simple avec Spip Ce document d'enseignement est diffusé librement, pour usage individuel. Il est librement téléchargeable sur le site de l'auteur *. Michel Cartereau - Novembre 2013 AgroParisTech - UFR d'informatique - 16, rue Claude Bernard - F 75231 PARIS CEDEX 05 michel.cartereau à agroparistech.fr - Téléphone : +33 1 44 08 16 80 * http://www.agroparistech.fr/mmip/mc/
PRÉSENTATION GÉNÉRALE UN OUTIL DE GESTION DE CONTENU STRUCTURATION DES CONTENUS ET D'UN ARTICLE PRINCIPE DE CONSTRUCTION D'UNE PAGE Introduction à Spip - Page 2
UN OUTIL DE GESTION DE CONTENU SPIP : SYSTÈME DE PUBLICATION POUR L INTERNET 1 SYSTÈME AUTOMATISANT LA CRÉATION DE PAGES WEB Espace privé Interface pour créer les contenus d'édition (articles, illustrations,...) Formulaires accessibles à des rédacteurs inscrits et l'administrateur Moteur de publication Production de pages Web à partir de contenus et de la mise en page Mise en page réalisée par des spécialistes («squelettes») OUTIL LIBRE TRÈS UTILISÉ DANS L'INTERNET NON MARCHAND 1 SPIP est présenté ici dans sa dernière version 3.0. Introduction à Spip - Page 3
STRUCTURATION DES CONTENUS MODÈLE ÉDITORIAL CALQUÉ SUR UN JOURNAL ORGANISATION ÉDITORIALE Une hiérarchie de rubriques Au premier niveau : têtes de rubriques ou «secteurs» Une rubrique regroupe des articles et-ou sous-rubriques Rubrique sans article : automatiquement inactivée (non publiée) Un ensemble d'articles Unité élémentaire de publication rattachée à une rubrique Différents états : en cours de rédaction, proposé à publication, publié Possibilité d'inclure une illustration ou d'adjoindre un document Eléments complémentaires et optionnels Brève : court article rattaché à un secteur Forum de discussion : rattaché à une rubrique, un article ou une brève Pétition : rattachée à un article PRÉSENTATION LIMITÉE ICI À L'ESSENTIEL DE L'OUTIL! Introduction à Spip - Page 4
STRUCTURE D'UN ARTICLE STRUCTURE EXTENSIBLE PRINCIPAUX COMPOSANTS Titre l'identification de l'article (obligatoire), auteur et date a priori ajoutés Texte le contenu de l'article, avec possibilités de raccourcis typographiques (mise en gras ou italique, intertitre, listes, liens, etc.) COMPOSANTS OPTIONNELS Compléments au texte images et documents joints Autres composants éditoriaux potentiels 1 présentés avec le texte : sur-titre (au-dessus du titre), sous-titre (endessous), chapeau (résumé ou introduction), post-scriptum (à la fin) utilisé dans une liste d'articles : descriptif UN ARTICLE EST TOUJOURS RATTACHÉ À UNE RUBRIQUE 1 Utilisation décidée par l'administrateur du site (espace privé : CONFIGURATION CONTENU DU SITE) Introduction à Spip - Page 5
PRINCIPE DE CONSTRUCTION D'UNE PAGE PAGE CRÉÉE DYNAMIQUEMENT PAR SPIP SQUELETTE DE PAGE Modèle de contenu générique pour un type de page du site incrustation de balises spécifiques à Spip dans du code XHTML Transformation dynamique en page Web exécution des balises spécifiques par le moteur de Spip, avec extraction de contenus dans la base de données et exploitation de feuille(s) de style associées SÉPARATION POUSSÉE DU CONTENU ET DE LA PRÉSENTATION Introduction à Spip - Page 6
SQUELETTES PRINCIPAUX SQUELETTES ECRITURE D'UN SQUELETTE EXEMPLE SIMPLE Introduction à Spip - Page 7
PRINCIPAUX SQUELETTES DU SITE UN SQUELETTE EST UN MODÈLE DE PAGE DANS SPIP ORGANISATION Hiérarchie des contenus page d'accueil du site : sommaire.html page du sommaire d'une rubrique : rubrique.html page de présentation d'un article : article.html Pages complémentaires plan du site : plan.html auteur d'article : auteur.html résultats d'une recherche dans le site : recherche.html signalement d'une anomalie : 404.html DOSSIERS POUR LES SQUELETTES Squelettes personnalisés : dossier squelettes (à créer si besoin) choisis en priorité avant un squelette fourni par Spip Jeu de squelettes fournis par Spip : dossier squelettes-dist 1 pris en compte en absence d'un squelette personalisé UTILISER LE DOSSIER DES SQUELETTES PERSONNALISÉS : squelettes 1 Dans les versions anciennes de Spip (1.9, 1.8 etc.), c'était le dossier dist Introduction à Spip - Page 8
ECRITURE D'UN SQUELETTE DE PAGE LANGAGE SPÉCIFIQUE À SPIP 1 [(#REM) Les 2 derniers articles ] <B_articles_recents> <ul> <BOUCLE_articles_recents(ARTICLES) {!par date} {0,2}> <li> #TITRE </li> </BOUCLE_articles_recents> </ul> </B_articles_recents> AJOUT DE BALISES DE SPIP À DU CODE XHTML Balises d'identification d'un élément de contenu exemple : #TITRE pour le titre d'article en élément de liste Balise d'itération exemple : liste des titres des 2 derniers articles, classés par le plus récent d'abord (ordre anté-chronologique) <B_articles_recents> <BOUCLE_articles_recents(ARTICLES) {!par date} {0,2}> <li> #TITRE </li> </BOUCLE_articles_recents> </B_articles_recents> Balises diverses exemple de commentaire : [(#REM) Les 2 derniers articles] DOCUMENTATION EN LIGNE : http://www.spip.net/ 1 Présentation ici du cas de la version 3.0 de Spip Introduction à Spip - Page 9
EXEMPLE D'UN SITE SIMPLE CAS D'UN PETIT SITE AVEC UN SEUL NIVEAU DE RUBRIQUES entête (header) zone de navigation (nav) contenu (content) pied de page (footer) colonne latérale (aside) CONSTRUCTION D'UNE PAGE PAR PAVÉS Modèle simple en 5 parties entête, zone de navigation, colonne latérale au contenu, et pied Structure inspirée selon le modèle retenu en HTML 5 http://romy.tetue.net/structure-html-de-base COMPOSANTS DES PAGES Eléments communs à toutes les pages déclarations de feuilles de styles et de scripts, entête, pied de page Eléments pour certaines pages pavé de la navigation ORGANISATION INSPIRÉE DE CELLE DES SQUELETTES FOURNIS AVEC SPIP Introduction à Spip - Page 10
EXEMPLE SIMPLE : MISE EN PAGE RÉFÉRENCE : http://romy.tetue.net/structure-html-de-base SQUELETTE EN HTML Divisions supplémentaires : wrapper et main respectivement parentes de contenu, et de wrapper + aside mécanisme facilitant la mise en forme avec CSS Code en HTML <div class="page"> <div class="header"> </div> <div class="nav"> </div> <div class="main"> <div class="wrapper"> <div class="content"> </div> </div> <div class="aside"> </div> </div> <div class="footer"> </div> </div> STYLES DE MISE EN PAGE Utilisation du positionnement en CSS attribut : float: Styles en CSS.wrapper { clear: both; float: left; width: 70%; }.aside { float: right; width: 25%; }.footer { clear: both; } MISE EN PAGE SIMPLE Introduction à Spip - Page 11
EXEMPLE SIMPLE : COMPOSANTS DU SOMMAIRE COMPOSANTS INCLUS DANS LE SQUELETTE DU SOMMAIRE INCLUSION D'UN COMPOSANT AVEC SPIP Balise spécifique : <INCLURE{fond=nom}> nom court du fichier contenant le composant, sans l'extension.html Contenu principal de sommaire.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>#nom_site_spip</title> <INCLURE{fond=inclure/head}> </head> <body> <div class="page"> <INCLURE{fond=inclure/header}> <INCLURE{fond=inclure/nav}> <div class="main"> <div class="wrapper"> <div class="content"> <INCLURE{fond=inclure/recents}> </div> </div> <div class="aside"> </div> </div> <INCLURE{fond=inclure/footer}> </div> </body> </html> CONVENTION DANS SPIP 3 : COMPOSANT DANS LE SOUS-DOSSIER «inclure» Introduction à Spip - Page 12
EXEMPLE SIMPLE : COMPOSANTS ÉLÉMENTAIRES COMPOSANT DES DÉCLARATIONS : head.html inséré dans la partie de l'en-tête XHTML de la page Web (<head>) alphabet utilisé (#CHARSET) et version de Spip (#SPIP_VERSION) chemin interne d'accès à un fichier, déterminé par Spip : #CHEMIN{fichier} feuilles de styles multiples et complémentaires : layout.css (disposition), typo.css (élements de base), style.css (tout le reste) balises spéciales pour les extensions : #INSERT_HEAD et #INSERT_HEAD_CSS contenu de head.html <meta http-equiv="content-type" content="text/html; charset=#charset" /> <link rel="stylesheet" href="#chemin{css/layout.css}" type="text/css" /> <link rel="stylesheet" href="#chemin{css/style.css}" type="text/css" /> <link rel="stylesheet" href="#chemin{css/typo.css}" type="text/css" /> #INSERT_HEAD_CSS #INSERT_HEAD <meta name="generator" content="spip[ (#SPIP_VERSION)]" /> COMPOSANT DE L'ENTÊTE DE PAGE : header.html formulaire de recherche (#FORMULAIRE_RECHERCHE) logo (#LOGO_SITE_SPIP), adresse (#URL_SITE_SPIP) et nom du site (#NOM_SITE_SPIP) libellé pour désigner l'accueil du site traduit selon la langue du site (<:accueil_site:>) contenu de header.html <div class="header"> <a rel="start home" href="#url_site_spip/" title="<:accueil_site:>" >#LOGO_SITE_SPIP</a> <span class="titre_site">#nom_site_spip</span> </div> COMPOSANT DU PIED DE PAGE : footer.html adresse Web d'une page : #URL{nom court de page} libellé pour désigner le plan du site traduit selon la langue du site (<:plan_site:>), idem pour l'espace privé (<:espace_prive:>) balise spéciale pour le lien d'administration : #EVAL{_DIR_RESTREINT_ABS} contenu de footer.html <div class="footer"> <p class="colophon"> <a rel="contents" href="#url_page{plan}"><:plan_site:></a> <a href="#eval{_dir_restreint_abs}"><:espace_prive:></a> <a href="http://www.spip.net/">fait avec SPIP</a> </p> </div> CONVENTION DANS SPIP 3 : FEUILLES DE STYLE DANS LE SOUS-DOSSIER «css» Introduction à Spip - Page 13
EXEMPLE SIMPLE : NAVIGATION LISTE DES RUBRIQUES SOUS FORME DE LIENS (AVEC LE LIEN VERS L'ACCUEIL DU SITE AU DÉBUT) COMPOSANT DE LA NAVIGATION : inclure/nav.html Forme générale d'une boucle d'itération sur des rubriques <B_identification> code HTML optionnel avant (si au-moins 1 élément) <BOUCLE_identification(RUBRIQUES) {critère 1 } {critère 2 }... > code HTML et balises de Spip </BOUCLE_identification> code HTML optionnel après (si au-moins 1 élément) </B_identification> Critères de sélection ou de tri des rubriques rubriques de tête seulement ({racine}) tri par ordre alphabétique du titre ({par titre}) Balises pour les données d'une rubrique titre (#TITRE), adresse de la page correspondante (#URL_RUBRIQUE) indicateur si rubrique en cours de consultation (#EXPOSE), vaut on si vrai SQUELETTE <B_nav> <div class="nav"> <ul> <BOUCLE_nav(RUBRIQUES) {racine} {par titre}> <li[ class="(#expose)"]><a href="#url_rubrique">#titre</a></li> </BOUCLE_nav> </ul> </div> </B_nav> Introduction à Spip - Page 14
EXEMPLE SIMPLE : ARTICLES RÉCENTS BOUCLE : LISTE DES 2 DERNIERS ARTICLES PARUS DANS LE SITE COMPOSANT DES ARTICLES RÉCENTS : inclure/recents.html Forme générale d'une boucle d'itération sur des articles <B_identification> code HTML optionnel avant (si au-moins 1 élément) <BOUCLE_identification(ARTICLES) {critère 1 } {critère 2 }... > code HTML et balises de Spip </BOUCLE_identification> code HTML optionnel après (si au-moins 1 élément) </B_identification> Critères de sélection ou de tri des articles tri par ordre chronologique ({par date}) ou à l'envers ({!par date}) limitation du nombre : N à partir du n P 1 ({P, N}) Balises pour les données d'un article titre (#TITRE), date de mise en ligne (#DATE), introduction (#INTRODUCTION), auteurs (#LESAUTEURS), adresse de la page de l'article (#URL_ARTICLE) Formatage d'une date valeur brute (horodate) : #DATE ; exemple : 2008-03-09 18:40:18 forme réduite à la date en clair : [(#DATE affdate_jourcourt)] avec année absente si courante, exemple : 9 mars 2008 application d'un «filtre» : [(balise filtre)] EXTRAIT DU SQUELETTE <B_articles> <div class="menu menu_articles" id="articles_recents"> <h2><:articles_recents:></h2> <ul> <BOUCLE_articles(ARTICLES) {!par date} {0,2} > <li class="hentry"> <h3 class="entry-title"><a href="#url_article">#titre</a></h3> [(#DATE affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)] [<div class="introduction">(#introduction)</div>] </li> </BOUCLE_articles> </ul> </div><!--#articles_recents--> </B_articles> 1 Attention : numérotation à partir de zéro (0) et non pas un (1). Introduction à Spip - Page 15
EXEMPLE SIMPLE : SQUELETTE DU SOMMAIRE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>#nom_site_spip</title> <INCLURE{fond=inclure/head} /> </head> <body class="page_sommaire"> <div class="page"> <INCLURE{fond=inclure/header} /> <INCLURE{fond=inclure/nav} /> <div class="main"> <div class="wrapper"> <div class="content" id="content"> [<div class="chapo">(#descriptif_site_spip)</div>] <INCLURE{fond=inclure/recents} /> </div><!--.content--> </div><!--.wrapper--> <div class="aside"> #FORMULAIRE_RECHERCHE </div><!--.aside--> </div><!--.main--> <INCLURE{fond=inclure/footer} /> </div><!--.page--> </body> </html> Introduction à Spip - Page 16
EXEMPLE SIMPLE : SQUELETTE D'UNE RUBRIQUE (1) BOUCLE : LISTE DES ARTICLES PARUS DANS UNE RUBRIQUE FICHIER rubrique.html Identification de la rubrique par id_rubrique 1 fixation du contexte à la rubrique pour la page entière : <BOUCLE_principale(RUBRIQUES) {id_rubrique}> code HTML et balises de Spip pour la page </BOUCLE_principale> passage de l'identification à un autre composant (environnement : env) : <INCLURE{fond=composant,env} /> Chemin de navigation à partir de l'accueil du site (fil d'ariane) boucle spécifique : <BOUCLE_ariane(HIERARCHIE){id_rubrique}> code HTML et balises de Spip pour la rubrique parente </BOUCLE_ariane> Boucle d'itération sur les articles de la rubrique critère représentant la rubrique courante : {id_rubrique} <BOUCLE_identification(ARTICLES) {id_rubrique} {critère 1 }... > code HTML et balises de Spip </BOUCLE_identification> Balises pour les articles d'une rubrique titre (#TITRE), adresse de la page de la rubrique (#URL_RUBRIQUE) Filtrage d'un texte reprise au maximum des taille premiers caractères : (texte couper{taille}) Libellé traduit selon la langue du site accueil du site (<:accueil_site:>) 1 L'identification de la rubrique (id_rubrique) est déterminée par son numéro lors de l'appel de la page ; exemple : http://localhost/spip/spip.php?rubrique23 rubrique n 23 Introduction à Spip - Page 17
EXEMPLE SIMPLE : SQUELETTE D'UNE RUBRIQUE (2) SQUELETTE <BOUCLE_principale(RUBRIQUES) {id_rubrique}> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>#titre</title> <INCLURE{fond=inclure/head} /> </head> <body class="page_rubrique"> <div class="page"> <INCLURE{fond=inclure/header} /> <INCLURE{fond=inclure/nav,env} /> <div class="main"> [(#REM) Contenu principal : contenu de la rubrique ] <div class="wrapper"> <div class="content" id="content"> <p class="arbo"><a href="#url_site_spip/"><:accueil_site:></a> <BOUCLE_ariane(HIERARCHIE){id_rubrique}> > <a href="#url_rubrique">[(#titre couper{80})]</a> </BOUCLE_ariane> [ > <strong class="on">(#titre couper{80})</strong>] </p><!--.arbo--> <h1>#titre</h1> [<div class="texte">(#texte)</div>] [(#REM) Articles de la rubrique ] <B_articles> <div class="menu menu_articles"> <ul> <BOUCLE_articles(ARTICLES) {id_rubrique} {!par date}> <li> <strong><a href="#url_article">#titre</a></strong> <br />[(#DATE affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)] </li> </BOUCLE_articles> </ul> </div> </B_articles> </div><!--.content--> </div><!--.wrapper--> <div class="aside"> #FORMULAIRE_RECHERCHE </div><!--.aside--> </div><!--.main--> <INCLURE{fond=inclure/footer} /> </div><!--.page--> </body> </html> </BOUCLE_principale> Introduction à Spip - Page 18
EXEMPLE SIMPLE : SQUELETTE D'UN ARTICLE (1) FICHIER article.html VISUALISATION D'UN ARTICLE Identification de l'article par id_article 1 fixation du contexte à la rubrique pour la page entière : <BOUCLE_principale(ARTICLES) {id_article}> code HTML et balises de Spip pour la page </BOUCLE_principale> réutilisation dans une boucle d'articles dans la page : #ENV{id_article} Balises complémentaires pour des données optionnelles d'un article surtitre (#SURTITRE), soustitre (#SOUSTITRE), chapeau (#CHAPO) Filtres utilisés pour la date de mise en ligne de l'article nom du jour de la semaine (nom_jour), en clair complète (affdate) Libellé traduit selon la langue du site dans la même rubrique (<:meme_rubrique:>) SQUELETTE <BOUCLE_principale(ARTICLES) {id_article}> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!-- article.html - revu par Michel Cartereau 20 XI 2012 --> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>#titre</title> <INCLURE{fond=inclure/head} /> </head> <body class="page_article"> <div class="page"> <INCLURE{fond=inclure/header} /> <INCLURE{fond=inclure/nav,env} /> (suite du squelette à la page suivante) 1 L'identification de l'article (id_article) est déterminée par son numéro lors de l'appel de la page ; exemple : http://localhost/spip/spip.php?article3 article n 3 Introduction à Spip - Page 19
EXEMPLE SIMPLE : SQUELETTE D'UN ARTICLE (2) (suite du squelette) <div class="main"> [(#REM) Contenu principal : contenu de l'article ] <div class="wrapper"> <div class="content" id="content"> <p class="arbo"><a href="#url_site_spip/"><:accueil_site:></a> <BOUCLE_ariane(HIERARCHIE){id_article}> > <a href="#url_rubrique">[(#titre couper{80})]</a> </BOUCLE_ariane> [ > <strong class="on">(#titre couper{80})</strong>] </p> <div class="cartouche"> [<p class="surtitre">(#surtitre)</p>] <h1 class="surlignable">#titre</h1> [<p class="soustitre">(#soustitre)</p>] <p class="info-publi"> <abbr class="published">[(#date nom_jour) ][(#DATE affdate)] </abbr>[<span class="sep">, </span> <span class="auteurs"><:par_auteur:> (#LESAUTEURS)</span>] </p> </div> [<div class="chapo">(#chapo image_reduire{500,*})</div>] [<div class="texte">(#texte image_reduire{500,*})</div>] [(#REM) Gestion du portfolio et des documents ] [(#INCLURE{fond=inclure/documents,id_article, env})] </div><!--.content--> </div><!--.wrapper--> <div class="aside"> #FORMULAIRE_RECHERCHE [(#REM) Articles dans la meme rubrique ] <B_articles_rubrique> <div class="menu"> <h2><:meme_rubrique:></h2> <ul> <BOUCLE_articles_rubrique(ARTICLES){id_rubrique} {id_article!= #ENV{id_article} } {!par date} {0,10}> <li><a href="#url_article">#titre</a></li> </BOUCLE_articles_rubrique> </ul> </div> </B_articles_rubrique> </div><!--.aside--> </div><!--.main--> <INCLURE{fond=inclure/footer} /> </div><!--.page--> </body> </html> </BOUCLE_principale> Introduction à Spip - Page 20
EXEMPLE SIMPLE : SQUELETTE DU PLAN DOUBLE BOUCLE : LISTE DES RUBRIQUES PUIS DE LEURS ARTICLES FICHIER plan.html Utilisation d'un modèle fourni par SPIP composant particulier appelé par : #MODELE{nom du modèle} SQUELETTE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!-- plan.html - revu par Michel Cartereau 20 XI 2012 --> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>#nom_site_spip</title> <INCLURE{fond=inclure/head} /> </head> <body> <div class="page"> <INCLURE{fond=inclure/header} /> <INCLURE{fond=inclure/nav} /> <div class="main"> <div class="wrapper"> <div class="content" id="content"> <p class="arbo"><a href="#url_site_spip/"><:accueil_site:></a> > <strong class="on"><:plan_site:></strong></p> <div class="cartouche"> <h1><:plan_site:></h1> </div> #MODELE{plan} </div><!--.content--> </div><!--.wrapper--> <div class="aside"> #FORMULAIRE_RECHERCHE </div><!--.aside--> </div><!--.main--> <INCLURE{fond=inclure/footer} /> </div><!--.page--> </body> </html> Introduction à Spip - Page 21
ANNEXES INSTALLATION DE SPIP EASYPHP SOUS WINDOWS Introduction à Spip - Page 22
INSTALLATION DE SPIP : ARCHITECTURE SPIP FONCTIONNE SUR UN SERVEUR ARCHITECTURE DES APPLICATIONS Serveurs pages Web avec le langage PHP + bases de données logiciels très utilisés et de code libre : Apache et MySQL diffusion conjointe : Windows (EasyPHP 1 ), Mac (MAMP 2 ), etc. Gestionnaire de contenu logiciel Spip installé sur le serveur Web, avec une base de données COMPÉTENCES NÉCESSAIRES EN ADMINISTRATION DE SERVEUR DANS LE CAS D'UN VÉRITABLE SITE PUBLIC 1 EasyPHP : voir en http://www.easyphp.org/ et dans la boîte à outils de Gaia à AgroParisTech. 2 MAMP : voir en http://www.mamp.info/ et dans la boîte à outils de Gaia à AgroParisTech. Introduction à Spip - Page 23
INSTALLATION DE SPIP : PROCÉDURE 1) DOSSIER DE SPIP CAS D'INSTALLATION DE SPIP VERSION 3.0 Récupérer 1 l'archive au format ZIP du logiciel SPIP et la décompresser ; exemple : spip-v3-0-13.zip contenant le dossier spip 2) CAS DE L'ENVIRONNEMENT EASYPHP Copier le dossier spip dans le dossier des pages Web d'easyphp 2 Démarrer EasyPHP et afficher dans un navigateur la page d'accueil consultation à l'adresse http://127.0.0.1/ ou http://localhost/ il doit y apparaître ce dossier spip de Spip Vérifier le fonctionnement de Spip en cliquant sur son dossier consultation à l'adresse http://127.0.0.1/spip/ il doit y apparaître le message suivant : 1 Logiciel SPIP disponible en http://files.spip.org/spip/archives/ ou dans la boîte à outis de Gaia à AgroParisTech en https://gaia.agroparistech.fr/g/outils.html 2 Exemple en salle d'informatique à AgroParisTech : dossier N:\www\ Introduction à Spip - Page 24
INSTALLATION DE SPIP : PROCÉDURE (SUITE) 2 BIS ) CAS D'UN HÉBERGEMENT AVEC APACHE Il faut copier le dossier spip dans le dossier des pages Web attribué sur le serveur d'hébergement ; exemple : dossier public_html du compte tdmc13 a) Lancer l'outil pour gérer le transfert de fichiers (FTP) ; exemple : WinSCP Indiquer protocole (SFTP ou FTP), adresse du serveur, nom d'utilisateur et mot de passe 1 b) Sélectionner dans le volet gauche le dossier de spip, et dans le volet droit ouvrir le dossier d'accueil du serveur c) Lancer le transfert du dossier spip vers le serveur via le bouton COPIER 1 Renseignements fournis par l'administrateur du serveur d'hébergement. Introduction à Spip - Page 25
INSTALLATION DE SPIP : PROCÉDURE (SUITE) d) Il faut effectuer des réglages complémentaires pour certains dossiers sur le serveur afin de régler les droits d'accès (autorisation générale d'écriture) Cela concerne les dossiers suivants : IMG tmp local config Dans un outil comme WinSCP, sélectionner chaque dossier à régler puis avec le bouton PROPRIÉTÉS, cocher W pour GROUPE et AUTRES puis valider e) Vérifier enfin dans un navigateur à l'adresse du site complétée par /spip/ exemple : https://gaia.agroparistech.fr/~tdmc13/spip/ il doit y apparaître le message suivant : Introduction à Spip - Page 26
INSTALLATION DE SPIP : PROCÉDURE (SUITE) 3) CONFIGURATION DU SITE AVEC SPIP Lancer la configuration à l'adresse http://.../spip/ecrire a) Choisir la langue de Spip français a priori b) Indiquer les caractéristiques 1 du serveur de base de données Type : MySQL Login de connexion :... (donné par l'administrateur 2 ) Mot de passe :... (donné par l'administrateur) 1 Valeurs définies a priori après une installation normale d'easy PHP 3.0. Sinon, ces renseignements sont fournis par l'hébergeur du site. Enregistrement dans le fichier : config\connect.php 2 Dans le cas d'easy-php, c'est généralement root avec le mot de passe mysql ou vide Introduction à Spip - Page 27
INSTALLATION DE SPIP : PROCÉDURE (SUITE) 4) CHOIX DE LA BASE DE DONNÉE La base de données va contenir les contenus du site Si aucune base n'a été attribuée par l'administrateur, créer alors une nouvelle base intitulée spip 1 De même, conserver le préfixe du nom des tables proposé Cas d'anomalie lors de la connexion au serveur de base de données revenir à la page précédente et vérifier les informations (surtout le mode de passe) 1 Enregistrement dans le fichier : config\connect.php Introduction à Spip - Page 28
INSTALLATION DE SPIP : PROCÉDURE (FIN) 5) DÉFINITION DE L'IDENTIFICATION DE L'ADMINISTRATEUR L'administrateur dispose de tous les droits dans l'espace privé de Spip. Identification SIGNATURE : nom d'auteur dans le système Spip VOTRE ADRESSE EMAIL : utile pour communiquer entre les auteurs VOTRE LOGIN : pour se connecter à l'espace privé VOTRE MOT DE PASSE : attention à ni l'oublier, ni le choisir trop simple Fin de la configuration Bouton ESPACE PRIVÉ pour accéder à l'administration Introduction à Spip - Page 29
CAS DE EASYPHP SOUS WINDOWS APERÇU DE LA VERSION 5.3 D'EASYPHP (http://www.easyphp.org/ 1 ) CARACTÉRISTIQUES GÉNÉRALES Un environnement complet sous Windows libre de droits pour un usage non commercial serveur Apache + moteur PHP + SGBD MySQL + PhpMyAdmin Administration simplifiée manipulations facilitées via un navigateur outil PhpMyAdmin pour l'administration des bases de données INSTALLATION Mise en place automatisée environnement complet en C:\Program Files\Easy-PHP... lancement par DÉMARRER PROGRAMMES EASYPHP icône à droite dans la barre de tâches vérification du fonctionnement par consultation du site local adresse : http://127.0.0.1/ 2 Utilisation de l'icône en bas à droite clic-doit : menu de commande page d'administration : ADMINISTRATION accès au dossier des pages : EXPLORER redémarrage des serveurs : REDÉMARRER arrêt des serveurs : ARRÊTER double-clic sur l'icône : état courant ATTENTION! PRÉSENTATION RAPIDE D'EASYPHP POUR UN USAGE PERSONNEL, INTERMITTENT ET NON PERMANENT AUTRE SERVEUR GRATUIT POUR MAC OS X : MAMP 3 1 A AgroParisTech, dans la boîte à outils de Gaia : https://gaia.agroparistech.fr/ 2 localhost et 127.0.0.1 : adresses pour désigner le poste courant dans l'internet 3 MAMP disponible en : http://www.mamp.info/ Introduction à Spip - Page 30
RECONFIGURATION DE EASYPHP CAS DU SERVEUR WEB : APACHE SERVEURS WEB ET DE BASES DE DONNÉES Fichier de configuration du serveur web : httpd.conf accessible via le menu d'easyphp : CONFIGURATION APACHE (ou en C:/Program Files/Easy-PHP.../conf_files/httpd.conf) Déplacement du dossier spécifique pour les pages du site 1 a priori, en C:/Program Files/Easy-PHP.../www création d'un dossier 2, exemple : c:/easy/www puis remplacements dans le texte du fichier httpd.conf : de : DocumentRoot "${path}/www" par : DocumentRoot "C:/easy/www" et : <Directory "${path}/www"> par : <Directory "C:/easy/www"> Restriction des possibilités d'accès au serveur 3 a priori, site accessible par tout le monde (donc risque de piratage) autorisation de consultation uniquement par le poste du serveur par remplacements partout dans le texte du fichier httpd.conf de : Allow from all par : Allow from localhost CAS DU SERVEUR DE BASES DE DONNÉES : MYSQL Fichier de configuration du gestionnaire de bases : my.ini accessible via le menu d'easyphp : CONFIGURATION APACHE (ou en C:/Program Files/Easy-PHP.../conf_files/my.ini) Déplacement du dossier spécifique pour les bases de données a priori, en C:/Program Files/Easy-PHP.../mysql/data copie dans un nouveau dossier 4, exemple : c:/easy/data puis remplacements dans le texte du fichier my.ini : de : datadir= "${path}/mysql/data/" par : datadir= "C:/easy/data" RECONFIGURATION NON INDISPENSABLE MAIS TRÈS FORTEMENT CONSEILLÉE NE PAS OUBLIER DE RELANCER LE SERVEUR APRÈS TOUTE MODIFICATION 5 1 Reconfiguration conseillée afin de séparer les données des programmes (sauvegardes facilitées). 2 A priori; en dehors du dossier des programmes sous Windows (C:\Program Files). 3 Reconfiguration conseillée si le poste est connecté à l'internet, en permanence ou épisodiquement. 4 Attention! veiller à copier le contenu original du dossier mysql\data (indispensable à MySQL) 5 Relance du serveur : commande REDÉMARRER d'easyphp. Introduction à Spip - Page 31
SOMMAIRE PRÉSENTATION GÉNÉRALE...2 Un outil de gestion de contenu...3 Structuration des contenus...4 Structure d'un article...5 Principe de construction d'une page...6 SQUELETTES...7 Principaux squelettes du site...8 Ecriture d'un squelette de page...9 Exemple d'un site simple...10 Exemple simple : mise en page...11 Exemple simple : composants du sommaire...12 Exemple simple : composants élémentaires...13 Exemple simple : navigation...14 Exemple simple : articles récents...15 Exemple simple : squelette du sommaire...16 Exemple simple : squelette d'une rubrique (1)...17 Exemple simple : squelette d'une rubrique (2)...18 Exemple simple : squelette d'un article (1)...19 Exemple simple : squelette d'un article (2)...20 Exemple simple : squelette du plan...21 ANNEXES...22 Installation de spip : architecture...23 Installation de spip : procédure...24 Installation de spip : procédure (suite)...25 Installation de spip : procédure (suite)...26 Installation de spip : procédure (suite)...27 Installation de spip : procédure (suite)...28 Installation de spip : procédure (fin)...29 Cas de EasyPHP sous Windows...30 Reconfiguration de EasyPHP...31 Introduction à Spip - Page 32