別猜了!! 公說公有理，婆說婆有理。讓使用者的實際體驗跟統計結果來告訴你吧。a/b testing 的作法是: 1.輪撥這些選項 2. 設定追蹤點(goal) 3. 一段時間後，觀察哪個選項達成的 goal 比較多。

而 A/B testing 工具可以幫助你很容易做好這些事情: 1. 針對不同人提供不同選項 2. 但讓同一個人看到的都是同一個選項(這是一個重點，不然測試就不準了)，例如透過 cookie 或使用者ID 3. 提供後台報表，並提供分析告訴你這些數據是否有統計學上的顯著差異 4. 方便安裝及使用 5. 夠快，不會對 production site 造成效能負擔

對 Rails 來說，目前有兩套可以考慮使用: A/Bingo 和 Vanity。A/Bingo 很容易安裝使用，功能比較陽春，使用 ActiveRecord 搭配快取(memcached) 來記錄資料。Vanity 功能比較豐富，願景也比較大，提倡了一整套的 Experiment Driven Development 開發方式。它使用了 Redis 來記錄資料。不過他的使用文件似乎沒有跟上程式的更新速度，所以不太好安裝，得去翻 source code。如果你現在就想試試，我會先推薦 A/Bingo 比較容易上手。

如果你不想改 server side 的程式(或是你是不會寫程式的行銷人員)，也可以透過 Google Website Optimizer 這套工具來做 a/b testing。Google 的方式就單純用 JavaScript 來記錄: 你先告訴 Google 你有哪幾種頁面，例如 Original page、Variation page 1、Variation page 2 三種選項，接著提供 Conversion page 是指達成 goal 的頁面，然後將 Google 會給你 control script 貼到 Original page 去(讓使用者可以輪撥到其他頁面)，以及 tracking script 貼到各個頁面。

最後，A/B Testing 當然也不是萬能的: Why A/B testing of web design fails。

1. 視覺設計師 (Visual Designer 全職) 一名
2. 前端技術工程師 (Intermediate Frontend Engineer 全職) 一名
3. 鐵道程式設計師（Ruby on Rails Developer 全職） 一名

詳細內容。

相對於 W3C DOM 跟 XMLHttpRequest，Events有更多的 Browser Wars 留下來的問題，有著 Microsoft 蓄意的不相容問題，你必須注意這些實做差異，有些解法甚至有些 tricky，而且必須 case by case，沒有泛用型的偵測法則，例如沒有簡單的 if (W3C model) {.. } else if ( Microsoft model ) { … } 可以用。

Events 可分成三種類型 1. 滑鼠事件 mouse 2. 鍵盤事件 keyboard 3. 界面事件 interface events (例如 form submit,readystatechange等)

click是唯一自動有 accessible 的mouse event，因為當鍵盤 focus 且按 Enter 時也會觸發。而其它mouse events必須手動再加對應的keyboard events，例如 mouseover 等同於 focus，mouseout等於blurred，但有些對應就難了，例如 mousemove (滑鼠移動一個1px就觸發一個事件，但要對應鍵盤就不行了)。因此在 DOM Scripting 這本書也建議(p.111)，設了 onclick 的就不要設定 onkeypress event了，因為 click 除了滑鼠，鍵盤也會有作用，多設 onkeypress 反而可能會有新麻煩。

另外一個 keyboard 的 accessability 重點是，可以被 keyboard focus 的元素只有 links,form fields,buttons 這四樣，這是個需要注意的事情，任何 keyboard-frientld event 或 script 都必須設定在這三種元素上面，例如在寫 mouseover 的鍵盤等價方案的時候，畢竟要可以被使用者按 tab 移動到，寫 event script 才有用…:p

Event-handler 註冊的四種方法:

1. inline ，例如直接在element中寫 onclick=”test()”  

2. traditional model，例如 x.onclick= test 

3. W3C model ，例如 x.addEventListener(‘click’,test,false) 或移除 x.removeEventListener(‘click’,test,false)

4. Microsoft model，例如 x.attachEvent(‘onclick’,test) 或移除 x.detachEvent(‘onclick’,test)

要為後兩者做一個跨瀏覽器的解法並不難，object detection 一下即可。

