簡介

iPhone 和 Android 平臺(tái)加起來已經(jīng)有 10 萬多個(gè)應(yīng)用程序可供從二者各自的應(yīng)用程序庫下載。本機(jī)應(yīng)用程序指的是那些用某個(gè)平臺(tái)的 SDK 構(gòu)建、然后再編譯和安裝到某個(gè)設(shè)備上的應(yīng)用程序。這些本機(jī)應(yīng)用程序提供了對(duì)該設(shè)備固有功能的全面訪問，包括諸如無線聯(lián)網(wǎng)、藍(lán)牙、數(shù)據(jù)存儲(chǔ)、加速計(jì)、指南針 和其他使這些設(shè)備變得十分吸引人的出色功能。雖然面向 iPhone 和 Android 平臺(tái)的本機(jī)或定制應(yīng)用程序極為普及，但移動(dòng) Web 應(yīng)用程序也開始展露了巨大的潛力。移動(dòng)技術(shù)漸趨成熟 — 移動(dòng) Web 也隨之而來。

本文是由兩部分組成的系列文章的第一篇，這個(gè)系列主要圍繞的是開發(fā)面向 iPhone 和 Android 的基于瀏覽器的應(yīng)用程序，旨在幫助您開發(fā)您自己的移動(dòng) Web 應(yīng)用程序。移動(dòng) Web 應(yīng)用程序的威力不僅僅是在一個(gè)移動(dòng)設(shè)備上呈現(xiàn)一個(gè)網(wǎng)站。我們還將接觸到使移動(dòng) Web 開發(fā)如此勢不可擋的某些核心技術(shù)和技巧。

Web 已經(jīng)成為了平臺(tái)的不二之選，因?yàn)樗鉀Q了困擾應(yīng)用程序開發(fā)人員和系統(tǒng)管理員的諸多問題。如下例舉了其中的幾個(gè)解決方案：

• Web 應(yīng)用程序容易部署 — 只需將它們安裝或復(fù)制到服務(wù)器，并讓您的客戶將其瀏覽器指向正確的 URL。
• Web 應(yīng)用程序在高性能的數(shù)據(jù)中心內(nèi)可以由服務(wù)器群很好地伸縮并能被既有的網(wǎng)站管理工具服務(wù)。
• Web 應(yīng)用程序集中化數(shù)據(jù)存儲(chǔ)并進(jìn)而簡化了災(zāi)難恢復(fù)計(jì)劃。
• HTML、Cascading Style Sheets (CSS)、JavaScript 以及圖像的綜合提供了一種優(yōu)化的用戶界面體驗(yàn)，遠(yuǎn)遠(yuǎn)超出了本機(jī) SDK（缺少一種全身心投入的浸入式的游戲體驗(yàn)）的能力并且大多數(shù)應(yīng)用程序體驗(yàn)均不保證游戲或 kiosk 體驗(yàn)。
• 大多數(shù)應(yīng)用程序要求簡單易用的 UI 元素來指導(dǎo)用戶進(jìn)行一系列的日常操作。

Web 應(yīng)用程序發(fā)布模型的一個(gè)最為吸引人的地方是將軟件轉(zhuǎn)變?yōu)橐环N面向訂閱的服務(wù)，這是一種實(shí)實(shí)在在的雙贏。“為什么？”您不禁要問。讓我們一起來看一看。

Web 部署模型允許顧客在購買之前先試用，這樣以來，就將顧客的風(fēng)險(xiǎn)和成本減到了最少。如果顧客對(duì)試用很滿意，那么只需進(jìn)行一次信用卡（或 PayPal）支付就可以繼續(xù)使用此服務(wù)。軟件供應(yīng)商亦可以從中受益，因?yàn)橄到y(tǒng)升級(jí)被大大簡化，減少了支持成本并最終減少了轉(zhuǎn)嫁到顧客上的成本。并 且，SaaS（software as a service）模型還讓顧客在享受了軟件的種種好處的同時(shí)，無需大量的預(yù)先投入 — 投資回報(bào)在同一個(gè)月就可實(shí)現(xiàn)，而不是在不可預(yù)知的未來。

聽起來不錯(cuò)。適合 Web 的概念同樣對(duì)移動(dòng)奏效么？這個(gè)問題的答案常常是否，直到 iPhone 的出現(xiàn)。為何如此呢？

實(shí)際情況是移動(dòng) Web 瀏覽器體驗(yàn)一直非常缺乏。但這一切有了改觀，這要?dú)w功于一種新技術(shù)的出現(xiàn)，即 WebKit，而 iPhone 則讓 WebKit 成為了移動(dòng)領(lǐng)域標(biāo)志性的大事件。

在短短幾年時(shí)間內(nèi)，iPhone 已經(jīng)從最初的嘗試之舉成為了移動(dòng) Web 客戶機(jī)的鰲頭。為何如此？因?yàn)?WebKit 加上可靠的 Internet 連接使得 Web 同樣適于移動(dòng) — 并且與到目前為止的任何其他的瀏覽器相比，這一點(diǎn)尤其突出。移動(dòng)市場的其他玩家已經(jīng)注意到了這一動(dòng)態(tài)并正在開始使用 WebKit，或正在重新審視它，當(dāng)然也有人反對(duì)它。

那么，什么是 WebKit？

WebKit 和 HTML5

WebKit 是一種瀏覽器引擎，支撐著 iPhone 內(nèi)的 Mobile Safari 瀏覽器以及 Android 內(nèi)的瀏覽器背后的技術(shù)。WebKit 也在其他的移動(dòng)環(huán)境內(nèi)有自己的用武之地，但是我們還是將我們的討論集中于 iPhone 和 Android 平臺(tái)。

