Avertissement !

Vous êtes sur une Traduction en cours.

Les contenus de cette présentation sont destinés aux microformateurs, celles et ceux qui constitueront 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. Si vous vous sentez plus à l'aise sur wiki, la page est ouverte en édition pour raffinage et corrections sur notre wiki de travail.

Merci !

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

                           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>

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.

• 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

         http://creativecommons.org/licenses/by/3.0/deed.fr
         Quelques droits réservés. CC by-3.0.

Exemple : rel-license

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

</a>

Exemple : rel-license

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

</a>

Exemple : rel-license

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

support rel-license

• sélecteur de contrats Creative Commons (cc)
• Yahoo! (cc) search
• Recherche Google "Droits d'Usages"

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

           http://tantek.com/presentations/... 

                         Microformats à Stanford

    23 mars 2007

Exemple : hCalendar

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

    23 mars 2007

  </a>
 </li>
</ol>

Exemple : hCalendar

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

Exemple : hCalendar

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

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 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.
  • aidez à traduire !

Communauté des Microformats - Nouveau !

• Email
  • rejoignez la nouvelle liste de discussion 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 !

• microformateurs

• tantek.com/presentations/2007/03/microformats

Bonus