There’s only two weeks left to enter Nokia’s alphalabs.cc competition, an experiment which merges technology with the arts. It’s all about encouraging artists and developers to share the experimental apps they’ve developed and created on Windows Phone. Here’s what I wrote in January if you missed it: Nokia launches Alphalabs to promote experimental apps.

The competition’s open for submissions until 13^th February 2012. Judged by representatives from Nokia and onedotzero, the winner will take away a grand prize sum of £5,000 while ten runners up will each win £500.

To enter the competition you just need to document your experiments and submit them via alphalabs.cc. Don’t worry, you don’t need to submit a fully fledged app, according to Keith Varty, Head of Ecosystem and Development for Nokia UK and Ireland, the judges are looking for “concepts that demonstrate a creative use of the platform, and not necessarily fully finished apps.”

Go to alphalabs.cc.to enter and get updates on the competition.

Yesterday the beta of the Amazon Web Services (AWS) SDK for Windows Phone was released, making the Amazon S3, SimpleDB, and SQS Cloud Services directly available to Windows Phone 7 Developers via C# APIs. The SDK is published as open source code under the Apache 2.0 license.

Why do this? Microsoft designed Windows Phone to be a Cloud-friendly phone across vendor boundaries. There are various Cloud platforms available on the market today and Windows Phone developers should be able to efficiently and rapidly get their Windows Phone applications connected and integrated with the Cloud services they want.

This release is aimed at gathering feedback from the developer community to deliver the right support in the SDK. The Windows Phone team is keen to improve it and deliver the right features based on the feedback.

Developers can download the SDK , along with the complete source code under the Apache license. A Getting Started guide can be found on the Windows Phone Interoperability Bridges site along with other resources.

Windows Phone Porting resources and API mapping:

• How to port your Android, iPhone or Qt apps over to the Windows Phone platform
• Leveraging your iPhone development expertise to build Windows Phone applications
• Leveraging your Android development expertise to build Windows Phone applications

by Simon May

Nothing separates the generations more than music. By the time a child is eight or nine, he has developed a passion for his own music that is even stronger than his passions for procrastination and weird clothes.

At least that’s what Bill Cosby of questionable jumper fame suggests, and I think it’s true. I love my music especially a bit of old school HipHop but finding new music that you like can be a tricky thing. Luckily you aren’t alone as for quite some time there has been a service that enables you to discover music that matches your taste by understanding music that you like listening to and suggesting new stuff. Last.fm use a process known as scrobbling to look at your music collection and determine what else might suite your unique preferences.

Last.fm aren’t new, they’ve been around a while and there are applications available on all your favourite platforms including anything that starts with an “i”, Windows Phone, Xbox and Windows 7 and recently I popped along to Last.fm HQ in London. Whilst I was there I had questions for people on their API team and questions about how they determine the look and feel of Last.fm through UX design – obviously a challenge with an open API.

In the video you’ll learn about some of the ways that Last.fm thinks about UX design, about music discovery and finally about how they make their API available to you to work with.

Since I went in to film this with Last.fm they launched a HTML5 based experience that capitalizes on IE9s support to help you discover new music, Last.fm Discover. I spent yesterday using it to explore the world of contemporary jazz in true Bill Cosby style; although I must admit I was lacking a suitable jumper! The Discover experience starts by suggesting a musical tag – I choose “jazz”, then starts playing a track, you can select something you like then Last.fm will suggest “more like this” or “something different” depending upon your choices. One of the joys is that you can discover some new talent with tags like “under 2000 listens” which surface music that hasn’t been heard by many people. With so many music taste makers listening and sharing with Last.fm it’s hard to imagine just how ahead of the curve you can be.

If you’d like to start developing with the API you can get the API documentation here.

Simon May has over 10 years experience in financial institutions, the NHS and some other gigs and is an IT Pro Technical Evangelist at Microsoft. Simon is also the author of The Rough Guide to Windows 7 which helps everyone get to grips with Microsoft’s latest operating system and he blogs regularly at TheDigitalLifestyle.com about Windows Media Centre.

January is all about renewal – many of us use it as a chance to press the reset button, to stop procrastinating and get fit or even just get a new hair cut. It’s also the time when many companies try and work out what 2012 and beyond will bring – even though really we have no idea.

I watched a fascinating session from Thinking Digital 2011 by ex-poker player Caspar Berry whose premise is ‘It is only because tomorrow is uncertain that today has any meaning at all’. Although we try desperately to predict the future and make sense of the uncertainty the future brings, if we all knew exactly what was going to happen in the next 5 years that would be unbearably boring. As a species we need to be able to rise to the challenge of the unknown. Bearing that in mind, we’ve been predicting the future of design and now we turn our crystal ball of supposition to overall Tech Trends for 2012. You can always look back and scoff at the futility of our predictions in 5 years time!

What are we excited about this month? Well, we’re heading off to Web Heroines, a mini-conference mainly for women (they do allow blokes through the door as well) with the aim of encouraging more women into design and technology (in the UK women make up only 12% of the design/tech work force). There’s a bunch of great speakers including Julie Howell, Naomi Atkinson, Rachel Andrew, Sarah Mcvittie and Sarah Parmenter and we’ll be following some of the sessions on Ubelly.

We’re also going to be exploring the New Adventures in Web Design conference in Nottingham where 8 inspirational speakers will be uncovering the latest design concepts. Plus there’s a tonne of stuff around the conference itself like Erskine Bowling, 5-a-side-fr00tball and of course the chance to party. Can’t wait!

See you in February,

Sara Allison – @SaraAllison

Image courtesy of wordle.net

“Never make predictions. Especially about the future.” Yogi Berra’s advice applies to the tech sector more than most but that’s not going to stop us fearlessly speculating. We’ve covered design trends – now let’s take a look at overall tech trends.

“The continued trends toward consumerisation and cloud computing highlight the movement of certain former IT responsibilities into the hands of others,” said Daryl Plummer, managing vice president and Gartner fellow, highlight the driving forces behind the behind the biggest changes: consumer technology and cloud computing.

Here are broad technology trends that may affect developers in the next twelve months:

Consumerisation. 95% of employees are already bringing their own smartphones and computers to work, according to a recent IDC study, but only 49% of businesses say they support it. Only one of these numbers is likely to change.

Cloud. Everyone’s writing about it and perhaps we’re now moving to a new stage in the hype cycle on cloud computing; from inflated expectations to the slope of enlightenment. Or perhaps the trough of disillusionment. However, it is technology that underpins most of the other predictions in this post, so something is definitely going on.

Appification. Whether it’s a web app, a phone app or a desktop app (Windows 8 is on its way), expect fast, light, responsive applications to supplant more traditional installed applications.

Gamification. The use of game-like rewards to motivate behaviour has profound consequences for UI design. Examples include such achievement badges, leader boards and progress bars.

Social media in business. In a recent survey, 78% of executives polled said having a social strategy was critical to future success. Embedding social media into applications and using interface conventions derived from market leaders like Facebook, will be important in 2012.

Elancing. 42% of SMEs plan to hire freelancers in the next year, according to Regus research and 27% of the UK workforce is now, effectively, ‘flexible workers’. Traditional methods of recruiting and employment will still continue of course, but sites like vWorker and Elance.com will be viable alternatives for employers and contractors alike.

Hybrid organisations. Changes in technology and working patterns mean changes in management and organisation design. Microsoft’s work on The Hybrid Organisation offers an interesting peek into the how and why.

Everyday AI. Search engines will get smarter using your search history and massive databases to provide ever-better results. Voice recognition technology such as Apple’s Siri will allow devices to respond to spoken commands (“Open the pod bay doors, HAL!”) and Microsoft Kinect for the PC will bring gestural interfaces to desktops.

Videoconferencing comes of age. Yes, this is another traditional prediction that goes back decades. But with the widespread availability of broadband and web cams, it could finally take hold this year. Especially when companies are looking to cut back on travel.

What tech trends do you think will come of age in 2012? Drop us a comment and let us know.

by Peter Gasston

The Developer Preview of Internet Explorer 10 introduces support for CSS Animations, a fairly recent addition to CSS3 which allows you to animate the properties of an element, with some degree of complexity, and without the use of JavaScript.

In this article I’m going to race through the basics of CSS Animations, teaching you enough to get started in about five minutes worth of reading. If you’re already familiar with CSS Transitions then this should be really easy for you; CSS Animations are essentially just a series of transitions, and use much of the same terminology.

To view the examples in this article you’ll need to have a browser which supports them; that is IE10 Developer Preview, Chrome, Firefox, or Safari.

Before we get to any code, however, I’ll quickly introduce the concept of key frames. If you already know what these are – perhaps you know the fundamentals of animation, or you’re used to using Flash – you can skip this section.

Animation Key Frames

To put it simply, a key frame is a start or end point in an animation sequence. If you want to have a character walk across the screen from left to right, the first key frame would show them on the left and the second key frame would show them on the right. The movement between those frames is known variously as an inbetween, tween, or interpolation, but in CSS we call it a transition.

CSS Key Frames

You define your key frames in CSS by using the @keyframes at-rule, and each at-rule is assigned a unique identifier, like so:

@keyframes foobar {}

N.B. As Animations are still an experimental feature, you’ll have to use a prefix for each of the different browsers (-ms-, -moz-, and -webkit-) – for example, in IE10 you’ll need to use @-ms-keyframes.  This also applies to all of the properties I’ll be using in this article, although for clarity I’ll leave them out of my example code. But view the source of my demo pages if you’re not sure what the prefixed properties look like.

Your minimum number of key frames should be two – your start and end frames – and you define them inside the @keyframes rule:

@keyframes foobar {
from { left: 0; }
to { left: 100px; }
}

In this rule, which I’ve given the unique identifier foobar, the element I apply the rule to will move 100px from the left. You can see an example of this in Example 1; don’t worry about the code at the moment, it’s just to demonstrate the effect.

If I want a more complicated animation I can add more frames by specifying their position in the animation as a percentage:

@keyframes foobar {
from { left: 0; }
50% { color: #F00; left: 50px; }
to { left: 100px; }
}

In this updated rule my element will again move from left to right, but this time it will transition from the default colour to red on its way to the halfway point, then transition back to the default on its way to the end. You can see this in Example 2 – but again, it’s the effect you’re looking at, not the code.

Applying Animations

Now that we have our animation set up, how do we apply it? Very simply, we use the animation property. As I mentioned before, this is very similar to the transition property, so if you’re familiar with that then there’s nothing here to scare you.

Here’s the animation property with a full set of values:

e { animation: foobar 1s 500ms ease-out 10 alternate; }

Let me quickly run through each of those values in order. The first, foobar, is the unique identifier we created for the @keyframes rule. The next two values, 1s and 500ms, are time values (in seconds (s) or milliseconds (ms)) which set the time the animation will take to execute and the delay before it begins – if you use only one of these values it will be considered to be the time, and if you use both then the delay is always the second one provided.

The fourth value controls how smoothly the animation will execute; ease-out means the animation will slow down towards the end. The number after this, 10, is the number of times the animation will play – the default is 1. And finally, the alternate value means the animation will play from start to finish, then reverse order and play backwards; you could also use the value normal which will loop the animation back to the start each time it finishes playing.

The animation property is actually a shorthand; the properties it summarises are (in the same order I’ve used them above): animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. Most of them are fairly simple and pretty much explained above, but animation-timing-function deserves a little more explanation (if you’re familiar with CSS Transitions you can skip this).

animation-timing-function

This property allows you a little more control over the way your animation plays through. If you want it to play at a uniform speed from start to finish, set this value to linear. If you want it to start off slowly at first then accelerate to a uniform speed until the end, use ease-in; and if you want the opposite, use ease-out. There’s also the ease-in-out value, which starts and ends slowly with a linear transition between. The default value is ease, which is similar to ease-in-out but with slightly more pronounced speed differences.

If you need more fine control over your transition speeds, you can use the cubic-bezier() function instead of one of these keywords. It would take me more than the length of this article to explain cubic Bézier curves, so instead I strongly suggest you look at the timing function page on MDN, which explains what they are and how each of the keyword values relate to them. If you do want to make your own transitions, I highly recommend this tool for creating custom curves by Lea Verou.

The other value you can use for animation-timing-function is the steps() function. This plays the animation through in a series of stages rather than one smooth curve; for example, I could play my animation through in six steps by using this:

e { animation-timing-function: steps(6); }

This is very useful for animating image sprites, as you can see in this sprite sheet animation demo by Simurai.

Your Five Minutes Are Up

In Example 3 I’ve put together a more complex animation using some of what we’ve learned; in this case I do want you to take a look at the code so that you can see what I’ve done. Although I haven’t used all of the properties introduced in this article, there should be enough there for you to realise the power that’s available to you when using CSS Animations.

If you want to make your own animations the information I’ve given you above should be enough to get you started. If you want to get a bit more in-depth, however, read on to find out about some other properties I haven’t introduced yet, and how to combine CSS Animations with JavaScript events.

Other Animation Properties

There are a couple more animation properties you may find useful. animation-fill-mode is the first, and this is used to set the way the element displays before and after the animation has run. Without this there may be a quite abrupt movement between the element’s default state and its animated state. Its default value is none, which means the element will appear in its default state, but you could also choose forwards, which will make the element appear as it does in the to (or 100%) keyframe, backwards, which makes it appear as in the from or (0%) keyframe, or both, which will display like the from keyframe at the beginning and the to keyframe at the end.

The second property is animation-play-state, which sets whether the animation is running or paused, and so accepts a value of either running or paused (obviously). So if you want to pause your animation on mouse hover you’d use this:

e:hover { animation-play-state: paused; }

Note that there’s an ongoing discussion as to whether or not this property will be in the final release of the Animations specification, as you can replicate the same functionality by other means.

JavaScript Events

CSS Animations are pretty powerful on their own, but they really come into their element when you combine them with JavaScript, allowing you to chain them together and add or remove animations to elements as required. There are three JavaScript events that get fired during each animation:

● animationstart is fired when the animation begins for the first time.

● animationiteration fires when the animation begins, and each time it plays through (based on the animation-iteration-count property).

● animationend is fired when the animation completes its final iteration – so if the count is infinite, it will never fire.

I’m sure you can see how these could be useful. You could, for example, have two animations (called foo and bar, for originality):

.foo { animation: foo 1s; }
.bar { animation: bar 1s; }

And apply the second to the target element only when the first has completed, by creating a JavaScript function somewhat like this:

var foo = document.querySelector(‘.foo’);
foo.addEventListener(‘animationend’,function(e) {
e.currentTarget.className = ‘bar’;
});

Further Reading

• Hands On: Animations – Very useful live preview tool, letting you see the effect that changes to different values have on your animations.
• Introduction to CSS3 Animations – David Rousset has written this very in-depth introduction, which delves further into things I didn’t have space to cover here, like fallback options for non-supporting browsers.
• CSS Animations on MSDN – This is like a user manual, explaining in detail all of the properties and related functions and events, with examples.
• The Book of CSS3 – My book contains much more detail about CSS Animations, and the supporting website has examples for you to view.

Peter Gasston has over ten years experience in front end development in both agency and corporate environments, working for and with some of Britain’s biggest media companies, and is currently the senior front-end developer at Top10.com. Peter is a public speaker, the author of The Book Of CSS3, and writes the well-respected blog about web technologies, Broken Links.

Microsoft worked with Nokia UK and onedotzero to create Alphalabs.cc, a site that showcases experimental, creative and innovative Windows Phone apps.

The site includes resources to help you get started and Nokia is running a competition for developers and artists to submit their experiments for a chance to win cash prices of up to £5,000 for the most original, creative and innovative entries. Get your entries in by the end of February.

The competition is open to individual developers, companies and collaborative teams. If you’re a developer and you’re looking for a collaborator from the world of design, a good place to start is this list of art schools or search for artists and designers in your local area.

Some of the apps on the site include:

• Vequencer is a visual music sequencer; in fact it’s the first real-time, multi-device audio visual sequence. It allows multiple phone users to collaborate and create audio-visual art, so is a completely new way to interact with music, in fact.
• Field is a racing game through music videos with a hip-hop and techno soundtrack. Built in just two weeks, it aims to create a synesthetic experience. It looks futuristic with a bit of a Tron influence.
• Kaleidobooth is a crazy kaleidoscope camera app – it’s harder to describe than experience. It’s best to see the effect on Vimeo but imagine what happens if you combine your childhood kaleidoscope with a photo app.

The competition aims to inspire collaboration between the arts and the development community. These examples give a good idea of the kind of creative and experimental apps you can create and even inspire you to create your own. Good luck!

• Get started!

Kinect is coming to the PC, not as a hack but as a commercial product with dedicated PC hardware, in early 2012, according to the Kinect for Windows Blog. Some of the changes for the PC version include: a shorter USB cable and new firmware for ‘close up’ applications. You can download the SDK now.

Kinect offers PC users (and developers) some unique capabilities that change the way people interact with their computers, including:

• Skeletal tracking
• Motion sensing
• Voice recognition
• Facial recognition

For example, Calum Cawley, a fourth-year engineering student at IT Sligo and part of the Microsoft Imagine Cup winning team, is using Kinect in his final year project. He’s tracking the movement of actors on the stage and projecting virtual costumes onto them. See different ways people are using Kinect.

There’s also the BizSpark Kinect Accelerator incubation programme, which will give 10 tech-oriented companies using Kinect (on either Windows or Xbox360) an investment of $20,000 each and other benefits. Applications are being accepted now through January 25th, 2012. (Applicants must be prepared to relocate to Seattle, Washington for the duration of the program. It rains just as much there as it does here in the UK so you’ll be fine!)

• Download the Kinect for Windows SDK

The more we do with website development and client-side processing, the greater the need to extend JavaScript to support advanced maths, string and number processing and also localisation.

This is the thinking behind Microsoft’s contributions to the JavaScript standard and the Ecma TC39 working group. It’s also part of Microsoft’s wider commitment to advancing interoperability.

Examples of the new capabilities built into the prototypes include:

• Maths: cosh, sinh, tanh etc.
• String processing: startsWith, contains etc.
• Number: isFinite, isInteger etc.
• Globalisation: format dates for other calendars and numbers in different currencies

Adding these capabilities to JavaScript makes life easier for website and app developers because they don’t need to do these kinds of calculations on the server side or write their own libraries to do them in JavaScript.

More information: the interoperability@microsoft blog and the intrinsics extensions and globalisation demo’s.

Happy Christmas from all of us on the Ubelly team! We’re in a festive mood here at Ubelly Towers, the tinsel and reindeer antlers are out and we’re ready for Crimbo.

I don’t know about you but this year’s flown by – seems like two minutes since I got back into the editor’s chair in June after being on maternity leave. And what a year it’s been – the Royal Wedding, a recession… and The Critters! The Bing team have summed up 2011 using search trends, creating a great reflection on the past year – take a peek below and try not to get too nostalgic.

[vimeo]http://vimeo.com/32785473[/vimeo]

For a bit of fun we’ve published the Top Ten Christmas apps for Windows Phone. Did we miss any? Let us know what you think and which you’d want to see on the list.

Now that there’s less than a week to go before I eat my body weight in turkey and Christmas pud, my mind’s turning to 2012 and what surprises it’ll bring. Take a look at our take on the top design trends for a taste of things to come.

Have a great Christmas and we’ll see you in the New Year!

Sara Allison – @SaraAllison