Geoffrey Desborough Fab Academy

Week One

Assignment - Build a personal site in the class archive describing you and your final project.

Because I had not previously used HTML, CSS or Java my knowledge level was low on what was rtequired to make a website work and function. Previously for my existing website I had used SmugMug, this was a preconfigured website with lots of templates where image and text blocks could easily be dragged around on the screen and easily linked up to other pages, All the coding was done in the background and I didn't understand how the coding was working. Now having a basic understanding about how HTML works I can see how there would be a lot of restrictions to the flexibility of this type of website design. smugmug

Geoffrey Desborough SmugMug Website

To get me started I looked around on Google and talked with classmates to try and understand how HTML and CSS function. After a bit of searching I found a really useful website called http://www.hypergurl.com/ which really broke down what coding is happening in these applications and put it in really simple easy to understand language. It also had very helpful generators where you could see how the code affected what was displayed on the webpage, which was very helpful. I would highly recommend this method of learning to a beginner. It also had a large library of HTML tags where you could easily search for things like navigation bars, tables, paragraphs and other simple tags.

Once I had understood this a bit better I wanted to find a good text editor program where I could write my code. Preferably one that had live view and a way to make sure there were minimal mistakes in the code that could corrupt the files. I had a good friend who was studying Information Systems at University in Wellington and who had a lot of experience in coding. He recommended Komodo Edit as a good programme to use, so I took his advice and it has been very good.

Komodo Edit

Once I had made a basic index page (which is the home page) and figured out how to link it with other HTML pages I quickly had a basic website set up. A tip I would have for beginners when linking pages is to keep everything lowercase when naming pages, images and other source materials.

komodo

As a photography and design student I have a pretty good understanding of Adobe products. I had heard about Dreamweaver and how it worked, also how you could make files in Illustrator and export the CSS properties pretty efficiently so am in the process of figuring more of that out so I can create my layout and design in Illustrator and then export the CSS information into Komodo.

css

What I wanted my website to look like

css

Once I had my website set up and had numbered off a few other pages for the following weeks we learnt how to use Mercurial. This was the program we were going to use to push our website to the MIT servers every week to show our updated information. We normally used the computer in the lab or on Craig or WendyÕs laptop where they had the software on their computer.

Using Mercurial

- Reboot computer in Ubuntu

- Pull everyones site files on to the desktop and check for hidden files from Mac user folders (check all folders) (a good tip to keep hidden files hidden was to compress the website folder)

- Open Terminal

- Type, cd ~/Desktop/Archive

- Type, hg pull, wait for files to upload

- Type, hg update (if there were changes - skip if no changes)

- Open Archive folder on desktop and your own folder, delete everything in the file, move new files into folder

- Type hg addremove

- Check for unusual characters or files starting with symbols - check to make sure the right files were added and removed

- Type hg commit -m [enter descriptive message re: push]

- While we were carrying out this process, the site was changed, so we have to : hg pull (always) and then : hg merge (to deal with errors - read errors first before doing anything)

- Type hg push

- Type hg serve (to check URL - look at merge tracks)