WebKit 是一個(gè)開源項(xiàng)目，其起源可追溯到 K Desktop Environment (KDE)。WebKit 項(xiàng)目催生了面向移動(dòng)設(shè)備的現(xiàn)代 Web 應(yīng)用程序。雖然設(shè)備本身的能力和形態(tài)因素都相當(dāng)重要，但移動(dòng)用戶最熱衷的仍然是內(nèi)容。如果移動(dòng)用戶可用的內(nèi)容只是 Internet 用戶可用內(nèi)容的一個(gè)很小的子集，那么用戶體驗(yàn)充其量也只能劃分為二等。

我們當(dāng)中的大多數(shù)人都更希望生活是連貫的 — 如果我們在家中的筆記本上訪問了一個(gè)網(wǎng)站，我們同樣希望在火車上旅行時(shí)仍然訪問到同樣的內(nèi)容。內(nèi)容是最好的應(yīng)用程序。不管我們身在何處、在做什么，我們都 想要訪問到我們的數(shù)據(jù)。WebKit 讓 iPhone 和 Android 平臺(tái)上可以有豐富的內(nèi)容。

有一點(diǎn)很值得注意，即 WebKit 還應(yīng)用在了桌面的 Safari 瀏覽器內(nèi)，該瀏覽器是 Mac OS X 平臺(tái)默認(rèn)的瀏覽器。不管我們討論的是桌面版本還是 iPhone 或 Android 上的瀏覽器引擎，WebKit 均優(yōu)先支持 HTML 和 CSS 特性。實(shí)際上，WebKit 還支持尚未被其他瀏覽器采納的一些 CSS 樣式 — 這些特性正在得到 HTML5 規(guī)范的考慮。

HTML5 規(guī)范是一個(gè)技術(shù)草案集，涵蓋了各種基于瀏覽器的技術(shù)，包括客戶端 SQL 存儲(chǔ)、轉(zhuǎn)變、轉(zhuǎn)型、轉(zhuǎn)換等。HTML5 的出現(xiàn)已經(jīng)有些時(shí)間了，雖然尚未完成，但是一旦其特性集因主要瀏覽器平臺(tái)支持的加入而逐漸穩(wěn)定后，Web 應(yīng)用程序的簡陋開端將成為永久的記憶。Web 應(yīng)用程序開發(fā)將成為主導(dǎo) — 并且不只是在傳統(tǒng)的桌面瀏覽器空間，還將在移動(dòng)領(lǐng)域。移動(dòng)將一躍成為首要考慮，而不再是后備之選。

移動(dòng) Web 應(yīng)用程序的考慮

為了訪問 Web 開發(fā)技術(shù)，如今，應(yīng)用程序開發(fā)人員有幾個(gè)選擇。第一，應(yīng)用程序可嚴(yán)格編寫為服務(wù)器上的 HTML、CSS 和 JavaScript 文件。當(dāng)然，HTML 內(nèi)容可以產(chǎn)生自靜態(tài) HTML 文件，也可以從任何的服務(wù)器端技術(shù)（比如 PHP、 ASP.NET、Java Servlets 等）動(dòng)態(tài)生成。所有這些技術(shù)追根到底都可簡單地用術(shù)語 HTML 指代 — 這不是本文討論的重點(diǎn)所在 — 并且最為重要的是，受 WebKit-支撐的瀏覽器能夠在移動(dòng)設(shè)備上解析和呈現(xiàn) HTML。

用戶通過在移動(dòng)設(shè)備上（即 iPhone 或 Android）打開瀏覽器應(yīng)用程序并輸入目標(biāo)服務(wù)器對(duì)應(yīng)的 URL：http:///applicationurl 來訪問 Web 應(yīng)用程序。

特定的某個(gè)移動(dòng) Web 應(yīng)用程序總是能找到自己的位置：從一般的 Web 站點(diǎn)到高度特定于平臺(tái)的移動(dòng) Web 應(yīng)用程序。

一般站點(diǎn)的呈現(xiàn)

WebKit 內(nèi)的呈現(xiàn)引擎，再配以 iPhone 和 Android 平臺(tái)上的高度直觀的 UI，實(shí)際上就使得幾乎任何一個(gè)基于 HTML 的 Web 站點(diǎn)都能呈現(xiàn)在此設(shè)備上。Web 頁能被正確呈現(xiàn)，不再像原來的移動(dòng)瀏覽器體驗(yàn)：內(nèi)容被包裹起來或是根本不顯示。當(dāng)頁面加載后，內(nèi)容通常被完全縮放以便整個(gè)頁面都可見，盡管內(nèi)容會(huì)被縮放得 非常小，甚至不可讀，如圖 1 所示。不過，頁面是可滾動(dòng)、放大、縮小的，這就提供了對(duì)全部內(nèi)容的訪問。默認(rèn)地，瀏覽器使用 980 像素寬的視見區(qū)或邏輯尺寸。

盡管這能提供對(duì)整個(gè)頁面的訪問，是原來的移動(dòng) Web 體驗(yàn)上的一個(gè)巨大進(jìn)步，但還是需要做很多事情才能進(jìn)一步改進(jìn)移動(dòng)體驗(yàn)。

移動(dòng)友好性

要想使 Web 頁面從一般的頁面變成支持移動(dòng)設(shè)備的頁面，Web 應(yīng)用程序可以在幾個(gè)方面進(jìn)行修改。

雖然頁面可以在 WebKit 中正確呈現(xiàn)，但是，一個(gè)以鼠標(biāo)為中心的設(shè)備（比如筆記本或臺(tái)式機(jī)）與一個(gè)以觸摸為中心的設(shè)備（比如一個(gè) iPhone 或 Android 智能手機(jī)）還是有區(qū)別的。其中主要的一些差異包括 “可單擊” 區(qū)域的物理大小、“懸浮樣式” 的缺少以及完全不同的事件順序。如下所列的是在設(shè)計(jì)一個(gè)能被移動(dòng)用戶正常查看的 Web 站點(diǎn)時(shí)需要注意的一些事情：

