posh-ja: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(sync: english: 2010-04-27T02:25:53)
 
(6 intermediate revisions by one other user not shown)
Line 1: Line 1:
<!-- english: 2010-04-27T02:25:53 -->
<div style="float:right;margin-left:1em">__TOC__</div>
<h1>Plain Old Semantic HTML (POSH)</h1>
<h1>Plain Old Semantic HTML (POSH)</h1>


<abbr title="Plain Old Semantic HTML">POSH</abbr>のホームページ（日本語版）へようこそ。（[[posh|英語版]]）
<abbr title="Plain Old Semantic HTML">POSH</abbr>のホームページ（日本語版）へようこそ。（[[posh|英語版]]）
__TOC__


== 起源 ==
== 起源 ==
'''POSH'''という用語は、[http://rbach.priv.at/Microformats-IRC/2007-04-06#T091456 2007年4月6日にmicroformatsのIRCチャネルにおいて]、<kwijibo>によって考案されました。POSHとは、[[plain-old-semantic-html]]の頭文字を取った略語です。John Allsopp、Tantek Çelik、Jeremy Keith、Chris Messinaらが[[events/2007-04-18-web-2-expo-dinner|2007年4月18日のWeb 2.0 Expo後に行われたMicroformats Dinner]]で交わした議論を通して、microformatsのよりどころでありそれが正しいサブセットともなっているPOSHの発想と、そのより幅広い目標を広めることの重要性があらためて注目されました。詳しくは[[posh#History|POSHの歴史]]を参照してください。
'''POSH'''という用語は、[http://rbach.priv.at/Microformats-IRC/2007-04-06#T091456 2007年4月6日にmicroformatsのIRCチャネルにおいて]、<kwijibo>によって考案されました。POSHとは、[[plain-old-semantic-html-ja|plain-old-semantic-html]]の頭文字を取った略語です。John Allsopp、Tantek Çelik、Jeremy Keith、Chris Messinaらが[[events/2007-04-18-web-2-expo-dinner|2007年4月18日のWeb 2.0 Expo後に行われたMicroformats Dinner]]で交わした議論を通して、microformatsのよりどころでありそれが正しいサブセットともなっているPOSHの発想と、そのより幅広い目標を広めることの重要性があらためて注目されました。詳しくは[[posh#History|POSHの歴史]]を参照してください。


== 理由 ==
== 理由 ==
[[semantic-html|意味的（セマンティック）なHTML]]という用語はやや仰々しく、それがどれほどシンプルなものであり昨今のウェブデザイナーたちの間でいかに確固たる支持を受けているかということも、意味的なマークアップを用いてウェブを真っ当に作ることだけにとどまらない大きなメリットをもたらすということも、いずれもうまく伝えられていません。私たちは、そのコンセプトの本質をうまく表現でき、簡単に動詞にも応用できるような（たとえば「to posh」「poshify」「poshed up」などという使い方ができるような）、覚えやすい用語を必要としていたのです。
[[semantic-html-ja|意味的（セマンティック）なHTML]]という用語はやや仰々しいため、それがどれほどシンプルなものであり昨今のウェブデザイナーたちの間でいかに確固たる支持を受けているかということも、意味的なマークアップを用いてウェブを真っ当に作ることだけにとどまらない大きなメリットをもたらすということも、うまく伝えられていません。私たちは、そのコンセプトの本質を的確に表現でき、簡単に動詞にも応用できるような（たとえば「to posh」「poshify」「poshed up」などという使い方ができるような）、覚えやすい用語を必要としていたのです。


== POSHとは？ ==
== POSHとは？ ==
POSHとは、Webページを作成する際に[[semantic-html|意味的なHTML]]を用いることのベストプラクティスを簡潔にあらわしたものです。意味的なHTMLとは、HTML 4.01（またはXHTML 1.0）にある要素と属性のなかで、''[[semantic|表現的]]''ではなく''[[presentational|意味的]]''なものから成るサブセットのこと。POSHを習い理解する最も良い方法は、実践することです。あなたのWebサイトからいちページを選び、[[posh-ja#POSH.E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88|POSHチェックリスト]]を適用してください。[[posh-ja#POSH.E3.83.97.E3.83.AD.E3.82.BB.E3.82.B9|POSHプロセス]]に則り、そのまま続けてください。POSHについてより詳しく学ぶには、[[posh-ja#POSH.E3.83.AA.E3.82.BD.E3.83.BC.E3.82.B9|POSHリソース]]をお読みください。
POSHとは、Webページを作成する際に[[semantic-html-ja|意味的なHTML]]を用いることのベストプラクティスを簡潔にあらわしたものです。意味的なHTMLとは、HTML 4.01（またはXHTML 1.0）にある要素と属性のなかで、''[[presentational-ja|表現的]]''ではなく''[[semantic-ja|意味的]]''なものから成るサブセットのこと。POSHを習い理解する最も良い方法は、実践することです。あなたのWebサイトからいちページを選び、[[posh-ja#POSH.E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88|POSHチェックリスト]]を適用してください。[[posh-ja#POSH.E3.83.97.E3.83.AD.E3.82.BB.E3.82.B9|POSHプロセス]]に則り、そのまま続けてください。POSHについてより詳しく学ぶには、[[posh-ja#POSH.E3.83.AA.E3.82.BD.E3.83.BC.E3.82.B9|POSHリソース]]をお読みください。


== POSHプロセス ==
== POSHプロセス ==
あなたがPOSHであるために、そしてあなたのウェブサイトをPOSHなものにするためには、何ができるでしょうか？
あなたがPOSHであるために、そしてあなたのウェブサイトをPOSHなものにするためには、何ができるでしょうか？


# POSHなコンテンツを公開する。[[posh-ja#POSH.E3.83.AA.E3.82.BD.E3.83.BC.E3.82.B9|POSHリソース]]に目を通し、あなたのウェブサイトでvalidな[[semantic-html|semantic (X)HTML]]を公開し、それに伴って[[semantic-class-names]]を使用するように心がけましょう。
# POSHなコンテンツを公開する。[[posh-ja#POSH.E3.83.AA.E3.82.BD.E3.83.BC.E3.82.B9|POSHリソース]]に目を通し、あなたのウェブサイトでvalidな[[semantic-html-ja|意味的な(X)HTML]]を公開し、それに伴って[[semantic-class-names]]を使用するように心がけましょう。
# POSHを広める。このページへのリンクを貼って、他の人たちもPOSHになるように、そしてウェブサイトをPOSH対応させる（POSHify）ように勧めてみましょう。
# POSHを広める。このページへのリンクを貼って、他の人たちもPOSHになるように、そしてウェブサイトをPOSH対応させる（POSHify）ように勧めてみましょう。
# POSHを改善する。より多くの人が手軽にウェブサイトをPOSH対応させられるように、POSHリソースの収集をお手伝いください。
# POSHを改善する。より多くの人が手軽にウェブサイトをPOSH対応させられるように、POSHリソースの収集をお手伝いください。
Line 24: Line 24:
* POSHの最初のルールとして、まずあなたのPOSHを必ず[http://validator.w3.org 検証]しましょう。
* POSHの最初のルールとして、まずあなたのPOSHを必ず[http://validator.w3.org 検証]しましょう。
* 次に、単なる表現上の目的で使われているTABLEや、スペーサーGIF画像、いわゆる[[presentational-html|表現的なHTML]]を取り除きましょう。
* 次に、単なる表現上の目的で使われているTABLEや、スペーサーGIF画像、いわゆる[[presentational-html|表現的なHTML]]を取り除きましょう。
* さらに、（BタグやBRタグの濫用を典型とする）[http://tantek.com/log/2002/10.html#L20021022t1432 その場しのぎ（Bed and BReakfast）]のマークアップを修正しましょう。
* さらに、（BタグやBRタグの濫用を典型とする）[http://tantek.com/log/2002/10.html#L20021022t1432 その場しのぎ（'''B'''ed and '''BR'''eakfast）]のマークアップを修正しましょう。
* [http://tantek.com/log/2002/11.html#L20021128t1352 空っぽアンカー（Anorexic Anchors）]を取り除きましょう。
* [http://tantek.com/log/2002/11.html#L20021128t1352 空っぽアンカー（Anorexic Anchors）]を取り除きましょう。
* よい[[semantic-class-names|意味的なクラス名]]を使いましょう。
* よい[[semantic-class-names|意味的なクラス名]]を使いましょう。
Line 38: Line 38:
=== POSH関連ブックマーク ===
=== POSH関連ブックマーク ===
* Ma.gnoliaの[http://ma.gnolia.com/groups/posh POSHグループ]をチェックしてみてください。
* Ma.gnoliaの[http://ma.gnolia.com/groups/posh POSHグループ]をチェックしてみてください。
* See pages tagged both [http://del.icio.us/tag/posh+microformats POSH and microformats] on del.icio.us.


=== POSH関連プレゼンテーション ===
=== POSH関連プレゼンテーション ===
Line 74: Line 75:
Blog posts that provide specific, modern, guidance, techniques and tips for using more and better semantic HTML.  This list is ''incomplete''. We know there are lots more blog posts out there that fit the aforementioned description - please add them! If/when this section gets too big, we can move it to [[posh-blog-posts]].
Blog posts that provide specific, modern, guidance, techniques and tips for using more and better semantic HTML.  This list is ''incomplete''. We know there are lots more blog posts out there that fit the aforementioned description - please add them! If/when this section gets too big, we can move it to [[posh-blog-posts]].


* [http://www.plaintxt.org/wp-content/uploads/sandbox-v09_readme.html The Sandbox theme for WordPress readme.html] discusses what POSH is and how the theme helps users use it.
* [http://tantek.com/log/2002/10.html#L20021022t1432 Bed and BReakfast markup (B&BR)] (2002-10-22) - avoiding nonsemantic uses of <nowiki><b>old and <br>eak</nowiki> tags and using <nowiki><h3>adings and <p>aragraphs</nowiki> instead.
* [http://tantek.com/log/2002/10.html#L20021022t1432 Bed and BReakfast markup (B&BR)] (2002-10-22) - avoiding nonsemantic uses of <nowiki><b>old and <br>eak</nowiki> tags and using <nowiki><h3>adings and <p>aragraphs</nowiki> instead.
* [http://tantek.com/log/2002/11.html#L20021128t1352 <nowiki><A>norexic </A>nchors</nowiki>] (2002-11-28) - use the "id" attribute on existing elements instead of adding empty <code><nowiki><a name="foo"></a></nowiki></code> elements. Use [[rel-bookmark]] for post permalinks within the document.
* [http://tantek.com/log/2002/11.html#L20021128t1352 <nowiki><A>norexic </A>nchors</nowiki>] (2002-11-28) - use the "id" attribute on existing elements instead of adding empty <code><nowiki><a name="foo"></a></nowiki></code> elements. Use [[rel-bookmark]] for post permalinks within the document.
Line 96: Line 98:
* [http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/ On Appropriate Use of DIVs, or When Divitis Doesn’t Apply] by Nate Koechley, 2006-12-15
* [http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/ On Appropriate Use of DIVs, or When Divitis Doesn’t Apply] by 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://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 by Richard Leland (2006-07-31)
* ...
* ...


Line 107: Line 110:
* [http://www.w3schools.com/ W3Schools Online Web Tutorials]  
* [http://www.w3schools.com/ W3Schools Online Web Tutorials]  
* [http://dev.opera.com/ Dev.Opera]
* [http://dev.opera.com/ Dev.Opera]
* [http://phpforms.net/tutorial/tutorial.html/ php tutorials] - online web tutorials for beginners.


=== POSH Bling for your Blog ===
=== POSH Bling for your Blog ===

Latest revision as of 07:57, 29 April 2010

Plain Old Semantic HTML (POSH)

POSHのホームページ（日本語版）へようこそ。（英語版）

起源

POSHという用語は、2007年4月6日にmicroformatsのIRCチャネルにおいて、<kwijibo>によって考案されました。POSHとは、plain-old-semantic-htmlの頭文字を取った略語です。John Allsopp、Tantek Çelik、Jeremy Keith、Chris Messinaらが2007年4月18日のWeb 2.0 Expo後に行われたMicroformats Dinnerで交わした議論を通して、microformatsのよりどころでありそれが正しいサブセットともなっているPOSHの発想と、そのより幅広い目標を広めることの重要性があらためて注目されました。詳しくはPOSHの歴史を参照してください。

理由

意味的（セマンティック）なHTMLという用語はやや仰々しいため、それがどれほどシンプルなものであり昨今のウェブデザイナーたちの間でいかに確固たる支持を受けているかということも、意味的なマークアップを用いてウェブを真っ当に作ることだけにとどまらない大きなメリットをもたらすということも、うまく伝えられていません。私たちは、そのコンセプトの本質を的確に表現でき、簡単に動詞にも応用できるような（たとえば「to posh」「poshify」「poshed up」などという使い方ができるような）、覚えやすい用語を必要としていたのです。

POSHとは？

POSHとは、Webページを作成する際に意味的なHTMLを用いることのベストプラクティスを簡潔にあらわしたものです。意味的なHTMLとは、HTML 4.01（またはXHTML 1.0）にある要素と属性のなかで、表現的ではなく意味的なものから成るサブセットのこと。POSHを習い理解する最も良い方法は、実践することです。あなたのWebサイトからいちページを選び、POSHチェックリストを適用してください。POSHプロセスに則り、そのまま続けてください。POSHについてより詳しく学ぶには、POSHリソースをお読みください。

POSHプロセス

あなたがPOSHであるために、そしてあなたのウェブサイトをPOSHなものにするためには、何ができるでしょうか？

  1. POSHなコンテンツを公開する。POSHリソースに目を通し、あなたのウェブサイトでvalidな意味的な(X)HTMLを公開し、それに伴ってsemantic-class-namesを使用するように心がけましょう。
  2. POSHを広める。このページへのリンクを貼って、他の人たちもPOSHになるように、そしてウェブサイトをPOSH対応させる（POSHify）ように勧めてみましょう。
  3. POSHを改善する。より多くの人が手軽にウェブサイトをPOSH対応させられるように、POSHリソースの収集をお手伝いください。

POSHチェックリスト

POSHリソース

POSHチュートリアル

Step by step tutorials to create POSH content or upgrade existing content to POSH.

POSH関連ブックマーク

POSH関連プレゼンテーション

Presentations which explain and advocate concepts and techniques for utilizing semantic HTML. If/when this section gets too big, we can move it to posh-presentations.

POSH関連書籍

Modern web design books which document good semantic HTML practices.

POSH関連雑誌

Online (and off) magazines which frequently publish articles about semantic HTML. If/when this section gets too big, we can move it to posh-magazines.

POSH関連ブログ

Blogs that with some regularity post high quality discussions, insights, and in general have advanced the state of the art of POSH. If/when this section gets too big, we can move it to posh-blogs.

POSH関連ブログ記事

Blog posts that provide specific, modern, guidance, techniques and tips for using more and better semantic HTML. This list is incomplete. We know there are lots more blog posts out there that fit the aforementioned description - please add them! If/when this section gets too big, we can move it to posh-blog-posts.

See more blogs talking about "semantic HTML" and POSH.

POSH関連ポッドキャスト

  • A talk about POSH in the .Net magazine podcast episode 8 (56 minutes; 26 Mb. Relevant section 30:10-42:40)

POSHにまつわる隠れた情報源

The following sites have POSH related articles, tutorials etc. on them, but you have to dig for them from the home page. Help find the hidden POSH treasures in these sites and add direct links to POSH related articles, tutorials etc. to the specific sections above. You can leave the top level site links here until/unless you have dug thru the entire site and found all the treasures.

POSH Bling for your Blog

If you want to improve your existing blog, there are some pretty simple things you can do:

WordPress

POSHを広める

Now that you've poshified your website(s), what next? Well, help spread POSH to other websites!

  • Promote POSH. Make a POSH button (perhaps using semantic HTML and CSS ;) linking to this page and put it on your site, in your blogroll, in your footer, etc. Maybe even come up with a nice POSH button graphic and share it with the microformats community with a liberal license (public domain, CC-by-3.0, MIT, etc.) Like these:
  • Tell a friend. Talk to web design friends about POSH and convince and help them to poshify both their personal websites, and the websites they build for others. Blog about your experience with poshification and what steps you went through to poshify your websites. Write a posh-testimonial!
  • Come up with more ideas to help spread POSH. Here are a few.
    • Hold a PoshPit - a one or half day marathon session mixing semantic HTML experts with folks who maintain/run web sites in general and see how many websites you can collectively upgrade to POSH during the course of the day.
    • ...

POSHを改善する

As you read the POSH resources documented here, what other POSH resources did you find? Add them to this page.

With your experience with both poshifying your sites and helping others do so, what have you learned? What kind of issues did you run into? What questions were commonly asked? What do you feel like you need to more easily and quickly help more people poshify their content?

歴史

A brief history of references to "POSH" in this context and "plain old semantic HTML".

plain old semantic HTML

The earliest references to "plain old semantic HTML" that have been found so far are:

If you can find earlier references, please add them and include a brief quotation of the context of the reference to "plain old semantic HTML".

Retrieved from "http://microformats.org/wiki/index.php?title=posh-ja&oldid=42493"