HTML5 in China大會綜述:HTML 5來襲
6月10日,HTML5 in China大會在北京召開,來自各個相關領域的技術精英、專家學者從不同角度分享了HTML5的歷史、優(yōu)勢、問題、影響和發(fā)展前景,觀點和經(jīng)驗的碰撞與結(jié)合使參會的軟件開發(fā)人員對HTML5有了更深的了解和更大的熱情,對國內(nèi)開發(fā)社區(qū)在Web方向的發(fā)展起到了良好的促進作用。InfoQ中文站全程參與大會,總編霍泰穩(wěn)應邀主持了HTML5游戲?qū)龅难葜v和討論。本文結(jié)合會議的實況和嘉賓的幻燈片對HTML5 in China大會做一技術綜述,希望能夠讓讀者對HTML5有更全面的了解。
創(chuàng)新工場董事長李開復先生在開場致辭中對HTML5技術的開放和自由的特質(zhì)給予了極大的肯定。他表示,一些企業(yè)為了自身的商業(yè)利益,在產(chǎn)品中采用了閉源的、私有的技術和API,這種做法傷害了創(chuàng)業(yè)者、開發(fā)者特別是消費者。W3C的成立改善了這種狀況,技術專家學者制定了開放的技術規(guī)范,說服越來越多的企業(yè)采用這些標準。同樣,對于HTML5這樣一個開放、自由的標準,創(chuàng)新工場一定會支持。個人云的發(fā)展,需要支持更多的運行平臺,特別是移動設備,而HTML5 的跨平臺性使其在開發(fā)社區(qū)的技術選型中占據(jù)了重要的地位。
W3C組織HTML主管Michael Smith以《Why HTML5》為題分享了自己對HTML5技術優(yōu)勢的理解。Michael認為,HTML5技術主要受益者包括:
◆ Web發(fā)布者/內(nèi)容提供商
◆ 多媒體網(wǎng)絡提供商
◆ Web游戲
◆ 社會化服務
◆ 電子商務網(wǎng)站
以HTML5的多媒體特性為例,Micheal表示,視頻播放、動畫、3D交互圖像、Web視頻聊天/會議、音頻的采樣和混合都將是HTML5的重要優(yōu)點和應用趨勢。
美國華爾街HTML5資深研究專家殷唯一表示,HTMl5的發(fā)展勢不可擋,他舉了幾個實際例子:
◆ 迪斯尼與微軟、Vectorform公司共同制作了一款基于HTML5技術的數(shù)字動漫書《創(chuàng)戰(zhàn)紀》。
◆ 谷歌將逐漸取消對(不支持HTML5的)老版瀏覽器的支持。
◆ 即將發(fā)布的Windows 8硬件加速特性提高了HTML5對游戲等應用的性能。
有趣的是,主流瀏覽器廠商的代表齊聚本次大會,介紹了各自瀏覽器對HTML 5的支持和發(fā)展趨勢。
來自IE東家——微軟公司的資深技術專家黃繼佳著重強調(diào)了IE9的三種美:
◆ 高效之美。IE9采用了新JavaScript引擎Chakra,在WebKit SunSpider性能測試中占據(jù)優(yōu)勢。
◆ 簡潔之美。IE9能夠與Windows 7無縫銜接,地址欄更加智能。
◆ 可信賴之美。黃繼佳表示,IE testing center的測試結(jié)果證明,IE9對HTML5相關技術的支持程度較高,兼容性值得肯定。
除此之外,黃繼佳還透露,微軟一直在嘗試實現(xiàn)更多的HTML5技術,有些已經(jīng)做出了原型或者正在研發(fā)中,感興趣的朋友可以到微軟的HTML5實驗室網(wǎng)站上找到最新的技術成果和演示程序。
Firefox中國資深工程師米嘉的幻燈片頗具特色,由采用HTML5和JavaScript技術實現(xiàn)的Web頁面組成,他主要介紹了HTML5在現(xiàn)代Web技術中的十種有趣應用:
應用 關鍵技術 案例
圖片上傳器 XHR Level 2、File API http://min.us/
3D內(nèi)容 WebGL http://pepetz.com/
游戲 Canvas、JavaScript http://www.grantgalitz.org/gameboy/
動畫 JavaScript、SVG SMIL、CSS 3 http://animatable.com/demos/madmanimation/
數(shù)據(jù)可視化 Canvas、JSON http://www.highcharts.com/
地理定位 JavaSCript API http://maps.google.com/
歷史信息API History API http://github.com/
自適應布局 CSS、MediaQueries http://jasonweaver.name/
多媒體 Videos、Canvas、CSS3 Transform http://thisshell.com/
幻燈片 CSS3 Transitions\Transforms、HTML5 Markup\Video http://paulrouget.com/dzslides
W3C中文興趣小組主席、Opera宣講師謝子斌則從移動瀏覽器的角度分享了HTML5技術在移動平臺上的應用趨勢,他認為值得關注的新特性包括:input類型/屬性、audio、video、Web storage、Geolocation API、Canvas等。
谷歌中國區(qū)技術專家丁建寧也介紹了Chrome瀏覽器發(fā)展、HTML 5技術新特性和Google Maps等應用。
接下來的會議分成了游戲?qū)龊头怯螒驅(qū)觯刹煌I域的專家分享各自的經(jīng)驗。
非游戲?qū)?/strong>
掌中寬途開發(fā)總監(jiān)杜亞波和軟通動力前端開發(fā)主管邱智鋼兩人合作開發(fā)了一款HTML5的新浪微博應用,并在現(xiàn)場做了演示。移動產(chǎn)品的需求包括跨平臺、用戶體驗豐富和一致,而技術框架的要求則是入門門檻低、開發(fā)快速、成本低等。兩人以實際的開發(fā)經(jīng)驗告訴大家,HTML5技術滿足這些需求,而且做出的產(chǎn)品易于部署和維護。
騰訊的技術專家于濤則以WebQQ為例,介紹了HTML5技術在WebQQ中的廣泛應用:
◆ 動態(tài)桌面
◆ 觸控操作
◆ Canvas實現(xiàn)的時鐘
◆ 音樂盒子widget
◆ Notification
◆ Geolocation位置服務
◆ HTML5游戲
在談到如何解決HTML5兼容性問題時,于濤給出了代碼示例:
- soundModeDetector = function(){
- if((($B.name==’mobileSafari’) || $B.safari || $B.chrome || $B.ie) && document.createElement(‘audio’).volume!==undefined) {
- return 3; //以上瀏覽器的高版本支持audio對象播放mp3格式
- }else if(J.browser.plugins.flash>=9) {
- return 1; //支持flash控件
- }
- else if(!!window.ActiveXObject && new ActiveXObject(“WMPlayer.OCX.7″)) {
- return 2; //支持wmp控件
- }
- else{
- return 0; //一直很安靜
- }
- };
藍汛公司云產(chǎn)品總監(jiān)馮廣坤從云計算的角度分析了HTML5的發(fā)展優(yōu)勢,采用HTML5技術實現(xiàn)的游戲不僅用戶體驗高,而且可以通過使用云服務和CDN服務顯著地降低運維成本,同時提高用戶響應時間,不失為HTML5游戲開發(fā)公司的一條捷徑。
口碑網(wǎng)前端開發(fā)負責人鄢學鵾剖析了HTML5在電子商務中面臨的挑戰(zhàn)。目前國內(nèi)對低版本IE的依賴性很大,導致HTML5技術的普及存在困難,也讓開發(fā)社區(qū)對兼容性的處理感到頭疼。在HTML5的新標簽使用問題上,口碑網(wǎng)的經(jīng)驗是:
不只為語義化元素使用額外的JavaScript或嵌套標簽,但會采用語義思想來命名,如
- <div class=”section”></div>
在JavaScript依賴性強的項目上大膽使用語義化標簽,對用戶進行友好提示。
對于HTML5的應用趨勢,鄢學鵾建議:
漸進增強+優(yōu)化退化
站在巨人的肩上
從Web Page到Web Application
提前技術準備+盡可能的使用+成功案例+布道
游戲?qū)?/strong>
來自盛大創(chuàng)新院的曹劉陽在演講中認為HTML5提供的新API給開發(fā)社區(qū)提供了巨大的創(chuàng)意空間。在傳統(tǒng)HTML4時代,Web開發(fā)人員被各種限制所束縛,不得依賴于第三方技術如Flash,而HTML5的誕生逐漸沖破了這些限制,Web前端開發(fā)迎來了新機遇。曹劉陽表示,在HTML5中,WebSocket、Canvas和Transform(CSS 3)是最具應用潛力的三種技術。他認為HTML5的發(fā)展對軟件工程師提出了更高的要求,一方面是嚴謹性:
代碼可讀性高
健壯性高
高內(nèi)聚低耦合
玩轉(zhuǎn)語言特性
框架的掌握程度
調(diào)試能力
開發(fā)工具的熟練度
另一方面則需要創(chuàng)新性:
看到表象,思考實現(xiàn)原理
組合舊的API,思考新的用法
思考新API的應用場景
HTML5研究小組的秀野堂主則以實際開發(fā)的聯(lián)機海戰(zhàn)游戲為背景,講述了HTML5技術在其中的應用和心得體會。該游戲的亮點在于大膽使用了眾多最新的HTML5技術:
實時、穩(wěn)定的網(wǎng)絡連接(WebSocket)
高效物理動作(拋物線、碰撞)(JS物理引擎)
音效處理(Audio)
高性能的子線程運算(雷達)(WebWorker)
頁面效果處理(開炮、航行)(Canvas)
實時數(shù)據(jù)的臨時存儲(localStorage)
離線應用與文件緩存(applicationCache&&manifest)
秀野堂主向大家分享了在使用HTML5技術過程中得到的寶貴一線開發(fā)經(jīng)驗:
在Win 7的64位操作系統(tǒng)下,所有瀏覽器都不定時出現(xiàn)Canvas繪圖異常,調(diào)試保存后往往看不到改動的效果。
開發(fā)基于NodeJS的WebSocket服務端程序,絕不要使用Win 7。如果非要用Windows操作系統(tǒng),Win2008、Win2003、XP都很不錯,推薦使用Linux環(huán)境。
非iPhone手機瀏覽器共同的問題——不支持WebSocket。
applicationCache的使用需要做好版本與文件命名規(guī)劃,否則更新是個問題。
Canvas動畫制作一定要有面向過程的概念,不能脫離主程序。
localStorage吃不消密集讀寫,會崩潰。
SSJS非常好,建議關注。
同時,他還指出瀏覽器廠商在HTML5的支持方面存在“走回頭路”的現(xiàn)象,應該提出批評并提高警惕。
超閃公司的兩位高管郝克明、彭濤介紹了通過云端運行社會化游戲的情況,HTML5技術實現(xiàn)的云端游戲帶來的優(yōu)勢包括:
跨平臺——客戶端低功耗,結(jié)構(gòu)友好,具有最佳的跨平臺結(jié)構(gòu),能支持大多數(shù)的社交游戲。
低流量——平均流量10—40KB/S,3G和Wifi網(wǎng)絡均可。
低延時——平均延時能夠達到500毫秒以內(nèi)。
個人開發(fā)者代表施烜則從Canvas Image、圖形預渲染、極速網(wǎng)站、培訓教育等四個方面分享了對HTML5的看法。在極速網(wǎng)站主題中,他提到HTML5技術可以讓網(wǎng)站程序化(Web app),就像目前的Web游戲一樣達到四種標準:
永不換頁——所有數(shù)據(jù)請求都在后臺處理
立即響應——對于鍵盤鼠標的動作立即響應
極速反饋——數(shù)據(jù)請求20-200毫秒返回結(jié)果
瞬間重啟——程序本地緩存并自動更新
施烜認為JavaSript將成為最主要的編程語言,HTML5技術使游戲開發(fā)不再昂貴。
本次大會的另一個主要日程是宣布正式啟動中國首屆HTML5原創(chuàng)游戲比賽。在啟動儀式上,HTML5研究小組負責人田愛娜、Spilgames中國區(qū)CEO陳琦和創(chuàng)新工場聯(lián)合創(chuàng)始人汪華分別做了精彩發(fā)言。本次比賽從即日起征集參賽作品,并將在年底公布獲獎結(jié)果。
感興趣的讀者可以從這里下載本次大會的演講幻燈片資料,也可以訪問HTML5研究小組的網(wǎng)站和微博來了解大會和比賽的精彩內(nèi)容。
HTML5 in China大會圓滿結(jié)束了,不過HTML5在中國的發(fā)展才剛剛起航,InfoQ中文站還將繼續(xù)關注并報道相關的新聞。
注:HTML5研究小組負責人田愛娜提供了相關素材,同時本文引用了眾多演講嘉賓的幻燈片內(nèi)容和觀點,在此一并表示衷心感謝。
【編輯推薦】