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.

When asked about how similar IE9 for the desktop and IE9 for Windows Phone 7 are,  I often say… it’s a direct port. Turns out I was wrong, there are infact 17 difference that you should probably bear in mind. 17 is a pretty small number but knowing these upfront will save you a ton of time if you end up having to debug your website on WP7.

First there are a handful of features that have been added:

• GPS support for HTML5 geolocation. Windows Phone uses the location stack on the device and uses GPS if it is available. The desktop uses various other methods which do not require GPS (since most machines do not have this feature)
• Support for Viewport. Width,height, user-scalable. Whilst the following features are available in some browsers, the minimum-scale, maximum-scale, and initial-scale properties are currently unsupported for Internet Explorer Mobile.
• Support for the CSS property –ms-text-size-adjust.

Now for the things that are unsupported (with the Biggie being at the top)

• Downloadable fonts such as EOT, TTF/OTF and WOFF fonts. Whilst the font-face tag is supported the mobile browser will not attempt to download these font. A list of all the supported fonts on WP7 can be found here.
• Backward compatibility for Internet Explorer 8 documents. Internet Explorer Mobile renders these documents in Internet Explorer 9 mode.
• Cross-window communications, such as the ability to target a window by using script
• Multi-stream HTML5 audio
• CMYK image support
• VBScript support
• ActiveX support
• Extensibility through browser helper objects, toolbars, and other related items
• Active document support
• Older web technology support, such as binary behaviors, HTCs, HTML+TIME, and VML
• Full support for complex script languages in all document modes
• Surrogate pair support
• JIT support for Jscript
• <input type=”file” /> will render but since the 7.5 update it no longer allows you to upload files in way it did before the the 7.5 update.

This Saturday and Sunday Martin Beeby and I will be in sunny Portsmouth. While the beaches may be a-calling, with our graveyard tans we’d rather be spending our time talking WordPress and IE to be honest. In true Ubelly fashion we’ll probably have plenty of freebies with some very web-related slogans at our stand too. The topics we’ll be covering are:

WordPress on Windows (andyrobb)

We run Ubelly on WordPress. On Windows. Believe it or not I also run a Windows 7 laptop, so getting WordPress up and running is a pretty simple process – although of course it wasn’t always this way… I’m going to be talking about the improvements Microsoft has made over the past few years to make WordPress on Windows a much better experience and some of the things we’re doing at Ubelly to show how you can get up and running whether you’re new to Windows, or simply looking for tips and tricks on how to tune it to run even better.

As much as I love slides with 50 bullet points and plenty of animations, I’m going to keep the corporate presentation to a minimum and go live-demo mode, using WebMatrix to go from 0-60. In addition I’ll be covering some of the new tech we’ve got coming out that might help think about web navigation in a different light. I always love getting input on what’s worked, what hasn’t, and any other discussion points you feel strongly about. I’ll also be on John Adams’ panel discussing WordPress in the Enterprise.

IE – the story so far (the beebs)

I’ve been to enough web conferences to know that IE doesn’t rank highly amongst developers in a league table of web browsers. There are many good reasons for this and in this talk I’ll take a look at the history of the browser and show how things have been changing over the past few years.  I’ll highlight some of the new features in IE9 and IE10 and show you how you can use them in your websites.

We have changed the way we build browsers and are working to make sure we are no longer the black sheep of the browser vendors.  A great deal of this reinvention involves getting people in the community to feedback to us about what we should be doing and where we should be focusing. If you are at the event on or able to attend the talk on Sunday, come to us with ideas, criticisms or suggestions. You can help us build a better IE10.

the Ubelly stand

We’re also lucky enough to have a stand at the event so if there’s anything we didn’t have a chance to cover, or if you just want to chat about anything that has a semblance of technology-relatedness about it we love that – please stop by and say hi. We may or may not be travelling with some goodies as well

Take a look at the running order of both days here.

Recently I won the IE9 Dev Unplugged award for ‘Most Innovative Use of Canvas & SVG’ for my game Arena5. Dev Unplugged was a Microsoft sponsored competition aimed at developers working in HTML5 to show what a modern web browser can do without the use of plug-ins.

I’ve been into web technology for a long time, writing web apps, 3D graphics and animations, stuff like that, and I’m also an avid gamer. So with the advent of HTML5 and canvas I wanted to explore the basics and find out if it was fast and powerful enough to create a game.

Asteroids

Arena5 wasn’t the first game I created. To test canvas and see how far I could push it before it slowed down gameplay too much, I decided to do a remake of Asteroids. Building it taught me canvas and improved my JavaScript skills – plus a version of it got runner up in the 10k Apart competition, so this spurred me on to enter Dev Unplugged. I’m a huge fan of Xbox 360 so if you play Arena5 you’ll probably notice I took my inspiration from ‘Geometry Wars: Retro Evolved’!

