Nous allons voir le fonctionnement de l’OpenID ainsi que les méthodes pour l’intégrer dans nos pages.

Fonctionnement de l’OpenID

1. Vous allez sur votre site favori qui utilise l’OpenID.
2. Vous vous connectez en utilisant vos identifiants OpenID.
3. Il vérifie vos identifiants en allant sur votre page web OpenID.
4. Il vous connecte.

OpenId

Comment avoir un compte OpenID ?

Il faut se connecter sur www.myopenid.com et créer un compte.

Vous aurez alors une adresse du type http://votrecompte.myopenid.com/

Il faut la conserver précieusement, c’est votre adresse OpenID .

Se connecter sur un site via OpenID

Nous allons nous inscrire à pibb.com (c’est un site qui permet de gérer une plate forme de communication privée entre utilisateurs) en utilisant notre identifiant OpenId.

On va se rendre sur leur site, pour enregistrer notre openID.

Là, vous inscrivez votre adresse OpenID, comme ceci :

OpenId

Un message de confirmation vous sera adressé.

OpenId

ça y est vous êtes inscrit

Si vous retournez dans votre site myopenid, vous verrez en bas de la page d’accueil un rapport
d’activité. (très utile pour se souvenir des sites où nous nous sommes inscrits)

openid

Sécurité

Il est bien évident qu’il faut être vigilant, lorsque l’on s’inscrit, il faut toujours privilégier l’openID
sur des sites connus (comme le mien :p).

Mais à quoi cela sert réellement ?

A ajouter de la sémantique à votre site internet. En plus de l’information qu’affiche vos pages webs, les microformats vont donner un sens à leurs contenus. Certains sites l’ont adoptés, et cela donne des résultats assez impressionnant :

Flickr : si vous regardez une photo géolocalisée, on peut ouvrir Google maps à l’endroit où la photo a été prise.
Aussi si une carte de contact (format hCard) est disponible sur la page web, on peut aussi l’ajouter dans votre carnet d’adresse Yahoo ou de télécharger le fichier .vcf correspondant;

Comment lire les microformats ?

En passant par le navigateur Firefox vous pouvez installer le plug-in Operator ou Tails Export qui sont actuellement les meilleurs sur le marché.

Création d’une vcard avec les microformats

L’intégration des microformats est très intuitive, vous allez voir ça avec cet exemple ;
nous allons afficher les informations d’une personne, on va l’appeler Wilfried Tartenpion. En plus nous allons attacher à ces informations une vcard de façon transparente.

Comment on va procéder ?

En utilisant simplement le html, avec les balises class des conteneur <div> ou <span>.
Pour indiquer au navigateur que le contenu est la représentation d’une vcard,
il faut nommer créer un conteneur dont la classe est vcard, soit

<div class="vcard">
</div>

Après pour indiquer à la vcard le nom est le prénom il faut utiliser la classe « fn n« .
Et si on veut préciser le prénom et le nom il faut utiliser la classe « given-name » pour le prénom et « family-name » pour le nom.
Enfin pour iniquer l’adresse mail, il faut utiliser la classe « email« .

Ce qui donne :

<div class="vcard">
<span class="fn n" lang="fr">
<span class="given-name">Wilfried</span>
<span class="family-name">Tartenpion</span>
</span><span class="email">wilfried.tartenpion@waanser.com</span>
</div>

Le rendu html :

Les microformats avec Operator ou Tails Export

Maintenant regardez les microformats de cette page à travers Operator ou Tails Export

microformats tails export et operator

Pour Operator, l’onglet Contacts devrait afficher le contact Wilfried Tartenpion.

operator

Pour Tails Export, un menu contextuel devrait s’afficher juste à droite. Dedans, normalement vous devriez voir
une bulle avec les informations sur Wilfried Tartenpion.

tails export

Si l’on clique sur exporter, le navigateur nous propose d’ouvrir un fichier hCard.vcf. Ceci est est normal, c’est justement la vcard que l’on a défini sémantiquement grâce au microformats.

vcf

géolocalisation

Si vous voulez géolocaliser vos contenu (comme une photo) avec des outils comme google map, yahoo map et autre, vous pouvez le faire en utilisant les microformats.

<div class="geo">
<abbr class="latitude" title="37.408183">N 37° 24.491</abbr>
<abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>

calendrier

Si vous voulez intégrer un calendrier, voici la syntaxe :

<div class="vevent">
<a class="url" href="http://www.waanser.com/">http://www. waanser.com/</a>
<span class="summary">waanser</span>:
<abbr class="dtstart" title="2009-01-25">5 janvier 2009</abbr>-
<abbr class="dtend" title="2009-01-26">26</abbr>,
à <span class="location">Paris</span>
</div>

Attention à respecter le format de date anglophone (année-moi-jour).

Voila, maintenant vous savez rendre le contenu de vos pages webs plus sémantique.

Il faut juste espérer que les navigateurs fassent l’effort d’intégrer les microformats dans leur prochaine version sans que l’on ai besoin d’ajouter une extension.