|
现状
从目前的状况来说，HTML5很流行。Google在推，Microsoft在推，很多大公司已经尝试在用，但依然没有大规模的商业应用。原因大概可以归结为两点，一是HTML5本身对于技术人员来说还比较新；一是占据市场最大份额的IE（IE9
Beta 已经支持了相当多的HTML5技术）对大部分HTML5特性并不支持，其他浏览器的支持也并不全面。
当 HTML5 来敲门
现今的互联网，大部分信息与服务都不再是一家独有，当大家都能提供相同的服务时，体验更好的将会被选择。用户选择了你，信任了你，才可能养活你。所以很多时候，企业要做的是，提升自己产品的体验，留住用户，让他们离不开，让他们掏了腰包依然觉得物有所值。当然，如果能让用户感受到物超所值就更好了。
企业期望着自己的产品更具竞争力；而作为技术人员，我们希望能把产品做得更完美。在拼用户体验的关键时刻，HTML5应景而生，敲响了我们的大门。它从性能、速度和操作的交互模式上，都给我们带来了全新的体验。我们想利用它。
对于HTML5的好，我相信你已经从很多地方看到。这里，我的重点会放在如何应对这个新事物上。可能讲的大部分都是前端应该做些什么，如何去做的事，但这也是在对所有希望提升自己产品的人说的。
（一）面对新的技术
从某种程度上来说，HTML5 并不是完全新生的技术。而是一个版本的升级，只是这次升级给我们带来了更多的东西。虽然这些东西大部分都还是一份草案，但浏览器厂商非常看重，都纷纷在竞争着去实现。而无论它是否草案，浏览器的支持，给了我们去做更好产品的机会。那么，去尝试吧。而作为前端，我们需要做的，能做到的有哪些呢？
技术的学习
对于新的标签的写法，按照是HTML4 和 XHTML1 的习惯，我们已经可以猜到怎么写。而具体的使用，根据
HTML5 设计原理所遵循的伯斯塔尔法则（Postel's Law），"发送时要保守，接收时要开放"，我们可以很好地理解。比如
<video /> 标签，设计时严格限定 <video /> 标签才是视频播放的标签，但接收的时候，可以有多种格式的
source:
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video> |
上文所述的改变，要学习，对我们的挑战并不大。HTML5 提供了各种新的 API、新特性，才才是学习的难点所在。比如
Canvas，要做好一个好的 Canvas 3D 应用，不止需要有编程的能力，还需要有图形学方面的知识。又比如Web
SQL Database，还需要前端学会处理数据库。当然，HTML5 的技术远远不止这些，并且很多新技术都还没有人给出相应应用的实现方式，以及最佳实践。学习起来还是有一定难度的。另外，HTML5
在一些浏览器是完全不支持的，比如 IE6、IE7（当然，拖放--Drag and Drop 微软本来就有了），这时要去做所有的折衷方案可能比较难，所以，如何去权衡优雅降级也是一个难题。但，想把一个产品做得完美，或者只是想把一件事做得完美，又有什么事是容易的呢？
技术的使用
（1）创新才能让技术真正改变我们的生活
我们面临的最大挑战应该是创新。他不像已有的很多技术，已经有很多实例给我们看，甚至把源代码都开放出来。这就需要我们去了解用户的需求，大胆去为用户想，创造出更便利的体验。比如
X-icon Editor：http://www.xiconeditor.com/，利用 Canvas
实现了一个与桌面程序一样的图片编辑器：
又如 Minus: http://min.us利用 File API 和 Drag and Drop
特性，实现了拖放上传的新体验：
这些创新。虽然在桌面软件上不算新鲜，但在 Web Application 上，都是新东西，是需要我们去实现的。而在最初，最直接的"创新"方式可能我们会是把更多桌面应用程序的好体验搬到
Web 上来。其实，这是非常不错的一种方案。因为很多人都习惯了桌面程序，如果 Web 提供了相应的功能，对于操作的方法，他们很快就会上手。这对于用户来说，减少了学习成本。轻松上手也是良好体验的一种。
（2）安全是我们应该时刻记住的
记得有一次我在使用 Google Docs 写一篇文档的时候，浏览器突然崩溃了。当时，就习惯性地想，如果
Google Docs 支持 LocalStorage（本地存储） 的话，那么，我下次打开，内容一定不会丢失。但仔细想想：
这是一份公司的内部分档，不希望被人外人看到
LocalStorage 会存储在用户使用的电脑上
那么这时，一定不适合用 LocalStorage 这种技术，而应该用 Ajax 自动保存。因为这本东西是内部（对外保密）的文档，如果用户是在公共电脑上使用，可能会造成涉密。相应的，像我们使用
Web SQL Database 这种客户端的数据储存，就更需要有安全意识了。哪些是可以用的，哪些是不可以用的，应该要做好规划和检查。不要让简单的
localStorage.setItem 暴露了用户的隐私。
当然，可能会有人说这是一种设计的不严谨。我想，这种出发点是好的。技术本身本来就是中立的，它只要提供更多方便、灵活的特性给我们，而具体如何去正确运用，应该是作为程序员应该去思考的。
（3）规范需要统一
Jeremy Keith 在 Fronteers 2010 上说的 HTML5 设计原理告诉我们，HTML5
最大的一个特点是: 兼容。比如 <input type=alipay> 和 <input
type="alipay"> 这样的标签的合格的，写属性的时候可以不用引号，
标签可以自闭合也可以不闭合。而在结构上，甚至可以写这样的标签：
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a> |
这对于写惯了 XHTML 的我们，可能很难接受。但程序这样设计了，它也给我们带来了更多的灵活，虽然与我们已有的风格有所冲突。我们当然希望可以按照这些灵感，用自己的风格去编码，但团队合作最忌的就是没有统一的风格，这会阻碍我们前进的步伐。因此，面对
HTML 5，我们需要一套规范，来让我们的团队更好地进行协作，而不是阻碍协作。
（二）面对其他部门的人员
作为对HTML5 最了解的一群人。前端应该负责去推动这样的技术应用。当然，并不是说只有前端才希望产品有更好的体验，而更多的是因为，只我们了解。想要应用新的技术，创建新的体验。只有执行的这群人了解了相应的，才有可能用上。对于交互设计师、视觉设计师和后端（服务端）工程师，还需要我们去告诉他们。而这也是我们的职责所在。
比如，你要告诉交互设计师，现在 Web 上 Drag and Drop 的支持比较好了，可以设计一些这方面的交互方式；你要去告诉视觉设计师，Drag
and Drop 的事件过程，让他们像知道 a:hover 一样，会给你设计出鼠标经过时的样式；你还要去告诉后端工程师，其实
cookie 有时候已经用不了上，因为在IE我们可以用 userData，而其他的可以用 LocalStorage
来实现 ，这样可以不在 Header 中传送，页面将会更快。
需要我们前端去做的，除了去学习，去做，就是去告诉他们有哪些新东西，甚至让他们也学习一点这方面的知识。只有他们了解了这些，将产品设计和前后端技术配合起来，对产品才可能有质的提升。
总结
其实这一切，所有的新技术。都是为了更美好的生活而做的。HTML5 也是。或许某天我们再也不需要写像引用
flash 这样晦涩的代码了，而只要写像 <video src="movie.mp4"
/> 这样简单的标签。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=6,0,40,0" WIDTH="100%" HEIGHT="100%" id="someflash">
<param name="movie" value="someflash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="someflash.swf" quality="high" wmode="transparent" width="100%"
height="100%" name="someflash" align=""
type="application/x-shockwave-flash"
luginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object> |
所以，我们应该以更开放的心态去接纳。像伯斯塔尔法则（Postel's Law）所说的：发送时要保守，接收时要开放。当
HTML5 来敲门，我们应该用更开放的心去接纳，用更严谨的态度来编码。 |
