Frato blog » Javascript http://www.lecentre.net/fratoblog PHP, css, webdesign... et le reste Tue, 31 Jan 2012 13:40:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Un bookmarklet pour avoir un aperçu rapide de ses sites responsive http://www.lecentre.net/fratoblog/2012/01/un-bookmarklet-pour-avoir-un-apercu-rapide-de-ses-sites-responsive/ http://www.lecentre.net/fratoblog/2012/01/un-bookmarklet-pour-avoir-un-apercu-rapide-de-ses-sites-responsive/#comments Tue, 31 Jan 2012 13:40:34 +0000 Frato http://www.lecentre.net/fratoblog/?p=297 Responsive design bookmarklet
Benjamin Keen a créé un petit générateur de bookmarklet qui permet d’afficher un site dans plusieurs iframes sur une seule page, pour prévisualiser le rendu d’un site sur différentes tailles d’écran (smartphone, tablette, écran, …). Sur son site, on peut choisir les tailles des différents iframes que l’on souhaite avoir. Ce bookmarklet est très pratique, mais la navigation entre les différents iframes n’est pas très pratique (il faut faire défiler la page horizontalement, et le scoll de la page entre souvent en conflit avec les scrolls des iframes). J’ai donc modifié sont bookmarklet pour générer automatiquement des boutons permettant de sauter d’un iframe à l’autre.

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).

]]> http://www.lecentre.net/fratoblog/2012/01/un-bookmarklet-pour-avoir-un-apercu-rapide-de-ses-sites-responsive/feed/ 0 iBooks Author, insérer facilement du contenu html dans ses livres http://www.lecentre.net/fratoblog/2012/01/ibooks-author-inserer-facilement-du-contenu-html-dans-ses-livres/ http://www.lecentre.net/fratoblog/2012/01/ibooks-author-inserer-facilement-du-contenu-html-dans-ses-livres/#comments Fri, 20 Jan 2012 12:19:12 +0000 Frato http://www.lecentre.net/fratoblog/?p=266

iBooks Author, le logiciel d’Apple pour créer des livres interactifs pour iPad, permet d’ajouter du contenu via des widgets (galeries photo, vidéos, présentation Keynote, questionnaires, 3D, images interactives, html). Pour insérer des widgets html, il faut fournir des widgets réalisés avec Dashcode, le logiciel d’Apple distribué avec les outils développeur. Mais si l’on ne souhaite pas passer par Dashcode, on peut tout à fait créer les bundles soit même, à la main.

Pour commencer, créez votre contenu html, dans un fichier index.html. Pour l’exemple, créons une page qui affiche un bloc rouge avec du texte :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
	<style type="text/css">
		#bloc {
			width: 500px;
			height: 300px;
			background-color: red;
			padding: 20px;
		}
	</style>
</head>
<body>
	<div id="bloc">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo justo, molestie eget, tristique at, gravida sed, nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse hendrerit neque molestie elit. Proin cursus, felis non porttitor vestibulum, elit nibh volutpat metus, nec facilisis quam eros et nisi. In varius metus vitae libero. Nullam lorem pede, laoreet in, scelerisque eget, consequat elementum, ipsum. Fusce eu odio. Nullam at enim. Sed nec ipsum in enim pharetra mollis. Proin augue magna, lacinia nec, venenatis posuere, mollis ac, massa. Curabitur id quam. Sed interdum elit nec eros.
		</p>
	</div>
</body>
</html>

Afin que notre widget soit valide, il faut ajouter 2 fichiers supplémentaires :

- une capture d’écran de notre widget, nommé « Default.png », qui servira de « poster » pour l’affichage dans notre livre.
- un fichier info.plist qui contient la description de notre bundle.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleDevelopmentRegion</key>
	<string>English</string>
	<key>CFBundleDisplayName</key>
	<string>Frato testBundle</string>
	<key>CFBundleIdentifier</key>
	<string>com.francisthomasr-testBundle</string>
	<key>CFBundleName</key>
	<string>testBundle</string>
	<key>CFBundleShortVersionString</key>
	<string>1.0</string>
	<key>CFBundleVersion</key>
	<string>1.0</string>
	<key>Height</key>
	<integer>540</integer>
	<key>MainHTML</key>
	<string>index.html</string>
	<key>Width</key>
	<integer>960</integer>
