Html5 weibo.20110605

  • 370 views
Uploaded on

Lecture in China First HTML5 Game Conference

Lecture in China First HTML5 Game Conference

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
370
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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