Entries Tagged 'RIA' ↓

Meet “Dax”, the Silverlight mascot.

I like both the "blue monster campaign" and SIlverlight and given I'm dabbling around in 3D at the moment, I decided to play around with the idea of combining the two.

Note: This is not the official mascot for Silverlight, instead it's simply me mucking around with 3D. Please do not use this in anyway in conjunction with Microsoft branding.

Here's "Dax" as I'd like to call him (why? dunno but Dax just stuck out as a cute name for the little guy). He's currently sitting in a surgical chair because he made fun of Flashbots new upgrades. He said they were rushed a bit to and looked like he just raided a dead storm trooper for them.

Flashbot obviously disagrees.

Red vs Blue - DAX makes fun of Splashbots new upgrades

 

I'm so i love with these two cool characters, that I'm using them in my PowerPoint decks next week (TechReady 6 - Internal Microsoft conference in Seattle next week).

Here are some other picks

Don't be alarmed, I'm Aussie

(Fig 1 - Since I'm an aussie, don't be alarmed at my accent fellow international audience members)

Here are your go do's.

(Fig 2 - Here are your "Go Do's")

Turning the tide..

(Fig 3 - Putting Flashbot under the ...drill?)

Title of my presentation

(Fig 4 - Title Screen.. FLashbot's so proud of his new helmet)

Balance Back to The Force..

(Fig 5 - Old title screen, Dax and Flashbot having a fall out over it)

Splashbot being disected

(Fig 6 - Flashbot pinned to the wall heh.)

You define RIA.

image

Last night I put up my RIA Chat video teaser and I got a few direct emails from folks asking who said the quote at the end:

"..What you do with the UX Platform today will define what RIA looks like tomorrow.."

Well, *proud look* it was me. It's something I settled on a while back as at the heart of what RIA is today or tomorrow is really about what we do with the technology before us. I highlight this by ensuring the words "you", "define" and "RIA" are in different colour as that's ultimately the hidden meaning or agenda.

  • You define RIA by the way you build code.
  • You define RIA by the way you design interfaces.
  • You define RIA by the way you tell others about it.
  • You define RIA by the way you use it to spark adoption.
  • You define RIA.

A few readers may remember a while back I used the word "Interactive" vs "Internet" when defining RIA. It got into quite a heated debate (amazing how one little word can trigger so much emotion). In the end what made me angry, frustrated and depressed was that no one person stated how they define RIA. Instead we got into this semantic battle about who had it first, who's taking it tomorrow and why change something if it ain't broke.

Who said it was fixed? and who decides if it's broken? Lots of questions that I'm going to spend some time getting answers to and the people whom have such answers are..well..

You.. as you define RIA.

http://blogs.msdn.com/msmossyblog/archive/2008/01/31/something-is-being-built-and-i-hope-you-ria-kids-are-watching.aspx

Something is being built…and I hope you RIA kids are watching…

I've been a busy little Microsoftee and have done a lot of interviews over the past few months with folks from all walks of life. I'm about to go live very soon with a project. What's the project? not telling until it's finished. I will give you a teaser though.

It's nothing I've seen done here at Microsoft before so what you are seeing is simply a quick video tease.

(Note: RSS Reading folks will need to come visit the website to see the video heh)

My first chat is with someone from the hollywood movie scene. His work has inspired...

Release date is in February.. but

If you have someone you want me to talk to about RIA, then by all means contact me.

* Update: 1/02/2007 *

I've now included a Flash version of the Video.

Why Chad is excited about Silverlight 2.0

imageI stumbled upon a post by Chad Campbell via my RSS reads (244 down, 9398 to go) and I enjoyed reading Chad's passion and insight into what he's thoughts are about the Silverlight 2.0 journey ahead.

Chad has also written or is writing a book on Silverlight 2.0, so be sure to keep an eye out for that.

This one piece made me feel warm and fuzzy inside. No, not because he read my post (that's 2 people now, mum and Chad) but because it provoked a discussion and that's what I love the most.

Your response to this question will probably determine where you fit on Scott Barnes' RIA Role Spectrum. Personally, I am slightly more to the developer side, however, I would definately consider myself an RIA Architect. Because of this, both aspects are important to me. So, when I'm asked "What is .NET?", I have to have a response that fits both sides of my personality (sounds like a frosted mini-wheats commercial). Well, I believe that .NET is about two and exactly two things.

The more I think lately the more given my role here at Microsoft is to spark adoption in RIA (in general) that my place on the RIA Role Spectrum is more "RIA Philosopher" than evangelist.. hmm.. might be another blog post ;)

http://cornucopia30.blogspot.com/2008/01/why-im-excited-about-silverlight-part-1.html

What if you could combine RIA with tomorrows multi touch innovation

I was mucking about in YouTube today (smacks for me and not doing work) and I came across a project being built at MIT. This project allows folks to draw a physics based diagram which then comes to life on what appears to be a homemade (MIT style) "Smart Board".

Watch the YouTube video below to see how it happens.

I then also came across another video (next in the play list) where a teacher was instructing his students on various laws around what appears to be electronic circuits (I could barely keep up with it - I'm dumb though). I thought to myself what a great contrast the two illustrate.

I say this as when you watch the teacher instruct the students on the lesson, he is using chalk to outline various points in his lecture. In that he'd use arrows to illustrate the flow of a current in a electric circuit. He'd also then add variables to the equation which would in return produce different results.

What if he used a similar technology as the one produced by MIT? What if he was able to draw his electronic circuit in a way that visually came to life, allowing the slow ones (like me) to suddenly see how it's all coming together.

How does RIA play a role you maybe asking (well you are now)?

It gets better, as the picture below indicates; the teacher has just run out of room on his blackboard. Thankfully he has cascading boards which he then makes use of, but what if he continues to grow and grow and needs more room as he decomposes the situation further.

How does the students keep track or have the ability to refer to previous "boards"?

image

What if that person was to have a device, one that uses some of the RIA technology of today? What if they were able to communicate with the friend next to them - silently - with a Live messenger style query  "..I have no idea wtf this means, show me.." their study friend could then overlay some drawing(s) etc on top and since he/she may know their friends learning habits find a better way to illustrate the lesson in terms that the friend understands.

RIA is a concept; it's not really a Flash, Silverlight, WPF or any one thing. It's merely a place in time where technology is able to aggregate data and present in different ways that reduces a footprint on any one person’s nominated platform. A friend once said, "Aggregated View of Disparate Systems".

We at Microsoft are building a UX Platform that is looking to keep these concepts all in perspective and that's essentially what a Platform is all about. Providing a foundation for tomorrows innovation.

In this case, take all of the above technology and look at how it could fit into tomorrow’s learning institutes. Who knows our ramp up to learning a topic maybe shorter?

I once had a great debate with Frank Arrigo's replacement, man at the helm Roger Lawrence about technology makes us smarter. I thought it did, but Roger put it to me that we aren't smarter but technology does help ramp up faster than normal. Our intelligence doesn't grow, simply our understanding.

I love this industry.

What resolution do you design RIA in?

I read an interesting post this morning on how the author wanted folks to consider the 800px resolution for their designs. He cites that although he has a large resolution, it doesn't mean that he's not also using other applications at the same time.

...But with 1900+ pixels, I keep half for the browser and half for other stuff. If you go with 1000+ pixels, it doesn't leave me with enough room for my other apps, and I've got to (ack!) scroll sideways. It's not as bad with the ball on the Mighty Mouse, but most people don't have one and it's not exactly effortless even with one... -  Sammy Larbi

It's an interesting point to debate, as whilst on one hand I do agree with him that the potential for your audience to overlay multiple smaller applications is there, yet at the same time the benefits of expanding your resolution to accommodate more on screen can also be in an asset.

Screen real estate is a hard subject to nail as even if you're the best information architect in the world, you will still annoy someone with your chosen path. The trick is to figure out you collateral damage, in that what percentage of your user base is going to disagree with your design.

The easiest way to work that out is to do some basic research, check the statistics of your existing site (assuming you had one already) then ask them but do so in a way that doesn't draw attention to your intent - as humans are funny at times, they do one thing but say another.

eg:

Q. Do you think Coke is good for your diet...
A. Yes, it's terrible...

The intent was it's terrible, bad, negative, stop!. Yet they will drink coke.

Here is a tip, we are habitual creatures and if you can compliment our patterns of habit, you're likely to become less annoying.

Take this blog for example. Below is a graph indicating my resolution stats for this blog.

image image

Would it be a good idea for me to go back to 800x600 resolution? If not what would you consider my ideal resolution.

Know your audiences technology limitations, know your customers habits and above all plot your approaches into a Risk Matrix.

My RIA art…

12:33 AM and I'm currently putting together my power point deck for an upcoming internal conference (Seattle - February 4th - 15th). I typically like to use as many visuals as possible, as I've sort of decided that I'd prefer all my presentations going forward have a bit more "bang" associated to it.

The 3rd deck in is where I introduce myself and my title. I typically had a boring slide with basic text but I thought about it a bit more and decided to open up Adobe Photoshop CS3 and go to town on producing a better intro slide.

These are the results so far and putting them on a blog is not nearly as good as seeing them on a 24" iMAC at night.

Intro 01 - White..

SLWEB01

I left some room to the left so I can put my details (name, email). I'm also thinking of designing a "digital passport" as being a RIA Evangelist I get to see cool UX day in day out.. so I think it's important that should I use a medium like PowerPoint that it represents this at the very least - in static form.

Intro 02 - Black (Favourite)

SLWEB02

This is my favourite so far, as in a dark room it really comes up nice. The vision or story behind is that the words RIA are in the middle, which appear to be "popping" out of a monitor to indicate well, rich user experience. I've also tagged it with "Lighting up the web" which is a play on Silverlight's tag line "Light up the web"

I'm Proud

I'm proud to wear the title "RIA Evangelist" here at Microsoft as I think it's in many ways a first of many more titles to come that focus on our UX Platform. We are building a UX Platform made up of many pieces of connecting software along with looking to deploy such software on many devices going forward. I think we also have a really strong pedigree of designers on our payroll and the more I uncover them the more I am blown away by some of the upcoming idea's, solutions or products being produced.

Inspired by this, I thought it was time I also jumped in and added my own composition of art.

Now gimme a hug.... as have you hugged a designer today?

Flotzam: Mashing up the Web

A panopticon at the Presidio Modelo, Cuba. Courtesy of Wikipedia.Have you seen Flotzam? It's a fun mash-up that Karsten and Tim put together that aggregates a bunch of different data sources: Twitter, Facebook, Flickr, Digg, YouTube and indeed any general RSS feed. You can install it either as an application or a screen saver, and it's a nice way to see what's going on out there on the "tubes". Karsten has coined the term panopticon to describe it (from the Greek, meaning all seeing); to me, this feels like it has the potential to form the first step of a project to build the ultimate, pluggable, modular social networking client.

Being a WPF application, Flotzam can be easily restyled. From the enter/exit transitions for new items to the overall visual look and feel of the Flotzam interface, you can do almost anything you want just by tweaking the XAML mark-up. And with MIX08 selling out quickly (hope you've registered), the team thought it would be fun to put together a little contest that gives you the chance to experiment with WPF by creating your own custom themes. We'll use the best entries at MIX, both on the keynote screens and on all the PCs around the show; Karsten hopes that walking around the show will be like visiting some kind of art installation with all these different skins appearing.

Entering the contest is easy: everything you need to know can be found on the visitmix site. We've even got screencasts available to show you exactly how to use Blend to do the customization. Let your inner artist out - show us what you're capable of!

Finding your balance between AJAX and Silverlight

Tonight, I found via twitter a deck from Plaxo’s Joseph Smarr. In this deck he talks about the war injuries he received in heading down the AJAX route. It’s a great deck and worth checking out but what I liked the most about it, was that it reminded me of my struggle back in 2002 as a web start-up.

This is a story of how I made my first start-up work using RIA, but at the time didn’t know what RIA was or heard of it and it was also the reason I took up Flash over DHTML – aka AJAX.

I’ve got an idea, let’s build..

myapp

In 2002, both the Managing Director and I left the company we worked for and made a go of it with our own start-up. We had little or no money to begin with and our grand vision at the time was to build a CMS (Content Management System) that focused purely on user experience. As in those days, UX was something that most product teams would simply echo the following fatal words – “don’t spend too much time on the UI, function is more important” and thus you’d see some really scary CMS. So scary, that we believed that the CMS features weren’t the differentiator, but the user experience was (how funny life turns out).

We however, believed back then that UX was not only important but would separate us from the pack and with this vision; we set out to make our millions. I took Coldfusion and Flash 5 and decided to build out this CMS in a way that I felt was not only unique, but had elements that I’ve always wanted in a CMS but never found. The UX was simple, keep the graphics in a more “pixel art” form, steal as many ideas as I could from Apple in terms of their user interface guidelines and ensure that any mum or dad could use it – whilst providing areas of complexity for those whom wish to venture out of the ui sandbox.

screen1

I made use of DHTML (AJAX to the new comers to this space) and it was quite a bold step, as you see Internet Explorer at the time was probably the only realistic browser that made use of XmlHttpRequest. I chose to use XmlHttpRequest at the time simply because Flash 5 had imitated capabilities and I remember seeing Erik’s WebOS.com many years before (it’s by far the best AJAX/DHTML creation I’ve ever seen to date – incidentally Erik now works for Google - ie Google Gears). I wanted to take elements of Erik’s gratuitous but elegant use of DHTML talking to server-side and also apply them to my CMS and it was pretty much what we’d call “RIA” today (only there wasn’t a buzz term for it back then).

I chose to head down this path, as well, that was the technology at the time and it’s all I had to work with.

User Experience took a lot of trickery to get working...

The vision of focusing on UX was sound. We found some success with the early stuff I wrote & designed in the previous versions. As this is what we felt helped sell the first version of the CMS (as it had really weak features).

What we needed though was the ability to minimise the end users need to refresh and provide instant feedback as they interacted with the web application. In order to fulfil this I’d make use of a lot of iframe and XmlHttpRequest trickery, in that I’d write a Coldfusion wrapper which basically encased an iframe tag with server-side generated attributes. Then using XmlHttpRequest I’d ask the server to give me back the iframe in html packets, which using the Internet Explorer DOM API inject back into the interface – so yes, in 2002 I was using “AJAX” and didn’t think anything of it, as well Erik did it and it was a normal thing to be seen.

SEP-SM-SC1

I first showed this approach working in what I’d call the “Publish Wizard”. The Publish Wizard was a feature within the CMS that allowed the end user to publish pages they had in draft form into real life static html pages (only with a .cfm extension to ensure parts of dynamic were in place). We chose to build out the pages in static form as back then search engines preferred static instead of blah.cfm?ver=1 style url’s (aka we wanted friendly urls).

The previous version of this feature I built used to basically generate the dynamic to static files in a way that was really bad for the end user. In that the end user would stare at a “Publishing..” text on a blank screen and wait for untold minutes until the process finished (we once had a government department that had 20,000 pages at one stage – so imagine that wait).

seifacedemo_v2

I wanted to improve on this, so I made use of the iframe / XmlHttpRequest idea’s I found in Erik’s work. I instead figured that Coldfusion needed to “thread” its processes as I found that if I could write 5 pages in one batch, it would give me 5 times the speed. The problem however still remained, in that the end user was staring at the dreaded “Publishing..” text. I decided to tackle this head-on, and decided that I needed a way to show progress but with a degree of accuracy as to show inaccurate progress would result in more human error (i.e. I also forgot to mention that users would assume it stalled and hit refresh, thus incomplete publishing and bugs would occur).

I found that if I were to create 5 iframes hidden, and using JavaScript I would update each of the iframe URL’s with a pageID to be published. Coldfusion would do its job and write out the dynamic pages to HTML and when finished would update a flag in their respective database rows. That worked, but what I really wanted to do was obviously show the visual progress being adjusted. The way I did this was using XmlHttpRequest I’d ask the server “what’s published so far” and it would return a percentage complete JavaScript object (yes, I was even using a quasi XmlHttpRequest JSON style solution).

The end result was that the user was seeing progress bar updates as each batch of 5 were being published. I thought this was brilliant and how great was DHTML!

The browser started to die, people were afraid.

The Publish Wizard worked a treat and the rest of the UI flowed in similar fashion, in that I’d find ways to ping/pong the server and use the iframe / XmlHttpRequest approach to minimise page refreshes. However, cracks began to immerge as once I started adding more and more of this technique to the UI, the memory started to climb.

Internet Explorer had memory issues (garbage collection) and I cursed its existence – it let me down!. Yet little did I know that it was actually my fault, as I wasn’t disposing of my variables after use and I’d cache way too many getElementById() results inside JavaScript.

screen2

It was too late in the end to recover, as by this stage we were roughly 1 year in and I was mentally exhausted from being a lone coder, designer and architect in one. I needed a break and I had lost the passion as well as the vision. The thought of turning back and re-writing a year’s worth of work was too much, and so we looked at exit strategies quickly. We made a fair bit of money and so it wasn’t a total loss.

The lessons learnt, AJAX can be an evil cretin at times.

I mention all of the above, as I see the same formula apply day in day out with Web Start-ups whom preach at me around why AJAX is by far superior to Flash or Silverlight runtimes. I simply sigh when I hear them, as I could argue the point with these folks further or I could simply let them be and hope they find a better way around the pitfalls associated with AJAX.

It’s relatively simple folks, the browser in a nutshell was never really meant to be pushed and poked into the way it’s been used today. We see great uses of AJAX daily whilst other times we see terrible, painfully poor uses of it. It’s a technique that should be used only when absolutely necessary and I state this simply from experience. Experience in not just building with it many years ago, but also watching others preach the AJAX gospel only to see them a year later hit what I call the browser barrier (similar to Moore’s law in terms of the thermal barrier).

It happens regularly; a web application starts out great, strong and really exciting in its use of AJAX. Yet as more and more features are added, suddenly the weight of the browser begins to fail and one or two pieces of the UI stall. Then another 2 and before you know it, you’re debugging JavaScript and Server-side code trying to figure out which part of the transaction is the one at fault – did I put a try/catch behind that ..Or is the event bubbling right? Etc..

A Runtime is the only way to fly


This is where Runtimes such as Silverlight or Flash play a strong role in today’s web application(s). It’s the right tool for the right job and to hide behind “I don’t want plug-in to be installed” is no longer a fair argument. It’s now a necessity to have both runtimes going forward as to do so will help shift this web 2.0 culture hells bent on using 100% Ajax applications into a different realm of user experience.

The reason why, is simple – the runtimes are mostly goaled on one thing. Make sure you don’t make your users wait and above all else, make sure you don’t make your developers wait either. Browsers on the other hand have to tread much more carefully as in the end they have to treat the web in many ways as either an application or a document. Runtimes simply treat the web as an application or animation, different rules apply and different calibre of developers & designers also.

The simple ability to accurately predict when a data stream is likely to finish download is by far the most basic and simplistic feature within a runtime, yet the browser cannot give you this data with as much degree of accuracy.

Plaxo found out the hard way, you don’t have to

I see Joseph of Plaxo’s deck and I think to myself that was me in 2002 and will this madness ever end? (Note: Joseph did an exceptional job and this by no means taking anything away from him in that regard - it's more a broader question).

Give the RIA idea a shot, pick up Silverlight and take it for a test spin, see what it can do to mitigate the pain ahead. Use both Silverlight and HTML together and yes, mix it up with some AJAX if you like, but consider moving away from a 100% AJAX driven solution as it’s not necessary in tomorrow’s web application. Remove the idea that search engine friendly RIA’s are a stumbling block and instead build in your own way of ensuring users can find information in a contextual way that suites your product. Leverage Live.com cloud’s API or Macros to help you achieve this as in the end separation of your content from your RIA is probably where you need to focus your energy the most.

Deep linking is simply a fool’s errand. Think of an alternative approach to that problem, and think of it at the start of your product’s architecture as it’s something you shouldn’t put off until after v1.

I’ve been mixing Flash, Silverlight, Flex, AJAX, HTML, Coldfusion, ASP.NET, PHP, Java and XUL together for many years trying to find an ideal way to build RIA. The end result overall was simply that I tried to hand roll too much of the workload myself whilst relying on the browser to do most of the work. Instead focus on ensuring your UX Platform scales in terms of performance and can talk back and forth between the servers.

I think Silverlight is going to be the better bet out of all that I've tried, and I state my job on it (heh)

Well done to Joseph for sharing his learning(s) around AJAX. I think it’s a great deck and special thank you to Ashley of Faraday Media for pinging me with this URL via twitter.

We’ve Released the News Reader SDK!

Many of you have seen the New York Times reader application - it was featured as part of the portfolio I've been building up of Great WPF Applications. As I mentioned at the time, the New York Times reader is based on an SDK that we built to allow newspapers and content publishers to create rich, "occasionally-connected" experiences based on the flow layout capabilities in WPF. We've had a private beta program running for a while now, and over the intervening months there have been a number of other newspapers that have gone live with applications using this toolkit.

image Now we're delighted to announce the public release of the reader toolkit on windowsclient.net. We've made a number of improvements to the kit to broaden its usage; the reader toolkit is now known by the rather more accurate but slightly less memorable name: the Syndicated Client Experiences Starter Kit. This reflects its potential to go beyond a news reading scenario and handle other kinds of data synchronization and display needs. For example, you could use this as the basis of a client for financial data analysis, where the application downloaded stock prices and other financial information and presented it in a rich client experience (Lab49, are you listening?!)

The great thing about the starter kit is that the source code is available, so you can customize it to your heart's content: changing templates and styles, modifying the way it handles data, adding new features, and so on. We've also created a sample MSDN Magazine reader application built with the starter kit, which is of course also provided with full source code. Even if you're not interested in the reader toolkit itself, you'll find this a really useful application in its own right.

Have fun with this - I'm looking forward to seeing the applications people build with this toolkit...