《使用HTML5开发跨平台应用》由会员分享,可在线阅读,更多相关《使用HTML5开发跨平台应用(21页珍藏版)》请在金锄头文库上搜索。
1、 微博客户端的开发案例使用HTML5开发跨平台应用杜亚波 / 邱智钢杜亚波掌中宽途开发总监=+我们们都是HTML5 Fans 邱智钢软通动力前端开发主管面对无数的应用,我们要做什么?多平台微博客户端 具有丰富的用户体验 支持移动设备 用户体验一致(跨平台无差异)需求传统传统 移动动互联联网跨平台应应用开发发模式面对众多选择,我们该怎么取舍?多平台微博客户端 具有丰富的用户体验 支持移动设备 用户体验一致(跨平台无差异)需求 入门门槛 低 开发快速 成本低(一个团队 )技术框架HTML5技术术跨平台移动应动应 用开发发开放式的统一标准完美的硬件能力调用开发入门门槛 低,开发者众多应用程序商店优秀
2、的跨平台能力技术选术选 型让我们开工吧 !但是,怎么做 ?多平台微博客户端 具有丰富的用户体验 支持移动设备 用户体验一致(跨平台无差异)需求 入门门槛 低 开发快速 成本低(一个团队 )技术框架 HTML5的特性 HTML5解决了什么问题代码开发同时我们利用PhoneGap移动开发框架,将我们的HTML5版本 的微博应用快速移植到了iOS, Android等平台,为用户提供对 应的native app的安装模式。HTML5版新浪微博应用,整体参考新浪官方ipad版本应用,真正 实现了一次开发,处处运行的梦想。跨各类主流桌面浏览器,并为 智能终端(iOS, android)进行了适配,为用户提
3、供了一致的跨平 台应用体验。Web开发发“三剑剑客”HTML5 “本地”应应用HTML5 文档语义 化Offline + Web StorageCSS3 特效的使用适配移动终 端推荐使用http:/gsnedders.html5.org/outliner 来使得整个文档的结构更加合理化/HTML5 文档语义 化Cache.manifestOffline + Web StroageWeb Storage localStorage sessionStorage离线应用 applicationCache渐变(gradient)图层阴影(box-shadow)圆角(border-radius)CSS3
4、特效media screenEmailURLNumbers适配移动终 端onorientationchange适配移动终 端键盘类键盘类 型适配 Email url Numbers横竖竖屏适配 onorientationchange media screen 多平台微博客户端 具有丰富的用户体验 支持移动设备 用户体验一致(跨平台无差异)需求 入门门槛 低 开发快速 成本低(一个团队 )技术框架 HTML5的特性 HTML5解决了什么问题代码开发 易部署 易维护 发布 部署应用演示Web版本演示iOS/Android 浏览浏览 器版本演示iOS/Android 本地应应用演示谢谢 Thank you联联系我们们:http:/ weibo:邱智钢钢