用HTML5新特性开发移动App_蒋宇捷

用HTML5新特性开发移动App蒋宇捷Web技术的发展1993199519961999200520081996移动App分类WebAppHybridAppNativeApp移动WebApp的巨大价值•云端升级•跨平台•代码复用•结合强大的云运算能力•绕过Store•HTML5与移动WebApp•下面要讲到的内容移动设备有哪些重要的特性？HTML5ContactAPIHTML5ContactAPIContactAPIRead/FindUpdate/Add(vCard)HTML5CalendarAPIHTML5ContactAPI//执行一个通讯录搜索。获取“name”和“emails”属性。//同时初始化过滤列表到包含“yujie”的联系人记录navigator.contacts.find(['name','emails'],success,error,{filter:‘yujie'});functionsuccess(contacts){//获取联系人对象后进行处理for(variincontacts){//遍历所有的联系人alert(contacts[i].name);//弹出联系人的姓名}}functionerror(err){//获取数据错误时进行处理alert(err.code);//弹出错误号}HTML5MessagingAPIMailto:SMS:MMS:话筒摄像头•HTMLMediaCaptureAPI•TheMediaCaptureAPIHTMLMediaCaptureAPIHTML5VibrationAPInavigator.vibrate([2000,1000,1000]);HTML5SystemInformationAPI电池CPUAVCodes存储输入输出Device2G/3GWiFi带宽信号强度iPMacNetwork亮度声音温度气压临近Sensor输入iPnavigator.system.watch(Power,success,null,{lowThreshold:0.2});functionsuccess(power){navigator.system.get(OutputDevices,function(devices){for(vari=0;idevices.displays.length;i++)navigator.system.set(Display,{id:devices.displays[i].id,brightness:0.5});});}HTML5DeviceAPIDeviceAPISystemInfoAPIDevice特性Network特性Sensor结果CalendarAPIContactAPIVibrationAPIMessagingAPIMediaCaptureAPIHTML5DeviceOrientationEvent•Deviceorientation：方向•Devicemotion：运动Adobe与HTML5HTML5HTML5OperaGoogleAppleHTML5微软IEonlyIE微软FlashAdobeHTML5AdobeHTML5MozillaCSS3区域模块（Region）•故事线•区域样式•内容形状和环绕CSS3着色器（Shaders）•什么是着色器•着色器的特点•响应式网页设计CSS3媒介查询（MediaQueries）/*宽度小于等于980px时*/@mediascreenand(max-width:980px)#head{width:95%;}#content{width:60%;}#sidebar{width:30%;}}/*宽度小于等于700px时*/@mediascreenand(max-width:700px)#content{width:auto;float:none;}#sidebar{width:auto;float:none;}}CSS3媒介分页（PagedMedia）html{height:100%;overflow:paged-x;}html{height:100%;overflow:paged-x;}NativeApp和WebApp的鸿沟？地理位置定位地理位置定位GeolocationAPI音频视频Audio&Video震动VibrationAPI短信、彩信MessagingAPI数据库IndexedDB消息推送Sever-SentEvent摄像头&语音摄像头MediaCaptureAPI本地文件读写File&WriterAPI陀螺仪重力感应重力感应DeviceOrientationEvent图像处理FilterEffect通讯录、日历通讯录、日历Contact&CalendarAPI设备适配MediaQueries页面布局Region&PagedMedia多点触摸TouchEventHTML5的移动浏览器支持特性GeolocationAPIDeviceOrientationEventSystemInfoAPI：NetworkMediaCaptureAPIMobileMini•HTML5不能做到的十件事•规范还在讨论和完善中•运行和渲染性能需要提高•开发者的挑战•开发模式需要摸索和积累•但是…HTML5的问题？云加端的解决方案云存储云环境消息服务关系服务WebApp开放API缓存服务开发者最好的时代