Web Design 14 – Resources

Hope you liked this little series outlining how you, like us, can learn web design from scratch, for free, in the comfort of your own home and start a lucrative business with it.  I’d like to take this opportunity to summarise with a bunch of links for software and learning resources.

Click here to see the first article in this series

Software

Comodo – free antivirus/firewall suite for Windows
OpenOffice.org – all the business software you need!
GIMP – your bitmap/raster graphics editor
FileZilla – a nice free FTP client for uploading your sites
FireFox, Chrome, and Safari – the three most popular browsers after Internet Explorer
Explorer Virtual – for checking in different versions of Explorer
Notepad++ – an advanced PHP editor
Kompozer – a simple WYSIWYG website editor
Inkscape – a vector graphics editor
Scribus – desktop publishing software
FontForge – typeface creation program
Thunderbird – a nice email client
FlashDevelop – create stuff in Flash!

Learning Resources

W3Schools – the “official” web developers learning site
Tizag – a great alternative to W3Schools
SixRevisions – has links to all the best tutorial sites for web developers
Grok the GIMP – advanced GIMP learning
A List Apart – CSS standards, technologies and tutorials

Wikipedia – start learning anything new here
About – a great place to get to grips with subjects for beginners
Google – not just a great search engine, but full of advice on SEO, marketing, and maps to stick in your site

FlashMP3 – a free MP3 player for your website.  Comes in many flavours, customisable
FLVplayer – a similar Flash application, but for video

PortableApps – find software you can run from a pendrive

And finally, proof that all this works, my girlfriend’s web design company:

Tangled Frog Web Design – if you’re good enough, we can send some work your way – or if you’re having trouble, we can handle the stuff you’re having trouble with.  If you’re too good, we can take on some of your overflow!

If you know of any more, let the people know!  Add comments with your favourite links and reasons why they’re useful.

If you have any problems at all with any part of learning web design, get in touch and I’ll post a link to your solution or write an article.

Good luck freeing yourself from the tyranny of college fees, overpriced software, the poverty trap, or just being a single parent with nothing to do – happy web designing!

Web Design 13 – Portability

Picture the scene – you’re on holiday, you don’t have a laptop with you, and one of your clients phones you up with an urgent update.  You might have access to a computer, but it would be a nightmare to have to install all that software just to make a few design and coding changes.

Help is at hand with PortableApps.com!  Here you will find most of the software featured in this series in a standalone form you can fit on a USB pendrive which can fit neatly in your pocket and will run fine without needing installed.

GIMP, OpenOffice, FileZilla, XAMPP, Thunderbird will probably  be your most useful, but there’s also portable versions of FlashDevelop (with a little tweaking), Scribus and InkScape.

If it’s GIMP, you’ll want to remember to add any fonts or brushes you’re working with.  If Thunderbird mail client, you can set up your test email addresses on it before you go.  When using XAMPP, you have to remember to put in the websites you’re working on!  Also, when you run XAMPP from a pendrive, you have to run the setup program before you begin, so it knows where it is.

Problem solved!  Now you can be a web designer from any computer, including Internet Cafes and friends machines, without installing a thing…

Web Design 12 – Hosting

When you run a web design business, you need some way of getting the pages online.

There are so many good and halfway decent hosting companies out there – find one that offers PHP and MySQL and a decent bandwidth and you’re away.  Most do, as PHP and MySQL are free to install for these companies, so it’s rare to find hosts that don’t.

The good ones will give you a free domain name and the ability to create email addresses attached to it, so you can set up an info@yourname.com, or me@yourname.com, or something similar.

You’ll also find it really handy to have a file transfer client for easy uploading of your site to the host’s server.

For this, the excellent FileZilla is available.  It, like all the software featured in this series, is completely free.  You enter the file transfer client server address, the user name and password and hit the “connect” button.  You are then given a multi-paned window with your computer and the server computer in them, and you just click and drag the files to upload them.

Fish around for a while, check that the host has the technologies available on it.  If they don’t, they might be willing to install it for you (as it’s free for them to do that).  Check the amount of databases they allow.  Some are unlimited, some only allow one or two, and some allow only on their paid accounts.

It’s possible to get free hosting.  There’s lots of good places to go for that, but you might need to allow them to put their adverts on your site to help them pay for upkeep and maintenance.  If that’s not what you want, you might want to pay a little for an ad-free host.

There’s lots of good hosts out there, and lots of dodgy ones so check out the comparison sites as these have reviews and lists of technologies like PHP and MySQL, and some have simple scripts installed on their admin panels which allow you to install other stuff like OsCommerce and WordPress at the click of a mouse.

