HTML5 어디까지 왔나?
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 어디까지 왔나?

on

  • 7,247 views

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

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

Statistics

Views

Total Views
7,247
Views on SlideShare
4,817
Embed Views
2,430

Actions

Likes
4
Downloads
441
Comments
1

13 Embeds 2,430

http://using.tistory.com 1883
http://www.hoons.kr 368
http://hoons.kr 121
http://www.hoons.net 27
http://hoons.net 10
http://cafe.naver.com 7
http://www.sagomi.com 5
http://211.233.63.3 2
http://pmomale-ld1 2
http://www.slideshare.net 2
http://mail.naver.com 1
http://ucclight.hoons.kr 1
url_unknown 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 최고네요
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 어디까지 왔나? Presentation 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