Knight Digital Media Center Multimedia Training

Tutorial: FreeDive tips and tricks

Introduction

freeDive is built using the Google Visualization API, so there are a lot of neat, undocumented tools at your disposal. This tutorial has been created to explain those missing tools and to help you get the most out of freeDive.

We will continue to add tips as time permits so be sure to check back.

Create an effective search page

One of the most important techniques to make a freeDive a good user experience is to be thoughtful about how you post your widget. Specifically, you need to offer guidance on how to use the tool and invite users to search the data. Take time to refine your headlines and introductions. They will increase audience interaction and boost search engine optimization.

Use a post headline to introduce the data

• Use an active voice
• Tell the user what to do

Write an introduction that helps the user.

• Provide context
• Introduce the fields
• Give a search example

EXAMPLE

Preload data for your users

There will be times when you want readers to see data immediately upon arriving at a search page. This is a relatively easy task to accomplish but it should be done with caution. Large amounts of data will cause poor performance.

When you first load a page with freeDive on it, you start out with something that looks like this:

 

If you leave the fields blank and click Search, you can see that "?fdall=true" is added to the URL.

 

All you need preload data is to add "?fdall=true" to the URL when you create a link to the page . If you are creating a link, the code would look like this:

<a href="http://yourwebsite.com/databasepage?fdall=true">Search the database</a>

If you are using an iframe, the code would look like this

<iframe src="http://yourwebsite.com/databasepage?fdall=true" width="600" height="800" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>

You can use the same technique to preset any search you like. To preload a search for "Brown," I could copy and paste the following:

 

A word of caution: Using this technique with large databases will do more harm than good. It will take a while for all the data to load and many readers will likely move on. Don't do this if you have more than several hundred records. And be sure to test on a slowish internet connection (perhaps at home) so that you can see if your users will be inconvenienced.

Add images and links

One of the great things about the Google Visualization API is that it allows the use of some HTML inside of tabels. That means you can make your database a bit more informative by adding images and links (shown below). Any web-friendly image file like JPEG, PNG, etc. will work.

Adding images

Our example data lists population densities in US states and we want to include photos of state flags. For freeDive to recognize these images we need to write it into the data spreadsheet using HTML.

Notice that we have created a new column for our images. We have chosen column A, but it could be any column. We have named our column header "Flag."

Next, we'll need to find the images we want to use. For this exercise, wikimedia commons is a great place to collect images of flags. Your needs may be different, but as long as the images are hosted online (through your own site, wikimedia commons, flickr, ect.) the method is the same. 

 

Click on the circled link. This will bring you to a page that only contains the image.

 

We have an image file, however, it is far too big to be used in freeDive. Click the link to get a smaller version (200px).

This is much more manageable, but is still too large for our purposes. Look at the URL in the browser and you can see that the image is 200px. Now if we choose to, we can make the image smaller or larger by just changing this size. Change the  200px in the URL to 50px then refresh the browser. 

Now copy the entire URL and return to your spreadsheet.  Paste the URL in cell A2.

We need to write HTML code so that freeDive recognizes these URLs as images. 
Type the following before the URL <img src='
The type this after the URL. ' />

As a whole it should look this
<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Alabama.svg/50px-Flag_of_Alabama.svg.png' />

 

If this were more than a tutorial, we'd continue to add images to the rest of the 50 states. For your purposes, you will need to add the HTML for all of the image URLs, as the red arrows indicate. Here's an example:

 

Adding links

We use a similar process to add links to our table.

Create a column for the links. I selected the column G on the example google spreadsheet. Type "Website" in cell G1 because all of the corresponding links will ultimately take me to the government website of each state.  

As you can see below, I have pasted the Alabama state website's URL into cell G2. Your needs and links will be different, but if possible, try to paste a URL to avoid any errors.

 

Now add the HTML:

Type the following before the URL <a href=' 

 

The type this after the URL.  '>Website</a>

 

When published in freeDive all you will see is the word Website and it will be a link. However, if you choose to call your links something different, adjust that in the HTML. For example, if I wanted to call this link "site," I would have written the code as <a href=http://www.alabama.gov/' >site</a> 

The example below shows the two links in use.

 

Once you have finished adding all the necessary html into your spreadsheet, simply put it into freeDive and presto, you'll have images and links in your database.

Load data dynamically

Many governments and organizations frequently provide feeds to live data. This can include political data like election results, environmental data and much more. You can offer that data to your readers in an easy to consume format with freeDive.

Google Spreadsheets offer several special funtions to load content dynamically from the web. You can load XML, HTML tables or lists, CSV and TSV files, RSS feeds and Google Finance data. If that seems like a lot, it is. 

This section will focus on loading a CSV of the latest data from California rivers, updated every 30 minutes during the day, and every hour at night.  Dreamflows, a river rafting and kayaking site, publishes the data from the USGS and California Department of Water Resources.

Start by creating a new spreadsheet called River flow. Then go to the bottom of the window and add a new sheet. 

 

Go to cell A1 in Sheet2 and type =ImportData("http://www.dreamflows.com/realtime.csv"). The feed should import as shown below.

 

That's pretty great and the data will update automatically every time the user loads the freeDive widget. But freeDive requires the data to be cleaned up a bit.

Click on Sheet1 at the bottom of the page to return to the original sheet. Type "Name" in cell A1.

Next, we need to import the first river name from Sheet2. Type =Sheet2!B8 in cell A2. The result should look like this:  

Now type "Place" in cell B1, and then in cell B2 type =Sheet2!B8  The result should look like this:  

 

See the pattern? Great. Continue the process until Sheet1 looks like this:

 

Now we need to get the rest of the data. Click once on cell A2. Hold down the shift key and click once on cell G2 to select al the data in the row. Find the blue square in the bottom-right corner of cell G2. Click and drag the blue square down to about row 200. This will give you the last 200 reports.

 

Perfect. You're ready to publish and share the spreadsheet and use freeDive to make it searchable.

If you want to see an RSS example, check out our spreadsheet that pulls in a feed of the latest earthquakes from the USGS. 

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.

© 2013 The Regents of the University of California