• iPhone/Android 瀏覽器呈現(xiàn)的屏幕是可讀的 — 大大好于傳統(tǒng)的移動(dòng)瀏覽器 — 所以不要急于草草制作您網(wǎng)站的移動(dòng)版本。
• 手指要大過鼠標(biāo)指針。在設(shè)計(jì)可單擊的導(dǎo)航時(shí)要特別注意這一點(diǎn) — 不要把鏈接放得相互太靠近，因?yàn)橛脩舨惶赡軉螕袅艘粋€(gè)鏈接而不觸及相鄰的鏈接。
• 懸浮樣式將不再奏效，因?yàn)橛檬种覆荒苓M(jìn)行用鼠標(biāo)指針進(jìn)行的 “懸浮”。
• 諸如 mouse-down、mouse-move 等事件在基于觸摸的設(shè)備上自然大相徑庭。這類事件中有一些將被取消，不要指望移動(dòng)設(shè)備上的事件順序與桌面瀏覽器上的一樣。

這其中的細(xì)節(jié)在 iPhone in Action 內(nèi)有詳述（參見 參考資料）。而從我們的目的考慮，我們將更多地著重于 WebKit 所能做的，而不是它不能做的。

讓我們來看看要使一個(gè) Web 站點(diǎn)對(duì) iPhone 或 Android 訪客具有友好性所面臨的最為明顯的一個(gè)挑戰(zhàn)：屏幕大小。我們今天使用的實(shí)際移動(dòng)屏幕尺寸是 320x480。請(qǐng)注意由于用戶可能會(huì)選擇橫向查看 Web 內(nèi)容，所以屏幕大小也可以是 480x320。正如我們在圖 1 中看到的，WebKit 將能很好地呈現(xiàn)面向桌面的 Web 頁面，但是文本可能會(huì)太小以至于若不進(jìn)行縮放或其他操作就無法有效閱讀內(nèi)容。那么，我們該如何應(yīng)對(duì)這個(gè)問題呢？

最為直觀也是最不唐突的適合移動(dòng)用戶的方式是通過使用一個(gè)特殊的 metatag：viewport。

metatag 是一個(gè)放入 HTML 文檔的 head 元素內(nèi)的 HTML 標(biāo)記。如下是一個(gè)使用 viewport 標(biāo)記的簡單例子：<meta name="viewport" content="width=device-width" />。當(dāng)這個(gè) metatag 被添加到一個(gè) HTML 頁面后，我們看到此頁面被縮放到更為適合這個(gè)移動(dòng)設(shè)備的大小，如圖 2 所示。如果瀏覽器不支持此標(biāo)記，它會(huì)簡單地忽略此標(biāo)記。

在某些情況下，最為理想的方式是提前將窗口縮放到一個(gè)合適的值，如圖 3 所示。

為了設(shè)置特定的值，將 viewport metatag 的 content 屬性設(shè)為一個(gè)顯式的值： <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />。通過改變初始值，屏幕就可以按要求被放大或縮小。將值分別設(shè)置在 1.0 和 1.3 之間對(duì)于 iPhone 和 Android 平臺(tái)是比較合適的。viewport metatag 還支持最小和最大伸縮，可用來限制用戶對(duì)呈現(xiàn)頁面的控制力。

自具有 320x480 布局的 iPhone 面世以來，其形態(tài)系數(shù)就一直沒有改變過，而隨著來自不同制造商、針對(duì)不同用戶群的更多設(shè)備的出現(xiàn)，Android 則有望具備更多樣的物理特點(diǎn)。在開發(fā)應(yīng)用程序并以諸如 Android 這類移動(dòng)設(shè)備為目標(biāo)時(shí)，一定要考慮屏幕尺寸、形態(tài)系數(shù)以及分辨率方面的潛在多樣性。

除了 Android 設(shè)備與其他設(shè)備之間的這些物理差異之外，經(jīng)驗(yàn)還表明 Android 的軟件還通過設(shè)備內(nèi)置的（on-device）瀏覽器設(shè)置對(duì)頁面的呈現(xiàn)實(shí)施了更多控制。不僅穩(wěn)定，Android 平臺(tái)還很靈活。取決于 SDK 等級(jí)和制造商，某個(gè)設(shè)備上的設(shè)置很可能不同于您的開發(fā)環(huán)境。圖 4 顯示了取自 Android Emulator V1.6 的瀏覽器應(yīng)用程序的設(shè)置頁面。這個(gè)設(shè)置屏幕允許用戶將一個(gè)設(shè)備設(shè)置為一個(gè)預(yù)先定義的縮放等級(jí)（far、near、medium）或請(qǐng)求此設(shè)備自動(dòng)適應(yīng)頁 面。

在移動(dòng)世界，變化無時(shí)無刻不在發(fā)生，我們這里所討論的也不是一成不變的。比如，針對(duì)瀏覽器 Sprint Hero 的設(shè)置就頁面呈現(xiàn)而言具有完全不同的一組選項(xiàng)集。Hero 構(gòu)建于 Android V1.5 之上外加一些 HTC-提供的增強(qiáng)。幸運(yùn)的是，如果呈現(xiàn)在您的 Web 頁面內(nèi)，這些設(shè)置將被 viewport metatag 覆蓋。

迄今，我們已經(jīng)看到了 WebKit 能很好地呈現(xiàn)一個(gè)常規(guī)的 Web 頁面，盡管在不進(jìn)行縮放的情況下，頁面有些小并很難閱讀。接下來，我們將實(shí)施更多的控制，即通過使用 viewport metatag 控制頁面如何在設(shè)備上被查看。這就使得頁面更易讀和易于導(dǎo)航。但是如果我們想要更進(jìn)一步，讓站點(diǎn)看起來和感覺上更像一個(gè)移動(dòng)應(yīng)用程序，該如何做呢？

