Timeline and annotation tools

The Institute of Network Cultures and The PublishingLab are experimenting with a range of art and culture magazines to develop a space for new forms of art criticism. In these experiments we are attempting to shift away from the traditional modes of criticism, the essay and the monograph, to a more participatory space that incorporates multiple voices, audio and video. How can art and culture magazines commit to online criticism in a meaningful way and how does this change the production process? For the purposes of experimenting with longform, digital essays and articles we researched an array of timeline and annotation tools for ArchiNed, an online magazine in the field of architecture. In this blogpost we will give an overview of our findings and recommendations.

The timeline tools we considered were Timeline JS, Timeglider, Tiki Toki, Dipity and Timeline Express. Timeline JS is open source, Dippity, Tiki Toki, Timeglider and Timeline Express use a Freemium model requiring a premium account to access advanced features and freely create embeddable timelines without adverts. For the purposes of the INC longform platform an open-source timeline was preferable therefore we chose Timeline JS.

The annotation tools we considered were Thinglink, Annotorious and Cowbird. We recommend Annotorious which is an open-source, developer friendly plug-in that can be directly integrated into your websites javascript. If users are not comfortable with CSS or javascript than Thinglink is a good alternative.

Below you will find an overview of all considered tools.

ArchiNed_Comparison-chart
ArchiNed_Comparison-chart

TimelineJS is an open-source tool for building ‘interactive’ timelines. TimelineJS works with Google Spreadsheets, allowing you to drop dates, text and links to media into columns.The tool can pull in media from a variety of sources and it supports Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia and SoundCloud.

Pros:
All you need is an understanding of how to use a spreadsheet and your flicker/youtube links for multimedia. There are 4 steps to follow to generate the timeline. When you publish your timeline you can click to automatically update in order to add content later. The use of google spreadsheets allows for more than one contributor to update the timeline. The spreadsheet has a field for Media credit/attribution. Users can customise the timeline width and height and have 5-6 choices of visual themes (for example watercolour, monochrome) of the map when using Googlemaps.

TimelineJs

This is the black & white option for maps in the TimelineJS tool we made for ArchiNed.

Cons:
You need to visit their site each time to generate a new timeline from the google spreadsheet, but this is still relatively quick, and existing timelines will update as long as you tick the box to do so when you first publish your timeline to the web.

Subscription types:
There are no paid subscription. The about page states: “This project is hosted on GitHub, the largest code host in the world. We encourage you to contribute to the project and we value your feedback. You can report bugs and discuss features on the GitHub issues page, or ask a question. This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.”

 

Tiki Toki is a web-based timeline plugin which stands out for its responsive design. Users of Tiki Toki can integrate images and videos from Flickr, Youtube and Vimeo into their timelines.

Pros:
Users can view timeline in 3D. Tiki Toki supports integration with Vimeo, Youtube, Soundcloud and Flickr.  For each event or period users can add multiple images, video or links and the editor allows html-text.

Cons:
Users cannot upload media from computer but only by using remote connections.

Subscription types:
It is not possible to embed a timeline in a website with a free account. Tiki Toki has three subscription types: Bronze: $7.50 per month (for individuals and small community groups) 5 timelines embedded into website (5,000 per month embeded page views and 50 images). Silver: $25 per month (professional bloggers and businesses)25 timelines embedded into website (20,000 per month embeded page views and 75 images). Also a Teacher account is available for $125 per year. You can find a sample timeline here.

 

Dippity is a timeline plugin where users can create share and collaborate on embeddable timelines. Dippity has an easy to use editing interface and integrates with vimeo, flick, twitter and youtube. Like Tiki Toki, Dippity uses a Freemium based model.

Pros:
Users can embed 3 timelines for free. Dippity integrates with vimeo, youtube, flickr, lastfm and twitter.
Dipity has permission levels to control who can view, contribute and edit a timeline.  Another useful feature is the default zoom where it is possible to specify what will initially appear on the timeline.

Cons:
Ads appear on both the Free and Plus accounts

Subscription types:
Dipity has three types of accounts: Plus: $5 per month, 10 timelines, 10k embedded page views per month, 500mb content. Prime: $50 per month, unlimited timelines, 50k embedded page views per month, 3gb content, analytics. Pro: $100 per month, unlimited timelines, 100k embedded page views per month, 10gb content, analytics.

 