法一是 JavaScript亂入，不要用。

法二 traditional model 的問題是，無法連續為 x 掛載不同的事件，例如 x.onclick = test; x.onclick = test2 就只剩下 test2 了。因此需要再寫一個 function 包起來，如 x.onclick = function () { test(); test2(); }，比較不彈性一點，但如果你可以完整掌握 page 到底有哪些 script，作者建議你可以用 traditional model。

法三法四比較先進(?)是用 事件掛載的方式，讓各個 script 都不會互相影響到。不過有趣的是竟然無法得知 x 已經掛載多少 event handlers，而如果不知道掛載了什麼，就無法移除。

接著是 W3C model 和 Microsoft model 的兩個重大差異，Microsoft model 不支援 event capturing，只有 bubbling(請參考 O3noBLOG  addEventListener的第三個參數 ) 。另外就是 Microsoft model  把 event-handler function 當成一般 global function 來處理，也就是如果你用法四 attachEvent 來註冊事件時， event handler裡面的 this 指的是 window 而非發生事件的 object。(作者推薦 Dean Edward’s solution 可以fix)

event bubbling 能有什麼功效? 你可以非常有效率的只設定一個event handler到一個HTML element，然後就可以處理那個element裡面一整群的element，因為它會 bubbling 上去觸發。例如作者的 Usable Forms 的範例中，有132個 form fields，他不想每個都給他加上 event hander，這時就可以利用 event bubbling 在 document 加上 click event 即可，觸發任一個field都會 bubbling 上去到 document，然後在 event handler 中再來根據被觸發的 element 來決定做什麼動作。

在 event handler中，瀏覽器會自動產生一個 event object，W3C model 是根據第一個參數，Microsoft 則總是window.event，因此程式是

document.onclick = handleEvent;
function handleEvent(e) {
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
}

這個 event object 包含了觸發這個事件的 event type (即mouseover 或 keypress 等等)、觸發的 target element ( W3C叫 target, Microsoft叫 srcElement)、觸發時的滑鼠位置(跨瀏覽器處理很複雜，作者不建議去用。而且大部分的情況可以改用你觸發的element的相對位置來解決，第九章會詳述)、觸發時按下的滑鼠button跟鍵盤button 等等資訊。

注意到觸發事件的element跟 當初被定義 event handler 的 element 並不一定相同 (因為event bubbling)，因此 target element 並不一定等於 this。在 traditional跟W3C model中，this 指被定義event handler的 element。但如前所述，微軟的 this 指成 window，也就是如果你有用微軟 attachEvent 這個 this 等於沒什麼用。

看樣子用 evtTarget 好像比較好? 不過瀏覽器對於到底是 “哪個element” 觸發也有不同看法!! 所以尤其是碰到 mouseover,mouseout 你必須特別check抓到的 element是你要的。

所以結論是到底用那種啦? (跨平台 event 果然難搞) 如果你不用Microsoft model的 addEvent的話，而且要被觸發的element跟被定義的element是同一個的話 (不玩event bubbling)，那作者推薦用 this 吧。

注意到在DOM Scripting那本書中，Event-handler 完全使用 traditional model 法，也沒有用 event bubbling 進階手法，因此他的 this 一律就是 target element。

最後提一下 Yahoo! UI Library: Event，裡面的 Automatic Event Object Browser Abstraction 跟 Automatic Scope Correction 就是修正那兩個問題。

(待續，第八章 DOM 第九章 CSS 第十章 Ajax ) 

相關書評

• ppk on JavaScript (Book review)
• Digital Web Magazine – ppk on JavaScript

前兩章 Purpose 跟 Context 非常非常精采，作者就像說故事一樣娓娓道來，全貌性把 JavaScript 的來龍去脈講了一遍，Realazy有做了書摘( JavaScript的目的、背景一、背景二、背景三 )，我就不多詳述了。

第三章 Browsers 瀏覽器議題。各家瀏覽器介紹，以及常見的瀏覽器問題 1.瀏覽器不支援某些JavaScript功能 2.合法的規格解釋差異，但此種情況較少 3.瀏覽器故意有所差異，例如 IE用 srcElement 而其他符合標準的用 target，但通常只是名字不同而已，很容易處理 4.瀏覽器bug

