今天，HTML5在Web標(biāo)準(zhǔn)之爭(zhēng)中已經(jīng)勝出并被大多數(shù)瀏覽器所支持。體驗(yàn)HTML5帶給Web開發(fā)的便捷、快速和強(qiáng)大功能，是每一位Web開發(fā)和設(shè)計(jì)人員的當(dāng)務(wù)之急�！ �
《HTML5程序設(shè)計(jì)（第2版）》由舊金山HTML5用戶組創(chuàng)建人聯(lián)合另外2位資深Web開發(fā)專家共同打造，為讀者清晰解讀了HTML5規(guī)范的緣由、發(fā)展和現(xiàn)狀，全面展示了如何使用WebSocket、Geolocation、Web Storage、Canvas、SVG及音頻/視頻等前所未有的新特性構(gòu)建最流行、最強(qiáng)大的Web應(yīng)用，并以大量的示例涵蓋全部HTML5 API。
第2版進(jìn)行了全面的修訂，新增了針對(duì)HTML5視覺效果的SVG和針對(duì)用戶體驗(yàn)的拖放這兩部分內(nèi)容，將助讀者的Web設(shè)計(jì)和開發(fā)更上一層樓。
前 言
HTML5是全新的。事實(shí)上，它甚至還沒有完全成熟。如果你聽一些“壞脾氣”專家的介紹，他們會(huì)告訴你HTML5在未來10年甚至更久的時(shí)間里都不會(huì)完全成熟！
那么，為什么會(huì)有人認(rèn)為現(xiàn)在是時(shí)候編寫一本討論HTML5編程的書呢？原因很簡(jiǎn)單。對(duì)于希望自己的Web應(yīng)用程序能夠卓而不群的人，HTML5正是眾望所歸。本書作者致力于研究開發(fā)和講授HTML5技術(shù)已有兩年多，現(xiàn)在可以肯定地說，在實(shí)際Web應(yīng)用中新標(biāo)準(zhǔn)的采納程度正在以令人目眩的速度不斷加快。即使在編寫本書的過程中，我們都被迫不斷更新書中的瀏覽器支持表格，重新評(píng)估哪些技術(shù)又具備了使用條件。
面對(duì)自己正在使用的瀏覽器，大多數(shù)用戶并不真正了解其具備的功能有多強(qiáng)大。當(dāng)然，他們?cè)跒g覽器自動(dòng)更新后可能會(huì)發(fā)現(xiàn)一些細(xì)微的界面改變。但他們可能不知道，新版本的瀏覽器剛剛引入了可自由繪圖的canvas、實(shí)時(shí)網(wǎng)絡(luò)通信或其他一些潛在的功能升級(jí)。
本書的目標(biāo)是幫助開發(fā)者釋放HTML5的潛力。
本書讀者對(duì)象
本書針對(duì)熟悉JavaScript編程且有經(jīng)驗(yàn)的Web應(yīng)用程序開發(fā)者。也就是說，本書將不涉及Web開發(fā)的基礎(chǔ)知識(shí)。如果想了解Web編程的基礎(chǔ)知識(shí)，目前的資源已經(jīng)夠多了。如果讀者遇到了下面的情況，那么本書可以為你提供有用的見解和信息，這些見解和信息可能正是你在努力尋找的。
你有時(shí)會(huì)發(fā)現(xiàn)自己在想：“如果我的瀏覽器可以……”
你發(fā)現(xiàn)自己通過頁面的源代碼和開發(fā)工具來分析一個(gè)令人印象深刻的網(wǎng)站。
你喜歡查看最新瀏覽器的版本發(fā)布信息，了解其更新了什么功能。
你在尋找優(yōu)化或簡(jiǎn)化應(yīng)用程序的方法。
你想針對(duì)使用最新瀏覽器的用戶定制網(wǎng)站，以便盡可能提供最佳用戶體驗(yàn)。
如果上述任何一項(xiàng)跟你的情況吻合，那么這本書可能就很適合你。
雖然我們?cè)谶m當(dāng)情況下特意指出了瀏覽器支持的局限性，但目的并非要給出一個(gè)兼容舊瀏覽器且可無縫運(yùn)行的解決方案。經(jīng)驗(yàn)表明，瀏覽器更新?lián)Q代的速度一日千里，如果要獲取瀏覽器兼容解決方案方面的相關(guān)信息，本書不是最好的渠道。相反，我們專注于HTML5規(guī)范及其使用方法。兼容的解決方案可以在因特網(wǎng)上找到，而隨著時(shí)間的推移，這些解決方案也會(huì)漸漸被人遺忘。
本書內(nèi)容
本書的13章內(nèi)容涵蓋了從HTML5 API中挑選出來的適用面廣、功能強(qiáng)大的API。在某些情況下，為了更好地演示程序，我們需要用到前面章節(jié)已經(jīng)介紹過的功能。
第1章“HTML5概述”，從HTML版本的發(fā)展歷程說起，介紹了HTML規(guī)范過去和現(xiàn)在的版本情況，然后介紹了新的高級(jí)語義標(biāo)簽，以及一些根本性的改進(jìn)，同時(shí)還分析了HTML5背后的設(shè)計(jì)理念。了解這些對(duì)讀者是有益的。
第2章“Canvas API”、第3章“SVG”和第4章“音頻和視頻”，討論了新的可視化元素和媒體元素。在這三章中，集中討論如何在無插件和無服務(wù)器交互的情況下優(yōu)化用戶界面。
第5章“Geolocation API”介紹的是一個(gè)全新的功能。在此之前，它很難通過模擬方式實(shí)現(xiàn)，它賦予應(yīng)用程序確定用戶當(dāng)前位置的能力，并可以用來定制用戶體驗(yàn)。這里對(duì)隱私的保護(hù)也很重要，所以我們會(huì)介紹隱私保護(hù)的相關(guān)內(nèi)容。
第6章“Communication API”和第7章“WebSockets API”展示了HTML5提供的日益強(qiáng)大的通信能力。有了這兩個(gè)API，Web應(yīng)用不僅可以同其他網(wǎng)站進(jìn)行通信，而且還能以最簡(jiǎn)單的代碼和最小的網(wǎng)絡(luò)開銷進(jìn)行實(shí)時(shí)數(shù)據(jù)流的傳遞。這兩章中的技術(shù)將有助于開發(fā)人員簡(jiǎn)化目前網(wǎng)絡(luò)上部署的過于復(fù)雜的架構(gòu)。
第8章“Forms API”，參照這章介紹的內(nèi)容，開發(fā)人員通過細(xì)小的調(diào)整即可增加桌面Web應(yīng)用程序和移動(dòng)Web應(yīng)用程序的可用性。利用這一章介紹的其他新特性，則可以檢測(cè)大多數(shù)常見場(chǎng)景中的頁面輸入錯(cuò)誤。第9章詳細(xì)介紹了新的拖放API的功能，并展示了如何使用它們。
第10章“Web Workers API”、第11章“Web Storage API”和第12章“構(gòu)建離線Web應(yīng)用”，解決了應(yīng)用程序的內(nèi)部數(shù)據(jù)管道問題。在這三章中，開發(fā)人員會(huì)學(xué)到如何優(yōu)化現(xiàn)有系統(tǒng)來獲得更好的性能和更好的數(shù)據(jù)管理功能。
最后，第13章“HTML5未來展望”討論了一些可能會(huì)在HTML5中陸續(xù)出現(xiàn)的功能，這些功能可能讓大家垂涎已久了。
示例代碼和配套網(wǎng)站
本書中的示例代碼都可從Apress網(wǎng)站的Source Code部分找到。訪問www.apress.com，單擊Source Code，然后查找這本書的標(biāo)題即可。讀者可以從本書主頁上下載源代碼。此外，我們還建立了一個(gè)配套網(wǎng)站，地址為www.prohtml5.com，讀者也可以在此下載示例代碼和一些實(shí)用附加功能源碼 。
聯(lián)系作者
感謝購(gòu)買此書，我們希望你喜歡它，并把它當(dāng)做一個(gè)寶貴的資源。盡管已經(jīng)盡了最大努力，但我們知道一時(shí)疏忽就可能引發(fā)錯(cuò)誤，在此，我們?yōu)榭赡艿氖韬霰硎厩敢�。我們歡迎你對(duì)此書的內(nèi)容和源代碼發(fā)表意見和評(píng)論。你可以發(fā)送郵件至prohtml5@gmail.com來與我們?nèi)〉寐?lián)系。
Peter Lubbers，Kaazing技術(shù)交流資深總監(jiān)，舊金山HTML5用戶組創(chuàng)建人。作為HTML5和WebSocket的狂熱愛好者，Peter經(jīng)常在國(guó)際大會(huì)上發(fā)言，還在全球范圍內(nèi)開展HTML5的技術(shù)培訓(xùn)。在加盟Kaazing前，Peter在Oracle擔(dān)任了近十年的資深信息架構(gòu)師，獲得過兩項(xiàng)軟件專利。
第1章 HTML5概述
1.1 HTML5發(fā)展史
1.2 關(guān)于2022年的那個(gè)神話
1.3 誰在開發(fā)HTML5
1.4 新的認(rèn)識(shí)
1.4.1 兼容性和存在即合理
1.4.2 效率和用戶優(yōu)先
1.4.3 化繁為簡(jiǎn)
1.4.4 通用訪問
1.5 無插件范式
1.6 HTML5的新功能
1.6.1 新的DOCTYPE和字符集
1.6.2 新元素和舊元素
1.6.3 語義化標(biāo)記
1.6.4 使用Selectors API簡(jiǎn)化選取操作
1.6.5 JavaScript日志和調(diào)試
1.6.6 window.JSON
1.6.7 DOM Level
1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎
1.7 小結(jié)
第2章 Canvas API
2.1 HTML5 Canvas概述
2.1.1 歷史
2.1.2 canvas是什么
2.1.3 canvas坐標(biāo)
2.1.4 什么情況下不用canvas
2.1.5 替代內(nèi)容
2.1.6 CSS和canvas
2.1.7 瀏覽器對(duì)HTML5 Canvas的支持情況
2.2 使用HTML5 Canvas
2.2.1 檢測(cè)瀏覽器支持情況
2.2.2 在頁面中加入canvas
2.2.3 變換
2.2.4 路徑
2.2.5 描邊樣式
2.2.6 填充樣式
2.2.7 填充矩形區(qū)域
2.2.8 繪制曲線
2.2.9 在canvas中插入圖片
2.2.10 漸變
2.2.11 背景圖
2.2.12 縮放canvas對(duì)象
2.2.13 Canvas變換
2.2.14 Canvas文本
2.2.15 應(yīng)用陰影
2.2.16 像素?cái)?shù)據(jù)
2.2.17 Canvas的安全機(jī)制
2.3 使用HTML5 Canvas創(chuàng)建應(yīng)用
2.3.1 進(jìn)階功能之全頁玻璃窗
2.3.2 進(jìn)階功能之為Canvas動(dòng)畫計(jì)時(shí)
2.4 小結(jié)
第3章 SVG
3.1 SVG概述
3.1.1 歷史
3.1.2 理解SVG
3.1.3 可縮放圖形
3.1.4 使用SVG創(chuàng)建2D圖形
3.1.5 在頁面中添加SVG
3.1.6 簡(jiǎn)單的形狀
3.1.7 變換SVG元素
3.1.8 復(fù)用內(nèi)容
3.1.9 圖案和漸變
3.1.10 SVG路徑
3.1.11 使用SVG文本
3.1.12 組合場(chǎng)景
3.2 使用SVG創(chuàng)建交互式應(yīng)用
3.2.1 添加樹
3.2.2 添加updateTrees函數(shù)
3.2.3 添加removeTree函數(shù)
3.2.4 添加CSS樣式
3.2.5 最終代碼
3.3 小結(jié)
第4章 音頻和視頻
4.1 HTML5 Audio和Video概述
4.1.1 視頻容器
4.1.2 音頻和視頻編解碼器
4.1.3 HTML5 Audio和Video的限制
4.1.4 audio元素和video元素的瀏覽器支持情況
4.2 使用HTML5 Audio和Video
4.2.1 瀏覽器支持性檢測(cè)
4.2.2 可訪問性
4.2.3 理解媒體元素
4.2.4 使用audio元素
4.2.5 使用video元素
4.2.6 進(jìn)階功能
4.3 小結(jié)
第5章 Geolocation API
5.1 位置信息
5.1.1 緯度和經(jīng)度坐標(biāo)
5.1.2 位置信息從何而來
5.1.3 IP地址地理定位數(shù)據(jù)
5.1.4 GPS地理定位數(shù)據(jù)
5.1.5 Wi-Fi地理定位數(shù)據(jù)
5.1.6 手機(jī)地理定位數(shù)據(jù)
5.1.7 用戶自定義的地理定位數(shù)據(jù)
5.2 HTML5 Geolocation的瀏覽器支持情況
5.3 隱私
5.3.1 觸發(fā)隱私保護(hù)機(jī)制
5.3.2 處理位置信息
5.4 使用HTML5 Geolocation
5.4.1 瀏覽器支持性檢查
5.4.2 位置請(qǐng)求
5.5 使用HTML5 Geolocation構(gòu)建應(yīng)用
5.5.1 編寫HTML顯示代碼
5.5.2 處理Geolocation數(shù)據(jù)
5.5.3 最終代碼
5.6 進(jìn)階功能
5.6.1 現(xiàn)在的狀態(tài)是什么
5.6.2 在Goolge Map上顯示“我在這里”
5.7 小結(jié)
第6章 Communication API
6.1 跨文檔消息通信
6.1.1 理解源安全
6.1.2 跨文檔消息通信的瀏覽器支持情況
6.1.3 使用postMessage API
6.1.4 使用postMessage API創(chuàng)建應(yīng)用
6.2 XMLHttpRequest Level
6.2.1 跨源XMLHttpRequest
6.2.2 進(jìn)度事件
6.2.3 HTML5 XMLHttpRequestLevel
6.2.4 使用XMLHttpRequest API
6.2.5 創(chuàng)建XMLHttpRequest應(yīng)用
6.3 進(jìn)階功能
6.3.1 結(jié)構(gòu)化的數(shù)據(jù)
6.3.2 Framebusting
6.4 小結(jié)
第7章 WebSockets API
7.1 WebSockets概述
7.1.1 實(shí)時(shí)和HTTP
7.1.2 解讀WebSockets
7.2 編寫簡(jiǎn)單的Echo WebSocket服務(wù)器
7.3 使用HTML5 WebSockets
7.3.1 瀏覽器支持情況檢測(cè)
7.3.2 API的基本用法
7.4 創(chuàng)建HTML5 WebSockets應(yīng)用程序
7.4.1 編寫HTML文件
7.4.2 添加WebSocket代碼
7.4.3 添加Geolocation代碼
7.4.4 合并所有內(nèi)容
7.4.5 最終代碼
7.5 小結(jié)
第8章 Forms API
8.1 HTML5 Forms概述
8.1.1 HTML Forms與XForms
8.1.2 功能性表單
8.1.3 HTML5 Forms的瀏覽器支持情況
8.1.4 輸入型控件目錄
8.2 使用HTML5 Forms
8.2.1 新的表單特性和函數(shù)
8.2.2 表單驗(yàn)證
8.2.3 驗(yàn)證反饋
8.3 構(gòu)建HTML5 Forms應(yīng)用
8.4 小結(jié)
第9章 拖放
9.1 Web拖放發(fā)展史
9.2 HTML5拖放概述
9.2.1 藍(lán)圖
9.2.2 需要記住的事件
9.2.3 設(shè)置元素可拖動(dòng)
9.2.4 傳輸和控制
9.3 構(gòu)建拖放應(yīng)用
9.4 拖放文件
9.5 進(jìn)階功能
9.6 小結(jié)
第10章 Web Workers
10.1 Web Workers的瀏覽器支持情況
10.2 使用Web Workers
10.2.1 瀏覽器支持性檢查
10.2.2 創(chuàng)建Web Workers
10.2.3 多個(gè)JavaScript文件的加載與執(zhí)行
10.2.4 與HTML5 Web
10.3 編寫主頁
10.3.1 處理錯(cuò)誤
10.3.2 停止Web Workers
10.3.3 Web Workers的嵌套使用
10.3.4 使用定時(shí)器
10.3.5 示例代碼
10.4 構(gòu)建Web Workers應(yīng)用
10.4.1 編寫blur.js輔助腳本
10.4.2 編寫blur.html應(yīng)用頁面
10.4.3 編寫blurWorker.js
10.4.4 與Web Worker通信
10.4.5 運(yùn)行程序
10.4.6 示例代碼
10.5 小結(jié)
第11章 Web Storage
11.1 HTML5 Web
11.2 Web Storage的瀏覽器支持情況
11.3 使用Web Storage
11.3.1 檢查瀏覽器的支持性
11.3.2 設(shè)置和獲取數(shù)據(jù)
11.3.3 封堵數(shù)據(jù)泄漏
11.3.4 localStorage與sessionStorage
11.3.5 Web Storage
11.3.6 更新Web Storage后的通信
11.3.7 探索Web Storage
11.4 構(gòu)建Web Storage應(yīng)用
11.5 瀏覽器數(shù)據(jù)庫(kù)存儲(chǔ)展望
11.5.1 Web SQL
11.5.2 索引數(shù)據(jù)庫(kù)API
11.6 進(jìn)階功能
11.6.1 JSON對(duì)象的存儲(chǔ)
11.6.2 共享窗口
11.7 小結(jié)
第12章 構(gòu)建離線Web應(yīng)用
12.1 HTML5離線Web應(yīng)用概述
12.2 使用HTML5離線Web應(yīng)用API
12.2.1 檢查瀏覽器的支持情況
12.2.2 搭建簡(jiǎn)單的離線應(yīng)用程序
12.2.3 支持離線行為
12.2.4 manifest文件
12.2.5 applicationCache API
12.2.6 運(yùn)行中的應(yīng)用緩存
12.3 使用HTML5離線Web應(yīng)用構(gòu)建應(yīng)用
12.3.1 創(chuàng)建記錄資源的manifest文件
12.3.2 創(chuàng)建構(gòu)成界面的HTML和CSS
12.3.3 創(chuàng)建離線JavaScript
12.3.4 檢查applicationCache的支持情況
12.3.5 為Update按鈕添加處理函數(shù)
12.3.6 添加Geolocation跟蹤代碼
12.3.7 添加Storage功能代碼
12.3.8 添加離線事件處理程序
12.4 小結(jié)
第13章 HTML5未來展望
13.1 HTML5的瀏覽器支持情況
13.2 HTML未來的發(fā)展
13.2.1 WebGL
13.2.2 設(shè)備
13.2.3 音頻數(shù)據(jù)API
13.2.4 觸摸屏設(shè)備事件
13.2.5 P2P網(wǎng)絡(luò)
13.2.6 最終方向
13.3 小結(jié)
書單推薦
