A quick apology...

I've not posted for a few days, due to pressures in my workload. So, apologies to those of you, (if any) who are waiting for an update.

Things are a little busy at work, and as a result, I've not had time to post. I have, however, had chance to use Adobe's new CS 4 Production Premium edition, and, I'm afraid to say, so far, it's a bit of a mixed bag, most notably...

Flash cs4 Bone and IK - Good idea, but on first impressions, a bit flaky in practice...
Photoshop cs4 Extended Edition Open GL 3d support - Another really good idea, works brilliantly on my workstation at the office, but I have to disable it on my laptop, which ISN'T old by anyones standards, and has a dedicated 512mb video card.

More thoughts about CS4 as I get the chance to give it a hammering...

John Resig Talks JavaScript and jQuery

I found this video last night, featuring John Resig giving a talk at Northeastern University about JavaScript and jQuery. As the brains behind the fantastic jQuery library, this video is a great opportunity to get the lown-down and some hints and tips "straight from the horse's mouth".




Well worth watching, even if it is little "dry" for non-techies or designers.

Top 10 Firefox Extensions

I love Firefox. Open-source, standards compliant (mostly) and with the added bonus of a huge amount of extensions. So, if you've yet to be converted, download Firefox, and then give some of these extensions a try. If you go back to "the other browser" after spending some time with Firefox, I'll eat my hat..

1. Firebug - If you're a web designer or developer, Firebug is the definately the best reason to switch to Firefox. I'm not going to write a review, just try this top notch suite of development and client-side debugging tools for yourself. Their slogan is "Web Development Evolved". 'Nuf said.
2. Fireshot - Ever wanted to send your client a full page screen-shot, including everything below the fold? What about being able to easy take screen grabs and annotate them. Fireshot is all you need. A really handy little add-on.
3. Web Developer - The Web Developer extension adds various web developer tools to Firefox. It includes HTML and CSS validation tools, a ruler, enabling/disabling JavaScript and CSS and much more. A really good side-kick to Firebug.
4. FireFtp - An FTP client, right inside Firefox, very useful, with SSL/TLS/SFTP support, automatic reconnect and resume of transfers, search and filtering and more.
5. Palette Grabber - This is a useful one, if you like a colour-scheme you see on your web travels, you can grab the color palette for use in Flash, Photoshop, The Gimp and more. Mmmmm handy.... as Homer Simpson might say.
6. Execute JS - An enhance JavaScript console, allowing you to quickly test arbitrary scripts, evaluate properties of an object and more. Well worth a look if you do any JavaScripting.
7. Font Finder - This useful little add-on lets you find out the CSS properties of selected text. Simple, but very useful nevertheless.
8. ColorZilla - Another useful tool for designers, it allows colour picking, colour palette creation, zooming, DOM based colour analysis and more
   
9. YSlow - This add-on for Firefox/Firebug lets you analyse your site for performance issues and and points out problems according to Yahoo's guidelines for high-performance websites.
10. Pencil - The Pencil add-on is a simple tool for making diagrams and GUI prototyping, with built-in stencils for diagraming and prototyping, Multi-page documents and more. A really useful wireframing tool, and its free.

If you are interesting in finding more Firefox extensions and add-ons, have a look at the official Firefox add-ons site. And please, DON'T revert to the dark sIdE..

Free Browser Testing Tool for Designers

As someone who has to deal with the regular headache of developing sites that will reliably look good and perform across mulitple browsers and platforms, this web based tool really caught my eye when my colleague Justin sent me a link to this site.

Some of you may have seen the service offered by Litmus, allowing you to test your sites against a multitude of browser scenarios, and some of you may have even paid to use it, but BrowserShots.org offers a very similar service for free. Result!

You can test to see how your site looks with a massive number of combinations, including with or without JavaScript enabled, different browser versions on different platforms (MAC, MS Windows, Linux and more) different Flash versions and much more. It's well worth checking out, even if you are just curious to see how your site looks!

Bio-Bak: Flash Mentalist Alert!

