But, if we look at our modern smart devices, with promises of bringing the internet to the palms of our hands, we are doing anything but.

Instead of going to touch.facebook.com on your iPhone, you instead open up the Facebook application. Despite having one of the best web browsers out there on mobile platforms, we seem to have stepped back in time to loading an application.

Google is probably still the one leading the charge in bringing everything to the web – most of their mobile apps are just HTML5 versions of their standard web apps apps, they’ve brought JavaScript performance to near-native speeds, and they’re going to release an operating system that is only a web browser.

However a couple of years ago, I would’ve thought this was the way everyone and thing is going – off into the cloud of happiness and awesome. We’re regressing, going from an interconnected network of pages, and back into the walled gardens we were trying to escape.

For example, instead of making their website better for use with your finger, New Zealand Herald decided to make an iPad app. Which is funny, because the iPad touts that it’s the best way to surf the web. And what does NZ Herald do that requires an app that their website can’t provide?

What is the problem here? Has the internet been late to the mobile party? HTML 5 and CSS 3 have been a long, very long, time coming. However with the iPhone and Android came some of the best implementations of these emerging standards. JavaScript now has frameworks to access location data, and support for multi-touch gestures. There are almost no excuses for a web site to not look at creating a fantastic mobile web application. A single mobile web application that is supported across many platforms, not just the flavour of the month (if you can consider the iPhone that).

Back in 2007 when the iPhone was first announced, Apple said that applications can only be built via the web standards. Shortly after, they announced the SDK and the rest is history.

Now look at this…

Look at this…

Now look at this…

Which ones were easier to read?

I’ve always had frustrations with websites that come with small text in the body of their pages. What’s worse about these sites? They seem to know it, and their solution isn’t to fix it but to provide options. The problem with options is your average user doesn’t care.

First sample is from Public Address. To change the text size, you have a small “Change text size” series of links to the right of the page. The second sample is from the recently revamped BBC News website, which follows in the footsteps of other BBC websites getting some glorious big text sizes. The third sample is from Daring Fireball, to change the font size, you scroll to the bottom of the page, click “Display Preferences” and then determine an appropriate size. Final sample is from IGN.com, massive text sizes.

Funnily enough, sites with big text sizes don’t have text size controls anywhere on their pages. They have been designed with good readability in mind. Resolutions are getting higher, meaning smaller text is becoming harder and harder to read. The web is trending towards large body text sizes, which is a big plus.

If your users are regular visitors, I guess they can spend their time working out how to change text size in either the browser, or on your web page. But if your visitors are new, what makes you think they are going to hang around for much longer if it’s difficult, or they have to jump through hoops, just to read it?

Last year I saw an ad on the PlayStation US Blog, it ended like this.

In fact, I could go through these ads frame-by-frame and you’d see that they’re the same. When I saw it I thought that either TV3 had partnered up with Sony to bring something (well, no), or TV3 are stupid and Sony was going to pwn them.

Turns out there is a third option, Sony will just go in for the ride. After the ad turned up on Joystiq, KB/PR person posted this on Twitter,

Dear TV3: You could have at least put my photo on top of the amp. Sheesh.

He’s referring to how there is a picture of SCEA CEO Jack Tretton on the top of his amp (in fact, I’m pretty sure in all the commercials there’s a photo of him somewhere, except for the ModNation Racers one where he was in the ad).

Well, thinking that Sony lawyers are quickly writing up a cease-and-desist notice, the KB/PR person did one more, posting to the PlayStation Blog,

[W]e’d like to help them out and make our ENTIRE LIBRARY OF COMMERCIALS available for them to copy in order to promote their programming. I only ask that TV3 doesn’t use our actual footage, but all future homages of this sort are now Kevin Butler sanctioned.

He even asks for a box set of the Flight of the Conchords, some thinking he was making reference to this scene in Episode 1 of Season 2.

I guess this was a win for all – TV3 got more publicity for the campaign than they were “expecting” (yeah, they probably engineered this whole thing), and Sony get more mileage out of an old ad and don’t come out looking like a giant corporation beating down smaller ones.

Or, Sony still have their lawyers at full force, they’re just distracting us all.

My search came to an end surprisingly quick, WordPress for iPhone already does geotagging, it’s just WordPress itself doesn’t take advantage of it yet. There is a way however, and I managed to get something going in no time.

When WordPress for iPhone geotags a post it adds several custom fields to the blog post, but we care about:

• geo_public – indicates that the geotagging data is public,
• geo_address – the address that was picked up,
• geo_latitude and geo_longitude – the important bits.

