Utilisation de la jump list & taskbar avec IE 9

La beta d’IE 9 est disponible depuis hier sur le site officiel de Microsoft avec tout un tas de nouveautés :

  • Interface simplifiée
  • Sites épinglés
  • Gestionnaire de téléchargements
  • Améliorations des onglets
  • Page Nouvel Onglet
  • Recherche directement dans la barre d’adresses
  • Barre de notification
  • Gestion des performances (Addons trop lent…)
  • Accélération matérielle
  • etc…

Une des nouveautés que je trouve particulièrement intéressante et que je vais traiter dans ce billet, c’est la possibilité d’épingler un site dans la “taskbar” windows. Vous allez voir, il n’y a rien de bien compliqué !

Première chose, il va falloir ajouter un favicon sur votre site pour que l’utilisateur puisse identifier plus facilement votre site web dans sa barre. Afin de créer facilement votre favicon vous avez cet outil qui à partir d’une image génère directement votre favicon.ico. Une fois l’opération effectué, uploadez votre favicon à la racine de votre site web et ajoutez la balise link pour assigner la favicon à la page :

<link rel="icon" type="image/ico" href="favicon.ico" />

Attention, ce code est à placer dans la balise <head>

Vous devriez obtenir ceci :

Passons maintenant au renseignement des informations sur votre site.

<meta name="application-name" content="Blog de Pierrick Martos"/>
<meta name="msapplication-tooltip" content="www.pierrickmartos.fr/>
<meta name="msapplication-starturl" content="http://www.pierrickmartos.fr"/>
<meta name="msapplication-window" content="width=980;height=600"/>
<meta name="msapplication-navbutton-color" content="#38830A"/>

Attention, ce code est à placer dans la balise <head>

Application-name : correspond au nom de votre site/application dans la jumplist, cf entouré rouge :

msapplication-tooltip : en principe, ce tooltip devrait s’afficher au survol dans mon cas de “Blog de Pierrick Martos” mais apparement cette fonctionnalité est pour le moment désactivé

msapplication-starturl : Url vers votre site internet

msapplication-window : Taille de la fenêtre qui sera ouverte en cliquant sur le raccourci ou dans la jumplist.

msapplication-navbutton-color : Correspond à la couleur des boutons précédent et suivant, dans mon cas vert :

Une fois que l’on a configuré notre application, il ne reste plus qu’à y ajouter des tâches ! Pour cela, rien de plus simple :

<meta name="msapplication-task" content="name=Blog;action-uri=http://www.pierrickmartos.fr/;icon-uri=icons/blog.ico"/>
<meta name="msapplication-task" content="name=Email;action-uri=http://www.pierrickmartos.fr/contact.aspx;icon-uri=icons/mail.ico"/>
<meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com/PierrickMartos;icon-uri=icons/twitter.ico"/>
<meta name="msapplication-task" content="name=Facebook;action-uri=http://www.facebook.com/pierrick.martos;icon-uri=icons/facebook.ico"/>

Attention, ce code est à placer dans la balise <head>

Chaque tâche de la jump-list correspond à une balise meta qui a pour propriété name : msapplication-task. Le reste est renseigné dans la propriété content.

Voici un extrait de la première ligne : name=Blog;action-uri=http://www.pierrickmartos.fr/;icon-uri=icons/blog.ico

name : Correspond au nom de la tâche

action-uri : correspond à l’uri vers laquelle la tâche doit pointer

icon-uri : correspond au lien vers l’icone à afficher

Et voilà ! Vous avez un site avec une belle jumplist.

PS : Pour vos icones je vous conseille l’excellent : iconfinder

PS 2 : Pour ajouter un site dans votre tasbar, cliquez sur l’onglet cible et glissez-déposez le dans la taskbar, rien de plus simple 🙂

Posted In IE9

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *