tag:blogger.com,1999:blog-59185797394135579822009-07-10T17:48:46.885+08:00柏強，徵求新名稱的網誌原「柏強的城市探險記」。版面清掃中、文章撰寫中，名稱思考中。柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.comBlogger424125bclogrss2http://feedburner.google.comhttp://creativecommons.org/images/public/somerights20.giftag:blogger.com,1999:blog-5918579739413557982.post-60268453699955420222009-07-09T02:31:00.002+08:002009-07-09T02:38:05.345+08:00其實低調也不錯到時候就是 25 個人分一些有的沒的小禮物，這些是一部份：
據說還有 3 個位子，然後今天 (7/9) 晚間報名截止這樣。
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=hD5I7CjvctA:NWKYG8-QADw:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=hD5I7CjvctA:NWKYG8-QADw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/hD5I7CjvctA" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com4http://blog.bobchao.net/2009/07/blog-post_09.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/CmmSYC9mzYU/blog-post_09.htmltag:blogger.com,1999:blog-5918579739413557982.post-41241235809504911992009-07-05T17:34:00.001+08:002009-07-05T17:36:17.034+08:00顛覆網路 35 天: HTML 5 版音樂播放器很久沒翻譯這系列文章，我發現米嘉也富奸化了… 不過他畢竟是比我維持得更久點，翻譯這類文章真的很考驗毅力的啊，大家要多給義務幫忙翻譯引介資訊的人一點鼓勵。
這篇文章裡討論的是利用 HTML 5 的 audio 標籤與 JavaScript 合作製作一個音樂播放工具，其實 WM 在之前也為 MozTW 製作了一個更炫的、所以害我每次看到這篇都沒什麼毅力翻譯… (藉口藉口！) 反正，先看看完成圖吧！
在 Firefox 3.5 中開啟範例網頁
這個範例還是很有價值的，相較於 WM 的炫爆範例，本例的作者採用了有趣的方式來實作：<div...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=QRvyTmi4M-Q:qSr7QMkuIu8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=QRvyTmi4M-Q:qSr7QMkuIu8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/QRvyTmi4M-Q" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/07/35-html-5.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/-Lrpi2JXt1U/35-html-5.htmltag:blogger.com,1999:blog-5918579739413557982.post-14374453936596210332009-07-05T16:25:00.000+08:002009-07-05T16:25:11.941+08:00Firefox 3.5 台中迷你趴依照往例，MozTW 只有在大版本更新的時候會辦 Firefox Party，這次 3.5 推出也不例外。不過一方面有社群成員建議還是辦個交流性的小聚會，另一方面 Mozilla 也有準備紀念品送給各地區的派對活動，所以就讓我們在台中聚會一下吧！
時間： 7/11 14:00-16:30-18:00 (後一半是自由交流時間)地點：默契咖啡 (台中市中港路二段60-3號)費用： 活動本身免費，低消、餐點等自費 (吃喝大概是 150-200 間)限額：只有 25...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=HQZSkp1mkro:rCzBhkC0wkg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=HQZSkp1mkro:rCzBhkC0wkg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/HQZSkp1mkro" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/07/firefox-35.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/ZsEp4NgbqzA/firefox-35.htmltag:blogger.com,1999:blog-5918579739413557982.post-34380110446178154492009-07-01T14:11:00.002+08:002009-07-01T14:21:17.469+08:00兩小時後，知床大地震！你裝 Firefox 3.5 了嗎？如果你是從 Firefox 3.x 甚至 2.x 版跳上來的使用者，想必有感覺到速度上的提昇。因應 Firefox 3.5 的 Codename —— Shiretoko (知床)，Mozilla 這次也準備了有趣的行銷活動「Shiretoko Shock」，邀請各位社群伙伴一起撼動這個世界！
怎麼玩呢？超簡單：只要你在當地時間下午 3:50 分時，上 Twitter、Plurk、Facebook 等地方邀請你的朋友們一起下載 Firefox 就可以囉！以下是一些簡單的範例句：
撼動全世界！現在就下載 Firefox 3.5:...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=pnxwWXcpx3w:ukPd1iXQQS8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=pnxwWXcpx3w:ukPd1iXQQS8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/pnxwWXcpx3w" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com4http://blog.bobchao.net/2009/07/blog-post.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/1H568fxII4s/blog-post.htmltag:blogger.com,1999:blog-5918579739413557982.post-45755344504874105662009-06-24T18:28:00.000+08:002009-06-24T18:28:09.196+08:00Go home, IE6!"Yeah, you always break our coolest toys!"
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=e45eU3XOZPc:amBXBFzqEEU:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=e45eU3XOZPc:amBXBFzqEEU:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/e45eU3XOZPc" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com5http://blog.bobchao.net/2009/06/go-home-ie6.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/0dtr1vflMMM/go-home-ie6.htmltag:blogger.com,1999:blog-5918579739413557982.post-48105058543571401202009-06-21T08:18:00.000+08:002009-06-21T08:18:10.133+08:00顛覆網路 35 天 (9): 原生 JSON，更安全、效能更好JavaScript Object Notation (JSON)在網站開發的世界裡已經有很多人採用，成為不可或缺的一部份。Firefox 3.5 起以 window.JSON 來原生支援 JSON 格式，本篇 (原文) 將為各位做個相關介紹。
JavaScript 等腳本語言的標準原型 ECMAScript 在第五版時將 JSON 原生支援列入規格，目前 Firefox 3.5 跟 IE8 都支援，而且其他瀏覽器必定也會很快加入支援行列。JSON 原生支援有兩個優點：安全性提升：單純使用 eval 來解析字串型態陳述式的方法有其安全顧慮，原生 JSON...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=PaadCWG8upo:WwxHbghIa04:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=PaadCWG8upo:WwxHbghIa04:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/PaadCWG8upo" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-9-json.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/rXYBNu3tWfE/35-9-json.htmltag:blogger.com,1999:blog-5918579739413557982.post-43334619828917268612009-06-20T15:46:00.000+08:002009-06-20T15:46:27.808+08:00授權書及時間提示工具我們經常在邀請別人演講時使用許多雜七雜八的文件，像是領據、講者名牌、講者桌牌、影音授權書、時間提示字卡、提示音… 等等東西，不過我發現好像都沒有什麼人分享這類文件，讓大家可以直接改。我這邊先把我使用的時間提示字卡及授權書範本丟出來給大家參考，都是 by-sa。
授權書，可下載 PDF版，另有 ODF 版
三分鐘、一分鐘、時間到的字卡，可下載 PDF 版
時間到的音樂，我是用鳥叫
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=YGl8SqDVeQo:Qze243bIAo8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=YGl8SqDVeQo:Qze243bIAo8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/YGl8SqDVeQo" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com1http://blog.bobchao.net/2009/06/blog-post_20.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/hQiwKP9EqcA/blog-post_20.htmltag:blogger.com,1999:blog-5918579739413557982.post-56572075840829628032009-06-20T13:18:00.002+08:002009-06-20T13:29:05.924+08:00顛覆網路 35 天 (8a): CSS 3D 效果這篇有一個用 Firefox 3.5 新增之 -moz-transform 所製作出來的範例，非常有趣 (強烈建議要看啦)，一例勝千文，看了再說：
View the Demo in Firefox 3.5
當然，-moz-transform 目前還是個 2D 效果的玩意，製作出來的「3D」也是可稱為 2.5D 的視覺效果而已。目前要做到真正的 3D，用這個特性還辦不到。
來看程式碼：首先以 DIV 標籤圍出立方體的三個顯示面：<div class="cube">
<div class="face top">
</div>
...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=iQ87pOnd704:FDrp-54WWiI:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=iQ87pOnd704:FDrp-54WWiI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/iQ87pOnd704" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com2http://blog.bobchao.net/2009/06/35-8a-css-3d.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/o2xsV2ARiBc/35-8a-css-3d.htmltag:blogger.com,1999:blog-5918579739413557982.post-46711988869598518172009-06-19T15:50:00.001+08:002009-06-19T15:53:54.061+08:00姓名標示，要標什麼？ 法律嚴肅版之前曾寫過姓名標示，要標什麼？要標哪裡？一文，大概說明我個人看法。其實 CC 授權條款裡面也有明確告訴你要標哪些東西，我們以 3.0 預演版的條文來說明一下。首先是 4. 限制的 (a)：
您必須在您散布或公開演播的每份重製物上，附上本授權條款複本或「統一資源識別符」(Uniform Resource Identifier) …… 保留所有與本授權條款有關的注意事項以及免除保證責任聲明
所以這邊就有兩個：授權條款的複本或 URI (粗略想成是授權條款的網址吧)，與保留授權條款有關的注意事項及免除保證責任聲明 (原來有的請別刪，原來沒的也不用加)。
接著是...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=_8kzsDQ1XZg:PjBi7QFqatg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=_8kzsDQ1XZg:PjBi7QFqatg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/_8kzsDQ1XZg" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/blog-post_19.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/MBpXCCEnOv4/blog-post_19.htmltag:blogger.com,1999:blog-5918579739413557982.post-58334021469926867692009-06-18T14:54:00.003+08:002009-06-18T17:00:46.373+08:00顛覆網路 35 天 (7b): Firefox 3.5 media query 簡介原文出處，篇數太多不曉得怎麼開頭了 orz 反正大家看這系列下來應該都知道我是重點節譯。
現在可以上網看網頁的裝置越來越多，大家對網頁的期待也因裝置限制或功能而有所不同。CSS2 因此加上了媒體類別相關的設定，讓你可以指定某 CSS 宣告適用的裝置，像這樣：
<link rel="stylesheet" media="print"...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=oMdKXAGYmwE:PQhzUUHaf-U:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=oMdKXAGYmwE:PQhzUUHaf-U:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/oMdKXAGYmwE" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-7b-firefox-35-media-query.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/9io0a8tlIHI/35-7b-firefox-35-media-query.htmltag:blogger.com,1999:blog-5918579739413557982.post-45115460680303490242009-06-18T01:50:00.003+08:002009-07-09T20:00:57.019+08:00顛覆網路 35 天 (7a): 開放影片編碼格式的品質這篇主要比較開放影片編碼格式的品質問題，緣起是 Google 的 Chris DiBona 在 WhatWG 郵件群組貼了一篇文章，裡頭提到：如果 YouTube 要採用 Theora 編碼、還得維持目前的播放品質，那會佔掉全世界大部份的頻寬。
目前關於影片編碼的論戰已經慢慢嘴炮化、缺乏實質的比較，所以 Greg Maxwell 回了他一篇、並放上下列的比較結果。(本篇由原作者授權張貼於顛覆網路 35 天專欄，柏強我只依據往例、節譯重點。)
以下是將同一段影片分別以兩種尺寸編碼、丟上 YouTube 處理後再下載，然後與 Ogg/Theora+Vorbis...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=cIuqfTRdWhQ:tKU0WIKLEio:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=cIuqfTRdWhQ:tKU0WIKLEio:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/cIuqfTRdWhQ" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com6http://blog.bobchao.net/2009/06/35-7a.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/VBo_hluuy3g/35-7a.htmltag:blogger.com,1999:blog-5918579739413557982.post-23278106266507027642009-06-17T11:07:00.001+08:002009-06-17T11:08:00.351+08:00顛覆網路 35 天 (6b): 動態字體與 CSS 範例今天 (好吧，又是大前天…) 的顛覆網路 35 天綜合前面所說的 @font-face 及一些 Firefox 3.5 新支援的 CSS，組合成一個有趣的範例。直接看一下：
View the Demo in Firefox 3.5
以下分別簡單說明所用到的東西：
圓角邊框與方塊陰影
首先是整個「工具列」的樣式。我們使用 -moz-border-radius 將左上及右下的邊框設定為圓弧：
-moz-border-radius:10px 0px 10px 0px;
接著利用之前提過的 -moz-box-shadow 設定這個方塊的陰影，分別向右向下位移 5 像素、且柔邊為 6...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=1mgbxdRpRXk:o-KNAu4DiLg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=1mgbxdRpRXk:o-KNAu4DiLg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/1mgbxdRpRXk" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-6b-dom-api.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/7w6isf9DKu8/35-6b-dom-api.htmltag:blogger.com,1999:blog-5918579739413557982.post-69633370961599684832009-06-15T15:34:00.000+08:002009-06-15T15:34:36.079+08:00以創用 CC 釋出的音樂是否就「無版權」？不是，不是，不是。著作人使用創用CC條款，是將他的作品「授權」給你使用，並不代表作品就「無版權」。如果你違反著作人原先定下的條件 (例如姓名標示、相同方式分享等)，則授權無效、你一樣是侵權。
所以推廣創用 CC 從來就不是反對著作權的作為。相反地，我們一定會說明一下著作權的部份，否則聽眾不會懂得 CC 的意義。
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=cNJ_JAxFco0:6-wKg0efUx4:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=cNJ_JAxFco0:6-wKg0efUx4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/cNJ_JAxFco0" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com3http://blog.bobchao.net/2009/06/cc.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/uoipG-aZB4g/cc.htmltag:blogger.com,1999:blog-5918579739413557982.post-26518851894806910972009-06-15T12:40:00.002+08:002009-06-15T13:08:40.185+08:00@font-face 的問題？之前就在實驗 @font-face 動態連結字型的問題，中文會遇到的問題比英文多，略列如下：
中文字型檔好肥，多在 8MB 之譜，加上自由的字型也超少，還有據說 Safari 目前的實作方式是，等下載完動態連結字體才顯示出來，請想像使用者在開啟網頁、另外開小遊戲玩了十來分鐘以後終於看到網頁文字的感覺。
第二個問題無解，要就自己刻，不然就去談；第三個問題目前無解，我覺得這樣實作很詭異… 完全沒考慮字型檔很大的情況要怎樣讓使用者「接受」；第一個問題目前看起來解法有二：
用小一點的字體，例如 Droid Sans Fallback 大概是 3-4MB，「或許」你可以接受…...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=gmnGngUZnWA:oG939HhVB2c:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=gmnGngUZnWA:oG939HhVB2c:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/gmnGngUZnWA" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com1http://blog.bobchao.net/2009/06/font-face.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/WBMrvNg8ku8/font-face.htmltag:blogger.com,1999:blog-5918579739413557982.post-84149540311907186582009-06-15T11:07:00.001+08:002009-06-15T11:36:40.896+08:00突然覺得全部重來好了？所以版面洗白白~~ 有時間就找範本來慢慢微調成自己喜歡的樣子。
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=dAO8gjWZFlk:Iedpunpkw9E:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=dAO8gjWZFlk:Iedpunpkw9E:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/dAO8gjWZFlk" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/blog-post_15.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/ib84iJr-VCk/blog-post_15.htmltag:blogger.com,1999:blog-5918579739413557982.post-11973086690764556762009-06-14T12:18:00.001+08:002009-06-14T21:23:09.549+08:00顛覆網路 35 天 (6a): DOM 選取符 API我終於趕上今天該有的進度了 XD 這一篇的重點我想是相容性與效能比較，重點節譯如下：
W3C 的萬年草案之一 DOM 選取符 (Selector) API 可以幫 JavaScript 程式設計師以 CSS 選取符方式輕鬆選取文件中的 DOM 元素，而且大部分的新瀏覽器，包括 IE8、Chrome、Safari 及即將 (?) 現身的 Firefox 3.5 都已經有基本支援了。
querySelectorAll
選取符 API 提供 querySelector 與 querySelectorAll 兩種方式協助你選取 DOM 元素，差別在於 querySelector...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=DpZ5yz1Rdn0:gxAfzv8C7q8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=DpZ5yz1Rdn0:gxAfzv8C7q8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/DpZ5yz1Rdn0" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-6a-dom-api.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/-7B0UMSLVQ8/35-6a-dom-api.htmltag:blogger.com,1999:blog-5918579739413557982.post-37296006489801039352009-06-14T10:47:00.000+08:002009-06-14T10:47:05.885+08:00顛覆網路 35 天 (5b): 地理位置資訊及 OpenStreetMap這一篇基本上就是個火力展示，我就不逐句譯了… 嗯，之前其實也沒逐句譯過，總之我就是概述一下要點、有需要的朋友請參考原文。
之前有提過 Firefox 3.5 可以讓你透露地理位置資訊，方便網際應用提供更好的服務。這邊提供一個由 René-Luc D’Hont 製作的範例：結合地理位置與開放圖資 OpenStreetMap，再混搭其他網路資源製作出的即時地圖。測試的時候別忘了按下跳出來的「透露地理位置」喔！
Launch the Demo in Firefox 3.5
台灣的地理位置不算很準確 (這在之前提過原因了)，不過至少辨識得出我人在台北 :P 你可以經由旁邊的...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=TssJVMTREwA:EvUUjGSJzb0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=TssJVMTREwA:EvUUjGSJzb0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/TssJVMTREwA" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-5b-openstreetmap.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/uLX0YOwosKA/35-5b-openstreetmap.htmltag:blogger.com,1999:blog-5918579739413557982.post-84963450426472684282009-06-14T09:46:00.001+08:002009-06-14T09:48:08.603+08:00顛覆網路 35 天 (5a): -moz-box-shadow 方塊陰影今天 (是昨天吧？對不起我富奸化了…) 討論的是 box-shadow 方塊陰影。box-shadow 是 CSS3 草案的一部份，Firefox 3.5 在此以 -moz-box-shadow 實驗性支援、待規格定案後則會繼續以 box-shadow 出現。這個特性可以繪製一個區塊的陰影，我們直接看幾個範例來說明。以下的範例都會先秀程式碼、接著是 Live demo、再為您提供 Mac OS X 上的螢幕截圖：
-moz-box-shadow: 1px 1px 10px...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=f2kgujQwKoY:eBNSUdp3LLc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=f2kgujQwKoY:eBNSUdp3LLc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/f2kgujQwKoY" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com1http://blog.bobchao.net/2009/06/35-5a-moz-box-shadow.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/Ggc9bMcUGUw/35-5a-moz-box-shadow.htmltag:blogger.com,1999:blog-5918579739413557982.post-83002724752328610632009-06-14T02:49:00.000+08:002009-06-14T02:49:57.431+08:00顛覆網路 35 天 (4b): 以 @font-face 使用你喜歡的字體這篇提到的非技術問題點其實不少，我盡可能大幅翻譯。當然還是要付註：請別要求精準翻譯，那不是我的本意。
Firefox 3.0 已經在許多方面添上讓網頁字體看起來更美觀的技術，而 3.5 版加上的 CSS @font-face 技術則是要幫網頁設計師逃離系統預設字體的苦痛。以 @font-face 將 TrueType 或 OpenType 字體檔案「連」進網頁，就像連結外部 CSS 檔、JavaScript 檔一樣輕鬆愉快，而且 Safari 從 3.1 起已經支援、Opera 也打算在第 10 版支援這項技術。
要動態連結自訂字體，只要在 CSS 中以 @font-face...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=jAa-2xoof3U:Rxq2MfSS6qc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=jAa-2xoof3U:Rxq2MfSS6qc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/jAa-2xoof3U" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com2http://blog.bobchao.net/2009/06/35-4b-font-face.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/B3sukl_o9O4/35-4b-font-face.htmltag:blogger.com,1999:blog-5918579739413557982.post-56860467502922617702009-06-12T17:50:00.003+08:002009-06-14T21:14:49.906+08:00顛覆網路 35 天 (4a): Tracemonkey？咬起來脆嗎？Tracemonkey 可以吃嗎？味道如何？，我總是大幅改作 XD 希望大家覺得還 ok 這樣。
Firefox 3.5 的目標是要讓大家的網路「升級」，在開發過程中也十分著重於程式設計方面的功能。有個著力很深的東西名喚 Tracemonkey… 追猴？這可以吃嗎？
Tracemonkey 是 Mozilla 新一代的 JavaScript 引擎，將 JavaScript 編成機器碼、以便提升執行速度。雖說聽起來比較偏向程式設計，但要說是給一般使用者的功能當然也可以 — 我們的網路生活已經滿是 JavaScript...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=VU1MmQz4IOo:oPBZYI969Vg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=VU1MmQz4IOo:oPBZYI969Vg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/VU1MmQz4IOo" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com1http://blog.bobchao.net/2009/06/35-4a-trackmonkey.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/VkLg0k863no/35-4a-trackmonkey.htmltag:blogger.com,1999:blog-5918579739413557982.post-35964601071146372102009-06-11T15:36:00.001+08:002009-06-11T15:36:44.147+08:00顛覆網路 35 天 (3b): 利用 Burst 動畫引擎與 canvas 製作 SVG 動畫利用 Burst 動畫引擎與 canvas 製作 SVG 動畫，我其實不喜歡翻這類的「標題」，術語太多了，但反正這是給技術人看的就… 這篇裡基本上沒有什麼好翻譯的，先看範例、再看影片就行。影片裡介紹範例的製作過程，包括用 InkScape 繪製 SVG 圖片，利用 JavaScript 與 Burst 引擎製作動畫效果等… 真的要翻譯的話好像要上字幕？那也太累了 orz 反正，看圖說故事吧：
觀看範例
有一點值得一提：SVG 原先是向量圖，但範例中利用 Burst 引擎，將 SVG 圖素透過 JavaScript 運算再繪於 Canvas 中。這麼一來你就能與其他 Canvas...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=BrInvdK5bPU:WszDTa9mEjI:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=BrInvdK5bPU:WszDTa9mEjI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/BrInvdK5bPU" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-3b-burst-canvas-svg.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/Bcag_pS-mi8/35-3b-burst-canvas-svg.htmltag:blogger.com,1999:blog-5918579739413557982.post-39166083260884058002009-06-11T15:09:00.001+08:002009-06-11T15:12:30.667+08:00顛覆網路 35 天 (3a): text-shadow這一篇挺有意思，也大致翻一下全文。
text-shadow 原先在 CSS2 規格中出現，到 CSS2.1 被打入冷宮、而 CSS3 捲土重來，Firefox 3.5 正式開始支援。此 CSS 特性人如其名，就是拿來展現文字的陰影效果，不過咱們總是熱情無限創意奔放，不會這麼簡單就放過這個有趣的特效 :P 直接看本文最有趣的範例吧 (你需要支援 text-shadow 的瀏覽器，例如 Firefox 3.5)：
看那七彩的霓虹燈，它的發明者是愛迪生
啟動/停止動畫效果
這個範例同時展示了 text-shadow...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=iJof6fyouWY:G4cfQBHLcNg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=iJof6fyouWY:G4cfQBHLcNg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/iJof6fyouWY" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-3a-text-shadow.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/PSghIsyYQ4k/35-3a-text-shadow.htmltag:blogger.com,1999:blog-5918579739413557982.post-4067896415705620182009-06-10T15:06:00.006+08:002009-06-11T02:12:33.549+08:00顛覆網路 35 天 (2b): 為影片添點情調為影片添點情調，我略譯一下：
這個範例利用了 Canvas、Video 標籤以及 SVG 遮罩，計算影片的色彩平均值後動態調整邊框顏色。整個看起來還挺有意思的。不過，在觀賞範例前有幾項事情要先說明：
這個範例吃 CPU 吃很大，電腦心臟不強的可以考慮直接觀看 mov 影音檔瞧瞧效果就好你需要安裝 Firefox 3.5 preview (beta99) 以上的版本才能正確瀏覽，Beta 4 中有個 Bug 會讓影音資料無法複製到 Canvas 上。如果你有了 Beta 4、請點選「說明 > 檢查更新」以便更新
準備好了嗎？Go!
電腦心臟強的勇士請走這裡 (記得，只有...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=fvfZbICalMI:Qey06a58U3w:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=fvfZbICalMI:Qey06a58U3w:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/fvfZbICalMI" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-2b.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/ZD3Krt3Ml_o/35-2b.htmltag:blogger.com,1999:blog-5918579739413557982.post-18728176121405346822009-06-10T09:53:00.001+08:002009-06-10T10:12:55.395+08:00顛覆網路 35 天 (2a): Firefox 3.5 與地理資訊揭露歡迎回到顛覆網路 35 天，今天 (其實是昨天晚上… 有時差) 的第一篇「Firefox 3.5 與地理位置資訊揭露」是我比較關心的議題、我會花較多力氣編譯全文 — 不過一如往常，請不要期待精準的翻譯，這也不是我的本意。
網路風行，也因此常有帶著電腦到處跑的機會。有時就是想找一下附近的餐廳，所以你打開網路要找… 且慢，我「現在」在哪裡？如果熟悉這附近也就算了，要是出門在外有時還真不確定自己現在正在何處。就算你知道自己所在位置好了，該怎麼找呢？打開 Google 地圖或 Y!生活家、選擇所在區域…...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=hlKU7Ap_NbQ:bT71Fr1P6nk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=hlKU7Ap_NbQ:bT71Fr1P6nk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/hlKU7Ap_NbQ" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-2a-firefox-35.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/QO_bb3_qc6w/35-2a-firefox-35.htmltag:blogger.com,1999:blog-5918579739413557982.post-20050364482167567322009-06-09T17:41:00.002+08:002009-06-10T10:12:55.396+08:00顛覆網路 35 天 (1): Canvas 與像素操作誠如我所說，我會在能力範圍裡大概翻譯一下顛覆網路 35 天的文章，加速大家吸收新知的速度 — 不過，依照往例，我只會簡譯或者換成自己的話描述，以便節省時間與精神。今天是第一天，首先與我們見面的是 pushing pixels with canvas 要點概述，詳細內容還是看一下原文吧、畢竟程式碼佔的篇幅很大。
Canvas 是 JavaScript 中用來「繪圖」的技術，可以在 HTML 網頁上動態繪製點陣圖。目前你已經可以畫些點、線、面 (像是矩型)那類的東西，不過修過資工系影像處理的你肯定還想對像素多動點手腳。在 Firefox 3.5 裡新增了 createImageData...<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/bclogrss1?a=ybW_SKfiYrk:Jr7iqFvFRzg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/bclogrss1?a=ybW_SKfiYrk:Jr7iqFvFRzg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/bclogrss1?d=yIl2AUoC8zA" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/bclogrss1/~4/ybW_SKfiYrk" height="1" width="1"/>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0http://blog.bobchao.net/2009/06/35-1-canvas.htmlhttp://feedproxy.google.com/~r/bclogrss2/~3/jYBdIjswH00/35-1-canvas.html