Migrer un site SPIP en HTML5

Ce tutoriel est valable aussi bien pour la création d’un nouveau site SPIP vierge que pour la migration d’un site SPIP existant.

C’est bien plus simple qu’il n’y paraît. Si vous partez d’un code propre (valide W3C) et où les styles s’appuient bien sur des sélecteurs CSS plutôt que sur des éléments HTML, cela prend moins d’une heure, sans incidence sur le site existant.

Rappelons que le code qui constitue votre site SPIP provient de différentes sources : dist, plugins, vos squelettes… C’est pourquoi mieux vaut procéder dans l’ordre suivant :

1. Utiliser une dist en HTML5

Les squelettes distribués par SPIP ne sont pas en HTML5 (parce que cela introduirait des invalidités dans les sites construits dans des versions antérieures de HTML). Mieux vaut donc les remplacer : videz le contenu du répertoire /squelettes-dist pour le remplacer par exemple par cette dist HTML5. Pour les images et documents, complétez avec le plugin Figure.

2. Activer HTML5 dans SPIP

Dans le menu « Configuration > Fonctions avancées » de votre site SPIP,
cochez « Permettre le HTML5 ».

Ce réglage n’a pas pour effet de convertir magiquement votre site SPIP en HTML5. Qu’est-ce que ça fait alors ? Entre autres choses, SPIP utilisera les attributs HTML5 dans ses formulaires. Mais cela permettra aussi aux plugins que vous utilisez de générer du HTML5.

3. Utiliser des plugins à jour

Pensez à mettre à jour vos plugins afin de bénéficier du code HTML5 qu’ils peuvent générer. Désormais vous pouvez aussi, si vous en avez besoin, utiliser les plugins spécifiques (fonctionnalités et/ou squelettes) qui sont développés uniquement en HTML5.

4. Adapter vos squelettes

Occupons-nous maintenant du code personnalisé : vos squelettes. Bonne nouvelle : il s’agit de simplifier leur code HTML.

-  Assurez-vous que chacun de vos squelettes commence par <!doctype html>.
-  Supprimez les attributs obsolètes xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG".
-  Remplacez <meta http-equiv="Content-Type" content="text/html; charset=#CHARSET" /> par <meta charset="#CHARSET"> .

Si vous voulez bien faire, adaptez la structure globale du document. Si vous souhaitez en faire davantage, suivez l’un des tutos HTML5 disponibles sur le Web.

5. Vérifier et corriger

Vérifiez ensuite chaque page avec le validateur W3C et corrigez les erreurs. Mais ne faites pas de zèle : ignorez les warnings car certains sont utiles. Par exemple, il ne faut PAS supprimer les attributs type="text/javascript" qui sont indispensables au bon fonctionnement du compresseur de SPIP.

6. Ajouter le patch final

En dernier, activez le plugin HTML5 qui rectifie les erreurs résiduelles que vous ne pouvez corriger : celles qui sont causées par le code généré par SPIP ou par d’anciens contenus contribués par vos auteur·es.

updated on 5 June 2019

Discussion

Une discussion

  • j’ai constaté que si l’on chercher a Migrer un site SPIP en HTML5

    il est dit :

    Pour les images et documents, complétez avec le plugin Figure.

    De ce fait on se retrouve avec une incompatibilité avec Insertion avancée d’images

    Celui-ci ne fonctionne pas !

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom