Intro to HTML/CSS

HTML and CSS are two of the primary programming languages web developers use to structure and stylize web pages. To develop the structure of a web page, we write HTML, and to add styles to our web page, we write CSS. For example, here are two web pages that use the exact same HTML, but different CSS:

Screen Shot 2016-04-04 at 1.01.57 PM

Screen Shot 2016-04-04 at 1.49.30 PM

You can find more examples like these on the CSS Zen Garden website.

Writing/Editing HTML
When working in WordPress, you can modify your the HTML in each of your posts by clicking the “Text” tab in the upper-right of your page + post windows. To do this, you’ll work with HTML tags. A full list of HTML tags can be found online here. Below are tags + attributes you’ll likely add/modify.

  • <h1></h1> (largest heading)
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6> (smallest heading)

Other common HTML tags are available to you directly through the “Visual” tab in WordPress, such as the following:

  • Bold Type: <b></b>
  • Italicized Type: <i></i>
  • Lists: <li></li>
  • Horizontal Lines: <hr>
  • Links: <a></a>
  • Paragraphs <p></p> (automatically inserts paragraphs with line breaks)

Lastly, pay attention to your line breaks. A soft line break will leave NO space between two lines of type. A hard line break will leave a space between two lines of type.

  • Hard line break: Hit ENTER when you enter a line/block of type
  • Soft line break: Hit SHIFT + ENTER when you enter a line/block of type

You can also edit your template’s HTML, but due to time constraints and the work involved we will not be doing that for this class.

Writing/Editing CSS
In order for a browser to process the instructions the developer creates to apply specific styles to a web page, they must follow specific rules with a specific format that the computer can process and understand. Below is the general syntax you will use to write your CSS:

Graphic from
Graphic from
  • Selector: The element you’d like to stylize.
  • Declaration: All of the style instructions for that element.
  • Property: The type of style you’d like to modify for that element.
  • Value: The exact value (such as color, size, width, height) you’d like to attach to that property.
  • You will notice three different types of selectors, one beginning with a # (pound) sign, one with a . (period), and one with no punctuation at all. That’s because there are three different types of selectors:
  • ID Selector: This is for a one-of-a-kind element on a web page such as #container (which contains all of your page’s content).
  • Class Selector: This is for a repeated element that you plan to use throughout your site, such as .header or .logo or .menu.
  • Universal Selector: This is for elements that the browser already understands, such as body (whole page), p (paragraph), h1-h6 (headings), a (link), etc.

The CSS Box Model
Consider each element on your web page a box. Whether it’s a container, an image, a headline or a link, every element on every web page is in an invisible box, which contains the following properties:

Graphic by
Graphic by

When stylizing elements on your page, you can apply a margin, border + padding to all or select sides of that element to increase or decrease space/organization on your page. An example would be:

.header { margin-top: 5px; padding:10px; border-bottom: 1px solid #000000;}

This above statement assumes that you have a box that you’ve named “header”. It then adds 5 pixels of space between the top of your header and the element above it, pushes the content inside of the header box in on each side by 10 pixels, and adds a 1 pixel solid black border to the bottom of the invisible box.

Editing CSS in WordPress
To edit the CSS for your site in WordPress, you’ll work between Chrome’s Developer Tools and either the Edit CSS panel or the Editor panel in WordPress. You first need to identify how the page you’re working with is styled, and then you’ll have to change or override those styles in WordPress. To get started:

  1. Open your website in Chrome
  2. Find the element you’d like to style (remember all HTML elements are like boxes stored inside of boxes)
  3. Control + click on that element
  4. Select “Inspect”*Your browser window should now be split into three sections. On the top or left (depending on how the Chrome Dev Tools are arranged), you will see your website, as it appears to your user. On the bottom or top right, you will see the HTML of your web page. On the bottom right, you will see the CSS of your web page. Your goal is to find the exact HTML element you’d like to format in the HTML and change its styles in the CSS. Every change you make using Dev Tools is specific to your browser, serving only as a test that you can see in your own browser window.
  5. Adjust the CSS for the element you’d like to modify
  6. Copy the entire declaration
  7. Log in to WordPress
  8. Go to Appearance –> Edit CSS
  9. Paste the code you edited in the Edit CSS window
  10. Click “Save Stylesheet”
  11. Open your web page in another browser to tab to see your changes*The Edit CSS panel creates a second stylesheet that overrides the styles for the elements you selected in the primary stylesheet. You can also go to Appearance –> Editor to edit the original styles, which results in a faster page load and cleaner code. However, when you’re starting out, it’s best to start with the Edit CSS panel so you don’t break the original code. 

Workshop – Web Development

Please take the remainder of today’s class to do the following:

  • Upload your most recent logo/header to your site
  • Finalize your navigation (number of menus, where they’ll be located, how they’ll be structured)
  • Choose a color palette using the Custom Design panel (Appearance –> Customize)
  • Download and install any plugins you’d like to add (i.e. Image Galleries, Carousel SlidersCustom Contact Forms, etc.)
  • Try customizing your CSS using Google Dev Tools:
    • Open your site URL in Chrome
    • Find the element on the page you’d like to customize
    • Control + click on that element and choose “Inspect”
    • Test that you can customize that element through the Chrome Developers Tools styles panel
    • Copy the code you edited/added from the Chrome Developers Tools styles panel
    • Log into WordPress
    • Go to your Dashboard
    • Select Appearance –> Edit CSS
    • Paste your CSS in the CSS Editor
    • Click “Save Stylesheet”

Theme Documentation

Each theme on WordPress is created by a different web developer. For that reason, each one has its own set of functions with its own instructions. If you’ve installed a theme and it looks nothing like the demo, you’ll need to find the theme documentation to help you get set up. For example, ColorMag is supposed to look like this:

Screen Shot 2016-04-05 at 7.15.03 AM

But when I install it, it looks like this:

Screen Shot 2016-04-05 at 7.19.49 AM

So I searched for “Colormag Documentation” and found their documentation page here, which provides step-by-step instructions on setting up the theme:

Screen Shot 2016-04-05 at 7.16.06 AM


Setting Up Menus

Screen Shot 2016-04-05 at 7.33.11 AM

Each theme comes with one or more “menu locations,” where you can add navigation to your website. To set up your first menu:

  1. Go to Appearance –> Menus
  2. Click “Manage Locations” to see how many menus your theme has (typically between 1-3)
  3. Click “Edit Menus”
  4. Click “Create a new menu”
  5. Name your menu
  6. Using your options on the left, i.e. posts, projects, custom links, categories, project types and project tags, select the items you’d like to add to your menu

    *For example, you can upload all of your content as posts and create categories for each of your menu items, i.e. “Food,” “Drink,” “Music,” “Outdoor Entertainment,” and add each of those categories to your menu to filter the posts to just that category on that page. 

  7. Drag and drop your menu items in the order you’d like them to appear on the menu
  8. To add sub items, drag a menu item below and to the right of the “parent” item
  9. Click “Save Menu”
  10. Click “Manage Locations” and select the location for this menu
  11. Click “Save Changes”
  12. Open your website in a browser and preview your menu

Setting Featured Images

Screen Shot 2016-04-05 at 7.53.22 AM

Most themes come with Featured Images, which are images that appear with the post on the home page. They’re also often emphasized on the post’s page, too. To set a featured image:

  1. Click “Posts”
  2. Find the post you’d like to add a featured image to and click “Edit”
  3. Scroll down to “Featured Image”
  4. Click “Set Featured Image”
  5. Either upload an image or choose an image from your Media Library
  6. Click “Set Featured Image”
  7. Click “Update” to update your post
  8. Preview your post with the featured image
  9. Preview your home page with the featured image*If you like the way your featured image appears on the home page, but you don’t like how it looks on the actual post, we can modify your CSS to remove the featured image from the post itself. 

Installing Plugins

Screen Shot 2016-04-05 at 7.45.20 AM

Oftentimes the template you’ve selected doesn’t offer all the functionality you need, such as a content slider that displays featured content at the top of a page, or a calendar with events. Luckily, there are plenty of free plugins that likely offer what you’re looking for. You can find plugins through both Google and the WordPress Plugin Gallery. To find and install new plugins:

Using WordPress Plugin Gallery

  1. Open your WP Dashboard and select Plugins –> Add New –> Search Plugins –> i.e. “Image Slider”)
  2. Click “Install Now”
  3. Click “Activate Plugin”
  4. Read the instructions for that specific plugin to set it up on your site

Using Google

  1. Go to Google and use some general search terms for the plugin you’re looking for, i.e. “Image Slider Plugin WordPress”)
  2. Download the plugin to your computer
  3. Go to your WP Dashboard and select Plugins –> Add New –> Upload Plugin
  4. Upload the plugin you downloaded
  5. Click “Activate Plugin”
  6. Read the instructions for that specific plugin to set it up on your site

Once you’ve installed the plugin you’d like to use, find that plugin’s documentation page for instructions on how to set it up.

Using the Customization Panel

Screen Shot 2016-04-05 at 7.50.06 AM

Each theme has its own unique Customization Panel, where you can customize specific functions/styles for that theme. To work with the Customization Panel:

  1. Go to Appearance –> Customize
  2. Add your site title, logo, tagline, header, etc.
  3. Choose your colors
  4. Set up your widgets
  5. Add any additional functionality to your site that your theme allows

    *Please again refer to your theme’s documentation for detailed instructions on how to customize your theme.

Assignment – Multimedia Experience

Students must work with their Beat Reporting Team to develop a collaborative multimedia experience that includes any blend of the following components:

  • Photos (7+ photos)
  • Audio (2+ minutes)
  • Video (2+ minutes)
  • Data visualization (3+ sections)
  • Text (500+ words)

The final project must include:

  • 1+ of the above components per student

This project must be ready to present at the beginning of class on the day it is due (4/21). Click here to download the assignment sheet.


Assignment – Multimedia Website

Students must work with their Beat Reporting Team to develop and maintain a multimedia website for their beat. The finished project will include:

  • A site logo/header
  • A main menu
  • Color palette
  • 10+ improvements made with CSS
  • All photo, audio, video, data and text content developed over the course of the semester
  • 3+ social media widgets with 15+ posts per site

This project must be submitted via email along with a document that includes the following information:

  • Name of beat
  • Names of reporters
  • Final site URL
  • One-paragraph description of CSS changes
  • Custom CSS pasted below the description

This project must be ready to present at the beginning of class on the day it is due (4/21). Click here to download the assignment sheet.

Workshop – Multimedia Experience + Website Design

For today’s class I’d like you to meet with your groups to work on the following:

  • Choosing a final topic for the Multimedia Experience project
  • Storyboarding your idea for the Multimedia Experience project, which should include:
    • What components you plan to use and why
    • In what order you will use these components to tell your story
    • How the user will interact with your story
  • Selecting a final theme for your website
  • Making a detailed list of changes you’d like to make to your website

Tools for capturing tables…

Now let’s say you find a table that has all of the data you need and you’d like to retain the table when copying the data and pasting it into a spreadsheet. If you simple copy the table and paste it, it will paste your data into a single column. However, there are plugins you can download for your browser that actually capture the table and retain its tabular format.

To use these tools:

  1. Download the plugin.
  2. Relaunch the browser to update the interface to it includes the plugin.
  3. Click on the plugin icon.
  4. Copy the table to your clipboard.
  5. Open your spreadsheet application (Excel, Sheets).
  6. Paste it in your spreadsheet.

My favorite, easy-to-use tool from NICAR

IFTTT (If This, Then That)

Screen Shot 2016-03-14 at 5.05.40 PM

If This, Then That is a free, web-based application that automates tasks connected to…basically everything. Users can create “recipes,” which are just conditions (hence the name being a programming reference), to receive an email every time @POTUS tweets, or automatically download and store every single photo Kim Kardashian posts to Instagram in a Google Drive database. Technology…it’s amazing!

Workshop – Data Visualization

Please take the remainder of today’s class to meet with your Beat Reporting Groups and discuss your Data Visualization project. When brainstorming ideas, consider:

Once you’ve narrowed your idea down, begin looking for your data. At this stage, collecting links to data is fine.

Assignment – Data Visualization

Each student must tell a data story in the form of an interactive visualization. Students must first decide on a topic, and then use their choice of application(s) (such as, Piktochart, Google Charts, Google Maps, Timeline, Storymap, or any other application/tool they find online etc.) to produce the story. The final project must include:

  • A headline
  • A lede introducing the story
  • 3+ sections of information
  • A footer with links to all original data

This project must be ready to present at the beginning of class on the day it is due (3/29). Click here to download the assignment sheet.

Finding, Cleaning + Designing Data

Not sure where to start on your Data Visualization project? Check out the resources below for finding, cleaning + designing data.

Finding Data

Open Data Philly
City of Philadelphia
City of Philadelphia Data Inventory
Philadelphia Police Crime Mapper

PA Commonwealth Enterprise Portal
PA Campaign Finance Reports
PA Uniform Crime Reporting

Bureau of Justice Statistics (BJS)
Bureau of Labor Statistics (BLS)
Bureau of Transportation Statistics
Center for Disease Control and Prevention (CDC)
Federal Election Commission (FEC)
FBI Uniform Crime Reporting
IRS Data Book
National Archive of Criminal Justice Data (NACJD)
National Center for Education Statistics (NCES)
National Institute for Computer Assisted Reporting (NICAR)
Office of Juvenile Justice and Delinquency Program
US Census

The World Bank
United Nations (UN)
World Health Organization (WHO)

Independent Data Hubs
The Data Hub

Cleaning Data
Excel (best for large data sets with 10,000+ rows)
Google Sheets (best for small data sets, less than 10,000 rows, with opportunity to collaborate and directly connect with applications such as Timeline.JS, Storymap.JS and Google Charts)

