• Like
  • Save
HTML5:  5 Quick Wins
Upcoming SlideShare
Loading in...5
×

HTML5: 5 Quick Wins

  • 2,219 views
Uploaded on

A quick intro to HTML5 and 5 quick things you can start using from it today.

A quick intro to HTML5 and 5 quick things you can start using from it today.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,219
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.
      HTML5
      5 Quick Wins (Things you can start doing today)
  • 2.
       
      Hi, I'm Jeff Leombruno.     @jlbruno I work at PixelMEDIA.     @pixelmedia Tweeting today?     #TechWorld2010
  • 3.
      Design Principles
  • 4.
       
  • 9.
      Compatibility:
      • image: http://www.flickr.com/photos/by-mark/110162788/
  • 20.
      Utility:
      • Solve Real Problems
      • 21.  
      • 22. Priority of Constituencies  
      • 23. Secure By Design  
      • 24. Separation of Concerns  
      • 25. DOM Consistency
  • 26.
      Interoperability:
      • Well-defined Behavior  
      • 27. Avoid Needless Complexity  
      • 28. Handle Errors
  • 29.
      Universal Access:
      • Media Independence  
      • 30. Support World Languages  
      • 31. Accessibility
  • 32.
      So, what is it?
  • 33.
       
  • 40.
      Who's using it?
  • 41.
       
  • 46.
      "HTML5 should not be considered as a whole. You should cherry pick the technology that suits the solution to your problem."       -- Remy Sharp      
      http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites
  • 47.
      Quick Win #1
      New Doctype, Simplified Template
  • 48.
            <!DOCTYPE html>
  • 49.  
  • 50.
      <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot; xml:lang=&quot;en&quot;> <head>     <title></title>     <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />         <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; />           <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; />     </head> <body> </body> </html>
  • 51.
      <!DOCTYPE html> <html lang=&quot;en&quot;> <head>     <title></title>     <meta charset=&quot;utf-8&quot;>         <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; />
                <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; />     </head> <body> </body> </html>
  • 52.
      <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
      &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot; >
      <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot; xml:lang=&quot;en&quot; > <head>     <title></title>     <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset= &quot; utf-8&quot; />         <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; />           <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; />     </head> <body> </body> </html>
  • 53.
      Quick Win #2
      New Semantic Elements
  • 54.
      http://www.w3.org/TR/html5-diff/#new-elements
  • 55.  
  • 56.
      <body>     <div class=&quot;header&quot;>     </div>          <ul id=&quot;nav&quot;>     </nav>     <div id=&quot;content&quot;>         <h1>         </h1>           <div class=&quot;article&quot;>         </div>         <div class=&quot;footer&quot;>          </div>        </div>     <div class=&quot;sidebar&quot;>     </div>     <div id=&quot;footer&quot;>     </div> </body>
  • 57.
      <body>     <header>     </header>          <nav>     </nav>     <section>         <header>         </header>           <article>         </article>         <footer>          </footer>        </section>     <aside>     </aside>     <footer>     </footer> </body>
  • 58.
      article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary {     display:block; }
  • 59.  
  • 60.
      We can fix this.
  • 61.
        We have the technology...
  • 62.
      http://intertwingly.net/blog/2008/01/22/Best-Standards-Support#c1201006277
      (Jan 22, 2008)
      <!--[if lt IE 9]> <script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;></script> <![endif]-->
      http://code.google.com/p/html5shim/
  • 63.  
  • 64.
      Quick Win #3
      Form Updates
  • 65.
      New Input Types:
  • 78.
      Email:
  • 79.
      URL:  
  • 80.
              Number:
  • 81.
      Date: (in Opera)
  • 82.
        Search: (in WebKit)  
  • 83.
      New Input Attributes:
  • 89.
          Validation: (in Firefox 4)
  • 90.
      Validation: (in Opera)
  • 91.
      Validation:
        <form novalidate >     <input type=&quot;email&quot; id=&quot;addr&quot;>     <input type=&quot;submit&quot; value=&quot;Subscribe&quot;> </form> <form>     <input type=&quot;email&quot; id=&quot;addr&quot;>     <input type=&quot;submit&quot; value=&quot;Subscribe&quot;>     <input type=&quot;submit&quot; value=&quot;Save&quot; formnovalidate > </form>
  • 92.
      Quick Win #4
      Custom data attributes
  • 93.
      &quot;Custom data attributes  are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.&quot;      
      http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes
  • 94.
                    <ul>     <li class=&quot;prodSizeSmall red&quot;>Product 1</li>     <li class=&quot;prodSizeSmall green&quot;>Product 2</li>     <li class=&quot;prodSizeSmall blue&quot;>Product 3</li>     <li class=&quot;prodSizeMedium red&quot;>Product 4</li>     <li class=&quot;prodSizeMedium blue&quot;>Product 5</li>     <li class=&quot;prodSizeLarge blue&quot;>Product 6</li>     <li class=&quot;prodSizeLarge green&quot;>Product 7</li>     <li class=&quot;prodSizeLarge red&quot;>Product 8</li> </ul>
  • 95.
                    <ul>     <li data-prod-size=&quot;small&quot; data-prod-color=&quot;red&quot;>Product 1</li>     <li data-prod-size=&quot;small&quot; data-prod-color=&quot;green&quot;>Product 2</li>     <li data-prod-size=&quot;small&quot; data-prod-color=&quot;blue&quot;>Product 3</li>     <li data-prod-size=&quot;medium&quot; data-prod-color=&quot;red&quot;>Product 4</li>     <li data-prod-size=&quot;medium&quot; data-prod-color=&quot;blue&quot;>Product 5</li>     <li data-prod-size=&quot;large&quot; data-prod-color=&quot;blue&quot;>Product 6</li>     <li data-prod-size=&quot;large&quot; data-prod-color=&quot;green&quot;>Product 7</li>     <li data-prod-size=&quot;large&quot; data-prod-color=&quot;red&quot;>Product 8</li> </ul>
  • 96.  
  • 97.  
  • 98.
              <img       data-product-price=&quot;£350.00&quot; 
           data-product-name=&quot;Meisterstück Classique&quot;       data-closeup=&quot;/WritingInstrument/MagnifiedImages/12737_l.jpg&quot; 
           alt=&quot;Meisterstück Classique&quot;       src=&quot;/WritingInstrument/ThumbImages/12737_t2.png&quot;       class=&quot;proColorImg&quot;>         var imgSrc = $targetImg.attr('data-closeup'); var productName = $targetImg.attr('data-product-name'); var productPrice = $targetImg.attr('data-product-price');     
  • 99.
      Quick Win #5
      Polyfills!
  • 100.
        Polyfill: (as defined by Paul Irish )   (n) A shim that mimics a future API providing fallback functionality to older browsers.    
      http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 101.
      Thank you! The cow thinks it would be great of you to leave any feedback here: http://speakerrate.com/jlbruno
      Want to read more? Check out Mark Pilgrim's online book: http://diveintohtml5.org/