Taking the plunge into HTML5

Transcript

1. Come on in. The water’s fine. Taking the plunge into HTML5 by Ray Brown Owner, Bitmanic Jan 31st, 2011
2. This Presentation My experience with HTML5 Cool new stuff Tips for diving in
3. But first...
4. An introduction Web professional for five years Started out as a designer Focused on programming Landed smack dab in between the two
5. My experience with HTML5
6. My experience Over a year of practical use New section elements New input types
7. New section elements <section> <nav> <article> <aside> <hgroup> <header> <footer>
8. From div to shiv IE (<9) doesn’t support HTML5 Luckily, we can add support via JS remysharp.com/html5-enabling-script No support for non-JS users
9. A whole new world <div class=”entry”> <div class=”meta”> <h3>Title</h3> <h4>Jan 31 2011</h4> </div> <p>Article content.</p> <p>More content.</p> </div> <article> <header> <h1>Title</h1> <time>Jan 31 2011</time> </header> <p>Article content.</p> <p>More content.</p> </article>
10. New input types <input type=”email”> <input type=”url”> <input type=”number”> <input type=”range”> <input type=”date”> <input type=”search”> <input type=”color”>
11. Cool new stuff
12. Cool new stuff New form goodies Data a ributes Block-level links HTML5 Boilerplate Modernizr
13. New form goodies <input placeholder=”Enter your name here.”> <input autofocus> <input required> Client-side form validation, too! (Well, not yet.)
14. Data aributes <div class=”album” data-thumbnail=”maneater.jpg” data-artist=”Hall &amp; Oates” data-is-awesome=”Of course.” > [Content] </div>
15. Block-level links This looks wrong, but it’s so, so right: <a href=”somepage.html”> <h1>Page title</h1> <p class=”excerpt”>Page excerpt!</p> </a>
16. HTML5 Boilerplate html5boilerplate.com HTML5 “starter kit” A plethora of tips and tricks But can be a bit overwhelming
17. Modernizr modernizr.com HTML5 and CSS3 feature detection Includes an HTML5 shiv Target browsers based on capabilities
18. Tips for diving in
19. Dive Into HTML5 by Mark Pilgrim HTML5 for Web Designers by Jeremy Keith Hardboiled Web Design by Andy Clarke Countless blogs and online resources Read, read, read
20. Dig into the HTML5 spec It’s a dry read, but also a definitive reference Lots of thorough examples dev.w3.org/html5/spec/ Read... some more
21. Get comfy with HTML5’s new features Interact with other HTML5 devs Keep an eye out for new tools Get your feet wet
22. That’s all for now Thanks for your time! Questions? Come say “hi” during breakout. Or, email me: ray@bitmanic.com
23. </presentation>