Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h00-1200

1. BouclesetBalisesSPIP1.7.2 TRAVAUX PRATIQUES Arborescence des balises HTML Fichier HTML Boucles et Balises SPIP Règles CSS Boîtes imbriquées <BOUCLEn(TYPE){critère1}...{critèrex}> Code HTML + Balises SPIP </BOUCLEn> Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h00-1200 François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch - http://p7app.geneve.ch/spip/plan.php3 Prendre en compte les éléments Maîtriser la syntaxe et exploiter les add-on pour Dreamwaever et le WEB et relations

2. Télécharger le présent document Powerpoint : « Travaux pratiques sur les Boucles et Balises SPIP 1.7.2 » http://p7app.geneve.ch:8007/spip/article.php3?id_article=178 Avant de mettre en œuvre les éléments de ce document, il est profitable de consulter les documents et pages web suivants : • Configurer Dreamweaver MX pour modifier/créer des squelettes SPIPhttp://p7app.geneve.ch:8007/spip/article.php3?id_article=177 • Boucles et Balises SPIP 1.7.2 de 10 types de fichiersDW_Configurer_v1.ppt http://p7app.geneve.ch:8007/spip/article.php3?id_article=176 • Les Boucles et Balises SPIP 1.7.2 » Téléchargement : http://p7app.geneve.ch:8007/spip/article.php3?id_article=172 • CSS : Quelques exemples de mise en page fluide en n colonnes • CSSnColZdUfIs_V2.ppt • Téléchargement : http://p7app.geneve.ch:8007/spip/article.php3?id_article=166 • Les CSS dans SPIP 1.7.2 • CssSpip172Article_v04.ppt • Téléchargement : http://p7app.geneve.ch/spip/ article.php3?id_article=169 Et basez-vous sur les manuel de référence présentés aux pages suivantes :

3. Mise en page : manuel de référence. Comment créer sa propre mise en page pour un site géré sous SPIP : http://www.spip.net/fr_rubrique143.html • Principe général • Des boucles et des balises • La syntaxe des boucles • La syntaxe des balises SPIP • La boucle ARTICLES • La boucle RUBRIQUES • La boucle BREVES • La boucle AUTEURS • La boucle FORUMS • La boucle MOTS • La boucle SITES (ou SYNDICATION) • La boucle DOCUMENTS • La boucle SYNDIC_ARTICLES • La boucle SIGNATURES • La boucle HIERARCHIE • Les critères communs à toutes les boucles • Les balises propres au site • Les formulaires • Les boucles de recherche • Les filtres de SPIP • Les boucles récursives • La « popularité » des articles • La gestion des dates • Exposer un article dans une liste

4. SPIP pas à pas. Pas à pas, comment créer un SPIP qui défie les limites. http://www.spip.net/fr_rubrique144.html • Mon premier squelette (je le sors du placard). Comment écrire un premier squelette qui marchouille. • Un squelette, plusieurs articles, c’est à ça que ça sert… Et voici le premier contexte. • Une rubrique ou comment faire des listes du contenu de la base. Faire des listes avec une boucle SPIP. • Boucles en boucles, plusieurs niveaux de lecture. Affichons sur une même page des éléments en provenance de plusieurs endroits. • Gérer le cache et éviter de faire ramer le serveur qui n’a pas que ça à faire. Le cache, ou comment faire un site dynamique qui ne bouge pas trop. • Des filtres. Subtilités squelettiques. Les filtres transforment le contenu de la base de données en code HTML présentable.

5. Guide des fonctions avancées : http://www.spip.net/fr_rubrique257.html Au-delà du manuel de référence, vous trouverez ici une description détaillée des fonctions plus avancées à la disposition du webmestre : • Spip et les feuilles de style • <INCLURE> d’autres squelettes • Réaliser un site multilingue • Internationaliser les squelettes • Utiliser des URLs personnalisées • Le moteur de recherche • Les variables de personnalisation • Le support LDAP • La structure de la base de données

