簡介

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

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

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

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

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

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

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

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

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

那么，什么是 WebKit？

WebKit 和 HTML5

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

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

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

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

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

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

為了訪問 Web 開發(fā)技術(shù)，如今，應(yīng)用程序開發(fā)人員有幾個選擇。第一，應(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 等）動態(tài)生成。所有這些技術(shù)追根到底都可簡單地用術(shù)語 HTML 指代 — 這不是本文討論的重點(diǎn)所在 — 并且最為重要的是，受 WebKit-支撐的瀏覽器能夠在移動設(shè)備上解析和呈現(xiàn) HTML。

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

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

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

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

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

移動友好性

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

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

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

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

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

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

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

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

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

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

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

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

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

為移動量身打造

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

先來看看這個桌面瀏覽器體驗，如圖 5 所示。

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

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

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

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

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

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

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

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

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

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

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

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

隨著時間的推移，全球范圍內(nèi)面向 Android 的設(shè)備數(shù)量將有可能超過 iPhone。這是因為受 Android 支撐的設(shè)備由多個廠商制作并將可在多個運(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)隊來共同創(chuàng)建一種新的 Android 設(shè)備：DROID。它是第一個運(yùn)行在 2.0 平臺上的商業(yè) Android 設(shè)備。

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

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

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

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

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

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

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

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

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

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

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

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

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

由于每個應(yīng)用程序的需要以及所需資源不同，因而 netmon 應(yīng)用程序必須靈活才能適應(yīng)于每個應(yīng)用程序的特殊性。為了滿足靈活性的要求，我們用一個最為基礎(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é)：對條件的大致描述；或者是 OK，或者是一個文本式的字符串來描述最高優(yōu)先級的問題
• 條目：這是用來表達(dá)站點(diǎn)的當(dāng)前操作數(shù)據(jù)或 KPI 的名稱/值對的集合。

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

構(gòu)建一個應(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 框架。這個示例應(yīng)用程序?qū)⒊尸F(xiàn)在 iPhone、Android 以及桌面上。HTML 內(nèi)容則完全相同。差異存在于選中的樣式表。提醒您：我們并未對如何讓應(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)有如下幾個點(diǎn)需要注意：

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

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

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

圖 11 顯示了在 iPhone 瀏覽器內(nèi)呈現(xiàn)的這個具有綠色背景的應(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;
            }
            

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

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

不妨舉個例子，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;
            }
            

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

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

            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)時，它就會被顯示為紅色。此外，當(dāng)狀態(tài)不是 OK 時，我們會顯示 summary 字段以便給出問題的一個大致概覽。在圖 9-11 中，服務(wù)器 4 的問題是磁盤空間不足。如果我們輕擊一個條目，就能看到其細(xì)節(jié)，如圖 12 所示。

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

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

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

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

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

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

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

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

結(jié)束語

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

參考資料

學(xué)習(xí)

• 訪問 WebKit Web 站點(diǎn)。
  
  
• 查閱針對 iPhone 的 特定于 Viewport 的討論。
  
  
• 更多地了解 HTML5 規(guī)范。
  
  
• 通過使用 media queries，在無需更改內(nèi)容本身的情況下，呈現(xiàn)可以被針對一定范圍的輸出設(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 的一個很好的資源。
  
  
• 要收聽面向軟件開發(fā)人員的有趣訪談和討論，請查看 developerWorks 播客。
  
  
• 隨時關(guān)注 developerWorks 技術(shù)活動和網(wǎng)絡(luò)廣播。
  
  
• 查閱最近將在全球舉辦的面向 IBM 開放源碼開發(fā)人員的研討會、交易展覽、網(wǎng)絡(luò)廣播和其他 活動。
  
  
• 訪問 developerWorks Open source 專區(qū) 獲得豐富的 how-to 信息、工具和項目更新以及 最受歡迎的文章和教程，幫助您用開放源碼技術(shù)進(jìn)行開發(fā)，并與 IBM 產(chǎn)品結(jié)合使用。
  
  
• My developerWorks 社區(qū)涵蓋了大量主題，是一個成功的社區(qū)典范。
  
  
• 查看免費(fèi)的 developerWorks 演示中心 觀看并了解 IBM 及開源技術(shù)和產(chǎn)品功能。
  
  

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

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

關(guān)于作者