Laurent Duveau : Web Development

Developing for IE8 (Accelerators and Web Slices)

pluginbaby — Sat, 22 Nov 2008 20:39:00 GMT

Lately I wrote an article for MSDN to introduce Accelerators and Web Slices in IE8 and show how to build them.

Here is an overview:

Web Slices bring the user’s favorite data (sports scores, weather reports, stock quotes, etc.) directly into the Favorites Bar. So Web Slices are like snippets of a page that a user can subscribe to. Changes and updates are retrieved and users are notified visually of the updated information status. Like any page, a “slice” can display text, links, pictures and even RIA elements (Silverlight!)… think about RSS on steroids.

[…]

Creating a Web Slice
Web Slices can be hosted in any web page. In fact you just have to define which part of you page can be “sliced” for the user. That means that you can turn any part of an existing web page into a Web Slice!

Web Slices use a combination of the hAtom microformat and the Web Slice format to describe a subscribable portion of a webpage.

hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom (http://www.atomenabled.org/) syndication format. hAtom will be one of several microformats open standards. More information

So to enable a Web Slice on your website, you just annotate your page with specific class names for the title, description, and content.

Here is the basic skeleton of a Web Slice:

<div class="hslice" id="sliceId">

  <p class="entry-title">My Slice Title</p>

  <div class="entry-content">

…

  </div>

</div>

hslice defines the Web Slice section and must have an Id.
entry-title is the title which appears in the favorites bar.
entry-content is the body of your Web Slice (you can use any HTML content here).

[…]

Accelerators in IE8 are contextual services to quickly access information from another website in your current browser page. The goal here is to be more efficient than the old "copy-navigate-paste" model. As soon as users select some text in a page, a blue icon appears to list available accelerators. Clicking on an accelerator opens a new tab with desired results. Optionally accelerators can have a preview window.

For example, suppose you’re on a page with a street address. You can highlight the address and choose an Accelerator such as Map with Live Maps. The accelerator will then display the map in a pop-up or open another tab, depending on how the Accelerator has been written for that site.

[…]

Creating an Accelerator
Building an Accelerator is really just about creating an XML file which describes your service. Results can be fetched from any service that can be queried over HTTP (GET or POST requests). This includes popular search engines like Live Search or Google but also sites such as Wikipedia, Facebook, eBay, Yahoo, Twitter or Digg.

[…]

Here is a sample code using the Live Search query URL passing the user’s selected text as “q” parameter in querystring to get related images:

<?xml version="1.0" encoding="utf-8"?>

<os:openServiceDescription xmlns:os="http://www.microsoft.com/
   schemas/openservicedescription/1.0">

  <os:homepageUrl>http://search.live.com/</os:homepageUrl>

  <os:display>

     <os:name>Search Images with Live Search</os:name>:

     <os:description>Find related images with Live Search</os:description>

     <os:icon>http://search.live.com/s/wlflag.ico</os:icon>

  <os:display>

  <os:activity category="Search">

     <os:activityAction context="selection">

       <os:execute action="http://search.live.com/images/results.aspx" method="get">

         <os:parameter name="q" value="{selection}" type="text"/>

       <os:execute>

     </os:activityAction>

  </os:activity>

</os:openServiceDescription>

The heart of your Accelerator is defined by these XML elements. The XML document is based on the OpenService specification:

os:activityAction specifies the interaction with the service provider based on the target of the Accelerator. The optional context attribute specifies the target: document, selection (default), or link.

os:execute specifies the action (page to call) when the user invokes the Accelerator and the method (GET or POST).

os:parameter specifies the parameters for the page. Note the use of a special variable {selection} which represents the user’s highlighted text. Alternatively, the variable {link} can be used to get the href of a selected link.

[…]

Read the full article here:
http://www.microsoft.com/youshapeit/msdn/content/knowledge/2008-10/ie8_improve_the_browsing_experience.aspx

Also check my Accelerators available on the IE gallery:

Search Images with Live Search

Search with Google Canada

~~Find Songs on Zune Social~~ *

~~Find Albums on Zune Social~~ *

~~Find Artists on Zune Social~~ *

* For some reasons Microsoft has removed my Zune Accelerators. Sorry about that.

Technorati Tags: IE8,Accelerator,Web Slice

You shape it – a new Microsoft tech portal

pluginbaby — Fri, 14 Nov 2008 05:23:01 GMT

Microsoft has a new web site to start the excitement on his new dev technologies: IE8, WPF, Silverlight and Windows Mobile. It is called {You shape} it and focus on Design, Development and IT Management in a nice claymotion Silverlight UI.

http://www.microsoft.com/youshapeit/

MSDN is part of this portal (www.microsoft.com/youshapeit/msdn) and I am a contributor as I wrote the article on IE8 development “IE8: Improve the Browsing Experience” that shows how to build Accelerators and Web Slice, check it out!

ASP.NET Dynamic Data Web projects templates

pluginbaby — Mon, 10 Nov 2008 02:05:16 GMT

Since Visual Studio 2008 SP1 you may have noticed 2 projects template for dynamic data:

So what is the difference ?

Dynamic Data Web Site / Dynamic Data Web Application:
Uses a LINQ to SQL model and LinqDataSource controls.
Dynamic Data Entities Web Site / Dynamic Data Entities Web Application:
Uses a ADO.NET Entity Data Model and EntityDataSource controls.

Since LINQ to SQL is dead I would not recommend using Dynamic Data Web templates. LINQ to Entities is now the recommended data access solution and will remain in .NET 4.0, so for your RAD Scaffolding needs you should use Dynamic Data Entities Web Site/Web Application!

Youtube Search Provider for IE8

pluginbaby — Sat, 25 Oct 2008 22:00:00 GMT

I made a Search Provider for IE8 to search videos on Youtube:

Youtube Search for IE8

What are Search Providers ?

In IE8 you can use search providers like Live Search, Wikipedia, Yahoo, Amazon, and more to deliver direct results and images that provide you with immediate answers. Learn more.

I also wrote an MSDN article on IE8 development experience which will soon be live.

Check out my IE8 Accelerators:

Search Images with Live Search
“Use this accelerator to find related images with Live Search based on selected text.”
Search with Google Canada
“Use this accelerator to find information with Google Canada.”

Technorati Tags: IE8,Search Provider

My IE8 Accelerators to download

pluginbaby — Sat, 27 Sep 2008 19:27:28 GMT

For those of you who are already running IE8 (since IE8 beta 2 is available), I made some accelerators ready to use:

Search Images with Live Search
“Use this accelerator to find related images with Live Search based on selected text.”

Search with Google Canada
“Use this accelerator to find information with Google Canada.”

What are Accelerators?
Use Accelerators in IE8 to search, map, e-mail, translate, or share content from any web page you’re currently viewing with just one click. Learn more.

A post on my IE8 developing experience (Accelerators and WebSlices) will follow later.

Technorati Tags: IE8

VPC for IE testing refreshed with beta 2

pluginbaby — Thu, 11 Sep 2008 23:12:57 GMT

Microsoft has updated the VPCs to test your web apps with different versions of Internet Explorer.

You can now download these VPC:

IE6/XP SP3
IE7/XP SP2
IE7/Vista
IE8 beta 2/XP SP3

>> Internet Explorer Application Compatibility VPC Image

These new VPCs will expire in January, 2009.

RunAtServer website new version

pluginbaby — Sun, 13 Jul 2008 02:29:15 GMT

As you may know I am the co-founder of RunAtServer Consulting, a company based in Montreal, we are specialized in web development with Microsoft technologies such as ASP.NET AJAX and Silverlight.

We have launched our new website! www.runatserver.com

9 month after the launch of the first version, we grown very fast (we hired several consultants and we became Microsoft Certified Partner and Microsoft Silverlight Partner!). Our website needed to reflect those changes with a fresh new design and sections focused on our new activities around RIA and Silverlight.

[Cool Tool] Vector Magic

pluginbaby — Tue, 24 Jun 2008 22:47:02 GMT

Vector Magic is an online tool that converts bitmaps into vector images. It provides a wizard that helps you through the process, so you can easily generate your vector graphics from bitmaps, then import into Microsoft Expression Designer or Blend. I already used it several times and the results are amazing! It is also impressive to have such a service as a website!

http://vectormagic.com/

First step is to upload your picture (gif or jpg):

At first the tool try to identify your image (logo or photo):

The correct type is automatically selected for you:

Then you match the quality level of your picture:

This step is for logos:

You get a list of colors palettes related to your logo, with the best match selected for you:

Finally the tool vectorizes your image and show a preview of the result with a comparison to the original:

Now you can download your image as a vector file!

Note: this service is not free anymore, but you can try it (upload, vectorize, preview, get unlimited png images and 2 vector results) without any subscription.

My Silverlight talk at Microsoft Innovation Briefing

pluginbaby — Fri, 23 May 2008 02:54:00 GMT

This morning I did a Silverlight 2 talk at Microsoft Montreal, during a half-day briefing called Building Compelling Websites on the Microsoft Platform.

That was a 1 hour talk to present Silverlight 2, DeepZoom, Expression Blend and create from scratch a Silverlight 2 application which consume LINQ To SQL data exposed by a WCF service with VS2008.

I would like to thank Paul Laberge for offering me the opportunity to do my very first presentation in english...

Here are the links to the online demos I showed:

DeepZoom:
http://memorabilia.hardrock.com

Performances comparison with DHTML/Flex/SL1.0/SL2:
http://www.bubblemark.com

Free charts controls:
http://www.visifire.com

Medical sample (amazing) application:
http://www.mscui.net/PatientJourneyDemonstrator/

Here is a link to the powerpoint slides I used:

Here is a zip file with the DeepZoom "Bill Gates" demo (hope you liked it!) and the Silverlight 2 + WCF + LINQ app I built live.

You'll appreciate my funky UI.

For the gentleman who asked the question I couldn't answer:

Question: "Can you customize the default Loading animation the user get while waiting for a Silverlight application to start ?"

Answer: "Yes! you can find a tutorial in the Quickstarts: http://silverlight.net/QuickStarts/BuildUi/SplashScreen.aspx"

[Cool Tool] FTP Live

pluginbaby — Mon, 28 Apr 2008 23:35:55 GMT

This is not a "must have" but a "good to know", as it can be pretty useful.

Have you ever been is a situation where you have to upload files to an FTP server but have no access because FTP ports are disable (at work for example) ?

So you can't use any FTP client, even the one in IE, but if you have internet access (at least port 80:web), then you can use ftplive :

www.ftplive.com

With this free online service you can do FTP from your browser, without problems of firewall or ports disabled, and nothing to install.

The only concern is... will you trust a website to get your server/password combination ? you should not.... or at least change your password back home.

[Cool Tool] Meta Tag Analyzer

pluginbaby — Sun, 06 Apr 2008 15:13:39 GMT

Meta Tag Analyzer is a free online tool by SubmitExpress that analyze your web site and tells you how good/relevant your title and description are in relation to your content and chosen keywords.

Try Meta Tag Analyzer:
http://www.submitexpress.com/analyzer/

Features:

- Display tips on how to improve your Meta Tags
- Check the keywords used on the page and find the keyword density
- Check web server operating system where site is hosted
- Check website load time
- Check website file size
- Check URLs and links found on the page

This is my first post on a topic I've been doing for years, developing a high level of expertise: Search engine optimization (SEO). I hope to write more on this!

Technorati Tags: Search engine optimization,SEO,meta tag

Save A Developer. Upgrade Your Browser.

pluginbaby — Sat, 05 Apr 2008 21:30:35 GMT

A new campaign has raised on the web to invite IE6 users to upgrade to a high level browser (IE7, Firefox, Opera or Safari) in order to make everyone happier (users + developers).

"Our current campaign focuses on assisting users in upgrading their Internet Explorer 6 web browser. This campaign will result in former IE 6 users having a more enjoyable experience on the web while (hopefully) creating a less stressful and complicated environment for web developers by hastening the retirement of an outdated browser."

www.savethedevelopers.org

Testing web apps on IE6, IE7 and IE8

pluginbaby — Thu, 03 Apr 2008 21:47:55 GMT

As web developers we have to test our websites on IE6, then IE7, and now IE8.

You can find tips and tricks to install several versions of IE on the same machine, but it may be easier and cleaner to use VPC instead.

Microsoft provides a link to download several VPC hard disk images containing pre-activated Windows XP SP2 or Windows Vista with IE6 or IE7 or IE8.
The current VPCs will expire on July 3, 2008.

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

Of course you'll need to install Virtual PC (free):
http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx

VS2008 and IE8 auto Js debugging mode

pluginbaby — Wed, 19 Mar 2008 02:58:26 GMT

Here is a nice feature of IE8:

Remember both "Disable script debugging" options you had to uncheck in IE to enable JavaScript debugging ?

You no longer have to!

You can now stay on default "script debugging off" mode in IE and when you hit F5 in VS2008, IE launch and the current tab is automatically set for debugging!

[via Your Websites, Our Passion!]

Also note that a slightly different version of the Internet Explorer Developer Toolbar is now built-in IE8, it is called the Developer Tools.

IE is getting better for web developers, keep on, go ahead...

[Cool Tool] Browsershots

pluginbaby — Sun, 16 Mar 2008 22:13:38 GMT

Browsershots is a free online tool that makes screenshots of your web site in different browsers/versions on multiple platforms (Win, Mac, Linux).

Use it to test the look of your web sites :
http://browsershots.org/

Set your choices then come back later and see the results (here you can see my blog before/after the Opera fix):

On the live app you can click on a picture to get the full version.

Note: IE8 is already available, but no Silverlight yet.