Aujourd’hui je vais vous présenter une librairie Javascript, que j’ai pu découvrir en me baladant sur la toile et que j’ai eu l’occasion de tester et utiliser et pour laquelle je me devais de vous la présenter. Il s’agit de : Tinycon.js. Grâce à cette petite bibliothèque, vous allez pouvoir « manipuler » le favicon de votre site Web, application ou encore de votre blog.
Dans son principe, Tinycon permet d’ajouter une petite bulle de notification à côté de votre favicon. Pour les « novices », un favicon est une icône symbolisant un site Web. Vous pouvez les retrouver sur tous les navigateurs Web dans la barre d’adresse, la barre de titre, les favoris, les onglets et autres raccourcis…
Côté conception, la taille de cette icône est généralement de 16×16 ou encore 32×32 pixels. Vous pouvez le trouver au format .ico (format d’icône Windows), ou utiliser des images .png, ou encore des .mng et .gif pour des icônes animées.
Note : Seul le format .ico est supporté par Internet Explorer (versions 6, 7, 8 et 9)…
Tinycon va donc permettre d’apporter un favicon plus ou moins dynamique. L’idée derrière les alertes dans le favicon est de permettre aux utilisateurs d’épingler un onglet et de facilement capter leur attention si nécessaire.
Google utilise cette technique notamment avec GMail, afin d’alerter l’utilisateur d’un nouveau mail. Franchement c’est très pratique.
Utilisation de base
Puisqu’il s’agit d’une toute petite librairie je vais faire très court. Après avoir inséré votre favicon à la racine de votre site Web, vous allez pouvoir l’insérer dans votre page Web comme ceci :
<html>
<head>
<link rel="icon" href="favicon.ico">
<title>Ajouter une bulle d’alerte au favicon avec Tinycon</title>
</head>
<body>
</body>
</html>
[/sourcecode]
Ensuite, il suffit d’insérer le script tinycon.js, et de l’appeler :
<html>
<head>
<link rel="icon" href="favicon.ico">
<title>Ajouter une bulle d’alerte au favicon avec Tinycon</title>
<script src="tinycon.js"></script>
<script>
Tinycon.setBubble(1);
</script>
</head>
<body>
</body>
</html>
[/sourcecode]
Vous voyez le 1 sur le favicon ? Félicitation 😉 Bon maintenant vous allez me dire, « ouais bof peut mieux faire ». Effectivement ! Rajoutons un traitement à intervalle régulier. Pour cela, remplacez le script précédent par :
<script>
var count = 0;
setInterval(function(){
Tinycon.setBubble(++count);
}, 1000);
</script>
[/sourcecode]
Hop, nos chiffres défilent ! Vous comprenez le principe ? Maintenant il vous reste à ajouter une petite requête en AJAX afin de récupérer l’information que vous souhaitez et le tour est joué ! Simple non ?
Sachez que Tinycon peut prendre toute une série d’options afin d’en personnaliser l’apparence :
-
width: la largeur de la bulle de notification -
heigth: la hauteur de la bulle de notification -
font: une chaîne de CSS à utiliser pour mettre en forme le texte de la bulle -
color: la couleur de la police du texte -
background: la couleur d’arrière-plan de la bulle -
fallback: solution de replie dans le cas où le navigateur ne prendrait pas en charge cette fonctionnalité
On peut donc avoir un code du style :
<script>
Tinycon.setOptions({
width: 8,
height: 10,
font: ’10px arial’,
colour: ‘#fff’,
background: ‘#00b830’,
fallback: true
});
</script>
[/sourcecode]
[samples id= »10226″]
Conclusion
Il ne vous reste plus qu’à vous rendre sur la page du projet, et de laisser votre imagination fonctionner ! Personnellement j’ai pleins d’idées pour l’intégrer…
Venez me partager vos idées, remarques, dans la partie commentaires ci-dessous.
