HTML5 를 이용한 하이브리드앱 제작
•
42 j'aime•10,615 vues
This document provides an overview of hybrid mobile application development using HTML5, CSS and JavaScript. It discusses frameworks like PhoneGap and jQuery Mobile that allow building cross-platform apps for iOS, Android and other mobile platforms from a single codebase. Key points include how these frameworks integrate with native SDKs while exposing native device APIs to web technologies, and examples of building demo hybrid apps targeting iPhone and Android.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à HTML5 를 이용한 하이브리드앱 제작
Similaire à HTML5 를 이용한 하이브리드앱 제작 (20)
Dernier
Dernier (20)
HTML5 를 이용한 하이브리드앱 제작
- 1. W3 iP ho ne C ery bile HTML5 jQu 5 Mo Ph L on TM eG (@ohmyzany) ap
- 2. HTML5 ...
- 3. HISTORY OF HTML 1989 Tim Berners-Lee, HTML Tags CERN 1994 May The First WWW conference Geneva 1994 Sep IETF sets up HTML working group 1995 Nov HTML 2.0 IETF 1997 Jan HTML 3.2 W3C 1997 Dec HTML 4.0 W3C 1999 Dec HTML 4.01 W3C 2000 XHTML 1.0 W3C 2002 XHTML 2.0 W3C 2004 Web Applications 1.0 WHATWG 2007 HTML5 Working Group W3C 2010 Oct HTML5 Last Call Working Draft W3C
- 5. HTML5 IE7 IE8 IE9 FireFox 4.0b7 Opera 11 Alpha Chrome 8.0 Safari 5.0 iOS 4.2.1 Android 2.2 0 50 100 150 200 250 300 June http://beta.html5test.com November
- 6. HTML5 0 IE7 27 IE8 0 IE9 139 FireFox 4.0b7 129 Opera 11 Alpha 202 Chrome 8.0 212 Safari 5.0 125 iOS 4.2.1 178 Android 2.2 0 50 100 150 200 250 300 June http://beta.html5test.com November
- 7. HTML5 0 IE7 17 27 IE8 27 0 IE9 80 139 FireFox 4.0b7 249 129 Opera 11 Alpha 223 202 Chrome 8.0 252 212 Safari 5.0 220 125 iOS 4.2.1 198 178 Android 2.2 178 0 50 100 150 200 250 300 June http://beta.html5test.com November
- 8. HTML5 ✤ HTML5 - http://bit.ly/chh79p ✤ - http://beta.html5test.com (http:// html5test.com)
- 10. DOCTYPE <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE html>
- 11. STRUCTURAL ELEMENTS Before After http://html5doctor.com/designing-a-blog-with-html5/
- 12. HTML5 FEATURES Web Form Web SQL Database Canvas / SVG Local Storage Audio / Video Web Workers Geolocation Web Socket Offline web apps
- 13. HTML5 FEATURES Web Form Web SQL Database Canvas / SVG Local Storage Audio / Video Web Workers Geolocation Web Socket Offline web apps ● ● ● ● ●
- 14. <article> <mark> <aside> <meter> <command> <nav> <details> <progress> <summary> <ruby> <figure> <rt> <figcaption> <rp> <footer> <section> <header> <time> <hgroup> <wbr>
- 15. For multimedia content, sounds, music or <audio> other audio streams. For video content, such as a movie clip or <video> other video streams. For media resources for media elements, <source> defined inside video or audio elements. <embed> For embedded content, such as plug-in.
- 16. FORM <canvas> For making graphics with a script. <datalist> A list of options for input values. <keygen> Generate keys to authenticate users. For different types of output, such as <output> output written by a script.
- 17. INPUT TYPE tel week search time url datetime-local email number datetime range date color month
- 18. DEVICE APIS AND POLICY WORKING GROUP Calendar Contacts Address-book Camera Messaging and microphone (SMS, MMS, Emails) System info Device Interfaces (CPU, Network, etc) Application Launcher (KangChan Lee, WonSuk Lee) ● ● ●
- 19. DEVICE APIS AND POLICY WORKING GROUP Calendar Contacts Address-book Camera Messaging and microphone (SMS, MMS, Emails) System info Device Interfaces (CPU, Network, etc) Application Launcher (KangChan Lee, WonSuk Lee) ● ● ● Device APIs and Policy Working Group Meeting The DAP WG is planning to have a F2F in Seoul, South Korea on March 15-18 2011, hosted by ETRI.
- 20. HTML5 WEB STORAGE WEB APPLICATION SOFTWARE METHODS AND PROTOCOLS USED FOR STORING DATA IN A WEB BROWSER. WEB STORAGE SUPPORTS PERSISTENT DATA STORAGE, SIMILAR TO COOKIES, AS WELL AS WINDOW-LOCAL STORAGE.
- 21. HTML5 WEB STORAGE API ✤ Cookie . ✤ Cookie . 4KB . HTTP Request . . . .
- 22. HTML5 WEB STORAGE API ✤ HTML5 Web Storage . 5MB . . Key - Value LocalStorage, SessionStorage 2 .
- 23. HTML5 WEB STORAGE API LocalStorage SessionStorage ( ) ( )
- 24. HTML5 WEB STORAGE API function isSupportLocalStorage() { var result = true; try { localStorage } catch (e) { result = false; } return result; } function isSupportSessionStorage() { var result = true; try { sessionStorage } catch (e) { result = false; } return result; }
- 25. HTML5 WEB STORAGE API var sKey = $(“#txtKey”).val(); var sValue = $(“#txtValue”).val(); try { localStorage.setItem(sKey, sValue); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert(“ .”); } } Key-Value pair
- 26. HTML5 WEB STORAGE API var sKey = “userName”; localStorage.getItem(sKey); localStorage.removeItem(sKey); localStorage.clear(); SessionStorage LocalStorage .
- 27. HTML5 GEOLOCATION THE GEOLOCATION API DEFINES A HIGH-LEVEL INTERFACE TO LOCATION INFORMATION ASSOCIATED ONLY WITH THE DEVICE HOSTING THE IMPLEMENTATION, SUCH AS LATITUDE AND LONGITUDE
- 28. HTML5 GEOLOCATION API ✤ API. ✤ GPS . WPS : WiFi Positioning System ✤ , , , , , . ✤ navigator.geolocation object
- 29. HTML5 GEOLOCATION API if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { alert(“browser does not support geolocation”); } function success(position) { alert(“latitude=” + position.coords.latitude + “, ” + “longitude=” + position.coords.longitude); } function error(e) { alert(“Error”); }
- 31. HTML5 WEBSOCKET A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL, FULL-DUPLEX COMMUNICATIONS CHANNELS, OVER A SINGLE TRANSMISSION CONTROL PROTOCOL (TCP) SOCKET
- 32. ? ✤ TCP Socket IETF . ✤ 1 TCP . ✤ , , . ✤ JavaScript setInterval() Reverse Ajax (Comet) .
- 33. CASE #1. WAS .
- 34. CASE #2. WAS
- 35. [Constructor (in DOMString url, in optional DOMString protocol)] interface WebSocket { readonly attribute DOMString URL; const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSED = 2; readonly attribute unsigned short readyState; readonly attribute unsigned long bufferedAmount; attribute Function onopen; attribute Function onmessage; attribute Function onclose; boolean send(in DOMString data); void close(); }; WebSocket implements EventTarget; WebSocket Client API Working Draft - 2009 12 22
- 36. [Constructor (in DOMString url, in optional DOMString protocol)] [Constructor (in DOMString url, in optional DOMString[] protocols)] interface WebSocket { readonly attribute DOMString URL; const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSING = 2; const unsigned short CLOSED = 3; readonly attribute unsigned short readyState; readonly attribute unsigned long bufferedAmount; attribute Function onopen; attribute Function onmessage; attribute Function onerror; attribute Function onclose; readonly attribute DOMString protocol; void send(in DOMString data); void close(); }; WebSocket implements EventTarget; WebSocket Client API Editor’s Draft - 2010 12 14
- 39. ✤ JavaApplet Flash HTTP Header . (Firewall Circumvention Attack) Host Header , . Cache Poisoning Attack Proxy Cache .
- 42. ✤ Proxy Upgrade-based, POST-based WebSocket Handshake . ✤ CONNECT mechanism .
- 44. ✤ Firefox 4 beta 8 Opera 11.0 WebSocket . ✤ Firefox . (http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/)
- 45. HTML + NATIVE SDK HYBRID APP
- 46. ? ✤ , Native SDK . ✤ , Native SDK .
- 47. ✤ iPhone Safari http://splax.net/m http://www.touchapp.co.uk/iphone
- 48. ✤ , . . . ✤ . Native .
- 49. Native SDK HTML, CSS, JavaScript (iPhone SDK, Android SDK...) Native SDK (Native Native ) Native Browser Native
- 52. HTML, CSS, JavaScript JQTouch, JQueryMobile
- 53. Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
- 54. iPhone SDK Android SDK Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
- 55. iPhone SDK Android SDK Native App Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
- 56. iPhone SDK Android SDK Native App Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
- 57. iPhone SDK Android SDK Native App App Store Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
- 58. iPhone SDK Android SDK Native App App Store Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
- 59. iPhone SDK Android SDK Native App App Store Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
- 60. ✤ (iPhone, Android, Blackberry, Tablet PC...) ✤ iPhone / iPad Native SDK Macintosh . ✤ Android Windows, Mac, Linux . ✤ Blackberry Windows . Macintosh .
- 61. ✤ Xcode 3.2.4 iOS4 ✤ Eclipse Galileo ✤ PhoneGap Framework ✤ JQuery Framework (for JQueryMobile) ✤ JQueryMobile or JQTouch Framework ✤ Android SDK & Blackberry SDK
- 62. PHONEGAP BUILDING CROSS-PLATFORM MOBILE APPS IN HTML, CSS AND JAVASCRIPT
- 63. PHONEGAP ? ✤ HTML, CSS, JavaScript . . ✤ HTML5 . , .
- 64. PHONEGAP
- 72. JQUERY MOBILE TOUCH-OPTIMIZED WEB FRAMEWORK FOR SMARTPHONES & TABLETS
- 73. JQUERY MOBILE ✤ JavaScript Framework. ✤ UI Layout . Theme . ✤ Event . Tap, Swipe, Orientation, Scroll... ✤ JQuery Framework Ajax, Animation, Transitions, Dialogs...
- 74. JQUERY MOBILE <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> header content footer
- 75. JQUERY HYBRID APP DEMO
- 76. JQUERY HYBRID APP DEMO
- 77. JQUERY HYBRID APP DEMO
- 78. JQUERY HYBRID APP DEMO
- 79. JQUERY HYBRID APP DEMO
- 80. DEMO (iPhone & Android) http://bit.ly/zany-mobile
Notes de l'éditeur
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n