给女朋友的礼物
背景
一个月前发现了 V2EX 这个网站，用创始人 Livid 的话来说，『这是一个主要关于做事儿的地方』。确实如此，我在这里收获了很多想法和灵感。
本文所记的，也是得益于某天的对某个主题的浏览。帖子中，大家分享了很多给女朋友做的网页，说『技术宅改变世界』太过了，但拥有这样一个礼物，确实是一种属于程序员的快乐和程序员的女友的幸福。
快到我跟我妹子恋爱四周年的日子了，也正逢她本科毕业，无论如何都是个有趣的时间点。受了那个帖子的刺激，我也筹划着给女朋友做一个小网页，以示纪念。
遗憾的是，我自己从来没有写过网页，javascript 和 css 只知道概念，html 也只是知道一些简单的标签，这些可是完成一个小网页所必备的技能呢。技术能力直接阻碍了创造性成果出现的可能:(。于是，解决方案只能是搜集开源代码，然后自己做定制了。实际上，最后的产出，也就是三份代码的拼接。
资料搜集
通过各方搜寻，我找到了如下几个网页：
网页用到了 html5 的一些特性实现了动态的心形花的绘制和类似程序代码敲击的文字呈现形式。由于内容仅仅是文字的，可定制性强。如下图：
网页调用了 Google 地图的 API，可以定义聚焦的地理位置和坐标尺，显示照片，像日记一样记录了点点滴滴，有背景音乐。最后还以地点输入框的形式做了表白。很有创意！
跟 2 类似，调用了百度 API，配上『Lemon tree』的背景音乐，很有调调！
定制计划
限于没有前端的基础，开发效率会很低，只能硬顶着拿着前面的三个项目做混搭了。其中项目 1 和 2 都有在 github 上开源代码，而 3 则在 v2ex 的帖子里被作者授权直接查源码使用了。
我做了简单的混搭修改计划：
- 1.以 hackzhou 的项目为基础，修改文字内容和基本布局。
- 2.添加加载等待过程，加载背景音乐。
- 3.加载完成后，出现开始按钮，按开始按钮播放背景音乐，进入动画效果。
- 4.增加全屏效果。
实施
1.项目启动
我在 github 上 fork 了 hackerzhou 的代码。(我 fork 的版本)
clone 到本地，尝试阅读 js 代码，尝试做小改动，找到动画开始的调用。
2.尝试添加背景音乐
网上查资料，找到了<embeded>可以用来添加背景音乐，测试成功。但这个音乐播放无法支持同步的加载，不可控，在网络环境差的情况下，如果没有配乐动画过程会缺少表现力。放弃这种方案。
在 v2ex 上某童鞋基于百度地图的应用源码中找到了一个第三方音乐播放库：soundmanager2。查看官方文档，确认能满足项目需求，于是加入到代码中。
为了让页面展现更加顺畅，需要音乐文件越小越好。我尝试了 MIDI 格式，但是很多浏览器并不支持，作罢。而 soundmanager 似乎对 wma 的支持有问题，于是只剩下 mp3 文件。我选择了 JJ 的『小酒窝』做背景音乐，在 mac 下使用 ocenaudio 将原来 3MB 的 mp3 文件截取了前一半，并导出为不同设定采样率的版本，经过测试，发现 56kb 采样率下，音质没有受到大的影响，且大小也足够小了，于是确定用这种格式的 mp3。最终 MP3 文件的大小为 500KB！
3.加载逻辑和开始按键
需求：加载过程需要隐藏前景内容，在音乐加载完成后，显示开始按钮，开始按钮能触发动画效果。
通过 Google 找到了使用 js 隐藏和显示内容的方式
1 2 |
|
虽然不是特别理解 js 引擎的单线程运作机制，但经过简单的试错、调试后，就完成了加载等待和开始按钮触发的原型。
之后是对按钮和加载提示配置 css。由于懒得理解 css 的一些细节，直接使用了这份项目中的 css 代码。
4.部署
github 为每个项目提供了静态网页展示的功能，应付这个项目的网页展示完全够了。具体操作流程参见《GotGithub》3.5.2. 创建项目主页。实际上，链接中介绍的几种创造干净的 gh-pages 分支的方法，在这个项目的发布里是不必的。因为项目主页的展示代码跟 master 分支里的代码本身就是一样的，那么需要做的就只是开启 gh-pages 分支，并提交代码了。
项目成果：请戳这里
结语
感谢 v2ex，感谢 hackerzhou、loo2k 和 wong2 童鞋，我参考了你们很多代码。
创造力需要靠技术手段实现。混迹在互联网上，没有自己建站的能力实在是很苦逼的一件事情。之后自己准备花些时间在 RoR 上。积累技术实力，努力做出好产品;)
