Web Slices
There are four types of web slice actions:
There are two ways to detect a web slice: on the page, by moving the mouse over the web slice area (Image 1) or via the tapes button on the Command Line (Image 2)
Image 1
Image 2
')
Once a user has subscribed to a web slice, they can access it through the Favorites panel. Image 3 shows an eBay web slice that allows the user to track an auction. Unlike pressing the auction page update button every two minutes, the user can subscribe to the auction and watch the changes automatically.
Image 3
Web slices are available through a simple HTML note. Several elements are required to present a web slice in code:
It is possible to combine several text spans to create a header that will be updated when the web slice is updated.
In this example, Internet Explorer will show “Seattle Weather 62 °” when the web slice is updated.
These elements are not required for use in web slices:
The entry-content element is part of the web slice IE takes for the Favorites panel. This element will be displayed in the web slice preview window when the user clicks the web slice button.
By default, the width and height of the preview window is determined by the size of the entry-content element.
Like the entry-title class, a web slice can contain more than one entry-content element. All items will be merged into one for viewing.
Consider, for security reasons, previewing a web slice does not allow placing scripts or ActiveX components. Therefore, html forms and fields are also not supported. You can use links that contain the parameters you need to take action. Navigation will be carried out through the current active tab. To circumvent this limitation, use an alternate display source, as described below.
Any link in a web slice that defines a rel attribute with a value of feedurl will be considered as an alternative source for updates. The alternate source may be another web page annotated with a web slice or a single tape item. IE subscribes to an alternate source and no longer uses the original page to update the web slice.
The ttl property allows you to set how often Internet Explorer will update a web slice.
The endtime property can be used to indicate when an item is no longer active.
For example, a web slice can track a flight that arrives at 7 pm.
An alternate update source useful for managing background updates from a client with a separate server. This is possible if you provide an alternative web page or feed using the feedurl property (described above). Image 4 demonstrates how this process occurs. In this diagram, you can see that there are two web pages that provide the same web slice. Basic.html is the original web page where the user finds the web slice and subscribes to it.Update.html is associated with Basic.html and serves as an alternative update of the web page.
Image 4
Basic.html :
...
Update.html :
...
When a user clicks on a web slice in the Favorites panel, a window appears with the saved contents of the entry-content elements. An alternative display source can be used to host interactive web content, such as a script or an ActiveX component (Figure 5)
Basic.html:
...
Display.html:
To demonstrate the topic discussed above, I will show you how to create a simple web slice. Base 9 is a non-existent local jazz band. They use their website to inform people about future performances and they want to use web slices to notify users of new scheduled concerts.
The first step is to decide what content will be displayed in the web slice and how it will be located on the page. Internet Explorer 8 Web Slice Style Guide provides the best examples of web slides. Follow the style guide to ensure that the content and structure of the web slice is optimal.
The web slice will contain 5 elements:
Using the elements described above, it is very easy to put the whole code of a web slice together:
This example uses internal styles, but it is also possible to use styles declared in a block.
It is important to note that the page containing your web slice must be hosted on a web server (not locally) so that Internet Eplorer can determine the content and allow the user to subscribe to the web slice.
Once added, a slice appears in the Favorites panel, as shown below.
Image 5
Creating a web slice is very simple and is a great way to deliver the content of your website directly to the user through the IE Favorites panel. For more information on creating web slice, visit the Internet Explorer Developer Center
- Find: The user finds a web slice on the page and adds it.
- Update: Internet Explorer uses a tape loading mechanism to periodically check for changes to a web slice.
- Notice: When a web slice is updated, its text in the Favorites panel becomes bold.
- Display: the user can view changes to the web slice by clicking on it in the Favorites panel.
There are two ways to detect a web slice: on the page, by moving the mouse over the web slice area (Image 1) or via the tapes button on the Command Line (Image 2)
Image 1
Image 2
')
Once a user has subscribed to a web slice, they can access it through the Favorites panel. Image 3 shows an eBay web slice that allows the user to track an auction. Unlike pressing the auction page update button every two minutes, the user can subscribe to the auction and watch the changes automatically.
Image 3
Web slice anatomy
Web slices are available through a simple HTML note. Several elements are required to present a web slice in code:
- class hslice
- id attribute
- entry-title class
It is possible to combine several text spans to create a header that will be updated when the web slice is updated.
< div class ="hslice" id ="main" >
< h2 class ="entry-title" > Seattle Weather </ h2 >
< p > It is < span class ="entry-title" >
62 ° </ span > . </ p >
</ div >In this example, Internet Explorer will show “Seattle Weather 62 °” when the web slice is updated.
Optional Items
These elements are not required for use in web slices:
- entry-content class
- rel = feedurl
- ttl
- endtime
Class entry-content
The entry-content element is part of the web slice IE takes for the Favorites panel. This element will be displayed in the web slice preview window when the user clicks the web slice button.
By default, the width and height of the preview window is determined by the size of the entry-content element.
Like the entry-title class, a web slice can contain more than one entry-content element. All items will be merged into one for viewing.
Consider, for security reasons, previewing a web slice does not allow placing scripts or ActiveX components. Therefore, html forms and fields are also not supported. You can use links that contain the parameters you need to take action. Navigation will be carried out through the current active tab. To circumvent this limitation, use an alternate display source, as described below.
rel = feedurl
Any link in a web slice that defines a rel attribute with a value of feedurl will be considered as an alternative source for updates. The alternate source may be another web page annotated with a web slice or a single tape item. IE subscribes to an alternate source and no longer uses the original page to update the web slice.
< div class ="hslice" id ="auction" >
< a rel ="feedurl"
href ="http://www.example.com/
slice.aspx?auctionId=..." ></ a >
< span class ="entry-title" > Auction Item </ span >
</ div >ttl
The ttl property allows you to set how often Internet Explorer will update a web slice.
endtime
The endtime property can be used to indicate when an item is no longer active.
For example, a web slice can track a flight that arrives at 7 pm.
< div class ="hslice" id ="1" >
< p class ="entry-title" > Flight 056 </ p >
< div class ="entry-content" >
< p > Departure time: 1:00 PM EST </ p >
< p > Status: On time </ p >
< p > Flight length: < abbr class ="endtime"
title ="2008-09-01T13:00:00-19:00:00" > 6
hours </ abbr ></ p >
</ div >
< p > This item updates every < span
class ="ttl" > 5 </ span > minutes. </ p >
</ div >
Alternative source of updates
An alternate update source useful for managing background updates from a client with a separate server. This is possible if you provide an alternative web page or feed using the feedurl property (described above). Image 4 demonstrates how this process occurs. In this diagram, you can see that there are two web pages that provide the same web slice. Basic.html is the original web page where the user finds the web slice and subscribes to it.Update.html is associated with Basic.html and serves as an alternative update of the web page.
Image 4
Basic.html :
...
< div class ="hslice" id ="auction" >
< a rel ="feedurl"
href ="http://www.example.com/
update.html#auction-update" />
< span class ="entry-title" > Auction Item </ span >
</ div >Update.html :
...
< div class ="hslice" id ="auction-update" >
< h2 class ="entry-title" > Auction Item </ h2 >
< p class ="entry-content" > Current bid is
$32 </ p >
</ div >Alternative display source
When a user clicks on a web slice in the Favorites panel, a window appears with the saved contents of the entry-content elements. An alternative display source can be used to host interactive web content, such as a script or an ActiveX component (Figure 5)
Basic.html:
...
< div class ="hslice" id ="auction" >
< span class ="entry-title" > Auction Item </ span >
< a rel ="entry-content"
href ="http://www.example.com/display.html" />
</ div >Display.html:
< html >
< body >
< div > Current bid is $32 </ div >
</ body >
</ html >Creating your first web slice
To demonstrate the topic discussed above, I will show you how to create a simple web slice. Base 9 is a non-existent local jazz band. They use their website to inform people about future performances and they want to use web slices to notify users of new scheduled concerts.
The first step is to decide what content will be displayed in the web slice and how it will be located on the page. Internet Explorer 8 Web Slice Style Guide provides the best examples of web slides. Follow the style guide to ensure that the content and structure of the web slice is optimal.
The web slice will contain 5 elements:
- Headline
- Group image
- Location of the concert
- Date and time of the concert
- Link to buy tickets
Using the elements described above, it is very easy to put the whole code of a web slice together:
< div class ="hslice" id ="upcoming_show"
style ="width: 320px; height: 240px" >
< div class ="entry-content"
style ="width: 320px; height: 240px" >
< h2 class ="entry-title"
style ="text-align: center" >
Base 9 show on 7/9 </ h2 >
< img src ="band.jpg"
style ="width: 100px; height: 100px;
float:left;
margin-right: 20px" >
< ul >< li > Where: Hotel Sierra </ li >
< li > When: Friday 7/9/08 @ 5pm </ li >
< li >< a href ="http://buytickets.com" >
Buy tickets for the show </ a ></ li >
</ ul ></ div ></ div >
This example uses internal styles, but it is also possible to use styles declared in a block.
It is important to note that the page containing your web slice must be hosted on a web server (not locally) so that Internet Eplorer can determine the content and allow the user to subscribe to the web slice.
Once added, a slice appears in the Favorites panel, as shown below.
Image 5
Conclusion
Creating a web slice is very simple and is a great way to deliver the content of your website directly to the user through the IE Favorites panel. For more information on creating web slice, visit the Internet Explorer Developer Center
Source: https://habr.com/ru/post/72189/
All Articles