hcalendar-authoring-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
([fr: structure translated. to be continued])
 
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(13 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<h1>publication hCalendar</h1>
{{DISPLAYTITLE:publication hCalendar}}


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.
Line 5: Line 5:
'''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 écrire 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 en cours [[Christophe Ducamp]])
(traduction [[Christophe Ducamp]])
 
__TOC__
 
== Créer des nouveaux événéments hCalendar ==


== Créer des nouveaux événements 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 ===
La 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 peuvent ê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 Événements ===
 
Commencez par regarder toutes les mentions des événements sur une page, telle qu'une liste d'"Evénements à Venir" ou d'"Évènements Récents". Ce sont tous des 'events' potentiels hCalendar. Même plus s'ils sont liés vers leurs URLs respectives (par ex. les pages d'un événement unique avec plus de détails).
=== Trouver les Events ===
 
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 repsectifs (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énements 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 entourant pour Chacun ===
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.)


For each event that you want to add hCalendar, find the smallest element that contains all the info about that event, without overlapping with any other event on the page.
=== Déterminer l'Élé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.


Add the class name "<code>vevent</code>" to that element.
Ajoutez le nom de classe "<code>vevent</code>" à cet élément.


If there is no such element (perhaps the nearest enclosing element contains more than one event), then add a <code><nowiki><span class="vevent">...</span></nowiki></code> or <code><nowiki><div class="vevent">...</div></nowiki></code> that wraps the info about about that event and just that event.
Si un tel élément n'existe pas (peut-être que l'élément enveloppant 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 enveloppe l'information à propos de cet évènement et rien que cet évènement.


The rest of the markup for this hCalendar event MUST go ''inside'' that element with the class name "vevent".
Le reste de la syntaxe pour cet 'event' hCalendar DOIT aller ''dans'' cet élément-là avec le nom de classe "vevent".


In all cases, where it says to add an element with class name of "xyz", if you can find an existing element that precisely surrounds the necessary content, then re-use that element and simply add the class name "xyz" to it (by adding it to the class attribute on the existing element, or by adding a new class attribute <code>class="xyz"</code> to elements without a class attribute).
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é-utilisez 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).


For instance, assuming you have the following markup:  
Par exemple, en imaginant que vous ayez la syntaxe suivante :  


<pre><nowiki>
<pre><nowiki>
     <div class="someFoo">
     <div class="someFoo">
       <p> This is my wonderful markup, it contains some event information inside of it</p>
       <p> Ceci est mon merveilleux balisage, il contient quelque information d'événement nichée à l'intérieur</p>
       <h6>Some Wonderful Event</h6>
       <h6>Un Evènement Merveilleux</h6>
       <p> From the people who brought you Great Times and Fun Lovin,  
       <p> De la part des personnes qui vont apporté des Moments Géniaux et de l'Amusement,  
           comes the Some Wonderful Event at the Local Sports Stadium.
           voilà Quelque Evènement Merveilleux au Stade de Sport Local.  
           Come at <b>A Specified Time</b>, and enjoy yourself! </p>
           Venez à <b>Une Heure Spécifiée</b>, et amusez-vous ! </p>
     </div>
     </div>
</nowiki></pre>
</nowiki></pre>


If you need to add an element with the class of "vevent" around your event content, you could re-use the existing div element, and add the class "vevent" to it like so:
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="someFoo vevent">
     <div class="quelqueFoo vevent">
</nowiki></pre>
</nowiki></pre>
Similarly, if you decide not to re-purpose an existing container, you can just wrap the content around a new block:
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="someFoo">
     <div class="quelqueFoo">
       <div class="vevent">
       <div class="vevent">
         <p> This is my wond...
         <p> Ceci est mon merveilleux...
         ...
         ...
         ... and enjoy yourself! </p>
         ... et amusez-vous ! </p>
       </div>
       </div>
     </div>
     </div>
Line 71: Line 64:


=== 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. :
Several properties are required in hCalendar. At a minimum, an event needs a "summary" (AKA title) and "dtstart" (starting date time), as well as either a "dtend" (ending date time) or "duration". Thus be sure to mark up the name/summary/title of the event with the class name "summary". E.g.  


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


This event might be presented like:
Cet évènement pourrait être présenté comme :  
 
Un Évènement A Part, New York City, NY, <abbr class="dtstart" title="2006-07-10">10</abbr>-<abbr class="dtend" title="2006-07-11">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.
 
==== Separate dates and times ====
Souvent les pages affichent la date d'un événement et ses horaires séparément, peut-être pour des raisons de style ou mise en forme, par exemple le [http://sphcm.washington.edu/cal/cal.asp Calendrier des événement SPHCM] place la date dans un titre stylisé (devrait probablement être un <code>h3</code>), et les horaires comme suit :
 
<pre><nowiki>
<div class="eventdate">October 2</div>
<div class="eventtime">3:30 pm - 4:50 pm</div>
</nowiki></pre>
 
Dans de tels cas, plutôt que d'avoir à refaire le marquage (qui peut être servi à d'autre fins) pour combiner la date et l'heure dans un seul élément unique, utilisez une div enveloppante pour marquer la date et l'heure de démarrage avec <code>dtstart</code> et un span juste pour l'horaire de fin avec <code>dtend</code>, par ex.: (espace blanc ajouté pour la lisibilité)
 
<pre><nowiki>
<div class="dtstart">
<div class="eventdate"><abbr class="value" title="2007-10-02">2 octobre</abbr></div>
<div class="eventtime">
  <span class="value">15h30</span> -
  <span class="dtend">16h50</span>
</div>
</div>
</nowiki></pre>


An Event Apart, New York City, NY, <abbr class="dtstart" title="20060710">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr>
Cet exemple utilise la technique du [[value-class-pattern-fr|modèle de classe value]], spécifiquement à la fois les techniques de [[value-class-pattern-fr#Valeurs_Date_et_heure|séparation de date et de l'horaire]] et de la [[http://microformats.org/wiki/index.php?title=value-class-pattern-fr#hCalendar_date_dtend_implicite|date dtend implicite]].


Note: the use of the abbr element's title attribute to markup a machine readable absolute datetime in addition to the human readable text.  Note also that the machine readable ending date is the day *after* the date specified in the human readable content.  The reason for this is that hCalendar still interprets an ending date without a time as an instant in time, that is midnight, the absolute beginning of that day, thus ending the event the day before.  See [[hcalendar|hCalendar]] and [[hcalendar-example1-steps]] for more details on the use of the abbr element in this fashion.


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


Some browsers (Camino, Firefox, Mozilla) put a <span style="border-bottom:dotted 1px">dotted underline or border</span> on each <abbr title="abbreviation">abbr</abbr>. This is typically an ugly effect and distracting in most clean modern web designs.  Thus be sure to use the following rule in your style sheet to eliminate this default presentation.
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>. Vous pouvez utiliser la règle suivante dans votre feuille de style pour éliminer cette présentation par défaut.


<pre><nowiki>
<pre><nowiki>
abbr{border:0}
.vevent abbr{border:0}
</nowiki></pre>
</nowiki></pre>


In the above example, this would have the following effect (which may not look any different for some readers):
Dans l'exemple ci-dessus "Un Événement A Part", ceci devrait avoir l'effet suivant (qui peut ne pas quelque différence pour quelques lecteurs) :  


An Event Apart, New York City, NY, <abbr style="border:0" class="dtstart" title="20060710">July 10</abbr>-<abbr style="border:0" class="dtend" title="20060712">11th, 2006</abbr>
Un Évènement A Part, New York City, NY, <abbr style="border:0" class="dtstart" title="2006-07-10">10</abbr>-<abbr style="border:0" class="dtend" title="2006-07-11">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és/qui font autorité.


One of the most common patterns for events in web content is to link them to their definitive/preferred web site.
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.)
 
"Event Rolls" are a good example of this (see also [[xoxo|XOXO]] for proper semantic list and outline markup).


Since the class attribute takes a space separated set of class names, one can often markup the URL on the same element as the name, e.g. by replacing the first <code><nowiki><span></nowiki></code> in the above example with an <code><nowiki><a href></nowiki></code> hyperlink:
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">An Event Apart, New York City, NY</a>,
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Évènément A Part, New York City, NY</a>,
  <abbr class="dtstart" title="20060710">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr>
  <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="2006-07-11">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


This event might be presented like:
Cet évènement pourrait être présenté comme :  


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


=== Location Location Location ===
=== Location Location Location ===
 
Comme dans 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-la avec le nom de classe "location", par ex. en continuant avec les exemples suivants :  
As with real estate, the location of an event is quite relevant, and important to markup properly. At a minimum, identify the location related information in the event and mark it up with the class name of "locatioin", e.g. continuing with the above example:


<pre><nowiki>
<pre><nowiki>
<div class="vevent">
<div class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Évè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">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr>
  <abbr class="dtstart" title="2006-07-10">10</abbr>-<abbr class="dtend" title="2006-07-11">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


This is good, but can be made even better with the addition of the [[adr]] microformat to explicitly identify the city and state:
Ceci est bien, mais peut même être produit encore mieux avec l'ajout 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">An Event Apart,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Évè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">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr>
  <abbr class="dtstart" title="2006-07-10">10</abbr>-<abbr class="dtend" title="20060711">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Even better, if the location has a name, such as a business or organization, make the location into complete [[hcard|hCard]] rather than just an [[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">An Event Apart,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">Un Évè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>,
   <span class="adr"><span class="locality">New York City</span>, <span class="region">NY</span></span>
   <span class="adr"><span class="locality">New York City</span>, <span class="region">NY</span></span>
   </span></a>,
   </span></a>,
  <abbr class="dtstart" title="20060710">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr>
  <abbr class="dtstart" title="2006-07-10">10</abbr>-<abbr class="dtend" title="2006-07-11">11 juillet 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


=== 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.
* Comment baliser le contact et l'organisateur
* Comment baliser les participants (y compris les conférenciers)
* ...
== Ajouter un lien d'abonnement à des événements ==
Quand vous mettez à jour vos événements pour y inclure un marquage hCalendar, vous pouvez aussi y inclure des liens comme "Ajouter les Événéments à votre Agenda" et/ou "Abonnez-vous aux Événements" pour faciliter le travail de vos utilisateurs.
Voici quelques exemples de tels liens :
<pre><nowiki>
<a href="http://h2vx.com/ics/http://microformats.org/wiki/events">
Ajouter les Événéments à votre Agenda
</a>
</nowiki></pre>
<pre><nowiki>
<a href="webcal://h2vx.com/ics/http://microformats.org/wiki/events">
Abonnez-vous aux Événements
</a>
</nowiki></pre>


Feel free to add more tips that experience has taught you while marking up events with hCalendar, even if all you add is a brief catch phrase that reminds you.
Substituez simplement le lien vers vos événements hCalendar pour l'URL http://microformats.org/wiki/events URL ci-dessus.


* How to mark up the contact and organizer
Si vous voulez, vous pouvez aussi utiliser le service X2V hébergé de Brian Suda ou même télécharger et installer vous-même le XSLT X2V et le faire fonctionner sur votre propre serveur au lieu d'utiliser un service de conversion en ligne hCalendar vers iCalendar (.ics).
* How to mark up attendees (including speakers)
* ...


=== Voir aussi ===


* [[hcalendar-fr|hCalendar]]
== Pages en rapport ==
* [[hcalendar-profile-fr|profil hCalendar]]
{{hcalendar-related-pages-fr}}
* [[hcalendar-examples-fr|exemples hCalendar]]
* [[hcalendar-brainstorming]]
* [[hcard-authoring-fr]]
* [[hcard-fr|hCard]]

Latest revision as of 16:24, 18 July 2020


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 écrire 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énements 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

La 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 peuvent ê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 Événements

Commencez par regarder toutes les mentions des événements sur une page, telle qu'une liste d'"Evénements à Venir" ou d'"Évènements Récents". Ce sont tous des 'events' potentiels hCalendar. Même plus s'ils sont liés vers leurs URLs respectives (par ex. les pages d'un événement unique 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'Élé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.

Si un tel élément n'existe pas (peut-être que l'élément enveloppant le plus proche contient plus d'un évènement), alors ajoutez un <span class="vevent">...</span> ou <div class="vevent">...</div> qui enveloppe 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é-utilisez 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="2006-07-10">10</abbr>-<abbr class="dtend" title="2006-07-11">11 juillet 2006</abbr>
</div>

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

Un Évè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.

Separate dates and times

Souvent les pages affichent la date d'un événement et ses horaires séparément, peut-être pour des raisons de style ou mise en forme, par exemple le Calendrier des événement SPHCM place la date dans un titre stylisé (devrait probablement être un h3), et les horaires comme suit : 

<div class="eventdate">October 2</div>
<div class="eventtime">3:30 pm - 4:50 pm</div>

Dans de tels cas, plutôt que d'avoir à refaire le marquage (qui peut être servi à d'autre fins) pour combiner la date et l'heure dans un seul élément unique, utilisez une div enveloppante pour marquer la date et l'heure de démarrage avec dtstart et un span juste pour l'horaire de fin avec dtend, par ex.: (espace blanc ajouté pour la lisibilité) 

<div class="dtstart">
 <div class="eventdate"><abbr class="value" title="2007-10-02">2 octobre</abbr></div>
 <div class="eventtime">
  <span class="value">15h30</span> - 
  <span class="dtend">16h50</span>
 </div>
</div>

Cet exemple utilise la technique du modèle de classe value, spécifiquement à la fois les techniques de séparation de date et de l'horaire et de la [dtend implicite].


Éliminer le Souligné Pointillé par Défaut

Quelques navigateurs (Camino, Firefox, Mozilla) placent un souligné pointillé ou une bordure sur chaque abbr. Vous pouvez utiliser la règle suivante dans votre feuille de style pour éliminer cette présentation par défaut. 

.vevent abbr{border:0}

Dans l'exemple ci-dessus "Un Événement A Part", ceci devrait avoir l'effet suivant (qui peut ne pas quelque différence pour quelques lecteurs) :

Un Évè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és/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 Évènément A Part, New York City, NY</a>,
 <abbr class="dtstart" title="20060710">10</abbr>-<abbr class="dtend" title="2006-07-11">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 dans 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-la 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 Évènement A Part, 
  <span class="location">New York City, NY</span></a>, 
 <abbr class="dtstart" title="2006-07-10">10</abbr>-<abbr class="dtend" title="2006-07-11">11 juillet 2006</abbr>
</div>

Ceci est bien, mais peut même être produit encore mieux avec l'ajout 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 Évè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="2006-07-10">10</abbr>-<abbr class="dtend" title="20060711">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 Évè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="2006-07-10">10</abbr>-<abbr class="dtend" title="2006-07-11">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)
  • ...


Ajouter un lien d'abonnement à des événements

Quand vous mettez à jour vos événements pour y inclure un marquage hCalendar, vous pouvez aussi y inclure des liens comme "Ajouter les Événéments à votre Agenda" et/ou "Abonnez-vous aux Événements" pour faciliter le travail de vos utilisateurs.

Voici quelques exemples de tels liens : 

<a href="http://h2vx.com/ics/http://microformats.org/wiki/events">
Ajouter les Événéments à votre Agenda
</a>

<a href="webcal://h2vx.com/ics/http://microformats.org/wiki/events">
Abonnez-vous aux Événements
</a>

Substituez simplement le lien vers vos événements hCalendar pour l'URL http://microformats.org/wiki/events URL ci-dessus.

Si vous voulez, vous pouvez aussi utiliser le service X2V hébergé de Brian Suda ou même télécharger et installer vous-même le XSLT X2V et le faire fonctionner sur votre propre serveur au lieu d'utiliser un service de conversion en ligne hCalendar vers iCalendar (.ics).


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.

Retrieved from "http://microformats.org/wiki/index.php?title=hcalendar-authoring-fr&oldid=69803"