I just finished up a day attending the Chicago RIApalooza event in, well, Chicago.  First, I must say that I love cities with great mass transit systems.  I’ve said this before and I keep threatening myself to move to one.

For this event I paired up with a super designer Corrina Barber.  Corrina works as a user experience designer at Microsoft, is wicked smart and was a perfect compliment to this event.  Most of the attendees at RIApalooza I believed to be interactive developers, so most having a knack for design.  I figured rather than a developer only session it would be better to have more of a design skew on what Silverlight, Visual Studio and Blend bring to the table for developers and designers.  Corrina and I set off to demonstrate that designer/developer workflow that Microsoft talks about so much.  To set the stage, basically we started with a concept and then Corrina used Expression Blend to create a wire-frame mock-up using unstyled controls.  I then jumped in as the developer and modified only code, keeping the design in tact while my designer counterpart continued on fit-n-finish and polishing the design.  It is really great to see this separation and see how a developer can work on a project, keep the design integrity 100% and allow this separation.  In the end we had a final product that demonstrated this concept as well as some aspects with Silverlight such as IsolatedStorage, WebClient, LINQ to XML, data binding, etc.  I hope it was well received.  Corrina held court in the lounge afterwards gathering feedback from designers on what we (MSFT) are doing right with our tools/platform and what could be improved.  I listened in a few times and it was great feedback and I think the attendees really appreciated hearing stuff straight from a designer!

The rest of the day’s sessions were great.  Back up.  The night before was a social mixer where we had a discussion from Dave Meeker of Roundarch.  This guy gets it.  It really was spot-on in my opinion and I sincerely appreciated his perspectives and knowledge brought to the discussion that evening.  We ended with a panel discussion that surprisingly had more to do with discussions around business/marketing aspects than any technology.  It was a good discussion.

Okay, the rest of the day was great.  Presentations from Corey Miller and Anthony Hendley on Silverlight, WPF and XAML.  A look at RIA best practices with Josh Holmes and Michael Labriola.  Some cool framework stuff looking to merge the world of .NET and Flex from Ka Wai Cheung of We Are Mammoth (which ironically describes themselves as a small firm).

I also personally had some great conversations, particularly with Stanton Ware, Donald Burnett and Michael Labriola.  Nearing the end of the day I caught Michael in a resting moment and decided not to let him rest.  What started with a simple question of “do you think you can show me Flex for a few minutes” led to an hour or so demonstration of Flex Builder, the platform and some concepts in software design of Flex applications.  Honestly it was time very well spent and I have a much better perspective of Flex, what is good, what is bad, etc.  We also philosophized (bushism term, deal with it) about evangelism, organizational growth, etc.  Good conversation.  He’s a really smart dude.

I also was able to sit down with Larry Clarkin and Dave Bost with The Thirsty Developer.  I had a good time on the podcast and hope it turns out okay for the guys.  Thanks to them for asking me to participate!  The Thirsty Developer is one podcast that I’m subscribed to and I think they have a good balance of fun and conversation with the people they choose to talk with.  I would recommend you take a look and consider subscribing.

 

I was real pleased with RIApalooza and hope to see more of them sprout up.  The mashup of community and discussion was welcome and refreshing.  Congratulations to the entire planning committee on a job well done.

Take a few minutes and look at this video of Jose Fajardo re-demonstrating one of his ReMIX features shown using Silverlight and DeepZoom.  Are you kidding me?!  Seriously, Jose has a great imagination and an incredible sense for effectively demonstrating things.

In this video he answers questions posed to himself like “what if all web images were DeepZoom-able?” and “what if all the documents on the web were DeepZoom-able?”  Then he gets crazy and suggests that people could collaborate with a DeepZoom image and demonstrates this using a Silverlight chat experience built using network sockets.  I love his context of showing an x-ray and possibly having physicians review this together.

Bravo Jose on another well executed set of experiences.  I hope these surface online for use as the Hard Rock memorabilia site has stiff competition even in these samples!

Taking another cue from some great stuff Joel is doing, I liked his implementation of the ‘Leopard Screen Saver’ but wanted to make it more ‘real’ for me.  So I wired it up to my Flickr account.  Result here (using Silverlight Streaming):

