INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 1

WikiTime - Collaborative TimelinesDaniel Teles Arrais, 69675, MEEC

Instituto Superior Técnico, Universidade de LisboaE-mail: daniel.arrais@tecnico.ulisboa.pt

Abstract—The organisation and visualisation of chronologicaldata in Web pages needs to be properly handled to providethe reader with a clear understanding of the examined topic.Despite the existence of modern chronographic tools such as web-timelines, the majority of history-related content on the Web aremerely lists, or tables, in which each entry is granted just enoughspace to display its information. Furthermore, even though thedistinct contents are usually related, these links are typically notexplored and remain unused, hence limiting the user’s access toa fluid experience when studying a particular subject. Currently,some Web-based technologies for creating timelines have alreadybeen developed, but these still face some problems regarding theinability to edit or reuse previously created contents, and the non-existence of a mechanism that encourages collaboration amongusers. The work herein presented defines the architecture ofa collaborative infrastructure, entitled WikiTime, that addressesthese issues. The developed system not only allows for an easycreation and editing of timelines and its events but also grantsthe user with the possibility to clone any existing information.When compared with the existing methods for chronologicalpresentation, WikiTime showed exceptional results, providingthe user with a dynamic and self-consistent experience. In thecontext of an organisation, WikiTime also allows the integrationof scattered information.

Index Terms—History, Timelines, Web Application, Collabo-rative Software, ReSTful API

I. INTRODUCTION

NOWADAYS, people are always so concerned about thepresent, and even more worried about the future, that

anything from the past seems to become irrelevant and out-dated. However, history has shown us that the past should notbe taken lightly. To better understand the present, sometimeswe should look into what has happened and comprehend thefactors that have caused change. By analysing past events,we allow ourselves to anticipate what has yet to come, tounderstand how society will evolve through time, and whatconsequences should be expected. Since it was first establishedas an academic discipline in the year of 1870 [1], historyclaims to have been pursuing these same objectives, andthe arrival of the World Wide Web (WWW) has opened itsdoors to those who never had access to it before. In a fewsteps, historians, or simply history enthusiasts, can share theirperspectives and experiences with practically anyone, usingfor example blogs, forums, or a personal Web page [2].

Despite being considered a relatively recent technology,the WWW is now a huge source of information, one thathas challenged historians to rethink not only how to performresearch, but mostly how to present and teach about history.Over the years, researchers have been putting to practice themultiple advantages provided by the Web, and history hasnever been so strongly disseminated as it is today. Nonetheless,

the majority of the presented content on the Web still lacksthe design and functionality required to provide the readerswith a richer and more fluid experience, mainly regardingaspects such as interaction, visualisation, and exploration. Thechronological data is usually displayed as just lists or tables,surrounded by blocks of text, making it difficult for Internetusers to get the information they are looking for and tofeel really involved in the subject. Additionally, the multiplecurrent data is usually connected and only at a later stage arethese links found, exposed, and used, which defeats one ofthe purposes of studying history, that is, to not only look forwhen and where an event has happened, but also which otherevents are related to it.

The proper visualisation of data is of utmost importance,and an appropriate display tool is one that facilitates the read-ers in understanding the presented contents, communicatinginformation to the users clearly and efficiently, while alsosimplifying the process of relating content and recognisingpatterns. Chronology, in its most basic definition, is thearrangement of a series of events over a definite time period,and time itself can be visualised in multiple different ways.Even so, the idea of portraying time as a line is so embeddedinto peoples’ conceptions and notions that using the timelinefor representing historical data prevails as the correct fitting.Stephen Davis supports this same view and states that: "agraphical timeline is assumed to be more informative thana list of dates, however poorly it is designed" [3]. Digitaltimelines offer a large deal of interactivity and engagement,supporting visually attractive displays of information, andallowing users to move quickly through time, to efficientlyanalyse and compare different historical periods, and to easilychange between closer or wider perspectives.

A. Problem Statement

The areas of study in which timeline tools can be appliedare countless, and although some advances have been madein creating software that can transform chronological datainto vibrant displays of properly organised information, theseare still limited and do not allow to interpret the presentedhistorical contents correctly. Furthermore, some of the featuresthat we consider to be truly necessary are also lacking, namelythe existence of a mechanism that promotes collaborationamong users, or the possibility to reuse or embed any of thepreviously generated timelines and events.

With the constant evolution of digital technologies, it wouldbe expected, at this moment, that a system capable of suppress-ing the referred problems would already be available. How-ever, considering that to perform such task a sizable amount of

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 2

programming knowledge is required, the development of theseapplications is hindered by another issue: interest usually lieswithin people with professional backgrounds in areas of studyunrelated to software development, incapable of designingsuch product. History needs to be seen as a field of great value,from which lessons can be taken to help us comprehend thepresent and to be more aware of the future. It is absolutelynecessary that we take the time to think about how we canuse and extend the existing systems to create a tool worthyof a historical presentation, a tool that serves the purposes ofhistory best.

B. Objectives and Results

The primary objective of this work is to define and im-plement a Web-based collaborative infrastructure for the easycreation and editing of timelines. The developed softwareapplication, entitled WikiTime, should have a visually appeal-ing graphical interface that provides users with a dynamicand interactive experience, and should also contain a simplemechanism supporting the production and editing of contentson a collaborative basis.

The design and development of a Web Service ApplicationProgramming Interface (API), which allows the full completeintegration of WikiTime’s services with other external systems,is also in our agenda. Having a robust, scalable servicesinterface which allows resources to be consumed by otherdevelopers, is a step towards fostering the creation of anecosystem around the designed application, thus making itmore desirable and valuable.

The development of such application led to the creation ofmore than 110 events distributed among 17 timelines, depict-ing about 100 years of history regarding Instituto SuperiorTécnico. Our primary goal was to gather all the data includedin the websites created by Instituto Superior Técnico [4]–[7],combine it with additional sources of information, and providethe readers with an interactive and dynamic experience, inwhich every relation is shown to allow for a fluid, morecomplete study on each topic.

C. Document Structure

The work herein presented is organised into six sections.The next section ("Timelines") will start by providing an his-torical background for the development of timelines, followedby an analysis of the currently used methods for the creationof such displays. In Section "Data Design", a few use casesare defined to understand the design requirements and spec-ifications that the application must meet, which will mainlyserve as the basis to construct both the supporting data modeland the software platform. Section "Implementation" describesthe implementation details concerning the envisaged approach.In Section "Evaluation", we will evaluate the performance ofthe developed solution by performing a comparison with theexisting methods for visualising and organising historical datain the Web. Finally, the Section "Conclusions" will concludethe document by addressing the most significant contributionsof the proposed system.

II. CARTOGRAPHIES OF TIME

The conceptual visualisation of time-related data is notan easy exercise. The idea of time is highly subjective andusually difficult to define since it can contain distinctivemeanings depending on peoples’ perspectives, beliefs, andfeelings. The idea behind timelines is to provide an intuitiveand comprehensive method for temporal data display, allowingto visualise how multiple different events are organised intime and what the relationships between them are. Essentially,timelines are an efficient way of telling a (chronological) story.

A. The History of Timelines

Even though chronology has been identified as a field ofstudy since the ancient times, it was only in the middle ofthe eighteenth-century that a common vocabulary for time-maps was introduced, capable of displaying temporal datain a linear and continuous format [8]. Until then, the visualrepresentations of time always followed the traditional tabularstructure, in which the information about history was shrunkto fill in the least amount of space as possible. But in 1753,Jacques Barbeu-Dubourg, driven by the belief that visualrepresentations of time could and should be designed usinga uniform scale, published his Chronography or Depiction ofTime, a 16.5 metres chart depicting history since the creationuntil his own days. However, considering the substantial lengthof the diagram, the posed challenge to display all at once im-pelled the production of an apparatus, entitled ChronographieUniverselle (Fig. 1), in which the paper could be mounted andviewed one section a time (roughly 150 years). This inventionallowed the reader to scroll through a continuous timeline backand forth by using the small crank handles.

Fig. 1. Jacques Barbeu-Dubourg’s Chronographie Universelle, from 1753 [9]

Besides Barbeu-Dubourg’s publication, another work ofserious relevance was A Chart of Biography, developed byJoseph Priestley in 1765. While teaching history at the War-rington Dissenting Academy, Priestley needed to make senseof the lives of various historical figures, which led him todesign a diagram that was long enough to record the lifespanof about two thousand individuals (Fig. 2). Even though hecannot be considered the one responsible for the creation ofthe timeline, what he added to Barbeu-Dubourg’s map was theunique concept of using a printed line to represent the lifespanof each individual [10]. Since different amounts of time couldbe described by using a longer or a shorter line, the readers

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 3

were now able to obtain clear and precise information aboutevery individual, instead of just a rough estimation.

Fig. 2. Joseh Priestley’s A Chart of Biography, from 1765 [11]

The eighteenth century was an era of extreme importanceregarding the development of instruments for temporal visu-alisation. But ever since Barbeu-Dubourg’s creation of thetimeline, followed by Priestley’s unprecedented improvement,that chronology has not received any serious attention andremained essentially in the domain of those who do not havethe required knowledge that would allow further develop-ments [12]. Despite the evolution of modern technologies,current historians have been more preoccupied in recoveringthe lost history of chronographics rather than in developingnew systems for history visualisation.

B. The Emergence of Modern Chronographics

When applied to historical data, a timeline’s primary pur-pose is to enable users in obtaining both a general, and adetailed perspective of events, and patterns. Nonetheless, thestudy of history is not only about examining the existence ofevents in the past but also about identifying and studying therelations of cause and effect that determine these. History isbest understood as a series of interconnected facts and compet-ing narratives that do not mean much when in isolation [13].Once we accept that historical relations are an importantpart of our comprehension of the world’s past, present, andfuture, we should take into better consideration any devicethat facilitates the discernment of these associations.

When both Barbeu-Dubourg and Priestley published theircharts, it was already evident that they had profound knowl-edge about the importance of relationships in the representa-tion of history. Even so, due to the lack of technologies power-ful enough for representing the historical relations accurately,these timelines did not allow readers to understand efficientlyif and how the distinct subjects were related to one another.With the evolution of digital media, and specifically of theWeb technologies, it would be expected that a solution forthis problem would already exist, either by using hyperlinksor by employing a more dynamic and interactive form ofpresentation. However, like in the ancient times, the majorityof new chronologies, limited by the early versions of Hypertext

Markup Language (HTML), are really still lists or tables [12].The timeline still occupies a position of little relevance and israrely given any serious thought. Our comprehension of thesetools is still weak, and it is only when all other alternativeshave already been used that we think of them as a necessaryinstrument for the graphic instantiation of history [13].

III. WEB-BASED TIMELINE SOFTWARE

In recent years, new methods of aggregating and integratingchronological data from multiple sources have been suggested.Methods that elevate the timeline’s purpose and consider it asthe central organising structure for the graphical display ofhistorical data. By working on the principles of collaboration,and by taking advantage of recent technologies, new moderntools may be able to achieve what the time charts of the pastcould not: gather and display large amounts of data whilepresenting all the different existing relationships inherent tothe exhibited information.

A. TimelineJS

TimelineJS [14] is an open-source, Web-based tool for creat-ing and visualising attractive and dynamic timelines. Releasedin March of 2012, it is currently in its third version, beingwidely used mostly by news organisations from all around theworld. Among the many features it includes, the followingones should be highlighted:

