Screencasting Your PresentationCSCI 196 | Kunal Johar

Template Used with Permission

2

What is a Screencast?

• Recording of a screen

• Often has a mouse pointer overlayed so a viewer can follow along

3

Why Make One?

• We’ll cover this today

• What are your thoughts?

4

Record vs Live | Video vs In-Person

• Recap from our September Workshop– What are some things to consider for a live

presentation (in person)

– How about live via a webinar / video conferene

– What factors are important when presenting asynchronously (pre-recorded)

5

Screencasting your Project

• Let’s take a sample project – This is a tool I have been working on

• As with a new audience, you have no context and are jumping in:http://www.screencast-o-matic.com/watch/cXnl0AIbP

6

Mobi-Center

• What is it?

• Who would use Mobi-Center?

• How would they use it?

7

Mobi-Center

• Thoughts on the screencast?

• Was it fine as is?

• Can anything be improved?

8

A Bit of Context

• Sylvan Learning is an after school tutoring franchise (1000 locations)

• They commissioned me to develop a mobile website for them– Must look good on most mobile

browsers– Must support SMS signup– Must show nearest location to zip

code

9

Original Plan

• Sylvan provides graphics– I code into a mobile website

• Sylvan provides SMS API– I capture user’s phone number via this API

• Sylvan provides location finder API– I use API + Google Maps API to render

nearest locations

10

Welcome to the Real World

• Splicing a Mockup into a Website

How to do this:

http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/

11

Ooops #1

• Mockups provided have a menu button, but no menu style– How should it be? Drop down? It’s own page?

• Real world lesson: Client != EngineerClient Needs != What Client Asks For

12

Welcome to the Real World

• Mobile XHTML / CSS– TEL Tag

– View Port

– OnOrientChange

How to do this:http://www.screencast-o-matic.com/watch/cXnl0ZIbN

13

Welcome to the Real World

• Connect to SMS System– Input user’s phone number– Store to database (using API)

14

Ooops #2

• Such APIs do not Exist, nor was there any plan on what to do with phone numbers once they were captured– How would you use SMS technology with regards to

an after school program?

• Real world lesson: while(Scope of project++) { price == price}while(Scope of project--) { price--}

15

Welcome to the Real World

• Get Nearest Location using Targus API

• Output on a Google Map

16

Ooops #3

• “Yea….ummm we don’t know our API username and password and can’t get it for you either. By the way we still want the project done on time”

• Real world lesson: int x = Random(0, 10)fairness_of_life /= x //yes x can be 0

17

Computer Science to the Rescue

• What CS problem do I have to solve?– “Find the nearest location to a given zip code”

18

The Naive Method

• k-Nearest Neighbors– k = 10

• Given N points and location k’, find the k closest neighbors

• What is the naive solution?

19

The Naive MethodGetKNearestSylvanCenters(int k, GeoPoint newLocation, GeoPoint[] allCenterLocations) { //assume all points have been geocoded using Address2GeocodeAPI

//GeoPoint has 2 float values GeoPoint.lat and GeoPoint.lng//GeoPoint.getDistanceBetween (GeoPoint p1, GeoPoint p2) gives the |distance| between two pointsKeyValuePair<int, float>[] minPoints = [array of length k] ; //stores the closest locations and dist

//initialize minPoints with float.MAXVALUE for each element

for (int i = 0; i < allCenterLocations.length; i++) //foreach GeoPoint{

float distance = GeoPoint.getDistanceBetween(newLocation, allCenterLocations[i]);foreach (item in minPoints){

if (distance < item.value){

item.id = i;item.value = distance;sort(minPoints);break;

}}

}}

20

The Naive Method

• Great, got this working, phew!– Any problems with the algorithm?– What is the Big O() for time?– What is the Big O() for memory?

• We have 1000 locations– About how long to get the k-nearest

neighbors on relatively modern web server / platform?

21

Suboptimal!

Disappointed!

Exactly!

weeks of nightmares involving past professors

22

Algorithm Improvements

• Storage is not an issue

• Perhaps we can speed this up with preprocessing?

23

Improvement #1

• Precompute k-nearest neighbors for each point– Big O of pre-computation speed– Big O of memory usage?

• Search for a Neighbor– Big O of Search?

• Once I found a match, I list the k-Nearest Neighbors– O(1)

24

Improvement #1

• Searching:– Speed from O(k*N) to O(N) – Memory from O(k) to O(k*N)

• One problem...

25

Napkin of Intelligence

Doesn’t work unless points are distributed evenly

26

Improvement #2

• Instead of precomputing the k-NN for N points, lets compute them for G evenly distributed points

