Modern Experience Development

Windows 8 App Excellence Lab

A few weeks ago I attended an App Excellence Lab which I had previously booked at the WP7 – W8 conference in London a few months ago. This meant a trip to Microsoft’s UK headquarters, which was an experience in and of itself. The headquarters is located in the Thames Valley Park in Reading, a plot formally owned entirely by Oracle. When Oracle realized they had no use for such a large area of land they sold it off to a holding company who allowed other tech companies to move in including Microsoft, Websense and Computacenter – creating England’s mini Silicon Valley.

My appointment was in building 3 of Microsoft’s campus and you can see the reception in the above photo. Once I had gone to the desk to get my security card – which allowed me to move around the building for that day – and had got hold of the wireless password (always important!) I proceeded to wait for my mentor to arrive and take me to the lab.

Once he did to I was shown to quite a nice office in the Microsoft Tech Center, where we worked though a tick sheet of requirements for the Windows 8 marketplace and compared them to what I had achieved with my application. I haven’t as of yet got any of the front end done, but my ideas all seemed to fit within Marketplace guidelines. To help me produce a good user experience, which is what the lab was all about, we had a look at some well designed applications together and worked on an improvement of the design I had worked on with Andrew Spooner at the WP7 – W8 conference.

After this we had a bit of a mini Question and Answer session in which I could ask any questions I had about Windows 8, the Windows 8 ecosystem and developing for both, I learnt a lot and would recommend an AEL to any aspiring Windows 8 Developer for this alone!

Once all my questions had been answered we discussed the next steps, which include a virtual App Excellence Lab once my application’s front end is finished and then hopefully I will recieve a token which will allow me early access to the Windows 8 store, well before general availability on the 26th of October.

As an interesting side note, the day I went for my Lab was the day all Microsoft Employees got an email telling them to stop the use of the word “Metro” in regards to the Windows 8 Design language. The news didn’t come out until the next day, but it seems there has been confusion ever since about what Windows RT apps are going to be called for marketing purposes. Personally I think “Windows 8 Experience Apps” is too long, and “Windows 8 Apps” will make no sense assuming they will be compatible with Windows 9. Similarly “Windows RT” isn’t exactly a marketing friendly term. The term I like to most is “Modern Experience App” or “Modern App”, shortened to “MX”, which is what Microsoft have called their own Windows RT app for OneNote. 🙂


Conferences Mobile Application Development Programming

Windows Phone 7 to Windows 8 Day

A few weeks ago a link was posted on the Microsoft UK Student Developer Group detailing a Windows Phone 7 – Windows 8 weekend in London. Originally the location wasn’t released, presumably whilst Microsoft worked out how many people would come and how much room they needed, but eventually we were told it would be at the Commonwealth Club at Embankment in London. This is the nice building you can see in the above photo! The event itself was this weekend just passed, I couldn’t make the Sunday but thoroughly enjoyed Saturdays festivities.

It was a snazzy place, and a great place to stay for the day, but I’ll talk more about that later. The idea of the weekend was to show people how to port their application from Windows Phone 7 to Windows 8. It also showed off some of the new API’s, Runtimes and paradigms that make Windows 8 apps an improvement over those of the phone — though I’m sure there will be API and feature parity in Windows Phone 8.

When I got to the commonwealth club I was shown to the basement floor which had been taken over by Microsoft (the only company who would schedule a Phone related event in a basement with no phone signal ;))

One room was the “Work Zone” where developers could actively work on porting their applications from Windows Phone 7 – Windows 8 with the help of the Microsoft Evangelists.

The "Work Zone" -- Posh
The “Work Zone” — Posh

Another was the “Game Zone” where people could play Star Wars Kinect competitions to win prizes such as DAB radios. The final area was the “Talk Zone”, in which mini lectures were held with topics that had been voted in by the people at the event.

The C# 5 / .NET 4.5 / WinRT Asynchronous Framework

The most popularly requested talk, and therefore the one we got to see first was a talk on C#, .NET 4.5 and WinRT’s new asynchronous framework. Whereas at the moment to send a WebClient to fetch some data and then display it you’d have to do some code like the following:

//Actual simplified (i.e. no error reporting etc) code from the Hull CS Blogs app for Windows Phone 7

//Set up downloader somewhere
WebClient contributorsXMLDownloader = new WebClient();
            contributorsXMLDownloader.UseDefaultCredentials = true;
            contributorsXMLDownloader.DownloadStringAsync(new Uri("", UriKind.Absolute));
            contributorsXMLDownloader.DownloadStringCompleted += contributorsXMLDownloadComplete;

//In another totally seperate place
public void contributorsXMLDownloadComplete(object sender, DownloadStringCompletedEventArgs e)
            if (e.Error == null)
                XDocument xdoc = new XDocument();
                xdoc = XDocument.Parse(e.Result, LoadOptions.None);
                contributorsList.LoadFromXML(xdoc, FileOrigin.internet);
                contributorsListBox.ItemsSource = contributorsList;

As you can see, we set it up and then at a later time the method we specified in the event handler earlier is called once the download is complete. If you have loads of these async calls, or worst yet async calls within async calls it all gets very confusing, very very quickly.

In C# 5 two new keywords have been implemented to ease this situation. Async, which as you can guess marks a method call as being one that is executed asynchronously and await which says “don’t execute code under me until this async method is complete”.

For example we can convert our above code to a HTTPWebRequest using the new keywords. Look how simple it is!

public async void DownloadContributors()
       HttpClient http = new System.Net.Http.HttpClient();
       //Notice how we're awaiting this response right here rather than going to an event handler
       HttpResponseMessage response = await http.GetAsync("");
       //We'll only get here once the response has completed!
       string result = await response.Content.ReadAsStringAsync();
       //Business Logic that would normally be in the event handler
       XDocument xdoc = new XDocument();
       xdoc = XDocument.Parse(result, LoadOptions.None);
       contributorsList.LoadFromXML(xdoc, FileOrigin.internet);
       contributorsListBox.ItemsSource = contributorsList;

It’s nice because everything is where it should logically be. Together. Anyway, theres a hell of a lot more to talk about that I can fit in this already packed blopost, for example any method which calls another method which is marked as async has to be async itself, but you can find out all this at Channel 9.

The Windows 8 User Experience (UX)

Metro is all about making an experience for the user, from Live Tiles which mean you don’t have to even enter an application to get its content to the exact alignment and size of text of titles, sub-titles and paragraphs in apps. Andrew Spooner delivered a great talk on how to achieve the best user experience for users when porting your application from Windows Phone to Windows 8.

Although a lot of things can be directly ported in some ways — a panorama application on Windows Phone can be a panorama application on Windows 8 — some things can’t. Windows 8 has no concept of a Pivot page for example.

A Pivot Screen - There's no similar control in Windows 8
A Pivot Screen – There’s no similar control in Windows 8

Because pivot screens are often used to filter content, in my example the blog pivot shows only blog posts whilst the twitter pivot shows only tweets, there are a few ways to get round the limitation. You could use an application bar, a context menu or change the overall layout of the page.

Andrew also explained about the different modes a page can be in. Landscape, Portrait or pinned to the side, and how to deal with each. You can find out more about redesigning your Windows Phone 7 application to Windows 8 or designing a new application from scratch here.

Windows 8 Contracts

The second most popular talk topic was contracts. I’ve written about my love for the idea of contracts before, when I attended the Windows 8 camp at The University of Hull a few weeks back.

The idea behind a contract is that it is a way for an app to communicate with other applications in a standard way, even ones it doesn’t know about. For example a share contract says “I have these images that can be shared”. Any application that can accept images then says “I can accept these images and do something with them”. Notice how the sharing application doesn’t say what it wants done with the images and the receiving application doesn’t tell what it can do — this is on purpose to allow more interesting experiences.

If the user selects that your application it receives the images and can do anything with them, for example allow the user the edit them or share them straight to a social network. 🙂 Its all really cool stuff and allows experiences that no one would previous think of, the example given was a cooking application that shares pictures of food. An application that accepts pictures could then make it into an interactive Jigsaw. Why anyone would want to do this is unknown… by everyone. But you can see it allows us to do things we wouldn’t previously have thought of. I mean who, when writing a cooking application writes in a MakeJigsaw() method? No one 😛 But Windows 8 will allow this important functionality! 😉

Search isn’t the only type of contract. Previously to this event I hadn’t seen the Settings Contract but it looks quite cool. It allows your app to store its settings in a uniform way within the right hand pane which comes up when the settings charm is pressed. Some of this might not make sense now, but it will when you use Windows 8. Its nice because it allows applications to have application specific settings in the same place as universal ones such as “Allow this app access to location data” 🙂

Background Tasks on Windows 8

Background tasks on Windows 8 are very similar to background tasks on Windows Phone 7… apparently. I’ve never used them, but it’ll be a nice easy port for those people who have. There are all the sort of optimized background tasks you expect:

  • Media player (Audio AND Video, whereas on Windows Phone 7 it can only do audio)
  • VoIP
  • Background downloading
  • Update Tile and Notification

There’s also a generic background task which is unoptimized but allows you to do whatever you want. We were advised that this was a last resort and if we could use one of the more optimized background tasks to do whatever we wanted to achieve we should. Background tasks can be activated in several ways:

  • By a timer
  • When a certain condition is met (e.g. WiFi connection state changed)
  • By custom rules (e.g. Connection State changed && connection state is online)

In a background task you can write any code you want and are totally unlimited. The only thing to be aware of is that normal applications only get 1 second of background task CPU time ever 2 hours in order to retain battery life.

New in Windows 8 are notifications on the lock screen. 1 application, chosen by the user, can display its notifcations on the lock screen. Much like the calendar application does on Windows Phone 7. This chosen application is special because it gets 2 seconds of CPU time every 15 minutes.

Posh Food

One of the interesting but non-CS parts of the day was the dinner. It was kind of weird, but cute. Lots of small versions of popular dishes such as burgers, there are some pictures below.

The best kind of beer is free beer!
The best kind of beer is free beer!
We had a good choice of drinks too!
We had a good choice of drinks too!
The worlds smallest burger!
The worlds smallest burger!
Burger compared to a small tea candle
Burger compared to a small tea candle

Getting on the Windows 8 Marketplace for Day One of General Availability

One of the opportunities of the event was to discuss getting a “store token” which allows your application to be on the store the day Microsoft releases Windows 8, days — possibly weeks before your competitors. I spoke to Paul Lo about this and should find out if I’ve successfully received a token soon!

Getting help with Hull CS Blogs for Windows 8

The best and most helpful part of the day for me was having a 40 odd minute chat with Andrew Spooner about porting my applications design to Windows 8. We used a programming statement and some use cases to think about the experiance — this was a methodology I haven’t used before and I found it incredibly useful, I shall be using it from now on!

A programming statement is a paragraph or two explaining what your application or program is all about, for example my one was

The Hull CS Blogs application aims to deliver the content of all the bloggers at the University of Hull Computer Science department to users in an attractive way whilst allowing people to discover more about each contributor, via the use of twitter streams and a list of applications they have worked on. The application will also deliver a regularly updated list of featured applications developed by people within the universities computer science department.

Having this statement allows you to have something to refer back to when you’re thinking about features, for example. “I’m writing an application which allows people to discover about the contributors through the use of twitter, do I need to have a reteweet feature?” Well, the use of twitter in the application is to discover things, not necessarily interact with content, so this should be left out til a later release where there aren’t other more important features to be developed.  (By the way, this idea was actually one discussed about the Hull CS Blogs application)

A set of use cases are the “stories” of how you envisage people using your application. For example one of mine was

Russell has missed a guest lecture at university, he wants to read up about it and knows that his fellow computer scientists will most likely have blogged and tweeted about it. He opens the Hull CS blogs app and views the latest blogs and reads a couple. He then looks at the latest tweets for more minute by minute information, and then drills down into James’ contributor page because he cares about james’ opinion and wants to see more about what he has to say about the event both via twitter and his latest blog posts.

