Frato blog

Un bookmarklet pour avoir un aperçu rapide de ses sites responsive

Frato — Tue, 31 Jan 2012 13:40:34 +0000

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

iBooks Author, insérer facilement du contenu html dans ses livres

Frato — Fri, 20 Jan 2012 12:19:12 +0000

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 :





HTML Test
	


	
		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.

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.





	CFBundleDevelopmentRegion
	English
	CFBundleDisplayName
	Frato testBundle
	CFBundleIdentifier
	com.francisthomasr-testBundle
	CFBundleName
	testBundle
	CFBundleShortVersionString
	1.0
	CFBundleVersion
	1.0
	Height
	540
	MainHTML
	index.html
	Width
	960

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 Test
	
	
	


	
		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.

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.

PIRATES, The Curse of the Evil Eye

Frato — Mon, 08 Feb 2010 10:12:15 +0000

Après 4 ans de travail, sur leur temps libre, Rémy tornior et Yves Geleyn viennent enfin de finaliser leur film : Pirates, The curse of the Evil Eye.

Je suis fan des illustrations de Rémy depuis longtemps, c’est très sympa de les voir prendre vie grâce au talent d’Yves Geleyn. Je vous laisse découvrir le film ci-dessous :

IE 6 doit mourrir, aidons le un peu

Frato — Sat, 06 Feb 2010 16:54:53 +0000

A l’heure ou les sites web sont de plus en plus compliqués, aussi bien au niveau graphique qu’au niveau du code, assurer la compatibilité des sites que l’on développe avec IE 6 est devenu un véritable calvaire. Support des css médiocre (comparé à Safari ou Firefox), performances faiblardes en javascript, … Bref, les développeur web se réjouirons lorsque IE 6 passera sous la barre des 5 % d’utilisation, ou moins.

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 :

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 ?

Sécuriser un formulaire sans captcha

Frato — Sat, 06 Feb 2010 16:19:50 +0000

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 :

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 :

 $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');
?>



	
	
	


	
		Nom
		
		Mail
		
		Message

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.

Un peu d’animation

Frato — Thu, 10 Dec 2009 12:52:45 +0000

On commence avec un reel :

Puis un peu de musique :

C’est marrant comme le clip précédent et celui ci-dessous utilise le même concept :

Enfin, on termine par un court métrage d’animation sympa, French Roast :

Socialite, client twitter pour mac

Frato — Tue, 01 Dec 2009 07:57:13 +0000

Socialite est un nouveau client twitter pour mac. Enfin, pas vraiment nouveau puisqu’il s’agit d’une nouvelle version d’EventBox, logiciel qui a été racheté récemment par Realmac Software, éditeur entre autre de RapidWeaver et LittleSnapper.

Socialite est en fait un logiciel multi-client puisqu’il permet de suivre ses comptes sur Twitter, Facebook, Flickr, et Digg, ainsi que son compte Google Reader, ou même encore d’ajouter n’importe quel feed à sa guise. Bref, un client bien pratique qui centralise la gestion de ses différents comptes.

Mais l’avantage principal selon moi, et que je n’ai jamais vu ailleurs (mais j’ai pu passer à côté de certains logiciels), c’est la gestion des Smart Folder (à la iTunes) dans Socialite. J’ai toujours été surpris par le peu de fonctionnalités offertes par les clients twitter au niveau de la recherche. Pour moi, twitter a deux intérêts :

Suivre l’actualité de ses amis et autres personnes dont on partage le centre d’intérêt
Faire de la veille temps réel sur certains mots clés

Or, pour faire de la veille, il faut être capable de trier les résultats obtenus, sous peine de crouler sous la masse des messages.
Un exemple concret : j’habite à Marseille, et je souhaite savoir ce qui se dit sur la ville. Mais Marseille, c’est aussi l’OM, et je voudrais bien ne pas me fader tous les messages qui concernent le foot. Avec les Smart Folder, je peux affiner ma recherche et masquer ces messages :

Exemple de configuration d'un Smart Folder

Il est ainsi possible de ne conserver que les messages répondants à certaines règles et pas à d’autres. Dans l’exemple, on conserve les messages dont le texte contient « Marseille », mais pas ceux contenant aussi « Olympique », « foot », …
Les règles de tri sont nombreuses : sur le contenu, le nom de l’utilisateur ou son pseudo, …

Grâce à cette fonctionnalité, je suis vraiment devenu accro à Socialite, qui n’en est qu’à la version 1, on peut donc espérer beaucoup d’évolutions rapidement. En ce qui me concerne je voudrais bien :

L’intégration de plus de services (LinkedIn, Delicious, …), ce qui semble être prévu par les développeurs
La possibilité de grouper les twits qui contiennent la même url (pour éviter de lire 50 messages qui parlent de la même chose)
Un système de règles, comme dans Mail, pour déclencher des actions en fonction de certains mots clé
Un système pour synchroniser Socialite sur plusieurs ordinateurs
Une version iPhone

Socialite est vendu 14 €.

Espionner les visiteurs d’un site avec javascript

Frato — Mon, 23 Nov 2009 15:13:56 +0000

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

Projection 3D sur facade

Frato — Mon, 23 Nov 2009 13:47:07 +0000

Une société des Pays-Bas propose d’animer un bâtiment en projetant des vidéos par dessus celui-ci, et le résultat est vraiment bluffant (ça doit l’être encore plus en vrai) :

Plus d’infos : projectionsonbuildings

L’évolution de l’immobilier jusqu’à la crise des subprimes

Frato — Thu, 23 Apr 2009 08:10:17 +0000

Petite vidéo sympa et très bien réalisée sur l’évolution de l’immobilier jusqu’à la crise :

subprime from beeple on Vimeo.

A voir en HD ici.

[ad#posts]