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: / , - Tél: / , - Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h Prendre en compte les éléments Maîtriser la syntaxe et exploiter les add-on pour Dreamwaever et le WEB Fichier HTML Règles CSS Boîtes imbriquées Arborescence des balises HTML Code HTML + Balises SPIP Boucles et Balises SPIP Boucles et Balises SPIP TRAVAUX PRATIQUES et relations

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

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 Mise en page : manuel de référence. Comment créer sa propre mise en page pour un site géré sous SPIP :

Mon premier squelette (je le sors du placard). Comment écrire un premier squelette qui marchouille. Un squelette, plusieurs articles, cest à ç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 na 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. SPIP pas à pas. Pas à pas, comment créer un SPIP qui défie les limites.

Spip et les feuilles de style dautres 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 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 : Guide des fonctions avancées :

Afficher automatiquement selon la date ou selon un ordre imposé Trier des articles par ordre alphabétique, sauf un quil 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 dun an Présenter les résultats dune recherche par secteurs Afficher le nombre de messages du forum lié à un article Un menu déroulant pour présenter une liste darticles Remplir les meta-tags HTML des pages darticle Trucs et astuces :

Informations préliminaires

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

Linterface des news Et encore dautres 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 Tutorial : utilisation avancée des boucles et des mots-clés : 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 Par la suite, après le cours et les TP... Donnez-vous éventuellement la peine de faire, en tout ou partie, lexercice très complet constitué par le tutoriel présenté ci-dessous et proposé sur le site officiel SPIP :

MAC : ou encore PC - installation standard EasyPHP : ou encore MAC : ou encore PC - installation standard EasyPHP : ou encore URL locale sur les postes MAC et PC Considérons le cas dun é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 ladresse (URL) suivante dans la barre dadresse du navigateur :

Travaux pratiques « pas à pas » pour votre premier squelette

Mon premier squelette (1/3) Matériel requis pour ce tutoriel : Conformément au début du cours une version SPIP 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 sont chargés sur chaque poste. Vous disposez donc d'une base très riche aux plans quantitatif et qualitatif. Voici un exemple minimal de squelette qui vous permettra d'extraire des données de larticle n°1 de la base et den faire une page Web. 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 dutiliser un éditeur de texte classique (par exemple le bloc-notes sous Windows). Notre choix : Nous utilisons Dreamweaver car : 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». 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 ). 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 ).

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

Ajoutez du HTML et dautres appels de « champs » SPIP au fichier tutoriel.html, en l'occurrence le chapeau (#CHAPO) et le texte principal (#TEXTE) : #TITRE #CHAPO #TEXTE #TITRE #CHAPO #TEXTE Rechargez la page ce qui donne l'essentiel de l'article n° 1. Ajoutez ensuite les champs manquants pour parfaire laffichage de larticle : #SURTITRE, #LESAUTEURS, #SOUSTITRE, #NOTES, #PS, etc. Rechargez la page 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 : Mon premier squelette (3/3) 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.

Comme vous le voyez, on remplace simplement {id_article=1} par {id_article} tout court. Voilà : en rechargeant la page avec l'URL vous obtenez maintenant larticle 2. Modifions dans le squelette « tutoriel html » la ligne qui définit la « boucle article » : Un squelette, plusieurs articles (1/2) Afficher nimporte quel article : Pour cela nous allons appeler notre page Web avec le paramètre id_article=2 pour appeler l'article 2 : Afficher des éléments en fonction du contexte #TITRE #CHAPO #TEXTE #TITRE #CHAPO #TEXTE Echec : c'est toujours larticle 1 (et pas le 2) qui s'affiche.

