Gadgets and visualization API - technologies for Google Apps

Document Sample
Gadgets and visualization API - technologies for Google Apps Powered By Docstoc
					Gadgets and visualization API technologies for Google Apps
Niv Efron Yonatan Ben-Ya‟akov Danny Feldman (TA)

1

Google Technologies
• Google uses a lot of web-related technologies in its products • We also support and encourage good web technologies for
developers worldwide:
– Open source projects
• Hosting open source project on Google Code • Google Summer of Code • Google Gears (browser offline capabilities) • Googlers contributing to OSS: Linux, Subversion, GCC

– Google open technologies and APIs
• Google Maps API • Google Data API • Google Ajax API

• Google Gadgets API
• and many more … (over 35 APIs)
2

What are Gadgets?
• HTML inside an XML wrapper
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“Hello World" /> <Content type="html”><![CDATA[ <b>Hello World!</b> ]]></Content> </Module>

• • • • •

Mini web pages: HTML, JavaScript, CSS, Flash, AJAX

Anything you can do on a web page, you can do inside a gadget
Write once, runs everywhere Hundreds of thousands of pageviews each week Free hosting and bandwidth! – Google Code Hosting – Google Pages

3

Examples of Google Gadgets

4

Where do Google Gadgets live?
• iGoogle homepage • Third-party websites • Google Desktop (Windows, Mac OS X) • Mac OS X Dashboard • Windows Vista Sidebar • IBM WebSphere Portal

5

iGoogle homepage…

6

Third-party websites…

http://www.puertovallarta.net http://gadgetryout.blogspot.com
7

Google Desktop…

8

Mac OS X Dashboard…

9

Instant Dashboard capabilities
• Going from this:

10

Instant Dashboard capabilities
• to this:

11

Full application (gadget interaction)

•

http://googlefinanceblog.blogspot.com/2007/10/api-gadgets-and-tabs-oh-my.html

12

Who writes gadgets?
• Individuals
– Independent contractors and contracting groups – Professional developers who write gadgets for a living

– Teenagers & hobbyists writing gadgets because they‟re fun

• Businesses
– Provide useful content to users in gadgets – Extends branch reach

– Drives traffic when users click on links for more information
– Ex: news, sports, entertainment, pro blogs

13

Gadget technology
• Easy to use • Lots of documentation • Lots of examples • Various levels of complexity

14

iGoogle Tutorial
• Google‟s personalized homepage

15

Gadgets are open
• Gadgets are open-source XML • Developer community worldwide • Easy API: google “gadgets api” or
http://www.google.com/apis/gadgets/

16

“Hello world” gadget
• <?xml version="1.0" encoding="UTF-8" ?>
<Module> <ModulePrefs title="hello world example" /> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content> </Module>

17

API services
• ModulePrefs
– Title, height, author, description, thumbnail, …

• UserPrefs • Saving state • Flash gadgets • Working with remote content:
– RSS, text, XML

18

Gadgets in other places
• Google desktop • Google page creator • Other websites (syndication) • More…

19

Hosting&Publishing
• Hosting
– Google Gadgets Editor – Google code – Googlepages – Your own site

• Publishing
– Submitting to the directory
– Getting people to use it

20

Advanced API
• Gadget-to-gadget communication:
– Read http://www.google.com/apis/gadgets/pubsub.html

• It‟s cool, yet problematic…

21

Anatomy of a Gadget
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." height="50" author="Daniel L." Gadget directory meta-data

author_email="my.email@gmail.com"
author_location="Madrid, Spain" category="tools" /> <UserPref name="Color" datatype="string" default_value="red" /> <UserPref name="Toggle" datatype="bool" default_value="true" /> <UserPref name="Locations" datatype="list" /> <Content type="html"><![CDATA[ <b style="color: red">hello world!</b> ]]></Content> </Module> Gadget content User-configurable preferences

22

Gadget UserPrefs
• Allows users to configure your gadget • Multiple types:
– Checkboxes – Dropdowns – Text input – Lists

