写点什么

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

  • 2012-09-17
  • 本文字数:2268 字

    阅读完需:约 7 分钟

在 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 @百度技术沙龙获取后续的活动信息。

2012-09-17 09:383079
用户头像

发布了 89 篇内容, 共 34.7 次阅读, 收获喜欢 4 次。

关注

评论

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

聊聊什么是CommonJs和Es Module及它们的区别

蛙人

大前端 js ES6

《未来世界的幸存者》读书笔记

SilentMacUser

极客时间 互联网 技术学习 阅读 阮一峰

“新作者 新入驻 新征程”第一季获奖名单

InfoQ写作社区官方

热门活动

技术债是什么、怎么还?你想知道的都在这一篇文章里了!

禅道项目管理

技术 技术债 问题

知道Python中的字符串是什么吗?

华为云开发者联盟

Python 编程语言 字符串 字符

一起来学习LiteOS中断模块的源代码

华为云开发者联盟

代码 华为云 LiteOS 中断 中断控制器

硬核!一文学完Flink流计算常用算子(Flink算子大全)

五分钟学大数据

大数据 flink 28天写作 3月日更

【LeetCode】验证二叉树的前序序列化Java题解

Albert

算法 LeetCode 28天写作 3月日更

谷歌大脑团队官方推荐,用浏览器实现深度学习的「黑科技」教程来了!

图灵社区

JavaScript 人工智能 机器学习 深度学习 大前端

真·“拜师学艺”?2021中科院开源之夏,开源大牛1V1&万元奖金只等你来!

京东科技开发者

开源 开源社区

区块链应用解决方案赋能到农产品溯源上究竟能解决什么问题?

源中瑞-龙先生

带你了解VXLAN网络中报文的转发机制

华为云开发者联盟

网络 网关 VXLAN 报文 分布式网关

关于广东欢太科技可不可信?那是你还不了解

Geek_4a453c

企业 欢太 欢太科技

你以为在做的是微服务?不!你只是做了个比单体还糟糕的分布式单体!

程序猿DD

微服务

寻找被遗忘的勇气(十二)

Changing Lin

3月日更

数字孪生技术如何实现复制世界?关键的关键是…

华为云开发者联盟

数据中心 数字孪生 节能 仿真 数据中心网图服务

与前端训练营的日子 -- Week19

SamGo

学习

一步一步教你如何在Centos7中配置Kafka运行时环境

happlyfox

28天写作 3月日更

力扣(LeetCode)刷题,简单题(第27期)

不脱发的程序猿

面试 LeetCode 28天写作 算法面经 3月日更

细粒度授权在安全领域的重要性

龙归科技

安全 iam 细粒度 ABAC PBAC

安卓应用程序开发理论!免费Android高级工程师学习资源,附面试题答案

欢喜学安卓

android 程序员 面试 移动开发

你的终端从未如此高效

Kareza

3月日更 Oh My Zsh

融云集成之避坑指南-Android推送篇

融云 RongCloud

音视频

植树节,种个二叉树吧?

悟空聊架构

数据结构 算法 二叉树

如何成为一名架构师?

xcbeyond

程序人生 方法论 架构师 成长与思考 3月日更

安卓系统开发架构!5214页PDF的进阶架构师学习笔记,成功入职腾讯

欢喜学安卓

android 程序员 面试 移动开发

物联网常用协议:MQTT、CoAP、LwM2M、HTTP、LoRaWAN和NB-IoT

不脱发的程序猿

物联网 通信协议 28天写作 3月日更 物联网常用协议

你的终端从未如此优雅

Kareza

终端工具 3月日更 Hyper

华云大咖说 | 华云数据与瀚高软件携手共建国产云生态 助力政企用户安全可靠发展

华云数据

2月大事件:度目CM-Mini智能面板机全新发布,飞桨PaddleGAN“复活”李焕英

百度大脑

百度 百度大脑

对标阿里P9Java架构师面试题,已助我拿下字节、蚂蚁、滴滴三家Offer

Java架构追梦

Java 阿里巴巴 架构 面试 滴滴

百度技术沙龙第30期回顾:网页展示新技术实践(含资料下载)_Ruby on Rails_水羽哲_InfoQ精选文章