hcalendar-authoring-fr
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 en cours 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 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 <dfn> 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
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="someFoo 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="someFoo">
<div class="vevent">
<p> Ceci est mon merveilleux...
...
... et amusez-vous ! </p>
</div>
</div>
L'Importance du Temps et du Sujet
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.
<div class="vevent"> <span class="summary">An Event Apart, New York City, NY</span>, <abbr class="dtstart" title="20060710">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr> </div>
This event might be presented like:
An Event Apart, New York City, NY, July 10-11th, 2006
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 and hcalendar-example1-steps for more details on the use of the abbr element in this fashion.
Eliminer le Souligné Pointillé par Défaut
Some browsers (Camino, Firefox, Mozilla) put a dotted underline or border on each 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.
abbr{border:0}
In the above example, this would have the following effect (which may not look any different for some readers):
An Event Apart, New York City, NY, July 10-11th, 2006
URLs représentatives
One of the most common patterns for events in web content is to link them to their definitive/preferred web site.
"Event Rolls" are a good example of this (see also 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 <span> in the above example with an <a href> hyperlink:
<div class="vevent"> <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, New York City, NY</a>, <abbr class="dtstart" title="20060710">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr> </div>
This event might be presented like:
An Event Apart, New York City, NY, July 10-11th, 2006
Location Location Location
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:
<div class="vevent"> <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, <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> </div>
This is good, but can be made even better with the addition of the adr microformat to explicitly identify the city and state:
<div class="vevent"> <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, <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> </div>
Even better, if the location has a name, such as a business or organization, make the location into complete hCard rather than just an adr:
<div class="vevent"> <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, <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">July 10</abbr>-<abbr class="dtend" title="20060712">11th, 2006</abbr> </div>
Plus de trucs et d'instructions
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.
- How to mark up the contact and organizer
- How to mark up attendees (including speakers)
- ...