LOL. What can I say, I have just found probably the maddest web site I have ever seen. I'm not even sure where to start when i comes to describing this site to be honest. Big bright bold colors, crazy characters and sound effects, immersive/infuriating navigation, and some bonkers sound effects(if you think you can hear your hard drive making wierd noises, don't worry, its this site - it took me a while to realise!) .

I love this one so much I'm blogging about it, as well as featuring it on the UKDD showcase.

A definate Site of the Moment! Check it out!

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

Part 3 Using jQuery.AJAX() to load data and catch loading errors

Well, after a bit of a delay, here's the third part of my tutorial (part 1, part 2) demonstrating different ways of achieving the same result. In this part, I am going to use some more jQuery and CSS to build on what we coded in the last installment, and we are going to use the jQuery.ajax() function to add a bit more sophistication to our word generator.

Step 1 Create your HTML document.

First, we need an HTML document to contain and update our externally loaded content. Our page will contain a display area for the loaded text, and a button which will update the page on demand. It should look 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" />

<title>Random words</title>

</head>

<body>

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

<div id="displayUpdateButton"></div>

</body>

</html>

Step 2. Add the jQuery library to your page.

As we will be calling upon the magic of jQuery again, we need to include the library in the head of our HTML so, add the following to the head of your page...

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

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

Now for the interesting bit. We need to create a function to call the random_words.asp, and if it loads successfully, display the output. We also need a nice preloading graphic to let users know that something is happening, and finally a link to reload new random words, so in your favourite editor, create a .js file as follows, and save it as jq_name_gen_part2.js

// Once the browser is loaded and ready to go...
$(document).ready(function(){

//define the getData function, to handle the data process....
function getData(){
// show the preload graphic....
$('#displayRandomWords').html('<img src="ajax-loader.gif" />');
// get rid of content from link button - It's not needed while data is loading...
$('#displayUpdateButton').empty;
// now setup the jQuery.AJAX function
$.ajax({
  // type can be GET or POST....
    type: "GET",
    // file name of data to be loaded...
    url: "random_words.asp",
    // dataType - Use this to prevent unexpected results with loaded data
    dataType: "HTML",
    // Define function that fires when data is successfully loaded...
    success: function(data){
      // Build the Reload link...
    $('#displayUpdateButton').html('<a href="#" id="aReloadData">Reload...</a>');
    // Display the output from our server-side script...
    $('#displayRandomWords').html('<strong>'+ data +'</strong>');
    // setup the click event handler for the reload button...
    $('#aReloadData').click(function(event){
     // fire the getData function on click to reload new words...
     getData();
    })
  },
  // a simple bit of error trapping. If there is problem loading the data, show an error message...
  error: function(){
    $('#displayRandomWords').html('Oops, we seem to have hit an error!');
  }
 });
};
//Fire the getData function first time out to populate the elements onLoad....
getData();
});

Step 4: Make sure your .js file is included in the head of your HTML document, below your call for jQuery itself.Your HTML should now look like the following piece of code. Notice I have also included a CSS file to make it look a bit nicer too. You can download all the source code for this part of the tutorial from here.

<!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" />

<link href="name_generator_demo.css" rel="stylesheet" type="text/css" />

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

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

<title>Random words</title>

</head>

<body>

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

<div id="displayUpdateButton"></div>

</body>

</html>

If you want to see it all running in your browser, click here...

In the next part, I will show how to use Flash and Actionscript 2 to load and display external data, so check back soon.

Eclipse Rocks!

I'm a BIG fan of the amazing Aptana Studio, and since discovering it, I've hardly used my old weapon of choice, Dreamweaver. Aptana is much more "code-focussed", and great for building AJAX and DHTML applications and widgets (Web 2.0 developement anyone?)

After playing with Aptana, I have made a bit of a change however. I have installed the Eclipse IDE (which Aptana is based on), then installed the Aptana plugin for Eclipse. This means I get all the Aptana goodness, with the added bonus of being able to use any of the dozens of Eclipse plugins, such as SQL Explorer (useful if you do any Database work), Visual Paradigm SDE (for UML and Diagramming, among other things) and many more.

