Microformats Wiki - User contributions [en]

hcard

2011-10-06T12:37:50Z

Xadmin: /* Translations */

<entry-title>hCard 1.0</entry-title>
<span class="vcard"><span class="fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="role">Editor</span>, <span class="role">Author</span>)</span>, <span class="vcard"><span class="fn">[[User:Brian|Brian Suda]]</span> (<span class="role">Author</span>)</span>
----
<dfn style="font-style:normal;font-weight:bold">hCard</dfn> is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard ([[rfc-2426|RFC2426]]) properties and values in [[semantic-xhtml|semantic HTML or XHTML]]. hCard is one of several open [[microformats|microformat]] standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.

[[hcard#Copyright|Copyright]] and [[hcard#Patents|patents]] statements apply. See [[hcard#Inspiration_and_Acknowledgments|acknowledgments]].

== Example ==
hCards are most often used to represent people:
<source lang=html4strict>
<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
</div>
</source>
and organizations:
<source lang=html4strict>
<div class="vcard">
<a class="url fn org" href="http://microformats.org/">microformats.org</a>
</div>
</source>

The class '''<code>vcard</code>''' is a ''[[hcard#Root_Class_Name|root class name]]'' that indicates the presence of an hCard. The classes '''<code>url</code>''', '''<code>fn</code>''', and '''<code>org</code>''' are ''properties'' that indicate aspects of the hCard. See the [[hcard#Property_List|list of properties]] for more.

'''Want to get started with writing an [[hcard|hCard]]?''' Use the [http://microformats.org/code/hcard/creator hCard creator] to write up some contact information and publish it, or follow the [[hcard-authoring|hCard authoring tips]] to add hCard markup to your current contact page.

== Status ==
hCard 1.0 is a microformats.org specification. Public discussion on hCard takes place on [[hcard-feedback]], the #microformats [[irc]] channel on irc.freenode.net, and [http://microformats.org/discuss/mail/microformats-discuss/ microformats-discuss mailing list].

=== Available languages ===
The English version of this specification is the only normative version. For translations of this document see the [[#translations]] section.

=== Errata and Updates ===
Known errors and issues in this specification are corrected in [[hcard-issues-resolved|resolved]] and [[hcard-issues-closed|closed]] issues. Please check there before reporting [[hcard-issues|issues]].

The hCard 1.0.1 update is currently under development and incorporates known errata corrections as well as the [[value-class-pattern]].

== Background ==
The vCard standard ([[rfc-2426|RFC2426]]), has been broadly interoperably implemented (e.g. Apple's "Address Book" application built into MacOSX).

In addition, many bloggers identify themselves by name and discuss their friends and family. With just a tad bit of structure, bloggers can discuss people in their blog(s) in such a way that spiders and other aggregators can retrieve this information, automatically convert them to vCards, and use them in any vCard application or service.

This specification introduces the '''hCard''' format, which uses a 1:1 representation of the properties and values of the aforementioned vCard standard, in semantic HTML. Bloggers can both embed hCards directly in their web pages, and style them with CSS to make them appear as desired. In addition, hCard enables applications to retrieve information directly from web pages without having to reference a separate file.

Use the [http://microformats.org/code/hcard/creator hCard creator] and copy the HTML code it generates to your blog or website to publish your contact info.

== Conformance ==
{{rfc-2119-intro}}

== Format ==
=== In General ===
The vCard standard ([[rfc-2426|RFC2426]]) forms the basis of hCard.

The basic format of hCard is to use vCard object/property names in lower-case for class names, and to map the nesting of vCard objects directly into nested HTML elements.

=== Root Class Name ===
The root class name for an hCard is "vcard". An element with a class name of "vcard" is itself called an ''hCard''.

=== Properties and Sub-properties ===
The properties of an hCard are represented by elements inside the hCard. Elements with class names of the listed properties represent the values of those properties. Some properties have sub-properties, and those are represented by elements inside the elements for properties.

=== Property List ===
hCard properties (sub-properties in parentheses like this)

'''Required:'''
* '''fn'''
* <span id="property-list-n">'''n'''<sup style="font-size:smaller">[[#note1|1]]</sup></span>
** family-name
** given-name
** additional-name
** honorific-prefix
** honorific-suffix
Optional:
* [[adr]]
** post-office-box
** extended-address
** street-address
** locality
** region
** postal-code
** country-name
** type
** value
* agent
* bday
* category
* class
* email (type, value)
* geo
** latitude
** longitude
* key
* label
* logo
* mailer
* nickname
* note
* org (organization-name, organization-unit)
* photo
* rev
* role
* sort-string
* sound
* <span id="property-list-tel">tel<sup style="font-size:smaller">[[#note2|2]]</sup> (type, value)</span>
* title
* tz
* uid
* url

=== Property Notes ===
<span id="note1">[[#property-list-n|1. ^]]</span>: The 'n' property is {{optional}} if any [[hcard#Implied_.22n.22_Optimization|implied 'n' optimization rules]] are in effect.<br />
<span id="note2">[[#property-list-tel|2. ^]]</span>: tel - Authors {{may}} follow the [http://en.wikipedia.org/wiki/E.123 E.123] standard for writing values of telephone numbers. Letter values (e.g. +1-555-FORMATS) {{must}} be converted to numbers. Use an <code>abbr</code> to display letters and provide a numerical value simultaneously, e.g. <code><nowiki><abbr title="+15553676287">+1-555-FORMATS</abbr></nowiki></code>.

=== Singular vs. Plural Properties ===
Singular properties: 'fn', 'n', 'bday', 'tz', 'geo', 'sort-string', 'uid', 'class', 'rev'. For properties which are singular, the first descendant element with that class {{should}} take effect, any others being ignored.

All other properties {{may}} be plural. Each class instance of such properties creates a new instance of that property.

=== Human vs. Machine readable ===
The human visible text contents of an element for a property represents the value of that property, with a few exceptions:

If an <code><abbr></code> element is used for a property, then the '<code>title</code>' attribute (if present) of the <code><abbr></code> element is the value of the property, instead of the contents of the element, which instead provide a more human presentable version of the value.

If an <code><a></code> element is used for one or more properties, it {{must}} be treated as follows:
# For the 'photo' property and any other property that takes a URL as its value, the <code>href="..."</code> attribute provides the property value.
# For other properties, the element's content is the value of the property.

If an <code><img></code> element is used for one or more properties, it {{must}} be treated as follows:
# For the 'photo' property and any other property that takes a URL as its value, the <code>src="..."</code> attribute provides the property value.
# For other properties, the <code><img></code> element's '<code>alt</code>' attribute is the value of the property.

If an <code><object></code> element is used for one or more properties, it {{must}} be treated as follows:
# For the 'photo' property and any other property that takes a URL as its value, the <code>data="..."</code> attribute provides the property value.
# For other properties, the element's content is the value of the property.

=== Value excerpting ===
Sometimes only part of an element which is the equivalent for a property is used for the value of the property. This typically occurs when a property has a subtype, like 'tel'. For this purpose, the special class name "<code>value</code>" is used to excerpt out the subset of the element that is the value of the property. E.g. here is an hCard fragment for marking up a home phone number:<br />

vCard:
<pre><nowiki>
TEL;TYPE=HOME:+1.415.555.1212
</nowiki></pre>

hCard:
<source lang=html4strict>
<span class="tel">
<span class="type">home</span>:
<span class="value">+1.415.555.1212</span>
</span>
</source>

This hCard fragment could be displayed as:

<div style="border: thin dashed black; width: 95%; padding: .5em 1em;">
<span class="tel">
<span class="type">home</span>:
<span class="value">+1.415.555.1212</span>
</span>
</div>

You may want to customize/localize the visible punctuation and not want to include it in what machines see. Use multiple class="value" elements which are then concatenated. E.g.

<source lang=html4strict>
<span class="tel">
<span class="type">home</span>:
<span class="value">+1</span>.<span class="value">415</span>.<span class="value">555</span>.<span class="value">1212</span></span>
</span>
</source>

No change in display, but the parsed hCard property value then becomes in vCard:

vCard:
<pre><nowiki>
TEL;TYPE=HOME:+14155551212
</nowiki></pre>



=== Property Exceptions ===
vCard has several properties which either do not make sense on, or are already implied within the context of a web page. This section explains what to (not) do with them.

# vCard's '''NAME''', '''PROFILE''', '''SOURCE''', '''PRODID''', '''VERSION''' properties are defined in Sections 2.1.2, 2.1.3, 2.1.4, 3.6.3, 3.6.9 of [[rfc-2426|RFC2426]]. Content publishers {{must-not}} use these properties in their hCards, and as such, hCard consumers/parsers {{must}} IGNORE these properties if they are found within an hCard. Instead. hCard to vCard converters {{should}} use the title of the page where the hCard is found (e.g. the <code><title></code> element in HTML documents) to construct the NAME property, {{may}} output a PROFILE value of "<code>VCARD</code>" per [[rfc-2426|RFC2426]], {{should}} use the URL of the page where the hCard is found to construct the SOURCE property (e.g. perhaps as a parameter to a URL/service that converts hCards to vCards), for an output vCard stream (e.g. a .vcf file). Only services/applications that output actual vCards should write the PRODID property, with the product identifier for said service/application. Similarly, only such services/applications should write the VERSION property, with the value "3.0" (without quotes) per [[rfc-2426|RFC2426]] Section 3.6.9.

=== Organization Contact Info ===
If the "FN" and "ORG" (organization) properties have the exact same value (typically because they are set on the same element, e.g. class="fn org"), then the hCard represents contact information for a company, organization or place and {{should}} be treated as such. In this case the author also {{must-not}} set the "N" property, or set it (and any sub-properties) explicitly to the empty string "". Thus parsers {{should}} handle the missing "N" property, in this case by implying empty values for all the "N" sub-properties.

=== Implied "N" Optimization ===
Although vCard requires that the "N" property be present, the authors of the vCard specification ([[rfc-2426|RFC2426]]) themselves do not include "N" properties in their vCards near the end of the spec (p.38). This apparent contradiction can be resolved by simply allowing the "FN" property to imply "N" property values in typical cases provided in the spec. We do so explicitly in hCard.

If "FN" and "ORG" are not the same (see previous section), and the value of the "FN" property is exactly two words (separated by whitespace), and there is no explicit "N" property, then the "N" property is inferred from the "FN" property. For "FN"s with either one word see below, and for three or more, the author {{must}} explicitly markup the "N", except for the organization contact info case, [http://microformats.org/wiki/hcard#Organization_Contact_Info see above] for that.

# The content of "FN" is broken into two "words" separated by whitespace.
# The ''first'' word of the "FN" is interpreted as the "given-name" for the "N" property.
# The ''second/last'' word of the "FN" is interpreted as the "family-name" for the "N" property.
# Exception: If the first word ends in a "," comma, then the first word (minus the comma at the end) is interpreted as the "family-name" and the second word is interpreted as the "given-name".

This allows simplification in the typical case of people stating:
* given-name (space) family-name
* family-name (comma) given-name

=== Implied "nickname" Optimization ===
Due to the prevalence of the use of nicknames/handles/usernames in actual content published on the Web (e.g. authors of [[hReview|reviews]]), hCard also has an implied "nickname" optimization to handle this.

Similar to the implied "n" optimization, if "FN" and "ORG" are not the same, and the value of the "FN" property is exactly one word, and there is no explicit "N" property, then:

# The content of the "FN" {{must}} be treated as a "nickname" property value.
# Parsers {{should}} handle the missing "N" property by implying empty values for all the "N" sub-properties.

Though parsers {{must}} follow the implied nickname optimization, publishers {{should}} explicitly indicate the "nickname" even in this case, e.g.:

<source lang=html4strict>
<span class="vcard">
<span class="fn nickname">daveman692</span>
</span>
</source>

The hCard {{may}} have additional explicit "nickname" property values in addition to the implied nickname.

=== Implied "organization-name" Optimization ===
The "ORG" property has two subproperties, organization-name and organization-unit. Very often authors only publish the organization-name. Thus if an "ORG" property has no "organization-name" inside it, then its entire contents {{must}} be treated as the "organization-name".

=== Tags as Categories ===
Categories in hCard {{may}} be represented by tags with [[rel-tag]]. When a category property is a rel-tag, the tag (as defined by rel-tag) is used for that category.

=== type subproperty values ===
The 'type' subproperty in particular takes different values depending on which property it is a subproperty of. These 'type' subproperty values are case-INSENSITIVE, meaning "Home" is the same as "home", as well as multivalued, e.g. a tel can be home and preferred:

vCard:
<pre><nowiki>
TEL;TYPE=HOME,PREF:+1.415.555.1212
</nowiki></pre>

hCard:
<source lang=html4strict>
<span class="tel"><span class="type">Home</span> (<span class="type">pref</span>erred):
<span class="value">+1.415.555.1212</span>
</span>
</source>

This could be displayed as:

<div style="border: thin dashed black; width: 95%; padding: .5em 1em; ">
<span class="tel"><span class="type">Home</span> (<span class="type">pref</span>erred):
<span class="value">+1.415.555.1212</span>
</span>
</div>

==== type with unspecified value ====
When the type of a property is specified, and there is no explicit value specified, then everything in the property except for the type is considered the value of the property. E.g.

<source lang=html4strict>
<span class="tel"><span class="type">Home</span> +1.415.555.1212</span>
</source>

is equivalent to:

<source lang=html4strict>
<span class="tel"><span class="type">Home</span><span class="value"> +1.415.555.1212</span></span>
</source>

And thus the type is "home" and the value is "+1.415.555.1212".

==== adr tel email types ====
The following lists are ''informative''. See [[rfc-2426|RFC2426]] sections 3.2.1 ADR, 3.3.1 TEL, and 3.3.2 EMAIL respectively for normative type values. They are repeated here for convenience. Default type subproperty value(s) is(are) first in each list and indicated in ALL CAPS. types may be multivalued.

* adr type: INTL, POSTAL, PARCEL, WORK, dom, home, pref
* tel type: VOICE, home, msg, work, pref, fax, cell, video, pager, bbs, modem, [http://flickr.com/photos/tags/carcellphone/ car], isdn, pcs
* email type: INTERNET, x400, pref

=== Profile ===
The hCard <span id="XMDP_Profile">XMDP profile</span> is at http://microformats.org/profile/hcard

Content that uses hCard {{should}} reference this profile, e.g.
<source lang=html4strict>
<link rel="profile" href="http://microformats.org/profile/hcard">
</source>
or
<source lang=html4strict>
This content uses <a rel="profile" href="http://microformats.org/profile/hcard">hCard</a>.
</source>
or
<source lang=html4strict>
<head profile="http://microformats.org/profile/hcard">
</source>
(profile attribute is deprecated in HTML5)
Content may combine the above methods as well.

=== Parsing Details ===

See [[hcard-parsing|hCard parsing]].

== Examples ==

This section is informative.

=== Sample vCard ===

Here is a sample vCard:

<pre><nowiki>
BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com/
END:VCARD
</nowiki></pre>

and an equivalent in hCard with various elements optimized appropriately. See [[hcard-example1-steps| hCard Example 1]] for the derivation.

<source lang=html4strict>
<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
</div>
</source>

This hCard might be displayed as:
<div style="border: thin dashed black; width: 95%; padding: .5em 1em;">
[http://tantek.com/ Tantek Çelik]
</div>

Note: The version information is unnecessary in hCard markup directly since the version will be defined by the profile of hCard that is used/referred to in the 'profile' attribute of the <head> element.

===Live example===

Here is [http://www.commerce.net/ Commercenet]'s contact details, as a live hCard which will be detected, on this page, by microformat parsing tools:

<div class="vcard">
<div class="fn org">'''CommerceNet'''</div>
<div class="url">'''<nowiki>http://www.commerce.net/</nowiki>'''</div>
<div class="adr">'''<span class="type">Work</span>:'''
<div class="street-address">'''169 University Avenue'''</div>
<span class="locality">'''Palo Alto'''</span>, <span class="region">'''CA'''</span>  <span class="postal-code">'''94301'''</span>
<div class="country-name">'''USA'''</div>
</div>
<div class="tel">'''<span class="type">Work</span> +1-650-289-4040'''</div>
<div class="tel">'''<span class="type">Fax</span> +1-650-289-4041'''</div>
<div>'''Email <span class="email"><nowiki>info@commerce.net</nowiki></span>'''</div>
</div>

The mark-up, emboldening omitted for clarity, with the following semantic improvements:
* <code>abbr</code> to expand abbreviations
* hyperlinking the org name with the url

<source lang=html4strict>
<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>  
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
</div>
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
</div>
<div>Email:
<span class="email">info@commerce.net</span>
</div>
</div>
</source>

=== More Examples ===
See [[hcard-examples|hCard examples]] for more examples, including all examples from vCard [[rfc-2426|RFC2426]] converted into hCard.

== Examples in the wild ==
This section is '''informative'''. The number of hCard examples in the wild has expanded far beyond the capacity of being kept inline in this specification. They have been moved to a [[hcard-examples-in-wild|separate page]].

See [[hcard-examples-in-wild|hCard Examples in the wild]].

== Implementations ==
This section is '''informative'''. The number of hCard implementations has also expanded beyond the capacity of keeping them inline. They have been moved to a [[hcard-implementations|separate page]].

See [[hcard-implementations|hCard Implementations]].

== Articles ==
This section is <strong>informative</strong>. For <span id="Further_Reading">further reading</span> on hCard see [[hcard-articles]].

==Buttons==
You can use these buttons on pages with hCards. See [[buttons#hCard]] for any recent additions.

* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

== Copyright ==
Per the public domain release on the authors' user pages ([[User:Tantek|Tantek Çelik]], [[User:Brian|Brian Suda]]) this specification is released into the public domain.

{{MicroFormatPublicDomainContributionStatement}}

== Patents ==
{{MicroFormatPatentStatement}}

== References ==
=== Normative References ===
* [http://www.w3.org/TR/2002/REC-xhtml1-20020801/ XHTML 1.0 SE]
* [http://www.ietf.org/rfc/rfc2426.txt vCard RFC2426]
* [http://www.itu.int/rec/T-REC-E.123-200102-I/en ITU recommendation E.123] format of telephone numbers (chargeable document)
* [[rfc-2119|RFC 2119]]

=== Informative References ===
This section is '''informative'''.
* [[hcard-history|hCard history]]
** [http://wiki.oreillynet.com/foocamp04/index.cgi?SimpleSemanticFormats FOO Camp 2004 Simple Semantic Formats presentation, 2004-09-10]
** [http://tantek.com/log/2004/09.html#hcard hCard term introduced and defined on the Web, 2004-09-30]
** Contributed from http://developers.technorati.com/wiki/hCard 2005-06-20
* [http://www.dante.net/np/ds/osi/9594-6-X.520.A4.ps X.520 in Postscript] ([http://72.14.253.104/search?q=cache:FjqzsFu4h20J:www.dante.net/np/ds/osi/9594-6-X.520.A4.ps HTMLization courtesy of Google Cache]) - vCard refers to ROLE as being "based on the X.520 Business Category explanatory attribute".
* [http://www.w3.org/2002/12/cal/rfc2426 HTML reformatted version of RFC2426]
* [http://w3.org/TR/REC-CSS1 CSS1]
* [http://www.w3.org/TR/xhtml11 XHTML 1.1]
* [http://en.wikipedia.org/wiki/E.123 Wikipedia summary of ITU-T Recommendation E.123] - for "TEL" values.
* [http://www.imc.org/pdi/ Internet Mail Consortium Personal Data Interchange vCard and vCalendar]
* [[iso-8601|ISO8601]]

==== Specifications That Use hCard ====
* [[adr]]
* [[geo]]
* [[hcalendar|hCalendar]]
* [[hreview|hReview]]

==== Similar Work ====
This section is '''informative'''.
* [http://www.intertwingly.net/wiki/pie/PaceBetterPersonElement Atom PaceBetterPersonElement]
* [http://www.jabber.org/jeps/jep-0054.html JEP-0054: vcard-temp]

== Inspiration and Acknowledgments ==
This section is '''informative'''.
Thanks to: my good friend [http://vadim.com/ Vadim] who introduced me to vCard ''many'' years ago, and if I'd only paid more attention then, perhaps I could have helped a lot of people avoid wasting a lot of time reinventing various standards wheels.

== Notes on derivation from vCard ==
This section is ''informative''.

<div id="Semantic_XHTML_Design_Principles">See: [[hcard-design-methodology]].</div>

=== More Semantic Equivalents ===
For some properties there are HTML elements which better match and convey their semantics. The following properties SHOULD be encoded with the following HTML:
* <code>URL</code> in vCard becomes <code><a class="url" href="...">...</a></code> inside the element with <code>class="vcard"</code> in hCard.
* Similarly, <code>EMAIL</code> in vCard becomes <code><nowiki><a class="email" href="mailto:...">...</a></nowiki></code>
* <code>PHOTO</code> in vCard becomes <code><img class="photo" src="..." alt="Photo of ..." /></code> or <code><object class="photo" data="..." type="...">Photo of ...</object></code>
* <code>UID</code> in vCard simply becomes another semantic applied to a specific URL (or EMAIL) for an hCard.

=== Singular and Plural derivations ===
The [[hcard#Singular_vs._Plural_Properties|lists of singular and plural properties]] have been derived by analyzing the semantics of the individual properties in vCard RFC2426 and determining logically that they MUST be singular per their semantics. See [[hcard-singular-properties]] for explanations.

==== Plural Properties Singularized ====
Since plural property names become their singular equivalents, even if the original plural property permitted only a single value with multiple components, those multiple components are represented each with their own singularly named property and the the property is effectively multivalued and subject to the above treatment of multivalued properties.

== Related Pages ==
{{hcard-related-pages}}

[[Category:Specifications]]
[[Category:hCard]]

== Translations ==
Read the hCard specification in additional <span id="languages">languages</span>:
* [[hcard-fr|français]]
* [[hcard-ru|Русский]]
* [[hcard-ja|日本語]]
* [[hcard-zh|漢語]]
* [http://www.gadgetsdotcom.com Gadgets]

widget-examples-fr

2011-10-06T11:23:52Z

Xadmin: /* Microsoft "Gadgets" */

= Exemples de Widget =

== Contributeur(s) ==

* [http://lawver.net Kevin Lawver]
* [http://changelog.ca Charles Iliya Krempeaux]
* [[User:ChrisMessina | Chris Messina]]
* [http://www.gadgetsdotcom.com Gadgets] [http://asbestosisweb.blogspot.com]

== Traduction ==

* [[Christophe Ducamp]]

== Le Dashboard d'Apple ==

* Utilise un fichier Manifest XML pour spécifier les données à propos du "widget" (largeur, hauteur, image vignette, titre et version).
* Aucune obligation de balisage autour des widgets.

=== Exemple Dashboard (plist) ===

<pre><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>AllowNetworkAccess</key>
<true/>
<key>CFBundleDisplayName</key>
<string>AIM Fighter</string>
<key>CFBundleIdentifier</key>
<string>com.aimfight.widget</string>
<key>CFBundleName</key>
<string>AOL Fighter</string>
<key>CFBundleShortVersionString</key>
<string>2.0</string>
<key>CFBundleVersion</key>
<string>2.0</string>
<key>CloseBoxInsetX</key>
<integer>5</integer>
<key>CloseBoxInsetY</key>
<integer>5</integer>
<key>MainHTML</key>
<string>fight.html</string>
</dict>
</plist></pre>

== Modules de Canaux de Contenus chez AOL - exemple [http://sports.aol.com AOL Sports] ==

* Chaque module (widget) a une enveloppe de balisage et quelques éléments obligatoires qui en font un module et permettent des styles cohérents à travers les produits.

=== Exemple ===

<pre><div class="module themedList">
<div class="header"><h3>Kevin's List Of Fruit</h3></div>
<div class="body">
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</div>
</div></pre>

== Konfabulator ==

* (besoin de quelqu'un d'autre pour remplir cela, n'en ai jamais construit un)

== WSRP ==

* [http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=wsrp|WSRP Spec]
* SOAP enveloppe vers des modules de transport, mais pas de mise en forme spécifique requise pour le véritable contenu du "portlet" (module ou widget).

=== Exemple de Module Réponse ===

<pre><urn:getMarkupResponse xmlns:urn="urn:oasis:names:tc:wsrp:v1:types">
<urn:markupContext>
<urn:mimeType>text/html; charset=UTF-8</urn:mimeType>
<urn:markupString><![CDATA[
<form method="post"
action="wsrp_rewrite?wsrp-urlType=blockingAction/wsrp_rewrite"
id="wsrp_rewrite_stockForm">
<table border="0" width="100%">
<tr>
<td>Enter Stock Symbol</td>
<td><input name="symbol"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
]]></urn:markupString>
<urn:locale>en-US</urn:locale>
<urn:requiresUrlRewriting>true</urn:requiresUrlRewriting>
<urn:preferredTitle>Portfolio Manager</urn:preferredTitle>
</urn:markupContext>
<urn:sessionContext>
<urn:sessionID>sessionID_1</urn:sessionID>
<urn:expires>300</urn:expires>
</urn:sessionContext>
</urn:getMarkupResponse></pre>

== XBL ==
'''XBL''' ('''Extensible Binding Language''') est une technologie développée par [http://mozilla.org Mozilla]. Bien que souvent utilisé avec XUL pour fabriquer des widgets, elle peut être aussi utilisée avec HTML. XBL sert en quelque sorte le même rôle que CSS ou XSL, mais bien plus puissant !

Par exemple, je pourrais créer un nouvel élément/tag HTML (ou XUL ou quoi que ce soit) ; disons que je crée le nouvel élément : '''<shake>'''. La façon dont fonctionnerait le nouvel élément '''<shake>''' est ce que l'utilisateur place la souris sur l'élément sur l'élément (sur la page) il secoue tout ce qui est dedans. Ainsi par exemple, nous pourrions avoir le HTML suivant emballé dans l'élément '''<shake>''' :

<nowiki>
<html>
<head>
<style type="text/css">

</style>
</head>

<body>
I want you to </nowiki>'''<nowiki><shake>shake this</shake>.</nowiki>'''<nowiki>
</body>

</html>
</nowiki>

Note le code CSS '''-moz-binding'''. Ce n'est pas du CSS standard mais une extension Mozilla. (les extensions CSS on un trait d'union précédent.)

Remarquez aussi que le '''-moz-binding''' fait référence à un fichier XBL appelé "myxbl.xml". Voici à quoi ça pourrait ressembler :

<nowiki>
<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="shake-it-baby">
<content>
<children />
</content>
<handlers>
<handler event="mouseover" action="a_javascript_function_that_shakes_it();" />
</handlers>
</binding>
</bindings>
</nowiki>

Voici un autre exemple. Je créerai un nouvel élément/tag qui dessine un cercle autour du texte à l'intérieur. J'appellerai le nouvel élément/tag <incircle>. Pour faire ça, nous pourrions avoir le code HTML suivant :

<nowiki>
<html>
<head>
<style type="text/css">

</style>
</head>

<body>
</nowiki>'''<nowiki><incircle>I'm in a circle</incircle></nowiki>'''<nowiki>
</body>

</html>
</nowiki>

Pour cet exemple, le fichier "somexbl.xml" pourrait ressembler à :

<nowiki>
<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:svg="http://www.w3.org/2000/svg"
>
<binding id="put-it-in-a-circle">
<content>
<svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
<children />
</content>
</binding>
</bindings>
</nowiki>

Remarquez que j'ai utilisé SVG pour dessiner le cercle. (Bon, ce code SVG est probablement mauvais. Et si vous utiliser ce code XBL ça ne s'affichera pas bien. Dans la vraie vie, je voudrais utiliser JavaScript pour calculer le rayon du cercle, où les coordonnées x et y du cercle devraient être, etc. Mais c'est juste un exemple pour vous montrer comment l'élément XBL <content> pourrait être utilisé. Je pourrais avoir aussi probalement utilisé l'élément HTML <canvas> pour faire ça.)

== Microsoft "Gadgets" ==

* Ressemble un peu aux Dashboard Widgets, tous du XML propriétaire et Javascript.
* XML Manifest bien plus comme un fichier plist de Dashboard.
* Fonctionnalités et apparences sont contrôlés par javascript.
* [http://microsoftgadgets.com/ Plus d'infos]
* [http://www.gadgetsdotcom.com Gadgets] [http://asbestosisweb.blogspot.com]

== WordPress Widgets ==

* [http://widgets.wordpress.com/ Blog]
* [http://automattic.com/code/widgets/ Widget Code]
* [http://automattic.com/code/widgets/themes Themes]
* [http://automattic.com/code/widgets/plugins Plugins]
* [http://automattic.com/code/widgets/ API]

widget-examples-fr

2011-10-06T11:23:15Z

Xadmin: /* Contributeur(s) */

= Exemples de Widget =

== Contributeur(s) ==

* [http://lawver.net Kevin Lawver]
* [http://changelog.ca Charles Iliya Krempeaux]
* [[User:ChrisMessina | Chris Messina]]
* [http://www.gadgetsdotcom.com Gadgets] [http://asbestosisweb.blogspot.com]

== Traduction ==

* [[Christophe Ducamp]]

== Le Dashboard d'Apple ==

* Utilise un fichier Manifest XML pour spécifier les données à propos du "widget" (largeur, hauteur, image vignette, titre et version).
* Aucune obligation de balisage autour des widgets.

=== Exemple Dashboard (plist) ===

<pre><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>AllowNetworkAccess</key>
<true/>
<key>CFBundleDisplayName</key>
<string>AIM Fighter</string>
<key>CFBundleIdentifier</key>
<string>com.aimfight.widget</string>
<key>CFBundleName</key>
<string>AOL Fighter</string>
<key>CFBundleShortVersionString</key>
<string>2.0</string>
<key>CFBundleVersion</key>
<string>2.0</string>
<key>CloseBoxInsetX</key>
<integer>5</integer>
<key>CloseBoxInsetY</key>
<integer>5</integer>
<key>MainHTML</key>
<string>fight.html</string>
</dict>
</plist></pre>

== Modules de Canaux de Contenus chez AOL - exemple [http://sports.aol.com AOL Sports] ==

* Chaque module (widget) a une enveloppe de balisage et quelques éléments obligatoires qui en font un module et permettent des styles cohérents à travers les produits.

=== Exemple ===

<pre><div class="module themedList">
<div class="header"><h3>Kevin's List Of Fruit</h3></div>
<div class="body">
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</div>
</div></pre>

== Konfabulator ==

* (besoin de quelqu'un d'autre pour remplir cela, n'en ai jamais construit un)

== WSRP ==

* [http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=wsrp|WSRP Spec]
* SOAP enveloppe vers des modules de transport, mais pas de mise en forme spécifique requise pour le véritable contenu du "portlet" (module ou widget).

=== Exemple de Module Réponse ===

<pre><urn:getMarkupResponse xmlns:urn="urn:oasis:names:tc:wsrp:v1:types">
<urn:markupContext>
<urn:mimeType>text/html; charset=UTF-8</urn:mimeType>
<urn:markupString><![CDATA[
<form method="post"
action="wsrp_rewrite?wsrp-urlType=blockingAction/wsrp_rewrite"
id="wsrp_rewrite_stockForm">
<table border="0" width="100%">
<tr>
<td>Enter Stock Symbol</td>
<td><input name="symbol"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
]]></urn:markupString>
<urn:locale>en-US</urn:locale>
<urn:requiresUrlRewriting>true</urn:requiresUrlRewriting>
<urn:preferredTitle>Portfolio Manager</urn:preferredTitle>
</urn:markupContext>
<urn:sessionContext>
<urn:sessionID>sessionID_1</urn:sessionID>
<urn:expires>300</urn:expires>
</urn:sessionContext>
</urn:getMarkupResponse></pre>

== XBL ==
'''XBL''' ('''Extensible Binding Language''') est une technologie développée par [http://mozilla.org Mozilla]. Bien que souvent utilisé avec XUL pour fabriquer des widgets, elle peut être aussi utilisée avec HTML. XBL sert en quelque sorte le même rôle que CSS ou XSL, mais bien plus puissant !

Par exemple, je pourrais créer un nouvel élément/tag HTML (ou XUL ou quoi que ce soit) ; disons que je crée le nouvel élément : '''<shake>'''. La façon dont fonctionnerait le nouvel élément '''<shake>''' est ce que l'utilisateur place la souris sur l'élément sur l'élément (sur la page) il secoue tout ce qui est dedans. Ainsi par exemple, nous pourrions avoir le HTML suivant emballé dans l'élément '''<shake>''' :

<nowiki>
<html>
<head>
<style type="text/css">

</style>
</head>

<body>
I want you to </nowiki>'''<nowiki><shake>shake this</shake>.</nowiki>'''<nowiki>
</body>

</html>
</nowiki>

Note le code CSS '''-moz-binding'''. Ce n'est pas du CSS standard mais une extension Mozilla. (les extensions CSS on un trait d'union précédent.)

Remarquez aussi que le '''-moz-binding''' fait référence à un fichier XBL appelé "myxbl.xml". Voici à quoi ça pourrait ressembler :

<nowiki>
<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="shake-it-baby">
<content>
<children />
</content>
<handlers>
<handler event="mouseover" action="a_javascript_function_that_shakes_it();" />
</handlers>
</binding>
</bindings>
</nowiki>

Voici un autre exemple. Je créerai un nouvel élément/tag qui dessine un cercle autour du texte à l'intérieur. J'appellerai le nouvel élément/tag <incircle>. Pour faire ça, nous pourrions avoir le code HTML suivant :

<nowiki>
<html>
<head>
<style type="text/css">

</style>
</head>

<body>
</nowiki>'''<nowiki><incircle>I'm in a circle</incircle></nowiki>'''<nowiki>
</body>

</html>
</nowiki>

Pour cet exemple, le fichier "somexbl.xml" pourrait ressembler à :

<nowiki>
<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:svg="http://www.w3.org/2000/svg"
>
<binding id="put-it-in-a-circle">
<content>
<svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
<children />
</content>
</binding>
</bindings>
</nowiki>

Remarquez que j'ai utilisé SVG pour dessiner le cercle. (Bon, ce code SVG est probablement mauvais. Et si vous utiliser ce code XBL ça ne s'affichera pas bien. Dans la vraie vie, je voudrais utiliser JavaScript pour calculer le rayon du cercle, où les coordonnées x et y du cercle devraient être, etc. Mais c'est juste un exemple pour vous montrer comment l'élément XBL <content> pourrait être utilisé. Je pourrais avoir aussi probalement utilisé l'élément HTML <canvas> pour faire ça.)

== Microsoft "Gadgets" ==

* Ressemble un peu aux Dashboard Widgets, tous du XML propriétaire et Javascript.
* XML Manifest bien plus comme un fichier plist de Dashboard.
* Fonctionnalités et apparences sont contrôlés par javascript.
* [http://microsoftgadgets.com/ Plus d'infos]

== WordPress Widgets ==

* [http://widgets.wordpress.com/ Blog]
* [http://automattic.com/code/widgets/ Widget Code]
* [http://automattic.com/code/widgets/themes Themes]
* [http://automattic.com/code/widgets/plugins Plugins]
* [http://automattic.com/code/widgets/ API]

blog-post-brainstorming-fr

2011-10-06T11:23:05Z

Xadmin: /* Voir aussi */

= Participants à la Discussion =

== Editeurs ==
* [http://www.blogmatrix.com David Janes]

== Auteurs ==
* [http://www.blogmatrix.com David Janes]
* [http://tantek.com/ Tantek Çelik]
* [[MikeTaylor|Mike Taylor]]
* [http://www.oreillynet.com Justin Watt]

(Traduction en cours par [[Christophe Ducamp]] à mettre en [[to-do-fr]])

= Objectif =
Le 'blog-post-microformat' propose une codification de la manière dont les billets de blogs sont identifiés dans les blogs. Il est espéré que ceci devrait être considéré pour être 'expansif' : par exemple la proposition pourrait être utilisé sur [http://www.cnn.com CNN.com] pour baliser les articles d'actualités et les pages résumé.

= Terminologie =

Cette section explore la terminologie qui devrait être utilisée pour discuter d'un microformat de billet de blog. Pour qu'il soit plus facile de parler des différents types de terminologie, nous utilisons une version d'espace-nom ala XML de façon à ce que nous puissions produire des déclarations comme <code>atom:entry</code> est approximativement équivalent à <code>rss20:feed</code>, <code>atom:feed/atom:link@relalternate</code> est approximativement équivalent à <code>rss20:channel/rss20:link</code> ou <code>atom:author</code> n'est '''pas''' équivalent à <code>rss:entry/rss:author</code> (parce que RSS 2.0 est uniquement la définition d'une adresse email).

== Terminologie Commune dans les weblogs ==

En rédigeant les [[blog-post-formats-fr#Outils]], on peut voir qu'il y a peu de standardisation parmi les outils ou même dans un outil individuel (tel que 'blogger') pour les noms des éléments des billets de blogs. Il existe néanmoins beaucoup d'éléments communs, comprenant :

* un conteneur pour tous les billets/entrées
* un conteneur pour les billets individuels
* le contenu du billet, qui peut être complet, résumé avec un lien vers le lien complet, ou deux paragraphes avec des trucs javascript/CSS pour révéler le reste du contenu
* le nom de l'auteur
* la date du billet (dans beaucoup beaucoup de formats)

Bien que cela puisse ressembler un peu à un petit-déjeuner pour chien, il y a généralement une quantité raisonnable de rigueur derrière la présentation, parce que les fils Atom et/ou RSS peuvent être aussi produits à partir des mêmes outils.

En outre, en développant un microformat pour les billets de weblog, nous voulons être prudents pour ne pas casser n'importe quel (ou beaucoup) de gabarits. Notez que beaucoup de gabarits de weblog devront être mis à jour car ils produisent quelque chose comme du HTML pauvrement construit plutôt que du XHTML clair.

== Terminologie Atom ==

Voir [http://www.atomenabled.org/ ici] pour la spec et [[blog-post-formats-fr#Atom]] pour l'analyse.

* <code>atom:feed</code> - (composite) une collection d'entrées plus de l'information à leur propos.
** <code>atom:author</code> - (composite) l'auteur d'un fil (peut contenir atom:email, atom:name, atom:uri)
** <code>atom:id</code> - un identifiant permanent pour un fil
** <code>atom:title</code> - le titre d'un atom:entry ou un atom:feed
** <code>atom:updated</code> - la dernière fois que le fil a été mis à jour
** <code>atom:link@relalternate</code> - la page d'accueil du fil
** <code>atom:link@relself</code> - l'URI du fil (où elle peut être téléchargée)
** <code>atom:entry</code> - (composite) une entrée dans le fil
*** <code>atom:content</code> - le contenu du fil
*** <code>atom:summary</code> - un résumé du contenu du fil
*** <code>atom:entry/link</code> - l'URI permanente de l'entrée
*** <code>atom:published</code> - le moment de la création initiale ou la première disponibilité de l'entrée

== Terminologie RSS 2.0 ==

Regardez [http://blogs.law.harvard.edu/tech/rss ici] la spécification et [[blog-post-formats-fr#RSS]] pour l'analyse. Il y a beaucoup plus d'éléments dans RSS mais cela couvre ceux les plus communément utilisés. analysis.

* <code>rss2:channel</code> - (composite) une collection d'entrées plus de l'information à leur propos
** <code>rss2:author</code> - (composite) l'auteur d'un fil (peut contenir atom:email, atom:name, atom:uri)
** <code>rss2:link</code> - L'URL vers le site web HTML correspondant au canal (comparer à atom:link@relalternate)
** <code>rss2:title</code> - le titre d'un rss2:channel ou un rss2:item
** <code>rss2:pubDate</code> - La date de publication pour le contenu dans le canal.
** <code>rss2:item</code> - (composite) une entrée dans le fil
*** <code>rss2:item/link</code> - L'URL de l'item. Notez que cela peut ne pas être un lien permanent pour l'item ; ce peut être un lien vers quelque autre page sur l'Internet dont traite le rss2:item
*** <code>rss2:description</code> - Le synopsis item [sic]. Il n'y pas d'indication spéciale si c'est le contenu complet d'une entrée, un résumé ou une précision de ce que le rss2:item/link est en train de pointer
*** <code>rss2:author</code> - adresse email de l'auteur de l'item

== Recommandation ==

Atom a un mécanisme beaucoup plus précis pour définir les fils de syndication et les données de weblog. Une transformation mécanique à partir de Atom -> RSS mènera toujours à un fil RSS correct ; une traduction RSS -> Atom devrait prendre une décision parmi de multiples définitions qui peuvent ne pas toujours être correctes. Par exemple, le format du balisage, le rôle d'un auteur, ou le sens d'un lien.

IMPORTANT : nous parlerons de choses comme le 'balisage d'éléments <code>atom:feed</code>' ; considérez cela purement comme une chose conceptuelle. Le texte 'atom:feed' n'apparaîtra pas dans le microformat XHTML -- nous pourrons décider plus tard d'utiliser la phrase exacte 'atom_feed', 'feed', 'items' ou 'googlybear'. Dans le cas où il n'y a pas de terminologie atom claire ou applicable, nous utiliserons 'weblog:xxx'.

= Eléments Découverts =

Cette section explore l'information découverte à partir des [[blog-post-formats-fr|blog-post-formats]] en utilisant la terminologie discutée au-dessus. Nous nous concentrerons seulement sur les principaux éléments des billets de weblog :

* l'Entrée Groupe
* L'Entry individuelle
* l'Entrée Titre
* l'Entrée Contenu
* l'Entrée Permalink
* l'Entrée Datetimes

A cette heure, la codification des éléments suivants majeurs seront différés car il y a/peut avoir un chevauchement avec d'autres microformats qui devraient être explorés plus en profondeur.

* L'EntréeGroupe Titre
* L'EntréeGroupe Permalien
* L'Entrée Posteur/Auteur - en particulier, est-ce que la hCard devrait être utilisée ?

Des entrées plus approfondies provenant de la communauté devraient être appréciées ici

== GroupeEntry ==

En gros, ceci correpond à 'atom:feed' ou 'rss2:channel' (en particulier, les items dans ces éléments XML). Voir [[blog-post-examples-fr#GroupeEntry]] pour les différentes formes dans la jungle.

=== Recommandation Microformat ===

* les pages weblog (y compris les pages d'accueil, archives, pages de catégories, pages tag et ainsi de suite) qui peuvent contenir plusieurs entrées DOIVENT enfermer les entrées dans un élément <code>atom:feed</code>
* les pages weblog PEUVENT avoir plusieurs éléments <code>atom:feed</code> enfermant différents groupes d'entrées
* les éléments <code>atom:feed</code> ne DOIVENT PAS être imbriqués
* les pages weblog qui ont exactement une entrée PEUVENT utiliser le <code>atom:feed</code>

=== Exemple Transformation ===

''Notez que la chaîne 'atom:feed' est un gardien de place pour quelque chose devant être décidé plus tard.''

Original (évidemment, s'il n'y a pas d'élément de bloc GroupeEntry, un peut être ajouté) :

<pre><nowiki>
<div id="content">
<h2 id="home-title">
Dernières nouvelles des microformats
<a href="http://www.microformats.org/feed/" title="lien vers le fil RSS" id="feed-link">
<img src="/img/xml.gif" width="23" height="13" alt="XML" />
</a>
</h2>

<div class="entry">
<h3 id="post-60">
<a href="http://www.microformats.org/blog/2006/...">Attaque Bliki</a>
</h3>
...
</div>

...
</div>
</nowiki></pre>

Transformé :

<pre><nowiki>
<div id="content" class="atom:feed">
<h2 id="home-title">
Dernières nouvelles des microformats
<a href="http://www.microformats.org/feed/" title="lien vers le fil RSS" id="feed-link">
<img src="/img/xml.gif" width="23" height="13" alt="XML" />
</a>
</h2>

<div class="entry">
<h3 id="post-60">
<a href="http://www.microformats.org/blog/2006/...">Attaque Bliki</a>
</h3>
...
</div>

...
</div>
</nowiki></pre>

== Groupe Entry Titre ==
Non couvert par cette proposition à cette heure.

== Groupe Entry Permalien ==
Non couvert par cette proposition à cette heure.

== Entrée Individuelle ==

Ceci correspond presque exactement aux éléments <code>atom:entry</code> ou <code>rss2:item</code>. Voir [[blog-post-examples-fr#Entrée_Individuelle]] pour les différentes formes vues dans la jungle.

=== Recommandation Microformat ===

* Les entrées de weblog DOIVENT être enveloppées dans un élément unique <code>atom:entry</code>
* Les éléments <code>atom:entry</code> NE DOIVENT PAS être imbriqués
* <code>atom:entry</code> NE DOIT PAS appartenir à plus d'un élément <code>atom:feed</code>

=== Exemple Transformation ===
''Notez que la chaîne 'atom:entry' est un gardien de place pour quelque chose devant être décidé plus tard.''

==== Entrées dans bloc existant ====

Original :

<pre><nowiki>
<div class="entry">
<h3 id="post-60">
<a href="http://www.microformats.org/blog/2005/...">Attaque Wiki</a>
</h3>
... reste de l'entrée ...
</div>
</nowiki></pre>

Transformé :

<pre><nowiki>
<div class="atom:feed">
<div class="atom:entry entry">
<h3 id="post-60">
<a href="http://www.microformats.org/blog/2005/...">Attaque Wiki</a>
</h3>
... reste de l'entrée ...
</div>
... entrées additionnelles ...
</div>
</nowiki></pre>

==== Entrées n'étant pas dans un bloc existant ====

Original :

<pre><nowiki>
<a name="112877372228959075">&nbsp;</a>
<br>
<strong>Just one problem, Minister.</strong> Last week, Bill Rammell,
<br>
</nowiki></pre>

Transformé:

<pre><nowiki>
<div class="atom:feed">
<div class="atom:entry" id="112877372228959075">
<br />
<strong>Just one problem, Minister.</strong> Last week, Bill Rammell,
<br />
... reste de l'entrée
</div>
... entrées additionnelles ...
</div>
</nowiki></pre>

Notez les modifications additionnelles aussi produites :
* <code><br></code> a été rendu conforme XHTML
* <code><a name="..."></code> a été converti ver un <code>id="..."</code> (''confirmez que c'est OK'')

==== Entrées Disjointes====

Ignorer tout bloc existant et les traiter comme dans le cas précédent de pas de bloc.

== Entrée Titre ==

Ceci correspond presque exactement aux éléments <code>atom:title</code> ou <code>rss2:title</code>. Voir [[blog-post-formats-fr#Titres]] pour des exemples à partir desquels nous voyons qu'il y a deux manières fondamentales dont les titres sont utilisés dans la jungle : au niveau bloc et dans la ligne. Notre proposition doit être capable de gérer les deux formes.

=== Microformat Recommandation ===

* <code>atom:entry</code>s DEVRAIENT avoir au plus un titre
* les titres au niveau bloc DEVRAIENT être représentés en utilisant <code><h#></code>, le premier élément <code>atom:entry</code> devrait être considéré comme le titre ; ceci devrait ne pas être balisé ou identifié sous quelque autre forme que le titre
* les titres dans la ligne DOIVENT être balisés sous <code>atom:title</code> ; il est aussi possible de faire ça en utilisant la mise en forme au niveau bloc telle que <code><div></code>, mais ceci est découragé

=== Discussion : pourquoi pas toujours <code><h#></code>? ===

En utilisant CSS <code>display: inline</code>, les éléments de niveau bloc peuvent être convertis vers des éléments dans la ligne. Malheureusement, nous ne pouvons pas imbriquer <code><h#></code> à l'intérieur d'un bloc <code><p></code> pour parvenir à l'effet correct. C'est à dire que nous ne pouvons pas convertir ...

<pre><nowiki>
<p><strong>Le Titre</strong> : Le Texte...</p>
</nowiki></pre>

... en ...

<pre><nowiki>
<p><h3 style="display: inline">Le Titre</h3> : Le Texte...</p>
</nowiki></pre>

... parce que le XHTML ne validera pas. Aussi...

<pre><nowiki>
<h3 style="display: inline">Le Titre</h3><p> : Le Texte...</p>
</nowiki></pre>

... ne fonctionnera pas parce que l'effet de présentation sera différent de ce que l'utilisateur désire (parce qu le <code><p></code> introduira un saut de ligne).

=== Exemple Transformation ===

''Notez que la chaîne 'atom:title' est un gardien de place pour quelque chose devant être décidé plus tard.''

==== Header dans le bloc <code><h#></code> ====
Original (et Final) :

<pre>
<div class="atom:entry">
<h2 id="post-59">Web Essentials Audio</h2>
... réinitialisation de l'entrée ...
</div>
</pre>

Aucune transformation n'est requise -- le microformat blog-post reconnaîtra ça come le <code>atom:title</code>.

==== Header dans un autre élément bloc ====

Original :

<pre>
<div class="atom:entry">
<div class"header">Web Essentials Audio</div>
</div>
</pre>

Transformé (le niveau titre est à essayer) :

<pre>
<div class="atom:entry">
<h3>Web Essentials Audio</h3>
</div>
</pre>

Il est possible d'ajouter <code>class"atom:title"</code> à la <code>div</code> mais nous ne le recommandons pas. Néanmoins nous reconnaissons qu'il peut y avoir certains [[blog-post-formats-fr#Forum_de_Discussion_.2F_Formats_de_Bulletin_Board Outils de BB]] que produire ce changement puisse être trop difficile.

==== Header dans l'élément dans la ligne ====

Original :

<pre><nowiki>
<div class="atom:entry" id="112877372228959075">
<br />
<strong>Just one problem, Minister.</strong> Last week, Bill Rammell,
<br />
... reste de l'enrée ...
</div>
</nowiki></pre>

Transformé :

<pre><nowiki>
<div class="atom:entry" id="112877372228959075">
<br />
<strong class="atom:title">Just one problem, Minister.</strong> Last week, Bill Rammell,
<br />
... reste de l'entrée ...
</div>
</nowiki></pre>

== Entrée Contenu ==

Ceci correspond en gros aux éléments <code>atom:content</code> et/ou <code>atom:summary</code>. Voir [[blog-post-examples-fr#Entrée_Contenu]] pour les différentes formes vues dans la jungle.

=== Discussion : le problème du découpage du contenu ===

Le dernier item au-dessus (contenu brisé en plusieurs sections) présente quelques problèmes uniques. Il n'est pas suffisant d'enfermer toutes les sections de contenu différentes dans un élément <code>atom:content</code>, comme l'illustre l'exemple suivant :

<pre><nowiki>
<div class="atom:entry">
<div class="atom:content">
... première partie du contenu ...
"En savoir plus"
... seconde partie du contenu ...
</div>
</div>
</nowiki></pre>

"En savoir plus" ne fait pas partie du contenu ! Par conséquent, nous proposons que ''plusieurs'' sections de contenus puissent aller dans un <code>atom:entry</code> unique. La concaténation de tous ces blocs de contenu définira le contenu complet :

<pre><nowiki>
<div class="atom:entry">
<div class="atom:content">
... première partie du contenu ...
</div>
"Read More"
<div class="atom:content">
... seconde partie du contenu ...
</div>
</div>
</nowiki></pre>

Le même argument est applicable à <code>atom:summary</code>.

=== Recommandation Microformat ===

* un <code>atom:entry</code> PEUT avoir zéro ou plus de sections <code>atom:summary</code>. Il n'y a pas d'obligation que différentes représentations de la même entrée (sur différents URIs) utilisent les mêmes résumés.
* un <code>atom:entry</code> PEUT avoir zéro ou plus de sections <code>atom:content</code>. La concaténation sérielle de toutes les sections <code>atom:content</code> dans l'entrée DOIT représenter le contenu complet de l'entrée. Notez que la règle ici est légèrement différente que [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.1.2 Atom] qui n'autorise qu'un <code>atom:content</code>.

=== Exemple Transformation ===

''Notez que les chaînes 'atom:summary' et 'atom:content' (etc.) sont des gardiens de place pour quelque chose à décider plus tard.''

==== Entrée avec contenu résumé ====
Original :

<pre><nowiki>
<div class="inlineBlog">
<h3 id="a003068">
<a href="http://thecommunityengine.com/h.../xfolk_vegomatic.html" class="taggedlink">xFolk Veg-o-matic Alpha</a>
</h3>
<p class="abstract extended">
We provide a way to surf the web and slice and dice information you find there into your own custom output stream.
</p>
... quelque tag et truc de catégorie ...
<p>
Les types chez... le reste du contenu
</p>
<p class="extended">
<a href="http://thecommunityengine.com/.../xfolk_vegomatic.html#more">Continue reading "xFolk Veg-o-matic Alpha"</a>
</p>
...
</div>
</nowiki></pre>

Transformation:

<pre><nowiki>
<div class="inlineBlog atom:entry">
<h3 id="a003068">
<a href="http://thecommunityengine.com/h.../xfolk_vegomatic.html" class="taggedlink atom:permalink">xFolk Veg-o-matic Alpha</a>
</h3>
<p class="abstract extended">
We provide a way to surf the web and slice and dice information you find there into your own custom output stream.
</p>
... some tag and category stuff ...
<div class="atom:summary">
<p>
Les types chez... le reste du contenu
</p>
</div>
<p class="extended">
<a href="http://thecommunityengine.com/.../xfolk_vegomatic.html#more">Continue reading "xFolk Veg-o-matic Alpha"</a>
</p>
...
</div>
</nowiki></pre>

Notes :
* nous n'avons rien fait avec la section "abstract" -- ceci est une discussion pour un autre jour
* nous n'avons pas inclus le truc tag dans le résumé, et probablemetn ne le ferions pas si c'était le contenu complet.

==== Entrée avec contenu complet ====

Original :

<pre><nowiki>
<div class="entry single">
<h2 id="post-61">Les attributs de classe sont plus que du stylisme</h2>

<p>Quand les gens parlent de microformats, ... </p>

<blockquote cite="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">
... texte cité d'ailleurs
</blockquote>

<p>Il y a deux points dont j’aimerais parler ici :</p>

... plus de contenu...

<h4 class="tags">Tags Technorati :</h4>
<ul class="tags">
<li><a href="http://www.technorati.com/tag/css" rel="tag">css</a></li>
...
</ul>

<ul class="post-info">
... trucs de pied de page ...
</ul>
</div>
</nowiki></pre>

Transformation :

<pre><nowiki>
<div class="entry single atom:entry">
<h2 id="post-61">Les attributs de classe sont plus que du stylisme</h2>

<div class="atom:content">
<p>Quand les gens parlent de microformats, ...</p>

<blockquote cite="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">
... texte cité d'ailleurs
</blockquote>

<p>There’s a couple of points I’d like to highlight here:</p>

... plus de contenu ...
</div>

<h4 class="tags">Technorati Tags:</h4>
<ul class="tags">
<li><a href="http://www.technorati.com/tag/css" rel="tag">css</a></li>
...
</ul>

<ul class="post-info">
... trucs de pied de page ...
</ul>
</div>
</nowiki></pre>

Notes :
* la seule chose qui avait vraiment besoin d'être faite est d'envelopper le contenu
* ma préférence serait de migrer l'<code>id</code> du billet vers l'<code>atom:entry</code>

==== Entrée avec contenu découpé (plusieurs sections) ====
Original :

<pre><nowiki>
<div class="blogbody">
<a name="008148"></a>

<div class="title">
Face to face: why places will continue to exist
</div>

<div class="posted">
<strong>Brian Micklethwait (London)</strong>
  
<a href="...">Science & Technology</a>
</div>

<p>It is not just that I dislike filling in forms....</p>
... the first section of the content ...

... this link makes the extended section show ...
<span id="varP8148">
<img src="http://www.samizdata.net/blog/img/bullet_tri.gif" width="16" height="10" alt="" />
<a href="..." onclick="showMore(8148,'...');return false;">
Read more.
</a>
</span>

<div id="varXYZ8148" style="display: none">
<p>The very gadgets – computers linked...</p>
... the rest of the extended content ...

... this link makes the extended section hide ...
<img src="..." width="16" height="10" alt="" />
<a href="#008148" onclick="showMore(8148,0);return true;">
Read less.
</a>
</div>
</div>
</div>
</nowiki></pre>

Transformation :

<pre><nowiki>
<div class="blogbody atom:entry" id="008148">
<h3>
Face to face: why places will continue to exist
</h3>

<div class="posted">
<strong>Brian Micklethwait (London)</strong>
  
<a href="...">Science & Technology</a>
</div>

<div class="atom:content">
<p>It is not just that I dislike filling in forms....</p>
... the first section of the content ...
</div>

... this link makes the extended section show ...
<span id="varP8148">
<img src="http://www.samizdata.net/blog/img/bullet_tri.gif" width="16" height="10" alt="" />
<a href="..." onclick="showMore(8148,'...');return false;">
Read more.
</a>
</span>

<div id="varXYZ8148" style="display: none">
<div class="atom:content">
<p>The very gadgets – computers linked...</p>
... the rest of the extended content ...
</div>

... this link makes the extended section hide ...
<img src="..." width="16" height="10" alt="" />
<a href="#008148" onclick="showMore(8148,0);return true;">
Read less.
</a>
</div>
</div>
</div>
</nowiki></pre>

Note :
* <code>atom:content</code> <code>div</code>s ont été créés pour chacune des sections de texte, de façon que le non-contenu codé n'aurait pas été balisé incorrectement
* il y a '''deux''' sections <code>atom:content</code> ; ensemble elles produisent le contenu complet
* la conversion de <code><div class="header"></code> en <code><h3></code>
* l'addition de <code>atom:entry</code> comme exigé
* le retrait du <code><a name="008148"></code> en faveur de placer un <code>id</code> sur l'<code>atom:entry</code>
* une manipulation plus approfondie de l'auteur pourrait être faite
* une manipulation plus approfondie de la catégorie pourrait être faite

== Entrée Permalien ==

Les Permaliens correspondent en gros à <code>atom:link</code>. Voir [[blog-post-examples-fr#Entr.C3.A9e_Permaliens|exemples de billets de blogs#Entrée Permaliens]] pour des exemples.

Un permalien est appelé '''canonique''' si c'est la meilleure représentation de l'URI pour cette entrée ; la définition de quelle 'meilleure représentation' est entièrement à la discrétion de l'auteur du weblog. Nous recommandons que les weblogs utilisent des URIs canoniques car cela permet de "filer" ensemble plusieurs billets et sources avec des comparaisons au niveau des bits. En général, l'URI canonique devrait être le lien utilisé dans une entrée Atom.

=== Recommandation Microformat ===

* une Entrée ne DOIT PAS avoir plus d'un permalien balisé comme <code>atom:link</code>
* les permaliens DEVRAIENT être des URIs absolus
* les permaliens DEVRAIENT être canoniques
* les permaliens DEVRAIENT être les mêmes comme le <code>atom:link</code> utilisé dans les fils de syndication

=== Exemple Transformations ===

Original :

<pre><nowiki>
<div class="entry">
<h3 id="post-45">
<a
href="http://www.microformats.org/blog/2005/08/21/foobar-microformats/"
rel="bookmark"
title="Lien Permanent vers la FooBar Microformats">FooBar Microformats</a>
</h3>
...
</div>
</nowiki></pre>

Transformation :

<pre><nowiki>
<div class="atom:entry entry">
<h3 id="post-45">
<a
href="http://www.microformats.org/blog/2005/08/21/foobar-microformats/"
rel="atom:link bookmark"
title="Lien Permanent vers la FooBar Microformats">FooBar Microformats</a>
</h3>
...
</div>
</nowiki></pre>

Original :

<pre><nowiki>
<h3>YET ANOTHER INSTANCE OF THE WORLD FINALLY CATCHING UP TO THE BLOG</h3>
<p>Today's news: Neuticles win ... award.</p>
<p class="posted">
Posted by judi on October 7, 2005 at 05:00 PM |
<a href="http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html">Permalink</a>
</p>
</nowiki></pre>

Transformation :

<pre><nowiki>
<div class="atom:entry">
<h3>YET ANOTHER INSTANCE OF THE WORLD FINALLY CATCHING UP TO THE BLOG</h3>
<p>Today's news: Neuticles win ... award.</p>
<p class="posted">
Posted by judi on October 7, 2005 at 05:00 PM |
<a rel="atom:link" href="http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html">Permalink</a>
</p>
</nowiki></pre>

== Entrée Datetimes - Création et Modified ==
Les weblogs affichent typiquement (en HTML) le moment de création de leurs billets (en gros mais ne correspondant pas exactement au <code>atom:published</code>) et moins souvent le moment de la dernière modification (<code>atom:updated</code>).

Regardez aussi [[datetime-design-pattern-fr|datetime-design-pattern]] pour plus d'information sur la spécification du datetimes. La recommandation ici est stylée après le datetimes dans in [[hcalendar-fr|hCalendar]].

=== Formes vues dans la jungle ===
voir [[blog-post-formats#Datetimes-fr]]

=== Recommandation Microformat ===

* les titres de date entre les entrées de weblogs sont en dehors de ce microformat
* <code>atom:published</code> DEVRAIT être indiqué par un élément <code>abbr</code> autour de la version lisible par les humains de la date ou datetime.
** l'attribut 'class' DOIT indiquer <code>atom:published</code>
** l'attribut 'title' DOIT être un datetime complet, dans le format de [[datetime-design-pattern-fr|datetime-design-pattern]]
* aussi pour <code>atom:updated</code>, si présent

=== Exemple transformation ===

''Notez que la chaîne 'atom:published' est un gardien de place pour quelque chose à décider plus tard.''

Original :

<pre>
<a href"...">Vendredi 30 septembre 2005 à 12:31</a>
</pre>

Transformé :

<pre>
<a href"..."><abbr
class"atom:published"
title"200050930T12:31:01-0500">Vendredi 30 septembre 2005 à 12:31</abbr></a>
</pre>

== Entrée Auteur ==
Un travail en progression

=== Recommandation Microformat ===

* L'entrée Auteur DEVRAIT être dans un bloc <code><address></code>

= Atom Possible vers mapping microformat(s) =

* feed - "hfeed"
** title - sous-entendu à partir de l'élément <title>
** subtitle - réutilisation de "description" selon vCalendar, iCalendar, [[hcalendar-fr|hCalendar]], [[xfolk-fr|xFolk]], et [[hreview-fr|hReview]].
** id - sous-entendu à partir de URL page
** updated - "updated" (mis à jour)
** author - "author", si rien trouvé, sous-entendu à partir de <address> (qui DEVRAIT être utilisé de toute façon), et DOIT être une [[hcard-fr|hCard]].
** generator - généré par le script de conversion / XSLT, omis à partir de hAtom. Similaire à PRODID dans [[hcalendar-fr|hCalendar]].
** logo - réutilisation du "logo" en provenance de [[hcard-fr|hCard]]
** icon - définir la nouvelle [[rel-icon-fr|rel-icon]] (voir XHTML2) pour cela
** category - [[rel-tag-fr]] + [[rel-directory-fr]]
** rights - [[rel-license-fr]]
* entry - "hentry"
** title - "headline"
** link - [[rel-bookmark-fr]] de HTML4
** id - sous-tendu du permalink
** summary - "excerpt"
** content - "content"
** published - "published"
** updated - "updated"
** author - "author", doit être [[hcard-fr|hCard]], DEVRAIT être <address>
** rights - [[rel-license-fr]]

== Plusieurs fils sur une page ==

Billet hAtom 1.0 : supporte plusieurs fils sur une page unique. Changements à partir de ci-dessus.

* feed
** title - "headline", même que entry
** id - definir un nouveau microformat [[rel-canonical]] pour cela
** author - "author" requis.
* entry
** id - réutilisation de "uid" à partir du [[hcalendar-fr|hCalendar]].

=== Discussion ===

==== titre du fil ====

Je pensais initialement que "fn" ferait du sens pour le titre du fils, mais en ayant regardé quelques blogs/fils, bien que dans bien des cas le titre du blog/fil *soit* le nom du blog/fil, ce n'est souvent pas le cas.

Deux exemples :
#. Quelques titres de blog consistent en le nom du blog et la date, par exemple Scripting News fait ça.
#. Quelques titres de blog consistent en le nom du blog et une phrase courte résumé ou une citation

J'ai vu assez souvent ces deux cas dans la jungle pour croire que le titre du blog et le nom du blog ne sont pas les mêmes, de ce fait il est approprié de réutiliser "fn" à partir de la [[hcard-fr|hCard]], parce que le titre du fil ne veut pas dire la même chose que le *nom* du fil. De ce fait j'ai ôté la suggestion de réutiliser "fn" pour le titre du fil, et au lieu de cela je propose de réutiliser le "headline" à partir de l'entrée, ce qui apparaît vraiment comme ayant la même sémantique.

== Possibilités Supplémentaires ==

Plus d'idées sur le billet hAtom 1.0 :

* entry
** summary - "excerpt" ou "abstract"
** contributor - "contributor"
** source - utiliser <blockquote cite="">, mettre la source dans l'attribut cite>.

= Usages possibles =

Cette section décrit les applications potentielles pour un microformat de billet de blog

== Usages Transformationnels ==

Par transformationnel, nous voulons dire alimenter un billet de weblog vers quelque sorte d'outil de transformation (tel que XSLT) pour produire une version différente du billet taillée pour un usage différent.

=== Imprimer les Billets de Blogs ===
=== Reblogging ===

* [http://blogs.zdnet.com/BTL/?p=2052&part=rss&tag=feed&subj=zdblog ZDNet] a un bouton reblog qui serait produit obsolète ( ou pourrait être substantiellement amélioré) par l'utilisation de ce microformat
* [http://reblg.com/ Reblog.com] était l'inspiration pour cette idée. Ceci peut être renommé [http://redirectthis.com/ RedirectThis] ?

== Usages d'Archives ==

Par 'archive', nous voulons dire prendre les entrées des weblog et les placer dans une base de données pour une analyse plus tard, de la recherche, de l'agrégation et ainsi de suite.

=== Database Personnelle ===
=== Moteur de Recherche ===

=== Blogs avec Texte Partiels ===
Les contenus partiels de blogs peuvent être créés en produisant la totalité du contenu html d'une entrée de blog en ne la balisant pas comme telle. La portion atom:summary de cette entrée peut être balisée comme un 'summary', ou pourrait êtr récrite et placée dans un élément de bloc caché dans le html. Les parseurs hAtom ingoreraient le contenu non annoté et ne produiraient seulement que l'information résumée.

=Obstacles=

==Tag Header pour Entrée Titre ?==
--[[User:Bryan|Bryan]] 14:55, 14 Aug 2005 (PDT)

Beaucoup de weblog CMSes autorisent la publication d'entrées extérieures de la façon suivante :

* plusieurs entrées sur une page (un "Index," archive mensuelle, archive catégorie, etc. voir [http://re-run.com/category/creative/comedy/ Exemple])
* une entrée sur une page (voir [http://re-run.com/2005/02/11/nickels-worth-of-free-advice/ Exemple])

Des tentatives précédentes sur [[blog-post-formats-fr]] ont réglé le titre du billet de blog pour utiliser le tag h3.

Au moins dans le cas où les pages d'entrées individuelles (et des index et archives inclus possibles), je recommande d'utiliser h1 pour l'entrée titre, compte tenu du faiut que l'entrée est de loin la pièce d'information la plus importante sur la page et c'est ce que nous voudrions que les moteurs de recherche les reconnaissent comme tels. Dans le cas où le h1 a été utilisé pour le titre du site, les craintes de "perdre" cette information devraient être soulagées en incluant simplement le nom du site dans le tag title, <strong>après</strong> le titre de l'article / entrée / billet.

: Qu'un h3 ou un h1 soit utilisé est inapproprié, la sémantique sera appliquée avec les noms de classe. Ceci est une non-problématique. --[[User:RyanKing|RyanKing]] 22:35, 18 Aug 2005 (PDT)

=Voir aussi=
* [[hatom-fr|hAtom]] - la proposition brouillon
* [[hatom-issues-fr|hatom-problématiques]] - problèmes ? plaintes ? idées ? Mettez-les ici.
* [[hatom-faq-fr|hatom-faq]] - base de connaissance
* [[blog-post-brainstorming-fr]]
* [[blog-post-formats-fr]]
* [[blog-post-examples-fr]]
* [[blog-description-format-fr]] - comment décrire un blog (à l'opposé des entrées individuelles, ce qui est ce que nous sommes en train de faire ici)

* [http://blogs.oreillynet.com/beasts/archives/2005/10/blog_post_microformat_proposal.html Blog Post Microformat Proposal] Quelques idées sur la thématique avec des illustrations utiles.
* [http://dannyayers.com/archives/2005/08/27/hatom-no-seriously/ Danny Ayers] propose le nom hAtom et quelques applications
* [http://torrez.us/archives/2005/10/07/404 Elias Torres] dit que nous avons besoin de 'hAtom'
* [http://www.gadgetsdotcom.com Gadgets] [http://asbestosisweb.blogspot.com]