2011年12月27日星期二

git-hg 安裝筆記

三個月來的第一篇新文章,結果只是筆記一下要怎麼用 git-hg 來抓 hg repo……

以下都是 mac 環境:

如果沒有 homebrew 的話,就先裝起來吧!這是比 macport 更好用 n 倍的套件管理工具。

/usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

接著:

brew install hg
brew install git-hg

此外還需要 python 的一些 module:

sudo easy_install mercurial

最後 git-hg clone repo,再看少什麼補什麼吧。

完了XD

2011年5月1日星期日

MozTW 首頁的各種面貌

隨著 Firefox 4 的上市,這次 MozTW (Mozilla Taiwan) 的首頁有了一些新的設計,成果目前已經上線;在上週日的 Firefox 4 Party 上半場的小科展中,藉由插花小B 的攤位,我也有小小的展示了一下 MozTW 首頁的各種樣貌

這次的主要工程有兩項:隨作業系統而提供不同的內容、因應行動裝置的螢幕尺寸提供行動版面。


隨 OS 呈現不同內容

最早 Piaip 所製作的 MozTW 網站首頁,早已有偵測透過瀏覽器 User Agent 偵測作業系統的機制,首頁的下載框中,使用者所用的平台會高亮突起,幫助使用者選擇下載的 Firefox 版本(如下圖),不過這個機制已經壞了好幾年。


在此次更新中,小B 先是修好了平台偵測的 Javascript,接著我們就加上了隨不同平台提供不同內容的設計。主要的區別有兩項:首頁的底圖、及下方第一欄推薦軟體的內容。

偵測的平台有 Windows、Linux、Mac、iOS 及 Android/Maemo 五種,每種平台都有專屬的頁手標頭圖。前三種桌面端平台中,下方第一欄維持原本的 Thunderbird,在 iOS 下此欄推薦的是 Firefox Home,在 Android/Maemo 中則當然推薦新的 行動版 Firefox 了。


行動裝置版面

隨著 iPhone 的發售與 Android 的釋出,智慧型手機在這兩年呈現爆炸性的發展,手機上網正式進入普及期,因此我們開始想要針對小螢幕的行動裝置瀏覽 MozTW 的體驗去最佳化。

手機版網頁的製作有兩個方式:第一是做一個完全獨立的專用網站,後端的內容或許是可以維持同一套,但前端的頁面則切割為桌面與手機兩個完全不同的網站,藉由轉址等手段讓行動裝置能瀏覽到專用網頁。好處是在裝置端能有最好的瀏覽效果,壞處則是維護的成本要多出一倍。

另一個方式,則是針對現有的桌面版網站,加掛上各種調整的設定,讓手機瀏覽時得到較佳的效果。好處是維護的成本較低,壞處則有設計上較多限制、相對不靈活、且手機瀏覽下載的頻寬需求與桌面相仿、聯繫成本高、瀏覽速度慢等問題。
 
MozTW 網站所使用的佈景從 2004 年沿用至今,除了一些諸如 CSS 圓角、頁面寬度的調整以外,一直沒什麼變化。是有點一成不變,不過倒是出現了一個意外的優點—這個佈景是以欄為主的版面,最上方是 Banner、中間有主要產品欄、接著有三個項目並排、再下方則是最新消息與快速捷徑,最下面則是版權資訊等,全部合計有八個欄位。


因為每個資訊都容納在獨立的欄位中(以 DIV 包裹),而欄位間的功用及區隔也很明確,因此我們可以很直截了當的,順應行動裝置的小螢幕、長螢幕來調整各欄位置,當然最簡單的方法就是由上到下各個欄位排成一直排。

經過兩個禮拜的施工,CQD 完成了 MozTW 首頁的行動版型,並透過 CSS Media Query,針對 500px 寬度以下的裝置上加掛上行動版型 CSS,以達到自動切換版面的效果。

行動版型中,除內容各欄的排列外,正中央主要產品欄的主圖與最上方 Banner 上的導覽按鈕也透過 CSS 調整大小與排列。此外,在 iOS 及 Android/Maemo 等行動裝置上,提供桌面版 Firefox 4 的安裝檔下載是無用、不合理、且容易讓一般用戶混淆的事,因此我們也直接把「下載 Firefox 4」框框隱藏起來了。



成果

經過以上兩步驟的改造之後,我們得到一個 (1) 會根據螢幕大小切換為行動版型或一般版型 (2) 根據瀏覽者的平台不同提供對應資訊 的全新首頁。以下是各平台下,開啟 Moztw 首頁的截圖。

桌面端

Windows (Win7)


