iGoogle - Haifa Seminar

iGoogle Google Developers Day Haifa Ran Tavory

Google Technologies

Google uses a lot of web-related technologies in its products

We also support and encourage good web technologies for developers worldwide:

Open source projects

Hosting open source project on Google Code

Google Summer of Code

Google Gears (browser offline capabilities)

Googlers contributing to OSS: Linux, Subversion, GCC

Google open technologies and APIs

Google Maps API

Google Data API

Google Ajax API

Google Gadgets API

and many more … (over 35 APIs)

http://code. google .com/

What are Gadgets?

HTML inside an XML wrapper

Mini web pages: HTML, JavaScript, CSS, Flash, AJAX

Anything you can do on a web page, you can do inside a gadget

Write once, runs everywhere

Hundreds of thousands of page views each week

Free hosting and bandwidth

Google Code Hosting

Google Pages

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“Hello World" /> <Content type="html”><![CDATA[ <b>Hello World!</b> ]]></Content> </Module>

Examples of Google Gadgets

Where do Google Gadgets live?

iGoogle homepage

Third-party websites

Google Desktop (Windows, Mac OS X)

Mac OS X Dashboard

Windows Vista Sidebar

IBM WebSphere Portal

iGoogle homepage…

Third-party websites… http://gadgetryout.blogspot.com http://www.puertovallarta.net

Google Desktop…

Mac OS X Dashboard…

Instant Dashboard capabilities

Going from this:

Instant Dashboard capabilities

to this:

Full application (gadget interaction)

http://googlefinanceblog.blogspot.com/2007/10/api-gadgets-and-tabs-oh-my.html

Who writes gadgets?

Individuals

Independent contractors and contracting groups

Professional developers who write gadgets for a living

Teenagers & hobbyists writing gadgets because they’re fun

You

Businesses

Provide useful content to users in gadgets

Extends branch reach

Drives traffic when users click on links for more information

Ex: news, sports, entertainment, pro blogs

Gadgets are open

Gadgets are open-source XML

Developer community worldwide

Easy API: google “gadgets api” or http://www . google . com / api s/ gadgets /

“ Hello world” gadget

<?xml version =" 1.0 " encoding =" UTF-8 " ?>

<Module> <ModulePrefs title =" hello world " / > <Content type =" html " > < ![ CDATA [

Hello, world !

]] >

< / Content>

< / Module>

The Google Gadgets Editor

http://code. google . com/apis/gadgets/docs/gs .html#Scratchpad

API services

ModulePrefs

Title, height, author, description, thumbnail, …

UserPrefs

Saving state

Working with remote content:

RSS, text, XML

I18N

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="My First Gadget"

description="This gadget prints hello world."

height="50"

author="Daniel L."

author_email="my.email@gmail.com"

author_location="Madrid, Spain"

category="tools" />

<UserPref name="Color" datatype="string" default_value="red" />

<UserPref name="Toggle" datatype="bool" default_value="true" />

<UserPref name="Locations" datatype="list" />

<Content type="html"><![CDATA[

<b style="color: red">hello world!</b>

]]></Content>

</Module>

Anatomy of a Gadget User-configurable preferences Gadget content Gadget directory meta-data

Gadget UserPrefs

Allows users to configure your gadget

Multiple types:

Checkboxes

Dropdowns

Text input

Lists

Use “hidden” UserPrefs to store data inside your gadget

Creating a Gadget: Using the API

And more…

SetPrefs

Grid

Drag

Analytics Dynamic Height Tabs MiniMessages Flash

Creating a Gadget: Using the API

Add <Require feature=“…”/> tags to use our libraries

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs …> <Require feature="tabs"/> <Require feature="flash"/> <Require feature="dynamic-height"/> <Require feature="minimessage"/> <Require feature="analytics"/> <Require feature="setprefs"/> <Require feature="drag"/> <Require feature="grid"/> </ModulePrefs> <Content…/> </Module>

