<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Multimedia &#187; Timelines &#124; Multimedia</title>
	<atom:link href="http://christinemckenna.com/multimedia/?cat=39&#038;feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://christinemckenna.com/multimedia</link>
	<description></description>
	<lastBuildDate>Mon, 05 Oct 2020 16:11:10 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5</generator>
		<item>
		<title>Timelines</title>
		<link>http://christinemckenna.com/multimedia/?p=18445</link>
		<comments>http://christinemckenna.com/multimedia/?p=18445#comments</comments>
		<pubDate>Sun, 05 May 2019 13:30:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Timelines]]></category>

		<guid isPermaLink="false">http://christinemckenna.com/multimedia/?p=18445</guid>
		<description><![CDATA[Using Timelines in Stories: Chronology, Context, Clarification, Cause-and-Effect, Patterns/Trends, Retrospective/Biography, Navigation]]></description>
				<content:encoded><![CDATA[<p><a href="http://www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline" rel="attachment wp-att-8245"><img class="aligncenter size-full wp-image-8245" alt="guardian3d" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/guardian3d.jpg" width="640" height="404" /></a></p>
<p><strong>Using Timelines in Stories: Chronology, Context, Clarification, Cause-and-Effect, Patterns/Trends, Retrospective/Biography, Navigation</strong></p>
<p>- Chronology: Describing a series of events minute by minute, day by day, year by year<br />
- Clarification: Making complex or ongoing issues easier to understand<br />
- Context: How does the current event fit into a bigger picture?<br />
- Cause and effect: What series of smaller events has led to this big news story?<br />
- Patterns/Trends/Turning Point: Using past events to show larger patterns or what the future might hold.<br />
- Retrospective/Biography: Plotting the milestones of a life.<br />
- Navigation: Using time as a device for navigating a narrative.</p>
<p><strong>Chronology of events:</strong><br />
<a href="http://widerimage.reuters.com/timesofcrisis/" target="_blank">Reuters: Times of Crisis &#8211; 365 days</a><br />
<a href="http://www.abc.net.au/innovation/blacksaturday/#/timeline/sequence/chapter/1" target="_blank">ABC: Black Saturday &#8211; 24 hours</a></p>
<p><strong>Clarification/Context/Cause-Effect</strong><br />
<a href="http://www.theguardian.com/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline" target="_blank">Arab Spring</a></p>
<p><strong>Patterns/Trends/Turning Point</strong><br />
<a href="http://graphics.wsj.com/infectious-diseases-and-vaccines/" target="_blank">Battling Infectious Diseases in the 20th Century: The Impact of Vaccines</a><br />
<a href="http://www.nytimes.com/interactive/2010/07/02/sports/soccer/facebook-worldcup.html?_r=0" target="_blank">Top World Cup Players on Facebook, Day by Day</a><br />
<a href="http://www.nytimes.com/interactive/2009/01/17/washington/20090117_ADDRESSES.html?_r=0" target="_blank">Inaugural Words</a></p>
<p><strong>How something works:</strong><br />
<a href="http://www.nytimes.com/interactive/2008/09/19/nyregion/20080920_LIRR_GRAPHIC.html" target="_blank">A Day’s Work, Four Days’ Pay</a><br />
<a href="http://www.zeit.de/datenschutz/malte-spitz-data-retention" target="_blank">Tell-all telephone</a></p>
<p><strong>Biographical timelines:</strong><br />
<a href="http://www.telegraph.co.uk/news/worldnews/asia/pakistan/9240249/Timeline-Osama-bin-Ladens-life-history.html" target="_blank">Timeline of Osama bin Laden’s Life</a><br />
<a href="http://www.telegraph.co.uk/news/worldnews/nelson-mandela/10145496/Nelson-Mandela-interactive-timeline.html" target="_blank">Nelson Mandela</a></p>
<p><strong>Narratives navigation:</strong><br />
<a href="http://interactive.nfb.ca/#/thisland" target="_blank">NFB: This Land</a><br />
<a href="http://thewhalehunt.org/whalehunt.html" target="_blank">Whale Hunt</a></p>
<p><strong>Styles: Live Blog, Interactive, Infographics</strong></p>
<p><a href="http://www.nbcnews.com/id/42853015/ns/world_news/t/timeline-osama-bin-ladens-life/#.USwgoRyY5n1" rel="attachment wp-att-8240"><img class="aligncenter size-full wp-image-8240" alt="osamatimeline" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/osamatimeline.jpg" width="640" height="377" /></a></p>
<p><a href="http://www.theguardian.com/world/2015/jan/09/-sp-charlie-hebdo-timeline-events" target="_blank">Charlie Hebdo timeline: how events have unfolded</a><br />
<a href="http://awesome.good.is.s3.amazonaws.com/transparency/web/0906/trans0609largestbankruptcies.jpg" target="_blank">Largest Bankruptcies</a></p>
<h3>Process</h3>
<p><strong>Should I include a timeline in my story?</strong></p>
<p>- Does your story contain a complex series of events that might be better told through a timeline?<br />
- Is there a compelling historical component to your piece?<br />
- Are there key milestones that will show how past events have caused or led to this event?<br />
- Are you doing a profile where a retrospective timeline is appropriate?<br />
- Is the future of an issue the point of your story and would a timeline help suggest trends, future directions?<br />
- Will putting your reporting in a timeline help you explore the issue or help you structure the piece?<br />
- What is the goal of my timeline? Is it complementary or redundant?<br />
- What is the logical breakdown of my timeline: days, weeks, years?</p>
<h3>Tools</h3>
<p><a href="http://timeline.verite.co/" rel="attachment wp-att-8243"><img class="aligncenter size-full wp-image-8243" alt="timelinejs" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/timelinejs.jpg" width="640" height="354" /></a></p>
<p><strong>Tool 1: TimelineJS</strong><br />
<a href="https://www.dropbox.com/s/0f983fqtq8szk5k/hoffmantimelinecontent2018.docx?dl=0" target="_blank">DOWNLOAD DEMO SCRIPT</a></p>
<p><a href="http://christinemckenna.com/interactive/timeline-demo/" target="_blank">View complete demo timeline</a></p>
<p>- It has built in support for: Twitter, Flickr, Google Maps, YouTube, Vimeo, Wikipedia, and SoundCloud.<br />
- Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.<br />
- Keep it short, and write each event as a part of a larger narrative.<br />
- Include events that build up to major occurrences. Not just the major events.</p>
<p><!--</p>
<p><a href="http://www.denverpost.com/breakingnews/ci_21119904" target="_blank">Movie Theatre Shooting</a></p>
<p><a href="http://www.denverpost.com/breakingnews/ci_21119904" target="_blank"><img class="aligncenter size-full wp-image-8229" alt="shototing2" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/shototing2.jpg" width="640" height="429" /></a></p>
<p><iframe src="http://embed.verite.co/timeline/?source=0AjO0d78Pw4YSdDV5NmJDQ0FiM2E2RUdBaFk2WExSa0E&amp;font=Bevan-PotanoSans&amp;maptype=toner&amp;lang=en&amp;hash_bookmark=true&amp;height=650" height="650" width="100%" frameborder="0"></iframe> </p>
<p>https://docs.google.com/spreadsheets/d/1ioq6AV7Bj_Nmr2GH39uH1asYpp6tk8XZzYya6Gj3C2s/edit#gid=0</p>
<p>&#8211;></p>
<p><strong>Steps:</strong></p>
<p>1) <a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&amp;mode=public" target="_blank">Copy the Google Template</a> You must be logged into Google Docs. At the top of the template you will see a button that says &#8220;Use the template.&#8221; Click it.</p>
<p>2) Populate the designated fields: date, headline, text, media, media credit, media caption</p>
<p><a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&amp;mode=public"><img class="aligncenter size-full wp-image-8231" alt="fields" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/fields.jpg" width="640" height="154" /></a></p>
<p>Note:</p>
<p>- Start date is required, though you can remove End Date. The default is month/day/year. However, you can just use the year, or the month/year. Go to Format&gt; Number &gt; Plain Text</p>
<p><img class="aligncenter size-full wp-image-10424" alt="changedate" src="http://christinemckenna.com/interactive/wp-content/uploads/2014/02/changedate.jpg" width="589" height="469" /></p>
<p>- Headline is required. It will be a header and also show on the arrows for the next slide</p>
<p><img class="aligncenter size-full wp-image-10425" alt="titles" src="http://christinemckenna.com/interactive/wp-content/uploads/2014/02/titles.jpg" width="640" height="243" /></p>
<p>- Media requires a URL. Generally the link, rather than the embed code, is best. For images, it is the simple URL for the direct link to the image. You should upload your images to flickr or to your blog and use that URL. For Youtube, Soundcloud, Twitter, Google maps, again, you can use the URL.</p>
<p><img class="aligncenter size-full wp-image-10423" alt="imageURL" src="http://christinemckenna.com/interactive/wp-content/uploads/2014/02/imageURL.jpg" width="640" height="335" /></p>
<p>- Media credits will appear directly below the media in the lower-right-hand corner and captions will appear beneath that.</p>
<p>- If you use the Media thumbnail option it should be no larger than 32px x 32px.</p>
<p>3) Once you are done populating the fields, go to File &gt; Share &gt; Make Public</p>
<p>4) Next go to File &gt; Publish to Web</p>
<p><img src="http://christinemckenna.com/interactive/wp-content/uploads/2016/03/publish.jpg" alt="" width="640" height="258" class="aligncenter size-full wp-image-16037" /></p>
<p>5) Make sure it says &#8220;Republish when changes are made.&#8221; Ignore where it says Get a link to the published data. This no longer works. Instead, grab the URL at the top of the Google spreadsheet. </p>
<p>6) Go to <a href="http://timeline.knightlab.com/" target="_blank">TimelineJS</a>, paste in the Google timeline URL and click &#8220;Preview to make sure the timeline is functioning as it should.</p>
<p>7) Once you have tweaked your timeline to your satisfaction,  get the embed code using the embed generator.</p>
<p><a href="http://timeline.verite.co/" rel="attachment wp-att-8235"><img class="aligncenter size-full wp-image-8235" alt="embedgenerator" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/embedgenerator.jpg" width="640" height="340" /></a></p>
<p>8) Take the &lt;iframe&gt; code that should look something like the below and paste it into the text mode of your WP blog.</p>
<p>&lt;iframe src=&#8217;http://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=0AjO0d78Pw4YSdHB1WVhzb2U1ZE54UzNhZWFZdGVUVVE&amp;font=Bevan-PotanoSans&amp;maptype=TERRAIN&amp;lang=en&amp;height=650&#8242; width=&#8217;100%&#8217; height=&#8217;650&#8242; frameborder=&#8217;0&#8242;&gt;&lt;/iframe&gt;</p>
<p><!--<strong><a href="http://johnkeefe.net/the-thinking-behind-wnycs-new-vertical-timeli" target="_blank">Tool 2: Vertical Timeline</a></strong><br />
In 2012, then-state senate majority leader Pedro Espada got in big trouble for siphoning money out of a charitable organization he was running.</p>
<p><a href="http://www.wnyc.org/blogs/empire/2012/may/07/timeline-pedro-espadas-long-dance-law/" target="_blank"><img class="aligncenter size-full wp-image-8236" alt="espadavertical" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/espadavertical.jpg" width="623" height="764" /></a>Mother Jones took the same tool and used it to cover Mitt Romney&#8217;s record:<br />
<a href="http://www.motherjones.com/mojo/2012/07/mitt-romney-bain-capital-timeline" target="_blank">Mitt Romney&#8217;s Bain Capital Timeline</a></p>
<p><strong>Steps:</strong></p>
<p>1) Download the folder of code here, at <a href="https://github.com/balancemedia/Timeline" target="_blank">github</a>.</p>
<p><a href="https://github.com/balancemedia/Timeline"><img class="aligncenter size-full wp-image-8259" alt="balancegithub" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/balancegithub.jpg" width="640" height="165" /></a></p>
<p>It should look like this inside:</p>
<p><a href="https://github.com/balancemedia/Timeline"><img class="aligncenter size-full wp-image-8260" alt="balancefolder" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/balancefolder.jpg" width="618" height="378" /></a></p>
<p>2) Make a copy of the <a href="https://docs.google.com/spreadsheet/ccc?key=0Al2vbsd4zHJbdFNRaFBuMjNWTUNHenFhdTR2elYxMUE#gid=0" target="_blank">Google Doc Template</a>. Populate the fields</p>
<p><a href="https://docs.google.com/spreadsheet/ccc?key=0Al2vbsd4zHJbdFNRaFBuMjNWTUNHenFhdTR2elYxMUE#gid=0"><img class="aligncenter size-full wp-image-8264" alt="timelinetemplate" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/timelinetemplate.jpg" width="640" height="350" /></a></p>
<p>3) Delete the first instruction row and the dummy copy row. File &gt; Publish</p>
<p>4) Copy URL. You will be interested in the portion between key and &amp;.</p>
<p><img class="aligncenter size-full wp-image-8262" alt="keyinfo" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/keyinfo.jpg" width="589" height="235" /></p>
<p>5) Download <a href="http://www.barebones.com/products/textwrangler/" target="_blank">Text Wrangler</a> if you don&#8217;t have a code editor. You will need to open up two pages of code and swap out the &#8220;key&#8221; in each.</p>
<p>6) Open table.js. You will see three instances at the top of the page. Swap out the data between the key and &amp; where the red strings are:</p>
<p>/*<br />
Initialize with Tabletop.init( { key: &#8216;<span style="color: #993300;">0AjO0d78Pw4YSdHFSS19lZlVjLXItNnp2Rm42Si1QaWc</span>&#8216; } )<br />
OR!<br />
Initialize with Tabletop.init( { key: &#8216;https://docs.google.com/spreadsheet/pub?hl=en_US&amp;hl=en_US&amp;key=<span style="color: #993300;">0AjO0d78Pw4YSdHFSS19lZlVjLXItNnp2Rm42Si1QaWc</span>&amp;output=html&amp;widget=true&#8217; } )<br />
OR!<br />
Initialize with Tabletop.init(&#8216;<span style="color: #993300;">0AjO0d78Pw4YSdHFSS19lZlVjLXItNnp2Rm42Si1QaWc</span>&#8216;)<br />
*/</p>
<p>7) Open script.js and swap out the same key there. Replace the sample key on line 3 of <code>js/script.js</code> with the key to your Spreadsheet.</p>
<p><img class="aligncenter size-full wp-image-8248" alt="javascriptkey" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/javascriptkey.jpg" width="640" height="102" /></p>
<p>8) Your timeline needs to live on a server somewhere. If you have a server space you can upload it. If not, you may be able to use Dropbox.</p>
<p>9) Once you have uploaded the timeline, you can then embed it in a WP site using an &lt;iframe&gt;. It should look something like this:</p>
<p>&lt;iframe src=&#8221;http://www.christinemckenna.com/interactive/timelinevertical/index.html&#8221; height=650&#8243; height=&#8221;950&#8243; width=&#8221;100%&#8221; frameborder=&#8221;0&#8243;&gt;&lt;/iframe&gt;</p>
<p><iframe src="http://www.christinemckenna.com/interactive/timelinevertical/index.html" height="550" width="100%" frameborder="0"></iframe></p>
<p><strong>Tool 3: Timeline Setter&gt;<br />
ProPublica built “<a href="http://blogs.journalism.co.uk/2012/01/10/tool-of-the-week-for-journlaists-propublicas-timeline-setter/" target="_blank">Timeline Setter</a>” to take a formatted spreadsheet and<br />
move it into a horizontal timeline:</strong></p>
<p><a href="http://www.propublica.org/special/timeline-a-history-of-pardons" target="_blank">History of presidential pardons</a><br />
<a href="http://christinemckenna.com/interactive/checklist-timelines/pardons/" rel="attachment wp-att-8239"><img class="aligncenter size-full wp-image-8239" alt="pardons" src="http://christinemckenna.com/interactive/wp-content/uploads/2013/03/pardons.jpg" width="640" height="515" /></a></p>
<p><a href="https://www.propublica.org/special/tbi-psycho-platoon-timeline" target="_blank">How One Blast Affected Five Soldiers</a></p>
<p>Homework example</p>
<p><iframe src='//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1gvo-5CZUgu56gOkR127cwtQ0HAq3zYgfZ-JM84Pmf8E&#038;font=Default&#038;lang=en&#038;initial_zoom=2&#038;height=650' width='100%' height='650' frameborder='0'></iframe>&#8211;></p>
]]></content:encoded>
			<wfw:commentRss>http://christinemckenna.com/multimedia/?feed=rss2&#038;p=18445</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
