28th Oct 2011
website improvements
Over the last couple of weeks, I've been trying to tidy up this website -
I finally got around to making a proper 404 page,
and various other minor tweaks.
More importantly, I've redone the games pages to be more attractive,
consistent and easier to maintain. Once I'd started doing that I couldn't resist
working around the limitations to get rotating palette ads working again, so I
cover that in some detail.
I know this probably isn't that interesting to most people, but you can always ignore it.
Advert
New Games pages
The page layout is entirely by css, which will hopefully display properly
on most browsers written in the last decade.
(For some reason IE6 hates the whole site, but I've given up on that now.)
My main desire necessitating the redesign was that the layout be fluid,
formatting itself to a range of browser widths, with the game description
flowing around the game itself. I also wanted adding a new game to be
easier, with less scope for error.
My approach here uses server-side includes (SSI) to build each page.
The initially referenced file sets up some variables, and references
other files which get included in the output.
I have standard 'top' and 'bottom' sections, which between them define
most of the webpage. These use the variables to specify the things which need
to change dependent on the page : the game's name, gamefile url and so on.
Sandwiched in-between the two incorporated files is the game description,
which generally meant to be completely different for each game.
By doing it this way I've taken a trade-off of ease of maintenance
at the cost of more server work generating the page. Since my server
is under-utilised this was an easy decision to make.
Colour-changing Ads
rotating colour-palette ad.
While doing the above, I realised that earlier in the year, Google had
removed some functionality from ad-sense. Previously, it was possible
to set up adverts to randomly choose from up to four colour-schemes, with
"rotating color palettes".
I thought this was great fun, but apparently this didn't see much use.
As this is no longer a service, I decided to see if I could get a similar
effect myself. It turns out that it is using just SSI, and without modifying
Google's code as it's seen by the browser - for a very few adverts per page.
The first thing to do is set up several adverts with different colour-schemes.
Here I'm using this method primarily for links units, as the others tend to pull in
graphical ads anyway.
Apache SSI scripts can't generate random numbers, but you do have access to
the time, and can pull pseudorandom numbers from that by setting the time
format for example to just give seconds.
Here is the basic code I'm using for one advert on the page:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-*my-account-id**";<!--#config timefmt='%S'
--><!--#if expr='${DATE_LOCAL} >= 45' -->
/* link unit pastel blue */
google_ad_slot = "*adcode-1*";
<!--#elif expr='${DATE_LOCAL} >= 30' -->
/* link unit pastel green */
google_ad_slot = "*adcode-2*";
<!--#elif expr='${DATE_LOCAL} >= 15' -->
/* link unit pastel purple */
google_ad_slot = "*adcode-3*";
<!--#else -->
/* link unit pastel yellow */
google_ad_slot = "*adcode-4*";
<!--#endif -->google_ad_width = 160;
google_ad_height = 90;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
This cycles the ad displayed every 15 seconds. By changing the numbers, you can have up to 60 (!) different options. If you want them to have equal opportunity of being shown, you could have 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 or 60 different options. The more options you have, the longer the code, and the more work to parse by your server.
The reason for the slightly odd-looking line-break positions is to give the output the appropriate formatting. Newlines before the end of the SSI command don't affect the server parsing, and are not passed on to the output.
Obviously if you want a second ad on the page to change independently, you'll
need a second, independent 'random' number - I use minutes, and cycle through my four ads
three times, yielding a change every five minutes.
To do this, change the string in the config timefmt command. Potentially suitable options are:
| string (case sensitive) | description | range | current value |
|---|---|---|---|
| %S | Seconds | 0-59 | 57 |
| %M | Minutes | 0-59 | 40 |
| %I | 12-Hour | 1-12 | 02 |
| %H | 24-Hour | 0-23 | 02 |
| %w | day of week | 0-6 | 0 |
If you really, really wanted multiple, rapidly and independently changing ads, you could use the residual data in the seconds component, but it's at the very least more complicated, and probably not worth it. It's desirable for the colours to change independently, but it probably doesn't matter if a particular ad is the same colour for someone who sits around refreshing the page every few seconds. In any case, for more than two ads it might be worth thinking about other methods - perhaps a chron job could regenerate them every few minutes using better pseudorandom number generation facilities.
Just to labour the point, there are lots of possibilities here.
Changing background colour dependent on the time of day is a cliché. But it
is also possible to change layout in a subtle or blatant manner.
When creating a set of ads, you're not restricted to colour changes - you
could have ads of different sizes, or you could move it around by including
html in the rewritten section.
Remember that this isn't for every site - even enabling SSI for the page puts extra load on your server - if you get a lot of traffic to a page you might need to make it static.
Useful links:- All about Server side includes
- Easier SSI tutorial including random numbers from time.
- SSI time formats. Alternative page - SSI date command
Got a comment? Leave it below, or email me feedback privately.
Advert
Advert
Comments