WEB TECH REPORT
Assignment 1: Pages
19:06 19th February 2012
Inkscape & SVG (drawing)
- I used InkScape to create the original Steve Stotter logo, as seen at the top of each page.
- I made each letter and object using freehand drawing using a graphics tablet. I then smoothed down each path, and pusged and pulled points.
- I manipulated the bezier curves of each point to create smooth paths and corners, as desired.
- I used booleans to cut the insides shapes away from the 'R' and 'O', so the page background would show through.
- I used linked offsets on paths to create accurate borders around each path.
- I decided to fill the image on InkScape as to keep it in SVG format, and therefore lossless. I used transparency in the gradient so that if my page background colour ever changed, it would still look great and blend into the page.
- The image is dynamically sized and animated using Raphael. Please see below sections.
- The resulting image can be found HERE
GIMP & PNG (painting)
- I used GIMP to create three images - AskAround Logo, ExPo Logo, and BloodBrothers Logo
- I created each of these three images from scratch, although I used a picture of an 'A' as loose reference to draw the AskAround logo, and I loosedly traced around GIMP text to create handwriting styled letters in the BloodBrothers logo.
- I used layers and many other effects including gradient and texturing to create these images. The reference objects noted above can be found in invisible layers.
- The resulting images in GIMP format can be found here - AskAround Logo, ExPo Logo, and BloodBrothers Logo
- Most of the other images on my website had been previously created by me, but using proprietary software, as they either needed to be 3D modelled in Maya or painted realistically with ArtRage.
- I used GIMP to anti alias all images.
- I've used the AskAround logo for any images which I haven't created yet, as a placeholder image for future images.
Raphael (animation)
- I decided to translate my name logo SVG into Raphael so I could manipulate the paths in animation. As a result, all of the paths have been created in my site.js javascript file.
- I hand translated the SVG properties from the image I created from InkScape into pure Raphael JavaScript, getting rid of unnecessary things such as layers and ids. Instead of layers, I used Raphael sets, translating each letter into elements I could play around with in JavaScript.
- I animated the title so that whenever you hover over a menu box, the corresponding colour in the title would move smoothly. This took me forever to write, as I wanted it to look polished and effective.
- The logo is dynamically sized - see below.
JavaScript (extra stuff)
- I have an integrated Twitter feed on every page in the heading. Instead of inserting a script tag into my html, I wrote an actual script to interface with the Twitter API.
- After looking at the Twitter blogger script I was using and linked to online, I decided this was quite inefficient coding. So I downloaded it and changed it.
- Amongst the changes, I implemented betterInnerHTML into it instead of the redundant innerHTML function. I also escaped characters effectively, as this was a big error in the original.
- I have developed a cross browser resizing method for the Raphael object SVG, which uses object detection rather than browser detection.
- I used jQuery to produce an original script for my Project page. The project DIVs animate on hover, even based on their neighbours, and the Project Frame updates with further info on the project. This is where you will see most of the GIMP images I created
Development Environment
- I primarily used Google Chrome as my development browser, although I had both Firefox and IE9 up on my computer to test all pages on too.
- I used gEdit for Windows to write and edit my site, and used my own domain and hosting to check how it was all working online.