User:JojaBa

Publié dans le domaine public

J'accepte de mettre à disposition toutes mes contributions texte ou images, à moins que cela soit déclaré différemment dans le domaine public. Soyez attentif au fait que d'autres contributeurs pourraient ne pas faire pareil, donc si vous souhaitez utiliser les pages auxquelles j'ai contribué sous les termes du domaine public, veuillez vérifier les pages utilisateur des autres contributeurs.

Je me présente

Je me présente rapidement. Mon pseudo est jojaba. Cela fait quelques années que je m'occupe de traduire des extensions pour les produits Mozilla. Je fais partie de l'équipe FR de BabelZilla. D'autre part, je m'implique depuis quelques mois dans le développement (en toute modestie et avec mes connaissances réduites en php) du SGC Plume CMS. J'aime de plus en plus développer des sites en respectant les standards en XHTML strict donc et CSS2. Cela explique pourquoi je m'intéresse aux microformats que je viens de découvrir. Quelques liens pour apprendre à me connaître :

• Site perso
• Mon profil sur BabelZilla
• Plume CMS

Mes interrogations

div obligatoire pour adr

J'ai vu à plusieurs reprises un formatage d'adresse pour une hcard comme suit (exemple tiré de la page hcard-authoring-fr)  :

<div id="contact" class="vcard">
   <h2>Contactez-Moi</h2>
   <h3 class="fn">Jeanne Doe</h3>
   <p>Vous pouvez me contacter par courrier électronique à 
    <a class="email" href="mailto:jane@example.com">jeanne@example.com</a>, 
    ou me joindre à l'adresse suivante :</p>
   <div class="adr">
     <div class="street-address">255 Une rue</div>
     <div class="locality">Une Ville</div>
     <div class="region">Un Endroit</div>
   </div>
</div>

Pour les balises <div> de l'adresse ne pourrait-on pas les remplacer par une liste à puce (unordered list) ? Ou faut-il faut-il absolument utiliser la ablise générique ?

<div id="contact" class="vcard">
   <h2>Contactez-Moi</h2>
   <h3 class="fn">Jeanne Doe</h3>
   <p>Vous pouvez me contacter par courrier électronique à 
    <a class="email" href="mailto:jane@example.com">jeanne@example.com</a>, 
    ou me joindre à l'adresse suivante :</p>
   <ul class="adr">
     <li class="street-address">255 Une rue</li>
     <li class="locality">Une Ville</li>
     <li class="region">Un Endroit</li>
   </ul>
</div>

Je pense que sur le plan de la sémantique, cela est meilleur ! D'après Christophe tout ce que je viens de dire est OK !

Possibilité de formatage pour lien

Si l'on veut uniquement donner un lien dans la hcard, peut-on faire ainsi ?

<p class="vcard"><a class="email" href="mailto:jane@example.com">Contactez-Moi</a></p>

Peut-on utiliser une balise inline à la place d'une balise bloc pour la vcard ?

<span class="vcard"><a class="email" href="mailto:jane@example.com">Contactez-Moi</a></span>

Expérimentations

Je vais tenter de comprendre le mécanisme des microformats en appliquant ces "petites bestioles" au thème pour les SGC Plume CMS que je développe actuellement. Ce thème est visible sur le site test que j'ai mis en place. Plume est basé sur le code de dotclear (vous pourrez notamment le constater en allant dans le Manager), mais il a été développé non pas en tant que plate-forme pour journal Web (weblog ou blog) mais plutôt afin d'être géré en tant que site Web. Sa structure est donc comparable à un site Web traditionnel :

