目錄：

第一章 HTML 5 的技術(shù)要點... 3

1. 地理位置API 3

1.1 簡介：... 3

1.2 獲取地理位置的方式及其優(yōu)缺點：... 3

1.3 地理位置獲取流程：... 3

1.4 瀏覽器支持的情況：... 3

1.5 瀏覽器支持的檢查方法：... 3

1.6 位置請求方式：... 4

1.6.1 單次請求... 4

1.6.2 重復(fù)請求... 5

2. HTML5 離線功能... 5

2.1 簡介：... 5

2.1.1 離線資源緩存：... 5

2.1.2 在線狀態(tài)檢測：... 5

2.1.3 本地數(shù)據(jù)存儲（Web Sotrage API）：... 5

2.2 瀏覽器支持的情況：... 6

3. Audio和Video標簽... 6

3.1 各瀏覽器對編碼格式的支持：... 6

3.2 瀏覽器支持的檢查方法：... 6

3.3 標簽使用方法：... 6

4. WebSocket API 7

4.1 簡介：... 7

4.2 瀏覽器支持的情況：... 7

4.3 瀏覽器支持的檢查方法：... 8

5. 跨文檔消息機制（Cross Document Messaging）... 8

5.1 簡介：... 8

5.2 瀏覽器的支持情況：... 8

5.3 瀏覽器支持的情況：... 8

6. XMLHttpRequest Level 2. 8

6.1 簡介：... 8

6.2 瀏覽器支持情況：... 9

6.3 瀏覽器支持的檢查方法：... 9

7. Web Worker API 9

7.1 簡介：... 9

7.2 瀏覽器支持的檢查方法：... 9

8. 其他HTML5支持的特性（部分未廣泛支持）... 10

9. 總結(jié)... 10

第二章 jQuery Mobile. 10

1. 四大主流移動Web開發(fā)框架... 10

1.1 iUI: 10

1.2 jQTouch: 10

1.3 Sencha Touch：... 10

1.4 jQuery Mobile: 11

2.使用 jQuery Mobile. 11

2.1 簡介：... 11

2.2 整合jQuery Moblie + Google Maps API v3的界面... 12

提綱：

1. Web App 開發(fā)之：HTML 5 技術(shù)要點 和 CSS 3 特性

2. Web App 開發(fā)之：CSS 3 特性

3. Web App 開發(fā)之：移動Web開發(fā)框架（jQuery Mobile）

第一章 HTML 5 的技術(shù)要點

1. 地理位置API

1.1 簡介：

HTML5通過Geolocation API來支持檢測用戶位置。根據(jù)你的需求它提供了單次的位置接收以及持續(xù)的位置接收。

1.2 獲取地理位置的方式及其優(yōu)缺點：

1、ip地址

2、GPS

3、WiFi基站的mac地址。（連接位置已知的公共WiFi的時候，通過Mac地址識別WiFi接入點，從而定位)

4、 GSM或CDMA基站

1.3 地理位置獲取流程：

1、用戶打開需要獲取地理位置的web應(yīng)用。

2、應(yīng)用向瀏覽器請求地理位置，瀏覽器彈出詢問窗口，詢問用戶是否共享地理位置。

3、假設(shè)用戶允許，瀏覽器從設(shè)別查詢相關(guān)信息。

4、瀏覽器將相關(guān)信息發(fā)送到一個信任的位置服務(wù)器，服務(wù)器返回具體的地理位置。

1.4 瀏覽器支持的情況：

當前版本的 Chrome、Firefox、Opera、Safari都支持，但IE9還不支持。

1.5 瀏覽器支持的檢查方法：

function loadDemo() {
if(navigator.geolocation) {
//supported

} else {
//not supported
}
}

1.6 位置請求方式：

1.6.1 單次請求

navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);

回調(diào)函數(shù)updateLocation接受一個對象參數(shù)，表示當前的地理位置，它有如下屬性：

latitude——緯度
longitude——精度
accuracy——精確度，單位米
altitude——高度，單位米
altitudeAccuracy——高度的精確地，單位米
heading—運動的方向，相對于正北方向的角度
speed——運動的速度（假設(shè)你在地平線上運動），單位米/秒

回調(diào)函數(shù)handleLocationError接受錯誤對象，error.code是如下錯誤號。

UNKNOWN_ERROR (error code 0) —— 錯誤不在如下三種之內(nèi)，你可以使用error.message獲取錯誤詳細信息。
PERMISSION_DENIED (error code 1)—— 用不選擇不共享地理位置
POSITION_UNAVAILABLE (error code 2) ——無法獲取當前位置
TIMEOUT (error code 3) ——在指定時間無法獲取位置會觸發(fā)此錯誤。

第三個參數(shù)options是可選參數(shù)，屬性如下：