We usually go with pacwebhosting.com as their service and support has been good and their packages are reasonably priced, but make sure you check because packages can change at any time, and service can go downhill as businesses expand.  Most of the good hosts out there offer readymade templates but to look professional, you and your clients should have tailor-made (or “bespoke” in web designer language) sites designed specifically for your needs.

It’s probably not a good idea to get a hosting account just to test PHP scripts, as they will usually have error messages switched off for security purposes.  This means that if there’s a bug, it won’t go splurging your database passwords and whatnot all over the screen for everybody to see.  Just use XAMPP until you’ve got it sorted then upload.

If you’re left with the job of arranging hosting for all your hundreds of clients and you’re with a good company, see if they have a re-seller account.  This means that you are now the hosting company as well as the web developer.  They’re usually expensive, but worth it for the flexibility and value you can offer your clients.  If you have enough customers, it can be a good deal.  Think about what your clients are needing and see if it offers good value for you.

Web Design 11 – Flash?

Learning Flash really comes under both graphic design and programming.  It’s based around animation of vector graphics and streams video and music extremely well.

The Flash development kit from Adobe is excellent, but it is also very expensive.  Is there a way to make Flash applications for nothing?  (without pirating that is!)  Yes there is.

I don’t believe Flash should be used for websites themselves.  This is just my opinion.  Flash should be used for those parts of a website such as music and video players, and games.  For these purposes, Flash is excellent, but there’s not much DHTML can’t do when it comes to nicely designed funky menu systems and content display.  Some people don’t have flash on their browser (like iPhone users) and some search engines might not get an accurate view of the content on your site if it’s in Flash.  This situation will improve, but it’s still best to leave Flash for the really funky corners of an ordinary website.

Having got that out of the way, how can we do it for free?

OpenLaszlo is a framework for creating rich internet applications.  It also does things like funky menus and slidey-out bits, like JavaScript and MooTools.  When you create an OpenLaszlo app, you can export it as DHTML or Flash.  DHTML is probably best for ordinary websites, but sometimes you do need Flash to go with, and OpenLaszlo has an excellent Flash support.

FlashDevelop is basically the Flash kit for free.  There’s lots it can’t do, but there’s lots it can do, too.  It’s a little more tricky to set up properly, but when you do you’ll find it indespensable for all your Flash needs.  It’s free and open source, so for a business startup and learning purposes it’s perfect.  Flash applications can be written in ActionScript, which is the native language for making flash programs, or in HaXe which is a very powerful programming language that can be used for making standalone applications too.

The actionscript tutorials on the web should work, but if you need any help, they have a forum over at the flashdevelop website.

FlashDevelop itself is a collection of technologies that all do separate useful things to create flash, brought together in a nice development environment.  Once you’ve installed the debugging version of the standalone flash player, you’ll be good to go.  Follow the installation steps very carefully, as you’ll need to install a few things one at a time.

Once you have it all properly set up, you can search around for ActionScript or Haxe tutorials and get writing your own Flash banners, menus and games!

Web Design 10 – Framewoks and Addons

If you’re doing lots of web design, and you’re used to using PHP and MySQL, have used JavaScript for funky page effects and have a lot of different stuff to do, it’s probably time to learn some frameworks.

You shouldn’t go straight from scratch into these things.  You should know at least a bit about the languages they’re written in and the many uses they have.  I’m going to list a few of the more used ones (free ones, that is) and what they do.  I’ve picked these because they’re free, and highly requested skills on freelancing websites…

AJAX

Ajax is simple.  It’s just a way of keeping some of the webpage online for later.  Unlike pure javascript and getting elements by id, you don’t need the hidden bits of your site to download all at once.  Only the bits you need are downloaded when you need them.  You can use XML (go to W3Schools if you haven’t read that) for your pure data but you don’t have to.  It makes a big webpage very fast if used properly.  For instance, having a Google Map on your site doesn’t mean having the whole world of Google maps downloaded to your website, but if you click and drag or zoom the Google Map, it will get the information down from the server when you need it.

The W3Schools has  a nice simple tutorial on AJAX, but there’s also hundreds of other places you can go to learn, and thousands of different applications.

MooTools – JavaScript Framework

If you use JavaScript for funky page effects and getting data on request, have a look at MooTools.  It’s used mainly for making cool menus and animated webpage expansions and has the ability to add physics-like rules, (for example, a drop down menu can bounce a little when selected, looking slicker and more expensive), but it’s also much more.

You still need to understand JavaScript and how it works, but MooTools can make it quicker and more consistent to apply.  Basically it makes JavaScript a lot more modern and powerful, and useful for kinds of complicated websites.

Joomla – Content Management

