iGoogle - Haifa Seminar

iGoogle Google Developers Day Haifa Ran Tavory

Google Technologies ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Where do Google Gadgets live? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Instant Dashboard capabilities ,[object Object]

Full application (gadget interaction) ,[object Object]

Who writes gadgets? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Gadgets are open ,[object Object],[object Object],[object Object]

“ Hello world” gadget ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Google Gadgets Editor ,[object Object]

API services ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Anatomy of a Gadget User-configurable preferences Gadget content Gadget directory meta-data

Gadget UserPrefs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<UserPref name=“saved” datatype=“hidden” default_value=“0” />

Creating a Gadget: Using the API ,[object Object],[object Object],[object Object],[object Object],Analytics Dynamic Height Tabs MiniMessages Flash

Creating a Gadget: Using the API ,[object Object],<?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 ,[object Object],http://www.google.com/ig/directory?synd=open&url= <gadget_url> ,[object Object],<ModulePrefs …> <Require feature="analytics"/> </ModulePrefs> … <script> _IG_Analytics("UA-00000", "/mygadget"); </script>

Tech Tip 2: Fetching Remote Content ,[object Object],[object Object],[object Object],[object Object]

Tech Tip 2: Fetching Remote Content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Tech Tip 2: Fetching Remote Content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tech Tip 3: Internationalize! ,[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object]

Tech Tip 4: Storing State ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tech Tip 5: Caching External Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tech Tip 5: Caching External Resources ,[object Object],[object Object],<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 ,[object Object],[object Object],[object Object]

Feeds in tabs step-by-step ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Building a Gadget ,[object Object],[object Object],[object Object],<?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 ,[object Object],[object Object],[object Object],<?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 ,[object Object],[object Object],[object Object],<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 ,[object Object],[object Object],[object Object],<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 ,[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<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 ,[object Object],[object Object],[object Object],[object Object],… _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 ,[object Object],[object Object]

Building a Gadget: Final Touches ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Building a Gadget: Final Touches ,[object Object],[object Object],<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:

Building a Gadget: Final Touches ,[object Object],<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:

Building a Gadget: Final Touches ,[object Object],[object Object],<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">

Submit your Gadget ,[object Object],[object Object],[object Object],[object Object],[object Object]

It’s all in the first impression… ,[object Object],[object Object],[object Object],[object Object]

Promote your Gadget ,[object Object],[object Object],[object Object],[object Object]

Track your Gadget ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Hosting & Publishing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Want to know more? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

iGoogle - Haifa Seminar

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

iGoogle - Haifa Seminar