• 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. 谢谢观看