運用 Web 技術打造電視遙控器的操作環境

當初我們決定要將 Firefox OS 應用到智慧電視 (Smart TV) 上時,第一個遇到的問題便是操作介面的不同。在一般的電視使用情境下,使用者通常不會有滑鼠或是觸碰螢幕,能拿來操作的是那少少幾個按鍵的電視遙控器 (好吧,其實現在電視遙控器上的按鍵還不少)。在將 Firefox OS 這樣一個 Web 平台作為手機作業系統時,開發 App 就像是在做手機版的網頁,兩者的操作並沒有什麼不同;但.....深入了解

WebAPP 之影像處理

在各大平台上的 App 商店裡,影像處理相關的應用程式總是在熱門排行榜上佔有一席之地,Web Platform 當然也不落人後的提供建構影像處理 APP 的相關功能。在這篇文章裡,我們將介紹如何利用 HTML5 的 [crayon-59501f2ce6f29321904975-i/] API 來建構一個影像處理應用程式的架構,接著我們會介紹在 Web Platform 上有哪些工具可以用來.....深入了解

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

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

RWD 流言終結者

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

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

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

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

繼之前蓋索林大師的一個打十個系列文章,介紹了 Gaia WebApp 支援多種設備的技巧,本系列文章將深入介紹一些網頁適應性設計相關的通用工具及方法。如果你還不知道什麼是適應性設計,底下有簡潔的介紹。 什麼是適應性設計?它適合我嗎? 適應性設計 (Responsive Web Design,簡稱 RWD,亦有人譯作「自適應網頁設計」、「響應式網頁設計」) 簡單來說,就是試圖使用同一份 HTML.....深入了解

六個神奇 CSS 特效,搭起七夕鵲橋

在八月份的七夕搭鵲橋活動裡,用網頁動畫呈現了牛郎織女團聚慶祝的畫面。不知道有沒有眼尖的網友發現,其實活動網頁裡的動畫效果都是運用 CSS animation 及 CSS transition 所做出的特效喔!揪~竟~要怎麼做出這些特效呢?讓我們繼續看下去。 這邊也順便工商服務一下,之前香蕉人也介紹了一些 CSS 的特異功能。 星星堆滿天 你可能沒料到,星空的效果完全不需要.....深入了解

超夯!視差捲軸動畫大解密!

前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦! 登登登!傳說中的~視差動畫! 設定你的視差捲軸動畫 先構思好動畫的進行方式,視差故名思義就是景物因遠近不同造成視線內移動速度的差異, 最常見的例子是在坐車時,距離較近的建築物很快從窗前經過,遠方的山卻看不出來有移動, 因此本文前面展示的範例就是示範如何處理遠、中、近不同距.....深入了解

網頁上也能做刮刮樂!運用 HTML5 canvas 合成功能

我就先不賣關子,底下這個 fiddle 就是這篇文章的刮刮樂範例完整版。 可以玩玩看,試著瞭解裡面的程式腳本,或是 fork 來改改看。 有興趣但看不太懂 code 的話, 就跟著本篇文章的介紹帶你入門吧! 如果大家有看過九月份的「Firefox OS 讓你儘情享受每一刻」活動網頁(註 1), 應該很好奇一開始的刮刮樂是如何做到的吧? 在研究該如何實作這個功能的時.....深入了解

一個打十個 – 讓 Gaia 網頁應用(webapp)支援多重設備(二:螢幕大小)

我們發現到:要讓網頁應用支援多種設備,開發者需要根據設備的「像素密度」(Pixel Density)與「螢幕大小」(Screen Size),處理相對應的「排版」與「圖片」問題。接續前一篇,本篇將闡述處理「螢幕大小」(Screen Size)的方式。 (現在Gaia關於多重設備支援的工作正開始著手進行,以下建議都還有修改的可能性,歡迎大家提出自己的建議。想要直接參與 Firefox .....深入了解