Reading this makes you realise what features are crucial to your app. So in this situation you would need.

  • Latest blog list
  • Feed of all tweets by all users
  • A page for each user

Without this user case I wouldn’t have thought about implementing an overall twitter feed in the main panorama rather than just a per user feed in each contributors page.

Anyway in the end we went from these initial designs, which are essentially a direct port of the Windows Phone app:

Main Panorama Initial Idea - Hull CS Blogs for Windows 8
Main Panorama Initial Idea – Hull CS Blogs for Windows 8
Contributor Page - Hull CS Blogs Windows 8
Contributor Page Initial Idea – Hull CS Blogs Windows 8

To this overall view of the application in a hierarchical order:

Andrew Spooners improvements On My Initial Ideas - Entire App - Hull CS Blogs
Andrew Spooners improvements On My Initial Ideas – Entire App – Hull CS Blogs

I will be using this design for the actual version of the Hull CS Blogs app for Windows 8, so check back here to hear more about that.

I apologise for the length of this post but it really was such a packed day! I hope this blog has made you look forward to developing for Windows 8 and porting your existing WP7 applications, because I certainly am! I’d like to thank Microsoft for treating me so well as they always do, with lots of support, free drinks and some amazing free food. Truely an experience worth remembering!



Reasons to be (h)appy

Monday afternoon I made the long, though surprisingly fast journey down to London from Hull. Not only was it fast, but it was actually enjoyable as it was a nice day and travelling with First Hull Trains means you don’t have to make any changes, which is usually a hassle, and you get free wi-fi the whole way without any need for a credit card. All good stuff.

The Humber Bridge from the Train
The Humber Bridge from the Train

I then stayed the night in Bayswater, near Paddington at a cosy 3 star hotel. I say cosy but frankly I was glad I was only spending the one night there. 😛

Tuesday morning I got up bright and early for the 10am start, unfortunately the Circle line, which I needed to get from bayswater to Kings Cross St. Pancreas as part of my journey to the conference, was suspended. This caused severe delays, including to me and meant I was a tad late, fortunately I didn’t miss anything though and made it just on time.

The conference itself was held at LSO St. Lukes near Old Street tube station. What I didn’t realise was

1) LSO stands for London Symphony Orchestra and

2) I was looking for a church rather than a conference or office building. Yes, that’s right a tech conference about state of the art technology was held in an old church. 😛

The venue was beautiful inside and out, the outside was traditional and the inside was a stark contrast being ultra modern.

The Old Church Exterior of LSO St. Lukes
The Old Church Exterior of LSO St. Lukes
The Modern Insides of LSO St. Lukes
The Modern Insides of LSO St. Lukes

Upon entry I checked in and was given a lanyard with my name on, to allow me to freely enter and exit the building through the day. I thought it was quite nicely designed — almost metro style with the extra-light fonts and coloured squares, which being a Windows Phone Developer I thought was pretty cool.

Reasons to be Appy Lanyard
Reasons to be Appy Lanyard

Peter Gregson – Playing the Cello Game

As soon as I’d done checking in Peter Gregson was ready to take the stage with his interesting session on using technology in Music. In response to  how the performer plays — no matter what instrument — his application goPlay can provide changes which would normally be achieved using a set of pedals.

Being a non-musician I wasn’t 100% sure of the advantages of the application, I must admit. However, I did enjoy watching peter play the cello, which was incredibly beautiful and an instrument I haven’t seen played before.

Christian Heilmann – Moving your App-Mind to the Web

After a 15 minute break to get drinks and a sandwich after Peters session Christian provided what was one of my favourite sessions of the day. Christian is the Principal Developer Evangelist of the Mozilla Developer Network, and spoke about how he felt that using HTML5  and the open web we could replace the need for mobile apps, such as those on Google Play and the iTunes App Store with interactive mobile web apps that work on all devices.