Timeglider is a web-based timeline tool that has a lot of potential. Users can integrate text, links, and images to timeline objects. Timeglider allows content to be imported automatically from a variety of sources including RSS feeds, Wikipedia, and Flickr and to share timelines with a larger audience. This tool has a lot of features and it may take users sometime to figure how to take advantage of all the features.

Pros:
If you have the Timeglider Plus account you are able to export the timeline. If you have the free account you can use a url to import it into your WordPress site. You have the ability to assign different levels of importance to different timeline objects. With giving an object a higher or lower number users can make them appear larger or smaller relative to other timeline objects. This is very easy achieved, just by clicking on the image and altering the vertical position on the timeline to avoid crowding when events are close together. Users can add Timeglider users to timelines as editors. Both text and themes are searchable.

Cons:
The free account give you only the possibility to create three timelines.
Also the advertisements policy is not perfect: Some of the service are supported by advertising revenue and may display advertisements and promotions. These advertisements may be targeted to the content of information stored on the Service, queries made through the Service or other information. The style and extent of advertising by Mnemograph on the Service are subject to change without specific notice to users. In consideration for Mnemograph granting users access to this service, you agree that Mnemograph may place such advertising. Another downside is that Timeglider requires payment on the month or day of a particular timeline event so users are required to fill in some values if they don’t know the date of an event. It doesn’t allow users to associate videos with timeline objects and only one image per event can be added. Also the event popup doesn’t automatically close when you open the next

Subscription types:
Timeglider has three accounts:
Timeglider Free – allows you to create up to three timelines. Timeglider Free users may also publish timelines up to one thousand (1000) visits per month.
Timeglider Plus – available for five dollars ($5.00) per month. Users can collaborate by adding other Timeglider users to timelines as editors; create “sub-user” groups; import data from comma-separated values (“CVS”) files and other flat-file formats, export data to CVS and tab-separated formats; manage events and images in a searchable, sortable, tabular interface; create multi-timelines presentations; and publish timelines to up to ten thousand (10,000) visits per month.
To use Timeglider Enterprise users should contact Time Glider for account rates. This allows users to bring a stream of documents into view, allowing for visualization to be arranged according to date; plan collaborative projects involving international team members and allow for varying levels of access and permission to different data elements; import data from any web-available database and transform it selectively into timelines; and upload any kind of archive.

 

Timeline Express is a wordpress plugin which allows you to create a vertical animated timeline of announcement posts. It is an easy to use plugin that creates the ‘announcement’ posts by setting the announcement date. The timeline will populate automatically in chronological order. It allows CSS3 animations, scroll effects, localized dates and custom template support. The date on the timeline can be hidden or revealed and users can specify the length of the timeline for each document or announcement. TinyMCE buttons can be used to generate Shortcodes quickly.

Features:
Load a custom template for single announcements
Localized date formatting for international users
A large selection of Font and icons included. Users may specify a different icon for each announcement
CSS3 animations on scroll
Specify an image to display for each announcement
Delete announcements on uninstallation
Specify Ascending vs Descending display order

Pros:
Timeline Express is an easy to use, free wordpress plugin. Users can ‘filter’ the timeline to tag and create interests.

Cons:
It is only possible to create timelines vertically and only postet articles can be added to the timeline.

Subscription types:
There is a free and a licenced version. The Timeline Express Pro has a Single Site License – $39.99, 2-5 Site License – $69.00 ,10 Site License – $110.00. Timeline Express Pro comes packed with all of the same features as the free version, but has additional features to enhance the functionality of Timeline Express: You are allow to setup multiple Timelines and assign announcements to any or all of the timelines. You can assign categories to announcements, sort timelines by categories or by timeline and display categories on single announcement templates.

 

Image Annotation Tools

Thinglink is an image annotation service that you can integrate into your website across platforms like WordPress or Creatavist.

pros:
Comments panel allows readers to leave comments below the image
To embed the image in your site, simply click on share, then copy and paste the link to your site.

cons:
Some image files aren’t supported, for example you can’t upload .tif/f files. The free version doesn’t allow you to format text – not even italic or bold

Subscription cost:
Thinglink allows you a free trial of whitelabel subscription options (14days):
basic account – free
edu account- free
pro level / ThingLink for Publishers account- 10/month or $100/year, incl video annotation, metrics & statistics on clicks/hovers/time spent, see: https://www.thinglink.com/tutorial/pro%20features
Whitelabel account – $49/mo, which removes the thinglink branding
VIP account – custom pricing depending on your business needs, whitelabel services+

