• Article
Les dossiers MSDN

Internet Explorer 8 : Introduction aux webslices
Bouquain Thierry

Bouquain Thierry
Directeur technique, Ucaya.
MVP Client App Dev

http://www.ucaya.com/blog

 

Objectif : Utilisation de l’affichage personnalisé des webslices pour la mise en valeur du contenu.

Pré requis:

  • Niveau : débutant

 

 

Introduction

Comme les flux RSS, les webslices nous permettent d’être notifié des nouvelles publications d’un site et plus spécialement de l’évolution d’une partie spécifique d’une page. Lors de la mise à jour de la page, le moteur de synchronisation d’Internet Explorer notifie l’utilisateur et lui permet de visualiser la zone mise à jour sans aller sur le site web.

Application au site « L’info en vidéo » de France Télévision

Le site web http://info.francetv.fr regroupe les vidéos et reportages du groupe France Télévision. Ces vidéos sont classées en différentes catégories. Le site est régulièrement alimenté en nouveau contenu. Nous voulons notifier les utilisateurs de la mise à disposition de nouvelles vidéos.

L’info en vidéo

Figure 1 – L’info en Vidéo – France Télévision

Principe de fonctionnement

Intéressons-nous à la catégorie « A la une ».

À la une

Figure 2 – Catégorie « À la une »

 

Le site web étant développé en Silverlight, Internet Explorer ne peut pas extraire lui-même les informations de mise à jour de la page. Nous allons l’aider et lui fournir deux liens :

         - le premier est une page reflétant les mises à jour de notre catégorie

         - le deuxième permettant un affichage plus adapté à la fenêtre de visualisation du Webslice.

 

Visualisation du Webslice

Figure 3 – Visualisation du Webslice

Implémentation

Découverte

Lorsqu’Internet Explorer affiche une page web, il inspecte son contenu pour trouver les Webslices qui la composent. Il affiche alors un bouton permettant de s’abonner  dans la barre de commandes ainsi qu’une icône au survol de la souris sur le Webslice.

 

Bouton de souscription aux webslices

Figure 4 – Bouton de souscription aux webslices

Le code : index.html

<body>
 …
<div id="slice_A_LA_UNE" class="hslice" style="display:none;">
 <span class="entry-title" >France Télévision, A LA UNE</span>
 <a rel="feedurl" href="update.html#slice_A_LA_UNE" ></a>
</div>
 …
</body>

Pour détecter un Webslice, Internet Explorer cherche des nœuds html contenant des noms de classes et des attributs spécifiques. Pour être détecté, un Webslice doit contenir au minimum :

        - Un élément portant une classe hslice.

        - Un attribut id présent sur l’élément portant la classe hslice ayant une valeur unique dans la page.

        - Un élément portant une classe entry-title. Le contenu de cet élément sera utilisé comme titre du Webslice.

Dans cet exemple, le Webslice étant un morceau de l’application Silverlight, l’affichage de l’icône de découverte du Webslice dans la page n’est pas utilisable. Le Webslice n’a donc aucun contenu et est donc caché à l’aide de style="display:none;".

L’attribut rel="feedurl" indique à Internet Explorer où aller vérifier les mises à jour du contenu. Le lien href doit contenir l’identifiant du Webslice. Cet identifiant peut être utilisé côté serveur pour ne vérifier que les mises à jours de ce Webslice ce qui est plus économe en ressources serveur.

Mise à jour

La page de mise à jour peut être soit un flux RSS, soit une page web contenant un Webslice avec le même identifiant que la page de découverte.

Le code : update.html

<body>
    <divid="slice_A_LA_UNE" class="hslice">
        <spanclass="entry-title" style="display:none;">France Télévision, A LA UNE</span>
        <abbrclass="ttl" title="60"></abbr>
        <divclass="entry-content">2008-09-01T00:00:00 </div>
       <arel="entry-content" href="small.html?cat=A_LA_UNE" ></a>
        <arel="bookmark" href="index.html" ></a>
    </div>
</body>

Nous retrouvons dans cette page la définition du Webslice. Il contient des propriétés supplémentaires servant à paramétrer la mise à jour :

         - L’élément abbr contenant class="ttl" indique dans sa propriété title="60" la fréquence de vérification. La valeur minimale est de 15 minutes. Sans préciser cet élément, la durée par défaut est de 1 jour.

         - L’élément portant class="entry-content" contient les données qui vont être vérifiées pour déterminer si la page a changé. Ici, un simple timestamp permet de notifier du changement de la page.

         - L’élément a ayant l’attribut rel="entry-content" spécifie la page utilisée pour visualiser le Webslice dans la barre de Favoris d’Internet Explorer.

         - L’élément a ayant l’attribut rel="bookmark" spécifie la page de redirection lorsque l’utilisateur clique sur le bouton de navigation du Webslice.

Vidéo associée :

Internet Explorer 8 - les webslices

 

 

Références