BobChao the Blogger: 9月 2010

2010/9/26

紀錄片從業人員職業工會 CC 介紹

標籤：生活記事, 簡報

需要投影片的話請到簡報室下載 :)

時間剛剛好 55 分鐘，不過只留 5 分鐘發問看來是太少。這次算是整合了幾次修改的投影片，以後若還有機會講 CC 應該都會用這份了吧？

Creative Commons 介紹

View more presentations from Bob Chao.

這也是第一次使用 Jouston 給我的簡報筆，使用上還不太熟練，要多練習。

2010/9/25

完美的 404

標籤：翻譯, userexperience, WWW

原文 The Perfect 404 by Ian Lloyd

Translated with the permission of A List Apart Magazine and the author[s]. 授權採 CC:BY-NC-SA 3.0（因為 ALA 不給商業利用。）

Bob: 我譯得很隨性，就原有的句子的意思、在描述上自由發揮了。也就是說，我不會變更作者的意思，但如果發現原意用中文不好體會，就會改用容易體會的方法換句話說。所以總之，相當程度上，我在改寫。但，翻譯原本就是改寫了，我並不真的是信達雅的信徒。

又，原文程式碼部份採「對讀者友善」的方式用了折行標記等東西，我這邊改採「對剪貼簿友善」的作法、把原文折行的部份又併回一行了。這樣比較好複製，至於如果你要印出來… well…

如果您發現哪些部份翻譯有誤，請留言指教。

糟，好像有什麼出了問題，但你也不確定是什麼 — 是你的問題、還是網站的問題？接下來又該怎麼辦？

歡迎來到 404 錯誤頁的世界。你直接輸入網址、也或許是點了某個已經年久失修的連結，向伺服器要求一份網頁，隨即發現自己身處虛擬世界中的飄渺之處。對訪客好一點的網站還會提供幫助，但大部分則就什麼事也不做、單純仰賴瀏覽器內建的功能向訪客描述目前狀況。我們當然能做得更好點，不是嗎？

對於在伺服器上設定自訂 404 頁的方法，我就不提了，建議你可以讀這些文章：

Creating a Custom 404 Error Page (4 Guys From Rolla)
Creating Custom Error Messages in Apache (4WebHelp)

然而，我在此將針對大部分造成這種錯誤的原因，提出打造自訂 404 網頁的策略建議。

要開始著手設計，我們得先看看大眾發現自己身處 404 網頁的常見理由：

打錯網址、書籤過期未更新等
搜尋引擎連往過期的網址
網站管理員沒發現的站內錯誤連結

這些理由都會前往同樣的地方，但處理的方法卻應該稍有不同 — 404 網頁必須針對不同狀況分別量身訂作。有些小技巧可以用來處理上述的情境，但我的第一個建議卻非常簡單…

不要指責

無論如何，都要告知訪客情況有誤，但不要指責訪客、就算你知道真的是他們的錯也一樣！這邊可用「可能」、「或許」等詞彙，別弄壞與網站訪客的關係，一旦搞砸、搞不好再也沒機會彌補了。

404 必備

除了「出錯了」的文字外，請確保錯誤訊息網頁上包含這些：

通往網站首頁及網站地圖（若有此頁）的連結：最容易解放訪客的方法，這個不花腦筋的作法用不到什麼奇技淫巧。
搜尋欄位：如果你的網站有搜尋功能，就放到 404 網頁上。若網站沒有搜尋功能、又常常出現 404 問題，那麼或許該弄一個來。
清楚簡約的外觀：避免把網站的標準導覽元素都放到 404 網頁上。一方面你應該避免讓使用者分心，二方面在 404 網頁上放導覽元素很可能造成更新不同步的問題。你的 404 網頁若非以程式動態更新，則更新狀況很容易就落後網站其他頁面。連 404 網頁上的導覽元素都失效絕對是你最不想發生的事，尷尬！

也請避免使用術語。我的意思是，因為我們算一掛的，所以在這裡可以討論 404；不過 60 歲的阿姨逛編織網站碰上錯誤連結，來到這頁後可能就完全不瞭「404」是什麼東西。如果你想使用「Error 404」這樣的詞，那便隱晦點 — 例如放在頁尾，留它向看得懂這些電腦黑話的網路咖打聲招呼。

接著，來看看怎麼打造 404 網頁可以讓它幫你一把、而非推你一下。

聰明點

到此，我得先說清楚，這邊的技巧需要用上不少 JavaScript（你不見得可以用伺服端的程式來解決這些問題，這端視伺服器設定）。所以，記得使用 <noscript> 標籤，讓關掉 JavaScript 的訪客也能獲得妥當的訊息。如果你能用伺服端程式，那便最好，可以無視瀏覽器跟網頁無障礙等等的問題，下面這些程式碼就斟酌參考。

首先，要設定一些變數：

var strReferrer=document.referrer.toLowerCase();
var blnSearchReferral = false;
var blnInsiteReferral = false;
var str="";
var strSite = "";

接著，要拿這些變數做什麼呢？

打錯的網址

網址打錯，或從過期書籤來的訪客不會有 HTTP referrer，所以要處理這種狀況的程式如下：

if (strReferrer.length==0)
{
  str+='我們猜想下列連結對您可能有用：<\/p>';
  str+='<a href="\/home.php"><img src="/images/home.gif" alt="Home Page" width="100" height="30"\/> <\/a>';
  str+='<a href="\/site-map.php"><img src="/images/site-map.gif" alt="Site Map" width="100" height="30" \/><\/a>';
  str+='<hr \/>';
  str+='<p><strong>您找不到這個網頁，或許是因為：<\/strong><\/p>';
  str+='<ol type="a">';
  str+=' <li><strong>書籤\/我的最愛過期了<\/strong><\/li>';
  str+=' <li>搜尋引擎上<strong>關於我們網站的連結過期了</strong><\/li>';
  str+=' <li><strong>打錯網址</strong><\/li>';
  str+='<\/ol>';
  document.write(str);
}

搜尋引擎連結過期

如果訪客有 referrer 值，我們可以先辨識出幾個特定的搜尋引擎（你可以依據自己的喜好調整辨識清單）。辨識後，我們拆解搜尋參數，看是否有與此次搜尋相關的頁面：

if (strReferrer.length!=0)
  {
  if ((strReferrer.indexOf(".looksmart.co")>0)||
  (strReferrer.indexOf(".ifind.freeserve")>0)||
  (strReferrer.indexOf(".ask.co")>0)||
  (strReferrer.indexOf("google.co")>0)||
  (strReferrer.indexOf("altavista.co")>0)||
  (strReferrer.indexOf("msn.co")>0)||
  (strReferrer.indexOf("yahoo.co")>0))
  {
  blnSearchReferral=true;
  //取得網址 — 切到第一個斜線為止
  var arrSite=strReferrer.split("/");
  //找出搜尋字串
  var arrParams=strReferrer.split("?"); 
  var strSearchTerms = arrParams[1];
  arrParams=strSearchTerms.split("&");
 
  strSite=arrSite[2];
  var sQryStr="";
 
  //定義不同引擎查詢關鍵字的方式
  var arrQueryStrings = new Array();
  arrQueryStrings[0]="q=";  //google, altavista, msn
  arrQueryStrings[1]="p=";  //yahoo
  arrQueryStrings[2]="ask=";  //ask jeeves
  arrQueryStrings[3]="key=";  //looksmart
 
  for (i=0;i<arrParams.length;i++)
  //跑 URL 中所有的參數
    {
    for (q=0;q<arrQueryStrings.length;q++)
    {
    sQryStr = arrQueryStrings[q];
    if (arrParams[i].indexOf(sQryStr)==0)
      {//找到搜尋關鍵字了！
      strSearchTerms = arrParams[i];
      strSearchTerms = strSearchTerms.split(sQryStr);
      strSearchTerms = strSearchTerms[1];
      strSearchTerms = strSearchTerms.replace("+", " ");
      }
    }
    }
  //告知訪客網站有誤，以及原先搜尋的詞彙
  document.write ("<p>您先前在 <a href='" + strReferrer + "' target='_blank'>" + strSite + "<\/a> <\/strong> 搜尋 「<strong>" + strSearchTerms + "<\/strong>」。然而，這個搜尋引擎可能有段時間沒來了，你找到的連結已經過期。<\/p><h2>放心，一切都好<\/h2><p>我們猜想下列連結對您可能有用：<\/p>");

接著，針對不想流失訪客的特定來源關鍵字詞，可以加上幾行識別程式。舉例來說，假如搜尋「電器」跟「設備」時你的網站排得蠻前面、但相關的網頁卻搬家了，這時你當然不想流失那些 Google 來的訪客，對吧？

if (
  (strSearchTerms.indexOf("widgets")>=0)||
  (strSearchTerms.indexOf("electronics")>=0)
  )
    {
    document.write("<a href='\/cool-widgets.htm'>我的電器設備大展<\/a><br \/>");
    }
  }
  }

