reCaptcha 越來越令人討厭,我們有什麼替代品?

Google 的 reCaptcha 是網站用來辨別訪客是否真人的工具,我在多年前曾經推介過它,認為 reCaptcha 既能有效防止濫發文章,又容易安裝,還能對公益事業作出貢獻。Google 在 2009 年收購了 reCaptcha 後大力推廣,現已成為最普遍使用的 Captcha 工具。很可惜 reCaptcha 現在變得越來越難辨認,網上不少人高呼「reCaptcha 令人討厭」,也有人認為 reCaptcha 令網站的使用率下降,reCaptcha 原來的公益成份在被 Google 收購後也變了質,現在解讀 reCaptcha 等於無償替 Google 當人肉 OCR,包括辨別 Google 街景圖中的文字。反對 reCaptcha 的氣氛在用戶和網站站長之間迅速蔓延,大家紛紛尋求 reCaptcha 的替代品。

繼續閱讀

網站開發人員必備的 20 張速記片 (cheat sheet)

網站開發人員每天需要周旋於 PHP (或其他伺服器端編程語言)、SQL、JavaScript、HTML、CSS、數據庫預存程序及一些不同用途的開發架構之間,總會有「執筆忘字」的時候,這時你可能會向 Google 或編程書籍求教。不過,網上不少好心人替我們便製了一些「速記片」(cheat sheet),方便我們隨時查閱,Anson Cheung 在他的網誌蒐羅了 20 張網站開發人員必備的速記片。

繼續閱讀

20 個線上測試網站速度的工具

人人都知道上網的人對於網站的速度耐性有限,所以你的網站的效能和顯示速度,是網站的可用性,甚至成功與否的關鍵。Jacob Gube 在他的網誌分享了 20 個線上測試網站速度的工具,可以用來測試網站的速度,和找出哪裏是效能的瓶頸,他建議你同時運用其中數個工具 (沒有一個工具具備所有功能),作為恆常性的測試手段。

繼續閱讀

幾件有關 favicon 你必須知道的事

甚麼是 favicon?

Favicon 是 favorite icon 的簡稱,幾乎所有專業網站都有 favicon,它是一個由不同解像度的圖標結合成的檔案,例如它可能結合了一個 16×16 和一個 32×32 的 .bmp 檔案於一身,Favicon 的檔案延伸名稱是 .ico。在大部分的瀏覽器,這個圖標會在網址旁邊或者在書籤頁裏面顯示。通常 favicon 反映了該網站的設計或者有關機構的商標。

甚麼是 .ico 檔案?

Favicon 是一個由不同解像度的圖標結合成的檔案,內含的圖標有些是 16×16,有些是 32×32,有些只有 16 種顏色,有些有 256 種顏色,瀏覽器或其他使用 favicon 的系統會根據當前的需要,選擇最適合的解像度和顏色數量的版本來顯示,倘若沒有完全吻合要求的版本,它們可能要把圖表拉大、縮小、降低顏色的數量等等,這 些操作可能會使圖標的素質變得不理想。

繼續閱讀

助你節省油墨削減成本的 Ecofont

一間荷蘭營銷公司 Sprang 想出了一個節省打印墨水的聰明方法:在字體上打孔!他們新的 EcoFont字體在每一個筆畫上打上有如瑞士奶酪般的孔洞,減少每一個字母的印刷面積,從而減低印刷時所消耗的油墨,Sprang 公開這款字體讓大家免費下載。據官方網站說,相比傳統的字體,這款字體平均可節省 20% 墨水。Sprang 在開發這個字體的時候,目標是在不犧牲可讀型的情況下,盡力降低字體的印刷面積,在嘗試過多種不同的方法後,最後他們採用圓形孔洞的形式,認為字體的基本 外型必須保持完整,才能保持字體的可讀性。使用 EcoFont 不單因為節省墨水而節省金錢,而且有助於保護環境,減少浪費。

繼續閱讀

為你的網站制定備份策略

最近幾天接二連三有知名網站遭黑客入侵,包括討論區系統 phpBB 的官方網站(phpBB 仍然是安全的,漏洞出在網站上另一個應用系統)及網上書籤網站 Ma.gnolia,網站被入侵已經不是新聞,很多被入侵的系統內的用戶資料被盜取,例如網上求職者網站 Monster.com 上星期被入侵後,數以十萬計的求職者個人資料被盜;有些網站的資料被抹去而無法復原,例如 Ma.gnolia 便承認他們無法復原用戶的書籤,唯有透過網上其他資源盡力恢復用戶的公開資料,其中包括 Google 搜尋器的緩存影像。數據丟失固然嚴重,對網站聲譽和用戶信心的打擊更是無法彌補。 繼續閱讀

「確定/取消」還是「取消/確定」?

我們在設計用戶介面時經常會遇到一些細小、對易用程度未必有很大影響的問題,其中一個就是對話框中的按鈕次序:應該「確定/取消」還是「取消/確定」?用戶介面專家 Jakob Nielsen 分析了這個問題,他的建議是:跟隨平台的一般做法,比優化介面更重要。