enableHighAccuracy——指示瀏覽器獲取高精度的位置，默認為false。當開啟后，可能沒有任何影響，也可能使瀏覽器花費更長的時間獲取更精確的位置數(shù)據(jù)。
timeout——指定獲取地理位置的超時時間，默認不限時。單位為毫秒。
maximumAge——最長有效期，在重復(fù)獲取地理位置時，此參數(shù)指定多久再次獲取位置。默認為0，表示瀏覽器需要立刻重新計算位置。

參數(shù)使用的例子如下：

navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,

{timeout:10000});

1.6.2 重復(fù)請求

navigator.geolocation.watchPosition(updateLocation, handleLocationError);
使用 watchPosition可以持續(xù)獲取地理位置，瀏覽器或多次調(diào)用updateLocation函數(shù)以便傳遞最新的位置。該函數(shù)返回一個watchID，使用navigator.geolocation.clearWatch(watchId)可以清除此次回調(diào)，使用不帶參數(shù)的navigator.geolocation.clearWatch()清除說有watchPosition。

2. HTML5 離線功能

2.1 簡介：

在開發(fā)支持離線的 Web 應(yīng)用程序時，開發(fā)者通常需要使用以下三個方面的功能：

2.1.1 離線資源緩存：

需要一種方式來指明應(yīng)用程序離線工作時所需的資源文件。這樣，瀏覽器才能在在線狀態(tài)時，把這些文件緩存到本地。此后，當用戶離線訪問應(yīng)用程序時，這些資源文件會自動加載，從而讓用戶正常使用。HTML5 中，通過 cache manifest 文件指明需要緩存的資源，并支持自動和手動兩種緩存更新方式。

2.1.2 在線狀態(tài)檢測：

開發(fā)者需要知道瀏覽器是否在線，這樣才能夠針對在線或離線的狀態(tài)，做出對應(yīng)的處理。在 HTML5 中，提供了兩種檢測當前網(wǎng)絡(luò)是否在線的方式。

2.1.3 本地數(shù)據(jù)存儲（Web Sotrage API）：

離線時，需要能夠把數(shù)據(jù)存儲到本地，以便在線時同步到服務(wù)器上。為了滿足不同的存儲需求，HTML5 提供了 DOM Storage 和 Web SQL Database 兩種存儲機制。前者提供了易用的 key/value 對存儲方式，而后者提供了基本的關(guān)系數(shù)據(jù)庫存儲功能。

詳情請參考：http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/（使用 HTML5 開發(fā)離線應(yīng)用）

2.2 瀏覽器支持的情況：

瀏覽器支持情況：各大主流瀏覽器都已經(jīng)實現(xiàn)了其中的很多功能。

3. Audio和Video標簽

3.1 各瀏覽器對編碼格式的支持：

兩個標簽的實際使用，請參考w3school的教程。

http://www.w3school.com.cn/html5/html5_audio.asp
http://www.w3school.com.cn/html5/html5_video.asp

3.2 瀏覽器支持的檢查方法：

var hasVideo = !!(document.createElement(‘video’).canPlayType);

3.3 標簽使用方法：

<video src=”video.ogg”>

<object data=”videoplayer.swf” type=”application/x-shockwave-flash”>

<param name=”movie” value=”video.swf”/>

</object>

</video>

如果瀏覽器不支持HTML5的瀏覽器會載入flash標簽，支持的則會優(yōu)先選擇HTML5的video標簽。但這樣必須準備兩套視頻格式了。

同樣對于audio元素，不同的瀏覽器支持不同的格式，可以提供兩種不同的格式供瀏覽器選擇。

<audio controls>

<source src=”johann_sebastian_bach_air.ogg”>

<source src=”johann_sebastian_bach_air.mp3″>

An audio clip from Johann Sebastian Bach.

</audio>

4. WebSocket API

4.1 簡介：

WebSocket API，瀏覽器和服務(wù)器只需要要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。在此WebSocket 協(xié)議中，為我們實現(xiàn)即使服務(wù)帶來了兩大好處：

1. Header

互相溝通的Header是很小的-大概只有 2 Bytes

2. Server Push

服務(wù)器可以主動傳送數(shù)據(jù)給客戶端

詳細信息請查看：http://zh./zh-cn/WebSocket

4.2 瀏覽器支持的情況：

Chrome 4.0 supports Websockets.

Firefox 4.0 beta supports WebSockets.

Opera 11 (or 10.70) alpha also

Safari 5.0.2 supports them too

For other browsers it's not so clear.

4.3 瀏覽器支持的檢查方法：

function loadDemo() {

if (window.WebSocket) {

//support HTML5 WebSocket

} else {

//not support HTML5 WebSocket

}

}

5. 跨文檔消息機制（Cross Document Messaging）

5.1 簡介：

PostMessage API 提供了跨越frame、tabs或windows通信的能力。

5.2 瀏覽器的支持情況：

