I bought a book. Nothing new there, apart from this one’s really nice. Instead of buying dog-eared paperbacks from Amazon Marketplace, I went to a bookshop.

I had no intention of buying a book but this one caught my eye – it’s the finest example of one of my favourites. Hard back and bound in fabric, it’s well illustrated and has even got a ribbon bookmark bound into it.

It’s part of a new Penguins Classics range, which I’m told is exclusive to Waterstones. There are some more of them on this page.

The HDR effect though can be “faked” using a quick technique involving different blending modes, without the need for a camera capable of taking the necessary three shots at different light stops.

The original image, shot using the iPhone's camera

This can work with photos taken with any camera. Our sample image has been taken using an iPhone. Even ignoring the bleaching that’s all too common with the iPhone camera, it’s still not a great image.

To start with, we need to boost the shadows and highlights. From the “Image” menu, select “Adjustments” then “Shadows / Highlights”. Change the shadows amount to 50%, the highlights amount to 40%, then click OK.

Now duplicate the layer twice. Take the lower of the duplicated layers, convert it to grayscale by selecting “Image” – “Adjustments” – “Desaturate”. Now change the blending mode to hard light. The contrast is boosted but we lose some of the images’ colour.

Our faked HDR image - much more striking than the original

To restore this, select the other duplicated layer, convert it to a smart object and apply a Gaussian blur to it. The amount of blur to apply depends on the resolution of the original image, which is why we use smart filters, so that we can tweak this later. An 8 pixel blur works well for iPhone images, but any modern compact or DSLR will need more.

Change the blending mode of this layer to soft light. Our image now looks a lot better – the highlights and shadows have both been boosted heavily, without clipping occurring. This is a technique I use quite frequently so here’s a Fake HDR Photoshop Action that can be installed and used to achieve it quickly.

The technique that gained the most notoriety was processing a regular colour negative in chemicals normally used to develop slides. Using Photoshop’s curves editing, we can simulate the effects caused by this technique in digital photos, and thanks to the adjustment layers in CS3 – CS5, we can do it non-destructively.

