I’m just getting around to writing about this, and I’m probably late to the party as far as this product is concerned, but I’ve discovered a very simple, very effect way to create timelines for websites.
Back in the 1990s Tom Snyder Productions made some of the coolest EdTech software around. One of my favorites was Timeliner. Users could input dates and events, then print out long timelines on fan-fold printer paper with a dot-matrix printer. Along with Print Shop, it was one of my go-to tools for classroom printing.
Timeliner is still around, and has been updated to take advantage of modern technology. I haven’t played with it in ages, so I don’t know what the new version has, and, quite frankly, I no longer need to. I’ve found a much, much better (and free!) product in Northwestern University’s Knight Lab’s Timeline JS.
I discovered this by accident. I wanted to find out something about a date in Furman University’s history and stumble on their implementation of the timeline on their website. I loved the smooth flow and formatting of the site, so I checked the source code, and was able to track down the app.
On the website for the Timeline JS program there is a wonderful demonstration of the system. Users can add images from the web (including Flickr images), YouTube and other videos, and embed website snapshots. The system is quite powerful.
Here is a video description of the system:
The system uses a Google Drive Spreadsheet on the back end. Users simply complete items for each column, adding text and/or media as needed. A template is available from the website, but any spreadsheet with the correct headings would work.
The spreadsheet is published to the web so that the data is visible to web visitors. Once published the spreadsheet’s URL is pasted into the Knight Lab website to generate the timeline code.
Once pasted, A code is generated that can be copied and embedded into websites. There is a preview button that allows you to check out the timeline first, and you can link directly to that preview.
Here’s a timeline I started for the Laurens County Museum based on information from the county website:
If you use WordPress, as I do, it gets even easier. There is a plug-in that allows you to plop a timeline into any WordPress post.
But what if you don’t want to embed the timeline, but want to use it in a stand-alone web page? You can just copy the “Link to Preview”, but that may not give you the control you want. Using the code I “harvested” from the Furman website, you can just modify this HTML page and upload it to your web host.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Interactive Timeline </title><!– CSS –>
<link href=”http://veritetimeline.appspot.com/latest/timeline.css” rel=”stylesheet”>
<!– JavaScript –>
<script type=”text/javascript” src=”http://veritetimeline.appspot.com/latest/jquery-min.js”></script>
<script type=”text/javascript” src=”http://veritetimeline.appspot.com/latest/timeline-min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
var timeline = new VMM.Timeline();
timeline.init(“https://docs.google.com/spreadsheet/pub?key=0Ai9ePLahMAJTdDV0UnBzdzhNMnZvbTNzR2NPUnNaZ2c&output=html”);
});
</script>
</head>
<body>
<div id=”timeline”></div>
</body>
</html>
All you have to do is copy the code above and make some changes. Just replace the URL that references the Google Spreadsheet with the URL for your spreadsheet.
Tom Snyder’s Timeliner was a great program, and I’m sure the newest version is very powerful. However, it’s still a stand-alone program. Since Timeline JS is based on a Google Spreadsheet, students can work on it collaboratively. Also, free and open source is very hard to beat.
I’m hoping to create several more of these. In case you need more inspiration, the Timeline JS website has a gallery of examples. Just scroll on down below all of the embedding stuff. Very cool.
Thanks Tom for this blog.
I am also using TimelineJS for my history studies.
Is there any way I can take printouts of the visual it generates in browsers? so that I can paste them on wall and refer them often?
Please let me know.
Thanks,
Sumanth
Sumanth, I’m not sure there is a print option, but it would certainly be cool. If you contact the developers directly, they might be able to make suggestions.