2012百度开发者大会，移动互联网论坛，《用HTML5新特性开发移动App》-来自蒋宇捷。相关博文：http://blog.csdn.net/hfahe/article/details/7388938。

1. 用HTML5新特性开发移动App
蒋宇捷

2. Web技术的发展
1993
1995
1996
1999
2005 2008

3. 移动App分类
Native App Web App
Hybrid App

4. 移动Web App的巨大价值
• 云端升级
• 跨平台
• 代码复用
• 结合强大的云运算能力
• 绕过Store
• HTML5与移动Web App
• 下面要讲到的内容

5. 移动设备有哪些重要的特性？

6. HTML5 Contact API

7. HTML5 Contact API
Contact API

8. HTML5 Contact API
// 执行一个通讯录搜索。获取“name”和“emails”属性。
// 同时初始化过滤列表到包含“yujie”的联系人记录
navigator.contacts.find(['name', 'emails'], success, error, {filter: „yujie'});
function success(contacts) { // 获取联系人对象后进行处理
for(var i in contacts) { // 遍历所有的联系人
alert(contacts[i].name); // 弹出联系人的姓名
}
}
function error(err) { // 获取数据错误时进行处理
alert(err.code); // 弹出错误号
}
 Read/Find
 Update/Add(vCard)
 HTML5 Calendar API

9. HTML5 Messaging API
Mailto: SMS: MMS:

10. HTML Media Capture API
话筒 摄像头
• HTML Media Capture API
• The Media Capture API

11. HTML5 Vibration API
navigator.vibrate([2000, 1000, 1000]);

12. HTML5 System Information API
Network Sensor Device
2G/3G 电池
navigator.system.watch("Power",success,null,{lowThreshold:0.2});
function success(power) {
亮度
WiFi
navigator.system.get("OutputDevices", CPU
function(devices) { 声音
带宽 i=0; i<devices.displays.length; i++)
for(var
AVCodes
navigator.system.set("Display",{id:
温度
devices.displays[i].id, brightness: 0.5});
信号强度
}); 存储
} 气压
iP 输入
临近
Mac 输出

13. HTML5 Device API
Device特性
System Info
API Network特性
Calendar API
Sensor结果
Contact API
Device API
Vibration API
Messaging
API
Media
Capture API

14. HTML5 DeviceOrientation Event
• Deviceorientation：方向
• Devicemotion：运动

15. Adobe与HTML5
Google
Opera Mozilla
HTML5
Adobe
微软 Adobe
微软 Apple
Flash
IE
only

16. CSS3区域模块（Region）
• 故事线
• 区域样式
• 内容形状和环绕

17. CSS3着色器（Shaders）
• 什么是着色器
• 着色器的特点

18. CSS3媒介查询（Media Queries）
• 响应式网页设计
/* 宽度小于等于980px时 */ /* 宽度小于等于700px时 */
@media screen and (max-width: 980px) @media screen and (max-width: 700px)
#head { #content {
width: 95%; width: auto;
} float: none;
#content { }
width: 60%; #sidebar {
} width: auto;
#sidebar { float: none;
width: 30%; }
} }
}

19. CSS3媒介分页（Paged Media）
html {
height: 100%;
overflow: paged-x;
}

20. Native App和Web App的鸿沟？
地理位置定位 音频视频 震动 通讯录、日历 短信、彩信
Contact &
Geolocati Audio & Vibration Messagin
Calendar
on API Video API g API
API
数据库 消息推送 摄像头&语音 本地文件读写 设备适配
Sever- Media Media
IndexedD File &
Sent Capture Queries
B Writer API
Event API
陀螺仪
图像处理 页面布局 多点触摸
重力感应
DeviceOri Region &
Filter Touch
entation Paged
Effect Event
Event Media

21. HTML5的移动浏览器支持
特性
Mobile Mini
Geolocation
API
DeviceOrient
ation Event
System Info
API：
Network
Media
Capture API

22. HTML5的问题？
• HTML5不能做到的十件事
• 规范还在讨论和完善中
• 运行和渲染性能需要提高
• 开发者的挑战
• 开发模式需要摸索和积累
• 但是…

23. 云加端的解决方案
消息服
云环境 务
缓存服
务
云存储 关系服
务
开放API
Web
App

24. 开发者最好的时代

25. 谢谢