第一章：擁抱瀏覽器與 HTML5

HTML5 不只是技術，它代表的是 Mobile + Cloud 的新時代。HTML5 重新發明了 Web，現在的 Web 已不同以往。對完全不懂 HTML5 的創業人，本課程將對您有很大的幫助。

這是一系列的 HTML5 技術與創業課程，透過軟體思惟與邏輯推導方式，希望帶給讀者更多的啟發。

廣議上的HTML5必須搭配許多技術來綜合應用，所以HTML5倒底怎麼跟這些技術搭配、HTML5的軟體開發思想是什麼，以及HTML5應用程式的設計原則為何？

HTML5 的 Runtime 是瀏覽器

HTML5 來了。什麼最重要，Browser 最重要。因為所有 HTML5 App 都在 Browser 環境裡執行，所以，HTML5 App 的 Runtime 就是瀏覽器。可以這樣想，第一代的 App 使用 OS 做為 Runtime。第二代的 App 使用 Java Virtual Machine 做為 Runtime，例如：Android。第三代的 App 將使用 Browser 做為 Runtime。所以，Runtime 就是個關鍵技術。以前沒有掌握好 OS 沒關係，過去沒掌握好 VM 沒關係，現在還是沒掌握好 Browser 技術，就很有關係了。

同時，過去桌面電腦(PC)的瀏覽器，正快速往手機裝置移動。 各家軟體大廠無不加碼研發人才，努力打造一個能完全相容 HTML5 的瀏覽器，連今年10月份要登場的 Windows 8 Mobile Phone 也在 HTML5 做了很大的改進。最近，也傳出 Facebook 有意購併老字號的瀏覽器開發商 Opera。

HTML5 成為移動網路的標準已經是既定的事實了，唯一的關鍵是它的普及性。而行動瀏覽器技術，直接決定了 HTML5 的普及速度。這會是科技業的大盛宴，當行動瀏覽器成熟，並且安裝到每一台行動裝置上時，HTML5 將開始展現它的強大影響力。這個的影響力的層面相當廣，它會普及到各行各業。

所有的行業，都需要雲端做為媒體，將資訊與服務Web化，Web化後都能整合到行動裝置上。在行動裝置上，可以使用瀏覽器來使用這些資訊與服務。很明顯地，HTML5 的影響力將遠超過當年的 Android。

當年的 Android 作業系統，還不算是各行各業的事情。但是，HTML5 將影響到科技業、銀行業、出版業、遊戲業等等，數都數不清的行業別都將因 HTML5 起變化。將透過雲端將資訊與服務，傳遞到手機上的行業，都需要 HTML5。

所以，從產業的角度來看，「HTML5 = Mobile + Cloud」，這很簡單地說明了一切。從技術上來看，瀏覽器也是非常重要的「通路」，因為掌握了瀏覽器，等於控制了使用者的手機。瀏覽器開發廠，可以在瀏覽器「內置」一些資訊與服務。在瀏覽器內置服務，這一想就知道是多麼可怕的一件事情，這比起當初微軟在其作業系統裡內建IE瀏覽器還可怕。

接下來的幾年，科技業的主流發展趨勢，幾乎正式抵定了，就是「手機、行動瀏覽器與雲端應用」。各大瀏覽器與 HTML5 的相容性，成為相當重要的指標。因運而生的網站 html5test.com 可以幫助我們了解瀏覽器的 HTML5 相容性。

目前在桌面瀏覽器的部份，來自北京的 Maxthon 瀏覽器以 437 分取得第一，領先第二名的 Chrome 18。在行動瀏覽器方面，Opera 目前是市佔率的龍頭，在 html5test 上的分數也佔於領先地位。不過，尚未正式發表的 Tizen 目前也突破了 400 分大關，是值得留意的潛力股。

從 Chrome 瀏覽器談起

Android 版的 Chrome 瀏覽器出現了，Chrome 是 HTML5 發展史的一個重要指標。預計今年 HTML5（Chrome）將全面走入各式產品，這宣告純硬體時代正式結束了。未來的產品，少了軟體與雲端的加持，將顯得平傭而無奇。純硬體能走進市場的機會，只會越來越少。手機肯定首當其衝。特別是 Android 版的 Chrome 瀏覽器現身了，它將引發新軟體革命嗎？

我們知道，雲端應用目前有二大龍頭：Google 與 Facebook。Google 老大哥的 Gmail、相簿、位置服務等，儼然成為一項民生必須品。Facebook 則是在社交網路（Social Networking）領域獨佔鰲頭。他們都是網路巨擎，也都是以平臺（Platform）的概念經營。平臺的概念是什麼？簡單說，就是提供開發者 API 服務。

理解平臺的概念

平臺是一個很容易理解的概念，就像大家手上的手機，裡頭安裝了許多使用到 Google 以及 Facebook API 的 App；這些 App 都會透過「雲端」，存取其服務。iPhone 與 Android手機裡的這些「雲端App」，所使用到的核心技術，就是 HTML5。這代表著，只要HTML5的規格能開始推出草案（Draft），並且手機上的 HTML5 瀏覽器技術更加成熟，手機行業將會展開一場 HTML5 大戰。

HTML5 大戰就是雲端運算的戰爭，這肯定是新一波的軟體革命。以 HTML5 技術，結合網路服務、開發 App，並整合至手機，將成為顯學。

所以，筆者認為，Android 版 Chrome的到來，從產業的角度來看，肯定是一個重要指標，具有特別的意義。它將帶領 HTML5 往前衝刺。其實，Chrome 很早就是 HTML5 的領頭羊了，例如：早在 2010 年，Google 就宣佈以 HTML5 取代 Google Gear 技術，從這裡可見一斑。

我們可以這樣假設：有了 Chrome，雲（Cloud Computing）就更容易放進裝置裡。正因為如此，所以 Chrome 的出現，有了 HTML5 大戰的煙焇味。Chrome 將加速雲端應用走進手機 App，所以手機不能只有硬體功能，硬體廠將面臨新的一波挑戰。

瀏覽器最重要

HTML5 來了。什麼最重要，Browser 最重要。因為所有 HTML5 App 都在 Browser 環境裡執行，所以，HTML5 App 的 Runtime 就是瀏覽器。

正因為這個原因，各家軟體大廠無不加碼研發人才，努力打造一個能完全相容 HTML5 的瀏覽器，連今年10月份要登場的 Windows 8 Mobile Phone 也在 HTML5 做了很大的改進。 可以這樣想，第一代的 App 使用 OS 做為 Runtime。第二代的 App 使用 Java Virtual Machine 做為 Runtime，例如：Android。第三代的 App 將使用 Browser 做為 Runtime。所以，Runtime 就是個關鍵技術。No Runtime No Running。以前沒有掌握好 OS 沒關係，過去沒掌握好 VM 沒關係，現在還是沒掌握好 Browser 技術，就很有關係了。

所以，各大瀏覽器與 HTML5 的相容性，成為相當重要的指標。因運而生的網站 html5test.com 可以幫助我們了解瀏覽器的 HTML5 相容性。根據最新的 html5test 測試報告，桌面瀏覽器 (Desktop) 平均分數仍然領先行動 (Mobile) 瀏覽器，可見 HTML5 在桌面環境的部份，會優先成熟。

HTML5 App 的 Runtime 是瀏覽器

Runtime 是執行環境。過去應用程式都是在作業系統平臺上執行，並且採用 C/C++ 程式語言編寫，我們便將這類型的應用程式稱為 Native Application，即主動式應用程式，代表應用程式被編譯後（Compile）就是一個可主動執行的執行檔。

接下來 Android 出現後，帶動一個以 Java程式語言來開發App的風潮。Java 程式語言早在 Android 問世前就已經被發明出來，雖後在 Android App 的年代人氣達到頂峰。利用 Java 程式語言編寫的應用程式，都需要 Java 虛擬機（Virtual Machine）才能執行；Android 的 Java 虛擬機稱為 Dalvik VM。所有以 Java 撰寫的 Android App 都在 Dalvik VM 上執行，它是由虛擬器來管理並直譯，不能主動執行。

從 Web page 到 Web app

現在，我們可以使用 HTML5+JavaScript 來編寫應用程式，並且以瀏覽器來瀏覽。因此，HTML5 應用程式，說白了就是一種 Web 應用程式，透過瀏覽器來「瀏覽」它。這種使用案例已經存在已久，例如：用瀏覽器打開 Gmail 應用程式，收發郵件。所以，HTML5 應用程式並不是新鮮技術，就是我們所熟悉的 Web 應用程式。

Web應用程式的執行環境就是瀏覽器。以 Web 技術來製作應用程式的概念、價值與優點就不必多說了，例如：跨平臺、跨裝置等等，就是大家熟悉的優點。試想，不管我是用個人電腦、手機或平板電腦，甚致是電視，只要有瀏覽器、有網路，就可以隨時隨地收發 Gmail。正因為這樣的優點，Web 應用程式有相當大的優點，以及潛在的商業價值。而 HTML5 就是 Web 應用程式的標準，這就是為什麼 HTML5 將成為主流技術、為什麼 HTML5 會走紅，以及為什麼各行各業的每個人，都要學習HTML5的原因。

HTML5 時代來臨

HTML5 的前身，其實是一份稱為 Web Applications 1.0 的網路標準草案，HTML5 的用途，不言而諭。HTML5 的身世說來可憐，在 HTML5 標準制定將近七年的時間，不太被網路界重視。還好，蘋果已故執行長 Steve Jobs 的高膽遠矚，讓 HTML5 在 2010 年有了強出頭的機會。這是大家知道的知名事件，Apple 官方宣佈不支援 Adobe Flash。

HTML5 希望未來網路世界，有更加豐富的 Web Applications，這個願景即將成真。有二個原因。第一、HTML5 第一個正式的候選草案版本，將在今年，也就是2012年推出，這代表所有的瀏覽器 (Broswer) 軟體製造商，將會有一份可共同依循的開發標準。這就是業界的鐵則，任何技術標準化後，都能成為「產業標準」。科技業不用懷擬，HTML5 時代來了。

第二個原因、手機。HTML5 是標準的乞丐命、皇帝運，當初提出 HTML5 建議的 Opera Software 萬萬沒想到，2010 年 Steve Jobs 公開支持 HTML5，2011 年智慧型手機又大爆發，這些 iOS & Android 手機對於 Web 的熱切需求，促使 HTML5 有了大躍進的發展。我們不用再懷擬，這一切來的很突然，不過都是真的。

另一波的手機與網路革命展開了，產業生態巨變，一波未平、一波又起。前一波，被來勢兇兇的 Android 作業系統敲得頭昏腦漲嗎？還來不及反應過來的話，繫好安全帶，因為 HTML5 來了。

All in JavaScript 的時代

歡迎來到「All in JavaScript」的程式樂園。JavaScript 過去曾經在動態網頁製作上紅極一時，後來有一段時間，因為開發人員重視 Server-side 技術的程度，遠勝於 Client-side，因此 JavaScript 又迅速沈寂。

2003 到 2007 年這段時間，應該是 JavaScript 最谷底的時候。而後在 2007 到 2009 年，因為Web 2.0 風格網頁，以及 jQuery 的盛行，再度得到開發者的重視。2010 到 2011 年因為 Mobile Native App 的大量流行，使得眾多開發者不再以 JavaScript 做為首選，再度走入低潮。

學好 JavaScript 程式語言

但是，HTML5 來了。jQuery 被大量使用在網頁設計上，不管是視覺效果、特效或使用者介面，因為 jQuery 相當便利的開發模式，讓 JavaScript 再度被重視了起來。再加上 HTML5 在後推了一把，JavaScript 儼然成為今年最受矚目的程式語言。所以，JavaScript 是「王者再臨」的最佳代言人。

現在，JavaScript 的主要用途，已經由過去的動態網頁（Dynamic Webpages），轉為開發 HTML5 App 角色；也就是 HTML5 的應用。我們不僅僅使用 JavaScript 製作有動態效果的網頁，還藉助它來開發大量的 UI interactive、使用者體驗的設計，以及最重要的雲端服務整合。

