Getting Started with HTML5

imageI’ve been spending more and more time in front end web development with HTML5 recently (yes, you can expect a redesign of my blog here soon) an ,d thought I’d demystify some of the bits that I keep hearing out there.

First of all, HTML5 is not all brand new and completely different and going to revolutionize the world. It is an conglomeration of standards and an evolution of various parts of those standards. The reality is that it’s added 30ish new tags, some of which you’ll care about, some of which you won’t. Some of these tags are very powerful and some of very narrow in focus. For example, <canvas> is a very powerful tag that brings a drawing surface that’s going to allow some amazing interaction while <ruby> is a way to denote pronunciation guides for obscure characters in logographic alphabets such as Chinese and Japanese. While absolutely needed for the localization in those communities, it’s fairly limited in use.

But you’ll find that type of thing throughout the new tags – there’s a huge emphasis on localization and accessibility. For example, the new <nav>, <header>, <article>, <figcaption>, <aside> and more have nothing to do with the flashy animations and transitions that we are used to hearing about with regards to HTML5. Rather they are focused on accessibility and giving machines, including search engines, more intelligence about your site and content. This is a great help to screen readers such as JAWS but also is a step towards semantic web.

You can start using these features today with absolutely no worries because down level browsers will just simply ignore them. Now, if you site is heavily dependent on the most hyped tags, <canvas>, <audio> and <video>, you’ll have to figure out what your contingency is for non-HTML5 capable browsers. That could be using Silverlight or Flash or a completely different representation of the information in old school HTML4.

A very simple format for blog page (yes, I’m stealing this from the redesign that I’m doing on my site as we speak) is as follows:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="yourcss.css" />
        <title>Getting Started with HTML5 - Josh Holmes</title>
     <h1>Josh Holmes</h1>
      <li><a href="/">Home</a></li>
      <li><a href="/aboutme">About Josh</a></li>
      <li><a href="">twitter</a></li>
      <h2>Getting Started with HTML5</h2>
   <p>Main content</p>
   <p class="image"><img src="html5logo.jpg" alt="HTML5 Logo" /></p>
      <h2>Some other post</h2>
   <p>Main content</p>
   Licenced under Creative Commons <br /> Updated: <time datetime="2011-01-06">June 1st, 2011</time>

There’s a bunch of little things to notice here.

  • Notice that it looks extremely similar to an HTML4 web site.
  • Notice the short and simple doctype declaration – <!DOCTYPE html>.
  • Notice the beautiful separation of the various sections into very human and machine readable content.
  • Notice the <time> element that gives meaning and structure to the date.

In a nutshell, don’t be scared of HTML5. It’s an evolution of existing standards. You can use the structure that I listed above with little to no worries without having to figure out all the new stuff with <canvas>, <video>, brushes and the like or going nuts with JavaScript.

I’ll be blogging along about the JavaScript integration and the CSS improvements but I wanted to start with the very basics and point out some of the bits that really help with accessibility.

Startup Lessons Learned Viewing Party

The NDRC here in Dublin, Ireland is hosting a live viewing party of the Startup Lessons Learned Conference being held in silicon valley.

Startup Lessons Learned is the first event designed to unite those interested in what it takes to succeed in building a lean startup. The goal for this event is to give practitioners and students of the lean startup methodology the opportunity to hear insights from leaders in embracing and deploying the core principles of the lean startup methodology. The day-long event will feature a mix of panels and talks focused on the key challenges and issues that technical and market-facing people at startups need to understand in order to succeed in building successful lean startups.

There’s going to be a ton of great content and speakers at the conference ranging from big established companies such as IGN to companies such as Groupon to smaller startups such as SideReel. They will talk about how to build a successful start up.

I wish that I could be there in person but since that’s happening many thousands of miles away, I’m thrilled that I’ll be able to connect with the local startups at the NDRC.



Register for the NDRC live viewing at

Dublin reMIX 2011

One of the things that really fun about my job here in Microsoft Ireland is that the team I’m on has one primary remit – to inspire the  developers or designer of Ireland. In June, we’re going to pull together a full day of the most exciting content from MIX11 as well as some cool stuff that we’re throwing in ourselves all for free.

Our goal with this content is to drive you, as someone involved in software in Ireland whether you’re a developer or designer,  as a to go bigger and faster with your applications. To help you think about development, whether that’s traditional web development, phone development or even really breaking down the walls to a natural user interface with Surface 2 and Kinect.

reMIX Dublin is on June 9th, 2011 at the RDS in Ballsbridge, D4.

It’s broken up into two separate events actually.

reMIX: Developer (9.00-13.00)


Welcome, followed by

Developing for Windows Phone 7 – From Concept to Marketplace


Developing for the Cloud




Windows Phone 7.5 aka Mango


Kinect Hackables


Wrap up

reMIX: UX (14.30-18.30)



Taking UX Further with Surface


Designing Infographics for Web Applications




HTML5 Awesome Sauce


UX Lighting Talks


Wrap up

Now, this is a loose schedule at the moment and subject to a few possible changes. For example, I might have a really big name speaker coming in from Redmond that we’ll leverage in here at least, if not twice.

If you’re interested – you should register early at

Camera Phone

I love having a camera on my phone. I’ve had the privilege of playing more golf this week than I did all of last year and on better courses than I’ve ever played in my life. I didn’t plan to play such nice courses and definitely didn’t foresee needing to take nearly as many pictures as I did take. The awesome part is that I have a camera on my phone, which on Windows Phone 7 I don’t even have to unlock to use.

The first course I played was the Tralee Golf Club which is an Arnold Palmer course that’s rated as one of the top 10 ocean golf courses in the world. I played this course with my team mate Michael Meagher here at Microsoft Ireland and our hosts at the Institute of Technology in Tralee. It was hands down my favorite course I’ve ever played. The picture here is on the tee box on 17. All I can really say is wow… You can see more photos at Tralee Golf Course on Flickr

The next day I got to play the Seapoint Golf Course just north of Dublin. I played this course with my fellow evangelists Dave Northey and Jeff Blankenburg. Jeff’s visiting from the states speaking about WP7 and is a big golfer. I couldn’t resist taking him out. We caught some fantastic photos such as the rainbow photo in this post.

You can see more photos at Seapoint Golf Course on Flickr

Now, all that said – I’m going to have to take my proper digital SLR Canon Rebel next time I go golfing… :)

Activating BizSpark Azure Accounts

A question that I’ve been asked a number of times recently is how to activate an MSDN Azure account and more specifically, how to do it with a BizSpark account. To make it easy, I thought I’d blog that here.

For an up to date list of benefits you should visit but currently it’s as follows:

Subscription Level BizSpark/Visual Studio Ultimate
with MSDN
Visual Studio Premium
with MSDN
Visual Studio Professional
with MSDN
Compute 1,500 hours of the Small Instance 1,500 hours of the Extra Small Instance 750 hours of the Extra Small Instance
Storage 30 GB 25 GB 20 GB
Storage Transactions 2,000,000 1,000,000 250,000
SQL Azure 5 GB 1 GB 1 GB
Access Control Transactions 500K 200K 100K
Service Bus Connections 5 5 2
Data transfers 35GB (WW) Out
35GB (WW) In
30GB (WW) Out
30GB (WW) In
25GB (WW) Out
25GB (WW) In
Annual Savings** $3100 $1300 $800


Signing up for BizSpark


Starting up, if you are a start-up (defined as less than 3 years old, less than $1 million in revenue, privately held and producing technology as your primary monetization) you should be on BizSpark. BizSpark gives you access to all of the Microsoft technologies that you’d need to develop your applications such as Windows, Azure, Visual Studio, Office (in case you need to integrate with it) and more. Just go to and click Apply Now.


If you have an existing LiveID, you can use that but the reality is that I recommend that you create a specific LiveID for the start-up because what happens if the person who originally signed up leaves the company? Or is out on a day when something needs to be done on the account? For that reason, I recommend creating a specific account for your BizSpark management.


I recommend, partly because of the number of lawyers in my family, that you read the terms and conditions but at the end, if you agree, there are two individual agreements that you need to agree to before you click next.

One of those is the BizSpark Startup Agreement and the other is the EULA.

Once you fill out the rest of the wizard, it goes into a process on our end. If you are in Ireland, that registration goes through a two phase approval process. The first phase is with a Network Partner and the second phase is currently me. :-)


Once you are signed up, you can log into My BizSpark and click on the Get your Free Software link which will show you a link to MSDN. Reality is that it’s just pointing to MSDN and you can go there directly if you like.

You’ll just need to sign in there with a LiveID that’s associated with a BizSpark member.

Adding new developers to a BizSpark Account

2011-04-27_1041Quick side note is that I’ve also been asked a number of times how to add additional developers to a BizSpark startup. Find the Manage section of the left hand navigation and find the Members link underneath that. Then you put in the new developer’s name and email address. That does not have to be their LiveID – it can be any email address. There will be an acceptance link in the email that will require the person to sign in with their own LiveID to access the bits and all.

Activating Your Azure Benefits from MSDN

2011-04-27_1045Once you sign into MSDN and go to the “My Account” section, you should see the “Windows Azure Platform” link. This link will take you to the Windows Azure signup process and walk you through a longish wizard. At the end of that, you will be able leverage all of the benefits of MSDN on Azure.

One thing to warn you about at this point is that the Windows Azure signup does require a credit card to cover any overages. I recommend that you closely monitor your usage to make sure that you don’t go over. :)

2011-04-27_1052Now, once you’re signed up for the Azure benefits, you can simply go to to manage your account and deploy applications. The one portal serves as your management portal for your services, data, SQL Azure and any other services you’re signed up for such as Connect.

Have fun playing with Azure!

Join the MIX Conversation in Ireland!


Unplug from your day job. Be inspired at MIX.

Join the conversation at MIX – see the latest tools and technologies and draw inspiration from a professional community of your peers and experts.

MIX is a gathering of developers, designers, UX experts and business professionals creating the most innovative and profitable consumer sites on the web. The conference takes place in Las Vegas, but will be streamed live online Join developer peers in Ireland on the hashtag #MIX11IE.

There’ll be great prizes on offer for both in-person & virtual attendees. Local evangelist will be tweeting questions every 30 mins during the keynote (5pm-7pm) and answers should be emailed to If you get all four answers right you are in the draw to win one of the following (we’ve cleared out our storeroom and here’s what we found J):

· Xbox Kinect bundle

· Arc Touch Mouse (x2)

· Xbox Live Gold Memberships 12 months (x3)

· Microsoft Web t-shirts (loads)

Questions to


*competition open to residents of ROI and NI only

*entry to competition only possible before 7.30pm 12th April 2011

Windows Azure Toolkit for Windows Phone 7

WinPhoneAzureThe Windows Azure Toolkit for Windows Phone 7 is a starter kit that was recently released out to CodePlex. Wade Wegner, one of my former team mates when both of us were in Central Region, is the master mind behind this fantastic starter. 

This starter kit is designed to make it easier for you to build mobile applications that leverage cloud services running in Windows Azure.


In the screencast, you’ll get a great little walkthrough of the starter kit and how to get your first Windows Phone 7 application with a Windows Azure backend up and running. The toolkit includes a bunch of stuff including Visual Studio project templates that will create the Windows Phone 7 and Windows Azure projects, class libraries optimized for use on the phone, sample applications and documentation.

Why Windows Azure

Windows Azure is Microsoft’s Platform as a Service (PaaS) offering that allows you to build and scale your application in the cloud so that you don’t have to build out your local infrastructure. If you are selling an application in the Windows Phone 7 Marketplace and really don’t know how many customers you’ll end up with, you might need to scale the backend dramatically to meet the demand. 


What you’ll need

Hopefully obviously you’ll need an Azure account and the tools to build and deploy the solution. The tools include one of the versions of Visual Studio (either Express which is free or higher), the Windows Azure Toolkit and then obviously the starter kit itself. I also recommend looking at Expression Blend for doing your Windows Phone 7 design and the like.

Good Luck!

By looking through the resources on the Windows Azure Toolkit for Windows Phone 7 site, you’ll see lots of great little tutorials and getting started guides.

Let me know how you’re getting on with the toolkit and what you’ve done with it. I’d like to see and possibly blog about it all…

Site Pinning in IE9

IE9Internet Explorer 9 (IE9) launched last week at SxSW! I was bummed that I wasn’t there but I was one of the 2.3 Million downloads in the first day. There’s a bunch of new stuff in IE9. There’s a load of examples out on that show off all of the new HTML5 support to javascript performance to a ton more.

A simple one, however is site pinning. This allows you to pin a website as if it were an application on the Windows 7 taskbar. This blending and merging of the web and desktop is awesome.

