構建 HTML5 應用程式

  • 發行項

使用 HTML5 打造移動體驗

Brandon Satrom

下載代碼示例

上個月，我向您介紹了 CSS3 媒體查詢 (msdn.microsoft.com/magazine/hh882445)，一個允許您根據條件規則調整頁面樣式的新模組。 雖然媒體查詢在各種設備系列中都具有廣泛的適用性，但卻是在構建移動網站和應用程式時經常被提及。 也就是說，之前文章中對於媒體查詢的介紹主要是圍繞平板電腦和移動體驗的打造。

考慮到構建移動網站和應用程式存在的困難，媒體查詢的問世也就不足為奇了。 與不盡人意的替代方法（例如流覽器探查，有時也稱為設備檢測）以及必須在每個平臺的基礎上打造移動體驗相比，媒體查詢看起來的確是天賜的珍寶。 它們確實是智慧模組，上月我介紹它們的原因是因為您今天應該正在使用它們。

再談快速回應的 Web 設計

但是，還有其他的內容：CSS 媒體查詢非常強大，但它們只是您打造卓越的移動 Web 體驗真正所需內容的一小部分。 上個月，我提到了術語“快速回應的 Web 設計”，這是 Ethan Marcotte 在他的同名創意文章 (bit.ly/9AMjxh) 中創造的術語。 Marcotte 主要介紹了媒體查詢，但是他還指出了另外兩個必要的實踐：流暢的網格和靈活的圖像。 媒體查詢是推動快速回應且自我調整網站的引擎，但它們僅在這些網站的設計也同樣具有快速回應和自我調整能力時才有效。 這個月，我將向您介紹有關“快速回應 Web 設計”的另外兩個重要元素的一些想法。 首先我會概述一些即將推出的 CSS 佈局模組，然後討論使非文本元素（例如圖像和嵌入視頻）也具有自我調整性的一些技術。 在這期間，我將介紹説明您使用這些技術的一些框架和庫。 我還將介紹用於創建移動 Web 應用程式的一些熱門框架，並簡單討論如何使用 HTML5 構建“本機”應用程式。 閱讀完本文後，您應該已經打下了在自己的應用程式中實現快速回應 Web 設計的堅實基礎。

流暢的網格和佈局

使用網格進行排版設計是已經通過這樣或那樣的形式存在了幾個世紀的做法，甚至早于活字印刷術的發明。 通過由相互交錯的垂直軸和水準軸構成的二維結構，設計師可以對齊和組織元素以實現美觀的佈局，如圖 1 所示。 在過去的幾年內，Web 設計師已經開始對他們的數位作品應用許多相同的原則，一些常用框架（例如 960 網格系統 (960.gs) 和語義網格系統 (semantic.gs)）的推出現在已經使所有人都可以使用網路佈局。

A Typographic Grid
圖 1 排版網格

但是，直接將排版網格應用到 Web 具有一個重要缺陷：列印佈局是固定的，而 Web 佈局卻不是。 另外，許多網格實現的語義不是很清晰，也就是說它們需要額外的標記來定義網格，從而使您的 HTML 頁面的外觀和內容混為一體。

給我們帶來"流體"在馬克的"流體網格"。要真正反應迅速，網格 （或佈局） 應適應不斷變化的經驗。 正如我上個月所討論的，媒體查詢可説明您定義重新放置元素的規則，但是為了保證有效性，那些元素則必須首先在流暢或靈活的容器中定義。 之前提到的工具（以及許多其他工具）不管是通過本機（語義網格）還是通過使用輔助庫（960 網格的 Adapt.js adapt.960.gs）的方式，的確可以解決這個問題，但是還有許多新出現的 CSS 模組可用於説明創建流暢的佈局。

請注意，我冒昧地將 Marcotte 的術語“流暢的網格”延伸為“流暢的佈局”。 我這麼做是因為某些新的 CSS 模組雖然並非基於網格，但是仍然可以説明您創建流暢的、可自我調整的容器。

