clawg blog

The thoughts of Charlie Law. Front end Web Development and general ramblings

Archive for the ‘Web Development’ Category

iPhone 4 – 12, 18 & 24 Month Contracts

I done some research on iphone 4 contracts before deciding on who to go with. The values in bold are the actual cost of the phone once you pay your monthly bill and the cost of the phone.

24 Month Contracts

02
£25 pm – 100m, unlimited txt, 500 data, £279 phone = £36.61
£30 pm – 300m, unlimited txt, 500 data, £179 phone = £37.56
£35 pm – 600m, unlimited txt, 500 data, £119 phone = £39.96
Vodafone
£30 pm – 300m, unlimited txt, 1g data, £169 phone = £37.04
£35 pm – 600m, unlimited txt, 1g data, £119 phone = £39.96
£25 pm – 75m, 250 txt, 1g data, £219 phone = £34.13
Orange
£30 pm – 150m, 250 txt, 750 data, £169 phone = £37.04
£35 pm – 600m, unlimited txt, 750 data, £119 phone = £39.96
£25 pm – 75m, 125 txt, 750 data, £229 phone = £34.54
3
£30 pm – 500m, 5000 txt, 1g data, £99 phone = £34.12
£35 pm – 900m, 5000 txt, 1g data, £99 phone = £39.13
£35 pm – 2000m, 5000 txt, 1g data, £169 phone = £42.04
T Mobile
£25 pm – 100m, 100 txt, 500 data, £259 phone = £35.79
£30 pm – 300m, 300 txt, 500 data, £219 phone = £39.13
£35 pm – 600m, 500 txt, 500 data, £189 phone = £42.88

18 Month Contracts

02
£30 pm – 100m, unlimited txt, 500 data, £209 phone = £41.61
£35 pm – 600m, unlimited txt, 500 data, £179 phone = £44.94
Vodafone
£35 pm – 300m, unlimited txt, 1g data, £169 phone = £44.38
£30 pm – 75m, 250 txt, 1g data, £219 phone = £42.17
Orange
£30 pm – 150m, 250 txt,750 data, £229 phone = £42.72
£35 pm – 600m, 500 txt, 750 data, £229 phone = £47.72

12 Month Contracts

Tesco
£35 pm – 750m, unlimited txt, 1gb data, £229 phone = £54.08

Modern CSS techniques

I have updated this site with a few techniques that I have been reading about in the web dev community. Some of them are pretty obvious and others are simply code tweeks. I have took the attitude of using advanced CSS techniques that will only get seen in modern browsers, also known as “too hell with Internet Exporer”. Links to the tutorials I used have been included where appropriate.

Site tweeks include

This is very much a work in progress so I will be adding more things over the next few days and weeks. My blog is my playground and to answer the question “what does it look like in ie”, well I dont know cause I havent tested yet, but I bet its not as good as it looks in FF or Safari.

Positioning ad code at the end of the page

Sites that need to generate ad revenue are often littered with ad scripts throughout the HTML. If these ads break or take a while to download it can delay the time it takes your site to appear. It would make more sense to serve the ads as the last item in the document, thus allowing all page content to load first. After all the user has not came to your site to see your ads. I have put together a demo page of ad positioning.

To do this I have devised a technique that uses a combination of JavaScript and absolute positioning to take the ads from the bottom of document and place them visually where you want within the page.

Below is a step-by-step guide to setting up a MPU ad.

Set the main site wrapper to position:relative within the CSS

Take you ad code and add it to the end of the HTML document, placing it in a div tag with an id

