【AICon 全球人工智能与大模型开发与应用大会】改变 AI 时代下写代码的模式 >>> 了解详情
写点什么

百度技术沙龙第 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:382680
用户头像

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

关注

评论

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

eBPF Cilium实战(2) - 底层网络可观测性

北京好雨科技有限公司

Docker Kubernetes PaaS cilium

在Rainbond上部署高可用Apollo集群

北京好雨科技有限公司

AliPLC 智能丢包补偿算法,提升弱网环境的通话质量

阿里云视频云

音视频 音频 视频云 音频算法 丢包补偿

crontab命令详细介绍教程,快来围观

CRMEB

RDP是什么意思?有什么用?

行云管家

运维 网络协议 RDP

杭州等保测评公司有哪些?分别叫什么?如何能查到?

行云管家

等保 等级保护 等保测评 杭州

PHP项目微信提现功能代码详解

CRMEB

俄乌战争下的国产数据库替换思考-墨天轮

墨天轮

数据库 oracle 达梦 gbase8a

逃离过度努力陷阱

FunTester

FunTester 湛卢 轻松主义

百度荣获 “2021年中国网络安全产业联盟数据安全工作委员会突出贡献奖”

百度开发者中心

大咖说|阿里巴巴副总裁陈龙:数字技术将在绿色低碳转型中发挥关键作用

大咖说

阿里巴巴 数字化 碳中和

SAE 联合乘云至达与谱尼测试携手共同抗疫

阿里巴巴云原生

在Linux环境下安装SQLserver2017

春风十里

数据库 Linux SqlServer

多个角度论证SeekTiger 生态核心STI的魅力

西柚子

自助洗车设备全套多少钱?有了解的吗

共享电单车厂家

自助洗车机价格 自助洗车加盟 自助洗车设备多少钱

无人自助洗车机多少钱一台?不是自动

共享电单车厂家

自助洗车机多少钱 自助洗车加盟 无人自助洗车机

不再单调!快来自定义你的专属背景~

优麒麟

Linux 开源 操作系统 优麒麟 用户登录

如何通过Password Vault的XSS漏洞窃取用户密码信息

喀拉峻

网络安全 XSS

jackson学习之六:常用类注解

程序员欣宸

4月月更

零信任访问控制下企业ABAC的实施问题

Geek_2d6073

“囤菜新宠”预制菜,会是生鲜电商的破局点吗?

易观分析

@所有高校师生,2022全国大学生物联网设计竞赛火热开启,限量礼品等你来拿!

HarmonyOS开发者

HarmonyOS 物联网设计竞赛

ETL 和数仓建模的设计思路!

五分钟学大数据

4月月更

易周金融观点 | 数字人民币试点扩大带动增量场景需求

易观分析

金融 数字化人民币

直播预告|年营业额百亿的企业都在如何做数字化转型

云智慧AIOps社区

数字化转型 AIOPS 解决方案 智能运维

盘点近期虎符交易所上线的项目

区块链前沿News

虎符交易所

Tapdata PDK 生态共建计划启动!MongoDB、Doris、OceanBase、PolarDB等十余家厂商首批加入

MongoDB中文社区

如何设计帮助中心才能真正地帮助客户解决问题?

小炮

帮助中心

Docker 实战教程之从入门到提高(一)

Jerry Wang

Docker Kubernetes 容器 镜像 4月月更

“转型·破局” 看数字化会员如何重塑企业竞争力

科技热闻

重磅!百度安全参编的国家标准《信息安全技术 术语》正式发布

百度开发者中心

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