About Browsers and the Web

Late last year, Google released an illustrated online guidebook for everyday users who are curious about how browsers and the web work. In building 20 Things I Learned about Browsers and the Web with HTML5, JavaScript and CSS with our friends at Fi, we heard from many of you that you’d like to get your hands on the source code. Today, They’re open sourcing all the code for this web book at http://code.google.com/p/20thingsilearned, so that you can use and tinker with the code for your own projects.

20 Things I Learned was celebrated this year as an Official Honoree at the 15th Annual Webby Awards in the categories of Education, Best Visual Design (Function), and Best Practices. For those of you who missed our initial release last year, here’s a quick recap of the APIs behind some of the web book’s popular features:

  • The book uses the HTML5 canvas element to animate some of the illustrations in the book and enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas. You can read more about the page flips on this HTML5rocks tutorial.
  • The book takes advantage of the Application Cache API so that is can be read offline after a user’s first visit.
  • With the Local Storage API, readers can resume reading where they left off.
  • The History API provides a clutter-free URL structure that can be indexed by search engines.
  • CSS3 features such as web fonts, animations, gradients and shadows are used to enhance the visual appeal of the app.

With this open source release, we’ve also taken the opportunity to translate 20 Things I Learned into 15 languages: Bahasa Indonesia, Brazilian Portuguese, Chinese (Simplified and Traditional), Czech, Dutch, English, French, German, Italian, Japanese, Polish, Russian, Spanish, and Tagalog.

We hope that web books like 20 Things I Learned continue to inspire web developers to find compelling ways to bring the power of open web technologies to education. 20 Things I Learned is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. For those of you who’ve previously read this web book, don’t forget to hit refresh on your browser to see the new language options.

How to Add Gesture Search to your Android apps

Gesture Search from Google Labs now has an API. You can use the API to easily integrate Gesture Search into your Android apps, so your users can gesture to write text and search for application-specific data. For example, a mobile ordering application for a restaurant might have a long list of menu items; with Gesture Search, users can draw letters to narrow their search.

Another way to use Gesture Search is to enable users to select options using gestures that correspond to specific app functions, like a touch screen version of keyboard shortcuts, rather than forcing hierarchical menu navigation.
 


 
In this post, I’ll demonstrate how we can embed Gesture Search (1.4.0 or later) into an Android app that enables a user to find information about a specific country. To use Gesture Search, we first need to create a content provider named CountryProvider, according to the format required by Android Search framework. This content provider consists of 238 country names.

Then, in GestureSearchAPIDemo, the main activity of the app, we invoke Gesture Search when a user selects a menu item. (Gesture Search can be invoked in other ways depending on specific applications.) To do this, we create an Intent with the action "com.google.android.apps.gesturesearch.SEARCH" and the URI of the content provider. If the data is protected (for example, see AndroidManifest.xml), we also need to grant read permission for the content URI to Gesture Search. We then call startActivityForResult to invoke Gesture Search.

public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    menu.add(0, GESTURE_SEARCH_ID, 0, R.string.menu_gesture_search)
        .setShortcut('0', 'g').setIcon(android.R.drawable.ic_menu_search);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
      case GESTURE_SEARCH_ID:
        try {
          Intent intent = new Intent();
          intent.setAction("com.google.android.apps.gesturesearch.SEARCH");
          intent.setData(SuggestionProvider.CONTENT_URI);
          intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
          intent.putExtra(SHOW_MODE, SHOW_ALL);
          intent.putExtra(THEME, THEME_LIGHT);
          startActivityForResult(intent, GESTURE_SEARCH_ID);
        } catch (ActivityNotFoundException e) {
          Log.e("GestureSearchExample", "Gesture Search is not installed");
        }
        break;
    }
    return super.onOptionsItemSelected(item);
  }

In the code snippet above, we also specify that we want to show all of the country names when Gesture Search is brought up by intent.putExtra(SHOW_MODE, SHOW_ALL). The parameter name and its possible values are defined as follows:

/**
   * Optionally, specify what should be shown when launching Gesture Search.
   * If this is not specified, SHOW_HISTORY will be used as a default value.
   */
  private static String SHOW_MODE = "show";
  /** Possible values for invoking mode */
  // Show the visited items
  private static final int SHOW_HISTORY = 0;
  // Show nothing (a blank screen)
  private static final int SHOW_NONE = 1;
  // Show all of date items
  private static final int SHOW_ALL = 2;

  /**
   * The theme of Gesture Search can be light or dark.
   * By default, Gesture Search will use a dark theme.
   */
  private static final String THEME = "theme";
  private static final int THEME_LIGHT = 0;
  private static final int THEME_DARK = 1;

  /** Keys for results returned by Gesture Search */
  private static final String SELECTED_ITEM_ID = "selected_item_id";
  private static final String SELECTED_ITEM_NAME = "selected_item_name";

As you can see in the code, when Gesture Search appears, we can show a recently selected country name, or nothing. Gesture Search then appears with a list of all the country names. The user can draw gestures directly on top of the list and a target item will pop up at the top. When a user taps a country name, Gesture Search exits and returns the result to the calling app. The following method is invoked for processing the user selection result, reading the Id and the name of the chosen data item.

@Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (resultCode == Activity.RESULT_OK) {
      switch (requestCode) {
        case GESTURE_SEARCH_ID:
          long selectedItemId = data.getLongExtra(SELECTED_ITEM_ID, -1);
          String selectedItemName = data.getStringExtra(SELECTED_ITEM_NAME);
          // Print out the Id and name of the item that is selected
          // by the user in Gesture Search
          Log.d("GestureSearchExample", selectedItemId + ": " + selectedItemName);
          break;
      }
    }
  }

To use the Gesture Search API, you must be sure Gesture Search is installed. To test this condition, catch ActivityNotFoundException as shown in the above code snippet and display a MessageBox asking the user to install Gesture Search.

You can download the sample code at http://code.google.com/p/gesture-search-api-demo.

Google Code Jam 2011

The Googlers are spending their 20% time to get ready for Google Code Jam 2011, preparing algorithmic problems for the 10,000 or more contestants who we expect to compete in our Qualification Round this Friday.

A good Code Jam problem has a story to ground it in some version of reality: soccer, ninja and messages from alien cultures have all served admirably. Cushioned by the story, the core of a Code Jam problem is an algorithmic puzzle whose solution needs anything from a few lines of code to a deep understanding of flow algorithms or number theory.

The ninja in the middle is solidly grounded in reality.

Anyone at Google can create Code Jam problems, which means that our methods for inventing them vary wildly. One author might come across a real-life situation, think about what algorithm would solve it, and base a problem on that; another author might think about how to make a problem out of a video game. Sometimes a problem author will start with an algorithm and concoct a problem that it solves. We also really seem to like inventing weird situations on chess boards.

With the story and the problem chosen, our work is only partly done. The problem has to be stated in such a way that it will be clear, even for an audience from 125 countries. At least three engineers work on each problem’s statement: that group includes at least one native English speaker to make sure the grammar is all correct, and at least one non-native English speaker to make sure the language is clear enough.

The toughest part about setting up a problem like this is verifying that contestants got it right. In Code Jam, we do that by providing contestants with an input file full of test data. They send back their program’s output, which should be the answer to the input file’s question. The hard part is deciding what goes in that input file: we need edge cases, plenty of average cases, and a good number of cases that make sure the contestant’s code is fast enough. To create all of those, we generate some cases by hand and others pseudo-randomly. We’ve been known to generate a test case or two out of ASCII art, or as a creative-writing exercise.

Finally, we solve the problems ourselves. We require at least three solutions made by different engineers, and sometimes we have those engineers write solutions that we know to be wrong – just to make sure our test data catches them out.

The end result of this process is the kind of problem we’re proud to ask our contestants to solve. In 2011 more than any other year, we’re excited about the creativity of our colleagues and the problems we’re planning to pose. We hope you’ll enjoy the problems from the other side – and if you’re a great software engineer, maybe come help us write them in 2012.

You can register for Google Code Jam 2011 at http://code.google.com/codejam, and you’ll see the first problems of the year in the Qualification Round this Friday, May 6, starting at 23:00 UTC. For even more details about how we get problems ready for Code Jam, you can read our official problem-preparation guide.
Bartholomew Furrow spends 80% of his time at Google finding ways to eliminate bad search ads, and the rest on Code Jam. Programming contests introduced him to Computer Science, to Google, and to his wife.