</dict>
</plist>

Télécharger le fichier Info.plist

Attention, dans ce fichier, le champ « CFBundleName » doit correspondre au nom du dossier qui contiendra les fichiers de votre bundle.

Pour terminer, il ne nous reste plus qu’à créer notre dossier « testBundle », d’y copier nos fichiers (index.html, Default.png et Info.plist), et d’ajouter l’extension « .wdgt » à notre dossier.

Il ne reste plus qu’à insérer notre bundle dans notre livre et à tester.

Pour aller un peu plus loin, il serait sympa que notre bundle soit capable d’aller chercher du contenu sur internet, pour afficher des informations à jour.
Modifions notre fichier « index.html » pour y ajouter la bibliothèque jQuery :

< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
	<script src="jquery-1.7.1.min.js"></script>
	<style type="text/css">
		#bloc {
			width: 500px;
			height: 300px;
			background-color: red;
			padding: 20px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$.ajax({
			  dataType: 'jsonp',
			  jsonp: 'jsonp_callback',
			  url: 'http://www.francisthomas.fr/jsonp.php',
			  success: function (data) {
			  	$('#bloc').append('<p>'+data.result+'</p>');
			  },
			});
		});
	</script>
</meta></head>
<body>
	<div id="bloc">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo justo, molestie eget, tristique at, gravida sed, nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse hendrerit neque molestie elit. Proin cursus, felis non porttitor vestibulum, elit nibh volutpat metus, nec facilisis quam eros et nisi. In varius metus vitae libero. Nullam lorem pede, laoreet in, scelerisque eget, consequat elementum, ipsum. Fusce eu odio. Nullam at enim. Sed nec ipsum in enim pharetra mollis. Proin augue magna, lacinia nec, venenatis posuere, mollis ac, massa. Curabitur id quam. Sed interdum elit nec eros.
		</p>
	</div>
</body>
</html>

En utilisant JSONP, notre bundle peut se connecter à un serveur pour télécharger du contenu à jour.

Voici le code du fichier jsonp.php :

$json = json_encode(array('result' => 'Ca marche'));
echo $_GET['jsonp_callback'] . '(' . $json . ');';

J’ai testé avec iBooks sur iPad, tout fonctionne. Cependant, je ne sais pas si cela est autorisé par Apple, donc je ne sais pas si notre livre passerait l’étape de validation pour être diffusé sur l’iBook Store. Cependant, rien ne vous empêche de distribuer votre livre vous même, et de l’ajouter dans iBooks en passant par iTunes. Deuxième problème potentiel, il faudrait gérer le cas ou l’iPad n’est pas connecté à internet.

Quoi qu’il en soit, cela ouvre des perspectives très intéressantes pour ajouter de vrais contenus intéractifs dans les livres numériques.

Télécharger les sources

Mise à jour :