I only had to change a few things.

First, in the Page_Loaded event, I removed the timer start function.  This was because with interacting with Flickr it was going to be async.  I didn’t want the timer to start until I knew the image collection was built.

My BuildCollection function now looks like this:

private void BuildCollection()
{
    // get Flickr NSID
    WebClient fu = new WebClient();
    fu.DownloadStringCompleted += new DownloadStringCompletedEventHandler(fu_DownloadStringCompleted);
    fu.DownloadStringAsync(new Uri(string.Format(FLICKR_USER_SEARCH, App.FlickrUser)));
}

/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }]]>

This is a first call to get the NSID (internal Flickr user_id parameter) based on an initParam the user sends in.  The FLICKR_USER_SEARCH is just a const string parameter to the Flickr API rest call (with my API key in it) which looks like this:

const string FLICKR_USER_SEARCH = "http://api.flickr.com/services/rest/?method=flickr.urls.lookupuser
    &api_key=[yours]
    &url=http://flickr.com/photos/{0}";

/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }]]>

I also use a FLICKR_USER_PHOTOS const which is like this:

const string FLICKR_USER_PHOTOS = "http://api.flickr.com/services/rest/?method=flickr.photos.search
    &user_id={0}
    &api_key=[yours]";

/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }]]>

The completed event handler for the user search call looks like:

void fu_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    XDocument resp = XDocument.Parse(e.Result);
<span class="kwrd">string</span> nsid = resp.Element(<span class="str">"rsp"</span>).Element(<span class="str">"user"</span>).Attribute(<span class="str">"id"</span>).Value;

WebClient p = <span class="kwrd">new</span> WebClient();
p.DownloadStringCompleted += <span class="kwrd">new</span> DownloadStringCompletedEventHandler(p_DownloadStringCompleted);
p.DownloadStringAsync(<span class="kwrd">new</span> Uri(<span class="kwrd">string</span>.Format(FLICKR_USER_PHOTOS, nsid)));
}

to retrieve the NSID.  With that I then start the search photos call to retrieve 42 photos.  The sample is a little hard-coded with count values, but this is just a quick change to see if it would work.  When the async operation to search the photos returns, I use some LINQ to mash them into FlickrImage object types using a custom class I put in my Silverlight application.

public class FlickrImage
{
    public string id { get; set; }
    public string farm { get; set; }
    public string server { get; set; }
    public string secret { get; set; }
    public string title { get; set; }
    public int tagid { get; set; }
    public string url
    {
        get
        {
            return string.Format("http://farm{0}.static.flickr.com/{1}/{2}_{3}_m.jpg",
               farm, server, id, secret);
        }
    }
}

/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }]]>

and then the LINQ query:

XDocument xml = XDocument.Parse(e.Result);
var photos = from results in xml.Descendants(“photo”)
select new FlickrImage
{
id = results.Attribute(“id”).Value.ToString(),
farm = results.Attribute(“farm”).Value.ToString(),
server = results.Attribute(“server”).Value.ToString(),
secret = results.Attribute(“secret”).Value.ToString(),
title = results.Attribute(“title”).Value.ToString()
};

Once I have these, I essentially moved the iteration code Joel had into a foreach loop for my images and then started the timer.

foreach (FlickrImage photo in photos)
{
    Uri imageUri = new Uri(photo.url, UriKind.Absolute);
<span class="kwrd">if</span> (i &lt;= 16)
{
    Tile tile = <span class="kwrd">new</span> Tile();
    Media media = <span class="kwrd">new</span> Media(imageUri, <span class="kwrd">true</span>);
    tile.Media = media;

    <span class="kwrd">if</span> (col % 4 == 0)
    {
        row++;
        col = 0;
    }
    tile.SetValue(Grid.ColumnProperty, col.ToString());
    tile.SetValue(Grid.RowProperty, row.ToString());
    <span class="kwrd">this</span>.LayoutRoot.Children.Add(tile);

    col++;
    _tiles.Add(tile);
    _images.Add(media);

}
<span class="kwrd">else</span>
    _images.Add(<span class="kwrd">new</span> Media(imageUri, <span class="kwrd">false</span>));

i++;
}
_timer.Start();

