Personality In A Site Cont:

As I mentioned in the previous post, I have now added a Portfolio link to my website in order display all of the uni/general work I am producing. Below is a screenshot of this:

It is currently very bare, but this is because I have not yet decided weather or not to add more to it. I like the fact that it is fairly basic as there is very small distraction away from the links on the left which lead to the individual work assignments. I have also placed icon images in the footer of the page which expand on the mouse hovering over them, which doesn't really have much of a purpose, but I felt was a nice touch.

Once the link is clicked it takes you to a separate page where the work is displayed, followed by a small description/explanation, shown below:

The Back link is clearly displayed below the description so it is easy to navigate back to the Portfolio page. I have also added the icon in the footer that is specific to this particular piece of work, making it easier for viewers to see the programme used to produce it.

I have also changed my index page again, only ever so slightly though. I didn't like the link 'ENTER' being dead on centre as it looked out of place, but also as it was text it did not fit the font I had used to create my web address image. To replace this, I used an image with the same font as the web address and changed the logo so that it would switch its black and red colours on the mouse over, allowing the user to clearly see that they can enter the site via the enter image. This is shown below:

OnMouseOver:

OnMouseOut:

Processing Completed:

As shown in the previous post, the finished sketch is very similar and still changes colours between red, green and blue only these colour changes are now dependant on the arch-os feed being taken from the Portland Square Building. By using 'if' statements to check weather the values being taken are greater or less than three different values, the sketch will successfully change depending on the values being received.

To make the sketch a bit more alive I also added classes to send circles/ellipses from top to bottom and left to right that also change colour depending on the RSS values.

Below is a print screen of the sketch in action:

if value is below, or equal to 50:

If value is above, or equal to 100:

If value is above, or equal to 1000:

Another change to this sketch is that I was unable to select just one factor from the xml feed. I had originally planned on only using the temperature values. Now the sketch takes all the different pieces of data from the arch-os and depending on its value will change the colour accordingly.

Personality In A Site:

The personal website I feel should capture/portray the personality it has been designed for. My original site was set to black and red, which is decided to stick with as I liked this look. However one thing I did not like was that the user had to scroll a a lot as the pages content was just run down the page. Another problem was that I had a separate pages for 'about me' and 'NPNG', which were only present as the brief for the first websites assignment was that it had to have four pages and I struggled to think of what to use. The less clicks a site has generally makes it easier to use, so I decided to just give a brief introduction to the site, and change the 'NPNG' page to my portfolio. This also makes the site more specific to me and showcase my university work.

Old Homepage:

New Homepage:

This is the new homepage so far, it isn't exactly how I want it, but definitely a step in the right direction, I do like the fact that my old homepage has a photo of me, as it shows who the site belongs to, the reason I have not yet put one on my new page is that I have not yet found the right one to use, however, I do have a good idea of what I am after. On the left of the screen shows a widget that displays my four latest tweets. This is a nice touch as it also broadens my online presence and will entice people to follow me on Twitter. However it is not exactly original. The idea I have is that I will put a photo of myself in the middle of the page with a blank t-shirt on. I will then position my latest Twitter feed onto the t-shirt. This makes it more creative. The red spiral image that can be seen at the moment is really just a test and temporarily masks the large amount of blank space for the time being.

Another new addition to the page is that I have added icons that link to my other online networks. By clicking on each of the icons the user is taken to my profiles, allowing them to add me as a friend on Facebook, follow me on Twitter etc. This broadens my online presence and helps my brand grow.

Below is what was shown on my NPNG page. This was basically a page dedicated to friends back home that I skate with as it further shows who I am and what I do, but doesn't fit the purpose of my site, but I do want to keep a part of it for my interests. To do this I have decided to keep a separate blog for things other than uni work.

NPNG page, now removed:

CONTACT:

My contact page has also been changed, again my first site followed a brief to be handed in for an assignment, which pointed the contact page to a website: samiam.com. This however is not desired for this site and I want people to be able to contact me by the messages being sent to me. I changed the old page from what is shown below to one that fit the same design as the rest of the site. Again the red spiral image will be changed later to better suit the sites layout, but this shows close to how the page will look.

Old Contact page:

New Contact page:

And finally, my Portfolio has been added to showcase the university work I produce for assignments and such, this will grow with work as my time at university progresses.

The Beginnings Of Something New:

The trouble with the first website I made was that it was difficult to balance what I wanted to design and build, with what I was capable of designing and building. However since the first term idat 101 has been very focused on the improvement of our sites as well as learning more of what we can achieve. Some of which is how we are able to display our latest Twitter feeds on webpages as well as how we are able to host our blogs on our sites ourselves. The advantage of this is that my blog will look exactly like the rest of my site, making it clear that it is my blog, and has the same design as the rest of my site. The issue before was that our blogs were hosted by other sites, forcing people to be navigated away from our sites to a different host. The fact that the blog is now on my site really keeps everything together.

My old Index page was extremely minimal, and by minimal I mean it was a black page with the word 'ENTER' placed in the centre of the page. I always wanted to have a fairly blank Index page, but now I have a logo designed, I also wanted to use this.

Below is the difference between my first Index page, to my new one.

Old:

New:

The new one clearly shows the domain address, my logo, the ENTER link and an image of me.

Processing Ideas:

After several weeks of tutorials on Processing it was now time to use what we had been taught to design our own sketches for an end of term assignment. There are many many different sketches Processing allows users to create, however the amount of sketches I personally was capable of achieving were minimal. The brief included having to have the Arch-os files of one of the university buildings to control the processing animation. I decided that I wanted to choose the temperature of the ground floor, and would design a sketch that fit this changing factor.

I visited processing.org and openprocessing.org I got many ideas for what I wanted to achieve with my design. I wanted a circle in the middle

of the sketch that appeared to go round, and changing colour depending on the temperature. Red for hot, green for an 'in the middle' temperature and blue for cold.

After browsing I found some code that I was able to

modify to change the sketch to fit my design plan. Below are print screens of the different temperatures being displayed. I used 'if' statements to control which colours were displayed.

If cold:

If warm:

If hot:

These are early sketched of the design. With each new ellipse drawn I changed the 'r, g, b' values to random(255) to change the shades of each of them to give the effects shown above. The circles are also constantly being redrawn so it is constantly updated and shows movement.

I still want to add other elements to the sketch, but will wait until I have the Arch-os working to control it, at this stage I have simply given the temperature a standing value to test each of the statements. So far though, a good start.

To make the circle follow the circumference of a bigger circle in the centre of the sketch I used a tutorial which used cos and sin in mathematics. I then placed the centre of the large circle to the middle of the page by positioning it to half the width and height, (height/2), (width/2).