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