6. Trucs et astuces : http://www.spip.net/fr_rubrique172.html • Afficher automatiquement selon la date ou selon un ordre imposé • Trier des articles par ordre alphabétique, sauf un qu’il faut afficher en premier • Plusieurs logos pour un article • Afficher les derniers articles de vos redacteurs par rubrique • Afficher des éléments par lignes dans un tableau • Ne pas afficher les articles publiés depuis plus d’un an • Présenter les résultats d’une recherche par secteurs • Afficher le nombre de messages du forum lié à un article • Un menu déroulant pour présenter une liste d’articles • Remplir les meta-tags HTML des pages d’article

7. Informations préliminaires

8. Plan de travail proposé Dans le temps imparti pour les Travaux Pratiques (TP) vous choisirez en fonction de vos objectifs et ambitions, l’un des trois axes d’activité suivants (ordre croissant de difficulté) : 1. Procéder selon le tutoriel SPIP original tel qu’il est proposé sur le site spip.net et reproduit dans ce document pour la présentation, en y apportant vos touches personnelles 2. Reprendre l’un des 10 fichiers types du squelette SPIP et procéder à diverses modifications/compléments des boucles et balises SPIP 3. Utiliser l’un des trois templates présentés dans « CSS : Quelques exemples de mise en page fluide en n colonnes »(http://p7app.geneve.ch:8007/spip/article.php3?id_article=166) et y « insérer » l’un des 10 fichiers types du squelette SPIP, puis procéder à diverses modifications des « Boucles & Balises SPIP »

9. Par la suite, après le cours et les TP... Donnez-vous éventuellement la peine de faire, en tout ou partie, l’exercice très complet constitué par le tutoriel présenté ci-dessous et proposé sur le site officiel SPIP : Tutorial : utilisation avancée des boucles et des mots-clés : http://www.spip.net/fr_rubrique154.html • L’interface des news • Et encore d’autres moyens de se compliquer la vie ! Noter les jeux, annoncer les dates de sortie • Quelques sommaires alternatifs • Une première version du sommaire • Un sommaire pour chaque machine • Référencer des articles sur le Web • Un forum pour chaque jeu • Le site complet • Introduction • Le but du jeu : un site consacré aux jeux vidéo • La structure du site • Mise en place de la structure • Écrire des articles • Première version du squelette des articles • La page des rubriques • Les mots-clés dans les articles • Les mots-clés dans les rubriques

10. URL locale sur les postes MAC et PC Considérons le cas d’un élève « eleve_c » ayant installé un SPIP dont il aura nommé le répertoire « spip_eleve_c ». Pour lancer le fichier « sommaire.html » du site SPIP installé sur sa station locale, il doit écrire l’adresse (URL) suivante dans la barre d’adresse du navigateur : • MAC : • http://localhost/~eleve_c/spip_eleve_c • ou encore • http://127.0.0.1/~eleve_c/spip_eleve_c • PC - installation standard EasyPHP : • http://localhost/www/spip_eleve_c • ou encore • http://127.0.0.1/www/spip_eleve_c

11. Travaux pratiques « pas à pas » pour votre premier squelette

12. Notre choix : Nous utilisons Dreamweaver car : • La maîtrise d'un outil tel que Dreamweaver, Golive, Namo Web Editor, FrontPage ou Nvu etc. est un prérequis demandé pour suivre le cours, de plus Dreamweaver et Golive sont enseignés au SEM pour la «Formation Continue». • Des « add on » tel que le Générateur de « Boucles & Balises SPIP » et leur mise en évidence avec des «Icônes Spécialisées » ont été créés pour Dreamweaver dans la communauté SPIP (Plugin de Fabrice Gangler). Mon premier squelette (1/3) Voici un exemple minimal de squelette qui vous permettra d'extraire des données de l’article n°1 de la base et d’en faire une page Web. • Matériel requis pour ce tutoriel : Conformément au début du cours une version SPIP 1.7.2 est installée sur chacun de vos postes individuels, le nom du répertoire est SPIP. Afin de disposer de matière pertinente (rubriques, brèves, articles, auteurs, mots clés, etc), la base de données publique et les documents de F3MITIC 2003-2004 sont chargés sur chaque poste. Vous disposez donc d'une base très riche aux plans quantitatif et qualitatif. • Les outils : Les auteurs de SPIP préconisent de travailler avec un éditeur de texte pour créer et modifier les fichiers utilisés par SPIP, c ’est un choix compréhensible. Voici leur commentaire : Note : certaines personnes auront le réflexe de vouloir utiliser Dreamweaver (ou autre logiciel graphique) pour modifier les fichiers html. Cependant pour des exemples simples Dreamweaver compliquera la tâche et risque même de modifier vos fichiers dans votre dos. Il est donc vraiment préférable d’utiliser un éditeur de texte classique (par exemple le bloc-notes sous Windows).

13. 2. A la racine du site, déposez un fichier « tutoriel.html », qui contient ce qui suit : <BOUCLE_article(ARTICLES){id_article=1}> #TITRE </BOUCLE_article> Fichier « tutoriel.html » Le critère id_article est utilisé pour sélectionner un article, en l'occurrence ici l’article 1. Maintenant rechargez la page http://localhost/www/spip/tutoriel.php. Cette fois SPIP cherche le titre (balise #TITRE) de l’article n°1 de la base, et l’inscrit à la place de #TITRE. 1. Créez à la racine de votre site SPIP un fichier « tutoriel.php3 » contenant les lignes suivantes : <?php $fond = "tutoriel"; $delais = 0; include "inc-public.php3"; ?> Fichier « tutoriel.php3 » • PC : http://localhost/www/spip/tutoriel.php • (installation standard EasyPHP) • Mac : http://localhost/~eleve_c/spip/tutoriel.php Testez dans votre navigateur : Un message d’erreur vous informe qu’il manque un fichier. C’est le fameux squelette, que nous allons maintenant créer.

14. Ajoutez ensuite les champs manquants pour parfaire l’affichage de l’article : #SURTITRE, #LESAUTEURS, #SOUSTITRE, #NOTES, #PS, etc. Rechargez la page http://localhost/www/spip/tutoriel.php, vous obtenez alors toutes les composantes de l'article n° 1. Remarque : Pour afficher l'article 5, il suffit de modifier la ligne qui définit la boucle article : <BOUCLE_article(ARTICLES){id_article=5}> Mon premier squelette (3/3) Ajoutez du HTML et d’autres appels de « champs » SPIP au fichier tutoriel.html, en l'occurrence le chapeau (#CHAPO) et le texte principal (#TEXTE) : En principe il faudrait faire appel aux CSS mais cela risque de freiner la démarche, car ici, dans cette partie pratique, on ne vise que la maîtrise des Boucles & Balises SPIP. Le design est traité ailleurs. <BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <b>#CHAPO</b> <div align="justify">#TEXTE</div> </BOUCLE_article> Rechargez la page http://localhost/www/spip/tutoriel.php, ce qui donne l'essentiel de l'article n° 1.

15. Modifions dans le squelette « tutoriel html » la ligne qui définit la « boucle article » : <BOUCLE_article(ARTICLES){id_article}> Comme vous le voyez, on remplace simplement {id_article=1} par {id_article} tout court. Voilà : en rechargeant la page avec l'URL http://localhost/www/spip/tutoriel.php?id_article=2 vous obtenez maintenant l’article 2. Un squelette, plusieurs articles (1/2) Afficher des éléments en fonction du contexte Afficher n’importe quel article : <BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <b>#CHAPO</b> <div align="justify">#TEXTE</div> </BOUCLE_article> Pour cela nous allons appeler notre page Web avec le paramètre id_article=2 pour appeler l'article 2 : http://localhost/www/spip/tutoriel.php?id_article=2. Echec : c'est toujours l’article 1 (et pas le 2) qui s'affiche.

16. http://localhost/www/spip/tutoriel.php?id_article=1, • http://localhost/www/spip/tutoriel.php?id_article=2 et • http://localhost/www/spip/tutoriel.php. Tapez maintenant : Voyez-vous la différence ? Les deux premières pages vous donnent les articles n°1 et 2, la troisième n’a pas d’id_article dans son contexte, et génère une erreur. Bravo ! Votre squelette est maintenant « contextuel ». Un squelette, plusieurs articles (2/2) <BOUCLE_article(ARTICLES){id_article}> <h1>#TITRE</h1> <b>#CHAPO</b> <div align="justify">#TEXTE</div> </BOUCLE_article> La BOUCLE_article s’exécute dans un «contexte» où id_article est égal à 2 (c’est la valeur qui est passée dans l’URL). • Si on lui précise {id_article=1} elle va chercher l’article n° 1; • mais si on lui demande juste {id_article}, elle va chercher l’article dont le numéro est indiqué par le contexte (ici l’URL).

17. Une rubrique (1/4) Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Tous les articles du site Modifions notre squelette « tutoriel.html » de la manière suivante : <BOUCLE_article(ARTICLES)> #TITRE<BR> </BOUCLE_article> Là, on supprime carrément la condition {id_article}, la boucle va donc « courir » sur tous les articles. Attention : cette BOUCLE peut générer une page énorme si la base de données contient déjà de nombreux d’articles, ce qui est le cas de celle de F3MITIC 2003-2004 qui est chargée pour votre SPIP...

18. Une rubrique (2/4) Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Les dix premiers articles du site ...mieux vaut prendre vos précautions et ajouter tout de suite par exemple le critère de limitation {0,10} pour limiter aux 10 premiers articles : <BOUCLE_article(ARTICLES) {0,10}> #TITRE<BR> </BOUCLE_article> Résultat : en appelant simplement http://localhost/www/spip/tutoriel.php3 (plus besoin d’id_article désormais, puisque cette condition a été supprimée) les titres des 10 premiers articles publiés s’affichent (sous la forme de liens hypertextes), séparés chacun par un saut de ligne.

19. Afficher les 10 articles les plus récents d’une rubrique Ajoutons les critère de classement {par date} et {inverse} ainsi que le critère de limitation au 10 premiers articles {0,10}, on obtient ainsi les liens hypertextes avec le titre des 10 derniers articles publiés (classement anti-chronologique) : <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> Une rubrique (3/4) Sommaire d’une rubrique En ajoutant le critère de sélection id_rubrique, on produit le sommaire d’une rubrique : <BOUCLE_article(ARTICLES){id_rubrique}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article>

20. Une rubrique (4/4) Prenons dans l’ordre : • id_rubrique : ne prend que les articles appartenant à la rubrique id_rubrique (cf. ci-dessous pour que cette variable soit définie dans le contexte de notre BOUCLE_article). • {par date}{inverse} : trie par date dans l’ordre décroissant. • {0,10} : ... et prend les 10 premiers résultats. • Enfin, <a href="#URL_ARTICLE">#TITRE</a> va afficher non seulement le titre de l’article mais en plus créer un lien vers cet article. • Reste à invoquer le squelette, en lui passant le contexte id_rubrique=1 : • http://votresite.net/tutoriel.php3?id_rubrique=1 La magie de SPIP tient dans la combinaison de ce type de fonctionnalités. Si vous êtes arrivé jusqu’ici, c’est gagné !

21. Boucles en boucles (1/2) Affichons sur la même page, les éléments de la rubrique elle-même : son titre, son texte de présentation, etc. <BOUCLE_rubrique(RUBRIQUES){id_rubrique}> <h1>#TITRE</h1> <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> [(#TEXTE|justifier)] </BOUCLE_rubrique> On appelle la page avec l’URL : http://localhost/www/spip/tutoriel.php3?id_rubrique=1. La boucle ARTICLES est intégrée dans une boucle RUBRIQUES. Le contexte de la boucle ARTICLES est l’id_rubrique donné par la boucle RUBRIQUES, qui elle même va chercher le contexte donné par l’URL (id_rubrique=1). Donc nous sommes bien, au niveau des ARTICLES, avec l’id_rubrique demandé. De ce point de vue rien ne change.

22. [(#TEXTE|justifier)] Dernière remarque : on a introduit le filtre |justifiersur le champ #TEXTE. Ce filtre modifie le contenu du texte avant de l’installer dans la page finale. Ca vous fait saliver ? Boucles en boucles (2/2) <BOUCLE_rubrique(RUBRIQUES){id_rubrique}> <h1>#TITRE</h1> <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> [(#TEXTE|justifier)] </BOUCLE_rubrique> En revanche, la boucle RUBRIQUES a permit à SPIP de sélectionner les valeurs des champs de la rubrique en question : on peut donc afficher le #TITRE et le #TEXTE de cette rubrique. Notez bien que ce #TEXTE serait celui de la rubrique même si on appelait aussi #TEXTE dans la boucle ARTICLES. Le fonctionnement arborescent de SPIP garantit que le #TEXTE d’un article ne déborde pas de la boucle ARTICLES.

23. Gérer le cache (1/5)

24. Gérer le cache (2/5) Lorsqu’une page est demandée à SPIP, par exemple l’URL http://localhost/www/spip/tutoriel.php3?id_article=12, SPIP regarde dans son sous-répertoire CACHE/si ce fichier existe : Si ce fichier n’existe pas, SPIP calcule ce fichier en se connectant à la base de données pour y lire les informations requises, dépose le résultat du calcul dans le CACHE et l’affiche à l ’écran de l’utilisateur. Si ce fichier existe, SPIP compare l’âge du fichier caché aux $delais fixés dans le fichier d’appel tutoriel.php3. Si ce délai est dépassé, SPIP recalcule le fichier comme indiqué ci-dessus. Si ce délai n’est pas dépassé, SPIP affiche le fichier présent dans le CACHE . Dans notre exemple nous avions fixé des $delais=0; d’où un recalcul systématique des pages à chaque consultation du site.

25. Mise en CACHE Calcule id_article=12 en intégrant les éléments de la base de données Fichier Existe ? Non Oui Non : Délai dépassé $delais < Age-Fichier ? Oui : Délai Non-dépassé La page « id_article=12 » est demandée à SPIP, c ’est à dire l’URL http://localhost/www/spip/tutoriel.php3?id_article=12, Consulte CACHE : Existence fichier id_article=12 ? Affiche article12.html Affiche article12.html (3/5)

26. Mise en CACHE Calcule id_article=12 en intégrant les éléments de la base de données Fichier Existe ? Non Oui Non : Délai dépassé $delais < Age-Fichier ? Oui : Délai Non-dépassé La page «  id_article=12  » est demandée à SPIP, c ’est à dire l’URL http://localhost/www/spip/ tutoriel.php3?id_article=12, Consulte CACHE : Existence fichier id_article=12 ? Distinguer : le Squelette HTML en amont du CACHE du Fichier HTML calculé pour le CACHE et l’ECRAN Schéma ou Organigramme ? Chacun choisit le «langage» qui lui convient ! Affiche article12.html Affiche article12.html

27. Gérer le cache (5/5) Passons à $delais=3600 (c’est en secondes) : Notre page web n’est donc recalculée que si, lorsqu’un visiteur la demande, sa version cachée date de plus d’une heure (soit 3600 s.). Sinon, SPIP lit simplement le contenu du fichier caché, et renvoie le résultat sans se connecter à la base de données (sauf pour y insérer un «hit» dans les statistiques). Réglage du délai : • Pour développer en mode local : $delais=0 • Pour la consultation en mode serveur : $delais=24 x 3600 • ou plus : $delais=72 x 3600 (soit 3 jours par exemple)

28. Des filtres (1/3) Si les BOUCLES & les BALISES permettent de structurer la page de manière logique, reste à présenter les données de manière esthétique. Question design SPIP ne peut rien pour vous, mais sachez user de ses filtres... les filtres les plus utilisés (ils sont appelés automatiquement) sont |typo et |propre : |typo : correcteur typographique, dont la mission principale est d’ajouter des espaces insécables où il en faut (cf. l’aide en ligne de SPIP) |propre : s’intéresse aux paragraphes, aux raccourcis SPIP (italiques, gras, intertitres, etc.) - il n’est appliqué par défaut qu’aux textes longs (#TEXTE, #CHAPO, etc.)

29. Des filtres (2/3) d’autres filtres sont très utiles, citons : |majuscules à la fonctionnalité évidente |justifierou |aligner_droite qui définissent l’alignement du texte par rapport aux bords verticaux |saison qui affiche « été » si la variable est une date comprise entre le 21 juin et le 20 septembre...

30. Des filtres (3/3) Comment utiliser un filtre ? • Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets : • Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets : [blah blah (#VARIABLE|filtre) bloh bloh] [blah blah(#VARIABLE|filtre) bloh bloh] • On peut enchaîner les filtres les uns à la suite des autres : ainsi : [(#DATE|saison|majuscules)]affichera-t-il « HIVER » [(#DATE|saison|majuscules)]affichera-t-il « HIVER »