nooshu » HTML Archives http://nooshu.com Kneeling on the shoulders of giants Fri, 20 Jan 2012 11:38:04 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Remote Loading HTML5 Elements with jQuery http://nooshu.com/remote-loading-html5-elements-with-jquery?utm_source=rss&utm_medium=rss&utm_campaign=remote-loading-html5-elements-with-jquery http://nooshu.com/remote-loading-html5-elements-with-jquery#comments Fri, 18 Nov 2011 10:31:28 +0000 Matt http://nooshu.com/?p=1946 I ran into a rather annoying problem a few months ago while developing my travel blog; the problem of course was involving Internet Explorer. I’m used to working with WordPress as I use it all the time, but I wanted to get away from the standard pagination you find on a blog. So I decided to use jQuery 1.6.4 to pull in articles from other pages (blogname.com/page/2, blogname.com/page/3 etc). Now this is all fairly simple using the handy jQuery .load() method; point it to a URL, pull in the page, pick the bits you need and reinsert into the page. Simple! Unfortunately once I got a prototype working in ‘good’ browsers, IE8 and below was having non of it!

After a little head scratching to work out what was failing, I worked out it was because I was using HTML5 elements such as ‘article’, ‘header’ and ‘footer’. There was no problem displaying them on the page, as I’d used Remy Sharps excellent HTML5 Shiv script. It only failed when trying to pull in these ‘new’ elements via Ajax.

Note: Before you read on you’ll be happy to hear that this issue no longer occurs in jQuery 1.7.0. Horray!

If you can’t upgrade, for whatever reason, I hashed together a little work-around for browsers IE8 and below, so read on. I admit the work around isn’t pretty, but it works. I tried for a few hours to get IE8- to recognise the ‘new’ elements after an Ajax request, but to no avail. Eventually I had to wrap the HTML5 tags in a div using conditionals:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--[if lt IE 9]><div id="ieHackContainer"><![endif]-->

<article id="html5Content">
    <header>
        <h2>H2 wrapped in a header element</h2>
    </header>
    <!-- Other HTML here... -->
    <footer>
        <p>This is the footer element</p>
    </footer>
</article>

<!--[if lt IE 9]></div><![endif]-->

The div is added for browsers IE8 and below, you can then use it as a hook to pull in the elements inside the div. I was hoping that wrapping the HTML5 elements in a standard div would be the end of it, I’m afraid not. The .load() method still didn’t work, IE just ignored the elements it didn’t recognise. I used jQuerys much more customisable .ajax() method to fix the issue in IE6, 7 and 8:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//IE8- work around to load HTML5 elements into a page
$("#loadHTML5LinkOld").click(function(){
        $.ajax({
                url: "page_to_load.html",
                cache: false,
                success: function(html){
                        var HTML;
                        //Clear before load
                        $("#html5LoadHolder").empty();
                       
                        //IE: Look for the hacky wrapper before insertion
                        HTML = $(html).filter("div#ieHackContainer").html();
                       
                        //If HTML var is empty assume using newer browsers
                        if(!HTML){
                                HTML = $(html).filter("#html5Content").html();
                        }
                       
                        //Append to page
                        $("#html5LoadHolder").append(HTML);
                }
        });
       
        return false;
});

This method works in all browsers I’ve tested in as I’ve added a fall back (or should that be forward?) for newer browsers. The solution isn’t ideal (I really hate the conditional comments), but older versions of IE aren’t going away any time soon, and it works. Maybe there’s a more obvious solution that I missed? Leave a comment if there is, I’d love to know!

You can see a working example here. The page I’m loading from is here and the JavaScript in full here.

]]> http://nooshu.com/remote-loading-html5-elements-with-jquery/feed 0 The Sieve of Eratosthenes http://nooshu.com/the-sieve-of-eratosthenes?utm_source=rss&utm_medium=rss&utm_campaign=the-sieve-of-eratosthenes http://nooshu.com/the-sieve-of-eratosthenes#comments Thu, 12 May 2011 15:19:05 +0000 Matt http://nooshu.com/?p=1670 I recently read Prime Obsession by John Derbyshire; a book all about prime numbers and one of the worlds greatest Mathematicians: Bernhard Riemann. The books main focus is on the Riemann Hypothesis which states that:

The real part of any non-trivial zero of the Riemann zeta function is 1/2.

