Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Mobile App By  完颜 移动互联网时代的 设计和开发
Profile <ul><li>完颜小卓 </li></ul><ul><li>SMbey0nd </li></ul><ul><li>淘宝 [eTao] 无线 UED </li></ul><ul><li>前端工程师 </li></ul><ul><...
内容提要 <ul><li>现代移动互联网 </li></ul><ul><li>Mobile App 的设计和开发 </li></ul><ul><li>工具 </li></ul><ul><li>前端创新 </li></ul><ul><li>机遇与...
现代移动互联网 Modern Mobile Web (Mobile 2.0)
现代移动互联网  -  过去 WAP1.0 时代
现代移动互联网  -  过去 <ul><li>代表平台 ( 嵌入式 ) </li></ul><ul><ul><li>Symbian S40 </li></ul></ul><ul><ul><li>Windows CE </li></ul></ul...
现代移动互联网  -  过去 WAP2.0 时代
现代移动互联网  -  过去 <ul><li>代表平台 </li></ul><ul><ul><li>Symbian S60 </li></ul></ul><ul><ul><li>Windows Mobile </li></ul></ul><ul...
现代移动互联网  -  过去 <ul><ul><li>WAP2.0  手机兼容性测试表格  –  淘宝无线 UED 前端组 </li></ul></ul>
现代移动互联网  -  过去 <ul><ul><li>兼容性 </li></ul></ul>
现代移动互联网  -  现在 HTML5 时代
现代移动互联网  -  现在 <ul><li>代表平台 </li></ul><ul><ul><li>iOS </li></ul></ul><ul><ul><li>Android </li></ul></ul><ul><ul><li>Other ...
现代移动互联网  -  现在 Morgan Stanley - 2010 Mobile Internet Report
现代移动互联网  -  现在 <ul><li>iOS 、 Android ↑  Symbian ↓ </li></ul>m.taobao.com 2011.6
现代移动互联网  -  未来
现代移动互联网  -  未来 <ul><li>2011 年底:一半的美国人使用智能手机 </li></ul><ul><li>2013 :移动互联网用户超 10 亿 </li></ul><ul><li>2020 :全世界的网络访问主要来自手机 <...
现代移动互联网  -  未来 <ul><li>? </li></ul>
Mobile App 设计和开发 Design & Development
Mobile App 设计和开发 <ul><li>三种模式: </li></ul><ul><li>1.Native </li></ul><ul><li>2.Web </li></ul><ul><li>3.Hybrid(frame) </li><...
Mobile App 设计和开发   -  三种模式 <ul><li>Native App </li></ul><ul><li>iOS : Objective-C </li></ul><ul><li>Android : Java </li></...
Mobile App 设计和开发   -  三种模式 <ul><li>Native App </li></ul><ul><li>此处略去一亿字… </li></ul>Native Hybrid (frame)
<ul><li>Web App </li></ul><ul><li>HTML(5) </li></ul><ul><li>+CSS(3) </li></ul><ul><li>+JavaScript </li></ul><ul><li>+Devic...
<ul><li>Hybrid(frame) App </li></ul><ul><li>{Native + Web} App </li></ul><ul><li>Hybrid – Native 与 Web 完全混合 </li></ul><ul>...
Mobile App 设计和开发 <ul><li>Web App </li></ul><ul><li>1.HTML5(CSS3) </li></ul><ul><li>2. 浏览器兼容概览 </li></ul><ul><li>3. 移动框架的抉择...
<ul><li>HTML5 </li></ul><ul><ul><li>Elements/Forms </li></ul></ul><ul><ul><li>LocalStorage/IndexedDB </li></ul></ul><ul><u...
<ul><li>CSS3 </li></ul><ul><ul><li>Selector </li></ul></ul><ul><ul><li>Border </li></ul></ul><ul><ul><li>Background </li><...
<ul><li>Device API </li></ul><ul><ul><li>Touch Event </li></ul></ul><ul><ul><ul><li>MultiTouch </li></ul></ul></ul><ul><ul...
<ul><li>浏览器兼容概览  –  iOS  4.3.3  Mobile Safari </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame) HTML5 Canvas √ Video ...
<ul><li>浏览器兼容概览  –  Android  2.2  Webkit </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame) HTML5 Canvas √ Video ○  (V...
Mobile App 设计和开发   -  Web App Hybrid (frame) Video codecs × Audio codecs ×
<ul><li>移动框架的抉择 </li></ul><ul><li>交互集成框架 </li></ul><ul><li>Sencha Touch </li></ul><ul><li>jQuery Mobile </li></ul><ul><li>...
<ul><li>开发实战 </li></ul><ul><li>HTML5 应用实例 </li></ul><ul><ul><li>Elements/Form/GeoLocation </li></ul></ul><ul><li>CSS3 应用实例...
<ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>Elements </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame)
<ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>Form </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame)
<ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>GeoLocation </li></ul><ul><li>navigator.geolocation. </li></ul><ul><ul><li>getC...
<ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>GeoLocation </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame) Will come tr...
<ul><li>开发实战 -CSS3 应用实例 </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame) selector/border-radius/gradient/box-shadow/...
<ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>本地化基本包装 </li></ul><ul><ul><li>Viewport </li></ul></ul><ul><ul><ul><li>Widt...
<ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>本地化基本包装 </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame)
<ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>ScrollLayer </li></ul><ul><ul><li>touchstart/touchmove/touchend </li></ul>...
<ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>ScrollLayer </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame)
<ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>Shake! </li></ul><ul><ul><li>ondevicemotion </li></ul></ul><ul><ul><ul><li...
<ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>Shake! </li></ul>Mobile App 设计和开发   -  Web App Hybrid (frame)
Mobile App 设计和开发 <ul><li>Hybrid App </li></ul><ul><li>1. 权衡利弊 </li></ul><ul><li>2.WebView </li></ul><ul><li>3. 双向通信技术解析 </...
<ul><li>权衡利弊 </li></ul>Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Hybrid (frame) Native   vs.   Web Native Web
<ul><li>权衡利弊 </li></ul><ul><li>Native 的优势: </li></ul><ul><ul><li>速度 </li></ul></ul><ul><ul><li>功能 </li></ul></ul><ul><ul><...
<ul><li>权衡利弊 </li></ul><ul><li>Web 的优势: </li></ul><ul><ul><li>效率 </li></ul></ul><ul><ul><li>成本 (跨平台) </li></ul></ul><ul><u...
<ul><li>权衡利弊 </li></ul><ul><li>适合的 才是最好的 </li></ul>Mobile App 设计和开发   -  Hybrid App Hybrid (frame) Web Hybrid (frame)
<ul><li>WebView </li></ul><ul><li>它是 Webkit 在 SDK 中封装而成的一个组件 </li></ul><ul><li>Java 和 JavaScript 通过 WebView 的接口进行通信 </li><...
<ul><li>双向通信技术解析 </li></ul><ul><li>Native 调用 Web </li></ul><ul><ul><li>loadUrl 方法 </li></ul></ul><ul><ul><ul><li>webview.l...
<ul><li>双向通信技术解析 </li></ul><ul><li>Web 调用 Native </li></ul><ul><ul><li>超链接监听 </li></ul></ul><ul><ul><ul><li><a href=“http:...
<ul><li>开发实战 </li></ul><ul><li>Hybrid </li></ul>Mobile App 设计和开发   -  Hybrid App Hybrid (frame)
<ul><li>开发实战 </li></ul><ul><li>Hybrid </li></ul>Mobile App 设计和开发   -  Hybrid App Hybrid (frame)
工具 Tools
<ul><li>模拟器 </li></ul><ul><ul><li>Android SDK Emulator </li></ul></ul><ul><ul><li>iPhone SDK Simulator(MacOS only) </li></...
<ul><li>在线工具 </li></ul><ul><ul><li>HTML5 : </li></ul></ul><ul><ul><ul><li>http://html5test.com/ </li></ul></ul></ul><ul><u...
前端创新 Innovation
机遇与挑战 Opportunities & Threats
<ul><li>前沿敏感度 </li></ul><ul><ul><li>格局变化性和应对 </li></ul></ul><ul><ul><li>HTML5/CSS3 </li></ul></ul><ul><ul><li>Device API <...
机遇与挑战 Hybrid (frame) 激情过后 你会觉得……
<ul><li>Mobile Design is the art of Communicating within an Environment of Mobility. </li></ul><ul><li>- Cameronmoll </li>...
Q&A , and Other… 无线前端联盟群: 793745802 与我联系:完颜 weibo.com/Mario 团队微博: weibo.com/MobileUED
谢谢 再见
Nächste SlideShare
Wird geladen in …5
×

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

2.255 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Design
  • Als Erste(r) kommentieren

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

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

×