MiniGriSpip

Petit site de test et de démonstration du squelette MiniGriSpip 1.6...
Accueil du site > Autres projets > Filtre Filets de Séparation 1.2
  • Calendrier
 2006   2007   2008   2011 
  • Infos
  • Dernière modification :
    Le mercredi 14 décembre 2011
  • Statistiques contenus :
    Articles : 24 -  Brèves : 4
    Commentaires : 212
    Sites : 3 -  Auteurs : 2
  • Statistiques visites :
    Aujourd'hui : 0 -  Total : 194147
  • Article

Filtre Filets de Séparation 1.2

Petit filtre pour insérer des filets de séparation dans les textes...

Le samedi 9 septembre 2006, par FredoMkb

Voici une nouvelle version de ce filtre, elle apporte un certain nombre d’optimisations et d’améliorations...

Sommaire

Présentation

Je reprends ici les mêmes mots que ceux qui présentaient la première version de ce filtre :

Filets de Séparation est un filtre qui ajoute la possibilité d’insérer des filets de séparation, personnalisables par des feuilles de style, dans le corps des textes, aussi bien pour les articles que pour les brèves.

Le but est d’offrir un moyen simple et rapide pour structurer et visualiser les niveaux d’imbrication des différents textes a l’intérieur des différentes parties et chapitres qui composent un article ou brève.

Ce filtre se veut un complément un peu plus souple et personnalisable que le filet de séparation par défaut produit par Spip lors de l’insertion des 4 tirets normaux.

Vous découvrirez dans cet article quelques exemples d’utilisation.

Nouveautés

Cette nouvelle version a été entièrement réécrite, et dispose désormais d’un algorithme de travail plus précis et propose un mode d’utilisation plus simplement extensible.

Voici une petite liste des nouveautés de cette version :

- Nouvelle syntaxe pour l’inscription des balises "filet", par l’utilisation des numéros d’identification, autorisant la création des nouveaux filets personnalisés plus simplement qu’avant (voir le chapitre "Utilisation" pour plus de détails).

- Désormais, seules les balises "filet" isolées, dans une ligne de texte à part, seront traitées par le filtre, épargnant les balises qui seront insérées à l’intérieur des paragraphes (voir le chapitre "Utilisation" pour plus de détails).

- Cette version est distribuée avec une feuille de style plus complète, proposant un certain nombre de filets pré-formatés selon 3 groupes : filets, blocs et images (voir le chapitre "Personnalisations" pour plus de détails).

- Les balises "filet" insérées à l’intérieur des blocs "code" et "cadre" ne seront plus traitées par le filtre.

- Désormais le filtre ne se déclenche plus systématiquement, il vérifie préalablement l’existence d’une balise avant de lancer les traitements.

Important, pour assurer une compatibilité descendante, et pour ne pas avoir à corriger tous les articles utilisant les anciennes balises, le filtre traite aussi les filets utilisant la syntaxe de l’ancienne version, mais il faut à l’avenir utiliser de préférence les nouvelles balises.

Attention toutefois, les anciennes balises présentes à l’intérieur des blocs "code" et "cadre" seront traitées.

Installation

Filets de Saparation se présente sous la forme de cinq fichiers qu’il faut déplacer (ou dupliquer) à l’intérieur du répertoire de votre squelette :

- "filets_sep.php" est le fichier qui contient le filtre de création et d’insertion des filets dans le texte fourni.

- "filets_sep.css" est le fichier qui contient les styles d’affichage des différents filets produits par le filtre.

- "Degrade.png", "Motif.png" et "Ornement.png" sont des images utilisées par trois des styles fournis par défaut avec cette distribution.

Voici les étapes à suivre pour installer le filtre afin qu’il soit utilisable dans vos squelettes, commençons par le fichier "filets_sep.php" :

- Si votre squelette dispose d’un fichier nommé "mes_fonctions.php", éditez-le, puis insérez la ligne de code suivante en tête du fichier, juste après la balise qui débute le code Php <?php, mais pas à l’intérieur d’une autre fonction :

include("filets_sep.php");

- Une autre possibilité consisterait à éditer les fichiers Php "mes_fonctions.php" et "filets_sep.php", et par un simple copier/coller, insérer, à partir du fichier Php du filtre, l’ensemble du code de la fonction nommée "filets_sep" dans le fichier "mes_fonctions.php", n’importe où entre les balises <?php et ?>.

- Enfin, si votre squelette ne dispose pas d’un fichier nommé "mes_fonctions.php", il suffit alors de renommer le fichier "filets_sep.php" en "mes_fonctions.php".

Voici ensuite les étapes pour installer les feuilles de style afin que l’aspect des filets générés soit utilisée et personnalisable :

- Si votre squelette dispose déjà d’un fichier de feuilles de style par défaut, il suffit de l’éditer, ainsi que le fichier "filets_sep.css", et copier l’ensemble de styles présents dans ce dernier à l’intérieur du premier.