I’d love to say that after reading the book I understand the Maths behind it but alas I do not. That’s not surprising though as it’s a problem that has yet to be solved, 159 years after Riemann paper on “On the Number of Primes Less Than a Given Magnitude”. It doesn’t look like it’s going to be solved any time soon either! If you’re interested it’s one of the Clay Mathematics Institutes Millennium Prize Problems in which you can earn yourself US$1,000,000.

While reading Prime Obsession it mentioned an interesting method for finding prime numbers called “Sieve of Eratosthenes” (pronounced air-a-TAWS-the-nEEss). Eratosthenes was a librarian at the great library of Alexandria around 230 B.C.E. It’s quite obvious how the method works once you know it, and easy to see why it’s called a sieve. The method goes like this:

  1. Write a list of numbers in which you wish to identify the primes, say 2 – 100 (exclude 1 as it isn’t required)
  2. Take the first number 2. Leaving 2 intact, remove every second number.
  3. Move onto the next number 3. Leave 3 intact and remove every third number
  4. Take the next number 5. Leave 5 intact and take away every fifth number
  5. Repeat until you get to the end of your list

The end result is the set of prime numbers up to your given number. Essentially all you are doing is removing any number that is divisible by the 1st, 2nd… Nth number. Clever stuff!

As a little side project I decided to implement this method using JavaScript, displaying the result in the browser. You can view the demo here. For fun I created two implementations, one relying heavily on the DOM, the other only using arrays. As you’d expect the DOM method is slow; looping through large tables multiple times doesn’t make for a quick execution time. The second method using a single JavaScript array is much quicker. I’ve added a stats panel to the right hand side of the page so it’s possible to compare results from both methods over different input values.

I’ve added a limit to the number you can enter into the input box (5000), I don’t want anyone blaming me for crashing their browser by entering 10 million! :) Feel free to copy the demo if you want to see what happens at higher values.

Sieve of Eratosthenes using JavaScript

The sieve in action showing prime numbers up to 500.

Thanks goes to John Resig for his very handy Array Remove method.It made removing non-primes from the numbers array very simple indeed.

Prime Obsession is a superb book but a word of warning, it contains a lot of higher level Mathematics, so may not be to everyone’s taste. It certainly made my brain hurt at times; not always what you need on that 8am commute to work! View the demo.

]]> http://nooshu.com/the-sieve-of-eratosthenes/feed 0 Monitoring a value change on an input element http://nooshu.com/monitoring-a-value-change-on-an-input-element?utm_source=rss&utm_medium=rss&utm_campaign=monitoring-a-value-change-on-an-input-element http://nooshu.com/monitoring-a-value-change-on-an-input-element#comments Sat, 15 Jan 2011 15:44:38 +0000 Matt http://nooshu.com/?p=1579 For a recent project I ran into a slight issue with the jQuery change event. It’s not an issue with jQuery, but I was quite surprised when it didn’t work as I expected. I’d set up a selection of form inputs that a user could change; once changed various calculations would be made and the values outputted to a second set of disabled input elements (demo). The inputs are disabled as they are to be calculated rather than entered manually.

I’d attached the jQuery change event to the output elements like so:

1
2
3
$("#outputs").find("input:text").bind("change", function(){
    $(this).highlightFade('red');
});

So the plan was, once an input value had been changed using the jQuery().val() method the change event would fire and it would quickly colour in and out the element (using highlightFade) to notify the user that it’s value had changed. Unfortunately the change event wasn’t firing, so I had to find another way to monitor the output elements.

What I ended up doing was using an array to hold the previous values of the input elements then checking to see if they had changed in the calculation. If changed then fire the event:

1
2
3
4
5
6
7
8
9
10
11
12
13
//Array to store the old values
var oldValues = [];        
   
//Push these values into an array which is checked on calculation
$("#valueOutput input:text").each(function(i){
   var thisValue = $(this).val();
   //If the old value is different to the new, change the colour
   if(oldValues[i] !== thisValue){
       $(this).highlightFade('red');
   }
   //Push the new value into the array
   oldValues[i] = thisValue;
});

