Présentation et explications

Transcription

1 Présentation et explications 1

2 SOMMAIRE I) Introduction... 3 II) Installation ) Localement ) Chez un hébergeur... 4 Installation automatique... 4 Installation manuelle... 4 III) Interface de développement... 4 IV) Organisation des pages... 6 V) Squelettes et feuilles de style ) Squelette différent selon les articles... 7 VI) Création des articles, brèves, rubrique ) Les raccourcis typographiques... 9 Paragraphes et retour à la ligne... 9 Gras et italique... 9 Intertitres Trait de séparation horizontal Listes ou des énumérations Liens hypertextes à l intérieur du site Tableaux

3 I) Introduction SPIP (système de publication pour l Internet) est un outil dédié à la gestion et à la conception de sites en ligne. Il est disponible sous licence GPL. SPIP organise les sites sous la forme suivante : Rubriques -> Sous rubriques -> Articles et Brèves. Il faut savoir qu avec SPIP, vous disposez de 2 espaces : l espace public et l espace privé. L espace public correspond aux pages ouvertes à tous (rubriques, articles, forum ). L espace privé correspond aux pages permettant l administration du site, la création de rubriques, d articles, de brèves Vous pouvez gérer des forums de la manière suivante : publication immédiate des messages, modérations à priori ou enregistrement obligatoire. SPIP permet la répartition des tâches : administrateur, rédacteur, graphiste. Les différentes personnes participant au site sont : - les administrateurs qui ont pour rôle de gérer le site (conception des rubriques, rédaction d articles, validation des articles ), - les auteurs qui ont pour rôle de fournir le contenu, - les graphistes qui mettent en place l aspect graphique du site, - les visiteurs qui sont les internautes. II) Installation 1) Localement Si vous ne voulez pas faire de développement SPIP en ligne, le plus simple consiste à installer un serveur PHP/MySQL. Vous pouvez par exemple utiliser l outil EasyPHP. Une fois votre site modifié localement, vous pourrez uploader les fichiers sur le serveur de l hébergeur. EasyPHP s installe en exécutant l archive auto extractible. Une fois installé, vous accéderez à l explorateur par l Url suivante : Cette adresse exécute le fichier index.php qui se trouve dans le dossier c:\program Files\EasyPHP\www. Pour administrer la base locale, utilisez PHPMyAdmin qui se trouve dans les outils d administration d EasyPHP. Pour installer SPIP, téléchargez SPIP ( Vous obtiendrez une archive qu il suffira de décompresser dans le dossier c:\program Files\EasyPHP\www. Après la création du dossier SPIP dans le dossier www, l installation est terminée. Il faut maintenant paramétrer votre base de données SPIP. Pour cela, entrez l Url suivante : Durant la 1ère étape de configuration, rentrez les informations suivantes : - adresse de la base de données : localhost - login de connexion : root - mot de passe : ne rien remplir. Passez à l étape suivante en cliquant sur Suivant, cette seconde étape permettra la création d une nouvelle base de données. Laissez les paramètres par défaut (Créer une nouvelle base nommée SPIP). Cliquez sur Suivant pour passer au paramétrage du site. Vous allez saisir les informations personnelles d accès : votre signature, votre mail, votre login et votre mot de 3

4 passe. En cliquant sur Suivant, vous accéderez à l espace privé. La configuration de SPIP est terminée. 2) Chez un hébergeur Pour pouvoir installer puis utiliser SPIP, vous devez disposer des éléments suivants : - Un hébergeur Web supportant PHP3/PHP4 et MySQL, - Un accès FTP pour l installation des fichiers SPIP, - Une base de données MySQL chez votre hébergeur Vous devez disposer des données suivantes : - L adresse de la base MySQL, - Le nom de la base (nom de login de votre compte??), - Votre login MySQL, - Votre mot de passe MySQL. Contactez votre hébergeur pour activer votre base de données. Une fois celle-ci activée, vous pouvez installer SPIP. Il existe 2 types d installation. L installation automatique consiste à télécharger un fichier, à le copier en FTP sur votre site et à l afficher dans votre navigateur web. Si cela ne fonctionne pas, il faudra faire une installation manuelle. Installation automatique Allez sur le site et cliquez sur le lien télécharger. Allez dans le dossier install/ et récupérez le fichier spip_loader.php3. Copiez ce fichier sur votre site, dans le dossier ou vous souhaitez installer SPIP (ex : ftp://ftpperso.free.fr/spip). Il suffit maintenant d appeler ce fichier dans votre navigateur Web. Choisissez une langue et cliquez sur Suivant. Remplir les informations demandées (souvenez vous des infos sur votre base MySQL). Si tout se passe bien, la connexion sera établie et vous pourrez passer à l étape suivante, sinon cliquez sur Précédent et vérifiez vos paramètres de connexion. Créez une nouvelle base nommée SPIP, cliquez sur Suivant 2 fois et entrez les informations personnelles (signature, , login et mot de passe). Après avoir cliqué sur Suivant, l installation est terminée. Installation manuelle Téléchargez une archive SPIP (zip et tgz). Décompressez et installez les fichiers dans un dossier sur le serveur en utilisant votre logiciel FTP préféré. Une fois les fichiers transférés, il vous faut configurer SPIP. Entrez l Url suivante : Vous devez maintenant fournir les informations concernant votre base de données SPIP. Entrez les informations demandées et cliquez sur Suivant. Définissez le nom de la base puis entrez vos informations personnelles. III) Interface de développement L espace de développement est disponible par l Url (ou Après avoir entré votre login et votre mot de passe, vous accédez à l espace privé qui est l espace de développement. 4

5 Configuration du site : Cette icône permet de rentrer les paramètres suivants : nom du site, adresse, contenu des articles Administration du site : Cette icône permet de gérer le contenu du site, de définir la structure des articles, de proposer ou non les brèves, la référence de site, les documents joints, les forums Gestion des images : Dans les articles, on peut insérer plusieurs images. SPIP peut créer pour vous, une vignette de prévisualisation. Moteur de recherche : SPIP met à la disposition un outil qui permet d effectuer des recherches dans les rubriques, les articles et les brèves. Il est possible en allant sur le site de récupérer des outils pour SPIP. Ainsi, en récupérant les fichiers, dw_extension_spip_assistant_0.50.zip et DW_Extension_SPIP_Boucle_0.36.zip, il est possible d utiliser Dreamweaver et de voir les boucles SPIP. Dans la partie WYSIWYG de Dreamweaver, les balises SPIP peuvent être remplacées par des icônes, et éditables dans la fenêtre «propriété de l objet». La lisibilité des squelettes en est améliorée. De plus, il existe une macro Word pour aider à la rédaction des articles. Cette macro Word peut se révéler une aide précieuse pour préparer ses articles Spip : vous écrivez l'article dans Word, lancez la macro, votre article Word est transformé en article Spip. L'outil n'est pas parfait mais peut vous faire gagner du temps. 5

6 IV) Organisation des pages Les pages appelées sont les pages PHP. Pour chaque page, on a la page PHP qui appelle la page HTML correspondante. Voici un schéma de l organisation des pages : V) Squelettes et feuilles de style Chaque page appelle plusieurs feuilles de style CSS : spip_style.css, typographie.css, habillage.css et impression.css. Ces fichiers définissent le style d affichage des titres, du texte de l auteur redéfinissent les balises A (balise des liens HTML) Toutes les informations constituant votre SPIP sont stockées dans la base. Pour afficher ces informations, il faut les extraire et les convertir au format HTML. Cette opération est réalisée par des fichiers HTML particuliers, les squelettes. Ces pages contiennent les instructions permettant de récupérer les données (par des boucles) et de les agencer (travail graphique en HTML). Lorsqu un visiteur demande l affichage d une page, le dossier CACHE est parcouru. S il contient des données correspondant à la demande et que le délai de péremption n est pas dépassé, ces données sont directement retournées au visiteur du site. Dans le cas contraire, la base de données est interrogée. Le résultat est stocké dans le dossier CACHE et renvoyé au visiteur. Les squelettes sont composés d instructions HTML, d instructions SPIP et éventuellement du javascript, flash, PHP et css. Les fichiers se terminant par «-dist» sont les squelettes standard fournis par SPIP. Pour faire vos propres squelettes, renommez les fichiers en supprimant le suffixe «-dist». Pour faire votre propre squelette, ouvrir les fichiers sommaire.html, rubrique.html et article.html. En modifiant ces fichiers et les feuilles de style vous pourrez faire une mise en page personnalisée. Voici un exemple de code permettant de rajouter une image en haut de la fenêtre : <div id="bandeau" style="position:absolute; width:100%; height:10%; z-index:1; left: 0px; top: 0px;"> <div align="center"><img src="img/logoofficiel.gif" width="254" height="87"></div> </div> Si on souhaite mettre une image de fond, il est possible de créer un calque comprenant tous les autres calques et dans ce calque justement, on inclut l image de fond dans la feuille de style. 6

