Silverlight Weblog Features Overview

Justin Angel picture

Justin
Angel

Hi folks,

Welcome to my new Silverlight Weblog!

Join me on a tour of the numerous features this blogging engine offers.

 

 

But first: Why Silverlight?

Simply put: my time is worth money.

Time is money

I blog as a labour of love, devotion and personal passion.
As such, I’d like to spend the minimum amount of time required to setup a blog.

Upon deciding to move out of my previous blog, I faced two prospects:

  1. Move to another HTML based weblog – which normally takes me a week (60 hours~) of fiddling around with HTML, CSS, Javascript and deployment.
  2. Recreate my blog in Silverlight – which I estimated would take about the same and I’d finally be rid of this horrible nuisance – HTML, Javascript and CSS.  

For me, it was an easy choice.

Now I get to experiment with which UI patterns work best for blogging.
Not just use the same handy down comprise-driven-UI I’ve always had.
Using accordions for the front page, expanding panels for comments, responsive user interface, and many others are just some of the benefits Silverlight afforded this blog. 

 

 

What Technologies were used?

Silverlight - User Interface front end.

WCF RIA Services - Server<->Client Communication.

PRISM – Commanding and Messaging support.

Managed Extensibility Framework (MEF) – Dynamically loading blog widgets.

ASP.Net Webforms & ASP.Net MVC – Processing client requests and returning shell HTML.

ASP.Net Dynamic Data (AJAX, Webforms) – The back office management portal.

WCF Syndication Services – RSS 2.0 and Atom 1.0 Feeds.

SQL Server 2008 – Database.

Entity Framework V3.5 – Data Access Layer. 

MSTest - Unit testing Server side.

Microsoft Silverlight Unit Testing Framework – Unit testing Client side.

RhinoMocks – Unit testing Mocking.

Unity – IoC Unit Testing framework.

3rd Party commercial component – rendering out HTML in Silverlight.

 Everything else – home grown.

 

 

Is Silverlight Weblog open source?

Yes. Get it @ http://SilverlightWeblog.codeplex.com under Ms-PL license.

 

 

Posting from Windows Live Writer

A major part of my workflow when authoring blog posts is using Windows Live Writer.
Support for Windows Live Writer is enabled through the Metaweblog API.

Here’s a sample blog post in Windows Live Writer:

Authoring a blog post in Windows Live Writer

After publishing this blog post to Silverlight Weblog it’ll render out as expected:

The Blog post displayed live

 

 

Hierarchical Blog Categories Widget

When posting from Windows Live Writer the blog post author can tag blog posts.
The Silverlight Weblog blogging engine support endlessly nested hierarchical categories.

Selecting a Category in Windows Live Writer Silverlight Weblog Category Tree

The Print screen above shows 3 levels of Categories, but in theory the blog supports infinite nesting.

Blog post Categories list

Clicking on a Category Link in the Categories Tree or In a Blog post would navigate the user to a list of all blog posts in that category.

 

 

Hierarchical Comments

Silverlight Weblog supports leaving infinitely nested comments on blog posts.
Having properly nested comments elevates the mess of replying to 6 people in one comment.

Sample of 6 comments in Silverlight Weblog 

 

As you can see from the above print screen each comment is accompanied with a Gravatar and can be infinitely nested to a parent.

 

 

RSS 2.0 and Atom 1.0 Feeds

Silverlight Weblog supports RSS and Atom feed formats through the Links Widget.

The Links Widget

Here’s a print screen of the main blog RSS feed:

RSS Feed Print Screen

Moreover, Silverlight Weblog supports RSS/Atom feeds for each individual category:

Categories Tree displays RSS Buttons

Clicking the RSS Icon next to each category would provide the user with a link to it’s RSS link.

 

 

Twitter Integration

Silverlight Weblog displays the latest non-reply tweets from the blog author on the Sidebar.

Twitter Widget in normal mode

When mouseovering the Twitter widget it smoothly expands it’s vertical height to accoemdate easier reading.

Twitter Widget in expanded mode

At the end of each blog post, it is suggested to the user to retweet this blog post:

Twitter This blog post link

Clicking the “Twitter this blog post” link would open up a new tweet on twitter.com.

New Tweet on Twitter com

 

 

User Friendly URLs

Silverlight Weblog generates easy to remember user-friendly URLs.

This enables people to easily link to your Rich Internet Application and have it load up the relevant blog post.

Demoing a Permlink

 

 

Single and Multi-user Support

When hosting blogs, some blogs are meant for only one user while others are used by multiple users.

Silverlight Weblog supports both schemes with it’s easy to customize UI and user-relevant URLs.

User individualized home page

User individualized RSS feed

In the print screens above it’s easy to see how the blog supports multiple users through a convenient URL schema.

 

 

Authoring Rich Content with Macros

When authoring blog posts It’s always helpful to introduce richer content.

Macros translate text into visual elements.

 

For instance, the following macro (presented here as an image) would translate into a video player:

[SimpleVideo:source=http://mschannel9.vo.msecnd.net/o9/mix/09/wmv/key01.wmv | width=650  |height=400]

[SimpleVideo:source=http://mschannel9.vo.msecnd.net/o9/mix/09/wmv/key01.wmv|width=650|height=400]

 

This next macro will translate a literal string into a Visual XAML element:

[Xaml:string=<Rectangle Width="250" Height="250" Stroke="Black" StrokeThickness="1" Fill="Red" />]

[Xaml:string=<Rectangle Width="250" Height="250" Stroke="Black" StrokeThickness="1" Fill="Red" />]

 

And this last built-in macro would load up an external XAP file and present it’s main visual element:

[Xap:source=SilverlightTestApp.xap | type=SilverlightTestApp.MainPage]

[Xap:source=SilverlightTestApp.xap|type=SilverlightTestApp.MainPage]

 

 

SEO (Search Engine Optimization)

Silverlight weblog is fully indexable by Google, Bing and Yahoo.

Each Silverlight weblog has a Robots.txt and a Site Map which lets the search engine know of the available blog posts.

Silverlight Weblog testing Sitemap

Each blog post page emits the proper HTML as to be indexed by google and accessible to disabled users.

In the following print screen you can see the Text-Only Webrowser Lynx fully reading the content of a Silverlight Weblog blog post:

Text view of Lynx Silverlight Weblog

If you’re interested in this SEO technique you can read more about it at Brad Abrams’ blog post.

 

 

Deep Linking and Back/Forward Support

When navigating in Silverlight Weblog the URL Anchor fragment changes accordingly.

Which enables Silverlight Weblog to support Refresh, Back and Forward uses.

 

Search Deep Linking

Search Deep Linking

 

Category Deep Linking

 Category Deep Linking

 

Blog Post Deep Linking

 Blog Post Deep Linking

 

Home Page Deep Linking

Home Page Deep Linking

 

 

Google Analytics Support

Every user action performed in Silverlight Weblog can be logged into Google Analytics.

Google analytics custom actions

In the above print screen there’s a list of all User initiated actions (which did not cause a server postback) and have been logged in Google analytics.
Primarily, Loading Blog Posts, Performing Searches, Leaving Comments, Viewing categories and other user initiated actions.

 

Silverlight weblog also supports drilling down into specific google analytics data.
Here’s a drill down of which searches were performed and which categories were viewed:

  google analytics searches breakdown google analytics category views breakdown

On the left there’s a list of search terms searched, and on the right a list of categories viewed.

 

 

Management Back office

Using ASP.Net Dynamic Data an easy to use back office is generated for silverlight weblog.

image

 

 

Extensibility

Silverlight Weblog is fully extensible.

Each piece of the UI is considered a Widget and each response is an independent Service.
Widgets and Services communicate through Messages.
Both of which are loaded dynamically by MEF which ends up composing the UI.

I’ll go into greater detail on this topic in future blog posts, but here’s an easy to understand breakdown of the UI:

Extensibility Silverlight Weblog overview 

Implementing custom Widgets and changing the default layout and behaviour is much easier than it appears to be.

 

 

Personalized Widgets

Through the Extensibility mechanism in Silverlight Weblog I easily implemented two of my favourite widgets.

Picture Sidebar Widget Business Card Widget

 

 

Custom Get Silverlight Screen

When first approaching a Silverlight Weblog, users will get an easy to understand “Get Silverlight” screen.

Custom Get silverlight screen

 

 

Customized Splash Screen

Silverlight Weblog supports changing the default loading splash screen into a more relevant user exprience.

In my case I wanted to let people know they were going into my blog.

Custom Splash Screen meant to scare little children away

 

 

Fin

There are many other features included in Silverlight Weblog.

Hopefully this first Silverlight weblog blog post was enough to give you a quick overview of this project.

 

One final note is I’d like to thank all Beta Testers who took part in making sure Silverlight Weblog actually works:
Scott Hanselman, Rob Eisenberg, Velvárt András, Yasser Makram, Rui Marinho, Ian Smith, Juan Puebla, Mark Woodhall and Jim Wightman.

 

Feel free to leave a comment and let me know your thoughts!

 

Sincerely,

-- Justin Angel



Comments