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