柏強，徵求新名稱的網誌

其實低調也不錯

2009-07-09T02:31:00.002+08:00

到時候就是 25 個人分一些有的沒的小禮物，這些是一部份：

據說還有 3 個位子，然後今天 (7/9) 晚間報名截止這樣。

顛覆網路 35 天: HTML 5 版音樂播放器

2009-07-05T17:34:00.001+08:00

很久沒翻譯這系列文章，我發現米嘉也富奸化了… 不過他畢竟是比我維持得更久點，翻譯這類文章真的很考驗毅力的啊，大家要多給義務幫忙翻譯引介資訊的人一點鼓勵。

這篇文章裡討論的是利用 HTML 5 的 audio 標籤與 JavaScript 合作製作一個音樂播放工具，其實 WM 在之前也為 MozTW 製作了一個更炫的、所以害我每次看到這篇都沒什麼毅力翻譯… (藉口藉口！) 反正，先看看完成圖吧！

在 Firefox 3.5 中開啟範例網頁

這個範例還是很有價值的，相較於 WM 的炫爆範例，本例的作者採用了有趣的方式來實作：

<div id="jai">

  <canvas id="jai-transport" width="320" height="20"></canvas>
  <ul class="playlist">

    <li>
      <a href="@F1LT3R - Cryogenic Unrest.ogg">
        F1LT3R - Cryogenic Unrest
      </a>
      <audio src="@F1LT3R - Cryogenic Unrest.ogg"/>.
    <li>

      <a href="@F1LT3R - Ghosts in HyperSpace.ogg">
        F1LT3R - Ghosts in HyperSpace
      </a>
      <audio src="@F1LT3R - Ghosts in HyperSpace.ogg"/>.       
  </ul>    

</div>

原始範例裡的程式碼有包含 Fallback 功能而且比較複雜一點，這裡把程式碼簡化比較容易說明。你發現了嗎？清單中所有音樂項目都只是由 HTML 的列表加上 CSS 樣式展現的，每個項目都與一般 HTML 頁面的連結一樣，可以加入書籤、複製連結位置等等。JavaScript 程式會找出 ID 為jai 之 DIV 標籤中所有的 AUDIO 標籤，接著又以 SVG 加上 JavaScript canvas 的方式繪製出操作介面

用這個方法要加入新樂曲相當方便，且要在任何網站上放入這個播放器也十分容易 —— 定義一個 canvas 與列表就可以了。(相應的 JavaScript 當然要嵌入囉)

附帶一提的是，這個網頁上不但有原作者的說明，連所有的音樂也都是他自己寫的… 這也太猛了吧 XD

Firefox 3.5 台中迷你趴

2009-07-05T16:25:00.000+08:00

依照往例，MozTW 只有在大版本更新的時候會辦 Firefox Party，這次 3.5 推出也不例外。不過一方面有社群成員建議還是辦個交流性的小聚會，另一方面 Mozilla 也有準備紀念品送給各地區的派對活動，所以就讓我們在台中聚會一下吧！

時間： 7/11 14:00-16:30-18:00 (後一半是自由交流時間)
地點：默契咖啡 (台中市中港路二段60-3號)
費用：活動本身免費，低消、餐點等自費 (吃喝大概是 150-200 間)
限額：只有 25 個位子，要報要快喔！

場地有免費網路、插座，歡迎帶筆電來。內容除了分享與交流外，當然也有很多雜七雜八的小禮物會送給參加者。報名及詳細資訊請見報名網頁。

兩小時後，知床大地震！

2009-07-01T14:11:00.002+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: http://bit.ly/shiretokoshock-tw #fx35
(我要推這句 | 我要撲這句)

Shock with me！現在就下載 Firefox 3.5: http://bit.ly/shiretokoshock-tw #fx35
(我要推這句 | 我要撲這句)

YouはShock！馬上下載爆強爆快的 Firefox 3.5: http://bit.ly/shiretokoshock-tw #fx35
(我要推這句 | 我要撲這句)

最後一句的梗不曉得有多少人會看懂 (汗) 當然你也可以自己編寫有自我風格的詞句，只要別忘了在最後加上「http://bit.ly/shiretokoshock-tw」的網址及「#fx35」標籤；此外也不必擔心時差問題，只要在自己所屬時區的下午 3:50 「Shock」一下就行了！

從巴西時間起，每個小時都將有一次發生在世界不同時區的 Shiretoko Shock，大家一起製造知床大地震吧！

另外在台灣時間的 7/2 半夜 2:50a 其實還有一次全球的 Super Shock，這個就不邀請大家參加了 XD 夜貓子們自己參考吧 :P

Go home, IE6!

2009-06-24T18:28:00.000+08:00

"Yeah, you always break our coolest toys!"

顛覆網路 35 天 (9): 原生 JSON，更安全、效能更好

2009-06-21T08:18:00.000+08:00

JavaScript Object Notation (JSON)在網站開發的世界裡已經有很多人採用，成為不可或缺的一部份。Firefox 3.5 起以 window.JSON 來原生支援 JSON 格式，本篇 (原文) 將為各位做個相關介紹。

JavaScript 等腳本語言的標準原型 ECMAScript 在第五版時將 JSON 原生支援列入規格，目前 Firefox 3.5 跟 IE8 都支援，而且其他瀏覽器必定也會很快加入支援行列。JSON 原生支援有兩個優點：

安全性提升：單純使用 eval 來解析字串型態陳述式的方法有其安全顧慮，原生 JSON 目前單純解析資料、不呼叫函式來解析物件。
效能提升：這是應該的… 目前其他可以安全解析 JSON 的函式庫，效能都比不上原生支援的瀏覽器。

來看些範例 —— 一個以 HTTP GET 等方法傳回的簡單 JSON API 搜尋結果看起來大概像這樣：

/* 
從主機取回一段搜尋結果的 JSON 資料
*/
 
var data = ' { "responseData":
{"results": [
    {
        "SafeSearch":"true",
        "url":"http://www.arunranga.com/i.jpg",
    },
    {
        "SafeSearch":"false",
  "url":"http://www.badarunranga.com/evil.jpg",
    }
]}}';

您可以用這樣的方式處理資料：

/* 
 取回、操作上一段的 JSON 資料
 如果用支援原生 JSON 的其他函式庫，會更容易一些
*/
 
if (window.JSON) {
    var searchObj = JSON.parse(data);
    for (var i=0; i++; i < searchObj.responseData.results.length) {
        if (searchObj.responseData.results[i].SafeSearch) {
            var img = new Image();
            img.src = searchObj.responseData.results[i].url;
            // ... 在 DOM 中插入圖片...
    }
}

不過，網頁設計師通常並不直接使用 JSON 原生支援，而常用 jQuery 等函式庫自不同網域取回、解析 JSON 資料，這也是 JSON 大展身手的地方。考量到效能問題，有些函式庫已經開始採用瀏覽器的原生 JSON 能力來解析資料。目前 jQurey 與 Dojo 都已支援原生 JSON，所以您使用這些函式庫時一方面在已原生支援 JSON 的瀏覽器上將獲得更好的效能、另一方面在尚未支援的瀏覽器上也可以順利解析 JSON 資料。

授權書及時間提示工具

2009-06-20T15:46:00.000+08:00

我們經常在邀請別人演講時使用許多雜七雜八的文件，像是領據、講者名牌、講者桌牌、影音授權書、時間提示字卡、提示音… 等等東西，不過我發現好像都沒有什麼人分享這類文件，讓大家可以直接改。我這邊先把我使用的時間提示字卡及授權書範本丟出來給大家參考，都是 by-sa。

顛覆網路 35 天 (8a): CSS 3D 效果

2009-06-20T13:18:00.002+08:00

這篇有一個用 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="face left">
    </div>
    <div class="face right">
    </div>
</div>

.cube {
    position: absolute;
}
 
.face {
    position: absolute;
    width: 200px;
    height: 200px;
}

接著把這 3 個 div 都轉為平行四邊形：

.top {
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
 
.left {
    -moz-transform: rotate(15deg) skew(15deg, 15deg);
}
 
.right {
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

至此，三個方塊已經以平行四邊形的樣子排成正六芒星，接著我們只要調整位置即可。你可以用方程式算出三個面所應該排列的座標點，或者慢慢一步步調整到正確的地方也行。下方的陰影其實就是 top 那一面的位移複製品，只是設定了 opacity: 0.5 的背景色。另一個方塊也是把樣式與標籤直接再複製一份做出來的，並以 translate(600px, 400px) 位移、以 scale(0.5) 將尺寸縮小 50%

方塊中間要填入什麼都行，其中有一面以 HTML5 Video 標籤放入了影片，你可以看到影片也被調整成平行四邊形的樣子 :P

除了 Firefox 3.5 之外，Safari 3.1+ 與 Google Chrome 亦以 -webkit-transform 的型態支援。相關文件可參考 https://developer.mozilla.org/En/CSS/CSS_transform_functions

姓名標示，要標什麼？法律嚴肅版

2009-06-19T15:50:00.001+08:00

之前曾寫過姓名標示，要標什麼？要標哪裡？一文，大概說明我個人看法。其實 CC 授權條款裡面也有明確告訴你要標哪些東西，我們以 3.0 預演版的條文來說明一下。首先是 4. 限制的 (a)：

您必須在您散布或公開演播的每份重製物上，附上本授權條款複本或「統一資源識別符」(Uniform Resource Identifier) …… 保留所有與本授權條款有關的注意事項以及免除保證責任聲明

所以這邊就有兩個：授權條款的複本或 URI (粗略想成是授權條款的網址吧)，與保留授權條款有關的注意事項及免除保證責任聲明 (原來有的請別刪，原來沒的也不用加)。

接著是 4(d)，這邊很多一段段來看：

(i) 若有提供原始著作人姓名（或筆名），則您應提供之，且（或）若原始著作人及（或）授權人，在授權人的著作權聲明、使用條款或藉由其他合理方式指定第三人（例如，贊助機構、出版者、期刊）為姓名標示的對象（「姓名標示對象」），則您應提供該第三人的姓名；

簡單講就是作者指定的名稱，看是本名、筆名或其他單位 (例如贊助商、公司等) 的名稱。

(ii) 本著作名稱；(iii) 在合理實際可行的範圍內，授權人所指定與本著作相關之統一資源識別符，除非該統一資源識別符並非連結至本著作的著作權聲明或與關於本著作之授權資訊；

作品名稱跟作者指定的網址。

在改用作品的情況，則必須註明在改用作品中使用了本著作（例如「原始著作人之本著作的法文譯本」、「依據原始著作人之原著作而改編的電影劇本」等）

如果是改用作品 (修改他人作品而成的新作品)，則要標註使用了哪些東西。不過有鑑於單一改用或彙編著作可能利用了太多作品、會標到天荒地老又耗費資源，這邊有個折衷方法：

在改用作品或彙編之情況，對改用作品或彙編全部有貢獻之作者若使用單一的表彰時，則本項所要求的表彰，最低程度應作為前述表彰之一部分，並至少與其他具有貢獻之作者的表彰方式同等明顯。

意思就是說只要所有被引用的作品標示的方式都一樣明顯的話，可以允許從上面那幾種標示方法裡選一部份使用即可，不需全放。

所以到底要放什麼？

整理一下，如果你只是單純引用、重製散佈別人的著作，那麼記得標上：

原始作品授權條款的複本或授權條款的 URI，以及
作者指定的標示名稱，沒指定就是放他本名或筆名。還有
作品名稱跟授權人指定的網址，沒指定的話可以不放網址。

也就是說，最少會放上授權條款 URI、作品名稱跟作者姓名。

如果這是改用或彙編(編輯)著作，那麼就是依據同樣的原則、把每個用到的作品都標上去。但只要所有用到的作品標示都一樣明顯，則作品名稱、作者姓名、授權人指定的網址這三者可以不用全放。(原著使用的授權條款要標示，不然會很混亂。)

其他可能？

4(a)裡其實有一個特殊的部份：

若您創作彙編，則應在收到任一授權人通知時，於實際可行的範圍內，依其要求移除彙編中，如第4條第(c)項所定對於原始著作人及／或其指定第三人的表彰。若您創作改用作品，則應在收到任一授權人通知時，於實際可行的範圍內，依其要求移除改用作品中，如第4條第(c)項所定對於原始著作人及／或其指定第三人的表彰。

意思就是說，在改用及彙編作品的情況下，原始作品授權人可以要求不要放他的名字 —— 除非已經獲得明示說可以不放，不然還是得先放上去喔！

顛覆網路 35 天 (7b): Firefox 3.5 media query 簡介

2009-06-18T14:54:00.003+08:00

原文出處，篇數太多不曉得怎麼開頭了 orz 反正大家看這系列下來應該都知道我是重點節譯。

現在可以上網看網頁的裝置越來越多，大家對網頁的期待也因裝置限制或功能而有所不同。CSS2 因此加上了媒體類別相關的設定，讓你可以指定某 CSS 宣告適用的裝置，像這樣：

<link rel="stylesheet" media="print" href="print.css">

這樣的確有效解決某些問題，不過網頁設計師要面對的不只是裝置的不同：即便是同一類型的裝置，也有可能有直放、橫擺、螢幕大小、解析度等等各式各樣的問題。Firefox 3.5 開始支援 CSS3 草案的 media query (媒體型態查詢) 機制，提供因應裝置各項特性而套用不同樣式的能力，讓各式裝置可以更適切地套用相應的樣式。以範例網頁來說，如果顯示範圍高大於寬 (直式)，則「all and (orientation:portrait) 成立、套用 portrait.css 樣式：

<link rel="stylesheet" media="all and (orientation:portrait)"
 href="portrait.css">

而如果顯示範圍寬大於高 (橫式)，則套用 landscape.css：

<link rel="stylesheet" media="all and (orientation:landscape)"
 href="landscape.css">

最棒的是，每次螢幕狀況有所轉換時，都會重新計算、套用一次樣式，所以當你以橫式的視窗開啟範例後，不妨慢慢調整視窗大小；一旦高大於寬 (變成直式)，套用的樣式會立即變更。

如果你打開 landscape.css 瞧瞧，會發現其中的某些樣式也採用 media query 來調整。例如網頁文字尺寸預設為 14px，但若顯示範圍寬度至少有 600px，則改用16px 字體顯示：

@media all and (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

倘若顯示範圍再大一點、至少有 700px 寬的話，則採用 20px 的字體尺寸顯示文字：

@media all and (min-width: 700px) {
  body {
    font-size: 20px;
  }
}

還有另一條規則讓 800px 以上寬度的顯示介面擁有更大的字體，不另贅述。總之，當你調整視窗大小，就可以馬上發現變化。有一個不錯的應用點子，是隨著螢幕寬度調整內容欄數 — 越寬的的螢幕，分成越多欄來呈現。

目前 Firefox 3.5、Safari 3、Opera 7 以上的瀏覽器都媒體型態查詢，一般來說新版本瀏覽器是加上更多型態或查詢方式。Firefox 的相關文件請參考 MDC，而 Opera 9.5 的相關說明則在這篇接近最後的地方。目前沒有找到 WebKit 的相關資料。

無論使用者用哪樣的裝置瀏覽你的網站，利用媒體型態查詢功能、可以讓你做出更方便他閱讀的網頁。我的網誌應該會採用相應的技術來製作邊欄，你也試試吧！

顛覆網路 35 天 (7a): 開放影片編碼格式的品質

2009-06-18T01:50:00.003+08:00

這篇主要比較開放影片編碼格式的品質問題，緣起是 Google 的 Chris DiBona 在 WhatWG 郵件群組貼了一篇文章，裡頭提到：

如果 YouTube 要採用 Theora 編碼、還得維持目前的播放品質，那會佔掉全世界大部份的頻寬。

目前關於影片編碼的論戰已經慢慢嘴炮化、缺乏實質的比較，所以 Greg Maxwell 回了他一篇、並放上下列的比較結果。(本篇由原作者授權張貼於顛覆網路 35 天專欄，柏強我只依據往例、節譯重點。)

以下是將同一段影片分別以兩種尺寸編碼、丟上 YouTube 處理後再下載，然後與 Ogg/Theora+Vorbis 比較的情形，各位可以下載觀看以便比對。

~499kbit/sec 比較

YouTube

Download (H.264+AAC; 17MiB)

Ogg/Theora+Vorbis

Download / Watch (Ogg/Theora+Vorbis; 17MiB)

~327kbit/sec 比較

YouTube

Download (H.263+MP3; 12MiB)

Ogg/Theora+Vorbis

Download / Watch (Ogg/Theora+Vorbis; 12MiB)

位元率都分別標示出來了，而 Theora 的版本故意稍稍降一點位元率，以防止略大一些的檔案大小會被懷疑是故意提高品質。要真的公平比較的話，請把音效也考慮進去，光看靜態圖片絕非比較影片品質的好方法。這邊的靜態圖片只是為了方便讀者而做。

製作方法

以下是這四個檔案的完整製作方法：

影片來源是 Blender 基金會以創用 CC 授權的動畫片 Big Buck Bunny，版權無慮。在此使用 media.xiph.org 上下載的無失真 640x360 PNG 與 FLAC 版。
以 ImageMagick 的轉換工具重新取樣成 480x270。
使用 gstreamer 的 jpegenc，設為 quality=100 的 mjpeg + PCM，產出大約 1.5GB、位元率約為 20Mbit/sec 的檔案。
將檔案裁剪至 1G 以便符合 YouTube 的限制，產生 input_mjpeg.avi 檔 (706MiB)。
將檔案上傳到 YouTube，交給它轉換。
下載 YouTube 產出的 FLV 即 H.264 格式檔，工具很多種、在此用的是 keepvid
將原始的 input_mjpeg.avi 以 libtheora 1.1a2 與 Vorbis aoTuv 5.7 產出位元率約當於 499kbit/sec 的檔案，這個數值與 YouTube 產出的檔案相同。
將 input_mjpeg.avi 再重新取樣產出一個 400x226 的檔案。
接下來步驟同上一個檔案，最後再以一樣 libtheora 1.1a2 與 Vorbis aoTuv 5.7 產出位元率約當於 327kbit/sec 的檔案，這個數值與 YouTube 利用 400x226 的影片產出的檔案相同。

Greg Maxwell 的結論

較低品質的兩段影片很難辨出高下，而就算是高一點的品質、YouTube 目前所採用的方式也不見得就高到哪裡去。這樣的品質下四段影片檔必定各有缺點，而取捨就見仁見智。
就以我 (Greg) 的觀點，在 327kbit/sec 的影片 Theora+Vorbis 的格式遠勝過 YouTube 使用的 H.263。遇上聲音更明顯：Vorbis 版可以聽到片頭的蟲鳴、而 YouTube 的檔案中就聽不見了。
高品質的部份，在細細比較後可能大家會比較偏好 H.264 的版本，但差異不很大，大部分的人應該都分不出來。

Greg Maxwell 的信件可以查閱原文。

更高畫質的影片呢？

拜我偷懶到今天才動手看這篇所賜，有另一篇補充的文章可以即時一併翻譯。Maik Merten 為 HD 畫質的影片也做了比較，截圖如下：說實在差異不大，而且 Theora 的仔細看感覺好像還比 H.264 更好 (注意頭髮的地方)。別忘了看看影片來比較喔：

H.264

Theora

所以綜上所述，別嘴炮了，要比較畫質還是實際用眼睛看看吧。

顛覆網路 35 天 (6b): 動態字體與 CSS 範例

2009-06-17T11:07:00.001+08:00

今天 (好吧，又是大前天…) 的顛覆網路 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 像素：

-moz-box-shadow: #9BD1DE 5px 5px 6px;

接下來是其中的按鈕，我們也會用到 -moz-border-radius，但額外使用 -moz-box-shadow 來區分按鈕目前狀態。一般的按鈕是普通陰影，不過滑鼠游標移上 (hover) 時則利用 inset 關鍵字設定內部陰影、文字本身也套用 text-shadow 陰影效果。點選按鈕後保持內部陰影狀態，但加深色彩、加大範圍：

#superbox button {
    -moz-border-radius: 5px;
    -moz-box-shadow: #000 0px 0px 8px;
}
 
#superbox button:hover {
    -moz-box-shadow: inset #989896 0 0 3px;
    text-shadow: red 0px 0px 8px;
}
 
#superbox button:active {
    -moz-box-shadow: inset #1C1C1C 0 0 5px;
}

動態連結字體

在此以 @font-face 設定每個按鈕個別的字體，舉第一個按鈕為例：

@font-face {
    font-family: Brock Script;
    src: url("BrockScript.ttf");
    font-style: normal;
    font-weight: normal;
}

.first {
    font-family: Brock Script;
}

@font-face 的說明可以看先前的文章，另外這個範例裡也利用一點 JavaScript 技巧動態替換下方文字段落的類別，以便在你點選按鈕時以相應字體顯示。

利用這些效果，我們就做出了「很像圖片，但不是圖片」的按鈕囉！大家可以試試看。

以創用 CC 釋出的音樂是否就「無版權」？

2009-06-15T15:34:00.000+08:00

不是，不是，不是。著作人使用創用CC條款，是將他的作品「授權」給你使用，並不代表作品就「無版權」。如果你違反著作人原先定下的條件 (例如姓名標示、相同方式分享等)，則授權無效、你一樣是侵權。

所以推廣創用 CC 從來就不是反對著作權的作為。相反地，我們一定會說明一下著作權的部份，否則聽眾不會懂得 CC 的意義。

@font-face 的問題？

2009-06-15T12:40:00.002+08:00

之前就在實驗 @font-face 動態連結字型的問題，中文會遇到的問題比英文多，略列如下：

中文字型檔好肥，多在 8MB 之譜，加上
自由的字型也超少，還有
據說 Safari 目前的實作方式是，等下載完動態連結字體才顯示出來，請想像使用者在開啟網頁、另外開小遊戲玩了十來分鐘以後終於看到網頁文字的感覺。

第二個問題無解，要就自己刻，不然就去談；第三個問題目前無解，我覺得這樣實作很詭異… 完全沒考慮字型檔很大的情況要怎樣讓使用者「接受」；第一個問題目前看起來解法有二：

用小一點的字體，例如 Droid Sans Fallback 大概是 3-4MB，「或許」你可以接受… 吧
使用unicode-range指定要下載的範圍，僅下載需要的文字
用不知道何年何月會出現的動態組字技術，不是為了拼罕見字、而是為了拼出字型

Safari 已經支援 unicode-range，所以至少我們有個瀏覽器可以試試看效果如何(我還沒試)。有另一個問題是，我怎麼知道我用了哪些字範圍要從哪裡到哪裡？unicode-range 規格上可以指定多個不連續範圍、而不是笨笨的只能從 A 到 B，所以我的想法是可以弄個小程式動態去掃自己網頁上的文字，指定一個最佳範圍給你。

不過這樣在 Safari 裡好像還會有一個要測試的問題：假設要這樣搞，我勢必要利用 JavaScript 在網頁讀取完畢後掃描網頁文章、escape 後判斷出範圍，接著也以 JavaScript 指定 @font-face 需下載範圍。但剛才說 Safari 要讀完字型才給看文字… 這樣會不會發生我指定完範圍結果套不上去的慘劇？

結果到最後好像還是要利用 Flash 或圖片 (爆炸)

突然覺得全部重來好了？

2009-06-15T11:07:00.001+08:00

所以版面洗白白~~ 有時間就找範本來慢慢微調成自己喜歡的樣子。

顛覆網路 35 天 (6a): DOM 選取符 API

2009-06-14T12:18:00.001+08:00

我終於趕上今天該有的進度了 XD 這一篇的重點我想是相容性與效能比較，重點節譯如下：

W3C 的萬年草案之一 DOM 選取符 (Selector) API 可以幫 JavaScript 程式設計師以 CSS 選取符方式輕鬆選取文件中的 DOM 元素，而且大部分的新瀏覽器，包括 IE8、Chrome、Safari 及即將 (?) 現身的 Firefox 3.5 都已經有基本支援了。

querySelectorAll

選取符 API 提供 querySelector 與 querySelectorAll 兩種方式協助你選取 DOM 元素，差別在於 querySelector 僅傳回第一個符合條件的元素、而 querySelectorAll 會以元素陣列的方式全部傳回。例如下面的 HTML 碼：

<div id="id" class="class">
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
</div>

你可以用下列程式輕輕鬆鬆把 id 為「id」之 DIV 中的兩個 P 元素背景設為紅色：

var p = document.querySelectorAll("#id p");
for ( var i = 0; i > p.length; i++ ) {
    p[i].style.backgroundColor = "red";
}

也可以用這樣的方式讓類別為「class」之 DIV 中的第一段套用「first」類別：

  document.querySelector("div.class < p:first-child")
    .className = "first";

這類的條件在早期都蠻麻煩的，有了選取符 API 後就方便多了！不過有個瀏覽器方面的問題：大部分的瀏覽器 (Firefox、Opera、Safari、Chrome) 都可以用 CSS3 選取符來選取元素，IE8 則沒支援那麼多、大多還落在 CSS2 選取符的範疇內。雖然一些比較複雜的選取條件可能受限於相容性問題而無法利用 CSS3 選取符，但至少還是挺有用的。

而對於開發人員，問題可能就是怎麼選用適當的選取符組合。你可以看這些文件增進對選取符的相關知識：

CSS 3 Selectors Explained
XML.com: CSS 3 Selectors
jQuery Selector Reference (這裡面也包括非標準的選取符)
othree 曾經在 MozTWWiki 上貼過一篇關於選取符的資料。

實作狀況

其實就算瀏覽器並非全都完整支援，Web 開發者用選取符 API 也早已用得很兇了：已經有不少 JavaScript 函式庫時做出類似的東西：

當然，用這類函式庫「模擬」出來的 API，效能跟原生的還是有差。下面這張圖是先前測試的結果，供您參考：

由這張圖可以明顯看出，原生支援此 API 亦可能大幅提升網際應用程式的執行效率。

顛覆網路 35 天 (5b): 地理位置資訊及 OpenStreetMap

2009-06-14T10:47:00.000+08:00

這一篇基本上就是個火力展示，我就不逐句譯了… 嗯，之前其實也沒逐句譯過，總之我就是概述一下要點、有需要的朋友請參考原文。

之前有提過 Firefox 3.5 可以讓你透露地理位置資訊，方便網際應用提供更好的服務。這邊提供一個由 René-Luc D’Hont 製作的範例：結合地理位置與開放圖資 OpenStreetMap，再混搭其他網路資源製作出的即時地圖。測試的時候別忘了按下跳出來的「透露地理位置」喔！

Launch the Demo in Firefox 3.5

台灣的地理位置不算很準確 (這在之前提過原因了)，不過至少辨識得出我人在台北 :P 你可以經由旁邊的 checkbox 決定要顯示哪些資訊。原文有稍稍提一下這個範例所使用的資料來源及開放工具，可以參考。

另外也幫台灣的 OpenStreetMap 廣告一下：需要大家的幫忙啊！

顛覆網路 35 天 (5a): -moz-box-shadow 方塊陰影

2009-06-14T09:46:00.001+08:00

今天 (是昨天吧？對不起我富奸化了…) 討論的是 box-shadow 方塊陰影。box-shadow 是 CSS3 草案的一部份，Firefox 3.5 在此以 -moz-box-shadow 實驗性支援、待規格定案後則會繼續以 box-shadow 出現。這個特性可以繪製一個區塊的陰影，我們直接看幾個範例來說明。以下的範例都會先秀程式碼、接著是 Live demo、再為您提供 Mac OS X 上的螢幕截圖：

-moz-box-shadow: 1px 1px 10px #00f;

如你所見，頭兩個值是設定陰影位移點數，接著是柔邊、陰影色彩。事實上你還可以在最前面加上「inset」來製作內部陰影：

-moz-box-shadow: inset 1px 1px 10px #888;

接著，你還可以用第四個數值「延展距離」來調整陰影的大小，可以向外延展(正值)也可以向內縮減(負值)：

-moz-box-shadow: 0px 20px 10px -10px #888;

跟 text-shadow 一樣，這裡也可以設定多重陰影 (感謝 Markus Stange)：

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

四層陰影疊起來，形成彩虹一般的效果。如同 text-shadow 一樣，Firefox 3.5 在這邊跟的是 CSS3 的規格，也就是先定義的陰影會放在最上層，在定義多層陰影時請記得這點。

最後一個範例裡，我們將色彩值以 RGBA 格式指定，這跟 RGB 方式類似、只是最後加上了代表可以製作半透明效果的 alpha channel 值。這個例子的透明度為 .5 (50%)：

-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);

