Comment publier son adresse e-mail tout en minimisant les risques de spam ? En la brouillant dans le code source.
Dans ce billet, je vous expliquerai quelques techniques pour déjouer les robots moissonneurs qui sillonnent le Web à la recherche d'adresses mail à spammer.

1. Brouiller la lecture

Ces robots analysent en premier lieu le code source. Il y a une façon très simple de leur pourrir la lecture  :

En HTML, il existe quantité de balises qui n'affichent rien à l'écran, et donc ne perturbent en rien la lecture visuelle d'un texte ou sa copie.
Voici donc une liste de ces balises, que nous intercalerons entre les lettres de notre adresse :

• <span>
• <label>
• <abbr>
• <acronym>

Et si vous avez l'intention de mettre votre adresse en italique, en voici d'autres qui s'ajoutent à votre choix :

• <var>
• <cite>
• <ins>
• <em>
• <dfn>

Mise en situation

Alors concrètement, vous voilà en face de votre éditeur de texte Eklablog. Vous avez tapé votre adresse dans une nouvelle ligne…

Placez votre curseur sur l'adresse et cliquez sur le bouton qui affiche le code source :

Ouh-là-là je n'y comprends rien à tout ce code ! Pas de panique : la fenêtre positionne votre curseur à cet endroit :

<p>mon.adresse@fournisseur.ext</p>

Si vous préférez avoir le maximum de choix dans les balises, je vous conseille de mettre votre texte d'emblée en italique. C'est très simple : juste après la lettre p de votre balise paragraphe, insérez un espace suivi de ce code :

style="font-style:italic;"

Ce qui vous donnera ce résultat :

<p style="font-style:italic;">mon.adresse@fournisseur.ext</p>

Ensuite, c'est très simple, vous choisissez quelques balises que vous collerez un peu partout entre les différents caractères de votre adresse.

Mais attention : Il faut fermer toutes vos balises ! Une balise s'ouvre sous la forme <balise> et se ferme sous la forme </balise>.

Attention à nouveau : Vous avez le droit d'imbriquer vos balises les unes dans les autres, mais pas de les mélanger comme ceci : <span>texte<label></span>texte</label> (ici, la balise <span> est fermée à l'intérieur de la balise <label>).

Voici un exemple de brouillage :

<label>m<abbr>on</abbr>.</label><acronym>adr</acronym>esse<span>@fo</span><label>ur</label><span>ni</span>sseur.<abbr>ex</abbr>t

Observez que la première balise (<label>) en contient une autre (<abbr>) mais se ferme bien après elle et non à l'intérieur de l'autre.

2. Éviter les mots-clés révélateurs

Certains robots, lorsqu'ils ne trouvent aucune adresse, prennent une capture d'écran des endroits de la pages qu'ils jugent intéressants et restituent le texte afin d'y trouver l'adresse mail (ouh ! les vilains ! ).

Aussi, n'écrivez pas une introduction du style :
Voici mon adresse e-mail :

Ce serait servir aux robots votre adresse sur un plateau. Car les mots suivants sont détectés par ces derniers comme des indices de présence :

• adresse
• mail
• e-mail
• contact
• envoyez
• messagerie

Utilisez plutôt des formules avec des mots-clés peu utilisés comme Voici mes coordonnées pour me transmettre un courrier électronique ou Mon mèl ou Faites-moi parvenir vos messages ici. Vous pouvez faire preuve d'originalité avec des formules comme Intitulé de destination pour une missive électronique ou Voici mon libellé pour toute correspondance épistolaire par exemple.

Autre idée très intéressante : vous pouvez brouiller les mots-clés gênants en remplaçant certaines lettres avec des caractères spéciaux très proches. Ici, une liste de caractères cyrillique très ressemblants :

• Αа
• Εе
• Ϲс
• о
• ν
• ѕ
• і

Ou encore plus simple : ne mettez rien en introduction !

3. Semer des fausses pistes

