La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence.

Présentations similaires


Présentation au sujet: "Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence."— Transcription de la présentation:

1 Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises 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 François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: / , - Tél: / , -http://icp.ge.ch/sem/cms-spip/ Cours « Squelettes SPIP » - Mardi 21 avril et Mardi 5 mai 2009, 8h00-18h00

2 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-complété 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 » (http://icp.ge.ch/sem/cms-spip/article.php3?id_article=166) 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

3 Code HTML optionnel avant Code HTML [ texte optionnel avant (#BALISE|filtre|filtre...) texte optionnel après ] Code HTML optionnel après Code HTML alternatif Code HTML optionnel avant Code HTML [ texte optionnel avant (#BALISE|filtre|filtre...) texte optionnel après ] Code HTML optionnel après Code HTML alternatif Rappel (1/1)

4 En début de chaque squelette placez systématiquement la balise : #CACHE{0} Ainsi la page sera systématiquement recalculée Une fois le squelette terminé, une valeur courante est : #CACHE{24*3600} En début de chaque squelette (1/1)

5 Dans le répertoire squelettes, 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 » Mon premier squelette (1/4) Afficher le Titre de larticle 1

6 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 (2/4) 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. Afficher le Titre, le Chapo et le Texte de larticle 1

7 Les balises #ID_ARTICLE #SURTITRE #TITRE #SOUSTITRE #DESCRIPTIF #CHAPO #TEXTE #PS Les balises #ID_ARTICLE #SURTITRE #TITRE #SOUSTITRE #DESCRIPTIF #CHAPO #TEXTE #PS Les balises calculées #NOTES #INTRODUCTION #LESAUTEURS #PETITION #URL_ARTICLE #FORMULAIRE_FORUM #FORMULAIRE_SIGNATURE #PARAMETRES_FORUM Les balises calculées #NOTES #INTRODUCTION #LESAUTEURS #PETITION #URL_ARTICLE #FORMULAIRE_FORUM #FORMULAIRE_SIGNATURE #PARAMETRES_FORUM Les logos #LOGO_ARTICLE #LOGO_ARTICLE_RUBRIQUE #LOGO_RUBRIQUE #LOGO_ARTICLE_NORMAL #LOGO_ARTICLE_SURVOL Les logos #LOGO_ARTICLE #LOGO_ARTICLE_RUBRIQUE #LOGO_RUBRIQUE #LOGO_ARTICLE_NORMAL #LOGO_ARTICLE_SURVOL Les balises #DATE #DATE_REDAC #DATE_MODIF #ID_RUBRIQUE #ID_SECTEUR #NOM_SITE #URL_SITE #VISITES #POPULARITE #LANG Les balises #DATE #DATE_REDAC #DATE_MODIF #ID_RUBRIQUE #ID_SECTEUR #NOM_SITE #URL_SITE #VISITES #POPULARITE #LANG Toutes les balises d'un article sont récupérables dans un squelette : Mon premier squelette (3/4)

8 #TITRE> #SOUSTITRE> #CHAPO #TEXTE [ Notes : (#NOTES)] [(#DATE|nom_jour) ][(#DATE|affdate)] [, Auteurs : (#LESAUTEURS)] Post-scriptum : #PS #TITRE> #SOUSTITRE> #CHAPO #TEXTE [ Notes : (#NOTES)] [(#DATE|nom_jour) ][(#DATE|affdate)] [, Auteurs : (#LESAUTEURS)] Post-scriptum : #PS Mon premier squelette (4/4) Exemple Afficher : Surtitre Titre Soustitre Chapo Texte Notes Date Auteurs PS de larticle 5 Afficher : Surtitre Titre Soustitre Chapo Texte Notes Date Auteurs PS de larticle 5

9 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.

10 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).

11 Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Une rubrique: les articles du site (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 du site « CMS-SPIP » qui est chargée pour votre SPIP...

12 Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Une rubrique: 10 prem. articles du site (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

13 Une rubrique: ses 10 premier articles (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

14 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)

15 Les articles du site: anti-chronologique (1/2) "#TITRE" du dernier article publié "#TITRE" de l'avant-dernier article publié ……. "#TITRE" du dernier article publié "#TITRE" de l'avant-dernier article publié ……. On veut afficher les derniers articles publiés, sur le modèle : Pour dire à SPIP d'afficher ces articles, il faut : Une boucle ARTICLES Un critère pour récupérer tous les articles publiés Un critère pour classer par ordre inverse de date de publication

16 Donc, créez le fichier "sommaire1.html » : #TITRE Lire l'article … Donc, créez le fichier "sommaire1.html » : #TITRE Lire l'article … Critères de sélection pour afficher les articles par ordre anti-chronologique : {tout} : tous les articles {par date} : trier par ordre chronologique {inverse} : inverse l'ordre de tri, afin d'aller du plus récent au plus ancien La boucle est affichée autant de fois qu'il y a d'articles (d'où le terme de "boucle") Les articles du site: anti-chronologique (2/2)

17 Sommaire : les dix derniers articles (1/2) Créez le fichier "sommaire2.html » : #TITRE Lire l'article … Créez le fichier "sommaire2.html » : #TITRE Lire l'article … Limiter le nombre de résultats avec le critère {début, nombre} début : résultat à partir duquel commence laffichage (la numérotation commence à 0) nombre : nombre de résultats à afficher Exemple : {0, 10} affiche dix articles à partir du premier (qui porte le numéro zéro) {3, 5} : affiche cinq articles à partir du quatrième (qui porte le numéro 3) Limiter le nombre de résultats avec le critère {a/b} a/b représente la portion à afficher. Par exemple, 1/3 demande laffichage du 1er tiers des résultats, alors que 3/4 demande laffichage du 3ème quart des résultats.

18 Sommaire : les dix derniers articles (2/2) Les dix derniers articles publiés sur le site sont : #TITRE Lire l'article Fin de la liste des articles Désolé, ce site ne contient pas d'articles ! Les dix derniers articles publiés sur le site sont : #TITRE Lire l'article Fin de la liste des articles Désolé, ce site ne contient pas d'articles ! Exploiter la syntaxe complète des boucles et les listes

19 Boucles en boucles : auteurs darticles (1/3) Boucles imbriquées pour afficher les auteurs de chaque article : utiliser une boucle "AUTEURS" à l'intérieur dune boucle "ARTICLES". #TITRE Lire l'article Article écrit par : #NOM … #TITRE Lire l'article Article écrit par : #NOM … Problème : sans critère de sélection, la boucle auteur affiche tous les auteurs du site

20 Boucles en boucles : auteurs darticles (2/3) Boucles imbriquées pour afficher les auteurs de chaque article : utiliser une boucle "AUTEURS" à l'intérieur dune boucle "ARTICLES". #TITRE Lire l'article Article écrit par : #NOM … #TITRE Lire l'article Article écrit par : #NOM … En ajoutant le critère {id_article} à la boucle AUTEURS, on n'affiche que les auteurs de l'article.

21 Les balises #ID_AUTEUR #NOM #BIO # #NOM_SITE #URL_SITE #PGP #LANG #FORMULAIRE_ECRIRE_AUTEUR Les balises #ID_AUTEUR #NOM #BIO # #NOM_SITE #URL_SITE #PGP #LANG #FORMULAIRE_ECRIRE_AUTEUR Les balises calculées #NOTES #URL_AUTEUR Les balises calculées #NOTES #URL_AUTEUR Les logos #LOGO_AUTEUR Les logos #LOGO_AUTEUR Toutes les balises d'un auteur sont récupérables dans un squelette : Boucles en boucles : auteurs darticles (3/3)

22 Boucles en boucles : rubrique-articles (1/3) 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.

23 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)] 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. [(#TEXTE|justifier)] Boucles en boucles : rubrique-articles (2/3)

24 Les balises #ID_RUBRIQUE #TITRE #DESCRIPTIF #TEXTE #ID_SECTEUR #LANG Les balises #ID_RUBRIQUE #TITRE #DESCRIPTIF #TEXTE #ID_SECTEUR #LANG Les balises calculées #NOTES #INTRODUCTION #URL_RUBRIQUE #DATE #FORMULAIRE_FORUM #PARAMETRES_FORUM #FORMULAIRE_SITE Les balises calculées #NOTES #INTRODUCTION #URL_RUBRIQUE #DATE #FORMULAIRE_FORUM #PARAMETRES_FORUM #FORMULAIRE_SITE Les logos #LOGO_RUBRIQUE #LOGO_RUBRIQUE_NORMAL #LOGO_RUBRIQUE_SURVOL Les logos #LOGO_RUBRIQUE #LOGO_RUBRIQUE_NORMAL #LOGO_RUBRIQUE_SURVOL Toutes les balises d'une rubrique sont récupérables dans un squelette : Boucles en boucles : rubrique-articles (3/3)

25 Brèves (1/3) Afficher la brève dont lid_breve est défini dans l URL : Afficher les dix dernières brèves publiées sur tout le site : Afficher les dix dernières brèves publiées dans une rubrique particulière : Afficher la brève dont lid_breve = 5 :

26 Les balises calculées #NOTES #INTRODUCTION #URL_BREVE #FORMULAIRE_FORUM #PARAMETRES_FORUM Les balises calculées #NOTES #INTRODUCTION #URL_BREVE #FORMULAIRE_FORUM #PARAMETRES_FORUM Les logos #LOGO_BREVE #LOGO_BREVE_RUBRIQUE Les logos #LOGO_BREVE #LOGO_BREVE_RUBRIQUE Les balises #ID_BREVE #TITRE #DATE #TEXTE #NOM_SITE #URL_SITE #ID_RUBRIQUE #LANG Les balises #ID_BREVE #TITRE #DATE #TEXTE #NOM_SITE #URL_SITE #ID_RUBRIQUE #LANG Toutes les balises d'une brève sont récupérables dans un squelette : Brèves (2/3)

27 Brèves (3/3) Un squelette breves.html simple : #TITRE [(#LOGO_BREVE||image_reduire{200,200})] [(#DATE|nom_jour)][(#DATE|affdate)] #TITRE #TEXTE [ Voir en ligne : #NOM_SITE ] [ Notes: (#NOTES) ] #TITRE [(#LOGO_BREVE||image_reduire{200,200})] [(#DATE|nom_jour)][(#DATE|affdate)] #TITRE #TEXTE [ Voir en ligne : #NOM_SITE ] [ Notes: (#NOTES) ]

28 Les Boucles récursives s'appellent elles mêmes jusqu'à ne plus rencontrer d'occurrence. Elles sont souvent utilisées pour dérouler des structures arborescentes. Boucles récursives: rubriques arboresc. (1/2) #TITRE #TITRE Larborescence des rubriques dune rubrique

29 ... [(#REM) Si aucun article, affiche un plan de la rubrique ] [(#TITRE)] [(#REM) Une boucle recursive pour le mini plan] [(#TITRE)] Boucles récursives : rubriques arboresc. (2/2) Extrait du squelette rubrique.html dans le répertoire /squelettes-dist/ de SPIP 2.0.6

30 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.)

31 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)

32 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 :


Télécharger ppt "Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence."

Présentations similaires


Annonces Google