Category: Web Resource

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.

Apple’s Keynote is one of the best apps for wireframing + design sketches, get some templates now (also work in PPT) #mlearncon

If you have a Mac, iPad or iPhone with Keynote installed, here’s a great wireframe toolkit from http://KeyNoteKungFu.com. You can purchase them for $12 and get setup within minutes to start designing your next web or learning project. You can also use them in Powerpoint if you are stuck on a pc  😉

 

Keynotopia
I’ve been using for the last couple of weeks and love them. Buy the whole set for $39.
User_interface_design_librarie

 

Free Templates
Sketched Components, looks like you sketched everything. http://www.raizlabs.com/blog/294/wireframing-in-powerpoint
Screenshot1
Wireframes-stencil-overview

 

Learn more about Keynote:
iPhone / iPod Touch / iPad

 

Mac

HTML5 and CSS3 – great web sites and resources for keeping with latest information #mlearncon

New to HTML5, checkout these great sites and resources:

 

HTML5 Demos

Great examples of what is possible for interactivity, video and graphic layers.

 

Html5_demos_and_examples

 

 

CSS3

Checkout http://www.css3.info/ to keep up with the latest and greatest in CSS3 development. Amazing resources, tutorials and guides. 

Css3_

 

 

PastedGraphic-1.pdf

How current filters are effecting what we see in search engines and our data flows. Great TED talk by Eli Pariser. Everyone should watch.

TED talk by Eli Pariser: Beware online “filter bubbles”, something we all need to be aware of and think about how to address.

http://www.ted.com As web companies strive to tailor their services (including news and search results) to our personal tastes, there’s a dangerous unintended consequence: We get trapped in a “filter bubble” and don’t get exposed to information that could challenge or broaden our worldview. Eli Pariser argues powerfully that this will ultimately prove to be bad for us and bad for democracy. Read the online community Q&A with Eli (featuring 10 ways to turn off the filter bubble): http://on.ted.com/PariserQA

Watch my favorite closing preso at #DL10 on Getting Serious about Games & Learning by Richard Culatta

Highly recommend watching this video. Richard did an amazing job on style, pacing and content!

 

Watch his closing session

 

View the slides on Slideshare.net

 

Follow Richard on Twitter at http://twitter.com/#!/rec54

 

 

For a summary and links to other DevLearn happenings, check out the article at:

 

Pastedgraphic-1

 

For the Tweet summary, checkout:
http://summarizr.labs.eduserv.org.uk/?hashtag=dl10
Pastedgraphic-2

Adding/creating a site to raise funds just got a lot easier with http://www.gofundme.com

GOfundme.com is going into a public beta and it looks to be a great way to instantly setup a site to collect and raise funds for your event, dreams and causes. Check it out at http://www.gofundme.com/. The site charges $9 per month and does not take any additional fees per donation. The site utilizes the PayPal API for transactions. Learn more at: http://www.gofundme.com

Pastedgraphic-19

Download my presenations from eLearningDevCon 2009

Download copies of my presentations from elearningdevcon.com conference in Utah last week.

Follow me on http://twiiter.com/nickfloro

Design 2.0 in eLearning

Join us for this session discussing the latest technologies and tools to create the next generation of learning for your users. We’ll discuss Web 2.0 and how its effecting learning objects, tools and applications and how you can integrate it into your tools today. We’ll review several great examples that will get you excited and motivated to start creating the next generation of elearning today!

View & Download:

http://www.slideshare.net/nickfloro/design-in-elearning

Quick Prototyping Techniques
Learn about the latest tools for creating wireframes or prototyping projects or modules for a elearning production. We’ll discuss techniques to help you demonstrate to your audience how the tool will work, how you can quickly build concepts and articulate them with your team. Bring your ideas, concepts or questions for interactive session.

View & Download:

http://www.slideshare.net/nickfloro/quick-prototyping-techniques

Social Media Demystified 

Join us for an in-depth look at the current state of Social Media and how it can integrate with your e-learning and training efforts. Learn how you can take advantage of it for learning as well as marketing, business and life. We’ll discuss what Social Media is, how to use it effectively, how it is changing our lives, what it takes to get started. Topics will include Launching a Social Network, a look at the latest tools and how they are evolving for Twitter, Facebook, and social media based web sites.

View & Download:

