posh-fr

2009-01-06T01:21:25Z

NotroRacel: delsitch

corelacelde
{{TOC-right}}
<h1>Code HTML IntrinsÃ¨quement Classe (CHIC)</h1>
Bienvenue sur la page d'accueil du <abbr title="Plain Old Semantic HTML">POSH</abbr>. En franÃ§ais, vous commencerez Ã entendre parler de <abbr title="Code HTML IntrinsÃ¨quement Classe">CHIC</abbr>. Rien n'est encore dÃ©finitif, vos suggestions et revendications peuvent Ãªtre encore [http://jyte.com/cl/en-fran%C3%A7ais-posh-se-traduit-par-chic discutÃ©es].

== Origines ==
L'acronyme '''POSH''' a Ã©tÃ© inventÃ© [http://rbach.priv.at/Microformats-IRC/2007-04-06#T091456 le 6 avril 2007] sur le canal IRC des microformats, par <kwijibo> pour dÃ©signer une abrÃ©viation raccourcie de [[plain-old-semantic-html-fr|plain-old-semantic-html]].
Une discussion partagÃ©e par John Allsopp, Tantek Ãelik, Jeremy Keith et Chris Messina
lors du [[events/2007-04-18-web-2-expo-dinner|DÃ®ner Microformats du 18 avril 2007 faisant suite Ã l'Expo Web 2.0]] a fait renaÃ®tre l'idÃ©e du POSH et l'importance de promouvoir l'objectif plus large de POSH, quels sont les microformats qui en sont originaires et en sont un propre sous-ensemble. Pour en savoir plus voir [[posh-fr#Historique|Historique]].

== Pourquoi POSH est traduit en CHIC ==
Le terme [[semantic-html-fr|html sÃ©mantique]] peut intimider par sa longueur et donne une fausse mauvaise impression de sa simplicitÃ©, de sa bonne adoption par les designers web modernes, et les avantages qu'il possÃ¨de vont bien au delÃ de dÃ©velopper pour le web comme il faut en utilisant un balisage sÃ©mantique. Nous avons besoin d'un terme court et facile Ã retenir qui capte l'essence du concept, et soit facile Ã conjuguer. CHIC a Ã©tÃ© proposÃ© par Kevin Marks et la dÃ©clinaison de l'acronyme '''C'''ode '''H'''TML '''I'''ntrinsÃ¨quement '''C'''lasse proposÃ©e par StÃ©phane Gigandet colle bien au sens du 'POSH'.

== Quoi ==
Le CHIC regroupe les meilleures pratiques d'utilisation du [[semantic-html-fr|HTML sÃ©mantique]] pour publier des pages web. Le HTML sÃ©mantique est le sous-ensemble des Ã©lÃ©ments et attributs du HTML 4.01 (ou du XHTML 1.0) qui sont ''[[semantic-fr|sÃ©mantiques]]'' plutÃ´t que ''[[prÃ©sentationnels]]''. La meilleure faÃ§on d'apprendre et de comprendre CHIC est de le mettre en oeuvre. Prenez une page sur votre site web pour dÃ©marrer et appliquez-lui la [[posh-fr#La_Checklist_CHIC|Checklist CHIC]]. Continuez avec le [[posh-fr#Le_Processus_CHIC|Processus CHIC]]. Lisez les [[posh-fr#Ressources|Ressources CHIC]] pour en savoir encore plus Ã propos de CHIC.

== Le processus du CHIC ==
Que pouvez-vous faire pour Ãªtre CHIC et faire que vos sites web soient CHICs ?
# Publier du contenu CHIC. Lire les [[posh-fr#Ressources|ressources]] posh et vous assurer que votre site web publie du [[semantic-xhtml-fr|(X)HTML sÃ©mantique]] valide et utilise des [[semantic-class-names-fr|noms de classes sÃ©mantiques]] en rapport.
# RÃ©pandre le CHIC. Encourager les autres Ã Ãªtre CHIC et Ã CHICquifier leurs sites web en faisant un lien vers cette page.
# AmÃ©liorer le CHIC. Nous aider Ã assembler des ressources pour permettre Ã plus de personnes de POSHifier facilement leurs sites web.

== La Checklist CHIC ==
* La premiÃ¨re rÃ¨gle de CHIC est que vous devez [http://validator.w3.org valider] votre CHIC.
* DeuxiÃ¨mement, laissez tomber l'usage des TABLES utilisÃ©es purement Ã des fins de prÃ©sentation, les GIFs d'espacement et le [[presentational-html-fr|html de prÃ©sentation]] en gÃ©nÃ©ral.
* Puis, rÃ©parez votre syntaxe [http://tantek.com/log/2002/10.html#L20021022t1432 '''B'''ed and '''B'''reakfast].
* Eliminez les [http://tantek.com/log/2002/11.html#L20021128t1352 Ancres Anorexiques].
* Utilisez de bons [[semantic-class-names-fr|noms de classes sÃ©mantiques]].
* ...

== Ressources ==
=== Tutoriels CHICs ===
Etape par Ã©tape, les tutoriels pour crÃ©er du contenu CHIC ou comment mettre Ã jour du contenu existant vers CHIC.

* [http://xtof.livejournal.com/14428.html validez votre css et html] Un guide simple Ã©tape par Ã©tape sur la maniÃ¨re et les raisons pour lesquelles vous devriez valider votre syntaxe
* [http://www.w3schools.com/ Retournez Ã l'Ã©cole] W3C Schools le couteau suisse des tutoriels CHIC (en)
* ...

=== Signets CHICs ===
* Regardez le [http://ma.gnolia.com/groups/posh Groupe POSH] sur Ma.gnolia
* Regardez les pages taguÃ©es [http://del.icio.us/tag/posh+microformats POSH et microformats] sur del.icio.us.

=== PrÃ©sentations CHICs ===
Les prÃ©sentations qui expliquent et encouragent les concepts et techniques pour l'utilisation du HTML sÃ©mantique.
Si/Quand cette section sera trop importante, nous pourrons la migrer sur [[posh-presentations-fr|prÃ©sentations-chic]].
* [http://www.elanceur.org/microformats/slides/CSSEntrelesFeuillesdeStyl.html CSS : Entre les Feuilles de Style par Tantek Ãelik (2003-03)] (traduite en franÃ§ais). Voir spÃ©cifiquement les dias 3-4,6 dÃ©marrant par "Abandonner les [http://tantek.com/log/2002/10.html#L20021022t1432 ed & eakfast]", et la dia 9 "CSS & le Spectre SÃ©mantique" qui fournit un aperÃ§u du spectre sÃ©mantique des balises (X)HTML.
* [http://www.tantek.com/presentations/2004etech/realworldsemanticspres.html real world semantics] (2004-02-11) - [http://www.elanceur.org/microformats/slides/semantiquevraimonde.html traduction en cours en franÃ§ais ici]
* [http://tantek.com/presentations/20040928sdforumws/semantic-xhtml.html Semantic XHTML: Can your website be your API? - Using semantic XHTML to show what you mean] (2004-09-28)
* [http://tantek.com/presentations/2005/09/elements-of-xhtml/ The Elements of Meaningful XHTML] (2005-09-29, first version: [http://tantek.com/presentations/2005/03/elementsofxhtml/ 2005-03-13 at SXSW Interactive]).
* ...
* Voir aussi les [[presentations-fr|prÃ©sentations]] microformats en gÃ©nÃ©ral.

=== Les Livres CHIC ===
Les livres de design web moderne qui documentent de bonnes pratiques html sÃ©mantique.
* <cite>[http://www.oreilly.com/catalog/wdnut3/ http://www.oreilly.com/catalog/covers/0596009879_thumb.gif] [http://www.oreilly.com/catalog/wdnut3/ Web Design in a Nutshell, Third Edition]</cite> by Jennifer Niederst Robbins See [http://jenville.com/ Jenville].
* <cite>[http://microformatique.com/book/ Microformats empowering your markup for Web 2.0]</cite> de John Allsopp. Le Chapitre 3 est un aperÃ§u gÃ©nÃ©ral et pratique de l'utilisation appropriÃ©e du HTML sÃ©mantique valide et structurÃ©.
* <cite>[http://htmlmastery.com/ http://htmlmastery.com/images/hm-cover-sm.gif][http://htmlmastery.com/ Semantics, Standards and Styling]</cite> par Paul Haine.
* <cite>[http://www.sitepoint.com/books/html1/ http://www.sitepoint.com/images/books/html1/books-index.gif][http://www.sitepoint.com/books/html1/ Build Your Own Web Site The Right Way Using HTML & CSS]</cite> par Ian Lloyd.

=== Magazines CHIC ===
Les magazines en ligne (et hors-ligne) qui publient frÃ©quemment des articles Ã propos du html sÃ©mantique.
Si/Quand cette section sera trop grosse, nous la migrerons vers [[posh-magazines-fr|magazines-posh]].

* [http://alistapart.com/ A List Apart: For People Making Websites] (voir en particulier [http://www.alistapart.com/topics/code/htmlxhtml/ les articles HTML et XHTML])
* [http://www.digital-web.com/ Digital Web Magazine]

=== Blogs CHIC ===
Les blogs avec des billets rÃ©guliers sur des discussions de grande qualitÃ©, des idÃ©es et qui font en gÃ©nÃ©ral avancer l'Ã©tat de l'art de POSH/CHIC. Si/Quand cette section sera trop importante nous la migrerons vers [[posh-blogs-fr|blogs CHIC et POSH]].
* [http://www.plaintxt.org/wp-content/uploads/sandbox-v09_readme.html Le thÃ¨me Sandbox pour WordPress readme.html] discute de ce qu'est POSH et comment le thÃ¨me aide les utilisateurs Ã l'utiliser.
* [http://dbaron.org/log/current le blog de David Baron]
* [http://zeldman.com/ Jeffrey Zeldman Presents]
* [http://meyerweb.com/ meyerweb.com - Eric Meyer]
* [http://microformatique.com/ Microformatique - John Allsopp]
* [http://simplebits.com/ SimpleBits - Dan Cederholm] (voir en particulier [http://simplebits.com/bits/simplequiz/ SimpleQuiz])
* [http://tantek.com/ Tantek Ãelik]
* ...

=== Billets de Blog CHIC===
Les billets de Blog qui fournissent des trucs et techniques, spÃ©cifiques, modernes, des guides pour utiliser plus souvent et mieux le HTML sÃ©mantique.
Si/Quand cette section sera trop grosse, nous la migrerons vers [[posh-blog-posts-fr|billets de blog CHIC]].
* [http://www.456bereastreet.com/archive/200711/posh_plain_old_semantic_html/ POSH - Plain Old Semantic HTML] par Roger Johansson.
* [http://tantek.com/log/2002/10.html#L20021022t1432 Bed and BReakfast markup (B&BR)] (2002-10-22) - Ã©viter les utilisations non-sÃ©mantiques des tags <nowiki>old et eak</nowiki> et utiliser Ã la place les <nowiki>ajouts de <h3> et les aragraphes</nowiki>.
* [http://tantek.com/log/2002/11.html#L20021128t1352 <nowiki><A>norexic </A>nchors</nowiki>] (2002-11-28) - utilisation de l'attribut "id" sur les Ã©lÃ©ments existants au lieu d'ajouter des Ã©lÃ©ments vides <code><nowiki><a name="foo"></a></nowiki></code>. Utilisez [[rel-bookmark-fr|rel-bookmark]]
pour poster des permaliens dans le document.
* [http://tantek.com/log/2002/12.html#L20021216t2238 A Touch of Class] (2002-12-16) - introduction Ã l'usage appropriÃ© de l'attribut HTML 'class'.
* [http://tantek.com/log/2002/12.html#L20021231t1850 Dive into Semantic MARKup] (2002-12-31)
* [http://tantek.com/log/2003/01.html#L20030104t1249 Comment markup, presentation and plumbing] (2003-01-04) - comment baliser une liste de commentaires, y compris un exemple d'utilisation
de l'attribut rare "hreflang".
* [http://meyerweb.com/eric/thoughts/2004/07/18/competent-classing Competent Classing] par Eric Meyer (2004-07-18)
* [http://tantek.com/log/2004/07.html#d20t2359 More about the 'class' attribute] (2004-07-20)
* [http://www.uie.com/articles/holzschlag_interview/ Web Standards in the Real World: An Interview with Molly Holzschlag] (2005-06-01)
* [http://westciv.typepad.com/dog_or_higher/2005/11/webpatterns_and.html Webpatterns and websemantics] (2005-11-18)
* [http://www.thefutureoftheweb.com/blog/2006/2/writing-semantic-html Writing Semantic HTML] par Jesse Skinner (2006-02-22)
* [http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/ On Appropriate Use of DIVs, or When Divitis Doesnât Apply] par Nate Koechley, 2006-12-15
* [http://nate.koechley.com/blog/2006/12/22/note_on_structural_and_semantic_meaning/ Quick Comment: Choose Class/ID Names Based on Semantic and/or Structural Meaning] by Nate Koechley, 2006-12-22
* [http://leland.nu/think/2006/07/31/seeing-is-believing/ SEEing is believing] - using standards and efficient design, coding, maintenance, and marketing to produce a search-engine-efficient site par Richard Leland (2006-07-31)
* [http://www.thefutureoftheweb.com/blog/2007/1/who-will-read-your-semantic-html Who will read your Semantic HTML?] by Jesse Skinner (2007-01-04)
* [http://microformatique.com/?page_id=109 Semantics in HTML] par John Allsopp (2007-01-08 - 2007-03-12)
** [http://microformatique.com/?p=83 Part I - Traditional HTML Semantics] (2007-01-08)
** [http://microformatique.com/?p=97 Part II - standardizing vocabularies] (2007-02-20)
** [http://microformatique.com/?p=108 Part III - Towards a semantic web] (2007-03-12)
* [http://microformatique.com/?p=82 Built in HTML semantics] Une liste des Ã©lÃ©ments sÃ©mantiques et des attributs du HTML par John Allsopp (2007-01-08)
* [http://tantek.com/log/2007/04.html#d20t0823 The Importance of Being POSH] by Tantek Ãelik (2007-04-20) -> [http://socialsynergyweb.net/cgi-bin/wiki/XtofWiki/EtreChic Etre Chic] traduction en cours pour publication en franÃ§ais sur le blog des microformateurs
* [http://factoryjoe.com/blog/2007/04/21/getting-back-to-posh-plain-ol-semantic-html/ Getting back to POSH (Plain olâ Semantic HTML)] par Chris Messina (2007-04-21) -> ([http://socialsynergyweb.net/cgi-bin/wiki/XtofWiki/CommentTraduirePosh amorÃ§age de traduction en franÃ§ais]
* [http://friedcellcollective.net/outbreak/2007/04/22/im-posh-are-you/ I'm POSH - are you?] (2007-04-23)
* [http://www.unintentionallyblank.co.uk/2007/04/24/plain-old-semantic-html/ The Internet's Upper Class Or Why Your Site Should Be POSH] (2007-04-24)
* ...

Voir aussi [http://technorati.com/search/%22semantic%20HTML%22 plus de blogs parlant du "semantic HTML"] et
[http://technorati.com/search/posh+semantic+HTML POSH].

===Podcasts CHIC et POSH===
Si/quand cette section deviendra trop grosse, nous pourrons la migrer vers [[posh-podcasts-fr|CHIC-podcasts]].
* 2007-05-03: [http://www.netmag.co.uk/podcasts/07-05-03-net.mp3 A talk about POSH] dans le podcast du magazine .Net Ã©pisode 8 (56 minutes ; 26 Mb. Section oÃ¹ ou en parle 30:10-42:40)
* 2005-09-29: [http://microformats.org/media/2005/09/we05-2-tantek-celik.mp3 The Elements of Meaningful XHTML] - podcast de la prÃ©sentation de Tantek du mÃªme nom ([http://tantek.com/presentations/2005/09/elements-of-xhtml/ diapos])

=== TrÃ©sors cachÃ©s CHIC ===
Le sites suivants ont des articles en rapport avec CHIC, des tutoriels, et. Sur eux, vous devrz plonger Ã partir de la page d'accueil. Aidez-nous Ã trouver les trÃ©sors CHIC dissimulÃ©s dans ces sites et ajoutez des liens ''directs'' vers des articles en rapport avec CHIC, des tutoriels pour les hisser aux sections spcÃ©cifiques au-dessus. Vous pouvez laisser les liesn vers le niveau le plus haut du siteÃ moins que n'ayez Ã plonger dans le site en entier pour y trouver tous les trÃ©sors.
* [http://www.w3schools.com/ W3Schools Tutoriels Web en ligne] (en)
* [http://dev.opera.com/ Dev.Opera] (en)
* [http://pompage.net pompage] (fr)

=== Faites que votre Blog soit CHIC ===
Si vous voulez amÃ©liorer votre blog existant, il existe quelques choses
vraiment simples que vous pouvez faire vous-mÃªme :

==== WordPress ====
* Utilisez les thÃ¨mes [http://www.plaintxt.org/themes/sandbox/ Sandbox] ou [http://getk2.com K2] qui supportent dÃ©jÃ hAtom et hCard
* Ajoutez le [http://redmonk.net/archives/2007/04/18/wordpress-widget-hcard-about-box/ Widget hCard About] Ã votre site

== RÃ©pandez CHIC ==
Maintenant que vous avez CHICquifiÃ© vos sites web, que faire ensuite ?
Bien, aidez Ã rÃ©pandre CHIC sur d'autres sites web !
* Faites la promo de CHIC. Fabriquez un bouton CHIC (peut-Ãªtre en utilisant une sÃ©mantique HTML et CSS) faisant un lien vers cette page et placez-le sur votre site, dans votre blogroll, en pied de page, etc. Venez mÃªme peut-Ãªtre avec un joli bouton graphique CHIC et partagez-le avec la communautÃ© microformats avec une licence libre (domaine public, CC-by-3.0, MIT, etc.). Inspirez-vous de ceux-ci :
** http://redmonk.net/wp-content/uploads/2007/04/chic_fancy.png - [http://creativecommons.org/licenses/by/3.0/ CC-by-3.0]
* Parlez-en Ã un ami. Parlez Ã vos amis designers de POSH et convainquez les de ''chicquifier'' leurs sites web personnels, et les sites web qu'ils construisent pour les autres. Bloguez votre expÃ©rience de CHICquification et les Ã©tapes que vous avez traversÃ©es pour CHICquifier vos sites web.
Ecrivez un [[posh-testimonial-fr|tÃ©moignage CHIC]] !
* Revenez avec plus d'idÃ©es pour aider Ã propager CHIC. En voici quelques-unes.
** Organisez un [http://socialsynergyweb.net/cgi-bin/wiki/XtofWiki/ChicPit CHICPit] - une journÃ©e ou demi-journÃ©e de session marathon mÃ©langeant des experts du HTML sÃ©mantique avec des types qui maintiennent/font tourner des sites web en gÃ©nÃ©ral, et regardez comment vous pouvez les mettre Ã jour en groupe vers CHIC durant la journÃ©e.
** ...

== AmÃ©liorez CHIC ==
Au fur et Ã mesure que vous lisez les [[posh-fr#Ressources|ressources CHIC]] documentÃ©es ici, quelles sont les autres ressources CHIC que vous avez trouvÃ©es ? Ajoutez-les Ã cette page.

Avec votre expÃ©rience et votre capacitÃ© Ã pouvoir Ã la fois "poshifier" vos sites et aider les autres Ã faire ainsi, qu'avez-vous appris ? Quels sont les types de [[posh-issues-fr|problÃ©matiques]] que vous avez rencontrÃ©es ? Quelles sont les questions souvent posÃ©es ? Quels seraient vos besoins pour aider facilement et rapidement plus de personnes Ã poshifier leurs contenus ?

== Historique ==

Une historique rapide de rÃ©fÃ©rences Ã "CHIC" dans ce contexte et au "bon vieux html sÃ©mantique".

=== bon vieux HTML sÃ©mantique ===
Les premiÃ¨res rÃ©fÃ©rences au "bon vieux HTML sÃ©mantique" qui ont Ã©tÃ© trouvÃ©es Ã cette heure sont :
* [http://groups.google.com/group/comp.infosystems.www.authoring.site-design/msg/2373e9043c08cba4 1998-05-01: Kirrily 'Skud' Robert on comp.infosystems.www.authoring.site-design] - "The site is implemented in HTML 4.0 Transitional with style sheets; this means that anyone with an older browser won't get presentational markup, just plain old semantic HTML. "
* [http://www.highrankings.com/advisor/tables-seo/ 2006-09-21 Drew's comment by on "Tables and SEO"]: "Iâd say itâs well worth it for a variety of reasons to only use tables when youâre presenting tabular data, and use plain old semantic HTML to mark up your content in all other cases." (retrouvÃ©e par [[User:Tantek|Tantek]] 08:20, 20 Apr 2007 (PDT))
Si vous pouvez trouver des rÃ©fÃ©rences plus anciennes, ''ajoutez-les'' les svp et joignez-y une citation brÃ¨ve du contexte de la rÃ©fÃ©rence Ã "bon vieux html sÃ©mantique".

Microformats Wiki - User contributions [en]

posh-fr