Digital Scholarship - Online Tools & Resources

1. To get started with TimelineJS, first you need a Google account. If you don't want to make a Google account, email dscholar@fiu.edu so we can make and share a template with you that you can edit anonymously. 
2. Navigate to the Timeline JS homepage. 
3. Once there, click on the big green "Make a Timeline" Button.
4. This will take you to the TimelineJS tutorial--follow step one to use the Google spreadsheet template. 
5. Once you have copied the spreadsheet, you now need to publish it to the web. Go to File-->Share-->Publish to web. When the Publish menu pops up, change "Entire document" to "od1". Then close the window. DO NOT grab the link it is presenting to you.
6.  Close out of the menu. Copy the link in your browser's URL bar. 
7. Use this link to generate your timeline using Step 3 on the TimelineJS website.
8. This will populate the URLs in step 4--grab these to share your timeline!
9. Now that you have shared your timeline, you are ready to edit your spreadsheet to customize the timeline for your project. You can rename it and change the sample data, add new rows, etc. Once you edit it, you do not need to re-share--it will automatically update the link with any edits. 
10. See other tabs in this tutorial for tips on adding media and customizing your timeline!

Adding media to timeline is as easy as grabbing a link and putting it in the media, but knowing which link to grab can be tricky. 

For images: 

• If your URL ends with .jpg, .png, or .tiff, you can use the link in your browsers navigation bar. 
• If it doesn't, right click on your image and select "copy image URL." This is the link you want to add to your spreadsheet. 
• If your image is on Flickr, you can use either the URL in the browser nav bar, or the URL from the "share" feature.

For videos: 

• For videos hosted in YouTube and Vimeo, you can use the URL for the video page.
• For videos hosted elsewhere, the URL must end with .mp4

For audio:

• Use the URL for the SoundCloud clip page.
• For Spotify, use the URL obtained from clicking on a song or playlist menu and selecting "Share" then "Copy Song/Playlist Link."

• For audio hosted elsewhere online, the link has to end with .mp3, .m4a, or .wav. 

For maps:

• Use the URL for the Google Maps page. Coordinates, search results, place marks and directions are all honored by Timeline.

General TimlineJS Tips

• Keep your timeline short! Under 20 slides is recommended.
• Don't move around any of the columns or change any headings in the spreadsheet template. 
• Don't leave blank rows between entries. 
• Keep your events in chronological order on the spreadsheet--Timeline doesn't like it when your entries jump around. 
• It can be helpful to organize your narrative and media in a separate document or spreadsheet, then add it to the Timeline template.
• Hovering over any of the columns in the spreadsheet will give you more information about how that column is used and whether they are required or optional. 

Customize your timeline with HTML tags

The timeline spreadsheet allows you to use HTML tags to add links or other customization to your timeline. This can be helpful for creating hyperlinks in your narrative or linking back to where you found an image or other media. You may also want to use HTML to create line breaks in your text, or add bold or italics. Some helpful HTML tags are: 

• Links:

<a href="url">link text</a> 

For example, adding 

<a href="http://dpanther.fiu.edu/dpanther/items/itemdetail?bibid=FIUA006151&vid=00001">FIU Special Collections and University Archives</a>

to the "Media Credit" row of my spreadsheet will allow visitors to my timeline to find where I got my original image when they click on the text "FIU Special Collections and University Archives."

• Line Breaks:

Insert line breaks with the paragraph tag. Simply surround your text with  <p> and </p>

For example:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

• Bold or Italics:

Surround text you would like to make bold with <b> and </b>

Surround text you would like to make italic with <i> and </i>

For example:

<b>This text is bold.</b>

<i>This text is italic.</i>

For additional information about HTML and HTML tags, visit W3Schools HTML Tutorial.

Changing the background of a Timeline slide

• You can easily change the color of your slide background by using something called a "hex code." Hex codes are a combination of letters and numbers that represent different colors. You can find hex codes on many websites, such as W3Schools Color Picker. 

Insert the code in the "Background" column of your spreadsheet:

• You can also insert an image URL in the Background column, and this will cause an image to display in your background.

Other helpful timelineJS resources and tutorials: