Lunch Reader ─ 上班族專用的午餐閱讀器

前陣子在同事的推薦下開始接觸jQuery，它直覺且容易上手的特性果真讓寫Ajax變得愉快許多。在網路上讀了些文件後，我給自己出了個作業，最後產出的作品就是接下來要介紹的Lunch Reader。

作品名稱：Lunch Reader ─ 上班族專用的午餐閱讀器

使用情境

「午餐時間」對很多上班族來說是一天當中最黃金的時段(當然，如果你常加班，晚餐也很重要)。有些辦公室習慣一群人熱鬧地吃飯，但獨自坐在辦公桌前解決中餐的人也不在少數。在家裡我們可以邊吃邊看電視、日劇、電影、動漫卡通等，但在大多數辦公室裡，這種招搖的行為恐怕太超過了(特別是景氣不好的時候)。此時，瀏覽網路新聞就成了多數人低調下的選擇。

只是邊吃飯邊上網可不太容易，雙手很忙碌呢! 平常迅速的瀏覽動作在此時都變得異常遲鈍，更別說長久下來，鍵盤與滑鼠還會累積難以清洗的油漬。

Lunch Reader就是專門為這個特殊情境設計的午餐閱讀器。使用者只要選擇感興趣的新聞分類及適當的閱讀速度，Lunch Reader會替您一則則讀取新聞內容，並依照字數長度自動翻頁，讓瀏覽網路新聞像看影片一樣方便。

Demo Video

主要功能描述

1. 自動播放新聞，並依照內容長短自動翻頁。

2. 為了避免捲軸出現，儘可能將內容塞在視窗可見範圍內。

3. 提供快速鍵(熱鍵)操作。

4. hiChannel免費網路廣播。

5. 新聞跑馬燈。

目標市場與使用情境

1. 廣大的使用者族群：白領上班族。

2. 地點：辦公室。

3. 使用情境：一個人坐在電腦前用餐。

使用技術

1. Programming Language：PHP and Python (兩種語言各實作一種版本，上線版本為Python版) 。

2. Framework：Google App Engine with webapp framework

3. Javascript Library：jQuery and Google AJAX Feed API

獲利模式

暫無，僅供個人使用。

未來發展

1. 合作或付費取得授權內容：難度與成本均高。

2. 播放其他內容：例如「網拍商品」輪播、「惡搞漫畫」輪播、RSS文章輪播…等等。

3. 使用者提供內容：開放上班族上傳內容，可以抱怨豬頭老闆、分享茶水間秘辛或發表同事間的趣事等話題，有點微網誌的感覺，中餐時間這些內容就會上Lunch Reader分類頭條。但沒把握是否真的有人會貢獻內容?

4. 其他…

小結

網路新聞市場競爭非常激烈，但在閱讀介面上卻少有創新。如果以「時間」作為區隔來觀察市場的話，每個時段使用者上網的目的與姿勢都不盡相同，因此，針對特殊情境設計的閱讀器就是很好的切入點。Lunch Reader就是特別為在辦公室(1. 特定地點)吃飯時(2. 特定情境)的上班族(3. 特定族群)所設計的新聞閱讀器。當然，上述的觀察還只是假設，必須在使用者真正接受這種閱讀器後才能確定需求存在。

Lunch Reader目前只是一個閒暇時間開發的小工具，需要改進的地方不少，甚至連程式碼都尚未整理重構。但無論如何，只要它能解決一些人生活上的問題，那我就很開心了。

若有任何建議，歡迎留言或來信與我聯絡，讓Lunch Reader更好用。

登上黑米首頁

HemiDemi(黑米)跟funp是台灣兩大書籤/推文網站，前天心血來潮把幾篇文章收到黑米，出乎意料地，《來喔! 好用又免費的心智圖(Mind Map)軟體》這篇介紹免費心智圖軟體的文章竟悄悄爬上了黑米的首頁!

雖然推文數僅17個，還是把它拍下來作個紀念：

圖片來源

我的jQuery學習地圖

jQuery是很有名的Javascript Library，舊文中曾提到由於瀏覽器的各自為政，使得寫Javascript程式長久以來都很難讓人開心。幾年前Ajax成為顯學，在客戶與老闆的要求下，程式設計師更難避開這個燙手山芋了，此時各種解決方案紛紛崛起，jQuery也是其中之一。農曆年後我開始接觸Javascript與jQuery，這篇文章主要是把學習的過程分享出來，給其他有心學習jQuery的新手參考。

背景知識

CSS與Javascript基礎是學習jQuery不可或缺的。對它們倆不熟的話也沒關係，靠著ericsk簡明易瞭的教學(CSS教學、Javascript教學)，加上Google大神的幫忙，稍微消化一下就能一窺jQuery堂奧囉!

入門

通常，技術高手學新東西的方法都是：直接看官方文件。但是這種硬功夫需要時間磨練，實在不適合初學者。此時不妨迂迴前進，早晚服用ericsk整理的jQuery 學習心得筆記系列文章加投影片教學增強功力，一到七集從頭到尾實作一次，馬上體會jQuery的神奇之處。

進階

現在我們雖然能寫出一些跛腳的code，但仍不足以用在專案上，否則PM或你的同事至少有一方會邊看code邊咳血。這個階段請記得把jQuery的官方文件加入書籤，隨時查閱。對英文沒信心的請參考中文文件(這裡、這裡) 。

熟悉了基本的API後，建議多看前輩們貢獻的plugins，學習裡面的寫作風格與技巧。同時jQuery也提供不少User Interface元件，套用後馬上就能做出讓人眼睛一亮的使用介面喔!

想要紙本書籍參考的話，推薦《jQuery 實戰手冊》以及《Learning jQuery中文版》。為什麼推薦買「中文版」呢? 除了比較便宜外，也因為…英文版pdf檔的在網路上流傳甚廣…

輔助工具

寫Ajax前端網頁我通常使用Aptana IDE，順便把Vitual jQuery整合到邊欄，查詢API更快速方便了。此外，Google AJAX Libraries API也有提供jQuery Library，網站上線後可以把這部分流量交給Google host。

Reference:

1. Learning jQuery
2. 45+ New jQuery Techniques For Good User Experience
3. jQuery and JavaScript Coding: Examples and Best Practices
4. 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources
5. jQuery愛好者論壇(簡)

來喔! 好用又免費的心智圖(Mind Map)軟體

心智圖 (Mind Map) 是一種圖像式思考的輔助工具，很適合用來整理複雜資訊、腦力激盪、協助記憶和解決問題等方面，很適合用來輔助MECE思考法(麥肯錫著名的金字塔結構思考法)。我喜歡在非正式的腦力激盪筆記或提案報告中加入心智圖，再佐以文字說明，提高報告的可讀性(也順便充充版面)。

心智圖最早在1970年代被提出，當時的圖都是手繪的。現在比較流行的心智圖軟體至少有25種，專業軟體如Mindjet的MindManager與NovaMind，功能非常強大好用，但是對個人與非重度使用者來說，他們的價格並不便宜。因此，這裡要介紹幾款我常用的心智圖軟體：FreeMind、MindMeister以及XMind，而且它們都是免費的喔!

1. MindMeister

MindMeister是我最常用的心智圖工具，它的介面鮮豔豐富，且支援大多數的心智圖軟體格式(其他軟體做出來的圖都可以匯入MindMeister繼續使用)。與下面要介紹的兩個「軟體」不同，MindMeister是個大量使用Ajax技術的「網站」，只要使用瀏覽器上網就能用，不需要安裝軟體。MindMeister的Basic版是免費的，喜歡的話也可付費取得進階功能，月費很便宜，從$15/year到$4~$6/month不等。

圖片來源：mindmeister網站截圖

2. FreeMind

FreeMind是比較早期的Open Source心智圖軟體，後來推出的軟體也大多支援它的.mm檔案格式。它的功能完整，也可以把心智圖匯出成靜態網站。只是相較於其他競爭者，FreeMind存在個致命的缺點 ─ 長相太陽春了(如下圖所示)，為此推薦重視外貌的人使用下一個單機版軟體 ─ XMind。

 
圖片來源

3. XMind

Java的開發者可能對XMind的介面十分熟悉，沒錯! XMind是整合eclipse的Open Source心智圖軟體，它的介面比FreeMind漂亮很多，也支援.mmap(MindManager)與.mm(FreeMind)格式。除了心智圖外，它還可以畫魚骨圖、組織圖、邏輯圖喔!

 

Reference:

1. 心智圖線上 by 林克寰
2. 麥肯錫MECE原則，麥肯錫顧問公司著名的金字塔結構思考法，其基本邏輯就是「彼此獨立，全無遺漏」(MECE; Mutually Exclusive, Collectively Exhaustive)。相關書籍參照《思考的技術》、《邏輯思考的技術》、《金字塔原理：思考、寫作、解決問題的邏輯方法》。
3. MindMeister – 免費線上心智圖服務，可輸出多種格式、分享或共同編輯 by 免費資源網路社群

如何觀察別人家的網站流量?

如果我們擁有自己的網站或部落格，通常會用Google Analysis、Yahoo站長工具或Sitemeter等工具取得流量資訊，作為調整網站方向的參考。但如果想研究其他網站的流量又該如何做呢? 網站主通常不會主動公開流量資訊給全世界知道。所幸網路上已經存在些好用的第三方觀察工具。他們使用各種獨家方法取得網友的使用者行為，再用統計方法推導出特定網站的各項數據，這裡介紹Alexa、Google Trends及創市際ARO三個較具權威的網站。

Alexa ─ 牌子老，效果?

首先介紹知名度最高的Alexa，在類似存活至今的網站中，Alexa應該是牌子最大最老的。雖然Alexa的統計方法的準確度頗具爭議，也無法分辨sub-domain，但在沒有其他選擇的情況下，在戲棚下站久了的Alexa理所當然成為頗具權威的排行榜。2006年無名小站在Alexa排名第32名的新聞使得Alexa在台灣知名度大開，此後，包含數位時代雙週刊在內的各大媒體也紛紛引用Alexa的數據作為網站排名的依據。

除了查找單一網站資訊外，Alexa也幫我們依照國家或類別排名，例如這裡可以看到台灣的網路100強：

 

Google Trends ─ 長江後浪推前浪

Google Trends是Google Labs旗下的服務之一，剛開始推出時僅能查詢熱門關鍵字趨勢，例如可以比較」馬英九, 陳水扁」這兩個關鍵字熱門程度的消長，以及哪些地區/縣市對該關鍵字比較感興趣：

2008年Google又在Trends的基礎上新增了Trends for Website服務，大哥一出手幾乎足以幹掉多年經營Alexa! 只要在搜尋欄位輸入"sitename1, sitename2, …"(網站名稱之間用小寫逗點符號隔開)就可以比較多個網站的流量。此外，Trends還可以進一步依照地區篩選(下圖紅色框部分)，彌補了Alexa分辨不出sub-domain的遺憾：

 

創市際ARO ─ 台灣市場的權威資料庫

如果要研究的網站僅限於台灣地區，手上又剛好有一筆經費的話，ARO絕對是您的最佳選擇。ARO是收費的資料庫，他的統計方法嚴謹，也能依照客戶需求提供客製化的研究報告。除了付費取得外，《廣告Adm雜誌》也有ARO提供的台灣主要網站及廣告主資訊，對網路廣告領域有興趣的人可得密切注意。

Reference:

1. Alexa流量排名 by 數位時代
2. 你用什麼資料看網站間流量比較 – Alexa, Aro 還是 Google Trend？ by 吳顯二
3. 如何將自己網站加入Alexa世界網站排名？ by  香腸炒魷魚
4. 其他工具：一鍵輕鬆觀看網站流量比較圖表-statsaholic

Google Web Tool Kit (GWT)入門 ─ 安裝篇

在網站中適度加入Ajax技術可以加強使用者體驗，但各家瀏覽器支援的標準不一的問題一直困擾著程式設計師。為了讓程式碼能跟瀏覽器相親相愛，我們大可不必埋頭蠻幹，已經有人提供了至少三種解決方案：

1. 站在巨人的肩膀上：使用Javascript Framework or Library

由於瀏覽器對Javascript的版本標準支援度的差異，提高了程式執行環境的複雜程度。為瞭解決這個問題，我們可以選擇一些架構或Library來減輕寫Javascript的負擔。常見的解決方案有：Prototype, Yahoo UI Library(YUI)與jQuery等。

