最新消息:

响应式设计实战:3人一个半月 IE10优化版cnBeta诞生记

365bet开户 采集侠 浏览 评论

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文件能让你对元素的结构一目了然:<nav>中定义的是UI控件,<summary>里面一定是下面这段文章的摘要,这样就缩短了理解时间。以我们的项目为例,单独一篇文章由三部分组成:文章内容,评论和操作控件组成。文章内容用<article>标签表示,其中的标题、发表时间等信息被包含在<header>标签中,具体内容放到一个<section>标签里。评论部分可以看做是一个“侧边栏”,因此使用<aside>标签表示,每条评论都是一个<li>。操作控件起到导航的作用,你可以关闭文章,查看上一篇和下一篇文章以及分享,因此我们用<nav>来标记这个导航。我们使用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产生形变

注:相关网站建设技巧阅读请移步到建站教程频道。

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)
    • 验证码 点击我更换图片

    网友最新评论