We are fully aware of this and would like to reassure you that your files are safe, and that the server is expected to be back online the afternoon of Friday, February 19th.

At approximately 11:20 am on Thursday February 18th, the server became unresponsive, despite normal operation until that point. It was restarted, and made a full recovery.

However, later on, around 3:00 pm, the problem recurred and the server was brought offline so that the problems could be safely investigated and, more importantly, the data freshly backed up.

We are still investigating, which means pouring through hundreds of lines of log files, to be sure that we prevent this from happening again, and we want you to know that we are doing our best to get everything back to normal as quickly as possible.

We will keep you updated with further developments via twitter.com/cutlines.

Lab 8: Multimedia Bootcamp 2: Audio

Using mostly open-source software and services, we’ll be using this lab to explore the preparation and embedding of rich multimedia (ie not just photos). This will include slideshows, audio (or, for some programs, video).

Audacity

1. Open Audacity
2. Save project right away (use memory stick if possible so your project is mobile; save to Desktop so it is available anywhere you log on at City)
3. Find audio files you want to work with and put them on your desktop
4. Drag and drop your files into Audacity. For multiple tracks, click Project > New Audio Track, or just click and drag into the gray area of your project, underneath any existing tracks.
5. You’ll get a visual representation of your audio track in blue waveforms.
6. For basic editing, select the “I” function at top left. This allows for basic cutting and pasting just like text editing.

a. To delete portions of audio, simply select by clicking and dragging to highlight the bit you want to delete, and once selected, hit Backspace.
b. Zooming in: View > Zoom in ( Ctrl + 1) or View > Zoom out (Control + 3). Or, there are magnifying lens icons at upper right corner you can click on. Be sure to click on the track you are working on.

7. The Time Shift Tool is a double-ended arrow that allows you to slide an entire piece of audio to the right or left, for when you are working with a multiple-track project.

8. To isolate tracks, click Mute to mute that one particular track, or click Solo to mute every other track.

9. To boost your audio, click Amplify > Boose
10. To level off your audio to make the audio consistent throughout, click Effect > Compressor > Then select whatever levels you want.
11. Effects > Normalize reduces peaks and equalizes the audio, proportionality.
12. Effects > Fade In fades into pieces of audio and Effects > Fade Out fades out. Effects > Cross Fade performs cross fades for segues between pieces of audio.

13. Exporting your final project:

a. File > Export as mP3

14. Exporting just one piece of audio:

a. Select the desired audio track by clicking and dragging over the whole track, then File > Export Selection as mP3

THE NAME OF YOUR FILE SHOULD BE AS SIMPLE AS POSSIBLE – AVOID APOSTROPHES AND SPACES

15. Incorporating the audio into your WordPress blog:

a. Open your FTP
b. Drag your mP3 into your Audio folder, inside your Portfolio folder
c. Create new WordPress post or go into existing post where you want to use the audio track.
d. In the post write [audio:FILENAME.mp3] where ‘FILENAME’ is the name of your file.
e. Hit ’save’.

Introduction:

Photoshop is installed on every computer used by journalism students under “Programs” and then “P” for Adobe Photoshop. Photoshop allows the user to crop, export, compress, caption and otherwise prepare photos, logos and other images for journalistic use online.

Activity: Editing in Photoshop for Journalism

Taking Photos from the Web for your WordPress blogs: legal implications and solutions for rapid photo searching

1. All images are considered copyrighted unless otherwise specified (alternatives are Public Domain, Creative Commons)

2. Copyrighted images cannot be used without written permission from its owner.

