Learn what the new standards compliant engine in Microsoft Internet Explorer 8 means to you as a web designer, and how to utilize new layout functionality to create cross-browser-compatible layout designs.

2. Users are moving towards web applications
Content on the web is more personal & meaningful
Development on the web is easier than the OS

3. Activities and WebSlices
Users are moving towards web applications
→Activities connect users to your services from
anywhere on the web
Content on the web is more personal & meaningful
→ WebSlices bring the dynamic pieces of your site
directly to the user
Development on the web is easier than the OS
→ Activities and WebSlices are declarative

4. Simplify a common user pattern
Easy for publishers & web developers - no
client-side code
Works with existing services and sites

8. Login
Select Navigate Paste Request
Copy Text
Text to Page Text Action
(optional)
Go back to
webpage

9. Execute Navigate
Activity to Service
Install Select Select
Activity Content Activity
Preview Results in
Activity Situ

10. Execute Navigate
Activity to Service
Install Select Select
Activity Content Activity
Preview Results in
Activity Situ
Navigate
Serialize
OpenService HTML
URL
Content
XML Description

11. Main components of Activities
Context
The content that the Activity acts on (selection, document, link)

12. Main components of Activities
Context
The content that the Activity acts on (selection, document, link)
Category
1-tier taxonomy for grouping activities
Default Activities
for each Category
All Activities

13. Main components of Activities
Context
The content that the Activity acts on (selection, document, link)
Category
1-tier taxonomy for grouping activities
Preview
Service interface for returning a sample of the results

14. Main components of Activities
Context
The content that the Activity acts on (selection, document, link)
Category
1-tier taxonomy for grouping activities
Preview
Service interface for returning a sample of the results
Execute
Service interface for navigating and posting data to the service

16. <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
<openServiceDescription
xmlns=quot;http://www.microsoft.com/schemas/openservicedescription/1.0quot;>
<homepageUrl>http://maps.live.com</homepageUrl>
<display>
<name>Map with Live Maps</name>
<icon>http://maps.live.com/favicon.ico</icon>
</display>
<activity category=quot;Mapquot;>
<activityAction context=quot;selectionquot;>
<execute method=quot;get“
action=quot;http://maps.live.com/default.aspx?where1={selection}quot; />
<preview method=quot;getquot; action=quot;http://maps.live.com/geotager.aspxquot;>
<parameter name=quot;bquot; value=quot;{selection}quot; />
<parameter name=quot;cleanquot; value=quot;truequot; />
<parameter name=quot;wquot; value=quot;320quot; />
<parameter name=quot;hquot; value=quot;240quot; />
<parameter name=quot;formatquot; value=quot;fullquot; />
</preview>
</activityAction>
</activity>
</openServiceDescription>

17. //check the user agent string if client is MSIE 8.0
//for more info: http://msdn2.microsoft.com/en-
us/library/ms537509.aspx
//check whether service is already installed
window.external.IsServiceInstalled
(„http://maps.live.com/livemaps.xml‟, „map‟);
//if false, display button to add service
window.external.AddService
(„http://maps.live.com/liveMaps.xml‟) ;

18. Activities are a lightweight way for users to have easy access
to their favorite services from any webpage
Think about ways to drive users to your site from any
1.
webpage:
- lookup information (rating, similar information, etc.)
- create new content
- link-sharing
Create an Activity using the OpenService Format
2.
Activities are designed to work with today’s services
Advertise your Activity on your website
3.
Installing an Activity requires no code deployment

22. http://www.ebay.com/amazonkindle20543521543
<div class=”hslice” id=”1” >
<p class=”entry-title”>Amazon Kindle, Unopened</p>
<div class=”entry-content”>
<img src=”pic.jpg”>
<p>Current bid: US $282.11</p>
</div>
</div>

23. Favorites Bar Top-Level Notification
Contains Favorite links, feeds, &WebSlices Bold on updated content
Organize content through folders Italic for expiring content
Grey on expired content & errors
Details Flyout
HTML extracted from webpage (static content)
Imported basic HTML styling
Click-thru access to website

24. A way for publishers to markup content within
a page for subscribing
(similar to RSS feeds)
WebSlice format
1.
Client-processing
2.
Network management
3.
Time-sensitive content
4.
Privacy & authentication
5.
Publisher control
6.
Recommended use
7.

25. Format
hAtom Microformats describe a feed and feed items
A WebSlice builds on hAtom
hAtom can represent static content
WebSlice intentionally represents dynamic content
reuses hAtom properties & adds properties for subscribing
dedicated to the public domain using Creative Commons Public Domain
properties from hAtom
entry-title – required. The title of the item.
entry-content – required. The description of the item.
new properties for hSlice
hslice – required. Container property for WebSlice.
ttl – optional. Time-to-live value.
feedurl – optional. Alternative path to get updates.
endtime – optional. The date when the item is no longer relevant.

27. Client-processing Download Engine
Windows Feeds Platform supports Download HTML
Download Feed
with WebSlice
(XML)
feeds and WebSlices
Convert to Atom
`
Converts WebSlice HTML as Feed (XML)
Atom feed
Feed Parser
Sanitizes content
no script compare
basic styling: imported downloaded
data with
stylesheet, style blocks, & direct
stored data
styles
Content stored Mark Feed as
Updated
locally, accessible by Feed API

29. Network management
Feed Download Engine checks for updates once a
day by default (15 minutes max)
Set time-to-live value
<div>Updates every <span class=”ttl”>60</span>mins</div>
Provide alternative feed
Direct download engine to different source for
getting updates
<a rel=”feedurl” href=”www.foo.com/feed.xml”>Subscribe</a>

30. Time-sensitive content
Indicate that content is valid until expiration time
UX displays expiring and expired states
Download Engine stops fetching expired content
Set endtime value
<abbr class=“endtime” title=“2008-03-08T17:18:00-
08:00”>March 8th, 5:18 pm</abbr>

32. Publisher control
Ability to turn off in-page discovery
<head>
<meta name=“slice” scheme=“IE” content=“off” />
Promote WebSlice from your site using browser API
addToFavoritesBar(<path>, <title>, 'slice')

34. Privacy and authentication
Feeds enable opening web data to users and applications
WebSlices are the same as feeds
Data is cached on user’s local machine
Publishers should expose private data through authentication
Feeds Platform Auth Support:
Persistent cookie-based auth
On expired cookies, click through to page to re-auth
Http-based auth (Basic & Digest)
Basic auth via SSL
Uses saved credentials for background download
On failure, user can click through to page to ‘fix’ problem

35. Recommended Use
Feeds are great for promoting new
items
ex: news articles, blog posts, and search results
WebSlices are ideal for a piece of a
page that continually changes
ex: weather module, auction item, and profile page

37. Feed
WebSlice

39. WebSlice
Feed

41. Feed
WebSlice

43. Feed

45. WebSlice

46. WebSlices are a lightweight way for users to
stay in touch with your web content
Start today:
No client-side code required!
User notification of updates
Entice users via preview to click through to site

47. Connect users to your site through
Activities and WebSlices
Simplify a common user pattern
Designed to work with services today
Check out the 2 other IE sessions & Hands-On Lab