Come on in. The water’s fine.

Taking the plunge into HTML5

by Ray BrownOwner, Bitmanic Jan 31st, 2011

This PresentationMy experience with HTML5Cool new stuffTips for diving in

But first...

An introductionWeb professional for five yearsStarted out as a designerFocused on programmingLanded smack dab in between the two

My experiencewith HTML5

My experienceOver a year of practical useNew section elementsNew input types

New section elements<section>

<nav>

<article>

<aside>

<hgroup>

<header>

<footer>

From div to shivIE (<9) doesn’t support HTML5Luckily, we can add support via JSremysharp.com/html5-enabling-scriptNo support for non-JS users

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>

New input types<input type=”email”>

<input type=”url”>

<input type=”number”>

<input type=”range”>

<input type=”date”>

<input type=”search”>

<input type=”color”>

Cool new stuff

Cool new stuffNew form goodiesData a#ributesBlock-level linksHTML5 BoilerplateModernizr

New form goodies<input placeholder=”Enter your name here.”>

<input autofocus>

<input required>

Client-side form validation, too! (Well, not yet.)

Data aributes<div class=”album” data-thumbnail=”maneater.jpg” data-artist=”Hall &amp; Oates” data-is-awesome=”Of course.”> [Content]</div>

Block-level linksThis looks wrong, but it’s so, so right:

<a href=”somepage.html”> <h1>Page title</h1> <p class=”excerpt”>Page excerpt!</p></a>

HTML5 Boilerplatehtml5boilerplate.com

HTML5 “starter kit”A plethora of tips and tricksBut can be a bit overwhelming

Modernizrmodernizr.com

HTML5 and CSS3 feature detectionIncludes an HTML5 shivTarget browsers based on capabilities

Tips for diving in

Dive Into HTML5 by Mark PilgrimHTML5 for Web Designers by Jeremy KeithHardboiled Web Design by Andy ClarkeCountless blogs and online resources

Read, read, read

Dig into the HTML5 specIt’s a dry read, but also a definitive referenceLots of thorough examples

dev.w3.org/html5/spec/

Read... some more

Get comfy with HTML5’s new featuresInteract with other HTML5 devsKeep an eye out for new tools

Get your feet wet

That’s all for nowThanks for your time!Questions? Come say “hi” during breakout.Or, email me: ray@bitmanic.com

</presentation>