武汉的开发者们注意啦!AI技术战略、框架以及最佳实战尽在Azure OpenAI Day 了解详情
写点什么

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

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

关注

评论

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

如何知道页面浏览时长?

神策技术社区

采集 iOS SDK 页面浏览

43 K8S之节点/Pod亲和调度

穿过生命散发芬芳

k8s 28天写作 12月日更

[架构实战营] 模块六作业

张祥

架构实战营

恒源云(GPUSHARE)_CV领域之几何变化

恒源云

深度学习 CV

如何使用会声会影标题工具制作弹幕效果

懒得勤快

How to construct a Playground Project

Changing Lin

12月日更

JetBrains又出神器啦!Fleet,体验飞一般的感觉

程序那些事

Java ide JetBrains 程序那些事 12月日更

node.js中利用IPC和共享内存机制实现计算密集型任务转移

RingCentral铃盛

使用HTML,CSS和Javascript构建响应式导航栏和面包屑菜单

海拥(haiyong.site)

响应式 大前端 28天写作 签约计划第二季 12月日更

一个小插曲

Tiger

28天写作

超写实“龚俊数字人”上线,百度智能云助力各行业打造定制数字人

百度开发者中心

人工智能

AOP在JavaScript和TypeScript中的应用

RingCentral铃盛

Go语言学习查缺补漏ing Day8

恒生LIGHT云社区

golang 编程语言 Go 语言

火遍全网的「蚂蚁呀嘿」教程开源了!

百度开发者中心

开源

【等保测评】山东省9家等保测评机构名单汇总

行云管家

等保 等级保护 等保测评 等保评测

使用WT工具恢复MongoDB数据

MongoDB中文社区

mongodb

如何高效完成HarmonyOS分布式应用测试?|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS ArKUI 3.0

英特尔技术发力:着眼10倍封装密度提升,30%~50%晶体管密度提升,布局非硅基半导体

科技新消息

利用漏洞修复漏洞:青藤提供的「Log4j命令注入漏洞(CVE-2021-44228)」【免重启】在线热补丁服务现已上线!

青藤云安全

网络安全 漏洞修复

如何在建木CI中使用Vault管理密钥

Jianmu

DevOps CI/CD 开源软件

12. 《重学 JAVA》-- 面向对象

杨鹏Geek

Java 25 周年 28天写作 12月日更

【等保小知识】安全等保是什么意思?是ccrc吗?

行云管家

等保 等级保护 ccrc

如何避免移动研发的一些坑

Speedoooo

研发效能 ios开发 APP开发 APP软件开发 Andriod开发

MongoDB在 AWS Marketplace 中推出即用即付产品,有力提升客户体验

MongoDB中文社区

mongodb

简单3步,OpenHarmony上跑起ArkUI分布式小游戏

HarmonyOS开发者

OpenHarmony

值得收藏!2021百度开源技术干货大汇总

百度开发者中心

开源 2021 内容合集 技术专题合集 百度开源

架构实战营模块六作业

渐行渐远

架构实战营

架构训练营 week2 学习总结

红莲疾风

「架构实战营」

Linux一学就会之RAID磁盘阵列的原理与搭建

学神来啦

Linux 运维 linux运维 raid linux云计算

CSS之选择器(五)

Augus

CSS 12月日更

百度开源一款基于 Git 的多仓库管理工具:MGit

百度开发者中心

git 开源

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