建構 Firefox OS 操作介面的基本元素: Fira Sans 字型

字型是使用者介面的基礎,所有顯示在畫面上的資訊都是由圖跟文字構成的。舉凡使用者需要閱讀、了解文意、或是進一步進行操作動作選擇的地方,不論是一段說明文字、一個對話框、圖示下面的標題文字、或是確認、取消的按鈕、系統設定畫面…等等,皆需要文字來構成。其實在介面設計中,沒有刻意去注意的話,可能不會發現,原來字型的運用是超乎想像地多的。 如下圖是 Firefox OS 的首頁以及設定、對話框畫面,就用.....深入了解

Web app 如何操作硬體功能(Firefox OS 的內部溝通 - 藍牙篇)

我們在 Firefox OS 手機的設定選單中,可以選擇開啟藍牙或是 GPS 這種手機硬體相關的功能。只要輕鬆點擊網頁語法寫出的按鈕,就可以操作裝置硬體,這在 web app 中是怎麼做到的呢? Web app 開發者通常可以查詢相關的 web API 網頁,看是否有適合的 API 可以幫忙執行想要的工作。有些 API 是 W3C 標準,有些則是不同瀏覽器提供不同的界面,還需一段時間慢慢發展為標準.....深入了解

在 Firefox OS 取圖片色彩平均值之二三事

在 Mozilla 開發 Firefox OS 的歷程中,使用者體驗是我們非常著重的項目。在近期開發的 Firefox OS 版本(2.0)上,我們大幅修改了鎖定畫面(Lock Screen,或稱螢幕鎖)的外觀。下圖左是舊版畫面,圖右是新版畫面。 在新版的鎖定畫面中,當手機收到通知(簡訊、未接來電等等)並將之顯示於鎖定畫面時,我們會在鎖定畫面上覆蓋一層半透明的純色圖層,用來強調這些通知訊息.....深入了解

專注在該費心的工作上,用 CI 來提昇程式品質

在開發的過程中,很常會遇到新上的 patch 不小心弄壞了已經存在的功能。處理這種 regression bug,尤其是在已經有大量 patch 加入了程式碼之後,要找出當初弄壞這個功能的 patch 更是難上加難。現在已經有一些工具能夠幫助你用 bisect 以二分法來找出造成問題的 patch,但還是要花費不少時間,若是能夠在第一時間預防,在 patch 加入後就進行測試,就能夠大輻降低開發時.....深入了解

從 UI 元件上測試你的 App

謀智台客之前的文章提到了有關 Gaia-ui-test ,在 Mozilla 工作團隊的努力下,這套工具已經越來越健全,足以寫出貼近使用者體驗的測試了。 對於開發者來說,更重要的是如何使用它來幫助自己開發的程式。下面以 Contact App 的例子,如何透過 Gaia-ui-test 的架構來測試 App 。所有的範例都可以從 Github 上查看原始碼。 安裝 client Gaia u.....深入了解

WebIDL Extended Attribute 大解密

在 Gecko 的 New DOM bindings 文章中,Kan-Ru 曾經介紹過 Mozilla 開始改用 WebIDL Binding 的歷史小故事,也在文中手把手的教大家如何透過 WebIDL expose API 給 application。本篇將進一步介紹 WebIDL 中的 Extended Attribute 與其在目前 code base 中的使用情形,讓大家對於常用的 Ex.....深入了解

航向 128MB 的偉大航道-Gaia • 神奇的可視範圍監視器

隨著超低價的市場崛起,我們對各項資源也開始斤斤計較。不論是 CPU、RAM、及 Flash,每一個項目都是我們努力減少的目標。先前丹尼兄及艾倫兄已分別為大家介紹過 gecko 在處理記憶體管理上的文章[1][2]。這些都是著墨在記憶體管理上,今天醬糊小弟將向各位介紹一個在 gaia 存在已久的可視範圍監視器(Visibility Monitor)。   起源 Visibilit.....深入了解

Audio 就是矯情!

  "聽  海哭的聲音  這片海未免也太多情   悲泣到天明" 是低,大家都知道是阿妹經典到不行的歌,但是如果阿妹聲音播不出來,那哭的人就換成是我而不是那片海了 Orz ! 請大家先從阿妹的歌聲裡 (或是我的哭聲?) 回到現實來,聽我來聊聊 Firefox OS 裡聲音的部分。基本上聲音系統裡可以簡單分成兩種,一種是 voice 另一種則是 audio,簡單的分法就是".....深入了解

像原生應用程式一樣的 WebApp?趕快學起來!

經常收看謀智台客的讀者可能已經看過怎麼開發一個 (Firefox) WebApp,或是可在 MDN 上找到相關開發資訊。 簡而言之,Mozilla 提出的開放 WebApp 標準草案,允許把使用網頁技術製作的網頁做成 App 來使用。提供的方式除了 App 使用者所習慣的 App Store 模式(如 Firefox Marketplace),即使用者到固定的應用商店下載整包封裝好的 App.....深入了解

女媧,在 FxOS 裡捏 process

在 Firefox OS 中,有一個類似 Android Zygote 的 process,利用 [crayon-5a10f4aca2741313075805-i/]  複製出應用程序並在這些應用程序間透過 copy-on-write 共享記憶體分頁。這麼做有助於降低記憶體用量和更快速的啟動應用程式。她的名字叫 Nuwa – 女媧 [1][2]。 不過,[crayon-5a10f4aca27.....深入了解