thebeebs - html5at5

I got asked by Gordon Rae on twitter today: @ thebeebs Martin, can you recommend a good tutorial for overlaying data on video in HTML5 ? — Gordon Rae (@socialtechno) February 21, 2012 Firstly beware that just because a browser supports HTML5 video it...

Last week at the digital barn I gave a talk called “The Way the web should be” in it I talked about the importance of Web Standards in the development of IE. In a follow up blog post Ian Parr made an interesting point: One point that I think MS people...

There are many new features in HTML5 but in think that App Cache is potentially one of the most important. App Cache allows you to create a manifest file that details all of the files your application uses offline. When you visit your website with no...

So if you have been developing for any length of time then you are probably familiar with ‘em’, ‘%’and ‘px’ as units of measurements in CSS. As part of the CSS3 specification there are a few new  units of measurement that I think are worth casting...

HTML5 is a much more forgiving when it comes to Mark-up than XHTML. With XHTML you needed to make sure that each opening HTML tag had it’s own closing tag. So you would always close an image tag like this: <img alt="A pretty car" src="image.jpg" />...

Ok so you have a great idea for how you’re going to use Canvas in your next application… problem is you still have tons of visitors that use IE8 (which doesn't support the Canvas element). Not to worry, all is not lost. In many instances you can use something...

With the explosion of devices that access websites , it's becoming more important that your website works well on mobile devices. I found the process of learning how to create websites that worked on mobile devices confusing so I created the list below...

When I use a HTML5 feature in my website I will often test the browser that is visiting to see if it is capable of using the feature. If it is not capable I will Fall-back to something that the browser is a capable of supporting. In practice, I use modernizr...

Autofocus is a HTML5 attribute that you add to input elements, which cause the browser to automatically focus on the input element when the page loads. Google and every other search engine have been doing this since the dawn of time (slight exaggeration...

Accessibility for Rich Intranet Applications ( WIA-ARIA ) is a specification that makes it easier for people using screen readers to navigate and use web applications. Many of the new HTML5 elements like section and article have been added to the specification...

Placeholder is a HTML5 attribute that you add to input elements, it makes it easier for users to fill out your forms. Demo view here Source on GitHub It works for on regular input fields but also works on on password types. Of course the placeholder tag...

I recently walked past someone in the office who was reading a web article that they’d printed off. Now putting to one-side the environmental impact of printing the internet there is also another disadvantage to reading printed webpages… the hyperlinks...

When a user wants to change some information on a webpage it's often very jarring to ask them to go to another form to edit the content. Users find it difficult to understand how the changes they make on a form will effect the resultant page. Therefore...

If you have played with the HTML5 version of the cut the rope, you will notice that it remembers your scores for each game when you return to the site. To achieve this in your own applications you can use localStorage which is part of the Web Storage...

I got asked a question recently on twitter from Seb Lee-Delisle about vendor Prefixes and JavaScript. He asked: is the JS equivalent of -ms-transform MSTransform? or msTransform? The answer to the question is msTransform. However, the question opens up...

During the launch of IE9 I was asked to produce a HTML5 application that animated stitching tweets on to a canvas. During testing the application I had some really complex animations and they performed just fine, but when I added test using Text API the...

If you have been to a HTML5 presentation in the last 2 years then there is no doubt that you will have seen presenters opting to use their browser as a slide deck rather than PowerPoint or KeyNote . Personally I use PowerPoint for all my talks because...

HTML5 contains the a new feature (I say new, Opera has had it since 2006) that allows you to upload multiple files. <input type="file" multiple /> By default this allows the user to select more than one file. The file choosing is handled by...

There are a number of ways to create graphs in HTML5, you could use canvas for example, but one of my favourite ways is to go outside of the HTML5 spec and use an associated technology called Scalable Vector Graphics (SVG). Using SVG you can create really...

I frequently get asked this question by people that are new to HTML5. As well as detailing lots of new elements HTML5 defines a number of new JavaScript APIs. When the HTML5 specification was formulated in 2004 it was felt that APIs were necessary to...

If you have not used postMessage (or Cross Document Messaging to use it’s proper title) it’s a way of securely sending messages between frames even when the documents passing messages are on different domains. To learn more about it you can read this...

Personally I like using jQuery mobile for the projects I work on because it has really broad support and makes developing in browser mobile apps easy. To be honest though I haven’t tested or evaluated many other mobile frameworks out there. There...

Following a visitors request last week I showed you how to produce a triangle shaped HTML5 video , pretty useless but interesting none the less. A number of people on twitter asked if it was possible to make a circle video. No problem I thought… Just...

I think I’d spin this question around and ask you to think about the kind of problems you have today in your site. If a HTML5 feature can help you solve one of those problems then great, but I wouldn’t go searching for features and then try...

The browser based WebSQL specification was an in browser database and has been supported by Chrome and a number of other browsers for some time. However, the specification has been dropped in favour of IndexedDB and chrome will be dropping support for...