Editer le texte de cette page (date de la dernière modification: 25 Mars, 2007 15:13 (diff))
Vous êtes sur une Traduction en cours de la présentation de TantekCelik proposée ici au format s5 pour tous ceux prêts à parler des 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 sur la traduction, merci par avance de les corriger directement sur le wiki ou de m'en faire part via ce formulaire de contact. -- ChristopheDucamp |
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 - comment y sommes nous parvenus ? = |
== microformats - comment y sommes nous parvenus ? = |
= microformats - tout d'abord un contenu commun = |
== microformats - tout d'abord un contenu commun = |
= microformats - contenu commun (suite) = |
== microformats - contenu commun (suite) = |
= microformats - juste une meilleure syntaxe ? = |
== microformats - juste une meilleure syntaxe ? = |
= La page Contact de Technorati = |
== La page Contact de Technorati = |
= exemple de code hCard = <tt> |
= exemple de code hCard = |
</tt> = exemple de balisage hCard = <tt> |
== exemple de balisage hCard = |
</tt> |
= exemple de balisage hCard = <tt> |
== exemple de balisage hCard = |
</tt> |
= exemple de balisage hCard = <tt> |
== exemple de balisage hCard = |
</tt> |
= Que sont les Microformats ? = |
== Que sont les Microformats ? = |
= Plus que simplement de "bons noms de classes" = |
== Plus que simplement de "bons noms de classes" = |
= Principes des Microformats = |
== Principes des Microformats = |
* Le truc ... est de s'assurer que chaque section mécanique limitée du Web, 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 = |
[[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 = |
= Principes des Microformats = |
== Principes des Microformats = |
= Microformat : licence liée = |
== Microformat : licence liée = |
= Exemple : rel-license = http://creativecommons.org/licenses/by/2.5/ Droits réservés. CC by-2.5. = Exemple : rel-license = |
== Exemple : rel-license = |
= Exemple : rel-license = <a rel="license" href=" http://creativecommons.org/licenses/by/2.5/"> Droits réservés. CC by-2.5. </a> = Exemple : rel-license = <tt> <a rel="license" href=" http://creativecommons.org/licenses/by/2.5/"> Droits réservés. CC by-2.5. </a> </tt> = support rel-license = |
== support rel-license = |
= Microformats Processus = |
== Microformats Processus = |
= Page d'Accueil du BarCamp = |
== Page d'Accueil du BarCamp = |
= Exemple: hCalendar = <tt> |
== Exemple: hCalendar = |
</tt> = Exemple : hCalendar = <tt> |
== Exemple : hCalendar = |
</tt> = Exemple : hCalendar = <tt> |
== Exemple : hCalendar = |
</tt> = Exemple : hCalendar = <tt> |
== Exemple : hCalendar = |
</tt> = Microformats : 2004 → 2007 = |
== Microformats : 2004 → 2007 = |
* = Microformats: 2004 → 2007 = |
== Microformats: 2004 → 2007 = |
*** hCalendar - événements |
*** hCalendar - événements |
= Démonstrations Operator et Webcards = |
== Démonstrations Operator et Webcards = |
= Communauté des Microformats = |
== Communauté des Microformats = |
*** aider à traduire ! * = Communauté des Microformats - Nouveau = |
*** aidez à traduire ! == Communauté des Microformats - Nouveau = |
|
*** ou utilisez les trucs de publiation hCard pour baliser votre information de contact ** Un lien "Ajouter au Carnet d'Adresses" utilisant le Service Technorati Contacts ** Publiez le sur votre site dans votre page about/contact ** Vérifiez le avec Operator dans Firefox |
*** 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 |
|
|
microformats ** http://tantek.com/presentations/2007/02/microformats/ = Bonus = = historique du balisage sémantique = == 2000-2002 == === Support Large de CSS1 === **** IE5/Mac, Moz, IE6/Win, Opera === les designers web utilisent de plus en plus CSS === **** moins de balisage pour la présentation **** <table> & <font> **** float & font-family **** Plus petits documents === les designers web redécouvrent le (X)HTML sémantique === === moins de <b> plus de <h3><p> === === Pertinence des moteurs de recherche ====== Plus facile à styler === == 2003 == *** Lancement de === CSS Zen Garden === === Les outils de Blogging adoptent plus de (X)HTML sémantique === *** === <un nom> → <div id> ====== et <a rel="bookmark"> === === redécouverte de l'attribut 'rel' === === les blogrolls lient vers des personnes/URLs === === PTMFOG0000000134.png étend le 'rel' === <a rel="met friend"<tt> href="…">Geoffroy</a> </tt> Intégré dans blo.gs, WordPress, etc. == 2004 == === O'Reilly ETech conference === **** Introduction des "microformats" **** rel="license" & VoteLinks **** XOXO (XHTML Outlines) === plus les noms de classes sémantiques === === Brainstorms FOO Camp === **** A. Bosworth : HTML pour Calendriers **** vCard/iCal sous des classes HTML ? **** Ray Ozzie m'a dit d'y aller **** hCard et hCalendar esquissés === principes des microformats === === processus des microformats === === moins de [../../../../log/2002/10.html#L20021022t1432 <b>ed & eakfast] === *** <b>lunch<tt></b> </tt> mmm… cheese sandwich *** <h3>lunch<tt></h3> <p></tt> mmm… cheese sandwich </p> === moins de [../../../../log/2002/11.html#L20021128t1352 <a>norexic </a>nchors] === *** <a name="post123"></a> … <a href="#post123">#</a> *** <div id="post123"> … <a href="#post123" rel="bookmark">#</a> </div> ** === XHTML Friends Network ( XFN) étend le 'rel' ===xfnbtn250.png *** <a rel="met friend"<tt> href="…">Jeffrey</a> </tt> === Nombreux outils XFN === *** Construits dans blo.gs, WordPress, etc. *** Rubhub index *** XHTMLFriends.net *** Beaucoup plus d' implémentations |
* 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