I don’t pretend to be a big innovator, I prefer to create variations of or expand on existing ideas using current technology. Some of the effects in original games are hard to recreate in a browser – canvas is pretty fast but none of the browsers can cope with too many flashy effects, there comes a point where it slows gameplay down too much. Arena5 hits the browser pretty hard with lots of glow effects and particle explosions and lots of effects are pre-rendered like the particle effects used for explosions. The smudges and small dots are pre-rendered images, so the more expensive elements are re-used to improve performance. Essentially, Arena5 was about seeing how far I could take stuff before canvas would crawl and I think it’s a good test of what canvas can do. All the code’s available to view and you can download it and try it yourself if you fancy playing around.

Arena5

So what’s HTML5 like to work with? I like the HTML5 and browser environment – it’s very accessible, you don’t have to invest in expensive software. The downside is that you don’t get an IDE like with Java or Eclipse, or .NET with Visual Studio, so if you’re used to code completion and having your documents all in line, just using a text editor for multiple JavaScript files can be fiddly. Without a compiler you only find you’ve broken something when you run the game. However, the test debug cycle is incredibly quick, you just refresh the browser, and most modern browsers have in built de-buggers. The real up-side is it makes you really strict so you don’t tend to write hacky, sloppy code, you write clean code to reduce the likelihood of something going wrong.

HTML5 is a standard, so it’s a moving target, but it’s hugely important to make things less fragmented and make sure everyone’s on the same page. All five browsers support canvas in at least 2D and that in itself is a very important stepping stone forward. In creating Arena5 I haven’t had to change anything to make it work across all browsers – I just had to build it once. Anyone can look at the code, there are no external libraries or hacks in there for any of the browsers, and that makes it feel as though the standard is really getting somewhere. I’m quite biased as far as I like to create flashy demos and effects for games, I think it’s great for that, but I’ve not explored the other things you can do with HTML5 like the Forms enhancements so couldn’t comment on other capabilities.

I don’t really consider my HTML5 games as complete, I hope to refine what I’ve done already. I’m not finished with Arena5, I want to make it better and add new features – perhaps adding some aspects of Geometry Wars: Retro Evolved²! I’d also like to explore effects, background rendering and real time stuff. As the performance of canvas improves then I’ll continue to play around with it and refine the game. There could be an ‘Asteroids 2’ game on the horizon as well, so watch this space! I’ve definitely caught the HTML5 bug.

See what HTML5 and canvas can do with the IE10 Platform Preview

Our Canadian counterparts have been getting up to some pretty awesome shenanigans over in Toronto. They’ve created a big online multiplayer game called ‘Battle for Beauty‘ (see what they did there?), where you choose either the ugly or beautiful side of the web, and have to eliminate as many smaller opponents as possible by dragging your little ugly/beautiful critter around the screen. The game was built in HTML5 to show off the capabilities of IE9, and they’re encouraging you to have a play with the game in other browsers as well, so you can get an idea of the speed differences between them.

However, this isn’t cool enough. They also had a live counterpart in downtown Toronto, where you could throw IE9 softballs at a billboard screen to eliminate the little creatures. What makes this even cooler? The game on the screen was part of the multiplayer experience online, so you are actually competing with players online when you hurl your softballs at the screen.

Take away the advertising side of it, and this is a great example of the kind of things you can make using HTML5, and we think this is possible the first multiplayer HTML5 offline/online experience (any others out there?). It seems to me that we are getting to a point where the technology is no longer constraining the ideas that we want to make reality. All we need now are the ideas themselves, like Radio DeeJay, which won the design UX gong in the Dev Unplugged Competition. Anybody else got some beautiful examples of HTML5 wizardry?

Head over to Battle for Beauty to play the game!

(photo from: @MilesStory)

When you enhance your site to take advantage of pinning, you step outside the browser and create more native application experience for the user. Today, only 4% of users actually use browser bookmarks. 87% of users launch an application from the Windows taskbar. So you can put your site where people click and create a more powerful return mechanism for your site.

In this image you can see Hotmail pinned to my taskbar and sending me live notifications of new emails – fantastically useful and unobtrusive.

There are two primary patterns of development with Pinned Sites; a basic experience, which can be built and implemented in about an hour and a deeper experience, which can be built in a day.

Depending on the content and functionality of your site, you can decide which method would be more useful for your users. Essentially what this means, is that your websites can take on some of the behaviours that Windows 7 users are highly familiar with at an application level.

To add site pinning features to your own site I thoroughly recommend taking a look through this series of posts by Jennifer Marsman:

1. IE Pinned Sites Part 1: What Are Pinned Sites?
2. IE Pinned Sites Part 2: Why Implement Pinned Sites?
3. IE Pinned Sites Part 3: How to implement basic site properties
4. IE Pinned Sites Part 4: How to implement Jump List Tasks
5. IE Pinned Sites Part 5: How to implement dynamic Jump List Categories
6. IE Pinned Sites Part 6: How to implement Overlay Icons
7. IE Pinned Sites Part 7: How to implement Thumbnail Toolbar Buttons
8. IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button
9. IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers
10. IE Pinned Sites Part 10: Pinned Site Resources

If you do pin your site, make sure to add it to the Pinned Sites Gallery.