• Possibility to incorporate media of different types;• Supports the customisation of the displaying elements;• Possibility to group events into a similar category;• Events can be punctual or spread across a span of time.Users can generate the desired timeline objects either by

using the authoring tool available at TimelineJS’ website,which accepts a properly formatted Google spreadsheet asinput, or by introducing contents in JavaScript Object Notation(JSON) format. Although the first described method may besufficient to generate singular and independent timelines, itis still considered to be a relatively primitive technique ifone needs to create multiple distinct timelines, interconnectedaround the same particular topic. In this case, there is thepossibility to download and modify the source code supportingthe application, which enables programmers to design custominstallations and to mould the software’s functionalities andcharacteristics into their requirements and goals.

B. Sutori

Defined as a "free digital learning tool" [15], the principalpurpose of Sutori is to offer an instrument, devised mainly forthe classroom, which enables teachers and students to createinteractive stories using an intuitive collaborative interface.Each timeline can be customised with a description and aheader illustration, and different types of event objects can begenerated, containing either an image, video, audio, or evena quiz question. Nonetheless, upon further observation, wenoted that the existing free package is rather limited since itonly allows the creation of at most 200 stories and offers nopossibility for collaborative work. Users are required to pay

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 4

for either the premium package (supports countless stories andcollaboration in pairs) or the unlimited package, in order tobe able to enjoy such features.

C. Neatline

Defined as a "light-weight, extensible framework for creat-ing interactive editions of visual materials" [16], Neatline isa project of Scholars’ Lab, a team of experienced studentsand researchers, from the University of Virginia Library,who mainly focus on developing solutions in the fields ofdigital humanities and geospatial information. Onto the coreOmeka’s feature set, Neatline adds new functionalities thatallow not only to create beautiful and interactive visual objectsquickly but also to explicitly represent geospatial informationas a collection of records plotted in both time and space.Nonetheless, even though current versions of Neatline areable to provide the methods for representing any contents thatrequire some visual display, it is still too much focused mostlyon maps, putting aside the aspects related to the temporalrepresentation of information.

For establishing and using Neatline, one must first install thetechnological stack supporting Omeka, which is composed ofthe famous but rather old-fashioned software bundle entitledLAMP (Linux, Apache, MySQL, and PHP). After havinginstalled the LAMP stack server, the Neatline plugin must beadded and configured. Additionally, it may be necessary todownload and incorporate any extra libraries, in order to takefull advantage of Neatline’s features and functionalities.

D. Tiki-Toki

Tiki-Toki [17] is a Web-based application for creatinginteractive and dynamic timelines which can be shared withanyone on the Internet. It was set up by a company calledWebalon which launched the product in the year 2011. Similarto Sutori in practically every aspect, it also makes use ofWeb-based forms to allow the easy creation and editing ofthe contents, while supporting the possibility to add dataof multiple different types, namely images, text, and videos(Youtube or Vimeo).

In addition to accommodating the visualisation of timelinesin the traditional horizontal format, Tiki-Toki’s applicationalso permits to display the contents in a 3D display. Noother software platform provides this feature, which combinesboth the observational and immersional modes that were sodearly referred by Priestley in the eighteenth century. Theproblem with this application however, is that, unless usersare willing to pay, only one timeline can be created using afree account, with no possibility to perform any collaborativework. Furthermore, even the paid versions still contain a rathersmall limit on the number of timelines allowed to produce.

E. Overview of Modern Technologies

After searching for some of the existing solutions, we cameto the conclusion that, despite the existence of some particulardifferences, most of the Web-based applications for creatingtimelines share a lot of common features. Even so, for us

to make a more correct and fitting decision, the describedapplications should be evaluated based on a set of specificparameters:

1) Is the software open-source?2) How good is the documentation?3) How is the community support?4) How easy it is to integrate the software with other

technologies?

Considering the first aspect of evaluation, both Sutori andTiki-Toki can be immediately discarded. These systems weredeveloped with the intention of functioning mainly as stand-alone applications, hence offering no possibility to downloadand reuse the source code supporting the software. On theother hand, TimelineJS and Neatline are classified as libraries,or frameworks, created using Web-based technologies to allowthe simple integration of these technologies into larger systemsand, consequently, develop more complex software products.

Since Neatline was designed as a built-in plugin for Omeka,the decision of using this library would also imply the devel-opment of our Web application using the technological stackemployed by the referred publishing framework. As such, wefeel that this obligation would limit the potential of developinga more attractive and dynamic software since, at some point,we would be pushed towards using a set of technologies withwhich we are not comfortable. Moreover, besides the fact thatthe official documentation lacks the fundamental informationrequired to understand how to use this library efficiently, theexisting online community still counts with a small number ofsupporters. In the event of any serious obstacle, we would beentirely on our own when trying to solve the problem.

Despite the existence of other Web-based timeline softwaretools, such as Timeglider [18], SIMILE Timeline [19], orTimesheet.js [20], these were still rather immature, requir-ing the design of more appealing visual displays and theimplementation of more powerful features. In comparisonwith the numerous Web-based libraries for creating timelines,TimelineJS proved to be the one with the most potentialto be utilised and modified according to our application’srequirements. In fact, when evaluating this tool, we verifiedthat there are not any significant downsides associated withthe library: it contains an impressive set of features, displaysan attractive and interactive interface, and allows the simpleintegration with other components.

IV. REQUIREMENTS ANALYSIS

