We are going to host the data that will populate your timeline within Google Docs. Why this particular application? One reason to use Google is that it is free. Second, it provides a more convenient way to update your data than through a standard javascript file. Third, once you have "published" the spreadsheet, it will provide a constantly updating feed to your timeline. This means that when you make a change to the spreadsheet, your timeline will instantly reflect this change. A fourth reason is that you can share your spreadsheet with others, allowing them to edit the events on the timeline. As such, you will be able to build a timeline collaboratively with as many people as you'd like—all you have to do is give them access to your spreadsheet.
The following seven steps will tell you how to format your spreadsheet to make it readable for the Exhibit script that powers your timeline. After you've done these initial steps, you may occasionally want to refer to Steps 3 and 4 as they tell you how to populate each individual field for your timeline and how to enhance the output of the data, respectively.
First, you need to create some titles for your spreadsheet's columns. This will tell the Exhibit script where it can find the information it needs to construct the timeline. Each of the column titles must be in braces, like this {label}.
The number of columns that you title will depend on the different types of information that you will want to be included in your timeline. At the very least, you must have columns titled {label}, {start:date}, and {end:date}.
You will most likely want to create columns titled {description:single}, {image:url}, and {eventType}. You can define other columns depending on your needs. For example, you might have an {initials} column so students who add events to the timeline can leave their initials, which you can then choose to have represented on the timeline—or not. You should use only single words for column headers or get creative in your capitalization, as I've done with {eventType}.
Your spreadsheet should now look something like this.
N.B. The words to the left of the colon is the name of the column, as far as Exhibit is concerned. The word to the right of the colon tells Exhibit what type of information to expect in that field. If you don't have a colon and a second word, Exhibit will default to seeing the information in columns as "text." For example, {label} is the same thing as {label:text}. The "single" that follows "description" tells Exhibit to expect a string of text.
This step is very important: Select all the columns. Make sure you don't just click on the title cell of the column. Rather, click on the column's letter and drag until you've selected all your columns. Then click on the "Format" drop-down box and select "Plain text."
If you don't set the columns to plain text, the spreadsheet may reformat your information. This frequently happens to date information. If Google reformats your information, it may not be recognizable to Exhibit and your timeline will consequently not function. Setting all of the columns to plain text prevents this from happening.
Now that you have titled your columns and have formatted the spreadsheet to plain text, you are ready to start adding data for the timeline. What follows is an explanation of what each of the columns does and how your information should be entered. The {label} and {start:date} columns are mandatory. There must be some information in both of them for an event to display on the timeline. The other columns are all optional.
{label}: The text in this column is what will be visible directly on the timeline. Think of this as the title for your event. You should probably limit this to a small number of words.
{start:date}: This column indicates when an event happened. Following international standards for representing dates, you must use the following format for your dates: yyyy-mm-dd. You must use two-digit months and days (01, 02, 03).
{end:date}: This column indicates when an event ends. In other words, if the event happened over a span of time, when did it end? Most events do not need an end date, but some do, like time spent writing a book. Again, use yyyy-mm-dd format.{description:single}: This column is where you put your longer description of the event. This description will be displayed in the bubble that appears when you click on the event in your timeline.
{image:url}: This column is where you can place a URL for an image related to your event. This photo will also be displayed in the bubble that appears when you click on the event in your timeline.
{eventType}: The text in this column identifies what kind of event this is. For example, you could label an event as Politics, Biography, Literature, or Arts. You can choose to create whatever Event Types or labels you would like. Labels can be more than one word long. Events can also have multiple labels, but the labels must be separated by semicolons. For example, "Literature; Biography". Finally, make sure that you are consistent in your capitalization of your labels. Exhibit will interpret "Politics" and "politics" as two different labels. Of course, if you've added additional columns to suit your needs such as the {intials} column, you can simply add text or links into the column by modelling what you've done here.
While your spreadsheet now has the data to generate events on your timeline, it will all be in plain text. By selective use of italics, bolded text, and hyperlinks, you can enhance how your data is displayed in the final timeline. You should not use the spreadsheet's text formatting tools as Exhibit will not recognize these edits. Instead, you can write basic HTML within your spreadsheet. Some codes that you might want use include <i>, <b>, and <a>. You can also use basic HTML to include video within your timeline.
For your first entry, "Spook Country Published," you might want to italicize the first two words since they are the title of a novel. To italicize "Spook Country" on the main timeline display, you would change the text in the {label} column to read "<i>Spook Country</i> Published". Don't worry about the fact that it doesn't look italicized in the spreadsheet.
Follow the same procedure, but with <b> and </b> tags to bold particular text.
Within descriptions, you might want to provide a citation of your source or additional information about the event. Hyperlinks are an easy way to accomplish this. For writing a link, you will need the URL to which you want to point and a phrase that you want to have linked to this URL. Then use this format in the appropriate column of your spreadsheet: <a href="LINKGOESHERE">PHRASE GOES HERE</a>.
For example, if I wanted to link the description of Spook Country's publication to its Wikipedia entry, I would write in the description, "William Gibson's ninth novel, <a href="http://en.wikipedia.org/wiki/Spook_Country">Spook Country</a>, is published in the United Kingdom." I could likewise add italics to the link with additional <i> codes, yielding "...<a href="http://en.wikipedia.org/wiki/Spook_Country"><i>Spook Country</i></a>...".
The result is the highlighted portion below:
If you want to have even more control over paragraphing within your description, you can use tags like <p> or <br>. Other useful HTML tags you can use include header codes (i.e., <h1>) and font colors (<font color="pink"> or <font color ="#FF6EB4">). For more font colors, I suggest checking the Hex Hub.
You may also want to add video clips to your description field. These videos can be the sole object in your description field or they can be in addition to a text description. Most video sharing sites like YouTube, Viddler, and Google Video provide code for embedding the video hosted there on another site. YouTube is shown below.
To use a video hosted on one of these sites, just copy the code from this "Embed" field then past it completely into your spreadsheet's description field. In the images below, I am using code from YouTube.
For all of these edits (formatting text, adding hyperlinks and video), it will be much easier to see the effect of adding some HTML to your spreadsheet once you have your timeline up and running. You may want to refer back to this section at that time. Also, make sure you do not use HTML tags in the date or image fields.
Now that you know how to add data to your spreadsheet and enhance it for use in your timeline, you must make the data from your spreadsheet available to outside applications, such as your timeline. To do this, you need to "Publish" your spreadsheet. Publishing creates a stable URL for the spreadsheet that allows you to share a read-only version with others, and it creates a feed from which the Exhibit script in your timeline's web page will get its data.
To publish your spreadsheet, click on the "Publish" tab on the upper right corner of the spreadsheet.
The tab will open, and you will see something very similar to what is below.
Click the "Publish now" button. You can tell that you've successfully published the spreadsheet as the link listed in this box will turn blue and become active.
Since you want your timeline to update every time you add new information to your spreadsheet, you must select the option to have the spreadsheet automatically re-published when changes are made. Check the box, and then click "Re-publish document."
Now any changes you or anyone else makes to your spreadsheet will automatically be incorporated into your timeline. (Do not worry about adjusting the drop down box for which sheets are published. You will only use the first sheet for your timeline.)
Having published the spreadsheet, you now need to get the address of its feed. This feed provides your timeline with the data from your spreadsheet. As such, you will need the feed when writing the HTML for your timeline.
First, click on the URL in the Publish tab (see the previous image) to open a new tab or window with your spreadsheet in read-only mode. It will look something like this:
The next step you take depends on which Internet browser you are using.
For Firefox
If you are using Firefox, right-click anywhere on the page and select "View Page Info". Click on the Links tab in the menu you are given. Look for a row in which Name is "alternate", Type is "Related Item", and "Address" looks something like this:
http://spreadsheets.google.com/feeds/list/o08841867754116283182.6102151849127695926/od6/public/basic
This is the URL of the feed of the spreadsheet. Right click on that row and choose "Copy". Then close the dialog box. You have now copied the feed URL to your clipboard. Once you have copied the feed, paste it somewhere like a Word document so you don't lose it.
For Internet Explorer or SafariYour spreadsheet is now complete and ready to provide your web page with the data it needs to produce a timeline. Relax. You're one-third done. To see a complete sample spreadsheet, click here. This sample is in view-only mode, so it looks different than what you will see when you are editing your own spreadshet.
Now that you've relaxed a bit, you'd better write the web page.
 |
 |
Timeline Tutorial by Brian Croxall |