What Apple achieved with the Retina Display is a remarkable feat. The screen is still exactly the same size of 3.5 inches but where you used to have 1 pixel you now have 4. This means UI elements are scaled exactly by 2.

Developers were always told to design for a screen resolution of 320×480 pixels, so don’t I need to change my UIViewControllers to have a different size?

Well no, and this is how Apple have been incredibly clever. The screen dimensions are now 320×480 points, and not pixels so in your UIViewController you still have the size 320×480. With me so far?

Images

Ok so lets say I have an image that needs to span the width of the screen and is only 100 pixels high on an iPhone 3G or 3Gs we simply embed an image of 320pixels by 100pixels. So that image that we’ve called banner.png, for example, looks perfect on those old devices but they look blurry on the iPhone 4.

I can hear you asking, if the screen is 320points wide but is actually 640pixels wide, how do I provide both an iPhone 4 and iPhone 3G(s) version of this and how much code does it take.

Well my answer is, very easy and zero, that’s right, zero code modifications.

Now you did have a high resolution, or vector version of your artwork right? Ok well open it up and scale it to exactly double the size of the original file. So you’ll now have an image that is 640×200 pixels and save it as banner@2x.png (as the original was called banner.png). Add the new image to your resources in your XCode project.

You can call your image in exactly the same way as before

UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,320,100)];
[myImage setImage:[UIImage imageNamed:@"banner.png"]];
[self.view addSubview:myImage];
[myImage release];

When you run your app on your iPhone 4 (or the iPhone 4) simulator the image will magically use the banner@2x.png version instead. Clever isn’t it!

Default splash images

This is exactly the same as for images, just include a Default@2x.png image in your bundle and the iPhone 4 will use it instead.

Springboard App Icon

Ok now this one is a little more complicated, but not by much. If you’ve already designed a Universal (iPhone and iPad) app then you’ll be familiar with this technique, and actually there are a couple of ways to do it but I’ll explain the one from the Apple Docs.

If you want to still provide support to iOS 3.1.x and below you’ll still need a

CFBundleIconFile

with Icon.png in it for your Info.plist but you should now also include an array entry of

CFBundleIconFiles

Include an Icon.png file, this is your non-iPhone 4 57×57 file
Include an Icon@2x.png file, this is your iPhone 4 114×114 file.

Yep once again it really is that simple.

Conclusion

If you have an app that simply uses SDK UI Elements and/or images, which the majority of iPhone app do, then you simply have no excuse not to support the Retina Display… so what are you waiting for, go cut graphics and submit!

Now it is true that must tech imported from the USA seems to cost more with this mythical international tax and at first glance the iPad pricing in the UK is a lot more but let’s break it down for the 16Gb WiFi iPad.

In the US this is $499. The UK price announced is £429.  At a direct comparison at today’s exchange rates of 1.48, that comes to $648.  Wow that seems an awful lot more.  However that simply isn’t a fair comparison.

In the US all prices exclude sales tax which our friends in America accept is always added at point of sale and calculate the price in their head all the time.  In the UK we have VAT so the tax is always added (and at the moment it’s 17.5%).  So let’s take off the VAT from £429 and it comes to £365.

Convert that to USD and we see the UK iPad price is actually $540.  So the UK iPad is actually $41 more expensive in the UK than the US… that’s a whole £27, although yesterday it was £25.

I’m sure there are some import taxes or costs and £27 more isn’t really a lot of money, sure I’d prefer not to have to pay it but it isn’t what I’d call rip-off Britain compared with the US price.

If anyone is to blame it’s the level of VAT we get charged in the UK.

If we compare our £429 iPad with VAT to what it costs, in say California with federal and local sales tax of 10.75% we see that in the US the iPad costs $552.64 which is £373.

So the entire reason we feel we are being ripped off for our technology is nothing to do with Apple in this case and everything to do with the Government and our VAT.

Of course importing it isn’t a solution either, because you did remember to pay your VAT when it came through customs didn’t you?

As a user, and future owner of one of these devices I’m disappointed.