It’s quite hard to explain exactly what’s happening so I’ve put together a small demo. Try changing one of the top input fields then tab (or click out) of the input element to recalculate. Is there an easier (or better) way to do this? Comment below.

]]> http://nooshu.com/monitoring-a-value-change-on-an-input-element/feed 0 Experimenting with Webkit form speech input http://nooshu.com/experimenting-with-webkit-form-speech-input?utm_source=rss&utm_medium=rss&utm_campaign=experimenting-with-webkit-form-speech-input http://nooshu.com/experimenting-with-webkit-form-speech-input#comments Wed, 22 Dec 2010 20:46:06 +0000 Matt http://nooshu.com/?p=1563 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.

Demo of the new HTML5 Speech API

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.

]]> http://nooshu.com/experimenting-with-webkit-form-speech-input/feed 15 Three.js images using the HTML5 File API http://nooshu.com/three-js-images-using-the-html5-file-api?utm_source=rss&utm_medium=rss&utm_campaign=three-js-images-using-the-html5-file-api http://nooshu.com/three-js-images-using-the-html5-file-api#comments Tue, 14 Dec 2010 20:51:59 +0000 Matt http://nooshu.com/?p=1544 Anyone who’s read my latest blog posts will know that I’m a big fan of Mr doobs Three.js JavaScript 3D engine, so I won’t bang on about it any more than I have to. For my latest experiment I decided to mix the HTML5 File API, Three.js and a few images (demo here).

mr doob Three.js with the File API

Mr Doob and a little kitten sitting in a 3D tree.

The File API allows a user to upload a file (an image in this experiment) to a web application simply by dragging it onto a designated “droparea”. Once dropped, you can manipulate the data any way you like. The API is able to handle multiple files natively, so just select all the files and drop them onto the area. No need for Flash uploaders or multiple browse boxes. Of course not all browsers support it (IE) and there are a few inconsistencies in the specification; but they will work themselves out over time.

So what does the experiment actually do? Well it allows a user to drag an image onto their browser window which is then “uploaded”; the data is then passed to a canvas element and then this data is passed to Three.js to be plotted in 3D space. The X and Z-axis is plotted in the usual manner to represent the default 2D image using particles; the fun bit comes when you add the Y-axis. This is calculated by taking an average of the RGB values (greyscale) and plotting it accordingly. When using an image of a human face it’s amazing how accurate the 3D plot looks.

Due to the amount of data involved it is recommended that you use small thumbnail images when you try the demo, as larger images equal a larger number of particles. This is an initial version so I’m going to work on a way of dealing with larger images. This will probably mean ignoring a certain number of pixels when looping through the image data. Looking forward, since it can be done with a static image I see no reason why it can’t be done with a video, but that’s a project for another day!

Update: I’ve updated the demo slightly; as Mr.doob pointed out people may have tried to drag directly onto the render area which didn’t work. So now it does :)

]]> http://nooshu.com/three-js-images-using-the-html5-file-api/feed 2 Periodic Mashup http://nooshu.com/periodic-mashup?utm_source=rss&utm_medium=rss&utm_campaign=periodic-mashup http://nooshu.com/periodic-mashup#comments Wed, 01 Dec 2010 09:22:58 +0000 Matt http://nooshu.com/?p=1497 Every so often I stop work and stick my head above the parapet and see what the rest of the Web Developer community is doing, and every time I do I’m amazed by some of the ideas and applications that are being built. They aren’t always useful but who cares; the technology is available so why not try it and push the boundaries a little.

A visual breakdown of the new Girl Talk album.

Want to see what samples were used in the new Girl Talk album?

The first application I really like is Mashupbreakdown by developer Benjamin Rahn. Mashupbreakdown is a visual representation of the samples used in the latest album by Girl Talk called “All Day”. That in itself is very cool, but where does it get the sample information from? Well that’s the really clever part; it gets it from Wikipedia.

Wikipedia has a page for the “All Day” album that contains all the sample information used in each track. Mashupbreakdown scrapes this page and and visualises it. Since Wikipedia can be edited by anyone, if you spot a mistake / new sample you can easily update the page information and the application with change accordingly!

At the moment it only shows one album but there’s no reason the application can’t be adapted to handle more albums. Benjamin has a post on his blog appealing for more breakdowns so I’ll be checking back with the site now and then to see if any other breakdowns have appeared. Great work Benjamin.

The periodic table of HTML elements

When chemistry and HTML combine you get the periodic table of HTML elements!

