HTML5的意义和HTML5实现的Cool的应用

　2011-07-01 21:04:45　来源：WEB开发网　　　

核心提示：经过2009到2010年全球领先的互联网企业Google、Apple、Facebook等等在HTML5上的大力推进和应用，今年在国内业界开始真正地热起来，HTML5的意义和HTML5实现的Cool的应用，4.10 QConBeijing2011的12个专题之一就是HTML5开发平台，4.18 由W3CTech主办的&l

经过2009到2010年全球领先的互联网企业Google、Apple、Facebook等等在HTML5上的大力推进和应用，今年在国内业界开始真正地热起来，4.10 QConBeijing2011的12个专题之一就是HTML5开发平台，4.18 由W3CTech主办的“拥抱HTML5” 又是国内业界另一个顶级的HTML5大会，这次的HTML5 in China是今年第3个关于HTML5的国内业界顶级会议，还有即将到来的7.9 D2前端技术论坛也将会有部分HTML5相关的内容。在这么短的时间内国内组织了这多次和HTML5相关的大规模顶级会议，几乎涉及到国内所有最领先的互联网企业，从中可以看出HTML5的热度。

HTML5引起业界如此重视这是好事，但短时间内过热反而说明了业界对于HTML5的理解程度不够，这点和2005年言必称标准和ajax非常类似，等大家真正对标准和ajax深刻理解并应用到生产实践的时候反而在谈论的是利用标准和ajax成就了某项产品而不仅仅是技术本身，HTML5也正经历这样一个过程。现在最热的讨论之一就是在移动平台上使用原生开发还是使用HTML5，如果只是讨论两者的技术优势这个问题估计永远没有答案，因为我们的目标真的不是那种技术更好，而是哪种技术更能适合我们用来快速的解决用户的需求，一个复杂游戏比如极品飞车当然用HTML5来做当然不是最佳的方案，但类似Google Reader之类数据展现性和简单交互的应用当然用HTML5开发比较好，其实如果你稍加留意就连Apple自己的App Store这个应用的本身就是用HTML5开发的。本次会议前面有两位同学介绍使用phoneGap + HTML5来重构新浪微博的iPad客户端，两个人利用一周的业余时间大致实现了这个iPad客户端的全平台覆盖（Web、Mobile Web、Android、iPhone和iPad），我想新浪微博的同学看到这个应该会有一些不一样的感触吧。

我把这次每张幻灯片要讲的内容都写到幻灯片的注释中，有兴趣的同学可以对照看会更明白一些，同时也在blog中列出每张幻灯片要讲的内容。另外，几乎每张幻灯片的后面都了一两个链接，这些链接很多都非常精彩，强烈推荐大家看看。

pdf下载

这页就是个人信息，欢迎就任何问题联系我。

HTML5的应用的程度和浏览器的支持程度密切相关的，这个表列出目前主流浏览器各个版本在HTML5 Test得分，全球的占有率和淘宝的占有率。HTML5 Test的满分是400分，而目前得分最高的293，可见实现HTML5已定义的所有标准还需要较长的路要走。

从表中我们还可以从中看出更多很有意思的东西：

IE6、IE7、IE8在HTML5标准上的支持的确太差劲了，是大规模应用HTML5的障碍，我们是应该主动推动用户升级了。全球范围内IE6低于3%，IE7低于9%，在美国和欧洲这个值应该更低，这就是为什么Google可以宣布在它的很多新兴业务不支持或有限支持IE6和IE7的原因，利用HTML5开发出优秀的产品，然后适时引导用户升级浏览器的最好方法。

我们更应该看到虽然HTML5是在2004由WHATWG开始孕育，2006年W3C正式启动，但2001年推出的IE6已经支持部分HTML5，这告诉我们HTML5并不是全部是所谓的新技术，它更考虑对现有HTML技术的继承和改进，而很多HTML5技术规范我们早已经在使用，比如HTML5的DTD声明<!doctype html>，所以我们很多人很早就在使用HTML5。

淘宝的IE6、IE7、IE8占有率超过80%，整个IE份额接近90%，这主要有两个原因导致淘宝IE份额非常高：

