BT

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

百度技术沙龙第30期回顾:网页展示新技术实践(含资料下载)

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

在9月15日由@百度主办、@InfoQ负责策划组织和实施的第30期百度技术沙龙活动上,来自百度知识搜索部的资深前端研发工程师梁东杰《HTML5 Mobile Cookbook》一书的作者、HTML5 Boilerplate贡献者石川分别分享了各自在前端开发中的经验与实践,话题涉及“浏览器新技术在内容展现中的应用”,以及“JS Pattern及HTML5 Boilerplate开发实践”等。本文将对他们各自的分享做下简单的回顾,同时提供相关资料的下载。

主题一:浏览器新技术在内容展现中的应用(下载讲稿

来自百度知识搜索部的资深前端研发工程师梁东杰第一个为大家分享,内容主要涉及HTML5的现状、目前遇到的问题、差异化解决方案和应用方式以及浏览器增强这几部分。梁东杰认为HTML5有比较光明的发展前景,对于HTML5,他提到了如下新特性:

  • 语义特性
  • 本地存储特性
  • 设备兼容特性
  • 网页多媒体特性
  • 三位、图形以及特效特性
  • 性能与集成特性
  • CSS3特性

这些新的特性有利于产品服务的改进和一些开发辅助,但是,由于当前国内低端浏览器(如IE6等)市场份额较大加之HTML5处于过渡阶段,目前对于HTML5的使用还需要面临一些问题。

对此,梁东杰分享了百度基于“差异化开发”的解决思路,允许浏览器之间存在功能和效果的不同,进而提升用户体验,所采用的技术主要有:

  • 优雅降级:向前以高端浏览器为基准
  • 渐进增强:退后以低端浏览器为基准

使用差异化技术主要保证了两个方面的一致性:

  1. 用户体验的一致性
  2. 面向未来,跟技术潮流的一致性

同时,对于差异化新技术的应用,梁东杰总结了一些关键点:

  • 团队HTML5技术普及
  • 团队成员的差异化意识
  • 渐进增强与优雅降级的使用
  • 加速HTML5应用条件成熟

梁东杰提到百度内部还通过浏览器增强的方式来提升低端浏览器对新技术的支持以及自动化兼容低端浏览器bug等,目前也已经开源了相关项目

主题二:JS Pattern及HTML5 Boilerplate开发实践(下载讲稿

《HTML5 Mobile Cookbook》一书的作者、HTML5 Boilerplate贡献者石川第二个为大家分享,话题主要设计涉及JS Pattern及HTML5 Boilerplate开发实践。

HTML5 Boilerplate是由Paul Irish(Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人)主导的一个帮助快速建立健壮并且高适应性Web应用或网站的模板,其用户有 Google、Microsoft、NASA、Barack Obama、Nike 等等。

石川通过结合实例向大家介绍新版本Boilerplate的特点和使用,他提到了Boilerplate的一些主要特点:

  • 由Paul Irish首创的在HTML页面的Body上使用IE条件注释判断浏览器版本,从而大大简化了针对IE Hack的成本(在后来的版本中升级为在 标签中加入条件注释);
  • HTML5 集成,默认使用了很多 HTML5 的特性,并且使其兼容旧版本浏览器;
  • 大量针对服务器的默认配置,无需修改即可配置一个安全、标准的Web服务器;
  • 完整的JS调试机制 —— 即使在 IE下;
  • 大量使用CSS3技术,并且集成了几乎所有来自框架中和技术大牛们口头相传的 CSS 技巧;
  • 为所有浏览环境做了优化,包括移动版本和打印版本;
  • 默认内置 Modernizr,可以检测浏览器对新特性的支持能力,方便针对旧版本浏览器优化

他还分享了提升技术人员技术敏感度和能力的心得:参与开源项目、加入项目的邮件列表,和项目的开发人员(不乏一些大师)直接交流。他提供了一些值得关注的IRC:

  • #html5
  • #css
  • #javascript
  • #whatwg
  • #jquery
  • #yui
  • #dojo
  • #web
  • #bbg

Open Space(开放式讨论环节)

为了促进参会者与我们每期的嘉宾以及讲师近距离交流,深入探讨在演讲过程中的疑问,本次活动依然设置了Open Space(开放式讨论)环节。

在Open Space的总结环节,几位话题小组长分别对讨论的内容进行了总结。

梁东杰:讨论了一些框架CSS3增强的实现原理、使用方法,并且探讨了HTML5应用的技术细节,通过介绍百度内容的一些项目来具体探讨。

石川:主要讨论了性能测试工具以及国内IE6大规模使用的情况下如何进行高效测试,同时还提到了一些新的开发方法,以及在不支持HTML5的浏览器上扩展实现。

曹雄峰:今天讨论了两个问题:第一,讨论浏览器能够成为OS,所面临的三个问题:云计算、宽带、标准,第二,HTML5成为跨平台语言所面临的问题等。

Jeff:首先和大家讨论了Ruby on Rails的问题,以及如何使用一些gem来快速实现产品API,然后分享了LESS等的使用感受。

会后,一些参会者也通过新浪微博分享了他们的参会感受:

antinomia#百度技术沙龙#怎么让低端浏览器也能展现高端浏览器才支持的特性呢?差异化开发是一个很好的思路

Tashgy#百度技术沙龙#百度梁ne童鞋分享~前端新技术差异化应用。html5技术非常强大,但大部分功能和效果的实现依赖于高端浏览器。目前国内高端浏览器占比从低到高的过渡阶段,以差异化的思路可以让高端浏览器使用新技术获得较好的功能和效果,同时低端浏览器功能及展现不受影响。

晨昏树#百度技术沙龙# normallize css确实思路比较独特,不像传统的css reset,而是为html5标签补充缺失属性 我在:http://t.cn/zlPkaS8

泡面的烙饼@百度技术沙龙 石川老师回答问题真的很细心,可以好好看看他讲的开源项目

李二栋Star#百度技术沙龙#嘉宾介绍了国外的一些群来交流前端技术,那里有更多的大牛,包括jquery创始人,不一定依赖国内的qq群。

有关百度技术沙龙的更多信息,可以通过新浪微博关注@百度技术沙龙,或者参加百度技术沙龙微群,InfoQ上也总结了过往29期所有百度技术沙龙的演讲视频和资料等,感兴趣的读者可以直接浏览内容

特别提示:第31期百度技术沙龙将在10月20日,在北京举行,欢迎关注@InfoQ@百度技术沙龙获取后续的活动信息。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

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

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

太泛泛了 by chen jay

就列了一些图,没啥实际内容, 实例都没有的

允许的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通知我

1 讨论

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


找回密码....

Follow

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

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

Like

内容自由定制

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

Notifications

获取更新

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

BT