Tech Tip 1: Analytics & Numbers

Weekly pageviews are displayed in the Google Gadgets for Your Page directory.

http://www.google.com/ig/directory?synd=open&url= <gadget_url>

For more precise and detailed numbers, it’s a few lines of JavaScript

<ModulePrefs …> <Require feature="analytics"/> </ModulePrefs> … <script> _IG_Analytics("UA-00000", "/mygadget"); </script>

Tech Tip 2: Fetching Remote Content

Fetching remote content is powerful, convenient, and easy!

Text/HTML, XML, RSS/Atom feeds

Cached by default to prevent overloading servers

Built-in RSS/Atom parser outputs in JSON

Three methods available:

_IG_FetchFeedAsJSON(url, callback, entries, summaries) Fetch RSS/Atom feeds. Returns simple JSON object:

Useful when you need general data from the feed:

per feed: URL, Title, Description, Link, Author

per entry: Title, Link, Summary, Date

_IG_FetchXmlContent(url, callback) Fetch XML content. Returns response as XML object.

Useful when fetching XML feeds with no standard format.

Extract any data that you need.

_IG_FetchContent(url, callback) Fetch content. Returns response as text.

Useful when fetching and screen-scraping HTML from the response

Tech Tip 2: Fetching Remote Content <div id="container"></div> <script> function callback(response) { // Iterate through each entry and generate HTML to be inserted var html = new Array(); for (var n = 0; n < response.Entry.length; n++) { var entry = response.Entry[n]; html.push('<a href="' + entry.Link + '">' + entry.Title + '</a>' + '<div>' + entry.Summary + '</div>'); } _gel('container').innerHTML = html.join('<hr>'); } // Fetch 3 entries from Google News Atom feed and include summaries _IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, 3, true); </script> <?xml version="1.0" encoding="UTF-8"?> <feed version="0.3" xml:lang="en" xmlns="http://purl.org/atom/ns#"> <generator>NFE/1.0</generator> <title>Google News</title> … </feed> http://news.google.com?output=atom

<?xml version="1.0" encoding="UTF-8"?>

<Module>

<ModulePrefs title="Page Weight Example" />

<UserPref name="url" display_name="URL" datatype="string" required="true" default_value="http://www.google.com/"/>

<script type="text/javascript">

function onLoadHandler() {

var url = _gel("url").value;

_gel("count").innerHTML = "";

_IG_FetchContent(url, function (response) {

if (response == null) {

_gel("count").innerHTML = "<i>Invalid data.</i>";

} else {

countCharsAndDisplay(response);

}

});

}

function countCharsAndDisplay(response) {

_gel("count").innerHTML = response.length;

}

_IG_RegisterOnloadHandler(onLoadHandler);

</script>

<div style="font-size:0.8em">

Page <input type="text" id="url" value="__UP_url__"/>

<div>Weight: <span id="count" style="color:green"> </span></div>

<input type="button" value="Recalculate" onclick="onLoadHandler()"/>

]]></Content>

</Module>

Tech Tip 3: Internationalize!

Support multiple languages in a single gadget

Increase success in other countries

Specify supported languages in your gadget XML and iGoogle automatically loads the right one

Hello World <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“ __ MSG_title__ "> <Locale lang=“en” messages=“en.xml” /> <Locale lang=“ja” messages=“ja.xml” /> </ModulePrefs> <Content type="html"><![CDATA[ __MSG_hello__ ]]></Content> </Module> hello.xml <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”> Title </msg> <msg name=“hello”> Hello, World! </msg> </messagebundle> en.xml <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”> 題名 </msg> <msg name=“hello”> こんにちは世界 </msg> </messagebundle> ja.xml

Tech Tip 4: Storing State

Example: Simple Notes Gadget

User creates notes and saves them in iGoogle

Remember user’s notes whenever coming back to the page.

Let the user set a different background color for the gadget

Tech Tip 4: Storing State

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="Note" height="80">

