Your final work, now published on the Hong Kong Stories website, has been receiving praise from people both within and beyond the JMSC. You should all be very proud. Many of you did not have any web experience before this class. Next time you are interviewing for a job – or seeking a promotion – you can proudly show prospective employers what you can do by pointing them to this website.

Have a wonderful summer and good luck in the future!

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