Designing Data

Adobe Illustrator
Google Charts
Google Maps
Tableau Public

Fusion Tables


Important – Several announcements…


From March 10th-13th I’ll be in Denver for the annual 2016 NICAR Computer Assisted Reporting conference, surrounded by other data nerdshacks discussing/learning how journalists are using programming languages like JavaScript, Python + Ruby to find and tell stories. With that said, this obviously impacts you. Here’s how:

  • Class is cancelled on Thursday, March 10th
  • The Data Visualization project is now due on Tuesday, March 29th
  • The Written Story is now an extra credit project due on Tuesday, April 12th (20 points total)
  • My office hours on Thursday, March 10th and Friday, March 11th are canceled

I’ve since updated the syllabus to reflect both the change in due dates and the change in the total number of points for this course. Should you have any concerns regarding these adjustments, please send me an email.

Homework – Due March 8th

For our next class, you must post your final 2- to 5-minute Video Story project to your group’s website. Video stories can be told using any one of the following formats:

  • Stand-up (on camera)
  • Voiceover (off camera)
  • Sound portrait (neither seen nor heard)

The finished project must include:

  • A headline
  • A lede introducing the story
  • A title card (title of the story, not the TRT, etc.)
  • 3+ people inter viewed
  • Lower thirds text identifying each individual interviewed
  • 3+ pieces of b-roll

This project must be ready to present at the beginning of class.

Tutorial – Video Editing in Premiere

Screen Shot 2016-02-23 at 7.35.58 AM

For today’s tutorial, please first download the Premiere Video Practice folder, which you’ll also bring with you to Thursday’s class for a video editing workshop. Here is a step-by-step breakdown of the video editing process in Premiere for you to reference in your editing:

Setting up your project…

  1. Open Premiere.
  2. Click New Project.
  3. Name your project.
  4. Choose a location for your project.
  5. Set your scratch disks.
  6. Click OK.
  7. Go to the Main Menu.
  8. Select Window.
  9. Select Workspaces.
  10. Select Editing, or if Editing is already selected, choose Reset to Saved Layout.

Importing and organizing your media…

  1. First, plug in your camera/card reader and copy the entire folder from the card with all of your video files over to your own HD.
  2. Next, go to the Project Pane and select the Media Browser tab.
  3. Highlight the files you want to pull into Premiere and click Import.
  4. To switch between the icon and list views, hit Command + Page Up/Page Down on your keyboard.
  5. If you haven’t already, organize your files into separate Bins.

Creating sub-clips…
To better organize your story, you can create what are called “sub-clips” from your footage. To create a sub-clip, you mark in- and out-points and generate new clips from the content in between.

  1. Go to the Project Pane and double-click on the first piece of footage you’d like to use to create sub-clips for your story, such as one of your interviews.
  2. In the Source Monitor, press the Spacebar to play the clip you’d like to divide into smaller clips.
  3. Using the J (play backward), K (pause) and L (play forward) keys (J+K play backward slowly, K+L play forward slowly, J+J plays backward quickly, L+L plays forward quickly), select the point at which you’d like your first sub-clip to begin.
  4. Press I to mark the in-point.
  5. Press L to move forward, then K to pause at the point where you’d like to end your clip.
  6. Press O to mark the out-point for this clip.
  7. Press Option K to play from your in to out-point.
  8. Press CMD + U (command + the U key on your keyboard) to create a sub-clip from this selection.
  9. Name your sub-clip.
  10. Check the Restrict Trims to Subclip Boundaries box.
  11. Click OK.
  12. Repeat this process until you’ve created all of the sub-clips you want from your first interview, then move on to your next interview and create sub-clips from that.
  13. Create a Bin for your sub-clips and drag all of your sub-clips there to stay organized.
  14. Highlight all of your sub-clips and Control + Click to choose Modify à Audio Channels.
  15. From the Preset dropdown, choose Stereo.
  16. Click OK.

Performing insert edits…
Next you’ll want to add your sub-clips to the Timeline to build the underlying narrative for your video story. These clips, when combined, should serve as the foundation for your story.

  1. In the Project Pane, double-click on the first sub-clip you’d like to add to your Timeline to view it in the Source Monitor.
  2. Drag and drop your first sub-clip onto the Timeline to start a sequence.
  3. Go to your Project Pane and find the sequence that was created when you added your first sub-clip to the Timeline.
  4. Rename this “Rough Cut.”
  5. Move your sequence out of your sub-clips Bin.
  6. Go to the Timeline and press the Down Arrow key to move the play head to the end of the first sub-clip (the Up Arrow key will move it to the beginning of the last clip).
  7. Go to your Project Pane and double-click the next sub-clip.
  8. Press the Comma key to perform an Insert Edit.
  9. Repeat this process until you’ve added all your primary footage to the Timeline (all A-roll should be on V1 and A1). 

Rearranging and extracting clips…
Once you have a rough cut of all your primary footage on your Timeline, you’ll likely want to rearrange and extract some of the clips from your Timeline.

  1. To rearrange the sequence of your clips on the Timeline, press the Command and Option keys, and click and drag your clip where you’d like it to go. This swaps clips instead of overwriting them.
  2. Once you’ve rearranged all of your clips to put them in sequence, you’ll likely want to cut any unwanted footage from your Timeline. To do this, go to the beginning of your Timeline and hit the Spacebar to play through your footage.
  3. For areas you’d like to cut, hit the M key to create a marker at the beginning of the desired cut, and the M key again at the end of the desired cut.
  4. Add markers for all of the cuts you would like to make in your story.
  5. Using the Shift + M keys (to go to the next marker) and the Command + Shift + M keys (to go to the previous marker), go to the first marker and hit the + key to zoom in.
  6. Hit the I key to create an in-point.
  7. Find the end of the desired cut and hit the O key to create an out-point.
  8. Hit the Apostrophe key to extract that selection.
  9. Repeat until your A-roll audio is clean and the foundation of your story is complete.

Adding b-roll with overwrite edits…
Next, you’ll want to add your B-roll footage to enhance your A-roll.

  1. Click and drag the V1 source icon (the V1 icon all the way on your left of your Timeline) up to V2 (where all your B-roll should go).
  2. On the Timeline, using the marker tool, play through your A-roll and mark where you’d like your B-roll clips to begin and end (to hide your cuts, supplement A-roll audio, etc.).
  3. Now go to your first marker and hit I to mark an in-point and O to mark an out-point.
  4. Go to your Project Pane and double-click on the clip you’d like to add on top of your A-roll footage.
  5. Hit the I key to mark an in-point.
  6. If you’d like to add just the Video from the B-roll, lock A1. If you’d like to add video and audio from the B-roll, move the A1 source icon down to A2 so the A1 audio is not overwritten.
  7. Hit the Period key to perform an Overwrite Edit.
  8. Repeat until you’ve added all of your B-roll to the Timeline.

