産品特色
編輯推薦
(1)贈送本書中提到的程序的源代碼 http://pan.baidu.com/s/1gfsTf2b
(2)本書涵蓋瞭HTML 5移動Web開發的所有常用知識點及開發工具,可以幫助傳統Web開發者搭乘HTML 5快車,輕鬆開發和部署移動應用,也可以使移動開發者挖掘Web潛力,在傳統網頁的基礎上獲得跨平颱支持。
內容簡介
本書由淺入深,全麵、係統、詳盡地介紹瞭HTML 5相關技術及其在移動開發領域的應用。從基本原理到移動頁麵優化再到實戰應用,幾乎涉及HTMML 5移動開發領域的絕大部分內容,是一本集理論與實戰的綜閤性參考書。
本書共13章,分為3篇。第1篇為HTML 5移動特性,內容包括HTML 5移動開發基礎、移動錶單、多媒體形式、地理位置定位(Geolocation)、離綫緩存、Canvas繪圖、CSS 3視覺輔助和調用手機設備等,最後還剖析瞭移動性能優化的一些技巧。第2篇為HTML 5移動框架,主要介紹jQueryMobile和SenchaTouch這兩個當下流行的移動框架。第3篇為HTML 5移動實戰,詳細講解瞭使用jQueryMobile和SenchaTouch這兩個移動框架開發移動應用的過程與方法。
本書適閤所有想全麵深入學習HTML 5移動開發技術的人員閱讀,尤其適閤正在應用HTML 5做移動項目開發的人員閱讀。對於大中專院校相關專業的學生和培訓機構的學員,本書也是一本不可多得的參考書。
作者簡介
常新峰,資深網頁開發設計師,並有多年教學經驗及實際操作經驗,先後齣版多版作品。
內頁插圖
目錄
第1章 HTML 5移動入門 1
1.1 認識HTML 1
1.1.1 HTML的構成 1
1.1.2 CSS的構成 2
1.1.3 JavaScript的構成 3
1.2 認識HTML 5 4
1.2.1 HTML 5的發展與理念 5
1.2.2 HTML 5和XHTML的對比 6
1.3 製作一個簡單的HTML 5移動APP 7
1.3.1 開發工具的選擇 8
1.3.2 APP代碼的編寫 8
1.3.3 調試運行 Hello APP 9
1.4 HTML 5的移動特色 10
1.5 本章小結 10
第2章 移動特性1——移動錶單 11
2.1 豐富的錶單屬性 11
2.2 移動Web錶單的input類型 12
2.2.1 search類型文本 12
2.2.2 email類型文本 13
2.2.3 number類型文本 14
2.2.4 range類型文本 15
2.2.5 tel類型文本 15
2.2.6 url類型文本 16
2.3 HTML 5錶單新屬性 16
2.3.1 autocomplete屬性 16
2.3.2 autofocus屬性 17
2.4 範例——創建一個HTML 5版的APP注冊頁麵 18
2.4.1 代碼設計 19
2.4.2 代碼分析 24
2.5 本章小結 26
第3章 移動特性2——多媒體形式 27
3.1 音頻視頻 27
3.1.1 音頻視頻的格式 27
3.1.2 使用video/audio元素 27
3.1.3 音頻視頻的通信 29
3.2 範例——製作音樂播放器APP 31
3.3 範例——製作視頻播放器APP 33
3.3.1 普通視頻播放器 34
3.3.2 添加視頻進度條 37
3.3.3 添加視頻快進慢進按鈕 40
3.3.4 處理帶字幕的視頻 41
3.4 本章小結 43
第4章 移動特性3——地理位置定位 44
4.1 認識地理位置 44
4.1.1 緯度和經度坐標 44
4.1.2 定位數據 45
4.1.3 構建地理位置應用 46
4.2 手機地理位置定位 47
4.3 榖歌地圖的使用 49
4.3.1 追蹤用戶的位置 49
4.3.2 查找路綫 53
4.3.3 用戶自定義的地理定位 61
4.4 高德地圖的使用 65
4.5 本章小結 67
第5章 移動特性4——離綫緩存 68
5.1 離綫緩存應用 68
5.1.1 離綫緩存API簡介 68
5.1.2 使用Manifest方法 71
5.1.3 使用ApplicationCache API方法 72
5.1.4 搭建簡單的離綫APP 72
5.2 離綫事件處理 76
5.3 範例——離綫貼吧APP 80
5.4 本章小結 84
第6章 移動特性5——Canvas繪圖 85
6.1 HTML 5的繪圖API 85
6.1.1 什麼是Canvas 85
6.1.2 加載Canvas 86
6.1.3 什麼是SVG 87
6.1.4 什麼是WebGL 89
6.1.5 Paper.js圖形庫 90
6.2 應用Canvas 91
6.2.1 繪製圖形 92
6.2.2 繪製文字 96
6.2.3 顔色漸變 103
6.3 範例——帶特效的相冊APP 106
6.4 本章小結 114
第7章 移動特性6——CSS 3視覺輔助 115
7.1 CSS 3的變化 115
7.2 背景(Backgrounds) 116
7.3 文字效果(Text Effects) 117
7.4 邊框(Border) 118
7.5 用戶界麵(User interface) 120
7.6 轉換(Transform) 122
7.7 過渡(Transition) 123
7.8 範例——用CSS 3畫哆啦A夢 124
7.8.1 頭和臉 125
7.8.2 脖子和鈴鐺 129
7.8.3 身體和四肢 131
7.8.4 讓眼睛動起來 135
7.9 本章小結 136
第8章 移動特性7——調用手機設備 137
8.1 HTML 5調用手機攝像頭 137
8.2 HTML 5調用手機相冊 140
8.3 HTML 5調用手機通訊錄 146
8.4 本章小結 149
第9章 HTML 5移動性能優化 150
9.1 HTML 5的性能考量 150
9.1.1 瀏覽器性能 150
9.1.2 網絡性能 153
9.1.3 開發效率 154
9.2 加載優化 156
9.2.1 減少HTTP請求 156
9.2.2 充分利用緩存 160
9.2.3 壓縮 161
9.2.4 優化JavaScript加載性能 165
9.2.5 其他加載優化 173
9.3 CSS優化 175
9.3.1 瞭解頁麵的渲染過程 176
9.3.2 避免在HTML標簽中寫Style屬性 178
9.3.3 正確使用display屬性 179
9.3.4 避免使用CSS錶達式 179
9.3.5 請勿濫用float屬性 180
9.3.6 不濫用Web字體 182
9.3.7 不聲明過多的Font-size 184
9.3.8 優化選擇器的使用 185
9.4 圖片優化 187
9.4.1 使用CSS 3代替圖片 187
9.4.2 使用Data URI代替圖片 190
9.4.3 使用SVG代替圖片 194
9.4.4 IconFont與SVG優劣對比 196
9.4.5 使用壓縮圖片 197
9.4.6 使用srcset 198
9.4.7 使用WebP 200
9.5 渲染優化 201
9.5.1 渲染流程 202
9.5.2 使用Viewport加速頁麵渲染 203
9.5.3 動畫優化 204
9.5.4 高頻事件優化 207
9.5.5 GPU加速 210
9.6 腳本優化 211
9.6.1 腳本執行優化 211
9.6.2 條件JavaScript 212
9.6.3 緩存DOM操作 215
9.6.4 盡量使用事件代理以避免批量綁定事件 219
9.6.5 盡量使用ID選擇器 221
9.6.6 click事件優化 223
9.7 本章小結 225
第10章 jQuery Mobile移動框架 226
10.1 初步接觸jQuery Mobile 226
10.1.1 jQuery Mobile框架特點 226
10.1.2 jQuery Mobile框架安裝與配置 227
10.1.3 創建第一個jQuery Mobile APP 229
10.2 jQuery Mobile頁麵與導航 231
10.2.1 jQuery Mobile單頁麵 231
10.2.2 jQuery Mobile多頁麵 233
10.2.3 jQuery Mobile對話框頁麵 236
10.2.4 jQuery Mobile導航 241
10.2.5 jQuery Mobile加載 246
10.2.6 jQuery Mobile動畫效果 250
10.3 jQuery Mobile CSS樣式 253
10.3.1 按鈕樣式 253
10.3.2 圖標樣式 260
10.3.3 網格布局樣式 264
10.4 jQuery Mobile小部件 268
10.4.1 工具條 268
10.4.2 導航條 271
10.4.3 選項卡 275
10.4.4 麵闆 278
10.4.5 彈齣框 281
10.5 jQuery Mobile錶單 284
10.5.1 輸入框 284
10.5.2 復選框 286
10.5.3 單選按鈕 288
10.5.4 下拉列錶框 289
10.5.5 滑塊控件 291
10.6 本章小結 293
第11章 Sencha Touch框架 294
11.1 初步接觸Sencha Touch 294
11.1.1 Sencha Touch框架特點 294
11.1.2 Sencha Touch框架環境搭建 295
11.1.3 創建第一個Sencha Touch APP 303
11.1.4 Sencha Touch APP代碼解析 307
11.1.5 運行Sencha Touch APP 318
11.2 Sencha Touch核心概念 320
11.2.1 類係統 320
11.2.2 容器組件 332
11.2.3 組件布局 334
11.2.4 事件 338
11.3 Sencha Touch組件 343
11.3.1 導航視圖 343
11.3.2 鏇燈視圖 348
11.3.3 錶單 351
11.4 本章小結 354
第12章 jQuery Mobile框架實戰——移動便箋APP 355
12.1 項目介紹 355
12.2 項目功能模塊 356
12.2.1 主頁 356
12.2.2 便箋內容瀏覽頁麵 358
12.2.3 登錄頁麵 360
12.2.4 便箋內容瀏覽頁麵(用戶權限) 362
12.2.5 新建便箋內容 364
12.2.6 編輯便箋內容 367
12.2.7 刪除便箋內容 367
12.2.8 清空便箋內容 368
12.3 本章小結 369
第13章 Sencha Touch框架實戰——通訊錄APP 370
13.1 項目介紹 370
13.2 項目功能模塊 371
13.2.1 app.js主入口文件 371
13.2.2 Model模型 372
13.2.3 Store存儲 372
13.2.4 View主視圖 373
13.2.5 Contacts視圖類 375
13.2.6 Controller控製器 376
13.3 測試運行項目 378
13.4 本章小結 380
前言/序言
移動互聯是如今互聯網最熱門的詞匯,其代錶著互聯網未來的趨勢。這一切似乎是昨天纔發生的,但放眼望去,智能移動終端設備已經是人們日常生活中不可或缺的一部分。眾所周知,智能移動終端設備是iOS與Android的天下,但是iOS和Android開發門檻也不低。隨著HTML 5技術的不斷發展與成熟,移動應用開發領域迎來瞭嶄新的時代,設計人員發現以前需要摺騰許久的項目,使用HTML 5技術則簡單瞭很多。當然HTML 5也不是萬能的,畢竟iOS和Android作為原生係統有著不可替代的地位,如果將HTML 5的前端技術發揮到極緻,也會讓移動應用開發更上一層樓。
關於HTML 5新手必須知道的
HTML 5不僅僅是HTML
早期的HTML在非常長的時間裏被人們認為是一種效率低下且功能簡單的網頁開發技術,但Web技術的不斷發展讓“網頁”和“應用”的界限越來越模糊,尤其是HTML 5的橫空齣世,讓Web變得更加強大。
HTML 5標準草案最初發布於2008年,而後被各大瀏覽器廠商跟進,包括Chrome、IE、Opera和Safari等。它發展迅速,很快成為瞭開發跨平颱和跨設備應用的首選客戶端技術。它賦予瀏覽器強大的能力。例如,基於HTML 5甚至完全可以拋棄特定的操作係統平颱——Chromebook就是這方麵的有力踐行者。
對於開發人員來講,HTML 5使得開發應用程序更加高效、快捷、簡單,幾十行代碼便可以實現過去幾百甚至上韆行代碼纔能實現的功能,省時又省力。
HTML 5易學易用
HTML 5增強瞭HTML的功能,但又摒棄瞭XHTML的復雜,在學習上幾乎不用花費太多功夫,在使用上也盡量貼近人們的常規思維。
HTML 5社區和相關技術發展也十分迅速。在移動互聯網的助力下,HTML 5的步子邁得更大瞭。一方麵,對程序開發不瞭解的設計師也能利用HTML 5和CSS 3技術輕易地設計齣高保真的動態應用原型。另一方麵,前端開發工程師可以利用HTML 5提供的編程接口編寫齣強大的應用程序。
本書與HTML 5
許多人在學習HTML 5的時候不明白究竟什麼纔算是HTML 5,也經常搞混一些概念和用法。從某種角度來說,HTML 5是一係列技術標準的集閤,並且是不斷嚮前發展的技術。為瞭幫助那些對移動開發感興趣的讀者能夠在較短的時間內掌握HTML 5開發技術,筆者編寫瞭本書。
本書首先從HTML 5的曆史和背景入手,讓讀者理解HTML 5究竟為何物;然後一一講解HTML 5的相關技術標準及其在移動Web開發中的應用,以期讀者能夠掌握HTML 5移動Web開發的核心內容;最後講解HTML 5移動Web開發的相關工具,讓讀者可以快速成為一位高效而專業的開發者。
本書特色
內容豐富,覆蓋麵廣
本書基本涵蓋瞭HTML 5移動Web開發的所有常用知識點及開發工具。無論是初學者還是有一定基礎的Web開發從業人員,通過閱讀本書都將獲益匪淺。
注重實踐,快速上手
本書不以枯燥乏味的理論知識作為講解的重點,而是從實踐齣發,將必要的理論知識和大量的開發實例相結閤,並將筆者多年的實際項目開發經驗貫穿於全書的講解中,讓讀者可以在較短的時間內理解和掌握所學的知識。
內容深入、專業
本書直擊要害,先從標準文檔入手,深入淺齣地講解瞭Web技術的原理;然後結閤移動Web開發的相關工具,介紹實際的移動Web開發,讓讀者學有所用。最專業的內容是本書還詳細剖析瞭HTML 5移動頁麵優化的技巧。
實例豐富,隨學隨用
本書提供瞭大量來源於真實Web開發項目的實例,並給齣豐富的程序代碼及注釋。讀者通過研讀這些例子,不僅可以瞭解實際開發中編寫代碼的思路和技巧,還可以將這些代碼直接復用,以提高自己的開發效率。
適閤閱讀本書的讀者
需要全麵學習移動應用開發技術的人員
HTML 5初學者
有一定基礎的Web開發人員
Web前端開發工程師
移動應用開發人員
混閤應用開發人員
微信HTML 5網頁開發人員
瀏覽器開發人員
大中專院校的學生
相關培訓班的學員
下載資源
為瞭方便廣大讀者學習,我們還提供瞭有關程序的源代碼,下載地址(注意數字和字母大小寫)
如果下載有問題,請電子郵件聯係,郵件主題為“HTML5移動開發入門源碼”。
本章第1~8章由平頂山學院的常新峰編寫,第10~12章由華北電力大學的王金柱編寫。本書還要特彆鳴謝阿裏旅行的美女程序員趙榮嬌,在懷孕期間寫作瞭第9章。另外,陳宇、劉軼、薑永艷、馬飛、王琳、張鑫、張喆、趙海波、楊旺功、歐陽薇、周瑞、李為民、陳超、杜禮、孔峰等也參與瞭本書的編寫工作,在此錶示感謝。
編 者
2017年1月
《從零開始:響應式網頁設計與前端框架實戰》 內容簡介 本書是一本麵嚮初學者,但又不乏深度和廣度的前端開發指南。它旨在幫助讀者從最基礎的網頁構建概念齣發,逐步掌握現代響應式網頁設計的核心技術,並深入瞭解當前最流行的前端開發框架,為讀者打開通往專業前端開發的大門。本書不僅注重理論知識的講解,更強調實踐應用,通過大量精心設計的案例和代碼示例,讓讀者在動手實踐中鞏固知識,提升解決實際問題的能力。 第一部分:網頁基礎與響應式設計精髓 在現代互聯網時代,網站需要能夠在各種屏幕尺寸的設備上提供一緻且優化的用戶體驗。本書的開篇便會帶領讀者係統地學習構建網頁的基石——HTML和CSS。我們不會僅僅停留在語法層麵的介紹,而是會深入剖析HTML5語義化標簽的優勢,以及如何利用它們構建更具可訪問性和SEO友好性的網頁結構。CSS部分,我們則會聚焦於現代CSS的強大功能,從基本的選擇器、盒子模型、布局(Flexbox、Grid)到動畫和過渡效果,逐一講解,讓讀者能夠靈活運用CSS來美化網頁,實現豐富的視覺錶現。 特彆地,本書將花費大量篇幅來深入探討響應式網頁設計的理念和實踐。我們會詳細講解“移動優先”的設計原則,以及如何通過媒體查詢(Media Queries)讓網頁內容和布局根據設備的屏幕尺寸動態調整。讀者將學習到如何構建能夠自適應不同分辨率屏幕(從手機、平闆到桌麵顯示器)的網頁布局,確保用戶在任何設備上都能獲得流暢的瀏覽體驗。本書還會介紹一些實用的響應式設計技巧,例如斷點選擇、圖片適配、字體調整策略等,幫助讀者規避常見的響應式開發陷阱。 第二部分:JavaScript核心與動態交互 如果說HTML和CSS是網頁的骨架和皮膚,那麼JavaScript就是賦予網頁生命的靈魂。本書的第二部分將帶你踏入JavaScript的世界。我們將從JavaScript的基本語法、數據類型、運算符、控製流語句開始,循序漸進地講解函數、對象、數組等核心概念。在此基礎上,我們將深入學習DOM(文檔對象模型)的操作,學習如何使用JavaScript來動態地修改網頁內容、響應用戶交互、實現復雜的頁麵效果。 本書將重點介紹事件處理機製,讓讀者理解如何監聽和響應用戶的各種操作,如點擊、鼠標移動、鍵盤輸入等。我們將通過一係列的實例,演示如何使用JavaScript來創建交互式錶單、實現下拉菜單、構建圖片輪播、開發動態加載內容的功能。此外,我們還會觸及一些更高級的概念,如異步編程(Promise、async/await)、Ajax(Asynchronous JavaScript and XML)用於實現無刷新數據更新,以及一些常用的ES6+新特性,這些都將極大地提升讀者的JavaScript開發能力。 第三部分:前端框架的崛起與實戰 隨著前端技術的飛速發展,前端框架已經成為現代Web開發不可或缺的一部分。本書的第三部分將聚焦於當下最主流的前端開發框架,並提供詳實的實戰指導。我們將選擇一個或兩個具有代錶性的框架(例如React、Vue.js或Angular),從零開始講解它們的安裝、基本概念、組件化開發模式、狀態管理、路由等核心特性。 以React為例,本書將詳細講解JSX語法、組件的創建與復用、Props和State的使用、事件處理、生命周期方法等。我們將通過構建一個簡單的待辦事項列錶應用、一個博客文章展示頁麵等項目,讓讀者親身體驗組件化開發帶來的高效和便捷。對於狀態管理,我們將介紹Context API和Redux/Vuex等流行方案,幫助讀者管理復雜應用中的數據流。路由部分,則會講解如何實現單頁麵應用的頁麵導航。 本書在框架部分的最大特色在於其“實戰”導嚮。我們不會僅僅停留在理論層麵,而是會帶領讀者完成幾個具有一定規模和實際應用價值的項目。這些項目將涵蓋從需求分析、架構設計到編碼實現、最終部署的完整流程,讓讀者能夠全麵地瞭解框架在實際項目中的應用。通過這些項目,讀者將學會如何組織代碼、如何進行組件拆分與組閤、如何與後端API進行數據交互、如何進行錯誤處理和性能優化等。 第四部分:性能優化與高級主題 一個優秀的網站不僅要功能齊全,更要具備良好的性能。本書的第四部分將關注前端開發的性能優化方麵。我們將深入探討頁麵加載速度、渲染效率、JavaScript執行效率等關鍵性能指標。讀者將學習到如何通過優化圖片、壓縮代碼、使用懶加載、代碼分割、瀏覽器緩存等技術來提升網站的加載速度和響應能力。 此外,我們還將觸及一些更高級的前端開發主題,例如: 版本控製工具(Git): 講解Git的基本使用,包括提交、分支、閤並等,讓讀者能夠高效地管理自己的代碼,並與他人協作。 構建工具(Webpack/Vite): 介紹現代前端開發中常用的構建工具,理解它們在模塊打包、代碼轉換、資源管理等方麵的作用,以及如何配置和使用它們來提高開發效率。 測試基礎: 簡要介紹單元測試、集成測試等概念,並演示如何使用 Jest 等工具編寫簡單的測試用例,確保代碼質量。 可訪問性(Accessibility): 講解如何遵循WCAG(Web Content Accessibility Guidelines)標準,創建對所有用戶,包括殘障人士友好的網頁。 學習目標與讀者群體 本書的學習目標是讓讀者: 掌握 HTML5語義化標簽和CSS3的布局與樣式設計。 理解並實踐 響應式網頁設計的核心理念與技術。 熟練運用 JavaScript進行DOM操作、事件處理和實現頁麵動態交互。 掌握 至少一個主流前端框架(如React或Vue.js)的基本原理和開發流程。 能夠 構建小型到中型的Web應用。 瞭解 前端性能優化的常用方法和技術。 具備 基礎的版本控製和構建工具使用能力。 本書適閤以下人群: 零基礎的編程愛好者,希望入門Web前端開發。 有一定HTML/CSS基礎,但想深入學習JavaScript和現代前端技術的開發者。 正在尋找係統學習響應式設計和前端框架的在校學生或轉行人員。 希望提升自身前端開發技能,瞭解最新技術趨勢的初級開發者。 本書特色 循序漸進,結構清晰: 從基礎到高級,內容組織邏輯嚴密,適閤不同層次的讀者。 理論與實踐緊密結閤: 每個知識點都配有詳實的案例代碼,引導讀者動手實踐。 項目驅動學習: 通過完成實際項目,讓讀者在解決問題的過程中鞏固所學。 語言通俗易懂: 避免過於晦澀的技術術語,用簡潔明瞭的語言進行講解。 緊跟行業趨勢: 涵蓋當前Web開發領域最熱門的技術和工具。 通過本書的學習,讀者將能夠獨立構建齣滿足現代Web標準、響應式布局、具備豐富交互性的網頁應用,為未來的進階學習和職業發展打下堅實的基礎。