iGoogle allows you to customize your Google home page by adding gadgets which take content from other sites. These can be categorized with tabs and you can even customize your own web pages by adding gadgets developed by others.
I was curious how this worked and how to take advantage of it and this is a summary of what I found.
The following gadget is a photo of the minute gadget using Flickr photos.
- Webmasters can get code to place on their web pages from Google Webmasters
- Users can find gadgets to place on their iGoogle home page at iGoogle Gadgets
The following is the script code that was provided from Google Webmasters.
<script type="text/javascript" src="http://gmodules.com/ig/ifr?url=http://flickr-photo-of-the-minute.googlecode.com/svn/trunk/flickr.xml&up_refresh=5&up_displayDetails=1&synd=open&w=320&h=320&title=Photo+of+the+minute&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
The source of the gadget is located at: http://flickr-photo-of-the-minute.googlecode.com/svn/trunk/flickr.xml
From what I can tell, this is what the Google gadget appears to do.
- It runs a script at Goggle gmodules using the URL: http://gmodules.com/ig/ifr
- That URL loads another script from http://gmodules.com/ig/f/U1pEe_3SJYU/ig.js
- The Google script builds an IFRAME for the output content for the gadget.
- The content of the CDATA section is placed in an the IFRAME
If you notice the code in the script, you see a section on that embeds Google Analytics information. This isn't really a security risk, but you are being tracked as a user of the Gadget.
Content Combination Techniques
Showing a web page with content from multiple locations is what 99% of what the Internet and intra-net is about. There are a handful of techniques, but multiple technologies that support the different techniques.
Frames: The Goggle gadget (and others similar to this) use a frame. A frame basically takes content from another web page, but allows it to be displayed as if it were part of the current page.
Pre Rendered Content: Content is combined prior to output of the page. This often involves templates some type of code logic to combine the templates and data. Data is obtained from databases, XML files, static CSV files, or other web services. IIS and Apache servers use technologies including ASP, ASP.NET, and PHP to name a few.
Post Rendered Content: Content is combined in the client browser after the initial page is loaded. This requires a browser client that supports some level of scripting and at the lowest level HTTP requests. This technique takes XML or HTML after the page loads and parses it to update or output the content to local page. XMLHTTP, AJAX, ATLAS, and JavaScript are all technologies uses to make post rendered content sites work. Netflix was one of the sites to make post rendered content a feature to imitate.
Another interesting way to combine information and to allow filtering and sorting was published at MIT called Exhibit. An interesting example is the list of San Francisco Bay Restaurants
The iframe
The Google gadget really isn't anything new for the web. It's just an iFrame which is a section of the HTML document that contains another HTML document. This is useful when trying to merge content from multiple sources into a single page.
Frames are generally considered bad by designers for web design and navigation. They cause page sections to load irregularly and in an uncontrolled order and if there are errors loading the page section, then the page looks terrible from a design perspective (the user sees 404 file not found errors).
Instead of frames, designers like to use CSS on <div></div> sections to control positioning and layout.
Gadgets Pros and Cons
- Pro: You don't have to develop the code.
- Pro: You get to leverage other peoples code (almost as good as leveraging other peoples money)
- Pro: Gadgets use client bandwidth, not server bandwidth (at least not the original hosting page server)
- Pro and Con: If the gadget changes, you don't know about it
- Con: The gadgets can and often do embed tracking information
- Con: The gadgets can contain advertisements
- Con: Google knows the page that requested it
Recommendations
- I prefer not to use JavaScript if possible. Because JavaScript is runtime checked, not compile time checked, it's impossible to remove all the errors. There are pages everywhere on the web with JavaScript errors and every programmer makes them. If I use them, I prefer debugged and tested scripts that have been tested in multiple browsers.
- I do prefer pre rendered server side solutions (my preference is ASP.Net) with compiled code (VB.Net is my preference).
- If I use post rendered techniques, I like the use of XMLHTTP with simple DIV replacement techniques.
- Leverage other peoples debugged code instead of writing new code.
- Use the technique you can most likely make work most cost effectively.
- Be aware of the fact that Google gadgets are not necessarily doing things in your web sites best interest.
References
- Flickr Services flickr.com
- Google Gadgets for Webmasters goggle.com
- iGoogle Gadgets Directory goggle.com
- W3C Frames w3.org
- Exhibit MIT