0
使用HTML5开发跨平台应用              —— 微博客户端的开发案例      杜亚波 / 邱智钢
杜亚波           =                +掌中宽途开发总监           我们都是HTML5 Fans                  @邱智钢               软通动力前端开发主管
• 多平台微博客户端 需求     • 具有丰富的用户体验        • 支持移动设备        • 用户体验一致(跨平台无差异)        • 入门门槛低技术框架    • 开发快速        • 成本低(一个团队)     ...
面对无数的应用,我们要做什么?
• 多平台微博客户端需求   • 具有丰富的用户体验     • 支持移动设备     • 用户体验一致(跨平台无差异)
传统移动互联网跨平台应用开发模式
面对众多选择,我们该怎么取舍?
• 多平台微博客户端 需求    • 具有丰富的用户体验       • 支持移动设备       • 用户体验一致(跨平台无差异)       • 入门门槛低技术框架   • 开发快速       • 成本低(一个团队)
技术选型HTML5技术跨平台移动应用开发开放式的统一标准完美的硬件能力调用开发入门门槛低,开发者众多应用程序商店优秀的跨平台能力
但是,怎么做?让我们开工吧!
• 多平台微博客户端 需求    • 具有丰富的用户体验       • 支持移动设备       • 用户体验一致(跨平台无差异)       • 入门门槛低技术框架   • 开发快速       • 成本低(一个团队)       • HT...
HTML5版新浪微博应用,整体参考新浪官方ipad版本应用,真正实现了一次开发,处处运行的梦想。跨各类主流桌面浏览器,并为智能终端(iOS, android)进行了适配,为用户提供了一致的跨平台应用体验。同时我们利用PhoneGap移动开发框架...
Web开发“三剑客”HTML5 “本地”应用
HTML5 文档语义化Offline + Web StorageCSS3 特效的使用适配移动终端
HTML5 文档语义化推荐使用http://gsnedders.html5.org/outliner来使得整个文档的结构更加合理化/
Cache.manifestWeb Storage• localStorage Offline   + Web Stroage• sessionStorage离线应用• applicationCache
渐变(gradient)                     CSS3特效图层阴影(box-shadow) 圆角(border-radius)
适配移动终端onorientationchange  @media screen     Numbers      Email       URL
适配移动终端键盘类型适配• Email• url• Numbers横竖屏适配• onorientationchange• @media screen
• 多平台微博客户端 需求     • 具有丰富的用户体验        • 支持移动设备        • 用户体验一致(跨平台无差异)        • 入门门槛低技术框架    • 开发快速        • 成本低(一个团队)     ...
应用演示Web版本演示iOS/Android 浏览器版本演示iOS/Android 本地应用演示
谢谢  Thank you联系我们: http://www.mhtml5.com blessdyb@gmail.com      weibo:@邱智钢
Upcoming SlideShare
Loading in...5
×

Html5 weibo.20110605

387

Published on

Lecture in China First HTML5 Game Conference

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
387
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 weibo.20110605"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×