There is more to software engineering than just writingthe required code to make an application work as expected.Logical thinking and design also take part in this long-lastingprocess that usually begins with the analysis of the project’srequirements and functionalities which then give order tothe conception of the data structure that serves as the basisfor sustained incremental development. It is at this stagethat engineers decide on the key system’s specifications andfunctionalities, which should be clear, consistent, measurable,and testable, providing a sufficient level of detail for the systemto be efficiently designed, implemented, and improved.

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 5

A. Product Functions

When entering the home page of the developed Webapplication, the users will be faced with a list of the timelinesstored in the system. Moreover, besides being able view thedisplayed timelines, the most basic operation one will be ableto perform is registering an account and, after completing theregistration process, log in. Authentication should be possibleeither via a local account (username and password) or viaintegration with a Google’s account.

1) Events:Table I contains a description of all the required functionali-

ties to be implemented within our software application regard-ing events, that are essentially related to creating and updatingan object structure composed of a set of properties regardingtheir information (headline and description), the associatedmedia file, and the starting and ending dates (identified byyear, month, day, hour, and minute).

TABLE IOVERVIEW OF THE REQUIRED FUNCTIONALITIES REGARDING EVENTS

Functionality1 Create a new event’s object2 Visualize an existing event3 Create a copy of the event’s object4 Associate a media file with the event5 Modify the event’s headline and description6 Update the event’s starting and ending date7 Change the event’s domain8 Delete the event

Events should be either punctual or spread across a spanof time. While the starting date should always be required,it should be up to the user’s choice to decide if the endingdate is defined or not. Moreover, the user will be entitled toclassify its domain as either public or private: a public eventmeans that it should be visualised by anyone accessing theapplication, while a private one should only be exposed tothe users responsible for it.

2) Timelines:Editing a particular timeline means editing the events con-

tained in it. Even so, it should be possible to modify certain as-pects of a timeline that are unrelated to the objects it contains,such as its headline and description, its media, or its domain.Furthermore, access to the timeline should only be allowedupon authorisation through the specification of an access list.Table II presents an overview of the functionalities that arerequired to be implemented regarding timelines’ objects.

Every time a user tries to add a new event to a timeline,a copy of the event’s object shall be created, and it shouldinclude a reference to the original. This way, we are allowingevents to be updated independently, and since all the copieswill share mutual ancestors, we will be able to define therelationships between multiple timelines more accurately. Ad-ditionally, there should exist the possibility to associate anytype of tags with each timeline, which can then also be used torelate distinct timelines that have one or more tags in common.

TABLE IIOVERVIEW OF THE REQUIRED FUNCTIONALITIES REGARDING TIMELINES

Functionality9 Create a new timeline’s object

10 Visualize an existing timeline11 Create a copy of the timeline and its events12 Add events and sub-timelines to timeline13 Remove events and sub-timelines from timeline14 Group events and sub-timelines into a specified category15 Associate a media file with the timeline16 Create and remove tags associated with the timeline17 Modify the timeline’s headline and description18 Change the timeline’s domain19 Update the timeline’s access list20 Delete the timeline and its events

B. User Characteristics

Depending on the context in which they are described, thereare several types of users that will interact with the system.In a first instance, it is possible to identify three principaltypes: administrators, registered users of the application, andguests. After a user performing the registration process, theaccount will still need to be evaluated and accepted by anadministrator. During this time, the user will be consideredas inactive and, therefore, he will still be rather limited in thenumber of actions allowed to execute. This type of users isthen included in the same category as guests, since the kindof interaction that they will be able to perform regardingtimelines or events will be more or less the same.

1) Administrators:Administrators are the type of users who are completely

free of any constraints, hence being able to access all aspectsof the application and carry out all kinds of operations (1-8,and 9-20, from Tables I and II, respectively). In addition to allthe described functionalities regarding the creation, editing,and deletion of timelines or events, administrators will beentitled to execute actions related to the management of allthe other users of the application. These operations includemodifying the status (inactive or active) and the role (normalor administrator) of a user or deleting a user’s account. Ingeneral, administrators are required to manage the entireapplication, ensuring that there is no incorrect or prejudicialinformation within it and that registered users are behavingwithin the bounds of civility.

2) Registered Users:Registered users are those who have an account which was

already accepted and marked as active. Primarily, this typeof users will have the authority to create and edit multipletimelines and events (1 and 9), as well as to visualise andreuse other already created objects (2, 3, 10, and 11). However,the latter two operations will always be susceptible to if aparticular timeline or event is classified as either public orprivate: if marked as private, only users included in the object’saccess list will be entitled to view and reutilize it. Publictimelines and events, however, will be exposed to everyoneand will be totally available for reuse.

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 6

The one who decides to create a timeline’s objectis classified as its owner, responsible for inviting thecontributors to collaborate on the creation and editing ofcontents. In addition to the typical operations (12-16), anymodification related to more sensitive information shall bethe responsibility of the owner, as well as any operationsabout deleting a timeline or managing its access list (17-20).Contributors will then only be entitled to add or removeevents and sub-timelines, create or delete tags, modify themedia file, or group multiple events and sub-timelines into aspecified category (12-16). Regarding events, if these belongto a particular timeline, there will be no differentiationbetween the type of users that are included in the access list,i.e., both the owner and the contributors of a timeline will beentitled to perform the same kind of operations on the eventsit contains (4-8).

3) Guests:Every user who accesses the application and does not have a

registered account is included in the guests’ category. Besidesbeing able to visualise the current timelines and events (1 and9), and to undergo the registration process, there is nothingmore that they will be able to perform. Even the visualisationof timelines and events will be limited according to either theparticular object’s domain value is defined as public or private:only public timelines will be exposed to guest users. On theother hand, registered inactive users will be able to visualiseprivate timelines and events (1 and 9), as long as they areincluded in the defined access list, but will not be able toperform any editing or management of the displayed contents.

V. DATA DESIGN

Up until this point, we have been planning and analysingall the fundamental requirements that will guide us duringthe development process of our software application. Trans-forming some of these specifications into distinct data entitiesthat compose the database system supporting the project’slogical and physical structure represents the next step in thesoftware development cycle. Data design is about identifyingthe type of information that requires being persistently stored,determining the relationships between the different elementsand, ultimately, organise and model this information into adiagram representing all the data structures and processes [21].

A. WikiTime’s Data ModelA data model is a conceptual, visual representation of

the data structures, including the distinct elements and theseveral associations between them, that compose the databasesupporting the application. The primary focus when designinga data model is to represent the information in such waythat it should be easily understood by anyone with knowl-edge of these concepts, serving as a bridge between thereal-world components and their physical representation in adatabase [22]. The process of designing the software’s datamodel is comprised of four major steps:

1) Identify Entity Types - an entity is typically referred toas a collection of objects that share common featuresand aspects;

2) Identify Attributes and Keys - each entity type maycontain one or more attributes, which are commonlyused to describe and define the referred entities;

3) Identity Relationships - the relationships purpose isto describe the existing associations between distinctentities. These are typically classified concerning theircardinality (may be either One-to-N or N-to-N);

4) Apply Data Model Techniques - upon performing allthe previous steps, some patterns can be applied to theidentified elements.

By following these guidelines, and with the help of aUnified Modeling Language (UML) class diagram [23], wewere able to design the data model supporting WikiTime’ssoftware application (Fig. 3). The first aspect that needs to behighlighted is the definition of the three principal data entities:user, event, and timeline. Each of these entities contains adifferent set of attributes related to the information that isrequired to be stored, according to the specifications andrequirements previously defined. As an example, both theevents and timelines contain fields that are related to theirvisibility, or to their starting and ending dates. The userentity, on the other hand, allows storing information aboutany registered client (e.g. full name, email, etc.).

Regarding the associations, the cardinality, as well as therole that each entity represents in a relationship, is displayednext to the corresponding element. With the exception of theusers’ entity, both timelines and events are entities that cannotbe described on their own, as these must always be associatedwith one or more users.

Fig. 3. WikiTime’s UML data model

VI. SOFTARE DEVELOPMENT

The process of creating a Web application can be quitedemanding and exhausting. With such a large number offrameworks and tools to choose from, and many more beinglaunched practically every week, narrowing down our options

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 7

can be a frustrating process. A careful and thought selectioncan make a significant impact on the success and efficiency ofa software project. The key question is not how to choose thebest options, but instead how to choose those that are mostappropriate for the application’s purpose and goals [24].

A. WikiTime’s Technological Stack

When deciding on the technological stack that was goingto be employed for the development of our software project,we mainly focused on technologies that would allow us tomeet the predefined requirements and specifications. Aboveall, our desire was to create a robust, maintainable, andstable application that could provide the users with a rich,interactive, and engaging experience. The MEAN stack is aset of technologies that have been found to work remarkablywell when used together, and is comprised of the followingframeworks:

1) MongoDB – is an open-source document-orienteddatabase management system that provides high perfor-mance and availability while supporting a rich querylanguage syntax for executing all the required opera-tions [25];

2) Express – is a light-weight, open-source JavaScript (JS)framework for Node.js, designed to provide a set ofcommon procedures and methods for developing Webapplications [26];

3) AngularJS – is an open-source Web application frame-work, developed by Google, aimed to simplify the devel-opment of client-side applications capable of providingan interactive and dynamic experience [27].

4) Node.js – is a light-weight, efficient server runtimeenvironment, built on top of Chrome’s V8 JS engine,for designing and implementing scalable Web applica-tions [28].

The MEAN software bundle is a full-stack collection ofWeb-based JS technologies that helps to simplify and acceler-ate the process of creating a Web application [29]. By codingwith JS throughout both the client and the server’s application,developers are entitled to obtain clear performance gains inboth the software itself and the productivity of development.Furthermore, given the fact that documents are stored inJSON-like format, using a set of technologies that are JS-based allows the data to be transferred seamlessly from thedatabase all over to the client without having to proceed to itsserialization or deserialization.

B. WikiTime’s Architecture

Fig. 4 represents the general architecture of WikiTime’sWeb application. As expected, it consists of the three distinctcomponents that compose the 3-Tier Architectural Model [30].The Web browser, responsible for displaying the user interfaceand managing all of its interaction, was developed withthe help of three technologies, commonly used to developthe client-side application: HTML, Cascading Style Sheets(CSS), and JavaScript (JS). While HTML and CSS provide,respectively, the structure and styling of the Web pages, JS is

accountable for adding the interactivity. In this type of system,the rendering of the Web pages that compose the user interfaceoccurs only within the browser.

Fig. 4. WikiTime’s Architecture

Upon each user interaction, the client’s application performsa HyperText Transfer Protocol (HTTP) request to the server,using the server’s exposed API. There are four distinct typesof components included within the Web server, each havingits own specific purpose and being accountable for differenttasks:

• Operational Management - includes the components thatperform input data validation, error handling, and emailmessaging;

• User Management - as the name suggests, covers thecomponents that are responsible for authenticating usersand controlling accesses to data and executable function-alities. Operations concerning the administration of users’accounts are also included in this category;

• Timelines/Events Management - includes the componentsthat are accountable for the creation and editing oftimelines/events, as well as for the automatic constructionof the inherent relationships between the multiple existingobjects;

• Data Access - includes the components that allow com-municating with the database server.

By using this type of architecture, it was possible to imple-ment the client-side application to be completely decoupledfrom the server-side. The client only needs to have knowledgeabout the routes designed at the server, and which type ofdata these return. This decoupling allows software engineersto implement a server-side script that functions mainly as aWeb Service API, meaning that it can be consumed not onlyby the developed client-side application but also from otherexternal systems [31], hence increasing the overall flexibilityand manageability of the platform.