XP操作系统在中国份额依旧80%以上

电子商务网站最重要的一个环节是支付，而现在的网银绝大部分是只支持IE的，包括和淘宝密切相关的支付宝，虽然已经支持了各大平台的，但其最重要的安全措施电子证书主要还是在IE上使用最多。

淘宝的IE6占有率已经低于40%，这绝对是一个好迹象，从我私下打听的几个数据判断国内IE6平均占有率应该在50%以上，后面会解释为什么会这样。

整个阿里的电子商务交易支付部分主要依赖支付宝，支付宝在不支持浏览器、安装证书等操作上会引导用户升级最新的版本，这非常值得国内的大站点学习。

支付宝在其教显著位置推荐使用IE、Firefox、Chrome、Safari等浏览器最新版本，并提示用户升级浏览器，这是一件非常有意义的事情，好的产品引导用户升级利企利民。不过，这里支付宝可以有一个小改进，那就是不要对XP平台的同学也推荐IE9浏览器，幸好下载链接那边的微软做了判断。

开始学习和应用HTML5，首先会注意到新增了大量的语义化元素，比如
，这些元素的添加正是HTML5务实一种体现，它们都是来自对现实HTML组织形式的抽象提取，但遗憾的是IE6、IE7、IE8不支持这些标签，但开发者是很聪明的，于是有了两种解决方案：

John Resig公布了利用JavaScript来实现让IE6-8支持的方法，这种方案比较简单，唯一的缺陷就是必须使用JavaScript，但浏览器可能不支持JavaScript

利用双层标签进行嵌套，这样就不需要考虑是否支持JavaScript了，但代码臃肿，基本上开发人员不太喜欢，所以大部分都使用上一种方案

但我们不能不面对一种现实，那就还是有大量的用户代理禁用JavaScript，当有上亿用户时，这个数量其实是我们无法忽视的。

为什么还有这么多用户禁用JavaScript呢？除了用户通过安全级别进行禁用、杀毒软件禁用之外，还有一个Firefox插件NoScript也需要值得我们注意，一方面它的下载量接近9000万，可见用户数量之大，另外一方面我们在百度上搜索NoScript时，你会发现第一页很多地方介绍NoScript时都提及安全，也就是说用户对JavaScript的恐惧和对安全的担忧才是我们存在大量禁用JavaScript的情况。

淘宝首页在年初升级时引入了HTML5的语义元素，当用户在IE6-8下禁用JavaScript会出现幻灯片上的提示，建议用户开启JavaScript或者访问一个专门定制的不使用HTML5新语义元素的页面，这个看起来是一个不错的解决方案，但就是成本太高。

所以为了避免成本太高，淘宝彩票首页前不久也引入了HTML5语义化元素，就直接告诉禁用JavaScript的用户启用JavaScript，否则没法使用。

我们当然可以把不支持JavaScript的用户看成某个低版本的浏览器用户，比如是IE5.5的用户，我们也可以像强制用户升级一样去强制用户开启JavaScript，这是不同场景的不同选择，所以前面淘宝的选择也是一个可行的方案。在口碑的实践中，尽可能地让用户先用起来是我们的设计原则，所以口碑看重的是：

重点是语义的本身而不仅仅是语义元素，我们不会仅仅为了使用语义元素而引入JavaScript或嵌套标签，采用语义本身的含义来组织我们的代码是关键，所以我们可以更多的去参考HTML5的语义元素和http://schema.org/ 来规划我们的代码结构和命名，这样如果有一天你想转换成HTML5的也是非常简单的。

对JavaScript依赖性很强的项目，可以大胆的使用HTML5语义元素，同时需要对用户进行友好的提示，特别是在安全方面的提示。

不考虑NoScript并不能靠优雅降级一言蔽之，前端工程师有责任和义务去深入思考可访问性问题，虽然两者并不是同一件事。

电子商务网站经过多年的实践总结出主要的用户路径，这些路径的完成率直接关系到整个网站的交易额，所以提升每步的转化率对于电子商务网站来讲至关重要，实现每步之间的转化率就是要想办法提升用户的购买效率。这里面有很多事情可以做，比如按照应用购买力的因素来设计页面信息和购买步骤，尽量减少每两步之间的页面数、提升两步之间的速度、减少两步之间的干扰，在完成购买时形成新的购买循环。

