構(gòu)建移動網(wǎng)站與APP:HTML 5移動開發(fā)入門與實戰(zhàn)
定 價:79 元
叢書名:跨平臺移動開發(fā)叢書
- 作者:常新峰 王金柱
- 出版時間:2017/1/1
- ISBN:9787302461111
- 出 版 社:清華大學出版社
- 中圖法分類:TP312HT
- 頁碼:
- 紙張:膠版紙
- 版次:1
- 開本:16開
本書由淺入深,全面、系統(tǒng)、詳盡地介紹了HTML 5相關(guān)技術(shù)及其在移動開發(fā)領(lǐng)域的應(yīng)用。從基本原理到移動頁面優(yōu)化再到實戰(zhàn)應(yīng)用,幾乎涉及HTMML 5移動開發(fā)領(lǐng)域的絕大部分內(nèi)容,是一本集理論與實戰(zhàn)的綜合性參考書。
本書共13章,分為3篇。第1篇為HTML 5移動特性,內(nèi)容包括HTML 5移動開發(fā)基礎(chǔ)、移動表單、多媒體形式、地理位置定位(Geolocation)、離線緩存、Canvas繪圖、CSS 3視覺輔助和調(diào)用手機設(shè)備等,*后還剖析了移動性能優(yōu)化的一些技巧。第2篇為HTML 5移動框架,主要介紹jQueryMobile和SenchaTouch這兩個當下*流行的移動框架。第3篇為HTML 5移動實戰(zhàn),詳細講解了使用jQueryMobile和SenchaTouch這兩個移動框架開發(fā)移動應(yīng)用的過程與方法。
本書適合所有想全面深入學習HTML 5移動開發(fā)技術(shù)的人員閱讀,尤其適合正在應(yīng)用HTML 5做移動項目開發(fā)的人員閱讀。對于大中專院校相關(guān)專業(yè)的學生和培訓機構(gòu)的學員,本書也是一本不可多得的參考書。
(1)贈送本書中提到的程序的源代碼 http://pan.baidu.com/s/1gfsTf2b(2)本書涵蓋了HTML 5移動Web開發(fā)的所有常用知識點及開發(fā)工具,可以幫助傳統(tǒng)Web開發(fā)者搭乘HTML 5快車,輕松開發(fā)和部署移動應(yīng)用,也可以使移動開發(fā)者挖掘Web潛力,在傳統(tǒng)網(wǎng)頁的基礎(chǔ)上獲得跨平臺支持。
前 言
移動互聯(lián)是如今互聯(lián)網(wǎng)最熱門的詞匯,其代表著互聯(lián)網(wǎng)未來的趨勢。這一切似乎是昨天才發(fā)生的,但放眼望去,智能移動終端設(shè)備已經(jīng)是人們?nèi)粘I钪胁豢苫蛉钡囊徊糠。眾所周知,智能移動終端設(shè)備是iOS與Android的天下,但是iOS和Android開發(fā)門檻也不低。隨著HTML 5技術(shù)的不斷發(fā)展與成熟,移動應(yīng)用開發(fā)領(lǐng)域迎來了嶄新的時代,設(shè)計人員發(fā)現(xiàn)以前需要折騰許久的項目,使用HTML 5技術(shù)則簡單了很多。當然HTML 5也不是萬能的,畢竟iOS和Android作為原生系統(tǒng)有著不可替代的地位,如果將HTML 5的前端技術(shù)發(fā)揮到極致,也會讓移動應(yīng)用開發(fā)更上一層樓。關(guān)于HTML 5新手必須知道的? HTML 5不僅僅是HTML早期的HTML在非常長的時間里被人們認為是一種效率低下且功能簡單的網(wǎng)頁開發(fā)技術(shù),但Web技術(shù)的不斷發(fā)展讓網(wǎng)頁和應(yīng)用的界限越來越模糊,尤其是HTML 5的橫空出世,讓Web變得更加強大。HTML 5標準草案最初發(fā)布于2008年,而后被各大瀏覽器廠商跟進,包括Chrome、IE、Opera和Safari等。它發(fā)展迅速,很快成為了開發(fā)跨平臺和跨設(shè)備應(yīng)用的首選客戶端技術(shù)。它賦予瀏覽器強大的能力。例如,基于HTML 5甚至完全可以拋棄特定的操作系統(tǒng)平臺Chromebook就是這方面的有力踐行者。對于開發(fā)人員來講,HTML 5使得開發(fā)應(yīng)用程序更加高效、快捷、簡單,幾十行代碼便可以實現(xiàn)過去幾百甚至上千行代碼才能實現(xiàn)的功能,省時又省力。? HTML 5易學易用HTML 5增強了HTML的功能,但又摒棄了XHTML的復(fù)雜,在學習上幾乎不用花費太多功夫,在使用上也盡量貼近人們的常規(guī)思維。HTML 5社區(qū)和相關(guān)技術(shù)發(fā)展也十分迅速。在移動互聯(lián)網(wǎng)的助力下,HTML 5的步子邁得更大了。一方面,對程序開發(fā)不了解的設(shè)計師也能利用HTML 5和CSS 3技術(shù)輕易地設(shè)計出高保真的動態(tài)應(yīng)用原型。另一方面,前端開發(fā)工程師可以利用HTML 5提供的編程接口編寫出強大的應(yīng)用程序。? 本書與HTML 5許多人在學習HTML 5的時候不明白究竟什么才算是HTML 5,也經(jīng)常搞混一些概念和用法。從某種角度來說,HTML 5是一系列技術(shù)標準的集合,并且是不斷向前發(fā)展的技術(shù)。為了幫助那些對移動開發(fā)感興趣的讀者能夠在較短的時間內(nèi)掌握HTML 5開發(fā)技術(shù),筆者編寫了本書。本書首先從HTML 5的歷史和背景入手,讓讀者理解HTML 5究竟為何物;然后一一講解HTML 5的相關(guān)技術(shù)標準及其在移動Web開發(fā)中的應(yīng)用,以期讀者能夠掌握HTML 5移動Web開發(fā)的核心內(nèi)容;最后講解HTML 5移動Web開發(fā)的相關(guān)工具,讓讀者可以快速成為一位高效而專業(yè)的開發(fā)者。本書特色? 內(nèi)容豐富,覆蓋面廣本書基本涵蓋了HTML 5移動Web開發(fā)的所有常用知識點及開發(fā)工具。無論是初學者還是有一定基礎(chǔ)的Web開發(fā)從業(yè)人員,通過閱讀本書都將獲益匪淺。? 注重實踐,快速上手本書不以枯燥乏味的理論知識作為講解的重點,而是從實踐出發(fā),將必要的理論知識和大量的開發(fā)實例相結(jié)合,并將筆者多年的實際項目開發(fā)經(jīng)驗貫穿于全書的講解中,讓讀者可以在較短的時間內(nèi)理解和掌握所學的知識。? 內(nèi)容深入、專業(yè)本書直擊要害,先從標準文檔入手,深入淺出地講解了Web技術(shù)的原理;然后結(jié)合移動Web開發(fā)的相關(guān)工具,介紹實際的移動Web開發(fā),讓讀者學有所用。最專業(yè)的內(nèi)容是本書還詳細剖析了HTML 5移動頁面優(yōu)化的技巧。? 實例豐富,隨學隨用本書提供了大量來源于真實Web開發(fā)項目的實例,并給出豐富的程序代碼及注釋。讀者通過研讀這些例子,不僅可以了解實際開發(fā)中編寫代碼的思路和技巧,還可以將這些代碼直接復(fù)用,以提高自己的開發(fā)效率。適合閱讀本書的讀者? 需要全面學習移動應(yīng)用開發(fā)技術(shù)的人員? HTML 5初學者? 有一定基礎(chǔ)的Web開發(fā)人員? Web前端開發(fā)工程師? 移動應(yīng)用開發(fā)人員? 混合應(yīng)用開發(fā)人員? 微信HTML 5網(wǎng)頁開發(fā)人員? 瀏覽器開發(fā)人員? 大中專院校的學生? 相關(guān)培訓班的學員下載資源為了方便廣大讀者學習,我們還提供了有關(guān)程序的源代碼,下載地址(注意數(shù)字和字母大小寫)如下:http://pan.baidu.com/s/1gfsTf2b(密碼:7cwm)如果下載有問題,請電子郵件聯(lián)系booksaga@163.com,郵件主題為HTML5移動開發(fā)入門源碼。
本章第1~8章由平頂山學院的常新峰編寫,第10~12章由華北電力大學的王金柱編寫。本書還要特別鳴謝阿里旅行的美女程序員趙榮嬌,在懷孕期間寫作了第9章。另外,陳宇、劉軼、姜永艷、馬飛、王琳、張鑫、張喆、趙海波、楊旺功、歐陽薇、周瑞、李為民、陳超、杜禮、孔峰等也參與了本書的編寫工作,在此表示感謝。
編 者2017年1月
常新峰,資深網(wǎng)頁開發(fā)設(shè)計師,并有多年教學經(jīng)驗及實際操作經(jīng)驗,先后出版多版作品。
目 錄
第1章 HTML 5移動入門 11.1 認識HTML 11.1.1 HTML的構(gòu)成 11.1.2 CSS的構(gòu)成 21.1.3 JavaScript的構(gòu)成 31.2 認識HTML 5 41.2.1 HTML 5的發(fā)展與理念 51.2.2 HTML 5和XHTML的對比 61.3 制作一個簡單的HTML 5移動APP 71.3.1 開發(fā)工具的選擇 81.3.2 APP代碼的編寫 81.3.3 調(diào)試運行 Hello APP 91.4 HTML 5的移動特色 101.5 本章小結(jié) 10第2章 移動特性1移動表單 112.1 豐富的表單屬性 112.2 移動Web表單的input類型 122.2.1 search類型文本 122.2.2 email類型文本 132.2.3 number類型文本 142.2.4 range類型文本 152.2.5 tel類型文本 152.2.6 url類型文本 162.3 HTML 5表單新屬性 162.3.1 autocomplete屬性 162.3.2 autofocus屬性 172.4 范例創(chuàng)建一個HTML 5版的APP注冊頁面 182.4.1 代碼設(shè)計 192.4.2 代碼分析 242.5 本章小結(jié) 26第3章 移動特性2多媒體形式 273.1 音頻視頻 273.1.1 音頻視頻的格式 273.1.2 使用video/audio元素 273.1.3 音頻視頻的通信 293.2 范例制作音樂播放器APP 313.3 范例制作視頻播放器APP 333.3.1 普通視頻播放器 343.3.2 添加視頻進度條 373.3.3 添加視頻快進慢進按鈕 403.3.4 處理帶字幕的視頻 413.4 本章小結(jié) 43第4章 移動特性3地理位置定位 444.1 認識地理位置 444.1.1 緯度和經(jīng)度坐標 444.1.2 定位數(shù)據(jù) 454.1.3 構(gòu)建地理位置應(yīng)用 464.2 手機地理位置定位 474.3 谷歌地圖的使用 494.3.1 追蹤用戶的位置 494.3.2 查找路線 534.3.3 用戶自定義的地理定位 614.4 高德地圖的使用 654.5 本章小結(jié) 67第5章 移動特性4離線緩存 685.1 離線緩存應(yīng)用 685.1.1 離線緩存API簡介 685.1.2 使用Manifest方法 715.1.3 使用ApplicationCache API方法 725.1.4 搭建簡單的離線APP 725.2 離線事件處理 765.3 范例離線貼吧APP 805.4 本章小結(jié) 84第6章 移動特性5Canvas繪圖 856.1 HTML 5的繪圖API 856.1.1 什么是Canvas 856.1.2 加載Canvas 866.1.3 什么是SVG 876.1.4 什么是WebGL 896.1.5 Paper.js圖形庫 906.2 應(yīng)用Canvas 916.2.1 繪制圖形 926.2.2 繪制文字 966.2.3 顏色漸變 1036.3 范例帶特效的相冊APP 1066.4 本章小結(jié) 114第7章 移動特性6CSS 3視覺輔助 1157.1 CSS 3的變化 1157.2 背景(Backgrounds) 1167.3 文字效果(Text Effects) 1177.4 邊框(Border) 1187.5 用戶界面(User interface) 1207.6 轉(zhuǎn)換(Transform) 1227.7 過渡(Transition) 1237.8 范例用CSS 3畫哆啦A夢 1247.8.1 頭和臉 1257.8.2 脖子和鈴鐺 1297.8.3 身體和四肢 1317.8.4 讓眼睛動起來 1357.9 本章小結(jié) 136第8章 移動特性7調(diào)用手機設(shè)備 1378.1 HTML 5調(diào)用手機攝像頭 1378.2 HTML 5調(diào)用手機相冊 1408.3 HTML 5調(diào)用手機通訊錄 1468.4 本章小結(jié) 149
第9章 HTML 5移動性能優(yōu)化 1509.1 HTML 5的性能考量 1509.1.1 瀏覽器性能 1509.1.2 網(wǎng)絡(luò)性能 1539.1.3 開發(fā)效率 1549.2 加載優(yōu)化 1569.2.1 減少HTTP請求 1569.2.2 充分利用緩存 1609.2.3 壓縮 1619.2.4 優(yōu)化JavaScript加載性能 1659.2.5 其他加載優(yōu)化 1739.3 CSS優(yōu)化 1759.3.1 了解頁面的渲染過程 1769.3.2 避免在HTML標簽中寫Style屬性 1789.3.3 正確使用display屬性 1799.3.4 避免使用CSS表達式 1799.3.5 請勿濫用float屬性 1809.3.6 不濫用Web字體 1829.3.7 不聲明過多的Font-size 1849.3.8 優(yōu)化選擇器的使用 1859.4 圖片優(yōu)化 1879.4.1 使用CSS 3代替圖片 1879.4.2 使用Data URI代替圖片 1909.4.3 使用SVG代替圖片 1949.4.4 IconFont與SVG優(yōu)劣對比 1969.4.5 使用壓縮圖片 1979.4.6 使用srcset 1989.4.7 使用WebP 2009.5 渲染優(yōu)化 2019.5.1 渲染流程 2029.5.2 使用Viewport加速頁面渲染 2039.5.3 動畫優(yōu)化 2049.5.4 高頻事件優(yōu)化 2079.5.5 GPU加速 2109.6 腳本優(yōu)化 2119.6.1 腳本執(zhí)行優(yōu)化 2119.6.2 條件JavaScript 2129.6.3 緩存DOM操作 2159.6.4 盡量使用事件代理以避免批量綁定事件 2199.6.5 盡量使用ID選擇器 2219.6.6 click事件優(yōu)化 2239.7 本章小結(jié) 225第10章 jQuery Mobile移動框架 22610.1 初步接觸jQuery Mobile 22610.1.1 jQuery Mobile框架特點 22610.1.2 jQuery Mobile框架安裝與配置 22710.1.3 創(chuàng)建第一個jQuery Mobile APP 22910.2 jQuery Mobile頁面與導(dǎo)航 23110.2.1 jQuery Mobile單頁面 23110.2.2 jQuery Mobile多頁面 23310.2.3 jQuery Mobile對話框頁面 23610.2.4 jQuery Mobile導(dǎo)航 24110.2.5 jQuery Mobile加載 24610.2.6 jQuery Mobile動畫效果 25010.3 jQuery Mobile CSS樣式 25310.3.1 按鈕樣式 25310.3.2 圖標樣式 26010.3.3 網(wǎng)格布局樣式 26410.4 jQuery Mobile小部件 26810.4.1 工具條 26810.4.2 導(dǎo)航條 27110.4.3 選項卡 27510.4.4 面板 27810.4.5 彈出框 28110.5 jQuery Mobile表單 28410.5.1 輸入框 28410.5.2 復(fù)選框 28610.5.3 單選按鈕 28810.5.4 下拉列表框 28910.5.5 滑塊控件 29110.6 本章小結(jié) 293第11章 Sencha Touch框架 29411.1 初步接觸Sencha Touch 29411.1.1 Sencha Touch框架特點 29411.1.2 Sencha Touch框架環(huán)境搭建 29511.1.3 創(chuàng)建第一個Sencha Touch APP 30311.1.4 Sencha Touch APP代碼解析 30711.1.5 運行Sencha Touch APP 31811.2 Sencha Touch核心概念 32011.2.1 類系統(tǒng) 32011.2.2 容器組件 33211.2.3 組件布局 33411.2.4 事件 33811.3 Sencha Touch組件 34311.3.1 導(dǎo)航視圖 34311.3.2 旋燈視圖 34811.3.3 表單 35111.4 本章小結(jié) 354第12章 jQuery Mobile框架實戰(zhàn)移動便箋APP 35512.1 項目介紹 35512.2 項目功能模塊 35612.2.1 主頁 35612.2.2 便箋內(nèi)容瀏覽頁面 35812.2.3 登錄頁面 36012.2.4 便箋內(nèi)容瀏覽頁面(用戶權(quán)限) 36212.2.5 新建便箋內(nèi)容 36412.2.6 編輯便箋內(nèi)容 36712.2.7 刪除便箋內(nèi)容 36712.2.8 清空便箋內(nèi)容 36812.3 本章小結(jié) 369第13章 Sencha Touch框架實戰(zhàn)通訊錄APP 37013.1 項目介紹 37013.2 項目功能模塊 37113.2.1 app.js主入口文件 37113.2.2 Model模型 37213.2.3 Store存儲 37213.2.4 View主視圖 37313.2.5 Contacts視圖類 37513.2.6 Controller控制器 37613.3 測試運行項目 37813.4 本章小結(jié) 380