For more resources about Internet censorship, see the OpenNet Initiative. For more about privacy and security, see Frontline Defenders Guide to Digital Security and Privacy. (These and many more resources are available here.)

LAB: In the second half of class, you will do the following:

• Each Soundslide team will embed their project into the Joomla website.
• The class will create a Google Map showing the primary locations where each Soundslide story was done.
• We will put that map on the front page of the Hong Kong Stories website.

NOTE: Your HKStories project deadlines were put back by a week, due to your instructor’s medical leave. They are listed on the class wiki and on the calendar. Please let me know if you have any questions.

HOW TO EMBED SOUNDSLIDES INTO JOOMLA:

Embed Soundslides into HKStories (Joomla):
We will use an “iFrame” plugin. Click here to see what the final result looks like.
If the URL of the soundslides project is http://web.hku.hk/~rmack/publish_to_web/ , then you need to type the following code into your edit area: {iframe height="550" border="1" frameborder="1"}http://web.hku.hk/~rmack/publish_to_web{/iframe}
So in other words, {iframe height="550" border="1" frameborder="1"}URL{/iframe}

In particular we will:

• create a 2-D bar graph in Adobe Illustrator
• create a 2-D pie chart in Adobe Illustrator
• export the charts from Illustrator for use in our blogs
• create a Google map (without any programming!)
• embed the Google map in a test blog post

Here is the data for you to use in the chart class work.
The Tutorials section contains a number of helpful links on these topics.

These tutorials are a step-by-step guide to the work you will be doing in class:

Creating pie charts and bar graphs in Adobe Illustrator

Creating a Google map and embedding it in your blog

Here are some other online tutorials:

• Illustrator Charts – another step by step tutorial
• 3D Charts in Adobe Illustrator CS
• liquidicity » Pie Charts in Illustrator
• Bartelme Design: Creating Graphs Part 1
• Bartelme Design: Creating Graphs Part 2

An example of a mashup using Google maps and Craigslist – Housing Maps Click on a city, select property type and you can find property within your price range with a direct link to the www.craiglist.com listing. A good example of the power of Google maps!

Collaborative Map:

Here is the URL for collaborative map which can be embedded into the HKStories site. You all have access to this map and can add markers which link to your articles.

In class today we will familiarize ourselves with Joomla and learn how to do the basic things necessary to complete your HKStories final project. We have some custom tutorials tailored to the exact setup of our website. Be sure to review them if you need to reminding about how to do anything you learned in class today:

• Posting on HKStories
• Page continuations
• Uploading Photos
• Adding and Formatting Photos
• Audio in HKStories
• Smoothgallery

The following are extras which we will discuss more in future classes:

• Slide Shows
• Video in HKStories

(Note: In class when we create “practice” entries we will use lipsum.com to generate dummy text and use the photos and audio at hkstories.net/nmw/)

A more general reference on Joomla is the Joomla! User Manual Chapter 4 (PDF – generic instructions written by the Joomla developer community for posting content from the front-end)

Before you make further plans for your multiple-media online story for your final HKStories project any further be sure to review the following resources from Mindy McAdams at the University of Florida:

• Online Media Types
• Using Online Media Types
• Chunks: Writing for the Web

The Elements of Digital Storytelling breaks down the different kinds of elements used in online journalism. It also includes some very useful examples. This class doesn’t cover all the skills needed to create the advanced multimedia examples, but reviewing these examples helps you think about online storytelling, and how the approach differs from print or TV. Berkeley’s multimedia story planning tutorial focuses on how to plan a story for a stand-alone website, rather than the contributions you’ll be making on a group website, but many of the concepts in terms of mapping out your elements still apply.

• Use the Soundslides software program to create an audio-visual slideshow.
• FTP the completed Soundslides project onto hkstories.net, like this sample project.
• Embed the Soundslides project onto our blogs.

Instructions for embedding Soundslides into Uniblogs:
If (for example) the URL of the soundslides project is http://hkstories.net/YingChan_Vision/ , then create a new post in your Uniblog. Click on the flash or “f” icon. A window will open. Paste in this http://hkstories.net/YingChan_Vision//soundslider.swf (in otherwords URL plus //soundslider.swf) You will then be asked to enter dimensions. Enter 620 for width and 533 for height.

Useful Soundslides tutorials:

• Soundslides Slide Shows from the Knight Center
• Photopop Soundslides Tutorial
• Soundslides Tutorial Part 1 by Multimedia Shooter.
• Chaptered SS Tutorial by Multimedia Shooter.