C. WikiTime’s ReSTful API

When used in the context of Web software development, anAPI is typically defined as a collection of rules and specifica-tions that describe how multiple different systems can access aspecific Web-based software application [32]. By working onthe principles of information hiding, Web Service APIs allowdevelopers to encapsulate the implementation details of theserver’s application: while consuming its resources, developersonly need to know how and which routes they can use to accessthe desired information and services.

As we designed and developed our Web application, wetried to make sure that the server-side program, functioningmostly as a Web Service API, was versatile enough to serve

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 8

both the client-side code as well as other external applicationsthat look to integrate the implemented services. The developedAPI platform, organised according to the principles of aReSTful architectural style [33], contains a total of 78 differentroutes that provide programmatic access to read and writethe application’s data. Accordingly, the response given by theserver is structured in JSON format.

In Table III are displayed only the most relevant endpoints,which allow the proper and substantial use of the system’sfunctionalities. To correctly execute any of the desired oper-ations, it is necessary to prepend the base Uniform ResourceLocator (URL) of the server, which is given by: ∼/api/.Another important aspect that can be withdrawn from thisis the presence of URL parameters, which can be either:timeline_id, :event_id, or :user_id, that allow usto obtain specific resources by specifying its primary key asan identifier. These are automatically set by MongoDB whenstoring the document in the database and are composed of a12-byte hexadecimal string.

TABLE IIIOVERVIEW OF THE IMPLEMENTED API ENDPOINTS

HTTP Verb URL

User Management

GET ∼/users/allGET ∼/users/:user_idGET ∼/users/:user_id/eventsGET ∼/users/:user_id/timelines

Event Management

POST ∼/events/newGET ∼/events/allGET ∼/events/:event_id

POST ∼/events/:event_id/reuseDELETE ∼/events/:event_id/delete

GET ∼/events/:event_id/collaboratorsGET ∼/events/:event_id/timelineGET ∼/events/:event_id/related

Timeline Management

POST ∼/timelines/newGET ∼/timelines/allGET ∼/timelines/:timeline_id

POST ∼/timelines/:timeline_id/reuseDELETE ∼/timelines/:timeline_id/delete

GET ∼/timelines/:timeline_id/collaboratorsGET ∼/timelines/:timeline_id/eventsPUT ∼/timelines/:timeline_id/events/:event_id/addPUT ∼/timelines/:timeline_id/events/:event_id/removeGET ∼/timelines/:timeline_id/related

VII. SOLUTION’S EVALUATION

Anyone accessing WikiTime’s application (available athttp://146.193.41.162.nip.io/wikitime/), re-gardless of having an account or not, is entitled to visualiseany of the already created timelines and events, as long asthese are classified as public. If not, only the users includedin the object’s access list (and administrators) are allowedto perform such action. To demonstrate the uniqueness ofthe concept behind the developed system, 17 timelines and

114 events were created, mainly regarding the history ofInstituto Superior Técnico and three famous personalities thatwere actively involved in the creation and evolution of theinstitution. However, we must first discuss about the traditionalmethods for organising and displaying historical data on theWeb.

A. Traditional Methods

Alfredo Bensaude was nominated the first principal ofInstituto Superior Técnico, for which he fought hard to beable to provide better conditions for its students. Despite beingextremely interactive, the existing website which concerns thehistory of Alfredo Bensaude [4] is troublesome when onedesires to comprehend how the different aspects of AlfredoBensaude’s life (for example regarding his scientific activity,his personal life, or his education) are overlapping and in-terconnecting with each other. Since the multiple events areorganised by different themes, it is not clear how these areplaced in time and, at some point, it seems that the multipleparts of Alfredo Bensaude’s history are entirely independentof each other and occurred at different moments. On the otherhand, considering that various types of textual and mediadocuments are presented in a format similar to a slideshow,one interesting feature that we withdraw from this website isrelated to how the data is displayed to the user, through theusage of several simple dynamic elements.

Known for having a great futuristic vision, Duarte Pachecois the one responsible for the translation of the Instituto Su-perior Técnico’s facilities to its present location, hence givingshape to the ideas previously conceived by Alfredo Bensaude.Nonetheless, the only Web page that contains informationabout Duarte Pacheco [5] presents the same problems thatwere previously discussed: the displayed information lacksthe design and functionality required to provide the readerswith a more engaging and fluid experience. In this case,data is presented as a simple big block of text, having nocomponent of interactive and dynamic nature. Additionally,the written contents are too focused on Duarte Pacheco’s lifeas a politician, rather than on the aspects of his life as theprincipal of Instituto Superior Técnico.

As a way to honour the type of person he was and hisachievements, the people from Instituto Superior Técnico,together with the department responsible for the gatheringand preservation of historical contents regarding the referredInstitute (Núcleo de Arquivo), developed a website containingsome information about Abreu Faro [6]. Nevertheless, despitethe fact that the presented Web pages contain different typesof textual and visual elements, these are poorly organised anddo not follow a logical scheme. There are lots of picturesand documents, but little to no information to give contextto this elements. Overall, the Web site itself does not includea conducting wire that allows the reader to understand theinformation to be transmitted.

It is important to remember that all these three personalitieshave a common background related to Instituto Superior Téc-nico but in no way these associations are displayed anywhere.When representing history, more than being able to provide

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 9

clear and complete information about each individual, it isessential that we describe and define the relationships betweenthe multiple existing entities. The digital technologies alreadyhave a series of features that had not been used efficiently incurrent representations of history, and further thought had tobe given about it. Ultimately, the idea that was always presentin our mind was that the reader must be able to travel throughhistory as if he was reliving his own personal experience, evenin moments that he did not experience in the first place.

B. WikiTime’s Method

When we first thought about developing such application,our main goal was to preserve all the beneficial aspects that thetraditional methods have while working on the improvementof the defective ones. TimelineJS itself already allowed, fora single entity, the presentation of historical data in a properformat, enabling the use of several different types of textualand media documents and the organisation of the multipleexisting events in chronological order. The biggest problem,however, lied within the impossibility to associate any relatedtimelines, or events, with one another.

The history of an organisation is mainly composed of thepeople that belonged to it, and by knowing about the life ofeach individual, we are also allowing ourselves to comprehendthe impacts better one had to a particular institution. To supportand demonstrate the validity of this concept, we have begunby designing the timeline concerning the history of InstitutoSuperior Técnico, in which were included three other timelinesthat also take part in the ones related to Alfredo Bensaude,Duarte Pacheco, and Abreu Faro. As such, once a user startsexploring the timeline "Instituto Superior Técnico", he willsurely be able to move to the main timelines of the referredcharacters, as these also contain some sub-timelines that areincluded in the timeline of the institute’s history. It becomesclear that an underground network of inter-related timelinesand sub-timelines exists, and the methods for access and travelalong its channels are the following two:

1) Fig. 5 is a screenshot of the timeline "Instituto SuperiorTécnico". The first aspect that we would like to highlightis related to the existence of two types of elementsshown in the slider: the events, marked with an "E",and the timelines, referred to with a "T". Regarding thelatest, if an element contains such mark, this means thatthe slide’s headline is actually a link that, upon beingclicked, will trigger the application to redirect the userto that particular timeline, as shown in Fig. 6;