Vous pouvez aussi télécharger un service Automator pour créer vos widgets. Sélectionnez vos fichiers, faites un clic-droit et choisissez « iBooks Bundle » dans le menu service. Cela va créer un fichier « Bundle.wdgt » sur votre bureau.

]]> http://www.lecentre.net/fratoblog/2012/01/ibooks-author-inserer-facilement-du-contenu-html-dans-ses-livres/feed/ 6 Sécuriser un formulaire sans captcha http://www.lecentre.net/fratoblog/2010/02/securiser-un-formulaire-sans-captcha/ http://www.lecentre.net/fratoblog/2010/02/securiser-un-formulaire-sans-captcha/#comments Sat, 06 Feb 2010 16:19:50 +0000 Frato http://www.lecentre.net/fratoblog/?p=246 Eternel problème du développeur web, sécuriser les formulaires qui se trouvent sur un site pour empêcher les robots de soumettrent des formulaires de spam. Jusqu’à aujourd’hui, deux solutions s’offrent à nous pour bloquer ces robots :

  • 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.

]]> http://www.lecentre.net/fratoblog/2010/02/securiser-un-formulaire-sans-captcha/feed/ 7 Espionner les visiteurs d’un site avec javascript http://www.lecentre.net/fratoblog/2009/11/espionner-les-visiteurs-dun-site-avec-javascript/ http://www.lecentre.net/fratoblog/2009/11/espionner-les-visiteurs-dun-site-avec-javascript/#comments Mon, 23 Nov 2009 15:13:56 +0000 Frato http://www.lecentre.net/fratoblog/?p=202 Pour un projet, je souhaitais connaître les liens qu’avaient visité les gens sur le site, pour afficher ou pas des informations complémentaires. Ma première idée a été de lister les liens ayant l’état :visited. Ceci est facile avec un petit bout de javascript (j’utilise Jquery, mais cela fonctionne avec n’importe quelle bibliothèque javascript) :

$('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

]]> http://www.lecentre.net/fratoblog/2009/11/espionner-les-visiteurs-dun-site-avec-javascript/feed/ 0 Comparateur de fichier (diff tool) sur mac http://www.lecentre.net/fratoblog/2009/04/comparateur-de-fichier-diff-tool-sur-mac/ http://www.lecentre.net/fratoblog/2009/04/comparateur-de-fichier-diff-tool-sur-mac/#comments Wed, 01 Apr 2009 07:46:42 +0000 Frato http://www.lecentre.net/fratoblog/?p=182 Changes vous permet de comparer vos fichiers et vos dossiers pour trouver rapidement les différences. L’interface est très intuitive, et l’application peut être intégrée sous forme de plug-in dans la plupart des éditeurs de texte (Textmate, Coda, BBEdit, Espresso, …). Il permet de travailler sur des fichiers locaux, ainsi qu’avec les système de versionning (Subversion, CVS, Git, …).

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]

]]> http://www.lecentre.net/fratoblog/2009/04/comparateur-de-fichier-diff-tool-sur-mac/feed/ 0 Consulter la documentation Jquery avec Spotlight http://www.lecentre.net/fratoblog/2009/02/consulter-la-documentation-jquery-avec-spotlight/ http://www.lecentre.net/fratoblog/2009/02/consulter-la-documentation-jquery-avec-spotlight/#comments Fri, 27 Feb 2009 07:57:13 +0000 Frato http://www.lecentre.net/fratoblog/?p=160
Mika Tuupola, inspiré par Priit Haamer qui a fait la même chose pour Ruby on Rails, a créé un module pour le dictionnaire intégré à OS X pour Jquery. Ainsi, la documentation Jquery est disponible dans Spotlight, d’un simple Apple + barre d’espace.

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]

]]> http://www.lecentre.net/fratoblog/2009/02/consulter-la-documentation-jquery-avec-spotlight/feed/ 0 Atlas, éditeur en ligne pour créer des applications avec le framework Cappuccino http://www.lecentre.net/fratoblog/2009/02/atlas-editeur-en-ligne-pour-creer-des-applications-avec-le-framework-cappuccino/ http://www.lecentre.net/fratoblog/2009/02/atlas-editeur-en-ligne-pour-creer-des-applications-avec-le-framework-cappuccino/#comments Wed, 25 Feb 2009 08:13:09 +0000 Frato http://www.lecentre.net/fratoblog/?p=147 Après Bespin, l’éditeur de texte en ligne de Mozilla, 280 North présente Atlas, une application en ligne pour créer des applications basées sur le framework Cappuccino. Leur démo (vidéo ci-dessous) est très impressionnante, tant au niveau de leur éditeur en ligne, qu’au niveau de la facilité avec laquelle on peut créer une application très rapidement.

