taking the plunge into html5 - files.meetup.com brown - taking the plunge into...html5 boilerplate...
TRANSCRIPT
![Page 1: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/1.jpg)
Come on in. The water’s fine.
Taking the plunge into HTML5
by Ray BrownOwner, Bitmanic Jan 31st, 2011
![Page 2: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/2.jpg)
This PresentationMy experience with HTML5Cool new stuffTips for diving in
![Page 3: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/3.jpg)
But first...
![Page 4: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/4.jpg)
An introductionWeb professional for five yearsStarted out as a designerFocused on programmingLanded smack dab in between the two
![Page 5: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/5.jpg)
My experiencewith HTML5
![Page 6: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/6.jpg)
My experienceOver a year of practical useNew section elementsNew input types
![Page 7: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/7.jpg)
New section elements<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>
![Page 8: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/8.jpg)
From div to shivIE (<9) doesn’t support HTML5Luckily, we can add support via JSremysharp.com/html5-enabling-scriptNo support for non-JS users
![Page 9: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/9.jpg)
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>
![Page 10: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/10.jpg)
New input types<input type=”email”>
<input type=”url”>
<input type=”number”>
<input type=”range”>
<input type=”date”>
<input type=”search”>
<input type=”color”>
![Page 11: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/11.jpg)
Cool new stuff
![Page 12: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/12.jpg)
Cool new stuffNew form goodiesData a#ributesBlock-level linksHTML5 BoilerplateModernizr
![Page 13: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/13.jpg)
New form goodies<input placeholder=”Enter your name here.”>
<input autofocus>
<input required>
Client-side form validation, too! (Well, not yet.)
![Page 14: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/14.jpg)
Data aributes<div class=”album” data-thumbnail=”maneater.jpg” data-artist=”Hall & Oates” data-is-awesome=”Of course.”> [Content]</div>
![Page 15: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/15.jpg)
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>
![Page 16: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/16.jpg)
HTML5 Boilerplatehtml5boilerplate.com
HTML5 “starter kit”A plethora of tips and tricksBut can be a bit overwhelming
![Page 17: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/17.jpg)
Modernizrmodernizr.com
HTML5 and CSS3 feature detectionIncludes an HTML5 shivTarget browsers based on capabilities
![Page 18: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/18.jpg)
Tips for diving in
![Page 19: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/19.jpg)
Dive Into HTML5 by Mark PilgrimHTML5 for Web Designers by Jeremy KeithHardboiled Web Design by Andy ClarkeCountless blogs and online resources
Read, read, read
![Page 20: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/20.jpg)
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
![Page 21: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/21.jpg)
Get comfy with HTML5’s new featuresInteract with other HTML5 devsKeep an eye out for new tools
Get your feet wet
![Page 22: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/22.jpg)
That’s all for nowThanks for your time!Questions? Come say “hi” during breakout.Or, email me: [email protected]
![Page 23: Taking the plunge into HTML5 - files.meetup.com Brown - Taking the plunge into...HTML5 Boilerplate html5boilerplate.com HTML5 Òstarter kitÓ A plethora of tips and tricks But can](https://reader030.vdocuments.net/reader030/viewer/2022040714/5e1c510e4c6c3f1b151f4bf4/html5/thumbnails/23.jpg)
</presentation>