As a developer, I’m angry and let me explain why.  International developers are now at a severe disadvantage to US based developers without great expense to themselves, of finding a way to import the iPad from the USA.

US based developers have been able to see how their app looks, feels and works on a physical iPad whilst those of us not in the US have only had the simulator which is simply not good enough.  Anyone who has developed anything more than a one screen app for the iPhone will know that the simulator often behaves differently to the ARM architecture of the iPhone itself.

I’m not asking for Apple to give developers discounts, special advance access, free shipping, etc.  All I am asking is for Apple to allow a level playing field for developers and so that international developers that have PAID to register in the iPhone Developer Program should have a way of gaining access to the devices to be able to develop and test on.

At the moment there is no fair playing field between developers in the US and those of us who are not, of which I wouldn’t be surprised if there are more outside the US than in it.

Robert Scoble has written a great blog post on why Apple’s prediction was so wrong.

Sorry it’s a little later than I intended as I wanted my version of the feature live in the AppStore before I published the article.

So we’ve seen before how to create a simple map, well now let’s see how to create a really small thumbnail sized version like this (sorry there is no anti-aliasing, the iPhone simulator doesn’t support it on MapKit, works fine on the actual device though!)

In my version, I take this code and add it to a much larger view controller like this

A bit of shameless plugging: this comes from Tweetings for the iPhone

I won’t cover anything more to this other than getting the map to a state where you can add it to any view of yours using the [object addSubview:mapView] call.

Generating the map

This is the same as generating a large map, that we’ve covered before, except the frame will be of a different size, however the most important factor here is we are going to scale the map

float scaleBy = 0.80;
MKMapView *mapView = [[[MKMapView alloc] initWithFrame:CGRectMake(-5, 0, 100/ scaleBy, 50/scaleBy)] autorelease];
mapView.delegate=self;
mapView.layer.cornerRadius = 10.0; // Make the corners rounded
mapView.opaque = NO; // If you are using in a UITableView never set to YES!
mapView.scrollEnabled = NO; // Don't allow user interaction
mapView.zoomEnabled = NO;
mapView.layer.borderColor = [UIColor colorWithWhite:0.0f alpha:0.5f].CGColor;
mapView.layer.borderWidth = 1.0f/ scaleBy;
mapView.layer.transform = CATransform3DMakeScale(scaleBy, scaleBy, 1.0);

At this point you can actually now add it to your view and set any other properties in the same way as you would normally, job done…. yes it really is that simple!

It’s even less than a thin client of old (read: Citrix). When did we suddenly decide that thin clients were a good idea again?

I’ll just put one single thought and it was said by Marc Andreessen in 1995

“[Netscape will soon reduce Windows to] a poorly debugged set of device drivers.”

Yeah that went well didn’t it.

It’s a horrible task but it’s just been made a whole lot easier using a great online application called FreeAgent.

For me it allows me to keep any invoices in check, remittance notes and all my expenses (including uploading a scanned PDF copy of the actual receipt).

Then come Self-Assessment time I can see my expenses all in one place and how much I can be expected to pay for my taxes.  It’s so easy it’s a dream, I can’t recommend it highly enough!

What’s more if you click through for a 30 day free trial from this link now, you’ll get a 10% discount!