2) The other technique is represented in Fig. 7, whichconsists of displaying a list of all the timelines that areassociated with the one the user is currently visualising.This list can be obtained by clicking on the "Related"button that is placed on the right bottom corner ofthe interface. One must keep in mind that every slideincluded in the slideshow will display a different list:while for events, this list is limited to all the timelinesthat possess a copy of the event, for sub-timelines, thelist includes all parent and children timelines as well asother that have equal tag values;

Fig. 5. Timeline of "Instituto Superior Técnico"

Fig. 6. Representation of the "Sub-Timelines" concept

Fig. 7. Timeline "A Acção de Abreu Faro no Complexo Interdisciplinar",along with the list of all the related timelines

By implementing the described techniques, we allow usersto move from timeline to timeline almost seamlessly andenable them to obtain further information about a certaintopic. Even so, it is true that further thinking regardingthis topic can be made, with the intention of improving thedeveloped methods for presenting related information. Ideally,it would be nice to have multiple sliders, one on top of theother, containing the distinct events of the multiple associatedtimelines. Deciding on which slides, from which timelines,would be displayed in the interface, would be the responsibilityof the user. Upon moving the time frame in one timeline,the other could also go forward, or backwards, accordingly.However, in our understanding, a task like this would requirethe knowledge of someone more experienced in the graphicdesign for the Web, as sometimes it can be hard for a developerlike us to have this kind of sensibility.

INSTITUTO SUPERIOR TÉCNICO, UNIVERSIDADE DE LISBOA, MAY 2017 10

VIII. CONCLUSIONS

History has never been so actively disseminated as it istoday. Throughout the years of its short existence, the WWWhas allowed historians to present their knowledge and experi-ences by using distinct types of strategies, like for exampleblogs, forums, or even personal Web pages. However, theprevailing presentations of historical data, limited by the earlyversions of HTML, are still structured in a tabular layout thatdoes not allow readers to efficiently comprehend the topicsunder examination. Recently, new digital technologies havebeen introduced, which allow the creation of visually engagingtimelines that display the contents in a more interactive anddynamic format. But in our perspective, these modern softwareapplications still face some problems that we consider to be ofgreat importance, namely the inability to represent the multiplelinked data accurately or to reuse and embed any previouslycreated information. Furthermore, the majority of the existingtools either do not have support for collaborative sharing andproduction of contents, or it is rather limited in the number ofpeople allowed to work on a joint project.

The goal of this research was to address these referred lim-itations by defining and implementing a Web-based softwaresystem, entitled WikiTime, which allows the simple creationand editing of timelines for proper visualisation and organisa-tion of time-related data. Moreover, the envisaged solution wasdeveloped with the words flexibility and integration in mind.Building a Web Service API that would allow the completeintegration of WikiTime’s functionalities with other externalapplications, was also a key aspect that was taken into con-sideration. When compared with the traditional methods, Wik-iTime’s application offers a more effective interface, enablingusers to move quickly through time, to efficiently analyseand compare different historical periods, and to quickly movebetween closer or wider perspectives. Built upon a collabora-tive working environment, it is capable of providing its userswith the possibility to properly organise events in time, todisplay the complex relationships that compose history, and toreuse or encapsulate previously created timelines and events.In conclusion, WikiTime’s software application has proven tobe a tool worthy of chronological display, providing meaningand form to history’s connotations of narrative, and allowingfor greater comprehension of the world’s past, present, andfuture.

REFERENCES

[1] “Brief History of the American Historical Association.” [On-line]. Available: https://www.historians.org/about-aha-and-membership/aha-history-and-archives/brief-history-of-the-aha. (accessed on 02-11-2016).

[2] Cohen, D., and Rosenzweig, R., Digital History: A Guide to Gathering,Preserving, and Presenting the Past on the Web. University ofPennsylvania Press, 2005.

[3] Davis, S. B., “Time machines.” in Technologies and ’the death of ArtHistory’: Computers and the History of Art annual conference, ser.Computers and the History of Art Yearbook, 2010.