If you’ve ever used PHP and MySQL to make websites that your clients can update and expand themselves, Joomla is the next step.  It enables the user to add and edit content themselves, but it also has a lot of other features that would take a long time to program by hand.  A lot of Joomla (and other content management system)  based sites look ugly.  That’s because it’s too simple to just plug in, pick a theme and go.  A good web developer should know how to use Joomla within a client’s existing design so that it all looks seamless.  And still works well!

OsCommerce – online shops

If your client’s needs are simple, their product list is small and they have a nice simple website, you could probably make them a nice little shop in PHP and MySQL.  But if it’s a huge shop with loads of departments, you should probably get OsCommerce under your fingers.  It’s written in PHP and MySQL, but it’s huge and full of features.  It’s one of the largest online shop scripts you can get, and it’s free.  Cool.  There’s loads of design templates written for it, but you should at least have a bash at theming it yourself with CSS to match your client’s design if you can.

CodeIgniter, Zend, CakePHP and many more…

If you make lots of stuff in PHP, you’ll probably benefit from using a PHP framework.  There are so many available, it’s probably best to find the few most popular and try them out until you find one you like.  A PHP framework will make your stuff more stable and quicker to write.  At it’s basics, a PHP framework is a standard way of creating PHP applications fast and efficiently.

WordPress

WordPress is online blogging software.  It’s also used as a CMS (see Joomla) in some cases.  If your client needs a simple blog, you can probably write them one yourself with PHP and MySQL, but more often than not, you will be requested to stick them up a WordPress.  This blog itself is written on a WordPress blog which is installed at wordpress.com – sometimes you can just get them to set one up here and not need to bother with anything else except a link or RSS feed.  WordPress has hundreds of ready-made themes that are absolutely fantastic, but one of your jobs as a web designer will be to create a theme based on a client’s design.  You should really look hard into the bones of a WordPress theme and get some practise in making your own with CSS etc, because WordPress theming is an increasing part of a web designer’s job.

PHPBB – forum software

There’s lots of forum software available, you can even get a WordPress plugin that gives you one, but PHPBB is probably the most widely used free one.  It’s full of features, highly customisable and support is widely available.

There are lots of other frameworks and addons you can get for your sites, a Google around will reveal the most popular.  However, if you can get stuck into these, it will make the others easier for you to develop for.

Web Design 9b – Programming (Advanced)

By this stage, you should know XHTML, DHTML, how to work with the DOM, and be fairly proficient in JavaScripting.  But there’s more!

Server Scripting means you write a program that sits on the server and writes the HTML to order.  One of the benefits of this are that you can now attach a database to your website.  This means you can make a website with user logins and profiles, user uploads, like pictures and MP3’s as well as dynamic information like train times.  Server scripts can also send out emails.

Using server scripting means you can even have images watermarked and thumbnailed automatically.  Now you’re moving deeper into the world of web development and programming.

A free and incredibly popular scripting language is called PHP, and a free database you can attach it to is MySQL.  You should learn how to use these properly.

In order to work with PHP and MySQL, you’ll need to run server software on your computer.  There are loads of ways to do this, but a simple and easy way is to download and run XAMPP.  This is the incredibly popular Apache Server software running alongside MySQL database and a PHP compiler.  It comes with the Mercury Mail Server, which will let you send emails.  If you have a mail client like Outlook Express, Windows Mail or Thunderbird you can set it up to test your mail scripts.

Once you have XAMPP installed on your computer, you can start learning PHP.  A PHP file is just a text file with the .php extension (eg index.php), so you can make it in Notepad.

The W3Schools and Tizag are good places to start.  Both of these will teach you how to use PHP for mailing, creating and accessing SQL databases (like the free MySQL) and mathematical calculations.

Any time you get stuck, you can go to the PHP website itself, or join one of the many web development forums for advice.  Remember to search for the answer first so you don’t end up annoying everybody!

Now your programs will be getting bigger and bigger, it might be a good idea to give Notepad a miss and download Notepad++.  It’s bigger, better, allows you to have multiple files open at once in handy tabs, and colour codes all your text so it’s easier to work with and spot mistakes like tags that haven’t been closed properly.  Also, it saves your tabs when you close it so if you have to leave in the middle of a complicated project you can return to it without fuss.

If you’re serious about learning programming, it’s good to get into other programming languages.  Some of these are:-

Python – named after the 70’s comedy team, Monty Python, this is an incredibly versatile language.  It’s not just for websites, you can write Windows and Mac software with it too.  It’s also really easy to learn (there’s even an online book for kids to learn Python!) but incredibly powerful.