Adding and editing audio…
Next you will likely add to and/or edit your audio.

  1. If you’d like to add music or nat sound to your story, go to the left of your Timeline and drag your A1 source down to A2 (B-roll audio should go on A2).
  2. In the Program Pane, double-click the audio you’d like to add.
  3. Mark in- and out-points.
  4. Hit the Period key to perform an Overwrite Edit to insert this audio on your Timeline.
  5. If you’d like to edit your audio, go to the Timeline and drag your A1 source icon to the channel you’d like to edit (A2).
  6. Click the M icon to mute your other audio.
  7. Mouse over the A1 or A2 toggle button (depending on the channel you are editing) and scroll up or down with your mouse to increase or decrease your audio track height.
  8. Click and drag the white line at the center of your L and R stereo channels up to increase the audio levels and down to decrease the audio levels.
  9. To add key frames to your audio, hit the P key to select the Pen tool.
  10. Add key frames along the white line, dragging each one up or down to increase or decrease the audio.
  11. Repeat until your audio levels are edited throughout your story.
  12. For more advanced edits, Control + Click on the clip you’d like to edit in the Timeline and select Edit Clip in Audition.
  13. Make your edits in Audition and hit Command + S to save.
  14. If Premiere doesn’t automatically update your audio, Control + Click on the audio clip on your Timeline and select Render and Replace.

Adding titles…
Last, you’ll want to add a title/titles to your Video Story.

  1. Select where you’d like to add a title on your Timeline and hit Command + T.
  2. Add your title and adjust the color, type and alignment.
  3. Add the title to your Timeline on V3.

Exporting your video for web…

  1. Select your Timeline.
  2. Hit Command + M to export your file.
  3. From the Format dropdown, choose H.264.
  4. From the Preset dropdown, choose Match Source – High bitrate.
  5. Give your video a name and choose a location for it to save.
  6. Check Export Video and Export Audio.
  7. On the left of the Export Box, go to Source Range and select Entire Sequence.
  8. Click Export (the remainder of settings will match your sequence).

For those looking for more extensive tutorials on Premiere, check out Premiere Pro CC Essential Training. Also, here is a link to Premiere’s keyboard shortcuts. You can also click here to download this as a handout.

Peer Critiques – Audio Slideshow

We’ll spend most of today’s class critiquing each of your Audio Slideshow projects. Please consider the following elements when offering feedback:

  • Audio
    • Does the story have a beginning, middle and end?
    • Are the audio levels acceptable? Are they in the -6DB to -12DB range?
    • Is the subject’s voice clear? Is there a separation between their voice and background sound?
  • Visuals
    • Were the photos carefully composed?
    • Did the story include a variety of angles? A variety of shot types?
    • Were the photos retouched to look their best?

Assignment – Video Story

Each student must profile a community, business or organization, or cover an event, in a 2- to 5-minute video story. Video stories can be told using any one of the following formats:

  • Stand-up (on camera)
  • Voiceover (off camera)
  • Sound portrait (neither seen nor heard)

Students must first decide on a community, business, organization or event to cover, and then develop a storyboard they plan to use to build their story. Students can edit the video in either Final Cut Pro or Premiere, and then upload the video to YouTube or Vimeo. The finished project must include:

  • A headline
  • A lede introducing the story
  • A title card (title of the story, not the TRT, etc.)
  • 3+ people inter viewed
  • Lower thirds text identifying each individual interviewed
  • 3+ pieces of b-roll

This project must be ready to present at the beginning of class on the day it is due (3/8). Click here to download the assignment sheet.

Tutorial – Audio Slideshows in Premiere

Today we’ll walk through creating an audio slideshow in Adobe Premiere. If you don’t have material to work with in today’s class, download this folder.

Before opening Premiere…

  1. Save your images at 1920x1080px
  2. Put all of your audio and images into a project folder

To set up your project…

  1. Open Premiere
  2. Go to the Main Menu –> File –> New –> Project
  3. Name your project
  4. Choose a location for your project (i.e. your external)
  5. Under the General tab, go to Video Rendering and Playback
  6. If an option, choose a playback that has OpenCLU (this improves quality of playback); otherwise select the default option
  7. Leave the other settings under the General tab at their default
  8. Click on the Scratch Disks tab
  9. If you’d like to set your scratch to your project folder, leave these settings the same (you can also save an auto save version separately, elsewhere on your HD)
  10. Click OK

To create a sequence…

  1. Control + click (right click) inside the Project Pane (panel on lower left) and select New Item –> Sequence
  2. Go to the Digital SLR folder and select DSLR 1080p30
  3. Name your sequence
  4. Click OK

To import and organize media…

  1. Control + click (right click) inside the Project Pane and select Import
  2. Find your content (audio and photos in this case) and click Import
  3. To organize your content into Bins, click the New Bin button (folder on lower right of Project Pane)
  4. Name your bin and drag all content for that bin inside

To preview media through the Source Monitor…

  1. In the Project Pane, double-click on the audio, video or image you’d like to preview in the Source Monitor
  2. To move around using your keyboard in the Source Monitor use the following shortcuts:
    • Space bar: Play/Pause
    • J: Move backward
    • K: Pause
    • L: Move forward
    • J+K: Move backward in slow motion
    • K+L: Move forward in slow motion
    • L twice: Doubles the speed
    • I: Insert in point
    • O: Insert out point
    • Option+K: Play from in point to outpoint
    • Command+U: Makes a sub clip (creates a clip of just what’s selected between in and out point and saves it to the Project Pane)

To add media to the Timeline…

  1. Find the audio clip/sub-clip you’d like to add to your timeline
  2. Drag your A1 audio (a-roll, i.e. interviews) to A1 on your Timeline
  3. If you have A2 audio (b-roll, i.e. nat sound), drag it to A2 on your timeline
  4. Once your audio is in place, lock your audio channels by clicking the lock icon each to next channel
  5. Now click and drag your first photo to V1 (a-roll) on the Timeline
  6. To adjust the size/position of your photo, go to the Program Monitor and double-click on the frame
  7. Adjust the wireframe to fill the frame, make the photo smaller, reposition it, etc.
  8. Adjust the duration of the clip by dragging the end of the clip left or right on your Timeline
  9. Repeat this process until all your media is laid out on your Timeline

To add/adjust/delete transitions…

  1. Go to your Timeline and highlight all of your photos (hold Shift + click/select all photos)
  2. Hit Command + D (automatically adds default transitions to all photos)
  3. To change the duration of the transition, double-click on the transition and adjust the duration
  4. To delete a transition, Control + click on the transition and hit the Delete key

*For other transitions go to the Project Pane –> Effects –> Video Transitions and drag the video transition you want to add to your clip

To add text…

  1. Go to the Main Menu –> Title –> New Title –> Default Still
  2. Choose the default settings to match your sequence and hit OK
  3. Use the Type tool to create a text box for your title
  4. Add the text for your title
  5. Adjust your font family, font size and text alignment
  6. Go to your Project Pane and drag your title onto the Timeline
  7. Highlight your title and hit Command + D to add the transitions to your title
  8. If you’d like to add lower thirds, repeat this process to add a new title, but add your title to V2 on top of the frame where you’d like your lower thirds to appear

