未分类

Quanta杯总结-1

Quanta杯作品
简要地说一下这次的作品吧：
时间大概是20天。项目的idea是运营部的人想的，设计师和冬令营的设计师一样，这次我就专注做重构（其实后来写了好多前台和后台的交互），后台找了舍友。我和舍友都是大二才参加Quanta，所以要和大一的一起做作品比赛。
具体项目的功能是在线同步聊天看视频。
运营说是参考这个网站：letsgaze（可能需要翻墙，而且必须要用Chrome浏览器）。
简单的说就是两个人一起看视频，我暂停，你也暂停，我播放，你也播放，看的内容是同步的。同时也可以聊天。
上面这个就是主页了。接下来写点东西记录一下做的时候遇到的坑吧。
静态页面：Together。其他的页面在根目录下可以找到。

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
E:.
├─Admin
│  ├─css
│  │  └─vendor
│  ├─fonts
│  │  └─glyphicons
│  ├─img
│  │  └─icons
│  │      └─png
│  ├─js
│  │  └─vendor
│  └─video
├─css
├─images
└─js

页面主要分为前台和后台咯，后台用了Bootstrap框架，做完之后删掉了一些没用的文件。

CSS3动画

写了几个动画之后感觉这个就没什么好说的啦，没用到什么太复杂的东西，就切图，写动画效果，把动画相关的都放在一个css里面。这里安利一个腾讯团队做的工具：CSS3动画帧数计算器
兼容性的前缀的话用了AutoPrefixer，不过貌似有BUG，在LESS下面使用完后在最后会生成很多个}，要手动删除掉，否则LESS编译的时候会报错。

SEO

1
2
<meta name="keywords" content="together,在线同步分享，同步视频分享，聊天，视频，同步">
<meta name="description" content="together推出的在线同时共享功能，跨越空间的距离，让相隔千里的你们，分秒不差地一起看视频，一起听音乐……当你们一起欢笑，一起吐槽电影中的bug，一起欣赏某段音乐里的一段旋律时，ta早已在你身边陪伴着你，犹如不曾离开。">

头部给搜索引擎用。（话说吐槽电影中的bug是不是有点奇怪=。=）
然后是上面用到的动画效果，因为文字是用了特殊字体，所以切图了，但是这样HTML里面没有什么<h1> <h2>标签来给搜索引擎获取内容，所以用了一点小小的技巧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="animate-group">
    <h2>
      <span class="texthide">在你身边，不曾离开</span>
    </h2>
  <div class="arrows arrows-top"></div>
    <h1>
      <span class="texthide">TOGETHER</span>
    </h1>
  <div class="arrows arrows-bottom"></div>
    <h3>
      <span class="texthide">在线同步分享</span>
    </h3>
  <div class="computer computer-left"></div>
  <div class="computer computer-right"></div>
</div>

这个是主页中心的几个元素的HTML文件。然后.texthide是这样的：

1
2
3
4
5
6
7
8
9
.texthide
{
	/*文本隐藏黑魔法*/
	font: 0px/0 a;
	color: transparent;
	background-color: transparent;
	border: 0 none;
	overflow: hidden;
}

font: 0px/0 a
参考文章：letter-spacing+first-letter实现按钮文字隐藏
张鑫旭大神的一篇文章有提到这个东西。都是各种文字隐藏的方法。
其他的SEO相关的应该就是标签的语义化吧。该用<h1>啊<p>啊什么的就用这些。

登陆/注册模块

登陆框
登陆注册是个模态框，把点击浮现的这个功能单独写成了一个JS函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//登陆/注册模块(模态框实现)：点击按钮出现浮动框，点击浮动框之外的部分消失。
//不写成匿名函数，让其他模块也可以进行调用
var loginBar = {
    init: function () {
            _this = loginBar;
            _this.config = {
                $loginBtn: $('#login-btn'),
                $regisBtn: $('#regis-btn'),
                $loginOly: $('#login-overlay'),
                $regisOly: $('#regis-overlay')
            };
            _this.setup();
        },
        setup: function () {
            _this.bindEvent(_this.config.$loginBtn, _this.config.$loginOly);
            _this.bindEvent(_this.config.$regisBtn, _this.config.$regisOly);
        },
        //事件绑定，外部也可以单独调用
        bindEvent: function (clickObj, targetObj) {
            clickObj.click(function () {
                targetObj.fadeIn(500).click(function (event) {
                    if (event.target == $(this).context) {
                        $(this).fadeOut(500);
                    };
                })
            })
        }
}

后来发现这样单独出来相当有好处。因为后面也经常用到了这个模块。调用方法也超级简单：

1
2
3
4
//初始化绑定默认的登陆注册框
loginBar.init();
//调用绑定特定的模态框
loginBar.bindEvent($("#adBtn"),$("#admin-overlay"));

虽然看起来没有那么语义化=。=

LESS

这次全部CSS都用LESS来做。用LESS还没真正发挥出他真正的优势吧，还是只用到皮毛。做之前和设计师沟通后设计图都有按照网格来做：
设计图
所以写LESS的时候就方便很多，尺寸基本都是数格子啦[]~(￣▽￣)~*

1
2
3
4
5
6
7
8
9
10
11
12
13
@global-width: 		24px;
.logo
{
	position: absolute;
	width: 4*@global-width;
	height: 4*@global-width;
	left: 50%;
	margin-left: -2*@global-width;
	img 
	{
		width: 100%;
	}
}

虽然很想用多点变量=。=可是写样式的时候就基本一口气写完了，后面也懒得去提取公用变量了。下次迭代（如果有的话）重构一下代码咯。

雪碧图

百度百科的介绍好像蛮全的：CSS雪碧
CSS雪碧好处都有啥！
以前自己会思考要是面试官这么问我，我应该就是回答减少请求数吧，然后避免一些图片按钮的闪动。
看了介绍才知道原来大小还会减少总大小：

提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

让我想起了在益米主页用到的十几张头像和二维码哈哈哈哈哈，改成雪碧图吧，不然几十个请求数太恐怖了。
不过雪碧图还是有些缺点（百度百科），占用内存大？百度了一下在小项目还是没有太多问题的，然后多注意图片的组织，不要浪费太多空白，也不要把图标都挤在一起，导致有时候露出其他图标。
自己做雪碧图的时候要多注意使用图标的元素的大小，因为很有可能并不是纯粹的图标那么大，有可能是放在一个2~3倍的容器里面，这点需要注意，否则就要不断的改PSD，保存为PNG，看效果，再改PSD…
还有要注意的是定位属性用top和left吧，少用bottom，因为如果修改了雪碧图bottom可能就不是原来的位置了。

分享到