Open Source Time Line Creators

Timeline is one of the most commonly used content publication form in the field of e-learning. From Science to Arts, subject matter experts love to use this chronological presentation to illustrate a series of connected information.

The use of a time line in publications goes way back. The look and feel of the timelines also varies. But there are some similarities among them:

- items on the time lines are in sequential order, most of the time lines are in linear format;
- most time lines contain some sort of visual illustration besides text contents, varies from lines to graphics, to multimedia elements;
- most time lines use very brief information to describe the events and often these information are gate ways to the detailed content sections;

Like many other educational contents, timeline can be designed for many different mediums (paper based time lines vs web based time lines). Of course, the web based time lines can be much more interactive and media rich than the traditional forms of time line.

The challenge of creating a "fancy" timeline lies with technical difficulties. Not everyone knows how to use CSS (Cascading Style Sheets) to wrap text around an image or use Flash to create interactive media elements. But there are many open source tools, at absolutely free of cost, can help you to create nice looking, interactive time lines today.

Time Line Tool A:

The first time line tool I used was produced by Tim Wang at the Faculty of Arts, The University of British Columbia. This is a quite powerful timeline where authors can go through very simple steps to produce a time line with rich audio / visual effects.

Here is a step by step tutorial of how this tool works:

Step 1: go to the start page, you should see a screen similar to this:

Fill the blanks on the page. To make it simple, I find it comes in handy by just click on every check mark boxes (Information1, Information2, Sounds_and_Music, Images1, Images2, and Movies). You don't necessarily need to provide all the elements later on, the tool will simply neglect the missing information. Use the orange question marks on the right hand side to find out where are the information from each of the fields displays on the timeline. Click on "Generate Data" when finished with this page.

Step 2: data confirmation page, you should see a screen like this:

If all information are correct, click on "Confirm" to proceed.

Step 3: Content population. This page is relatively straight forward,
"Time" column is for the time values of your time line. (must fill)
"Information1" column is for the text data which will appear below the time line. (must fill)
"Information 2" column is for the text data which will appear above the time line. (must fill)
"Sounds" column is for the names of the sound files goes with the time period (e.g. filename.mp3). You can fill this in later. (optional)
"Images1" column is for the file names of the images that will appear below the time line (e.g. filename.jpg). You should be able to come back and fill in the file names later on; (optional)
"Images2" column is for the file names of the images that will appear above the time line(e.g. filename.jpg); (optional)
"Movies" column is for the names of the movie files goes with the time period(e.g. filename.swf). (optional)
"URL" column is for the links to other online resources (e.g. www.yahoo.com). Please note, don't put in http in this section, only the url. (optional)

A sample screen shot of this page:

After all data completed, click on Submit.

Step 4: Upload media files (sound files, image files, movie files):

Step 5: Your time line should be created and look like this one:

You can copy the link in the "02." section behind the timeline window to your web site in order for your audience to see your timeline. You can also modify the time line contents in the "04." section.

I strongly suggest you download the timeline package using the link in section "05." in case your work get lost in the future.

Time Line Tool B:

Another open source time line tool I would like to introduce here is made by a team of developers at The Center for Educational Resources at Johns Hopkins University. It is a brilliant java application which writes the authorized data into a XML file and use a web based application developed with Adobe Flash to show the visual rich presentation. Please note, unlike the first time line tool, this one requires installation and JAVA 1.4.2 on the computer in order to work.

Here is a step by step tutorial (for PC users, but procedures for the the Mac version should be 95% same) of how this tool works:

Step 1: Go to the download page to download "timeline.exe" from the server. Please note, you will need to register for the first time in order to get to the file.

Step 2: Execute the timeline installation file to unzip the 4 files: "Creator.jar", "READme.txt", "timeline.html" and "timeline.swf".

Step 3: Run Creator.jar (you must have java 1.4.2 installed previously in order for this to work.)

Step 4: Click on the "Interface Configuration" button on the top of the application to define the basic elements of your time line. The following is a step by step illustration diagram created by the developers of the software:

(image taken from Timeline Creator's support document)

Step 5: Click on the "Events" tab upon completion of this screen and edit a new event section by section. Don't forget the section under the "Detail" tab. Here are two illustration diagrams:

(images taken from Timeline Creator's support document)

Step 6: Once all information of the first event are entered, click "Add Event" button at the bottom right corner. You should see the event shown at the upper half of the window. Then Repeat step 5 to enter more events.

(images taken from Timeline Creator's support document)

Step 7: After all events are entered, click on File menu -> Save. This will write the contents into timeline.xml. Now you can close the tool and click on the "timeline.html" to view your work. If you have done everything right, you should have a beautifully created time line looks somewhat like this one:

Hopefully this is enough information for you to try out these two open source / free ware timeline creators and use the produced time line for your online teaching purposes. Remember, for both tools, you need to have a good idea of the timeline before hand. So, grab a paper, draw out some outlines of your time line then use the creators.