作者花很多篇幅強調處理瀏覽器問題的最好方法就是 object detection，而千萬不要用 browser detection。例如他最得意的 DOM 支援檢查 :

var W3CDOM = document.createElement && document.getElementsByTagName; 

最後介紹一些簡單的 debug 方法: alert,confirm,error console 等

第四章 Preparation，即正式coding前的準備工作。先強調 HTML 跟 CSS 結構的重要、三種 Hooks 方式 1.ID 2. class 3.Custom attributes，其中需要特別注意的是客製屬性沒有辦法通過 valid (X)HTML 測驗，例如作者認為寫成 class=”validation=required numeric” 程式不好寫，而若只是寫 class=”required numeric” 則沒有語義，所以作者寧願寫成 validation=”required numeric”。這個議題可以參考作者的這篇 JavaScript Triggers。

接著介紹 initialization function 的常見任務跟載入 JavaScript 的問題。有 1.設定 event handlers 2.決定 vistor 狀態，如 cookies 3. 設定會存取的資源 4.產生HTML內容，例如基於 accessibility 的考量，如果有某些內容不能沒有 JavaScript 支援，那一開始就應該用 JavaScript來產生 5.建立方便存取的關聯變數 6.修改文件結構，例如為了 usability 暫時拿掉某些內容。

然後是 include JavaScript 的用法，最後探討 initialization 的載入問題，我們知道下載HTML時是依序載入執行，所以include JavaScript 時，HTML頁面還沒載入，這會讓DOM發生錯誤，所以得用 window.onload 的 event 來處理，進而使用 addEventSimple()/removeEventsimple() 之類的機制。另外一個常見問題就是網頁 image很多的時候，載入太久造成 load event會 delay 太久，而此時使用者趕著點還沒有 initialization 的頁面(例如還沒設定onclick event) 就糟啦。

第五章  JavaScript Core，即ECMAScript。注意到 Javascript 有很多部分還是由W3C來標準。這章又回頭從 hello world 開始講 syntax,data type,control structures,function,object。嗯，感覺很多講的太基本囉，會唸這本書的人應該都有程式設計經驗了吧，而有些特別的東西因為無關 Core 所以只能點到為止(例如 event propagation, W3C DOM nodeList不算是array)，詳細則需要延到後面章節。

有趣的是我現在才知道 JavaScript 的 object 可以看成 associative arrays 來使用，即 dot notation 可以改用 square bracket 來使用，例如 object.property 跟 object['property'] 是一樣的、object.method() 跟 object['method']() 也是一樣，而用 array 的好處是可以彈性選擇要執行的 function (把 square bracket裡改成用變數)。

第六章則是跟瀏覽器相關的 object，統稱 Browser Object Model，這部份夾在 Core 跟 DOM 之間，只有 de facto Netscape 3 standard，而沒有正式標準。主要的東西是 (global) window object，探討 Cross-window communication: 如何處理 window.open 新開的視窗跟原視窗 opener。另外就是 Cookie, Location,History, document object……等既不是DOM又不是Core的東西。

(待續，最後的四章更深入技術議題，包括Events,DOM,CSS跟Ajax)

話說最近開始改唸 JavaScript了，Ruby&Rails 又只好先放著囉。

先從書名談起吧，Ambient Findability 的原意是環境可尋性，描述一個可以在任何時候從任何地點，找尋到任何人或事物。當然現在尚未達到這種境界，不過未來的趨勢如此，因此這本書就在探討”行動運算”與”網際網路”的資訊互動等等議題。

findability (n.) 某物件容易被找尋到的程度
ambient (adj.) 環境的;包圍的; 

作者 Peter Morville 是資訊架構學一書的作者，而這本書可說是他對可尋性的見解雜談，學識淵博的作者走訪各家之言，提供我們很好的全貌性技術觀察跟思考，是非常值得推薦的知識性小書。

(其實去年看到英文版就想買了，只是我英文太破看了幾頁看不懂只好放棄，想不到竟然等到資深譯者蔡學鏞。題外話，他最近在關注Adobe Apollo 喔 :p)

