SharePoint Blog vs Wiki Smackdown

A case study:

Building a Knowledge Base Solution on top of SharePoint 2010?

Slideshare v1.9

A case study:

Building a Knowledge Base Solution on top of SharePoint 2010?

Adam Cogan

Chief Architect at SSW

Microsoft Regional Director

@AdamCogan

Delivering Awesome Web Applications

Agenda

The importance of a KB

Key Requirements

‘Nice to have’ requirements

The Importance of LiveWriter (the Rich Client)

Blogs vs Wiki

Alternatives

The 4 SharePoint Alternatives

Conclusion

The Future

Knowledge Bases!

Easy to manage• Add• Change• Remove articles

Easy to search and find Nice URLs

What are we talking about?

Colin Wood

http://support.scinaptic.com/

Thanks to...

Chief Architect at SSW

Developing custom solutions for businesses across a range of industries such as Government, banking, insurance

Microsoft Gold Partner

Microsoft Regional Director

VSTS MVP

@AdamCogan

About Adam

The Importance of a KB

A bug report...

In the normal world, we hope for a response like this:

Support Response

From: [email protected]

Thank you for reporting this error. To prevent future errors, we recommend you ensure all your drivers are up-to-date. Unfortunately, we are unable to address your more serious psychological problems.

Have a good day,BillAdobe Support

Do you use balloons in screenshots instead of a 'Wall of Text'? 

http://sharepoint.ssw.com.au/Standards/Communication/RulesToBetterEmail/Pages/HowToUseBalloons.aspx

A better way...

Customer sends Question

Answer with URL

http://sharepoint.ssw.com.au/Standards/Management/RulesToSuccessfulProjects/Pages/KB.aspx

Knowledge Base... A better way

Responding to a known issue with a KB article 

Sample Response 1

Dear Harry,

Thank you for taking the time to report the issue for SSW Code Auditor. I'm happy to let you know that this is a known issue and has been addressed in our knowledge base. Please see http://www.ssw.com.au/ssw/KB/KB.asp?KBID=Q260000 for details.

Kind Regards,Bob

Responding when you cannot reproduce the issue

Sample Response 2

Dear Harry,

Thank you for taking the time to report the issue for SSW Code Auditor.

I am sorry to let you know that I cannot reproduce this. Could you please provide me with more details, or even better would I be able to connect to your PC - it is simple and you can see everything I do. To do so, you can send me an appointment for an appropriate time or add me to your MSN Messenger, my address is xxx@s*w.com.au

P.S. Don't forget to run SSW Diagnostics, ensuring that you only get green ticks.

Kind Regards, Bob

Informing of a Fix

Sample Response 3

Dear Harry,

Done. The code changed from

xxxtoyyy

Thanks for reporting this bug - our software gets better with help from every customer like you.

This fix will be available in the next version shortly.

Kind Regards,Bob

Note: In this email, you can offer them an interim build

Informing of an update

Sample Response 4

Dear Harry,

Thank you for taking the time to report the issue for SSW Code Auditor. I'm happy to let you know that this problem is fixed in this release.

Please download the new version at http://www.ssw.com.au/ssw/Download/download.aspx

P.S. Don't forget to run SSW Diagnostics and gets all green ticks www.ssw.com.au/diagnostics

Kind Regards, Bob

?

SEO – Nice URL, nice title tag

Clipboard functionality like in Word

Copy-Paste Images

Ribbon bars with easy formatting (h1, h2, h3 etc)

Key Requirements

Nice HTML

No Word-inserted CSS! ...

Key Requirements

Ordering by ‘category’

Not date ...

Key Requirements

Comments

Can group KB article in multiple categories

Publishing/Approval Workflow

Sort by rating and popularity

Image handling

ie. renaming ...

“Nice to have” requirements

The Importance of LiveWriter (the Rich Client)

Live Writer Extensions

...

LiveWriter has two big holes

No ‘save as’ to move the image locally

No ‘Save as HTML file’

Blogs vs Wiki

Create blog

Create content Categorize into at least 2 Check Image Check URL

Repeat for Wiki

SharePoint Blog vs SharePoint Wiki

On blogs

But not good enough

None on Wiki

only for internal users called 'Note Board' that display on their mysite

...

Verdict on Comments

Verdict on Comments

SharePoint 2010 Wiki’s don’t have a commenting system

SharePoint 2010 Blogs have an ordinary commenting system (no threading, no spam detection etc)

Suggestion to Microsoft: built in web part to add one of the main 3rd party commenting systems:

www.Disqus.com www.IntenseDebate.com www.aboutecho.com How could Microsoft solve this... (two ways)

How to Solve the comment problem

Option 1

Insert a web part called DISQUS comments

Option 1:Install a SharePoint feature that

In page layout dropdown

Select a 4th layout 'Basic Page with DISQUS‘

...

Option 2:Install a SharePoint feature that

Option 2

On blogs - missing

On Wiki – doesn’t save (WTF?)

Verdict on Ratings

Blog- http://adam-sp2010demo/sites/TJsBlog/Lists/Posts/Post.aspx?ID=2

Wiki with spaces – http://adam-sp2010demo/sites/TJsWiki/Pages/Two%20Must%20Have%20Tools%20for%20a%20More%20Readable%20Web.aspx

Wiki with dashes - http://adam-sp2010demo/sites/TJsWiki/Pages/Two-Must-Have-Tools-for-a-More-Readable-Web.aspx

Verdict on Url Problem

SEO marketers want to stuff different keywords into the:

Page Name, Page Title, URL and Meta Description Problem.

SharePoint 2010 Wiki’s assumes the same text in first 3 and offers no way of editing the ‘Meta Description’ tag.

This is an incorrect assumption and should be fixed in SP1 (if Microsoft wants to get it used in the CMS world). http://www.ssw.com.au/ssw/Standards/BetterSoftwareSuggestions/SharePointTeamServices.aspx#WikiSEO

...

SEO – Page Name, Page Title, URL and Meta Description Problem

Keep these 2 the same Let me change the

URL

Alternatives

?

Alternatives

WordPress

Wiki – Screwturn Wiki

SharePoint Wiki

SharePoint Blog

...

Alternatives

WordPress

WordPressNice URLs

LiveWriter

Wiki (over Blog)

Minimal Customization - Need to add a view (not sorted by date)

PHP

User Experience is consistent with intranet

Rating System

Integrated Authentication

Found using SharePoint search3/9

Wiki – Screwturn Wiki

Screwturn WikiNice URLs

LiveWriter

Wiki (over Blog)

Minimal Customization - Need to add a view (not sorted by date)

.NET

User Experience is consistent with intranet

Rating System

Integrated Authentication

Found using SharePoint search5/9

SharePoint Blog

SharePoint BlogNice URLs

LiveWriter

Wiki (over Blog)

Minimal Customization - Need to add a view (not sorted by date)

.NET

User Experience is consistent with intranet

Rating System

Integrated Authentication

Found using SharePoint search5/9

SharePoint Wiki

SharePoint WikiNice URLs

LiveWriter

Wiki (over Blog)

Minimal Customization - Need to add a view (not sorted by date)

.NET

User Experience is consistent with intranet

Rating System ?

Integrated Authentication

Found using SharePoint search8/9

SharePoint Wiki!

Winner is...

The 4 SharePoint Alternatives

PROBLEM!

Can’t use Wiki with LiveWriter!

1. Live Writer - Publishing to SharePoint Blog Site

2. Word 2010 - Publishing to SharePoint Blog Site

3. Live Writer - Publishing to SharePoint Wiki Site via Blog

4. Rich text editor - Directly in SharePoint Wiki Site

Options

...

1. Live Writer - Publishing to SharePoint Blog Site

Open Live Writer and Add Blog Account:

1. Connecting to SharePoint

1. Add the URL to your SharePoint 2010 Blog Site

Connecting to SharePoint - Done!

1. You will be prompted whether you wish to download editing theme from Blog site

File New Blog post

Publish

1. Creating Simple Post - Live Writer

1. Blog post on SharePoint

Copy from Word to LiveWriter (Ctrl+Shift+V)

1. What about existing Word docs?

"It seems hit or miss whether the images come into Live Writer"

Copy and Paste separately

1. Images from Word?

1. Live Writer - great for image editing

Migrated Word doc

Each image as an attachment to the Blog Post Item

This is great - Post + images live as 1 unit in SharePoint

Good for moving and migration Deleting post, everything is gone

1. How Live Writer publishes images in SharePoint Site

Live Writer is simple to use

Feature packed Rich Text Editing

Copy and Paste directly from clipboard (SnagIT straight into Live Writer Rich Text Editor)

Familiar office ribbon in version 2011

Preview your blog post within Live Writer with the styles from your SharePoint blog site

1. Advantages

No nice URLs

Can only publish to SharePoint Blog Sites not Wiki Page libraries.

Customisation needed (need time/budget)

Versioning / publishing controls

Wiki has better out-of-the-box which blog sites do not have.

Separate application on the desktop required (minor)

1. Disadvantages

Not recommended

1. Conclusion

2. Word 2010 - Publishing to SharePoint Blog Site

Word 2010 has in-built Blog publishing capabilities

Allow us to publish our existing Word formatted KB articles relatively seamlessly

2. Connecting to SharePoint

2. First time

2. Choose SharePoint Blog

2. Enter URL of SharePoint Blog Site

2. Enter a Post Title

2. Publish

2. Word Document will be updated to reflect the published state of the Document

2. Go to SharePoint

Word 2010 creates new images in the Photos library of the Blog site with a unique name and references them in the Blog Post

2. How Word 2010 publishes images in SharePoint Site?

Images randomly named in folder

Association to blog post?

Suggestion to MS: Fix this so that it is the same as the Live Writer approach and is consistent across their products.

2. Images - No good

Customize Site HomePage to change the Webpart display(s)

Posts are listed top to bottom by default so probably some user interface modifications required

Have to decide if we need the ‘Comment’ functionality on existing posts

Theme and Brand the Site (MasterPages) CSS etc. to look similar to current WebSite

Add search capabilities to Site

If Search Server Express 2010 is used, add Search Webpart to Homepage

Work out URLs to be used and how it can be achieved in SharePoint

2. Additional Development Tasks Required

Word 2010 publishing is better for Publishing / migrating existing articles as it is more seamless and is quicker to get them into SharePoint

Use Word for the rich text editing experience which most users are familiar with

Spell check is awesome

2. Advantages

Word 2010 adds a lot of unnecessary styling

Some functionality in Word 2010 will not be supported in Blog Site

Not easy to re-style blog posts once created – no CSS classes referenced (this is the same for the blog post).

2. Disadvantages

Not recommended

2. Conclusion

Ultimate solution!

Use LiveWriter to publish to blog and then to wiki

3. Live Writer - Publishing to SharePoint Wiki Site via Blog

Nice URLs

Each article is a page that can have a proper URL with no URL rewrites

3. Benefits of the Wiki

Publish to a blog site

Copy the content from blog item

Paste to Wiki Page

Move images into a image library

Fix the image links

Delete blog item

3. There is no direct route

Copy and paste the text into the Post title as well.

The reason we do this is so that we can click to open the blog post when published to blog site:

Create a sub heading called Issue and set its html style to Heading 3

Type your text in normal paragraph style:

Paste screenshots into Live Writer

Select the image

Change the picture to original size

Publish

SharePoint

Open up the actual blog post

Edit the post

Copy Body content

Navigate to the Support Wiki Library

Create new page

Give the page a name - the KB article number

Paste the contents of the blog post into the editor

The article will retain its formatting form the blog post and will now be visible in the editor of the wiki page:

The hack

Remapping images...

When the blog post was created the screenshots were created as attachments to the Post List item. Yes we could leave them there and maintain the link form the wiki page to them but we probably want to copy them off to the Site Assets library in the Team Site and change the image source links to point to Site assets

Move images to Site Assets do the following

Open up SharePoint Designer 2010 and open up the blog Site and the main team site so that they appear as separate windows (so we can drag drop between them). Potentially you could up up two browsers in explorer view of blog and KB library.

All Files view

Go to the All Files view and Select the images from the posts list (you need to know the list item ID of the blog post) and select copy

Got to the SharePoint Designer window where the Support Site is Open and navigate to the Site Assets library and select paste

Go back to your Wiki Page in Edit Mode and Switch to Html Source Mode

Change all URL references to be relative to the 'Site Assets Library' within the team site:

Publish

Done! ;-)

Article is published

To modify UnPublish Make changes Republish

Can use Live Writer as the editing tool which is focused on creating blogs/articles in a rich text editing environment

Using the benefits of Live Writer publishing with the benefits of a Wiki Page

3. Advantages

A “few” steps involved...

Very manual process remapping / moving images which kind of defeats the point of easy content editing

Suggestion to MS: Allow the ability to directly publish to a Wiki from LiveWriter.

3. Disadvantages

Not recommended

3. Conclusion

4. Rich text editor - Directly in SharePoint Wiki Site

Assuming you want to use SharePoint Foundation, you can’t use Enterprise Wiki

No ratings No tagging

Use the Team Site with Wiki Library

4. Wiki Options SharePoint Foundation 2010

Create a standard Team Site in SharePoint Foundation

Create a Wiki Library

This will take you into Rich Text Edit Mode for editing page.

Click icon to add chart

4. Rich Text Editor - Blog

Click icon to add chart

4. Rich Text Editor - Wiki

Apply styles to text

Spell check your content (sux)

Insert and format tables

Embed graphics or video

4. The Rich Text Editor

Spell check not as good as word

Need to manually check it http://www.ssw.com.au/ssw/Standards/Rules/RulesT

oBetterTechnicalDocumentation.aspx#WordSpellingAndGrammarChecker

4. The Rich Text Editor

But...

4. Done!

4. Layout is ugly

RTE (Rich Text Editor) CSS classes

...

4. Identify CSS classes

format .ms-rteElement

How styles/themes work

If you have no site them applied to a site (default – no theme)

CSS files are resident in the 14 hive (SharePoint 2010)

Once you apply a theme the CSS files are auto-propagated to themes folder of the site and you can modify the CSS form here

How do you customize...

4. Identify CSS classes

1. Apply a theme to the site and customise the CSS file associated with the site theme which is stored in the themes directory of the site

2. Add a custom CSS file to the Site Assets library of the SharePoint Foundation 2010 site and reference the CSS by creating a custom masterpage with a CSS reference. This masterpage can then be set as the Site masterpage.

3. Directly modify the CSS files in 14 hive on server (access not available to do this and not a good approach) if no site them used.

...

4. Customising the RTE Styles of the Wiki Editor - 3 options

Go to the themes folder and open up the corev4-XXXxxx.cs and modify the RTE classes

This approach is flawed in that if revert back to the default (i.e. no theme) all your CSS is lost and also if you change theme all your ccs is lost.

...

4. Option 1 - Change theme

Copy and paste the v4.master in SPD and give it a new name

4. Option 2 - Link to custom CSS

Create a CSS file in notepad and save it with a .CSS extension. Add the CSS RTE styles you wish to change i.e. H1 0r H2 etc. Upload this file to the Site Assets library of the SP 2010 Team Site.

Open up MasterPage and add CSS reference in the head content as below (note no publishing infrastructure so you cannot use the spURL tokens):

4. Option 2 - Link to custom CSS

CSS remains regardless of changes to site them and 14 hive file changes.

Better than option 1

Also now that we have a masterpage for the site we can add another essential modification to a hosted SharePoint site which is Fix “Active X” warning on opening the site

http://www.getsharepoint.com/blogs/ms/

...

4. Option 2 - Benefits

Not an option in a hosted environment

4. Option 3 - Directly modify the CSS files in 14 hive on server

Go to Versioning settings of Wiki Library and turn on versioning with major and minor version s and require content approval:

4. Publish/Version

Add new page

Add images you have to upload – they are put into a folder for the wiki page in the site assets library.

To add images you have to upload separately

They are put into a folder for the wiki page in the site assets library

4. Images?

Full control of editing experience

Nice URL structure without the need for URL rewrite code which is required for blog

In-built publishing/versioning

Adding a new masterpage for CSS and removal of active x warning gives even more customisation options such as moving the location of the search bar to more prominent location which is essential for a KB Site. The default search location is not obvious in SP 2010 Foundation team sites

Images uploaded to Site Assets in a folder specifically for Wiki Page

No additional software install required (minor)

4. Advantages

No copy and paste images from the clipboard

No use of multiple content types in Wiki Library for Pages http://office.microsoft.com/en-us/sharepoint-server-help/turn-on-support-for-multiple-content-types-in-a-list-or-library-HA010378236.aspx

4. Disadvantages

Recommended

4. Conclusion

Conclusion

Rich text editor - Directly in SharePoint Wiki Site

Conclusion

The Future

This right click menu makes working with images a nasty experience ...

Live Writer is no panacea until they fix the big holes in handling images

we need a right click menu item on the image ‘convert to local image’

...

Write a web end point that tricks Windows Live Writer to think it's talking to a blog server (but saves it to file instead)

http://www.hanselman.com/blog/TheWeeklySourceCode55NotABlogALocalXMLRPCMetaWebLogEndpointThatLiesToWindowsLiveWriter.aspx

The Future

Summary

The importance of a KB

Key Requirements

‘Nice to have’ requirements

The Importance of LiveWriter (the Rich Client)

Blogs vs Wiki

Alternatives

The 4 SharePoint Alternatives

Conclusion

The Future

Thank You!

Sydney | Melbourne | Brisbane | Adelaide

[email protected]

Find me on Slideshare!

http://www.slideshare.net/SSWConsulting/