Category Archives: Uncategorized

I’ve moved this blog!

Soup guys

As I rarely update this blog (reason being is I believe in quality posts and actually helping people and not blogging about self indulgent frivolities (I’m looking at you tumblr)) I’ve decided to dive into wordpress, build my own theme, set up my own webserver and take a total DIY approach to my website.

Anyway, I wont be updating this blog anymore, but i WILL be continuing it with plenty more tutorials on Web Design, Interactive Design and Electronics over at my own website…

spencerlloyddixon.com

I’ll be setting up a mail server shortly so I can have an email and communicate with anyone who wants help in a lot more of a personal fashion. I hope as always my posts help you in your projects and hope to hear from some of you soon. As always feel free to add me on Facebook, Twitter, Vimeo and all the other usual channels.

if(stop == true){ hammertime(); }

boolean stop = true;
boolean touchingthis;

void setup(){
size(100,100);
background(255);
frameRate(30);
}

void draw(){
if(stop == true){
hammertime();
}
else{
touchingthis = true;
println(“Touching this allowed”);
}
noLoop();
}

void hammertime(){
touchingthis = false;
println(“Touching this denied”);
}

5 Days of HTML5 (Day 5: Adapting Your Website for HTML5 Browser Support)

It’s day 5. The final day in our series and I wanted to cover something useful and a bit fancy within the realm of HTML5/CSS3. So today’s tutorial is on an issue facing most HTML5/CSS3 developers, the issue of cross browser compatibility.

What is Cross Browser Compatibility?

Cross browser compatibility refers to your site being able to be displayed correctly and consistently across multiple browsers. With there being four or five major browsers out there that are widely used, it’s important that we cater for everyone’s needs.

With HTML5 and CSS3 being relatively new, us developers currently face the issue of our technologies not being fully supported across all browsers. Whilst rounded corners work great in Firefox, Safari encounters some issues rendering the corners when the position is set to relative.

So how can we tackle this issue? We used to be able to run some nifty javascript to determine what browser our user is running and serve up alternative stylesheets. Now we have so many different browsers, versions of browsers and features that can be disabled, it’s just not practical to determine how we render a site based on browser alone.

Enter Modernizr. Modernizr is a javascript library able to detect not just what browser a user is running, but what features that browser can support, and then amend the HTML tag of your website to include classes dependent on supported features.

So how does it work?

Well first lets heard over to modernizr.com and download the latest version. Copy the .js file to the root of your website and add it into the <head> section of our HTML page with the following:

<script src="js/modernizr-1.0.min.js"></script>
Next we need to set up our HTML tag for Modernizr, amend the <html> tag at the beginning of the page to the following
<htmlclass="no-js">
That’s it! Modernizr is set up and we can see that when we run our page in a browser and view source, Modernizr populates our HTML tag with multiple classes depending on what features of HTML5/CSS3 our browser can handle. So we may see that Modernizr has replaced our HTML class with something like this:
<htmlclass="js canvas canvastext geolocation rgba hsla no-multiplebgs>

Here we can see that rgba is indeed supported, but multiple backgrounds are not. So no problem there for our site, but what if Modernizr returned a class value of ‘no-rgba’? Well because we are dynamically selecting class, we can write multiple classes in our style sheet to cover all bases and the ones that aren’t returned will simple be ignored. We could write the following to cover our bases for RGBA:

.rgba {
background:rgba(106,0,106,0.2);
}

.no-rgba{
background:url('../images/alt_background.png')
}

Here we present two classes, one utilising RGBA, and one using a transparent .png image to replicate the transparency with the alpha channel.

Again, here’s another fantastic video from the guys at SitePoint on the use of modernizr to serve adaptable HTML5 sites that pick and mix their design based on compatibility, making sure that your site never fails to deliver.

Well that’s it for my mini series on HTML5, I hope you got some use from it if even for a starting point in your own research. I’ve only touched upon the basics of HTML5/CSS3 but it’s evident that the revisions in this markup have been designed with the modern world of the web in mind. With the W3C moving towards native browser support we can rely less and less on external libraries and deliver powerful websites efficiently and with minimal compatibility issues…as soon as the major browsers catch up and support it…

Feel free to comment your thoughts and link me to your work! I’ll have my website and email back up within the next couple of weeks, i’ll update another blog post when its on and maybe explain some of the features powering it ūüėÄ

 

5 Days of HTML5 (Day 4: Why Canvas is Awesome)

Today we’re going to cover the <canvas> element. Something which has generated quite a buzz in the web design community, and today we’ll cover exactly why and how you can use Processing to create awesome interactive backgrounds and features for your site.

Yesterday I finally finished my CSS3 for my site and it’s looking great. I went box shadow crazy and added some to the twitter box and articles to make everything pop a bit more. Here’s my finished CSS3 and how the page looks;

The drop shadows in CSS3 are a great way to give that extra bit of pop and professionalism to a website. You’ll also notice that I’ve removed the menu and footer from the website, this is because I like to put these elements in a php include, so they’re easier to manipulate if I ever want to make changes to them across multiple pages in one go. Php includes can save your life in web design, but thats another tutorial. I’ll also be migrating my <canvas> tags to a php include when this tutorials finished for a quick way to switch up sketches.

What is Processing?

Processing is a Programming language based on Java which has gained a lot of attention from interactive designers. It’s great for visual design, and has a plethora of libraries available ranging from OpenGL to Arduino support. Processing programs are called ‘sketches’.

One of the most interesting developments of Processing is its sister project ‘Processing.js’; an open source javascript port of the program allowing developers to integrate their sketches with the web using the <canvas> element (see where this is going?).

In simple terms, we can now add our sketches into our website, whether this be in a nested window or running as a full screen background element by using the z-index to create layers to our website.

To get started, head on over to Processingjs.org and download the starter kit. You only really need one file, the processing-1.2.1.js file (although I’ve included both processing-1.2.1.js and processing-1.2.1.min.js for good measure).

Drop these into the root of your website directory and head on back to dreamweaver and drop this in adjusting your paths accordingly;

<script src=”processing-1.2.1.js”></script>¬† <!–This line references our .js file in our root directory–>
<canvas id=”canvas” data-processing-sources=”processing/balls/balls”></canvas> <!–This line id’s our canvas element and references the path to our processing sketch–>

A quick explanation of where I put this and why. You can put your canvas elements pretty much anywhere. I chose the end of my <head> tag because I wanted to z-index the canvas element to a background, which would mean I need a container for the content on my page to move forward a few layers, and what better container than the already set up <body> tag. It already contains all my content separate from anything else. But we’ll get back to z-indexing our sketch in a bit.

First check everythings working;

AWESOME. You’re sketch might not be coming up full screen yet, and you might have a background colour, so let’s fix that quick before we go any further.

Open up your processing sketch and find the size line underneath void setup();

Set your size as above; screen.width,screen.height will expand your sketch to fill your screen. Width has to come first, then height. Next you’ll want to set your background colour in RGBA to 0,0,0,0. Basically black with no opacity.

Lastly, you’ll want to copy the first comment:

/* @pjs transparent=true; */

This should be enough to give you a transparent processing sketch that we can layer between our background and content. (Worth noting that if you’ve not separated your background, it’s ok, the background property naturally sits behind your processing sketch).

But we’ve taken over the entire page, time to z-index this mother. I dropped this in my CSS to set my canvas element as the very first layer:

#canvas {
    position:fixed;
    top:0;
    left:0;
    z-index:0;
    }

And then set the z-index of my <body> tag to 2. The position:fixed; and top:0; and left:0; properties are also important in addressing a common issue of the sketch pushing all the content down. Fixed position will let the content lay nicely over the sketch whilst keeping it…well…fixed.

z-index in place, check. Fixed position property in place, check. We should have something like this now;

*Sidenote: Yeah there’s a couple of inconsistencies in the styling on the screenshots due to me tidying my CSS at the same time. But that’s not important.

I changed the sketch on this one, the drawing was a bit crude. Here we have some lovely circles that chase your mouse around the screen. Wonderful.

The sketch shown generated a new circle every second or so, varying in size and position depending on your mouse position. Even at low opacity, they’d layer up until white, making it difficult to see the text and menu.

I played around with a few and eventually settled on using the main sketch that sits in the header of the processing website. I modified it to have fewer orbs and match the website colours.

I thought this sketch was nice. Orbs can follow the mouse cursor and be dragged and interact with other orbs by connecting themselves with a line, but left to their own devices the orbs will randomly roam the site behind the content. A harmonic balance between user and user free interaction.