http://www.slideshare.net/nickfloro/social-media-demystified-june-09

Taking the next step in learning: Using Games & Simulations

Need to figure out how to incorporate games into your e-learning strategy? Attend this session for a look at the latest trends and breakthroughs for using games in learning. You’ll get an introduction to games and simulations, an understanding of what works and what doesn’t and you’ll learn how to use new Gaming techniques, blended with Web 2.0, to take training and gaming to the next level.. You’ll leave with new knowledge and a better understanding of ways to use gaming effectively for your audience. You’ll also learn new tools and techniques to share with your teams for developing internally without breaking the bank.

View & Download:

http://www.slideshare.net/nickfloro/elearning-games-simulations

Weekly Twitter Chats about learning Thursday 8:30-10pm EST #Lrnchat

Looking for a powerful way to use twitter and learning, check out #lrnchat. A place for people interested in the topic of learning, to learn from one another and discuss how to help other people learn. The online chat happens every Thursday night 8:30-10pm EST / 5:30-7pm PST.

Last nights questions generated over 75 pages of content:

Q0 (our #lrnchat warmup): How???ve you been? What have you been learning?

Q1: Why aren???t ppl using social media & twitter-like tools in training? What myths do they have? Excuses they use? Legit reasons????Addition: My hope with Q1 is to hear both reasons why not using, and how you reply.

Q2 from @kasey428: Have you used (or seen used) social media to push out training reinforcement as follow-up to ILT or elearning?

Q3 inspired by @ichrisbarnes: Do we know of any places SoMe is bad (for learning, in training, for edu)?

Click here for the recap:

Join on Twitter.com/Lrnchat 

Webinar: Creating Powerful Presentations with Nancy Duarte at VizThink

Watch Nancy’s Duarte’s webinar for VizThink.com for an overview and her advice on improving presentations and designing presentations. Nancy’s company designed and coached Al Gore and his presentation deck for An Inconvenient Truth.

  
http://vizthink.com/blog/2008/06/18/webinar-creating-powerful-presentations-w…

During the webinar she show’s an example (below), where she asked the client in under 2 minutes to explain what was the main point. Notice below how the slide gets divided into 3 clean slides which each slide is able to explain one exact point.

to

WolframAlpha – Making the worlds knowledge computable for everyone – Amazing!

Think about how this can transform your knowledge, training, and provide people with instant access to knowledge. This is something if you have to play and experience, it’s incredible and will get your mind racing. 

First watch the screencast:

Some things I tried:
What is pizza

Find the answer to word patterns: 

Some interesting items from their FAQ’s

How much data is there in Wolfram|Alpha?

Many trillions of elements, continually growing through a large number of feeds.

Does Wolfram|Alpha get its data from the web?

No. It comes from Wolfram|Alpha’s internal knowledge base. Some of the data in that knowledge base is derived from official public or private websites, but most of it is from more systematic primary sources.

Where does Wolfram|Alpha’s data come from?

Many different sources, combined and curated by the Wolfram|Alpha team. At the bottom of each relevant results page there’s a “Source information” button, which provides background sources and references.

Can I find the origin of a particular piece of data?

Most of the data in Wolfram|Alpha is derived by computations, often based on multiple sources. A list of background sources and references is available via the “Source information” button at the bottom of relevant Wolfram|Alpha results pages.

What is the closest precursor to Wolfram|Alpha?

In concept, perhaps Leibniz’s characteristica universalis from the late 1600s???or the science-fiction computers of the 1960s. Technologically, many pieces of Wolfram|Alpha have precursors, but the ambitious scope of the whole project is believed to be unique.

Sw

From Stephen Wolfram’s Blog

And this is what inspired me to believe that building Wolfram|Alpha might be possible.
As a practical matter, many algorithms in Wolfram|Alpha were found by NKS methods???by searching the computational universe for programs that achieve particular purposes.

And there is a curious sense in which the discoveries of NKS about computational irreducibility are what make Wolfram|Alpha possible.
For one of the crucial features of Wolfram|Alpha is its ability to take free-form linguistic input, and to map it onto its precise symbolic representations of computations.

Yet if these computations could be of any form whatsoever, it would be very difficult to recognize the linguistic inputs that represent them.
But from NKS we know that computations fall into two classes: computationally reducible and computationally irreducible.
NKS shows that in the abstract space of all possible computations the computationally irreducible are much the most common.
But here is the crucial point: because those computations are not part of what we have historically studied or discussed, no systematic tradition of human language exists to describe them.

So when we use natural human language as input to Wolfram|Alpha, we are inevitably going to be describing that thin set of computations that have long linguistic traditions, and are computationally reducible.

Those computations cover the traditional sciences. But in a sense it is the very ubiquity of computational irreducibility that forces there to be only small islands of computational reducibility???which can readily be identified even from quite vague linguistic input.

If one looks at Wolfram|Alpha today, much of what it computes is firmly based on OKS (the ???Old Kind of Science???), and in this sense Wolfram|Alpha can be viewed as a shining example of what can be achieved with pre-NKS mathematical science.

Social Media Presentation Resources & Links

Below are a list of resources and links to web sites from the presentation.

Download Presentation – Zip File: http://tr.im/jXEj

Build a Community
NING for all Communities http://www.ning.com
CrowdVine for Conferences http://www.crowdvine.com

Join a Community
http://www.twitter.com  and follow me at http://www.twitter.com/nickfloro
http://www.linkedin.com and link with me at Nick Floro
http://www.myspace.com

Project Discussion Chat with Logging
37 Signals CampFire http://www.campefirenow.com

Twitter Tools
Application for Mac and PC to write, review and monitor tweets http://www.tweetdeck.com
iphone or Touch for tracking basics stats on Twitter or Google Analytics http://ego-app.com
Monitoring or Reviewing Hashtags from an event or discussion http://www.hashtags.com
Create a URL and monitor how many clicks based on a tweet you create http://www.tweetburner.com
Review your twitter grade http://twiter.grader.com
Mac Application for Tweeting – http://www.atebits.com/tweetie-mac/ 
iphone or Touch app for Twitter http://www.atebits.com/tweetie-iphone/

Books
Me 2.0: Build a Powerful Brand to Achieve Career Success by Dan Schawbel

Designing for the Social Web (Voices That Matter) by Joshua Porter

Upcoming Conference on eLearning DevCon 2009 in Salt Lake City June 17-19
http://www.elearningdevcon.com/

Community for the Conference
http://community.elearningdevcon.com/

Resources:
Allows you to add a mini controller for easy links to your page contents by visitors.

Customize portal for your content and communities under one roof.

Social Media Demystified for eLearning DevCon 2009 – June 17-19. Presentation Download.

Attached you can download a copy of the Social Media Demystified for E-Learning presentation that was presented this afternoon. There are several great links in the presentation and I would love to learn more about how you might use the new tools and technologies. Please share your thoughts and experiences so we can all learn and grow from the community. If you were part of the webinar today, thanks for joining us.
 
As I mentioned in the webinar, the eLeariningDevcon.com conference, is one of my favorites. The attendees and presenters to a great job of sharing and discussing the latest tools and technology and I always come back ready to build the next generation of tools. Hope to see you there and please introduce yourself if we don’t tweet before. I’ll be presenting 3 sessions at the conference: Design 09 with Web 2.0, Introduction to Games & Simulations and Quick Prototyping Techniques.
 
Don’t forget to join the online community http://community.elearningdevcon.com to start discussing sessions you are interested, questions you might have, or ideas that might inspire us!

Join me on Twitterhttp://twitter.com/nickfloro

Download Presentation – Zip File: http://tr.im/jXEj

134537444522951285

http://www.elearningdevcon.com/

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

Great Web App to check if your sites are up? AreMySitesUp.com

If you are looking for a tool that can help you track your web sites and alert you if your site is having a problem then you need to check out http://www.aremysitesup.com. The site offers several options, including a free service. Based on your needs they offer an iPhone app for monitoring as well as e-mail, Twitter and SMS support for getting an alert if your site goes down. You also get a follow-up alert once the site is back-up and running to confirm the service has returned. I had been running an older Mac based service which no longer is support and we had tested several web based solutions over the last several months and I loved the options, pricing and solution here. Monitoring can be setup to test a particular url or for a word on a particular page. You can also get warning if the site times out or does not respond.

A look at services:

[blip.tv http://blip.tv/play/Ae2mFpSDDw]

If you need a quick site checker, try the Instant Site Checker at: http://aremysitesup.com/sitechecker