還有一個很重要的應用，就是「JavaScript in Browser」，也就是利用 JavaScript 來增強瀏覽器的功能，最為大家所熟悉的例子，就是 Google Chrome。Google Chrome 為了增強對 JavaScript 的支援與效能，開發了新的 JavaScript 引擎；在日記「HTML5 在手持裝置將開始爆發式成長」就提到了，「JavaScript 引擎的成熟度是關鍵」。

所以，測試 JavaScript 的使用案例（Use Cases）在各大瀏覽器的效能，更為一項重要的工程工作。更進一步地，由於 JavaScript 現在搭配 HTML5 來開發「軟體」，而不只是用來製作動態網頁，所以研究 JavaScript 的軟體設計模式，當然也就變成一門顯學；目前被廣為推薦的就是「Essential JavaScript Design Patterns」一書。

JavaScript 也能寫雲端服務！

時間到了 2012 年，在 HTML5 時代正式啟動的今天，JavaScript 成為軟體工程師的必修語言，也是程式設計初學者的最佳選擇。從去年大約 1.5％ 的使用率，飆升到這個月的 3.3％ 左右的使用率。再者，被熱烈炒作的「雲端運算」概念，現在也可以使用 JavaScript 來開發 Server-side 的雲端服務；這就是近二年爆起的新技術「NodeJS」。

所以，不管是 Client-side 或 Server-side，無論是網頁或雲端服務，都可以使用 JavaScript 一統天下了，接下來「All in JavaScript」將成為軟體開發的主流。雖然 JavaScript 還不是當今最受歡迎的程式語言，但是在「Browser & Cloud」的領域，頗有王者的感覺。JavaScript 無疑是王者再臨的代表。

HTML5 + CSS3 + JavaScript

JavaScript 之所以在網頁設計上佔有重要地位，很重要一個原因是 jQuery 的流行。jQuery 是一個以 JavaScript 技術開發的框架（JS Framework)，並且簡單易學、又易用。使用 jQuery 讓網頁變得活潑、美觀、又具備高度互動性，是簡單不過的事情了。jQuery 是一個框架，網路上有眾多 JavaScript 程式設計師，為它編寫了數以萬計的插件（Plugings），這是 jQuery 能成功的重要原因。

例如，我想要設計一個有「淡入淺出」效果的「投影片撥放」網頁，利用 jQuery 以及相關插件，就可以在幾分鐘內完成。現在，瀏覽網頁就好像在使用應用程式一樣，就像我們瀏覽 Gmail 時，使用經驗跟應用程式已經不向上下了。所以，網頁不再只是網頁（Web pages），網頁是應用程式了；這就是 Web 應用程式。

為 HTML 加入應用程式特性

有哪些技術是 Web 應用程式的主要元素？首先，當然是 HTML 標籤。「以前」，最新版本的 HTML 標準是 HTML 4.0，但是它沒有「Web 應用程式」的特性，意思是說，HTML 4.0 其實不包含應用程式方面的標籤。然而，HTML 5.0 把這部份加入了，所以，HTML 5.0 是真正能支援應用程式特性的 HTML 標籤，HTML 5.0 是支援 Web 應用程式的第一個 HTML 版本。事實上，HTML5 完全就是朝 Web 應用程式的方向去制定。

HTML5 本身是標籤。標籤的核心精神是描述資料（Data），例如：文字內容、圖形、顏色等等，要有互動的 UI、要有動態效果，或是進行計算等「程式語言」的工作，就要在網頁裡加上程式碼，這個程式碼就是 JavaScript。如果覺得寫 JavaScript 很麻煩，jQuery 提供更簡便的方式，讓我們在網頁裡加上這些功能。

所以，要製作 HTML5 應用程式，除了 HTML5 標籤外，也要使用 jQuery，並且也要學習 JavaScript 程式設計。另外，我們也知道，HTML 將外觀樣式（Style）分開了，外觀樣式以 CSS 描述；目前 CSS 的最新標準是 3.0 版。

總結來說，HTML5+CSS3+JavaScript 就是 HTML5 應用程式的靈魂。初學者，就是要先掌握這三大技術元素。