Some good professional examples of Soundslides work (courtesy of Mindy McAdams):

• Guitar Lessons at the Central Area Senior Center: An 81-year-old Seattle woman loves taking guitar lessons. No narration, nice story, several interviews skillfully edited together.
• Cockfighting in Puerto Rico: Awesome photos, wonderful audio that puts you at the scene.
• Nutcracker: A fresh photojournalism grad tells us the story of a production of the Nutcracker ballet. She produced this while on an internship at The Gainesville (Fla.) Sun. Notice the variety in shots, scenes, lenses, etc. Notice too the excellent editing of the pictures to match the content of the audio. (Update, Jan. 29, 2008: Sorry, but the newspaper has apparently moved or removed this Soundslides. You can see the original photo story on the photographer’s bog here.)
• After the Riots: A Soundslides about the housing projects in Paris, by the British newspaper The Guardian. Exceptional storytelling and great use of sound.

JMSC student examples:

• Interview with candidate Ivy Chan
• Ada Wong discusses pet park

The New York Times multimedia page has great examples of audio slideshows.

You should study these as you prepare to put together your own Soundslides assignments.

Creating a web page with Dreamweaver

• the three layers of a well-constructed web page
• the language of a web browser – HTML tags and a recap of the simple page we created in week 1
• introduction to Dreamweaver – a tour of the interface
• our goal: a simple c.v. with an image
• using Dreamweaver to make our page

Uploading the web page and its assets using FTP

• what is FTP?
• how to use a browser for basic FTP
• FireFTP – a useful Firefox plugin
• uploading our new page and associated files
• viewing the finished page

NOTE:

All HKU students, in addition to having a HKU e-mail address, have a personal homepage. To access it type in http://www.hku.hk//YOUR_USER_NAME. Once you’ve confirmed where your homepage is, you can FTP your soundslides project onto it via Windows Explorer (only while on the HKU network) by following these instructions.

When not on the HKU network you can use the following guides to FTP material to a web page:

FTP using Internet Explorer 6
FTP using FireFTP for Firefox
Installing FireFTP for Firefox

Bonus : the magic of CSS

If time permits we will take a quick look at the power of CSS to give a web page visual appeal. Although it won’t be possible to present more than an overview, you will be able to see how a simple web page can be transformed with a few simple style rules.

• what is CSS and why is it important
• applying CSS to our web page
• comparison of the basic and styled pages
• the ultimate CSS playground – css Zen Garden examples, same HTML, different CSS

Today’s class gives only a very brief overview of Dreamweaver and how to create a simple website. If you’d like to learn more and get fancy with your web pages, you can try tutorials from Berkeley’s Knight Center and the J-Lab.

• Interview one of your classmates about the topic of his or her final project.
• Edit this into a 3-minute audio segment.
• Create a blog post that includes three things:
  1. the audio file;
  2. a picture of the classmate;
  3. a picture he or she took related to his/her topic;
  4. Maximum 200 words describing the classmate’s topic and motivations for doing the topic. The text should not be a repeat of what was said in the audio segment; it should help to introduce the person and draw our interest to listen to the audio interview.

Grading criteria:

• Quality of the audio recording, showing that you did your best to record clear sound as possible using available equipment;
• Quality of the audio editing: is the editing smooth and seamless without abrupt beginnings, endings or choppy edits in the middle
• Audio plays correctly after you have uploaded it onto your blog (make sure you replay it to check!)
• Photo is correctly cropped, resized, and formatted in the blog
• Explanatory text is coherent and of professional journalistic quality

Examples of similar assignments from previous semesters are here and here.

If you’re doing your assignment from home, you need to download Audacity and the Lame Encoder. Click here for instructions on downloading Audacity, and click here for instructions on downloading and installing the Lame Encoder.

I do not recommend waiting until the night before the assignment is due to download Audacity. Save yourself a lot of grief and get your software situation set up in advance so that you can get help from Ben during his weekday working hours.

If you don’t remember how to do anything discussed in class, remember that you can refer to several handy how-to guides for audio editing posted in this week’s class notes. You can also refer to the photoshop guides posted in the Week 5 class notes.

• Record clear sound on an MP3 player
• Transfer sound files from the MP3 player to the computer
• Use Audacity to edit your sound file
• Export your edited sound file as an MP3 file
• Upload the file to your blog.

So just to be clear, for your in-class work today, you need to do the following:

• Record a very brief interview with the classmate sitting next to you
• Transfer the sound file of that interview to your computer.
• Use Audacity to edit your file
• Export your file as an MP3 from Audacity onto your desktop
• Upload the file to your blog and publish it.

Important resources for your future assignments using audio:

• Super-Fast Guide to Audio Editing (PDF) and Editing Audio With Audacity (PDF) by Mindy McAdams.
• Audio section of the J-Learning website.
• “Chapter 7: Digital Audio and Podcasting” from Journalism 2.0
• Handy Audacity Tutorials

If there is time at the end of class, Joyce will do a show-and-tell about online storytelling. Here are some examples of projects she h as done in the past, primarily for the Holocaust Museum:

• Life After the Holocaust
• Silent Witness
• Reconciliation + Reconstruction
• Yearbook 2006

This assignment has three parts, all of which need to be documented and correctly linked in a blog post on your blog:

1. Create an account for yourself on Wikipedia. While logged in, add some new information to a page on Wikipedia that relates to one of your projects or Hong Kong’s environment in some way. It doesn’t have to be a lot of information: just a couple of new facts are fine, or you can correct or refine existing information. (If you really want to start a whole new Wikipedia entry about a subject that you think ought to be addressed but isn’t, you are welcome to do that too, but that is not required.) Then on your blog, link to the specific changes you made via the history pages. If somebody else makes changes to or deletes your contribution, please make note of this on your blog and link to any discussion that you might have with other Wikipedians about what happened. (If you have any questions or problems while doing this assignment be sure to contact Ben.) Then in a short paragraph please tell us what this experience taught you about Wikipedia. Has the experience of editing Wikipedia changed the way you view the credibility of its information?

2. In class we created a collaboration page for each soundslides team. Work with your teammates to devise a plan, schedule, and division of labor so that your project can be completed on time. On your blog, link to your team’s collaboration page and specifically to the contributions you made on it.

3. In class we created a resource page to collect online information related to your projects. Contribute at least two new links to it. On your blog, link to the history page or pages showing the contributions you made.

(Be sure that you are logged in under your own username when contributing to the class wiki.)

Part 1: We will use the class wiki to brainstorm about your Soundslides topics and final HKStories topics. We will also create a page for sharing online resources about the environment in Hong Kong. Your in-class work will be:

• to contribute your ideas to the class wiki
• help set up the collaboration page for your Soundslides project team

Part 2: Introduction to Wikipedia. How it works and how to contribute to it.

We’ll also watch this funny video about Wikipedia from Stephen Colbert.

Be sure to check out these references. These will be useful for your Week 5 assignment:

• Wikipedia Welcoming Committee
• Wikipedia tutorial
• Wikipedia cheatsheet

Some good articles about Wikipedia and debates about its credibility:

• Donna Shaw, Wikipedia in the Newsroom, American Journalism Review, February/March 2008.
• Stacy Schiff, Know it all: Can Wikipedia conquer expertise?, The New Yorker, July 31 2006.
• Noam Cohen, Courts Turn to Wikipedia, but Selectively, The New York Times, January 29, 2007.

By 10am on Monday Feb. 18th your assignment is to write a blog post suggesting at least one idea each for your two main projects this semester:

SOUNDSLIDES PROJECT: You will divide up in groups of three people to complete one audio-visual slideshow, telling a story through pictures and sound. (Examples of professional and student soundslides projects below.) You can use narration or interviews, or a combination – it’s up to your team to decide what works best for the subject. Think about what environmental stories in Hong Kong would best be told as a slideshow instead of as an article or some other way, and suggest one or two ideas on your blog, linking to the online sources for your ideas when appropriate. Your group will be decided on Feb.18th in part based on common or overlapping story interests expressed in your blog post.

FINAL “HONG KONG STORIES” REPORT: At the end of the semester you will complete an individual online report using multiple media about an environmental issue or phenomenon in Hong Kong. It will combine text, links, pictures and/or graphics and audio, as appropriate. The written text is not supposed to be too long, the point is to show that you know how to tell a story in an innovative way by combining visuals, text, and audio. Suggest one or two ideas that you would like to explore in this format, for further discussion on Feb. 18.

NOTE: This is not a final commitment and your ideas can change upon further discussion with classmates, and as collaboration and research continues. You are just being asked to propose ideas which we will work with in the Feb. 18th in-class brainstorming session.