Top 10 Web 2.0 Rants

I have had enough of Web 2.0. Listen up. ITS NOTHING NEW! When will they learn? I agree that the web has entered a new phase, with users expecting feedback and richer interactivity rather than the passive experience that used to be the norm "back in the day". However, Web 2.0 is not a design technique, or a technology per se. It's more about the web becoming a more useful, and accesible tool. To see what I mean, just have a look at the amount of APIs out there, allowing developers to build new more powerful web applications.

I'm not the only one who feels this way (if anything I'm late joining the fray), and to prove it, here's my top 10 Web 2.0 Rants (it's worth noting the age of some of these posts too!)

1. I Hate Web 2.0
2. Web 2.0: Is it just hype?
3. Web 2.0 != a check
4. Application Insight: Why I Hate Web 2.0
5. 10 Things I hate about Web 2.0
6. Valentines Day Massacre
7. You Are Not a Web Designer
8. Web 3.0 at Binary Bonsai
9. There is no Web 3.0, There is no Web 2.0 - There is Just The Web
10. Does Web 2.0 Still Look Good? Did it ever?

So, if you were wondering what Web 2.0 is, you should, after reading the above articles, have a much better idea. Then we can move on to Web 2.1, or Web 2009, or Web Service Pack 1, or whatever the hell the marketing and hype-munkys decide to call the next trend!

Powered by ScribeFire.

Google launches Mail Goggles

Found this on the official Gmail blog today, and thought it was worth posting...

Google Labs has launched a new Gmail feature called "Mail Goggles". I'm sure, like me, you have fired off an email in the heat of the moment, then regretted it 10 minutes later. This is bad enough in your personal life, but it can be a nightmare if you do it in work emails, so to try to help, Mail Goggles it checks you are in a sensible frame of mind before you send, by asking you to solve some simple math questions.

LOL, so, if you are too drunk to solve a simple math question, you're too drunk to send that strongly worded email to your head of department. Brilliant. Can they do it for drunk women with their text messages too?

Progressive enhancement rules ok!

I've really been bitten by the progressive enhancement thing, probably because I have spent some much time fiddling with jQuery over the last few months. Back in the bad old days, the buzz was to allow for "graceful degradation", which even by name seems a little negative. Today, we have a new development idea, known as progressive enhancement.

Why is progressive enhancement better that graceful degradation? Well, to be honest, you could say that they are both the same side of the same coin, in as much as the final aim is that your site has a few barriers to use as possible, but personally I find the progressive enhancement way of doing things is the more creative.

I found this great little slideshow by Chris Heilmann on Ajaxian (top site if you are into geeky AJAX and JavaScript stuff like I am), and after watching it, I had to share it here.

Pragmatic Progressive Enhancement

View SlideShare presentation or Upload your own. (tags: programmingyuiydnakqa progressiveenhancementpr...)

There are a couple of killer quotes in the slideshow too....

"There is hardly any more hostile environment than the web" - So true, but thats one of the things that makes web development such a challenge, and so much fun!

"..we work in a paranoid fashion" - LOL, yeah, especially if you add any of the IE browsers into the mix!

"Separation of Structure (HTML), presentation (CSS) and behaviour (JS) is an absolute must." - Thats almost an understatement. Without separation you have no chance of either clean mark-up, graceful degradation, or progressive enahncement.

"With great power, comes great responsibility" - This applies as much to those Flashers out there as those using HTML, CSS and JS. Just because you can make that object move across the page, change colour, load data from some third party website, and bounce on mouseover, doesn't mean you should actually do it!

My personal favourite is "If you simulate, do it right. Don't break expectations". I have had to remove or revise functionality on more than one occasion because it works, but not in the way the use would expect it to.

Go forth and progressively enhance all that you code....

The Recipe for Corporate Design Success

One thing I'm always interested in is design theory (not sure if it shows or not!), and as I work for a "corporate" site, I like to keep my eye out for interesting articles and tutorials relating to corporate design.

