Silverword – updated prototype and new post’s on the way

Just letting you know that I’ve updated the Silverword prototype, and I’ll be adding it to CodePlex very soon! Sorry guys for the delay in updating my blog and this project. I honestly am trying to find the time to post and code!

The Silverword prototype is coming along nicely, in the last day I’ve cleaned up some controls and created some new ones like the “drop down list”. I’ll be uploading the code into CodePlex for those that want to participate in updating the prototype.

Here’s some screen shot’s of the new stuff I’ve added to Silverword, I have to stress that it is a prototype and that it is all just work in progress!

figure 1: Context menu control

figure 2: A place holder for a document with the “font tool strip” control, and “ruler” control  showing

figure 3: A first attempt at a “drop-down-list” control which can be found on the “font strip control”

Over the next couple of days I will walk through the logic behind some of the design choices I made in this prototype. I will try to include some video’s, and I’ll try to keep it in a format similar to the “iTunes project”.

You can check out the demo site here: SilverWord

You can download the source code from here: Source code

My next posting will be tonight. Stay tuned!

How will MS’s SilverLight controls cater for Designers and Developers?

 

Whilst working on the prototype of Silverword it became apparent to me that Microsoft have an insanely complicated task ahead of them in creating a set of framework controls that appeal to both designers and developers.

After I completed my first stab at the Silverword prototype it occurred to me that I could of created the solution several different way’s based on who I wanted to optimize it for, a designer or a developer.

Let’s take for example the way I did my “top menu – sub menu” controls. I went through three different designs before settling on the one that made it into the prototype.

In the end I chose to create 3 separate user-controls for each of the top menu-items. I favored the designer in me as the determining factor for the solution. Basically I wanted to give the freedom to the designer to creatively position each of the elements on the sub-menu the way they wanted. If they wanted to add icons or change font’s it was completely in their control.

The first solution I came up with for the “top menu” involved having an XML list of menu-items that I would programmatically iterate and create menu items from using a template menu control, this is very similar to the out of box visual studio menu controls (in the ajax toolkit and/or the standard controls). The solution was very biased towards the developer in me and it didn’t really give much freedom when it came to visual layout.

If you think about it visual studio with all it’s beautiful user controls are really designed with the developer in mind, it’s not a designers tool. There isn’t really anything in there to give designers freedom to make it look the exact way they want!

A designers tools are things like Photoshop, illustrator, expression design etc. So knowing what I now know great care should be taken when building framework controls in blend because it’s not as simple as portin visual studio controls into blend, it will fail to meet the needs of designers!

I now know the mammoth task ahead for Microsoft!

For all of you out there screaming for controls please please take the time to play with SilverLight and build your own controls. You’ll soon realize that it’s not as black and white as you may think!

Silverword – a prototype in the making

 

My approach to this project is going to be different to the iTunes one. Because of the nature of the original application “Buzzword” I am going to make Silverword a SilverLight only application (as opposed to mixing SilverLight elements with html/Ajax elements on the same base html page) that resizes to fill the entire browser real estate.

I’ve spent about 2 days dissecting Buzzword and working out how to make things work in SilverLight. The prototype that I’m about to show you is only half done but it has many elements that are worth talking about.

Without further adjure here is the link to the prototype for Silverword. It will form the basis of many future post’s, there are many elements in this prototype that still need working out and building, please be patient as it evolves over the following weeks.

SILVERWORD LOGIN – My SilverLight prototype of the cool Buzzword application begins with a login screen, most of the login page is just eye-candy but eventually It will allow text entry into the text areas and integrate with some authentication service. For now just click on the “sign in” button to proceed to the desktop.

SILVERWORD DESKTOP – This is the main work area, here you see the documents that the user has access to. The prototype demonstrates some important points regarding what needs to be built for this application. It shows the need for some common controls like

1) listitem – which in the picture represents a single document

2) top menu

3) context menu – which represents the menu associated to a document

4) toolbar menu – which displays buttons in a horizontal format, can be seen sitting under the top menu

5) button – can be seen at the bottom left “share” button

SILVERWORD DESKTOP 2 – This is another screen shot showing another framework element that will need to be built, the dialog/popup window (modal/non-modal).

My next post will take you through the beginnings of this prototype, the actual SilverLight application canvas and how it resizes to take the full size of the browser real estate. Future post’s will walk thorough each of the elements defined above, the goal is to create some sort of framework of controls that we can reuse across the application.

The prototype will continually evolve over the following days and weeks so keep checking it out!

The link to the sample site is here : SILVERWORD

As always here is the accompanying SOURCE CODE, enjoy and stay tuned for the next posting.

Buzzword – what a cool "Flash" web application

 

In a previous post I mentioned a cool flash application by the name of “Buzzword“. It is a killer web processor application that I’ve fallen in love with.

I use it everyday for storing and editing my documents. I’ll even go as far as to say that for most of the documents I create and edit on a daily basis I’ll use Buzzword in preference to MSOffice Word 2007.

Buzzword is only in preview but it behaves like an application ready for prime time. See some of the beautiful screen’s from buzzword below.

[Buzzword Login screen] - Buzzword if anything is a cleanly designed very aesthetically pleasing application. It’s fully flash and behaves beautifully to the touch. You can tell that a lot of effort went into the design process for the UX.

[Your documents sitting on your desktop] – The desktop shows all the documents that you have access to. It really is beautifully designed from a functional perspective. And the different views of the listings of documents is just “eye-candy bliss”. I love the desktop and I love the experience it conveys.

[Document opened and ready for editing] - the document editor is a masterpiece comparing it to other online text editors. Technically I have no idea how they did it but I can tell you that the overall aesthetics of the editor is perfecto! It behaves so beautifully when editing, as if you were using office’s word desktop application.

Microsoft you better stand up and take notice of buzzword because I truly believe this application could dethrone you in the mom/pop/teen word processing market! I can only imagine what buzzword will be like when it is made to work in FLEX/AIR and is marketed by Adobe.

So why did I blog about this application? I believe that this application will, in time, become a benchmark for all future web applications. It will be what others will be measured against. It really is a beautifully designed, at all levels, application that just makes sense!

I want to make a SilverLight version of this!

Over the next couple of weeks I’ll attempt to replicate this cool application in SilverLight, starting with a prototype of it. I’ll call this project “Silverword”

Stay tuned for my next post which will go through my prototype sample.

Update: DannyT correctly pointed out that Buzzword is actuall a FLEX application already, here i thought it was purely flash. That actually makes sense seeing how it behaves and delivers technically. Thanks for that!