It’s been a few weeks now since I attended a Web Gaming event hosted by Mozilla and I’ve not yet had chance to write about one of the coolest features that was demonstrated: Speech input in forms. Now I must admit, I had no idea this was even possible; so it was quite a surprise when I saw the demonstration. With a few extra attributes added to a standard input box you can enable speech input:
1
| <input name="speech" id="speech" type="text" x-webkit-speech speech error onwebkitspeechchange="dosomething.coolhere(true);" /> |
It really is that simple! You may notice the “x-webkit-speech” attribute so will have guessed it currently only works in Webkit; and as far as I’m aware only in very recent versions of Google Chrome (note: “The Input Speech API will now be available by default on Chrome’s dev-channel”). The Speech API seems very new and is still a draft, so it will be a while before it’s fully adopted by other browser vendors.
A quick demonstration of the Speech API in action.
To demonstrate the speech input I’ve put together a very simple festive demo that queries the Flickr API looking for images related to a value entered. So if you have a microphone and the dev channel of Chrome, why not give it a try. Chrome records the input of the microphone before sending it off to an external server to be processed, where a value is then sent back to the browser. At first I thought it was all processed inside the browser but I guess that’s a little to much to expect! It isn’t 100% accurate and the demo accepts Googles first guess so you may get a few strange results. The server returns multiple guesses which a user can select from, but this hasn’t been added (to my demo at least).
Since the API is very new it took a little trial and error to work out how to detect if the Speech API was available in the browser; but with a little help from Paul Irish I managed to crack it:
1
2
3
4
5
| function speechcapable(){
var elem = document.createElement('input');
var support = 'onwebkitspeechchange' in elem || 'speech' in elem;
return support;
} |
This function will return true if the API is available. It’s worth noting that since it’s very new this function is likely to break in the future as the properties always seem to be changing. It works at the moment, so get thinking about what this brilliant new API can be used for! It’s a big plus for accessibility if used correctly and I can also see some cool applications in web gaming too. View the demo.
Mr Doob has created a superb JavaScript 3D Engine in three.js. Screenshots from my 'Bowl' demo.
I’ve been watching the development of three.js by Mr Doob for a couple of months and have been desperate to experiment with it. With Firefox 4 well into the beta stage I decided to bite the bullet and do a little Audio Data visualisation in 3D!
I’ve dabbled with audio visualisation and the HTML5 Audio Data API in the past, so I’m pleased I’ve had a chance to use it again and see what’s new. Note: My previous audio visualisations using canvas no longer work due to specification changes in the API. A pitfall of using an API that’s still in the draft stages I guess.
I’ve put together 5 simple demo’s all based around the same theme showing some of the options available in three.js. My favourite is “bowl”, pretty colours galore!
- Circle: Simple circle, zoom in / out using the mouse wheel.
- Cubes: Same as circle only using the cube primitive.
- Cylinder: Using the cylinder primitive with a floating camera.
- Sinewave: Rotated sinewave (looks a little like a chandelier).
- Bowl: A combination of the above demos to create an interesting 3D bowl effect.
Please note these demos will only work in Firefox 4. The Audio Data API is still a draft specification and Mozilla is the only browser vendor to have added it to date. I’m looking forward to it being added to Chrome (Webkit), with its superb V8 JavaScript engine. The demo’s really are just the tip of the iceberg for both three.js and the Audio Data API. It’s certainly an area of the HTML5 specification to keep your eye on.
The music track used in the visualisation is called “Sad Robot” by a group called “Pornophonique”. Very catchy tune that you can download from Jamendo.
Update: It looks like enabling the Google Page Speed Apache module seems to have broken the demos. I’ve disabled it now so it should hopefully fix it (fingers crossed!).
No you aren’t dreaming; winner and Internet Explorer (IE) have been mentioned in the same sentence. I know it’s hard to believe, but the browser that has been the bane of every Web Developer’s life since 2001 has finally grown up and accepted web standards. According to the W3C HTML5 Test Suite released last week, IE9 p6 is the most compliant browser. Now before the huge (geek) party and dancing on the grave of IE6 starts, there are a couple of major points to note:
- IE9 is still only a preview release, not a complete browser.
- When released IE9 will only work on Vista and Windows 7.
Point 2 is unfortunately a big party pooper. Windows XP is the operating system that refuses to die, 48% of users who visited W3schools in October were on XP. That’s a large percentage of people who are excluded from installing IE9. We can always hope that these users are using a standards compliant browser from another company (Firefox, Chrome, Safari, Opera) but that may be a little optimistic.
So, even though IE9 is a huge step forward by Microsoft, it doesn’t look like older versions of IE are going to die out any time soon. Luckily the UK government are forward thinkers… wait, no, that’s a lie. So the browser that’s been crippling the web for the best part of a decade looks like it may be around for another 10 years. I’ll put the party poppers back in the draw then.
So I finally pulled my finger out and took the HTML5 plunge over the past day or so; the Nooshu WordPress theme now has a sprinkling of HTML5. Mmmm I have that warm fuzzy feeling of completeness! In all honesty it’s been an easy way to learn about the new HTML5 specifications (although they aren’t complete and won’t become a W3C recommendation until 2022… no that isn’t a typo!).
HTML5 has added a host of new tags which have much more semantic meaning. So instead of using ‘divs’ to section off areas of your page layout, you can now use:
1
2
3
4
5
6
| <!-- Some of the new HTML5 Tags -->
<header></header>
<footer></footer>
<article></article>
<section></section>
<nav></nav> |
It’s certainly a welcome addition to the modern web. My favourite part of HTML5 has to be the doctype (other than the canvas element):
1
2
3
4
5
| <!-- No more -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Much better! -->
<!DOCTYPE html> |
Look how simple it is! No more copy / paste from a previous project for this doctype.
My main concern when converting the theme to HTML5 was how it would work in IE; as IE8 supports parts of HTML5 but IE6 and IE7 not at all. When IE comes across a tag it doesn’t recognise it just ignores it. Since the tags aren’t recognised you won’t be able to style your lovely new HTML5 template in IE6 & IE7. Lucky you can patch this missing functionality using JavaScript. Remy Sharp has created a script called html5shim, that adds the missing tags to IE. Just add the following code to your header and you will now be able to style your HTML5 tags:
1
2
3
| <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> |
The script must be in the header and must fire before the DOM is created. The script simply creates all the new HTML5 elements using the document method ‘createElement’, you don’t even need to attach the created elements to the DOM! Now IE will recognise the tags and you can get on with your page styling. Yay!
Those who use WordPress 3.0 may have noticed that the default Kubric theme is no more and it’s been replaced with a new theme called twenty ten. The theme uses the HTML5 doctype but it doesn’t use any of the new tags. I guess because of the IE issues. Maybe this will be changed in future releases.
The Nooshu theme is still a work in progress, and I’ll modify areas as I learn more about the new HTML5 features. Here are a selection of links that I found incredibly useful while working on the theme:
- Dive into HTML5: Read through this article and you will be well on your way to learning HTML5. It delves into the history of HTML and progresses forward right up to implementing the new specifications.
- HTML5 Doctor: Looking for HTML5 related news or need some clarification of a new tag? Look no further than HTML5 Doctor. Lots of articles available for you to read and there’s even the option to ask a question if you don’t find the answers you are looking for.
- HTML 5 Outliner: So you’ve created your shiny new HTML5 template; why not check it with the outliner to see if it makes sense to a user / search engine.
- W3C Markup Validator: It’s been a while since I’ve used a validator since I have one built into Firefox, but the W3C validator was very handy for pointing out attributes and tags that are no longer supported in the specifications. It also gives you a quick benchmark to aim at.
If you have any other useful HTML5 tips and links let me know below.
I’ve been using Google Chrome as my default browser for quite a few months, I still use Firefox for Web Development but for general browsing you really can’t beat the speed of Chrome. One of my favourite Chrome features is the ‘Create application shortcuts…’ function. Creating an application shortcut essentially adds an icon to your desktop, Chrome will then run the web application like it is a free-standing desktop application (you still need to be connected to the internet unless it uses some form of offline storage).
If you are a Gmail user I highly recommend creating an application shortcut to see this function in action. One thing you will notice when you create the shortcut with Gmail is it uses a high resolution icon. If you create a shortcut using a standard website, by default the favicon.ico is used. As the favicon is limited to 16 by 16 resolution it will look very ugly blown up on your desktop.
You can really see the difference between the Gmail icon (left) and the standard favicons.
The image above really illustrates the difference between a 16 x 16 icon and a high resolution version. Now of course you could just change the icon in the Windows properties…. but that’s boring. Why not offer your users a high resolution image along with the standard favicon? It really is very simple:
1
2
| <link rel="icon" href="/icon_32x32.png" sizes="32x32" />
<link rel="icon" href="/icon_48x48.png" sizes="48x48" /> |
Simply place this code in your head tag of your web application and link to the corresponding icons. Now when your user creates an application shortcut they will have a nice high resolution icon on their desktop.
You can really see the difference when you add a high resolution icon
I’ve added a high resolution icon for my blog administration, now if only F1 live timings would do the same. For those of you who want to add a high resolution icon to your WordPress blog add the following code to your functions.php:
1
2
3
4
5
6
| function wp_hi_res_admin_icons() {
echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_32.png" sizes="32x32" />'."\n";
echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_48.png" sizes="48x48" />'."\n";
}
add_action('login_head', 'wp_hi_res_admin_icons');
add_action('admin_head', 'wp_hi_res_admin_icons'); |
This will add the icon code to your administrator login panel and dashboard; or paste the raw HTML into your header.php so all users can see the icons.
