1 / 41

Google Technologies

Gadgets and visualization API - technologies for Google Apps Niv Efron Yonatan Ben-Ya’akov Danny Feldman (TA). 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

trygg
Download Presentation

Google Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Gadgets and visualization API - technologies for Google AppsNiv EfronYonatan Ben-Ya’akovDanny Feldman (TA)

  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. What are Gadgets? • 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 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“Hello World" /> <Content type="html”><![CDATA[ <b>Hello World!</b> ]]></Content> </Module>

  4. Examples of Google Gadgets

  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. iGoogle homepage…

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

  8. Google Desktop…

  9. Mac OS X Dashboard…

  10. Instant Dashboard capabilities • Going from this:

  11. Instant Dashboard capabilities • to this:

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

  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. Gadget technology • Easy to use • Lots of documentation • Lots of examples • Various levels of complexity

  15. iGoogle Tutorial Google’s personalized homepage

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

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

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

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

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

  22. Gadget directory meta-data 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." 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> User-configurable preferences Gadget content

  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 <UserPref name=“saved” datatype=“hidden” default_value=“0” />

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

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

  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=<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>

  27. _IG_EmbedFlash(‘http://xyz.com/flashvideo.swf’, container, { width: 550, height: 400, }); Tech Tip 2: Embedding flash objects Before: <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.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: One line of JavaScript and cross-browser compatible

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

  31. Hello World en.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> <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle> hello.xml <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>題名</msg> <msg name=“hello”>こんにちは世界</msg> </messagebundle> ja.xml 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

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

  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. Tech Tip 6: Caching External Resources Caching images Caching Flash <img id="goImg" src="" width=100 height=150 /> <script> _gel("goImg").src = _IG_GetImageUrl("http://domainA.com/go.gif"); </script> <div id="container"></div> <script> var cacheUrl = _IG_GetCachedUrl(‘http://mydomain.com/flashvideo.swf’); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 }); </script>

  36. Want to know more? • Google Gadgets API Docshttp://www.google.com/apis/gadgets • iGooglehttp://www.google.com/ig • Google Gadgets For Your Webpagehttp://www.google.com/ig/directory?synd=open • Top Gadget Authorshttp://www.google.com/ig/authors • Discussion Grouphttp://groups.google.com/group/Google-Gadgets-API • FAQ / Knowledge Basehttp://code.google.com/support/bin/topic.py?topic=10027 • Google Distribution Guidelineshttp://www.google.com/webmasters/gadgets/guidelines.html

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

More Related