Sunday, July 06, 2014

Material Design(物質設計)是什麼?

物質設計(Material Design)

「物質設計」有人翻作材質設計,但我很容易把「材質」聯想到3D遊戲的材質貼圖去,這跟 Material Design 所想要表達的意涵差了十萬八千里。而從相關的英文詞彙聯想,「Material Girl」或譯為拜金女孩或物質女孩,那種對於追求「摸的到的實際東西」有所迷戀的意涵,似乎與 「Material Design」的內在涵義更為貼近,所以我更願意稱之為「物質設計」。

物質設計(Material Design)是什麼?

簡而言之,Material Design(物質設計)是 Google 公佈的一套同時適用於Android、iOS、Web 等各種平台,同時能適用於手機、平板、電視、電腦螢幕等不同裝置的跨平台/裝置的設計規則(仍需為各裝置設計,但鼓勵共用更多相同元素)。

讀者也可以透過觀看 Google I/O 2014 - Keynote(從14:18分開始,由 Matias Duarte 介紹 Material Design)https://www.youtube.com/watch?v=wtLJPvx7-ys  可以得到對於 Material Design 最精巧的介紹。

我不是設計師,僅從開發者角度分享一些個人想法,如果還有興趣請繼續看下去。


從擬物化、扁平化、到物質化的 App 設計

自從 2007 年 iOS 重新發明手機之後,「擬物」化(Skeuomorphism)一直是 iOS App 的設計原則。「擬物」化的設計,讓新接觸「智慧手機」、「智慧平板」的使用者得以沿用過去實物的使用經驗,愉悅地使用新的數位化工具。

但是這幾年智慧手機/平板實在太成功,軟體App 漸漸吞噬了實體世界的各種工具,造成原本「擬物」所參照的物品已紛紛變成老古董,要年輕人畫出電話的形狀,可能畫的卻是手機的模樣...總而言之,許多擬物的參照物已經漸漸被時間淘汰了。

微軟的設計師們很早看出這個趨勢,在2010年推出的 Window Phone 中使用了極端「扁平」化(Flat)的設計風格。
經過幾年來的大膽嘗試,最後也由市占極高的 iOS/Android 定調了使用者界面「扁平」化的發展潮流。「扁平」化的設計,讓使用者得以減少在使用 App 過程中,辨識「擬物」化界面所產生的認知疲勞。

不管是「擬物」化或者「扁平」化,在每個平台的設計指南中,都明確指出設計的App要提供最佳的使用者經驗,必須要符合該平台的風格。iOS還分別為手機與平板提供不同的設計指南,並指出手機與平板是不同的設備,App設計必須要符合該設備的使用情境。

其實平台們的意思很簡單:現在開發者必需要對應每個平台,針對平台不同的風格提出相符的設計。對於同平台的不同裝置,也請分開處理。

於是現在開發者(或提出 Material Design 的 Google,別忘了他們得支援多少種平台與裝置)要面對的,是針對不同裝置、多重平台開發設計 App 時所需面對的各種問題。

「物質設計」(Material Design)就是 Google 整理出的新跨平台、跨裝置適用 (For every screen, and for all devices) 的設計指南。並將首先套用到 Android 的最新版本「L」上。


物質化的 App 設計

「物質設計」是以「扁平」化的 App 設計為基礎,加上紙質分層的概念(即以「Google Now」為代表的卡片式設計),整理出字體、色彩、圖標等設計模式,並加入佈局(Layout)、圖像,與動畫效果(effect)等設計模式。紙質分層與「動畫效果」產生出的設計模式,就我所知,是在之前的各種介面設計中所未特別強調的。

想進一步了解Material Design上的動畫效果,可由 Google I/O 2014 - Keynote(從18.25分開始,由 Matias Duarte 介紹 Material Design Animation)https://www.youtube.com/watch?v=wtLJPvx7-ys  查看。

物質設計(Material Design)工具

看完這些大片的色彩、轉場、動畫效果,不知道身為開發者的你臉綠不綠,反正我綠了。 這樣該如何應用於 app 開發哩? 整個開發成本還了得?

還好 Google 還提供了一些配套工具(但卻不是出現在 Android L)。

(未完待續)

參考資料


Monday, June 16, 2014

遷移個人首頁經驗分享


在DNS代管商網站上輸入要切換的CNAME

在Openshift中輸入domain name alias

遷移成功!


趁週末將個人首頁 www.gasolin.idv.twGoogle App Engine(GAE) 遷移至 OpenShift. 從2009年開始使用 GAE 架設個人首頁,從剛開始 (python, GAEO),2012(Java, play framework),到今天遷移到 OpenShift(Node.js, webapplate / Express),使用了三種 Server SIde 技術。最近的這次遷移只用了兩天,就完成整個申請/移植/部署的過程。遷移的主因是 GAE 最近不再支援 Java 1.6,使得無法繼續使用 Play Framework 1.2.x 來部署。Play Framework 1.2.x 已經被完全改寫的 2.x 取代許久,而新版並未支援GAE。加上近年開始使用js的機會更多,於是乾脆搜尋了一下,選擇 OpenShift 作為最新的遷居點。

除了 Play Framework 例外,GAEO我有參與開發,webapplate 則乾脆是自己弄來撰寫 Web App 的樣板。透過實際使用,目前可無痛部署到 HerokuAppFogOpenShift 上,而不需修改程式碼。所以雖然說遷移只用了兩天,但其實為了弄好 webapplate,也準備了快一年。

由於 webapplate server side 使用 express 4搭配 swig (Django-like) 樣板(template)引擎使用,與原本使用的樣板架構一致,所以遷移上並沒有遇到什麼問題。

webapplate server side 已做過伺服器效能最佳化,使用yslowpagespeed都可以測到相當高分的結果。


Tuesday, May 06, 2014

來自未來的CSS - media 查詢

注意本篇提到的技巧僅適合用在特定平台的Webapp中,透過預處理器來針對特定使用平台做最佳化。但是在撰寫時仍然可以是完全跨平台的。


接續上一篇,我們繼續來重新發現一些對於有助於撰寫結構化CSS的一些CSS標準語法。


Media Query 是撰寫 Responsive design web 響應式網頁的重要元素之一。透過諸如

@media (min-width: 768px) {
  ...
}

這樣的語法, 瀏覽器可以根據條件,刪選並套用特定的規則來顯示。這邊需要注意的是桌面瀏覽器與移動設備瀏覽器/webapp的不同之處:在移動設備上看webapp時,除了基本Orientation之外,並不太需要調整螢幕大小。但是瀏覽器並不知道這之間的不同。瀏覽器看到@media 標簽時的運作模式,並不像一般條件式程式一般,若條件不符合時就不執行,而是一律讀進來並預先解析進 rendering tree。

在最近針對Gaia的一些load time performance measuring中,我們發現在Settings App中,每加入一行 @media 語句就會增加 100ms 左右的啟動延遲,很可能的原因就是每次瀏覽器看到@media標簽時就需要跑一次預先解析過程。因此在瀏覽器引擎本身有提供更好的方案之前,我們勢必得尋找中短期的解決方法來克服遇到的問題。


provecss 中我們嘗試提供了幾種預處理 media query 的方法。一種是搭配「Import」語法提供 filter,根據檔案名稱在 Import inlining 時將不符合條件的檔案拿掉。

例如上一篇中使用到的範例


@import url("app_mobile.css");
@import url("app_tablet.css");



我們傳入 import_filter = ["mobile"] ,則 Import Inlining 結果將只傳回「app_mobile.css」檔案中的內容:

headers {
  background-color: orange;
}

「app_tablet.css」檔案中的內容就被濾掉了。這種方式可以部分解決問題,但使用上的彈性並不是很好。

另一個方式是使用標準CSS語法預處理器(Pre-processor)來查詢 CSS 檔案中的內容,只將符合條件的@media 查詢結果留下。

 我們傳入 { width: '240px', height: '320px' },則
@media (min-width: 768px)並不符合查詢條件,所以輸出的結果也會是 

headers {
  background-color: orange;
}
這個方法能應對更複雜的情境。我們還能進一步 傳入「media_extract」參數,將輸出的 @media 標簽去除。

headers {
  background-color: orange;
}
// was-@media condition
headers {
  background-color: red;
}
於是原本@media標簽中的樣式將覆寫過原來的樣式,在特定機型中達成一樣的顯示效果。(目前主要目標是拿來用在Gaia內建App的編譯上)


如何安裝provecss
npm install -g provecss

使用命令行操作
provecss imprt.css imprt.out.css --import

加入「--import」參數即可啟用 import inlining 功能。

此外 provecss 還可以作為 node 函式庫或是 Grunt plugin 呼叫,更詳細的使用說明請參考 provecss 的 README。

Monday, May 05, 2014

來自未來的CSS - 匯入(Import)

接續上一篇,我們繼續來重新發現一些對於有助於撰寫結構化CSS的一些CSS標準語法。

對於比較複雜的CSS樣式,其實在CSS標準語法中,早已提供使用「import」語法來結構化地組織 CSS 樣式表。

語法如下:

@import url("app_mobile.css");
@import url("app_tablet.css");

瀏覽器在載入時會自動去「app_mobile.css」和「app_tablet.css」檔案中載入相應的CSS樣式。

有經驗的使用者在此會提出質疑:在CSS檔案中使用 import 語法將會拖慢載入速度,千萬別用!

是的,由於瀏覽器須先完全載入這個包含「import」語句的CSS檔案,然後才能再載入「import」語句中的檔案,整個載入流程會被阻塞住,需等待所有CSS檔案載入完成後才能繼續渲染(Render)過程,所以將比直接在檔案中平鋪CSS樣式的載入時間更長。

解決方法一樣是使用標準CSS語法預處理器(Pre-processor)來將使用到「import」語法的CSS檔案「扁平化」。即將「import」語法中讀到的檔案直接嵌入到原檔案中,以達到平鋪的目的。

如果 app_mobile.css 檔案的內容為

headers {
  background-color: orange;
}
 
app_tablet.css 檔案的內容為
 
@media (min-width: 768px) {
  headers {
    background-color: black;
  }
} 
經過「Import Inlining」處理的檔案將變成如下


headers {
  background-color: orange;
}

@media (min-width: 768px) {
  headers {
    background-color: black;
  }
}



 
處理後原來共三個檔案會縮減為一個檔案,達成一樣使用效果的同時,還避免了效能上的疑慮。
 
在 provecss 專案,「Import Inlining」是其中一個主要與 myth 不同的特性。

如何安裝provecss
npm install -g provecss

使用命令行操作
provecss imprt.css imprt.out.css --import

加入「--import」參數即可啟用 import inlining 功能。

此外 provecss 還可以作為 node 函式庫或是 Grunt plugin 呼叫,更詳細的使用說明請參考 provecss 的 README。

來自未來的CSS - CSS 變量

 CSS變量(CSS Variable)是我最近才注意到的新玩意。它要解決的問題其實跟已經行之有年的LESS或SASS相似,即讓 CSS 能用上變量(變數)。

語法像是這樣

:root {
  --main-color: orange;
}

body {
  color: var(--main-color);
}
 
在一個 CSS 根元素中以「--」開頭定義CSS變量,在一般的CSS 樣式中使用「var(--)」來使用變量。

就如範例所示,只要改變一個變量的值,就可以改變整份CSS的參數。例如將「--main-color」變量的值改為「red」,則整個Body的color就會變成紅色。

這參考標準草案有多新?在目前所有的瀏覽器中,只有剛發佈的Firefox 29才有正式支援。

...對於暫時只有在特定瀏覽器上能運作的新功能,一般網頁開發者都是抱著敬謝不敏的態度。就算不提瀏覽器跨平台的支援不足,「CSS變量」一聽起來,跟原本的靜態CSS比起來,感覺就會有效能上的疑慮。

但是前陣子發現了 mythrework-vars工具,這些工具的作用是對使用標準/新 CSS 語法的 CSS 檔案預處理(pre-processing),將新的CSS變量語法轉換成向前相容的靜態語法。透過這樣的方式,開發者在開發時可以使用最新的CSS語法來撰寫更加結構化的CSS,而不需要使用額外的函式庫。同時在部署時可以透過標準CSS語法預處理器(Pre-processor)來將有瀏覽器相容/效能疑慮的 CSS 轉換成「現實版」的 CSS 語法,好讓現在的所有瀏覽器能識別來自未來的 CSS。

經過預處理後,CSS樣式表變成如下
body {
  color: orange;
}
可以看見變量宣告與賦值的部分都直接被整合成靜態CSS了。

