Your SlideShare is downloading. ×
Integrating Your Site With Internet Explorer 8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Integrating Your Site With Internet Explorer 8

576
views

Published on

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 …

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.


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
576
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Users are moving towards web applications Content on the web is more personal & meaningful Development on the web is easier than the OS
  • 2. 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
  • 3. Simplify a common user pattern Easy for publishers & web developers - no client-side code Works with existing services and sites
  • 4. Login Select Navigate Paste Request Copy Text Text to Page Text Action (optional) Go back to webpage
  • 5. Execute Navigate Activity to Service Install Select Select Activity Content Activity Preview Results in Activity Situ
  • 6. Execute Navigate Activity to Service Install Select Select Activity Content Activity Preview Results in Activity Situ Navigate Serialize OpenService HTML URL Content XML Description
  • 7. Main components of Activities Context The content that the Activity acts on (selection, document, link)
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. <?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>
  • 12. //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‟) ;
  • 13. 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
  • 14. 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>
  • 15. 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
  • 16. 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.
  • 17. 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.
  • 18. 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
  • 19. 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>
  • 20. 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>
  • 21. 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')
  • 22. 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
  • 23. 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
  • 24. Feed WebSlice
  • 25. WebSlice Feed
  • 26. Feed WebSlice
  • 27. Feed
  • 28. WebSlice
  • 29. 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
  • 30. 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