當然，如果你的網站有站內搜尋功能，現在可以拿這個搜尋關鍵字來搜尋一次。站內搜尋或許能自動產生相同搜尋字詞的網頁連結，無須動用上述的工人智慧。但無論如何，建議採用工人智慧的方法，不然可能只是讓訪客多增加一次找不到網頁的機會而已。

站內失效連結

從搜尋引擎來的迷途羔羊們都關照過了，接下來就必須對付 referrer 不是從搜尋引擎來（或至少不是從你挑的那幾個引擎來）的情況。我們得再增加些條件：

if (!blnSearchReferral)
  {
  strSite = strReferrer;
  strSite = strSite.split("/");
  strSite = strSite[2];
  document.write("<p>從 <strong><a href='" + strReferrer + "'target='_blank'>" + strSite + "</a></strong> 來的這一頁已經不存在消失。<br/>建議您試試看下列連結：</p>");
  }

接著提供的連結就是首頁、網站地圖等等。

那如果你自己的網站有問題呢？

即使發現 referrer 是從自己的網站來，你也不好在 404 網頁上單單說「本網站有錯誤連結」。在這種情形下，你可能需要調整字詞，承認犯了小錯：

blnInsiteReferral =((strReferrer.indexOf("http://www.mysite.co.uk")>=0)||
    (strReferrer.indexOf("http://www.myothersite.com")>=0))
  if (blnInsiteReferral)
    {
    document.write("<p>這是我們的疏失！對您說聲抱歉，我們會揪出負責這條連結的人，在他修完錯誤後給他二十鞭。<\/p>");
    }

修正錯誤

這下我們已經提供逃離 404 黑洞的路，但真的修好了什麼東西嗎？沒有。既然已經知道訪客索求的文件網址及其來源（如果有來源），那確實還有一些事情可作。我們可以自動、或要求碰上 404 網頁的訪客按下「回報錯誤」鈕，接著把這些資訊存進資料庫裡。要求訪客手動回報可以減少雜音，確保你看到的都是最重要的錯誤連結。接著要怎麼處理這些錯誤連結，就看你了。

2010/9/22

24 個你可以提昇 Firefox 使用體驗的機會

標籤：筆記, 開放源碼, Mozilla, MozTW, userexperience

Firefox 使用體驗團隊的頭兒 Alexander Limi 貼了篇文，列了 24 + 9 個 UX 團隊希望能在 Firefox 4 解決的問題。這些問題，都（還）不會阻擋 Firefox 4 釋出，卻也不單是修圖、微調那類的東西。希望能人異士出手相助，幫助大家提昇使用體驗，或者最少，如果你覺得這問題很重要，到 Bugzilla 提出 block 的建議。以下依據優先序筆記一下前幾項的內容：

