A Practical Guide to HTML5

2,333 views

Published on

"A Practical Guide to HTML5" was delivered by Mat Marquis (@wilto) of Marquis Design on May 11th, 2011 at Harvard University's Lamont Library Forum Room.

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

No Downloads
Views
Total views
2,333
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A Practical Guide to HTML5

  1. 1. WE’RE SPENDING AN HOUR ON EXISTENTIALISM. HOPE YOU BROUGHT A SNACK.
  2. 2. MAT “WILTO” MARQUIStwitter.com/ wiltogithub.com/ wiltodribbble.com/ wiltomat@matmarquis.com
  3. 3. IF ANYONE MENTIONS THE MARQUEE TAG THEY WILL BE ASKED TO LEAVE.
  4. 4. • New semantically-rich markup
  5. 5. • New semantically-rich markup• Changes to the markup you know and love
  6. 6. • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features
  7. 7. • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features• APIs for caching and storing items in the browser
  8. 8. • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features• APIs for caching and storing items in the browser• CSS3
  9. 9. • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features• APIs for caching and storing items in the browser• CSS3
  10. 10. “ HTML5 DOES NOT INCLUDE JAVASCRIPT APIS, CSS3, “AMPERSANDS, OR CAT PICTURES!
  11. 11. SHOULDN’T YOU BE MAKING WEBSITES RIGHT NOW?
  12. 12. REMEMBER “CAPTAIN PLANET?” LIKE THAT, BUT WITHOUT THE MULLET.
  13. 13. EVERYTHING MAKES SENSE NOW.
  14. 14. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>
  15. 15. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The header element represents a group of introductory or navigational aids.
  16. 16. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The nav element represents a section of a page that links to other pagesor to parts within the page: a section with navigation links.
  17. 17. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The article element represents a self-contained document, page,application, or widget which is fit for syndication.
  18. 18. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The section element represents a thematic grouping of content.
  19. 19. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The aside element represents content that is related to the surroundingdocument/article, but could be considered separate from that content.
  20. 20. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>The footer element typically contains information about its section,such as authors, links to related documents, copyright information, etc.
  21. 21. DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • untitled article • untitled section • untitled aside • untitled section • untitled aside • untitled footer
  22. 22. DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • untitled article • untitled section • untitled aside • untitled section • untitled aside • untitled footer
  23. 23. <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
  24. 24. <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
  25. 25. <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
  26. 26. <article> <h1> Lorem ipsum dolor </h1> <section> <h1> Chapter One </h1> <h2> In the Beginning </h2> <p> ... </p> <h2> Meanwhile, Back at the Ranch </h2> <p> ... </p> </section> <aside> <blockquote> <p> ... </p> </blockquote> </aside> <section> <h1> Chapter Two </h1> <p> ... </p> </section></article>
  27. 27. DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • Lorem Ipsum Dolor • Chapter One • In The Beginning • Meanwhile, Back at the Ranch • untitled aside • Chapter Two • untitled aside • untitled footer
  28. 28. DOCUMENT OUTLINE •untitled document • untitled header • untitled navHTML5 Outliner for Chrome • Lorem Ipsum DolorGenerates a navigable page outline with heading and sectioning elements. • Chapter One • In The Beginninghttp://wil.to/html5/2 Back at the Ranch • Meanwhile, • untitled aside • Chapter Two • untitled aside • untitled footer
  29. 29. MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.
  30. 30. MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.
  31. 31. MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.• time Represents dates and times in a machine-readable way. On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.
  32. 32. MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.• time Represents dates and times in a machine-readable way. On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.• output Represents the result of a calculation. <input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>
  33. 33. MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progress Represents the completion progress of a task within a known range. <progress max="100">80%</meter> complete.• time Represents dates and times in a machine-readable way. On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.• output Represents the result of a calculation. <input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>• blink Is gone, and if I ever catch you using it again so help me, guys.
  34. 34. MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.• progressThe HTML5 Spec progress of a task within a known range. Represents the completion for Web Developers <progress max="100">80%</meter> complete.Formatted for readability and quick access to information.• time Represents dates and times in a machine-readable way.http://developers.whatwg.org/ 2010, 2:55am EDT</time>. On <time datetime="2010-05-24T02:55:30-04:00">May 24th• output Represents the result of a calculation. <input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>• blink Is gone, and if I ever catch you using it again so help me, guys.
  35. 35. YOU KNEW IT WOULD COME UP EVENTUALLY
  36. 36. HTML5 Support in IE 6/7/8Remy Sharp’s HTML5-enabling script for Internet Explorer.http://wil.to/html5/3 YOU KNEW IT WOULD COME UP EVENTUALLY
  37. 37. REPURPOSED ELEMENTS<dl>, <dt>, and <dd>An association list consisting of zero or more key-value groups.<dl> <dt>Full Name:</dt> <dd>John Smith</dd> <dt>Occupation:</dt> <dd>Doctor</dd></dt>
  38. 38. REPURPOSED ELEMENTS<b>Text stylistically offset from the surrounding text without extra importance.<b class="drop-cap">S</b>herlock Holmes, who was usually late…
  39. 39. REPURPOSED ELEMENTS<small>“Small print,” as in disclaimers, caveats, legal restrictions, or copyrights.<small>Copyright Mat “Wilto” Marquis, 2010</small>
  40. 40. REPURPOSED ELEMENTS<cite>Represents the title of a work (a book, song, film, etc.)—but not aperson’s name.<p>I don’t quite agree with the <cite>HTML5 spec</cite> here.</p>
  41. 41. REPURPOSED ELEMENTS<address>Contact information for the current article or document—not a postaladdress.<address>Posted by: <a href="http://twitter.com/wilto">Mat</a></address>
  42. 42. STOP ME IF YOU’VE HEARD OF THIS ONE
  43. 43. BORDER-RADIUS
  44. 44. BOX-SHADOW
  45. 45. NOT PARTICULARLY EXCITING
  46. 46. VENDOR PREFIXES
  47. 47. VENDOR PREFIXES• -webkit-
  48. 48. VENDOR PREFIXES• -webkit-• -moz-
  49. 49. VENDOR PREFIXES• -webkit-• -moz-• -o-
  50. 50. VENDOR PREFIXES• -webkit-• -moz-• -o-• -ms-
  51. 51. TRANSITIONSa { color: #777; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear;}a:hover { color: #bada55;}
  52. 52. TRANSITIONSa { color: #777; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; Transition Demo .2s linear; -o-transition: color transition: color .2s linear;}a:hover { http://wil.to/html5/transitions color: #bada55;}
  53. 53. GRADIENTSbackground: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
  54. 54. GRADIENTSbackground: #1e5799 url(img/gradient.jpg);background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
  55. 55. GRADIENTSbackground: #1e5799 url(img/gradient.jpg);background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% CSS3 Gradient Generator );background: -webkit-gradient( A tool to generate the appropriate vendor-prefixed gradient syntax. linear, left top, http://wil.to/html5/6 left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
  56. 56. GRADIENTSbackground: #1e5799 url(img/gradient.jpg);background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% CSS3 Gradient Demo );background: -webkit-gradient( linear, left top, http://wil.to/html5/gradients/ left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );
  57. 57. FONT-FACE@font-face { font-family: AllerBold; src: url(aller_bd-webfont.eot); src: url(aller_bd-webfont.eot?#iefix) format(embedded-opentype), url(aller_bd-webfont.woff) format(woff), url(aller_bd-webfont.ttf) format(truetype), url(aller_bd-webfont.svg#AllerBold) format(svg);}
  58. 58. FONT-FACE@font-face { font-family: AllerBold; src: url(aller_bd-webfont.eot); src: url(aller_bd-webfont.eot?#iefix) format(embedded-opentype), Font Squirrel url(aller_bd-webfont.woff) format(woff), url(aller_bd-webfont.ttf) format(truetype), A repository of free and @font-face licensed fonts, as well as a tool url(aller_bd-webfont.svg#AllerBold) format(svg); to generate the appropriate @font-face syntax.}http://www.fontsquirrel.com/
  59. 59. FONT-FACE@font-face { font-family: AllerBold; src: url(aller_bd-webfont.eot); src: url(aller_bd-webfont.eot?#iefix) format(embedded-opentype), @font-face demo url(aller_bd-webfont.woff) format(woff), url(aller_bd-webfont.ttf) format(truetype), url(aller_bd-webfont.svg#AllerBold) format(svg);}http://wil.to/html5/font-face
  60. 60. GO-GO-GADGET: AWESOME.
  61. 61. GEOLOCATIONfunction geo( position ) { alert( Latitude: + position.coords.latitude ); alert( Longitude: + position.coords.longitude );}navigator.geolocation.getCurrentPosition( geo );
  62. 62. GEOLOCATIONfunction geo( position ) { alert( Latitude: + position.coords.latitude ); alert( Longitude: + position.coords.longitude );}navigator.geolocation.getCurrentPosition( geo );Geolocation DemoWaiting There Forever: My Bus Tracking App.http://wtfmbta.com/
  63. 63. DEVICE ORIENTATIONfunction orientation( event ) { var rotation = event.gamma * -.8, scale = ( event.beta / 180 ) * 2.25 + 1; alert( Rotation: + rotation + Scale: + scale );}window.addEventListener(deviceorientation, orientation );
  64. 64. DEVICE ORIENTATIONfunction orientation( event ) { var rotation = event.gamma * -.8, scale = ( event.beta / 180 ) * 2.25 + 1; alert( Rotation: + rotation + Scale: + scale );Device Orientation Demo}window.addEventListener(deviceorientation, orientation );http://wil.to/html5/device-orientation
  65. 65. HAVE YOU GUYS EVER BEEN “OFFLINE?” IT’S SCARY.
  66. 66. LOCAL STORAGElocalStorage.setItem(variableName, true)alert( localStorage.getItem(variableName) );// It’s that easy.
  67. 67. LOCAL STORAGElocalStorage.setItem(variableName, true)alert( localStorage.getItem(variableName) );// It’s that easy.Local Storage DemoA to-do list app using the localStorage API.http://wil.to/html5/local-storage
  68. 68. ModernizrA library of tests to check for CSS3 and HTML5 API support on the client side.http://www.modernizr.com/
  69. 69. Cross Browser PolyfillsBringing HTML5 APIs to browsers that dont natively support them.http://wil.to/html5/4
  70. 70. YOU MAY NOW ADD “HTML5 GURU” TO YOUR RESUME.
  71. 71. RESOURCESwil.to/html5http://developers.whatwg.orgpester me on the internet (@wilto)

×