Editer le texte de cette page (date de la dernière modification: 25 Mars, 2007 15:13 (diff))
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) *** 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 = *** 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/ |
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
http://tantek.com/ Tantek Çelik
<div > <a href=" http://tantek.com/"> <span >Tantek</span> <span >Çelik</span> </a> </div>
<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>
<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>
|
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.
<a href=" http://creativecommons.org/licenses/by/2.5/"> Droits réservés. CC by-2.5. </a>
http://tantek.com/presentations/... Microformats — La Grande Ima… 7 février 2007
<ol > <li > <a href=" http://tantek.com/presentations/..." > <span >Microformats — La Grande Ima…</span> 7 février 2007 </a> </li> </ol>
<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>
<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>
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. |
le site officiel (en)
la page d'accueil du wiki (fr)
hCard creator
hCalendar creator
hResume creator