Looking at the future it looks like pointing devices will play even more of a role as keyboards are stripped out and replaced with on screen keyboards in tablets and smart phones. Without a textual awareness of where one is on these keyboards (ever wondered what the raised bits on the F and J keys are?) it is very hard to ensure that you are hitting the right keys which is important when that’s your only means of navigation.

Global Accessibility Awareness Day (GAAD) asked participants to disconnect their mouse for an hour and experience using their computer using the keyboard alone. This initiative is a great means to make people think about the way they use computers and shows gaps in their knowledge of system shortcuts (I for instance click on the spotlight logo, when Cmd+Space does the same job).

I would argue that navigating software via keyboard alone should be part of any testing process for web, mobile and software developers who work within the NHS and government. It’s so easy sometimes to overlook accessibility when the pressure is on but by taking an hour to navigate using the keyboard alone can help pinpoint any areas you’ve missed and save an expensive redevelopment further down the line.

Of course if you’re developing command line tools I think you’re fairly safe

What is it like to navigate a Mac without a mouse?

I’m a Mac person at home. I’ve tested the website at work with WebbIE to ensure it’s screen reader friendly but for participating in GAAD I spent some time on my own computer to experience it as a ‘consumer’.

Mac OS X includes a programme called Voice Over. Voice Over uses the keyboard keys to navigate around the elements on screen. It achieves this using the Ctrl + Alt and then the Arrow keys, you enter elements using the Ctrl + Alt + Shift + Down Arrow combination and you leave elements using the Ctrl + Alt + Shift + Up Arrow combination.

My first impression of Voice Over was that it was a massive undertaking to learn all the commands but after a while I learned that these commands where hardly used in general usage. I had a few issues early on when the tutorial failed to give me access to the elements it was explaining how to navigate once I was past the tutorial it worked perfectly.

As a built in programme Voice Over did it’s job, I was able to launch Chrome from the dock (Ctrl + Alt + D) and then use it to navigate to a few websites I wanted to test. I found that Chrome splits the browser into three elements; the tab bar, the navigation bar and the webview. The navigation bar took some time for me to figure out but I got there eventually. One thing of note was the fact that on loading a normal webpage I was brought out of the webview element, so had to re-enter it to interact with the page (on Facebook this wasn’t the case but I guess this is due to javascript bringing in elements of the page).

My journey through the web

I visited the following websites during my hour:

• www.stgeorges.nhs.uk
• www.chelwest.nhs.uk
• www.gov.uk
• www.facebook.com

First off I visited the website I work on (www.stgeorges.nhs.uk ). As I mentioned early I have tested the website a while back using WebbIE. This browser strips out the Javascript and CSS of the page where as my Voice Over and Chrome combination didn’t. This made a difference as it meant that my path through the content wasn’t strictly top to bottom as WebbIE’s path was. Two things I found affected every page I visited:

• Jump links didn’t work properly
• Inline links seem to break Voice Over’s flow of speech

Generally the website was easy to navigate I was able to go through the pages jumping from element to element and it read all the text clearly. There were a few things I picked up on though, these were:

• The Voice Over software says the term GPs (as in general practitioners) as GPS (as in global positioning satellite)
• We use vertical lines in our navigation to separate the options on top of the page, Voice Over picked up on these

After seeing how the St George’s site performed I decided to test Chelsea and Westminster Hospital Foundation NHS Trust’s website. The reason I chose this site was because it’s a relatively new build and they use a CMS we are interested in.

Again the site performed well and was generally easy to navigate through but there was one issue I did encounter with the main navigation bar and looking through the source I can’t comprehend how it came to be.

On navigating through the main navigation Voice Over only said ‘link’ / ‘visited link’ instead of ‘link – Services’ / ‘visited link – Services’. It wasn’t until I entered the element that I was able to hear the text of the button. I think this may have been due to the button’s text being put inside of a span tag.

After visiting Chelsea and Westminster’s site I chose to try out the new gov.uk website as this looks really awesome. I had problems straight way when accessing the site though, I think this was due to the setup I was using but I encountered the following issues:

