Infographics

Resources

Easel.ly
Piktochart

ThingLink and Video ThingLink

Ebola Interactive Guides

Ryder Cup 2014

Tornado Infographic

Office of Bryan Kelly

Video Interactives

Child Casualties from the War on Drugs

National Geographic Kingdom of the Forest

Infogr.am

iCharts

Timeline.js

Meograph

Readings

Infographics are more viral

Video

The Value of Visualization from Column Five on Vimeo.

Infographics as a Creative Assessment from Kathy Schrock on Vimeo.

 

Examples

 

Americans use the internet to abandon children adopted from overseas

Nelson Mandela’s extraordinary life

New York Times Graphics

Mike Bostock’s Work

Pinterest Graphical Information

WordPress Themes

Various Themes can be used to develop a Worpress Site. This semester we’ll be working with the Customizr Theme

1. Create a Post and a Page

Add Keywords

Practice Linking

Insert Media

Embed Content

Create and About Me Page

Copy the Post from your Multimedia Website

2.Sliders can be added to any page. They provide options to create slideshows of images.

Working with Sliders.

Download Sample Images

Crop at 1170×500

3. Creating a Menu

Create the Following Menu Structure with Submenus

About Me with a Contact and Resume Submenu

Writing

Multimedia with submenus to audio, video, social media and interactive

4. Adding Plugins

Install the Storify Plugin

Install the SoundSlides Plugin

Install Akismet (prevents spam)

5. Adding Social Media Icons

Install the Shareaholic Plugin

Photoshop Tutorials

The tutorials below will provide you with various Photoshop skills.  

1. Watch this video to learn how to crop images in Photoshop and place them in Dreamweaver.

JQuery Basics

Project 1: Building the  Before After Slider

Resources You’ll Need for This Project

Links to JQuery and JQuery UI hosted at Google

Link to the JQuery Library

JQuery Rain has lots of JQuery Projects

Downloads

Links to zip file containing project files/images.

Original before after Images for practice

Link to original tutorial.



Add this code inside your main div

Add this code in your head tag under the other scripts discussed in the video tutorial

Before/After Examples

WP Syria

Typhoon Haiyan

Hurricane Sandy


Project 2: Building the Flexslider Photo Slideshow

Resources You’ll Need for This Project

See the original Al Jazeera Project titled From Forest to Food Bandk here.

Go to the orginial source here at WooThemes.

Step 1-Link your files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

Step 4 – Customization

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values.


Thing Link

Examples:

East Los Angeles College Campus News mobile

Good example of an about page

Infographic on AN-94 Assault Rifle

Creating an interactive map

HTML and CSS Basics

Helpful Links

Text Editors

For PC use Notepad++

For Mac use TexWrangler

Color Selection Tools

Adobe Kuler is useful for matching colors

ColorPicker is useful for identifying Hexadecimal Codes

Embedding Content

Snapwidget for Instagram

Google Tools

Google Hosted Libraries– Go here to link to their jquery

Google Fonts can be used to support text on your site

Interactive Content

JQery Before/After

ThingLink Ides on Pintrest

Developing Visually Appealing Content

Design Ideas

Chucking Content

Writing for the Web: Chunk

Chunking content online

Face Your Manga (Create your own Avatar)

Social Media Icons

Align Images

1. Learning Basic HTML in Dreamweaver

2. Learning Basic CSS in Dreamweaver

3. Using Classes in CSS and Linking to Content

3. Working with Images

Zipped Image Files

Rendering Video, Posting to Youtube and Embedding on WordPress

Rendering your video in Adobe Premiere Elements

1. Once you have completed your video edit, you will need to render it in order to turn it into a video that can be uploaded to YouTube. To begin click on the Share tab in Adobe Premiere Elements and Select Personal Computer

2. Select the MPEG option

3. Under Presets, select HD720p30 (This is the largest file size that it will render to. You would choose 1080 if your video was shot in this size).

4. Under Save In, give your video a name (lowercase, no spaces)

5. Under Save In, navigate to the place you want the final video saved.

 

share

 

 

Uploading to YouTube

6. Now log in to Youtube (You can use your Gmail account)

7. Click on the Upload button on the top of the page.

8. Navigate to where your video has been save on your computer and upload the video.

upload

9. Once the video has been uploaded click on the Share option below the video and then click Embed.

 

embed

 

Embedding Youtube in WordPress