看不太出來？按一下加上背景圖應該會更明顯。圖片感謝eschipul提供，CC:by-sa。

相容性問題

box-shadow 算是草案中晚近出現的特性，瀏覽器的支援程度也不算很廣：

Firefox 3.5，如本篇文章所說，以 -moz-box-shadow 的方式支援，同時也支援 inset 及延展距離。
Safari 與 Firefox 類似、也以 -webkit-box-shadow 方式支援。4.0 版開始支援多重陰影，不過目前還不支援 inset 及延展距離。
Opera 與 IE 目前則尚未支援，IE 有古早的 DropShadow 可以參考一下。

所以如果現在就要用，那最好把三條都列上去。下面這個範例可以讓支援此特性的瀏覽器都看得到效果，而不支援的也不過是以原本無陰影的面貌出現而已：

 -moz-box-shadow: 1px 1px 10px #00f;
 -webkit-box-shadow: 1px 1px 10px #00f;
 box-shadow: 1px 1px 10px #00f;

其他資訊

文件

範例

顛覆網路 35 天 (4b): 以 @font-face 使用你喜歡的字體

2009-06-14T02:49:00.000+08:00

這篇提到的非技術問題點其實不少，我盡可能大幅翻譯。當然還是要付註：請別要求精準翻譯，那不是我的本意。

