Heathen
April 22nd, 2009, 08:41 PM
Ubiquity is an experimental Firefox extension that gives you a powerful new way to interact with the Web.
You're used to telling Firefox where you want to go by typing Web addresses into the URL bar:
http://farm4.static.flickr.com/3159/2421200474_1bf74ef498_o.png
With Ubiquity installed, you'll be able to tell Firefox what you want it to do by typing commands into a new Ubiquity input box.
http://www.toolness.com/images/20080819151657.jpg
Ubiquity commands can do nearly anything. Ubiquity comes with a set of commands that make common Web tasks faster and easier. In this tutorial we'll teach you how to use some of them. By the end of this tutorial you'll be able to perform quick Wikipedia, Google, definition, and Yelp searches; add maps to your email; and translate a snippet of a web page, highlight a word, and then email it to a friend.
The commands that come with Ubiquity are just the beginning: anyone can create new commands and share them. Creating Ubiquity commands — and extending the web (http://www.azarask.in/blog/post/sharing-streamable-functionality/) — should be as easy as creating a web page. If you want to learn how to create your own commands, please see the Developer Tutorial (https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_Author_Tutorial).
Ubiquity is still a work in progress, and we are eager for you to join our virtual team to experiment. If, when reading this tutorial, you think of a way to make Ubiquity easier to use, or an idea for its future development, we hope you'll take a moment to share your thoughts (http://getsatisfaction.com/mozilla/products/mozilla_ubiquity). By getting involved with Ubiquity while the project is still in its early stages, you have an opportunity to shape the direction of its growth.
If you're on a Mac...
You'll need to install Growl (http://growl.info/). This is a Mac OS X system extension that applications can use to display unobtrusive transparent messages. Ubiquity uses Growl notifications to show you the output of commands and tell you about errors.
On Windows (XP and later), you don't need to install anything special, as Ubiquity will use the operating system's built-in "toaster"-style pop-up messaging.
On Linux, you shouldn't have to do anything special: just make sure you're updated to the latest version of Firefox.
The Basics
Starting Ubiquity
If you haven't already done so, install Ubiquity (https://people.mozilla.com/%7Eavarma/ubiquity-0.1.xpi). Once you've done that, you can summon Ubiquity by tapping option-space on the Mac, or control-space if you're on Windows. On Linux, try alt-space
Once you hit the appropriate key-combo, you'll be presented with a transparent black box, with a blinking white cursor, in the upper-left of your browser.
http://www.toolness.com/images/20080714190900.jpg
You give Ubiquity a command by typing something in here and then hitting the Enter key. For the sake of brevity, we'll call this "issuing" a command.
For the rest of this tutorial, when we say to "issue 'XYZ'", we mean "hit alt-space (or ctrl-space) to bring up the Ubiquity box, then type XYZ".
First Command: Searching Wikipedia
Let's start with Wikipedia. Say you want to know what a "babel fish" is. You simply issue "wikipedia babel fish".
While you're typing your command, you'll see two things underneath the input box: A suggestion list and a preview of the current command. In the picture below, the suggestion list consists of "wikipedia" and "weather", while the preview says "Searches Wikipedia".
http://www.toolness.com/images/20080819152417.jpg
When you finish typing "wikipedia babel fish" you should see some summaries of various Wikipedia pages about Babel Fish, like so:
http://www.toolness.com/images/20080819152930.jpg
It will take a moment for the above information to be gleaned from Wikipedia, but Ubiquity stays fully responsive during this time.
Next, you can:
Hit Enter (or Return) to execute the command. Executing the Wikipedia command has the effect of taking you to the Wikipedia page.
Hit Escape to cancel the command. Ubiquity disappears with no effect.
Click on one of the links in the preview. In the case of the Wikipedia preview, clicking a link will take you directly to the article you're interested in.
Abbreviating Commands and Using the Suggestion List
"Wikipedia babel fish" is quite a lot to type. You can save some wear and tear on your fingers by letting Ubiquity's suggestion list do the work for you. As you saw in the last section, bringing up Ubiquity and typing only "w" presents you with suggestions of all the commands that start with that letter: namely, Wikipedia and Weather.
When you add the letter "i", the suggestion list narrows down to just the one command that starts with "wi"—"Wikipedia". At this point, you can hit the space bar and type the rest of your sentence, and Ubiquity will know that the verb you want to use is "wikipedia". So issuing "wi babel fish" is the exact same thing as issuing "wikipedia babel fish".
Let's try another example. Suppose you want to know what the weather is like in Chicago. Try issuing "w chicago".
http://www.toolness.com/images/20080819155204.jpg
You'll see that the top suggestion is "wikipedia chicago". If you hit the Return key now, this is the command that will be executed. But that's not what we want right now, so hit the down arrow key instead, to highlight the second suggestion: "weather chicago"
You can now see a preview of the weather forecast for Chicago. Hit return to go to the full weather report page on Wunderground.com.
Of course, you could have just issued "we chicago", or even "we 60601" (that's a Chicago zip code) to get the same results.
Doing Commands on Selections
Often, the thing you're interested in searching for is right in front of you, on the web page you're looking at. Why go to the trouble of re-typing it when you can use what you've already got?
Select the words "Mountain View, California" below by dragging your mouse across them:
Mountain View, California
Now summon Ubiquity, and just type the first few letters of the command name:
http://www.toolness.com/images/20080819155845.jpg
Or, let's say you're reading a web page and you find an unfamiliar word:
aglet
Just select the word and issue "define".
You could have achieved the same thing by typing "define aglet"—or just "def aglet", or even "def this". (Ubiquity understands "this" to refer to the selection.)
More Command Examples
Emailing
Right now, the email command uses Google Mail (http://mail.google.com/). That means you'll only be able to follow along with the next part of the tutorial if you have a GMail account. Eventually, of course, the command should work with all major web-based email providers, as well as applications like Thunderbird (http://www.mozilla.com/en-US/thunderbird/). (If you're a programmer, we'd love some help with that (http://groups.google.com/group/ubiquity-firefox).) For now, if you have a GMail account, please make sure you're logged in. If you don't, you might want to skip ahead to the next part of the tutorial.
Assuming you're logged into your GMail account, issue "email". In the suggestion list, you'll see a suggestion that says "Email (message) (to contact)".
http://www.toolness.com/images/20080819160313.jpg
This is a clue that the Email command expects two pieces of information: the message is what you're emailing, and the contact is who you want to send it to. However, you can leave out one of these things — or both of them — and the Email command will still work. So I can issue any of these commands:
"email hello"
"email to chris"
"email hello to chris"
"email to chris hello"
I'm using "chris" because that's the name of someone in my GMail contacts list. If you don't have a "chris" in your contacts list, just substitute the name of any of your friends in these examples.
Let's say I've found an interesting fact on a web page and I want to send it to Chris. I can select part of the page, including links, pictures, and anything else, and then issue "email this to chris". Ubiquity understands "this" to refer to my selection. (I could also have said "email it to chris" or "email selection to chris" -- all of these are equivalent.) The selected part of the page shows up in my preview:
https://wiki.mozilla.org/images/5/5b/Email-picture-selection.png (https://wiki.mozilla.org/File:Email-picture-selection.png)
(Actual email addresses blurred out to protect the innocent.) Since I know several people named Chris, there are several lines in the suggestion list -- one each Chris in my GMail contacts list. I can arrow-key down to the Chris I want and then hit the Enter key.
I'm taken to the GMail "compose new email" page. The chunk of the page that I selected is reproduced in the body of my email, the "to" field is filled with the email address I selected, and the "subject" field contains the title of the web page I was on. I can now edit this email to add anything else I want to say, before clicking "Send".
The Map command
Let's say you're arranging to meet up with a friend at a restaurant, and you want to include a map in the email. (Yes, it's Aza's favorite example.)
Type out the address you want to map, then select it and issue "map". In the preview, you'll see a thumbnail-size map of the area (from Google Maps).
https://wiki.mozilla.org/images/7/7f/Map-preview-1.png (https://wiki.mozilla.org/File:Map-preview-1.png)
If you execute the command, you'll be taken to the Google Maps page. Or, you can click on the image in the preview to get a larger, interactive version. After scrolling and zooming this map to your liking, you can click the "insert map in page" link to insert the map into your email.
https://wiki.mozilla.org/images/6/62/Map-preview-2.png (https://wiki.mozilla.org/File:Map-preview-2.png)
You can give it a try by selecting the address below and issuing "map":
Mozilla Corporation, 1981 Landings Drive, Mountain View, CA
Then click the image in the preview to get the larger map, then click the "insert map in page" link and watch what happens. Surprised?
The Translate command
That's right, Ubiquity commands can alter the contents of a page, even if the page wouldn't normally be editable. A command that makes good use of this ability is the "Translate" command. To try it, select the text below and issue "translate" (or just "tra") and execute.
21世紀に、国際化をよく考えなければなりません。
It's translation-by-machine, so the results are bound to sound awkward, but at least you can get the gist of the meaning.
The full command is
translate (text) (from language) (to language)
So you can specify what language you want to translate from, and what language you want to translate to. If you leave either of these out, Ubiquity will just make a guess about what you want.
Here are some other examples you can try:
"tr good evening to spanish"
"tr buenas tardes from spanish to french"
Select some English text on this page and then: "translate this to german"
Going Further
Getting Help and Discovering Commands
By now you're probably wondering, "How many commands are there? What are they all called? How am I supposed to know what a command could be unless I memorize them all?"
These are good questions! To start getting some answers, issue the "command-list" command, and hit Return to execute it. You'll be taken to a special page listing every command you have installed, and describing what each one does.
https://wiki.mozilla.org/images/9/98/Command-list.png (https://wiki.mozilla.org/File:Command-list.png)
For more general help, you can execute the "help" command. Here, you can change the hotkey that you use to activate Ubiquity, un-subscribe from command feeds, and so on.
The general help page and the command-list page link to each other, so whichever one you open, you can get to the other with a single click.
You can also get to the main help page by typing about:ubiquity into the Firefox URL bar.
Teaching Ubiquity New Commands
We've mentioned that anyone can create Ubiquity commands. Once created, these commands can be embedded in any web page. If you have Ubiquity installed and you visit a page with an embedded command, Firefox will present you with the option of subscribing to the command.
To see this in action, you can visit this example page on Atul's personal site (http://hg.toolness.com/ubiquity-firefox/raw-file/7435416f211a/examples/sample-cmd.html). You should see a bar coming down from the top of the browser window asking you whether you want to subscribe to the command or not.
http://www.toolness.com/images/20080820111209.jpg
If you choose to subscribe, you'll see a rather scary-looking warning page:
http://www.toolness.com/images/20080820111725.jpg
It's important to understand the dangers of subscribing to Ubiquity commands from sites that you don't trust. Since a Ubiquity command can do anything, and it has full access to your web browser, a bad person could write a Ubiquity command to steal your personal information or do malicious things to your computer. You should not install Ubiquity commands unless you are confident that the source is trustworthy.
In the future, we'll be creating something called a "trust network" that Ubiquity users can use to share knowledge about which commands are trustworthy. When you visit a page with an embedded command, you'll be able to see what your friends with Ubiquity have said about this command -- whether they've given it a thumbs-up or left you a warning to let you know it could be dangerous. This system doesn't exist yet, but once it does we will modify this section of the tutorial to let you know how to use it.
Woah. Thats awesome.
You're used to telling Firefox where you want to go by typing Web addresses into the URL bar:
http://farm4.static.flickr.com/3159/2421200474_1bf74ef498_o.png
With Ubiquity installed, you'll be able to tell Firefox what you want it to do by typing commands into a new Ubiquity input box.
http://www.toolness.com/images/20080819151657.jpg
Ubiquity commands can do nearly anything. Ubiquity comes with a set of commands that make common Web tasks faster and easier. In this tutorial we'll teach you how to use some of them. By the end of this tutorial you'll be able to perform quick Wikipedia, Google, definition, and Yelp searches; add maps to your email; and translate a snippet of a web page, highlight a word, and then email it to a friend.
The commands that come with Ubiquity are just the beginning: anyone can create new commands and share them. Creating Ubiquity commands — and extending the web (http://www.azarask.in/blog/post/sharing-streamable-functionality/) — should be as easy as creating a web page. If you want to learn how to create your own commands, please see the Developer Tutorial (https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_Author_Tutorial).
Ubiquity is still a work in progress, and we are eager for you to join our virtual team to experiment. If, when reading this tutorial, you think of a way to make Ubiquity easier to use, or an idea for its future development, we hope you'll take a moment to share your thoughts (http://getsatisfaction.com/mozilla/products/mozilla_ubiquity). By getting involved with Ubiquity while the project is still in its early stages, you have an opportunity to shape the direction of its growth.
If you're on a Mac...
You'll need to install Growl (http://growl.info/). This is a Mac OS X system extension that applications can use to display unobtrusive transparent messages. Ubiquity uses Growl notifications to show you the output of commands and tell you about errors.
On Windows (XP and later), you don't need to install anything special, as Ubiquity will use the operating system's built-in "toaster"-style pop-up messaging.
On Linux, you shouldn't have to do anything special: just make sure you're updated to the latest version of Firefox.
The Basics
Starting Ubiquity
If you haven't already done so, install Ubiquity (https://people.mozilla.com/%7Eavarma/ubiquity-0.1.xpi). Once you've done that, you can summon Ubiquity by tapping option-space on the Mac, or control-space if you're on Windows. On Linux, try alt-space
Once you hit the appropriate key-combo, you'll be presented with a transparent black box, with a blinking white cursor, in the upper-left of your browser.
http://www.toolness.com/images/20080714190900.jpg
You give Ubiquity a command by typing something in here and then hitting the Enter key. For the sake of brevity, we'll call this "issuing" a command.
For the rest of this tutorial, when we say to "issue 'XYZ'", we mean "hit alt-space (or ctrl-space) to bring up the Ubiquity box, then type XYZ".
First Command: Searching Wikipedia
Let's start with Wikipedia. Say you want to know what a "babel fish" is. You simply issue "wikipedia babel fish".
While you're typing your command, you'll see two things underneath the input box: A suggestion list and a preview of the current command. In the picture below, the suggestion list consists of "wikipedia" and "weather", while the preview says "Searches Wikipedia".
http://www.toolness.com/images/20080819152417.jpg
When you finish typing "wikipedia babel fish" you should see some summaries of various Wikipedia pages about Babel Fish, like so:
http://www.toolness.com/images/20080819152930.jpg
It will take a moment for the above information to be gleaned from Wikipedia, but Ubiquity stays fully responsive during this time.
Next, you can:
Hit Enter (or Return) to execute the command. Executing the Wikipedia command has the effect of taking you to the Wikipedia page.
Hit Escape to cancel the command. Ubiquity disappears with no effect.
Click on one of the links in the preview. In the case of the Wikipedia preview, clicking a link will take you directly to the article you're interested in.
Abbreviating Commands and Using the Suggestion List
"Wikipedia babel fish" is quite a lot to type. You can save some wear and tear on your fingers by letting Ubiquity's suggestion list do the work for you. As you saw in the last section, bringing up Ubiquity and typing only "w" presents you with suggestions of all the commands that start with that letter: namely, Wikipedia and Weather.
When you add the letter "i", the suggestion list narrows down to just the one command that starts with "wi"—"Wikipedia". At this point, you can hit the space bar and type the rest of your sentence, and Ubiquity will know that the verb you want to use is "wikipedia". So issuing "wi babel fish" is the exact same thing as issuing "wikipedia babel fish".
Let's try another example. Suppose you want to know what the weather is like in Chicago. Try issuing "w chicago".
http://www.toolness.com/images/20080819155204.jpg
You'll see that the top suggestion is "wikipedia chicago". If you hit the Return key now, this is the command that will be executed. But that's not what we want right now, so hit the down arrow key instead, to highlight the second suggestion: "weather chicago"
You can now see a preview of the weather forecast for Chicago. Hit return to go to the full weather report page on Wunderground.com.
Of course, you could have just issued "we chicago", or even "we 60601" (that's a Chicago zip code) to get the same results.
Doing Commands on Selections
Often, the thing you're interested in searching for is right in front of you, on the web page you're looking at. Why go to the trouble of re-typing it when you can use what you've already got?
Select the words "Mountain View, California" below by dragging your mouse across them:
Mountain View, California
Now summon Ubiquity, and just type the first few letters of the command name:
http://www.toolness.com/images/20080819155845.jpg
Or, let's say you're reading a web page and you find an unfamiliar word:
aglet
Just select the word and issue "define".
You could have achieved the same thing by typing "define aglet"—or just "def aglet", or even "def this". (Ubiquity understands "this" to refer to the selection.)
More Command Examples
Emailing
Right now, the email command uses Google Mail (http://mail.google.com/). That means you'll only be able to follow along with the next part of the tutorial if you have a GMail account. Eventually, of course, the command should work with all major web-based email providers, as well as applications like Thunderbird (http://www.mozilla.com/en-US/thunderbird/). (If you're a programmer, we'd love some help with that (http://groups.google.com/group/ubiquity-firefox).) For now, if you have a GMail account, please make sure you're logged in. If you don't, you might want to skip ahead to the next part of the tutorial.
Assuming you're logged into your GMail account, issue "email". In the suggestion list, you'll see a suggestion that says "Email (message) (to contact)".
http://www.toolness.com/images/20080819160313.jpg
This is a clue that the Email command expects two pieces of information: the message is what you're emailing, and the contact is who you want to send it to. However, you can leave out one of these things — or both of them — and the Email command will still work. So I can issue any of these commands:
"email hello"
"email to chris"
"email hello to chris"
"email to chris hello"
I'm using "chris" because that's the name of someone in my GMail contacts list. If you don't have a "chris" in your contacts list, just substitute the name of any of your friends in these examples.
Let's say I've found an interesting fact on a web page and I want to send it to Chris. I can select part of the page, including links, pictures, and anything else, and then issue "email this to chris". Ubiquity understands "this" to refer to my selection. (I could also have said "email it to chris" or "email selection to chris" -- all of these are equivalent.) The selected part of the page shows up in my preview:
https://wiki.mozilla.org/images/5/5b/Email-picture-selection.png (https://wiki.mozilla.org/File:Email-picture-selection.png)
(Actual email addresses blurred out to protect the innocent.) Since I know several people named Chris, there are several lines in the suggestion list -- one each Chris in my GMail contacts list. I can arrow-key down to the Chris I want and then hit the Enter key.
I'm taken to the GMail "compose new email" page. The chunk of the page that I selected is reproduced in the body of my email, the "to" field is filled with the email address I selected, and the "subject" field contains the title of the web page I was on. I can now edit this email to add anything else I want to say, before clicking "Send".
The Map command
Let's say you're arranging to meet up with a friend at a restaurant, and you want to include a map in the email. (Yes, it's Aza's favorite example.)
Type out the address you want to map, then select it and issue "map". In the preview, you'll see a thumbnail-size map of the area (from Google Maps).
https://wiki.mozilla.org/images/7/7f/Map-preview-1.png (https://wiki.mozilla.org/File:Map-preview-1.png)
If you execute the command, you'll be taken to the Google Maps page. Or, you can click on the image in the preview to get a larger, interactive version. After scrolling and zooming this map to your liking, you can click the "insert map in page" link to insert the map into your email.
https://wiki.mozilla.org/images/6/62/Map-preview-2.png (https://wiki.mozilla.org/File:Map-preview-2.png)
You can give it a try by selecting the address below and issuing "map":
Mozilla Corporation, 1981 Landings Drive, Mountain View, CA
Then click the image in the preview to get the larger map, then click the "insert map in page" link and watch what happens. Surprised?
The Translate command
That's right, Ubiquity commands can alter the contents of a page, even if the page wouldn't normally be editable. A command that makes good use of this ability is the "Translate" command. To try it, select the text below and issue "translate" (or just "tra") and execute.
21世紀に、国際化をよく考えなければなりません。
It's translation-by-machine, so the results are bound to sound awkward, but at least you can get the gist of the meaning.
The full command is
translate (text) (from language) (to language)
So you can specify what language you want to translate from, and what language you want to translate to. If you leave either of these out, Ubiquity will just make a guess about what you want.
Here are some other examples you can try:
"tr good evening to spanish"
"tr buenas tardes from spanish to french"
Select some English text on this page and then: "translate this to german"
Going Further
Getting Help and Discovering Commands
By now you're probably wondering, "How many commands are there? What are they all called? How am I supposed to know what a command could be unless I memorize them all?"
These are good questions! To start getting some answers, issue the "command-list" command, and hit Return to execute it. You'll be taken to a special page listing every command you have installed, and describing what each one does.
https://wiki.mozilla.org/images/9/98/Command-list.png (https://wiki.mozilla.org/File:Command-list.png)
For more general help, you can execute the "help" command. Here, you can change the hotkey that you use to activate Ubiquity, un-subscribe from command feeds, and so on.
The general help page and the command-list page link to each other, so whichever one you open, you can get to the other with a single click.
You can also get to the main help page by typing about:ubiquity into the Firefox URL bar.
Teaching Ubiquity New Commands
We've mentioned that anyone can create Ubiquity commands. Once created, these commands can be embedded in any web page. If you have Ubiquity installed and you visit a page with an embedded command, Firefox will present you with the option of subscribing to the command.
To see this in action, you can visit this example page on Atul's personal site (http://hg.toolness.com/ubiquity-firefox/raw-file/7435416f211a/examples/sample-cmd.html). You should see a bar coming down from the top of the browser window asking you whether you want to subscribe to the command or not.
http://www.toolness.com/images/20080820111209.jpg
If you choose to subscribe, you'll see a rather scary-looking warning page:
http://www.toolness.com/images/20080820111725.jpg
It's important to understand the dangers of subscribing to Ubiquity commands from sites that you don't trust. Since a Ubiquity command can do anything, and it has full access to your web browser, a bad person could write a Ubiquity command to steal your personal information or do malicious things to your computer. You should not install Ubiquity commands unless you are confident that the source is trustworthy.
In the future, we'll be creating something called a "trust network" that Ubiquity users can use to share knowledge about which commands are trustworthy. When you visit a page with an embedded command, you'll be able to see what your friends with Ubiquity have said about this command -- whether they've given it a thumbs-up or left you a warning to let you know it could be dangerous. This system doesn't exist yet, but once it does we will modify this section of the tutorial to let you know how to use it.
Woah. Thats awesome.