Les éléments d'un XHTML ayant du sens

Tantek Çelik Chief Technologist
Avertissement !

Vous êtes sur une Traduction en cours.

Les contenus de cette présentation sont destinés aux microformateurs, à savoir toutes celles et ceux qui constitueront la communauté francophone des enthousiastes pour supporter les microformats. Seul le lien original fait référence.

Si vous avez quelque remarque sur la traduction, merci par avance de m'en faire part sur ce formulaire de contact.

Merci !

Christophe Ducamp Microformateur - Traducteur Amateur Enthousiasmé pour essayer d'être... CHIC "les microformateurs"
"XHTML"
- Le Web d'aujourd'hui
- "compatible" HTML 4 et XHTML 1.0
- Valide
"Ayant du Sens"
- Strict et non ~~Transitional~~
- ~~Mise en Forme par les Tables~~
- Eviter les <b> <br/> <i> <sub> <sup>
- <h1> != gros et gras
- <em> != produit de l'italique
- <blockquote> != indente ça
- Pour en savoir plus, voir :
  - Jetez les Tableaux par la Fenêtre — Bowman
  - Pourquoi les tables sont stupides pour le layout — Merikallio & Pratt
  - informIT: The Meaning of Semantics — Holzschlag
Précisément Ayant du Sens
- Boucles d'Or
- <div> & <span> en derniers recours
Eléments : simple information de contact
- élément <address>
- Peut-être l'élément HTML le plus mal nommé
  - PAS pour baliser les "addresses" au sens littéral
- Pour :
  - l'information de contact d'un document...
  - ...ou d'une partie essentielle de celui-ci, comme un formulaire.

Eléments : simple information de contact

élément <address>


<p>
 Contactez svp 
          le webmestre chez exemple dot com
 si vous trouvez quelque problème sur ce site.
</p>

Eléments : simple information de contact

élément <address>


<p><div>
 Contactez svp
 <address>le webmestre chez exemple dot com</address>
 si vous trouvez quelque problème sur ce site.
</p></div>

Eléments : simple information de contact

élément <address>


<div>
 Contactez svp
 <address>le webmestre chez exemple dot com</address>

 si vous trouvez quelque problème avec ce site.
</div>

Eléments : citation de blog
- éléments <cite> & <blockquote>

Eléments : citation de blog

éléments <cite> & <blockquote>


<p>      Eric Meyer        écrivait :</p>

<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>

<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Eléments : citation de blog

<cite> & <blockquote> elements


<p><cite>Eric Meyer</cite> wrote:</p>

<blockquote>
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Eléments : citation de blog

éléments <cite> & <blockquote>


<p><cite>Eric Meyer</cite> wrote:</p>

<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Eléments : citation de blog

éléments <cite> & <blockquote>


<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.

</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Eléments : correction / mise à jour
- éléments <del> & <ins>

Eléments : correction / mise à jour

éléments <del> & <ins>


<p> 
Le robot utilise un 
     détecteur-radar
(correction : détecteur-visuel)
pour naviguer dans la pièce.</p>

<p>
Mise à jour : Apparamment il a aussi 
un microphone stéréo.</p>

Eléments : correction / mise à jour

éléments <del> & <ins>


<p> 
Le robot utilise un 
<del>détecteur-radar</del>

<ins>détecteur-visuel</ins>
pour naviguer dans la pièce.</p>
<ins>
<p>
Mise à jour : Apparamment il a aussi 
un microphone stéréo.</p>
</ins>

Eléments : correction / mise à jour

éléments <del> & <ins>


<p> 

Le robot utilise un 
<del>détecteur-radar</del>
<ins>détecteur-visuel</ins>
pour naviguer dans la pièce.</p>
<ins>
<p>
Mise à jour : Apparamment il a aussi 
un microphone stéréo.</p>

</ins>

