Maintenant que vous avez vu à quoi peuvent servir les microformats nous allons commencer à les utiliser ![]()
Le microformat hCalendar
Nous avons vu que hCalendar servait à rendre compréhensible/utilisable/exportable les dates/évenements que nous pouvons parfois partager sur nos différents sites. Le compréhensible vous avez compris que c’est « compréhensible par les machines »
Nous allons donc créer un petit événement : le 11 janvier ce sera l’anniversaire de ce blog (déjà deux ans
).
Créer l’événement
Dans un premier temps il va falloir créer notre événement, en utilisant la class vevent.
- <div class="vevent">
- </div>
Voilà notre événement est créé, nous allons le remplir.
Quoi, Quand, Où
Nous allons utiliser les classes suivantes : summary pour le quoi, location pour le où et dtstart/dtend pour le quand.
- <div class="vevent">
- Oyé Oyé!,
- sur <span class="location">ce blog</span>
- nous allons fêter <span class="summary">le deuxième anniversaire de http://antoine.guiral.info</span>
- du <abbr class="dtstart" title="2010-01-11T00:00">11 janvier 2010 à 00h00</abbr>
- au <abbr class="dtend" title="2010-01-18T00:00">18 janvier 2010 à 00h00</abbr>
- </div>
Voilà un exemple complet
Vous avez remarqué que pour les dates nous utilisons la balise abbr afin de proposer une date lisible par les humains et une date (dans le title) lisible par les machines.
Mais encore?
Si vous avez plusieurs événements, vous pouvez utiliser la class vcalendar.
On aurait aussi pu utiliser les classes url pour ajouter une url, duration pour la durée de l’événement, attendee pour les participants, etc etc… Je vous conseille d’aller voir la doc officiel du microformat hCalendar
Vous l’aurez compris l’exemple utilisé n’a rien de fictif :p restez attentifs ^^
Ca y est vous avez utilisé le plugin magique pour sauvegarder cet événement dans votre google calendar?
User Responses
3 Responses and Counting...
Leave a Reply
[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)
[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)
[2 birthday] 2 ans aujourd'hui = 2 smashing book à gagner
[tuto web] cadre avec bordures extensibles valide xhtml/css
[tuto mashup] Google maps sur votre site : c'est possible! (version statique)
- Etre Rapide et Opportuniste 26 juillet 2010 Olivier Marone
- Confiance en soi et indifférence à l'échec 14 juillet 2010 Bertrand
- Le but du commandement n'est pas d'assurer le controle etroit - 11 juillet 2010 Bertrand
- Losqu'il s'agit d'agir en milieu complexe, la "logique 11 juillet 2010 Bertrand
- L’entreprise 1.0, 2.0 et 3.0 en un schéma 2 juillet 2010 Laurent ASSOUAD




![[3615 mylife] Limoges, c’est fini. La suite?](http://antoine.guiral.info/wp-content/uploads/2010/02/stvincent.jpg)
![[facebook] Du nouveau sur la roadmap](http://antoine.guiral.info/wp-content/uploads/2010/02/facebook_logo.png)
![[facebook php] hiphop for php : une petite révolution dans le monde du développement web et de php](http://antoine.guiral.info/wp-content/uploads/2010/02/hiphop.jpg)
![[apple iPad] énorme succés de l’iPad à la dernière keynote d’apple](http://antoine.guiral.info/wp-content/uploads/2010/01/ipad.jpg)
![[google] google, le 51ème état?](http://antoine.guiral.info/wp-content/uploads/2010/01/51emeetat.jpg)
janvier 06, 2010
Est ce que tu utilises un éditeur ? (et si oui lequel ?) avec un système contextuel ?
janvier 06, 2010
Je n’utilise pas à l’heure actuelle d’éditeur spécifique…cependant je pense que ca serait pas mal pour la communauté d’avoir un plugin eclipse(aptana?) ou netbeans
un volontaire?
janvier 06, 2010
Zen-coding