Category Archives: WPF

UI Design for Developers Series, by Total Training.

image

I’m at an internal conference at Microsoft this week and one of the sessions that I attended was called Practical Design tips and tricks for Developers. It was a set of hands on labs that were created out of the Expression team. It was really slick and I learned a whole lot of new techniques and am feeling a whole lot more confident in my Expression Blend abilities. The really slick part is that you get to work through those same labs if you are interested because they have been posted on Arturo’s blog.

This 13 part video series will walk you through creating a workable color palate with a range of colors which all work together, creating brush resource out of those, creating shapes all the way from simple straight and curved lines to glass button effects with the simplest possible steps and really sets you up with the basics of what you need to know. It was really cool to be able to walk through those labs.

The labs are as follows:

1Principles of Design Series:  Learning about Balance using Expression Design

2Principles of Design Series:  Learning about Rhythm using Expression Design

3Principles of Design Series:  Learning about Emphasis using Expression Design

4Principles of Design Series:  Learning about Symmetry and Asymmetry using Expression Design

5Principles of Design Series: Learning about Unity using Expression Design

6Principles of Design Series:  Learning about Points, Lines, and Form using Expression Design

7Choosing Colors to Complement Your User Interface with Expression Design

8 – Experimenting with User Interface Colors with Expression Design

9 – Creating Mosaic and Tiled Patterns using Expression Design
10 – Learning to Create Icons using Expression Design
11 – Creating a Sample Icon using Expression Design
12 – Designing a Glassy Button using Expression Design
13 – Applying Effects to Bitmap Images using Expression Design

 

For links to the videos and digital assets that you need to accomplish the the labs, check out Arturo’s post on it at ux.artu.tv » Blog Archive » New Video Series: UI Design for Developers Series, by Total Training.

Ann Arbor Day of .Net

Wow I’ve been swamped. There’s so much to blog about in the past couple of weeks so I’m just going to catch some of the highlights.

Ann Arbor Day of .NET was on 5/5/2007. It was fantastic! It sold out at 250 people and of that there were 210 people show up. That’s actually really good as most free events have a 40% droppoff and they had less than 20% droppoff. The only downside on the day was that with less than a 20% droppoff – pizza was a little short at lunch.

They are actually thinking about going to every 6 months instead of every 12 months. I think this would be fantastic!

I kicked off the day with a session on User Experience technologies at Microsoft. I borrowed from some of the materials that we are putting together for the upcoming ArcReady (Check the site for dates and times across the entire central region – Detroit on 5/25 in two weeks for all those that attended Day of .Net). We dipped into WPF, AJAX and Silverlight. My favorite demo is the Silverlight Airlines Demo. It shows a truly out of the box user experience that’s not all glitz and glammor but a truly solid UI for a true business application. Many of the demos, while showing off the platform really well, are marketing apps that show lots of 3D and animation. My customers often look at the glitzy demos and say that they are not doing 3D so they don’t look at the technologies. What they are missing is that there are real benifits here with enabling truly rich interfaces that go well beyond text and pictures.

I had two more 30 minute sessions. In both of those sessions the overwhelming requests were to have more Silverlight content. I had nothing prepared for these sessions but they went really well. In the first session, I pulled Don Burnett, who started Michigan Interactive Designers, out of the crowd and asked him to do a tour around Expression Blend and Silverlight. He got up, completely unscripted, and did a fantastic job! I will definitely be bringing him in to do more demos and presentations – especially when we have a designer based crowd. It turns out that he used to work with Bill Wagner (my former business partner when I was at SRT Solutions) on the Lion King Animated Storybook.

In the second session, I was on my own but I showed Top Banana, the DLRConsole (python and javascript version – IronRuby will be released as a CTP from CodePlex later this year) and talked about the .NET support in Silverlight 1.1 Alpha. Yes – I actually wrote some Python and did a simple overview for people at the conference. It was a fun day!

Here are some of the resources that we talked about during the three talks:

•Windows Forms @ .NET FX Developer Center
http://windowsclient.net

•WPF @ MSDN Developer Center
http://msdn.microsoft.com/winfx/reference/presentation/default.aspx

•.NET 3.0 (WPF, WCF, WF) Community Site
http://windowsclient.net/

•Silverlight
http://www.silverlight.net

•ASP.NET AJAX @ ASP.NET Developer Center
http://msdn.microsoft.com/winfx/reference/presentation/default.aspx

•ASP.NET AJAX Community Site
http://ajax.asp.net/

•DirectX @ DirectX Development Center
http://msdn.microsoft.com/directx/

•Microsoft Visual Studio @ Visual Studio Developer Center
http://msdn.microsoft.com/vstudio/

•Microsoft Expression
www.microsoft.com/expression

 

Day of .NET site

Link to Day of .Net in Ann Arbor 2007 – Home

Don Burnett’s write-up of the event.

Link to Don.NET’s WPF Designers Blog: Eastern Michigan Day of Dot Net

 

Open Source Project of the week – Witty Twitter

Witty is a free, open source Twitter client for Windows Vista and XP powered by the Windows Presentation Foundation (WPF).
Project Name: Witty
Project site: http://code.google.com/p/wittytwitter/
Language(s): C#, WPF
License: New BSD License
Source Host: Google code
Documentation: FAQ
Discussion Group: WittyTwitter
Owner: Alan Le

I have a stated and known addition to Twitter. And I’ve tried a LOT of different clients for it. Check out http://twitter.pbwiki.com/Apps for a huge list of apps that are out there. I started out using SMS but that became overwhelming pretty quickly. I have used Twadget, TeleTwitter, TwittIt, Twitter-Sync (Yahoo Messenger client), Twhirl and Snitter.

Witty, however, has been one that have kept my eye on for quite a while. It’s an open source project being worked on by Alan Le, Jon Galloway, Scott Koon, Keith Elder and a couple of other good guys.

It’s written in C# and WPF. It’s been a pleasure to watch it going from fairly rough to slick, stable and usable. The guys have gone back through the original and done a ton of refactoring and error handling to get it to the point that it is now.

Witty includes the following functionality: (from the project site)

  • View recent Twitter statuses from the people you follow (auto-refreshing)
  • View recent replies to you
  • View a specific user’s timeline
  • Update your twitter status
  • View and respond to Direct Messages
  • Links will open in the user’s default browser

Keith Elder hosts a ClickOnce installer that will keep you up to date as they continue to make updates and improvements. This is my preferred way to install it because it ensures that I’m up to date and it’s usually a very stable build. Unfortunately, the extra skins that are supposed to come with it don’t ship in the ClickOnce installer. There’s a bug in the skinning and they don’t load right. Alan Le is working on it and is refactoring the skinning to load the URI (uniform resource indicator) from an embedded resource file rather than individual files. Good advice from this article – http://msdn.microsoft.com/en-us/library/aa970069.aspx.

Licensed under the New BSD License, you are allowed to take the source and/or binaries and redistribute as long as you retain the copyright.

Feel free to jump in and discuss on the google group or

Witty Twitter 0.1.8.3 Published

Yahoo!

I woke up this morning to a very interesting email from Steve Ballmer conveying the fact that we had made a public bid to buy Yahoo! As I picked my jaw up off the floor, I noticed all of my standard news sources had it listed at their top story as well. This is cool because I had been working on a blog post about some of the REALLY cool things that Yahoo! has been doing.

image_thumb1 Yahoo has released the beta of their long anticipated Yahoo Messenger for Windows Vista application. I’ve been looking forward to seeing this application in the wild since I heard about it. This was actually a partnership between the WPF team at Microsoft and Yahoo to get this out. There are a ton of cool features liked tabbed conversations, a Vista Gadget to track friends and much much more. It hasn’t tried to be feature parity with the original Yahoo messenger, it’s a being unto itself.

I’ve had the good fortune to know Eric Burke from Yahoo who happens to be the technical lead on the Vista Messenger project. It turns out he lives in Novi, MI and manages a team in Palo Alto, CA. Guess how they do the majority of their communication… 🙂 I met Eric on the plane to MIX last year. I was wearing a Visual Studio jacket and he was reading MSDN Mag so we recognized each other as fellow geeks. We hung out quite a bit at the conference and have stayed in good contact in Michigan since then. Eric was the guy that, when he saw the Silverlight 1.1 (now 2.0) keynote, said “Hey cool – I’m a mac programmer!”. At the conference, he was speaking about the challenges that they have faced with building one of the premier WPF applications and working with the design team from Frog Design.

Eric said that it was really rough in the early goings because nobody knew how this was supposed to go. Microsoft had a good story for designer/developer workflow but nobody had actually done it yet. The first couple of times they really couldn’t use what the designers had tossed over the wall or it required such drastic changes to their code that it was painful. As time went on, they figured out how to get along better and better so by the time that MIX rolled along, they were able to integrate changes often in as little as 3-5 minutes first thing in the morning. I’ve also had Eric come out to a couple of different events to speak about real world experiences working with WPF. One of the things that challenging right now is that there are not fantastic tools for looking at the XAML and seeing what the redundant layouts are or where the memory leaks are.

Since it’s gone public, it’s been interesting listening to people’s reactions to it. One of the common ones is a complaint that it doesn’t support all of the features of the mainstream Yahoo! messenger application and it’s add-in model. I actually like that about it. It’s refreshing to see a company take a line in the sand and not be 100% backwards compatible and feature complete with the legacy applications. This is something that Microsoft never seems to be able to do. There was a fantastic ad that showed VS.NET 2005 and it said “with 400 new features, the difference is clear” and right next to that add was an ad for Sugar CRM that said “Back with fewer features than ever, the difference is clear”. And it’s true, the IM clients that have been around forever are full of features that nobody uses or are used by a small enough percentage of the audience that they are more of a maintenance burden than useful features. Now, it takes a lot of moxy to say that “I’m willing to forgo some of the legacy customers upgrading to do the right thing for the future and the application.” I hope that Yahoo! sticks to it’s guns on not trying to make the Vista client feature parity with the old client as they go forward. Obviously there are things that they will need to add, like VOIP and some type of add-in model, but what form that takes is going to be interesting to see.

I don’t know if the deal is going to go through but I hope that it does just to get this type of edgy and exciting decision making into Microsoft. I know that Steve Ballmer and crew are looking at the advertising, search and social networking properties as well all of which are substantial. I was looking at my traffic searches on my blog and Yahoo! searches accounted for a really solid portion of my traffic. Obviously it wasn’t equal to Google but it was still substantial. We’ve offered them $44.6 Billion which is a decent premium on their stock price. According to the NY Times, Yahoo! turned down earlier merger offers so I’m also really hoping that this doesn’t turn into an ugly hostile style takeover.

Yahoo! Messenger for Windows Vista™

Microsoft Makes .6 Billion for Yahoo – Mergers, Acquisitions, Venture Capital, Hedge Funds — DealBook – New York Times

Microsoft makes unsolicited $44.6 billion bid for Yahoo – Feb. 1, 2008

Continuum of Experience

One of the key messages that I’ve been talking about with a lot of my customers recently is a continuum of experience.

image_thumb[3]

It starts on the left with Web and it’s absolute ubiquity through HTML and CSS. This works on any device with a browser from a phone to any desktop and even a lot of computer based applications (such as search engines or spam email harvesting engines). The tradeoff is that the user experience is less than optimal. Billy Hollis calls it the Cobol of the web referring back to the old time green screens. Whether we like it or not, HTML not only has it’s place now, it’s going to continue to have it’s place long into the future. Unfortunately, one of the reasons that many applications go this direction is not because they need ubiquitous reach but rather because it’s easier on the IT department to deploy it. This makes things hard on the user. Oops. Things can get better with AJAX. At this point, you are sacrificing some reach for functionality as you are giving up phones, PDAs and older browsers. Often that’s an easy decision to make.

On the right hand side of the continuum is Platform Optimized. This is really giving up broad reach for absolute functionality. As an example, the Halo 3 team knew which video card was in the target machine so they could tailor the experience for the edges of what’s possible on that hardware. That’s a good position to be in when you can be because it means that you can create the absolute best possible experience available. However, it would be hard to take that same experience and put it on any laptop. Short of knowing what hardware you are targeting, look at the platform that you are targeting. If you know that your users are using Vista or XP with the Service Pack 2, you can target WPF, WCF and so on because you know that it’s on the box. Backing up from there, if you can target .NET on the box, great.

Somewhere between the Web and Platform Optimized is the Supplemented Web with Silverlight and Flash/Flex. This is an exciting frontier to be in right now bridging the gap. It’s not full ubiquity but it’s more reach than platform optimized and it has a far superior user experience than HTML and CSS.

Microsoft and Adobe are working from opposite angles here. Adobe, with Air, is trying to take this supplemented web development paradigm to desktop. It’s an interesting idea to be able to bring HTML, Flex/Flash, embedding PDFs and so on to the desktop. Microsoft, on the other hand, is trying to take desktop application development paradigm to the web with Silverlight.

I think that there’s room for every type of experience along the continuum but you really need to evaluate your skill set and what type of experience you want to target when starting an application. Today actually, I had a customer meeting where we talked about a blended approach where we build a simple ASP.NET application for their ubiquitous touch and then target a click-once deployable application for those clients that are able to leverage it. This would be a great move on their part as it would give the best possible UX for the greatest possible audience.

Microsoft ArcReady in the Heartland: Architecting for the User Experience

I’m starting the ArcReady tour in the Heartland District (Michigan, Ohio, Kentucky, Tennessee) next week.

We are talking about architecting for the user exerience which includes the decisions that you have to make along the way to creating a great user expeience. We will also be covering some of the technologies that Microsoft is producing to create great UIs which is a big part of the overall user experience. These technologies include WPF, AJAX and Silverlight.

I’m on the road for two weeks with ArcReady course of the next month.

Nashville – 5/21/2007

Louisville – 5/22/2007

Cincinnati – 5/23/2007

Indianapolis – 05/24/07

Detroit – 5/25/2007

Then I take a break and hit TechEd. Hopefully I’ll see you there. Come find me if you’re there too.

Then I hit the road again.

Memphis – 6/11/2007

Cleveland – 06/13/07

Columbus – 06/14/07

Grand Rapids – 06/15/07

 

Link to the official Microsoft ArcReady site 

Technorati tags: , , ,

MIX07 Keynote – Information Overload

BTW – long post! Too many announcements!

I’m just out of the MIX07 keynote featuring Ray Ozzie and Scott Guthrie (Yes I find it a lot of fun that the top guys at Microsoft on the technology side blog about what they are doing). I’m still trying to get my head around what I just heard. They have far exceeded my wildest expectations.

First – the client demos were sweet!

Neil Hunt of Netflix got on stage with some guys from Razorfish and demoed the great rich media and interactive video support in Silverlight. One of the cool things is that it was completely integrated into the back-end Netflix site for ratings, ordering and so on, has a chat app inside, collaborative movie watching where two people can watch the same movie from different parts of the world and it will keep them in sync and let them IM during the movie. That was cool and Netflix is a fantastic backer as they are very demanding on their systems and need the highest quality experience for their clients.

CBS got up and showed how they are integrating pro media with community contributed media tied to that pro media so that they can all of the sudden get content and points of view from an amazing number of sources instead of just their one camera guy.

Top Banana – I was already blown away when this section of the keynote came up. It’s one of the first managed applications with Silverlight and written with XAML and C# in Expression Studio, VS.NET and more. It’s a full blown video editor written in Silverlight. Wait – video editing in the browser? This is really blurring the line between desktop and web application. It’s only 50 kilobytes worth of payload to do all of the video editing. Yes – that’s 50k worth of code that’s downloaded. It does film stripping, frame by frame stepping, cutting, mixing, merging and everything that I could do with video. The did all of this in a month.

MLB.com are doing a ton with Silverlight as well. It has integrated overlays so you can watch the full screen video with overlays of your fantasy teams, pitch counts and more. It even ran on a phone! It’s a great experience and I’d love to talk more about it but I’m numb at this point with all the cool stuff.

Second – the Silverlight Beta (the cross-platform plug-in formerly known as WPF/e) is going to have much richer support for JavaScript and AJAX. That we expected and needed.