在很多情况下，List页到Detail页有很多相似的地方，比如共同的头尾、侧边栏、购物车，如果我们用ajax来替换中间不一样的部分，会减少从List到Detail的时间，提升页面性能，从而提升交易额。Amazon的实践曾表明网站慢100毫秒有1%的人放弃交易。但采用ajax这样做的时候会遇到三个障碍：

ajax请求的页面，比如detail页面，怎样定位这个页面的URL

浏览器前进后退的问题

传统页面的和可访问性和SEO问题

应用ajax的这些问题早已经有了比较完美的跨浏览器解决方案，很多JavaScript库或框架都有解决这些问题的组件，twitter就是这方面是个非常好的案例

利用url的hash标签来作为独立的URL，这样可以定位到每个具体页面

利用window.history.hash + iframe来实现浏览器的前进后退

提供强大的API，不存在传统的SEO问题

但twitter的方案并不完全适合传统的页面的渐进增强，传统页面很多时候必须在页面本身考虑SEO问题，以及URL标准问题。比如访问 https://twitter.com/#!/kavenyan 你会看到loading，这是因为需要JavaScript要获取hash值之后才能再次获取对应数据，然后更新到页面上，如果是页面的核心主体内容采用这种方式一直看到loading并不是太友好的事情。

HTML5对history提供了强大的API：histroy.pushState和histroy.replaceState，它们非常简单自然优雅地解决ajax应用遇到的前面两个问题。更重要的是URL不需要借助于URL的hash部分，是一个真正意义上完整的URL，这样就可以很自然地实现对可访问性和传统SEO的保留。所以，当你直接访问从List通过ajax生成的Detail的URL http://waimai.koubei.com/web/takeoutgoodsdetail.html?city=99&offerId=10211200000000191 时会直接出现Detail的主体部份，不会出现任何loading。

这个API的缺点在于只有Chrome、Safari和Firefox4支持，这恰好形成了一个天然的ABTest，我们可以通过统计埋点看看这样做是不是实现了我们的目标增加了转化率。必须牢记，我们的目标不是为了使用某个HTML5技术，而是使用HTML5技术来解决用户的需求。最早使用这个API的知名网站是 http://github.com，在QConBeijing2011上hax提到了这个API，我们看到这个API恰好能解决我们的面临的问题就立即应用了。这个事情告诉我们，我们今天不仅仅是了解HTML5的那些最Cool的应用，还要找到那些适合我们能学以致用的技术，一旦发现我们应该快速的去实践拿出结果，否则再Cool的技术如果不能解决我们的问题，不能解决用户的需求是没有用的。

这里有一些我们已经使用和正在尝试使用的HTML5技术，每项技术的使用都是奔着能解决我们的问题去的，尽量避免为了技术而使用技术。
HTML5和CSS3能够让我们实现很多很Cool的设计，比如圆角，比如倒影。但是有时候你可能会发现，视觉设计师通过PhotoShop之类软件设计的圆角和倒影你很难用HTML5 + CSS3实现，但HTML5 + CSS3 又能很高效的做出类似的事情，这是一个很尴尬的事情吧，所以让交互、让视觉，甚至让运营和产品了解HTML5能干什么非常重要，HTML5 + CSS3 + JavaScript + 浏览器性能的改进将会很快的改变我们的设计模式，为了让更多的上游理解HTML5和CSS3在设计上能做什么，我的同事开发了Chrome插件Code Cola，用它能够非常方便地通过可视化的方式在现在有的页面上实现各种HTML5效果，并能够方便地得到修改后的代码，或者把修改后的页面发给服务器以便其他人协作使用。这个插件本身就是用HTML5 + CSS3 + JavaScript来实现的，我们正在用HTML5来提高我们的效率。

