SPIP-Contrib

SPIP-Contrib

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

274 Plugins, 192 contribs sur SPIP-Zone, 48 visiteurs en ce moment

Accueil > Navigation > Hyperliens > Liens explicites > Liens explicites

Liens explicites

15 juin 2011 – par Gaël Chareyre, tetue – 27 commentaires

17 votes

Styles et pictos explicitant les liens du site : documents à télécharger, liens externes, mailto, etc. (avec ouverture possible en nouvelle fenêtre).

Les liens pointent souvent vers d’autres pages HTML mais aussi vers d’autres types de documents et services. Améliorez le confort de navigation de l’internaute en distinguant visuellement les différents types de liens : documents à télécharger, liens externes, mailto, etc.

Ce plugin a pour avantage de traiter tous les liens de façon homogène, en respect des bonnes pratiques, en particulier Opquast V2 Critère 120 : Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.

Note de version

Suite de « Liens sortants ouvrants », cette seconde version du plugin change de nom, car l’explicitation des liens devient sa vocation principale.

  • Cette version ajoute des styles et pictos [*] permettant de mieux distinguer les liens les uns des autres, exactement comme dans l’encyclopédie Wikipédia, ni plus, ni moins : pdf et autres doc, liens externes, mailto, etc.
  • Sans oublier les styles historiques de SPIP.
  • Affichage des hreflang [*].
  • Meilleure explicitation des liens à l’impression [*].
  • Correction des URLs des articles redirigés de SPIP, qui génèrent désormais l’URL cible (et non plus l’URL interne de l’article), ce qui permet de distinguer les liens externes.
  • L’ouverture en nouvelle fenêtre n’est plus systématique, mais optionnelle et paramétrable, étendable aux documents.

Apparence : styles et pictos

GIF - 13.9 ko
Exemple de rendu stylistique avec les pictos par défaut
(et la Base CSS 2 pour SPIP 2).

Pour prévisualiser, affichez la page de test « ?page=demo/links » sur votre site ou insérez le modèle « <charte|links> » dans un de vos articles. Pour toute personnalisation, complétez en CSS, dans votre feuille de style.

Ce plugin permet de distinguer les liens vers des documents générés par SPIP, notamment via le raccourci [->doc324] ou la balise #URL_DOCUMENT, grâce à un sélecteur CSS dédié : .spip_doc.

Tous les liens sont stylés par défaut, ce qui peut sembler radical. Saupoudrez des « padding-right: 0; background-image: none; » pour annuler le style appliqué là où vous ne le souhaitez pas.

Pour appliquer une autre feuille de style, avec d’autres pictos, copiez la feuille links.css dans le sous-répertoire /css et déposez vos pictos dans le sous-répertoire /css/img/links de votre dossier « squelettes ».

Ouverture en nouvelle fenêtre

