原文鏈接：http://blog.csdn.net/BIAOBIAOqi/article/details/9077413#comments
背景
一個月前發現了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隱藏和顯示內容的方式
document.getElementById('hint').style.display = "none"; //hide hint
document.getElementById('start_btn').style.display = ""; //show start button
雖然不是特別理解js引擎的單線程運作機制，但經過簡單的試錯、調試后，就完成了加載等待和開始按鈕觸發的原型。
之后是對按鈕和加載提示配置css。由於懶得理解css的一些細節，直接使用了這份項目中的css代碼。
4.部署
github為每個項目提供了靜態網頁展示的功能，應付這個項目的網頁展示完全夠了。具體操作流程參見《GotGithub》3.5.2. 創建項目主頁。實際上，鏈接中介紹的幾種創造干凈的gh-pages分支的方法，在這個項目的發布里是不必的。因為項目主頁的展示代碼跟master分支里的代碼本身就是一樣的，那么需要做的就只是開啟gh-pages分支，並提交代碼了。
項目成果：請戳這里
結語
感謝v2ex，感謝hackerzhou、loo2k和wong2童鞋，我參考了你們很多代碼。
創造力需要靠技術手段實現。混跡在互聯網上，沒有自己建站的能力實在是很苦逼的一件事情。之后自己准備花些時間在RoR上。積累技術實力，努力做出好產品;)