Free web design helps from SitePoint - JQuery and more...

I have probably mentioned SitePoint before, but that is because they have some really useful things for web designers.

The offering that prompted me to blog tonight was some free sample chapters from their JQuery book, and better still - 100 free JQuery codes as well.

Get it here: http://bit.ly/a0sN6a

Their website is well worth checking out while you are there to see what other freebies are available.

Boom to Bust - Where have all the websites gone?

This BBC article about some of the once big names of the Internet brought back memories for me. It is strange to think that most of my current students were only kids at the time, anything between 5 and 10 years old. They probably won't remember most of these. But for me, as one who was working in a new web industry as a brand new web and graphic designer, many of these were the every day names we saw as examples of success.

It is interesting to see that not one of those names survives today.

For students of web design now, it is well worth looking at these early examples to see how things have changed (technology), and how some things have not (usability issues and big corporation buy-outs).

It is also interesting to see how Boo.com might have survived if it were launched today. While back then the internet was too slow to cope with the technology they were trying to use, today it would be no bother. Too ahead of its time perhaps? Or too willing to ignore the constraints of the time? You decide - but the lessons are still important now.

Any way - enjoy the article:

http://news.bbc.co.uk/1/hi/magazine/8568509.stm

And if you want to see what those sites might have looked like why not look them up in the Wayback Machine:

http://www.archive.org/

Setting Up Your Own Testing Server

Call it what you like, a "testbed", a "testing server", a "sandbox server", it all amounts to the same thing - a server for testing your sites, scripts, databases before you "go live".

When it comes to web design I prefer to use Dreamweaver (in conjunction with Flash, Fireworks and occasionally Photoshop). And when it comes to static websites that's all fine, you can test them in Dreamweaver by hitting F12 and getting a preview in your browser. But for more advanced sites this will not do...

3 good reasons why you need a testing server

Going beyond static sites, to sites that include server-side scripts (such as PHP or Perl (CGI)) or database connections such as discussion forums, content management systems or shopping carts, it is really useful having a place to test before you "go live". Having your own server allows you to regularly test as you develop without long upload times, and without your client getting glimpses of half finished work.

It's also great for designers wanting to learn or improve their dynamic web skills. So you want to learn some PHP? So you want to learn how to get Flash to talk to a database? So you want to practice setting up and customising a content management system or shopping cart? You're going to need a server - it's a handy place to practice without needing to buy webspace.

Finally, if you want to use Dreamweaver's testing server facility when you set up your site in the "manage sites" window... you need a testing server.

Admittedly, if you have a website of your own you could use your own website host for testing and practice by shoving it in a folder separate from the rest of your site. But this is far from ideal, since your testing site will be running from a folder below the web root, when you intend to run it from the web root when you "go live". Much better is to test it as it will run when live.

Relax

I confess that if I had not learned what I now know, the whole idea of setting up a server would be enough to send me back to bed for another couple of hours. It sounds complex, but some very clever and generous people have made it much easier than it used to be - read on.

Before we go any further - LAMP or WAMP?

Before we go further let me introduce the server platforms I will be discussing today - LAMP and WAMP.

L - Linux

A - Apache

M - MySQL

P - PHP

or

W - Windows

A - Apache

M - MySQL

P - PHP

You will already be aware that Linux and Windows are operating systems, and really that is the only major distinction between the platforms above.

Apache is FREE open source web server software.

MySQL is FREE open source database server software.

PHP is a FREE open source server-side scripting language/engine.

Loads of websites run on LAMP or WAMP. Loads of web hosting companies use LAMP or WAMP to host websites commercially. In fact, last time I checked, Apache was the most installed web server in the world.

Loads of free web software runs on LAMP or WAMP too:

PhpBB
Zen Cart
Joomla
Drupal
Moodle

To name but a few...

All free and all running on free server software. At some point I guarantee you will want to install at least one of these for a client or for your own use, you need some practice, you will need to test it as you "skin" or "theme" it, you need a testing server running Apache, MySQL and PHP.

