Zach Wise
13 years ago
1 changed files with 123 additions and 0 deletions
@ -0,0 +1,123 @@ |
|||||||
|
# Timeline |
||||||
|
## Document history with Timeline |
||||||
|
|
||||||
|
There are lots of timeline tools on the web but they are almost all either |
||||||
|
hard on the eyes or hard to use. Create timelines that are at the same time |
||||||
|
beautiful and intuitive for users |
||||||
|
|
||||||
|
Timeline is great for pulling in media from different sources. Just throw in a |
||||||
|
link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and |
||||||
|
Timeline will format it to fit perfectly. More media types will be supported |
||||||
|
in the future. |
||||||
|
|
||||||
|
Creating one is as easy as filling in a Google spreadsheet or as detailed as |
||||||
|
JSON. |
||||||
|
|
||||||
|
## Add it to your site |
||||||
|
|
||||||
|
### Step 1 |
||||||
|
|
||||||
|
Include these lines in the `<head>` of your site. |
||||||
|
|
||||||
|
`<!-- CSS -->` |
||||||
|
`<link href="timeline.css" rel="stylesheet">` |
||||||
|
|
||||||
|
`<!-- JavaScript -->` |
||||||
|
`<script type="text/javascript" src="jquery-min.js"></script>` |
||||||
|
`<script type="text/javascript" src="timeline-min.js"></script>` |
||||||
|
|
||||||
|
### Step 2 |
||||||
|
|
||||||
|
Add a `<div>` with an id called “timeline” in the `<body>` of your site. |
||||||
|
|
||||||
|
`<div id="timeline"></div>` |
||||||
|
|
||||||
|
### Step 3 |
||||||
|
|
||||||
|
Initialize the data source in either the `<head>` or the `<body>` |
||||||
|
`<script>` |
||||||
|
`$(document).ready(function() {` |
||||||
|
`timeline = new VMM.Timeline();` |
||||||
|
`timeline.init("your_data.json");` |
||||||
|
`});` |
||||||
|
`</script>` |
||||||
|
|
||||||
|
## File Formats |
||||||
|
|
||||||
|
### JSON: |
||||||
|
|
||||||
|
JSON is the native data format for Timeline. It is easy enough for “normals” |
||||||
|
to use but powerful enough for real nerds to get excited about. |
||||||
|
|
||||||
|
The thing about JSON is it is picky. A misplaced comma or quotation mark can |
||||||
|
prevent the timeline from loading properly. Instructions on actually using the |
||||||
|
JSON file are included in the example data.JSON file. |
||||||
|
|
||||||
|
### Google Docs: |
||||||
|
|
||||||
|
If you don’t want to mess with JSON, fire up Google Docs and build your |
||||||
|
timeline in a spreadsheet. It’s as simple as dropping a date, text, and links |
||||||
|
into the appropriate columns in Timeline’s template. |
||||||
|
|
||||||
|
You can find the template here: [https://docs.google.com/a/digitalartwork.net/ |
||||||
|
previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public](h |
||||||
|
ttps://docs.google.com/a/digitalartwork.net/previewtemplate?id=0AppSVxABhnltdE |
||||||
|
hzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public) |
||||||
|
|
||||||
|
There are only four things you need to know in order to create a timeline |
||||||
|
using Google Docs: |
||||||
|
|
||||||
|
1. Make the spreadsheet public: |
||||||
|
Google Docs are automatically set to private but the spreadsheet must be |
||||||
|
public. |
||||||
|
|
||||||
|
|
||||||
|
Click the blue “Share” button on the top right-hand corner. In the “Share |
||||||
|
settings” window, you’ll see the private setting of the spreadsheet: click |
||||||
|
“Change...”. In the Visibility options window, choose “Public on the Web” and |
||||||
|
save. |
||||||
|
|
||||||
|
2. Publish to the Web |
||||||
|
Under the File menu, select “Publish to the Web.” |
||||||
|
|
||||||
|
|
||||||
|
In the next window, check the box next to “Automatically republish when |
||||||
|
changes are made.” Uncheck all other boxes. Click “start publishing.” This |
||||||
|
will give you the URL to embed in your HTML file. |
||||||
|
|
||||||
|
3. Copy/paste the Web URL into your Timeline HTML file |
||||||
|
After you publish the spreadsheet, Google Docs will generate a link to the |
||||||
|
file. Copy the link for the Web Page option (as opposed to PDF, HTML, XLS, |
||||||
|
etc.), then paste it into the timeline’s HTML file: |
||||||
|
|
||||||
|
|
||||||
|
timeline.init(“URL goes here”) |
||||||
|
|
||||||
|
4. Designate the “start” slide |
||||||
|
This indicates which event is the title slide, the one that begins the |
||||||
|
timeline. |
||||||
|
|
||||||
|
|
||||||
|
Only one should be labeled "start" (generally, the first one). The title slide |
||||||
|
must have a start date, headline and text to appear properly. |
||||||
|
|
||||||
|
## Media |
||||||
|
|
||||||
|
Included in the zip file is a kitchen sink example. This timeline shows how to |
||||||
|
incorporate the different media types from different services like Twitter, |
||||||
|
YouTube, Flickr, SoundCloud and Vimeo. |
||||||
|
|
||||||
|
Twitter: Just copy and paste the address of the tweet from the browser bar |
||||||
|
into the media parameter. Timeline will auto-magically pull in the tweet and |
||||||
|
format it so that it looks beautiful. |
||||||
|
|
||||||
|
For Flickr, SoundCloud, YouTube, and Vimeo just copy the URL and paste it into |
||||||
|
the media parameter. |
||||||
|
|
||||||
|
## Best practices |
||||||
|
|
||||||
|
Tips and tricks to best utilize Timeline |
||||||
|
|
||||||
|
1. Keep it light - don’t get bogged down by text or other elements |
||||||
|
2. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline. |
||||||
|
3. Include events that build up to major occurrences, not just the major events. |
||||||
Loading…
Reference in new issue