SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 193 visiteurs en ce moment

Accueil > Navigation > Hyperliens > Liens explicites > Liens sortants ouvrants

Liens sortants ouvrants

10 août 2009 – par tetue – commentaires

13 votes

Il suffit d’activer ce plugin pour que tous les liens externes du site s’ouvrent dans une nouvelle fenêtre. À éviter, car c’est une mauvaise pratique. Mais tant qu’à mal faire, cette contrib le fait bien, c’est-à-dire en avertissant l’internaute de ce comportement, améliorant un peu l’accessibilité déplorable des liens ouvrants.

Cette première version du plugin, toujours fonctionnelle en SPIP 2, n’est plus maintenue car remplacée par cette nouvelle version : « Liens explicites ».

Avertissement : ouvrir une nouvelle fenêtre, c’est nul !

N’utilisez ce plugin que sous la contrainte, car forcer l’ouverture des liens dans une nouvelle fenêtre est une mauvaise pratique qui, contrairement à l’idée reçue, incommode les internautes et dégrade le confort d’utilisation de votre site [1]. Il n’y a en effet aucune bonne raison d’utiliser ce plugin qui n’existe que pour répondre à la demande impérieuse de certains commanditaires mal informés [2].

Concrètement, que fait ce plugin ?

Ce plugin vient s’ajouter à la longue liste des contributions à SPIP visant à forcer l’ouverture de liens dans une nouvelle fenêtre. Mais que fait-il de plus, de mieux ?

