瞬移吧,时光(飞逝金中 2017 年创意网页)

介绍 Introduction

这是一个利用 canvas 技术的互动相册,其中共有 12 组照片。用手涂抹旧照片会显示出新照片,此外还有可能触发一些“信息点”提示。

You can see this as an interactive album with canvas technology,

该页面上线后,通过校友的微信朋友圈自发传播,获得近 5000 次点击,完整体验次数达 1000 余次,留言 72 条。

继续阅读“瞬移吧,时光(飞逝金中 2017 年创意网页)”

bPlanner 多学生教务信息整合系统

介绍 Introduction

bPlanner 是一个多学生教务信息整合系统,利用它可以获得一部分学生的课程情况、考试成绩、考试地点汇总等信息,可利用于活动时间安排、考试成绩分析等用途。

虽然系统目前仍是作者个人使用为主,但其已经为作者所在的班级提供多次服务。

其由三部分组成:

  • 开源的 PHP 教务系统读取库,以对象形式调用并处理正方教务系统中的课表、校历、成绩等信息,且可自动利用调课信息对课表进行修改;
    通过替换这一库文件,可对其他使用不同教务系统的学校进行支持;
  • 调用上述接口,将教务信息保存至系统内,并导出为 JSON 文件的 PHP 采集模块
  • 读取导出的 JSON 文件,在浏览器内离线对教务信息进行分析显示的分析模块

借助读取库和一小点代码,可将课表生成为 iCalendar 文件,导入进日历软件。 继续阅读“bPlanner 多学生教务信息整合系统”

汕头实时公交网页设计 Realtime Bus in Shantou

简介 Introduction

汕头市位于广东省,是中国第一批 4 个经济特区之一。目前其市区内的实时公交信息只通过一款手机应用发放,其对于日常使用而言,体验仍过于复杂,乘客需要打开应用 > 手动输入线路或点击“当前站点”按钮后、选择当前站点和线路 > 查看线路情况。

在参考了 CitymapperTransit 等应用的设计后,给出了一个基于网页的实时公交查询设计。在同一个页面上,由上至下列出当前位置附近所有方向线路的来车状态,并以站点分组,点击线路后会显示路线图和车辆情况,大大优化了日常查询实时公交的体验。

网页显示的实时公交数据,需要借助后端 PHP 程序抓取。程序设置了缓存机制,此外还通过保存每辆车的历史位置,对长时间不移动的车辆进行标注提示,提升了数据的可信度。 继续阅读“汕头实时公交网页设计 Realtime Bus in Shantou”

小探网页支付网关的架构设计与体验优化

开题

现在网络支付方式越来越发达,已经不可避免地开始与各类 IT 系统集成。在财务制度比较规范的地方,这类入账自然需要统一管理,资金不能随意流动。如果由各个业务系统自己去申请对接网络支付接口,自然是很难实现统一管理的,而且也麻烦。

因此,就需要一个统一的企业级支付平台作为中间层,来负责各业务系统与网络支付的对接。这样,不仅方便了财务数据的统一提取、账户对账,也使企业支付平台可以代表所有的业务系统与网络支付接口进行交互,业务系统不会接触到企业的网络支付总密钥,较为安全可控。

这样的例子其实我们天天见。例如 12306 的车票支付教育部考试中心的考试费支付,都采用了中间层,来接入多个网络支付平台。

此时,企业级支付平台的角色可以认为是一个代理,协助业务系统完成支付流,并保存相关数据。目前这类“代理”的架构并没有标准,所以实现起来会各有小差别。如何去定义企业级支付平台(下称企业层)和业务系统各自的角色,就会决定架构的实现方式,相应就会影响到支付业务的实现情况。 继续阅读“小探网页支付网关的架构设计与体验优化”

Make Service Fault Transparent

This article is an English one, because I really need to work on the language. Sorry if it is not easy to understand.

A Summary to What's Happening Recently