To compress + export…

  1. Go to File –> Export
  2. In the Format box, choose H.264
  3. In the Preset box, choose Match Source – High bitrate
  4. Make sure Export Video and Export Audio are selected
  5. Under the Video tab, click Match Source under Basic Video Settings
  6. Under the Audio tab, select AAC for the Audio Format
  7. Select AAC for the Audio Codec
  8. Select 48000Hz for the Sample Rate
  9. Choose Stereo for Channels
  10. Choose High for Audio Quality
  11. Select 320 for the Bitrate
  12. Click Export

If you experience issues with the quality, try exporting it as a QT file, like this: 

  1. Go to File –> Export
  2. In the Format box, choose Quicktime
  3. Leave the Preset box alone
  4. Make sure Export Video and Export Audio are selected
  5. Under the Video tab, click Match Source under Basic Video Settings
  6. Under the Audio tab, choose AAC, 48000Hz, Stereo + 320kbps
  7. Click Export

*If you need more details, follow these compression guidelines  for Vimeo’s instructions or follow these compression guidelines  for YouTube. 

Tutorial – Audio Slideshows in FCP

Here are the steps for building your audio slideshow in Final Cut:

  1. Create a project folder that includes the following subfolders: audio, images, scratch
  2. Edit images in Lightroom, Photoshop, etc. + save all images at 1920x1080px to the images subfolder
  3. If editing audio in Audition or Audacity, export audio as either an .AIFF or .WAV file and put this file into your audio subfolder
  4. If editing audio in Final Cut, convert your .MP3 to either an .AIFF or .WAV using Audacity, Switch or an online audio converter like this one and put this file into your audio subfolder
  5. Open FCP and select File –> Close Project to start with a new project with new sequence settings
  6. Choose Final Cut Pro –> Easy Setup and set the project to HDV – 1080p30 FireWire Basic
  7. Choose Final Cut Pro –> System Settings and set your scratch disks to your scratch subfolder
  8. Go to File –> Save As and save this new project to your project folder
  9. Go to File –> Import –> Folder and import your images folder
  10. Go to File –> Import –> Folder and import your audio folder
  11. If your audio is already edited, drag your edited audio clip to the Timeline
  12. If your audio is not edited, adjust levels, mark in + out points + build your audio story from the Viewer to the Timeline
  13. Once your audio is edited, lock your audio on the Timeline
  14. Drag images to the Timeline, adjusting their duration to match the audio
  15. Once your images are laid out on the Timeline, control + click between images to add cross-dissolves, adjusting their duration as you go
  16. To add a title, click on the Generators icon, which is a film strip with an “A” inside placed on the bottom right of the Viewer
  17. Go to Text –> the type of text you’d like to add (text vs. lower thirds, etc.)
  18. Drag the text to V2  on your Timeline
  19. Double-click your text on your Timeline and go to the Viewer Window –> Controls tab to edit the text content
  20. Finally, when your project is ready for the web, go to File –> Export –> QuickTime Mov
  21. Select the box that says “Make Movie Self-Contained” and select Save to export your slideshow (*this will create a high-quality version that we can later save for web*)
  22. Save the .mov to your project folder and store your entire project folder either on an external HD or online either on Drive or Dropbox

Homework – Due February 16th

For Tuesday’s class you must post your final Audio Slideshow project to your group’s website. The finished project must include:

  • A headline
  • A lede introducing the story
  • A title card (title of the story, not the TRT, etc.)
  • 15+ photos edited in Adobe Lightroom
  • 2-3 minutes of audio
  • Final .mov combining the audio and photographs with transitions between each image

Please email me should you have any questions after class regarding this project.

Tutorial – Audio Editing in Audition

Adobe Audition is a professional audio editing application used by broadcast stations like NPR and WHYY to edit and mix their audio stories. For a quick overview of how Audition works, click here to download the practice file and follow these steps:

To edit a single waveform…

  1. Absolutely, 100% make a copy of your audio file on your hard drive so your editing does not affect the original audio file
  2. Open Adobe Audition
  3. Go to the Main Menu –> File –> Import –> File
  4. Import the copy of the audio file you’d like to work with
  5. In the Editor window, adjust the track height by pressing OPTION – to make the track height shorter and OPTION + to make the track height taller
  6. Adjust the track width by pressing + to make the track width wider and – to make the track height narrower
  7. Select the entire audio track by clicking inside the Editor Window and hitting COMMAND A to select all
  8. Go to Effects –> Amplitude and Compression –>Normalize
  9. Check the Normalize To box and type in the value where you’d like your audio to peak (i.e. -6DB)
  10. Check the Normalize All Channels Equally box and click Apply (this sets the peak of your audio to a target rate)
  11. To further adjust the audio levels, hit COMMAND A to select all and adjust the dial on the Adjust Amplitude panel floating on top of your Editor window
  12. To fade the audio in at the beginning of your story, click the Fade In button (square icon at the top left corner of your Editor window) and drag it down and to the right (in the Waveform view, this permanently changes your audio and cannot be adjusted)
  13. To fade the audio out, go to the end of your track, click the Fade Out button, and drag it down and to the left to fade the track out
  14. Once you are finished, export your file by going to the Main Menu –> File –> Export File
  15. Choose a Name and Location for your file
  16. Choose a Format for your file (if you plan to work with this in FCP choose a .WAV or .AIFF)
  17. Click OK

To edit multiple tracks…

  1. In the upper-left corner of the Audition interface, click the Multitrack button
  2. Name the session you are working on, choose a location for the project folder, then click OK
  3. Click on the Editor Window
  4. Control + Click inside Track 1 and select Insert –> Your Audio File
  5. Repeat these steps to place each of your audio clips on separate tracks
  6. Click and slide each of your tracks to the left or right to place them in the right spot
  7. To work on one track specifically, click the M in the Track window to mute your other tracks
  8. To fade your tracks in and out, go to the beginning of your track and click the Fade In/Out icon the upper left or upper right of your window, dragging it down and over to create the fade
  9. To adjust your fade, click on the Fade In/Out icon and adjust the placement
  10. To adjust the audio levels manually with keyframes,  go to the Volume overlay (yellow line under your track) and click on the Volume overlay to add keyframes
  11. Control + Click to select Spline Curves (hard vs. soft levels adjustment)
  12. Adjust your levels throughout the track
  13. Repeat with each of your tracks until you are happy with your audio mix
  14. To export your mix, go to the Main Menu –> File –> Export –> Multitrack Mixdown –> Entire Session
  15. Choose a Name, Location and Format for your File
  16. Click OK

If you’re looking for more tutorials on Audition, check out the Audition CC Essential Training on

Workshop – Audio Editing

