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

Blog /
la grande image

Différence (dernière modification) (Edité, Auteur, affichage normal de la page)

Modifié: 1c1
Vous êtes sur une Traduction en cours de la présentation de TantekCelik proposée ici au format s5 pour tous ceux prêts à parler des MicroFormats.
Vous êtes sur une Traduction en cours de la présentation de TantekÇelik exposée durant Web Direction North en février 2007. Désormais amorcée au format S5... une version brute est déposée ci-dessous pour raffinage.

Modifié: 3c3,7
Seul le lien original fait référence. Si vous avez quelque remarque sur la traduction, merci par avance de les corriger directement sur le wiki ou de m'en faire part via ce formulaire de contact. -- ChristopheDucamp
http://farm1.static.flickr.com/119/409311410_b3780e230c.jpg

Seul le lien original fait référence. Si vous avez quelque remarque tant sur le code que la traduction, merci par avance de les corriger directement sur ce wiki ou de m'en faire part via ce formulaire de contact. -- ChristopheDucamp

[[toc]index]

Modifié: 12c16
= microformats - comment y sommes nous parvenus ? =
== microformats - comment y sommes nous parvenus ? =

Modifié: 21c25
= microformats - tout d'abord un contenu commun =
== microformats - tout d'abord un contenu commun =

Modifié: 30c34
= microformats - contenu commun (suite) =
== microformats - contenu commun (suite) =

Modifié: 39c43
= microformats - juste une meilleure syntaxe ? =
== microformats - juste une meilleure syntaxe ? =

Modifié: 51c55
= La page Contact de Technorati =
== La page Contact de Technorati =

Modifié: 56c60
= exemple de code hCard = <tt>
= exemple de code hCard =

Modifié: 60,61c64
</tt>
= exemple de balisage hCard = <tt>
== exemple de balisage hCard =

Effacé: 68d70
</tt>

Modifié: 70c72
= exemple de balisage hCard = <tt>
== exemple de balisage hCard =

Effacé: 77d78
</tt>

Modifié: 79c80
= exemple de balisage hCard = <tt>
== exemple de balisage hCard =

Effacé: 86d86
</tt>

Modifié: 88c88,89
= Que sont les Microformats ? =

== Que sont les Microformats ? =

Modifié: 94c95
= Plus que simplement de "bons noms de classes" =
== Plus que simplement de "bons noms de classes" =

Modifié: 99c100
= Principes des Microformats =
== Principes des Microformats =

Modifié: 101,102c102,111
* Le truc ... est de s'assurer que chaque section mécanique limitée du Web, 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 =
[[quote]The trick.... is to make sure that each limited mechanical part of the Web, each application, is within itself composed of simple parts that will never get too powerful.
[footer= —Tim Berners-Lee, Weaving The Web]]

NDT : comment traduire ?



[[red]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.]


== Principes des Microformats =

Modifié: 113c122,123
= Principes des Microformats =

== Principes des Microformats =

Modifié: 125c135,136
= Microformat : licence liée =

== Microformat : licence liée =

Modifié: 128,131c139,140
= Exemple : rel-license =
http://creativecommons.org/licenses/by/2.5/
Droits réservés. CC by-2.5.
= Exemple : rel-license =

== Exemple : rel-license =

Modifié: 137,149c146,147
= Exemple : rel-license =
<a rel="license"
href=" http://creativecommons.org/licenses/by/2.5/">
Droits réservés. CC by-2.5.
</a>
= Exemple : rel-license =
<tt>
<a rel="license"
href=" http://creativecommons.org/licenses/by/2.5/">
Droits réservés. CC by-2.5.
</a>
</tt>
= support rel-license =

== support rel-license =

Modifié: 153c151,152
= Microformats Processus =

== Microformats Processus =

Modifié: 159c158
= Page d'Accueil du BarCamp =
== Page d'Accueil du BarCamp =

Modifié: 165c164,165
= Exemple: hCalendar = <tt>

== Exemple: hCalendar =

Modifié: 169,170c169
</tt>
= Exemple : hCalendar = <tt>
== Exemple : hCalendar =

Modifié: 180,181c179,180
</tt>
= Exemple : hCalendar = <tt>

== Exemple : hCalendar =

Modifié: 193,194c192,193
</tt>
= Exemple : hCalendar = <tt>

== Exemple : hCalendar =

Modifié: 206,207c205,207
</tt>
= Microformats : 2004 → 2007 =


== Microformats : 2004 → 2007 =

Modifié: 213c213
* = Microformats: 2004 → 2007 =
== Microformats: 2004 → 2007 =

Modifié: 222c222
*** hCalendar - événements
*** hCalendar - événements

Modifié: 256c256
= Démonstrations Operator et Webcards =
== Démonstrations Operator et Webcards =

Modifié: 258c258
= Communauté des Microformats =
== Communauté des Microformats =

Modifié: 271,272c271,272
*** aider à traduire !
* = Communauté des Microformats - Nouveau =
*** aidez à traduire !
== Communauté des Microformats - Nouveau =

Ajouté: 279a280


Modifié: 283,286c284,287
*** ou utilisez les trucs de publiation hCard pour baliser votre information de contact
** Un lien "Ajouter au Carnet d'Adresses" utilisant le Service Technorati Contacts
** Publiez le sur votre site dans votre page about/contact
** Vérifiez le avec Operator dans Firefox
*** ou utilisez les trucs de publication hCard pour baliser votre information de contact
** Ajoutez un lien "Ajouter au Carnet d'Adresses" utilisant le Service Technorati Contacts
** Publiez la hCard sur votre site dans votre page "about/contact"
** Vérifiez la avec Operator dans Firefox

Ajouté: 288a290


Ajouté: 297a300


Modifié: 299,362c302
microformats
** http://tantek.com/presentations/2007/02/microformats/
= Bonus =
= historique du balisage sémantique =
== 2000-2002 ==
=== Support Large de CSS1 ===
**** IE5/Mac, Moz, IE6/Win, Opera
=== les designers web utilisent de plus en plus CSS ===
**** moins de balisage pour la présentation
**** <table> & <font>
**** float & font-family
**** Plus petits documents
=== les designers web redécouvrent le (X)HTML sémantique ===
=== moins de <b>
 plus de <h3><p> ===
=== Pertinence des moteurs de recherche ====== Plus facile à styler ===
== 2003 ==
*** Lancement de === CSS Zen Garden ===
=== Les outils de Blogging adoptent plus de (X)HTML sémantique ===
*** === <un nom> → <div id> ====== et <a rel="bookmark"> ===
=== redécouverte de l'attribut 'rel' ===
=== les blogrolls lient vers des personnes/URLs ===
=== PTMFOG0000000134.png étend le 'rel' ===
<a rel="met friend"<tt>
href="…">Geoffroy</a>
</tt>
Intégré dans blo.gs, WordPress, etc.
== 2004 ==
=== O'Reilly ETech conference ===
**** Introduction des "microformats"
**** rel="license" & VoteLinks
**** XOXO (XHTML Outlines)
=== plus les noms de classes sémantiques ===
=== Brainstorms FOO Camp ===
**** A. Bosworth : HTML pour Calendriers
**** vCard/iCal sous des classes HTML ?
**** Ray Ozzie m'a dit d'y aller
**** hCard et hCalendar esquissés
=== principes des microformats ===
=== processus des microformats ===
=== moins de [../../../../log/2002/10.html#L20021022t1432 <b>ed &
eakfast] ===
*** <b>lunch<tt></b>

</tt>
mmm… cheese sandwich


