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.
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:
- Move to another HTML based weblog – which normally takes me a week (60 hours~) of fiddling around with HTML, CSS, Javascript and deployment.
- 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:
After publishing this blog post to Silverlight Weblog it’ll render out as expected:
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.
The Print screen above shows 3 levels of Categories, but in theory the blog supports infinite nesting.
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.
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.
Here’s a print screen of the main blog RSS feed:
Moreover, Silverlight Weblog supports RSS/Atom feeds for each individual category:
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.
When mouseovering the Twitter widget it smoothly expands it’s vertical height to accoemdate easier reading.
At the end of each blog post, it is suggested to the user to retweet this blog post:
Clicking the “Twitter this blog post” link would open up a 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.
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.
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]
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" />]
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]
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.
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:
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
Category Deep Linking
Blog Post Deep Linking
Home Page Deep Linking
Google Analytics Support
Every user action performed in Silverlight Weblog can be logged into Google Analytics.
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:
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.
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:
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.
Custom Get Silverlight Screen
When first approaching a Silverlight Weblog, users will get an easy to understand “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.
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