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