使用 Github 開發我的第一個網頁應用程式 (Web App)

網頁應用(Web App) 網頁或網站設計是門很容易上手,但卻很難精通的領域。特別是近年來網頁相關技術隨著 HTML5、Node.js、Cordova 等的發展,網頁可適用的邊界進入了爆炸性擴展的階段。在諸多網頁技術所涵蓋的新疆界中,網頁應用(Web App)可以說是一個稍稍有別於傳統網頁設計的嶄新領域。之所以將網頁應用劃分為網頁相關技術的「嶄新領域」,可以由下面幾點察知: 1. 從使.....深入了解

自己的瀏覽器自己改 (Part I) -利用Firefox Addon SDK開發簡單的附加元件

Firefox 最受歡迎的特色之一就是量多而且質精的附加元件 (Add-on),在 Firefox Add-ons 網站 [1] 您可以找到各式各樣的附加元件滿足您的各種上網需求。在這篇文章中我們將會介紹如何利用 Firefox Add-on SDK [2] 來撰寫簡單的附加元件。我們會教您如何利用附加元件來改變網頁的外觀與行為,即使不是自己架設的網站,我們也能隨心所欲的改善它們的使用經驗。 準.....深入了解

標準化的錄影API

當 HTML5 發展日漸成熟之際,在多媒體的輸出原生支援方面,目前已經支援了大多數網路常見的格式,所以開發者可以使用 [crayon-59c296085362d813950405-i/]  或是 [crayon-59c2960853633624602270-i/]  tag 來進行影音播放控制。但輸入方面,目前各家瀏覽器並無統一的 API 實作,為解決此問題,W3C 委員會在 2013 年開始制定.....深入了解

四個 SVG 動畫應用範例 - Firefox 十週年活動網站技術解密

不知道大家有沒有注意到,這次的 Firefox 十週年活動網站上出現了一些特殊的動畫元素。這些元素不是 GIF 圖素,也不需要複雜的動畫套件,而是運用了 SVG 本身具備的動畫功能。 使用 SVG 來做動畫有幾個好處: 首先因為是向量圖形,所以任意縮放變形都不怕出現鋸齒顆粒。 多數向量繪圖軟體都支援 SVG 輸出,詳細支援度可參考 Wikipedia 上的比較表。 除了進行一.....深入了解

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

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

RWD 流言終結者

RWD 全稱為 Responsive Web Design(適應性網頁設計),簡單來說就是讓你的網頁能夠伸縮自如的設計方式。在前兩篇文章介紹完九個 RWD 小撇步之後,接下來小小分析一些常見的 RWD 流言,並不是說這些流言都是胡謅一通,但我們如果常因為流言中的一些負面模糊形容而卻步,很可能就錯失了一些正面的改變機會,所以我在這邊針對一些形容詞,提供數據和參考資料,並對應現實的情況讓大家有一個基本.....深入了解

九個適應性設計小撇步,把你的網站打造成變形金剛!(下篇)

接續上一篇所介紹的一些基本 CSS 排版小技巧,本文第一部分開始介紹 CSS media queries 常見的使用方式,以及一些在開發初期就要先注意的地方;第二部分則介紹一些適應性設計相關的工具及 Javascript 套件。希望這些小撇步可以幫助你在開發網站上事半功倍囉! 運用 CSS media queries 撇步四:排版避免設定高度及絕對位置,寬度設定儘量集中 右下角可拖曳縮放.....深入了解

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

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

再探 Inter-App Communication (IAC)

先前 EragonJ 跟大家介紹過 Inter App Communication 的使用情境以及使用範例程式碼,本篇將繼續討論 Inter-App Communcation(文章後面將縮寫為 IAC )其他較少為人知的面向。 雙向通訊連線 使用 IAC 建立連線的程式碼通常如下: [crayon-59c29608564e0213784165/] 但其實 IAC 建立出來的連線是雙向連線,.....深入了解

從 JavaScript 的 Map/Reduce 談起 Functional Programming

自 ECMAScript 5.1 開始 JavaScript 加入了兩個關於陣列的函式:Array.prototype.map/reduce。這兩個函式可以針對陣列,讓開發者更清楚的描述接下來程式碼所要表達的運算性質。除此之外,也簡化了每次手寫迴圈進行尋訪陣列的繁瑣過程,特別是當尋訪實際上是要將原本的陣列映射(map)成另一個陣列,或是進行加總、檢驗等具有化簡(reduce)性質的操作。 左.....深入了解