TimelineJS:一个交互式的 JavaScript 时间线构建工具

了解如何使用 TimelineJS 讲述故事。
280 位读者喜欢这篇文章。
Clocks

Matteo Ianeselli。由 Opensource.com 修改。 CC-BY-3.0。

TimelineJS 3 是一款开源的故事讲述工具,任何人都可以使用它来创建视觉丰富、交互式的时间线,并发布到他们的网站上。要开始使用,只需点击主页上的“制作时间线”,然后按照简单的逐步说明操作即可。

TimelineJS 在伊利诺伊州埃文斯顿的西北大学 KnightLab 开发。KnightLab 是一个由设计师、开发人员、学生和教育工作者组成的社区,他们致力于旨在将新闻业推向新领域的实验。据其网站称,TimelineJS 已被超过 25 万人使用,讲述的故事被浏览了数百万次。TimelineJS3 提供 60 多种语言版本。

负责 KnightLab 技术、专业人员和学生研究员的“首席书呆子”Joe Germuska 解释说:“TimelineJS 最初由西北大学教授 Zach Wise 开发。他给学生布置了一项任务,要求他们以时间线格式讲述故事,但发现当时没有免费工具能达到他认为应有的水平。KnightLab 资助了他一些时间在 2012 年开发该工具。在那年年底,我加入了实验室,我的早期任务之一是将 TimelineJS 作为实验室完全支持的项目引入。第二年,我帮助 Zach 重写了它,以解决一些问题。在此过程中,许多学生做出了贡献。有趣的是,2016 年,新西兰惠灵顿维多利亚大学的一组学生将 TimelineJS(以及我们的一些其他工具)作为课堂项目的一部分进行研究。”

“总的来说,我们设计 TimelineJS 的目的是为了让非技术人员能够轻松地在网络上讲述丰富、动态的故事,并在时间事件的背景下进行。”

用户通过将内容添加到 Google 电子表格来创建时间线。KnightLab 提供了一个可下载的模板,可以对其进行编辑以创建自定义时间线。专家可以使用他们的 JSON 技能创建自定义安装,同时保留 TimelineJS 的核心功能。

这个简单易懂的 Vimeo 视频 展示了如何开始使用 TimelineJS,我自己也使用它创建了我的第一个时间线。

开源阿迪朗达克

里德·拉尔森是纽约州克林顿市汉密尔顿学院的研究和学术交流图书管理员,他在 20 世纪 90 年代开始寻找将开放数据和可视化相结合的方法,以记录埃塞克斯县(纽约州北部的一个县,构成阿迪朗达克山脉的一部分)的历史,当时他是埃塞克斯县历史学会/阿迪朗达克历史中心博物馆的馆长。

“我想获取所有关于埃塞克斯县历史的开放数据,并能够以可视化的方式呈现给人们。最重要的是,我想确保即使用于呈现数据的应用程序不再可用或不再受支持,这些数据仍然可用,”拉尔森解释说。

现在在汉密尔顿学院,拉尔森发现 TimelineJS 是理想的开源程序,可以完成他想要做的事情:记录和呈现选定地点的视觉吸引力时间线。

“是一位教授正在研究一个项目,该项目需要像 Timeline 这样的解决方案,在研究了各种可能性之后,我开始将 Timeline 用于该项目和后续项目,”拉尔森补充道。

TimelineJS 可以通过 Web 浏览器使用,也可以从 GitHub 下载源代码以供本地使用。

“我一直在使用浏览器版本,但我将其发挥到极限,以了解我能用它做多少事情,例如添加我自己的 HTML 标签。我想完全理解它,以便我可以向汉密尔顿学院的学生和教职员工介绍它的用途,”拉尔森说。

一个开源的雄鹰童军项目

拉尔森不仅将 TimelineJS 用于大学用途,他的儿子埃里克还在 2017 年使用 WordPress 为他的雄鹰童军项目创建了一个交互式历史网站。该项目记录了纽约州沃特维尔(位于克林顿以南,奥奈达县)的地方。埃里克解释说,他希望他开始的项目能够扩展到沃特维尔的 36 个地方之外。“该网站是在线社区建设的实验,”埃里克的网站上写道。

拉尔森说,他在该项目中做了很多“技术工作”,以便埃里克可以专注于内容。该网站是使用 Omeka 创建的,Omeka 是一个开源的 Web 发布平台,用于共享数字馆藏和创建富媒体在线展览,以及 Curatescape,它是开源 Omeka CMS 的框架。

拉尔森解释说,TimelineJS 的一个关键功能是它使用 Google 表格来存储和组织时间线中使用的数据。“Google 表格是简单组织数据的好结构,即使 TimelineJS 将来不可用,这些数据仍然可用。”

拉尔森说,他更喜欢使用 ArcGIS 而不是 KnightLab 的 StoryMap,因为它使用电子表格来存储内容,而 StoryMap 则不然。拉尔森期待着未来将增强现实技术融入到他的项目中。

创建您自己的开源时间线

我计划使用 TimelineJS 为我在克拉克森大学的开发和校友关系部门创建交互式内容,我在那里担任开发传播专员。为了练习使用它,我创建了一个简单的时间线,记录了我为 Opensource.com 撰写的文章

google-sheet-timeline.png

wordpress-timeline.png

website-timeline.png

正如里德·拉尔森所说,它非常易于使用,而且效果非常令人满意。我能够在几分钟内创建一个可用的时间线并发布到我的 WordPress 网站。我使用了我已经上传到 WordPress 媒体库的媒体,并简单地复制了图像地址。我在其他单元格中输入了日期、位置和信息,并在 Google 电子表格的“文件”下使用了“发布到 Web”。这生成了一个链接和嵌入代码。我在我的 WordPress 网站中创建了一个新帖子,并粘贴了嵌入代码,时间线就上线并开始工作了。

当然,我还需要进行更多自定义,但我能够快速轻松地使其工作,就像里德说的那样。

我将继续在我自己的网站上试验 TimelineJS,当我更熟悉它时,我将把它用于我的专业项目,并尝试 KnightLab 为交互式、视觉上吸引人的故事讲述创建的其他应用程序。

您可能会将 TimelineJS 用于什么?

标签
User profile image.
Jeff Macharyas 是纽约州康宁社区学院的市场营销总监。他是一位作家、平面设计师和传播总监,多年来一直在出版、高等教育和项目管理领域工作。

评论已关闭。

© . All rights reserved.