More Related Content Similar to 用HTML5新特性开发移动app (20) 用HTML5新特性开发移动app2. Web技术的发展
1993
1995
1996
1999
2005 2008
4. 移动Web App的巨大价值
• 云端升级
• 跨平台
• 代码复用
• 结合强大的云运算能力
• 绕过Store
• HTML5与移动Web App
• 下面要讲到的内容
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
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
15. Adobe与HTML5
Google
Opera Mozilla
HTML5
Adobe
微软 Adobe
微软 Apple
Flash
IE
only
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%; }
} }
}
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