(Although I am not going to explain commercial alternatives in this post, you should be aware that you don't have to use FREE open source server software, a popular proprietary alternative would be Microsoft's Internet Information Server (IIS), MSSQL a database server and ASP or ASP.NET for server-side scripting. The drawback is that this all requires a commercial license. the other drawback it that I won't be explaining these today.)

A couple of approaches

There are probably many approaches you can take, but I am going to discuss what are to me 2 of the easiest options:

1. Install a server on your development computer

2. Set-up a server using an old computer

Let's start with the first...

Install a server on your development computer - WAMP

This is my least favourite of the two options, but if you want something quick, and you don't have an old computer kicking around it's a good alternative. I use a Windows XP machine for web design and development, so this solution is effectively a WAMP solution.

The easiest way is to get a pre-configured bundle of Apache, MySQL and PHP and install it as an application onto your Windows machine. There are several free options, but I recommend:

XAMP: http://www.apachefriends.org/en/xampp-windows.html

or

Apache2Triad: http://apache2triad.net/

Setting-up

Download the installer, run it, and voila, you are done.

The installer sets up all the server software you need, and creates a web root folder. To test your site all you need to do is copy the files into the web root folder and start browsing. Your new installation of Apache, MySQL and PHP will process files in or below the web root folder as though they were on a web server (in fact they are on a web server at this point).

Couldn't be simpler.

Although I have used this type of approach many moons ago with Apache Triad, and while it is quick and easy, I recently built a server on a totally separate computer, rather than installing it on my development machine, and I prefer it - I guess I just don't like to clutter my graphics workstation up with too much other software (it's sucking my resources dry man, I can feel it) - just a little harmless paranoia. Which brings me to...

Set-up a server using an old computer - LAMP - the "real deal"

I did this just last week as the culmination of sporadic research over several months. You might think that setting up your own server hardware and software is the stuff of IT technitians and not the realm of designers, and depending on the type of designer you are, or your background you may still want to leave it to your techie friend. But I managed it so I urge you to read on.

And of course the great thing about this approach is that you are not making a simulation of a web server, you will end up with an actual web server in every sense. Stick it in a datacentre and you really could use it to host yours and your clients websites and email (if you wanted), this is the "real deal".

And being the "real deal" it has several advantages:

1. More than one person can use it as a testing server simultaneously - which makes it ideal for web design studios with several designers, and ideal for schools/colleges/universities/education allowing more than one student to upload and test their projects.

2. Each user can have their own login and testing server space. In fact each project can have it's own server space and login.

3. FTP, HTTP, HTTPS, PHP and MySQL all work the way they should.

As a testing server it is ideal because it is a real server.

There are loads of LAMP options out there, but being designers, not technitians we want one that is:

1. Easy to set-up

2. Easy to operate once set-up

3. Free - we're on a budget

Which, after my research and experience, leaves me with one option that ticks all boxes:

BlueOnyx: http://www.blueonyx.it/

It is described as a turnkey solution (meaning it is as easy as turning a key to get up and running) and it really is straightforward.

Setting-up

1. Is your network suitable?

Before we go any further you need to check that you are the right kind of network to have a server. Answer the following questions with a "YES" and you can go ahead:

Do you have a network hub or router with a spare LAN socket?

Do your other computers connect to the hub or router using ethernet cable or wireless?

Does the router connect to your broadband connection?

If you answered "YES" to all 3 questions, then you can go ahead. Hoorah.

2. Get your machine

First you need an old computer that works, but which you no longer need. the computer should have at least the following:

Processor (CPU): Reasonable speed

RAM: At least 256Mb

HDD (at least 40Gb)

Graphics Card: (spec irrelevant)

Network Card: 10/100 Mbps

Other Drives: Floppy, CD ROM

The higher the spec the better, but don't worry too much, I am running a working testing server with BlueOnyx on the following very low spec machine:

Processor: PII 266MHz

RAM: 256Mb

HDD: 80Gb

Graphics: 8Mb

Network Card: 10/100 Mbps

Other Drives: Floppy, CD ROM

Sound: None

