1. 1 Internet technologies Workshop – TAU Google Gadgets related projects Niv Efron Yonatan Ben-Yaakov

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 theyre 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 Googles 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 Its new and cool

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, its 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 users 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