HTML5 웹 표준과 모바일 개발

  • 8,004 views
Uploaded on

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

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,004
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
3
Likes
15

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
  • \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

  • 1. W3 iP ho ne C ery bile HTML5 jQu 5 MoPh Lon TM eG (@ohmyzany) ap
  • 2. HTML5 ...
  • 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. HISTORY OF HTML
  • 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. 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. 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. HTML5✤ HTML5 - http://bit.ly/chh79p✤ - http://beta.html5test.com (http:// html5test.com)
  • 9. HTML5 OVERVIEW
  • 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 ELEMENTSBefore After http://html5doctor.com/designing-a-blog-with-html5/
  • 12. HTML5 FEATURES Web Form Web SQL Database Indexed DatabaseCanvas / SVG Web StorageAudio / Video Web WorkersGeolocation Web Socket Web GL
  • 13. HTML5 FEATURES Web Form Web SQL Database Indexed DatabaseCanvas / SVG Web StorageAudio / Video Web WorkersGeolocation Web Socket Web GL ● ● ● ● ●
  • 14. <article> <mark> <aside> <meter><command> <nav> <details> <progress><summary> <ruby> <figure> <rt><figcaption> <rp> <footer> <section> <header> <time> <hgroup> <wbr>
  • 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. INPUT TYPE tel week search time url datetime-local email numberdatetime range date color month
  • 17. INPUT TYPE <input type=‘color’/><input type=‘datetime’/> <input type=‘number’/>
  • 18. INPUT TYPE RANGE<input type=‘range’ min=’0’ max=‘100’ step=’1’/>
  • 19. INPUT PLACEHOLDER<input type=‘text’ id=‘userid’ placeholder=‘ ’/><input type=‘password’ id=‘passwd’ placeholder=‘ ’/>
  • 20. INPUTinput required , URL
  • 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. INPUT TYPE<input type=‘text’/> <input type=‘email’/>
  • 23. INPUT TYPE<input type=‘number’/> <input type=‘tel’/>
  • 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. 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. 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. WEB GL✤ 3D .✤ OpenGL ES 2.0 JavaScript .✤ , , NVIDIA, AMD,
  • 28. WEB GLhttp://bodybrowser.googlelabs.com
  • 29. WEB GLhttp://blog.nihilogic.dk/2009/11/webgl-musical-solar-system.html
  • 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. 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. 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. WEB WORKERS APIfor (var i = 0; i <= 1000000000; i += 1) { var j = i;}
  • 34. WEB WORKERS API JavaScript .Worker DOM Access . message , Worker .
  • 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. WEB WORKERS API Worker() Web Worker onmessage onerrorpostMessage(msg, [ports]) terminate() Worker SharedWorker Worker onconnect Worker
  • 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. WEB STORAGE API✤ Cookie .✤ Cookie . 4KB . HTTP Request . . . .
  • 39. WEB STORAGE API✤ HTML5 Web Storage . 5MB . . Key - Value LocalStorage, SessionStorage 2 .
  • 40. WEB STORAGE API LocalStorage SessionStorage( ) ( )
  • 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. 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. WEB STORAGE APIvar sKey = “userName”;localStorage.getItem(sKey);localStorage.removeItem(sKey);localStorage.clear(); SessionStorage LocalStorage .
  • 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. GEOLOCATION API✤ API.✤ GPS . WPS : WiFi Positioning System✤ , , , , , .✤ navigator.geolocation object
  • 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. GEOLOCATION API
  • 48. HTML5 WEBSOCKET A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL, FULL-DUPLEX COMMUNICATIONS CHANNELS,OVER A SINGLE TRANSMISSION CONTROL PROTOCOL (TCP) SOCKET
  • 49. ?✤ TCP Socket IETF .✤ 1 TCP .✤ , , .✤ JavaScript setInterval() Reverse Ajax (Comet) .
  • 50. CASE #1. WAS .
  • 51. CASE #2. WAS
  • 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. [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. WebSocket Client Sample
  • 55. WebSocket ServerOpening handshake
  • 56. ✤ JavaApplet Flash HTTP Header . (Firewall Circumvention Attack) Host Header , . Cache Poisoning Attack Proxy Cache .
  • 57. Firewall Circumvention Attack
  • 58. Cache Poisoning Attack
  • 59. ✤ Proxy Upgrade-based, POST-based WebSocket Handshake .✤ CONNECT mechanism .
  • 60. ✤ Firefox 4 beta 8 Opera 11.0 WebSocket .✤ Firefox . (http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/)
  • 61. HTML + NATIVE SDKHYBRID APP
  • 62. ?✤ , Native SDK .✤ , Native SDK .
  • 63. ✤ iPhone Safari http://splax.net/m http://www.touchapp.co.uk/iphone
  • 64. ✤ , . . .✤ . Native .
  • 65. Native SDK HTML, CSS, JavaScript (iPhone SDK, Android SDK...) Native SDK (Native Native )Native Browser Native
  • 66. HTML, CSS, JavaScript
  • 67. HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 68. Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 69. iPhone SDK Android SDKNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 70. iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 71. iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 72. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 73. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 74. iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • 75. ✤ (iPhone, Android, Blackberry, Tablet PC...)✤ iPhone / iPad Native SDK Macintosh .✤ Android Windows, Mac, Linux .✤ Blackberry Windows . Macintosh .
  • 76. ✤ Xcode 3.2.4 iOS4✤ Eclipse Galileo✤ PhoneGap Framework✤ JQuery Framework (for JQueryMobile)✤ JQueryMobile or JQTouch Framework✤ Android SDK & Blackberry SDK
  • 77. PHONEGAPBUILDING CROSS-PLATFORM MOBILE APPS IN HTML, CSS AND JAVASCRIPT
  • 78. PHONEGAP ?✤ HTML, CSS, JavaScript . .✤ HTML5 . , .
  • 79. PHONEGAP
  • 80. PHONEGAP - IPHONE
  • 81. PHONEGAP - IPHONE
  • 82. PHONEGAP - ANDROID
  • 83. JQUERY MOBILE TOUCH-OPTIMIZED WEB FRAMEWORK FOR SMARTPHONES & TABLETS
  • 84. JQUERY MOBILE✤ JavaScript Framework.✤ UI Layout . Theme .✤ Event . Tap, Swipe, Orientation, Scroll...✤ JQuery Framework Ajax, Animation, Transitions, Dialogs...
  • 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. 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. JQUERY HYBRID APP DEMO
  • 88. JQUERY HYBRID APP DEMO
  • 89. JQUERY HYBRID APP DEMO
  • 90. JQUERY HYBRID APP DEMO
  • 91. DEMO (iPhone & Android)http://bit.ly/zany-mobile