移動Web開發簡介
移動設備是一種全新的媒介。桌面系統中總結出來的最佳實踐在移動系統中完全不適用。移動設備、移動生態系統和移動用戶具有獨特的特性，要求采用不同于以往的最佳實踐進行移動Web開發。
本文將講述移動Web的語法、語義和生態系統。您將學習如何構建適應性強、響應迅速并且符合標準的移動Web站點，并確保其可以在任意移動瀏覽器上運行。一些簡單的開發提示和技巧將改進小尺寸屏幕中的Web可用性。您可以進一步充實移動Web站點，使其適用于高級智能手機瀏覽器(具有電子郵件、桌面功能的Web瀏覽等集成Internet功能的高端手機中的瀏覽器)，能夠呈現完整的HTML并實現專有擴展。開發工作完成后，您將了解如何在實際移動設備上進行全方位的測試，優化移動Web頁面以便于網絡傳輸，以及通過避免代碼轉換保留更多適用于移動生態系統的程序。
移動Web好比是西部荒野。一些重量級人物控制著整個生態系統，戰爭隨處可見。意志堅定的人可以在遙遠的地方占有財產、構建家園、建立社區以及與世隔絕的繁華村落。但是，要想生存下來，最好的方式還是全副武裝。而對于移動開發人員來說，在這片荒野中生存最有效的武器就是：
◆ 對移動標準和最佳實踐具有專業而深入的了解
◆ 批判性思維技能和正確對待懷疑
◆ 千方百計找出正確的語法
◆ 正確評價移動用戶的需求
基于標準的移動Web開發方法確保在各種移動瀏覽器和平臺之間的兼容性和可用性。要想在移動Web開發領域取得成功，必須了解所有規則，同時還要了解什么時候可以忽略規則。
1.1 移動Web和桌面Web
從根本上說，只有一種Web。Web內容是可以使用各種Web瀏覽器查看的標準化標記、樣式、腳本和多媒體。在本書中，按照慣例將這種Web稱為桌面Web。我們可以在臺式計算機、筆記本電腦、上網本上通過Firefox、Opera或Internet Explorer等瀏覽器訪問桌面Web，進行網上沖浪。
桌面Web由通過TCP/IP計算機網絡鏈接在一起的大量服務器構成。這種服務器稱為Web服務器，很多Web服務器實現超文本傳輸協議(HTTP)共享文檔和文件。Web服務器通過統一資源標識符(Uniform Resource Identifier，URI)提供對文本文件、標記文檔和二進制資源的訪問。
在HTTP請求中，客戶端向Web服務器發送所需資源的URI以及一組請求頭，其中一個請求頭包含MIME類型列表，該列表公布客戶端支持的內容類型。
在HTTP響應中，Web服務器除了向客戶端發送請求的文檔(標記、文本或二進制文件)外，還會附帶另外一組頭，其中一個頭包含MIME類型，描述傳輸到客戶端的文檔的文件類型。
移動Web在桌面Web的基礎上添加了新的MIME類型、標記語言、文檔格式和最佳實踐，為小尺寸屏幕提供優化的Web內容，并可解決移動設備上的資源限制、Web瀏覽器可用性差等問題。
移動Web在Web生態系統中引入了一些新的組件，包括：
◆ 針對移動設備進行了優化的標記語言和樣式
◆ 可區分移動標記和桌面HTML的MIME類型
◆ 具有大量功能的瀏覽器客戶端
◆ 使內容更適合上述客戶端的網絡代理
如果將移動Web比作西部荒野，桌面Web就可稱得上是世外桃源。桌面Web是一種較好理解的安全開發環境，采用根據已制定的標準建立的客戶端技術。截止到本書編寫時，桌面Web已經走過將近20年的風雨歷程了。桌面瀏覽器客戶端是公開的、免費的、可輕易獲得并且經常更新。目前人們使用的主流Web瀏覽器是由少數軟件供應商和開放源代碼項目生產的，這樣就降低了跨平臺Web開發中的測試難度。在桌面生態系統中，如果一個Web頁面到達目標瀏覽器，則其標記在傳輸途中幾乎一直存在，Internet中的中介服務器不會更改這些標記。網絡所有者和Internet服務提供商(Internet Service Provider，ISP)對于通過自動標記適配和內容重新打包優化和改善網絡體驗沒有任何興趣(請參閱表1-1，了解定義移動Web和桌面Web的特征列表)。
表1-1 移動Web和桌面Web的特征
| 移 動 Web | 桌 面 Web | |
| 平均會話長度 | 2~3分鐘 | 10 ~15分鐘 |
| 最小屏幕尺寸 | 90×60 | 800×600 |
| 最大屏幕尺寸 | 對于常用的設備為240×400 | 無限制 |
| 瀏覽器供應商 | 超過12家并且還在不斷增長 | 只有兩家，市場份額超過5% |
| 瀏覽器故障 | 經常出現故障。除使用可更新操作系統的智能手機外，其他設備都無法修補 | 很少出現故障并且可以修補 |
| W3C 標準 | 不規范。在移動行業中，有時會忽略甚至違背這些標準 | 接受并充分應用 |
| 標記語言 | WML CHTML XHTML Basic XHTML-MP XHTML HTML |
XHTML、HTML |
| JavaScript和AJAX | 90%的移動設備都不支持。采用ECMAScript-MP和JavaScript。文檔對象模型(Document Object Model，DOM)和支持的事件不同。一般都采用專有的API | 通常情況下支持 |
| 可尋址的客戶 | 全球30億移動訂閱者 | 總計10億臺筆記本電腦、臺式計算機和服務器 |
桌面Web過濾軟件可以阻止查看讓人討厭的網頁，但是，Web過濾器的工作方式是阻止頁面訪問，而不是調整頁面語法。
移動Web開發是一門全新的學科，這樣說的原因如下：
◆ 移動Web生態系統是全新的。移動Web使用桌面Web的既有知識，但它也有一些從移動設備獨有的特性衍生出來的新的最佳實踐和疑難問題。桌面隱喻并不適用。帶寬占用量是一個比較關鍵的問題，即使對智能手機也是如此。使用JavaScript架構以及異步JavaScript和XML (AJAX)等Rich Web 2.0功能時務必要謹慎，否則有電池電量耗盡的風險。運營商經常會控制和阻止移動Web站點的流量。在移動標記傳輸到移動瀏覽器的途中，代碼轉換代理經常會嘗試重置移動標記的格式。最后，必須編寫一些保護性的程序，降低代碼轉換器暴露以及出現移動網絡問題的概率。
◆ 移動Web用戶是全新的。移動Web用戶采用獨特的使用模式和導航方法。移動用戶具有強烈的目標導向性和位置感知能力。在影響移動用戶的移動Web瀏覽體驗的主要因素中，即包括在服務區內外漫游時的網絡訪問問題。實際上，對成本敏感的移動用戶寧可取消網絡交易，也不愿冒因錯誤操作而支付費用的風險。
◆ 移動Web瀏覽器是全新的。移動瀏覽器具有其他瀏覽器所不具備的優勢，同時也有一些與眾不同的問題及相應的解決方法。Web標準實現不徹底是經常出現的問題。Web頁面格式錯誤會對移動設備產生嚴重的影響，包括瀏覽器崩潰或設備重置。用戶非常需要JavaScript和AJAX等高級Web功能，但這些功能會影響電池的使用壽命。市場上有數十家移動瀏覽器供應商，確保Web標準遵從性的重擔就落在了原始設備制造商(Original Equipment Manufacturer，OEM)和運營商肩上。
#p#
1.2 移動標記語言
目前，各種移動設備采用的移動瀏覽器一般是基于一定的標準，但又不一定遵從標準，這樣，用戶可以查看多種移動標記語言的Web內容，這些語言包括：
◆ XHTML和HTML
◆ XHTML移動配置文件(XHTML-MP)
◆ CHTML (iMode)
◆ 無線標記語言(WML)
1.2.1 HTML和XHTML
HTML是移動標記語言的旗艦產品。作為標準Web標記語言，HTML被Web開發人員和設計人員廣泛使用。很多移動瀏覽器都支持完整的HTML標記集，但是這些瀏覽器可能無法滿足直接查看桌面HTML網站的用戶體驗。對于移動設備來說，屏幕分辨率、存儲容量和帶寬都存在限制，有必要開發出更加優化的標記和樣式。當然，移動用戶還希望針對他們的移動特性開發出一些專用的服務。
XHTML在嚴格遵循XML語法的基礎上，結合運用HTML標記集。對于移動瀏覽器來說，處理和呈現XML格式的標記要比處理松散的HTML語法規則容易得多。對于支持HTML的移動瀏覽器來說，XHTML是最佳標記。
Android、iPhone、Nokia Series 60、Windows Mobile和BlackBerry設備中的智能移動瀏覽器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可選擇添加的大量客戶端緩存和CSS擴展功能構成了交互式移動Web應用程序的基礎。本書介紹如何針對智能手機瀏覽器構建高級的Web應用程序。
注意：
僅針對智能手機開發的移動Web站點可以使用HTML 4的完整功能集，并且在不久的將來，還可以使用HTML 5的完整功能集。但是，在移動Web站點上使用HTML和XHTML需要支付一定的費用。使用HTML和XHTML后，無法與使用舊版瀏覽器的高容量功能手機(市場上大量銷售的低成本、功能很少的手機)兼容(盡管智能手機做了大肆的宣傳，但還是有大量的功能手機用戶在移動Web上沖浪)。使用桌面標記還需要引入代碼轉換器，也就是通過重置標記格式優化桌面Web使之適用于移動設備的網絡應用程序。代碼轉換器可以使系統認為標記是用于桌面瀏覽器的，同時機器會對標記進行重新調整，使其適合移動瀏覽器。本書教您應對以下兩種情況：如何最大程度地使HTML與移動瀏覽器兼容；如何避免對針對移動設備進行了優化的HTML進行雙重代碼轉換。
1.2.2 XHTML移動配置文件
XHTML移動配置文件(XHTML-MP)由開放移動聯盟(http://openmobilealliance.org)指定和維護，實際上，它就是移動Web的標準標記。移動配置文件，顧名思義，這種標記語言是XHTML的一個子集，專用于移動計算設備，包括手機：
◆ XHTML-MP 1.0設定了移動標記語言的基本標記。
◆ XHTML-MP 1.1添加了<script>標記并支持移動JavaScript。
◆ XHTML-MP 1.2添加了更多表單標記和文本輸入模式。截止到本書編寫時，很多移動瀏覽器還不支持XHTML-MP 1.2。
實際上，所有新開發的移動Web站點都使用XHTML-MP為移動用戶提供服務。
這種標記語言在移動Web中引入了一些常用的概念，如分離標記結構和顯示(presentation)。XML格式的標記定義文檔結構，而級聯樣式表(CSS)控制顯示。大多數XHTML-MP移動瀏覽器都支持無線CSS、CSS移動配置文件和/或CSS 2。當然，大多數意味著并不是所有支持XHTML-MP的移動瀏覽器也支持CSS。
歡迎進入移動Web開發的荒涼世界。本書將教您如何使用設備數據庫確定移動瀏覽器的疑難問題，如不能很好地支持CSS，這樣您就可以對標記進行相應的調整。幸運的是，移動瀏覽器不斷發展，Web標準遵從性和整體質量水平都得到大幅提升。
XHTML-MP是無線應用協議(Wireless Application Protocol，WAP)第二版中規定的標記語言。盡管從技術上講不夠準確，但業界還是習慣性地將XHTML-MP稱為WAP2。
1.2.3 WML
無線標記語言(WML)是一種舊版的簡單標記語言，適用于低功耗的移動設備。1998年，無線應用協議論壇(也就是現在的開放移動聯盟)對這種語言進行了標準化處理。WML是可擴展標記語言(XML)的一種行業說法，主要使用隱喻卡片組和卡片。一個標記文檔可以包含多個用戶界面(UI)屏幕或卡片。WML最初設計用于在內存和處理能力極其有限的單色移動設備上顯示文本。移動開發人員使用集成開發環境(IDE)或文本編輯器以純文本的形式編寫WML，或者使用服務器端Web腳本語言生成代碼。在某些移動網絡中，WML網關服務器會將標記編譯為二進制格式，以壓縮的形式傳輸到設備，這樣可以提高傳輸速度。支持WML的移動瀏覽器反編譯并顯示該二進制WML，也可以直接顯示文本WML。
WML包含兩個主要的版本：WML 1.1和WML 1.3。與前者相比，WML 1.3引入了對彩色圖像的支持。實際上，現在的所有移動瀏覽器都支持WML 1.3以及其他標記語言。目前美國境內所使用的移動設備中，大約5%的設備其瀏覽器僅支持WML，剩下的95%支持并首選XHTML-MP、XHTML和/或HTML。
WML是WAP規范第一版中規定的標記語言。因此，在移動行業里，也將WML稱為WAP1。這在技術上講并不是很準確，因為WAP規范覆蓋整個協議棧(包括標記本身)，但盡管如此，還是沿用這種叫法。
WML被認為是舊版移動Web語言。這種語言實在是老套，以至于Apple iPhone為追趕潮流而在其支持Web的移動瀏覽器中明確表示不再支持WML。盡管WML語言已經存在了很多年，但其結構簡單和壓縮二進制格式的特點還是吸引了開發人員使用它開發一些簡單的移動Web應用程序，或為舊式手機提供文本移動Web體驗。
例如，俄勒岡州波特蘭市的Trimet公共交通系統提供了一個簡單的WML網站，用于查看公交車和輕軌的時刻表。每條線路中的每一站都顯著地標記了一個唯一的數字ID，以便于乘客識別。Trimet網站用戶在WML表單中輸入站點ID即可了解下一班公交車和輕軌列車的預計到站時間。在該網站中，還可以按路線編號或位置瀏覽交通時刻表。Trimet交通網站為移動用戶提供的功能很有限，卻非常重要。文檔很小，即使在2 G的移動網絡中，也可以實現快速瀏覽。由于該網站使用WML，因此實際上目前使用的每部手機都可以查看交通時刻表。若要最大程度地提高市政移動網站在不同駕乘人群中的應用，則WML是一種非常不錯的選擇。您可以訪問http://wap.trimet.org在Trimet WML網站中查詢交通時刻表。Trimet駕乘人員還可以使用許多其他移動Web站點和應用程序，包括許多面向iPhone和其他智能手機的移動Web站點和應用程序。有關詳細信息，請訪問網站http://trimet.org/apps/。
#p#
1.2.4 其他移動標記語言
本節主要介紹在移動Web中廣泛使用的標記語言，包括XHTML、HTML、XHTML-MP和WML。除此之外，還有其他一些未被廣泛采用的標準化移動標記語言。其中一些標記語言要么超前標榜在移動設備上實現可靠的Internet訪問，要么并入其后更流行的標準。對于這些標記語言，本書將簡要說明其優勢，而不做深入的探討。
1. HDML
WML是移動Web的舊版語言，但它并不是第一種可在手機上查看的標記語言。這一殊榮屬于HDML (Handheld Device Markup Language，手持設備標記語言)，它是WML的前身，由Openwave (一家移動基礎設備提供商和瀏覽器供應商，以前稱為Unwired Planet，也就是“無線星球”)設計。HDML在1997年被提交到W3C，但始終未標準化，也未被廣泛采用。不過，HDML對WML的語法形成和使用產生了很大的影響。
20世紀90年代中期，手機都是黑白的，而且大多數使用的是三行顯示屏。某些早期的移動設備支持顯示HDML文檔。HDML瀏覽器對于語法的要求非常不嚴格。
作為一個喜歡嘗試的人，我曾經使用HDML制作了一個基于表單的網站原型，并將其用于我的模擬手機。該網站可以運行，但我還是放棄了，因為瀏覽器強制執行少量達到HDML文檔最大文件的大小。這種瀏覽器也最終沒有向普通用戶公布。在開發過程中，我經常用無效的HDML語法使瀏覽器崩潰，每次發生崩潰時，HDML手機都會輸出存在錯誤的文件名和出錯的C源代碼的行號。這個過程非常有趣。
2. CHTML
日本的DoCoMo移動網絡中的I-mode移動設備使用HTML的一個子集，即壓縮式HTML(Compact HTML，CHTML)，顯示Web內容。CHTML由日本的移動瀏覽器公司Access所創建，并于1998年提交到W3C進行標準化。CHTML采用HTML的結構，用一組嚴格限定的標記將Web內容傳遞到非常小的信息應用程序，如低端手機。CHTML不支持以下HTML功能：
◆ JPEG格式的圖像(支持GIF格式)
◆ 表格
◆ 圖像地圖
◆ 多種字體和樣式(在I-mode設備中，僅支持一種字體)
◆ 背景色和背景圖像
◆ 框架
◆ 樣式表
CHTML僅在日本市場中銷售的移動設備上使用，與此同時，通過CHTML開發的各種I-mode服務正在使用XHTML迅速地重新實現。
3. XHTML Basic
對于功能受限的移動設備，在從HTML降級到XHTML-MP的過渡階段，建議使用XTML Basic移動標記語言。該建議由W3C在2000年提出，開放移動聯盟對XTML Basic的標記支持進行了擴展，從而創建了XHTML-MP。
很多移動瀏覽器都支持XHTML Basic DTD，但移動Web開發人員更傾向于使用支持更為廣泛的XHTML-MP。
1.3 移動腳本語言
移動瀏覽器中的客戶端腳本編寫曾經是智能手機的專屬領域，但這種狀況發生了日新月異的變化。到2010年，很多暢銷移動設備都將支持ECMAScript-MP或移動JavaScript。移動JavaScript是一種非常奇妙的工具，用于創造交互式的移動Web體驗。與任何客戶端移動技術一樣，在真實的移動設備上測試JavaScript對于有效地完成開發工作至關重要，這是因為在模擬器上測試以及在Firefox中進行測試可能無法發現某些語法問題和性能問題，而這些問題很可能會在目標移動設備上發生。
移動JavaScript和桌面JavaScript的語法在本質上是一樣的。移動版本嚴格遵守腳本行必須以分號結束。移動JavaScript減少了支持的字符集，并排除了計算密集型語言元素。與對應的桌面語言相比，移動語言的不同之處在于移動瀏覽器中的DOM和事件支持。DOM和事件支持可能會因瀏覽器供應商和版本的不同而有所差異。若要成功完成移動JavaScript開發，則在設備上進行測試至關重要。
客戶端腳本編寫也可能會降低移動Web瀏覽性能。移動用戶可以禁用JavaScript執行。因此，即使是專為移動設備設計的支持JavaScript的標記，也必須進行適度地調整，使之適應非腳本環境。靈活的移動Web設計首先實現標記，然后通過客戶端腳本編寫反復地對其進行增強。本書介紹設備識別和內容自適應技術，使得能夠根據條件僅在支持JavaScript的移動瀏覽器上包含腳本。
注意：
WML提供了自己的腳本語言，即WMLScript。WMLScript需要從WML文檔進行鏈接，并且支持表單驗證、對話框、卡片導航和URI導航。本書中未對WMLScript進行討論，我們關注的是在移動瀏覽器的客戶端腳本編寫中采用的腳本語言，也就是JavaScript和ECMAScript-MP。
1.4 移動樣式表
用于移動標記文檔的樣式表遵循三種CSS行業術語之一。最佳的移動瀏覽器支持CSS2，也就是在桌面Web中與XHTML和HTML結合使用的樣式標準。支持XHTML-MP的移動瀏覽器使用無線CSS和/或CSS移動配置文件，二者都是CSS2的子集，彼此獨立而又存在一定的聯系，可以在有限的瀏覽器上支持通用的樣式屬性。移動CSS子集刪除了計算密集型CSS功能，如屬性繼承和3D元素對齊方式。
1.5 移動行業組織和標準機構
對于靈活的跨平臺開發而言，遵守移動Web行業標準和最佳實踐非常重要。一些Internet和移動行業機構掌管著移動Web標準和推薦的最佳實踐，這些機構包括：
◆ W3C：該機構負責針對移動Web開發和測試標準化移動標記語言以及發布最佳實踐文檔。
◆ 開放移動聯盟(以前稱為WAP論壇)：該機構負責標準化移動標記和樣式語言，以及其他設計用于實現跨設備、地域和移動網絡進行互操作的移動技術。
◆ dotMobi(http://mtld.mobi)：該機構控制.mobi頂級域，以及必須與設備適應并與移動設備兼容的內容。該機構還負責發布移動Web開發的最佳實踐，并且通過在線社區對移動開發人員、市場營銷人員和運營商進行相應的培訓。
◆ 移動營銷協會(Mobile Marketing Association)：該機構集中管理針對移動設備營銷和廣告的各種技術建議和最佳實踐。
◆ 開放移動終端平臺(Open Mobile Terminal Platform，OMTP) (www.omtp.org/)：這是一個由運營商創立的移動行業組織，主要負責標準化從Web應用程序訪問移動設備的操作。
移動Web開發是一門新興的學科，各種各樣的標準和最佳實踐如雨后春筍般涌現出來。聰明的移動Web開發人員應深諳這些行業文檔，通過批判性的思維確定，在開發面向特定地域和移動設備型號的移動Web內容時應適用哪些最佳實踐。
1.6 移動生態系統
移動生態系統是一個豐富多彩、雜亂無序而又令人興奮的世界。作為移動Web開發人員，您可以期待接觸這個生態系統中的一些部分。OEM (原始設備制造商)和移動軟件供應商控制著在移動設備上運行的移動瀏覽器軟件。移動運營商銷售手機和網絡服務。運營商控制著移動設備的Web訪問。獨立的移動開發人員社區通常圍繞某一移動平臺或服務組件組織。在開發人員社區中，從事移動Web和應用程序項目的人員會友好地進行一些技術上的交流。
練習1：瀏覽移動Web
通過在各種不同的手機上瀏覽Web來熟悉移動Web。搜集或向朋友借一些不同制造商生產的移動設備，要求這些移動設備具有不同的屏幕尺寸和樣式(尤其是觸摸屏)。最低限度是，至少要有一部功能手機和一部智能手機。接下來，使用這些移動設備執行以下操作：
◆ 導航到Web瀏覽器并啟動。
◆ 瀏覽針對移動設備進行了優化的網頁。如果找不到針對移動設備進行了優化的網站，可以使用移動搜索引擎進行搜索，可供選用的移動搜索引擎包括Google (http://google.com)、Yahoo!(http://yahoo.com)或Bing(http://bing.com)等。接下來，在移動Web搜索結果類別中查找移動Web頁面的鏈接。
◆ 瀏覽桌面網頁。
◆ 使用某種移動搜索引擎搜索附近的餐館，查詢餐館的電話號碼，然后查詢從您當前所在位置到餐館的行車路線。
記錄下您在移動設備上瀏覽Web并使用各種功能時的體驗，然后思考下面的問題：
1. 在手機上找到Web瀏覽器的難易程度如何？完成啟動瀏覽器的操作總共經過多少次按鍵？
2. 是否可以在手機上查看移動網頁？這些網頁是否可用？原因是什么？
3. 是否可以在手機上查看桌面網頁？這些網頁是否可用？原因是什么？
4. 桌面網頁是以適應視圖顯示，還是以代碼轉換視圖顯示？這種網頁視圖對瀏覽體驗產生什么影響？
5. 您選用的是哪種移動搜索引擎？原因是什么？是否可以輕松地區分針對Web優化和針對移動設備優化的Web搜索結果？
6. 在手機上搜索附近的餐館的難易程度如何？是否可以通過點擊電話號碼開始呼叫？查詢到的行車路線是否可行、準確？
最后，確保本練習中所使用的每個移動設備都有數據計劃，以允許瀏覽公共Internet網絡。
1.7 代碼示例
本節中涉及的代碼和標記是使用PHP 5通過Eclipse PDT在Windows臺式計算機上編寫的。代碼在Linux、Apache、MySQL和PHP(LAMP)環境中托管。本書中示例代碼的主題是一個虛構的新鮮農產品市場，稱為Sunset Farmers’ Market。
可以從http://learnthemobileweb.com/books/或者http://www.tupwk.com.cn/downpage上找到本書中的代碼示例、勘誤表和其他信息。也可以在移動設備上瀏覽http://learnto.mobi/books/以在移動瀏覽器中查看代碼示例。
1.8 小結
本章介紹了桌面Web和移動Web之間的基本區別。移動設備一般都外形小巧，而移動用戶往往具有目標導向性，從而有必要開發面向移動設備和移動用戶的專用移動標記語言。此外，介紹了一些用于移動Web的標記語言和腳本語言，在此過程中，還提到了一些非主流的語言，但僅僅是為了說明其歷史意義，并無其他用意。作者對移動生態系統進行了調查研究，并介紹了一些移動行業組織和標準機構。
【編輯推薦】
