1
I’ve split this section into three parts: firstly, the tools to develop and build the website itself, secondly, the tools to write the words and thirdly, the tools needed to make the images.
I started this project as a software engineer, I build and programme control systems for a living (industrial machinery, water treatment works, tritium handling systems for nuclear reactors — even I’m surprised 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 programming languages (and to be fair, I don’t think that was the intention when they were created), but it is (kind of ) how I think they should be and since I’m building this website, I guess my opinion counts.
I view it as code, I know people say HTML is the content CSS is the styling but really, it’s all just code. And that leads me to how to programme it, there are website building programmes: adobe dreamweaver etc. but Dreamweaver is expensive and I wasn’t sure I wanted to use it — my experience of these types of programmes and Adobe in particular is that they require quite an effort to just understand the programme (ask anyone who has tried to get to grips with Photoshop).
In the end I decided to do it myself using a text editor and coding from scratch, this at least, meant I only had to learn HTML and CSS, and I would get a good understanding of both.
It just left the question — which text editor? And my God there is a lot to choose from.
In the end I went for Brackets (despite what I just said about Adobe), this was on a recommendation; and its good. I like Brackets. It’s powerful, it’s easy to use, it’s open source and you can download it from brackets.io.
Brackets also lets you add extensions that do certain thing like add all those browser prefixes that nobody understands (don’t get me started on browser prefixes — you wouldn’t get away with that crap in proper engineering).
Brackets has a live preview function that lets you see the website your building live as you change it (there are some limitations, but these are mostly to do with Java script and jQuery and the re-loading of code, I cover this in § xxx) and this is very good.
I came to the conclusion that designing with the website open is the best way to see and understand what you are doing.
My basic web browser is Chrome, this is my personal choice and fortunately, it is the only one that works with Brackets’ live preview—get it from google (UK website).
Finally, a file transfer protocol (ftp) client, this is needed to upload the website. I use WinSCP (secure copy protocol). This is a very straight forward ftp client and is easy to use. It has a nice feature of synchronising the website with the offline content (the directories on your computer) and will automatically update the website whenever a change is made to any of the offline files. It’s good; you can get it at winscp.net.
That’s it for the web stuff.
The package I use most, and I use it a lot is Microsoft Word. I wrote the website content in word, if you’re reading this as a document (pdf download) then you are reading the original Word document containing the website content with all the styles and formatting that I wanted to recreate on the website.
I talk a lot about Word, well, complain really, and sometimes I’m rude; but I don’t mean it.
Word is incredibly powerful (I’m talking about the Window’s version, not that strange cut down thing that runs on Macs), and it should be praised — praise it with great praise.
It has its detractors: “it’s not open source” they say (Linux people—I’m talking about you here), it’s not free (Linux people—still you), it’s Microsoft, it’s Windows, it’s the devil’s work, blah, blah...(right, so it’s just Linux people that don’t like it).
But, and it’s a big enough but to start a paragraph with; we all use it—it’s the industry standard, yes it’s pricy and has it’s foibles but, it’s so much better than everything else.
Word is a jack of all trades and generally it does it well. There are some peculiarities, but mostly it’s easy to use and it just works. It handles tables and lists, the headings are simple to use, it hyphenates and justifies, it turns straight quotes into curly quotes without you noticing, it will automatically make tables of content and even indexes (yes, that is the right plural), it handles ligatures and kerning and some quite high level typographic concepts without bothering you.
To some extent, it’s its own worst enemy; it’s easy to just open Word and start typing, it’s also easy to copy an existing document and use it for a new purpose. The thing just works and it hides all the complex stuff. But the complex stuff is there, and for something that gets used every day, it’s worth knowing what’s happening behind the scenes.
It also teaches us about web design as you will find out; all those things we take for granted: making tables, headings, spell check — Word just does it. With web development, we now have to do it for ourselves, and believe me putting a table into a Word document and formatting it is a damn sight easier than trying to do the same thing on a website.
Word is our starting point for writing website content — don’t try and do it in a text editor, it will just be full of typos.
Where I’ve used images on the website, I’ve tried to use scalable vector graphics (svg) rather than jpegs, gifs, bmps or pngs. Scalable vector graphics as the name suggests are entirely scalable and work at any resolution.
The package I use most for making these images is Inkscape (again this is a free package; please donate if you like it). I also used this to make an icon font for some graphics I use on the website — I talk you through how to do this too. Inkscape is available at inkscape.org
If I am using pngs or jpegs (or other non-scalable images) I tend to use paint.net (again this is a free package), it’s nowhere near as powerful as Photoshop, but it is very easy to use and for me, does all I need. Get it here: getpaint.net; just be careful which link you click, it’s the “download now dotpdn link”, it’s in the grey table area near the bottom of the page (not the tempting big green button).
So that’s it, these are my tools of the trade:
Brackets (text editor)
Chrome (browser)
WinSCP (file transfer client)
Word (content creation and editing)
Inkscape (svg creator)
Paint.net (image editor)