2. 乾脆一點：放棄Javascript

寫Javascript除了要花上大把時間在除錯上，還得留意Server端與Client端不同語言間的資料型別轉換。有些人覺得，只要能做出Rich Internet application, RIA效果，使用什麼語言不是重點。因此他們決定釜底抽薪，從根本捨棄Javascript改學Actionscript，用Adobe Flash來做還可以一併免除CSS版本支援的困擾。

3. 迂迴前進：使其他語言開發，再轉成Javascript執行

本文要介紹的Google Web Tool Kit就是這類型的代表，除此之外還有jMaki, Java2Script(J2S)pacemaker, RJS(使用Ruby語言)可以選擇。

這種方案的好處是不需要熟悉Javascript語言，而且單一語言方便整合前後端資料。但缺點是普及程度還不夠，如果整個團隊只有你習慣這麼寫，最後還是得回歸大家共同習慣的方式Coding。

初探GWT：元件組成

在開啟專案前，先對GWT有個基本認識。首先，GWT可以簡單地分拆成四個元件理解：

分類	名稱	說明
Library	JRE模擬Library	提供模擬環境讓編譯後的Javascript執行。
	GWT Web UI Library	提供與Swing類似的API。每個元件稱為Widget，對應到各種HTML表單元件。
Tools	Hosted Browser	開發時期使用的瀏覽器工具，由於這裡跑的並不是真的Javascript，所以可以開啟除錯模式，逐步執行程式碼、檢查伺服器物件狀態等。
	GWT Java-to-Javascript Compiler	很像Javac的功能，可以把Java程式碼輸出成Javascrupt。

事前準備

1. 到官方網站Download Google Web ToolKit，目前最新版本是1.5.3版。

2. 準備Java開發環境：GWT採用「將Java程式碼轉換成Javascript與HTML」的方法來寫Ajax網站/應用程式，因此您的電腦需要安裝JDK。

3. IDE(整合式開發環境): GWT提供utility產生eclipse專案檔。使用GWT不一定需要eclipse，但以下的範例將搭配eclipse說明。

安裝Google Web Toolkit

1. 解壓縮後，將名為「gwt-windows-1.5.3」的資料夾放到適當的位置，並將資料夾所在位置加到系統的PATH路徑中，這樣您的電腦才知道GWT的存在，並能使用GWT提供的工具。加入PATH步驟：[我的電腦] -> 右鍵 –> 內容 –> 進階 –> 環境變數 –> 將路徑加入Path變數中，(e.g., ;C:\gwt-windows-1.5.3) 。

產生Eclipse專案檔並匯入Eclipse

1. 使用GWT提供的工具ProjectCreator建立eclipse專案，往後的步驟會將這個專案加入eclipse中。

在命令列中輸入：

projectCreator -eclipse <專案名稱>

執行後自動建立src、test兩個資料夾及.project與.classpath兩個檔案。

2. 使用applicationCreator建立GWT專案，在命令列中輸入：

applicationCreator -eclipse <專案名稱> <應用程式名稱>

3. 將專案加入Eclipse

File –> Import… –> Existing Project into Workspace

圖片來源

圖片來源

執行結果：Host 模式

圖片來源

大功告成

到這裡我們已經成功建立了GWT專案，如果還有興趣的話，可以照著官方網站的教學實做一個Ajax版的看盤工具。

Reference:

1. Google Web Toolkit (GWT) by IBM中國
2. 初玩 Google Web Toolkit by ericsk
3. Google Web Toolkit的實作與活用 by 吉野 雅人 江川 崇 竹端 進
4. Google Web Toolkit 新手常見問題 by Pesty
5. The Google Web Toolkit (GWT): Using RPC to Access Server-Side Data

詠春‧葉問 v.s. 津門第一‧霍元甲

葉問是出身佛山的詠春拳宗師，更是國際巨星李小龍的師父，據說在對岸知名度很高，只是在台灣民眾對他並不熟悉。第一次在電視上看到電影廣告時，完全看不懂這支粵語發音的廣告想表達什麼。直到有劇情的預告片出來，才知道原來是這部訴諸民族感情的功夫動作片。

而，我超喜歡這種故事情節的!

