Editer le texte de cette page (date de la dernière modification: 25 Mars, 2007 18:21 (diff))

Blog /
microformats Stanford

Microformats à Stanford

23 mars 2007 — Université de Stanford

TantekÇelik Chief Technologist http://technorati.com/

Avertissement !

Vous êtes sur une Traduction en cours. Les contenus de cette présentation sont destinés à l'amorçage de la communauté francophone des 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 ou si vous vous sentez à l'aise éditez cette page wiki pour raffiner et aider à une meilleur présentation -- ChristopheDucamp 25 Mars, 2007 17:15 CET

http://creativecommons.org/licenses/by/3.0/

microformats - comment y sommes nous parvenus ?

    • séparation balisage & style
    • expertise en sémantique (X)HTML
    • noms de classes pour le sens / Architecture Information
    • reconnaître les problèmes connus
    • réutiliser les vocabulaires épargne du temps
    • réutiliser partage aussi le sens
    • communauté établie pour apprendre, partager, collaborer

microformats - d'abord du contenu commun

    • priorisation
    • des solutions simples à des problèmes connus / le contenu d'abord
    • relations dans la blogroll - XFN
    • licences - rel-license
    • listes & outlines - XOXO
    • personnes & organisations - hCard
    • événements - hCalendar

microformats - contenu commun (suite)

microformats - juste un meilleur balisage ?

    • publication sémantique valide soigneusement séparée
      • maintenance, modifications et mises à jour
      • collaboration, travail d'équipe
      • accessibilité
      • divers supports de terminaux
    • nouveaux bénéfices pour l'utilisateur
      • plus facile de migrer les données - moins de copier/coller
      • abonnement à du contenu structuré - événements
      • meilleure recherche
      • résoud le problème de saisir à nouveau tous mes contacts

Page Contact Technorati

exemple de balisage hCard

<tt> 

                             http://tantek.com/
                            Tantek 
                             Çelik
 </tt>

exemple de balisage hCard

<tt> 

 <div              > 
  <a                  href=" http://tantek.com/">
   <span                   >Tantek</span> 
   <span                    >Çelik</span>
  </a>
 </div>
 </tt>

exemple de balisage hCard

<tt> 

 <div class="vcard"> 
  <a class="url fn n" href=" http://tantek.com/">
   <span class="given-name">Tantek</span> 
   <span class="family-name">Çelik</span>
  </a>
 </div>
 </tt>

exemple de balisage hCard

<tt> 

 <div class="vcard">
  <a class="url fn n" href=" http://tantek.com/">
   <span class="given-name">Tantek</span> 
   <span class="family-name">Çelik</span>
  </a>
 </div>
 </tt>

C'est quoi les Microformats?

    • Les Microformats permettent la publication et le partage d'une information de plus haute fidélité sur le Web.
    • Des blocs de constructions qui permettent aux utilisateurs de posséder, migrer et partager leurs données sur le Web.
    • Des petits morceaux de (X)HTML qui identifient des types de données plus riches comme les personnes et les événements dans vos pages web.
    • Le moyen le plus rapide et le plus simple de fournir une API pour votre site Web.

Plus que juste de "bons noms de classes"

    • Des principes qui maintiennent les choses "micro"
    • Un processus qui insiste pour obtenir du vrai
    • Une communauté qui minimise les doublons

Principes des Microformats

    • résoudre un problème spécifique

Le truc ... est de s'assurer que chaque petite pièce détachée du Web, que chaque application, soit en elle-même composée de parties simples qui ne deviendront jamais trop puissantes.
Tim Berners-Lee, Weaving The Web

Principes des Microformats

    • résoudre un problème spécifique
    • aussi simples que possible
      • améliorations évolutionnaires
    • les humains d'abord, les machines en second
      • présentables et parsables
      • adaptés aux comportement actuels
    • réutilisation de standards largement adoptés
      • (X)HTML sémantique, schémas provenant de RFCs interopérables
...si j'avais insisté sur le fait que tout le monde utilise HTTP, ceci aurait été aussi contre le principe de contrainte minimale. ... le Web serait devenu comme un ensemble d'idées qui pourraient être adoptées individuellement en combinaison avec des parties existantes ou futures.

Principes des Microformats

    • résoudre un problème spécifique
    • aussi simples que possible
      • améliorations évolutionnaires
    • les humains d'abord, les machines en second
      • présentables et parsables
      • adaptés aux comportement actuels
    • réutilisation de standards largement adoptés
      • (X)HTML sémantique, schémas provenant de RFCs interopérables
    • modularité / embarquement
    • Le développement décentralisé de contenus, services
      • encourage explicitement l'"esprit du Web"

Microformat : licence liée

    • Analogie : lien vers une feuille de style avec rel="stylesheet"
    • De ce fait : lien vers une licence avec rel="license"

Exemple : rel-license

<tt> 

           http://creativecommons.org/licenses/by/3.0/
          Quelques droits réservés. CC by-3.0.
 </tt>

Exemple : rel-license

<tt> 

 <a 
    href=" http://creativecommons.org/licenses/by/3.0/">
          Quelques droits réservés. CC by-3.0.
 </a>
 </tt>

