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