Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Developing Gadgets
Ähnlich wie Developing Gadgets (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Developing Gadgets
- 1. Developing Gadgets by Craig Raw CTO Quirk eMarketing
- 2. Building gadgets is easy
- 3. Why gadgets?
- 12. Hello World Example <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="hello world example" /> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content> </Module>
- 14. Anatomy of a Gadget <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”craig@quirk.biz"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content> </Module> Metadata
- 15. Anatomy of a Gadget
- 16. Anatomy of a Gadget <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”craig@quirk.biz"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content> </Module> Preferences
- 17. Anatomy of a Gadget
- 18. Anatomy of a Gadget <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”craig@quirk.biz"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">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
- 27. Content <Content type="html"> <![CDATA[ … ]]> </Content>
- 28. Content Types <Content type=“ ? ”/>
- 33. Using Javascript <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Hello World Javascript"/> <Content type="html"> <![CDATA[ <script> function myFunction() { return "Hello <em>World</em>"; } document.write(myFunction()); </script> ]]> </Content> </Module> Sets <iframe> content
- 34. A More Advanced Example Making remote Javascript calls
- 38. A More Advanced Example <div id="container"></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="' + 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>
- 39. User preferences Personal settings for every user
- 44. User preferences <Module> <ModulePrefs> <Require feature="setprefs"/> <UserPref name=”number" default_value=”3" /> </ModulePrefs> <Content type="html"><![CDATA[ <div id="container"></div> <script> function callback(response) { … } var prefs = new _IG_Prefs(); _IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, prefs.getInt(”number") , true); </script> Required library Get stored preference
- 45. Tabs
- 46. Tabs <Module> <ModulePrefs> <Require feature="tabs"/> </ModulePrefs> <Content type="html"><![CDATA[ <script> var tabs = new _IG_Tabs(__MODULE_ID__, "HIV"); tabs.addTab("HIV", { contentContainer: _gel("hivId"), callback: getContent, tooltip: "HIV Info" }); tabs.addTab("TB", { contentContainer: _gel("tbId"), callback: getContent, tooltip: "Tuberculosis" }); </script> Required library
- 47. Analytics <Module> <ModulePrefs> <Require feature=”analytics"/> </ModulePrefs> <Content type="html"><![CDATA[ <script> _IG_Analytics("UA-000000-0", "/mygadget"); </script> Path to gadget
- 49. Internationalisation <?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> File per language
- 50. Internationalisation <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle> <?xml version="1.0" encoding="UTF-8" ?> <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
- 55. Caching external resources Remaining problem: caching images, Flash
- 59. Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other
- 64. Gadget-to-Gadget Communication Gadgets agree share user preference name <UserPref name="test" display_name="Message" default_value="Bonjour Monde” publish="true" /> <UserPref name="test" display_name="Message" default_value="Hello World" listen="true" on_change="updateMessage" /> Publisher Subscriber
- 65. Programming Tips
- 71. Where can I put my gadget?
- 75. Publishing your gadget Publish to Google Content Directory
- 76. Publishing your gadget Publish to Google Content Directory
- 84. When you’re ready… Submitting your gadget for publication
- 87. Syndicating Anyone can put your gadget on their site
- 91. Syndicating GGE -> File -> Publish -> Add to a webpage
- 92. Syndicating Javascript include on webpage <script src="http://www.gmodules.com/ig/ifr? url=http://brandseye.com/…/brandseye.xml& synd=open& w=400& h=200& title=BrandsEye+Recent+Mentions& border=%23ffffff%7C3px%2C1px+solid+%23999999& output=js"> </script>
- 93. What’s coming iGoogle V2
- 97. Want to know more?
- 101. Thank you Questions?