10. Copy this code into your WordPress Post. NOTE: You must copy the code into the post with the HTML tab selected.

html

11. Publish your post.

Embedding SoundSlides in WordPress

1. Install and Activate the SoundSlides Plugin found here

ss

 

 

 

 

 

 

 

 

 

 

 

2. Export your SoundSlides show as a Zip file.  Go to File-Export and Zip

3. Create a New Post. Add Appropriate title, tags, category, and other content.

addnewpost

 

 

 

 

 

 

 

 

4. Upload your zip file by clicking on the Add Media Link and then selecting Upload Files. Then drag the zip file onto the page to upload it.

addupload

 

 

 

 

 

 

 

 

 

5. After the file has uploaded, select the Insert Into Post option.

 

captured

 

 

 

 

 

 

 

 

 

 

 

6. You should have a piece of code inserted in your post that looks like the one below. Note that you might be in the "Text" tab view. You may need to switch to HTML view to add more content.

 

final

 

 

 

 

 

7. Once you've had success publish the content to your blog.

Video Journalism


Click here for instructions on how to render, upload and embed your final video


Free Software

VideoPad– Is an easy-to-use free video editor

Link to Sample Video Files

 

Tutorials

Adobe Premiere

iMovie

 Practice Files

Dad Rocks Files

Final Video

Examples

Personality Profile

Ryan Brady Pole Vaulter

Say It All in the Microphone

Traffic Jamming

High Flying

Tappan Zee Bridge

The Flag Business

Love Schtick

Event or Trend

Treating Pain

Extreme Couponers

Chincoteague Ponies

The Boxcar

Rescue Dolphins

Never off the Clock

Issue

Living without Water

Occupy Syracus Evacuation

Homegrown

Here, After

Student Samples

Erin Cox– Salvation Army

Austin Hunt– Student debt

Danae King- Energy Drinks

Asia Rapai– Monroe Restaurant

What not to do…

DSLR NoIdea

Sources for Free Music

Jamendo

Incomptech

Earcandee

Free Sound

Danosongs

Free Music Archive

Audio Slideshows

Link to SoundSlides Embed Utility

Link to SoundSlides Mp4 Converter Utility

Link to Download Audacity

Link to how to install the LAME Mp3 Codec

Link to Class Notes

Photography Composition Class Notes

Soundslides Class Lecture Notes

Link to Practice Photos, DC

Link to Tutorials

How to Create A Template

PhotoShop Adjustments

Sample Photo to Adjust in Flickr

Intro to Working with Adobe Premiere

Examples of Photo Slideshows without Sound

Glamorizing a football field by Thomas Schmeltz

March Nor-Easter

Muslim Brotherhod Trial

Examples of Photo Slideshows with Sound

God Made a Farmer

Related Article

From Iraq: A Troubled Romance- Script example

Serious about sugarcraft

We Shall Not Be Moved– Foreclosure story

IceMan

Atlanta Oboes

UofF Berlin Projects

The Pit

Guardian Rain Room

 


Getting Started with Audacity

 

Practice with Audacity 

Link to Sample Unedited Photos Files

Link to Sample Audio/Visual Files

Link to Whiskey on the Mississippi

Link to AudacityScript_ShorterVersion

Link to Sample Photo and Audio for Adobe Premiere Practice

Sample Workflow

Take 1: This is the first draft. As you can see there is still much work to be done. The purpose of this rough demo is simply to show you that you won’t have a clean script on your first read.

Link to First Draft of Script

Take 2. This is getting much tighter though there is still some revision to be done. The reading here and pace is too long. I need to cut the script back and tighten up the reading.

Take 3. This is the third take of the soundslides project. This is fairly close to being finished.


Resources

Music under Creative Commons Licenses

Creative Commons.Org First place to stop for many links to Creative Commons licensed music

WikimediaCommons has photos, sounds, and video licensed under the CC

DigMixster– Is usually the first place to go. It has a searchable database of CC music

Partners in Rhyme also provide royalty free music and a great place to go for sound effects

Jamendo has a nice selection of music

The Internet Archives– use this for instrumental music

AudioFarm search can be filtered with Creative Commons licensing

Incompetech is free and royalty free Audio Editing

Audacity is a free music editor that will export your audio as an Mp3 Keith Jenkins on Soundslides

Photography Under Creative Commons

Gage Skidmore

White House on Flickr

Mitt Romney’s Flickr Stream