- Si votre squelette ne dispose pas d’un fichier de feuilles de style, ou si vous ne souhaitez pas modifier celui existant, vous pouvez intégrer la feuille de style "filets_sep.css" directement à l’intérieur des fichiers Html de votre squelette qui l’utiliseront, à savoir, "article.html" et "breve.html", en insérant le code suivant, entre les balises <head> et </head> :

<link rel="stylesheet" href="[(#CHEMIN{filets_sep.css})]" type="text/css" />

Voilà, l’installation est finie, passons maintenant à l’intégration du filtre dans les codes des pages Html de votre squelette.

Intégration

Ce filtre est spécialement dédié au traitement des textes des articles et brèves, il est donc à utiliser à l’intérieur des boucles correspondantes sur la balise "#TEXTE".

Par exemple, dans une boucle "(ARTICLES)", il faut placer ce filtre sur la balise "#TEXTE" de la manière suivante :

[(#TEXTE*|filets_sep|propre)]

Important, veuillez respecter les contraintes d’intégration suivantes :

- Il est absolument nécessaire de respecter la nouvelle syntaxe d’intégration, qui consiste à faire suivre la balise "#TEXTE" d’un astérisque "*", et de finir l’intégration par le filtre "propre" qui assure la mise en forme typographique par défaut de Spip [1].

Si vous avez d’autres filtres a utiliser sur la même balise, comme par exemple le filtre qui sert à redimensionner les images contenues dans l’article, insérez alors de préférence le filtre "filets_sep" en premier :

[(#TEXTE*|filets_sep|propre|reduire_image{400,0})]

Vous pouvez évidemment appliquer ce filtre sur d’autres données, comme sur les textes des messages des forums par exemple.

Utilisation

Voici comment utiliser ce filtre dans le texte des articles et brèves...

Les balises à utiliser s’inscrivent toujours de la même manière, en utilisant 4 tirets bas ou "underscore" (obtenus par "majuscule + tiret"), séparés, deux à deux, par un numéro correspondant au type de filet a insérer dans le texte.

La syntaxe générale des balises est donc : "__N__", où "N" représente le numéro d’identification du filet à insérer, en relation directe avec les styles correspondants.

Par exemple, la balise suivante "__3__" produit le petit filet pointillé ci-dessous (selon les styles par défaut de feuille de style fournie avec cette distribution) :

Important, veuillez respecter les contraintes d’utilisation suivantes :

- Les balises de cette version du filtre ne doivent recevoir aucun autre identificateur que des nombres entiers, tout autre caractère utilisé ne produira aucun effet.

- Pour que les balises puissent être converties en filets de séparation, il faut placer chaque balise dans une ligne de texte isolée, ou dans un paragraphe à part, c’est à dire, en laissant une ligne vierge avant et après la balise.

- Les balises ne doivent être entourées d’aucun autre caractère en début ou fin de balise, sans quoi le filtre sera totalement inopérant.

- Toute balise insérée à l’intérieur d’un paragraphe de texte, ou à l’intérieur des blocs "code" et "cadre", ne sera pas traitée par le filtre.

Personnalisations

Ce filtre remplace les différentes balises insérées, dans le texte des articles et brèves, par des paragraphes Html vides, mais ayant chacun un style spécifique, respectant le modèle suivant :

<p class="filet_sep_N"></p>

Chaque paragraphe ayant son propre style, il devient alors facile des les formater à notre guise.

L’aspect de l’ensemble de ces "filets-paragraphes" est donc personnalisable grâce aux styles correspondants au numéro d’identification "N" utilisé dans les balises insérées dans les textes.

Ainsi, si on insère une balise "__N__", où "N" représente le numéro d’identification du filet à insérer, le style correspondant devra respecter la syntaxe suivante :

.filet_sep_N {attribut: valeur; attribut: valuer; etc. }

Dès lors, pour la balise "__3__" par exemple, le style correspondant, selon la feuille de style fournie, est :

.filet_sep_3 {border-bottom: 1px dotted #333; padding: 0; margin: 0px 160px;}

Ce qui va produire dans le texte des articles, après le traitement du filtre, un "filet-paragraphe" Html comme celui-ci :

<p class="filet_sep_3"></p>

Cette version du filtre est distribuée avec une feuille de style comportant une dizaine de styles par défaut en guise d’exemples, regroupés en trois catégories :

- "Filets" : ce sont des filets simples ;
- "Blocs" : ce sont des filets sous forme de blocs ;
- "Images" : ce sont des filets sous forme de blocs contenant des images.

Vous pouvez évidemment modifier et adapter chacun de ces styles selon vos goûts et besoins, un grand nombre de formatages sont possibles, n’hésitez pas alors à les personnaliser à votre convenance.

Vous pouvez aussi ajouter d’autres styles, en leur attribuant un numéro d’identification que vous utiliserez ensuite dans les balises à insérer dans les textes de vos articles et brèves.

Important, veuillez respecter les contraintes de personnalisation suivantes :

- Si vous ajoutez des nouveaux styles, veuillez toujours nommer les styles en commençant par le terme ".filet_sep_", suivi du numéro d’identification de la balise correspondante.

- Les numéros d’identification utilisés dans les styles et les balises correspondantes, doivent toujours être un entier positif, et éviter aussi les nombres précédés de zéros, comme "001".

Exemples

Comme une image vaut tous les discours, voici l’exemple des dix filets fournis avec cette version du filtre.


- Filets

La balise __0__ produit le filet :

La balise __1__ produit le filet :

La balise __2__ produit le filet :

La balise __3__ produit le filet :

  Cliquez sur la vignette pour agrandir l’image  
PNG - 13 ko
Filets


- Blocs

La balise __4__ produit le filet :

La balise __5__ produit le filet :

La balise __6__ produit le filet :

  Cliquez sur la vignette pour agrandir l’image  
PNG - 10.6 ko
Blocs


- Images

La balise __7__ produit le filet :

La balise __8__ produit le filet :

La balise __9__ produit le filet :

  Cliquez sur la vignette pour agrandir l’image  
PNG - 37.7 ko
Images


Tous ces filets différents ont été obtenus uniquement en jouant avec les feuilles de style... comme vous pouvez le constater, une fois le filtre installé et les styles paramétrés, il devient très facile de créer des séparations personnalisées dans vos textes... un jeu d’enfants :-)

Codes

Important, pour éviter un problème d’affichage des codes ci-dessous, les balises "cadre" et "code" ont été légèrement modifiées, par l’ajout des espaces autour des textes.

Si vous utilisez ces codes par copier/coller, vous devrez effacer les espaces en trop dans ces balises pour que le code fonctionne correctement.

Ces deux balises "cadre" et "code" se trouvent juste après le commentaire :

// On isole les textes presents dans les balises "cadre" et "code".

Voici le code Php du filtre :


Voici les styles par défaut de la feuille de style fournie :

Téléchargement

  Cliquez sur l’icône pour télécharger le filtre  
Zip - 149.4 ko
Filtre "Filets de Séparation" (150 Ko)

Remerciements

Je voudrais remercier tous les participants et utilisateurs du squelette MiniGriSpip pour leurs interventions toujours constructives et pour l’accueil qu’ils ont su réserver à ce projet.

Je voudrais remercier aussi aux différents participants des forums ExpReg.com ainsi que PhpFrance pour leur aide inestimable.

Enfin, un grand merci à la communauté Spipienne pour leur esprit d’entraide permanent, et aux concepteur et développeurs de ce magnifique outil de publication qu’est Spip.

Notes :

[1] Contrairement à la version précédente du filtre, cette nouvelle version travaille sur le texte brut des articles et brèves, pour s’adapter au mieux à l’intégration avec d’autres filtres utilisant la même méthode de travail

  • Commentaires : 9 (triés par date)
  • Le 23 septembre 2006 11:06, par Manu

    Bonjour, pas mal ce filtre. Petite question : c’est possible de mettre des images animés, comme des gifs ou des flash ?

    Notes :

    [1] Note de bas de page

  • Le 28 septembre 2006 06:11, par FredoMkb

    Bonjour Manu :-)

    Pardon pour cette réponse tardive...

    Oui, pour les "gif" c’est possible, et ça ne devrait poser aucun soucis...

    En revanche, pour d’autres types de fichiers multimédia, tel que les Flash, les vidéos, etc., je pense que le filtre, tel qu’il est aujourd’hui, n’est pas du tout adapté pour ce type d’affichage (n’étant pas spécialiste dans ce domaine, je ne peux pas l’assurer de manière catégorique), car, à priori, il faudrait modifier le code Html selon le type de document à afficher...

    Bref, la réponse et Oui pour "gif" et Non pour les autres documents...

    Sinon, à titre d’info, il n’y a rien de prévu pour l’instant, et pour un moment certainement, comme évolution prochaine pour ce filtre.

    Merci et bonne continuation :-)

  • Le 29 septembre 2006 16:09, par marc

    superbe ! il va falloir que je mette ca en place sur mon site.

    je profite de ce commentaire pour te dire que par rapport à ta question sur phpmv sur mon site un plugin est en préparation (quasiment finalisé d’ailleurs).

    N’hésite pas à me recontacter pour plus de renseignements.

    cdlt, marc

    Voir en ligne : Tech It

  • Le 29 septembre 2006 20:30, par FredoMkb

    Merci Marc pour ton appréciation :-)

    Je viendrais de temps en temps jetter un coup d’oeil sur ton site pour découvrir ton plugin...

    Bonne continuation :-)

  • Le 17 décembre 2006 06:06, par FredoMkb

    Important !

    Pour nous confier votre avis, ou nous faire part de vos remarques et/ou suggestions concernant cet article ou le projet proposé, vous pouvez vous exprimer directement dans le présent forum...

    En revanche, pour toutes les questions techniques, concernant l’installation du filtre, son intégration, son utilisation et sa personnalisation, je vous invite à participer à la discussion spécialement ouverte à cet effet : Discussion technique sur le filtre "Filets de Séparation".

    Merci de votre compréhension... :-)

  • Le 26 décembre 2006 22:38, par Pat

    Slt, belle et utile contrib.

    Que penses-tu de mon projet http://www.spip-contrib.net/Tweak-SPIP ? Acceptes-tu que tes filets fassent partie des tweaks ? Ca serait sympa de pouvoir réunir toutes les idées lumineuses de chacun et de les proposer en pack aux utilisateurs... Certains plugins sont très petits et comme l’union fait la force... Bien sûr, tu gardes la possibilité d’en maintenir le développement si tu le désires...

    J’ai fait un test déjà avec Tweak SPIP : tout fonctionne bien il me semble.

    Merci de ta réponse prochaine.

    Pat.

    Voir en ligne : Tweak SPIP

  • Le 28 décembre 2006 20:21, par FredoMkb

    Merci Pat pour ta proposition, que j’accepte avec plaisir...

    Je viens de voir d’ailleurs que tu avais pris la peine de publier un article complet sur ce nouveau tweak basé sur ce filtre, et je t’en remercie :-)

    J’espère pouvoir te proposer d’autres projets à l’avenir...

    Encore merci et je souhaite plein de succès Tweak SPIP !

  • Le 29 décembre 2006 02:56, par Pat

    Merci bcp pour tes encouragements et de ton enthousiasme. Ton travail vaut la peine qu’on s’y attarde et chapeau bas pour sa qualité. Ta doc est aussi remarquablement détaillée. C’est appréciable pour les curieux débutants qui débarquent sur le net tous les jours.

    Le projet Tweak Spip peut bien sûr cohabiter avec ton projet original en plugin seul. J’ai dû modifier un peu ta contrib pour la rendre pleinement compatible avec Tweak Spip. Mon problème était en fait l’adresse des images dans le fichier css : il était impossible de fixer automatiquement cette adresse, les dossiers pouvant varier fortement d’un site à l’autre. du coup j’ai opté pour la balise __image.png__ au lieu de __7__. L’avantage immédiat est que l’utilisateur peut mettre n’importe quelle image de son choix en filet. Le tout petit moins est que le style utilisé pour les images est toujours le même : .filet_sep_image. On se prive alors malheureusement de la possibilité d’encadrer l’image au dessus ou en dessous comme tu l’avais fait pour les fleurs. D’un autre côté, je me dis qu’on peut dessiner des bordures directement dans l’image brute...

  • Le 3 janvier 2007 17:54, par FredoMkb

    Bonjour Pat :-)

    Ta doc est aussi remarquablement détaillée. C’est appréciable pour les curieux débutants qui débarquent sur le net tous les jours.

    Disons que, étant moi-même très novice avec toutes ces techniques et tous ces langages, je m’efforce, chaque fois que je finalise un petit projet perso et que je le propose à la communauté, de le rendre le plus lisible, accessible et complèt possible (même si parfois c’est un peu long et redondant), afin que les autres débutants puissent, à leur tour, comprendre et apprendre un peu, tel que j’ai pu le faire en y découvrant des exemples bien expliqués...

    J’ai dû modifier un peu ta contrib pour la rendre pleinement compatible avec Tweak Spip. Mon problème était en fait l’adresse des images dans le fichier css : il était impossible de fixer automatiquement cette adresse, les dossiers pouvant varier fortement d’un site à l’autre. du coup j’ai opté pour la balise __image.png__ au lieu de __7__.

    Oui, j’avais bien remarqué cette adaptation, que je trouve d’ailleurs très astucieuse, je pourrais peut-être m’en inspirer si un jour j’arrive à faire de ce simple filtre un véritable plugin, mais pour l’instant tout ça reste assez complèxe pour moi... j’attends avec impatience de trouver un bon tutorial, adressé à des débutants (des vrais !), et qui expliquerait, pas à pas, comment réaliser un plugin... bref, un jour peut-être j’y arriverais :-)

    En tout cas, un grand merci Pat pour tes appréciations et encouragements, en souhaitant que le projet Tweak Spip rencontre le meilleur des accueuils, et que bien d’autres développeurs s’y impliquent...

    Merci et à bientôt :-)

  • Haut
Suivre la vie du site RSS 2.0 | SPIP | Mgs MGS