Mobile App By  完颜 移动互联网时代的 设计和开发
Profile 完颜小卓 SMbey0nd 淘宝 [eTao] 无线 UED 前端工程师 热爱 Mobile Web
内容提要 现代移动互联网 Mobile App 的设计和开发 工具 前端创新 机遇与挑战
现代移动互联网 Modern Mobile Web (Mobile 2.0)
现代移动互联网  -  过去 WAP1.0 时代
现代移动互联网  -  过去 代表平台 ( 嵌入式 ) Symbian S40 Windows CE MTK 代表浏览器 内嵌 wap 浏览器 语言规范 WML / HTML(i-Mode) WAP1.0 时代
现代移动互联网  -  过去 WAP2.0 时代
现代移动互联网  -  过去 代表平台 Symbian S60 Windows Mobile MTK 代表浏览器 UCWEB/OperaMini 语言规范 XHTML Basic / XHTML Mobile Profile WAP2.0 时代
现代移动互联网  -  过去 WAP2.0  手机兼容性测试表格  –  淘宝无线 UED 前端组
现代移动互联网  -  过去 兼容性
现代移动互联网  -  现在 HTML5 时代
现代移动互联网  -  现在 代表平台 iOS Android Other OS 代表浏览器 Mobile Safari/Android Webkit 语言规范 HTML5 HTML5 时代
现代移动互联网  -  现在 Morgan Stanley - 2010 Mobile Internet Report
现代移动互联网  -  现在 iOS 、 Android ↑  Symbian ↓ m.taobao.com 2011.6
现代移动互联网  -  未来
现代移动互联网  -  未来 2011 年底:一半的美国人使用智能手机 2013 :移动互联网用户超 10 亿 2020 :全世界的网络访问主要来自手机 mobithing 2011
现代移动互联网  -  未来 ?
Mobile App 设计和开发 Design & Development
Mobile App 设计和开发 三种模式: 1.Native 2.Web 3.Hybrid(frame) Native Web Hybrid (frame)
Mobile App 设计和开发   -  三种模式 Native App iOS : Objective-C Android : Java Symbian : C++ 、 WRT(Widget) WP7 : C# 、 VB Native Hybrid (frame)
Mobile App 设计和开发   -  三种模式 Native App 此处略去一亿字… Native Hybrid (frame)
Web App HTML(5) +CSS(3) +JavaScript +Device API Mobile App 设计和开发   -  三种模式 Hybrid (frame) Web
Hybrid(frame) App {Native + Web} App Hybrid – Native 与 Web 完全混合 Frame –  纯 Native 框架形式( PhoneGap ) Mobile App 设计和开发   -  三种模式 Hybrid (frame)
Mobile App 设计和开发 Web App 1.HTML5(CSS3) 2. 浏览器兼容概览 3. 移动框架的抉择 4.Web App 开发实战 Hybrid (frame) Web
HTML5 Elements/Forms LocalStorage/IndexedDB GeoLocation Video/Audio Canvas/WebGL Web Workers Mobile App 设计和开发   -  Web App Hybrid (frame)
CSS3 Selector Border Background Text effects Transition/Transform/Animation Mobile App 设计和开发   -  Web App Hybrid (frame)
Device API Touch Event MultiTouch DeviceOrientation API WebClip Viewport Status Bar/Startup Image Mobile App 设计和开发   -  Web App Hybrid (frame)
浏览器兼容概览  –  iOS  4.3.3  Mobile Safari Mobile App 设计和开发   -  Web App Hybrid (frame) HTML5 Canvas √ Video √  (Ogg/WebM ×) Audio √  (Ogg/WebM ×) Elements ○ Forms ○  (search/tel/url/email  √ ) GeoLocation √ WebGL × Storage √  (IndexedDB ×) Workers × Device API TouchEvent √ DeviceOrientation API √ WebClip √ Viewport √ Status Bar/Startup Image √
浏览器兼容概览  –  Android  2.2  Webkit Mobile App 设计和开发   -  Web App Hybrid (frame) HTML5 Canvas √ Video ○  (Video codecs ×) Audio ○   (Audio codecs ×) Elements ○ Forms ○  (search/tel/url/email  √ ) GeoLocation √ WebGL × Storage √  (IndexedDB ×) Workers × Device API TouchEvent ○ (MultiTouch ×) DeviceOrientation API ○ WebClip √ Viewport √ Status Bar/Startup Image ×
Mobile App 设计和开发   -  Web App Hybrid (frame) Video codecs × Audio codecs ×
移动框架的抉择 交互集成框架 Sencha Touch jQuery Mobile DHTMLX Touch/iUI/iWebkit(iOS)/… 纯 JavaScript 框架 Zepto.js 应用开发平台框架 PhoneGap Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 HTML5 应用实例 Elements/Form/GeoLocation CSS3 应用实例 Device API 应用实例 基本包装 /ScrollLayer/Shake! Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -HTML5 应用实例 Elements Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -HTML5 应用实例 Form Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -HTML5 应用实例 GeoLocation navigator.geolocation. getCurrentPosition successCallback errorCallback positionOptions watchPosition clearWatch Mobile App 设计和开发   -  Web App Hybrid (frame) Will come true on
开发实战 -HTML5 应用实例 GeoLocation Mobile App 设计和开发   -  Web App Hybrid (frame) Will come true on
开发实战 -CSS3 应用实例 Mobile App 设计和开发   -  Web App Hybrid (frame) selector/border-radius/gradient/box-shadow/transition/animation …
开发实战 -Device API 应用实例 本地化基本包装 Viewport Width initial-scale / maximum-scale  user-scalable  Capable WebClip icon Startup image Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -Device API 应用实例 本地化基本包装 Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -Device API 应用实例 ScrollLayer touchstart/touchmove/touchend e.touches // 所有手指列表 e.targetTouches // 当前 Dom 手指列表 e.changedTouches // 当前事件手指列表 clientX / screenX / pageX target identifier … Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -Device API 应用实例 ScrollLayer Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -Device API 应用实例 Shake! ondevicemotion e. accelerationIncludingGravity X Y Z Mobile App 设计和开发   -  Web App Hybrid (frame)
开发实战 -Device API 应用实例 Shake! Mobile App 设计和开发   -  Web App Hybrid (frame)
Mobile App 设计和开发 Hybrid App 1. 权衡利弊 2.WebView 3. 双向通信技术解析 4.Hybrid App 开发实战 Hybrid (frame) Hybrid (frame)
权衡利弊 Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Hybrid (frame) Native   vs.   Web Native Web
权衡利弊 Native 的优势: 速度 功能 表现 性能 Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Hybrid (frame) Native
权衡利弊 Web 的优势: 效率 成本 (跨平台) 更新 复用 Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Hybrid (frame) Web
权衡利弊 适合的 才是最好的 Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Web Hybrid (frame)
WebView 它是 Webkit 在 SDK 中封装而成的一个组件 Java 和 JavaScript 通过 WebView 的接口进行通信 Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Naive
双向通信技术解析 Native 调用 Web loadUrl 方法 webview.loadUrl("javascript:foo()"); Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Naive
双向通信技术解析 Web 调用 Native 超链接监听 <a href=“http://a.com/?b”> 监听 b 参数 </a> addJavascriptInterface 方法 addJavascriptInterface(Object obj,String interfaceName) // 将一个 java 对象绑定到一个 javascript 对象中 Native : webview.addJavascriptInterface(Foo,“GoAction”); Web : Javascript:window.GoAction.Foo(); Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Naive
开发实战 Hybrid Mobile App 设计和开发   -  Hybrid App Hybrid (frame)
开发实战 Hybrid Mobile App 设计和开发   -  Hybrid App Hybrid (frame)
工具 Tools
模拟器 Android SDK Emulator iPhone SDK Simulator(MacOS only) Windows Phone Emulator Opera Mobile Emulator 工具 Hybrid (frame)
在线工具 HTML5 : http://html5test.com/ http://www.caniuse.com/ CSS3 : http://css3generator.com/ http://www.css3.info/selectors-test/ http://css3please.com/ Other : http://detectmobilebrowser.com/ http://www.vodori.com/blog/phantom-limb.html http://www.quirksmode.org/m/ …… 工具 Hybrid (frame)
前端创新 Innovation
机遇与挑战 Opportunities & Threats
前沿敏感度 格局变化性和应对 HTML5/CSS3 Device API 平台多样性 / 差异性 / 兼容性 JavaScript 框架 性能 外界因素 硬件设备与调试 你的激情 机遇与挑战 Hybrid (frame)
机遇与挑战 Hybrid (frame) 激情过后 你会觉得……
Mobile Design is the art of Communicating within an Environment of Mobility. - Cameronmoll 一切技术以体验为本 Hybrid (frame)
Q&A , and Other… 无线前端联盟群: 793745802 与我联系:完颜 weibo.com/Mario 团队微博: weibo.com/MobileUED
谢谢 再见