This is the link to the thinglink test. Here you can hover over and see what the free account allows you to do, I’ve used different shaped & coloured markers, but a paid membership allows you to use your own customised markers.

Thinklink

Annotorious is being developed under the leadership of the Austrian Institute of Technology. The software has its roots in the YUMA Universal Media Annotator prototype, developed as part of the EuropeanaConnect research project. It is a highly customizable and developer friendly option. Users of annotorious should be comfortable with CSS or basic JavaScript.

To setup annotorious on a webpage users need to copy and paste two lines of code to the page header.

<link type=”text/css” rel=”stylesheet” href=”css/annotorious.css” />

<script type=”text/javascript” src=”annotorious.min.js”></script>

There are two options to specify which images are annotatable.

The easiest method is to add a CSS Class. On page load, Annotorious will automatically scan your page for images with this class and make them annotatable. The other option is to make images annotatable manually through by using JavaScript API. This option is useful if your page loads images dynamically via Javascript. Once Annotorious is working it can be integrated into your websites javascript. Annotorious source files can be hosted both on your website or linked to the latest version on the Annotorious website.

MIT Licence:
Users have permission to use annotorious and associated files free of charge without restriction: including the rights to publish, modify, merge, distribute and sublicense.

For technical support and troubleshooting there is a Github problem tracker and Google group. The plugins being developed for Annotorious include a cloud storage plugin to store annotations on the parse platform hosting and a semantic tagging  plugin (in beta) that sends text to a server for named entity recognition which then suggests possible tags. Users can add semantic tags to annotations by clicking on them.

Pros:
Annotorious is developer friendly and integrates directly into the website javascript. It is Open Source and the MIT license gives users rights to publish, modify, merge, distribute and sublicense. For troubleshooting users can refer to the Github problem tracker or Google group.

Cons:
Requires a basic knowledge of CSS or javascript.

 

Cowbird is a public library of human experience, and a simple tool for telling stories. It is more like a visual blog than a tool that can be used like a plugin. This may not suit ArchiNed’s needs because it is a platform external to WordPress, to really use the storytelling platform it is necessary to contact Cowbird and become a partner.

National Geographic has successfully partnered with Cowbird. A partnership allows you to invite a community to talk about an issue/location from their perspective. This is really interesting as a way to give personal context to a story, but it’s something that has to be arranged with Cowbird directly, they provide an email: partners@cowbird.com

It also has a cost: “Cowbird partners pay a modest fee for the use of our platform”. Cowbird allows people to tell multimedia stories, incorporating text, photos, sound subtitles, roles, relationships, maps, tags, timelines, dedictions and characters.

Pros:
Cowbird has an interesting way to get community engagement, and round out a story and its supports Safari, Chrome, Firefox. Another advantage is that you own your content with a Creative Commons license of your choosing.

Cons:
Unknown “modest fee” to create a partnership, the content is dependent on an audience and plan you create – “We don’t offer logistical support in collecting the actual stories — we simply provide a beautiful platform for you and your community to use.” Privacy: “Users from outside the United States should be aware that they are submitting their information to servers within the United States and that they may not be entitled to the protections and remedies provided for under the laws of their places of residence.”

Subscription cost:
Cowbird has free memberships, so anyone can tell a story. They are non-profit, and you can support them as ‘Citizen’ for $5/month – this gives you the benefit of using your own handwriting, choosing a name to publish with and getting a cowbird url specific to you and tell multiple page stories.

Conclusion
As mentioned in the introduction our advice to ArchiNed is to experiment with Timeline JS, Annotorious and Thinklink. One of the most important aspects of Timeline JS is that it is an open-source tool and unlike the other timeline tools it is not supported by advertising revenue. To hide the adverts in timelines like Tiki Tok, Dippity and Timeglider users have to pay the monthly subscription fees for a preminium account. Additionally, Timeline JS is easy to integrate into your webpage and changes in the timeline can be automatically updated in your post.

We recommend Annotorious because is an independent open source project and the community of users have picked up on the tool and contributed a number of additional features, such as support for touch-based devices. Integration into the website javascript is simple, only requiring two additional lines of code. Annotorious is particularly useful for developers who may be interested in tinkering with the javascript, available through the Github repository, and developing their own plugins to modify or extend the core features. If users are not comfortable with CSS or javascript and require a more basic interface, than we recommend Thinklink as an alternative.

Share