playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

improvements to demo timeline

pull/512/head
Joe Germuska 12 years ago
parent
7f83db6a14
commit
1122f646fc
5 changed files with 76 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      website/static/welcome/step3.png
  2. 105
      website/static/welcome/welcome.json
  3. 2
      website/templates/_demo.html
  4. 2
      website/templates/_examples.html
  5. 4
      website/templates/_make.html

BIN
website/static/welcome/step3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

105
website/static/data/docsite_example.json → website/static/welcome/welcome.json
Unescape View File

@ -5,7 +5,7 @@
"headline":"Welcome to TimelineJS",
"type":"default",
"startDate":"1888",
"text": "<p>TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.</p><p>Click on the arrow to the right to learn more.</p>",
"text": "<p>TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.</p><p>You're looking at an example of one right now.</p><p>Click on the arrow to the right to learn more.</p>",
"asset": {
"media":"http://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg",
"credit":"",
@ -13,28 +13,27 @@
},
"date": [
{
"startDate":"1980,1,18",
"headline":"Google Map with no text",
"text":"",
"startDate":"1851",
"headline":"It's Easy to Make Your Own Timeline",
"text":"The TimelineJS Embed Generator makes it easy to add a timeline to your own site. Just copy our Google Spreadsheet template, add your events as rows in the spreadsheet, and use our <a href='#make'>generator tool</a> to generate the HTML you need to add to your site.",
"asset":
{
"media":"http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11",
"media":"/static/welcome/step3.png",
"credit":"",
"caption":""
"caption":"Screenshot from TimelineJS Embed Generator tool (see below)"
}
},
{
"startDate":"1979,1,18",
"headline":"Google Map",
"text":"Just add the link to the map in the media field.",
"startDate":"1871",
"headline":"Illustrate your Timeline with photos, videos, tweets and more.",
"text":"Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
"asset":
{
"media":"http://maps.google.com/maps?q=New+York,+NY&hl=en&ll=40.721242,-73.987427&spn=0.164187,0.365295&sll=40.722673,-73.993263&sspn=0.082092,0.182648&oq=New+Y&hnear=New+York&t=m&z=11",
"media":"",
"credit":"",
"caption":""
"caption":"Screenshot from TimelineJS Embed Generator tool (see below)"
}
},
{
"startDate":"1899",
"headline":"YouTube video",
@ -48,24 +47,24 @@
},
{
"startDate":"1902",
"headline":"Wikipedia",
"text":"Wikipedia is now supported. Just add a link to the <a href='http://en.wikipedia.org/wiki/A_Trip_to_the_Moon' target='_blank'>Wikipedia entry</a>.",
"headline":"YouTube with no text",
"text":"",
"asset":
{
"media":"http://en.wikipedia.org/wiki/A_Trip_to_the_Moon",
"credit":"",
"caption":""
"media":"http://youtu.be/7JDaOOw0MEE",
"credit":"Georges Méliès",
"caption":"A Trip to the Moon / Le Voyage dans la lune"
}
},
{
"startDate":"1905",
"headline":"YouTube with no text",
"text":"",
"startDate":"1902",
"headline":"Wikipedia",
"text":"Add a link to a <a href='http://en.wikipedia.org/wiki/A_Trip_to_the_Moon' target='_blank'>Wikipedia entry</a> in the media field to show an excerpt alongside your text.",
"asset":
{
"media":"http://youtu.be/SvmM_YSnWX8",
"credit":"Georges Méliès",
"caption":"Le juif errant"
"media":"http://en.wikipedia.org/wiki/A_Trip_to_the_Moon",
"credit":"",
"caption":""
}
},
{
@ -89,6 +88,28 @@
"credit":"w3schools",
"caption":"http://w3schools.com"
}
},
{
"startDate":"1979,1,18",
"headline":"Google Map",
"text":"Google Maps are easy too. Just add the link to the map in the media field.",
"asset":
{
"media":"http://maps.google.com/maps?hl=en&sll=42.05083,-87.674194&sspn=0.020170947570668576,0.036220713642592585&z=15",
"credit":"",
"caption":""
}
},
{
"startDate":"1980,1,18",
"headline":"Google Map with no text",
"text":"",
"asset":
{
"media":"http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11",
"credit":"",
"caption":""
}
},
{
"startDate":"1985,2,7",
@ -112,16 +133,25 @@
"caption":"March to work."
}
},
{
"startDate":"2012,1,18",
"headline":"SoundCloud ",
"text":"Just add a link to the track in the media field.",
"startDate":"2001,2,10",
"headline":"A Tweet",
"text":"To add a tweet, just paste a link to the tweet stats in the media field. Example: http://twitter.com/alykat/status/164184609519697920",
"asset":
{
"media":"http://soundcloud.com/beastieboys/make-some-noise",
"media":"http://twitter.com/alykat/status/164184609519697920",
"credit":"",
"caption":"R.I.P. MCA."
"caption":""
}
},
{
"startDate":"2002,12,10",
"headline":"Yet Another Tweet",
"asset":
{
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416",
"credit":"",
"caption":""
}
},
{
@ -136,22 +166,23 @@
}
},
{
"startDate":"2001,2,10",
"headline":"A Tweet",
"text":"To add a tweet, just paste a link to the tweet stats in the media field. Example: http://twitter.com/alykat/status/164184609519697920",
"startDate":"2012,1,18",
"headline":"SoundCloud ",
"text":"Just add a link to the track in the media field.",
"asset":
{
"media":"http://twitter.com/alykat/status/164184609519697920",
"media":"http://soundcloud.com/beastieboys/make-some-noise",
"credit":"",
"caption":""
"caption":"R.I.P. MCA."
}
},
{
"startDate":"2002,12,10",
"headline":"Yet Another Tweet",
"startDate":"2013,10,01",
"headline":"Get started!",
"text":"Use the <a href='#make'>generator form</a> to make your first timeline now.",
"asset":
{
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416",
"media":"",
"credit":"",
"caption":""
}

2
website/templates/_demo.html
Unescape View File

@ -10,7 +10,7 @@
width: "100%",
height: "100%",
debug: false,
source: 'static/data/docsite_example.json',
source: 'static/welcome/welcome.json',
font: 'NewsCycle-Merriweather',
};
</script>