值得推薦的AJAX入門好書(2006/3月出版)，循序漸進交代出Javascript、DOM跟Ajax。範例程式碼清楚好讀，網頁設計觀念正確。講完用 XMLHttpRequest 的最原始用法之後，就開始教如何運用 Prototype 跟 Dojo，畢竟實在不需要用 raw Javascript 啊。之後的例子主要也是用 Prototype。講 Ajax 如何正確使用的觀念講的不錯(第七章)，其他有用的議題(如JSON)也都包含在內，是本既入門內容又豐富的書。

話說這本書放要讀清單放好久了，真的拿起來認真看，沒幾天也就看完了，還蠻好唸的… :p

大致的內容是這樣:

1. 簡介 Ajax
2. Google Maps 範例 (作者想說明這只是 standard HTML and JavaScript 而已)，我倒覺得這章有點累贅不必要 :p
3. XMLHttpRequest 的基本用法
4. XMLHttpRequest 加上 Javascript DOM 操作
5. Ajax Framework
   作者把 Ajax Framework 分成三種層次
    1.Ajaxian Web Frameworks(如Rails,Tapestry,ASP.NET)
    2.UI Toolkit (如Dojo,Backbase)
    3.Remoting Toolkit (如DWR,JSON-RPC)
   接下來介紹 Prototype 跟 Dojo 的 Ajax 用法
6. Ajax UI, Part 1: Prototype,Script,aculo,us 跟 Dojo 的 DOM 操作跟特效用法
7. Ajax UI, Part 2 : 告訴你什麼時候用Ajax。先給你一些 Ajax Patterns 範例(Server-side Validation、載入畫面,載入完特效,Autocomplete等)，接下來做一些議題討論 (回上一頁、Bookmarking、GET is for getting,POST is for Doing 等設計注意事項)。
8. Debugging 工具介紹
9. Degradable Ajax : 要先決定degrade的程度跟支援的範圍。
   先從 without Ajax 開始做! 然後再 Ajaxifying。使用 HTML 當作 Ajax 格式並搭配 partials template是比較容易做好 Degradble Ajax，至於 Web-Services-Driven Ajax (用XML或JSON格式) 則可能要分兩個版本或直接說sorry!，因為client side太rich了。
10. JSON 跟 JSON-RPC 介紹 
    JSON比XML格式更容易處理而且parsing又快，值得注意的是JSON還有獨到優點就是可以跨 server拿資料。
    see The AJAX response: XML, HTML, or JSON? 跟 JSON and Yahoo!’s JavaScript APIs
    JSON-RPC 則是拿 Rails 的 orbjson 來示範。
11. Server-side Framework Integration 簡介
    作者又分成三種
     1.有Visual Tool Support，view 使用 components 機制，如ASP.NET,JSF toolkit for JAVA
     2.Custom tag libraries(Helpers)，如RoR產生Javascript code
     3.ORB-like Remoting，直接在client-side 用JavaScript呼叫Server端的function，如JSON-RPC,DWR,PHP的Sajax等
12. Ajax with PHP : 介紹 Sajax 跟 XOAD
13. Ajax with Rails: 幾個Ajax helpers介紹，最後提一下RJS
14. DWR with Spring(Java) : 略
15. ASP.NET and Atlas : 略
16. Ajax的未來
    1. 介紹E4X(ECMAScript for XML)，一種parse XML的方式，直接讀出成 object 格式 (有點像JSON在做的事，只是對象是XML)。既有XML標準格式的好處，又有JSON一樣的方便性。
    2. 介紹畫圖的 Canvas 跟 SVG (找到這篇投影片比較差異 )
    3. 瀏覽器端的 Local Storage 能力，標準可靠的 offline storage API，目前 Dojo 有在實作。
    4. Flash Apollo : 讓 Flash 不限於在瀏覽器，Adobe 要用 Web 技術進軍桌面應用 (see這篇訪問文，看起來蠻有吸引力的)。
    5. Compiled Javascript 提供 JIT Javascript compilation environment 加強執行速度
    6. WHATWG 將主導了下一世代的 web standards

我的夢幻企畫我想可以 based on 以下幾本書:

Communicating Design，一本專講 Web Site Documentation 的書，重點在於建立具有 Deliverable 的文件，裡面介紹分成十種文件，第一類關於使用者: Personas 角色建模、Usability Test Plan 使用性測試計劃、Usability Reports 使用性報告。第二類是策略性文件: Competitive Analysis 競爭力分析、Concept Model 觀念模型、Content Inventory 內容清單。第三類是設計文件: Site Maps 網站地圖、Flow Charts 流程圖、Wireframes 頁面框架、Screen Designs 視覺與介面設計。

要使用這本書並不會太難，他把每個圖表分成三個等級的用法: Layer1/Layer2/Layer3，一開始只需要做到 Layer1 有最基本的元素就可以了，Layer2/Layer3 在覺得有需要的時候再加就可以了。

重點放網站設計工作流程的書 Web ReDesign 2.0，裡面分成五個流程 1. Defining the Project  2.Developing Site Structure 3. Visual Design & Testing  4.Production & QA 5.Launch & Beyond，也有適時介紹Content Inventory,Site Maps,Wireframes等上本書提到的文件。詳細的內容可以參考我之前的第一版筆記。這本書沒有cover程式backend的部份，那比較屬於軟體開發流程了。

除了網站企劃，如果能有solid background就更好了，推薦幾本相關的書: 

網站企劃怎麼可以沒有 Web Usability 概念，至少要念本 Don’t Make Me Think，目前出到第二版。Paper Prototyping 則介紹一種建立使用者介面原型的方法，就是用紙! 使用紙片移來移去就可以把介面模擬出來了，花時間寫程式建立原型太多此一舉了。資訊架構雖然有點無趣，不過如果你的網站內容很多，那這本 Information Architecture 探討資訊如何架構及檢索應該會有幫助。Jakob Nielsen是有很名的 Web Usability大師，他的這本 Prioritizing Web Usability 是今年的新書，裡面所有事例都輔以大量的圖形說明，且所舉事例皆是知名公司，再加上全彩印刷，很好了解重點跟核心概念。

說到介面設計，深入的話還蠻多理論的，人機互動、認知心理學什麼的。我覺得最實用的方法就是去了解常用的 Patterns 模式 :

The Design of Sites 這本書提供傳統網站所需要用到的全功能網站設計模式，或是可以參考Martijn整理的 Web Design Patterns 跟Yahoo整理的 Design Pattern Library。最近Ajax流行，傳統的Web Design Patterns也不夠了，需要更多的 Interaction 成份。可以念念這本 操作介面設計 打開你的視野。 Ajax Design Patterns 則是最棒的Ajax使用大全(這本技術含量高，可能要挑著看)。

做白日夢的這篇就介紹到這裡了，相信有了這些 solid background，再依據不同專案的大小跟不同團隊大小來決定需要製作哪些文件，應該可以做出很棒的網站企劃。

軟體設計層次的Ajax書，很認真的思考 Single Page Application。前三章引入Design Patterns、重構的概念到Javascript，將 Web Page提升到應用程式的層次。四五章很精采地分析架構，包括不同層次的MVC觀點，以及各種框架的大局觀跟分類，其中關於Ajax如何交換資料提供了很好的思考，以下是我的筆記(Rails是我加的，書上沒有):

內容中心的互動 (content)

• Server 傳回 HTML 片段，Client 在特定位置更新顯示。
• 簡單直覺，撰寫容易。
• 功能有限，畫面上的變化只限於固定矩形區域，無法進行複雜的DOM操作。
• Rails使用Prototype加上配套的 Ajax helper 即可達成。

腳本中心的互動 (scripting)

• Server 傳回 Javascript 片段，Client 直接執行。
• 功能彈性大，可自由操作DOM，多處更新。
• Rails 支援在 Remote Javascript Template (RJS)，使用Ruby語法撰寫Javascript，傳給Client執行，減少撰寫raw Javascript。

資料中心的互動 (data)

