阿里云「飞天发布时刻」2024来啦!新产品、新特性、新能力、新方案,等你来探~ 了解详情
写点什么

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

  • 2012-06-17
  • 本文字数:2119 字

    阅读完需:约 7 分钟

在 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 两种加载方式
  • 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。

2012-06-17 21:463400
用户头像

发布了 156 篇内容, 共 49.6 次阅读, 收获喜欢 7 次。

关注

评论

发布
暂无评论
发现更多内容

PD 分配 TS 的 QPS 上限揭密

TiDB 社区干货传送门

几分钟读懂 TiDB HTAP

TiDB 社区干货传送门

【热门问题】关于近期签名过期的处理合集

TiDB 社区干货传送门

如果你的 kubelet 运行在容器中,使用 local static provisioner 要注意一个问题

TiDB 社区干货传送门

【TiDB 最佳实践系列】乐观锁事务

TiDB 社区干货传送门

实践案例

【TiDB 最佳实践系列】HAProxy

TiDB 社区干货传送门

实践案例

速度收藏!TiDB 读、写性能慢问题排查思路汇总

TiDB 社区干货传送门

管理与运维

TiKV 集群部署 注意事项

TiDB 社区干货传送门

tidb开发规范

TiDB 社区干货传送门

TiCDC 应用场景解析

TiDB 社区干货传送门

实践案例

TiDB 性能分析工具——PProf

TiDB 社区干货传送门

TiDB 底层架构

【TiDB 4.0 新 Feature 原理及实践】 Dashboard 触手体验

TiDB 社区干货传送门

从内容角度看看TUG小伙伴都在关注些啥

TiDB 社区干货传送门

版本测评

从抓包发现并解决 Navicat 编辑 TiDB 视图报错的问题

TiDB 社区干货传送门

实践案例 TiDB 底层架构

TIDB 3.0.5 性能压测

TiDB 社区干货传送门

数据库架构选型

招募体验官!构建实时数仓 - 当 TiDB 遇见 Pravega

TiDB 社区干货传送门

TiDB 数据库开发规范

TiDB 社区干货传送门

【技术专题】如何做数据库选型?

TiDB 社区干货传送门

实践案例

Tiflash 尝鲜小案例

TiDB 社区干货传送门

管理与运维

TiDB 多Socket 服务器性能扩展问题分析-续

TiDB 社区干货传送门

性能调优 性能测评

【精选实践】TiDB 在马上消费金融核心账务系统归档及跑批业务下的实践

TiDB 社区干货传送门

实践案例

移动云基于 TiDB 实现 serverless 数据库服务

TiDB 社区干货传送门

NewSQL 在微众银行核心批量场景的应用

TiDB 社区干货传送门

实践案例

【TiDB DevCon 2020】金融专题论坛演讲视频汇总

TiDB 社区干货传送门

tiup目录冲突检测不健全导致的节点被destroy问题以及解决

TiDB 社区干货传送门

TiDB at ZaloPay Infrastructure & Lesson Learned

TiDB 社区干货传送门

日本大型移动支付软件 PayPay 的 TiDB 迁移实践

TiDB 社区干货传送门

TiDB 5.0 异步事务特性体验——基于X86和ARM混合部署架构

TiDB 社区干货传送门

AskTUG 论坛迁移实战:Discourse 从 PostgreSQL 到 MySQL 到 TiDB

TiDB 社区干货传送门

常见问题排查之 -- DM 主键冲突的原因及排查思路

TiDB 社区干货传送门

基于阿里云ECS部署的TiDB 2.1.14升级到4.0.0-rc实践

TiDB 社区干货传送门

管理与运维 安装 & 部署

百度技术沙龙第27期回顾:HTML5之美(含资料下载)_JavaScript_贾国清_InfoQ精选文章