*** <h3>lunch<tt></h3>
<p></tt>
mmm… cheese sandwich
</p>
=== moins de [../../../../log/2002/11.html#L20021128t1352 <a>norexic </a>nchors] ===
*** <a name="post123"></a> …
<a href="#post123">#</a>
*** <div id="post123"> …
<a href="#post123"
rel="bookmark">#</a>
</div>
** === XHTML Friends Network ( XFN) étend le 'rel' ===xfnbtn250.png
*** <a rel="met friend"<tt>
href="…">Jeffrey</a>
</tt>
=== Nombreux outils XFN ===
*** Construits dans blo.gs, WordPress, etc.
*** Rubhub index
*** XHTMLFriends.net
*** Beaucoup plus d' implémentations
* http://tantek.com/presentations/2007/02/microformats/
Vous êtes sur une Traduction en cours de la présentation de TantekÇelik exposée durant Web Direction North en février 2007. Désormais amorcée au format S5... une version brute est déposée ci-dessous pour raffinage.

Seul le lien original fait référence. Si vous avez quelque remarque tant sur le code que la traduction, merci par avance de les corriger directement sur ce wiki ou de m'en faire part via ce formulaire de contact. -- ChristopheDucamp

index
Microformats — La Grande Image   
7 février 2007 — Web Directions Nord   
Tantek Çelik Chief Technologist [ http://technorati.com/ ]   
microformats - comment y sommes nous parvenus ?   
microformats - tout d'abord un contenu commun   
microformats - contenu commun (suite)   
microformats - juste une meilleure syntaxe ?   
La page Contact de Technorati   
exemple de code hCard   
exemple de balisage hCard   
exemple de balisage hCard   
exemple de balisage hCard   
Que sont les Microformats ?   
Plus que simplement de "bons noms de classes"   
Principes des Microformats   
Principes des Microformats   
Principes des Microformats   
Microformat : licence liée   
Exemple : rel-license   
support rel-license   
Microformats Processus   
Page d'Accueil du BarCamp   
Exemple: hCalendar   
Exemple : hCalendar   
Exemple : hCalendar   
Exemple : hCalendar   
Microformats : 2004 → 2007   
Microformats: 2004 → 2007   
Sortis récemment...   
Démonstrations Operator et Webcards   
Communauté des Microformats   
Communauté des Microformats - Nouveau   
Exercice Microformat pour le Lecteur   
Colophon   
Merci !   

Microformats — La Grande Image    

7 février 2007 — Web Directions Nord    

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

microformats - comment y sommes nous parvenus ?    

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

microformats - tout d'abord un 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
    • people & organisations - hCard
    • événements - hCalendar

microformats - contenu commun (suite)    

    • sujets - rel-tag
    • évaluations & critiques - hReview
    • liens tagués - xFolk
    • lieux - adr & geo
    • contenu épisodique - hAtom
    • média embarqué - rel-enclosure
    • petites annonces recherche/à vendre - hListing
    • C.V. et Résumés - hResume

microformats - juste une meilleure syntaxe ?    

    • publication sémantique valide proprement séparée
      • maintenance, modifications, mises à jour
      • collaboration, travail d'équipe
      • accessibilité
      • divers supports de terminaux
    • nouveaux bénéfices utilisateurs
      • données plus faciles à coller - moins de copier/coller
      • abonnement à du contenu structuré - événements
      • meilleure recherche
      • problème de resaisie de tous mes contacts

La page Contact de Technorati    

exemple de code hCard    

                             http://tantek.com/
                            Tantek 
                             Çelik

exemple de balisage hCard    

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

exemple de balisage hCard    

 <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>

exemple de balisage hCard    

 <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>

Que sont les Microformats ?    

  • Les Microformats permettent la publication et le partage d'une information de plus haute fidélité sur le Web.
  • Des briques 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 simplement 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
The trick.... is to make sure that each limited mechanical part of the Web, each application, is within itself composed of simple parts that will never get too powerful.
—Tim Berners-Lee, Weaving The Web

NDT : comment traduire ?


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.

Principes des Microformats    

    • résoudre un problème spécifique
    • aussi simple que possible
      • améliorations évolutionnaires
    • les humains d'abord, les machines ensuite
      • présentables et parsables
      • adaptés aux comportements actuels
    • réutilisation de standards massivement 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.
    • ibid.

Principes des Microformats    

    • résoudre un problème spécifique
    • aussi simple que possible
      • améliorations évolutionnaires
    • les humains d'abord, les machines ensuite
      • présentables et parsables
      • adaptés aux comportements actuels
    • réutilisation de standards massivement 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"
    • Par conséquent : lien vers une licence avec rel="license"

Exemple : rel-license    

 <a 
    href=" http://creativecommons.org/licenses/by/2.5/">
          Droits réservés. CC by-2.5.
 </a>

support rel-license    

Microformats Processus    

    • choisissez un problème spécifique, simple et définissez-le
    • reserche & de documentation sur le comportement actuel de publication web
    • documenter les formats existants dans le champ du problème
    • brainstormez avec le schéma implicite / réutilisez des noms
    • itérez dans la communauté

Page d'Accueil du BarCamp    

Exemple: hCalendar    

             http://tantek.com/presentations/... 
                          Microformats — La Grande Ima…
     7 février 2007

Exemple : hCalendar    

 <ol                  >
  <li               >
   <a href=" http://tantek.com/presentations/..." 
                 >
    <span                >Microformats — La Grande Ima…</span>
     7 février 2007
   </a>
  </li>
 </ol>

Exemple : hCalendar    

 <ol class="vcalendar">
  <li class="vevent">
   <a href=" http://tantek.com/presentations/..." 
      class="url">
    <span class="summary">Microformats — La Grande Ima…</span>
    <abbr class="dtstart" title="20070207T1145-0800">
     7 février 2007
    </abbr>
   </a>
  </li>
 </ol>

Exemple : hCalendar    

 <ol class="vcalendar">
  <li class="vevent">
   <a href=" http://tantek.com/presentations/..." 
      class="url">
    <span class="summary">Microformats — La Grande Ima…</span>
    <abbr class="dtstart" title="20070207T1145-0800">
     7 février 2007
    </abbr>
   </a>
  </li>
 </ol>

Microformats : 2004 → 2007    

Microformats: 2004 → 2007    

Sortis récemment...    

Démonstrations Operator et Webcards    

Communauté des Microformats    

Communauté des Microformats - Nouveau    

    • Email
      • rejoignez la liste de discussion microformats-new
      • pour se concentrer sur le développement de nouveaux microformats et le processus
    • Aidez à développer
      • citation
      • media-info
      • photo notes

Exercice Microformat pour le Lecteur    

Colophon    

Merci !    

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