Categories
Blog

Mise en œuvre des favatars

Je me suis posé la question d’intégrer des gravatars dans les commentaires ce matin. Ça les rend plus sympathiques et permet d’identifier l’auteur rapidement. Mais le fait que ce soit un système centralisé ne me plait pas du tout. J’ai alors cherché s’il existait quelque chose de décentralisé. Sur une indication très pertinente de neuro, je suis tombé sur les favatars.

Je me suis posé la question d’intégrer des gravatars dans les commentaires ce matin. Ça les rend plus sympathiques et permet d’identifier l’auteur rapidement. Mais le fait que ce soit un système centralisé ne me plait pas du tout. J’ai alors cherché s’il existait quelque chose de décentralisé. Sur une indication très pertinente de neuro, je suis tombé sur les favatars.

Le principe est plutôt simple: utiliser les favicons comme des avatars décentralisés. La taille est suffisamment grande pour que chacun ait une image personnalisée et pas trop pour ne pas représenter des images choquantes. Le système est plaisant mais comment l’intégrer au blog ?

J’ai commencé à imaginer un système qui récupère les favicons en PHP (fopen distant par exemple), les met en cache et les affiche dans le template mais ce serait sortir l’artillerie lourde pour pas grand chose. Finalement, je me suis tourné vers une solution encore plus simple et légère: faire faire le travail par le navigateur avec un peu de javascript.

Pour le moment, cela donne quelques lignes de javascript écrites rapidement:

function dcFavatar(){     var comments = document.getElementsByClassName('comment-info');     for (var i=0; i<comments.length; i++){         link = comments[i].getElementsByTagName('A');         if (link.length > 1){             var img = document.createElement("IMG");             img.className = 'favatar';             img.src = link[1].href+'favicon.ico';             img.style.display = 'none';             img.onload = function(){                 this.style.display = 'inline';             }             link[1].parentNode.insertBefore(img, link[1]);         }     } }

Il faut noter que ce bout de code utilise la méthode getElementsByClassName de prototype.lite.js. À remplacer par votre getElementsByClassName préférée.

Pour ceux qui se posent la question de savoir ce qu’il se passe lorsque Javascript est désactivé, je répondrais qu’ils n’auraient rien remarqué si je n’avais pas bloggué sur le sujet 😉

61 replies on “Mise en œuvre des favatars”

L’idée est intéressante, mais pour le coup la présence d’un fichier favicon.ico est à la base une spécificité d’internet explorer, l’approche "standards" etant de pointer vers un fichier png depuis une balise link ( <link rel="icon" href="path/favicon.png" /> ).

Fred Bird: oui j’y ai pensé mais j’ai vite abandonné dans la mesure où mon approche se veut simple. En effet, pour charger la véritable favicon (en <link>), il faudrait charger la page et la parser pour retrouver l’url à charger réellement ce qui est plutôt lourd comme traitement.

Engy: il faut noter que le script est plutôt adapté à mon template et ne fonctionne pas encore parfaitement.

C’est vrai que charger tous les favicon en cache est pas top, la solution Javascript est plus pertinente je trouve.

Et tu peux pas stocker dans un répertoire favatars/ un fichier dans le genre user???.png, qui serais l’identifiant d’un utilisateurs ? L’id serait géré au niveau du cookie, comme le fait dotclear avec "se souvenir de mes informations…"

Quoi que, c’est tout de même une mise en cache. J’ai rien dit!

Et étendre le système (et proposer des images plus grandes) en cherchant non pas le favicon mais "favatar.png" à la racine du site ? Il faudrait alors "cropper" à 32*32 par exemple pour éviter les abus …

Je préfère personnellement un script qui me mettra les favatars en cache, et ce pour plusieurs raisons :

– Je ne suis pas tributaire de la disponibilité du site du voisin.
– Je n’ai pas besoin de faire des requêtes HTTP tous azimut dès que je charge une page (même si en javascript, c’est le client qui fait les requêtes en question hein).
– Je ne bouffe pas la bande passante des voisins pour agrémenter mon site de petits machins de quelques pixels de côté.

Très sympa, ton truc.

Marrant, au même moment je suis en train de réflechir à comment faire pour mettre en place les gravatars chez moi 😉

Toutefois, l’utilisation des favicons me semble trop limitée car justement l’image n’est pas assez grande. Mias c’est ton choix 😉

Le concept est sympa, mais comme l’a si bien dit Shemu, pas d’espace perso, pas de favatar.
Et que se passe-t-il pour ceux qui ont un blog blogger, msn spaces ou autre ?

Par contre le système doit pouvoir également être utilisé pour afficher une icone dans les listes de liens…

et l’avantage de centraliser c’est de ne pas avoir de trafic pour son avatar
c’est vrai que c’est petit, mais ca fait des hit quand même pour les stats

on peut aussi dire que les avatars sont à la racine du site et s’appellent avatar.png. hop, j’appelle ca pavatar.

Première fois que ma fille voit son favicon affiché sur un autre site, elle t’en est grandement reconnaissante 😉

Je plussoie très fortement les remarques de Frédéric, de toute façon tu vas t’en rendre compte par toi-même lorsque le nombre de commentaires va dépasser les 50 et que ta page mettra 3 minutes à être complètement chargée 🙂

Excellent ! Pour ma part j’ajouterai quand même dans le style : vertical-align: middle; Mais bon ce n’est que mon avis.

très bonne idée !
hélas, petit bug selon l’url que l’on saisi… par exemple je n’ai pas mis l’url de la racine de mon site mais l’url de mon blog, ce qui donne pour l’affichage du favicon :
http ://wildmary.net-sauvage.com/weblogfavicon.ico

