程序员的浪漫-一周年主题网站

2011-11-05 22:29 by hackerzhou

2012/11/01 Update:
前阵子把页面包装成一个Sinatra的app放到了我们VMware的Cloud Foundry上,现在可以支持在线创建页面了。 http://iloveu.cloudfoundry.com


这几天我做的一周年主题网站 http://love.hackerzhou.me ,在人人网和微博上引起了很广泛的反响,大大超出我的预料。我原来预计大概有几千人看就很不得了了,现在在人人网上有2,600+的直接转发量、微博上也有350+的直接/间接转发量,有接近200,000的点击量,甚至还吸引了媒体(扬子晚报 & 新闻晨报)的朋友们。诚惶诚恐的同时也很高兴能改变大家对于程序员先入为主的印象,有很多朋友在留言/评论中直接表示改变了对程序员呆板木讷的印象。一般提起程序员,很多人的第一印象是来去匆匆、不善与人交际也不懂浪漫,因此张江男一度成为大龄剩男的代名词。而事实上,程序员有着惊人的创造力和活力,特别是在帮mm解决各种各样的问题上,比如eBay和Cisco就是因为创始人要帮老婆解决问题而创建的。

其实很早就在想在一周年的时候给mm一个惊喜,有过很多主意比如手绘卡片,但是很不幸,小时候的素描和水粉画功底基本全还老师了,尝试了一下还是作罢;也想过摆爱心烛阵,拍DV搞后期制作,荧光油漆画爱心甚至楼下唱情歌,但身为程序员就要有程序员的范儿不是么,搞得跟文艺青年一样很容易画虎不成反类犬变成一线之隔的2B青年的。时间上也并不充裕,只能在业余时间制作,并且作为一个secret project得避开mm的视线,诸多限制使得做决定越来越困难。

就在日子一天天过去,离着deadline越来越近的时候,同门师兄zellux为tt姐做了lovett.cc的周年纪念网站,顿时给了我一个思路。zellux师兄用了box2d类库来模仿物理重力环境,碰撞及弹跳真是绚丽的没的说。随后开始确定整个作品的scope和detail design,在公司里学到的一整套流程派上用场了,跟工程师们学技术,跟产品经理学市场定位和策略。想法有很多,为了按期交付所以按照优先级砍掉了一些当时看起来并不十分重要的功能设计,这些想法我也会一点点付诸于实践,毕竟1.0版更多的是为了传达一个理念和信号。最终选择了FlowerPower这个以前就很喜欢的HTML5特效demo,记得第一次看到flowerpower的时候,我就想把它鼠标绘图的方式改成自动绘图,但那时没有想好绘制是么图形。一开始想用花朵来书写mm的名字,试验了一下效果不理想,因此使用了一个mm比较喜欢的下端尖尖的爱心图形,使用一个调整过参数的爱心函数绘制而成。后来觉得flowerpower默认的黑色背景太压抑,因而换成了浅色背景,同时也修改花朵的RGB以及alpha值来使得色调更加协调。

上述工作被很多人认为是最绚丽的部分,其实我更耗时间的步骤是构思并写表白的代码及注释,前后删删改改十几次,还要因为布局因素调整用词和语句结构。由于我们的缘分始于Java,因此采用Java来编写这段代码,而配色则用我跟我mm最常用的IDE——Eclipse的默认色系。代码以及注释采用打字机方式输出,仿真打代码的效果,其实本来还想加上敲击键盘的音效的,最后因为找不到时间符合的音效而作罢。技术上的实现再简单不过了,就是一个一个字符append上去,注意HTML Tag和HTML Entities的处理。最后就是微调的过程了,一些UI布局和浏览器兼容性在这时候被提上日程,包括那个检测HTML5 Canvas兼容性的警告输出也是在那时候做的。很多朋友为了浏览这个页面安装了Chrome/Firefox/IE9等新版的浏览器,看来我还在潜移默化之中推进了市场上浏览器的升级换代。

以上就是我设计这个网页的过程,我总结下来,真正重要的是一颗有爱的心和创新的精神,技术上的实现永远不是最大的问题。我整理了下代码,在GitHub上创建了一个项目https://github.com/hackerzhou/Love,方便有兴趣继续开发的朋友们继续开发,同时我会尝试在我们VMware的CloudFoundry上面建立一个对应的App来帮助更多需要这种页面的人们,做好以后大家可以通过wizard来定制自己的示爱页面。总之,祝天下有情人终成眷属,心中有爱自然能打造自己独特的浪漫来让另一半感动。

本文基于 署名 2.5 中国大陆 许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 hackerzhou 并包含 原文链接
发表评论

本文有 151 条评论

  1. Markpoor
    2011-12-10 00:05

    博主这个好牛的哇,立志成为Web前端工程师。。。

    • hackerzhou
      2011-12-10 20:12

      额。。。其实我不是前端工程师。。。我是后端工程师,只是会写前端的code而已~

  2. KINUI
    2011-11-23 10:18

  3. 屁孩
    2011-11-22 09:12

    嗯,真不错!嘿嘿,学习了!

  4. zhangnin
    2011-11-21 22:42

    你是相恋一周年,明天就是我跟女朋友分手3周年;但还是想为她送上这一份礼品!!!

    • hackerzhou
      2011-11-22 20:06

      bless,爱过知情重不是么。好好把握吧,正确的时间和正确的人缺一不可,下一个春天就在前面等着你呢。

      • Aaron
        2013-11-16 14:01

        你怎么做的?教教我

  5. CodeCTO
    2011-11-21 22:23

    很酷!

  6. mosquitor
    2011-11-19 01:03

    哥哥,我看了你的flowerpower灵感来源,你的爱心函数是怎么绘制的呀。我也想试试你做的爱心的效果,不知道从哪下手,初学者请多指教,能从flowerpower中copy出现成的代码吗?或者你是大概怎么做成的? 最后,祝幸福!

    • hackerzhou
      2011-11-21 19:47

      爱心函数可以从我的javascript里获取到,我也是从网上找到的,比较喜欢这个尖尖的底部的版本。你要是有javascript的基础的话应该能很快上手

  7. 神仙
    2011-11-12 14:56

    额。我的神。我爱死你了!~

  8. 网络小生
    2011-11-10 14:00

    你好,刚刚开始学习,对HTML5 很感兴趣,能给学弟点学习方法吗?

  9. EricRain
    2011-11-10 03:08

    我修改过了~~保留了你的copyright 不过是私下发过去的 应该不会传上网来,不过还是跟原作者打个招呼比较好~~谢谢啦

    • zhoushuilin
      2012-03-17 11:32

      你好,你能教下我怎么修改吗??我也想试下,我刚学这个。谢谢啦

      • OPPO
        2012-09-09 12:06

        你好,我想学习下,能向你请教吧

  10. uudigg
    2011-11-09 16:59

    博主,你好,我也是用的godaddy的主机,但是速度好慢。发现你的网站访问速度很快,不知道你购买了哪些服务,能否分享一下,谢谢

发表评论