The second application that really caught by eye is the Periodic Table of Elements by developer Josh Duck. When I find a site I like, I immediately do a “view source” (don’t all Web Develepers?) to see how it’s been built. The Periodic Table of Elements takes any URL you pass it and tells you what HTML elements were used on the page. It’s basically a prettified / simplified version of view source! The application may not be that useful but kudos to Josh for taking the time to build it. Definitely one of those ideas that I wish I’d thought of!

]]> http://nooshu.com/periodic-mashup/feed 0 SVN post-commit hook on Dreamhost http://nooshu.com/svn-post-commit-hook-on-dreamhost?utm_source=rss&utm_medium=rss&utm_campaign=svn-post-commit-hook-on-dreamhost http://nooshu.com/svn-post-commit-hook-on-dreamhost#comments Sun, 24 Oct 2010 19:37:04 +0000 Matt http://nooshu.com/?p=1442 Over the past couple of days I decided to start using the SVN post-commit hook for deploying sites to my staging servers. Once you get it working it will save you a massive amount of time. Make changes on your local server, then, when you’re ready, commit your changes to the repository and the server will auto-update the staging site. Nice! For instructions on how to set this up on your Dreamhost server take a look here.

Unfortunately a slight over-site on my part didn’t make deployment easy. I followed the instructions to the letter (more than once!) but received the same error on commit:

1
post-commit hook failed (exit code 255) with no output.

At first I thought this was a permissions issue but that turned out not to be the case. The solution in the end was because I was saving the do_update.cgi script in Windows format in Notepad++! Doh! Windows and UNIX new lines just don’t mix!

To save a file in UNIX compatibility mode in Notepad++ click “Edit” then “EOL Conversion”. Make sure UNIX Format is greyed out (why greyed out? no idea) when you save your CGI script. Upload to the server and you’re done. Won’t be forgetting to do that again any time soon!

]]> http://nooshu.com/svn-post-commit-hook-on-dreamhost/feed 2 Adding a custom header image to your WordPress theme http://nooshu.com/adding-a-custom-header-image-to-your-wordpress-theme?utm_source=rss&utm_medium=rss&utm_campaign=adding-a-custom-header-image-to-your-wordpress-theme http://nooshu.com/adding-a-custom-header-image-to-your-wordpress-theme#comments Thu, 23 Sep 2010 07:54:45 +0000 Matt http://nooshu.com/?p=1379 Every new iteration of WordPress (version 3.0.1 at the time of writing) brings a host of new features and bug fixes. One feature that I completely missed in 3.0 was the new custom header functionality. Before 3.0 it would be a case of hacking together your own solution using custom fields or using a separate plug-in. Thankfully the WordPress team have added this functionality directly to the core.

It just so happens that I’ve had a request for a customisable header image on an future project, so decided to have a play and see how difficult it is to implement. Well it isn’t difficult at all, very simple in fact.

First you will need to edit your functions.php located in your theme directory. Go ahead and create one if it isn’t in the directory. Now copy and paste the code below into the file. I’ve commented the code but it’s all quite self explanatory. Change the height and width of the image and change the directories where needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
//Check see if the customisetheme_setup exists
if ( !function_exists('customisetheme_setup') ):
    //Any theme customisations contained in this function
    function customisetheme_setup() {
        //Define default header image
        define( 'HEADER_IMAGE', '%s/header/default.jpg' );
       
        //Define the width and height of our header image
        define( 'HEADER_IMAGE_WIDTH', apply_filters( 'customisetheme_header_image_width', 960 ) );
        define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'customisetheme_header_image_height', 220 ) );
       
        //Turn off text inside the header image
        define( 'NO_HEADER_TEXT', true );
       
        //Don't forget this, it adds the functionality to the admin menu
        add_custom_image_header( '', 'customisetheme_admin_header_style' );
       
        //Set some custom header images, add as many as you like
        //%s is a placeholder for your theme directory
        $customHeaders = array (
                //Image 1
                'perfectbeach' => array (
                'url' => '%s/header/default.jpg',
                'thumbnail_url' => '%s/header/thumbnails/pb-thumbnail.jpg',
                'description' => __( 'Perfect Beach', 'customisetheme' )
            ),
                //Image 2
                'tiger' => array (
                'url' => '%s/header/tiger.jpg',
                'thumbnail_url' => '%s/header/thumbnails/tiger-thumbnail.jpg',
                'description' => __( 'Tiger', 'customisetheme' )
            ),
                //Image 3
                'lunar' => array (
                'url' => '%s/header/lunar.jpg',
                'thumbnail_url' => '%s/header/thumbnails/lunar-thumbnail.jpg',
                'description' => __( 'Lunar', 'customisetheme' )
            )
        );
        //Register the images with Wordpress
        register_default_headers($customHeaders);
    }
