世界杯如火如荼的进行,视频网站类似于门户网站,需要快速根据外部环境更新内容。产品经理需要策划活动,并安排实施。这个活动就是在这样背景下产生的,爱奇艺与运营商合作,实现双赢。爱奇艺可以通过运营商向海量用户发送短信的方式,提高用户数,运营商通过爱奇艺视频平台给用户更多种多样的福利,提高用户黏性。
总的来说:运营商有用户,视频网站有内容。用户需要内容,有内容的需要用户,有用户的需要满足用户内容的需求。两者优点突出、需求明显合作水到渠成。另外爱奇艺将运营商作为大客户管理,保证了协同作战的机动性。
书归正传,这个“看世界杯送流量”的项目正是在运营商和爱奇艺双赢的局面下,借着世界杯的东风产生的。活动的形式用户每天看半小时视频会获得虚拟啤酒一罐,每次打开啤酒会有中流量包的机会,如果没有打开也会有个能量积攒的过程,如果能量足够多也可以获得流量包。获取流量包会跳转到手机号输入页面,而我正是负责这个页面的开发。上线界面效果。
本项目重构方向主要从引入simpleModal插件,对原有遮罩代码进行替换,simpleModal插件可以自动化设置遮罩。文档遵循jQuery插件通过设置html类与js参数设置遮罩状态,并设有回调方法。此项目并没有设置回调方法。仅是写好遮罩数据结构与样式部分,并设置默认隐藏。设置Modal方法即可自动水平垂直居中,减少了大量代码的书写。
重构后代码地址:http://download.csdn.net/detail/yingyiledi/8319317
项目介绍
(一).“看世界杯送流量活动手机号验证开发”
本活动页面开发的主要需求:
-
手机号输入框和按钮
-
弹出框
2.结构(HTML):
根据分析内容构造HTML:
-
将上述两部分内容放入一个外层div中,每个部分内容再加div包裹,添加语义化标签。
3.样式(CSS):
此处的样式是这次项目遇到最大的问题,前一个项目没有考虑移动端适配的问题。而这个项目暴露了这个问题,首先讲解适配的使用,其次是遮罩层的特效讲解。
- 适配初步
顾名思义,使得设计的内容适应不同设备屏幕尺寸。
<strong><span style="font-family:FangSong_GB2312;font-size:18px;"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"/></span></strong>
ViewPort <meta>标记用于指定用户是否可以缩放Web页面。如可以,那么最大、最小缩放比例。使用ViewPort <meta>标记还表示文档针对移动设备进行了优化。ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。
上述为对页面是否可缩放的设置,接下来一个更重要的概念是媒体查询,媒体查询这个链接是对媒体查询比较详细的描述。总而言之:媒体查询是通过设置在不同媒体条件下,显示不同样式,从而达到不同的渲染效果。即针对不同设备条件,写了多份css代码,以适应不同的显示需求。由媒体查询概念的使用,催生了响应式布局这门技术,这篇链接文章是对响应式布局核心内容的大体介绍。
实习单位也有自己的响应式布局css适配文件,这里看一部分代码内容:
@media only screen and (max-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:320px}
}
@media only screen and (max-width: 360px) and (min-width: 320px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:360px}
}
如上对单位给定的这个适配文件媒体查询的分析可以得出如下结论:
(1)此文件给出的媒体查询根据屏幕宽度来查询媒体,并进行不同的样式设置。
(2)这里媒体查询根据不同设备宽度设置字体的大小和可是区域的大小。同时应用此媒体查询应该将包裹所有内容的最外层div设置成viewport类。
(3)设置各个标签宽度时,除非根据不同媒体设置不同宽度,否则不能使用像素宽,而是使用百分比。即布局有两种方法①.根据不同媒体设置不同宽度 ②.统一用百分比表示宽度。
<div id="viewport" class="viewport">
</div>
上述两图为分别在chrome上模拟ipad和ipnoe上显示的效果,从css栏中可以看出,根据媒体的不同,媒体查询出相应的样式进行了渲染。
- 弹出窗特效
弹出窗特效的原理:
(1)弹出框中的内容放置在一个特殊的DIV层中,然后默认隐藏它(即初始不可见,display:none)。
(2)当用户执行某个动作时,我们将之前设置好的隐藏层显示在所有页面元素的最上层(将使用JS操作实现)。
(3)在弹出DIV窗口中设 置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。
弹出窗实现,构造外层div,这里外层div的样式设置非常重要:
.dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
height:100%;
width:100%;
background-color: rgba(0, 0, 0, .7);
}
这里dialog类为最外层标签下viewport类下的div,默认隐藏此标签,当脚本触发出现时,通过fixed设置为固定的界面,宽度和高度都为100%即占据全屏幕显示此div。此时用户只能与此div下内容交互,达到了弹出窗的效果。弹出窗内部布局和样式与一般情况无二。区别在于不同浏览器适配弹出框宽和高以及位置的设定上。
.dialog-inner {
position: absolute;
top: 50%;
left: 50%;
width: 492px;
height: 458px;
background-image: url(popup.png);
background-repeat: no-repeat;
background-size: contain;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
4.交互(js/jQuery):
根据原型图判断需要实现的用户行为交互。
添加交互:
-
用户输入手机号提交号码判断是否为举办活动地区的电信手机号,
-
如果是则提交号码到后台,并弹出提示框。
-
否则红字显示请输入正确电信手机号。
技术实现:
(1)此项目是电信在多个省份开展活动,所以会涉及到电话号码匹配的问题:需要匹配两项数据一个是运营商是否正确,另外一个则是是否为所在活动省份。
这里产品给了一张excel表格列出了电信号码号段,excel之长无法完全匹配,于是找到个一种更方便的方法:网上有很多电话号码归属地验证的开放接口,这里选用的是淘宝的电话号码归属地接口。通过正则表达式将所有的省份都列出来,判断返回数据是否为电信号码同时也是开展活动的号码实现要求。
var validate = false;
$.get("http://tcc.taobao.com/cc/json/mobile_tel_segment.htm",{tel:val},
function(data){
pattern1 = /电信/;
pattern2 = /(北京)|(上海)|(江苏)|(湖南)|(浙江)|(江西)|(福建)|(云南)|(贵州)|(青海)|(黑龙江)|(辽宁)|(湖北)|(甘肃)|(重庆)|(广东)|(海南)|(新疆)|(河南)/;
if(pattern1.test(data["catName"])){
if(pattern2.test(data["province"]))
{
validate = true;
}
},"jsonp");//引用淘宝接口,首先对运营商进行判断,然后对省份进行判断
});//提交电话号码,如果正确生成弹窗,否则重新输入,提供错误信息
(2)这里涉及到跨域访问的问题,解决方法主要是通过构造script标签的src属性值解决,可行的方法是将get方法的类型设置为jsonp。
(二).“看世界杯送流量”宣传页
这个页面非常简单,需求仅仅是将页面放到居中位置,引入适配;添加一个下载按钮即可。
.viewport img {
max-width: 100%;
margin-bottom: 30px;
}
交互方面遇到了一个小bug:在确定下载按钮宽度时,是根据图片宽度确定的,而图片有个加载时间,这就可能造成第一次加载不成功,而第二次因为有缓存,可以加载成功。改进的代码。
$("img").load(function(){
$("div").text("图像已加载");
});
(三).发现新功能“我的”宣传页
- (1)拿到原型图力求对界面的边距、长宽、背景色、字体大小及颜色做一个整体的评估。不清楚的地方与视觉设计师沟通解决。
- (2)界面的交互行为需要和交互设计师沟通清楚,理清楚交互的流程及效果。并以此作为定义类和属性的依据之一。
- (3)对整个项目需要用到的技术有一个明确的估计,判断整个项目的复杂度。
- (4)响应式设计宽度和边距问题,需要通过实践分析形成自己的理解。
- (1)首先是写代码的规范上,需要看书和实践中学习。
- (2)h5标签和css3的应用,应该多看示例代码,分析代码架构原理。
- (3)css+div特效的实现
- (4)目前来说写的界面相对简单,js代码也相对局限。接下来应该总结归纳做页面的方法,力求快速标准化完成任务。将更多的精力用于写复杂代码和后端PHP技术的学习上。
- (5)每天10点之前,制定每天的工作计划,并通过读书修炼个人技能。
- (6)向斌哥和孝芳姐贴身学习,了解他们的开发经验和职业发展感悟。