Exemple : rel-license

<tt> 

 <a rel="license"
    href=" http://creativecommons.org/licenses/by/3.0/">
          Quelques droits réservés. CC by-3.0.
 </a>
 </tt>

Exemple : rel-license

<tt> 

 <a rel="license"
    href=" http://creativecommons.org/licenses/by/3.0/">
          Quelques droits réservés. CC by-3.0.
 </a>
 </tt>

support rel-license

Microformats Processus

    • choisir un problème specifique, simple et le définir
    • recherche & documentation sur le comportement de publication web en cours
    • documentation des formats existants dans le champ du problème
    • brainstorm avec schéma implicite / réutilsation de noms
    • itération au sein de la communauté

Page d'Accueil du BarCamp

Exemple : hCalendar

<tt> 
             http://tantek.com/presentations/... 
                          Microformats à Stanford
     23 mars 2007
 </tt>

Exemple : hCalendar

<tt> 
 <ol                  >
  <li               >
   <a href=" http://tantek.com/presentations/..." 
                 >
    <span                >Microformats à Stanford</span>
     23 mars 2007
   </a>
  </li>
 </ol>
 </tt>

Exemple : hCalendar

<tt> 

 <ol class="vcalendar">
  <li class="vevent">
   <a href=" http://tantek.com/presentations/..." 
      class="url">
    <span class="summary">Microformats à Stanford</span>
    <abbr class="dtstart" title="20070323T1200-0700">
     23 mars 2007
    </abbr>
   </a>
  </li>
 </ol>
 </tt>

Exemple : hCalendar

<tt> 
 <ol class="vcalendar">
  <li class="vevent">
   <a href=" http://tantek.com/presentations/..." 
      class="url">
    <span class="summary">Microformats à Stanford</span>
    <abbr class="dtstart" title="20070323T1200-0700">
     23 mars 2007
    </abbr>
   </a>
  </li>
 </ol>
 </tt>

Microformats : 2004 → 2007

Microformats : 2004 → 2007

Récemment sortis...

  1. = Démo Operator =
  1. = Communauté des Microformats =

Communauté des Microformats - Nouveau !

    • Email
      • rejoignez la nouvelle liste de discussion [Elanceur/microformats/discussion.html microformats-new]
      • pour une concentration sur le développement et le processus de nouveaux microformats
    • Aidez à développer :
      • citation
      • media-info
      • photo notes

Microformat : Exercice pour le Lecteur

Colophon

Merci !

[Elanceur:microformats blog microformats]

Lien de référence : tantek.com/presentations/2007/03/microformats

Bonus

historique du balisage sémantique

2000-2002

Large support CSS1

        • IE5/Mac, Moz, IE6/Win, Opera

les designers web utilisent plus CSS

        • moins de balisage pour la présentation
        • <table> & <font>
        • float & font-family
        • plus petits documents

les designers web redécouvrent le (H)HTML sémantique

moins de <b>
 et plus de <h3><p>

Pertinence des moteurs de recherche

Plus facile à styler

2003

Lancement de === CSS Zen Garden ===

Les outils de blog adoptent plus de (X)HTML sémantique

<a name> → <div id> et <a rel="bookmark"> ===

l'attribut 'rel' est rédéouvert

les blogrolls lient vers des personnes/URLs

augmente le 'rel'

        • <a rel="met friend"<tt>
    href="…">Jeffrey</a>
 </tt>

2004

Conférence O'Reilly ETech

        • introduction des "microformats"
        • rel="license" & VoteLinks
        • XOXO (XHTML Outlines)

plus de noms de classes sémantiques

Brainstorms FOO Camp

microformats principes

microformats processus

moins de <b>ed & <br>eakfast

      • <b>déjeuner<tt></b>
 
</tt>
 mmm… un sandwich au fromage
      • <h3>déjeuner<tt></h3>
 <p></tt>
 mmm… un sandwich au fromage
 </p>

moins d' <a>ncres </a>norexiques

      • <a name="post123"></a> …
 <a href="#post123">#</a>
      • <div id="post123"> …
 <a href="#post123" 
    rel="bookmark">#</a>
 </div>

XHTML Friends Network ( XFN) augmente le 'rel'

      • <a rel="met friend"<tt>
    href="…">Jeffrey</a>
 </tt>

De nombreux outils XFN

Les Microformats sont des conventions pour baliser des données couramment rencontrées (comme des liens, de l'information de contact et des événements calendaires) dans des langages établis comme le HTML. En utilisant des layouts standardisés, des classes CSS et des valeurs d'attribut, l'information devient plus accessible et plus utile tant pour les humains que les ordinateurs. Cliquez ici pour en savoir plus.

Pourquoi ce site ?

EnoncéMission

Sites officiels

le site officiel (en)
la page d'accueil du wiki (fr)

Expérimental

le Blog (gouvernance de ce wiki)

Utilitaires

hCard creator
hCalendar creator
hResume creator

Wiki-Node

WikiNode:microformats

Tests

BacASable

Contact

ChristopheDucamp

Administration Locale

Editer la barre latérale