讓我們首先看一下 CSS3 靈活框佈局模組（或 Flexbox），這可以在 bit.ly/yguOHU 中找到。 Flexbox 旨在説明您創建用於容納元素的佈局容器，以便在水準或垂直流中自動放置子項，並提供自動的間距 (Goodbye “ul li { float:right; }”!)。 Internet Explorer 10 平臺預覽版、Firefox、Chrome、Safari、iOS Safari 和 Android 都支援此模組 — 供應商首碼（有關詳細資訊，請查看 caniuse.com/flexbox）。

首先，我們將 Flexbox 應用於我在上個月介紹的照片庫網站。 擁有圖 2 中所示的 CSS 後，您可以看到圖 3 中的結果，為了便於說明為這些結果設置了樣式。 請注意，圖 2 中的 CSS 僅使用“-ms-”供應商首碼。 線上提供的示例代碼 (archive.msdn.microsoft.com/mag201205HTML5) 中，我包括了其他供應商首碼（-webkit、-moz、-o），您也應該為自己的網站這麼做。

圖 2 使用 Flexbox 模組的 CSS

    ul.thumbnails {
      width: 100%;
      background: #ababab;
      display: -ms-box;
      -ms-box-orient: horizontal;
      -ms-box-pack: center;
      -ms-box-align: center;
    }
    ul.thumbnails li {
      -ms-box-flex: 1;
    }

Photo Gallery Images with Flexbox Applied
圖 3 應用了 Flexbox 的照片庫圖像

很漂亮，但是當然，之前我們就已經做到這一點了。 若要展示 Flexbox 的靈活性，請調整您流覽器視窗的大小，或者在移動模擬器或設備上打開頁面。 此示例中沒有定義媒體查詢，並且佈局看起來更流暢一些。 結合這兩個模組，您將能夠創建以可快速回應的方式對齊、分隔和轉移元素的流暢容器。 例如，您可以為小於 480 圖元的螢幕創建媒體查詢規則，將框方向更改為垂直，就是這樣，您已經開始初步接觸移動佈局了。

CSS 網格佈局（或者簡單地說 CSS 網格）是較新的規範（可以在 bit.ly/ylx7Gq 中找到），于 2011 年 4 月提交給萬維網聯盟 (W3C) CSS 工作組，當前僅在 Internet Explorer 10 Consumer Preview 中實施。 其宗旨是在流覽器內提供內在的強大網格支援。 對於開發人員和設計人員來說，它可生成豐富的排版網格，而無需表格佈局，也無需存在不受語義限制的標記。

CSS 網格允許您使用預定義的行和列定義頁面配置，以及指定內容流入那些元素和在那些元素之間流動的方式的規則。 第一步是定義網格容器，將“grid”指定為所選元素的顯示屬性：

    body {
      display: -ms-grid; // A vendor prefix is required.
    }

我在這裡選擇的是 body 元素，這意味著我的網格將填充整個文檔。 這並不是必需的，我可以輕鬆在頁面的局部再製作一個網格，或者甚至在一個頁面上定義多個網格。 定義好網格後，我需要定義其行和列的大小：

    body {
      display: -ms-grid;
      -ms-grid-rows: 50px 30% 20% auto;
      -ms-grid-columns: 75px 25px 2fr 1fr;
    }

這裡，我指定的是四列和四行的網格，在某些情況下設置絕對大小（例如 50px、75px），在某些情況下設置相對於視窗的大小（30%、20%），以及根據其內容的寬度自動設置大小（自動）。 我還使用新分數值單位作為 CSS 網格規範中定義的 fr"… … 的可用空間的一小部分。"分數值被計算後固定的大小分配和之間所有行和列定義這些值，然後按比例劃分。 在我的示例中，這意味著在為第一列和第二列分配 100 圖元後，第三列將被賦予三分之二的剩餘空間，而第四列則被賦予三分之一的剩餘空間。

定義網格後，可以很方便地通過指定行和列的值來在網格內放置子元素，例如：

    #main {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      -ms-grid-row-span: 2;
      -ms-grid-row-align: center;
    }

