2014-11-29

評即時開票網站

主題：

選舉日的下午剛好沒事，所以找點事情作，於是就想來分析比較一下各個即時開票網站的 UI / UX / whatever… [逃]

選了六個網站，分別是：

前面是電視媒體的網站、後面是平面媒體的網站，至於其他先後順序完全無意義。

觀察時間從 16:2x～18:2x，環境為 Win7 + Chrome 39（沒有任何 plugin），螢幕解析度是 1920 * 1080。基本上只評論輸入網址後看到的東西，沒有參雜其他操作。

TVBS

  • 首頁顯示範圍：台北市長
  • 顯示台灣地圖：無
  • 手動更新按鈕：有
  • 最後更新時間：有
  • 得票比率的文字或圖表：無
  • 資料來源：沒有明確列出

提供的資訊量很少，完全沒打算提供其他圖表輔助。layout 簡單到差點以為看的是放大過後的手機版（說不定還真的是 XD）。

三立

  • 首頁顯示範圍：台北市長
  • 顯示台灣地圖：無
  • 手動更新按鈕：無
  • 最後更新時間：無，但有顯示幾秒後刷新。
  • 得票比率的文字或圖表：無
  • 資料來源：三立、TVBS、民視、中視、中選會

提供「xx 秒後刷新」的資訊遠比顯示「最後更新時間」來得好（根本沒列出最後更新時間的網站，去死吧 [指]）。提供的資訊貌似很多，但只是列出不同資料來源的開票數，實在沒太大意義。

layout 中規中矩，不太能吐槽、但是也找不出可以稱讚的部份。

東森

  • 首頁顯示範圍：六都、每區最多顯示三位候選人得票數
  • 顯示台灣地圖：無
  • 手動更新按鈕：有
  • 最後更新時間：應該沒有
  • 得票比率的文字或圖表：無
  • 資料來源：應該是多家，挑某一家的資料顯示

網頁技術大概是六個網站當中最落後的，PHP 不意外 [喂]。懶得用一些工具檢測，純粹肉眼觀察可能不太準確，但大抵上「資料更新」是整個頁面重新 refresh（WTF），然後 server 似乎又不夠強壯、static resource 可能也沒塞 cache 相關 header（WTF），常常 CSS 沒 load 進來導致頁面裸奔、圖檔出不來。甚至看到好幾次某一塊區域資料出不來還出現很 raw 也很 low 的 database error 訊息。

layout 也一無可取之處，藍綠色底圖固定在最上頭、高度居然只有大概 800px 左右，以下全部留白。真不知道到底是哪家網頁公司可以在這年頭做出這樣子的作品而且東森居然還讓他驗收過……

自由時報

  • 首頁顯示範圍：基隆、台北、台中、彰化、雲林、嘉義、澎湖。每區均顯示全部候選人得票數
  • 顯示台灣地圖：有
    • 移到各縣市會跳出 tooltip 顯示該區全部縣市長候選人的得票數
    • 點選後列出八個資料來源的得票數、轄內行政區地圖
  • 手動更新按鈕：無
  • 最後更新時間：有，而且是各區各自獨立的更新時間
  • 得票比率的文字或圖表：無
  • 資料來源：七都資料來源不盡相同，例如台北市用 TVBS、台中市用中天。

整體看起來挑不出什麼毛病，畫面乾淨、運作正常、layout 簡單但是一目了然…… 都在正常水準之上。唯一的問題就是為什麼要列那七個縣市？既不是六都、好像也不是激烈戰區，完全看不出選擇依據…… [抓頭]

聯合報

  • 首頁顯示範圍：直轄市、縣市候選人全部列出
  • 顯示台灣地圖：有
    • 移到各縣市會跳出 tooltip 顯示該區全部縣市長候選人的得票數
    • 無法點選
    • 地圖可以放大縮小，但是沒啥變化。
  • 手動更新按鈕：無
  • 最後更新時間：無
  • 得票比率的文字或圖表：長條圖
  • 資料來源：沒有明確列出