• How many points g should be in G?– They should cover the 48 contiguous

states

• For each g, compute k-NN– Big O?– Memory Usage?

27

Improvement #2

• Big O of pre-computation– Time is O(G*N)– Memory Usage is now O(k*G)

• Accuracy problem solved

• Search is now O(G) instead of O(N)– Good for large data sets,

but slower than N^2 if we have a few 100 points

• How fast can we make search?

28

Improvement #3

• Quad Tree– Segments an X/Y space into a series of

recursive quadrants– What points should we store in the tree

G or N?

Wikipedia Commons

29

Improvement #3

• We can get search from k’ to nearest g to log(G)

• Is there any way we can avoid having G points?

30

Improvement #4

• Quad-Tree solves the problem of “Find the nearest k locations”– k-Nearest Neighbors

• If the nearest neighbor is 100 miles away would you still want to go?– k-Nearest Neighbors with Bounding Box

31

Improvement #4

• R-Tree– Traversal of rectangular data types

Wikipedia Commons

32

Improvement #4

• R-Tree– Traversal of rectangular data types– Storage = N– Traversal = log(N)– k-NN with bounding box =

• log(N) to find box• O(m * log(m)) where m = points in box

– Sort resultant set

– Above assumes balanced tree

33

Realizations

• The k-NN with bounding box problem is– A searching problem– A sorting problem

• Balanced R-Trees are hard to implement!– Even harder to implement in a database

34

Improvement #3.9

• Use a Hash Table to track “cells”

35

Improvement #3.9

• Given a point k’ it is easy to determine which cell that point should be in– O(1)

36

Improvement #3.9

• Let’s now search around all neighboring cells– O(1)

• Sort the distance from k’ to each point in these 9 cells– O (m log (m))

37

Improvement #3.95

• Using SQL and Haversines– 1 degree Latitude = 69 miles– 1 degree Longitude = 69 miles x– Haversine = distance between 2 spherical

points

• SQL = – Select * points where lat within 100 miles

of lat’ and lng within 100 miles of lng’– Order by Haversine Distance

38

Improvement Conclusion

• Balanced R-Tree is great– In almost all cases

• Hash or Haversine Method– Good as long as there are not too many

points in a given bounding box

• I can sleep easy once again

39

Back to Reality

• Client:“BTW - We found the Targus API info, here you go!”

• Turns out, Targus uses a Priority R-Tree data structure

• Real world lesson: Procrastination turned out to be the optimal solution

40

Mobi-Center vs Senior Design

• 50% time spent dealing with tedious issues

• 50% time spent solving an algorithmically challenge

• Outside of yourself– No one cares about the 100% sweat

that went into your project– Only desire is to see a polished product

41

Mobi-Center Screencast

• What is the most interesting part about Mobi-Center to you?

• What do you think non-CS people think is most interesting?

42

My Thoughts?

• Both CS and Non-CS people find the same parts interesting

• Only “I”, the developer, differs in opinion

• Goal?– Build interest into the details for all audiences– How?

43

Presentation Interest Levels

Approach A

Start Algorithms Your Difficulties Engineering Talk Demo

Time

Inte

rest

Lev

el

44

Presentation Interest Levels

Approach B

Start Real World Problem Demo How it Works Engineering Talk

Time

Inte

rest

Lev

el

45

Mobi-Center Screencast

• What are the important points we should cover for Mobi-Center?

46

Mobi-Center Screencast

• My thoughts: – Algorithm + Development– How easy it is to update– How the geocoder works– How the system works– The polish

• Tilting your phone refreshes the screen• Google Maps integration

47

Mobi-Center Screencast

• A bit more refined with a timeline– Grand Overview (30 seconds)– Give a situation (2 minutes)– Do a mini-demo of the software

based on the situation (3 minutes)– Present algorithm (30 seconds)– Present other key features

(1 minute)– Conclude and close (15 seconds)

48

Activity

• Form 3 groups

• Devise an idea for a script for Mobi-Center– You have 8 minutes to work on this

• Prepare to present and defend your general outline to the class for a ~5 minute video

49

The Script

• Grand Overview• Talk about mobile web becoming the

future• 1-liner describing product (Thoughts?)

50

The Script

• One-Liner• Mobi-center gives a mom-and-pop

feeling to the largest most distributed businesses and services

51

The Script

• The Situation• Using Sylvan Learning as an example

• Parent wants their child to do better in school

• Uses mobi-center to find a location

52

The Script

• Explain the Algorithm• Explain what the problem is and why

we need an algorithm

• Explain the algorithm

• Explain how the algorithm solved the problem

53

The Script

• Show Other Features• Use of Mobile Features

