I’m sure most of you developers have already heard a lot about IE8’s web slices feature which is great for users of your website. At the time of writing this article the examples on the web and MSDN were not suitable for high traffic, CMS driven websites as they dont take operational impact (server load/traffic) or long term maintainablity into consideration. In the step-by-step guide I have put together below I have described how we implemented web slices for ninemsn.
Step 1: Web Slice Setting
Before you proceed you need to work out what the primary settings are for your web slice.
These are the most important settings you will need to work out:
Web Slice content (from Main Page)
You need to work out which section of you web page (we will call this the Main page) you want to convert into a web slice. Pick a section that updates regularly and something you feel a user will benefit from subscribing too.
Display Page URL:
This will be the URL to a basic, light weight page that will contain the same content as section in your main page that you want to slice.
This will also be the page the user will see when they click on the web slice from the browser bookmarks area.
It’s important that any update to content on your main page be also reflected immediately on the Display page. In the case of a CMS or Database driver site, the backend call to this content should be the same for both your main page and your display page, in order to have both pages always synchronised.
Time To Live (ttl):
How often the browser polls your web slice content page (display url) to check for updates
Bookmark URL:
When the user clicks on the arrow at the bottom of a web slice, which URL should the browser open. (Ideally this will be the URL to the main page)
Web Slice Title:
The title of the web slice, this is what appears in your browser bookmark area.
Step 2: Display Page Container
Next you need to code your Display Page to follow a similar html container as below that will be used by the web slice engine to handle proper behaviour.
Things to note this in this code are:
This is the most important section. This is the feed url, which is used by the browser to convert a initial snap shot of your display url content and store it in ATOM format to be used in comparisons for update. You don’t need to worry about how it works, but you need to set it up properly. The #todays-highlights is simply a pointer to the div in the display page (
Conslusion:
This is all your need to do to get complex web slices working on your website. The architectual design followed above was decided for our website as we have a very large user base (extreamly high server load) and content that updates very frequently (every 15 mins at least). So by following this Alternative Update and Display Source design we keep the load on our servers to a minimum and have a reuseable and maintainable solution.
Alternative Update and Display Source Design
Finally:
At the time of writing this article and implementing web slices for our web site there were not many documents or examples out there to help you get started. But here are some we used to get going.
MSDN:
http://msdn.microsoft.com/en-us/library/cc196992%28VS.85%29.aspx
Add-ons Gallery: Web Slices:
http://www.ieaddons.com/en/webslices/
Good luck and Happy Slicing!
Step 1: Web Slice Setting
Before you proceed you need to work out what the primary settings are for your web slice.
These are the most important settings you will need to work out:
Web Slice content (from Main Page)
You need to work out which section of you web page (we will call this the Main page) you want to convert into a web slice. Pick a section that updates regularly and something you feel a user will benefit from subscribing too.
Display Page URL:
This will be the URL to a basic, light weight page that will contain the same content as section in your main page that you want to slice.
This will also be the page the user will see when they click on the web slice from the browser bookmarks area.
It’s important that any update to content on your main page be also reflected immediately on the Display page. In the case of a CMS or Database driver site, the backend call to this content should be the same for both your main page and your display page, in order to have both pages always synchronised.
Time To Live (ttl):
How often the browser polls your web slice content page (display url) to check for updates
Bookmark URL:
When the user clicks on the arrow at the bottom of a web slice, which URL should the browser open. (Ideally this will be the URL to the main page)
Web Slice Title:
The title of the web slice, this is what appears in your browser bookmark area.
Step 2: Display Page Container
Next you need to code your Display Page to follow a similar html container as below that will be used by the web slice engine to handle proper behaviour.
<div class="hslice" id="todays-highlights"> <span class="entry-title" style="display: none;"> ninemsn: Today's highlights </span> <span class="ttl" style="display: none;">240</span> <a rel="entry-content" href="/web_slices/web_slice_todays_highlight.aspx" style="display: none;"></a> <a rel="bookmark" href="http://ninemsn.com.au" style="display: none;"></a> <div class="entry-content"> -- A call to a CMS / Database that will load the content here -- </div> </div>Things to note this in this code are:
<div class="hslice">: This tells the browser that this is part of a web slice
<span class="entry-title">: The title for the web slice
<span class="ttl">: this is the Time To Live or how often the browser will check for updates. You need to use minutes, I have used 240 mins which is 4 hours
<a rel="entry-content">: This is pretty much just the link to the same page as we are on which is the display page.
<a rel="bookmark">: This is the bookmark url
<div class="entry-content">: Here is where the actual content will sit
Step 3: Marking a web slice on the main page
On your main page, you now need to mark a web slice with similar syntax which will then work with the display page to create the final web slice.<div id="main_page_slice" class="hslice"> <span class="entry-title" style="display:none;"> ninemsn: Today's highlights</span> <a href="/web_slices/web_slice_todays_highlight.aspx#todays-highlights" rel="feedurl" style="display:none;"></a> -- A call to a CMS / Database that will load the content here -- </div>
Things to note this in this code are:
<div class="hslice">: This is where the browser picks up the content for the web slice and marks it with the green highlight and the icon that lets the user add the web slice to the browser.
<span class="entry-title">: The title for the web slice
<a rel="feedurl" href="/web_slices/web_slice_todays_highlight.aspx#todays-highlights" style="display:none;"></a>
This is the most important section. This is the feed url, which is used by the browser to convert a initial snap shot of your display url content and store it in ATOM format to be used in comparisons for update. You don’t need to worry about how it works, but you need to set it up properly. The #todays-highlights is simply a pointer to the div in the display page (
<div class="hslice" id="todays-highlights">) which houses the web slice content.
Conslusion:
This is all your need to do to get complex web slices working on your website. The architectual design followed above was decided for our website as we have a very large user base (extreamly high server load) and content that updates very frequently (every 15 mins at least). So by following this Alternative Update and Display Source design we keep the load on our servers to a minimum and have a reuseable and maintainable solution.
Alternative Update and Display Source Design
Finally:
At the time of writing this article and implementing web slices for our web site there were not many documents or examples out there to help you get started. But here are some we used to get going.
MSDN:
http://msdn.microsoft.com/en-us/library/cc196992%28VS.85%29.aspx
Add-ons Gallery: Web Slices:
http://www.ieaddons.com/en/webslices/
Good luck and Happy Slicing!
No comments:
Post a Comment