Today you’ll work on editing audio in Audacity, FCP or Audition. You can edit your own audio interview or work with the practice file provided to you for the Audition tutorial. The audio requirements are as follows:

  • Tell a 2- to 3-minute story with a beginning, middle and end
  • Adjust audio levels (levels should fall within the -6dB to -12dB range)
  • Remove excessive “uhhs” and “umms,” while keeping the audio at a natural pace, i.e. do not cut so close from one clip to the next so the subject sounds like they aren’t breathing!!!

**Remember that FCP works best with AIFF or WAV files + has trouble with the MP3 format. You can convert your files to MP3s using Switch, Audacity, or an online converter like this one**

Before you leave class, export what you’ve worked on and email me the file.

Audio Slideshow Reporting Tips

Here are a few tips to help you in gathering your content for your audio slideshow.


  • Conduct your interview before taking photos. It will give you and your subject time to get comfortable with one another. It will also give you ideas for photos you can include in the story.
  • Find a quiet space to conduct the interview with limited background noise, foot traffic, etc.
  • Turn off fans, AC units, refrigerators, clocks, computers, cell phones, or anything else that may create a humming or buzzing that disrupts the audio.
  • Have your subject remove all jewelry, such as necklaces, rings, bracelets and long earrings.
  • Capture 60 seconds of “room tone” before starting the interview. This will help you make cuts and also help if you need to EQ the audio to lower background sound.
  • Wear headphones when recording and listen for any distracting background noises or rustling.
  • Brief your subject on the interview before it starts. Tell them the format and answer any questions they may have.
  • If possible, record in mono to minimize background noise.
  • Make sure your audio levels fall in the -6DB to -12DB range.
  • Ask your subject to introduce themselves at the very beginning of the interview. If you’re profiling an everyday person, just ask them to introduce themselves with their name and where they’re from. If you’re profiling someone in a very specific context, such as a teacher, they can introduce themselves as “So and so from ABC school/school district.”
  • Be conversational.
  • Never interrupt your subject.
  • Nod your head instead of saying “Yes” and “Mmhmm.”
  • Pause for a few seconds after your subject responds before moving on to the next question.


  • Ask the person to meet you in a visually rich environment, i.e. not a hallway in Annenberg or a conference room at their office.
  • Look for light. Unless you are trying to silhouette a subject or backlight them, your subject should always be facing the light source.
  • Gather a collection of wide, medium and tight shots, as you did for your Photo Slideshow project.
  • Shoot a variety of angles, including eye-level, high and low.
  • Seek to include the eight signature shot types: establishing, moving in, detail, sequence (how-to), environmental portrait, action, interaction + signature (the photo that says it all)

Inspiration – Audio Slideshows

Before Humans of New York, the NY Times did an audio slideshow project called One in 8 Million, profiling one New Yorker each week for a full year. While watching some of these stories, ask yourself:

  • What kind of story do the reporter and photographer tell? Consider the 20 Master Plots.
  • What kinds of questions did the reporter ask?
  • What kinds of photographs did the photographer include? Consider the “8 Key Shot Types”:


Workshop – Interview Questions

Now that you’ve selected a story idea, please take the next five minutes to make a list of as many questions as you can to ask your subject. At this stage, there is no such thing as a stupid question, so write all of your question ideas down. Once the time is up, add the following information to the top of your list:

  • Your subject (name + some context, i.e. “Michael Bay, Director”)
  • The type of story you are trying to tell (transformation, discovery, etc.)

Now, pass your list of questions to your right. With your group member’s list in front of you, take three minutes to write down as many questions as you can for that person’s subject. Repeat this process until you’ve added questions to each of your group member’s lists.

Workshop – Shot List

Next, focus on the kinds of photographs you plan to take while you are capturing your subject. Take the next five minutes to develop a list of photos you plan to take, i.e. “Wide establishing shot of building,” or “Detail shot of subject’s hands,” or “Medium shot of subject interacting with student,” etc. Again, there is no such thing at this stage as a bad idea for a photograph. Consider:

  • Shot type (wide, medium, tight, etc.)
  • Key shots (establishing, moving in, detail, sequence, environmental portrait, action, interaction + signature)
  • What’s happening in the photo

Once the five minutes is up, pass your list to the right and spend three minutes adding shots to each of your group members’ shot lists.

Peer Critiques – Photo Slideshow

We’ll spend most of today’s class critiquing each of your Photo Slideshow projects. Please consider the following elements when offering feedback:

  • Reporting
    • Question asked
    • Individuals selected for interviews
    • Locations selected
    • Quotes chosen
  • Photography
    • Composition
    • Angles
    • Shot types
    • Editing

Assignment – Audio Slideshow

Each student must produce a 2- to 3-minute audio slideshow profiling a single individual. Students must first choose a person to feature and then develop a list of questions and photographs they plan to use to tell the story. They will then combine the audio and images in either Final Cut Pro or Premiere, and upload that project to YouTube or Vimeo. The finished project must include:

  • A headline
  • A lede introducing the story
  • A title card (title of the story, not the TRT, etc.)
  • 15+ photos edited in Adobe Lightroom
  • 2-3 minutes of audio
  • Final .mov combining the audio and photographs with transitions between each image

This project must be ready to present at the beginning of class on the day it is due (2/16). Click here to download the assignment sheet.


20 Master Plots

When developing a list of story ideas, try first thinking about the kind of story you want to tell. According to Ronald Tobias, author of 20 Master Plots, all stories typically follow one of these basic 20 plots:

  • Quest
  • Adventure
  • Pursuit
  • Rescue
  • Escape
  • Revenge
  • The Riddle
  • Rivalry
  • Underdog
  • Temptation
  • Metamorphosis
  • Transformation
  • Maturation
  • Love
  • Forbidden Love
  • Sacrifice
  • Discovery
  • Wretched Excess
  • Ascension
  • Descension

Interested in learning more? Check out Tobias’ book, available for $15 through Amazon. You can also access an exclusive plot-by-plot checklist here.

Photo Editing Apps

As a reminder for this project, you can use any photo editing app you’d like to edit your photos. For those of you looking for a good photo editing app for your phone, I would recommend:

Snapseed for iOS  / Snapseed for Android

Screen Shot 2016-01-28 at 7.16.46 AM

Please remember that as journalists it is your responsibility to not drastically alter your photographs through filters and brushes. Regardless of the application you use to edit your photos, you should only use basic retouching techniques, such as cropping, rotating, exposure adjustment, color correction and light sharpening.

WordPress Sites

Below are the direct links to each of your WordPress sites. The public url links to your public site that your audience can use to access your content. The admin URL links to the page you use to log in and edit/post to your site. I’ve written your login credentials on the board and also put them in a document called “WordPress Login Credentials” on Blackboard to protect your site’s security. Once you click on the admin URL and log in, we’ll get a basic theme set up so you can start posting your projects.

5 Girls in Philly
public URL  /  admin URL

Art Alive
public URL  /  admin URL

City of Budgetly Love
public URL  /  admin URL

Liberty Hustle
public URL  /  admin URL

Live WELLphia
public URL  /  admin URL