• Server 傳回 XML 或 JSON 資料，Client 的 Javascript 解析處理(或使用XSLT)。
• XML的解析較麻煩，現在流行用JSON(JavaScript Object Notation)。
• 上述兩種架構與Client相依，但資料中心即Web Service(REST)架構，具可重複使用性(可供別的前端使用)。
• Rails支援 XML Template跟JSON。
• 因為剖析資料的負擔完全放在 Client 端，所以 Client 端的Javascript程式或XSLT工程較大。

第六章 使用者體驗 實作了一個通知框架，第七章講安全性，第八章講效能及記憶體洩漏(memory leak)問題。剩下後半本則是一章一案例。

另一篇書評 : Relevance Review #5: Ajax in Action

註: 之前寫的 ajax 傳送格式比較 : XML, HTML, or JSON?

介面設計與 Usability 的好書，介紹94種設計模式，包括資訊架構、導覽、頁面配置、圖表、輸入表單、編輯器操作、外觀，每一章都會先來個概觀性解法，然後每個模式依序講解 這是什麼? 何時使用? 為何使用? 原理作法! 範例說明!，編排的非常有系統，內文也不會太艱澀難懂，像認知心理學那樣深奧(?)，或是太雜太多的 Tips。舉的範例也很棒，涵蓋桌面軟體及Web。非常適合與UI相關的工作者閱讀，可以學到很多 Usability 的知識跟技巧，激發你的創意。

不過此書中文版編譯錯誤頗多，有耐心的話請勘誤吧(很累人就是了，害我花了2hr塗改)。

歷經20個月，發了5個bata及1個release candidate版本之後，終於到了正式發布了，IEBlog上 Bill 都來 congratulate 一下。IE7的CSS有重大改善，增加好用的 Tabs 功能、RSS Feeds 及搜尋框，以及種種安全性加強。

Internet Explorer 7： 下載

台灣微軟也做好下載頁面了，不過我點中文版還是連到英文去，多語系版本還要再等一陣子。相信在過不久微軟就會用自動更新來硬塞給你…. XDXD

網頁設計又要大攪動了，現在除了要檢查 IE6跟Firefox，IE7也要加進來考慮了。有很多網站用IE6可以看，但是IE7會有問題，像是蕃薯藤新聞，會發生選單疊到內文的現象。台灣企銀的網路銀行連登入都不行(為什麼銀行的HTML都寫的很爛?)。雖然會有一些陣痛跟麻煩，但是我覺得是很好的進展啊。

接下來是 Firefox 2.0 …

Prototype 似乎是目前最紅 javascript framework，作者善用了Javascript物件導向的特性，增強了 Javascript 的功能與開發便利性。在實際看過之後，發現它並不是一套包裝太多的架構(像是動畫特效的東西就不在裡面)，也因此也有一些 framework 如 Script.aculo.us 是以 Prototype 為基礎來開發的。當然，還有 Ruby on Rails 也用 prototype 來達成 Ajax 功能。

參考資源

• Quick Guide to Prototype
• Overview of the Prototype Javascript Library 
• Developer Notes for prototype.js
• Prototype in scriptaculous wiki
• Prototype Dissected()
• Ajax 網頁程式設計 沈時宇

它大概包含了哪些東西呢? 例如有: 

Base

• Class 物件提供建立類別的方式，讓你可以用 new 語法建立有建構子的物件。
• Object.extend 提供繼承的語法
• try.these 讓你依序執行 一些可能會丟例外的 function
• PeriodicalExecuter 週期執行某function
• $(“elementID”) 即 document.getElementById(“elementID”) 的方便用法

String

• 擴充本來的 String 物件，新增一些function。 

Enumerable

• 提供各種迭代的function，不過好用歸好用，小心效率問題。

Array

• 擴充了本來的 Array，另外提供 $A() 來轉成 Enumerable Object

Ajax

• Ajax.Request 發送 ajax request
• Ajax.Updater 同上，但是直接將傳回的html更新到網頁指定的id
• Ajax.PeriodicalUpdater 同上，週期執行

DOM

• 提供 document.getElementsByClassName(className) 讓你根據 class name拿 DOM element 
• 提供 Element 物件可以直接操作 DOM，如 Element.addClassName 可以加 class name 等

Form

• 提供對表單的處理，如 $F() 可以取值，Form.serialize 可以序列化表單資料 方便送 ajax request