Example drag and drop in HTML5

drag and drop

This short article walks through an example use of drag and drop on a web page using the dragNdrop API of HTML 5. Everyone should know that drag and drop means you can move an object from one place and drop it in another place on the screen so I won’t go into any more detail than that. This article is made up of a step by step guide to building an example web page to demonstrate the functionality. There are some explanations of the actions and code along the

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

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

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

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

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.

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

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

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

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