Third – there had been a lot of rumors and speculation about the next bit of business and that is that the Silverlight 1.1 Alpha is going to have the same exact CLR as the desktop version that allows you to leverage your existing .NET skills in VB.NET or C# to build RIA (Rich Internet Applications). Read that again slowly though. You will be able to write .NET to run in the browser on the client side of one of these RIA’s. In other words – you’ll be able to run .NET on a Mac in a Safari browser! That includes LINQ and the whole ball of wax! That just put Silverlight RIA’s in reach of any dev shops that are currently doing WPF with C# of VB.NET. And we are going to have support for Silverlight in VS.NET Orcas with a free download called the Silverlight Tools Alpha so we have proper tooling for the developers.

Fourth – The tooling is amazing. Expression Blend can export to XAML directly for Silverlight. That means that I’m not nearly as constricted by the limited number of controls and such that are available for Silverlight compared to WPF. It also manages and writes out all of your timelines, media integration, graphics work and so on. Expression Media does a great job of managing and encoding all of your videos. Expression Web has an AJAX Silverlight drop-in bit that can just drop in an RIA inside an existing application through drag and drop. As mentioned, VS.NET Orcas has support for development.

* Big point here * – Cross-Platform Debugging so you can do live debugging across the network to actually debug on the code that’s running on the Mac. You have access to the memory, objects, single stepping code and the whole nine yards! That’s amazing and it truly enables cross platform development!

* Another big point * – all of the tools from a SOAP perspective

Fifth – the Silverlight Streaming,  a companion service for Silverlight makes it easier for developers and designers to deliver and scale rich media as part of their Silverlight applications. Silverlight Streaming is a storage and video delivery service that will enable developers and designers to upload their application to Silverlight Streaming and then deliver this application to any website globally. Silverlight Streaming will provide 4GB of free storage as well as unlimited outbound streaming at 700 Kbps. For the first year, the service will be free. As the service moves out of beta it will be offered as part of the overall WL Platform offer, with continued 4GB free storage and free streaming up to 1 million minutes of streaming per site per month. Once a website goes over the 1 million minutes of streaming threshold, the site will have the option to take ads and revenue share or pay a small fee to help cover MSFT costs. Check out silverlight.live.com for more on this!

Fifth – and this one came out of the blue for me. The CLR will have full support for the DLR (Dynamic Language Runtime) including Iron Ruby, Iron Python and Managed JScript! Yes, you read that right – I had to ask for clarification when I heard about this too. You will be able to write your applications in C# or Vb.NET or Ruby or Python or Managed JScript! Sweet! That just put WPF and Silverlight (since it’s running the exact same CLR) in reach of any shop who knows XML so that they can write XAML and does programming. 🙂 I’m not saying that there won’t be a learning curve, but HOLY COW you can write Ruby to run in the browser on the client side of your application! For those of you who haven’t looked at Ruby and Python, you really need to take some time to delve into those languages and figure out some of the power and flexibility that dynamic languages bring to the table.

Sixth – Silverlight for Mobile!

Windows Presentation Foundation in Real World Development by Eric Burke

I’m out at MIX and got to met Eric Burke. Eric Burke is the lead developer on the WPF version of the Yahoo Messenger. It was fantastic! I was wearing a Visual Studio sweatshirt when I was getting on the plane in Detroit headed out out to Las Vegas. Eric spotted that and asked if I was going to MIX. We ended up hanging out a good part of the day. It turns out that he works remotely from Michigan for his team in Sunnyvale, CA. They have been working on a WPF version of the Yahoo Messenger for about 9 months now and have been knee deep in .NET 3.0. It’s been fun listening to the evolution of the application and the workflow with the design firm. He talked about how it’s been a fun and interesting ride.

I’m looking forward to seeing his presentations tomorrow and Wednesday. One’s called Windows Presentation Foundation in Real World Development. I did a small podcast recording with him that I’ll post in the next couple of days. He’s got a blogroll of a ton of blogs that he watches for .NET and WPF (Eric’s Blogroll) but you’ll have to listen to the podcast to get his pick of the top 3… 🙂

 

One other quick and interesting note – all of the sessions, including Eric’s, will be up on the web site for the general public in raw form 24 hours fter the session.

 

Technorati tags: ,