Take Advantage of UIWebView for iOS Native App Developers
1 like1,040 views
本文介绍了 iOS 开发中使用 UIWebView 的重要性，涵盖了应用开发的各种类型（如原生应用、Web 应用和混合应用）以及开发过程中的角色和需求。文档还探讨了 HTML5 和 CSS3 在页面美化及交互中的应用，以及如何利用现有的数据源创建用户友好的应用。最后，强调了混合应用开发的优势，包括信息更新和界面美化的灵活性。
![Load web page
[myWebView loadRequest:!
[NSURLRequest requestWithURL:!
[NSURL URLWithString:@http://MobileDev.TW]]];!
iOS UIWebView 32 http://MobileDev.TW](https://image.slidesharecdn.com/takeadvantageofuiwebviewforiosnativeappdevelopers-120711091707-phpapp02/85/Take-Advantage-of-UIWebView-for-iOS-Native-App-Developers-32-320.jpg)
Take Advantage of UIWebView for iOS Native App Developers
- 1. Take Advantage of UIWebView for iOS Native App Developers Ryan Chung iOS UIWebView 1 http://MobileDev.TW
- 2. Ryan Chung ([email protected]) • 現任 • 經歷 • 資策會中壢中心課程研發經理 • 工研院電通所嵌入式網站開發 • 資策會中壢中心專任講師 • 經濟部工業局自由軟體推動計畫 • 資策會行動開發學院負責人 • 宜蘭縣政府自由軟體講師 • 學歷 • 平鎮陸軍通訊學校講師 • 台灣科技大學資工所碩士 • 龍潭陸軍總部講師 • 元智大學資訊工程系學士 • 資策會資訊技術訓練中心講師 • 資策會資技中心行動開發導師 • 教授科目 • 資策會資技中心數位學習網管理 • 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 Provider Customer 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 App iOS UIWebView 10 http://MobileDev.TW
- 11. Web App iOS UIWebView 11 http://MobileDev.TW
- 12. Hybrid App iOS UIWebView 12 http://MobileDev.TW
- 13. Web App or Native App? 功能 Web App Native App 靜態圖片、文字展示 Ｏ Ｏ 內容可直接線上更新 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 App iOS UIWebView 18 http://MobileDev.TW
- 19. Web App iOS UIWebView 19 http://MobileDev.TW
- 20. Hybrid App iOS UIWebView 20 http://MobileDev.TW
- 21. Any other alternatives? iOS UIWebView 21 http://MobileDev.TW
- 22. App Inventor http://www.appinventorbeta.com/ iOS UIWebView 22 http://MobileDev.TW
- 23. PhoneGap iOS UIWebView 23 http://MobileDev.TW
- 24. Titanium iOS UIWebView 24 http://MobileDev.TW
- 25. Corona iOS UIWebView 25 http://MobileDev.TW
- 26. Flash iOS 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. UIWebView iOS 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 Tag iOS UIWebView 33 http://MobileDev.TW
- 34. HTML5 - Canvas iOS UIWebView 34 http://MobileDev.TW
- 35. HTML5 - Input Type Range 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 Transform iOS UIWebView 44 http://MobileDev.TW
- 45. CSS3 Transform iOS 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 Animation iOS 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 you iOS UIWebView 53 http://MobileDev.TW