And it all works like a dream. The fact is that my testing server doesn't have to put up with much load. It won't be experiencing thousands of visitors, only me, and in most situations a testing server probably won't have more simulaneous users than the number of designers using it. Obviously, the more users the the better your computer needs to be but the main areas of concern are:

HDD - Improve this to hold more files

RAM and Processor - Improve these to handle more simultaneous visitors

Web servers DO NOT need a good graphics card, they spend most of their time without a monitor plugged in because they are managed over the web via a web browser or shell client. Nor do they need a sound card.

3. Check you don't need it

Make sure you really don't need the machine for anything else.

Make sure you don't need any of the information on the Hard Drive. What we do next will wipe it completely. You will lose all data, software, downloads, accounts information, everything.

If you are using an old windows machine with an OEM Windows XP sticker on it, you need to know that we will be wiping Windows off the machine, and you won't be able to transfer the Windows licence to another machine. OEM licenses stay with the machine.

Are you sure you can spare this machine?

OK, let's move on.

4. Set up the machine for install

For installation you need to temporarily hook up a monitor and keyboard to the computer you plan to use. Make sure it has power but don't turn it on yet. Make sure it is connected to your network hub via the ethernet port in the network card.

5. Download and burn the BlueOnyx server set-up disk

The BlueOnyx set-up disc needs downloading as an ISO file and then burning to a blank CD.

Download the ISO file here:

http://www.blueonyx.it/index.php?page=downloads

Once downloaded you need to burn the ISO to a blank CD.

If you don't have software to burn the ISO to a blank CD, I recommend:

http://download.cnet.com/CDBurnerXP/3000-2646_4-10409086.html?tag=mncol

Burn baby burn.

6. Install the server software

This is the really exciting bit. Your old computer becomes useful again as a testing server.

Open the CD ROM drawer and insert the set-up disc.

Reboot the machine.

Booting from CD :-)

In most cases your computer will check the CD drive first, to see if it can boot from CD. If this is the case follow the on-screen prompts until installation is complete.

MAKE SURE you write down or remember usernames, passwords and IP addresses you put in during installation. You will need them later.

