Starting the Project

In an effort to get my project off the ground, I have started organizing my data and have begun to “play around” with TimeLineJS.

Organizing the data simply means that I am properly filing, dating, and titling the articles that will drive this “discourse analysis meets digital history” project.

Capture Filing of Data

For this project I will draw mainly from Orlando Sentinel news articles acquired via ProQuest to attempt to chart the construction of identity in Orlando as expressed through the Magic basketball franchise and the original Orlando Arena.

It is essential, then, to organize the articles properly in order to convey this transformation over time.

In playing around with TimeLine JS, I have started to understand a bit better how the tool works, how I’ll be able to incorporate my data, and how I’ll be able to convey a narrative study in a visually intriguing and digitally transparent way.

Initial TimeLineJS Learning

TimeLineJS provides directions on how to use it that are easy to understand and simple to follow.

Capture Step 1 to make timeline

First, I had to open the Google Spreadsheet template provided by the KnightLab at Northwestern (creators of the tool).

Then, I went in and made some edits to see what it might look like:

The TimeLineJS Google Spreadsheet Template
The TimeLineJS Google Spreadsheet Template
Making some edits to the template
Making some edits to the template

Just to experiment, I started off with a quote from one of the Sentinel articles, which describes Orlando’s “blanket apathy” to pro-sport. I used that term as a “Header” and used a longer quote as a caption.

Then, I inserted an image of all of Orlando’s failed pro-sport franchises — again, just as an experiment to see how the incorporation of images and quotes might appear in the timeline.

A collage of the logos of failed pro sport franchises in Orlando. This image was found on Google images, and serves to relate to the quote that pre-Magic, Orlando was not enthusiastic about pro sports
A collage of the logos of failed pro sport franchises in Orlando. This image was found on Google images, and serves to relate to the quote that pre-Magic, Orlando was not enthusiastic about pro sports

Next, I continued following the provided directions by “publishing the timeline to the web.”

Publishing the timeline to the web
Publishing the timeline to the web
5 Capture Saving my project
Saving the Project in my own Google Drive

Continuing to go step-by-step, I then copy/pasted the URL (provided to me once I “published to the web”) into the box on TimeLineJS’s site (you can see it in the image below next to Step 3, where it says “Google Spreadsheet URL”)

6 Capture - Steps 3 and 4 in TimelineJS

When I pasted the URL, an “embed code” was generated in the box you see next to step 4.

Now, the directions on TimeLineJS say to “copy and paste it on your site where you want your TimeLineJS to appear (just like a YouTube video).

This confused me just a little bit — because I have embedded video and images before, into sites like Wikipedia and my Fantasy Football/Basketball pages. But that process of embedding was a bit different than doing the same thing in WordPress, so I would find out. In those instances, embedding meant making sure that all the ‘symbols’ were correct: proper placement of “<” and “[{ }]”, etc. Basically, (when working with something like Wikipedia) you just pay attention to how something on that site is “coded” or embedded, and just paste your URL in that same format.

I googled “How to embed in WordPress” because the site itself does not really clarify.

7 Capture googling how to embed

You can imagine how dumb I felt when I learned that all you have to do is copy paste the code into the text box.

Now, part of me thinks this may be somewhat incorrect — Shouldn’t I be able to interact with the timeline if it is “embedded”? Copy/Pasting provided the link that takes the user to the site where they can interact with the timeline, but I thought that embedding meant the site where the video/image/timeline was embedded would allow the user to interact with it right there, not via a link.

8 Capture Copy pasting the embed code into wordpress
Copy/Pasting the embed code into my wordpress text box

Either way, I was able to see my creation via the link, and it looks great!

The rough rough rough rough draft of my project, but cool to see how it might look!
The rough rough rough rough draft of my project, but cool to see how it might look!

//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1HHPOIpEUxuCfZfe124wN5iXgLEQu8aui5Rx2EyAU2uc&font=Default&lang=en&initial_zoom=2&height=650

Again, it is just a concept at this point and needs a lot of work — but even this little bit helped me familiarize myself with the tool, its capabilities, and potential issues. It allowed me to see what my project might look like, and right off the bat I can tell that I might need to rethink some things — like providing more interpretation for the quotes I borrow from.

In the coming weeks, I’ll be going through this same process, but with much more progress made. Hopefully, over time, my project will develop and the story will become clear!

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