I searched and didn’t immediately find anything, so I’m partly doing this for my own mental archive but also for others who might want this feature.

First, I use two tools for snapshot capturing.  When I want a quick snapshot with no annotation, I use WinSnap, which rocks the hizzouse.  For when I need annotation (arrows, highlighting, etc.) I use SnagIt from the makers of Camtasia (Betsy Weber rocks).  Both of these tools are incredible and I’ve purchases full licenses for both and haven’t regretted it at all.

In WinSnap, there is a feature that allows you to specify a tool you can run on the image that was just captured.  I’ve customized this using PNGOut based on recommendations and feedback.  Most programs create PNG files that can still be compressed by stripping out interlacing or whatever.  You can read all about image formats from Coding Horror here.  Jeff’s tips on bandwidth savings for web sites are invaluable.  It is helpful and works well in WinSnap.  One thing I can’t figure out is that WinSnap never saves my custom commands…that is quite frustrating, but I get over it…I don’t reboot often so I deal with it.

When using SnagIt though I didn’t use PNGOut.  Partly because I didn’t think it had that capability…alas but it does!  here’s how I customized it.  First, get PNGOut and put it somewhere.  For consistency with other programs I put mine in C:\Program Files\PNGOut\pngout.exe.  Yes I know there are GUIs for the tool, but I like the command-line as it integrates with this workflow.  Okay, now in SnagIt set up a new capture profile using the Add Profile wizard (I couldn’t figure out how to use SnagIt to take a capture of the SnagIt box :-) or I’d show it here).

Decide your settings for steps 1 and 2.  When you get to 3, do this:

• Click the Properties button
• Click the Program tab
• Click Add and then point to where you have PNGOut.exe and save that setting
• Under the File name area, I don’t like automatic naming so I change that to ask me for a file name
• Click OK
• Make sure that in the Step 3 wizard that Program is now selected (and if not select it)
• Choose your other settings and then finish the wizard

Boom, now when you capture a screenshot with this newly created profile you can annotate or do whatever you want with the capture in SnagIt and then when you click finish (after giving the file a name), PNGOut will automatically run:

This will save the image immediately, run PNGOut on it and keep it in the same place…saving you time, size and bandwidth (assuming you are uploading the image to a browser).  This works nicely with my workflow.  I think I’m going to hack together another output program that enables an immediate upload to Amazon S3 so that I can capture, annotate, compress and upload in one click (well, 2).

Anyhow, hope this helps!

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)));
}

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}";

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]";

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

void fu_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    XDocument resp = XDocument.Parse(e.Result);

    string nsid = resp.Element("rsp").Element("user").Attribute("id").Value;

    WebClient p = new WebClient();
    p.DownloadStringCompleted += new DownloadStringCompletedEventHandler(p_DownloadStringCompleted);
    p.DownloadStringAsync(new Uri(string.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);
        }
    }
}

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);

    if (i <= 16)
    {
        Tile tile = new Tile();
        Media media = new Media(imageUri, true);
        tile.Media = media;

        if (col % 4 == 0)
        {
            row++;
            col = 0;
        }
        tile.SetValue(Grid.ColumnProperty, col.ToString());
        tile.SetValue(Grid.RowProperty, row.ToString());
        this.LayoutRoot.Children.Add(tile);

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

    }
    else
        _images.Add(new Media(imageUri, false));

    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.