Storytellingtools 2014

Storytelling toolsTools that help journalists tell the story

Buffy

And

rew

s

Google maps• Interactive maps• Need a Google account to make a Google map• Many uses (breaking news to plotting campus tour)

Buffy

And

rew

s

Google maps: Breaking news

Buffy

And

rew

s

Google maps: UGC content• Christmas lights• Vacation with YDR• Where soldiers are serving

Buffy

And

rew

s

Google maps: Step 1• Go to www.maps.google.com• Sign in to your account at the top right of the page

Buffy

And

rew

s

Google maps: Step 2• Once signed in, screen will show a map of the United States

with a search bar at the top.

Buffy

And

rew

s

Google maps: Step 3• Type in the location of the map point. This will pinpoint your

location

Buffy

And

rew

s

Google maps: Step 4• Choose view ie. Earth view

Buffy

And

rew

s

Google maps: Step 5• Click on settings wheel on button right• Click on “share and embed map”

Buffy

And

rew

s

Google maps: Step 6• Click on “share and embed map”

Buffy

And

rew

s

Google maps: Step 7• Box displays url to copy (can also copy from address bar)• Can click the Short URL box to shorten the url

Buffy

And

rew

s

Google maps: Step 8• Choose map size (small, medium, large, custom size)• Click on “Embed Map” to get the embed code

Buffy

And

rew

s

Step 9 • Embed map on site and you’re done

Buffy

And

rew

s

To share on Google+ • Click on “share” button at upper right• Fill in description of map• Choose who you want to share map with (Public, circles, etc.)

Buffy

And

rew

s

StorymapJS• Mapping tool that helps tell stories

Buffy

And

rew

s

StorymapJS: Step 1• Go to website (storymap.nightlab.com)• Click on “Make a storymap now” green tab

Buffy

And

rew

s

StorymapJS: Step 2• . Click on “Map” icon

Buffy

And

rew

s

StorymapJS: Step 3• Title your map • Click “create”

Buffy

And

rew

s

StorymapJS: Step 4• The first slide is the overview slide. This is your title slide. So,

add your title.• Do NOT add actual locations on this slide. The program will

show all the points you plot on your map and adjusts the zoom so they can all be seen.

Buffy

And

rew

s

StorymapJS: Step 5• Click “Add slide” button

Buffy

And

rew

s

StorymapJS: Step 6• Add the address of what you want to plot on the map. For

example, the address of where a memorial is located. • You can move the pin if it’s not exactly where you want it.

Buffy

And

rew

s

StorymapJS: Step 7• Upload the image that goes with that particular slide. (You

should have saved all of your images to your desk top or flash drive in advance so they are ready for you to grab.)

• OR add image url

Buffy

And

rew

s

StorymapJS: Step 8• You can preview to see what it will look like by clicking the

preview button• Fill in the Headline and Description

Buffy

And

rew

s

StorymapJS: Step 9• This is what the image, headline and description will look like

Buffy

And

rew

s

StorymapJS: Step 10• Continue adding slides, uploading photos, adding headlines

and text. • When done, click on Share button in top right corner

Buffy

And

rew

s

StorymapJS: Step 11• When you hit share button, you will get this box• Share via link or embed on article page, blog, etc.

Buffy

And

rew

s

StorymapJS: Step 12• You can edit your story map after publishing. Once the edited

version is published, it will update automatically.

Buffy

And

rew

s

Dipity• Create and share digital timelines• Can customize look • Embeddable

Buffy

And

rew

s

Dipity: Step 1• Go to www.dipity.com • Sign up for free account

Buffy

And

rew

s

Dipity: Step 2• Click “Create a Timeline” in upper left corner

Buffy

And

rew

s

Dipity: Step 3• Fill in title and description• Upload photo (either from computer or image url)• Pick time zone, set permissions (select anyone)

Buffy

And

rew

s

Dipity: Step 4• Click “continue to add events”

Buffy

And

rew

s

Dipity: Step 5• Click “add event”• Fill in the fields • Upload image from

computer or via image url• Add relevant web links• Can also modify timeline by

using advanced settings• When finished, save the

vent and click “Add event” to repeat process.

Buffy

And

rew

s

Dipity: Step 6• When done adding events, click “continue” and fill out

window• Add tags, choice defaults and click “save and view timeline” • Embed timeline on website, blog or Facebook• Can view timeline in different formats: standard, Flipbook, list

or on the Map.

Buffy

And

rew

s

Dipity: Timeline

Buffy

And

rew

s

Dipity: Flipbook

Buffy

And

rew

s

Dipity: List

Buffy

And

rew

s

TimelineJS• Build rich, interactive embeddable timelines

Buffy

And

rew

s