If it’s your blog, it’s up to you whether you heed geo_public, but this is a good indicator for whether you have a geotagged blog post or not.

Google Maps provides a handy API to provide static images, no key required. The URL is http://maps.google.com/maps/api/staticmap? and then you bundle in a bunch of parameters:

• sensor=false because we aren’t using a GPS to generate this map, at least, I think that’s the rule (cause we did)
• maptype can be satellite, terrain, hybrid or left out for the default street map. I like the terrain maps.
• size is the size you want the image to be, widthxheight.
• zoom is your preferred zoom size,
• markers in my example is size:small|lat,lon

And you have a nice Google Map! But in your WordPress blog template, find where you output your blog posts (my theme has this in a function) and do the following:

<?php if ( get_post_meta($post->ID, "geo_public", true) == "1" ) :
	$map = "http://maps.google.com/maps/api/staticmap?sensor=false&maptype=terrain&size=234x150&zoom=12&markers=size:small|";
	$lat = get_post_meta($post->ID, "geo_latitude", true);
	$lon = get_post_meta($post->ID, "geo_longitude", true);
	$map .= $lat . "," . $lon;
?>
<div class="post-map">
	<img src="<?php echo $map ?>" alt="Google Map" /><br />
	<?php echo get_post_meta($post->ID, "geo_address", true); ?>
</div>
<?php endif; ?>

Done!

Another thing of note, the WordPress app will resize photos down to 640×480 and I’ve found no way of changing it, so make sure your template is ready for it!

Plus, I haven’t decided if I would do it, mobile roaming charges are expensive, and I’d have better things to do than tell you all about it.

The problem

So, I went about thinking about what it is I do all the time that I could simplify. My immediate thought was posting links and pictures to Twitter. It’s something I regularly do, and so something I’d make easier. The process is rather complicated:

1. Copy the link.
2. Go to http://j.mp.
3. Paste the link, hit Shorten.
4. Click the Copy button.
5. Go to Twitter (it’s usually open on another tab).
6. Type in my message, paste the link.

Of course, if I used something like TweetDeck, the process is rather easier, copy the link, go to TweetDeck, paste the link. But, why not just do it in the browser?

The solution

So, after seeing what I could do with Chrome, I made a plan,

• A button on the toolbar will pop open a box that has the address field and a text box to type your tweet in.
• Have a photo-picker mode so I can insert the address of the image if needed.

And in the background,

• Have a Popup page with an associated icon.
• Have an options page to configure Twitter.
• Try and not use something like jQuery, it’s all rather simple.

The first problem was dealing with OAuth. In reading the internet, I figured it is probably best to also have a Background page – the background page is actually rather useful in storing shared functions across the extension, and to help with messaging. I’ll write more about OAuth in another blog post, and more on messaging just a bit later.

So, I have an options page that goes into the Background page to call some OAuth magic, and when it gets the required tokens, it will save them into local storage. Local storage is a new HTML5 key/value store, much like cookies, but also much more powerful. You can simply do this,

var myValue = "not a cookie";
localStorage["cookie"] = myValue;
alert(localStorage["cookie"]);

localStorage.removeKey("cookie");
if (!localStorage["cookie"]) {
	alert("The cookie is no more.");
}

Friggin’ sweet!

So, with that, I can have a function in my background page to check if the user is logged in or not,

var userData = {
	screenName:	localStorage["screenName"],
	userId:		localStorage["userId"]
};

function IsLoggedIn() {
	if (!userData.userId || userData.userId == 0) {
		return false;
	} else {
		return true;
	}
}

After logging in, we need a page to do the sending. This was actually the first thing I did,

The file, manifest.json, at the root of the extension directory, is where all this magic happens,

"browser_action": {
	"default_icon": "icon19.png",
	"default_title": "Send to Twitter",
	"default_popup": "html/popup.html"
},

After some playing around I finally got something looking like this,

To get the address of the currently selected tab was easy as,

function applyCurrentTabToAddress() {
	var currentTab = chrome.tabs.getSelected(null, function(tab) {
		addressText.value = tab.url;
	});
}

(There was a bit more code in there to do some URL checking).

Almost there! Now to just send it!

function sendMessage() {
	var message = messageText.value;
	var address = addressText.value;
	bg.PostLinkToTwitter(message, address);
	window.close();
	return false;
}

bg is a variable I defined earlier as a shorthand for the background page, (it’s just var bg = chrome.extension.getBackgroundPage();). In the background page I do an AJAX request to the Bitly API to shrink the URL, and then another AJAX request via OAuth to Twitter. There is a little badge animation too, simply set up using an interval and chrome.browserAction.setBadgeText({ text: currentBadge});.

