Upload
edward-metz
View
111
Download
0
Tags:
Embed Size (px)
DESCRIPTION
describes how to create a simple iGoogle gadget for your library's online catalog
Citation preview
Intro – What is iGoogle
What is iGoogle? Personal information portal and virtual workspace iGoogle offers more than 25000 modules or “gadgets” to choose from.
Intro – What are Gadgets
What are these gadget things? A gadget is a mini
web application XML document
residing on any public webserver
At most basic level it is simply your HTML (and/or JavaScript, Flash) content nested inside an XML wrapper.
A gadget….
…and it’s underlying XMLdocument
Intro – Library Gadgets
What have some libraries done with gadgets? Hennepin County Library Catalog WorldCat Open Search Washington State Library CARL HIP, CARL DigLib, CARL RSS Feeds BYU Idaho Library Search
Intro – Library Gadgets
So how do you make one?
Step 1. Do your homework. Some essential reads: Google Gadget API Developer’s
Toolkit Getting started Writing your own gadgets Development Fundamentals Creating a user interface Publishing your gadget
So how do you make one?
Step 2. Login to or create your free Google account
Step 3. Find a gadget that has a similar aim to what you want to do.
Step 4 Open it in the Google Gadget Editor (GGE), study the source code and adapt it to your own needs.
Step 5 Edit, preview, save, test and publish your gadget in the Google Gadget Editor (GGE)
Google Gadget Editor (GGE)
Google Gadget Editor. (GGE) Use it for: Creating, editing, previewing, saving, publishing your gadget.
Edit/create your gadget
Open any gadget
Preview your gadget
Getting started – Log-in
•Log-in to your Google account.
•If you don’t already have your iGoogle page as your default display click on the iGoogle link here as shown.
Getting startedFind some source code
Now go to the content directory by selecting the Add stuff link
Getting started Find some source code
Now you can search or browse the Homepage (iGoogle) content directory
Getting started Find some source code
select View source
Opening a Gadget in the GGE
At the next page copy the url from the browser address bar
Opening a Gadget in the GGE
Now return to the GGE Select File – Open from
url
Opening a Gadget in the GGE
At next window paste the URL you copied for our XML document
Opening a Gadget in the GGE
This populates your GGE with the XML source code
Before you begin editing, select File –Save as - give the document a new name
Note: you MUST be logged into your Google account to take advantage of all the GGE features
Creating your gadgetDefining the document
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
Creating your gadgetModule Settings <ModulePrefs>
<ModulePrefs attribute
attribute
attribute
attribute
height=“220” >
</ModulePrefs>
title : required. Title of the gadget. Displays in the
gadget title bar on iGoogle. title_url:
make my gadget title a hyperlink to your library or institution
directory_title : optional. Don’t really need this here since I don’t
have any user preferences. author : required. author_email : required.
Creating your gadgetModule Settings <ModulePrefs>
author_affiliation (suggested) Who’s to blame? Your library or
college
author_location (suggested) author_link (suggested)
description - required. Provide 1-2 sentences that tell
something about your gadget.
Creating your gadgetModule Settings <ModulePrefs>
screenshot (suggested) url address of image png, gif, jpeg width = 280 pixels
Thumbnail – (required) url address of image 120 x 60 pixels
Width – Required in GGE Normally the default is 320.
Height – optional Default is 200. Screenshot image Thumbnail image
Creating your gadgetModule Settings <ModulePrefs>
Creating your gadgetContent <Content type=“html”>
<Content type="html"><![CDATA[
Place your content in this section. Can include HTML, JavaScript, Flash.
In the following example I’ve created a simple table <table> containing two rows <tr> with a total of four cells <td>. The html search form, related hyperlinks, some JavaScript and an image are nested inside their respective cells. </td>
<table style="WIDTH: 99%" borderColorDark="#333333" borderColorLight="#666666" border="2" FONT color="#2B1500"><center><b> Search the CARL Catalog </b></font></center><tbody>
Creating your gadgetContent : HIP Search Form <table>
The HIP Search Form<tr><td><form id="catalog_form" action="http://comarms.ipac.dynixasp.com/ipac20/ipac.jsp?profile=carlcgsc" method="get" target="_blank" reloadxsl="true#focus"><font color="#2B1500"><b> for</b></font><input name="term"><font color="#2B1500"><b> in</b></font><select name="index"> <option value=".GW" selected>Keyword anywhere</option> <option value=".TW">Title keyword</option> <option value=".AW">Author keyword</option> <option value=".SK">Fulltext items</option></select><input type="image" src="http://cgsc.leavenworth.army.mil/carl/images/b-go-red-full.jpg" value="Submit Query"></form></td>
Note: Option values come from the word_index table in Horizon
HIP url
Creating your gadgetContent : HIP Search <form>
Library Thing bookcovers widget
<td><script language="javascript" type="text/javascript"
src="http://www.librarything.com/jswidget.php?reporton=metzejr&show=random&header=&num=1&covers=small&text=none&onlycovers=1&tag=alltags&css=1&style=1&version=1"></script>
</td></tr>
Creating your gadget<Content> : Adding dynamic content
Library Thing Widget
Other links of interest.<tr><td><center><a
href="http://comarms.ipac.dynixasp.com/ipac20/ipac.jsp?&profile=carlcgsc&menu=account" target="_blank"> <font size="3">
<b>My Account</b></a></center><center><a
href="http://cgsc.leavenworth.army.mil/carl/new_titles.asp" target="_blank">
<b>New Titles</b></a></center><center><a
href="http://cgsc.leavenworth.army.mil/CARL/c_ya.asp" target="_blank" >
<b>New Youth Titles</b></a></center></font></td>
Creating your gadget<Content> : Adding links
Add your logo and close the table
<td>
<center>
<img src="http://pages.google.com/edit/edmetz1/cgsc2.jpg/cgsc2-full.jpg">
</center>
</td>
</tr>
</tbody>
</table>
Creating your gadget<Content> : Add your branding
Now we close our
Content section </Content> and our XML wrapper </Module>
Creating your gadgetLet’s wrap it up
Testing, testing 1,2,3
Test your gadget in different browsers Firefox, Internet Explorer, (Safari, and
Opera). This can be easily done via the GGE. Open a
web browser of your choice, Select File – Publish – Add to a web page.
Creator page opens and gives you a preview.
Publishing your gadget
http://www.google.com/apis/gadgets/publish.html#Submitting
iGoogle Content Directory Syndication
Example: CARL Blog
Publishing to the Content Directory
On the GGE select File – Publish
At the next screen you’ll see this prompt. Click on the Publish to iGoogle Directory link.
Publish to the Content Directory
Make sure you’ve dotted your i’s and crossed your t’s,
read the fine print,
and then click the Send button.
Syndicate your gadget
On the GGE select File – Publish
At the next screen you’ll see this prompt. Click on the Add to a webpage link.
Syndicate your gadget
Customize your gadget
Click on the Get Code button
Syndicate your gadget
Now simply copy the code generated in the box below and paste it as appropriate into your website.
Syndicated gadget
Here’s how our gadget appears on our library’s blog.
Review
Do your background reading (Google Gadget Developer Toolkit)
Open a gadget in the GGE Edit, Preview, and Test in the GGE Publish to the Content Directory and/or
syndicate it for third party website(s). Publicize it (newsletters, brownbags, blog,
RSS)
iGoogle Gadgets @ Your Library
Questions?
Contact Info:Ed Metz
Systems Librarian, [email protected]
913-758-3027