Hello and welcome to this Timeline JS tutorial.  My name is Amy Mars and I'm the Humanities Librarian here at St. Kates
and I'm going be showing you how to use Timeline JS.
Timeline JS was developed by the Northwestern University Knight Lab and is a great tool for creating interactive multimedia timelines.
Before you start make sure you're logged in to your gmail account.
To create a timeline just go to the Timeline JS website.
Then click make a timeline,
get the spreadsheet template, make a copy. Once you've copied a spreadsheet rename it and delete the example content.
To create your timeline you will simply fill in the rows. Each row is a point on your timeline.
I'm going to use the example timeline on women in computing from the Timeline JS website to show you how to use this tool.
The first few columns are for dates. At minimum you need to put a start year.
Depending on the event you are highlighting you might also choose to put in a month in a day.
If your event spans time you need to put an ending date as well. Here's how the date displays on the finished timeline.
If you want to feature b.c.e dates, you'll have to enter them as negative numbers.
For example 2400 BCE would be entered as negative 2400.
You can also use the display date
if you want the date to display differently than the way it is entered on the spreadsheet.
For example if you only know the approximate date for an event you can enter
circa in the display date field.  You can also use this space to display the BCE.
You'll notice that your rows don't necessarily have to be listed in
chronological order because Timeline JS will automatically order them based on these date fields.
In this column you'll enter headline. Like a newspaper headline they should be short, descriptive yet compelling
This is what the headline looks like on your timeline.
The next column is where you can enter a description.
Here's where you'll want to describe your event in more detail. The challenge here is to be succinct yet descriptive.
The media column is where you add a link to an image, video, Google map location,
or quote. if you want to add an image you must find one that's published online. Once you do
click on view image to see that it's full size.
And then right click to copy the image address.
Depending on your browser this menu might say image URL, image location, or something else. Do not copy the URL from the browser address bar
unless you're getting an image from Flickr.
Then simply paste the image location into the media field.
Here's what the image looks like on your timeline. To add a video to your timeline
copy the URL from the address bar and add it to the media field
Timeline JS supports videos from YouTube and Vimeo. To add a Google map location search for the location
and then zoom to the level you want to appear.
Once you have the zoom level right copy and paste the URL from the address bar
Into the media field. This is what the Google map location looks like on your timeline.
To add a quote to your slide either type or copy your quote
and add to the media field.
From there put block hole HTML tags around it.
Notice that the end tag has a backslash at the beginning.
This is what the block quote will look like in your timeline.
The next column after media is where you put your media credits. The media credit column is where you cite your image.
All images that are not yours should be cited.
Though there multiple ways to do this at the very least provide a link back to the site where you got the image.
For this we're going to use a bit more HTML.
You can copy and paste the HTML code from the Timeline JS research guide that I created.
Simply change the parts in red in order to change the text you want to display and the link to the original source.
This is what it will look like on your slide. People who are curious to where you got the image can just click the link.
The media caption is a space where you can add text to help the viewer understand what's going on in the image
or video or to alert them to certain aspects of the image or video that are important for your analysis.
This is what it looks like in your timeline.
You can skip over the media thumbnail column. Most people don't use that. The type column is a space to indicate your title slide.
Because your title slide won't have a date this will tell Timeline JS to put it first.
The background column is a space where you can change the background of your timeline.
You can either copy and paste an image URL for the background or change the color by using a hex code.
Here's the part of my timeline where I change the background to purple.
And here's my title slide where I've used an image as the background.
When you finish adding all your content or it you want to preview your timeline, click on file
publish to the web
publish,
okay, and then grab this URL.
Once you have the URL return to the timeline JS website, click make a timeline and
scroll down to the third step. Here's where you can paste the URL for your Google spreadsheet.
Scroll down and click into this section four and scroll down further
and you can see a preview of your timeline.
You can also open the preview in a new window.
If you need to edit your timeline or grab that URL again, you can access it in your Google Drive.
Once you're satisfied with your timeline go to step four
to copy the share link or the embed code to embed it into D2l or a website.
And that's how you create an interactive multimedia timeline using Timeline JS.
These instructions and other helpful information is posted on the research guide I created.
To access it go to the library website,  click research guides,
scroll down to the search box to search for Timeline JS.
Click the first link and here you'll find all the same steps that I went through in this video.
You'll also find some helpful tips on how to use the different fields and
link to helpful sites as well as the HTML codes that I showed you. If you don't find the answer to your question on the guide
feel free to reach out to me. I'm happy to answer any of your questions