移动互联网时代的Mobile app设计和开发

  • 1.
    Mobile App By 完颜 移动互联网时代的 设计和开发
  • 2.
    Profile 完颜小卓 SMbey0nd淘宝 [eTao] 无线 UED 前端工程师 热爱 Mobile Web
  • 3.
    内容提要 现代移动互联网 MobileApp 的设计和开发 工具 前端创新 机遇与挑战
  • 4.
  • 5.
    现代移动互联网 - 过去 WAP1.0 时代
  • 6.
    现代移动互联网 - 过去 代表平台 ( 嵌入式 ) Symbian S40 Windows CE MTK 代表浏览器 内嵌 wap 浏览器 语言规范 WML / HTML(i-Mode) WAP1.0 时代
  • 7.
    现代移动互联网 - 过去 WAP2.0 时代
  • 8.
    现代移动互联网 - 过去 代表平台 Symbian S60 Windows Mobile MTK 代表浏览器 UCWEB/OperaMini 语言规范 XHTML Basic / XHTML Mobile Profile WAP2.0 时代
  • 9.
    现代移动互联网 - 过去 WAP2.0 手机兼容性测试表格 – 淘宝无线 UED 前端组
  • 10.
    现代移动互联网 - 过去 兼容性
  • 11.
    现代移动互联网 - 现在 HTML5 时代
  • 12.
    现代移动互联网 - 现在 代表平台 iOS Android Other OS 代表浏览器 Mobile Safari/Android Webkit 语言规范 HTML5 HTML5 时代
  • 13.
    现代移动互联网 - 现在 Morgan Stanley - 2010 Mobile Internet Report
  • 14.
    现代移动互联网 - 现在 iOS 、 Android ↑ Symbian ↓ m.taobao.com 2011.6
  • 15.
  • 16.
    现代移动互联网 - 未来 2011 年底:一半的美国人使用智能手机 2013 :移动互联网用户超 10 亿 2020 :全世界的网络访问主要来自手机 mobithing 2011
  • 17.
  • 18.
    Mobile App 设计和开发Design & Development
  • 19.
    Mobile App 设计和开发三种模式: 1.Native 2.Web 3.Hybrid(frame) Native Web Hybrid (frame)
  • 20.
    Mobile App 设计和开发 - 三种模式 Native App iOS : Objective-C Android : Java Symbian : C++ 、 WRT(Widget) WP7 : C# 、 VB Native Hybrid (frame)
  • 21.
    Mobile App 设计和开发 - 三种模式 Native App 此处略去一亿字… Native Hybrid (frame)
  • 22.
    Web App HTML(5)+CSS(3) +JavaScript +Device API Mobile App 设计和开发 - 三种模式 Hybrid (frame) Web
  • 23.
    Hybrid(frame) App {Native+ Web} App Hybrid – Native 与 Web 完全混合 Frame – 纯 Native 框架形式( PhoneGap ) Mobile App 设计和开发 - 三种模式 Hybrid (frame)
  • 24.
    Mobile App 设计和开发Web App 1.HTML5(CSS3) 2. 浏览器兼容概览 3. 移动框架的抉择 4.Web App 开发实战 Hybrid (frame) Web
  • 25.
    HTML5 Elements/Forms LocalStorage/IndexedDBGeoLocation Video/Audio Canvas/WebGL Web Workers Mobile App 设计和开发 - Web App Hybrid (frame)
  • 26.
    CSS3 Selector BorderBackground Text effects Transition/Transform/Animation Mobile App 设计和开发 - Web App Hybrid (frame)
  • 27.
    Device API TouchEvent MultiTouch DeviceOrientation API WebClip Viewport Status Bar/Startup Image Mobile App 设计和开发 - Web App Hybrid (frame)
  • 28.
    浏览器兼容概览 – iOS 4.3.3 Mobile Safari Mobile App 设计和开发 - Web App Hybrid (frame) HTML5 Canvas √ Video √ (Ogg/WebM ×) Audio √ (Ogg/WebM ×) Elements ○ Forms ○ (search/tel/url/email √ ) GeoLocation √ WebGL × Storage √ (IndexedDB ×) Workers × Device API TouchEvent √ DeviceOrientation API √ WebClip √ Viewport √ Status Bar/Startup Image √
  • 29.
    浏览器兼容概览 – Android 2.2 Webkit Mobile App 设计和开发 - Web App Hybrid (frame) HTML5 Canvas √ Video ○ (Video codecs ×) Audio ○ (Audio codecs ×) Elements ○ Forms ○ (search/tel/url/email √ ) GeoLocation √ WebGL × Storage √ (IndexedDB ×) Workers × Device API TouchEvent ○ (MultiTouch ×) DeviceOrientation API ○ WebClip √ Viewport √ Status Bar/Startup Image ×
  • 30.
    Mobile App 设计和开发 - Web App Hybrid (frame) Video codecs × Audio codecs ×
  • 31.
    移动框架的抉择 交互集成框架 SenchaTouch jQuery Mobile DHTMLX Touch/iUI/iWebkit(iOS)/… 纯 JavaScript 框架 Zepto.js 应用开发平台框架 PhoneGap Mobile App 设计和开发 - Web App Hybrid (frame)
  • 32.
    开发实战 HTML5 应用实例Elements/Form/GeoLocation CSS3 应用实例 Device API 应用实例 基本包装 /ScrollLayer/Shake! Mobile App 设计和开发 - Web App Hybrid (frame)
  • 33.
    开发实战 -HTML5 应用实例Elements Mobile App 设计和开发 - Web App Hybrid (frame)
  • 34.
    开发实战 -HTML5 应用实例Form Mobile App 设计和开发 - Web App Hybrid (frame)
  • 35.
    开发实战 -HTML5 应用实例GeoLocation navigator.geolocation. getCurrentPosition successCallback errorCallback positionOptions watchPosition clearWatch Mobile App 设计和开发 - Web App Hybrid (frame) Will come true on
  • 36.
    开发实战 -HTML5 应用实例GeoLocation Mobile App 设计和开发 - Web App Hybrid (frame) Will come true on
  • 37.
    开发实战 -CSS3 应用实例Mobile App 设计和开发 - Web App Hybrid (frame) selector/border-radius/gradient/box-shadow/transition/animation …
  • 38.
    开发实战 -Device API应用实例 本地化基本包装 Viewport Width initial-scale / maximum-scale user-scalable Capable WebClip icon Startup image Mobile App 设计和开发 - Web App Hybrid (frame)
  • 39.
    开发实战 -Device API应用实例 本地化基本包装 Mobile App 设计和开发 - Web App Hybrid (frame)
  • 40.
    开发实战 -Device API应用实例 ScrollLayer touchstart/touchmove/touchend e.touches // 所有手指列表 e.targetTouches // 当前 Dom 手指列表 e.changedTouches // 当前事件手指列表 clientX / screenX / pageX target identifier … Mobile App 设计和开发 - Web App Hybrid (frame)
  • 41.
    开发实战 -Device API应用实例 ScrollLayer Mobile App 设计和开发 - Web App Hybrid (frame)
  • 42.
    开发实战 -Device API应用实例 Shake! ondevicemotion e. accelerationIncludingGravity X Y Z Mobile App 设计和开发 - Web App Hybrid (frame)
  • 43.
    开发实战 -Device API应用实例 Shake! Mobile App 设计和开发 - Web App Hybrid (frame)
  • 44.
    Mobile App 设计和开发Hybrid App 1. 权衡利弊 2.WebView 3. 双向通信技术解析 4.Hybrid App 开发实战 Hybrid (frame) Hybrid (frame)
  • 45.
    权衡利弊 Mobile App设计和开发 - Hybrid App Hybrid (frame) Hybrid (frame) Native vs. Web Native Web
  • 46.
    权衡利弊 Native 的优势:速度 功能 表现 性能 Mobile App 设计和开发 - Hybrid App Hybrid (frame) Hybrid (frame) Native
  • 47.
    权衡利弊 Web 的优势:效率 成本 (跨平台) 更新 复用 Mobile App 设计和开发 - Hybrid App Hybrid (frame) Hybrid (frame) Web
  • 48.
    权衡利弊 适合的 才是最好的Mobile App 设计和开发 - Hybrid App Hybrid (frame) Web Hybrid (frame)
  • 49.
    WebView 它是 Webkit在 SDK 中封装而成的一个组件 Java 和 JavaScript 通过 WebView 的接口进行通信 Mobile App 设计和开发 - Hybrid App Hybrid (frame) Naive
  • 50.
    双向通信技术解析 Native 调用Web loadUrl 方法 webview.loadUrl(&quot;javascript:foo()&quot;); Mobile App 设计和开发 - Hybrid App Hybrid (frame) Naive
  • 51.
    双向通信技术解析 Web 调用Native 超链接监听 <a href=“http://a.com/?b”> 监听 b 参数 </a> addJavascriptInterface 方法 addJavascriptInterface(Object obj,String interfaceName) // 将一个 java 对象绑定到一个 javascript 对象中 Native : webview.addJavascriptInterface(Foo,“GoAction”); Web : Javascript:window.GoAction.Foo(); Mobile App 设计和开发 - Hybrid App Hybrid (frame) Naive
  • 52.
    开发实战 Hybrid MobileApp 设计和开发 - Hybrid App Hybrid (frame)
  • 53.
    开发实战 Hybrid MobileApp 设计和开发 - Hybrid App Hybrid (frame)
  • 54.
  • 55.
    模拟器 Android SDKEmulator iPhone SDK Simulator(MacOS only) Windows Phone Emulator Opera Mobile Emulator 工具 Hybrid (frame)
  • 56.
    在线工具 HTML5 :http://html5test.com/ http://www.caniuse.com/ CSS3 : http://css3generator.com/ http://www.css3.info/selectors-test/ http://css3please.com/ Other : http://detectmobilebrowser.com/ http://www.vodori.com/blog/phantom-limb.html http://www.quirksmode.org/m/ …… 工具 Hybrid (frame)
  • 57.
  • 58.
  • 59.
    前沿敏感度 格局变化性和应对 HTML5/CSS3Device API 平台多样性 / 差异性 / 兼容性 JavaScript 框架 性能 外界因素 硬件设备与调试 你的激情 机遇与挑战 Hybrid (frame)
  • 60.
    机遇与挑战 Hybrid (frame)激情过后 你会觉得……
  • 61.
    Mobile Design isthe art of Communicating within an Environment of Mobility. - Cameronmoll 一切技术以体验为本 Hybrid (frame)
  • 62.
    Q&A , andOther… 无线前端联盟群: 793745802 与我联系:完颜 weibo.com/Mario 团队微博: weibo.com/MobileUED
  • 63.