As you are not doubt aware, good design is not just a case of throwing something together and running with it because "it looks good", so I found 7 Ingredients of Good Corporate Design on Smashing Magazine to be an interesting distraction.

What are the Smashing Magazine's 7 Ingredients?

1. A strong logo
2. Good typography
3. Considered use of colour
4. Strong brand objectives and identity
5. High quality
6. Community
7. Culture

Hmm, where is "user experience"? Surely if a product/brochure/site hits the spot it contributes to the strength of design. Otherwise my job is a waste of time!

Site of the Moment!

I usually post sites that catch my eye in the "Showcase" section of the main UKDD Site, but this one really stands out from the crowd.

I found it on one of my regular visits to the brilliant Web Designer Wall, where Nick La has posted an interesting article about the current trend of using large background images. All the sites looked great, but Upstruct really knocked me out, but not just for it's use of images, but for it's tasty Prototype and juicy Scriptaculous goodness, and particularly the brilliant contact page that uses Google Maps as a full browser window backdrop.

There is a real sense of playfulness and love of what they do, which manifests itself in lots of cool touches, for example, try hitting the "howdy button", or the M on your keyboard. It's rare that you see a site with such tight integration of design, interactivity and "feel". It is, in my opinion, an outstanding site.

Check it out for yourself!

Here's a cute little bug...

This one drove me mad today. I'm working on a slide/reveal panel mechanism for an project under development at work, using jQuery, and almost straight away, everything worked perfectly in Firefox (once I'd sussed the HTML mark-up needed anyway!).

However, nothing seemed to happening at all when I tested in IE7, and the only clue IE would give me was a somewhat cryptic "Expected identifier, string or number".

Huh? What's that supposed to mean?

Well, a bit of Googling and I found the solution. According to Cow at NeoDragon it's an IE issue (surprise surprise)...

"In Javascript you have lists like:

var list = { opacity: 0.5, height: 0.5} 

Similar syntax is used to group functions:

var MyFuncs = {foo: function() {},bar:function() {},} 

The above code should work fine in real web browsers such as Firefox. IE will give a screwed up error such as "Expected identifier, string or number". Just remove the comma after the last function and the error be gone."

Nice one Cow!! (I couldnt find the authors real name, but please let me know if you do!)

Powered by ScribeFire.

JavaFX. Am I missing something?

This post may be early (if JavaFX becomes HUGE) or late (if JavaFX has already sunk without trace), I'm not really sure, but thought I'd post about this, for no other reason than I've just spent an hour or so surfing JavaFX sites after accidentally finding it in an article on InternetNews.com

Apparently, Sun has a new(ish) product family called JavaFx. (Read more about it on Wikipedia)

"The language offers interactivity, animation and programming consistent with AJAX, Adobe's Flash and Microsoft's new Silverlight technology, but employs the Java runtimes installed on your local client instead of clumsy JavaScript."

Wow! Another new technology to do what several others can already do. I'm blown away, really.

Am I seriously supposed to believe that Java, which was as good as wiped out by the rise of Flash is going to make a serious comeback? From the demos I've seen I doubt it will happen. They all seem slow to load and run, and do nothing that the likes of Flash, Director, AJAX or Silverlight can't already do as well, or better.

In other words, based on all important first impressions, despite the title of the InternetNews article "Does JavaFX Spell the End of AJAX", I'm not going to put any money on it. Or am I missing something?

Powered by ScribeFire.

More than one way to skin a cat, continued...

Part 2: Loading external data into a web page using jQuery.

In part 1 we setup our ASP page to spit out random words on demand, so now we can start examining the various methods of getting the random words into our web pages.

Seeing as I am a jQuery nut, I'm going to demonstrate the jQuery way first (well, one of a few). If you've not played with jQuery yet, this might convince you to have a go.

Step 1: Include the jQuery library in the head of your web page

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Step 2: Create a DIV in your page to contain the generated words

<div id="displayRandomWords"></div>

Step 3: Write the code to do the clever stuff..

Using your preferred text editor, create a new .js file and add the following code, then save it as jq_name_gen.js in the same directory as your html file.