Si vous avez malgré tout choisi de conserver des mots-clés qui risqueraient de mettre la puce à l'oreille des robots, alors voilà de quoi les mettre en déroute :

Il suffit d'insérer dans le code, une ou plusieurs adresses mail bidon qui n'apparaîtront que dans le code.

Pour ce faire, il vous faudra utiliser ces attributs HTML dans les balises de brouillage :

• name=""
• id=""
• class=""

Un attribut se place dans la balise ouvrante, juste après le nom de la balise, et après un espace, comme ceci :

<label name="adresse-bidon@gmail.com">texte</label>
<span class="fausse.adresse@yahoo.fr">texte</span>
<abbr id="adresse@quelconque.com">texte</abbr>

Une autre technique est d'utiliser des commentaires :

<!-- adresse.bidon@laposte.net -->

Attention : votre commentaire ne doit pas comporter de double-tiret (excepté bien-sûr pour ouvrir et fermer la balise).

Bon, eh bien vous voilà parés pour ne plus livrer votre adresse en pâture sur le Net !
Bonne rédaction. Et si vous avez la moindre interrogation, les commentaires sont ouverts.

Vous rêvez d'un fond animé lorsque l'on fait bouger verticalement la page ? (on appelle ça scroller).

L'astuce est très simple : elle se base sur deux images de fond en mosaïque, celle de derrière (opaque) restant mobile avec la page, celle de devant étant fixée à l'écran.
Les zones en transparence de l'image de devant laissent voir l'image du dessous, et l'on voit défiler celle-ci en bougeant l’ascenseur.

Motif 1 : le masque

Pour ce faire, vous devez en premier lieu chercher un motif graphique à répéter, qui peut être donc mis bout-à-bout sans coupure.
En anglais, le mot utilisé est pattern, et c'est bien utile de le savoir pour vos recherches.

Lors de votre choix, gardez en tête qu'il faudra la trouer : c'est-à-dire que le motif devra comporter des zones de transparence.

Trouer le motif

Pour ce tuto, je vais choisir des hexagones dans l'idée d'afficher des alvéoles en cire d'abeille.
Ici mon idée est de laisser les bords en transparence pour animer un reflet en diagonale.

J'ai donc trouvé mon motif à répéter ici :

Je l'incruste sur une couleur. Et je n'ai plus qu'à effacer proprement les bords avec la gomme ou la baguette magique, ou encore utiliser un outil comme Couleur vers alpha dans The Gimp, Couleur de transparence dans Photofiltre, ou color range dans le menu Select de Photoshop.

J'obtiens donc ceci :

Je vérifie bien que le motif se répète sans coupure et j'ai fini mon masque.

Motif 2 : le fond opaque

Maintenant, il me faut réaliser le fond qui animera le reflet au travers des trous de notre masque.

J'ai donc réalisé un motif en dégradé diagonal, avec la même couleur de fond que mon masque. Et pour rompre la monotonie, j'ai gommé le reflet en dégradé dans l'autre sens. Voici le résultat :

Vérifiez bien que votre fond se répète sans coupure et passez à la suite.

Intégration sur le blog

Sur Eklablog, l'image d'arrière-plan que vous entrez dans l'outil de personnalisation est affichée au-dessus de la page (ce qui n'est pas le cas de tous les blogs), nous allons donc appliquer un fond à la page elle-même via le code CSS avant d'ajouter le second fond via l'outil de personnalisation, qui s'affichera par-dessus.

Ajouter le fond en CSS personnalisé

Avant de vous ruer sur le code CSS, il vous faut en premier lieu mettre en ligne votre image.

Pour cela, vous pouvez créer un nouvel article ou une nouvelle page privée, qui vous servira de fourre-tout pour mettre en ligne vos smileys perso, vos icônes et vos fond utilisés dans votre propre code CSS comme ici.

