<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"
xmlns:thr="http://purl.org/syndication/thread/1.0">
<link rel="alternate" type="text/html" href="http://www.pbs.org/mediashift/2009/02/washington-posts-web-ninjas-build-map-timeline-combo047.html" />
<link rel="self" type="application/atom+xml" href="http://www.pbs.org/mediashift/atom.xml" />
<id>tag:www.pbs.org,2009:/mediashift//4/tag:www.pbs.org,2009:/mediashift//4.6240-</id>
<updated>2009-11-09T05:24:47Z</updated>
<title>Comments for Washington Post&apos;s &apos;Web Ninjas&apos; Build Map-Timeline Combo</title>
<subtitle>Your guide to the digital media revolution, with host Mark Glaser.</subtitle>
<generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.24-en</generator>
<entry>
<id>tag:www.pbs.org,2009:/mediashift//4.6240</id>
<link rel="alternate" type="text/html" href="http://www.pbs.org/mediashift/2009/02/washington-posts-web-ninjas-build-map-timeline-combo047.html" />
<link rel="service.edit" type="application/atom+xml" href="http://www.pbs.org/mediashift/mt/mt-atom.cgi/weblog/blog_id=4/entry_id=6240" title="Washington Post's 'Web Ninjas' Build Map-Timeline Combo" />
<published>2009-02-16T23:01:54Z</published>
<updated>2009-02-17T00:32:08Z</updated>
<title>Washington Post&apos;s &apos;Web Ninjas&apos; Build Map-Timeline Combo</title>
<summary>TimeSpace, a Washington Post project, is a coverage mapping framework that displays content from multiple sources in space (via a map) and time (via a timeline). A display map, covering anything from a single city block to the world, is tagged to show viewers where news is being covered.  Viewers can also view the news map as it appeared at different points over the preceding hours or days, giving them a picture of how the news events unfolded over time.</summary>
<author>
<name>Megan Taylor</name>
<uri>http://www.megantaylor.org</uri>
</author>

<category term="Legacy Media" />

<category term="MediaShift Innovation Spotlight" />

<category term="NewspaperShift" />

<category term="PoliticalShift" />