• menu d'accès aux différentes catégories
• catégories dans lesquelles on range les ressources
• Deux types de ressources : brèves (actualités ou court texte d'annonce) et articles (texte plus développé avec possibilité de publier plusieurs chapitres)
• Possibilité de publier, gérer des commentaires.
• Génération automatique du plan du site
• Respectant le standard Web
• ...

[Je m'arrête là, j'ai l'impression qu'emporté par mon élan, je fais plus la promotion de Plume CMS qu'une description !]

Informations sur un article

Dans un premier temps je souhaiterais m'attaquer à un article. Je copie/colle ici l'en-tête d'un article, en l'occurrence l'article sur les tests wiki de plume cms, afin de proposer une mise en place de microformats et faire valider cela par les spécialistes du sujet.

<h2 class="article">Test de mise en forme WIKI</h2>

 <div id="art-pages-list"><h3>Chapitres de l'article</h3>
   <ol>
     <li class="current"><a href="/?/Test-de-mise-en-forme-WIKI">Une galerie</a></li>
     <li><a href="/?/Test-de-mise-en-forme-WIKI2">Les éléments inline</a></li>
   </ol>
 </div>
 
 <div class="infos">
   <p><span class="datetime">
      23-02-2008 à 14:54
      </span>
      par
      <span class="author">
      <a href="mailto:%61%64%6d%69%6e%40%70%6c%75%6d%65%2e%63%6d%73">
      Main admin
      </a>
      </span>
   </p>
   <p><span class="cat">Dans <a href="/?/">Page d'accueil</a></span></p>
   <p><span class="link"><a href="/?/Test-de-mise-en-forme-WIKI">Lien</a></span></p>
   <p>
      <span class="comments">
      Nombre de commentaires :
      </span>
       <a href="#comments" title="Commentaires">
       4
      </a>
   </p> 
 </div>
 
 <div class="description">
   <p>
   Pour tester les différentes possibilités de formatage en utilisant
   le langage WIKI…
   </p>
 </div>

Certains éléments de cette en-tête devraient être facile à marquer (auteur et courriel de l'auteur avec hcard ; titre, date, contenu avec hatom). Par contre d'autres éléments me semblent plus difficiles à baliser. Par exemple la catégorie dans laquelle se situe l'article, le permalien (je ne sais pas si j'ai le droit ici d'utiliser hreview). Pour les différents chapitre de l'article, je ne sais pas si une classe est prévue. D'autre part je ne sais pas si on peut imbriquer des propriétés les unes dans les autres (ici par exemple, imbriquer hcard dans hatom)... Bpon ben, je vais commencer par une première proposition que je testerai dès que j'ai un peu plus de temps :

<div class="hentry">
 <h2 class="article"><span class="entry-title">Test de mise en forme WIKI</span></h2>

 <div id="art-pages-list"><h3>Chapitres de l'article</h3>
   <ol>
     <li class="current"><a href="/?/Test-de-mise-en-forme-WIKI" rel="chapter">Une galerie</a></li>
     <li><a href="/?/Test-de-mise-en-forme-WIKI2" rel="chapter">Les éléments inline</a></li>
   </ol>
 </div>
 
 <div class="infos">
   <p><span class="published">
      23-02-2008 à 14:54
      </span>
      par
      <span class="author">
      <span class="vcard">
      <a class="email" href="mailto:%61%64%6d%69%6e%40%70%6c%75%6d%65%2e%63%6d%73">
      <span class="fn">Main admin</span>
      </a>
      </span>
      </span>
   </p>
   <p><span class="cat">Dans <a href="/?/" rel="category">Page d'accueil</a></span></p>
   <p><span class="link"><a href="/?/Test-de-mise-en-forme-WIKI" rel="bookmark">Lien</a></span></p>
   <p>
      <span class="comments">
      Nombre de commentaires :
      </span>
       <a href="#comments" title="Commentaires">
       4
      </a>
   </p> 
 </div>
 
 <div class="description">
   <p class="entry-summary">
   Pour tester les différentes possibilités de formatage en utilisant
   le langage WIKI…
   </p>
 </div>
</div>

Pour résumer ce que je propose, voici l'arborescence des class microformats du fragment de code ci-dessus :

hatom

• hentry
  • class: entry-title
  • rel: chapter
  • rel: chapter
  • class: published
  • class: author
    • vcard
      • class: email
      • class: fn
  • rel: category
  • rel: bookmark
  • class: entry-summary

Comme dit, j'ai imbriqué vcard dans author de hatom (ne suis pas sûr qu'on puisse faire cela !). Ce serait bien si je pouvais également identifier le lien vers la ressource, le nombre de commentaires (peut-être existe-t-il déjà des class ou des rel pour ça...), je sais que cela existe pour hreview (permalink), mais celui-là, je le garde pour les commentaires. Encore une interrogation : peut-on omettre la racine hatom et ne mettre que hentry ?

Test en nature

Je vais directement tester ici avec Operator :

Test de mise en forme WIKI

Chapitres de l'article

1. <a href="http://plumecmstest.free.fr/?/Test-de-mise-en-forme-WIKI" rel="chapter">Une galerie</a>
2. <a href="http://plumecmstest.free.fr/?/Test-de-mise-en-forme-WIKI2" rel="chapter">Les éléments inline</a>

23-02-2008 à 14:54 par <a class="email" href="mailto:%61%64%6d%69%6e%40%70%6c%75%6d%65%2e%63%6d%73"> Main admin </a>

Dans <a href="/?/" rel="category">Page d'accueil</a>

<a href="/?/Test-de-mise-en-forme-WIKI" rel="bookmark">Lien</a>

Nombre de commentaires : <a href="#comments" title="Commentaires"> 4 </a>

Pour tester les différentes possibilités de formatage en utilisant le langage WIKI…

Commentaire d'article

Pour les commentaires, on va admettre que ce sont des critiques concernant l'article, c'est donc hreview qu'il faudra utiliser. Voici le code original :

 <div class="infos">
   <p>
    <span class="author">
    jojaba
    </span>
     
    <span class="link">
    <a href="http://jojaba.free.fr">
    http://jojaba.free.fr
    </a>
    </span>
   </p>
 </div>
 
 <div class="comment-content">
    <span class="px-comment">
    Oui, pour moi c'était également un bon souvenir ! Le soleil, le paysage méditerranéen,
    la plage...
    </span>
 </div>

Et voici ce que je propose pour donner à ce code davantage de sens :

<div class="hreview">

 <div class="infos">
   <p class="reviewer vcard">
    <span class="fn">
    jojaba
    </span>
     
    <span class="link">
    <a class="url" href="http://jojaba.free.fr">
    http://jojaba.free.fr
    </a>
    </span>
   </p>
 </div>

 
 <div class="description">
    <span class="px-comment">
    Oui, pour moi c'était également un bon souvenir ! Le soleil, le paysage méditerranéen,
    la plage...
    </span>
 </div>

</div>

Arborescence proposée ici :

hreview

• hreviewer card
  • class: fn
  • class: url
• class: description

Là je me suis inspiré d'un exemple dans l'article hreview-fr. Je pourrai ajouter un permalien vers la ressource commentée et peu-être même une date de publication, faut voir...

Proposition de traductions de termes liés aux microformats

Je compte lister ici des proposions de traduction de termes spécifiques (ou non) à la traduction de pages concernant ce sujet. Commentaires et propositions bienvenus !

Summary

Résumé (et non sommaire comme je l'ai vu quelque part sur ce site)

Tag

Balise ou marqueur (balise pour les tags html et marqueurs pour les tags dans un blog par exemple)

Tagspaces

Espaces de marqueurs (autres propositions bienvenues !)

Discussion

Je viens de terminer la traduction de la page existing-rel-values-fr. Si vous souhaitez que je continue à traduire, veuillez m'indiquer la procédure à suivre et surtout les pages à traduire. Merci

--Jojaba 13:02, 3 Mar 2008 (PST)

Bonjour et bienvenue Jojaba. Merci de votre enthousiasme pour les microformats. Que diriez-vous d'un rdv téléphonique pour faire connaissance : appelons-nous quand vous voulez (LD bureau 01 58 40 36 41) ? Pour faire simple twittez-moi en direct votre ligne directe et je vous appelle ? -- xtof

Je préfère correspondre par mail si cela ne vous dérange pas... --Jojaba 14:22, 3 Mar 2008 (PST)