Firefox 3.0 已經在許多方面添上讓網頁字體看起來更美觀的技術，而 3.5 版加上的 CSS @font-face 技術則是要幫網頁設計師逃離系統預設字體的苦痛。以 @font-face 將 TrueType 或 OpenType 字體檔案「連」進網頁，就像連結外部 CSS 檔、JavaScript 檔一樣輕鬆愉快，而且 Safari 從 3.1 起已經支援、Opera 也打算在第 10 版支援這項技術。

要動態連結自訂字體，只要在 CSS 中以 @font-face 指定名稱就可以了。瀏覽器會視需求下載必要字體、所以你可以列舉一堆字型名稱也無妨：

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

支援 @font-face 的瀏覽器會使用 Graublau Sans Web 字體顯示文字，不支援的就用 Lucida Grande 或系統預設的無襯線字體了。請見範例。

更進一步

大部分的字體設計時都只考慮一般、粗體、斜體、粗斜體這些情況，你可以使用 font-weight 與 font-style 來定義某特定情況要使用的字體，若沒特別指定則視為「一般」。

/* Gentium by SIL International   */
/* http://scripts.sil.org/gentium */
 
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> default to normal */
}
 
@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
}
 
body { font-family: Gentium, Times New Roman, serif; }

這個範例顯示起來如下：

