<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>網絡暴民 Jacky&#039;s Blog &#187; web-standard</title>
	<atom:link href="http://jacky.seezone.net/tag/web-standard/feed/" rel="self" type="application/rss+xml" />
	<link>http://jacky.seezone.net</link>
	<description></description>
	<lastBuildDate>Mon, 30 Jan 2012 17:45:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Chrome之攻殼</title>
		<link>http://jacky.seezone.net/2009/09/24/2597/</link>
		<comments>http://jacky.seezone.net/2009/09/24/2597/#comments</comments>
		<pubDate>Thu, 24 Sep 2009 04:33:50 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[電腦]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=2597</guid>
		<description><![CDATA[今年 Google I/O 大會花了很多時間講 HTML5 技術：canvas、video、geolocation、app cache &#38; storage、web workers 等等，說這些東西可以如何為 Web 帶來創新，言談間充滿熱情。然後，在一張 HTML5 Support 的 Slide 上，看到滿是剔，也就是想說：HTML5 已被支持了，請大家去開發吧！當然，這張表獨欠 IE，演講的 Vic Gundotra 說：「微軟已說會支持 HTML5，我們實在急不及待！」然後就是一陣鬨堂大笑。 然而現實問題卻不能一笑置之，IE 雖然最落後，但卻還是最多人用。Google 推出 Chrome 的確刺激瀏覽器市場，但 IE 太笨重，改進速度太慢，完全跟不上，在拖著 Google HTML5 大計的後腿。Google 的「急不及待」並非只是取笑對手，而是真的急了，急到要「攻殼」：推出 Google Chrome Frame ，也就是表面上用的是 IE，但實際內容使用 Chrome 的 Webkit 和 V8 引擎來運作，使 IE 突然之間就支持所有 HTML5 功能了。 這麼一招看似搞笑，但卻似是為了即將推出的 Wave 舖路。Wave 是 Google [...]]]></description>
			<content:encoded><![CDATA[	<p><a href="http://www.flickr.com/photos/gslin/3945610974/" title="Flickr 上 Gea-Suan Lin 的 IE7 + Google Chrome Frame (Acid3)"><img src="http://farm4.static.flickr.com/3484/3945610974_f86c17fd4a.jpg" width="500" height="423" alt="IE7 + Google Chrome Frame (Acid3)" /></a></p>

	<p>今年 Google I/O 大會花了很多時間講 HTML5 技術：canvas、video、geolocation、app cache &#38; storage、web workers 等等，說這些東西可以如何為 Web 帶來創新，言談間充滿熱情。然後，在一張 HTML5 Support 的 Slide 上，看到滿是剔，也就是想說：HTML5 已被支持了，請大家去開發吧！當然，這張表獨欠 IE，演講的 Vic Gundotra 說：「微軟已說會支持 HTML5，我們實在急不及待！」然後就是一陣鬨堂大笑。</p>

	<p>然而現實問題卻不能一笑置之，IE 雖然最落後，但卻還是最多人用。Google 推出 Chrome 的確刺激瀏覽器市場，但 IE 太笨重，改進速度太慢，完全跟不上，在拖著 Google HTML5 大計的後腿。Google 的「急不及待」並非只是取笑對手，而是真的急了，急到要「攻殼」：推出 <a href="http://code.google.com/intl/zh-TW/chrome/chromeframe/">Google Chrome Frame</a> ，也就是表面上用的是 IE，但實際內容使用 Chrome 的 Webkit 和 V8 引擎來運作，使 IE 突然之間就支持所有 HTML5 功能了。</p>

	<p>這麼一招看似搞笑，但卻似是為了即將推出的 <a href="http://wave.google.com">Wave</a> 舖路。Wave 是 Google 的一個重要「殺著」，其目光很遠大，能將現在網上溝通合作平台帶到另一個層次，但面對著一個隱憂：這東西很難理解，推廣不易。所以最實在的，還是讓越多人試用得到越好，但偏偏 IE 卻不能運行得到使用 HTML5 技術的 Wave。因此，Google 便有此一著，推出「狗頭羊肉」的 Chrome Frame 插件。</p>

	<p>不過，會裝這個插件的人，為不麼不索性裝個原裝的 Chrome 用？答案大概是「自動化」。這個插件查看網頁代碼上一個叫 X-UA-Compatible 的 meta tag，來判別是否是用 Chrome Frame 來運行。這樣，用家便不用記著那個網頁要用 Chrome 來開了。其實這一招來自 IE8 的 <a href="http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx">相容 IE7</a> 模式。</p>

	<p>Chrome Frame 的推出可見 Google 之急，以一副領導姿態幫 IE 「升級」。Chrome 在技術上的確領前很多，正當一眾瀏覽器在比拼 Javascript 速度的時候，早前出現了一個 <a href="http://jedi.org/blog/archives/005927.html">Javascript <span class="caps">NES</span> Emulator</a>  卻顯示 Chrome 在 canvas 上的效能遠超對手，也示範了更多可能性。可是 Chrome 雖然技術一流，但卻並非完美，其中 <a href="http://jedi.org/blog/archives/005927.html">親和力便是一場災難</a> ，Chrome Frame 之「攻殼」，也就將 IE8 的親和力一下子廢除了。</p>


	Tags:  <a href="http://jacky.seezone.net/tag/browser/" title="browser" rel="tag">browser</a>, <a href="http://jacky.seezone.net/tag/chrome/" title="chrome" rel="tag">chrome</a>, <a href="http://jacky.seezone.net/tag/html/" title="html" rel="tag">html</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2009/09/24/2597/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>有關 Acid3 測試</title>
		<link>http://jacky.seezone.net/2009/02/21/2393/</link>
		<comments>http://jacky.seezone.net/2009/02/21/2393/#comments</comments>
		<pubDate>Sat, 21 Feb 2009 05:28:26 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[電腦]]></category>
		<category><![CDATA[acid3]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[test]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=2393</guid>
		<description><![CDATA[最近看電腦雜誌都開始用 Acid3 測試的瀏覽器對未來 Web 技術的支持度，但要留意 Acid3 的這麼一句： To pass the test, a browser must use its default settings, the animation has to be smooth, the score has to end on 100/100, and the final page has to look exactly, pixel for pixel, like this reference rendering . 意思就是說，不能只單單看分數是 100 就等於通過測試，出來的樣子還要和 reference 一模一樣，而且動畫還要是順暢的。 暫時為止，據說只有 Webkit 和 [...]]]></description>
			<content:encoded><![CDATA[	<p><img src="http://img.photobucket.com/albums/v217/jackysee/JackyBlog/acid3.jpg" alt=""/></p>

	<p>最近看電腦雜誌都開始用 <a href="http://acid3.acidtests.org/">Acid3</a> 測試的瀏覽器對未來 Web 技術的支持度，但要留意 Acid3 的這麼一句：</p>

 <blockquote>

	<p>To pass the test, a browser must use its default settings, the animation has to be smooth, the score has to end on 100/100, and the final page has to look exactly, pixel for pixel, like <a href="http://acid3.acidtests.org/reference.html">this reference rendering</a> .</p>

 </blockquote>

	<p>意思就是說，不能只單單看分數是 100 就等於通過測試，出來的樣子還要和 reference 一模一樣，而且動畫還要是順暢的。</p>

	<p>暫時為止，據說只有 Webkit 和 Presto 的引擎通過 Acid3 測試。當然，Acid3 只是瀏覽器的其中一面，不足以論成敗。</p>

	<p>延伸閱讀： <a href="http://www.webstandards.org/2008/10/02/dowehaveawinner/">Acid3 receptions and misconceptions and do we have a winner?</a></p>
	Tags:  <a href="http://jacky.seezone.net/tag/acid3/" title="acid3" rel="tag">acid3</a>, <a href="http://jacky.seezone.net/tag/browser/" title="browser" rel="tag">browser</a>, <a href="http://jacky.seezone.net/tag/test/" title="test" rel="tag">test</a>, <a href="http://jacky.seezone.net/tag/web/" title="web" rel="tag">web</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2009/02/21/2393/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>不走回頭路</title>
		<link>http://jacky.seezone.net/2009/01/30/2349/</link>
		<comments>http://jacky.seezone.net/2009/01/30/2349/#comments</comments>
		<pubDate>Thu, 29 Jan 2009 16:50:06 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[電腦]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[cloud-computing]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=2349</guid>
		<description><![CDATA[自從 Chrome 過了新屎坑期，聲勢又一下子沉了下來，即使上年尾正式跳出 beta，也不是人人留意。 《數位時代》 上一篇翻譯文章 Google Chrome, Out of Beta. Will That Be Enough? 提到年尾時 Chrome 的市佔率不足 1% ，增長太少太慢，Google 離其「雲端夢」還有很遠。 那 Chrome 在 Google 的「雲端夢」裏，佔多重位置？ Google 的商業模式是網上賣廣告，所以她要令用戶黏著網絡。要增加黏度，除了讓用戶搜尋網頁，還可以處理電郵、文件、日程等等。她們做得非常出色，很多人已轉用一系列的 Google 應用。最終可能一個簡單的 OS 再加一個瀏覽器已足夠所需。 由網頁到網絡應用程式，瀏覽器要作出相應的改變，也是 Chrome 推出時的重點：更快、更穩定、更安全和提供離線運作。Chrome 的確令人眼前一亮，但並不超前其他瀏覽器很多。Opera、Firefox 已有很不錯的速度， Tracemonkey 跟 v8 也可以一拼。離線操作上，各個平台上主流瀏覽器則可以安裝 Gears 來支持。例如即將推出的 Offline Gmail ，也並不一定要使用 Chrome 才能用。 換句話說，即使沒有 Chrome，其他瀏覽器也能完 Google 的「雲端夢」，因為 Google 靠的是「公開」。用的是公開的網頁標準和技術，開發的 Chrome、V8、Gears [...]]]></description>
			<content:encoded><![CDATA[	<p>自從 <a href="http://www.google.com/chrome">Chrome</a> 過了新屎坑期，聲勢又一下子沉了下來，即使上年尾正式跳出 beta，也不是人人留意。  <a href="http://www.bnext.com.tw/">《數位時代》</a> 上一篇翻譯文章 <a href="http://gigaom.com/2008/12/11/google-chrome-out-of-beta-will-that-be-enough/">Google Chrome, Out of Beta. Will That Be Enough?</a> 提到年尾時 Chrome 的市佔率不足 1% ，增長太少太慢，Google 離其「雲端夢」還有很遠。</p>

	<p>那 Chrome 在 Google 的「雲端夢」裏，佔多重位置？</p>

	<p>Google 的商業模式是網上賣廣告，所以她要令用戶黏著網絡。要增加黏度，除了讓用戶搜尋網頁，還可以處理電郵、文件、日程等等。她們做得非常出色，很多人已轉用一系列的 Google 應用。最終可能一個簡單的 OS 再加一個瀏覽器已足夠所需。</p>

	<p>由網頁到網絡應用程式，瀏覽器要作出相應的改變，也是 Chrome 推出時的重點：更快、更穩定、更安全和提供離線運作。Chrome 的確令人眼前一亮，<strong>但並不超前其他瀏覽器很多</strong>。Opera、Firefox 已有很不錯的速度， <a href="https://wiki.mozilla.org/JavaScript:TraceMonkey">Tracemonkey</a> 跟 <a href="http://code.google.com/p/v8/">v8</a> 也可以一拼。離線操作上，各個平台上主流瀏覽器則可以安裝 <a href="http://code.google.com/p/gears/">Gears</a> 來支持。例如即將推出的 <a href="http://gmailblog.blogspot.com/2009/01/new-in-labs-offline-gmail.html">Offline Gmail</a> ，也並不一定要使用 Chrome 才能用。</p>

	<p>換句話說，<strong>即使沒有 Chrome，其他瀏覽器也能完 Google 的「雲端夢」，因為 Google 靠的是「公開」</strong>。用的是公開的網頁標準和技術，開發的 Chrome、V8、Gears 都是開源的，這當中沒有甚麼秘密，也沒有甚麼專利技術，人人皆可參與。</p>

	<p>第一次瀏覽器大戰，IE 與 Netscape 各自推出專有技術吸引開發者，瀏覽器的市佔率有決定性的影響，結果出現了很多「只限 IE」的網頁。但 IE 不思進取，苦了開發者，所以近年開發都提倡支持標準技術，瀏覽器也以此方向發展。第二次瀏覽器大戰，不會走回頭路，鬥的不是專利技術，而是對公開標準的支持和瀏覽器本身的實用性、效能等等。而無論瀏覽器怎樣死鬥爛鬥，只要是依公開、標準的路線，Google 也會贏，因為用戶對網絡的黏度增加了。Chrome 的市佔率如何，影響也沒有那麼大了。</p>

	<p>對 Google 來說，Chrome 仍是重要的，但可能非為「雲端夢」的主角，而是作幕後黑手，「指引」瀏覽器的發展方向，親身示範下一代瀏覽器該如何，才能配上越來越豐富的網絡應用，刺激開發社群走向其「雲端夢」裏。</p>


	Tags:  <a href="http://jacky.seezone.net/tag/browser/" title="browser" rel="tag">browser</a>, <a href="http://jacky.seezone.net/tag/chrome/" title="chrome" rel="tag">chrome</a>, <a href="http://jacky.seezone.net/tag/cloud-computing/" title="cloud-computing" rel="tag">cloud-computing</a>, <a href="http://jacky.seezone.net/tag/google/" title="google" rel="tag">google</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2009/01/30/2349/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>學習網頁標準之路</title>
		<link>http://jacky.seezone.net/2009/01/22/2337/</link>
		<comments>http://jacky.seezone.net/2009/01/22/2337/#comments</comments>
		<pubDate>Thu, 22 Jan 2009 04:52:50 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[電腦]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[opera]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=2337</guid>
		<description><![CDATA[看到 Opera 推出的 Web Standards Curriculum ，裏面有關網頁設計、標準、HTML、CSS、親和力等等的文章共五十多篇，組成一個很完整的教學課程。而很幸運地，Opera 中國團隊有人做 翻譯 ，暫時已譯了十八篇。跟據 A List Apart 最近一篇 談教育的文章裏，Opera 的代表說，雖然多年來大家都大力推行網頁標準，但應用率仍然很低，其一原因可能是缺乏完善的教育。我在想，我那時是怎樣開始接觸 CSS、網頁標準這些東西？ 如沒記錯，是由 Eric Meyer 的 Complex Spiral 開始。那時在一本雜誌上看到有關 Firebird (還是 Phoenix?) 的介紹，展示了 Complex Spiral 為例子，所以便到網站去看實際效果如何。在初看到那個 fixed background 和半透明的 hover 時，還以為是用 transparent gif 去做，所以就找 source code 看看。一看就更一頭霧水了：為什麼那幾句 CSS 碼可以做到這個效果啊？那些 CSS selector 在幹甚麼？所以便鑽研起上來了。 幸好那時也開始有不少網上資源可以看，主要都是外國的：展示 CSS 無限可能的 CSS Zen Garden 、充實的 A [...]]]></description>
			<content:encoded><![CDATA[	<p>看到 <a href="http://www.opera.com">Opera</a> 推出的 <a href="11">Web Standards Curriculum</a> ，裏面有關網頁設計、標準、HTML、CSS、親和力等等的文章共五十多篇，組成一個很完整的教學課程。而很幸運地，Opera 中國團隊有人做 <a href="http://team.operachina.com/wsc">翻譯</a> ，暫時已譯了十八篇。跟據 <a href="12">A List Apart 最近一篇</a> 談教育的文章裏，Opera 的代表說，雖然多年來大家都大力推行網頁標準，但應用率仍然很低，其一原因可能是缺乏完善的教育。我在想，我那時是怎樣開始接觸 CSS、網頁標準這些東西？</p>

	<p>如沒記錯，是由 <a href="http://meyerweb.com/">Eric Meyer</a> 的 <a href="http://meyerweb.com/eric/css/edge/complexspiral/demo.html">Complex Spiral</a> 開始。那時在一本雜誌上看到有關 Firebird (還是 Phoenix?) 的介紹，展示了 Complex Spiral 為例子，所以便到網站去看實際效果如何。在初看到那個 fixed background 和半透明的 hover 時，還以為是用 transparent gif 去做，所以就找 source code 看看。一看就更一頭霧水了：為什麼那幾句 <span class="caps">CSS</span> 碼可以做到這個效果啊？那些 <span class="caps">CSS</span> selector 在幹甚麼？所以便鑽研起上來了。</p>

	<p>幸好那時也開始有不少網上資源可以看，主要都是外國的：展示 <span class="caps">CSS</span> 無限可能的 <a href="http://www.csszengarden.com/"><span class="caps">CSS</span> Zen Garden</a> 、充實的 A List Apart 教學、資源豐的 <a href="http://css-discuss.incutio.com/"><span class="caps">CSS</span>-D wiki</a> 、教我學會 <span class="caps">CSS</span> Positioning 的 <a href="http://www.brainjar.com/css/positioning/">Brainjar</a> ，當然還有各位 evangelists 的 blog。 </p>

	<p>至於中文資源，除了看過 <a href="http://hlb.yichi.org/blog/">hlb</a> 當時翻譯 <span class="caps">ALA</span> 一篇 <a href="http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/">《CSS實務排版技巧、秘訣與技術》</a> 、 和 <a href="http://dia.z6i.org/">《深入親和力》</a> 外，其他的則沒甚印象了。我那時也曾厚著面皮《網站建置百寶箱》寫了一些 <a href="http://dob.tnc.edu.tw/author_dir.php?authorSerial=3379&#038;doc_n=10 1"><span class="caps">CSS</span> 相關教學</a><sup class="footnote"><a href="#fn2256604304f3205c9d3da9">1</a></sup> ，之後就是在這個 blog 寫的一些 <a href="http://jacky.seezone.net/tag/web-standard">囉唆文章</a> 。</p>

	<p>現在相關的中文資源，上 google 搜尋一下可以找到很多了，有問題大都可以找到答案。加上 Opera 這個課程，學習路應該易走多了吧？</p>

	<p id="fn2256604304f3205c9d3da9" class="footnote"><sup>1</sup> 相當遠古了，是我在寫 blog 前寫的，用的還是短髮巴特頭像，那時應該是失業中所以有很多時間&#8230;</p>
	Tags:  <a href="http://jacky.seezone.net/tag/css/" title="css" rel="tag">css</a>, <a href="http://jacky.seezone.net/tag/opera/" title="opera" rel="tag">opera</a>, <a href="http://jacky.seezone.net/tag/web/" title="web" rel="tag">web</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2009/01/22/2337/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>CSS 的 table 排版</title>
		<link>http://jacky.seezone.net/2008/10/24/2206/</link>
		<comments>http://jacky.seezone.net/2008/10/24/2206/#comments</comments>
		<pubDate>Fri, 24 Oct 2008 08:39:31 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[電腦]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=2206</guid>
		<description><![CDATA[最近看到兩篇文章： The Problem with CSS 和 Everything You Know about CSS is wrong ，都是 sitepoint 為新書作宣傳的文章，談的是 CSS 排版的問題。 CSS 排版難學又難精，因為其當初並沒有為排版而設的規則，因此即使要做幾個簡單的 Column，也必需走很遠的路：理解一大堆 CSS 的 Box Model、Positioning、Document Flow 等的運作原理，用很多怪招如 faux column、negative margin 等等去嘗試實作。終於做到效果，卻發覺某某在內容會破壞整個排版，脆弱得很。各大瀏覽器對 CSS 的支持程度不一，要花大量心力處理這些差異。也因為這樣，而催生了 一大堆 CSS Framework ，主要就是想解決排版的問題。 其實對於要弄 grid-like 的排版，有更簡單的古方：HTML table，問題是這個做法並不符合網頁標準網頁標準的精神1，即讓 HTML 標籤能符合語義 (Semantics)，而有關外表描述讓 CSS 解決。所以 Table 只應用顯示表列式的資料，用 Table 來排版語義上不對。因此，推行網頁標準，間接要提供 Table 排版以外的方案，但 CSS 排版頗高的學習曲線，某程度上也阻礙了網頁標準的推行。 那麼還有沒有更好的方法，可以順得哥情又不失嫂意？上述文章提到 [...]]]></description>
			<content:encoded><![CDATA[	<p>最近看到兩篇文章： <a href="http://www.sitepoint.com/print/the-problem-with-css-is/">The Problem with <span class="caps">CSS</span></a> 和 <a href="http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/">Everything You Know about <span class="caps">CSS</span> is wrong</a> ，都是 sitepoint 為新書作宣傳的文章，談的是 <span class="caps">CSS</span> 排版的問題。</p>

	<p><span class="caps">CSS</span> 排版難學又難精，因為其當初並沒有為排版而設的規則，因此即使要做幾個簡單的 Column，也必需走很遠的路：理解一大堆 <span class="caps">CSS</span> 的 Box Model、Positioning、Document Flow 等的運作原理，用很多怪招如 faux column、negative margin 等等去嘗試實作。終於做到效果，卻發覺某某在內容會破壞整個排版，脆弱得很。各大瀏覽器對 <span class="caps">CSS</span> 的支持程度不一，要花大量心力處理這些差異。也因為這樣，而催生了 <a href="http://en.wikipedia.org/wiki/List_of_CSS_frameworks">一大堆 <span class="caps">CSS</span> Framework</a> ，主要就是想解決排版的問題。</p>

	<p>其實對於要弄 grid-like 的排版，有更簡單的古方：HTML table，問題是這個做法並不符合<del>網頁標準</del>網頁標準的精神<sup class="footnote"><a href="#fn9601096574f3205c9e8229">1</a></sup>，即讓 <span class="caps">HTML</span> 標籤能符合語義 (Semantics)，而有關外表描述讓 <span class="caps">CSS</span> 解決。所以 Table 只應用顯示表列式的資料，用 Table 來排版語義上不對。因此，推行網頁標準，間接要提供 Table 排版以外的方案，但 <span class="caps">CSS</span> 排版頗高的學習曲線，某程度上也阻礙了網頁標準的推行。</p>

	<p>那麼還有沒有更好的方法，可以順得哥情又不失嫂意？上述文章提到 CSS2 裏的 <code>display: table</code> 類的屬性，即可以用 <span class="caps">CSS</span> 指示任何元素表現得像 table 一般，瀏覽器會在實際繪畫時，自動補上 table 元素。這樣的話，用簡單幾句語法就可以實行 Column 排版了。</p>

	<p>有人會覺得：實際就是用 table 來排版嘛！這麼多年來叫人不要用 table 排版，現在又叫人用，豈非本末倒置？我想在這裏必需認清的是：用甚麼來做網頁排版才算「正確」？在 CSS3 裏的確有 <a href="http://www.w3.org/TR/css3-layout/">排版模組</a> ，但仍然是在起草階段。而在真正可用這些排版屬性前，我們用盡現有 <span class="caps">CSS</span> 可行的方法去試去做，所以才有那麼多排版怪招，<code>display:table</code> 只是其中一種方法罷了，難道用 float、negative margin 等才是「正確」？最重要的是有沒有違反網頁標準的精神。使用 <code>display:table</code>，HTML 可以保留語義，CSS 只作外表描述，大概沒有問題吧？</p>

	<p>當然，table 也並非完美，例如在第二篇文章中的相集例子裏的 <span class="caps">HTML</span> 碼：</p>


<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"> <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;grid&quot;</span>&gt;</span> 
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span> 
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;image&quot;</span>&gt;</span> 
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/photo1.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;A Lily&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span> 
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>A lily in the gardens of The Vyne Country House<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span> 
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span> 
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;image&quot;</span>&gt;</span> 
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/photo3.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;A Fuchsia plant&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span> 
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>Fuchsia plant in my garden<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span> 
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span> 
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span> 
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;row&quot;</span>&gt;</span> 
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;image&quot;</span>&gt;</span> 
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/photo2.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;A crazy looking Allium flower&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>A crazy looking flower<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;image&quot;</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/photo4.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;A Robin sitting on a fence&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
        This robin has been visiting our garden over the summer. 
        He is very friendly and doesn't seem to be too worried about sharing the garden with us.
      <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>


	<p>這裏代碼其實跟一個 <span class="caps">HTML</span> table 差不多，只不過全都變成了 div。其中 <code>&#60;div class=&#34;row&#34;&#62;</code> 究竟是一種只屬外表的架構，還是符合語義的？但如想使用 <code>display:table</code>，這個元素是必需的。 (雖然文章解釋過瀏覽器會自動產生其他 table 元素，但 <a href="http://www.quirksmode.org/css/display.html#table">Safari</a> 上似乎有一些限制)。</p>

	<p>雖然可用 <code>display:table</code>，但現時為止卻不是所有瀏覽器都支持，至少仍時是市場上佔大多數的 IE6/7 還未支持。將推出的 IE8 將會更全面支持 CSS2 並 <a href="http://blogs.msdn.com/ie/archive/2007/12/19/internet-explorer-8-and-acid2-a-milestone.aspx">通過 ACID2</a> ，也會支持 <code>display:table</code>，所以文章作者覺得時機大概成熟，可以試用了？不過要等到大多數用戶都轉成 IE8，大概又要好幾年時間吧？而且還要看 Windows 7 的銷售如何呢？</p>

	<p id="fn9601096574f3205c9e8229" class="footnote"><sup>1</sup>  「網頁標準」在這裏的意思傾向於 <a href="http://en.wikipedia.org/wiki/Web_standards">Wikipedia</a> 所說：In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods</p>


	Tags:  <a href="http://jacky.seezone.net/tag/css/" title="css" rel="tag">css</a>, <a href="http://jacky.seezone.net/tag/html/" title="html" rel="tag">html</a>, <a href="http://jacky.seezone.net/tag/layout/" title="layout" rel="tag">layout</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2008/10/24/2206/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>HTML5 code demo</title>
		<link>http://jacky.seezone.net/2008/09/29/2167/</link>
		<comments>http://jacky.seezone.net/2008/09/29/2167/#comments</comments>
		<pubDate>Mon, 29 Sep 2008 07:12:10 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[電腦]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[talk]]></category>
		<category><![CDATA[video]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=2167</guid>
		<description><![CDATA[這是 Ian Hickson 在 Google 一個有關 HTML5 的演講， 直接打 code 來 demo。部份瀏覽器已在實作這些功能了。對於熟識 HTML 的開發者，應該會看得很興奮。下面是高清版本： Update: 貼文這段 video 竟然 no longer available&#8230; 但這是 Google 自己 host 的啊&#8230; 等一下看看會不會再有 update Tags: html, programming, talk, video, web-standard]]></description>
			<content:encoded><![CDATA[	<p>這是 Ian Hickson 在 Google 一個有關 HTML5 的演講， 直接打 code 來 demo。部份瀏覽器已在實作這些功能了。對於熟識 <span class="caps">HTML</span> 的開發者，應該會看得很興奮。下面是高清版本：</p>

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/xIxDJof7xxQ&#038;ap=%2526fmt%3D18&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/xIxDJof7xxQ&#038;ap=%2526fmt%3D18&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

	<p>Update: 貼文這段 video 竟然 no longer available&#8230; 但這是 Google 自己 host 的啊&#8230; 等一下看看會不會再有 update</p>
	Tags:  <a href="http://jacky.seezone.net/tag/html/" title="html" rel="tag">html</a>, <a href="http://jacky.seezone.net/tag/programming/" title="programming" rel="tag">programming</a>, <a href="http://jacky.seezone.net/tag/talk/" title="talk" rel="tag">talk</a>, <a href="http://jacky.seezone.net/tag/video/" title="video" rel="tag">video</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2008/09/29/2167/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>瀏覽器之戰新成員 Google Chrome</title>
		<link>http://jacky.seezone.net/2008/09/02/2090/</link>
		<comments>http://jacky.seezone.net/2008/09/02/2090/#comments</comments>
		<pubDate>Tue, 02 Sep 2008 03:43:00 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[電腦]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=2090</guid>
		<description><![CDATA[今朝早臨出門口時看新聞，給一則消息嚇一跳：Google 推出瀏覽器 Google Chrome 。 其實 Google 在弄自己的瀏覽器的傳聞一直都有，但傳得太久，甚至使人 (又或者只是我啦&#8230;) 遺忘了，所以嚇我一跳。 為甚麼在這個時候推出呢？有人說是因為 IE8 要出來了，也有人說因為 Firefox 的成績不錯，顯示人們也願意試用新的瀏覽器了，Google 覺得應該是時候吧？ Google Chrome 有甚麼特別？他們有專門的 漫畫 介紹，我認為重點是：讓瀏覽器更適合於 Web Application 上。因此： 使用自家製作 V8 Javascript Engine 每個 Tab 有獨立的 Process，也可以開出獨立窗口 結合 Offline 功能 &#8212; Google Gear 其實一眾瀏覽器，也都是向著這個大方向走，IE 正在改進其 Javascript Engine 的效能，Mozilla 也有新的 TraceMonkey 加快運算速度等等，Google Chrome 現在也是以運行 Application 為重心。 Google Chrome 也是開源的，核心使用 WebKit，對 Web [...]]]></description>
			<content:encoded><![CDATA[	<p style="text-align:center;"><img src="http://img.photobucket.com/albums/v217/jackysee/JackyBlog/google-chrome.jpg"/></p>

	<p>今朝早臨出門口時看新聞，給一則消息嚇一跳：Google 推出瀏覽器 <a href="http://www.google.com/chrome">Google Chrome</a> 。</p>

	<p>其實 Google 在弄自己的瀏覽器的傳聞一直都有，但傳得太久，甚至使人 (又或者只是我啦&#8230;) 遺忘了，所以嚇我一跳。</p>

	<p>為甚麼在這個時候推出呢？有人說是因為 IE8 要出來了，也有人說因為 Firefox 的成績不錯，顯示人們也願意試用新的瀏覽器了，Google 覺得應該是時候吧？</p>

	<p>Google Chrome 有甚麼特別？他們有專門的 <a href="http://books.google.com/books?id=8UsqHohwwVYC&#38;printsec=frontcover">漫畫</a> 介紹，我認為重點是：<strong>讓瀏覽器更適合於 Web Application </strong>上。因此：</p>

	<ul>
		<li>使用自家製作 V8 Javascript Engine</li>
		<li>每個 Tab 有獨立的 Process，也可以開出獨立窗口</li>
		<li>結合 Offline 功能 &#8212;  Google Gear</li>
	</ul>

	<p>其實一眾瀏覽器，也都是向著這個大方向走，IE 正在改進其 Javascript Engine 的效能，Mozilla 也有新的 <a href="https://wiki.mozilla.org/JavaScript:TraceMonkey">TraceMonkey</a> 加快運算速度等等，Google Chrome 現在也是以運行 Application 為重心。</p>

	<p>Google Chrome 也是開源的，核心使用 WebKit，對 Web Standard 應該也有很不錯的支援。</p>

	<p>因為以上「預告」，我期待 Google Chrome 在運行自家服務如 Gmail 時，會更加快更暢順 (雖然現在用 Firefox 也很快很暢順，所以可能根本分辨不出)，也可以開如 <a href="http://labs.mozilla.com/2007/10/prism/">Prism</a> 般將 Web Application 獨立運行起來。其他的，就明天下載來看看才說吧！</p>
	Tags:  <a href="http://jacky.seezone.net/tag/browser/" title="browser" rel="tag">browser</a>, <a href="http://jacky.seezone.net/tag/google/" title="google" rel="tag">google</a>, <a href="http://jacky.seezone.net/tag/javascript/" title="javascript" rel="tag">javascript</a>, <a href="http://jacky.seezone.net/tag/web/" title="web" rel="tag">web</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2008/09/02/2090/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>08 脫皮日</title>
		<link>http://jacky.seezone.net/2008/04/07/1977/</link>
		<comments>http://jacky.seezone.net/2008/04/07/1977/#comments</comments>
		<pubDate>Sun, 06 Apr 2008 17:51:29 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=1977</guid>
		<description><![CDATA[今年的 CSS Naked Day 轉到四月九日，原因如下： 應在星期二、三或四這些高流量的日子 應在四月第一個星期 不應在愚人節 公佈之前應有五天時間 想參加的到官方網站報名，站上也有相關的 PHP script。 Tags: css, web, web-standard]]></description>
			<content:encoded><![CDATA[	<p>今年的 <a href="http://naked.dustindiaz.com/"><span class="caps">CSS</span> Naked Day</a> 轉到四月九日，原因如下：</p>

	<ul>
		<li>應在星期二、三或四這些高流量的日子</li>
		<li>應在四月第一個星期</li>
		<li>不應在愚人節</li>
		<li>公佈之前應有五天時間</li>
	</ul>

	<p>想參加的到官方網站報名，站上也有相關的 <span class="caps">PHP</span> script。</p>


	Tags:  <a href="http://jacky.seezone.net/tag/css/" title="css" rel="tag">css</a>, <a href="http://jacky.seezone.net/tag/web/" title="web" rel="tag">web</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2008/04/07/1977/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>@media 07 在香港</title>
		<link>http://jacky.seezone.net/2007/02/23/1765/</link>
		<comments>http://jacky.seezone.net/2007/02/23/1765/#comments</comments>
		<pubDate>Thu, 22 Feb 2007 19:07:39 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[電腦]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[hk]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/2007/02/23/1765/</guid>
		<description><![CDATA[在 Happy Designer 看到原來 @Media 07 會在 香港 搞！日期是 31/5 和 6/1 兩天。一眾 Web Standards 猛人 Dave Shea 、 Molly Holzschlag 、Jeremy Keith 等等都會是主講嘉賓！ 在香港這個 Web Standards 荒蕪之地，竟然會舉辦如此盛事，實在令我很意外。莫非是政府宣傳「亞洲國際都會」的形象夠力？ (想起上年也是在香港搞 維基年會 的) Zonble 提醒了我，原來人家都這樣說了： Andy Budd, Molly Holzschlag, Jeremy Keith, and Dave Shea will help to raise the awareness and teach the application of best practices [...]]]></description>
			<content:encoded><![CDATA[	<p>在 Happy Designer 看到原來 <a href="http://www.vivabit.com/atmedia2007/asia/">@Media 07</a> 會在 <strong>香港</strong> 搞！日期是 31/5 和 6/1 兩天。一眾 Web Standards 猛人 <a href="http://www.mezzoblue.com/">Dave Shea</a> 、 <a href="http://molly.com/">Molly Holzschlag</a> 、Jeremy Keith 等等都會是主講嘉賓！</p>

	<p>在香港這個 Web Standards 荒蕪之地，竟然會舉辦如此盛事，實在令我很意外。莫非是政府宣傳「亞洲國際都會」的形象夠力？ (想起上年也是在香港搞 <a href="http://meta.wikimedia.org/wiki/CWMC_2006">維基年會</a> 的) Zonble 提醒了我，原來人家都這樣說了：</p>

 <blockquote>

	<p>Andy Budd, Molly Holzschlag, Jeremy Keith, and Dave Shea will help to raise the awareness and teach the application of best practices in modern web design in an area of the world that is slightly behind the likes of North America and Europe </p>

 </blockquote>

	<p>就是因為夠「落後」才被人家選上的。其主講內容暫時還未有定好，但已經有好些題目，看上去真的很有「教育」意味呢 (也可能是我主觀了) ，如：</p>

	<ul>
		<li>A Best Practice Overview of (X)HTML and <span class="caps">CSS</span></li>
		<li>Making the Jump to Tableless Design</li>
		<li>Web Accessibility Foundations</li>
		<li>More Than Layout: Ultimate Design Control with <span class="caps">CSS</span></li>
		<li>The Behaviour Layer: Using Javascript for Good, not Evil</li>
		<li>The Broken World: Solving the Browser Problem Once and For All</li>
	</ul>

	<p>再看一下入場費用如何：Conference only HK$5,000。我自己並沒有參加這類 Conference 的經驗，但對我來說實太貴了&#8230; 所以，官方的宣傳用圖片，這個最合我心情了：</p>

	<p style="text-align:center;"><a href="http://www.vivabit.com/atmedia2007/r/buttons/damn.gif"><img src="http://www.vivabit.com/atmedia2007/r/buttons/damn.gif" alt="@media07"/></a></p>

	<p>相關連結： <a href="http://www.vivabit.com/atmedia2007/asia/">@Media07</a></p>


	Tags:  <a href="http://jacky.seezone.net/tag/css/" title="css" rel="tag">css</a>, <a href="http://jacky.seezone.net/tag/hk/" title="hk" rel="tag">hk</a>, <a href="http://jacky.seezone.net/tag/javascript/" title="javascript" rel="tag">javascript</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2007/02/23/1765/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>人工智能與語意網</title>
		<link>http://jacky.seezone.net/2006/07/12/1680/</link>
		<comments>http://jacky.seezone.net/2006/07/12/1680/#comments</comments>
		<pubDate>Wed, 12 Jul 2006 02:56:29 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[書籍]]></category>
		<category><![CDATA[網絡]]></category>
		<category><![CDATA[ai]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[microformat]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/2006/07/12/1680/</guid>
		<description><![CDATA[剛剛看畢了 《會思考的機器》 一書，這是一本講人工智能 AI 實際發展的舊書，但最近再版，作者也添架了章節討論比較近期的 AI 趨勢。雖然書本的作者並非 AI 界的人，但她自己走訪不同的人，搜集不同的資料，從不同的角度去看 AI 那剛剛起步的歷史，當中包括對於智慧的理解、實際應用、合成心智的道德等等。 在我們開始發展 AI 時，也是對於人類智慧的一個探險旅程。什麼是理解？什麼是智慧？有什麼條件？等等許多問題，都是有待發掘和研究。如果我們沒有清楚明白「智能」所指的是什麼東西，在發展上可能有如瞎子摸象。有人說近年 AI 發展到了一個瓶頸位置，沒有什麼大突破，可能因為這個摸索期比預期的長的關係。 一個會思考的機器，並不是單單懂得運算和邏輯，當中還涉及大量的背景知識。以前，這許多知識都要靠人自己去輸入到機器裏去，用很專門的格式和方法存取資料。但現在網絡發達，機器人可以靠網絡取得資訊並加以運用，而這關係到 語意網 的發展。 現在的互聯網仍是以人為本的，成千上萬的網頁，文字、圖片、影象等等人類明白的方法呈現和記錄。但對於機器來說，要解讀分析這些文字、圖片、影象，以現有的 AI 技術來說，仍然很困難。所以，我們不能直接向搜尋器問問題，而是要靠用搜尋字眼作模糊的搜索相關資訊，因為機器並非「明白」網頁的內容，而是靠一些統計和評分，與搜尋字眼作計算，然後排列結果。 舊時的網頁，充斥著各種各樣用來描述外表的 Tag，如 font, b, br 等等，為的只是在瀏覽器上給人好看，但實際上對機器毫無意義，而且還會帶來解讀障礙。W3C 推的網頁標準，就是想將內容和表達分開來，以具有語意的 markup 來包著內容，以 CSS 控制外觀。 再進一步，「人類格式」的資料，必需加上足夠的敍述和形容，才可以令機器也可讀，所以有語意網的概念。語意網在我們的內容以上，再加上一層意義的敍述，讓機器也明白內容裏各種資料的架構和關係，從而可以處理這些資料。語意網使用 XML、RDF、OWL 等等為架構，為資料加上機器可讀的輔助。而且這種格式，不只是限制在網頁的應用之上，機器之間也可以使用這些格式來交換和理解資訊。 不過，語意網的發展仍在非常起始的階段，就網頁而言，單單是要由舊時的一個大 HTML 跳到 XHTML + CSS 已經十分困難，RDF、OWL 仍然有待支援，所以在「語意化」的路途上，又有很多不同的變化走了出來。近年冒起了的 Microformats 微格 ，使用 XHTML 為格式，又可以嵌入到現有的網頁上，實現人可讀，機器又可讀的目的。機器可以在網頁裏的微格抓到資料，明白當中意義。正因為微格小巧而精妙，又可溶入現有的網頁，所以漸漸受人關注，被稱為是 Lowercase Semantic Web。 不論如何，語意網在人工智慧的層面來說，是一個很重要的工具。AI 不必設計複雜到完全像人腦一樣，也可以明白資料的架構、意義，並作出處理。使用共同認可的資料格式，機器與機器之間也可以彼此了解，各種系統可以合作，來做更多事情了。 相關連結： [...]]]></description>
			<content:encoded><![CDATA[	<p><a href="http://photobucket.com" target="_blank"><img src="http://img.photobucket.com/albums/v217/jackysee/JackyBlog/machineswhothink.jpg" border="0" align="right" alt="Photobucket - Video and Image Hosting"></a> 剛剛看畢了 <a href="http://www.bookery.com.tw/BookGuide/BookGuide_detail.asp?art_id=45&#38;cat_id=4">《會思考的機器》</a> 一書，這是一本講人工智能 AI 實際發展的舊書，但最近再版，作者也添架了章節討論比較近期的 AI 趨勢。雖然書本的作者並非 AI 界的人，但她自己走訪不同的人，搜集不同的資料，從不同的角度去看 AI 那剛剛起步的歷史，當中包括對於智慧的理解、實際應用、合成心智的道德等等。</p>

	<p>在我們開始發展 AI 時，也是對於人類智慧的一個探險旅程。什麼是理解？什麼是智慧？有什麼條件？等等許多問題，都是有待發掘和研究。如果我們沒有清楚明白「智能」所指的是什麼東西，在發展上可能有如瞎子摸象。有人說近年 AI 發展到了一個瓶頸位置，沒有什麼大突破，可能因為這個摸索期比預期的長的關係。</p>

	<p>一個會思考的機器，並不是單單懂得運算和邏輯，當中還涉及大量的背景知識。以前，這許多知識都要靠人自己去輸入到機器裏去，用很專門的格式和方法存取資料。但現在網絡發達，機器人可以靠網絡取得資訊並加以運用，而這關係到 <a href="http://en.wikipedia.org/wiki/Semantic_web" title="Semantic Web">語意網</a>  的發展。</p>

	<p>現在的互聯網仍是以人為本的，成千上萬的網頁，文字、圖片、影象等等人類明白的方法呈現和記錄。但對於機器來說，要解讀分析這些文字、圖片、影象，以現有的 AI 技術來說，仍然很困難。所以，我們不能直接向搜尋器問問題，而是要靠用搜尋字眼作模糊的搜索相關資訊，因為機器並非「明白」網頁的內容，而是靠一些統計和評分，與搜尋字眼作計算，然後排列結果。</p>

	<p>舊時的網頁，充斥著各種各樣用來描述外表的 Tag，如 font, b, br 等等，為的只是在瀏覽器上給人好看，但實際上對機器毫無意義，而且還會帶來解讀障礙。W3C 推的網頁標準，就是想將內容和表達分開來，以具有語意的 markup 來包著內容，以 <span class="caps">CSS</span> 控制外觀。</p>

	<p>再進一步，「人類格式」的資料，必需加上足夠的敍述和形容，才可以令機器也可讀，所以有語意網的概念。語意網在我們的內容以上，再加上一層意義的敍述，讓機器也明白內容裏各種資料的架構和關係，從而可以處理這些資料。語意網使用 XML、RDF、OWL 等等為架構，為資料加上機器可讀的輔助。而且這種格式，不只是限制在網頁的應用之上，機器之間也可以使用這些格式來交換和理解資訊。</p>

	<p>不過，語意網的發展仍在非常起始的階段，就網頁而言，單單是要由舊時的一個大 <span class="caps">HTML</span> 跳到 <span class="caps">XHTML</span> + <span class="caps">CSS</span> 已經十分困難，RDF、OWL 仍然有待支援，所以在「語意化」的路途上，又有很多不同的變化走了出來。近年冒起了的 <a href="http://microformats.org/">Microformats 微格</a> ，使用 <span class="caps">XHTML</span> 為格式，又可以嵌入到現有的網頁上，實現人可讀，機器又可讀的目的。機器可以在網頁裏的微格抓到資料，明白當中意義。正因為微格小巧而精妙，又可溶入現有的網頁，所以漸漸受人關注，被稱為是 Lowercase Semantic Web。</p>

	<p>不論如何，語意網在人工智慧的層面來說，是一個很重要的工具。AI 不必設計複雜到完全像人腦一樣，也可以明白資料的架構、意義，並作出處理。使用共同認可的資料格式，機器與機器之間也可以彼此了解，各種系統可以合作，來做更多事情了。</p>

	<p>相關連結：</p>

	<ul>
		<li><a href="http://en.wikipedia.org/wiki/Semantic_web">Wikipedia: Semantic Web</a></li>
		<li><a href="http://hlb.yichi.org/blog/2005/08/19/8">Microformats and Semantic Web</a></li>
	</ul>

	<p>P.S. 事實上，我或許該看英文版的，因為對於很多翻譯的名詞看不太慣，在討論一些比較複雜的理論時看得有點吃力 (雖然看這本書其實不需要有背景知識) 。有時間的話，會再看一次。</p>


	Tags:  <a href="http://jacky.seezone.net/tag/ai/" title="ai" rel="tag">ai</a>, <a href="http://jacky.seezone.net/tag/css/" title="css" rel="tag">css</a>, <a href="http://jacky.seezone.net/tag/microformat/" title="microformat" rel="tag">microformat</a>, <a href="http://jacky.seezone.net/tag/web/" title="web" rel="tag">web</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2006/07/12/1680/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