聯合報最大的敗筆就是那張地圖。有一堆無謂的功能（DnD、縮放）沒有給予對應的效果，然後操作反應緩慢、縮放之後 DnD 還有可能自己跳回去 default 的縮放 level…… WTF

聯合報的亮點在於他有提供長條圖、還幫忙算出 / 畫出「預估當選門檻」的灰色虛線，讓開票不是只有數字 / 比率跳動，還能讓人體會到「還剩多遠」的目標感。

中國時報

  • 首頁顯示範圍：六都目前最高票的候選人
  • 顯示台灣地圖：有
    • 移到各縣市會跳出 tooltip，顯示領先的候選人以及政黨得票率
    • 點選後列出前三名候選人得票長條圖、政黨得票圓餅圖、轄內行政區地圖
  • 手動更新按鈕：無
  • 最後更新時間：無
  • 得票比率的文字或圖表：文字顯示得票率
  • 資料來源：沒有明確列出

唯一徹底以政黨為呈現角度的網站、也是唯一用即時開票資訊在地圖上顯示領先政黨顏色的網站。是好是壞很難講，也許對於台灣民眾來講反而直覺有效？另外只顯示領先者的得票數、得票比率，我覺得不是很好的設計。

資料更新似乎也是整頁 refresh（有 blink、relayout 的現象），但呈現效果沒有像東森那樣悲劇就是了。

其他

自由時報跟中國時報的地圖都是用 SVG 作的（聯合報懶得看），我們終於徹底脫離 Flash 了嗎？ XD

2014-06-01

[新手止難] 為什麼有些東西要弄得那麼複雜？

主題： ,

昨日驚見一文〈「互相之臉」所謂何用〉 [註1]，
討論文章數目，為數月來爪哇連線版鮮見現象。
拜讀過各家之言後，回顧提問者之疑……

此時夜半人靜、身困馬桶不得其門而出
沉吟許久，上下交迫間，腦中浮現劣思緒緒
顧不得少年得痔之慮，返回書桌振鍵急敲，以求一吐為快
乃成於此篇陋文，敗筆處處
還望各方高人雅士撥冗指點一二，以正方家

敝痞在資訊領域打混唬爛多年
整理出〈資訊三大唬爛金句〉
其中首要綱領，為挪用錢鍾書所言：

道不虛明，有為而發

或用俗語釋之

殺頭生意有人作  
賠本生意沒人幹

雖凡天下學問，約莫均可套用此理
但惟資訊領域，可全然貫穿通透

只因此門學問均屬人為打造，鮮少摻雜自然現象
間或參雜不確定性，也可用機率模型解釋
又因效率為首，一切循規蹈矩最為便利
是謂「資訊領域少例外，規格讀通各處行」

所以，當吾人遇一理論或一設計，艱澀難懂
正當唸之無味棄之被當，國罵聲不絕與耳時
不妨憶此金句，自問之：

懶惰乃人類之美德  
若發明者不夠懶惰，安可流傳至今？

抱此想法續讀，不僅情緒平復、易於心領神會
倘使發現更懶惰之法，圖林獎豈非垂手可得？

今吾人已瞭解其所敘述之架構
但僅見「超頭」處處 [註2]
再三盤算依然覺得：此乃蝕本生意，作不得！ 作不得！
莫非敝痞之虎爛金句有誤？ 非也…

在此，逆舉老子之說，搭配程式設計為例：

小國寡民，使有什佰之器而不用，使民重死而不遠徒。  
雖有舟輿，無所乘之；雖有甲兵，無所陳之；使民復結繩而用之。  
甘其食，美其服，安其居，樂其俗。  
鄰國相望，雞犬之聲相聞，民至老死不相往來。

將「國」類比至「程式規模」
將「民」類比至「程式設計師」
將「舟輿」、「甲兵」類比至各式軟體架構

若是程式規模小彼此之間關係簡單
又或是無須與其他程式設計師往來
吾人可任意而為之，無所窒礙
此時亦難窺得舟輿甲兵之利，也就無從了解軟體架構之妙