為移動(dòng)量身打造

現(xiàn)在，讓我們來看看以移動(dòng)用戶為目標(biāo)進(jìn)行設(shè)計(jì)時(shí)所應(yīng)采用的設(shè)計(jì)策略。我們舉一個(gè)簡單的例子，讓我們來看看 Google 的 GMail 電子郵件服務(wù)的登錄頁面。

先來看看這個(gè)桌面瀏覽器體驗(yàn)，如圖 5 所示。

這個(gè)桌面主屏幕在左邊具有信息性內(nèi)容，在右邊有一個(gè)登錄區(qū)域。將這個(gè)桌面視圖與圖 6 內(nèi)所示的特定于移動(dòng)的視圖（取自 iPhone）相比較。

圖 6 內(nèi)的屏幕很顯然針對(duì)的是一個(gè)移動(dòng)用戶。此用戶被直接提示繼續(xù)運(yùn)行這個(gè)應(yīng)用程序所需采用的步驟 — 無需縮放或滾動(dòng)。

接下來，讓我們看看這個(gè)移動(dòng) GMail 應(yīng)用程序在閱讀消息時(shí)的功能。由于可被這個(gè)應(yīng)用程序使用的資產(chǎn)有限，消息閱讀窗口很少有機(jī)會(huì)展示按鈕或?qū)Ш?。任何專用于?dǎo)航的空間都會(huì)占用用于閱讀內(nèi)容的空間。而且，如果我們能夠避免，我們絕對(duì)不想使用多個(gè)框架或滾動(dòng) div 元素。移動(dòng) GMail 通過提供一個(gè)簡單的、能在頁面停止?jié)L動(dòng)時(shí)就立即出現(xiàn)的浮動(dòng)菜單解決了這個(gè)問題。此菜單具有三個(gè)按鈕： Archive、Delete 和 More。選擇 More 按鈕，還會(huì)顯示出額外的菜單項(xiàng)，如圖 7 所示。

這個(gè)應(yīng)用程序就是為移動(dòng)量身定做的。

另一個(gè)需要留意的事情是我們不想讓運(yùn)行著功能強(qiáng)大的瀏覽器（例如運(yùn)行于 iPhone 或 Android 平臺(tái)上的瀏覽器）的那些訪客的移動(dòng)體驗(yàn)大打折扣。最后，請(qǐng)看 GMail 在頁面底部所顯示的內(nèi)容，如圖 8 所示。

如果用戶傾向于桌面版本更為強(qiáng)大的功能，那么就讓他使用。只要可能，就讓用戶決定。

現(xiàn)在，我們假設(shè)需要構(gòu)建一個(gè)使用 Web 技術(shù)的應(yīng)用程序，但該程序必須實(shí)際看上去更像是一個(gè)本機(jī)應(yīng)用程序。

特定于平臺(tái)的內(nèi)容

下一個(gè)步驟是創(chuàng)建特定于平臺(tái)的內(nèi)容，通過格式化一個(gè)頁面以使其看上去更接近目標(biāo)平臺(tái)的本機(jī)感觀，而不是一般的 Web 站點(diǎn)。本機(jī)究竟是何意思？

在深入挖掘如何讓一個(gè) Web 頁面的觀感更像是目標(biāo)平臺(tái)的一個(gè)本機(jī)應(yīng)用程序之前，讓我們先花點(diǎn)時(shí)間，比較一下 iPhone 和 Android 作為平臺(tái)在視覺效果方面的差異 — 暫時(shí)不考慮二者很強(qiáng)的基于服務(wù)器的相同點(diǎn)。

iPhone 的觀感很獨(dú)特。如果把 iPhone 的一個(gè)屏幕快照顯示給別人看，除非這個(gè)人一直居住于荒野，否則他很可能會(huì)一眼就識(shí)別出該屏幕快照來自一個(gè) iPhone。但是如果把 Android 設(shè)備的屏幕快照給人看，那么結(jié)果很可能不同。為什么會(huì)如此呢？可能的原因有幾個(gè)。主要的原因在于 iPhone 上市已久并且擁有大量的近乎狂熱的擁護(hù)者。為了購買價(jià)格不菲的限量版特制 V1 iPhone，人們不惜排數(shù)小時(shí)的隊(duì)。不管您有沒有一臺(tái) iPhone，Apple 的這一杰作都已經(jīng)是當(dāng)今市場中的偶像產(chǎn)品。那么，Android 境況如何呢？

Android 還相對(duì)較新，并且在很多方面都與 iPhone 相悖，比如它接納開源社區(qū)。Android 將被用在多個(gè)設(shè)備上（電話和其他家用電器類型的設(shè)備）。目前，我們的討論只限于移動(dòng)手機(jī)以便讓事情盡量地簡化。

隨著時(shí)間的推移，全球范圍內(nèi)面向 Android 的設(shè)備數(shù)量將有可能超過 iPhone。這是因?yàn)槭?Android 支撐的設(shè)備由多個(gè)廠商制作并將可在多個(gè)運(yùn)營商網(wǎng)絡(luò)上應(yīng)用。隨著加入到 Android 市場的玩家的增多，在感觀方面自然要有分別。從 HTC 提供的 SenseUI 界面不難看出這一點(diǎn)。這種誘人的觀感在核心 Android SDK 內(nèi)并不具備，而且并不是與所有設(shè)備兼容。Motorola、Google 和 Verizon 已經(jīng)結(jié)成團(tuán)隊(duì)來共同創(chuàng)建一種新的 Android 設(shè)備：DROID。它是第一個(gè)運(yùn)行在 2.0 平臺(tái)上的商業(yè) Android 設(shè)備。

