Canvas Demos

Nested Elements is very excited to announce that it has spawned a child in the form of Canvas Demos - a site dedicated to showing off the fantastic uses of the canvas HTML element!

Canvas Demos will act as a repository of demos and tutorials to show exactly what can be done with just HTML, CSS and JavaScript.

[caption id="attachment_137" align="aligncenter" width="455" caption="Canvas Demos"][/caption]

So check it out and make sure you add it to your RSS feeds to see the latest canvas tech demos!

The Internet Explorer 8 team have been busy - not just preparing the final release of the version 8 browser, but busy writing some very useful articles for CoDe Magazine detailing exactly what’s new in Internet Explorer 8 and what it means for us web developers. The following articles are well worth a read:

• What’s New in Internet Explorer 8 Beta 2?
• Making Your Web site Compatible Across Multiple Versions of Internet Explorer
• Introducing Compatibility View
• Create Your Own Web Slices
• Accelerators in Internet Explorer 8 Beta 2
• Developer Tools in Internet Explorer 8 Beta 2
• Better AJAX Development with Internet Explorer 8 Beta 2
• AJAX Performance Measurement Methodology for Internet Explorer 8 Beta 2
• Performance Improvements in Internet Explorer 8 Beta 2
• Secure Coding with Internet Explorer 8 Beta 2

At the moment, the Internet seems to be going crazy for Search Engine Optimisation (known as SEO).

SEO is the current buzz acronym, like XML was way back in 2003. My clients want it, my friends want it. I want it. And the best part SEO doesn’t cost a lot to do. It just requires some time investment, once every month or so to keep you at the top of the rankings.

Not everyone can be number one on every search on Google, and anyone who promises that they can make you number 1 within X days is lieing. Google’s search algorithms change frequently, possibly every day, and nobody knows exactly how Google works. But, looking at current top ranking search results, we can get a rough idea.

Before we start, let’s get one thing clear: no one SEO technique can give you the ultimate rankings boost. You need to play with many, and every so often add some new ones, remove some old ones. Keeping your site, and especially your SEO techniques fresh is often half the battle.

A URL counts for a lot

A URL with your desired keyword in counts for a lot when Google is indexing pages. You can add all the other SEO techniques that have ever existed in the World to your website, but if your Britney Spears fansite is hosted at http://www.geocities.com/spacemountain/mysite/90881.html chances are it’s never going to rank higher than www.britneyspears.com, and one could argue that it never should. Google is designed in such a way that official websites should be among the highest ranking. If, however, you happen to be Britney Spears and you have your website on Geocities, then you have a problem. So for professionals, sometimes paying a premium for your official domain is more than worth it. Of course, if this is just a personal blog, it’s probably cheaper just to think of a new name for the blog.

The title of your page

And by title, we’re referring to the title that appears in the Windows title bar and is within the <title> tags on your page. As someone creating a web page you may often discard the title that appears in the browser bar - after all it’s so disconnected from the rest of your content - but Google doesn’t. Currently, the data contained within title is very important on Google rankings.

Gamespot aim to be one of the top search results for computer and video games in a Google search, and one of the ways they acheive this goal is by repeating key words in the title. For example, at the time of writing the title for the Gears of War 2 page on Gamespot reads: “Gears of War 2 for Xbox 360 - Gears of War 2 Xbox360 Game - Gears of War 2 Xbox 360 Video Game”. Notice the change in spelling for Xbox360 in the second repetition, and also notice how the phrase is different each time to suggest that the site is not just repeating key words.

IGN, another games website, take a slightly different approach to their title tags focussing on the additional search parameters that would be linked with the game. At the time of writing, the Gears of War 2 page reads “IGN: Gears of War 2 News, Previews, Features and More Articles”. This method gives IGN a better chance of being one of the top hits should someone type “Gears of War 2 preview” into Google. Once the game is released IGN’s title bar will update to include reviews, cheats and walkthroughs.

The language of your page

It sounds silly, but setting the language of your page can actually help increase your rankings in the countries specific to your target audience, and it doesn’t seem to affect your overall ranking. Add the following attributes to your HTML tag (adjusting the language to the actual language of the page):

xml:lang="en-GB" lang="en-GB"

If you have multiple language versions of your site, offer a <link> tag in your <head> section to the other language, and the search engine will index the correct page for the correct audience accordingly. For example:

<LINK rel="alternate" type="text/html" href="frenchversion.html" hreflang="fr" lang="fr" title="Mon blog">

The META tags

There’s two META tags which search engines pay attention to when ranking your site, keywords and description. These two tags seem to once again be in favour at Google, although only a few years ago it was rumoured that Google didn’t take them into account at all.

For META keywords, add the following tag to the <head> section of your page:

<meta name="keywords" content="comma, seperated, keywords" />

As a comma seperated list, your keywords should be consistent with your website’s content, and what is written in your title bar. It is often a good idea to start with the website name, before adding 4 or 5 keywords which describe a common theme on your site, and then a few more keywords describing the page itself. Try not to go overboard with keywords. Too many, and search engines may just ignore the lot.