7 L exemple suivant permet d afficher une image en lieu et place de la liste des articles de la rubrique : <div class="general" id="principal" style="z-index:1; margin-right=0px;"> <div class="cartouche"> <h1 class="titrechugna">#titre</h1> </div> <div id="pageorchestre" style="position:absolute; width:100%; height:100%; z-index:0; left:0px; top:0px;"><img src="img/section/pageorchestre.jpg" width="100%" height="100%"> <div id="orchestre" style="position:absolute; left:16%; top:49%; width:12%; height:6%; z-index:4"><a href="article.php3?id_article=8"><img src="img/section/pixtransparent.gif" width="100%" height="100%" border="0"></a></div> <div id="paix" style="position:absolute; left:31%; top:62%; width:28%; height:7%; z- index:2"><a href="article.php3?id_article=6"><img src="img/section/pixtransparent.gif" width="100%" height="100%" border="0"></a></div> <div id="aramea" style="position:absolute; left:15%; top:75%; width:34%; height:7%; z- index:3"><a href="article.php3?id_article=7"><img src="img/section/pixtransparent.gif" width="100%" height="100%" border="0"></a></div> </div>..</div> 1) Squelette différent selon les articles Si vous souhaitez faire des squelettes différents selon les articles, il est possible de procéder en créant une liste de mots clés. Mais la méthode qui va être présentée ci-dessous est beaucoup plus simple. Il s agit en fait de dupliquer le fichier article.html par exemple en art1.html et art2.html et de faire de même avec le fichier article.php. On a ainsi les fichiers suivants : article.html, art1.html, art2.html et article.php, art1.php et art2.php. On modifie le graphisme des fichiers art1.html et art2.html selon sa volonté puis il faut modifier les fichiers PHP. Le code du fichier art1.php sera le suivant : <?php $fond = "art1.html"; $delais =0; include ("inc-public.php3");?> Il suffit de faire de même avec art2.php. Par contre, c est au niveau de article.php qu il va y avoir des tests à faire. Voici un exemple de fichier article.php : <?php if($id_article == 1 $id_article == 3) // Numéro des articles utilisant le squelette 1 { $fond= "art1"; $delais=0; include ("inc-public.php3"); } if($id_article == 2) // Numéro des articles utilisant le squelette 2 { $fond= "art2"; $delais=0; 7