TimelineJS: Steps • Go to website (http://timeline.knightlab.com)• Click on “Make a timeline now” green button • Site walks you through process step by step Create your spreadsheet Publish to web Copy and paste spreadsheet url into box (select size, etc from dropdown menu) Grab embed code and paste on site

Buffy

And

rew

s

TimelineJS: • Built-in support for Soundcloud, Twitter, Flickr, Google Maps,

YouTube, Vine, Wikipedia and more.

Buffy

And

rew

s

Soundcite• Add inline audio to text• Audio not off to side but plays right under the text• Uses url of your SoundCloud, MP3 or Ogg

Buffy

And

rew

s

Soundcite• Go to website (http://soundcite.knightlab.com)• Click on “Make a clip now” green button

Buffy

And

rew

s

Soundcite: Steps• Site walks you through process step by step

Buffy

And

rew

s

Easel.ly

Buffy

And

rew

s

Easel.ly• Simple drag-and-drop way to make beautiful and snazzy

infographics • Good if you aren’t Illustrator-savvy or are in a time crunch

Buffy

And

rew

s

Easel.ly: Step 1• Create account• Click “Start fresh” box in upper left

Buffy

And

rew

s

Easel.ly: Step 2• Click on “Vhemes” upper left corner

Buffy

And

rew

s

Easel.ly: Step 3• Drag a theme onto your canvas

Buffy

And

rew

s

Easel.ly: Step 4• Double click on the text to edit, click off to side when done

Buffy

And

rew

s

Easel.ly: Step 5• Use the toolbar at the top to modify graphic• Add objects, shapes, text• Change background

Buffy

And

rew

s

Easel.ly: Step 6• Can click on “grid” bottom at top to provide guidelines when

editing

Buffy

And

rew

s

Easel.ly: Step 7• Save button at the top• Click download button (low quality, high quality, PDF)

Buffy

And

rew

s

Easel.ly: Step 8• To save, return to home page• Can get web link and embed code from here

Buffy

And

rew

s

ThingLink• Makes images interactive• Engaging experience that

helps tell story• Point and click to add link

or media • Augment images to use as

explanatory tool• Adds layer of depth to

online reporting or storytelling

Buffy

And

rew

s

ThingLink: Step 1• Sign up for account/login• Click “create” button

Buffy

And

rew

s

ThingLink: Step 2• Choose option to upload the image/video you want to add

links to

Buffy

And

rew

s

ThingLink: Step 3• Upload image

Buffy

And

rew

s

ThingLink: Step 4• Title your image • Drag icon onto image to add videos, music, etc.

Buffy

And

rew

s

ThingLink: Step 5• Complete white box• Can choose icon

Buffy

And

rew

s

ThingLink: Step 6• This is how the information in white box translates

Buffy

And

rew

s

ThingLink: Step 7• When I save tag, just the

icon shows on the image• When you hover over the

icon, the clickable information box pops open

Buffy

And

rew

s

ThingLink: Step 8• Continue to add links. When done, click “save” button in lower

right

Buffy

And

rew

s

ThingLink: Step 9• Click share button on right to get share on social sites, get the

url or embed code

Buffy

And

rew

s

ThingLink: Ways to share• Url• Embed code• Pinterest• Google+• Tumblr• Edmondo• Email• Can also create app

for Facebook page

Buffy

And

rew

s

Piktochart• Infographic design app• Tons of themes, templates

Buffy

And

rew

s

Piktochart: Step 1• Create account• Select type of infographic you want to make

Buffy

And

rew

s

Piktochart: Step 2• Every “type” has tons of graphics to choose from • Hover over one you want and click “create”• Title your graphic the click “create”

Buffy

And

rew

s

Piktochart: Step 3• Click and edit text• Modify using toolbar on

the left

Buffy

And

rew

s

Piktochart: Step 4• When you are done, you can preview, download, publish and

share using toolbar in the upper right • Download as image or PDF

Buffy

And

rew

s

Now combine them• Now, combine ThingLink and Easel.ly or ThingLink and

Piktochart to create interactive infographics

Buffy

And

rew

s

Follow me

Buffy

And

rew

s

• Buffy’s World: http://www.yorkblog.com/buffy/

• Buffy’s Write Zone: http://buffyswritezone.blogspot.com/• Author website:

www.authorbuffyandrews.com• Twitter: https://twitter.com/Buffyandrews• Facebook: https://

www.facebook.com/buffy.andrews• Google+: https

://plus.google.com/u/0/102646936236475852585/posts

Follow me• Pinterest: https://pinterest.com/buffyandrews/• Tumblr: http://www.tumblr.com/blog/buffyandrews• Storify: http://storify.com/buffyandrews• Instagram: buffyandrews• Linkedin: http://www.linkedin.com/profile/view?id=40047960• RebelMouse: https://www.rebelmouse.com/Buffyandrews• Goodreads:

http://www.goodreads.com/user/show/7370309-buffy-andrews

Buffy

And

rew

s

Contact

Buffy AndrewsAssistant Managing EditorFeatures and Niche PubsSocial Media Coordinator

York Daily Record Email: [email protected]: 717-771-2052

Buffy

And

rew

s