HTML5 Part 5: Resources, Websites, and Tools

I hope that this week’s introduction to HTML5 has been useful.  Here’s what we covered:

1. Semantic Markup and Page Layout
2. Canvas
3. Audio and Video
4. Using HTML5 while retaining support for older browsers
5. Resources, Websites, and Tools

But also note that there’s a lot we didn’t cover: microdata, storage, CSS3, etc.  In this final post, I want to give you some resources to continue learning about HTML5. 

Microsoft Websites

IE Test Drive – even if you don’t use Internet Explorer, this is an awesome site.  It contains a ton of demos: Speed Demos, HTML5 Demos, Graphics Demos, and Browser Demos.  Try them in your favorite browser!  This site also has links to other resources, too. 

Beauty of the Web – showcases Internet Explorer 9

HTML5 Labs – This site is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C.  You can play with prototypes on IndexedDB, WebSockets, FileAPI, and Media Capture API. 

"Building Apps with HTML5: What You Need to Know" article – MSDN magazine article by Brandon Satrom on using HTML5 with Microsoft tools

Great Online Resources and Reference

Dive Into HTML5 – this is a fabulous online version of the HTML5: Up & Running book by Mark Pilgrim.  He does a great job explaining the various features of HTML5. 

HTML5 Tutorial from W3Schools – one of my favorite sites for learning HTML5.  I love their “Try it Editor” which allows you to edit HTML, click a button, and see the results of your changes. 

W3C Working Draft of HTML5 – watch the HTML5 spec evolve here…

W3C Editor’s Draft of HTML5 – and here (the editor’s draft may be slightly more up-to-date)

Is HTML5 Ready Yet? – this site is just funny!  Make sure to "view source”.  :)

HTML5 Logo – if you need an HTML5 logo (or t-shirt, sticker, etc.), this is where you will find it

HTML5 Doctor – a group of guys who publish HTML5 articles and invite you to ask them questions as well

HTML5 Demos – site of HTML5 demos

Real Examples of HTML5 Websites

https://pirateslovedaisies.com – fun game (using the canvas tag for animation) where you strategically place pirates of differing abilities to defend a garden of daisies

https://www.thekillersmusic.com/html5 – website of the band “The Killers” that navigates using a cool panorama effect

https://html5gallery.com – a showcase of sites using HTML5

Books

HTML5 Up and Running by Mark Pilgrim

Introducing HTML5 by Bruce Lawson and Remy Sharp

The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript by Jeanine Meyer

Videos

Brandon Satrom’s “Application Development with HTML5” talk at TechEd 2011 – this is a fabulous hour-long talk that nails what you need to know to do HTML5 development

HTML5 talks from MIX 2011 – a wealth of HTML5 sessions

Tools

Many of the Microsoft development tools support HTML5 already.  We take web standards very seriously, and the support will continue to get better and better. 

• Visual Studio 2010 SP1 – SP1 adds basic HTML5 and CSS3 IntelliSense and validation.  For more information, see this post. 
• Web Standards Update for Microsoft Visual Studio 2010 SP1 – this is a Visual Studio extension that adds updated HTML5 and CSS3 IntelliSense and validation to Visual Studio 2010 SP1, based on the current W3C specification. 
• WebMatrix – HTML5 is supported by default out of the box (adding a new HTML page uses the HTML5 default doctype and template code)
• ASP.NET MVC 3 tools update
  • The New Project dialog includes a checkbox-enabled HTML5 version of project templates.
  • These templates leverage Modernizr 1.7 to provide compatibility support for HTML5 and CSS3 in down-level browsers. 
• Expression Web 4 SP1
  • HTML5 IntelliSense and support in the Code Editor and the Design View
  • Richer CSS3 style editing and IntelliSense
  • SuperPreview Page Interaction Mode and Online Service (remote browsers include Chrome, IE8, IE9 and Safari 4 and 5 on Windows and Mac)

Besides development tools, don’t forget:

• Windows Phone “Mango” contains Internet Explorer 9, which supports HTML5 sites. 
• Internet Explorer 10 Platform Preview 2 (IE10 PP2) has support for many new CSS3 and HTML5 features; the full list is here.

Smart People to Follow

NOTE: This is a completely Microsoft-centric list, of the folks that I personally know at Microsoft with great web skillz.  Of course, there are many non-MS people who rock at HTML5 that you should be following too. 

Two of my teammates, Brandon Satrom and Clark Sell, focus on Web and are great resources on HTML5.  In addition, I have some other peers (John Bristowe, Jon Box, and Rachel Appel) who are distant “cousins” of mine (if you think of an org chart like a family tree) and they rock at HTML5 too. 

Here is their info:

If there are additional HTML5 resources that have been useful to you, feel free to share in the comments! 

Other blog posts in this series:

1. HTML5 Part 1: Semantic Markup and Page Layout
2. HTML5 Part 2: Canvas
3. HTML5 Part 3: Audio and Video
4. HTML5 Part 4: Using HTML5 while retaining support for older browsers
5. HTML5 Part 5: Resources, Websites, and Tools