To do the final thing, the pop up to indicate the job has completed, I use the WebKit Desktop Notification API. So long as you have requested permission in the manifest, you can make a desktop notification.

function notifyComplete(message) {
	var notify = webkitNotifications.createNotification('',
		'Just sent to Twitter', message);
	notify.show();
	setTimeout(function() {
		notify.cancel();
	}, 4000);
	chrome.browserAction.setBadgeText({text: ""});
}

Notice the timeout to hide the notification window. Desktop notifications don’t have a set timeout period (stupid idea, but it is rather new), so you have to do it yourself.

Now, next thing I wanted to do was allow for you to chose a picture on the page to also shorten. I first thought you could click a small link, then all images on the page will become “hot,” click the picture and the popup reappears. Unfortunately, you cannot programmatically call the popup to open, so that was out.

The solution was to inject a content script on the page. This requires the "http://*/*" permission in the permissions array of the extension manifest. Yeah, that’s saying that it can access any website.

To only have it load when required, I have the following function,

function injectImagePicker() {
	chrome.tabs.executeScript(null, {file: "js/imagePicker.js"});
}

That injects the script onto the current tab. The script is very simple,

if (window == top) {
	var myImages = findImages();
	chrome.extension.sendRequest({method: "get_images",
		result: myImages});
}

function findImages() {
	var images = document.getElementsByTagName("img");

	var output = [];
	for (var item in images) {
		if (typeof images[item].src != "undefined") {
			if (output.indexOf(images[item].src) == -1) {
				output.push(images[item].src);
			}
		}
	}
	return output;
};

In the third line of that code block, is the sendRequest call, which is part of the messaging API. It’s rather simple, that line will send a request to the background page with the JSON.

On the background page, I just have to add a listener to the onRequest event with a callback function,

chrome.extension.onRequest.addListener(
	function (request, sender, sendResponse) {
		if (request.method == "get_images") {
			getImageCallback(request.result);
		}
		sendResponse({}); // we don't want to do anything
	}
);

The final sendResponse will close the message pipe. getImageCallback is a callback function that the popup sets on the fly with the background page. We do this because sending messages to other pages isn’t as easy. We get our little array of images and splat them out on the popup.

Finally, you go into Manage Extensions (tip, right-click the button to get quick access to it), and in the Developer Mode box hit the Pack Extension button.

The end result,

Really, the only difficult part of this whole exercise was the OAuth stuff. If you know HTML and Javascript, you’re pretty well placed for Chrome extension work.

You can download the extension from here, but I still have a lot of tidy-up work to do, especially in the Javascript department, before I submit it to Chrome.

Microsoft had a huge marketing spending splurge, which kinda made me sick just looking at it all. As a gamer, I don’t care what some actor says about a peripheral (cheque please). But then, Microsoft isn’t aiming Kinect at me, they want that whole casual market to cash in on.

Controller free gaming isn’t new, Sony did it during the PS2 days with the EyeToy. It was fun, but you got over it quickly, and came about the same time the SingStar franchise was starting up – the party was always up for more SingStar than EyeToy. But, it never took off, and never got any compelling gaming experiences. As Richard Marks (the guy at Sony behind the EyeToy and Move) has said about it, sometimes you just want a button.

Now Microsoft is trying it on for size, and whilst they’ve got better technology, with infrared and 3D cameras and stuff, they’re still to convince me that it is a better system. There are signs that it is, but they’re going to have to capture me on more than the first round of shovelware. Which I think is the problem, Microsoft is focusing too much on the casual gamer, rather than its core audience. As IGN have pointed out,

Microsoft needs the core audience to tell the casual gamer what is cool. And if Microsoft doesn’t get that long-time Xbox 360 gamer behind Kinect, it will fail. We need some games that show what Kinect will do for someone who loves games like Halo or Castlevania or Gears of War. I’m not saying it has to be a first-person shooter where you are the gun, but we need to see more gamers that have depth to them.

Sony on the otherhand have a system built around the PlayStation Eye. They’ve been trialling ball-on-stick tracking for years now, since about 2000 (here is Richard Marks’ demo from about 2003/2004), but only now got a commercial product. PlayStation Move doesn’t just use the wand though, but it can do head and body tracking, facial recognition, all that fun stuff that’s ripe for exploitation.

There is definitely a broader range of games on Sony’s system, games that cater to the casual and the “core” gamer, and they’re also showing how it can be flexible by enabling support in other games as well, such as Heavy Rain and Little Big Planet. They must be taking their lessons about the EyeToy seriously – no compelling games? No sale.

