After this lab, students will be able to:<\/p>\n
For the purposes of this activity, you should create 5-7\u00a0different slides, or rows, to place in your timeline. Some ideas for inspiration:<\/p>\n
TimelineJS requires a Google Account<\/a>\u00a0as you will need to access Google Sheets.\u00a0You can use a Gmail account, or create a Google account for any other email address.<\/p>\n Go to\u00a0https:\/\/timeline.knightlab.com\/ <\/a>and click Make a Timeline<\/strong>. \u00a0The directions at\u00a0https:\/\/timeline.knightlab.com\/#make<\/a> are very helpful, but we will parse these out a bit more.<\/p>\n In order to create a timeline, you will need to input data into a Google Sheet using the TimelineJS template<\/a>. Click Make a copy to add the Template to your\u00a0Google Drive. Do not change the headers in the template, and do not leave any blank rows.<\/p>\n TimelineJS has different sections for different types of data. You can use HTML in these sections if you want to create links, add images, etc.<\/p>\n There are sections for year, month, day, and time. You can input as many or as few as you want.<\/p>\n These sections are for timeline sections that cover a range of dates. The first date field, then, is the start date.<\/p>\n By default, TimelineJS will display the dates in the previous fields, but you can override that here.<\/p>\n Should be obvious …<\/p>\n You can put links to different media here, such as images, videos, sounds, Tweets, Wikipedia articles, and Google Maps. You have to insert links to media, so you have to have them hosted somewhere if they aren’t already online (such as Sites). A full list of supported Media is available at\u00a0https:\/\/timeline.knightlab.com\/docs\/media-types.html<\/a><\/p>\n Use this space to provide attribution. Hint: use links here to link back to the original source if not using your own images.<\/p>\n Captions for your media.<\/p>\n These thumbnails will show up in the little flags in your larger timeline at the bottom.<\/p>\n This is a dropdown. Title<\/strong> rows are for your first slide in the sequence. Eras<\/strong> let you split your timeline into \u00a0different sections along the bottom. To use Eras, at the bottom of your Sheet, enter the start and end dates of each Era, and give it a Headline, and select Era from the Type dropdown. Normal slides are just blank for the Type.<\/p>\n Groups allow you to stack different slides vertically on the bottom timeline.<\/p>\n The background is for the entire slide, you can use a color hex code, or an image.<\/p>\n Timeline:\u00a0http:\/\/public.gettysburg.edu\/~rmiessle\/smb.html<\/p>\n Google Sheet:\u00a0https:\/\/docs.google.com\/spreadsheets\/d\/1h-zhsh60UoC0hHbsCu_isVHsBAw4pcLDS1tCcSEIDzI\/edit?usp=sharing<\/p>\n Once you have added the data to your timeline, you need to publish your Google Sheet. Go to the File<\/strong> menu in Google Docs and select Publish to the Web.<\/strong> Click Publish<\/strong>, then OK<\/strong> to Are you sure? Then copy<\/strong> the URL that appears.<\/p>\nCreating a Timeline<\/h3>\n
Timeline Data Sections<\/h4>\n
Date<\/h5>\n
Ending Date<\/h5>\n
Display Date<\/h5>\n
Headline and Text<\/h5>\n
Media<\/h5>\n
Media Credit<\/h5>\n
Media Captions<\/h5>\n
Media Thumbnail<\/h5>\n
Type<\/h5>\n
Group<\/h5>\n
Background<\/h5>\n
Examples<\/h3>\n
Publishing the Google Sheet<\/h3>\n
Generate the Timeline<\/h3>\n