對(duì)比 Android 的多樣性與 iPhone 的統(tǒng)一外觀。iPhone 是 Apple 公司一個(gè)極具競爭力的專有產(chǎn)品。iPhone 的外觀可能會(huì)與時(shí)俱進(jìn)，但是幾乎不太可能出現(xiàn)較大差別，而 Android 在其早期就經(jīng)歷了分別和差異。

那么，我們?nèi)绾尾拍艿玫揭粋€(gè)本機(jī)的觀感呢？

在 Web 2.0 出現(xiàn)以前，這將是一個(gè)很大的挑戰(zhàn)。為了支持多個(gè)客戶瀏覽器（移動(dòng)的和非移動(dòng)的）所進(jìn)行的早期嘗試包括幾個(gè)不同的技術(shù)，比如：

• 完全并行的站點(diǎn)
• 基于 userAgent 動(dòng)態(tài)生成的內(nèi)容
• Proxy 服務(wù)器將內(nèi)容提取到設(shè)備；RIM 已經(jīng)將這種方式大量應(yīng)用在了設(shè)備內(nèi)置的電子郵件呈現(xiàn)中并取得了成功。

這些方式對(duì)于資金充足的大型團(tuán)隊(duì)而言可能是可以接受的，但是其他的情況又當(dāng)如何呢？我們不具備時(shí)間、人力或資金來換取這種功能。并且，我們經(jīng)過深思已經(jīng)認(rèn)識(shí)到昨天的移動(dòng) Web 的不足，所以我們決不想重蹈覆轍。

幸運(yùn)的是我們不必如此。在 WebKit 和 CSS 的年代，這些差異已經(jīng)通過樣式表和媒體查詢（media query）的使用得到了妥當(dāng)?shù)慕鉀Q。正如之前介紹的，一個(gè)媒體查詢是一種獲得客戶相關(guān)信息的技術(shù)。之前的傳統(tǒng)做法是，瀏覽器發(fā)送一個(gè) userAgent 字符串，用來標(biāo)識(shí)此瀏覽器，而服務(wù)器則負(fù)責(zé)確定該向這個(gè)設(shè)備發(fā)送哪些內(nèi)容（根據(jù)上述討論）。而有了媒體查詢，瀏覽器就可以基于其能力作出決定。下面就是獲得針對(duì) smartphone 的樣式表的例子： <link rel="stylesheet" type="text/css" href="smartphone.css" media="only screen and (max-device-width: 480px)" />。而這里則是一個(gè)針對(duì)桌面計(jì)算機(jī)的媒體查詢： <link rel="stylesheet" type="text/css" href="smartphone.css" media="only screen and (min-device-width: 481px)" />。

要更多地了解媒體查詢，請(qǐng)查閱相關(guān)的草案規(guī)范（參見 參考資料）。

接下來，我們將著重介紹一個(gè)例子，以展示這種方式在用以顯示網(wǎng)絡(luò)狀態(tài)的示例應(yīng)用程序的上下文中的應(yīng)用。

網(wǎng)絡(luò)監(jiān)視應(yīng)用程序

此應(yīng)用程序的目的是為了監(jiān)視多個(gè)服務(wù)器。獨(dú)立的軟件開發(fā)人員通常會(huì)跨多個(gè)服務(wù)器支持多個(gè)應(yīng)用程序。如果在這個(gè)領(lǐng)域的從業(yè)時(shí)間很長，那么服務(wù)器 的類型以及應(yīng)用程序的類型就更有可能不同。所有這些只是為了說明一個(gè)簡單的工具無法監(jiān)視各個(gè)應(yīng)用程序的各個(gè)方面。這也是引入 Network Monitor (netmon) 移動(dòng)應(yīng)用程序的原因所在。它并未被設(shè)計(jì)成在移動(dòng)設(shè)備上面面俱到，而是靈活和方便的。

netmon 應(yīng)用程序包含感興趣的服務(wù)器列表。其中的每一項(xiàng)顯示關(guān)鍵性能指示器（KPI）。 KPI 很早就被 MBA 學(xué)生用來衡量一個(gè)企業(yè)運(yùn)轉(zhuǎn)是否健康。在 Web 應(yīng)用程序托管領(lǐng)域，一些重要的 KPI 有：

• 在最近一段時(shí)期內(nèi)事務(wù)的數(shù)量：
  
  • 訂單
  • 目錄請(qǐng)求
  • E-mail 消息
  • 頁面瀏覽量
• 自上一次事務(wù)后的一段時(shí)期：
  
  • 訂單
  • EDI 文檔
  • 業(yè)務(wù)伙伴消息
  • 來自供應(yīng)商的 FTP 文件
• 數(shù)據(jù)庫是否可用？
• 最后一次已知備份的日期
• 每個(gè)訂單的平均金額
• 剩余的磁盤空間
• 過去一個(gè)小時(shí)、一天、一個(gè)月內(nèi)所傳輸?shù)膸?/li>

這些數(shù)據(jù)項(xiàng)和任何其他的操作數(shù)據(jù)都是為了給出特定系統(tǒng)或應(yīng)用程序的健康狀況。在節(jié)日期間，我們會(huì)實(shí)際察看在我們的一些站點(diǎn)上的訂單數(shù)。如果訂單數(shù)沒有出現(xiàn)逐小時(shí)穩(wěn)步增長，那么我們就需要進(jìn)一步探查問題了。

由于每個(gè)應(yīng)用程序的需要以及所需資源不同，因而 netmon 應(yīng)用程序必須靈活才能適應(yīng)于每個(gè)應(yīng)用程序的特殊性。為了滿足靈活性的要求，我們用一個(gè)最為基礎(chǔ)的數(shù)據(jù)結(jié)構(gòu)來代表特定應(yīng)用程序的健康狀況；在本系列的第 2 部分，我們將著重關(guān)注于這些數(shù)據(jù)從何而來以及如何更新?，F(xiàn)在，我們只需關(guān)心如下所列的信息：

