Posted in Ideas & Reminders, Uncategorized, Web 2.0 Tools

Easy as Timeline JS

I was looking at various articles on the WRAL.com site yesterday morning and came across an image timeline that looked neat, cool, rad, spiffy.  [ Jamie Hahn Murder Case Timeline ]  I viewed the page source looking for the name of the software that was used to create the timeline.  Not sure I ever found it, but I managed to come across the online app that must have been the inspiration for the timeline.  “Timeline JS” is a free, online app for creating illustrated timelines.  You have to use a Google Docs Spreadsheet to enter the pertinent data (e.g. date of event, header, brief description, URL to an image, video or even a map).  Images can come from flickr,  Picasa, or Twitter,  videos from YouTube or Vimeo, and you can get a map from Google Maps.  You enter your data, which you can select to auto-update the spreadsheet, and publish it to the public.  You then have an URL to your data that you paste into one of the fields of Timeline JS.  Once this is done, you click on “Preview” or “Link to Preview” and the app generates your illustrated timeline.

timelineJSexample
Timeline JS on office PC.

You can enter a URL or an email address in your “caption” or “description” and it automatically becomes a clickable link in the generated timeline.  I was even able to add the coding for an HTML Anchor tag in order to “clean up” the look of the link.

Here is a link to a Timeline JS example that I created.  I just tested it out and it works fine in the Firefox browser on my office PC (Windows 7), on my iPad2 (iOS), my Samsung Chromebook (Android) and my Samsung Galaxy S III (Android phone).  The timeline beautifully fills the iPad screen.  The timeline worked best on my phone in portrait mode.  I’m not sure I’ve tested any software out recently that worked so well across so many devices, even to the ability to play the YouTube video, and show the Google map on all devices.

ipad-timelinejs-example
Timeline JS example on iPad.

I had my timeline example showing in Firefox on my desktop PC.  How could I easily and quickly share that to my other devices?  I have a QR code generator app as a plugin for Firefox.  It is called “Mobile Barcoder” and it will create a QR code “on the fly” for the web page you are on, for any link on the page, or for text you select on the page.  This is the easy way to send a link or text to another device that has a QR code reader on it, such as an iPad or an Android phone.  There are other such QR generator apps/plugins/extensions for IE and Chrome browsers.  I had to email the timeline URL to my Chromebook.

I have used a i-nigma-logoQR code reader app called “Scan” for a couple of years, but recently someone suggested the “i-nigma” QR code reader app.  I tried i-nigma and it does seem to recognize a QR image much quicker than anything else I’ve tried, and then makes it easy to go to a site URL, or add a Contact or Calendar Event from the QR code.  I have the i-nigma app on my iPad and Android phone.

Using the iframe code for the timeline, I was able to embed the timeline in Blackboard.

Bb-timelineJS-example

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s