多數看了電影的人很容易聯想到另一部武打電影「霍元甲」。的確，兩部電影的設定有許多雷同之處，這裡整理了張表格方便大家回想：

葉問與霍元甲比較表

	葉問	霍元甲
電影海報
年代	1893-1972	1868-1910
活動範圍	廣東佛山、香港	天津、上海
故事背景	日本侵華前，葉問武功高強且為人謙和。日軍佔領佛山後，淪落到去礦坑當臨時工，為保護同胞，挺身與三蒲將軍對抗。	日本侵華前，霍元甲一心成為津門第一，卻遭仇家殺光全家。大徹大悟後列強已經佔領中國，靠著武打凝聚中國人的團結。
實業家好友	周清泉	農勁孫
心境轉折人物	廖師傅	秦爺
正直的日本武術家	三蒲將軍(池內博之飾)	田中安野(中村獅童飾)
最後一擊	饒恕對手	饒恕對手
主角結局	決戰勝利後被日本人開槍暗算	決戰比武前遭日本人下毒
喚起民族團結意識	有	有
創辦組織	詠春體育會	精武體操(育)會

資料來源：維基百科、圖片來源 ：Yahoo! 電影

電影裡提到葉問跟李小龍的師徒關係，可是印象中的李小龍好像是以截拳道出名的，怎麼沒聽說過他也學詠春拳? 稍微搜尋一下，網路上很容易找到資料佐證，下圖是師徒兩人練習詠春拳的照片，想學習的人可以在維基百科上找到詠春拳法：

圖片來源

葉問跟霍元甲兩人年代相近，不過兩人卻沒有見面比試的紀錄，不曉得誰的武功比較高強? 逝者已經無法給我們答案，影迷們只好退而求其次，就比較李連杰(飾演霍元甲)跟甄子丹(飾演葉問)吧! 只是國片迷心中早有答案，證據就在第四台播到爛的經典國片「男兒當自強」裡，李連杰(飾演黃飛鴻)跟甄子丹(飾演納蘭元述)已經有了勝負：

這樣的結局絕對無法讓甄子丹的粉絲服氣，畢竟戲裡誰贏誰輸都是導演決定的，只能說在電影圈中，片酬愈高的人武功愈高強可是不變的定律啊!

總之，喜歡看「霍元甲」這類型電影的人，請盡速到電影院報到吧!

Reference:

1. 電影官方部落格
2. 「一分鐘影評」葉問 – 傳說中的武術阿宅 by 小梅子
3. 熱血老男孩秀桑日誌   【電影】葉問
4. 葉問觀後感 by 熊寶的塗畫日誌
5. 詠春拳：化解只是準備動作，攻擊不過順勢而為！ by 重灌狂人

解密! 原來這就是「台中腔」

我是土生土長的台中人，第一次知道自己講話有種明顯的腔調是上台北唸大學時。記得當時講沒幾句話就會被對方猜中：「同學你是台中來的吧!」(大驚)，最誇張的一次甚至在電話中被不認識的同學誤認為是緬甸來的僑生…#^$%&*。這個現象直到大學畢業才略有改善，應該是時間沖淡了腔調吧!

直到今日，還是聽不出各地的腔調有什麼差別，為什麼以前老是因為濃厚的台中腔被消遣呢? 況且，除了尾音上揚外，也沒人能說清楚究竟「台中腔」是什麼、有什麼特徵。

下面這則影片解答了多年來的疑惑，我們習慣的語助詞如：「真的假的!?」、「蛤?」、「ㄏㄣˇ」、「ㄏ一ㄡˇ」、「是ㄏㄡ」原來是台中人獨有的!

睽違八年，終於豁然開朗。

Reference:

三分鍾學會「台中腔」 by 重灌狂人

[天馬行空] 怎樣賣盆栽? 從「故鄉的桂花雨」思考

我很喜歡自己動手種些花草，只要環境許可，房間裡無論如何都會佈置些盆栽，點綴點大自然的感覺。台北市知名的花市不外建國北路高架橋下的建國假日花市與內湖瑞光路的台北花市兩處，我習慣逛老字號的建國花市，因為除了添購植物外，還可以順便看看流浪動物認養活動，一舉兩得。

