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.

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.

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.