Web App or Native App

88
Web App or Native App 資資資資 資資資 [email protected] 1

Transcript of Web App or Native App

Page 1: Web App or Native App

1

Web Appor

Native App資訊中心 尚玉瑋

[email protected]

Page 2: Web App or Native App

2

3G 速度慢 中華電信降價

Page 3: Web App or Native App

3

行動裝置使用者數激增

Page 4: Web App or Native App

4

2014 年行動裝置使用者將超越桌機使用者

Page 5: Web App or Native App

5

帶來的變化

Page 6: Web App or Native App

6

-7%Access onWeb Site +36%

Access onMobile Devices

Page 7: Web App or Native App

7

33% 貼文來自行動裝置

Page 8: Web App or Native App

8

行動裝置瀏覽既有網站

Page 9: Web App or Native App

9

基本上可以正常瀏覽

Page 10: Web App or Native App

10

先縮放到適當大小

Page 11: Web App or Native App

11

上下捲左右捲

Page 12: Web App or Native App

12

使用起來感覺不太順

Page 13: Web App or Native App

13

問題在哪 ?

Page 14: Web App or Native App

14

本來就不是設計給手機使用

Page 15: Web App or Native App

15

不想留白而填滿

Page 16: Web App or Native App

16

重新設計成Native APP?

Page 17: Web App or Native App

17

iOSAndroidWindows Phone 7

Page 18: Web App or Native App

18

新的架構新的 APIs

Page 19: Web App or Native App

19

工程師:這位壯士,求你放過我…

Page 20: Web App or Native App

20

Native App之外的選擇

Page 21: Web App or Native App

21

Web App(HTML 5)

Page 22: Web App or Native App

22

Web App

網頁程式=

Page 23: Web App or Native App

23

HTML5 賦予網頁支援行動裝置

Page 24: Web App or Native App

24

什麼是HTML5

Page 25: Web App or Native App

25

HTML content

JavaScript logic

CSS style

Page 26: Web App or Native App

26

HTML5能做到的事

Page 27: Web App or Native App

27

(1)

Page 28: Web App or Native App

28

取得地理坐標Geolocation

Geolocation

Page 29: Web App or Native App

29

Page 30: Web App or Native App

30

(2)

Page 31: Web App or Native App

31

多指觸控Geolocation

Multi Touch

Page 32: Web App or Native App

32

Page 33: Web App or Native App

33

(3)

Page 34: Web App or Native App

34

地理坐標Geolocation

取得裝置維度Device Orientation

Page 35: Web App or Native App

35

Page 36: Web App or Native App

36

(4)

Page 37: Web App or Native App

37

即時通訊Geolocation

Networking

Page 38: Web App or Native App

38

Page 39: Web App or Native App

39

(5)

Page 40: Web App or Native App

40

裝置輸入Device API and Speech Recognition

Page 41: Web App or Native App

41

Page 42: Web App or Native App

42

(6)

Page 43: Web App or Native App

43

離線功能GeolocationOffline

Page 44: Web App or Native App

44

Page 45: Web App or Native App

45

(7)

Page 46: Web App or Native App

46

本機端資料存放GeolocationStorge

Page 47: Web App or Native App

47

跟 Cookie 類似

Page 48: Web App or Native App

48

Cookie 最大 4K

Page 49: Web App or Native App

49

Sotrage 最大5MB

Page 50: Web App or Native App

50

HTML5優點

Page 51: Web App or Native App

51

以熟悉的技術開發Web App

Page 52: Web App or Native App

52

支援不同裝置

iPhone

iPadAndroid Mobile

Windows Phone 7

Android Tablets

Windows Phone 7 Tablets

Page 53: Web App or Native App

53

有 Browser就可以執行

Page 54: Web App or Native App

54

工程師:實在是太好了 !

Page 55: Web App or Native App

55

HTML5缺點

Page 56: Web App or Native App

56

行動裝置的新功能不一定能支援

Page 57: Web App or Native App

57

HTML5應用現況

Page 58: Web App or Native App

58

Google 線上應用程式

Page 59: Web App or Native App

59

植物大戰殭屍

Page 60: Web App or Native App

60

植物大戰殭屍

Page 61: Web App or Native App

61

Web App開發架構

Page 62: Web App or Native App

62

Server Side - ASP.NET MVC

Page 63: Web App or Native App

63

UI – jQuery Mobile

Page 64: Web App or Native App

64

User Experience- Axure RP

Page 65: Web App or Native App

65

從此之後我們只要寫 Web App?

Page 66: Web App or Native App

66

Native App優點

Page 67: Web App or Native App

67

iOSAndroidWindows Phone 7

Objective-C…

Java…

C#、 VB、 JavaScript….

Page 68: Web App or Native App

68

與硬體整合度高Bluetooth、 USB….

Page 69: Web App or Native App

69

能與其它 APPs 互動

Page 70: Web App or Native App

70

更快、更順暢

Page 71: Web App or Native App

71

Web App能做的

Page 72: Web App or Native App

72

Native App可以做得更好

Page 73: Web App or Native App

73

Native App能做的

Page 74: Web App or Native App

74

Web App不見得能做

Page 75: Web App or Native App

75

將 Native App 功能開放給 Web App

Page 76: Web App or Native App

76

Embedded Web Views

Page 77: Web App or Native App

77

Native App 裡的元件

Page 78: Web App or Native App

78

可以想像成Iframe

Page 79: Web App or Native App

79

利用 Bridge 方式互通有無

Page 80: Web App or Native App

80

Page 81: Web App or Native App

81

IO 2011 Android App

Page 82: Web App or Native App

82

結論

Page 83: Web App or Native App

83

使用者在哪邊市場就在哪邊

Page 84: Web App or Native App

84

參考資料

Page 85: Web App or Native App

85

http://www.lukew.com/presos/preso.asp?26

Page 86: Web App or Native App

86

Google I/O 2011

Page 87: Web App or Native App

87

http://www.html5rocks.com/en/

Page 88: Web App or Native App

88

謝謝