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时代

现代移动互联网 -  过去

WAP2.0时代

代表平台
Symbian S60
Windows Mobile
MTK
代表浏览器
UCWEB/OperaMini
语言规范
XHTML Basic / XHTML Mobile Profile

现代移动互联网 -  过去

WAP2.0 手机兼容性测试表格 – 淘宝无线UED前端组

现代移动互联网 -  过去

兼容性

现代移动互联网 -  现在

HTML5时代

现代移动互联网 -  现在

HTML5时代

代表平台
iOS
Android
Other OS
代表浏览器
Mobile Safari/Android Webkit
语言规范
HTML5

现代移动互联网 -  现在

Morgan Stanley - 2010 Mobile Internet Report

现代移动互联网 -  现在

m.taobao.com 2011.6

iOS、Android ↑   Symbian ↓

现代移动互联网 -  未来

现代移动互联网 -  未来

mobithing 2011

2011年底：一半的美国人使用智能手机
2013：移动互联网用户超10亿
2020：全世界的网络访问主要来自手机

现代移动互联网 -  未来

？

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

Hybrid
(frame)

Web

Mobile App设计和开发 - 三种模式

Hybrid(frame) App
{Native + Web} App

Hybrid – Native与Web完全混合
Frame – 纯Native框架形式（PhoneGap）

Hybrid
(frame)

Mobile App设计和开发 - 三种模式

Mobile App设计和开发

Web App
1.HTML5(CSS3)
2.浏览器兼容概览
3.移动框架的抉择
4.Web App开发实战

Hybrid
(frame)

Web

HTML5
Elements/Forms
Offline App
LocalStorage
GeoLocation
Video/Audio
Canvas/WebGL
Web Workers

Hybrid
(frame)

Mobile App设计和开发 - Web App

CSS3
Selector
Border
Background
Text effects
Transition/Transform/Animation

Hybrid
(frame)

Mobile App设计和开发 - Web App

Device API
Touch Event
MultiTouch(gesture)
DeviceOrientation
WebClip
Viewport
Status Bar/Startup Image

Hybrid
(frame)

Mobile App设计和开发 - Web App

浏览器兼容概览 – iOS 4.3.3 Mobile Safari

Hybrid
(frame)

Mobile App设计和开发 - Web App

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

Hybrid
(frame)

Mobile App设计和开发 - Web App

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 ×

Hybrid
(frame)

Mobile App设计和开发 - Web App

Video codecs ×
Audio codecs ×

移动框架的抉择
交互集成框架
Sencha Touch
jQuery Mobile
DHTMLX Touch/iUI/iWebkit(iOS)/…
纯JavaScript框架
Zepto.js
应用开发平台框架
PhoneGap

Hybrid
(frame)

Mobile App设计和开发 - Web App

移动框架的抉择



Kissy Mobile？
or…

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战

HTML5应用实例
Elements/Form/GeoLocation
CSS3应用实例
Device API应用实例
基本包装/ScrollLayer/Shake!

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-HTML5应用实例
Elements

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-HTML5应用实例
Form

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-HTML5应用实例
GeoLocation
navigator.geolocation.
getCurrentPosition
successCallback
errorCallback
positionOptions
watchPosition
clearWatch

Hybrid
(frame)

Mobile App设计和开发 - Web App

Will come true on

开发实战-HTML5应用实例
GeoLocation

Hybrid
(frame)

Mobile App设计和开发 - Web App

Will come true on

开发实战-CSS3应用实例

Hybrid
(frame)

Mobile App设计和开发 - Web App

selector/border-radius/gradient/box-shadow/transition/animation …

开发实战-Device API应用实例
本地化基本包装

Viewport
Width
initial-scale / maximum-scale 
user-scalable 
Capable
WebClip icon
Startup image

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-Device API应用实例
本地化基本包装

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-Device API应用实例
ScrollLayer
touchstart/touchmove/touchend
e.touches //所有手指列表
e.targetTouches //当前Dom手指列表
e.changedTouches //当前事件手指列表
clientX / screenX / pageX
target
identifier
…

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-Device API应用实例
ScrollLayer

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-Device API应用实例
Shake!
ondevicemotion
e. accelerationIncludingGravity
X
Y
Z

Hybrid
(frame)

Mobile App设计和开发 - Web App

开发实战-Device API应用实例
Shake!

Hybrid
(frame)

Mobile App设计和开发 - Web App

Mobile App设计和开发

Hybrid App
1.权衡利弊
2.WebView
3.双向通信技术解析
4.Hybrid App开发实战

Hybrid
(frame)

Hybrid
(frame)

权衡利弊

Hybrid
(frame)

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

Native vs. Web

权衡利弊
Native的优势：
速度
功能
表现
性能

Hybrid
(frame)

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

权衡利弊
Web的优势：
效率
成本（跨平台）
更新
复用

Hybrid
(frame)

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

权衡利弊

适合的才是最好的

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

Web

Hybrid
(frame)

WebView

它是Webkit在SDK中封装而成的一个组件
Java和JavaScript通过WebView的接口进行通信

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

Naive

双向通信技术解析
Native调用Web

loadUrl方法
webview.loadUrl("javascript:foo()");

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

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();

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

Naive

开发实战
Hybrid

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

开发实战
Hybrid

Hybrid
(frame)

Mobile App设计和开发 - Hybrid App

工具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)

激情过后
你会觉得……

机遇与挑战

Hybrid
(frame)

Mobile Design is the art of Communicating within an Environment of Mobility.

- Cameronmoll
一切技术以体验为本

Q&A，and Other…

无线前端联盟群：793745802
与我联系：完颜
weibo.com/Mario

团队微博：
weibo.com/MobileUED

谢谢
       再见