posh-fr: Difference between revisions
(→Billets de Blog CHIC: add "Built in HTML Semantics" de John Allsopp + "Etre Chic" billet de Tantek à propos de l'importance d'être chic) |
|||
| Line 86: | Line 86: | ||
=== Billets de Blog CHIC=== | === 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 | Si/Quand cette section sera trop grosse, nous la migrerons vers [[posh-blog-posts-fr|billets de blog CHIC]]. | ||
* [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 | * [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 | * [http://www.thefutureoftheweb.com/blog/2006/2/writing-semantic-html Writing Semantic HTML] par Jesse Skinner (2006-02-22) | ||
* [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] | * [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://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://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://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://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://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) | * [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) | ||
Revision as of 05:20, 29 April 2007
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 orginaires 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 il donne une fausse mauvaise impression de sa simplicité, de sa bonne adoption par les designers web modernes, et des avantages qu'il possède qui 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 de l'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 ?
- 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.
- 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 validez votre CHIC.
- Deuxièmement, laissez tomber l'usage des TABLES utilisées purement à des fins de présentation, les GIFs d'espacement , et le html de présentation en général.
- Puis, réparez votre syntaxe Bed and Breakfast.
- Eliminez les Ancres Anorexiques.
- Utilisez de bons 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.
- 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
- Retournez à l'école W3C Schools le couteau suisse des tutoriels CHIC (en)
- ...
Signets CHICs
- Regardez le Groupe POSH sur Ma.gnolia
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.
- CSS: Between the Style Sheets by Tantek Çelik (2003-03), voir spécifiquement les dias 3-4,6 démarrant par "Leaving the <B>ed & <BR>eakfast", et la dia 9 "CSS & the Semantic Spectrum" qui fournit un aperçu du spectre sémantique des tags (X)HTML.
- real world semantics (2004-02-11) - traduction en cours en français ici
- Semantic XHTML: Can your website be your API? - Using semantic XHTML to show what you mean (2004-09-28)
- The Elements of Meaningful XHTML (2005-09-29, first version: 2005-03-13 at SXSW Interactive).
- ...
- Voir aussi les présentations microformats en général.
Les Livres CHIC
Les livres de design web moderne qui documentent de bonnes pratiques html sémantique.
Web Design in a Nutshell, Third Edition by Jennifer Niederst Robbins See Jenville.- Microformats empowering your markup for Web 2.0 de John Allsopp. Chapter 3 is a detailed and practical overview of the appropriate use of structural, valid and semantic HTML.
- ...
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.
- A List Apart: For People Making Websites
- Digital Web Magazine (voir en particulier les articles HTML et XHTML)
Blogs CHIC
Les blogs avec des billets réguliers sur des discussions de grande qualité, des idées et qui ont en général avancé l'état de l'art de POSH/CHIC. Si/Quand cette section sera trop importante nous la migrerons vers blogs CHIC et POSH.
- David Baron's weblog
- Jeffrey Zeldman Presents
- meyerweb.com - Eric Meyer
- Microformatique - John Allsopp
- SimpleBits - Dan Cederholm (see in particular SimpleQuiz)
- 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 billets de blog CHIC.
- Bed and BReakfast markup (B&BR) (2002-10-22) - éviter les utilisations non-sémantiques des tags <b>old et <br>eak et utiliser à la place les ajouts de <h3> et les <p>aragraphes.
- <A>norexic </A>nchors (2002-11-28) - utilisation de l'attribut "id" sur les éléments existants au lieu d'ajouter des éléments vides
<a name="foo"></a>. Utilisez rel-bookmark
pour poster des permaliens dans le document.
- A Touch of Class (2002-12-16) - introduction à l'usage approprié de l'attribut HTML 'class'.
- Dive into Semantic MARKup (2002-12-31)
- 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".
- Competent Classing par Eric Meyer (2004-07-18)
- More about the 'class' attribute (2004-07-20)
- Web Standards in the Real World: An Interview with Molly Holzschlag (2005-06-01)
- Webpatterns and websemantics (2005-11-18)
- Writing Semantic HTML par Jesse Skinner (2006-02-22)
- Who will read your Semantic HTML? by Jesse Skinner (2007-01-04)
- Semantics in HTML par John Allsopp (2007-01-08 - 2007-03-12)
- Part I - Traditional HTML Semantics (2007-01-08)
- Part II - standardizing vocabularies (2007-02-20)
- Part III - Towards a semantic web (2007-03-12)
- Built in HTML semantics Une liste des éléments sémantiques et des attributs du HTML par John Allsopp (2007-01-08)
- The Importance of Being POSH by Tantek Çelik (2007-04-20) -> Etre Chic traduction en cours pour publication en français sur le blog des microformateurs
- Getting back to POSH (Plain ol’ Semantic HTML) par Chris Messina (2007-04-21) -> (amorçage de traduction en français
- I’m POSH - are you? (2007-04-23)
- The Internet’s Upper Class Or Why Your Site Should Be POSH (2007-04-24)
- ...
Voir aussi plus de blogs parlant du "semantic HTML" et POSH.
CHICquez votre Blog
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 Sandbox ou K2 qui supportent déjà hAtom et hCard
- Ajoutez le 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 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. Peut-être même venez avec 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 poshifié 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 :
- 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. "
- 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 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".