Première caractéristique, ce plugin ouvre tous les liens externes — et non pas seulement ceux distingués par le sélecteur SPIP spécifique .spip_out —, de façon à ne plus en oublier :

  • Aussitôt activé, ce plugin ouvre TOUS les liens externes (commençant par http://, https://, irc://, ftp, etc.) dans une nouvelle fenêtre, en ajoutant un target="_blank" à ceux-ci, en JavaScript, ce qui a pour double avantage de laisser tranquille les internautes surfant sans JavaScript et de ne pas dégrader le code (X)HTML qui reste strictement valide [3].
  • Il ajoute à ces liens l’attribut approprié rel="external" [4]
  • et un sélecteur distinctif homonyme class="external" de façon à permettre au webmestre de les cibler.

Seconde caractéristique, ce plugin signale clairement ce comportement :

  • Ce plugin complète l’infobulle des liens externes par une mention textuelle explicite : title="(nouvelle fenêtre)" [*]
  • et les distingue visuellement en les affublant d’un picto consensuel (une flèche inclinée à 45°), en CSS et affiche la langue du site cible lorsqu’elle est indiquée dans l’attribut hreflang [*].
  • Enfin, cerise sur le gâteau, il explicite ces liens à l’impression sur papier en ajoutant automatiquement l’URL du lien externe à la suite de son intitulé [*].

Personnalisations et recommandations

Si besoin, vous personnaliserez en surchargeant la règle CSS a.external { ... } (peut-être avec !important) dans votre feuille de style perso et en remplaçant le picto external.gif par un autre dans votre propre dossier squelettes, selon les règles de surcharge habituelles dans SPIP.

L’ouverture des liens dans une nouvelle fenêtre n’améliore pas l’accessibilité de votre site, bien au contraire. Ce plugin vous évite le pire mais sachez que les techniques qu’il emploie ne sont pas pour autant pleinement satisfaisantes, car CSS ou JavaScript ne sont pas disponibles sur certains agents utilisateurs (dont Internet Explorer). Retenez que pour bien faire, il faut signaler l’ouverture de nouvel par une mention textuelle explicite dans le lien, ou par un picto doté d’un alt, placé dans la page HTML, à l’intérieur du lien [5].

Voir en ligne : http://plugins.spip.net/liens_sorta...

Notes

[1Lu sur CYBERcodeur, Liens et nouvelle fenêtre, Éric Daspet :

« On entend parfois que les nouvelles fenêtres permettent de ne pas perdre l’utilisateur en laissant l’ancienne page visible. En réalité c’est tout le contraire, et si vous voulez faciliter la vie de vos visiteurs, contentez-vous de mettre un titre pertinent à vos pages pour qu’il puisse naviguer correctement dans son historique quand il revient en arrière. »

[2De nombreux articles dénoncent cette mauvaise pratique. Citons celui de SPIP, évidemment, mais aussi le mien : Liens ouvrant une nouvelle fenêtre et Pourquoi ne faut-il pas ouvrir les liens dans une nouvelle fenêtre ?.

[3Notez bien que l’attribut target, introduit en HTML 4, n’existe plus dans les versions strictes du HTML 4.01 et suivantes.

[4Extrait de la spécification HTML 4 du W3C, ici traduite en français : Cet attribut décrit la relation partant du document courant vers l’ancre spécifiée par l’attribut href. La valeur de cet attribut est une liste de types de lien séparés par des espaces..

[*Pas garanti dans IE qui interprète mal les langages permettant cela : l’infobulle dysfonctionne dans certains cas et le CSS n’est pas toujours correctement interprété.

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Vos commentaires

  • Le 10 août 2009 à 10:08, par superyms En réponse à : Liens sortants ouvrants

    Bonjour, Romy,

    Cette contrib m’intrigue...en effet tu conseilles toi même de ne pas l’utiliser ! lol (je comprends que des spipeurs puisse l’utiliser !)

    Perso, sur certains sites, selon la demande de l’utilisateur, je rajoute juste le code jquery suivant (ceci dit prévenir l’internaute que cest un lien ouvrant est pas mal aussi, tout depend de qui gère le site, y en a qui n’en veulent pas ! ) :

    $(document).ready(function() {
     $("a[@href^=http]").each(
       function(){
                if(this.href.indexOf(location.hostname) == -1) {
           $(this).attr('target', '_blank');
         }
       }
     )
    });

    Cela fonctionne plutot bien...si cela peut aider ! (ce code ouvrira tous les liens externes du site dans une nouvelle fenêtre)

    Romy à raison, méditerz bien l’utilisation d’un tel procédé ou d’une telle possibilité..l’internaute se perd facilement dans sa navigation !

    @+

    • Le 20 août 2010 à 09:41, par goetsu En réponse à : Liens sortants ouvrants

      Bonjour,

      2 remarques pour améliorer le plugin :

      • le titre généré devrait reprendre l’intitulé du lien et ajouter la mention nouvelle fenêtre. Exemple, avec un lien « yahoo » qui pointe qui yahoo.com le title devrait être « yahoo (nouvelle fenêtre) ». En effet, certains lecteur d’écran lisent comme intitulé de lien l’élément le plus long entre le title et l’intitulé réel, de cette manière il n’y aurait pas de souci.
      • si le plugin fonctionne aussi pour les liens externes mis sur des images <a href="http://www.yahoo.com"><img alt="yahoo.com"></a> l’information doit être ajoutée dans le alt de l’image et non dans le title du lien
    • Le 23 février 2011 à 12:34, par Z En réponse à : Liens sortants ouvrants

      Bonjour !

      Bravo Tétue ! Je sais, pas top pour la bonne pratique, mais parfois, il y a des demandes.... qu’on ne peut contourner.
      Juste un point qui m’embête : la remarque de Goestu juste au dessus, c’est exactement ce que je cherchais à modifier (sur le premier point), en principe, d’après les référentiels d’accessibilité, le title ne doit jamais comporter moins d’info que l’intitulé.
      C’est à ce niveau-ci que ça se joue

              $("a[href*='://']:not([href^="+liens_sortants_site+"])")
                .attr('target',where)
                      .attr('rel','external')
                      .addClass('external')
                      .each(function(){
                              title =  "(nouvelle fenêtre)";
                              if($(this).attr("title")) title = $(this).attr("title") + " (nouvelle fenêtre)";
                              $(this).attr("title",title);
                      });

      Mais je ne vois pas bien comment récupérer l’intitulé du lien en JS, et le réinjecter l’attribut title...
      Romy, t’aurais une idée ?

      ++
      Z

    Répondre à ce message

  • Le 25 novembre 2010 à 18:34, par audwill En réponse à : Liens sortants ouvrants

    Bonjour,

    Comment faire en sorte que ce comportement (ouverture nouvelle fenêtre) s’applique aux redirections (articles virtuels) ? Je m’explique : les rédacteurs d’un site A veulent référencer un article publié sur un site B. Il créent un article dans leur site A et renseignent l’adresse http://ww.... de l’article du site B dans le champ « redirection » de spip. Il s’agit donc bien d’une url http://... mais elle ne s’ouvre pas dans une nouvelle fenêtre malgré la présence du plugin...

    merci d’avance pour vos conseils,

    • Le 25 novembre 2010 à 18:43, par tetue En réponse à : Liens sortants ouvrants

      Je n’utilise plus les articles virtuels et les déconseille, pour ce genre de raison, entre X autres, mais de mémoire il s’agit bien d’un lien interne et non externe (http://...). Où peut-on voir cela ?

    • Le 26 novembre 2010 à 12:51, par audwill En réponse à : Liens sortants ouvrants

      merci pour ta réponse rapide !
      c’est ici : http://www.metropolitiques.eu (site mis en ligne ce matin...)
      dans la colonne de droite, bloc« articles les plus lus », cf l’article « les apories de la ville durable » qui est un article virtuel qui renvoie vers un autre site - pour le moment pas en target=_blank malheureusement...
      dans le squelette j’utilise un simple #URL_ARTICLE...

    • Le 26 novembre 2010 à 13:30, par tetue En réponse à : Liens sortants ouvrants

      Oui, c’est bien ce que je craignais : SPIP génère un lien interne, du style a href="toto.html", qui échappe donc à ce plugin qui ne traite que les liens externes.

      Je ne saurais que recommander d’éviter ces « articles virtuels » qui posent d’autres problèmes en étant présentés exactement comme des articles internes (en ressortant par exemple au même niveau dans les résultats de recherche dans le site) et sont extrêmement déroutants pour l’internaute.

    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

  • Champs Extras 3

    16 janvier 2012 – 534 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 190 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

  • Recommander

    3 avril 2011 – 16 commentaires

    Ce plugin propose une manière simple de suggérer de recommander par email un article à un ami. Fonction « recommander un article à un ami ». On l’ajoute dans n’importe quel squelette sous la forme : #RECOMMANDERtitre de la page,url de la page,intro (...)

Ça spipe par là