Une fois mise en ligne, récupérez son URL. (Sur Firefox, il suffit de faire un clic droit et de choisir Copier l'adresse de l'image, il ne vous restera plus qu'à la coller en attendant dans un bloc-note).

Ensuite, allez dans le menu Eklablog nommé Apparence pour cliquer sur Modifier le thème.

En bas de la colonne de gauche, cliquez sur Ajouter du CSS.

Dans la zone de droite, copiez-collez ce code :

/* Image de fond */
body{background-image:url('http://url-de-mon-image.jpg');

Remplacez http://url-de-mon-image.jpg par votre propre url, puis cliquez sur le bouton Appliquer et Sauvegarder. (Il n'y a pas besoin d'autre règle, car le comportement par défaut de cette règle CSS répète le fond en mosaïque et le positionne en haut à gauche.)

Ajouter le masque avec l'outil du thème

Au tour de l'image du dessus maintenant : rendez-vous à nouveau dans le menu Eklablog Apparence puis Modifier le thème.

Dans la colonne de gauche, cliquez sur Format du blog, puis sur Fond.

Mettez en ligne votre image, puis cliquez sur Afficher/Masquer les paramètres étendus.
Réglez l'image en mode de répétition mosaïque et en attachement fixe.

Et voilà ! Si vous avez bien suivi, votre fond animé devrait fonctionner.

Résultat

Voici le résultat et une série d'autres exemples :

Abeilles

Fond :	Masque :

Zig-zags

Fond :	Masque :

Broderie

Fond :	Masque :

En vous souhaitant la manipulation agréable.
N'hésitez pas à poser vos questions en commentaire.

Bonjour,
Aujourd'hui, je vais vous livrer une astuce qui permet de mettre en forme une citation dans les commentaires d'Eklablog et les messages du forum. En effet, l'éditeur ne propose aucun bouton de citation pour citer tout ou partie des messages précédents.

Voici un exemple :

Attention : à vouloir trop vous faire remarquer avec ce genre de ruse, vous risquez de vous faire bannir par les modérateurs. Tenez-vous-le pour dit. Je ne serai pas tenu responsable du mauvais usage que vous ferez de cette astuce.

Note : Dans ce tuto, j'utiliserai le navigateur Mozilla Firefox. Si vous utilisez un autre navigateur, la manipulation peut être légèrement différente.

Prêts à hacker l'espace commentaire ? C'est parti !

1. Transformer un paragraphe en bloc de citation

Dans une nouvelle ligne, faites un clic droit sur un nouveau paragraphe, et choisissez Examiner l'élément. Nous allons transformer ce paragraphe en bloc de citation.

Attention : Si votre paragraphe se trouve en début ou en fin de commentaire, passer à la ligne à cet endroit aura pour effet de générer de nouvelles citations au lieu d'un nouveau paragraphe de texte normal.
Si votre paragraphe se trouve en début de commentaire, écrivez une ligne au dessus ; s'il est en fin de commentaire, ajoutez une ligne en dessous.

Double-cliquez sur le p de la balise <p>. Remplacez par blockquote et cliquez sur un endroit vide dans la page pour appliquer le changement.

2. Injecter les balises HTML

Une fois fait, copiez ce code :

<small><b>XX</b> a écrit :</small><p>« Citation. »</p>

Puis faites un clic droit sur la balise <blockquote></blockquote> et choisissez Coller - À l'intérieur du HTML.

Et voilà le résultat :

3. Copier-coller le texte à citer

Il ne vous reste plus qu'à remplacer le texte de la citation directement dans l'éditeur de commentaire et remplacer les deux X par le bon pseudo.

4. (Optionnel) colorer la bordure à gauche :

Notez que, par défaut (sur le forum Eklablog par exemple), le paragraphe de citation comporte déjà une barre à gauche.
Pour la colorier ou ajouter cette barre où elle n'apparaît pas, voici comment faire :

Sélectionner la balise <blockquote></blockquote>. Et dans la zone de droite, aller dans l'onglet Règles pour cliquer dans la zone Cet élément, entre les accolades ({}) de élément.

Puis copiez-collez ce code CSS :

border-left: 8px solid #ddd;

C'est bon, vous pouvez fermer l'outil d'examen du code source.

Voici à quoi ressemblera notre exemple une fois le formulaire validé :

En espérant que cela vous ait plu.
Je vous attends dans les commentaires pour toute question. Bonne rédaction à vous ! 

Bah oui, ça n'est pas un blog, c'est un titre, voyez-vous cher môssieur, hu-hu-hu ! Euh-nuance ! Euh-nuance !
Et ça, là, c'est un texte d'intro snob pour faire genre : « way gro ta vu la rayfayranssartistik mageure koman chui tro culturay anvré! truc 2 ouf!!!! ».

Bon, bref, plus sérieusement : c'est mon premier article sur ce canard. Est-il nécessaire d'étaler ici mon CV ou des pronostics des plus incertains sur les perspectives de ce recueil numérique, qui je le rappelle à l'heure où j'écris, est encore totalement vide ?
Sérieusement… Sérieusement ? Sérieusement !!! 

Ok, je cède.

Qui suis-je ?

Alors tu vois l'étiquette sur mon gilet de caissière ? Mais si, celle qui est épinglée à hauteur de mon organe moteur de circulation sanguine. Eh bien dessus, on lit « Assistant d'Éducation en Technologies d'Information et de Communication pour l'Enseignement » . Un titre snobinard et plus incompréhensible encore que le langage SMS d'un wesh-wesh énervé. Et comme c'est trop long à écrire et à prononcer, et que de ce fait, personne ne retient et donc ne prononce jamais tout cet intitulé complet, on écrit et prononce en fait que son abréviation sous la forme d'un nom de code des plus mécaniques : « AE TICE ». (Aaah ! la logique…)

Je suis donc un AE TICE ou AEd TICE si on veut… En beaucoup plus clair, je suis l'informaticien de l'établissement scolaire.
Le type qui tâche d'assurer une maintenance de base pour le parc informatique d'un lycée (mais ça pourrait être un collège ou une école) dépourvu de moyens car complètement inhibé par des règles bureaucratiques tout ce qu'il y a de plus… bureaucratiques. Et comme j'aime tant ce système aliénant, j'ai décidé d'arborer (ironiquement, bien entendu) près de mon petit cœur (rhooo comme c'est mi-mi ) cette étiquette dégoulinante de fierté (en Times New Roman s'il vous plaît, le Comic Sans MS ça ferait pas sérieux).

Mais n'allez pas croire que je suis un esprit rempli de dédain pour l'enseignement . Si c'était le cas, je ne serais pas dans cette galère, avec mon BTS de technicien en gestion de parc informatique.
J'ai beaucoup d'admiration pour tous ces enseignants qui se tuent à colmater tant bien que mal les lacunes abyssales de leurs élèves sur les fondamentaux essentiels à l'autonomie la plus basique et pourtant vitale. Ceci alors qu'une institution lourdingue les oblige à jouer des rôles totalement fantasques et inappropriés conduisant à fabriquer des êtres à l'esprit flasque de manière à ce qu'il adhère à… n'importe quoi (ce qui est précisément le produit de tout politicien).

Mais je m'étale, je m'étale… Et vous aurez amplement l'occasion de faire connaissance avec moi en lisant mes billets. (Hop ! Ça c'est de l'ellipse de compétition ! )

Et alors ce blog ?

Eh bien ce blog se veut d'abord être le futur recueil de tutoriels pour enseignants, élèves et AE TICE. Et accessoirement, j'aimerais y partager des articles d'opinion sur des sujet en lien avec le milieu scolaire et l'informatique en général.

Voilà, c'est tout… Ah ben je ne suis pas du genre à aimer le packaging, alors vous m'excuserez du peu . C'est d'ailleurs pour cette raison que ce blog, je le veux sobre et sans pub. (Moins fine la deuxième ellipse, mais on ne peux pas être bons partout.)

Alors bienvenue, bon surf par-ici, bonne lecture, bonne marrade, bonne pioche, tout ça, tout ça…