So there you go. Simple steps to how to create interactive website backgrounds with Processing, Javascript and the canvas element.

One final note, if you’re no good with processing, you can head to the processing site and grab some example sketches to modify and play around with. You can also get some cool additional examples from here: http://ejohn.org/apps/processing.js/examples/topics/

Tomorrow’s our last day, I don’t know what I’m going to cover yet, but it’ll be something special to conclude my HTML5/CSS3 series. If any of this has helped you, please leave a comment and link me to your work, i’d love to see it.

ūüėÄ

5 Days of HTML5 (Day 3: HTML5ing Up Our Site)

Day 3 and I’ve finished most of the CSS to the site. Heres how its looking so far…

Believe it or not, the only new things here are the new twitter widget, and a nice new background from a photoshoot I had the other day. The rest; rounded corners and drop shadows on the buttons and images are all done in CSS3.

Lets have a quick look at how thats done by looking at how my stylesheet treats an image when its enclosed within an <article> tag:

article img {
        position:static;
        border:1px solid #FFFFFF;
        box-shadow: 7px 7px 5px #111;
        -moz-box-shadow: 7px 7px 5px #111;
        -webkit-box-shadow: 7px 7px 5px #111;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        }

One thing worth noting is the duplication of border-radius and box-shadow, one instance as a general declaration, one with a -moz- prefix for Mozilla browsers and one with a -webkit- prefix for Webkit browsers like Chrome and Safari.

Unfortunately at this stage this is necessary to cover all bases. Maybe later we’ll see the decay of prefixes and be able to use just one line to achieve CSS3 stylings in all browsers.

But all in all its pretty simple, I’m addressing the article element by starting with ‘article’, then all ‘img’s in that article, then I open my CSS and place in the rules. If you’re using Dreamweaver CS5 or higher you can implement these nice tricks right away.

Because of these CSS3 features we can do away with excessive amounts of graphics on a page and start moving towards native support in favour of good design.

Lets take a look at that purple background of my article blocks:

article {
    background-image:url(../images/blockbackground.png);
    border:1px solid #444444;
    border-radius:40px;
    -moz-border-radius:40px;
    -webkit-border-radius:40px;
    padding: 40px;
    position:relative;
    }

In CSS2, to achieve that transparent look we had to use transparent png’s such as the ‘../images/blockbackground.png’ seen here. In CSS3 we can do away with this thanks to the introduction of the RGBA property.

We can set a background colour;

and drop down the opacity with the alpha property to match our previous background colour;

All done by replacing this:

background-image:url(../images/blockbackground.png);

With this:

background: rgba(106,0,106,0.2);

In all, shorter CSS, and less images to load makes for a more fluid and organised site. These are just a couple of the new features of CSS3 and a basic introduction to how to get started with box shadows, rgba, and rounded corners in CSS3.

Another nice short post today, but I’m going to finish off my CSS and work on something epic. Tomorrow we’ll talk about what everyone’s been ranting and raving about; the canvas element, and how we can integrate it to our site for interactivity and native drawing.

5 Days of HTML5 (Day 2: CSS3 and HTML5; a Match Made in Heaven)

Ready? Let’s go. For the sake of example this week, you might have noticed my main website is down. Well i’ll be rebuilding it in HTML5 at the same time as this tutorial and using that as the basis for my examples. I’ll then add a couple of tweaks and relaunch it in a week or two with a permanent page for this tutorial series.

For anyone who hasn’t seen my website, heres the latest design;

Pretty simple, the home page features a header at the top, with a logo at the left, and a navigation bar at the right. We then have a main news block with an image, and two other news blocks also with images which aren’t as wide. The remaining space is filled up with a twitter feed which in HTML5 is a nice use of the new <aside> tag.

In CSS2 and lower, we used to use Classes and ID’s, which only get sweeter in CSS3. Multiple objects could belong to a class, for example, in my website, I want to apply a border to both images, and article boxes. We can do with with one ‘border’ class. But these quickly get confusing when we want objects to inherit certain attributes of a class, we’d often end up with far more classes and ID tags than we really need.

In CSS3, we can use selectors to address elements within a tag, for example, I could select all paragraph text and header text in an article, and style it by using the following:

article h1,h2,h3,p {
text-transform:uppercase;
}

Notice how we can also group selectors in CSS3, allowing us to be much more efficient in the way we write stylesheets. Say goodbye to giant 2000 line stylesheets. I think this guy does a great job of explaining the selector stuff in CSS3

So back to our code. I spent last night finishing off my HTML and getting started on my CSS sheet. Heres a few screenshots and my code so far, which I’ve ran through the W3C validator and passed with no errors!

Code:

<!DOCTYPE html>
<html lang=”en”>
<head>
¬†¬† ¬†<!–METADATA–>
¬†¬† ¬†<meta charset=”utf-8″ />
¬†¬†¬† <meta name=”description” content=”The Website of Musician, Interactive Designer and Web Developer Spencer Dixon” />
¬†¬†¬† <meta name=”keywords” content=”spencer dixon,web developer,max msp,augmented reality,prog rock” />

<title>Spencer Lloyd Dixon – Music, Blog, Design, Development</title>

¬†¬† ¬†<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
¬†¬†¬† <link rel=”shortcut icon” href=”images/favicon.ico” /> ¬†

¬†¬†¬† <!–FIX IE SUPPORT FOR HTML5–>
¬†¬† ¬†<!–[if IE]>
¬†¬† ¬†<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
¬†¬† ¬†<![endif]–>

</head>

<body>
    <header>
¬†¬†¬† <img src=”images/logo.png” alt=”SpencerLloydDixon.co.uk Website Version 6.1″ id=”logo”>
        <nav>
¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬† ¬†<ul id=”menu”>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<li><a href=”/home.shtml”>Home</a></li>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<li><a href=”/aboutme.shtml”>About Me</a></li>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<li><a href=”http://www.spencerdixon.wordpress.com”>Blog</a></li&gt;
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<li><a href=”/juicebox.shtml”>Juicebox 6</a></li>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<li><a href=”/portfolio.shtml”>Articles</a></li>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<li><a href=”/links.shtml”>Links</a></li>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<li><a href=”/contact.shtml”>Contact</a></li>
            </ul>
          </nav>
    </header>

    <section>
          <article>
¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <img src=”images/juicebox/promo1.png” alt=”Juicebox Promotional Image”>
            <hgroup>
¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬† ¬†<h1>The Juicebox 6 is Here…</h1>
                <h2>a MIDI controller with style</h2>  
            </hgroup>         
            <p>Built for the front of the stage the Juicebox 6 is a plug and play MIDI controller featuring 6 chunky arcade buttons and         
            6 potentiometers in a stylish backlit clear acrylic casing.
            The Juicebox 6 is available to buy  now, each order  hand made by myself and completely customisable in your choice of colour scheme and knob             
            styles.</p>
¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <a href=”juicebox.shtml” target=”_blank”>Learn More</a>
          </article>

        <article>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<img src=”images/articlethumbnails/flf.png” alt=”Flylazarusfly”¬† />
            <h3>Flylazarusfly Teaser</h3>
            <p>Footage from our Break Your Socks Valentines special is up featuring out home brew lighting rig using a Max/MSP application and Maxuino,
            decoding MIDI sequenced data playing in real-time with the band.</p>
¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <a href=”http://vimeo.com/20139704&#8243; target=”_blank”>View Video</a>
          </article>

        <article>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<img src=”images/articlethumbnails/facetracking.png” alt=”Facetracking with Jitter and Processing”¬† />
            <h3>Facepong! Facetracking with Jitter and Processing</h3>
            <p>I made a little game based on finally figuring out face tracking over christmas. The actual face tracking is done in Max and sent as OSC
            values to a Processing sketch</p>
¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <a href=”http://vimeo.com/18302790&#8243; target=”_blank”>View Video</a>
          </article>

¬†¬†¬†¬† ¬†¬†¬† ¬†<aside id=”twitter”>
¬†¬†¬†¬†¬†¬† ¬†¬†¬† ¬†<img src=”images/twitter.png” alt=”twitter”>
¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <ul id=”twitter_update_list”></ul>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<a href=”http://twitter.com/spencerldixon&#8221; id=”twitter-link”>follow me on Twitter</a>
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script&gt;
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/spencerldixon.json?callback=twitterCallback2&amp;count=7″&gt;
                </script>
          </aside>
    </section>

    <footer>
¬†¬† ¬†¬†¬† ¬†<img src=”images/email.png” alt=”email” width=”252″ height=”24″ id=”footer.email” />
¬†¬†¬†¬†¬†¬†¬† <img src=”images/followme.png” alt=”follow me:” width=”87″ height=”18″ id=”footer.followme” />

¬†¬†¬†¬†¬†¬†¬† <a href=”http://www.facebook.com/spencerdixon”><img src=”icons/facebook32x32.png” alt=”facebook” width=”32″ height=”32″/></a>
¬†¬†¬†¬†¬†¬†¬† <a href=”http://www.twitter.com/spencerldixon”><img src=”icons/twitter.png” alt=”twitter” width=”32″ height=”32″/></a>
¬†¬†¬†¬†¬†¬†¬† <a href=”http://vimeo.com/user3926076/videos”><img src=”icons/vimeo32x32.png” alt=”vimeo” width=”32″ height=”32″/></a>
¬†¬† ¬†¬†¬†¬† <a href=”http://www.spencerdixon.wordpress.com”><img src=”icons/wordpress32x32.png” alt=”wordpress” width=”32″ height=”32″/></a>
¬†¬†¬†¬†¬†¬†¬† <a href=”http://www.soundcloud.com/spencerdixon”><img src=”icons/soundcloud.png” alt=”soundcloud” width=”32″ height=”32″/></a>
    </footer>
</body>

</html>

As you can see, I’ve not included a single class or ID element bar a couple of images that I want to position on the page independent of everything else.

In summary, we’ve seen the logical structure that we desperately needed in CSS2 implemented in CSS3, resulting in much more efficient and shorter coding.

Time for me to finish off my CSS then. Tomorrow we’ll look at how we can replace the old hacks of HTML4 and CSS2 with the new native features of HTML5 and CSS3. We’ll also check out some advanced stylings in CSS3 that we can use to achieve that web 2.0 look natively without resorting to hours of messing around in Photoshop or Fireworks.

5 Days of HTML5 (Day 1: Getting Started in One Day – Part 1)

Welcome! It’s Day 1 of our 5 day tutorial, so we’ll start at the beginning. I’ve already covered what HTML5 is and why it’s awesome, but what do we need to start coding websites in the new HTML5 standard?


The industry standard software is Adobe Dreamweaver, with the most recent version being CS5.5; an intermediary upgrade from CS5. If you’ve got anything lower than CS5, you won’t be in support of the HTML5 and CSS3 standards. CS5 supports HTML5/CSS3 but was released in the early stages of the standards development, so I recommend trying to grab a copy of CS5.5 for maximum support. Adobe offer free full 30 day trials of their software from their website. It might be handy to grab a copy of Photoshop CS5.5 or GIMP whilst you’re at it, we’ll be using a graphics editing program to make logos and various stylings for the site.

Open up Dreamweaver and on the main menu, in the “create new” column, click on “HTML”. Hit File > Save As and create a folder for our project where we can save everything. Let’s say we call this folder “My HTML5 Project”. You’ll also want to create folders named “css” and “images” within this your My HTML5 Project folder to get started.

We should now have a folder looking like this:

My HTML5 Project
>css
>images

Switch yourself to code view, and grab a piece of paper. We’re going to write on it the rule of HTML5 and good website design. First rule; real men code in code view.

Divs, Divs Everywhere.

If you’ve coded a website before, you’ll be familiar with divs, a div is a ‘division’ in a HTML document. We used to use them for chopping up our website into managable chunks representing the different sections of a website. For example we’d have <div id=”header”></div> in which we’d put our header of the website, and style by identifying the ID parameter “header” in our CSS.

HTML5 gets rid of this. We can still use divs, but we’ve got some new tags that are there for certain jobs. Some tags you should familiarise yourself with:

<header>
<nav>
<footer>
<article>
<section>

There are more, but these are the ones you’ll be seeing the most of. We even have headers and footers for tables now in HTML5. We can see in the picture below how the new tags come into effect when structuring our site.

So todays goal; We’re going to create a basic HTML5 and CSS3 template for our new website, put in some backups for dealing with browsers that don’t support HTML5, and then we’re going to screen our templates with the W3C validator tool and make sure it passes.

Go back to your blank document, by default, Dreamweaver will fill in your Doctype info. Delete it, we’ll start from a totally blank page.

First thing we need to do is tell the world that this is a HTML5 document and should be treated as such. For this we declare a ‘doctype’ or Document Type. We used to have to type a big long string that noone could ever remember. Now we just simply put the following at the first line of the page;

<!DOCTYPE html>
<html lang=”en”>

Seriously. Its THAT easy. HTML pages usually consist of two main sections usually divided into subsections. These main sections are <head> and <body>. As you can imagine, the head is the start of the document, usually where we set everything up to be used later, the body being the main content of a page. We want to now open up the head section of the page and a title to our page, this is what reads at the top of your browser and is defined with the <title> tag.

<head>
<title>TITLE HERE</title>

<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>

Now we haven’t actually created a new CSS3 document yet. So go ahead and create a blank one from File > New, and save it to our css folder. We’ll put in a couple of global resets as good practice to clean everything up…

@charset “UTF-8”;
/* CSS Document */

*  {
    margin: 0 0;
    padding: 0 0;
}

Awesome. So we’ve declared our document, linked in an external stylesheet, and now we can code the main body of the site.

<body>
<header>
<nav>
</nav>
</header>

<section id=”homepage”>
<article id=”headlineblock”>
</article>

<article id=”newsblock”>
</article>

<article id=”newsblock”>
</article>

<aside id=”twitterfeed”>
</aside>
</section>

<footer>
</footer>
</body>

</html>

We’ve added some of the new HTML5 tags to denote the structure of the page, and we can use the id tags to give elements names which we can then call up in our CSS document, allowing us to style multiple instances of the same tags differently.

Lets put it all together and run it through the W3C HTML5 Validator.


Ok, this isn’t bad at all, we can see the first error is that we’re missing some metadata to help explain what the page is. So after opening our <head> tag, we can add in the following to help identify a character set, and give a bit more information about what this page is.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
¬†¬†¬† <meta name=”description” content=”DESCRIPTION GOES HERE” />
¬†¬†¬† <meta name=”keywords” content=”KEYWORDS GO HERE” />

Sidenote: After battling with the W3C validator for a long time, I realised it doesn’t like you posting in code thats not been copied directly from Dreamweaver. Somewhat tempermental. Regardless, my Dreamweaver code passed validation with two warnings, these being the standard ‘this is an experimental validator’ warnings and nothing to do with my site.

So we’ve got a valid HTML5 template. What can we do to make sure those without HTML5 compatible browsers can still understand our site? Well Google Code to the rescue…

HTML5 Shiv is a Javascript formatting tool designed to help IE browsers < v9 understand HTML5. Simply drop a couple of lines in at the end of your <head> tag, and you’re backwards compatible for IE.

I think we’ll call it a day there today, we’ve got a HTML5 basic template with a Javascript failsafe for older versions of IE, and we’ve got a CSS file ready to go. Homework today, get out a piece of paper and design your site. Chop it up into the new HTML5 tags. Define your <nav> bar, wether its going to be nested in a <header> or not, and all <section>, <article> and <aside> segments.

Tomorrow we’ll look at organizing our layout and filling it in. Heres my code so far…

<!DOCTYPE html>
<html lang=”en”>
<head>
¬†¬† ¬†<!–METADATA–>
¬†¬† ¬†<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
¬†¬†¬† <meta name=”description” content=”DESCRIPTION GOES HERE” />
¬†¬†¬† <meta name=”keywords” content=”KEYWORDS GO HERE” />

<title>Spencer Lloyd Dixon – Music, Blog, Design, Development</title>

¬†¬† ¬†<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

¬†¬†¬† <!–FIX IE SUPPORT FOR HTML5–>
¬†¬† ¬†<!–[if IE]>
¬†¬† ¬†<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
¬†¬† ¬†<![endif]–> ¬†
</head>

<body>
    <header>
        <nav>
          </nav>
    </header>

¬†¬† ¬†<section id=”homepage”>
¬†¬†¬†¬† ¬†¬†¬† ¬†<article id=”firstblock”>
          </article>

¬†¬†¬†¬†¬†¬†¬† <article id=”newblock”>
          </article>

¬†¬†¬†¬†¬†¬†¬† <article id=”newsblock”>
          </article>

¬†¬†¬†¬† ¬†¬†¬† ¬†<aside id=”twitterfeed”>
          </aside>
    </section>

    <footer>
    </footer>
</body>

</html>