Bien que cela mette certains utilisateurs et utilisatrices en sérieuse difficulté [1], forcer l’ouverture des liens dans une nouvelle fenêtre reste une demande impérieuse. Ce comportement est désormais optionnel, activable et désactivable, et peut être étendu aux documents, ce qui est utile dans les vieux intranets (http://forum.spip.org/fr_230827.html) — à éviter absolument sur Internet !

GIF - 22.3 ko
Configuration des liens explicites

Un panneau de configuration permet de :

  • activer/désactiver les styles et pictos
  • activer/désactiver l’ouverture des liens externes dans une nouvelle fenêtre
  • activer/désactiver l’ouverture de certains document dans une nouvelle fenêtre, d’après liste éditable des extensions

Avec ce plugin, il n’est pas nécessaire d’utiliser des attributs « target="_blank" » dans vos squelettes ; c’est même déconseillé, afin de laisser cette configuration agir.

Todolist

Évolutions attendues :

  • Correction des attributs title des liens ouvrant une nouvelle fenêtre, qui, en l’absence de title, devraient répéter le libellé du lien (comme suggéré ici).
  • Ajout automatique dans le libellé (entre les tags <a> et non pas en title) des liens générés par SPIP, du format et du poids du fichier, par exemple : « Télécharger nom_du_fichier.pdf (PDF - 32Ko) », c’est-à-dire : « Télécharger <a href="nom_du_fichier.pdf" class="spip_doc pdf">nom_du_fichier.pdf <small>(<abbr>PDF</abbr> - 32Ko)</small></a> ».

Votre aide est bienvenue !

Notes

[* Peu ou pas compatible avec les vieux navigateurs, dont Internet Explorer 6.

[1 L’ouverture d’une nouvelle fenêtre gênera la navigation d’une personne malvoyante en provoquant la perte de ses points de repère. Il convient donc d’avertir l’utilisateur. Au-delà des problématiques d’accessibilité il est préférable d’éviter autant que possible d’ouvrir de nouvelles fenêtres, les pop-up ayant tendance à agacer beaucoup d’internautes. (http://www.outil-webmaster.fr/navig...)

Retour en haut de la page

Vos commentaires

  • Le 18 avril à 18:27, par ? En réponse à : Liens explicites

    Bonjour,

    Je rencontre un souci avec la partie « Comportement »

    J’active l’item « Forcer l’ouverture de certains liens dans une nouvelle fenêtre (déconseillé) »
    Ensuite j’active « Documents à télécharger » en laissant « .pdf,.ppt,.xls,.doc » dans le champ des extensions

    Puis quand je clique sur un lien .pdf dans la partie publique (après avoir recalculé la page) le fichier ne s’ouvre pas dans une nouvelle fenêtre mais dans celle en cours.

    Par contre cela fonctionne si j’active en plus l’item « Liens externes », mais ce n’est pas ce que je souhaite pour les liens web.

    Est-ce que ce fonctionnement est normal ?

    Merci

    Répondre à ce message

  • Le 10 avril à 15:29, par ubiq En réponse à : Liens explicites

    Merci !
    Oui, merci, parce que même si c’est pas bien, ça fait parti des choses souvent demandées.

    Répondre à ce message

  • Le 19 décembre 2011 à 16:41, par Loiseau2nuit En réponse à : Liens explicites

    Hello !

    J’ai un comportement étrange avec ce plugin. Dès que je l’active, il fonctionne très bien par contre, la plupart des JS appelés après lui plantent.

    Ainsi j’ai plusieurs plugins, tels socialtags, GooglePlus1, ou des JS externes tels innerfade ou coda slider, qui refusent obstinément de fonctionner tant que links est actif.

    Quelqu’un a déjà eu ça ?

    • Le 14 janvier à 17:09, par Nstr En réponse à : Liens explicites

      Oui, je confirme qu’il y a un problème.
      J’ai le même comportement avec l’inclusion de css depuis Google webfonts.
      Le « restylage » des liens fonctionne comme il faut, mais l’inclusion de scripts extérieurs sont plantés dès que l’on active l’ouverture dans une nouvelle fenêtre.
      C’est ennuyeux...

    • Le 14 janvier à 17:20, par Nstr En réponse à : Liens explicites

      Résolu avec un bidouillage crado.

      Dans link.js, remplacer (ligne 5) :

      jQuery("(a|area)[href*=’ ://’]:not([href^="+links_site+"]):not([href^=javascript :]):not([href^=mailto:])")

      par :

      jQuery("a[href*=’ ://’]:not([href^="+links_site+"]):not([href^=javascript :]):not([href^=mailto:])")

      La conséquence, c’est que les images mappées ne sont plus prises en charge (perso je m’en fiche un peu).

      La surcharge n’est pas une mauvaise idée !

    • Le 14 janvier à 17:23, par Loiseau2nuit En réponse à : Liens explicites

      Ah yes ! Merci pour la bidouille ! Oui en surcharge, le temps de trouver une solution plus pérenne ca peut gérer. :)

    Répondre à ce message

  • Le 26 octobre 2011 à 11:02, par chag En réponse à : Liens explicites

    Bonjour,

    Je viens d’installer le plugin et j’obtiens une erreur au chargement de mes pages :

    links_site is not defined

    il faut un autre plugin ou qqchose de particulier que j’ai raté ?

    Chag

    • Le 26 octobre 2011 à 11:36, par chag En réponse à : Liens explicites

      en regardant un peu le code, je vois :

      function targetLinks()
      var where ;
      where="_blank" ;

      jQuery("(a|area)[href*=’ ://’]:not([href^="+links_site+"]):not([href^=javascript :]):not([href^=mailto:])")

      where est bien defini mais links_site (dans la derniere ligne) non. la version dispo via ajouter un plugin de spip est elle à jour ?

    • Le 27 octobre 2011 à 00:02, par chag En réponse à : Liens explicites

      ok, j’ai trouve un peu de temps ce soir. Donc, si on coche « forcer l’ouverture(...) », on doit forcement cocher les 2 cases en dessous : Liens externes ET Documents à télécharger. Sinon, ca ne marche pas, on a l’erreur citée dans mon premier message.

      Chag

    Répondre à ce message

  • Le 18 juin 2011 à 12:31, par Mist. GraphX En réponse à : Liens explicites

    je ne conteste pas au sein des articles, par contre quand j’ai une image « j’aime » facebook ou une icone « Tweeter » elle est remplacé par l’image gif dans tous le template ce qui casse un peut la déco ;-) « si vous voyez ce que je veux dire » lol

    par exemple sur le plugin social_tags : les icones pointes vers des liens ouvrant et apparait a coté le gif lien_ouvrant

    • Le 25 juillet 2011 à 11:32, par keev En réponse à : Liens explicites

      C’est vrai que c’est pas top, qqun pour faire qqch ?

    • Le 25 juillet 2011 à 12:06, par tetue En réponse à : Liens explicites

      Il suffit d’éditer votre feuille de style pour annuler le style appliqué là où vous ne le souhaitez pas (personne ne peut deviner ça mieux que vous), en saupoudrant des « padding-right: 0; background-image: none; ».

    • Le 17 août 2011 à 11:41, par keev En réponse à : Liens explicites

      Merci pour la réponse tetue !

    Répondre à ce message

  • Le 1er août 2011 à 09:47, par Malorie En réponse à : Liens explicites

    Mon problème : qu’un article avec une redirection vers un lien externe s’ouvre dans une nouvelle fenêtre.
    Après installation du plugin et paramétrage, il s’ouvre toujours dans la même fenêtre...
    Quelqu’un a-t-il une idée ? Merci d’avance.

    Répondre à ce message

  • Le 30 juillet 2011 à 14:51, par ? En réponse à : Liens explicites

    Bonjour,
    SPIP en version 2.10 les documents proposés dans un article ouvrent systématiquement dans une nouvelle fenêtre ce n’est pas ce que je peux.
    j avais essayé avec ce plugin mais cela ne solutionne pas mon problème

    merci de vos idees sur la question

    • Le 30 juillet 2011 à 17:05, par tetue En réponse à : Liens explicites

      Non, SPIP ne modifie pas le comportement des liens et ne force donc pas l’ouverture de nouvelle fenêtre. Il y a vraisemblablement un target="_blank" dans vos squelettes : si c’est le cas, ce plugin n’y pourra rien. Sinon, cherchez parmi vos plugins.

    Répondre à ce message

  • Le 15 juin 2011 à 15:57, par chris En réponse à : Liens explicites

    Tiens y’a personne pour nous dire que c’est pas bien de faire des liens sortants, bizarre !

    • Le 16 juin 2011 à 07:38, par Pierre-Jean En réponse à : Liens explicites

      ^^

      À quand le plugin footer ?

    • Le 17 juin 2011 à 00:36, par ? En réponse à : Liens explicites

      mais c’est pas bien de faire des liens sortants ! lol

    • Le 17 juin 2011 à 10:35, par chris En réponse à : Liens explicites

      Oui même qu’après les visiteurs de nos sites font des auto-combustions spontanées, internet risque de planter mondialement et le tout puissant dans son immense colère nous envoi des catastrophes naturelles. :)

    • Le 17 juin 2011 à 12:51, par tetue En réponse à : Liens explicites

      Hé les trolleurs, le premier d’entre vous qui termine ce plugin en rendant activable/désactivable l’ouverture dans une nouvelle fenêtre gagne ma considération.

    • Le 18 juin 2011 à 09:10, par Mist. GraphX En réponse à : Liens explicites

      merci pour le plugin ;-)

      si c’est dans un onglet plutôt qu’une fenêtre c’est grave ??? lol

    • Le 18 juin 2011 à 09:42, par Mist. GraphX En réponse à : Liens explicites

      juste après test du plugin, il serait pas mal de pouvoir choisir via les sélecteur CSS ou ID les blocs ou la fonction est active (genre #wrapper, #container, ), car la ça corrige tout et c’est problématique sur certains cas : par exemple j’ai un menu avec des images qui renvoient sur des liens externes et du coup ça me casse tout.

    • Le 18 juin 2011 à 10:48, par tetue En réponse à : Liens explicites

      Il a déjà été répondu (à ce commentaire) que l’intérêt de ce plugin est justement sa radicalité, contrairement aux contributions antérieures, comme le filtre liens_ouvrants ou le plugin Liens spip_out ouvrants. L’inconstance du comportement serait encore pire que pire ! vous allez rendre fous vos internautes :D

      Désolée, mais ce plugin respecte les bonnes pratiques :)

    • Le 21 juin 2011 à 22:40, par tetue En réponse à : Liens explicites

      Et bien, tout ma considération va à Gael, qui a branché le panneau de configuration qui rend optionnelle l’ouverture en nouvelle fenêtre (Changeset 48961). Merci ! La documentation vient d’être mise à jour en conséquence.

    Répondre à ce message

  • Le 16 juin 2011 à 09:49, par Pimousse En réponse à : Liens explicites

    Bonjour, merci pour la contrib !
    Juste une question : est-il possible de limiter l’application du plugin au contenu des rubriques / articles ?

    • Le 16 juin 2011 à 10:59, par tetue En réponse à : Liens explicites

      Non, surtout pas, ce serait trop déroutant ! Quelle drôle d’idée ! Ce plugin a justement pour avantage de traiter tous les liens de façon homogène, ce qui est une bonne pratique, cf. Opquast N°120 : Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages..

    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

  • Plugin « Langue préférée par l’internaute »

    25 août 2009 – 20 commentaires

    Cet article explique comment fonctionne le plugin « Langue préférée par l’internaute » (langue_preferee) et comment le mettre dans un site multilingue existant.

  • Vidéo Accessible

    6 avril 2011 – 78 commentaires

    Un plugin pour faciliter la diffusion de vidéos accessibles. Accessibilité des vidéos Accessibilité de la vidéo Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères. Le critère de base est de (...)

  • Le Couteau Suisse

    4 mai 2007 – 1354 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • MediaBox

    10 mai 2010 – 194 commentaires

    Aperçu La MediaBox est une Boîte multimédia polyvalente et personnalisable. Le plugin est basé sur la librairie moderne ColorBox, qui a été enrichie et adaptée pour SPIP. Par défaut, mediabox propose 5 habillages. Il est assez facile d’en créer de (...)

  • Squirrels Love Chimps

    14 février – commentaires

    Squirrels Love Chimps met à disposition une série de 4 plugins pour connecter votre SPIP avec le service d’emailing MailChimp MailChimp, qu’est-ce que c’est ? Mailchimp est un outil d’emailing ou, dans dans la langue de Molière, « un service d’envoi (...)