If you are looking for the ultimate development tool, give Eclipse a whirl, and build your own personalised toolkit, all in one IDE.

Powered by ScribeFire.

More Web 2.0 Rambling...

Well, those of you who have read some of my previous articles, will know by now that I am not entirely happy with the whole "Web 2.0" thing, but I found this today, and thought it might be of interest to somebody. Web2Rain is basically a big list of tools that designers and developers may find useful.

While I hate the "Web 2.0" hype, I love how websites are becoming more and more interactive, in more useful and interesting ways, and some of the sites you will find here really demonstrate my point. Ignore the slogan " A list of tools, that makes web development easy" - Good web design and development is anything but easy!

Oo, oo, oo, a shiny new workstation!

Yay! After moaning about my completely pants workstation at the office, we all have new machines. I am well pleased! As I hate waiting, I have spent the last 3 months or so, lugging my huge Toshiba laptop backwards and forwards to the office, as it is a much faster machine than my office machine. Not any more!

Our new boxes have 4 gigs of RAM, quad processors, nice big hard drives, the new NVidia videocards, with loads of dedicated VRAM, outputting to 2 rather tasty 19" Widescreen LCD flat-panels, with my fave new feature, NVidia's NVRotate, which allows you to pivot your display(s) to portrait view!

This means I can now, at last, have a full 1024 * 768 browser window open, and if it's Firefox, immediately below it, I can have a decent sized Firebug, then on the other monitor, Aptana, with a full 1280 height window for coding! NICE. A real productivity improvement.

Plus the fact, I will stop walking with a stoop as I will be able to leave the beast at home!

Powered by ScribeFire.

Top Ten Resources for Learning Web Design and Development

I've just been surfing about tonight, revisiting some old favourites and checking out some new sites friends have told me about. In the 12 years I have been working as a web designer/developer, I have often fallen back on other peoples code samples and tutorials to learn.

Some of my collegues on the design team have expressed an interest in learning some more technical, code based skills, such as JavaScript or ActionScript, and I am always keen to find tips and tricks for Illustrator, After Effects and Photoshop, as well as SQL, XML, or any one of many web design and development techniques, so, here's my top 10 resource sites if you're keen to learn...

1. W3 Schools. - If you want to learn about any of the web design and development languages, including HTML, XHTML, CSS, JavaScript, SQL and much much more, this site should be your first port of call. Hundreds of clear examples and references make this site indispensible. Bookmark it!
2. Webreference - Another indispensible site, for any of the popular web languages. Webreference is a HUGE site, and a great place to find new tips and tricks, from Multimedia and Internet Design to PHP and Active X programming. Essential!
3. WebDesign Tutorials - I had'nt seen this site before today, but I'm impressed by the amount of content. The frames based displaay is a little irritating, but, if you can ignore that, there's a huge amount of useful stuff to be found, covering 3d Studio Max, PhotoShop, Flash, C++, CSS and much more.
4. CSS Zen Garden - If you have'nt seen CSS Zen Garden, just go there. This site is the best illustration of the full potential of CSS when used well. A Stunning collection of stylesheets, showing how a single site can be completely redesigned, without touching the HTML mark-up. If you are into CSS, this is nirvana!
5. Web Pages That Suck - At the other end of the spectrum from CSS Zen Garden, this is the place to go if you want to learn how NOT to do it. Well worth checking out, some of the sites listed are truly shocking! Just make sure one of YOUR sites never appear on this site!
6. W3C HTML Validation and Jigsaw - These two sites are equally useful and important in the web designer/developers arsenal. If you want to be sure your site is vaild HTML and CSS, then you need to bookmark and use them both!
7. SitePoint - I'm a big fan of SitePoint, both for their website, and the books they publish. SitePoint has a real community feel, with hundreds of quality articles, books, videos, forums and more. Well worth checking out.
8. A List Apart - This is another indispensible site. With hundreds of authoratitive articles and tutorials about standards based and best practice web design, this is one you just can't do without.
9. Webmonkey - This site has been around for years, and had undergone a re-design over the last year or so. With tutorials, a code library and reference sections, this is another really good place to start...
10. Kirupa - This is a good site for those of you interested in Flash, Sliverlight, WPF and ASP.NET/PHP. Kirupa has been around for some time now, and has some top notch tutorials and artciles. Well worth a visit