可別以為就是這樣而已，@font-face 常被忽視的特點、就是可以讓同組字體處理多達九段的字體粗細設定。日文開放字體 M+ Fonts 專案共有七段的粗細，範例如此頁：

有時我們可能會希望儘量使用使用者電腦上已安裝的字體、僅在沒有安裝時才從網路上動態下載。此時可以在 @font-face 裡的 src 特性以 local() 方式指定字體名稱。瀏覽器會依序試圖採用 src 列出的各個字體、直到其中一組讀取成功。

/* MgOpen Moderna                      */
/* http://www.zvr.gr/typo/mgopen/index */
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"), 
       local("HelveticaNeue"), 
       url(MgOpenModernaRegular.ttf);
}
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

下面的圖分別是此範例在 Mac OS X、Windows 及 Linux 上的顯示模樣。Helvetica Neue 在 Mac OS X 系統上很常見，不過 Windows 和 Linux 通常就沒裝，所以此範例在 Mac OS X 執行時會使用系統中的 Helvetica Neue、不會下載任何字體檔。在 Windows 與 Linux 中、瀏覽器發現本機上沒有相關字體後，終究會下載、使用 MgOpen Moderna 字體。MgOpen Moderna 原先就是為了當作 Helvetica 的代用品而生，所以看起來會很像。這樣設計師就可以在必要時才下載字體檔。

