本文探讨现代移动互联网的应用程序设计与开发，包括三种模式：原生应用、Web应用和混合应用。还讨论了技术演变、兼容性问题及前端工具，从而分析了未来的发展趋势和面临的挑战。文章强调在快速变化的环境中，移动设计的艺术是沟通的核心。

1. Mobile App By 完颜 移动互联网时代的 设计和开发

2. Profile 完颜小卓 SMbey0nd 淘宝 [eTao] 无线 UED 前端工程师 热爱 Mobile Web

3. 内容提要 现代移动互联网 Mobile App 的设计和开发 工具 前端创新 机遇与挑战

4. 现代移动互联网 Modern Mobile Web (Mobile 2.0)

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/IndexedDB GeoLocation Video/Audio Canvas/WebGL Web Workers Mobile App 设计和开发 - Web App Hybrid (frame)

26. CSS3 Selector Border Background Text effects Transition/Transform/Animation Mobile App 设计和开发 - Web App Hybrid (frame)

27. Device API Touch Event 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. 移动框架的抉择 交互集成框架 Sencha Touch 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("javascript:foo()"); 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 Mobile App 设计和开发 - Hybrid App Hybrid (frame)

53. 开发实战 Hybrid Mobile App 设计和开发 - Hybrid App Hybrid (frame)

54. 工具 Tools

55. 模拟器 Android SDK Emulator 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. 前端创新 Innovation

58. 机遇与挑战 Opportunities & Threats

59. 前沿敏感度 格局变化性和应对 HTML5/CSS3 Device API 平台多样性 / 差异性 / 兼容性 JavaScript 框架 性能 外界因素 硬件设备与调试 你的激情 机遇与挑战 Hybrid (frame)

60. 机遇与挑战 Hybrid (frame) 激情过后 你会觉得……

61. Mobile Design is the art of Communicating within an Environment of Mobility. - Cameronmoll 一切技术以体验为本 Hybrid (frame)

62. Q&A ， and Other… 无线前端联盟群： 793745802 与我联系：完颜 weibo.com/Mario 团队微博： weibo.com/MobileUED

63. 谢谢 再见