HTML5移动WEB应用和云服务技术
课程介绍:
Web应用目前广泛使用在各个领域,并持续出现新的标准和新的应用场景。Web应用本身涉及到了多个方面的技术,每种技术的本身的难度都不大,但是技术之间的关联,生态系统的结构则比较复杂。
本内容全面介绍了Web应用方面基础技术、扩展技术、未来的技术及技术之间的关系,并考虑技术在不同浏览器、不同平台的适应性。兼顾前端和后端的开发, 兼顾不同PC平台的差异。从W3C标准基础出发,以实例化的方式介绍Web应用在HTML5新技术、云服务和移动互联网等新兴方面的应用。
Web应用开发者以及服务器技术、移动技术、互联网开发、小型设备的技术开发者的都应当掌握Web应用技术,并具有一定的深度和广度。
应用领域:
1 面向多类终端的网站构建
2 HTML5技术结合小型服务器的优化设计
3 移动互联网的Web应用
课程特色:
· 主要内容来自开发实践,实用性高
· 集通用宏观方法论和具体技术细节于一体
· 以主流技术根本,具有大量强实用性实例
· 全面介绍新兴的HTML5 Web应用技术及其兼容性
· 关注浏览器兼容性和生态系统
· Web应用和Web服务(云计算)的结合
· 由浅入深介绍Web应用在移动设备的应用
· 课程密度高,在最短的时间内让学习者有条理地掌握较多内容
· 提供丰富的课后资料,学习者可以根据技术方向进一步自学
内容的分类标识:
★(核心技术):目前使用的主流技术,重视深度、技术架构、典型实例、兼容性;
★(边缘技术):目前使用的非主流技术,重视广度、了解适用场景;
★(未来技术):尚未推广的技术,重视技术的目标、展望、非技术因素的影响。
课程对象:移动开发工程师、HTML5开发工程师、项目经理、对HTML5感兴趣的技术人员。
课程时间:3天
课程大纲
Web应用概述 | |||
1 Web应用程序 | 浏览器和网页语言、W3C及其标准 | 要点:HTTP、URI和HTML | |
2 Web应用和浏览器 |
主流的浏览器及其应用场景 浏览器的布局引擎和JavaScript引擎 |
要点:几种主流浏览器的引擎和功能比较 | |
3 Web应用的主要技术和相关技术 |
Web应用的主流技术 Web应用技术的平台化 W3C定义的技术vs其他组织定义的技术 |
要点:Web应用使用范围的蔓延和未来展望 要点:Web应用的兼容和适用性 要点:技术的无限扩展和标准问题 |
|
Web应用的核心技术 | |||
★Web的调试和优化 |
调试工具的使用 网络Sniff工具和命令行工具 JavaScript性能和DOM性能 |
实例:Firebugs、Chrome调试工具 要点:Web结构,快速和动态调试 |
|
★JavaScript高级 |
JavaScript的闭包 JavaScript内存泄露 JavaScript的原型 |
要点:互相引用、外部函数、闭包循环 实例:内存泄露的处理 实例:原型概念和JavaScript的扩展 |
|
HTML5的技术 | |||
★HTML5概述 |
狭义和广义的HTML5 HTML5的各种标准 |
要点:W3C的理念 | |
★HTML5新标签 | 新增Tag的分类,弃用的Tag | 要点:各种Tag的浏览器支持情况 | |
★HTML5新事件 | 新增事件的种类 | 实例:postMessage机制对事件的处理 | |
◎HTML5的多媒体 | video,audio等标签和调用接口 | 要点:与Flash的关系 | |
★HTML5的Canvas |
Canvas的使用方法和结构 Canvas的各种设置和绘图功能 |
实例:使用Canvas构建图形 实例:使用Canvas构建自定义UI |
|
☆Web存储技术 |
Web存储技术概述 Web存储技术的适用场景和生命周期 |
实例:localStorage的使用 实例:sessionStorage的使用 |
|
◎webworker |
webworker的概念 使用webworker的程序结构应用 |
实例:适用webworker改变程序结构 | |
☆表单 |
HTML5表单的自动验证功能 HTML5表单的新属性 |
实例:浏览器端的验证,自动补全功能 | |
☆HTML5的应用方面 |
App Cache和离线应用 定位技术 DnD拖拽技术 数据库技术 SQL数据库、Indexed数据库 文件API |
要点:浏览器端功能的利用 实例:离线应用保存数据 实例:从浏览器中获取定位信息 实例:利用拖放改变DOM结构 实例:在浏览器端加载文件 |
|
☆HTML5的相关技术 |
SVG技术 MathML技术 |
实例:SVG图形的使用 实例:MathML的公式图形 |
|
◎CSS3的应用 |
1 新CSS技术的标准 2 CSS3技术的属性和选择器 3 CSS3技术的应用 4 CSS的媒体查询功能 |
要点:CSS3各方面特性的浏览器兼容性 实例:字体、动画、过渡、UI模型 实例:CSS自适应屏幕 |
|
Web应用的库 | |||
★Web应用库概述 | Web应用库的组织和存在方式 | 实例:Web库在线调试工具 | |
★JSON的应用 |
JSON的概念和原理 JSON技术构成和数据类型 JSON几种的不同实现方式 |
实例:JSON结构在JavaScript中使用 实例:JSON的编辑工具 实例:JSON内部数据结构 |
|
☆Prototype库 |
Prototype库的结构和功能集合 Prototype的API和组织结构 Prototype的选择器、DOM扩展和事件处理 |
要点:Element类和对DOM处理 实例:Prototype的简化程序及结合CSS 要点:Prototype的适用场景和注意事项 |
|
★jQuery库 |
jQuery的概念 jQuery的主要功能 jQuery的组织结构 jQuery的API jQuery的应用场景 jQuery UI的组成和灵活使用 |
要点:jQuery的类定义 实例:通过jQuery构建的颜色选择器界面 实例:通过jQuery简化界面的构建 实例:通过jQuery使用AJAX 实例:通过jQuery UI的使用和效果 |
|
☆Web应用框架库 | Mootools、Dojo、YUI、ExtJS库 | 要点:主流Web应用库的功能和范畴 | |
☆Web应用工具库 | Knockout,moo.fx等数十个各功能的库。 | 要点:了解Web程序中可用的内容 | |
客户端和服务器交互技术 | |||
★ Web服务器概述 |
Web应用的客户端-服务器架构 几种流行的Web服务器及其功能扩展 |
要点:服务器和客户端的职责 | |
★基于CGI的交互 |
CGI的参数格式和服务器动作 CGI程序请求参数和环境变量 CGI程序使用环境变量 CGI的多语言库(Perl、C和C++) FastCGI的理念与实现结构 |
实例:多语言实现(Perl、Shell、C语言) 要点:小型服务器的CGI技术 实例:多种CGI应用程序对表单的提交处理 要点: FastCGI应用程序的结构变化 |
|
★ AJAX |
AJAX的理念 XMLHttpRequest的使用方法 XMLHttpRequest请求文件和执行CGI 反向AJAX和服务器推送技术 轮循技术模拟反向AJAX的处理 |
要点:AJAX的客户端和服务器端 实例:通过AJAX和局部刷新页面 要点:AJAX构建的数据交互 实例:多种反向AJAX的实现 |
|
★动态Web页面和数据库 |
完整的Web的服务器技术 PHP技术和MySQL技术 |
实例:PHP的构建和语法 实例:MySQL调用存储环节 |
|
◎新的客户端和服务器交互技术 |
HTML5服务器端技术概述 SSE技术 Websocket技术 Node.js技术 |
要点:HTML5服务器端的方向 要点:Websocket对网页程序的扩展 要点:Node.js的架构和要点 实例:Node.js的解析和异步处理 |
|
云计算和Web | |||
◎ Web2.0和Web服务 |
云服务的典型架构 SOAP和REST |
要点:WebAPI和HTTP关系 要点:REST及其HTTP的实现 |
|
◎云的概念和架构 |
云的概念和层次结构 云服务和云终端 SaaS、PaaS和Iaas |
要点:云计算和Web应用的关系 要点:典型云计算服务器的架构 |
|
★典型Web API |
Web API的客户端和服务器端 Google Map的API YouTube的API 社交API的形式 |
要点:API结构以及与Web的结合 实例:开发小型网站的Web API |
|
移动Web应用 | |||
★移动设备的Web |
移动设备的Web应用特点 Web应用与设备属性的结合 |
要点:移动设备应用HTML5新技术的优势 要点:移动设备的混合应用的几种形式 |
|
★jQuery Mobile |
jQuery Mobile的功能 jQuery Mobile的API jQuery Mobile样式 |
要点:Web应用的移动设备适配 实例:jQuery Mobile的界面 |
|
★PhoneGap |
PhoneGap工程的理念和作用 PhoneGap的API及其应用 PhoneGap在几个平台的使用 |
要点:典型移动平台Web结构特点 要点:Webkit在移动设备的特殊功能 实例:Phone的接口实例(Android和iOS) |
|
移动Web应用和云平台 | |||
◎移动平台概述 | 移动设备的Web平台的结构 | 要点:开发平台和多功能服务器 | |
◎FeedHenry平台 |
FeedHenry作用 应用API和平台API App Studio的仿真环境 |
实例:App Studio模拟Web应用 | |
◎appMobi |
appMobi和Intel HTML5开发环境 appMobi的API XDK的功能 |
实例:Phone的接口实例 |