Share via

HTML5 Part 5: Resources, Websites, and Tools

  • Article

HTML5_Logo_128I 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

cat[1] Introducing HTML5 The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript[Paperback]

 

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:

 

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:

Evangelist Twitter Blog
Brandon Satrom @brandonsatrom https://www.userinexperience.com
Clark Sell @csell5 https://csell.net
John Bristowe @jbristowe https://bristowe.com
Jon Box @jonbox https://blogs.msdn.com/jonbox
Rachel Appel @rachelappel https://www.rachelappel.com

 

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

Comments

  • Anonymous
    February 27, 2012
    Wow, very comprehensive review. I'm thinking about learning HTML5. I'm seeing more and more job/freelance listings asking for <a href="html5socket.com/">html5 media player</a>knowledge and so along with reading some of the online references you listed, I'm going to have to pick up the book as well. Really appreciated the chapter breakdowns.

  • Anonymous
    October 24, 2012
    Oh. very great. I can copy it all right <a href="http://khoinguoncongnghe.net"> luan van tot nghiep </a>