SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 237 visiteurs en ce moment

Accueil > Documentation > Tutoriaux pour le code de SPIP > Archives tutoriaux code SPIP > Passer spip en xhtml valide (suite)

Passer spip en xhtml valide (suite)

Mise à jour du filtre posté par stef : « Passer spip en xhtml valide ».

15 septembre 2003 – par Aurélien PIERARD, Stéphane Deschamps – commentaires

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Créer du contenu xhtml 1.0 valide ? C’est possible avec très peu de travail. Tenez, deux filtres en plus, par exemple... Ces filtres ne règlent pas tous les problèmes, mais ils valident déjà le plus gros : le contenu complet du site. J’utilise ces filtres en production sur un spip 1.5.2 et toutes mes pages sont validées par le W3C, comme vous pouvez le voir en validant ma page d’accueil ou une page intérieure quelconque complète, avec des images.

Note des admins : SPIP à fait beaucoup de progrès depuis la version 1.5.1. Mais cet article reste très pertinent pour vous permettre de conprendre par exemple le fonctionnement des filtres, ou comment rectifier les derniers élements non valides.

XHTML ? Qu’est-ce que c’est ?

Le xhtml est une façon d’aborder le html et qui a vocation à le supplanter à moyenne échéance. Il est défini par le W3C comme « une reformulation de HTML 4 en XML 1.0 ». Sa principale différence avec html réside dans la nécessité de fermer tous les tags ouverts, y compris ceux qu’en html classique on utilise sans tag de fin (par exemple les <img> et autres <br>). Veuillez vous référer à Openweb notamment, si les normes du W3C vous sont imbuvables.

Attention, je ne vais vous fournir ici que de quoi modifier le contenu généré par spip. C’est à vous qu’il incombe par ailleurs de faire en sorte que le reste du site (notamment toute la structure) soit en xhtml, en n’imbriquant pas les balises n’importe comment, en femant systématiquement les balises ouvertes, et en n’utilisant pas n’importe quels attributs. La route est longue ;-)

Quels problèmes constate-t-on dans spip ?

Les problèmes majeurs rencontrés dans les pages générées par spip sont les suivants :

  • Mauvaise imbrication des tables, des intertitres (<h3>) et des listes [1] : ces éléments sont encadrés de <p class="spip></p>, ce n’est pas conforme.
  • <img> et <br> mal fermés
  • hspace et vspace sonrt des attributs d’images non valides, ainsi qu’align
  • Mise en forme : le gras généré par {{texte gras}} en spip-code est un <b>texte gras</b>, ce qui est un formatage visuel non-sémantique, auquel on préférera <strong>texte très appuyé</strong>... De même {texte italique} génère <i>texte italique</i> dans spip, auquel on préférera <em>texte appuyé</em>.
  • Pour les petits éléments de contenu (Descriptif, Notes, Forums) il arrive que les paragraphes soient absents, ou partiellement générés.

1. Changeons les intertitres

Tout d’abord nous devons redéclarer des intertitres, et nous affranchir ainsi des imbrications de titres dans les <p></p>. Vous l’aurez remarqué, par défaut spip 1.5.1 génère des paragraphes vides aux alentours des intertitres.

2. Filtrons notre contenu riche

Ce filtre, en plusieurs passages, corrige tous les points mentionnés ci-dessus. Il « désimbrique » les tags qui ne doivent pas être subordonnés à des <p></p>, il change les attributs align en style float, supprime les attributs hspace et vspace, etc.

2.1 Filtrons les formulaires

Cette partie permet de rendre compatible xhtml 1.0 les formulaires #RECHERCHE et #FORUM.


NB : Pour placer les deux attributs "id" et "name" dans la balise <form>, il faut remplacer la ligne :

$str = preg_replace("/(<form.*?)(name=)(.*?>)/", "\\1id=\\3", "$str");

par

$str = preg_replace("/(<form.*?)(name=')(.*?)(')(.*?>)/", "\\1id=\"\\3\" name=\"\\3\"\\5", "$str");

3. modifions tous les contenus « légers »

Les notes, forums, et autres chapeaux ne sont pas forcément bien « habillés ». Pour y remédier un filtre tout bête vérifie la présence de début et de fin de paragraphe. [2]

Conjonction des filtres (petite piqûre de rappel)

Pour rappel des filtres peuvent être imbriqués, on peut donc tout à fait utiliser [<div class="chapo">(#CHAPO|nb_spip2xhtml|nb_checkparas)</div>].

Mise en place

Sur mon site j’ai passé chaque contenu généré en nb_spip2xhtml, et ajouté pour les notes le nb_checkparas. Rien ne vous empêche, comme je viens de le préciser, de mettre systématiquement les deux filtres.

Mises en garde

Quand vous utilisez des <doc***> spip génère un tableau qu’il fait flotter à l’intérieur même d’un paragraphe. Cette approche « permissive » est tolérée par les navigateurs en HTML, elle est en revanche non valide en XHTML strict. Pour l’instant je n’ai pas de solution simple. Dans mon spip j’ai carrément dû modifier le noyau pour générer un <span> que je fais flotter, mais ce n’est pas satisfaisant, et en tout cas je me garderais de fournir le code ici, il est resté au niveau du hack marginal.

-  Ce filte ne s’applique pas aux formulaires #SIGNATURE, #SITE et #ECRIRE_AUTEUR
-  Pour utiliser ce filtre avec un formulaire #RECHERCHE, il faut préciser la page resultat.
ex : [(#FORMULAIRE_RECHERCHE|recherche.php3|nb_spip2xhtml)]

Et voilà le code complet :-)

P.-S.

-  Pour tester la validité de vos pages : W3C
-  Suite aux différentes contributions et à la remarque neoram, j’ai ajouté un fichier word indiquant en gros ce qu’il reste à faire pour rendre spip en xhtml valide et conforme aux recommendations W3C/WAI/Braillenet

Notes

[1Les listes qu’en spip on écrit en -* pour les listes à puces et en -# pour les listes numérotées, soit respectivement en html <ul> et <ol>

[2Vous constaterez que nous commençons par tester si la chaîne n’est pas vide, sans quoi nous générerions un paragraphe conforme, mais vide, ce qui peut poser des problèmes de mise en page : dans le cas d’un [<div class="notes">(#NOTES|nb_checkparas)</div>] par exemple, sans description on génère un pavé de notes non nécessaire, ce qui peut nuire au contenu et à l’apparence de sérieux du site.

Dernière modification de cette page le 23 septembre 2007

Retour en haut de la page

Vos commentaires

  • Le 31 mars 2005 à 16:26, par Christian C En réponse à : > Passer spip en xhtml valide (suite)

    Bonjour,

    Cette contrib m’intéresse car j’utilise beaucoup de liste (<ul><li> ...) qui dans l’écriture des articles spip, doivent être écrite avec des tirets ...

    Malheureusement, ces tirets sont transformés en balises : <br /><li>, imbriquées dans un <p class="spip" align="center"> et il manque la balise <ul>" !

    N’étant pas un pro en php, quelqu’un pourrait-il m’aider ?

    J’utilise SPIP 1.7.2

    Merci

    Répondre à ce message

  • Le 29 mars 2005 à 00:11, par guayacan En réponse à : > Passer spip en xhtml valide (suite)

    Cette contrib est-elle toujours d’actualité ?
    Les filtres sont apparamment utilisés dans les squelettes de spip contrib, est-ce normal ?

    @+

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • ScolaSPIP 4

    19 janvier 2016 – 213 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

  • Enluminures typographiques V3

    25 juillet 2009 – 186 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)

Ça spipe par là