Archive for December, 2009

Introduction

There are a lot of really cool services out there, and I think a lot of them would fit in really well with Accelerators. But even though there’s a lot of value to be had in creating Accelerators, I don’t think we’ve ever had a blog post explaining a step-by-step process for how to do it. I’m hoping this post will help with that.

I’ve been working on the feature for a while, so I’ve come up with some tips and best practices that have helped me become more efficient in building Accelerators. There are also a few mistakes I’ve seen (and made!) over and over again, so I’ll talk about those in the hope of making the development process a bit easier for everyone else out there.

Building an Accelerator

Accelerators streamline the common copy-navigate-paste operation by enabling users to send selected content from the current webpage to one of their favorite services. Fortunately, even though the feature is quite powerful, it’s actually quite easy to write code that uses it. Here’s a step-by-step guide for creating a simple Accelerator.

First, I’ve put up an Accelerator template, with sample information pre-loaded. All you need to do is swap out the sample information for yours. Note that you don’t need to be the service provider to build an accelerator that interacts with a service. If you can find the following information, then you can build an accelerator for virtually any service you want.

Here are the steps:

1. First, choose a <homepageUrl> for your Accelerator. This is an important field—all the other URLs in the manifest need to match its domain. Generally speaking, the top-level domain for your service is a good choice.

   Example:  <homepageUrl>http://www.example.com</homepageUrl>

2. Fill in the absolute path to your favicon into the <icon> field. One trick for doing so: right-click on the service page, view the source, and then search for an .ico file.

   Example:  <icon>http://www.example.com/favicon.ico</icon>

3. Under the <display> node, choose a <name> that’s descriptive of your service, while under 50 characters. We recommend that the name include the Accelerator category followed by the name of the service provider.

   <display>
   <name>Act with Example.com</name>
   </display>

4. Choose a “category” attribute for the <activity> field. I have another post on categories, but here are the ones we recommend:
   • Blog - A blog service that creates a new blog post based on a link or user-selection
   • Bookmark - A service adds a link to the user's personal bookmarks on the web
   • Define - A service that provides definitions based on a selection
   • Email - A service that provides email communication that can create a new email message
   • Find - service that finds related content within the scope of the site
   • Map - A service that provides map locations based on user-selection
   • Send - A service that converts web data into application data
   • Share – A service that shares a link (with optional comments) with the site community or network
   • Translate - A service that translates the current webpage or user-selection from one language to another

   Choosing a descriptive category is important for how Accelerators are grouped in the accelerator menu, and enables users to understand what your Accelerator will do before even experimenting with it.

5. Choose which contexts you want your Accelerator operate on—“selection”, “link”, and/or “document”—and then add them as attributes to one or more <ActivityAction> elements. For example:

   <activityAction context="selection"> … </activityAction>

   The link and document contexts could probably use a little extra explanation. The link context is activated when a user right-clicks on a link and then executes an accelerator from the resulting context menu. Similarly, the document context is activated when the user right-clicks on the page itself and uses the context menu, or goes to the Page menu and executes something under the “All Accelerators” submenu.

6. Next, fill in the “action” attribute of the <execute> element with the URL of the service you want to use. See the section below regarding variables to find out how to pass data into your service.

   Example:  <execute action="http://example.com/default.aspx?sel={selection}&amp;src=IE8">

7. Preview windows are a great way of delivering the output of a service to users as part of a more inline browsing experience—it’s also a great way of enticing them to visit a service’s home page.

   You can add a preview window via the <preview> element. I’ve written a section about preview below.

   Example:  <preview action="http://example.com/default.aspx?sel={selection}&amp;src=IE8">

The sections that follow provide some more in-depth specifics about the steps above.

Variables

IE exposes a number of variables for use with Accelerators. Here’s a list of the most commonly used variables:

• {selection} - the user selection within the webpage. Only available in selection context.
• {documentUrl} - the URL of the webpage where the Accelerator is invoked.
• {documentTitle} - represents the title of the webpage where the Accelerator is invoked.
• {link} - the URL of the user selected URL.
• {linkText} - the text of the user selected URL.

A full list of variables is available here.

There are two methods of passing these variables to a service through an Accelerator. The first is through the query string:

<execute action=”http://www.example.com/script.aspx?foo=bar”>

The second is through one or more <parameter> tags:

<execute action=”http://www.example.com/script.aspx”>

<parameter name=”foo” value=”bar” />

</execute>

Note that using a <parameter> element is the only way to insert data into the body of the HTTP request. You can use POST with a parameterized query string, as well, but any parameters you pass will show up in the URL. You can specify a GET or POST request via the “method” attribute of the <activityAction> element.

Adding Preview

Preview is probably the most visible feature of Accelerators, and one of the most useful when implemented effectively.

Accelerator previews occupy a window of size 320x240 pixels. Given this, most Accelerators that use it create a special preview page for displaying it.

The key to an effective preview is returning the most relevant information possible based on the information sent by the user, then making sure it fits in the space provided by the preview window.

The Bing Maps Accelerator, for example, maps the location of a selected address using its own UI, scaled down to 320x240:

<preview method="get" action="http://www.bing.com/maps/geotager.aspx">
<parameter name="b" value="{selection}" />
<parameter name="clean" value="true" />
<parameter name="w" value="320" />
<parameter name="h" value="240" />
<parameter name="client" value="ie" />
<parameter name="format" value="full" />
</preview>

Note that you can pass variables to the preview window the same way you can for execution. For example, the Accelerator above uses {selection}.

Another handy rule of thumb is load time—if it takes your preview window takes more than half a second to load, you probably have too much in it, from a user experience perspective.

One trick that you might find useful involves using the mobile version of a service for a preview window. We deliberately sized the preview window to be compatible with mobile services.

Testing your Accelerator

Once you’re done building your Accelerator, it’s time to test it out. We have a Javascript API for installation. Some code like the following will create a link that brings up the Accelerator installation dialog:

<a href=”javascript:window.external.addService(‘myAccelerator.xml’)”>Install me</a>

In order for this to work, you’ll need a live web server—trying to open the link from a page on your local hard drive will result in an error. Any kind of local server will work fine, though—you can use Visual Studio’s ASP.NET server without issue, for example.

If everything goes well, you’ll see the normal Accelerator installation dialog. If it doesn’t, you’ll see something like this:

Whenever I see this dialog, there are a couple of mistakes that very frequently turn out to be the culprits.

Encoded Characters

The first has to do with XML itself. When dealing with query strings, it’s very common to pass in multiple arguments using the ampersand character. Unfortunately, this is a reserved character in XML, so using it as a literal in a query string will raise an error. Instead, you’ll need to escape it with “&amp;”, like this:

<execute action=”http://www.microsoft.com/testscript.aspx?foo=test&amp;bar=test”>

Matching Domain Requirement

The second has to do with the <homepageUrl> tag. To properly identify a service, we require that the URLs specified in <homepageUrl>, the action attribute of <execute>, and the action attribute of <preview> all share the same domain. If this isn’t the case, an error is raised.

Test Cases

Once you can install your Accelerator, there are a few scenarios you should definitely test, since they tend to break for a lot of the Accelerators already out there:

• Blank content – what happens when blank content is sent to your service? Do you have a graceful error message in place?
• Multi-line content – does your service handle line-breaks the way you think it will? You may want to make sure you parse for the carriage return-line feed sequence (“%0d%0a” in URL encoding) and replace it with something appropriate, like a space.
• Script – Some user selection may have JavaScript associated with it. If you specify HTML selection, then your service should be filtering this script on the server for security reasons.
• Large selections – Accelerators truncate GET requests at 2048 characters. If you’d like your accelerator to be able to handle more data, you might consider using POST.

Next Steps and Conclusion

Once you have a cool Accelerator built, feel free to upload it to the IE Gallery. It’s a great way to gain more exposure for your Accelerator and your service.

I hope this post was helpful in creating Accelerators. If you have any feedback on this post, any thoughts on Accelerators in general, or any cool creations you’d like to share, feel free to leave a comment.

Thanks!
Jon Seitel
Program Manager

I'm always happy to see media attention being paid to hyperlocal news. But who the hell decided that Suburban New Jersey was the reference standard for local news? Just because you live nearby, Mr. New York media guy, does NOT...

Posted by Maggie Johnson, Director of Education & University Relations and Jeff Walz, Head of University Relations

We do a significant amount of in-house research at Google, but we also maintain strong ties with academic institutions globally, pursuing innovative research in core areas relevant to our mission. One way in which we support academic institutions is the Google Research Awards program, aimed at identifying and supporting world-class, full-time faculty pursuing research in areas of mutual interest.

Our University Relations team and core area committees just completed the latest round of research awards, and we're excited to announce them today. We had a record number of submissions, resulting in 76 awards across 17 different areas. Over $4 million was awarded — the most we have ever funded in a round.

The areas that received the highest level of funding for this round were systems and infrastructure, machine learning, multimedia, human computer interaction, and security. These five areas represent important areas of collaboration with university researchers. We're also excited to be developing more connections internationally. In this round, over 20 percent of the funding was awarded to universities outside the U.S.

Some exciting examples from this round of awards:

Ondrej Chum, Czech Technical University, Large Scale Visual Link Discovery. This project addresses automatic discovery of visual links between image parts in huge image collections. Visual links associate parts of images that share even a relatively small, but distinctive, visual information.

Bernd Gartner, ETH Zurich, Linear Time Kernel Methods and Matrix Factorizations. This project aims to derive faster approximation algorithms for kernel methods as well as matrix approximation problems and leverage these two promising paradigms for better performance on large scale data.

Dawson Engler, Stanford University, High Coverage, Deep Checking of Linux Device Drivers using KLEE + Under-constrained Execution Symbolic execution. This project extends the recently built KLEE, a tool that automatically generates test cases that execute most statements in real programs, so that it allows automatic, deep checking of Linux device drivers.

Jeffrey G. Gray, University of Alabama at Birmingham, Improving the Education and Career Opportunities of the Physically Disabled through Speech-Aware Development Environments. This project will investigate the science and engineering of tool construction to allow those with restricted limb mobility to access integrated development environments (IDEs), which will support programming by voice.

Xiaohui (Helen) Gu, North Carolina State University, Predictive Elastic Load Management for Cloud Computing Infrastructures. This project proposes to use fine-grained resource signatures with signal processing techniques to improve resource utilization by reducing the number of physical hosts required to run all applications.

Jason Hong and John Zimmerman, Carnegie Mellon University, Context-Aware Mobile Mash-ups. This project seeks to build tools for non-programmers to create location and context-aware mashups of data for mobile devices that can present time- and place-approriate information.

S V N Vishwanathan, Purdue University, Training Binary Classifiers using the Quantum Adiabatic Algorithm. The goal of this project is to harness the power of quantum algorithms in machine learning. The advantage of the new quantum methods will materialize even more once new adiabatic quantum processors become available.

Emmett Witchel and Vitaly Shmatikov, University of Texas at Austin, Private and Secure MapReduce. This project proposes to build a practical system for large-scale distributed computation that provides rigorous privacy and security guarantees to the individual data owners whose information has been used in the computation.

Click here to see a full list of this round’s award recipients. More information on our research award program can be found on our website.

Since 2007, Douglas Crockford has been developing (and delivering) a lecture series on the JavaScript programming language. Many of those lectures have been recorded and made available as part of the YUI Theater video series. Douglas has delivered many of the talks at conferences around the world.

In the first few months of 2010, Douglas will be delivering the full series of JavaScript talks with updated content as part of an event entitled “Crockford on JavaScript”. The event will take place over five evenings in January, February, and March at Yahoo! headquarters in Sunnyvale, CA. Attendance is free, but seating is limited — a full schedule including links to RSVP is available on the event website.

Thanks to YUI engineer Allen Rabinovich for the poster design.

Over the past couple of years, Google Checkout for Non-Profits has made donation processing simpler and more convenient for thousands of non-profits, processing tens of millions of dollars in donations per year.

Now we’ll be extending free donation processing for another year, until January 1, 2011, for those non-profits who are also members of our Google Grants program. All other non-profits will continue to process donations according to Checkout's standard fee structure.

If your organization is already a Google Grants recipient using Checkout to process donations, please make sure you have linked your Grants account with Checkout. If you’re not a Google Grants recipient and you meet the guidelines for the program, we strongly encourage you to apply.

In addition, we thought we’d share some data we collected about the default donation amount on one of our disaster relief donation drives on Google.com. We discussed internally whether the default donation amount should be left blank, made as high as $100 to increase the total amount collected, kept at $20 because people in the U.S. are accustomed to getting $20 bills from ATMs, or increased to $50 because it's close to the national giving average. In typical Google style we ran a few A/B experiments, randomly showing users different suggested donation amounts, in order to determine which amount would result in the greatest number of donations (or transactions) and total amount of donations collected.

First we compared leaving the donation amount blank, suggesting a $20 donation, and suggesting $100. We quickly saw that $20 was sub-optimal, resulting in fewer transactions and a lower total amount collected.

We’ve just returned from Add-on-Con, an annual conference for browser add-on developers held at the Computer History Museum in Mountain View California. The add-on development community is an entrepreneurial bunch of people and it’s exciting to hear about what they’re working on. Herman Ng, Christopher Griffin, and I were there to present and chat with people. Matt Crowley was also in town so he was able to stop by for part of the day.

