HTML5 Audio and Canvas Experiments

Link: http://9elements.com/io/projects/html5/canvas/

Can’t say much – other than Awesome! Move your mouse around and click around to get tweets on HTML5.

Harmony Drawing Tool

Link: http://mrdoob.com/projects/harmony/
An online sketcher which uses HTML5 and canvas to provide a procedural drawing tool. Works great and people with artistic tendencies can do quite a bit with this.

Audio Visualization using HTML5

http://www.storiesinflight.com/jsfft/visualizer/
This demo visualized an audio track using the HTML5 canvas tag and uses the audio tag to play the music. You’ve got to view the actual HTML5 demo of this.

JaVortex

Link: http://url3.tk/?p=nbody
A Gravitational Attraction Particle Engine n-body simulator in Javascript and uses HTML5 canvas.

3D Model Viewer

Link: http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/

A 3D model Viewer using Javascript and HTML5. The demo lets you interact and turn around the model in 3D space.

If you know of any other cool HTML5 demos, let me know by commenting below.

Lots more Input Types

HTML5 brings a lot more input types into form elements to give a richer user experience, of which some are text, url, telephone, email, range, color, date & time pickers. Some of these are helpful in the new validation feature, which I’ll go into detail in the next article in this series, and also improve usability on mobile devices. For example when an input field is marked as telephone in a form, when a mobile user selects that field for input, automatically he is shown a number pad to enter the text. The users also may get different keyboard layouts for the email and URL types of input fields as well.

Range

You can have the user select a value using a slider with the range input type. The image above shows how this renders in Google Chrome. The actual rendering of this may differ from browser to browser. The attributes of this input type are pretty self explanatory.

<input type="range" min=10 max=60 step=3 value=15>

Date and Time

HTML5 also provides date and time pickers. Opera implements this feature well. Here’s how Opera renders the a datetime picker

<input type="datetime" >

You can also configure this selection field to just show a date picker, month & year, week or just time. Here are the different options:

<input type="date">
<input type="month">
<input type="week">
<input type="time">

Spin those Numbers

You can use the number input type as a form field and convert a text box into a spinner, which the user can use to input data by just using the spinner. You can specify the minimum, maximum, step and the default value for this input type.

<input type="number" min="0" max="100" step="5" value="15">

New Attributes for Form Fields

Apart from input types, HTML5 also provides additional attributes for existing input fields. Here are some of the new and interesting attributes for form fields:

Place Holder

This is something we all have used Javascript so far to implement in forms. To have a text explaning the input box appear and dissapear when the user selects it to start typing. You can now achieve this by adding an attribute called placeholder into the input tag.

<label>Username <input name="uname" type="text"
         placeholder="Enter your Username"> </label>

Focus & Autofocus

No javascript required here – If you want to focus on a particular form field in HTML5 just add the attribute autofocus to that input field:

<label>Username:
<input name="uname"  type="text" autofocus>
</label>

Remember that using autofocus along with placeholder may not work well, since the placeholder text dissapears when the focus is on that field

Tip: Even though not purely HTML5, wrapping the label and input field in the <label> tag allows the user to even click on the label text to focus on field. If you can’t enclose the input field within the label tag, you can also use the for attribute pointing to the input’s id you had defined like so

<label for="usernamefield">Your Name</label>
<input name="uname" id="usernamefield">

DataList

How about about a Google Suggest like function without Javascript like the one above? (Try this in Opera) -

<label> Select Site:
<input name="site" id="site" type="url" list="site_list" >
<datalist id="site_list">
<option value="http://blogs.vinuthomas.com" label="VT's Tech Blog">
<option value="http://www.mynokiaworld.com" label="My Nokia World">
<option value="http://myandroidworld.in" label="My Android World">
</datalist> </label>

Multiple Selection

This attribute allows the input field to select multiple items from a datalist or in the example below, a file list. HTML4 allowed only one file to be selected using the file input type, here’s how to enable multiple files in HTML5

<input type="file" name="uploadfiles" multiple="multiple" />

Progress and Meter tags

HTML5 brings two ways to show progress or percentage bars without any external javascript or server-side library. You can use the progress tag with the maximum value in the max attribute and the current value in the value attribute

<progress id="prog" max=100 value=33>33%</progress>

In Google Chrome, this renders as:

You can also achieve something similar to this using the meter tag:

<meter min=0 max=100 value=22 optimum=100>22</meter>

This shows up like this on Google Chrome:

Here you can play around with the optimum attribute which changes the rendering a bit. If you set the optimum to be equal to the max value, if the you try rendering anything less than the max, the filled up portion of the bar is colored yellow instead of the usual green.

If you’ve tried the above examples in various browsers, you’ll have noticed that none of them currently implement all of these perfectly. But with the HTML5 draft nearing finalization and various browser developers working on implementing the new features, we should soon see easier web-development cycle. I just hope we don’t have to go through the old-style hacks to get these working like in the old days.

Look out for the next in the HTML5 series where you can learn about form validation on the browser without writing javascript.

HTML5 source code

If you’ve been hearing about the buzz about HTML5 and what it is – here’s a brief post and ways to get to know HTML5 better.

HTML5 is the latest version which newer HTML and XHTML documents should confirm with. This version of HTML aims at simplifying and overcome issues with the older HTML4 presented.

The first thing you’ll notice in HTML5 is that the HTML declaration itself is simplified. To declare a HTML document, all you need to do is to declare the document in this way:

< !DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sample HTML5 Document</title>
</meta></head>
<body>
This is my first HTML5 document
</body>
</html>

You’ll notice that the standard DOCTYPE declaration which is required in HTML4 is missing here. This is the first in many simplifications which eases up development in HTML5.

There’s simplifications on other tags also. For example HTML5 features a <video> tag which makes it easy to embed videos in your page, without any third party plugins, as simple as this:

 <video src="mymovie.webm" controls>
If you are seeing this, your browser may not be fully HTML5 compliant.
</video> 

There’s still debate about what the default format for HTML5 videos should be, Google in the meanwhile has introduced the WebM format which royalty-free high quality video compression codec for use on the web. This format has eventually gotten the support of Mozilla, Apple, Opera and Google. The newer nightly builds of Firefox and Chrome support this format.

If you are looking at exploring the differences between HTML4 and HTML5, this links should be of help – HTML5 differences from HTML4. Another very useful site for developers who are new to HTML5 is Dive into HTML5. The author of this site explains the basics of HTML5, what’s new with it and how to do stuff with it in a simple way.

To get you started on HTML5, here’s a screencast by Addy Osmani which takes you through the basics in under 5 minutes.

Even though the HTML5 specs are still evolving, and browser support for the new features may time sometime to stabilize, the power of HTML5 is the way to go. The first uses of HTML5 is going to be what is powering the mobile web, since most Smartphones these days are running Webkit browsers which are HTML5 compliant.

I’ll be taking a deeper look into HTML5 in the future posts, so look in the HTML5 section here for updates. Here are the links from this article for your reference:

• HTML5 Specification
• HTML5 – differences from HTML4
• Dive into HTML5 – a Guide to development on HTML5
• HTML 5 Validator

Image credit – via Wikipedia