Mac OS X (10.6)


Linux (Ubuntu 10.10)

 
行動裝置端

iPad (iOS 4.3)


 iPhone (iOS 4.3)


Android (2.3)



其他

這次的更新,還包含了將首頁的圖形式圓角按鈕及欄位圓角,以 CSS3 border-radius  取代,降低下載圖片的需求、增加美觀(同時在 IE6~IE8 下醜化,IE8 以前版本不支援 CSS 圓角XD)。

此次的更新只限於首頁,點擊其他內容後就會跳回原始的全畫面網站。

除了行動版頁面外,對應 Mozilla 的 http://mozilla.con/m,三月底時 CQD 也製作了 http://moztw/m ,作為行動裝置的 Firefox 快速下載頁。


很多人注意到,這次從 Firefox 4 公開,到 MozTW 網站更新完成,有好幾天的落差。更新太慢的原因很簡單,就是人力不足。如果您對 Firefox 有興趣,想要加入 MozTW 社群一同貢獻所長,並且了解 HTML、CSS,或者會使用美工軟體的平面設計,甚或是翻譯、打雜等任何其他技能者,請看 參與我們 頁面。


延伸閱讀

2011年2月7日星期一

書介:《三體》

本文參與貓頭鷹出版社文學部落格〈三體 I〉試讀活動

(無情結洩漏,請安心閱讀)

閱讀〈三體 I〉是一個有趣的經驗,這是一本大時代故事的小說,又是一段段以角色為主體的中篇故事集。一開始閱讀,就讓我忍不住一口氣看完,而在全文閱畢後,又會再度翻回來,仔細品嚐其中各人的部份。

這種閱讀的經驗很近似〈海伯利昂〉,但相對於前者每篇完全獨立的形式,〈三體 I〉的前後文較緊密連結。在故事的發展上,閱讀時你很難猜出下一步情節會怎麼轉變、甚或是接著作者會說些什麼。或許讀到某處時,你以為已經窺見什麼,但翻過下一頁,隨即又發現那只是真相的片段、甚或是障眼法,此時讀者再度如同主角一般陷入迷霧。這是一本典型不讀到最後,無法了解一切的小說。

三體身為一本以科學來主導故事發展的科幻小說,科技面向的鑿斧極深,敘述翔實,作為故事的背景道具,足以讓讀者能信服,讓情節順其發展。

同樣是以中國為背景的故事,相較於〈黃禍〉,三體在社會的面向上明顯不足。不但在人物塑造部份表現較為薄弱,政治面也難以說服讀者。作者雖嘗試透過角色的背景故事,交代他們的行事作風與原因。但看完之後,再度回憶,仍有些許角色為了情節而活的感受。我雖能體會這些人物的作為,卻沒有真正觸摸到他們掙扎的內心。扁平的人物讓人讀起來少了投入感,也少了不少真實感,這是較可惜的一點。

在故事發展上,我覺得還是有些疑問解釋不清(或者無法自圓其說)。為了不洩漏情節,在此不說的太明:

一、故事前半段,主角看到的「大秀」幕後的黑手仍然未知,是否真是另一主角所主導的?他又如何有這等能力?二、「三體」的先進程度超出現有電腦發展甚多,雖然作者以「社群合力」的角度解釋,但以故事近未來的時間設定上,仍然讓人較難接受。三、該團體的能力與行事不太相稱,讓人不知該說是低調過頭還是高調過度。

總結上,三體的故事峰迴路轉,引人入勝,讓讀者驚異,但是說故事的技術還有增進空間,也讓讀者對於後續〈三體 II〉、〈三體 III〉有了一些期待與期許。

2011年1月2日星期日

Reeder For iPad 對閱讀全文終極武器

這兩天用 Reeder for iPad 看 RSS 時無意中發現的特異功能,似乎是最近更新時才新增上去的。這簡直就是對應 RSS 中「繼續閱讀」的終極武器!

類似癮科科這類 Blog,內容雖然很豐富,只是每篇文章的後半都有「點選這裡繼續閱讀」,得連回原站才能看全文,對於用 RSS 閱讀軟體來看文章時非常不友善……

Reeder for iPad - 1

終極武器開動:

Reeder for iPad - 2

一擊見效!(注意右上角的 [R])

Reeder for iPad - 3

2010年9月23日星期四

只要天氣熱我就會想理髮

每次只要天氣一熱,我就會想去理髮,只是這次剪得極端短了些……

Before

入伍理髮前

After

入伍理髮後

國軍 Online 明天開始登入,種族是海軍,新手村在左營,大家再見啦。