-
Notifications
You must be signed in to change notification settings - Fork 1
/
mobile-app.html
228 lines (187 loc) · 7.27 KB
/
mobile-app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>angularjs tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/night.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Web APP</h2>
<p>BY Hao Ju Zheng</p>
<p>github: <a href="https://github.com/hjzheng">https://github.com/hjzheng</a></p>
</section>
<section>
<h2>Mobile App</h2>
<ul>
<li>Native App</li>
<li>Web APP</li>
<li>Hybrid App</li>
</ul>
</section>
<section>
<h2>Native App</h2>
<p>Native App是一种基于智能手机本地操作系统如IOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。</p>
</section>
<section data-markdown>
<script type="text/template">
### Native App 优点
- 提供最佳的用户体验，最优质的用户界面，最华丽的交互
- 针对不同平台提供不同体验
- 可节省带宽成本
- 可访问本地资源
- 打开速度更快
</script>
</section>
<section data-markdown>
<script type="text/template">
### Native App 缺点
- 移植到不同平台上比较麻烦
- 维持多个版本的成本比较高
- 需要通过store或market的确认
- 盈利需要与第三方分成
- 开发的成本比较大
</script>
</section>
<section>
<h2>2012 Android系统版本分布</h2>
<img src="img/androd.png">
</section>
<section data-markdown>
<script type="text/template">
### 不同厂商对android的定制
- 当Android遇到小米——MIUI
- 当Android遇到腾讯——tita
- 当Android遇到HTC——HTC Sense
- 当Android遇到摩托罗拉——Moto Blur
- 当Android遇到索爱——Sony Ericsson Rachael
- 当Android遇到三星——TouchWiz
- 当Android遇到魅族——Flyme OS
- 当Android遇到联想——乐OS
- 当Android遇到百度——易
</script>
</section>
<section>
<h2>IOS 系统版本分布图</h2>
<img src="img/ios.png" width="50%">
</section>
<section>
<h2>苹果开发者账号（收费）</h2>
<img src="img/ios2.png">
</section>
<section>
<h2>IOS 和 Android 程序员 薪酬 (lagou网)</h2>
<img src="img/ios3.png">
<img src="img/android2.png">
</section>
<section>
<h2>Web APP</h2>
<p>WebApp是指基于Web的系统和应用, Web APP说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。</p>
</section>
<section data-markdown>
<script type="text/template">
### Web App 优点
- 适用范围广（覆盖所有智能手机）
- 开发成本较低
- 方便、快捷地部署（无需提交到应用商店）
- 无内容限制
- 用户总能访问到最新版本（没有手动更新需求）
</script>
</section>
<section data-markdown>
<script type="text/template">
### Web App 缺点
- 较差的和较慢的性能体验（大部分需要链接互联网）
- 支持图形和动画效果较差
- 不适用于应用商店及没有靠下载应用盈利机会
- 需要链接互联网
- 限制用户使用功能（比如，相机、GPS等）
</script>
</section>
<section>
<h2>Hybrid App（Native应用和Web应用结合）</h2>
<p>部分代码以Web技术编程，部门代码由某些Native Container承担（例如PhoneGAP插件，BAE插件），其目的是在HTML5尚未完全支持Device API和Network API的目前阶段，承担这部分职责。</p>
</section>
<section data-markdown>
<script type="text/template">
### Hybrid 优点
- 支持多平台访问
- 手机功能都可访问
- 适用于应用商店
- 部分支持离线功能
</script>
</section>
<section data-markdown>
<script type="text/template">
### Hybrid 缺点
- 未知的部署时间
- 用户体验不如本地应用
- 性能速度较慢（需链接网络）
</script>
</section>
<section>
<h2>Hybrid App -- QQ </h2>
<img src="img/qq.png">
</section>
<section>
<h2>三种类型应用比较</h2>
<img src="img/diff.png">
</section>
<section>
<h2>Your choice?</h2>
<p>像我们这种人又少又没钱，还想快速开发出应用的团队，你觉得你有得选么？</p>
</section>
<section>
<h2>主流的Web App开发框架对比（1）</h2>
<img src="img/web_app_diff.png">
</section>
<section>
<h2>主流的Web App开发框架对比（2）</h2>
<img src="img/web_app_diff2.png">
</section>
<section>
<h2>JQuery Mobile</h2>
<img src="img/jqm.png">
</section>
<section>
<h2>Zepto Js</h2>
<img src="img/zepto.png">
</section>
<section>
<h2>AngularJS + Angular-touch</h2>
<h1> ? ? ? </h1>
</section>
<section>
<section>
<h2>谢谢观赏</h2>
<h3>2014-11-21</h3>
<p>如果你喜欢,请<a href="https://github.com/hjzheng/CUF_PPTs">star</a>我</p>
</section>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({
history: true,
transition: 'linear',
progress: true,
math: {
// mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full'
},
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
]
});
</script>
</body>
</html>