Native App beta testing with TestFlight

The prototype of our latest mobile App has flown the nest with the help of the very useful iOS beta testing software TestFlight which is proving to be a great tool during our distribution, testing and UAT cycles.

Patrick discovered TestFlight during the end of our phase 1 development of a mobile betting application for one of our clients ABETA International. As we’ve mentioned before, we build mobile web applications and native mobile applications using the SenchaTouch Framework; enabling us to produce intuitive mobile user experiences (UX) and user interfaces (UI) with the expertise and technology we have gained over years designing and building websites. Not wishing to repeat myself too much (it’s all here) we then package this up using PhoneGap for delivery to iPhone, iPad or Android devices.

One of the hurdles once the App is ready for client testing, bug testing or user acceptance testing (UAT) and the subsequent rounds of incremental version releases is how to achieve this in the most efficient way possible: obviously with website and web applications it’s a matter of setting up a staging or testing environment and providing a link, following that can be several rounds of testing – bug fixing – testing (I have paraphrased this process for illustration purposes only) but with Apps it’s a bit harder as we have to be able to distribute the App to the devices that our developers, clients and testers are using and in the case of our clients they are not in our office.

TestFlight is brilliant for this; from a single entry point you can distribute to predefined groups, set up new users within a group and create custom distribution lists to send new builds over the ‘air’. In simple terms, we can release a new iteration of an App and it gets distributed to the group who are alerted to the new version. Users can send feedback directly through the app (with in-app questions using their new SDK) or by replying directly to TestFlight automated emails, and this feedback is distributed to the developers assigned.

Its early days and we have only scratched the surface of what TestFlight can do but I thought I’d give my first impressions as it might be of use to others.

This post was written by Kirsten on September 22, 2011 at 8:57 pm

Log on with LinkedIn

We have just completed the re-launch of ModernSelling.com which is a re-work of the design and functionality we originally built in 2006.

The old site was a passive audience experience: traditional article driven content read by the user but the aim of the new site is to encourage discussion and user contribution; discussions are started by a number of key individuals who open out their comments for other users to contribute. User’s contributions are given equal prominence to the article itself and form part of the overall site content.

One of the key features we have implemented enables users to register and subsequently log in with their LinkedIn account: instead of the traditional registration form and then double opt-in email verification process the registration is simply a matter of the user allowing ModernSelling.com permission to access their LinkedIn account, entering in their LinkedIn email and password and Bob’s your uncle we can then authenticate against the LinkedIn user account in the backend (using the OAuth protocol and the LinkedIn API). The beauty of this is four fold:

1. Users with a LinkedIn account don’t have to worry about managing subscriptions / profiles on 2 different sites
2. The registration process is vastly quicker and easier for those choosing to use it
3. We can maintain up-to-date profile information about a user as it is passed from LinkedIn each time a user logs in and don’t have to rely on users updating their profile through a traditional ‘My Account’ section
4. Although we are not currently using all the profile information LinkedIn provides and have only scratched the surface of the many different API’s available we can choose to leverage them at any point in the future without going back to our user base and asking them to fill in more information; we are essentially piggybacking the LinkedIn system

Warning: you might not get what you want

For those wishing to utilise the LinkedIn API for their own web applications / subscriptions sites / profile building there is one word of warning: unlike the Facebook method (‘The Graph API’, part of which was previously known as ‘Facebook Connect’) the LinkedIn profile doesn’t provide you with a user’s email address. This appears to be a strategic business decision by LinkedIn but poses some hurdles for those with existing databases which use the email address as a unique identifier: for obvious reasons, if the email address is the unique identifier then it is a prerequisite to have it in order to set up a user account. Furthermore, even if your database does not require an email address, your businesses sole form of direct communication with one of your users / profiles is likely to be via email – so not much use if you don’t have it!

Personally I think this is a major ‘faux pas’. Some might say it is a security issue but actually, if an individual is already giving a third party web application permission to access their user profile it is just another (important) part of personal data they are happy for the third party to use to enhance their experience.

