Your SlideShare is downloading. ×
0
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 어디까지 왔나?

7,567

Published on

[30회 정기세미나] HTML5 실무적용 전략 …

[30회 정기세미나] HTML5 실무적용 전략
HTML5 어디까지 왔나? / 발표자 황정현

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,567
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
446
Comments
1
Likes
5
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

Transcript

  • 1. ? :
  • 2. 1 ASP.NET Blog : http://using.tistory.com Twiiter : @y2kpooh Email : y2kpooh@snaps.co.kr
  • 3. HTML5? HTML5 HTML . 2004 6 Web Hypertext Application Technology Working Group(WHATWG) 1.0 . 2010 3 WHATWG (Draft Standard state) , W3C (Working Draft state) . HTML5 HTML 4.01, XHTML 1.0, DOM Level 2 HTML . , FX . : http://ko.wikipedia.org/wiki/HTML5
  • 4. HTML5 HISTORY • • W3C HTML4.01 -> XHTML 1.0 -> XHTML 1.1 • WHATWG Web Application 1.0
  • 5. HTML5 HISTORY HTML
  • 6. WHY HTML5?• W3C• API• , X••
  • 7. WHY HTML5?• .• .
  • 8. HTML5 -1 W3C HTML WG iOS Flash , HTML5 HTML5 Demo&Guide “ .”
  • 9. HTML5 -2 , HTML5 W3C HTML5 “ HTML5 .” “ .”
  • 10. HTML5 -3 IE9 HTML5 Mix11 HTML5 IE10 1 HTML5 Windows SkyDrive Silverlight HTML5 Window8 HTML5
  • 11. HTML5 -4
  • 12. HTML5 -5
  • 13. HTML5 -6
  • 14. HTML5 http://gs.statcounter.com
  • 15. HTML5 http://gs.statcounter.com
  • 16. HTML5 http://gs.statcounter.com
  • 17. HTML5 http://gs.statcounter.com
  • 18. HTML5 http://gs.statcounter.com
  • 19. HTML5
  • 20. HTML5 293 12 11 288 4/5 240 11.01HTML5 234 IE 10 PP2 5.0.4 231 IE9 228 8 130 32 0 75 150 225 300 http://html5test.com
  • 21. - Section : - Nav : - article : , , - aside : - hgroup : - header : , - footer : - time :
  • 22. HTML4 HTML5 <div class=”header”> <header></header>
  • 23. DEMO HTML4 -> HTML5 Live Coding http://freehtml5templates.com http://initializr.com/
  • 24. CANVAS , , , 2 3D API openGL WebGL .
  • 25. CANVAS•• https://mozillademos.org/demos/runfield/demo.html• http://worldsbiggestpacman.com/
  • 26. CANVAS•• http://mugtug.com/sketchpad/• http://muro.deviantart.com/
  • 27. CANVAS• SNS• http://foursquareplayground.com/
  • 28. CANVAS : http://caniuse.com/
  • 29. CANVAS • Line • Text • Curves • Composites • Paths • Transformations • Shapes • Images Manipulation • Fill Styles • Animation • Images • Interactivity http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
  • 30. CANVAS var canvas2=document.getElementById("circle"); var context2=canvas2.getContext("2d"); context2.beginPath(); context2.arc(70,70,50,0,2*Math.PI,true); context2.fillStyle = "#000"; context2.fill(); context2.lineWidth = 5; context2.strokeStyle = "#ff0000"; context2.stroke();
  • 31. CANVAS var canvas=document.getElementById("rectangle"); var context=canvas.getContext("2d"); context.beginPath(); context.rect(10,10,100,100); context.fillStyle = "#000"; context.fill(); context.lineWidth = 5; context.strokeStyle = "#ff0000"; context.stroke();
  • 32. CANVAS var canvas3=document.getElementById("triangle"); var context3=canvas3.getContext("2d"); context3.beginPath(); context3.moveTo(50,10); context3.lineTo(20,100); context3.lineTo(80,100); context3.closePath(); context3.fillStyle = "#000"; context3.fill();
  • 33. CANVASvar c_canvas4 = document.getElementById("mycanvas4");var context4 = c_canvas4.getContext("2d");var gradient = context4.createLinearGradient(0,0,100,0);gradient.addColorStop(0, "white");gradient.addColorStop(1, "yellow");context4.fillStyle = gradient;context4.fillRect(10,10,100,100);
  • 34. CANVASvar c_canvas7 = document.getElementById("mycanvas7");var context7 = c_canvas7.getContext("2d");context7.shadowColor = "gray";context7.shadowOffsetX = 5;context7.shadowOffsetY = 5;context7.shadowBlur = 2;context7.fillStyle = "#444442";context7.fillRect(15,15,133,56);var c_canvas8 = document.getElementById("mycanvas8");var context8 = c_canvas8.getContext("2d");context8.shadowColor = "gray";context8.shadowOffsetX = 5;context8.shadowOffsetY = 5;context8.shadowBlur = 2;context8.strokeStyle = "#444442";context8.strokeRect(15,15,133,56);
  • 35. CANVASfunction roundRect(x, y, w, h, radius){ var canvas = document.getElementById("canvas6"); var context = canvas.getContext("2d"); context.fillStyle = "#444442"; var r = x + w; var b = y + h; context.beginPath(); context.strokeStyle="#000"; context.lineWidth="3"; context.moveTo(x+radius, y); context.lineTo(r-radius, y); context.quadraticCurveTo(r, y, r, y+radius); context.lineTo(r, y+h-radius); context.quadraticCurveTo(r, b, r-radius, b); context.lineTo(x+radius, b); context.quadraticCurveTo(x, b, x, b-radius); context.lineTo(x, y+radius); context.quadraticCurveTo(x, y, x+radius, y); context.stroke(); context.fill(); context.fillStyle = "#ffffff"; context.font = "bold 20px Arial"; context.fillText("HOONS", 55, 40); context.fillStyle = "#ffffff"; context.font = "9px Arial"; context.fillText(".NET Community", 55, 55); var images = new Image(); images.onload = function(){ context.drawImage(images, 27,22); } images.src = "hoons.png";}roundRect(10, 10, 133, 56, 5);
  • 36. CANVAS• ExplorerCanvas• - http://code.google.com/p/explorercanvas/• IE6-8 Canvas JS• VML TAG
  • 37. CANVAS DEMO http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html http://www.effectgames.com/demos/canvascycle http://mrdoob.com/projects/chromeexperiments/ball_pool/ http://www.openrise.com/lab/FlowerPower/ FireFox4 Runfield : http://j.mp/gW6Pad A Look At HTML5 and its Canvas Tag : http://bit.ly/doTmeA : http://muqtuq.com/darkroom http://www.beautyoftheweb.com http://j.mp/gTiBBS html5demos.com http://dev.xguru.net/html5/#canvas-2d-example http://www.kesiev.com/akihabara/ http://mugtug.com/sketchpad/ http://muro.deviantart.com/ http://worldsbiggestpacman.com http://foursquareplayground.com
  • 38. WEBGL DEMO http://ro.me http://alteredqualia.com/canvasmol
  • 39. SVG(SCALABLE VECTOR GRAPHICS) 2 XML W3C . . Flash, SilverLight RIA .
  • 40. SVG(SCALABLE VECTOR GRAPHICS)
  • 41. SVG(SCALABLE VECTOR GRAPHICS) pixel vector
  • 42. SVG(SCALABLE VECTOR GRAPHICS) : http://caniuse.com/
  • 43. SVG • Raphael • - http://raphaeljs.com • IE6-8 SVG JS • VML TAG • Raphael : http://j.mp/gBqUvC // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10 var circle = paper.circle(50, 40, 10); // Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); // Sets the stroke attribute of the circle to white circle.attr("stroke", "#fff");
  • 44. DEMO http://svg-wow.org/ http://dev.xguru.net/html5/#svg-example-slide http://jsdo.it/event/svggirl
  • 45. VIDEO HTML5 VIDEO . (Flash Player), (SilverLight) Plug In . HTML5 Video Plug In .
  • 46. VIDEO Vimeo’s HTML5 beta: http://vimeo.com/blog:268 YouTube’s HTML5 beta: http://www.youtube.com/html5
  • 47. VIDEO
  • 48. VIDEO CODEC ISSUE• ? . .• WebM• MPEGLA WebM MPEG• .
  • 49. VIDEO TAG <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> . OR <object><embed></embed></object> </video> • source . • video .
  • 50. VIDEO JS function playBtn() { video.play(); } function pauseBtn() { video.pause(); } function stopBtn() { video.pause(); video.currentTime = 0; } function skipBackBtn() { video.currentTime -=2; }
  • 51. VIDEO audio muted , autoplay autoplay controls controls height pixels loop loop poster url url preload preload src url width pixels : www.w3schools.com
  • 52. VIDEO canPlayType // function supports_video() { return !!document.createElement("video").canPlayType; } //video/mp4 function supports_h264_baseline_video() { if(!supports_video()){ return false;} var v = document.createElement("video"); return v.canPlayType(video/mp4; codec="avc1.42EO1E, mp4a.40.2"); }
  • 53. VIDEO Modernizr - http://www.modernizr.com - HTML5Shiv CSS3 - Modernizr HTML5, CSS3 if(Modernizr.video) { if(Modernizr.video.ogg){ //ogg }else if(Modernizr.video.h264){ //h.264 } }
  • 54. VIDEO• 20 HTML5 Video Player - http://j.mp/dfxNMQ - Video.JS, JW Player, Mediaelement.JS, Projekktor... - Flash FallBack IE - VideoJS - http://videojs.com - Free & OpenSource, Skin, Full Screen
  • 55. VIDEO DEMO http://craftymind.com/factory/html5video/CanvasVideo.html http://www.html5video.org/demos
  • 56. AUDIO HTML5 Audio . (Flash Player), (SilverLight) Plug In . HTML5 Audio Plug In .
  • 57. AUDIO
  • 58. AUDIO CODEC ISSUE• VIDEO .• .
  • 59. AUDIO autoplay autoplay controls controls loop loop preload preload src url
  • 60. AUDIO TAG <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> . OR <object><embed></embed></object> </audio> • source . • audio .
  • 61. AUDIO• Audio.js - http://kolber.github.com/audiojs - OpenSource(MIT)
  • 62. AUDIO DEMO http://lab.simurai.com/ui/zen-player http://daftpunk.themaninblue.com
  • 63. CSS3• Cascading Style Sheet• ( )• W3C
  • 64. CSS3• CSS2.1 Recommendation• CSS3• CSS3• - http://www.w3.org/TR/css3-roadmap• - http://www.w3.org/style/css/current-work
  • 65. CSS3 .......
  • 66. CSS3 .......
  • 67. CSS3• Animation• CSS3• - CSS3.Font• - CSS3.Gradient• - CSS3.Border-Radius• Media Query Response Web UI
  • 68. CSS3• Selectivizr : http://selectivizr.com - IE6-8 CSS3Respond.js : http://github.com/scottjehl/Respond - CSS3 Media Query IE6-8 JS
  • 69. CSS3 DEMO http://mediaqueri.es/ http://webdesignledger.com/inspiration/30-creative-examples-of-responsive-web-design
  • 70. WEB STORAGE • • • (5mb) • • • Local Storage • Session Storage
  • 71. WEB STORAGE
  • 72. WEB STORAGE• SET localStorage.MyName = hoons; localStorage.setItem(Myname, hoons); localStorage[Myname] = hoons;• GET var name = localStorage.MyName; var name = localStorage.getItem(Myname); var name = localStorage[Myname];• DELETE delete localStorage.MyName; localStorage.removeItem(Myname);
  • 73. WEB STORAGE DEMO
  • 74. WEB SQL DATABASE• SQLLite DB• Insert, Update, Select, Delete, Transaction• HTML5• SQL•••
  • 75. WEB SQL DATABASE• SQL• SQLite• iOS Android http://dev.w3.org/html5/webdatabase/
  • 76. WEB SQL DATABASE
  • 77. WEB SQL DATABASEvar db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); db.transacton(function(tx){ tx.executeSql("Select * from Tables", [], successCallback, errorCallback); }); db.transacton(function(tx){ tx.executeSql("Update Tables set c1=? where c2=?;", ["a","b"],successCallback, errorCallback); });
  • 78. WEB SQL DATABASE DEMO
  • 79. INDEXED DB• Web SQL Database JS .• (Index)••
  • 80. INDEXED DBvar idbRequest = window.indexedDB.open(Database Name);idbRequest.onsuccess = function(event) {  var db = event.srcElement.result;  var transaction = db.transaction([], IDBTransaction.READ_ONLY);  var curRequest = transaction.objectStore(ObjectStoreName).openCursor();  curRequest.onsuccess = ...;};
  • 81. INDEXED DB
  • 82. APPLICATION CACHE•• Mime text/cache-manifest .• HTML, CSS, JAVASCRIPT, IMAGE URL .• XXX.manifest .
  • 83. APPLICATION CACHE
  • 84. APPLICATION CACHE CACHE MANIFEST # Version 1.0.0.0 CACHE: /favicon.ico <!DOCTYPE html> index.html <html manifest="cache.manifest"> stylesheet.css images/logo.png scripts/main.js
  • 85. APPLICATION CACHE• CACHE : .(DEFAULT)• FALLBACK : URL ,• NETWORK :• ... http://www.html5rocks.com/tutorials/appcache/beginner/
  • 86. APPLICATION CACHE
  • 87. APPLICATION CACHE DEMO
  • 88. WEB SOCKET•• Web Socket XHR 50 .• TCP HTML5 .• . - phpwebsocket, jWebSocket, node.js
  • 89. WEB SOCKET• : http://mobilepp.tistory.com/
  • 90. WEB SOCKET• Web Socket 80 PORT 1 Web Server Client Browser 3 Server WebSocket 2 Server WS PORT
  • 91. WEB SOCKET - WebSocket - ws, was var socket = new WebSocket(ws://html5rocks.websocket.org/echo); - socket.onopen = function(event) {}; - socket.close = function(event) {}; - socket.send(Hello, WebSocket); - socket.onmessage = function(event) {}
  • 92. WEB SOCKET• EasyWebSocket : http://EasyWebSocket.org - HTML5 WebSocket . .
  • 93. WEB SOCKET DEMO http://pusher.com/examples
  • 94. WEB WORKER• .• .• ( ) . Web Worker . - - - - -
  • 95. WEB WORKER
  • 96. WEB WORKER
  • 97. WEB WORKER postMessage(data) onmessage HTML5 Worker (worker.js) onmessage postMessage(data) • • window, document • javascript , • message, postMessage
  • 98. WEB WORKER HTML5 var myWorker = new Worker("myWorker.js"); myWorker.onmessage = function(event){ //Worker CallBack result = event.data; } myWorker.postMessage("call work"); //Worker myWorker.terminate(); Worker self.addEventListener("message", function(event) { self.postMessage(event.data); });
  • 99. WEB WORKER DEMO
  • 100. GEOLOCATION• .• .• window.navigator geolocation getCurrentPosition .
  • 101. GEOLOCATION• DEVICE GEOLOCATION .
  • 102. GEOLOCATION
  • 103. GEOLOCATION• getCurrentPosition (successCallback, . errorCallback, option) watchCurrentPosition (successCallback, . errorCallback, successCallback option) watchPosition() . clearWatch(watchID) watchCurrentPosition()
  • 104. GEOLOCATION• enableHightAccurary timeout maximumAge
  • 105. GEOLOCATION• position latitude longitude altitude coords accuracy , (m) altitudeAccuracy (m) heading speed timestamp
  • 106. GEOLOCATION if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(successCallback,errorCallback); } else { alert(" Geolocation "); } function successCallback(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; document.getElementById("msg").innerHTML = " " + lat + ", :"+lng } function errorCallback(error) { alert(error.message); }
  • 107. GEOLOCATION DEMO
  • 108. FILE API•• Drag & Drop API ActiveX .
  • 109. FILE API
  • 110. FILE API• File name type MIME urn size slice(start, length) BLOB
  • 111. FILE API• FileReader . error onload onprogress onerror readAsBinaryString(fileBlob) readAsText(fileBlob, encoding) readAsDataURL(file) DataURL
  • 112. FILE API <input type="file" id="files" accept="image/*" multiple> document.querySelector(#files).onchange = function(e) { var files = e.target.files; // FileList of File objects. for (var i = 0, f; f = files[i]; ++i) { console.log(f.name, f.type, f.size, f.lastModifiedDate.toLocaleDateString()); } };
  • 113. FILE API <input type="file" id="dir-select" webkitdirectory /> document.querySelector(#dir-select).onchange = function(e) { var out = []; for (var i = 0, f; f = e.target.files[i]; ++i) { out.push(f.webkitRelativePath); } document.querySelector(#output).value = out.join(/n); };
  • 114. FILE API DEMO
  • 115. DRAG & DROP API• Drag&Drop• File API ActiveX .
  • 116. DRAG & DROP API
  • 117. DRAG & DROP API• draggable true / false / auto / dropzone copy / move / link• ondrag script ondragend script ondragenter script ondragleave script ondragover script ondragstart script ondrop script
  • 118. DRAG & DROP API DEMO
  • 119. FORM• .• , .
  • 120. FORM• input type tel search url URL email datetime / date month week time datetime-local / number range color # FF8800 16
  • 121. FORM
  • 122. FORM • WebForms2 : http://code.google.com/p/webforms2/ - IE6-8 Form JS - How to Build Cross-Browser HTML5 Forms : http://net.tutsplus.com/tutorials/html-css-techniques/ how-to-build-cross-browser-html5-forms/
  • 123. FORM DEMO
  • 124. HTML5 HTML5 HTML5 - - PC 4G - - - - - - HTML5 - W3C -
  • 125. • http://www.htmlfivewow.com• http://www.html5rocks.com/en/• http://caniuse.com/• http://w3schools.com/html5/• http://html5demos.com/• http://www.clearboth.org/html5/spec.html• http://www.html5canvastutorials.com/• http://dev.xguru.net/html5• http://diveintohtml5.org• http://webdevmobile.com• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  • 126. Q&A

×