blog-post-examples-fr

2009-01-03T11:36:52Z

RotrtRrobo: licabaser

eltnocpas
= Exemples de Billets de Blog =

Cette page est pour documenter des exemples venant du vrai monde de ce que les personnes publient dans les billets de blog, quel balisage elles utilisent, et quels sont les schÃ©mas implicites qui peuvent Ãªtre infÃ©rÃ©s Ã partir de leurs comportements. Voir aussi [[blog-post-formats-fr|blog-post-formats]], [[blog-post-brainstorming-fr|blog-post-brainstorming]], [[hatom-fr|hAtom]].

__TOC__

= Introduction =
== Participants Ã la Discussion ==

=== Editeur ===
* [http://blogmatrix.blogmatrix.com/ David Janes], [http://www.blogmatrix BlogMatrix, Inc.]

=== Auteurs ===
* [http://blogmatrix.blogmatrix.com/ David Janes], [http://www.blogmatrix BlogMatrix, Inc.]
* [[MichalMigurski]]

=== Contributeurs ===
* [http://rbach.priv.at/ Robert Bachmann]
* [http://tantek.com/ Tantek Ãelik]
* [http://maetl.coretxt.net.nz Mark Rickerby]
* [http://bs-markup.de Björn Seibert]

=== Traduction ===

* ([[Christophe Ducamp]] - appel Ã rÃ©vision - cette traduction est un brouillon et les exemples restent Ã localiser en franÃ§ais.)

=== Personnes intÃ©ressÃ©es ===

= Exemples SpÃ©cifiques venant de la Jungle =

== GroupeEntry ==

=== Les EntrÃ©es sont dans un bloc GroupeEntry ===
Toutes les entrÃ©es sont dans une 'div' enveloppante -- le GroupeEntry. Ceci est commun avec les pages d'accueil des blogs ([http://microformats.org/ exemple]) ou une archive avec plusieurs entrÃ©es.

<pre><nowiki>
<div id="content">
<h2 id="home-title">
Latest microformats news
<a href="http://www.microformats.org/feed/" title="link to RSS feed" 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/2005/...">Wiki Attack</a>
</h3>
...
</div>

<div class="entry">
<h3 id="post-59">
<a href="http://www.microformats.org/blog/2005/...">Web Essentials Audio</a>
</h3>
...
</div>

<div class="entry">
<h3 id="post-57">
<a href="http://www.microformats.org/blog/2005/...">WebZine FollowUp</a>
</h3>
...
</div>
</div>
</nowiki></pre>

Notez aussi le header en haut expliquant ce qu'est le fil. Nous pouvons vouloir aussi exploiter Ã§a.

=== Les EntrÃ©es sont dans un GroupeEntry explicite ===
Il y a plusieurs entrÃ©es sur une page unique mais il n'y a pas d'Ã©lÃ©ment de bloc explicite pour les entrÃ©es elles-mÃªme -- mÃªme si bien sÃ»r, il existe au moins un blog qui a les entrÃ©es : <code><body></code>. Ceci est aussi un cas d'utilisation commune pour les weblogs et aussi les archives.

=== Plusieurs GroupesEntry sur une page ===
Il peut y avoir plusieurs groupes d'entrÃ©es sur une page unique qui sont connectÃ©s ([http://news.google.ca/nwshp?hl=en&tab=wn&q= exemple-2]). Aussi, beaucoup de weblogs ont des 'miniblogs' sur le cÃ´tÃ© qui fonctionnent de la mÃªme faÃ§on.

* [http://www.truthlaidbear.com/topics.php exemple]

<pre><nowiki>
<div id="fullcol">
<div id="sumcol">

<b>
<a href="http://www.truthlaidbear.com/topicpage.php?topic=harrietmiers" class="linktitle">Harriet Miers</a>
</b>
</div>
<div id="commcol">
<img src="http://www.truthlaidbear.com/topics/topic_harrietmiers_sm.png" >
</div>
<div id="commcol">

<b>
<a href="http://polipundit.com/index.php?p=10420" class="linktitle">Harriet Miers Must...</a>
</b>
<br>
...
</div>
<div id="commcol">

<b>
<a href="http://instapundit.com/archives/026104.php" class="linktitle">A MIERS MELTDOWN? </a>
</b>
<br>
...
</div>
</div>

<div id="fullcol">
<div id="sumcol">

<b>
<a href="http://www.truthlaidbear.com/topicpage.php?topic=iraq" class="linktitle">Iraq</a>
</b>
</div>
<div id="commcol">
<img src="http://www.truthlaidbear.com/topics/topic_iraq_sm.png" >
</div>
<div id="commcol">

...
</div>
<div id="commcol">

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

=== EntrÃ©e unique sur une page ===
Ceci est commun avec les weblogs qui archivent sur une base par entrÃ©e ([http://www.microformats.org/blog/2005/09/30/web-essentials-audio/ exemple]).

<pre><nowiki>
<div id="content">
<h2 id="home-title">
Latest microformats news
<a href="http://www.microformats.org/feed/" title="link to RSS feed" id="feed-link">
<img src="/img/xml.gif" width="23" height="13" alt="XML" />
</a>
</h2>
</div>
</nowiki></pre>

Note that's no guarentee that a block (as shown above as the <code>id=content</code> div) will be around the singleton entry.

== GroupeEntry Titre ==
== GroupeEntry Permalien ==
== EntrÃ©e Individuelle ==

=== Les entrÃ©es individuelles sont dans un conteneur ===
Commun.

* [http://microformats.org/ exemple]

<pre><nowiki>
<div class="entry">
<h3 id="post-60">
<a href="http://www.microformats.org/blog/2005/...">Attaque Wiki</a>
</h3>
...
</div>
</nowiki></pre>

=== Les entrÃ©es individuelles ne sont pas dans un conteneur ===
Commun.

* [http://nataliesolent.blogspot.com/ exemple]

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

=== EntrÃ©es disjointes ===
Ce qui veut dire que tous les sous-Ã©lÃ©ments d'une entrÃ©e individuelles ne sont pas tous dans le conteneur (par exemple, l'auteur et la date peuvent se suivre dans un bloc sÃ©parÃ©)

== EntrÃ©e Titre ==
=== EntrÃ©e Titre enveloppÃ©e dans un Ã©lÃ©ment bloc <code><h#></code> ===
* [http://www.microformats.org/blog/2005/09/30/web-essentials-audio/ exemple]

<pre>
<div class="entry single">
<h2 id="post-59">Web Essentials Audio</h2>
...
</div>
</pre>

=== EntrÃ©e Titre enveloppÃ©e dans un Ã©lÃ©ment bloc <code><div></code> ===
''J'ai vu Ã§a mais je ne peux trouver d'exemple, en espÃ©rant sous entendre que c'est en quelque sorte rare''.

=== EntrÃ©e Titre enveloppÃ©e dans un Ã©lÃ©ment de prÃ©sentation dans la ligne, tel que <code><b></code> ===
* [http://nataliesolent.blogspot.com/ exemple]

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

=== EntrÃ©e Titre enveloppÃ© dans un <code><span></code> (Ã©lÃ©ment dans la ligne) ===
* [http://www.andrewsullivan.com/ exemple]

<pre>
<a name="112897777851715476"> </a>
<br>
<SPAN CLASS="inc_subtitle">EMAIL OF THE DAY II: </SPAN>"After years ...
</pre>

=== Pas d'EntrÃ©e Titre ===
* [http://www.instapundit.com/ exemple]

== EntrÃ©e Contenu ==

=== EntrÃ©e sans contenu ===
Ce qui veut dire que l'entrÃ©e a juste un lien et le titre pointant vers un URI diffÃ©rent (qui peut vÃ©ritablement avoir du contenu). C'est quelque chose vu frÃ©quemment sur les sites d'actualitÃ©s (qui aprÃ¨s tout, peuvent gÃ©nÃ©rer des fils)

* [http://www.cbc.ca/news/ exemple]

<pre><nowiki>
<ul>
<li>
<a href="/story/.../ndp-libs051016.html">NDP sets conditions for backing Liberals</a>
</li>
<li>
<a href="/story/.../teachers-bc051016.html">Go back to work, B.C. ...</a>
</li>
<li>
<a href="/story/.../alberta-strike2_051015.html">Plant managers charged ...</a>
</li>
<li>
<a href="/story/.../bc-mystery-illness051015.html">B.C. seniors' home reports...</a>
</li>
</ul>
</nowiki></pre>

=== L'EntrÃ©e ne contient que le rÃ©sumÃ© du contenu ===
Ceci est commun sur les site mÃ©dias. MovableType fournit aussi Ã§a comme une option par dÃ©faut, ainsi c'est souvent rencontrÃ© sur les blogs MT,

* [http://thecommunityengine.com/home/ exemple]

<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>
<p class="categorylist">
Sections:
<a href="http://thecommunityengine.com/home/archives/tools_and_analytics" rel="tag">Tools and Analytics</a>
</p>
<p class="taglist">Topics:
<a href="http://thecommunityengine.com/home/archives/tags/greasemonkey" rel="tag">greasemonkey</a>
<a href="http://thecommunityengine.com/home/archives/tags/microformats" rel="tag">microformats</a>
<a href="http://thecommunityengine.com/home/archives/tags/xfolk" rel="tag">xFolk</a>
</p>
<p>
The folks at ... the rest of the content
</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>

Notes :
* il y a beaucoup de choses qui continuent dans ces exemple
* il y a un "abstract" en haut
* il y a des sections pour les "categories" et "tags"
* il y a une section rÃ©sumÃ© "The folks at ... the rest of the content"
* il y a un lien vers la totalitÃ© du contenu en bas

=== L'EntrÃ©e contient le contenu complet ===

* [http://www.microformats.org/blog/2005/10/19/more-than-styling/ example]

<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 ici quelques points que j’aimerais Ã©clairer ici :</p>

... plus de contenus ...

<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>

=== L'EntrÃ©e divise le contenu en plusieurs sections ===
* [http://www.samizdata.net/blog/ exemple]
* nous identifions aussi Ã§a comme du 'Contenu TranchÃ©'

<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>

== EntrÃ©e Datetimes ==
Les Datetimes sont rarement exprimÃ©es dans des formats cohÃ©rents sur les weblogs. Les weblogs expriment gÃ©nÃ©ralement la date de crÃ©ation du billet, pas l'heure de modification.

=== Dates entre les entrÃ©es de weblog ===
Ceci est un modÃ¨le commun mais pas de modÃ¨le universel vu sur les weblogs -- un header ou une div insÃ©rÃ©s entre les entrÃ©es de weblog indiquant que la date a Ã©tÃ© modifiÃ©e. Je ne peux pas trouver un exemple oÃ¹ ce header est systÃ©matiquement liÃ© vers les entrÃ©es utilisant cette donnÃ©e (c.a.d. une div commune enveloppante)

* [http://dannyayers.com/ exemple]

<pre><nowiki>
<div class="post">
<h3 class="storytitle" id="post-3151"><a href="http://dannyayers.com/...">...</a></h3>
...
</div>

<div class="date">2005-10-07</div>

<div class="post">
<h3 class="storytitle" id="post-3150"><a href="http://dannyayers.com/...">...</a></h3>
...
</div>
</nowiki></pre>

=== EntrÃ©e Date ou Datetime dans l'entrÃ©e du 'footer' ===
La plupart des weblogs suivent ce modÃ¨le. Les Dates ou datetimes sont dans un format lisible par un humain de diffÃ©rentes faÃ§ons. La date ou datetime est quelquefois aussi utilisÃ©e comme une indication du 'permalien' pour un billet.

* [http://www.microformats.org/blog/2005/09/30/web-essentials-audio/ exemple]

<pre><nowiki>
<div class="entry single">
<h2 id="post-59">Web Essentials Audio</h2>

<p>...</p>
<ul class="post-info">
<li><a href="...">Friday, September 30th, 2005 at 12:31 pm</a></li>
</ul>
</div>
</nowiki></pre>

== EntrÃ©e Permaliens ==
Remarquez que non seulement certains exemples s'adaptent vraiment Ã plusieurs catÃ©gories, parfois les billets de blogs placent les liens multiples vers le permalien dans un billet unique (par exemple, dans le header et le footer).

=== EntrÃ©e Permalien autour ou dans le title ===
voir l'exemple suivant juste aprÃ¨s
=== EntrÃ©e Permalien est dans le header du billet ===
voir l'exemple suivant juste aprÃ¨s
=== EntrÃ©e Permalien utilise un URI absolu ===
* [http://microformats.org/ exemple]

<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>

=== L'EntrÃ©e Permalink est dans le 'footer' du billet ===
* [http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html exemple]

<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>

=== L'EntrÃ©e Permalink utilise un URI relatif ===
voir l'exemple suivant juste aprÃ¨s
=== L'EntrÃ©e Permalink inclut un fragment ===
Ceci est utilisÃ© quand un blog archive les billets d'archives sous un groupe (disons par mois ou par semaine) plutÃ´t que sous des billets individuels. Ceci est trÃ¨s commun sur les blogs les plus anciens blogspot.

* [http://nataliesolent.blogspot.com/2005_10_02_nataliesolent_archive.html#112876103554732697 exemple]

<pre><nowiki>
<a name="112876103554732697"> </a><br>
<strong>The ceremony of Explaining the Joke</strong>
<br>
<span class="byline">posted by Natalie at
<a href="2005_10_02_nataliesolent_archive.html#112876103554732697">8:18 AM</a></span>
<br>
</nowiki></pre>

=== Pas d'EntrÃ©e Permalink ===
Ceci est commun sur edes pages unique d'archives d'articles, quelques weblogs sociaux ([http://raymitheminx.blogspot.com/ example]) et la plupart des pages web des grands mÃ©dias (cad des non-blogs)
* [http://instapundit.com/archives/026056.php exemple]

<pre><nowiki>
<a name="026056"></a>
<p>ACCORDING TO THE WHITE HOUSE, ... hadn't we?</p>
<div class="footer">posted at 11:35 PM by <b>Glenn Reynolds</b></div>
</nowiki></pre>

== EntrÃ©e Auteur ==

= Autres Exemples en Stock =
Exemple de billets de blogs dans des installations de logiciel de blogs non modifiÃ©es.

=== Installation Stock Wordpress 1.5 ===
<pre><nowiki>
<div class="post">
<h2 id="post-237">
<a href="http://192.168.1.113/~migurski/wordpress/?p=237"
rel="bookmark" title="Permanent Link to More election maps">More
election maps</a>
</h2>
<small>November 9th, 2004 </small>

<div class="entry">
<p>via <a href="http://www.markme.com/jd/archives/006288.cfm">John Dowdell of JD on MX:</a></p>
<blockquote>
<p>More election maps: Ben Metcalfe, a software engineer at
the BBC, has his own list here… includes some not in
that “Flash the only winner” item from The
Inquirer, which Kevin also elaborated upon. Additionally,
Andrew Lucking pointed to the…</p>
</blockquote>
</div>

<p class="postmetadata">
Posted in <a
href="http://192.168.1.113/~migurski/wordpress/index.php?cat=1"
title="View all posts in General" rel="category tag">General</a>
<strong>|</strong> <a
href="http://192.168.1.113/~migurski/wordpress/?p=237#comments">
No Comments »</a>
</p>


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

=== Installation Stock MoveableType 3.15 ===
<pre><nowiki>
<h3 id="a000002">Example Entry</h3>
<p>This is the entry body.</p>
<p class="extended"><a href="http://localhost/archives/2005/08/example_entry_1.html#more">Continue reading "Example Entry"</a></p>
<p class="posted">Posted by migurski at <a href="http://localhost/archives/2005/08/example_entry_1.html">03:49 </a> | <a href="http://localhost/archives/2005/08/example_entry_1.html#comments">Comments (0)</a></p>
</nowiki></pre>

=== Installation Stock Blosxom avec [http://blosxom.com/downloads.html "Blosxom Flavor Sampler"] ===
<pre><nowiki>
<p>
<a name="post-identifier"><b>Titre du Billet</b></a>
<br />
Texte du Billet.
</p>
<p align="right">
<i>[<a href="/permalink/post-identifier">post-identifier</a>]
<a href="/permalink/2005/08/15#post-identifier">lien permanent</a></i>
</p>
</nowiki></pre>

=== Installation Stock Textpattern 4.0.3 ===
<pre><nowiki>
<div id="content">

<h3><a href="http://txpdefault/article/2/second-post" title="Lien permanent vers cet article">Second Billet</a> · il y a quelques secondes par chris</h3>
<p>Ceci est un second billet court Ã des fins d'illustration.</p>

<p class="comments_invite"><a href="http://txpdefault/article/2/second-post#comment" class="comments_invite">Commentaire</a></p>
<div align="center"><img src="http://txpdefault/images/1.gif" style="height:1px;width:400px" class="divider" alt="" /></div><h3><a href="http://txpdefault/article/1/first-post" title="Lien Permanent vers cet article">Premier Billet</a> · Il y a 4 minutes par textpattern</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum est eu mauris. In volutpat blandit felis. Suspendisse eget pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque sed arcu. Aenean purus nulla, condimentum ac, pretium at, commodo sit amet, turpis. Aenean lacus. Ut in justo. Ut viverra dui vel ante. Duis imperdiet porttitor mi. Maecenas at lectus eu justo porta tempus. Cras fermentum ligula non purus. Duis id orci non magna rutrum bibendum. Mauris tincidunt, massa in rhoncus consectetuer, lectus dui ornare enim, ut egestas ipsum purus id urna. Vestibulum volutpat porttitor metus. Donec congue vehicula ante.</p>

<p class="comments_invite"><a href="http://txpdefault/article/1/first-post#comment" class="comments_invite">Commentaire</a> [1]</p>

<div align="center"><img src="http://txpdefault/images/1.gif" style="height:1px;width:400px" class="divider" alt="" /></div>

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

= Exemples Grossiers =

MigrÃ©s ici Ã partir de [[blog-description-format-fr|blog-description-format-fr]] pour des objectifs de documentation.

== Pratique existante ==

=== Emballeurs Entry ===

<pre><nowiki><div class="entry"></div></nowiki></pre>

Le format d'emballage 'entry' a un usage largement rÃ©pandu, mais semble se montrer dans des contextes lÃ©gÃ¨rement diffÃ©rents.

Quelques blogs (ala Wordpress) utilisent la div 'entry' comme un conteneur vers le corps vÃ©ritable du billet, et emballent l'ensemble dans une div supplÃ©mentaire :

<pre><nowiki><div class="post">
<div class="entry">
</div>
</div></nowiki></pre>

Un vaste nombre de sites, y compris beaucoup de blogs contiennent le contenu de la page principale dans une div id="content" :

<pre><nowiki><div id="content"></div></nowiki></pre>

=== MÃ©tadonnÃ©e ===

Wordpress utilise class="postmetadata" pour contenir l'information mÃ©ta, date, d'autres utilisent leurs propres syntaxes - class="topics", class="description".

=== ElÃ©ments Basiques ===

Les titres sont gÃ©nÃ©ralement annoncÃ©s avec un heading H2 ou H3. L'utilisation de class="title" semble rare, mais quelques sites utilisent vraiment Ã§a pour un balisage explicite.

class="summary" est utilisÃ© pour annoncer un rÃ©sumÃ© d'item, gÃ©nÃ©ralement dans un Ã©lÃ©ment paragraphe.

=== Permaliens ===

rel="bookmark" et rel="permalink" sont tous deux utilisÃ©s Ã diffÃ©rents endroits pour annoncer un permalien vers l'entrÃ©e spÃ©cifiÃ©e.

=Voir aussi =
* [[blog-post-examples-fr|blog-post-exemples]]
* [[blog-post-formats-fr|blog-post-formats]]
* [[blog-post-brainstorming-fr|blog-post-brainstorming]]
* [[hatom-fr|hAtom]] - la proposition brouillon fondÃ©e sur cette information
* [[blog-description-format-fr|blog-description-format]] - comment dÃ©crire un blog (Ã l'inverse des entrÃ©es individuelles, ce qui est ce que nous faisons ici)

Microformats Wiki - User contributions [en]

blog-post-examples-fr