Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations

Presentation on theme: "1 Internet technologies Workshop – TAU Google Gadgets related projects Niv Efron Yonatan Ben-Yaakov."— Presentation transcript:

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?

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…

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)

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

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

22 22 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. 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(, 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("", callback, 3, true); NFE/1.0 Google News …

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

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(""); var cacheUrl = _IG_GetCachedUrl(; _IG_EmbedFlash(cacheUrl, container, { width: 300, height: 250 });

36 36 Want to know more? Google Gadgets API Docs iGoogle Google Gadgets For Your Webpage Top Gadget Authors Discussion Group FAQ / Knowledge Base Google Distribution Guidelines

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

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

Similar presentations

Ads by Google