A Practical Guide to HTML5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

A Practical Guide to HTML5

on

  • 1,520 views

 

Statistics

Views

Total Views
1,520
Views on SlideShare
1,516
Embed Views
4

Actions

Likes
2
Downloads
14
Comments
1

1 Embed 4

http://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Can’t see the slideshow above, as it is—ironically—Flash-only?

    http://wil.to/html5/slides.pdf
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

A Practical Guide to HTML5 Presentation Transcript

  • 1. WE’RE SPENDING AN HOUR ON EXISTENTIALISM. HOPE YOU BROUGHT A SNACK.
  • 2. MAT “WILTO” MARQUIStwitter.com/ wiltogithub.com/ wiltodribbble.com/ wiltomat@matmarquis.com
  • 3. IF ANYONE MENTIONS THE MARQUEE TAG THEY WILL BE ASKED TO LEAVE.
  • 4. • New semantically-rich markup
  • 5. • New semantically-rich markup• Changes to the markup you know and love
  • 6. • New semantically-rich markup• Changes to the markup you know and love• APIs that can access device-specific features
  • 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. • 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. • 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. “ HTML5 DOES NOT INCLUDE JAVASCRIPT APIS, CSS3, “AMPERSANDS, OR CAT PICTURES!
  • 11. SHOULDN’T YOU BE MAKING WEBSITES RIGHT NOW?
  • 12. REMEMBER “CAPTAIN PLANET?” LIKE THAT, BUT WITHOUT THE MULLET.
  • 13. EVERYTHING MAKES SENSE NOW.
  • 14. SECTIONING ELEMENTS• header <header>• nav <nav>• article <article>• section• aside <section> <aside>• footer <aside> <section> <footer>
  • 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. 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. 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. 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. 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. 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. DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • untitled article • untitled section • untitled aside • untitled section • untitled aside • untitled footer
  • 22. DOCUMENT OUTLINE•untitled document • untitled header • untitled nav • untitled article • untitled section • untitled aside • untitled section • untitled aside • untitled footer
  • 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. <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. <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. <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. 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. 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. MORE NEW HOTNESS• meter Represents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.
  • 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. 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. 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. 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. 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. YOU KNEW IT WOULD COME UP EVENTUALLY
  • 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. 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. 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. REPURPOSED ELEMENTS<small>“Small print,” as in disclaimers, caveats, legal restrictions, or copyrights.<small>Copyright Mat “Wilto” Marquis, 2010</small>
  • 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. 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. STOP ME IF YOU’VE HEARD OF THIS ONE
  • 43. BORDER-RADIUS
  • 44. BOX-SHADOW
  • 45. NOT PARTICULARLY EXCITING
  • 46. VENDOR PREFIXES
  • 47. VENDOR PREFIXES• -webkit-
  • 48. VENDOR PREFIXES• -webkit-• -moz-
  • 49. VENDOR PREFIXES• -webkit-• -moz-• -o-
  • 50. VENDOR PREFIXES• -webkit-• -moz-• -o-• -ms-
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. GO-GO-GADGET: AWESOME.
  • 61. GEOLOCATIONfunction geo( position ) { alert( Latitude: + position.coords.latitude ); alert( Longitude: + position.coords.longitude );}navigator.geolocation.getCurrentPosition( geo );
  • 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. 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. 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. HAVE YOU GUYS EVER BEEN “OFFLINE?” IT’S SCARY.
  • 66. LOCAL STORAGElocalStorage.setItem(variableName, true)alert( localStorage.getItem(variableName) );// It’s that easy.
  • 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/transitions
  • 68. ModernizrA library of tests to check for CSS3 and HTML5 API support on the client side.http://www.modernizr.com/
  • 69. Cross Browser PolyfillsBringing HTML5 APIs to browsers that dont natively support them.http://wil.to/html5/4
  • 70. YOU MAY NOW ADD “HTML5 GURU” TO YOUR RESUME.
  • 71. RESOURCESwil.to/html5http://developers.whatwg.orgpester me on the internet (@wilto)