• On first hitting a page a big box covers a fair portion of the screen explaining the use of cookies on the site. The HTML for this box must be towards the end of the page’s HTML as I had to jump through all the pages elements (it was reading the elements behind the box) to eventually press the close button.
• On trying to access the search box on the homepage I wasn’t actually able to type in the box or enter the element meaning that the notion of it being a Google for government was ruined for me

As stated though, this may have been my setup and I’m sure that using a screen reader like WebbIE would not raise the same issues.

After giving up trying to use the gov.uk website I thought I’d try Facebook as it’s most visited site. Surprisingly I was able to navigate through it. The one thing I will say is that there are way too many elements that make up the like, comment, share links. Navigating through all the posts on my wall was really hard but I was successful in my attempts to respond to a couple of posts, check my notifications and search.

Summary

My experience using my Mac via keyboard commands was a big learning curve initially but once I understood the basic principles I was able to achieve most tasks effortlessly. I think that if I was to rely on my keyboard alone for navigating the web that I’d switch my browser for Lynx or a more accessible browser due to the issues I had but overall it went smoothly and I was able to achieve the tasks I needed to.

The GAAD initiative should be promoted among developers and a culture of going mouse-less during testing should be adopted to iron out any accessibility issues. I think one of the reasons the initiative works is because not only does it give a developer first hand experience of using their product in this way but it also makes them do so with the tools built into the computer.

Any developer can whip out a £700 screen reading program and claim their product to be accessible but by going mouse-less throughout the whole process and using the system’s accessibility tools they can see access issues like a normal user would.

The problem is that the syntax is rather odd (full options here) and can be very long winded to type out, especially if you make an error. To help with this I’ve created a simple jQuery powered tool over on JS Bin. This tool asks you for a few simple parameters and once the form is complete it will spit out a command you can copy and paste directly into Terminal / command prompt.

You can find the tool at http://jsbin.com/ivirin/33, feel free to clone it and have fun with it.

My definition of a (standard) NHS computer

From my experience the common NHS PC setup is a Windows XP professional machine that uses network drives for storage. This means that no sensitive data is left on the physical machine and it’s all stored in a centralised place. While this method is great for security and governance it means that the tools available to a developer are very limited. Companies tend to assume that the machines running their tools are newer or they block out older operating systems in a bid to get you to upgrade (Microsoft and Apple are guilty of this).

What platforms can be targeted on a NHS computer

As explained the operating system immediately removes a few platforms. You need a Mac to develop for iOS and Windows Mobile 7 requires Vista or greater. You are able however to develop for the following platforms:

• Android
• Blackberry
• WebOS (using Phonegap)
• Symbian (using Phonegap)

You can use Phonegap’s build service to target all the major platforms but this blog post is looking at tools that will run on the hardware.

Dealing with IT

The biggest roadblock in getting app development tools set up on a NHS computer will be IT. As much as I appreciate the service and support they provide it can be hard justifying your needs to them. They hold the keys to installing any software on the computer unless you have administration privileges (I do but it took a complete reinstall of Windows to get it) so you’ll need a definitive list of what needs to be installed so you can crack on.

Dependent where you sit in your organisation it might be easier or harder to get someone in a high position to put their authority behind your request. The way that I did this was to talk to my director of communications (I sit in comms so he’s technically my manager) and explain why apps are the way forward, showed a few NHS examples and that any apps I build will go through our patient information group.

Below is a list of tools needed for each platform

Android