<!-- MPU Banner -->
<div id="mpu-content">
<script type="text/javascript"><!--
document.write('<scr'+'ipt language="javascript1.1" src="http://adserver.adtech.de/
addyn|3.0|577|1671709|0|170|ADTECH;loc=100;target=_blank;key=key1+key2+
key3+key4;grp=[group];misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script>
<noscript><div><a href="http://adserver.adtech.de/adlink|3.0|577|1671709|0|170|ADTECH;
loc=300;key=key1+key2+key3+key4;grp=[group]"><img src="http://adserver.adtech.de/
adserv|3.0|577|1671709|0|170|ADTECH;loc=300;key=key1+key2+key3+key4;grp=[group]"
width="300" height="250" alt="" /></a></div></noscript>
</div>
<!--/ MPU Banner -->

Set up an empty container placing it within the document flow where you want the ad to appear.

<!-- MPU container -->
<div id="mpu"></div>
<!--/ MPU container -->

Set the dimensions of the empty container to match the size of the ad you are inserting. Generally you will know the dimensions of the ad being served, so set the container to this size in your CSS. The ad will later be positioned into the container.

#mpu {width:300px; height:250px}

Split the ad code and place the noscript part of the ad code into the empty container, this allows for the ad to be served in the appropriate place if their is no JavaScript.

<!-- MPU container -->
<div id="mpu">
<noscript><div><a href="http://adserver.adtech.de/adlink|3.0|577|1671709|0|170|ADTECH;
loc=300;key=key1+key2+key3+key4;grp=[group]"><img src="http://adserver.adtech.de/
adserv|3.0|577|1671709|0|170|ADTECH;loc=300;key=key1+key2+key3+key4;grp=[group]"
width="300" height="250" alt="" /></a></div></noscript>
</div><!--/ MPU container -->

The banner will now be in two places, with the JS part sitting at the end of the page and noscript content in the page flow.

Now for the JavaScript magic. I have used Jquery to position the ads, but this technique should be easily customised with JavaScript or any JS library.

var mpuContainer = $('#mpu').position();
var mpuContainerTop = mpuContainer.top;
$("#mpu-content").css({position:"absolute", top:mpuContainerTop, right:"10px", display: "block"})

What the code is doing here is:

Page resizing

A downside of positioning the ads with absolute positioning is once the user changes the font size, text will dissapear behind the ad. To handle this I employed a script found on ALA called Text-Resize Detection. The script detects the default font size and then fires when a text resize occurs. I have used this to reposition the ad at the new coordinates when text resizes.

More examples

More examples can be found on my work site www.stv.tv, where the mpu and skyscrapper have been positioned using this technique. If you dig a bit deeper on the code for this site you will notice the leaderboard does not use JavaScript. I was able to use a different techniqe for positioning this as the leaderboard always sits at the top of the site with no content before it so I simply used absolute positioning.

Right aligned CSS sprites

The benefits of CSS sprites are well document.

Due to these benefits I find myself keen to use CSS sprites whenever I can. However, until recently there has been one situation where I found myself unable to add particular images to CSS sprites. Right aligned images.

When positioning a background image you set the top and left positions like so:

background-position:10px 30px

The first value represents the horizontal position and the second represents the vertical position. This example would move a background image 10px from the left and 30px from the top. You can use other units like relative numbers (%, em), or the length keyword combinations top, bottom, left, center, right.

Positioning images within a CSS Sprite you use the units (pixels or percentage) with a negative value

background-position: -10px -30px

I like to think of this as clipping an image, you are basically saying cut 10px from the left of my image and 30px from the top and show the rest of the image from that point in the the top left position. As you are using the positioning coordinates to “clip” the image you are unable to move the image position like you can with positive values. Here’s an example page of left aligned sprites.

This works for left aligned images however if you want the image to be right aligned things are a bit different. Although the W3C state you can’t do this, it is possible to combine units with lengths. You can use the keyword or percentage to get the right hand side of the image and pixels to get the top coordinate. e.g.

background-position: 100% -10px
or

background-position: right -10px

I have x-browser tested this technique in IE 5.5 upwards, FF 2 & 3, Opera and Safari on Mac and Windows and it works fine and the CSS still validates too. You can see the right aligned sprites on this demo page.

When the sprite contains multiple images positioned horizontally then the images to the left may get shown. What I tend to do is set up a seperate sprite for all images that are right aligned, though if you want to keep everything in one place you could just place all sprites vertically or make the sprite extra large and right align the appropriate images within the sprite with plenty of white space to the left.

Conference season

Whats that they say about 2 buses coming at once!

It’s Web Standards conference season again and a time when my own faith in the web development profession is reinstalled just when its taking a post Winter dip. This is the time of year when loads of new techniques are brought to my attention and you get to meet a load of Geeks who enjoy the same things you do. I always leave these conferences thinking “Man I love what I do”

My yearly highlight is a trip to London for @Media in June, its a brilliant couple of days with plenty of interesting talks and lots of boozing afterwards. I have attended the previous 2 years @Media’s and I thought @Media 2005 was better than @Media 2006 because it was more intimate and I like to see the white of the speakers eyes. 2006 was huge and had 2 streams to choose from which always leaves me with some last minute decision making.

The most recent conference I attended was The Highland Fling, it reminded me of @Media 2005, very intimate and had some excellent speakers. I am also slightly biased as the conference was arranged by my friend and former colleague Alan White who is getting his just rewards for some hard work (and hard drinking) over the last few years. @Media 2007 will have a lot to live up to.

Here the way I see my @media day panning out, though to be honest this will likely change on the day:

@media 2007 day 1

@media 2007 day 2

First cut is the deepest

I have finally got around to creating this site. It has been a long and drawn out process with 3 or 4 redesigns,  I finally decided to bite the bullet and get something out there. I could waste my life away changing my mind.   There are loads of wee tweaks I still need to do but it’s all a matter of time and if I wait until I have the site exactly as I want it then I will be time to redesign again.  God I starting writing this post about 2 months ago so if that anything to go by expect the next post at the end of July.

As a Web developer I feel it is important to have my hand in many pies so blogging is something I should definitely be doing. I have taken the route of combining my blog with a site that I intend to develop for drumming up some business so  I will need to watch this closely and see if that’s a good move or not.

Who is Clawg?