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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Developing Gadgets

  • 1,943 views
Published

A presentation by Craig Raw on developing gadgets.

A presentation by Craig Raw on developing gadgets.

Published in Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,943
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
48
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?
    • Easy to develop!
  • 5. Why gadgets?
    • Easy to develop!
    • Write once, runs almost anywhere
  • 6. Why gadgets?
    • Easy to develop!
    • Write once, runs almost anywhere
    • Enables participation
  • 7. Why gadgets?
    • Easy to develop!
    • Write once, runs almost anywhere
    • Enables participation
    • Traffic!
  • 8. Standard web technologies
  • 9. Standard web technologies
    • HTML
  • 10. Standard web technologies
    • HTML
    • Javascript
  • 11. Standard web technologies
    • HTML
    • Javascript
    • XML
  • 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
    • Place gadget anywhere Google can see
    • ( http://your.domain.com/gadget.xml)
  • 25. Hosting
    • Place gadget anywhere Google can see
    • ( http://your.domain.com/gadget.xml)
    • Google can host your gadget
    • ( http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml )
  • 26. Hosting
    • Place gadget anywhere Google can see
    • ( http://your.domain.com/gadget.xml)
    • Google can host your gadget
    • ( http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml )
    • Add to the iGoogle Content Directory
  • 27. Content <Content type=&quot;html&quot;> <![CDATA[ … ]]> </Content>
  • 28. Content Types <Content type=“ ? ”/>
  • 29. Content Types <Content type=“ html ”> <![CDATA[ ]]> </Content>
    • HTML
  • 30. Content Types <Content type=“ url ” href=“my.domain.com/mygadget.html” />
    • HTML
    • URL
  • 31. Content Types <Content type=“ html-inline ”> <![CDATA[ ]]> </Content>
    • HTML
    • URL
    • Inline (Deprecated)
  • 32. HTML
    • Easier to use the gadget API
    • Make remote AJAX calls
    • Google caches
    • Cross-gadget communication
    URL
    • No need for AJAX or Javascript magic
    • Integration with your existing infrastructure
  • 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
    • _IG_FetchContent(url, func)
  • 36. A More Advanced Example Making remote Javascript calls
    • _IG_FetchContent(url, func)
    • _IG_FetchXmlContent(url, func)
  • 37. A More Advanced Example Making remote Javascript calls
    • _IG_FetchContent(url, func)
    • _IG_FetchXmlContent(url, func)
    • _IG_FetchFeedAsJSON(url, func, num, summary)
  • 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
    • Store a string, boolean, list, hidden etc
  • 41. User preferences Personal settings for every user
    • Store a string, boolean, list, hidden etc
    • Replaces __UP_name_ in your code
  • 42. User preferences Personal settings for every user
    • Store a string, boolean, list, hidden etc
    • Replaces __UP_name_ in your code
    • Can also use Prefs API
  • 43. User preferences Personal settings for every user
    • Store a string, boolean, list, hidden etc
    • Replaces __UP_name_ in your code
    • Can also use Prefs API
    • Not available for syndicated gadgets
  • 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
    • Support multiple languages in a single gadget
    • The language can change depending on user
    • Google automatically uses the right language
    • Increase your audience reach
    • A default language is also supported
  • 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
    • Google caches all gadget XML files
  • 53. Caching external resources Gadgets on iGoogle receive lots of traffic
    • Google caches all gadget XML files
    • Google caches all _IG_Fetch…() requests
  • 54. Caching external resources Gadgets on iGoogle receive lots of traffic
    • Google caches all gadget XML files
    • Google caches all _IG_Fetch…() requests
    • Use the Developer Gadget to disable caching
  • 55. Caching external resources Remaining problem: caching images, Flash
  • 56. Caching external resources Remaining problem: caching images, Flash
    • Use API methods to cache all embedded resources on iGoogle
  • 57. Caching external resources Remaining problem: caching images, Flash
    • 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
  • 58. Caching external resources Remaining problem: caching images, Flash
    • Use API methods to cache all embedded resources on iGoogle
    <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
    • Via user preferences
  • 61. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    • Via user preferences
    • One gadget publishes, the other subscribes
  • 62. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    • Via user preferences
    • One gadget publishes, the other subscribes
    • Pub/Sub
  • 63. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    • Via user preferences
    • One gadget publishes, the other subscribes
    • Pub/Sub
    • Only HTML type, non-syndicated gadgets
  • 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
    • Start small
  • 67. Programming Tips
    • Start small
    • Study existing gadgets
  • 68. Programming Tips
    • Start small
    • Study existing gadgets
    • Use Firebug (http://www.getfirebug.com)
  • 69. Programming Tips
    • Start small
    • Study existing gadgets
    • Use Firebug ( http://www. getfirebug .com )
    • Keep it light
  • 70. Programming Tips
    • Start small
    • Study existing gadgets
    • Use Firebug ( http://www. getfirebug .com )
    • Keep it light
    • Test often!
  • 71. Where can I put my gadget?
  • 72. Where can I put my gadget?
    • Google Content Directory
  • 73. Where can I put my gadget?
    • Google Content Directory
    • Google Code
  • 74. Where can I put my gadget?
    • Google Content Directory
    • Google Code
    • Your own server/service
  • 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
    • Try all combinations of UserPref values
  • 79. Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
  • 80. Preparing for Publication
  • 81. Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
    • Test different environments
  • 82. Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
    • Test different environments
    • Test different browsers
  • 83. Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
    • Test different environments
    • Test different browsers
    • Include ModulePref metadata
  • 84. When you’re ready… Submitting your gadget for publication
  • 85. When you’re ready…
    • Via Google Gadget Editor
    Submitting your gadget for publication
  • 86. When you’re ready…
    • Via Google Gadget Editor
    • Submit directly to Content Directory
    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
    • No user preferences
  • 89. Syndicating Anyone can put your gadget on their site
    • No user preferences
    • Variable width and height
  • 90. Syndicating Anyone can put your gadget on their site
    • No user preferences
    • Variable width and height
    • Shown in an <iframe>
  • 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
    • OpenSocial API
  • 95. What’s coming iGoogle V2
    • OpenSocial API
    • Canvas (maximised) view
  • 96. What’s coming iGoogle V2
    • OpenSocial API
    • Canvas (maximised) view
    • http://www.google.com/ig/sandbox
  • 97. Want to know more?
  • 98. Want to know more?
    • Google Gadgets API Docs
    • ( http://www. google . com/apis/gadgets )
  • 99. Want to know more?
    • Google Gadgets API Docs
    • ( http://www.google.com/apis/gadgets )
    • Discussion Group
    • (http://groups.google.com/group/Google-Gadgets-API)
  • 100. Want to know more?
    • Google Gadgets API Docs
    • ( http://www.google.com/apis/gadgets )
    • Discussion Group
    • ( http://groups.google.com/group/Google-Gadgets-API )
    • Google Gadget Guidelines
    • ( http://www.google.com/webmasters/gadgets/guidelines.html)
  • 101. Thank you Questions?
  • 102.  
  • 103.  
  • 104.  
  • 105.