• Eclipse (requires the use of the installer service)
• Android SDK and Android ADT, this is easiest setup from within Eclipse (which requires internet access to Google’s servers and admin rights to run the setup scripts
• Rights set up so that Eclipse can compile apps and launch the emulator

Blackberry

• Java SDK (requires use of the installer)
• Apache Ant (requires use of the installer and rights to set PATH in the command prompt)
• Blackberry SDK (requires use of the installer)
• Adobe Air (requires use of the installer)
• Blackberry emulator / Blackberry device connect (requires use of the installer)

WebOS

• Virtual Box (requires use of the installer, needs to have rights to create virtual machine environments)
• WebOS SDK (requires internet access to the WebOS SDK download site)
• Cygwin (it is highly likely that IT will object to this as it essentially renders any Windows network security features useless)

Symbian

• S60 SDK (requires installer, contains an emulator so is optional)
• Cygwin (it is highly likely that IT will object to this as it essentially renders any Windows network security features useless)

As noted in the WebOS and Symbian tools list Cygwin will be very hard to get IT to set up especially if IT don’t think you are experienced in system admin enough. Cygwin is a tool that allows you to run the make tool in the command prompt which compiles an app from a make file, it achieves this by bringing in a few Linux tools into the Windows environment. A few of these tools allow an experienced user to get around Windows network protocols and access files and other information they shouldn’t, it’s highly recommended if you are granted the ability to use Cygwin that you are aware of these security risks.

When using my work computer I’ve found that I can’t use the command prompt to cd into the C drive where a lot of software installs itself by default, instead I can only use the command prompt within my shared drive. In the case of Apache Ant I moved the files I needed to access to my shared drive and set up PATH to use these files. This requires a bit of fiddling but is a lot easier than trying to get access to cd out of the shared drive.

Other tools

The development tools aren’t the only tools needed to create apps. You’ll need to create icons of various sizes, splash screens and other assets so be sure to obtain a graphics editor (MS paint just won’t cut it I’m afraid). A couple of free packages I’d recommend are Inkscape and GimpShop (which is a photoshop like version of GIMP)

Eclipse is a good editor for files but if you’re building a Phonegap app then you may want a more lightweight editor to make changes with. I’d recommend Notepad++ which I use everyday in my day job. Likewise if you’re using Phonegap you may wish to get a browser that renders similar to the browser in the platform you are targeting. All the platforms use the Webkit render engine (apart from older Blackberry models) so use Safari or Google Chrome as they both use the same rendering engine as the default browser.

What to take away from this

Hopefully this post has given some indication to the options available to NHS staff using the systems they have to work with. The side benefit of removing iOS is that you can immediately start building apps without spending any money. Blackberry handsets also seem to the preferred choice for the NHS to give to it’s executives, meaning that it’s more or less likely when writing apps for exec staff you won’t be targeting iOS anyway.

On loading the app it checks the web server for two JSON files and if they are newer than the locally saved files it downloads them. This has been working perfectly in the simulator, my old iPhone via WiFi and on another iPhone I tested the app on over 3G. Today I tested it on my colleagues o2 iPhone over 3G. To my surprise it never updated. I initially thought that it was a network issue given the poor reception we get in my office so I hooked the phone up to Xcode and ran a bunch of NSLogs to see what was going on.

It turns out no matter how many times I changed the apps Cache policy and cleared the shared cache it would not load the new version. It wasn’t until I tested over WiFi that I was actually able to see the actual issue, o2 (and there’s potential that other mobile phone service providers do this too) caches the content. This means that o2 is caching the 11KB file that the app is trying to load and when a new version is issued instead of allowing the new version to be downloaded it is instead sending the old version it has cached. Luckily the app I’m making is just an enhanced version of a generic patient information leaflet so doesn’t contain any data that could result in clinical error but in an app that requires updates to guidance this can cause serious risk.

The idea from o2′s perspective is to increase the speed that it’s users can access this data as it takes less time for them to download the data and if it’s used by multiple users then it cuts down on o2′s bandwidth use, this has massive benefits for photos and other media. The problem with this is that it creates a potential clinical governance issue as depending on how often the cached data is updated it could be days before a healthcare professional receives new guidance.

The illustration I’ve created below explains what’s going on

As you can see the phone is asking for the data but on the second request for the data as the mobile service provider’s caching server has been asked to get the data recently it is returning the old data.

How to prevent this from happening

After identifying this issue I started looking at ways of preventing o2 (and others) from caching this data as it’s only 11KB. I came across Stuart Roebuck’s excellent posts on the subject (His initial post on it causing Javascript to break, His post on how to bypass the cache). These posts show that there is a HTTP header you can utilise if you are able to set these up on the server holding the data.

Cache-Control: no-transform

When you send this HTTP header along with your data it means that o2′s caching server won’t cache the data and allow you to download the information without it touching it. Of course this will only work if you are able to change this header yourself or via the server administrator. It’s best to apply this HTTP header to a single folder that contains data you don’t want cached. This means that the rest of your sites content can be cached, resulting in faster load times.

Applying this solution in a NHS / public sector environment

The public sector tends to hire agencies to produce and manage it’s websites and apps. In a worst case scenario this can mean that an app produced by one agency (unaware of the caching problem) could take a month to reveal this issue, once this has been identified it may take another week for the agency managing the website’s server to apply the HTTP headers to the folder holding the data.

Luckily both Windows and Linux servers have a way to apply rules to a folder via a text file. Windows servers use a file called web.config which uses XML to define how to handle the folder whereas Linux servers running Apache use a file called .htaccess which is a plain text file, these are ‘invisible’ by default so you may need to set your FTP client to show ‘invisble’ files. I’ve posted both solutions below. Simply create the file for you server and paste the code to set up the HTTP header for the folder holding your data.

Apologies for the links, I’m currently experiencing an issue with posting code on my blog.

Microsoft web.config setup

https://gist.github.com/2362280

Apache .htaccess setup

https://gist.github.com/2362454

What to take away from this

It’s important that you don’t let these little things put you off making / commissioning an app, the solution takes no time to set up, it just requires a bit of chasing. Here’s a few bullets on what to think about when looking at a NHS app that will grab data over a non WiFi network:

• Make sure the server holding the data has the ‘Cache-Control: no-transform’ HTTP header set up
• Test the app on as many phones and over as many different data speeds as possible. The iPhone simulator doesn’t simulate connection speeds or caching handled by the mobile phone service provider
• Make sure any agencies you use are aware of this so they don’t make this mistake
• Name and shame any networks you find that cache data in the comments so we can add to Stuart’s list of networks that do this

The NHS Identity website has guidelines for NHS websites but not apps which is a little bit archaic considering how much mobile has changed the playing field. Of course the diversity of mobile branding elements doesn’t make this easy considering the bare-minimum branding for an iPhone app  is the following:

• 512x512px logo for iTunes
• 114x114px icon for Retina display iPhones (4/4S)
• 58x58px icon for non Retina display iPhone (3G, 3GS)
• 640x960px splash screen for Retina display iPhones (4, 4S)
• 320x480px splash screen for non Retina display iPhones (3G, 3GS)

If you add the iPad you’re looking at 3 more resources (and another 3 for Retina display iPads). On top of this Android supports multiple (at lesast 4) screen resolutions and you’ll need another bunch of icons if you’re supporting Blackberry and Windows Mobile.

Of course most NHS apps are produced by companies that have experience in this but people like myself who are doing this by themselves, working from home and learning as they go won’t be aware of the myriad of icons sizes they need to produce. The website guidelines are a good start to branding an app but there are some challenges unique to apps where you are trying to utilise the OS’s UI elements to provide a good experience not reflect the authority of the data source. Once a user is using the app essentially your app will look the same as any other app (with a few exceptions).

Maybe some research could be put into seeing how NHS service users find different ways of displaying buttons, tables and other UI elements on mobiles so that developers can ensure that their app will be well received and easy to use. The app stores are fickle markets and keeping users is a lot harder than getting them in the first place.

Denmark Street in London is pretty much a haven for a guitarist so yesterday I jumped on the Northern Line and made my way to the newly reopened Tottenham Court Road station and went go get a cheap but decent set up.

I’ve been eternally pestering the staff at London Pro Audio Centre about cables and boxes that would allow me to program MIDI into my Gameboy so I headed there first and saw that they had a Alesis IO|2 on sale for £85 so decided to take advantage of the deal and while I was there I added a mic stand, XLR cable and Sennheiser e606 to complete my set up.

The Alesis IO|2 works like a charm, it has two ‘channels’ each offering XLR, line in and insert inputs. This means that when I get the money I could essentially have two mics running at once, reducing the need to keep playing my guitar over and over again.

The only downside I’m finding at the moment doesn’t lie with the hardware but with Logic 8. For some reason it allows a plethora of options when it comes to inputs and outputs inside the computer but only allows me to select either my IO|2 or my Griffin FireWave, this means that basically unless I use the phones socket on the IO|2 (I don’t have 3.5″ headphones yet, so I’m running my Gameboy cable into my iPod dock) I can’t playback the music I’m trying to play along to!

Some pics

Alesis IO|2

Sennheiser e606 hooked up to my amp

My XML parsing script comes from Jason Terhorst’s excellent NSXMLParser RSS feed tutorial, and I used the solution to creating the array from this stackoverflow post. With this working fine I suddenly noticed that when running NSLog(@"%@",item); to see how the array was being generated that It was returning something like this:


{
"phone_number" = (
"020 8725 0001\n",
" \n",
" \n",
"020 0002 0001\n",
" \n",
" \n",
" \n"
);
title = "Accident and Emergency\n";
}


NSXMLParser was parsing the indents and line breaks that I put in my XML document so I could read it easily when writing it. I’ve heard that NSXMLParser does this if there’s no DOCTYPE defined in the XML but I couldn’t get my head around the syntax for that. I then found this post which although removed the whitespace and line breaks still returned blank array entries for the line breaks, this led me to the solution I used.

My solution (included in foundCharacters so you can see what I’ve done):

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string{
NSString *trimmedString = [string stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
if ([currentElement isEqualToString:@"title"]) {
[currentTitle appendString:trimmedString];
}
if([currentElement isEqualToString:@"phone_number"]){
if([trimmedString isEqualToString:@""]){
return;
}else{
[phoneNumbers addObject:trimmedString];
}
}
}

By returning when the string is nothing it doesn’t create blank array entries.

• Grab a screenshot of your profile with ‘timeline’ activated
• Make sure you have the images you need for the final product
• In GIMP create a marquee around the biggest block (the cover), color this in Black in a new layer
• Do the same for the smaller block (the profile pic) in a new layer
• Scale the image you want as ‘the cover’ down so that the main part of the image you want would be in the frame but ensure that there’s about 50px of the image under this line (we’ll use this as the background for the profile pic)
• Scale the image you want as the profile pic to fit in the box, then delete the background so the image’s focus is the only thing showing
• Now use the colour selection tool on the biggest block to select the entire block, change to the layer with the ‘cover’ image, hide all other layers and crop the image. Save this somewhere
• Use CTL/CMD + Z to go back a step so it’s not cropped
• Now use the colour selection tool on the smaller block, change to the layer with ‘profile’ image and then hide all other layers except the ‘cover’ image, as your now see that the profile image fits on the cover perfectly. Scale this image to 200px by 200px (Facebook won’t let you upload this otherwise). Crop this and save this somewhere
• Upload the images in the relevant places, make amendments if needed

Here’s mine

Fun with the new 'timeline' Facebook profile layout

Putting the blog in Tumblr allows us to also tap into other blogs on there and help to bring to light other people’s work about the game and it’s over arching franchise if there is one. We’ve been talking about doing the blog for a while now but finally getting ourselves together to make this idea a reality.

The first game we’ll be covering is Resistance 3, which we just completed today.

I’m currently in the process of making a mobile app for work, the hope is that I can use my new phone to create an Android version of the app side by side with the one we’ll be releasing for the iPhone. Yesterday I set about trying to get my HTC Sensation working with the Android Debug Bridge (adb), after reading a few tutorials on the web (listed at the end of this post) I was quite stumped. I eventually mixed and matched a few and managed to get all working. My face lit up when ?????????? No Permissions turned into HT17******* device.

First step – Make sure your computer can see the phone

This tutorial will assume that you are running Ubuntu Natty Narwhal, you have the Android SDK running already, you know the directory it’s in and you know a little about using the terminal, I’ll try and keep it as un-technical as I can.

First things first plug your HTC Sensation into your computer using it’s USB lead. Go to settings > Applications > Debugging and tick the top two boxes. Now press the home button and make sure you don’t look your phone. We’ll start off running adb to see if it finds the device. Open up the terminal and type ‘~/android-sdk-linux_x86/platform-tools/adb devices‘, I’ve set my Android SDK in my home folder, if you’ve placed yours else where replaces the ~ with that directory. Running this command should show all the connnected Android devices, if you see a bunch of question marks it means that it’s not recognising the device. If you see a serial number then you don’t need to do anything as it recognises it. If for some reason it doesn’t say anything type ‘lsusb‘ into the terminal and look for ‘Bus 001 Device 008: ID 0bb4:0c86 High Tech Computer Corp.‘ The bus and Device aren’t important but the other bits are. If you don’t see this then your USB lead may not be working.

Second step – setting up the udev files

Linux uses a thing called udev to define what devices plugged into the system do and can be used for. To get adb to use the HTC Sensation for debugging we need to create some rules for it. First let’s see if there’s any Android rules already set up. Type ‘ls /etc/udev/rules.d/‘ into the terminal this will list the contents of the folder where the Android udev rules would sit. If it prints out the following ‘51-android.rules‘ or ‘99-android.rules‘ then skip the next paragraph.

If there wasn’t either of those files then we need to create the rules for the android devices. I’m not entirely sure if 99 or 51 is the correct name for the file (the Android Dev documents says 51, this tutorial says 99) so to ensure that it works I’m going to create both. Type ‘ sudo touch /etc/udev/rules.d/51-android.rules‘ and ‘ sudo touch /etc/udev/rules.d/99-android.rules‘ into the terminal, this creates both files (touch creates files).

Now we need to add rules for the device into these files. Smakked on the XDA-developer’s forum put up this awesome little snippet which I’ve been using.

#HTC Sensation
SUBSYSTEM=="usb", SYSFS{idVendor}=="[0bb4]", MODE="0666"
SUBSYSTEM=="usb",ATTR{idVendor}=="[0bb4]",ATTR{idProduct}=="[0c86]",SYMLINK+="android_adb"
SUBSYSTEM=="usb",ATTR{idVendor}=="[0bb4]",ATTR{idProduct}=="[0c86]",SYMLINK+="android_fastboot"

Copy this code and then type ‘ sudo gedit /etc/udev/rules.d/51-android.rules‘ into the terminal, this will open the 51-android file. Paste the code at the end of the document and save it. Now type ‘ sudo gedit /etc/udev/rules.d/99-android.rules‘ into the terminal, this opens the 99-android file, again paste the code and save the file.

Finally we need to set the permissions for the files. Type ‘sudo chmod a+r /etc/udev/rules.d/51-android.rules‘ and ‘sudo chmod a+r /etc/udev/rules.d/99-android.rules‘ into the terminal. This will allow the system to use the files properly.

Third step – Restart adb and check the device settings again

So now the udev files are in place we now need to reset adb so we can use them. Type ‘~/android-sdk-linux_x86/platform-tools/adb kill-server‘ into the terminal. This will stop the adb daemon from running. Now unplug your HTC Sensation, I found that it didn’t find my phone until I plugged it in again. After unplugging you phone type ‘~/android-sdk-linux_x86/platform-tools/adb start-server‘ into the terminal, this will start the adb daemon again. Plug your phone in again, make sure it’s not locked and then type ‘~/android-sdk-linux_x86/platform-tools/adb devices‘ into the terminal. Hopefully you’ll see a list of numbers instead of a lot of question marks. If not maybe try restarting the computer and once it’s restarted type ‘~/android-sdk-linux_x86/platform-tools/adb devices‘ into the terminal again.

Below are a list of tutorials that helped me work this out:

• Android developers documentation
• Eddie Ringle’s udev on Natty Narwhal post
• Dimitar Darazhanski’s blog
• Smakked’s udev snippet for HTC Sensation

If this didn’t work and you found a solution please put it in the comments.

Update – 26/08/2011

So since writing this tutorial I’ve found that the rules weren’t as permanent as I’d hoped. If you’re having issues with ADB after rebooting or generally go to the Terminal and type in “~/android-sdk-linux_x86/platform-tools/adb kill-server” and then use sudo to restart the server by typing “sudo ~/android-sdk-linux_x86/platform-tools/adb start-server“. This should hopefully make it work again as it had before.