1Introduction

I’ve split this sec­tion into three parts: firstly, the tools to de­velop and build the web­site it­self, sec­ondly, the tools to write the words and thirdly, the tools needed to make the im­ages.

I started this pro­ject as a soft­ware en­gi­neer, I build and pro­gramme con­trol sys­tems for a liv­ing (in­dus­trial ma­chin­ery, water treat­ment works, tri­tium han­dling sys­tems for nu­clear re­ac­tors — even I’m sur­prised they let me work on that one), but not HTML and CSS; that was new to me.

HTML and CSS are not what I would call pro­gram­ming lan­guages (and to be fair, I don’t think that was the in­ten­tion when they were cre­ated), but it is (kind of) how I think they should be and since I’m build­ing this web­site, I guess my opin­ion counts.

I view it as code, I know peo­ple say HTML is the con­tent CSS is the styling but re­ally, it’s all just code. And that leads me to how to pro­gramme it, there are web­site build­ing pro­grammes: adobe dreamweaver etc. but Dream­weaver is ex­pen­sive and I wasn’t sure I wanted to use it — my ex­pe­ri­ence of these types of pro­grammes and Adobe in par­tic­u­lar is that they re­quire quite an ef­fort to just un­der­stand the pro­gramme (ask any­one who has tried to get to grips with Pho­to­shop).

In the end I de­cided to do it my­self using a text ed­i­tor and cod­ing from scratch, this at least meant I only had to learn HTML and CSS (and some JavaScript, but not much), and I would get a good un­der­stand­ing of both.

It just left the ques­tion — which text ed­i­tor? And my God there is a lot to choose from.

In the end I went for Brack­ets (de­spite what I just said about Adobe), this was on a rec­om­men­da­tion; and its good. I like Brack­ets. It’s pow­er­ful, it’s easy to use, it’s open source and you can down­load it from brackets.io.

Brack­ets also lets you add ex­ten­sions that do cer­tain thing like add all those browser pre­fixes that no­body un­der­stands (don’t get me started on browser pre­fixes — you wouldn’t get away with that crap in proper en­gi­neer­ing).

It also has a live pre­view func­tion that lets you see the web­site you’re build­ing live as you change it, and this is very good.

I came to the con­clu­sion that de­sign­ing with the web­site open is the best way to see and un­der­stand what you are doing.

My basic web browser is Chrome, this is my per­sonal choice and for­tu­nately, it is the only one that works with Brack­ets’ live pre­view — get it from google (UK web­site).

Fi­nally, a file trans­fer pro­to­col (ftp) client, this is needed to up­load the web­site. I use Win­SCP (se­cure copy pro­to­col). This is a very straight for­ward ftp client and is easy to use. It has a nice fea­ture of syn­chro­nis­ing the web­site with the of­fline con­tent (the di­rec­to­ries on your com­puter) and will au­to­mat­i­cally up­date the web­site when­ever a change is made to any of the of­fline files. It’s good; you can get it at winscp.net.

That’s it for the web stuff.

The pack­age I use most, and I use it a lot is Mi­crosoft Word. I wrote the web­site con­tent in word, if you’re read­ing this as a doc­u­ment (pdf down­load) then you are read­ing the orig­i­nal Word doc­u­ment con­tain­ing the web­site con­tent with all the styles and for­mat­ting that I wanted to recre­ate on the web­site.

I talk a lot about Word, well, com­plain re­ally, and some­times I’m rude; but I don’t mean it.

Word is in­cred­i­bly pow­er­ful (I’m talk­ing about the Win­dow’s ver­sion, not that strange cut down thing that runs on Macs), and it should be praised — praise it with great praise.

It has its de­trac­tors: “it’s not open source” they say (Linux peo­ple — I’m talk­ing about you here), it’s not free (Linux peo­ple — still you), it’s Mi­crosoft, it’s Win­dows, it’s the devil’s work, blah, blah…(right, so it’s just Linux peo­ple that don’t like it).

But, and it’s a big enough but to start a para­graph with; we all use it — it’s the in­dus­try stan­dard, yes it’s pricy and has it’s foibles but, it’s so much bet­ter than every­thing else.

Word is a jack of all trades and gen­er­ally it does it well. There are some pe­cu­liar­i­ties, but mostly it’s easy to use and it just works. It han­dles ta­bles and lists, the head­ings are sim­ple to use, it hy­phen­ates and jus­ti­fies, it turns straight quotes into curly quotes with­out you notic­ing, it will au­to­mat­i­cally make ta­bles of con­tent and even in­dexes (yes, that is the right plural), it han­dles lig­a­tures and kern­ing and some quite high level ty­po­graphic con­cepts with­out both­er­ing you.

To some ex­tent, it’s its own worst enemy; it’s easy to just open Word and start typ­ing, it’s also easy to copy an ex­ist­ing doc­u­ment and use it for a new pur­pose. The thing just works and it hides all the com­plex stuff. But the com­plex stuff is there, and for some­thing that gets used every day, it’s worth know­ing what’s hap­pen­ing be­hind the scenes.

It also teaches us about web de­sign as you will find out; all those things we take for granted: mak­ing ta­bles, head­ings, spell check — Word just does it. With web de­vel­op­ment, we now have to do it for our­selves, and be­lieve me putting a table into a Word doc­u­ment and for­mat­ting it is a damn sight eas­ier than try­ing to do the same thing on a web­site.

Word is our start­ing point for writ­ing web­site con­tent — don’t try and do it in a text ed­i­tor, it will just be full of typos.

Where I’ve used im­ages on the web­site, I’ve tried to use scal­able vec­tor graph­ics (svg) rather than jpegs, gifs, bmps or pngs. Scal­able vec­tor graph­ics as the name sug­gests are en­tirely scal­able and work at any res­o­lu­tion.

The pack­age I use most for mak­ing these im­ages is Inkscape (again this is a free pack­age; please do­nate if you like it). I also used this to make an icon font for some graph­ics I use on the web­site — I talk you through how to do this too. Inkscape is avail­able at inkscape.org

If I am using pngs or jpegs (or other non-scal­able im­ages) I tend to use paint.​net (also free), it’s nowhere near as pow­er­ful as Pho­to­shop, but it is very easy to use and for me, does all I need. Get it here: getpaint.net; just be care­ful which link you click, it’s the “down­load now dot­pdn link”, it’s in the grey table area near the bot­tom of the page (not the tempt­ing big green but­ton).

So that’s it, these are my tools of the trade:

• Brack­ets (text ed­i­tor)

• Chrome (browser)

• Win­SCP (file trans­fer client)

• Word (con­tent cre­ation and edit­ing)

• Inkscape (svg cre­ator)

• Paint.​net (image ed­i­tor)