mulab / www

The official website of Lab μ

The Official Website of Lab μ

© 2014-2016 Lab μ.

Development Guide

This website is developed using the Gulp Building System and Bower Package Manager, which is based on Node.js.

We use Swig Template Engine. All *.html file is Swig template. View the documentation before you start developing.

Environment

First install Node.js. Any version beyond 0.12.0 is supported (but the latest version is encouraged). Make nodejs and npm is in your system path (which is automatically configured by the installer by default, or you can make it your self).

Then run

$ npm install -g gulp-cli
$ npm install -g bower

to install gulp and bower.

Preparation

$ npm install
$ bower install

to install all development dependencies and used library.

Preview

$ gulp serve

it automatically open your default browser to the index.

Changes on files is automatically reloaded.

Release

$ gulp

and checkout the pages in dest directory.

www's Issues

members页面将propaganda替换成market之类的

采用media query替代bot, bot-down

css本身有media query可以支持不同宽度。

Lab mU Recruit 过大

右下角的展位介绍多余且不利于阅读，应当对该图片进行处理。
另外对于不要求保真的图片应当存储为jpg格式

各产品运行图片

就像zhihu.com/app中这样

设计实现CamusKit产品页面

美化joinus, aboutus, members页面

这三个页面格式统一，都有导航栏，页面右边是各种变化的Logo猫。

新网站Now页面

替换现有join us页面

目前发送邮件时界面没有block等提示，用户会很困惑。

可以考虑改为自动在服务器上存储，并且修改google docs协会联系人列表。

ie11兼容标签

需要添加<meta http-equiv="X-UA-Compatible" content="IE=edge">

logo.html和dialog.html应当静态编译

动态加载较大图片且没有载入动画体验很差

Refactor members.html

将使用js动态加载json改为使用模板。

统一一下编码规范

缩进，换行符，字符集什么的。
确定了以后写到wiki里面去？

使用gulp构建系统

美化界面

@aluex @glassices

• 目前在宽屏幕上各个页面的导航栏width和位置不一样-.=|||
• index页面的动画会重复播放
• 字体在windows下好像没有会变得很难看
• 很容易主页面下方出现大块空白，图片有多余的部分没有利用上
• 开场动画可能在有的浏览器里面无法播放，这时应该禁止播放，否则很可能block住页面使得完全无法浏览
• 所有动画的时间缩短一些

新网站Tunet页面

All information, one place这句话能明显看到从屏幕左端被挤到中间的过程

nginx 配置

需要enable js,css,svg的gzip

重新设计about us页面

products页面待解决

文案填充以及填充之后对布局造成影响的解决
链接添加
tunet页面底端mac图片模糊
一些按钮hover效果美化
加入一些动画

重新设计首页，统一所有页面大致画风

Product和Members页面需要重构

充满了很多不规范的写法，如改默认元素和Bootstrap等库的元素的样式，大量使用magic number进行绝对定位。

目前的处理使用了一些hack，没有根本的解决问题。目前该页面十分不可维护。

需要使用Bootstrap的响应式框架进行重构。

切换到eslint

现在eslint已经成主流了，配置文件比jshint更加科学，而且可以通过npm分发，建议迁移到eslint并使用google style https://github.com/google/eslint-config-google

重新设计members页面

把joinus, aboutus放到主页上？

感觉除了members其它都放在一个页面上吧~_~

网站添加外部链接

包括 @mulab 的页面，
以及人人公共主页

网站members页面

gulp build的时候，不添加无关的html

如现在的header.html，base.html，footer.html等。

members页面打开的时候会先出现白底黑字挤在一起

然后随着加载慢慢展开，十分难看

解决时间轴上各块的布局问题

添加重大事件时间轴

用于陈列团队重大产品发布、获奖、变动等历史事件

Ref：

• https://britishmuseum.withgoogle.com/
• http://www.computerhistory.org/timeline/
• https://www.hstry.co/timelines
• https://timeline.knightlab.com
• etc.

新网站成员页面

以 https://overv.io/ 为模板， 将其中的卡片换成成员头像，下方换成各组简介。具体细节可以再群里讨论。

导航栏lab.mu字样设计

用在导航栏上左边的Lab.mu，像https://overv.io/里这样

更换图片

@aluex 换成和海报上类似的吧~

新网站主页（暂定）

BOSS他们正在讨论设计

网站about页面

确定如何添加协会blog

Possible Choices:
http://dropplets.com/ http://wardrobecms.com/ https://svbtle.com/ http://jekyllrb.com/ http://anchorcms.com/ https://bolt.cm/ http://hexo.io/ https://www.silvrback.com/ https://roon.io/ http://scriptogr.am/ http://pen.io/ http://calepin.co/

成员个人简介页面

可以包括：

• 头像
• 在团队担任(过)的职务
• Github, 常见社交网站等icon link
• 联系方式（包括email等）（注意用图片或者替换@和.防止spam）
• 个人简介
• 参与的团队项目和贡献（如github contributions）
• etc.

新网站产品简介页

产品简介页模仿 https://www.zhihu.com/app 每个产品使用一屏来介绍，文案搬现网站。

gulp 配置问题，浏览器刷新不及时

搭新版网站的框架

使用express，尽量整合进grunt gulp等自动化工具。

创建接收用户反馈的后端

我们客户端使用 ACRA 发送程序崩溃时的反馈。

可以在服务器上部署官方解决方案 acralyzer，也可以自己写一个简单的脚本

网站products页面

确定后端语言

important before #8 #9 #10

中英文双语网站

国际化

做新版的members页面

搞成我们上次讨论说的一个个的圆型的头像的形式？
@YueDayu 你找找有没有这样的库可以做这样的事情？
主要是排版上面可能有些困难

NEWS部分替换成使用API加载博客内容

https://public-api.wordpress.com/rest/v1/sites/blog.lab.mu/posts/

网站index页面

协会新logo设计

BOSS开会的时候说：协会的那只猫的logo需要换一下

使用单独的less文件而不是material.css

目前vendor.css体积过大。建议调试的时候带上--allow-remote用真机调试, chrome模拟的功能感受不到真实网络环境

改进Now产品页面

• 更换截图，全部使用Nexus 5截图，侧滑栏、课表两张图需要换为中文版截图
• 目前图标和文字说明对应有误
• 将Tsinghua Now更换为应用图标+Tsinghua Now（桌面版一行，手机版三行），Tsinghua Now换其他亮色（如各种蓝色）
• Download Now按钮换成灰白色，或者其它和背景图不冲突（both桌面版和手机版）的颜色
• 避免手机底部阴影的不自然过渡，更换手机框图