Eléments : correction / mise à jour
- avec quelques règles de style :
- ```
p ins,p del { display:inline }
ins { text-decoration:underline }
del { text-decoration:line-through }
```
- Le robot utilise un ~~détecteur-radar~~ détecteur-visuel pour naviguer dans la pièce.
  
  Mise à jour : Apparamment il a aussi un microphone stéréo.
Eléments : table sémantique

Guthrie MacFarlane

1.30pm Brett, John, David Roger

2.15pm Dean Lisa, Peter

Eléments : table sémantique

attributs 'axis' & 'headers'


<table>
 <tr><th></th>

     <th                        >Guthrie</th>
     <th                        >MacFarlane</th></tr>
 <tr><th                    >1.30pm</th>

     <td                >Brett, John, David</td>
     <td                >Roger</td></tr>
 <tr><th                    >2.15pm</th>

     <td                >Dean</td>     
     <td                >Lisa, Peter</td></tr>
</table>

Eléments : table sémantique

attributs 'axis' & 'headers'
ajouter 'id' et 'axis' aux <th>s


<table>
 <tr><th></th>

     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>
 <tr><th id="t1" axis="time">1.30pm</th>

     <td                >Brett, John, David</td>
     <td                >Roger</td></tr>
 <tr><th id="t2" axis="time">2.15pm</th>

     <td                >Dean</td>     
     <td                >Lisa, Peter</td></tr>
</table>

Eléments : table sémantique

attributs 'axis' & 'headers'
ajout 'id' et 'axis' aux <th>s
ajouter 'headers' aux <td>s


<table>

 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>
 <tr><th id="t1" axis="time">1.30pm</th>

     <td headers="gu t1">Brett, John, David</td>
     <td headers="mc t1">Roger</td></tr>
 <tr><th id="t2" axis="time">2.15pm</th>

     <td headers="gu t2">Dean</td>     
     <td headers="mc t2">Lisa, Peter</td></tr>
</table>

Eléments : table sémantique

attributs 'axis' & 'headers'
ajout 'id' et 'axis' aux <th>s
ajouter 'headers' aux <td>s


<table>
 <tr><th></th>
     <th id="gu" axis="location">Guthrie</th>
     <th id="mc" axis="location">MacFarlane</th></tr>

 <tr><th id="t1" axis="time">1.30pm</th>
     <td headers="gu t1">Brett, John, David</td>
     <td headers="mc t1">Roger</td></tr>

 <tr><th id="t2" axis="time">2.15pm</th>
     <td headers="gu t2">Dean</td>     
     <td headers="mc t2">Lisa, Peter</td></tr>

</table>

Eléments : table sémantique

avec quelques règles de style :