Whilst this is the “first wave” that any platform has to suffer through, this first wave of games is coming right in the middle of an already mature game console cycle. We are getting bigger and better games all the time, and that was especially evident at the Sony press conference where they just kept whacking you with new, big, better games. It’s all up to Microsoft and Sony to show us the direction they want to head in with their motion controllers.

Meanwhile, Nintendo is laughing to the bank with all the core games they just announced for the Wii.

The reason? One web browser treats unknown tags differently to the rest. That browser, Internet Explorer.

Until I found Dive into HTML5. It’s a free “book,” detailing HTML5 changes and even explains how you can HTML5-ify your site. And, it even describes a quirk in IE’s JavaScript that can be used to enable HTML5 components (of course, it means that your site is dependent on JS being turned on).

HTML5 was designed so that older browsers can still parse the document, unfortunately, it depended on functionality that 60% (or so) of the web browsing population don’t have.

You may be wondering why I used the HTML5 doctype then. Well, the answer is simple – it’s easy to remember. One annoyance I had with HTML4 was that if I wanted standards, I had to find a website that listed all the correct doctypes, figure out what I wanted, and pasted that in (yeah, I can’t remember them). HTML5 only has one, and it’s forwards compatible. (Who knows what they’ll do with HTML6, although I guess we won’t find out for another 20 years.)

We have a long way to go yet.

Social Graphs and Personalisation

Facebook announced the Social Graph system and instant personalisation about a month ago. The former seems a lot like Twitter, and the latter seems to be something that should ask for your permission. Facebook stipulated that the only data sent is stuff that is open the everyone, yet then the cries of privacy being breached came. What happened?

My settings are pretty strict, I only share things between Friends or Friends of Friends. Well, there is the basic directory info that I share with everyone, and that’s because I want people to find me (a social network is for finding people and making connections, and if I can’t find you, then you don’t know what social networking is). Only people who I say “I know this person” can see what I’m doing and what I’m up to (although, most of the time, it’s to the oh-so-public Twitter, so, you know what I’m doing anyway).

And here’s the kicker, everyone was saying that Instant Personalisation was opt-out. Problem was, I never opted out, or opted in, and I’m not in it. I read the complaints on Twitter, when I inquired I got a “You’re kidding right?” When I figured out what the hell was going on, I found the Instant Personalisation screen and that the box wasn’t checked, and never has been.

Everyone, it means Everyone

Facebook uses the term “Everyone.” I can see why, Everyone is all emcompassing, and pretty much summarises in a single word who you are sharing your data with. But alas, there is that vague-ness about it. “So, Everyone means just people I’m friends with, right?”

When Facebook said “OK, now we have these API’s that lets people access that data,” people just went “Wait a minute. So, my data is public now?”

Yes, your data is public now, and has been since you said “Everyone” could access it.

They should probably call it something else, maybe, “Everyone, including people and businesses you don’t know.”

But, it did yield good results

The best thing about the privacy furor, good things did happen.

Facebook finally simplified the privacy controls – still giving that granular control that everyone wants, but made it simple at the same time. They should have had that to start with.

They also finally clarified what Everyone means…

Information you’ve shared with everyone – as well as your name, profile picture, gender and networks – could be seen by anyone on the Internet. Please be aware that it will be visible to anyone viewing your profile and applications and websites you and your friends use will be able to access it.

(Emphasis, theirs.)

In fact, I love their Privacy guide. Go and read it. It tells you exactly what’s going on, without the legalese. I wish every web site did this, for all legal policies. Take a look at the Creative Commons license I’ve got on this blog. It gives you an easy to read version of a legal document that can be understood by anyone looking at it for five seconds. If you must, you can dig deeper and look at the legal license that sits behind it.

Facebook also had a bug appear during the middle of all this which let you pretty much log in as someone else just by using a simple tool that lets you look at your profile as someone else. I expect QA would be tighter now on privacy than ever before.

The problem wasn’t just Facebook here, it was everyone, including people and businesses we don’t know. Facebook have done some pretty dodgy stuff (the do-first-ask-later game is getting pretty tiring), but when I read their privacy policy all I saw was “if you said that this information is public, then fair game.” Facebook asked, people said yes, but then changed their minds when it got real.

Of course, the simpler thing is to not put stuff up there you don’t want strangers to know.

There are a compilation of Google Maps layers, with forecasts to where the oil is headed, and the latest satellite imagery. Then there are links to Google Earth/KML files with this, and more (such as animations of the spill). There is also this great overlay with all the worlds oil spills (and rapidly updating data on the current one).

The Daily Kos has an article on how to do “fucking proper fucking booming.” Quite interesting, and here’s a sum up in picture format!