Un thème basé sur HTML5 Boilerplate et Toolbox (et le Codex) «For Those About to Rock» avec WordPress !

Capture d'écran de la catégorie Tutorial de wp4design.com

Basics en bref

• Basé sur HTML5 Boilerplate, le thème Toolbox (par Automattic) et le Codex,
• Prêt pour l’internationalisation,
• Sémantique HTML 5,
• Rôle ARIA (Landmarks),
• Microformats hCard, hAtom, XFN,
• Souple et solide à la fois,
• Sûrement perfectible.

Basics est encore en version bêta et évolue régulièrement. N’hésitez pas à  suivre le compte Twitter @wpbscs pour connaitre les derniers développements en cours.

Dernière version

→ Télécharger la dernière version de Basics.

Tutoriel

• → Lire le tutoriel WordPress de A à Z — B comme Basics
• → Lire les tutoriels rapides concernant Basics sur WordPress & Webdesign.

Articles sur le même sujet

• 9 thèmes WordPress HTML5 pour créateurs de thèmes
• Toolbox — Thème WordPress HTML5 par Automattic
• WordPress de A à Z — F comme Functions.php
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• Roots — Thème WordPress à base de HTML5 Boilerplate

En effet, dans leur précipitation à mettre en avant les attributs des microformats, les promoteurs du « web sémantique » en oublient souvent de travailler le code HTML qui se trouve autour. Bien que les exemples donnés généralement soient destinés à être personnalisés, force est de constater que les exemples sont souvent repris tels quels. Save the markup, save the web? Maybe ;-)

L’exemple hCard fournit par Frédéric

D’après l’exemple donné dans la documentation officielle :

<div class="vcard">
  <a class="fn n url" href="http://fredericdevillamil.com">
    Frédéric de Villamil
  </a>
  <div class="adr">
      <span class="type">Domicile</span>:
      <div class="street-address">12 rue Danton</div>
      <span class="postal-code">94270</span>
      <span class="locality">Le Kremlin-Bicêtre</span>,
      <div class="country-name">France</div>
  </div>
  <div class="tel">
      <span class="type">Mobile</span> +33-6-62-1337
  </div>
  <div>Email:
      <span class="email">frederic@de-villamil.com</span>
  </div>
</div>

Ma proposition de balisage pour le format hCard

J’ai ajouté quelques attributs pour enrichir un peu l’ensemble :

<ol class="vcard">
  <li>
      <h4>Identités</h4>
      <ul>
          <li class="fn n url">
            <a href="http://www.brunobichet.fr">
              Bruno Bichet
            </a>
          </li>
          <li class="fn nickname url">
            <a href="http://www.css4design.com">
              br1o
            </a>
          </li>
          <li class="photo url">
            <a href="http://www.css4design.com/identite_100x100.png">
              Tu veux ma photo ?
            </a>
          </li>
          <li class="note">
            Intégrateur web, blogdesigner et formateur
          </li>
      </ul>
  </li>
  <li>
      <h4 class="type">Adresse</h4>
      <ul class="adr">
          <li class="street-address">1, rue de l'intégration HTML</li>
          <li class="postal-code">69007</li>
          <li class="locality">Lyon sur CSS</li>
          <li class="country-name">France</li>
      </ul>
  </li>
  <li>
      <h4>Téléphones</h4>
      <ul class="tel">
          <li class="type">Mobile : +33 6 00 00 00 00</li>
          <li class="type">Fixe : +33 4 00 00 00 00</li>
      </ul>
  </li>
  <li>
      <h4>Emails</h4>
      <ul>
          <li class="email">infographiste@gmail.com</li>
          <li class="email">bruno.bichet@gmail.com</li>
          <li class="email">br1o@live.fr</li>
      </ul>
  </li>
</ol>

1. Identités

   • Bruno Bichet
   • br1o
   • Tu veux ma photo ?
   • Intégrateur web, blogdesigner et formateur

2. Adresse

   • 1, rue de l’intégration HTML
   • 69007
   • Lyon sur CSS
   • France

3. Téléphones

   • Mobile : +33 6 00 00 00 00
   • Fixe : +33 4 00 00 00 00

4. Emails

   • infographiste@gmail.com
   • bruno.bichet@gmail.com
   • br1o@live.fr

La même hCard en liste de définition

Mise-à-jour : Sur une remarque judicieuse d’Aymeric dans ce commentaire, voici la version « liste de définition ». Cette version semble effectivement plus adaptée : plus légère et le code est plus clair. Que du bon air, heu… du bonheur :)

<dl class="vcard">
  <dt>Identités</dt>
  <dd class="fn n url"><a href="http://www.brunobichet.fr">Bruno Bichet</a></dd>
  <dd class="fn nickname url"><a href="http://www.css4design.com">br1o</a></dd>
  <dd class="photo url"><a href="http://www.css4design.com/identite_100x100.png">Tu veux ma photo ?</a></dd>
  <dd class="note">Intégrateur web, blogdesigner et formateur</dd>


