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