ios客户端发现_动画屋后期页面重构与悬浮评论分享模块开发项目总结
2014-07-09 15:33
691 查看
从“看世界杯送流量”项目,遇到响应式布局问题之后,专门钻研了这方面专业的书籍,同时阅读了相关文章。响应式布局简单的说就是使开发的页面在不同设备上都有友好的效果。而最开始“暑期动画屋”的项目,当时并没有采用响应式布局,虽然ipad上可用,其他设备则会有显示问题。这也暴露了,目前所在移动业务事业部前端的问题:
1.考虑到响应式布局在不同设备上,UI设计师只给了一套UI原型图,而在不同设备上的显示只是根据前端工程师的理解或个人偏好来完成布局。从产品经理的角度以及测试的角度,也并没有对此有极致的要求,基本功能满足即可。这一点需要与UI沟通。
2.从移动化大趋势来考虑,公司设立移动业务事业部方向正确,在执行细节问题上并没有“移动化”。前端工程师的测试机仅限于自己的手机或者产品经理的ipad或iphone,而具体爱奇艺用户分布并没有数据来支撑,以至于在产品面向ipad或者产品面向iphone上摇摆不定。所以开发前,搞清楚目标用户是哪些,申请足够的测试机。
从六个月后,重构的角度看以上两个问题,第一个问题是不成立的,原型图是展现场景的2倍构建的,采用PS测量将所有数据除以2即为需要展现的大小。UI设计师还是很专业的。第二个问题,貌似HTML5兴起的太突然,大部分公司给前端工程师都没有足够的机型支持度。
乐帝对项目进行中页面进行了重构。下载地址为:http://download.csdn.net/detail/yingyiledi/8292205
重构效果图:
项目介绍
(一).“暑期动画屋活动”中后期页面的开发
本项目是对之前没有适配,项目的重构。以前曾有文章指出,看自己的半年前的代码无法阅读。而这个项目与自己之前写代码相隔不久,而从重构的角度考虑,并不能轻松的移植。于是采取了比较极端的重构方法:重写。这次重写也是应用响应式布局技巧、独立适配的第一个项目。
与之前重构项目类似,当初在爱奇艺实习对css的掌握很初级。此次重构主要对项目中涉及到的图片和按钮,都通过背景图来实现。并设置背景尺寸,来保证尺寸上匹配。
按钮通过设置父元素相对定位,按钮元素设置绝对定位,构造与父元素的相对关系。
对于行内元素span不要设置换行和空格,否则会有间隙。
(二).活动中“分享评论模块”的开发
1.项目的需求
开发一个可以应用到各种活动的分享和评论的模块,适用于手机,不用于平板显示。
效果图:
重构后地址如下:http://download.csdn.net/detail/yingyiledi/8293395
重构对于结构与样式上的修改,仍然将图片设置为背景图,并采用padding-left构造与文字间距。
采用浮动构造出两个块级元素左右分割。
2.结构非常简单,主要采取fixed定位并设置z-index保证在最上层即可。
3.交互方面主要处理两方面问题:
进入页面获取后台数据
点击左右按钮有文字及背景上的变化,同时跳转到相应页面。
这里面涉及到对安卓和ios设备的检测。代码如下:
这里采用userAgent属性探测设备类型,从而跳转不同的页面。
主要交互函数如下:
1.考虑到响应式布局在不同设备上,UI设计师只给了一套UI原型图,而在不同设备上的显示只是根据前端工程师的理解或个人偏好来完成布局。从产品经理的角度以及测试的角度,也并没有对此有极致的要求,基本功能满足即可。这一点需要与UI沟通。
2.从移动化大趋势来考虑,公司设立移动业务事业部方向正确,在执行细节问题上并没有“移动化”。前端工程师的测试机仅限于自己的手机或者产品经理的ipad或iphone,而具体爱奇艺用户分布并没有数据来支撑,以至于在产品面向ipad或者产品面向iphone上摇摆不定。所以开发前,搞清楚目标用户是哪些,申请足够的测试机。
从六个月后,重构的角度看以上两个问题,第一个问题是不成立的,原型图是展现场景的2倍构建的,采用PS测量将所有数据除以2即为需要展现的大小。UI设计师还是很专业的。第二个问题,貌似HTML5兴起的太突然,大部分公司给前端工程师都没有足够的机型支持度。
乐帝对项目进行中页面进行了重构。下载地址为:http://download.csdn.net/detail/yingyiledi/8292205
重构效果图:
项目介绍
(一).“暑期动画屋活动”中后期页面的开发
本项目是对之前没有适配,项目的重构。以前曾有文章指出,看自己的半年前的代码无法阅读。而这个项目与自己之前写代码相隔不久,而从重构的角度考虑,并不能轻松的移植。于是采取了比较极端的重构方法:重写。这次重写也是应用响应式布局技巧、独立适配的第一个项目。
与之前重构项目类似,当初在爱奇艺实习对css的掌握很初级。此次重构主要对项目中涉及到的图片和按钮,都通过背景图来实现。并设置背景尺寸,来保证尺寸上匹配。
.header { width: 100%; height: 362px; background: url(background.jpg) no-repeat 0 0; background-size: 100% 362px; position: relative; }
按钮通过设置父元素相对定位,按钮元素设置绝对定位,构造与父元素的相对关系。
.button { display: block; width: 167px; height: 52px; background: url(download.png) no-repeat 0 0; background-size: 157px 52px; position: absolute; top: 228px; right: 100px; }
对于行内元素span不要设置换行和空格,否则会有间隙。
<div class="content"> <div class="title-content">获奖结果统计中…</div> <div class="time-content"> 2014年6月16日<span class="small-content">公布获奖名单</span> </div> </div>
(二).活动中“分享评论模块”的开发
1.项目的需求
开发一个可以应用到各种活动的分享和评论的模块,适用于手机,不用于平板显示。
效果图:
重构后地址如下:http://download.csdn.net/detail/yingyiledi/8293395
重构对于结构与样式上的修改,仍然将图片设置为背景图,并采用padding-left构造与文字间距。
.share-comment-module .button { display: inline-block; font-size: 16px; height: 20px; line-height: 20px; background-size: 20px; padding-left: 28px; margin-top: 15px; } .share { background: url(../images/share-btn.png) no-repeat 0 0; }
采用浮动构造出两个块级元素左右分割。
.share-comment-module { float: left; width: 49%; text-align: center; }
2.结构非常简单,主要采取fixed定位并设置z-index保证在最上层即可。
.share-comment-module-container { color: #FFF; width: 100%; height: 50px; background-color: #000; opacity: 0.5; position: fixed; bottom: 0; right:0; left:0; z-index:9999; }
3.交互方面主要处理两方面问题:
进入页面获取后台数据
点击左右按钮有文字及背景上的变化,同时跳转到相应页面。
这里面涉及到对安卓和ios设备的检测。代码如下:
var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/); if(agentID.indexOf("iphone")>=0){ } if(agentID.indexOf("android")>=0){}
这里采用userAgent属性探测设备类型,从而跳转不同的页面。
主要交互函数如下:
function getCommentNum() { $.get("http://api.t.iqiyi.com/qx_api/comment/get_video_comments", { qitanid: 8000164, qitan_comment_type: 5, sort: "add_time", need_total: 1 }, function(data) { commentNum = data["data"]["count"]; $(".comment-num").html("(" + commentNum + ")"); }, "json"); } function bindEvent() { $(".share").mousedown(function() { $(".share").css({ "color": "#85c210", "background-image": 'url(images/share-btn-active.png)' }); if (agentID.indexOf("iphone") >= 0) { window.location.href = "iqiyi://share?p=wx&t=1&d=%7B%22text%22%3A%22%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%E4%BA%B2%E6%B5%8B%E5%8F%AF%E7%94%A8%E5%95%8A%22%2C%22url%22%3A%22http%3A%2F%2Fwww.baidu.com%22%2C%22pic%22%3A%22http%3A%2F%2Favatar.csdn.net%2FC%2FF%2F8%2F1_volcan1987.jpg%22%7D"; } if (agentID.indexOf("android") >= 0) { callJavaMethod(this); } }).mouseup(function() { $(".share").css({ "color": "#FFF", "background-image": 'url(images/share-btn.png)' }); }); // 字体颜色修改、背景图修改、跳转 $(".comment").mousedown(function() { $(".comment").css({ "color": "#85c210", "background-image": 'url(images/review-btn-active.png)' }); if (agentID.indexOf("iphone") >= 0) { window.location.href = "iqiyi-phone://com.qiyi.video/res?pid=9&aid=&tvid=&url=sdfasdf&ftype=1&subtype=22&qitanid=8000164&qitan_comment_type=5"; } if (agentID.indexOf("android") >= 0) { window.location.href = "iqiyi-phone://com.qiyi.video/res?pid=9&aid=&tvid=&url=sdfasdf&ftype=1&subtype=2&qitanid=8000164&qitan_comment_type=5"; } }).mouseup(function() { $(".comment").css({ "color": "#FFF", "background-image": 'url(images/review-btn.png)' }); }); }
相关文章推荐
- ios客户端发现_动画屋活动获奖展示和获奖模块开发总结
- 客户端发现_观影团活动页面开发与客户端新版跳转测试页面开发项目总结
- iOS开发笔记--iOS基于MVC的项目重构总结
- ios客户端发现_世界杯送流量活动项目总结
- ios客户端发现_华为爱奇艺手机活动开发总结
- ios客户端暑期“动画屋“活动项目总结
- iOS开发小技巧--适当的清空模型中的某个数据,达到自己的需求,记得最后将数据还原(百思项目评论页面处理最热评论)
- Windows Phone 7微博客户端开发之项目总结升级篇
- ios小项目——新浪微博客户端总结
- ios开发学习-页面控制样式翻页、文字、颜色等效果源码分享
- ios开发学习--动画(Animation)效果源码分享--系列教程1
- ios小项目——新浪微博客户端总结
- ios开发学习--动画(Animation)效果源码分享--系列教程1
- ios开发学习--动画(Animation)效果源码分享--系列教程1
- wpf首次项目开发技术总结wpf页面
- 菜鸟成长日记之新手备忘录-IOS开发第一个项目总结
- ios开发学习--动画(Animation)效果源码分享--系列教程2
- 不知道大家知道不知道,iOS开发,web页面的链接的active属性无效,但是今天发现一个hack办法可以让Css的active有效
- ios开发学习--动画(Animation)效果源码分享
- ios小项目——新浪微博客户端总结