wild wild web. html5 era
DESCRIPTION
TRANSCRIPT
- 1. Wild Wild Web. HTML5 [email protected]@kichinskyhttp://html5insight.ru. {-} Microsoft
2. 1 . {-} 3. .. {-} 4. 1.1 . {-} 5. , .. {-} 6. . ... !. {-} 7. Internet Explorer ChromeSafariFirefox Opera100.00% Ch16 Fx8 Ch15 Fx7 Op11.xIE990.00% Ch14Sa5.180.00%IE870.00%60.00%50.00%Fx6 http://www.netmarketshare.com40.00%Fx530.00% Sa5Fx4Fx3.620.00%IE710.00%IE6Ch13 Op10.x Ch12 Sa4.1 Fx3.5 0.00% Fx3Op9.x Sa4 Jul%Feb%Mar%Apr%Oct%Aug%Sep%Jun%May% Ch5Fx2 8. , . 9. 4 IE 11 Chrome 8 Firefox 5 Safari http://www.netmarketshare.com 3 Opera.x 10. http://html5insight.ru 4 IE (6 9) 13 Chrome (4 17) 10 Firefox (3.0 10.0a) 5 Safari (3.1 5.1) 2 Webkit (533.17, 534.46) 1 15 Opera (9.64 12.00) 2 Opera Mini (6.1, 6.24) 1 Opera Mobile (9.80) 1 Gecko (1.9) 1 IE Mobile (9.0) 8 11. http://ie6countdown.com 12. () 13. .. {-} 14. . .. {-} 15. 1.2 . {-} 16. HTML5. {-} 17. 18. 19. Web Workers// UI Threadvar worker = new Worker(worker.js);worker.onmessage = function (event) { $(result).text = event.data;};// worker.jsvar n = getNextPrime();postMessage(n);Microsoft 20. Web Messagingvar channel = new MessageChannel();1 worker.postMessage({code:"port"}, [channel.port2]);3 channel.port1.onmessage = function (event) {alert("Message is: " + event.data);}// Worker Thread2 onmessage = function (event) {if (event.data.code == "port") {event.ports[0].postMessage("Portreceived.");}} Microsoft 21. HTML5. {-} 22. 23. 24. Web Storage I want insurance on this trip.// js-codeif (sessionStorage.insurance) { ... }Microsoft 25. HTML5. {-} 26. 27. 28. 29. File APIvar reader = new FileReader();// Read file into memory as UTF-16reader.readAsText(readFile, "UTF-16");// Handle progress, success, and errorsreader.onprogress = updateProgress;reader.onload = loaded;reader.onerror = errorHandler;//...var fileString = evt.target.result;Microsoft 30. Application Cache API("AppCache")CACHE MANIFESTCACHE:script/library.jscss/stylesheet.cssimages/figure1.pngFALLBACK:photos/ figure2.pngNETWORK:figure3.png=========Microsoft 31. 2 HTML5?. {-} 32. HTML5 vs. HTML5 HTML5 = - http://www.w3.org/TR/html5/ HTML5 = - 33. 2.1 . {-} 34. - 35. HTML5 XHTML 1.1CSS 2.1HTML 4.01- 36. HTML 2 HTML4 37. CSS 2.1 CSS3Modules 38. XML- 39. HTML5 40. 2.2 HTML5. {-} 41.
Microsoft 42. ... ............ Microsoft 43. . divheader divnav divsection divsection divfooter 44. 45. 2.3 / . {-} 46. ? 47. , 48. 49. HTML5. {-} 50. SkyDrive + HTML5 Video 51. OneNote Promo + HTML5Video 52. Bing + HTML5 Video 53. , . , . 54. ( HTML5) 55. - 56. 57. 2.4 -. {-} 58. . .. {-} 59. WebSQLDatabase 60. HTML5. {-} 61. Indexed DBvar oDB;var dbReq = window.msIndexedDB.open("EventsDB");dbReq.onsuccess = function( event ) {oDB = event.target.result;};...var events = [{ date: "281011", name: "Toster.Web" },{ date: "301111", name: "HTML5Camp" } ];var request = oDB.setVersion("1.0");request.onsuccess = function( event ) {var objectStore = oDB.createObjectStore("events",{ keyPath: "name" });objectStore.createIndex("date", "date", { unique: false });for (i in events) { objectStore.add(events[i]); }};Microsoft 62. 2.5 . {-} 63. , .. {-} 64. ECMAScript 5var numbers = [31, 33, 35, 37, 39, 41];var primes = numbers.filter(CheckPrimes);function CheckPrimes(value, index, ar) { ...} Microsoft 65. CSS3. {-} 66. CSS3 3D Transformsdiv{ -ms-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0,0.406737, 0, 0, 0, 0, 1); -ms-transform: translate3d(20px, -60px, 50px);} Microsoft 67. CSS3 Animationsdiv:active {-ms-animation-name: demo 5s ease 0s 2 normal;}@-ms-keyframes demo {from {-ms-animation-timing-function: ease;}50% {background-color: purple;-ms-animation-timing-function: ease-in;-ms-transform: translate(20px,30px);}to {background-color: blue;}}Microsoft 68. 2.6 . {-} 69. - , .. {-} 70. CSS3. {-} 71. CSS3 Grid#myGrid {display: -ms-grid;-ms-grid-columns: 100px 1fr 2fr;-ms-grid-rows: 50px 5em auto;}#item1 {-ms-grid-row: 1;-ms-grid-column: 1;}#item2 {-ms-grid-row: 2;-ms-grid-column: 2;} Microsoft 72. 3 HTML5 ..? .. {-} 73. HTML5 -.. {-} 74. , -.. {-} 75. 76. Internet Explorer 10 & HTML5 http://ietestdrive.com http://dev.windows.com http://buildwindows.com http://msdn.com/ie/ 77. Microsoft 160 15 msteched.ru 78. [email protected]@kichinskyhttp://html5insight.ru http://html5camp.ru