Your SlideShare is downloading. ×
0
<!DOCTYPE html>     Brandon Byarsbbyars@thoughtworks.com
The HTML5 EcosystemHTML5        CSS3               new JavaScript APIs
HTML
Going Semantic
<nav>  <ul>    <li><a href=“/”>Home</a></li>    <li><a href=“/about”>About Us</a></li>    <li>       <a href=“/faq”>      ...
<section id=“magazine”> <article>   <header>      <h1>Semantic Markup Rules!</h1>      <p>An overview of new elements</p> ...
<big>      <table              align=“left”<center>              bgcolor=“#ff0”<font>        border=“1px”              cel...
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="number" />
<form action="/newAttributes"><input type=text autofocus /><input type=email placeholder="a@b.com" /><input type=email req...
<img draggable="true" />function drag(ev) { ev.dataTransfer.setData                      ("Text",ev.target.id); }function ...
MultimediaAudio                Video    Canvas                        SVG
<video width="320" height="240” controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" typ...
http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html
http://www.effectgames.com/demos/canvascycle/
SVG
<html manifest="demo.appcache">       CACHE MANIFEST       # 2012-02-21 v1.0.0       /theme.css       /logo.gif       /mai...
CSS
CSS3 Selectorsp:nth-of-type(2n+1) {color: red;}p:nth-child(2n+1) {color: red;}#content {    column-count: 2;    column-gap...
<style media="only all and (max-width: 480)" />
CSS3 Transforms• Rotate• Scale• Skew• Matrix
@font-face {    font-family: AwesomeFont;    src: url(http://example.com/awesomeco.ttf);    font-weight: bold;}
JavaScript
localStorage.awesome = "true";alert(sessionStorage.coolness);
More JavaScript• Browser history• Web workers• File APIs• Cross document messaging• Touch events
http://caniuse.com
http://html5readiness.com/
Looking to the Future…     HTML5 compatible       phones to top         1 billion            in           2013
HTML5
HTML5
HTML5
HTML5
HTML5
Upcoming SlideShare
Loading in...5
×

HTML5

200

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
200
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
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 &amp; 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
  • Transcript of "HTML5"

    1. 1. <!DOCTYPE html> Brandon Byarsbbyars@thoughtworks.com
    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="a@b.com" /><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",ev.target.id); }function allowDrop(ev) { ev.preventDefault(); }function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); 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. http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html
    17. 17. http://www.effectgames.com/demos/canvascycle/
    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(http://example.com/awesomeco.ttf); 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. http://caniuse.com
    29. 29. http://html5readiness.com/
    30. 30. Looking to the Future… HTML5 compatible phones to top 1 billion in 2013
    1. A particular slide catching your eye?

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

    ×