在開發 Gaia/webapp 的過程中,我們正遇到了類似的狀況:對於在 FIrefoxOS 平台上執行的 webapp 而言,1.4 版(對應Firefox 28)和以前的 FirefoxOS 版本也無法使用 CSS 變量,但是在未來的版本上卻肯定應該試試這些新網頁技術。對於一般的webapp開發者而言亦然。

於是我建立了 provecss 專案,provecss 專案吸收了 myth 的特性,但為 gaia 和 webapp 做了更多的調整。就 CSS 變量這特性而言,與 myth 不同的地方是 provecss 預設並不處理 CSS 變量。provecss 其他的功能,將在接下來的文章中進一步做說明。





如何安裝provecss

npm install -g provecss

使用命令行操作

provecss vars.css vars.out.css --vars

加入「--vars」參數即可啟用 CSS 變量取代功能。

此外 provecss 還可以作為 node 函式庫或是 Grunt plugin 呼叫,更詳細的使用說明請參考 provecss 的 README。

Wednesday, March 19, 2014

FoxBox and SummerOfCode14

FoxBox is the project that intent to provide a battery included Firefox OS build environment.


The goal of foxbox is to try any approach that make new user can do as less as possible to start the FirefoxOS development

Our first take is use vagrant with virtualbox to make major platform users can try FirefoxOS dev in VM.


It will be great to setup the current version of foxbox in your desktop environment
http://github.com/gasolin/foxbox

And record obstacles you encountered here https://github.com/gasolin/foxbox/issues?state=open.
There are some issues (but not the limit) that might be worth to do in the future version of foxbox.


Note that you require a desktop with INTEL VT-x/AMD-V hardware virtualization support(Windows8 or Mac already enabled it), at least 4GB RAM and about 10~40GB disk space(for gaia or full B2G development).


FoxBox has been approved by the Google Summer of Code administrator http://wiki.mozilla.org/Community:SummerOfCode14 , so its perfect time to step up, try FoxBox, fix issues that every others will encounter, save everybody's time and start make your own Firefox OS phone.

If you'd like to contribute FoxBox for SummerOfCode14. We expect you could find out the interesting topic you want to contribute or any other way that can better achieve FoxBox's goal.
 

Android Wear 周邊



Android Wear不是作業系統, 基本上是拿來開發Android周邊所使用的協定。它是把原本需要拿出手機查訊息,變成透過 Notification API傳給手錶。透過 Google Now 手錶可以收到
推播來的相關訊息或透過語音辨識來控制手機應用做事情。

因為 Android Wear + Google Now 帶來的便利性,Google可以再進一步加強圍繞著Play Service/Google Now的生態圈。

Friday, February 14, 2014

人生就像是遊戲,這篇就是你的攻略指南

這篇文章的原文為 Life is a game. This is your strategy guide,作者為 Oliver Emberton,譯者為 gasolin。已獲得作者的翻譯許可。

(按下開始鍵)

真實的人生就像是遊戲,每個人都身在其中。 但遊戲過程可能會遇到困難,這篇文章就是你的人生攻略指南。

基礎

你可能還沒意識到,但真實的生活其實是場策略遊戲。遊戲裡面還包含了許多有趣的小遊戲 -- 像是跳舞、開車、跑步、與愛愛 -- 但是遊戲勝利的關鍵其實只在如何善用你的資源。
最重要的是,成功的玩家將他們的時間用在正確的事情上。即使在遊戲的中後階段加入了「金錢」這個要素,但你應該優先考慮的,依然是關於如何運籌帷幄你的時間。


童年

人生遊戲開始於你被指派了一個隨機的角色與隨機的環境

(選擇你的角色)

遊戲的前15年左右只是新手導引任務。這部分的導覽實在做得不怎麼樣,而且還不提供跳過選項。

青年階段

作為一個年輕的玩家,你擁有許多時間與精力,但幾乎沒有經驗。你會發現大部份的東西 -- 像是最好的工作、最好的財產、最好的伙伴 -- 直到你取得之前都仍然未解鎖。
這個階段是可以快速升級你的技能的時機。在之後的階段裡,你再也不會那麼多時間與精力了。
現在你要好好地玩這場遊戲,你的首要任務是將你的時間作最好的分配。每件你做的事情都會影響你的狀態與技能:

(編程 +程式能力 +職業前景 + 邏輯)
(喝酒 -健康 -精力 -金錢) 

這聽起來很容易,但問題是你不總是知道該選擇做什麼事,而且你的身體不見得總是服從你的命令。這就來一一說明吧:

如何讓身體服從你的命令

許多玩家發現,當他們選擇做某個任務時 -- 例如「去健身房健身吧」-- 他們的身體完全忽略了這個命令。這並不是一個錯誤(bug)。 每個人身上其實都有一個狀態欄,只是你無法直接看到它。這個狀態欄很可能長得像這樣:

(健康 精力 意志力) 

如果你的某個狀態指數太低,你的身體將抗拒執行你的指令,直到你的需求已被滿足。試著在你又累又餓的時候讀書吧,你會發現你的注意力一直跑到臉書上。

在這些狀態中,你的意志力指數狀態是最重要的。每天起床後,意志力就會隨著時間降低,在吃些東西後會回復少許,只有透過睡一晚好覺才會完全回復。當你的意志力指數很低的時候,
你只能做那些你身體想要做的任務。
生活中作出每個決定時,都會消耗意志力指數。對於那些你必須要作出不做比較吸引你的任務,而去做較不吸引你的任務的決定(例如不看電視而去健身)需要消耗大量的意志力。

這邊有許多技巧可以幫助你保持良好狀態:

1. 保持良好的狀態. 如果你覺得飢餓、疲憊、或感覺全無樂趣,你的意志力會崩潰。請確保你有持續地好好對待你自己。
 2. 不要一天內消耗太多意志力. 將你最困難的項目分作多天完成,並搭配一些沒那麼難的項目一起做。
  
3. 每天先做最重要的事. 這會讓其他的事情更困難一些,但這讓你最重要的項目更可能完成。

4. 透過減少選項來減少消耗意志力. 如果你試著在可以連上臉書的電腦前工作,你需要更多的意志力來工作,因為你必須持續地選擇做困難的項目而不是選簡單的。消除這些分心的事吧。

玩這場遊戲的重要部分是平衡你的眾多任務的順序與你的身體狀態。別讓你自己進入隨波逐流的
自動導航模式,否則你什麼事都完不成。


選擇正確的任務

在正確的時間選擇正確的任務就是這遊戲的精髓。有些任務會影響你的狀態,例如

(吃東西 +精力 -飢餓)

另外一些任務會影響你的技能:

(練搖滾 +音樂性 +臉部彩繪)

你需要花時間在那些保證你健康狀態的事情上 - 例如進食與睡眠 - 好讓你的意志力狀態維持高檔。然後你需要發展你尚未俱備的技能。一些技能比其他的技能更有價值。好的技能可以開啓整條升級道路,像是科技樹一樣:

(電腦技能 -> 電影制作者, 程式設計師, 網頁設計師 -> 臉書創辦人 ->千萬富豪)


有些技能則是沒有發展性的死路:


(用膝蓋頂球)

結合多個技能是最有效的。要把一個技能練滿是非常困難的 -- 事實上,通常是不可能的。但把一堆相關的技能練到似模似樣就簡單多了。例如:

(商業 + 自信 + 心理學 = 企業家)

(烹飪 + 跳舞 + 心理學 = 舞男)

看到心理學如何讓你變得又富有又有魅力了吧?你應該學學這個(笑)。

你在哪裡生活

你所生活的環境會持續地影響你的狀態、技能,與你升級的機會。你可以在任何地方把遊戲玩地很好,但在一些地方,要把遊戲玩好卻更簡單。例如如果你是身在某些國家的女性玩家,有許多成就你都不能解鎖。任何玩家生在最佳環境的機會都基本上是零。所以搜索看看你的選擇吧,仔細思考是否要早點移動。環境是你的技能與狀態的一個乘數。在適合的環境中,你的表現會成倍增長。

尋找伴侶

「魅力」本身就是個複雜的小遊戲。但大部份伴生於你已經在玩的遊戲。如果你已處在很好的狀態並擁有很好的技能,那麼你已經具備不小的魅力了。一個疲憊、易怒、身無所長的玩家一點都不吸引人,而且可能不該嘗試尋找另一半。

(成就解鎖 快樂 +1 頭痛 x2)

