Recently we at Metia Labs, have been introducing ourselves to HTML5 and the current crop of both browser support and levels of that support.  We’d also been looking at doing something  useful with data feeds and came up with an excellent contender of an idea for a proof-of-concept project.

I like my smart-phone, in my case an iPhone, in other’s cases here at work, Android, additionally I catch the train into central London for work everyday. How cool would it be to have access to National Rail’s departure boards on my phone? Not a full journey planner but something nice and simple, I want to see the boards for the station I’m at or about to be at. Then we struck a very important point: the iPhone’s implementation of the current HTML5 standard includes native geolocation. Meaning in short that via an HTML app I can reach out to the phone’s geolocation service.  How well would that work we wondered?

In essence then not only could I get a particular station’s departure board but also get the departure boards for the station I’m at right now and the stations nearby effectively doing a proximity search and making validated filtering assumptions thereby making the information instantly more useful… if it was correct

Well a week’s worth of work and a couple of weeks of iteration and testing and we have a beta launch candidate! We’ve named the beta TrainHound and it does a fairly good job on an iPhone (OS 2.~ and later) or Android 2.0+ as well as Chrome on the desktop.

So without further ado here it is!

www.metia.com/labs/trainhound

Currently it has a basic feature set but it’s a set that we’re really happy with. If you’ve given the site access to your geolocation it will go off and identify the top 10 closest stations to you in order of nearest to furtherest . You can also do a search for any UK station and the site also keeps track of your last 10 viewed stations. When you select a station it will show you the departures for that station in a scrollable list. You can swap the list view between departures from the station and arrivals to the station as well as viewing a simpler information view by toggling the service operator name with the ‘less info’ button. Then you can click any of the rows in the table to view the stations called at and time estimates with navigation to get you back to previous pages.

Additionally from the main stations select screen you can refresh your geolocation and from the station screen you can refresh the departure board.

I can say that this webapp has already come in handy for me several times now as well as others on the team. Specifically when down in Brighton recently and heading back to the station up the hill checked to see if we’d make the service in time. We wouldn’t have made the train in the 6 minutes we had to spare so a quick pint at the pub we happened to be checking outside of was in order; much better than waiting at the station for 25 minutes!

Also when individual stations’ board display systems go down the data feed is still updated and so having your own access really helps.

Lastly the iPhone specific Meta tagging Apple’s pushed out is quite cool, allows us to use a custom splash screen and also remove the browser chrome when you run the page as a link from your home screen. HINT: I didn’t actually know about creating shortcuts to sites as a home screen link which you do via the + button on the bottom of the safari toolbar. A few iPhone features I’ve found out about lately that seemingly aren’t common knowledge…

All in all I’m really impressed not only with HTML5’s scope in general but also Apple’s support of HTML5 on the iPhone which after reviewing test scores through www.html5test.com apparently outscores the most recent release of Safari for Windows.

So a very positive outcome for future web app possibility; go, use it and let us know what you think and how you use it.

/D

Given that this is my first trip to the US and I’ve started in Seattle, I keep getting told that the comparison between the two cities will be vast. And then people laugh

I’m already looking forward to the Windows Phone 7 announcements which have my brain on overload already. Silverlight 4 and as much designer/dev and best practice talks as I can wrap my mind around will be top of the list. Dying to put some faces to names on the Expressions team and the Silverlight community bloggers as well.

I’ll be there with quite a few other people from our company including Gavin Wignall from Silverlightbuzz.com which will be great.

Looking forward to meeting everyone!

We (Metia in partnership with Ad:Dynamo and Microsoft Advertising) have created the world’s first ad-served expandable Silverlight ad to showcase Mass Effect 2 for EA.  Showing on the Tech and Gadgets page of MSN UK from today it will be up for at least three weeks and will be on the MSN UK homepage tomorrow (Jan 30).

Still from Mass Effect 2 Silverlight expandable ad

So an ad’s an ad right? Fighting, hustling, cajoling for your sacred click traffic. Constantly getting in your face or just outright ignored?

Well here’s my ever optimistic opinion that what we’ve done showcases how smarter, more interesting and simply more content rich advertising could work. Provided advertisers are happy to expand their concept of what constitutes sane amounts of servable content

Effectively what the ad provides is a microsite’s-worth of high quality content right in the ad that gives you more than that scant sniff of content you’ve come to expect on this side of your valued click. It treats you with an experience that gives you reason to click through. And it’s that that I think provides the value. Warm leads, not cold, half interested leads.

So fun techy stuff: exactly what does it serve up?

• 4x Smooth Streamed HD quality videos up to 3 minutes in length
  • Mass Effect 2 cinematic trailer
  • Adept Class video
  • Engineer Class video
  • Mass Effect gameplay promotional trailer
• 1x Smooth Streamed Deep Zoom image with 3 layers at a 1:1 pixel size equivalent of 5600×3929
• 1x Smooth Streamed Ambient Audio track of around 3 minutes in length
• 18 zipped JPG images between 1280×720 and 1920×1200
  • Mass Effect in-game screenshots and wallpapers
• All media can be fullscreened, videos are shown with branded and linked letterboxing

Expanded view

DeepZoom to man-stubble in full effect

Video player open

How does this pass as an ad? It breaks down into the usual polite expandable ad shells like this:

• 40kb initial ad .xap download (the footprint content preloader)
• 600kb secondary ad content .xap download (the ad UI, supporting dlls and code)
• All media content is streamed in or user initiated progressive download in the case of the screenshot / wallpaper imagery

Even after looking at it load 300 times a day for the last two weeks I’m still surprised at just how quickly it loads.

Our full team at Metia consisted of (alphabetically):

• Colin / Sam – Project Manager
• Damon – Silverlight Developer (Damon’s post here)
• Dean (me) – Interactive Lead
• Mark – Silverlight Tech Lead
• Sarah – Writer
• Stephen – Visual Designer
• Stuart – Interactive Designer
• Tina – Account Director
• Toni – QA

With very welcome help from James, Rachel, Mark, Richard, Ciara, Gavin and Karen.

At Ad:Dynamo Clive did some serious heavy lifting with the help of  his team.

We’ve learned a lot in the relatively short time we’ve had with it. I’m planning a short series of posts to follow up that will look at some of the really interesting aspects we butted up against. Including Smooth Streaming Deep Zoom (really not much out there about it), our experience with Deep Zoom sub-image manipulation and CPU and frame rate optimisation.

Yep, so quite a bit in there.  How expensive is that bandwidth going to be? Well that’s entirely dependant on how much users interact with it and the more they interact with it the warmer a lead they become, in theory anyway. We’ll see just how the numerous daily users to MSN throw themselves at it. I’m keen to see exactly what the outcomes are, it is an experiment after all, but I’m confident it will prove itself.

Would love to hear everyone’s comments or experiences with it, good or bad. If you don’t get to see it I’ll be posting a link to a permanent version shortly.

Updates:

Gavin Wignall’s post about it over at Silverlightbuzz

Steve Ellis’s post at TheNewMarketing

For some time now I’ve been following Johhny Chung Lee’s UI investigations into the potential of the wiimote among other things. The most accessible of these investgations for me was the wiimote whiteboard concept. If you’ve not read about it the premise is fairly simple. A wiimote is one of the coolest pieces of integrated tech on the market today. With three accelerometers, Bluetooth and an infra red (IR) camera that can track up to four points simultaneously it’s a steal of a device for £30, even without the Wii to go with it. With this cool device then, you can Bluetooth connect it to a pc and have access to the IR and accelerometer output. In the case of the wiimote whiteboard (available on Johnny’s site link above) the idea is to inverse what the wiimote’s normal use is and instead of waggling it in front of a stationary IR bar you use it as a stationary camera to track the movement of an IR source. In our case that IR source is a custom made pen that has a push button IR LED which the camera tracks and can emulate through the software as a mouse.

So knowing the concept I’ve been keen to try for some time but only recently have I acquired an IR pen and brought together all the constituent parts. After eBaying some IR pens, I borrowed the time of our IT department and our resident Wii and projector. A very short time later we had the wiimote whiteboard software set up with one wiimote tracked on the projection of the test laptop on a nicely blank wall. IR pen at the ready we went through the calibration process and fired up my colleague Gavin’s blog to try out his Silverlight painting test app.

The whole experience is really, really nice to use

It’s mostly pixel accurate if you’ve calibrated it well and for chunkier ui apps and drawing based tasks it is infinitely more usable than a mouse in a large-scale wall-presentation style environment.

There are a couple of small issues that the software can also help you get around. The wiimotebeing a camera in this instance means that the camera is looking at the surface you’re drawing. At some point you’re going to get in front of it meaning that it will stop drawing. Fortunately you can hook up more than one wiimote for redundancy which means if you get in the way of one wiimote the other is still tracking. We hooked up three and it makes a massive difference. I have to say though that the enhancement you get from connecting two is much bigger than it is for adding a third.

Our other issue was that as we were using a projector we were also walking in front of the display, so we want to try a rear projection set up which will eliminate this completely. Along the same line we could also use a rear projection setup for the wiimote though the surface we’d project on would need to allow th IR to show through.

All in all it works great and is really fast to set up. I bought a second hand wiimote on the weekend and hooked it up to my tv at home which took all of 10 minutes. If you try this out yourself please test it with Kloonigames’ Crayon Physics Deluxe demo, it’s a perfect example of what this tech does well and you won’t be disappointed.

After all the fun and excitement the last item we’re now interested in is as the wiimote can track up to four points at once it is possible for it to do multi touch as well. There is source code available and although it needs a bit more work to be a non developer project, believe me when I say it’s at the top of my list to get a multitouch wall surface created!

Happy wiimote whiteboarding!

Usually there would be a demonstration of an industry created silverlight app but as the meetup coincided with the official launch of Expressions 3 we were treated to a cut down presentation from Ian Ellison-Taylor. He’d presented the See the light launch that day and it was great to have a personalised presentation we could ask questions through.

I was shocked and very pleased to find out that our development head Andrew Martin was the first partner presenter at the launch! Ian had great things to say about the work Andrew presented of which one example was the SEAT magazine we’d done in Silverlight; very cool as it was my design!  <shameless plug>www.seat.co.uk/exeo/pagelife</shamelessplug>. The whole presentation was videoed and is available to view ; worth a look.

So although I’d been using Blend 3 for some time it was good to see how the whole suite was coming together. I’d not previously given Expression Web the time of day but its multi browser HTML comparison tool looks amazing; nearly inspires me to take a peak.

After the break I got a chance to catch up with Ian in person and talk about my Silverlight design experience. My key point was expounding my gratitude for the addition to Blend 3 of the marquee-select keyframe tool – a long time in coming when you have to select them all by hand

From a designer’s point of view you can web search what’s available and all the juicy examples but there are a few hurdles before you get your crayon-crusted mitts on them.

Things you should have baked earlier:

• Visual Studio with service pack 1
• Silverlight 3 tools for visual studio (including SL3 sdk, SL3 developer plugin)
• Blend 3 release candidate
• WPF pixel shader library
• A new Silverlight 3 application project for testing

My way to victory was starting with the WPF pixel shader effects currently published on codeplex that use a workaround to get them running in SL3.

Download and extract the WPF shader library, open up the solution and have a look at the project structure, taking note of the SLShaderEffectLibrary folder… we’re stealing that one very shortly.

Then open up Visual Studio (resist the urge to go visual in Blend just yet) and create a new Silverlight application.

Next right click on the solution and click ‘Add > Existing Project…’ and then hunt for the SLShaderEffectsLibrary folder we found earlier from inside the wpf effects toolkit.

With that in place we need to add a reference from our base project so that it knows about all those shiny effects. Right click on the references folder in the base project and in the popup window choose the projects tab.

Then choose the imported project that appears in the list.

Finally, in your mainpage.xaml file we need to add an import statement to the added project; using ShaderEffectLibrary will do it.

Now that our base project knows of the magic that will shortly be, probably gratuitously, gracing your screen. With no delay, open blend with shaky sweaty fingers and slap down something interesting like an image onto mainpage.xaml. Then click new effect and in the popup window notice that instead of the two effects available as standard the project you added now appears in the list …

…and opening the list reveals the full list of effects to play with!

As a caveat I have noticed that some of the effects simply don’t work, though happily these are in the minority.

Also take note that while some effects just like the standard blur and dropshadow have exposed properties for you to play with variations of each effect, others are as is and don’t expose any properties at all.

So!
Now you’ve got some playing to do here’s some points to muse on:

• any exposed effect property can be animated
• only one effect instance can be attached per xaml object (canvas, image, textblock for eg)…
• BUT you can stack effects by adding effects to a parent container
• keep in mind that these effects are doing some fairly serious calculations, if you can get away with one instance of an effect on a parent container rather than 10 instances of the effect on each object in that container, that’s probably the way you want to go

With this new effect playground it provides a framework for adding new effects you find (or make) into this library with only minor wrangling. I’ll cover this approach in a future post, so for now happy shading and I hope this provides some image effect joy!

Having just put my folded paper blog boat in the Sea of Internets, I hope to guide it with the map of design through the straights of interactivity and past the reef of code onwards to the shore of useful.

I’ve been an interactive designer of sorts for many years now, working with the early years of Director and Authorware then with that strong bastion of the HTML web, onto Flash and now Silverlight.

With the good ship RocketpandaBlog I’ll be covering mostly Silverlight with a little Flash and then some dabbling behind the bikeshed with other alluring technologies.

So get out the easychair and put it on the deck, hopefully it will be at the very least an interesting ride.