指定字體名稱時使用的是字體全名，這一般來說是字體名加上樣式名 (好比「Helvetica Bold」這樣)。Mac OS X 裡，可以在 FontBook 先選取字體後按下 Preview 選單的「Show Font Info」來查閱字體全名：

Linux 裡也有類似的工具，而 Windows 使用者可以到微軟網站上下載 Font properties extension，安裝後字體檔的「內容」就會顯示很多資訊，字體全名就在「Name」頁籤的「Font Name」裡。

僅有 Mac OS X 裡的 Safari 才支援 PostScript 名稱，所以 Mac OS X 下也可以使用 PostScript 名稱；而若字體格式為 OpenType PS (通常附檔名為 .otf)，則在 Windows 裡全名與 PostScript 名稱。綜上所述，設計師採用這類字體時最好把全名與 PostScript 名稱都寫進去以確保相容性。

多國語言文字

即便使用 Unicode，大部分的語言還是會遇到缺字問題，少數民族語還更嚴重。有了這個動態連結字體的功能，就可以讓訪客看到這些特殊語言文字：

@font-face {
  font-family: Scheherazade;
  src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), 
       url(fonts/ScheherazadeRegOT.ttf) format("opentype");
}
 
body { font-family: Scheherazade, serif; }

阿拉伯文這類的字體，文字的顯示方式與相鄰的文字有很大關係。不同作業系統有各自的技術來處理這類情形，在 Mac OS X 上需採用 AAT 字體、而 Windows 和 Linux 則需要 OpenType 字體。如果不為個別作業系統提供適當的字體格式，就無法正確顯示這個範例。範例裡由於 Windows 跟 Linux 平台不支援 AAC 格式，所以就會轉而下載 OpenType 格式字體；因此各平台各取所需，便可正常顯示：

跨站字體檔

Firefox 3.5 預設無法跨站取用字體檔。如有此類需求，必須依據 Firefox 3.5 支援的檔頭存取控制資訊格式、調整存字體檔伺服器的 HTTP 檔頭相關設定：

# example Apache .htaccess file to add access control header
 
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

字體授權問題

要動態連結字體檔時，請先確認授權相關問題。若字體授權中用了什麼看不懂的字眼，則小心為妙。要是你確定授權沒問題，也建議可以在 CSS 的註解中註明授權方式以備存。

你電腦中大部分的字體檔都不見得能以這類連結的方式使用，畢竟這項技術還在應用初期，很多作業系統內建的字體也規定只能在單機上使用，或許日後對相關的方式會有更進一步的授權系統也難說。

另外，並不是免費的字體就一定可以用，有的字體規定不可再散佈，所以檢查一下比較好。

那，IE 呢？

其實 IE 也早已支援字體連結，只是、格式用的是獨門的 EOT 檔。你可以用 (只有 Windows 上有的) MS WEFT Tool 將 TrueType 或 OpenType TT 字體轉為 EOT，OpenType PS (.otf) 則無法使用。

又，IE 只認 @font-face 中的 font-family 及 src，我們可以利用這點來寫跨瀏覽器的設定：

/* Internet Explorer 用 */
/*         (*一定*要擺第一個)             */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* 不可用 format() */;
}
 
/* 其他瀏覽器用 */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");
}

接下來呢？

Firefox 3.5 還不支援 font-stretch 與 unicode-range，也不支援 SVG 文件中的字體定義。這些都會在未來的版本慢慢支援，一如往常、我們歡迎您的幫忙喔！

其他資源

文件

範例

字體資源

字體政策討論

顛覆網路 35 天 (4a): Tracemonkey？咬起來脆嗎？

2009-06-12T17:50:00.003+08:00

Tracemonkey 可以吃嗎？味道如何？，我總是大幅改作 XD 希望大家覺得還 ok 這樣。

Firefox 3.5 的目標是要讓大家的網路「升級」，在開發過程中也十分著重於程式設計方面的功能。有個著力很深的東西名喚 Tracemonkey… 追猴？這可以吃嗎？

Tracemonkey 是 Mozilla 新一代的 JavaScript 引擎，將 JavaScript 編成機器碼、以便提升執行速度。雖說聽起來比較偏向程式設計，但要說是給一般使用者的功能當然也可以 — 我們的網路生活已經滿是 JavaScript 了，提升這方面的速度當然跟使用者息息相關。

不過講到速度總是抽象，我們試著跳脫一般常見的「測試數據」，希望讓大家都能動手品嘗、了解 Tracemonkey 的滋味。在此，Mozilla 製作了一段影片演示 Firefox 3.0 與 Firefox 3.5 在 JavaScript 速度上的差距。除了數據之外、也希望讓您實際體驗 Tracemonkey 的速度。

喔喔~ 你的瀏覽器不支援原生影片呢！或許你可以下載 .ogv 版或 .mp4 版，然後以其他的播放軟體開看看囉！

您也可以自己動手試試這個範例網頁，建議你同時用 Firefox 3.0 與 3.5 測測看、會更有感覺。

顛覆網路 35 天 (3b): 利用 Burst 動畫引擎與 canvas 製作 SVG 動畫

2009-06-11T15:36:00.001+08:00

利用 Burst 動畫引擎與 canvas 製作 SVG 動畫，我其實不喜歡翻這類的「標題」，術語太多了，但反正這是給技術人看的就… 這篇裡基本上沒有什麼好翻譯的，先看範例、再看影片就行。影片裡介紹範例的製作過程，包括用 InkScape 繪製 SVG 圖片，利用 JavaScript 與 Burst 引擎製作動畫效果等… 真的要翻譯的話好像要上字幕？那也太累了 orz 反正，看圖說故事吧：

觀看範例

有一點值得一提：SVG 原先是向量圖，但範例中利用 Burst 引擎，將 SVG 圖素透過 JavaScript 運算再繪於 Canvas 中。這麼一來你就能與其他 Canvas 裡的玩意混合使用，創造更多效果。

