You are on page 1of 19

timeglider guide

timelines

creating/editing
opening a timeline
publishing/embedding

events

creating and editing events


date display
size and importance
images & links, etc

users

managing users

data

exporting & importing


printing

Welcome! We're still filling out this guide. In the weeks to come, we'll add
more details related to Plus features like collaboration, managing users,
and importing and exporting data. You can alwayswrite to us if you have
questions, and we'll get back to you as soon we can.

creating a timeline

A "timeline" is sort of like a folder for the


events it contains. That folder has its own properties that define the entire
timeline apart from the events in it, including its title, description, and
whether it will have a public URL.
When you first arrive at Timeglider as a new user, you see an empty
timeline "stage" an empty space with the "ruler" at the bottom of the
app, and thetimelines menu. At the bottom of that menu, there is a "+
new" button.

Click the "+ new" button to create a new timeline.

To display the timelines panel, if it's not visible, click on "timelines" in the
application header.

Enter information into the following fields:


timeline title
Keep the title brief and informative. This will show persistently in a header
above the timeline if it is published. Otherwise, it is really for reference in
the timeline menu panel.

timeline description
This is helpful for when a visitor lands on your published timeline and
needs an introduction, guidance, credits, or other information. The
description can contain basic html tags: img, a, strong and em.

focus date
The values of the zoom level and focus date are mere guesses at first! As you fill out
the events in your timeline, it will become more and more clear how these ought to
be set. See also the snapshot feature for setting timeline values.

When a timeline is loaded, it needs some date at which to start. This is the
"starting point" of the timeline, as the user can in most cases drag or
zoom the timeline away from it. Sometimes the focus date is best set as
the middle of the information, but in other situations, the beginning of a
narrative series of events is more appropriate. By clicking the calendar
icon by the date field, you can use our date picker (shown above) to select
a date using a calendar view.

zoom level

As
with the focus date, a timeline needs a scope or zoom-level at which to
begin. Any visitor might decide to immediately zoom in or out, but you
ought to choose this value carefully before publishing your timeline to
make sure the initial view is optimal.

size-importance

Timegli
der's special sauce which makes it possible to look at large amounts of
data in a zooming timeline is the size-importance feature. With this box
checked, an importance value given to events also determines their
relative size as you zoom in and out, making them larger and smaller
respectively. This check-box turns this feature on or off. (It can be handy
to turn size-importance off to make sure you see all events, as less
important events can fade from view as one zooms out.)

image lane height


Images that get placed in the image lane are sized according to the height
of the lane. This can be set to a small number to start, or to zero if you
don't plan on putting any images in your timeline. As you do add images,
you can adjust it as you go depending on how high your events go, how
many images you have, and other factors.

public URL checkbox


If you want to share your timeline with others (using a web link), check
this box, and after you hit "save", a URL will be generated for the timeline.
After you hit "save", you can either go to the "sharing" button at the top of
the app, or click the timeline title on the timelines menu panel, and then
select "publish/share", and you will see the url. Leave this box unchecked
if you want to make it impossible to visit this timeline except with your
logged in account.

Click on "save" to create the timeline.


creating a snapshot

After you have created a timeline, the best way


to set the zoom level, focus date, and image lane height (all at once) is to
take a snapshot. Here's how: Zoom and drag the timeline to achieve the
best scope and centered quality, and (optionally) expand or narrow the
image lane. Then click the timeline title in the timeline menu (bringing up
all options) and click on snapshot. This will change the zoom level,
focus date, and image lane height to the visible settings.

opening a timeline

After creating a timeline,


its title will appear in the timeline menu panel (at right). By clicking on the
timeline title, then selecting "open timeline" it will be highlighted to
indicate will be active in the stage.

Click the title of the timeline in the timeline panel, then the
"open timeline" option to show the timeline on the stage.