Our solution to this issue was to create a ‘one off’ step on the first attempt to use our log on with LinkedIn process: this ‘intermediary’ page requests the email address  prior to us creating a user account for them in our database. Secondly, for those who already have a ModernSelling.com account but decided to start using the log in with LinkedIn feature we asked them to link their existing ModerSelling.com account with their LinkedIn account by providing their existing ModernSelling login details (email address and password). Both of these actions were very easy and not required on subsequent use of our log on with LinkedIn process.

Below is a screen shot of this ‘intermediary’ page which hopefully should explain it:

Post Script: I’m subscribed to the LinkedIn Developers network and they have released a few useful development libraries and plugins to make life a bit easier. You can find some useful plugins here and a useful OAuth JScript library has been released here (meaning front-end developers can now leverage the LinkedIn API. Note: as it stands – on 20/04/2011 –  there are some bugs in this library which LinkedIn are working to rectify)

This post was written by Kirsten on March 28, 2011 at 6:15 pm

Sneak Preview: Felton Fleet Web Design

Patrick has been working on our most recent web design project and we’ve now had sign off on the new homepage so though we would share a sneak preview of the work. The project is for Felton Fleet, a mixed independent school near Cobham, Surrey. It is being designed in conjunction with a mobile friendly version utilising CSS3 Media Queries which Patrick also blogged in Going Mobile with CSS3 Media Queries.

Click the image above to see the preview.

This post was written by Kirsten on December 21, 2010 at 11:41 am

SMART Table ReacTickles Table Touch

Last month we announced the completion of an application developed for the SMART Table aimed at encouraging computer use for children with autistic spectrum differences and learning disabilities.

Since then it has been brought to my attention that a rather good review of the product has been published which resulted in a score of 23 out of 25. The review also contains some quite nice videos of the product in action so I thought it worthwhile posting them (below).

This post was written by Kirsten on August 9, 2010 at 1:49 pm

Utilising the TweetMeme API

We’ve been integrating some social media into one of the sites we work on ModernSelling and specifically working with the TweetMeme API which allows users to view the number of Tweets an article / page has received and retweet said article. From the horse’s mouth:

The TweetMeme retweet button is for website and blog publishers who want to encourage their audience to tweet their content on Twitter. The button shows a live count of the number of times your webpage or blog post has been tweeted.

There are a few points worth mentioning about this integration because it is not always as straightforward as you might think and perhaps some of this information will be of use.

Firstly, TweetMeme is quite strict so for anti-spam purposes uses a combination of the Tweet which we send to the API and a custom meta tag containing a match of the tweet:

<meta name="tweetmeme-title" content="The Message of the tweet " />

Additionally, the content / message of the tweet has to be a direct subset of the HTML title tag. For instance, for the example above, “The Message of the tweet” needs to be included in <title>. It doesn’t have to be the only thing in the title tag but it does have to be present.

So if like us you are generating these things on the fly (the site in question is driven by a content management system we built) you may have to make adjustments to your system to accommodate the TweetMeme functionality and also discuss compromises with your client; for instance, in our case, the title tag now includes the original title (which was specifically written for SEO purposes) with the article headline (which we want to be the body of the tweet) appended to the end. There is no way around this; the tweet message cannot contain something that is not contained in the HTML title tag so you need to live with it or not use the TweetMeme API.