2
website/templates/_examples.html
Unescape View File

@ -1,5 +1,5 @@
<section id="examples" class="container">
<h2>Examples {{ static_url }}</h2>
<h2>Examples</h2>
<p>Have you made a timeline? <span><a href="https://docs.google.com/a/digitalartwork.net/spreadsheet/viewform?formkey=dE5PR01xc2h5cmRySkowLVIzOUVYeUE6MQ#gid=0" target="_blank">Let us know</a>, and we might feature it here.</span></p>
<!-- Examples Row 1-->

4
website/templates/_make.html
Unescape View File

@ -13,7 +13,7 @@
<h2 class="span1">1</h2>
<div class="span11">
<h4>Create your spreadsheet</h4>
<p>Build a new Google Spreadsheet using our <a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public" target="_blank" >template</a>. Drop dates, text and links to media into the appropriate columns.</p>
<p>Build a new Google Spreadsheet using our <a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public" target="_blank" >template</a>. Drop dates, text and links to media into the appropriate columns. <b>Note:</b> Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
<p><a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public" target="_blank" class="btn">Google Spreadsheet Template</a></p>
</div>
</div>
@ -42,7 +42,7 @@
<div class="span11">
<h4>Copy/paste spreadsheet URL into the generator box below</h4>
<div class="control-group">
<label class="control-label"> Google Spreadsheet or other <a href="#fileformat" data-scroll="true">data source URL</a></label>
<label class="control-label">Google Spreadsheet URL</label>
<div class="controls">
<input type="text" id="embed-source-url" class="span4">
<p class="help-inline">Make sure you've published it.</p>

Write Preview
Loading…
Cancel
Save