1

Web Appor

Native App資訊中心 尚玉瑋

ywshang@itri.org.tw

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

謝謝