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