CSDN报道(付江/文)这两年来，已经有不少互联网产品开始应用响应式设计，以跨越不同设备和浏览器的限制。而自从IE10发布之日起，各种声音就围绕在开发者们的周围。作为响应式设计的攻城利器，IE10增加了对十几种HTML5 API的支持，例如Web Sockets、Web Workers、历史API、拖曳API和文件API，访问微软IE10开发者指南可以看到完整的支持列表。而如何通过HTML5技术为一个传统布局的站点快速开发出基于瀑布流风格的响应式版，也是开发者们关注的热点话题。
IE10优化版的cnBeta
日前，CSDN记者专访了逻辑适点商业传播设计公司项目总监邹颂兵(以下简称Saber)，他们和cnBeta合作，在IE10下，完全运用HTML5技术开发出了支持触控、瀑布流式布局的新版本。给国内用户带来一种全新的新闻浏览体验，同时也希望能够给业界HTML5的运用提供一些参考。
CSDN记者：这个项目如何分工，开发周期多长，如何划分开发周期?开发环节中遇到了哪些问题，其中哪部份最耗时?如何解决的?
邹颂兵：项目开发团队共三人，一个主开发，一人主设计，一个统筹整个项目，敏捷开发，快速迭代。分工上主要有项目管理、交互设计、UI设计和开发四个部分。开发方面从最初的原型搭建到网站上线总共是一个半月的时间。开发周期是这样划分的：原型搭建和页面元素效果实现1周;后台数据处理3天;前后台数据联调(处理后台数据并显示在前端)3天;十大文章实现1周;调试2周。
开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类：
1). 不同分辨率的碎片化问题
不同的屏幕分辨率需要设计不同的信息呈现方式，在页面布局和功能上都要进行相应调整，这过程中会有很多繁杂的问题，比如当浏览器宽度小于560px的时候，文章操作栏占据太多屏幕空间，因此在应该针对这种情况重新设计它的功能和交互方式(如图1-1, 1-2所示)：
图1-1： 浏览器宽度 > 560px 的操作栏样式
图1-2： 浏览器宽度 < 560px 的操作栏样式
开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类：
我们在原型设计的时候没有考虑到这种情况，因此在开发中代码结构也要在后期进行调整，这也提醒我们细致的原型设计的重要性。
2). 浏览器兼容性调试
对于某个技术，某个浏览器可能有自己的实现版本，或者根本无法实现。比如移动版safari上文章页的位置总是有问题，原因是我们用CSS的calc计算文章位置来显示文章页，而该浏览器对calc的支持不好，最后我们换成jquery来实现。
3). CSS的维护与扩展
随着web app的结构越来越复杂，CSS文件的规模也会越来越庞大，因此如何在程序设计时规划好样式文件，从而降低CSS的开发、维护成本，提高可扩展性是非常重要的。我们使用SASS和Compass解决这个问题。SASS是CSS3的扩展语言，不仅拥有CSS3的语法和功能，同时增强了CSS的可编程性;Compass则是基于SASS的框架，帮助人们解决浏览器兼容、样式重置等问题，提高开发速度。SASS和Compass使得我们的样式文件变得更加结构化——首先是样式定义的结构化，SASS允许元素样式的嵌套定义，因此可以将子元素的样式定义在父元素中，这样，样式的结构就变得一目了然，便于今后的维护扩展，同时保证了深层级的元素样式能够被正确定义，避免写大量重复代码;其次是文件的结构化，比如我们定义了基本样式文件，将样式重置等基本设置代码都放到这里，同时SASS还支持变量定义，因此可以将ui的颜色定义成变量放进来，在其他文件中通过“@import”引用这个文件，就能使用该变量。这样的话，我们就相当于有了一个全局的“配置文件”，在这里做一处修改能够作用与全部文件。同时，还可以为那些重要的HTML元素的样式定义单独建立SASS文件，方便查找和修改，在部署前，使用Compass将文件合并就可以了。
CSDN记者：IE10对HTML5的支持体现在哪些地方?在该项目中如何体现?
邹颂兵：相比IE9，IE10支持更多HTML5标签，使开发者能够写出语义更加清晰的HTML文件，这对于开发和维护一个web app来说帮助很大。更具语义化的HTML文件能让你对元素的结构一目了然：中定义的是UI控件，
- 。操作控件起到导航的作用，你可以关闭文章，查看上一篇和下一篇文章以及分享，因此我们用来标记这个导航。我们使用jQuery template将各个部分做成不同的模板，这样就可以使用对应的API从服务器获取数据渲染这些模板并插入到DOM中，语义化的文档结构帮助我们将文章页的各个部分轻松拆分，从而设计成不同的模板。另外，IE10还支持拖放操作、web sockets以及web worker等HTML5功能，很值得大家尝试。
IE10对于CSS3也有很好的支持，你可以使用CSS3的3D变换，动画，弹性盒布局及多列排布方式等等，而且这些API都是经过IE10硬件加速过的，因此执行效率相比不使用硬件加速技术的浏览器来说会提高很多。我们的项目使用了CSS3 transition功能实现按钮状态的渐变切换效果，顶部导航的颜色是用CSS3 gradient做的的渐变色;十大人气文章的翻页和折角效果是使用turn.js实现的，它用到的是transform、rotate、translate和gradient：每一页文章由显示文章内容的区域div-1和阴影区域div-2组成，文章翻页的过程实际是使用rotate和translate对div-1角度和位移进行修改，通过transform使它产生形变(如图1-3所示)：
图1-3： 使用transform、rotate和translate使div-1产生形变
为使翻页效果更加立体，turnjs使用gradient为翻页过程加入阴影效果(div-2)，阴影是根据书页的形变而实时变化的，原理是通过实时计算gradient的停止位置(end point)获得，如图1-5所示：
图1-4： 使用gradient生成的动态变化的阴影效果
通过使用MS Pointers API加入对IE10手势操作的支持，我们最终为十大人气文章营造出了真实翻书的感受。在IE10硬件加速技术的帮助下，大量CSS3的形变、位移和角度变换的计算工作都转移到GPU上面，保证翻书的过程更加自然流畅。
我们使用media query，针对不同浏览器宽度，实现文章页的响应式布局，针对1).宽度大于1230px;2).宽度在1230px和560px之间;3).宽度小于560px 为文章内容、评论和文章操作栏定义了不同的排布样式。响应式布局最大的好处就在于，你不用考虑设备。对于我们的项目而言，我们只需要在桌面浏览器上面为每一个宽度范围设计一个最适合阅读的文章样式，再针对不同的移动设备进行微调，增减功能就可以了。在此之前的最重要工作就是对CSS进行模块化设计，首先定义好不变的样式属性，在media query中只操作那些可变属性，这对于开发和调试有很大的帮助。
CSDN记者：您如何看待HTML5未来的发展?
邹颂兵：我们觉得，HTML5，CSS3和JS是现在唯一一个跨平台支持的技术，无论是构建网站还是Web App都能高效地发布到各个平台。HTML5确实做不到Write once, run everywhere, 不过只要肯去优化，整个跨平台的开发还是很高效的，这是我做IE10优化版的cnBeta的体会。
HTML5设计的初衷就是使网站能够真正变成功能性和响应率都能与本地应用相媲美的网络应用，沿着这个思路，问题就指向了HTML5能否形成像现在的应用商店一样的生态系统与之抗衡。最重要的，对于用户而言，HTML5应用会比本地应用更好吗?答案是：谁也不知道。但是我们能够看到，浏览器性能变得越来越强大，你能够在IE10上面体验Cut The Rope，Contre Jour这样的从移动端移植过来的游戏，无数人在邮件组里讨论如何用Backbone.js构建大型web app。我们看到了它的发展，但回过头来，又要面对各个浏览器的执行效率、兼容和bug等等问题。这是一个循环，只有开发者不断尝试、反馈问题，平台厂商才会知道如何改进;只有执行平台更加健壮，开发者才愿意在为它开发更棒的应用，吸引更多用户，因此HTML5未来的发展取决于我们自己。
值得指出的是，并不是只有浏览器才支持HTML5，Windows 8 已经支持通过HTML5构建的本地应用，所以未来HTML5和JS能也可以成为一个本地应用的开发技术。
(责任编辑：leonlee07)
