|
課程介紹
通過(guò)一個(gè)實(shí)戰(zhàn)應(yīng)用，講解利用HTML5開(kāi)發(fā)APP的全過(guò)程，涉及客戶端，服務(wù)端開(kāi)發(fā)
課程目標(biāo)
培訓(xùn)對(duì)象
?
課程長(zhǎng)度
10天（30學(xué)時(shí)）
授課形式
? PPT+教材+參考資料，理論講解
? 場(chǎng)景+案例+模擬環(huán)境，動(dòng)手實(shí)踐
? 手把手解決問(wèn)題+解決問(wèn)題經(jīng)驗(yàn)分享
? 隨堂隨機(jī)提問(wèn)，并解答
? 隨堂留練習(xí)題+完成好的學(xué)員小小物質(zhì)獎(jiǎng)勵(lì)
? 分小組討論+實(shí)際場(chǎng)景模擬+老師點(diǎn)評(píng)
? 定期知識(shí)點(diǎn)review
? …..
課程內(nèi)容
時(shí)間 內(nèi)容 備注
第1個(gè)主題： HTML 5移動(dòng)Web開(kāi)發(fā)基礎(chǔ)
1、 HTML5新特性
2、 HTML5組織
3、 HTML5構(gòu)成
4、 HTML5設(shè)計(jì)原理
5、 HTML開(kāi)發(fā)歷程
6、 HTML5開(kāi)發(fā)動(dòng)力
7、 HTML5設(shè)計(jì)理念
第2個(gè)主題： 編寫(xiě)第一個(gè)HTML5頁(yè)面
1、 搭建上機(jī)練習(xí)環(huán)境
2、 檢測(cè)瀏覽器是否支持
3、 使用HTML5編寫(xiě)簡(jiǎn)單的Web頁(yè)面
4、 學(xué)習(xí)HTML前的準(zhǔn)備工作：開(kāi)發(fā)環(huán)境等
5、 HTML5頁(yè)面的特征
a) 使用HTML5結(jié)構(gòu)化元素
b) 使用CSS美化HTML5文檔
6、 HTML5基礎(chǔ)
a) HTML5語(yǔ)法
b) HTML5元素
c) HTML5增加及廢除的屬性
d) HTML5全局屬性
e) HTML5其他功能
7、 創(chuàng)建HTML5文檔
a) 認(rèn)識(shí)HTML5文檔結(jié)構(gòu)
b) HTML5元素分類(lèi)
c) 構(gòu)建主體內(nèi)容
d) 添加語(yǔ)義模塊
e) 綜合實(shí)戰(zhàn)：使用HTML5設(shè)計(jì)博客主頁(yè)
i. 設(shè)計(jì)大綱
ii. 設(shè)計(jì)樣式
8、 實(shí)戰(zhàn)HTML5表單
a) 新增的input輸入類(lèi)型
b) email類(lèi)型的應(yīng)用
c) url類(lèi)型的應(yīng)用
d) number類(lèi)型的應(yīng)用
e) range類(lèi)型的應(yīng)用
f) 日期檢出器類(lèi)型的應(yīng)用
g) search類(lèi)型的應(yīng)用
h) tel類(lèi)型的應(yīng)用
i) color類(lèi)型的應(yīng)用
j) 新增的autocomplete屬性
k) 新增的autofocus屬性
l) 新增的form屬性
m) 新增的表單重寫(xiě)屬性
n) 新增的height與width屬性
o) 新增的list屬性
p) 新增的min、max和step屬性
q) 新增的multiple屬性
r) 新增的pattern屬性
s) 新增的placeholder屬性
t) 新增的required屬性
u) 新增的form元素
v) 新增的datalist元素
w) 新增的keygen元素
x) 新增的output元素
y) 新增的form屬性
z) 新增的autocomplete屬性
aa) 新增的novalidate屬性
bb) 實(shí)戰(zhàn)HTML5畫(huà)布
9、 HTML5音頻與視頻
a) HTML5多媒體技術(shù)概述
i. 關(guān)于編解碼器
ii. 音頻編解碼器
iii. 視頻編解碼器
b) 瀏覽器支持概述
i. 用JavaScript檢測(cè)音頻格式支持情況
ii. 用JavaScript檢測(cè)視頻格式支持情況
c) 在HTML5中播放音頻
d) 音頻與視頻相關(guān)屬性、方法與事件
e) 綜合實(shí)戰(zhàn)
i. 用腳本控制音樂(lè)播放
ii. 查看視頻幀畫(huà)面
10、 Web存儲(chǔ)
i. 認(rèn)識(shí)Web Storage
1. Cookie存儲(chǔ)機(jī)制的優(yōu)缺點(diǎn)
2. 為什么要用Web Storage
3. Web Storage的優(yōu)缺點(diǎn)
ii. 瀏覽器支持概述
b) 使用Web Storage
i. 檢查瀏覽器的支持性
ii. 設(shè)置和獲取數(shù)據(jù)
iii. 防止數(shù)據(jù)泄露
iv. Web Storage的其他用法
v. Web Storage事件監(jiān)測(cè)
vi. 實(shí)例1：設(shè)計(jì)網(wǎng)頁(yè)皮膚
vii. 實(shí)例2：跟蹤localStorage數(shù)據(jù)
viii. 實(shí)例3：設(shè)計(jì)計(jì)數(shù)器
11、 綜合應(yīng)用：Web應(yīng)用項(xiàng)目實(shí)時(shí)跟蹤
a) Web SQL數(shù)據(jù)庫(kù)
b) Web SQL數(shù)據(jù)庫(kù)概述
c) 使用Web SQL數(shù)據(jù)庫(kù)
d) 實(shí)例1：創(chuàng)建簡(jiǎn)單的本地?cái)?shù)據(jù)庫(kù)
e) 實(shí)例2：批量存儲(chǔ)本地?cái)?shù)據(jù)
f) 綜合應(yīng)用：Web Storage和Web SQL混合開(kāi)發(fā)
12、 HTML5離線應(yīng)用概述
a) 為什么要學(xué)習(xí)HTML5離線應(yīng)用
b) HTML5離線應(yīng)用詳解
i. 解析manifest文件
ii. 搭建離線應(yīng)用程序
iii. 檢查瀏覽器是否支持
iv. 離線緩存更新實(shí)現(xiàn)
v. JavaScript接口實(shí)現(xiàn)
vi. 離線存儲(chǔ)事件監(jiān)聽(tīng)
c) 實(shí)戰(zhàn)1：緩存首頁(yè)
d) 實(shí)戰(zhàn)2：離線編輯內(nèi)容
e) 實(shí)戰(zhàn)3：離線跟蹤
13、 Workers多線程處理
a) 認(rèn)識(shí)Web Workers
b) 使用Web Workers
c) 案例實(shí)戰(zhàn)
i. 使用多線程實(shí)現(xiàn)后臺(tái)運(yùn)算
ii. 在后臺(tái)過(guò)濾值
iii. 多任務(wù)并發(fā)處理
iv. 在多線程之間通信
v. 使用線程技術(shù)計(jì)算Fibonacci數(shù)列
vi. 使用多線程繪圖
14、 Geolocation地理位置
a) IP定位
b) GPS定位
c) Wi-Fi定位
d) 手機(jī)定位
e) 自定義定位
f) 使用Geolocation API
g) 案例實(shí)戰(zhàn)：
i. 使用百度地圖
ii. 跟蹤行走速度
時(shí)間 內(nèi)容 備注
第3個(gè)主題： CSS3概述
1. 回顧C(jī)SS
2. 了解CSS3新增特性
a) 屬性選擇器
b) RBGA 透明度
c) 屬性選擇器多欄布局
d) 多背景圖片
e) 字符串溢出
f) 塊陰影與圓角陰影
g) 圓角
h) 邊框圖片
i) 形變
j) 案例實(shí)戰(zhàn)：設(shè)計(jì)漂亮的表單
3. CSS選擇器
a) 屬性選擇器
b) 認(rèn)識(shí)屬性選擇器
c) 案例實(shí)戰(zhàn)
i. 結(jié)構(gòu)偽類(lèi)選擇器
ii. UI偽類(lèi)選擇器
d) 文本、字體與顏色
i. 設(shè)計(jì)文本陰影
ii. 綜合實(shí)戰(zhàn)：設(shè)計(jì)黑客網(wǎng)站首頁(yè)
e) 背景和邊框
i. 設(shè)計(jì)多色邊框
ii. 案例實(shí)戰(zhàn)
f) 設(shè)計(jì)邊框背景
i. 案例實(shí)戰(zhàn)
g) 設(shè)計(jì)圓角
h) 設(shè)計(jì)陰影
i) 設(shè)計(jì)背景
4. 響應(yīng)式設(shè)計(jì)基礎(chǔ)
5. 從兩欄布局開(kāi)始說(shuō)起
6. 從media到media queries
7. 響應(yīng)式柵格系統(tǒng)
8. 移動(dòng)優(yōu)先（mobile first）理念
9. 另一種思路：后端模板輸出的優(yōu)化
10. 其他細(xì)節(jié)
第4個(gè)主題： Android系統(tǒng)原理介紹參考Android內(nèi)容
第5個(gè)主題： JavaScript基礎(chǔ)
1. JavaScript 語(yǔ)言核心
2. 詞法結(jié)構(gòu)
a) 字符集
b) 注釋
c) 直接量
d) 標(biāo)識(shí)符和保留字
e) 可選的分號(hào)
3. 類(lèi)型、值和變量
a) 數(shù)字
b) 文本
c) 布爾值
d) null和undefined
e) 全局對(duì)象
f) 包裝對(duì)象
g) 不可變的原始值和可變的對(duì)象引用
h) 類(lèi)型轉(zhuǎn)換
i) 變量聲明
j) 變量作用域
4. 表達(dá)式和運(yùn)算符
5. 語(yǔ)句
a) 對(duì)象
b) 創(chuàng)建對(duì)象
c) 屬性的查詢和設(shè)置
d) 刪除屬性
e) 檢測(cè)屬性
f) 枚舉屬性
g) 屬性getter和setter
h) 屬性的特性
i) 對(duì)象的三個(gè)屬性
j) 序列化對(duì)象
k) 對(duì)象方法
6. 對(duì)象
a) 創(chuàng)建對(duì)象
b) 屬性的查詢和設(shè)置
c) 刪除屬性
d) 檢測(cè)屬性
e) 枚舉屬性
f) 屬性getter和setter
g) 屬性的特性
h) 對(duì)象的三個(gè)屬性
i) 序列化對(duì)象
j) 對(duì)象方法
7. 數(shù)組
a) 創(chuàng)建數(shù)組
b) 數(shù)組元素的讀和寫(xiě)
c) 稀疏數(shù)組
d) 數(shù)組長(zhǎng)度
e) 數(shù)組元素的添加和刪除
f) 數(shù)組遍歷
g) 多維數(shù)組
h) 數(shù)組方法
i) ECMAScript 5中的數(shù)組方法
j) 數(shù)組類(lèi)型
k) 類(lèi)數(shù)組對(duì)象
1. 函數(shù)
2. 函數(shù)定義
3. 函數(shù)調(diào)用
4. 函數(shù)的實(shí)參和形參
5. 作為值的函數(shù)
6. 作為命名空間的函數(shù)
7. 閉包
8. 函數(shù)屬性、方法和構(gòu)造函數(shù)
9. 函數(shù)式編程
i. 類(lèi)和模塊
ii. 類(lèi)和原型
iii. 類(lèi)和構(gòu)造函數(shù)
iv. JavaScript中Java式的類(lèi)繼承
v. 類(lèi)的擴(kuò)充
vi. 類(lèi)和類(lèi)型
vii. JavaScript中的面向?qū)ο蠹夹g(shù)
viii. 子類(lèi)
第6個(gè)主題： 站在巨人們的肩上--jQuery Mobile
1. jQuery與jQuery Mobile
2. 認(rèn)識(shí)jQuery與jQuery Mobile
3. 認(rèn)識(shí)JavaScript
4. JavaScript架構(gòu)
5. JavaScript對(duì)象與函數(shù)
6. JavaScript事件
7. 認(rèn)識(shí)jQuery
8. 引用jQuery函數(shù)庫(kù)
9. jQuery基本架構(gòu)
10. jQuery選擇器
11. 跨平臺(tái)移動(dòng)設(shè)備網(wǎng)頁(yè)jQuery Mobile
12. 認(rèn)識(shí)jQuery Mobile
13. 第一個(gè)jQuery Mobile網(wǎng)頁(yè)
14. jQuery Mobile UI組件
15. 套用UI組件
16. 認(rèn)識(shí)UI組件
17. 按鈕（Button）
18. 組按鈕（Grouped Buttons）
19. 列表（List View）
20. 網(wǎng)頁(yè)導(dǎo)航與布景主題
21. jQuery Mobile網(wǎng)頁(yè)導(dǎo)航
22. ThemeRoller快速應(yīng)用布景主題
23. jQuery Mobile 事件
24. 頁(yè)面事件
25. 初始化事件
26. 外部頁(yè)面加載事件
27. 頁(yè)面切換事件
28. 觸摸事件
29. 點(diǎn)擊事件（tap）
30. 滑動(dòng)事件
31. 滾動(dòng)事件
32. 屏幕方向改變事件
33. 數(shù)據(jù)的保存與讀取
34. 認(rèn)識(shí)IndexedDB
35. IndexedDB的概念
36. IndexedDB基本操作
37. 讀取數(shù)據(jù)
38. 刪除數(shù)據(jù)
39. 使用指針對(duì)象
40. 認(rèn)識(shí)Web SQL
41. Web SQL基本操作
42. 創(chuàng)建數(shù)據(jù)表
43. 新增、修改和刪除數(shù)據(jù)
44. 讀取文本文件
45. 選擇文件
46. 讀取文件
47.
48. 打包與測(cè)試
49. 下載與安裝Apache Cordova
50. 下載與安裝Cordova
51. 安裝的必要工具
52. 通過(guò)npm安裝Cordova
53. 設(shè)置Android模擬器
54. 將網(wǎng)頁(yè)轉(zhuǎn)換成Android APP
Sencha Touch
55. bonjour，Sencha Touch！
56. 第一個(gè)Sencha Touch程序57. 進(jìn)階
第7個(gè)主題： Bootstrap 培訓(xùn)
1. 什么是BootStrap
2. Bootstrap 環(huán)境安
3. BootStrap 學(xué)習(xí)資源介紹
4. Grid系統(tǒng)
5. 響應(yīng)式實(shí)用類(lèi)
6. 組件更新--Navbar
7. 組件更新--List group
8. 組件更新--Panels
9. Bootstrap 網(wǎng)站設(shè)計(jì)實(shí)戰(zhàn)
第8個(gè)主題： Node.js
1. Node.js
2. 什么是Node.js Node.js基礎(chǔ)
a) Node.js Hello World
3. Node.js模塊系統(tǒng)
4. Node.js包管理系統(tǒng)NPM
5. 事件驅(qū)動(dòng)和異步I/O
6. 前端工程師需要了解Node.js的什么
7. 工具鏈
8. CoffeeScript
9. CSS預(yù)處理器（CSS preprocessor）
10. Grunt
11. Bower
12. Yeoman
使用HTML5,CSS3，Jquery Moblie ，BootStarp,Node.js 開(kāi)發(fā)甜點(diǎn)坊訂購(gòu)系統(tǒng)實(shí)戰(zhàn)
|
合作伙伴與授權(quán)機(jī)構(gòu)
總部李老師
