Author Archives: Jo Redwood

About Jo Redwood

Student at the University of Plymouth, studying digital art and technology.

IDAT205 – Pluxel-Connect

I am working on a feature so that on each of our personal sites there is a button that opens an element displaying pluxel related content.
It must:

  • Do this only with a single lump of code that is easily added to the team’s pages
  • Work on all of our sites and be compatible with most browsers
  • Load and parse content from various sources efficiently
  • Fail gracefully if one or more sources of information are unavailable
  • Present information in an elegant way
  • Robust and reliable

Another element I may be work on is a portfolio page system.

IDAT205 – Pluxel Design

Simon Batty, Tom Saunders, Scott Addelsee and I have formed Pluxel Design as part of this project. Our group has a mixed skill set which puts our collaboration in a good position to do well.

The name pluxel is a corruption of pixel and Plymouth. After lengthy discussion the name was chosen because it is short, stands out, was available to register as a domain and relatively easy to deal with in terms of SEO. ‘Design’ can be appended to the end in order to describe our purpose. Various accounts have been set up, including twitter, as outputs for our content and to protect the brand. We have registered the domain name pluxel.co.uk which now points to a temporary location on my own server used for development for the sake of SEO.

The general purpose of the site is to produce websites primarily for small businesses and organisations at competitive rates as well as showcasing relevant digital art projects undertaken by the team. Selected content will be aggregated from the team in addition to content generated specifically for Pluxel Design to ensure high and consistent quality, demonstrating our collective skills. I have taken on the role of project manager.

Back to University

I have had a relatively productive summer working on various projects to improve my programming especially in php. The main site hasn’t really changed much apart from replacing the php GD generated GIF logo with the flash version, minor tweaks and optimisations and HTML5 compliance. The main focus of my effort has been the website for my Garry’s mod server. I have been getting feedback from its users which has been really helpful when developing my ideas and implementing new features. Hopefully I am in a good position for the year ahead.

Twiter logo circle thing ported to SVG

I have finished porting my twitter logo thing to SVG.

This was very similar to the PHP generated GIF method, I created a small function that echoes the code for each string in the SVG format. I opted to use the twitter XML feed instead of JSON as the number of requests will be higher as it does not cache any generated output.

Browser support.

Chrome/Safari work perfectly
Firefox is without animation
IE6-8 do not display without this installed: http://www.adobe.com/svg/viewer/install/ but with it work perfectly.

http://www.joredwood.co.uk/svg.php

Twiter logo circle thing ported to Flash

I have finally ported my twitter feed rotating logo thing into flash. So far it has been made in Processing, php GD generated GIF and flash and attempted in inconsistent HTML-CSS-JS. I have not yet decided what format to try to port to next, HTML5 canvas looks like a dead end for now based on what I have managed to find out and processing.js has some way to go till it supports all the necessary functions.

I have chosen to port this to various formats as practice of different languages without having to redo the core logic of the code that is to import the string, divide the string into each letter, measure the width of each for correct kerning, calculate the position and rotation around the circle, draw the character. This allows me to focus on the differences between the languages themselves.

I may release the source for some of these at some point in the future.

Computer Builds

In my spare time I build computers for people, self building allows you to get the best performing parts with your budget.

This is the list of the components for the last computer I built and I would recommend them to anyone building a computer with a £700 budget.

£400 Destop mostly for office use and some gaming.
AMD Athlon II 250 X2
XFX Radeon HD5750
4GB Corsair DDR3 1333
Gigabyte MA770T-ES3
Samsung spinpoint F3 500GB

Rotating twitter circle thing

I still wasn’t happy with using jQuery for the rotation so I decided to have a play with a php class for generating animated gifs. I eventually got this working after several hours.

A 140 character post took around 3 seconds to generate and put a significant load on the server so I added a cache feature that stores a copy of the gif to be served untill my latest tweet changes and it generates a new one. The only problem now is the filesize of the gif and the rather hacky layering of images.

http://www.joredwood.co.uk/content/twitlogo4/

Rotating Twitter Logo Feed

This has been a fairly long running project for me which was to create a copy of my logo with circular white text rotating around the ring.

My previous effort using processing hit the serious flaw of crashing some people’s browsers so I chose to attempt to achieve the same thing without using any browser plugins, meaning only HTML, CSS, Javascript and php.

Firefox, Opera and Chrome allow ‘relatively’ easy rotation using CSS. Shown here.

-webkit-transform: rotate(90deg); 
-webkit-transform-origin: 0 0;
-moz-transform: rotate(90deg);
-moz-transform-origin: 0 0;
-o-transform:  rotate(90deg);
-o-transform-origin: 0 0;

There is an ancient feature for IE dating back to 5.5 which allows for rotation but it works differently. After a huge amount of experimenting with this I decided to abandon this method because of issues with browser compatibility and the impractical amount of HTML and CSS code generated by php for each individual letter.

So I decided to try using php GD to write the text to a .png file which could then be rotated using a jQuery function I had found.

The php imports the last twitter post, explodes it into an array, the script loops through the array calculating the position and rotation then writing to the png.

I will publish the source in a seperate post.

It can now be seen here:
http://www.joredwood.co.uk/content/twitlogo4/

A little SEO

Your index page’s title is used for the title for your site when it appears in search results. It is important to pack the relevant keywords you are optimising for into it. The length to aim for is around 65 charaters for your title to be displayed fully in google’s SERP(Search Engine Results Page), the precise length seems to vary depending apon the number of characters that overlap the boundary.

For mine I came up with this at 63 characters:

joredwood.co.uk - Blog and Portfolio for Jo Redwood

Try to be descriptive, only use keywords in context and try to make it visually appealing.

And not:

>>>>>CLICK HERE<<<<< LOOK @ MY WEBSITE!!!!!!!!!!!