用贬罢惭尝5新特性开发移动补辫辫
?Download as PPTX, PDF?
7 likes?1,716 views
2012百度开发者大会，移动互联网论坛，《用贬罢惭尝5新特性开发移动础辫辫》-来自蒋宇捷。相关博文：丑迟迟辫://产濒辞驳.肠蝉诲苍.苍别迟/丑蹿补丑别/补谤迟颈肠濒别/诲别迟补颈濒蝉/7388938。
![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](https://image.slidesharecdn.com/html5app-120323100517-phpapp02/85/HTML5-app-8-320.jpg)
![HTML5 Vibration API
navigator.vibrate([2000, 1000, 1000]);](https://image.slidesharecdn.com/html5app-120323100517-phpapp02/85/HTML5-app-11-320.jpg)
![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 输出](https://image.slidesharecdn.com/html5app-120323100517-phpapp02/85/HTML5-app-12-320.jpg)
用贬罢惭尝5新特性开发移动补辫辫
- 1. 用贬罢惭尝5新特性开发移动础辫辫 蒋宇捷
- 2. 奥别产技术的发展 1993 1995 1996 1999 2005 2008
- 3. 移动App分类 Native App Web App Hybrid App
- 4. 移动Web App的巨大价值 ? 云端升级 ? 跨平台 ? 代码复用 ? 结合强大的云运算能力 ? 绕过Store ? HTML5与移动Web App ? 下面要讲到的内容
- 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. 础诲辞产别与贬罢惭尝5 Google Opera Mozilla HTML5 Adobe 微软 Adobe 微软 Apple Flash IE only
- 16. CSS3区域模块（Region） ? 故事线 ? 区域样式 ? 内容形状和环绕
- 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. 贬罢惭尝5的移动浏览器支持 特性 Mobile Mini Geolocation API DeviceOrient ation Event System Info API： Network Media Capture API
- 22. HTML5的问题？ ? HTML5不能做到的十件事 ? 规范还在讨论和完善中 ? 运行和渲染性能需要提高 ? 开发者的挑战 ? 开发模式需要摸索和积累 ? 但是…
- 23. 云加端的解决方案 消息服 云环境 务 缓存服 务 云存储 关系服 务 开放API Web App
- 24. 开发者最好的时代
- 25. 谢谢