Take Advantage of           UIWebView               for         iOS Native App           Developers                    Rya...
Ryan Chung (Ryan@iii.org.tw)• 現任                            • 經歷  • 資策會中壢中心課程研發經理                   • 工研院電通所嵌入式網站開發  • 資策會...
學習、分享與成長iOS UIWebView   3   http://MobileDev.TW
智慧型手機即將比傳統手機還要多  iOS UIWebView   4   http://MobileDev.TW
多數人的選擇已偏向智慧型手機  iOS UIWebView   5   http://MobileDev.TW
我要智慧型手機幹嘛?iOS UIWebView   6   http://MobileDev.TW
App生態圈                                Cloud Service ProviderCustomer                                                      ...
App	 開發團隊角色      提出      需求                                       	 使用者經驗                                          架構師    ...
What is App?行銷手法                                             趣味娛樂提供功能                                             資訊提供    ...
Native AppiOS UIWebView   10   http://MobileDev.TW
Web AppiOS UIWebView   11   http://MobileDev.TW
Hybrid AppiOS UIWebView   12   http://MobileDev.TW
Web App or Native App?         功能                   Web App                        Native App靜態圖片、文字展示                    ...
App1.0•  將資訊以適合手機瀏覽的方式進行呈現•  資訊來源可以是網路或是App中•  例如: •  百大小吃介紹 •  百大古蹟介紹 •  百大文化介紹                           Content •  百大活動...
App2.0•  結合手機特性與既有資訊,以互動方式提供使用者   內容•  例如: •  最近的小吃 •  古蹟合成照相機                         Content                      Device...
App3.0•  將App結合社群平台,提供使用者間的互動橋梁•  例如: •  用Facebook登入的聊天室App •  美食心得分享App                                             Socia...
How to develop them?  iOS UIWebView   17   http://MobileDev.TW
Native AppiOS UIWebView   18   http://MobileDev.TW
Web AppiOS UIWebView   19   http://MobileDev.TW
Hybrid AppiOS UIWebView   20   http://MobileDev.TW
Any other alternatives?  iOS UIWebView   21   http://MobileDev.TW
App Inventorhttp://www.appinventorbeta.com/iOS UIWebView   22   http://MobileDev.TW
PhoneGapiOS UIWebView   23   http://MobileDev.TW
TitaniumiOS UIWebView      24   http://MobileDev.TW
CoronaiOS UIWebView     25   http://MobileDev.TW
FlashiOS UIWebView    26   http://MobileDev.TW
Things become easier….  iOS UIWebView   27   http://MobileDev.TW
Retain Count? Out! iOS UIWebView   28   http://MobileDev.TW
HYBRID APP WE ALWAYS DO THIS...       iOS UIWebView   29   http://MobileDev.TW
資料介接別人家的Server                                                 XML Parser                               XML or JSON       ...
UIWebViewiOS UIWebView   31   http://MobileDev.TW
Load web page[myWebView loadRequest:! [NSURLRequest requestWithURL:!  [NSURL URLWithString:@http://MobileDev.TW]]];!      ...
HTML5 - Video TagiOS UIWebView   33   http://MobileDev.TW
HTML5 - CanvasiOS UIWebView   34   http://MobileDev.TW
HTML5 - Input TypeRange                Date Picker                Placeholder         iOS UIWebView    35   http://MobileD...
HTML5 - Geolocation iOS UIWebView   36   http://MobileDev.TW
Web Page與App互動•  透過超連結的載入請求觸發,判斷超連結的字串是   否有特定關鍵字,來決定行為                Sent before a web view begins loading a frame.     ...
Web Page與App互動•  網頁上則撰寫一個特殊字串的超連結       iOS UIWebView   38   http://MobileDev.TW
UIWebView - Support Document Type• Excel (.xls)                        • Rich Text Format (.rtf)• Keynote (.key.zip)      ...
Support Document Type  iOS UIWebView   40   http://MobileDev.TW
Support Document Type  iOS UIWebView   41   http://MobileDev.TW
運用CSS來進行頁面美化 iOS UIWebView   42   http://MobileDev.TW
運用CSS來進行頁面美化 iOS UIWebView   43   http://MobileDev.TW
CSS3 TransformiOS UIWebView   44   http://MobileDev.TW
CSS3 TransformiOS UIWebView   45   http://MobileDev.TW
CSS3 多重背景iOS UIWebView   46   http://MobileDev.TW
CSS3 Transition•  運用touch事件與CSS3 Transition,當使用者觸碰   該區塊時,可產生橫向或直向的縮放動畫         iOS UIWebView   47   http://MobileDev.TW
CSS3 AnimationiOS UIWebView   48   http://MobileDev.TW
Mobile Web Framework  iOS UIWebView   49   http://MobileDev.TW
重組網頁資訊•  取得遠端的資訊•  設計一個HTML頁面,可使用CSS排版•  將遠端的資訊,結合近端HTML頁面的格式        iOS UIWebView   50   http://MobileDev.TW
引用外部資訊                         線上播放首頁   花卉列表                                                     維基百科                     ...
Why Go Hybrid?•  保留頁面的替換性 •  最新訊息發佈 •  公司促銷廣告 •  經常性更換資料•  開啓特定文件•  運用CSS來進行頁面美化•  運用Mobile Web Framework•  重組網頁資訊•  引用外部資...
Thank youiOS UIWebView   53   http://MobileDev.TW
Upcoming SlideShare
Loading in...5
×

Take Advantage of UIWebView for iOS Native App Developers

1,612

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,612
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Take Advantage of UIWebView for iOS Native App Developers

  1. 1. Take Advantage of UIWebView for iOS Native App Developers Ryan ChungiOS UIWebView 1 http://MobileDev.TW
  2. 2. Ryan Chung (Ryan@iii.org.tw)• 現任 • 經歷 • 資策會中壢中心課程研發經理 • 工研院電通所嵌入式網站開發 • 資策會中壢中心專任講師 • 經濟部工業局自由軟體推動計畫 • 資策會行動開發學院負責人 • 宜蘭縣政府自由軟體講師• 學歷 • 平鎮陸軍通訊學校講師 • 台灣科技大學資工所碩士 • 龍潭陸軍總部講師 • 元智大學資訊工程系學士 • 資策會資訊技術訓練中心講師 • 資策會資技中心行動開發導師• 教授科目 • 資策會資技中心數位學習網管理 • iOS App開發 – Objective-C • Web App開發 – HTML5/CSS3 iOS UIWebView 2 http://MobileDev.TW
  3. 3. 學習、分享與成長iOS UIWebView 3 http://MobileDev.TW
  4. 4. 智慧型手機即將比傳統手機還要多 iOS UIWebView 4 http://MobileDev.TW
  5. 5. 多數人的選擇已偏向智慧型手機 iOS UIWebView 5 http://MobileDev.TW
  6. 6. 我要智慧型手機幹嘛?iOS UIWebView 6 http://MobileDev.TW
  7. 7. App生態圈 Cloud Service ProviderCustomer Training Center ADs Seller Developer Designer Funder Platform Holder Incubation Center Network Admin iOS UIWebView 7 http://MobileDev.TW
  8. 8. App 開發團隊角色 提出 需求 使用者經驗 架構師 圖像設計師客戶 設計 專案經理 研發 內部 提案 跨平台開發者 企劃 iOS 開發者 Android 開發者 iOS UIWebView 8 http://MobileDev.TW
  9. 9. What is App?行銷手法 趣味娛樂提供功能 資訊提供 iOS UIWebView 9 http://MobileDev.TW
  10. 10. Native AppiOS UIWebView 10 http://MobileDev.TW
  11. 11. Web AppiOS UIWebView 11 http://MobileDev.TW
  12. 12. Hybrid AppiOS UIWebView 12 http://MobileDev.TW
  13. 13. Web App or Native App? 功能 Web App Native App靜態圖片、文字展示 O O內容可直接線上更新 O X可上架販售 X O離線閱覽 X O加入主畫面螢幕 O O顯示自定啓動圖片 O O iOS UIWebView 13 http://MobileDev.TW
  14. 14. App1.0•  將資訊以適合手機瀏覽的方式進行呈現•  資訊來源可以是網路或是App中•  例如: •  百大小吃介紹 •  百大古蹟介紹 •  百大文化介紹 Content •  百大活動介紹 iOS UIWebView 14 http://MobileDev.TW
  15. 15. App2.0•  結合手機特性與既有資訊,以互動方式提供使用者 內容•  例如: •  最近的小吃 •  古蹟合成照相機 Content Device iOS UIWebView 15 http://MobileDev.TW
  16. 16. App3.0•  將App結合社群平台,提供使用者間的互動橋梁•  例如: •  用Facebook登入的聊天室App •  美食心得分享App Social Content Device iOS UIWebView 16 http://MobileDev.TW
  17. 17. How to develop them? iOS UIWebView 17 http://MobileDev.TW
  18. 18. Native AppiOS UIWebView 18 http://MobileDev.TW
  19. 19. Web AppiOS UIWebView 19 http://MobileDev.TW
  20. 20. Hybrid AppiOS UIWebView 20 http://MobileDev.TW
  21. 21. Any other alternatives? iOS UIWebView 21 http://MobileDev.TW
  22. 22. App Inventorhttp://www.appinventorbeta.com/iOS UIWebView 22 http://MobileDev.TW
  23. 23. PhoneGapiOS UIWebView 23 http://MobileDev.TW
  24. 24. TitaniumiOS UIWebView 24 http://MobileDev.TW
  25. 25. CoronaiOS UIWebView 25 http://MobileDev.TW
  26. 26. FlashiOS UIWebView 26 http://MobileDev.TW
  27. 27. Things become easier…. iOS UIWebView 27 http://MobileDev.TW
  28. 28. Retain Count? Out! iOS UIWebView 28 http://MobileDev.TW
  29. 29. HYBRID APP WE ALWAYS DO THIS... iOS UIWebView 29 http://MobileDev.TW
  30. 30. 資料介接別人家的Server XML Parser XML or JSON JSON Array Dic自己架的Server PHP + MySQL iOS UIWebView 30 http://MobileDev.TW
  31. 31. UIWebViewiOS UIWebView 31 http://MobileDev.TW
  32. 32. Load web page[myWebView loadRequest:! [NSURLRequest requestWithURL:! [NSURL URLWithString:@http://MobileDev.TW]]];! iOS UIWebView 32 http://MobileDev.TW
  33. 33. HTML5 - Video TagiOS UIWebView 33 http://MobileDev.TW
  34. 34. HTML5 - CanvasiOS UIWebView 34 http://MobileDev.TW
  35. 35. HTML5 - Input TypeRange Date Picker Placeholder iOS UIWebView 35 http://MobileDev.TW
  36. 36. HTML5 - Geolocation iOS UIWebView 36 http://MobileDev.TW
  37. 37. Web Page與App互動•  透過超連結的載入請求觸發,判斷超連結的字串是 否有特定關鍵字,來決定行為 Sent before a web view begins loading a frame. iOS UIWebView 37 http://MobileDev.TW
  38. 38. Web Page與App互動•  網頁上則撰寫一個特殊字串的超連結 iOS UIWebView 38 http://MobileDev.TW
  39. 39. UIWebView - Support Document Type• Excel (.xls) • Rich Text Format (.rtf)• Keynote (.key.zip) • Rich Text Format Directory (.rtfd.zip)• Numbers (.numbers.zip) • Keynote 09 (.key)• Pages (.pages.zip) • Numbers 09 (.numbers)• PDF (.pdf) • Pages 09 (.pages)• Powerpoint (.ppt)• Word (.doc) iOS UIWebView 39 http://MobileDev.TW
  40. 40. Support Document Type iOS UIWebView 40 http://MobileDev.TW
  41. 41. Support Document Type iOS UIWebView 41 http://MobileDev.TW
  42. 42. 運用CSS來進行頁面美化 iOS UIWebView 42 http://MobileDev.TW
  43. 43. 運用CSS來進行頁面美化 iOS UIWebView 43 http://MobileDev.TW
  44. 44. CSS3 TransformiOS UIWebView 44 http://MobileDev.TW
  45. 45. CSS3 TransformiOS UIWebView 45 http://MobileDev.TW
  46. 46. CSS3 多重背景iOS UIWebView 46 http://MobileDev.TW
  47. 47. CSS3 Transition•  運用touch事件與CSS3 Transition,當使用者觸碰 該區塊時,可產生橫向或直向的縮放動畫 iOS UIWebView 47 http://MobileDev.TW
  48. 48. CSS3 AnimationiOS UIWebView 48 http://MobileDev.TW
  49. 49. Mobile Web Framework iOS UIWebView 49 http://MobileDev.TW
  50. 50. 重組網頁資訊•  取得遠端的資訊•  設計一個HTML頁面,可使用CSS排版•  將遠端的資訊,結合近端HTML頁面的格式 iOS UIWebView 50 http://MobileDev.TW
  51. 51. 引用外部資訊 線上播放首頁 花卉列表 維基百科 線上資訊 離線播放 (第⼀一次使用需下載) iOS UIWebView 51 http://MobileDev.TW
  52. 52. Why Go Hybrid?•  保留頁面的替換性 •  最新訊息發佈 •  公司促銷廣告 •  經常性更換資料•  開啓特定文件•  運用CSS來進行頁面美化•  運用Mobile Web Framework•  重組網頁資訊•  引用外部資訊 iOS UIWebView 52 http://MobileDev.TW
  53. 53. Thank youiOS UIWebView 53 http://MobileDev.TW

×