GetDotted Domains

Viewing Thread:
"How to make use of Internet Explorer 8’s new Web Slice feature!"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Thu 07/05/09 at 16:15
Regular
"It goes so quickly"
Posts: 4,083
[B][U]How to make use of Internet Explorer 8�s new Web Slice feature![/U][/B]

What would you like to do today? You could - oh, wait, I did that already! Shall we continue?

What is a Web Slice?

A Web Slice is a new feature within Internet Explorer 8 that allows web site owners to mark out a section (or sections) of their web site that they wish to allow users to add as a new type of “favourite” / “bookmark”.

The difference is that this favourite enables more dynamic content, or a mini-web site, to be embedded within the users favourites bar, so rather than just the site name or web address, you could have much more interesting and informative content shown.

The Web Slice sort of follows on from the Web Feed (RSS) feature that has been around for a while, and enables users to see when site updates are available and ready to be consumed.

A basic Web Slice is a section of your web site that is stored on the users computer, within their favourites section. Whenever that section of a web site is updated, the users copy will also update, and they will be alerted to this update, so that they know to visit the web site to see what’s new.

A Web Slice for Firefox!

Because of Firefox’s add-ons feature, a Web Slice can be used in this browser also. The add-on is called WebChunks, and is designed to give the same usage of a Web Slice for Firefox users.

What could I use a Web Slice for?

If you have a web site that you like to update often (a blog, forum, photo gallery, etc), then you could use a Web Slice to keep your loyal users up to date with your most recent content. For example, you could show when you have added a new blog post, show a thumbnail of your latest photo, or simply highlight when you are online and ready to have a go on Mario Kart Wii.

eBay, for example, use Web Slices for each of their auctions, that show when the item will be finished, how many bids an item has had and how much the current bid is.

How do my users make use of a Web Slice?

If a web site has a Web Slice, the web slice icon will appear on their browser task bar, and the section that the Web Slice references will highlight with a green border and icon when the mouse moves over it, enabling the user to click it for details.

Once they do, they are asked if they want to subscribe to the Web Slice, and if they do, they can then view the Web Slice from their favourites bar.

That sounds cool - how do I add a Web Slice for my loyal users?

Internet Explorer (and the Firefox add-on) handle all the nitty-gritty, all you need to do to get a basic Web Slice up and running is to add a couple little bits of HTML to tell the web browser’s where you want your web slice to be, and what content you want to include.

The code will be placed within your current HTML code, within a class attribute, using pre-defined values that the web browser’s know to look for. The first value is hslice, the second is entry-title, and the third is entry-content. You’ll also need to give your HTML element a unique ID, using the id attribute.

The hslice value indicates the section as a whole which you want to be your Web Slice area, and is a required value. The entry-title is also required, and is the value (or text) that is shown to the user, so they know what the Web Slice refers too. The final value is entry-content, which marks out the main content that will appear in your Web Slice window when the user clicks on it from the task browser, if they subscribe to it of course.

The entry-content value is actually optional, although not using it can make the Web Slice less usable, and only enables the heading to be updated, similar to how Firefox has used the Live Title (via a microsummary) in the past.

How and where do I place this code?

You will first need to pick your Web Slice content, and then dive in to your HTML code and place the key values in the relevant places.

If you manually code your web pages, be aware that you’ll need to update the locations of the key values when making an update, otherwise your Web Slices will continue to reference your old content.

If you use PHP, or CGI to make your sites, you can make things much easier. You may also find that if you use site-building software, that they will soon (or possibly already do) automatically create Web Slices for you.

So, where does this code go? Can you use an example?

I will start with a somewhat basic example web page for a blog with the following code used to put it together:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


Thrilling, I know.

A good Web Slice for this web site would be to show each new blog entry, and so our Web Slice would be nicely suited around the top blog post of the page.

To do this, we need to first wrap around the blog entry, to indicate that this is our chosen Web Slice, and you should remember that to do this, we use the class attribute with the hslice value.

Because we currently haven’t got our blog entry enclosed within a block of HTML code, we will need to add a standard <div> around it, to hold our Web Slice values - like so:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
[B]<div>[/B]
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
[B]</div>[/B]
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


… and within our new <div> section, add our Web Slice marking:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div [B]class="[I]hslice[/I]"[/B]>
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


And next, we’ll need to add an id attribute, making sure it is unique:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" [B]id="[I]webslice[/I]"[/B]>
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


If you already have a <div> section marked out, or any other block that is similar, you can simply add the class attribute to that, and if you already have the class attribute, add the hslice value to that, separating it with a space from any other values that are already present, for example:

<div id="newestblogpost" [B]class="blogentry [I]hslice[/I]"[/B]>

If the code already has a unique ID, then this is fine as well.

With the main area marked out, we now need to assign the entry-title value, and in our site example, this would be perfect within the blog post title area, for example:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" id="webslice">
<h2 [B]class="[I]entry-title[/I]"[/B]>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


And that is a basic Web Slice done, but, as I mentioned above, having just a heading isn’t as beneficial as including a little content, so to include the main feature of a Web Slice, we finally need to add the entry-content value to our paragraph of text:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" id="webslice">
<h2 class="entry-title">My Latest Blog</h2>
<p [B]class="[I]entry-content[/I]"[/B]>My latest blog entry.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


If you have multiple paragraphs for your blogs, you might want to assign just the first paragraph as the Web Slice content, such as:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" id="webslice">
<h2 class="entry-title">My Latest Blog</h2>
<p [B]class="[I]entry-content[/I]"[/B]>A summary of today�s blog.</p>
<p>I�ll tell you in more detail here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


And that, really is that, code wise!

Can I have more than one Web Slice per page?

You can create multiple Web Slice’s on a single web page, so long as you give each one a unique ID. You can have more than one in the following way:

<div class="hslice" id="webslice[B]A[/B]">
<h2 class="entry-title">Web slice example A</h2>
<p class="entry-content">
I am a paragraph�
</p>
</div>

<div class="hslice" id="webslice[B]B[/B]">
<h2 class="entry-title">Web slice example B</h2>
<p class="entry-content">
I am a paragraph�
</p>
</div>

<div class="hslice" id="webslice[B]C[/B]">
<h2 class="entry-title">Web slice example C</h2>
<p class="entry-content">
I am a paragraph�
</p>
</div>


Is it first come, first serve for the main Web Slice button?

When a user clicks the main Web Slice button on the browser task bar, they are offered the first Web Slice that the browser finds, if there are more than one on the page. If you would prefer a lower down Web Slice to be placed within the main button, you can add the following code within your opening <head> and closing </head> elements:

<link rel="default-slice" type="application/x-hatom" href="[B]#websliceB[/B]">

Whichever Web Slice you wish to set as the default, simply add it’s ID to the href attribute, ensuring you place a hash symbol (#) in front of it.

Take it from here!

I’ve uploaded a basic example of a Web Slice for you to try out and have a look at, so feel free to look at the source code to see how it’s done.

This is as basic a Web Slice as you’re going to get today, but as most of us feel, basic just isn’t good enough. Web Slice’s can have many more options and functions, and if you’re keen to learn about them, a little Googling (ops, I mean Bing’ing, sorry Microsoft) will bring up all sorts of things. You can also look over the official documentation for web slice’s from Microsoft’s web site.

Have fun!

Suggested Web Slice for Freeola!

I think a Web Slice would be suitable for your prize winner’s list, with the latest winner announcements, or possibly a countdown to when the time limit for the next prize will be awarded, and the type of entry you’re looking for.

I also think a Web Slice for the Freeola status page would be great, so that people can see quickly when you flag up a problem with web space, connections, email, etc.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
Thu 07/05/09 at 16:15
Regular
"It goes so quickly"
Posts: 4,083
[B][U]How to make use of Internet Explorer 8�s new Web Slice feature![/U][/B]

What would you like to do today? You could - oh, wait, I did that already! Shall we continue?

What is a Web Slice?

A Web Slice is a new feature within Internet Explorer 8 that allows web site owners to mark out a section (or sections) of their web site that they wish to allow users to add as a new type of “favourite” / “bookmark”.

The difference is that this favourite enables more dynamic content, or a mini-web site, to be embedded within the users favourites bar, so rather than just the site name or web address, you could have much more interesting and informative content shown.

The Web Slice sort of follows on from the Web Feed (RSS) feature that has been around for a while, and enables users to see when site updates are available and ready to be consumed.

A basic Web Slice is a section of your web site that is stored on the users computer, within their favourites section. Whenever that section of a web site is updated, the users copy will also update, and they will be alerted to this update, so that they know to visit the web site to see what’s new.

A Web Slice for Firefox!

Because of Firefox’s add-ons feature, a Web Slice can be used in this browser also. The add-on is called WebChunks, and is designed to give the same usage of a Web Slice for Firefox users.

What could I use a Web Slice for?

If you have a web site that you like to update often (a blog, forum, photo gallery, etc), then you could use a Web Slice to keep your loyal users up to date with your most recent content. For example, you could show when you have added a new blog post, show a thumbnail of your latest photo, or simply highlight when you are online and ready to have a go on Mario Kart Wii.

eBay, for example, use Web Slices for each of their auctions, that show when the item will be finished, how many bids an item has had and how much the current bid is.

How do my users make use of a Web Slice?

If a web site has a Web Slice, the web slice icon will appear on their browser task bar, and the section that the Web Slice references will highlight with a green border and icon when the mouse moves over it, enabling the user to click it for details.

Once they do, they are asked if they want to subscribe to the Web Slice, and if they do, they can then view the Web Slice from their favourites bar.

That sounds cool - how do I add a Web Slice for my loyal users?

Internet Explorer (and the Firefox add-on) handle all the nitty-gritty, all you need to do to get a basic Web Slice up and running is to add a couple little bits of HTML to tell the web browser’s where you want your web slice to be, and what content you want to include.

The code will be placed within your current HTML code, within a class attribute, using pre-defined values that the web browser’s know to look for. The first value is hslice, the second is entry-title, and the third is entry-content. You’ll also need to give your HTML element a unique ID, using the id attribute.

The hslice value indicates the section as a whole which you want to be your Web Slice area, and is a required value. The entry-title is also required, and is the value (or text) that is shown to the user, so they know what the Web Slice refers too. The final value is entry-content, which marks out the main content that will appear in your Web Slice window when the user clicks on it from the task browser, if they subscribe to it of course.

The entry-content value is actually optional, although not using it can make the Web Slice less usable, and only enables the heading to be updated, similar to how Firefox has used the Live Title (via a microsummary) in the past.

How and where do I place this code?

You will first need to pick your Web Slice content, and then dive in to your HTML code and place the key values in the relevant places.

If you manually code your web pages, be aware that you’ll need to update the locations of the key values when making an update, otherwise your Web Slices will continue to reference your old content.

If you use PHP, or CGI to make your sites, you can make things much easier. You may also find that if you use site-building software, that they will soon (or possibly already do) automatically create Web Slices for you.

So, where does this code go? Can you use an example?

I will start with a somewhat basic example web page for a blog with the following code used to put it together:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


Thrilling, I know.

A good Web Slice for this web site would be to show each new blog entry, and so our Web Slice would be nicely suited around the top blog post of the page.

To do this, we need to first wrap around the blog entry, to indicate that this is our chosen Web Slice, and you should remember that to do this, we use the class attribute with the hslice value.

Because we currently haven’t got our blog entry enclosed within a block of HTML code, we will need to add a standard <div> around it, to hold our Web Slice values - like so:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
[B]<div>[/B]
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
[B]</div>[/B]
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


… and within our new <div> section, add our Web Slice marking:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div [B]class="[I]hslice[/I]"[/B]>
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


And next, we’ll need to add an id attribute, making sure it is unique:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" [B]id="[I]webslice[/I]"[/B]>
<h2>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


If you already have a <div> section marked out, or any other block that is similar, you can simply add the class attribute to that, and if you already have the class attribute, add the hslice value to that, separating it with a space from any other values that are already present, for example:

<div id="newestblogpost" [B]class="blogentry [I]hslice[/I]"[/B]>

If the code already has a unique ID, then this is fine as well.

With the main area marked out, we now need to assign the entry-title value, and in our site example, this would be perfect within the blog post title area, for example:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" id="webslice">
<h2 [B]class="[I]entry-title[/I]"[/B]>My Latest Blog</h2>
<p>My latest blog entry goes here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


And that is a basic Web Slice done, but, as I mentioned above, having just a heading isn’t as beneficial as including a little content, so to include the main feature of a Web Slice, we finally need to add the entry-content value to our paragraph of text:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" id="webslice">
<h2 class="entry-title">My Latest Blog</h2>
<p [B]class="[I]entry-content[/I]"[/B]>My latest blog entry.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


If you have multiple paragraphs for your blogs, you might want to assign just the first paragraph as the Web Slice content, such as:

<html>
<head>
<title>Web Site Blog</title>
</head>
<body>
<h1>My Web Site</h1>
<div class="hslice" id="webslice">
<h2 class="entry-title">My Latest Blog</h2>
<p [B]class="[I]entry-content[/I]"[/B]>A summary of today�s blog.</p>
<p>I�ll tell you in more detail here.</p>
</div>
<h2>An Older Blog</h2>
<p>My previous blog entry goes here.</p>
</body>
</html>


And that, really is that, code wise!

Can I have more than one Web Slice per page?

You can create multiple Web Slice’s on a single web page, so long as you give each one a unique ID. You can have more than one in the following way:

<div class="hslice" id="webslice[B]A[/B]">
<h2 class="entry-title">Web slice example A</h2>
<p class="entry-content">
I am a paragraph�
</p>
</div>

<div class="hslice" id="webslice[B]B[/B]">
<h2 class="entry-title">Web slice example B</h2>
<p class="entry-content">
I am a paragraph�
</p>
</div>

<div class="hslice" id="webslice[B]C[/B]">
<h2 class="entry-title">Web slice example C</h2>
<p class="entry-content">
I am a paragraph�
</p>
</div>


Is it first come, first serve for the main Web Slice button?

When a user clicks the main Web Slice button on the browser task bar, they are offered the first Web Slice that the browser finds, if there are more than one on the page. If you would prefer a lower down Web Slice to be placed within the main button, you can add the following code within your opening <head> and closing </head> elements:

<link rel="default-slice" type="application/x-hatom" href="[B]#websliceB[/B]">

Whichever Web Slice you wish to set as the default, simply add it’s ID to the href attribute, ensuring you place a hash symbol (#) in front of it.

Take it from here!

I’ve uploaded a basic example of a Web Slice for you to try out and have a look at, so feel free to look at the source code to see how it’s done.

This is as basic a Web Slice as you’re going to get today, but as most of us feel, basic just isn’t good enough. Web Slice’s can have many more options and functions, and if you’re keen to learn about them, a little Googling (ops, I mean Bing’ing, sorry Microsoft) will bring up all sorts of things. You can also look over the official documentation for web slice’s from Microsoft’s web site.

Have fun!

Suggested Web Slice for Freeola!

I think a Web Slice would be suitable for your prize winner’s list, with the latest winner announcements, or possibly a countdown to when the time limit for the next prize will be awarded, and the type of entry you’re looking for.

I also think a Web Slice for the Freeola status page would be great, so that people can see quickly when you flag up a problem with web space, connections, email, etc.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
Thu 07/05/09 at 16:36
Regular
Posts: 391
A very nice, comprehensive and rather useful review. Congrats cjh :)
Thu 07/05/09 at 16:38
Regular
"It goes so quickly"
Posts: 4,083
Thank you :o)

Any chance we'll see a Web Slice Freeola status feature?
Thu 07/05/09 at 17:10
Regular
Posts: 391
I'm afraid only time will tell :)
Sat 09/05/09 at 18:39
Regular
"How Ironic"
Posts: 4,312
A very informative review. Congrats on the GAD. Can you win 2 GAD's for one review, or is that an error?
Sat 09/05/09 at 18:58
Moderator
"Are you sure?"
Posts: 5,000
Antichris wrote:
> Can you win 2 GAD's for one review, or is that an error?

Not sure what you mean there?

'cjh' has won two GADs for two separate posts - or am I missing something?







Search Freeola Chat
Sun 10/05/09 at 14:14
Regular
"How Ironic"
Posts: 4,312
I stand corrected. Lazy me just looked at the beginning if the other title and saw it was the same.

Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Many thanks!
You were 100% right - great support!
Brilliant service.
Love it, love it, love it!
Christopher

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.