In my previous posts, I mentioned my trip around the world. In this and the next few posts, I’d like to share a few demos and resources from my presentations.
Test cases to improve interoperability
I will start with the IE Testing Center, where you can find over 7,200 test cases we contributed to the W3C; these tests cover the CSS 2.1 specification in depth, plus a few other specs from other W3C Working Groups. Because there are ambiguities, options, and misinterpretations in any specification, the IE Team created these tests to verify that a browser supports what you are trying to do before you depend on it.
To get a sense of how these tests work, let’s run some of them using the latest builds of the browsers as of this writing: Firefox 3.5.3, Safari 4.0.3, Chrome 3.0.195.24, Opera 10.00 (1750) and IE 8 RTM. It’s important to understand that there is no winner or loser here, just different browsers that are working with the same goal: better interoperability.
1. Border applied to element with 'display' set to inline-block
The test passes if there is a box below.
Run it here.
All browsers pass the test
2. Inline box containing block boxes
The test passes if there are blue borders around the top, left, and bottom, but not the right side of the text "First line," and borders around the top, right, and bottom, but not the left side of the text "Last line."
Run it here.
All browsers but Firefox pass the test
3. Margin collapsing - element with clearance
The test passes if there is no red visible on the page.
Run it here.
Only Opera and Internet Explorer pass the test
If you look at the source code of the pages (on IE8, right-click the page and select View Source), you will notice some recurring elements such as author, help, flags, and assert. These elements are standard components of all tests in the suite, which also include a simplified scenario to validate the assertion.
To make your life easier, the Expression Team also developed and released a new tool for Web developers: Expression Super Preview.
During the Auckland Web Meetup, I demonstrated how to use Expression Super Preview to perform cross-browser debugging, and to help sites migrate from earlier versions of IE to Web Standards in IE8. I was excited to hear the very positive responses from the user group audience, including Rob O’Callahan and his colleagues from the Firefox team--between a pizza and a beer (or maybe more?) I heard some very interesting feedback and got great ideas for future scenarios!
Expression Super Preview for IE is available for FREE here. Once installed, you can run this demo:
- Run it
- Select IE8 as reference browser on the left pane
- Select IE6 as comparison browsers on the right pane
- Set the location to this page, and hit the refresh icon
- Try the different visualizations (overlap, side by side, …)
- Do you notice any difference? J
In this demo, the site hit a well-known IE6 bug (double margin), that can be fixed by setting the display property to inline.
You can find other Training Kits, Tutorials, and Videos about Expression Super Preview here.
In my next posts, I’ll share other demos from my roadshow. Stay tuned!
<Giorgio />
PDC, Los Angeles. 11/18 of a sunny morning.
Steven Sinofsky, Windows President of Microsoft Corp, showed some of the commitments and the work in progress for Internet Explorer 9. Check out his video here.
Or, if you are interested to know more details from the IE team, watch the new Channel 9 videos or read the blog post from the IE General Manager, Dean Hachamovitch.
What about IE8? As soon as I’m back to my office, I’ll share some demo and tool of the many HTML 5 and web standards features already implemented in IE8.
Kudos to the IE team!
The IE roadshow continues, as I’m again travelling around UK, Germany and PDC in November. This will be a great chance to hear some “European feedback” - I’m looking forward to reporting back to the product team! ;-)
Here’s a calendar of the events:
I will talk about Browsers, about Web Standards and HTML 5 work in progress, about the new Web Features and Scenarios, about the Developer Tools, about best practices to improve AJAX performance and much more…
See you around!
In the last weeks I had the pleasure to travel to Australia and New Zealand and spend some time with the local communities of web developers, designers, enthusiasts, students…to talk about Internet Explorer 8, HTML 5, Web Standards, Developer Tools, Expression Super Preview, Fiddler and much more…
I have to admit I’ve been very impressed by the level of enthusiasm coming from all the venues I’ve been at: Tech ED Gold Coast, Tech Ed Auckland, MSDN Unplugged, Auckland Web Meetup, Auckland and Victoria University, … I’d really like to thank all the thousands people I met for their participation and their feedbacks: GRAZIE! In particular, those two made my 25 hours trip back to Seattle more enjoyable:
“[…] very enlightening presentation which I believe effectively illustrated a major shift of attitude within Microsoft towards the web and related standards.” (Darko)
“While I went in as a skeptical developer […] I came out highly surprised and impressed” (Anselm)
It’s been great to meet face to face with my colleagues Nigel Parker and Michael Kordahi; those guys are just super stars…and they have a good sense of…”fashion” :-) . You really don’t want to miss their Photosynths (and a lot of other cool stuff!) here and here !!
Lastly I’d like to thank John Ballinger for organizing and inviting me to the Auckland Web Meetup; I really enjoyed meeting the usergroup and the Firefox team (leaded by Robert O'Callahan) and discussing together some of the pending issues that make so complex to write and implement the HTML 5 spec, and some of the ideas that will make developers and designers life easier (e.g. test cases, Expression SuperPreview, …).
So, to all of you, THANKS! :-)
PS: starting from the next post, I will share the source code of my demos ;)
I’m happy to announce we just released a Web Application Toolkit for Internet Explorer 8!
The goal of this Web Application Toolkit is to leverage the new features in Internet Explorer 8 (Web Slices, Accelerators and Visual Search Providers) to extend the reach of your Web site and services also to those users that are not on your site.
The kit include sample projects and the following controls:
- ASP.NET Web Slice control: Enabling users to subscribe to your content directly within a Web page
- ASP.NET Accelerator control: To facilitate the access to your Web application or services from any Web page through contextual menu options
- ASP.NET Visual Search control: Allowing users to search within your site through the browser Visual Search Box
- ASP.NET Browser Helper control: Used to detect if the visitor of your site is using Internet Explorer 8
Download the code and samples here.
Watch a screencast to get started here.
Happy coding!
NSS Labs, a trusted advisor to the information security community, released today two new Web Browser Security Reports:
They’ve been testing intensively the latest browsers (Apple Safari 4, Google Chrome 2, Microsoft Internet Explorer 8, Mozilla Firefox 3* and Opera 10 Beta)** to compare their security models and APIs.
Note that Internet Explorer 8 relies on the new SmartScreen® Filter technology, while Firefox, Safari and Chrome on the same SafeBrowsing API (developed by Google).
Let’s have a look at the result of their tests.
1) MALWARE Protection
What is a Malware?
A Malware is software which is deceptive about functionality and is a security risk or a privacy risk. The term malicious software or malware refers to programs that demonstrate illegal, viral, fraudulent, or malicious behavior. For example, viruses, worms, and Trojan horses are malicious software.
Comparative Test Results
The use of reputation systems to assist browsers in the fight against socially engineered malware is a strong use of cloud technologies. But, not all vendor implementations and daily operations yield the same results.
- Internet Explorer 8 “was by far the best”, thanks to the SmartScreen® Filter technology
- Firefox 3 “comes in a distant second”
- Safari 4 presented a declined compared to the previous tests, with two short periods of sever security dips
- Chrome 2 performed very consistently, albeit very poorly
Although Firefox, Safari and Chrome are using the same security API, the results are different. From the report:
“The SafeBrowsing products’ protection rates were showing signs of converging just under 25%. This supports the notion that there are operational differences between the implementations of the API, but that the block lists are the same (or very similar)”
2) PHISHING Protection
What is Phishing?
Online phishing is a method of identity theft that tricks you into revealing personal or financial information online. Phishers use phony websites or deceptive email messages that mimic trusted businesses and brands in order to steal personally identifiable information such as usernames, passwords, credit card numbers, and Social Security numbers.
Since phishing sites have an average lifespan of only 52 hours it is essential that the site is discovered, validated, classified, and added to the reputation system as quickly as possible. A good reputation system must be both accurate and fast in order to realize high catch rates.
Comparative Test Results
- Internet Explorer 8 and Firefox 3 are clearly responding quickly to block new phishing sites
- Opera had a period during the tests where the protection dropped off significantly
- Chrome was below average
From the report:
“We expected better results given the fanfare about Google’s SafeBrowsing initiative. Additionally, a third-party (Firefox) was able to utilize Google’s API to achieve significantly better protection that Google’s own browser.”
What is the SmartScreen® Filter in IE8?
Internet Explorer 8 introduce a new technology called SmartScreen® Filter, an evolution of the previous Phishing Filter in IE8, to help protect IE8 users against the major security threats on the web today.
Eric Lawrence, Security Lead in the IE Team, has written many blog post where he introduce the feature and describe how it works. A FAQ about the Filter is available here.
If you want to know more about security in IE8, check out this video on Channel9.
Demo
For the sake of this post, based so far only on numbers, I’d like to show in action how IE8 identify and display an unsafe site to the end-user. We will use a test web site marked from the SmartScreen Filter as unsafe***.
If you browse to the site with IE8, the browser will start download the content of the page but shortly it will understand that the site is not safe and switch to a different view: a red warning alert will be offered to the end user.
The experience on other browsers, including Firefox and Chrome, would be completely different – since they don’t detect the site as unsafe…creating a big security threat for the end-user.
Is this really relevant?
NSS Labs is not The Word; it is one of the (many) trusted voices on the web, with a deep expertise in this field. You might not trust their results (btw, have a look at the Appendix of their reports to understand the architecture/methodology they have in place…).
It’s interesting however what they call “an easy apple-to-apple comparison”: they run those tests back in February and they are now comparing the trend over time for each browser. I’m surprised (and pleased :)) to see that IE is the only browser with a positive trend == it’s getting better over time. All of the other browsers decreased protection, between 3 and 8% - within the margin in the error.
Does all this mean that IE8 is 100% secure? Absolutely not, but I feel secure now… :-D
NOTE:
* I wished they tested with Firefox 3.5. From the report, “Firefox 3.5 was not stable enough to be tested during the course of this test. A patch has subsequently become available to address the stability issue. We were able to manually verify that the protection was identical between versions 3.0.11 and 3.5”.
** They used the “vanilla versions” (as downloaded from site and updated). No antivirus, no add-on installed, no security group policy, no special settings…. Just the browser, as it is.
*** This site has been designed for demonstration purposes only. The test performed from the NSS Labs used a list of 12000 real suspicious sites.
Technorati Tags:
IE,
IE8,
Security
If you are working in Europe and you are using the WebOC or WebBrowser control in your applications, you should not be worried at all! Most of the applications will “just work” on the E versions of Windows 7. For a more detailed Q&A, check out this post on the Windows 7 blog.
Windows 7 is going to be an amazing release! :-)
7/21/09 - UPDATE: Added Source Code (see bottom)
With Internet Explorer 8 it’s easy to build Silverlight Web Slices; great examples of this are the OneRiot Today’s Hottest Video or MIX 09 Web Slice.
But…how does it work?
Let’s have a look to the “Imagine Cup Web Slice”, just uploaded to the IE Gallery. The slice has been written by Sergei Golubev, one of the most brilliant (ex-) Microsoft Student Partner around the world!
You can install it here.
I think the architecture is very interesting, as it include a lot of best practices.
(Click on the image for high res)
- The Web Slice aggregates several data sources: the IC RSS Feed, the IC Twitter tweets and the tagged images from Flickr.
SYNC (ICSlice.aspx):
- It use the Alternative Update Source to show updates in the Title. If the content changes, the title of the Web Slice will go bold and flash for a few seconds.
- The content of the Alternative Update Source is just the date of the last update of the data sources. This way we reduce the bandwidth needed for each sync.
- The back-end logic use a .NET Web Service, with an internal caching layer. This allow to avoid the common Twitter limit.
- The TTL is set to 15 minutes; this is how often IE will do a sync and check for updates.
VIEW (ICView.aspx):
- Client UI and logic written in Silverlight, using the Alternative Display Source.
- In case Silverlight is not installed on the machine, a graceful message will appear.
OTHER:
- The Bookmark link has been set to the Imagine Cup homepage.
- All the links in the Web Slice will open in a new tab (target = "_Blank”)
- The entire project is hosted on Windows Azure. Free, cool, easy. Just awesome.
Check out this blog for the source code! Coming soon…
The full source code is now available here!
Adaptive Blue recently released the Glue Toolbar for Internet Explorer 8. Glue helps you discuss things you are interested in with your friends around the web; it connects conversations, recommend new books, music or movies to your friends…and reveal what things users are paying attention to as they browse the web.
This is how Alex, one of the mind behind this very sophisticated architecture, commented the development of Glu:
“This is seriously, one of the most challenging projects in my 15 year software of software engineering. The good news is that resulting product is elegant, sharing 90% of common core code with 10% adapters for each platform. Yet more satisfying is the performance on IE8 is the same as on Firefox.” (Alex Iskold, AdaptiveBlue)
Here’s the steps to try out Glue:
- Install Internet Explorer 8
- Install Glue Toolbar for IE8
- Create an account
- Browse to your favorite site (for instance, www.amazon.com)
- You’re done! You can now view your friends suggestion, give your 2 cents tips, …
Ok, but how all this work? Alex has already written a few posts to go through the API, and I know is preparing an article to share his experience with this project. In the meantime, using the Developer Tools integrated in IE8, I did my homework :-)
When you visit a site, Glue append dynamically a small script to the page; you can see how this script asynchronously retrieve the complete Glue library, which is a proxy to the logic developed within the BHO component and the Glue web services. It’s a very clean approach, which allow AdaptiveBlue to extend any site without affecting the existing behaviors or functionalities.
I find this toolbar very attractive, specially if you have hundreds of friends in your social networks :-)
The next step is probably to build an IE8 Accelerator or an IE8 Web Slice connected to Glue. Anyone from the community want to take the challenge?
Well done Adaptive Blue!
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:
.gif)
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="http://visitmix.com/WebSlices/SwineFlu" rel="entry-content" style="display: none" />
<a href="http://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(
'http://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!
A question I’ve been asked recently is “How can I detect IE8 using JavaScript?”. There are several ways to accomplish this task, and each one will have his pros and cons. In this post I will show the best practices to detect IE8 on real world scenarios.
If you have any feedback or you would like to suggest an alternative method, please feel free to add a comment to this post.
Detect the IE rendering engine
In the past, the Version Token (the token of the User Agent string which looks like “MSIE 7.0”) used to be a clear indicator of the browser version (IE6, IE7, …). Today, since IE8 include 3 rendering engines (IE8 Standards, IE7 Compatibility, IE6 Quirks), IE8 will set the Version Token dynamically, based on the user compatibility settings for each site.
For instance:
- Using IE8, if the site is in the compatibility list view, the VT will be MSIE 7.0
- Using IE8, if the site is in the compatibility list view, and the site owner used the X-UA-Compatible meta tag with “IE=8”, the VT will be MSIE 8.0
- Using IE8, if the site is NOT in the compatibility list view, the VT will be MSIE 8.0
- If you are debugging a site using the IE8 Developer Tools and you set the Document Mode to IE7, the VT will be MSIE 7.0
- Using IE7, the VT will be MSIE 7.0
As you can see from the previous examples, the VT shows what rendering engine is used by IE to display the site...no matter the version of the browser.
function getInternetExplorerVersion() { var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
function checkVersion() { var msg = "You're not using Windows Internet Explorer.";
var ver = getInternetExplorerVersion();
if (ver > -1) { if (ver >= 8.0)
msg = "You're using a recent copy of Windows Internet Explorer."
else
msg = "You should upgrade your copy of Windows Internet Explorer.";
}
alert(msg);
}
Check this MSDN article for more information about this function.
Detect if Web Slices, Accelerator, Visual Search are supported by the browser
The previous function will not tell us if the Web Slices, Accelerators and Visual Search are supported by the current browser (remember, those features always work in IE8, regardless the rendering engine adopted).
In general, the best practice is to check if each feature is supported by the current browser; this statement might sound generic or “too complex”. However, since web standards and browser keep evolving, it’s not possible to know today if a feature will be supported from the same (or other browsers) in the future. Obviously this concept applies to either Internet Explorer, Firefox, Opera, ….
In particular, I recommend to use the following functions:
function WebSliceSupported { return (typeof (window.external.AddToFavoritesBar) != "undefined");
}
function AcceleratorSupported { return (typeof (window.external.AddService) != "undefined");
}
function VisualSearchSupported { return (typeof (window.external.AddService) != "undefined");
}
NOTE: in case you are adding web slices to your site, I recommend to build them for any browser (they will be transparent to other browsers…); or, if you want to send them only to IE8, you should detect the browser on the server side.
Detect IE as browser
There are scenarios where you might still want to know the version of IE installed on the machine. For instance, let’s say you want to suggest your users to upgrade from IE6 to IE8.
In this case, the best client-side solution is to check if the query string contains the new token “Trident 4.0”.
function IsIE8Browser() { var rv = -1;
var ua = navigator.userAgent;
var re = new RegExp("Trident\/([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) { rv = parseFloat(RegExp.$1);
}
return (rv == 4);
}
NOTE: since the Trident number will most likely change in the future, we don’t recommend to use this function as an indicator of web slices, accelerators or visual search support.
Other useful resources
IE Blog: IE8 User Agent string
Version Vectors
Happy detection!
You’ve seen the new IE8 features on a website, on a video, on the IE Gallery, on Channel9, on a blog, on your friend’s pc…and you are interested to build your own version?
Here’s a few links to start!
More info available here.
Internet Explorer 8 brings a lot of new features to web developers. Check out these free Virtual Labs if you want to know more!
|
|
Virtual Lab |
Manual |
|
Building Web Slices with Internet Explorer 8 |
|
|
|
Preparing for Internet Explorer 8- Application Compatibility |
|
|
|
Using Accelerators and Web Slices in the Enterprise with Internet Explorer 8 |
|
|
|
Creating Accelerators In Internet Explorer 8 |
|
|
|
Internet Explorer 8 - Debugging and Application Compatibility |
|
|
|
Internet Explorer 8 Improved Programmability |
|
|
|
Using New AJAX Enhanced Layout Standards Support with Internet Explorer 8 |
|
|
Technorati Tags:
IE8,
Lab,
Tutorial
You’ve probably already seen how Internet Explorer 8 Accelerators allow you to perform searches very quickly on the web. What about going one step ahead, showing a video preview instead of a “plain text” result? Check out the result!
A- Add the MSN Accelerators
B – Test it here :-)
- Hello World
- Dream Theater
- Metallica
- Bon Jovi
- Bill Gates
- Roberto Benigni
- Back to the future
- Ask a ninja
C – Look and download the code
Now that you’ve seen the accelerator in action, let’s have a look at the code behind.
You will notice that – for this sample – I’ve written only client side code (Javascript), using the free Visual Web Developer 2008.
The complete source code of this sample is available here.
MsnAccelerator.xml
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://localhost/MsnAccelerator</homepageUrl>
<display>
<name>Play with MSN</name>
<icon>http://localhost/MsnAccelerator/favicon.ico</icon>
</display>
<activity category="Play">
<activityAction context="selection">
<preview action="http://localhost/MsnAccelerator/MsnPreview.htm?sel={selection}" /> <execute action="http://localhost/MsnAccelerator/MsnSearch.htm?q={selection}" > </execute>
</activityAction>
</activity>
</openServiceDescription>
The Accelerator descriptor contains the details of our accelerator. In this case we are creating a new accelerator in the custom category “Play”; the accelerator will send the selected text to MsnPreview.htm page through the sel parameter.
MsnSearch.htm
This page will be called when the user click on the “Play with MSN” menu; in this scenario I’m redirecting the user to the existing search page on the msn.com website (providing the current search keyword in the querystring).
Discover.htm
The code required to add the accelerator is easy as follow.
<button onclick="window.external.AddService('MSN.xml')"> Add MSN Video Accelerator
</button>
MsnPreview.htm
The preview is probably the most interesting and powerful part of an accelerator, since it can show really rich content using any client language (HTML, Javascript, Silverlight, Flash, ….).
In this scenario I’m performing the following operations using Javascript, in order:
- Get user selection
- Search video on msn.com
- Build player control
Let’s break it down to functional pieces.
1- Get user selection: the selected text is provided to the preview page through the sel parameter of the querystring, as described previously.
function getQueryStringParameter(param) { var qs = window.location.search.substring(1);
var ps = qs.split("&"); for (i = 0; i < ps.length; i++) { var p = ps[i].split("="); if (p[0] == param) { return p[1];
}
}
return null;
}
window.onload = searchVideo;
2- Search video on msn.com
Going around the live.com site, I found that the following url perform a search on msn.com, returning the result as RSS feed.
http://edge4.catalog.video.msn.com/Search.aspx?q=QUERY&responseEncoding=rss
Due to cross-domain restriction with the server (remember, we are doing the call client side here), I created a pipe (using Yahoo Pipes) that will return the result of my query using JSON format. Note that this is just one of the possible ways to do this; if the server supported cross-domain requests, I would used instead the new XDomainRequest.
function searchVideo() { var selection = getQueryStringParameter("sel"); if (selection != null) { var newScript = document.createElement('script'); newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=VjRuAucf3hG8ewtoZcag4A&_render=json&run=1&sel='
+ selection +
'&_callback=getVideo';
document.getElementsByTagName("head")[0].appendChild(newScript); }
}
function getVideo(feed) { var result = feed.value.items;
if (result != null && result.length > 0)
buildVideo(result[0].content);
else { setContent('No result found.', true); }
}
As you can see in the following picture, the pipe will get the feed, extract the first item and return only the guid value through the designated callback.
3- Build player control
The last step, given the id of the video, is to build dynamically the video player and add it to the page.
function buildVideo(id) { var video = document.createElement('embed'); video.src = 'http://images.video.msn.com/flash/soapbox1_1.swf';
video.type = "application/x-shockwave-flash";
video.flashvars = "c=v&v=" + id + "&ifs=true&ap=true"
video.width = "320px";
video.height = "240px";
video.allowfullscreen = "false";
setContent(video);
}
That’s it! With a bunch of JavaScript code, I now have a very powerful accelerator.
The complete source code of this sample is available here.
D – Next step
Exercise to the reader: it would be interesting to improve the UI and show more than one video result, maybe using Silverlight ;)
If you want to know more about IE8 Accelerators or you want to build your own, I recommend reading the following resources:
Ciao!
Technorati Tags:
IE8,
IE,
Accelerators
Disclaimer: the accelerator in this post is not supported by the writer, neither by MSN or Microsoft. They are rather provided as is, for the sake of learning and having fun :-)
If you missed the funny Internet Explorer 8 video at MIX, you can watch it again here…together with a funny collection of…well, you will see :-)
