DigitalNewsroom.net Header Image

Using video to tell a story

Online video comes in several varities: High-production television-like voiceover projects, first person story telling videos, and utilitarian (uncut) segments.

This Burning Man feature captures first-person narratives of the annual event, and Crisis in Darfur shows a packaged presentation from backpack journalist Travis Fox.

Podcasts

Podcasting involves capturing & editing audio and then formatting it for automated online delivery, usually via iTunes. Podcasts are built using an RSS feed, and iTunes uses the RSS code to grab the most recent podcast and downloads it to an iPod. Actually, the RSS just points to an audio mp3 file, which can reside on any server.

In its simplest form, the RSS for a podcasts looks like this:

<?xml version=”1.0″ encoding=”windows-1252″?>
<rss version=”2.0″>
<channel>
<title>DenverPostLyricsUndercover podcast</title>
<description>Archived Lyrics Undercover Podcasts from DenverPost.com</description>
<link>http://denverpost.com/podcasts</link>
<lastBuildDate>Fri 17 Nov 2006 15:03:04 -0700</lastBuildDate>
<pubDate>Fri 17 Nov 2006 15:02:52 -0700</pubDate>
<generator>FeedForAll v1.0 (1.0.2.0)</generator>

<item>
<title>Lyrics Undercover July 31 - </title>
<description>Coverville host Brian Ibbott looks behind the lyrics of “Ode to Billie Joe” by Bobbie Gentry.</description>
<link>http://www.soundography.com/audio/LU-011.mp3</link>
<enclosure url=”http://www.soundography.com/audio/LU-011.mp3″ length=”3644″ type=”mp3″></enclosure>
<pubDate>Mon 31 Jul 2006 14:00:50 -0700</pubDate>
</item>

</channel>
</rss>




The Wimpy Button maker is a good way to embed an audio piece on a web page. This button (and audio) is from Talk Back to Al, a Denver Post blog.




Tom Costello bio

Producing audio for online

Writing online news in a converged environment (radio-TV-print-online) requires general knowledge of broadcast vernacular and writing styles. In general, broadcast news limits news reports to less than three minutes. Reporters seldom talk more than 40 seconds, regardless of whether it’s a live shot or in-studio shot.

Online and broadcast share what I would describe as a distracted audience. Television viewers can easily click the remote, just as online readers have a million other options on their (online) information horizon.

Writing for online should follow three rules, according to SFSU professor Leonard Sellers:

  • Stories should be one computer screen long. No scrolling, written in chunks.
  • Depth is added by links to graphics, sidebars and multimedia. Links should not be contained in the text.
  • Logical navigation allows the elements to work together.

Taking print or online stories to broadcast (or audio podcasting) requires a strong visual or video element, but there are several tips to help in composing a script.

  • Rely on short, conversational sentences.
  • Begin with summary lede.
  • Active verbs!
  • Pronounciation of proper nouns is important.

Greg Dobbs, longtime network journalist who lives in Denver, says the best way to sound stupid is to pronounce a word the audience knows is wrong.

In building a news script (or a podcast script), Dobbs recommends spelling formal names phonetically, with the syllable meant to be accented in ALL CAPS. In a script, Kabul, Afghanistan would be kah-BOOL. Rockies slugger Clint Barmes would be BAR-mess, not Barmz.

Audio dictionaries are a big help, as are pronounciation guides. When in doubt, make a phone call and find out how the name is pronounced.


Audacity works best for editing audio. It’s free, and is easy to use. Instructions can be found here.

Both audio and video can be embedded using object embed codes. (Remember the object embed code you used, or at least saw, for embedding Flash slide shows?) For audio, a good product for embedding is Wimpy Button.

A good example of the Wimpy mp3 Player can be found at the Denver Post theater section. You can also simply link to audio and video files (uploaded to a server) using an anchor tag, and the browser will handle the rest.


Today’s secret numbers: 48000Hz 16bit and avoiding the “chipmunk effect.”

Maps and more

Online maps are sometimes used with stories to illustrate the location of the news event. The Rocky Mountain News uses map snippets with locator pinpoints, and the Denver Post uses an online map to locate homes lit with holiday lights and a Yahoo AJAX map in combination with Yahoo Pipes to pinpoint recent earthquakes.

Both Yahoo and Google provide mapping APIs which allow any web site or blog to embed an interactive map.

Although it’s not easy, simple maps can be embedded on blogger.com blogs using the Google maps API. Follow these steps to add a one-pinpoint map (similar to the Rocky’s map).

1) Go to the Google API area and sign up for an API key, which is an assigned number that allows you to use the service. Enter the URL of your blog. (i.e. myblog.blogspot.com). Copy the API code to a convenient place — you’ll use it in a second.

2) Second, you’ll need to geolocate the map’s center and our pinpointed location using an address geocoder. Get the latitude and longitude of The Armory Building at CU, located at 1511 University Avenue in Boulder. (Lat/Long are 40.010387, -105.273995). You can geolocate & pinpoint any other address if you’d like.

3) Next, copy your API into the code below labeled “your API key goes here.” (In other words, replace the “your API code goes here” with your API key. Items to replace/alter are in bold.) Be sure to eliminate extra spaces and make sure the equals sign (=) is on the left and the double quotes mark (”) is on the right of the API.

Also replace the Lat/Long numbers with the Lat/Long numbers for The Armory Building.

Paste the code with your own API key, and the new Lat/Long settings, into the <head> section of your blog template. (Found via the templates tab and edit HTML.)

Here’s the coding script (copy everything including the start script and end script tags):

<script src="http://maps.google.com/maps?file=api&v=2&key=your API key goes here"
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.99,-104.80), 12);

var point = new GLatLng(39.98,-104.80);
map.addOverlay(new GMarker(point));
}
}
</script>

4) Also in the head area of your blogger.com template, just after the (end) </head> tag, replace the <body> tag with:

<body onload="initialize()" onunload="GUnload()">

Save your template, then navigate to your blogger.com blog posting area.

5) Place this code in a post where you want the map to appear. The map size can be adjusted by altering the width: and height: tags.

<div id="map_canvas" style="width: 600px; height: 600px"></div>

6) That’s it — your map should now center on The Armory Building, with a pinpoint marker in the center.

Ledes in online stories

Good ledes

  • Use active verbs, fewer words.
  • Contain Who, What, When, Where, Why, How and So What?
  • Are a condensed version of the story.
  • Can be read aloud in one breath.

Types of ledes

  • News (or summary) — from the Daily Camera:

PORTLAND, Ore. - Upping the ante in a series of mysterious arsons across the West, a federal grand jury has charged 11 people with a decade-long conspiracy blamed for years on the shadowy Earth Liberation Front and the Animal Liberation Front.

Same story from the Denver Post and Rocky Mountain News

  • Ledes that need re-writing — from an Eastern Colorado newspaper:

Several residents of eastern El Paso County received a notice in the mail last week informing them of a hearing which will be held by commissioners Feb. 2 regarding the formation of a special district. Already approved by the county planning commission, the Eastern El Paso County Recreation District will be the topic of discussion along with the swimming pool the district would like to see built in Calhan.

For better ledes, tour The Lead Lab at www.newsu.org. Registration required.

Web 2.0

For Feb. 29, please submit a 150-200 500 word story, news item or blog posting to the Boulder edition of YourHub.com. Registration is required. We will review the Your Hub postings. Feel free to replicate/use one of your two weekly posts to your blogger.com blog, however you must also post to your blog about your experience with YourHub.


Michael Wesch, associate professor of cultural anthropology at Kansas State, explains HTML, XML, RSS and the evolution of Web 2.0


Web 2.0: Citizen journalism or field day for hacks?

Telling a story

Good audio slide shows tell a story. Audio helps set the mood, and background sound and narrative add a web-friendly dimension.

This Denver Post slide show on the Stock Show gave Kathryn Osler a venue to show more than the single image that appeared in print. The slide show was built in SoundSlides.

For Feb. 22, please complete a slide show (in the SlideShowPro Director Demo gallery or within your own gallery) consisting of 14-18 photos complete with cutlines. Audio is optional, but you can use something as simple as as royalty-free music. Go ahead and delete your sample and test albums in the SlideShowPro Director dashboard. Instructions for using SSP Director are here.

For Feb. 29, please submit a 150-200 500 word story, news item or blog posting to the Boulder edition of YourHub.com. Registration is required. We will review the Your Hub postings. Feel free to replicate/use one of your two weekly posts to your blogger.com blog, however you must also post to your blog about your experience with YourHub.


SlideShowPro and SoundSlides are Flash-based slideshow builders. SlideShowPro requires Macromedia Flash, and works with Macs. SoundSlides is a standalone program (works wthout the Flash program), and is PC and Mac compatible.

The web-friendly interface for SlideShowPro is SlideShowPro Director, and is what you used in class. It works via a web browser on Macs and PCs.


