鴻海「八屏一雲」計畫：導入 HTML5 與技術關鍵

jollen 發表於 January 25, 2013 4:12 PM

文／Jollen Chen（原文刊載於 CTimes 雜誌 2013 年 2 月份）

八屏一雲是鴻海科技集團擎畫的技術藍圖。鴻海科技集團協助 Moko365 舉辦 HTML5 相關課程，筆者有幸擔任系列課程的主要講師，在整理相關技術的過程中，得到了一些心得。使用 HTML5 做為八屏裝置的核心技術時，有什麼關鍵的地方要特別注意？筆者整理了幾個議題，在此與大家分享。

第一、跨裝置。這是第一個「八屏一雲」的重要技術工作。從技術的角度來說，「八屏一雲」，要能跨裝置（cross-device），而好的技術莫過於 HTML5。HTML5 是一個標準，透過此標準來開發 Web App；Web App 必須透過瀏覽器來執行。我們說，Web App 的執行環境（runtime）是瀏覽器。

第二、跨瀏覽器。第二次瀏覽器大戰開始於2010年左右，大概是 HTML5 標準即將發佈，以及智慧型手機發展進入最高峰，二個時間的交匯點。現今，在 HTML5 世界裡，較具代表性的瀏覽器是 Firefox、Safari 以及 Chrome。

由於每一個瀏覽器實作 HTML5 標準的程度不一，並且實作上還會有一些小差異，因此，讓 Web App 能做到跨瀏覽器（cross-browser）成為另一個重要任務。還好，這個工作是階段性的，不過倒是能讓開發者忙碌很長一段時間。

第三、善用 Media Query。這是 CSS3 裡的標準，簡單說，它可以幫助開發者自動偵測目前的裝置屬性，並且依不同的屬性來套用不同的 CSS 設計。為不同裝置撰寫不同的 CSS 樣式，並依裝置的不同來選取套用，這就是 Media Query 的功能。

很麻煩的是，現今的瀏覽器仍有 Media Query 支援不足的問題。例如：rem 單位在 Media Query 的區域裡可能失效。這是瀏覽器的不足，理論上未來的實作將會解決這些問題。目前，可以使用 JavaScript media query 的暫時替代方案。

第四、用對 UI Framework。在「八屏一雲時代來臨教你HTML5六小時打通」課程裡，筆者整理了不只 20 種 UI Framework。以「cross device」做為題目，較廣為流行的是 Less Framework 4，它極為簡單易用。Less Framework 4 能幫助開發者生成支援不同裝置的 CSS Media Query。

但這些 UI Framework 在支援跨裝置方面仍有不足之處。以鴻海的八屏一雲理念來說，仍沒有一個 UI Framework 真正具備「跨八屏」的能力。這裡仍有許多技術工作，若鴻海能在這個部份投入資源，補足這個基礎建設，將會是很有價值的事情。

第五、瀏覽器作業系統化。從 Chrome 到 Firefox OS（前身為 Boot to Gecko），瀏覽器作業系統的發展，從沒有停滯過。Gecko 是 Firefox 的 HTML5/CSS 引擎，因此「Boot to Gecko」就是「一開始就是瀏覽器環境」的概念。

從工程的角度來看，Webkit 是一個很值得投資的瀏覽器引擎，它的發展始於 KDE 計畫，並吸引像是 Apple 這類型的知名企業加入。現在，Webkit 是一個很活躍的 Open source 計畫。許多知名的瀏覽器，例如：Safari，都採用 Webkit 做為其核心。

或許「Boot to Webkit」會是一個很好的創新研發題目，不管如何，具備維護 Webkit 引擎的能力，將可能是八屏一雲計畫的技術核心。

Moko365 與鴻海科技集團，從贊助免費 HTML5 課程開始，希望能逐步推廣 HTML5 技術與八屏一雲觀念。最後，八屏指的是哪八種不同的屏？手機屏、平板電腦、NB、AIO、Portable TV、TV、電子白板、LED顯示屏。

主選單

近期文章

我的工作

鴻海「八屏一雲」計畫：導入 HTML5 與技術關鍵