經過2009到2010年全球領先的互聯網企業Google、Apple、Facebook等等在HTML5上的大力推進和應用，今年在國內業界開始真正地熱起來，4.10 QConBeijing2011的12個專題之一就是HTML5開發平台，4.18 由W3CTech主辦的“擁抱HTML5” 又是國內業界另一個頂級的HTML5大會，這次的HTML5 in China是今年第3個關於HTML5的國內業界頂級會議，還有即將到來的7.9 D2前端技術論壇 也將會有部分HTML5相關的內容。在這麼短的時間內國內組織了這多次和HTML5相關的大規模頂級會議，幾乎涉及到國內所有最領先的互聯網企業，從中可以看出HTML5的熱度。
HTML5引起業界如此重視這是好事，但短時間內過熱反而說明了業界對於HTML5的理解程度不夠，這點和2005年言必稱標准和ajax非常類似，等大家真正對標准和ajax深刻理解並應用到生產實踐的時候反而在談論的是利用標准和ajax成就了某項產品而不僅僅是技術本身，HTML5也正經歷這樣一個過程。現在最熱的討論之一就是在移動平台上使用原生開發還是使用HTML5，如果只是討論兩者的技術優勢這個問題估計永遠沒有答案，因為我們的目標真的不是那種技術更好，而是哪種技術更能適合我們用來快速的解決用戶的需求，一個復雜游戲比如極品飛車當然用HTML5來做當然不是最佳的方案，但類似Google Reader之類數據展現性和簡單交互的應用當然用HTML5開發比較好，其實如果你稍加留意就連Apple自己的App Store這個應用的本身就是用HTML5開發的。本次會議前面有兩位同學介紹使用phoneGap + HTML5來重構新浪微博的iPad客戶端，兩個人利用一周的業余時間大致實現了這個iPad客戶端的全平台覆蓋（Web、Mobile Web、Android、iPhone和iPad），我想新浪微博的同學看到這個應該會有一些不一樣的感觸吧。
我把這次每張幻燈片要講的內容都寫到幻燈片的注釋中，有興趣的同學可以對照看會更明白一些，同時也在blog中列出每張幻燈片要講的內容。另外，幾乎每張幻燈片的後面都了一兩個鏈接，這些鏈接很多都非常精彩，強烈推薦大家看看。
pdf下載
- 這頁就是個人信息，歡迎就任何問題聯系我。
- HTML5的應用的程度和浏覽器的支持程度密切相關的，這個表列出目前主流浏覽器各個版本在HTML5 Test得分，全球的占有率和淘寶的占有率。HTML5 Test的滿分是400分，而目前得分最高的293，可見實現HTML5已定義的所有標准還需要較長的路要走。
- 從表中我們還可以從中看出更多很有意思的東西：
- IE6、IE7、IE8在HTML5標准上的支持的確太差勁了，是大規模應用HTML5的障礙，我們是應該主動推動用戶升級了。全球范圍內IE6低於3%，IE7低於9%，在美國和歐洲這個值應該更低，這就是為什麼Google可以宣布在它的很多新興業務不支持或有限支持IE6和IE7的原因，利用HTML5開發出優秀的產品，然後適時引導用戶升級浏覽器的最好方法。
- 我們更應該看到雖然HTML5是在2004由WHATWG開始孕育，2006年W3C正式啟動，但2001年推出的IE6已經支持部分HTML5，這告訴我們HTML5並不是全部是所謂的新技術，它更考慮對現有HTML技術的繼承和改進，而很多HTML5技術規范我們早已經在使用，比如HTML5的DTD聲明<!doctype html>，所以我們很多人很早就在使用HTML5。
- 淘寶的IE6、IE7、IE8占有率超過80%，整個IE份額接近90%，這主要有兩個原因導致淘寶IE份額非常高：
- XP操作系統在中國份額依舊80%以上
- 電子商務網站最重要的一個環節是支付，而現在的網銀絕大部分是只支持IE的，包括和淘寶密切相關的支付寶，雖然已經支持了各大平台的，但其最重要的安全措施電子證書主要還是在IE上使用最多。
- 淘寶的IE6占有率已經低於40%，這絕對是一個好跡象，從我私下打聽的幾個數據判斷國內IE6平均占有率應該在50%以上，後面會解釋為什麼會這樣。
- 整個阿裡的電子商務交易支付部分主要依賴支付寶，支付寶在不支持浏覽器、安裝證書等操作上會引導用戶升級最新的版本，這非常值得國內的大站點學習。
- 支付寶在其教顯著位置推薦使用IE、Firefox、Chrome、Safari等浏覽器最新版本，並提示用戶升級浏覽器，這是一件非常有意義的事情，好的產品引導用戶升級利企利民。 不過，這裡支付寶可以有一個小改進，那就是不要對XP平台的同學也推薦IE9浏覽器，幸好下載鏈接那邊的微軟做了判斷。
- 開始學習和應用HTML5，首先會注意到新增了大量的語義化元素，比如，這些元素的添加正是HTML5務實一種體現，它們都是來自對現實HTML組織形式的抽象提取，但遺憾的是IE6、IE7、IE8不支持這些標簽，但開發者是很聰明的，於是有了兩種解決方案：
- John Resig公布了利用JavaScript來實現讓IE6-8支持的方法，這種方案比較簡單，唯一的缺陷就是必須使用JavaScript，但浏覽器可能不支持JavaScript
- 利用雙層標簽進行嵌套，這樣就不需要考慮是否支持JavaScript了，但代碼臃腫，基本上開發人員不太喜歡，所以大部分都使用上一種方案
- 但我們不能不面對一種現實，那就還是有大量的用戶代理禁用JavaScript，當有上億用戶時，這個數量其實是我們無法忽視的。
- 為什麼還有這麼多用戶禁用JavaScript呢？除了用戶通過安全級別進行禁用、殺毒軟件禁用之外，還有一個Firefox插件NoScript也需要值得我們注意，一方面它的下載量接近9000萬，可見用戶數量之大，另外一方面我們在百度上搜索NoScript時，你會發現第一頁很多地方介紹NoScript時都提及安全，也就是說用戶對JavaScript的恐懼和對安全的擔憂才是我們存在大量禁用JavaScript的情況。
- 淘寶首頁在年初升級時引入了HTML5的語義元素，當用戶在IE6-8下禁用JavaScript會出現幻燈片上的提示，建議用戶開啟JavaScript或者訪問一個專門定制的不使用HTML5新語義元素的頁面，這個看起來是一個不錯的解決方案，但就是成本太高。
- 所以為了避免成本太高， 淘寶彩票首頁前不久也引入了HTML5語義化元素，就直接告訴禁用JavaScript的用戶啟用JavaScript，否則沒法使用。
- 我們當然可以把不支持JavaScript的用戶看成某個低版本的浏覽器用戶，比如是IE5.5的用戶，我們也可以像強制用戶升級一樣去強制用戶開啟JavaScript，這是不同場景的不同選擇，所以前面淘寶的選擇也是一個可行的方案。在口碑的實踐中，盡可能地讓用戶先用起來是我們的設計原則，所以口碑看重的是：
- 重點是語義的本身而不僅僅是語義元素，我們不會僅僅為了使用語義元素而引入JavaScript或嵌套標簽，采用語義本身的含義來組織我們的代碼是關鍵，所以我們可以更多的去參考HTML5的語義元素和http://schema.org/ 來規劃我們的代碼結構和命名，這樣如果有一天你想轉換成HTML5的也是非常簡單的。
- 對JavaScript依賴性很強的項目，可以大膽的使用HTML5語義元素，同時需要對用戶進行友好的提示，特別是在安全方面的提示。
- 不考慮NoScript並不能靠優雅降級一言蔽之，前端工程師有責任和義務去深入思考可訪問性問題，雖然兩者並不是同一件事。
- 電子商務網站經過多年的實踐總結出主要的用戶路徑，這些路徑的完成率直接關系到整個網站的交易額，所以提升每步的轉化率對於電子商務網站來講至關重要，實現每步之間的轉化率就是要想辦法提升用戶的購買效率。這裡面有很多事情可以做，比如按照應用購買力的因素來設計頁面信息和購買步驟，盡量減少每兩步之間的頁面數、提升兩步之間的速度、減少兩步之間的干擾，在完成購買時形成新的購買循環。
- 在很多情況下，List頁到Detail頁有很多相似的地方，比如共同的頭尾、側邊欄、購物車，如果我們用ajax來替換中間不一樣的部分，會減少從List到Detail的時間，提升頁面性能，從而提升交易額。Amazon的實踐曾表明網站慢100毫秒有1%的人放棄交易 。 但采用ajax這樣做的時候會遇到三個障礙：
- ajax請求的頁面，比如detail頁面，怎樣定位這個頁面的URL
- 浏覽器前進後退的問題
- 傳統頁面的和可訪問性和SEO問題
- 應用ajax的這些問題早已經有了比較完美的跨浏覽器解決方案，很多JavaScript庫或框架都有解決這些問題的組件，twitter就是這方面是個非常好的案例
- 利用url的hash標簽來作為獨立的URL，這樣可以定位到每個具體頁面
- 利用window.history.hash + iframe來實現浏覽器的前進後退
- 提供強大的API，不存在傳統的SEO問題
但twitter的方案並不完全適合傳統的頁面的漸進增強，傳統頁面很多時候必須在頁面本身考慮SEO問題，以及URL標准問題。比如訪問 https://twitter.com/#!/kavenyan 你會看到loading，這是因為需要JavaScript要獲取hash值之後才能再次獲取對應數據，然後更新到頁面上，如果是頁面的核心主體內容采用這種方式一直看到loading並不是太友好的事情。
HTML5對history提供了強大的API：histroy.pushState和histroy.replaceState，它們非常簡單自然優雅地解決ajax應用遇到的前面兩個問題。更重要的是URL不需要借助於URL的hash部分，是一個真正意義上完整的URL，這樣就可以很自然地實現對可訪問性和傳統SEO的保留。所以，當你直接訪問從List通過ajax生成的Detail的URL http://waimai.koubei.com/web/takeoutgoodsdetail.html?city=99&offerId=10211200000000191 時會直接出現Detail的主體部份，不會出現任何loading。
這個API的缺點在於只有Chrome、Safari和Firefox4支持，這恰好形成了一個天然的ABTest，我們可以通過統計埋點看看這樣做是不是實現了我們的目標增加了轉化率。必須牢記，我們的目標不是為了使用某個HTML5技術，而是使用HTML5技術來解決用戶的需求。最早使用這個API的知名網站是 http://github.com，在QConBeijing2011上hax提到了這個API，我們看到這個API恰好能解決我們的面臨的問題就立即應用了。這個事情告訴我們，我們今天不僅僅是了解HTML5的那些最Cool的應用，還要找到那些適合我們能學以致用的技術，一旦發現我們應該快速的去實踐拿出結果，否則再Cool的技術如果不能解決我們的問題，不能解決用戶的需求是沒有用的。
- 這裡有一些我們已經使用和正在嘗試使用的HTML5技術，每項技術的使用都是奔著能解決我們的問題去的，盡量避免為了技術而使用技術。
HTML5和CSS3能夠讓我們實現很多很Cool的設計，比如圓角，比如倒影。但是有時候你可能會發現，視覺設計師通過PhotoShop之類軟件設計的圓角和倒影你很難用HTML5 + CSS3實現，但HTML5 + CSS3 又能很高效的做出類似的事情，這是一個很尴尬的事情吧，所以讓交互、讓視覺，甚至讓運營和產品了解HTML5能干什麼非常重要，HTML5 + CSS3 + JavaScript + 浏覽器性能的改進將會很快的改變我們的設計模式，為了讓更多的上游理解HTML5和CSS3在設計上能做什麼，我的同事開發了Chrome插件Code Cola，用它能夠非常方便地通過可視化的方式在現在有的頁面上實現各種HTML5效果，並能夠方便地得到修改後的代碼，或者把修改後的頁面發給服務器以便其他人協作使用。這個插件本身就是用HTML5 + CSS3 + JavaScript來實現的，我們正在用HTML5來提高我們的效率。
- 這句話是Jeremy Keith在《HTML5設計原理》中講的，4月份他也曾親臨W3CTech主辦的擁抱HTML5大會向中國的開發者布道，這是一個我認為每個和HTML5應用相關的開發者都應該仔細去品味的演講，從中我們可以深刻的理解HTML5為什麼會變成這樣，以後會是什麼樣，我們應該本著什麼樣的態度去實踐HTML5。我們會使用HTML5不能叫我們創造價值，只有我們用HTML5解決了用戶的需求才叫創造價值，這和HTML5的設計原則是一致的。從第1個例子考慮NoScript情況，到第2個例子針對不同浏覽器實現不同效果，到第3個例子為設計師開發HTML5 + CSS3的可視化工具，都是在遵循這個原則基礎上去實現的，實際上我們可以做的更多。
- 這些口碑在實踐HTML5時的一些心得：
- 前端技術開發都是在漸進增強和優雅退化間做平衡，這不僅僅體現在某個具體的技術應用上，也體現在整個設計的思想和開發流程上，我所舉的例子也都是在做這兩者的平衡。
- HTML5並不是新興的技術，但是由於各個浏覽器支持的不同，我們必須面對殘酷的現實，針對某個具體的問題的跨浏覽器解決方案都很多種，比如探測浏覽器是否支持HTML5某個屬性的庫 Modernizr上有個wiki頁就收集了特別多的全球開發者解決HTML5跨浏覽器問題的方案。我們完全可以站在全球開發者的肩上高效的使用HTML5來解決用戶的需求，同時通過具體業務挖掘出新的解決方案貢獻給社區。通常，應用HTML5並不僅僅是前端工程師的事情，需要整個設計和研發團隊都所有了解，這樣才能把技術利用到極致，為用戶創造最大價值。
- Douglas Crockford曾說過ajax導致web page成為web application，實際上從2005年到現在雖然有這個趨勢，但是還是不足夠明顯，隨著HTML5的出現，從元素的規劃到API的設計，都標志著Web App時代的帶來，這恰好和手機App的時代同步。Web App的出現導致了我們需要更多的思考設計與技術的結合，單純的先設計頁面再開發頁面的時代很快要過去了，我們需要把頁面的設計和開發結合起來，這將會對我們的交互設計、視覺設計和前端開發帶來很大的挑戰和機遇，我們應該從現在探索，要知道如果按照運營、產品、交互、視覺、前端、後端、測試這種研發方式是不可能出現Google Maps、Gmail、Facebook、Twitter等等的。
- 我們面對大量基於HTML5新且Cool的應用，但是有時又會感覺離我們有點遠，作為前端開發工程師應該理解業務，對業務的未來有所判斷，那麼我們就能夠用HTML5來解決我們的用戶問題，而不是為了使用HTML5來進行某些開發。我們必須用成功的案例來證明HTML5可以做什麼？我們不僅僅應該出現的是技術熱，更應該出現的是產品熱，每個新的產品出現才是真正解決用戶需求而具備非常大的意義。利用HTML5做出成功的產品是最好的布道方式。
- “一次編寫，隨處運行”曾經是Java的夢想，也是開發者的夢想，這樣開發者可以把更多的時間放在解決用戶的需求上，而不是機器和軟件的兼容性上，現在HTML + CSS + JavaScript差不多快做到了，如果我們不能用這些技術滿足用戶的需求，讓我們的用戶感覺到Cool，那麼滿足開發者的夢想就會變得意義沒有那麼大了，這就是HTML5的設計思想，也應該是我們每個程序員的追求。
pdf下載
HTML5@電子商務.com是我在這次HTML5 in China大會上講的主題，之前有大量的業界同仁介紹了HTML5的意義和HTML5能夠實現的各種很Cool的應用，特別是Mozilla的米嘉代講的《HTML5 in the wild》讓很多人都驚訝於HTML5所能實現的一切，但是可能也有不少人會感覺到這些玩意太炫了，不知道怎麼才能和我們的實際結合上，所以會有人說那些酷酷的游戲是浮雲，我發現大部分人留下來聽非游戲部分也說明了HTML5在非游戲領域的應用是我們更多人面臨的問題。我會把口碑和淘寶在HTML5上一些應用案例拿出來和大家交流，基於這些案例來聊聊我們對HTML5的認識和應用，最重要的如何思考落地的然後實現，當然這些經驗不是只適合電子商務網站，也適合任何使用HTML5來解決業務問題的場景。