For META description, add the following tag to the <head> section of your page:

<meta name="description" content="This should be a description" />

A successful high ranking on Google via META description seems to be based on two things.

1. Your description should basically contain the site name, and then a paragraph which summarises the title of the page, and the keywords. For example, if my site were called ‘Hollywood Stars’ and I had a page about ‘Bruce Willis’ with the keywords ‘news, movies, action, Die Hard, 16 Blocks”; my description would probably read: “Bruce Willis on Hollyword Stars. The number one resource for news, gossip and photos on Bruce Willis, star of action movie Die Hard and 16 Blocks.”
2. Your description should change frequently. Google seems to like websites where the description changes once a month, so try and change the descriptions around a bit every so often.

And so concludes part 1 of our Search Engine Optimisation guide. Be sure to check back for part 2 soon!

So Google Chrome has produced some interesting debates, some people seem to be fans, some people seem to dislike the simple interface.

Personally, I quite like it but the (current) lack of plug-in support pretty much defaults me back to using Firefox. The browser is considerably faster than current browsers, both at initial boot-up and at loading JavaScript heavy web pages - this is due to the Google Chrome browser generating machine code from the page’s JavaScript meaning everything can execute that much quicker.

So what’s been happening around the web?

• Wired went back 16 days to when they visited Google’s campus and first met the browser-to-be:
  Wired: Inside Chrome
• The first security flaw has been found:
  ReadWriteWeb: Security flaw in Google Chrome
• And there’s also been some controversy about the Terms and Conditions - apparently Google ownz j0:
  Tap The Hive: This post not made in Chrome - Google’s EULA sucks
  (UPDATE: and now they don’t)

According to Smashing Magazine, the days of Web 2.0 shiny websites are coming to an end, as trends begin moving sites toward a grunge look and feel.

In a recent article, Smashing Magazine show how you can make your website look more organic, and life-like using a few simple grunge textures, colours and fonts.

While I can see personal sites, and portfolio websites moving toward this style, can anyone really see a corporation such as Apple, Sainsbury’s or Orange changing their websites to a grunge look and feel?

I often get asked by budding web developers what the difference is between HTML and XHTML. The truth is, there isn’t a lot of difference between HTML 4.01 and XHTML, and most of the rules of XHTML you should be using regardless to maintain tidier code. So, if you already know HTML 4 through and through, just bear in mind the following points and you can put XHTML on your CV/resume too!

One of the biggest troubles with being a web developer is the sheer number of browsers you have to cater for. There’s Firefox, Safari and Opera; several versions of Internet Explorer; the Playstation 3 and Nintendo Wii browsers; and then there’s tons and tons of different mobile devices such as PDAs, iPods and mobile phones.

There’s so many, that how is a web developer meant to get any rest around here?

As we become more experienced as web developers, we begin to learn the issues, problems and solutions associated with each of the more popular browsers, but the truth is that unless you have a lot of time on your hands (or a fairly simple structure to your website) you are never going to get your website looking perfect on everything. Sometimes you just have to let go.

Many of you have probably heard of, and used, the W3Schools website as a quick reference to HTML and CSS tags in times of need, but did you know that W3Schools also provide statistics on what browsers, operating systems and display settings Internet users across the world are using. The statistics W3Schools’ use are extracted from their own log-files combined with other reliable sources to give a realistic overview.

The most recent statistics (December 2007) are as follows:
Firefox: 36.3%
Internet Explorer 6: 33.2%
Internet Explorer 7: 21.0%
Safari: 1.7%
Internet Explorer 5: 1.7%
Mozilla (Gecko, Netscape): 1.4%
Opera: 1.4%

Personally, I can’t believe how many people are still using Internet Explorer 6. And while the number is decreasing, it’s decreasing at almost an alarmingly slow rate.

As a web developer, this means we still need to seriously cater for Internet Explorer 6 users, regardless of the amount of pain suffered making today’s complicated websites work on the ageing browser.

Have a wander over to W3School’s statistics pages and check out the other figures for yourself.

If you’re a web developer who wishes to constantly evolve as the technology evolves around them, you need to ensure that you keep up-to-date by visiting the most useful websites.

Here are some of the websites I visit regularly to keep on top of the game, feel free to suggest your own in the comments below:

• W3Schools - The ultimate resource for whenever you have a web query. W3School’s provides almost all the same information as the HTML and CSS technical specifications, but in a clear, easy to read format. And it does XML, JavaScript and others too.
• A List Apart - An electronic magazine which focuses on best practices and web standards. If you’re not too sure you’re doing something the right way, check out these guys to see if there is an article available on it here.

  

• WebDeveloper.com - A busy forum-based community, which is always useful whenever you have a question and need a reasonably quick answer.
• QuirksMode - A great resource for JavaScript and CSS. The JavaScript side is full of useful JS features and examples, while the CSS side is full of compatibility graphs and useful hacks.
• WebMonkey - HTML tutorials and cheatsheets, especially good for beginners.
• DevGuru - Useful for quickly finding out whether something is supported, especially in JavaScript.