Pour rappel, le framework Cappuccino permet de créer des applications web avec un look and feel d’application classique (voir par exemple 280 Slide, une copie de Keynote (l’application d’Apple pour créer des présentations), mais en version web).

Pour en savoir plus :

Atlas
Cappuccinno

[ad#posts]

]]> http://www.lecentre.net/fratoblog/2009/02/atlas-editeur-en-ligne-pour-creer-des-applications-avec-le-framework-cappuccino/feed/ 0 Bespin, éditeur de texte en ligne http://www.lecentre.net/fratoblog/2009/02/bespin-editeur-de-texte-en-ligne/ http://www.lecentre.net/fratoblog/2009/02/bespin-editeur-de-texte-en-ligne/#comments Fri, 13 Feb 2009 07:46:10 +0000 Frato http://www.lecentre.net/fratoblog/?p=125
Bespin est un éditeur de texte en ligne, issu du Mozilla Lab. Utilisant Canvas, il permet d’éditer vos fichiers html, js, … en ligne. Après un petit test rapide, l’outil semble rapide et efficace. Il dispose d’une ligne de commande permettant d’utiliser des fonctions (remplacer du texte avec des regex, trim, …).
Pour le tester, il faut utiliser un navigateur supportant Canvas, et les fonctions avancées de Canvas, donc Firefox 3 ou une nightly de Safari.


Introducing Bespin from Dion Almaer on Vimeo.

Plus de détail sur l’annonce de Bespin sur Ajaxian.

[ad#posts]

]]> http://www.lecentre.net/fratoblog/2009/02/bespin-editeur-de-texte-en-ligne/feed/ 0 Un slideshow animé sans flash grâce à Canvas http://www.lecentre.net/fratoblog/2009/02/un-slideshow-anime-sans-flash-grace-a-canvas/ http://www.lecentre.net/fratoblog/2009/02/un-slideshow-anime-sans-flash-grace-a-canvas/#comments Sun, 08 Feb 2009 09:32:31 +0000 Frato http://www.lecentre.net/fratoblog/?p=116
Jérôme Wax expérimente avec l’objet canvas, il a créé un diaporama animé entièrement propulsé en javascript et utilisant l’objet canvas. Encore une raison de moins d’utiliser Flash pour réaliser de petites animations sur un site.

Dans un autre style, l’équipe de développement de Safari présente une technique d’animation en CSS, à tester avec une version de développement de Safari ou avec Safari sur votre Iphone.

[ad#posts]

]]> http://www.lecentre.net/fratoblog/2009/02/un-slideshow-anime-sans-flash-grace-a-canvas/feed/ 0 Petite sélection de plug-in jquery http://www.lecentre.net/fratoblog/2008/10/petite-selection-de-plug-in-jquery/ http://www.lecentre.net/fratoblog/2008/10/petite-selection-de-plug-in-jquery/#comments Mon, 27 Oct 2008 07:55:35 +0000 Frato http://www.lecentre.net/fratoblog/?p=62 Voici une petite sélection de plug-in jquery pouvant se révéler utiles :

jQuery iPod-style Drilldown Menu

Un menu reproduisant la navigation sur un iPod, pratique pour afficher des menus complexes, avec de nombreux niveaux

Compteur de mot dans un textarea

Comme son nom l’indique, permet de compter le nombre de mots dans un textarea

Parseur d’url

Permet de récupérer facilement les informations d’un lien. Le plug-in permet d’accéder simplement au lien, au protocol du lien (http, https, …), au domaine, au port utilisé, aux paramètres s’il y en a (item=value&item2=value2), au nom du fichier (index.html), au chemin (/folder/dir/), et à encore bien d’autres paramètres.

Timers

Permet d’appeler une fonction toutes les x secondes, une fois ou plusieurs fois

[ad#posts]

]]> http://www.lecentre.net/fratoblog/2008/10/petite-selection-de-plug-in-jquery/feed/ 0