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.

Google Adds +1 to help your site

When was introduced the +1 button in March, Google search took a small step in an important direction. Search results can be more helpful, and more personal, when recommendations from the people you trust are there to guide your way.

The +1 button can help publishers, too. As potential visitors see recommendations from their friends and contacts beneath your Google search results, you could see more, and better qualified, traffic coming from Google.

Since we announced +1, we’ve gotten lots of requests from Google search users and webmasters alike for +1 buttons in more places than just search results. That’s why today we’re making the +1 button available to sites across the web. Sometimes you want to recommend a web page after you’ve visited it. After all, how do you know you want to suggest that great article on Spanish tapas if you haven’t read it yet?


We’ve partnered with a few sites where you’ll see +1 buttons over the coming days:

Partner Logos

AddThis Mashable Huffington Post Rotten Tomatoes Nordstrom O'Reilly Reuters Washington Post Best Buy TechCrunch Bloomberg

You’ll also start to see +1 buttons on other Google properties such as Android Market, Blogger, Product Search and YouTube.

Adding +1 buttons to your pages is a great way to help your content stand out in Google search. By giving your visitors more chances to +1 your pages, your search results and search ads could show up with +1 annotations more often, helping users see when your pages are most likely to be useful.

To get started, visit the +1 button tool on Google Webmaster Central. You’ll be able to configure a small snippet of JavaScript and add it to the pages where you want +1 buttons to appear. You can pick from a few different button sizes and styles, so choose the +1 button that best matches your site’s layout.

In the common case, a press of the button +1’s the URL of the page it’s on. We recommend some easy ways to ensure this maps as often as possible to the pages appearing in Google search results.

If your site primarily caters to users outside of the US and Canada, you can install the +1 button code now; the +1 button is already supported in 44 languages. However, keep in mind that +1 annotations currently only appear for English search results on Google.com. We’re working on releasing +1 to searchers worldwide in the future.

If you have users who love your content (and we bet you do), encourage them to spread the word! Add the +1 button to help your site stand out with a personal recommendation right at the moment of decision, on Google search.

To stay current on updates to the +1 button large and small, please subscribe to the Google Publisher Buttons Announce Group. For advanced tips and tricks, check our Google Code site. Finally, if you have any questions about using the +1 button on your websites, feel free to drop by the Webmaster Help Forum.

The Globalization of Social Search

In 2009 we first introduced Social Search on google.com as an experimental feature designed to help you find more relevant information from your friends and the people you care about. Since then we’ve been making steady improvements to connect you with more people and more relevant web results. Today, we’re bringing Social Search to more users around the globe.

Just like on google.com, social search results in other languages and on other domains are mixed throughout the Google results page based on their relevance. For example, if you’re looking for information about low-light photography and your friend Marcin has written a blog post about it, that post may show up higher in your results with a clear annotation and picture of Marcin:

Social search results can rank anywhere on the page, and you’ll see who shared the result in the annotation underneath.

 


 
Social Search can help you find pages your friends have created, and it can also help you find links your contacts have shared on Twitter and other sites. If someone you’re connected to has publicly shared a link, we may show that link in your results with a clear annotation. So, if you’re looking for information about modern cooking and your colleague Adam shared a link about Modernist Cuisine, you’ll see an annotation and picture of Adam under the result. That way when you see Adam in the office, you’ll know he might be a good person to ask about his favorite modern cooking techniques.

Social Search includes links people share on Twitter and other services.

So how does this all work? Social search results are only visible to you and only appear when you choose to log in to your Google Account. If you’re signed in, Google makes a best guess about whose public content you may want to see in your results, including people from your Google chat buddy list, your Google Contacts, the people you’re following in Google Reader and Buzz, and the networks you’ve linked from your Google profile or Google Account. For public networks like Twitter, Google finds your friends and sees who they’re publicly connected to as well. You can see a complete list of the people included in your social search results in your personal Google Dashboard (this display is private). For an overview of Google Social Search, check out the explanatory video:

Social Search is rolling out globally in 19 languages and should be available in the coming week, with more languages on the way. People around the world will find similar types of social results as people in the U.S., and we plan to introduce the +1 feature as soon as we can. With these changes, we want to help you find the most relevant information from the people who matter to you.