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

2 discussions

  • Bonjour tetue
    J’envisage de passer mon site spip 3.2.7 en HTML5.
    J’ai plusieurs questions avant de me lancer:
    -  Les préconisations sont-elles compatibles pour spip 3.2.7 ?
    -  Est ce qu’il y a la possibilité de télécharger un zip complet des fichiers à remplacer dans le répertoire /squelettes-dist ? Peut-être sur cette page ?
    -  Le fait de remplacer des fichiers dans ce répertoire ne va-t-il pas à l’encontre du principe de surcharge ? (afin d’éviter de devoir le faire à chaque mise à jour de spip).
    Merci pour ton aide.

    Reply to this message

  • 1

    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 !

    • Il me semble que le plugin “Insertion avancée d’images” est déjà basé sur le HTML5 et fournit d’autres fonctionnalités que le plugin “Figure”. Les deux ajoutant les balises <figure> et <figcaption>, il s’agit de faire un choix et en l’occurrence, “Figure” devient inutile si vous avez déjà “Insertion avancée d’images”.

    Reply to this message

Ajouter un commentaire

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