禪宗分南北，北宗主漸修，南宗主頓悟
若漸修之途不可得，何妨留至來日機到緣成，自然頓悟？

敝痞此說，並非低漸修而貴頓悟
漸修之途不可省，則來日方能有頓悟之緣
即便汝輩天縱英名，亦不能自恃而於此處偷懶
以免淪於「重新再造輪」之窘境，慎之！ 慎之！

[註1] 「互相之臉」亦有人美譯為「臉間」
其原文為 interface，常見地球語稱之「介面」 \囧/

[註2] 「超頭」其原文為 overhead \囧/

原文寫於 2006.04.15 PTT Java 版。

嗯… 那個時候國文比較好 [笑]

[新手止難] 寫程式就像寫作文 \囧/

主題： ,

各位 Java 版的版友大家好， 我的唬濫分析師痞子猴

痞子今天來這裡幹什麼？
教大家怎麼唬濫新手嘛…

痞子有沒有說，寫程式就像寫作文
你一定要把題目搞清楚
不然馮京變馬涼，就算有痞子那樣唬濫的功力
寫出來的程式還是錯嘛
神 仙 難 救 白 目 客

……..

國文老師有沒有說
寫作文要有起承轉合、要立論嚴謹、要思路清晰
痞子有沒有說，程式要定義好 Input 跟 Output
整個流程都能用火星文講給任何一個火星人聽得懂
你有聽痞子的話嗎？ 沒有嘛…
自己都還沒想清楚整個 Input，Output 跟流程
就跑到板上問要怎麼寫、問要用什麼語法、問要用什麼類別
結果大家都以為你是作業文，把你這篇文章作空
你要痞子怎麼辦？ 痞子也不知道怎麼辦… [丟滑鼠]

……..

國文老師有沒有說，字跡要端正、成語要用對、要避免錯別字
痞子有沒有說，縮排排版要確實、基礎語法要搞清楚、要避免不良變數名稱
你有聽痞子的話嗎？ 沒有嘛…
結果程式碼迴圈區段搞錯，語法 & 邏輯錯誤一堆，程式碼難讀難懂
搞得作多也不是，作空也不成
你要痞子怎麼辦？ 痞子也不知道要怎麼辦… [丟鼠墊]

……..

國文老師有沒有說，立論的問題點要各個擊破
痞子有沒有說，要把功能切細再切細，然後一小個一小個分開解決
你有聽痞子的話嗎？ 沒有嘛…
重頭到尾都混亂不清 bug 一堆，結果大盤走勢不明朗
你要痞子怎麼辦？ 痞子也不知道該怎麼辦… [丟鍵盤]

……..

好的痞子教你用 Java，壞的痞子要你用 .net
結果你不好好學 Java，現在要寫案子了，才發現被 M$ 套牢
你要痞子怎麼辦？ 痞子也不知道怎麼辦… [丟螞蟻書]

……..

好！ 我們進一段廣告
為了慶祝痞子順利 po 完這篇文章
廣告期間徵召各類 Java 駐版技術達人
有優待！

進廣告

原文寫於 2006.02.23 PTT Java 版，語氣是模仿當時一位股票名嘴的風格。

2014-04-15

Google Cloud Platform 亞太區產品發表會雜記

主題：

閒著沒事，看到 Google 辦的這個產品發表會，就去了（反正不用錢）。簡單 murmur 幾句：

發表會內容：

  1. 產品發表會實在沒什麼技術內容，即使 Google 辦的也一樣。大多數著重在「Google Cloud Platform 可以作出什麼」、甚至還不到「Google Cloud Platform 是什麼」的程度。扣掉大家都會掰的「雲的好處」還有「Google 超厲害的基礎建設（這是事實）」的部份，基本上沒剩什麼了。

  2. Google Computer Engine（以下簡稱 GCE）是 IaaS，不像 GAE 是個包好的開發環境（PaaS）。在 GCE 上頭要跑 C++ 還是要幹啥壞事（應該）都可以。以 World Wide Maze 為例，WebSocket Server 就是架在 GCE 上，而不是用 GAE 的 Channel API。sudoku solver 的影像處理部份是使用 OpenCV，這段運算也是用 GCE 跑的。

