web app or native app
TRANSCRIPT
2
3G 速度慢 中華電信降價
3
行動裝置使用者數激增
4
2014 年行動裝置使用者將超越桌機使用者
5
帶來的變化
6
-7%Access onWeb Site +36%
Access onMobile Devices
7
33% 貼文來自行動裝置
8
行動裝置瀏覽既有網站
9
基本上可以正常瀏覽
10
先縮放到適當大小
11
上下捲左右捲
12
使用起來感覺不太順
13
問題在哪 ?
14
本來就不是設計給手機使用
15
不想留白而填滿
16
重新設計成Native APP?
17
iOSAndroidWindows Phone 7
18
新的架構新的 APIs
19
工程師:這位壯士,求你放過我…
20
Native App之外的選擇
21
Web App(HTML 5)
22
Web App
網頁程式=
23
HTML5 賦予網頁支援行動裝置
24
什麼是HTML5
25
HTML content
JavaScript logic
CSS style
26
HTML5能做到的事
27
(1)
28
取得地理坐標Geolocation
Geolocation
29
30
(2)
31
多指觸控Geolocation
Multi Touch
32
33
(3)
34
地理坐標Geolocation
取得裝置維度Device Orientation
35
36
(4)
37
即時通訊Geolocation
Networking
38
39
(5)
40
裝置輸入Device API and Speech Recognition
41
42
(6)
43
離線功能GeolocationOffline
44
45
(7)
46
本機端資料存放GeolocationStorge
47
跟 Cookie 類似
48
Cookie 最大 4K
49
Sotrage 最大5MB
50
HTML5優點
51
以熟悉的技術開發Web App
52
支援不同裝置
iPhone
iPadAndroid Mobile
Windows Phone 7
Android Tablets
Windows Phone 7 Tablets
53
有 Browser就可以執行
54
工程師:實在是太好了 !
55
HTML5缺點
56
行動裝置的新功能不一定能支援
57
HTML5應用現況
58
Google 線上應用程式
59
植物大戰殭屍
60
植物大戰殭屍
61
Web App開發架構
62
Server Side - ASP.NET MVC
63
UI – jQuery Mobile
64
User Experience- Axure RP
65
從此之後我們只要寫 Web App?
66
Native App優點
67
iOSAndroidWindows Phone 7
Objective-C…
Java…
C#、 VB、 JavaScript….
68
與硬體整合度高Bluetooth、 USB….
69
能與其它 APPs 互動
70
更快、更順暢
71
Web App能做的
72
Native App可以做得更好
73
Native App能做的
74
Web App不見得能做
75
將 Native App 功能開放給 Web App
76
Embedded Web Views
77
Native App 裡的元件
78
可以想像成Iframe
79
利用 Bridge 方式互通有無
80
81
IO 2011 Android App
82
結論
83
使用者在哪邊市場就在哪邊
84
參考資料
85
http://www.lukew.com/presos/preso.asp?26
86
Google I/O 2011
87
http://www.html5rocks.com/en/
88
謝謝