introduction-ja

(Difference between revisions)

Jump to: navigation, search
(Webデザインの進化)
m (Webデザインの進化: 日本語表現の修正)
Line 28: Line 28:
それから[http://en.wikipedia.org/wiki/Browser_wars ブラウザ戦争](1994-1999)が勃発した。主要なブラウザ開発会社は、典型的なWebサイトの作成者/デザイナが求めていたWebページの見ためを制御するための"革新的な"タグを導入しはじめた。結果、[http://www.w3.org/TR/REC-html32 HTML 3.2]は流行していた見ためのためのタグを"標準化"してしまった。
それから[http://en.wikipedia.org/wiki/Browser_wars ブラウザ戦争](1994-1999)が勃発した。主要なブラウザ開発会社は、典型的なWebサイトの作成者/デザイナが求めていたWebページの見ためを制御するための"革新的な"タグを導入しはじめた。結果、[http://www.w3.org/TR/REC-html32 HTML 3.2]は流行していた見ためのためのタグを"標準化"してしまった。
-
[http://www.w3.org/TR/REC-CSS1 CSS1] (1996)と論理表現に主眼を置いた[http://www.w3.org/TR/REC-html40/ HTML4] (1998)が現れ、かすかな希望をもたらした。しかし、WebデザイナがWebページにCSSを実戦投入するのは、CSS1/HTML4を完全に(もしくはほとんどを)実装したWebブラウザ(IE5/Mac, IE6/Windows, Netscape 6)がリリースされる(2000-2001)のを待たねばならなかった。コミュニティの先導者たちは精力的に採用し、([http://www.tantek.com/log/2004/07.html#ie5macbandpass い] [http://tantek.com/CSS/Examples/boxmodelhack.html く] [http://www.tantek.com/CSS/Examples/midpass.html つ] [http://tantek.com/CSS/Examples/highpass.html か]のハックを使いつつとはいえ)CSSを推進しはじめた。そして、マークアップからプレゼンテーションを分離することは、効率の良さと高い生産性をもたらしたのであった。しかし、その事実を声高に主張しつつも依然として少数派でしかなかった。
+
[http://www.w3.org/TR/REC-CSS1 CSS1] (1996)と論理表現に主眼を置いた[http://www.w3.org/TR/REC-html40/ HTML4] (1998)が現れ、かすかな希望をもたらした。しかし、WebデザイナがWebページにCSSを実戦投入するのは、CSS1/HTML4を完全に(もしくはほとんどを)実装したWebブラウザ(IE5/Mac, IE6/Windows, Netscape 6)がリリースされる(2000-2001)のを待たねばならなかった。コミュニティの先導者たちは、([http://www.tantek.com/log/2004/07.html#ie5macbandpass い] [http://tantek.com/CSS/Examples/boxmodelhack.html く] [http://www.tantek.com/CSS/Examples/midpass.html つ] [http://tantek.com/CSS/Examples/highpass.html か]のハックを使いつつとはいえ)CSSを精力的に採用し、推進しはじめた。そして、マークアップからプレゼンテーションを分離することは、効率の良さと高い生産性をもたらしたのであった。しかし、その事実を声高に主張しつつも依然として少数派でしかなかった。
The introduction of the Wired News redesign in 100% CSS, and the beautiful [http://csszengarden.com/ CSS Zen Garden] (2002-2003) was CSS's tipping point.  With the clear and obvious presentation of visual beauty and broad creativity, designers world-wide "got it" and realized that this was the future of web design.  The presentational markup of <code>&lt;FONT&gt;</code>, <code>&lt;TABLE&gt;</code>, and <code>spacer.gif</code> were tossed aside by any and all self-respecting web designers, who discovered the near infinite flexibility of <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, and the 'class' attribute.  A few in the community even began adopting some of the more semantic elements in HTML: <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>...<code>&lt;h6&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;li&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code>.  Leaders in the community exercised the semantic limits of strict HTML4 (experimented with XHTML) and documented [http://www.simplebits.com/publications/solutions/ best practices].
The introduction of the Wired News redesign in 100% CSS, and the beautiful [http://csszengarden.com/ CSS Zen Garden] (2002-2003) was CSS's tipping point.  With the clear and obvious presentation of visual beauty and broad creativity, designers world-wide "got it" and realized that this was the future of web design.  The presentational markup of <code>&lt;FONT&gt;</code>, <code>&lt;TABLE&gt;</code>, and <code>spacer.gif</code> were tossed aside by any and all self-respecting web designers, who discovered the near infinite flexibility of <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, and the 'class' attribute.  A few in the community even began adopting some of the more semantic elements in HTML: <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>...<code>&lt;h6&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;li&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code>.  Leaders in the community exercised the semantic limits of strict HTML4 (experimented with XHTML) and documented [http://www.simplebits.com/publications/solutions/ best practices].

Revision as of 22:48, 16 July 2006


Microformatsの手引き

関連: プレス, プレゼンテーション, 参考図書, 証言

Contents


Microformatsとは?

Microformatsとは、XHTML semantic contentの"辞書"です。Microformatsを使っておけば、リッチな情報をもつHTML文書からsemanticな意味を機械的に抽出できるようになります。つまり、Microformatsは、最も簡単にWeb上でデータ(もしくはデータフォーマット)を再利用するためのものなのです。

何故Microformatsなのか

何故Microformatsに注目するのか?

簡単に言えば、Microformatsにはいくつかの追い風があるのです。

  1. Webデザインや情報構造の進化の中での論理的な次のステップである
  2. 中央集権的なサービスを信頼せずとも、リッチな情報を公開する人自身で使える方法である
  3. "従来の"メタデータの試みは失敗したり広く導入されるまでにとても長い時間がかかることが判明したので新しいアプローチが必要とされていた
  4. データのための(X)HTMLを使うことができる

Webデザインの進化

はじめに1990年のことを話そう。HTMLというものがあった。それは良いものだった。シンプルで、小さい仕様で、(テキスト)データを論理的な意味をマークアップすることができた。そして、World Wide Web上でそれを共有することができた。

それからブラウザ戦争(1994-1999)が勃発した。主要なブラウザ開発会社は、典型的なWebサイトの作成者/デザイナが求めていたWebページの見ためを制御するための"革新的な"タグを導入しはじめた。結果、HTML 3.2は流行していた見ためのためのタグを"標準化"してしまった。

CSS1 (1996)と論理表現に主眼を置いたHTML4 (1998)が現れ、かすかな希望をもたらした。しかし、WebデザイナがWebページにCSSを実戦投入するのは、CSS1/HTML4を完全に(もしくはほとんどを)実装したWebブラウザ(IE5/Mac, IE6/Windows, Netscape 6)がリリースされる(2000-2001)のを待たねばならなかった。コミュニティの先導者たちは、( のハックを使いつつとはいえ)CSSを精力的に採用し、推進しはじめた。そして、マークアップからプレゼンテーションを分離することは、効率の良さと高い生産性をもたらしたのであった。しかし、その事実を声高に主張しつつも依然として少数派でしかなかった。

The introduction of the Wired News redesign in 100% CSS, and the beautiful CSS Zen Garden (2002-2003) was CSS's tipping point. With the clear and obvious presentation of visual beauty and broad creativity, designers world-wide "got it" and realized that this was the future of web design. The presentational markup of <FONT>, <TABLE>, and spacer.gif were tossed aside by any and all self-respecting web designers, who discovered the near infinite flexibility of <div>, <span>, and the 'class' attribute. A few in the community even began adopting some of the more semantic elements in HTML: <p>, <h1>...<h6>, <ol>, <ul>, <li>, <em>, <strong>. Leaders in the community exercised the semantic limits of strict HTML4 (experimented with XHTML) and documented best practices.

As the community followed rapidly in the footpaths they had worn, the leaders began to run into the limits of semantic (X)HTML. Other subcultures were attempting to rewrite the world in their own language(s) (RDF, "plain" XML, SVG), yet not having much of an impact on the World Wide Web, which required human presentable data, compatible with the browsers people already used. Social Software and Blogs, written by this new generation of web designers and programmers, began to take off.

Natural patterns emerged from the way people used blogging systems, putting things into lists, for example lists of other bloggers (known as blogrolls), and annotating them with information representing relationships such has having met, friends, family, etc. The first microformat, XFN, was designed to match these behaviors, and introduced to the blogging community (2003-2004), who adopted it within weeks. The GMPG was formed as a home for XFN, and documented a few key design principles later adopted for microformats. The key notion, that semantic (X)HTML could be extended, had been introduced and accepted by the community.

By understanding, using, and combining semantic (X)HTML building blocks, as well as determining that semantic (X)HTML could be validly extended via new rel, meta name, and class values, defined in (X)HTML profiles in the XMDP format, the community began to design and develop many more microformats (2004-2005). More patterns emerged from the blogging community, and each aggregate human behavior drove the design of simple, adaptive microformats to meet its needs. Creative Commons licensing became popular and rel-license was proposed. Outlines and lists: XOXO. Contact info: hCard. Calendars and events hCalendar.

Using these new found building blocks, the web design and information architecture communities were no longer limited by the predefined semantics of HTML4 (nor did they have to compromise human presentation and ease of authoring which other attempts sorely lacked). 2005 may well be the year that microformats became the next step in the evolution of the web.

The Appeal to Simplicity

関連ページ

Articles

Miscellaneous Reference

These are various intro-related links/articles which I haven't figured out yet how to incorporate. You may find them of interest. - Tantek

introduction-ja was last modified: Wednesday, December 31st, 1969

Views