這裡，我將我的“main”分段元素放在網格的第二行和第二列。 我允許該元素跨越兩行，並在容器中將內容居中。 Microsoft Internet Explorer Test Drive Demo 網站使用其 CSS 網格佈局實現創建熱門網格系統網站 (thegridsystem.org) 的具體實現，您可以親自在 bit.ly/gEkZkE 上進行瞭解。

如果您曾經使用標記和 CSS2.1 嘗試過類似的事情，那麼對於 CSS 網格可以提供這樣的靈活性，您應該是沒有什麼值得懷疑的。 另外，當結合媒體查詢時，CSS 網格可以用於創建自我調整佈局，以便於在使用者調整設備的大小和方向時能通過較少的規則更改隨之進行調整。

我要介紹的最後一個佈局規範是 CSS 多列佈局模組，您可以在 bit.ly/yYEdts 中找到它。 CSS 多列處於“候選推薦”狀態 (bit.ly/x5IbJv)，並在所有流覽器中享有廣泛的支援，包括 Internet Explorer 10 規劃的支援。 顧名思義，多列允許您在頁面中佈置多個列，無需手動放置或浮動。 您只需在容器上應用“列寬度”屬性（需要時使用首碼），如下所示：

    article {
      width: 960px;
      column-width: 240px;
    }

使用此規則，文章元素將分為多個 240 圖元的列，創建容器允許的盡可能多的列（在本例中，需要四個 240 圖元的列填充 960 圖元的容器）。 我還可以使用列計數屬性定義固定數量的列，此時列寬度將在我容器的寬度內均勻分佈。

與 Flexbox 和網格模組一樣，將模組與媒體查詢結合可允許您快速定義簡單的自我調整規格，以向移動使用者提供理想的使用者體驗。

我在這裡介紹的這三個模組存在很多共同點，每一個都提供有相應的功能，您可以使用這些功能創建真正快速回應的網站要求的那種流暢佈局。 建議您對每一種模組都進行研究和試用，以便您在解決指定的佈局難題時可以選擇正確的模組。

您還將希望瞭解利用這些規範的新興框架。 使用這些內容之一可以快速開始構建您自己網站的流暢佈局。 Skeleton (getSkeleton.com) 和 Bootstrap (twitter.github.com/bootstrap) 是兩個值得關注的框架，後者是 Twitter 提供的完整網站入門工具包。 最近，我在 Skeleton（請參見 html5tx.com）的説明下重新構建了自己的一個網站。

快速回應的媒體

在快速回應 Web 設計（特別是移動設備）方面，媒體是棘手的問題。 讓我們從圖像開始說明。 設置圖像樣式以使其回應更快的最簡單的方式之一就是將以下內容添加到您的樣式表：

    img {
        max-width: 100%;
      }

該規則總是會調整您的圖像（放大或縮小）以適應圖像的父容器。 因此，如果您的容器元素回應迅速（或許使用之前介紹的一項技術），那麼您的圖像也應該回應迅速。

此方法面臨的挑戰是，您網站上的圖像需要足夠大，可以縮放至它們可能需要達到的任何大小。 在我一直使用的照片庫網站上，原始圖像都非常大，因此可以執行重新調整大小。

但是使用可調大小的大圖像會為移動設備帶來大問題：開銷問題，從而潛在造成較差的移動體驗。 即使您重新調整大圖像的大小以適應 320 x 240 的視窗，也會將完整圖像傳輸給設備。 這意味著當設備只需要一張 10KB 的照片時，您可能會發送一張 2MB 的照片。 在移動領域裡，頻寬仍然很重要，所以必須使用其他方法取代設備頻寬戰略。

遺憾的是，這仍是個難題，W3C 尚未正式支援某個特定的方法。 雖然存在大量方法可以解決快速回應的圖像問題，但是所有這些都可分為兩類：它們要麼在伺服器上解決該問題，要麼嘗試在用戶端上解決。 許多伺服器方法（如 bit.ly/rQG0Kw 仲介紹的這個）依賴于使用 1 x 1 圖元的預留位置圖像、用戶端 Cookie 和伺服器重寫規則，以便將正確的圖像提供給正確的設備。 用戶端方法（如 bit.ly/tIdNYh 仲介紹的這個）通常在 CSS 中使用 JavaScript、<noscript> 回退、條件注釋和一些有趣的技巧。 兩種方法都感覺有些高深莫測（因為它們確實是這樣），但是考慮到 <img> 標籤的約束，它們已經是我們能夠想到的最好的方法了。 短期看來，您最好瞭解下這兩種方法，並決定哪種適合您的應用程式。