Fashion 5: Credit Vincent Boiteau (http://www.flickr.com/photos/2dogs_productions)

This type of cross processing was very common in fashion photography and our original image is in-keeping with that. Download the image from here or the high resolution one from Vincent Boiteau’s Flickr page. You’ll also need to download our Cross-Processing Curves Preset.

With the image open in Photoshop, select the “Layer” menu, then “New Adjustment Layer”, then “Curves…”. A new layer will be created in the layers palette. If the “Adjustments” window is not open, use the “Window” menu to open it.

Click on the small dialog box in the right-hand corner and select “Load Curves Preset…”. Select the preset file that you’ve downloaded and the cross processing effect will be applied.

Fashion Image with Cross Processing Applied

With our curves preset loaded in, you’ll see the different curves that the Red, Green and Blue now take, away from the standard diagonal. The image will now have cross-processed film effect that is editable within the “Adjustments” window or switchable via the layers palette.

You’ll see there is quite a large shift from warm to cool tones – the background in particular has shifted from an earth tone to teal. The skin tone has been somewhat bleached and has taken on a yellow tint – this is combination with the higher contrast means that the coloured make-up is really picked out.

The overall white-point has changed, which has lead to blown highlights on the coat, which in general appears more cream than the original white. Finally, the shadows have been extended and take on a blue tinge.

This technique works best on portrait photography where the skin tone changes make a dramatic effect. Alternatively, landscapes featuring expanses of light colour such as clouds or white sand will work. Subtle colour highlights and large shadows will also help.

Trickle is a great little utility that can be used to launch applications and restrict the amount of bandwidth available to them. It does this by emulating the usual OS functions for network access, sitting between the app and the OS. Download Trickle from the homepage and uncompress it. Build it using the standard process:

./configure
make
sudo make install

The trickle binary will now be available in your path and you’ll be able to launch applications from the command-line using it. Open a terminal window and try starting Firefox with the following command:

trickle -d 10 firefox

This will start Firefox with download speeds limited to 10kbps – around the level of dial-up connections. Navigate to a site and you’ll immediately see the difference in speed. This is great for testing how quickly your site loads on slower connections. Have a look at your site and see what can be improved – do certain images or javascript load before content or does table-rendering mean the user is left looking at a blank screen for a while?

This only restricts the downstream bandwidth though and we wanted to test upstream. We used the following command:

trickle -u 10 firefox

This restricts the upload speed to 10kbps, similar to how we did for the download speed. We could have used the -d option as well to restrict upstream and downstream, but as we only wanted to test one, we didn’t make life difficult for ourselves. This did highlight a problem in our app, which in case anyone is interested, we solved by increasing the timeout for our upload target file using the .htaccess file.

However, there are criticisms leveled at the format – most notably its size. Whereas PNG will probably never compete with the JPEG for photo-quality images, there are many optimization techniques that people fail to use or just take for granted because of the JPEG format. What people don’t realise is that there is a fundamental difference between the two formats – JPEG is lossy and PNG is lossless.

The JPEG format analyzes an image and changes the actual pixels in order to achieve its compression. This is why JPEG artifacts (blocky-ness) appears on the image. What’s more this occurs on each save, so repeatedly saving out as JPEG results in further and further loss of quality. PNGs on the other hand can be edited and saved over and over again without any reduction in quality because PNG achieves its compression using techniques similar to those found in zip files. The actual pixel values never change in a PNG image.

With a little understanding of how this type of compression works, we can develop some optimization techniques for PNG images. In its simplest form, compression finds sequences of a particular value and converts it to one value and a multiple (i.e. how many times that value is there). The compression works best when there are a restricted number of values in a particular file.

How does this relate to our images? Well, in images the “values” are colours. The less colours in a PNG image the better the compression will act. To demonstrate this, we can use the Posterize effect in Photoshop, which is designed to reduce the number of colours in an image (the name comes from print design, when posters would be reduced to as few colours as possible to save on printing costs).

Heres our original image, a 24-bit PNG with an 8-bit alpha transparency. Using Photoshop’s Save For Web function, the images comes out at 164KB.

Opening this image and repeating the Save For Web process will have no effect on the image size or quality. Photoshop will simply decompress the image when you open it and then apply exactly the same compression when you save it. Instead, open it up, select the “Image” menu, then “Adjustments” and “Posterize”. Set the number of levels to 60 and click OK. We get the following image:

You’d be very hard-pressed to find a difference between this and our original but this has brought the size down to 124KB (a 24% reduction). The reason the difference isn’t noticeable is that colours that were next to each other and were very similar have been combined as one colour. The eye tends not to notice this as its very biased towards picking out contrast.

Taking this further, we can drop it the posterization to 40 levels, and the result looks like this:

At just 40 levels, we start to see some of the colour-grouping on the yellow die, but the rest of the image is still very comparable in quality to our original. Its now down to 112KB (almost another 10% saving). Taking it down to 20-Levels brings it down even further to 92KB but the quality really starts to go, so maybe in this case somewhere between 40 and 60 levels would be the best compromise.

The important thing is that the control of this is completely down to you. It can be applied whilst creating the image or at later optimization stage after saving it out for the first time. Through the use of layers or just the basic selection tool, you can apply posterization to different parts of the image. In this case, its possible to get the size of the image down even more by applying one level of posterization to the out-of-focus elements and a more drastic posterization to the red die in the foreground.

The problem occurs from the way translation services work in that essentially Google’s servers are opening the page on your site, translating it and then displaying it to the visitor through a page located on Google’s server. When the Google Analytics Javascript starts up, it is quite right in thinking that you are trying to track a page on Google’s system with a complicated URI beginning with translate.

This was polluting my data and generally making things look untidy so I fired up my regex tester and came up with a couple of filter for cleaning up the data. It’s relatively simple to do as the full URI of the page being visited is contained within the query string of the translation page and therefore in the Request URI variable that is submitted to Google Analytics.

Hostname

Create a new Advanced Filter and call it “Google Translations (Hostname)”. Select Request URI from the Field A drop-down and enter the following pattern into the input box:

/translate.*u=http://([^/]*)

The URI will begin with “/translate” so we match this first. We then use a “.*” to disregard any text between this and the querystring variable “u” that contains the URI of the page being translated. The URL will begin with “http://” so we match this and then create a bracketed match to capture the hostname. We use the “^/” syntax so that it stops capturing the hostname when it encounters a “/”, as these can’t exist in hostnames.

In the Constructor, select Hostname from the drop-down box and enter $A1 in the input box. This will put our captured hostname where it belongs.

Request URI

We still need to capture the URI of our page, so we create another Advanced Filter called “Google Translation (Request URI)”. We then select Request URI from the Field A drop-down box and enter a similar pattern to before:

/translate.*u=http://([^/]*)/?([^&]*)

We start by matching and capturing the same as we did before, but then we extend it a little. We need to capture everything after the hostname (i.e. everything after the first “/”). But we only the URI of the page, not the rest of the querystring, so we use the “^&” pattern to stop when we hit an ampersand (i.e. the next query variable).

What makes it slightly more difficult is that there’s no garantee that they will be a “/” character to capture. If the visitor translates your homepage by entering http://www.yourdomain.com then there’s no backslash to capture. This is why we put the backslash outside the brackets and modify it with a ? mark, signifying that it may or may not be there.

In the Constructor, we select Request URI and enter “/$A2″. This way, we are always starting the Request URI with a backslash and then adding whatever else we may have captured from the query varibale. This means that page views on your homepage will be logged as a single backslash as they normally would be.

Problem Solved

So we’ve successfully rewritten both the Hostname and Request URI, eliminating any of those annoying translation URLs. It’s worth noting the order in which the filters are done. We need to do the hostname first as otherwise we would overwrite the Request URI and not be able to match the hostname from the old URI. Filter ordering problems like this are quite common, so if you’ve got other filters set up on your profile, take some time to establish what modifies what and create an order so that they don’t interfere with each other.

I’m currently looking into other translation services around the Web (Babelfish comes to mind) and cooking up some filters to work with these but, from my traffic at least, it seems that Google pretty much has the translation market sewn up.

Using Selectors

By using the common CSS selectors in a supporting editor, you can save yourself a lot of time. Here’s a quick list to refresh your memory:

These can of course be strung together to form complex HTML layouts using much less code. The editor will then expand it into beautifully laid out HTML. Let’s take a standard page layout:

<html>
	<head></head>
	<body>
		<div id="header"></div>
		<div id="content"></div>
		<div id="footer"></div>
	</body>
</html>

Using the ZenCoding syntax, we can reduce that to the following snippet of code:

html>head+body>div#header+div#content+div#footer

A simple line of code in a syntax we’re all familiar with, which expands to create a whole starting page of markup.

Multipliers and Iterators

It doesn’t stop there though. One of the most annoying things about layouts is when you have multiple tags that are the same or similar. You’ve got the choice of typing each one out or copying and pasting, making changes as you go along. ZenCoding enhances the CSS syntax with the inclusion of a couple of special characters, * and $. Using *, followed by a number, will add that tag the same number of times. Using $ will add the index number of that tag. So, for example:

ul#menu>li.menuitem-$*5

This will expand into an unordered list with the ID “menu”, with five list items inside it. These list items will all have the class menuitem-$, where $ is the index of that list item within the list. Here’s the markup:

<ul id="menu">
	<li class="menuitem-1"></li>
	<li class="menuitem-2"></li>
	<li class="menuitem-3"></li>
	<li class="menuitem-4"></li>
	<li class="menuitem-5"></li>
</ul>

ZenCoding is open source software hosted at Google Code. There’s already a large number of supported editors including Dreamweaver, Aptana, Textmate and NetBean with more being added regularly.

It’s worth noting that because of how we’d setup the PHP configuration in previous part of the series, there is no protection against SQL injection attacks in this tutorial. Out-of-the-box PHP installations back then came with the “magic_quotes_gpc” setting on, which would automatically escape incoming GET and POST variables. This is no longer the case, so you should take care to escape all input from the user.

In this case, you’d need to use the mysql_real_escape_string() function on the $SearchInput variable before running the database query in Step 12.

Whilst all browsers these days use this feature to zoom all the elements on a page (back in the day, it just changed the text size) there is a glaring omission in Internet Explorer in that it doesn’t zoom the background image on a page. Not really a problem if you’re using a tiled / textured background, but if you’re using a full image that ties in with the rest of your layout it’s a disaster. It’s becoming more and more common to see site takeover ads that include a custom background that fits around the content of the site.

I’ve found a strange workaround for this that involves using CSS to assign your background image to the <html> tag as well as the <body> tag. You’ll need to keep the image on the <body> as otherwise Firefox and Safari will not render it all (it’s not in the standard!). It’s literally just a copy and paste from your body tag. For example:

html {
    background-image: url('/images/large_background.jpg');
    background-color: #000000;
    background-position: top center;
    background-repeat: none;
}

This would be a non-repeating image positioned at the top and middle of the page (suitable for use with a “margin: 0px auto” layout) with a black background colour (you’re fading the edges of your background images, right?).

It’s still not perfect, but it’s better than it is. Zooming in will now work perfectly across all browsers. Zooming out beyond the normal display with result in the background image being scaled with the content but will leave an echo of the background image assigned to the <body> tag to the right.

Usage is simple. Three lines will do it:

include('Galvanize.php');
$GA = new Galvanize('UA-XXXXX-XX');
$GA->trackPageView();

This will register a standard page view for any PHP file on your site. For more flexibility, you can tell it the URL and / or title of the page you want to register.

$GA->trackPageView('testing.php', 'Test Title');

An Alpha release was made available yesterday, which is able to confidently track page views, with event and e-commerce tracking available soon. Download it here or visit the Sourceforge Project Page.