Loud Philly
public URL  /  admin URL

Music + Munchies
public URL  /  admin URL

Philly Speaks
public URL  /  admin URL

Phresh Air Philly
public URL  /  admin URL

Profiling Philly
public URL  /  admin URL

Small Business Philly
public URL  /  admin URL

Please take a few moments to make sure you can log in to your group’s account through the admin URL.

How to Create a simple photo gallery + slideshow in WordPress

Once you’ve photographed your subjects and collected their basic information and quotes, you’ll edit the photos and put them into a gallery (which automatically generates a click-through slideshow) in WordPress. There are a variety of photo gallery plugins you can install, but for this assignment you are only required to generate a simple gallery and slideshow through the Media Library’s default gallery function.

To walk through the process of creating a gallery and slideshow, please first download this folder. Then, you can follow these steps:

  • Through the application you choose to edit your photos, save the final copies to a folder on your HD (recommended size: 2,000px on the longest side @ 72ppi)
  • In WordPress, create a new page or post (pages are static and not listed by date; posts are entries listed in reversed chronological order…posts are recommended for this assignment)
  • Write a headline
  • Add a byline
  • Write a lede
  • Click “Add Media”
  • Click “Create Gallery”
  • Click “Upload Files”
  • Select the files you saved to your folder
  • Click “Create a New Gallery”
  • In the “Link to” dropdown box, select “None”
  • Select a number of columns from the “Columns” dropdown
  • Select or deselect the “Random Order” box to either randomize or manually select the order of photos
  • Choose a size for your photos from the “Size” dropdown
  • Choose a type of gallery from the “Type” dropdown (either a thumbnail grid or slideshow…the grid also generates a slideshow and is more attractive + mobile-friendly)
  • Click on each photo, one by one, to add/adjust caption info as follows:
    • Remove default title from title box
    • Add a caption in the caption box
    • In the Alt Text box, add a description of the photo (this is to describe the photo to people who use screen readers)
  • Click “Update Gallery”
  • Click “Publish” to publish your post


How to Install + Activate a WP Theme

Once your domain (URL) + hosting (where your files are stored online) are connected, WordPress by default gives you the Twenty Sixteen theme. You can begin adding content at this point prior to installing the theme you plan to use for the site. However, if you’d like to get a jump start on installing your theme and working on your website, you can do the following:

If you found a theme through WordPress… 

  1. Go to your WordPress Dashboard
  2. Select Appearance –> Themes
  3. Click “Add New”
  4. Type the name of theme you selected in the Search Box
  5. Select “Install”
  6. Select “Activate”

If you found a theme online, designed by an outside developer…

  1. Find the theme you want to use online
  2. On the developer’s web page, click “Download”
  3. Go to your WordPress Dashboard
  4. Select Appearance –> Themes
  5. Click “Add New”
  6. Click “Choose File” and selected the downloaded theme
  7. Select “Install Now”
  8. Select “Activate”

Now that you have your theme installed, you’ll notice that it likely looks nothing like the theme demo you saw online. That’s because you have no content! While all themes are different and require different customization processes, you can begin to customize the following on your theme immediately:

  • Logo
  • Header
  • Widgets
  • Menus

For additional features, you’ll have to refer to your theme’s documentation.

Working with Plugins

Plugins are small pieces of software that you can download and install on your website to add to your theme’s functionality. To get you started, I installed the following plugins:

  • Akismet: Protects your site from spam
  • Code Embed: Allows you to add HTML + JavaScript to your content
  • EWWW Image Optimizer: Automatically optimizes your images as you upload them to your site
  • Formidable: Allows you to add forms to your site
  • Jetpack: Offers a variety of additional functionality like related posts, comments, stats, etc.

For additional functionality, you’ll want to look for plugins that offer the functionality you’re looking for. Here are instructions for installing, uploading, deactivating and deleting plugins:

To install a plugin …

  • In your WordPress Dashboard, click “Plugins”
  • Click “Add New”
  • Search for the plugin you’re looking for
  • Click “Install Now”
  • Click “Activate Plugin”

To upload a plugin …

  • In your WordPress Dashboard, click “Plugins”
  • Click “Add New”
  • Click “Upload Plugin”
  • Click “Choose File” to find your plugin
  • Click “Install Now”
  • Click “Activate Plugin”

To deactivate a plugin… 

  • In your WordPress Dashboard, click “Plugins”
  • Find the plugin you’d like to turn off and click “Deactivate”

To delete a plugin…

  • In your WordPress Dashboard, click “Plugins”
  • Find the plugin you’d like to delete and click “Deactivate”
  • Click “Delete”
  • Click “Yes, delete these files”

Assignment – Photo Slideshow

Each student must produce a man-on-the-street package of between 7-10 photos and quotes. Students must first decide on a single question to ask their subjects and then photograph and ask 7-10 people that question. The finished project must include:

  • A headline
  • A lede introducing the story
  • Photographs of between 7-10 individuals
  • Captions with each photograph that include each subject’s first name, last name, age, hometown/neighborhood and quote

 Please submit your final project as an online gallery/slideshow through your Beat Reporting Team’s website before class on 2/2.

Photographing People

Every photographer has their own style and approach to photographing people. Here are just a few very basic tips to get you started:

Be up-front with your subjects
If you decide to shoot a set of portraits as opposed to a set of candids, approach your subjects first, identify who you are, and tell them what you are doing and where their photos are going.

Engage your subjects
Make conversation before, during and after your shoot. Take photos of them not just when they are looking into the camera, but when they are looking away between shots or making their natural facial expressions.

Spend time with your subjects
The more time you spend with your subjects, the more comfortable they become. When you spend time, you build a relationship. When you build a relationship, that relationship shows in the photographs.

Collect a variety of shot types

  • Wide: Includes the subject’s full body and their surroundings
  • Medium: Includes the subject above the knees or waist
  • Tight: Includes the subject, shoulders + up


Country Store on Dirt Road by Dorothea Lange is licensed under CC BY 2.0.
Country Store on Dirt Road by Dorothea Lange is licensed under CC BY 2.0.


Ex-slave with a long memory is licensed under CC BY 2.0.
Ex-slave with a long memory by Dorothea Lange is licensed under CC BY 2.0.


Migratory Cotton Picker by Dorothea Lange is licensed under CC BY 2.0.
Migratory Cotton Picker by Dorothea Lange is licensed under CC BY 2.0.

Consider your angles

  • High: Takes power away from people
  • Low: Gives people power
  • Eye-level: Neither takes power away nor gives power to people


Sick Migrant Child by Dorothea Lange is licensed under CC BY 2.0.
Sick Migrant Child by Dorothea Lange is licensed under CC BY 2.0.


Grandfather and Grandson at Manzanar Relocation Center by Dorothea Lange is licensed under CC BY 2.0.


Migrant Mother by Dorothea Lange is licensed under CC BY 2.0.
Migrant Mother by Dorothea Lange is licensed under CC BY 2.0.

