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
<UserPref name=“saved” datatype=“hidden” default_value=“0” />

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
<UserPref name="feed1" display_name="Feed 1: URL" datatype="string" default_value="http://groups.google.com/group/Google-Gadgets-API/feed/atom_v1_0_topics.xml"/> <UserPref name="feed2" display_name="Feed 2: URL" datatype="string" default_value="http://code.google.com/feeds/updates.xml"/> <UserPref name="feed3" display_name="Feed 3: URL" datatype="string" default_value="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/basic"/> <UserPref name="feed4" display_name="Feed 4: URL" datatype="string" default_value="http://googleblog.blogspot.com/atom.xml"/>

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
<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(); var prefs = new _IG_Prefs(); var feedUrl = prefs.getString('feed' + (tab.getIndex() + 1)); _IG_FetchFeedAsJSON( feedUrl, function(feed) { // JSON response received. }, 3, // # of entries true // show summaries } } </script>

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.
<style type="text/css"> .tablib_table { font-size: 0.7em; } .tablib_selected, .tablib_unselected { width: 23%; } .statusLabel { font-size: 0.75em; font-style: italic; padding-top: 10px; text-align: center; } .feedHeader { padding-top: 5px; font-size: 0.7em; } .feedHeader .feedTitle { font-weight: bold; font-size: 1.1em; } .feedHeader .feedAuthor { font-weight: normal; font-size: 0.8em; color: #676767; } .feedList { font-size: 0.7em; margin: 0px; padding: 0px 0px 5px 0px; border-bottom: 1px solid #aaaaaa; } .feedList li { margin-top: 5px; padding: 3px 3px 0px 3px; border-top: 1px solid #aaaaaa; } .feedList li div.entryTitle a { font-weight: bold; } .feedList li div.entryTimestamp { font-size: 0.95em; font-style: italic; color: #676767; } </style>

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.
<ModulePrefs title="__UP_title__" directory_title="Feeds in Tabs" description="Read up to four Atom or RSS feeds from within a single gadget using tabs. Customize the feed URLs, titles, control how many entries to receive and more." author="Daniel L." author_email="daniel.feedback+feedstabs@gmail.com" author_affiliation="Google Inc." author_location="Mountain View, CA" screenshot="/ig/modules/feeds_tabs.png" thumbnail="/ig/modules/feeds_tabs-thm.png" height="250" scrolling="false" singleton="false">

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

by rantav on Apr 11, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 3

Statistics

iGoogle - Haifa Seminar — Presentation Transcript

http://www.slideshare.net	2
http://coderwall.com	1