<Require feature="setprefs"/>

</ModulePrefs>

<UserPref name="text" default_value="Type text here.”

datatype="hidden"/>

<UserPref name="color" display_name="Color” default_value="#ffffcc" datatype="enum"> <EnumValue display_value="Yellow" value="#ffffcc"/> <EnumValue display_value="Blue" value="#e5ecf9"/> <EnumValue display_value="Green" value="#e0eee0"/>

</UserPref>

<script>

function save() {

var prefs = new _IG_Prefs();

prefs.set("text", _gel(‘note’).value);

}

</script>

<style>

#container {

background-color: __UP_color__;

text-align: center; padding:6px;

}

</style>

<div id=container>

<div><textarea id="note"/>__UP_text__</textarea></div>

<input type="button" value="Save Note" onclick="save()" />

</div>

]]></Content>

</Module>

Tech Tip 5: Caching External Resources

Facts:

Google caches all gadget XML files

Google caches all requests going through_IG_Fetch…() methods.

Gadgets receive tons of traffic (Date & Time gadget currently at 156M pvs/week)

Remaining Problem:

Gadgets often embed external resources hosted on third-party servers, e.g. images, Flash

Hosting servers melt down because they cannot handle all the requests

Solution:

Use API methods to cache all embedded resources on iGoogle

_IG_GetImage(url) - Returns HTML image fetched from the cache

_IG_GetImageUrl(url) - Returns URL used to fetch the image via cache

_IG_GetCachedUrl(url) - Returns URL used to fetch the resource via cache

Tech Tip 5: Caching External Resources

Caching images

Caching Flash