It’s just a couple of days until the annual Future of Web Design (FOWD) event in London and we’re starting to get excited. To begin with, the lineup is looking fab, with some of the top speakers in design and development from around the world delivering some great talks on the many aspects of design. For seconds, our very own Martin Beeby is presenting on IE9: The Story so Far, where he’s talking about where IE9 has come to, what it does (and doesn’t) feature, and some very exciting things for the future. To top it off (with a cherry), the Ubelly crew will be heading along with some exciting tech and great giveaways throughout the day. Want more details?

Crème de la crème of design folk

We’ve already enjoyed speaker folk like Sarah, Elliot and Dan thanks to a few conferences over the past year, but we’re just as excited to see some of the other sessions that are happening over the two days. In particular, Mike Kus‘ ‘Designing for Humans’ delves into meaningful design and applying it to the web, Daniel Rhatigan appeals to the typography nerds (that’s me) with ‘Web Fonts: Type Choice & Type Use’, and Femi T Adesena will tell us how to ‘Enhance Your Creativity’, which always gets me excited.

However, it’s the choice between John McGarvey‘s ‘Copywriting is Design’ and Bruce Lawson‘s ‘How to Destroy the Web’. I can’t decide between the concept of copywriting as web design, a very powerful concept that suggests that copywriters and designers need to work far more closely, or the sheer car crash of ‘A guide to everything you can do to make the Web worse.’

IE9: The Story So Far

We are also very excited to have been asked to speak at FOWD about IE9. On the Wednesday, Martin will be heading on stage after lunch to take everyone through the changes that have come about with the release of IE9. He’ll also be talking about the new frontend features that IE9 supports, as well as those that it doesn’t, and finally  looking to IE10 and what you can expect to see from Microsoft in the near future.

With Martin not being able to make the London Web Standards event in March, it will be good to hear the latest on IE9 and IE10 after MIX11 last month. Make sure you head up to hear this talk.

Sketchnoting, Foursquare and Swag

We’ve invited sketch artists to sketchnote a few conferences over the past year, most notably Flash on the Beach and New Adventures. We love what both Eva-Lotta and Sam pulled out of the bag for us, so we’ve invited them both back for FOWD to sketch the sessions in the main room. However, this time, we thought we’d give anyone who’s interested an insight into how they do it by livestreaming the whole thing!

We’ve also got Foursquare offers and swag at the Ubelly.com stand, including a bunch of copies of Eva-Lotta’s book Sketchnotes to give away, with a little message from the lady herself inside each one, so make sure you keep an eye on Ubelly on Twitter on the day and come and say hello.

See you there!

CSS3 Media Queries allow you to serve your content whilst giving consideration to the size of the screen of the device that is viewing your site. In this 25 minute talk about ‘responsive design’, Thomas Lewis (@tommylee on Twitter) explains why CSS3 Media Queries are important, how they work and how you can implement them today to create better websites.

Nice to see Mr.Simon Collison (@colly) get a name check for excellent responsive design on colly.com:

So if you want to know how to make your website respond to the size of the screen that is viewing it, you’ll learn how in this talk. You can make your websites automatically scale and re-display depending on the size of the screen on the viewing device and even using clever CSS tricks to change the content that is being presented to the viewer.

You can download this video on the session page: http://channel9.msdn.com/Events/MIX/MIX11/HTM09

Crowdsourcing is one of those buzz words that has been popular since the internet was invented in 2005 (research is not my strong point). It seems that everyone is crowdsourcing ideas, from the US Department of Defence’s Combat-support vehicle to slogans on juice bottles.

Now it seems the FBI are getting in on the action.

The FBI have put a call out, making a crucial piece of evidence in a decade old murder case public in the hopes of solving the case. When the police found the body of Ricky McCormick in a field in 1999, they found two coded notes in his pocket that have been baffling the FBI Cryptanalysis unit ever since.

In a last ditch attempt, the FBI have published the two notes on Wikipedia, hoping that someone will be able to solve the code and provide the crucial piece of the puzzle. It sounds like it’s out of a novel or film, but this just proves that technology is radically changing the way we act and approach problems.

It’s interesting, because it’s kind of something the software world has been doing for a while with open source. Even though a lot of people say there are fundamental differences between crowsourcing and open source methods, the concepts behind both are the same, to enlist the community to help build a better product. Mozilla have been championing open source since the early days, and big CMS’ like Drupal, Umbraco, Joomla! and WordPress rely on the community to make sure the product is not only good, but what the community wants.

We’ve adopted a similar approach for  IE9 to make sure we’ve released the best browser we can, by asking the community for constant feedback through the beta cycle. IE9 has only been made possible thanks to the feedback from developers over the past 12 months, with over 23,000 externally reported bugs fixed before final release last month. While we’re not likening solving a murder case to making software awesome, it’s exciting to know that people can work together to make everything much better than if a small team were working on it. If you haven’t had a look yet, you can start developing for IE9 and taking advantage of some of the cool features.

Anybody else got some cool examples of crowdsourcing?