Sites épinglés dans Windows 8
L'écran d'accueil de Windows 8 est l'endroit idéal pour accéder à vos applications et à vos contenus favoris et rester connecté. Les vignettes des applications sont actives et actualisées : vous disposez ainsi de contenus récents et adaptés à vos besoins, et vous restez au courant de ce qui se passe dans le monde.
Nous avons déjà évoqué sur ce blog l'expérience de navigation de style Metro d'Internet Explorer 10 dans Windows 8. Dans ce nouveau billet, nous décrivons en détail la fonctionnalité d'épinglage des sites d'IE10 et expliquons comment l'utilisateur peut y accéder à partir de l'écran d'accueil de Windows 8. Vous découvrirez qu'il est possible d'afficher des éléments visuels propres au site dans l'écran d'accueil, ainsi que des notifications par badge signalant la présence de nouveaux contenus. Nous examinerons également en détail comment les développeurs Web peuvent prendre en charge la fonctionnalité d'épinglage des sites.
La vidéo suivante montre en pratique comment fonctionne l'épinglage des sites dans Windows 8 Consumer Preview.
Sites épinglés dans Windows 8
Les sites épinglés : bien plus que de simples favoris
Les utilisateurs de Windows passent le plus clair de leur temps à naviguer sur le Web. Comme le démontrent les données télémétriques que nous recueillons avec le consentement des utilisateurs dans le cadre du Programme d'amélioration de l'expérience utilisateur de Microsoft, un internaute consulte régulièrement les mêmes sites. Grâce à la fonctionnalité d'épinglage des sites de Windows 8, vous pouvez accéder facilement et immédiatement à vos sites. Les notifications par badge permettent quant à elles d'actualiser les vignettes des sites en affichant des informations à jour et de signaler la présence de nouveaux contenus.
Les développeurs peuvent exploiter la fonctionnalité d'épinglage des sites pour renforcer le lien entre leurs sites et les utilisateurs, et pour promouvoir leur marque directement dans l'écran d'accueil de Windows. Selon nos constatations, les sites qui utilisent cette fonctionnalité avec IE9 dans Windows 7 ont enregistré une hausse de fréquentation de 15 à 50 %. Dans Windows 8, l'expérience utilisateur est encore plus aboutie, car les vignettes des sites sont mises à jour même si les sites en question ne sont pas ouverts dans le navigateur.
Les deux captures d'écran ci-dessous montrent des vignettes de sites épinglés et des notifications par badge.
Sites épinglés dans l'écran d'accueil, montrant des éléments visuels propres au site et des notifications par badge
Exemple de notification par badge dans la vignette d'un site épinglé
Éléments visuels propres au site dans la vignette d'un site épinglé
En tant que développeur Web, vous pouvez fournir une icône de site (ou favicon), qui sera utilisée par IE10 pour identifier le site en différents endroits du navigateur, notamment dans la barre d'adresse, la page Nouvel onglet et l'écran d'accueil. IE10 utilise l'icône grand format du site (32 x 32 pixels) pour identifier le site lorsqu'il est épinglé dans l'écran d'accueil, à l'instar d'IE9 pour les sites épinglés dans la barre des tâches.
Capture d'écran montrant le processus d'épinglage d'un site dans la version de style Metro d'IE10 et affichant un aperçu de la vignette du site
IE10 détecte la couleur dominante de l'icône et l'utilise automatiquement comme couleur d'arrière-plan pour la vignette de l'écran d'accueil.
x-icon editor est un des nombreux outils permettant de créer des icônes. Vous pouvez l'utiliser pour créer l'icône 32 x 32 pixels de votre site. Ce logiciel permet également de convertir une image au format de fichier icône (.ico). Vous pouvez ensuite associer le fichier .ico en utilisant le code habituel d'insertion des favicons :
<link href="testdrive.ico" rel="shortcut icon" />
Notifications par badge mises à jour en arrière-plan
Windows 8 peut rechercher les mises à jour des vignettes épinglées dans l'écran d'accueil. Cette fonctionnalité est particulièrement utile pour les notifications légères : nouveaux messages envoyés par d'autres utilisateurs (messagerie et réseaux sociaux), réductions proposées par les sites marchands, nouveaux articles d'un fil d'actualités, etc.
Grâce à Internet Explorer 10 et Windows 8, vous pouvez proposer des notifications par badge directement dans les vignettes des sites épinglés. L'utilisateur a ainsi accès aux mises à jour de ses sites sans devoir les ouvrir dans le navigateur. À titre d'exemple, épinglez la démonstration Fresh Tweets en utilisant IE10 dans Windows 8 Consumer Preview. La vignette du site épinglé est mise à jour régulièrement et signale à l'utilisateur la présence de nouveaux tweets.
Les notifications en arrière-plan nécessitent des composants fournis par les sites. Les composants suivants sont ainsi indispensables : (1) le code XML de notification par badge, une réponse XML qui décrit la notification par badge pour Windows, et (2)les balises META des sites épinglés, un code de page Web qui indique l'emplacement que Windows doit interroger pour obtenir les notifications, ainsi que la fréquence d'interrogation.
Code XML de notification par badge
Windows gère l'interrogation et l'affichage des notifications par badge. Windows interroge le code XML de notification par badge, qui décrit les éléments visuels de la vignette du site épinglé. Le schéma de badge XML définit cette réponse XML simple. Par exemple, pour mettre à jour la vignette en affichant « 3 », il suffit d'envoyer le code XML suivant :
<?xml version="1.0" encoding="utf-8" ?>
<badge value="3"/>
Les badges peuvent être des nombres ou des glyphes, par exemple des indicateurs « Alerte » ou « Nouveau message ». Pour obtenir la liste complète des éléments pouvant être affichés par un badge, consultez l'article Choix d'une image de badge sur MSDN.
Balises META des sites épinglés
Vous devez ensuite associer le code XML de notification par badge à la page Web. IE10 utilise la base META « application-name » pour déterminer si la page Web prend en charge les fonctionnalités d'épinglage des sites, notamment les notifications et les listes de raccourcis. Pour prendre en charge les notifications par badge, vous devez ajouter une balise META supplémentaire à votre code, en indiquant l'URL du code XML de notification par badge, ainsi que la fréquence à laquelle Windows doit envoyer ses demandes. IE vérifie la présence de la balise META « msApplication-badge » au moment où la page est épinglée, mais aussi lors des lancements suivants du site à partir de la vignette su site épinglé.
<meta name="msapplication-badge" value="frequency=360;polling-uri=https://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />
Le paramètre value se compose de deux parties : polling-uri (obligatoire) et frequency (facultatif).
polling-uri est l'URI absolu grâce auquel Windows accède au document XML simple défini ci-dessus.
L'élément facultatif frequency correspond au nombre de minutes entre deux mises à jour. Voici la liste des valeurs possibles :
- 30 (Windows interroge l'URI toutes les 30 minutes)
- 60 (une heure)
- 360 (six heures)
- 720 (douze heures)
- 1440 (un jour, valeur par défaut)
Si l'élément frequency n'est pas spécifié ou si sa valeur ne figure pas dans la liste ci-dessus, la valeur par défaut d'un jour est utilisée (soit 1440 minutes).
API de développement pour la mise à jour des notifications par badge
Vous pouvez également effacer et actualiser le badge de la vignette du site directement à partir de la page Web, pour faire en sorte que la vignette soit mise à jour.
Lorsqu'un utilisateur ouvre le site épinglé par le biais de la vignette de l'écran d'accueil, le site Web fonctionne sous sa propre session, appelée SiteMode. Il peut alors appeler des fonctions JavaScript pour mettre à jour le badge.
La méthode window.external.msSiteModeClearBadge() efface la notification par badge sur la vignette. Dans la démonstration Fresh Tweets, lorsque l'utilisateur reçoit une notification et appuie sur la vignette pour ouvrir le navigateur, la page Web utilise la méthode msSiteModeClearBadge() pour effacer la notification de la vignette. Par la suite, dès qu'une mise à jour de badge apparaît sur la vignette, l'utilisateur sait qu'un nouveau contenu est disponible.
La méthode window.external.msSiteModeRefreshBadge() appelle Windows pour mettre à jour le badge sur le site en utilisant l'URI d'interrogation. Prenons l'exemple d'un utilisateur qui voit que la vignette d'un site épinglé indique la présence de trois messages non lus. L'internaute clique alors sur la vignette pour accéder au site. S'il lit uniquement la première mise à jour, vous pouvez déclencher une mise à jour de façon à ce que le badge indique le nombre correct de messages lus ou non lus, c'est-à-dire deux.
Dans Windows 8 Consumer Preview, ces deux API fonctionnent uniquement avec les sites exécutés dans les zones Intranet local ou Sites de confiance. Ce problème sera corrigé dans la prochaine version de démonstration. Pour tester ces API sur votre propre site à partir de la version Consumer Preview, ajoutez son domaine à la liste des sites de confiance, via l'onglet Sécurité de la boîte de dialogue Propriétés Internet.
Notifications affichées dans la barre des tâches du Bureau
Les notifications qui s'affichent sous forme d'icônes de recouvrement pour les sites épinglés dans la barre des tâches du Bureau continueront à fonctionner avec Windows 8 et IE10 sur le Bureau. Ce mode de notification n'est pas disponible pour les sites épinglés dans l'écran d'accueil de Windows 8. Windows 8 gère les notifications de toutes les vignettes de l'écran d'accueil en optimisant l'autonomie.
Listes de raccourcis pour la navigation rapide sur les sites
De nombreux sites très fréquentés (NYTimes.com, CNN.com, Amazon.com, etc.) prennent en charge certaines fonctionnalités propres aux sites épinglés dans IE9, notamment les listes de raccourcis, qui permettent d'accéder directement à une tâche ou à une partie spécifique d'un site. Avec IE10, les listes de raccourcis sont disponibles dans la barre de navigation, ce qui facilite la navigation sur le site avec les interfaces tactiles.
Lorsque l'utilisateur ouvre le site à partir de l'écran d'accueil, le bouton Épingler indique que des listes de raccourcis sont disponibles pour ce site :
Capture d'écran montrant la liste de raccourcis de la démonstration Fresh Tweets
La liste de raccourcis affichée est identique à celle affichée par IE9 dans la barre des tâches de Windows 7.
Vous pouvez ajouter des tâches statiques à la liste de raccourcis de votre site en les insérant dans le code de la page (en savoir plus) ou de façon dynamique, en fonction du comportement de l'utilisateur (en savoir plus). Les badges et les listes de raccourcis de Windows 8 font partie des fonctionnalités propres à chaque site. Chaque nom de domaine complet ne peut posséder au maximum qu'un seul jeu de données d'interrogation et de données relatives aux listes de raccourcis.
Conclusion
Internet Explorer 10 replace les sites Web au centre de l'expérience utilisateur, grâce à ses fonctions d'intégration avec l'écran d'accueil de Windows 8. Les développeurs Web peuvent créer des éléments visuels propres à leur site pour les vignettes des sites épinglés, signaler la présence de nouvelles mises à jour sur le site et proposer des listes de raccourcis pour faciliter la navigation sur le site.
Nous sommes impatients de découvrir comment vous ajouterez ces fonctionnalités simples à votre site Web, afin d'améliorer toujours plus leur visibilité dans Windows 8.
—Rahul Lalmalani, chef de projet, Internet Explorer