Darren Ferguson - Blog
30 March 2009 at 21:32
My Thoughts on FOWA Dublin
This post is a little late, I've been upgrading my blog.
A couple of weeks ago I attended the FOWA "show" in Dublin. The use of the word show is from the organisers Carsonified - not myself - and there was definitely a frustrated rock star air to the whole thing. Words/Phrases of the day were "Awesome" and "Kick-Ass" and the fuck count was up in the twenties within the first hour.
The highlights of FOWA for me were as follows:
Being introduced to Balsamiq Mockups an nice little tool for producing wire-frames of web page layouts, though as Elliott Kember points out - in a rather long winded blog post - it can be dangerous in the wrong hands. Business users could suddenly think they are UI designers who can do your job for you.
Simon Willison gave a good presentation on security. He talked about XSS and SQL Injection which we should all know about but also CSRF and Click Jacking. If you aren't familiar with the latter then you should be. In summary, consider the following when developing web applications:
- Don't modify data in get requests.
- Keep Sessions short.
- Don't use a remember me function (either as a user or developer).
- Don't let your pages be loaded into iFrames - use frame busting Javascript.
- Add a hidden field to your forms containing a server generated token which should be validated when a form is processed.
I know I haven't given reasons for the bullet points above, but they should be fairly obvious. Hopefully Simon's talk will appear online somewhere.
Finally, Robin Christopherson of ability net gave a presentation using a screen reader. Interesting points raised were:
- Auto playing media with sound drowns out the voice of a screen reader making it impossible to navigate a page.
- Badly written alt tags really mess up the usability of a page. Despite the fact this is such a well publicised issue massive amounts of developers still don't provide meaningful alt tags.
- The audio equivalent of Captchas are frequently unintelligible, despite offering to provide manual assistance during signup large organisations - including Google - frequently don't.
I'm now committed to never placing a Capctha on any site that I work on in the future.
Other than the above, the conference was largely uninspiring (for me). David Heinemeier Hansson from 37 Signals was entertaining but delivered a motivational speech rather than anything technical. Blaine Cook (of Twitter fame) came frustratingly close to saying something interesting on several occasions but ended up delivering a very high level and fluffy talk on social networking. The guys from Contrast had a good delivery style, but I didn't need to be told that the web is full of conventions and cliches, I work with it every day. I know.
Anyone else who spoke just fell of my radar. That isn't a criticism, maybe I just wasn't the target audience. I know this post may come across as being overly negative but it honestly isn't intended that way. My kind of conference just involves more tech and more innovative cutting edge stuff.
I'd be interested in going to FOWD in London, they have two tracks as opposed to the one offered in Dublin so you can pick and choose your speakers.
So that was my 5 minute summary of FOWA Dublin. There are a load more posts all over the web complaining about the WIFI, coffee and praising/slating various speakers. I've just picked out the bits and pieces that were relevant to me.
30 March 2009 at 10:01
Quick Perl script: Scrape your photos from Twitpic
I've been following Noah Everett the creator of twitpic on Twitter. Although he provides a great service it does appear to be a one man show - there is every chance he could get fed up and walk away - I doubt the terms of service give the user any way of getting their photos back if that happened.
Most people use twitpic for throw-away snapshots posted from their handheld device but I use a twitter account with protected updates to create a timeline of my daughter growing up. I photograph her day to day on my iPhone and as my twitter client doesn't offer an option, the photos end up on twitpic. These photos are memories I am not prepared to lose.
Below is the script i run once a week to ensure my photos are backed up.
use strict;
use utf8;
use LWP::Simple;
use XML::Simple;
use Data::Dumper;
use Date::Parse;
use Date::Format;
use XML::DOM;
my $content = get("http://twitpic.com/photos/darrenferguson/feed.rss");
die "Couldn't get it!" unless defined $content;
my $xml = XMLin($content);
foreach my $item (@{$xml->{channel}->{item}}) {
my $link = $item->{link};
my $date = $item->{pubDate};
$date = str2time($date);
$date = time2str('%Y-%m-%d_%H-%M-%S_', $date);
$link =~ m|.*/(.*$)|;
my $id = $1;
my $html = get($link);
if(defined $html) {
while($html =~ s|(<img.*?>)||ism) {
my $tag = $1;
if($tag =~ m|class\=\"photo-large\"|) {
$tag =~ m|src\=\"(.*?)\"|;
my $src = $1;
my $img_data = get($src);
if(defined $img_data) {
my $fn = "$date-$id.jpg";
if(!(-f $fn)) {
open FILE, ">$date-$id.jpg";
binmode FILE;
print FILE $img_data;
close FILE;
}
}
}
}
}
}
15 March 2009 at 08:39
Testing my Twitter based location app at FOWA Dublin
The week before last the fine folks at Carsonified were kind enough to let me use the attendees of their FOWA Dublin show to test a Twitter/Google Maps/location "mashup" that I had developed. I've been asked to blog my opinions on FOWA, but for this blog post I'll focus on my app.
Here is the mail that went out to the attendees:
----------------------------------------------------------------
Connect with fellow attendees using Twitter!
----------------------------------------------------------------
Darren Ferguson - / has built a
very cool social twitter app to help you find and meet fellow
conference attendees. So you guys can get the most out of the
event we have set this up for you to use during FOWA Dublin!
Here's how it works:
First, follow fowdublin and wait for it to follow you back.
Keep your twitter profile location up to date or include a link
to a google map at the end of your message when communicating
with fowadublin.
If using an iPhone Tweetie or Twitterific will all allow you to
append map links to your messages. Twitterfon, Sparrow and
Brightkite allow you to update your twitter profile location.
To publicise your location send a direct message to fowadublin,
for example:
d fowadublin Holiday Inn Hotel Bar, Swilly Road
Optionally attach a twitpic so that people trying to find the
venue have something to recognise.
To find people try the following commands:
d fowadublin near
d fowadublin nearest
d fowadublin newest
d fowadublin where @twitterid
Don't forget to add a map to the end of the command if you can!
You will receive a direct message as a response - usually within
2-3 minutes. for nearest, newest and where commands the response
will include a link to a map showing you how to find the
appropriate person e.g.
nearest @fmoriyama 6 mins ago 0.6 miles away in Dublin
http://tinyurl.com/dbre9o "Sycamore House"
If you want to be kept up to date every time someone updates
their location send the following direct message:
d fowadublin alerts
d fowadublin noalerts
If you get stuck you can get a reminder of all of these commands
by sending the following direct message:
d fowadublin help
Tips on updating your location:
If updating from a laptop give street level locations e.g
"Castle St, Dublin" or a Latitude, Longtitude postion.
If updating from an iPhone or other GPS enabled mobile update
your location outside before going into the venue.
If updating from an iPhone update with WIFI turned on even if
you are not connected to a wifi network - Don't ask me why,
you just get a better location fix especially on 2.5g iPhones.
If things don't seem to be working for you. Send an direct
message to fmoriyama for help or email xxx@fergusomoriyama.com
Finally, if you want to get in touch with someone before meeting
up, you have their twitter ID so it is easy to get in touch.
More than anything else, I want to blog about my experience with real world user testing and what I learned from the experience, but first a little background.
About 5 years ago I used to do a lot of drinking around London. I had a number of different groups of friends who were usually out in a bar somewhere in town. The problems were that sometimes they were in a noisy place and couldn't hear their phones, or often just underground. In addition when you know 30 people who may be out having a beer it isn't really practical to phone them one by one, find out where they are and then make a decision about who to join.
If you are still with me you should begin to see how the problem relates to my application. Essentially, it allows dispersed social groups to quickly find one another. As well as drinking buddies the concept works with conference attendees, families and is particularly useful when you are in an unfamiliar city.
5 years ago location information was firmly in the hands of the network operators and the idea was to use network LBS data from cell triangulation and SMS as the medium to communicate with the users. Now, your location data is firmly in your own hands and the Twitter API provides a fantastic set of methods for messaging and also for groups (if you consider everyone following one user to be a group).
So what was the feedback?
I hate to admit it but everything I learned I knew already. Through years of working with users It was all obvious.
1. Users don't read instructions. About 75% of the people who tried my app didn't read the instructions, they just started to interact with it in a way that they thought it should work and modified there behaviour gradually as their interactions didn't work. Some persisted, some gave up - amusingly one person was so convinced that my app should work *his* way he continually sent it the same message appended obscenities as he became frustrated that it wasn't working.
I shouldn't have been surprised that no-one reads instructions. When I buy a new laptop, I plug it in and switch it on. When I go to IKEA I lay all of the horrible bits of cheap wood and screws out on the floor and only go the instructions when I really don't understand what I should do next. Lesson learned, people don't read instructions - especially techies.
How could I do it better next time? I'd try a screencast. I find it much easier to absorb technical information if it is being demonstrated to me rather than reading it as text.
2. People want native applications. I thought that the beauty of my idea lay in the fact that that it was device agnostic. As it was based around Twitter and Google maps anyone with the appropriate clients could use it. If you were on an iPhone, laptop, Blackberry or any other device the user experience was pretty much consistent.
I was wrong. Users don't want to type text commands. Users are so used to beautiful simplified GUIs nowadays, so having to type the word nearest is a major headache. Why would they do that? They expect a big red button that says 'nearest'.
Also, why would a user wait for a response when they can have instant feedback. A few years back sending and SMS and waiting a few minutes for a response was an acceptable user experience, now everything is on demand you can have your TV, Music and news whenever you want it, so why would you wait?
Despite the fact it massively and exponentially increases your development/testing overhead it seems that you do need to build native apps or at very least applications that run in the browser. As a direct result of my tests at FOWA I've downloaded and installed the iPhone SDK.
3. Even geeks don't always get location. When people were trying to tell my app where they were they were often being a little too vague. With an application like mine the ideal scenario is that a user provides a latitude/longitude point but when the device they are using doesn't provide this ability or they are somewhere where you can't get a GPS fix (indoors) then you need a fallback.
At FOWA Dublin plenty of people assumed that 'Hotel X' was a sensible description of their location. They assumed that since my application was targeted at an event happening in Dublin then it should be aware that the locations they described were in Dublin. This was interesting and has given me some good ideas for geocoding text based on location history and using sources other than a geocoding API to acquire address data based on a user description. Trying to geocode free text also involves some clever language processing techniques including removing noise/stop words and extracting significant fragments.
The point I am trying to make is that when GPS location fails you have to be very smart to find a user based on how they describe where they are.
Finally as an aside, if you are a tech conference organiser it is well worth setting up a conference Twitter account and persuading your attendees to follow. Although I hadn't considered this before FOWA, having a conference user allows you to see what people are saying about your event in real time. As I was party to the FOWA twitter account I could see what people thought of the speakers as they were on stage and how people thought the WIFI was poor, coffee to expensive and so on.
If you run a conference/social group and would be interested in trying out my application please let me know.
14 March 2009 at 09:36
Quick tip: Displaying maps on your Umbraco website
I've had a few requests to demonstrate how to show maps on your Umbraco based site using my Map/Place datatype.
The location you specify is stored as a latitude/longitude point with a Google maps specific zoom level. There are a number of different ways to display maps, but here is the method I used in my demo screen cast.
In your Umbraco template display the value of your map field:
<div id="map1" class="map">
<umbraco:Item field="place1" runat="server"></umbraco:Item>
</div>
Your template should include jQuery, the google maps API Javascript and the following javascript:
if (typeof ItemEditing == 'undefined') {
$('div[class=map]').each(function() {
$(this).addClass('mapdimensions');
var mapId = $(this).attr('id');
var value = $(this).html();
value = $.trim(value);
var point = value.split(',');
var lat = parseFloat(point[0]);
var lon = parseFloat(point[1]);
var zoom = parseFloat(point[2]);
fm.maps[fm.maps.length] = new GMap2(document.getElementById(mapId));
var m = fm.maps[fm.maps.length-1];
var p = new GLatLng(lat, lon);
m.setCenter(p, zoom);
var marker = new GMarker(p);
m.addOverlay(marker);
});
......
Note that the test for the existence of the ItemEditing is checking whether Canvas is present or not. I'm not sure whether this is the best way to do this. Also note that I add a class mapdimensions to the element containing the map. You should define this CSS class with width and height properties to specify the dimension of your map.
If you want to display a static map you can use something like the following:
$('div[class=staticmap]').each(function() {
$(this).addClass('mapdimensions');
var mapId = $(this).attr('id');
var value = $(this).html();
value = $.trim(value);
var point = value.split(',');
var lat = parseFloat(point[0]);
var lon = parseFloat(point[1]);
var zoom = parseFloat(point[2]);
var apiKey = '.....';
var imgSrc = 'http://maps.google.com/staticmap?';
imgSrc += 'center='+lat+','+lon;
imgSrc += '&zoom=' + zoom;
imgSrc += '&markers='+lat+','+lon+',blues';
imgSrc += '&size=400x400';
imgSrc += '&key='+apiKey;
var imgTag = '<img height="400" alt="map" src="'+imgSrc+'" width="400">';
$(this).html(imgTag);
});You should probably display a static map in an unobtrusive fashion (not using Javascript) and then replace it with a dynamic map if Javacsript is enabled. The example above are just to get you started and are by no means best practice.
Finally if you are displaying a static Google map using the img tag you should display an alt tag detailing what the map is e.g.
A map of Anfield Road in Liverpool, England. Latitude 50.17843 Longitude 0.1232
I consider this *very* important. I was recently party to a presentation given by Robin Christopherson of AbilityNet. Robin is blind and gave his presentation using a screen reader. I'd always imagined how small things like poorly written alt tags could make life difficult for impaired users, I now realise it makes life *impossible*.
Depending on interest there will be more information to come on maps, including how to display multiple markers on a map.