Mike Griffiths

You may or may not know that the HTML 5 specification is nearing completion. Normally browsers begin implementing the features of a new mark-up version long before the specification is completed so that developers can begin writing web pages and the browsers will be ready to cope with them. HTML 5 is no exception.

HTML 5 proves to be a much anticipated release that promotes web applications over conventional flat websites. There are several new tags that have been added that I will go through in the post. These tags are aimed at creating rich web applications and streamlining current web apps. As you’ll probably guess from reading the descriptions of each tag, they’re also likely to make search engines’ jobs far easier.

HTML 5 has been made so that it is backwardly compatible with older versions of the mark-up. As with HTML 4, there is a XHTML counter-part which is far less forgiving with coding mistakes.

Elements

section

The section tag is used to define (you guessed it) sections of a document. ‘Sections’ may include things like the header, footer, paragraph or chapters.

article

The article tag is used to link in EXTERNAL articles. The specification defines external articles as things like forum posts, blog posts and reviews from other websites.

footer

A large number of websites out there today have footers that normally contain information about the document such as copyright, name of the author, date of publication and sometimes generic links. This is exactly what the footer element is for.

audio

Now we get into the more interesting stuff. The audio tag essentially allows you to play audio through the browser, a feature that was tried and failed some years ago with the bgsound attribute of the body tag. The audio tag will have various attributes to control it’s behaviour, such as whether or not to show controls, whether to auto-play, the ability to have loops within the file, to play the file a set amount of times or to have the file play indefinitely.

video

Very similar to the audio tag, only streaming video rather than audio. One additional attribute is ‘poster’, which allows you to specify a URL of an image you want to display while the video is first buffering.

progress

The progress tag is used to display progress of a time consuming function in JavaScript. This could be used to monitor the download or upload of a file. Quite handy really.

nav

We should all have some sort of navigation on our websites. The nav element is for just that. Whether it’s your menu at the top or left of your page, footer links or next and previous links for pagination, they should all be inside the nav element in HTML 5.

meter

The meter tag defines measurements of any given unit. When using it the author must give a minimum and a maximum of the measurement. There are attributes for min and max, but it is also possible to define the max and min from within the tag itself, for example: <meter>8 out of 10</meter> or <meter>80%</meter>.

time

This tag is for defining times. Often we use plain text to define dates, such a Christmas day. This should be written as <time datetime=”2009-12-25″>Christmas day</time>.

aside

aside is to be used in conjunction with an <article>, or on it’s own. Its content is to be related in some way to the article.

canvas

Another new feature in HTML 5 is the canvas. The canvas element allows authors to create bitmap images in real time. Before this had to be done using some sort of server-side scripting such as PHP using GD-lib or a standalone application like ImageMagick.

datagrid

The datagrid display data given to it in a tree-list view. It is possible to have multiple items selected using the multiple=”true” attribute.

Attributes

There are a series of new standard attributes available in HTML that were not available in HTML 4.

contenteditable

Allows the author to set whether content is editable by the user.

contentextmenu

The value for this would be a menu ID and would specify the context menu for the given element.

draggable

This will allow authors to set whether the element may be dragged, whether it is to be kept stationary, or whether this choice should be automatic.

irrelevant

Allows the user to mark an element as irrelevant. An irrelevant element is not displayed and is ignored by the browser.

ref

Although this was an attribute before it is now standard. It is to be used in conjunction with templates when the template attribute has been set, it will reference another document or part of a document.

registrationmark

Simple defines a registration mark for the element.

template

Reference another document or part of another document.

Event attributes

There are also new event attributes. Handy for making more rich applications.

onabort

When the element has been aborted then this script is run.

onbeforeonload

Run before an element has been loaded. Handy for a pre-loader perhaps?

oncontextmenu

Script to be called when a context menu is triggered.

ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop

The script to be ran when the element is being dragged, at the end of the drag, has been dropped in a valid target, is hovering over a valid drop target, at the beginning of a drag and when the element has been dropped, respectively.

onerror

The script that is called when there was a problem loading an element.

onmessage

Script called when a message event is triggered.

onresize

Script called when an element is being resized.

onscroll

Script called when an element’s scrollbar is being used.

onunload

Script to be ran when an element unloads.

Deprecated events

There is also one event that is no longer supported:

onreset

Script called when a form has been reset.

Conclusion

There are a lot of new features out there, all of which are already possible through the use of things like jQuery, but HTML 5 proves to make these features more accessible to developers and users. You will now not need various plug-ins (Flash) or have to have certain aspects of your browser switched on (JavaScript) in order to access a websites rich content.

In computing terms nothing is truely random. A few people argue that nothing is really random as everything can be predicted somehow, where as others say that parts of nature are random – but maybe we just don’t fully understand it yet? Anyway, that’s all besides the point, we’re talking about how random things are calculated on a computer.

So, how could a computer ever make something random? It’s something you don’t really think about, you just assume it’s easy. Take a second, close your eyes, and think of a number between 1 and 10. The odds are you’ll have picked a number and not know why, but if you’ve ever seen Paul McKenna or any of that stuff on TV then you’ll know that you probably chose that number because you’ve seen it a few times subconsciously that day – you may have chosen 3 because you bought 3 bars of soap for £3.33 earlier that day – who knows? Computers don’t have a subconscious, so how do they do it?

Well, it’s all about time. Something that changes all the while is time, so it’s a perfect seeding point for a random calculation. Time is stored differently on different operating systems, but for ease of use let’s use the UNIX way of storing, that is a UNIX timestamp. A UNIX timestamp is calculated by working out how many seconds it has been since January 1st 1970. This seems quite perculiar to someone who hasn’t come across it before but when you take time to think about it it’s actually quite a novel idea. It makes calculating times and dates much easier from a programming perspective. Take for example that I want to add a day onto the current date, it’s easy, I just add 86,400 seconds onto the current UNIX timestamp. Now put that against the Windows method: 2009-10-02. I want to add a day onto it… I’ll have to work out the month, work out how many days there are in that month, check if the current day is the last day, if it is then I have to work out the next month and add that on, if it’s not the last day of the month then I can just add it on, I also have leap years to deal with, the last day of the year, etc. Far more confusing.

Let’s use PHP with our example from before:

echo rand(1,10);

This will print out a number between 1 and 10. Example output:

3

However, if I were to go into the code and get the algorithm used to generate that random string and ran the program at the EXACT same time then it would produce the same output, so this isn’t really random.

There are some websites out there to claim that they produce random numbers. The first hit on Google (at time of writing) for ‘random number generator’ claims to use atmospheric noise to seed it’s random number. This is probably one of the best methods I have come across as it is EXTREMELY hard to predict. But it is predictable.

To the average Joe this whole random business makes absolutely no odds whatsoever. But to security experts it’s a nightmare. Most security algorithms have some sort of random part to them to make them more secure. But if the random part can be calculated then this leaves their algorithms wide open, this is why a lot of the algorithms used in high-end security are never released.