Not booting from CD :-(

You will know if the computer does not boot from CD if you see Windows starting up, or nothing happens and it complains it cannot boot. If this is the case you need to make sure the computer boots from the CD ROM drive before it boots from HDD by changing the "boot order" or "boot priority" in the BIOS.

Do this by pressing reset or restarting the machine, then hitting the F8 or F10 keys as soon as it starts booting up (a note on the screen should tell you which key).

Then the BIOS menu will appear and you need to hunt around for the "boot order" or "boot priority" and set CD or Optical Drive to be FIRST.

I would show you in detail but all BIOS menus are different (get your techie friend to help if you are not sure).

7. After installation

Once the server has finished installing (you will know because it will reboot and tell you to remove the CD) it is ready to begin acting like a server.

At this point you can unhook the monitor and then find a place where it won't get in anybody's way and plug it into the network there and switch it back on.

After a few minutes it will have booted up and you will be able to access the server via the web browser of any computer on the network and finish the set-up.

To do this simply input the IP address you gave to the server into your web browser.

You will then get lovely web interface to the server and be able to finish setting up.

And that's a wrap

At this point you have a web server. Look out for a future post on how to set-up "sites" on the server so you can test your work.

If you want to have a go on your own. Check my next post.

Internet Explorer 8

Web designers will be interested to know that Internet Explorer 8 is coming very soon. At present you can download release candidate 1, this means that it is ready for public testing while they iron out the last few bugs.

You might want to add it to your stash of browsers for testing purposes. After all, you want to make sure the next most popular browser shows your websites nicely.

Download it here:

http://www.microsoft.com/windows/internet-explorer/beta/worldwide-sites.aspx

Accessibility and Colour Blindness

Colour blindness has been more relevant to me this year more than previous years on account of having a colour blind student.

While it certainly doesn't make life easier for an Art & Design & Interactive Media student it doesn't make it impossible to work in the design industry either. I did know of a former product designer, who was colour blind, who had a successful career in industry and in teaching.

Even so, as a teacher, it is helpful to have some understanding of colour blindness so I know what to expect, and can help the student develop strategies to cope with areas of difficulty.
One resource I found recently is a website called Vischeck.

Vischeck provides colour blindness simulation tools, including an image previewer, a website previewer and a Photoshop filter. The site also gives information about a Daltonization algorithm for correcting images for colour blind people. All fascinating stuff.

I downloaded the Photoshop filter and installed it for Photoshop and Fireworks. It works fine in both.

I wondered how the normal visible spectrum would look to a colour blind person, and so I used the Photoshop filter to adjust a bog standard colour wheel. The results were truly astonishing:

I just cannot imagine a world so radically different to the one I see now.

Now I know why my student picked a muted grey/green instead of a vibrant green to represent grass in a client visual. To them they looked the same.

This insight into how colour blind people actually see the world is probably the most valuable outcome of this find. Meanwhile the Photoshop filter will allow me to demonstrate it to other people, and to gauge usability of my own designs.

Free Graphics Software

Countless times since my student days (lets not say how long ago that was), when Ebay or (more often) my wallet could not supply my software needs, I have resorted to hunting down freeware. And let me tell you, when you have been looking for freeware for as long as I have, you accumulate quite a stash. So to save other people the pain of hunting - I listed it all on my website, among the mundane are some real treasures.

Of course the great thing about my site is - it really is freeware - unlike some other websites that rate high on Google in freeware searches, but are mostly full of shareware with the odd free tid-bit thrown in. (If I wanted shareware I would have searched for it - surely Google can do better).

Anyhow - you have been spared the pain, and while you are free to enjoy the fruits of my labours at your leisure, allow me to introduce some nifty alternative freeware offerings for the skint but honest digital creative:

The freeware alternative to Photoshop or Paint Shop Pro...

...is of course The Gimp. There seem to be numerous download options for The Gimp, and while installable releases are available for Windows I have recently come to favour the trouble free Gimp Portable. Gimp Portable does not need installing, can run from a USB drive, or copy it to your HDD and shortcut to it in your Start Menu. It's a neat little package that just runs without having to mess about with all this GTK stuff.

The Gimp is pretty powerful, and in some places really does live up to the expectations of Photoshop users (layer masks, blending modes, magnetic lasso etc.) but if you need something less daunting I can recommend Serif PhotoPlus 6. I know Serif usually expect money for their software, but they are so confident you will like what they produce, and want to upgrade to the latest version, they are giving away slightly older versions of their graphics apps free. Definately worth checking out.

More here >

Dreamweaver or FrontPage are out of your budget...

...and Word is just too lame for words (forgive the pun), when it comes to web page design. In this case NVU is the best freeware alternative. I am of course assuming you want a web page design app that helps you manage your files, has built in FTP, allows WYSIWYG and Code View, previews CSS in design view, and doesn't "break" your PHP formating. All for the grand price of free.

More here >

Corel Painter also has a free alternative...

...in the form of Art Rage. The software's designers Ambient Design offer this program in Full and Free versions. Admittedly the free version does not have all the features of the full version, but it is still a credible alternative for natural media simulation. And if Art Rage does not meet your needs, you can always try Deep Paint 2 or Project Dogwaffle 1.2.

3D comes free as well...

...with some very powerful software. In fact the options for 3D freeware are so exciting I hardly know what to say. So I won't say anything apart from to list them below so you can let them speak for themselves (I hear you sigh with relief):

Blender - 3D modelling, animation, rendering, powerful but tricky
Bryce 5.5 - 3D landscape generation, animation, rendering, powerful but not too difficult
True Space 3.2 - 3D modelling, animation, rendering, powerful but easier than Blender
Plant Studio - The easy way to produce 3D plants for use in the above programs

More here >

And finally...

I could go on and on, but why bother when it's all on my website anyway. Just one more thing before I go, an important point to be aware of. Just because software is freeware, does not mean you can pass it on to your mates. Make sure you check you are OK to do that. Some freeware allows it, other freeware is more strictly controlled by the publisher. Be nice to the people who are kind enough not to charge and stick to the agreements you make with them when you install.

TTFN.