• Use “hidden” UserPrefs to store data
inside your gadget
<UserPref name=“saved” datatype=“hidden” default_value=“0” />

23

Creating a Gadget: Using the API
Tabs Flash

Dynamic Height

MiniMessages

Analytics And more… • SetPrefs • Grid • Drag • Mapplets

24

Creating a Gadget: Using the API
• Add <Require feature=“…”/> tags to use our libraries
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs …> <Require feature="tabs"/> <Require feature="flash"/> <Require feature="dynamic-height"/> <Require feature="minimessage"/> <Require feature="analytics"/> <Require feature="setprefs"/> <Require feature="drag"/> <Require feature="grid"/> <Require feature="sharedmap"/> </ModulePrefs> <Content…/> </Module>

25

Tech Tip 1: Analytics & Numbers
• Weekly pageviews are displayed in the Google Gadgets for Your Page directory.

http://www.google.com/ig/directory?synd=open&url=<gadget_url>

• For more precise and detailed numbers, it‟s a few lines of JavaScript
<ModulePrefs …> <Require feature="analytics"/> </ModulePrefs> … <script> _IG_Analytics("UA-00000", "/mygadget"); </script>
26

Tech Tip 2: Embedding flash objects
Before:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla sh.cab#version=6,0,40,0" WIDTH="550" HEIGHT="400" id="myMovieName"><PARAM NAME=movie VALUE=”http://xyz.com/flashvideo.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src=”http://xyz.com/flashvideo.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>

Inconsistent behavior across browsers. Complex HTML.

After:

_IG_EmbedFlash(„http://xyz.com/flashvideo.swf‟, container, { width: 550, height: 400, });

One line of JavaScript and cross-browser compatible
27

Tech Tip 3: Fetching Remote Content

Fetching remote content is powerful, convenient, and easy! – Text/HTML, XML, RSS/Atom feeds – Cached by default to prevent overloading servers – Built-in RSS/Atom parser outputs in JSON

28

Tech Tip 3: Fetching Remote Content

Three methods available:

• _IG_FetchFeedAsJSON(url, callback, entries, summaries)
Fetch RSS/Atom feeds. Returns simple JSON object:

– Useful when you need general data from the feed:
• per feed: URL, Title, Description, Link, Author • per entry: Title, Link, Summary, Date

• _IG_FetchXmlContent(url, callback)
Fetch XML content. Returns response as XML object.

– Useful when fetching XML feeds with no standard format. – Extract any data that you need.

• _IG_FetchContent(url, callback)
Fetch content. Returns response as text.

– Useful when fetching and screen-scraping HTML from the
response
29

Tech Tip 3: Fetching Remote Content
<div id="container"></div> <script> function callback(response) { // Iterate through each entry and generate HTML to be inserted 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>

http://news.google.com?output=atom
<?xml version="1.0" encoding="UTF-8"?> <feed version="0.3" xml:lang="en" xmlns="http://purl.org/atom/ns#"> <generator>NFE/1.0</generator> <title>Google News</title> … </feed>

30

Tech Tip 4: Internationalize!

• Support multiple languages in a single gadget • Increase success in other countries • Specify supported languages in your gadget
XML and iGoogle automatically loads the right one
en.xml hello.xml <?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>

Hello World

<?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle>

ja.xml <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>題名</msg> <msg name=“hello”>こんにちは世界</msg> </messagebundle>
31

Tech Tip 5: Storing State
• Example: Simple Notes Gadget • User creates notes and saves them in iGoogle • Remember user‟s notes whenever coming back to the page. • Let the user set a different background color for the gadget

32

Tech Tip 5: Storing State
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Note" height="80"> <Require feature="setprefs"/> </ModulePrefs> <UserPref name="text" default_value="Type text here.” datatype="hidden"/> <UserPref name="color" display_name="Color” default_value="#ffffcc" datatype="enum"> <EnumValue display_value="Yellow" value="#ffffcc"/> <EnumValue display_value="Blue" value="#e5ecf9"/> <EnumValue display_value="Green" value="#e0eee0"/> </UserPref> <Content type="html"><![CDATA[ <script> function save() { var prefs = new _IG_Prefs(); prefs.set("text", _gel(„note‟).value); } </script> <style> #container { background-color: __UP_color__; text-align: center; padding:6px; } </style> <div id=container> <div><textarea id="note"/>__UP_text__</textarea></div> <input type="button" value="Save Note" onclick="save()" /> </div> ]]></Content> </Module>
33

Tech Tip 6: Caching External Resources
• Facts:
– Google caches all gadget XML files – Google caches all requests going through_IG_Fetch…() methods.

– Gadgets receive tons of traffic
(Date & Time gadget currently at 156M pvs/week)

• Remaining Problem:
– Gadgets often embed external resources hosted on third-party servers, e.g.
images, Flash

– Hosting servers melt down because they cannot handle all the requests

• Solution:
– 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

34

Tech Tip 6: Caching External Resources
Caching images
<img id="goImg" src="" width=100 height=150 /> <script> _gel("goImg").src = _IG_GetImageUrl("http://domainA.com/go.gif"); </script>

Caching Flash
<div id="container"></div> <script> var cacheUrl = _IG_GetCachedUrl(„http://mydomain.com/flashvideo.swf‟); _IG_EmbedFlash(cacheUrl, „container‟, { width: 300, height: 250 }); </script>

35

Want to know more?
• Google Gadgets API Docs
http://www.google.com/apis/gadgets

• iGoogle
http://www.google.com/ig

• Google Gadgets For Your Webpage
http://www.google.com/ig/directory?synd=open

• Top Gadget Authors
http://www.google.com/ig/authors

• Discussion Group
http://groups.google.com/group/Google-Gadgets-API

• FAQ / Knowledge Base
http://code.google.com/support/bin/topic.py?topic=10027

• Google Distribution Guidelines
http://www.google.com/webmasters/gadgets/guidelines.html

36

Google Gadgets projects
• Your own ideas
• Something you and your friends will use • Something cool (interesting data, slick visualization, usage of special
technologies)

• Something sophisticated (interaction with server side, gadget
interaction)

– Advantages
• Google Gadgets‟ platform is ready and easy to learn • You can have it with you at all time on your personal iGoogle page • You can share with your friends and/or with the entire world

37

Ideas for projects
• university related
• Rate a professor system • Course materials (grades, slides, home-work reminders, etc.)

• Using external data sources (combining, optimizing,
visualizing, etc):
• Public transportation wizard • Movie gadgets • Apartments for rent • Shows (concerts, etc.)

– iGoogle Band
• Each gadget is a musical instrument

38

schedule
• Monday 12.5: Google Gadgets introductory talk + project ideas • Monday 19.5: Gviz technologies + more project ideas • Monday 2.6: student project ideas presentations • Monday 23.6: status: architecture + initial demos • Monday 14.7: status 2 • Monday 11.8: final presentations

39

Workshop requirements
• Proposal
– Project idea, architecture, technologies – UI snapshots

• Final submission
– A working gadget-based application – Code (documented)

– Project page (will be part of the workshop wiki)
• Architecture, design, lessons learned

40

More project ideas
• Time Zone gadget-no feed but should be easy to find online • Currency exchange gadget-no feed • Show times gadget - I've already got a feed for you from seret.co.il • Any major sports results • Take off and landing-might be able to get feeds • Music hit list-no feed but should be easy to find online • Pregnancy calculator/ followup / countdown-can be a multi tab gadget-see what clalit did and
do it better

• TV listing • Periodic table- no feed necessary-The legend tells that a similar gadget at the states got 3
millions users. etc.

• Math equations-gadgets- enter data and gets- shapes diameter, area , quadratic equation • Google Israel marketing department can help with creating some connections to get feeds.

41


				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:217
posted:8/12/2009
language:English
pages:41