Mozilla Labs

Today, Mozilla Labs has two exciting announcements to make.

First, the Mozilla Labs Weblog has been redesigned, and now sports a new and colorful theme we hope reflects the spirit of playfulness and exploration we wish to instill in all things related to Mozilla Labs.

Second, along with the new theme, we’re launching the brand new Mozilla Labs Forum — the central meeting and discussion area for the Labs community. Here you will find forums dedicated to:

• Joey. Joey is a server, Firefox add-on, and java midlet that allow you to pass data from your Firefox browser to cell phone.
• Operator. Operator is a Firefox add-on that lets you combine pieces of information on Web sites with applications through the use of Microformats.
• The Coop. The Coop is an emerging Firefox add-on that will let users keep track of what their friends are doing online, and share new and interesting content with one or more of those friends.
• Idea Center, where you are encouraged to post your ideas about possible features or add-ons for Firefox, or even ideas for whole new Web-related products, projects, and technologies.
• Mozilla Labs Discussion, for discussing anything and everything about Mozilla Labs itself. If you have ideas about how this project could be improved, or if you problems with or questions about anything to do with Labs, please post here.

Laboratories are where science and creativity meet to develop, research, and explore new ideas. Mozilla Labs embraces this great tradition — a virtual lab where we can all come together to create, experiment, and play with new Web innovations and technologies.

Anything goes here. Crazy ideas and inspirations are encouraged as we all explore and experiment with brand new ideas in whole new ways. Mozilla Labs is about inspiring and harnessing the intelligence, wisdom, and energy of the Mozilla community; let’s imagine the future of the Web, and then let’s build it together.

All are welcome. Come play.

Introducing Operator, a Microformat Detection Extension for Firefox 2

Today Mozilla Labs is releasing Operator, a microformat detection extension developed by Michael Kaply at IBM. Operator demonstrates the usefulness of semantic information on the Web, in real world scenarios.

Here are some examples of things you can do with this release of Operator, and with the Web as it exists today.

Yahoo! Local Your Address Book

With Operator you can send the phone number of your favorite pizza place from Yahoo! Local to your address book, without having to type anything. Click through for the full image:

Upcoming.org Calendar Maps

If you view an event at Upcoming.org you can easily add the event to your calendar to see if you are free, or map the location of the event to see where it will take place.

Blog Post Tag Flickr

Let’s say you are viewing Fred’s post about the Mozilla lanyards given out at the Firefox Summit, and you decide you want to view more photos of the Firefox Summit. With Operator, you can easily navigate from Fred’s post to the “Firefox Summit” tag on Flickr.

Flickr Maps

Now let’s say you want to know where the above picture was taken. Because the photograph is geotagged, you can use Operator to quickly push its’ coordinates to Google maps.

This works for any of the millions of geotagged pictures on Flickr.

Operator requires information on the Web to be encoded using microformats, and since this method for semantically encoding information is relatively new, not all sites are using microformats yet. However, Operator works great with any blog that uses rel-tag, and the sites Yahoo! Local, Flickr, and Upcoming.org, all of which contain millions of pieces of information expressed using microformats. As more sites begin to semantically encode data with microformats, Operator will automatically work with them as well.

If you are not familiar with microformats, Alex Faaborg has been posting about microformats throughout the week. These posts serve as a good introduction:

• Part 0: Introduction to Microformats
• Part 1: Structured Data Chaos
• Part 2: The Fundamental Types

Operator isn’t the first microformat detection extension for Firefox, previously microformat detection in Firefox was possible with the Tails Export extension by Robert de Bruin. Operator builds on Tails Export by having a user interface that is based around actions the user can take, instead of data types. Operator also includes support for the microformats geo and rel-tag, and is compatible with Firefox 2.

After using Operator for awhile, you will find yourself quickly transferring structured data to your favorite applications without typing a single letter, you will be hoping around the Web without navigating on hyperlinks, and you will be remixing services in ways that are really useful.

The combination of microformated content on the Web and the Operator extension for Firefox results in a kind of data cross pollination that we think is very exciting.

Operator as Tool for Adding Microformated Content to Your Web Site

[Update: Additional technical information about Operator can be found on Michael Kaply’s blog]

In addition to demonstrating why microformats are important to end users, Operator can also be used as a tool for testing microformated content you have added to your Web site. Operator’s creator Michael Kaply explains:

In creating Operator my goals were to create something that was useful to microformat developers as well as users looking to explore microformats. As such, the Operator Toolbar can be displayed in two modes: Microformats mode and Actions mode.

In Microformats mode, each button on the toolbar represents a microformat. When you select an individual entry from the submenu on the button all the handlers available for that microformat are displayed. You can also change the options so that the default handler for that microformat is invoked when an individual entry is selected, as opposed to displaying all the handlers. In addition, you can choose to use a more descriptive name (for instance Contact(s) instead of hCard).

I have added some other useful features for developers. When you hold down the Shift key and select an entry in a microformats submenu, it displays the internal representation of the selected microformat item. When you hold down the Ctrl key and select an entry in a microformats submenu, it displays the source of the selected microformat item. Also, if debug mode is turned on in options, when an invalid microformat is detected, the menu text is changed to “Invalid – select for more details.” If you select the menu item, it will give you a message indicating what we believe is incorrect about the entry.

The Operator extension is also very extensible, allowing for not only the creation of additional microformats, but also the addition of handlers to existing microformats. There are sample files provided in the directory where the extension is installed for both of these cases. To use the new microformat or handler, place it in a directory called “microformats” in your profile directory.

I know I will get a few questions about some things, so I thought I’d handle them here as well.

Q: Why didn’t you use the XSLT transforms from Brian Suda to export to iCal and vCard?

A: Brian has done some great work, and I did take a look at those in the beginning but decided against them mainly because I needed more flexibility in my code to access the individual items in the microformats. Because of this, I parse the microformats myself and store the data in Javascript. Also, I wanted all the code in the extension to be original. I realize my export is not anywhere near as complete as Brian’s – that’s being worked on.

Q: Aren’t the Tails and Tails Export extensions good enough? Why do we need more extensions in the microformat space?

A: The Tails and Tails Export extensions are great and they provided my first glimpse at using microformats in the browser. I quickly discovered though that the interfaces they provided (sidebar and status bar) were not what I was looking for and it was not easy to add custom handlers and microformats. My goal with this new work was to make it easy to tailor the microformat concept for the end user as well as provide more options for developers working on microformats.

Get Operator

You can download Operator at addons.mozilla.org.

Comments

If you are interested in commenting, please use this thread in mozilla.dev.apps.firefox, or comment below.

Technorati Tags: microformats

Today we are featuring a Firefox extension that Justin Dolske just whipped up called Chromatabs. It colorizes each browser tab to provide a strong visual indication of which site is loaded. Here’s a screen shot of it in action:

Let’s first take at the fundamental principle of why colors are useful. In the image below, try to do these two things:

1) Find all the red letters

2) Find all the K’s

You likely found the first task an order of magnitude easier than the second task [1]. This is because of difference in the way our visual system processes color compared to the way that it processes shapes. You can view all of the red letters with a single glance, or even spot them with your peripheral vision. Finding all of the K’s requires a close visual scan.

What does this have to do with tabbed browsing? Well, tabs use the same two visual variables (color and shape) to differentiate themselves from each other. Favicons provide a small amount of color, and the title text of the page consists of a series of shapes. Unfortunately some sites don’t have a favicon, or the favicon they do have isn’t sufficiently unique. Without favicons, you have to do a visual scan to find the correct tab — you can’t spot it with your peripheral vision.

This problem has attracted some interest from the community already. Many of you may be familiar with the popular Firefox extension Colorful Tabs. Its solution is to simply assign each new tab a color from a fixed list, in sequence. First example, the first tab will be blue, the second is yellow and the third green. The tab remains that color until it is closed. Each time you browse the web, you’ll have to remember what a particular color means at the moment:

Chromatabs’ approach to coloring tabs is different. Instead of assigning an essentially-random color to a tab when it is opened, a color is derived from the site currently loaded in the tab. For instance, this means that blog.mozilla.org will always be red, and engadget.com will always be purple:

So, how does it do that? Well… It takes the hostname from the URL, converts it to a number via a simple hash function, and then uses the number as a hue in HSL colorspace to obtain a final color. Justin has a blog entry discussing this and other technical details of Chromatabs’ operation in greater detail.

By keeping each site’s tab color consistent, the user can build up a mental model of what colors are associated with their favorite sites.

Future Work

Chromatabs was built as an experiment to test a concept. There are a number of directions someone could take this prototype to improve it and try new ideas. Here’s a few possibilities that might be interesting:

• It might be more intuitive if Chromatabs analyzed each page to determine the most prominent color on the page, and then used that color for the tab. You would then see Slashdot tabs in their distinctive green, Fark tabs in purple, and Zombo.com tabs in, uhhh… oooooo….
• Unfortunately not everyone likes rainbows and unicorns. In the process of converting a domain name into a RGB value, perhaps Chromatabs should also base the color on an aesthetically pleasing color pallet. Does anyone know a good algorithm to create beautiful color pallets?
• A similar problem area is coloring groups of tabs. Here the focus would be on coloring groups of tabs in a unique color, which could be ephemeral and not based on the site’s address.
• Give the user greater control over their browsing experience by allowing them to customize the color for a site. This might have some anti-phishing benefits as well (for example, expecting your bank’s web site to have the bright green color you assigned to it).

The Chromatabs extension is open source, so it’s a good starting point for anyone wanting to try out their own variation.

Discussion Topics

• What if instead of just providing a favicon.ico, Web designers were able to design the surface of the tab?
• What other ways could the browser provide a richer and more dynamic tabbed interface? For instance, Aging Tabs is really creative, bringing temporal information into the mix.

[1] From an HCI lecture (PDF) by professor Rob Miller

“Wow!” is all I can say. I didn’t quite expect this level of response to the recent Labs survey about areas for investigation but I’m really thrilled to have your feedback and participation. Here’s the survey summary.

As of August 30th, we received approximately 1800 completed surveys. Here are some of the stats:

• Almost 20% provided comments in the survey itself or as a blog comment
• About 4.2% felt that there was nothing from the listed browsers that was interesting (or simply provided comments but didn’t check any feature)
• In terms of browser interestingness, here’s how the browsers stacked up. Opera (80%), Safari (71%), Flock (38%), IE7 (70%). (Interesting being defined as one or more features from existing browsers was selected as “interesting”.)

For features, here is the top quartile of features ranked by percentage of total votes received:

Below is the full vote result:

We’ll be using all your survey and blog comments to help populate the Ideas area of Labs. Stay tuned. There were many comments essentially saying that people didn’t want to see Firefox bloated with extraneous features…I think that message came loud and clear.

Off the topic of Labs form and structure, I’d like to get your opinion on general directions and areas for investigation.

Sherman Dickman has initiated a fruitful discussion around Firefox themes and product strategy in the mozilla.dev.planning newsgroup. There is lots of interesting efforts going on in the browser space right now. What areas being showcased by other Internet client products today should Mozilla explore?

I understand that there is a rich set of functionality already implemented by the myriad of Firefox extensions. I want to try to examine broad areas of functionality rather than details of feature operations. Let’s see if this thought experiment proves to be informative.

It’s four questions only. If you find the survey too stifling or is missing something, please just add your comments at the end of the blog post.

Admin Note: I’ve added a new look to MozLabs Blog. Thanks go out to Deb Richardson for sharing with me her WordPress theme from Mozilla Developer Center (MDC).

[survey_fly]

One significant part of Mozilla Labs will be the Ideas Area where we will encourages contribution of great ideas from the community. Currently, there is a moderately active newsgroup (mozilla.wishlist) where ideas are flowing. For Labs, I was thinking of something a bit more structured. But how much structure?

Two aspects that I would like feedback on:

1) How to track and categorize the ideas?

A forum/newsgroup or linear list structure is hard to navigate, so I was thinking of creating browseable categories. Under each category would appear Idea items and discussion around each of those. Should the categories map identically to what’s currently on Add-ons (See “All Categories”) with a few more. Should we use tags instead so that items can appear in multiple categories?

2) How to have the best/most popular ideas rise to the top?

I know Mozilla is known for having a collaborative process that surfaces the best ideas. How does this work? Give me your thoughts. Shall we use voting? 1-10 rating for ideas? Use a process like digg/bury from digg.com? Give each community member 1000 points and have them allocate their points across their favorite ideas? Simply track the level of discussion and activity around a topic area? Other?

This web log presents updates from the new Mozilla Corporation effort, Mozilla Labs. Labs is a place for “exploring the future of the web experience.” The discussion around Labs started with the informed musing of Mitchell Baker, Chief Lizard Wrangler, and the need for prototypes in the Mozilla product development process.

To get the process started, some brainstorming sessions were held with various members of the Mozilla Community. The notes and ideas are being incorporated into the various Mozilla Labs resources. I have created a Wiki where the first order of business is to help clarify the goals and objective of Mozilla Labs. I have uploaded a short presentation that reviews the highlights.

I encourage you to provide me feedback through comments and editing of the Wiki pages with ideas that you think would be appropriate for Labs as well as companies that Mozilla Labs should encourage to participate. I also have a huge list of To Do’s for Mozilla Labs, feel free to add to my pile.

Finally, I expect Mozilla Labs to evolve drastically over time and you can help shape its direction. Thanks.