星期日, 九月 26, 2010

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

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

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

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

星期六, 九月 25, 2010

完美的 404

原文 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 頁的方法,我就不提了,建議你可以讀這些文章:

然而,我在此將針對大部分造成這種錯誤的原因,提出打造自訂 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 網頁的訪客按下「回報錯誤」鈕,接著把這些資訊存進資料庫裡。要求訪客手動回報可以減少雜音,確保你看到的都是最重要的錯誤連結。接著要怎麼處理這些錯誤連結,就看你了。

相關連結

想看上述建議實際運行的樣子,可以查閱下列放在 A List Apart 上的範例:

也可下載上面提的範例 404 網頁,將其依照需求修改。

星期三, 九月 22, 2010

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

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

  1. 升級時,將未經使用者明確授權即安裝的第三方附加元件(Plug-ins or so)停用,主要影響啟動效能。有點類似 IE9 Beta 啟動時提醒你某個附加元件太拖累的東西,但另外也在意「不經使用者授權即自行安裝」的元件(如 Skype、Norton 軟體、Java 等)。
  2. 自動清理重複的附加元件,又是 Java,似乎 Microsoft DRM 也會重複灌版本號碼不同、但只是升級而已的套件。這應該是沒有好好指定套件 ID 的緣故。
  3. Windows 下視窗最大化時,分頁與標題列同置一行,就像 Google Chrome 一樣,增加瀏覽空間。這好像有人在試了。
  4. 在 Windows 上啟動時,螢幕繪製的狀況比 Fx 3.6 慘
  5. 更聰明的網址自動補完。有人動手了。
  6. 即便是 HTTPS 的網站,當掉後也要能自動復原。似乎是政策問題多過實做。
  7. 合併停止與重新讀取鈕後,不應使停止鈕出現「停用」狀態

    萬一頁面讀得很慢,使用者想按下「停止」鈕的時候會發生兩種狀況:

    • 順利停止網頁讀取,或是
    • 網頁在按下前的一瞬間已經讀取完畢、按鈕變成「重新讀取」,所以使用者按到的是「重新讀取」鈕、暴怒。

    為了防止這種情形發生,目前的作法是在網頁讀取完畢後仍暫時顯示「停止」鈕、但採停用狀態以防止誤觸。雖然實際上對網頁讀取速度沒有影響,但多那半秒的「停止」模樣可能會讓使用者以為網頁讀取變慢了。

    又,你覺得 Firefox「抄」其他瀏覽器嗎?這個 Bug 有 Google Chrome 的開發者上去分享 Chrome 設計的理由 XD 且不論「原創」所指為何,請搞清楚在這個世界裡的共創理念。(這個 bug 有人動手了)

  8. 網址列中,網域部份加重顯示,其實我記得以前 Firefox 曾經有過測試版是如此作用的,但沒加到最後版本的原因不明。有人動手了。
  9. 強化拖曳分頁時的視覺提示,MozTW 討論區之前有人提過,目前沒人動手,我也很想要這個功能 :/
  10. 減弱搜尋欄圖示的干擾,或者更準確點描述問題:「那個區域現在已經有星星、RSS icon、重讀、停止等各種顏色的圖示會出現,搜尋引擎的圖示則是另一種本身就五顏六色的干擾源」。不過個人覺得,現在 Fx 的搜尋欄已經是各家有此功能的瀏覽器中最好的一種了(我尤其不喜歡 Safari 的方式,原因同 Comment 5),接下來可以走的方向應該就只有與位址列合併了吧?
  11. 在選單中增加縮放控制的介面元素,類似 Google Chrome 現在的作法。討論中,我不是很喜歡 Google Chrome 7 dev 實做選單中多重控制項的方法,尤其 keyboard inaccessible、and no tooltips 這些小細節。
  12. 「應用程式分頁」中的外部連結,應該開在新分頁裡。可以來討論「什麼叫做外部連結」 XD
  13. 應用程式分頁隱藏瀏覽工具列等元素。好處:很多 Web 應用程式確實不需要瀏覽器內建的導覽列。 壞處:但,有的需要啊!又,「外部連結」的 Bug 裡有人提到,這會讓辨識釣魚網站變得比較困難。應該是不用期待 Firefox 4 會有這個。
  14. 多重選取分頁,又一個邁向提姆所謂「Firefox OS」的東西?

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

New Ubuntu, count down!

The next version of Ubuntu is coming soon

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

星期三, 九月 08, 2010

失敗的 SEO 例子 (update)

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

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

Google 結果

幾點筆記:

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

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

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

全部換正版!響應 BSA!