3. Getting permission would usually require crediting the original image in some way (photographer and also agency or news organization.

4. Some major sources to AVOID: Getty Images, AP, Maverick Photo Agency, major news organizations like New York Times, Guardian, etc.

5. Creative Commons: you keep ownership of your image, but here are things you can do without having to ask me. Creative Commons has four parameters, below.

A. Can it be used commercially?

B. Can derivative works be made (any modification of the image that involved more than resizing and/cropping)?

1.Example of derivative work

C. Do you need to attribute the original producer?

D. Does the work you create need to be licensed in the same way in which the original image was licensed?

Techniques:

Basic Export:

1. Open Photoshop

2. File > Open

3. Select photo of choice. Photo appears in window.

4. Click “Window” then click “Info” (or Control A): tells me the size of the photo (This information is in top right corner)

5. Want to optimize photo for web. Generally, stick to 320 pixels by 240 pixels

6. Image > Image Size > Width and Height > Click OK

7. Save For Web & Devices

8. For photos, always save as JPG (graphics are GIF or PNG)

To highlight a specific piece of an image:

1. Choose Marquee Tool (Select M or click on Marquee tool, which is the dotted line square shaped figure at top left)

2. Size of image you are selecting has to be equal to or more than the final size of the image you want.

3. Image > Crop

4. Same as steps 6 through 8 above

Thumbnails:

1. Typical thumbnail size is 100 x 100 or 70 x 50 (depends on the design of the theme)

2. Essentially follow same instructions from “Highlight a specific piece of an image” above

Other Editing Tools:

Image > Adjustments: then experiment with menu

1. For added color: Image > Adjustments > Hue/Saturation

2. Brightness: Image > Adjustments > Brightness

3. Levels: Image Adjustments > Levels

To blur an image, like a child’s face or a serial killer:

1. Filter > Blur > Gaussian Blur (Smooth)

2. Filter > Pixelate > Mosaic (Squares)

Adding Text:

Select Text Tool, which is “T” half-way down tool menu

Select Smooth option from Anti Aliasing menu (top middle)

Select desired font and italics, etc

Measure the size of your banner (in case you want to make a new one)

1. View your website, including the entire banner, in a web browser

2. While holding down ’shift’, press the Print Screen button (third in from top right on keyboard)

3. This has copied the entire screen to the clipboard. In Photoshop, make a new document. (The size settings for the new document are always the size of whatever’s on the clipboard, so they should look like a screen resolution – 1024 x 768 or 1200 x 900 or 1600 x 1200)

4. Paste (ctrl + V)

5. Bring forward the info view (F8 or Window > Info)

6. Select the Marquee tool (second down from top or ‘M’ key)

7. Use the marquee tool to make a box around the banner image. The size of this box will be shown in the lower right of the info screen.

Combine two or more images in a banner using layer masks:

1. Make a new photoshop document with the correct size (see above)

2. Paste your images into it. Each one will be on a different “layer” and any parts of it that exceed the document’s dimensions will be obscured, but not cut off.

3. Move the images into position

NOW, EITHER

4. Use the Eraser tool (with the brush ‘hardness’ set to zero and the brush size at least 50-60) to erase the edges of the images – to affect each image you must have selected the layer that the image is on in the layers box (Window > Layers)

OR

4. For a more gentle gradient, add a layer mask to the image if you want a more gentle gradient from visible to invisible (Layer > Layer mask > reveal all) This creates a secondary greyscale image, mapped onto the same layer, which determines its opacity. White = opaque and black = transparent. 50% Grey = 50% transparent. Etc.

Add a transparent watermark and copyright info to a photo:

1. Open your image, go to your actions pallete and Your Actions Pallet is a small arrow icon in the top right column of small icons. Click on it.

2. A box pops up with two tabs; “History” and “Actions.” Click “Actions” tab and then click a small drop-down arrow in the top right corner of this box. Click “New Action.”

3. Give the action a name, such as ‘watermark’. And click “Record.”

4. Create a new layer (in the “History” and “Action” pop-up box, by clicking on the icon of a piece of paper with the corner folded back)

5. Choose the custom shape tool (left column menu, a paint splotch icon underneath the “T” text tool) then click on the copyright sign.

6. Apply emboss filter to your copyright sign ( filter> stylize>emboss).

7. Change your layer mode to hard light (under “Layers” in your pop-up box)

8. Now choose Horizontal Type Tool from your Tool Pallete, and write anything you want to say under your big copyright sign. Repeat step 6 and 7 to your text

Another online How-To for Watermarks is here.

Mobile Journalism Brief Photography Discussion:

1. Law of Thirds:

a. Refer to graphic on Marcus’ handout graphic
b. Helpful examples are here and here.
d. Why does this rule exist? It’s not a rule, a suggestion.

2. Instructions for Students’ WordPress blogs

a. Always attribute photos, no matter what

b. Captioning function in WordPress: Go to Media > Library, click “Edit” for the image you’ve uploaded, and fill in caption text field.

c. Put photo credit on the photo

Other photo editing software programs available:

Pixlr

PhotoFiltre

Gimp

The full instruction is after the jump:

Lab: Widgets: maps, interactivity, and tagging

What is tagging? A way of labeling your posts using common, key search terms to maximize their findability on the web; a way to describe an item (in this case a blog post) and allowing it to be found again by browsing or searching.

How Tagging works in Wordpress:

1. Log on to your Dashboard

2. Create a new post or click “Edit” on an existing post

3. In your right sidebar, the second item down says “Post Tags.” Type all relevant Tags into the available text field, separated by commas. Tags are not case-sensitive.

4. Click “Add,” and your tags will now be attached to your post.

5. If you want to add more tags or remove certain tags after you’ve published your post, simply click the X next to the word you want to delete.

There are also additional Tagging plugins you can download onto your blog using Core FTP. One example is here.

Think of Tags as page markers for your favorite pages in a book. Some more explanation on Tags can be found here.

Widgets:

What exactly is a Widget? A portable chunk of code that you can embed into your blog to serve a specific function.

Widgets defined in full here.
One example of using Widgets to tell stories is Rap Maps.

Internal Wordpress Widgets:

You have several widgets already available to you in the dashboard of your Wordpress blog. How do you find them?

1. In your left column of options, click the drop-down menu under “Appearance,” and click “Widgets.”

2. You’ll see a list of “Available Widgets.” Find one you want, left-click on it, and drag it into your sidebar (some of you, depending on which theme you are using, may have multiple sidebars).

3. Fill out any necessary information requested in the drop-down menu for the widget, then click Save.

4. To remove a widget, simply left-click and drag it back to the left side, out of your sidebar. You can also open up the widget in the sidebar and click “Delete.”

5. Note: former widgets disappear when you initially start dragging widgets into your sidebar. You have to replace the original ones if you want them there.

External Widgets: Not embedded in your blog sidebar, but in POSTS or PAGES

External widgets are simply widgets that you download from another location or source onto your desktop, and then upload into your blog using your Core FTP. How do you do this?

1. Find a widget that you want (Wordpress.org has many. Look here), such as this Polling widget.

2. Click “Download” and save the file to your desktop.

3. Open up your Core FTP

4. Left-click and drag the saved widget file into the “Plugins” folder inside of your “Portfolio” folder in your FTP.

5. Let the files upload. This will take a minute.

Another example of an external widget is Google Maps

1. Need a Google account or a Gmail. Get one now. Log on and stay logged on.

2. Open up Google Maps (you should automatically be signed in if you are logged on).

3. Click “My Maps” then click “Create new map”

4. Will ask you to give your new map a Title and Description. Do this.

5. Click Done and then click Edit.

6. Your editing tools are in the top left portion of your screen. Create as many pin points on your map as you like.

7. When you’re done, click “Link.” This will give you both a URL for linking people to your map, and an Embed code for posting your map either in a blog post or as a widget in your sidebar (Using the “Arbitrary Text” widget option.

More External Widgets:

1. Cover It Live: Home page (click on Demos)

2. Former City student, covering the G20 using all widgets
3. Free charts and graphics from Fusion Charts: Click on Demos

4. WidgetBox Slideshow (and others)

Interactivity:

Twitter: Sign up for Twitter if you haven’t already.

1. Activate your Twitter feed plug-in/widget if you haven’t already into your sidebar.

2. Select three hash tags that are suitable for your portfolio tweets. These should be a mix of common hash tags in your topic area (eg g20) and unique ones (eg g20ct) so you are able to join conversation streams and create your own conversation streams for others to join

3. Explanation of Hash Tags is here.

4. Start a list on your Twitter feed and add at least five people to it that are useful Twitter feeds in the content domain of your portfolio.

Twitter Lists

5. Listorious: Useful resource for lists to join

Additional Resources

Mashable: the Social Media Guide

1. Open Windows movie maker
2. Click Capture Video > Import video and navigate to the Flip
3. Find your clips in the DCIM > 100MOVIE folder
4. ctrl-click on all the clips you want to import and click “Import”
5. You can switch between storyboard and timeline view using the “show timeline/show storyboard” button.
6. Drag the clips onto the timeline or storyboard in the order you want. You can change the order later.
7. If you want, add transitions between the videos, by finding transitions under:
8. Edit Movie > View Video Transitions
9. and dragging them into the small boxes between the clips
10. When you are happy, click Finish Movie > Save to my Computer
11. Enter a file name and choose where to save the file (Save it to your desktop or a memory stick), then click Next
12. Under “Best quality for playback…” click “Show more choices”
13. Select “Other settings”, and then “Video for Broadband (340Kbps)”. Click “Next” again and the file will save.
14. If you don’t have a YouTube (or Vimeo) account, make one.
15. Upload the video file you saved a moment ago to one of these services

If possible, best to bring a memory stick and headphones to each lab. I’m seeing students frequently run out of space on their desktops to save video/audio files, and without headphones, it makes listening to your video and audio footage a tad difficult (i.e. impossible).

Also the list is just iPhone as that is the only smart phone OS I have used in any depth so if you are an Android, Blackberry, Windows or Symbian smart phone user please add your list as a comment. Don’t want to offer an iPhone bias but it is the only toolkit I can speak to in any depth. Would be great if this was as comprehensive as possible for any students who are just starting out with mobile reporting or haven’t experimented with it yet.

General

Evernote – Create ‘notebooks’ on any topic including voice memos, images and text. One really great feature is text in images is processed and accessible through search.

Awesome Note – Great way to keep your thoughts organised on the fly. Replaces the OS Notes app for me.

Quick Office – Don’t use it as often as I thought but great for editing excel or word documents on the move.

Reeder – My RSS app of choice

Tweetie 2 – My Twitter app of choice

Wordpress – update your blog from anywhere

PicPosterous – They will probably be coming out with a fuller mobile app in the near future. But Posterous in general is a great way to share your videos, audio, and images from the field in an instant. Very easy CMS working through email. Can also upload to your Wordpress site. We will be convering this in greater detail in Lab #9.

Skype – Lots of the functionality is lost by the ability to only run one app at a time so when Skype is on, nothing else is running. But still good for free telephony in the field.

Maps and Google – Use the Google digital app to access all their mobile apps including Earth. High literacy in Maps is a must to include GPS in content.

FTPontheGO – Best FTP program for editing files live on web servers.

Safari/Layar – Traditional and Augmented Reality web browser

London Tube Deluxe and London Bus – Be super efficient in your travel planning as you move around London. Tube Deluxe is incredibly useful as you can see exact schedules of tubes on all lines.

Video

Reel Director – Currently best-in-class video editing app

Slowmo – speed up or slow down frame rate with this basic video app

ReelMoments – Time-lapse photography app

Qik – Send a live video feed to your channel online or embed it in a webpage. Great for covering live events but still lots of bandwidth issues.

Storyboard Composer – Super powerful storyboarding app for video. Am using it for creative projects but would be interested to see if there is any application for broadcasters. Certainly documentary makers would benefit.

Audio

FiRE – Great audio recorder. Just shares through Soundcloud so not always a stand-alone solution. But best for capturing broadcast quality audio in the field.

AudioBoo – There are tons of sharing sites emerging for audio and this is just one of  them. Record audio through the app and upload to your account for immediate access online. Embed in webpage is easy.

Voice Memos – Still my most used audio app even though it is weak on features. Just offers the basic functionality to record audio and upoload/share.

Images

Snapture – Adds zoom to iPhone camera functionality.

ShakeitPhoto – Digital Polaroids

Autostitch – Creat panoramas. If you shoot in reasonable light it is very good at automatically stitching the images together.

PS Mobile – Basic Photoshop on your mobile.

TiltShiftGen – Bit quaint but buying a lens that does this for an SLR costs upwards of $1000. Particularly effective when photographing from perspective (high or low). Creates miniatures.

Hipstamatic – Same functionality as hipstamatic cameras. Great for magazine photography.

Accessing News

Al Jazeera – Live TV news and offers relatively unique functionality of working across network, not just WiFi. Served up by our friends at LiveStation.

Guardian/Telegraph/NY Times – These are the trio I use but this is obviously down to personal preference. But each of these offers strong usability.

NewsFuse UK – Just basically a bookmarking service but I use it all the time to see what is happening in the tabloids and BBC.

Tongue in cheek as that may seem, as somebody who works with a content management system or CMS almost every day, I have sincerely come to think of it this way. This article will help you to understand what it means journalistically as well as semantically, whilst explaining why the simple, and playfully tautological definition of it above is the most useful one.

This somewhat abstract definition is the easiest and most flexible way to think of content management, because this way we can allow the words ‘content’ and ‘management’ to do all the work separately before we put them together.

It turns out that people mean a lot of different things by these words, which is why they are so commonly misunderstood, even in professional web development circles.

Forget whatever else you’ve heard elsewhere. For our intents and purposes we need nice, liberal definitions. In fact, the idea of ‘content’ here becomes almost ludicrously abstracted.

‘Content’, as we ought to think of it online, is any idea or work that starts in somebody’s head, can be created, edited and stored digitally, and is distributed to others via the internet. Please read on if that sounded confusing.

Let me give you some examples of things that are content, and some corresponding ones that aren’t: The information you provide in your Facebook profile is content, whereas the actual functionality on Facebook that allows people to have profiles isn’t. The text of the posts on your blog if you have one (and you really ought to) is content, whereas the blog itself – the system that lets you do the blogging, for example WordPress – isn’t. The videos on YouTube and the music in iTunes Music Store are content, but YouTube and iTunes Music Store themselves are not. You name it, if you can find a way to convincingly publish it online, it’s ‘content’.

Sadly, some art forms have been left behind a bit, which is why we should all switch off our computers sometimes.

The ‘management’ part is far more prosaic. It is (or at least should be) entirely dictated by nature of the content. All large-scale distribution of any sort of content online requires some sort of content management system, simply to prevent the amount of work involved in the maintenance from being unrealistically huge. The ‘management’ part should never needlessly make any qualitative or quantitative prescription as to the nature of the content. Hopefully it’s just a system for allowing people to take full advantage of the mass-publishing opportunities afforded by the internet, without knowing any code.

Incidentally, this is why Dreamweaver is not a CMS. It does not publish. It creates documents – more in a class with Microsoft Word and Adobe Photoshop than with any CMS. It actually predates almost every major content management system in existence (and yet it doesn’t really seem to changed much since it was first introduced).

Returning to our topic, what are some familiar content management systems? With liberal definition of ‘content’, Facebook is arguably a content management system, albeit one that specialises in certain kinds of content. YouTube is one that specialises in others. So are Blogger and Twitter and Flickr and iTunes Music Store and LiveJournal and MySpace and Drupal and Smartest and on and on forever. Each is a tool that has a slightly different type of output and which elicits different creative, intellectual, semantic and/or aesthetic decisions from the content publisher, you.

Well, actually, sometimes the content publisher is you, and sometimes – for example in the case of iTunes Music Store – it isn’t. It’s a few drones in an office somewhere far, far away, distributing content to potentially millions of people all around the world.

In fact, as little as five years ago, most content management systems were privately owned tools, which only people who were paid to use them were allowed to touch. Whenever you hear somebody dreary refer to ‘web 2.0′, what they are actually referring to, most likely, is the shift towards ‘trusting’ the [internet using] general public to generate and publish content on their sites.

Wikipedia, Facebook, YouTube, and just about all of the most popular sites on the web these days (interestingly with the current exception of the ‘reputable’ news and information sources) are part of this trend: let the users do the ‘management’.

One definition of tags and how and why we use them.

What exactly are widgets? One definition is here. Widgets are comprised of HTML. Remember HTML?

One slideshow on how to use your internal WordPress widgets.

Cover It Live is one example of an external widget that you can download.

And, further proof of why to make your content as easy to find as possible.

Other domain registrars will vary, but carefully following these steps will ensure that your domain is properly set up.

Your Gandi username (called a “handle”) and password will be necessary, so if you haven’t got those, they will have been e-mailed to you from Gandi when you registered the domain.

6. Tell Marcus

Use the contact form on this website to notify Marcus, who will make a change to the server as a final step. This may take a few days as Marcus is very busy and has lots of non-city work as well as things at City.