Your SlideShare is downloading. ×
Take Advantage of UIWebView for iOS Native App Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Take Advantage of UIWebView for iOS Native App Developers

1,565

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×