Now, you can pin any website to the taskbar and get generic results but you as a website author have control to actually do something cool and customize what that pinning does. You can customize the way your site is added to the taskbar as well as add your own jump list items.

MSApplication Meta Tags

The first place to get started is customize the application name, tooltip and frame with a few meta tags:

<meta name="application-name" content="Josh Holmes" />
<meta name="msapplication-tooltip" content="Random Thoughts" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#ff7900" />
<meta name="msapplication-starturl" content="" />

That’s simple. The next step is to add in a custom task that will let people dive deeper into the site with the right click:

<meta name="msapplication-task" 
content="name=View Articles;action-uri=./articles/;icon-uri=./favicon.ico" /> <meta name="msapplication-task"
content="name=About Josh;action-uri=./aboutme/;icon-uri=./favicon.ico" />

By default, IE9 looks for your 32×32 sized version of your favicon but if it can’t find one, it it uses your 16×16 one in a 32×32 box so you should use a high-res favicon if possible…


If your site is pinned, you can, if you want, do more that just sit there on the taskbar. You can interact with the jumplist and more.

Checking For Pinned Mode

First thing to know is if your site is actually pinned or not:

if (window.external.msIsSiteMode()) {
 // in pinned mode
} else {
 // not in pinned mode


Activating the Taskbar Icon

Let’s say that you need your user to interact with the application to keep session alive, or need them to complete a form or for some reason you need their attention back on the site, simple activate the taskbar icon by making it glow (Win7 Users are used to this UI paradigm):


If making it glow is not enough but you have actual info for the user, such as if you are running a bulletin board service and want to let the user know that 3 new messages have arrived for them or something else random like that:

// clear current overlays
// set new one
window.external.msSiteModeSetIconOverlay("./newmessage3.ico", "3 new messages match your search");

Customizing the JumpList

And if you really want to customize the jumplist like with the last few articles that your user looked at, or the last few searches that they did or something more than the static setting of tasks that we did above:

// clear current jump list
// name the jump list
window.external.msSiteModeCreateJumplist("Adding JumpLists");
// add tasks to list – notice that these can have custom icons as well
window.external.msSiteModeAddJumpListItem("Item 1", "page1.html", "./favicon.ico");
window.external.msSiteModeAddJumpListItem("Item 1", "page2.html", "./favicon.ico");
// display list

JQuery Way

Of course, if all that’s too complicated or two much typing, you can just use the JQuery plugin – :D


Hopefully this has been a short and sweet glance at some of the new site pinning features and the like.

ASP.NET/PHP on the Microsoft Web Platform Event in Ireland


I’m really looking forward to moving to Ireland and I’m going to hit the ground running…

Right off the bat I’m going to be throwing an event called the “Evolution of ASP.NET and PHP on the Microsoft Web Platform”. One of the reasons that we’re throwing this event when we are is that we have Ryan Ozimek coming over to help me reprise and enhance the WebMatrix launch event.

Abstract: Web development is continually evolving on the Microsoft Web Platform. This evolution has brought fantastic new features and functionality such as the new Razor syntax and ASP.NET MVC 3 on the ASP.NET side and WinCache and FastCGI on the PHP side. And great new tools such as WebMatrix and the Web Platform Installer make it exceedingly simple to download, customize and deploy many of the top OSS applications, such as DotNetNuke for ASP.NET and Joomla! for PHP, on Windows.

image004Amongst the speakers at this developer evening are Josh Holmes, the brand new Architect Evangelist for Ireland, and Ryan Ozimek, president of Open Source Matters which is the non-profit that takes care of Joomla!.

Join us for an evening diving into how web development is evolving on the Microsoft Web Platform. We’ll start with an overview of the entire platform and the recent flood of announcements. Then we’ll dive deep into the individual topics of the new ASP.NET Razor syntax, ASP.NET MVC3 and PHP on Windows.
Whether you are doing ASP.NET or PHP, whether you have years of experience with web development or are just getting started you’ll find just the right flavour of web development for you.

Date: February 8th, 2011. 6.30pm-8.30pm (registration from 6pm)


The Westin Hotel

35 – 39 Westmoreland Street
Dublin 2
Map: Click here for a map

Please join us for this event by registering online.

The talks will wrap-up after two hours, giving attendees plenty of time to have a drink and some food whilst networking or playing around with some of the latest Microsoft gadgets.