blog-post-formats-fr: Difference between revisions

From Microformats Wiki

Latest revision as of 20:46, 20 December 2008

Formats de Blog Actuels

Il y a un besoin pour développer des classes standards pour les billets de blogs (c'est à dire un microformat!).

Cette page sert à documenter la liste actuelle des schémas, formats et efforts sur les billets de blogs individuels en tant qu'historique pour la conception d'un simple microformat de billet de blog.

Participants à la Discussion

Editeur

Chris Messina, Flock, Inc.

Auteurs

Traduction

Christophe Ducamp (traduction en cours)

Types Intéressés

Ryan King, Technorati

Outils

Blogger

http://www.blogger.com/home

Blogger est l'und des plates-formes de blogging les plus anciennes, les mieux connus et probablement la plus utilisée. Rachetée par Google en février 2003. Blogger permet aux utilisateurs de créer et éditer leurs propres gabarits et fournit aussi un grand nombre de gabarits (plus ou moins) séduisants que l'utilisateur peut choisir. Malheureusement, vous devez vous connecter à un compte blogger pour voir la sélection de gabarit.

Voici plusieurs gabarits Blogger, sélectionnés par hasard à partir des propositions. Les gabarits les plus récents semblent converger vers un vocabulaire pour identifier les sections des billets. Ceci peut être parce qu'ils partagent une histoire évolutionnaire à partir d'un gabarit commun. J'ai inclus trois exemples ici :

<body>
 <div id="content">
  <div id="main">
   ENTRIES
  </div>
 </div>
</body>

<h2 class="date-header">POST DATE</h2>
<div class="post">
 <a name="POST #"></a>
 <h3 class="post-title">
  <a href="POST URI" title="external link">POST TITLE</a>
 </h3>
 <p>POST CONTENT</p>
 <p class="post-footer">
  <em>posted by AUTHOR @ <a href="POST URI" title="permanent link">POST DATETIME</a></em>
 </p>
</div>

<body>
 <div id="main">
  <div id="main2">
   ENTRIES
  </div>
 </div>
</body>

<div class="post">
 <a name="POST #"></a>
 <h3 class="post-title">
  <a href="sample_post.html" title="permanent link">POST TITLE</a>
 </h3>
 <div class="post-body">
   POST CONTENT
 </div>
 <p class="post-footer">
   <em>posted by AUTHOR @ <a href="POST URI" title="permanent link">POST TIME</a></em>
 </p>
</div>

<body>
 <div id="leftcontent">
 ENTRIES
 </div>
</body>
  
<div class="Post">
 <a name="POST #"></a>
 POST CONTENT
 <span class="PostFooter">
  <a href="POST URI">POST TIME</a> 
 </span>
</div>

Noms de Classe Clés

les gabarits les plus récents semblent utiliser "main" pour identifier un conteneur pour toutes les entrées
les gabarits les plus récents utilisent "post" pour identifier une entrée de weblog
les gabarits les plus récents utilisent "post-title" pour identifier le titre de l'entrée
au delà de ça, il y a peu de standardisation

Concepts de gabarits

all posts
an individual post
post title
post author
post posting time
post content
post URI (permalink)

Blosxom

Drupal

http://drupal.org
varient selon le thème

LiveJournal

http://www.livejournal.com/

MovableType

http://www.sixapart.com/movabletype/

MovableType est une plateforme de blogging basée sur perl. Notez que le MT est vieux et largement déployé et il existe beaucoup de variantes très différentes sur les gabarits dans la jungle.

Le gabarit standard pour la page d'accueil du weblog (le "main index") a la structure suivante :

<body>
 <div class="content">
 <h2>DATE HEADER</h2>
 <h3 id="a####">POST TITLE</h3>
 POST CONTENT
 [ OPTIONAL LINK TO MORE POST CONTENT ]
 <p class="posted">Posted by AUTHOR at <a href="POST URI">POST DATE</a>
 </div>
</div>

<div class="content">
 <p align="right">
  <h2>POST DATE</h2>
 </p>
 <h3>POST TITLE</h3>
 POST CONTENT
 <div id="more">
  MORE POST CONTENT (optional)
 </div>
 <p class="posted">Posted by AUTHOR at DATE</p>
</div>

Noms de Classe Clés

"content" peut envelopper une entrée individuelle ou toutes les entrées, selon le contexte
"h2" enferme la date du billet (littéralement : l'heure n'est pas incluse)
"h3" enferme le titre
il n'y a pas d'enveloppe standard pour tout le contenu
il n'y a pas d'identification claire de "here's all the entries"
il n'y a pas d'identification claire de l'auteur du billet
le permalien n'est pas nécessairement sur la page quelque part

Concepts de Gabarit

all posts
an individual post
post title
post author
post posting time
post content, which includes the next two
post content (first part)
post content (expended part)
post URI (permalink)

TypePad

http://www.sixapart.com/typepad/

Typepad est un service d'hébergement de MovableType. Il fournit une liste de gabarits par défaut et [ "modules gabarits"] à partir desquels les utilisateurs peuvent construire ou modifier leurs propres gabarits. En regardant plusieurs blogs Typepad, la plupart d'entre eux ou tous suivent la nomenclature et la structure défine par ces gabarits.

La structure standard est comme suit :

<body class="layout-two-column-right">
 <div id="container">
  <div id="container-inner" class="pkg">
   <div id="pagebody">
    <div id="pagebody-inner" class="pkg">
     <div id="alpha">
      <div id="alpha-inner" class="pkg">
        ENTREE INDIVIDUELLE
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</body>

<div class="entry" id="entry-#####">
  <h3 class="entry-header">POST TITLE</h3>
 <div class="entry-content">
  <div class="entry-body">
    CONTENU BILLET
  </div>
   <a id="more"></a>
   <div class="entry-more">
     PLUS DE CONTENU DU BILLET
   </div>
 </div>
 <p class="entry-footer">
   PIED DE PAGE DU BILLET
 </p>
</div>

Je ne peux pas filer dans les gabarits où est défini le PIED DE PAGE DU BILLET. Néanmoins, nous pouvons voir les résultats à partir d'un blog échantillon :

<span class="post-footers">Posted by NOM_AUTEUR in CATEGORIE</span> 
<span class="separator">|</span> 
<a class="permalink" href="ENTRY_URI">Permalink</a>
| <a href="COMMENT_URI">Comments (2)</a>
| <a href="TRACKBACKS_URI">TrackBack (0)</a>

Noms de Classe Clés

"entry" enferme tous les éléments dans une entrée
"entry-content" contient tout le texte de l'entrée, plus du texte additionnel disant "here's more"
"entry-header" contient le titre du billet
"permalink" contient l'URI du billet
il n'existe pas d'identification claire de "here's all the entries"
il n'existe pas d'identification claire de l'auteur du billet

Concepts Gabarit

all posts
an individual post
post title
post author
post posting time
post content, which includes the next two
post content (first part)
post content (expended part)
post URI (permalink)

WordPress

http://wordpress.org

WordPress est un système de blog GPLisé fondé sur PHP et MySQL. WordPress appelle ses gabarits des "themes" -- plus d'information. Wordpress n'a pas un ensemble standardisé de noms de classe pour identifier des parties du contenu du weblog. J'ai inclus un certain nombre d'exemples de ce qui peut être vu dans la jungle (migré sur exemples ?)

Exemple 1 : Fresh Bananas

<body id="blog">
 <div id="wrap">
  <div id="content" class="two_column">
   <div class="left">
    ENTREES
   </div>
  </div>
 </div>
</body>

<h2>TITRE BILLET</h2>
CONTENU BILLET (PARTIEL)
<p>
 <a href="POST URI" title="Continue reading this post">Continue reading</a>
</p>

Exemple 2 : VanillaMist

<body>
 <div id="main">
  <div id="content">
   ENTREES
  </div>
 </div>
</body>

<div class="post">
 <p class="post-date">Wed 6 Jul 2005
 </p>
 <div class="post-info">
  <h2 class="post-title">
   <a href="http://vanillamist.com/blog/?p=89" rel="bookmark" title="Permanent Link: Podcasts and a new version of Connections soon">Podcasts and a new version of Connections soon</a>
  </h2>
  Posted by AUTHOR under <a href="POST URI" title="View all posts in Blogs and Blogging" rel="category tag">CATEGORY</a>

  <div class="post-content">
   CONTENU BILLET
  </div>

  <div class="post-footer"> </div>
 </div>
</div>

Example 3: Boredom

<body>
 <div id="content">
 </div>
</body>

<div class="post">
 <h2 id="post-5">
  <a href="POST URI" rel="bookmark" title="Permanent Link to TITRE BILLET">TITRE BILLET</a>
 </h2>
 <small>DATE BILLET</small>
 <div class="entry">
  CONTENU BILLET
 </div>
 <p class="postmetadata">
 </p>
</div>

Noms de Classe Clés

Il y a très peu de réutilisation parmi les différents gabarits sélectionnés.

Concepts Gabarit

Post
Title
Author
Date
Content (partiel)
Content (complet)

Une liste de tous les éléments de gabarit est disponible ici.

Xanga

http://www.xanga.com/

Formats de Journal

Before blogs there were journals. Many journals were kept merely on people's computers and not necessarily published.

VJOURNAL

RFC2445 (iCalendar) defines the VJOURNAL object for storing journal entries which are essentially the same as blog posts. Note that hCalendar by virtue of referencing all of RFC 2445, could be said to define VJOURNAL class names.

The basic structure of a series of VJOURNAL entries:

VJOURNAL      - 1
  class         - 0-1
    classparam    - 0-N
    classvalue    - 1; PUBLIC/PRIVATE/CONFIDENTIAL
  created       - 0-1
  description   - 0-1
    altrepparm    - 0-1
    languageparam - 0-1
    text          - 1
  dtstart       - 0-1
  dtstamp       - 0-1
  last-mod      - 0-1
  organizer     - 0-1
    cnparam       - 0-1
    dirparam      - 0-1
    sentbyparam   - 0-1
    languageparam - 0-1
    caladdress    - 1
  recurid       - 0-1
  seq           - 0-1
  status        - 0-1
    statvalue     - 1 DRAFT/FINAL/CANCELLED
  summary       - 0-1
    altrepparm    - 0-1
    languageparam - 0-1
    text          - 1
  uid           - 0-1
  url           - 0-1
  attach        - 0-N
    fmttype       - 0-1; mime type
    url           - 1; url
  attendee      - 0-N
    cutypeparam   - 0-1
    memberparam   - 0-1
    roleparam     - 0-1
    partstatparam - 0-1
    rsvpparam     - 0-1
    deltoparam    - 0-1
    delfromparam  - 0-1
    sentbyparam   - 0-1
    cnparam       - 0-1
    dirparam      - 0-1
    languageparam - 0-1
    caladdress    - 1
  categories    - 0-N
    languageparam - 0-1
    text          - 1-N; text
  comment       - 0-N
    altrepparam   - 0-1
    language-param- 0-1
    text          - 1; text
  contact       - 0-N
    altrepparam   - 0-1
    language-param- 0-1
    text          - 1; text
  exdate        - 0-N
  xrule         - 0-N
  related       - 0-N
    reltypeparam  - 0-1
    text          - other iCalendar component
  rdate         - 0-N
  rrule         - 0-N
  rstatus       - 0-N

Here are some example VJOURNAL entries from the rfc:

     BEGIN:VJOURNAL
     UID:19970901T130000Z-123405@host.com
     DTSTAMP:19970901T1300Z
     DTSTART;VALUE=DATE:19970317
     SUMMARY:Staff meeting minutes
     DESCRIPTION:1. Staff meeting: Participants include Joe\, Lisa
       and Bob. Aurora project plans were reviewed. There is currently
       no budget reserves for this project. Lisa will escalate to
       management. Next meeting on Tuesday.\n
       2. Telephone Conference: ABC Corp. sales representative called
       to discuss new printer. Promised to get us a demo by Friday.\n
       3. Henry Miller (Handsoff Insurance): Car was totaled by tree.
       Is looking into a loaner car. 654-2323 (tel).
     END:VJOURNAL

     BEGIN:VCALENDAR
     VERSION:2.0
     PRODID:-//ABC Corporation//NONSGML My Product//EN
     BEGIN:VJOURNAL
     DTSTAMP:19970324T120000Z
     UID:uid5@host1.com
     ORGANIZER:MAILTO:jsmith@host.com
     STATUS:DRAFT
     CLASS:PUBLIC
     CATEGORY:Project Report, XYZ, Weekly Meeting
     DESCRIPTION:Project xyz Review Meeting Minutes\n
      Agenda\n1. Review of project version 1.0 requirements.\n2.
     Definition
      of project processes.\n3. Review of project schedule.\n
      Participants: John Smith, Jane Doe, Jim Dandy\n-It was
       decided that the requirements need to be signed off by
       product marketing.\n-Project processes were accepted.\n
      -Project schedule needs to account for scheduled holidays
       and employee vacation time. Check with HR for specific
       dates.\n-New schedule will be distributed by Friday.\n-
      Next weeks meeting is cancelled. No meeting until 3/23.
     END:VJOURNAL
     END:VCALENDAR

Here's some analysis of parts of VJOURNAL which may be of interest to hAtom work. Items in bold are considered of interest to hAtom, others can be discarded without further discussion, because they're either machine-only or just don't fit into the weblog use-case.

vjournal
- class - N/A to web, perhaps for archive format
- created - for machines only
- description - "full text"
- dtstart - when the entry is about - doesn't fit in weblog use case
- dtstamp - user creation time
- last-mod - machine use only (for the specific host's copy, not the same as 'updated')
- organizer - who organized the meeting (VJOURNAL's use case includes meeting notes)
- recurid - machine only
- seq - machine only
- status - N/A to WWW, consider for archive
- summary - "title"
- UID - "id/permalink"
- URL - "link"
- attach - "enclosure"
- attendee - who attended the meeting (think meeting notes)
- categories - "tags"
- comment - comments about the journal
- contact - author???
- exdate - N/A
- exrule - N/A
- related - just hyperlinks to other resources
- rrule - N/A
- rdate - N/A
- rstatus - N/A

Formats de Syndication de Fils

All of the blogging tools above can produce syndication feeds from the same underlying content and thus prossibly worth discussing here.

Stephen Downes postulates a syndication/weblog equivalency rule, that RSS + XSLT = XHTML and XHTML + XSLT = RSS. In practice, this may not be exactly true due to syndication feeds often only provide summaries of the entry text and the definition of certain elements of syndications feeds may have ambiguous meaning or interpretation.

This section may be moved elsewhere.

Atom

http://www.atomenabled.org/

Here is the basic structure of an Atom document, showing only required and recommended elements and the number of them that may appear (the rules are little more complicated than shown here, as some elements become optional or required depending on what else is included).

feed           - 1
  id            - 1
  title         - 1; type "text"
  updated       - 1
  link          - 0-1 recommended; type "link"
  author        - 0-N recommended; type "person"
   name           - 1
   email          - 0-1 recommended
   uri            - 0-1 recommended
  entry         - 0-N
   id            - 1
   title         - 1; type "text"
   updated       - 1
   published     - 0-1
   author        - 0-N recommended; type "person"
   content       - 0-1 recommended; type "text";
                   "contains or links to the complete content of the entry"
   link          - 0-N recommended; type "link"
   summary       - 0-1 recommended; type "text"

A note about Atom types

person - describes a person, corporation, or similar entity
text - contains human-readable text; @text defines the encoding of the text itself: "text" (default), "html", "xhtml"
link - is patterned after html's link element; @href is required; @rel, @type, @hreflang, @title, and @length are optional.
published and updated are datetimes

Here's an example Atom feed

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title>Example Feed</title>
  <link href="http://example.org/"/>
  <updated>2003-12-13T18:30:02Z</updated>
  <author>
    <name>John Doe</name>
  </author>
  <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>

  <entry>
    <title>Atom-Powered Robots Run Amok</title>
    <link href="http://example.org/2003/12/13/atom03"/>
    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
    <updated>2003-12-13T18:30:02Z</updated>
    <summary>Some text.</summary>
  </entry>

</feed>

RSS 2.0

http://blogs.law.harvard.edu/tech/rss

RSS 2.0 is not to be confused with RSS 1.0 is based on RDF. More about the various versions of RSS and the reason for their existance can be read on Wikipedia

Here is the basic structure of an RSS document, showing only required and recommended elements and the number of them that may appear:

channel         - 1
  title           - 1; type "text"
  link            - 1; type "link"
  description     - 1; type "text"
  language        - 0-1; type lang
  copyright       - 0-1; type text
  managingEditor  - 0-1; type email
  webMaster       - 0-1; type email
  pubDate         - 0-1; type rfc822
  lastBuildDate   - 0-1; type rfc822
  category        - 0-N; type text
    @domain         - 0-1; type uri
  generator       - 0-1; type text
  docs            - 0-1; type url
  cloud           - 0-1
    @domain         - 1; type url domain
    @port           - 1; type url port
    @path           - 1; type url path
    @registerProcedure - 1; type token
    @protocol       - 1; type {http-post,xml-rpc,soap}
  ttl             - 0-1; type minutes
  image           - 0-1
    url             - 1; type url
    title           - 1; type text
    link            - 1; type url
    width           - 0-1; type pixels
    description     - 0-1; type text
  rating          - 0-1;
  textInput       - 0-1;
    title           1
    description     1
    name            1
    link            1
  skipHours       - 0-1;
  skipDays        - 0-1;
  item            - 0-N
    title           - 0-1*; type text
    link            - 0-1; type url
    description     - 0-1*; type text(?)
    author          - 0-1; type email
    category        - 0-N; type text
      @domain         - 0-1; type uri
    comments      - 0-1; type url
    enclosure     - 0-N;
      @url          - 1; type url
      @length       - 1; type bytes
      @type         - 1; type mime
    guid          - 0-1; type text
      @isPermalink  - 0-1; if true, text is a url
    pubDate       - 0-1; type rfc822
    source        - 0-1; type text
      @url          - 1; type url

* One of title or description must be present

Here's an example RSS 2.0 feed [some editing needed internally to make entities show the correct way]:

<?xml version="1.0"?>
<rss version="2.0">
   <channel>
      <title>Liftoff News</title>
      <link>http://liftoff.msfc.nasa.gov/</link>
      <description>Liftoff to Space Exploration.</description>
      <language>en-us</language>
      <pubDate>Tue, 10 Jun 2003 04:00:00 GMT</pubDate>
      <item>

         <title>Star City</title>
         <link>http://liftoff.msfc.nasa.gov/news/2003/news-starcity.asp</link>
         <description>How do Americans ...
           <a href="http://howe.iki.rssi.ru/GCTC/gctc_e.htm">Star City</a>.
         </description>
         <pubDate>Tue, 03 Jun 2003 09:39:21 GMT</pubDate>
         <guid>http://liftoff.msfc.nasa.gov/2003/06/03.html#item573</guid>

      </item>
   </channel>
</rss>

Un profil XHTML profile pour les Résumés de Site RDF

See Site Summaries in XHTML, used in production for the W3C RSS feed for several years now.

TODO: fill this out

Forum de Discussion / Formats de Bulletin Board

Discussion forum posts are similar to blog posts, so may be relevant. Due to the complexity of table-based layouts, much of the mark-up in the following examples has been stripped. The mark-up and analysis also excludes controls (such as reply buttons).

Moodle

http://moodle.org/

Moodle is an open source course management system used in education. It includes a discussion forum. The forum does not support templating.

<body class="mod-forum" id="mod-forum-discuss">
 <div id="page">
  <div id="header">
   <div class="headermain">COURSE TITLE</div>
   <div class="headermenu">(controls)</div>
  </div>
  <table class="navbar">
   <tr>
    <td>
     <div class="breadcrumb">
	  <a href="BREADCRUMB LINK">BREADCRUMB TITLE</a>+
	 </div>
     (controls)
    </td>
   </tr>
  </table>
  <div id="content">
   (controls)
   ENTRIES
  </div>
 </div>
</body>

<table class="forumpost">
 <tr>
  <td>
   <img src="AVATAR"/>
  </td>
  <td class="topic">
   <div class="subject">POST TITLE</div>
   <div class="author">by <a>AUTHOR</a> - POST DATE</div>
  </td>
 </tr>
 <tr>
  <td class="content">
   POST CONTENT
   <div class="commands"><a>Show Parent</a> | <a>Reply</a></div>
  </td>
 </tr>
</table>

Noms de Classes Clés

"headermain" identifies the course title
"breadcrumb" identifies breadcrumbs
"forumpost" identifies a post
"subject" identifies the post subject
"author" identifies the author, but also includes the date and other text
"content" identifies the content area, but includes some controls also

Concepts

course title
breadcrumb titles and links
post title
post author
post date
post content
original post (to which this is a reply)
author avatar

phpBB

http://www.phpbb.com/

phpBB is a popular GPL discussion forum system. This is based on the forum on the phpBB website.

<body>
 <table>
  <tr>
   <td class="bodyline" bgcolor="white">
    <table width="100%" cellspacing="0" cellpadding="10" border="0">
     <tr>
      <td>
       <table>
        <tr>
         <td>
          <a class="maintitle" href="FORUM LINK">FORUM TITLE</a>
         </td>
        </tr>
       </table>
       <table width="100%" cellspacing="2" cellpadding="2" border="0">
        <tr>
         (controls)
         <td align="left" valign="middle" width="100%">
          <span class="nav"><a href="BREADCRUMB LINK" class="nav">BREADCRUMB TITLE</a>+</span>
         </td>
        </tr>
       </table>

       ENTRIES
       (controls)
       (repeat of controls and navigation)
  ...
 </table>
</body>

<table class="forumline">
 <tr>
  <td class="catHead">(controls)</td>
 </tr>
 <tr>
  <td class="row1">
   <span class="name">
    <a name="###"></a>
    <b>AUTHOR</b>
   </span>
   <span class="postdetails">
    AUTHOR STATUS (registered etc.)
    <img src="AVATAR"/>
    Joined: AUTHOR JOIN DATE
    Posts: AUTHOR POST COUNT
    Location: etc.
   </span>
  </td>
  <td class="row1">
   <table>
    <tr>
     <td>
      <span class="postdetails">Posted: POST DATE Post subject: POST TITLE</span>
     </td>
     <td>(controls)</td>
    </tr>
    <tr>
     <td>
      <span class="postbody">
       CONTENT
      </span>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 (controls)
</table>

Noms de Classes Clés

"maintitle" identifies the forum title and link
"nav" is used for breadcrumbs
"forumline" encloses the post
"name" identifies the author
"postdetails" occurs twice, once providing information about the author, once enclosing the post date and title
"postbody" identifies the post content

Concepts

forum title and link
breadcrumb titles and links
post title
post author
post date
post content
author status
author join date
author avatar
author post count
author location

PunBB

http://punbb.org/

PunBB is GPL forum software. This structure is from the forum on their web site.

<body>
 <div id="punwrap">
  <div id="punviewtopic" class="pun">
   <div id="brdheader" class="block">
    <div class="box">
     <div id="brdtitle" class="inbox">
      <h1><span>SITE SECTION TITLE</span></h1>
      <p><span>SITE SECTION BYLINE</span></p>
     </div>
     (controls)
    </div>
   </div>
  <div id="announce" class="block">
   <h2><span>ANNOUNCEMENT TITLE</span></h2>
   <div class="box">
    <div class="inbox">
     <div><span class="warntext">ANNOUNCEMENT CONTENT</span></div>
    </div>
   </div>
  </div>
  <div class="linkst">
   <div class="inbox">
    (controls)
    <ul>
     <li><a href="BREADCRUMB LINK">BREADCRUMB TITLE</a></li>+
    </ul>
   </div>
  </div>
  ENTRIES
 </div>
</body>

<div id="HTML-ID" class="blockpost">
 <h2>
  <span class="conr">POST NUMBER</span>
  <a href="PERMALINK">POST DATE</a></h2>
 <div class="box">
  <div class="inbox">
   <div class="postleft">
    <dl>
     <dt><strong><a href="AUTHOR PROFILE LINK">AUTHOR NAME</a></strong></dt>
     <dd class="usertitle"><strong>AUTHOR STATUS (e.g. Moderator)</strong></dd>
     <dd class="postavatar"><img src="AVATAR"/></dd>
     <dd>From: AUTHOR LOCATION</dd>
     <dd>Registered: AUTHOR REGISTRATION DATE</dd>
     <dd>Posts: AUTHOR POST COUNT</dd>
     <dd class="usercontacts"><a href="AUTHOR URL">Website</a></dd>
    </dl>
   </div>
   <div class="postright">
    <h3>POST TITLE</h3>
    <div class="postmsg">
	 POST CONTENT
    </div>
    <div class="postsignature">AUTHOR SIGNATURE</div>
   </div>
   <div class="clearer"></div>
   <div class="postfootleft"><p>AUTHOR STATE (online, offline)</p></div>
   <div class="postfootright"><div></div></div>
  </div>
 </div>
</div>

Noms de Classes Clés

"blockpost" encloses a post; the element also has an HTML id
"conr" is the post number within the discussion thread
h1 indicates the site section title
"announce" and "warntext" indicate the announcement title and content
ul inside "linkst" identifies breadcrumbs
h2 encloses the post number, post date, and permalink, distinguishable by HTML a and span elements
h3 identifies the post title
"postmsg" identifies the post content
the author name and URL are in dl dt a
additional author information is in dl dd
"usertitle" identifies the author status
"postavatar" indentifies the author's avatar
"usercontacts" identifies author contact information

Concepts

site section title and byline
announcement title and content
breadcrumb titles and links
post title
post author
post date
permalink
post sequence number
author status
author avatar
author location
author registration date
author post count
author URL
author profile link
author signature
author contact information (website)

YaBB

http://www.yabbforum.com/

YaBB is a popular commercial/free forum system. This example is based on the forum on the YaBB site. I have stripped some presentational class names.

<body>
 <div class="container">
  <div class="maincontent">
   <div class="seperator">
    <table>
     (controls, login)
     <tr>
      <td>
       <span id="fscroller">FORUM WELCOME</span>
       (controls)
      </td>
     </tr>
    </table>
   </div>
   <div class="navbarcontainer">
    <table>
     <tr>
      <td>
       <span>
        <b><a href="BREADCRUMB LINK" class="nav">BREADCRUMB TITLE</a>+</b>
        (Moderators: <a href="MODERATOR LINK">MODERATOR NAME</a>+)
        <div class="seperator">
        <table>
         <tr>
          <td>
	   <span>FORUM DESCRIPTION.</span>
          </td>
         </tr>
        </table>
       </div>
      </span>
      </td>
      (controls)
     </tr>
    </table>
   </div>
   ENTRIES
  </div>
  (repeat of navigation)
 </div>
</body>

<div class="displaycontainer">
<table>
 <tr>
  <td>
   <a><b>POST TITLE</b></a>
   AUTHOR STATUS (junior member, senior, etc.)<br />
   <img src="<AVATAR>" />
   AUTHOR BYLINE
   Posts: ###
   Gender: <img/>
  </td>
  <td>
   <div>
    <b>POST TITLE</b>
    <span><b>Reply #nnn on:</b> POST DATE</span>
   </div>
   <div>
    <span class="message">
     CONTENT
    </span>
   </div>
  </td>
 </tr>
 <tr>(controls)</tr>
</table>
</div>

Noms de Classes Clés

"displaycontainer" encloses a post
"message" identifies post content
no other fields are identified by meaningful mark-up

Concepts

forum welcome message
forum description
forum moderators (names and links)
breadcrumbs (titles and links)
post title
post author
post date
post content
original post (to which this is a reply)
author status
author byline
author avatar
author gender
author post count

Exemples dans la jungle

Early work on extending standardized nodes in Drupal: http://factorycity.net/demos/drupal/event_system/microformats/
Microformat-style hooks in forum posts for Javascript annotation: http://www.geof.net/code/annotation/technical.html#microformats

Voir aussi

hAtom - la proposition brouillon fondée sur cette information
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 que nous faisons ici)

Retrieved from "http://microformats.org/wiki/index.php?title=blog-post-formats-fr&oldid=36325"

@@ Line 1: / Line 1: @@
-ricdar
 = Formats de Blog Actuels  =
-Il y a un besoin pour dÃ©velopper des classes standards pour les billets de blogs (c'est Ã  dire un microformat!).
+Il y a un besoin pour développer des classes standards pour les billets de blogs (c'est à dire un microformat!).
-Cette page sert Ã  documenter la liste actuelle des schÃ©mas, formats et efforts sur les billets de blogs individuels en tant qu'historique pour la conception d'un simple microformat de billet de blog.
+Cette page sert à documenter la liste actuelle des schémas, formats et efforts sur les billets de blogs individuels en tant qu'historique pour la conception d'un simple microformat de billet de blog.
-== Participants Ã  la Discussion ==
+== Participants à la Discussion ==
 === Editeur ===
@@ Line 12: / Line 11: @@
 === Auteurs ===
-* [http://tantek.com/log/ Tantek Ãelik], [http://technorati.com/ Technorati]
+* [http://tantek.com/log/ Tantek Çelik], [http://technorati.com/ Technorati]
 * [http://blog.factoryjoe.com/ Chris Messina], [http://flock.com Flock, Inc.]
 * [http://blogmatrix.blogmatrix.com/ David Janes], [http://www.blogmatrix BlogMatrix, Inc.]
@@ Line 21: / Line 20: @@
 * [[Christophe Ducamp]] (traduction en cours)
-=== Types IntÃ©ressÃ©s ===
+=== Types Intéressés ===
 * [http://theryanking.com/blog/ Ryan King], [http://technorati.com/ Technorati]
@@ Line 29: / Line 28: @@
 * http://www.blogger.com/home
-Blogger est l'und des plates-formes de blogging les plus anciennes, les mieux connus et probablement la plus utilisÃ©e. RachetÃ©e par [http://www.google.com Google] en fÃ©vrier 2003. Blogger permet aux utilisateurs de crÃ©er et Ã©diter leurs propres gabarits et fournit aussi un grand nombre de gabarits (plus ou moins) sÃ©duisants que l'utilisateur peut choisir. Malheureusement, vous devez vous connecter Ã  un compte blogger pour voir la sÃ©lection de gabarit.
+Blogger est l'und des plates-formes de blogging les plus anciennes, les mieux connus et probablement la plus utilisée. Rachetée par [http://www.google.com Google] en février 2003. Blogger permet aux utilisateurs de créer et éditer leurs propres gabarits et fournit aussi un grand nombre de gabarits (plus ou moins) séduisants que l'utilisateur peut choisir. Malheureusement, vous devez vous connecter à un compte blogger pour voir la sélection de gabarit.
-Voici plusieurs gabarits Blogger, sÃ©lectionnÃ©s par hasard Ã  partir des propositions. Les gabarits les plus rÃ©cents semblent converger vers un vocabulaire pour identifier les sections des billets. Ceci peut Ãªtre parce qu'ils partagent une histoire Ã©volutionnaire Ã  partir d'un gabarit commun. J'ai inclus trois exemples ici :
+Voici plusieurs gabarits Blogger, sélectionnés par hasard à partir des propositions. Les gabarits les plus récents semblent converger vers un vocabulaire pour identifier les sections des billets. Ceci peut être parce qu'ils partagent une histoire évolutionnaire à partir d'un gabarit commun. J'ai inclus trois exemples ici :
 <pre><nowiki>
@@ Line 94: / Line 93: @@
 </nowiki></pre>
-==== Noms de Classe ClÃ©s ====
+==== Noms de Classe Clés ====
-* les gabarits les plus rÃ©cents semblent utiliser "main" pour identifier un conteneur pour toutes les entrÃ©es
+* les gabarits les plus récents semblent utiliser "main" pour identifier un conteneur pour toutes les entrées
-* les gabarits les plus rÃ©cents utilisent "post" pour identifier une entrÃ©e de weblog
+* les gabarits les plus récents utilisent "post" pour identifier une entrée de weblog
-* les gabarits les plus rÃ©cents utilisent "post-title" pour identifier le titre de l'entrÃ©e
+* les gabarits les plus récents utilisent "post-title" pour identifier le titre de l'entrée
-* au delÃ  de Ã§a, il y a peu de standardisation
+* au delà de ça, il y a peu de standardisation
 ==== Concepts de gabarits ====
@@ Line 115: / Line 114: @@
 === Drupal ===
 * http://drupal.org
-* varient selon le thÃ¨me
+* varient selon le thème
 === LiveJournal ===
@@ Line 123: / Line 122: @@
 * http://www.sixapart.com/movabletype/
-MovableType est une plateforme de blogging basÃ©e sur perl. Notez que le MT est vieux et largement dÃ©ployÃ© et il existe beaucoup de variantes trÃ¨s diffÃ©rentes sur les gabarits dans la jungle.
+MovableType est une plateforme de blogging basée sur perl. Notez que le MT est vieux et largement déployé et il existe beaucoup de variantes très différentes sur les gabarits dans la jungle.
 Le gabarit standard pour la page d'accueil du weblog (le "[http://www.sixapart.com/movabletype/default_templates#main_index main index]") a la structure suivante :
@@ Line 151: / Line 150: @@
 </nowiki></pre>
-==== Noms de Classe ClÃ©s ====
+==== Noms de Classe Clés ====
-* "content" peut envelopper une entrÃ©e individuelle ou toutes les entrÃ©es, selon le contexte
+* "content" peut envelopper une entrée individuelle ou toutes les entrées, selon le contexte
-* "h2" enferme la date du billet (littÃ©ralement : l'heure n'est pas incluse)
+* "h2" enferme la date du billet (littéralement : l'heure n'est pas incluse)
 * "h3" enferme le titre
 * il n'y a pas d'enveloppe standard pour tout le contenu
 * il n'y a pas d'identification claire de "here's all the entries"
 * il n'y a pas d'identification claire de l'auteur du billet
-* le permalien n'est pas nÃ©cessairement sur la page quelque part
+* le permalien n'est pas nécessairement sur la page quelque part
 ==== Concepts de Gabarit ====
@@ Line 175: / Line 174: @@
 * http://www.sixapart.com/typepad/
-Typepad est un service d'hÃ©bergement de MovableType. Il fournit une liste de [http://help.typepad.com/tags/default_templates.html gabarits par dÃ©faut] et [ "modules gabarits"] Ã  partir desquels les utilisateurs peuvent construire ou modifier leurs propres gabarits. En regardant plusieurs blogs Typepad, la plupart d'entre eux ou tous suivent la nomenclature et la structure dÃ©fine par ces gabarits.
+Typepad est un service d'hébergement de MovableType. Il fournit une liste de [http://help.typepad.com/tags/default_templates.html gabarits par défaut] et [ "modules gabarits"] à partir desquels les utilisateurs peuvent construire ou modifier leurs propres gabarits. En regardant plusieurs blogs Typepad, la plupart d'entre eux ou tous suivent la nomenclature et la structure défine par ces gabarits.
 La structure standard est comme suit :
@@ Line 213: / Line 212: @@
 </nowiki></pre>
-Je ne peux pas filer dans les gabarits oÃ¹ est dÃ©fini le PIED DE PAGE DU BILLET. NÃ©anmoins, nous pouvons voir les rÃ©sultats Ã  partir d'un [http://www.bluedogbob.com/ blog Ã©chantillon] :
+Je ne peux pas filer dans les gabarits où est défini le PIED DE PAGE DU BILLET. Néanmoins, nous pouvons voir les résultats à partir d'un [http://www.bluedogbob.com/ blog échantillon] :
 <pre><nowiki>
@@ Line 223: / Line 222: @@
 </nowiki></pre>
-==== Noms de Classe ClÃ©s ====
+==== Noms de Classe Clés ====
-* "entry" enferme tous les Ã©lÃ©ments dans une entrÃ©e
+* "entry" enferme tous les éléments dans une entrée
-* "entry-content" contient tout le texte de l'entrÃ©e, plus du texte additionnel disant "here's more"
+* "entry-content" contient tout le texte de l'entrée, plus du texte additionnel disant "here's more"
 * "entry-header" contient le titre du billet
 * "permalink" contient l'URI du billet
@@ Line 245: / Line 244: @@
 * http://wordpress.org
-WordPress est un systÃ¨me de blog GPLisÃ© fondÃ© sur PHP et MySQL. WordPress appelle ses gabarits des "themes" -- [http://wordpress.org/extend/themes/ plus d'information]. Wordpress n'a pas un ensemble standardisÃ© de noms de classe pour identifier des parties du contenu du weblog. J'ai inclus un certain nombre d'exemples de ce qui peut Ãªtre vu dans la jungle (migrÃ© sur  [[blog-post-examples-fr|exemples]] ?)
+WordPress est un système de blog GPLisé fondé sur PHP et MySQL. WordPress appelle ses gabarits des "themes" -- [http://wordpress.org/extend/themes/ plus d'information]. Wordpress n'a pas un ensemble standardisé de noms de classe pour identifier des parties du contenu du weblog. J'ai inclus un certain nombre d'exemples de ce qui peut être vu dans la jungle (migré sur  [[blog-post-examples-fr|exemples]] ?)
 Exemple 1 : [http://nokrev.com/older/ Fresh Bananas]
@@ Line 318: / Line 317: @@
-==== Noms de Classe ClÃ©s ====
+==== Noms de Classe Clés ====
-Il y a trÃ¨s peu de rÃ©utilisation parmi les diffÃ©rents gabarits sÃ©lectionnÃ©s.
+Il y a très peu de réutilisation parmi les différents gabarits sélectionnés.
 ==== Concepts Gabarit  ====
@@ Line 329: / Line 328: @@
 * Content (complet)
-Une liste de tous les Ã©lÃ©ments de gabarit est [http://codex.wordpress.org/Template_Tags disponible ici].
+Une liste de tous les éléments de gabarit est [http://codex.wordpress.org/Template_Tags disponible ici].
 === Xanga ===
@@ Line 636: / Line 635: @@
 </nowiki></pre>
-=== Un profil XHTML profile pour les RÃ©sumÃ©s de Site RDF ===
+=== Un profil XHTML profile pour les Résumés de Site RDF ===
 See [http://www.w3.org/2000/08/w3c-synd/ Site Summaries in XHTML], used in production for the W3C RSS feed for several years now.
 * TODO: fill this out
@@ Line 692: / Line 691: @@
 </nowiki></pre>
-==== Noms de Classes ClÃ©s ====
+==== Noms de Classes Clés ====
 * "headermain" identifies the course title
@@ Line 788: / Line 787: @@
 </nowiki></pre>
-==== Noms de Classes ClÃ©s ====
+==== Noms de Classes Clés ====
 * "maintitle" identifies the forum title and link
@@ Line 882: / Line 881: @@
 </nowiki></pre>
-==== Noms de Classes ClÃ©s ====
+==== Noms de Classes Clés ====
 * "blockpost" encloses a post;  the element also has an HTML id
@@ Line 994: / Line 993: @@
 </nowiki></pre>
-==== Noms de Classes ClÃ©s ====
+==== Noms de Classes Clés ====
 * "displaycontainer" encloses a post
@@ Line 1,025: / Line 1,024: @@
 =Voir aussi=
-* [[hatom-fr|hAtom]] - la proposition brouillon fondÃ©e sur cette information
+* [[hatom-fr|hAtom]] - la proposition brouillon fondée sur cette information
 * [[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 que nous faisons ici)
+* [[blog-description-format-fr]] - comment décrire un blog (à l'opposé des entrées individuelles, ce que nous faisons ici)

blog-post-formats-fr: Difference between revisions

Latest revision as of 20:46, 20 December 2008

Formats de Blog Actuels

Participants à la Discussion

Editeur

Auteurs

Traduction

Types Intéressés

Outils

Blogger

Noms de Classe Clés

Concepts de gabarits

Blosxom

Drupal

LiveJournal

MovableType

Noms de Classe Clés

Concepts de Gabarit

TypePad

Noms de Classe Clés

Concepts Gabarit

WordPress

Noms de Classe Clés

Concepts Gabarit

Xanga

Formats de Journal

VJOURNAL

Formats de Syndication de Fils

Atom

RSS 2.0

Un profil XHTML profile pour les Résumés de Site RDF

Forum de Discussion / Formats de Bulletin Board

Moodle

Noms de Classes Clés

Concepts

phpBB

Noms de Classes Clés

Concepts

PunBB

Noms de Classes Clés

Concepts

YaBB

Noms de Classes Clés

Concepts

Exemples dans la jungle

Voir aussi

Navigation menu

Search