Avertissement !

Vous êtes sur une Traduction en cours.

Les contenus de cette présentation sont destinés aux microformateurs, à savoir toutes celles et ceux qui constitueront la communauté francophone des enthousiastes pour supporter les 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 avec la culture wiki, une page est ouverte en édition pour raffinage et corrections sur notre wiki de travail.

Merci !

Christophe Ducamp Microformateur - Traducteur Amateur Enthousiasmé pour essayer d'être... "les microformateurs"

Révélation / Affiliations Précédentes

• travaillé pour Microsoft durant plus de 7 ans (1997-2004)
• IE5/Mac
• representé dans les groupes W3C CSS, HTML, XForms
• moteurs de navigateurs pour plusieurs set-top boxes
• et d'autres choses dont je ne peux pas parler

page Contact Technorati

• balisage de la page Contact Technorati hCard
• convertisseur hCard vers vCard
• Lien pour convertir les hCards en vCards
• Importation Sans Couture dans un Carnet d'Adresses typique

exemple de code hCard

                           http://tantek.com/
                           Tantek 
                            Çelik

exemple de code hCard

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

 </a>
</div>

exemple de code 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 code 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>

microformats - comment y sommes-nous parvenus ?

• séparation balisage & style
• expertise en sémantique (X)HTML
• retour au HTML sémantique (CHIC)
• 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

BarCamp page d'accueil

• Page d'Accueil BarCamp avec syntaxe hCalendar
• convertisseur hCalendar en iCalendar
• Lien pour convertir hCalendar vers iCalendar et abonnement
• Abonnement sans couture dans une application de calendrier
  • Outlook 2007, Apple iCal.app supportent tous deux .ics
• hCalendar plus facile à utiliser que le support direct .ics

Exemple : hCalendar

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

                         Microformats: pour les Humains

    30 avril 2007

Exemple : hCalendar

<ol                  >
 <li               >
  <a href="http://tantek.com/presentations/..." 
                >

   <span                >Microformats : pour les Humains</span>

    30 avril 2007

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

Exemple : hCalendar

<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats : pour les Humains</span>

   <abbr class="dtstart" title="2007-04-30T13:30-0700">
    30 avril 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 : pour les Humains</span>

   <abbr class="dtstart" title="2007-04-30T13:30-0700">
    30 avril 2007
   </abbr>
  </a>
 </li>
</ol>

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, maîtriser 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.

microformats - juste un meilleur balisage ?

• construits sur du HTML sémantique valide ()
  • comme avec le HTML, très largement lisible/éditable/facile à écrire
  • facilite la maintenance, les mises à jour, la collaboration et le travail d'équipe
  • meilleurs comportements par défaut de la part de plus d'agents utilisateurs
  • accessibilité - lecteurs écrans
  • support par une grande variété de terminaux - mobiles
  • optimisation moteur de recherche
• 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"

Récemment sortis...

• 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
• Mars 2007 : SXSW 2007 - plus de 500 hcards de conférenciers et plus de 1000 groupes
• hCard dans les bios de Wikipedia avec les gabarits Infofox
• Aujourd'hui : les membres du 110ème Congrès US

Démo Operator

• 110th US Congress
  • Grâce à Carl de la Fondation Sunlight

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 "microformateurs"
• 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 !

Microformat Exercice pour le Lecteur

• Créez votre propre hCard
  • Utilisez hCard creator
  • ou utilisez les trucs et astuces pour publier une hCard afin de baliser votre information de contact
• Posez un lien "Ajouter au Carnet d'Adresses" sur le Service Contacts Technorati
• Publiez-la sur votre site dans votre page à propos/contact
• Vérifiez-la dans Firefox avec Operator
• Ajoutez le support LiveClipboard pour le copier/coller sur le Web
• Ajoutez un lien vers votre carte dans la page wiki Nouveaux Exemples de hCard
• Pinguez Pingerati.net avec votre page A Propos/Contact
• Ajoutez-la dans la page wiki Attending section de la page wiki de 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.org

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

Bonus