Google Technologies - PowerPoint PPT Presentation

slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Google Technologies PowerPoint Presentation
Download Presentation
Google Technologies

play fullscreen
1 / 41
Google Technologies
236 Views
Download Presentation
trygg
Download Presentation

Google Technologies

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