H1N1 Flu (Swine Flu) Web Slice step-by-step

Article
05/01/2009

Creating Web Slices is extremely easy and fast, and at the same time it can provide amazing results. In this post I will show how the Swine Flu Web Slice has been created (in less then one hour!). The full project with source code is provided at the end of this post.

Before starting, you need a website (unless you already have one). For the sake of this scenario, we will use Microsoft Visual Web Developer 2008 Express Edition to create an ASP.Net Web Application.

Step 0: Define the Architecture

IE8 Web Slices development is described in detail in this MSDN Article. In this scenario we want to have full control over the Web Slice content, so we will use an Alternative Display Source. We also want to customize the update and notification mechanism, so we will implement an Alternative Update Source. The overall architecture looks like this:

Alternative display and update graphic.

Step 1: Creating the Preview page (aka Alternative Display Source)

The first step is creating a standard web page (Default.aspx ), that will be used by IE8 for the Web Slice preview; the content of this page can be pure HTML, CSS, JavaScript…but also Silverlight or any other ActiveX available on the machine.

In talking with the CDC (Centers for Disease Control and Prevention) and the WHO (World Health Organization), they available made two data feeds:

Those feeds are downloaded and parsed in the code behind of the page, as follows:

 private static DateTime GetLastRssUpdate()
 {
     using (WebClient client = new WebClient())
     {
         string content = Encoding.ASCII.GetString(client.DownloadData(Rss_Feed));
  
         XmlDocument rssDoc = new XmlDocument();
         rssDoc.LoadXml(content);
  
         HttpContext.Current.Cache.Insert("SwineFluRssFeed", content);
  
         return DateTime.Parse(rssDoc.SelectSingleNode("/rss/channel/item")["pubDate"].InnerXml);
     }
 }

Note that we are caching the feed on the server side, in order to improve the network performance. Once we have the data, we can use the ASP.Net Framework and LINQ to bind the data to our UI.

 private void BindRssFeed()
 {
     string content = Cache.Get("SwineFluRssFeed") as string;
     XDocument rssFeed = XDocument.Parse(content);
     rssList.DataSource = (from item in rssFeed.Descendants("item")
                           select new
                           {
                               Text = Short((string)item.Element("description")),
                               Url = (string)item.Element("link")
                           }).Take(5);
     rssList.DataBind();
 }

Step 2: Creating the Update page (aka Alternative Update Source)

The second step is to customize a few properties of the web slices and define the logic that will notify the user when there is an update.

In order to do this, we will use a second page (SliceUpdate.aspx ).

 <body>
     <div class="hslice" id="SwineFlu">
         
         <div class="entry-title" style="display: none">
             Swine Flu Updates
         </div>
         
         <a href="https://visitmix.com/WebSlices/SwineFlu" rel="entry-content" style="display: none" />
         
         <a href="https://www.cdc.gov/swineflu/" rel="Bookmark" style="display: none" target="_blank" />
         
         <span class="ttl" style="display: none">15</span>
         
         <div class="entry-content" runat="server" id="updateTrigger">
         </div>
                 
     </div>
 </body>

Let’s have a look more in detail to each section of the body:

class=”hslice” id=”SwinFlu” : by setting this specific CSS tag and an unique id, IE8 will recognize and threat this section of the page as a web slice.
entry-title: define the title of the web slice, that will be visible in the Favorites Bar.

<a rel=”entry-content” : this page, defined in the previous step, will be used for the preview window.
<a rel=”Bookmark” : IE8 will open this link when the user clicks on the blue arrow.

<span class=”ttl”>15</span> : we are setting an update interval of 15 minutes.
<div class=”entry-content”>…</div> : IE8 (in the background) will download the SliceUpdate.aspx page every 15 minutes. If the content inside this div element is updated, the title of the web slice in the Favorites Bar will blink and will become bold. In this scenario, this div contains only the DateTime of the last tweet or post (from the two feeds); this information is enough to trigger updates and it minimize the bandwidth needed.

Step 3: Making the Web Slice Discoverable

The last step is to make the web slice discoverable. The CDC will soon include the web slice on their main site; in the meantime, the slice is available on the IE8 Addons Gallery.

The “Add to Internet Explorer” button calls a simple JavaScript function.

  
 <button onclick="window.external.AddToFavoritesBar(
         'https://visitmix.com/WebSlices/SwineFlu/SliceUpdate.aspx#SwineFlu', 
         'Swine Flu Updates', 
         'slice')">
     Add to Internet Explorer
 </button>

Note that the AddToFavoritesBar function point to the Alternative Update Source page followed by the ID of the slice (SliceUpdate.aspx#SwineFlu).

Conclusion and source code

That’s it! With a couple of RSS feeds and a bunch of lines of code we made a very useful web slice!

The best part is that this Web Slice can easily be customized to show any other RSS or Twitter feed! ;-)

You can download the full project with the source code here.

You can preview the slice here.

Happy coding!

SwineFlu_WebSlice.zip

Comments

Anonymous
May 01, 2009
PingBack from http://microsoft-sharepoint.simplynetdev.com/h1n1-flu-swine-flu-web-slice-step-by-step/
Anonymous
May 03, 2009
Microsoft’s own Peter Neupert has some good thoughts on technology and the H1N1 Flu (Swine Flu) today
Anonymous
June 08, 2009
Great tutorial..I think is easy to create web slice through this.. However I do hate this swine flu :( http://www.swineflu7.com/
Anonymous
June 18, 2009
Particularly I think IE8 is a complete disgrace in terms of current browsers.
Anonymous
July 07, 2009
I personally don't bother with IE any more, I haven't even tried the newest version... Firefox all the way
Anonymous
July 25, 2009
If you hate IE so badly, then why are you even browsing this blog and commenting. Maybe you just hate what you don't understand.
Anonymous
August 14, 2009
Particularly I think IE8 is a complete disgrace in terms of current browsers.
Anonymous
August 14, 2009
Particularly I think IE8 is a complete disgrace in terms of current browsers.
Anonymous
August 14, 2009
Ahah..trolls...c'mon, at least say WHY!! I like Firefox, but I still prefer IE8. Why? It doesn't crash, it's secure and I love accelerators and slices and it does what I want it to do: browsing the web :-) Nice post, thanks!
Anonymous
October 04, 2009
I don't use IE now!I use Firefox,I think it's good.
Anonymous
October 09, 2009
It was a very nice idea! Just wanna say thank you for the information you have shared. Just continue writing this kind of post. I will be your loyal reader. Thanks again. this is good job
Anonymous
October 18, 2009
Thank you very much,I have read it now.
Anonymous
October 18, 2009
I like the side of the article
Anonymous
November 19, 2009
you have been inspiring to me with the post and all!
Anonymous
December 11, 2009
It's really great to post my comments on such a blog. I would like to appreciate the great work done by the web master and would like to tell everyone that they should post their interesting comments and should make this blog interesting. Once again I would like to say keep it up to blog owner!!!! Interesting article is very nice information I like to know more about it and its advantag
Anonymous
December 20, 2009
The comment has been removed
Anonymous
December 20, 2009
The comment has been removed
Anonymous
December 28, 2009
Impressive videos. I like these video collection.
Anonymous
December 28, 2009
you have been inspiring to me with the post and all!
Anonymous
January 08, 2010
Congratulations for that winning shot!
Anonymous
January 08, 2010
<a href="http://www.classylittlebride.com/resources.html">Gifts for the bird</a> and
Anonymous
January 12, 2010
For me, this is very exciting, I like this style, I hope to be able to see more
Anonymous
January 27, 2010
Its been really really interesting. Thanks..
Anonymous
February 11, 2010
Its been really really interesting. Thanks..
Anonymous
February 25, 2010
I would like to appreciate the great work done by the web master and would like to tell everyone that they should post their interesting comments and should make this blog interesting. Once again I would like to say keep it up to blog owner!!!!
Anonymous
February 25, 2010
Why? It doesn't crash, it's secure and I love accelerators and slices and it does what I want it to do: browsing the web :-)
Anonymous
March 08, 2010
you have been inspiring to me with the post and all!
Anonymous
April 12, 2010
Nice technology, you've inspired me to try this.
Anonymous
May 02, 2010
Creating Web Slices is extremely easy and fast, and at the same time it can provide amazing results. In this post I will show how the Swine Flu Web Slice has been created (in less then one hour!). The full project with source code is provided at the end of this post.
Anonymous
May 12, 2010
herve leger herve skirts Herve Leger skirt Herve Leger dress Herve Leger Sale - Buy Herve Leger Dresses, Bandage Dresses, Alexis Dress, Skirt New Style
Anonymous
May 28, 2010
Thank you very much,I have read it

Partager via