Ruby on Rails – this is an incredibly efficient and powerful system for server scripting and database access.  It’s based on the Ruby language and is popular with people who have huge complicated websites.

Perl is a language that, while it can be tricky to learn, is extremely efficient.  It’s used in a huge range of applications, both on and offline.  Learning Perl will be good for you, even if you never use it…

C (and all it’s variants) is considered to be THE programming language.  With C under your fingers, you can write anything from server applications on websites, to operating systems themselves like Linux.  You should at least attempt to learn C.  It’s tricky, but there’s so many people using it it’s hard to go wrong.

Not just languages, but methodologies are important for the professional programmer.  There are hundreds of methodologies, but one of the most important right now is called Object Oriented Programming, or OOP.  This breaks up the program into “objects” which can be shared and reused making programming huge pieces of software a lot easier.

However, by reading about a few different methodologies and programming techniques, you will make yourself a better programmer all-round.  If you need to edit an old or second hand program, it will make you much more adaptable.

I’m not going into detail here, because the purpose of this blog is to help you find information for yourself and tell you what to Google for rather than teach specifically 🙂  This is better than just one tutorial.

You could look up SSADM and Extreme Programming for an idea of various approaches to programming.  The hacker community is built around various philosophies and ideals which will prove valuable to adopt, such as efficiency and the desire to solve problems in general.

“Hacker” in this way does NOT mean breaking into systems, it just means expertise in programming.  Programmingy type people use the term “Cracker” for that.  Of course, a hacker can be a cracker and vice versa, but not necessarily.  In other words, a hacker is likened to a car mechanic who can fix and build cars, and cracker is more like someone who can pick a lock and hotwire a car.

There is an excellent book online that deals with the Hacker mentality and history of the terminology and techniques.  You should read it if you want to become a programmer.  It’s called “How to Become a Hacker”.  Enjoy!

Web Design 9a – Graphic Design (Advanced)

When you’re a halfway decent web designer working in CSS and JavaScript, you can expand your skillset by learning how to work in other software and with various different techniques.  A good logo designer can make hundreds of pounds, and sometimes you will be called on to create a corporate identity – choosing the colours and designs for their printed material and advertising media.

This is when you should learn Vector Graphics, Desktop Publishing and Font Creation.

You should also learn as much as you can about good graphic design, what fonts to use, what makes a good logo etc.  You can buy books on this, but About.com and Wikipedia are excellent places to start for free.  Take a look at any tutorials that teach “grunge” style techniques or “web 2.0” design.  A range of sites you make designed to these styles will give your portfolio an edge.

Vector Graphics

The free software you’ll need for this is called Inkscape.  The benefit of vector graphics is that it shrinks to very small and can be increased to huge sizes with no loss of quality, unlike graphics created in GIMP (called raster, or bitmap graphics).  This is really useful for logos and icons that will need to be the same whether printed on a huge billboard or used as a tiny icon on a webpage.  The Inkscape software itself has some good beginner tutorials in it’s help menu, and the Inkscape website has a link to lots of tutorials which will make you better at it.  Then Google for some good vector graphic artwork and see if you can recreate it.  Deviant Art has loads of tutorials and excellent examples.  Remember, the more you do, the better at it you’ll be.

If you’ve already been working with paths and brushes in GIMP, you’ll understand a lot better how vector graphics work.

Desktop Publishing

If you need to create anything not on computer, you’ll need some good desktop publishing software.  Then you can make business cards, leaflets and booklets.  And charge more.  Again, the internet is full of great tutorials on page layouts, business cards and all aspects of DTP.  Just search!

You can get good DTP software for this for free.  It’s called Scribus.  It’s a huge and versatile piece of kit, and the website has beginner tutorials on making magazines and adverts.

Fonts

If you’re used to vector graphics and have used paths in GIMP, you can download software called FontForge and learn how to make your own typefaces.  If you’re making banners and headings for your clients, you can just make text in GIMP or Inkscape using the fonts you have, and stretch or squeeze them or add swirly bits to your heart’s content.  This is great if you have one-off jobs, but if you have some font making software under your fingers, you can then add these fonts to your favourite wordprocessor, or distribute them to others online.

About.com and Wikipedia have great articles on all these aspects of graphic design, and there are hundreds of blogs and websites by pro’s you can read that will give you an idea of current trends and techniques.

Also, if you have a sketchbook for regular doodling it will help you with clearing creative “blocks” and for experimenting with different colour combinations.

Look at some of the highest paid graphic designers/artists work and try and learn from them.  Try to develop your own design style and use it to great effect.  You’ll probably get work from people who love your style and want it in their own stuff.  Be as unique as you can, but show you’re versatile in any kind of design work.