#t1,td[headers~=t1] { background:yellow }
#mc,td[headers~=mc] { background:yellow }
td[headers~=t1][headers~=mc] { background:#ffA500 }

Eléments : table sémantique

avc quelques règles de style :


#t1,td[headers~=t1] { background:yellow }
#mc,td[headers~=mc] { background:yellow }
td[headers~=t1][headers~=mc] { background:#ffA500 }

	Guthrie	MacFarlane
1.30pm	Brett, John, David	Roger
2.15pm	Dean	Lisa, Peter

Eléments : table sémantique

Résumé : les attributs 'axis' et 'headers'
- rendent les tableaux plus sémantiques
- permettent la stylisation de lignes/colonnes sémantiques
- aident tout aussi bien à l'accessibilité. voir :
  - Techniques HTML pour WCAG 1.0 pour plus détails.
  - Faits et Opinions sur l'Accessibilité PDF de Joe Clark pour la documentation du support des lecteurs d'écrans
- autorisent les usages sémantiques additionnels...
Regardez la présentation "Microformats Evolution" pour plus d'usages des 'axis' et 'headers'.
Mélanges XHTML
- Un ensemble limité d'attributs des éléments du XHTML sémantique
- Les patterns des éléments peuvent exprimer des sémantiques supplémentaires
  - assemblées comme des "briques de Lego" sémantiques
  - beaucoup de combinaisons restant à explorer
- Nom pour de tels patterns XHTML sémantique
  - les personnes demandaient
  - une analogie avec la chimie : des éléments et des mélanges
- Définition de Travail :
  XHTML Composé
  
  Deux éléments XHTML ou plus utilisés en combinaison pour exprimer une sémantique nouvelle, peut-être plus spécifique.
Composés : bloc de code
- l'espace blanc est important
  - utiliser l'élément <pre>
- le texte est du code
  - utiliser l'élément <code>

Composés : bloc de code

<pre> et <code> combinés


<p>

Stylisez la balise address pour qu'elle soit dans la ligne et normale : 
</p>
<p>
address { 
 display:inline;
 font-style:normal;
}
</p>

Composés : bloc de code

<pre> et <code> combinés


<p>
Stylisez la balise address pour qu'elle soit dans la ligne et normale : 
</p>
<p><pre><code>
address { 
 display:inline;
 font-style:normal;
}
</p></code></pre>

Composés : bloc de code

<pre> et <code> combinés


<p>

Stylisez la balise address pour qu'elle soit dans la ligne et normale : 
</p>
<pre><code>
address { 
 display:inline;
 font-style:normal;
}
</code></pre>

Composés : conversation


          Costello
               Well then who's on first?
          Abbott
               Yes.
          Costello
               I mean the fellow's name.
          Abbott
               Who.
          Costello
               The guy on first.
          Abbott
               Who.

Composés : conversation

<dl>
      <dt>Costello</dt>
           <dd>Well then who's on first?</dd>

      <dt>Abbott</dt>
           <dd>Yes.</dd>
      <dt>Costello</dt>
           <dd>I mean the fellow's name.</dd>

      <dt>Abbott</dt>
           <dd>Who.</dd>
      <dt>Costello</dt>
           <dd>The guy on first.</dd>

      <dt>Abbott</dt>
           <dd>Who.</dd>
</dl>

Abus ! Les DLs sont des définitions & descriptions
Mais les conversations sont des orateurs & des citations

Composés : conversation


          Costello
               Well then who's on first?
          Abbott
               Yes.
          Costello
               I mean the fellow's name.
          Abbott
               Who.
          Costello
               The guy on first.
          Abbott
               Who.

Composés : conversation


    <cite>Costello</cite>
               Well then who's on first?
    <cite>Abbott</cite>
               Yes.
    <cite>Costello</cite>

               I mean the fellow's name.
    <cite>Abbott</cite>
               Who.
    <cite>Costello</cite>
               The guy on first.
    <cite>Abbott</cite>

               Who.

Composés : conversation


    <cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote>

    <cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote>
    <cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote>

    <cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>
    <cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote>

    <cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>

Composés : conversation

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote></li>
<li><cite>Abbott</cite>

<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>I mean the fellow's name.</p></blockquote></li>

<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
<li><cite>Costello</cite>

<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>

</ol>

Composés : conversation

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who's on first?</p></blockquote></li>

<li><cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>

<blockquote><p>I mean the fellow's name.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>

<li><cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>

<blockquote><p>Who.</p></blockquote></li>
</ol>

Composés : bibliographie
- Une bibliographie est :
- une liste triée par ordre alphabétique...
  - utilisez <ol> et <li>
- ... de citations
  - utilisez <cite>

Composés : bibliographie

<ol><li> et <cite> combinés



  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
  
  
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
  
  
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998

Composés : bibliographie

<ol><li> et <cite> combinés


     <cite>

  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite>
     <cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite> 
     <cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite>

Composés : bibliographie

<ol><li> et <cite> combinés



<ol class="bibliography">
 <li><cite>
  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite></li>

 <li><cite>
  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite></li>
</ol>

Composés : bibliographie

<ol><li> et <cite> combinés


<ol class="bibliography">
 <li><cite>

  "Colorimetry, Second Edition", CIE Publication 15.2-1986,
     ISBN 3-900-734-00-3.
 </cite></li>
 <li><cite>
  "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 
     17 December 1996.
 </cite></li>
 <li><cite>

  "Cascading Style Sheets, level 2, CSS2 Specification", 
     B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
 </cite></li>
</ol>

Composés : bibliographie
- avec des règles de style :
- ```
ol.bibliography { list-style:none }
.bibliography li { text-indent:-2em }
```
- 1. "Colorimetry, Second Edition", CIE Pub. 15.2-1986, ISBN 3-900-734-00-3.
  2. "Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 17 December 1996.
  3. "Cascading Style Sheets, level 2, CSS2 Specification", B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998
Composés : bibliographie
- Exemple de limites pour la bibliographie
- Le stylisme avait besoin d'un nom de classe — contexte insuffisant
- Les citations ont plus de structure que <cite>
  - title, authors, date
  - Le XHTML manque de ces briques de constrution
Noms de classes significatifs
- Quand les éléments du XHTML sémantique ne suffisent pas
  - essayez les composés XHTML
- Quand les éléments du XHTML sémantique ne suffisent pas
  - utilisez des noms de classes significatifs
Noms de classes significatifs : UTDC

Points-clés :
- Détails sur les Classes Elégantes
  - détaille la sémantique additionnelle, par exemple les éléments de sous-classe XHTML
- Contexte avant la classe
- Sensibilité à la Classe
  - utilisez des mots-soulignés en bas de casse au lieu de la casseChameau
- Des classes Sémantiques au lieu de classes de présentation
- Pour en savoir plus, voir les articles :
Plus sur le XHTML Ayant du Sens
- Comprenez les Eléments
- Apprenez à partir des discussions sur les XHTML Composés :
  - Web Standards Solutions, SimpleQuizzes de Cederholm
  - Suspects usuels : Bowman, Holzschlag, Meyer, Shea, Zeldman, etc.
  - Voir le répertoire de blogs : XHTML pour beaucoup plus encore.
- Expérimentez avec de nouveaux composés
- Discutez avec les pairs
- Apprenez les noms de classes significatifs à partir des autres
- Revoyons-nous à Microformats: Evolving the Web
Merci !
Colophon
- XHTML
- CSS
- S5 v1.1xoxo
- XOXO
- hCard
- hCalendar
- rel="license"
- Quelques droits réservés. CC by-2.0

Les éléments d'un XHTML ayant du sens

Avertissement !

Vous êtes sur une Traduction en cours.

"XHTML"

"Ayant du Sens"

Précisément Ayant du Sens

Eléments : simple information de contact

Eléments : simple information de contact

Eléments : simple information de contact

Eléments : simple information de contact

Eléments : citation de blog

Eléments : citation de blog

Eléments : citation de blog

Eléments : citation de blog

Eléments : citation de blog

Eléments : correction / mise à jour

Eléments : correction / mise à jour

Eléments : correction / mise à jour

Eléments : correction / mise à jour

Eléments : correction / mise à jour

Eléments : table sémantique

Eléments : table sémantique

Eléments : table sémantique

Eléments : table sémantique

Eléments : table sémantique

Eléments : table sémantique

Eléments : table sémantique

Eléments : table sémantique

Résumé : les attributs 'axis' et 'headers'

Mélanges XHTML

Composés : bloc de code

Composés : bloc de code

Composés : bloc de code

Composés : bloc de code

Composés : conversation

Composés : conversation

Composés : conversation

Composés : conversation

Composés : conversation

Composés : conversation

Composés : conversation

Composés : bibliographie

Composés : bibliographie

Composés : bibliographie

Composés : bibliographie

Composés : bibliographie

Composés : bibliographie

Composés : bibliographie

Noms de classes significatifs

Noms de classes significatifs : UTDC

Points-clés :

Plus sur le XHTML Ayant du Sens

Merci !

Colophon