课程介绍
通过一个实战应用,讲解利用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 开发甜点坊订购系统实战
|