?               :
1                      ASP.NET               Blog   : http://using.tistory.com               Twiiter : @y2kpooh           ...
HTML5?     HTML5            HTML                                                                                .     2004...
HTML5 HISTORY          •          •    W3C HTML4.01 -> XHTML 1.0 -> XHTML 1.1          •    WHATWG Web Application 1.0	   ...
HTML5 HISTORY                      HTML
WHY HTML5?•        W3C•                       API•                   ,   X••
WHY HTML5?•                                   .•                   .
HTML5               -1          W3C HTML WG          iOS Flash  , HTML5                         HTML5 Demo&Guide          ...
HTML5            -2                         , HTML5                        W3C                   HTML5          “         ...
HTML5                    -3          IE9 HTML5          Mix11 HTML5                    IE10    1    HTML5          Windows...
HTML5   -4
HTML5   -5
HTML5   -6
HTML5                       http://gs.statcounter.com
HTML5                       http://gs.statcounter.com
HTML5                       http://gs.statcounter.com
HTML5               http://gs.statcounter.com
HTML5               http://gs.statcounter.com
HTML5
HTML5                            293                    12                                                   11           ...
- Section :          - Nav :          - article :   ,       ,          - aside :          - hgroup :          - header :  ...
HTML4                  HTML5               <div class=”header”>   <header></header>
DEMO               HTML4 -> HTML5 Live Coding               http://freehtml5templates.com                    http://initia...
CANVAS                    ,         ,   ,               2     3D                 API               openGL                 ...
CANVAS••        https://mozillademos.org/demos/runfield/demo.html•        http://worldsbiggestpacman.com/
CANVAS••        http://mugtug.com/sketchpad/•        http://muro.deviantart.com/
CANVAS•        SNS•        http://foursquareplayground.com/
CANVAS                        : http://caniuse.com/
CANVAS          • Line                           • Text          • Curves                         • Composites          • ...
CANVAS     var canvas2=document.getElementById("circle");     var context2=canvas2.getContext("2d");     context2.beginPat...
CANVAS     var canvas=document.getElementById("rectangle");     var context=canvas.getContext("2d");     context.beginPath...
CANVAS     var canvas3=document.getElementById("triangle");     var context3=canvas3.getContext("2d");     context3.beginP...
CANVASvar c_canvas4 = document.getElementById("mycanvas4");var context4 = c_canvas4.getContext("2d");var gradient = contex...
CANVASvar c_canvas7 = document.getElementById("mycanvas7");var context7 = c_canvas7.getContext("2d");context7.shadowColor ...
CANVASfunction roundRect(x, y, w, h, radius){  var canvas = document.getElementById("canvas6");  var context = canvas.getC...
CANVAS•    ExplorerCanvas•         - http://code.google.com/p/explorercanvas/•    IE6-8 Canvas                    JS•     ...
CANVAS                                          DEMO               http://www.html5rocks.com/en/tutorials/casestudies/20th...
WEBGL                  DEMO                          http://ro.me               http://alteredqualia.com/canvasmol	    	  ...
SVG(SCALABLE VECTOR GRAPHICS)     2     XML                        W3C       .                                      .     ...
SVG(SCALABLE VECTOR GRAPHICS)
SVG(SCALABLE VECTOR GRAPHICS)                   pixel          vector
SVG(SCALABLE VECTOR GRAPHICS)                                         : http://caniuse.com/
SVG     •        Raphael     •         - http://raphaeljs.com     •        IE6-8 SVG                        JS     •      ...
DEMO                              http://svg-wow.org/               http://dev.xguru.net/html5/#svg-example-slide         ...
VIDEO     HTML5                              VIDEO                .                                 (Flash Player),       ...
VIDEO               Vimeo’s HTML5 beta: http://vimeo.com/blog:268               YouTube’s HTML5 beta: http://www.youtube.c...
VIDEO
VIDEO CODEC ISSUE•                    ?                 .       .•                   WebM•        MPEGLA          WebM   M...
VIDEO TAG               <video width="320" height="240" controls="controls">               	 <source src="movie.ogg" type=...
VIDEO JS                          function playBtn() {                          	 video.play();                          }...
VIDEO                audio      muted     ,               autoplay   autoplay               controls   controls           ...
VIDEO     canPlayType              //     	        function supports_video()     	        {     	        	 return !!docume...
VIDEO     Modernizr          - http://www.modernizr.com          - HTML5Shiv                  CSS3          - Modernizr   ...
VIDEO•        20          HTML5 Video Player - http://j.mp/dfxNMQ         - Video.JS, JW Player, Mediaelement.JS, Projekkt...
VIDEO                             DEMO               http://craftymind.com/factory/html5video/CanvasVideo.html            ...
AUDIO     HTML5                              Audio                .                                 (Flash Player),       ...
AUDIO
AUDIO CODEC ISSUE•        VIDEO              .•                           .
AUDIO               autoplay   autoplay               controls   controls                loop       loop               pre...
AUDIO TAG               <audio controls="controls">                   	 <source src="song.ogg" type="audio/ogg" />        ...
AUDIO•        Audio.js         - http://kolber.github.com/audiojs - OpenSource(MIT)
AUDIO                 DEMO               http://lab.simurai.com/ui/zen-player               http://daftpunk.themaninblue.c...
CSS3•        Cascading Style Sheet•                                (   )•        W3C
CSS3•                       CSS2.1          Recommendation•    CSS3•    CSS3•         - http://www.w3.org/TR/css3-roadmap•...
CSS3                      .......
CSS3                      .......
CSS3•    Animation•    CSS3•         - CSS3.Font•         - CSS3.Gradient•         - CSS3.Border-Radius•    Media Query   ...
CSS3•        Selectivizr : http://selectivizr.com         - IE6-8       CSS3Respond.js : http://github.com/scottjehl/Respo...
CSS3                                      DEMO                                          http://mediaqueri.es/             ...
WEB STORAGE     •     •     •                              (5mb)     •     •     •        Local Storage     •        Sessi...
WEB STORAGE
WEB STORAGE•        SET          localStorage.MyName = hoons;          localStorage.setItem(Myname, hoons);          local...
WEB STORAGE                 DEMO
WEB SQL DATABASE•        SQLLite                                       DB•        Insert, Update, Select, Delete, Transact...
WEB SQL DATABASE•        SQL•        SQLite•                   iOS   Android                                    http://dev...
WEB SQL DATABASE
WEB SQL DATABASEvar db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024);	 db.transacton(function(tx){	 	...
WEB SQL DATABASE                   DEMO
INDEXED DB• Web              SQL Database    JS       .•                                 (Index)••
INDEXED DBvar idbRequest = window.indexedDB.open(Database Name);idbRequest.onsuccess = function(event) {  var db = event.s...
INDEXED DB
APPLICATION CACHE••                                  Mime       text/cache-manifest       .•        HTML, CSS, JAVASCRIPT,...
APPLICATION CACHE
APPLICATION CACHE	        CACHE MANIFEST	         # Version 1.0.0.0	        CACHE:	        /favicon.ico         	   <!DOCT...
APPLICATION CACHE•        CACHE :                       .(DEFAULT)•        FALLBACK :   URL                       ,•      ...
APPLICATION CACHE
APPLICATION CACHE                    DEMO
WEB SOCKET••        Web Socket                             XHR   50                                  .•                   ...
WEB SOCKET•                           : http://mobilepp.tistory.com/
WEB SOCKET•        Web Socket                                    80 PORT                                1                 ...
WEB SOCKET               - WebSocket                   -      ws,      was                   var socket = new WebSocket(ws...
WEB SOCKET•        EasyWebSocket : http://EasyWebSocket.org         -                                 HTML5 WebSocket     ...
WEB SOCKET                    DEMO               http://pusher.com/examples
WEB WORKER•                                              .•                                   .•                          ...
WEB WORKER
WEB WORKER
WEB WORKER                                          postMessage(data)                                                     ...
WEB WORKER                                           HTML5     var myWorker = new Worker("myWorker.js");     myWorker.onme...
WEB WORKER                DEMO
GEOLOCATION•                                                                .•                                            ...
GEOLOCATION•   DEVICE          GEOLOCATION          .
GEOLOCATION
GEOLOCATION•                    getCurrentPosition                     (successCallback,                        .         ...
GEOLOCATION•                   enableHightAccurary                        timeout                      maximumAge    	    ...
GEOLOCATION•        position                                    latitude                                   longitude      ...
GEOLOCATION          if (!!navigator.geolocation)            {              navigator.geolocation.getCurrentPosition(succe...
GEOLOCATION                 DEMO
FILE API••        Drag & Drop API   ActiveX                 .
FILE API
FILE API•        File                          name                           type            MIME                        ...
FILE API•    FileReader                                               .                           error                   ...
FILE API          <input type="file" id="files" accept="image/*" multiple>          document.querySelector(#files).onchange...
FILE API          <input type="file" id="dir-select" webkitdirectory />          document.querySelector(#dir-select).oncha...
FILE API               DEMO
DRAG & DROP API•                    Drag&Drop•        File API       ActiveX        .
DRAG & DROP API
DRAG & DROP API•                draggable     true / false / auto                                                    /    ...
DRAG & DROP API                  DEMO
FORM•                      .•                  ,              .
FORM•        input type                         tel                       search                         url             U...
FORM
FORM     •        WebForms2 : http://code.google.com/p/webforms2/              - IE6-8 Form               JS       - How t...
FORM               DEMO
HTML5     HTML5                 HTML5          -                -       PC   4G          -                -          -    ...
•        http://www.htmlfivewow.com•        http://www.html5rocks.com/en/•        http://caniuse.com/•        http://w3scho...
Q&A
Upcoming SlideShare
Loading in...5
×

HTML5 어디까지 왔나?

7,822

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,822
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
448
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

HTML5 어디까지 왔나?

  1. 1. ? :
  2. 2. 1 ASP.NET Blog : http://using.tistory.com Twiiter : @y2kpooh Email : y2kpooh@snaps.co.kr
  3. 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. 4. HTML5 HISTORY • • W3C HTML4.01 -> XHTML 1.0 -> XHTML 1.1 • WHATWG Web Application 1.0
  5. 5. HTML5 HISTORY HTML
  6. 6. WHY HTML5?• W3C• API• , X••
  7. 7. WHY HTML5?• .• .
  8. 8. HTML5 -1 W3C HTML WG iOS Flash , HTML5 HTML5 Demo&Guide “ .”
  9. 9. HTML5 -2 , HTML5 W3C HTML5 “ HTML5 .” “ .”
  10. 10. HTML5 -3 IE9 HTML5 Mix11 HTML5 IE10 1 HTML5 Windows SkyDrive Silverlight HTML5 Window8 HTML5
  11. 11. HTML5 -4
  12. 12. HTML5 -5
  13. 13. HTML5 -6
  14. 14. HTML5 http://gs.statcounter.com
  15. 15. HTML5 http://gs.statcounter.com
  16. 16. HTML5 http://gs.statcounter.com
  17. 17. HTML5 http://gs.statcounter.com
  18. 18. HTML5 http://gs.statcounter.com
  19. 19. HTML5
  20. 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. 21. - Section : - Nav : - article : , , - aside : - hgroup : - header : , - footer : - time :
  22. 22. HTML4 HTML5 <div class=”header”> <header></header>
  23. 23. DEMO HTML4 -> HTML5 Live Coding http://freehtml5templates.com http://initializr.com/
  24. 24. CANVAS , , , 2 3D API openGL WebGL .
  25. 25. CANVAS•• https://mozillademos.org/demos/runfield/demo.html• http://worldsbiggestpacman.com/
  26. 26. CANVAS•• http://mugtug.com/sketchpad/• http://muro.deviantart.com/
  27. 27. CANVAS• SNS• http://foursquareplayground.com/
  28. 28. CANVAS : http://caniuse.com/
  29. 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. 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. 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. 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. 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. 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. 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. 36. CANVAS• ExplorerCanvas• - http://code.google.com/p/explorercanvas/• IE6-8 Canvas JS• VML TAG
  37. 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. 38. WEBGL DEMO http://ro.me http://alteredqualia.com/canvasmol
  39. 39. SVG(SCALABLE VECTOR GRAPHICS) 2 XML W3C . . Flash, SilverLight RIA .
  40. 40. SVG(SCALABLE VECTOR GRAPHICS)
  41. 41. SVG(SCALABLE VECTOR GRAPHICS) pixel vector
  42. 42. SVG(SCALABLE VECTOR GRAPHICS) : http://caniuse.com/
  43. 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. 44. DEMO http://svg-wow.org/ http://dev.xguru.net/html5/#svg-example-slide http://jsdo.it/event/svggirl
  45. 45. VIDEO HTML5 VIDEO . (Flash Player), (SilverLight) Plug In . HTML5 Video Plug In .
  46. 46. VIDEO Vimeo’s HTML5 beta: http://vimeo.com/blog:268 YouTube’s HTML5 beta: http://www.youtube.com/html5
  47. 47. VIDEO
  48. 48. VIDEO CODEC ISSUE• ? . .• WebM• MPEGLA WebM MPEG• .
  49. 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. 50. VIDEO JS function playBtn() { video.play(); } function pauseBtn() { video.pause(); } function stopBtn() { video.pause(); video.currentTime = 0; } function skipBackBtn() { video.currentTime -=2; }
  51. 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. 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. 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. 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. 55. VIDEO DEMO http://craftymind.com/factory/html5video/CanvasVideo.html http://www.html5video.org/demos
  56. 56. AUDIO HTML5 Audio . (Flash Player), (SilverLight) Plug In . HTML5 Audio Plug In .
  57. 57. AUDIO
  58. 58. AUDIO CODEC ISSUE• VIDEO .• .
  59. 59. AUDIO autoplay autoplay controls controls loop loop preload preload src url
  60. 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. 61. AUDIO• Audio.js - http://kolber.github.com/audiojs - OpenSource(MIT)
  62. 62. AUDIO DEMO http://lab.simurai.com/ui/zen-player http://daftpunk.themaninblue.com
  63. 63. CSS3• Cascading Style Sheet• ( )• W3C
  64. 64. CSS3• CSS2.1 Recommendation• CSS3• CSS3• - http://www.w3.org/TR/css3-roadmap• - http://www.w3.org/style/css/current-work
  65. 65. CSS3 .......
  66. 66. CSS3 .......
  67. 67. CSS3• Animation• CSS3• - CSS3.Font• - CSS3.Gradient• - CSS3.Border-Radius• Media Query Response Web UI
  68. 68. CSS3• Selectivizr : http://selectivizr.com - IE6-8 CSS3Respond.js : http://github.com/scottjehl/Respond - CSS3 Media Query IE6-8 JS
  69. 69. CSS3 DEMO http://mediaqueri.es/ http://webdesignledger.com/inspiration/30-creative-examples-of-responsive-web-design
  70. 70. WEB STORAGE • • • (5mb) • • • Local Storage • Session Storage
  71. 71. WEB STORAGE
  72. 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. 73. WEB STORAGE DEMO
  74. 74. WEB SQL DATABASE• SQLLite DB• Insert, Update, Select, Delete, Transaction• HTML5• SQL•••
  75. 75. WEB SQL DATABASE• SQL• SQLite• iOS Android http://dev.w3.org/html5/webdatabase/
  76. 76. WEB SQL DATABASE
  77. 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. 78. WEB SQL DATABASE DEMO
  79. 79. INDEXED DB• Web SQL Database JS .• (Index)••
  80. 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. 81. INDEXED DB
  82. 82. APPLICATION CACHE•• Mime text/cache-manifest .• HTML, CSS, JAVASCRIPT, IMAGE URL .• XXX.manifest .
  83. 83. APPLICATION CACHE
  84. 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. 85. APPLICATION CACHE• CACHE : .(DEFAULT)• FALLBACK : URL ,• NETWORK :• ... http://www.html5rocks.com/tutorials/appcache/beginner/
  86. 86. APPLICATION CACHE
  87. 87. APPLICATION CACHE DEMO
  88. 88. WEB SOCKET•• Web Socket XHR 50 .• TCP HTML5 .• . - phpwebsocket, jWebSocket, node.js
  89. 89. WEB SOCKET• : http://mobilepp.tistory.com/
  90. 90. WEB SOCKET• Web Socket 80 PORT 1 Web Server Client Browser 3 Server WebSocket 2 Server WS PORT
  91. 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. 92. WEB SOCKET• EasyWebSocket : http://EasyWebSocket.org - HTML5 WebSocket . .
  93. 93. WEB SOCKET DEMO http://pusher.com/examples
  94. 94. WEB WORKER• .• .• ( ) . Web Worker . - - - - -
  95. 95. WEB WORKER
  96. 96. WEB WORKER
  97. 97. WEB WORKER postMessage(data) onmessage HTML5 Worker (worker.js) onmessage postMessage(data) • • window, document • javascript , • message, postMessage
  98. 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. 99. WEB WORKER DEMO
  100. 100. GEOLOCATION• .• .• window.navigator geolocation getCurrentPosition .
  101. 101. GEOLOCATION• DEVICE GEOLOCATION .
  102. 102. GEOLOCATION
  103. 103. GEOLOCATION• getCurrentPosition (successCallback, . errorCallback, option) watchCurrentPosition (successCallback, . errorCallback, successCallback option) watchPosition() . clearWatch(watchID) watchCurrentPosition()
  104. 104. GEOLOCATION• enableHightAccurary timeout maximumAge
  105. 105. GEOLOCATION• position latitude longitude altitude coords accuracy , (m) altitudeAccuracy (m) heading speed timestamp
  106. 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. 107. GEOLOCATION DEMO
  108. 108. FILE API•• Drag & Drop API ActiveX .
  109. 109. FILE API
  110. 110. FILE API• File name type MIME urn size slice(start, length) BLOB
  111. 111. FILE API• FileReader . error onload onprogress onerror readAsBinaryString(fileBlob) readAsText(fileBlob, encoding) readAsDataURL(file) DataURL
  112. 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. 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. 114. FILE API DEMO
  115. 115. DRAG & DROP API• Drag&Drop• File API ActiveX .
  116. 116. DRAG & DROP API
  117. 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. 118. DRAG & DROP API DEMO
  119. 119. FORM• .• , .
  120. 120. FORM• input type tel search url URL email datetime / date month week time datetime-local / number range color # FF8800 16
  121. 121. FORM
  122. 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. 123. FORM DEMO
  124. 124. HTML5 HTML5 HTML5 - - PC 4G - - - - - - HTML5 - W3C -
  125. 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. 126. Q&A
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×