Recently in my campus, IT service is very unstable.

  • In March, many people posted on forums that they tried to top up campus Internet account by WeChat, but more money (maybe 100x) than they paid were topped up.
    • Later WeChat top-up service were disabled. Because most people were not aware of the existing offline top-up-by-card service, many of them became arrearage.
    • Several days later, campus Internet's charging system was disabled, which means you can use it for free. Later the charging system was resumed, but only charging at the monthly fee (not counting flux fee).
    • An unnoticeable statement was published then, indicating that it was caused by a bug from the software company.
  • On March 20th, campus card users who used their cards to drink hot water or eat breakfast, found their card locked. (Those lazy guys were not affected at all)
    • In the morning nobody knows whether the issue was being solved, until at around 11 (lunchtime) my school's instructor sent an announcement that "there will be unlock service in canteens, please keep order and don't panic at the scene". At canteens announcements by canteens' administrator is put up. Unlocking was quick and easy, but most people still went to canteens where Alipay is accepted.
    • Later that afternoon public statement by card administrator was out: It was a service fault (on BITUnion some said that it's a bug hidden for 14 years). IT staffs explained on BITUnion that they tried to work out solutions and mitigate the issue before they drafted public statements.
  • In these months campus Internet is unstable: During peak hours it became very slow or even unavailable. Maybe it's around 2%'s downtime (in a 24-hour aspect), looking not that much, but users surely could experience that.
    • The causes seem very complex. In my view, new DNS servers, old cache servers, new firewall systems, new upstream link providers and upstream link issue all can cause problems. And of course those new facilities all need to be fine-tuned, which takes time.
    • Currently no authentic statement is published. But in the IT service monthly report (which most people are not aware of), it said "Issue fully fixed, during peak hours upstream links can work in full bandwidth now". One of the reasons they mentioned was "DDoS attack causing network core server CPU instant usage up to 99% (usually ~20%)".
    • However, as student representatives meeting will be held, many representatives will raise the heated Internet issue onto the meeting. But I believe most of they will never get the point why this is happening.

继续阅读“Make Service Fault Transparent”

又是夏天,盲空梦别

前阵子做了个梦,其中一个片段大概是这个样子的:全班正在教室里晚自习,我坐在窗边,窗外看得到校门和海。

突然窗外头的海上风浪大作,教室里有点烦躁了起来,毕竟“台风”来了,也差不多该回家了。终于开始有人往校门外走了,过了一会教室里的老师终于宣布,各回各家吧。

我慢慢在教室里收完东西,居然最后往宿舍走去,没有回家。一看表差不多要 11 点,宿舍要锁门了。最后一个镜头是我回宿舍的路上吧,路一边的海面风平浪静,天空晴朗无云。

也不知道为啥,到这里戛然而止的剧情,我的理解是:台风真的要来了,我看着似乎大好的局面,觉得没啥事情,淡定地继续着自己的生活(回宿舍,不回家),没去做好该做的准备。 继续阅读“又是夏天,盲空梦别”

系统设计者的自我修养 / 一课一练

这学期选了专业选修课“机电系统综合设计”,从第一节课就开始面对不同:王老师提前把全班的名单导进了“出题优”应用,上课要用手机进行课堂互动。虽然已经听说过类似的教学方式,但亲身体验还是第一次。一开始老师介绍的课程内容,以前自己似乎都“学过”,但我觉得在这种教学方式下,或许会有些惊喜,于是就继续上了这门课。

听课程的名字是“综合设计”,最后还有考试,当时的我不是很懂既然是“设计”,考试能考什么呢?后来,课上除了讲“正题”,每节课前还有“每课一问”,问的多是些分析估算的题目,需要熟悉各种物理常量和物理常识。比如“一个人怎样能拉动一架飞机?”、“旋转木马的电机功率是多少?”等等。做了几个星期的题目,感觉自己对这类问题从最开始的毫无头绪,开始慢慢变得有思路起来。 继续阅读“系统设计者的自我修养 / 一课一练”

分享飞逝金中那个页面最近的运营数据

还是先放数据吧

根据 Google Analytics 的数据,3 月 31 日 11:00 - 4 月 9 日 14:30,打开次数是 4780,用户数是 4230。下面重点介绍 3/31 - 4/4 这段时间的情况。

会话数是 4586,不过在这其中,真正拉动了开始拉杆的只有 3138,占 68.4%,也就是三分之一的流量跑掉了。

“看得下去”的访问量是 2009。什么叫”看得下去“呢?我在程序里做了匿名反馈,全部看完的时候会自动提交耗时,而在使用了触摸绘画功能、和选择忽略提示的时候,也会有自动反馈。有提交这类反馈的,就属于”看得下去“的访问量。这一下,2009/3138 = 64.0%,又少了三分之一。

而最后把 12 组照片看完,来到了精选留言界面的,有 1139 次,从拉动开始拉杆到此,转化率是 36.3%。 继续阅读“分享飞逝金中那个页面最近的运营数据”

网页表单的门道 / 理想园

在好久好久以前,我曾经改造过一张纸质表单。不过现在基于网页的电子表单越来越多,他们背后其实也有很多学问的。琐碎地提几点吧。

有菜单可选

还记得曾经有份最过分的表单,要求选择自己要去的门店。然后他设计了一个下拉菜单,里面是全国几百家没有排序规律的门店名单,几百选一,一点一点翻。

看到这种表单真的是会崩溃的,最后我默默按开 F12,直接用程序筛选选中了自己要的门店……还真没功夫一项一项看。

有时候在国外的网站上要选择国家,那个也是很烦的过程,不过有经验了之后也不是那么难。比如我们要选择中国,大部分情况下会按英文字母排序,那就是 C,一般找智利的下一项就有了。没有的话,那就是按拼音排序的 Z,通常是最后一项,一般在 Google 的网站上会这样排。

有菜单,看起来是好事,不过菜单里的项目多起来之后,怎么更方便地选择也成了个问题。有 JavaScript 辅助的表单通常有这几种解决方案: 继续阅读“网页表单的门道 / 理想园”

戏剧和交响的高雅课堂 / 一课一练

有些艺术,听起来很高雅,我们也很少有机会与他们相遇。但作为大学,没有他们,的确也称不上“大”。这篇,向你分享两个这样的课堂。

戏剧赏析:话剧是只潜力股

经典话剧艺术赏析,这是邵老师开的一门课。来到课堂,老师的 PPT 上写着“戏剧”二字,有那么点偏差。

果然一开场老师就解释,“戏剧”才是正统的概念用词,但知道大家看到这两个字就会以为课上讲的是唱起来的那种戏剧,老师在选课系统里就用的“话剧”二字。实际上戏剧可以指几千年前西方的那种戏剧,也可以指现代的“话剧”。

在理工类院校当老师,老师的课其实也开了好几门,从戏剧赏析到表演,都有。另外老师作为话剧导演,也经常在外面排剧。

老师说自己开这门课也是希望培养些话剧观众。课程其实还挺热门,老师也希望能分流一些同学去“网络课堂”看讲课视频。

我还是比较喜欢那种在教室里看着投影上的话剧的感觉。不过,每次只要视频放到最后一节下课之后,当我坐在教室里看了半个小时投影,终于看到完的时候,回头一看,教室里只剩下六七个人。

或许更多人在意的是免费看戏剧的机会吧,毕竟要是在网络课堂,就很难收到老师可能随时“弹出”的赠票消息了。反正最后也得写一篇剧评,不看还是得自己买票去现场。每次“抢票”,可能是课堂最活跃的时候了。 继续阅读“戏剧和交响的高雅课堂 / 一课一练”