接著是長達半小時的影片介紹，請慢用囉！

View Video (.ogv) | View Video (.mp4)

顛覆網路 35 天 (3a): text-shadow

2009-06-11T15:09:00.001+08:00

這一篇挺有意思，也大致翻一下全文。

text-shadow 原先在 CSS2 規格中出現，到 CSS2.1 被打入冷宮、而 CSS3 捲土重來，Firefox 3.5 正式開始支援。此 CSS 特性人如其名，就是拿來展現文字的陰影效果，不過咱們總是熱情無限創意奔放，不會這麼簡單就放過這個有趣的特效 :P 直接看本文最有趣的範例吧 (你需要支援 text-shadow 的瀏覽器，例如 Firefox 3.5)：

看那七彩的霓虹燈，它的發明者是愛迪生

啟動/停止動畫效果

這個範例同時展示了 text-shadow 的許多功能：你可以設定陰影色彩、位移、柔邊等等，而一段文字也可以同時賦與數個陰影效果。

基本語法

CSS3 規格中的 text-shadow 值定義如下：

none | [<shadow>, ] * <shadow>,

即是「可以指定為 none、無陰影」或「指定一組 (以上) 的 shadow 型態值」。而所謂的 shadow 型態值則定義如下：

[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],

白話說就是：至少要輸入兩個數量值分別代表水平與垂直位移，可視需求加入第三個數量值調整柔邊效果，也可視需求於最前或最後方加上陰影色彩設定。講這麼多其實還是看依些範例比較快，以下所有範例都會搭配圖片、如此一來即便您使用不支援 text-shadow 的瀏覽器也可以了解意思。首先是簡單的陰影：

text-shadow: 2px 2px 3px #000;

A simple shadow

你是熱血硬派？那來看看不用柔邊的例子：

text-shadow: 2px 2px 0 #888;

I don’t like blurs

光暈效果、多重應陰影

加點創意，就可以變化出有趣的效果，例如極具神祕感的移動光暈：

text-shadow: 1px 1px 5px #fff;

Glowing text

又或者是單純的模糊文字：

text-shadow: 0px 0px 5px #000;

Blurry text

另外，剛說過也可以設定多組陰影：

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

Multiple shadows are hot

在 Opera 9.x 已知可以設定 6 組陰影，而理論上你在 Firefox 3.5 裡可以為文字設定無限組 —— 當然還是控制一下比較好，太花俏也不美觀。

效能、可及性、相容性

用文字替代圖片 (或 Flash) 展現陰影效果好處多多，一方面不用圖片可以節省頻寬、二方面對利用語音瀏覽器的人及搜尋引擎都更好。使用文字，在縮放網頁尺寸的時候也可以獲得比較好的效果。

大部分的瀏覽器都已經支援 text-shadow：

Opera 從 9.5 版開始支援。
Safari 從 1.1 版開始支援，當然也包括使用 WebKit 為核心的瀏覽器，如 Google Chrome。
IE 目前還不支援，但即便如此也至少顯示得出文字。另外如果想在 IE 中達成一樣效果，可以利用微軟專屬的 shadow 及 dropShadow 特性

另外值得一提的是，Opera 9.x 以 CSS2 規格的方式、將先定義的陰影繪於最底層，而 Firefox 3.5 則依據 CSS3 的規格、將先定義的陰影繪於最上層。如果你想定義多重陰影，或許要考慮一下這個效果的影響。

text-shadow 很明顯將成為廣泛流行的樣式，不過當然這類 eye candy 都該注意不要太濫用就是。也請參考其他相關文件：

以及範例：

顛覆網路 35 天 (2b): 為影片添點情調

2009-06-10T15:06:00.006+08:00

為影片添點情調，我略譯一下：

這個範例利用了 Canvas、Video 標籤以及 SVG 遮罩，計算影片的色彩平均值後動態調整邊框顏色。整個看起來還挺有意思的。不過，在觀賞範例前有幾項事情要先說明：

這個範例吃 CPU 吃很大，電腦心臟不強的可以考慮直接觀看 mov 影音檔瞧瞧效果就好
你需要安裝 Firefox 3.5 preview (beta99) 以上的版本才能正確瀏覽，Beta 4 中有個 Bug 會讓影音資料無法複製到 Canvas 上。如果你有了 Beta 4、請點選「說明 > 檢查更新」以便更新

準備好了嗎？Go!

電腦心臟強的勇士請走這裡 (記得，只有 Firefox 3.5 beta99 以上可以用)
心臟不強不打緊，可以看看 Screencast 過乾癮： ogg 格式, mov 格式

怎麼做到的呢？開頭其實就描述過原理，首先要把影格畫到 canvas 上，並順手計算色彩的平均資料：

var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
var context = canvas.getContext('2d');
 
// push frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
// get image data for color calculation
var data = context.getImageData(0, 0, canvas.width, canvas.height);

接著以 YUI animation 動態變更計算後的色彩值就完成變化的部份。

為什麼影片周圍可以有柔邊的效果？事實上 Firefox 3.5 允許你將 SVG 遮罩特效套用到某個網頁元素上，在此我們先於同一網頁中定義 SVG 遮罩 (當然，也可以用另一個檔案來完成)，然後利用這樣的 CSS 規則即可：

#video {
    mask: url(index.html#m1);
}

這就是混合使用網際標準的有趣之處 :) 連影片都被當成網頁的一部份對待，不需要透過外掛就可以直接操作、與網頁其他部份互動。

顛覆網路 35 天 (2a): Firefox 3.5 與地理資訊揭露

2009-06-10T09:53:00.001+08:00

歡迎回到顛覆網路 35 天，今天 (其實是昨天晚上… 有時差) 的第一篇「Firefox 3.5 與地理位置資訊揭露」是我比較關心的議題、我會花較多力氣編譯全文 — 不過一如往常，請不要期待精準的翻譯，這也不是我的本意。

網路風行，也因此常有帶著電腦到處跑的機會。有時就是想找一下附近的餐廳，所以你打開網路要找… 且慢，我「現在」在哪裡？如果熟悉這附近也就算了，要是出門在外有時還真不確定自己現在正在何處。就算你知道自己所在位置好了，該怎麼找呢？打開 Google 地圖或 Y!生活家、選擇所在區域… 放大點、縮小點，輸入文字開始搜尋…

如果網路服務能自動判別我們的所在地，這一切會方便很多 — 再且慢，這可能嗎？當然可能，如果你曾出國使用自己的電腦，在設定不改的情況下造訪 google.com，很可能會被引導至該國語言的 Google 網頁。這是依據你的 IP 來判斷國別的方式，諸如此類的定位方法當然也還有 GPS 等更精準的東西。

