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