• 站點(diǎn)的名稱
• 站點(diǎn) URL（主頁）
• 要更新的 URL
• 狀態(tài)：OK 與否？
• 總結(jié)：對(duì)條件的大致描述；或者是 OK，或者是一個(gè)文本式的字符串來描述最高優(yōu)先級(jí)的問題
• 條目：這是用來表達(dá)站點(diǎn)的當(dāng)前操作數(shù)據(jù)或 KPI 的名稱/值對(duì)的集合。

我們的應(yīng)用程序?qū)⒁砸环N易于導(dǎo)航的方式列出這些條目、利用 CSS、jQuery 和 WebKit 功能來使這些項(xiàng)突出出來。正如之前所提到的，我們的目標(biāo)是為了讓此應(yīng)用程序能夠運(yùn)行在 iPhone、Android 以及 Safari 的桌面版本之上。

構(gòu)建一個(gè)應(yīng)用程序

如今，Web 頁面應(yīng)該以一種聲明式的方式創(chuàng)建，只提供組織和內(nèi)容。所有定位和格式化都通過 Cascading Style Sheets 實(shí)現(xiàn)，并通常還有 JavaScript 的協(xié)助。實(shí)際上，JavaScript 庫已經(jīng)如此流行以至于成為了一種規(guī)范，而不再是例外。在本文的示例應(yīng)用程序內(nèi)，我們使用了流行的 jQuery JavaScript 框架。這個(gè)示例應(yīng)用程序?qū)⒊尸F(xiàn)在 iPhone、Android 以及桌面上。HTML 內(nèi)容則完全相同。差異存在于選中的樣式表。提醒您：我們并未對(duì)如何讓應(yīng)用程序的外觀光鮮誘人給予過多的關(guān)注。實(shí)際上，為了突出此應(yīng)用程序的樣式表組織，我 們過多地強(qiáng)調(diào)了背景顏色。我們將在本系列的第 2 部分中全面討論應(yīng)用程序的外觀。應(yīng)用程序相應(yīng)的 HTML 如清單 1 所示。

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
            "http://www./TR/xhtml11/DTD/xhtml11.dtd">
            <html xmlns="http://www./1999/xhtml" xml:lang="en">
            <head>
            <meta name="viewport" content="width=device-width" />
            <link rel="stylesheet" href="netmon.css" type="text/css" />
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="netmon.js"></script>
            <script type="text/javascript">
            if (navigator.userAgent.indexOf('iPhone') != -1) {
            document.write('<link rel="stylesheet" href="iphone.css"
            type="text/css" />');
            } else if (navigator.userAgent.indexOf('Android') != -1) {
            document.write('<link rel="stylesheet" href="android.css"
            type="text/css" />');
            } else {
            document.write('<link rel="stylesheet" href="desktop.css"
            type="text/css" />');
            }
            function setupTestData() {
            try {
            netmon.initialize();
            if (netmon.resources.length > 0) {
            jQuery.each(netmon.resources,function (index, value) {
            $("#mainContent").append(netmon.render(index,value));
            });
            $(".serverentry").click (function() {$(this).find(".serveritems").toggle();});
            $(".serveritems").hide();
            }
            } catch (e) {
            alert(e);
            }
            }
            </script>
            <title>My Network Resources</title>
            </head>
            <body onload="setupTestData();">
            <div id="mainContainer">
            <div id="header">
            <h1>My Servers</h1>
            </div>
            <div id="mainContent">
            </div>
            <a href="q.php">My User Agent</a>
            </div>
            </body>
            </html>
            

快速瀏覽一下上述的 HTML，不難發(fā)現(xiàn)有如下幾個(gè)點(diǎn)需要注意：

• 其中有兩個(gè)外部加載的 JavaScript 文件：一個(gè)針對(duì)的是 jQuery 庫，一個(gè)針對(duì)的是我們應(yīng)用程序的 helper 函數(shù)。
• 使用 viewport metatag 來調(diào)整內(nèi)容的呈現(xiàn)伸縮。
• 加載了一個(gè)主樣式表: netmon.css。
• 詢問 userAgent 來決定要加載哪個(gè)額外的樣式表：一個(gè)面向 iPhone，一個(gè)面向 Android，還有一個(gè)面向 Desktop。
• 當(dāng)頁面加載時(shí)，數(shù)據(jù)的顯示通過 jQuery 以及 netmon.js 文件的一個(gè) helper 函數(shù)實(shí)現(xiàn)。
• 頁面內(nèi)還包含若干 div 標(biāo)記。
• 最后，這里還有一個(gè)頁面鏈接以顯示 userAgent 字符串。它之所以存在是考慮到方便性和展示的目的。它與應(yīng)用程序本身無關(guān)。

在深入研究這些樣式表以及 netmon.js 文件之前，讓我們先來看看當(dāng)前的這個(gè)應(yīng)用程序。還記得吧，我們針對(duì)三個(gè)受支持的平臺(tái)使用了三個(gè)不同的樣式表。并且每一個(gè)都是用不同的背景顏色設(shè)置好的以協(xié) 助開發(fā)過程。 圖 9 顯示了這個(gè)具有藍(lán)色背景的 Desktop Safari 瀏覽器。

圖 10 顯示了在 Android 瀏覽器內(nèi)呈現(xiàn)的這個(gè)具有紅色背景的應(yīng)用程序。

圖 11 顯示了在 iPhone 瀏覽器內(nèi)呈現(xiàn)的這個(gè)具有綠色背景的應(yīng)用程序。

在名為 netmon.js 的文件內(nèi)的主樣式表，如清單 2 所示。

            body {
            color: #888888;
            font-family: Helvetica;
            font-size:14px;
            margin: 0px;
            padding: 0;
            }
            .details {
            margin: 0px;
            padding: 0px;
            background-color: white;
            border: solid;
            border-width: 1px;
            -webkit-border-top-left-radius: 8px;
            -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-left-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
            }
            .OK {
            color: #000000;
            }
            .BAD {
            color: #ff0000;
            }
            .odd {
            background-image: -webkit-gradient(linear, left top, right bottom,from(#ccc)
            ,to(#999));
            }
            .even {
            background-image: -webkit-gradient(linear, left top, right bottom,from(#999)
            ,to(#ccc));
            }
            .serverentry a {
            float: right;
            color: #ffffff;
            }
            .serveritems{
            color: #000;
            }
            #header h1 {
            margin: 0;
            padding: 0;
            text-align: center;
            color: #000;
            }
            

這些特定于平臺(tái)的樣式表實(shí)現(xiàn)了如下三個(gè)主要目標(biāo)：

1. 更改顏色主題以展示樣式表的影響以及基于 userAgent 將某個(gè)特定的樣式表指向某個(gè)特定的平臺(tái)是多么地簡便。
2. 調(diào)整桌面和移動(dòng)平臺(tái)之間的字體大小。
3. 實(shí)施特定于 WebKit 的功能。如果我們針對(duì)的是桌面上的一個(gè)非 WebKit 兼容的瀏覽器（比如 Firefox）時(shí)，這一點(diǎn)將非常重要。

不妨舉個(gè)例子，iphone.css 文件如清單 3 所示。

            body {
            background-color: #00ff00;
            }
            .serverentry {
            -webkit-border-top-left-radius: 8px;
            -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-left-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
            }
            .name {
            font-size: 2em;
            }
            .summary{
            font-size: 1.5em;
            }
            .serverentry a {
            font-size: 1.5em;
            }
            

在這個(gè)文件內(nèi)，我們看到主體標(biāo)記的背景顏色被設(shè)為 green (#00ff00)，而且還有字體大小上的變化以便使這些條目更適合在移動(dòng)設(shè)備上閱讀。

最后，讓我們來看看 netmon.js，該文件包含一列條目以及一個(gè)被設(shè)計(jì)用來呈現(xiàn)條目的函數(shù)，如清單 4 所示。為了簡便起見，有些數(shù)據(jù)被省略了。完整的副本，請(qǐng)參見 下載。

            var netmon = {
            initialize : function () {
            },
            resources :
            [
            {
            name : '',
            homeurl : 'http://',
            pingurl : 'http:///netmon.php',
            status : 'OK',
            summary : 'OK',
            items :
            [
            {name : 'DiskSpace', value : '22.13 GB'},
            {name : 'Database Up?', value : 'Yes'}
            ]
            },
            {
            name : 'server 2',
            homeurl : 'http://someurl',
            pingurl : 'http://someurl/netmon.jsp',
            status : 'OK',
            summary : 'OK',
            items :
            [
            {name : 'DiskSpace', value : '100.8 GB'},
            {name : 'Database Up?', value : 'Yes'}
            ]
            },
            // additional entries clipped for brevity
            ],
            render : function(index,itm) {
            try {
            var ret = "";
            ret += "<div class='serverentry " + itm.status + " " + (index % 2 == 0 ?
            'even' : 'odd') + "'>";
            ret += "<span class='name'>" + itm.name +
            "</span>  <a target='_blank' href='" + itm.homeurl +
            "'>Show</a><br />";
            if (itm.status != "OK") {
            ret += "<span class='summary'>-" + itm.summary +
            "</span><br />";
            }
            ret += "<div class='serveritems'>";
            jQuery.each(itm.items,function (j,itemdetail) {
            ret += ">>" + itemdetail.name + "=" + itemdetail.value +
            "<br />";
            });
            ret += "</div>";
            ret += "</div>";
            return ret;
            } catch (e) {
            return "<div class='error'>Error rendering item [" + itm.name + "]
            " + e + "</div>";
            }
            }
            };
            

借助 CSS 文件內(nèi)的類定義，當(dāng)服務(wù)器條目沒有處于 OK 狀態(tài)時(shí)，它就會(huì)被顯示為紅色。此外，當(dāng)狀態(tài)不是 OK 時(shí)，我們會(huì)顯示 summary 字段以便給出問題的一個(gè)大致概覽。在圖 9-11 中，服務(wù)器 4 的問題是磁盤空間不足。如果我們輕擊一個(gè)條目，就能看到其細(xì)節(jié)，如圖 12 所示。

通過輕擊每個(gè)條目右側(cè)的 show 鏈接，就可以啟動(dòng)每個(gè)服務(wù)器的主頁。這個(gè)特性十分得心應(yīng)手，原因有兩個(gè)。一是記住所感興趣的每個(gè)服務(wù)器的 URL 是件很繁瑣 的事情，其二，不管移動(dòng)設(shè)備的鍵盤有多棒，要求在移動(dòng)設(shè)備上鍵入這么長的 URL 就更繁瑣了。

在我們的移動(dòng)設(shè)備上，netmon 正在快樂地運(yùn)行著，那么支持我們的服務(wù)器應(yīng)該是更為容易的一項(xiàng)任務(wù)。

在第 2 部分，我們將充實(shí)這個(gè)應(yīng)用程序以便我們能請(qǐng)求更多實(shí)時(shí)數(shù)據(jù)，并會(huì)討論構(gòu)建一個(gè)移動(dòng)應(yīng)用程序時(shí)有關(guān)服務(wù)器端的考慮事項(xiàng)。

在結(jié)束本文之前，讓我們快速瀏覽一下要讓這個(gè)應(yīng)用程序可從應(yīng)用程序庫下載需要做些什么。

將一個(gè) Web 應(yīng)用程序付諸使用

假設(shè)，這個(gè)網(wǎng)絡(luò)應(yīng)用程序已經(jīng)就緒。您向一個(gè)朋友展示了它，您的朋友鼓勵(lì)您把這個(gè)應(yīng)用程序銷售給他人以便他人也可以用您的應(yīng)用程序來監(jiān)視其網(wǎng)絡(luò) 上的資源。那么，您能不能銷售一個(gè) Web 應(yīng)用程序呢？一個(gè) Web 應(yīng)用程序當(dāng)然可以通過傳統(tǒng)的訂閱或 SaaS 模型銷售，但如果想要將您的 “Web 應(yīng)用程序” 打包后再通過一個(gè)應(yīng)用程序市場銷售它，比如 iTunes App Store 或 Google Marketplace，又該如何呢？為了這個(gè)目的，應(yīng)用程序必須被編譯為一個(gè)本機(jī)應(yīng)用程序。所幸的是，針對(duì)此已經(jīng)有一個(gè)解決方案。

每個(gè)主要的移動(dòng)平臺(tái)都有一種將瀏覽器嵌入到視圖或表單、動(dòng)作的手段。每個(gè)平臺(tái)為這種技術(shù)所使用的術(shù)語稍有不同，但這些技術(shù)工作的方式是相似 的：在這個(gè)本機(jī)應(yīng)用程序放入一個(gè) browser 控件，而這個(gè)本機(jī)應(yīng)用程序可以與之交互。在最簡單的模型內(nèi)，這個(gè) browser 控件可能只是訪問 Web 以獲得內(nèi)容。當(dāng)然，這個(gè)本機(jī)應(yīng)用程序也可以截獲鏈接請(qǐng)求并提供其自己的內(nèi)容，進(jìn)而只利用瀏覽器視圖來進(jìn)行呈現(xiàn)。請(qǐng)記住，對(duì)于本機(jī)小部件，HTML 和 CSS 均是可行的，而不管應(yīng)用程序內(nèi)容的來源。并且，有些應(yīng)用程序?qū)⑹沁@兩種方式的混合。比如，一個(gè)應(yīng)用程序可以從 Web 上獲得大多數(shù)內(nèi)容，而應(yīng)用程序的 “本機(jī)” 的一面則提供了通過藍(lán)牙訪問本機(jī)資源的能力。

對(duì)于這類應(yīng)用程序架構(gòu)，市場上已經(jīng)有幾個(gè)工具可用。PhoneGap 和 Appcelerator 是這一領(lǐng)域的兩個(gè)佼佼者（參見 參考資料）。

結(jié)束語

本文主要介紹了受 WebKit 支撐的 iPhone 和 Android Web 應(yīng)用程序。在第 2 部分，將對(duì)這個(gè)示例應(yīng)用程序進(jìn)行擴(kuò)展，會(huì)融入通過 Ajax 的 Web 更改技術(shù)進(jìn)行即時(shí)頁面更新的功能。

參考資料

學(xué)習(xí)

• 訪問 WebKit Web 站點(diǎn)。
  
  
• 查閱針對(duì) iPhone 的 特定于 Viewport 的討論。
  
  
• 更多地了解 HTML5 規(guī)范。
  
  
• 通過使用 media queries，在無需更改內(nèi)容本身的情況下，呈現(xiàn)可以被針對(duì)一定范圍的輸出設(shè)備量身定做。
  
  
• 閱讀來自 O'Reilly Media 的 Mobile Design and Development。
  
  
• 閱讀 “Develop Android applications with Eclipse”，了解開發(fā) Android 應(yīng)用程序最簡單的方式。
  
  
• 獲得 Android SDK 文檔。
  
  
• Open Handset Alliance 是 Android 的贊助者。
  
  
• Unlocking Android 是學(xué)習(xí) Android 的一個(gè)很好的資源。
  
  
• 要收聽面向軟件開發(fā)人員的有趣訪談和討論，請(qǐng)查看 developerWorks 播客。
  
  
• 隨時(shí)關(guān)注 developerWorks 技術(shù)活動(dòng)和網(wǎng)絡(luò)廣播。
  
  
• 查閱最近將在全球舉辦的面向 IBM 開放源碼開發(fā)人員的研討會(huì)、交易展覽、網(wǎng)絡(luò)廣播和其他 活動(dòng)。
  
  
• 訪問 developerWorks Open source 專區(qū) 獲得豐富的 how-to 信息、工具和項(xiàng)目更新以及 最受歡迎的文章和教程，幫助您用開放源碼技術(shù)進(jìn)行開發(fā)，并與 IBM 產(chǎn)品結(jié)合使用。
  
  
• My developerWorks 社區(qū)涵蓋了大量主題，是一個(gè)成功的社區(qū)典范。
  
  
• 查看免費(fèi)的 developerWorks 演示中心 觀看并了解 IBM 及開源技術(shù)和產(chǎn)品功能。
  
  

獲得產(chǎn)品和技術(shù)

• 下載 Android SDK、訪問 API 參考并獲得有關(guān) Android 的最新新聞。
  
  
• 由于 Android 是開源的，因而您可以從 Android Open Source Project 獲得源代碼。
  
  
• PhoneGap 是一個(gè)開源開發(fā)工具，可通過 JavaScript 構(gòu)建快捷、簡單的移動(dòng)應(yīng)用程序。
  
  
• 查閱 Appcelerator，使用 Web 技術(shù)創(chuàng)建、測試和發(fā)布本機(jī)移動(dòng)和桌面應(yīng)用程序。
  
  
• 使用 IBM 產(chǎn)品評(píng)估試用版軟件 改進(jìn)您的下一個(gè)開發(fā)項(xiàng)目，這些軟件可以通過下載獲得。
  
  
• 下載 IBM 產(chǎn)品評(píng)估試用版軟件 或 IBM SOA Sandbox for Reuse，開始使用來自 DB2?、Lotus?、Rational?、Tivoli? 和 WebSphere? 的應(yīng)用程序開發(fā)工具和中間件產(chǎn)品。
  
  

關(guān)于作者