4.8 Links — HTML5

/links.html

  • Seenthis, j’ai une question (avec application à #SPIP). Est-ce qu’il existe une méthode recommandée pour indiquer, dans le code HTML, les ressources liées à la page, sans pour autant entraîner le navigateur ou le preloadeur à charger des ressources inutiles ?

    Le besoin auquel je veux répondre, c’est la possibilité d’aspirer/dupliquer un site Web sans avoir des fichiers qui manquent une fois hors ligne. En effet, j’ai régulièrement des ressources chargées dynamiquement (ne serait-ce que mes images responsive), qui ne sont pas récupérées de manière transparente par une aspiration de la page.

    Pour l’instant, je m’en sors « à la main » en ajoutant des :

    <link href… rel="a_telecharger">

    dans mes pages. Ça permet de récupérer tout ce dont j’aurai besoin hors-ligne (ou potentiellement besoin, puisque je suis en responsive, avec souvent des éléments chargés ou non).

    Mais je n’ai pas systématisé ça sur mes sites en production (et notamment pas dans les plugins qui génèrent ces pages), parce que je ne veux pas que Google m’aspire des fichiers que je ne veux pas « fabriquer » ou « utiliser » rien que pour lui (par exemple, les images responsive jamais utilisées, je préfère qu’elles ne soient pas générées pour rien), parce que je ne veux pas que navigateurs les chargent (ni les pré-chargent) alors qu’ils ne vont pas les utiliser…

    Et en gros, s’il y a une méthode connue et/ou recommandée, voir à quel point c’est une pratique à documenter/généraliser dans SPIP, pour avoir des sites qu’on peut aspirer/sauvegarder/dupliquer en statique à coup sûr.

    Note : si on va par là (et j’aimerais bien que ce soit au moins une option), il y a aussi les problèmes de noms de fichiers. Il faut que certains plugins fonctionnent systématiquement en URL « .html », et pas en interminables variables PHP (par exemple, j’utilise des choses comme {ajaxload=html}), et/ou éviter d’ajouter la date à la fin des fichiers (CSS/logos) parce que ça me pète mon aspiration…

    • Autre question liée, est-ce que je peux mettre un <link> à l’intérieur d’un <a>, du genre :

      <a href="truc.html">Le contenu usuel du lien
          <link href="maressource.jpg" rel="resource"
      </a>

      Parce que dans de nombreux cas, la fonction qui fabrique les ressources (et donc les potentiels <link> à ajouter pour les aspirer) ne sait pas si ce qu’elle va produire se trouve à l’intérieur d’une ancre (je pense évidemment aux images responsive, dont le fonctionnement est totalement indifférent au fait d’être à l’intérieur d’un lien hypertexte).

    • Bon, je me lance avec une mise à jour assez conséquence de mon #plugin #SPIP image_responsive :
      http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive

      On peut activer un define dans mes_options.php :

      define("_SPIP_LIER_RESSOURCES", true);

      (noter le choix d’un nom lié à SPIP et non au plugin, histoire de le réutiliser).

      Avec cette option, le plugin ajoute au code HTML généré une ribambelle de liens (qui n’affichent rien) de cette forme :

      <link href="truc.jpg" rel="attachment" property="url">

      (je suppose qu’on peut trouver mieux, mais comme pas trop de réponses à la question ci-dessus… et au moins avec ça le validateur-go-home arrête de m’engueuler).

      De cette façon, quand on aspire la page, on aspire aussi toutes les ressources qui seront nécessaire pour travailler en local.

      Avec image_responsive, évidemment, ça ne peut fonctionner que quand on définit une ou plusieurs tailles autorisées (ce qui est de toute façon un bon principe à la base).