mais sinon, je ne saisis pas trop la différence avec le principe de gravatars…

Je ne m’attendais pas à tant de réactions.

Il est clair que, pour le moment, mon implémentation n’est pas des meilleures et je continue de penser que l’idée est bonne. J’ai déjà commencé à réfléchir sur les moyens de résoudre les problèmes posés par cette version en Javascript et cela fera probablement l’objet d’un nouveau billet.

@wildmary: La différence majeure avec les gravatars c’est que ceux-ci sont centralisés sur un serveur et nécessitent la création d’un compte et d’un upload, aujourd’hui de nombreuses personnes ont un espace web et utilisent un favicon, ce qui te permet de faire une simple requête vers ce site pour récupérer (ou non) le favicon.
Concernant le principe effectivement c’est le même: afficher une image "unique" du rédacteur d’un commentaire…

Juste peut-être une optimisation pour Maurice: aller chercher la racine du site pour en extrairele favicon (pratique pour les blogs qui placent le favicon à la racine du site contrairement à l’install de dotclear 😉 )

Autre solution pour couper court aux lenteurs engendrées par les gravatars : un cache intégré à la fonction qui les appelle et qui les stockerait sur le serveur, afin d’éviter les requètes incessantes vers le serveur de gravatars. Au moins, les "commentateurs" réguliers auraient leur icône préchargée.

J’aime bien l’idée de Neolao, car le favicon est quand même petit je trouve. Il faudrait une convention du style "un fichier avatar.png placé derrière le dernier slash de l’url donnée comme site perso"…

mouais,

Maintenant, qu’est ce qui m’empêche de mettre une belle redirection sur mon site à partir de /favicon.ico vers /monimage.png ? Ou même de déclarer mon favicon.ico en image/png ? la contrainte de taille n’existe plus, le format non plus. On risque donc d’inclure des grosses images et plus des icones. La seule raison d’utiliser le favicon vient d’être perdue.

Sur le principe aller chercher un fichier sans déclaration de l’auteur est une mauvaise architecture. si demain tout le monde fait pareil à créer des formats sans phase de déclaration, ce sont des centaines de requêtes vers des ressources inexistantes qui seront faits. Les favicon sont déjà une plaie à cause de ça.
L’idée d’un décentralisé est bonne, mais gardons une déclaration de l’icone dans les entêtes avec un <link>. Certes ça imposera des traitements pour analyser la page, mais tout ceci est gérable avec un cache.
Il restera le problème du contenu potentiellement dérangeant dans les icones mais le contenu offensant peut déjà être dans le texte, on n’ajoute aucun problème qui n’existait pas.

Oui effectivement, mais je comprends toujours pas pourquoi il est codé directement en HTML ?!?
Et, pourquoi un fopen ?
tu regardes si le fichier existe si oui tu l’affiche sinon tu fais rien ?

@jeremy : en effet, je n’avais pas vu cela, le principe est pas mal… néanmoins il soulève le problème de la bande passante : si le site utilisant ce principe a énormément de trafic et/ou si de nombreux sites se mettent à utiliser cela, ne laissant pas le choix au visiteur qui laisse un commentaire, cela peut lui causer des soucis. Ne serait-ce qu’au niveau de ses statistiques, et des soucis de 404 si l’url appelée n’est pas la bonne… juste pour info parce que ça m’est un peu égal : la mienne appelée depuis ce site est déjà dans le top 10 de mes erreurs 404 pour la journée d’hier alors que mon commentaire datait de 15h40…
Le seul choix pour le visiteur serait de ne pas mettre son url, mais encore faut-il qu’il soit informé et c’est un peu dommage si celui-ci souhaite donner son url.

@Maurice : ne te méprends pas sur mon intervention, je dis cela juste pour te donner un retour comme c’est en cours d’implémentation, pas pour raler 😉

Hello,

Très intéressant comme méthode… Et très personnalisable aussi.
Toutefois je me pose les intérrogations suivantes :
1. nous savons que bien souvent les FAVIVON sont à la racine du site,
2. nous savons que bien souvent les FAVICON ont des extensions .ICO (mais pas toujours),
3. nous ne savons pas si la FAVICON est présente,

De fait, n’y aurais-t’il pas moyen de faire une détection de la FAVICON.extension préalablement au chargement (sur par exemple la racine du site renseigné, voir sur tous les sous-domaines avec une méthode Split() préalable ?) ?

Cela ne pourrait-il se faire via l’objet Images() ? Un évenement très simple de gestion d’erreur (via onError ?) pourrais aussi être interprété (ou alors via Try / Catch ??) afin de vérifier dans la boucle (voir ci après) quelle est l’extension du fichier.

Enfin pourquoi pas dans le summum, faire une petite boucle avec les extension les plus courantes (PNG, ICO etc…) qui avec la gestion de l’erreur permettrait d’avoir l’extension correcte…

Que pensez-vous de l’idée (sans savoir plus loin si elle est réalisable techniquement).

G.

Sunny > excellente idée, le problème est que les gravatars, pavatars et favatars n’ont pas la même taille ce qui complique légèrement la mise en page…

@ Olivier > Dans un cas similaire, je pense qu’il y a un moyen aisé de remettre à niveau l’image non ? Un p’tit style spécifique 🙂 ??

@ Yom > Eh bien tu en crées un 🙂 Il y a moyen de le personnaliser pour un site "classique non propulsé par Dotclear". Ici c’est le principe qui est expliqué.

G.

Bonne idée mais limitée tout de même.

J’ai bien aimé l’idée émise dans l’un des commentaires : utiliser l’avatar Jabber.

J’en reste aux gravatars pour l’instant.

Comments are closed.