Your SlideShare is downloading. ×
Gadgets Intro (Plus Mapplets)
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

Gadgets Intro (Plus Mapplets)

1,424
views

Published on

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

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

Published in: Devices & Hardware

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,424
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
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. 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. Google Gadgets API: Overview
    • Easy way to create interactive content :
    • Little AJAX webpages (HTML+JS)
      • No SDK, Nothing to download, No keys
      • User settings can be saved to google server or cookies – No Login Required
      • Google supplies free hosting, bandwidth, caching
    • Write once (FF/IE/Opera/Safari), run all over the place:
      • google.com: homepage, desktop, pages, blogger
      • enterprises: IBM WebSphere, BEA WebLogic, …
      • content ads network: gadgets as ads!
      • independent websites & blogs: 25,000 and counting!
    • Free, effective distribution: http://google.com/ig/directory
  • 3. Google Gadgets API: Basic Example
      • Gadgets are just HTML wrapped in a little XML with metadata
      • 2 basic types: html, url
    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;http://foo.com/foo.cgi&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. Google Gadgets API: Defining User Preferences
      • Users edit in gadget interface, Google saves for you
      • User preference data types: list, enum, bool, string, int
      • Can specify default values for preferences
    <?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;http://doc.examples.googlepages.com/Rowan-headshot.jpg&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. Google Gadgets API: AJAX
      • Google Gadgets has its own asynchronous functions for getting data: IG_FetchContent(url, func) IG_FetchXMLContent(url, func)
      • These use a Google proxy that can get data from any public URL!
      • Built in caching mechanisms to reduce hitting poor fellow's servers
    <?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. Google Gadgets API: More Features
      • Gadget developers can specify their gadget requires a certain library (feature) in the XML metadata:
        • <Require feature=&quot;tabs&quot;/>
      • Tabs – Use to add a tabbed user interface to your gadget
      • Drag - Use the drag library to make it possible for users users to drag and drop HTML elements in your gadget interface.
      • MiniMessages – Use to display short messages that can be closed by user and/or timer.
      • Grid – Use to add a grid that handles drag-and-drop interaction (great for games!).
  • 7. Google Gadgets API with Maps: Examples
    • Try these out in iGoogle:
      • Latest Global Earthquakes
      • Clouds & Daylight Map
      • Google Mapsearch Gadget
    Caveats with maps in gadgets: - Register API key for gmodules.com - Use Static Maps API if you want fast loading
  • 8. Gadgets Variations
      • Gadget Ads
        • Require feature = &quot;ads&quot;
        • Runs in Google content ad networks
      • Visualization API Gadgets:
        • No required feature
        • Load visualization JS API
        • Defines table_query_url UserPref to define data source
        • Loads in spreadsheets, iGoogle, webpage
      • Social Gadgets
        • Require feature = &quot;opensocial&quot;
        • Loads in social networks that implement OpenSocial (e.g. Orkut, Hi5)
      • Mapplets
        • Require feature = &quot;sharedmap&quot;
        • Loads in Google Maps
        • Uses a special version of the Maps API (Mapplets API)
  • 9. Mapplets API: Examples
    • Try in Google Maps:
      • 360cities
      • Clouds
      • US Census Data
      • Browse the Directory for More
    • Article: Converting a Maps API Mashup into a Mapplet