Successfully reported this slideshow.

A first look at Html 5

3,613 views

Published on

Overview of HTML 5 features
Comparison of support by the different major browsers
Javascript enhancements

Published in: Technology, Art & Photos

A first look at Html 5

  1. 1. www.orbitone.com Raas van Gaverestraat 83 B-9000 GENT, BELGIUM E-mail info@orbitone.com Website www.orbitone.com Tel. +32 9 330 15 00 VAT BE 456.457.353 Bank 442-7059001-50 (KBC) Hans De Smedt 23 April, 2010 HTML5
  2. 2. Goodbye IE6 23 April, 2010 HTML5
  3. 3. A Browser Decomposed Display Tree “DOM” HTML Objects CSS Properties Script Edits Events Animates Animation Timer Layout Display Input streams HTML CSS Script XHTML Parsed 23 April, 2010 HTML5
  4. 4. 23 April, 2010 HTML5
  5. 5. 23 April, 2010 HTML5
  6. 6. 23 April, 2010 HTML5
  7. 7. 23 April, 2010 HTML5
  8. 8. 23 April, 2010 HTML5
  9. 9. GPU on Every Machine 23 April, 2010 HTML5
  10. 10. Flying Images
  11. 11. Flying Images – One Animation GPU IE8 IE9 IE 8 IE 9 23 April, 2010 HTML5
  12. 12. 23 April, 2010 HTML5
  13. 13. 23 April, 2010 HTML5
  14. 14. 23 April, 2010 HTML5 Coudn’t draw on the web easly Use Flash, Javascript, Silverlight Trapped in a box
  15. 15. 23 April, 2010 HTML5
  16. 16. 23 April, 2010 HTML5 Scalable Vector Graphics (SVG) <!DOCTYPE html> <html> <body> <svg width="200" height="200"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> </svg> </body> </html>
  17. 17. 23 April, 2010 HTML5 Scalable Vector Graphics (SVG) var rect = document.getElementById('myRect'); rect.style.fill = 'green'; rect.onclick = function() { alert('hello'); }
  18. 18. 23 April, 2010 HTML5 Scalable Vector Graphics (SVG)
  19. 19. 23 April, 2010 HTML5 Canvas API JavaScript API ("Scriptable Image Tag") <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);
  20. 20. 23 April, 2010 HTML5 Demos Mozilla Download Center (FF) First Person Gifter (FF) SVG WOW (FF) - SMILE Population Demo (FF) Bespin (Safari) German Election Atlas (Safari)
  21. 21. 23 April, 2010 HTML5 When Canvas or SVG?  SVG -> High level Import/Export Easy UIs Interactive Medium Animation Tree of objects  Canvas -> Low level No mouse interaction High Animation JS Centric More Bookkeeping Pixels Wednesday, October
  22. 22. 23 April, 2010 HTML5 http://www.youtube.com/watch?v=XCk22AaRxiE Google svg •Google docs Canvas •Performance graphics
  23. 23. 23 April, 2010 HTML5
  24. 24. 23 April, 2010 HTML5 Video is Complicated, and Outside Your Control HTML 5 makes n<video> as easy as <img> <video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video>
  25. 25. 23 April, 2010 HTML5 Video is Complicated, and Outside Your Control <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video> •Scripting var v = document.getElementsByTagName("video")[0]; v.play();
  26. 26. 23 April, 2010 HTML5 Demos Basic Player (FF 3.5) YouTube (Safari 4) - View Source
  27. 27. 23 April, 2010 HTML5
  28. 28. 23 April, 2010 HTML5
  29. 29. 23 April, 2010 HTML5 Life’s Better with Location For CRM Social Netork Ads Photos Games Places ...And Browsers Are Now Location-Enabled The geolocation api brings browserbased location to your apps
  30. 30. 23 April, 2010 HTML5 Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } );
  31. 31. 23 April, 2010 HTML5 Demo Google Maps (FF 3.5)
  32. 32. 23 April, 2010 HTML5
  33. 33. 23 April, 2010 HTML5 Web Apps Need to Work Everywhere database and app cache store user data and app resources locally Sticky Notes Demo (Safari 4)
  34. 34. 23 April, 2010 HTML5 App Cache •List resources that you want to take offline CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js <body manifest="./cache.manifest"> </body>
  35. 35. 23 April, 2010 HTML5 Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } ); }
  36. 36. 23 April, 2010 HTML5
  37. 37. 23 April, 2010 HTML5
  38. 38. 23 April, 2010 HTML5 Web workers web workers defines an API for running background scripts Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)
  39. 39. 23 April, 2010 HTML5 Web Worker <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script>
  40. 40. 23 April, 2010 HTML5 worker.js function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes();
  41. 41. 23 April, 2010 HTML5 HTML5 Support
  42. 42. CSS Infrastructure CSS3 Selectors Help you do more on your site with less script, simpler markup CSS3 Namespaces Style elements with namespaces in XHTML documents 23 April, 2010 HTML5
  43. 43. Graphically-rich Styling with CSS3 CSS3 Color Alpha color with rgba() and hsla() color functions Transparency control with the opacity property CSS3 Backgrounds and Borders Round corners with the border-radius property Multiple background images per element box-shadow property on block elements 23 April, 2010 HTML5
  44. 44. CSS 3
  45. 45. http://9elements.com/io/projects/html5/canvas/ http://onecm.com/projects/canopy/ http://ishtml5readyyet.com/ http://craftymind.com/factory/html5video/CanvasVideo.html More Demos 23 April, 2010 HTML5
  46. 46. www.orbitone.com HTML5 23 April, 2010

×