8 include ("inc-public.php3"); } else { // cas par défaut $fond = "article"; $delais =0; include ("inc-public.php3"); }?> VI) Création des articles, brèves, rubrique Pour créer un article dans la base, allez dans l espace privé ( cliquez sur l icône Écrire un nouvel article (ou Écrire une nouvelle brève ou une nouvelle rubrique selon le cas). Cette icône est disponible dans les raccourcis à gauche de l écran. Vous pouvez rentrer les informations souhaitées (notamment le choix de la rubrique correspondante) et cliquer sur Valider. Vous pouvez modifier votre article en le sélectionnant dans la liste des articles ou modifier la date de publication. Au niveau des fichiers HTML, il faut utiliser les boucles pour lui dire ou afficher l article et ce qu il doit afficher (le titre, le sous titre, le texte ). 8

9 La boucle Articles est utilisée pour afficher les articles publiés dans une rubrique. Sa syntaxe générale est : <bouclen (ARTICLES) {critère1} {critèrex}> Cette boucle effectue un select * sur la table spip_articles en fonction des critères rentrés. Il suffit après pour afficher le titre, de mettre #TITRE dans la page HTML. La boucle Rubriques est utilisée pour dresser une liste des rubriques publiées. Elle a la syntaxe suivante : <bouclea (RUBRIQUES) {critère1} {critèrex}> Pour afficher le texte, on utilise #TEXTE. La boucle Brèves est utilisée pour obtenir une liste des brèves. Voici la syntaxe générale : <BOUCLEn (BREVES) {critère1} {critèrex}> Pour afficher par exemple, le titre et le texte des brèves de la rubrique 3, on peut utiliser le code suivant : <BOUCLE_nomBreve(BREVES){id_rubrique=3}> <B>#TITRE</B><BR> #TEXTE <BR> </BOUCLE_ nombreve > Le même principe existe pour les auteurs, les forums, les documents 1) Les raccourcis typographiques Pour faciliter la mise en page des documents publiés avec SPIP, le système propose un certain nombre de «raccourcis SPIP» destinés à : simplifier l utilisation par des utilisateurs ne connaissant pas le code HTML faciliter le traitement automatique de la mise en page. Vous pouvez naturellement utiliser du code HTML dans vos documents SPIP, mais nous vous conseillons d utiliser de préférence ces quelques raccourcis SPIP, plus simples à mémoriser, et permettant surtout quelques manipulations automatiques par le système. Tout d abord, entrez dans la page d édition de l article ("Ecrire un nouvel article" ou "Modifier cet article"). Paragraphes et retour à la ligne Pour créer des paragraphes, il suffit de laisser une ligne vide, un peu comme on sépare les paragraphes dans un (on «saute» une ligne). Le fait de simplement «revenir à la ligne» (retour-chariot) sans séparer les deux paragraphes par une ligne vide, ne fait rien. Pour faire un simple retour à la ligna sans sauter une ligne, il faut mettre un _ (underscore) suivit d une espace au début de la ligne retournée. Gras et italique On indique simplement du texte en italique en le plaçant entre des accolades simples : «...{du texte en italique}...». On indique du texte en gras en le plaçant entre des accolades doubles : «...{{du texte en gras}}...». 9

10 Intertitres Les intertitres sont des titres à l intérieur d un texte permettant d en indiquer la structure. Dans SPIP, on les indique très simplement en les plaçant entre des accolades triples : «{{{Un titre de partie}}}» donnera : Un titre de partie Trait de séparation horizontal Il est très simple d insérer un trait de séparation horizontal sur toute la largeur du texte : il suffit de placer une ligne ne contenant qu une succession d au moins quatre tirets, ainsi : ---- Listes ou des énumérations On peut fabriquer des listes dans SPIP de la même manière que dans un il suffit de revenir à la ligne et de commencer la nouvelle ligne avec un tiret («-»). De la même manière, on peut créer des listes numériques : -#, -##... et des listes hiérarchiques (à puces) : -*, -**... Notez : ici un simple retour à la ligne suffit (on peut faire des énumérations dans le même paragraphe) ; mais si l on «saute» une ligne avant la ligne commençant par un tiret, une ligne vide est affichée avant l énumération. mailto:minirezo@rezo.net»)... Liens hypertextes à l intérieur du site Ce même système de liens hypertextes facilite, de plus, la création de liens à l intérieur de votre site sous SPIP. La seule subtilité consiste à repérer le numéro de l article, de la rubrique, ou de la brève vers laquelle vous voulez mener votre lien hypertexte : lorsque vous «visitez», dans l espace privé, un article, une brève ou une rubrique, la colonne de gauche contient un pavé indiquant, en gros caractères, ce numéro. Tableaux Pour réaliser des tableaux très simples dans SPIP, il suffit de faire des lignes dont les «cases» sont séparées par le symbole (pipe ou trait vertical), lignes commençant et se terminant par des traits verticaux. Il est impératif de laisser des lignes vides avant et après ce tableau. Par exemple : {{Nom}} {{Prénom}} {{Age}} Marso Ben 23 ans Capitaine non connu Philant Philippe 46 ans Cadoc Bébé 4 mois donnera : Nom Prénom Age Marso Ben 23 ans Capitaine Philant non connu Philippe 46 ans Cadoc Bébé 4 mois Voilà tous les raccourcis qu il vous faudra connaître, pour "bien" débuter avec SPIP. Mais il en existe d autres que vous retrouverez dans l interface d administration : l aide en ligne. 10