Herman spoke about best practices to improve reliability and performance. This topic really resonated with the audience. It’s clear developers want to deliver a great experience to customers by building cool features, having great reliability and performance, and getting exposure in the IE Add-on gallery. Based on the amount of interest we saw, Herman will be reworking his presentation into a series of blog posts starting early next year. So you don’t have to wait, I’ll give you two of Herman’s quick tips for add-on developers now.

1. Get crash reports for your add-on from Windows Quality Online Services (Winqual). This is a great resource for discovering and debugging crashes in your product.
2. Post your add-on to the IE Add-on gallery. Developers click “join” and then click on your username to upload add-ons.

My presentation covered how to build Webslices (msdn), Accelerators (msdn), and Search Providers (msdn). These extensions are a great way to connect your customers with your services without the risk of introducing performance or reliability problems. You can also build and deliver them with a little bit of XML and markup so you can connect users with your site or service in hours rather than weeks.

Thanks to everyone at OneRiot, GetGlue, and YooNo for organizing such a great event!

Paul Cutsinger
Principal Program Manager
Internet Explorer

Yahoo! Sports has reached 36 million unique visitors per month and dominates the Online Sports and Fantasy Sports industry worldwide. The site’s recipe for success: high quality content presented via rich and standard-compliant interfaces.

The Y! Sports experience is so engaging, users view over 2 billion pages per month — more than Fox, SI, and CBS Sports combined! To meet such high demands, Y! Sports stays at the forefront of Internet technologies by leveraging platforms such as YUI.

If you consider yourself an avid YUI user, the kind that can look under a component’s hood and start adding quality features, you’re well on your way to joining their team.

Email your resume, including portfolio URLs, to mediatech-hiring /at/ yahoo /dash/ inc /dot/ com (Principals only; no recruiters, please.) or find out more about the position.

Earlier this year we simplified the process for monetizing your blog by adding a “Monetize” tab in the Blogger app. We started with AdSense, which allows you to add contextual advertising to your pages; more recently we added AdSense for Feeds to help you generate revenue from the distribution of your blog via RSS and Atom. Today we launched a third option: direct integration with Amazon Associates to search Amazon’s product catalog and add links to products that earn you commissions when your readers buy products you recommend.

With this feature, you can search Amazon directly from the Blogger editor and add pictures and links to Amazon products right into your posts. Your readers will earn you commissions whenever they buy the products you recommend, and if you don’t already have an Amazon Associates account, you can sign up for one for free without leaving Blogger.

If you’ve ever written a blog post about a book, recommended a gadget, or reviewed a toy you bought for your kids, you’ve likely gone through the process of drafting the post, opening up a separate window to go to find a site that sells the product, then going back to Blogger to paste the link to the product into the post editor.

Starting today, you can search the Amazon product catalog without leaving the Blogger interface and insert links to the products you find into your posts. Not only is the process of linking to products more efficient, but Amazon makes it easy for you to earn money whenever your readers actually buy the products you write about. This is known as an “affiliate program”, and it’s designed to let you recommend products you like to your audience — if they buy the product, you’ll earn a commission on that purchase. (For more on affiliate programs in general, here is a good overview at ProBlogger from this summer, and Darren’s “11 Lessons Learned” post about Amazon Associates is a good review of how to get the most out of the program.)

To get started, click on the Monetize tab for your blog and click “Amazon Associates”. Walk through the setup wizard, and add the Product Finder once you’re done.



Now for the fun part: when you are writing a post on Blogger, you’ll see an Amazon gadget to the right of your post editor (the “Product Finder”). You can search the Amazon product catalog from within Blogger — type in the name of the product you are writing about, and insert a link to the product, an image of the product, or an iframe containing the image, price details and a “buy it now” button. Every link that’s created contains your unique Associates ID, ensuring that Amazon will credit you for any purchases that result from readers clicking the link on your blog.



If you’re an existing Amazon Associate, completing this setup simply makes the Product Finder available on Blogger for you — you continue to earn the same referral rate from Amazon. New Associates receive the same referral rate from Amazon that they would have received if they signed up directly. If you’re not interested in earning a referral, you can still install the Product Finder: from the “Amazon Associates” page under the Monetize tab, click “I'll do this later — show me more Amazon options” and then click “Add the Product Finder” button.

A quick note about trust: affiliate programs work well when readers trust you. You should avoid promoting products simply because of the referral fee you might earn — readers may lose some of that trust if they sense your posts exist solely to make you money. You may also want to disclose to your readers that you will earn a commission on their purchase — some readers even prefer knowing that you benefit from their business.

There’s more information about this integration at Amazon.com, and the Amazon Associates blog has some more details. This integration is the result of months of collaboration between the engineers at both companies, and we’re very excited to share the results of this collaboration with you. Happy blogging!