If I've missed any, let me know! I'm always on the lookout for new sources of inspiration...

Powered by ScribeFire.

Adobe.TV - Your first stop for learning Adobe software

I'm a big fan of Adobe software, I use many of their tools every day of the week. To be honest, they don;t have a massive amount of competition when it comes to design and deveopment software. With a line-up including Flash, Photoshop, After Effects, Indesign and Illustrator, it's hardly surprising.

So, if you want to get an idea of just how powerful the software can be, what the latest techniques and developments are, or you want to take your design and development skills to the next level, it's well worth checking out Adobe.TV - With channels for different disciplines, such as Video Professional, Photographer, Designer or Developer, there's plenty to pique your interest. Just select a video, sit back, watch and learn, and best of all, it's free.

It's also a good example of what you can do with a bit of Actionscript 3 and Flex.

Powered by ScribeFire.

I HATE VISTA

I've not posted for a few days, as I have been busy wrestling with Windows Vista. After waiting a while, I decided I would install SP1 and get my install of Vista Ultimate up-to-date.

What a mistake. I have tried to install the service pack 5 times now, with no success. Crap error messages give no clue, and Microsofts own recommendations don't work either. Arrrrggggh.

Why do they even bother releasing an update if it won't install? I'm not the only one either...

http://blog.washingtonpost.com/securityfix/2008/04/windows_vista_service_pack_1_n_1.html

http://discuss.extremetech.com/forums/thread/1004423846.aspx

http://support.microsoft.com/kb/947366

As much as I hate to say it, I'm beginning to consider buying a Crapple instead!

Powered by ScribeFire.

REPOST: Absolutely shocking - for geeks like me

I originally posted this a couple of months ago on another blog, but after spending a bit of time re-examining the software in question today, I was driven to repost it....

Those of you that know me will understand my issue with this, but if you've just stumbled in by accident, I'll apologise in advance. This post is a geeky techie rant. Nuff said!

I am a web developer/designer (did you notice the order there?) who has been working on the web for 12 years. In that time, I have tried my hardest to stay up on current trends, latest techniques and new ideas in the web development field. I started as a "web designer" back in 1996, and over the past decade have had to stay abreast of developments, constantly honing my existing skills and learning new ones. So, bearing this in mind here goes....

WHY IS MICROSOFT USING PISS-POOR HTML TECHNIQUES IN THEIR VISUAL STUDIO 2008 EXPRESS EDITION TRAINING VIDEOS??????????

Do I seem a littled hot under the collar? That's because I am.

I work for a well known recruitment website, who are currently migrating their 'nix based web site and database etc across to ASP.NET - no, wait, thats not the punchline..., and as a result, my collegues and I on the design team are on a learning curve. Now, it's not too bad for me personally as I am a bit of an oddball on the team, in as much as I'm reasonably capable with non-design stuff, like Javascript, Ajax, XML, ASP, VB, SQL database coding (yes, yes, I know, Microsoft technologies), Actionscript etc, I'm a sort of designer programmer if you like, but most of the design team are DESIGNERS!

The whisper around the office is that the "recommended" web design/development software will be one of the following.

• Microsoft Expression Web - WHAT????? Has anyone actually used this out of choice? Our team have been working with Homesite (oldskool), and the old favorite Dreamweaver (we're on CS3 now), with a couple of us using alternative tools of choice, split between the Mac chaps using Coda, and myself using the awesome Aptana Studio (more on that another time....). I've installed an evaluation copy of Expression Web. All I can say is it looks and feels remarkably like F***tpage. Need I say more? and yes, I've read the rave reviews. I just think they are wrong. Dreamweaver killer, my arse.
• Microsoft Visual Web Developer 2008 - Hmm. Top tool for the hardcore coders, but let's be honest, it's not the most inspiring tool for creating top notch sites now, is it?

So, I have been scooting around the net when I find a spare moment, looking out for useful tutorials and resources relating to how the ASP.NET migration will affect us and any changes that may be ahead. Naturally, the first place you'd think of looking would be the vendors
documentation and resources right? WRONG.

In the interests of being able to put forward an informed opinion on the matter, I spent a bit of time checking out Visual Web Developer 2008 this evening, specifically, watching some of the video training that Microsoft are providing on their site.

Please, if you are a web designer/developer/standards/accesibility nut, watch this video, and spot the mistakes. I actually sat laughing as I watched. Shocking.

For those of you that are'nt total geeks, I'll explain....

Microsoft, at first, weren't particularly interested in the internet, then, they realised how big it would be and decided to jump on board. In the early days, they did'nt rule the online world as much as they do now, but over time, and several anti-trust cases, they now have a huge share of the world's web browser market. During the mid - late 90's we had the "browser wars" where it was sometimes easier to write 2 versions of your code to be sure all your site visitors could have the same experience. Fun times.

These days, things are getting better. It's still challenging to create a web site or web application that works across the broadest possible range of users, but today, we have more and more standards. XHTML and CSS are the norm, and sites are becoming more accesible, and useful by the day. Even Microsoft are flying the standards flag. No really...check this out, from the Expression Web product overview...

"Build dynamic, interactive pages that harness the power of the Web to deliver superior quality. Built-in support for today's modern Web standards makes it easy to optimize your sites for accessibility and cross-browser compatibility."

So, imagine my amusement, when I am watching the very first video in a series aimed at new ASP.NET developers, admittedly maybe hobbyists or students, but new developers all the same, and I am told to add a totally non-standard font to the project page (this should be CSS) and then a bit later, am shown how to use an HTML table for layout purposes (again, this should be CSS based).....

Microsoft. Come on. It's 2008. You are pushing a very clever technology. So why, why , why are you insisting on oldskool 1990's HTML? If thats what you're recommending or endorsing, regardless of your new enthusiasm for standards, I am REALLY looking forward to the laugh I'm going to have when we start looking at the HTML your ASP.NET controls spit out.....

Jokers.

Powered by ScribeFire.

Cream is the new white

Arggh. What is it with the cream coloured background? It seems everywhere I look, someone is using the same colour scheme, a dark gray or black header, then a cream band, then the rest of the page in white, then back to a dark grey footer. Yes, it looks nice, but it's EVERYWHERE!

Don't believe me? In less than 20 minutes checking out CSS galleries and web design showcases, I have found these...

Web Media Alliance
Jandaco
Train-ee
Light CMS
Website Owners Manual

And to be honest, there are quite a few more I could mention, but I really can't be bothered, i'm bored now.

Powered by ScribeFire.

jQuery enhanced HTML lists

I was playing around with CSS and ordered lists this evening, trying to make an ordered list with large item numbers and small list item text, and after much messing around discovered that what I was trying to achieve isn't really possible using just CSS and the OL or UL tags, and, after using jQuery for a while now, thought I'd have a go at creating a plugin to solve my problem.

It's nothing very complex, but it does the job. It simply looks at an OL or UL, strips out the HTML content of the child LI elements, and replaces the OL or UL with DIVS. This allows me to use CSS to style the numbers and text separately, using progressive enhancement. You can see a demo here.

Usage

To use it simply include jQuery in the head of your document...

<script src="your_path_to_jquery/jquery.min.js" type="text/javascript"></script>

Below that, include the jquery.enhanceList.js file...

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

Make sure you have the following CSS classes in your stylesheet, feel free to tweak it to your design requirements!...

.olContainer {
width: 450px;
margin: 5px;
border-bottom:1px dotted #cccccc;
padding-top:10px;
}
.olNumber {
font: 700 220% / 1 Georgia, "Times New Roman", Times, serif;
width: 30px;
margin: 0 10px 0px 10px;
text-align: center;
float: left;
position: relative;
padding: 0 10 10 10;
}
.olText {
white-space: normal;
font: 400 100% / 1 Arial, Helvetica, sans-serif;
padding: 0 0 10px 10px;
line-height: 1.5em;
}
.clearFix {
clear: both;
}

In your HTML document, you will need an ordered or unordered list, in my example, I am giving the target list a class called "enhance" to use as a selector...

<ol class="enhance">

<li>This is the first item, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>This is the second item Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li> Third item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fourth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fifth item..Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Sixth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

</ol>

It is a good idea to use an external javascript file to contain your code, rather than have script in your HTML document, so create a new .js file as follows, and save it as enhance.js in your sites script directory,...

$(document).ready(function(){
$('#activeEnhance').click(function(event){
$('ol.enhance').enhanceList()
})

Then include it in the head of your HTML page...

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

Thats it. All you have to do now is run it! I hope you find it useful. Feel free to let me know your thoughts on this. You can download sample code, and the plugin here

03 Nov 2008 Update: A visitor contacted me to let me know that my posted source code didnt work out "out of the box" - this was due to my source HTML referring to jQuery 1.2.6 which wasnt included in the zip. This has now been fixed. Apologies to you if you downloaded it and had problems due to this oversight!

Powered by ScribeFire.

Useful jQuery Plugins

I use jQuery pretty much every day at work, and in personal projects. I love the way it allows me to add rich functionality and effects to my projects, without much hard-core coding (well, unless I'm trying to be a smart-arse!).

So in true spirit of the Blogosphere, I thought I'd compile the top 10 list of my current favourite useful jQuery plugins...

1. Dimensions - This is one of the best. It extends jQuery with dimension specific methods. With it, you can get dimensions (height and width) of the window, the document, and individual elements, and find the co-ordinates (offsets) of any element in a web page. VERY useful.
2. Cookie - I use this one quite a lot, it makes manipulating cookies a breeze. Go get it!
3. jQuery UI - This is really a collection of plugins rather than one (but you can create your own build so you don't have to include the whole collection), but highlights include a variety of visual effects, including Fold, Slides, Explode, Pulsate, Puff and more, as well as some really slick ui elements such as a rather tasty SplitPane and Drag and Drop behaviours. Nice.
4. Media - This is a very cool one, it allows for unobrusive embedding of media including Flash, Quicktime and Silverlight into documents. Highly recommended.
5. labelOver - Another one in my regular jQuery toolkit, this allows you place the label over the input field, using CSS. It is based on a very good article on A List Apart about Making Compact Forms More Accessible
6. Validation - Anyone involved in the development of web applications needs a good validation script, and this is a great jQuery plugin that does just that. I hate ugly forms and JavaScript alerts, which is why I can't code a form without at least considering using this plugin. In short, don't leave home without it!
7. tableSorter - Sometimes, you can't avoid using tables, particularly for displaying data, and this plugin allows for all sorts of table tomfoolery, from basic column sorting to appending the table data using Ajax.
   
8. Form - This useful plugin lets you enhance forms to submit using AJAX. No special mark-up required, just include the plugin and write your callback. We like it!
9. Field - If you need to manipulate form fields beyond the standard val() method, this is the plugin for you!
10. XML to JSON - This is a cool utility if you work with Ajax and XML documents. Does what it says on the tin!

I could have easily made this a top 20 list, as there are so many good plugins out there, but then I would'nt have enough for my next list, but I hope you found at least one useful addition to your jquery library.

Print Design Competition

OptimalPrint are running their first annual print design contest for professional graphic artists and amatuer designers. Enter the contest here for a chance to showcase yout winning print design talent.

This design competition is divided into separate divisions for professionals and amateurs.

There will be 1 grand prize winner and up to 100 honourable mentions chosen from each division.

Professional design competition prizes

Grand Prize: 1000 GBP worth of print materials from Optimalprint UK and an iPod. The winning design will also be displayed on the Optimalprint UK website.

Honourable mentions: The top 100 entries will win a T shirt and have their design displayed on the Optimalprint UK website

Amateur design competition prizes:

Grand Prize: 1000 GBP Scholarship or Digital camera (Canon EOS 400D) The winning design will also be displayed on the Optimalprint UK website.

Honourable mentions: The top 100 entries will win a T shirt and have their design displayed on the Optimalprint UK website.

Design competition categories

1. Best and most original event card design:

1. Invitation card
2. Christmas card
3. Wedding invitation

Create a design for an event card not presently offered by Optimalprint. Entries in this category should employ unique design elements and should be relevant to one or more of the following age groups: Babies, Children, Youth, Adults or Seniors.

2. Best and most original business card design

Requirements for the design competition

1. All designs must be submitted by 12:00 Noon GMT on November 14, 2008 via online entry form
2. Each participant may submit one or more designs for each design category listed above
3. Upon registering please specify your status as either a professional designer or an amateur
4. No purchase is necessary to enter the design competition


5. Contestants may upload their designs in the following file formats :
   pdf, psd, eps, ps, bmp, gif, jpg, png, tga, tif, pcx, pct, svg, svgz, (MS-Word) docx, doc, rtf, (MS-Excel) xls, xlsx, (MS-Powerpoint) ppt, pptx, ai

You still reading? What are you waiting for, click here to enter the design competition!

Powered by ScribeFire.

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?

14 Reasons IT projects fail

I found this article today, which, although IT project failures are a problem to business, still made me chuckle. As a member of a large (20 +) team of designers and developers, deadlines and project milestones are a subject close to my heart, and not always in a good way!

The following list is compiled from a CIO.com report, and I found it on Michael Krigson's blog on ZDNet. Read it and giggle...

Staffing Mistakes
1. Projects lack the right resources with the right skills.
2. Projects lack experienced project managers.

Process Mistakes
3. IT doesn’t follow a standard, repeatable project management process.
4. IT gets hamstrung by too much process.
5. They don’t track changes to the scope of the project.
6. They lack up-to-date data about the status of projects.
7. They ignore problems.

Planning Mistakes
8. They don’t take the time to define the scope of a project.
9. They fail to see the dependencies between projects.
10. They don’t consider Murphy’s Law.
11. They give short shrift to change management.
12. Project schedules are incomplete.

Communication Problems
13. IT doesn’t push back on unreasonable deadlines.
14. They don’t communicate well with project sponsors and stakeholders.

I noticed a couple of glaring ommisions, particularly:

1. Weak delegation. If you don't trust the judgement of those you delegate to, you should'nt be delegating to them in the first place.
2. Too many chiefs, not enough indians - Need I say more

These points all seem like common mistakes, but sometimes common sense is left on your project managers desk, while he/she is in a meeting to plan the next disaster!

Tweaking the Blogger template

Well, that was fun! I have just finished playing around with the Blogger template to make it resemble the look and feel of the main UK Design Directory site.

I started with the changing the template to Minima Dark, then, through a process of trial and error, added css classes and HTML snippets to bring it into line with the stylesheet I am using on UKDD. Overall, I'm quite pleased with the result, but there's still plenty of room for improvement, in particular, moving the posting date from above the post title to below, and tweaking the appearance of some of the widgets (I have left them out at this point as I want them to match my page look and feel, particluarly the date display for each post).

When I get a bit of spare time I will have a go at writing a Blogger template from scratch, but, in the meantime, this'll do nicely! - If you want a copy of the changes I have made, drop me a line and I'll send you a copy.

An Interesting Firefox/Firebug "hidden feature"

Sorry for the title. Firebug bug just does'nt scan! I've been doing a bit of coding this evening, and found an interesting little bug. I'm using Firefox 3.02, with Firebug 1.2.1 to code/debug a bit of jquery javascript, and using the usual console.log(string) to write messages to the console.

This evening, however, I've been getting an odd "console is undefined" error message in Firebug. Arrgh. After a little bit of Googling I found these posts...

fBug - Google Code

Google Groups - Firebug

I found the solution (with jQuery at least) to be to simply put an empty console.log() before any other code (yes, wierd, but it works). I hope a reader finds this useful.

Watch this space

Well, after spending a while putting together the basic bones of the UK Design Directory site, I thought I'd begin a blog where I can rant and rave about the daily trials and tribulations of a web designer/developer.

Check back soon for articles about CSS, jQuery, Flash, ActionScript and other cool web development techniques and technologies