<dt class="type">Adresse</dt>
  <dd class="adr street-address">1, rue de l'intégration HTML</dd>
  <dd class="adr postal-code">69007</dd>
  <dd class="adr locality">Lyon sur CSS</dd>
  <dd class="adr country-name">France</dd>

<dt>Téléphones</dt>
  <dd class="tel type">Mobile : +33 6 00 00 00 00</dd>
  <dd class="tel type">Fixe : +33 4 00 00 00 00</dd>

<dt>Emails</dt>
  <dd class="email">infographiste@gmail.com</dd>
  <dd class="email">bruno.bichet@gmail.com</dd>
  <dd class="email">br1o@live.fr</dd>
</dl>

Identités

Bruno Bichet

br1o

Tu veux ma photo ?

Intégrateur web, blogdesigner et formateur

Adresse

1, rue de l’intégration HTML

69007

Lyon sur CSS

France

Téléphones

Mobile : +33 6 00 00 00 00

Fixe : +33 4 00 00 00 00

Emails

infographiste@gmail.com

bruno.bichet@gmail.com

br1o@live.fr

Pour conclure

Je ne suis pas un expert en microformats et je me pose pas mal de questions. Dans mon exemple, vaut-il mieux utiliser la classe email sur chaque élément de liste li ou une seule fois dans la balise ul ? Si vous avez des suggestions concernant le placement des attributs des microformats dans le balisage HTML, n’hésitez pas à participer ;)

PS : connaissez-vous le site des microformateurs pour suivre l’actualité des microformats en français ?

Articles sur le même sujet

• Granularisation du balisage HTML : parce que nos documents le valent bien…
• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats
• Tutoriels pour apprendre HTML & CSS
• Check your <body> avec le W3C
• Quelques notes — Programme de formation HTML & CSS

1. Le CSSR (Cascading Style Summer Refresh 2007)

   Vous profitez de la période estivale à venir pour ouvrir les fenêtres et faire le ménage ? Allez, pour une inscription de plus vous pouvez gagner des présents inestimables en participant au concours de redesign de votre site web organisé par Alsacréations. Le cahier des charges : utilisez les CSS pour la mise en pages, utilisez un code propre et « sémantique », et utilisez votre imagination pour faire une belle charte graphique. Faites-vous plaisir, faites-nous plaisir :) Via sutekidane (comment ça, c’est pas une chaîne ? )

2. Pimp my hCard

   Alexandre nous propose de participer à la promotion des microformats en proposant le concours de la plus belle hCard. Les autres propositions ne seront pas abandonnées à leur triste sort : elles rejoindront une banque de templates hCard dans laquelle on pourra picorer à loisir selon les besoins. J’ai apporté ma modeste contribution en proposant un gabarit hCard à base de listes imbriquées ; il se pourrait que j’y ajoute une feuille de style ;)

3. Sandbox Designs Competition

   Encore une bonne occasion d’en apprendre un peu plus sur le marquage sémantique et les microformats : Scott lance un challenge pour moderniser le design des blogs WordPress en utilisant les morceaux de sémantique et les microformats présents dans le thème Sandbox. Le vainqueur de cette compétition recevra 500$, le second 300$ et le troisième 200$. (Ce qui reste tout de même loin des présents inestimables d’Alsacréations ;) )

Cody, quand tu es là

A l’approche de la Fête de la Musique, je vous propose de continuer en musique avec Cody, jeune chanteuse lyonnaise qui va enregistrer dans les semaines prochaines (avant le 8 juin…) 2 titres pour un cd en édition très limitée…1500 cd qui seront distribués au Festival des 3 chênes le 28 juin à « L’Imprévu » à Massieu (69)…uniquement sur invitation…

D’autres titres sont disponibles à l’écoute sur codywebsite. Enjoy !

Profitez-en également pour lire le blog de Maurine (ou l’art du grand n’importe quoi), toujours agréable à lire :)

Le plus terrible c’est de savoir que …

Reshape-music organise son premier plateau pop rock au Sonic à Lyon les 22 et 23 juin 2007 Le label rassemble pour la première fois sa communauté autour de deux soirées Pop Rock à Lyon[...]. Gratuites ces soirées seront placées sous le signe de l’éthique avec des goodies issus du commerce équitable dans des emballages entièrement recyclables. Si vous êtes sur Lyon à ces dates, il vous suffit de vous préinscrire dans l’espace SOIREE de notre blog. Le plus terrible c’est de savoir que cette expérience sera d’ores et déjà renouvelée. Alors, pour les non-lyonnais, attendez-vous, tôt ou tard, à nous voir débarquer.

Articles sur le même sujet

• HTML5 Boilerplate + Toolbox + Codex = WordPress Basics
• Proposition de balisage HTML sémantique du microformat hCard
• Sandbox Designs Competition : 46 thèmes pour WordPress passés en revue
• Judging begins, bozarblog, contenu dupliqué, redondance d'information, audience de blog, podcast…
• Roots — Thème WordPress à base de HTML5 Boilerplate