閱讀更多 »

2014-02-05

GWT 與 HttpClient 的版本衝突

主題： , ,

標題好難下，不過說穿了其實根本也沒什麼。 [死]

故事是這樣的：在一個既有的 GWT project 中想在 server side 用 HttpClient 抓 web API 的東西，抓了 4.2.3 版回來，想說先寫個 application 來測，結果一直炸 java.lang.NoSuchMethodError，明明我只跑最簡單的範例阿阿阿阿混蛋：

public static void main(String[] args) throws Exception {
    System.out.println(
        Request.Get("http://localhost:8080/BSS.html")
        .execute().returnContent()
    );
}

狗了一下好像沒人有我這樣的問題，該不會只是因為我沒用 Maven 吧 [胡思亂想ing]。於是先弄個乾淨的 Java project……. 沒問題；那在 GWT project 下用 JSP / Servlet 執行 HttpClient 碼…… 也沒問題 [死]。

停下來想了一下，該不會 GWT 本來就有用 HttpClient？GWT RPC 底下用 HttpClient 好像完全合情合理，只是 HttpClient 的版本不同結果就哭哭了？結果還果真如此，上面那個例子中找不到的 setConfig() 的 HttpRequestBase，是用 gwt-div.jar 裡頭的版本。

基本上在不想搞懂 classloader 以及 Eclipse 設定之類 blahblah 的討人厭東西，這個 issue 就到這邊為止了，反正不用要 application 就沒事了 [毆飛]

只是我常常遇到官方 example 跑不起來，這到底是怎樣的人品阿阿阿阿 [淚奔]

2014-01-07

GAE 的 static file 不會觸發 filter？

主題：

一直以來 JSP Filter 用得好好的，結果前幾天一直被炸， index.html 始終不會觸發 Filter.doFilter()； 但是只要換成 JSP 或是 Servlet 就沒事，正常得很。

本來懷疑是 GPE 的問題，結果丟上 GAE 也是一樣的情況。 後來重開乾淨的純 GWT project 跟純 GAE project 比對， 發現只要有用 GAE SDK 的 project 就會有這個現象， 看起來就不像是 bug 了 XD

胡亂繞了一下，終於找到癥結點了。 首先是 GAE 文件講到 web.xml 時說：

Note: Static files, files that are served verbatim to users such as images, CSS or JavaScript, are handled separately from paths mentioned in the deployment descriptor. A request for a URL path that matches a path to a file in the WAR that’s considered a static file will serve the file, regardless of servlet and filter mappings in the deployment descriptor. You can exclude files from those treated as static files using the appengine-web.xml file.

搭配 appengine-web.xml 的這段一起看：

These are known as static files because they do not change, and can benefit from web servers dedicated just to static content. App Engine serves static files from dedicated servers and caches that are separate from the application servers.

[…]

By default, all files in the WAR are treated as both static files and resource files, except for JSP files, which are compiled into servlet classes and mapped to URL paths, and files in the WEB-INF/ directory, which are never served as static files and always available to the app as resource files.

簡單地說，就是除了 JSP 跟 WEB-INF 底下的東西，其他預設都會當成 static file。 而 static file 因為都不會變、所以可以作一些特別處理來優化效能。 所以 index.html 始終不觸發 doFilter()，也就完全合情合理了。 於是只要照著把 index.html 排除在外，就會觸發 doFilter() 了：

<static-files>
    <exclude path="index.html" />
</static-files>

把人家刻意優化的東西當成 bug，實在太丟臉了。 所以這篇貼在 PT2Club 就算了，不要拿到 DontCare Blog 上丟人現眼 [遮臉]

（謎之聲：干有差？ [指]）

訂閱： 文章 (Atom)