The result is the same visual sample Joel had, but using my live Flickr photos from my gallery.  This is made possible because Flickr has a) a REST api and b) a valid cross-domain policy file.  Both of these enable Silverlight to be a great client for consuming this data.  The visualization could be enhanced to provide mouse-over effects to zoom the picture I suppose, but I’ll get to that later.  Pretty fun that just a few changes (and none to XAML) enabled me to make this real for me.

The code for my changes is here but note you must have your own Flickr API key from their site.  I also implemented supporting an initParams value so you can pass in the Flickr user name dynamically. 

UPDATE: To use the initParams capability and display a badge for your Flickr account, you can use an <iframe> tag and point to http://silverlight.services.live.com/invoke/217/FlickrBadge/iframe.html?u=[yourflickrname] where the [yourflickrname] is the last part of your Flickr photos url.  For example if your account is at http://flickr.com/photos/uhoh_over than you would use http://silverlight.services.live.com/invoke/217/FlickrBadge/iframe.html?u=uhoh_over.

 

A while back the team at the New York Times newspaper produced a digital reader for their content, dubbed ‘Times Reader.’  The technology powering that reader experience (“the digital newspaper that reads like the real thing”) is Windows Presentation Foundation (WPF), part of the .NET Framework.  It is a remarkable experience for viewing digital news in a traditional format.  It provided online and offline reading capabilities mixed with some new and innovative ways of viewing related stories.

Portions of the reader were even transformed into a starter kit framework: Syndicated Client Experiences Starter Kit.  This kit provides the initial plumbing to produce similar experiences and truly is a great starter kit to use.  Others like the Seattle PI and MSDN have put their content via this mechanism.

This experience of the Times Reader was a Windows-only experience because of the dependency of the .NET Framework.  The Times Reader does provide the best experience because of this dependency however and it is important to note that.  Mac users, unfortunately, were left out.  Until now.

Rob Larson, VP of Digital Production for the NY Times, announced that they’ve been working on a Mac version and a beta will be released soon.  Rob’s team implemented this version using Silverlight.

“We are using Microsoft’s Silverlight technology to render the pages on the Mac version. Silverlight includes a subset of the Windows Presentation Foundation (WPF) tools we use on the PC version. This allows us to keep the look and feel of the Mac version very close to the PC version and also allows us to reuse code across platforms.”  source: http://firstlook.nytimes.com/?p=46

I initially saw a lot of comments in the post about ‘why is this better’ and I think those are from people who haven’t seen the reader experience on the PC.  I have to admit that I’m not a newspaper reader at all, but as a geek, the news I do read is entirely digital…I’ve never owned a physical subscription to anything.  This digital reader experience is unique and fun to play around with (you have to see the search/related stories visualizations) and I think brings some freshness to traditional print news. 

Rob’s post has more screenshots and details about the implementation and future plans, including a comment of their commitment to bring feature parity between the versions.  I’m looking forward to seeing this implemented and hearing from the development team about their use of Silverlight to bring this experience to the Mac platform.

I’m very excited to have the opportunity to attend the RIApalooza event in Chicago in a few weeks (31 MAY).  What is RIApalooza?

RIApalooza promises a platform agnostic and "PowerPoint-Free" zone, which means we are going to forgo the boring marketing pitches in favor of talking technology. RIApalooza is about creating Rich Internet Applications; how to go about building them and what is being built.  source: riapalooza.com

I love the PPT-free zone aspect of it.  I loving having the maximum time to show some real working code, answer questions and see what everyone is working on.  I’ve decided to team up with a great designer, Corrina, where we will demonstrate some fun things.  It should be a great time.  I don’t want to give too much away, so if you are in the area, you should absolutely come.  You can register on the site, so be sure to do so.  I’ll be coming in on Friday and might need to do some fine tune prepping but would love to meet as many folks as possible at the meet-n-greet on Friday night.  Follow me on Twitter if you’d like and hopefully I’ll be able to post where the fun is happening.

I look forward to seeing you there!