Your SlideShare is downloading. ×
What's new in HTML5, CSS3 and JavaScript, James Pearce
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

5,395
views

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 …

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

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,395
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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