取用地理資訊

目前 W3C 正在發展地理位置規格草案，而 Firefox 3.5 實作了這個 API、讓網際應用程式可以藉此 (在你的允許下) 得知你的地理位置、提供更好的服務。以 JavaScript 取得地理資訊很簡單：

function showPosition(position) {
    alert(position.coords.latitude + “ “ +
    position.coords.longitude);
}
 
navigator.geolocation.getCurrentPosition(showPosition);

呼叫後 Firefox 會詢問使用者是否願意提供個人地理位置資訊。

錯誤處理

取用地理資訊時有兩類錯誤要留心：

首先，使用者可能拒絕提供資訊、或甚至完全不回應。你可以在呼叫時便先行設定錯誤掌控函式，並設定等待回應的時限。

navigator.geolocation.getCurrentPosition(successCallback,
                                         errorCallback,
                                         {timeout:30000});

本例裡，使用者若拒絕請求，那麼就會呼叫 errorCallback 函式；若使用者超過 30 秒不回應，也會呼叫 errorCallback。

第二，使用者的地理位置可能隨時更改 (像是邊搭高鐵邊用 3G)，這時可以使用 watchPosition 來監看。

navigator.geolocation.watchPosition(showPosition);

在此例，每回地理資訊一有變動、就會呼叫 showPosition 函式。

當然你也可以定期呼叫 getCurrentPosition，不過基於節能減碳、我們建議你盡可能採用 watchPosition — 此例裡只有地理位置變動了以後才會呼叫 showPosition，瀏覽器回應速度會快些、而這對效能表現相對較差的行動裝置非常重要。

帽裡乾坤

方才提過、技術上來說要得知地理位置有幾種常見方法，像是 WiFi、IP、GPS 等。Firefox 3.5 目前使用 WiFi 跟 IP 位置來推測地理位置。

有些公司會開著車四處探索 WiFi 存取點，依據特定位置的 WiFi 存取點數量、訊號強弱紀錄等，就可以推測你的所在位置。而如果使用者不使用 WiFi，那就依據 IP 位置來反查、推測你的位置在哪裡。用 IP 推測的方式精確度自然不如 WiFi，不過在台灣是不是只能用 IP 推測啊…？有哪位大德知道哪間公司提供 WiFi 與地理位置對應的服務嗎？

瞎扯一下：話說上回我跟 othree 在大葉大學時以 3G 分別測試這個功能，othree (遠傳電信) 精準地測出他人在大葉，而我手上的 3G (中華電信) 卻說我人在台中，這差得真遠…

隱私問題？

Firefox 一直都很注重使用者個人資訊的隱私問題，在這邊你也可以有絕對自主權、決定是否揭露個人的地理位置。技術面上 Firefox 該做的做了，另外在道德面上 W3C 還起草了一份給網際服務供應商的行為準則建議：

只在必要時要求取用地理資訊。
取得的地理資訊僅用在使用者當時揭露時所進行的工作 (就是說，不要用在使用者沒有同意的地方)。
工作完成後應棄用原先取得的地理資訊，除非使用者表達願意讓你儲存資訊的意願。
必須善加保護使用者的地理資訊，不可為他人在無授權狀態下使用。
若儲存、紀錄了地理資訊，必須提供使用者更新或刪除的選項。
取得的地理資訊未經使用者同意不可轉發 (至別的主機、別的服務… etc.)，而轉發時為了資訊安全請用 HTTPS。
服務供應商應詳細說明為何取用地理資訊、用於何處、資訊保留時效、如何維護資安、資訊如何與其他服務共享、使用者如何存取刪除資訊等等。一旦有與上述各準則不同的處理方式，皆應於這類說明文件中詳細列出。

當然這是「建議」… 不過如同隱私政策一樣、我們也希望這變成道德上的業界標準。

特別注意

如方才所說，這個規格目前還是草案，日後可能還有些許變動。不過就目前所知、唯一會影響的就是 enableHighAccuracy：這可能會改名成像是 useLowPower 那類的名稱。Firefox 3.5 目前提供 enableHighAccuracy，但尚未實作其內容。往後若規格有所變動，可能會同時提供新舊兩版方便應用程式相容。

顛覆網路 35 天 (1): Canvas 與像素操作

2009-06-09T17:41:00.002+08:00

誠如我所說，我會在能力範圍裡大概翻譯一下顛覆網路 35 天的文章，加速大家吸收新知的速度 — 不過，依照往例，我只會簡譯或者換成自己的話描述，以便節省時間與精神。今天是第一天，首先與我們見面的是 pushing pixels with canvas 要點概述，詳細內容還是看一下原文吧、畢竟程式碼佔的篇幅很大。

Canvas 是 JavaScript 中用來「繪圖」的技術，可以在 HTML 網頁上動態繪製點陣圖。目前你已經可以畫些點、線、面 (像是矩型)那類的東西，不過修過資工系影像處理的你肯定還想對像素多動點手腳。在 Firefox 3.5 裡新增了 createImageData 等函式，你可以藉著這些函式操作像素，包括取得像素資料 (範圍內的像素色彩值陣列)、建立或更新像素資料等。這篇裡頭有兩個範例：

您也可以到 MDC 上面查閱更多資訊

是說主流瀏覽器還有誰不支援 Canvas？嗯… 總有一天的。

接著這個真的超級酷：content aware image resizing，內容感知式圖片縮小法。簡單說就是透過運算分析，在圖片縮小時把相對不重要的部份大幅「壓扁」，但重要的部份則盡可能力求保持原樣 —— 聽起來就很帥對吧？請留意範例圖裡的圖片高不變、寬度變窄但人物的部份變動不大！

這其實不是新技術，甚至開放源碼繪圖軟體 GIMP 還有相應的 plugin 可以用。不過拜前半段所提到的新 Canvasc 函式們 (再加上公開的演算法) 所賜，現在免外插模組、直接用 JavaScript 就可以動態做到這件事情了。一定要看看這個 Demo。

原文裡有描述這個演算法的原則，當然你也可以直接看 Demo 的程式範例。事實上整個 Demo 程式僅實作了一部份相關理論演算，不過至少可以讓我們看到更多可能性，或許以後你就不太需要擔心圖片縮小後美腿變成竹竿了 ;)

以上原文網址皆附於文章中，還請參考。我個人對第二個範例真的非常有感覺，期待明天的。