Your SlideShare is downloading. ×
0
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Developing Gadgets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing Gadgets

1,984

Published on

A presentation by Craig Raw on developing gadgets.

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,984
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Developing Gadgets by Craig Raw CTO Quirk eMarketing
    • 2. Building gadgets is easy
    • 3. Why gadgets?
    • 4. Why gadgets? <ul><li>Easy to develop! </li></ul>
    • 5. Why gadgets? <ul><li>Easy to develop! </li></ul><ul><li>Write once, runs almost anywhere </li></ul>
    • 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. 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. Standard web technologies
    • 9. Standard web technologies <ul><li>HTML </li></ul>
    • 10. Standard web technologies <ul><li>HTML </li></ul><ul><li>Javascript </li></ul>
    • 11. Standard web technologies <ul><li>HTML </li></ul><ul><li>Javascript </li></ul><ul><li>XML </li></ul>
    • 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. Hello World Example
    • 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. Anatomy of a Gadget
    • 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. Anatomy of a Gadget
    • 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. Developing
    • 20. Developing Use the Google Gadget Editor Gadget URL
    • 21. Testing
    • 22. Testing Use the Developer Gadget Turn caching off!
    • 23. Hosting
    • 24. Hosting <ul><li>Place gadget anywhere Google can see </li></ul><ul><li>( http://your.domain.com/gadget.xml) </li></ul>
    • 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. 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. Content <Content type=&quot;html&quot;> <![CDATA[ … ]]> </Content>
    • 28. Content Types <Content type=“ ? ”/>
    • 29. Content Types <Content type=“ html ”> <![CDATA[ ]]> </Content> <ul><li>HTML </li></ul>
    • 30. Content Types <Content type=“ url ” href=“my.domain.com/mygadget.html” /> <ul><li>HTML </li></ul><ul><li>URL </li></ul>
    • 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. 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. 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. A More Advanced Example Making remote Javascript calls
    • 35. A More Advanced Example Making remote Javascript calls <ul><li>_IG_FetchContent(url, func) </li></ul>
    • 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. 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. 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. User preferences Personal settings for every user
    • 40. User preferences Personal settings for every user <ul><li>Store a string, boolean, list, hidden etc </li></ul>
    • 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. 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. 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. 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. Tabs
    • 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. 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. 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. 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. 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. Caching external resources Gadgets on iGoogle receive lots of traffic
    • 52. Caching external resources Gadgets on iGoogle receive lots of traffic <ul><li>Google caches all gadget XML files </li></ul>
    • 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. 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. Caching external resources Remaining problem: caching images, Flash
    • 56. Caching external resources Remaining problem: caching images, Flash <ul><li>Use API methods to cache all embedded resources on iGoogle </li></ul>
    • 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. 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. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    • 60. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other <ul><li>Via user preferences </li></ul>
    • 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. 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. 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. 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. Programming Tips
    • 66. Programming Tips <ul><li>Start small </li></ul>
    • 67. Programming Tips <ul><li>Start small </li></ul><ul><li>Study existing gadgets </li></ul>
    • 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. 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. 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. Where can I put my gadget?
    • 72. Where can I put my gadget? <ul><li>Google Content Directory </li></ul>
    • 73. Where can I put my gadget? <ul><li>Google Content Directory </li></ul><ul><li>Google Code </li></ul>
    • 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. Publishing your gadget Publish to Google Content Directory
    • 76. Publishing your gadget Publish to Google Content Directory
    • 77. Preparing for Publication
    • 78. Preparing for Publication <ul><li>Try all combinations of UserPref values </li></ul>
    • 79. Preparing for Publication <ul><li>Try all combinations of UserPref values </li></ul><ul><li>Test different widths and heights </li></ul>
    • 80. Preparing for Publication
    • 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. 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. 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. When you’re ready… Submitting your gadget for publication
    • 85. When you’re ready… <ul><li>Via Google Gadget Editor </li></ul>Submitting your gadget for publication
    • 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. Syndicating Anyone can put your gadget on their site
    • 88. Syndicating Anyone can put your gadget on their site <ul><li>No user preferences </li></ul>
    • 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. 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. Syndicating GGE -> File -> Publish -> Add to a webpage
    • 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. What’s coming iGoogle V2
    • 94. What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul>
    • 95. What’s coming iGoogle V2 <ul><li>OpenSocial API </li></ul><ul><li>Canvas (maximised) view </li></ul>
    • 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. Want to know more?
    • 98. Want to know more? <ul><li>Google Gadgets API Docs </li></ul><ul><li>( http://www. google . com/apis/gadgets ) </li></ul>
    • 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. 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. Thank you Questions?
    • 102.  
    • 103.  
    • 104.  
    • 105.  

    ×