當初我們決定要將 Firefox OS 應用到智慧電視 (Smart TV) 上時，第一個遇到的問題便是操作介面的不同。在一般的電視使用情境下，使用者通常不會有滑鼠或是觸碰螢幕，能拿來操作的是那少少幾個按鍵的電視遙控器 (好吧，其實現在電視遙控器上的按鍵還不少)。在將 Firefox OS 這樣一個...

invert 在各大平台上的 App 商店裡，影像處理相關的應用程式總是在熱門排行榜上佔有一席之地，Web Platform 當然也不落人後的提供建構影像處理 APP 的相關功能。在這篇文章裡，我們將介紹如何利用 HTML5 的 getUserMedia() API 來建構一個影像處理應用程式的架構...

10yearssvg不知道大家有沒有注意到，這次的 Firefox 十週年活動網站上出現了一些特殊的動畫元素。這些元素不是 GIF 圖素，也不需要複雜的動畫套件，而是運用了 SVG 本身具備的動畫功能。 使用 SVG 來做動畫有幾個好處： 首先因為是向量圖形，所以任意縮放變形都不怕出現鋸齒顆粒。 多...

RWD 全稱為 Responsive Web Design（適應性網頁設計），簡單來說就是讓你的網頁能夠伸縮自如的設計方式。在前兩篇文章介紹完九個 RWD 小撇步之後，接下來小小分析一些常見的 RWD 流言，並不是說這些流言都是胡謅一通，但我們如果常因為流言中的一些負面模糊形容而卻步，很可能就錯失了...

接續上一篇所介紹的一些基本 CSS 排版小技巧，本文第一部分開始介紹 CSS media queries 常見的使用方式，以及一些在開發初期就要先注意的地方；第二部分則介紹一些適應性設計相關的工具及 Javascript 套件。希望這些小撇步可以幫助你在開發網站上事半功倍囉！ 運用 CSS medi...

繼之前蓋索林大師的一個打十個系列文章，介紹了 Gaia WebApp 支援多種設備的技巧，本系列文章將深入介紹一些網頁適應性設計相關的通用工具及方法。如果你還不知道什麼是適應性設計，底下有簡潔的介紹。 什麼是適應性設計？它適合我嗎？ 適應性設計 (Responsive Web Design，簡稱 R...

Firefox 愛在鵲橋狐你幸福 在八月份的七夕搭鵲橋活動裡，用網頁動畫呈現了牛郎織女團聚慶祝的畫面。不知道有沒有眼尖的網友發現，其實活動網頁裡的動畫效果都是運用 CSS animation 及 CSS transition 所做出的特效喔！揪～竟～要怎麼做出這些特效呢？讓我們繼續看下去。 這邊也順...

前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦！ 登登登！傳說中的～視差動畫！ 設定你的視差捲軸動畫 視差效果視差效果（圖片取自 Wikipedia） 先構思好動畫的進行方式，視差故名思義就是景物因遠近不同造成視線內移動速度的差異， 最常見的例子是在坐車時，...

我就先不賣關子，底下這個 fiddle 就是這篇文章的刮刮樂範例完整版。 可以玩玩看，試著瞭解裡面的程式腳本，或是 fork 來改改看。 有興趣但看不太懂 code 的話， 就跟著本篇文章的介紹帶你入門吧！ 如果大家有看過九月份的「Firefox OS 讓你儘情享受每一刻」活動網頁（註 1）， 應該...

各種常見的螢幕大小 我們發現到：要讓網頁應用支援多種設備，開發者需要根據設備的「像素密度」（Pixel Density）與「螢幕大小」（Screen Size），處理相對應的「排版」與「圖片」問題。接續前一篇，本篇將闡述處理「螢幕大小」（Screen Size）的方式。 （現在Gaia關於多重設備支...

credit http://en.wikipedia.org/wiki/File:DaVinciVitruveLucViatour.jpg 使用網頁技術開發應用的好處，是讓使用者不管在什麼設備上，只要有瀏覽器支援，基本上都能使用自己習慣的服務。同時若有需要，也可以較容易地透過 Apache Cord...

MeettheFirefoxOSMascotaFoxThatsonFire 二十餘年前，網站慢慢開始出現在世界各地，起初就像盤古開天闢地一般，沒有複雜的東西，網站都相當簡易，大多以文字和些許的圖片構成，連頁面也沒有太多。經過好一陣子的發展，慢慢有了比較複雜的結構，那時候人寫網頁的邏輯慢慢的會受到干擾...

雖然 Firefox OS 以 Android 無法深入開拓的低階手機為第一波市場主打，但這可不表示 Firefox OS 只能在小螢幕上執行。目前 Firefox OS 已初步支援 HVGA (320×480)、WVGA (480×800)、qHD (540×960) 三種解析度。以 Web 技術...

接續上週的介紹，今天來談談，為~~~什麼我們要多用 CSS 而少用 JS 來做動畫呢? 原因之一，就是今天的主角 media queries 啦！Media queries 主要可以用來對付來自四面八方，奇奇怪怪的解析度。 你或許會問，這些奇奇怪怪的解析度打哪來的呢?! 除了現在人手 N 支智慧型手...

一個「生動」的網站絕對少不了 Javascript (JS) 的幫忙，很多有趣的特效交給 JS 或甚至丟給 Jquery 就對了！不過我們仔細看看 JS 裡到底做了什麼事讓我們的網站活起來呢，其實大部分的特效，JS 只是幫我們動態的去改變元素的 CSS 而已。那可以直接就在 CSS 中完成特效嗎？！...

Gaia 是一個基於 HTML5 技術為基礎，且為 Firefox OS ( 原 Boot to Gecko 專案，以下簡稱 B2G ) 手持系統而生的，使用者界面開發專案。開發 Gaia 的程式語言不外乎使用 HTML5/CSS/JavaScript 等技術，這更是一個不折不扣的 Web 應用程式...