HTML5促进web前端开发

6月10日，HTML5 in China大会在北京召开，来自各个相关领域的技术精英、专家学者从不同角度分享了HTML5的历史、优势、问题、影响和发展前景，观点和经验的碰撞与结合使参会的软件开发人员对HTML5有了更深的了解和更大的热情，对国内开发社区在Web方向的发展起到了良好的促进作用。

　　创新工场董事长李开复先生在开场致辞中对HTML5技术的开放和自由的特质给予了极大的肯定。他表示，一些企业为了自身的商业利益，在产品中采用了闭源的、私有的技术和API，这种做法伤害了创业者、开发者特别是消费者。W3C的成立改善了这种状况，技术专家学者制定了开放的技术规范，说服越来越多的企业采用这些标准。同样，对于HTML5这样一个开放、自由的标准，创新工场一定会支持。个人云的发展，需要支持更多的运行平台，特别是移动设备，而HTML5 的跨平台性使其在开发社区的技术选型中占据了重要的地位。

　　W3C组织HTML主管Michael Smith以《Why HTML5》为题分享了自己对HTML5技术优势的理解。Michael认为，HTML5技术主要受益者包括：

　　1、Web发布者/内容提供商

　　2、多媒体网络提供商

　　3、Web游戏

　　4、社会化服务

　　5、电子商务网站

　　以HTML5的多媒体特性为例，Micheal表示，视频播放、动画、3D交互图像、Web视频聊天/会议、音频的采样和混合都将是HTML5的重要优点和应用趋势。

　　美国华尔街HTML5资深研究专家殷唯一表示，HTMl5的发展势不可挡，他举了几个实际例子：

　　1、迪斯尼与微软、Vectorform公司共同制作了一款基于HTML5技术的数字动漫书《创战纪》。

　　2、谷歌将逐渐取消对(不支持HTML5的)老版浏览器的支持。

　　3、即将发布的Windows 8硬件加速特性提高了HTML5对游戏等应用的性能。

　　有趣的是，主流浏览器厂商的代表齐聚本次大会，介绍了各自浏览器对HTML 5的支持和发展趋势。

　　来自IE东家微软公司的资深技术专家黄继佳着重强调了IE9的三种美：

　　1、高效之美。IE9采用了新JavaScript引擎Chakra，在WebKit SunSpider性能测试中占据优势。

　　2、简洁之美。IE9能够与Windows 7无缝衔接，地址栏更加智能。

　　3、可信赖之美。黄继佳表示，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(){

　　return 3; //以上浏览器的高版本支持audio对象播放mp3格式

　　return 1; //支持flash控件

　　return 2; //支持wmp控件

　　else{

　　return 0; //一直很安静

　　};
　　蓝汛公司云产品总监冯广坤从云计算的角度分析了HTML5的发展优势，采用HTML5技术实现的游戏不仅用户体验高，而且可以通过使用云服务和CDN服务显著地降低运维成本，同时提高用户响应时间，不失为HTML5游戏开发公司的一条捷径。

　　口碑网前端开发负责人鄢学鵾剖析了HTML5在电子商务中面临的挑战。目前国内对低版本IE的依赖性很大，导致HTML5技术的普及存在困难，也让开发社区对兼容性的处理感到头疼。在HTML5的新标签使用问题上，口碑网的经验是：

　　不只为语义化元素使用额外的JavaScript或嵌套标签，但会采用语义思想来命名，如：

　　
　　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技术使游戏开发不再昂贵。