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

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom