Google+ is the new shiny social network that was recently opened up by Google. I was as happy as every other geek who got an invite to get in. Within a week, I was addicted to the real-time status updates, happy photo-posting and tagging, and hacking, I mean, updating of my profile.

It was all fun and games until I saw “Your profile is suspended” when I logged in. Read more about my story on GeekBeat.TV..

Talk about instant! Google just rolled out Google Instant this morning. Now search results display as you type, bringing you results much faster.

To see it in action, go to Google.com and start typing. The search box then turns into the results page. And as you keep typing, the search results change, bringing you a step closer to what you were looking for. It’s pretty nifty! Note: not all users have this option available yet. It may take a few days before everyone sees the new feature.

Google Instant is a new search enhancement that shows results as you type. We are pushing the limits of our technology and infrastructure to help you get better search results, faster. Our key technical insight was that people type slowly, but read quickly, typically taking 300 milliseconds between keystrokes, but only 30 milliseconds (a tenth of the time!) to glance at another part of the page. This means that you can scan a results page while you type. (Google.com/instant)

Introducing Google Instant Video

Related Links

• Google Blog: Search Now Faster than the Speed of Type
• Google Instant

This will (1) speed up page loads because text loads faster than images and (2) make the page more accessible (screen readers won’t need to piece together alt tags of images; instead, it’ll just read the text directly off the page. (3) The more text you have on a page, the more SEO-friendly it is.

Lucky for us, adding Google fonts to our webpage is quite easy. All you need is to know a bit of CSS and HTML, and how to copy and paste!

Step 1: Select Font

Go to the Google font directory and choose a font you would like to use. In the sample below, I picked the “Lobster” font.

Step 2: Get the Code

If you like the font, tab over to “Get the Code.” From there, you will get a sample code like this:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'></link>

To include the code into your page, simply copy and paste this code into the header of your HTML page.

If you prefer to include the font it into your CSS stylesheet instead of your HTML header, you can use a code like this instead:

@import url("http://fonts.googleapis.com/css?family=Lobster");

Step 3: Add some style!

Now that you have your font embedded onto your page, it’s time to give it some style. Create a CSS class and add in your font.

In this sample, I created a class called “prettyFont” and made it use the “Lobster” font to display, in huge red font. The alternative “arial and serif” font were added as a backup in case Google Font API was down; these web-safe fonts will display instead of Lobster in that case.

.prettyFont { font-family: 'Lobster', arial, serif; font-size: 3em; color:red; }

That’s pretty much it! Adding Google Fonts to your page is as simple as 1-2-3! You can also go even more wild and add shadows, shading, and anything else you can do with HTML + CSS.

For more information, see the Google Font API documentation. For more sample codes, check out Getting Started with Google Font API. And if you want to dive in deeper and add in italic, bold, and bold italic fonts, see their further reading section.

Another Google I/O has come and gone, and I had a fabulous and geeky time there. The great thing about Google I/O is that it’s geared toward developers, so the sessions are usually code-based or overviews of new APIs and developments over in Google HQ.

Of all the things I learned about this year at the conference, the most exciting was learning what direction HTML 5 is heading in. Last year, I learned about the new <video> and <canvas> tags, but there’s so much more now.

This year’s conference was much bigger than the previous years. The conference sold out quickly with 5000 attendees. There were sessions going on in every room on the second floor of Moscone West Hall. I was most impressed with the bigger Developer’s Sandbox. It was 4 or 5 times bigger than last year’s. It was great talking to companies and developers who are already implementing Google products into their products.

Although I was drained from attending all the sessions, I didn’t want to miss the Google After Party. It’s actually a very geeky event with food and robots! The MakerFaire was in town and they had some amazing displays, robots, and man-powered machines all over the party.. definitely something you don’t want to miss while at the conference.

There was a lot of fun and excitement at this year’s Google I/O. There were many amazing announcements as well, including the Web-M project (standard video codec), new features in Android Froyo including support of Flash, Google TV, and our fabulous gifts for attending — the Sprint HTC Evo 4g — a gorgeous smartphone running Android!

Below is a summary of all the sessions I attended. For more information on each session, please follow the links to the Google Waves. The official YouTube videos will be coming soon. For more information about the conference, see the official Google I/O 2010 website.

• Bringing Google to your Site
• Beyond Design: Creating positive User Experiences
• Developing with HTML 5
• Ignite Google I/O
• Google Analytics APIs: End to end
• Surf the Steam: Google Buzz, Location, and Social Gaming
• SEO Site Advice from the Experts
• Optimize every bit of your site serving and web pages with Page Speed
• HTML 5 Status Update

Summary of each Session

Bringing Google to your Site – In this session, we got many different examples on how we can add Google to our websites. Some examples were using custom searches (now with auto-completion), Google Feed API, Adsense with AJAX (new), SideWiki, Buzz API and Google Font API.

Beyond Design: Creating positive User Experiences – In this session, I learned that there are 7 principles for creating positive user experiences: 1) Be fast 2) Be yourself 3) Engage in conversations 4) Be willing to give up control 5) Be polite 6) Be prepared for failure 7) Be reliable. Examples of these principles were also talked about.

