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.
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/
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!!!!!!!!!!!
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.
< ?php
mysql_connect("localhost", "user", "") or die("Cannot connect to DB!");
mysql_select_db("site") or die("Cannot select DB!");
$ip = getRealIpAddr();
$address = mysql_real_escape_string($_SERVER['REQUEST_URI']);
$insert = "INSERT INTO `404_log` (`address`, `ip`) VALUES ('$address' , '$ip')";
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;
}
?>
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 ;
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: