Becoming a Devigner

Wednesday, 30 April 2008 08:46 by snyhol

People who can create an attractive UI (like a designer) and write code (like a software developer) are getting called various names... a lot of new names, like dev-igner, des-eloper, design-loper, designer-developer, creative developer, or integrator.  My favorite is "devigner." 

A devigner is someone who can work on both sides of the designer-developer workflow. Devigners have been described by Adam Kinney as people who design and develop, by Ryan Stewart as people who move seamlessly between their development tools and their design tools, by Heather Solomon as people who can bang out CSS and pretty graphics and turn around and fix the UI in C# code, can do up a fine front end, but actually understand the backend, and by Kevin Tate as someone how is in-between a 'designer' and a 'developer,' a design/developer hybrid.  Fernando Comet even declared the 5 Commandments of a Devigner.  

Here is my list that defines the skills needed to call yourself a well rounded devigner:

  • Emphasizes the user experience (UX)
  • Can create UI code
    • Uses "developer" or "designer" tools
    • Makes CSS, HTML, XAML, Flash, etc.
  • Can create backend code
    • Uses "developer" tools
    • Makes UI logic, business rules, database and web service interaction, etc.
  • Can create artistic graphic designs and has a good "design sense"
    • Uses "designer" tools
    • Makes bitmap graphics, vector graphics, etc.

In other words, a devigner is someone who is is skilled in UX, UI, software engineering and graphic design. 

How do you become a devigner?  Get training & experience in those four areas. 

What am I doing to become a well rounded devigner?

  • I've emphasized usability for years (i.e. Don't Make Me Think)... DONE
  • I've worked on UIs for years (both windows and web, now WPF and Silverlight)... DONE
  • My primary skillset is software development with Microsoft technologies (MCSD + MCDBA)... DONE
  • I've dabbled a little with Photoshop, GIMP, Paint.NET, Fireworks... FOCUS HERE!
To round out my devigner portfolio of skills, I am enhancing my design skills, specifically with the Expression suite of "designer" tools.  Expect to see some posts about them! 

With the industry's current emphasis on designer-developer workflow, there will be demand for devigners who focus on building good UX and are competent with both developer tools, like Visual Studio, and designer tools, like Expression Studio.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comparing the Differences Between Two Microsoft Word Documents

Friday, 25 April 2008 10:54 by snyhol

The other day, I sent someone a Word document for them to read and provide edits and comments.  Can you believe that they made the edits without using Track Changes or highlighting them at all.  They didn't even do the typical trick of yellow background or red font.  Their changes just blended into the text. 

I didn't have time to read them both side by side, manually scanning for the changes.  Even worse, if I did that, I might have missed a significant change.  I needed a tool that would compare these two files and show me where the differences were. 

Craig from codejacked described the available solutions for Word 2003 and earlier.  CharlesJBarry, a commenter on Gina Trapani of lifehacker's post on this topic, explained that Word 2007 included a compare feature

After looking around, I found these options for comparing the differences between Word documents:

  • Microsoft Word 2007's Compare feature (free if you own Word 2007)
  • Using a tool made for comparing the differences between text documents (free to $30)
  • Commercial Option #1: WorkShare Professional ($349)
  • Commercial Option #2: SoftInterface DiffDoc ($199 to $399)

More...

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Source Code Syntax Highlighting in Blog Posts with FormatToHtml

Thursday, 24 April 2008 18:31 by snyhol

Syntax highlighting makes a huge difference when reading blog posts!  However, given the limitations of HTML, this effect doesn't come easy.  A lot of really smart people have worked on solutions to this problem.  I looked at a few of them and decided to go with the FormatToHtml tool from Jeff Atwood at Coding Horror. 

When I looked at the tools, I was looking for something that would work with my specific situation:

For source code syntax highlighting, I considered the following tools:

I chose FormatToHtml because Jeff's utility gave the best output and was easy to use.  In the future, I may switch to something with fancy features like scrolling, line numbers, a copy to clipboard button, etc.   For now, I wanted a tool that gave clean and consistently styled HTML.  More...

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comparing the Differences Between Two Folders

Thursday, 17 April 2008 00:23 by snyhol

When writing a blog about the customizations I made to BlogEngine.NET 1.3, I wanted to see if I documented all of the code that I changed.  I needed to compare the code files I deployed to the server with the files I originally downloaded from the project website.  I wanted to see which files were missing, added, or different from the original files. 

I didn't have a diff tool that would allow me to easily compare the contents of two folders, traverse through all of the subfolders, let me know if files were missing in either of the folder trees, and also let me know if the contents of the files were different in either of the trees. 

I looked around and the best tools I found to do this comparison are:

  • KDiff3
  • Beyond Compare

Below, I provide detailed reviews of how a few products were able to perform the task of comparing the contents of two folders. More...

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:  
Categories:   Tech
Actions:   E-mail | Permalink | Trackback | Comments (0) | Comment RSSRSS comment feed

Math Terms and Formulas

Wednesday, 16 April 2008 23:54 by snyhol

Yep, my high school math teacher was right when he said that I would eventually use the skills he taught me.  At the time, I didn't know that it would be with a technology called Silverlight, while remaking a math based game, Asteroids.  I just dusted off my old Casio fx-7000G graphing calculator and started cranking out some calculations.  Can you believe it?

When writing line of business (LOB) application, I never really needed to use "advanced" math, like algebra, geometry, trigonometry, or calculus.  Really, the trick to writing business applications is capturing the correct data with the correct logic and enough usability. 

Then I discovered that developing video game applications is quite different because required the use of math functions to do things like drawing shapes, moving those shapes around the screen, and figuring out if those shapes bump into other shapes.  While I was re-learning high school math to help calculate the game's logic, I found some good links to web pages that clearly describe math terms and formulas.  Here are those links.

So, there you have it. Lots of math support to make those interesting and compelling video games work.  Let's go shoot some asteroids!  Who knew math could be so fun!!  What math resources do you use?

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   , ,
Categories:   Software Dev
Actions:   E-mail | Permalink | Trackback | Comments (0) | Comment RSSRSS comment feed

Dynamically Generating a PathGeometry

Wednesday, 16 April 2008 23:35 by snyhol

This post focuses on Silverlight 2 Beta 1.

I was following along with the Asteroids tutorial from Bill Reiss' Silverlight Games 101 blog.  I got to the post where he explained how to dynamically generate the asteroid shapes.  Bill was illustrating how to dynamically load, build, and inject XAML into an application.  This example used string building to create a Path object that defined the edges of the asteroid.  It worked, but I wanted to figure out how to refactor this control to use an object oriented approach. 

In the Silverlight.net forums, Yasser Makram provided exactly what I needed: a simple example for creating a Path object from code

I was able to define a "blank" Path object in the XAML that could be programmatically filled in. 

<Path x:Name="path" Data="" Stroke="#FFFFFFFF" Fill="Black" StrokeThickness="2" Width="40" Height="40">

Next, I was able to use the PathGeometry objects from code to build that asteroid!  Yes, I did.  (Notice that this is not a complete code sample - it even includes commented out lines from Bill's tutorial.)

//string pathXaml = "";
double[] lengths = { 1, 1, 1, .97, .97, .94, .94, .91, .91, .88, .85, .82, .82, .79, .76, .73, .61, .51 };
shuffle(lengths);

PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.Segments =
new PathSegmentCollection();

for (int i = 0; i < 18; i++) {
 
float degrees = i * 20;
 
Vector v = new Vector(degrees, radius * lengths[i], true);
 
if (degrees == 0) {
   
//pathXaml += string.Format("M{0},{1} L", (int)v.X + radius, (int)v.Y + radius);
    pathFigure.StartPoint = new Point(v.X + radius, v.Y + radius);
  }
 
else {
   
//pathXaml += string.Format("{0},{1} ", (int)v.X + radius, (int)v.Y + radius);
    LineSegment lineSegment = new LineSegment();
    lineSegment.Point =
new Point(v.X + radius, v.Y + radius);
    pathFigure.Segments.Add(lineSegment);
  }
}
//pathXaml += "z";
pathFigure.IsClosed = true;

pathGeometry.Figures =
new PathFigureCollection();
pathGeometry.Figures.Add(pathFigure);

path.Height = radius * 2;
path.Width = radius * 2;
path.Data = pathGeometry;

On a similar topic, Jeff Weber at farseer games explained that the PathGeometry is only available from the code behind if the Path is not created with the mini language.  He explained a workaround to force Expression Blend to generate the full PathGeometry in your XAML. 

So there you have it.  In Silverlight 2, you can create an entire Path object programmatically in the code.  In fact, I probably could have done that... built the entire thing from code and avoid the XAML altogether... but it was fun to explore the interaction between the XAML and the codebehind.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   ,
Categories:   Software Dev
Actions:   E-mail | Permalink | Trackback | Comments (0) | Comment RSSRSS comment feed

Keyboard Handling in Silverlight Games

Wednesday, 16 April 2008 23:32 by snyhol

This post focuses on Silverlight 2 Beta 1.

I was following along with the Asteroids tutorial from Bill Reiss' Silverlight Games 101 blog.  I got to the post where he explained how to use a custom KeyHandler framework to handle the keyboard events.  He was illustrating how to use a utility class to keep track of the KeyDown, KeyUp, and LostFocus events.  This class worked in tandem with a game loop mechanism to handle the "action."  By action, I mean things like moving the ship and collision detection, in response to user keyboard input.

My first reaction was that this framework was overkill.  It seemed like a lot of work just to handle keyboard events.  I tried doing it with a simpler method (like in Mike Snow's tutorial), calling the "action" code in the KeyDown event:

private void parentControl_KeyDown(object sender, KeyEventArgs e) {
 
if (e.Key == Key.A) {
    ship.Rotate(
ShipRotationDirection.CounterClockwise);
    vectorship.RotationAngle -= 6;
  }
 
else if (e.Key == Key.D) {
    ship.Rotate(
ShipRotationDirection.Clockwise);
    vectorship.RotationAngle += 6;
  }

 
if (e.Key == Key.W) {
    ship.Thrust();
    vectorship.Thrust();
  }
}

This simple code worked, but was not nearly as responsive as Bill's framework that used a game loop and a KeyHandler class.  My simple approach also did not handle multiple simultaneous keypresses very well.  For games, it was definitely not good enough. 

I was further convinced when Andy Beaulieu's Silverlight Rocks used a very similar strategy.  In fact, I was surprised to see that just Mike Snow's tutorial used simple keyboard event handlers.  Maybe his game will be turn-based and not an action game.

In summary, using simple event handlers will usually be good enough.  However, applications that depend on fast response times, like action games, will require a key handler and game loop framework like the one Bill Reiss shares in his tutorial.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   ,
Categories:   Software Dev
Actions:   E-mail | Permalink | Trackback | Comments (0) | Comment RSSRSS comment feed

Learning How To Make Games In Silverlight

Wednesday, 16 April 2008 23:30 by snyhol

Making video games should be a fun way to learn how to program in Silverlight, right?  Yep, that's right! 

I compiled a list of links to tutorials, blogs, open source games, and labs about learning to build video games in Silverlight.  Below is my list, along with my comments about the various resources.

The best tutorial I found was written by Bill Reiss from Blue Rose Games and Silverlight Games 101.  He is an MVP in Client App Dev.  He made a fancy imitation of Bubble Breaker (a Same Game clone) called Dr. Popper.  His tutorial walks you through remaking the game Asteroids while explaining Silverlight concepts and video game concepts like sprites, game loops, keyboard input, particles, vectors, and collision detection.  He started updating his original Silverlight 1.1 tutorial to comply with Silverlight 2. The Silverlight 1.1 tutorial still covers more topics than the Silverlight 2 tutorial. I would suggest starting with the Silverlight 2 posts and then going back to read the Silverlight 1.1 posts he hasn't upgraded yet.   That will give you the least headaches, but still allow you to learn all he has to teach!  The Silverlight 1.1 posts will give you headaches because they do not work with Silverlight 2.  Though the tutorial doesn't yet teach you how to finish building the game, he gives you almost enough to figure it out yourself.  For an even better learning experience, compare Bill's approach with Andy Beaulieu's Asteroids remake.

Mike Snow from Microsoft also started a Silverlight 2 game tutorial.  Mike's tutorial walks you through making a game called Silverlight Fireball.  You can see the game board in Part IV and a character in Part VII.  He still has several Parts left to write, so you do not get the satisfaction of finishing the game.  One exciting aspect of this game is that it will be multiplayer.    

The Farseer Physics Engine has been used to make some compelling Silverlight screens.  You can find this open source project on CodePlex.  Also visit the Farseer Games blog.

The Silverlight.net Hands-On Lab "Dynamic animations using the managed Animation API in Silverlight 2" (available on the Labs page or directly from Microsoft downloads) teaches you how to make a lawn mowing simulation.  The final product of the demo is kind of boring, but the concept has potential. Mads from Laumania said that there was another PopTheBubble MouseEvents tutorial, but it appears to be missing now.

The folks at Dr. Dobbs wrote a Silverlight 1.0 tutorial for making a bricks game, SparkleBall.  The tutorial is excellent, but the technology is old.

The Vertigo Software Lab has several sample applications that you can download and examine the source code. 

Andy Beaulieu did not write a tutorial, but he was kind enough to share the source for his nice looking games Silverlight Rocks and Destroy All Invaders.  He also wrote some blogs worth reading:

Cameron Albert also blogs about making Silverlight Games.

For 3D graphics engines, check out the CodePlex projects for Kit3D and Balder.

Of course, there is also Chris Bowen's Index of Silverlight Games (from June 2007).  Many of the games in his index are open source.

There you have it.  That's a lot of information to get through.  Lots of sample applications, tutorials, and people actively pushing the bounds.  Want motivation to build your own game? DevX and Microsoft just announced the RIA Run Competition to create a game in Silverlight 2 by May 15, 2008.  Good luck!

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   ,
Categories:   Software Dev
Actions:   E-mail | Permalink | Trackback | Comments (1) | Comment RSSRSS comment feed

Day 1 with Silverlight

Wednesday, 16 April 2008 23:26 by snyhol

Below, I share some of my impressions of Silverlight from my first day of using it.  More importantly, I share the educational links I found along the way.  My goal with this post is to provide a useful reference for others who are getting started with Silverlight 2 Beta 1...  and to create an online bookmarking service for myself, so that I can easily find these web pages in the future.

Let's start with those references first:

... and also links to some bloggers who are writing about Silverlight 2:

OK, now let's started with day 1.  First, review some basics about Silverlight and then get started with educational resources.

Silverlight Basics

The Fancy Microsoft Silverlight Overview includes a video and FAQ pages that share Silverlight goodness:

  • growth in internet usage and broadband penetration enables the RIA market <define RIA>
  • RIAs are being used in business apps
  • RIAs can deliver "at home, at work, and on the go" - to the desktop (Windows, Mac, and Linux )via Moonlight, web (Firefox, Safari, Internet Explorer), and mobile (Windows Mobile and Nokia S60)
  • Delivering a good user experience is profitable; users expect compelling content
  • Silverlight 2 Beta 1 comes with a Go-Live license!
  • Silverlight is a subset of WPF; specifically 3D and GPU rendering are not available in Silverlight
  • Silverlight runs on any web server, even Linux servers
  • Silverlight Streaming hosting is available from Windows Live

Scott Guthrie's First look at Silverlight 2 and Adam Kinney's My notes from the First Look at Silverlight 2 are worth reading.  The features I am most looking forward using to are the rich controls and base class library.  This combination means that I can now make a Silverlight application without HTML elements or JavaScript.  Hooray!  Goodbye browser code!  Hello RIA wonderland!  For example, Kathy Kam from the MSDN made a sample page to demonstrate the new controls.

Getting Started, Educational Resources

The Silverlight Community Get Started web page provides links to the latest versions of the tools you need to start working with Silverlight 2. 

I reviewed several resources for learning Silverlight.  They are listed in the order that I recommend them.  The resources toward the top were shorter and covered more basic topics.

  • Tutorials
    • These basic tutorials walk you through starting to develop applications with Silverlight.  The write up and accompanying source code can all be viewed on the web or downloaded.
    • Overall, these were pretty basic and a good introduction to Silverlight.  They only require Visual Studio 2008, so you don't need Expression Blend to follow along.  If you are coming to Silverlight directly from ASP.NET, WinForms, or some other technology, this is a great intro. In fact, this is also a great intro for those who are moving to WPF from another technology. 
    • Tutorial 3 lists the fonts supported by Silverlight 2 Beta 1.
    • Tutorial 4 shows how to bind Silverlight controls to the data returned from a WCF Web Service call (which could return anything, but in this case returns the results from a LINQ to SQL database query).  Bleeding edge stuff. 
    • Coming from WPF, I was able to quickly grok pretty much the entire series... my reaction was "I already know all of this." 
  • Scott Guthrie's 8 part tutorial Digg client sample 
    • This great tutorial seems to do a good job of explaining the big concepts and wrapping them up in a working application.  It walks you through using Visual Studio 2008 to build a Silverlight 2 Beta 1 application and then port it to WPF.
  • Hands-On Labs
    • The Hands-On Labs each link to a download that contains a write up in Microsoft Word 2007 .docx format and at least one Visual Studio solution.  Some of them require other tools to follow along, such as Expression Blend 2.5 or ASP.NET Futures.
    • If you're a Tim Sneath fan, the first Hands-On Lab was written by him.
    • They cover more advanced topics than the Silverlight.net tutorials.
  • QuickStarts 
    • The QuickStarts are kind of like topics from the MSDN Library, but easier to read.  They are full of information and references back to topics in the Library.  You only need Visual Studio to follow along.
  • Whitepapers
    • The whitepapers are actually just useful links to the MSDN Library or other Silverlight articles.
    • The Getting Started white paper uses Expression Blend 2.5 (and not Visual Studio).
  • How Do I Videos
    • The How Do I Videos were designed to be watched after completing the Tutorials. 
  • VisitMix
    • The Visit Mix website is full of great information, particularly videos from Mix08 sessions that you can watch. 
  • Silverlight 1.0 Fire Starter
    • The Fire Starter website provides one day's worth of videos with the goal of getting you productive quickly.  I suspect that it teaches you Silverlight 1.0.
  • ASPAlliance
    • The ASPAlliance article archive includes some whitepapers on Silverlight, mostly from Scott Guthrie's blog.
  • The Code Project
    • The Code Project article archive includes some Silverlight topics, but, as of today, none of them are about Silverlight 2.
  • nibbles
    • The nibbles website hosts video tutorials, mostly on Blend and Silverlight.

More Day 1 Thoughts

Overall, the experience building Silverlight applications will be a positive one.  It is almost the same as developing WPF applications.  Silverlight can be used to build make some really amazing stuff!  I am very excited to see where this platform goes over the next few years.  I am a big believer that RIAs are the future of web development.  Scott Guthrie said, "Note that all controls we put in SL we also plan to support in WPF going forward."  This is nice because it means that the work I put into building a screen in Silverlight should be able to be reused in WPF. 

Here are some things to watch out for:

  • The canvas control is confusing at first because it is invisible.  Temporarily give it a background color to see your working space.
  • The current Visual Studio read-only designer is annoying.  I miss drag & drop controls.  I really should use Expression Blend to build the initial XAML.
  • I also tried porting the XAML from my WPF data-centric app to Silverlight.  My form centered on a customized DataGrid type of control.  Note that the XAML does not easily port from WPF to Silverlight. 
    • There is no ListView control.  I needed to port my ListView code to use a DataGrid.  Read Scott Morrison's blog for tips on using the DataGrid.
    • There is no ContextMenu.  Silverlight does not natively support right-mouse clicks.
    • The ListView ColumnHeaderClick event did not port.
    • The EventSetter, set from Style did not port.

I also tried some online demos of 3rd party controls.  I found ads for these companies on the silverlight.net website. They have done some amazing things.  It will be fun to see what else they come up with. Below are some links to those 3rd party control vendors.

  • The ComponentOne demo showed some powerful controls.  I was especially impressed with the ReMix Agenda sample.  However, the Editable Datagrid sample was buggy and had poor scrolling performance. 
  • Intersoft Solutions has an impressive navigation control called WebAqua.  It's like a Mac dock panel with incredible visual effects.
  • Netika Tech made some nice Silverlight 1 controls
  • VectorLight has some responsive controls.

I encourage you to share the resources that you have found useful.  Silverlight here we come!!!

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   ,
Categories:   Software Dev
Actions:   E-mail | Permalink | Trackback | Comments (0) | Comment RSSRSS comment feed

Windows Live Platform (WLP)

Tuesday, 15 April 2008 16:17 by snyhol

I recently heard about the Windows Live Platform (WLP).  This describes cloud-based services from Microsoft that are available to web developers.  The developer page is at dev.live.com.  Many of the services are currently in beta.  The most exciting services center around Messenger (share this page with a friend), Search, Virtual Earth (maps), Silverlight Streaming (free video hosting with generous terms), and Application-Based Storage (cloud-based state management). 

On a geeky-cool note, this is also the dev center for Windows Live Writer and Web Gadgets. 

There is a Windows Live toolkit for Visual Studio 2008.

Have fun writing code with the cloud.  Please share your stories about using WLP.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   , ,
Categories:   Software Dev
Actions:   E-mail | Permalink | Trackback | Comments (0) | Comment RSSRSS comment feed