Now I’ll say upfront I don’t have much experience with this sort of application and I’ve never used Sage, etc . When you sign up for FreeAgent you get your own URL (http://yourcompany.freeagentcentral.com) and login, but this has one of the easiest to use interfaces I’ve seen for something that is a very complex and powerful web application.

In a matter of an hour I had all my yearly expenses in the system and added my income and even my PAYE P60 for my Self-Assessment.

I’ve only touched a handful of the features on offer, it also allows bank account integration which I’m sure is incredibly powerful, I’ve just not used it yet!

The Features (shamelessly copied from the FreeAgent website)

• Manage Projects & Time
  Manage your projects and contacts, track the time you spend and create flexible timesheet reports.
• Simple, Powerful Invoicing
  Create great looking invoices with no fuss. Email them to the client and easily track through to payment.
• Keep track of Expenses
  Keep tabs on your business and out-of-pocket expenses and quickly rebill to clients.
• Superior Online Banking
  Online banking that’s better than the banks. Compare accounts and track balances.
• Realtime Accounts
  No complicated procedures, FreeAgent simply works out your accounts as you run your business.
• Unrivalled Tax Features
  Our unique Tax timeline lets you see important UK income, VAT and corporate tax dates and how much is due.

Create the Object

First lets create a new NSObject for the place mark. Let’s call it ‘PlaceMark’

PlaceMark.h

#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h>

@interface PlaceMark : NSObject {
	CLLocationCoordinate2D coordinate;
	NSString *subtitletext;
	NSString *titletext;
}
@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;
@property (readwrite, retain) NSString *titletext;
@property (readwrite, retain) NSString *subtitletext;
-(id)initWithCoordinate:(CLLocationCoordinate2D) coordinate;
- (NSString *)subtitle;
- (NSString *)title;
-(void)setTitle:(NSString*)strTitle;
-(void)setSubTitle:(NSString*)strSubTitle;

@end

PlaceMark.m

#import "PlaceMark.h"

@implementation PlaceMark
@synthesize coordinate, titletext, subtitletext;

- (NSString *)subtitle{
	return subtitletext;
}
- (NSString *)title{
	return titletext;
}

-(void)setTitle:(NSString*)strTitle {
	self.titletext = strTitle;
}

-(void)setSubTitle:(NSString*)strSubTitle {
	self.subtitletext = strSubTitle;
}

-(id)initWithCoordinate:(CLLocationCoordinate2D) c{
	coordinate=c;
	return self;
}
@end

Adding a pin to your map

Firstly remember to add

#import "PlaceMark.h"

To your map controller, from the previous example inside the displayMap function under the region.center call

PlaceMark *addAnnotation = [[[PlaceMark alloc] initWithCoordinate:location] retain];
[addAnnotation setTitle:@"The Pin Title"];
[addAnnotation setSubTitle:@"The pin subtitle goes here"];

[mapView addAnnotation:addAnnotation];

Then create the following delegate method

- (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>) annotation{
    MKPinAnnotationView *annView=[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"MyPin"];
    annView.animatesDrop=TRUE;
    annView.canShowCallout = YES;
	[annView setSelected:YES];
	annView.pinColor = MKPinAnnotationColorPurple;
    annView.calloutOffset = CGPointMake(-5, 5);
    return annView;
}

Voila you now have a pin dropped on the map and automatically selected. If you don’t want the title automatically displayed then change

[annView setSelected:YES];

The final part demonstrates how to create a mini map

This example will demonstrate how to embed a map, using the MKMapKit framework inside a UIView using the iPhone SDK. Note you must be using iPhone OS 3.0 or higher for this to work. The ultimate aim is to get a UIView that looks similar to this.

For this example I will assume you are already familiar with navigation and UIViews in the SDK (and so I won’t cover how to get the navigation bar at the top of this screenshot)

Add the framework

First up you must go to the Frameworks folder of your XCode project and add the existing framework of MKMapKit.

Then inside the header file for your view add

#import <MapKit/MapKit.h>

Adding MapKit references to the header

Now we must add the mapKit instance to the header as well as the MapKit delegate

@interface MapKitViewController : UIViewController <MKMapViewDelegate> {
	MKMapView *mapView;
}
-(void)displayMap;

Initialize the Map

- (void)viewDidLoad {
	mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
	mapView.delegate=self;

	[self.view addSubview:mapView];
	[NSThread detachNewThreadSelector:@selector(displayMap) toTarget:self withObject:nil];
}

-(void)displayMap {
	MKCoordinateRegion region;
	MKCoordinateSpan span;
	span.latitudeDelta=0.2;
	span.longitudeDelta=0.2;

	CLLocationCoordinate2D location;
	location.latitude = -35;
	location.longitude = 146.2381;
	region.span=span;
	region.center=location;

	[mapView setRegion:region animated:TRUE];
	[mapView regionThatFits:region];
}

- (void)dealloc {
	[mapView release];
        [super dealloc];
}

This will give us a map fitting the screen with the region and zoom level set to best fit the coordinates given. Note that I have physically defined the coordinates here in this example, you can use something like the Google GeoCode API to convert addresses, etc to coordinates. I won’t cover that here.

Changing the map type

In the example above is a tool bar allowing you to switch map types

Let’s define the toolbar in the header file inside the @implementation

UISegmentedControl *buttonBarSegmentedControl;

Now inside the main code inside ViewDidLoad we add

buttonBarSegmentedControl = [[UISegmentedControl alloc] initWithItems:
	[NSArray arrayWithObjects:@"Standard", @"Satellite", @"Hybrid", nil]];
	[buttonBarSegmentedControl setFrame:CGRectMake(30, 10, 280-30, 30)];
        buttonBarSegmentedControl.selectedSegmentIndex = 0.0;	// start by showing the normal picker
	[buttonBarSegmentedControl addTarget:self action:@selector(toggleToolBarChange:) forControlEvents:UIControlEventValueChanged];
	buttonBarSegmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
	buttonBarSegmentedControl.backgroundColor = [UIColor clearColor];
	[buttonBarSegmentedControl setAlpha:0.8];

	[self.view addSubview:buttonBarSegmentedControl];

Then we must add the function for what happens when we tap on the tool bar

- (void)toggleToolBarChange:(id)sender
{
	UISegmentedControl *segControl = sender;

	switch (segControl.selectedSegmentIndex)
	{
		case 0:	// Map
		{
			[mapView setMapType:MKMapTypeStandard];
			break;
		}
		case 1: // Satellite
		{
			[mapView setMapType:MKMapTypeSatellite];
			break;
		}
		case 2: // Hybrid
		{
			[mapView setMapType:MKMapTypeHybrid];
			break;
		}
	}
}

In the next example, I’ll cover how to add the annotations (the small pins) to the map

I’ve been following @KirstieMAllsopp for a while now, in case you don’t know who Kirstie is she is British TV presenter and property guru.  After reading a few of her messages, it became clear that Kirstie and other famous celebrity tweeters are the victims of an Internet bullying campaign.

The bullies themselves don’t see that their words are bullying but by the very definition of what cyber bullying is, they are.  Now I won’t link to any of their accounts here because it’ll just give them some sick perversion and draw attention to them directly.

However Kirstie was unable to block them at the time from the mobile website of Twitter and had to wait until she could, consequently a number of people replied to Kirstie offering kind words of support only to have the bullies turn on them and flood their @mentions feed with abuse.

I too have had these messages sent to me and I’ll post a few examples now (self censored so as not to offend)

@KirstieMAllsopp f***** block me will ya ya fat do goody scrubber. Yer programme is s*** and ur fat nd ugly lol

@twbrit u think u r so f****** clever e mailing that fat bird off telly well keep ur f***** thoughts to yerself bout my mates or Ill ave u

@richardhyland if u bad mouth @****** or @********* gin u 4 eyed gimp Ill f****** kick ur chav arse this will be ur only warning c***

And that was just three of around 30 tweets from one of these users in around 30 minutes!

Others included

@KirstieMAllsopp fat s*** (via @******) this one is trying to ban you all @****** She is a seriously obese dull bitch

@KirstieMAllsopp kirstie, where on your body is the perfect location for me to s***? your chest? your hair? your eyes?

I think any sane person will agree it’s pretty foul stuff and whilst most adults swear at some point, there is simply no excuse or point in their sad little tweets apart from upsetting normal people using a great service like Twitter.

Twitter do provide a method of feedback to harassment, yet a week after this came to my attention, every single one of the accounts is still active.  Is Twitter unable or unwilling to do something about it?

Celebrities have often had to put up with a lot because of their fame, paparazzi, untrue stories, but no one deserves to be abused or bullied in this way whether it be online or in person.

Update: Since I posted this, one of the accounts has now gone, I don’t think it was suspended but the user either deleted it or changed his screen name

Update II: Two down now… hopefully more to come