[4] Instituto Superior Técnico, and Núcleo de Arquivo, “Vida e Obra deAlfredo Bensaúde.” 2013. [Online]. Available: http://alfredobensaude.ist.utl.pt/. (accessed on 13-10-2016).

[5] Instituto Superior Técnico, and Núcleo de Arquivo, “Duarte Pacheco:A Vida e a Obra.” 2010. [Online]. Available: http://100.ist.utl.pt/momentos/duarte-pacheco/. (accessed on 13-10-2016).

[6] Instituto Superior Técnico, and Núcleo de Arquivo, “Manuel Abreu Faro– a criar bases para a Ciência em Portugal.” 2015. [Online]. Available:http://abreufaro.tecnico.ulisboa.pt/. (accessed on 13-10-2016).

[7] Instituto Superior Técnico, and Núcleo de Arquivo, “100 Anos IST - dosDirectores aos Presidentes.” [Online]. Available: https://narq.tecnico.ulisboa.pt/extensao-cultural-e-educativa/exposicoes-fisicas-eou-virtuais/100-anos-ist-dos-directores-aos-presidentes/. (accessed on 13-10-2016).

[8] Rosenberg, D., and Grafton, A., Cartographies of Time: A History ofthe Timeline. Princeton Architectural Press, 2010.

[9] Davis, S. B., “Chronographics: The First Modern Timeline?” August2009. [Online]. Available: http://chronographics.blogspot.pt/2009/08/first-modern-timeline.html. (accessed on 25-11-2016).

[10] Davis, S. B., “Joseph Priestley: The Man Who Drew Time.” PostingsFrom Priestley House, the Newsletter of The Friends of Joseph PriestleyHouse, no. 49, April 2011.

[11] Davis, S. B., “Chronographics: "The Idea of a MeasurableSpace" - Joseph Priestley’s 1765 Chart of Biography.” May2016. [Online]. Available: http://chronographics.blogspot.pt/2016/05/the-idea-of-measurable-space-joseph.html. (accessed on 25-11-2016).

[12] Davis, S. B., “History on the Line: Time as Dimension.” Design Issues,vol. 28, no. 4, pp. 4–17, 2012.

[13] Champagne, M., “Diagrams of the past: How timelines can aid thegrowth of historical knowledge.” Cognitive Semiotics, vol. 9, no. 1, pp.11–44, 2016.

[14] Wise, Z., and Knight Lab Team, “Timeline JS3 — Beautifully craftedtimelines that are easy, and intuitive to use.” Northwestern University.[Online]. Available: https://timeline.knightlab.com/. (accessed on 16-01-2017).

[15] Sutori, “Sutori.” [Online]. Available: https://www.sutori.com/. (accessedon 17-01-2017).

[16] Scholars’ Lab, “Neatline.” University of Virginia Library. [Online].Available: http://neatline.org/. (accessed on 19-01-2017).

[17] Webalon Ltd, “Beautiful web-based timeline software.” [Online].Available: http://www.tiki-toki.com/. (accessed on 17-01-2017).

[18] Richardson, M., “Timeglider: Web-based Timeline Software.” [Online].Available: https://timeglider.com/. (accessed on 18-01-2017).

[19] Huynh, D. F., “SIMILE Widgets | Timeline.” [Online]. Available:http://simile-widgets.org/timeline/. (accessed on 18-01-2017).

[20] Müller, S., “Timesheet.js - Beautiful time tables with HTML,JavaScript and CSS.” [Online]. Available: https://sbstjn.com/timesheet.js/. (accessed on 18-01-2017).

[21] Takur, D., “Data Design in Software Engineering.” [Online]. Available:http://ecomputernotes.com/software-engineering/data-design. (accessedon 23-01-2017).

[22] Heng, C., “What is MySQL? What is a Database? What is SQL?”October 2016. [Online]. Available: https://www.thesitewizard.com/faqs/what-is-mysql-database.shtml. (accessed on 21-01-2017).

[23] Fakhroutdinov, K., “The Unified Modeling Language.” [Online].Available: http://www.uml-diagrams.org/. (accessed on 22-01-2017).

[24] Niles, S., “Selecting the Right Software Development Tools forYour Developers.” [Online]. Available: https://blog.smartdraw.com/selecting-the-right-software-development-tools-for-your-developers/.(accessed on 05-01-2017).

[25] MongoDB, Inc., “MongoDB for GIANT Ideas.” [Online]. Available:https://www.mongodb.com/. (accessed on 13-01-2017).

[26] StrongLoop et al., “Express — Node.js Web Application Framework.”[Online]. Available: http://expressjs.com/. (accessed on 13-01-2017).

[27] Google, “AngularJS — Superheroic JavaScript MVW Framework.”[Online]. Available: https://angularjs.org/. (accessed on 13-01-2017).

[28] Node.js Foundation, “Node.js.” [Online]. Available: https://nodejs.org/en/. (accessed on 13-01-2017).

[29] Karpov, V., “The MEAN Stack: MongoDB, ExpressJS, AngularJS andNode.js.” April 2013. [Online]. Available: https://www.mongodb.com/blog/post/the-mean-stack-mongodb-expressjs-angularjs-and. (accessedon 13-01-2017).

[30] Microsoft Patterns, Microsoft Application Architecture Guide, 2nd ed.Microsoft Press, October 2009.

[31] Salesforce.com, “Create a Web App and RESTful API ServerUsing the MEAN Stack.” October 2016. [Online]. Available: https://devcenter.heroku.com/articles/mean-apps-restful-api. (accessed on 14-01-2017).

[32] Henning, M., “API Design Matters.” Queue, vol. 5, no. 4, pp. 24–36,May 2007.

[33] Friedrich, T., RESTful Service Best Practices: Recommendations forCreating Web Services., Pearson eCollege, 2013.