Your SlideShare is downloading. ×
0

A first look at Html 5

3,328

Published on

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

Published in: Technology, Art & Photos
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,328
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
156
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Web is evolving
    Same fidelity als native apps, converge
  • Storage and speed => advantage
  • Users will using open source browsers
  • http://en.wikipedia.org/wiki/Outlook_Web_Access
  • Basic introduction demos
  • Basic introduction demos

    W3C
  • Class => css
  • Class => css
    Place in normal page
  • Class => css
    Place in normal page


    1.5KB for very advanced animations
  • GetContext(‘3D’) => not html5
  • Bespin: use case
  • 20% faster
    accessible: svg is more

    Supported on all modern browsers
  • Basic introduction demos
  • Header
    Nav
    Article
    Video
    Time
    Meter
    Dialog
    footer
  • Basics
  • Van waar komt het
  • Close safari…

    Offline Webapp
    User interface
    User data

    Browser cache, why not?
    Things could time out

    Appcache, simple file
  • Can be binairy data
  • Starting size 200KB here
    Transaction
    Web = unforgiving envirement


    Why using ?
    Injection attacks
    Convinience

    Security?
    No now insecuritys
  • Transcript of "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
    1. A particular slide catching your eye?

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

    ×