Jakob Nielsen 認為兩者都是合理的選擇,兩者都有支持者:

  • 「確定」先行符合語文的自然閱讀方向,中文、英文和很多語言都是從左到右閱讀,很多按鈕組合例如「是/否」、「前一頁/下一頁」都是按一個從左到右 的自然進程,所以我們應該按照閱讀的邏輯順序排列成「確定/取消」。此外,假設用戶選擇「確定」的機率比「取消」高,把「確定」放在前面可以讓那些主要用 鍵盤瀏覽的用戶少按一下 TAB 鍵便到達他們的首選按鈕。
  • 把「確定」放在後面可以改善流程,因為這是對話框的自然結束。此外,正如「前一頁/下一頁」的情況,「確定」是讓用戶繼續下一步,「取消」是退回一步,所以「確定」應該放在「下一頁」同一個位置,即是在右邊。
  • 繼續閱讀

    靠右對齊的導航菜單減慢閱讀速度

    網頁的導航菜單 (navigation menu) 的設計有甚麼要訣?有名的網頁介面顧問 Jakob Nielsen 的研究發現,文字靠右對齊的菜單令用戶讀起來更容易,除此以外,他還有幾項有關導航菜單的設計指引,見解獨到精闢,值得我們參考。

    Jakob 表示,從「眼睛追蹤」的研究知道,用戶的眼睛往往迅速地沿著菜單的左手邊向下移動,只有當最左邊的一個或兩個字詞吸引了他們的注意,他們才會閱讀菜單項目的其餘部分。

    繼續閱讀

    Yahoo! 專家告訴你怎樣為網站加速

    Yahoo! 的首席網站優化工程師 Steve Souders 從去年三月至九月發表了一系列優化網站的 14 項原則性建議,他和他的團隊研究後發現,下載一頁網頁的時間,80% 是花在瀏覽器的工作上,這些工作其實可以透過簡單的優化來刪除掉,從而大幅提高網站的效率,我們不妨看一看這位專家給我什麼建議。

  • 儘量減少發出 HTTP 請求:網頁上各式各樣的 JavaScript、CSS、圖像、Flash 等佔去了瀏覽器大部分的工作,所以減少網頁中需要下載的元件,從而減少發出 HTTP 請求,是優化網站的最重要一步。方法是合拼多個 JavaScript 和 CSS 檔案,利用「CSS 精靈」技術等。
  • 把內容分散到不同的伺服器:把所有內容從一個伺服器送出,顯然會做成瓶頸效應,既加重伺服器的負擔,也增加伺服 器周邊網絡的負擔,對於大型的網站最理想的作法是在世界各地設立區域性的伺服器,減少網絡擠塞現象,至於較小型的公司則可以光顧商業性的「內容傳送網絡」 服務供應商。更小型甚至個人網站又如何呢?可以嘗試把靜態的內容分離出來,從應用伺服器移到另一台伺服器。
  • 每一項內容都註明到期日期:為了避免訪客經常重複下載網站內不常改動的內容,我們應該為每一項內容註明到期日期,瀏覽器會把未過期的內容放在緩存區,節省了不必要的 HTTP 請求。圖像是最值得使用這個技巧的內容,不過其他內容包括 JavaScript、CSS、Flash 等在可能的情況下也應該盡量使用。
  • 繼續閱讀

    防止濫發電郵或文章的線上工具 reCAPTCHA

    曾經管理網站,特別是論壇、網誌之類容許訪客寫文章的網站,一定見識過濫發文章/濫發電郵的威力,所以很多網站管理員都會安裝/啟動一個稱為 Captcha 的驗證系統,當訪客貼文章的時候,要從一個圖像中辨認出其中的文字然後連同文章一拼呈交,這些圖像都是隨機產生、充滿訊燥、字體故意被扭曲的圖像,只有人 類才有能力正確辨識,這樣便可以杜絕網絡上的壞蛋使用機器人大量貼出文章。

    繼續閱讀

    謹慎使用下拉選單

    Jakob Nielsen 有一篇文章討論下拉選單作為用戶介面應注意的地方,文章寫於 2000 年,最近他針對滾輪滑鼠對下拉選單使用性的影響,補強了這一篇文章,對用戶介面有興趣的朋友,這是一篇不可多得的好文。

    Jakob Nielsen 認同下拉選單是網頁設計中一個很有用的工具,可是由於設計人員對它的濫用和誤用,它有限的互動性經常引起使用性的問題,有時甚至對用戶做成混亂。以下是下拉選單經常出現的地方:

    繼續閱讀

    是時候放棄 Transitional DOCTYPES 了

    Jack PickardAccessites.org 發表了一篇文章,建議大家以後在 HTML 中放棄使用 Transitional DOCTYPES。

    HTML 的第一行是用來表示所使用的 HTML 版本,使用 Strict DTD 表示檔案中沒有「不建議使用」的 element 和 attribute,使用 Transitional DTD 表示裏面含有這些 element 或 attribute。對於一直有人倡議推廣 Strict DTD,部分人的回應是:「這是我的網站,我喜歡怎樣便怎樣。」

    Jack 告訴我們不再使用 Transitional DTD 的理由:

    繼續閱讀

    教學文件:利用 DHTML 製作一個裁剪圖像的介面

    網上有很多圖像處理、相簿管理的網上應用系統,容許我們把大圖像裁剪為較小的圖像,但是用戶必須輸入裁剪框的座標和大小,對一般人來說顯然十分困 難,Dave Dash 在 Spindrop 發表了一篇教學文件,指導我們怎樣利用 DHTML(JavaScript + CSS + HTML)來製作一個靈活易用的圖像裁剪介面。

    在學習前不防先看看 Dave 的示範

    Dave 這個示範的靈感其實來自蘋果電腦中地址簿的一項功能,Dave 認為這是他見過最簡潔易用的圖像裁剪介面,所以利用它作為設計藍本製做了這個 DHTML 教學文件。這個示範用 PHP 在 Symfony(一個 PHP 開發架構)上開發,不過你們即使沒有安裝 Symfony 也一樣可以學習其中的技巧,唯一必需的是 PHP。

    繼續閱讀

    恰當地使用 Flash

    在網站設計者的社區,Flash 一直是一個很具爭議性的話題,有些人認為 Flash 補充了 HTML 在互動方面的不足,使網頁更生動,提高了上網的趣味,但是有些人卻認為 Flash 屬於可有可無的花招,在某些情況下它反而成為使用者的障礙。

    Peter Seebach 在 IBM developerWorks 上發表了他對網頁上使用 Flash 的意見,Peter 在肯定 Flash 的價值之餘,也指出在大多數的情況下 Flash 都被用在不恰當的場合,他還提供了一些使用 Flash 的大原則給讀者參考。 

    繼續閱讀

    把文字大小的控制權還給用戶吧

    Jakob Nielsen 是網上知名的網頁設計權威,他主持的 useit.com 被視為其中一個對網站/網頁設計理念影響最大的網站,這個網站在 Google 的頁面排名更是同類網站的表表者,網站內有關網頁設計的文章,全世界的網站開發者都視為金科玉律。

    我偶然翻閱了 Jakob 在 2002 年寫的一篇文章「把文字大小的控制權還給用戶吧」,雖然是四年前的作品,裏面對瀏覽器的描述可能已經過時,但是對設計師有關網頁字體的忠告,卻歷久彌新。

    繼續閱讀

    如何編寫動態網頁:結合 HTML、JavaScript 和 CSS 的範例

    IBM developWork 有一連兩篇的文章介紹如何編寫動態網頁,內文舉出了幾個常見的例子,包含詳細的說明和原始碼,對於希望令自己編寫的網頁有更多互動效果、更多姿多采,卻對於 JavaScript、CSS 等不甚了了的人來說,這是一份不錯的教學文件。

    這份文件介紹以下六種動態網頁效果:矩形彈出視窗、tooltip、隱形/顯示段落、分頁、統計圖表等。

    矩形彈出視窗

    DHTML 矩形彈出視窗

    tooltip

    繼續閱讀

    搜尋引擎編索引的極限:你的文章應該有多長?

    網站的開發人員,特別是商業網站,對於如何針對搜尋引擎進行優化,使自己的網頁能夠在搜尋的結果中排得較為前列的位置,都進行過不少研究,也有無數 針對「搜尋引擎優化(Search Engine Optimization, SEO)」的文章發表過,指導大家如何令搜尋引擎重視自己的網頁。

    不過一直以來似乎還沒有人研究過搜尋引擎是否保證把頁面上所有文字編列索引?曾經有人懷疑,搜尋引擎視太短的頁面為沒有實質內容而予以忽略,但是太 長的頁面則只會截取一部份編列索引,其餘的部分會是為內容重複和關鍵字重疊而予以忽略。即是說頁面太短固然不行,根本進入不了搜尋器的數據庫,太長則屬浪 費,若果你有一些很精闢的關鍵字在頁面的後半部才出現,即使有用戶用這個關鍵字進行搜索也不會找到你的頁面。

    繼續閱讀

    document.onload 完全破解

    Dean Edwards 研究 document.onload 的缺點與及解決方法已經一段時間,現在他終於提出了一個跨瀏覽器而又簡潔的終極解決方案

    事情的原委是這樣的:很多開發人員使用 document.onload 來啟動 JavaScript 進行一些網頁效果的初始化工作,例如動畫菜單、Ajax 應用程式等,但是 document.onload 只有當網頁的所有內容,包括圖像、JavaScript、動畫、影音檔等全部下載後才會被觸發,倘若這些檔案容量很大,或者儲存在一個不受你操控的伺服器 上,網頁上的效果很可能被延遲啟動,甚至完全不能啟動。

    繼續閱讀