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

Qr Code Experiment

Condition 1: Citizen Format + Links

Condition 2: Traditional Format + Links

Condition 3: Citizen Format + QR Code Scan

Condition 4: Traditional Format + QR Code Scan


Link to Web Page Containing Links to New Stories

Link to Survey Monkey questionnaire

Links to news stories

Story 1: College costs are increasing, study says

Story 2: Increases in textbooks costs lead students to opt out

Link to Team Schedule and Rooms

Link to Student Sign Up Form

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

Embedding Soundslides in WordPress and Hosting on Dropbox

Dropbox provides a public folder that makes it useful for hosting Soundslides projects. If you have the Dropbox syncing software installed on your personal computer, then placing the Soundslides project is as easy as simply drag and drop. Kelly Fincham has put together a nice tutorial that will walk you through the steps. However, if you don’t have access to the Dropbox software, you can still accomplish this using Dropbox’s web interface. If you’re like me, you often find yourself working on public computers that don’t allow you to install the software. Follow the steps below to upload your Soundslides content and embed it on WordPress.

publcifolder

Figure 1

Creating the Folders

1. You will need to go to www.dropbox.com and log in to your Dropbox account. Once you are there, click on the Public Folder (See Figure 1).

2.  Once in the folder, you are going to create several folders inside. For the first step, create a folder with your last name by clicking on the icon shown in Figure 2. You’ll see that I’ve created a folder called “Horning.” Inside this folder is where I will upload my Soundslides files. If you were putting several Soundslides projects in your drop box account, it would be a good idea to store them inside separate folders with different names.

folder

Figure 2

3. Once you’ve created the folder with your last name. Click on that folder so you are inside it. In here, you are going to create a second folder (Figures 3). It is VERY important that all of these folders are named EXACTLY as listed. That means they should be written using lowercase and use underscores. For this folder, name it “publish_to_web” (without the quotes).

publish

Figure 3

4. Now that you’ve created the folder named “publish_to_web,” click on that folder, and inside create three more folders. The folders will be named: 400_300, 600_650, and fullscreen (See Figure 4). These folders represent the folder structure that Soundslides creates when you export your files. For this next step we will go to the files that you exported in Soundslides.

publishinside

Figure 4

Uploading Content to Dropbox

5. In Soundslides, when you export your Soundslides project, it generates a folder called “publish_to_web.” You’ll want to locate this folder, and upload each of the files you see in Figure 5 to the right location in Dropbox. Note that inside each of the folders- “400_300,” “600_450,” and “fullscreen,” there are several files. You’ll need to upload all of these files to the right folder in Dropbox.

export

Figure 5

6. In Figure 6, you’ll see that I’ve uploaded all of the files that I generated from the Soundslides export to Dropbox.

dropboxupload

Figure 6

Embedding Soundslides Files in WordPress

7. Now right click on the index.html file (Figure 7) that you’ve uploaded and copy the public the link that appears.

link

Figure 7

8. Then copy that link into the Soundslides embed utility found here. This will give you an embed code. Make modifications to height here if needed. Then copy that embed code to the “Text/HTML” tab of your WordPress Site. The Soundslides file should now appear on your page.

embed

Figure 8

BFA Youth Shoot

This year’s annual Buckeye Firearms Youth Shoot saw record breaking numbers with twice as many youth and volunteers in attendance.

Ninety-four youth spent the second weekend in September at Dillon Sportsman’s Complex in Nashport, Ohio earning various qualifications and learning the basics of firearm safety. In addition to the youth, over 30 adult volunteers and families participated.

The first youth shoot began several years ago as a Boy Scout activity, but with the support of BFA, it has opened enrollment to anyone 15-years-old and younger.

“We have scouts out here camping, we have 4-H groups camping, and we have kids who have just been brought out here by their families,” said Aaron Kirgingburg, BFA volunteer and coordinator of the event.

Student’s came to the weekend event with a wide variety of shooting experiences. Some had never handled a firearm, while others who had attended in previous years had acquired more advanced shooting skills. To accommodate these experiences, a few new shooting options were added this year.

On Saturday everyone who attended spent some time in the classroom learning about the proper use and handling of firearms.  From there they moved to the ranges where they could shoot trap or rifle. Those students who had more advanced firearms skills were also able to practice shooting skeet and handguns.

Youth earned several awards including NRA Winchester Marksmanship shields and rockers, and shotgun and rifle Boy Scout merit badges. In addition, first, second and third place trophies were awarded to those who excelled in their various shooting disciplines.

Most who attended the event chose to camp out at the complex and take advantage of a warm bonfire and a chance to participate in nighttime trap and skeet shoots. Several families attended the event, and said that they wanted to use the opportunity to help their children become more comfortable around fire arms.

One attendee, Mande Perkins spent the weekend with her son Jarrod and said that as a gun owner, she felt it was important for her son learn all he could.

“My favorite was definitely watching how proud he was when he got everything in the bull’s eye,” Perkins said. “It’s got to be every mom’s dream seeing how proud her child is in achieving things like that.”

For another parent, Bill Rutter, the weekend was not only a chance to work with his son on shooting skills but an opportunity to teach his children to value the Second Amendment.

“I wanted to learn a little bit more about firearms safety with my son, and also I’m recently a concealed carry holder, and I believe in supporting the Second Amendment,” Rutter said.

.

Photos by Andrea Jolley

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