Using area maps within images in HTML5 web pages

image-map

One of the features of HTML5 that interested me is the area maps that you can plot on an image. This allows you to include functionality that you would normally find within a hyperlink. Such as clicking or mouse-over to produce previously difficult to achieve effects. This article covers the basics of HTML5 image area maps and the different type of areas that you can have within an image. It also walks through an example usage of area maps to find locations on an image map and give feedback on the web page. What is an area map? An image

Getting started with HTML5 offline web applications

HTML5 Offline

This article explains the HTML 5 “offline” feature, which gives website creators an easy method to dictate what a browser should store for use when internet (network) connectivity is unavailable. It explains the default HTTP caching method that browsers use and then how to use the HTML 5’s application cache, with a short example web application that shows an offline mode image if there is no network connection. In this article, I’ll use “application” to mean any website, game or other type of product that is delivered via the internet to your browser. I will use “network” to mean a

Determining file suitablility before uploading using HTML5 File API

File Upload Information

Today I wanted to write about HTML5’s File API. In the past, a developer would generally write code to determine if a file type was appropriate after the file had been uploaded. This would quite often be annoying for a user especially if the file was large and they only find out that it is inappropriate after it has finished uploading. Now, using the File API, the web page can determine if a file is acceptable before the user uploads it. In fact, not only can you gather the file type but you can find out other information about a

Location aware content in your HTML5 web page

Geolocation

I know this is not very spooky post for Halloween. Unless, of course, you were sitting there this evening thinking to yourself, I wonder how you make a web page location aware and happened across my post. Anyway, back to the subject. Using HTML 5 you can now include the user’s location within your application. The Geolocation API was included in HTML5 although not strictly as part of the HTML5 specification. You can now use the power of a location aware device to know where your user is and provide content relevant to them. It is quite simple to do

Cookieless user data storage using HTML5 Web Storage API

Web Storage

A while back I started writing about HTML5 and wrote “a brief guide to the enhancements and new features of HTML5” as well as more detailed articles about “HTML5 Video“, drawing using the “HTML5 Canvas” and “HTML5 Canvas Animation” and also one about scaleable vector graphics (SVG) with examples using HTML5. This follows on from those subjects with an article dedicated to the “HTML5 Web Storage API”. There are two new types of web storage that are now available to web developers in HTML5 for both local and session storage. However, before I can cover the Web Storage API, I

Creating and using scalable vector graphics on the web

Protractor

This article is about Scalable Vector Graphics (SVG) on your web pages. I would have classed it as a HTML 5 tutorial but it is not strictly speaking to do with HTML 5 although it does use HTML to display the images. An SVG is a file that has been written in XML and contains all of the information needed to draw the image on the screen in text. This way the browser knows exactly how to re-scale it depending on the viewing area so there is no loss of quality when viewing on a small or large screen. You

Animation example using the HTML 5 Canvas

Canvas

Following on from my article Getting started with HTML5 canvas, this short article adds another example of what you can do. If you haven’t already done so, it is worth revisiting my previous article to get familiar with the terms and Canvas setup. This article shows you that animation on the HTML 5 Canvas is really quite simple. The example here moves a small box around the screen and changes its direction and colour when it hits the boundary of the canvas. As there is not much to it so this brief article will include the full code, a couple

Getting started with HTML5 canvas

Canvas

A while back I gave an HTML5 overview with the intention of writing more about each of those areas. So this is one of those and is dedicated to the HTML5 canvas. It is quite long as I wanted to cover as many features as I could in the one article. As the canvas relies on JavaScript, I’ll also cover that as well as the basics you need for the HTML5 page structure. The HTML5 canvas allows you to specify a portion of a web page that you can draw directly on using JavaScript. You can still use your server

Getting started with HTML5 video

Video Player

A while back I gave an HTML5 overview with the intention of writing more about each of those areas. So this is one of those and is dedicated to HTML5 video. The same methods apply to audio even though audio is not explicitly covered here. For everyone that has created websites in the past using previous versions of HTML, you will know the difficulties involved in trying to embed video into those pages. The easiest way for most people was to convert the video to Adobe Flash and rely on the fact that most browsers had the free Adobe Flash

A brief guide to the enhancements and new features of HTML5

HTML5

I wanted to write some articles about the new features of HTML 5 and figured I had better start off with what HTML 5 is and give an overview of those new features and enhancements. I know there are probably hundreds of other HTML 5 articles on the internet and books explaining everything you could ever want to know but I’m hoping to keep the subject simple and present it in layman’s terms for those that are not into geek speak. So if you want a technical article, then you’d probably be better off looking elsewhere. If you want a