《人一个半月 IE10优化版cnBeta诞生记》由会员分享，可在线阅读，更多相关《人一个半月 IE10优化版cnBeta诞生记（7页珍藏版）》请在金锄头文库上搜索。
1、3人一个半月人一个半月 IE10优化版优化版 cnBeta 诞生记诞生记(首发：魔法墙 http:/ )这两年来，已经有不少互联网产品开始应用响应式设计，以跨越不同设备和浏览器的限制。 而自从 IE10发布之日起，各种声音就围绕在开发者们的周围。 作为响应式设计的攻城利 器，IE10增加了对十几种 HTML5 API 的支持，例如 Web Sockets、Web Workers、历史 API、拖曳 API 和文件 API，访问微软 IE10开发者指南可以看到完整的支持列表。而如何 通过 HTML5技术为一个传统布局的站 点快速开发出基于瀑布流风格的响应式版，也是开 发者们关注的热点话题。IE1
2、0优化版的 cnBeta 日前，CSDN 记者专访了逻辑适点商业传播设计公司项目总监邹颂兵(以下简称 Saber)，他 们和 cnBeta 合作，在 IE10下，完全运用 HTML5技术开发出了支持触控、瀑布流式布局的 新版本。给国内用户带来一种全新的新闻浏览体验，同时也希望能够给业界 HTML5的运 用提供一些参考。 CSDN 记者：这个项目如何分工，开发周期多长，如何划分开发周期？开发环节中遇到了记者：这个项目如何分工，开发周期多长，如何划分开发周期？开发环节中遇到了 哪些问题，其中哪部份最耗时？如何解决的？哪些问题，其中哪部份最耗时？如何解决的？ 邹颂兵：邹颂兵：项目开发团队共三人，一个
3、主开发，一人主设计，一个统筹整个项目，敏捷开发， 快速迭代。分工上主要有项 目管理、交互设计、UI 设计和开发四个部分。开发方面从最 初的原型搭建到网站上线总共是一个半月的时间。开发周期是这样划分的：原型搭建和页 面元素效果实 现1周；后台数据处理3天；前后台数据联调（处理后台数据并显示在前端） 3天；十大文章实现1周；调试2周。 开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类：开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类： 1). 不同分辨率的碎片化问题不同分辨率的碎片化问题 不同的屏幕分辨率需要设计不同的信息呈现方式，在页面布局和功能上都要进行相应调整，
4、这过程中会有很多繁杂的问题，比如当浏览器宽度小于560px 的时候，文章操作栏占据太多屏幕空间，因此在应该针对这种情况重新设计它的功能和交互方式(如图1-1, 1-2所示)：图1-1： 浏览器宽度 560px 的操作栏样式图1-2： 浏览器宽度 中定义的是 UI 控件， 里面一定是下面这段文章 的摘要，这样就缩短了理解时间。以我们的项目为例，单独一篇文章由三部分组成：文章 内容，评论和操作控件组成。文章内容 用标签表示，其中的标题、发表时间等信 息被包含在标签中，具体内容放到一 个标签里。评论部分可以看做是一 个“侧边栏”，因此使用标签表示，每条评论都是一 个。操作控件起到导航的作 用，你可以
5、关闭文章，查看上一篇和下一篇文章以及分享，因此我们用来标记这个 导航。 我们使用 jQuery template 将各个部分做成不同的模板，这样就可以使用对应的 API 从服务器获取数据渲染这些模板并插入到 DOM 中，语义化的文档结构帮助我们将文章 页 的各个部分轻松拆分，从而设计成不同的模板。另外，IE10还支持拖放操作、web sockets 以及 web worker 等 HTML5功能，很值得大家尝试。 IE10对于 CSS3也有很好的支持，你可以使用 CSS3的3D 变换，动画，弹性盒布局及多列排 布方式等等，而且这些 API 都是经过 IE10硬件加 速过的，因此执行效率相比不使
6、用硬件 加速技术的浏览器来说会提高很多。我们的项目使用了 CSS3 transition 功能实现按钮状态 的渐变切换效果，顶部导航的颜色是用 CSS3 gradient 做的的渐变色；十大人气文章的翻页 和折角效果是使用 turn.js 实现的，它用到的是 transform、rotate、 translate 和 gradient：每 一页文章由显示文章内容的区域 div-1和阴影区域 div-2组成，文章翻页的过程实际是使用 rotate 和 translate 对 div-1角度和位移进行修改，通过 transform 使它产生形变(如图1-3所示)：图1-3： 使用 transfor
7、m、rotate 和 translate 使 div-1产生形变 为使翻页效果更加立体，turnjs 使用 gradient 为翻页过程加入阴影效果(div-2)，阴影是根据 书页的形变而实时变化的，原理是通过实时计算 gradient 的停止位置(end point)获得，如图 1-5所示：图1-4： 使用 gradient 生成的动态变化的阴影效果 通过使用 MS Pointers API 加入对 IE10手势操作的支持，我们最终为十大人气文章营造出了 真实翻书的感受。在 IE10硬件加速技术的帮助下，大量 CSS3的形变、位移和角度变换的 计算工作都转移到 GPU 上面，保证翻书的过程更
8、加自然流畅。 我们使用 media query，针对不同浏览器宽度，实现文章页的响应式布局，针对1).宽度大于 1230px；2).宽度在1230px 和560px 之间；3).宽度小于 560px 为文章内容、评论和文章操 作栏定义了不同的排布样式。响应式布局最大的好处就在于，你不用考虑设备。对于我们 的项目而言，我们只需要在桌面浏览器上面为每 一个宽度范围设计一个最适合阅读的文章样式，再针对不同的移动设备进行微调，增减功能就可以了。在此之前的最重要工作就是 对 CSS 进行模块化设计，首先定 义好不变的样式属性，在 media query 中只操作那些可变 属性，这对于开发和调试有很大的帮
9、助。 CSDN 记者：您如何看待记者：您如何看待 HTML5未来的发展？未来的发展？ 邹颂兵：邹颂兵：我们觉得，HTML5，CSS3和和 JS 是现在唯一一个跨平台支持的技术，无论是构建是现在唯一一个跨平台支持的技术，无论是构建 网网 站还是站还是 Web App 都能高效地发布到各个平台。都能高效地发布到各个平台。HTML5确实做不到确实做不到 Write once, run everywhere, 不过只要肯去优化，整个跨平台的开发还是很高效的，这是我做不过只要肯去优化，整个跨平台的开发还是很高效的，这是我做 IE10优化版优化版 的的 cnBeta 的体会。的体会。 HTML5设计的初衷
10、就是使网站能够真正变成功能性和响应率都能与本地应用相媲美的网络 应用，沿着这个思路，问题就指向了 HTML5能否形成像现在的应用商店一样的生态系统 与之抗衡。最重要的，对于用户而言，最重要的，对于用户而言，HTML5应用会比本地应用更好吗？答案是：谁也应用会比本地应用更好吗？答案是：谁也 不知道。不知道。但 是我们能够看到，浏览器性能变得越来越强大，你能够在 IE10上面体验 Cut The Rope，Contre Jour 这样的从移动端移植过来的游戏，无数人在邮件组里讨论如何用 Backbone.js 构建大型 web app。我们看到了它的发展，但回过头来，又要面对各个浏览器 的执行效率
11、、兼容和 bug 等等问题。这是一个循环，只有开发者不断尝试、反馈问题，平 台厂商 才会知道如何改进；只有执行平台更加健壮，开发者才愿意在为它开发更棒的应用， 吸引更多用户，因此 HTML5未来的发展取决于我们自己。 值得指出的是，并不是只有浏览器才支持 HTML5，Windows 8 已经支持通过 HTML5构建 的本地应用，所以未来 HTML5和 JS 能也可以成为一个本地应用的开发技术。 CSDN 记者：记者：IE10优化版的优化版的 cnBeta 如何采用响应式设计的？遇到了哪些问题、如何解决的？如何采用响应式设计的？遇到了哪些问题、如何解决的？邹颂兵：邹颂兵：我们使用 media q
12、uery，针对不同浏览器宽度，实现文章页的响应式布局。浏览器 宽度大于1230px，文章的评论放到内容的右侧，文章的操作栏置于评论的右侧；宽度在 1230px 到560px 之间，评论放到文章内容的下方，操作栏贴靠在它们的右侧，我们将文章 整体宽度设定在浏览器宽度的80%，居中，这样的话，竖排排 布时的内容就不会显得很满， 影响阅读效果；宽度小于560px，可用面积已经很小，因此我们将文章和评论内容的宽度设 为100%，隐藏文章操作栏，需要的 时候调出即可。 在开发中遇到了两个小问题：在开发中遇到了两个小问题： 计算相对宽度计算相对宽度 浏览器宽度在1230px 和560px 之间时，我们开始
13、将文章整体宽度设定在浏览器宽度的 80%，文章内容的宽度为该宽度的90%。为了保证紧贴在 文章右侧的操作栏不会随着浏览 器宽度变化而变形，我们给它一个定宽60px，这就有问题了，文章内容宽度会以文章整体 宽度的90%进行变化，但是操作栏宽 度并不是10%，因此随着浏览器宽度缩小，文章和操 作栏之间就会出现一条越来越窄的缝隙。我们使用 CSS calc()解决的这个问题，它是用于 计算相对长度的 CSS 函数，只要将文章内容的宽度变成 calc(100% - 60px)就可以了 （webkit 和 moz 浏览器需要加相应前缀） 。而对于不支持 calc 的浏览器，仍设置其宽度为 90%。 在在
14、 js 中使用中使用 media query 当页面样式根据 media query 定义的宽度范围发生改变时，我们希望 js 在这个时候能做点 事情，但是用 js 检测到的宽度和 media query 定义的宽度不匹配，解决方法是使用 Modernizr 提供的 mq 函数来匹配 CSS 中定义的 media query，也可可以使用 Enquire.js 之类 的 js 库。 CSDN 记者：在设计方面，尤其是瀑布流和记者：在设计方面，尤其是瀑布流和 ui 的设计上，你们有哪些考虑，有什么注意事的设计上，你们有哪些考虑，有什么注意事 项？项？邹颂兵：邹颂兵：在设计上，之所以采用瀑布流的形
15、式，是因为 cnBeta 内容量非常大，每天更新很 频繁，而且文章没有明确的分类，这种聚合式的内容很适合瀑布流排版，这个排版尽可能 多的利用不同分别率展现内容，并且通过无限下拉的滚动加载方式，也很好地让用户方便 查看更多文章。 UI 方面，我们一是要与 cnBeta 本身的品牌风格统一，不能让用户觉得“哇，这还是 CB 吗”。 另一个就是我们是从一款 Web App 的角度去定义这个体验的，那么当在 IE10全屏浏览时， 界面上的按钮是否足够满足用户的操作需求、按钮的大小是否适合触摸等，都是需要考虑 的问题。 CSDN 记者：该项目中用到了哪些开发工具或框架或开源产品？记者：该项目中用到了哪些
16、开发工具或框架或开源产品？ 邹颂兵：用到的开源邹颂兵：用到的开源 js 库包括库包括 1). modernizr: 低版本浏览器的功能检测和优雅降级； 2). turn.js: 十大人气文章的翻书效果； 3). jquery masonry + infinitescroll: 实现新闻的瀑布流布局和无限加载功能； 4). jquery nicescroll: 改变浏览器滚动条的样式、滚动速率等； 5). jquery templates: 基于 HTML 的模板，允许在 HTML 中定义变量，使用 js 对象或数组 定义的数据给变量赋值后，模板就变成普通的 HTML 片段，可通过 jquery 插入到 DOM 中。 我们根据 cnBeta 提供的后台接口定义了不同的模板，使用从服务器获得的数据渲染对应的 模板，插入到 DOM 中； 6). jquery tipsy: 生成类似 Facebook 消息提醒框的控件； 7). trunk8: 根据文本框的尺寸裁剪文字，用于新闻摘要； 开源开源 CSS 框架：框架： 1). SASS SASS