(If the timeline has no events in it you won't see much, but
you'll be prompted to create your first event.)
The timeline panel (clicking on a timeline title) is the hub for accessing
other features for a timeline: getting to the list view, creating a legend,
taking asnapshot, and publishing/sharing options.

opening a timeline

After creating a timeline,


its title will appear in the timeline menu panel (at right). By clicking on the
timeline title, then selecting "open timeline" it will be highlighted to
indicate will be active in the stage.

Select the "open timeline" option to show the timeline on


the stage.
If the timeline has no events in it you won't see much, but
you'll be prompted to create your first event.
The timeline panel (clicking on a timeline title) is the hub for accessing
other features for a timeline: getting to the list view, creating a legend,
taking asnapshot, and publishing/sharing options.

publishing and embedding a timeline


A timeline does not need to be visible to the public
at any URL unless you choose for it to be. (See the public
url field.)

To get the public url of the timeline, you first need to click the
"public url" checkbox in the main timeline properties and click
"save". Then click on the timeline title again from the timeline menu
panel, and select "publish/share". This will open the tab in the properties
panel that has the main URL, and an embed code for placing the timeline
in an iframe into blogs or other web pages.

sharing panel

The sharing panel is a central place to find all publishing/embedding


information for your timelines. Click on the "share" button in the header of
the app, and then select the timeline you want to share from the pulldown
menu. The share panel gives you the ability to customize a link or embed
code with "min_zoom" and "max_zoom" values. In the resulting timeline,
users will not be able to zoom beyond these values, making the zoom
slider shorter, too. Also, if you have a timeline that you want to keep at a
single, fixed zoom level, choose the same values in the min_zoom and
max_zoom pulldowns.

collaborating and adding other


editors to a timeline
Guide under construction: Contact us if you need help with this.

timeline presentations
Guide under construction: Contact us if you need help with this.

creating/editing an event
With a timeline open (its title highlighted in the timelines
menu panel), the simplest way to create a new event is
to double-click on the stage at or near the date of the
event.

You can drag and zoom the timeline


until the date of the event you want to create is between the far left and
far-right of the screen (by looking at the timeline "ruler"). You can even
double-click right on the ruler itself.
Once a timeline is open, a context menu appears in the upper right part of
the app. There is also a "new event" button there.
The event editor appears when you click on "new event", or double-click
the stage:

Here's an overview of properties that belong to any event on a timeline.

event title
Event titles should be as short as possible. This allows for more space in
the timeline for other events. A title like "Camembert introduced in
Normandy in 1791" could likely be shortened to just "Camembert"
dates are shown in the timeline rule itself, and details like "in Normandy"
can be reserved for the description.

event icon

T
o the left of the event title field, there is an icon. You can click on this to
bring up the icon menu. Icons allow you to differentiate different sorts of
events: good things, bad things, inventions, locations, and so forth.
Timeglider Plus users can create a legend so that a timeline can
be filtered to show sets of specific icons.

Click on an icon in the icon menu, then click on "CHOOSE"


to choose an icon for the event
start and end dates

Every event
on a timeline needs a precise date and time even if you will not be
displaying all that information to viewers. The start date of an event will
create the position at which the event appears on the timeline, the left
side of the title aligning with that date.
Click on the calendar icon to bring up the date picker. This provides a
quick way to click on the month and day, and to advance the year, or
simply type the year into the year field, and then click "OK" to have this
date entered into the date field.
bce/bc dates

In the date field, use the format YYYY-MM-DD. For BCE


dates, enter a negative number for the year. An event
happening in 5000 bce would be entered as such: -5000.
You can enter just the year in the date field but the month and day will
be chosen for you from defaults (6 and 1 respectively).
Events can also be durations lasting mere hours, or thousands of years.
Check the "span?" box to access the end date fields, and enter dates that
indicate the end of the time-span.

date display

On many occasions, you may


only know the year of an event you are entering. Timeglider gives you the
ability to limit the displayed date for viewing purposes, even as we still
need a precise date and time inside the data. Importantly, the date, and
event the time, determine where on an x-axis (down to the pixel) the
event will be placed.

Choose an appropriate date display value: year, month,


day, hour, or no date display at all.
You can see from the image at right (with four different views) how the
different date display options result in different types of visible rendering
of the date.
When a viewer of a public timeline clicks on an event, a modal window
pops up with the title and description. The same date display rule is used
for modals.

event size and the importance value

First, here's
how size-importance works: At any zoom level, matching an event's
importance value to the zoom level value (visible at the bottom of the
zoom slider) will mean the event will have a "normal" font size at that
zoom level. If you're at zoom level 35 (about 3 years of scope), and you
create an event with an importance value of 35, the font will have a size
of 12 pixels. Zooming out to level 40 (seeing 10 years across the screen),
will mean that the size of the event is about 87% smaller (35/40).
Conversely, zooming in to zoom level 30 will mean that the event appears
larger, to a ratio of 35/30. Going back to zoom level 35, if you gave that
event an importance value of 70, it will appear at twice the "normal" font
size, and be 24 pixels.

There are two ways to edit the importance of an event.


First, here in the event editor, you set the importance value
with the slider, choosing a value from 1 to 100. Second,
you can click on the icon of any event in the timeline, and
slider panel comes up (pictured above) that allows you to
edit just the importance of an event and see it change
relative to other events present.
event images, links, video urls

Any event can have an


image associated with it that will either be displayed in the image
lane or inline in the same space as other timeline events, placed above
the event title.
We highly recommend that you place images in the image lane, as this
affords the most flexible visually pleasing experience. When images are
placed inline (unless the timeline has a fixed zoom level in its published
form), they tend to stack quickly, and can look quite jumbled. A skilled
timeline author can place images inline using absolute positioning but
only in the context of a timeline that is not meant to zoom in our out.
IMAGES: You can link an image to an event simply using any web URL for
an image, i.e. a URL ending with .jpg or .png or .gif. The FULL URL of the
image must always be entered, starting with "http://"
You can also upload images into a Timeglider image library, and place
those images into any event. Click on the "upload" button to upload a new
image into your library, or "pick from library" to select from existing
images.
In using images in Timeglider, please respect copyright laws, and respect
others' intellectual property. There are plenty of open-source image
respositories for historical timelines (i.e. the WikiMedia Commons). If you
have doubts about whether an image is useable, don't use it.
LINKS: To create a link for your event (which gets displayed clearly in
the event modal), you can enter both a label for the link (which defaults to
"link"), and a URL. The URL must be a full web url beginning with
"http://" or "https://". Make sure to test that the url you will enter into
this field brings up a valid web page. Plus users can create multiple links
for a single event by clicking the "+" symbol under the first link; a second
set of label and url fields will be created.

VIDEOS: You can embed


YouTube and Vimeo videos in Timeglider events by entering the iframe
source URL into the video field. This is different than the page url on which
you would watch the video. In YouTube, to get the embed code, click on
"share", then the "embed" buttons; then copy that entire <iframe>
element. Paste into the Timeglider video field only the URL from the "src"
attribute of that tag. We're going to make this easier promise!

creating and managing users


Timeglider Plus users can add up to 30 "sub-users" in their account, who
have the same capabilities as Free users (3 timelines, limited features).
This is typically used by teachers for students, but can also be used in
business situations, too.
Before setting up sub-users, you will need to have a screenname. If you
don't already have one, click on the "settings" button in the upper right
(or on your name) and enter a screenname in the corresponding field,
then hit "save".
To create or manage your users, click on the "users" button in the upper
right of the app, and then the "add user" button within that panel to
create a user. Sub-users do not have email addresses; instead, they log in
with a hyphenated screenname: your_screennamesubuser_screenname. So, if you give a sub-user the screenname of

"emily", and your screenname is "martha", she will log in with "marthaemily" and the password you provide.

exporting and importing data from/to


a timeline
importing

All users can


export their timeline data as either .CSV (comma-separated values) which
can be easily imported into spreadsheet applications, or with JSON, which
can be used in the context of JavaScript and web applications, including
the Timeglider JS Widget.

exporting
To export data, click on the timeline title in the timeline menu, choose
"edit properties", and then click on the "import/export" tab. You will see
"CSV" and "JSON" links, each of which will open a new tab with the
plaintext data (or a download prompt on IE). The CSV data includes some
"header" information about the timeline itself; the only useful CSV data is
the events data. be sure to look at the plaintext file before importing it
into Excel or another spreadsheet.

Timeglider Plus users can also import data from CSV files that are
structured identically to the exported CSV files. There is a detailed
explanation of this structure here. To export, follow the instructions above
to the "import/export" tab, and then click on the "import data" link. This
opens a new tab/page in the browser to allow for enough space to see a
preview of data before actually importing it. This preview will indicate any
problems you might have with the data especially with dates.

printing timelines
Timeglider does not have a native printing feature. The best way to get a
good printout of a timeline is to create and print a screenshot. What we
recommend is:
1. Open the browser window as large as
possible to get the widest view of the
timeline.
2. Set the focus and zoom of the
timeline as desired
3. Use a screen-capture utility to take a
screenshot of the entire screen, or a
selection rectangle.
4. If your screenshot extended beyond
the timeline itself, you would need to
crop the image in a basic image
editing program (Preview on Mac,
Photoscape on Windows, or
Photoshop).
5. Print the image from the photoediting application.
6. If you need help creating a JPEG of
your timeline, send a public timeline
URL to info@timeglider.com (along
with the proper date range), and
we'll send you back a file for printing.

2012 Timeglider/Mnemograph LLC

You might also like