SPIP - Contrib

SPIP - Contrib

[ar] [en] [es] [fr] [it]

252 visiteurs en ce moment

fontsizeup fontsizedown
[47 commentaires]

Les liens hypertexte

...vus par le Couteau Suisse

mercredi 26 septembre 2007, par paolo, Patrice Vanneufville

  • Digg
  • Del.icio.us
  • Facebook
  • Google
  • Technorati
2 votes

Les outils décrits ici sont des fonctionnalités du plugin Le Couteau Suisse. « Liens orphelins » rend cliquable les liens bruts. « MailCrypt » protège les mails présents sur votre site contre les crawlers. « SPIP et les liens... » configure les liens externes et le glossaire externe. « Liens en clair » affiche les liens cachés en vue d’une impression.

Présentation

Les outils décrits ici sont des fonctionnalités du plugin Le Couteau Suisse que vous pouvez trouver ici : Le Couteau Suisse. Pour avoir accès aux nouvelles fonctions agissant sur les liens hypertexte de votre site, il vous faut donc avoir préalablement installé ce plugin.

Ensuite, une fois ces outils activés sur la page d’administration du plugin en espace privé, vous avez donc gestion étendue de tous les liens trouvés dans le corps des textes, aussi bien pour les articles, les brèves, les forums, etc. Bref, tous les textes de SPIP, car de façon plus technique, ces outils utilisent les pipelines de SPIP « pre_propre » ou « post_propre ».

Dépendances

- La librairie jQuery est requise pour le fonctionnement des Liens externes, ainsi que pour l’outil MailCrypt dans la réalisation de la deuxième étape d’encodage. Ce jeu de fonctions Javascript très utile a été intégré au core dès la version 1.9.2 de SPIP. Pour les versions inférieures, il vous faut installer et activer le plugin Jquery que vous pouvez télécharger ici : http://zone.spip.org/files/spip-zon....
- Les styles CSS et les fonctions Javascript du plugin sont insérés grâce à la balise #INSERT_HEAD qui doit absolument être présente (en un seul exemplaire) dans le header de vos squelettes (entre les balises <head> et </head> des fichiers HTML). Si vous ne trouvez pas cette balise dans vos codes et que les liens n’ont pas l’apparence voulue, alors l’outil "Balise #INSERT_HEAD" permet d’insérer automatiquement cette balise sans manipulation de votre part.

Apparté

Le mot hypertexte a été créé et publié pour la première fois en 1965, par Théodore Nelson. Il explique ainsi son idée :

"Elle m’est venue en octobre-novembre 1960, alors que je suivais un cours d’initiation à l’informatique qui, au début, devait m’aider à écrire mes livres de philosophie. Je cherchais un moyen de créer sans contrainte un document à partir d’un vaste ensemble d’idées de tous types, non-structurées, non-séquentielles, exprimées sur des supports aussi divers qu’un film, une bande magnétique ou un morceau de papier." (entretien accordé à A. Baritault, SVM n°77 p. 190)

Rappel : les liens hypertextes de SPIP

