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

  • 5,336 views
Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,336
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
122
Comments
0
Likes
7

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. WHAT’S NEW IN HTML5, CSS3 & JAVASCRIPT? James Pearce @jamespearceThursday, November 3, 11
  • 2. 2011 HAS BEEN AN EXCITING YEAR FOR HTML5Thursday, November 3, 11
  • 3. EVERYTHING EXCITING IN 2011 HAS BEEN CALLED HTML5Thursday, November 3, 11
  • 4. Thursday, November 3, 11
  • 5. CSS JSThursday, November 3, 11
  • 6. Where is all this good stuff coming from?Thursday, November 3, 11
  • 7. WHATWGThursday, November 3, 11
  • 8. Thursday, November 3, 11
  • 9. Thursday, November 3, 11
  • 10. Thursday, November 3, 11
  • 11. font-face accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradientThursday, November 3, 11
  • 12. Thursday, November 3, 11
  • 13. Thursday, November 3, 11
  • 14. Thursday, November 3, 11
  • 15. Thursday, November 3, 11
  • 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. State of the ArtThursday, November 3, 11
  • 18. Thursday, November 3, 11
  • 19. HTML5 SemanticsThursday, November 3, 11
  • 20. Document Structure <!DOCTYPE html> <html> <head> <script src="app.js"></script> <link rel="stylesheet" href="theme.css">Thursday, November 3, 11
  • 21. Document Structure <header> <section> <article> <nav> <aside> <article> <footer>Thursday, November 3, 11
  • 22. Thursday, November 3, 11
  • 23. Input Types <form> <input type=date /> <input type=time /> <input type=datetime /> </form>Thursday, November 3, 11
  • 24. Opera... <input type=datetime />Thursday, November 3, 11
  • 25. Input Types datetime number date range time color month search week tel datetime-local url emailThursday, November 3, 11
  • 26. iOS5 SupportThursday, November 3, 11
  • 27. Progress and meters <progress max="10"></progress> <progress max="10" value="6"></progress>Thursday, November 3, 11
  • 28. Progress and meters <meter max="10" value="7"></meter> <meter min="5" max="10" value="7"></meter>Thursday, November 3, 11
  • 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. 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. Data Attributes <script> el.dataset.generalAppearance = slimy; console.log(el.outerHTML); </script>Thursday, November 3, 11
  • 32. Contenteditable <div contenteditable=""></div>Thursday, November 3, 11
  • 33. Contenteditable <!doctype html> <html> <head> <style contenteditable=""> html {} head, style { display:block; font-size:2em; } </style> </head> </html> DemoThursday, November 3, 11
  • 34. MultimediaThursday, November 3, 11
  • 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. 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. ConnectivityThursday, November 3, 11
  • 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. 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. Performance & IntegrationThursday, November 3, 11
  • 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. Navigation Timing <script> function onLoad() { console.log( new Date().getTime() - performance.timing.navigationStart ); } </script> <body onload="onLoad()"> ...Thursday, November 3, 11
  • 43. Thursday, November 3, 11
  • 44. History API window.history.pushState( {key:"value"}, "Title", "/newpage.html" ); window.onpopstate = function(e) {     console.log(e.state); }; DemoThursday, November 3, 11
  • 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. 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. Offline & StorageThursday, November 3, 11
  • 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. Web SQLThursday, November 3, 11
  • 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. 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. 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. 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. 3D, Graphics, EffectsThursday, November 3, 11
  • 55. Web GL DemoThursday, November 3, 11
  • 56. CSS3 StylingThursday, November 3, 11
  • 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. 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. 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. window.matchMedia @media screen and (min-width: 400px) { * { font-family: sans-serif } } window.matchMedia( "screen and (min-width: 400px)" )Thursday, November 3, 11
  • 61. Transformations & Translations DemoThursday, November 3, 11
  • 62. CSS Shaders div.waving { filter: custom(url(wave.vs), 20 20, phase 0, amplitude 50 ); }Thursday, November 3, 11
  • 63. CSS Shaders div.waving { filter: grayscale(1.0) custom( url(book.vs) url(page.fs) ); } DemoThursday, November 3, 11
  • 64. Device AccessThursday, November 3, 11
  • 65. Geolocation & AccelerometerThursday, November 3, 11
  • 66. Compass window.ondeviceorientation = function(e) { console.log(e.webkitCompassHeading); }Thursday, November 3, 11
  • 67. Media Capture <input type="file" id="picker" accept="image/*" capture=camera > // camcorder // microphone // filesystemThursday, November 3, 11
  • 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. Everything Else :-(Thursday, November 3, 11
  • 70. ES 5Thursday, November 3, 11
  • 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. Array.prototype arr.indexOf arr.lastIndexOf arr.every arr.some arr.forEach arr.map arr.filter arr.reduceThursday, November 3, 11
  • 73. What’s coming down the track?Thursday, November 3, 11
  • 74. ES.6 ‘.next’ ‘Harmony’Thursday, November 3, 11
  • 75. Block Scope for (...) { let myvar=scoped; const myconst=42; function myfunc() { //... } } console.log(myvar); //RefErrorThursday, November 3, 11
  • 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. Default Arguments function myfunc(a=1, b=2) { console.log(a); console.log(b); } myfunc();Thursday, November 3, 11
  • 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. Spread function myfunc(a, b, c, d) { console.log(a); //... } var args = [2, 3, 4]; myfunc(1, ...args);Thursday, November 3, 11
  • 80. Modules module MyModule { export function a() {}; export function b() {}; } import MyModule.*; module Ext = require(http://../ext.js);Thursday, November 3, 11
  • 81. Classes class MyClass { constructor(a, b) { private a = a; //... } myMethod() { //... } }Thursday, November 3, 11
  • 82. Iterators Generators ComprehensionsThursday, November 3, 11
  • 83. Device AccessThursday, November 3, 11
  • 84. Camera Microphone Contacts Calendar Messaging Telephony NFC...Thursday, November 3, 11
  • 85. Funky StuffThursday, November 3, 11
  • 86. Web Components Shadow DOM Model Driven ViewsThursday, November 3, 11
  • 87. What does this mean for you?Thursday, November 3, 11
  • 88. Stay on top of change http://blogs.msdn.com/b/ie/ https://developer.mozilla.org http://chromestatus.comThursday, November 3, 11
  • 89. Stay on top of diversity CanIUse BrowserScope Modernizr DeviceAtlas HTML5 RocksThursday, November 3, 11
  • 90. Stay on top of change 100% Support Browsers Capabilities & specificationsThursday, November 3, 11
  • 91. Stay on top of change 100% Support Browsers Polyfills Frameworks Capabilities & specificationsThursday, November 3, 11
  • 92. Relish the opportunity... ...to do amazing things!Thursday, November 3, 11
  • 93. THANKS James Pearce @jamespearceThursday, November 3, 11