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

Blog /
la grande image

Différence (auteur précédent) (Changé, Edité, affichage normal de la page)

Modifié: 1c1,302
Décrivez ici la nouvelle page.
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.

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]


= 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 =
** Technorati Contact hCard balisage
** convertisseur hCard vers vCard
** Lien pour convertir les hCards en vCards
** Importation sans couture à l'intérieur d'un Carnet d'Adresses
= 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
[[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 =
** 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 =
** Sélectionnez un contrat Creative Commons (cc)
** Yahoo! (cc) search
** Recherche Google "Usage Rights"

== 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 =
** Page d'accueil du BarCamp avec un balisage hCalendar
** convertisseur hCalendar en iCalendar
** Lien pour convertir le hCalendar en iCalendar et abonnement
** Abonnement sans couture dans une application de calendrier
** Plus facile qu'implémenter .ics directement supporté

== 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 =
** *** XFN - réseau social distribué
**** blo.gs, WordPress, Rubhub, plus…
*** rel-license - liens vers licences
*** XOXO - listes et outlines
*** VoteLinks - un lien pour/contre/abstention
== Microformats: 2004 → 2007 =
** *** XFN - réseau social distribué
**** blo.gs, WordPress, Rubhub, plus…
*** rel-license - liens vers licences
**** CC Creator, Yahoo CC search, Google Search
*** XOXO - listes et outlines
**** WordPress, Technorati, plus…
*** VoteLinks - un lien pour/contre/abstention
**** Technorati
*** hCalendar - événements
**** Yahoo Upcoming.org, Eventful.com, plus…
*** hCard - personnes & organisations
**** Avon.com, Eventful.com, plus…
*** rel-tag - étiquetage de contenu (tag)
**** Technorati, Ice Rocket, plus…
** *** adr & geo - pour les lieux
**** Photos géotaguées Flickr
*** hAtom - syndication
**** Gabarits Wordpress
*** hListing - annonces classées
**** Edgeio, Oodle, WordPress plugin
*** hResume - Curriculum Vitae
**** Linkedin, Operator
*** hReview - critiques
**** Cork'd, JudysBook, Reevoo, plus…
*** rel-directory - inclusion de répertoire
**** Technorati Blog Finder
*** rel-payment - pour les pots à pourboires
*** xFolk - étiquetage de lien
*** … et beaucoup plus en développement…
= Sortis récemment... =
** Juin 2006 : Yahoo! Local
*** Plus de 15 millions d'entreprises locales avec des hCards
*** ... événements locaux avec hCalendar
*** ... critiques des entreprises etc. avec hReview
** Edgeio 500k+ hListings
** Août 2006 : 5M+ photos Flickr avec geo
** Octobre 2006 : Profils Zooomr avec hCard + XFN
** Décembre 2006 : Pingerati.net lancé — distributeur de mises à jour
** Service Technorati Contacts et Service Evénements lancés
** Operator - Une extension Firefox détecte les hCard, hCalendar, geo, hReview, rel-tag, hResume et plus encore chaque semaine
** Janvier 2007 : Linkedin - 9M+ hResumes

== Démonstrations Operator et Webcards =

== Communauté des Microformats =
** IRC
*** irc.freenode.net #microformats
**** un endroit génial pour reluquer et apprendre (en anglais)
** Email
*** rejoignez la liste de discussion microformats-discuss
*** archives publiques
** Blog
*** taguez les billets avec le tag "microformats"
** Wiki
*** si vous trouvez des erreurs, réparez-les svp, comme avec Wikipedia
*** soutenez les microformats sur les sites que vous utilisez
*** ajoutez des exemples, aidez la recherche, venez brainstormer, etc.
*** aidez à traduire !
== 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 =
** Créez votre propre hCard
*** Utilisez hCard creator
*** 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
** Ajoutez un lien vers cette carte dans la page wiki hCard Nouveaux Exemples
** Pinguez Pingerati.net avec votre page contact/à propos

= Colophon =
** XHTML
** CSS
** S5 v1.1xoxo
** XOXO
** hCard
** hCalendar
** rel="license"
** Droits réservés. CC by-2.5

= Merci ! =
* 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