0
Developing Gadgets by Craig Raw CTO Quirk eMarketing
Building gadgets is easy
Why gadgets?
Why gadgets? <ul><li>Easy to develop! </li></ul>
Why gadgets? <ul><li>Easy to develop! </li></ul><ul><li>Write once, runs almost anywhere </li></ul>
Why gadgets? <ul><li>Easy to develop! </li></ul><ul><li>Write once, runs almost anywhere </li></ul><ul><li>Enables partici...
Why gadgets? <ul><li>Easy to develop! </li></ul><ul><li>Write once, runs almost anywhere </li></ul><ul><li>Enables partici...
Standard web technologies
Standard web technologies <ul><li>HTML </li></ul>
Standard web technologies <ul><li>HTML </li></ul><ul><li>Javascript </li></ul>
Standard web technologies <ul><li>HTML </li></ul><ul><li>Javascript </li></ul><ul><li>XML </li></ul>
Hello World Example <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>   <Module> <ModulePrefs title=&quot;hello ...
Hello World Example
Anatomy of a Gadget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;My First...
Anatomy of a Gadget
Anatomy of a Gadget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;My First...
Anatomy of a Gadget
Anatomy of a Gadget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;My First...
Developing
Developing Use the Google Gadget Editor Gadget URL
Testing
Testing Use the Developer Gadget Turn caching off!
Hosting
Hosting <ul><li>Place gadget anywhere Google can see </li></ul><ul><li>( http://your.domain.com/gadget.xml) </li></ul>
Hosting <ul><li>Place gadget anywhere Google can see </li></ul><ul><li>( http://your.domain.com/gadget.xml) </li></ul><ul>...
Hosting <ul><li>Place gadget anywhere Google can see </li></ul><ul><li>( http://your.domain.com/gadget.xml) </li></ul><ul>...
Content <Content type=&quot;html&quot;> <![CDATA[ … ]]> </Content>
Content Types <Content type=“ ? ”/>
Content Types <Content type=“ html ”> <![CDATA[ ]]> </Content> <ul><li>HTML </li></ul>
Content Types <Content type=“ url ”  href=“my.domain.com/mygadget.html” /> <ul><li>HTML </li></ul><ul><li>URL </li></ul>
Content Types <Content type=“ html-inline ”> <![CDATA[ ]]> </Content> <ul><li>HTML </li></ul><ul><li>URL </li></ul><ul><li...
HTML <ul><li>Easier to use the gadget API </li></ul><ul><li>Make remote AJAX calls </li></ul><ul><li>Google caches </li></...
Using Javascript <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <Module> <ModulePrefs title=&quot;Hello World ...
A More Advanced Example Making remote Javascript calls
A More Advanced Example Making remote Javascript calls <ul><li>_IG_FetchContent(url, func) </li></ul>
A More Advanced Example Making remote Javascript calls <ul><li>_IG_FetchContent(url, func) </li></ul><ul><li>_IG_FetchXmlC...
A More Advanced Example Making remote Javascript calls <ul><li>_IG_FetchContent(url, func) </li></ul><ul><li>_IG_FetchXmlC...
A More Advanced Example <div id=&quot;container&quot;></div> <script> function callback(response) { // Iterate through eac...
User preferences Personal settings for every user
User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul>
User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul><ul><li>Repl...
User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul><ul><li>Repl...
User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul><ul><li>Repl...
User preferences <Module> <ModulePrefs> <Require feature=&quot;setprefs&quot;/> <UserPref name=”number&quot; default_value...
Tabs
Tabs <Module> <ModulePrefs> <Require feature=&quot;tabs&quot;/> </ModulePrefs> <Content type=&quot;html&quot;><![CDATA[ <s...
Analytics <Module> <ModulePrefs> <Require feature=”analytics&quot;/> </ModulePrefs> <Content type=&quot;html&quot;><![CDAT...
Internationalisation <ul><li>Support multiple languages in a single gadget </li></ul><ul><li>The language can change depen...
Internationalisation <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=“__MSG_title_...
Internationalisation <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <messagebundle> <msg name=“title”>Title</...
Caching external resources Gadgets on iGoogle receive lots of traffic
Caching external resources Gadgets on iGoogle receive lots of traffic  <ul><li>Google caches all gadget XML files </li></ul>
Caching external resources Gadgets on iGoogle receive lots of traffic  <ul><li>Google caches all gadget XML files </li></u...
Caching external resources Gadgets on iGoogle receive lots of traffic  <ul><li>Google caches all gadget XML files </li></u...
Caching external resources Remaining problem: caching images, Flash
Caching external resources Remaining problem: caching images, Flash  <ul><li>Use API methods to cache all embedded resourc...
Caching external resources Remaining problem: caching images, Flash  <ul><li>Use API methods to cache all embedded resourc...
Caching external resources Remaining problem: caching images, Flash  <ul><li>Use API methods to cache all embedded resourc...
Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul>
Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul><...
Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul><...
Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul><...
Gadget-to-Gadget Communication Gadgets agree share user preference name <UserPref  name=&quot;test&quot;  display_name=&qu...
Programming Tips
Programming Tips <ul><li>Start small </li></ul>
Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul>
Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul><ul><li>Use Firebug (http://www.ge...
Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul><ul><li>Use Firebug ( http://www. ...
Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul><ul><li>Use Firebug ( http://www. ...
Where can I put my gadget?
Where can I put my gadget? <ul><li>Google Content Directory </li></ul>
Where can I put my gadget? <ul><li>Google Content Directory </li></ul><ul><li>Google Code </li></ul>
Where can I put my gadget? <ul><li>Google Content Directory </li></ul><ul><li>Google Code </li></ul><ul><li>Your own serve...
Publishing your gadget Publish to Google Content Directory
Publishing your gadget Publish to Google Content Directory
Preparing for Publication
Preparing for Publication <ul><li>Try all combinations of  UserPref  values </li></ul>
Preparing for Publication <ul><li>Try all combinations of  UserPref  values </li></ul><ul><li>Test different widths and he...
Preparing for Publication
Preparing for Publication <ul><li>Try all combinations of  UserPref  values </li></ul><ul><li>Test different widths and he...
Preparing for Publication <ul><li>Try all combinations of  UserPref  values </li></ul><ul><li>Test different widths and he...
Preparing for Publication <ul><li>Try all combinations of  UserPref  values </li></ul><ul><li>Test different widths and he...
When you’re ready… Submitting your gadget for publication
When you’re ready… <ul><li>Via Google Gadget Editor </li></ul>Submitting your gadget for publication
When you’re ready… <ul><li>Via Google Gadget Editor </li></ul><ul><li>Submit directly to Content Directory </li></ul>Submi...
Syndicating Anyone can put your gadget on their site
Syndicating Anyone can put your gadget on their site <ul><li>No user preferences </li></ul>
Syndicating Anyone can put your gadget on their site <ul><li>No user preferences </li></ul><ul><li>Variable width and heig...
Syndicating Anyone can put your gadget on their site <ul><li>No user preferences </li></ul><ul><li>Variable width and heig...
Syndicating GGE -> File -> Publish -> Add to a webpage
Syndicating Javascript include on webpage <script src=&quot;http://www.gmodules.com/ig/ifr? url=http://brandseye.com/…/bra...
What’s coming iGoogle V2
What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul>
What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul><ul><li>Canvas (maximised) view </li></ul>
What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul><ul><li>Canvas (maximised) view </li></ul><ul><li>http://www.goo...
Want to know more?
Want to know more? <ul><li>Google Gadgets API Docs </li></ul><ul><li>( http://www. google . com/apis/gadgets ) </li></ul>
Want to know more? <ul><li>Google Gadgets API Docs </li></ul><ul><li>( http://www.google.com/apis/gadgets ) </li></ul><ul>...
Want to know more? <ul><li>Google Gadgets API Docs </li></ul><ul><li>( http://www.google.com/apis/gadgets ) </li></ul><ul>...
Thank you Questions?
 
 
 
 
Upcoming SlideShare
Loading in...5
×

Developing Gadgets

1,994

Published on

A presentation by Craig Raw on developing gadgets.

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,994
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Transcript of "Developing Gadgets"

    1. 1. Developing Gadgets by Craig Raw CTO Quirk eMarketing
    2. 2. Building gadgets is easy
    3. 3. Why gadgets?
    4. 4. Why gadgets? <ul><li>Easy to develop! </li></ul>
    5. 5. Why gadgets? <ul><li>Easy to develop! </li></ul><ul><li>Write once, runs almost anywhere </li></ul>
    6. 6. Why gadgets? <ul><li>Easy to develop! </li></ul><ul><li>Write once, runs almost anywhere </li></ul><ul><li>Enables participation </li></ul>
    7. 7. Why gadgets? <ul><li>Easy to develop! </li></ul><ul><li>Write once, runs almost anywhere </li></ul><ul><li>Enables participation </li></ul><ul><li>Traffic! </li></ul>
    8. 8. Standard web technologies
    9. 9. Standard web technologies <ul><li>HTML </li></ul>
    10. 10. Standard web technologies <ul><li>HTML </li></ul><ul><li>Javascript </li></ul>
    11. 11. Standard web technologies <ul><li>HTML </li></ul><ul><li>Javascript </li></ul><ul><li>XML </li></ul>
    12. 12. Hello World Example <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;hello world example&quot; /> <Content type=&quot;html&quot;> <![CDATA[ Hello, world! ]]> </Content> </Module>
    13. 13. Hello World Example
    14. 14. Anatomy of a Gadget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;My First Gadget&quot; description=&quot;This gadget prints hello world.&quot; author=”Craig Raw&quot; author_email=”craig@quirk.biz&quot;/> <UserPref name=&quot;Locations&quot; datatype=&quot;list&quot; /> <UserPref name=&quot;Color&quot; datatype=&quot;string&quot; /> <UserPref name=&quot;Toggle&quot; datatype=&quot;bool&quot; /> <Content type=&quot;html&quot;> <![CDATA[ <b style=&quot;color: red&quot;>hello world!</b> ]]> </Content> </Module> Metadata
    15. 15. Anatomy of a Gadget
    16. 16. Anatomy of a Gadget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;My First Gadget&quot; description=&quot;This gadget prints hello world.&quot; author=”Craig Raw&quot; author_email=”craig@quirk.biz&quot;/> <UserPref name=&quot;Locations&quot; datatype=&quot;list&quot; /> <UserPref name=&quot;Color&quot; datatype=&quot;string&quot; /> <UserPref name=&quot;Toggle&quot; datatype=&quot;bool&quot; /> <Content type=&quot;html&quot;> <![CDATA[ <b style=&quot;color: red&quot;>hello world!</b> ]]> </Content> </Module> Preferences
    17. 17. Anatomy of a Gadget
    18. 18. Anatomy of a Gadget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;My First Gadget&quot; description=&quot;This gadget prints hello world.&quot; author=”Craig Raw&quot; author_email=”craig@quirk.biz&quot;/> <UserPref name=&quot;Locations&quot; datatype=&quot;list&quot; /> <UserPref name=&quot;Color&quot; datatype=&quot;string&quot; /> <UserPref name=&quot;Toggle&quot; datatype=&quot;bool&quot; /> <Content type=&quot;html&quot;> <![CDATA[ <b style=&quot;color: red&quot;>hello world!</b> ]]> </Content> </Module> HTML/Javascript
    19. 19. Developing
    20. 20. Developing Use the Google Gadget Editor Gadget URL
    21. 21. Testing
    22. 22. Testing Use the Developer Gadget Turn caching off!
    23. 23. Hosting
    24. 24. Hosting <ul><li>Place gadget anywhere Google can see </li></ul><ul><li>( http://your.domain.com/gadget.xml) </li></ul>
    25. 25. Hosting <ul><li>Place gadget anywhere Google can see </li></ul><ul><li>( http://your.domain.com/gadget.xml) </li></ul><ul><li>Google can host your gadget </li></ul><ul><li>( http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml ) </li></ul>
    26. 26. Hosting <ul><li>Place gadget anywhere Google can see </li></ul><ul><li>( http://your.domain.com/gadget.xml) </li></ul><ul><li>Google can host your gadget </li></ul><ul><li>( http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml ) </li></ul><ul><li>Add to the iGoogle Content Directory </li></ul>
    27. 27. Content <Content type=&quot;html&quot;> <![CDATA[ … ]]> </Content>
    28. 28. Content Types <Content type=“ ? ”/>
    29. 29. Content Types <Content type=“ html ”> <![CDATA[ ]]> </Content> <ul><li>HTML </li></ul>
    30. 30. Content Types <Content type=“ url ” href=“my.domain.com/mygadget.html” /> <ul><li>HTML </li></ul><ul><li>URL </li></ul>
    31. 31. Content Types <Content type=“ html-inline ”> <![CDATA[ ]]> </Content> <ul><li>HTML </li></ul><ul><li>URL </li></ul><ul><li>Inline (Deprecated) </li></ul>
    32. 32. HTML <ul><li>Easier to use the gadget API </li></ul><ul><li>Make remote AJAX calls </li></ul><ul><li>Google caches </li></ul><ul><li>Cross-gadget communication </li></ul>URL <ul><li>No need for AJAX or Javascript magic </li></ul><ul><li>Integration with your existing infrastructure </li></ul>
    33. 33. Using Javascript <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <Module> <ModulePrefs title=&quot;Hello World Javascript&quot;/> <Content type=&quot;html&quot;> <![CDATA[ <script> function myFunction() { return &quot;Hello <em>World</em>&quot;; } document.write(myFunction()); </script> ]]> </Content> </Module> Sets <iframe> content
    34. 34. A More Advanced Example Making remote Javascript calls
    35. 35. A More Advanced Example Making remote Javascript calls <ul><li>_IG_FetchContent(url, func) </li></ul>
    36. 36. A More Advanced Example Making remote Javascript calls <ul><li>_IG_FetchContent(url, func) </li></ul><ul><li>_IG_FetchXmlContent(url, func) </li></ul>
    37. 37. A More Advanced Example Making remote Javascript calls <ul><li>_IG_FetchContent(url, func) </li></ul><ul><li>_IG_FetchXmlContent(url, func) </li></ul><ul><li>_IG_FetchFeedAsJSON(url, func, num, summary) </li></ul>
    38. 38. A More Advanced Example <div id=&quot;container&quot;></div> <script> function callback(response) { // Iterate through each entry and generate HTML var html = new Array(); for (var n = 0; n < response.Entry.length; n++) { var entry = response.Entry[n]; html.push('<a href=&quot;' + entry.Link + '&quot;>' + 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(&quot;http://news.google.com/?output=atom&quot;, callback, 3, true); </script>
    39. 39. User preferences Personal settings for every user
    40. 40. User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul>
    41. 41. User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul><ul><li>Replaces __UP_name_ in your code </li></ul>
    42. 42. User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul><ul><li>Replaces __UP_name_ in your code </li></ul><ul><li>Can also use Prefs API </li></ul>
    43. 43. User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul><ul><li>Replaces __UP_name_ in your code </li></ul><ul><li>Can also use Prefs API </li></ul><ul><li>Not available for syndicated gadgets </li></ul>
    44. 44. User preferences <Module> <ModulePrefs> <Require feature=&quot;setprefs&quot;/> <UserPref name=”number&quot; default_value=”3&quot; /> </ModulePrefs> <Content type=&quot;html&quot;><![CDATA[ <div id=&quot;container&quot;></div> <script> function callback(response) { … } var prefs = new _IG_Prefs(); _IG_FetchFeedAsJSON(&quot;http://news.google.com/?output=atom&quot;, callback, prefs.getInt(”number&quot;) , true); </script> Required library Get stored preference
    45. 45. Tabs
    46. 46. Tabs <Module> <ModulePrefs> <Require feature=&quot;tabs&quot;/> </ModulePrefs> <Content type=&quot;html&quot;><![CDATA[ <script> var tabs = new _IG_Tabs(__MODULE_ID__, &quot;HIV&quot;); tabs.addTab(&quot;HIV&quot;, { contentContainer: _gel(&quot;hivId&quot;), callback: getContent, tooltip: &quot;HIV Info&quot; }); tabs.addTab(&quot;TB&quot;, { contentContainer: _gel(&quot;tbId&quot;), callback: getContent, tooltip: &quot;Tuberculosis&quot; }); </script> Required library
    47. 47. Analytics <Module> <ModulePrefs> <Require feature=”analytics&quot;/> </ModulePrefs> <Content type=&quot;html&quot;><![CDATA[ <script> _IG_Analytics(&quot;UA-000000-0&quot;, &quot;/mygadget&quot;); </script> Path to gadget
    48. 48. Internationalisation <ul><li>Support multiple languages in a single gadget </li></ul><ul><li>The language can change depending on user </li></ul><ul><li>Google automatically uses the right language </li></ul><ul><li>Increase your audience reach </li></ul><ul><li>A default language is also supported </li></ul>
    49. 49. Internationalisation <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=“__MSG_title__&quot;> <Locale lang=“en” messages=“en.xml” /> <Locale lang=“ja” messages=“ja.xml” /> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ __MSG_hello__ ]]> </Content> </Module> File per language
    50. 50. Internationalisation <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle> <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <messagebundle> <msg name=“title”> 題名 </msg> <msg name=“hello”> こんにちは世界 </msg> </messagebundle> en.xml ja.xml
    51. 51. Caching external resources Gadgets on iGoogle receive lots of traffic
    52. 52. Caching external resources Gadgets on iGoogle receive lots of traffic <ul><li>Google caches all gadget XML files </li></ul>
    53. 53. Caching external resources Gadgets on iGoogle receive lots of traffic <ul><li>Google caches all gadget XML files </li></ul><ul><li>Google caches all _IG_Fetch…() requests </li></ul>
    54. 54. Caching external resources Gadgets on iGoogle receive lots of traffic <ul><li>Google caches all gadget XML files </li></ul><ul><li>Google caches all _IG_Fetch…() requests </li></ul><ul><li>Use the Developer Gadget to disable caching </li></ul>
    55. 55. Caching external resources Remaining problem: caching images, Flash
    56. 56. Caching external resources Remaining problem: caching images, Flash <ul><li>Use API methods to cache all embedded resources on iGoogle </li></ul>
    57. 57. Caching external resources Remaining problem: caching images, Flash <ul><li>Use API methods to cache all embedded resources on iGoogle </li></ul>_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
    58. 58. Caching external resources Remaining problem: caching images, Flash <ul><li>Use API methods to cache all embedded resources on iGoogle </li></ul><img id=&quot;goImg&quot; src=&quot;&quot; width=100 height=150 /> <script> _gel(&quot;goImg&quot;).src = _IG_GetImageUrl(&quot;http://xyz.com/go.gif&quot;); </script> <div id=&quot;container&quot;></div> <script> var cacheUrl = _IG_GetCachedUrl(‘http://xyz.com/flashvideo.swf’); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 }); </script>
    59. 59. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    60. 60. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul>
    61. 61. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul><ul><li>One gadget publishes, the other subscribes </li></ul>
    62. 62. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul><ul><li>One gadget publishes, the other subscribes </li></ul><ul><li>Pub/Sub </li></ul>
    63. 63. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul><ul><li>One gadget publishes, the other subscribes </li></ul><ul><li>Pub/Sub </li></ul><ul><li>Only HTML type, non-syndicated gadgets </li></ul>
    64. 64. Gadget-to-Gadget Communication Gadgets agree share user preference name <UserPref name=&quot;test&quot; display_name=&quot;Message&quot; default_value=&quot;Bonjour Monde” publish=&quot;true&quot; /> <UserPref name=&quot;test&quot; display_name=&quot;Message&quot; default_value=&quot;Hello World&quot; listen=&quot;true&quot; on_change=&quot;updateMessage&quot; /> Publisher Subscriber
    65. 65. Programming Tips
    66. 66. Programming Tips <ul><li>Start small </li></ul>
    67. 67. Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul>
    68. 68. Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul><ul><li>Use Firebug (http://www.getfirebug.com) </li></ul>
    69. 69. Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul><ul><li>Use Firebug ( http://www. getfirebug .com ) </li></ul><ul><li>Keep it light </li></ul>
    70. 70. Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul><ul><li>Use Firebug ( http://www. getfirebug .com ) </li></ul><ul><li>Keep it light </li></ul><ul><li>Test often! </li></ul>
    71. 71. Where can I put my gadget?
    72. 72. Where can I put my gadget? <ul><li>Google Content Directory </li></ul>
    73. 73. Where can I put my gadget? <ul><li>Google Content Directory </li></ul><ul><li>Google Code </li></ul>
    74. 74. Where can I put my gadget? <ul><li>Google Content Directory </li></ul><ul><li>Google Code </li></ul><ul><li>Your own server/service </li></ul>
    75. 75. Publishing your gadget Publish to Google Content Directory
    76. 76. Publishing your gadget Publish to Google Content Directory
    77. 77. Preparing for Publication
    78. 78. Preparing for Publication <ul><li>Try all combinations of UserPref values </li></ul>
    79. 79. Preparing for Publication <ul><li>Try all combinations of UserPref values </li></ul><ul><li>Test different widths and heights </li></ul>
    80. 80. Preparing for Publication
    81. 81. Preparing for Publication <ul><li>Try all combinations of UserPref values </li></ul><ul><li>Test different widths and heights </li></ul><ul><li>Test different environments </li></ul>
    82. 82. Preparing for Publication <ul><li>Try all combinations of UserPref values </li></ul><ul><li>Test different widths and heights </li></ul><ul><li>Test different environments </li></ul><ul><li>Test different browsers </li></ul>
    83. 83. Preparing for Publication <ul><li>Try all combinations of UserPref values </li></ul><ul><li>Test different widths and heights </li></ul><ul><li>Test different environments </li></ul><ul><li>Test different browsers </li></ul><ul><li>Include ModulePref metadata </li></ul>
    84. 84. When you’re ready… Submitting your gadget for publication
    85. 85. When you’re ready… <ul><li>Via Google Gadget Editor </li></ul>Submitting your gadget for publication
    86. 86. When you’re ready… <ul><li>Via Google Gadget Editor </li></ul><ul><li>Submit directly to Content Directory </li></ul>Submitting your gadget for publication
    87. 87. Syndicating Anyone can put your gadget on their site
    88. 88. Syndicating Anyone can put your gadget on their site <ul><li>No user preferences </li></ul>
    89. 89. Syndicating Anyone can put your gadget on their site <ul><li>No user preferences </li></ul><ul><li>Variable width and height </li></ul>
    90. 90. Syndicating Anyone can put your gadget on their site <ul><li>No user preferences </li></ul><ul><li>Variable width and height </li></ul><ul><li>Shown in an <iframe> </li></ul>
    91. 91. Syndicating GGE -> File -> Publish -> Add to a webpage
    92. 92. Syndicating Javascript include on webpage <script src=&quot;http://www.gmodules.com/ig/ifr? url=http://brandseye.com/…/brandseye.xml&amp; synd=open&amp; w=400&amp; h=200&amp; title=BrandsEye+Recent+Mentions&amp; border=%23ffffff%7C3px%2C1px+solid+%23999999&amp; output=js&quot;> </script>
    93. 93. What’s coming iGoogle V2
    94. 94. What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul>
    95. 95. What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul><ul><li>Canvas (maximised) view </li></ul>
    96. 96. What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul><ul><li>Canvas (maximised) view </li></ul><ul><li>http://www.google.com/ig/sandbox </li></ul>
    97. 97. Want to know more?
    98. 98. Want to know more? <ul><li>Google Gadgets API Docs </li></ul><ul><li>( http://www. google . com/apis/gadgets ) </li></ul>
    99. 99. Want to know more? <ul><li>Google Gadgets API Docs </li></ul><ul><li>( http://www.google.com/apis/gadgets ) </li></ul><ul><li>Discussion Group </li></ul><ul><li>(http://groups.google.com/group/Google-Gadgets-API) </li></ul>
    100. 100. Want to know more? <ul><li>Google Gadgets API Docs </li></ul><ul><li>( http://www.google.com/apis/gadgets ) </li></ul><ul><li>Discussion Group </li></ul><ul><li>( http://groups.google.com/group/Google-Gadgets-API ) </li></ul><ul><li>Google Gadget Guidelines </li></ul><ul><li>( http://www.google.com/webmasters/gadgets/guidelines.html) </li></ul>
    101. 101. Thank you Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×