Secondly, TweetMeme uses a cache which means that if someone already tweeted your page/s before you implemented the TweetMeme functionality the tweet will already be cached against the url. In these instances, if you wish a retweet to use the a new message as opposed to the old, incorrect message (your old title tag if it was incorrect) you need to clear the TweetMeme cache on a page-by-page basis or, rather than doing a manual update for a large number of URL’s you can automate the process and use the TweetMeme ping api (http://api.tweetmeme.com/ping?url=). Just append the URL that you want to update at the end of it and loop through the list of pages on your site.

Finally, part of the site we implemented this feature on is subscription only so bare in mind that any password protected url is not going to allow the TweetMeme API to make a call back to the page to verify it – TweetMeme will not work in these circumstances.

Happy TweetMeme’ing!

This post was written by Kirsten on June 22, 2010 at 4:42 pm

Flixel 2.0 – Flash game development

We have finished an enjoyable project for SPAR International, which involved creating an athletics game based around the button bashing classic, Daley Thomson’s Decathlon. When creating the graphics and style for this game we wanted to utilise the nostalgic bitmap effect which you see quite often in Flash games and in the graphic style of Pixel Art. From a development perspective this was very convenient because I have been looking for an excuse to try the Actionscript 3 game framework, Flixel, which I have seen lorded around the Internet as perfect for this purpose.

It has it’s own global render cycle which simplifies the process of adding bitmap graphics to the stage and creates a predictable fps independent game loop. Forum posts on the Flixel site state that this rendering process is more efficient than Flash player alone due to the fact that is purely geared toward low resolution bitmapped graphics. There where many elements which increased the speed of development such as the inclusion of the FlxObjects which are already set-up with simple motion facilities such as acceleration and velocity on both x and y axis which allow for the simulation of horizontal character movement and also vertical forces (i.e. gravity).

There are many other noteworthy features of the Flixel framework such as Sprites for Animation and the global/static FlxG control class which have been very well designed to make game development in Flash easier. I will, however, not go into detail about these because a concise post about Flixel from the Inside RIA blog has covered these. For those (developers mainly, I suspect) interested in understanding the affordances of using this framework over creating a game from scratch, reading this and also exploring the host of games and tutorials on the Flixel site will be worthwhile. Canabalt is a particular favourite game due to the intense screen shaking and accompanying music.

The game we created is called Beat Barni and is online now. Due to time constraints we created a pentathlon (5 events) rather than a decathlon, so feel free to challenge Barni to any of the following events; 100m, 400m Hurdles, Javelin, Pole-vault and Long Jump.

This post was written by Gareth on June 2, 2010 at 10:00 am

Action Message Format (AMF)

We have recently built a Flash Game – Traitors – for the Top Gear website:

The game, sponsored by Nissan, requires the user to speed through 3 levels controlling their speed by repeatedly pressing X-Y buttons as fast as they can and using their booster. For the purpose of data submission and receiving data while interacting with the webserver we decided to use AMFPHP which is open-source implementation of the Action Message Format (AMF) and allows binary serialisation of Action Script (AS2 and AS3) native types and objects to be sent directly to server side services. Phew…

The crux of this is the ease of implementing data transfers to and from the webserver (less code on both client application and on the webserver) and the efficiency of the resultant transfer (the data being transferred is binary format which is also compressed further in AMF3 so the amount of data being transferred is smaller). This is brilliant for rapid development (which we do a lot of) and performance of the finished article.

For instance, on the webserver you don’t have to loop through a database recordset, compose some XML and return that XML to Flash which would then load and parse the XML: you can essentially return the recordset directly from php to Flash and the query is automatically converted to the corresponding ActionScript type. There are several processes being skipped and the data being transferred is far smaller (being compressed binary as opposed to XML).

This post was written by Kirsten on April 13, 2010 at 1:55 pm

CMS Vs Framework

About a year ago we decided to add to our development offerings and move into PHP based web development. Up until then we had predominantly used windows based server side technology (classic asp and then asp.net, c# etc) mainly because a good number of our customers were using Windows hosting (IIS) and required us to follow suit. We’ve been happy to do this and still have many clients running web sites and applications utilising the .net framework. However, it came to be for several key reasons that adding PHP to our key skills made sense for our business and for our clients. Here’s just a few:

• Recruitment: the majority of web design / new media courses include server side modules and universities tend to use PHP; therefore it’s easier to recruit and employ a graduate who has already received some formal training and doesn’t require re-skilling
• Open standard: with plenty of support and knowledge available plus with cost benefits which we can pass onto our customers
• Hosting: cost effective web and database hosting
• Rapid development: with the multitude of support and understanding out there we can quickly build upon others peoples ideas and knowledge

I’d be interested in other’s opinions / additions to this list. I am sure there are many.

Once we’d made the decision, we mulled over several options. One was to source a pre-made content management system and the latter a PHP framework. Having looked at various CMS we installed and trialed DRUPAL (http://drupal.org/). Our initial thoughts were that we could release CMS driven sites pretty quickly and easily and concentrate on the UI design and front end design aspects. However, it became clear that for a business so used to providing bespoke builds with initial business analysis and design that we were not comfortable with having too much of the development control taken out of our hands – and that is how it seemed with DRUPAL. Additionally, DRUPAL is all things to all men in the CMS world but our belief is that our customers would prefer a little less complexity: we are used to building CMS from the ground up to enable our customers to perform the tasks they require easily and with minimal training. Our worry was that we would potentially be delivering something that performed the task but was not quite what our customers were envisaging. I’d also say that there was a potential danger in us losing part of what makes us good at what we do – sitting down with a customer and listening to what it is they want and then suggesting a solution with impartiality (ie: using the best technology for the job).

So our search moved on and we researched several PHP frameworks in the belief that we could find a happy medium between – from the ground up – development and using an off the shelf CMS, providing us the flexibility and freedom to offer fully bespoke, customised solutions but allowing us to build rapidly and effectively using pre-built modules that can be plugged into your own business entities. Based on several recommendations and a good few months trialing we have settled on using CodeIgniter (http://codeigniter.com/) and have begun to build our own CMS around the framework. Thus far I am happy to report it is just the job and we have had a great deal of success. Soon we will post some more specific information about the projects involved.

Edit: Please note that we are now well into our first iteration of our CMS and our framework of choice is Zend (version 1.11 so far). For reasons out of scope for this post Zend ticked far more boxes.

This post was written by Kirsten on February 18, 2009 at 6:00 pm

Creative Tools for e-assessment

One of our most recent projects has involved developing a set of creative tools in Flex / AS3 which are part of a larger academically funded project in which digital tools are used in Design and Technology to encourage creativity and teamwork. This is part of broader discourse in education as to the value of the pen and paper, exam structured methods of assessment which we are all familiar with.

The main point of contention between the traditionalists and those wishing to push the bar on technology in education is whether or not traditional exam assessment is indicative of a students abilities in a certain subject areas. Throughout modern education ICT is used to support and enhance learning yet when it comes to the all important exam assessments students are forced into sweaty school halls and, in isolation, encouraged to recall facts and figures under pressured circumstances. I think I may be showing my opinion in this matter however this is not an academic paper so never mind!!!

The project which we have developed these tools for enables students to be assessed for their Design and Technology course work through various different means; photographs, voice recordings, drawings, written work and mind-mapping. These tools are all controlled through a parent/client application which leads the students through predefined questions or requests which require them to use the creative tools to evidence parts of their work. e.g. Sketch your initial designs for new type of pill holder / Take a photo of your prototype / Mind-map some ideas for new features.

Whilst the work is being created it is being immediately stored in the individual students online portfolio. The evidence and work collected facilitates a more subjective approach to student assessment called ‘Comparitive Pairs’.

Although this system is currently being piloted for Design and Technology only, I hope that further down the line that this type of assessment could be used more widely and potentially offer an alternative to archaic pen and paper type assessment.

The creative tools we have developed at Ultraviolet can be viewed here. All the tools were created in Flex / AS3. As concepts they are in no way groundbreaking, in fact at some points during development it seemed a little fruitless re-inventing the wheel, but the functionality for each tool is prescriptive to the project and clients needs.

Feel free to play and let us know what you think. Or if you find any bugs!! *Gulp*

This post was written by Gareth on December 18, 2008 at 2:01 pm

Friday feeling (x52)

Everyone must have had that project? The one that keeps on trukin right through the project deadline, right through the next week and for whatever reason (and there are numerous legitimate ones) right through to a point when you don’t remember a time without it? I *think* we have just completed one of those projects and somehow, although there is relief that we may well get paid for our hard work, it’s left a hole where once it existed as wee bit of code!

Anyhow, the project is pretty decent, it’s built as an actionscript project using Flex to compile and an example of it is posted online here.

This post was written by Kirsten on December 5, 2008 at 7:18 pm