La BOUCLE_article sexécute dans un «contexte» où id_article est égal à 2 (cest la valeur qui est passée dans lURL). Un squelette, plusieurs articles (2/2) #TITRE #CHAPO #TEXTE #TITRE #CHAPO #TEXTE et et Voyez-vous la différence ? Les deux premières pages vous donnent les articles n°1 et 2, la troisième na pas did_article dans son contexte, et génère une erreur. Bravo ! Votre squelette est maintenant « contextuel ». Tapez maintenant : Si on lui précise {id_article=1} elle va chercher larticle n° 1; mais si on lui demande juste {id_article}, elle va chercher larticle dont le numéro est indiqué par le contexte (ici lURL).

Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Une rubrique (1/4) Modifions notre squelette « tutoriel.html » de la manière suivante : #TITRE #TITRE Tous les articles du site 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 darticles, ce qui est le cas de celle de F3MITIC qui est chargée pour votre SPIP...

Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Une rubrique (2/4)...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 : Les dix premiers articles du site Résultat : en appelant simplement (plus besoin did_article désormais, puisque cette condition a été supprimée) les titres des 10 premiers articles publiés saffichent (sous la forme de liens hypertextes), séparés chacun par un saut de ligne. #TITRE #TITRE

Une rubrique (3/4) #TITRE #TITRE Afficher les 10 articles les plus récents dune 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) : En ajoutant le critère de sélection id_rubrique, on produit le sommaire dune rubrique : Sommaire dune rubrique #TITRE #TITRE

Prenons dans lordre : 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 lordre décroissant. {0,10} :... et prend les 10 premiers résultats. Enfin, #TITRE va afficher non seulement le titre de larticle mais en plus créer un lien vers cet article. Reste à invoquer le squelette, en lui passant le contexte id_rubrique=1 : La magie de SPIP tient dans la combinaison de ce type de fonctionnalités. Si vous êtes arrivé jusquici, cest gagné ! Une rubrique (4/4)

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. #TITRE #TITRE [(#TEXTE|justifier)] #TITRE #TITRE [(#TEXTE|justifier)] On appelle la page avec lURL : La boucle ARTICLES est intégrée dans une boucle RUBRIQUES. Le contexte de la boucle ARTICLES est lid_rubrique donné par la boucle RUBRIQUES, qui elle même va chercher le contexte donné par lURL (id_rubrique=1). Donc nous sommes bien, au niveau des ARTICLES, avec lid_rubrique demandé. De ce point de vue rien ne change.

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 dun article ne déborde pas de la boucle ARTICLES. #TITRE #TITRE [(#TEXTE|justifier)] #TITRE #TITRE [(#TEXTE|justifier)] Boucles en boucles (2/2) Dernière remarque : on a introduit le filtre |justifier sur le champ #TEXTE. Ce filtre modifie le contenu du texte avant de linstaller dans la page finale. Ca vous fait saliver ? [(#TEXTE|justifier)]

Gérer le cache (1/5)

Gérer le cache (2/5) Lorsquune page est demandée à SPIP, par exemple lURL Dans notre exemple nous avions fixé des $delais=0; doù un recalcul systématique des pages à chaque consultation du site. Si ce délai nest pas dépassé, SPIP affiche le fichier présent dans le CACHE. Si ce délai est dépassé, SPIP recalcule le fichier comme indiqué ci-dessus. Si ce fichier existe, SPIP compare lâge du fichier caché aux $delais fixés dans le fichier dappel tutoriel.php3. SPIP regarde dans son sous-répertoire CACHE/ si ce fichier existe : Si ce fichier nexiste 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 laffiche à l écran de lutilisateur.

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

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

Passons à $delais=3600 (cest en secondes) : Notre page web nest donc recalculée que si, lorsquun visiteur la demande, sa version cachée date de plus dune 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). 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) Gérer le cache (5/5) Réglage du délai :

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 dajouter des espaces insécables où il en faut (cf. laide en ligne de SPIP) |propre : sintéresse aux paragraphes, aux raccourcis SPIP (italiques, gras, intertitres, etc.) - il nest appliqué par défaut quaux textes longs (#TEXTE, #CHAPO, etc.)

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

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