C移动互联网时代的应用开发杨丰盛.pptVIP

移动互联网时代的应用开发 Web App的发展战略与实践 内容概要 Web App的发展战略 移动应用进入互联网时代！ Native App怎么样？ Web App又如何？ 怎么办？ Web App HTML5？ Web App开发的要点及实战 Web App解决方案！ 全新的UI设计 统一的多媒体方案 更强的数据存储能力 通过WebSocket实现双向通信 WebGL让游戏开发更容易 设备的特有功能 移动应用进入互联网时代 热门关键词 移动应用（app store、android market…） 3G\4G 云计算 智能手机、智能电脑、智能家居… 移动终端 HTML5 热门产品 移动互联网应用的标准 开发成本 用户体验 运营（收益）模式 UI设计 高性能、高效率 安全性 Native App怎么样？ 不同平台：不同开发、不同体验、不同模式 最优UI 最佳体验 最好交互 最强开发工具 最成熟 最高成本 最难维护 最怕盗版 Web App又如何？ 不同平台：相同开发、相同体验、模式混乱 最低成本 最多终端 最易更新 最新技术 最差兼容 最坏体验 最弱交互 最耗流量 最缺原生支持 怎么办？ 乔布斯曾表示，虽然现阶段Native给了用户更好的体验，但Web才是未来。“如果现在的开发者不有效的利用Web技术，那他就落伍了。但如果过分依赖Web，完全不用Native那也未必就是好事。” 让用户自己决定！ Web App HTML5？ Web App解决方案！ Web服务器 数据库服务器 前端UI JavaScript HTML5 CSS WebView Web SQL Socket/Http 浏览器 移动终端 设备特性 全新的UI设计 HTML5新标签 CSS3 Canvas 使用HTML5标签的原则 绝对不能少的可行性检查 必须的兼容性处理 省略不必要的属性 部分不必要的最好不要省 准确理解和使用新标签语意及其功能 不同的需求使用不同的元素 自定义属性更强大 不支持的元素\属性不要用 正确的处理用户需求，提高用户体验 又爱又恨的CSS3！ “爱”在何处？ 圆角效果（border-radius） 阴影效果 颜色及透明 使用@font-face定制字体 渐变效果 旋转和平移 动画 “恨”在何方？ 兼容性 CSS验证 代码臃肿 Canvas让前端更精彩 Canvas的功能 统一UI 图形图像渲染 帧动画 建议及注意事项 刷新频率requestAnimationFrame 使用putImageData而不使用drawImage 尽可能指定较小的刷新区域clearRect 尽量使用小图片进行缩放 尽量使用bmp图片 不要多个Canvas重叠 使用双缓冲技术 一次性绘制 减少画布状态的切换 统一的多媒体方案 audio video Ffmpeg HTML5MEDIO /etianen/html5media script src=/1.1.4/html5media.min.js/script 更强的数据储存能力 sessionStorage localStorage Web sql 其他数据库 性能，安全 WebSocket实现双向通信 关键字 高性能、并发、多线程… node.js git clone git:///joyent/node.git cd node ./configure make sudo make install 数据库 Ws服务器(node.js) 浏览器 [ PC、android、ios… ] 其他服务器 WebGL让游戏开发更容易 WebGL比Canvas效率更高 硬件加速 JavaScript计算性能 材质、纹理导入 /mrdoob/three.js/ 设备特有性能 移动设备的硬件接口API 摄像头、话筒、重力感应器、GPS等硬件设备等 Javascript与原生代码交互 例：PhoneGap 其他特性 HTML5地理定位API HTML5离线缓存 谢谢！ /yairn 1.1：进入互联网时代，移动互联网时代应用的标准 * 腾讯开放平台，百度开放平台 * 开发成本：开发难度、跨平台性 运营模式：market、store、广告、离线、联网、支付模块 安全性：沙盒机制 * 取长补短，综合共同发展！让用户自己选择并逐渐适应web app. * Html5的新特征，可以解决传统HTML中的哪些问题？ * Google Map开始测试WebGL * 1.1：进入互联网时代，移动互联网时代应用的标准 * 腾讯开放平台，百度开放平台 * 开发成本：开发难度、跨平台性 运营模式：market、store、广告、离线、联网、支付模块 安全性：沙盒机制 * 取长补短，综合共同发展！让用户自己选择并逐渐适应