Published on

Published in: Technology, Design
  • Be the first to comment

  • 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
  • WHATWG = Google, Apple, Mozilla, Opera (MS declined b/c lack of patent policy). Formed to move HTML forward while W3C was mired in XHTML hell until 2009
  • XHTML turned out to be a colossal waste of time, W3C finally abandoned in 2009WHATWG had been working on alternative that is now called HTML5 since 2004IE never recognized XHTML content type
  • * Large thanks to mobile (iphone) and chrome - implementations
  • Web spiders, robotsAccessibility (ARIA not mentioned much in this talk)AI – Siri exampleIf we’re going to make the web a platform for computers, need semantics
  • divitis had replaced tables of 1998Focus on replacing common patterns of divs with semantically meaningful tags
  • Also allows an aside and figcaption, for exampleRetains its document nature
  • Frames popular in enterprise software (PeopleSoft, Outlook Web Access) but caused many usability and accessiblity issued
  • Notice not xml conformant. It can be: autofocus=“true”Required and pattern didn’t work in my tests = test/index.html
  • Drag & drop with few enough characters I could fit it on a slide w/reasonable font sizeShows why it’s hard to separate HTML5 from the larger ecosystem (including JS)
  • Audio:MP3 = IE, Chrome, SafariWav = Firefox, Chrome, Safari, OperaOgg = Firefox, Chrome, Opera
  • TODO: What is controls?MP4 = IE, Chrome, SafariWebM = Firefox, Chrome, OperaOgg = Firefox, Chrome, Opera
  • Canvas – again hard to separate HTML elements from the JS ecosystem
  • Dev – create in text editor:* Can be created and edited with any text editorCan be searched, indexed, scripted, and compressedUser* Scalable and are zoomable (and the image can be zoomed without degradation)* can be printed with high quality at any resolution
  • Allows webappsUpdate comment to refresh cacheTied with local storage
  • Flip to boston globeAlso have orientation and color capabilities
  • Uses Upgrade header in HTTP
  • Simple api to get lat/long* On desktop, gives somewhat better resolution than picture indicates; can be quite accurate on a phone
  • Touch events added
  • HTML5

    1. 1. <!DOCTYPE html> Brandon
    2. 2. The HTML5 EcosystemHTML5 CSS3 new JavaScript APIs
    3. 3. HTML
    4. 4. Going Semantic
    5. 5. <nav> <ul> <li><a href=“/”>Home</a></li> <li><a href=“/about”>About Us</a></li> <li> <a href=“/faq”> Frequently Asked Questions </a> </li> </ul></nav>
    6. 6. <section id=“magazine”> <article> <header> <h1>Semantic Markup Rules!</h1> <p>An overview of new elements</p> </header> <p>Lorem ipsum dolor set amet…</p> <aside>For more details, see…</aside> </article></section>
    7. 7. <big> <table align=“left”<center> bgcolor=“#ff0”<font> border=“1px” cellpadding=“2px”<strike> cellspacing=“2px” /><u><tt><frame>
    8. 8. <input type="tel" />
    9. 9. <input type="url" />
    10. 10. <input type="email" />
    11. 11. <input type="number" />
    12. 12. <form action="/newAttributes"><input type=text autofocus /><input type=email placeholder="" /><input type=email required /><input type=text pattern="^[1-9]+[0-9]*$" /></form>
    13. 13. <img draggable="true" />function drag(ev) { ev.dataTransfer.setData ("Text",; }function allowDrop(ev) { ev.preventDefault(); }function drop(ev) { var data=ev.dataTransfer.getData("Text");; ev.preventDefault();}
    14. 14. MultimediaAudio Video Canvas SVG
    15. 15. <video width="320" height="240” controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" type="video/ogg" />Your browser does not support the video tag.</video>
    16. 16.
    17. 17.
    18. 18. SVG
    19. 19. <html manifest="demo.appcache"> CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: *
    20. 20. CSS
    21. 21. CSS3 Selectorsp:nth-of-type(2n+1) {color: red;}p:nth-child(2n+1) {color: red;}#content { column-count: 2; column-gap: 20px; column-rule: 1px solid #ddccb5;}span.weight:after { content: "lbs"; color: #bbb; }
    22. 22. <style media="only all and (max-width: 480)" />
    23. 23. CSS3 Transforms• Rotate• Scale• Skew• Matrix
    24. 24. @font-face { font-family: AwesomeFont; src: url(; font-weight: bold;}
    25. 25. JavaScript
    26. 26. localStorage.awesome = "true";alert(sessionStorage.coolness);
    27. 27. More JavaScript• Browser history• Web workers• File APIs• Cross document messaging• Touch events
    28. 28.
    29. 29.
    30. 30. Looking to the Future… HTML5 compatible phones to top 1 billion in 2013