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

Blog /
microformats Stanford

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

Ajouté: 0a1,404
= 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) =
** thématiques et sujets - rel-tag
** notations & critiques - hReview
** liens tagués - xFolk
** endroits - adr & geo
** contenu épisodique - hAtom-fr
** média embarqué - rel-enclosure
** liste de petites annonces (recherche/à vendre) - hListing
** curriculum vitae - hResume
= 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 =
** Technorati Contact est balisée en hCard
** convertisseur hCard vers vCard
** Lien pour convertir les hCards en vCards
** Importation sans couture dans un Carnet d'Adresses
= 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


[[text]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.
[footer=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
[[text]...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.
[footnote=ibid.]
]

= 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 =
** sélecteur de contrats Creative Commons (cc)
** Yahoo! (cc) search
** Recherche Google "Droits d'Usages"
= 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 =
** Page d'accueil du BarCamp avec un balisage hCalendar
** convertisseur hCalendar en iCalendar
** Lien pour convertir un hCalendar en iCalendar et abonnement.
** Abonnement sans couture à l'intérieur d'une application de gestion de calendrier
** Plus facile que d'implémenter directement le support de .ics

= 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 =
*** XFN - réseau social distribué
**** blo.gs, WordPress, Rubhub, plus…
*** rel-license - liens de licence
*** 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 - content tagging
**** Technorati, Ice Rocket, plus…
** *** adr & geo - pour les lieux
**** Photos géo-étiquetées sur Flickr
*** hAtom - syndication
**** Gabarits Wordpress
*** hListing - petites annonces classées
**** Edgeio, Oodle, plugin WordPress
*** 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 petits pots à pourboires
*** xFolk - étiquetage des liens
*** … et beaucoup plus en développement…

= Récemment sortis... =
** 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 de photos Flickr avec geo
** Octobre 2006 : Profils Zooomr avec hCard + XFN
** Décembre 2006 : Lancement de Pingerati.net — distributeur de mises à jour
** Technorati Contacts Service et lancement du service Evènements
** Operator - L'extension Firefox détecte les hCard, hCalendar, geo, hReview, rel-tag, hResume, et plus encore toutes les semaines.
** Janvier 2007 : Linkedin - + de 9 millions de curriculum-vitae
# = Démo Operator =
** Stanford News Staff
** Evènements à Stanford
# = Communauté des Microformats =
** IRC
*** irc.freenode.net #microformats
**** un endroit génial pour reluquer et apprendre
** Email
*** rejoignez les [Elanceur/microformats/discussion.html discussions-microformats] et les listes.
*** archives publiques
** Blog
*** postez avec un tag "microformats" et "cettesemaineenmicroformats"
** Wiki
*** si vous trouvez des erreurs, réparez-les svp, comme sur Wikipedia
*** soutenez le support des microformats sur les sites que vous utilisez.
*** ajoutez des exemples, aidez à la recherche, venez brainstormer, etc.
*** traduisez !
= 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 =
** Créez votre propre hCard
*** Utilisez le hCard creator
*** ou utilisez les trucs pour publier une hCard afin de baliser votre information de contact.
** Ajoutez un lien "Ajouter au Carnet d'adresses" en utilisant le Service Technorati Contacts
** Publiez-la sur votre site dans votre page "à propos/contact"
** Vérifiez-la avec Operator dans Firefox
** Ajoutez-lui un lien sur la page wiki Nouveaux Exemples de hCard.
** Pinguez Pingerati.net avec votre page "à propos/contact"
** Faites un lien vers elle dans la section des participants de la page wiki pour cet événement
= Colophon =
** XHTML
** CSS
** S5 v1.1xoxo
** XOXO
** hCard
** hCalendar
** rel="license"
** Quelques droits réservés. CC by-3.0
= 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 ===
=== http://www.elanceur.org/microformats/xfnbtn250.png augmente le 'rel' ===
**** <a rel="met friend"<tt>
href="…">Jeffrey</a>
</tt>
**** Intégré à l'intérieur de blo.gs, WordPress, etc.
== 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 ===
**** A. Bosworth: HTML Pour les Calendriers
**** vCard/iCal sous des HTML ?
**** Ray Ozzie m'a dit d'y aller
**** hCard et hCalendar sont ébauchés.
=== microformats principes ===
=== microformats processus ===
=== moins de <b>ed & <n>
</n>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' http://www.elanceur.org/microformats/images/xfnbtn250.png
*** <a rel="met friend"<tt>
href="…">Jeffrey</a>
</tt>
=== De nombreux outils XFN ===
*** Intégrés à l'intérieur de blo.gs, WordPress, etc.
*** Index Rubhub
*** XHTMLFriends.net
*** Beaucoup plus d' implémentations

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