W3              iP ho ne      C                  ery                 bile     HTML5              jQu                      ...
HTML5   ...
HISTORY OF HTML1989         Tim Berners-Lee, HTML Tags       CERN1994   May The First WWW conference           Geneva1994 ...
HISTORY OF HTML
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 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...
HTML5 FEATURES Web Form        Web SQL Database                    Indexed DatabaseCanvas / SVG      Web StorageAudio / Vi...
HTML5 FEATURES Web Form        Web SQL Database                    Indexed DatabaseCanvas / SVG      Web StorageAudio / Vi...
<article>     <mark>  <aside>      <meter><command>       <nav> <details>    <progress><summary>      <ruby> <figure>      ...
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                ...
INPUT TYPE                           <input type=‘color’/><input type=‘datetime’/>                            <input type=...
INPUT TYPE RANGE<input type=‘range’ min=’0’ max=‘100’ step=’1’/>
INPUT PLACEHOLDER<input type=‘text’ id=‘userid’ placeholder=‘     ’/><input type=‘password’ id=‘passwd’ placeholder=‘     ...
INPUTinput       required        , URL
DATALIST<input type="text" list="favorite_cars"/><datalist id="favorite_cars">  <option label="210hp" value="Kia K5"/>  <o...
INPUT TYPE<input type=‘text’/>   <input type=‘email’/>
INPUT TYPE<input type=‘number’/>   <input type=‘tel’/>
For multimedia content, sounds, music or<audio>          other audio streams.          For video content, such as a movie ...
AUDIO, VIDEO TAG                       Video                             Audio                              Ogg           ...
VIDEO TAG<video id="video" poster="../video/poster.png" autobuffer>    <source src="../video/myvideo.ogv"/>    <source src...
WEB GL✤                                3D   .✤   OpenGL ES 2.0   JavaScript    .✤         ,     ,     NVIDIA, AMD,
WEB GLhttp://bodybrowser.googlelabs.com
WEB GLhttp://blog.nihilogic.dk/2009/11/webgl-musical-solar-system.html
DEVICE APIS AND POLICY WORKING GROUP           Calendar                  Contacts                                     Addr...
DEVICE APIS AND POLICY WORKING GROUP           Calendar                         Contacts                                  ...
HTML5            WEB WORKERSAN API THAT ALLOWS WEB APPLICATION AUTHORS        TO SPAWN BACKGROUND WORKERS RUNNING SCRIPTS ...
WEB WORKERS APIfor (var i = 0; i <= 1000000000; i += 1) {   var j = i;}
WEB WORKERS API           JavaScript           .Worker           DOM Access         . message           ,          Worker ...
WEB WORKERS APIvar bgJob = new Worker(background.js);bgJob.postMessage(inputData);bgJob.onmessage = function(event) {    c...
WEB WORKERS API       Worker()             Web Worker       onmessage        onerrorpostMessage(msg, [ports])       termin...
HTML5                  WEB STORAGE   WEB APPLICATION SOFTWARE METHODS AND PROTOCOLS USED FOR STORING DATA IN A WEB BROWSER...
WEB STORAGE API✤                                 Cookie       .✤   Cookie          .                            4KB       ...
WEB STORAGE API✤   HTML5 Web Storage                                           .                                 5MB      ...
WEB STORAGE API    LocalStorage           SessionStorage(                  )   (                    )
WEB STORAGE APIfunction isSupportLocalStorage() {  var result = true;  try { localStorage }  catch (e) { result = false; }...
WEB STORAGE APIvar sKey   = $(“#txtKey”).val();var sValue = $(“#txtValue”).val();try {  localStorage.setItem(sKey, sValue)...
WEB STORAGE APIvar sKey = “userName”;localStorage.getItem(sKey);localStorage.removeItem(sKey);localStorage.clear();       ...
HTML5        GEOLOCATION     THE GEOLOCATION API DEFINES A HIGH-LEVEL INTERFACE TOLOCATION INFORMATION ASSOCIATED ONLY WIT...
GEOLOCATION API✤                                    API.✤                 GPS                       .     WPS : WiFi Posit...
GEOLOCATION APIif (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(success, error);} else {  alert(“bro...
GEOLOCATION API
HTML5        WEBSOCKET        A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL,          FULL-DUPLEX COMMUNICATIONS CHANNELS,OVER...
?✤           TCP Socket              IETF     .✤   1           TCP                   .✤                  ,              , ...
CASE #1.     WAS           .
CASE #2.     WAS
[Constructor (in DOMString url, in optional DOMString protocol)]interface WebSocket {  readonly attribute DOMString URL; c...
[Constructor (in DOMString url, in optional DOMString protocol)][Constructor (in DOMString url, in optional DOMString[] pr...
WebSocket Client Sample
WebSocket ServerOpening handshake
✤   JavaApplet            Flash          HTTP Header                 .                             (Firewall Circumvention...
Firewall Circumvention Attack
Cache Poisoning Attack
✤   Proxy       Upgrade-based, POST-based    WebSocket Handshake                     .✤                          CONNECT m...
✤        Firefox 4 beta 8         Opera 11.0                  WebSocket                    .✤   Firefox                   ...
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 MOBILE    <link rel="stylesheet" href="./script/jquery.mobile-1.0a2.min.css"/>    <script src="./script/jquery-1.4....
JQUERY MOBILE<div data-role="page">  <div data-role="header">...</div>  <div data-role="content">...</div>  <div data-role...
JQUERY HYBRID APP DEMO
JQUERY HYBRID APP DEMO
JQUERY HYBRID APP DEMO
JQUERY HYBRID APP DEMO
DEMO         (iPhone & Android)http://bit.ly/zany-mobile
HTML5 웹 표준과 모바일 개발
HTML5 웹 표준과 모바일 개발
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 웹 표준과 모바일 개발

8,275

Published on

2011년 2월 8일 삼성전자 사내 발표 자료.
2011년 3월 8일 kmobile 발표

twitter : @ohmyzany
blog : http://zany.kr

Published in: Technology
3 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,275
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
3
Likes
16
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
  • \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 eG (@ohmyzany) ap
    2. 2. HTML5 ...
    3. 3. 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
    4. 4. HISTORY OF HTML
    5. 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 Junehttp://beta.html5test.com November
    6. 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 Junehttp://beta.html5test.com November
    7. 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 Junehttp://beta.html5test.com November
    8. 8. HTML5✤ HTML5 - http://bit.ly/chh79p✤ - http://beta.html5test.com (http:// html5test.com)
    9. 9. HTML5 OVERVIEW
    10. 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. 11. STRUCTURAL ELEMENTSBefore After http://html5doctor.com/designing-a-blog-with-html5/
    12. 12. HTML5 FEATURES Web Form Web SQL Database Indexed DatabaseCanvas / SVG Web StorageAudio / Video Web WorkersGeolocation Web Socket Web GL
    13. 13. HTML5 FEATURES Web Form Web SQL Database Indexed DatabaseCanvas / SVG Web StorageAudio / Video Web WorkersGeolocation Web Socket Web GL ● ● ● ● ●
    14. 14. <article> <mark> <aside> <meter><command> <nav> <details> <progress><summary> <ruby> <figure> <rt><figcaption> <rp> <footer> <section> <header> <time> <hgroup> <wbr>
    15. 15. 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.
    16. 16. INPUT TYPE tel week search time url datetime-local email numberdatetime range date color month
    17. 17. INPUT TYPE <input type=‘color’/><input type=‘datetime’/> <input type=‘number’/>
    18. 18. INPUT TYPE RANGE<input type=‘range’ min=’0’ max=‘100’ step=’1’/>
    19. 19. INPUT PLACEHOLDER<input type=‘text’ id=‘userid’ placeholder=‘ ’/><input type=‘password’ id=‘passwd’ placeholder=‘ ’/>
    20. 20. INPUTinput required , URL
    21. 21. DATALIST<input type="text" list="favorite_cars"/><datalist id="favorite_cars"> <option label="210hp" value="Kia K5"/> <option label="270hp" value="Kia K7"/> <option label="235hp" value="Hyundai Genesis"/> <option label="360hp" value="Hyundai Equus"/> <option label="174hp" value="BMW Mini Cooper"/> <option label="236hp" value="BMW Mini Cooper S"/></datalist>
    22. 22. INPUT TYPE<input type=‘text’/> <input type=‘email’/>
    23. 23. INPUT TYPE<input type=‘number’/> <input type=‘tel’/>
    24. 24. 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.
    25. 25. AUDIO, VIDEO TAG Video Audio Ogg Ogg MPEG-4 H.264 WebM PCM MP3 AAC WebM Theora Vorbis IE9 YES YES YESFirefox 4 YES YES YES YES YES beta 7 Safari YES YES YES YES YES 5.0.2Chrome YES YES YES YES YES YES YES YES 8.0 Opera YES YES YES YES YES 11.0 iOS YES YES YES YES YES 4.2.1Android 2.2 http://html5test.com
    26. 26. VIDEO TAG<video id="video" poster="../video/poster.png" autobuffer> <source src="../video/myvideo.ogv"/> <source src="../video/myvideo.webm"/> <source src="../video/myvideo.m4v"/></video><script> var videoObj = document.getElementById("video");</script>currentTime ended ? duration paused ? volume pause() play()
    27. 27. WEB GL✤ 3D .✤ OpenGL ES 2.0 JavaScript .✤ , , NVIDIA, AMD,
    28. 28. WEB GLhttp://bodybrowser.googlelabs.com
    29. 29. WEB GLhttp://blog.nihilogic.dk/2009/11/webgl-musical-solar-system.html
    30. 30. 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) ● ● ●
    31. 31. 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.
    32. 32. HTML5 WEB WORKERSAN API THAT ALLOWS WEB APPLICATION AUTHORS TO SPAWN BACKGROUND WORKERS RUNNING SCRIPTS IN PARALLEL TO THEIR MAIN PAGE.THIS ALLOWS FOR THREAD-LIKE OPERATION WITH MESSAGE-PASSING AS THE COORDINATION MECHANISM.
    33. 33. WEB WORKERS APIfor (var i = 0; i <= 1000000000; i += 1) { var j = i;}
    34. 34. WEB WORKERS API JavaScript .Worker DOM Access . message , Worker .
    35. 35. WEB WORKERS APIvar bgJob = new Worker(background.js);bgJob.postMessage(inputData);bgJob.onmessage = function(event) { console.log(event.data);}bgJob.onerror = function(event) { console.log(event.message);}
    36. 36. WEB WORKERS API Worker() Web Worker onmessage onerrorpostMessage(msg, [ports]) terminate() Worker SharedWorker Worker onconnect Worker
    37. 37. 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.
    38. 38. WEB STORAGE API✤ Cookie .✤ Cookie . 4KB . HTTP Request . . . .
    39. 39. WEB STORAGE API✤ HTML5 Web Storage . 5MB . . Key - Value LocalStorage, SessionStorage 2 .
    40. 40. WEB STORAGE API LocalStorage SessionStorage( ) ( )
    41. 41. WEB STORAGE APIfunction 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;}
    42. 42. WEB STORAGE APIvar sKey = $(“#txtKey”).val();var sValue = $(“#txtValue”).val();try { localStorage.setItem(sKey, sValue);} catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert(“ .”); }} Key-Value pair
    43. 43. WEB STORAGE APIvar sKey = “userName”;localStorage.getItem(sKey);localStorage.removeItem(sKey);localStorage.clear(); SessionStorage LocalStorage .
    44. 44. HTML5 GEOLOCATION THE GEOLOCATION API DEFINES A HIGH-LEVEL INTERFACE TOLOCATION INFORMATION ASSOCIATED ONLY WITH THE DEVICE HOSTING THE IMPLEMENTATION, SUCH AS LATITUDE AND LONGITUDE
    45. 45. GEOLOCATION API✤ API.✤ GPS . WPS : WiFi Positioning System✤ , , , , , .✤ navigator.geolocation object
    46. 46. GEOLOCATION APIif (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”);}
    47. 47. GEOLOCATION API
    48. 48. HTML5 WEBSOCKET A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL, FULL-DUPLEX COMMUNICATIONS CHANNELS,OVER A SINGLE TRANSMISSION CONTROL PROTOCOL (TCP) SOCKET
    49. 49. ?✤ TCP Socket IETF .✤ 1 TCP .✤ , , .✤ JavaScript setInterval() Reverse Ajax (Comet) .
    50. 50. CASE #1. WAS .
    51. 51. CASE #2. WAS
    52. 52. [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
    53. 53. [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
    54. 54. WebSocket Client Sample
    55. 55. WebSocket ServerOpening handshake
    56. 56. ✤ JavaApplet Flash HTTP Header . (Firewall Circumvention Attack) Host Header , . Cache Poisoning Attack Proxy Cache .
    57. 57. Firewall Circumvention Attack
    58. 58. Cache Poisoning Attack
    59. 59. ✤ Proxy Upgrade-based, POST-based WebSocket Handshake .✤ CONNECT mechanism .
    60. 60. ✤ Firefox 4 beta 8 Opera 11.0 WebSocket .✤ Firefox . (http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/)
    61. 61. HTML + NATIVE SDKHYBRID APP
    62. 62. ?✤ , Native SDK .✤ , Native SDK .
    63. 63. ✤ iPhone Safari http://splax.net/m http://www.touchapp.co.uk/iphone
    64. 64. ✤ , . . .✤ . Native .
    65. 65. Native SDK HTML, CSS, JavaScript (iPhone SDK, Android SDK...) Native SDK (Native Native )Native Browser Native
    66. 66. HTML, CSS, JavaScript
    67. 67. HTML, CSS, JavaScript JQTouch, JQueryMobile
    68. 68. Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    69. 69. iPhone SDK Android SDKNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    70. 70. iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    71. 71. iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    72. 72. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    73. 73. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    74. 74. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
    75. 75. ✤ (iPhone, Android, Blackberry, Tablet PC...)✤ iPhone / iPad Native SDK Macintosh .✤ Android Windows, Mac, Linux .✤ Blackberry Windows . Macintosh .
    76. 76. ✤ Xcode 3.2.4 iOS4✤ Eclipse Galileo✤ PhoneGap Framework✤ JQuery Framework (for JQueryMobile)✤ JQueryMobile or JQTouch Framework✤ Android SDK & Blackberry SDK
    77. 77. PHONEGAPBUILDING CROSS-PLATFORM MOBILE APPS IN HTML, CSS AND JAVASCRIPT
    78. 78. PHONEGAP ?✤ HTML, CSS, JavaScript . .✤ HTML5 . , .
    79. 79. PHONEGAP
    80. 80. PHONEGAP - IPHONE
    81. 81. PHONEGAP - IPHONE
    82. 82. PHONEGAP - ANDROID
    83. 83. JQUERY MOBILE TOUCH-OPTIMIZED WEB FRAMEWORK FOR SMARTPHONES & TABLETS
    84. 84. JQUERY MOBILE✤ JavaScript Framework.✤ UI Layout . Theme .✤ Event . Tap, Swipe, Orientation, Scroll...✤ JQuery Framework Ajax, Animation, Transitions, Dialogs...
    85. 85. JQUERY MOBILE <link rel="stylesheet" href="./script/jquery.mobile-1.0a2.min.css"/> <script src="./script/jquery-1.4.4.min.js"></script> <script src="./script/jquery.mobile-1.0a2.min.js"></script>✤ <head> JQueryMobile .✤ .✤ Alpha 2... ...
    86. 86. 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
    87. 87. JQUERY HYBRID APP DEMO
    88. 88. JQUERY HYBRID APP DEMO
    89. 89. JQUERY HYBRID APP DEMO
    90. 90. JQUERY HYBRID APP DEMO
    91. 91. DEMO (iPhone & Android)http://bit.ly/zany-mobile

    ×