The embed code for your DigitalNewsroom.net gallery may require some tweaking to post on Blogger.com. Remember that every tag needs an opening and a closing (except for breaks and paragraphs). Some platforms (like WordPress) are very forgiving when it comes to HTML errors. Blogger.com is strict, so that means you’ll have to pay attention to the embed tags.

Slide shows

A great slide show with audio titled “Venus Rising” was produced by the New York Times about seven years ago using iMovie. This week we’ll build a simple slide show using SlideShowPro Director. (iMovie comes free with Macs. I’m not aware of an iMovie equivalent for PC’s. Let me know if you find one.)

And speaking of audio, we’ll discuss copyright laws relating to use of music in slide shows.

Also, please sign up for an account at YourHub. You will be posting a short news item on that site for the Citizen Journalism assignment.


Most blog interfaces, including blogger.com, will transform photos during upload for web presentation. As shown in class, the important elements for using Photoshop to manually transform a photo include:

  • checking Image–>Mode to make sure the image is RGB
  • using Image–>Adjustments–>Brightness/Contrast if needed
  • using Image–>Image Size to set the resolution to 72 pixels/inch.
  • using Image–>Image Size to adjust height and width. Remember that an image can be sized smaller in a web page, but not larger.

Basic HTML page

<html>

<head>

</head>

<body>

<h3> A header</h3>

<p>This tag starts the paragraph, usually a closing </p> is not needed.

<p>This is the next paragraph, and <b>text can be bold </b> and <strong> bold in the XHTML version <strong> <br><br>

<i>Text can be italic </i> and <em> italic in the XHTML version</em>

<p><a href=”http:/www.cnn.com”>This tag is an anchor tag and will link this sentence to CNN.com </a> <br><br>

<p>Followed by an image source reference to bring in a photo: <br><br>

<img src=”http://extras.mnginteractive.com/live/media/site36/2007/0204/20070204_122328_ice_200.jpg”>

<p> Followed by a basic table: <br><br>

<table width=”600″ border=”1″>
<tr><td width=”33%”>
<h1> One </h1> </td>

<td width=”33%”>
<h1> Two </h1> </td>

<td width=”33%”>
<h1> Three </h1> </td>

</tr>
</table>

</body>

</html>

Gives you a page that looks like this:

 
 

A header

This tag starts the paragraph, usually a closing </p> is not needed.

This is the next paragraph, and text can be bold and bold in the XHTML version

Text can be italic and italic in the XHTML version.

This tag is an anchor tag and will link this sentence to CNN.com

Followed by an image source reference to bring in a photo:

Followed by a basic table:

One

Two

Three

 
 
 
 


HTML for the World Wide Web by Elizabeth Castro is an excellent reference. She provides great online references, including an HTML tag reference and CSS properties.


Wired has a good intro to blog content and structure.

Newspapers in jeopardy?

According to the Newspaper Association of America, daily circulation peaked in 1984 and has fallen 13 percent (to 55 million copies) by 2003. Adjusted for inflation, advertising revenue stayed flat during the same period. This Pew Research Center study shows that even as print circulation declines, newspapers are least stemming the tide by grabbing a share of online news readership.

However, the study says that:

— the web serves mostly as a supplement to other sources rather than a primary source of news. Those who use the web for news still spend more time getting news from other sources than they do getting news online. In addition, web news consumers emphasize speed and convenience over detail.

— of the 23% who got news on the internet yesterday, only a minority visited newspaper websites. Instead, websites that include quick updates of major headlines, such as MSNBC, Yahoo, and CNN, dominate the web-news landscape.

So how is the newspaper business model changing? And what about the future of journalism?

For a PBS Frontline piece, Google CEO Eric Schmidt talks in a video about Google’s place in the new media landscape and Jeff Jarvis of BuzzMachine.com talks about the future of journalism.

And check Epic2015, a vision of the Internet in 2015 that includes the information monopoly “Googlezon.”


Blog guidelines:

  • your posts should pertain to journalism — ethics, technology, changing readership attitudes or trends, investigative reporting, or a topic of your choice.
  • include lots of links to other stories or blogs, but also provide some analysis of what you’ve discovered in researching your topic.
  • keep post and paragraphs in the post short; extra return makes blog easier to read.
  • if commenting on your workplace, be very, very careful. Nuff said.
  • do not use hotlinks to photographs (unless a fair use circumstance).
  • use AP style (nine vs. 9).


When does a blog become traditional media?