W3              iP ho ne      C                  ery                 bile     HTML5              jQu                      ...
HTML5   ...
HISTORY OF HTML
HISTORY OF HTML1989         Tim Berners-Lee, HTML Tags       CERN1994   May The First WWW conference           Geneva1994 ...
HISTORY OF HTML
HISTORY OF HTML
HTML5                                    Junehttp://beta.html5test.com                                    November
HTML5                  IE7                  IE8                  IE9      FireFox 4.0b7    Opera 11 Alpha        Chrome 8....
HTML5                        0                  IE7                            27                  IE8                    ...
HTML5                        0                  IE7                            17                                 27      ...
HTML5✤   HTML5                      - http://bit.ly/chh79p✤                    - http://beta.html5test.com (http://    htm...
HTML5✤   HTML5                      - http://bit.ly/chh79p✤                    - http://beta.html5test.com (http://    htm...
HTML5 OVERVIEW
DOCTYPE     <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">   ...
STRUCTURAL ELEMENTSBefore                                                     After     http://html5doctor.com/designing-a...
<article>     <mark>  <aside>      <meter><command>       <nav> <details>    <progress><summary>      <ruby> <figure>      ...
For multimedia content, sounds, music or<audio>          other audio streams.          For video content, such as a movie ...
FORM<canvas> For making graphics with a script.<datalist> A list of options for input values.<keygen> Generate keys to aut...
INPUT TYPE  tel                   week search                 time  url             datetime-local email               num...
HTML5  Web Form         Web SQL Database Canvas / SVG        Local Storage Audio / Video       Web Workers Geolocation    ...
HTML5  Web Form         Web SQL Database Canvas / SVG        Local Storage Audio / Video       Web Workers Geolocation    ...
DEVICE APIS AND POLICY WORKING         Calendar                  Contacts                                   Address-book  ...
DEVICE APIS AND POLICY WORKING         Calendar                         Contacts                                          ...
HTML + NATIVE SDKHYBRID APP
?✤                         ,    Native SDK                 .✤                        , Native SDK                     .
✤   iPhone Safari     http://splax.net/m     http://www.touchapp.co.uk/iphone
✤             ,                   .                 .                             .✤                     .    Native      ...
Native SDK      HTML, CSS, JavaScript                                    (iPhone SDK, Android SDK...)                     ...
HTML, CSS, JavaScript
HTML, CSS, JavaScript     JQTouch,   JQueryMobile
Native Framework  HTML, CSS,   JavaScript        JQTouch,      JQueryMobile
iPhone SDK                Android SDKNative Framework  HTML, CSS,   JavaScript        JQTouch,      JQueryMobile
iPhone SDK                Android SDK   Native AppNative Framework  HTML, CSS,   JavaScript        JQTouch,      JQueryMob...
iPhone SDK                Android SDK   Native AppNative Framework  HTML, CSS,   JavaScript        JQTouch,      JQueryMob...
iPhone SDK                Android SDK   Native App                 App StoreNative Framework  HTML, CSS,   JavaScript     ...
iPhone SDK                Android SDK   Native App                 App StoreNative Framework  HTML, CSS,   JavaScript     ...
iPhone SDK                Android SDK   Native App                 App StoreNative Framework  HTML, CSS,   JavaScript     ...
✤             (iPhone, Android, Blackberry, Tablet PC...)✤   iPhone / iPad           Native SDK    Macintosh       .✤   An...
✤   Xcode 3.2.4     iOS4✤   Eclipse Galileo✤   PhoneGap Framework✤   JQuery Framework (for JQueryMobile)✤   JQueryMobile o...
PHONEGAPBUILDING CROSS-PLATFORM MOBILE APPS     IN HTML, CSS AND JAVASCRIPT
PHONEGAP           ?✤   HTML, CSS, JavaScript                                            .                            .✤  ...
PHONEGAP
PHONEGAP - IPHONE
PHONEGAP - IPHONE
PHONEGAP - ANDROID
JQUERY MOBILE TOUCH-OPTIMIZED WEB FRAMEWORK    FOR SMARTPHONES & TABLETS
JQUERY MOBILE✤                        JavaScript Framework.✤                                  UI Layout     .             ...
JQUERY HYBRID APP DEMO
JQUERY HYBRID APP DEMO
JQUERY HYBRID APP DEMO
JQUERY HYBRID APP DEMO
JQUERY HYBRID APP DEMO
HTML5 WEBSOCKET        A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL,          FULL-DUPLEX COMMUNICATIONS CHANNELS,OVER A SING...
?✤           TCP Socket              IETF     .✤   1           TCP                   .✤                  ,              , ...
CASE #1.     WAS           .
CASE #2.     WAS
WebSocket Client API Working Draft
WebSocket Client API Editor’s Draft
WebSocket Client Sample
WebSocket ServerOpening handshake
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
HTML5 를 이용한 하이브리드앱 제작
Upcoming SlideShare
Loading in...5
×

HTML5 를 이용한 하이브리드앱 제작

16,989

Published on

HTML5 를 이용한 하이브리드앱 제작

@ohmyzany
http://zany.kr

Published in: Technology
1 Comment
37 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,989
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
0
Comments
1
Likes
37
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "HTML5 를 이용한 하이브리드앱 제작"

    1. 1. W3 iP ho ne C ery bile HTML5 jQu 5 MoPh Lon TM (@ohmyzany) eG ap
    2. 2. HTML5 ...
    3. 3. HISTORY OF HTML
    4. 4. HISTORY OF HTML1989 Tim Berners-Lee, HTML Tags CERN1994 May The First WWW conference Geneva1994 Sep IETF sets up HTML working group1995 Nov HTML 2.0 IETF1997 Jan HTML 3.2 W3C1997 Dec HTML 4.0 W3C1999 Dec HTML 4.01 W3C2000 XHTML 1.0 W3C2002 XHTML 2.0 W3C2004 Web Applications 1.0 WHATWG2007 HTML5 Working Group W3C2010 Oct HTML5 Last Call Working Draft W3C
    5. 5. HISTORY OF HTML
    6. 6. HISTORY OF HTML
    7. 7. HTML5 Junehttp://beta.html5test.com November
    8. 8. 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 Junehttp://beta.html5test.com November
    9. 9. 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 Junehttp://beta.html5test.com November
    10. 10. 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 Junehttp://beta.html5test.com November
    11. 11. HTML5✤ HTML5 - http://bit.ly/chh79p✤ - http://beta.html5test.com (http:// html5test.com)
    12. 12. HTML5✤ HTML5 - http://bit.ly/chh79p✤ - http://beta.html5test.com (http:// html5test.com)
    13. 13. HTML5 OVERVIEW
    14. 14. 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>
    15. 15. STRUCTURAL ELEMENTSBefore After http://html5doctor.com/designing-a-blog-with-html5/
    16. 16. <article> <mark> <aside> <meter><command> <nav> <details> <progress><summary> <ruby> <figure> <rt><figcaption> <rp> <footer> <section> <header> <time> <hgroup> <wbr>
    17. 17. 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.
    18. 18. 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.
    19. 19. INPUT TYPE tel week search time url datetime-local email numberdatetime range date color month
    20. 20. HTML5 Web Form Web SQL Database Canvas / SVG Local Storage Audio / Video Web Workers Geolocation Web SocketOffline web apps
    21. 21. HTML5 Web Form Web SQL Database Canvas / SVG Local Storage Audio / Video Web Workers Geolocation Web SocketOffline web apps ● ● ● ● ●
    22. 22. DEVICE APIS AND POLICY WORKING Calendar Contacts Address-book Camera Messaging and microphone (SMS, MMS, Emails) System info Device Interfaces (CPU, Network, etc) Application Launcher (KangChan Lee, WonSuk Lee) ● ● ●
    23. 23. DEVICE APIS AND POLICY WORKING 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.
    24. 24. HTML + NATIVE SDKHYBRID APP
    25. 25. ?✤ , Native SDK .✤ , Native SDK .
    26. 26. ✤ iPhone Safari http://splax.net/m http://www.touchapp.co.uk/iphone
    27. 27. ✤ , . . .✤ . Native .
    28. 28. Native SDK HTML, CSS, JavaScript (iPhone SDK, Android SDK...) Native SDK (Native Native )Native Browser Native
    29. 29. HTML, CSS, JavaScript
    30. 30. HTML, CSS, JavaScript JQTouch, JQueryMobile
    31. 31. Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    32. 32. iPhone SDK Android SDKNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    33. 33. iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    34. 34. iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    35. 35. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    36. 36. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    37. 37. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    38. 38. ✤ (iPhone, Android, Blackberry, Tablet PC...)✤ iPhone / iPad Native SDK Macintosh .✤ Android Windows, Mac, Linux .✤ Blackberry Windows . Macintosh .
    39. 39. ✤ Xcode 3.2.4 iOS4✤ Eclipse Galileo✤ PhoneGap Framework✤ JQuery Framework (for JQueryMobile)✤ JQueryMobile or JQTouch Framework✤ Android SDK & Blackberry SDK
    40. 40. PHONEGAPBUILDING CROSS-PLATFORM MOBILE APPS IN HTML, CSS AND JAVASCRIPT
    41. 41. PHONEGAP ?✤ HTML, CSS, JavaScript . .✤ HTML5 . , .
    42. 42. PHONEGAP
    43. 43. PHONEGAP - IPHONE
    44. 44. PHONEGAP - IPHONE
    45. 45. PHONEGAP - ANDROID
    46. 46. JQUERY MOBILE TOUCH-OPTIMIZED WEB FRAMEWORK FOR SMARTPHONES & TABLETS
    47. 47. JQUERY MOBILE✤ JavaScript Framework.✤ UI Layout . Theme .✤ Event . Tap, Swipe, Orientation, Scroll...✤ JQuery Framework Ajax, Animation, Transitions, Dialogs...
    48. 48. JQUERY HYBRID APP DEMO
    49. 49. JQUERY HYBRID APP DEMO
    50. 50. JQUERY HYBRID APP DEMO
    51. 51. JQUERY HYBRID APP DEMO
    52. 52. JQUERY HYBRID APP DEMO
    53. 53. HTML5 WEBSOCKET A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL, FULL-DUPLEX COMMUNICATIONS CHANNELS,OVER A SINGLE TRANSMISSION CONTROL PROTOCOL (TCP) SOCKET
    54. 54. ?✤ TCP Socket IETF .✤ 1 TCP .✤ , , .✤ JavaScript setInterval() Reverse Ajax (Comet) .
    55. 55. CASE #1. WAS .
    56. 56. CASE #2. WAS
    57. 57. WebSocket Client API Working Draft
    58. 58. WebSocket Client API Editor’s Draft
    59. 59. WebSocket Client Sample
    60. 60. WebSocket ServerOpening handshake

    ×