5.3 瀏覽器支持的情況：

if (typeof window.postMessage === “undefined”) {
// postMessage not supported in this browser
}

6. XMLHttpRequest Level 2

6.1 簡介：

HTML5中定義了XMLHttpRequest Level 2，它有兩方面的增強：跨域通信，通信進度通知(progress events)

6.2 瀏覽器支持情況：

6.3 瀏覽器支持的檢查方法：

var xhr = new XMLHttpRequest()

if (typeof xhr.withCredentials === undefined) {

//support HTML5 cross-origin XMLHttpRequest

} else {

//not support HTML5 cross-origin XMLHttpRequest

}

7. Web Worker API

7.1 簡介：

Web Worker可以在單獨的線程中JS代碼，但由于瀏覽器的特性，WebWorker無法訪問dom，只能通過特定的事件和postMessage API和主線程通信。Web Worker可以使用timer API，在一個Worker中也可以啟動子Worker。 WebWorder非常適合運算密集型的操作。

7.2 瀏覽器支持的檢查方法：

function loadDemo() {
if (typeof(Worker) !== “undefined”) {
//support HTML5 Web Workers”;
}
}

8. 其他HTML5支持的特性（部分未廣泛支持）

Canvas、表單API、WebGL、3D Shaders（3D陰影）、Devices標簽、Audio Data API、針對觸摸屏設(shè)備的事件、點對點網(wǎng)絡(luò)通信

9. 總結(jié)

Html 5 的這些新特性對我們創(chuàng)建豐富高效的 web 應(yīng)用提供了很好的平臺。我們可以嘗試使用一些對我們項目有用的功能特性，走在 web 編程技術(shù)的最前沿。

第二章 CSS 3

CSS 3 的新特性一覽可以參考文章：

http://www./tech/web/2009/6930.asp

第三章 jQuery Mobile

1. 四大主流移動Web開發(fā)框架

1.1 iUI:

它是一個javascript和css庫，用于在網(wǎng)頁中模擬iphone的外觀和感覺。雖然是專為iphone設(shè)計的UI,但在android上90%以上的功能是完全可以使用的，因為android和iphone一樣，都是基于webkit瀏覽器的系統(tǒng)。

官方：http://code.google.com/p/iui/

1.2 jQTouch:

是一個用于移動web開發(fā)的jquery插件，支持iphone,ipod touch和其它一些基于webkit的系統(tǒng)。

官方：http://www./

1.3 Sencha Touch：

可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的 WEB標準，全面兼容Android和Apple iOS設(shè)備。

官方：http://www./products/touch/

1.4 jQuery Mobile:

也就是jquery針對移動設(shè)備的版本，上個月發(fā)布了jQuery Mobile Alpha 3。主要包括針對移動設(shè)備的 jquery core 和 jquery UI 。 支持目前主流的移動操作系統(tǒng)（android,iphone,Symbian,Blackbery,webOS等）。

選擇哪個框架？

目前最主流的是jQuery Mobile 和 Sencha Touch 2個框架，關(guān)于兩者的區(qū)別引用國外論壇的一個簡單評價：

Sencha Touch is an application framework (you create your interface programmatically through Javascript) while jQuery Mobile is more of a mobile enhancement library (you write regular HTML for your content, then add jQuery mobile for transitions/animations). jQuery Mobile has an easier learning curve, but Sencha Touch can better simulate "native" apps.

主要意思是說 jQuery Mobile 更輕量級以及更簡單的學習曲線。

綜合來看選擇 jQuery Mobile 對于我們快速創(chuàng)建應(yīng)用更加方便。

2. 選擇 jQuery Mobile

2.1 簡介：

jQuery Mobile 給移動設(shè)備 Web 應(yīng)用提供了一個 jQuery 核心庫，并且提供了一個統(tǒng)一的 UI 框架。 jQuery Mobile 的其他優(yōu)勢有：

1. 基于 jQuery 核心庫;兼容所有主流移動設(shè)備

2. 小巧(12KB)

3. 基于 HTML5/CSS3

4. 可用性和可訪問性

5. 以及強大的 UI 框架

6. 使用 jQuery Mobile 搭建針對移動設(shè)備的 Web 應(yīng)用, 開發(fā)者只需要負責 HTML 頁面即可, 并且 jQuery Mobile 對 HTML 無侵害, 完全使用符合標準的 HTML5.

2.2 整合jQuery Moblie + Google Maps API v3的界面

1). 在android上的顯示效果：

2). 在iphone上的顯示效果：

從界面可以看出，使用jQuery Mobile 和 HTML 5 CSS 3技術(shù)開發(fā)出來的web程序界面效果和手機本地應(yīng)用程序很像。

而且在不同平臺下，只要手機瀏覽器支持HTML5，jQuery Mobile UI 框架都能幫我們做到兼容，免去很多適配的麻煩。