用HTML5新特性开发移动app

4,084 views

Published on

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

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • Impressive! Web app is going to be the game changer. Check out this article concerning web app and wechat marketing in China by TMO Group:” Top 5 Reasons You Should Choose Web App Over Native App” (link: http://bit.ly/1QrHDAf) Please let us know what you think. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,084
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
87
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

用HTML5新特性开发移动app

  1. 1. 用HTML5新特性开发移动App 蒋宇捷
  2. 2. Web技术的发展 1993 19951996 1999 2005 2008
  3. 3. 移动App分类 Native App Web App Hybrid App
  4. 4. 移动Web App的巨大价值• 云端升级• 跨平台• 代码复用• 结合强大的云运算能力• 绕过Store• HTML5与移动Web App• 下面要讲到的内容
  5. 5. 移动设备有哪些重要的特性?
  6. 6. HTML5 Contact API
  7. 7. HTML5 Contact API Contact API
  8. 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. 9. HTML5 Messaging API Mailto: SMS: MMS:
  10. 10. HTML Media Capture API 话筒 摄像头• HTML Media Capture API• The Media Capture API
  11. 11. HTML5 Vibration APInavigator.vibrate([2000, 1000, 1000]);
  12. 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. 13. HTML5 Device API Device特性 System Info API Network特性 Calendar API Sensor结果 Contact API Device API Vibration API Messaging API Media Capture API
  14. 14. HTML5 DeviceOrientation Event• Deviceorientation:方向• Devicemotion:运动
  15. 15. Adobe与HTML5 Google Opera Mozilla HTML5 Adobe 微软 Adobe 微软 Apple Flash IE only
  16. 16. CSS3区域模块(Region)• 故事线• 区域样式• 内容形状和环绕
  17. 17. CSS3着色器(Shaders)• 什么是着色器• 着色器的特点
  18. 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. 19. CSS3媒介分页(Paged Media) html { height: 100%; overflow: paged-x; }
  20. 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. 21. HTML5的移动浏览器支持 特性 Mobile MiniGeolocationAPIDeviceOrientation EventSystem InfoAPI:NetworkMediaCapture API
  22. 22. HTML5的问题?• HTML5不能做到的十件事• 规范还在讨论和完善中• 运行和渲染性能需要提高• 开发者的挑战• 开发模式需要摸索和积累• 但是…
  23. 23. 云加端的解决方案 消息服 云环境 务 缓存服 务 云存储 关系服 务 开放API Web App
  24. 24. 开发者最好的时代
  25. 25. 谢谢

×