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

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

on

  • 5,573 views

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.

Statistics

Views

Total Views
5,573
Views on SlideShare
4,365
Embed Views
1,208

Actions

Likes
7
Downloads
121
Comments
0

5 Embeds 1,208

http://www.sencha.com 1204
http://sencha.site 1
http://staging.sencha.com 1
https://www.sencha.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • WHAT’S NEW IN HTML5, CSS3 & JAVASCRIPT? James Pearce @jamespearceThursday, November 3, 11
  • 2011 HAS BEEN AN EXCITING YEAR FOR HTML5Thursday, November 3, 11
  • EVERYTHING EXCITING IN 2011 HAS BEEN CALLED HTML5Thursday, November 3, 11
  • 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 localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradientThursday, November 3, 11
  • 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 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
  • 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> <link rel="stylesheet" href="theme.css">Thursday, November 3, 11
  • Document Structure <header> <section> <article> <nav> <aside> <article> <footer>Thursday, November 3, 11
  • Thursday, November 3, 11
  • Input Types <form> <input type=date /> <input type=time /> <input type=datetime /> </form>Thursday, November 3, 11
  • Opera... <input type=datetime />Thursday, November 3, 11
  • Input Types datetime number date range time color month search week tel datetime-local url emailThursday, November 3, 11
  • iOS5 SupportThursday, November 3, 11
  • Progress and meters <progress max="10"></progress> <progress max="10" value="6"></progress>Thursday, November 3, 11
  • Progress and meters <meter max="10" value="7"></meter> <meter min="5" max="10" value="7"></meter>Thursday, November 3, 11
  • Progress and meters <meter max="10" high="8" value="1"></meter> <meter max="10" high="8" value="9"></meter>Thursday, November 3, 11
  • Data Attributes <div id=el data-smell=fish></div> <script> var el = document.getElementById(el); console.log(el.dataset); </script>Thursday, November 3, 11
  • Data Attributes <script> el.dataset.generalAppearance = slimy; console.log(el.outerHTML); </script>Thursday, November 3, 11
  • Contenteditable <div contenteditable=""></div>Thursday, November 3, 11
  • Contenteditable <!doctype html> <html> <head> <style contenteditable=""> html {} head, style { display:block; font-size:2em; } </style> </head> </html> DemoThursday, November 3, 11
  • MultimediaThursday, November 3, 11
  • 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
  • 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
  • ConnectivityThursday, November 3, 11
  • 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
  • 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
  • Performance & IntegrationThursday, November 3, 11
  • 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
  • Navigation Timing <script> function onLoad() { console.log( new Date().getTime() - performance.timing.navigationStart ); } </script> <body onload="onLoad()"> ...Thursday, November 3, 11
  • Thursday, November 3, 11
  • History API window.history.pushState( {key:"value"}, "Title", "/newpage.html" ); window.onpopstate = function(e) {     console.log(e.state); }; DemoThursday, November 3, 11
  • 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
  • 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
  • Offline & StorageThursday, November 3, 11
  • 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
  • Web SQLThursday, November 3, 11
  • 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
  • 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
  • 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
  • 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
  • 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, 1px 1px #333; box-shadow: 0 0 5px 5px #888; DemoThursday, November 3, 11
  • 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
  • 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
  • window.matchMedia @media screen and (min-width: 400px) { * { font-family: sans-serif } } window.matchMedia( "screen and (min-width: 400px)" )Thursday, November 3, 11
  • Transformations & Translations DemoThursday, November 3, 11
  • CSS Shaders div.waving { filter: custom(url(wave.vs), 20 20, phase 0, amplitude 50 ); }Thursday, November 3, 11
  • CSS Shaders div.waving { filter: grayscale(1.0) custom( url(book.vs) url(page.fs) ); } DemoThursday, November 3, 11
  • Device AccessThursday, November 3, 11
  • Geolocation & AccelerometerThursday, November 3, 11
  • Compass window.ondeviceorientation = function(e) { console.log(e.webkitCompassHeading); }Thursday, November 3, 11
  • Media Capture <input type="file" id="picker" accept="image/*" capture=camera > // camcorder // microphone // filesystemThursday, November 3, 11
  • 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
  • Everything Else :-(Thursday, November 3, 11
  • ES 5Thursday, November 3, 11
  • 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
  • Array.prototype arr.indexOf arr.lastIndexOf arr.every arr.some arr.forEach arr.map arr.filter arr.reduceThursday, November 3, 11
  • What’s coming down the track?Thursday, November 3, 11
  • ES.6 ‘.next’ ‘Harmony’Thursday, November 3, 11
  • Block Scope for (...) { let myvar=scoped; const myconst=42; function myfunc() { //... } } console.log(myvar); //RefErrorThursday, November 3, 11
  • 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
  • Default Arguments function myfunc(a=1, b=2) { console.log(a); console.log(b); } myfunc();Thursday, November 3, 11
  • Rest function myfunc(a, ...b) { console.log(a); b.forEach(function (i) { console.log(b); }); } myfunc(1, 2, 3, 4);Thursday, November 3, 11
  • Spread function myfunc(a, b, c, d) { console.log(a); //... } var args = [2, 3, 4]; myfunc(1, ...args);Thursday, November 3, 11
  • Modules module MyModule { export function a() {}; export function b() {}; } import MyModule.*; module Ext = require(http://../ext.js);Thursday, November 3, 11
  • Classes class MyClass { constructor(a, b) { private a = a; //... } myMethod() { //... } }Thursday, November 3, 11
  • Iterators Generators ComprehensionsThursday, November 3, 11
  • Device AccessThursday, November 3, 11
  • Camera Microphone Contacts Calendar Messaging Telephony NFC...Thursday, November 3, 11
  • 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://developer.mozilla.org http://chromestatus.comThursday, November 3, 11
  • Stay on top of diversity CanIUse BrowserScope Modernizr DeviceAtlas HTML5 RocksThursday, November 3, 11
  • Stay on top of change 100% Support Browsers Capabilities & specificationsThursday, November 3, 11
  • Stay on top of change 100% Support Browsers Polyfills Frameworks Capabilities & specificationsThursday, November 3, 11
  • Relish the opportunity... ...to do amazing things!Thursday, November 3, 11
  • THANKS James Pearce @jamespearceThursday, November 3, 11