| 结合实际案例，进行Web前端解析
|
| Web前端框架概览 |
Web前端技术架构：
展示层：html5，css
控制层：JavaScript
后端服务接口：ajax，restful，node.js
Web前端运行原理解析
Web前端当前开发趋势
典型的web前端开发框架：
jQuery、
Bootstrap
AngularJS
ReactJS |
| Web前端框架实现原理 |
主流JS框架实现剖析：jQuery、BootstrapAngularJS，ReactJS，Node.JS
浏览器工作原理
Html加载
Css渲染
Js 处理
事件与响应的过程模型
JavaScript对象生命周期管理
JavaScript对象关系绑定：继承、多态
JS框架实现原理剖析
类库的组织
JS事件响应模型
Html对象注入方式
应用JS的绑定与注入 |
| 结合实际APP讲解如何基于HTML进行应用开发，把知识贯穿于案例之中
|
| APP应用开发 |
APP功能需求介绍 |
| 案例介绍 |
从前端到后端的架构蓝图
基于HTML5应用开发框架介绍
选择HTML5要解决的APP开发问题定位
开始我们的HTML5实践之旅！ |
| 首先了解HTML5
|
HTML5的版本
WHATWG and W3C 规范
HTML5的新特性
HTML5能做什么
HTML5能做什么对HTML5和CSS3的支持
检测浏览器对HTML 5的支持 |
| 使用HTML5 标签语言 |
HTML5页面结构
HTML5 DOCTYPE
根元素
字符编码
HTML5新增的语义元素
其他新增的元素
验证HTML5页面及显示页面大纲
动手实践案例：标签语言小练习
|
| 在应用开发中使用：HTML5表单 |
HTML 4的困惑
HTML 5新增的输入组件
HTML 5新增的输入属性
测试浏览器对HTML5表单元素的支持
HTML5的表单验证
（1） 定制验证错误消息
（2） 定制验证显示方式
（3） 取消验证
动手实践案例：HTML5表单的应用 |
在应用开发中使用：HTML5 音频和视频播放
|
video元素及其属性
视频编解码器
视频转换工具
各种浏览器支持些什么格式
旧浏览器的过渡解决方案
视频与脚本--简单的视频播放器
音频的嵌入与控制操作
动手实践案例： 控制音频和视频播放 |
| 在应用开发中使用：HTML5 Canvas绘制图形 |
网页中直接绘制图表也曾经是控件垄断的天下，各种图报表的绘制曾经困扰着广大开发者，现在HTML5中引入了原生的图形绘制工具，可以让你在HTML代码中直接绘制图表(矢量图与动画)，本节课程将介绍如何使用这一功能
<canvas>元素
检查浏览器的支持情况
基本图形绘制：画线，矩形，曲线
路径，
变换： 平移，缩放，旋转
渐变：线性渐变，径向渐变
绘制文本，绘制图像
动手实践案例：Canvas绘制图形 |
| 在应用开发中使用：扩展图形标记 |
动手实践案例：
使用Canvas对象绘制位图，通过使用这些API可以实现位图的加载，水印文字的绘制，
丰富的像素级位图操作，
在页面内实现滤镜效果。 |
| 在应用开发中使用：响应式Web设计 |
自适应网页设计实现网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，
自适应带来的效率：减少缩放、平移和滚动。响应式Web设计原则，
如何把网站变成响应式的。
动手实践案例：响应式Web设计 |
| 在应用开发中使用：使用HTML5 通讯APIs |
跨文档消息通信
源安全
检测浏览器对postMessage的支持
XMLHttpRequest Level2
XMLHttpRequest Level2新增事件
检测浏览器对XMLHttpRequest2的支持
跨域访问注意事项。
动手实践案例：使用HTML5 通讯APIs |
| 在应用开发中使用：HTML5 Web
Sockets |
HTTP特点
如何实现实时（real-time）通讯
WebSocket特性
WebSocket与轮询方式的比较
Web Socket建立方法
WebSocket 的事件
WebSocket的属性
渐进增强和降级处理
动手实践案例：使用Web Sockets |
| 在应用开发中使用：HTML5 Web
Workers |
Web Workers介绍
Multi-core processor architecture
Web Worker communication
使用 Web Workers APIs
动手实践案例：使用Web Workers |
| 在应用开发中使用：地理定位 |
地理定位介绍
在浏览器中使用地理定位
定位的技术背景
openstreetmap上显示当前位置
使用googlemaps追踪位置
案例应用实践，练习指导
动手实践案例：地理定位的应用 |
| 在应用开发中使用：HTML5存储 |
为什么需要本地存储
本地存储的限制
Web存储的两种类型
判断浏览器是否支持WebStorage
存取信息
storage事件
Web SQL
IndexedDB |
| 在应用开发中使用：WebSql |
Web SQL Database 的异步访问API
SQLite 是一款轻型的数据库的访问方法
openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executeSql：这个方法用于执行真实的 SQL 查询。
WebSQL的数据库连接管理
WebSQL的并发访问与性能优化
动手实践案例：WebSql的应用 |
| 在应用开发中使用：Web 应用缓存 |
什么是应用程序缓存（Application Cache）？
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML5 Cache Manifest 实例
manifest 文件解析：
CACHE MANIFEST
NETWORK
FALLBACK
缓存的更新与常见问题处理方法
动手实践案例：Web 应用缓存 |
| 在应用开发中使用：移动端前端框架jQuery
Mobile |
jQuery Mobile设计的技术思考和商业思考
jQuery Mobile入门初体验；
使用页眉、工具栏和标签栏；
jQuery Mobile中的表单和按钮；
jQuery Mobile中的列表；
jQuery Mobile和CSS结合；
jQuery Mobile主题；
jQuery Mobile的API;
和服务器集成；
jQuery Mobile和HTML5开发框架PhoneGap结合
动手实践案例：通过使用JQuery框架创建一个TodoList的应用，使用HTML,CSS,JAVASCRIPT,JQUERY,以及HTML5
Local Storage.技术实现 |
| 在应用开发中使用：移动封装框架 |
PhoneGap移动开发框架解析。
基于PhoneGap使用标准的Web技术（HTML5，CSS3和JavaScript）的跨平台开发。应用针对每个平台的封套内执行，并依靠符合标准的API绑定来访问每个设备的传感器，数据和网络状态。.
基于Cordova的跨平台应用开发
Cordova核心解析：
Architecture
WebView
Web App
Plugins
Development Paths
安装 Cordova
动手实践案例：创建第一个Cordova应用（跨平台，Android，iOS，windows）
创建插件
在原生应用中包裹Cordova
在宿主和Cordova应用之间传递数据 |
| 案例总结 |
开发技术列表
问题解答 |
