SIMILE Timeline: If the President can use it, you can too

If you’ve looked at the new site recently, you’ve probably noticed an interesting interactive element at the bottom of the main page.

This timeline is a good, simple example of the SIMILE Timeline tool created by MIT Libraries, and MIT CSAIL.

SIMILE Timeline tool general info:

Original project homepage:
New, Google-hosted homepage:
Getting Started guide:
See examples here:

Though creating the timeline does require someone to actually edit code, the code for the timeline is not much more complex or daunting than the average HTML website. Here’s an example of a process that might be employed as an assignment wherein students would collaboratively build a timeline.

I. SIMILE uses two files to work properly. First, there’s an .html file (I’m calling this file ‘timeline.html’) that presents the application and includes several tweakable parameters. The .xml file (which I’m calling ‘events.xml’) is the code representing the times, dates, headings, description and image links for the specific event.

II. Download and/or reuse these files:

1. events.xml – this file lists all the events. Copy/paste more events after </event> tag for previous events. Events don’t need to appear in any particular order.

2. timeline.html – This is the file that includes the modifiable code for the SIMILE timeline. This is also the file that you would link to for viewing the timeline.

3. Use Lifehacker’s XML generator script to quickly create xml form data
OR download/save eventmaker.html and upload it to your own webspace.

III. Possible student process

1. Students collect different event detail, images, etc. Perhaps groups of students work together collecting events based on particular themes or chunks of time, etc.

2. Creating a ‘wiki’ tool in the course Blackboard pages for each group may help them collaboratively work out the event details and images before they run them through the xml generator.

3. Once the final details are set (image URLs are prepared, dates verified, titles and descriptions set), the student(s) can go to the eventmaker.html page and generate the xml code snippet for their event.

4. Students can post this code on another Bb wiki representing the entire xml code for the timeline. The faculty member, a TA, and/or a student would then grab this code either periodically, or toward the end of the semester, and upload it to the Duke WebFiles space as the new events.xml file.

Still too complex? Well, Google has you covered. The timeline can now be created as a ‘widget’ when using Google Spreadsheets.

A webpage written by David Huynh explains the whole process. Suffice it to say that this process only requires a class to create and share a single Google Spreadsheet file, and then simply edit the content cells to work. Enjoy.