课程简介
本课程为期两天，从HTML5 的基础出发，结合实战中的各种精彩实例，将学员带入HTML5 的世界。通过对各个实例细节的分析，详细讲解HTML5 技术的各个部分，深入到HTML5 的核心，让学员充分学习并体验HTML5。
课程中结合动手、互动，让学员真正掌握HTML5 架构的技术细节，从CSS3 布局以及javascript特效等基础开始，学习跨浏览器、跨平台搭建优质HTML5 网站、HTML5 web APP 的方法。
目标收益
培训对象
1. 有一定web 基础的技术人员，深入学习新技术
2. 产品、设计人员，对前端周边技术能得到很好的了解和提高
3. 项目管理人员，对大方向的技术发展有深入的了解
课程内容
本课程为期两天，从HTML5 的基础出发，结合实战中的各种精彩实例，将学员带入HTML5 的世界。通过对各个实例细节的分析，详细讲解HTML5 技术的各个部分，深入到HTML5 的核心，让学员充分学习并体验HTML5。
课程中结合动手、互动，让学员真正掌握HTML5 架构的技术细节，从CSS3 布局以及javascript特效等基础开始，学习跨浏览器、跨平台搭建优质HTML5 网站、HTML5 web APP 的方法。
课程大纲
| HTML5 到底给网站架构带来了什么改变? | HTML5 到底给网站架构带来了什么改变? |
| 四大门户网站HTML5 架构总分析 |
a) 门户HTML5网站架构全解析 b) 重要性能指标分析详解 c) 不可阻挡的移动时代H5架构 |
| . 绘图页面的H5 设计——移动端QQ 财经股票行情图 |
a) canvas 绘制股票行情图细节分析 b) 提高绘图性能的几个秘籍 |
| 优酷网站的架构分析——H5 多媒体兼容解决方案 |
a) 跨平台的音频、视频架构设计 b) 媒体播放器与绘图结合的妙用 |
| 新浪网本地存储Local storage 深入探讨 |
a) 传统cookie与H5本地存储之取舍 b) 新浪网如何利用localstorage减少网站并发请求 c) web QQ 是如何利用localstorage实现页面间通讯的 |
| 移动端百度首页详解——如何巧妙使用H5 提升网站性能，节省公司流量 |
a) 从百度首页几次改版中得到的架构启发 b) 一次由4k到3k的精彩升级 |
| 实例分析——HTML5 搭建新闻客户端APP |
a) 跨平台的H5本地应用的快速制作 b) HTML5 web APP 与本地native APP 之间的博弈 c) HTML5 与本地APP 究竟该如何选择? |
| 移动端的地理定位，如何定H5 规范? |
a) 利用手机快速测量办公室大小 b) 头顶的GPS卫星，到底能给我们什么 |
| 热点新闻先知道——多并发的H5 消息推送详解 |
a) H5 本地存储、跨域post、socket 三箭齐发的系统架构 b) 在开发socket真实场景时，需要注意什么 |
| 回归H5 基础——开发需要的高级javascript简述 |
a) js引用类型里面的注意事项 b) apply 和call 到底都有哪些巧妙用法? c) 回归原点，为何DOM结构如此的重要 d) Ajax 到底瞒着我们做了些什么——架构设计中的异步请求 e) 如何充分利用chrome调试工具帮助我们 |
| . HTML5页面如何自适应移动端繁多的尺寸——移动页面架构详谈 |
a) 快速制作自己的微信分享HTML5专题 b) 由HTML5小游戏APP引申出来的思考 |
| HTML5移动小游戏案例剖析——1010! |
a) 跟本地1010一样的webAPP
b) 如何快速搭建HTML5架构c) Android 开发的性能瓶颈 d) 如何做到横屏、竖屏同时支持 |
| CSS3排版布局深入浅出 |
a) CSS3 在HTML5 页面中扮演的角色 b) 解决跨平台布局的CSS3关键点 c) CSS 关键技术点一览 d) H5 页面布局基础练习——用多种方法实现固定宽度且居中的排版 |
|
CSS3在CSS2之上的扩展 |
a) CSS3 的媒体支持 b) 盒子模型在CSS3布局中的应用 c) 外引字体的巧妙应用 d) 适应用户阅读习惯的CSS3分栏 e) CSS3 的变幻与动画 f) CSS3 与javascript的互动 |
| 利用CSS3 快速搭建一键换肤的H5 页面a) 如何处理不同屏幕的排版b) 应对高清retina屏实例分析 |
a) float 排版你所不知道的妙用 b) position 定位的性能到底怎么样? c) H5+CSS3 终极架构实例——禅意花园 |
| ipad中的CSS3与HTML5页面架构 |
a) 如何处理不同屏幕的排版 b) 应对高清retina屏实例分析 |
| 微信HTML5 应用和实践 |
a) 进入大众视野的微信公众平台 b) 开发模式基本功能简述 c) 微信开发平台的使用 d) 开发者模式一探究竟 |
| HTML5与CSS3性能优化 |
a) 为什么页面性能如此的重要 b) 网页性能都有哪些指标 c) HTML5 页面在性能优化上面的那些心得 d) 站在架构的高度，提升用户体验 |
|
H5与CSS3布局的衍生——响应式web设计 |
a) 什么是响应式web设计 b) 如何做一个响应式设计c) 合理使用HTML5和CSS3 d) 渐进增强e) CSS4 横空出世 |
|
HTML5 到底给网站架构带来了什么改变? HTML5 到底给网站架构带来了什么改变? |
|
四大门户网站HTML5 架构总分析 a) 门户HTML5网站架构全解析 b) 重要性能指标分析详解 c) 不可阻挡的移动时代H5架构 |
|
. 绘图页面的H5 设计——移动端QQ 财经股票行情图 a) canvas 绘制股票行情图细节分析 b) 提高绘图性能的几个秘籍 |
|
优酷网站的架构分析——H5 多媒体兼容解决方案 a) 跨平台的音频、视频架构设计 b) 媒体播放器与绘图结合的妙用 |
|
新浪网本地存储Local storage 深入探讨 a) 传统cookie与H5本地存储之取舍 b) 新浪网如何利用localstorage减少网站并发请求 c) web QQ 是如何利用localstorage实现页面间通讯的 |
|
移动端百度首页详解——如何巧妙使用H5 提升网站性能，节省公司流量 a) 从百度首页几次改版中得到的架构启发 b) 一次由4k到3k的精彩升级 |
|
实例分析——HTML5 搭建新闻客户端APP a) 跨平台的H5本地应用的快速制作 b) HTML5 web APP 与本地native APP 之间的博弈 c) HTML5 与本地APP 究竟该如何选择? |
|
移动端的地理定位，如何定H5 规范? a) 利用手机快速测量办公室大小 b) 头顶的GPS卫星，到底能给我们什么 |
|
热点新闻先知道——多并发的H5 消息推送详解 a) H5 本地存储、跨域post、socket 三箭齐发的系统架构 b) 在开发socket真实场景时，需要注意什么 |
|
回归H5 基础——开发需要的高级javascript简述 a) js引用类型里面的注意事项 b) apply 和call 到底都有哪些巧妙用法? c) 回归原点，为何DOM结构如此的重要 d) Ajax 到底瞒着我们做了些什么——架构设计中的异步请求 e) 如何充分利用chrome调试工具帮助我们 |
|
. HTML5页面如何自适应移动端繁多的尺寸——移动页面架构详谈 a) 快速制作自己的微信分享HTML5专题 b) 由HTML5小游戏APP引申出来的思考 |
|
HTML5移动小游戏案例剖析——1010! a) 跟本地1010一样的webAPP b) 如何快速搭建HTML5架构c) Android 开发的性能瓶颈 d) 如何做到横屏、竖屏同时支持 |
|
CSS3排版布局深入浅出 a) CSS3 在HTML5 页面中扮演的角色 b) 解决跨平台布局的CSS3关键点 c) CSS 关键技术点一览 d) H5 页面布局基础练习——用多种方法实现固定宽度且居中的排版 |
|
CSS3在CSS2之上的扩展 a) CSS3 的媒体支持 b) 盒子模型在CSS3布局中的应用 c) 外引字体的巧妙应用 d) 适应用户阅读习惯的CSS3分栏 e) CSS3 的变幻与动画 f) CSS3 与javascript的互动 |
|
利用CSS3 快速搭建一键换肤的H5 页面a) 如何处理不同屏幕的排版b) 应对高清retina屏实例分析 a) float 排版你所不知道的妙用 b) position 定位的性能到底怎么样? c) H5+CSS3 终极架构实例——禅意花园 |
|
ipad中的CSS3与HTML5页面架构 a) 如何处理不同屏幕的排版 b) 应对高清retina屏实例分析 |
|
微信HTML5 应用和实践 a) 进入大众视野的微信公众平台 b) 开发模式基本功能简述 c) 微信开发平台的使用 d) 开发者模式一探究竟 |
|
HTML5与CSS3性能优化 a) 为什么页面性能如此的重要 b) 网页性能都有哪些指标 c) HTML5 页面在性能优化上面的那些心得 d) 站在架构的高度，提升用户体验 |
|
H5与CSS3布局的衍生——响应式web设计 a) 什么是响应式web设计 b) 如何做一个响应式设计c) 合理使用HTML5和CSS3 d) 渐进增强e) CSS4 横空出世 |
近期公开课推荐
