BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

百度技术沙龙第27期回顾:HTML5之美(含资料下载)

| 作者 贾国清 关注 0 他的粉丝 发布于 2012年6月18日. 估计阅读时间: 7 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在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给出了使用建议:

  1. API应严格遵循RESTful JSON接口规范
  2. 避免在不被销毁的标签上绑事件
  3. 统一捕获跳转事件

最后,齐伟还谈到了在使用LocalStorage中所遇到的挑战:

  1. 是同步的,会阻塞网络
  2. 对I/O有操作,时间不可控
  3. 有大小限制,甚至在内存吃紧时会丢数据

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账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT