Category: Recommend Reading

Checkout the helpful App & Web Resource – Flipboard.com #learning #lscon

If you haven’t played with app Flipboard,  you should download the latest version for iOS or Android. It easily allows to select from hundreds of categories and web resources and then easily review them daily or weekly based on your schedule. The web version is also great when you are on your desktop station and want to check out the latest stories.

Great design inspiration in the layout, be sure to look at it on the phone and tablet in portrait and landscape to learn how it moves and reacts to the users preference. I use it several times a week.

 

041416-Flipboard-Sample

 

iPad Pro Landscape:

2 Flipboard Landscape Tiles

 

iPad Pro Portrait:

1-Flipboard-Portrait-Tiles

 

1b-Flipboard-Articles
1c-Flipboard-Story

iPhone:

FlipboardiPhoneStory

 

OLC Prototyping Speed Session

For this attending the Online Learning Conference on Tuesday 10.6, here’s a quick reference document to use back at your desk. This guide provides overview of 4 products. 060715s Prototyping Handout OnLineLearning

 

You can also download a presentation deck with additional materials at:

Delivering Video via HTML5 and Flash to reach all platforms with one video codec – how to make it work today #mlearncon

We’ve been using primarily Flash 7 and then 9 for delivery of video over the past few years. Flash was simply the simplest way to deliver content to the largest audience. One main factor, was the processor speed of the computer that was playing the content back. if older, slower cpus were the primary audience you wanted to use the older compression format, named Spark, in order to guarantee good quality playback.

 

Over the past 15 months we’ve transition to HTML5 based delivery with a flash fall back because of the mix learning audience we have now with various clients we use this to deliver to the entire mobile (smartphones) spectrum including iOS, Android and other flavors of OS. We have 2 magic ingredients:

 

1. The H264 Codec which is part of the mpeg4 codecs. We started using this in the past couple of years for quick compression and delivery to clients that needed to review content, primarily via QuickTime platform. When Flash 9 was introduced, it adopted the H264 codec and allowed us than to transition to delivery of content within Flash 9 or higher players and deliver amazing quality, at smaller sizes.

 

2. HTML5 there are several codecs (compression/decompression algorithms) that HTML5 supports based on the browser and OS. Apple uses H264 along with Microsoft and with the combination of Flash 9 we can now deliver content to all platforms without having to worry about compressing to multiple formats/platforms etc.

 

This has been great and has simplified our workflow from delivery of reviews to final content that is viewed by our client’s audiences. We’ve utilized JWPlayer from http://www.longtailvideo.com which offers the ability to first deliver via Flash and if not available it will automatically switch to HTML5. This has been the perfect system for us to integrate into our developments and offer hundreds of hours of content to thousands of users we support in various learning solutions.
Intro_to_compression_eldc2011_

 

 

 

Understanding the Video/Audio Compression Process – Tips
Within our workflow we divide video and audio into 4 main steps.

 

 

0intro_to_compression_eldc2011_

 

 

1. Video / Audio Assets
It all starts with capturing the content. Whether you are working with a internal group, your own team or a 3rd party it is always important to get the final assets on a hard drive at the highest quality possible. This will allow you to full control over compression and add the bonus of allowing you to recompress in the future when new technologies or codecs are introduced or optimized. Hard drives continue to drop in price, you can now get 3 terabytes for less than $150. Based on the quality size and compression you are using you can store 2-10 hours of content on the drive.

 

 

 

2. Compression

 

Here’s where the fun starts, it’s gotten easier and easier to compress content with the latest tools whether free or full-featured tools allow you to easily drag and drop a setting, click compress and squeeze your content to the optimal size.

 

First, when you are shooting your video, there are several formats and sizes that you can shoot at today. Most video cameras are shooting at HD which offers a 1920 x 1080 pixel size. This is a high-res format and you can notice every little detail of your content. Typically we shoot and capture at this quality and then size down the assets to make it easier to work with in editing.

 

What’s nice is that you can HD or SD quality from most digital cameras as well as smartphones today, so the content you are capturing looks amazing.

 

 

1intro_to_compression_eldc2011_

 

Next step is to select a size for compression. The following graphic shows some typical guidelines and sizes that we start with. Today, whether you use Flash, HTML5 or other format you can basically deliver in any size and format. So your video can be delivered 16×9, 4×3 or any other aspect ratio you can think of which gives you a lot of creative license.

 

2intro_to_compression_eldc2011_

 

Here’s one of my favorite deliverables, where you deliver video as a additional learning object to enhance the main content which in this sample is text based.

3intro_to_compression_eldc2011_
When capturing your video, it is typically shot at 29.97 frames per second (FPS). When you go to compression, we typically compress the frame rate to 10-15 fps. This allows for a much smaller file size and easier to deliver to your audience.

 

4intro_to_compression_eldc2011_
You also want to determine your key frames. Key frames are used when scrubbing  your video forward or back ward using the shuttle play bar. If you don’t have enough, you’ll notice inconsistent behavior and skipping while you move the shuttle bar. We use 4 times the frame rate to define the number of key frames. So if our frame rate is 15, our key frames would be 90 (4 x 15).

 

 

5intro_to_compression_eldc2011_
The other variable we want to focus on is the data rate of your video. We typically target 800 – 1200 kilobits per second. If you have good quality video this will give you great compression without noticeable loss in your video content.

 

We also get a bonus by using newer codecs, such as H264. They allow for a technique called pixel doubling, so if you compress your video to a size of 320×240, you can stretch or size the video 2x, in this example 640×480. This allows for smaller sizes but offering a larger format for delivery.

 

If your video is coming from a analog format, don’t forget to deinterlace your content to remove the banding effect.

 

 

Compressing Audio
The other important compression ingredient most of us forget, is compressing our audio. For audio you want to make sure you :

 

  • Down sample the audio from stereo to mono
  • Switch from 44khz to 22khz
  • Use the MP3 codec at 64 kbit/s for the bit rate.

 

This will give you a much smaller size and still have great quality content.

 

 

6intro_to_compression_eldc2011_

 

 

Hope that helps, I’ll jump into some additional details, tools and post some samples.

Learning & Social Media meets at weekly chats – Thursday nights 8.30pm – 10pm. @lrnchat

If you are free on Thursday nights from 8.30 – 10pm eastern, checkout the weekly chat where the moderator posts a question and everyone chimes in with input. The chats have taken place over the past 9 weeks and the logs are posted on their blog at: http://lrnchat.wordpress.com/. Great concept and way to learn from people in the field.

 Learn more at:
http://lrnchat.wordpress.com/about/

Pastedgraphic

Great Book: Designing for the Social Web by Joshua Porter

If you are looking to expand your knowledge on Social Media, check out this great book Designing for the Social Web. It discusses how social media has evolved over the past several years, what works and what doesn’t and how to best integrate into your web site whether for sales, marketing or training. It also discusses the evolution of Social Media with Amazon, MySpace and how the web has evolved. Also looks at the psychology of users and how they think during the business process. On Amazon at: http://bit.ly/RwrHL

Pastedgraphic

Stories your parents told you…

Remember that classic story that you parents told you everytime you complained, asked for something or misbehaved? Mine was always the “classic” myth about having to go to school everyday in the blizzard with a foot of snow, walking uphill both ways. 

Pastedgraphic

I was thinking about this recently while prepping for a Design session I presented at Training Magazine’s 2009 Conference. I came with the following stories that I will start to share with my little one:

Refdp_image_0

Creating a Drop Shadow for Text
When I started using Photoshop, we had to buy a special Wow book in order to follow 3 pages of steps which involved, creating your text, selecting the text with the magic wand, inverse selection,   creating an alpha channel, dropping the selection, reselecting the alpha channel, offset, applying the treatment and then the client would ask you to tweak it. I didn’t have access to the book while writing this so it may be a little off but I think the longer the better for the story.
0pastedgraphic

Today, you are lucky, in just about every program, you can just select a piece of text and click shadow.

1pastedgraphic

I didn’t get my first cellphone until I was in my mid-20’s. They didn’t really exist prior and it was expensive but I had to have it. Today all the kids have one. 

When we were growing up there was no web. 

We had to use a single button mouse to work with our computer, at least if you were a mac user during the first 15 years.

Lastly, the iPhone, the ultimate interface for interacting with content. More about this in a future post.