sept.162010

Utilisation de la jump list & taskbar avec IE 9

Published by Pierrick Martos at 15:28 under IE 9

image

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 :

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

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

Vous devriez obtenir ceci :

image 

Passons maintenant au renseignement des informations sur votre site.

  1: <meta name="application-name" content="Blog de Pierrick Martos"/>
  2: <meta name="msapplication-tooltip" content="www.pierrickmartos.fr/>
  3: <meta name="msapplication-starturl" content="http://www.pierrickmartos.fr"/>
  4: <meta name="msapplication-window" content="width=980;height=600"/>
  5: <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 :

image

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 :

image 

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 :

  1: <meta name="msapplication-task" content="name=Blog;action-uri=http://www.pierrickmartos.fr/;icon-uri=icons/blog.ico"/>
  2: <meta name="msapplication-task" content="name=Email;action-uri=http://www.pierrickmartos.fr/contact.aspx;icon-uri=icons/mail.ico"/>
  3: <meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com/PierrickMartos;icon-uri=icons/twitter.ico"/>
  4: <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

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

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

image

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



[KickIt] [Dzone] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Trackback | Post RSSRSS comment feed 2 Responses

Commentaires


pingback

Response by topsy.com on 17/09/2010 01:42:46

Pingback from topsy.com

Twitter Trackbacks for
        
        Blog de Pierrick Martos | Utilisation de la jump list & taskbar avec IE 9
        [pierrickmartos.fr]
        on Topsy.com




Favicon

Response by Favicon France on 05/10/2010 06:46:34

Merci pour ce tutoriel vraiment intéressant. Je vais commencer par télécharger la nouvelle version d'internet explorer pour juger ce qu'il vaut.



Ajouter un commentaire


(Affichera votre icône Gravatar)

  Country flag

biuquote
  • Commentaire
  • Aperçu immédiat
Loading