1 / 21

—— 微博客户端的开发案例

使用 HTML5 开发跨平台应用. —— 微博客户端的开发案例. 杜亚波 / 邱智钢. 杜亚波. +. =. 掌中宽途开发总监. @ 邱智钢. 软通动力前端开发主管. 面对无数的应用，我们要做什么？. 需求. 多平台微博客户端 具有丰富的用户体验 支持移动设备 用户体验一致（跨平台无差异）. 传统移动互联网跨平台应用开发模式. 面对众多选择，我们该怎么取舍？. 需求. 多平台微博客户端 具有丰富的用户体验 支持移动设备 用户体验一致（跨平台无差异）. 技术框架. 入门门槛低 开发快速 成本低（一个团队）. 技术选型.

gloria
Download Presentation

—— 微博客户端的开发案例

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 使用HTML5开发跨平台应用 —— 微博客户端的开发案例 杜亚波 / 邱智钢

  2. 杜亚波 + = 掌中宽途开发总监 @邱智钢 软通动力前端开发主管

  3. 面对无数的应用，我们要做什么？

  4. 需求 • 多平台微博客户端 • 具有丰富的用户体验 • 支持移动设备 • 用户体验一致（跨平台无差异）

  5. 传统移动互联网跨平台应用开发模式

  6. 面对众多选择，我们该怎么取舍？

  7. 需求 • 多平台微博客户端 • 具有丰富的用户体验 • 支持移动设备 • 用户体验一致（跨平台无差异） • 技术框架 • 入门门槛低 • 开发快速 • 成本低（一个团队）

  8. 技术选型

  9. 但是，怎么做？ 让我们开工吧！

  10. 需求 • 多平台微博客户端 • 具有丰富的用户体验 • 支持移动设备 • 用户体验一致（跨平台无差异） • 技术框架 • 入门门槛低 • 开发快速 • 成本低（一个团队） • 代码开发 • HTML5的特性 • HTML5解决了什么问题

  11. HTML5版新浪微博应用，整体参考新浪官方ipad版本应用，真正实现了一次开发，处处运行的梦想。跨各类主流桌面浏览器，并为智能终端（iOS, android)进行了适配，为用户提供了一致的跨平台应用体验。 同时我们利用PhoneGap移动开发框架，将我们的HTML5版本的微博应用快速移植到了iOS, Android等平台，为用户提供对应的native app的安装模式。

  12. Web开发“三剑客” • HTML5 “本地”应用

  13. HTML5 文档语义化 推荐使用http://gsnedders.html5.org/outliner来使得整个文档的结构更加合理化/

  14. Cache.manifest • Offline + Web Stroage

  15. 渐变(gradient) • CSS3特效 • 图层阴影(box-shadow) • 圆角(border-radius)

  16. 适配移动终端 onorientationchange @media screen • Email • URL • Numbers

  17. 适配移动终端

  18. 需求 • 多平台微博客户端 • 具有丰富的用户体验 • 支持移动设备 • 用户体验一致（跨平台无差异） • 技术框架 • 入门门槛低 • 开发快速 • 成本低（一个团队） • 代码开发 • HTML5的特性 • HTML5解决了什么问题 • 发布 部署 • 易部署 • 易维护

  19. 应用演示 • Web版本演示 • iOS/Android 浏览器版本演示 • iOS/Android 本地应用演示

  20. 谢谢 Thank you

More Related