太陽花學運國際對外發聲窗口，4am.tw 網站上線始末

隨著科技進步，網路在人們生活中更形重要。無論是發起什麼想的活動，網站往往佔了吃重的角色。就以這次的太陽花學運當中我們可以看得到像是各家媒體網站、PTT、Facebook、噗浪等等網站扮演不同的角色，無論是正反論點，都將資訊廣發出去，讓常上網路的人們以極快的速度來接收。

而在國際方面呢？經由一群熱心的人們努力，募集了一筆經費，也讓太陽花學運有了對外發聲的機會，在紐約時報下廣告。而除了廣告之外，同時也找了熱心的人來製作對外的網站4am.tw。

而製作網站其中一位重要的熱心人士就是Even，原本當天上午就想要找Even採訪，不過Even累趴了，因此到了當天晚上才聊了一些，然後個人再用一點時間將整理出來，希望能夠讓各位可以更瞭解4am這網站製作的過程。

看看EVEN在今天30日凌晨的發言，可見當時他在製作網頁的時候，精神壓力有多大。


昨天得到紐約時報國際版刊登廣告消息的時候（指的是正式刊登，內容公開的時間點，前因可以參考這篇FlyingV群眾募資一文），剛好筆者在電腦前有關注到這件事，那時候是3月29日凌晨4點多一點點的時候。

廣告稿設計好不好有不同的看法，在這邊就不多提，有興趣的朋友可以搜尋瞭解一下。但當時其中有一個最重要的網址指向，就是在看了這篇廣告後想更進一步瞭解相關現況，是與廣告稿所搭配的網站，也就是http://4am.tw/，卻還是無法連上去。

不過若依這篇新聞所提，網站原本是要在上午九點上線。

對於作業的人來說，手上的案子被公開的新聞稿壓在幾個小時後上線，壓力應該超級大的吧XDDD（不過另一方面來說能被新聞催稿也算是個新的成就了）。如果個人印象沒錯，在當天凌晨快5點多時就已經上線，比原預定的時間快了四個小時。

在這短短不到一天的時間就完成的網站，其中有著什麼樣的困難以及該注意的點，藉由身在其中的Even所說的來讓大家有更進一步的瞭解：

Q：4am的意義為何？
4am 網址來自「 Democracy at 4am」（在凌晨4點的民主）的縮寫。在我接到這任務之前已經定案了。

Q：是在如何的情形下來製作這次的4am網站？

其實在反服貿佔領立法院之後，我就一直積極尋找各種機會，想說能不能用自己擅長的力量做一些貢獻，像是 newday.tw 是 g0v.tw 的的點子，這網站含內容設計是我花費約十小時做的。後來也成為 g0v.today 的首頁。

其實製作這網站非常刻苦，因為幾乎所有的程式碼都是在立法院的青島東路側寫出來的。後來因為想拍一張重點圖放首頁，卻苦惱於沒有攝影棚，後來就利用電視的空白頻道，藍色背景當做去被的 key color

更新：

編註：在這篇文章上線後，發現Even的朋友提到關於「讓晨曦照亮台灣」相關說明，補充引用如下：

Even Wu也是「讓晨曦照亮台灣」的設計師，他19日晚上就來幫忙直播，20日帶了小摺疊椅到青島東 g0v 的角落（當時沒有棚子，一群人只能抱著一團線和機器窩在音控架下應該是動線的轉角不停被人趕來趕去），even 把電腦放在發電機上，轟隆轟隆開始作設計。第二天早晨，「讓晨曦照亮台灣」變成這次反黑箱行動入口網頁的主視覺。而這次 4am 網站的坑，大家也在fb社團目睹了他迅速跳坑填坑的過程，還秘藏了一隻程式碼香蕉。。。

過了幾天，政府用不法手段血腥鎮壓佔領行政院的學生，我看了真的非常氣憤。就繼續尋找下一個可能可以協助的專案。包含公司內部的員工也一起參與尋找，但一直都沒有找到目標，直到 3/27 的晚上看到 g0v 後勤支援的社團，有人說能不能找人幫忙做，於是我就聯絡上 Eugene Wang 然後答應在 24 小時內製作出這個網站。

Q：共有多少人製作，其中你所扮演的角色？所花費的時間？
答應後，當天晚上我就找了我的同事鄭聖立，還有好朋友 Bonana King ，隔天 3/28 在網站的技術方面，就是我們這三人一起完成的。內容是由原本「PTT反服貿廣告」集資團隊彙整而成，設計風格則是參考原本聶永真在紐約時報上的設計。

在一個非常有限的時間內要完成 4am.tw ，收斂結論比發想還要重要，因此我就擔任了專案管理的角色，逐步一直定下目標、調整時程，我們從 3/28 早上 10 點開始製作，到當天晚上 12 點大概就完成了所有的設計，而 3/29 凌晨到早上 4 點在彙整所有的內容、上稿。在凌晨 4 點我們就完成了所有的工作，開始佈署到 github 的伺服器上面。主要的製作時間大概是 18 個小時。上線後，就微調一些上稿後才發現的細節。

這整個過程中，FlyingV 全力幫忙，不但提供我們臨時辦公室、螢幕設備等等，還有幫忙買便當、飲料等，讓我們完全無後顧之憂！我想這就是為什麼他們的辦公室處處是人才的原因。這次能夠順利完成這個網站，幕後最主要的功臣就是 FlyingV。

Q：原始碼彩蛋設計出來的過程為何？

在 3/29 凌晨的進度有點瓶頸，大部分是在彙整資料，於是就想一些好玩的事情來提振精神，夥伴 Bonana King 就提出了要塞香蕉的哏。除了團隊能輕鬆一下外，還有一個用意是可以在第一時間公開網站以外，在大家慢慢發現彩蛋後，可以創造第二波分享。像是主流媒體也會因為彩蛋重新發一篇新聞稿：
 

• 反服貿網站有玄機　暗藏「邱毅香蕉」
• 太陽花學運英文網站 原始碼內藏香蕉 | 反服貿效應發酵
• 超幽默！太陽花學運英文網站藏「邱毅香蕉」

Q：做這個網站的想法
就是儘量把聶永真的設計搬到網路上，用最棒的技術，讓所有的裝置都能夠有良好閱讀體驗。內容的彙整是原本主揪「PTT反服貿廣告」集資團隊彙整，我的任務就是讓資料能夠傳遞的更快更順暢。

Q：與平面廣告或是其他團隊如何分工合作
平面在我進入團隊之前，就已經完成九成了，「PTT反服貿廣告」集資團隊彙整內容資料的翻譯工作，我們就是提供網站設計技術。

Q：製作過程中有沒有什麼困難
在符合各種裝置的考量下，又要符合美觀、好的閱讀體驗是最困難的。舉例來說：

比較寬的版面，右邊的箭頭不會擋到字：

但如果你的裝置比較窄，例如平板電腦等，箭頭就會擋到字，這時我們就必須考慮是否文字如果超過時，要用 css 設定截掉：

其他還有像是時間軸的「時間、日期」與「敘述內文」的排版，是否太窄時，會自動避開？這都是製作過程中，因為資料的多寡、性質，需要一一考量的點：

（注意到日期較短時，兩邊會完全對齊，但日期較長時，內文會自動下降一個良好的間距）

上圖就是他們的工作環境，對於Even有興趣的朋友，可以至他的FB看一看相關的文字與圖片。

延伸閱讀：

用 Android 看太陽花學運電視直播最棒的APP：AMO TV