升級時，將未經使用者明確授權即安裝的第三方附加元件（Plug-ins or so）停用，主要影響啟動效能。有點類似 IE9 Beta 啟動時提醒你某個附加元件太拖累的東西，但另外也在意「不經使用者授權即自行安裝」的元件（如 Skype、Norton 軟體、Java 等）。
自動清理重複的附加元件，又是 Java，似乎 Microsoft DRM 也會重複灌版本號碼不同、但只是升級而已的套件。這應該是沒有好好指定套件 ID 的緣故。
Windows 下視窗最大化時，分頁與標題列同置一行，就像 Google Chrome 一樣，增加瀏覽空間。這好像有人在試了。
在 Windows 上啟動時，螢幕繪製的狀況比 Fx 3.6 慘。
更聰明的網址自動補完。有人動手了。
即便是 HTTPS 的網站，當掉後也要能自動復原。似乎是政策問題多過實做。
合併停止與重新讀取鈕後，不應使停止鈕出現「停用」狀態。
萬一頁面讀得很慢，使用者想按下「停止」鈕的時候會發生兩種狀況：
- 順利停止網頁讀取，或是
- 網頁在按下前的一瞬間已經讀取完畢、按鈕變成「重新讀取」，所以使用者按到的是「重新讀取」鈕、暴怒。
為了防止這種情形發生，目前的作法是在網頁讀取完畢後仍暫時顯示「停止」鈕、但採停用狀態以防止誤觸。雖然實際上對網頁讀取速度沒有影響，但多那半秒的「停止」模樣可能會讓使用者以為網頁讀取變慢了。
又，你覺得 Firefox「抄」其他瀏覽器嗎？這個 Bug 有 Google Chrome 的開發者上去分享 Chrome 設計的理由 XD 且不論「原創」所指為何，請搞清楚在這個世界裡的共創理念。（這個 bug 有人動手了）
網址列中，網域部份加重顯示，其實我記得以前 Firefox 曾經有過測試版是如此作用的，但沒加到最後版本的原因不明。有人動手了。
強化拖曳分頁時的視覺提示，MozTW 討論區之前有人提過，目前沒人動手，我也很想要這個功能 :/
減弱搜尋欄圖示的干擾，或者更準確點描述問題：「那個區域現在已經有星星、RSS icon、重讀、停止等各種顏色的圖示會出現，搜尋引擎的圖示則是另一種本身就五顏六色的干擾源」。不過個人覺得，現在 Fx 的搜尋欄已經是各家有此功能的瀏覽器中最好的一種了（我尤其不喜歡 Safari 的方式，原因同 Comment 5），接下來可以走的方向應該就只有與位址列合併了吧？
在選單中增加縮放控制的介面元素，類似 Google Chrome 現在的作法。討論中，我不是很喜歡 Google Chrome 7 dev 實做選單中多重控制項的方法，尤其 keyboard inaccessible、and no tooltips 這些小細節。
「應用程式分頁」中的外部連結，應該開在新分頁裡。可以來討論「什麼叫做外部連結」 XD
應用程式分頁隱藏瀏覽工具列等元素。好處：很多 Web 應用程式確實不需要瀏覽器內建的導覽列。壞處：但，有的需要啊！又，「外部連結」的 Bug 裡有人提到，這會讓辨識釣魚網站變得比較困難。應該是不用期待 Firefox 4 會有這個。
多重選取分頁，又一個邁向提姆所謂「Firefox OS」的東西？

因為我也沒有每個 bug 都點進去看，所以先紀錄到這裡吧。有興趣的可以去看一下原文。其實整份清單還很長，如果你對相關的問題有興趣，可常回 Mozilla Wiki 上參考完整清單。

New Ubuntu, count down!

標籤：開放源碼

我特別貼了，只是因為它上面有兔子！真是有過節氣氛！

2010/9/8

失敗的 SEO 例子 (update)

標籤：行銷, 社群, 開放源碼

可惜當時忘了先查一下，應該先了解是什麼時候開始阿貴老師的排名跑到第一個，這樣才有個比較基準。

Yahoo!結果 (我想這是他們的主打)

Google 結果

幾點筆記：

正版 = 購買，這是 BSA 希望你記住的思維，不過對於自由軟體使用者來說倒是笑話了。
但其實 BSA 就是要大眾這麼想，他們並不是笨到連這點都不清楚，事實上網站也列得很詳細。不過，商業軟體組織會這樣，很自然，也沒錯。反應著 BSA 的存在目的就是協助商業公司遊說政府、遏止無授權的軟體流竄。
「全部換正版」應該是個很容易被攻擊的關鍵詞，因為平常實在不多人用，相對來說稍微對搜尋引擎有點了解、就可以輕鬆爬到比官方網站還前面的排名，況且...
況且，BSA 這個活動的網站是全 Flash、看起來也沒有提供 accessibility 功能，所以搜尋引擎都討厭他。你看連畫面上僅有的那幾筆都是新聞頁面，第一頁除了 paid result 外也沒有活動網站連結。

不過這個活動有沒有成功？畢竟，他們就是要喊出來而已。或許這個結果對他們來說，是能接受的結果。我不相信不能接受還用全 Flash, inaccessible 的網站 orz 連 meta tag 跟網站標題都沒有活動關鍵字，真是服了他。說到底，「100 萬」和馬如龍（搭上艋舺的風潮）確實是賺了不少新聞版面（且不論有多少是購買的，我們不會知道）。

BTW 我不知道這網站是誰做的，我寫這篇跟目前任職的公司毫無關係。我都超支持 BSA 的，活動還沒開始就衝了：

BobChao the Blogger