在 6 月 16 日由 @百度 主办、 @InfoQ 负责策划组织和实施的第 27 期百度技术沙龙活动上，来自百度高级工程师，用户体验研究平台技术负责人王集鹄（ @王集鹄 ），街旁前端工程师齐伟（@hustkiwi）分别分享了各自在 HTML5 技术实践上取得的成果及经验，话题涉及“HTML5 中的图形图像处理”，以及“应用 HTML5 搭建街旁新版混合式 iOS 客户端”等。本文将对他们各自的分享做下简单的回顾，同时提供相关资料的下载。
主题一：HTML5 中的图形图像处理（微盘下载讲稿，Demo 下载）
来自百度高级工程师王集鹄第一个为大家分享，本次演讲主要对 HTML5 中 Canvas 和 SVG 矢量图的使用经验以及对曲线变化进行了研究，并通过丰富的 Demo 与参会者分享了一些综合应用。王集鹄首先分享了来自ie6countdown.com上的一份数据，数据表明：
目前，全球范围内，IE6 使用比重最多的国家就是中国，占到了 22.4% 的比重。然而其他国家的占比则非常小，占比在 1% 以下。
接下来王集鹄分别通过老虎的实例说明了 SVG 缩放时不失真的特点，还演示了 SVG 动画、Path 和路径编辑器、Canvas 热力图、贝塞尔曲线等精彩的示例。此外，还对 2012 年春节时，百度首页的舞龙效果进行了技术分享，最后，王集鹄对本次的分享进行了总结：
- HTML5 发展现状
- SVG 两种加载方式 <object> 和 <image>
- Canvas 的像素处理，包括二进制存储
- Canvas 动画原理、性能、时间轴
- SVG Path 辅助工具——路径编辑器
- 贝赛尔曲线两个公式：计算轨迹、切分曲线
- SVG+ 前端模版组合
- Canvas 中绘制 SVG
更多精彩内容和演示代码请参考讲稿和 Demo。
主题二：应用 HTML5 搭建街旁新版混合式 iOS 客户端（微盘下载讲稿）
街旁前端工程师齐伟第二个为大家分享，混合式应用（Hybird App）继承了方便调用原生接口操控底层 API 与应用 HTML5 前端技术快速开发的优点。随着移动设备硬件的提升，成为一种可行的应用开发架构趋势。在街旁新版 iOS 客户端“街旁 5”中，对应用 HTML5 搭建混合式应用进行了大胆实践，并积累了一些有关混合式应用开发、架构和优化相关的宝贵经验。齐伟首先引用了 Steve Jobs 的话开场：
New open standars created in the mobile era,such as HTML5,will win on mobile devices.
在提到为什么采用 Hybrid 方式时，齐伟提到：
- IOS 开发资源不足
很难招到有经验的 iOS 开发者，维护成本较大- 需要更快的开发迭代
引入界面及交互上的 AB Test；绕过 Apple Store 发布流程的 Bugfix
接下来讲解了 Native 和 WebView 的相互调用方法，并针对使用 Backbone.js 给出了使用建议：
- API 应严格遵循 RESTful JSON 接口规范
- 避免在不被销毁的标签上绑事件
- 统一捕获跳转事件
最后，齐伟还谈到了在使用 LocalStorage 中所遇到的挑战：
- 是同步的，会阻塞网络
- 对 I/O 有操作，时间不可控
- 有大小限制，甚至在内存吃紧时会丢数据
Open Space（开放式讨论环节）
和以往的环节一样，为了让参会者能够有更多的时间进行相互的交流，本次活动依然设置了 Open Space（开放式讨论）环节。除了讲师王集鹄、齐伟外，Storm 团队 @含冰、@Mr.Null，蒸汽猛犸团队张振熙也参与了小组讨论。在 Open Space 的总结环节，几位话题小组长分别对讨论的内容进行了总结。
王集鹄：主要讨论了 HTML5 目前的应用情况，以及性能优化的技术细节。
齐伟：主要讨论了通过 Hybrid 的方式，可以借助 HTML5 对于原生 API 的开发支持，但同时在应用和性能方面还有提升的空间，但一致认为这是未来应用开发的趋势。
MR.NULL：主要讨论了如何基于 Canvas 原生事件对层进行捕获，模拟原生 DOM 响应的问题以及动画相关的话题讨论。
张振曦：向大家揭示了“别碰我的妞儿”游戏，是如何在 30 小时内设计和开发出来的。技术层面，一起讨论了粗粒度刷新、细粒度刷新等相关问题。
会后，一些参会者也通过新浪微博分享了他们的参会感受：
@破车推荐：@hustKiwi 老师 PPT 的 Transition 效果是世界级的。
@李二栋 Star：主题是 html5 之美，的确是好活动。百度有很大影响力，活动吸引了很多技术大牛和爱好者，从中能了解很多有意义的信息。还好我今天去基本能听懂大思路，因为前段时间看完前端的一本书，有了基础。
@蒋宇捷：第二个演讲里提到的，关于 Linkedin iPad Web 版本的优化方式，我也正好有过相关的文章《 用 HTML5 实现 iPad 应用无限平滑滚动 》： http://t.cn/zOHNB4o 。
@做自己的心理丶医生 v：在# 百度技术沙龙 #听到了第一个干货, 用 HTML5 加 Object-C 开发 app 实在是太不友好了。
有关百度技术沙龙的更多信息，可以通过新浪微博关注@百度技术沙龙，或者加入百度技术沙龙微群，InfoQ 上也总结了过往 26 期所有百度技术沙龙的演讲视频和资料等，感兴趣的读者可以直接浏览阅读。
特别提示：2012 百度开发者大会全国巡讲终点站——上海站，免费报名参加，活动将于 6 月 21 日（本周四）进行，特别邀请到上海改变科技有限公司 CTO 李亮分享《移动应用技术开发路线选择》的话题，敬请关注。
李亮目前致力与移动计算与云计算方向，他还是 iOS 第一个输入法 iCosta for iPhone 以及 RockPlayer for Android 的主要开发者之一。RockPlayer 是 Android 平台上全球最成功的媒体播放工具，受到了广大用户的好评，目前为止累计下载数量大概在三千万左右。最新推出的 iOS 平台上的演讲工具 AirSlides。
注册/登录 InfoQ 发表评论