Vous pouvez installer ma version du bookmarklet, en attendant que Benjamin intègre mes modifications à son générateur (ce qui est peut être déjà fait à l’heure ou vous lisez ces lignes, sinon dans quelques jours).

Pour accélérer un peu le declin d’IE 6, je me suis décidé à afficher un message aux visiteurs de tous les sites que je gère, leur indiquant que le navigateur qu’ils utilisent est obsolète et qu’ils devraient le mettre à jour. Avant de développer quelque chose, je me suis dis que je n’étais surement pas le premier à avoir cette idée et qu’une solution existait peut être déjà. Mon ami Google m’a trouvé l’outils parfait : ie6update.

Il s’agit en fait d’un javascript à placer sur son site, et qui affiche un message si le visiteur utilise IE 6, en prenant l’apparence d’une véritable notification d’IE :

Pour l’installer, rien de plus simple. Téléchargez le script, puis placez ce bout de code dans votre page :

<!--[if IE 6]>
	<script type="text/javascript">
		/*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("<script type=\"text/javascript\"   src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>"); var __noconflict = true; }
		var IE6UPDATE_OPTIONS = {
			icons_path: "http://static.ie6update.com/hosted/ie6update/images/",
			message: "Votre navigateur n'est pas &agrave; jour, cela repr&eacute;sente un risque, cliquez ici pour le mettre &agrave; jour",
			url: "http://www.microsoft.com/france/windows/internet-explorer/default.aspx"
		}
	</script>
	<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif]-->

Le script inclut la librairie Jquery si elle n’est pas présente, puis initialise le script en passant 3 paramètres :

icons_path : le chemin vers les images utilisées par le script (elles peuvent se trouver en local, ou utiliser celles se trouvant sur le serveur d’ie6update)
message : le message à afficher
url : le lien ou sera redirigé le visiteur s’il clique sur le message

Simple et efficace.

Par simplicité, je redirige vers la page de téléchargement d’IE 8. Une meilleure approche consisterait à rediriger vers une page listant les différents navigateur (Firefox, Safari, Chrome, …).

J’ai mis en place ce script sur un site ayant un traffic mensuel d’environ 24 000 visiteurs uniques. IE 6 représente environ 14 % des visites.

Rendez-vous dans quelques mois pour voir si la descente s’accélère. En attendant, je vais l’ajouter sur le maximum de site possible. Et vous ?

• Utiliser un captcha
• Utiliser les services d’un filtre antispam, genre Akismet

Je suis personnellement totalement contre les captcha, qui compliquent beaucoup trop la saisie d’un formulaire, qui se doit d’être simple si on veut que le visiteur le remplisse et l’envoi. Les captcha affichent des images de plus en plus compliquées, au point que même un être humain a du mal à identifier les lettres qu’il est censé recopier.
Pour les filtres anti-spam, je n’ai pas pris le temps de tester, peut être est-ce efficace, mais cela fait reposer le bon fonctionnement de votre formulaire sur un service tiers, et ajoute donc des potentialités de pannes.

La solution que j’utilise était jusqu’à présent composée d’une double protection, qui s’est avérée insuffisante, je viens donc d’en ajouter une troisième.

1. Contrôler les champs renvoyés par le formulaire :

Il arrive que les robots ajoutent des champs au formulaire qu’ils renvoient. La solution consiste donc à ne traiter que les formulaires qui ne contiennent que les champs que nous avons défini.
Pour l’exemple, utilisons un formulaire de contact ou l’utilisateur entre son nom, son mail et un message. Le formulaire retournera donc 4 résultats : nom, mail, message, ainsi que la valeur du bouton submit (si le formulaire est envoyé avec un champ input submit et pas un lien).

En php, on définit une liste de champs acceptés :

$whitelist = array('nom', 'mail', 'message', 'envoyer');

Lors de la soumission du formulaire, on contrôle ce qui est retourné :

if(checkWhitelist($whitelist))
{
     // Traitment du formulaire
}

La fonction checkWhitelist retourne false s’il trouve un champ qui ne figure pas dans la whitelist

function checkWhitelist ($list)
{
	foreach ($_POST as $key => $item)
	{
		if (!in_array($key, $list))
		{
			return false;
		}
	}

	return true;
}

2. Placer un token en session

De nombreux robots ne sont pas capable de gérer des cookies. La solution consiste donc à placer un nombre aléatoire dans un champ caché du formulaire, et à stocker ce nombre en session. Une fois que le formulaire est retourné, on vérifie que le nombre retourné par le formulaire est identique au nombre stocké en session. Les robots ne gérant pas les sessions ne retourneront rien, et du coup le formulaire ne sera pas traité.

Au chargement de la page, on génère un token (le paramètre de la fonction est le nom du formulaire) :

$token = generateFormToken('contact_form');

La fonction generateFormToken génère un nombre aléatoire, le stock en session, et le retourne.

function generateFormToken($form)
{
    $token = md5(uniqid(microtime(), true));
    $_SESSION[$form.'_token'] = $token;
    return $token;
}

On place ensuite ce token dans un champ caché du formulaire :

<input type="hidden" name="token" value="<?php echo $token; ?>" />

Lorsque le formulaire est retourné, on vérifie le token :

if(verifyFormToken('contact_form'))
{
    // Traitement du formulaire
}

Fonction verifyFormToken :

function verifyFormToken($form)
{
    if (!isset($_SESSION[$form.'_token']))
    {
        return false;
    }

    if (!isset($_POST['token']))
    {
        return false;
    }

    if ($_SESSION[$form.'_token'] !== $_POST['token'])
    {
        return false;
    }

    return true;
}

3. Changer le contenu d’un champ caché en javascript

Les robots ne remplissent pas les formulaires, ils se contentent d’envoyer directement le contenu du formulaire à l’adresse définie. La troisième solution consiste donc à placer un champ caché dans le formulaire, avec une valeur de 0 (ou autre), et de changer la valeur de ce champ lorsque l’utilisateur saisie son nom (ou autre).

A l’aide de Jquery, on attache une action qui sera déclenchée dès que l’utilisateur placera son curseur dans le champ nom. Cette action va modifier la valeur de notre champ caché (appellé ici « control ») :

$(function(){
	$('#nom').bind('focus', function(){
		$("#control").val('666');
	})
});

Lorsque le formulaire est renvoyé, on vérifie que le champ control a bien la valeur 666 :

if($_POST['control'] == 666)
{
    // Traitement du formulaire
}

Pour résumer, voici le script en entier :

<?php
	session_start();

	function generateFormToken($form)
	{

	    $token = md5(uniqid(microtime(), true));
		$_SESSION[$form.'_token'] = $token;
	   	return $token;
	}

	function verifyFormToken($form)
	{

	    if (!isset($_SESSION[$form.'_token']))
		{
			return false;
	    }

		if (!isset($_POST['token']))
		{
			return false;
	    }

		if ($_SESSION[$form.'_token'] !== $_POST['token'])
		{
			return false;
	    }

		return true;
	}

	function checkWhitelist ($list)
	{
		foreach ($_POST as $key => $item)
		{
			if (!in_array($key, $list))
			{
				return false;
			}
		}

		return true;
	}

	$whitelist = array('nom', 'mail', 'message', 'envoyer', 'control', 'token');

	if(isset($_POST['nom']) && verifyFormToken('contact_form') && checkWhitelist($whitelist) && $_POST['control'] == 666)
	{
		// Traitement du formulaire
	}

	$token = generateFormToken('contact_form');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#mail').bind('focus', function(){
				$("#control").val('666');
			});
		});
	</script>
</head>
<body>
	<form action="" method="post" name="contact_form">
		<label for="nom">Nom</label>
		<input type="text" name="nom" id="nom" />
		<label for="mail">Mail</label>
		<input type="text" name="mail" id="mail" />
		<label for="message">Message</label>
		<textarea name="message"></textarea>
		<input type="hidden" name="control" id="control" value="0" />
		<input type="hidden" name="token" value="<?php echo $token; ?>" />
		<input type="submit" name="envoyer" value="Envoyer"
	</form>
</body>
</html>

J’utilise cette solution depuis quelques temps, elle semble efficace. Concernant les deux premières techniques, je les ai trouvé sur un site anglais, mais pas moyen de retrouver l’adresse de ce site ; je l’ajouterai si je la retrouve. Pour la troisième technique, elle pose un problème si le visiteur du site a désactivé le javascript sur son navigateur. A vous de voir si cela est acceptable ou pas.

Si vous utilisez une autre technique, qui soit simple et efficace, n’hésitez pas à en faire part dans les commentaires.

$('a:visited').each(function(){
	console.log($(this).attr("href"));
});

Le petit bout de code ci-dessus affiche dans la console la liste de tous les liens qui ont été visités par l’internaute.

Mais cette technique a une limite de taille : elle ne permet de lister que les liens qui se trouvent effectivement dans la page en cours de consultation. Si on voulait l’utiliser pour vérifier toutes les pages d’un site, il faudrait que chaque page affiche les liens vers toutes les pages du site.

En fouillant sur internet, j’ai trouvé une solution tellement simple que je m’étonne qu’elle ne soit pas plus populaire. J’ai trouvé cette technique sur le blog de David Walsh, technique qu’il nomme Spyjax.

En fait, on peut facilement définir une couleur pour les liens dans une page, et une couleur différente pour les liens qui ont été visités.
La technique consiste donc à insérer des liens dans la page via un javascript, puis de regarder la couleur du lien. Si le code couleur correspond au code que l’on a attribué au liens visités, c’est que l’internaute a visité le site.

Ainsi, non seulement on peut vérifier si le visiteur est allé sur une page précise de son site, mais on peut également vérifier s’il est allé sur n’importe quel autre site, comme le site d’un de ses concurrents par exemple ! Je vous laisse imaginer toutes les applications que cela peut avoir.

Pour récupérer le script, disponible en Jquery et en Mootools, c’est par ici : Spyjax.

Et pour des exemples d’utilisation :

Une page qui vérifie si vous avez consulté des sites pour adultes : http://www.didyouwatchporn.com
Une page qui vérifie si vous avez consulté un des 5 000 sites les plus populaires : http://whattheinternetknowsaboutyou.com

Yasc est un petit projet personnel qui permet de générer le code css pour les sprites d’une image.
Ce script est inspiré de Sprite Creator, et a été réalisé à l’aide de jquery et du plugin imgAreaSelect.

YASC (Yet Another Sprite Creator) screencast from Francis Thomas on Vimeo.

Testez le et faites moi part de vos commentaires.

J’ai découvert ce soft via Daring Fireball, qui propose un coupon de réduction de 10 $ pour le logiciel, jusqu’au 15 avril.

[ad#posts]

C’est aujourd’hui que sort IE 8 !

Pour tout les détails sur les nouveautés, lisez la présentation détaillée de Dew sur Alsacréation.

[ad#posts]

CampaignMonitor, la meilleure solution selon moi pour gérer des campagnes d’emailling, vient de mettre en ligne une nouvelle page présentant les statistiques d’utilisation des différents clients email, page qui présente les statistiques pour le mois de février 2009, ainsi que l’évolution sur 6 mois. Les statistiques sont basées sur les campagnes envoyées par les clients de CampaignMonitor (250 millions de mails ouverts sur les 6 derniers mois). Cette page devrait être mise à jour régulièrement.

Encore un outils bien pratique pour tous ceux qui gèrent des campagnes d’emailling, outils qui vient s’ajouter à leur templates gratuits, ainsi qu’au service de prévisualisation des mails sur la plupart des clients mail offert par leur site, après une inscription gratuite.

[ad#posts]

Télécharger le fichier

Pour l’installer, copier le fichier dé-zippé dans /Bibliothèque/Dictionaries/ et activez le module Jquery dans les préférences de l’application Dictionnaire.

Pour plus d’infos, consultez le billet de Mika Tuupola.

[ad#posts]

Animations CSS :
Falling Leaves, Bouncing Box, Pulse

3D avec Canvas :
JS Cloth