Les Webslices
Les Webslices ("tranches de Web") permettent aux internautes de suivre l'actualité d'une page ou d'un site à partir d'Internet Explorer 8. Vous pouvez procéder à un test rapide en vous rendant sur ce site : http://digg.com/. Dans la barre des menus, un bouton de couleur verte va être visible. Cliquez dessus afin d'ajouter ce composant Webslice dans le volet des favoris.
Dès qu'une mise à jour aura été détectée, le nom du Webslice apparaîtra en gras. Cliquez dessus afin de prévisualiser le "Top ten" des histoires postées sur Digg.
La galerie des Webslices en version française est accessible à partir de cette adresse : http://www.ieaddons.com/fr/webslices.
Note : Tous les boutons ne fonctionnement pas de manière correcte.
De fait, les Webslices peuvent se prêter à une multitude d'applications :
- Afficher la météo en temps réel ;
- Suivre le cours d'une valeur boursière ;
- Afficher les derniers articles publiés par un site ;
- Afficher les dernières enchères sur un site comme eBay.
Créer un Webslice et l'intégrer sur son site
Examinons maintenant comment créer un Webslice et l'intégrer à votre site web… Au départ, la règle à observer est très simple :
- Le Webslice doit utiliser le nom de classe hslice ;
- Dans le conteneur du Webslice, il doit lui être attribué un ID ;
- L'élément entry-title doit être défini ;
- L'élément entry-content doit être indiqué.
La syntaxe générale ressemblera à celle-ci :
<div id="article01" class="hslice">
<p class="article_titre01" id="article01"><a class="entry-title" href="http://exemple.fr/webslice.html">Créer un Webslice</a></p>
<span class="entry-content">
<p>Contenu affiché dans le Webslice</p>
</span>
</div>
Vous pouvez créer autant de Webslices que vous le désirez. La seule condition est que l'identifiant utilisé soit différent et qu'il ne soit par repris ailleurs.
Attention de bien comprendre que vous faites un appel vers une page HTML externe, vous devrez tester le bon fonctionnement de votre Webslice en distant et non localement.
L'élément entry-title est définit sur cette page de spécification des microformats hAtom : http://microformats.org/wiki/hatom.
Plusieurs instances de l'élément Entry Content peuvent être définies.
Vous pouvez spécifier un intervalle de rafraichissement des données (qui ne peut pas être moins de 15 minutes) en utilisant la valeur TTL :
<p>Mise à jour toutes les<span class="ttl">60</span> minutes.</p>
Afin d'indiquer une date d'expiration, utilisez ces deux éléments :
class="endtime" : signifie que l'élément possède une date d'expiration.
title="__UTC_Format__" : la date et l'heure d'expiration au format UTC.
On utilise la balise hAtom abbr. Par exemple :
<abbr class="endtime" title="2008-03-05T17:35:00-08:00"></abbr>
Afin d'intégrer les données d'un flux RSS, utilisez ce type de syntaxe :
<a class="feedurl" href="http://exemple.fr/flux.xml"></a>
Il ne sera affiché qu'un seul élément à la fois. Par exemple :
<body>
<div id="article02" class="hslice">
<p class="article_titre02" id="article02"><a class="entry-title" href="http://feedproxy.google.com/GoogleXxl"> Google XXL</a></p>
<span class="entry-content">
<p><a rel="feedurl" href="http://feedproxy.google.com/GoogleXxl"></a></p>
</span>
</div>
</body>
Le problème qui peut se poser à vous est de récupérer le contenu de votre flux mais d'une manière plus facilement utilisable pour les internautes. Vous pouvez utiliser une plateforme comme Yahoo! Pipes ou Microsoft PopFly. En reprenant une idée développée par Ronan Geraghty, j'ai utilisé ce type de code :
<body>
<div class="hslice" id="article03">
<p class="entry-title">Google XXL</p>
<a class="entry-content" rel="entry-content" href="http://www.popfly.com/users/Jean-Noel/Google%20XXL" />
</body>
Dans Blogger, une solution simple consiste à accéder à la mise en page de votre blog, d'ajouter un gadget nommé HTML/JavaScript et de copier le code voulu.
Voici un autre exemple d'intégration visible sur le site de Digg :
<body>
</div>
<div id="toptenlist" class="side-container hslice" style="display: none">
<span class="entry-title" style="display: none;">Digg</span>
<a id="slicesLink" rel="feedurl" href="http://digg.com/slices/topTenList/all#TopTen"></a>
</body>
Vous pouvez ajouter un bouton personnalisé qui permettra aux internautes de s'abonner directement à votre Webslices :
<input type="button" value="Titre du bouton" class="addButton" onclick='window.external.AddToFavoritesBar( "http://exemple.fr", "Titre du Webslice", "slice");' />
La propriété Bookmark force l'ouverture du bouton Ouvrir sur la page que vous avez spécifiée :
<div class="hslice" id="article04">
<p class="entry-title">article04</p>
<a rel="bookmark" href="http://exemple.fr/page.html" style="display:none;"></a>
</div>
Afin de définir un style CSS personnalisé, utilisez ce type de syntaxe :
<div id=" article_titre05" class="hslice" style="background-color:#FFF;"><div class="entry-content" style="background-color:#FFF;">
<table bgcolor="#FFFFFF">
<tr><td bgcolor="#FFFFFF">
<h2 class="entry-title">Dernières actualités</h2>
<ul><li><a href="http://exemple.php?news=article01">article01</a></li><li>
<a href=" http:// exemple.php?news=article02">article02</a></li></ul>
</td></tr>
</table>
</div>
</div>
Bien entendu, vous pouvez vous abonner au Webslice de Google XXL :-)
0 commentaires:
Enregistrer un commentaire