WHAT’S NEW IN      HTML5, CSS3 & JAVASCRIPT?                           James Pearce                           @jamespearce...
2011 HAS BEEN AN                   EXCITING YEAR FOR                         HTML5Thursday, November 3, 11
EVERYTHING                           EXCITING IN 2011                           HAS BEEN CALLED                           ...
Thursday, November 3, 11
CSS   JSThursday, November 3, 11
Where is all this good                        stuff coming from?Thursday, November 3, 11
WHATWGThursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
font-face                           accelerometer                                                       @page       localS...
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
WebFont        Video     Audio    Graphics        Device Access              Camera                 CSS Styling & Layout  ...
State of                           the ArtThursday, November 3, 11
Thursday, November 3, 11
HTML5 SemanticsThursday, November 3, 11
Document Structure      <!DOCTYPE html>      <html>         <head>             <script src="app.js"></script>             ...
Document Structure                                 <header>                                <section>                      ...
Thursday, November 3, 11
Input Types                           <form>                             <input type=date />                             <...
Opera...                           <input type=datetime />Thursday, November 3, 11
Input Types                           datetime         number                           date             range            ...
iOS5 SupportThursday, November 3, 11
Progress and meters           <progress max="10"></progress>           <progress max="10" value="6"></progress>Thursday, N...
Progress and meters       <meter max="10" value="7"></meter>       <meter min="5" max="10" value="7"></meter>Thursday, Nov...
Progress and meters    <meter max="10" high="8" value="1"></meter>    <meter max="10" high="8" value="9"></meter>Thursday,...
Data Attributes      <div id=el data-smell=fish></div>      <script>        var el = document.getElementById(el);        c...
Data Attributes      <script>        el.dataset.generalAppearance = slimy;        console.log(el.outerHTML);      </script...
Contenteditable                           <div contenteditable=""></div>Thursday, November 3, 11
Contenteditable                           <!doctype html>                           <html>                             <he...
MultimediaThursday, November 3, 11
Video             <video width="320" height="240" controls="">               <source src="movie.mp4" type="video/mp4" />  ...
Audio             <audio autoplay="" controls="">               <source src="horse.ogg" type="audio/ogg" />               ...
ConnectivityThursday, November 3, 11
Web Sockets                           var socket = new WebSocket(                              ws://echo.websocket.org    ...
Server-sent Events                var source = new EventSource(/status.php);                source.onmessage = function (e...
Performance &                            IntegrationThursday, November 3, 11
Web Workers                var worker = new Worker(task.js);                worker.onmessage = function(e) {              ...
Navigation Timing                <script>                  function onLoad() {                    console.log(            ...
Thursday, November 3, 11
History API                           window.history.pushState(                              {key:"value"},               ...
Drag and Drop                    <div draggable="true">Apple</div>                    <div draggable="true">Orange</div>  ...
Drag and Drop           window.ondragstart = function (e) {              e.dataTransfer.setData(                 text/plai...
Offline & StorageThursday, November 3, 11
Web Storage           sessionStorage.setItem("user", "John");           console.log(sessionStorage.getItem("user"));      ...
Web SQLThursday, November 3, 11
Indexed DB                           indexedDB.open(my_database)                           db.createObjectStore(my_store, ...
Indexed DB                store.openCursor().onsuccess = function(e) {                    var cursor = e.target.result;   ...
File API         <input type="file" id="picker">         <script>           var picker = document.getElementById(picker); ...
App cache                           CACHE MANIFEST                           # v556                           CACHE:      ...
3D, Graphics, EffectsThursday, November 3, 11
Web GL                                    DemoThursday, November 3, 11
CSS3 StylingThursday, November 3, 11
The clichés                              border-radius: 5px 10px;                              text-shadow: -1px -1px #fff...
Element.classList            <div id=el class=extjs></div>            var el = document.getElementById(el);            el....
Element.matchesSelector            <div id=el class=sencha></div>            <script>              var el = document.getEl...
window.matchMedia                           @media screen and (min-width: 400px) {                             * { font-fa...
Transformations                            & Translations                                             DemoThursday, Novemb...
CSS Shaders                           div.waving {                               filter: custom(url(wave.vs),             ...
CSS Shaders                           div.waving {                               filter: grayscale(1.0)                   ...
Device AccessThursday, November 3, 11
Geolocation                                 &                           AccelerometerThursday, November 3, 11
Compass                window.ondeviceorientation = function(e) {                   console.log(e.webkitCompassHeading);  ...
Media Capture                           <input type="file" id="picker"                               accept="image/*"     ...
Media Capture         <input type="file" id="picker" accept="image/*" />         <script>           var picker = document....
Everything Else                                 :-(Thursday, November 3, 11
ES 5Thursday, November 3, 11
Object                           Object.create                           Object.defineProperty                           O...
Array.prototype                             arr.indexOf                             arr.lastIndexOf                       ...
What’s coming down                               the track?Thursday, November 3, 11
ES.6                             ‘.next’                           ‘Harmony’Thursday, November 3, 11
Block Scope                           for (...) {                             let myvar=scoped;                           ...
Destructuring                    var [x, y] = [1, 2];                    var {a:x, b:y} = {a:1, b:2};                    f...
Default Arguments                           function myfunc(a=1, b=2) {                             console.log(a);       ...
Rest                           function myfunc(a, ...b) {                             console.log(a);                     ...
Spread                           function myfunc(a, b, c, d) {                             console.log(a);                ...
Modules          module MyModule {            export function a() {};            export function b() {};          }       ...
Classes                           class MyClass {                             constructor(a, b) {                         ...
Iterators                             Generators                           ComprehensionsThursday, November 3, 11
Device AccessThursday, November 3, 11
Camera                           Microphone                            Contacts                            Calendar       ...
Funky StuffThursday, November 3, 11
Web Components                             Shadow DOM                           Model Driven ViewsThursday, November 3, 11
What does this                           mean for you?Thursday, November 3, 11
Stay on top of change                              http://blogs.msdn.com/b/ie/                              https://develo...
Stay on top of diversity                              CanIUse                           BrowserScope                      ...
Stay on top of change                                                  100%              Support                          ...
Stay on top of change                                                  100%              Support                          ...
Relish the opportunity...                           ...to do amazing things!Thursday, November 3, 11
THANKS                             James Pearce                             @jamespearceThursday, November 3, 11
Upcoming SlideShare
Loading in...5
×

What's new in HTML5, CSS3 and JavaScript, James Pearce

5,615

Published on

A review of the state of the fast-moving HTML5, CSS3, and JavaScript landscape, how these exciting new technologies are being implemented in browsers today, and a glimpse of some of the things we can look forward to in coming years.

James Pearce heads developer relations at Sencha. He is a technologist, writer, developer and practitioner, who has been working with the mobile web for over a decade. Previously he was the CTO at dotMobi and has a background in mobile startups, telecoms infrastructure and management consultancy. James is the creator of tinySrc, the WordPress Mobile Pack, WhitherApps, modernizr-server and confess.js, and has written books on mobile web development for both Wiley and Wrox.

Published in: Technology, Design

What's new in HTML5, CSS3 and JavaScript, James Pearce

  1. 1. WHAT’S NEW IN HTML5, CSS3 & JAVASCRIPT? James Pearce @jamespearceThursday, November 3, 11
  2. 2. 2011 HAS BEEN AN EXCITING YEAR FOR HTML5Thursday, November 3, 11
  3. 3. EVERYTHING EXCITING IN 2011 HAS BEEN CALLED HTML5Thursday, November 3, 11
  4. 4. Thursday, November 3, 11
  5. 5. CSS JSThursday, November 3, 11
  6. 6. Where is all this good stuff coming from?Thursday, November 3, 11
  7. 7. WHATWGThursday, November 3, 11
  8. 8. Thursday, November 3, 11
  9. 9. Thursday, November 3, 11
  10. 10. Thursday, November 3, 11
  11. 11. font-face accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradientThursday, November 3, 11
  12. 12. Thursday, November 3, 11
  13. 13. Thursday, November 3, 11
  14. 14. Thursday, November 3, 11
  15. 15. Thursday, November 3, 11
  16. 16. WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches ProcessingThursday, November 3, 11
  17. 17. State of the ArtThursday, November 3, 11
  18. 18. Thursday, November 3, 11
  19. 19. HTML5 SemanticsThursday, November 3, 11
  20. 20. Document Structure <!DOCTYPE html> <html> <head> <script src="app.js"></script> <link rel="stylesheet" href="theme.css">Thursday, November 3, 11
  21. 21. Document Structure <header> <section> <article> <nav> <aside> <article> <footer>Thursday, November 3, 11
  22. 22. Thursday, November 3, 11
  23. 23. Input Types <form> <input type=date /> <input type=time /> <input type=datetime /> </form>Thursday, November 3, 11
  24. 24. Opera... <input type=datetime />Thursday, November 3, 11
  25. 25. Input Types datetime number date range time color month search week tel datetime-local url emailThursday, November 3, 11
  26. 26. iOS5 SupportThursday, November 3, 11
  27. 27. Progress and meters <progress max="10"></progress> <progress max="10" value="6"></progress>Thursday, November 3, 11
  28. 28. Progress and meters <meter max="10" value="7"></meter> <meter min="5" max="10" value="7"></meter>Thursday, November 3, 11
  29. 29. Progress and meters <meter max="10" high="8" value="1"></meter> <meter max="10" high="8" value="9"></meter>Thursday, November 3, 11
  30. 30. Data Attributes <div id=el data-smell=fish></div> <script> var el = document.getElementById(el); console.log(el.dataset); </script>Thursday, November 3, 11
  31. 31. Data Attributes <script> el.dataset.generalAppearance = slimy; console.log(el.outerHTML); </script>Thursday, November 3, 11
  32. 32. Contenteditable <div contenteditable=""></div>Thursday, November 3, 11
  33. 33. Contenteditable <!doctype html> <html> <head> <style contenteditable=""> html {} head, style { display:block; font-size:2em; } </style> </head> </html> DemoThursday, November 3, 11
  34. 34. MultimediaThursday, November 3, 11
  35. 35. Video <video width="320" height="240" controls=""> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>Thursday, November 3, 11
  36. 36. Audio <audio autoplay="" controls=""> <source src="horse.ogg" type="audio/ogg" /> <source src="horse.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio>Thursday, November 3, 11
  37. 37. ConnectivityThursday, November 3, 11
  38. 38. Web Sockets var socket = new WebSocket( ws://echo.websocket.org ); socket.onopen = function(e) { socket.send(Echo... echo...); }; socket.onmessage = function(e) { console.log(e.data); };Thursday, November 3, 11
  39. 39. Server-sent Events var source = new EventSource(/status.php); source.onmessage = function (e) { console.log(e.data); }; data: My messagenn data: Line 1n data: Line 2nnThursday, November 3, 11
  40. 40. Performance & IntegrationThursday, November 3, 11
  41. 41. Web Workers var worker = new Worker(task.js); worker.onmessage = function(e) { alert(Worker says + e.data); }; worker.postMessage(); // task.js: self.onmessage = function(e) { // calculate Fibonacci series or something   self.postMessage("Answer is..."); };Thursday, November 3, 11
  42. 42. Navigation Timing <script> function onLoad() { console.log( new Date().getTime() - performance.timing.navigationStart ); } </script> <body onload="onLoad()"> ...Thursday, November 3, 11
  43. 43. Thursday, November 3, 11
  44. 44. History API window.history.pushState( {key:"value"}, "Title", "/newpage.html" ); window.onpopstate = function(e) {     console.log(e.state); }; DemoThursday, November 3, 11
  45. 45. Drag and Drop <div draggable="true">Apple</div> <div draggable="true">Orange</div> <div draggable="true">Pear</div> <div id=basket>Basket: </div>Thursday, November 3, 11
  46. 46. Drag and Drop window.ondragstart = function (e) { e.dataTransfer.setData( text/plain, e.target.innerHTML ); }; var basket = document.getElementById(basket); basket.ondragover = function (e) { e.preventDefault(); }; basket.ondrop = function (e) { e.target.innerHTML += e.dataTransfer.getData(text/plain) + ; }; DemoThursday, November 3, 11
  47. 47. Offline & StorageThursday, November 3, 11
  48. 48. Web Storage sessionStorage.setItem("user", "John"); console.log(sessionStorage.getItem("user")); localStorage.setItem("prefs", {a:b}); console.log(localStorage.getItem("prefs")); localStorage.removeItem("prefs"); localStorage.clear();Thursday, November 3, 11
  49. 49. Web SQLThursday, November 3, 11
  50. 50. Indexed DB indexedDB.open(my_database) db.createObjectStore(my_store, { keyPath: record_id }); store.put({ record_id: 123, name: My record }); store.get(123);Thursday, November 3, 11
  51. 51. Indexed DB store.openCursor().onsuccess = function(e) {     var cursor = e.target.result;   if (cursor) {       console.log(cursor.value);       cursor.continue();     } else {     console.log(Got them all);     }   };Thursday, November 3, 11
  52. 52. File API <input type="file" id="picker"> <script> var picker = document.getElementById(picker); picker.onchange = function (e) { console.log(picker.files[0]); }; </script>Thursday, November 3, 11
  53. 53. App cache CACHE MANIFEST # v556 CACHE: theme.css app/app.js NETWORK: login.php http://api.twitter.com FALLBACK: /login.php /static.htmlThursday, November 3, 11
  54. 54. 3D, Graphics, EffectsThursday, November 3, 11
  55. 55. Web GL DemoThursday, November 3, 11
  56. 56. CSS3 StylingThursday, November 3, 11
  57. 57. The clichés border-radius: 5px 10px; text-shadow: -1px -1px #fff, 1px 1px #333; box-shadow: 0 0 5px 5px #888; DemoThursday, November 3, 11
  58. 58. Element.classList <div id=el class=extjs></div> var el = document.getElementById(el); el.classList.remove(extjs);   el.classList.add(sencha);      el.classList.toggle(rocks); el.classList.contains(rockstars); console.log(el.classList);Thursday, November 3, 11
  59. 59. Element.matchesSelector <div id=el class=sencha></div> <script> var el = document.getElementById(el); console.log(el.matchesSelector(.sencha)); console.log(el.matchesSelector(#extjs)); </script>Thursday, November 3, 11
  60. 60. window.matchMedia @media screen and (min-width: 400px) { * { font-family: sans-serif } } window.matchMedia( "screen and (min-width: 400px)" )Thursday, November 3, 11
  61. 61. Transformations & Translations DemoThursday, November 3, 11
  62. 62. CSS Shaders div.waving { filter: custom(url(wave.vs), 20 20, phase 0, amplitude 50 ); }Thursday, November 3, 11
  63. 63. CSS Shaders div.waving { filter: grayscale(1.0) custom( url(book.vs) url(page.fs) ); } DemoThursday, November 3, 11
  64. 64. Device AccessThursday, November 3, 11
  65. 65. Geolocation & AccelerometerThursday, November 3, 11
  66. 66. Compass window.ondeviceorientation = function(e) { console.log(e.webkitCompassHeading); }Thursday, November 3, 11
  67. 67. Media Capture <input type="file" id="picker" accept="image/*" capture=camera > // camcorder // microphone // filesystemThursday, November 3, 11
  68. 68. Media Capture <input type="file" id="picker" accept="image/*" /> <script> var picker = document.getElementById(picker); picker.onchange = function (e) { var image = picker.files[0]; image.getFormatData( function (data) { console.write(data); } ); }; </script>Thursday, November 3, 11
  69. 69. Everything Else :-(Thursday, November 3, 11
  70. 70. ES 5Thursday, November 3, 11
  71. 71. Object Object.create Object.defineProperty Object.defineProperties Object.getPrototypeOf Object.keys Object.seal Object.freeze Object.preventExtensions Object.isSealed Object.isFrozen Object.isExtensibleThursday, November 3, 11
  72. 72. Array.prototype arr.indexOf arr.lastIndexOf arr.every arr.some arr.forEach arr.map arr.filter arr.reduceThursday, November 3, 11
  73. 73. What’s coming down the track?Thursday, November 3, 11
  74. 74. ES.6 ‘.next’ ‘Harmony’Thursday, November 3, 11
  75. 75. Block Scope for (...) { let myvar=scoped; const myconst=42; function myfunc() { //... } } console.log(myvar); //RefErrorThursday, November 3, 11
  76. 76. Destructuring var [x, y] = [1, 2]; var {a:x, b:y} = {a:1, b:2}; function myfunc( {a:x, b:y} ) {...} myfunc({a:1, a:2});Thursday, November 3, 11
  77. 77. Default Arguments function myfunc(a=1, b=2) { console.log(a); console.log(b); } myfunc();Thursday, November 3, 11
  78. 78. Rest function myfunc(a, ...b) { console.log(a); b.forEach(function (i) { console.log(b); }); } myfunc(1, 2, 3, 4);Thursday, November 3, 11
  79. 79. Spread function myfunc(a, b, c, d) { console.log(a); //... } var args = [2, 3, 4]; myfunc(1, ...args);Thursday, November 3, 11
  80. 80. Modules module MyModule { export function a() {}; export function b() {}; } import MyModule.*; module Ext = require(http://../ext.js);Thursday, November 3, 11
  81. 81. Classes class MyClass { constructor(a, b) { private a = a; //... } myMethod() { //... } }Thursday, November 3, 11
  82. 82. Iterators Generators ComprehensionsThursday, November 3, 11
  83. 83. Device AccessThursday, November 3, 11
  84. 84. Camera Microphone Contacts Calendar Messaging Telephony NFC...Thursday, November 3, 11
  85. 85. Funky StuffThursday, November 3, 11
  86. 86. Web Components Shadow DOM Model Driven ViewsThursday, November 3, 11
  87. 87. What does this mean for you?Thursday, November 3, 11
  88. 88. Stay on top of change http://blogs.msdn.com/b/ie/ https://developer.mozilla.org http://chromestatus.comThursday, November 3, 11
  89. 89. Stay on top of diversity CanIUse BrowserScope Modernizr DeviceAtlas HTML5 RocksThursday, November 3, 11
  90. 90. Stay on top of change 100% Support Browsers Capabilities & specificationsThursday, November 3, 11
  91. 91. Stay on top of change 100% Support Browsers Polyfills Frameworks Capabilities & specificationsThursday, November 3, 11
  92. 92. Relish the opportunity... ...to do amazing things!Thursday, November 3, 11
  93. 93. THANKS James Pearce @jamespearceThursday, November 3, 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×