1. 1 Gadgets and visualization API - technologies for Google Apps Niv Efron Yonatan Ben-Ya’akov Danny Feldman (TA)

2. 2 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)

3. 3 HTML inside an XML wrapper 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 What are Gadgets? <![CDATA[ Hello World! ]]>

4. 4 Examples of Google Gadgets

5. 5 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

6. 6 iGoogle homepage…

7. 7 Third-party websites… http://gadgetryout.blogspot.com http://www.puertovallarta.net

8. 8 Google Desktop…

9. 9 Mac OS X Dashboard…

10. 10 Instant Dashboard capabilities Going from this:

11. 11 Instant Dashboard capabilities to this:

12. 12 Full application (gadget interaction) http://googlefinanceblog.blogspot.com/2007/10/api-gadgets-and-tabs-oh-my.html

13. 13 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

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

15. 15 iGoogle Tutorial Google’s personalized homepage

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

17. 17 “Hello world” gadget

18. 18 API services ModulePrefs – Title, height, author, description, thumbnail, … UserPrefs Saving state Flash gadgets Working with remote content: – RSS, text, XML

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

20. 20 Hosting&Publishing Hosting – Google Gadgets Editor – Google code – Googlepages – Your own site Publishing – Submitting to the directory – Getting people to use it

21. 21 Advanced API Gadget-to-gadget communication: – Read http://www.google.com/apis/gadgets/pubsub.htmlhttp://www.google.com/apis/gadgets/pubsub.html It’s cool, yet problematic…

22. 22 <ModulePrefs title="My First Gadget" description="This gadget prints hello world." height="50" author="Daniel L." author_email="my.email@gmail.com" author_location="Madrid, Spain" category="tools" /> <![CDATA[ hello world! ]]> Anatomy of a Gadget User-configurable preferences Gadget content Gadget directory meta-data

23. 23 Gadget UserPrefs Allows users to configure your gadget Multiple types: – Checkboxes – Dropdowns – Text input – Lists Use “hidden” UserPrefs to store data inside your gadget

24. 24 Creating a Gadget: Using the API And more… SetPrefs Grid Drag Mapplets Analytics Dynamic Height Tabs MiniMessages Flash

25. 25 Creating a Gadget: Using the API Add tags to use our libraries

26. 26 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= For more precise and detailed numbers, it’s a few lines of JavaScript … _IG_Analytics("UA-00000", "/mygadget");

27. 27 Tech Tip 2: Embedding flash objects Before: _IG_EmbedFlash(‘http://xyz.com/flashvideo.swf’, container, { width: 550, height: 400, }); After: Inconsistent behavior across browsers. Complex HTML. One line of JavaScript and cross-browser compatible

28. 28 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

29. 29 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

30. 30 Tech Tip 3: Fetching Remote Content 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(' ' + entry.Title + ' ' + ' ' + entry.Summary + ' '); } _gel('container').innerHTML = html.join(' '); } // Fetch 3 entries from Google News Atom feed and include summaries _IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, 3, true); NFE/1.0 Google News … http://news.google.com?output=atom

31. 31 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 Hello World <![CDATA[ __MSG_hello__ ]]> hello.xml Title Hello, World! en.xml 題名 こんにちは世界 ja.xml

32. 32 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

33. 33 Tech Tip 5: Storing State <UserPref name="text" default_value="Type text here.” datatype="hidden"/> <![CDATA[ function save() { var prefs = new _IG_Prefs(); prefs.set("text", _gel(‘note’).value); } #container { background-color: __UP_color__; text-align: center; padding:6px; } __UP_text__ ]]>

34. 34 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

35. 35 Tech Tip 6: Caching External Resources Caching images Caching Flash _gel("goImg").src = _IG_GetImageUrl("http://domainA.com/go.gif"); var cacheUrl = _IG_GetCachedUrl(‘http://mydomain.com/flashvideo.swf’); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 });

36. 36 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

37. 37 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

38. 38 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

39. 39 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

40. 40 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

41. 41 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.ilseret.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 betterclalit TV listing Periodic table- no feed necessary-The legend tells that a similar gadget at the states got 3 millions users. Math equations-gadgets- enter data and gets- shapes diameter, area, quadratic equation etc. Google Israel marketing department can help with creating some connections to get feeds.