從長遠來看，當然還是有希望的。 在 Smashing Magazine 的一篇文章“HTML5 語義”(bit.ly/rRZ5Bl) 中，Opera 的 Bruce Lawson 說添加 <picture> 元素可以產生與 <audio> 和 <video> 標籤類似的效果，這意味著開發人員可以訪問父 <picture> 中的多個 <source> 子元素。 當與內嵌媒體查詢結合使用時，新的 <picture> 元素將是最終為快速回應的圖像提供強大解決方案的希望之光：

    <picture alt="cat gallery">
      <source src="nyan-high.png" media="min-width:800px" />
      <source src="nyan-med.png" media="min-width:480px" />
      <source src="nyan-low.png" />
      <!-- fallback for unsupporting browsers -->
      <img src="nyan-med.png" alt="cat gallery" />
    </picture>

儘管該解決方案已經非常流行，並且已針對它成立了 W3C 社區組 (bit.ly/AEjoNt)，但是據我所知還沒有正式的工作組。 或許我們能夠在 HTML6 中看到此元素。

將快速回應的視頻添加到網站和應用程式存在類似的挑戰，儘管 HTML5 中的視頻解決方案比圖像解決方案更強大。 對於初學者來說，媒體查詢增強型 <source> 元素（就像之前提到的虛構 <picture> 元素所演示的那樣）可用於 <video>，如下所示：

    <video>
      <source src="nyan-mashup-high.webm" media="min-width:800px" />
      <source src="nyan-mashup-med.webm" media="min-width:480px" />
      <source src="nyan-mashup-low.webm" />
      <!-- Insert Silverlight or Flash Fallback here -->
    </video>

如果您從自己的伺服器提供視頻或使用提供多個可嵌入版本的服務，我強烈建議使用此語法以確保您的使用者能獲得適合在設備上播放的視頻。

雖然此解決方案將説明節省您使用者的頻寬，但是您仍然需要考慮調整那些嵌入式視頻元素的大小，就像您對圖像做的一樣。 使用媒體查詢，可以很方便地根據不同螢幕大小調整視頻元素，但是如果您想尋找更自動化一點的解決方案，請看一下 FitVids.js (fitvidsjs.com)，它是一個可自動讓您的視頻元素流暢且回應迅速的 jQuery 外掛程式。 但是請記住，作為 jQuery 外掛程式，此解決方案不適用於禁用了 JavaScript 的使用者。

使用 HTML5 框架構建移動 Web 應用程式

我們已經討論了快速回應 Web 設計的另外兩個重要元素（流暢的佈局和靈活的圖像），現在我們來談談您不只是構建適合在移動設備上顯示的網站或應用程式的情況，您要專門打造移動體驗。

在開發領域，傳統的桌上型電腦（或用戶端）和 Web 模式已讓位於另一種類型的應用程式，通常稱為本機應用程式，因為它們位於給定設備（例如基於 Windows Phone 的智慧手機或 iPad）上，使用特定于設備的框架（iOS 和 Android）開發，並通過應用商店或市場進行安裝。

隨著這些框架的日益豐富和強大，有時 Web 開發人員希望向他們的移動 Web 應用程式提供相似的“本機感覺”。 此類應用程式仍然位於您的伺服器上，並可從設備的應用商店或市場之外交付。

雖然您肯定可以手動構建這些類型的應用程式，但是使用框架進行構建更為常見。 移動 Web 應用程式的一個常見選擇就是 jQuery Mobile (jquerymobile.com)，它是一個移動開發框架，可針對幾乎所有移動平臺提供基於 HTML5 的 UI 系統。 圖 4 展示了 OpenTable.com 移動應用程式的示例，該應用程式是使用 jQuery UI 構建的。

