Developing Gadgets
Upcoming SlideShare
Loading in...5
×
 

Developing Gadgets

on

  • 3,107 views

A presentation by Craig Raw on developing gadgets.

A presentation by Craig Raw on developing gadgets.

Statistics

Views

Total Views
3,107
Views on SlideShare
3,107
Embed Views
0

Actions

Likes
1
Downloads
47
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Developing Gadgets Developing Gadgets Presentation Transcript

  • Developing Gadgets by Craig Raw CTO Quirk eMarketing
  • Building gadgets is easy
  • Why gadgets?
  • Why gadgets?
    • Easy to develop!
  • Why gadgets?
    • Easy to develop!
    • Write once, runs almost anywhere
  • Why gadgets?
    • Easy to develop!
    • Write once, runs almost anywhere
    • Enables participation
  • Why gadgets?
    • Easy to develop!
    • Write once, runs almost anywhere
    • Enables participation
    • Traffic!
  • Standard web technologies
  • Standard web technologies
    • HTML
  • Standard web technologies
    • HTML
    • Javascript
  • Standard web technologies
    • HTML
    • Javascript
    • XML
  • 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>
  • Hello World Example
  • 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
  • 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 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
  • 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 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
  • Developing
  • Developing Use the Google Gadget Editor Gadget URL
  • Testing
  • Testing Use the Developer Gadget Turn caching off!
  • Hosting
  • Hosting
    • Place gadget anywhere Google can see
    • ( http://your.domain.com/gadget.xml)
  • 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 )
  • 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
  • Content <Content type=&quot;html&quot;> <![CDATA[ … ]]> </Content>
  • Content Types <Content type=“ ? ”/>
  • Content Types <Content type=“ html ”> <![CDATA[ ]]> </Content>
    • HTML
  • Content Types <Content type=“ url ” href=“my.domain.com/mygadget.html” />
    • HTML
    • URL
  • Content Types <Content type=“ html-inline ”> <![CDATA[ ]]> </Content>
    • HTML
    • URL
    • Inline (Deprecated)
  • 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
  • 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
  • A More Advanced Example Making remote Javascript calls
  • A More Advanced Example Making remote Javascript calls
    • _IG_FetchContent(url, func)
  • A More Advanced Example Making remote Javascript calls
    • _IG_FetchContent(url, func)
    • _IG_FetchXmlContent(url, func)
  • A More Advanced Example Making remote Javascript calls
    • _IG_FetchContent(url, func)
    • _IG_FetchXmlContent(url, func)
    • _IG_FetchFeedAsJSON(url, func, num, summary)
  • 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>
  • User preferences Personal settings for every user
  • User preferences Personal settings for every user
    • Store a string, boolean, list, hidden etc
  • User preferences Personal settings for every user
    • Store a string, boolean, list, hidden etc
    • Replaces __UP_name_ in your code
  • 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
  • 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
  • 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
  • Tabs
  • 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
  • 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
  • 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
  • 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
  • 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
  • Caching external resources Gadgets on iGoogle receive lots of traffic
  • Caching external resources Gadgets on iGoogle receive lots of traffic
    • Google caches all gadget XML files
  • Caching external resources Gadgets on iGoogle receive lots of traffic
    • Google caches all gadget XML files
    • Google caches all _IG_Fetch…() requests
  • 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
  • Caching external resources Remaining problem: caching images, Flash
  • Caching external resources Remaining problem: caching images, Flash
    • Use API methods to cache all embedded resources on iGoogle
  • 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
  • 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>
  • Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
  • Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    • Via user preferences
  • Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    • Via user preferences
    • One gadget publishes, the other subscribes
  • Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
    • Via user preferences
    • One gadget publishes, the other subscribes
    • Pub/Sub
  • 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
  • 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
  • Programming Tips
  • Programming Tips
    • Start small
  • Programming Tips
    • Start small
    • Study existing gadgets
  • Programming Tips
    • Start small
    • Study existing gadgets
    • Use Firebug (http://www.getfirebug.com)
  • Programming Tips
    • Start small
    • Study existing gadgets
    • Use Firebug ( http://www. getfirebug .com )
    • Keep it light
  • Programming Tips
    • Start small
    • Study existing gadgets
    • Use Firebug ( http://www. getfirebug .com )
    • Keep it light
    • Test often!
  • Where can I put my gadget?
  • Where can I put my gadget?
    • Google Content Directory
  • Where can I put my gadget?
    • Google Content Directory
    • Google Code
  • Where can I put my gadget?
    • Google Content Directory
    • Google Code
    • Your own server/service
  • Publishing your gadget Publish to Google Content Directory
  • Publishing your gadget Publish to Google Content Directory
  • Preparing for Publication
  • Preparing for Publication
    • Try all combinations of UserPref values
  • Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
  • Preparing for Publication
  • Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
    • Test different environments
  • Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
    • Test different environments
    • Test different browsers
  • Preparing for Publication
    • Try all combinations of UserPref values
    • Test different widths and heights
    • Test different environments
    • Test different browsers
    • Include ModulePref metadata
  • When you’re ready… Submitting your gadget for publication
  • When you’re ready…
    • Via Google Gadget Editor
    Submitting your gadget for publication
  • When you’re ready…
    • Via Google Gadget Editor
    • Submit directly to Content Directory
    Submitting your gadget for publication
  • Syndicating Anyone can put your gadget on their site
  • Syndicating Anyone can put your gadget on their site
    • No user preferences
  • Syndicating Anyone can put your gadget on their site
    • No user preferences
    • Variable width and height
  • Syndicating Anyone can put your gadget on their site
    • No user preferences
    • Variable width and height
    • Shown in an <iframe>
  • 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/…/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>
  • What’s coming iGoogle V2
  • What’s coming iGoogle V2
    • OpenSocial API
  • What’s coming iGoogle V2
    • OpenSocial API
    • Canvas (maximised) view
  • What’s coming iGoogle V2
    • OpenSocial API
    • Canvas (maximised) view
    • http://www.google.com/ig/sandbox
  • Want to know more?
  • Want to know more?
    • Google Gadgets API Docs
    • ( http://www. google . com/apis/gadgets )
  • Want to know more?
    • Google Gadgets API Docs
    • ( http://www.google.com/apis/gadgets )
    • Discussion Group
    • (http://groups.google.com/group/Google-Gadgets-API)
  • 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)
  • Thank you Questions?
  •  
  •  
  •  
  •