鴻海「八屏一雲」計畫:導入 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顯示屏。

讀者留言 (0)

留言功能維護中。將於近日重新開放。

連絡作者

Jollen Chen,Moko365(仕橙3G教室)講師,熱愛研究 Linux 與 Android 技術。曾為 Motorola、HTC、Foxconn、LG、OPPO、騰迅、廣達電腦、緯創、仁寶等超過 50 家企業講授課程。目前在 MokoVersity 擔任軟體工程師,撰寫 Node.js 程式,也在幾家科技廠兼任 Android Framework 研發顧問。您可透過電子郵件 <jollen (at) jollen (dot) org> 或這裡與我連絡。