Gadgets Intro (Plus Mapplets)


Published on

A slide deck that introduces Google Gadgets and lists some variations, with particular emphasis on Map Gadgets vs. Mapplets.

Published in: Devices & Hardware
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Gadgets Intro (Plus Mapplets)

  1. 1. Google Gadgets API Gadgets can be added to your Google personalized homepage or embedded in a webpage via a script tag. Gadgets are small, customizable pieces of HTML (RSS viewers, games, slideshows, etc.)
  2. 2. Google Gadgets API: Overview <ul><li>Easy way to create interactive content : </li></ul><ul><li>Little AJAX webpages (HTML+JS) </li></ul><ul><ul><li>No SDK, Nothing to download, No keys </li></ul></ul><ul><ul><li>User settings can be saved to google server or cookies – No Login Required </li></ul></ul><ul><ul><li>Google supplies free hosting, bandwidth, caching </li></ul></ul><ul><li>Write once (FF/IE/Opera/Safari), run all over the place: </li></ul><ul><ul><li> homepage, desktop, pages, blogger </li></ul></ul><ul><ul><li>enterprises: IBM WebSphere, BEA WebLogic, … </li></ul></ul><ul><ul><li>content ads network: gadgets as ads! </li></ul></ul><ul><ul><li>independent websites & blogs: 25,000 and counting! </li></ul></ul><ul><li>Free, effective distribution: </li></ul>
  3. 3. Google Gadgets API: Basic Example <ul><ul><li>Gadgets are just HTML wrapped in a little XML with metadata </li></ul></ul><ul><ul><li>2 basic types: html, url </li></ul></ul>Specifies pointer to content <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <Module> <ModulePrefs title=&quot;Hello module”/> <Content type=&quot;url“ href=&quot;;/> </Module> Standard heading for XML Gadget title Specify content type Protect content from XML parser Specifies content <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <Module> <ModulePrefs title=&quot;Hello module&quot;/> <Content type=&quot;html&quot;> <![CDATA[ Hello, world! ]]></Content> </Module>
  4. 4. Google Gadgets API: Defining User Preferences <ul><ul><li>Users edit in gadget interface, Google saves for you </li></ul></ul><ul><ul><li>User preference data types: list, enum, bool, string, int </li></ul></ul><ul><ul><li>Can specify default values for preferences </li></ul></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;Preferences for __UP_myname__&quot; height=&quot;250&quot; /> <UserPref name=&quot;myname&quot; display_name=&quot;Name&quot; required=&quot;true&quot; /> <UserPref name=&quot;myphoto&quot; display_name=&quot;Photo“ default_value=&quot;;/> <UserPref name=&quot;mychoice&quot; display_name=&quot;Show Photo?“ datatype=&quot;bool“ default_value=&quot;true&quot;/> <UserPref name=&quot;mycolor&quot; display_name=&quot;Color“ default_value=&quot;Yellow“ datatype=&quot;enum&quot; > <EnumValue value=&quot;Red&quot; /> <EnumValue value=&quot;Aqua&quot; /> <EnumValue value=&quot;Lime&quot; /> <EnumValue value=&quot;Yellow&quot; /> <EnumValue value=&quot;Pink&quot; /> <EnumValue value=&quot;Orange&quot; /> <EnumValue value=&quot;White&quot; /> </UserPref> <script type=&quot;text/javascript&quot;> var prefs = new _IG_Prefs(__MODULE_ID__); var someStringPref = prefs.getString(“myname&quot;); var someBoolPref = prefs.getBool(“mychoice&quot;); </script>
  5. 5. Google Gadgets API: AJAX <ul><ul><li>Google Gadgets has its own asynchronous functions for getting data: IG_FetchContent(url, func) IG_FetchXMLContent(url, func) </li></ul></ul><ul><ul><li>These use a Google proxy that can get data from any public URL! </li></ul></ul><ul><ul><li>Built in caching mechanisms to reduce hitting poor fellow's servers </li></ul></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=“Songs Example&quot; height=&quot;300&quot; scaling=&quot;false&quot; /> <Content type=&quot;html&quot;> <script language=&quot;javascript&quot; type=&quot;text/javascript&quot;> function sendRequest() {   url = “findsongs.php?singer=Madonna&quot;;   _IG_FetchXMLContent(url, processRequest); } function processRequest(responseXML) {   var resultsDIV = document.createElement(“results”);   document.appendChild(resultsDIV);   results = response.getElementsByTagName(“Result”);   for (var i=0; i < results.length; i++) {     var song = results[i].getAttribute(“song”);     resultsDIV.appendChild(document.createTextNode(song));   } } _IG_RegisterOnloadHandler(sendRequest); </script> ]]> </Content> </Module>
  6. 6. Google Gadgets API: More Features <ul><ul><li>Gadget developers can specify their gadget requires a certain library (feature) in the XML metadata: </li></ul></ul><ul><ul><ul><li><Require feature=&quot;tabs&quot;/> </li></ul></ul></ul><ul><ul><li>Tabs – Use to add a tabbed user interface to your gadget </li></ul></ul><ul><ul><li>Drag - Use the drag library to make it possible for users users to drag and drop HTML elements in your gadget interface. </li></ul></ul><ul><ul><li>MiniMessages – Use to display short messages that can be closed by user and/or timer. </li></ul></ul><ul><ul><li>Grid – Use to add a grid that handles drag-and-drop interaction (great for games!). </li></ul></ul>
  7. 7. Google Gadgets API with Maps: Examples <ul><li>Try these out in iGoogle: </li></ul><ul><ul><li>Latest Global Earthquakes </li></ul></ul><ul><ul><li>Clouds & Daylight Map </li></ul></ul><ul><ul><li>Google Mapsearch Gadget </li></ul></ul>Caveats with maps in gadgets: - Register API key for - Use Static Maps API if you want fast loading
  8. 8. Gadgets Variations <ul><ul><li>Gadget Ads </li></ul></ul><ul><ul><ul><li>Require feature = &quot;ads&quot; </li></ul></ul></ul><ul><ul><ul><li>Runs in Google content ad networks </li></ul></ul></ul><ul><ul><li>Visualization API Gadgets: </li></ul></ul><ul><ul><ul><li>No required feature </li></ul></ul></ul><ul><ul><ul><li>Load visualization JS API </li></ul></ul></ul><ul><ul><ul><li>Defines table_query_url UserPref to define data source </li></ul></ul></ul><ul><ul><ul><li>Loads in spreadsheets, iGoogle, webpage </li></ul></ul></ul><ul><ul><li>Social Gadgets </li></ul></ul><ul><ul><ul><li>Require feature = &quot;opensocial&quot; </li></ul></ul></ul><ul><ul><ul><li>Loads in social networks that implement OpenSocial (e.g. Orkut, Hi5) </li></ul></ul></ul><ul><ul><li>Mapplets </li></ul></ul><ul><ul><ul><li>Require feature = &quot;sharedmap&quot; </li></ul></ul></ul><ul><ul><ul><li>Loads in Google Maps </li></ul></ul></ul><ul><ul><ul><li>Uses a special version of the Maps API (Mapplets API) </li></ul></ul></ul>
  9. 9. Mapplets API: Examples <ul><li>Try in Google Maps: </li></ul><ul><ul><li>360cities </li></ul></ul><ul><ul><li>Clouds </li></ul></ul><ul><ul><li>US Census Data </li></ul></ul><ul><ul><li>Browse the Directory for More </li></ul></ul><ul><li>Article: Converting a Maps API Mashup into a Mapplet </li></ul>
  1. A particular slide catching your eye?

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