<content type="html" xml:lang="en" xml:base="http://www.pbs.org/mediashift/">
<![CDATA[<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="timespace election.jpg" src="http://www.pbs.org/mediashift/timespace%20election.jpg" width="350" height="272" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p><em>The MediaShift Innovation Spotlight looks in-depth at one great mash-up, database, mapping project or multimedia story that combines technology and journalism in useful ways. These projects can be at major newspaper or broadcast sites, or independent news sites or blogs.</em></p>

<h2>What It Is</h2>

<p>TimeSpace, a Washington Post project, is a coverage mapping framework that displays content from multiple sources in space (via a map) and time (via a timeline). A display map, covering anything from a single city block to the world, is tagged to show viewers where news is being covered.  Viewers can also view the news map as it appeared at different points over the preceding hours or days, giving them a picture of how the news events unfolded over time.</p>

<h2>Why It's Innovative</h2>

<p>TimeSpace provides a unique browsing experience. Zoom in and out on a map to see what news is being covered where. Slide the timeline around to see what's going on when. It's like a news time machine.</p>

<p>The brilliance of TimeSpace is that it is not just one project. It was built as a framework, so that different maps could be created to cover different topics.  There are already multiple versions out: <a href="http://specials.washingtonpost.com/timespace/election">TimeSpace Election</a>, <a href="http://specials.washingtonpost.com/timespace/world/">TimeSpace World</a> and <a href="http://specials.washingtonpost.com/timespace/inauguration/">TimeSpace Inaguration</a>.</p>

<h2>How They Did It</h2>

<p>The team responsible for TimeSpace are known as the "web ninjas" at the Post: editor of innovations Steven King, developer Dan Berko, interface developer Jesse Foltz, and designer Chris Buddie.</p>

<p>TimeSpace started out as a tracking tool for the candidates during the recent presidential election. As the project evolved, pulling in all election-related media, they changed direction and built the framework.</p>

<p>"I had the idea to develop a map and dated timeline that traced the candidates across the country during the final weeks of the presidential campaign and on election day. Those first sketches are far from what we have today," King said. "That does much more than just trace a few people around the country; now we can trace and plot news anywhere in the world."</p>

<p>TimeSpace is built in Flash, using a special cluster technology that Foltz adjusted to keep the content from overlapping too much. Buddie helped the team fine-tune the user interface.</p>

<img alt="" img class=caption src="http://www.pbs.org/mediashift/timespace%20grab.jpg" width="350" height="225" title="TimeSpace Inauguration"/></form>

<p>The content is pulled in largely through <span class="caps">RSS </span>feeds. Each item is parsed to extract relevant fields and geocoded using Google's <span class="caps">API.</span> This simple process means that "a new version can be up in a few hours, once they've identified the necessary feeds," said Berko.</p>

<p>Of course, each version is a little different. TimeSpace World was upgraded with better time and location plotting, and sharable links to specific views inside of TimeSpace and an embeddable widget.</p>

<p>King wrote about the Inauguration version on <a href="http://cujosbyte.com/?p=105">his blog</a>:</p>

<blockquote><p>For the Inauguration version we strategically placed 35 photographers and videographers throughout the mall and the parade route in order to provide a complete experience to those who could not attend the historic event. In order to cover the city in this way we drafted a small army of multimedia journalists from the University of North Carolina. The students and Post photographers were equipped with Canon and/or Sony <span class="caps">HDV</span>ideo cameras, MacBooks or eeePC's (based on security size restrictions), <span class="caps">ATP</span> Photologger <span class="caps">GPS </span>units (not recommended), and Sprint <span class="caps">USB</span> Sierra Wireless  broadband <span class="caps">USB </span>cards (TimeSpace is sponsored by Sprint).</p></blockquote>

<p>Next on the list for a TimeSpace map is a history of the television show, "Lost." The team is excited about using the framework for something less serious.</p>

<h2>Screencast</h2>

<p>The web ninjas were kind enough to send me some drawings and screenshots of TimeSpace in development. You can see how the project evolved into what it is today.</p>

<p><object width="425" height="264"><param name="movie" value="http://www.youtube.com/v/-jALVBvoNf0&amp;hl=en&amp;fs=1&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-jALVBvoNf0&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="264"></embed></object></p>

<p><i>Please let me know of any innovative projects you are working on or have seen lately. It doesn't have to be from a major newspaper, it just has to be an innovative blend of journalism and technology. Please e-mail me at mtaylor[at]megantaylor[dot]org to submit a Spotlight recommendation.</i></p>]]>

</content>
</entry>

<entry>
<id>tag:www.pbs.org,2009:/mediashift//4.6240-comment:154124</id>
<thr:in-reply-to ref="tag:www.pbs.org,2009:/mediashift//4.6240" type="text/html" href="http://www.pbs.org/mediashift/2009/02/washington-posts-web-ninjas-build-map-timeline-combo047.html"/>
<link rel="alternate" type="text/html" href="http://www.pbs.org/mediashift/2009/02/washington-posts-web-ninjas-build-map-timeline-combo047.html#comment-154124" />
<title>Comment from mark van patten on 2009-02-16</title>
<author>
<name>mark van patten</name>
<uri>http://markvanpatten.com</uri>
</author>
<content type="html" xml:lang="en" xml:base="http://markvanpatten.com">
Cool. What&apos;s the point? Shades of Rob Curley!
</content>
<published>2009-02-17T02:17:43Z</published>
</entry>

<entry>
<id>tag:www.pbs.org,2009:/mediashift//4.6240-comment:154274</id>
<thr:in-reply-to ref="tag:www.pbs.org,2009:/mediashift//4.6240" type="text/html" href="http://www.pbs.org/mediashift/2009/02/washington-posts-web-ninjas-build-map-timeline-combo047.html"/>
<link rel="alternate" type="text/html" href="http://www.pbs.org/mediashift/2009/02/washington-posts-web-ninjas-build-map-timeline-combo047.html#comment-154274" />
<title>Comment from Angst on 2009-03-05</title>
<author>
<name>Angst</name>
<uri></uri>
</author>
<content type="html" xml:lang="en" xml:base="">
meh, i&apos;ll give you a web ninja..
</content>
<published>2009-03-05T14:09:41Z</published>
</entry>

</feed> 