Zoom with your feet
When you use your lens or camera to zoom in on a photo, the photo loses quality. Always, always, always zoom with your feet when it’s possible.

How to Edit Photos in Lightroom

Screen Shot 2016-01-25 at 10.07.21 AMLightroom is an image editing software that brings all of the same photo editing functionality offered through the panels and menus of Adobe Bridge and Photoshop and centers them into a single screen to expedite your editing process. Today we’ll take a look at the photo editing process in Lightroom, focusing on:

  • Creating catalogues
  • Importing photos
  • Creating a rough cut through flagging + filtering
  • Working between color and B&W color modes
  • Correcting white balance
  • Adjusting exposure + contrast
  • Sharpening photos
  • Vignetting
  • Pasting edits to additional photos
  • Exporting photos for print + web

To get started, please download Lightroom Editing Practice. If the download takes too long, try this folder instead. Also, if you’d like a more in-depth look at Lightroom after you leave today’s class, check out Lynda’s Lightroom CC Essential Training.

How to Write Photo Captions

Screen Shot 2016-01-25 at 10.44.45 AM

Photo captions are a few lines of text used to explain published photographs. Given that they provide context for photographs, they are just as–if not more–important to the story as/than the photo itself. According to the Associated Press, captions should include:

  • Who is in the photo (if more than one subject, identify subjects from left to right)
  • What is going on in the photo (in the present tense)
  • The city and state where the photo was taken
  • Attribution for action not seen, such as “A gunman shot three people, police say”
  • The date, including the day of the week if the photo was shot in the last two weeks

According to the AP Stylebook, this is a standard length (two-sentence) AP caption:

Democratic presidential hopeful U.S. Sen. Barack Obama, D-Ill., delivers his policy on Iraq speech, Wednesday, Sept. 12, 2007, in Clinton, Iowa. Obama called for the immediate withdrawal of all U.S. combat brigades from Iraq, with the pullout being completed by the end of next year. (AP Photo/Charlie Neibergall).

Here’s an extended caption that appears on the AP website:

In this Wednesday, Feb. 6, 2013 photo, neighborhood resident Mohamed Alassane sifts through documents left behind at the Ministry of Finance’s Regional Audit Department, in Timbuktu, Mali, where a confidential letter was found from terror leader Abdelmalek Droukdel spelling out the terror network’s blueprint for conquering this desert nation. In the days before being rousted by a French assault force, the leader of al-Qaida¹s branch in Africa had warned fellow Islamic fighters to go softly on the people in order to make their takeover of northern Mali last. The more than 10-page letter, which the AP found in a building the Islamists occupied for nearly a year, is signed by Droukdel, the senior commander appointed by Osama bin Laden to run al-Qaida’s branch in Africa. (AP Photo/Rukmini Callimachi)

Extra Credit – Snow Story

Wagons_removing_snow_in_New_York_City,_1908I’m offering 10 extra credit points to anyone who covers this weekend’s snowstorm in the following ways:

Crowdsource a story about the storm using Storify, which allows you to create and publish stories from public social media posts. The story must have a beginning, middle and end, and include a headline, lede, transitions and media. Think snow pictures, videos, etc.

Tell a story about the storm in a 15- to 30-second video. The story must have some sort of visual narrative with a beginning, middle and end. Keep in mind that the max video time for Instagram is 15 seconds and 30 for Twitter.

Submit via email or twitter by 1/26 for credit.

Building Wireframes

Wireframe by Andy Bright is licensed under CC BY 2.0.

Now that you’ve determined the IA of your site through card sorting and have sketched out a final site map, it’s time to decide where each element will be placed on your home and secondary pages. As a group, as yourselves questions like:

  • Where will our logo go? How big will it be?
  • Will we have a logo, a full-width header, or both?
  • How many menus will we have? Where will it/they be located?
  • How many columns will each of our pages have?
  • Will we have a side bar? What will we display there?
  • What additional functionality would we like to add? A search bar? Calendar? Weather? Related stories? Full-screen video carousel? Photo gallery? Social media widgets?

While conceptualizing your site, here are a few usability tips/comments to keep in mind from @skrug, author of Don’t Make Me Think:

  • Usability means making sure something works well, and that a person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated.
  • When a user looks at your website, its functionality should be obvious.
  • Users don’t read pages, they scan them.
  • Don’t make people think.
  • Don’t waste people’s time.
  • Users still love the back button. The back button is the most-used feature of web browsers.
  • Users are creatures of habit. If they find something that works, they stick to it.
  • Users don’t have time for small talk. Cut straight to the chase.
  • People love the search box.
  • People form mental site maps. They mentally create relationships between pages.
  • People need an easy way to go home.

A few more facts to consider:

  • People look to the top left corner first
  • People scan the page in an F pattern
  • People scroll, but expect to find the most important content above the fold on the page
  • The left side of the page gets the most attention

To create your wireframes, you can either sketch out the layout on paper (quick, cheap + just as effective!), create it in Photoshop of Illustrator, or use a web-based app (with a free trial) like Balsamiq.

Finding + Choosing WordPress Themes

Once you’ve sketched the layout of your pages, you’ll focus on finding WordPress themes that offer some of the layout and/or functionality you’re looking for for your site. First, let’s clarify the differences between and

  • Hosted through for free
  • You can use free and premium themes, offered only through
  • You cannot upload plugins
  • WordPress automatically keeps your site updated
  • WordPress automatically provides SPAM protection
  • WordPress automatically optimizes images
  • You do not have access to your site’s code
  • If you upgrade your plan, you can create a custom style sheet that overrides your site’s existing styles (CSS)

  • Self-hosted, meaning you provide your own domain and hosting (I already purchased a class-wide domain and hosting for us through Bluehost)
  • You can use free (through WordPress), purchased (developers outside of WP) or custom (DIY from scratch) themes
  • You can upload any free (through WordPress or outside developers), paid (developers outside of WP) or custom (DIY from scratch) plugin that you’d like
  • You are responsible for keeping your site updated (themes, plugins will frequently release updated version)
  • You are responsible for providing SPAM protection
  • You are responsible for updating your own images
  • You have access to all of your site’s code, meaning you can change the existing code on your site

With that said, look to the following places to find WordPress themes:

Once you find two themes you think would work for your website, include both the name and screenshot for each in your proposal.

Conceptualizing a Logo Design

When conceptualizing your logo, please pay close attention to the following:

  • Color
  • Type
  • Symbols/Shapes

Remember that each of the above play an important role in telling your audience what it is your publication does. Also remember that this logo must work well on desktop, tablet and mobile devices across your website and social media accounts. For inspiration, I’d recommend checking out the following sites:


Screen Shot 2016-01-20 at 12.49.13 PM

Dribbble is a social media network for professional designers. 


Screen Shot 2016-01-20 at 12.50.36 PM

Behance is an online portfolio site/social network for creative professionals, like designers.


Screen Shot 2016-01-20 at 12.52.38 PM

Pinterest users also pin a ton of logo design inspiration.