<img id="goImg" src="" width=100 height=150 /> <script> _gel("goImg").src = _IG_GetImageUrl("http://domainA.com/go.gif"); </script> <div id="container"></div> <script> var cacheUrl = _IG_GetCachedUrl(‘http://mydomain.com/flashvideo.swf’); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 }); </script>

Advanced API

Gadget-to-gadget communication:

Read http :// www . google . com / apis / gadgets / pubsub . html

It’s new and cool

Feeds in tabs step-by-step

Fetches and displays multiple RSS/Atom feeds

Uses multiple API features:

tabs, dynamic-height, analytics, setprefs

Highly configurable

Feed URLs

Font size

Number of feed entries to display

Mor e

Building a Gadget

Start small with a simple gadget XML that contains bare essentials

Don’t worry about gadget metadata or UserPrefs yet.

Focus on the content. Customize the gadget later.

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Feeds in Tabs" height="250"/> <Content type="html"><![CDATA[ Here's my gadget content! ]]></Content> </Module>

Building a Gadget

Add tabs to the gadget using the API Tabs library

Generate unique content for each tab via callback

Use tab.getIndex() to determine which tab is selected

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Feeds in Tabs" height="250"> <Require feature="tabs"/> </ModulePrefs> <Content type="html"><![CDATA[ <script> var tabs = new _IG_Tabs(); tabs.addDynamicTab('Feed 1', _IG_Callback(tabCallback)); tabs.addDynamicTab('Feed 2', _IG_Callback(tabCallback)); tabs.addDynamicTab('Feed 3', _IG_Callback(tabCallback)); tabs.addDynamicTab('Feed 4', _IG_Callback(tabCallback)); function tabCallback(domId) { var tab = tabs.getSelectedTab(); _gel(domId).innerHTML = 'my content for tab # ' + (tab.getIndex() + 1); } </script> ]]> </Content> </Module>

Building a Gadget

Create an input mechanism for Atom/RSS feed URLs

Add a UserPref to accept feed URLs for each tab

Populate ‘default_value’ attribute with initial feed URL to be loaded

Building a Gadget

Read the feed URL from the UserPref

Fetch the feed and get a JSON response back in a callback

Hardcode the number of feed entries to display and always show entry summaries

Building a Gadget

Use the JSON response object to generate the HTML

feed.Title, feed.Link, feed.Author, feed.Description, feed.Entry[]

entry.Title, entry.Link, entry.Summary

function(feed) { // JSON response received. var container = _gel(domId); if (typeof feed == "undefined" || typeof feed.Entry == "undefined") { container.innerHTML = '<div class="statusLabel">Invalid feed URL:<br>' + feedUrl + '</div>'; } else { // Fetch feed successful. Generate HTML content from returned JSON object. // Create feed header containing title and description. var html = new Array(); html.push('<div class="feedHeader">'); html.push('<div class="feedTitle">'); html.push((feed.Link != "") ? '<a target="_blank" href="' + _hesc(feed.Link) + '">' + _hesc(feed.Title) + '</a>' : _hesc(feed.Title)); html.push((feed.Author != "") ? '<span class="feedAuthor"> by ' + _hesc(feed.Author) + '</span>' : ""); html.push('</div>'); html.push('<div class="feedDesc">' + _hesc(feed.Description) + '</div>'); html.push('</div>'); // Iterate through each feed entry and generate list of content. html.push('<ul class="feedList">'); for (var n = 0; n < feed.Entry.length; n++) { var entry = feed.Entry[n]; html.push('<li>'); html.push('<a target="_blank" href="' + entry.Link + '"><b>' + _hesc(entry.Title) + '</b></a>'); if (typeof entry.Summary != "undefined" && entry.Summary != "") { var summary = document.createElement("div"); summary.innerHTML = entry.Summary; html.push('<div class="entrySummary">'); html.push(summary.innerHTML); html.push('</div>'); } html.push('<div class="entryTimestamp">[' + new Date(entry.Date * 1000).toLocaleString() + ']</div>'); html.push('</li>'); } html.push('</ul>'); container.innerHTML = html.join(""); } }

Building a Gadget

Add CSS rules to stylize the output

Remember screen real estate is very limited:

Decrease the size of your font-sizes

Use minimal amount of padding/margin

Single border lines are good at separating sections with minimal space

Apply formatting to tabs, e.g. font-size, width, etc.

Building a Gadget: Almost Done

Are we done yet? Almost…

What’s missing?

dynamic-height, to auto-resize the height

analytics, to track performance

… _IG_FetchFeedAsJSON( feedUrl, function(feed) { // Generate HTML and insert into DOM … // Resize iframe height to fit content. _IG_AdjustIFrameHeight(); }, 3, // # of entries true // show summaries ); … _IG_RegisterOnloadHandler(function() { _IG_Analytics("UA-676947-9", "/feeds_tabs"); }); <ModulePrefs title="Feeds in Tabs" height="250"> <Require feature="tabs"/> <Require feature="dynamic-height"/> </ModulePrefs>

Building a Gadget: Almost Done

Dynamic height is convenient and makes users happy

Analytics lets you track progress on your gadget

Building a Gadget: Final Touches

Users love options. It’s easy to extend your gadget to be more customizable by using UserPrefs.

Think about the gadget from a user’s perpective and imagine what parts you’d like to customize.

Here’s a few customizations that can easily be added:

gadget title

custom tab labels

number of feed entries to display

Let the gadget title be customizable

Customize each tab label

<ModulePrefs title=" __UP_title__ " height="250"> … </ModulePrefs> <UserPref name="title" display_name="Gadget Title" default_value="Feeds in Tabs"/> <UserPref name="feedTitle1" display_name="Feed 1: Title" datatype="string" default_value="Gadgets API"/> <UserPref name="feedTitle2" display_name="Feed 2: Title" datatype="string" default_value="Google Code"/> <UserPref name="feedTitle3" display_name="Feed 3: Title" datatype="string" default_value="Dev Events"/> <UserPref name="feedTitle4" display_name="Feed 4: Title" datatype="string" default_value="Google Blog"/> var prefs = new _IG_Prefs(); tabs.addDynamicTab( prefs.getString('feedTitle1') , _IG_Callback(tabCallback)); tabs.addDynamicTab( prefs.getString('feedTitle2') , _IG_Callback(tabCallback)); tabs.addDynamicTab( prefs.getString('feedTitle3') , _IG_Callback(tabCallback)); tabs.addDynamicTab( prefs.getString('feedTitle4') , _IG_Callback(tabCallback)); JavaScript code:

Let user select how many feed entries to display

<UserPref name="entries" display_name="# of Entries" datatype="enum" default_value="3"> <EnumValue value=”1"/> <EnumValue value=”2"/> <EnumValue value="3"/> <EnumValue value="4"/> <EnumValue value="5"/> <EnumValue value="6"/> <EnumValue value="7"/> <EnumValue value="8"/> <EnumValue value="9"/> </UserPref> _IG_FetchFeedAsJSON( feedUrl, function(feed) { … }, prefs.getInt('entries'), // # of entries true // show summaries ); JavaScript code:

Prepare your gadget for submission

Add important metadata to make your gadget more discoverable in the directory.

Now What?

I’ve built my gadget, now what?

Submit your Gadget

Users will discover your content through the public content directory.

Submit gadget to the content directory ( http://www. google . com/ig/directory ).

Your gadget appears in the directory & is ranked according to popularity.

Users find your gadget via keywords/categories that describe your gadget.

Users can add your gadget to their website directly from the directory.

It’s all in the first impression…

Users will have thousands of gadgets to choose from in the gadget directory, so you must attract the user to choose your gadget when they are browsing through the directory:

Find a catchy title – make it short and descriptive – there should be no doubt as to the general function of the gadget from the title

Design an attractive thumbnail – images are important as this may be the only thing that attracts the user to your gadget from the choice of the gadget directory. Make the thumbnail stand out to encourage that first click.

Don’t forget to use the button on your website to promote your gadget

Promote your Gadget

Your gadget’s success is dependant upon user uptake. Some of the best ways to promote your gadget are:

Promote it on your own site via the button.

Include a link to your gadget in your mailing lists, blogs and feeds.

Educate users on the "send to a friend" link so your users can virally spread the word.

Track your Gadget

Tracking your gadget allows you to continually optimize it to provide the best experience for your users.

To get basic data, the content directory offers an overview of your gadget's usage and performance, and allows users to send you direct feedback.

Get more detailed data with Google Analytics ( http://www. google .com/analytics/ ) such as:

no. of pageviews

unique visits

traffic sources

traffic to your website

% returning users

Hosting & Publishing

Hosting

Google Gadgets Editor

Google code

Googlepages

Your own site

Publishing

Submitting to the directory

Getting people to use it

Want to know more?

Google Gadgets API Docs h ttp://www.google.com/apis/gadgets

iGoogle http://www.google.com/ig

Google Gadgets For Your Webpage http://www.google.com/ig/directory?synd=open

Top Gadget Authors http://www.google.com/ig/authors

Discussion Group http://groups.google.com/group/Google-Gadgets-API

FAQ / Knowledge Base http://code.google.com/support/bin/topic.py?topic=10027

Google Distribution Guidelines http://www. google .com/webmasters/gadgets/guidelines.html

Getting Started ( http://code. google . com/apis/gadgets/docs/gs .html )

Developer Guide ( http://code. google . com/apis/gadgets/docs/dev_guide .html )

Design Guidelines ( http://www. google .com/webmasters/gadgets/guidelines.html )

Submit ( http://www. google . com/ig/submit )

Promote ( http://www. google .com/webmasters/add.html )

Google Analytics instructions ( http://code. google . com/apis/gadgets/tools .html#Analytics )

Discussion Group ( htt p://groups.google.com/group/Google-Gadgets-API

FAQ / Knowledge Base ( http://code.google.com/support/bin/topic.py?topic=10027)

iGoogle - Haifa Seminar

1 comments

Notes on slide 1

3 Favorites