endif;

if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
    //Function fired and inline styles added to the admin panel
    //Customise as required
    function customisetheme_admin_header_style() {
    ?>
        <style type="text/css">
            #wpbody-content #headimg {
                height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
                width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
                border: 1px solid #333;
            }
        </style>
    <?php
    }
endif;

//Execute our custom theme functionality
add_action( 'after_setup_theme', 'customisetheme_setup' );
?>

By adding the code above you will now see a new option under “Appearance” in the admin panel called “Header”. From there you should be able to see all the images and options we just set in the functions.php file. The only thing left to do now is add the header image to the theme.

Where you place the following code will be depend on your theme setup; I’ve decided to place it in the header.php file as I want the image to appear on every page. You may only want the image to appear on specific templates e.g. pages, archive, category (you could also use WordPress conditional tags to do this).

1
2
3
4
5
6
<div id="header">
    <!-- other header code here.... -->
   
    <!-- This line adds the header to the theme -->
    <img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
</div>

And there you have it, one header image that you can customise via the WordPress admin panel. An ID is attached to the image for CSS styling where needed.

The example above is quite a simplified version of the header image functionality. It is possible to place text over the image and even have a different image per blog post by using the custom thumbnail functionality, but these are beyond the scope of this blog post. Copy & paste and enjoy!

]]> http://nooshu.com/adding-a-custom-header-image-to-your-wordpress-theme/feed 11 Aloha Editor – Content editing the HTML5 way http://nooshu.com/aloha-editor-content-editing-the-html5-way?utm_source=rss&utm_medium=rss&utm_campaign=aloha-editor-content-editing-the-html5-way http://nooshu.com/aloha-editor-content-editing-the-html5-way#comments Tue, 17 Aug 2010 20:25:05 +0000 Matt http://nooshu.com/?p=1358 The number of times I’ve built a website based on a CMS only to have the client utter the words “Oh I’m confused, it’d be so much quicker if you made the changes”. Right, so the CMS was a bit of a waste of time then! But fingers crossed thanks to Aloha Editor that may be a thing of the past. Often the problem clients have is actually finding the content that needs to be edited in the CMS; Aloha to the rescue!

What Aloha actually does is make the content editable right on the page; no need to jump into the CMS, find the page, make the changes then preview the result. Just click on the text you wish to edit and type away. Done! It’s hard to believe it actually works until you try it. Why not give it a go on their demo page. It incorporates a few HTML5 technologies which could cause issues with older IE versions, but the demo page seems to work (with a few quirks).

An example of Aloha Editor in action

Quickly and easily edit the demo webpage.

The core has been written to be very small and streamlined, with additional functionality being added by the way of user contributed plug-ins. There’s already an extensive API for developers to play with so I’m sure many of the missing features will be plugged very soon.

There are alternatives about such as TinyMCE and CKEditor, but they’re integrated directly into a CMS’ administration pages rather than as an inline editor like Aloha. Now before you get too excited there are a few cons:

  • It isn’t as simple as just dropping the scripts into a page, it needs to be integrated into a backend system for the changes to be saved.
  • Still in early development so could be quite buggy.
  • Doesn’t work with Opera Browser at the moment but this is being worked on.
  • Some features aren’t available yet, like image / media insertion. But I’m sure these will be developed as it matures.

So there are still a few issues to iron out but it all looks very promising! There were even murmurs on Twitter today about a WordPress plug-in and a Drupal v7 module (not 6 though I presume) in development. So it won’t be long before we’ll be able to try it out on a live site; hopefully it’s also simple enough for clients to use too!

]]> http://nooshu.com/aloha-editor-content-editing-the-html5-way/feed 1 Nooshu.com now with added HTML5 goodness http://nooshu.com/nooshu-com-now-with-added-html5-goodness?utm_source=rss&utm_medium=rss&utm_campaign=nooshu-com-now-with-added-html5-goodness http://nooshu.com/nooshu-com-now-with-added-html5-goodness#comments Sat, 17 Jul 2010 14:05:50 +0000 Matt http://nooshu.com/?p=1279 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.

]]> http://nooshu.com/nooshu-com-now-with-added-html5-goodness/feed 0