// This is a basic "when everything is ready..."
$(document).ready(function(){

   // This line tells jQuery to find an element with the ID 'displayRandomWords' and
   // then to load the output from our ASP page into it. In one line of code!
$('#displayRandomWords').load('random_words.asp')
});

Step 4: Include your js in the head of your document

<script src="jq_name_gen.js" type="text/javascript"></script>

You should now have an HTML file that looks something like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jq_name_gen.js" type="text/javascript"></script>
<title>Random words</title>
</head>
<body>
<div id="displayRandomWords"></div>
</body>
</html>

When you run the page in your web browser (on the server, as the ASP won't run locally remember!) you should see the random words magically appearing in your DIV. Click here to see it running.

Simple huh? To be honest, I have simplified things here to demonstrate some of the cool stuff without boring you with geeky stuff. Things to bear in mind include the fact that you can only load data from the documents parent domain (if you want to load from a different domain you will need a server-side proxy, check back soon for an example), and there is nothing in place to check to make sure the data has loaded. We'll cover that in a later tutorial, along with handling other types of data, including JSON and XML.

So, thats the first way of skinning our "loading external data" cat, in part 3 of this tutorial I will be using CSS and jQuery to make this widget a little more interesting.

Powered by ScribeFire.

New Jobsite TV campaign airs tonight

At 7:45 pm, in the middle of Coronation Street, a brand new TV advertising campaign will be launched. Keep your eyes peeled for the new Jobsite ad, staring Hotel Babylon's Max Beasley.

TV Campaign Facts

• £15million year 1 media spend
• Reaching 95% of ABC1 working adults
• Targeting 23-45 year olds
• UK-wide, multi-sector coverage

There has been a flurry of activity at work in preparation for this campaign, including a revamp on our logo and a fresh new look to the site, so everyone in the office is excited to see how this takes Jobsite forward.

It's a measure of my nerdiness that instead of going over to the launch party to sip champagne with Jobsite staff, I'm sat on my PC blogging about it instead. Sad huh?

If you want to see the ad, you can view it online here... (Another page we have enhanced using jQuery by the way, this time using the jquery.countdown plugin)

More than one way to skin a cat...

A tutorial about loading data using a variety of techniques - Part One

It struck me earlier, how as a web-geek, with so many tools and techniques available today, it's hard to know where to start sometimes. So, as a fun little exercise, I'm going to write my first proper tutorial, and not only that, I'm going to use a variety of technologies to illustrate my point.

I've no doubt many of you will have seen one of the "Web 2.0 Domain Name" generators out there, such as the Web 2.0 Domain Name Generator, or the more interesting Suggest.Name.

Back in 2000 I was one of the team involved in the now sadly defunct Music.gb.com, and I wrote a "Band Name Generator" using plain HTML and ASP. After looking about at some of the current generators out there, I thought I'd write an article showing a few different techniques to produce the same final result, using a combination of HTML, CSS, XML, Flash, ActionScript2, Actionscript3, JavaScript and jQuery.

Still reading? Cool. Let's get started. For the purposes of this tutorial we're going to use a very simple Access database (you could be a lot cleverer with this if you like), with a table that contains the words we will use as the starting point for our generated words. The table only needs 2 columns (ID and word). Once you have created your table and entered a few words that appeal to your sensibilities (or lack thereof), you should have something like this...

As you may have read in my previous posts, I'm not a "proper programmer", so to make life easy, I'm going to use Dreamweaver to get the data to the browser. Don't worry, you can download the source files to accompany this article here. If you want to just copy and paste, you will find the data output ASP source code which you can adapt to your requirements here.

You should now have a working page which will give you a plain ASP document which outputs your generated word. Click here to see it. That should keep you amused until I publish part 2!

Powered by ScribeFire.

Microsoft to adopt jQuery?

Now this is interesting. I have been a bit of a jQuery freak since discovering it last year, and use it more and more in my day job, as well as in pet projects, and with rumours that my day job will shortly be migrating to .NET from Perl means this is even more useful.

Apparently Microsoft are looking to include the jQuery library in it's Visual Studio offerings, and Nokia is looking to include it in the Webkit based development tools. At first I had visions of Microsoft screwing things up, but apparently this is not the case...

"Microsoft and Nokia aren’t looking to make any modifications to jQuery (both in the form of code or licensing) - they simply wish to promote its use as-is. They’ve recognized its position as the most popular JavaScript library and wish to see its growth and popularity continue to flourish."

John Resiq (jQuery supremo) has posted an article outlining the plans, which if they come to fruition will take jQuery to a whole new level. Bring it on!

Adding Code Snippets to Blogger posts

In my previous post I wanted to include some sample code, but wanted to have highlighted and include line numbers. Well, after some scooting around, it seems I'm not the only one who wants be able to add "pretty" code snippets to some of my posts. I'm quite surpised that it hasnt been implmented as a piece of standard Blogger functionlality, but it's not, so the next best thing can be found at http://code.google.com/p/syntaxhighlighter/

This cool library allows you to use <pre> tags containing your code and it will add highlighting and line numbers to your snippets, for a variety of different languages, including Visual Basic, Python, CSharp and JavaScript. Nice.

If you want to see how to implement it on Blogger, have a look at Timothy Broder's blog GPowered. Give it a go, its well worth it.

Interesting little AS2/flash bug

Hmm, this post is more of a quick "note to self", after making a dumb mistake on a relatively simple Flash project. The issue appears to be that there is a discrepancy between the way the Flash IE Active X control and the Firefox Flash plugin handles loading XML.

As far as I can tell in the following piece of code, we should only see the trace 'we are ready to go' if the data is loaded and ready to be used.

var my_xml:XML = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success:Boolean) {
if (success) {
var intItems:String
intItems = my_xml.childNodes[0].length;
trace('we are ready to go')
}else{
trace('oops there seems to be a problem')
}
my_xml.load('myxmldocument.xml')

That does'nt seem to be the case in the IE active x control however. My project still progressed to it's main actions (on subsequent frames on the main timeline) on the success call, but without having all the XML ready to go. Firefox worked fine, but IE kept telling me that my content was undefined.

The only way round this way to check the .loaded property before progressing. This ONLY fires when everything is ready to go. Eg:

if(my_xml.loaded){
trace('Right, now we are REALLY ready to go')
}

Hope it helps...

Powered by ScribeFire.

AJAX v Flash Face-off!

During my time as a freelancer, I was involved in quite a few "rich internet applications". I have always been prepared to recommend Flash, if and when it was a suitable solution. Today however, I seem to be recommending Flash based solutions less and less, instead, I lean more and more on the magic of the jQuery library.

While Flash undoubtedly has the upper hand when it comes to handling video, and audio, and "all singing, all dancing" multimedia sites, the recent maturing of JavaScript, and CSS has made me re-examine my toolset.

One of the most obvious reasons for my move to jQuery as my "weapon of choice", is that it is, in some ways, similar to ActionScript 2 coding, and, as a result, I can crack on without having to completely get my head around a new language.

I've never really been a bona-fide programmer, and my background is very much that of the self taught web designer, who learnt on the job, (including spending 2-3 yrs working exclusively with Flash) .

12 years on, I now work for one of the UK's biggest sites, as a "web designer" (You have no idea how much I hate that label) - although, my role seems to primarily be focussed on client-side "user experience" stuff, working with Flash for web based video delivery, and XHTML, CSS, JavaScript and jQuery etc, rather than true design work.

As a result, AJAX and jQuery in particular has made a huge difference to my work, in terms of speed of development and the ability to easily as rich interactivity via progressive enhancement.

If you've ever considered the similarities and differences between the two technologies, including how they stack up in terms of compatibility, SEO, mobile support, development tools and more, then you could do worse than check out this article on the Webdesigner magazine site.

Once you've read the article, have a look at the source code of the Webdesigner site. Surely a magazine that professes the be "The Ultimate Design Mag for the Web Professional" should have moved away from a site built with Dreamweaver, using the classic "MM_" JavaScript behaviours and tables based layout?