Hello, I’m Vinch

And this is my website.

Ultranoir va-t-il trop loin ?

07/27/11

This post is more than 6 years old. It might not reflect my current skills and convictions.

Ultranoir est une agence Web française que je suis depuis un petit temps et dont je respecte beaucoup le boulot, au même titre que d’autres agences françaises comme Soleil Noir ou des agences américaines comme Big Spaceship et Fantasy Interactive.

Ultranoir

Au début du mois de mai, Ultranoir a sorti un tout nouveau site full HTML5, très intéressant graphiquement et codé de main de maître. Hier, ce site a reçu une aura mondiale car il a méritoirement été élu site du jour sur Favourite Website Awards (FWA pour les intimes).

Je reconnais l’énorme boulot réalisé pour arriver ce résultat, ça n’a pas du être drôle d’obtenir un truc qui tienne la route à ce point dans les différents navigateurs et les techniques utilisées démontrent une énorme maîtrise des technologies du Web.

Il fallait des couilles pour se lancer là-dedans à corps perdu et rien que pour ça, chapeau bas !

Mais…

Parce qu’il y a un mais…

Je me demande quand même si tout ça a un sens… En effet, même si ce site n’est pas en Flash, j’ai l’impression qu’il a tellement voulu s’en approcher qu’il en comporte quelques-uns des défauts les plus gênants : les chargements dans tous les coins, la vidéo en plein écran qu’il faut skipper, le bricolage au niveau des URLs avec les hashbangs, et j’en passe…

J’ai cette déplaisante impression qu’on a un peu cassé le Web pour ensuite faire des réparations (parfois pas très catholiques) afin d’annuler ce qui avait été cassé.

Est-ce que les mecs qui ont inventé HTML, CSS et JavaScript voulaient qu’on crée ce genre de sites au final ?

J’avoue que je ne sais pas trop quoi en penser. Je suis tiraillé entre la performance technique et l’amère impression que le Web n’est pas censé être construit de cette façon.

Je lance donc le débat. Qu’en pensez-vous ?

Reproduire l’effet Apple.com grâce à un plugin jQuery

12/05/10

This post is more than 6 years old. It might not reflect my current skills and convictions.

Ceux qui me suivent sur Twitter ont pu le découvrir en exclusivité (pour rappel, je suis vinch01 sur Twitter), j’ai écrit mon premier plugin jQuery pour reproduire l’effet qu’on a pu voir récemment sur le site Apple.com (nouveau MacBook Air, les Beatles sur iTunes, etc.)

Si vous ne voyez pas ce que je veux dire, allez jeter un oeil à la vidéo ci-dessous :

Le fonctionnement de mon plugin est assez simple. J’ajoute quatre blocs (avec un z-index relativement élevé) autour du bloc cible et je fais un fadeOut() sur ces blocs après un temps défini.

Vous pouvez télécharger le plugin sur cette page et y trouver toutes les informations utiles qui vont avec. Je n’ai pas défini de licence claire mais libre à vous d’en faire ce que vous voulez. Je me ferai un plaisir de l’adapter en fonction de vos remarques et conseils.

J’espère que cela vous sera utile. Pour nous, en tout cas, ça le sera sans doute très prochainement.

Ouvrir un lien dans une nouvelle fenêtre en quelques lignes de jQuery

12/09/09

This post is more than 7 years old. It might not reflect my current skills and convictions.

J’ai toujours trouvé qu’il était du ressort de l’utilisateur de choisir s’il voulait (ou pas) ouvrir un lien dans une nouvelle fenêtre (ou un nouvel onglet). Jakob Nielsen pense d’ailleurs la même chose et l’a même intégré dans un article où il liste 10 erreurs fréquentes sur un site, article qu’il a publié en… 1999 !

Par contre, je peux totalement comprendre quand on me demande de forcer l’ouverture dans une nouvelle fenêtre. En effet, la plupart du temps, l’utilisateur ne sait pas qu’il a le choix… Ce serait trop bête de le perdre juste parce qu’il a ouvert un lien vers un autre site dans la fenêtre courante ! (je sens que ça va générer un débat)

D’un point de vue programmatique, depuis des années, l’usage pour ouvrir un lien dans une nouvelle fenêtre est d’utiliser l’attribut target="_blank" sur la balise <a>. Malheureusement, et nous le savons tous, cet attribut a été déprécié il y a plusieurs années, en même temps que les cadres (ou frames) et provoque donc une erreur à la validation W3C.

Il a donc fallu ruser et faire appel à JavaScript pour s’en sortir. En utilisant l’attribut onclick sur un lien, on a pu arriver à nos fins de façon non-intrusive :

<a href="http://www.google.com" onclick="window.open(this.href);return false;">Go to Google</a>

Ca fonctionne très bien ! Cependant, ajouter les événements directement sur les éléments n’est pas une pratique très recommandée. Mieux vaut tout placer dans un fichier JavaScript séparé.

Dans ce cas, il faut trouver un moyen de repérer les liens qu’on souhaite ouvrir dans une nouvelle fenêtre. Pour cela, la pratique plus ou moins courante dans le monde des développeurs Web est d’utiliser l’attribut rel="external" sur la balise <a>.

De cette façon, le tour est joué en quelques lignes de jQuery :

$('a[rel="external"]').click(function() {
	window.open($(this).attr('href'));
	return false;
});

Parfait. Cependant, cette technique pose problème dans certains cas…

Premièrement, imaginez que vous ayez un site déjà existant avec des milliers de pages. Vous vous voyez placer l’attribut rel="external" sur tous les liens du site ?

Deuxièmement, si votre site est un CMS, vous ne pouvez pas vous permettre d’imposer à la personne responsable du contenu de placer l’attribut rel="external" sur chacun les liens qu’elle introduirait dans le contenu du site…

Pour parer ces cas particuliers, j’ai donc écrit un petit bout de script en jQuery qui ne nécessite aucune intervention sur le code HTML :

$('a').click(function() {
	var href = $(this).attr('href');
	if (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) {
		var host = href.substr(href.indexOf(':')+3);
		if (host.indexOf('/') != -1) {
			host = host.substring(0, host.indexOf('/'));
		}
		if (host != window.location.host) {
			window.open(href);
			return false;
		}
	}
});

Ce script va systématiquement ouvrir tous les liens vers des sites externes dans une nouvelle fenêtre. Dans un premier temps, on regarde si l’attribut href du lien commence par http:// ou https://. Si ce n’est pas le cas, on sait déjà que c’est un lien interne. Ensuite, on regarde si l’hôte du lien (variable host) est identique à l’hôte de la page courante (window.location.host). Si ce n’est pas le cas, on ouvre le lien dans une nouvelle fenêtre.

C’est aussi simple que ça !