建國花市的商家眾多，但商品的重疊性很高，容易陷入價格競爭。一般來說，3吋小盆栽的價位大約落在每盆NT$25~NT$50之間，放眼望去，每個攤位的生意都差不多。在這樣的競爭環境下，其中一家攤位特別吸引我的目光。這家的文宣以「空氣清新」為訴求，強調搭配特定的七種植物，就可以有效地代替空氣清靜機的功能。此外，每盆植物都有附上名稱、功能等產品介紹文字。在產品異質性低的環境下，這些文宣顯然吸引了不少顧客駐足，生意比其他商家要好上許多。

台北市民的消費力很強，只是花市裡的攤販仍然以「原料」的角度看待商品，賺取買進賣出的價差，缺乏行銷與包裝，無法替這些盆花創造更多附加價值。雖然從花農的角度來看，這個售價已經遠遠超過種植成本，利潤算很不錯了。只是如果希望能再賦予這些產品更多附加價值的話，該怎麼做呢?

雖然只是個門外漢，但我喜歡做這樣的思考訓練：如果有一天自己必須來花市做生意，該怎麼賣才能勝出呢?

以這次買的「桂花」為例，春天很多攤販都在賣，商家用麥克筆在紅色紙條上寫著花名，掛在上頭，行情價是大盆NT$100、小盆NT$50。但如果能連結桂花與顧客，就可以引起顧客的共鳴，舉例來說，看到桂花我會聯想到國中時讀過的課文 ─ 琦君的散文「故鄉的桂花雨」。

 
琦君女士(資料來源)

開始種植後，我才第一次好好端詳桂花，原來它長這樣：

我會想用不同的主題來包裝這些植物，例如以「課堂上的回憶」為主題，把曾經出現在國文、生物、自然等課本中相關的植物一一整理，在實物旁並附上課本以觸動大家共同的記憶。如此一來，可能吸引到的潛在客群如：六七年級生、國中/小老師、家長等客群，同時也提供他們充足的購買動機。且每季換個不同的主題，例如唐詩宋詞中提到的植物之類的，包裝成文學風格，使顧客常保新鮮感。

此時，經過包裝的植物不再只是植物，獲利來源也不限於盆栽本身。例如賣詩詞書法配上相對應的花卉，加上老闆的巧思，用精美的花盆包裝起來，相信價格與銷售量應該會跟現在花市的光景很不同。

就算什麼都生不出來，至少也要向師大夜市知名飲料店「大腳桶」學習，雇用正妹店員! 這已經是當今做生意的基本常識了。

附註：這盆桂花購買價格為NT$50，陶盆NT$20。

TechCrunch 裁員追蹤器

最近打開電視新聞，除了扁案外，最熱門的關鍵字就非「不景氣」莫屬了。

記者每天都以高分貝提醒大家，台灣的經濟狀況有多麼糟糕：失業率正式飆破5%(5.03%)，失業人口高達54萬9000人(2008/12主計處數據)；政府官員們本著佛心，破天荒規劃發放各種消費票券，甚至還推出一些怪怪的工作協助民眾度過景氣寒冬。

這波不景氣也從美國東岸的濫觴華爾街吹到了西岸的矽谷。知名科技部落格TechCrunch去年十月推出了這個「裁員追蹤器」，統計各大媒體所報導的裁員消息。底下還開放網友們提供最新裁員消息，讓名單更加完整。直到2009年2月6日止，共計有418家企業裁了28萬8千多人，許多知名企業也都高掛榜上。

景氣指標包含「領先指標」、「同時指標」及「落後指標」，其中「非農業就業人數」屬於同時指標之一。也就是說當這條紅色的裁員趨勢線趨緩甚至開始下滑時，美國的景氣可能就差不多到谷底了吧!

最近聽說有些朋友也面臨危機，希望這把火不要燒到大家身上啊!

(附註：請輕鬆看待此資料，Pro級的經濟魔人不妨直接分析官方經濟數據。)

Reference:

1. 圖片及資料來源：TechCrunch
2. 金融海嘯襲來，Web 2.0即將邁入寒冬？ by MMDays
3. 台灣失業率飆破5% 去年12月失業人數增至54.9萬人創新高 by 聚亨網
4. 景氣指標查詢系統 by 經建會
5. 景氣指標與對策信號 by lemon’s farm