內容簡介
《移動Web開發從入門到精通》以零基礎講解為宗旨,用實例引導讀者學習,深入淺出地介紹了移動Web開發的相關知識和實戰技能。
《移動Web開發從入門到精通》第 1篇【基礎知識】主要講解網頁和網站製作基礎、搭建移動Web開發環境、打造移動Web應用程式等;第 2篇【核心技術】主要講解與移動Web開發相關的核心技術和工具,包括HTML、HTML5、CSS、JavaScript、jQuery Mobile、PhoneGap等,還通過實例介紹了移動設備網頁的開發方法;第3篇【知識進階】主要講解WebSockets實時數據處理、Web Workers通信處理、頁面數據離線處理、繪製三維圖形圖像、使用Geolocation API等;第4篇【典型套用】主要介紹了jQTouch框架和Sencha Touch框架;第5篇【綜合實戰】通過實戰案例,介紹了完整的移動Web程式開發流程。
《移動Web開發從入門到精通》所附DVD光碟中包含了與圖書內容同步的教學錄像。此外,還贈送了大量相關學習資料,以便讀者擴展學習。
《移動Web開發從入門到精通》適合任何想學習移動Web開發的讀者,無論讀者是否從事計算機相關行業,是否接觸過移動Web開發,均可通過學習快速掌握移動Web開發的方法和技巧。
圖書目錄
第 0章 移動Web開發學習指南 1
本章教學錄像:23分鐘
移動Web程式是指能夠在智慧型手機、平板電腦、電子書閱讀器等可移動設備中完整運行的Web程式。和傳統桌面式Web程式相比,移動Web要求程式更加簡單並且高效,而且具備傳統桌面Web程式所沒有的硬體優勢,例如GPS定位、感測器套用等。本章簡要介紹開發移動Web應用程式的基礎知識,為讀者步入本書後面知識的學習打下基礎。
0.1 Web標準開發技術 2
0.1.1 結構化標準語言 2
0.1.2 表現性標準語言 2
0.1.3 行為標準 2
0.2 移動Web開發概覽 3
0.2.1 主流移動平台介紹 3
0.2.2 移動Web的特點 4
0.2.3 設計移動網站時需要考慮的問題 5
0.2.4 主流移動設備螢幕的解析度 5
0.2.5 使用標準的HTML、CSS和JavaScript技術 6
0.3 移動Web開發必 備技術 7
0.4 移動Web開發學習路線圖 8
第 1篇 基礎知識
第 1章 網頁和網站製作基礎 10
本章教學錄像:24分鐘
Web站點是專業人員對各種站點的統稱,普通瀏覽用戶通常將這些站點稱為網站。網際網路中存在形形色色的站點,為瀏覽用戶提供了海量的信息。一個獨立的站點是由一個或多個網頁構成的,網頁和網站是構成Web站點的最核心元素。本章對網頁和網站的基礎知識進行概述,為讀者步入本書後面知識的學習打下基礎。
1.1 認識網頁和網站 11
1.1.1 何謂網頁 11
1.1.2 何謂網站 11
1.2 網頁的基本構成元素 12
1.3 製作網頁的基本流程 14
1.4 製作網站的基本流程 15
1.4.1 網站發展趨勢 15
1.4.2 網站製作流程 15
1.4.3 網站設計原則 17
1.5 高手點撥 17
1.6 實戰練習 18
第 2章 搭建移動Web開發環境 19
本章教學錄像:21分鐘
“工欲善其事,必先利其器”出自《論語》,意思是要想高效地完成一件事,需要有合適的工具。對於移動Web開發人員來說,開發工具同樣到關重要。作為一項新興技術,在進行開發前首先要搭建一個對應的開發環境。本章詳細講解搭建移動Web開發環境的基礎知識,為讀者步入本書後面知識的學習打下基礎。
2.1 安裝Dreamweaver CS6 20
2.2 安裝jQuery Mobile 25
2.2.1 下載jQuery Mobile外掛程式 25
2.2.2 使用URL方式載入外掛程式檔案 26
2.3 搭建PhoneGap開發環境 27
2.3.1 準備工作 27
2.3.2 獲得PhoneGap開發包 27
2.4 搭建測試環境 32
2.5 高手點撥 34
2.6 實戰練習 34
第 3章 打造移動Web應用程式 35
本章教學錄像:35分鐘
在本書前面的內容中,已經詳細講解了搭建移動Web開發環境的方法。本章重點講解在Android和iOS系統中創建移動Web程式的方法,為讀者步入本書後面知識的學習打下了基礎。
3.1 創建通用網站的實現流程 36
3.1.1 確定應用程式類型 36
3.1.2 使用CSS改善HTML外觀 36
3.1.3 加入移動meta標籤 38
3.2 將站點升級到HTML5 39
3.2.1 確定何時升級和升級的具體方式 40
3.2.2 升級到HTML5的步驟 41
3.2.3 將HTML5特性作為額外內容添加到網站 41
3.2.4 使用HTML5為移動Web提供的服務 42
3.3 將Web程式遷移到移動設備 42
3.3.1 選擇Web編輯器 43
3.3.2 測試應用程式 43
3.3.3 移動網站的內容特點 44
3.3.4 為移動設備調整可視化的設計 44
3.3.5 HTML5及CSS3檢測 45
3.4 搭建Android開發環境 46
3.4.1 安裝Android SDK的系統要求 46
3.4.2 安裝JDK 47
3.4.3 獲取並安裝Eclipse和Android SDK 51
3.4.4 安裝ADT 54
3.4.5 設定Android SDK Home 57
3.4.6 驗證開發環境 58
3.4.7 創建並管理Android虛擬設備(AVD) 59
3.4.8 啟動AVD模擬器 61
3.5 搭建iOS開發環境 62
3.5.1 開發前的準備——加入iOS開發團隊 63
3.5.2 安裝Xcode 65
3.5.3 Xcode介紹 65
3.5.4 下載並安裝Xcode 65
3.5.5 創建一個Xcode項目並啟動模擬器 69
3.6 高手點撥 73
3.7 實戰練習 74
第 2篇 核心技術
第 4章 HTML基礎 76
本章教學錄像:35分鐘
HTML即超文本標記語言,是HyperText Mark-up Language的縮寫。HTML按一定格式來標記普通文本檔案、圖像、表格和表單等元素,使文本及各種對象能夠在用戶的瀏覽器中,顯示出不同風格的標記性語言,從而實現各種頁面元素的組合。通過使用Dreamweaver CS6,可以更加快捷地生成HTML代碼,提高了設計網頁的效率。本章簡要講解HTML標記語言的基礎知識。
4.1 HTML初步 77
4.1.1 HTML概述 77
4.1.2 HTML基本結構 77
4.2 HTML標記詳解 79
4.2.1 標題文字標記 79
4.2.2 文本文字標記 80
4.2.3 字型設定標記 82
4.2.4 段落標記
83
4.2.5 換行標記
84
4.2.6 超級連結標記 85
4.2.7 設定背景圖片標記 86
4.2.8 插入圖片標記 87
4.2.9 列表標記 89
4.2.10 表格標記
、、
和
92
4.3 綜合套用——製作一個簡單網頁 94
4.4 高手點撥 97
4.5 實戰練習 98
第 5章 HTML5 99
本章教學錄像:36分鐘
HTML5 是Web標準的巨大飛躍。和以前的版本不同,HTML5 並非僅僅用來表示 Web 內容,它的使命是將 Web 帶入一個成熟的套用平台。在這個平台上,視頻、音頻、圖像、動畫以及同電腦的互動都被標準化。儘管 HTML5 的實現還有很長的路要走,但是HTML5正在改變著Web。本章詳細講解HTML5的基礎知識,特別是新特性方面的知識,為讀者步入本書後面知識的學習打下基礎。
5.1 把握未來的風向標 100
5.1.1 漫漫發展歷程 100
5.1.2 無與倫 比的體驗 100
5.2 用HTML5設計移動網站前的準備 101
5.2.1 為移動網站準備專用的域名 101
5.2.2 準備測試環境 101
5.3 第 一段HTML5程式 102
5.4 設定網頁頭部元素 103
5.4.1 設定文檔類型 103
5.4.2 設定所有連結規定默認地址或默認目標 104
5.4.3 連結標籤 105
5.4.4 設定有關頁面的元信息 107
5.4.5 定義客戶端腳本 107
5.4.6 定義HTML文檔的樣式信息 108
5.4.7 設定頁面標題 109
5.5 設定頁面正文 110
5.6 注釋 112
5.7 和頁面結構相關的新元素 113
5.7.1 定義區段的標籤 113
5.7.2 定義獨立內容的標籤 114
5.7.3 定義導航連結標籤 115
5.7.4 定義其所處內容之外的內容 116
5.7.5 定義頁腳內容的標籤 116
5.8 在網頁中顯示聯繫信息 117
5.9 自動隱藏或顯示網頁中的文字 118
5.10 綜合套用——自動檢測輸入的拼音是否正確 120
5.11 高手點撥 122
5.12 實戰練習 122
第 6章 CSS基礎 123
本章教學錄像:40分鐘
CSS(層疊樣式表)是Cascading Style Sheet的縮寫,簡稱為樣式表,是W3C組織制定的、控制頁面顯示樣式的標記語言。CSS的最新版本是CSS 3.0,這是現在網頁所遵循的通用標準。本章將詳細講解CSS技術的基礎知識。
6.1 體驗CSS的功能 124
6.2 基本語法 125
6.3 使用選擇符 126
6.3.1 選擇符的種類 126
6.3.2 使用ID選擇符設定文字顏色 129
6.4 CSS屬性 129
6.5 幾個常用值 131
6.5.1 顏色單位 131
6.5.2 長度單位 133
6.5.3 百分比值 134
6.5.4 URL統一資源定位符 134
6.5.5 URL默認值 135
6.6 在網頁中使用CSS 135
6.6.1 頁面調用CSS的方式 135
6.6.2 通用優先權 138
6.6.3 類型選擇符和類選擇符 139
6.6.4 ID選擇符 140
6.6.5 最近優先原則 141
6.7 CSS的編碼規範 143
6.7.1 書寫規範 143
6.7.2 命名規範 144
6.8 CSS調試 145
6.8.1 設計軟體調試 145
6.8.2 繼承性和默認值帶來的問題 145
6.9 綜合套用——實現精緻、符合標準的表單頁面 147
6.10 高手點撥 149
6.11 實戰練習 150
第 7章 JavaScript腳本語言 151
本章教學錄像:48分鐘
頁面通過腳本程式可以實現用戶數據的傳輸和動態互動。本章簡要介紹JavaScript技術的基礎知識,並通過實例來介紹其具體的使用流程,為讀者步入本書後面知識的學習打下堅實的基礎。
7.1 JavaScript簡介 152
7.1.1 JavaScript格式 152
7.1.2 一個典型的JavaScript檔案 152
7.2 數據類型 154
7.2.1 數據類型概述 154
7.2.2 JavaScript常量 154
7.2.3 JavaScript變數 155
7.3 表達式和運算符 156
7.3.1 JavaScript表達式 156
7.3.2 JavaScript運算符 156
7.4 JavaScript循環語句 160
7.4.1 if條件語句 160
7.4.2 for循環語句 163
7.4.3 while循環語句 165
7.4.4 do…while循環語句 166
7.4.5 break控制 168
7.4.6 switch循環語句 168
7.5 JavaScript函式 169
7.5.1 函式的構成 169
7.5.2 JavaScript常用函式 170
7.6 JavaScript對象 172
7.6.1 對象的基礎知識 172
7.6.2 JavaScript常用對象和方法 175
7.7 JavaScript事件 177
7.7.1 JavaScript常用事件 178
7.7.2 事件處理程式 179
7.8 JavaScript視窗對象 180
7.8.1 視窗對象 180
7.8.2 視窗對象的事件驅動 181
7.8.3 視窗對象的屬性 181
7.8.4 視窗對象的方法 181
7.8.5 JavaScript視窗對象的套用 182
7.9 JavaScript框架對象 184
7.10 綜合套用——實現一個動態選單樣式 186
7.11 高手點撥 189
7.12 實戰練習 190
第8章 使用jQuery Mobile框架 191
本章教學錄像:43分鐘
jQuery Mobile 不僅給主流移動平台帶來jQuery核心庫,而且擁有一個完整統一的jQuery移動UI框架,支持全球主流的移動平台。本章詳細講解jQuery Mobile的基礎知識,為讀者步入本書後面知識的學習打下基礎。
8.1 jQuery Mobile簡介 192
8.1.1 jQuery的優勢 192
8.1.2 jQuery Mobile的特點 192
8.1.3 jQuery Mobile對瀏覽器的支持 193
8.1.4 jQuery Mobile對移動平台的支持 193
8.2 jQuery Mobile的四大優勢 194
8.2.1 跨所有移動平台的統一UI 194
8.2.2 簡化的標記驅動的開發 195
8.2.3 漸進式增強 195
8.2.4 回響式設計 195
8.3 jQuery Mobile語法基礎 196
8.3.1 使用基本框架 196
8.3.2 多頁面模板 200
8.3.3 設定內部頁面的頁面標題 202
8.3.4 設定外部頁面連結 204
8.3.5 實現頁面後退連結 204
8.3.6 使用Ajax修飾導航 205
8.3.7 使用函式changePage( ) 209
8.4 預載入 210
8.5 頁面快取 212
8.6 頁面腳本 214
8.7 綜合套用——實現頁面跳轉 216
8.8 高手點撥 218
8.9 實戰練習 218
第9章 使用PhoneGap 219
本章教學錄像:1小時23分鐘
PhoneGap基於HTML、CSS和JavaScript技術,是一個創建跨平台移動應用程式的快速開發平台。通過PhoneGap,開 發者能夠利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智慧型手機的核心功能,包括地理定位、加速器、聯繫人、聲音和振動等。此外PhoneGap擁有豐富的外掛程式,可以以此擴展無限的功能。本章詳細講解PhoneGap的基礎知識,為讀者步入本書後面知識的學習打下基礎。
9.1 PhoneGap基礎 220
9.1.1 產生背景 220
9.1.2 PhoneGap的發展歷程 220
9.1.3 使用PhoneGap進行移動Web開發的步驟 221
9.2 PhoneGap API詳解 222
9.2.1 套用API 223
9.2.2 通知API 224
9.2.3 設備API 226
9.2.4 網路連線API 227
9.2.5 加速計API 230
9.2.6 地理位置API 232
9.2.7 指南針API 235
9.2.8 照相機API 238
9.2.9 採集API 242
9.2.10 錄音API 244
9.3 綜合套用——構造一個播放器 245
9.4 高手點撥 248
9.5 實戰練習 248
第 10 章 開發移動設備網頁 249
本章教學錄像:22分鐘
人們用手機這個通信工具來上網是“大勢所趨”,所以我們很有必要專門開發能在手機上瀏覽的網頁,即能在手機上瀏覽的網站。本章詳細講解通過CSS設定出符合Android標準的HTML網頁的方法。
10.1 編寫第 一個適用於Android系統的網頁 250
10.1.1 控制頁面的縮放 254
10.1.2 添加CSS樣式 254
10.1.3 添加JavaScript 257
10.2 添加Ajax特效 262
10.3 綜合套用——打造一個iOS+jQuery Mobile+ PhoneGap程式 269
10.4 綜合套用——打造一個Android+jQuery Mobile+PhoneGap程式 271
10.4.1 建立一個基於Web的Android套用 271
10.4.2 添加Web內容 273
10.4.3 利用PhoneGap封裝成移動Web套用 274
10.4.4 修改許可權檔案 277
10.5 高手點撥 278
10.6 實戰練習 278
第3篇 知識進階
第 11章 Web Sockets實時數據處理 280
本章教學錄像:35分鐘
Web Sockets是HTML5中的一種Web套用通信機制,能夠在客戶端與伺服器端之間進行非HTTP的通信。本章詳細介紹在移動Web頁面中使用Web Sockets API實現通信的方法,為讀者步入本書後面知識的學習打下基礎。
11.1 安裝jWebSocket伺服器 281
11.2 實現跨文檔傳輸數據 281
11.3 使用WebSocket傳送數據 286
11.3.1 使用Web Sockets API的方法 286
11.3.2 在網頁中傳送數據 287
11.4 處理JSON對象 289
11.5 jWebSocket框架 293
11.5.1 jWebSocket框架的構成 293
11.5.2 創建jWebSocket伺服器端的偵聽器 293
11.6 jWebSocket令牌詳解 300
11.6.1 令牌的格式 301
11.6.2 令牌的常用術語 301
11.6.3 系統令牌詳解 302
11.7 綜合套用——使用jWebSocketTest框架進行通信 308
11.8 高手點撥 311
11.9 實戰練習 312
第 12章 Web Workers通信處理 313
本章教學錄像:26分鐘
在移動Web頁面開發套用中,使用Worker可以將前台中的JavaScript代碼分割成若干個分散的代碼塊,分別由不同的後台執行緒負責執行,這樣可以避免由於前台單執行緒執行緩慢出現用戶等待的情況。本章詳細介紹使用Worker執行緒實現前台數據和後台數據互動的過程,並通過具體實例來演示具體實現流程。
12.1 Web Workers API基礎 314
12.1.1 使用HTML5 Web Workers API 314
12.1.2 .js 檔案 314
12.1.3 與 Web Worker 進行雙向通信 315
12.2 Worker執行緒處理 317
12.2.1 使用Worker處理執行緒 318
12.2.2 使用執行緒傳遞JSON對象 321
12.2.3 使用執行緒嵌套互動數據 323
12.2.4 通過JSON傳送訊息 326
12.3 執行大計算量任務 327
12.3.1 創建Worker 328
12.3.2 使用Web Workers API執行大計算量任務 328
12.4 綜合套用——在後台運行耗時較長的運算 335
12.5 高手點撥 338
12.6 實戰練習 338
第 13章 頁面數據離線處理 339
本章教學錄像:32分鐘
在Web套用技術中,離線技術已經成為了最主要的套用之一,它確保了即使在離線的情況下,也可以正常實現數據互動功能。在HTML5中新增加了一個專用API,用於實現本地數據的快取,這個API使得開發離線套用成為可能。本章將詳細介紹在移動Web頁面中實現頁面數據離線處理的基本過程,為讀者步入本書後面知識的學習打下基礎。
13.1 離線套用基礎 340
13.1.1 manifest檔案詳解 340
13.1.2 配置IIS伺服器 341
13.1.3 開發離線應用程式 341
13.2 檢測本地快取的更新狀態 343
13.2.1 updateready事件 344
13.2.2 update方法 345
13.2.3 swapCache方法 348
13.2.4 可能觸發的其他事件 350
13.3 檢測線上狀態 352
13.3.1 使用onLine屬性 353
13.3.2 使用online事件和offline 事件 355
13.3.3 開發一個離線留言系統 357
13.4 綜合套用——開發一個離線式日曆提醒系統 360
13.5 高手點撥 364
13.6 實戰練習 364
第 14章 繪製三維圖形圖像 365
本章教學錄像:16分鐘
WebGL是一種3D繪圖示準,這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起,通過增加OpenGL ES 2.0的一個JavaScript綁定,WebGL可以為HTML5 Canvas提供硬體3D加速渲染,這樣Web開發人員就可以藉助系統顯示卡在瀏覽器里更流暢地展示3D場景和模型了。本章詳細講解使用WebGL在移動Web頁面套用中繪製三維圖形圖像的基礎知識。
14.1 WebGL基礎 366
14.1.1 發展歷程 366
14.1.2 WebGL 和 HTML5的關係 366
14.1.3 開發前的準備 367
14.2 使用WebGL 368
14.2.1 繪製三角形和矩形 368
14.2.2 繪製有顏色的三角形和矩形 373
14.2.3 繪製三維動畫 380
14.3 綜合套用——繪製一個三維物體 388
14.4 高手點撥 398
14.5 實戰練習 398
第 15 章 使用Geolocation API 399
本章教學錄像:21分鐘
Geolocation API用於將用戶當前的地理位置信息共享給信任的站點,因為在這個過程中會涉及用戶的隱私安全問題,所以當一個站點需要獲取用戶的當前地理位置時,瀏覽器會提示用戶是“允許”或“拒絕”。本章詳細講解在移動Web網頁中使用Geolocation API實現定位處理的方法,為讀者步入本書後面知識的學習打下基礎。
15.1 Geolocation API介紹 400
15.1.1 對瀏覽器的支持情況 400
15.1.2 使用Geolocation API 400
15.2 獲取當前地理位置 401
15.3 使用getCurrentPosition( )方法 405
15.4 在網頁中使用地圖 407
15.4.1 在網頁中調用地圖 407
15.4.2 在地圖中顯示當前位置 410
15.4.3 在網頁中居中顯示定位地圖 412
15.4.4 利用百度地圖實現定位 414
15.5 綜合套用——在彈出的對話框中顯示定位信息 416
15.6 高手點撥 419
15.7 實戰練習 420
第4篇 典型套用
第 16 章 使用jQTouch框架 422
本章教學錄像:12分鐘
jQTouch 是一個 jQuery 外掛程式,主要用於手機的 Webkit 瀏覽器,是實現動畫、列表導航、默認套用樣式等各種常見UI效果的 JavaScript 庫。本章詳細講解在移動Web網頁中使用jQTouch的方法,為讀者步入本書後面知識的學習打下基礎。
16.1 jQTouch基礎 423
16.1.1 jQTouch的特點 423
16.1.2 體驗jQTouch程式 423
16.2 開始使用jQTouch 428
16.2.1 引入一段jQTouch代碼 428
16.2.2 使用 jQuery 生成動態數據 430
16.2.3 使用jQTouch創建動態UI 430
16.3 綜合套用——使用jQTouch框架開發動畫網頁 435
16.4 高手點撥 443
16.5 實戰練習 444
第 17章 使用Sencha Touch框架 445
本章教學錄像:19分鐘
Sencha Touch是一個套用於手持移動設備的前端JavaScript框架,與ExtJS是同一個門派的。Sencha Touch框架的功能強大,效果炫麗,能夠快速開發出適應於在Android和iOS等移動系統中運行的Web頁面。本章詳細講解在移動Web網頁中使用Sencha Touch框架的方法,為讀者步入本書後面知識的學習打下基礎。
17.1 Sencha Touch基礎 446
17.1.1 Sencha Touch簡介 446
17.1.2 Sencha Touch的特性 447
17.1.3 Sencha Touch的優勢 447
17.2 搭建Sencha Touch開發環境 448
17.2.1 獲取Sencha Touch 448
17.2.2 搭建Eclipse+Sencha Touch開發環境 450
17.2.3 調試Sencha Touch程式 455
17.3 Sencha Touch界面布局 456
17.3.1 Hbox布局(水平布局) 456
17.3.2 VBox布局(垂直布局) 457
17.3.3 Card布局(卡片布局) 458
17.3.4 Fit布局(填充布局) 459
17.3.5 Docking(停靠) 460
17.4 綜合套用——實現一個手機通訊錄 462
17.5 高手點撥 472
17.6 實戰練習 472
第5篇 綜合實戰
第 18章 記事本系統 474
本章教學錄像:13分鐘
經過本書前面內容的學習,相信讀者已經掌握了移動Web開發技術的基本知識。本章綜合運用前面所學的知識,結合使用HTML5、CSS3和jQuery Mobile技術開發一個能夠在移動設備中運行的記事本管理系統。希望讀者認真閱讀本章內容,仔細品味HTML5+jQuery Mobile+CSS組合在移動Web開發領域的真諦。
18.1 系統功能分析 475
18.2 系統模組劃分 475
18.3 構建jQuery Mobile平台 476
18.4 頁面實現 476
18.4.1 實現系統首頁 476
18.4.2 實現記事本類別列表頁面 479
18.4.3 實現記事本列表頁面 481
18.4.4 實現記事本詳情和刪除頁面 483
18.4.5 實現記事本修改頁面 485
18.4.6 實現添加記事本頁面 487
18.5 系統樣式檔案 489
第 19章 Android版電話本管理系統 491
本章教學錄像:16分鐘
本章綜合運用前面所學的知識,結合CSS和JavaScript技術,開發一個在Android平台運行的電話本管理系統。希望讀者認真閱讀本章內容,仔細品味HTML5+jQuery Mobile+PhoneGap組合在移動Web開發領域的真諦,為步入以後的工作崗位打下堅實的基礎。
19.1 需求分析 492
19.1.1 產生背景 492
19.1.2 功能分析 492
19.2 創建Android工程 493
19.3 實現系統主界面 494
19.4 實現信息查詢模組 496
19.5 實現系統管理模組 498
19.6 實現信息添加模組 502
19.7 實現信息修改模組 505
19.8 實現信息刪除模組和更新模組 508