Christian made the point that the HTML5 specification has alternatives for a lot of native APIs which native applications enjoy using and often say web apps don’t have, such as geolocation and access to devices cameras, however a lot of these have not been implemented fully in mobile browsers — possibly to protect the revenue the application marketplace owners make. One particularly weird case is that Apple have full OpenGL support in their Safari Mobile Browser however you can only use it if you’re accessing the web page from an in-app web browser control. Is this an attempt by Apple to stop interactive 3D applications and games on the open web and restrict games on the iOS platform to their Marketplace? Who knows.

The session was delivered in a humorous way, and I agreed with a lot of what Christian said. The idea of write once, run everywhere on all mobile platforms is a great one, but one I feel wont happen for a long time. Too many companies have too much invested in their app stores, both money and resources.

One particular quote that has stayed in my mind is “A few years ago Furbies were awesome. They were cool new technology and delighted kids all over. Now they are forgotten and just look stupid and creepy. The apps of today will have the same fate – as they are not build to change but to sell. The best performing apps are targeted at kids and have an attention span half-life of a few months.” It puts an interesting spin on what is a good app, one I hadn’t thought of before.

You can read more about Christian and view the slides he showed at Reasons to be Appy on his website.

Andrew Spooner – We, Human

After another break Andrew Spooner from Microsoft took the stage to talk about how we should be creating applications which provide a great user experience to the people using them — and how the idea of making a simple, effective user experience for people… not just computer scientists lead to the creation of the Metro User Interface Design Language.

One thing I must say is that Andrews slides were the most beautiful and well made I’ve ever seen, I was genuinely impressed by a PowerPoint presentation! The presentation itself followed metro design rules and featured the same colours and icons as the Windows Phone 7 OS and the upcoming Windows 8 Desktop OS.

Andrew made the point that the user experiance, not the exact computation going on was what was important to the user, which reminded me of my own blog post “UX, not Specs”

Remy Sharp – Mobile Debugging

After an hours lunch it was Remy’s turn to take the stage and talk about different methods of debugging mobile web applications over all the operating systems and browsers available to users, which until recently has involved the time consuming task of downloading  every browser on every operating system and checking for faults.

As I mentioned in my previous post, I was looking forward to seeing Remys session as he was one of the people whos websites taught me html and web development and got me into programming, so it was really great to see him talk about something he is obviously passionate about.

I’ve been thinking about improving the mobile experience on Worldwide Lighthouses and having to debug on multiple platforms — each with multiple browsers and OS versions — could have been a pain. Remy’s methods don’t allow for desktop type debugging, that’s the holy grail, but it brings us a step closer.

Ultimately, Remy concluded, we can only have desktop level debugging on Mobile OS’s with the help of the browser vendors and we should pressure them into improving their tools!

You can read more about Remy’s methods for mobile debugging from the man himself here.

Tim Ahrens – New Font Technologies for New Media

I like developing for Windows Phone, one of the reasons I like this is because I like the style of the applications, and one of the reasons I like the style of the applications is the use of fonts like Segoe WP. I like fonts, they can make or break a design as any graphic design student would tell you, but to be honest I know nothing about fonts — or I didn’t before Tim Ahrens session, which was absolutely fascinating.

Tim spoke about everything from how fonts actually work in the browser — detailing the differences between the new woff format, the older true type format and the internet explorer only eot format — to the differences in rendering on screen using black and white, greyscale, cleartype and Microsoft’s new DirectWrite.

I honestly never realised how much effort goes into designing and developing a font for use on screen or in print media, I’m astounded. Fonts are one of those things I’d always just taken for granted but they’re weeks, if not months, worth of work each. This session taught me a lot.

You can see some of Tim’s font design work on, and see TypeKit, the font to browser solution which he consults for here.

James Alliban & Keiichi Matsuda – Cell – Revealing the Digital Aura

James and Keiichi are both artists rather than programmers, but they made an awesome interactive art installation using Microsoft’s Kinect called Cell, you can view a video of it on YouTube.

