hcalendar-authoring-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m ([fr:sync'd+typo])
m (racdelore)
Line 1: Line 1:
zeldronget
<h1>publication hCalendar</h1>
<h1>publication hCalendar</h1>
{{TOC-right}}
{{TOC-right}}
Cette page contient quelques trucs et instructions utiles pour savoir comment publier des événements [[hcalendar-fr|hCalendar]] soit à partir de rien, ou en ajoutant du balisage à un contenu existant.
Cette page contient quelques trucs et instructions utiles pour savoir comment publier des événements [[hcalendar-fr|hCalendar]] soit à partir de rien, ou en ajoutant du balisage à un contenu existant.


'''But :''' Le but de ce document est de fournir quelques instructions intuitives qui devraient faire qu'il soit aussi facile et aussi rapide que possible pour n'importe quel auteur web de créer des événements hCalendar ou d'ajouter du balisage hCalendar à un contenu existant.
'''But :''' Le but de ce document est de fournir quelques instructions intuitives qui devraient faire qu'il soit aussi facile et aussi rapide que possible pour n'importe quel auteur web de créer des événements hCalendar ou d'ajouter du balisage hCalendar à un contenu existant.


'''Audience :''' auteurs web et designers. Ce document est écrit pour une consommation et une compréhension facile par n'importe quel designer web qui connaît au moins assez (X)HTML et CSS pour utiliser les noms de classe HTML sur les éléments et écire des sélecteurs CSS qui appliquent des styles à ces noms de classes. SVP aidez à clarifier / simplifier ce document.
'''Audience :''' auteurs web et designers. Ce document est écrit pour une consommation et une compréhension facile par n'importe quel designer web qui connaît au moins assez (X)HTML et CSS pour utiliser les noms de classe HTML sur les éléments et écire des sélecteurs CSS qui appliquent des styles à ces noms de classes. SVP aidez à clarifier / simplifier ce document.




'''Auteur(s) :''' Tantek Çelik
'''Auteur(s) :''' Tantek Çelik


(traduction [[Christophe Ducamp]])
(traduction [[Christophe Ducamp]])


== Créer des nouveaux évènéments hCalendar ==
== Créer des nouveaux évènéments hCalendar ==
Commencez avec le [http://microformats.org/code/hcalendar/creator hCalendar creator], et pour les champs additionnels (par ex. contact, participants, etc.), voir la page [[hcalendar-examples-fr|exemples hCalendar]] tout comme le reste de cette page.
Commencez avec le [http://microformats.org/code/hcalendar/creator hCalendar creator], et pour les champs additionnels (par ex. contact, participants, etc.), voir la page [[hcalendar-examples-fr|exemples hCalendar]] tout comme le reste de cette page.


== Ajouter du balisage hCalendar à du contenu existant ==
== Ajouter du balisage hCalendar à du contenu existant ==


=== Changements minimaux de syntaxe ===
=== Changements minimaux de syntaxe ===
Le chose importante à garder en tête au moment d'ajouter des microformats à du contenu existant, est le fait que les microformats sont conçus de telle manière qu'ils puissent être ajoutés avec des changements minimaux (presque toujours aucun) à la présentation existante de la page. De ce fait, gardez ça en tête : changez aussi peu de balisage que possible. Si vous voulez aussi préparer différentes pages pour qu'elles soient valides XHTML, c'est un très joli but et hautement encouragé.
Le chose importante à garder en tête au moment d'ajouter des microformats à du contenu existant, est le fait que les microformats sont conçus de telle manière qu'ils puissent être ajoutés avec des changements minimaux (presque toujours aucun) à la présentation existante de la page. De ce fait, gardez ça en tête : changez aussi peu de balisage que possible. Si vous voulez aussi préparer différentes pages pour qu'elles soient valides XHTML, c'est un très joli but et hautement encouragé.


=== Trouver les Evénements ===
=== Trouver les Evénements ===
Commencez par regarder toutes les mentions des événements sur une page, telle qu'une liste d'"Evénements à Venir" ou d'"Evènements Récents". Ce sont tous des 'events' potentiels hCalendar. Même plus s'ils sont liés vers leurs URLs respectives (par ex. par page évènement avec plus de détails).
Commencez par regarder toutes les mentions des événements sur une page, telle qu'une liste d'"Evénements à Venir" ou d'"Evènements Récents". Ce sont tous des 'events' potentiels hCalendar. Même plus s'ils sont liés vers leurs URLs respectives (par ex. par page évènement avec plus de détails).


Si un évènement est mentionné plusieurs fois sur une page, considérez de baliser la mention qui est la plus pertinente, détaillée, définitive, ou autrement complète comme un évènement hCalendar. Idéalement, vous pourriez vouloir baliser ''toutes'' les instances d'un événement avec hCalendar, mais à ce stade, faites simple et balisez l'instance la plus représentative. (Peut-être que l'instance la plus "définitive", qui pourrait être ensuite balisée avec un élément <code><nowiki><dfn></nowiki></code> autour du 'summary/title' de l'évènement pour le bien d'un XHTML sémantique additionnel.)
Si un évènement est mentionné plusieurs fois sur une page, considérez de baliser la mention qui est la plus pertinente, détaillée, définitive, ou autrement complète comme un évènement hCalendar. Idéalement, vous pourriez vouloir baliser ''toutes'' les instances d'un événement avec hCalendar, mais à ce stade, faites simple et balisez l'instance la plus représentative. (Peut-être que l'instance la plus "définitive", qui pourrait être ensuite balisée avec un élément <code><nowiki><dfn></nowiki></code> autour du 'summary/title' de l'évènement pour le bien d'un XHTML sémantique additionnel.)


=== Déterminer l'Elément enveloppant pour Chacun ===
=== Déterminer l'Elément enveloppant pour Chacun ===
Pour chaque évènement que vous voulez ajouter à hCalendar, trouvez le plus petit élément qui contient toute l'information à propos de cet événement, sans chevauchement avec tout autre événement sur la page.
Pour chaque évènement que vous voulez ajouter à hCalendar, trouvez le plus petit élément qui contient toute l'information à propos de cet événement, sans chevauchement avec tout autre événement sur la page.


Ajoutez le nom de classe "<code>vevent</code>" à cet élément.
Ajoutez le nom de classe "<code>vevent</code>" à cet élément.


S'il n'existe pas un tel élément (peut-être que l'élément entourant le plus proche contient plus d'un évènement), alors ajoutez un <code><nowiki><span class="vevent">...</span></nowiki></code> ou  <code><nowiki><div class="vevent">...</div></nowiki></code> qui emballe l'information à propos de cet évènement et rien que cet évènement.
S'il n'existe pas un tel élément (peut-être que l'élément entourant le plus proche contient plus d'un évènement), alors ajoutez un <code><nowiki><span class="vevent">...</span></nowiki></code> ou  <code><nowiki><div class="vevent">...</div></nowiki></code> qui emballe l'information à propos de cet évènement et rien que cet évènement.


Le reste de la syntaxe pour cet 'event' hCalendar DOIT aller ''dans'' cet élément-avec le nom de classe "vevent".
Le reste de la syntaxe pour cet 'event' hCalendar DOIT aller ''dans'' cet élément-là avec le nom de classe "vevent".


Dans tous le cas, où ça dit d'ajouter un élément avec le nom de classe de "xyz", si vous pouvez trouver un élément existant qui entoure le contenu nécessaire, alors -utiliser cet-élément là et ajoutez-lui simplement le nom de classe "xyz" (en l'ajoutant à l'attribut de classe sur l'élément existant, ou en ajoutant un nouvel attribut de classe <code>class="xyz"</code> aux éléments sans attribut de classe).
Dans tous le cas, où ça dit d'ajouter un élément avec le nom de classe de "xyz", si vous pouvez trouver un élément existant qui entoure le contenu nécessaire, alors ré-utiliser cet-élément là et ajoutez-lui simplement le nom de classe "xyz" (en l'ajoutant à l'attribut de classe sur l'élément existant, ou en ajoutant un nouvel attribut de classe <code>class="xyz"</code> aux éléments sans attribut de classe).


Par exemple, en imaginant que vous ayez la syntaxe suivante :  
Par exemple, en imaginant que vous ayez la syntaxe suivante :  
Line 40: Line 41:
<pre><nowiki>
<pre><nowiki>
     <div class="someFoo">
     <div class="someFoo">
       <p> Ceci est mon merveilleux balisage, il contient quelque information d'événement nichée à l'intérieur</p>
       <p> Ceci est mon merveilleux balisage, il contient quelque information d'événement nichée à l'intérieur</p>
       <h6>Un Evènement Merveilleux</h6>
       <h6>Un Evènement Merveilleux</h6>
       <p> De la part des personnes qui vont apporté des Moments Géniaux et de l'Amusement,  
       <p> De la part des personnes qui vont apporté des Moments Géniaux et de l'Amusement,  
           voilà Quelque Evènement Merveilleux au Stade de Sport Local.  
           voilà Quelque Evènement Merveilleux au Stade de Sport Local.  
           Venez à <b>Une Heure Spécifiée</b>, et amusez-vous ! </p>
           Venez à <b>Une Heure Spécifiée</b>, et amusez-vous ! </p>
     </div>
     </div>
</nowiki></pre>
</nowiki></pre>


Si vous avez besoin d'ajouter un élément avec la classe de "vevent" autour du contenu de votre évènement, vous pourriez réutiliser l'élément div existant et y ajouter la classe "vevent" comme suit :  
Si vous avez besoin d'ajouter un élément avec la classe de "vevent" autour du contenu de votre évènement, vous pourriez réutiliser l'élément div existant et y ajouter la classe "vevent" comme suit :  
<pre><nowiki>
<pre><nowiki>
     <div class="quelqueFoo vevent">
     <div class="quelqueFoo vevent">
</nowiki></pre>
</nowiki></pre>
De la même manière, si vous décidez de ne pas réutiliser un conteneur existant, vous pouvez juste emballer le contenu autour d'un nouveau bloc :
De la même manière, si vous décidez de ne pas réutiliser un conteneur existant, vous pouvez juste emballer le contenu autour d'un nouveau bloc :
<pre><nowiki>
<pre><nowiki>
     <div class="quelqueFoo">
     <div class="quelqueFoo">
Line 64: Line 65:


=== L'Importance du Temps et du Sujet ===
=== L'Importance du Temps et du Sujet ===
Plusieurs propriétés sont requises dans hCalendar. Au minimum, un événement à besoin d'un "summary" (comme un titre) et "dtstart" (date et heure de démarrage), tout comme soit un "dtend" (date et heure de fin) ou une "duration" (durée). De ce fait, soyez sûr de baliser le nom/résumé/titre de l'événement avec le nom de classe "summary". Par ex. :  
Plusieurs propriétés sont requises dans hCalendar. Au minimum, un événement à besoin d'un "summary" (comme un titre) et "dtstart" (date et heure de démarrage), tout comme soit un "dtend" (date et heure de fin) ou une "duration" (durée). De ce fait, soyez sûr de baliser le nom/résumé/titre de l'événement avec le nom de classe "summary". Par ex. :  


<pre><nowiki>
<pre><nowiki>
<div class="vevent">
<div class="vevent">
  <span class="summary">Un Evènement A Part, New York City, NY</span>,
  <span class="summary">Un Evènement A Part, New York City, NY</span>,
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Cet évènement pourrait être présenté comme :  
Cet évènement pourrait être présenté comme :  


Un Evènement A Part, New York City, NY, <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
Un Evènement A Part, New York City, NY, <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>


Note : l'utilisation de l'attribut du titre de l'élément abbr pour baliser un "datetime" absolu lisible par une machine en plus du texte lisible par l'humain. Notez aussi que la date de fin lisible par une machine est le jour *d'après* la date spécifiée dans le contenu lisible par l'humain. La raison à cela est que hCalendar interprète encore une date de fin sans une heure comme un instant dans le temps, ce qui veut dire minuit, le démarrage absolu de ce jour, de ce fait finissant l'évènement le jour avant. Voir [[hcalendar-fr|hCalendar]] et [[hcalendar-example1-steps-fr|exemple de hCalendar étape par étape]] pour plus de détails sur l'utilisation de l'élément abbr de cette manière.
Note : l'utilisation de l'attribut du titre de l'élément abbr pour baliser un "datetime" absolu lisible par une machine en plus du texte lisible par l'humain. Notez aussi que la date de fin lisible par une machine est le jour *d'après* la date spécifiée dans le contenu lisible par l'humain. La raison à cela est que hCalendar interprète encore une date de fin sans une heure comme un instant dans le temps, ce qui veut dire minuit, le démarrage absolu de ce jour, de ce fait finissant l'évènement le jour avant. Voir [[hcalendar-fr|hCalendar]] et [[hcalendar-example1-steps-fr|exemple de hCalendar étape par étape]] pour plus de détails sur l'utilisation de l'élément abbr de cette manière.


=== Eliminer le Souligné Pointillé par Défaut ===
=== Eliminer le Souligné Pointillé par Défaut ===


Quelques navigateurs (Camino, Firefox, Mozilla) placent un <span style="border-bottom:dotted 1px">souligné pointillé ou une bordure</span> sur chaque <abbr title="abbreviation">abbr</abbr>.  Ceci est généralement un effet affreux et distrayant dans la plupart des designs propres modernes. De ce fait assurez-vous d'utiliser la règle suivante dans votre feuille de style pour éliminer cette présentation par défaut.
Quelques navigateurs (Camino, Firefox, Mozilla) placent un <span style="border-bottom:dotted 1px">souligné pointillé ou une bordure</span> sur chaque <abbr title="abbreviation">abbr</abbr>.  Ceci est généralement un effet affreux et distrayant dans la plupart des designs propres modernes. De ce fait assurez-vous d'utiliser la règle suivante dans votre feuille de style pour éliminer cette présentation par défaut.


<pre><nowiki>
<pre><nowiki>
Line 86: Line 87:
</nowiki></pre>
</nowiki></pre>


Dans l'exemple ci-dessus, ceci devrait avoir l'effet suivant (qui peut ne pas quelque différence pour quelques lecteurs) :  
Dans l'exemple ci-dessus, ceci devrait avoir l'effet suivant (qui peut ne pas quelque différence pour quelques lecteurs) :  


Un Evènement A Part, New York City, NY, <abbr style="border:0" class="dtstart" title="20060710">10</abbr>-<abbr style="border:0" class="dtend" title="20060712">11 juillet 2006</abbr>
Un Evènement A Part, New York City, NY, <abbr style="border:0" class="dtstart" title="20060710">10</abbr>-<abbr style="border:0" class="dtend" title="20060712">11 juillet 2006</abbr>


=== URLs représentatives ===
=== URLs représentatives ===
L'un des modèles les plus communs pour les évènements sur le web est de les lier vers leurs sites web préféré/qui font autorité.
L'un des modèles les plus communs pour les évènements sur le web est de les lier vers leurs sites web préféré/qui font autorité.


Les "Event Rolls" sont un bon exemple de cela (voir aussi [[xoxo-fr|XOXO]] pour une liste sémantique propre et un balisage de structure.)
Les "Event Rolls" sont un bon exemple de cela (voir aussi [[xoxo-fr|XOXO]] pour une liste sémantique propre et un balisage de structure.)


Parce l'attribut de classe prend un ensemble séparé de noms de classe, on peut souvent baliser l'URL sur le même élément, par ex. en remplaçant le premier <code><nowiki><span></nowiki></code> dans l'exemple au-dessus avec un hyperlien <code><nowiki><a href></nowiki></code> :
Parce l'attribut de classe prend un ensemble séparé de noms de classe, on peut souvent baliser l'URL sur le même élément, par ex. en remplaçant le premier <code><nowiki><span></nowiki></code> dans l'exemple au-dessus avec un hyperlien <code><nowiki><a href></nowiki></code> :


<pre><nowiki>
<pre><nowiki>
<div class="vevent">
<div class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènément A Part, New York City, NY</a>,
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènément A Part, New York City, NY</a>,
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Cet évènement pourrait être présenté comme :  
Cet évènement pourrait être présenté comme :  


[http://aneventapart.com/events/2006/nyc/ Un Evènement A Part, New York City, NY], <abbr style="border:0" class="dtstart" title="20060710">10</abbr>-<abbr style="border:0" class="dtend" title="20060712">11 juillet 2006</abbr>
[http://aneventapart.com/events/2006/nyc/ Un Evènement A Part, New York City, NY], <abbr style="border:0" class="dtstart" title="20060710">10</abbr>-<abbr style="border:0" class="dtend" title="20060712">11 juillet 2006</abbr>


=== Location Location Location ===
=== Location Location Location ===
Comme avec l'immobilier, l'emplacement d'un évènement est tout à fait pertinent, et important pour un balisage propre. Au minimum, identifiez l'information apparentée au lieu dans l'"event" et balisez-avec le nom de classe "location", par ex. en continuant avec les exemples suivants :  
Comme avec l'immobilier, l'emplacement d'un évènement est tout à fait pertinent, et important pour un balisage propre. Au minimum, identifiez l'information apparentée au lieu dans l'"event" et balisez-là avec le nom de classe "location", par ex. en continuant avec les exemples suivants :  


<pre><nowiki>
<pre><nowiki>
<div class="vevent">
<div class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part,  
   <span class="location">New York City, NY</span></a>,  
   <span class="location">New York City, NY</span></a>,  
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Ceci est bien, mais peut même être produit encore mieux avec l'addition du microformat [[adr-fr|adr]] pour identifier explicitement la ville et l'état :  
Ceci est bien, mais peut même être produit encore mieux avec l'addition du microformat [[adr-fr|adr]] pour identifier explicitement la ville et l'état :  


<pre><nowiki>
<pre><nowiki>
<div class="vevent">
<div class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part,  
   <span class="location adr"><span class="locality">New York City</span>, <span class="region">NY</span></span></a>,  
   <span class="location adr"><span class="locality">New York City</span>, <span class="region">NY</span></span></a>,  
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Même encore mieux, si l'endroit a un nom, tel qu'un commerce ou une société, transformer le lieu en une [[hcard-fr|hCard]] complète plutôt qu'un simple [[adr-fr|adr]] :
Même encore mieux, si l'endroit a un nom, tel qu'un commerce ou une société, transformer le lieu en une [[hcard-fr|hCard]] complète plutôt qu'un simple [[adr-fr|adr]] :


<pre><nowiki>
<pre><nowiki>
<div class="vevent">
<div class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part,  
   <span class="location vcard">
   <span class="location vcard">
   <span class="fn org">Scandinavia House</span>,
   <span class="fn org">Scandinavia House</span>,
Line 139: Line 140:


=== Plus de trucs et d'instructions ===
=== Plus de trucs et d'instructions ===
Sentez-vous libre d'ajouter plus de trucs que l'expérience vous a enseignée au moment de baliser les évènements avec hCalendar, même si tout ce que vous ajoutez n'est qu'une brève "catch phrase" qui vous revient en tête.
Sentez-vous libre d'ajouter plus de trucs que l'expérience vous a enseignée au moment de baliser les évènements avec hCalendar, même si tout ce que vous ajoutez n'est qu'une brève "catch phrase" qui vous revient en tête.


* Comment baliser le contact et l'organisateur
* Comment baliser le contact et l'organisateur
* Comment baliser les participants (y compris les conférenciers)
* Comment baliser les participants (y compris les conférenciers)
* ...
* ...



Revision as of 21:37, 19 December 2008

zeldronget

publication hCalendar

Cette page contient quelques trucs et instructions utiles pour savoir comment publier des événements hCalendar soit à partir de rien, ou en ajoutant du balisage à un contenu existant.

But : Le but de ce document est de fournir quelques instructions intuitives qui devraient faire qu'il soit aussi facile et aussi rapide que possible pour n'importe quel auteur web de créer des événements hCalendar ou d'ajouter du balisage hCalendar à un contenu existant.

Audience : auteurs web et designers. Ce document est écrit pour une consommation et une compréhension facile par n'importe quel designer web qui connaît au moins assez (X)HTML et CSS pour utiliser les noms de classe HTML sur les éléments et écire des sélecteurs CSS qui appliquent des styles à ces noms de classes. SVP aidez à clarifier / simplifier ce document.


Auteur(s) : Tantek Çelik

(traduction Christophe Ducamp)

Créer des nouveaux évènéments hCalendar

Commencez avec le hCalendar creator, et pour les champs additionnels (par ex. contact, participants, etc.), voir la page exemples hCalendar tout comme le reste de cette page.

Ajouter du balisage hCalendar à du contenu existant

Changements minimaux de syntaxe

Le chose importante à garder en tête au moment d'ajouter des microformats à du contenu existant, est le fait que les microformats sont conçus de telle manière qu'ils puissent être ajoutés avec des changements minimaux (presque toujours aucun) à la présentation existante de la page. De ce fait, gardez ça en tête : changez aussi peu de balisage que possible. Si vous voulez aussi préparer différentes pages pour qu'elles soient valides XHTML, c'est un très joli but et hautement encouragé.

Trouver les Evénements

Commencez par regarder toutes les mentions des événements sur une page, telle qu'une liste d'"Evénements à Venir" ou d'"Evènements Récents". Ce sont tous des 'events' potentiels hCalendar. Même plus s'ils sont liés vers leurs URLs respectives (par ex. par page évènement avec plus de détails).

Si un évènement est mentionné plusieurs fois sur une page, considérez de baliser la mention qui est la plus pertinente, détaillée, définitive, ou autrement complète comme un évènement hCalendar. Idéalement, vous pourriez vouloir baliser toutes les instances d'un événement avec hCalendar, mais à ce stade, faites simple et balisez l'instance la plus représentative. (Peut-être que l'instance la plus "définitive", qui pourrait être ensuite balisée avec un élément <dfn> autour du 'summary/title' de l'évènement pour le bien d'un XHTML sémantique additionnel.)

Déterminer l'Elément enveloppant pour Chacun

Pour chaque évènement que vous voulez ajouter à hCalendar, trouvez le plus petit élément qui contient toute l'information à propos de cet événement, sans chevauchement avec tout autre événement sur la page.

Ajoutez le nom de classe "vevent" à cet élément.

S'il n'existe pas un tel élément (peut-être que l'élément entourant le plus proche contient plus d'un évènement), alors ajoutez un <span class="vevent">...</span> ou <div class="vevent">...</div> qui emballe l'information à propos de cet évènement et rien que cet évènement.

Le reste de la syntaxe pour cet 'event' hCalendar DOIT aller dans cet élément-là avec le nom de classe "vevent".

Dans tous le cas, où ça dit d'ajouter un élément avec le nom de classe de "xyz", si vous pouvez trouver un élément existant qui entoure le contenu nécessaire, alors ré-utiliser cet-élément là et ajoutez-lui simplement le nom de classe "xyz" (en l'ajoutant à l'attribut de classe sur l'élément existant, ou en ajoutant un nouvel attribut de classe class="xyz" aux éléments sans attribut de classe).

Par exemple, en imaginant que vous ayez la syntaxe suivante :

    <div class="someFoo">
       <p> Ceci est mon merveilleux balisage, il contient quelque information d'événement nichée à l'intérieur</p>
       <h6>Un Evènement Merveilleux</h6>
       <p> De la part des personnes qui vont apporté des Moments Géniaux et de l'Amusement, 
           voilà Quelque Evènement Merveilleux au Stade de Sport Local. 
           Venez à <b>Une Heure Spécifiée</b>, et amusez-vous ! </p>
    </div>

Si vous avez besoin d'ajouter un élément avec la classe de "vevent" autour du contenu de votre évènement, vous pourriez réutiliser l'élément div existant et y ajouter la classe "vevent" comme suit :

    <div class="quelqueFoo vevent">

De la même manière, si vous décidez de ne pas réutiliser un conteneur existant, vous pouvez juste emballer le contenu autour d'un nouveau bloc :

    <div class="quelqueFoo">
      <div class="vevent">
         <p> Ceci est mon merveilleux...
         ...
         ... et amusez-vous ! </p>
      </div>
    </div>

L'Importance du Temps et du Sujet

Plusieurs propriétés sont requises dans hCalendar. Au minimum, un événement à besoin d'un "summary" (comme un titre) et "dtstart" (date et heure de démarrage), tout comme soit un "dtend" (date et heure de fin) ou une "duration" (durée). De ce fait, soyez sûr de baliser le nom/résumé/titre de l'événement avec le nom de classe "summary". Par ex. :

<div class="vevent">
 <span class="summary">Un Evènement A Part, New York City, NY</span>,
 <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div>

Cet évènement pourrait être présenté comme :

Un Evènement A Part, New York City, NY, 10-11 juillet 2006

Note : l'utilisation de l'attribut du titre de l'élément abbr pour baliser un "datetime" absolu lisible par une machine en plus du texte lisible par l'humain. Notez aussi que la date de fin lisible par une machine est le jour *d'après* la date spécifiée dans le contenu lisible par l'humain. La raison à cela est que hCalendar interprète encore une date de fin sans une heure comme un instant dans le temps, ce qui veut dire minuit, le démarrage absolu de ce jour, de ce fait finissant l'évènement le jour avant. Voir hCalendar et exemple de hCalendar étape par étape pour plus de détails sur l'utilisation de l'élément abbr de cette manière.

Eliminer le Souligné Pointillé par Défaut

Quelques navigateurs (Camino, Firefox, Mozilla) placent un souligné pointillé ou une bordure sur chaque abbr. Ceci est généralement un effet affreux et distrayant dans la plupart des designs propres modernes. De ce fait assurez-vous d'utiliser la règle suivante dans votre feuille de style pour éliminer cette présentation par défaut.

abbr{border:0}

Dans l'exemple ci-dessus, ceci devrait avoir l'effet suivant (qui peut ne pas quelque différence pour quelques lecteurs) :

Un Evènement A Part, New York City, NY, 10-11 juillet 2006

URLs représentatives

L'un des modèles les plus communs pour les évènements sur le web est de les lier vers leurs sites web préféré/qui font autorité.

Les "Event Rolls" sont un bon exemple de cela (voir aussi XOXO pour une liste sémantique propre et un balisage de structure.)

Parce l'attribut de classe prend un ensemble séparé de noms de classe, on peut souvent baliser l'URL sur le même élément, par ex. en remplaçant le premier <span> dans l'exemple au-dessus avec un hyperlien <a href> :

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènément A Part, New York City, NY</a>,
 <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div>

Cet évènement pourrait être présenté comme :

Un Evènement A Part, New York City, NY, 10-11 juillet 2006

Location Location Location

Comme avec l'immobilier, l'emplacement d'un évènement est tout à fait pertinent, et important pour un balisage propre. Au minimum, identifiez l'information apparentée au lieu dans l'"event" et balisez-là avec le nom de classe "location", par ex. en continuant avec les exemples suivants :

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part, 
  <span class="location">New York City, NY</span></a>, 
 <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div>

Ceci est bien, mais peut même être produit encore mieux avec l'addition du microformat adr pour identifier explicitement la ville et l'état :

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part, 
  <span class="location adr"><span class="locality">New York City</span>, <span class="region">NY</span></span></a>, 
 <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div>

Même encore mieux, si l'endroit a un nom, tel qu'un commerce ou une société, transformer le lieu en une hCard complète plutôt qu'un simple adr :

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Evènement A Part, 
  <span class="location vcard">
   <span class="fn org">Scandinavia House</span>,
   <span class="adr"><span class="locality">New York City</span>, <span class="region">NY</span></span>
  </span></a>,
 <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="20060712">11 juillet 2006</abbr>
</div>

Plus de trucs et d'instructions

Sentez-vous libre d'ajouter plus de trucs que l'expérience vous a enseignée au moment de baliser les évènements avec hCalendar, même si tout ce que vous ajoutez n'est qu'une brève "catch phrase" qui vous revient en tête.

  • Comment baliser le contact et l'organisateur
  • Comment baliser les participants (y compris les conférenciers)
  • ...


Pages en rapport

Cette spécification est un chantier en cours. Au fur et à mesure que les aspects additionnels sont discutés, compris et écrits, ils seront ajoutés. Ces idées et questions sont maintenues sur des pages séparées.