在這個小遊戲的初期,不管是拒絕其他玩家,或是被其他玩家拒絕都很常見。這是正常的。但不幸地是大部份玩家不太會處理拒絕,這都會降低你的狀態。你需要消耗一些意志力以恢復遊戲,而意志力需要透過睡眠來回復,所以給點時間吧。

80%要找到另一半的因素,通常歸結於如何讓自己變成最有魅力的自己 -- 就像人生遊戲的其他方面一樣 -- 意味著將你的時間放在正確的地方。如果你運動、社交、補充營養、發展自己的事業,你的魅力也會自動增加。剩下的20%則是讓自己出現在會遇到對的人的地方。

錢、錢

 遊戲的稍後階段中你需要管理一種叫做「金錢」的新資源。大多數玩家會發現遊戲的早期階段金錢通常會逐漸增加,但通常這只會造成更多問題,而不是更少。


關於處理金錢最重要的規則是「絕不借錢,除非借了錢能讓你賺更多回來」
 例如,教育或房貸可能有價值(但得看狀況,並不一定)。借錢買鞋則不是。

根據你的財務目標,這邊有幾種策略可以參考:

  1. 不為錢煩惱. 低壓力策略:只要量入為出,並未雨綢繆即可。在你可以存錢的階段時就盡量存錢吧,不然你會後悔的。
  2. 小康. 審慎選擇一個職業與環境,準備經常轉職或升職。你需要大量投資在相關的技能上,這會花掉你許多時間。而且注意別因此操壞你的身體,不然你會提早掛掉的。
  3. Mega rich. 開始自己的生意. 為別人工作幾乎不可能變得富有。自己工作不會變得富有,擁有東西 – 資產 – 才會變得富有。資產會回報比投資時所花費的更多,而且你的公司是你可以從頭建立起的一個有力的資產。 結合你的回報變成更多的資產,最終它們讓你完全不需工作.
晚年階段


在遊戲進行的過程中,你能選擇的也跟著改變。婚姻和孩子將減少你的時間和精力,而且在遊戲中引入了更多隨機元素(緊急換尿布任務!)這讓你更難以快速地發展你自己。
 較年長的角色通常擁有更多的技能、資源,與經驗,能解鎖那些之前無法參與的大任務。例如「擁有一棟房子」,或「寫一本(好)小說」。

(聽力 -1 寬鬆的褲子 +10) 

所有的玩家在大概 29000 天,或80年後死去。如果你的狀態和技能良好,你可能可以延長一點時間。但是並沒有作弊碼可以大幅延長遊戲時間。

在遊戲開始時,你沒有辦法控制你是誰或你在哪裡。在遊戲結束時,你依然無法在這時改變結局。你過去所下的那些決定,會絕大地形塑你最終結局的好壞。如果在你最後的人生中開心、健康、圓滿 -- 或不然 -- 你都無法再改變什麼。

這就是為什麼攻略很重要。 因為隨著時間我們大部份人都會瞭解人生遊戲到底怎麼玩,但這時我們已經浪費掉太多精華部分了。

現在你最好趕緊去玩人生遊戲吧。



Sunday, February 09, 2014

Auto-configured FirefoxOS Build Environment in a VM

I'm pleased to release first FoxBox version that may save a lot of time for people who wants to give FirefoxOS development a try.

For web developer who wants to contribute to gaia might meet a serious problem that they might have limit knowledge of *nix system. But to build gaia, the command line and make script is essential.

For developer who wants to contribute to B2G project, a bunch of per-requisite settings must be configured well before really digging into the code.

FoxBox could help (currently I mainly focus on) B2G/gaia developer quickly setup a working environment in VM.

Generally FoxBox 0.4 provide a Vagrantfile which automatically configure a VM with bunch of tools you need for building FirefoxOS and gaia development.

FoxBox have put a comprehend list of USB vendors, so any Android/FirefoxOS smartphone plugged can be identified.

With vagrant's NFS shared folder, developer can use their favorite editor to code.

FoxBox also bundled with a minimum GUI environment that enable you to test FirefoxOS in VM. Firefox Nightly will be pre-installed for you as well!

Read README for more detail.

Happy Hacking!


Disclaim: Though I work for mozilla, FoxBox is not an official project of Mozilla. Currently its just my side project create around Chinese New Year's holiday.