这句话是Jeremy Keith在《HTML5设计原理》中讲的，4月份他也曾亲临W3CTech主办的拥抱HTML5大会向中国的开发者布道，这是一个我认为每个和HTML5应用相关的开发者都应该仔细去品味的演讲，从中我们可以深刻的理解HTML5为什么会变成这样，以后会是什么样，我们应该本着什么样的态度去实践HTML5。我们会使用HTML5不能叫我们创造价值，只有我们用HTML5解决了用户的需求才叫创造价值，这和HTML5的设计原则是一致的。从第1个例子考虑NoScript情况，到第2个例子针对不同浏览器实现不同效果，到第3个例子为设计师开发HTML5 + CSS3的可视化工具，都是在遵循这个原则基础上去实现的，实际上我们可以做的更多。

这些口碑在实践HTML5时的一些心得：

前端技术开发都是在渐进增强和优雅退化间做平衡，这不仅仅体现在某个具体的技术应用上，也体现在整个设计的思想和开发流程上，我所举的例子也都是在做这两者的平衡。

HTML5并不是新兴的技术，但是由于各个浏览器支持的不同，我们必须面对残酷的现实，针对某个具体的问题的跨浏览器解决方案都很多种，比如探测浏览器是否支持HTML5某个属性的库 Modernizr上有个wiki页就收集了特别多的全球开发者解决HTML5跨浏览器问题的方案。我们完全可以站在全球开发者的肩上高效的使用HTML5来解决用户的需求，同时通过具体业务挖掘出新的解决方案贡献给社区。通常，应用HTML5并不仅仅是前端工程师的事情，需要整个设计和研发团队都所有了解，这样才能把技术利用到极致，为用户创造最大价值。

Douglas Crockford曾说过ajax导致web page成为web application，实际上从2005年到现在虽然有这个趋势，但是还是不足够明显，随着HTML5的出现，从元素的规划到API的设计，都标志着Web App时代的带来，这恰好和手机App的时代同步。Web App的出现导致了我们需要更多的思考设计与技术的结合，单纯的先设计页面再开发页面的时代很快要过去了，我们需要把页面的设计和开发结合起来，这将会对我们的交互设计、视觉设计和前端开发带来很大的挑战和机遇，我们应该从现在探索，要知道如果按照运营、产品、交互、视觉、前端、后端、测试这种研发方式是不可能出现Google Maps、Gmail、Facebook、Twitter等等的。

我们面对大量基于HTML5新且Cool的应用，但是有时又会感觉离我们有点远，作为前端开发工程师应该理解业务，对业务的未来有所判断，那么我们就能够用HTML5来解决我们的用户问题，而不是为了使用HTML5来进行某些开发。我们必须用成功的案例来证明HTML5可以做什么？我们不仅仅应该出现的是技术热，更应该出现的是产品热，每个新的产品出现才是真正解决用户需求而具备非常大的意义。利用HTML5做出成功的产品是最好的布道方式。

“一次编写，随处运行”曾经是Java的梦想，也是开发者的梦想，这样开发者可以把更多的时间放在解决用户的需求上，而不是机器和软件的兼容性上，现在HTML + CSS + JavaScript差不多快做到了，如果我们不能用这些技术满足用户的需求，让我们的用户感觉到Cool，那么满足开发者的梦想就会变得意义没有那么大了，这就是HTML5的设计思想，也应该是我们每个程序员的追求。

pdf下载
HTML5@电子商务.com是我在这次HTML5 in China大会上讲的主题，之前有大量的业界同仁介绍了HTML5的意义和HTML5能够实现的各种很Cool的应用，特别是Mozilla的米嘉代讲的《HTML5 in the wild》让很多人都惊讶于HTML5所能实现的一切，但是可能也有不少人会感觉到这些玩意太炫了，不知道怎么才能和我们的实际结合上，所以会有人说那些酷酷的游戏是浮云，我发现大部分人留下来听非游戏部分也说明了HTML5在非游戏领域的应用是我们更多人面临的问题。我会把口碑和淘宝在HTML5上一些应用案例拿出来和大家交流，基于这些案例来聊聊我们对HTML5的认识和应用，最重要的如何思考落地的然后实现，当然这些经验不是只适合电子商务网站，也适合任何使用HTML5来解决业务问题的场景。