www.hp.co.uk goes mobile

Hewlett Packard has entered the web mobile world with a new layout designed especially for your mobile. Check it out at www.hp.co.uk.
They also have in there some nice things as a product search (where you can quickly find an HP product) or the PriceFinder to check out a product price.
Nice to visit.

Watermark with JMagick

I know you can do watermarking in thousands of ways, but this is if you want to embed it in your Java application. I know that you can also do this with Java2D, but it’s so much easier with ImageMagick. Moreover you have JMagick distributions for most of the major OSes.
First of all, if you haven’t heard about JMagick, this is the Java/JNI implementation for ImageMagick.
Unfortunately the JMagick documentation is very few and it includes only a few examples.
This next example will guide step by step in adding a watermark to an image. The idea is simple: first you create a watermark image from a text and then combine this image with your initial image.
So, let’s create the watermark image. If you want to watermark more than one image, this will be a one time only step.

    // create the watermark image info structure
    ImageInfo markImageInfo = new ImageInfo();
    // set a size for the image high enough to accommodate the text
    markImageInfo.setSize("1024x1024");
    // create the image
    markImage = new MagickImage();
    markImage.allocateImage(markImageInfo);
    // make the image transparent
    markImage.setMatte(true);
    // set the background image to black
    // actually the color doesn't matter, only the alpha value - 65535
    markImage.setBackgroundColor(new PixelPacket(0, 0, 0, 65535));
    // make the initial black background color transparent
    markImage.transparentImage(new PixelPacket(0, 0, 0, 0), 65535);

Now what we have is an image with a black transparent background. Next we have to paint the text on it. For this we will create the drawing and put it into the image.

    // create the drawing info structure
    ImageInfo drawInfo = new ImageInfo();
    // create the drawing structure
    DrawInfo draw = new DrawInfo(drawInfo);
    draw.setOpacity(0);
    draw.setGeometry("+0+0");
    draw.setGravity(GravityType.CenterGravity);
    // set the watermark color to gray
    draw.setFill(new PixelPacket(0xaf00, 0xaf00, 0xaf00, 0));
    // set the font size
    draw.setPointsize(48);
    // set the font name or the path to the font file
    draw.setFont("Arial");
    // set the watermark text
    draw.setText("Adrian's blog");
    // make the text smoother
    draw.setTextAntialias(true);

Now we have the text and we have to put it into the watermark image:

    // draw the text on the image
    markImage.annotateImage(draw);
    // remove the transparent borders of the image so that only the text will remain
    markImage = markImage.trimImage();

The initial setup is finished. Now we have to load every image that we want to watermark it, combine it with the watermark image and save it.

    // load the image from the specified filename
    ImageInfo imageInfo = new ImageInfo(filename);
    MagickImage image = new MagickImage(imageInfo);
    // watermark the image
    image.compositeImage(CompositeOperator.HardLightCompositeOp, markImage, 10, 10);
    // save the image
    image.setFileName(watermarkedFilename);
    image.writeImage(imageInfo);

The watermark is put in the upper left corner, 10 pixels away from both borders. This is actually what the third and fourth parameters of the compositeImage method represent.
Instead of CompositeOperator.HardLightCompositeOp you may also use CompositeOperator.SoftLightCompositeOp or CompositeOperator.OverlayCompositeOp.
If you probably watermark the image you may also want to resize it

    image = image.scaleImage(newWidth, newHeight);

or remove the EXIF and IPTC info from it

    image.profileImage("*", null);

So, in just a few easy steps you were able to watermark an image (or more) with your text. The nice part is that using JMagick you can do a lot of other stuff with the same ease.
This solution can be easily embedded into GUI or web applications.

Later edit: I also tried the DissolveOp and the results are very good.

Testing web mobile pages

In an earlier post, I was telling you how to detect a mobile device on the server side so you will be able to serve the appropriate page. The next step after you implemented those pages will be to actually see your work.
If you have a mobile device everything is fine. Frankly I don’t like to use one, because only typing a web address can be a challenge. Just a while ago, I discovered the My Mobiler application, some kind of Remote Desktop or VNC. So you can use your Windows Mobile from the comfort of your own desktop mouse and keyboard.

Another way of testing mobile pages will be to rewrite the User-Agent HTTP header of your own browser.
How to do this?
In Firefox you type in the address bar about:config and define a new preference (by right clicking and selecting New » String) with the name general.useragent.override and the value of your choice.
In Internet Explorer things are a little bit more complicated and involves some registry editing.
In the [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent] key you have to define the (Default), Compatible, Version and Platform. The final user agent string will look like [(Default)] ([Compatible]; [Version]; [Platform]).
If you add some values in the registry key [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform] they will be added in the user agent string.
But the easiest method to do this is with a Firefox add-on: User Agent Switcher.

If you choose an user agent string from the WURFL database and then visit Google, Yahoo, YouTube etc you will see a different version than the one you are used to.

Mobile device recognition

Nowadays when you create a web site you should also think to the ones accessing it from a mobile device. But how you can know this?
I’m going to show you next a few methods on how you can do this and present the advantages and disadvantage of each one.

WURFL

My favorite method of detecting a mobile device is WURFL. WURFL is an open source database of mobile devices capabilities. Every mobile device is identified by its User-Agent string (you can find it in the HTTP headers) and has associated a list of capabilities grouped into categories. How exactly you can use it in .NET you can see here.
You will also have to consult the X-Device-User-Agent HTTP header because some mobile providers are rewriting the User Agent. And just to be sure that you also recognize Opera Mini (and actually the real device) you can inspect the information in the X-OperaMini-Phone-UA header.
More on the User-Agent HTTP header you can find out on W3C (section 14.43).
I personally like WURFL because it is open source, it tells you more than if the device is mobile or not. The downside is that probably it does not contain info about all the latest mobile devices. But you can easily become a WURFL contributor and submit these info yourself into the WURFL database. Before doing these you should familiarize very well with the WURFL documentation.
I also like that the community is very active and the database contains approximately 7000 devices, making it a very effective method and most importantly with no false positives, unlike the next methods.
Moreover, WURFL has a library for accessing the XML database implemented in Java, .NET and PHP.

UAProf

If WURFL is a devices database, UAProf (User Agent Profile) is a capabilities database for a single device.
The mobile browser could contain an HTTP header usually named x-wap-profile and its value is an URL pointing to the profile described in RDF (see UAProf specs as PDF).
There are some serious downsides to this method:

• The name of the HTTP header is not always x-wap-profile. It could also be wap-profile or xx-profile, where xx is a number. The Opt header can contain this number.
• There is no standard regarding the capabilities naming and grouping
• Not all the devices have UAProf
• Not all the UAProfs are still available
• Retrieving and parsing the UAProf can be quite time consuming

Altough you can use an UAProf to define a device in the WURFL database, which should be the preferred way.

Browser.isMobile (.NET dependent)

This is the method that I recommend the less because it is .NET dependent, not quite up-to-date and it doesn’t offer too many information about the device capabilities. Anyway for your reference I include it as well.

if (HttpContext.Current.Request.Browser["IsMobileDevice"] == "true")
{
    // the browser IS a mobile device
}
else
{
    // the browser IS NOT a mobile device
}

.

Next steps

What you do next, after knowing with each type of device are you dealing with, it’s a different story. For sure I wouldn’t recommend you to create two versions of the same page. The best way will be to have only one version and to customize the layout using CSS. Then you definitely have to avoid the “evil” HTML table to build your layout. A lot of current mobile browser don’t handle very good nested tables. Here a method of finding out also the mobile device capabilities (such as screen width and height) will help you in building a better layout. Altough recommended will be to use percentages instead of fixed sizes.

Another way will be to use XSLT to transform the desktop version into the mobile one. Please keep in mind that the transformation should be made on the server side, as almost certain the device will not have this capacity. This is a good approach and you can even transform the page into WML (or even, why not, VoiceXML) but you will have to sacrifice some performance on the server side. This is acceptable as the mobile device version traffic has a lower bandwidth. I already wrote an XSLT server side transformer in .NET and should be as simple and straightforward to implement it in Java as well.

In conclusion, I would recommend to use a combination of the above methods for detecting mobile devices and creating mobile web pages.

Later edit: If you’re also interested in how you can test your mobile web pages please see the next article Testing web mobile pages.