1. 移动Web技术交流十月 18 2. — 之需求分析HTML5简介
移动WEB技术介绍
移动WEB开发框架-jQuery Mobile 3. HTML5简介
发展历史
特性
CSS3与HTML5
HTML5 VS FLASH
浏览器兼容性
HTML5与互联网广告
开发工具与在线演示
总结
4. 简介下一代HTML
深受欢迎
解决三个问题 5. 简介HTML4HTML5 6. 发展历史W3C发布HTML4.01W3C发布XHTML 1.0W3C内部对XHTML2产生分歧，WHATWG成立W3C 解散XHTML 2工作组W3C和WHATWG合作开发下一代HTMLHTML5成为候选标准HTML5成为推荐标准HTML5第一份正式草案公布 7. 特性-技术概览语义化 —— 提升用户体验，有利于搜索引擎和屏幕阅读器的抓取。
本地存储和离线应用程序
获取地理信息位置
Web Sockets
Canvas 8. 特性-语义化结构更加清晰明确。 9. 特性-语义化表单增强， HTML5为表单提供了几个新的属性、input 类型和标签。 10. 特性-语义化多媒体播放。没有HTML5的时候，我们需要借助Flash的力量。 11. 特性-语义化多媒体播放。HTML5新增和标签使得浏览器不需要插件即可播放视频和音频。 12. 特性-技术概览语义化
本地存储和离线应用程序
获取地理信息位置
Web Sockets
Canvas 13. 特性-本地存储和离线应用程序HTML4
使用cookie在客户端存储数据；
大小受限制，占用带宽，操作复杂
HTML5
使用Web Storage在客户端存储数据
容量更大，减轻带宽压力，操作简便 14. 特性-本地存储和离线应用程序离线应用程序。没有接入Internet也可以使用Web应用。 15. 特性-技术概览语义化
本地存储和离线应用程序
获取地理信息位置 —— 更丰富的用户数据
Web Sockets
Canvas 16. 特性-技术概览语义化
本地存储和离线应用程序
获取地理信息位置
Web Sockets —— 推送服务
Canvas 17. 特性-技术概览语义化
本地存储和离线应用程序
获取地理信息位置
Web Sockets
Canvas —— 摆脱插件，更佳的效果 18. 特性-Canvas看看大家都在说什么！ 19. CSS3最佳组合 20. HTML5 VS FLASH你在浏览器中看到的大多数内容都是由HTML所创建的，但是一直以来都限制于图片和文本。很久以来，人们只能依赖一个叫做FLASH的技术用于开发浏览器中丰富、动态和交互的内容，比如音频、视频和SVG（无损放大的矢量图）。据Adobe称，超过99%的互联网用户使用它。但是，当FLASH碰到HTML5的时候。。。 21. HTML5 VS FLASH 22. 浏览器兼容性Google Chrome
Mozilla Firefox
Opera
Apple Safari
Microsoft Internet Explorer 23. HTML5与互联网广告Gartner的分析师Nick Jones提出了未来四年移动和无线技术值得关注的十大趋势： 1.HTML5 2.NFC（近距离无线通讯技术）及类似支付之类的“触动”应用 3.独立于平台的广告工具 4.位置和周边（室内外）定位 ……
艾瑞视点：2013年全球支持HTML5手机有望达到10亿部
富媒体广告
案例1：沃尔沃S60新车上市媒体推广
案例2：美剧《猫鼠游戏》投放HTML5富媒体广告
案例3：苹果iPod touch日本投放HTML5富媒体广告
24. 优秀网站http://www.digitalhands.net/
http://apisnetworks.com/
http://morehazards.com/
25. 总结减少工作量；
提高开发效率；
普及仍需时间，但不影响在移动终端上的应用；
在一些内部应用上可以考虑指定浏览器并使用HTML5进行开发。
26. — 之需求分析HTML5简介
移动WEB技术介绍
移动WEB开发框架-jQuery Mobile 27. 传统网站面临的挑战
随着手机和平板电脑普及，传统信息类和电子商务网站因市场需求向移动端转移。这面临着挑战，传统网站在终端不能很好的适应，需要做移动站点；客户端应用由于Android、IOS等多种平台存在，开发、维护成本高。
机遇与挑战并存
移动Web技术，利用浏览器、HTML5、JavaScript跨平台特性，提供通用的解决方案。一次编码，可以做为移动站点支持手机和平板电脑，包装成客户端应用支持Android、IOS等主流平台。
移动Web技术优势
通用性，移动站点、跨平台的客户端应用提供统一的解决方案。
较低的开发和维护成本，因为您只需要一次编码。
移动Web技术目前适合场景
以信息为主的应用，不适合对性能要求过高的产品。移动Web发展机遇和技术优势— 之需求分析 28. Web移动站点
（手机、平板电脑）客户端应用
（Android、IOS）客户端应用
（其他平台）移动Web发展机遇和技术优势— 平台示意图 29. www.html5mobi.com移动Web开发框架分析和选择 以移动Web开发客户端为例，整体架构如下：
UI层负责页面布局，可自行实现或使用现有框架，框架优美之处在于封装常用布局和公共组件，开发者只需关注业务逻辑，推荐框架jQueryMobile和SenchaTouch。
移动中间件，处于UI层和终端系统之间，封装各系统差异，提供统一的JavaScript接口，操作系统资源，如：文件系统、摄像头等，推荐PhoneGap。
终端系统，处于整个应用的最底层，除非需要扩展PhoneGap接口，否则开发者可以不关心。
— 之总体架构UI层移动中间件终端系统jQueryMobileSencha Touch
…PhoneGap
…Android、IOS
… 30. 移动Web开发框架分析和选择 — 之jQueryMoble介绍jQueryMobile 支持较多平台：
建立在jQuery框架之上，为其跨平台能力提供良好的基础。
支持较好的平台有：Apple IOS 3.2-5.0Beta、Android 2.1-2.3、windows phone7、Blackberry、Firfox Mobile、Chrome Desktop 11-13 等，请参照官网。
布局自适应手机、平板电脑和PC。
结合PhoneGap，可生成跨平台移动客户端。
较丰富的组件支持，官方组件演示链接。
31. 移动Web开发框架分析和选择 — 之jQueryMoble典型布局jQueryMobile 典型的页面布局
根据data-role属性做组件渲染，page包含head、navbar、content ，page
为显示设备可视区域的一屏，多个page可以放在一个页面或一个独立的HTML页面。
开源项目参考
示例代码和界面为“移动Web开发社区”开源项目。
请点击链接查看源代码。
32. 移动Web开发框架分析和选择 — 之jQueryMoble事件和数据加载jQueryMobile 提供事件监听机制，在页面创建或显示时，提供回调函数。
如下面的示例代码，在分类页面创建时，用JSONP方式从服务器端，取回数据，然后填充页面内容。
也可用JSP、PHP等语言，在服务端打印内容。 33. 移动Web开发框架分析和选择 — 之Sencha Touch 2Sencha Touch
对于开发者而言，可简单认为Sencha Touch是ExtJS在移动端的版本。ExtJS在PC领域，UI样式和交互设计都贴近传统的客户端软件。所以非常适合做移动客户端应用。
支持以Webkit为核心的平台
Android、iPhone、BlackBerry。 Sencha官网在10月11日发布SenchaTouch2开发者预览版，被称为历史性改变，下面列出部分新特性：
ExtJS4为核心,支持类动态加载机制，按需使用JavaScript文件。
更清晰的MVC模式。API设计更加简单，比如：统一接口进行类定义和实例化操作。
自动化程度提高，不再需要对View、Model等组件手动注册。Sencha Touch 2 官方指南中文版
10月14日，“移动Web开发社区”发起了对ST2官方指南的翻译工作，了解更多特性请链接这里。
在此感谢社区成员：威老、bamboo、若天、桔子、terry 为官方指南的翻译工作做出的贡献！ 学习成本较高
纯JavaScript编码实现布局，需熟悉MVC开发模式和组件之间关系。 34. 移动Web开发框架分析和选择 — 之Sencha Touch 2 MVC模式介绍MVC模式介绍
数据模型层Model包括对数据的基本描述，如字段名称和类型；Store 缓存来自Model的数据，
并且提供排序、过滤等方法，通常Store会和视图层、业务控制层打交道。
代表视图层(View) ，为数据提供展现方式，如：列表式展现或其他方式。
业务控制层（Controller）主要负责事件监听和业务处理。
35. 移动Web开发框架分析和选择 — 之Sencha Touch 2 一般开发过程 建立应用，配置应用命名空间、控制器和数据模型 新建讨论列表数据模型Model，Proxy为服务器端数据交换接口。 以“移动Web开发社区”客户端，讨论列表为例，介绍其开发过程。该客户端为开源项目，
请关注社区发布源代码。 36. 移动Web开发框架分析和选择 — 之Sencha Touch 2 一般开发过程 新建数据存储Store，绑定Model，为视图层提供数据访问。 新建讨论列表视图，绑定Store。 37. 移动Web开发框架分析和选择 — 之Sencha Touch 2 一般开发过程 控制器里注册事件监听和业务处理。 总结Sencha Touch 更加完善，团队有ExtJS开发人员，可优先选择。
jQueryMobile适合一般信息类网站，快发速度快。
Sencha Touch 2 目前为开发者预览版，不建议在实际项目中使用。 38. 移动Web开发框架分析和选择 — 之PhoneGap PhoneGap 提供一组JavaScript 接口，访问设备本地API，
而对其实行过程进行了很好的封装，支持多平台。 插件机制，可方便扩展PhoneGap接口。 提供对设备文件系统、摄像头、手机联系人、数据存储等能力。 39. 移动Web开发框架分析和选择 — 之PhoneGap云编译 PhoneGap build 云打包应用
开发人员上传程序压缩文件到云编译平台：https://build.phonegap.com/，可在线下载IOS、Android、
等平台运行程序。 40. www.html5mobi.com移动Web开发和调试工具 — 之DreamWeaver CS5.5 Dreamweaver CS5.5集成应用开发环境集成jQueryMobile 和 PhoneGap框架，支持Android 虚拟机。 详细安装方法请见 “移动Web开发社区”网站。 41. 移动Web开发和调试工具 — 之远程调试工具 PhoneGap 远程调试工具Weinre，官方网站链接 jsconsole.com，官方链接在PC浏览器例如Chrome控制台，捕捉PhoneGap在移动设备上运行的错误，查看移动设备的DOM文档。在官方提供的网页中，输入JavaScript命令，在终端设备执行，多用于查看JavaScript变量等。 42. 移动Web技术资源和前景展望 “移动Web开发社区”提供丰富的移动Web技术资源 前景展望 jQueryMobile 开源项目
Sencha Touch 2中文指南
Sencha Touch 2 & PhoneGap开源客户端（请关注”移动Web开发社区”发布源代码） HTML5技术的发展，为移动Web提供良好的基础。 开源框架发展前景看好，PhoneGap在被Adobe收购后，捐献给Apache开源组织。 Sencha Touch 2 在性能有很大改进，后续版本发布，我们始终保持关注。 43. 谢谢观看