Developing with HTML 5 – This session was great since the presentation itself was written in all HTML 5 tags and coding. If you flip through the presentation, you can try out the bleeding edge features available for browsers in the near future. Some new HTML 5-specific tags and features are offline data storage, JS APIs, <head>, <hgroup>, <nav>, <section>, <article>, <aside>, <footer>, new form field types, <audio>, <video>, <canvas>, new CSS selectors and font support, transitions, and so much more. Run the presentation in a Chrome browser to see what lies ahead.

Ignite Google I/O – This session was a lot of fun. Ignite sessions capture geek cultures in a series of 5-minute speedy presentations. Each speaker gets 20 slides that auto-advances after 15 seconds. Topics were of various topics, from surviving the North Atlantic ocean and breaking world records, to our habits of searching on the internet, to playing battleships in a pond. It was very entertaining and super geeky.. and is best if you see the videos once they’re up.

Google Analytics APIs: End to end – This session was given by a UCR Alumni, Nick Mihailovski! This session demonstrated advance techniques of tracking statistics on your website using the Google Analytics API. For more information, see “What is Google Analytics”

Surf the Steam: Google Buzz, Location, and Social Gaming was not my favorite session since they spent a few minutes talking about the new Buzz Api, and then started stepping through code on how to implement the BuzzBingo game. The one thing I learned from this session was that there’s a new Buzz API — great if you want to create a social game!

SEO Site Advice from the Experts was an excellent session. It was a panel of SEO experts who went through a list of submitted sites and let us know what the site is doing right and wrong about SEO. They talked about how important it was to use text on your webpages, how meta keywords aren’t indexed by Google because people inflate them, branding techniques starting with the domain name, content needing to be above the fold, page ranks, 301 redirects, and much more.

Optimize every bit of your site serving and web pages with Page Speed – In this session, I learned about a new project called Page Speed. It’s an open-source Firefox/Firebug Add-on. Developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them. Showslow.com is a demo website that shows the speed of websites. For more information, see Page Speed.

HTML 5 Status Update – In this session, the Chrome team went over new features in HTML 5 we should keep an eye out for. Their demo of the new Gmail was fun and quite intuitive. Drag and drop attachments as if it was a desktop app. New areas in HTML 5 include Offline storage, Media, Networking, CSS3, and Platform Integration (drag and drop, notifications, geolocation).

Android will play a big role in this year’s Google I/O conference, so what better way to get developers excited than to give them an Android OS phone a month in advance. They’ll be able to familiarize themselves with the Android SDK way before the heading to the conference.

Google I/O would like the attendees to be put their new phones to work at the conference. A conference app will be available for download before May 19th, over 40 companies will be demo-ing their apps in the developer sandbox, so there will be more apps for us to test out, and they will continue the tradition of the SCVNGR game where attendees hunt and find hidden QR codes in the conference area.

More answers and questions about the Google I/O gift can be found here. And if you’re attending Google I/O 2010 in San Francisco, I’ll see you there!

Photo by Albertech.net, May 2009, Google I/O 2009

If you’re like me and signed up for newsletters, store ads, or other mailing lists, you may want to separate these emails from your more important ones. I personally think important emails should be sent to the inbox and maybe added to an additional label.

Other things from mailing lists can skip the inbox and be added under their own folder, or “label” as Google calls it.

Step 1: Creating a new label

So let’s create a label (folder) to store these emails in. In the example, I’m creating a label called “Ads” to store all of my store advertisements in. Other labels you can create for are Facebook, Twitter, and other social network notifications, Google Buzz, Work emails, etc.

1. On the top right, click on Settings.
2. Scroll down to the Labels section.
3. In the text box, enter the name for your label and click Create.

Step 2: Find sample email to filter

Now go to your email inbox and find an email you would like to filter out. In the example, I picked a clothing store ad. On the top right of this email, you will see the option to “reply.” Click on the arrow next to it to see all the options available. In the drop-down menu, click on “Filter messages like this.”

Step 3: Setup Filters

Once you click on “Filter messages like this,” it’ll bring you to the Filter page with the From field already filled out. Click on Next Step.

HINT: You can also filter your Google Buzz emails/notifications by putting label:buzz in the Has the words: field. Create a label for these emails before filtering. I put them in a label called GBuzz. More info about Google Buzz filters here.

Step 4: Create Filter

Here is where all the options for the filters are. Let’s have these types of message skip the inbox and filter into the label “ads.”

1. Select “Skip the Inbox” so the message would not appear in your main inbox.
2. Select the appropriate label from the drop down menu. In this case, it’s “Ads.”
3. If you want apply the filter to what’s in your inbox already, checkmark the last option.
4. Click on Create Filter.

I hope this tip will help you keep your Gmail inbox more manageable. As you can see from my inbox counter, I still have a lot more filters to add!

Half of my day consisted of reading your tweets and reviewing apps and gadgets. It’s been quite productive. :) Pictured above is the Motorola Droid, running on the 2.0.1, and the free Google Maps Navigation service. This service alone is worth getting the phone. The turn-by-turn voice navigation is quite awesome. :) Stay tuned, a full review of the Droid to come soon!

More photos:

Disclaimer: The Motorola Droid is a 2-week review unit I was given in exchange for a review.