Les liens sous SPIP sont facilement générés grâce à un raccourci [1] : mettre le texte et l’URL entre crochets, séparés par une flèche (comme ceci : [texte -> URL]). Le texte devient une zone cliquable, et renverra le lecteur sur la page web indiquée par « URL ». Ex : [le site national de l'AITF->http://www.aivf.asso.fr] qui devient : le site national de l’AITF. Il existe plusieurs types de liens :

- les liens à l’intérieur de votre propre site. Par exemple :
Le raccourci [->article2166] génère un lien interne, vers l’article 2166 de votre site, ainsi : Le Couteau Suisse.

- les liens vers l’extérieur de votre site. Par exemple :
Le raccourci [uZine->http://www.uzine.net] affiche le lien externe suivant : uZine.

- les adresses URL transformées en lien hypertexte. Par exemple :
Le raccourci [->http://www.uzine.net] affiche directement l’URL, avec un lien hypertexte vers cette adresse, ainsi : http://www.uzine.net.

- les liens vers le glossaire externe (en l’occurrence l’encyclopédie en ligne Wikipédia). Par exemple :
Le raccourci [?SPIP] génére le lien suivant : SPIP.

L’outil "Belles URLs"

Les "liens corrects"

SPIP a pour habitude d’insérer un espace avant les points d’interrogation ou d’exclamation, typographie française oblige. Voici une option qui protège le point d’interrogation dans les URLs (cliquables ou non) de vos textes. Exemples :
- http://www.spip-contrib.net/?article2166 au lieu de : http://www.spip-contrib.net/?article2166
- http://www.spip-contrib.net/?article2166 au lieu de : http://www.spip-contrib.net/?article2166

Les "liens orphelins"

Cet outil remplace systématiquement tous les liens laissés en texte par les utilisateurs (notamment dans les forums) et qui ne sont donc pas cliquables, par des liens hypertexte au format SPIP. Par exemple : www.spip.net est remplacé par http://www.spip.net.

Sur la page de configuration des outils, vous pouvez choisir le type de remplacement :

- Basique : sont remplacés les liens du type http://spip.net (tout protocole) ou www.spip.net.
- Étendu : sont remplacés en plus les liens du type moi@spip.net, mailto:monmail ou news:mesnews.

Techniquement, les textes sont examinés selon cette procédure :
- Protection 1 : toutes les balises html, code, cadre, frame, script, acronym et cite.
- Protection 2 : toutes les balises <a></a> pour éviter les doublons
- Protection 3 : tous les raccourcis de liens SPIP, au cas où...
- Protection 4 : toutes les balises contenant des points, histoire de voir plus clair

Les caractères reconnus comme faisant partie des liens (chiffres, lettres et 20 caractères spéciaux) :

@define('_liens_orphelins_AUTORISE',
 '\!\#\$\%\&\'\*\+\-\/\=\?\^\_\`\.\{\|\}\~a-zA-Z0-9');

Les caractères reconnus comme pouvant terminer un lien :

@define('_liens_orphelins_AUTORISE_FIN',
 '\#\$\&\'\*\+\-\/\=\^\_\`\|\~a-zA-Z0-9');

Attention : la balise #EMAIL, qui renvoie un texte brut par défaut, renvoie un lien cliquable en bonne est due forme lorsque l’outil Liens orphelins est activé avec un type de remplacement étendu. Vérifiez bien le code HTML de vos squelettes.

L’outil "MailCrypt"

Cet outil est inspiré du plugin créé par paolo, dont l’article de documentation est ici.

Un raccourci e-mail [->quelquun@autre.part.org] est d’habitude converti en HTML de la façon suivante : <a href="mailto:quelquun@autre.part.org" class="spip_out">quelquun@autre.part.org</a> — ce qui laisse le champ ouvert pour les robots spam.

Première étape :

Intercepté par "MailCrypt", ce lien va être réécrit pour devenir : <a class="spip_url spip_out" onclick="location.href=lancerlien('quelquun','autre.part.org'); return false;" title="quelquun..ât..autre.part.org" href="#">quelquun<span class="spancrypt"></span>autre.part.org</a>

Il n’y a plus d’arobase ni de « mailto» pour orienter les robots. Le style "spancrypt" affiche l’image de l’arobase :

Seconde étape :

Si Javascript est activé, alors la librairie jQuery pourra changer le span-image, dont le principal défaut est d’être de taille et de couleur fixe, par un span-arobase tout simple : <span>@</span>. La protection des mails est donc transparente à l’écran et le lien ressemblera à :

<a class="spip_url spip_out" onclick="location.href=lancerlien('quelquun','autre.part.org'); return false;" title="quelquun..ât..autre.part.org" href="#">quelquun<span>@</span>autre.part.org</a>

.

Voici le code jQuery utilisé pour le remplacement :

Lorsque le visiteur clique sur le lien c’est la fonction JavaScript lancerlien qui est exécutée, et ce script reconstitue le lien. Voici le code de la fonction :

function lancerlien(a,b){ return 'ma'+'ilto'+':'+a+'@'+b; }

Et si le visiteur n’a pas JavaScript ? (Il s’agit vraiment de très peu de personnes). C’est certain : ils ne pourront pas utiliser le lien. Ils peuvent pourtant lire l’adresse en survolant le lien avec la souris. Pour aider ceux qui ont ce problème, il vous est possible de mettre un mot explicatif sur la page « technique » du site qui ressemble à :

Parce que le spam est devenu un problème grandissant, nous sommes très prudents dans la manière de mettre publiquement à disposition des adresses e-mail. Celles-ci ne figurent pas sur les pages de ce site, mais sont créées uniquement au moment où le visiteur clique sur un lien. Les visiteurs qui n’ont pas Javascript ou un programme e-mail ne pourront pas utiliser le lien. Cependant, quand le curseur passe sur le lien, un « infobulle » apparaît avec l’adresse e-mail (sous une forme difficile à lire pour les robots spam, mais dont la plupart des visiteurs pourront faire usage).

Attention : la balise #EMAIL, qui renvoie un texte brut par défaut, renvoie un texte où l’arobase est remplacée par un span lorsque l’outil MailCrypt est activé. Vérifiez bien le code HTML de vos squelettes (voir le dernier paragraphe de cet article).

Protéger des mails placés directement dans les squelettes

L’outil "Mailcrypt" ne touche pas aux mails entrés en dur dans les squelettes (fichiers .html) : seules certaines balises SPIP sont traitées. Deux raisons à cela :
- on fait confiance aux webmestres pour éviter d’offrir des proies si faciles aux robots de SPAM,
- une vérification de la page finale à chaque hit serait un peu trop coûteux en temps serveur.

Le plugin est donc surtout destiné à protéger les mails stockés dans les textes de la base de données et introduits par les rédacteurs d’articles ou de messages de forum.

Plusieurs solutions s’offrent à vous

- utiliser directement le filtre "cs_lien" du Couteau Suisse :
        #EVAL**{'cs_lien("moi@toto.com")'}
ou encore :
        #EVAL**{'cs_lien("moi@toto.com", "courriel")'}
- utiliser la lourde fonction "propre" de SPIP :
        #EVAL**{'propre("moi@toto.com")'}
(attention : le paragraphage automatique de SPIP risque de désorganiser la mise en page et il faut configurer le Couteau Suisse pour que les liens deviennent cliquables avec "Liens orphelins"...)
- Depuis SPIP 1.93, la balise #VAL permet facilement d’utiliser des filtres en simplifiant un peu le code :
        [(#VAL{moi@toto.com}|cs_lien)]
ou :
        [(#VAL{moi@toto.com}|cs_lien{courriel})]

Autres balises SPIP

L’outil "Mailcrypt" agit sur le pipeline post_propre de SPIP et sur le traitement de la balise #EMAIL. Par conséquent, toute balise nouvellement créée (par vous-même ou par un autre plugin) ne sera pas protégée si son traitement n’est pas explicité dans mes_options.php, intégrant les fonctions mailcrypt() du Couteau Suisse OU propre() de SPIP.

A titre d’exemple, voici comment le Couteau Suisse compile le traitement de la balise #EMAIL, non concernée par la fonction propre() :

        $GLOBALS['table_des_traitements']['EMAIL'][]='mailcrypt(%s)';

L’outil "SPIP et les liens..."

Utiliser des liens externes :

Tous les liens du site s’ouvrent par défaut dans la fenêtre de navigation en cours. Mais il peut être utile d’ouvrir les liens externes au site dans une nouvelle fenêtre extérieure — cela revient à ajouter target="_blank" à toutes les balises <a> dotées par SPIP des classes spip_out, spip_url ou spip_glossaire.

Note : cette fonctionnalité utilise la librairie jQuery et voici son code :

Lien vers le glossaire :

SPIP permet de relier des mots à leur définition grâce au raccourci typographique [?mot]. Par défaut (ou si vous laissez vide la case de configuration), le glossaire externe renvoie vers l’encyclopédie libre wikipedia.org : http://@lang@.wikipedia.org/wiki/ (pour le français, SPIP remplacera @lang@ par "fr"). À vous donc, de choisir l’adresse à utiliser.

Lien de test : SPIP

L’outil "Liens en clair"

Cet outil met à votre disposition le filtre : liens_en_clair.

Votre texte contient probablement des liens hypertexte qui ne sont pas visibles lors d’une impression, cachés dans un lien cliquable.... Ce filtre ajoute entre crochets la destination de chaque lien cliquable (liens externes ou mails). Voici un exemple de syntaxe SPIP : [(#TEXTE|liens_en_clair)].

Attention : en mode impression, cette fonctionnalité est appliquée automatiquement, sans filtre obligatoire.

Exemple : le lien caché "Un mail" est remplacé par : "Un mail [quelquun@autre.part.org]".

Précisions sur le mode impression du Couteau Suisse :

Le Couteau Suisse offre un mode utile pour l’impression en plaçant le paramètre « cs=print » dans le lien d’appel de la page. Ce mode est automatiquement activé si le squelette « print.html » est utilisé (donc ici : « page=print »).

Exemples d’appel :
- Dans un navigateur : www.monsite.ici/spip?article999&cs=print
- Dans un squelette : [(#SELF|parametre_url{cs,print})]
- En PHP : parametre_url(self(), 'cs', 'print')

Cas de la balise #EMAIL

La balise #EMAIL, généralement utilisée dans une boucle AUTEURS, est complètement absente des squelettes d’origine, car il est déconseillé d’exposer des emails bruts à l’écran. Un crawler pourrait les utiliser à des fins mal intentionnées.

Voici donc un code à éviter : [<A HREF="mailto:#EMAIL">(#NOM)</A>].

Attention : bien qu’il soit valide, le code précédent est incompatible avec les outils MailCrypt et Liens orphelins qui agissent sur la balise #EMAIL.

A la base, cette balise renvoie un email brut, sans aucune protection. Mais :
- MailCrypt remplace l’arobase du mail par un span, rendant donc impossible l’utilisation de cette balise dans un href !
- Liens orphelins remplace l’email brut par un lien sur l’email, rendant également impossible l’utilisation de cette balise dans un href.

Bon, pour empêcher les traitements sur cette balise, vous pouvez toujours utiliser l’étoile : [<A HREF="mailto:#EMAIL*">(#NOM)</A>]. Mais aucune protection ne préservera alors vos auteurs face à la collecte des robots. Pour remédier à ce problème, et permettre quand même aux visiteurs d’envoyer directement des mails aux différents auteurs de votre site, le Couteau Suisse offre un filtre bien utile : cs_lien. Ce filtre très simple permet de créer un lien sur un texte.

La syntaxe à utiliser dans un squelette est donc désormais : [(#EMAIL*|cs_lien{#NOM})].

Ici, l’email brut non protégé est transformé en un lien SPIP [nom->email] par le filtre cs_lien, puis traitée par MailCrypt et éventuellement expansée par Liens en clair pour l’impression.

Eh oui, les outils du Couteau Suisse interagissent ensemble, en toute harmonie !

Notes

[1] Si vous le souhaitez, vous pouvez naturellement utiliser du code HTML directement dans vos textes. Mais nous vous conseillons d’utiliser de préférence ces raccourcis, d’une part parce qu’ils sont plus simples à mémoriser, d’autre part parce qu’il font l’objet d’un traitement automatisé avantageux : SPIP les remplace par le code HTML approprié et valide, les dotant de plus de styles facilitant leur habillage graphique par le webmestre.

Retour en haut de la page

47 Messages de forum

Voir toute la discussion

Pages 1 | 2 | 3 | 4 | 5

  • Répondre à ce message

    27 novembre 2008 18:33 , par goetsu

    pour les liens externes qui ouvre dans une nouvelle fenetre il faut indiquer dans le title que cela ouvre dans une nouvelle fenetre il faudrait donc rajouter à la fonction js qqchose comme :

    jQuery("a.spip_out,a.spip_url,a.spip_glossaire").each(function (i) {jQuery(this).attr("title", function(){ return $(this).text()+" - nouvelle fenêtre"; });});

  • Répondre à ce message

    19 mars 2008 17:44 , par Osbern

    Je me réponds à moi-même mais ça peut servir à d’autres. Il existe cette solution. Merci à moi (et aux auteurs François Schreuer et Patrice Vanneufville).

  • Répondre à ce message

    19 mars 2008 17:36 , par Osbern

    Bonjour, Je voudrais savoir s’il était possible par un raccourci de créer une infobulle quand on survole un lien.

    Mon idée précise est de faire apparaître une infobulle contenant une courte définition lorsque un Internaute survole un mot difficile.

    Le html me semble la seule solution. Ai-je tort ? Merci.

  • Répondre à ce message

    8 mars 2008 20:04 , par blomki

    Après avoir coché et décoché les options dans le back office, tout est rentré dans l’ordre (il me semble aussi avoir vidé le cache, j’ignore si ça peut avoir un rapport)...

  • Répondre à ce message

    8 mars 2008 19:41 , par blomki

    Hello,

    le couteau suisse crée bien des liens sur les url de type www.site.fr toutefois, il en remplace le texte par interro_liens_callback

    C’est normal Docteur ? J’ai l’impression après avoir cherché un peu que ça arrive à pas mal de monde, mais que c’est récent (je suis apparemment l’un des seuls à soulever le problème) ...

    Ma version de spip : SPIP 1.9.2d [11132]

  • Répondre à ce message

    6 février 2008 11:23 , par Rainer

    Merci, ça marche

  • Répondre à ce message

    6 février 2008 09:53 , par Patrice Vanneufville

    c’est forum.html le fautif : le mail est automatiquement inséré dans le formulaire si l’auteur est connecté. Il vaut mieux transformer "[(#EMAIL)]" en "[(#EMAIL*)]". Cela évitera tout traitement sur cette balise.

  • Répondre à ce message

    6 février 2008 09:17 , par Rainer

    Je te donne les deux code complet :

    formulaire_bb_profile.html :

    <!-- debut code pour fichier profile.html -->
                    <BOUCLE_recap(AUTEURS){id_auteur=#SESSION{id_auteur}}{tout}>
            <INCLURE(session.php){fond=inc_teteforum}{id_rubrique}>
            <p class="space_20"></p>
            <table class="spipforum" id="profile">
                    <tr>
                                    <th colspan="2">#NOM</th>
                            </tr>
                            <tr class="inter">
                                    <td colspan="2">&nbsp;</td>
                            </tr>
                            <tr class="ligne_sujet">
                                    <td class="aff_avatar">
                                            [(#NOM|afficher_avatar|reduire_image{100})]
                                    </td>
                                    <td>
                                            #FORMULAIRE_BB_PROFILE
                                    </td>
                            </tr>
                            <tr class="inter">
                            <td colspan="2">&nbsp;</td>
                    </tr>
                    </table>
                    <INCLURE(session.php){fond=inc_piedforum}{id_rubrique}>
                    </BOUCLE_recap>
                    </B_recap>
                    [(#REM) si visiteur non identifie : form login ]
                    [(#SESSION{id_auteur}|=={''}|?{' ',''})<div class="login"><p class="login"><:forg:login:></p>]
                    #LOGIN_PUBLIC

                    [(#SESSION{id_auteur}|=={''}|?{' ',''})

                    &#91;<a[ href="(#URL_PAGE{spip_pass})"] target="spip_pass" onclick="javascript:window.open(this.href, 'spip_pass', 'scrollbars=yes, resizable=yes, width=480, height=280'); return false;"><:login_motpasseoublie:></a>&#93;

                    </div>

                    ]

                    <//B_recap>

    puis

    forum.html

    <div class="formulaire_spip formulaire_profil">
    [<p style="color:red">(#ENV*{echec})</p>]
    <form action="[(#ENV{self})]" method="post">
           
    <BOUCLE_AUTEUR(AUTEURS){id_auteur=#SESSION{id_auteur}}{tout}>
            <fieldset>
            <legend><:forg:modif_parametre:></legend>
            <input type='hidden' name='nom' value='[(#NOM)]'>
            <input type='hidden' name='id_auteur' value="[(#ID_AUTEUR)]">
            <input type='hidden' name='modif' value="1">

                   
            <p><label for="email"><:forg:votre_email:></label>
            <input type='text' name='email' class='forml' value="[(#EMAIL)]" size='40'></p>
           
           
            <p><label for="bio"><:forg:votre_bio:></label>
            <textarea name='bio' class='forml' rows='4' cols='40'>[(#BIO*)]</textarea>
            </p><br />

            <input type='hidden' name='pgp' value="[(#PGP)]">

            <p><label for="nom_site"><:forg:votre_site:></label>
            <input type='text' name='nom_site' class='forml' value="[(#NOM_SITE)]" size='40'></p>
            <p><label for="url_site"><:forg:votre_url_site:></label>
            <input type='text' name='url_site' class='forml' value="[(#URL_SITE)]" size='40'></p><br/>

            [(#SESSION{statut}|=={'6forum'}|?{'
            <p><label for="avatar"><:forg:votre_url_avatar:></label>
            <input type="text" name="avatar" class="forml" value="'[(#EXTRA|extra{avatar})]" size="40">
            </p><br />
            ,''})]

            <p><label for="new_pass"><:forg:votre_nouveau_passe:></label>
            <span style="color:red"><:forg:info_plus_cinq_car:></span><br />
            <input type='password' name='new_pass' class='forml' value="" size='40' /></p>
            <p><label for="new_pass2"><:forg:info_confirmer_passe:></label>
            <input type='password' name='new_pass2' class='forml' value="" size='40'></p>
           
           
            <div class="spip_bouton"><input type="submit" name="valider_auteur" value="<:valider:>" /></div>

            </fieldset>
    </BOUCLE_AUTEUR>

    </form>
    </div>

    Merci Rainer

  • Répondre à ce message

    5 février 2008 23:31 , par Patrice Vanneufville

    Le "onclick" est ajouté par jQuery sur le poste client. Firebug pourra te montrer le code final. Si tu avais un lien public, ça serait plus facile de t’aider je pense...

  • Répondre à ce message

    5 février 2008 23:17 , par Patrice Vanneufville

    Ah oui, ça c’est parceque le plugin veut transformer le mail qui est passé en value... on pourrait protéger les balises <input>, mais bon, ya pas moyen de modifier un peu le code du squelette ?

    Quel est le code original ?

Pages 1 | 2 | 3 | 4 | 5

Répondre à cet article

Retour en haut de la page

Ça discute par ici