Telling stories in multimedia

With journalism becoming ever more computer-oriented, it is no surprise that journalists are getting better and better at telling stories through mixed multimedia. This week's blog will analyze a few online multimedia journalism examples; although I don't have Ms. McAdams' set of standards to go by, I consider myself (as a journalism student, writer, copy editor and designer) a competent enough critic in the way of multimedia storytelling.

Journey to the Border -- The Washington Post
This interactive Flash slideshow with accompanying narrative was a pretty effective storytelling module. In an attractively-designed presentation, it offered four narrated slideshows to choose from -- each a different stage in an immigrant's journey from Guatemala to the United States. During each slideshow, the user could control the volume of the narration and view the slideshow's progress on a bar at the bottom of the page; however, the user is unable to use the bar to control the progress. While effective, the Washington Post presentation doesn't offer quite enough user control to be at the top echelon of multimedia journalism, although it is very well-done nonetheless. It does offer the ability to scroll through the pictures individually, but a glitch or design flaw renders them very dark -- too dark to be effective.


Nuclear Collision Course -- The New York Times
This New York Times presentation about the nuclear struggle between the United States and North Korea is, again, a flash module that consists of a picture slideshow that is narrated throughout. Unlike the Post's presentation, this one offers little user input, and does not feature multiple navigation choices from the start; it's a one-path journey. That said, the journalism that comprises the project is very good. There are excellent pictures and a thoughtful narrative by a Times op-ed writer. The design is very well-done and features captions for each photo and a progress bar at the bottom of the screen. This time, the bar is usable and the user can navigate through the presentation to his or her liking -- a big plus. The slideshow also contains some short video clips, which help to break up the all-photo barrage. At the end of the presentation, there is a screen that offers relevant links should the viewer choose to follow the subject further. Although this project isn't overly interactive, it is straightforward and interesting storytelling, which is at least part of the puzzle.

The Chicago Crime Database at Chicagocrime.org
This site, created by online journalist Adrian Holovaty, is not much like the two previous sites in terms of presentation. Instead of a straightforward, narrative presentation, Chicagocrime.org is a totally-interactive database of crimes that have taken place in the Chicago area since 2005. Despite the lack of photos, videos, or narrative, the site is extremely effective journalism. Holovaty tells stories through a navigable map of Chicago that shows all of the crimes that have taken place, fully sortable by place, type, severity, etc. Apart from being an interactive journalistic tool, Chicagocrime.org is also a very effective public service tool; Chicago citizens can use this journalism to keep current on crimes that have happened in the city and to make an effort to avoid dangerous parts of town. The site also features some traditional journalism in the form of police reporting. For every crime that has a police log entry, Holovaty has included the entry to accompany the corresponding dot on the map. In this sense, the user can read some traditional journalism to form a sense of "story" and setting behind each entry. While the site contains fewer sources of multimedia, it is extremely interactive and useful -- perhaps the best of all three sites critiqued.

Swap image, audio, jump menu

I'm going to make this blog entry short and sweet (hopefully) to make up for the hours and hours I spent trying to accomplish the aforementioned tasks.

I incorporated the swap image, embedded audio, and jump menu on my home page that can be accessed via the sidebar to the right. However, rather than do these functions in Dreamweaver, I hard-coded them by hand, which made it a little more difficult to get working properly.

Swap Image
The swap image I used on my page (the main picture) was accomplished a little differently than it would have been in Dreamweaver, but it works exactly the same way. When you choose swap image in Dreamweaver, the program incorporates a Javascript into your HTML code that does the trick. Instead of using Java, I accomplished the swap image with CSS. The main picture on my site is not an <img> tag in HTML, but a background image on a CSS div.

This is accomplished with the following code:

HTML: <div class="picture"></div>

CSS: .picture{ background: url(picture1.jpg) no-repeat;
width: x
height:y }

.picture:hover{ background: url(picture2.jpg) no-repeat;}

...so that the HTML refers to a class in CSS (.picture), which gets changed when the cursor touches it (.picture:hover). Thus, when a user hovers the cursor over the picture, the background property of that div changes -- to create a swap image effect.

Audio Clip
Embedding an audio file took just as long to figure out, but the solution seems much clearer. I'm still not sure that this is the best way to embed an audio file, but it looks clean enough, and -- most importantly -- gives the user a choice about whether or not to play the clip.

I embedded the sound clip with the following code:

HTML: <embed type="audio/wav" src="sound.wav" name="plugin" height="15" width="160">

...this way the sound clip is visible, sized to my specifications (15x30), and user-controlled.

Jump Menu
The jump menu was perhaps the easiest element to incorporate, because there was a relatively simple tutorial on EntheosWeb. I simply copied their Javascript into the head portion of my HTML code, and their HTML code into the body portion of the HTML. After I had incorporated the code, I just went in to change the links and titles to fit my page.



Phew... that was long, as usual, but now I'll know how to do all of those things next time I want to incorporate them in a site.