HTML5 (Mid-Technical)


Published on

This is an internal brown bag presentation given at ISITE Design (, where we discuss the topic of HTML5 with a broad internal audience.

Published in: Technology
  • dude... slideshare spam?
    Are you sure you want to  Yes  No
    Your message goes here
  • Generic message - PS : Congratulations for your work ! Thank you for sharing....For information, your presentation has been referenced in the following groups:
    'SOUND AND MUSIC,the best' :
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 (Mid-Technical)

  1. 1. HTML5 (Mid-Technical)<br />Presented by:<br />Christophe Saxe<br /><br />
  2. 2. HTML5 <br />What is it?<br />Why the new specification?<br />When can we start using it?<br />
  3. 3. History of HTML<br />Designed to share and markup scientific documents.<br />New uses were applied, and HTML evolved.<br />
  4. 4. Demands Changed<br />As the web matured, more sites became dynamic applications. Static sites have become less common.<br />
  5. 5. What's new?<br />HTML5 has been architected to fit the way the web is being used. Applications are the main focus.<br />
  6. 6. What’s new?<br />Tags<br />Video<br />Audio<br />Canvas<br />
  7. 7. Tags<br />Video Tag<br />Show Video on webpage without other application<br />Renders on an iPhone/ iPad <br />IE6-IE8 does not support the tag<br />
  8. 8. Tags<br />Audio Tag<br />Just like video, its an object on the page controlled with JavaScript.<br />
  9. 9. Tags<br />Canvas Tag<br />2D drawing and animations<br />Can draw on it using JavaScript<br />
  10. 10. Browsers<br />IE is 60% of all browsers<br />IE8 is 25% of all browsers (The single most used IE browser)<br />Adoption of new browser versions will improve.<br />
  11. 11. Other Tags<br />Header<br />Footer<br />Article<br />Section<br />Navigation<br />
  12. 12. Other Tags<br />Improve Indexing and Accessibility by improving semantics of page elements<br />
  13. 13. Tags<br />Form Tags<br />Email<br />Calendar<br />Phone Numbers<br />Many more<br />
  14. 14. Application Elements<br />Progress Bar<br />Editable Areas<br />
  15. 15. Application Awareness<br />New APIs<br />Storage<br />Offline applications<br />
  16. 16. DOM(Document Object Model)<br />Version of site that lives in CPU Memory, and determines page interaction.<br />
  17. 17. DOM<br />HTML 4 DOM was an add-on, HTML5 DOM is inherent in the script with outlined functionality<br />
  18. 18. Application Awareness<br />New APIs<br />Storage<br />Offline applications<br />
  19. 19. Storage<br />Save a file and database on users client. Enables offline applications w/out secondary technology<br />
  20. 20. Offline Applications<br />Think about email, calendars, or even lightweight games.<br />
  21. 21. Webkit<br />Layout engine for Safari and Chrome Browsers.<br />It is portable to many other computing platforms. <br />
  22. 22. Role of HTML5<br />Not a Flash Replacement<br />Not CSS3 <br />Not AJAX<br />
  23. 23. HTML5 Sites<br />Apple<br />Google<br />Newsweek<br />Have all changed DocType to HTML5<br />
  24. 24. HTML5 DocType<br />Will work in all browsers<br />
  25. 25. Mobile<br />Smartphone browsers (almost) across the board use WebKit, the most HTML5 ready browser at this time.<br />
  26. 26. Mobile<br />Ideal target for offline applications.<br />HTML5 enables one application to operate in the browser with saved state (offline).<br />
  27. 27. Mobile<br />Video tag supports the decision to use HTML5 for mobile sub-sites.<br />
  28. 28. Form Tag<br />New form tags allow you to serve the appropriate keypad based on form field. (phone format, .com for URL, etc.) <br />
  29. 29. Form Tag<br />Browsers are still catching up:<br />Firefox4 and IE9 should be supporting form tags.<br />
  30. 30. Landscape<br />Browsers will catch up, and start to unlock the opportunities provided by HTML5<br />
  31. 31. Frameworks<br />Frameworks and CMS are (mostly) not there to support the new tags, but developers are at work as we speak.<br />
  32. 32. Summary<br />For new web projects, you will be “future proofing” your website.<br />
  33. 33. Find Us:<br /><br /> @ISITE_Design<br />
  34. 34. Thank you<br />Thank you to the entire ISITE Design Front End Development team, specifically Christoph for putting this event together <br />
  35. 35. Questions<br />The next 12 min. will be dedicated to QA.<br />
  36. 36. Q/A Schedule<br />21:00 Preserved State: Native vs. web app. debate <br />23:50 Encoding types and Streaming Support <br />24:45 Audio/Video File Reference <br />
  37. 37. Find Us:<br /><br /> @ISITE_Design<br />
  38. 38. Q/A Schedule<br />21:00 Preserved State: Native vs. web app. debate <br />23:50 Encoding types and Streaming Support <br />24:45 Audio/Video File Reference <br />
  39. 39. Find Us:<br /><br /> @ISITE_Design<br />