posh-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
 
(41 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<h1>Plain Old Semantic HTML (POSH)</h1>
{{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>.
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].
 
__TOC__


== Origines ==
== 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]].  
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  
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]]  
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]].
a fait renaître l'idée de POSH et l'importance de promouvoir l'objectif  
plus large de POSH, quels sont les microformats qui en sont orginaires et en sont un propre sous-ensemble.
Pour en savoir plus voir [[posh-fr#Historique|Historique]].


== Pourquoi ==
== 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'.


Le terme [[semantic-html-fr|html sémantique]] est bon en bouche et contredit à la fois sa simplicité, comment il est bien installé
== Quoi ==
parmi les designers web modernes, et le fait qu'il ait des avantages qui aillent bien au delà que de faire la chose juste pour le web en utilisant un balisage sémantique. Nous avons besoin d'un terme court et facile à retenir
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.
qui capture l'essence du concept, et soit facile à conjuguer (posh, poshifier, poshed up).


== Le processus du POSH ==
== 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.


Que pouvez-vous faire pour être POSH et faire que vos sites web soient POSH ?
== La Checklist CHIC ==
 
* La première règle de CHIC est que vous devez [http://validator.w3.org valider] votre CHIC.
# Publier du contenu POSH. Lire les [[posh-fr#Ressources|ressources]] posh et vous assurer que votre site web publie du [[semantic-html-fr|(X)HTML sémantique]] valide,
* 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.
et utilise des [[semantic-class-names-fr|noms de classes sémantiques]] en rapport.
* Puis, réparez votre syntaxe [http://tantek.com/log/2002/10.html#L20021022t1432 '''B'''ed and '''B'''reakfast].
# Répandre le POSH.  Encourager les autres à être POSH et à POSHIFIER leurs sites web en faisant un lien vers cette page.
* Eliminez les [http://tantek.com/log/2002/11.html#L20021128t1352 Ancres Anorexiques].
# Améliorer le POSH. Nous aider à assembler des ressources pour permettre à plus de personnes de POSHifier facilement leurs sites web.
* Utilisez de bons [[semantic-class-names-fr|noms de classes sémantiques]].
 
== La Checklist POSH ==
 
* La première règle de POSH est que vous devez [http://validator.w3.org validez] votre POSH.
* Deuxièmement, laisser 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éparer votre syntaxe [http://tantek.com/log/2002/10.html#L20021022t1432 Bed and Breakfast].
* Eliminer les [http://tantek.com/log/2002/11.html#L20021128t1352 Ancres Anorexiques].
* Utiliser de bons [[semantic-class-names-fr|noms de classes sémantiques]].
* ...
* ...


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


=== Tutoriels POSH ===
* [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)
Etape par étape, les tutoriels pour créer du contenu POSH ou comment mettre à jour du contenu existant vers POSH.
 
* [http://westciv.com/style_master/house/tutorials/quick/validation/index.html valider votre css et html] Un guide simple étape par étape sur la manière et les raisons pour lesquelles vous devriez valider votre syntaxe
* ...
* ...


=== Signets POSH ===
=== Signets CHICs ===
* Regardez le [http://ma.gnolia.com/groups/posh Groupe POSH] sur Ma.gnolia
* 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 POSH ===
=== Présentations CHICs ===
Les présentations qui expliquent et encouragent les concepts et techniques pour l'utilisation de HTML sémantique.  
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-posh]].
Si/Quand cette section sera trop importante, nous pourrons la migrer sur [[posh-presentations-fr|présentations-chic]].
* [http://tantek.com/presentations/2003SXSW/stylesheets.html CSS: Between the Style Sheets by Tantek Çelik (2003-03)], specifically, see slides 3-4,6 starting with "Leaving the [http://tantek.com/log/2002/10.html#L20021022t1432 &lt;B&gt;ed & &lt;BR&gt;eakfast]", and slide 9 "CSS & the Semantic Spectrum" which provides an overview of the semantic spectrum of (X)HTML tags.
* [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 &lt;B&gt;ed & &lt;BR&gt;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.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/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]).
* [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]).
Line 61: Line 50:
* Voir aussi les [[presentations-fr|présentations]] microformats en général.
* Voir aussi les [[presentations-fr|présentations]] microformats en général.


=== Les Livres POSH ===
=== Les Livres CHIC ===
Les livres de design web moderne qui documentent de bonnes pratiques html sémantique.
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, <strong>Third Edition</strong>]</cite> by <span class="vcard"><span class="url fn n"><span class="given-name">Jennifer</span> <span class="additional-name">Niederst</span> <span class="family-name">Robbins</span></span> See [http://jenville.com/ Jenville].</span>
* <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, <strong>Third Edition</strong>]</cite> by <span class="vcard"><span class="url fn n"><span class="given-name">Jennifer</span> <span class="additional-name">Niederst</span> <span class="family-name">Robbins</span></span> See [http://jenville.com/ Jenville].</span>
* <cite>[http://microformatique.com/book/ Microformats empowering your markup for Web 2.0]</cite> de <span class="vcard"><span class="url fn n"><span class="given-name">John</span> <span class="family-name">Allsopp</span>.</span></span> Chapter 3 is a detailed and practical overview of the appropriate use of structural, valid and semantic HTML.
* <cite>[http://microformatique.com/book/ Microformats empowering your markup for Web 2.0]</cite> de <span class="vcard"><span class="url fn n"><span class="given-name">John</span> <span class="family-name">Allsopp</span>.</span></span> 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 <span class="vcard"><span class="url fn n"><span class="given-name">Paul</span> <span class="family-name">Haine</span>.</span></span>
* <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 <span class="vcard"><span class="url fn n"><span class="given-name">Ian</span> <span class="family-name">Lloyd</span>.</span></span>


=== Magazines POSH ===
=== Magazines CHIC ===
Les magazines en ligne (et hors-ligne) qui publient fréquemment des articles à propos du html sémantique.  
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]].
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]
* [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] (voir en particulier [http://www.alistapart.com/topics/code/htmlxhtml/ les articles HTML et XHTML])
* [http://www.digital-web.com/ Digital Web Magazine]  
 
=== Blogs POSH ===
Les blogs qui postent régulièrement des discussions de grande qualité, des idées et en général sont parvenus à l'état de l'art
de POSH. Si/Quand cette section sera trop importante nous la migrerons vers [[posh-blogs-fr|blogs posh]].


* [http://dbaron.org/log/current David Baron's weblog]
=== 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://zeldman.com/ Jeffrey Zeldman Presents]
* [http://meyerweb.com/ meyerweb.com - Eric Meyer]
* [http://meyerweb.com/ meyerweb.com - Eric Meyer]
* [http://microformatique.com/ Microformatique - John Allsopp]
* [http://microformatique.com/ Microformatique - John Allsopp]
* [http://simplebits.com/ SimpleBits - Dan Cederholm] (see in particular [http://simplebits.com/bits/simplequiz/ SimpleQuiz])
* [http://simplebits.com/ SimpleBits - Dan Cederholm] (voir en particulier [http://simplebits.com/bits/simplequiz/ SimpleQuiz])
* [http://tantek.com/ Tantek Çelik]
* [http://tantek.com/ Tantek Çelik]
* [http://on-air.hiseo.fr/ HTML5 et autres geekeries]
* ...
* ...


=== Billets de Blog POSH===
=== 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.  
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 posh]].
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><b>old et <br>eak</nowiki> et utiliser à la place les <nowiki>ajouts de <h3> et les <p>aragraphes</nowiki>.
* [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><b>old et <br>eak</nowiki> et utiliser à la place les <nowiki>ajouts de <h3> et les <p>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]]  
* [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.
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é  
* [http://tantek.com/log/2002/12.html#L20021216t2238 A Touch of Class] (2002-12-16) - introduction à l'usage approprié de l'attribut HTML 'class'.
de l'attribut HTML 'class'.
* [http://tantek.com/log/2002/12.html#L20021231t1850 Dive into Semantic MARKup] (2002-12-31)
* [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  
* [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".
de l'attribut rare "hreflang".
* [http://meyerweb.com/eric/thoughts/2004/07/18/competent-classing Competent Classing by Eric Meyer] (2004-07-18)
* [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://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://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://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 by Jesse Skinner] (2006-02-22)
* [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://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] by John Allsopp (2007-01-08 - 2007-03-12)
* [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=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=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=108 Part III - Towards a semantic web] (2007-03-12)
* [http://tantek.com/log/2007/04.html#d20t0823 The Importance of Being POSH] by Tantek Çelik (2007-04-20)
* [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://factoryjoe.com/blog/2007/04/21/getting-back-to-posh-plain-ol-semantic-html/ Getting back to POSH (Plain ol’ Semantic HTML)] by Chris Messina (2007-04-21)
* [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)
* ...
* ...


Line 115: Line 110:
[http://technorati.com/search/posh+semantic+HTML POSH].
[http://technorati.com/search/posh+semantic+HTML POSH].


=== POSH Bling for your Blog ===
===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
Si vous voulez améliorer votre blog existant, il existe quelques choses
vraiment simples que vous pouvez faire vous-même :  
vraiment simples que vous pouvez faire vous-même :  


==== WordPress ====
==== WordPress ====
* Utilisez les thèmes [http://www.plaintxt.org/themes/sandbox/ Sandbox] ou [http://getk2.com K2] qui supportent déjà hAtom et hCard
* 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
* Ajoutez le [http://redmonk.net/archives/2007/04/18/wordpress-widget-hcard-about-box/ Widget hCard About] à votre site


== Répandez POSH ==
== Répandez CHIC ==
 
Maintenant que vous avez CHICquifié vos sites web, que faire ensuite ?
Maintenant que vous avez POSHifié vos sites web, que faire ensuite ?
Bien, aidez à répandre CHIC sur d'autres sites web !
Bien, aidez à répandre POSH sur d'autres site 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]
* Faites la promo de POSH. Fabriquez un bouton POSH (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.
* 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.  
Peut-être même venez avec joli bouton graphique POSH et partagez-le avec la communauté microformats avec une licence libre (domaine public, CC-by-3.0, MIT, etc.)  
Ecrivez un [[posh-testimonial-fr|témoignage CHIC]] !
comme celui-ci : http://www.brewerdesigngroup.com/posh.png - [http://creativecommons.org/licenses/by/3.0/ CC-by-3.0]
* 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.
* Parlez-en à un ami. Parlez à vos amis designers de POSH et convainquez les de poshifier leurs sites web personnels, et les sites web qu'ils construisent pour les autres. Bloguez votre expérience de poshification et les étapes que vous avez traversées pour poshifier vos sites web.  
Ecrivez un [[posh-testimonial-fr|témoignage POSH]] !
* Revenez avec plus d'idées pour aider à propager POSH. En voici quelques-unes.
** Organisez un POSHPit - 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 POSH durant la journée.
** ...
** ...


== Améliorez POSH ==
== 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.
Au fur et à mesure que vous lisez les [[posh-fr#Ressources|ressources POSH]] documentées ici, quels sont les
autres ressources POSH que vous avez trouvées ? Ajoutez-les à cette page.


Avec votre expérience et votre capacité à pouvoir à la fois poshifié vos sites et aider les autres à faire ainsi,  
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 ?
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 ==
== Historique ==


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


=== bon vieux HTML sémantique  ===
=== bon vieux HTML sémantique  ===
Les premières références au <strong>"bon vieux HTML sémantique"</strong> qui ont été trouvées à cette heure sont :  
Les premières références au <strong>"bon vieux HTML sémantique"</strong> 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 <strong>plain old semantic HTML</strong>. "
* [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 <strong>plain old semantic HTML</strong>. "
* [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 <strong>plain old semantic HTML</strong> to mark up your content in all other cases." (retrouvée par [[User:Tantek|Tantek]] 08:20, 20 Apr 2007 (PDT))
* [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 <strong>plain old semantic HTML</strong> 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  
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".
à  "bon vieux html sémantique".

Latest revision as of 05:38, 22 October 2010

Code HTML Intrinsèquement Classe (CHIC)

Bienvenue sur la page d'accueil du POSH. En français, vous commencerez à entendre parler de CHIC. Rien n'est encore définitif, vos suggestions et revendications peuvent être encore discutées.

Origines

L'acronyme POSH a été inventé le 6 avril 2007 sur le canal IRC des microformats, par <kwijibo> pour désigner une abréviation raccourcie de plain-old-semantic-html. Une discussion partagée par John Allsopp, Tantek Çelik, Jeremy Keith et Chris Messina lors du 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 Historique.

Pourquoi POSH est traduit en CHIC

Le terme 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 Code HTML Intrinsèquement Classe proposée par Stéphane Gigandet colle bien au sens du 'POSH'.

Quoi

Le CHIC regroupe les meilleures pratiques d'utilisation du 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 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 Checklist CHIC. Continuez avec le Processus CHIC. Lisez les 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 ?

  1. Publier du contenu CHIC. Lire les ressources posh et vous assurer que votre site web publie du (X)HTML sémantique valide et utilise des noms de classes sémantiques en rapport.
  2. Répandre le CHIC. Encourager les autres à être CHIC et à CHICquifier leurs sites web en faisant un lien vers cette page.
  3. Améliorer le CHIC. Nous aider à assembler des ressources pour permettre à plus de personnes de POSHifier facilement leurs sites web.

La Checklist CHIC

Ressources

Tutoriels CHICs

Etape par étape, les tutoriels pour créer du contenu CHIC ou comment mettre à jour du contenu existant vers CHIC.

Signets CHICs

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 présentations-chic.

Les Livres CHIC

Les livres de design web moderne qui documentent de bonnes pratiques html sémantique.

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 magazines-posh.

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 blogs CHIC et POSH.

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 billets de blog CHIC.

pour poster des permaliens dans le document.

de l'attribut rare "hreflang".

Voir aussi plus de blogs parlant du "semantic HTML" et POSH.

Podcasts CHIC et POSH

Si/quand cette section deviendra trop grosse, nous pourrons la migrer vers CHIC-podcasts.

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.

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

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 :
  • 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 témoignage CHIC !

  • Revenez avec plus d'idées pour aider à propager CHIC. En voici quelques-unes.
    • Organisez un 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 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 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 :

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