Category Archives: WEBSITE

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.jonathanredwood.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.jonathanredwood.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:

Jonathanredwood.co.uk - Blog and Portfolio for Jonathan Redwood

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

And not:

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

404 Logging

I decided to setup my 404 page to log the wrong addresses people are attempting to use on my site to a mysql database. A simple version of the script below, add it to your 404 page and input the right login and table details.

&lt; ?php
mysql_connect(&quot;localhost&quot;, &quot;user&quot;, &quot;&quot;) or die(&quot;Cannot connect to DB!&quot;);
mysql_select_db(&quot;site&quot;) or die(&quot;Cannot select DB!&quot;);

$ip = getRealIpAddr();
$address = mysql_real_escape_string($_SERVER['REQUEST_URI']);

$insert = &quot;INSERT INTO `404_log` (`address`, `ip`) VALUES ('$address' , '$ip')&quot;;
mysql_query($insert); 

function getRealIpAddr(){
    if (!empty($_SERVER['HTTP_CLIENT_IP'])){
    $ip=$_SERVER['HTTP_CLIENT_IP'];
    }
    elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
    $ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
    }else{
    $ip=$_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}
?&gt;

getRealIpAddr function from here

Some SQL to setup the table.

CREATE TABLE IF NOT EXISTS `404_log` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `address` varchar(500) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
  `ip` varchar(20) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
  `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Catchup

I have been experimenting and working on my site continuously for the last few weeks but have not really blogged about it. The next few posts should cover:

  • 404 logging
  • Circular text
  • Modular pages
  • Comment system
  • Moving wordpress
  • Dynamic background

Website


Changelist:

  • Menu -relocated
  • Menu – changed to look like tabs
  • Menu – now consistent across browsers
  • Networking icons – reduced file size
  • Networking icons – moved to the left and made vertical
  • Various fixes and improvement to style.css
  • Tidied up code
  • Moved style images to seperate folder

Experimenting with:

The latest experimental version of my site can be found at http://www.jonathanredwood.co.uk/beta/

IDAT101 – New Look

Over the last few days I have been working on the appearance and functionality of my website. I don’t consider this to be what I want it to look like but more as an intermediate step towards getting there.

  • Replaced H1 with digital signature using CSS, text is hidden yet keeps its SEO value.
  • Made clicking on logo link back to main page.
  • Replaced entire header with a single image.
  • Switched entire site to .php
  • Added automatic year updating functionality to copyright statement.
  • Cropped and merged a number of pages.
  • Cleaned up image locations on server.
  • Updated all links.
  • Moved navigation menu position.
  • New favicon.
  • Altered .htaccess to direct 404 errors to 404.php.
  • Removed all iframes.
  • Removed all facebook API integration.
  • Replaced invalid embedded flash code with valid code.

Known issues:

  • Navigation menu stretches vertically in IE6 & IE7.
  • Navigation menu could look better.
  • Blog page loads awkwardly in IE6-8, maybe waiting for feedburner javascript to fininsh.
  • Imported blog content needs styling.
  • Gallery and connectivity link buttons uses some inline CSS.
  • Somewhat hacky use of CSS.

To do:

  • Fix known issues.
  • Add content to portfolio and about page.
  • Reintergrate twitter API.
  • Make site more dynamic.

IDAT102 – Mind the gap

Managed to fix the last visible bug in which when the browser window was at certain sizes a small gap between the right hand side of the menu and the main content area showed up.


I managed to fix this by changing:

ul#menu li {
padding: 0.3em 0.3em 0.3em 0.3em;

to:

ul#menu li {
padding: 5px 5px 5px 5px;

Evidently ems aren’t entirely consistent and it may have been a problem of it trying to round to the correct number of pixels but being just under. Pixels are more precise so this way is much better.

IDAT102 – Rounded corners, CSS, Validation and Compatibility fun

I finally worked out how to sort out my validation problem with the light gray to darker gray gradient. It was failing because of it being inside of the tags of the menu without having ‘li’ tags around it. But whenever the tags were added a gray border displayed around it as it was part of ul#menu in the stylesheet. Moving the image outside of the menu resulted in it appearing to the right of the menu instead of below it. So using ‘div id=”container”‘ to hold both the menu and the image and in ul#menu moving float:left; to it.

Using paint.net(I don’t have photoshop) I made up some rounded corners for my site’s header. I butchered some example code and eventually got it to do exactly what I wanted.

After this I set to work getting the rest of the site to pass by using the W3C validator to find the errors on each page. The irony being that having gotten the site to pass validation it now doesn’t work properly in internet explorer 7 on windows XP. Seeing as I only need to develop for firefox for this project it shouldn’t be a problem but its still annoying.

Oh well.

Probably something todo with this guy:

Working on:
Vista/Windows 7 with Firefox 3.5
Vista/Windows 7 with Internet explorer 8
Windows XP with Internet explorer 8
Windows XP with Firefox 3.5
Windows 98SE(for the 0.10% of people still using it) with Firefox 2
Mac OSX 10.5 with Firefox 3.5.3
Mac OSX 10.5 with Safari 4

Not working on:
Windows 98SE with Internet Explorer 6(fairly obvious that this wouldn’t work)
Windows XP with Internet Explorer 6
Windows XP with Internet Explorer 7

To test
Vista with Internet Explorer 7

I’m also currently trying to come up with a decent domain name for my server. For now at least I’m still using this rubbish free one, [removed], I’ll probably get one in the next couple of days.

At least I get a special badge.

IDAT102 – Browser Compatibility

I was having some problems with my website, I test on various platforms and eventually discovered that part of my site doesn’t work properly. Its a .png image that sits on the left of the page to blur the bottom of the menu into the background to balance the page. The gradient moves from the light grey of the menu to a darker grey. The only browser this worked on was Firefox on Windows.

After some head scratching, Florian suggested that it was that I had usesd the .png file format and a different colour profile for the image.

Switched to GIF.