The duo spoke alot about working in a team and collaborating on such a big project, and some of the technical aspects of the installation itself, but to me the most interesting part of their talk was about what they call the “Digital Aura”. A digital aura is a persons online presence — both the obvious stuff like their Twitter and Facebook accounts and the less obvious stuff like comments they’ve left on blogs or reviews they’ve written or check ins on Foursquare.

A lot of the digital aura is good stuff, connections with potential employers, connections with friends, a place to make your point and say what you think, but there can be some bad stuff, which is where “identity curation” comes in. Identity curation is the process of deleting or hiding the negative things about you on the internet and highlighting the good.

Everyone does it to a greater or lesser extend, whether its untagging a photo of yourself on Facebook or using a web app like Delete My Tweets to remove all your previous messages on twitter, as I did recently (before making my twitter public for #r2bappy)

Mark Boulton – Where There’s Muck, There’s Brass

The beginning of Marks session was interesting, a first class quote from him which I tweeted was:

I take pictures of taps in public toilets. I’m THAT guy.

His point was that we need to think about things as real, and genuine and truthful. Those taps in McDonalds restaurants that pretend to be made of marble are “Liars” and that annoys mark. Having application on computer screens, which are digital, trying hard to be like real items is lying too, one example Mark picked out was the Leather Bound calendar application in OSX. Its fake, its digital, why is it trying to be real?

Mark called the idea of having things being “authentically digital” Digital Patina, and called the Metro Design Style out for being good at it.

Some of the things Mark spoke about were actually at odds with what I was taught at university this simester, which got me thinking. Application user interface design is like any other creative form, subjective. Whereas my lecturer thought that designing things to be like real like items — for example the recycle bin in windows — was a great idea because it allowed people to learn about computers faster, Mark thought the same idea treated the user as if they were thick and according to him

Thats not a good way to start designing a user interface – thinking your users are thick. Its offensive.

Seb Lee Delisle – PixelPhones

Pixel Phones
Pixel Phones

The last session I saw — due to having to leave one session early to catch my train — was a more light hearted one. Seb wants to set the world record for the biggest display made entirely of mobile phones, unfortunately he has been denied it for using audiences phones rather than a set laid down on a table, but what he can do is in my eyes more impressive.

Seb explains PixelPhones as a

crazy project where I turn each phone in the audience into pixels in a large display. It runs in your phone browser so you don’t need to install an app

Live in front of us PixelPhones connected to over 100 devices using two Apple Airport Extreme Basestations and allowed seb to make an animation using the audience and play a game of nyan catch, videoed at another conference here — its crazy stuff.

For an in-depth explination of how it all works you can check out Sebs website here.

For now that is all, I’d like to thank Phil Cross from the Microsoft UK Student Developer Group and Abhilaksh Lalwani, also from the group, for being good company all day!

Thats all for now,

Blogging Conferences Life

Reasons to be Appy – All Booked

Today I booked up my train ticket and hotel reservation for my first ever Tech conference, Reasons To Be Appy — which by the way is a name that I cannot decide if its brilliant…or not?

It started when Phil Cross, Academic Audience Manager at Microsoft, posted in the Microsoft UK Students Developer group asking if anyone wanted some free tickets, in return he asked

For you to blog about the event, post stuff on your facebook page, the UK Student page, we will link to your blog and for you use relevant #tags to tweet about it. Maybe a target of a couple of tweets per session? Basically so the organisers and MS can see you being active!

This seemed like a good deal and I emailed Phil asking if I could go, and he replied saying I could!

In particular I’m looking forward to a talk by Remy Sharp — who’s work helped me get into web development, especially through his role as curator on

Also of interest to me are talks by Christian Heilmann, who works at Mozilla and Andrew Spooner who works at Microsoft, most recently on “applications for Windows 8 and Windows Phone and explorations into Natural User Interfaces.” — all of which sounds interesting.

You can see a full list of sessions at the events website.

I shall keep this blog updated, possibly including a live blogging of some sessions, and as mentioned in the brief I will also be tweeting and posting on the Microsoft UK Students Facebook page.