Your SlideShare is downloading. ×
0
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
用HTML5新特性开发移动app
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

用HTML5新特性开发移动app

3,322

Published on

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

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

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,322
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
85
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 用HTML5新特性开发移动App 蒋宇捷
  • 2. Web技术的发展 1993 19951996 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 APInavigator.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 MiniGeolocationAPIDeviceOrientation EventSystem InfoAPI:NetworkMediaCapture API
  • 22. HTML5的问题?• HTML5不能做到的十件事• 规范还在讨论和完善中• 运行和渲染性能需要提高• 开发者的挑战• 开发模式需要摸索和积累• 但是…
  • 23. 云加端的解决方案 消息服 云环境 务 缓存服 务 云存储 关系服 务 开放API Web App
  • 24. 开发者最好的时代
  • 25. 谢谢

×