– TEL tag– Orientation Flipping

• Content Management System

• Show how I tested on many devices

54

The Script

• Let’s get the details right• For each item, write a script

• Develop slides or animations if necessary

• Determine segments of application to show

• Practice!

55

Why Practice?

• Screencasting software != Word Processor

• Undo is unforgiving / non-existent

• Can’t hit backspace to make quick edits

• May crash often

56

Story Board

• Helps plan your scripthttp://www.incompetech.com/graphpaper/storyboard/

57

Story Boarding Steps

• Much of this class was spent on the first stages of storyboarding– Think of your story.

– Determine what is important

– Filter out what others may not care much for

– Add details and plan where slides/video will help

58

Next Steps

• Record your screen cast

• Crop out load time and other issues using a basic editor

• Highlight important notes using post-production techniques

59

Post Production

• Zoom– Instead of showing your application

at a constant resolution, zoom into important pieces

• Overlays– “Dim” the screen and highlight

important elements

http://www.screencast-o-matic.com/channels/c6irbHVnT

60

Mobi-Center

• Updated video based on our script / storyboard

http://www.youtube.com/watch?v=87TO2agdOQA

61

Types of Screencasts

• Short Presentations (2 minutes)

• Longer Demo (5-10 minutes)

• Walkthrough (10+ minutes)

• How-to Series (< 2 minutes each)

62

For this Course

• Long Demo– ~8 Minutes– Similiar in format to today’s class

• Walkthrough– Not to exceed 15 minutes

63

Walkthrough

• Storyboard your features– Start at the entry point

(configuration)– Show basic features– Show more advanced features

• Assume audience has seen overview demo and is already interested in your product.– Audience is technical

64

Why Screencast?

• Modalitieshttp://en.wikipedia.org/wiki/Modality_(semiotics)

• Humans learn better when multiple senses are impacted– Reading (Documentation/Brochure)– Doing (Hands-on workshop)– Seeing (Screenshots)– Hearing

65

Why Screencast?

• Screencasts simultaneously impact multiple senses– Screencast with subtitles– Module based screencasts (watch

this video, then take action)

• Provide instant context (e.g. Screencast shows different version of software than what user has)

66

Your Turn

• Develop script / story board– What are the most important points of

this project to me?– What would others find most

interesting?– How can I lead my audience in without

alienating them?– How can I tune down my ego?

• I spent 100 hours on feature X but maybe in the big picture that is not what is important

67

Your Turn

• Order your ideas into a compelling story

• Tell the story– Enhanced with slides and animations– Interjected with footage of your

project– Close meaningfully!

• Clean up with post production

68

Screencast vs 100% Demo

• Very similiar in content and flow

• Can act as your backup demo if there is a hardware or network failure– Plan to mute the audio and talk

through your entire demo– Enthusiastically!

69

Screencast vs 100% Demo

• Real demo has no post production– However, it has you!

• Real demo will have real failures– You must be able to gracefully recover

from them– Recorded demo cannot have errors

• Real demo has real live audience– Be prepared!

70

Other Resources

• http://thescreencastinghandbook.com/ – Discusses storyboarding techniques– Evaluates screencast production and post production software– Contains many reference videos

(GW has a license of this e-book for each student)

• http://www.screencast-o-matic.com/– Free screencasting tool for production– Has post production features at a nominal cost

(GW is working to license the pro version for this course)

71

Great Screencasts

• Within the grasp of what you can accomplish using Screencast-O-Matic– http://www.youtube.com/watch?v=SuNprTu5Y5c (good / ok)– http://www.youtube.com/watch?v=vW3N6jlhi4g (good)– http://www.youtube.com/watch?v=-0a86-byVo8 (good)– http://procasts.co.uk/screencast-examples.html (very good)– http://www.slideshare.net/robertmhoehn/ideascale-cocoa-widget-scraster (very good)

• Fancy– http://www.slideshare.net/scraster/rockets-tape-vault-expert-a-professional-screencast-by-scraster

(Start at minute 1)– http://www.slideshare.net/scraster/ideascale-a-professional-screencast-from-scraster-4386137

(start at 40 seconds in)– http://scraster.com/work/– http://video.techsmith.com/jing/2.1/overview/default.asp

• Really fancy (combination presentation / screen-cast)– http://rubyonrails.org/screencasts/rails3/getting-started-action-dispatch– http://www.youtube.com/watch?v=0QRO3gKj3qw

72

Screencasts and Society

• Show Me Do http://showmedo.com/ • E-Learning / Distance Learning• Industry Uses

– Product Demos– Support Systems

73

Questions?

Template Used with Permission