A Sample Mobile Screen Built with jQuery Mobile
圖 4 使用 jQuery Mobile 構建的示例移動螢幕

構建具有本機外觀的移動應用程式的另一個常見選項是 Kendo UI Mobile (kendoui.com)，它是 Telerik Inc 推出的 HTML5、JavaScript 和 CSS 框架。 Kendo UI 允許您在基於 iOS 和 Android 的設備上創建完全具有本機感覺的移動應用程式，只需一份基本代碼即可做到這點。 圖 5 和圖 6 顯示了此功能的實際應用，您可以在 bit.ly/wBgFBj 中親身體驗一下。

A Kendo UI Mobile Demo Application Viewed on an iOS-Based Device
圖 5 在基於 iOS 的設備上看到的 Kendo UI Mobile 演示應用程式

圖 6 在基於 Android 的設備上看到的示例 Kendo UI Mobile 應用程式

使用 HTML5 構建本機應用程式

為 Web 應用程式提供本機感覺不僅有利於發揮您作為 Web 開發人員的技能，還有利於創建符合使用者在移動環境中的預期的應用程式。 但是，這些應用程式在那些設備上使用本機感測器和 API 時只能達到這個程度。 雖然移動流覽器已具備一些功能（例如地理位置），但是仍不具備許多像加速感應器或視頻這樣的功能。 要訪問這些功能，仍然需要使用本機應用程式。

但是，好消息是 Web 程式設計的流行使得 HTML5、JavaScript 和 CSS 越來越“本機化”，讓一切照原樣運作。 諸如 PhoneGap (phonegap.com) 和 Titanium Appcelerator (appcelerator.com) 等流行的框架允許您使用 HTML5 和 JavaScript 構建 iOS、Android 和 Windows Phone 的本機應用程式，使用設備 API 訪問進行引導。 另外，諸如 jQuery Mobile 和 Kendo UI Mobile 等移動開發框架在這些環境中的使用情況與在流覽器中一樣良好。 圖 7 顯示使用 PhoneGap 和 Kendo UI 構建的本機 iOS 應用程式。 有關詳細資訊，請查看 bit.ly/zpIAPY 上的博客文章。

An iOS Application Built with HTML, JavaScript and CSS
圖 7 使用 HTML、JavaScript 和 CSS 構建的 iOS 應用程式

Microsoft 已通過正式添加對使用 HTML5、JavaScript 和 CSS（所有這些都不需要額外的抽象或框架）構建 Windows 8 應用程式的支援，將本機 Web 開發提升到一個新的水準。 您可以在 dev.windows.com 上查看 Windows 8 Consumer Preview，以及這些平臺的新開發人員工具。

當涉及移動 Web 時，您已經有選擇了！ 如果您是想要打造本機體驗（包括增強實境功能）的 Web 程式設計人員，請考慮 Windows 8 或諸如 PhoneGap 或 Titanium Appcelerator 之類的框架。 如果您只是想在流覽器中尋找本機感覺，請考慮 jQuery UI 和 Kendo UI Mobile。 最後，如果您的目標是創建回應多個設備和體驗的單個網站或應用程式，請嘗試我在本文和上個月文章中討論的快速回應的戰略。 毫無疑問，移動平臺是現在最熱門的開發平臺之一。 不管您選擇何種策略或平臺，都應優先選擇移動開發平臺。

Brandon Satrom 是 Kendo UI (kendoui.com) 的一名產品經理，Kendo UI 是 Telerik Inc. 推出的 HTML5 和移動工具集。Brandon Satrom 的博客網址為 userinexperience.com，可通過 Twitter 位址 twitter.com/brandonsatrom 關注他，另外他正與 Chris Sells 一起忙於編寫一本書《Building Metro Style Apps for Windows 8 in JavaScript》（使用 JavaScript 構建適用于 Windows 8 的 Metro 風格的應用程式）。

衷心感謝以下技術專家對本文的審閱：Jon Box、Burke Holland 和 Clark Sell